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