mirror of
https://github.com/vinceliuice/Colloid-gtk-theme.git
synced 2025-09-15 21:08:39 -07:00
Fixed gnome-shell 48 issues
This commit is contained in:
vinceliuice
16
install.sh
16
install.sh
@@ -37,23 +37,17 @@ SIZE_VARIANTS=('' '-Compact')
|
||||
|
||||
if [[ "$(command -v gnome-shell)" ]]; then
|
||||
echo && gnome-shell --version
|
||||
|
||||
SHELL_VERSION="$(gnome-shell --version | cut -d ' ' -f 3 | cut -d . -f -1)"
|
||||
if [[ "${SHELL_VERSION:-}" -ge "47" ]]; then
|
||||
GS_VERSION="47-0"
|
||||
elif [[ "${SHELL_VERSION:-}" -ge "46" ]]; then
|
||||
GS_VERSION="46-0"
|
||||
elif [[ "${SHELL_VERSION:-}" -ge "44" ]]; then
|
||||
GS_VERSION="44-0"
|
||||
elif [[ "${SHELL_VERSION:-}" -ge "42" ]]; then
|
||||
GS_VERSION="42-0"
|
||||
elif [[ "${SHELL_VERSION:-}" -ge "40" ]]; then
|
||||
GS_VERSION="40-0"
|
||||
|
||||
if [[ "${SHELL_VERSION:-}" -ge "40" ]]; then
|
||||
GS_VERSION="${SHELL_VERSION}-0"
|
||||
else
|
||||
GS_VERSION="3-28"
|
||||
fi
|
||||
else
|
||||
echo "'gnome-shell' not found, using styles for last gnome-shell version available."
|
||||
GS_VERSION="47-0"
|
||||
GS_VERSION="48-0"
|
||||
fi
|
||||
|
||||
usage() {
|
||||
|
||||
@@ -29,51 +29,51 @@ stage {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
/* General Typography */
|
||||
|
||||
/* General Typography */
|
||||
%large_title {
|
||||
font-weight: 300;
|
||||
@include fontsize(24);
|
||||
@include fontsize(24pt);
|
||||
}
|
||||
|
||||
%title_1 {
|
||||
font-weight: 800;
|
||||
@include fontsize(20);
|
||||
@include fontsize(20pt);
|
||||
}
|
||||
|
||||
%title_2 {
|
||||
font-weight: 800;
|
||||
@include fontsize(15);
|
||||
@include fontsize(15pt);
|
||||
}
|
||||
|
||||
%title_3 {
|
||||
font-weight: 700;
|
||||
@include fontsize(15);
|
||||
@include fontsize(15pt);
|
||||
}
|
||||
|
||||
%title_4 {
|
||||
font-weight: 700;
|
||||
@include fontsize(13);
|
||||
@include fontsize(13pt);
|
||||
}
|
||||
|
||||
%heading {
|
||||
font-weight: 700;
|
||||
@include fontsize(11);
|
||||
@include fontsize(11pt);
|
||||
}
|
||||
|
||||
%caption_heading {
|
||||
font-weight: 700;
|
||||
@include fontsize(9);
|
||||
@include fontsize(9pt);
|
||||
}
|
||||
|
||||
%caption {
|
||||
font-weight: 400;
|
||||
@include fontsize(9);
|
||||
@include fontsize(9pt);
|
||||
}
|
||||
|
||||
%smaller {
|
||||
font-weight: 400;
|
||||
@include fontsize(8);
|
||||
@include fontsize(9pt);
|
||||
}
|
||||
|
||||
%monospace {font-family: monospace;}
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
|
||||
// provide font size in rem, with px fallback
|
||||
@mixin fontsize($size: 24, $base: 16) {
|
||||
font-size: round($size) + pt;
|
||||
// Mixin to convert provided font size in pt to em units
|
||||
@mixin fontsize($size, $base: 16px, $unit: pt) {
|
||||
// if pt, convert into unitless value with the assumption: 1pt = 1.091px
|
||||
$adjusted_size: if($unit == pt, $size * 1.091, $size) * 1000;
|
||||
$rounded_size: round($adjusted_size / $base) / 1000;
|
||||
font-size: $rounded_size * 1em;
|
||||
// font-size: round($size) + pt;
|
||||
}
|
||||
|
||||
@mixin entry($t, $fc: $primary, $tc: $text, $bc: $fill) {
|
||||
@@ -72,26 +76,26 @@
|
||||
|
||||
@if $t == normal {
|
||||
color: $tc;
|
||||
background-color: $bc;
|
||||
background-color: rgba($tc, 0.05);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
@if $t == focus {
|
||||
color: $tc;
|
||||
box-shadow: none !important;
|
||||
background-color: if($bc == $primary, rgba(white, 0.08), overlay($bc, focus));
|
||||
background-color: if($bc == $primary, rgba(white, 0.08), rgba($tc, 0.08));
|
||||
}
|
||||
|
||||
@if $t == hover {
|
||||
color: $tc;
|
||||
box-shadow: none !important;
|
||||
background-color: if($bc == $primary, rgba(white, 0.08), overlay($bc, hover));
|
||||
background-color: if($bc == $primary, rgba(white, 0.1), rgba($tc, 0.1));
|
||||
}
|
||||
|
||||
@if $t == active {
|
||||
color: $tc;
|
||||
box-shadow: none !important;
|
||||
background-color: if($bc == $primary, rgba(white, 0.12), overlay($bc, active));
|
||||
background-color: if($bc == $primary, rgba(white, 0.18), rgba($tc, 0.18));
|
||||
}
|
||||
|
||||
@if $t == checked {
|
||||
@@ -102,7 +106,7 @@
|
||||
|
||||
@if $t == insensitive {
|
||||
color: rgba($tc, 0.35);
|
||||
background-color: $bc;
|
||||
background-color: rgba($tc, 0.02);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
@@ -114,18 +118,18 @@
|
||||
|
||||
@if $t == flat-focus {
|
||||
color: $tc;
|
||||
background-color: overlay($bc, focus);
|
||||
background-color: rgba($tc, 0.08);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
@if $t == flat-hover {
|
||||
color: $tc;
|
||||
background-color: overlay($bc, hover);
|
||||
background-color: rgba($tc, 0.1);
|
||||
}
|
||||
|
||||
@if $t == flat-active {
|
||||
color: $tc;
|
||||
background-color: overlay($bc, active);
|
||||
background-color: rgba($tc, 0.18);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ $asset_suffix: if($variant == 'dark', '-dark', '');
|
||||
|
||||
// sizes
|
||||
$item_size: if($compact == 'false', 32px, 28px);
|
||||
$font_size: if($compact == 'false', 11, 10);
|
||||
$font_size: if($compact == 'false', 11pt, 10pt);
|
||||
|
||||
// padding, margin and spacing
|
||||
$base_padding: if($compact == 'false', 6px, 4px);
|
||||
|
||||
49
src/sass/gnome-shell/_widgets-48-0.scss
Normal file
49
src/sass/gnome-shell/_widgets-48-0.scss
Normal file
@@ -0,0 +1,49 @@
|
||||
|
||||
@if $gnome_version == 'new' and $colortype == 'system' {
|
||||
$primary: -st-accent-color;
|
||||
$indicator: -st-accent-color;
|
||||
$inverse-indicator: -st-accent-color;
|
||||
}
|
||||
|
||||
@import 'common/a11y';
|
||||
@import 'common/base';
|
||||
@import 'common/buttons';
|
||||
@import 'common/corner-ripple';
|
||||
@import 'common/entries';
|
||||
@import 'common/hotplug';
|
||||
@import 'common/ibus-popup';
|
||||
@import 'common/keyboard';
|
||||
@import 'common/login-dialog';
|
||||
@import 'common/looking-glass';
|
||||
@import 'common/misc';
|
||||
@import 'common/network-dialog';
|
||||
@import 'common/osd';
|
||||
@import 'common/overview';
|
||||
@import 'common/panel';
|
||||
@import 'common/popovers';
|
||||
@import 'common/screen-shield';
|
||||
@import 'common/scrollbars';
|
||||
@import 'common/search-entry';
|
||||
@import 'common/switcher-popup';
|
||||
@import 'common/tiled-previews';
|
||||
@import 'common/workspace-switcher';
|
||||
@import 'widgets-46-0/app-grid';
|
||||
@import 'widgets-46-0/calendar';
|
||||
@import 'widgets-47-0/check-box';
|
||||
@import 'widgets-46-0/dash';
|
||||
@import 'widgets-47-0/dialogs';
|
||||
@import 'widgets-48-0/message-list';
|
||||
@import 'widgets-40-0/misc';
|
||||
@import 'widgets-48-0/notifications';
|
||||
@import 'widgets-40-0/overview';
|
||||
@import 'widgets-42-0/osd';
|
||||
@import 'widgets-40-0/panel';
|
||||
@import 'widgets-42-0/popovers';
|
||||
@import 'widgets-48-0/quick-settings';
|
||||
@import 'widgets-40-0/search-entry';
|
||||
@import 'widgets-46-0/search-results';
|
||||
@import 'widgets-42-0/screenshot';
|
||||
@import 'widgets-47-0/slider';
|
||||
@import 'widgets-47-0/switches';
|
||||
@import 'widgets-40-0/window-picker';
|
||||
@import 'widgets-40-0/workspace-thumbnails';
|
||||
@@ -56,8 +56,9 @@ $primary-text: $white;
|
||||
|
||||
.icon-button {
|
||||
border-radius: $circular_radius;
|
||||
padding: $base_padding;
|
||||
padding: $scaled_padding * 2;
|
||||
min-height: $scalable_icon_size;
|
||||
@extend %button;
|
||||
|
||||
StIcon {
|
||||
icon-size: $scalable_icon_size;
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
|
||||
border-radius: $circular_radius;
|
||||
margin: 2px;
|
||||
padding: 0.25em 0.6em;
|
||||
padding: 0.2em 0.4em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
color: white;
|
||||
background-color: rgba(black, 0.75);
|
||||
text-align: center;
|
||||
padding: 0.25em 0.4em;
|
||||
padding: 0.2em 0.4em;
|
||||
}
|
||||
|
||||
.notification-badge {
|
||||
@@ -29,7 +29,7 @@
|
||||
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
|
||||
border-radius: $circular-radius;
|
||||
margin: 2px 3px 5px;
|
||||
padding: 0.25em 0.4em;
|
||||
padding: 0.2em 0.4em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
.quick-toggle-icon { icon-size: $base_icon_size; }
|
||||
}
|
||||
|
||||
.quick-menu-toggle, .quick-toggle-has-menu {
|
||||
.quick-menu-toggle {
|
||||
& .quick-toggle {
|
||||
min-width: auto;
|
||||
max-width: auto;
|
||||
@@ -92,7 +92,7 @@
|
||||
&:rtl:last-child { border-radius: $base_radius; }
|
||||
}
|
||||
|
||||
.quick-toggle-arrow, .quick-toggle-menu-button {
|
||||
.quick-toggle-arrow {
|
||||
background-color: $button !important;
|
||||
padding: $base_padding $base_padding * 1.75;
|
||||
border: none !important;
|
||||
@@ -272,7 +272,7 @@
|
||||
icon-size: $base_icon_size * 2 !important;
|
||||
-st-icon-style: regular !important;
|
||||
}
|
||||
& .close-button {
|
||||
& .icon-button {
|
||||
@extend .icon-button;
|
||||
padding: $base_padding;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
%theme_dialogs {
|
||||
background-color: $popover;
|
||||
border-radius: $modal_radius + $base_padding / 2;
|
||||
border-radius: $modal_radius + $base_padding;
|
||||
|
||||
@if $rimless == 'false' {
|
||||
border: 1px solid $window-border;
|
||||
@@ -68,7 +68,7 @@
|
||||
// modal dialog
|
||||
.modal-dialog {
|
||||
color: $text-secondary;
|
||||
padding: $base_padding * 1.5;
|
||||
padding: $base_padding * 2;
|
||||
@extend %theme_dialogs;
|
||||
|
||||
.modal-dialog-content-box {
|
||||
|
||||
269
src/sass/gnome-shell/widgets-48-0/_message-list.scss
Normal file
269
src/sass/gnome-shell/widgets-48-0/_message-list.scss
Normal file
@@ -0,0 +1,269 @@
|
||||
/* Message List */
|
||||
// a.k.a. notifications in the menu
|
||||
|
||||
.message-list {
|
||||
width: if($compact == 'true', 25.5em, 29em);
|
||||
text-shadow: none;
|
||||
border: solid $border;
|
||||
padding: 0;
|
||||
|
||||
// padding and margins to account for scrollbar
|
||||
&:ltr { margin-left: 0; margin-right: $base_margin * 2; padding-right: 0; border-right-width: 0; }
|
||||
&:rtl { margin-right: 0; margin-left: $base_margin * 2; padding-left: 0; border-left-width: 0; }
|
||||
|
||||
.message-list-placeholder {
|
||||
@extend %title_2;
|
||||
spacing: $base_spacing * 2;
|
||||
color: $text-secondary-disabled;
|
||||
|
||||
// icon size and color
|
||||
> StIcon {
|
||||
icon-size: 96px; // non-em asset size
|
||||
margin-bottom: $base_margin * 3;
|
||||
-st-icon-style: symbolic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-view {
|
||||
// to account for scrollbar
|
||||
&:ltr { margin-right: $base_margin * 3; }
|
||||
&:rtl { margin-left: $base_margin * 3; }
|
||||
|
||||
-st-vfade-offset: 68px;
|
||||
|
||||
.message {
|
||||
margin-bottom: $base_padding * 2 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// do-not-disturb + clear button
|
||||
.message-list-controls {
|
||||
margin: ($base_margin * 2) ($base_margin * 4) 0;
|
||||
// NOTE: remove the padding if notification_bubble could remove margin for drop shadow
|
||||
padding: $base_padding;
|
||||
spacing: $base_padding;
|
||||
@extend %heading;
|
||||
|
||||
.dnd-button {
|
||||
// We need this because the focus outline isn't inset like for the buttons
|
||||
// so the dnd button would grow when it gets focus if we didn't change only
|
||||
// its color when focusing.
|
||||
border-width: 2px;
|
||||
border-color: transparent;
|
||||
border-radius: 32px;
|
||||
border-style: solid;
|
||||
|
||||
&:focus {
|
||||
@if $gnome_version == 'default' {
|
||||
border-color: transparentize($primary, 0.4);
|
||||
} @else {
|
||||
border-color: st-transparentize($primary, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// message notification group
|
||||
.message-notification-group {
|
||||
spacing: $base_padding * 2;
|
||||
|
||||
.message-group-header {
|
||||
padding: $base_padding;
|
||||
.message-group-title {
|
||||
@extend %title_2;
|
||||
margin: 0 $base_margin;
|
||||
}
|
||||
}
|
||||
|
||||
// close button
|
||||
.message-collapse-button {
|
||||
@extend .icon-button;
|
||||
padding: 4px !important;
|
||||
border: 4px transparent solid;
|
||||
}
|
||||
}
|
||||
|
||||
// message bubbles
|
||||
.message {
|
||||
padding: $base_padding;
|
||||
margin: $base_spacing / 2;
|
||||
border-radius: $window_radius;
|
||||
|
||||
.popup-menu & {
|
||||
border-radius: $base_radius;
|
||||
color: $text-secondary;
|
||||
background-color: mix($text, $base, 5%) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: mix($text, $base, 10%) !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: mix($text, $base, 15%) !important;
|
||||
}
|
||||
|
||||
.notification-button { border-radius: $base_radius / 2; }
|
||||
}
|
||||
|
||||
&:second-in-stack {
|
||||
background-color: mix($text, $base, 8%) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:lower-in-stack {
|
||||
background-color: mix($text, $base, 11%) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// subtract side padding to accommodate the close button's border
|
||||
&:ltr { padding-right: $base_padding; }
|
||||
&:rtl { padding-left: $base_padding; }
|
||||
|
||||
// message header
|
||||
.message-header {
|
||||
padding: 0 $scaled_padding;
|
||||
spacing: $base_padding;
|
||||
color: $text-disabled;
|
||||
|
||||
// remove side padding to accommodate the close button
|
||||
&:ltr { padding-right: 0; }
|
||||
&:rtl { padding-left: 0; }
|
||||
|
||||
// header source icon
|
||||
.message-source-icon {
|
||||
icon-size: $base_icon_size; // 16px
|
||||
-st-icon-style: symbolic;
|
||||
}
|
||||
|
||||
// box that contains the source icon, source name and timestamp of the message
|
||||
.message-header-content {
|
||||
spacing: $base_padding;
|
||||
min-height: to_em(24px);
|
||||
padding-bottom: $base_padding;
|
||||
|
||||
// header source title
|
||||
.message-source-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// Time label
|
||||
.event-time {
|
||||
@extend %caption;
|
||||
// Add bottom padding to align the app name with the time horizontally
|
||||
padding-bottom: to_em(1px);
|
||||
color: $text-disabled;
|
||||
|
||||
&:ltr { text-align: right; }
|
||||
&:rtl { text-align: left; }
|
||||
}
|
||||
}
|
||||
|
||||
// buttons in the message header
|
||||
.message-expand-button,
|
||||
.message-close-button {
|
||||
@extend .icon-button;
|
||||
color: $text;
|
||||
background-color: $fill;
|
||||
padding: 4px;
|
||||
border: none;
|
||||
|
||||
&, &:hover, &:active {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
&:hover, &:focus { background-color: $divider; }
|
||||
&:active, &:active:hover { background-color: $track; }
|
||||
&:insensitive { background-color: $fill;}
|
||||
}
|
||||
|
||||
.message-expand-button {
|
||||
padding: 4px;
|
||||
border: none;
|
||||
|
||||
&:ltr { margin-right: $base_padding; }
|
||||
&:rtl { margin-left: $base_padding; }
|
||||
}
|
||||
}
|
||||
|
||||
// container for message contents
|
||||
.message-box {
|
||||
padding: $base_padding;
|
||||
margin: $base_padding;
|
||||
margin-top: 0;
|
||||
spacing: $base_padding;
|
||||
|
||||
// icon of the message
|
||||
.message-icon {
|
||||
&:ltr { margin-right: $base_padding; }
|
||||
&:rtl { margin-left: $base_padding; }
|
||||
|
||||
// icon size and color
|
||||
icon-size: $base_icon_size * 3; // 48px
|
||||
-st-icon-style: symbolic;
|
||||
|
||||
&.message-themed-icon {
|
||||
border-radius: $circular_radius; // is circular
|
||||
icon-size: $base_icon_size;
|
||||
min-width: $base_icon_size * 3 - $base_padding * 2;
|
||||
min-height: $base_icon_size * 3 - $base_padding * 2;
|
||||
color: $text-disabled;
|
||||
background-color: $divider;
|
||||
padding: $base_padding;
|
||||
}
|
||||
}
|
||||
|
||||
// If the header isn't displayed we need more top margin
|
||||
&:first-child {
|
||||
margin-top: $base_padding * 2;
|
||||
}
|
||||
|
||||
// text of the message
|
||||
.message-content {
|
||||
spacing: $base_margin;
|
||||
|
||||
// message title
|
||||
.message-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// URLs in messages
|
||||
.url-highlighter {
|
||||
link-color: $link;
|
||||
}
|
||||
|
||||
.message-media-control {
|
||||
margin: 4px $base_padding;
|
||||
padding: $base_padding * 2;
|
||||
border-radius: $circular_radius;
|
||||
border: none;
|
||||
color: $text-secondary;
|
||||
|
||||
&:hover, &:focus { background-color: $divider; }
|
||||
&:active { background-color: $track; }
|
||||
|
||||
&:hover, &:focus, &:active {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
&:insensitive {
|
||||
color: $text-disabled;
|
||||
}
|
||||
|
||||
StIcon { icon-size: $base_icon_size; }
|
||||
}
|
||||
|
||||
.media-message {
|
||||
// album-art
|
||||
.message-icon {
|
||||
border-radius: $base_radius / 2 !important;
|
||||
padding: 0;
|
||||
|
||||
&.message-themed-icon {
|
||||
icon-size: $base_icon_size * 2 !important; // 32px
|
||||
}
|
||||
}
|
||||
}
|
||||
62
src/sass/gnome-shell/widgets-48-0/_notifications.scss
Normal file
62
src/sass/gnome-shell/widgets-48-0/_notifications.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
/* Notifications & Message Tray */
|
||||
|
||||
$notification_banner_height: 64px;
|
||||
$notification_banner_width: 34em;
|
||||
|
||||
// Banner notifications
|
||||
.notification-banner {
|
||||
min-height: $notification_banner_height;
|
||||
width: $notification_banner_width;
|
||||
margin: 12px 8px 8px;
|
||||
border-radius: $base_radius;
|
||||
color: $text-secondary;
|
||||
background-color: $popover;
|
||||
text-shadow: none;
|
||||
border-radius: $base_radius + $base_padding * 2;
|
||||
padding: $base_padding;
|
||||
|
||||
@if $rimless == 'false' and $variant == 'dark' {
|
||||
border: 1px solid $window-border;
|
||||
box-shadow: inset 0 0 0 1px highlight($popover);
|
||||
} @else {
|
||||
border: none;
|
||||
box-shadow: 0 3px 6px rgba(black, 0.25);
|
||||
}
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
color: $text;
|
||||
background-color: $popover;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-buttons-bin {
|
||||
border: none;
|
||||
spacing: 0;
|
||||
}
|
||||
|
||||
.notification-button {
|
||||
min-height: $item_size + $base_padding;
|
||||
padding: 0 $base_padding * 3;
|
||||
background-color: $fill;
|
||||
color: $text-secondary;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
border-radius: $base_radius;
|
||||
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
color: $text;
|
||||
box-shadow: inset 0 0 0 2px $divider;
|
||||
}
|
||||
|
||||
&:hover, &:focus:hover {
|
||||
background-color: $divider;
|
||||
color: $text;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $track;
|
||||
color: $text;
|
||||
}
|
||||
}
|
||||
290
src/sass/gnome-shell/widgets-48-0/_quick-settings.scss
Normal file
290
src/sass/gnome-shell/widgets-48-0/_quick-settings.scss
Normal file
@@ -0,0 +1,290 @@
|
||||
.quick-settings {
|
||||
padding: $base_padding * 3 !important;
|
||||
border-radius: $base_radius + $base_padding * 3 !important;
|
||||
margin-top: 4px !important;
|
||||
|
||||
.icon-button, .button {
|
||||
padding: $base_padding * 1.75;
|
||||
|
||||
> StIcon {
|
||||
icon-size: $base_icon_size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quick-settings-grid {
|
||||
spacing-rows: $base_padding * 2;
|
||||
spacing-columns: $base_padding * 2;
|
||||
}
|
||||
|
||||
.quick-toggle, .quick-toggle-has-menu {
|
||||
border-radius: $base_radius;
|
||||
min-width: 12em;
|
||||
max-width: 12em;
|
||||
min-height: $scalable_icon_size * 3; // use icon size so the button scales
|
||||
border: none;
|
||||
}
|
||||
|
||||
.quick-toggle {
|
||||
background-color: $button !important;
|
||||
|
||||
&:hover {
|
||||
background-color: $divider !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: rgba($text, 0.15) !important;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: $primary !important;
|
||||
color: $primary-text;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text;
|
||||
@if $gnome_version == 'default' {
|
||||
background-color: mix($text, $primary, 6%) !important;
|
||||
} @else {
|
||||
background-color: st-mix($text, $primary, 6%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $primary-text;
|
||||
@if $gnome_version == 'default' {
|
||||
background-color: mix($text, $primary, 15%) !important;
|
||||
} @else {
|
||||
background-color: st-mix($text, $primary, 15%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > StBoxLayout { spacing: $base_padding * 1.5; }
|
||||
|
||||
/* Move padding into the box; this is to allow menu arrows
|
||||
to extend to the border */
|
||||
&.button { padding: 0; }
|
||||
& > StBoxLayout { padding: 0 $base_padding * 2; }
|
||||
&:ltr > StBoxLayout { padding-left: $base_padding * 2.5; }
|
||||
&:rtl > StBoxLayout { padding-right: $base_padding * 2.5; }
|
||||
|
||||
.quick-toggle-title {
|
||||
@extend %heading;
|
||||
}
|
||||
|
||||
.quick-toggle-subtitle {
|
||||
@extend %caption;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.quick-toggle-icon { icon-size: $base_icon_size; }
|
||||
}
|
||||
|
||||
.quick-toggle-has-menu {
|
||||
& .quick-toggle {
|
||||
min-width: auto;
|
||||
max-width: auto;
|
||||
|
||||
&:ltr { border-radius: $base_radius 0 0 $base_radius; }
|
||||
&:ltr > StBoxLayout { padding-right: $scaled_padding * 1.5; }
|
||||
&:rtl { border-radius: 0 $base_radius $base_radius 0; }
|
||||
&:rtr > StBoxLayout { padding-left: $scaled_padding * 1.5; }
|
||||
|
||||
&:ltr:last-child { border-radius: $base_radius; }
|
||||
&:rtl:last-child { border-radius: $base_radius; }
|
||||
}
|
||||
|
||||
.quick-toggle-menu-button {
|
||||
background-color: $button !important;
|
||||
padding: $base_padding $base_padding * 1.75;
|
||||
border: none !important;
|
||||
color: $text;
|
||||
|
||||
&:hover {
|
||||
background-color: $divider !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: rgba($text, 0.15) !important;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: $primary !important;
|
||||
color: $primary-text;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text;
|
||||
@if $gnome_version == 'default' {
|
||||
background-color: mix($text, $primary, 6%) !important;
|
||||
} @else {
|
||||
background-color: st-mix($text, $primary, 6%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $primary-text;
|
||||
@if $gnome_version == 'default' {
|
||||
background-color: mix($text, $primary, 15%) !important;
|
||||
} @else {
|
||||
background-color: st-mix($text, $primary, 15%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:ltr { border-radius: 0 $base_radius $base_radius 0; }
|
||||
&:rtl { border-radius: $base_radius 0 0 $base_radius; }
|
||||
}
|
||||
|
||||
.quick-toggle-separator {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-slider {
|
||||
& > StBoxLayout { spacing: $base_padding; }
|
||||
|
||||
.icon-button {
|
||||
padding: $base_padding + 2px;
|
||||
}
|
||||
|
||||
.slider-bin {
|
||||
&:focus { @include button(focus); }
|
||||
padding: $base_padding;
|
||||
border-radius: $circular_radius;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-toggle-menu {
|
||||
background-color: $popover !important;
|
||||
color: $text !important;
|
||||
border-radius: $base_radius + $base_padding * 2 !important;
|
||||
padding: $scaled_padding * 2;
|
||||
margin: $base_padding * 2 $base_padding * 3 0;
|
||||
border: none;
|
||||
box-shadow: 0 1px 3px rgba(black, 0.15);
|
||||
|
||||
&:insensitive {
|
||||
// override insensitive style on submenu
|
||||
@include button(normal);
|
||||
}
|
||||
|
||||
.popup-menu-item {
|
||||
border-radius: $base_radius !important;
|
||||
|
||||
&:focus, &:hover, &.selected {
|
||||
color: $text !important;
|
||||
background-color: rgba($text, 0.1) !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $text !important;
|
||||
background-color: rgba($text, 0.2) !important;
|
||||
}
|
||||
|
||||
> StIcon {
|
||||
-st-icon-style: symbolic;
|
||||
icon-size: $base_icon_size;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-separator-menu-item {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
& .header {
|
||||
spacing-rows: $base_padding * 0.5;
|
||||
spacing-columns: $base_padding * 2;
|
||||
padding-bottom: $base_padding * 2;
|
||||
|
||||
& .icon {
|
||||
icon-size: $medium_icon_size; // a non-standard symbolic size but ok
|
||||
border-radius: $base_radius;
|
||||
padding: 1.5 * $base_padding;
|
||||
background-color: on($popover, divider) !important;
|
||||
|
||||
&.active {
|
||||
background-color: $primary !important;
|
||||
color: $primary-text;
|
||||
}
|
||||
}
|
||||
|
||||
& .title {
|
||||
@extend %title_3;
|
||||
}
|
||||
|
||||
& .subtitle {
|
||||
@extend %caption_heading;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quick-settings-system-item {
|
||||
& > StBoxLayout { spacing: $base_padding * 2; }
|
||||
|
||||
.icon-button {
|
||||
border-radius: $base_radius;
|
||||
|
||||
> StIcon {
|
||||
-st-icon-style: symbolic;
|
||||
icon-size: $base_icon_size;
|
||||
}
|
||||
}
|
||||
|
||||
& .power-item {
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
|
||||
&:insensitive {
|
||||
@include button(normal);
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nm-network-item {
|
||||
.wireless-secure-icon { icon-size: $scalable_icon_size * 0.5; } // half-size symbolic
|
||||
}
|
||||
|
||||
.bt-device-item {
|
||||
.popup-menu-icon { -st-icon-style: symbolic; }
|
||||
}
|
||||
|
||||
.bt-menu-placeholder.popup-menu-item {
|
||||
@extend %title_4;
|
||||
text-align: center;
|
||||
|
||||
padding: 2em 4em;
|
||||
}
|
||||
|
||||
.device-subtitle { color: $text-disabled; }
|
||||
|
||||
.keyboard-brightness-level {
|
||||
spacing: $base_padding;
|
||||
|
||||
.button:checked { @extend %default_button; }
|
||||
}
|
||||
|
||||
// background apps
|
||||
|
||||
.background-apps-quick-toggle {
|
||||
min-height: to_em(40px);
|
||||
background-color: transparent;
|
||||
|
||||
& StIcon { icon-size: $base_icon_size !important; }
|
||||
}
|
||||
|
||||
.background-app-item {
|
||||
& .title { @extend %heading; }
|
||||
& .subtitle { @extend %caption; }
|
||||
& .popup-menu-icon {
|
||||
icon-size: $medium_icon_size !important;
|
||||
-st-icon-style: regular !important;
|
||||
}
|
||||
& .icon-button {
|
||||
padding: $base_padding;
|
||||
}
|
||||
& .spinner {
|
||||
padding: $base_padding;
|
||||
}
|
||||
&.popup-inactive-menu-item { color: $text; }
|
||||
}
|
||||
Reference in New Issue
Block a user