]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/app/app.component.scss
Merge remote-tracking branch 'weblate/develop' into develop
[github/Chocobozzz/PeerTube.git] / client / src / app / app.component.scss
CommitLineData
63c4db6d
C
1@import '_variables';
2@import '_mixins';
72c33e71
C
3@import '~bootstrap/scss/functions';
4@import '~bootstrap/scss/variables';
63c4db6d 5
fad0759c
C
6.peertube-container {
7 padding-bottom: 20px;
8}
9
67167390
C
10.main-row {
11 min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin});
12}
13
b33f657c
C
14.sub-header-container {
15 margin-top: $header-height;
e66883b3 16 background-color: pvar(--mainBackgroundColor);
c4741804 17 width: 100%;
b33f657c
C
18}
19
67167390
C
20.header {
21 height: $header-height;
b33f657c 22 position: fixed;
26c6ee80 23 top: 0;
b33f657c 24 width: 100%;
e66883b3 25 background-color: pvar(--mainBackgroundColor);
36f2981f 26 z-index: z(header);
b33f657c
C
27 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
28 display: flex;
266947e5 29}
ea9f487b 30
266947e5
C
31.top-left-block {
32 z-index: 1;
33 height: $header-height;
34 display: flex;
35 align-items: center;
36 min-width: 0;
67167390 37
266947e5
C
38 .icon {
39 @include icon(24px);
40 }
f0c5e8b6 41
266947e5
C
42 .icon-menu {
43 background-color: pvar(--mainForegroundColor);
44 mask-image: url('../assets/images/misc/menu.svg');
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;
3daf4002 71
266947e5
C
72 .instance-name {
73 @include ellipsis;
74
75 width: 100%;
ea9f487b 76 }
ea9f487b 77
266947e5
C
78 .icon.icon-logo {
79 display: inline-block;
80 width: 23px;
81 height: 24px;
931d3430 82 margin-right: 0.5rem;
266947e5
C
83 }
84
85 @media screen and (max-width: $mobile-view) {
86 display: none;
67167390 87 }
897ec54d 88}
72c33e71
C
89
90.broadcast-message {
91 min-height: 50px;
92 text-align: center;
93 margin-bottom: 0;
94 border-radius: 0;
95 display: grid;
96 grid-template-columns: 1fr 30px;
97 column-gap: 10px;
98
99 my-global-icon {
100 justify-self: center;
101 align-self: center;
102 cursor: pointer;
72c33e71
C
103 width: 20px;
104 }
105
72c33e71
C
106 ::ng-deep {
107 p {
108 font-size: 16px;
109 }
110
111 p:last-child {
112 margin-bottom: 0;
113 }
114 }
115}