clean stylesheets and add more transitions

This commit is contained in:
end-4
2024-01-30 11:38:41 +07:00
parent aa58b2543f
commit 3288d45aec
6 changed files with 77 additions and 294 deletions
+5 -109
View File
@@ -48,24 +48,6 @@ $bar_subgroup_bg: $surfaceVariant;
padding-left: 0.341rem;
}
.bar-group-pad-left {
padding-left: 1.364rem;
padding-right: 0.681rem;
}
.bar-group-pad-right {
padding-left: 0.681rem;
padding-right: 1.364rem;
}
.bar-group-pad-leftonly {
padding-left: 0.681rem;
}
.bar-group-pad-rightonly {
padding-right: 0.681rem;
}
.bar-group-standalone {
@include bar-group-rounding;
-gtk-outline-radius: 1.364rem;
@@ -142,6 +124,7 @@ $bar_subgroup_bg: $surfaceVariant;
.bar-batt {
@include full-rounding;
@include element_decel;
min-height: 1.77rem;
min-width: 1.77rem;
border-radius: 10rem;
@@ -173,24 +156,17 @@ $bar_subgroup_bg: $surfaceVariant;
}
.bar-batt-circprog-low {
@include fluent_decel_long;
min-width: 0.068rem; // line width
min-height: 1.636rem;
padding: 0rem;
background-color: $error;
color: $errorContainer;
}
.bar-batt-circprog-full {
@include fluent_decel_long;
min-width: 0.068rem; // line width
min-height: 1.636rem;
padding: 0rem;
background-color: $successContainer;
color: $onSuccessContainer;
}
.bar-music-playstate {
@include element_decel;
min-height: 1.77rem;
min-width: 1.77rem;
border-radius: 10rem;
@@ -237,24 +213,6 @@ $bar_subgroup_bg: $surfaceVariant;
background-color: rgba(30, 30, 30, 0.6);
}
.bar-music-bottom-bg {
border-radius: 1.364rem;
min-width: 34.091rem;
}
.bar-music-bottom-ctl-bg {
border-radius: 1.364rem;
background-color: rgba(30, 30, 30, 0.6);
}
.bar-music-extended-textbox {
margin: 1.023rem;
}
.bar-music-bottom-cover {
border-radius: 10rem;
}
.bar-music-hide-false {
@include menu_decel;
transition-duration: 100ms;
@@ -267,70 +225,6 @@ $bar_subgroup_bg: $surfaceVariant;
opacity: 0;
}
.bar-music-btn {
font-size: 1.364rem;
border-radius: 10rem;
min-height: 2.591rem;
min-width: 2.591rem;
}
.bar-music-btn:hover,
.bar-music-btn:focus {
background-color: $hovercolor;
}
.bar-prog-batt {
min-height: 0.955rem;
min-width: 0.068rem;
padding: 0rem;
border-radius: 10rem;
trough {
min-height: 0.954rem;
min-width: 0.068rem;
border-radius: 10rem;
}
progress {
min-height: 0.68rem;
min-width: 0.68rem;
margin: 0rem 0.137rem;
border-radius: 10rem;
background-color: $t_onSecondaryContainer;
}
}
.bar-prog-batt-low {
progress {
background-color: $errorContainer;
}
}
.bar-prog-batt-full {
progress {
background-color: $onSuccessContainer;
}
}
.bar-batt-chargestate {
border-radius: 10rem;
background-color: transparent;
}
.bar-batt-chargestate-charging {
border-radius: 10rem;
min-width: 0.681rem;
min-height: 0.681rem;
background-color: $onSurfaceVariant;
}
.bar-batt-chargestate-charging-smaller {
border-radius: 10rem;
min-width: 0.409rem;
min-height: 0.409rem;
background-color: $onSurfaceVariant;
}
.bar-corner-spacing {
min-width: $rounding_large;
min-height: $rounding_large;
@@ -388,13 +282,14 @@ $bar_subgroup_bg: $surfaceVariant;
.bar-systray-item {
@include full-rounding;
@include element_decel;
min-height: 1.032rem;
min-width: 1.032rem;
}
.bar-statusicons {
@include full-rounding;
@include menu_decel;
@include element_decel;
margin: 0.273rem;
padding: 0rem 0.614rem;
}
@@ -409,6 +304,7 @@ $bar_subgroup_bg: $surfaceVariant;
.bar-util-btn {
@include full-rounding;
@include element_decel;
min-height: 1.77rem;
min-width: 1.77rem;
background-color: $bar_subgroup_bg;
+1 -1
View File
@@ -31,7 +31,7 @@
// .cheatsheet-action {}
.cheatsheet-closebtn {
@include menu_decel;
@include element_decel;
@include full-rounding;
min-width: 2.386rem;
min-height: 2.386rem;
+1 -1
View File
@@ -103,7 +103,7 @@ tooltip {
}
.switch-bg {
@include menu_decel;
@include element_decel;
@include full-rounding;
background-color: mix($surface, $background, 50%);
border: 0.136rem solid $onSurface;
+1 -1
View File
@@ -3,7 +3,7 @@
}
.overview-search-box {
@include menu_decel;
@include element_decel;
@include large-rounding;
@include elevation-border;
@include elevation2;
+25 -50
View File
@@ -78,7 +78,7 @@ $onChatgpt: $onPrimary;
.sidebar-iconbutton {
@include full-rounding;
@include menu_decel;
@include element_decel;
color: $onSurface;
min-width: 2.727rem;
min-height: 2.727rem;
@@ -94,18 +94,12 @@ $onChatgpt: $onPrimary;
}
.sidebar-button {
@include menu_decel;
@include element_decel;
padding: 0rem $rounding_small;
background-color: $t_secondaryContainer;
color: $onSecondaryContainer;
}
.sidebar-button-nopad {
@include menu_decel;
background-color: $t_secondaryContainer;
color: $onSecondaryContainer;
}
.sidebar-button:hover,
.sidebar-button:focus {
background-color: $hovercolor;
@@ -115,33 +109,6 @@ $onChatgpt: $onPrimary;
background-color: $activecolor;
}
.sidebar-button-nopad:hover,
.sidebar-button-nopad:focus {
background-color: $hovercolor;
}
.sidebar-button-nopad:active {
background-color: $activecolor;
}
.sidebar-button-left {
border-top-left-radius: $rounding_small;
border-bottom-left-radius: $rounding_small;
}
.sidebar-button-right {
border-top-right-radius: $rounding_small;
border-bottom-right-radius: $rounding_mediumsmall;
}
.sidebar-button-alone {
@include small-rounding;
}
.sidebar-button-alone-normal {
@include small-rounding;
}
.sidebar-button-active {
background-color: $primary;
color: $onPrimary;
@@ -236,6 +203,7 @@ $onChatgpt: $onPrimary;
slider {
@include full-rounding;
@include element_decel;
min-width: 0.273rem;
min-height: 2.045rem;
background-color: $t_onSurfaceVariant;
@@ -253,7 +221,7 @@ $onChatgpt: $onPrimary;
.sidebar-calendar-btn {
@include full-rounding;
@include menu_decel;
@include element_decel;
min-height: 2.523rem;
min-width: 2.523rem;
color: $onSurface;
@@ -297,6 +265,7 @@ $onChatgpt: $onPrimary;
.sidebar-calendar-monthyear-btn {
@include full-rounding;
@include element_decel;
padding: 0rem 0.682rem;
background-color: $t_surfaceVariant;
color: $onSurfaceVariant;
@@ -315,6 +284,7 @@ $onChatgpt: $onPrimary;
.sidebar-calendar-monthshift-btn {
@include full-rounding;
@include element_decel;
min-width: 2.045rem;
min-height: 2.045rem;
background-color: $t_surfaceVariant;
@@ -333,7 +303,7 @@ $onChatgpt: $onPrimary;
.sidebar-selector-tab {
@include small-rounding;
@include menu_decel;
@include element_decel;
min-height: 2.5rem;
color: $onSurface;
}
@@ -357,7 +327,7 @@ $onChatgpt: $onPrimary;
}
.sidebar-selector-highlight {
transition: 180ms ease-in-out; // Doesn't look that good, but it syncs with GtkStack animation of the actual todo widget content
transition: 180ms ease-in-out; // Doesn't look that good, but it syncs with the GtkStack
color: $primary;
// padding: 0rem 2.045rem;
min-height: 0.205rem;
@@ -372,6 +342,7 @@ $onChatgpt: $onPrimary;
}
.sidebar-todo-item-action {
@include element_decel;
border-radius: 9999px;
min-width: 1.705rem;
min-height: 1.705rem;
@@ -401,13 +372,14 @@ $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;
}
.sidebar-todo-newz,
.sidebar-todo-new,
.sidebar-todo-new:focus {
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 97%);
}
@@ -417,7 +389,7 @@ $onChatgpt: $onPrimary;
}
.sidebar-todo-add {
@include menu_decel;
@include element_decel;
@include small-rounding;
min-width: 1.705rem;
min-height: 1.705rem;
@@ -435,7 +407,7 @@ $onChatgpt: $onPrimary;
}
.sidebar-todo-add-available {
@include menu_decel;
@include element_decel;
@include small-rounding;
min-width: 1.705rem;
min-height: 1.705rem;
@@ -454,7 +426,7 @@ $onChatgpt: $onPrimary;
}
.sidebar-todo-entry {
@include menu_decel;
@include element_decel;
@include small-rounding;
background-color: $surfaceVariant;
color: $onSurfaceVariant;
@@ -491,7 +463,7 @@ $onChatgpt: $onPrimary;
}
.sidebar-chat-apiswitcher-icon {
@include menu_decel;
@include element_decel;
@include full-rounding;
min-width: 2.182rem;
min-height: 2.182rem;
@@ -504,7 +476,7 @@ $onChatgpt: $onPrimary;
}
.sidebar-chat-viewport {
@include menu_decel;
@include element_decel;
// margin: 0.682rem 0rem;
padding: 0.682rem 0rem;
}
@@ -532,7 +504,7 @@ $onChatgpt: $onPrimary;
}
.sidebar-chat-send {
@include menu_decel;
@include element_decel;
min-width: 1.705rem;
min-height: 1.705rem;
border-radius: $rounding_medium - 0.681rem;
@@ -566,7 +538,7 @@ $onChatgpt: $onPrimary;
}
.sidebar-chat-indicator {
@include menu_decel;
@include element_decel;
@include full-rounding;
min-width: 0.136rem;
background-color: $onBackground;
@@ -630,6 +602,7 @@ $onChatgpt: $onPrimary;
.sidebar-chat-codeblock-topbar-btn {
@include full-rounding;
@include element_decel;
padding: 0.273rem 0.477rem;
}
@@ -668,7 +641,7 @@ $onChatgpt: $onPrimary;
.sidebar-chat-welcome-logo {
@include full-rounding;
@include menu_decel;
@include element_decel;
min-height: 4.773rem;
min-width: 4.773rem;
@include icon-material;
@@ -678,12 +651,13 @@ $onChatgpt: $onPrimary;
}
.sidebar-chat-chip {
@include menu_decel;
@include element_decel;
@include small-rounding;
padding: 0.341rem 0.477rem;
}
.sidebar-chat-chip-action {
@include element_decel;
background-color: $textboxColor;
color: $onSurfaceVariant;
}
@@ -703,7 +677,7 @@ $onChatgpt: $onPrimary;
}
.sidebar-chat-chip-toggle {
@include menu_decel;
@include element_decel;
@include small-rounding;
padding: 0.341rem 0.477rem;
background-color: $textboxColor;
@@ -721,7 +695,7 @@ $onChatgpt: $onPrimary;
.sidebar-pin {
@include small-rounding;
@include menu_decel;
@include element_decel;
min-height: 2.386rem;
min-width: 2.386rem;
color: $onSurface;
@@ -778,6 +752,7 @@ $onChatgpt: $onPrimary;
}
.sidebar-waifu-image-actions {
@include element_decel;
padding: 0.313rem;
}