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