forked from Shinonome/dots-hyprland
Added color Schemes support. Added settings GUI in colorscheme-osd
This commit is contained in:
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user