update styles (#327)

This commit is contained in:
end-4
2024-03-21 19:20:09 +07:00
parent 28168d1282
commit 0fdadb7a2f
5 changed files with 37 additions and 48 deletions
+14 -23
View File
@@ -2,11 +2,6 @@
// border: 1px solid $onSurfaceVariant; // Debugging // border: 1px solid $onSurfaceVariant; // Debugging
// } // }
// *:focus {
// outline: 1px solid mix($onSurface, $surface, 40%);
// -gtk-outline-radius: $rounding_small;
// }
* { * {
selection { selection {
background-color: $secondary; background-color: $secondary;
@@ -89,9 +84,8 @@ tooltip {
animation-timing-function: ease-out; animation-timing-function: ease-out;
animation-iteration-count: 1; animation-iteration-count: 1;
@include normal-rounding; @include normal-rounding;
background-color: $surfaceVariant; background-color: $inverseSurface;
color: $onSurfaceVariant; color: $inverseOnSurface;
border: 1px solid $onSurfaceVariant;
} }
///////////////////////////////////////// /////////////////////////////////////////
@@ -107,8 +101,8 @@ tooltip {
popover { popover {
@include elevation-border-softer; @include elevation-border-softer;
padding: 0.681rem; padding: 0.681rem;
background: $surfaceVariant; background: $surfaceContainerHigh;
color: $onSurfaceVariant; color: $onSurface;
border-radius: 1.159rem; border-radius: 1.159rem;
-gtk-outline-radius: 1.159rem; -gtk-outline-radius: 1.159rem;
@@ -123,17 +117,11 @@ popover {
.configtoggle-box { .configtoggle-box {
padding: 0.205rem 0.341rem; padding: 0.205rem 0.341rem;
border: 0.136rem solid transparent;
}
.configtoggle-box:focus {
border: 0.136rem solid mix($onSurface, $surface, 40%);
} }
.switch-bg { .switch-bg {
@include element_decel; @include element_decel;
@include full-rounding; @include full-rounding;
background-color: mix($surface, $background, 50%);
border: 0.136rem solid $onSurface; border: 0.136rem solid $onSurface;
min-width: 2.864rem; min-width: 2.864rem;
min-height: 1.637rem; min-height: 1.637rem;
@@ -148,7 +136,7 @@ popover {
@include full-rounding; @include full-rounding;
@include menu_decel; @include menu_decel;
background-color: $onSurface; background-color: $onSurface;
color: $surface; color: $layer1;
min-width: 0.819rem; min-width: 0.819rem;
min-height: 0.819rem; min-height: 0.819rem;
margin-left: 0.477rem; margin-left: 0.477rem;
@@ -195,7 +183,7 @@ popover {
.segment-btn:focus, .segment-btn:focus,
.segment-btn:hover { .segment-btn:hover {
background-color: $hovercolor; background-color: $layer0Hover;
} }
.segment-btn-enabled { .segment-btn-enabled {
@@ -215,13 +203,13 @@ popover {
.multipleselection-btn { .multipleselection-btn {
@include small-rounding; @include small-rounding;
padding: 0rem 0.341rem; padding: 0rem 0.341rem;
border: 0.034rem solid $outlineVariant; border: 0.034rem solid $outline;
color: $onSurface; color: $onSurface;
} }
.multipleselection-btn:focus, .multipleselection-btn:focus,
.multipleselection-btn:hover { .multipleselection-btn:hover {
background-color: $hovercolor; background-color: $layer0Hover;
color: $onSurface; color: $onSurface;
} }
@@ -264,12 +252,15 @@ popover {
@include small-rounding; @include small-rounding;
@include element_decel; @include element_decel;
min-height: 2.5rem; min-height: 2.5rem;
color: $onSurface; color: $onLayer0;
}
.tab-btn:hover {
background-color: $layer0Hover;
} }
.tab-btn:hover,
.tab-btn:focus { .tab-btn:focus {
background-color: $hovercolor; background-color: $surfaceContainerLow;
} }
.tab-btn-active>box>label { .tab-btn-active>box>label {
+8 -10
View File
@@ -17,14 +17,14 @@
@include titlefont; @include titlefont;
@include bg-textshadow; @include bg-textshadow;
font-size: 5.795rem; font-size: 5.795rem;
color: $onBackground; color: $onLayer0;
} }
.bg-time-date { .bg-time-date {
@include titlefont; @include titlefont;
@include bg-textshadow; @include bg-textshadow;
font-size: 2.591rem; font-size: 2.591rem;
color: $onBackground; color: $onLayer0;
} }
.bg-distro-box { .bg-distro-box {
@@ -37,7 +37,7 @@
@include titlefont; @include titlefont;
@include bg-textshadow; @include bg-textshadow;
font-size: 1.432rem; font-size: 1.432rem;
color: $onBackground; color: $onLayer0;
} }
.bg-distro-name { .bg-distro-name {
@@ -61,9 +61,8 @@
.bg-quicklaunch-btn { .bg-quicklaunch-btn {
@include mainfont; @include mainfont;
@include full-rounding; @include full-rounding;
background-color: $surfaceVariant; background-color: $layer2;
color: $onSurfaceVariant; color: $onLayer2;
border: 0.068rem solid $subtext;
min-width: 4.432rem; min-width: 4.432rem;
min-height: 2.045rem; min-height: 2.045rem;
padding: 0.273rem 0.682rem; padding: 0.273rem 0.682rem;
@@ -71,11 +70,11 @@
.bg-quicklaunch-btn:hover, .bg-quicklaunch-btn:hover,
.bg-quicklaunch-btn:focus { .bg-quicklaunch-btn:focus {
background-color: mix($surfaceVariant, $onSurfaceVariant, 95%); background-color: $layer2Hover;
} }
.bg-quicklaunch-btn:active { .bg-quicklaunch-btn:active {
background-color: mix($surfaceVariant, $onSurfaceVariant, 90%); background-color: $layer2Active;
} }
.bg-system-bg { .bg-system-bg {
@@ -85,10 +84,9 @@
.bg-system-circprog { .bg-system-circprog {
@include fluent_decel_long; @include fluent_decel_long;
// margin-left: 0.273rem;
min-width: 0.205rem; // Trough stroke width min-width: 0.205rem; // Trough stroke width
min-height: 4.091rem; // Diameter min-height: 4.091rem; // Diameter
font-size: 0px; font-size: 0px;
padding: 0rem; padding: 0rem;
background-color: $surfaceVariant; background-color: $layer2;
} }
+3 -3
View File
@@ -12,11 +12,11 @@
.dock-app-btn:hover, .dock-app-btn:hover,
.dock-app-btn:focus { .dock-app-btn:focus {
background-color: mix($surface, $onSurface, 90%); background-color: $layer0Hover;
} }
.dock-app-btn:active { .dock-app-btn:active {
background-color: mix($surface, $onSurface, 85%); background-color: $layer0Active;
} }
.dock-app-icon { .dock-app-icon {
@@ -27,5 +27,5 @@
.dock-separator { .dock-separator {
min-width: 0.068rem; min-width: 0.068rem;
background-color: $surfaceVariant; background-color: $outline;
} }
+11 -11
View File
@@ -5,7 +5,7 @@
.notif-low { .notif-low {
@include notif-rounding; @include notif-rounding;
background-color: $layer2; background-color: $layer2;
color: $onSurfaceVariant; color: $onLayer2;
padding: $rounding_small; padding: $rounding_small;
padding-right: $rounding_small + 0.545rem; padding-right: $rounding_small + 0.545rem;
} }
@@ -13,7 +13,7 @@
.notif-normal { .notif-normal {
@include notif-rounding; @include notif-rounding;
background-color: $layer2; background-color: $layer2;
color: $onSurfaceVariant; color: $onLayer2;
padding: $rounding_small; padding: $rounding_small;
padding-right: $rounding_small + 0.545rem; padding-right: $rounding_small + 0.545rem;
} }
@@ -44,7 +44,7 @@
min-width: 30.682rem; min-width: 30.682rem;
background-color: $layer2; background-color: $layer2;
border: 0.034rem solid $outlineVariant; border: 0.034rem solid $outlineVariant;
color: $onSurfaceVariant; color: $onLayer2;
padding: $rounding_small; padding: $rounding_small;
padding-right: $rounding_small + 0.545rem; padding-right: $rounding_small + 0.545rem;
} }
@@ -54,7 +54,7 @@
min-width: 30.682rem; min-width: 30.682rem;
background-color: $layer2; background-color: $layer2;
border: 0.034rem solid $outlineVariant; border: 0.034rem solid $outlineVariant;
color: $onSurfaceVariant; color: $onLayer2;
padding: $rounding_small; padding: $rounding_small;
padding-right: $rounding_small + 0.545rem; padding-right: $rounding_small + 0.545rem;
} }
@@ -129,11 +129,11 @@
.notif-expand-btn:hover, .notif-expand-btn:hover,
.notif-expand-btn:focus { .notif-expand-btn:focus {
background: $hovercolor; background: $layer2Hover;
} }
.notif-expand-btn:active { .notif-expand-btn:active {
background: $activecolor; background: $layer2Active;
} }
.notif-listaction-btn { .notif-listaction-btn {
@@ -143,11 +143,11 @@
.notif-listaction-btn:hover, .notif-listaction-btn:hover,
.notif-listaction-btn:focus { .notif-listaction-btn:focus {
background-color: $hovercolor; background-color: $layer2Hover;
} }
.notif-listaction-btn:active { .notif-listaction-btn:active {
background-color: $activecolor; background-color: $layer2Active;
} }
.notif-listaction-btn-enabled { .notif-listaction-btn-enabled {
@@ -166,7 +166,7 @@
.osd-notif { .osd-notif {
@include notif-rounding; @include notif-rounding;
background-color: $background; background-color: $layer0;
min-width: 30.682rem; min-width: 30.682rem;
} }
@@ -204,7 +204,7 @@
.notif-action-low { .notif-action-low {
background-color: $surfaceContainerHighest; background-color: $surfaceContainerHighest;
color: $onSurfaceVariant; color: $onLayer2;
} }
.notif-action-low:focus, .notif-action-low:focus,
@@ -218,7 +218,7 @@
.notif-action-normal { .notif-action-normal {
background-color: $surfaceContainerHighest; background-color: $surfaceContainerHighest;
color: $onSurfaceVariant; color: $onSurface;
} }
.notif-action-normal:focus, .notif-action-normal:focus,
+1 -1
View File
@@ -83,7 +83,7 @@
} }
.osd-colorscheme-settings { .osd-colorscheme-settings {
background-color: $background; background-color: $layer0;
padding: 0.313rem 0.626rem; padding: 0.313rem 0.626rem;
@include small-rounding; @include small-rounding;
} }