aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/application.scss178
-rw-r--r--client/src/sass/bootstrap.scss211
-rw-r--r--client/src/sass/class-helpers.scss285
-rw-r--r--client/src/sass/classes.scss34
-rw-r--r--client/src/sass/include/_actor.scss8
-rw-r--r--client/src/sass/include/_badges.scss61
-rw-r--r--client/src/sass/include/_bootstrap-variables.scss11
-rw-r--r--client/src/sass/include/_icons.scss58
-rw-r--r--client/src/sass/include/_mixins.scss130
-rw-r--r--client/src/sass/include/_nav.scss1
-rw-r--r--client/src/sass/include/_variables.scss25
-rw-r--r--client/src/sass/ng-select.scss3
-rw-r--r--client/src/sass/player/_player-variables.scss2
-rw-r--r--client/src/sass/player/peertube-skin.scss9
-rw-r--r--client/src/sass/player/playlist.scss2
-rw-r--r--client/src/sass/player/settings-menu.scss1
-rw-r--r--client/src/sass/primeng-custom.scss198
-rw-r--r--client/src/sass/z-index.scss7
18 files changed, 633 insertions, 591 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 84b575eb3..add01fb71 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,28 +1,20 @@
1$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
2
3@use 'sass:math'; 1@use 'sass:math';
4 2
5@use '_variables' as *; 3@use '_variables' as *;
6@use '_mixins' as *; 4@use '_mixins' as *;
5@use '_icons' as *;
7 6
8@use '_fonts'; 7@use '_fonts';
9 8
10@use './classes'; 9@use './class-helpers';
11
12@use './custom-markup'; 10@use './custom-markup';
13
14@use './ng-select'; 11@use './ng-select';
15 12
16// Needs an import because we extends glyphicon icons in primeng
17@import './bootstrap'; 13@import './bootstrap';
18@import './primeng-custom'; 14@import './primeng-custom';
19 15
20@import './z-index'; 16@import './z-index';
21 17
22[hidden] {
23 display: none !important;
24}
25
26body { 18body {
27 /*** theme ***/ 19 /*** theme ***/
28 // now beware sass requires interpolation 20 // now beware sass requires interpolation
@@ -30,6 +22,7 @@ body {
30 --mainColor: #{$main-color}; 22 --mainColor: #{$main-color};
31 --mainColorLighter: #{$main-color-lighter}; 23 --mainColorLighter: #{$main-color-lighter};
32 --mainColorLightest: #{$main-color-lightest}; 24 --mainColorLightest: #{$main-color-lightest};
25 --mainColorVeryLight: #{$main-color-very-light};
33 26
34 --mainHoverColor: #{$main-hover-color}; 27 --mainHoverColor: #{$main-hover-color};
35 --mainBackgroundHoverColor: #{$main-background-hover-color}; 28 --mainBackgroundHoverColor: #{$main-background-hover-color};
@@ -37,8 +30,6 @@ body {
37 --mainBackgroundColor: #{$bg-color}; 30 --mainBackgroundColor: #{$bg-color};
38 --mainForegroundColor: #{$fg-color}; 31 --mainForegroundColor: #{$fg-color};
39 32
40 --secondaryColor: #{$secondary-color};
41
42 --greyForegroundColor: #{$grey-foreground-color}; 33 --greyForegroundColor: #{$grey-foreground-color};
43 --greyBackgroundColor: #{$grey-background-color}; 34 --greyBackgroundColor: #{$grey-background-color};
44 --greySecondaryBackgroundColor: #{$grey-background-hover-color}; 35 --greySecondaryBackgroundColor: #{$grey-background-hover-color};
@@ -73,7 +64,7 @@ body {
73 font-weight: $font-regular; 64 font-weight: $font-regular;
74 color: pvar(--mainForegroundColor); 65 color: pvar(--mainForegroundColor);
75 background-color: pvar(--mainBackgroundColor); 66 background-color: pvar(--mainBackgroundColor);
76 font-size: 14px; 67 font-size: 1rem;
77 // On desktop browsers, make sure vertical scroll bar is always visible 68 // On desktop browsers, make sure vertical scroll bar is always visible
78 // Allow to disable the scrollbar instead of hide it when the content fit the body 69 // Allow to disable the scrollbar instead of hide it when the content fit the body
79 // And not move the content and header horizontally sticked to right when the content is updating 70 // And not move the content and header horizontally sticked to right when the content is updating
@@ -96,6 +87,10 @@ noscript,
96 margin: 1rem auto; 87 margin: 1rem auto;
97} 88}
98 89
90a {
91 text-decoration: none;
92}
93
99strong { 94strong {
100 font-weight: $font-semibold; 95 font-weight: $font-semibold;
101} 96}
@@ -119,7 +114,7 @@ button {
119 114
120label { 115label {
121 font-weight: $font-bold; 116 font-weight: $font-bold;
122 font-size: 15px; 117 margin-bottom: 0.5rem;
123} 118}
124 119
125code { 120code {
@@ -133,35 +128,6 @@ code {
133 vertical-align: middle; 128 vertical-align: middle;
134} 129}
135 130
136.form-error,
137.form-warning {
138 display: block;
139 margin-top: 5px;
140}
141
142.form-error {
143 color: $red;
144}
145
146.input-error,
147my-input-toggle-hidden ::ng-deep input {
148 border-color: $red !important;
149}
150
151.full-width {
152 width: 100%;
153 margin: 0 auto;
154 max-width: initial;
155}
156
157.glyphicon-black {
158 color: #000;
159}
160
161.row {
162 margin: 0 !important;
163}
164
165.main-col { 131.main-col {
166 @include margin-left($menu-width); 132 @include margin-left($menu-width);
167 133
@@ -215,115 +181,31 @@ my-input-toggle-hidden ::ng-deep input {
215 } 181 }
216} 182}
217 183
218.title-page {
219 @include disable-default-a-behaviour;
220 @include margin-right(55px);
221
222 opacity: 0.6;
223 color: pvar(--mainForegroundColor);
224 font-size: 16px;
225 display: inline-block;
226 font-weight: $font-semibold;
227 border-bottom: 2px solid transparent;
228
229 &.title-page-single {
230 margin-top: 30px;
231 margin-bottom: 25px;
232 }
233
234 &.active {
235 border-bottom-color: pvar(--mainColor);
236 }
237
238 &.title-page-single {
239 font-size: 125%;
240 }
241
242 &:hover,
243 &:active,
244 &:focus {
245 color: pvar(--mainForegroundColor);
246 }
247
248 &.active,
249 &:hover,
250 &:active,
251 &:focus,
252 &.title-page-single {
253 opacity: 1;
254 outline: 0 hidden !important;
255 }
256
257 @media screen and (max-width: $mobile-view) {
258 @include margin-left(15px);
259 }
260}
261
262.title-page-about,
263.title-page-settings {
264 white-space: nowrap;
265 font-size: 115%;
266}
267
268.admin-sub-header {
269 display: flex;
270 align-items: center;
271 margin-bottom: 30px;
272}
273
274// In tables, don't have a hover different background 184// In tables, don't have a hover different background
275table { 185table {
276 .action-button-edit, 186 my-edit-button,
277 .action-button-delete { 187 my-delete-button {
278 &:hover, 188 .action-button {
279 &:active, 189 &:hover,
280 &:focus, 190 &:active,
281 &[disabled], 191 &:focus,
282 &.disabled { 192 &[disabled],
283 background-color: $grey-background-color !important; 193 &.disabled {
194 background-color: pvar(--greyBackgroundColor) !important;
195 opacity: 0.8;
196 }
284 } 197 }
285 } 198 }
286} 199}
287 200
288.no-results { 201my-global-icon[iconName=external-link] {
289 height: 40vh; 202 margin: 0 0.3em;
290 max-height: 500px; 203 width: 0.9em;
291 204 height: 0.9em;
292 display: flex; 205 display: inline-block;
293 flex-direction: column; 206 color: pvar(--inputPlaceholderColor);
294 align-items: center;
295 justify-content: center;
296 font-size: 16px;
297 font-weight: $font-semibold;
298}
299
300.dropdown-item {
301 @include dropdown-with-icon-item;
302
303 my-global-icon {
304 width: 22px;
305 height: 22px;
306 }
307}
308
309/* offsetTop for scrollToAnchor */
310
311.anchor {
312 position: relative; 207 position: relative;
313 top: #{-($header-height + 20px)}; 208 top: -0.1em;
314}
315
316.offset-content { // if sub-menu fixed
317 .anchor {
318 top: #{-($header-height + $sub-menu-height + 20px)};
319 }
320}
321
322.form-group-description {
323 @extend .muted !optional;
324
325 font-size: 90%;
326 margin-top: 10px;
327} 209}
328 210
329@media screen and (max-width: #{breakpoint(xxl)}) { 211@media screen and (max-width: #{breakpoint(xxl)}) {
@@ -342,7 +224,7 @@ table {
342 --videosHorizontalMarginContent: #{pvar(--horizontalMarginContent)}; 224 --videosHorizontalMarginContent: #{pvar(--horizontalMarginContent)};
343 } 225 }
344 226
345 /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */ 227 /* the following applies from 500px to 900px and is partially overridden from 500px to 800px by changes below to $small-view */
346 .main-col, 228 .main-col,
347 .main-col.expanded { 229 .main-col.expanded {
348 --horizontalMarginContent: #{math.div($expanded-horizontal-margins, 3)}; 230 --horizontalMarginContent: #{math.div($expanded-horizontal-margins, 3)};
@@ -382,10 +264,6 @@ table {
382 padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view; 264 padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view;
383 } 265 }
384 266
385 .admin-sub-header {
386 flex-direction: column;
387 }
388
389 my-markdown-textarea { 267 my-markdown-textarea {
390 .root { 268 .root {
391 max-width: 100% !important; 269 max-width: 100% !important;
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index bc37134dd..49585a124 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -1,5 +1,3 @@
1$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
2
3@use '_variables' as *; 1@use '_variables' as *;
4@use '_mixins' as *; 2@use '_mixins' as *;
5 3
@@ -7,67 +5,43 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
7 5
8@import '~bootstrap/scss/functions'; 6@import '~bootstrap/scss/functions';
9@import '~bootstrap/scss/variables'; 7@import '~bootstrap/scss/variables';
10
11@import '~bootstrap/scss/mixins'; 8@import '~bootstrap/scss/mixins';
9@import '~bootstrap/scss/utilities';
10
12@import '~bootstrap/scss/root'; 11@import '~bootstrap/scss/root';
13@import '~bootstrap/scss/reboot'; 12@import '~bootstrap/scss/reboot';
14@import '~bootstrap/scss/type'; 13@import '~bootstrap/scss/type';
15@import '~bootstrap/scss/grid'; 14@import '~bootstrap/scss/grid';
16@import '~bootstrap/scss/tables';
17@import '~bootstrap/scss/forms'; 15@import '~bootstrap/scss/forms';
18@import '~bootstrap/scss/buttons'; 16@import '~bootstrap/scss/buttons';
19@import '~bootstrap/scss/dropdown'; 17@import '~bootstrap/scss/dropdown';
20@import '~bootstrap/scss/button-group'; 18@import '~bootstrap/scss/button-group';
21@import '~bootstrap/scss/input-group';
22@import '~bootstrap/scss/nav'; 19@import '~bootstrap/scss/nav';
23@import '~bootstrap/scss/card'; 20@import '~bootstrap/scss/card';
24@import '~bootstrap/scss/badge'; 21@import '~bootstrap/scss/accordion';
25@import '~bootstrap/scss/alert'; 22@import '~bootstrap/scss/alert';
26@import '~bootstrap/scss/close'; 23@import '~bootstrap/scss/close';
27@import '~bootstrap/scss/modal'; 24@import '~bootstrap/scss/modal';
28@import '~bootstrap/scss/tooltip'; 25@import '~bootstrap/scss/tooltip';
29@import '~bootstrap/scss/popover'; 26@import '~bootstrap/scss/popover';
30@import '~bootstrap/scss/utilities'; 27@import '~bootstrap/scss/spinners';
31 28
32@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons'; 29@import '~bootstrap/scss/helpers';
33 30@import '~bootstrap/scss/utilities/api';
34// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
35.glyphicon-refresh-animate {
36 animation: spin 0.7s infinite linear;
37}
38
39.glyphicon-duplicate {
40 font-size: 70%;
41}
42 31
43.flex-auto { 32.flex-auto {
44 flex: auto; 33 flex: auto;
45} 34}
46 35
47.c-hand { 36.c-hand {
48 cursor: pointer; 37 cursor: pointer !important;
49}
50
51@keyframes spin {
52 from {
53 transform: scale(1) rotate(0deg);
54 }
55
56 to {
57 transform: scale(1) rotate(360deg);
58 }
59} 38}
60 39
61.btn-group > .btn:not(:first-child) { 40// ---------------------------------------------------------------------------
62 border-top-left-radius: 0 !important; 41// Dropdown
63 border-bottom-left-radius: 0 !important; 42// ---------------------------------------------------------------------------
64}
65 43
66.dropdown-menu { 44.dropdown-menu {
67 border-radius: 3px;
68 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
69 font-size: 15px;
70
71 color: pvar(--mainForegroundColor); 45 color: pvar(--mainForegroundColor);
72 background-color: pvar(--mainBackgroundColor); 46 background-color: pvar(--mainBackgroundColor);
73 47
@@ -78,39 +52,40 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
78 .dropdown-item { 52 .dropdown-item {
79 padding: 3px 15px; 53 padding: 3px 15px;
80 54
81 color: pvar(--mainForegroundColor);
82 background-color: pvar(--mainBackgroundColor);
83
84 &.active { 55 &.active {
85 color: pvar(--mainBackgroundColor) !important; 56 color: pvar(--mainBackgroundColor) !important;
86 background-color: pvar(--mainHoverColor); 57 background-color: pvar(--mainHoverColor);
87 opacity: 0.9; 58 opacity: 0.9;
88 } 59 }
89 60
90 a:active,
91 &:hover {
92 color: pvar(--mainForegroundColor) !important;
93 background-color: pvar(--mainBackgroundHoverColor);
94 }
95
96 &::after { 61 &::after {
97 display: none; 62 display: none;
98 } 63 }
99 } 64 }
100 65
101 button {
102 @include disable-default-a-behaviour;
103 }
104
105 a { 66 a {
106 @include disable-default-a-behaviour; 67 @include disable-default-a-behaviour;
107 } 68 }
108} 69}
109 70
110.badge { 71.dropdown-divider {
111 line-height: 1.1; 72 margin: 0.3rem 0;
112} 73}
113 74
75// ---------------------------------------------------------------------------
76// Alert
77// ---------------------------------------------------------------------------
78
79.alert {
80 p:last-child {
81 margin-bottom: 0;
82 }
83}
84
85// ---------------------------------------------------------------------------
86// Modal
87// ---------------------------------------------------------------------------
88
114@media screen and (min-width: #{breakpoint(md)}) { 89@media screen and (min-width: #{breakpoint(md)}) {
115 .modal::before { 90 .modal::before {
116 vertical-align: middle; 91 vertical-align: middle;
@@ -149,18 +124,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
149 my-global-icon { 124 my-global-icon {
150 @include icon(22px); 125 @include icon(22px);
151 126
152 position: relative;
153 top: 5px;
154 float: right;
155
156 margin: 0;
157 padding: 0;
158 opacity: 0.5; 127 opacity: 0.5;
159 128
160 &[iconName=cross] { /* stylelint-disable-line selector-max-compound-selectors */ 129 &:hover {
161 @include icon(16px); 130 opacity: 0.8;
162
163 top: -3px;
164 } 131 }
165 } 132 }
166 } 133 }
@@ -199,14 +166,15 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
199 opacity: 0.75; 166 opacity: 0.75;
200 content: ''; 167 content: '';
201 display: block; 168 display: block;
202 position: fixed;
203 z-index: z(overlay);
204 } 169 }
205 } 170 }
206 } 171 }
207} 172}
208 173
209// Nav customizations 174// ---------------------------------------------------------------------------
175// Nav
176// ---------------------------------------------------------------------------
177
210.nav .nav-link { 178.nav .nav-link {
211 display: flex !important; 179 display: flex !important;
212 align-items: center; 180 align-items: center;
@@ -219,7 +187,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
219 font-weight: $font-semibold !important; 187 font-weight: $font-semibold !important;
220 188
221 .nav-link { 189 .nav-link {
222 opacity: 0.6 !important; 190 opacity: 0.7 !important;
223 191
224 &.active, 192 &.active,
225 &:hover, 193 &:hover,
@@ -243,7 +211,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
243 font-weight: $font-semibold; 211 font-weight: $font-semibold;
244 border: 0; 212 border: 0;
245 border-bottom: 2px solid transparent; 213 border-bottom: 2px solid transparent;
246 opacity: 0.6; 214 opacity: 0.7;
247 215
248 &.active { 216 &.active {
249 color: pvar(--mainForegroundColor); 217 color: pvar(--mainForegroundColor);
@@ -259,6 +227,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
259 } 227 }
260} 228}
261 229
230// ---------------------------------------------------------------------------
231// Card, collapse and accordion
232// ---------------------------------------------------------------------------
233
262.card { 234.card {
263 background-color: pvar(--mainBackgroundColor); 235 background-color: pvar(--mainBackgroundColor);
264 border-color: #dee2e6; 236 border-color: #dee2e6;
@@ -277,8 +249,13 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
277 } 249 }
278} 250}
279 251
280.dropdown-divider { 252// ---------------------------------------------------------------------------
281 margin: 0.3rem 0; 253// Buttons & form controls
254// ---------------------------------------------------------------------------
255
256.btn:not(.btn-sm) {
257 font-size: $button-font-size;
258 line-height: 1.2;
282} 259}
283 260
284.btn-outline-secondary { 261.btn-outline-secondary {
@@ -292,18 +269,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
292 } 269 }
293} 270}
294 271
295.btn-outline-tertiary {
296 color: pvar(--secondaryColor);
297 border-color: pvar(--secondaryColor);
298
299 &:focus-within,
300 &:focus,
301 &:hover {
302 color: pvar(--mainBackgroundColor);
303 background-color: pvar(--secondaryColor);
304 }
305}
306
307.btn-group.select-button { 272.btn-group.select-button {
308 font-weight: $font-semibold; 273 font-weight: $font-semibold;
309 274
@@ -332,60 +297,47 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
332 } 297 }
333} 298}
334 299
335// input box-shadow on focus
336.form-control { 300.form-control {
337 font-size: 15px;
338 color: pvar(--mainForegroundColor); 301 color: pvar(--mainForegroundColor);
339 background-color: pvar(--inputBackgroundColor); 302 background-color: pvar(--inputBackgroundColor);
340 outline: none; 303 outline: none;
341
342 &:focus-within,
343 &:focus {
344 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
345
346 &.input-error {
347 box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)};
348 }
349 }
350} 304}
351 305
352.input-group { 306.input-group {
353 > .form-control { 307 > .btn,
354 flex: initial; 308 > .input-group-text {
309 height: $button-height;
310 }
311
312 > .input-group-text {
313 line-height: normal;
314 opacity: 0.9;
355 } 315 }
356 316
357 input.form-control { 317 .input-group-text > .dropdown-toggle {
358 width: unset !important; 318 display: flex;
359 flex-grow: 1;
360 } 319 }
361 320
362 .input-group-prepend + input { 321 .last-in-group {
363 border-top-left-radius: 0 !important; 322 border-top-right-radius: 3px !important;
364 border-bottom-left-radius: 0 !important; 323 border-bottom-right-radius: 3px !important;
365 } 324 }
366} 325}
367 326
368.has-feedback.has-clear { 327.has-clear {
369 position: relative;
370
371 input { 328 input {
372 @include padding-right(1.5rem !important); 329 @include padding-right(1.5rem !important);
373 } 330 }
374 331
375 .form-control-clear { 332 .form-control-clear {
376 color: rgba(0, 0, 0, 0.4); 333 color: rgba(0, 0, 0, 0.4);
377 /*
378 * Enable pointer events as they have been disabled since Bootstrap 3.3
379 * See https://github.com/twbs/bootstrap/pull/14104
380 */
381 pointer-events: all;
382 display: flex; 334 display: flex;
383 justify-content: center; 335 justify-content: center;
384 align-items: center; 336 align-items: center;
385 position: absolute;
386 right: .5rem;
387 height: 95%; 337 height: 95%;
388 font-size: 14px; 338 font-size: 14px;
339 position: absolute;
340 right: .5rem;
389 341
390 &:hover { 342 &:hover {
391 color: rgba(0, 0, 0, 0.7); 343 color: rgba(0, 0, 0, 0.7);
@@ -397,44 +349,3 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
397 display: none; 349 display: none;
398 } 350 }
399} 351}
400
401.callout {
402 padding: 1.25rem;
403 border: 1px solid #eee;
404 border-radius: .25rem;
405
406 > label {
407 position: relative;
408 top: -5px;
409 left: -10px;
410 color: #6c757d !important;
411 }
412
413 &:not(.callout-light) {
414 border-left-width: .25rem;
415 }
416
417 &.callout-info {
418 border-color: pvar(--mainColorLightest);
419 border-left-color: pvar(--mainColor);
420 }
421}
422
423// Override these properties for Bidi support
424@each $size, $length in $spacers {
425 .ml-#{$size} {
426 @include margin-left($length);
427 }
428
429 .mr-#{$size} {
430 @include margin-right($length);
431 }
432
433 .pl-#{$size} {
434 @include padding-left($length);
435 }
436
437 .pr-#{$size} {
438 @include padding-right($length);
439 }
440}
diff --git a/client/src/sass/class-helpers.scss b/client/src/sass/class-helpers.scss
new file mode 100644
index 000000000..2d7e0cce9
--- /dev/null
+++ b/client/src/sass/class-helpers.scss
@@ -0,0 +1,285 @@
1@use '_variables' as *;
2@use '_mixins' as *;
3@use '_badges' as *;
4@use '_icons' as *;
5
6.link-orange {
7 color: pvar(--mainForegroundColor);
8 font-weight: $font-bold;
9 border-bottom: 0.19em solid pvar(--mainColor);
10 display: inline-block;
11 line-height: 1.2;
12
13 &:hover {
14 color: pvar(--mainForegroundColor);
15 opacity: 0.8;
16 }
17}
18
19.underline-orange {
20 display: inline-block;
21 border-bottom: 0.19em solid pvar(--mainColor);
22}
23
24// ---------------------------------------------------------------------------
25
26.peertube-button {
27 @include peertube-button;
28}
29
30.peertube-button-link {
31 @include peertube-button-link;
32}
33
34.orange-button {
35 @include orange-button;
36}
37
38.orange-button-inverted {
39 @include orange-button-inverted;
40}
41
42.grey-button {
43 @include grey-button;
44}
45
46.tertiary-button {
47 @include tertiary-button;
48}
49
50.peertube-radio-container {
51 @include peertube-radio-container;
52}
53
54// ---------------------------------------------------------------------------
55
56.muted {
57 color: pvar(--greyForegroundColor) !important;
58}
59
60// ---------------------------------------------------------------------------
61
62.pt-badge {
63 @include peertube-badge;
64}
65
66// ---------------------------------------------------------------------------
67
68.form-group {
69 margin-bottom: 1rem;
70}
71
72.input-error:not(:focus) {
73 &,
74 + .nav-preview, // Markdown textarea
75 + * + .tab-content {
76 border-color: $red !important;
77 }
78}
79
80.input-group .input-error {
81 z-index: 3;
82}
83
84.form-error,
85.form-warning {
86 display: block;
87 margin-top: 5px;
88 font-size: 0.9em;
89}
90
91.form-error {
92 color: $red;
93}
94
95// Disable red error on input focus
96.input-error:focus,
97.input-group:focus-within {
98 + .form-error,
99 + * + .form-error, // Markdown textarea
100 + * + * + .form-error {
101 color: pvar(--mainForegroundColor);
102 }
103}
104
105.form-group-description {
106 @extend .muted !optional;
107
108 font-size: 14px;
109 margin-top: 10px;
110}
111
112label + .form-group-description {
113 margin-bottom: 10px;
114 margin-top: 0;
115}
116
117// ---------------------------------------------------------------------------
118
119
120.sub-menu-entry {
121 @include disable-default-a-behaviour;
122 @include margin-right(55px);
123
124 opacity: 0.7;
125 color: pvar(--mainForegroundColor);
126 display: inline-block;
127 font-weight: $font-semibold;
128 border-bottom: 2px solid transparent;
129 white-space: nowrap;
130 font-size: 1rem;
131
132 &.active {
133 border-bottom-color: pvar(--mainColor);
134 }
135
136 &:hover,
137 &:active,
138 &:focus {
139 color: pvar(--mainForegroundColor);
140 }
141
142 &.active,
143 &:hover,
144 &:active,
145 &:focus {
146 opacity: 1;
147 outline: 0 hidden !important;
148 }
149
150 @media screen and (max-width: $mobile-view) {
151 @include margin-left(15px);
152 }
153}
154
155.title-page-v2 {
156 font-weight: normal;
157 font-size: 15px;
158 padding: 35px 25px;
159}
160
161.title-page {
162 @include margin-right(55px);
163
164 margin-top: 30px;
165 margin-bottom: 25px;
166
167 color: pvar(--mainForegroundColor);
168 display: inline-block;
169 font-weight: $font-semibold;
170 font-size: 1.25rem;
171
172 a {
173 @include disable-default-a-behaviour;
174
175 color: inherit;
176
177 &:hover {
178 color: inherit;
179 opacity: 0.8;
180 }
181 }
182
183 @media screen and (max-width: $mobile-view) {
184 @include margin-left(15px);
185 }
186}
187
188.admin-sub-header {
189 display: flex;
190 align-items: center;
191 margin-bottom: 30px;
192
193 @media screen and (max-width: $small-view) {
194 flex-direction: column;
195 }
196}
197
198// ---------------------------------------------------------------------------
199
200.no-results {
201 height: 40vh;
202 max-height: 500px;
203
204 display: flex;
205 flex-direction: column;
206 align-items: center;
207 justify-content: center;
208 font-weight: $font-semibold;
209}
210
211// ---------------------------------------------------------------------------
212
213.chevron-down {
214 @include chevron-down(0.55rem, 0.15rem);
215
216 margin: 0 8px;
217}
218
219.chevron-up {
220 @include chevron-up(0.55rem, 0.15rem);
221
222 margin: 0 8px;
223}
224
225.chevron-right {
226 @include chevron-right(0.55rem, 0.15rem);
227
228 margin: 0 8px;
229}
230
231.chevron-left {
232 @include chevron-left(0.55rem, 0.15rem);
233
234 margin: 0 8px;
235}
236
237// ---------------------------------------------------------------------------
238
239.callout {
240 padding: 1.25rem;
241 border: 1px solid #eee;
242 border-radius: .25rem;
243 position: relative;
244
245 > label {
246 position: relative;
247 top: -5px;
248 left: -10px;
249 color: #6c757d !important;
250 }
251
252 &:not(.callout-light) {
253 border-left-width: .25rem;
254 }
255
256 &.callout-orange {
257 border-color: pvar(--mainColorLightest);
258
259 &:not(.callout-light) {
260 border-left-color: pvar(--mainColor);
261 }
262 }
263}
264
265// ---------------------------------------------------------------------------
266
267.anchor {
268 position: relative;
269 top: #{-($header-height + 20px)};
270}
271
272.offset-content { // if sub-menu fixed
273 .anchor {
274 top: #{-($header-height + $sub-menu-height + 20px)};
275 }
276}
277
278// ---------------------------------------------------------------------------
279
280.alert {
281 &.pt-alert-primary {
282 background-color: pvar(--mainColorVeryLight);
283 border: 2px solid pvar(--mainColorLightest);
284 }
285}
diff --git a/client/src/sass/classes.scss b/client/src/sass/classes.scss
deleted file mode 100644
index 90cdcf3ed..000000000
--- a/client/src/sass/classes.scss
+++ /dev/null
@@ -1,34 +0,0 @@
1@use '_variables' as *;
2@use '_mixins' as *;
3
4.peertube-button {
5 @include peertube-button;
6}
7
8.peertube-button-link {
9 @include peertube-button-link;
10}
11
12.orange-button {
13 @include orange-button;
14}
15
16.orange-button-inverted {
17 @include orange-button-inverted;
18}
19
20.grey-button {
21 @include grey-button;
22}
23
24.tertiary-button {
25 @include tertiary-button;
26}
27
28.peertube-radio-container {
29 @include peertube-radio-container;
30}
31
32.muted {
33 color: pvar(--greyForegroundColor) !important;
34}
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
index aa2331efe..bf73b52dc 100644
--- a/client/src/sass/include/_actor.scss
+++ b/client/src/sass/include/_actor.scss
@@ -36,18 +36,16 @@
36 .actor-owner { 36 .actor-owner {
37 @include disable-default-a-behaviour; 37 @include disable-default-a-behaviour;
38 38
39 font-size: 13px;
40 color: pvar(--mainForegroundColor); 39 color: pvar(--mainForegroundColor);
40 display: flex;
41 align-items: center;
41 42
42 span:hover { 43 span:hover {
43 opacity: 0.8; 44 opacity: 0.8;
44 } 45 }
45 46
46 my-actor-avatar { 47 my-actor-avatar {
47 @include margin-left(7px); 48 @include margin-left(5px);
48
49 display: inline-block;
50 vertical-align: top;
51 } 49 }
52 } 50 }
53 51
diff --git a/client/src/sass/include/_badges.scss b/client/src/sass/include/_badges.scss
new file mode 100644
index 000000000..4bc70d4a9
--- /dev/null
+++ b/client/src/sass/include/_badges.scss
@@ -0,0 +1,61 @@
1@use '_variables' as *;
2@use '_mixins' as *;
3
4@mixin peertube-badge {
5 display: inline-block;
6 border-radius: .25rem;
7 padding: .25em .4em;
8 font-size: 75%;
9 font-weight: $font-semibold;
10 line-height: 1.1;
11
12 &.badge-primary {
13 color: pvar(--mainBackgroundColor);
14 background-color: pvar(--mainColor);
15 }
16
17 &.badge-secondary {
18 color: pvar(--mainBackgroundColor);
19 background-color: pvar(--greyForegroundColor);
20 opacity: 0.7;
21 }
22
23 &.badge-banned,
24 &.badge-danger,
25 &.badge-red {
26 background-color: #ffcdd2;
27 color: #c63737;
28 }
29
30 &.badge-banned {
31 text-decoration: line-through;
32 }
33
34 &.badge-yellow,
35 &.badge-warning {
36 background-color: #feedaf;
37 color: #8a5340;
38 }
39
40 &.badge-brown {
41 background-color: #ffd8b2;
42 color: #805b36;
43 }
44
45 &.badge-green,
46 &.badge-success {
47 background-color: #c8e6c9;
48 color: #256029;
49 }
50
51 &.badge-blue,
52 &.badge-info {
53 background-color: #b3e5fc;
54 color: #23547b;
55 }
56
57 &.badge-purple {
58 background-color: #eccfff;
59 color: #694382;
60 }
61}
diff --git a/client/src/sass/include/_bootstrap-variables.scss b/client/src/sass/include/_bootstrap-variables.scss
index 41a1448c4..7885e067c 100644
--- a/client/src/sass/include/_bootstrap-variables.scss
+++ b/client/src/sass/include/_bootstrap-variables.scss
@@ -1,4 +1,4 @@
1$dropdown-link-active-bg: inherit; 1@use '_variables' as *;
2 2
3$modal-footer-border-width: 0; 3$modal-footer-border-width: 0;
4$modal-md: 600px; 4$modal-md: 600px;
@@ -40,3 +40,12 @@ $input-focus-border-color: #ced4da;
40 40
41$nav-pills-link-active-bg: #F0F0F0; 41$nav-pills-link-active-bg: #F0F0F0;
42$nav-pills-link-active-color: #000; 42$nav-pills-link-active-color: #000;
43$nav-link-transition: none;
44
45$dropdown-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
46$dropdown-border-radius: 3px;
47$dropdown-link-active-color: pvar(--mainForegroundColor);
48$dropdown-link-active-bg: pvar(--mainBackgroundHoverColor);
49
50$accordion-button-active-bg: pvar(--mainColorVeryLight);
51$accordion-button-active-color: pvar(--mainForegroundColor);
diff --git a/client/src/sass/include/_icons.scss b/client/src/sass/include/_icons.scss
new file mode 100644
index 000000000..5d8a312db
--- /dev/null
+++ b/client/src/sass/include/_icons.scss
@@ -0,0 +1,58 @@
1@use '_variables' as *;
2
3@mixin chevron ($size, $border-width) {
4 border-style: solid;
5 border-width: $border-width $border-width 0 0;
6 content: '';
7 display: inline-block;
8 transform: rotate(-45deg);
9 height: $size;
10 width: $size;
11 position: relative;
12}
13
14@mixin chevron-right ($size, $border-width) {
15 @include chevron($size, $border-width);
16
17 left: 0;
18 transform: rotate(45deg);
19}
20
21@mixin chevron-down ($size, $border-width) {
22 @include chevron($size, $border-width);
23
24 bottom: 0.15em;
25 transform: rotate(135deg);
26}
27
28@mixin chevron-up ($size, $border-width) {
29 @include chevron($size, $border-width);
30
31 top: 0.15em;
32 transform: rotate(-45deg);
33}
34
35@mixin chevron-left ($size, $border-width) {
36 @include chevron($size, $border-width);
37
38 left: 0.25em;
39 transform: rotate(-135deg);
40}
41
42// ---------------------------------------------------------------------------
43
44@mixin arrow-up ($size) {
45 width: 0;
46 height: 0;
47 border-left: $size solid transparent;
48 border-right: $size solid transparent;
49 border-bottom: $size solid pvar(--mainForegroundColor);
50}
51
52@mixin arrow-down ($size) {
53 width: 0;
54 height: 0;
55 border-left: $size solid transparent;
56 border-right: $size solid transparent;
57 border-top: $size solid pvar(--mainForegroundColor);
58}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 3c5aa6cdf..1b460b723 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -89,11 +89,13 @@
89 display: inline-block; 89 display: inline-block;
90 height: $button-height; 90 height: $button-height;
91 width: $width; 91 width: $width;
92 max-width: $width;
92 color: pvar(--inputForegroundColor); 93 color: pvar(--inputForegroundColor);
93 background-color: pvar(--inputBackgroundColor); 94 background-color: pvar(--inputBackgroundColor);
94 border: 1px solid $input-border-color; 95 border: 1px solid $input-border-color;
95 border-radius: 3px; 96 border-radius: 3px;
96 font-size: 15px; 97 font-size: $form-input-font-size;
98 line-height: $form-input-line-height;
97 99
98 &::placeholder { 100 &::placeholder {
99 color: pvar(--inputPlaceholderColor); 101 color: pvar(--inputPlaceholderColor);
@@ -108,19 +110,6 @@
108 } 110 }
109} 111}
110 112
111@mixin peertube-input-group($width) {
112 width: $width;
113 min-height: $button-height;
114 padding-top: 0;
115 padding-bottom: 0;
116 flex-wrap: nowrap;
117
118 .input-group-text {
119 font-size: 14px;
120 color: #808080;
121 }
122}
123
124@mixin peertube-textarea ($width, $height) { 113@mixin peertube-textarea ($width, $height) {
125 @include peertube-input-text($width); 114 @include peertube-input-text($width);
126 115
@@ -128,7 +117,6 @@
128 background-color: pvar(--textareaBackgroundColor) !important; 117 background-color: pvar(--textareaBackgroundColor) !important;
129 height: $height; 118 height: $height;
130 padding: 5px 15px; 119 padding: 5px 15px;
131 font-size: 15px;
132} 120}
133 121
134@mixin orange-button { 122@mixin orange-button {
@@ -261,7 +249,6 @@
261 249
262 border: 0; 250 border: 0;
263 font-weight: $font-semibold; 251 font-weight: $font-semibold;
264 font-size: 15px;
265 height: $button-height; 252 height: $button-height;
266 line-height: $button-height; 253 line-height: $button-height;
267 254
@@ -271,11 +258,25 @@
271 text-align: center; 258 text-align: center;
272 cursor: pointer; 259 cursor: pointer;
273 260
261 font-size: $button-font-size;
262
274 my-global-icon + * { 263 my-global-icon + * {
275 @include margin-right(4px); 264 @include margin-right(4px);
276 } 265 }
277} 266}
278 267
268@mixin peertube-button-big {
269 height: auto;
270 padding: 10px 25px;
271 font-size: 18px;
272 line-height: 1.2;
273 border: 0;
274 font-weight: $font-semibold;
275
276 // Because of primeng that redefines border-radius of all input[type="..."]
277 border-radius: 3px !important;
278}
279
279@mixin peertube-button-link { 280@mixin peertube-button-link {
280 @include disable-default-a-behaviour; 281 @include disable-default-a-behaviour;
281 @include peertube-button; 282 @include peertube-button;
@@ -292,10 +293,6 @@
292} 293}
293 294
294@mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) { 295@mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
295 display: inline-flex;
296 align-items: center;
297 line-height: normal !important;
298
299 my-global-icon { 296 my-global-icon {
300 @include margin-right($margin-right); 297 @include margin-right($margin-right);
301 298
@@ -361,7 +358,6 @@
361 color: pvar(--inputForegroundColor); 358 color: pvar(--inputForegroundColor);
362 background: pvar(--inputBackgroundColor); 359 background: pvar(--inputBackgroundColor);
363 position: relative; 360 position: relative;
364 font-size: 15px;
365 height: min-content; 361 height: min-content;
366 362
367 &.disabled { 363 &.disabled {
@@ -371,6 +367,7 @@
371 cursor: default; 367 cursor: default;
372 } 368 }
373 } 369 }
370
374 select[disabled] { 371 select[disabled] {
375 background-color: #f9f9f9; 372 background-color: #f9f9f9;
376 } 373 }
@@ -402,6 +399,8 @@
402 height: $button-height; 399 height: $button-height;
403 text-overflow: ellipsis; 400 text-overflow: ellipsis;
404 color: pvar(--mainForegroundColor); 401 color: pvar(--mainForegroundColor);
402 font-size: $form-input-font-size;
403 line-height: $form-input-line-height;
405 404
406 &:focus { 405 &:focus {
407 outline: none; 406 outline: none;
@@ -434,6 +433,10 @@
434 433
435// Thanks: https://codepen.io/manabox/pen/raQmpL 434// Thanks: https://codepen.io/manabox/pen/raQmpL
436@mixin peertube-radio-container { 435@mixin peertube-radio-container {
436 label {
437 font-size: $form-input-font-size;
438 }
439
437 [type=radio]:checked, 440 [type=radio]:checked,
438 [type=radio]:not(:checked) { 441 [type=radio]:not(:checked) {
439 position: absolute; 442 position: absolute;
@@ -447,7 +450,6 @@
447 cursor: pointer; 450 cursor: pointer;
448 line-height: 20px; 451 line-height: 20px;
449 display: inline-block; 452 display: inline-block;
450 font-size: 15px;
451 font-weight: $font-regular; 453 font-weight: $font-regular;
452 } 454 }
453 455
@@ -539,7 +541,6 @@
539 + span + span { 541 + span + span {
540 @include margin-left(5px); 542 @include margin-left(5px);
541 543
542 font-size: 15px;
543 font-weight: $font-regular; 544 font-weight: $font-regular;
544 cursor: pointer; 545 cursor: pointer;
545 display: inline; 546 display: inline;
@@ -552,50 +553,6 @@
552 } 553 }
553} 554}
554 555
555@mixin peertube-badge {
556 border-radius: 2px;
557 padding: 1/4em 1/2em;
558 text-transform: uppercase;
559 font-weight: $font-bold;
560 font-size: 12px;
561 letter-spacing: 1/3px;
562
563 &.badge-banned,
564 &.badge-red {
565 background-color: #ffcdd2;
566 color: #c63737;
567 }
568
569 &.badge-banned {
570 text-decoration: line-through;
571 }
572
573 &.badge-yellow {
574 background-color: #feedaf;
575 color: #8a5340;
576 }
577
578 &.badge-brown {
579 background-color: #ffd8b2;
580 color: #805b36;
581 }
582
583 &.badge-green {
584 background-color: #c8e6c9;
585 color: #256029;
586 }
587
588 &.badge-blue {
589 background-color: #b3e5fc;
590 color: #23547b;
591 }
592
593 &.badge-purple {
594 background-color: #eccfff;
595 color: #694382;
596 }
597}
598
599@mixin actor-avatar-size ($size) { 556@mixin actor-avatar-size ($size) {
600 display: inline-block; 557 display: inline-block;
601 width: $size; 558 width: $size;
@@ -606,7 +563,6 @@
606 563
607@mixin actor-counters ($separator-margin: 10px) { 564@mixin actor-counters ($separator-margin: 10px) {
608 color: pvar(--greyForegroundColor); 565 color: pvar(--greyForegroundColor);
609 font-size: 16px;
610 display: flex; 566 display: flex;
611 align-items: center; 567 align-items: center;
612 568
@@ -617,30 +573,6 @@
617 } 573 }
618} 574}
619 575
620@mixin chevron ($size, $border-width) {
621 border-style: solid;
622 border-width: $border-width $border-width 0 0;
623 content: '';
624 display: inline-block;
625 transform: rotate(-45deg);
626 height: $size;
627 width: $size;
628}
629
630@mixin chevron-right ($size, $border-width) {
631 @include chevron($size, $border-width);
632
633 left: 0;
634 transform: rotate(45deg);
635}
636
637@mixin chevron-left ($size, $border-width) {
638 @include chevron($size, $border-width);
639
640 left: 0.25em;
641 transform: rotate(-135deg);
642}
643
644@mixin in-content-small-title { 576@mixin in-content-small-title {
645 text-transform: uppercase; 577 text-transform: uppercase;
646 color: pvar(--mainColor); 578 color: pvar(--mainColor);
@@ -652,7 +584,7 @@
652 text-transform: uppercase; 584 text-transform: uppercase;
653 color: pvar(--mainColor); 585 color: pvar(--mainColor);
654 font-weight: $font-bold; 586 font-weight: $font-bold;
655 font-size: 110%; 587 font-size: 1rem;
656 margin-bottom: 10px; 588 margin-bottom: 10px;
657} 589}
658 590
@@ -733,10 +665,6 @@
733 white-space: nowrap; 665 white-space: nowrap;
734 transition: width 0.6s ease; 666 transition: width 0.6s ease;
735 667
736 &.secondary {
737 background-color: pvar(--secondaryColor);
738 }
739
740 &.red { 668 &.red {
741 background-color: lighten($color: #c54130, $amount: 10); 669 background-color: lighten($color: #c54130, $amount: 10);
742 } 670 }
@@ -746,11 +674,10 @@
746@mixin breadcrumb { 674@mixin breadcrumb {
747 display: flex; 675 display: flex;
748 flex-wrap: wrap; 676 flex-wrap: wrap;
749 padding: 0.75rem 1rem; 677 padding: 0;
750 margin-bottom: 1rem; 678 margin-bottom: 1rem;
751 list-style: none; 679 list-style: none;
752 background-color: pvar(--submenuBackgroundColor); 680 font-weight: $font-semibold;
753 border-radius: 0.25rem;
754 681
755 .breadcrumb-item { 682 .breadcrumb-item {
756 display: flex; 683 display: flex;
@@ -939,8 +866,9 @@
939 vertical-align: top; 866 vertical-align: top;
940 } 867 }
941 868
942 .badge { 869 .pt-badge {
943 @include margin-left(7px); 870 @include margin-left(7px);
871
944 vertical-align: top; 872 vertical-align: top;
945 } 873 }
946 } 874 }
diff --git a/client/src/sass/include/_nav.scss b/client/src/sass/include/_nav.scss
index d069ac9ae..5fd32df45 100644
--- a/client/src/sass/include/_nav.scss
+++ b/client/src/sass/include/_nav.scss
@@ -20,7 +20,6 @@
20 margin-bottom: -$border-width; 20 margin-bottom: -$border-width;
21 height: $nav-link-height !important; 21 height: $nav-link-height !important;
22 padding: 0 30px !important; 22 padding: 0 30px !important;
23 font-size: 15px;
24 23
25 border: $border-width $border-type transparent; 24 border: $border-width $border-type transparent;
26 25
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index e46b96d8a..2b893a62b 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -1,4 +1,6 @@
1@use 'sass:math'; 1@use 'sass:math';
2@use 'sass:color';
3@use '~bootstrap/scss/functions' as *;
2 4
3$small-view: 800px; 5$small-view: 800px;
4$mobile-view: 500px; 6$mobile-view: 500px;
@@ -13,22 +15,21 @@ $grey-background-color: #E5E5E5;
13$grey-background-hover-color: #EFEFEF; 15$grey-background-hover-color: #EFEFEF;
14$grey-foreground-color: #585858; 16$grey-foreground-color: #585858;
15$grey-foreground-hover-color: #303030; 17$grey-foreground-hover-color: #303030;
16$grey-button-outline-color: scale-color($grey-foreground-color, $alpha: -95%); 18$grey-button-outline-color: color.scale($grey-foreground-color, $alpha: -95%);
17 19
18$main-color: hsl(24, 90%, 50%); 20$main-color: hsl(24, 90%, 50%);
19$main-color-lighter: lighten($main-color, 10%); 21$main-color-lighter: lighten($main-color, 10%);
20$main-color-lightest: lighten($main-color, 40%); 22$main-color-lightest: lighten($main-color, 40%);
23$main-color-very-light: #fff5eb;
21 24
22$main-hover-color: lighten($main-color, 5%); 25$main-hover-color: lighten($main-color, 5%);
23$main-background-hover-color: #e9ecef; 26$main-background-hover-color: #e9ecef;
24 27
25$secondary-color: hsl(187, 77%, 34%);
26
27$support-button: inherit; 28$support-button: inherit;
28$support-button-heart: #e83e8c; 29$support-button-heart: #e83e8c;
29 30
30$bg-color: #fff; 31$bg-color: #fff;
31$fg-color: #000; 32$fg-color: #212529;
32 33
33$red: #FF0000; 34$red: #FF0000;
34$green: #39CC0B; 35$green: #39CC0B;
@@ -38,6 +39,7 @@ $grey-actor-name: #777272;
38$expanded-horizontal-margins: 150px; 39$expanded-horizontal-margins: 150px;
39$not-expanded-horizontal-margins: 30px; 40$not-expanded-horizontal-margins: 30px;
40 41
42$button-font-size: 15px;
41$button-height: 30px; 43$button-height: 30px;
42 44
43$header-height: 50px; 45$header-height: 50px;
@@ -93,9 +95,11 @@ $markdown-textarea-background-color: $grey-background-hover-color;
93$sub-menu-margin-bottom: 30px; 95$sub-menu-margin-bottom: 30px;
94$sub-menu-margin-bottom-small-view: 10px; 96$sub-menu-margin-bottom-small-view: 10px;
95 97
96$activated-action-button-color: #000; 98$activated-action-button-color: #212529;
97 99
98$focus-box-shadow-form: 0 0 0 .2rem; 100$focus-box-shadow-form: 0 0 0 .2rem;
101$form-input-font-size: 15px;
102$form-input-line-height: 1.4;
99 103
100$video-watch-player-factor: math.div(16, 9); 104$video-watch-player-factor: math.div(16, 9);
101$video-watch-info-margin-left: 44px; 105$video-watch-info-margin-left: 44px;
@@ -110,6 +114,7 @@ $variables: (
110 --mainColor: var(--mainColor), 114 --mainColor: var(--mainColor),
111 --mainColorLighter: var(--mainColorLighter), 115 --mainColorLighter: var(--mainColorLighter),
112 --mainColorLightest: var(--mainColorLightest), 116 --mainColorLightest: var(--mainColorLightest),
117 --mainColorVeryLight: var(--mainColorVeryLight),
113 118
114 --mainHoverColor: var(--mainHoverColor), 119 --mainHoverColor: var(--mainHoverColor),
115 --mainBackgroundHoverColor: var(--mainBackgroundHoverColor), 120 --mainBackgroundHoverColor: var(--mainBackgroundHoverColor),
@@ -117,8 +122,6 @@ $variables: (
117 --mainBackgroundColor: var(--mainBackgroundColor), 122 --mainBackgroundColor: var(--mainBackgroundColor),
118 --mainForegroundColor: var(--mainForegroundColor), 123 --mainForegroundColor: var(--mainForegroundColor),
119 124
120 --secondaryColor: var(--secondaryColor),
121
122 --greyForegroundColor: var(--greyForegroundColor), 125 --greyForegroundColor: var(--greyForegroundColor),
123 --greyBackgroundColor: var(--greyBackgroundColor), 126 --greyBackgroundColor: var(--greyBackgroundColor),
124 --greySecondaryBackgroundColor: var(--greySecondaryBackgroundColor), 127 --greySecondaryBackgroundColor: var(--greySecondaryBackgroundColor),
@@ -172,13 +175,13 @@ $zindex: (
172 popover : 13000, 175 popover : 13000,
173 tooltip : 14000, 176 tooltip : 14000,
174 loadbar : 15000, 177 loadbar : 15000,
175 dropdown : 17000,
176 help-popover : 17000,
177 privacymsg : 17500, 178 privacymsg : 17500,
178 header : 17500, 179 header : 17500,
179 notification : 18000, 180 help-popover : 17600,
181 dropdown : 17600,
180 modal : 19000, 182 modal : 19000,
181 hotkeys : 19000 183 hotkeys : 19000,
184 notification : 20000
182); 185);
183 186
184@function z($label) { 187@function z($label) {
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index b1b82b573..78e3a6de3 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -13,12 +13,13 @@ $ng-select-box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
13// $ng-select-placeholder: lighten($ng-select-primary-text, 40) !default; 13// $ng-select-placeholder: lighten($ng-select-primary-text, 40) !default;
14$ng-select-height: 30px; 14$ng-select-height: 30px;
15$ng-select-value-padding-left: 15px; 15$ng-select-value-padding-left: 15px;
16$ng-select-value-font-size: 15px; 16$ng-select-value-font-size: $form-input-font-size;
17 17
18@import '~@ng-select/ng-select/scss/default.theme'; 18@import '~@ng-select/ng-select/scss/default.theme';
19 19
20.ng-select { 20.ng-select {
21 font-size: $ng-select-value-font-size; 21 font-size: $ng-select-value-font-size;
22 line-height: $form-input-line-height;
22 23
23 &.ng-select-focused { 24 &.ng-select-focused {
24 &:not(.ng-select-opened) > .ng-select-container { 25 &:not(.ng-select-opened) > .ng-select-container {
diff --git a/client/src/sass/player/_player-variables.scss b/client/src/sass/player/_player-variables.scss
index 79c878852..47b8adda4 100644
--- a/client/src/sass/player/_player-variables.scss
+++ b/client/src/sass/player/_player-variables.scss
@@ -1,3 +1,5 @@
1@use '~bootstrap/scss/functions' as *;
2
1$primary-foreground-color: #fff; 3$primary-foreground-color: #fff;
2$primary-foreground-opacity: 0.9; 4$primary-foreground-opacity: 0.9;
3$primary-foreground-opacity-hover: 1; 5$primary-foreground-opacity-hover: 1;
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index c420e825e..43c144624 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -20,6 +20,15 @@ body {
20 font-size: $font-size; 20 font-size: $font-size;
21 color: pvar(--embedForegroundColor); 21 color: pvar(--embedForegroundColor);
22 22
23 &.disabled {
24 cursor: default;
25 pointer-events: none;
26
27 .vjs-big-play-button {
28 display: none !important;
29 }
30 }
31
23 .vjs-audio-button { 32 .vjs-audio-button {
24 display: none; 33 display: none;
25 } 34 }
diff --git a/client/src/sass/player/playlist.scss b/client/src/sass/player/playlist.scss
index e1999709e..4419df242 100644
--- a/client/src/sass/player/playlist.scss
+++ b/client/src/sass/player/playlist.scss
@@ -82,7 +82,7 @@ $playlist-menu-width: 350px;
82} 82}
83 83
84.vjs-playlist-button { 84.vjs-playlist-button {
85 font-size: 15px; 85 font-size: 16px;
86 position: absolute; 86 position: absolute;
87 right: 0; 87 right: 0;
88 top: 0; 88 top: 0;
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 8aa2c2ac3..d2346c126 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -1,5 +1,6 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3@use '_icons' as *;
3@use './_player-variables' as *; 4@use './_player-variables' as *;
4 5
5$setting-transition-duration: 0.15s; 6$setting-transition-duration: 0.15s;
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 9fc010d4f..37e7a4275 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -1,5 +1,6 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3@use '_icons' as *;
3 4
4/* stylelint-disable */ 5/* stylelint-disable */
5@import '~primeng/resources/primeng.css'; 6@import '~primeng/resources/primeng.css';
@@ -444,65 +445,9 @@ body p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
444 border: 1px solid #a80000; 445 border: 1px solid #a80000;
445} 446}
446 447
447// select button 448// ---------------------------------------------------------------------------
448body .p-selectbutton .p-button { 449// PeerTube customizations
449 background-color: #dadada; 450// ---------------------------------------------------------------------------
450 border: 1px solid #dadada;
451 color: #333333;
452 overflow: hidden;
453 transition: background-color 0.2s, box-shadow 0.2s;
454}
455body .p-selectbutton .p-button .p-button-icon-left {
456 color: #666666;
457}
458body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
459 background-color: #c8c8c8;
460 border-color: #c8c8c8;
461 color: #333333;
462}
463body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
464 color: #212121;
465}
466body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight).ui-state-focus {
467 box-shadow: 0 0 0 0.2em #8dcdff;
468 z-index: 1;
469}
470body .p-selectbutton .p-button.p-highlight {
471 background-color: pvar(--mainColor);
472 border-color: pvar(--mainColor);
473 color: #ffffff;
474}
475body .p-selectbutton .p-button.p-highlight .p-button-icon-left {
476 color: #ffffff;
477}
478body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover {
479 background-color: pvar(--mainColorLighter);
480 border-color: pvar(--mainColorLighter);
481 color: #ffffff;
482}
483body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover .p-button-icon-left {
484 color: #ffffff;
485}
486body .p-selectbutton .p-button:first-child {
487 border-top-left-radius: 3px;
488 border-bottom-left-radius: 3px;
489}
490body .p-selectbutton .p-button:last-child {
491 border-top-right-radius: 3px;
492 border-bottom-right-radius: 3px;
493}
494body p-selectbutton.ng-dirty.ng-invalid .p-button {
495 border: 1px solid #a80000;
496}
497
498// data table customizations
499
500@mixin glyphicon-light {
501 font-family: 'Glyphicons Halflings';
502 text-decoration: none !important;
503 color: pvar(--mainForegroundColor) !important;
504 font-display: swap;
505}
506 451
507p-table { 452p-table {
508 .p-datatable-header { 453 .p-datatable-header {
@@ -531,7 +476,7 @@ p-table {
531 476
532 td, th { 477 td, th {
533 font-family: $main-fonts; 478 font-family: $main-fonts;
534 font-size: 15px !important; 479 font-size: 15px;
535 color: pvar(--mainForegroundColor) !important; 480 color: pvar(--mainForegroundColor) !important;
536 } 481 }
537 482
@@ -618,24 +563,20 @@ p-table {
618 &.p-highlight { 563 &.p-highlight {
619 background-color: pvar(--submenuBackgroundColor) !important; 564 background-color: pvar(--submenuBackgroundColor) !important;
620 565
621 .pi { 566 .pi-sort-amount-up-alt,
622 @extend .glyphicon !optional; 567 .pi-sort-amount-down {
623 568 display: inline-block;
624 color: #000 !important; 569 position: relative;
625 font-size: 11px !important; 570 top: -1px;
626 top: 0 !important; 571 color: pvar(--mainForegroundColor) !important;
627 572 }
628 &.pi-sort-amount-up-alt {
629 @extend .glyphicon-triangle-top !optional;
630
631 color: pvar(--mainForegroundColor) !important;
632 }
633 573
634 &.pi-sort-amount-down { 574 .pi-sort-amount-up-alt {
635 @extend .glyphicon-triangle-bottom !optional; 575 @include arrow-up(5px);
576 }
636 577
637 color: pvar(--mainForegroundColor) !important; 578 .pi-sort-amount-down {
638 } 579 @include arrow-down(5px);
639 } 580 }
640 } 581 }
641 } 582 }
@@ -693,12 +634,10 @@ p-table {
693 .p-paginator-prev, 634 .p-paginator-prev,
694 .p-paginator-next, 635 .p-paginator-next,
695 .p-paginator-last { 636 .p-paginator-last {
696 @include glyphicon-light;
697 padding: 5px 2px; 637 padding: 5px 2px;
698 height: auto; 638 height: 100%;
699 outline: none; 639 outline: none;
700 font-size: 13px; 640 color: pvar(--mainForegroundColor);
701 top: -1px;
702 641
703 &.focus-within, 642 &.focus-within,
704 &:focus { 643 &:focus {
@@ -710,23 +649,37 @@ p-table {
710 } 649 }
711 650
712 &.p-paginator-first { 651 &.p-paginator-first {
713 @extend .glyphicon-step-backward !optional; 652 .p-paginator-icon {
653 width: 18px;
654 height: 18px;
655 background: url('../assets/images/feather/skip-back.svg') no-repeat;
656 background-size: contain;
657 }
714 } 658 }
715 659
716 &.p-paginator-prev { 660 &.p-paginator-prev {
717 @extend .glyphicon-chevron-left !optional;
718
719 @include margin-right(10px); 661 @include margin-right(10px);
662
663 .p-paginator-icon {
664 @extend .chevron-left !optional;
665 }
720 } 666 }
721 667
722 &.p-paginator-next { 668 &.p-paginator-next {
723 @extend .glyphicon-chevron-right !optional;
724
725 @include margin-left(10px); 669 @include margin-left(10px);
670
671 .p-paginator-icon {
672 @extend .chevron-right !optional;
673 }
726 } 674 }
727 675
728 &.p-paginator-last { 676 &.p-paginator-last {
729 @extend .glyphicon-step-forward !optional; 677 .p-paginator-icon {
678 width: 18px;
679 height: 18px;
680 background: url('../assets/images/feather/skip-forward.svg') no-repeat;
681 background-size: contain;
682 }
730 } 683 }
731 } 684 }
732 685
@@ -759,8 +712,9 @@ p-table {
759 } 712 }
760 } 713 }
761 714
762 .badge { 715 .pt-badge {
763 @include peertube-badge; 716 font-size: 12px;
717 text-transform: uppercase;
764 } 718 }
765} 719}
766 720
@@ -809,8 +763,7 @@ p-calendar .p-datepicker {
809 } 763 }
810 764
811 .p-datepicker-next { 765 .p-datepicker-next {
812 @extend .glyphicon-chevron-right !optional; 766 @extend .chevron-right !optional;
813 @include glyphicon-light;
814 767
815 color: #000 !important; 768 color: #000 !important;
816 text-align: end; 769 text-align: end;
@@ -821,8 +774,7 @@ p-calendar .p-datepicker {
821 } 774 }
822 775
823 .p-datepicker-prev { 776 .p-datepicker-prev {
824 @extend .glyphicon-chevron-left !optional; 777 @extend .chevron-left !optional;
825 @include glyphicon-light;
826 778
827 color: #000 !important; 779 color: #000 !important;
828 text-align: start; 780 text-align: start;
@@ -836,15 +788,13 @@ p-calendar .p-datepicker {
836 .p-timepicker { 788 .p-timepicker {
837 789
838 .pi.pi-chevron-up { 790 .pi.pi-chevron-up {
839 @extend .glyphicon-chevron-up !optional; 791 @extend .chevron-up !optional;
840 @include glyphicon-light;
841 792
842 color: #000 !important; 793 color: #000 !important;
843 } 794 }
844 795
845 .pi.pi-chevron-down { 796 .pi.pi-chevron-down {
846 @extend .glyphicon-chevron-down !optional; 797 @extend .chevron-down !optional;
847 @include glyphicon-light;
848 798
849 color: #000 !important; 799 color: #000 !important;
850 } 800 }
@@ -900,15 +850,14 @@ p-toast {
900 min-width: 200px; 850 min-width: 200px;
901 851
902 .p-toast-icon-close { 852 .p-toast-icon-close {
903 font-family: "Glyphicons Halflings";
904 opacity: 0; 853 opacity: 0;
905 position: absolute; 854 position: absolute;
906 right: 5px; 855 right: 5px;
907 top: 5px; 856 top: 5px;
908 857 width: 18px;
909 &:after { 858 height: 18px;
910 content: "\e014"; 859 background: url('../assets/images/feather/x.svg') no-repeat;
911 } 860 background-size: contain;
912 } 861 }
913 862
914 &:hover .p-toast-icon-close { 863 &:hover .p-toast-icon-close {
@@ -926,22 +875,6 @@ p-toast {
926 box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1); 875 box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
927 overflow: hidden; 876 overflow: hidden;
928 877
929 &.p-toast-message-success .glyphicon {
930 color: #8BC34A !important;
931 }
932
933 &.p-toast-message-error .glyphicon {
934 color: #F44336 !important;
935 }
936
937 &.p-toast-message-warn .glyphicon {
938 color: #F1680D !important;
939 }
940
941 &.p-toast-message-info .glyphicon {
942 color: #03A9F4 !important;
943 }
944
945 .notification-block { 878 .notification-block {
946 display: flex; 879 display: flex;
947 align-items: center; 880 align-items: center;
@@ -949,36 +882,37 @@ p-toast {
949 padding: 10px 20px; 882 padding: 10px 20px;
950 883
951 .message { 884 .message {
952 flex-grow: 1;
953 @include margin-right(20px); 885 @include margin-right(20px);
954 886
887 flex-grow: 1;
888
955 h3 { 889 h3 {
956 font-size: 21px; 890 font-size: 21px;
957 } 891 }
958 892
959 p { 893 p {
960 font-size: 15px; 894 @include peertube-word-wrap;
895
961 margin-bottom: 0; 896 margin-bottom: 0;
962 } 897 }
963 } 898 }
964
965 .glyphicon {
966 font-size: 32px;
967 @include margin-right(5px);
968 }
969 } 899 }
970 } 900 }
971}
972 901
973.p-selectbutton { 902 .p-toast-message-success my-global-icon {
974 .p-button:focus { 903 color: #8BC34A !important;
975 outline: none;
976 } 904 }
977 905
978 .p-button-label { 906 .p-toast-message-error my-global-icon {
979 padding: 5px 15px; 907 color: #F44336 !important;
980 font-size: 15px; 908 }
981 font-weight: 600; 909
910 .p-toast-message-warn my-global-icon {
911 color: #F1680D !important;
912 }
913
914 .p-toast-message-info my-global-icon {
915 color: #03A9F4 !important;
982 } 916 }
983} 917}
984 918
diff --git a/client/src/sass/z-index.scss b/client/src/sass/z-index.scss
index e46813dc3..d362af0dd 100644
--- a/client/src/sass/z-index.scss
+++ b/client/src/sass/z-index.scss
@@ -13,9 +13,9 @@ ngx-loading-bar {
13 z-index: z(header) + 1 !important; 13 z-index: z(header) + 1 !important;
14} 14}
15 15
16/* rules for dropdowns excepts when in button group, to avoid impacting the dropdown-toggle */ 16// Dropdown added to body, override default z-index
17.dropdown, 17body > .dropdown,
18.dropup { 18body > .dropup {
19 z-index: z(dropdown) !important; 19 z-index: z(dropdown) !important;
20} 20}
21 21
@@ -27,7 +27,6 @@ ngx-loading-bar {
27.btn-group, 27.btn-group,
28.dropdown-root, 28.dropdown-root,
29.action-dropdown, 29.action-dropdown,
30.input-group-prepend,
31.column-toggle { 30.column-toggle {
32 z-index: inherit !important; 31 z-index: inherit !important;
33} 32}
generated by cgit v1.2.3 (git 2.25.1) at 2024-10-16 20:55:16 +0000