aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-05-27 18:25:00 +0200
committerChocobozzz <me@florianbigard.com>2021-06-28 10:54:02 +0200
commit8cbc40b2fe9d36ef0505b9441276ca561342e9e9 (patch)
tree5777288d76c0926f5b4484e2689d0fe741462a36 /client/src/sass
parentfa12eacc014aae8094d108634371640f2695bf9f (diff)
downloadPeerTube-8cbc40b2fe9d36ef0505b9441276ca561342e9e9.tar.gz
PeerTube-8cbc40b2fe9d36ef0505b9441276ca561342e9e9.tar.zst
PeerTube-8cbc40b2fe9d36ef0505b9441276ca561342e9e9.zip
Move to sass module
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/application.scss5
-rw-r--r--client/src/sass/bootstrap.scss33
-rw-r--r--client/src/sass/classes.scss4
-rw-r--r--client/src/sass/include/_actor.scss3
-rw-r--r--client/src/sass/include/_bootstrap.scss40
-rw-r--r--client/src/sass/include/_miniature.scss4
-rw-r--r--client/src/sass/include/_mixins.scss11
-rw-r--r--client/src/sass/include/_variables.scss4
-rw-r--r--client/src/sass/ng-select.scss3
-rw-r--r--client/src/sass/player/bezels.scss2
-rw-r--r--client/src/sass/player/context-menu.scss6
-rw-r--r--client/src/sass/player/mobile.scss4
-rw-r--r--client/src/sass/player/peertube-skin.scss14
-rw-r--r--client/src/sass/player/playlist.scss4
-rw-r--r--client/src/sass/player/settings-menu.scss6
-rw-r--r--client/src/sass/player/spinner.scss4
-rw-r--r--client/src/sass/player/stats.scss6
-rw-r--r--client/src/sass/player/upnext.scss8
-rw-r--r--client/src/sass/primeng-custom.scss28
19 files changed, 91 insertions, 98 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 51c21107b..6b32d4cd6 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,8 +1,7 @@
1$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; 1$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
2 2
3@use '_bootstrap-variables'; 3@use '_variables' as *;
4@use '_variables'; 4@use '_mixins' as *;
5@use '_mixins';
6 5
7@use '_fonts'; 6@use '_fonts';
8 7
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 9c734c4fe..058033166 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -1,8 +1,35 @@
1$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; 1$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
2@use '_bootstrap';
3 2
4@use '_variables'; 3@use '_variables' as *;
5@use '_mixins'; 4@use '_mixins' as *;
5
6@import './_bootstrap-variables';
7
8@import '~bootstrap/scss/functions';
9@import '~bootstrap/scss/variables';
10
11@import '~bootstrap/scss/mixins';
12@import '~bootstrap/scss/root';
13@import '~bootstrap/scss/reboot';
14@import '~bootstrap/scss/type';
15@import '~bootstrap/scss/grid';
16@import '~bootstrap/scss/tables';
17@import '~bootstrap/scss/forms';
18@import '~bootstrap/scss/buttons';
19@import '~bootstrap/scss/dropdown';
20@import '~bootstrap/scss/button-group';
21@import '~bootstrap/scss/input-group';
22@import '~bootstrap/scss/nav';
23@import '~bootstrap/scss/card';
24@import '~bootstrap/scss/badge';
25@import '~bootstrap/scss/alert';
26@import '~bootstrap/scss/close';
27@import '~bootstrap/scss/modal';
28@import '~bootstrap/scss/tooltip';
29@import '~bootstrap/scss/popover';
30@import '~bootstrap/scss/utilities';
31
32@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
6 33
7// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d 34// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
8.glyphicon-refresh-animate { 35.glyphicon-refresh-animate {
diff --git a/client/src/sass/classes.scss b/client/src/sass/classes.scss
index 44c584d1c..2d8117ee5 100644
--- a/client/src/sass/classes.scss
+++ b/client/src/sass/classes.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3 3
4.peertube-button { 4.peertube-button {
5 @include peertube-button; 5 @include peertube-button;
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
index 31c145319..b135bbb6d 100644
--- a/client/src/sass/include/_actor.scss
+++ b/client/src/sass/include/_actor.scss
@@ -1,4 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins' as *;
2 3
3@mixin section-label-responsive { 4@mixin section-label-responsive {
4 color: pvar(--mainColor); 5 color: pvar(--mainColor);
diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss
deleted file mode 100644
index 4f4f48e58..000000000
--- a/client/src/sass/include/_bootstrap.scss
+++ /dev/null
@@ -1,40 +0,0 @@
1@use './_bootstrap-variables';
2
3@use '~bootstrap/scss/functions';
4@use '~bootstrap/scss/variables';
5
6@use '~bootstrap/scss/mixins';
7@use '~bootstrap/scss/root';
8@use '~bootstrap/scss/reboot';
9@use '~bootstrap/scss/type';
10//@use '~bootstrap/scss/images';
11//@use '~bootstrap/scss/code';
12@use '~bootstrap/scss/grid';
13@use '~bootstrap/scss/tables';
14@use '~bootstrap/scss/forms';
15@use '~bootstrap/scss/buttons';
16//@use '~bootstrap/scss/transitions';
17@use '~bootstrap/scss/dropdown';
18@use '~bootstrap/scss/button-group';
19@use '~bootstrap/scss/input-group';
20//@use '~bootstrap/scss/custom-forms';
21@use '~bootstrap/scss/nav';
22//@use '~bootstrap/scss/navbar';
23@use '~bootstrap/scss/card';
24//@use '~bootstrap/scss/breadcrumb';
25//@use '~bootstrap/scss/pagination';
26@use '~bootstrap/scss/badge';
27//@use '~bootstrap/scss/jumbotron';
28@use '~bootstrap/scss/alert';
29//@use '~bootstrap/scss/progress';
30//@use '~bootstrap/scss/media';
31//@use '~bootstrap/scss/list-group';
32@use '~bootstrap/scss/close';
33@use '~bootstrap/scss/modal';
34@use '~bootstrap/scss/tooltip';
35@use '~bootstrap/scss/popover';
36//@use '~bootstrap/scss/carousel';
37@use '~bootstrap/scss/utilities';
38//@use '~bootstrap/scss/print';
39
40@use '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index fb12da49e..a1b963400 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3 3
4@mixin miniature-name { 4@mixin miniature-name {
5 @include ellipsis-multiline(1.1em, 2); 5 @include ellipsis-multiline(1.1em, 2);
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index bf7504d91..4d4c52b34 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -1,4 +1,5 @@
1@use '_variables'; 1@use 'sass:math';
2@use '_variables' as *;
2 3
3@mixin disable-default-a-behaviour { 4@mixin disable-default-a-behaviour {
4 &:hover, 5 &:hover,
@@ -745,7 +746,7 @@
745 746
746 > div { 747 > div {
747 box-sizing: border-box; 748 box-sizing: border-box;
748 flex: 0 0 percentage(1/3); 749 flex: 0 0 percentage(math.div(1, 3));
749 padding: 0 5px; 750 padding: 0 5px;
750 margin-bottom: 10px; 751 margin-bottom: 10px;
751 752
@@ -867,7 +868,7 @@
867// applies ratio (default to 16:9) to a child element (using $selector) only using 868// applies ratio (default to 16:9) to a child element (using $selector) only using
868// an immediate's parent size. This allows to set a ratio without explicit 869// an immediate's parent size. This allows to set a ratio without explicit
869// dimensions, as width/height cannot be computed from each other. 870// dimensions, as width/height cannot be computed from each other.
870@mixin block-ratio ($selector: 'div', $inverted-ratio: 9/16) { 871@mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) {
871 $padding-percent: percentage($inverted-ratio); 872 $padding-percent: percentage($inverted-ratio);
872 873
873 position: relative; 874 position: relative;
@@ -916,8 +917,8 @@
916 top: 50%; 917 top: 50%;
917 transform: translate(-50%, -50%) scale(0.5); 918 transform: translate(-50%, -50%) scale(0.5);
918 919
919 border-top: ($height / 2) solid transparent; 920 border-top: #{math.div($height, 2)} solid transparent;
920 border-bottom: ($height / 2) solid transparent; 921 border-bottom: #{math.div($height, 2)} solid transparent;
921 922
922 border-left: $width solid rgba(255, 255, 255, 0.95); 923 border-left: $width solid rgba(255, 255, 255, 0.95);
923} 924}
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index b9c82ea77..8f3d3c3b4 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -1,5 +1,4 @@
1@use 'sass:math'; 1@use 'sass:math';
2@use '_bootstrap-variables';
3 2
4$small-view: 800px; 3$small-view: 800px;
5$mobile-view: 500px; 4$mobile-view: 500px;
@@ -54,7 +53,8 @@ $sub-menu-height: 81px;
54 53
55$channel-background-color: #f6ede8; 54$channel-background-color: #f6ede8;
56 55
57$banner-inverted-ratio: #{math.div(1, 6)}; 56// FIXME: cannot use math.div here because of compilation error
57$banner-inverted-ratio: 0.1666666666;
58 58
59$max-channels-width: 1200px; 59$max-channels-width: 1200px;
60 60
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index 6c9d3a407..c40b355be 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -1,4 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins' as *;
2 3
3$ng-select-highlight: #f2690d; 4$ng-select-highlight: #f2690d;
4// $ng-select-primary-text: #333 !default; 5// $ng-select-primary-text: #333 !default;
diff --git a/client/src/sass/player/bezels.scss b/client/src/sass/player/bezels.scss
index b8c3325d0..629a677b1 100644
--- a/client/src/sass/player/bezels.scss
+++ b/client/src/sass/player/bezels.scss
@@ -1,3 +1,5 @@
1@use '_mixins' as *;
2
1@keyframes bezels-fadeout { 3@keyframes bezels-fadeout {
2 from { 4 from {
3 opacity: 1; 5 opacity: 1;
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index a207d8a28..5548e2712 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -1,6 +1,6 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3@use './_player-variables'; 3@use './_player-variables' as *;
4 4
5$context-menu-width: 350px; 5$context-menu-width: 350px;
6 6
diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
index dde2c3127..86c090200 100644
--- a/client/src/sass/player/mobile.scss
+++ b/client/src/sass/player/mobile.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3 3
4/* Special mobile style */ 4/* Special mobile style */
5 5
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 1a84bd7f0..17fd14342 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -1,7 +1,7 @@
1@use 'sass:math'; 1@use 'sass:math';
2@use '_variables'; 2@use '_variables' as *;
3@use '_mixins'; 3@use '_mixins' as *;
4@use './_player-variables'; 4@use './_player-variables' as *;
5 5
6body { 6body {
7 --embedForegroundColor: #{$primary-foreground-color}; 7 --embedForegroundColor: #{$primary-foreground-color};
@@ -12,8 +12,8 @@ body {
12@mixin big-play-button-triangle-size($triangle-size) { 12@mixin big-play-button-triangle-size($triangle-size) {
13 width: $triangle-size; 13 width: $triangle-size;
14 height: $triangle-size; 14 height: $triangle-size;
15 top: calc(50% - math.div($triangle-size / 2)); 15 top: calc(50% - math.div($triangle-size, 2));
16 left: calc(53% - math.div($triangle-size / 2)); 16 left: calc(53% - math.div($triangle-size, 2));
17} 17}
18 18
19.video-js.vjs-peertube-skin { 19.video-js.vjs-peertube-skin {
@@ -57,7 +57,7 @@ body {
57 $big-play-width: 1.2em; 57 $big-play-width: 1.2em;
58 $big-play-height: 1.2em; 58 $big-play-height: 1.2em;
59 59
60 @include margin-left(-($big-play-width / 2)); 60 @include margin-left(-(math.div($big-play-width, 2)));
61 61
62 outline: 0; 62 outline: 0;
63 font-size: 6em; 63 font-size: 6em;
@@ -70,7 +70,7 @@ body {
70 width: $big-play-width; 70 width: $big-play-width;
71 height: $big-play-height; 71 height: $big-play-height;
72 line-height: $big-play-height; 72 line-height: $big-play-height;
73 margin-top: -(math.div($big-play-height / 2)); 73 margin-top: -(math.div($big-play-height, 2));
74 transition: 0.4s opacity; 74 transition: 0.4s opacity;
75 75
76 &::-moz-focus-inner { 76 &::-moz-focus-inner {
diff --git a/client/src/sass/player/playlist.scss b/client/src/sass/player/playlist.scss
index 3279bd263..f7e67ba16 100644
--- a/client/src/sass/player/playlist.scss
+++ b/client/src/sass/player/playlist.scss
@@ -1,3 +1,7 @@
1@use '_variables' as *;
2@use '_mixins' as *;
3@use './_player-variables' as *;
4
1$playlist-menu-width: 350px; 5$playlist-menu-width: 350px;
2 6
3.vjs-playlist-menu { 7.vjs-playlist-menu {
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 2d0b58a1d..d495785b3 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -1,6 +1,6 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3@use './_player-variables'; 3@use './_player-variables' as *;
4 4
5$setting-transition-duration: 0.15s; 5$setting-transition-duration: 0.15s;
6$setting-transition-easing: ease-out; 6$setting-transition-easing: ease-out;
diff --git a/client/src/sass/player/spinner.scss b/client/src/sass/player/spinner.scss
index bd7efd3b8..84ebbe8ee 100644
--- a/client/src/sass/player/spinner.scss
+++ b/client/src/sass/player/spinner.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3 3
4// Thanks: https://projects.lukehaas.me/css-loaders/ 4// Thanks: https://projects.lukehaas.me/css-loaders/
5.vjs-loading-spinner { 5.vjs-loading-spinner {
diff --git a/client/src/sass/player/stats.scss b/client/src/sass/player/stats.scss
index 18b3f0413..0e337aa19 100644
--- a/client/src/sass/player/stats.scss
+++ b/client/src/sass/player/stats.scss
@@ -1,4 +1,6 @@
1@use './_player-variables'; 1@use '_variables' as *;
2@use '_mixins' as *;
3@use './_player-variables' as *;
2 4
3$stats-width: 420px; 5$stats-width: 420px;
4$contextmenu-background-color: rgba(0, 0, 0, 0.6); 6$contextmenu-background-color: rgba(0, 0, 0, 0.6);
@@ -6,7 +8,7 @@ $contextmenu-background-color: rgba(0, 0, 0, 0.6);
6.video-js { 8.video-js {
7 9
8 .vjs-stats-content { 10 .vjs-stats-content {
9 @include transition(opacity 0.1s); 11 transition: opacity 0.1s;
10 12
11 position: absolute; 13 position: absolute;
12 background-color: $contextmenu-background-color; 14 background-color: $contextmenu-background-color;
diff --git a/client/src/sass/player/upnext.scss b/client/src/sass/player/upnext.scss
index 922a9674d..2618d79d4 100644
--- a/client/src/sass/player/upnext.scss
+++ b/client/src/sass/player/upnext.scss
@@ -4,14 +4,10 @@ $browser-context: 16;
4 @return #{$pixels/$context}em; 4 @return #{$pixels/$context}em;
5} 5}
6 6
7@mixin transition($string: $transition--default) {
8 transition: $string;
9}
10
11.video-js { 7.video-js {
12 8
13 .vjs-upnext-content { 9 .vjs-upnext-content {
14 @include transition(opacity 0.1s); 10 transition: opacity 0.1s;
15 11
16 font-size: 1.8em; 12 font-size: 1.8em;
17 pointer-events: auto; 13 pointer-events: auto;
@@ -93,7 +89,7 @@ $browser-context: 16;
93 } 89 }
94 90
95 .vjs-upnext-autoplay-icon { 91 .vjs-upnext-autoplay-icon {
96 @include transition(stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1)); 92 transition: stroke-dasharray 0.1s cubic-bezier(0.4, 0, 1, 1);
97 93
98 position: absolute; 94 position: absolute;
99 top: 50%; 95 top: 50%;
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index e6d4b6060..1f50eea54 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -1,8 +1,8 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3 3
4/* stylelint-disable */ 4/* stylelint-disable */
5@use '~primeng/resources/primeng.css'; 5@use 'primeng/resources/primeng';
6 6
7// Override primeng style we don't want 7// Override primeng style we don't want
8input[type=button] { 8input[type=button] {
@@ -620,20 +620,20 @@ p-table {
620 background-color: pvar(--submenuBackgroundColor) !important; 620 background-color: pvar(--submenuBackgroundColor) !important;
621 621
622 .pi { 622 .pi {
623 @extend .glyphicon; 623 @extend .glyphicon !optional;
624 624
625 color: #000 !important; 625 color: #000 !important;
626 font-size: 11px !important; 626 font-size: 11px !important;
627 top: 0 !important; 627 top: 0 !important;
628 628
629 &.pi-sort-amount-up-alt { 629 &.pi-sort-amount-up-alt {
630 @extend .glyphicon-triangle-top; 630 @extend .glyphicon-triangle-top !optional;
631 631
632 color: pvar(--mainForegroundColor) !important; 632 color: pvar(--mainForegroundColor) !important;
633 } 633 }
634 634
635 &.pi-sort-amount-down { 635 &.pi-sort-amount-down {
636 @extend .glyphicon-triangle-bottom; 636 @extend .glyphicon-triangle-bottom !optional;
637 637
638 color: pvar(--mainForegroundColor) !important; 638 color: pvar(--mainForegroundColor) !important;
639 } 639 }
@@ -711,23 +711,23 @@ p-table {
711 } 711 }
712 712
713 &.p-paginator-first { 713 &.p-paginator-first {
714 @extend .glyphicon-step-backward; 714 @extend .glyphicon-step-backward !optional;
715 } 715 }
716 716
717 &.p-paginator-prev { 717 &.p-paginator-prev {
718 @extend .glyphicon-chevron-left; 718 @extend .glyphicon-chevron-left !optional;
719 719
720 @include margin-right(10px); 720 @include margin-right(10px);
721 } 721 }
722 722
723 &.p-paginator-next { 723 &.p-paginator-next {
724 @extend .glyphicon-chevron-right; 724 @extend .glyphicon-chevron-right !optional;
725 725
726 @include margin-left(10px); 726 @include margin-left(10px);
727 } 727 }
728 728
729 &.p-paginator-last { 729 &.p-paginator-last {
730 @extend .glyphicon-step-forward; 730 @extend .glyphicon-step-forward !optional;
731 } 731 }
732 } 732 }
733 733
@@ -806,7 +806,7 @@ p-calendar .p-datepicker {
806 } 806 }
807 807
808 .p-datepicker-next { 808 .p-datepicker-next {
809 @extend .glyphicon-chevron-right; 809 @extend .glyphicon-chevron-right !optional;
810 @include glyphicon-light; 810 @include glyphicon-light;
811 811
812 color: #000 !important; 812 color: #000 !important;
@@ -818,7 +818,7 @@ p-calendar .p-datepicker {
818 } 818 }
819 819
820 .p-datepicker-prev { 820 .p-datepicker-prev {
821 @extend .glyphicon-chevron-left; 821 @extend .glyphicon-chevron-left !optional;
822 @include glyphicon-light; 822 @include glyphicon-light;
823 823
824 color: #000 !important; 824 color: #000 !important;
@@ -833,14 +833,14 @@ p-calendar .p-datepicker {
833 .p-timepicker { 833 .p-timepicker {
834 834
835 .pi.pi-chevron-up { 835 .pi.pi-chevron-up {
836 @extend .glyphicon-chevron-up; 836 @extend .glyphicon-chevron-up !optional;
837 @include glyphicon-light; 837 @include glyphicon-light;
838 838
839 color: #000 !important; 839 color: #000 !important;
840 } 840 }
841 841
842 .pi.pi-chevron-down { 842 .pi.pi-chevron-down {
843 @extend .glyphicon-chevron-down; 843 @extend .glyphicon-chevron-down !optional;
844 @include glyphicon-light; 844 @include glyphicon-light;
845 845
846 color: #000 !important; 846 color: #000 !important;
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-26 02:55:37 +0000