kenji/illogical-impulse
1
0
Fork 0
forked from Shinonome/dots-hyprland
Code Pull Requests Activity

update styles

Browse Source
This commit is contained in:
end-4
2024-03-19 18:24:46 +07:00
parent d686e588b8
commit 834f8dd208
11 changed files with 92 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.config/ags/modules/sideleft/apis/waifu.js
+1
View File
@@ -251,6 +251,7 @@ const WaifuImage = (taglist) => {
else Utils.execAsync(['bash', '-c', `wget -O '${thisBlock.attribute.imagePath}' '${url}'`]) else Utils.execAsync(['bash', '-c', `wget -O '${thisBlock.attribute.imagePath}' '${url}'`])
.then(showImage) .then(showImage)
.catch(print); .catch(print);
console.log(`background-color: mix(${darkMode ? 'black' : 'white'}, ${dominant_color}, 0.97);`);
thisBlock.css = `background-color: mix(${darkMode ? 'black' : 'white'}, ${dominant_color}, 0.97);`; thisBlock.css = `background-color: mix(${darkMode ? 'black' : 'white'}, ${dominant_color}, 0.97);`;
}, },
}, },
.config/ags/scss/_bar.scss
-2
View File
@@ -388,10 +388,8 @@ $bar_ws_width_focus_active: 2.045rem;
.bar-bluetooth-device { .bar-bluetooth-device {
@include full-rounding; @include full-rounding;
@include element_decel;
min-height: 1.032rem; min-height: 1.032rem;
min-width: 1.032rem; min-width: 1.032rem;
font-size: 1.032rem; font-size: 1.032rem;
//color: $barspacerightOnLayer0;
padding: 0.205rem 0.341rem; padding: 0.205rem 0.341rem;
} }
.config/ags/scss/_colors.scss
+5 -17
View File
@@ -17,9 +17,7 @@ $onSuccessContainer: #0c1f13;
} }
// Transparent versions // Transparent versions
$t_background: transparentize($background, $transparentize_amount);
$t_surface: transparentize($surface, $transparentize_surface_amount); $t_surface: transparentize($surface, $transparentize_surface_amount);
$t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount);
@if $transparent == True { @if $transparent == True {
$background: transparentize($background, $transparency); $background: transparentize($background, $transparency);
@@ -42,18 +40,6 @@ $actiontext: mix($onBackground, $background, 85%);
$black: black; $black: black;
$white: white; $white: white;
// Terminal colors
$termbg: $surfaceContainerHigh;
$termfg: $onSurfaceVariant;
$term0: $background;
$term1: $error;
$term2: $inversePrimary;
$term3: $onPrimaryContainer;
$term4: $onPrimaryContainer;
$term5: $onSecondaryContainer;
$term6: $primary;
$term7: $onSurfaceVariant;
/// Color mappings for more chaotic, dynamic colors like the average rice /// /// Color mappings for more chaotic, dynamic colors like the average rice ///
// General // General
$layer0: $background; $layer0: $background;
@@ -62,12 +48,14 @@ $layer0Hover: mix($layer0, $onLayer0, 85%);
$layer0Active: $primary; $layer0Active: $primary;
$onLayer0Active: $onPrimary; $onLayer0Active: $onPrimary;
$onLayer0Inactive: mix($onLayer0, $layer0, 70%); $onLayer0Inactive: mix($onLayer0, $layer0, 70%);
$layer1: $surfaceContainer; $layer1: $surfaceContainerLow;
$onLayer1: $onSurface; $onLayer1: $onSurface;
$onLayer1Inactive: mix($onLayer1, $layer1, 45%); $onLayer1Inactive: mix($onLayer1, $layer1, 45%);
$onLayer1: $onSurfaceVariant; $onLayer1: $onSurfaceVariant;
$layer2: $secondaryContainer; $layer2: mix($surfaceContainer, $surfaceContainerHigh, 55%);
$onLayer2: $onSecondaryContainer; $onLayer2: $onSurface;
$layer3: $surfaceContainerHigh;
$onLayer3: $onSurface;
$layer1Hover: mix($layer1, $onLayer1, 85%); $layer1Hover: mix($layer1, $onLayer1, 85%);
$layer1Active: mix($layer1, $onLayer1, 70%); $layer1Active: mix($layer1, $onLayer1, 70%);
$layer2Hover: mix($layer2, $onLayer2, 90%); $layer2Hover: mix($layer2, $onLayer2, 90%);
.config/ags/scss/_dock.scss
+3 -3
View File
@@ -1,7 +1,7 @@
.dock-bg { .dock-bg {
@include large-rounding; @include large-rounding;
@include elevation2; @include elevation2;
background-color: $t_background; background-color: $layer0;
padding: 0.682rem; padding: 0.682rem;
} }
@@ -12,11 +12,11 @@
.dock-app-btn:hover, .dock-app-btn:hover,
.dock-app-btn:focus { .dock-app-btn:focus {
background-color: mix($t_surface, $onSurface, 95%); background-color: mix($surface, $onSurface, 90%);
} }
.dock-app-btn:active { .dock-app-btn:active {
background-color: mix($t_surface, $onSurface, 85%); background-color: mix($surface, $onSurface, 85%);
} }
.dock-app-icon { .dock-app-icon {
.config/ags/scss/_lib_classes.scss
-3
View File
@@ -523,6 +523,3 @@
.element-accel { .element-accel {
@include element_accel; @include element_accel;
} }
.page-move {
@include page_move;
}
.config/ags/scss/_lib_mixins.scss
+4 -29
View File
@@ -174,26 +174,12 @@ $elevation_margin: 0.476rem;
@mixin element_easeInOut { @mixin element_easeInOut {
transition: 300ms cubic-bezier(0.85, 0, 0.15, 1); transition: 300ms cubic-bezier(0.85, 0, 0.15, 1);
} }
@mixin page_move {
transition: 500ms cubic-bezier(0.85, 0, 0.15, 1);
}
@function tint($color, $percentage) {
@return mix(rgb(245, 250, 255), $color, $percentage);
}
@function shade($color, $percentage) {
@return mix(rgb(0, 0, 0), $color, $percentage);
}
$overlay1: mix($onSurface, rgba(0, 0, 0, 0), 25%);
$overlay2: mix($onSurface, rgba(0, 0, 0, 0), 40%);
@mixin elevation-border-softer { @mixin elevation-border-softer {
border-top: 1px solid mix($t_surface, $onSurface, 90%); border-top: 1px solid mix($surface, $onSurface, 86%);
border-left: 1px solid mix($t_surface, $onSurface, 90%); border-left: 1px solid mix($surface, $onSurface, 86%);
border-right: 1px solid mix($t_surface, $onSurface, 95%); border-right: 1px solid mix($surface, $onSurface, 90%);
border-bottom: 1px solid mix($t_surface, $onSurface, 95%); border-bottom: 1px solid mix($surface, $onSurface, 90%);
} }
@mixin elevation-border { @mixin elevation-border {
@@ -203,17 +189,6 @@ $overlay2: mix($onSurface, rgba(0, 0, 0, 0), 40%);
border-bottom: 1px solid $surfaceContainer; border-bottom: 1px solid $surfaceContainer;
} }
@mixin elevation-border-heavier {
border-top: 1px solid mix($t_surface, $onSurface, 70%);
border-left: 1px solid mix($t_surface, $onSurface, 70%);
border-right: 1px solid mix($t_surface, $onSurface, 75%);
border-bottom: 1px solid mix($t_surface, $onSurface, 75%);
}
@mixin elevation-border-transparent {
border-top: 1px solid transparent;
}
@mixin button-minsize { @mixin button-minsize {
min-width: 2.727rem; min-width: 2.727rem;
min-height: 2.727rem; min-height: 2.727rem;
.config/ags/scss/_material.scss
+46 -46
View File
@@ -1,56 +1,56 @@
$darkmode: True; $darkmode: True;
$transparent: False; $transparent: False;
$primary_paletteKeyColor: #A76837; $primary_paletteKeyColor: #A504FF;
$secondary_paletteKeyColor: #8F715C; $secondary_paletteKeyColor: #8B6D8D;
$tertiary_paletteKeyColor: #777A4B; $tertiary_paletteKeyColor: #9A678C;
$neutral_paletteKeyColor: #81756D; $neutral_paletteKeyColor: #7D7480;
$neutral_variant_paletteKeyColor: #84746A; $neutral_variant_paletteKeyColor: #7E7382;
$background: #19120D; $background: #17111B;
$onBackground: #F0DFD6; $onBackground: #EBDFED;
$surface: #19120D; $surface: #17111B;
$surfaceDim: #19120D; $surfaceDim: #17111B;
$surfaceBright: #413731; $surfaceBright: #3E3741;
$surfaceContainerLowest: #FFFFFF; $surfaceContainerLowest: #FFFFFF;
$surfaceContainerLow: #221A15; $surfaceContainerLow: #1F1923;
$surfaceContainer: #261E18; $surfaceContainer: #241D27;
$surfaceContainerHigh: #312822; $surfaceContainerHigh: #2E2832;
$surfaceContainerHighest: #3C332D; $surfaceContainerHighest: #39323D;
$onSurface: #F0DFD6; $onSurface: #EBDFED;
$surfaceVariant: #52443B; $surfaceVariant: #4D4351;
$onSurfaceVariant: #D6C3B7; $onSurfaceVariant: #CFC2D3;
$inverseSurface: #F0DFD6; $inverseSurface: #EBDFED;
$inverseOnSurface: #382F29; $inverseOnSurface: #352E38;
$outline: #9F8D83; $outline: #988D9D;
$outlineVariant: #52443B; $outlineVariant: #4D4351;
$shadow: #000000; $shadow: #000000;
$scrim: #000000; $scrim: #000000;
$surfaceTint: #FFB783; $surfaceTint: #E2B6FF;
$primary: #FFB783; $primary: #E2B6FF;
$onPrimary: #4F2500; $onPrimary: #4D007B;
$primaryContainer: #6D390B; $primaryContainer: #6D00AC;
$onPrimaryContainer: #FFDCC5; $onPrimaryContainer: #F3DAFF;
$inversePrimary: #8A5021; $inversePrimary: #9000DF;
$secondary: #E4BFA7; $secondary: #DEBCDF;
$onSecondary: #422B1B; $onSecondary: #402843;
$secondaryContainer: #5B412F; $secondaryContainer: #5A405D;
$onSecondaryContainer: #FFDCC5; $onSecondaryContainer: #FDD9FD;
$tertiary: #C8CA94; $tertiary: #F0B5DE;
$onTertiary: #30330B; $onTertiary: #4B2142;
$tertiaryContainer: #919463; $tertiaryContainer: #B680A7;
$onTertiaryContainer: #000000; $onTertiaryContainer: #000000;
$error: #FFB4AB; $error: #FFB4AB;
$onError: #690005; $onError: #690005;
$errorContainer: #93000A; $errorContainer: #93000A;
$onErrorContainer: #FFDAD6; $onErrorContainer: #FFDAD6;
$primaryFixed: #FFDCC5; $primaryFixed: #F3DAFF;
$primaryFixedDim: #FFB783; $primaryFixedDim: #E2B6FF;
$onPrimaryFixed: #301400; $onPrimaryFixed: #2E004D;
$onPrimaryFixedVariant: #6D390B; $onPrimaryFixedVariant: #6D00AC;
$secondaryFixed: #FFDCC5; $secondaryFixed: #FCD7FB;
$secondaryFixedDim: #E4BFA7; $secondaryFixedDim: #DEBCDF;
$onSecondaryFixed: #2A1708; $onSecondaryFixed: #29132D;
$onSecondaryFixedVariant: #5B412F; $onSecondaryFixedVariant: #583E5B;
$tertiaryFixed: #E4E6AE; $tertiaryFixed: #FFD7F1;
$tertiaryFixedDim: #C8CA94; $tertiaryFixedDim: #F0B5DE;
$onTertiaryFixed: #1B1D00; $onTertiaryFixed: #320C2C;
$onTertiaryFixedVariant: #474920; $onTertiaryFixedVariant: #64385A;
.config/ags/scss/_music.scss
+4 -4
View File
@@ -6,7 +6,7 @@
@import './lib_mixins'; @import './lib_mixins';
$music_gradient1: mix($color1, $background, 50%); $music_gradient1: mix($color1, $background, 50%);
// @if $darkmode ==true { // @if $darkmode == True {
// $music_gradient1: mix($color1, $background, 30%); // $music_gradient1: mix($color1, $background, 30%);
// } // }
@@ -17,7 +17,7 @@ $music_extra_transparentize: 0.15;
$secondaryContainer: transparentize(mix(mix($background, $color2, 50%), $color6, 80%), 0.5); $secondaryContainer: transparentize(mix(mix($background, $color2, 50%), $color6, 80%), 0.5);
$onSecondaryContainer: mix($color7, $color2, 90%); $onSecondaryContainer: mix($color7, $color2, 90%);
@if $darkmode ==false { @if $darkmode == False {
$onSecondaryContainer: mix($onSecondaryContainer, black, 50%); $onSecondaryContainer: mix($onSecondaryContainer, black, 50%);
} }
@@ -28,7 +28,7 @@ $onSecondaryContainer: mix($color7, $color2, 90%);
@include normal-rounding; @include normal-rounding;
// min-height: 7.159rem; // min-height: 7.159rem;
min-width: 29.659rem; min-width: 29.659rem;
background-color: $t_background; background-color: $layer0;
padding: 0rem 1.023rem; padding: 0rem 1.023rem;
background: // Inspired by Amberol background: // Inspired by Amberol
linear-gradient(127deg, transparentize($music_gradient1, $music_colorstart_transparentize), transparentize($music_gradient1, $music_colorstart_transparentize - $transparentize_amount + $music_extra_transparentize) 70.71%), linear-gradient(127deg, transparentize($music_gradient1, $music_colorstart_transparentize), transparentize($music_gradient1, $music_colorstart_transparentize - $transparentize_amount + $music_extra_transparentize) 70.71%),
@@ -46,7 +46,7 @@ $onSecondaryContainer: mix($color7, $color2, 90%);
// margin: 1.023rem; // margin: 1.023rem;
min-width: 7.5rem; min-width: 7.5rem;
min-height: 7.5rem; min-height: 7.5rem;
background-color: $t_surface; background-color: $layer1;
color: $onSecondaryContainer; color: $onSecondaryContainer;
} }
.config/ags/scss/_notifications.scss
+4 -6
View File
@@ -1,12 +1,10 @@
$notif_surface: $surfaceContainer;
@mixin notif-rounding { @mixin notif-rounding {
@include normal-rounding; @include normal-rounding;
} }
.notif-low { .notif-low {
@include notif-rounding; @include notif-rounding;
background-color: $surfaceContainerHigh; background-color: $layer2;
color: $onSurfaceVariant; color: $onSurfaceVariant;
padding: $rounding_small; padding: $rounding_small;
padding-right: $rounding_small + 0.545rem; padding-right: $rounding_small + 0.545rem;
@@ -14,7 +12,7 @@ $notif_surface: $surfaceContainer;
.notif-normal { .notif-normal {
@include notif-rounding; @include notif-rounding;
background-color: $surfaceContainerHigh; background-color: $layer2;
color: $onSurfaceVariant; color: $onSurfaceVariant;
padding: $rounding_small; padding: $rounding_small;
padding-right: $rounding_small + 0.545rem; padding-right: $rounding_small + 0.545rem;
@@ -44,7 +42,7 @@ $notif_surface: $surfaceContainer;
.popup-notif-low { .popup-notif-low {
@include notif-rounding; @include notif-rounding;
min-width: 30.682rem; min-width: 30.682rem;
background-color: $notif_surface; background-color: $layer2;
border: 0.034rem solid $outlineVariant; border: 0.034rem solid $outlineVariant;
color: $onSurfaceVariant; color: $onSurfaceVariant;
padding: $rounding_small; padding: $rounding_small;
@@ -54,7 +52,7 @@ $notif_surface: $surfaceContainer;
.popup-notif-normal { .popup-notif-normal {
@include notif-rounding; @include notif-rounding;
min-width: 30.682rem; min-width: 30.682rem;
background-color: $notif_surface; background-color: $layer2;
border: 0.034rem solid $outlineVariant; border: 0.034rem solid $outlineVariant;
color: $onSurfaceVariant; color: $onSurfaceVariant;
padding: $rounding_small; padding: $rounding_small;
.config/ags/scss/_overview.scss
+1 -1
View File
@@ -118,7 +118,7 @@
@include menu_decel; @include menu_decel;
background-color: $surfaceContainerHigh; background-color: $surfaceContainerHigh;
color: $onSurface; color: $onSurface;
border: 0.068rem solid $outlineVariant; border: 0.068rem solid $surfaceContainerHighest;
} }
.overview-tasks-window:hover, .overview-tasks-window:hover,
.config/ags/scss/_sidebars.scss
+24 -34
View File
@@ -1,7 +1,4 @@
$sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%); $sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%);
$textboxColor: $surfaceContainerHigh;
$system: $secondary;
$onSystem: $onSecondary;
@mixin group-padding { @mixin group-padding {
padding: 0.341rem; padding: 0.341rem;
@@ -52,12 +49,12 @@ $onSystem: $onSecondary;
.sidebar-group { .sidebar-group {
@include normal-rounding; @include normal-rounding;
@include group-padding; @include group-padding;
background-color: $surfaceContainer; background-color: $layer1;
} }
.sidebar-group-nopad { .sidebar-group-nopad {
@include normal-rounding; @include normal-rounding;
background-color: $surfaceContainer; background-color: $layer1;
} }
.sidebar-group-invisible { .sidebar-group-invisible {
@@ -71,7 +68,7 @@ $onSystem: $onSecondary;
.sidebar-togglesbox { .sidebar-togglesbox {
@include full-rounding; @include full-rounding;
@include group-padding; @include group-padding;
background-color: $surfaceContainer; background-color: $layer1;
} }
.sidebar-iconbutton { .sidebar-iconbutton {
@@ -263,8 +260,8 @@ $onSystem: $onSecondary;
@include full-rounding; @include full-rounding;
@include element_decel; @include element_decel;
padding: 0rem 0.682rem; padding: 0rem 0.682rem;
background-color: $surfaceContainer; background-color: $surfaceContainerHigh;
color: $outline; color: $onSurface;
} }
.sidebar-calendar-monthyear-btn:hover, .sidebar-calendar-monthyear-btn:hover,
@@ -281,7 +278,7 @@ $onSystem: $onSecondary;
@include element_decel; @include element_decel;
min-width: 2.045rem; min-width: 2.045rem;
min-height: 2.045rem; min-height: 2.045rem;
background-color: $surfaceContainer; background-color: $surfaceContainerHigh;
color: $outline; color: $outline;
} }
@@ -329,7 +326,7 @@ $onSystem: $onSecondary;
.sidebar-todo-new { .sidebar-todo-new {
@include full-rounding; @include full-rounding;
@include element_decel; @include element_decel;
background-color: $textboxColor; background-color: $surfaceContainerHigh;
color: $onSurfaceVariant; color: $onSurfaceVariant;
margin: 0.341rem; margin: 0.341rem;
padding: 0.205rem 0.545rem; padding: 0.205rem 0.545rem;
@@ -403,7 +400,7 @@ $onSystem: $onSecondary;
.sidebar-module { .sidebar-module {
@include normal-rounding; @include normal-rounding;
@include group-padding; @include group-padding;
background-color: $surfaceContainer; background-color: $layer1;
padding: 0.682rem; padding: 0.682rem;
} }
@@ -422,7 +419,7 @@ $onSystem: $onSecondary;
.sidebar-module-scripts-button { .sidebar-module-scripts-button {
@include full-rounding; @include full-rounding;
@include icon-material; @include icon-material;
background-color: $surfaceContainer; background-color: $layer1;
min-width: 1.705rem; min-width: 1.705rem;
min-height: 1.705rem; min-height: 1.705rem;
@@ -498,7 +495,7 @@ $colorpicker_rounding: 0.341rem;
.sidebar-chat-apiswitcher { .sidebar-chat-apiswitcher {
@include full-rounding; @include full-rounding;
@include group-padding; @include group-padding;
background-color: $surfaceContainer; background-color: $layer1;
} }
.sidebar-chat-apiswitcher-icon { .sidebar-chat-apiswitcher-icon {
@@ -518,7 +515,7 @@ $colorpicker_rounding: 0.341rem;
.sidebar-chat-providerswitcher { .sidebar-chat-providerswitcher {
@include small-rounding; @include small-rounding;
padding: 0.477rem 0.682rem; padding: 0.477rem 0.682rem;
background-color: $textboxColor; background-color: $surfaceContainerHigh;
color: $onSurfaceVariant; color: $onSurfaceVariant;
} }
@@ -534,7 +531,7 @@ $colorpicker_rounding: 0.341rem;
.sidebar-chat-textarea { .sidebar-chat-textarea {
@include normal-rounding; @include normal-rounding;
background-color: $textboxColor; background-color: $surfaceContainerHigh;
color: $onSurfaceVariant; color: $onSurfaceVariant;
padding: 0.682rem; padding: 0.682rem;
} }
@@ -644,33 +641,26 @@ $colorpicker_rounding: 0.341rem;
margin: 0rem 0.682rem; margin: 0rem 0.682rem;
padding: 0.682rem; padding: 0.682rem;
@if $darkmode ==true { @if $darkmode == True {
background-color: white; background-color: #e6e6e6;
} }
color: $onBackground; color: $onBackground;
// background-color: $termbg;
} }
.sidebar-chat-codeblock { .sidebar-chat-codeblock {
@include normal-rounding; @include normal-rounding;
// @include elevation2; // @include elevation2;
background-color: $termbg; background-color: $layer2;
color: $termfg; color: $onLayer2;
margin: 0rem 0.682rem; margin: 0rem 0.682rem;
border: 0.068rem solid $outlineVariant;
} }
.sidebar-chat-codeblock-topbar { .sidebar-chat-codeblock-topbar {
@include mainfont; @include mainfont;
margin: 0.273rem; background-color: $layer3;
margin-bottom: 0rem; color: $onLayer3;
background-color: $secondaryContainer; border-top-left-radius: $rounding_small;
color: $onSecondaryContainer; border-top-right-radius: $rounding_small;
border-radius: $rounding_medium - 0.273rem;
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; padding: 0.341rem 0.477rem;
} }
@@ -687,11 +677,11 @@ $colorpicker_rounding: 0.341rem;
.sidebar-chat-codeblock-topbar-btn:hover, .sidebar-chat-codeblock-topbar-btn:hover,
.sidebar-chat-codeblock-topbar-btn:focus { .sidebar-chat-codeblock-topbar-btn:focus {
background-color: mix($secondaryContainer, $onSecondaryContainer, 90%); background-color: $surfaceBright;
} }
.sidebar-chat-codeblock-topbar-btn:active { .sidebar-chat-codeblock-topbar-btn:active {
background-color: mix($secondaryContainer, $onSecondaryContainer, 80%); background-color: $surfaceVariant;
} }
.sidebar-chat-codeblock-code { .sidebar-chat-codeblock-code {
@@ -737,7 +727,7 @@ $colorpicker_rounding: 0.341rem;
.sidebar-chat-chip-action { .sidebar-chat-chip-action {
@include element_decel; @include element_decel;
background-color: $textboxColor; background-color: $surfaceContainerHigh;
color: $onSurfaceVariant; color: $onSurfaceVariant;
} }
@@ -759,7 +749,7 @@ $colorpicker_rounding: 0.341rem;
@include element_decel; @include element_decel;
@include small-rounding; @include small-rounding;
padding: 0.341rem 0.477rem; padding: 0.341rem 0.477rem;
background-color: $textboxColor; background-color: $surfaceContainerHigh;
color: $onSurfaceVariant; color: $onSurfaceVariant;
} }