gnome-shell: Add quick settings menu styling
Styling for new menu on GNOME Shell 43.
This commit is contained in:
parent
7c9ba847b0
commit
c62805f79e
|
@ -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
|
||||
//
|
||||
|
|
Loading…
Reference in New Issue