]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/sass/application.scss
33d7ce0a58e797c6c422b8f7c4e893bd013f0159
[github/Chocobozzz/PeerTube.git] / client / src / sass / application.scss
1 @import '_variables';
2 @import '_mixins';
3
4 $icon-font-path: '../../node_modules/bootstrap-sass/assets/fonts/bootstrap/';
5 @import '_bootstrap';
6
7 $FontPathSourceSansPro: '../../node_modules/npm-font-source-sans-pro/fonts';
8 @import '~npm-font-source-sans-pro/source-sans-pro';
9
10 @import '~primeng/resources/themes/bootstrap/theme.css';
11 @import '~primeng/resources/primeng.css';
12 @import '~video.js/dist/video-js.css';
13
14 @import './video-js-custom';
15 @import './loading-bar';
16
17 [hidden] {
18 display: none !important;
19 }
20
21 body {
22 font-family: 'Source Sans Pro', sans-serif;
23 font-weight: $font-regular;
24 color: #000;
25 }
26
27 input.readonly {
28 /* Force blank on readonly inputs */
29 background-color: #fff !important;
30 }
31
32 label {
33 font-weight: $font-bold;
34 font-size: 15px;
35 }
36
37 .form-error {
38 display: block;
39 color: $red-error;
40 margin-top: 5px;
41 }
42
43 .input-error {
44 border-color: $red-error !important;
45 }
46
47 .glyphicon-black {
48 color: black;
49 }
50
51 .main-col {
52 margin-left: $menu-width;
53
54 .margin-content {
55 margin-left: $not-expanded-horizontal-margins;
56 margin-right: $not-expanded-horizontal-margins;
57 }
58
59 .sub-menu {
60 background-color: #F7F7F7;
61 width: 100%;
62 height: 81px;
63 margin-bottom: 30px;
64 display: flex;
65 align-items: center;
66 padding-left: $not-expanded-horizontal-margins;
67 }
68
69 // Override some properties if the main content is expanded (no menu on the left)
70 &.expanded {
71 margin-left: 0;
72
73 .margin-content {
74 margin-left: $expanded-horizontal-margins;
75 margin-right: $expanded-horizontal-margins;
76 }
77
78 .sub-menu {
79 padding-left: $expanded-horizontal-margins;
80 }
81 }
82 }
83
84 .title-page {
85 color: #000;
86 font-size: 16px;
87 display: inline-block;
88 margin-right: 55px;
89 font-weight: $font-semibold;
90 @include disable-default-a-behaviour;
91
92 &.active, &.title-page-single {
93 border-bottom: 2px solid $orange-color;
94 font-weight: $font-bold;
95 margin-top: 30px;
96 margin-bottom: 25px;
97 }
98
99 &:hover, &:active, &:focus {
100 color: #000;
101 }
102 }
103
104 .admin-sub-header {
105 display: flex;
106 align-items: center;
107 margin-bottom: 30px;
108
109 .admin-sub-title {
110 flex-grow: 1;
111 }
112 }
113
114 .admin-sub-title {
115 font-size: 20px;
116 font-weight: bold;
117 }
118
119 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
120 .glyphicon-refresh-animate {
121 animation: spin .7s infinite linear;
122 }
123
124 @keyframes spin {
125 from { transform: scale(1) rotate(0deg);}
126 to { transform: scale(1) rotate(360deg);}
127 }
128
129 // ngprime data table customizations
130 p-datatable {
131 font-size: 15px !important;
132
133 .ui-datatable-scrollable-header {
134 background-color: #fff !important;
135 }
136
137 .ui-widget-content {
138 border: none !important;
139 }
140
141 .ui-datatable-virtual-table {
142 border-top: none !important;
143 }
144
145 td {
146 border: 1px solid #E5E5E5 !important;
147 padding-left: 15px !important;
148 overflow: hidden !important;
149 text-overflow: ellipsis !important;
150 white-space: nowrap !important;
151 }
152
153 tr {
154 background-color: #fff !important;
155 height: 46px;
156
157 &:hover {
158 background-color: #f0f0f0 !important;
159 }
160
161 &:not(:hover) {
162 .action-cell * {
163 display: none !important;
164 }
165 }
166
167 &:first-child td {
168 border-top: none !important;
169 }
170
171 &:last-child td {
172 border-bottom: none !important;
173 }
174 }
175
176 th {
177 border: none !important;
178 border-bottom: 1px solid #f0f0f0 !important;
179 text-align: left !important;
180 padding: 5px 0 5px 15px !important;
181 font-weight: $font-semibold !important;
182 color: #000 !important;
183
184 &.ui-sortable-column:hover {
185 background-color: #f0f0f0 !important;
186 border: 1px solid #f0f0f0 !important;
187 border-width: 0 1px !important;
188
189 &:first-child {
190 border-width: 0 1px 0 0 !important;
191 }
192 }
193
194 &.ui-state-active {
195 background-color: #fff !important;
196
197 .fa {
198 @extend .glyphicon;
199 font-size: 11px;
200
201 &.fa-sort-asc {
202 @extend .glyphicon-triangle-top;
203 }
204
205 &.fa-sort-desc {
206 @extend .glyphicon-triangle-bottom;
207 }
208 }
209 }
210 }
211
212 .action-cell {
213 width: 250px !important;
214 padding: 0 !important;
215 text-align: center;
216 }
217
218 p-paginator {
219 .ui-paginator-bottom {
220 position: relative;
221 border: none !important;
222 border: 1px solid #f0f0f0 !important;
223 height: 40px;
224 display: flex;
225 justify-content: center;
226 align-items: center;
227
228 a {
229 color: #000 !important;
230 font-weight: $font-semibold !important;
231 margin-right: 20px !important;
232 outline: 0 !important;
233 border-radius: 3px !important;
234 padding: 5px 2px !important;
235
236 &.ui-state-active {
237 &, &:hover, &:active, &:focus {
238 color: #fff !important;
239 background-color: $orange-color !important;
240 }
241 }
242 }
243 }
244 }
245 }
246
247 // Bootstrap customizations
248 .dropdown-menu {
249 border-radius: 3px;
250 box-shadow: 0 3px 6px;
251 font-size: 15px;
252
253 .dropdown-item {
254 padding: 3px 15px;
255 }
256
257 a {
258 color: #000 !important;
259 }
260 }
261
262 .modal {
263 .modal-header {
264 border-bottom: none;
265 margin-bottom: 5px;
266
267 .modal-title {
268 font-size: 20px;
269 font-weight: $font-semibold;
270 }
271
272 .close {
273 @include icon(24px);
274
275 position: relative;
276 right: -1px;
277 float: right;
278 background-image: url('../assets/images/global/cross.svg');
279 }
280 }
281
282 .inputs {
283 margin-top: 40px;
284 margin-bottom: 0;
285 text-align: right;
286
287 .action-button-cancel {
288 @include peertube-button;
289 @include grey-button;
290
291 display: inline-block;
292 margin-right: 10px;
293 }
294
295 .action-button-submit {
296 @include peertube-button;
297 @include orange-button;
298 }
299 }
300 }
301
302 .nav {
303 font-size: 16px !important;
304 border: none !important;
305
306 .nav-item .nav-link {
307 margin-right: 30px;
308 padding: 0;
309 border-radius: 3px;
310 border: none !important;
311
312 .tab-link {
313 display: flex !important;
314 align-items: center;
315 height: 30px !important;
316 padding: 0 15px;
317 }
318
319 &, & a {
320 color: #000 !important;
321 @include disable-default-a-behaviour;
322 }
323
324 &.active, &:hover {
325 background-color: #F0F0F0;
326 }
327
328 &.active {
329 font-weight: $font-semibold !important;
330 }
331 }
332 }
333
334 .orange-button {
335 @include peertube-button;
336 @include orange-button;
337 }
338
339 .orange-button-link {
340 @include peertube-button-link;
341 @include orange-button;
342 }
343
344 .grey-button {
345 @include peertube-button;
346 @include grey-button;
347 }
348
349 .grey-button-link {
350 @include peertube-button-link;
351 @include grey-button;
352 }
353
354 // In tables, don't have a hover different background
355 table {
356 .action-button-edit, .action-button-delete {
357 &:hover, &:active, &:focus, &[disabled], &.disabled {
358 background-color: $grey-color !important;
359 }
360 }
361 }
362
363 // On small screen, menu is absolute
364 @media screen and (max-width: 800px) {
365 .title-menu-left {
366 width: 150px !important;
367 position: absolute !important;
368 z-index: 10000;
369 }
370
371 .main-col {
372 margin-left: 0;
373
374 &, &.expanded {
375 .margin-content {
376 margin-left: 10px;
377 margin-right: 10px;
378 }
379
380 .sub-menu {
381 padding-left: 10px;
382 margin-bottom: 10px;
383 }
384
385 input[type=text], input[type=password] {
386 width: 100% !important;
387 }
388 }
389 }
390 }