aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/application.scss42
-rw-r--r--client/src/sass/bootstrap.scss112
-rw-r--r--client/src/sass/classes.scss5
-rw-r--r--client/src/sass/include/_badges.scss61
-rw-r--r--client/src/sass/include/_bootstrap-variables.scss10
-rw-r--r--client/src/sass/include/_mixins.scss62
-rw-r--r--client/src/sass/include/_variables.scss1
-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/primeng-custom.scss5
-rw-r--r--client/src/sass/z-index.scss1
11 files changed, 149 insertions, 161 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 84b575eb3..b5b05a3c4 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -96,6 +96,10 @@ noscript,
96 margin: 1rem auto; 96 margin: 1rem auto;
97} 97}
98 98
99a {
100 text-decoration: none;
101}
102
99strong { 103strong {
100 font-weight: $font-semibold; 104 font-weight: $font-semibold;
101} 105}
@@ -120,6 +124,7 @@ button {
120label { 124label {
121 font-weight: $font-bold; 125 font-weight: $font-bold;
122 font-size: 15px; 126 font-size: 15px;
127 margin-bottom: 0.5rem;
123} 128}
124 129
125code { 130code {
@@ -133,6 +138,10 @@ code {
133 vertical-align: middle; 138 vertical-align: middle;
134} 139}
135 140
141.form-group {
142 margin-bottom: 1rem;
143}
144
136.form-error, 145.form-error,
137.form-warning { 146.form-warning {
138 display: block; 147 display: block;
@@ -154,14 +163,6 @@ my-input-toggle-hidden ::ng-deep input {
154 max-width: initial; 163 max-width: initial;
155} 164}
156 165
157.glyphicon-black {
158 color: #000;
159}
160
161.row {
162 margin: 0 !important;
163}
164
165.main-col { 166.main-col {
166 @include margin-left($menu-width); 167 @include margin-left($menu-width);
167 168
@@ -326,6 +327,29 @@ table {
326 margin-top: 10px; 327 margin-top: 10px;
327} 328}
328 329
330.callout {
331 padding: 1.25rem;
332 border: 1px solid #eee;
333 border-radius: .25rem;
334 position: relative;
335
336 > label {
337 position: relative;
338 top: -5px;
339 left: -10px;
340 color: #6c757d !important;
341 }
342
343 &:not(.callout-light) {
344 border-left-width: .25rem;
345 }
346
347 &.callout-info {
348 border-color: pvar(--mainColorLightest);
349 border-left-color: pvar(--mainColor);
350 }
351}
352
329@media screen and (max-width: #{breakpoint(xxl)}) { 353@media screen and (max-width: #{breakpoint(xxl)}) {
330 .main-col { 354 .main-col {
331 --horizontalMarginContent: #{math.div($not-expanded-horizontal-margins, 2)}; 355 --horizontalMarginContent: #{math.div($not-expanded-horizontal-margins, 2)};
@@ -342,7 +366,7 @@ table {
342 --videosHorizontalMarginContent: #{pvar(--horizontalMarginContent)}; 366 --videosHorizontalMarginContent: #{pvar(--horizontalMarginContent)};
343 } 367 }
344 368
345 /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */ 369 /* the following applies from 500px to 900px and is partially overridden from 500px to 800px by changes below to $small-view */
346 .main-col, 370 .main-col,
347 .main-col.expanded { 371 .main-col.expanded {
348 --horizontalMarginContent: #{math.div($expanded-horizontal-margins, 3)}; 372 --horizontalMarginContent: #{math.div($expanded-horizontal-margins, 3)};
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index bc37134dd..2df2d0680 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -7,27 +7,28 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
7 7
8@import '~bootstrap/scss/functions'; 8@import '~bootstrap/scss/functions';
9@import '~bootstrap/scss/variables'; 9@import '~bootstrap/scss/variables';
10
11@import '~bootstrap/scss/mixins'; 10@import '~bootstrap/scss/mixins';
11@import '~bootstrap/scss/utilities';
12
12@import '~bootstrap/scss/root'; 13@import '~bootstrap/scss/root';
13@import '~bootstrap/scss/reboot'; 14@import '~bootstrap/scss/reboot';
14@import '~bootstrap/scss/type'; 15@import '~bootstrap/scss/type';
15@import '~bootstrap/scss/grid'; 16@import '~bootstrap/scss/grid';
16@import '~bootstrap/scss/tables';
17@import '~bootstrap/scss/forms'; 17@import '~bootstrap/scss/forms';
18@import '~bootstrap/scss/buttons'; 18@import '~bootstrap/scss/buttons';
19@import '~bootstrap/scss/dropdown'; 19@import '~bootstrap/scss/dropdown';
20@import '~bootstrap/scss/button-group'; 20@import '~bootstrap/scss/button-group';
21@import '~bootstrap/scss/input-group';
22@import '~bootstrap/scss/nav'; 21@import '~bootstrap/scss/nav';
23@import '~bootstrap/scss/card'; 22@import '~bootstrap/scss/card';
24@import '~bootstrap/scss/badge'; 23@import '~bootstrap/scss/accordion';
25@import '~bootstrap/scss/alert'; 24@import '~bootstrap/scss/alert';
26@import '~bootstrap/scss/close'; 25@import '~bootstrap/scss/close';
27@import '~bootstrap/scss/modal'; 26@import '~bootstrap/scss/modal';
28@import '~bootstrap/scss/tooltip'; 27@import '~bootstrap/scss/tooltip';
29@import '~bootstrap/scss/popover'; 28@import '~bootstrap/scss/popover';
30@import '~bootstrap/scss/utilities'; 29
30@import '~bootstrap/scss/helpers';
31@import '~bootstrap/scss/utilities/api';
31 32
32@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons'; 33@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
33 34
@@ -36,16 +37,12 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
36 animation: spin 0.7s infinite linear; 37 animation: spin 0.7s infinite linear;
37} 38}
38 39
39.glyphicon-duplicate {
40 font-size: 70%;
41}
42
43.flex-auto { 40.flex-auto {
44 flex: auto; 41 flex: auto;
45} 42}
46 43
47.c-hand { 44.c-hand {
48 cursor: pointer; 45 cursor: pointer !important;
49} 46}
50 47
51@keyframes spin { 48@keyframes spin {
@@ -58,16 +55,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
58 } 55 }
59} 56}
60 57
61.btn-group > .btn:not(:first-child) {
62 border-top-left-radius: 0 !important;
63 border-bottom-left-radius: 0 !important;
64}
65
66.dropdown-menu { 58.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; 59 font-size: 15px;
70
71 color: pvar(--mainForegroundColor); 60 color: pvar(--mainForegroundColor);
72 background-color: pvar(--mainBackgroundColor); 61 background-color: pvar(--mainBackgroundColor);
73 62
@@ -78,39 +67,22 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
78 .dropdown-item { 67 .dropdown-item {
79 padding: 3px 15px; 68 padding: 3px 15px;
80 69
81 color: pvar(--mainForegroundColor);
82 background-color: pvar(--mainBackgroundColor);
83
84 &.active { 70 &.active {
85 color: pvar(--mainBackgroundColor) !important; 71 color: pvar(--mainBackgroundColor) !important;
86 background-color: pvar(--mainHoverColor); 72 background-color: pvar(--mainHoverColor);
87 opacity: 0.9; 73 opacity: 0.9;
88 } 74 }
89 75
90 a:active,
91 &:hover {
92 color: pvar(--mainForegroundColor) !important;
93 background-color: pvar(--mainBackgroundHoverColor);
94 }
95
96 &::after { 76 &::after {
97 display: none; 77 display: none;
98 } 78 }
99 } 79 }
100 80
101 button {
102 @include disable-default-a-behaviour;
103 }
104
105 a { 81 a {
106 @include disable-default-a-behaviour; 82 @include disable-default-a-behaviour;
107 } 83 }
108} 84}
109 85
110.badge {
111 line-height: 1.1;
112}
113
114@media screen and (min-width: #{breakpoint(md)}) { 86@media screen and (min-width: #{breakpoint(md)}) {
115 .modal::before { 87 .modal::before {
116 vertical-align: middle; 88 vertical-align: middle;
@@ -350,22 +322,28 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
350} 322}
351 323
352.input-group { 324.input-group {
353 > .form-control { 325 > .btn,
354 flex: initial; 326 > .input-group-text {
327 height: $button-height;
355 } 328 }
356 329
357 input.form-control { 330 > .input-group-text {
358 width: unset !important; 331 font-size: 15px;
359 flex-grow: 1; 332 line-height: normal;
333 opacity: 0.9;
360 } 334 }
361 335
362 .input-group-prepend + input { 336 .input-group-text > .dropdown-toggle {
363 border-top-left-radius: 0 !important; 337 display: flex;
364 border-bottom-left-radius: 0 !important; 338 }
339
340 .last-in-group {
341 border-top-right-radius: 3px !important;
342 border-bottom-right-radius: 3px !important;
365 } 343 }
366} 344}
367 345
368.has-feedback.has-clear { 346.has-clear {
369 position: relative; 347 position: relative;
370 348
371 input { 349 input {
@@ -374,11 +352,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
374 352
375 .form-control-clear { 353 .form-control-clear {
376 color: rgba(0, 0, 0, 0.4); 354 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; 355 display: flex;
383 justify-content: center; 356 justify-content: center;
384 align-items: center; 357 align-items: center;
@@ -397,44 +370,3 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
397 display: none; 370 display: none;
398 } 371 }
399} 372}
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/classes.scss b/client/src/sass/classes.scss
index 90cdcf3ed..35bcfba4b 100644
--- a/client/src/sass/classes.scss
+++ b/client/src/sass/classes.scss
@@ -1,5 +1,6 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3@use '_badges' as *;
3 4
4.peertube-button { 5.peertube-button {
5 @include peertube-button; 6 @include peertube-button;
@@ -32,3 +33,7 @@
32.muted { 33.muted {
33 color: pvar(--greyForegroundColor) !important; 34 color: pvar(--greyForegroundColor) !important;
34} 35}
36
37.pt-badge {
38 @include peertube-badge;
39}
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..c103e485a 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,11 @@ $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
44$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);
45$dropdown-border-radius: 3px;
46$dropdown-link-active-color: pvar(--mainForegroundColor);
47$dropdown-link-active-bg: pvar(--mainBackgroundHoverColor);
48
49$accordion-button-active-bg: pvar(--mainColorLightest);
50$accordion-button-active-color: pvar(--mainForegroundColor);
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 3c5aa6cdf..26f5a149a 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -89,6 +89,7 @@
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;
@@ -108,19 +109,6 @@
108 } 109 }
109} 110}
110 111
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) { 112@mixin peertube-textarea ($width, $height) {
125 @include peertube-input-text($width); 113 @include peertube-input-text($width);
126 114
@@ -371,6 +359,7 @@
371 cursor: default; 359 cursor: default;
372 } 360 }
373 } 361 }
362
374 select[disabled] { 363 select[disabled] {
375 background-color: #f9f9f9; 364 background-color: #f9f9f9;
376 } 365 }
@@ -552,50 +541,6 @@
552 } 541 }
553} 542}
554 543
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) { 544@mixin actor-avatar-size ($size) {
600 display: inline-block; 545 display: inline-block;
601 width: $size; 546 width: $size;
@@ -939,8 +884,9 @@
939 vertical-align: top; 884 vertical-align: top;
940 } 885 }
941 886
942 .badge { 887 .pt-badge {
943 @include margin-left(7px); 888 @include margin-left(7px);
889
944 vertical-align: top; 890 vertical-align: top;
945 } 891 }
946 } 892 }
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index e46b96d8a..884e7b5d0 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -1,4 +1,5 @@
1@use 'sass:math'; 1@use 'sass:math';
2@use '~bootstrap/scss/functions' as *;
2 3
3$small-view: 800px; 4$small-view: 800px;
4$mobile-view: 500px; 5$mobile-view: 500px;
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/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 9fc010d4f..a66e4485b 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -759,8 +759,9 @@ p-table {
759 } 759 }
760 } 760 }
761 761
762 .badge { 762 .pt-badge {
763 @include peertube-badge; 763 font-size: 12px;
764 text-transform: uppercase;
764 } 765 }
765} 766}
766 767
diff --git a/client/src/sass/z-index.scss b/client/src/sass/z-index.scss
index e46813dc3..c2c44b851 100644
--- a/client/src/sass/z-index.scss
+++ b/client/src/sass/z-index.scss
@@ -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}