forked from Shinonome/dots-hyprland
update styles (#327)
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user