aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/+admin/overview/users/user-edit/user-edit.component.scss4
-rw-r--r--client/src/app/+admin/overview/users/user-list/user-list.component.scss5
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-settings.component.scss4
-rw-r--r--client/src/sass/application.scss1
-rw-r--r--client/src/sass/include/_mixins.scss16
-rw-r--r--client/src/sass/include/_variables.scss6
-rw-r--r--client/src/sass/ng-select.scss5
-rw-r--r--client/src/sass/player/_player-variables.scss4
8 files changed, 30 insertions, 15 deletions
diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss b/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
index 698628149..73a23eb7f 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
+++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
@@ -1,4 +1,6 @@
1@use 'sass:math'; 1@use 'sass:math';
2@use 'sass:color';
3
2@use '_variables' as *; 4@use '_variables' as *;
3@use '_mixins' as *; 5@use '_mixins' as *;
4 6
@@ -8,7 +10,7 @@ $form-base-input-width: 340px;
8 @include settings-big-title; 10 @include settings-big-title;
9 11
10 &.account-title-danger { 12 &.account-title-danger {
11 color: lighten($color: #c54130, $amount: 10); 13 color: color.adjust($color: #c54130, $lightness: 10%);
12 } 14 }
13} 15}
14 16
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.scss b/client/src/app/+admin/overview/users/user-list/user-list.component.scss
index 559a00251..1c4ca533f 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.scss
@@ -1,9 +1,12 @@
1@use 'sass:color';
2
1@use '_variables' as *; 3@use '_variables' as *;
2@use '_mixins' as *; 4@use '_mixins' as *;
5
3@use 'bootstrap/scss/functions' as *; 6@use 'bootstrap/scss/functions' as *;
4 7
5tr.banned > td { 8tr.banned > td {
6 background-color: lighten($color: $red, $amount: 40) !important; 9 background-color: color.adjust($color: $red, $lightness: 40%) !important;
7} 10}
8 11
9.banned-info { 12.banned-info {
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
index 3d686a146..5d406ed5d 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
@@ -1,3 +1,5 @@
1@use 'sass:color';
2
1@use '_variables' as *; 3@use '_variables' as *;
2@use '_mixins' as *; 4@use '_mixins' as *;
3@use 'bootstrap/scss/functions' as *; 5@use 'bootstrap/scss/functions' as *;
@@ -6,7 +8,7 @@
6 @include settings-big-title; 8 @include settings-big-title;
7 9
8 &.account-title-danger { 10 &.account-title-danger {
9 color: lighten($color: #c54130, $amount: 10); 11 color: color.adjust($color: #c54130, $lightness: 10%);
10 } 12 }
11} 13}
12 14
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 2c364afb4..4cac94f67 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,4 +1,5 @@
1@use 'sass:math'; 1@use 'sass:math';
2@use 'sass:color';
2 3
3@use '_variables' as *; 4@use '_variables' as *;
4@use '_mixins' as *; 5@use '_mixins' as *;
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 7a100a53d..a25741d91 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -1,4 +1,6 @@
1@use 'sass:math'; 1@use 'sass:math';
2@use 'sass:color';
3
2@use '_variables' as *; 4@use '_variables' as *;
3 5
4@import '_bootstrap-mixins'; 6@import '_bootstrap-mixins';
@@ -220,7 +222,7 @@
220} 222}
221 223
222@mixin danger-button { 224@mixin danger-button {
223 $color: lighten($color: #c54130, $amount: 10); 225 $color: color.adjust($color: #c54130, $lightness: 10%);
224 $text: #fff6f5; 226 $text: #fff6f5;
225 227
226 @include button-focus(scale-color($color, $alpha: -95%)); 228 @include button-focus(scale-color($color, $alpha: -95%));
@@ -233,7 +235,7 @@
233 &:focus, 235 &:focus,
234 &[disabled], 236 &[disabled],
235 &.disabled { 237 &.disabled {
236 background-color: lighten($color: $color, $amount: 10); 238 background-color: color.adjust($color: $color, $lightness: 10%);
237 } 239 }
238 240
239 &[disabled], 241 &[disabled],
@@ -676,7 +678,7 @@
676 transition: width 0.6s ease; 678 transition: width 0.6s ease;
677 679
678 &.red { 680 &.red {
679 background-color: lighten($color: #c54130, $amount: 10); 681 background-color: color.adjust($color: #c54130, $lightness: 10%);
680 } 682 }
681 } 683 }
682} 684}
@@ -721,7 +723,7 @@
721 723
722 > div { 724 > div {
723 box-sizing: border-box; 725 box-sizing: border-box;
724 flex: 0 0 percentage(math.div(1, 3)); 726 flex: 0 0 math.percentage(math.div(1, 3));
725 padding: 0 5px; 727 padding: 0 5px;
726 margin-bottom: 10px; 728 margin-bottom: 10px;
727 729
@@ -832,7 +834,7 @@
832// an immediate's parent size. This allows to set a ratio without explicit 834// an immediate's parent size. This allows to set a ratio without explicit
833// dimensions, as width/height cannot be computed from each other. 835// dimensions, as width/height cannot be computed from each other.
834@mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) { 836@mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) {
835 $padding-percent: percentage($inverted-ratio); 837 $padding-percent: math.percentage($inverted-ratio);
836 838
837 position: relative; 839 position: relative;
838 height: 0; 840 height: 0;
@@ -889,7 +891,7 @@
889 891
890@mixin on-small-main-col () { 892@mixin on-small-main-col () {
891 :host-context(.main-col:not(.expanded)) { 893 :host-context(.main-col:not(.expanded)) {
892 @media screen and (max-width: $small-view + $menu-width) { 894 @media screen and (max-width: #{$small-view + $menu-width}) {
893 @content; 895 @content;
894 } 896 }
895 } 897 }
@@ -903,7 +905,7 @@
903 905
904@mixin on-mobile-main-col () { 906@mixin on-mobile-main-col () {
905 :host-context(.main-col:not(.expanded)) { 907 :host-context(.main-col:not(.expanded)) {
906 @media screen and (max-width: $mobile-view + $menu-width) { 908 @media screen and (max-width: #{$mobile-view + $menu-width}) {
907 @content; 909 @content;
908 } 910 }
909 } 911 }
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 1eb3135f4..43a005774 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -17,11 +17,11 @@ $grey-foreground-hover-color: #303030;
17$grey-button-outline-color: color.scale($grey-foreground-color, $alpha: -95%); 17$grey-button-outline-color: color.scale($grey-foreground-color, $alpha: -95%);
18 18
19$main-color: hsl(24, 90%, 50%); 19$main-color: hsl(24, 90%, 50%);
20$main-color-lighter: lighten($main-color, 10%); 20$main-color-lighter: color.adjust($main-color, $lightness: 10%);
21$main-color-lightest: lighten($main-color, 40%); 21$main-color-lightest: color.adjust($main-color, $lightness: 40%);
22$main-color-very-light: #fff5eb; 22$main-color-very-light: #fff5eb;
23 23
24$main-hover-color: lighten($main-color, 5%); 24$main-hover-color: color.adjust($main-color, $lightness: 5%);
25$main-background-hover-color: #e9ecef; 25$main-background-hover-color: #e9ecef;
26 26
27$support-button: inherit; 27$support-button: inherit;
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index 4c7258232..ba7905c89 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -1,3 +1,6 @@
1@use 'sass:math';
2@use 'sass:color';
3
1@use '_variables' as *; 4@use '_variables' as *;
2@use '_mixins' as *; 5@use '_mixins' as *;
3 6
@@ -9,7 +12,7 @@ $ng-select-border: $input-border-color;
9$ng-select-bg: pvar(--mainBackgroundColor); 12$ng-select-bg: pvar(--mainBackgroundColor);
10 13
11// Cannot use a CSS variable as the default them use darken on this variable 14// Cannot use a CSS variable as the default them use darken on this variable
12$ng-select-selected: lighten($main-color, 40%); 15$ng-select-selected: color.adjust($main-color, $lightness: 40%);
13// $ng-select-selected-text: $ng-select-primary-text !default; 16// $ng-select-selected-text: $ng-select-primary-text !default;
14 17
15$ng-select-marked: pvar(--mainColorLightest); 18$ng-select-marked: pvar(--mainColorLightest);
diff --git a/client/src/sass/player/_player-variables.scss b/client/src/sass/player/_player-variables.scss
index d5f24dd91..47d3d2b0d 100644
--- a/client/src/sass/player/_player-variables.scss
+++ b/client/src/sass/player/_player-variables.scss
@@ -1,3 +1,5 @@
1@use 'sass:color';
2
1@use 'bootstrap/scss/functions' as *; 3@use 'bootstrap/scss/functions' as *;
2 4
3$primary-foreground-color: #fff; 5$primary-foreground-color: #fff;
@@ -18,7 +20,7 @@ $control-bar-button-width: 38px;
18 20
19$control-bar-total-height: $control-bar-height - $control-bar-slider-top; 21$control-bar-total-height: $control-bar-height - $control-bar-slider-top;
20 22
21$slider-bg-color: lighten($primary-background-color, 33%); 23$slider-bg-color: color.adjust($primary-background-color, $lightness: 33%);
22 24
23$progress-margin: 10px; 25$progress-margin: 10px;
24 26