Gnome-shell: Improve quick settings buttons appearance

This commit is contained in:
EliverLara
2023-03-07 16:00:25 -06:00
parent 1dde9718e5
commit 9e4cfdc7d6
2 changed files with 84 additions and 75 deletions
+76 -74
View File
@@ -2209,83 +2209,85 @@ $slider_size: 19px;
}
.quick-settings {
padding: 14px;
border-radius: 12px;
.icon-button, .button {
padding: 6px*1.75;
}
}
$base_padding: 6px;
.quick-toggle {
border-radius: 99px;
min-height: 40px;
&:checked { @include button(active, transparentize($selected_bg_color, 0.3));
color: $selected_fg_color;
}
& > StBoxLayout { spacing: $base_padding; }
/* Move padding into the box; this is to allow menu arrows
to extend to the border */
&.button { padding: 0; }
& > StBoxLayout { padding: 0 6px*2; }
&:ltr > StBoxLayout { padding-left: $base_padding*2.5; }
&:rtl > StBoxLayout { padding-right: $base_padding*2.5; }
.quick-toggle-label { font-weight: bold; }
//.quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; }
}
.quick-menu-toggle {
&:ltr > StBoxLayout { padding-right: 0; }
&:rtl > StBoxLayout { padding-left: 0; }
& .quick-toggle-arrow {
background-color: transparentize($fg_color, 0.9);
padding: $base_padding $base_padding*1.75;
&:ltr { border-radius: 0 99px 99px 0; }
&:rtl { border-radius: 99px 0 0 99px; }
}
}
.quick-toggle-menu {
background-color: $base_color;
border-radius: 12px;
padding: $base_padding*2;
margin: $base_padding*2 $base_padding*3 0;
.popup-menu-item > StIcon { -st-icon-style: symbolic; }
& .header {
spacing-rows: 0.5 * $base_padding;
spacing-columns: $base_padding*2;
padding-bottom: 2 * $base_padding;
& .icon {
// icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok
border-radius: 999px;
padding: 1.5 * $base_padding;
background-color: lighten($bg_color, 10%);
&.active { background-color: $selected_bg_color; }
}
.quick-settings {
padding: 14px;
border-radius: 12px;
}
.icon-button, .button {
padding: 6px*1.75;
}
}
$base_padding: 6px;
.quick-toggle {
border-radius: 99px;
min-height: 40px;
&:checked { @include button(active, transparentize($selected_bg_color, 0.3));
color: $selected_fg_color;
.quick-settings-system-item {
& > StBoxLayout { spacing: 2 * $base_padding; }
}
.icon-button {
@extend %button;
border-radius: 50px;
& > StBoxLayout { spacing: $base_padding; }
/* Move padding into the box; this is to allow menu arrows
to extend to the border */
&.button { padding: 0; }
& > StBoxLayout { padding: 0 6px*2; }
&:ltr > StBoxLayout { padding-left: $base_padding*2.5; }
&:rtl > StBoxLayout { padding-right: $base_padding*2.5; }
.quick-toggle-label { font-weight: bold; }
//.quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; }
}
.quick-menu-toggle {
&:ltr > StBoxLayout { padding-right: 0; }
&:rtl > StBoxLayout { padding-left: 0; }
& .quick-toggle-arrow {
background-color: transparentize($fg_color, 0.9);
padding: $base_padding $base_padding*1.75;
&:ltr { border-radius: 0 99px 99px 0; }
&:rtl { border-radius: 99px 0 0 99px; }
}
}
.quick-toggle-menu {
background-color: $base_color;
border-radius: 12px;
padding: $base_padding*2;
margin: $base_padding*2 $base_padding*3 0;
.popup-menu-item > StIcon { -st-icon-style: symbolic; }
& .header {
spacing-rows: 0.5 * $base_padding;
spacing-columns: $base_padding*2;
padding-bottom: 2 * $base_padding;
& .icon {
// icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok
border-radius: 999px;
padding: 1.5 * $base_padding;
background-color: lighten($bg_color, 10%);
&.active { background-color: $selected_bg_color; }
}
}
}
}
.quick-settings-system-item {
& > StBoxLayout { spacing: 2 * $base_padding; }
.icon-button {
@extend %button;
border-radius: 50px;
}
}
.quick-slider .icon-button:hover { @include button(hover); }
+8 -1
View File
@@ -1998,7 +1998,7 @@ StScrollBar {
border-radius: 99px;
min-height: 40px;
/* Move padding into the box; this is to allow menu arrows
to extend to the border */ }
to extend to the border */ }
.quick-toggle:checked {
color: rgba(143, 188, 187, 0.7);
background-color: rgba(143, 188, 187, 0.4);
@@ -2054,6 +2054,13 @@ StScrollBar {
.quick-settings-system-item .icon-button {
border-radius: 50px; }
.quick-slider .icon-button:hover {
background-color: #3b4252;
color: #fefefe;
border: 1px solid #1f232b;
text-shadow: 0 1px black;
icon-shadow: 0 1px black; }
.openweather-current-summarybox,
.openweather-forecast-icon,
.openweather-current-databox-captions,