aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2023-02-17 13:32:11 +0100
committerChocobozzz <me@florianbigard.com>2023-02-17 13:32:11 +0100
commitdec437aa46a644fb1b3cedc9afe4503c44e15308 (patch)
tree093d6b60bf461a7be504a5435f53177dc0dda825 /client
parentefaf3797897533ebaac6d96110c4c56af9fc1628 (diff)
downloadPeerTube-dec437aa46a644fb1b3cedc9afe4503c44e15308.tar.gz
PeerTube-dec437aa46a644fb1b3cedc9afe4503c44e15308.tar.zst
PeerTube-dec437aa46a644fb1b3cedc9afe4503c44e15308.zip
Increase theme compatibility
Try to use CSS variable as much as possible
Diffstat (limited to 'client')
-rw-r--r--client/src/app/shared/shared-main/misc/help.component.scss5
-rw-r--r--client/src/app/shared/shared-main/users/user-notifications.component.scss2
-rw-r--r--client/src/sass/bootstrap.scss17
-rw-r--r--client/src/sass/include/_mixins.scss6
-rw-r--r--client/src/sass/ng-select.scss29
5 files changed, 44 insertions, 15 deletions
diff --git a/client/src/app/shared/shared-main/misc/help.component.scss b/client/src/app/shared/shared-main/misc/help.component.scss
index f7a7fea55..6ccef9f2c 100644
--- a/client/src/app/shared/shared-main/misc/help.component.scss
+++ b/client/src/app/shared/shared-main/misc/help.component.scss
@@ -23,12 +23,8 @@
23 max-width: 300px; 23 max-width: 300px;
24 24
25 .popover-body { 25 .popover-body {
26 font-family: $main-fonts;
27 text-align: start;
28 padding: 10px; 26 padding: 10px;
29 font-size: 13px; 27 font-size: 13px;
30 background-color: pvar(--mainBackgroundColor);
31 color: pvar(--mainForegroundColor);
32 border-radius: 3px; 28 border-radius: 3px;
33 29
34 p { 30 p {
@@ -37,6 +33,7 @@
37 33
38 ul { 34 ul {
39 @include padding-left(20px); 35 @include padding-left(20px);
36
40 margin-bottom: 0; 37 margin-bottom: 0;
41 } 38 }
42 } 39 }
diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.scss b/client/src/app/shared/shared-main/users/user-notifications.component.scss
index 12352b3b7..8f4d4c7c1 100644
--- a/client/src/app/shared/shared-main/users/user-notifications.component.scss
+++ b/client/src/app/shared/shared-main/users/user-notifications.component.scss
@@ -21,7 +21,7 @@
21 } 21 }
22 22
23 my-global-icon { 23 my-global-icon {
24 @include apply-svg-color(#333); 24 @include apply-svg-color(#{pvar(--mainForegroundColor)});
25 @include margin-right(11px); 25 @include margin-right(11px);
26 @include margin-left(3px); 26 @include margin-left(3px);
27 27
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 724c4ad69..7843d3be7 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -30,11 +30,23 @@
30@import 'bootstrap/scss/helpers'; 30@import 'bootstrap/scss/helpers';
31@import 'bootstrap/scss/utilities/api'; 31@import 'bootstrap/scss/utilities/api';
32 32
33:root {
34 --bs-border-color-translucent: #{pvar(--inputBorderColor)};
35}
36
33.accordion { 37.accordion {
34 --bs-accordion-color: #{pvar(--mainForegroundColor)}; 38 --bs-accordion-color: #{pvar(--mainForegroundColor)};
35 --bs-accordion-bg: #{pvar(--mainBackgroundColor)}; 39 --bs-accordion-bg: #{pvar(--mainBackgroundColor)};
36} 40}
37 41
42.popover {
43 --bs-popover-bg: #{pvar(--mainBackgroundColor)};
44 --bs-popover-body-color: #{pvar(--mainForegroundColor)};
45 --bs-popover-header-color: #{pvar(--mainForegroundColor)};
46
47 font-family: $main-fonts;
48}
49
38.flex-auto { 50.flex-auto {
39 flex: auto; 51 flex: auto;
40} 52}
@@ -48,12 +60,15 @@
48// --------------------------------------------------------------------------- 60// ---------------------------------------------------------------------------
49 61
50.dropdown-menu { 62.dropdown-menu {
63 --bs-dropdown-link-hover-bg: #{pvar(--mainBackgroundHoverColor)};
64 --bs-dropdown-link-color: #{pvar(--mainForegroundColor)};
65 --bs-dropdown-border-color: #{pvar(--inputBorderColor)};
66
51 .dropdown-header { 67 .dropdown-header {
52 @include padding-left(1rem); 68 @include padding-left(1rem);
53 } 69 }
54 70
55 .dropdown-item { 71 .dropdown-item {
56 color: pvar(--mainForegroundColor);
57 padding: 3px 15px; 72 padding: 3px 15px;
58 73
59 &.active { 74 &.active {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 79d350629..2d9f9011d 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -397,7 +397,7 @@
397 position: absolute; 397 position: absolute;
398 pointer-events: none; 398 pointer-events: none;
399 border: 5px solid rgba(0, 0, 0, 0); 399 border: 5px solid rgba(0, 0, 0, 0);
400 border-top-color: #000; 400 border-top-color: pvar(--mainForegroundColor);
401 margin-top: -2px; 401 margin-top: -2px;
402 z-index: 100; 402 z-index: 100;
403 } 403 }
@@ -646,7 +646,7 @@
646} 646}
647 647
648@mixin progressbar($small: false) { 648@mixin progressbar($small: false) {
649 background-color: $grey-background-color; 649 background-color: pvar(--greyBackgroundColor);
650 display: flex; 650 display: flex;
651 height: 1rem; 651 height: 1rem;
652 overflow: hidden; 652 overflow: hidden;
@@ -656,7 +656,7 @@
656 656
657 span { 657 span {
658 position: absolute; 658 position: absolute;
659 color: $grey-foreground-color; 659 color: pvar(--greyForegroundColor);
660 660
661 @if $small { 661 @if $small {
662 top: -1px; 662 top: -1px;
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index e231e4fed..b0af4f763 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -1,19 +1,36 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4$ng-select-highlight: #f2690d; 4$ng-select-highlight: pvar(--mainColor);
5// $ng-select-primary-text: #333 !default; 5$ng-select-primary-text: pvar(--mainForegroundColor);
6// $ng-select-disabled-text: #f9f9f9 !default; 6// $ng-select-disabled-text: #f9f9f9 !default;
7$ng-select-border: $input-border-color; 7$ng-select-border: $input-border-color;
8// $ng-select-border-radius: 4px !default; 8// $ng-select-border-radius: 4px !default;
9// $ng-select-bg: #ffffff !default; 9$ng-select-bg: pvar(--mainBackgroundColor);
10// $ng-select-selected: lighten($ng-select-highlight, 46) !default; 10
11// $ng-select-marke d: lighten($ng-select-highlight, 48) !default; 11// Cannot use a CSS variable as the default them use darken on this variable
12$ng-select-selected: lighten($main-color, 40%);
13// $ng-select-selected-text: $ng-select-primary-text !default;
14
15$ng-select-marked: pvar(--mainColorLightest);
16// $ng-select-marked-text: $ng-select-primary-text !default;
17
12$ng-select-box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); 18$ng-select-box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
13// $ng-select-placeholder: lighten($ng-select-primary-text, 40) !default; 19$ng-select-placeholder: pvar(--greyForegroundColor);
14$ng-select-height: 30px; 20$ng-select-height: 30px;
15$ng-select-value-padding-left: 15px; 21$ng-select-value-padding-left: 15px;
16$ng-select-value-font-size: $form-input-font-size; 22$ng-select-value-font-size: $form-input-font-size;
23// $ng-select-value-text: $ng-select-primary-text !default;
24
25// $ng-select-dropdown-bg: $ng-select-bg !default;
26// $ng-select-dropdown-border: $ng-select-border !default;
27// $ng-select-dropdown-optgroup-text: rgba(0, 0, 0, 0.54) !default;
28// $ng-select-dropdown-optgroup-marked: $ng-select-dropdown-optgroup-text !default;
29// $ng-select-dropdown-option-bg: $ng-select-dropdown-bg !default;
30// $ng-select-dropdown-option-text: rgba(0, 0, 0, 0.87) !default;
31$ng-select-dropdown-option-disabled: pvar(--greyForegroundColor);
32
33$ng-select-input-text: pvar(--mainForegroundColor);
17 34
18@import '@ng-select/ng-select/scss/default.theme'; 35@import '@ng-select/ng-select/scss/default.theme';
19 36