Shinonome/dots-hyprland
1
0
Fork 1
mirror of https://github.com/end-4/dots-hyprland.git synced 2026-06-05 23:09:26 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

update styles

Browse Source
This commit is contained in:
end-4
2024-03-19 18:24:46 +07:00
parent 553a89da6f
commit ecbb7abe27
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}'`])
.then(showImage)
.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);`;
},
},
.config/ags/scss/_bar.scss
-2
View File
@@ -388,10 +388,8 @@ $bar_ws_width_focus_active: 2.045rem;
.bar-bluetooth-device {
@include full-rounding;
@include element_decel;
min-height: 1.032rem;
min-width: 1.032rem;
font-size: 1.032rem;
//color: $barspacerightOnLayer0;
padding: 0.205rem 0.341rem;
}
.config/ags/scss/_colors.scss
+5 -17
View File
@@ -17,9 +17,7 @@ $onSuccessContainer: #0c1f13;
}
// Transparent versions
$t_background: transparentize($background, $transparentize_amount);
$t_surface: transparentize($surface, $transparentize_surface_amount);
$t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount);
@if $transparent == True {
$background: transparentize($background, $transparency);
@@ -42,18 +40,6 @@ $actiontext: mix($onBackground, $background, 85%);
$black: black;
$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 ///
// General
$layer0: $background;
@@ -62,12 +48,14 @@ $layer0Hover: mix($layer0, $onLayer0, 85%);
$layer0Active: $primary;
$onLayer0Active: $onPrimary;
$onLayer0Inactive: mix($onLayer0, $layer0, 70%);
$layer1: $surfaceContainer;
$layer1: $surfaceContainerLow;
$onLayer1: $onSurface;
$onLayer1Inactive: mix($onLayer1, $layer1, 45%);
$onLayer1: $onSurfaceVariant;
$layer2: $secondaryContainer;
$onLayer2: $onSecondaryContainer;
$layer2: mix($surfaceContainer, $surfaceContainerHigh, 55%);
$onLayer2: $onSurface;
$layer3: $surfaceContainerHigh;
$onLayer3: $onSurface;
$layer1Hover: mix($layer1, $onLayer1, 85%);
$layer1Active: mix($layer1, $onLayer1, 70%);
$layer2Hover: mix($layer2, $onLayer2, 90%);
.config/ags/scss/_dock.scss
+3 -3
View File
@@ -1,7 +1,7 @@
.dock-bg {
@include large-rounding;
@include elevation2;
background-color: $t_background;
background-color: $layer0;
padding: 0.682rem;
}
@@ -12,11 +12,11 @@
.dock-app-btn:hover,
.dock-app-btn:focus {
background-color: mix($t_surface, $onSurface, 95%);
background-color: mix($surface, $onSurface, 90%);
}
.dock-app-btn:active {
background-color: mix($t_surface, $onSurface, 85%);
background-color: mix($surface, $onSurface, 85%);
}
.dock-app-icon {
.config/ags/scss/_lib_classes.scss
-3
View File
@@ -523,6 +523,3 @@
.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 {
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 {
border-top: 1px solid mix($t_surface, $onSurface, 90%);
border-left: 1px solid mix($t_surface, $onSurface, 90%);
border-right: 1px solid mix($t_surface, $onSurface, 95%);
border-bottom: 1px solid mix($t_surface, $onSurface, 95%);
border-top: 1px solid mix($surface, $onSurface, 86%);
border-left: 1px solid mix($surface, $onSurface, 86%);
border-right: 1px solid mix($surface, $onSurface, 90%);
border-bottom: 1px solid mix($surface, $onSurface, 90%);
}
@mixin elevation-border {
@@ -203,17 +189,6 @@ $overlay2: mix($onSurface, rgba(0, 0, 0, 0), 40%);
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 {
min-width: 2.727rem;
min-height: 2.727rem;
.config/ags/scss/_material.scss
+46 -46
View File
@@ -1,56 +1,56 @@
$darkmode: True;
$transparent: False;
$primary_paletteKeyColor: #A76837;
$secondary_paletteKeyColor: #8F715C;
$tertiary_paletteKeyColor: #777A4B;
$neutral_paletteKeyColor: #81756D;
$neutral_variant_paletteKeyColor: #84746A;
$background: #19120D;
$onBackground: #F0DFD6;
$surface: #19120D;
$surfaceDim: #19120D;
$surfaceBright: #413731;
$primary_paletteKeyColor: #A504FF;
$secondary_paletteKeyColor: #8B6D8D;
$tertiary_paletteKeyColor: #9A678C;
$neutral_paletteKeyColor: #7D7480;
$neutral_variant_paletteKeyColor: #7E7382;
$background: #17111B;
$onBackground: #EBDFED;
$surface: #17111B;
$surfaceDim: #17111B;
$surfaceBright: #3E3741;
$surfaceContainerLowest: #FFFFFF;
$surfaceContainerLow: #221A15;
$surfaceContainer: #261E18;
$surfaceContainerHigh: #312822;
$surfaceContainerHighest: #3C332D;
$onSurface: #F0DFD6;
$surfaceVariant: #52443B;
$onSurfaceVariant: #D6C3B7;
$inverseSurface: #F0DFD6;
$inverseOnSurface: #382F29;
$outline: #9F8D83;
$outlineVariant: #52443B;
$surfaceContainerLow: #1F1923;
$surfaceContainer: #241D27;
$surfaceContainerHigh: #2E2832;
$surfaceContainerHighest: #39323D;
$onSurface: #EBDFED;
$surfaceVariant: #4D4351;
$onSurfaceVariant: #CFC2D3;
$inverseSurface: #EBDFED;
$inverseOnSurface: #352E38;
$outline: #988D9D;
$outlineVariant: #4D4351;
$shadow: #000000;
$scrim: #000000;
$surfaceTint: #FFB783;
$primary: #FFB783;
$onPrimary: #4F2500;
$primaryContainer: #6D390B;
$onPrimaryContainer: #FFDCC5;
$inversePrimary: #8A5021;
$secondary: #E4BFA7;
$onSecondary: #422B1B;
$secondaryContainer: #5B412F;
$onSecondaryContainer: #FFDCC5;
$tertiary: #C8CA94;
$onTertiary: #30330B;
$tertiaryContainer: #919463;
$surfaceTint: #E2B6FF;
$primary: #E2B6FF;
$onPrimary: #4D007B;
$primaryContainer: #6D00AC;
$onPrimaryContainer: #F3DAFF;
$inversePrimary: #9000DF;
$secondary: #DEBCDF;
$onSecondary: #402843;
$secondaryContainer: #5A405D;
$onSecondaryContainer: #FDD9FD;
$tertiary: #F0B5DE;
$onTertiary: #4B2142;
$tertiaryContainer: #B680A7;
$onTertiaryContainer: #000000;
$error: #FFB4AB;
$onError: #690005;
$errorContainer: #93000A;
$onErrorContainer: #FFDAD6;
$primaryFixed: #FFDCC5;
$primaryFixedDim: #FFB783;
$onPrimaryFixed: #301400;
$onPrimaryFixedVariant: #6D390B;
$secondaryFixed: #FFDCC5;
$secondaryFixedDim: #E4BFA7;
$onSecondaryFixed: #2A1708;
$onSecondaryFixedVariant: #5B412F;
$tertiaryFixed: #E4E6AE;
$tertiaryFixedDim: #C8CA94;
$onTertiaryFixed: #1B1D00;
$onTertiaryFixedVariant: #474920;
$primaryFixed: #F3DAFF;
$primaryFixedDim: #E2B6FF;
$onPrimaryFixed: #2E004D;
$onPrimaryFixedVariant: #6D00AC;
$secondaryFixed: #FCD7FB;
$secondaryFixedDim: #DEBCDF;
$onSecondaryFixed: #29132D;
$onSecondaryFixedVariant: #583E5B;
$tertiaryFixed: #FFD7F1;
$tertiaryFixedDim: #F0B5DE;
$onTertiaryFixed: #320C2C;
$onTertiaryFixedVariant: #64385A;
.config/ags/scss/_music.scss
+4 -4
View File
@@ -6,7 +6,7 @@
@import './lib_mixins';
$music_gradient1: mix($color1, $background, 50%);
// @if $darkmode ==true {
// @if $darkmode == True {
// $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);
$onSecondaryContainer: mix($color7, $color2, 90%);
@if $darkmode ==false {
@if $darkmode == False {
$onSecondaryContainer: mix($onSecondaryContainer, black, 50%);
}
@@ -28,7 +28,7 @@ $onSecondaryContainer: mix($color7, $color2, 90%);
@include normal-rounding;
// min-height: 7.159rem;
min-width: 29.659rem;
background-color: $t_background;
background-color: $layer0;
padding: 0rem 1.023rem;
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%),
@@ -46,7 +46,7 @@ $onSecondaryContainer: mix($color7, $color2, 90%);
// margin: 1.023rem;
min-width: 7.5rem;
min-height: 7.5rem;
background-color: $t_surface;
background-color: $layer1;
color: $onSecondaryContainer;
}
.config/ags/scss/_notifications.scss
+4 -6
View File
@@ -1,12 +1,10 @@
$notif_surface: $surfaceContainer;
@mixin notif-rounding {
@include normal-rounding;
}
.notif-low {
@include notif-rounding;
background-color: $surfaceContainerHigh;
background-color: $layer2;
color: $onSurfaceVariant;
padding: $rounding_small;
padding-right: $rounding_small + 0.545rem;
@@ -14,7 +12,7 @@ $notif_surface: $surfaceContainer;
.notif-normal {
@include notif-rounding;
background-color: $surfaceContainerHigh;
background-color: $layer2;
color: $onSurfaceVariant;
padding: $rounding_small;
padding-right: $rounding_small + 0.545rem;
@@ -44,7 +42,7 @@ $notif_surface: $surfaceContainer;
.popup-notif-low {
@include notif-rounding;
min-width: 30.682rem;
background-color: $notif_surface;
background-color: $layer2;
border: 0.034rem solid $outlineVariant;
color: $onSurfaceVariant;
padding: $rounding_small;
@@ -54,7 +52,7 @@ $notif_surface: $surfaceContainer;
.popup-notif-normal {
@include notif-rounding;
min-width: 30.682rem;
background-color: $notif_surface;
background-color: $layer2;
border: 0.034rem solid $outlineVariant;
color: $onSurfaceVariant;
padding: $rounding_small;
.config/ags/scss/_overview.scss
+1 -1
View File
@@ -118,7 +118,7 @@
@include menu_decel;
background-color: $surfaceContainerHigh;
color: $onSurface;
border: 0.068rem solid $outlineVariant;
border: 0.068rem solid $surfaceContainerHighest;
}
.overview-tasks-window:hover,
.config/ags/scss/_sidebars.scss
+24 -34
View File
@@ -1,7 +1,4 @@
$sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%);
$textboxColor: $surfaceContainerHigh;
$system: $secondary;
$onSystem: $onSecondary;
@mixin group-padding {
padding: 0.341rem;
@@ -52,12 +49,12 @@ $onSystem: $onSecondary;
.sidebar-group {
@include normal-rounding;
@include group-padding;
background-color: $surfaceContainer;
background-color: $layer1;
}
.sidebar-group-nopad {
@include normal-rounding;
background-color: $surfaceContainer;
background-color: $layer1;
}
.sidebar-group-invisible {
@@ -71,7 +68,7 @@ $onSystem: $onSecondary;
.sidebar-togglesbox {
@include full-rounding;
@include group-padding;
background-color: $surfaceContainer;
background-color: $layer1;
}
.sidebar-iconbutton {
@@ -263,8 +260,8 @@ $onSystem: $onSecondary;
@include full-rounding;
@include element_decel;
padding: 0rem 0.682rem;
background-color: $surfaceContainer;
color: $outline;
background-color: $surfaceContainerHigh;
color: $onSurface;
}
.sidebar-calendar-monthyear-btn:hover,
@@ -281,7 +278,7 @@ $onSystem: $onSecondary;
@include element_decel;
min-width: 2.045rem;
min-height: 2.045rem;
background-color: $surfaceContainer;
background-color: $surfaceContainerHigh;
color: $outline;
}
@@ -329,7 +326,7 @@ $onSystem: $onSecondary;
.sidebar-todo-new {
@include full-rounding;
@include element_decel;
background-color: $textboxColor;
background-color: $surfaceContainerHigh;
color: $onSurfaceVariant;
margin: 0.341rem;
padding: 0.205rem 0.545rem;
@@ -403,7 +400,7 @@ $onSystem: $onSecondary;
.sidebar-module {
@include normal-rounding;
@include group-padding;
background-color: $surfaceContainer;
background-color: $layer1;
padding: 0.682rem;
}
@@ -422,7 +419,7 @@ $onSystem: $onSecondary;
.sidebar-module-scripts-button {
@include full-rounding;
@include icon-material;
background-color: $surfaceContainer;
background-color: $layer1;
min-width: 1.705rem;
min-height: 1.705rem;
@@ -498,7 +495,7 @@ $colorpicker_rounding: 0.341rem;
.sidebar-chat-apiswitcher {
@include full-rounding;
@include group-padding;
background-color: $surfaceContainer;
background-color: $layer1;
}
.sidebar-chat-apiswitcher-icon {
@@ -518,7 +515,7 @@ $colorpicker_rounding: 0.341rem;
.sidebar-chat-providerswitcher {
@include small-rounding;
padding: 0.477rem 0.682rem;
background-color: $textboxColor;
background-color: $surfaceContainerHigh;
color: $onSurfaceVariant;
}
@@ -534,7 +531,7 @@ $colorpicker_rounding: 0.341rem;
.sidebar-chat-textarea {
@include normal-rounding;
background-color: $textboxColor;
background-color: $surfaceContainerHigh;
color: $onSurfaceVariant;
padding: 0.682rem;
}
@@ -644,33 +641,26 @@ $colorpicker_rounding: 0.341rem;
margin: 0rem 0.682rem;
padding: 0.682rem;
@if $darkmode ==true {
background-color: white;
@if $darkmode == True {
background-color: #e6e6e6;
}
color: $onBackground;
// background-color: $termbg;
}
.sidebar-chat-codeblock {
@include normal-rounding;
// @include elevation2;
background-color: $termbg;
color: $termfg;
background-color: $layer2;
color: $onLayer2;
margin: 0rem 0.682rem;
border: 0.068rem solid $outlineVariant;
}
.sidebar-chat-codeblock-topbar {
@include mainfont;
margin: 0.273rem;
margin-bottom: 0rem;
background-color: $secondaryContainer;
color: $onSecondaryContainer;
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;
background-color: $layer3;
color: $onLayer3;
border-top-left-radius: $rounding_small;
border-top-right-radius: $rounding_small;
padding: 0.341rem 0.477rem;
}
@@ -687,11 +677,11 @@ $colorpicker_rounding: 0.341rem;
.sidebar-chat-codeblock-topbar-btn:hover,
.sidebar-chat-codeblock-topbar-btn:focus {
background-color: mix($secondaryContainer, $onSecondaryContainer, 90%);
background-color: $surfaceBright;
}
.sidebar-chat-codeblock-topbar-btn:active {
background-color: mix($secondaryContainer, $onSecondaryContainer, 80%);
background-color: $surfaceVariant;
}
.sidebar-chat-codeblock-code {
@@ -737,7 +727,7 @@ $colorpicker_rounding: 0.341rem;
.sidebar-chat-chip-action {
@include element_decel;
background-color: $textboxColor;
background-color: $surfaceContainerHigh;
color: $onSurfaceVariant;
}
@@ -759,7 +749,7 @@ $colorpicker_rounding: 0.341rem;
@include element_decel;
@include small-rounding;
padding: 0.341rem 0.477rem;
background-color: $textboxColor;
background-color: $surfaceContainerHigh;
color: $onSurfaceVariant;
}