]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/app/app.component.scss
Bumped to version v5.2.1
[github/Chocobozzz/PeerTube.git] / client / src / app / app.component.scss
1 @use '_variables' as *;
2 @use '_mixins' as *;
3
4 .peertube-container {
5 padding-bottom: 20px;
6 }
7
8 .main-row {
9 min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin});
10 }
11
12 .sub-header-container {
13 margin-top: $header-height;
14 background-color: pvar(--mainBackgroundColor);
15 width: 100%;
16 }
17
18 .root-header {
19 height: $header-height;
20 position: fixed;
21 top: 0;
22 width: 100%;
23 background-color: pvar(--mainBackgroundColor);
24 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
25 display: flex;
26 }
27
28 .top-left-block {
29 z-index: 1;
30 height: $header-height;
31 display: flex;
32 align-items: center;
33 min-width: 0;
34
35 .icon {
36 @include icon(24px);
37 }
38
39 .icon-menu {
40 mask-image: url('../assets/images/misc/menu.svg');
41 -webkit-mask-image: url('../assets/images/misc/menu.svg');
42
43 background-color: pvar(--mainForegroundColor);
44 margin: 0 18px 0 20px;
45
46 @media screen and (max-width: $mobile-view) {
47 margin: 0 10px;
48 }
49 }
50 }
51
52 .root-header-right {
53 height: $header-height;
54 display: flex;
55 align-items: center;
56 justify-content: flex-end;
57 white-space: nowrap;
58 flex: 1;
59 }
60
61 .peertube-title {
62 @include disable-default-a-behaviour;
63
64 font-size: 20px;
65 font-weight: $font-bold;
66 color: inherit !important;
67 display: flex;
68 align-items: center;
69 overflow: hidden;
70 padding: 0 0 0 10px;
71
72 .instance-name {
73 @include ellipsis;
74
75 width: 100%;
76
77 @media screen and (max-width: $mobile-view) {
78 display: none;
79 }
80 }
81
82 .icon.icon-logo {
83 @include margin-right(0.5rem);
84
85 display: inline-block;
86 width: 23px;
87 height: 24px;
88 }
89 }
90
91 .broadcast-message {
92 min-height: 50px;
93 text-align: center;
94 margin-bottom: 0;
95 border-radius: 0;
96 display: grid;
97 grid-template-columns: 1fr 30px;
98 column-gap: 10px;
99
100 my-global-icon {
101 justify-self: center;
102 align-self: center;
103 cursor: pointer;
104 width: 20px;
105 }
106 }