mirror of
https://github.com/end-4/dots-hyprland.git
synced 2026-06-05 23:09:26 -05:00
Add materialyoucolor-python, simplify scss
This commit is contained in:
@@ -1,5 +1,7 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
source ${HOME}/virtualenvs/my_project_venv/bin/activate
|
||||
|
||||
# check if no arguments
|
||||
if [ $# -eq 0 ]; then
|
||||
echo "Usage: colorgen.sh /path/to/image (--apply)"
|
||||
|
||||
@@ -4,6 +4,21 @@ from pathlib import Path
|
||||
import sys
|
||||
import subprocess
|
||||
|
||||
# Color in hue, chroma, tone form
|
||||
from materialyoucolor.hct import Hct
|
||||
from materialyoucolor.dynamiccolor.material_dynamic_colors import MaterialDynamicColors
|
||||
# There are 9 different variants of scheme.
|
||||
from materialyoucolor.scheme.scheme_tonal_spot import SchemeTonalSpot as Scheme
|
||||
#from materialyoucolor.scheme.scheme_fruit_salad import SchemeFruitSalad as Scheme
|
||||
#from materialyoucolor.scheme.scheme_expressive import SchemeExpressive as Scheme
|
||||
#from materialyoucolor.scheme.scheme_monochrome import SchemeMonochrome as Scheme
|
||||
#from materialyoucolor.scheme.scheme_rainbow import SchemeRainbow as Scheme
|
||||
#from materialyoucolor.scheme.scheme_vibrant import SchemeVibrant as Scheme
|
||||
#from materialyoucolor.scheme.scheme_neutral import SchemeNeutral as Scheme
|
||||
#from materialyoucolor.scheme.scheme_fidelity import SchemeFidelity as Scheme
|
||||
#from materialyoucolor.scheme.scheme_content import SchemeContent as Scheme
|
||||
# Others you can import: SchemeExpressive, SchemeFruitSalad, SchemeMonochrome, SchemeRainbow, SchemeVibrant, SchemeNeutral, SchemeFidelity and SchemeContent
|
||||
|
||||
def darken(hex_color, factor=0.7):
|
||||
if not (hex_color.startswith('#') and len(hex_color) in (4, 7)):
|
||||
raise ValueError("Invalid hex color format")
|
||||
@@ -23,6 +38,10 @@ if len(sys.argv) > 1 and sys.argv[1] == '--path':
|
||||
hsize = int((float(img.size[1])*float(wpercent)))
|
||||
img = img.resize((basewidth,hsize),Image.Resampling.LANCZOS)
|
||||
newtheme = themeFromImage(img)
|
||||
argb = sourceColorFromImage(img)
|
||||
|
||||
scheme = Scheme(Hct.from_int(argb), True, 0.0)
|
||||
|
||||
# except FileNotFoundError:
|
||||
# print('[generate_colors_material.py] File not found', file=sys.stderr);
|
||||
# exit()
|
||||
@@ -36,7 +55,7 @@ else:
|
||||
# try:
|
||||
# imagePath = subprocess.check_output("ags run-js 'wallpaper.get(0)'", shell=True)
|
||||
imagePath = subprocess.check_output("swww query | awk -F 'image: ' '{print $2}'", shell=True)
|
||||
imagePath = imagePath[:-1].decode("utf-8")
|
||||
imagePath = imagePath[:-1].decode("utf-8")
|
||||
img = Image.open(imagePath)
|
||||
basewidth = 64
|
||||
wpercent = (basewidth/float(img.size[0]))
|
||||
@@ -60,63 +79,90 @@ else:
|
||||
colorscheme = newtheme.get('schemes').get('dark')
|
||||
print('$darkmode: true;')
|
||||
|
||||
primary = hexFromArgb(colorscheme.get_primary())
|
||||
onPrimary = hexFromArgb(colorscheme.get_onPrimary())
|
||||
primaryContainer = hexFromArgb(colorscheme.get_primaryContainer())
|
||||
onPrimaryContainer = hexFromArgb(colorscheme.get_onPrimaryContainer())
|
||||
secondary = hexFromArgb(colorscheme.get_secondary())
|
||||
onSecondary = hexFromArgb(colorscheme.get_onSecondary())
|
||||
secondaryContainer = hexFromArgb(colorscheme.get_secondaryContainer())
|
||||
onSecondaryContainer = hexFromArgb(colorscheme.get_onSecondaryContainer())
|
||||
tertiary = hexFromArgb(colorscheme.get_tertiary())
|
||||
onTertiary = hexFromArgb(colorscheme.get_onTertiary())
|
||||
tertiaryContainer = hexFromArgb(colorscheme.get_tertiaryContainer())
|
||||
onTertiaryContainer = hexFromArgb(colorscheme.get_onTertiaryContainer())
|
||||
error = hexFromArgb(colorscheme.get_error())
|
||||
onError = hexFromArgb(colorscheme.get_onError())
|
||||
errorContainer = hexFromArgb(colorscheme.get_errorContainer())
|
||||
onErrorContainer = hexFromArgb(colorscheme.get_onErrorContainer())
|
||||
background = hexFromArgb(colorscheme.get_background())
|
||||
onBackground = hexFromArgb(colorscheme.get_onBackground())
|
||||
surface = hexFromArgb(colorscheme.get_surface())
|
||||
onSurface = hexFromArgb(colorscheme.get_onSurface())
|
||||
surfaceVariant = hexFromArgb(colorscheme.get_surfaceVariant())
|
||||
onSurfaceVariant = hexFromArgb(colorscheme.get_onSurfaceVariant())
|
||||
outline = hexFromArgb(colorscheme.get_outline())
|
||||
shadow = hexFromArgb(colorscheme.get_shadow())
|
||||
inverseSurface = hexFromArgb(colorscheme.get_inverseSurface())
|
||||
inverseOnSurface = hexFromArgb(colorscheme.get_inverseOnSurface())
|
||||
inversePrimary = hexFromArgb(colorscheme.get_inversePrimary())
|
||||
#primary = hexFromArgb(colorscheme.get_primary())
|
||||
#onPrimary = hexFromArgb(colorscheme.get_onPrimary())
|
||||
#primaryContainer = hexFromArgb(colorscheme.get_primaryContainer())
|
||||
#onPrimaryContainer = hexFromArgb(colorscheme.get_onPrimaryContainer())
|
||||
#secondary = hexFromArgb(colorscheme.get_secondary())
|
||||
#onSecondary = hexFromArgb(colorscheme.get_onSecondary())
|
||||
#secondaryContainer = hexFromArgb(colorscheme.get_secondaryContainer())
|
||||
#onSecondaryContainer = hexFromArgb(colorscheme.get_onSecondaryContainer())
|
||||
#tertiary = hexFromArgb(colorscheme.get_tertiary())
|
||||
#onTertiary = hexFromArgb(colorscheme.get_onTertiary())
|
||||
#tertiaryContainer = hexFromArgb(colorscheme.get_tertiaryContainer())
|
||||
#onTertiaryContainer = hexFromArgb(colorscheme.get_onTertiaryContainer())
|
||||
#error = hexFromArgb(colorscheme.get_error())
|
||||
#onError = hexFromArgb(colorscheme.get_onError())
|
||||
#errorContainer = hexFromArgb(colorscheme.get_errorContainer())
|
||||
#onErrorContainer = hexFromArgb(colorscheme.get_onErrorContainer())
|
||||
#background = hexFromArgb(colorscheme.get_background())
|
||||
#onBackground = hexFromArgb(colorscheme.get_onBackground())
|
||||
#surface = hexFromArgb(colorscheme.get_surface())
|
||||
#onSurface = hexFromArgb(colorscheme.get_onSurface())
|
||||
#surfaceVariant = hexFromArgb(colorscheme.get_surfaceVariant())
|
||||
#onSurfaceVariant = hexFromArgb(colorscheme.get_onSurfaceVariant())
|
||||
#outline = hexFromArgb(colorscheme.get_outline())
|
||||
#shadow = hexFromArgb(colorscheme.get_shadow())
|
||||
#inverseSurface = hexFromArgb(colorscheme.get_inverseSurface())
|
||||
#inverseOnSurface = hexFromArgb(colorscheme.get_inverseOnSurface())
|
||||
#inversePrimary = hexFromArgb(colorscheme.get_inversePrimary())
|
||||
|
||||
|
||||
# make material less boring
|
||||
if darkmode:
|
||||
background = darken(background, 0.6)
|
||||
#if darkmode:
|
||||
# background = darken(background, 0.6)
|
||||
|
||||
print('$primary: ' + primary + ';')
|
||||
print('$onPrimary: ' + onPrimary + ';')
|
||||
print('$primaryContainer: ' + primaryContainer + ';')
|
||||
print('$onPrimaryContainer: ' + onPrimaryContainer + ';')
|
||||
print('$secondary: ' + secondary + ';')
|
||||
print('$onSecondary: ' + onSecondary + ';')
|
||||
print('$secondaryContainer: ' + secondaryContainer + ';')
|
||||
print('$onSecondaryContainer: ' + onSecondaryContainer + ';')
|
||||
print('$tertiary: ' + tertiary + ';')
|
||||
print('$onTertiary: ' + onTertiary + ';')
|
||||
print('$tertiaryContainer: ' + tertiaryContainer + ';')
|
||||
print('$onTertiaryContainer: ' + onTertiaryContainer + ';')
|
||||
print('$error: ' + error + ';')
|
||||
print('$onError: ' + onError + ';')
|
||||
print('$errorContainer: ' + errorContainer + ';')
|
||||
print('$onErrorContainer: ' + onErrorContainer + ';')
|
||||
print('$colorbarbg: ' + background + ';')
|
||||
print('$background: ' + background + ';')
|
||||
print('$onBackground: ' + onBackground + ';')
|
||||
print('$surface: ' + surface + ';')
|
||||
print('$onSurface: ' + onSurface + ';')
|
||||
print('$surfaceVariant: ' + surfaceVariant + ';')
|
||||
print('$onSurfaceVariant: ' + onSurfaceVariant + ';')
|
||||
print('$outline: ' + outline + ';')
|
||||
print('$shadow: ' + shadow + ';')
|
||||
print('$inverseSurface: ' + inverseSurface + ';')
|
||||
print('$inverseOnSurface: ' + inverseOnSurface + ';')
|
||||
print('$inversePrimary: ' + inversePrimary + ';')
|
||||
#print('$primary: ' + primary + ';')
|
||||
#print('$onPrimary: ' + onPrimary + ';')
|
||||
#print('$primaryContainer: ' + primaryContainer + ';')
|
||||
#print('$onPrimaryContainer: ' + onPrimaryContainer + ';')
|
||||
#print('$secondary: ' + secondary + ';')
|
||||
#print('$onSecondary: ' + onSecondary + ';')
|
||||
#print('$secondaryContainer: ' + secondaryContainer + ';')
|
||||
#print('$onSecondaryContainer: ' + onSecondaryContainer + ';')
|
||||
#print('$tertiary: ' + tertiary + ';')
|
||||
#print('$onTertiary: ' + onTertiary + ';')
|
||||
#print('$tertiaryContainer: ' + tertiaryContainer + ';')
|
||||
#print('$onTertiaryContainer: ' + onTertiaryContainer + ';')
|
||||
#print('$error: ' + error + ';')
|
||||
#print('$onError: ' + onError + ';')
|
||||
#print('$errorContainer: ' + errorContainer + ';')
|
||||
#print('$onErrorContainer: ' + onErrorContainer + ';')
|
||||
#print('$colorbarbg: ' + background + ';')
|
||||
#print('$background: ' + background + ';')
|
||||
#print('$onBackground: ' + onBackground + ';')
|
||||
#print('$surface: ' + surface + ';')
|
||||
#print('$onSurface: ' + onSurface + ';')
|
||||
#print('$surfaceVariant: ' + surfaceVariant + ';')
|
||||
#print('$onSurfaceVariant: ' + onSurfaceVariant + ';')
|
||||
#print('$outline: ' + outline + ';')
|
||||
#print('$shadow: ' + shadow + ';')
|
||||
#print('$inverseSurface: ' + inverseSurface + ';')
|
||||
#print('$inverseOnSurface: ' + inverseOnSurface + ';')
|
||||
#print('$inversePrimary: ' + inversePrimary + ';')
|
||||
#print('$indsddsdversePrimary: ' + inversePrimary + ';')
|
||||
|
||||
|
||||
|
||||
if len(sys.argv) > 4:
|
||||
if sys.argv[4] == '--debug':
|
||||
for color in vars(MaterialDynamicColors).keys():
|
||||
color_name = getattr(MaterialDynamicColors, color)
|
||||
if hasattr(color_name, "get_hct"):
|
||||
rgba = color_name.get_hct(scheme).to_rgba()
|
||||
r, g, b, a = rgba
|
||||
hex_color = f"#{r:02X}{g:02X}{b:02X}"
|
||||
print(color.ljust(32), "\x1B[38;2;{};{};{}m{}\x1B[0m".format(rgba[0], rgba[1], rgba[2], "\x1b[7m \x1b[7m"), hex_color)
|
||||
|
||||
print('\nHey :\n')
|
||||
|
||||
|
||||
for color in vars(MaterialDynamicColors).keys():
|
||||
color_name = getattr(MaterialDynamicColors, color)
|
||||
if hasattr(color_name, "get_hct"):
|
||||
rgba = color_name.get_hct(scheme).to_rgba()
|
||||
r, g, b, a = rgba
|
||||
hex_color = f"#{r:02X}{g:02X}{b:02X}"
|
||||
print('$' + color + ': ' + hex_color + ';')
|
||||
|
||||
print('$colorbarbg: ' + '#000000' + ';')
|
||||
|
||||
+21
-22
@@ -15,7 +15,7 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
}
|
||||
|
||||
.bar-bg {
|
||||
background-color: $t_background;
|
||||
background-color: $background;
|
||||
min-height: 2.727rem;
|
||||
}
|
||||
|
||||
@@ -28,7 +28,7 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
}
|
||||
|
||||
.bar-group {
|
||||
background-color: $l_l_t_surfaceVariant;
|
||||
background-color: $surfaceContainer;
|
||||
}
|
||||
|
||||
.bar-group-pad {
|
||||
@@ -83,27 +83,23 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
|
||||
.bar-ws {
|
||||
min-width: $bar_ws_width;
|
||||
color: mix($onBackground, $background, 40%);
|
||||
@if $darkmode ==true {
|
||||
color: mix($onBackground, $background, 45%);
|
||||
}
|
||||
color: $outlineVariant;
|
||||
}
|
||||
|
||||
.bar-ws-active {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
background-color: $primary;
|
||||
color: $onPrimary;
|
||||
}
|
||||
|
||||
.bar-ws-occupied {
|
||||
background-color: $bar_subgroup_bg;
|
||||
color: $onSurfaceVariant;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-separator {
|
||||
@include full-rounding;
|
||||
min-width: 0.341rem;
|
||||
min-height: 0.341rem;
|
||||
background-color: mix($t_surface, $t_onSurface, 90%);
|
||||
margin: 0rem 0.341rem;
|
||||
}
|
||||
|
||||
@@ -119,7 +115,7 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
.bar-date {
|
||||
@include titlefont;
|
||||
font-size: 1rem;
|
||||
color: $onBackground;
|
||||
//color: #AA0000;//$outlineVariant;
|
||||
}
|
||||
|
||||
.bar-batt {
|
||||
@@ -187,8 +183,8 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
border-radius: 10rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
background-color: $primaryContainer;
|
||||
color: $onPrimaryContainer;
|
||||
}
|
||||
|
||||
.bar-music-playstate-txt {
|
||||
@@ -231,7 +227,7 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
}
|
||||
|
||||
.corner {
|
||||
background-color: $t_background;
|
||||
background-color: $background;
|
||||
@include large-rounding;
|
||||
}
|
||||
|
||||
@@ -243,7 +239,7 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
.bar-topdesc {
|
||||
margin-top: -0.136rem;
|
||||
margin-bottom: -0.341rem;
|
||||
color: $subtext;
|
||||
color: $outline;
|
||||
}
|
||||
|
||||
.bar-space-button {
|
||||
@@ -296,11 +292,12 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
}
|
||||
|
||||
.bar-statusicons-hover {
|
||||
background-color: mix($t_background, $t_onBackground, 90%);
|
||||
background-color: $surfaceContainerHighest;
|
||||
}
|
||||
|
||||
.bar-statusicons-active {
|
||||
background-color: mix($t_background, $t_onBackground, 80%);
|
||||
background-color: $primary;
|
||||
color: $onPrimary;
|
||||
}
|
||||
|
||||
.bar-util-btn {
|
||||
@@ -308,14 +305,16 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
@include element_decel;
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
background-color: $bar_subgroup_bg;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-util-btn:hover,
|
||||
.bar-util-btn:focus {
|
||||
background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 90%);
|
||||
background-color: $primaryContainer;
|
||||
}
|
||||
|
||||
.bar-util-btn:active {
|
||||
background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 80%);
|
||||
}
|
||||
background-color: $primary;
|
||||
color: $onPrimary;
|
||||
}
|
||||
|
||||
@@ -3,38 +3,38 @@
|
||||
// This is an attempt to improve that.
|
||||
$transparency_enabled: false;
|
||||
|
||||
@if $transparency_enabled ==false {
|
||||
@if $darkmode ==true {
|
||||
$primary: mix($primary, white, 70%);
|
||||
$primaryContainer: mix($primaryContainer, white, 90%);
|
||||
$background: mix(mix($background, $primary, 94%), #000000, 50%);
|
||||
$surface: mix($surface, $primaryContainer, 98%);
|
||||
$surfaceVariant: mix($surfaceVariant, #000000, 75%);
|
||||
// $secondaryContainer: mix($secondaryContainer, $primaryContainer, 90%);
|
||||
}
|
||||
|
||||
@if $darkmode ==false {
|
||||
$background: mix($background, $primary, 87%);
|
||||
$surface: mix($surface, $primary, 93%);
|
||||
$surfaceVariant: mix($surfaceVariant, #ffffff, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
@if $transparency_enabled ==true {
|
||||
@if $darkmode ==true {
|
||||
$background: mix(mix($background, $primary, 94%), #000000, 50%);
|
||||
$surface: mix($surface, $primaryContainer, 98%);
|
||||
$surfaceVariant: mix($surfaceVariant, #000000, 55%);
|
||||
}
|
||||
|
||||
@if $darkmode ==false {
|
||||
$background: mix($background, $primary, 94%);
|
||||
$surface: mix($surface, $primary, 93%);
|
||||
$surfaceVariant: mix($surfaceVariant, #ffffff, 55%);
|
||||
}
|
||||
}
|
||||
|
||||
// Amounts
|
||||
//@if $transparency_enabled ==false {
|
||||
// @if $darkmode ==true {
|
||||
// $primary: mix($primary, white, 70%);
|
||||
// $primaryContainer: mix($primaryContainer, white, 90%);
|
||||
// $background: mix(mix($background, $primary, 94%), #000000, 50%);
|
||||
// $surface: mix($surface, $primaryContainer, 98%);
|
||||
// $surfaceVariant: mix($surfaceVariant, #000000, 75%);
|
||||
// // $secondaryContainer: mix($secondaryContainer, $primaryContainer, 90%);
|
||||
// }
|
||||
//
|
||||
// @if $darkmode ==false {
|
||||
// $background: mix($background, $primary, 87%);
|
||||
// $surface: mix($surface, $primary, 93%);
|
||||
// $surfaceVariant: mix($surfaceVariant, #ffffff, 25%);
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@if $transparency_enabled ==true {
|
||||
// @if $darkmode ==true {
|
||||
// $background: mix(mix($background, $primary, 94%), #000000, 50%);
|
||||
// $surface: mix($surface, $primaryContainer, 98%);
|
||||
// $surfaceVariant: mix($surfaceVariant, #000000, 55%);
|
||||
// }
|
||||
//
|
||||
// @if $darkmode ==false {
|
||||
// $background: mix($background, $primary, 94%);
|
||||
// $surface: mix($surface, $primary, 93%);
|
||||
// $surfaceVariant: mix($surfaceVariant, #ffffff, 55%);
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//// Amounts
|
||||
$transparentize_amount: 0.3;
|
||||
$transparentize_surface_amount_less: 0.6;
|
||||
$transparentize_surface_amount_less_less: 0.55;
|
||||
@@ -42,19 +42,19 @@ $transparentize_surface_amount: 0.7;
|
||||
$transparentize_surface_amount_more: 0.8;
|
||||
$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
|
||||
|
||||
@if $darkmode ==true {
|
||||
// Less transparency
|
||||
$transparentize_amount: 0.15;
|
||||
$transparentize_surface_amount_less: 0.5;
|
||||
$transparentize_surface_amount_less_less: 0.55;
|
||||
$transparentize_surface_amount: 0.69;
|
||||
$transparentize_surface_amount_more: 0.9;
|
||||
$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
|
||||
}
|
||||
|
||||
@if $transparency_enabled ==false {
|
||||
$transparentize_amount: 0;
|
||||
}
|
||||
//@if $darkmode ==true {
|
||||
// // Less transparency
|
||||
// $transparentize_amount: 0.15;
|
||||
// $transparentize_surface_amount_less: 0.5;
|
||||
// $transparentize_surface_amount_less_less: 0.55;
|
||||
// $transparentize_surface_amount: 0.69;
|
||||
// $transparentize_surface_amount_more: 0.9;
|
||||
// $transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
|
||||
//}
|
||||
//
|
||||
//@if $transparency_enabled ==false {
|
||||
// $transparentize_amount: 0;
|
||||
//}
|
||||
|
||||
// Extended material
|
||||
$success: #4f6354;
|
||||
@@ -114,13 +114,13 @@ $t_onSuccessContainer: transparentize($onErrorContainer,
|
||||
$transparentize_amount);
|
||||
|
||||
// Others
|
||||
$hovercolor: mix($t_surface, $t_onSurface, 50%);
|
||||
$activecolor: mix($t_surface, $t_onSurface, 30%);
|
||||
$subtext: mix($onBackground, $background, 70%);
|
||||
//$hovercolor: #AA0000;//$surfaceContainerHigh;
|
||||
//$activecolor: mix($t_surface, $t_onSurface, 30%);
|
||||
$subtext: $outline;
|
||||
$actiontext: mix($onBackground, $background, 85%);
|
||||
|
||||
// Terminal colors
|
||||
$termbg: mix($t_surfaceVariant, $t_onSurfaceVariant, 80%);
|
||||
$termbg: $surfaceContainerHigh;
|
||||
$termfg: $onSurfaceVariant;
|
||||
$term0: $t_background;
|
||||
$term1: $error;
|
||||
@@ -129,4 +129,4 @@ $term3: $onPrimaryContainer;
|
||||
$term4: $onPrimaryContainer;
|
||||
$term5: $onSecondaryContainer;
|
||||
$term6: $primary;
|
||||
$term7: $onSurfaceVariant;
|
||||
$term7: $onSurfaceVariant;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// Common colors
|
||||
$hovercolor: rgba(128, 128, 128, 0.3);
|
||||
$activecolor: rgba(128, 128, 128, 0.7);
|
||||
$hovercolor: $surfaceContainerHigh;
|
||||
$activecolor: $surfaceContainerHighest;
|
||||
$rounding_small: 0.818rem;
|
||||
$rounding_mediumsmall: 0.955rem;
|
||||
$rounding_medium: 1.159rem;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
$notif_surface: $t_background;
|
||||
$notif_surface: $surfaceContainer;
|
||||
|
||||
@mixin notif-rounding {
|
||||
@include normal-rounding;
|
||||
@@ -6,7 +6,7 @@ $notif_surface: $t_background;
|
||||
|
||||
.notif-low {
|
||||
@include notif-rounding;
|
||||
background-color: $l_l_t_surfaceVariant;
|
||||
background-color: $surfaceContainerHigh;
|
||||
color: $onSurfaceVariant;
|
||||
padding: $rounding_small;
|
||||
padding-right: $rounding_small + 0.545rem;
|
||||
@@ -14,7 +14,7 @@ $notif_surface: $t_background;
|
||||
|
||||
.notif-normal {
|
||||
@include notif-rounding;
|
||||
background-color: $l_l_t_surfaceVariant;
|
||||
background-color: $surfaceContainerHigh;
|
||||
color: $onSurfaceVariant;
|
||||
padding: $rounding_small;
|
||||
padding-right: $rounding_small + 0.545rem;
|
||||
@@ -29,21 +29,23 @@ $notif_surface: $t_background;
|
||||
}
|
||||
|
||||
.notif-clicked-low {
|
||||
background-color: mix($l_l_t_surfaceVariant, $t_onSurfaceVariant, 85%);
|
||||
background-color: $surfaceContainerLow;
|
||||
}
|
||||
|
||||
.notif-clicked-normal {
|
||||
background-color: mix($l_l_t_surfaceVariant, $t_onSurfaceVariant, 85%);
|
||||
background-color: $surfaceContainerLow;
|
||||
}
|
||||
|
||||
.notif-clicked-critical {
|
||||
background-color: mix($secondaryContainer, $onSecondaryContainer, 95%);
|
||||
background-color: $onSecondary;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.popup-notif-low {
|
||||
@include notif-rounding;
|
||||
min-width: 30.682rem;
|
||||
background-color: $notif_surface;
|
||||
border: 0.034rem solid $outlineVariant;
|
||||
color: $onSurfaceVariant;
|
||||
padding: $rounding_small;
|
||||
padding-right: $rounding_small + 0.545rem;
|
||||
@@ -53,6 +55,7 @@ $notif_surface: $t_background;
|
||||
@include notif-rounding;
|
||||
min-width: 30.682rem;
|
||||
background-color: $notif_surface;
|
||||
border: 0.034rem solid $outlineVariant;
|
||||
color: $onSurfaceVariant;
|
||||
padding: $rounding_small;
|
||||
padding-right: $rounding_small + 0.545rem;
|
||||
@@ -62,29 +65,31 @@ $notif_surface: $t_background;
|
||||
@include notif-rounding;
|
||||
min-width: 30.682rem;
|
||||
background-color: $secondaryContainer;
|
||||
border: 0.034rem solid $onSecondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
padding: $rounding_small;
|
||||
padding-right: $rounding_small + 0.545rem;
|
||||
}
|
||||
|
||||
.popup-notif-clicked-low {
|
||||
background-color: mix($notif_surface, $onBackground, 94%);
|
||||
background-color: $surfaceContainerLow;
|
||||
}
|
||||
|
||||
.popup-notif-clicked-normal {
|
||||
background-color: mix($notif_surface, $onBackground, 94%);
|
||||
background-color: $surfaceContainerLow;
|
||||
}
|
||||
|
||||
.popup-notif-clicked-critical {
|
||||
background-color: mix($secondaryContainer, $onSecondaryContainer, 96%);
|
||||
background-color: $onSecondary;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.notif-body-low {
|
||||
color: mix($onSurfaceVariant, $surfaceVariant, 67%);
|
||||
color: $outline;
|
||||
}
|
||||
|
||||
.notif-body-normal {
|
||||
color: mix($onSurfaceVariant, $surfaceVariant, 67%);
|
||||
color: $outline;
|
||||
}
|
||||
|
||||
.notif-body-critical {
|
||||
@@ -99,23 +104,23 @@ $notif_surface: $t_background;
|
||||
}
|
||||
|
||||
.notif-icon-material {
|
||||
background-color: $t_secondaryContainer;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.notif-icon-material-low {
|
||||
background-color: $t_secondaryContainer;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.notif-icon-material-normal {
|
||||
background-color: $t_secondaryContainer;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.notif-icon-material-critical {
|
||||
background-color: $t_onSecondaryContainer;
|
||||
color: $secondaryContainer;
|
||||
background-color: $secondary;
|
||||
color: $onSecondary;
|
||||
}
|
||||
|
||||
.notif-expand-btn {
|
||||
@@ -163,8 +168,7 @@ $notif_surface: $t_background;
|
||||
|
||||
.osd-notif {
|
||||
@include notif-rounding;
|
||||
background-color: transparentize($background,
|
||||
$transparentize_surface_amount_subtract_surface );
|
||||
background-color: $background;
|
||||
min-width: 30.682rem;
|
||||
}
|
||||
|
||||
@@ -201,43 +205,43 @@ $notif_surface: $t_background;
|
||||
}
|
||||
|
||||
.notif-action-low {
|
||||
background-color: mix($t_onSurfaceVariant, $t_surface, 10%);
|
||||
background-color: $surfaceContainerHighest;
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.notif-action-low:focus,
|
||||
.notif-action-low:hover {
|
||||
background-color: $hovercolor;
|
||||
border: 0.040rem solid $outlineVariant;
|
||||
}
|
||||
|
||||
.notif-action-low:active {
|
||||
background-color: $activecolor;
|
||||
background-color: $surfaceBright;
|
||||
}
|
||||
|
||||
.notif-action-normal {
|
||||
background-color: mix($t_onSurfaceVariant, $t_surface, 10%);
|
||||
background-color: $surfaceContainerHighest;
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.notif-action-normal:focus,
|
||||
.notif-action-normal:hover {
|
||||
background-color: $hovercolor;
|
||||
border: 0.040rem solid $outlineVariant;
|
||||
}
|
||||
|
||||
.notif-action-normal:active {
|
||||
background-color: $activecolor;
|
||||
background-color: $surfaceBright;
|
||||
}
|
||||
|
||||
.notif-action-critical {
|
||||
background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 10%);
|
||||
background-color: mix($secondary, $onSecondary, 30%);
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.notif-action-critical:focus,
|
||||
.notif-action-critical:hover {
|
||||
background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 18%);
|
||||
border: 0.040rem solid $outline;
|
||||
}
|
||||
|
||||
.notif-action-critical:active {
|
||||
background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 23%);
|
||||
}
|
||||
background-color: mix($secondary, $onSecondary, 40%);
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
min-height: 3.409rem;
|
||||
padding: 0rem 1.364rem;
|
||||
padding-right: 2.864rem;
|
||||
background-color: $t_background;
|
||||
background-color: $background;
|
||||
color: $onBackground;
|
||||
|
||||
selection {
|
||||
@@ -53,8 +53,8 @@
|
||||
@include elevation2;
|
||||
min-width: 28.773rem;
|
||||
padding: 0.682rem;
|
||||
background-color: $t_background;
|
||||
color: $onBackground;
|
||||
background-color: $surfaceContainerLow;
|
||||
color: $onSurface;
|
||||
}
|
||||
|
||||
.overview-search-results-icon {
|
||||
@@ -97,7 +97,7 @@
|
||||
@include elevation-border;
|
||||
@include elevation2;
|
||||
padding: 0.341rem;
|
||||
background-color: $t_background;
|
||||
background-color: $background;
|
||||
color: $onBackground;
|
||||
}
|
||||
|
||||
@@ -105,35 +105,37 @@
|
||||
@include normal-rounding;
|
||||
// @include elevation-border;
|
||||
margin: 0.341rem;
|
||||
background-color: mix($t_t_surface, $t_onSurface, 93%);
|
||||
background-color: $surfaceContainerLow;
|
||||
}
|
||||
|
||||
.overview-tasks-workspace-number {
|
||||
@include mainfont;
|
||||
color: mix($t_onSurface, $t_surface, 93%);
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.overview-tasks-window {
|
||||
@include normal-rounding;
|
||||
@include menu_decel;
|
||||
background-color: $t_surfaceVariant;
|
||||
color: $onSecondaryContainer;
|
||||
border: 0.068rem solid $t_t_t_onSecondaryContainer;
|
||||
background-color: $surfaceContainerHigh;
|
||||
color: $onSurface;
|
||||
border: 0.068rem solid $outlineVariant;
|
||||
}
|
||||
|
||||
.overview-tasks-window:hover,
|
||||
.overview-tasks-window:focus {
|
||||
background-color: mix($l_t_secondaryContainer, $primary, 95%);
|
||||
background-color: $secondaryContainer;
|
||||
}
|
||||
|
||||
.overview-tasks-window:active {
|
||||
background-color: mix($l_t_secondaryContainer, $primary, 90%);
|
||||
background-color: $tertiaryContainer;
|
||||
background-color: mix($secondaryContainer, $hovercolor, 70%);
|
||||
}
|
||||
|
||||
.overview-tasks-window-selected {
|
||||
background-color: mix($l_t_secondaryContainer, $primary, 90%);
|
||||
background-color: $tertiaryContainer;
|
||||
background-color: mix($secondaryContainer, $hovercolor, 70%);
|
||||
}
|
||||
|
||||
.overview-tasks-window-dragging {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
$sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%);
|
||||
$textboxColor: mix($surface, $surfaceVariant, 80%);
|
||||
$textboxColor: $surfaceContainerHigh;
|
||||
$system: $secondary;
|
||||
$onSystem: $onSecondary;
|
||||
$chatgpt: $primary;
|
||||
@@ -16,7 +16,7 @@ $onChatgpt: $onPrimary;
|
||||
border-radius: $rounding_large - $elevation_margin + 0.068rem;
|
||||
min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED
|
||||
// min-height: 29.591rem;
|
||||
background-color: $t_background;
|
||||
background-color: $background;
|
||||
padding: 1.023rem;
|
||||
}
|
||||
|
||||
@@ -37,7 +37,7 @@ $onChatgpt: $onPrimary;
|
||||
border-radius: $rounding_large - $elevation_margin + 0.068rem;
|
||||
min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED
|
||||
// min-height: 29.591rem;
|
||||
background-color: $t_background;
|
||||
background-color: $background;
|
||||
padding: 1.023rem;
|
||||
}
|
||||
|
||||
@@ -54,12 +54,12 @@ $onChatgpt: $onPrimary;
|
||||
.sidebar-group {
|
||||
@include normal-rounding;
|
||||
@include group-padding;
|
||||
background-color: $t_surface;
|
||||
background-color: $surfaceContainer;
|
||||
}
|
||||
|
||||
.sidebar-group-nopad {
|
||||
@include normal-rounding;
|
||||
background-color: $t_surface;
|
||||
background-color: $surfaceContainer;
|
||||
}
|
||||
|
||||
.sidebar-group-invisible {
|
||||
@@ -73,7 +73,7 @@ $onChatgpt: $onPrimary;
|
||||
.sidebar-togglesbox {
|
||||
@include full-rounding;
|
||||
@include group-padding;
|
||||
background-color: $t_surface;
|
||||
background-color: $surfaceContainer;
|
||||
}
|
||||
|
||||
.sidebar-iconbutton {
|
||||
@@ -96,8 +96,6 @@ $onChatgpt: $onPrimary;
|
||||
.sidebar-button {
|
||||
@include element_decel;
|
||||
padding: 0rem $rounding_small;
|
||||
background-color: $t_secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.sidebar-button:hover,
|
||||
@@ -206,16 +204,16 @@ $onChatgpt: $onPrimary;
|
||||
@include element_decel;
|
||||
min-width: 0.273rem;
|
||||
min-height: 2.045rem;
|
||||
background-color: $t_onSurfaceVariant;
|
||||
background-color: transparentize($onSurfaceVariant, 0.7);
|
||||
}
|
||||
|
||||
slider:hover,
|
||||
slider:focus {
|
||||
background-color: mix($t_onSurfaceVariant, $onSurfaceVariant, 80%);
|
||||
background-color: transparentize($onSurfaceVariant, 0.6);
|
||||
}
|
||||
|
||||
slider:active {
|
||||
background-color: mix($onSurfaceVariant, $surfaceVariant, 50%);
|
||||
background-color: transparentize($onSurface, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -256,7 +254,7 @@ $onChatgpt: $onPrimary;
|
||||
}
|
||||
|
||||
.sidebar-calendar-btn-othermonth {
|
||||
color: mix($onSurface, $surface, 50%);
|
||||
color: $outline;
|
||||
}
|
||||
|
||||
.sidebar-calendar-header {
|
||||
@@ -267,19 +265,17 @@ $onChatgpt: $onPrimary;
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
padding: 0rem 0.682rem;
|
||||
background-color: $t_surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
background-color: $surfaceContainer;
|
||||
color: $outline;
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthyear-btn:hover,
|
||||
.sidebar-calendar-monthyear-btn:focus {
|
||||
background-color: $hovercolor;
|
||||
color: mix($onSurfaceVariant, $surfaceVariant, 95%);
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthyear-btn:active {
|
||||
background-color: $activecolor;
|
||||
color: mix($onSurfaceVariant, $surfaceVariant, 85%);
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthshift-btn {
|
||||
@@ -287,18 +283,16 @@ $onChatgpt: $onPrimary;
|
||||
@include element_decel;
|
||||
min-width: 2.045rem;
|
||||
min-height: 2.045rem;
|
||||
background-color: $t_surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
background-color: $surfaceContainer;
|
||||
color: $outline;
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthshift-btn:hover {
|
||||
background-color: $hovercolor;
|
||||
color: mix($onSurfaceVariant, $surfaceVariant, 95%);
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthshift-btn:active {
|
||||
background-color: $activecolor;
|
||||
color: mix($onSurfaceVariant, $surfaceVariant, 85%);
|
||||
}
|
||||
|
||||
.sidebar-selector-tab {
|
||||
@@ -337,10 +331,6 @@ $onChatgpt: $onPrimary;
|
||||
padding-right: 0.545rem;
|
||||
}
|
||||
|
||||
.sidebar-todo-item-even {
|
||||
background-color: $t_t_surfaceVariant;
|
||||
}
|
||||
|
||||
.sidebar-todo-item-action {
|
||||
@include element_decel;
|
||||
border-radius: 9999px;
|
||||
@@ -373,7 +363,6 @@ $onChatgpt: $onPrimary;
|
||||
.sidebar-todo-new {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
color: $onSecondaryContainer;
|
||||
margin: 0.341rem;
|
||||
padding: 0.205rem 0.545rem;
|
||||
border: 0.068rem solid $onSurface;
|
||||
@@ -381,11 +370,13 @@ $onChatgpt: $onPrimary;
|
||||
|
||||
.sidebar-todo-new,
|
||||
.sidebar-todo-new:focus {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 97%);
|
||||
color: $onSecondaryContainer;
|
||||
background-color: $secondaryContainer;
|
||||
}
|
||||
|
||||
.sidebar-todo-new:active {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
|
||||
color: $onPrimaryContainer;
|
||||
background-color: $primaryContainer;
|
||||
}
|
||||
|
||||
.sidebar-todo-add {
|
||||
@@ -399,11 +390,11 @@ $onChatgpt: $onPrimary;
|
||||
|
||||
.sidebar-todo-add:hover,
|
||||
.sidebar-todo-add:focus {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 97%);
|
||||
background-color: $surfaceContainerHigh;
|
||||
}
|
||||
|
||||
.sidebar-todo-add:active {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
|
||||
background-color: $surfaceContainerHighest;
|
||||
}
|
||||
|
||||
.sidebar-todo-add-available {
|
||||
@@ -418,11 +409,11 @@ $onChatgpt: $onPrimary;
|
||||
|
||||
.sidebar-todo-add-available:hover,
|
||||
.sidebar-todo-add-available:focus {
|
||||
background-color: mix($primary, $onPrimary, 97%);
|
||||
background-color: mix($primary, $hovercolor, 70%);
|
||||
}
|
||||
|
||||
.sidebar-todo-add-available:active {
|
||||
background-color: mix($primary, $onPrimary, 80%);
|
||||
background-color: mix($primary, $hovercolor, 40%);
|
||||
}
|
||||
|
||||
.sidebar-todo-entry {
|
||||
@@ -435,24 +426,24 @@ $onChatgpt: $onPrimary;
|
||||
min-height: 1.773rem;
|
||||
min-width: 0rem;
|
||||
padding: 0.205rem 0.682rem;
|
||||
border: 0.068rem solid mix($onSurfaceVariant, $surfaceVariant, 50%);
|
||||
border: 0.068rem solid $outline;
|
||||
}
|
||||
|
||||
.sidebar-todo-entry:focus {
|
||||
border: 0.068rem solid mix($onSurfaceVariant, $surfaceVariant, 90%);
|
||||
border: 0.068rem solid $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.sidebar-module {
|
||||
@include normal-rounding;
|
||||
@include group-padding;
|
||||
background-color: $l_l_t_surfaceVariant;
|
||||
background-color: $surfaceContainer;
|
||||
padding: 0.682rem;
|
||||
}
|
||||
|
||||
.sidebar-module-btn-arrow {
|
||||
@include full-rounding;
|
||||
@include icon-material;
|
||||
background-color: $l_l_t_surfaceVariant;
|
||||
background-color: $surfaceContainerHigh;
|
||||
min-width: 1.705rem;
|
||||
min-height: 1.705rem;
|
||||
|
||||
@@ -464,7 +455,7 @@ $onChatgpt: $onPrimary;
|
||||
.sidebar-module-scripts-button {
|
||||
@include full-rounding;
|
||||
@include icon-material;
|
||||
background-color: $l_l_t_surfaceVariant;
|
||||
background-color: $surfaceContainer;
|
||||
min-width: 1.705rem;
|
||||
min-height: 1.705rem;
|
||||
|
||||
@@ -540,7 +531,7 @@ $colorpicker_rounding: 0.341rem;
|
||||
.sidebar-chat-apiswitcher {
|
||||
@include full-rounding;
|
||||
@include group-padding;
|
||||
background-color: $t_surface;
|
||||
background-color: $surfaceContainer;
|
||||
}
|
||||
|
||||
.sidebar-chat-apiswitcher-icon {
|
||||
@@ -605,11 +596,11 @@ $colorpicker_rounding: 0.341rem;
|
||||
|
||||
.sidebar-chat-send:hover,
|
||||
.sidebar-chat-send:focus {
|
||||
background-color: $surfaceVariant;
|
||||
background-color: $surfaceBright;
|
||||
}
|
||||
|
||||
.sidebar-chat-send:active {
|
||||
background-color: mix($surfaceVariant, $onBackground, 80%);
|
||||
background-color: $surfaceVariant;
|
||||
}
|
||||
|
||||
.sidebar-chat-send-available {
|
||||
@@ -619,11 +610,11 @@ $colorpicker_rounding: 0.341rem;
|
||||
|
||||
.sidebar-chat-send-available:hover,
|
||||
.sidebar-chat-send-available:focus {
|
||||
background-color: mix($primary, $onPrimary, 97%);
|
||||
background-color: mix($primary, $hovercolor, 70%);
|
||||
}
|
||||
|
||||
.sidebar-chat-send-available:active {
|
||||
background-color: mix($primary, $onPrimary, 80%);
|
||||
background-color: mix($primary, $hovercolor, 40%);
|
||||
}
|
||||
|
||||
.sidebar-chat-message {
|
||||
@@ -683,17 +674,17 @@ $colorpicker_rounding: 0.341rem;
|
||||
background-color: $termbg;
|
||||
color: $termfg;
|
||||
margin: 0rem 0.682rem;
|
||||
border: 0.068rem solid $t_t_t_onSecondaryContainer;
|
||||
border: 0.068rem solid $outlineVariant;
|
||||
}
|
||||
|
||||
.sidebar-chat-codeblock-topbar {
|
||||
@include mainfont;
|
||||
margin: 0.273rem;
|
||||
margin-bottom: 0rem;
|
||||
background-color: mix($t_secondaryContainer, $t_onSurfaceVariant, 30%);
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
border-radius: $rounding_medium - 0.273rem;
|
||||
border: 0.068rem solid mix($secondaryContainer, $onSecondaryContainer, 90%);
|
||||
border: 0.068rem solid $outlineVariant;
|
||||
border-top-left-radius: $rounding_small + 0.068rem;
|
||||
border-top-right-radius: $rounding_small + 0.068rem;
|
||||
padding: 0.341rem 0.477rem;
|
||||
@@ -712,11 +703,11 @@ $colorpicker_rounding: 0.341rem;
|
||||
|
||||
.sidebar-chat-codeblock-topbar-btn:hover,
|
||||
.sidebar-chat-codeblock-topbar-btn:focus {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
|
||||
background-color: mix($secondaryContainer, $onSecondaryContainer, 90%);
|
||||
}
|
||||
|
||||
.sidebar-chat-codeblock-topbar-btn:active {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%);
|
||||
background-color: mix($secondaryContainer, $onSecondaryContainer, 80%);
|
||||
}
|
||||
|
||||
.sidebar-chat-codeblock-code {
|
||||
@@ -824,11 +815,11 @@ $colorpicker_rounding: 0.341rem;
|
||||
|
||||
.sidebar-pin-enabled:hover,
|
||||
.sidebar-pin-enabled:focus {
|
||||
background-color: mix($primary, $onPrimary, 90%);
|
||||
background-color: mix($primary, $hovercolor, 70%);
|
||||
}
|
||||
|
||||
.sidebar-pin-enabled:active {
|
||||
background-color: mix($primary, $onPrimary, 80%);
|
||||
background-color: mix($primary, $hovercolor, 40%);
|
||||
}
|
||||
|
||||
.sidebar-waifu-heading {
|
||||
|
||||
Reference in New Issue
Block a user