gnome-shell: Add quick settings menu styling

Styling for new menu on GNOME Shell 43.
This commit is contained in:
Joonas Henriksson 2022-11-28 01:32:20 +02:00
parent 7c9ba847b0
commit c62805f79e
No known key found for this signature in database
GPG Key ID: FAEDBC4FB5AA3B17
1 changed files with 121 additions and 0 deletions

View File

@ -3209,6 +3209,127 @@ $_screenshot_ui_panel_padding: 15px;
-y-offset: 24px;
}
//
// Quick settings
//
.quick-settings {
padding: 12px;
@extend %popup_menu;
.icon-button, .button {
padding: 7px;
}
}
.quick-settings-grid {
spacing-rows: 8px;
spacing-columns: 8px;
}
.quick-toggle {
border-radius: 99px;
min-width: 12em;
max-width: 12em;
min-height: 40px;
&:checked { @include button(default); }
& > StBoxLayout { spacing: 4px; }
/* Move padding into the box; this is to allow menu arrows
to extend to the border */
&.button { padding: 0; }
& > StBoxLayout { padding: 0 8px; }
&:ltr > StBoxLayout { padding-left: 10px; }
&:rtl > StBoxLayout { padding-right: 10px; }
.quick-toggle-label { font-weight: normal; }
.quick-toggle-icon, .quick-toggle-arrow { icon-size: 16px; }
}
.quick-menu-toggle {
&:ltr > StBoxLayout { padding-right: 0; }
&:rtl > StBoxLayout { padding-left: 0; }
& .quick-toggle-arrow {
background-color: transparentize($fg_color, 0.9);
padding: 4px 7px;
&:ltr { border-radius: 0 99px 99px 0; }
&:rtl { border-radius: 99px 0 0 99px; }
}
}
.quick-slider {
& > StBoxLayout { spacing: 4px; }
.slider-bin {
&:focus {@include button(focus);}
min-height: 16px; // slider size
padding: 4px;
border-radius: 99px;
}
.quick-toggle-icon {
icon-size: 16px;
&:ltr { margin-left: 4px; }
&:rtl { margin-right: 4px; }
}
}
.quick-toggle-menu {
background-color: $shell_popup_menu_background_color;
border-color: $borders_color;
border-radius: 3px;
padding: 8px;
margin: 8px 12px 0;
.popup-menu-item > StIcon { -st-icon-style: symbolic; }
& .header {
spacing-rows: 2px;
spacing-columns: 8px;
padding-bottom: 8px;
& .icon {
icon-size: 16px;
border-radius: 999px;
padding: 6px;
background-color: lighten($bg_color, 10%);
&.active { background-color: $selected_bg_color; }
}
& .title {
@include fontsize($font-size * 1.6);
font-weight: 800;
}
& .subtitle {
@include fontsize($font-size * 1.2);
font-weight: 800;
}
}
}
.quick-toggle-menu-container {
}
.quick-settings-system-item {
& > StBoxLayout { spacing: 8px; }
& .power-item {
min-height: 0;
min-width: 0;
&:insensitive {
@include button(normal);
background-color: transparent;
}
}
}
//
// OpenWeather extension
//