mirror of
https://github.com/vinceliuice/Colloid-gtk-theme.git
synced 2025-11-18 11:32:46 -08:00
Fixed gnome-shell 46 issues
This commit is contained in:
vinceliuice
10
install.sh
10
install.sh
@@ -31,7 +31,9 @@ SIZE_VARIANTS=('' '-Compact')
|
||||
if [[ "$(command -v gnome-shell)" ]]; then
|
||||
gnome-shell --version
|
||||
SHELL_VERSION="$(gnome-shell --version | cut -d ' ' -f 3 | cut -d . -f -1)"
|
||||
if [[ "${SHELL_VERSION:-}" -ge "44" ]]; then
|
||||
if [[ "${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"
|
||||
@@ -40,9 +42,9 @@ if [[ "$(command -v gnome-shell)" ]]; then
|
||||
else
|
||||
GS_VERSION="3-28"
|
||||
fi
|
||||
else
|
||||
echo "'gnome-shell' not found, using styles for last gnome-shell version available."
|
||||
GS_VERSION="44-0"
|
||||
else
|
||||
echo "'gnome-shell' not found, using styles for last gnome-shell version available."
|
||||
GS_VERSION="46-0"
|
||||
fi
|
||||
|
||||
usage() {
|
||||
|
||||
@@ -12,52 +12,54 @@
|
||||
@if $t == normal {
|
||||
color: $tc;
|
||||
background-color: $bc;
|
||||
border: 2px solid transparent;
|
||||
box-shadow: none;
|
||||
border: 2px solid transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
@if $t == hover {
|
||||
color: $tc;
|
||||
border-color: $track;
|
||||
background-color: $bc;
|
||||
border: 2px solid $track !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
@if $t == focus {
|
||||
color: $tc;
|
||||
border-color: $fc;
|
||||
background-color: $bc;
|
||||
box-shadow: none;
|
||||
border: 2px solid $fc !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
@if $t == insensitive {
|
||||
background-color: $bc;
|
||||
color: rgba($tc, 0.35);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@if $t == flat-normal {
|
||||
background-color: $bc;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-shadow: inset 0 -1px rgba($tc, 0.15);
|
||||
border: none !important;
|
||||
box-shadow: inset 0 -1px rgba($tc, 0.15) !important;
|
||||
color: $tc;
|
||||
}
|
||||
|
||||
@if $t == flat-hover {
|
||||
border: none !important;
|
||||
background-color: $bc;
|
||||
box-shadow: inset 0 -1px rgba($tc, 0.35);
|
||||
box-shadow: inset 0 -1px rgba($tc, 0.35) !important;
|
||||
color: $tc;
|
||||
}
|
||||
|
||||
@if $t == flat-focus {
|
||||
border: none;
|
||||
border: none !important;
|
||||
background-color: $bc;
|
||||
box-shadow: inset 0 -2px $fc;
|
||||
box-shadow: inset 0 -2px $fc !important;
|
||||
color: $tc;
|
||||
}
|
||||
|
||||
@if $t == flat-insensitive {
|
||||
border: none;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
background-color: $bc;
|
||||
color: rgba($tc, 0.35);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,13 @@
|
||||
|
||||
@import '../tweaks-temp';
|
||||
|
||||
// Function to convert px values to em
|
||||
@function to_em($input, $base: 16px) {
|
||||
// multiplied and divided by 1000 to make up for round() shortcoming
|
||||
$em_value: ($input / $base) * 1.091 * 1000;
|
||||
@return round($em_value) / 1000 * 1em;
|
||||
}
|
||||
|
||||
$asset_suffix: if($variant == 'dark', '-dark', '');
|
||||
|
||||
// sizes
|
||||
@@ -12,6 +19,15 @@ $base_padding: if($compact == 'false', 6px, 4px);
|
||||
$base_margin: if($compact == 'false', 4px, 3px);
|
||||
$base_spacing: if($compact == 'false', 6px, 4px);
|
||||
|
||||
// Scaled values
|
||||
// Used in elements that follow text scaling factors
|
||||
$scaled_padding: to_em(6px); // same as $base_padding
|
||||
|
||||
// Used for symbolic icons that scale
|
||||
$scalable_icon_size: to_em(16px);
|
||||
$medium_scalable_icon_size: $scalable_icon_size * 1.5;
|
||||
$large_scalable_icon_size: $scalable_icon_size * 2;
|
||||
|
||||
// radiuses
|
||||
$circular_radius: 9999px;
|
||||
$base_radius: 6px;
|
||||
@@ -22,6 +38,8 @@ $modal_radius: $menu_radius;
|
||||
|
||||
// icons
|
||||
$base_icon_size: 16px;
|
||||
$medium_icon_size: $base_icon_size * 1.5; // 24px
|
||||
$large_icon_size: $base_icon_size * 2; // 32px
|
||||
|
||||
// durations
|
||||
$shorter_duration: 100ms;
|
||||
|
||||
42
src/sass/gnome-shell/_widgets-46-0.scss
Normal file
42
src/sass/gnome-shell/_widgets-46-0.scss
Normal file
@@ -0,0 +1,42 @@
|
||||
@import 'common/a11y';
|
||||
@import 'common/base';
|
||||
@import 'common/buttons';
|
||||
@import 'common/check-box';
|
||||
@import 'common/corner-ripple';
|
||||
@import 'common/dialogs';
|
||||
@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/slider';
|
||||
@import 'common/switcher-popup';
|
||||
@import 'common/switches';
|
||||
@import 'common/tiled-previews';
|
||||
@import 'common/workspace-switcher';
|
||||
@import 'widgets-46-0/app-grid';
|
||||
@import 'widgets-46-0/calendar';
|
||||
@import 'widgets-46-0/dash';
|
||||
@import 'widgets-46-0/message-list';
|
||||
@import 'widgets-40-0/misc';
|
||||
@import 'widgets-46-0/notifications';
|
||||
@import 'widgets-40-0/overview';
|
||||
@import 'widgets-42-0/osd';
|
||||
@import 'widgets-40-0/panel';
|
||||
@import 'widgets-42-0/popovers';
|
||||
@import 'widgets-46-0/quick-settings';
|
||||
@import 'widgets-40-0/search-entry';
|
||||
@import 'widgets-46-0/search-results';
|
||||
@import 'widgets-42-0/screenshot';
|
||||
@import 'widgets-40-0/window-picker';
|
||||
@import 'widgets-40-0/workspace-thumbnails';
|
||||
@@ -16,6 +16,14 @@
|
||||
&:insensitive { @include button(flat-insensitive); }
|
||||
}
|
||||
|
||||
%default_button {
|
||||
@include button(normal, $bc:$primary, $tc:on($primary),);
|
||||
&:focus { @include button(focus, $bc:$primary, $tc:on($primary)); }
|
||||
&:hover { @include button(hover, $bc:$primary, $tc:on($primary)); }
|
||||
&:insensitive { @include button(insensitive, $bc:$primary, $tc:on($primary)); }
|
||||
&:active { @include button(active, $bc:$primary, $tc:on($primary),); }
|
||||
}
|
||||
|
||||
.button {
|
||||
min-height: 20px;
|
||||
padding: $base_padding $base_padding * 2;
|
||||
@@ -26,6 +34,37 @@
|
||||
.popup-menu & {
|
||||
@extend %flat_button;
|
||||
}
|
||||
|
||||
// default style
|
||||
&.default {
|
||||
@extend %default_button;
|
||||
}
|
||||
|
||||
// flat style
|
||||
&.flat {
|
||||
@extend %flat_button;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
border-radius: $circular_radius;
|
||||
padding: $base_padding;
|
||||
min-height: $scalable_icon_size;
|
||||
|
||||
StIcon {
|
||||
icon-size: $scalable_icon_size;
|
||||
-st-icon-style: symbolic;
|
||||
}
|
||||
|
||||
// default style
|
||||
&.default {
|
||||
@extend %default_button;
|
||||
}
|
||||
|
||||
// flat style
|
||||
&.flat {
|
||||
@extend %flat_button;
|
||||
}
|
||||
}
|
||||
|
||||
// buttons on OSD elements
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
/* Entries */
|
||||
|
||||
StEntry, %entry {
|
||||
min-height: $item_size;
|
||||
padding: 2px $base_padding * 2;
|
||||
padding: $base_padding $base_padding * 2;
|
||||
margin: $base_margin / 2;
|
||||
border-width: 0;
|
||||
border-radius: $base_radius;
|
||||
|
||||
@@ -1,21 +1,29 @@
|
||||
// IBus Candidate Popup
|
||||
.candidate-popup-boxpointer {
|
||||
-arrow-border-radius: 2px;
|
||||
-arrow-border-radius: $menu_radius;
|
||||
-arrow-background-color: transparent;
|
||||
-arrow-border-width: 0;
|
||||
-arrow-border-color: transparent;
|
||||
-arrow-base: 64px;
|
||||
-arrow-rise: 12px;
|
||||
-arrow-rise: 3px;
|
||||
border-radius: $menu_radius;
|
||||
box-shadow: 0 3px 3px -2px rgba(black, if($variant == 'light', 0.1, 0.18));
|
||||
}
|
||||
|
||||
.candidate-popup-content {
|
||||
@extend %theme_dialogs;
|
||||
color: $text-secondary;
|
||||
box-shadow: 0 3px 6px 0 rgba(black, 0.35);
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
margin: ($base_padding / 2) 8px;
|
||||
margin: 0;
|
||||
padding: $base_padding;
|
||||
spacing: $base_padding;
|
||||
background-color: $popover;
|
||||
border-radius: $menu_radius;
|
||||
|
||||
@if $rimless == 'false' {
|
||||
border: 1px solid $window-border;
|
||||
box-shadow: inset 0 0 0 1px highlight($popover);
|
||||
} @else { border: none; }
|
||||
}
|
||||
|
||||
.candidate-index {
|
||||
|
||||
@@ -18,9 +18,9 @@
|
||||
color: $text-secondary !important;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
border-radius: $menu_radius;
|
||||
box-shadow: 0 3px 8px -5px rgba(black, 0.12);
|
||||
margin: $base_padding $base_padding 8px;
|
||||
border-radius: $base_radius + $base_padding * 3;
|
||||
box-shadow: 0 3px 5px -2px rgba(black, if($variant == 'light', 0.1, 0.18));
|
||||
margin: $base_padding 6px 8px;
|
||||
@include fontsize($font_size - 1);
|
||||
|
||||
.popup-menu-content {
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
// Search entry
|
||||
%search-entry, .search-entry {
|
||||
width: 320px;
|
||||
min-height: $item_size;
|
||||
padding: 0 $base_padding * 2;
|
||||
width: 24em;
|
||||
padding: $base_padding $base_padding * 2;
|
||||
color: $text-secondary;
|
||||
transition-duration: 150ms;
|
||||
border-radius: $base_radius;
|
||||
|
||||
209
src/sass/gnome-shell/widgets-46-0/_app-grid.scss
Normal file
209
src/sass/gnome-shell/widgets-46-0/_app-grid.scss
Normal file
@@ -0,0 +1,209 @@
|
||||
|
||||
/* App Icons */
|
||||
|
||||
$app_icon_size: 96px;
|
||||
$app_folder_size: 720px;
|
||||
|
||||
// app icons
|
||||
.icon-grid {
|
||||
row-spacing: 12px;
|
||||
column-spacing: 12px;
|
||||
max-row-spacing: 36px;
|
||||
max-column-spacing: 36px;
|
||||
page-padding-top: 24px;
|
||||
page-padding-bottom: 24px;
|
||||
page-padding-left: 18px;
|
||||
page-padding-right: 18px;
|
||||
}
|
||||
|
||||
.overview-tile {
|
||||
color: on($osd, secondary);
|
||||
border-radius: $base_radius * 2.5;
|
||||
padding: 6px;
|
||||
border: none;
|
||||
transition-duration: 100ms;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:selected {
|
||||
color: on($osd);
|
||||
background-color: on($osd, divider);
|
||||
border-image: none;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:checked, {
|
||||
color: on($osd);
|
||||
background-color: on($osd, track);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// App Folders
|
||||
.app-folder {
|
||||
background-color: on($osd, divider);
|
||||
border-radius: $base_radius * 2.5;
|
||||
color: on($osd, secondary);
|
||||
|
||||
.overview-icon {
|
||||
background-color: transparent;
|
||||
border-radius: $base_radius * 2.5;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: overlay($osd, active);
|
||||
color: on($osd);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: on($osd, track);
|
||||
color: on($osd);
|
||||
}
|
||||
}
|
||||
|
||||
// Running app indicator (also shown in dash)
|
||||
.app-grid-running-dot {
|
||||
width: $base_padding;
|
||||
height: 3px;
|
||||
border-radius: 2px;
|
||||
background-color: on($osd, track);
|
||||
margin-bottom: 0;
|
||||
|
||||
StWidget.focused & {
|
||||
width: $base_padding * 4;
|
||||
background-color: $inverse-indicator !important;
|
||||
}
|
||||
}
|
||||
|
||||
.app-folder-dialog-container {
|
||||
// pad the top with panel height so the folder doesn't overlap the panel on smaller resolutions
|
||||
padding-top: $item_size;
|
||||
}
|
||||
|
||||
// expanded folder
|
||||
.app-folder-dialog {
|
||||
width: $app_folder_size;
|
||||
height: $app_folder_size;
|
||||
border-radius: $menu_radius * 3;
|
||||
padding: $base_padding * 2;
|
||||
background-color: $osd;
|
||||
|
||||
@if $rimless == 'false' {
|
||||
border: 1px solid black;
|
||||
box-shadow: inset 0 0 0 1px highlight($osd);
|
||||
} @else {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.folder-name-container {
|
||||
padding: $base_padding * 4 $base_padding * 6;
|
||||
padding-bottom: 0;
|
||||
|
||||
.folder-name-label,
|
||||
.folder-name-entry {
|
||||
@extend %title_1;
|
||||
}
|
||||
|
||||
.folder-name-entry {
|
||||
width: 12em;
|
||||
border: none;
|
||||
caret-color: on($osd);
|
||||
|
||||
&:focus {
|
||||
background-color: on($osd, divider);
|
||||
color: on($osd);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
background-color: overlay($osd);
|
||||
color: on($osd, secondary);
|
||||
border: none;
|
||||
padding: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: $circular_radius;
|
||||
|
||||
> StIcon { icon-size: $base_icon_size; }
|
||||
|
||||
&:hover { background-color: overlay($osd, hover); }
|
||||
&:checked, &:active { background-color: $inverse-indicator; color: on($inverse-indicator); }
|
||||
}
|
||||
|
||||
.page-indicators {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
// Rename popup for app folders
|
||||
.rename-folder-popup {
|
||||
.rename-folder-popup-item {
|
||||
spacing: $base_padding;
|
||||
&:ltr, &:rtl { padding: 0 $base_padding * 2; }
|
||||
}
|
||||
}
|
||||
|
||||
// shutdown and other actions in the grid
|
||||
.system-action-icon {
|
||||
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); // FIXME: this should really have a highlight
|
||||
background-color: $osd;
|
||||
color: on($osd);
|
||||
border-radius: $circular_radius;
|
||||
icon-size: $app_icon_size * 0.5;
|
||||
}
|
||||
|
||||
// page navigation
|
||||
.page-navigation-hint {
|
||||
&.dnd {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
&.next:ltr,
|
||||
&.previous:rtl {
|
||||
background-gradient-start: rgba(255, 255, 255, 0.05);
|
||||
background-gradient-end: transparent;
|
||||
background-gradient-direction: horizontal;
|
||||
border-radius: $modal_radius * 1.5 0px 0px $modal_radius * 1.5;
|
||||
}
|
||||
|
||||
&.previous:ltr,
|
||||
&.next:rtl {
|
||||
background-gradient-start: transparent;
|
||||
background-gradient-end: rgba(255, 255, 255, 0.05);
|
||||
background-gradient-direction: horizontal;
|
||||
border-radius: 0px $modal_radius * 1.5 $modal_radius * 1.5 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-navigation-arrow {
|
||||
margin: $base_padding;
|
||||
padding: $base_padding * 3;
|
||||
width: $medium_icon_size;
|
||||
height: $medium_icon_size;
|
||||
border-radius: $circular_radius;
|
||||
transition-duration: 100ms;
|
||||
color: on($osd, secondary);
|
||||
background-color: transparent;
|
||||
|
||||
> StIcon { color: on($osd); }
|
||||
|
||||
&:insensitive {
|
||||
background-color: transparent;
|
||||
color: on($osd, disabled);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: on($osd, divider);
|
||||
color: on($osd);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: on($osd, track);
|
||||
color: on($osd);
|
||||
}
|
||||
}
|
||||
383
src/sass/gnome-shell/widgets-46-0/_calendar.scss
Normal file
383
src/sass/gnome-shell/widgets-46-0/_calendar.scss
Normal file
@@ -0,0 +1,383 @@
|
||||
/* Date/Time Menu */
|
||||
|
||||
%popover_bubble {
|
||||
color: $text-secondary;
|
||||
background-color: $fill;
|
||||
border-radius: $base_radius;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: $text;
|
||||
background-color: overlay($base, hover);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $text;
|
||||
background-color: overlay($base, active);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// overall menu
|
||||
#calendarArea {
|
||||
padding: $base_padding / 2;
|
||||
}
|
||||
|
||||
// Calendar menu side column
|
||||
.datemenu-calendar-column {
|
||||
spacing: $base_spacing;
|
||||
border: none;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
|
||||
&:ltr { margin-right: 0; border-left-width: 0; }
|
||||
&:rtl { margin-left: 0; border-right-width: 0; }
|
||||
|
||||
.datemenu-displays-section { padding-bottom: 0; }
|
||||
|
||||
.datemenu-displays-box {
|
||||
spacing: $base_spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.world-clocks-header,
|
||||
.weather-header,
|
||||
.events-section-title {
|
||||
color: $text-secondary;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.datemenu-today-button,
|
||||
.datemenu-displays-box {
|
||||
margin: $base_margin $base_spacing;
|
||||
}
|
||||
|
||||
/* today button (the date) */
|
||||
.datemenu-today-button {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
padding: $base_padding $base_padding * 2;
|
||||
margin: 0;
|
||||
text-shadow: none;
|
||||
color: $text-secondary;
|
||||
border-radius: $base_radius;
|
||||
margin: $base_margin;
|
||||
|
||||
&:ltr { margin-left: $base_margin; }
|
||||
&:rtl { margin-right: $base_margin; }
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: overlay($base, hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: overlay($base, active);
|
||||
}
|
||||
|
||||
// weekday label
|
||||
.day-label {
|
||||
@include fontsize($font_size + 1);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// date label
|
||||
.date-label {
|
||||
@include fontsize($font_size + 7);
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
/* Calendar */
|
||||
.calendar {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
padding: $base_padding / 2 !important;
|
||||
margin: 0 !important;
|
||||
text-shadow: none;
|
||||
border-radius: $menu_radius;
|
||||
color: $text-secondary;
|
||||
|
||||
// month
|
||||
.calendar-month-label {
|
||||
@extend %heading;
|
||||
padding: $base_padding 0;
|
||||
color: $text-secondary !important;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// prev/next month icons
|
||||
.calendar-change-month-back,
|
||||
.calendar-change-month-forward {
|
||||
padding: 0 !important;
|
||||
margin: ($base_padding / 2) 0 !important;
|
||||
|
||||
StIcon {
|
||||
icon-size: $base_icon_size;
|
||||
}
|
||||
}
|
||||
|
||||
.pager-button {
|
||||
width: $item_size !important;
|
||||
height: $item_size !important;
|
||||
margin: 2px !important;
|
||||
border-radius: $circular_radius;
|
||||
background-color: transparent;
|
||||
color: $text;
|
||||
box-shadow: none !important;
|
||||
|
||||
&:hover, &:focus { background-color: $divider; box-shadow: none !important; }
|
||||
&:active { background-color: $track; box-shadow: none !important; }
|
||||
}
|
||||
|
||||
.calendar-day {
|
||||
@include fontsize($font_size - 1);
|
||||
text-align: center;
|
||||
width: $item_size + 2px !important;
|
||||
height: $item_size + 2px !important;
|
||||
padding: 0 !important;
|
||||
margin: 2px !important;
|
||||
border-radius: $circular_radius;
|
||||
color: $text-secondary !important;
|
||||
border: none;
|
||||
font-feature-settings: "tnum";
|
||||
background-color: transparent;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: $divider;
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
&:active, &:selected {
|
||||
color: $text !important;
|
||||
background-color: $track;
|
||||
border-color: transparent !important; //avoid jumparound due to today
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
&.calendar-weekday {}
|
||||
|
||||
&.calendar-weekend {
|
||||
color: $text-disabled !important;
|
||||
// font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-day { //border collapse hack - see calendar.js
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.calendar-day-top {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.calendar-day-left {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.calendar-nonwork-day {
|
||||
color: $text;
|
||||
// font-weight: normal;
|
||||
}
|
||||
|
||||
// Today
|
||||
.calendar-today {
|
||||
font-weight: bold;
|
||||
color: $text-secondary !important;
|
||||
background-color: overlay($base);
|
||||
border: none;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: overlay($base, hover);
|
||||
color: $text !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($primary, 5%);
|
||||
color: on($primary) !important;
|
||||
}
|
||||
|
||||
&:selected {
|
||||
background-color: $primary;
|
||||
color: on($primary) !important;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: lighten($primary, 8%);
|
||||
color: on($primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-day-with-events {
|
||||
color: $text-secondary;
|
||||
background-image: url("assets/calendar-today.svg");
|
||||
|
||||
&.calendar-work-day {
|
||||
color: $text-secondary;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-other-month {
|
||||
color: $text-secondary-disabled !important;
|
||||
font-weight: normal;
|
||||
|
||||
&.calendar-weekend {
|
||||
color: $text-secondary-disabled !important;
|
||||
}
|
||||
}
|
||||
|
||||
// day of week heading
|
||||
.calendar-day-heading {
|
||||
@extend %numeric;
|
||||
@extend %smaller;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin: $base_margin;
|
||||
padding: $base_padding * 0.5 $base_padding;
|
||||
border-radius: $base_radius;
|
||||
background-color: transparent;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.calendar-week-number {
|
||||
width: $item_size - 6px;
|
||||
height: $item_size - 12px;
|
||||
margin: 6px $base_margin / 2 !important;
|
||||
padding: 0;
|
||||
border-radius: $base_radius;
|
||||
background-color: $fill;
|
||||
color: $text-disabled;
|
||||
@extend %smaller;
|
||||
font-weight: bold;
|
||||
font-feature-settings: "tnum";
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.world-clocks-button,
|
||||
.weather-button,
|
||||
.events-button {
|
||||
@extend %popover_bubble;
|
||||
padding: $base_padding * 2 !important;
|
||||
margin: $base_margin / 2 0 !important;
|
||||
}
|
||||
|
||||
// Events
|
||||
.events-button {
|
||||
.events-box {
|
||||
spacing: $base_spacing;
|
||||
}
|
||||
|
||||
.events-list {
|
||||
spacing: 2 * $base_spacing;
|
||||
text-shadow: none;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.events-title {
|
||||
font-weight: bold;
|
||||
text-shadow: none;
|
||||
color: $text-disabled;
|
||||
}
|
||||
|
||||
.event-time {
|
||||
font-feature-settings: "tnum";
|
||||
@include fontsize($font_size - 1);
|
||||
color: $text-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
// World Clock
|
||||
.world-clocks-button {
|
||||
.world-clocks-grid {
|
||||
spacing-rows: $base_padding;
|
||||
spacing-columns: $base_padding * 2;
|
||||
}
|
||||
|
||||
// title
|
||||
.world-clocks-header {
|
||||
@extend %heading;
|
||||
color: $text-disabled;
|
||||
}
|
||||
|
||||
.world-clocks-city {
|
||||
font-weight: bold;
|
||||
@include fontsize($font_size);
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.world-clocks-time {
|
||||
font-feature-settings: "tnum";
|
||||
@include fontsize($font_size);
|
||||
color: $text;
|
||||
|
||||
&:ltr { text-align: right; }
|
||||
&:rtl { text-align: left; }
|
||||
}
|
||||
|
||||
.world-clocks-timezone {
|
||||
font-feature-settings: "tnum";
|
||||
@include fontsize($font_size - 1);
|
||||
color: $text-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.world-clocks-grid,
|
||||
.weather-grid {
|
||||
spacing-rows: 0.4em;
|
||||
spacing-columns: 0.8em;
|
||||
}
|
||||
|
||||
// Weather
|
||||
.weather-button {
|
||||
.weather-box {
|
||||
spacing: $base_spacing + $base_margin;
|
||||
}
|
||||
|
||||
.weather-header-box {
|
||||
spacing: $base_spacing;
|
||||
}
|
||||
|
||||
.weather-header {
|
||||
font-weight: bold;
|
||||
color: $text-secondary;
|
||||
|
||||
&.location {
|
||||
font-weight: normal;
|
||||
@include fontsize($font_size - 1);
|
||||
color: $text-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.weather-grid {
|
||||
spacing-rows: $base_spacing;
|
||||
spacing-columns: $base_spacing * 2;
|
||||
}
|
||||
|
||||
.weather-forecast-time {
|
||||
font-feature-settings: "tnum";
|
||||
@include fontsize($font_size - 2);
|
||||
font-weight: normal;
|
||||
padding-top: 0.2em;
|
||||
padding-bottom: 0.4em;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.weather-forecast-icon {
|
||||
icon-size: 32px;
|
||||
}
|
||||
|
||||
.weather-forecast-temp {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
102
src/sass/gnome-shell/widgets-46-0/_dash.scss
Normal file
102
src/sass/gnome-shell/widgets-46-0/_dash.scss
Normal file
@@ -0,0 +1,102 @@
|
||||
/* Dash */
|
||||
|
||||
// uses system colors
|
||||
$dash_background_color: on($osd, divider);
|
||||
|
||||
$dash_placeholder_size: 32px;
|
||||
$dash_padding: $base_padding * 2;
|
||||
$dash_edge_offset: $base_margin * 3;
|
||||
$dash_border_radius: $modal_radius + $dash_padding;
|
||||
$dash_spacing: $base_margin * 0.5;
|
||||
|
||||
// container for the dash
|
||||
#dash {
|
||||
margin-top: $dash_edge_offset;
|
||||
|
||||
// background behind item container
|
||||
.dash-background {
|
||||
background-color: $dash_background_color;
|
||||
border-radius: $dash_border_radius;
|
||||
padding-top: $dash_padding;
|
||||
padding-bottom: $dash_padding;
|
||||
padding-left: $dash_padding - $dash_spacing; // subtract the margins added to .overview-tile below
|
||||
padding-right: $dash_padding - $dash_spacing;
|
||||
box-shadow: inset 0 1px rgba(white, 0.08);
|
||||
}
|
||||
|
||||
// items on the dash
|
||||
.dash-item-container {
|
||||
.placeholder {
|
||||
// background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
|
||||
background-image: none;
|
||||
background-size: contain;
|
||||
height: $dash_placeholder_size;
|
||||
}
|
||||
|
||||
.empty-dash-drop-target {
|
||||
width: $dash_placeholder_size;
|
||||
height: $dash_placeholder_size;
|
||||
}
|
||||
|
||||
// IMPORTANT: items on the dash need to extend to the edge to be adequate click targets
|
||||
// as such the %tile style is overriden and button styles are applied to the child class .overview-icon
|
||||
.show-apps,
|
||||
.overview-tile {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
margin: 0 $dash_spacing;
|
||||
padding-bottom: $dash_edge_offset; // align with other items
|
||||
|
||||
.overview-icon {
|
||||
border-radius: $modal_radius;
|
||||
padding: $base_padding;
|
||||
spacing: $base_padding;
|
||||
text-align: center;
|
||||
transition-duration: 100ms;
|
||||
background-color: transparent;
|
||||
color: on($osd);
|
||||
}
|
||||
|
||||
&:focus .overview-icon { background-color: on($osd, divider); }
|
||||
&:hover .overview-icon { background-color: on($osd, divider); }
|
||||
&:active .overview-icon { background-color: on($osd, track); }
|
||||
&:checked .overview-icon { background-color: on($osd, divider); }
|
||||
}
|
||||
|
||||
// running app dot
|
||||
.app-grid-running-dot {
|
||||
// manually position the dot within the dash item
|
||||
margin-bottom: $dash_padding + $dash_edge_offset - 6px; // 3px = size of dot (5px) subtracted from its translationY from appDisplay.js
|
||||
}
|
||||
}
|
||||
|
||||
// separator between pinned and running apps
|
||||
.dash-separator {
|
||||
width: 1px;
|
||||
margin-left: $base_margin;
|
||||
margin-right: $base_margin;
|
||||
background-color: on($osd, divider);
|
||||
}
|
||||
|
||||
// make sure all dash components have same margin from screen edge
|
||||
.dash-separator,
|
||||
.dash-background {
|
||||
margin-bottom: $dash_edge_offset;
|
||||
}
|
||||
}
|
||||
|
||||
// OSD Tooltip
|
||||
.dash-label {
|
||||
color: rgba(white, 0.9);
|
||||
background-color: rgba(black, 0.75);
|
||||
border-radius: $circular_radius;
|
||||
padding: $base_padding $base_padding * 2;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
text-align: center;
|
||||
-y-offset: $base_margin * 3; // distance from the dash edge
|
||||
-x-offset: 8px;
|
||||
}
|
||||
241
src/sass/gnome-shell/widgets-46-0/_message-list.scss
Normal file
241
src/sass/gnome-shell/widgets-46-0/_message-list.scss
Normal file
@@ -0,0 +1,241 @@
|
||||
/* 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: $base_padding + $base_margin; border-right-width: 0; }
|
||||
&:rtl { margin-right: 0; margin-left: $base_margin * 2; padding-left: $base_padding + $base_margin; 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; // 48px
|
||||
margin-bottom: $base_margin * 3;
|
||||
-st-icon-style: symbolic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-list-sections {
|
||||
margin: 0; // to account for scrollbar
|
||||
padding-bottom: $base_padding;
|
||||
|
||||
// to account for scrollbar
|
||||
&:ltr { margin-right: 0; }
|
||||
&:rtl { margin-left: 0; }
|
||||
}
|
||||
|
||||
.message-list-section,
|
||||
.message-list-sections,
|
||||
.message-list-section-list {
|
||||
spacing: $base_spacing;
|
||||
}
|
||||
|
||||
// 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 {
|
||||
border-color: transparentize($primary, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// message bubbles
|
||||
.message {
|
||||
padding: 0;
|
||||
margin: $base_spacing / 2;
|
||||
border-radius: $window_radius;
|
||||
|
||||
.popup-menu & {
|
||||
border-radius: $base_radius;
|
||||
@extend %popover_bubble;
|
||||
|
||||
.notification-button {
|
||||
&:first-child:ltr {
|
||||
border-radius: 0 0 0 $base_radius;
|
||||
}
|
||||
|
||||
&:last-child:ltr {
|
||||
border-radius: 0 0 $base_radius;
|
||||
}
|
||||
|
||||
&:first-child:rtl {
|
||||
border-radius: 0 0 $base_radius;
|
||||
}
|
||||
|
||||
&:last-child:rtl {
|
||||
border-radius: 0 0 0 $base_radius;
|
||||
}
|
||||
|
||||
&:first-child:last-child {
|
||||
border-radius: 0 0 $base_radius $base_radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// message header
|
||||
.message-header {
|
||||
padding: 0 $scaled_padding;
|
||||
margin: $base_padding;
|
||||
margin-bottom: 0;
|
||||
spacing: $base_padding;
|
||||
color: $text-disabled;
|
||||
|
||||
// header source icon
|
||||
.message-source-icon {
|
||||
icon-size: $scalable_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;
|
||||
min-height: $base_icon_size * 3;
|
||||
color: $text-disabled;
|
||||
background-color: $divider;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
|
||||
&.message-themed-icon {
|
||||
icon-size: $large_icon_size !important; // 32px
|
||||
}
|
||||
}
|
||||
}
|
||||
87
src/sass/gnome-shell/widgets-46-0/_notifications.scss
Normal file
87
src/sass/gnome-shell/widgets-46-0/_notifications.scss
Normal file
@@ -0,0 +1,87 @@
|
||||
/* 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: $menu_radius;
|
||||
|
||||
@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 {
|
||||
background-color: transparent;
|
||||
padding-top: 0;
|
||||
border: none;
|
||||
border-top: 1px solid $border;
|
||||
spacing: 0;
|
||||
}
|
||||
|
||||
.notification-button {
|
||||
min-height: $item_size + $base_padding * 2;
|
||||
padding: 0 $base_padding * 3;
|
||||
background-color: transparent;
|
||||
color: $text-secondary;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
||||
&:first-child:ltr {
|
||||
border-radius: 0 0 0 $menu_radius;
|
||||
}
|
||||
|
||||
&:last-child:ltr {
|
||||
border-radius: 0 0 $menu_radius;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
&:first-child:rtl {
|
||||
border-radius: 0 0 $menu_radius;
|
||||
}
|
||||
|
||||
&:last-child:rtl {
|
||||
border-radius: 0 0 0 $menu_radius;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
&:first-child:last-child {
|
||||
border-radius: 0 0 $menu_radius $menu_radius;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
265
src/sass/gnome-shell/widgets-46-0/_quick-settings.scss
Normal file
265
src/sass/gnome-shell/widgets-46-0/_quick-settings.scss
Normal file
@@ -0,0 +1,265 @@
|
||||
.quick-settings {
|
||||
padding: $base_padding * 3 !important;
|
||||
border-radius: $base_radius + $base_padding * 3 !important;
|
||||
margin-top: $base_padding !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-menu-toggle {
|
||||
border-radius: $base_radius;
|
||||
min-width: 12em;
|
||||
max-width: 12em;
|
||||
min-height: 44px;
|
||||
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: on($primary);
|
||||
|
||||
&:hover {
|
||||
background-color: mix($text, $primary, 6%) !important;
|
||||
color: on($primary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: mix($text, $primary, 15%) !important;
|
||||
color: on($primary);
|
||||
}
|
||||
}
|
||||
|
||||
& > 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 $base_padding * 2; }
|
||||
&:ltr > StBoxLayout { padding-left: $base_padding * 2.5; }
|
||||
&:rtl > StBoxLayout { padding-right: $base_padding * 2.5; }
|
||||
|
||||
.quick-toggle-title { font-weight: bold; }
|
||||
|
||||
& StBoxLayout > .quick-toggle-subtitle {
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.quick-toggle-icon { icon-size: $base_icon_size; }
|
||||
}
|
||||
|
||||
.quick-menu-toggle {
|
||||
& .quick-toggle {
|
||||
min-width: auto;
|
||||
max-width: auto;
|
||||
|
||||
&:ltr { border-radius: $base_radius 0 0 $base_radius; }
|
||||
&:ltr > StBoxLayout { padding-right: $base_padding * 1.5; }
|
||||
&:rtl { border-radius: 0 $base_radius $base_radius 0; }
|
||||
&:rtr > StBoxLayout { padding-left: $base_padding * 1.5; }
|
||||
|
||||
&:ltr:last-child { border-radius: $base_radius; }
|
||||
&:rtl:last-child { border-radius: $base_radius; }
|
||||
}
|
||||
|
||||
.quick-toggle-arrow {
|
||||
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: on($primary);
|
||||
|
||||
&:hover {
|
||||
background-color: mix($text, $primary, 6%) !important;
|
||||
color: on($primary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: mix($text, $primary, 15%) !important;
|
||||
color: on($primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:ltr { border-radius: 0 $base_radius $base_radius 0; }
|
||||
&:rtl { border-radius: $base_radius 0 0 $base_radius; }
|
||||
}
|
||||
}
|
||||
|
||||
.quick-slider {
|
||||
& > StBoxLayout { spacing: $base_padding; }
|
||||
|
||||
.slider-bin {
|
||||
&:focus { @include button(focus); }
|
||||
min-height: 16px; // slider size
|
||||
padding: $base_padding;
|
||||
border-radius: $circular_radius;
|
||||
}
|
||||
|
||||
.quick-toggle-icon {
|
||||
icon-size: $base_icon_size;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
background-color: transparent;
|
||||
color: $text !important;
|
||||
padding: $base_padding * 1.5;
|
||||
|
||||
&:hover {
|
||||
background-color: $fill;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $divider;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quick-toggle-menu {
|
||||
background-color: $popover !important;
|
||||
color: $text !important;
|
||||
border-radius: $base_radius + $base_padding * 2 !important;
|
||||
padding: $base_padding * 2;
|
||||
margin: $base_padding * 2 $base_padding * 3 0;
|
||||
|
||||
.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; }
|
||||
}
|
||||
|
||||
& .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: $base_radius;
|
||||
padding: 1.5 * $base_padding;
|
||||
background-color: on($popover, divider) !important;
|
||||
|
||||
&.active {
|
||||
background-color: $primary !important;
|
||||
color: on($primary);
|
||||
}
|
||||
}
|
||||
|
||||
& .title {
|
||||
@extend %title_3;
|
||||
}
|
||||
|
||||
& .subtitle {
|
||||
@extend %caption_heading;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quick-settings-system-item {
|
||||
& > StBoxLayout { spacing: 2 * $base_padding; }
|
||||
|
||||
.icon-button {
|
||||
background-color: $button;
|
||||
color: $text;
|
||||
border-radius: $base_radius;
|
||||
@extend %button;
|
||||
|
||||
> 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: 0.5 * $base_icon_size; }
|
||||
}
|
||||
|
||||
.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; }
|
||||
|
||||
// background apps
|
||||
|
||||
.background-apps-quick-toggle {
|
||||
min-height: 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: $base_icon_size * 2 !important;
|
||||
-st-icon-style: regular !important;
|
||||
}
|
||||
& .close-button {
|
||||
@extend .icon-button;
|
||||
padding: $base_padding;
|
||||
}
|
||||
|
||||
&.popup-inactive-menu-item { color: $text; }
|
||||
}
|
||||
113
src/sass/gnome-shell/widgets-46-0/_search-results.scss
Normal file
113
src/sass/gnome-shell/widgets-46-0/_search-results.scss
Normal file
@@ -0,0 +1,113 @@
|
||||
/* Search */
|
||||
|
||||
%search-section-content-item {
|
||||
border-radius: $base_radius;
|
||||
padding: $base_padding;
|
||||
transition-duration: 100ms;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:selected {
|
||||
background-color: overlay($osd, hover);
|
||||
transition-duration: 0;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:checked {
|
||||
background-color: overlay($osd, active);
|
||||
}
|
||||
}
|
||||
|
||||
// search overview container
|
||||
#searchResults {
|
||||
margin: 0 $base_margin;
|
||||
}
|
||||
|
||||
#searchResultsContent {
|
||||
max-width: 1044px;
|
||||
}
|
||||
|
||||
// search results sections "the boxes"
|
||||
.search-section {
|
||||
// This should be equal to #searchResultsContent spacing
|
||||
spacing: $base_padding * 3;
|
||||
|
||||
// separator (unstyled)
|
||||
.search-section-separator {
|
||||
height: $base_margin * 2; // use it as a spacer
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// content
|
||||
.search-section-content { // This is the space between the provider icon and the results container
|
||||
border-radius: $modal_radius * 1.5;
|
||||
padding: $base_padding * 2;
|
||||
margin:0 $base_margin * 3;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
text-shadow: none;
|
||||
color: on($osd, secondary);
|
||||
background-color: on($osd, divider);
|
||||
}
|
||||
|
||||
// "no results" text
|
||||
.search-statustext {
|
||||
@extend %title_1;
|
||||
color: on($osd, disabled);
|
||||
}
|
||||
|
||||
.grid-search-results {
|
||||
spacing: $base_padding * 5;
|
||||
margin:0 $base_margin * 3;
|
||||
}
|
||||
|
||||
// Search results with icons
|
||||
.grid-search-result {
|
||||
@extend .overview-tile;
|
||||
}
|
||||
|
||||
// search result provider
|
||||
.search-provider-icon {
|
||||
@extend %search-section-content-item;
|
||||
|
||||
&:ltr { margin-right: $base_margin; }
|
||||
&:rtl { margin-left: $base_margin; }
|
||||
|
||||
// content
|
||||
.list-search-provider-content {
|
||||
spacing: $base_spacing * 2;
|
||||
|
||||
// provider labels
|
||||
.list-search-provider-details {
|
||||
width: 120px;
|
||||
color: on($osd, secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// search results list
|
||||
.list-search-results {
|
||||
spacing: $base_spacing;
|
||||
}
|
||||
|
||||
// search result listitem
|
||||
.list-search-result {
|
||||
@extend %search-section-content-item;
|
||||
|
||||
// content
|
||||
.list-search-result-content {
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
// list item title (with leading icon)
|
||||
.list-search-result-title {
|
||||
spacing: $base_spacing * 2;
|
||||
}
|
||||
|
||||
// list item description
|
||||
.list-search-result-description { color: on($osd, secondary); }
|
||||
}
|
||||
@@ -812,34 +812,98 @@ image.raven-mpris {
|
||||
}
|
||||
|
||||
// Notifications
|
||||
|
||||
.drop-shadow {
|
||||
margin: 12px;
|
||||
padding: $space-size;
|
||||
border-radius: $window-radius;
|
||||
background-color: $surface;
|
||||
|
||||
@if $rimless == 'true' {
|
||||
box-shadow: $shadow-z6, inset 0 1px highlight($surface);
|
||||
} @else {
|
||||
box-shadow: $shadow-z6, inset 0 0 0 1px highlight($surface), 0 0 0 1px $window-border;
|
||||
}
|
||||
}
|
||||
|
||||
.budgie-notification-window {
|
||||
background-color: transparent;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.budgie-notification {
|
||||
.notification-title { font-size: 120%; }
|
||||
.notification-title {
|
||||
font-size: 110%;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.notification-body { color: $text-secondary; }
|
||||
}
|
||||
|
||||
// On Screen Display in Budgie
|
||||
.budgie-osd-window {
|
||||
@extend .budgie-notification-window;
|
||||
background: none;
|
||||
|
||||
> box {
|
||||
border-radius: $window-radius;
|
||||
padding: $space-size / 2;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Internal part of the OSD
|
||||
.budgie-osd {
|
||||
.budgie-osd-text { font-size: 120%; }
|
||||
color: $text;
|
||||
.budgie-osd-text { font-size: 110%; }
|
||||
}
|
||||
|
||||
// Alt+tab switcher in Budgie
|
||||
.budgie-switcher-window {
|
||||
@extend .budgie-notification-window;
|
||||
|
||||
.drop-shadow {
|
||||
border-radius: $window-radius;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
> box {
|
||||
padding: $space-size;
|
||||
border-radius: $window-radius;
|
||||
}
|
||||
|
||||
// Flowbox
|
||||
flowbox {
|
||||
color: $text;
|
||||
padding: 0;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
flowboxchild {
|
||||
padding: $space-size;
|
||||
margin: 0;
|
||||
color: $text;
|
||||
border-radius: $corner-radius;
|
||||
transition: background-color 75ms ease-out;
|
||||
|
||||
&:hover {
|
||||
color: $text;
|
||||
background-color: $overlay-hover;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $text;
|
||||
background-color: $overlay-active;
|
||||
}
|
||||
|
||||
&:selected {
|
||||
color: $text;
|
||||
background-color: $overlay-checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Internal part of the Switcher
|
||||
.budgie-switcher {
|
||||
@extend .budgie-notification-window;
|
||||
@extend .budgie-notification;
|
||||
}
|
||||
|
||||
.budgie-panel {
|
||||
@@ -848,19 +912,6 @@ image.raven-mpris {
|
||||
}
|
||||
}
|
||||
|
||||
.drop-shadow {
|
||||
margin: 36px;
|
||||
padding: $space-size;
|
||||
border-radius: $window-radius;
|
||||
background-color: $surface;
|
||||
|
||||
@if $rimless == 'true' {
|
||||
box-shadow: $shadow-z16, inset 0 1px highlight($surface);
|
||||
} @else {
|
||||
box-shadow: $shadow-z16, inset 0 0 0 1px highlight($surface), 0 0 0 1px $window-border;
|
||||
}
|
||||
}
|
||||
|
||||
%budgie_dialog {
|
||||
background-color: $surface;
|
||||
border: none;
|
||||
@@ -903,7 +954,7 @@ image.raven-mpris {
|
||||
|
||||
label:not(:last-child),
|
||||
.dialog-title {
|
||||
font-size: 120%;
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
buttonbox.linked > button {
|
||||
@@ -973,7 +1024,7 @@ image.raven-mpris {
|
||||
// Run Dialog
|
||||
.budgie-run-dialog {
|
||||
entry.search {
|
||||
font-size: 120%;
|
||||
font-size: 110%;
|
||||
padding: $space-size 8px + $space-size;
|
||||
border-image: none;
|
||||
box-shadow: none;
|
||||
|
||||
Reference in New Issue
Block a user