mirror of
https://github.com/EliverLara/Nordic.git
synced 2026-09-27 17:36:00 -04:00
Gnome-shell: Improve quick settings buttons appearance
This commit is contained in:
+76
-74
@@ -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); }
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user