Added color Schemes support. Added settings GUI in colorscheme-osd

This commit is contained in:
midn8hustlr
2024-03-16 21:00:17 +05:30
parent 36e706be01
commit 4904cfbe71
14 changed files with 485 additions and 217 deletions
+19 -3
View File
@@ -1,7 +1,7 @@
///////////// COLOR MODIFICATIONS /////////////
// Material colors provide excellent readability, but can be uninteresting.
// This is an attempt to improve that.
$transparency_enabled: false;
//$transparency_enabled: false;
//@if $transparency_enabled ==false {
// @if $darkmode ==true {
@@ -35,6 +35,7 @@ $transparency_enabled: false;
//}
//
//// Amounts
$transparency: 0.7;
$transparentize_amount: 0.3;
$transparentize_surface_amount_less: 0.6;
$transparentize_surface_amount_less_less: 0.55;
@@ -62,7 +63,7 @@ $onSuccess: #ffffff;
$successContainer: #d1e8d5;
$onSuccessContainer: #0c1f13;
@if $darkmode ==true {
@if $darkmode == True {
// Dark variant
$success: #b5ccba;
$onSuccess: #213528;
@@ -70,6 +71,22 @@ $onSuccessContainer: #0c1f13;
$onSuccessContainer: #d1e9d6;
}
@if $transparent == True {
$background: transparentize($background, $transparency);
$surface: transparentize($surface, $transparency);
$surfaceDim: transparentize($surfaceDim, $transparency);
$surfaceBright: transparentize($surfaceBright, $transparency);
$surfaceContainerLowest: transparentize($surfaceContainerLowest, $transparency);
$surfaceContainerLow: transparentize($surfaceContainerLow, $transparency);
$surfaceContainer: transparentize($surfaceContainer, $transparency);
$surfaceContainerHigh: transparentize($surfaceContainerHigh, $transparency);
$surfaceContainerHighest: transparentize($surfaceContainerHighest, $transparency);
$surfaceVariant: transparentize($surfaceVariant, $transparency);
$inverseSurface: transparentize($inverseSurface, $transparency);
$surfaceTint: transparentize($surfaceTint, $transparency);
}
// Transparent versions
$t_primary: transparentize($primary, $transparentize_amount);
$t_onPrimary: transparentize($onPrimary, $transparentize_amount);
@@ -89,7 +106,6 @@ $t_error: transparentize($error, $transparentize_amount);
$t_onError: transparentize($onError, $transparentize_amount);
$t_errorContainer: transparentize($errorContainer, $transparentize_amount);
$t_onErrorContainer: transparentize($onErrorContainer, $transparentize_amount);
$t_colorbarbg: transparentize($colorbarbg, $transparentize_amount);
$t_background: transparentize($background, $transparentize_amount);
$t_t_background: transparentize($background, $transparentize_surface_amount_more);
$t_onBackground: transparentize($onBackground, $transparentize_amount);
+26 -1
View File
@@ -209,6 +209,31 @@ popover {
color: $onSecondaryContainer;
}
.multipleselection-container {
}
.multipleselection-btn {
@include small-rounding;
padding: 0rem 0.341rem;
border: 0.034rem solid $outlineVariant;
}
.multipleselection-btn:focus,
.multipleselection-btn:hover {
background-color: $hovercolor;
}
.multipleselection-btn-enabled {
background-color: $secondaryContainer;
color: $onSecondaryContainer;
}
.multipleselection-btn-enabled:hover,
.multipleselection-btn-enabled:focus {
background-color: $secondaryContainer;
color: $onSecondaryContainer;
}
.gap-v-5 {
min-height: 0.341rem;
}
@@ -231,4 +256,4 @@ popover {
.gap-h-15 {
min-width: 1.023rem;
}
}
+55 -29
View File
@@ -1,30 +1,56 @@
$darkmode: true;
$primary: #e2e2e2;
$onPrimary: #000000;
$primaryContainer: #6b6b6b;
$onPrimaryContainer: #e2e2e2;
$secondary: #e2e2e2;
$onSecondary: #000000;
$secondaryContainer: #313131;
$onSecondaryContainer: #e2e2e2;
$tertiary: #e2e2e2;
$onTertiary: #000000;
$tertiaryContainer: #000000;
$onTertiaryContainer: #e2e2e2;
$error: #e2e2e2;
$onError: #000000;
$errorContainer: #000000;
$onErrorContainer: #e2e2e2;
$colorbarbg: #000000;
$background: #000000;
$onBackground: #e2e2e2;
$surface: #161616;
$onSurface: #e2e2e2;
$surfaceVariant: #242424;
$onSurfaceVariant: #e2e2e2;
$outline: #a1a1a1;
$darkmode: True;
$transparent: False;
$primary_paletteKeyColor: #977126;
$secondary_paletteKeyColor: #877456;
$tertiary_paletteKeyColor: #657E5B;
$neutral_paletteKeyColor: #7E766B;
$neutral_variant_paletteKeyColor: #807667;
$background: #17130B;
$onBackground: #ECE1D4;
$surface: #17130B;
$surfaceDim: #17130B;
$surfaceBright: #3E382F;
$surfaceContainerLowest: #FFFFFF;
$surfaceContainerLow: #201B13;
$surfaceContainer: #241F17;
$surfaceContainerHigh: #2F2921;
$surfaceContainerHighest: #3A342B;
$onSurface: #ECE1D4;
$surfaceVariant: #4E4639;
$onSurfaceVariant: #D1C5B4;
$inverseSurface: #ECE1D4;
$inverseOnSurface: #353027;
$outline: #9A8F80;
$outlineVariant: #4E4639;
$shadow: #000000;
$inverseSurface: #e2e2e2;
$inverseOnSurface: #000000;
$inversePrimary: #e2e2e2;
$scrim: #000000;
$surfaceTint: #EEBF6D;
$primary: #EEBF6D;
$onPrimary: #422C00;
$primaryContainer: #5E4100;
$onPrimaryContainer: #FFDEA9;
$inversePrimary: #7B580D;
$secondary: #DAC3A1;
$onSecondary: #3C2E16;
$secondaryContainer: #57472C;
$onSecondaryContainer: #F9E1BC;
$tertiary: #B4CEA6;
$onTertiary: #203619;
$tertiaryContainer: #7F9873;
$onTertiaryContainer: #000000;
$error: #FFB4AB;
$onError: #690005;
$errorContainer: #93000A;
$onErrorContainer: #FFDAD6;
$primaryFixed: #FFDEA9;
$primaryFixedDim: #EEBF6D;
$onPrimaryFixed: #271900;
$onPrimaryFixedVariant: #5E4100;
$secondaryFixed: #F7DFBB;
$secondaryFixedDim: #DAC3A1;
$onSecondaryFixed: #251A04;
$onSecondaryFixedVariant: #54442A;
$tertiaryFixed: #CFEBC0;
$tertiaryFixedDim: #B4CEA6;
$onTertiaryFixed: #0B2006;
$onTertiaryFixedVariant: #364D2D;
+70 -11
View File
@@ -10,7 +10,7 @@
.osd-value {
@include elevation-border;
@include elevation2;
background-color: $t_background;
background-color: $background;
border-radius: 1.023rem;
padding: 0.625rem 1.023rem;
padding-top: 0.313rem;
@@ -65,20 +65,27 @@
.osd-colorscheme {
border-radius: 1.023rem;
background-color: $t_background;
padding: 1.023rem;
background-color: $background;
padding: 0.313rem 0.626rem;
@include elevation2;
}
.osd-colorscheme-settings {
background-color: $background;
padding: 0.313rem 0.626rem;
@include small-rounding;
}
.osd-color {
@include full-rounding;
border-radius: 0.650rem;
-gtk-outline-radius: 0.650rem;
min-width: 2.727rem;
min-height: 1.705rem;
padding: 0rem 0.341rem;
font-weight: bold;
box {
@include full-rounding;
@include small-rounding;
margin: 0.409rem;
}
}
@@ -103,26 +110,78 @@
color: $onSecondaryContainer;
box { background-color: $onSecondaryContainer; }
}
.osd-color-tertiary {
background-color: $tertiary;
color: $onTertiary;
box { background-color: $onTertiary; }
}
.osd-color-tertiaryContainer {
background-color: $tertiaryContainer;
color: $onTertiaryContainer;
box { background-color: $onTertiaryContainer; }
}
.osd-color-error {
background-color: $error;
color: $onError;
box { background-color: $onError; }
}
.osd-color-errorContainer {
background-color: $errorContainer;
color: $onErrorContainer;
box { background-color: $onErrorContainer; }
}
.osd-color-surface {
background-color: $surface;
color: $onSurface;
border: 0.068rem solid $outlineVariant;
box { background-color: $onSurface; }
}
.osd-color-surfaceContainer {
background-color: $surfaceContainer;
color: $onSurface;
box { background-color: $onSurface; }
}
.osd-color-inverseSurface {
background-color: $inverseSurface;
color: $inverseOnSurface;
box { background-color: $onSurfaceVariant; }
}
.osd-color-surfaceVariant {
background-color: $surfaceVariant;
color: $onSurfaceVariant;
box { background-color: $onSurfaceVariant; }
}
.osd-color-surface {
background-color: $surface;
color: $onSurface;
box { background-color: $onSurface; }
}
.osd-color-background {
background-color: $background;
color: $onBackground;
box { background-color: $onBackground; }
}
.osd-settings-btn-arrow {
@include full-rounding;
@include icon-material;
min-width: 1.705rem;
min-height: 1.705rem;
&:hover {
background-color: $surfaceContainerHigh;
}
&:active {
background-color: $surfaceContainerHighest;
}
}
.osd-show {
transition: 200ms cubic-bezier(0.1, 1, 0, 1);
}
.osd-hide {
transition: 190ms cubic-bezier(0.85, 0, 0.15, 1);
}
}