forks
/
peertube
1
0
Fork 0
Code Releases Activity

Increase theme compatibility 

Try to use CSS variable as much as possible
This commit is contained in:
Chocobozzz 2023-02-17 13:32:11 +01:00
parent efaf379789
commit dec437aa46
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
5 changed files with 44 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/app/shared/shared-main/misc/help.component.scss
View File

@ -23,12 +23,8 @@
max-width: 300px;
.popover-body {
font-family: $main-fonts;
text-align: start;
padding: 10px;
font-size: 13px;
background-color: pvar(--mainBackgroundColor);
color: pvar(--mainForegroundColor);
border-radius: 3px;
p {
@ -37,6 +33,7 @@
ul {
@include padding-left(20px);
margin-bottom: 0;
}
}

2
client/src/app/shared/shared-main/users/user-notifications.component.scss
View File

@ -21,7 +21,7 @@
}
my-global-icon {
@include apply-svg-color(#333);
@include apply-svg-color(#{pvar(--mainForegroundColor)});
@include margin-right(11px);
@include margin-left(3px);

17
client/src/sass/bootstrap.scss vendored
View File

@ -30,11 +30,23 @@
@import 'bootstrap/scss/helpers';
@import 'bootstrap/scss/utilities/api';
:root {
--bs-border-color-translucent: #{pvar(--inputBorderColor)};
}
.accordion {
--bs-accordion-color: #{pvar(--mainForegroundColor)};
--bs-accordion-bg: #{pvar(--mainBackgroundColor)};
}
.popover {
--bs-popover-bg: #{pvar(--mainBackgroundColor)};
--bs-popover-body-color: #{pvar(--mainForegroundColor)};
--bs-popover-header-color: #{pvar(--mainForegroundColor)};
font-family: $main-fonts;
}
.flex-auto {
flex: auto;
}
@ -48,12 +60,15 @@
// ---------------------------------------------------------------------------
.dropdown-menu {
--bs-dropdown-link-hover-bg: #{pvar(--mainBackgroundHoverColor)};
--bs-dropdown-link-color: #{pvar(--mainForegroundColor)};
--bs-dropdown-border-color: #{pvar(--inputBorderColor)};
.dropdown-header {
@include padding-left(1rem);
}
.dropdown-item {
color: pvar(--mainForegroundColor);
padding: 3px 15px;
&.active {

6
client/src/sass/include/_mixins.scss
View File

@ -397,7 +397,7 @@
position: absolute;
pointer-events: none;
border: 5px solid rgba(0, 0, 0, 0);
border-top-color: #000;
border-top-color: pvar(--mainForegroundColor);
margin-top: -2px;
z-index: 100;
}
@ -646,7 +646,7 @@
}
@mixin progressbar($small: false) {
background-color: $grey-background-color;
background-color: pvar(--greyBackgroundColor);
display: flex;
height: 1rem;
overflow: hidden;
@ -656,7 +656,7 @@
span {
position: absolute;
color: $grey-foreground-color;
color: pvar(--greyForegroundColor);
@if $small {
top: -1px;

29
client/src/sass/ng-select.scss
View File

@ -1,19 +1,36 @@
@use '_variables' as *;
@use '_mixins' as *;
$ng-select-highlight: #f2690d;
// $ng-select-primary-text: #333 !default;
$ng-select-highlight: pvar(--mainColor);
$ng-select-primary-text: pvar(--mainForegroundColor);
// $ng-select-disabled-text: #f9f9f9 !default;
$ng-select-border: $input-border-color;
// $ng-select-border-radius: 4px !default;
// $ng-select-bg: #ffffff !default;
// $ng-select-selected: lighten($ng-select-highlight, 46) !default;
// $ng-select-marke d: lighten($ng-select-highlight, 48) !default;
$ng-select-bg: pvar(--mainBackgroundColor);
// Cannot use a CSS variable as the default them use darken on this variable
$ng-select-selected: lighten($main-color, 40%);
// $ng-select-selected-text: $ng-select-primary-text !default;
$ng-select-marked: pvar(--mainColorLightest);
// $ng-select-marked-text: $ng-select-primary-text !default;
$ng-select-box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
// $ng-select-placeholder: lighten($ng-select-primary-text, 40) !default;
$ng-select-placeholder: pvar(--greyForegroundColor);
$ng-select-height: 30px;
$ng-select-value-padding-left: 15px;
$ng-select-value-font-size: $form-input-font-size;
// $ng-select-value-text: $ng-select-primary-text !default;
// $ng-select-dropdown-bg: $ng-select-bg !default;
// $ng-select-dropdown-border: $ng-select-border !default;
// $ng-select-dropdown-optgroup-text: rgba(0, 0, 0, 0.54) !default;
// $ng-select-dropdown-optgroup-marked: $ng-select-dropdown-optgroup-text !default;
// $ng-select-dropdown-option-bg: $ng-select-dropdown-bg !default;
// $ng-select-dropdown-option-text: rgba(0, 0, 0, 0.87) !default;
$ng-select-dropdown-option-disabled: pvar(--greyForegroundColor);
$ng-select-input-text: pvar(--mainForegroundColor);
@import '@ng-select/ng-select/scss/default.theme';