[gnome-shell/wip/snwh/more-papercut-fixes: 4/4] theme: Stylesheet papercuts and other visual fixes
- From: Sam Hewitt <snwh src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell/wip/snwh/more-papercut-fixes: 4/4] theme: Stylesheet papercuts and other visual fixes
- Date: Sat, 12 Feb 2022 14:41:58 +0000 (UTC)
commit 22ffa3755416bb7db5bb62ba5b235a0e2f63754a
Author: Sam Hewitt <sam snwh org>
Date: Mon Feb 7 14:52:40 2022 -0330
theme: Stylesheet papercuts and other visual fixes
- remove tiled preview corners; merge with misc.scss
- sync general label styles from libadwaita
- use variables in ibus css
- remove redundant spacing variable as its equal to padding
- use more global styles in screenshot css
- tidy up entry styles
- cleanup the networks dialog stylesheet
- make colours less dark
- cleanup the popover stylesheet
- cleanup the mixins for tiles and overview icons
- adjust the button style definitions on checked style
- add osd button definitions
data/theme/gnome-shell-sass/_colors.scss | 6 +-
data/theme/gnome-shell-sass/_common.scss | 122 ++++++++++++++-----
data/theme/gnome-shell-sass/_drawing.scss | 121 +++++++++++--------
data/theme/gnome-shell-sass/_widgets.scss | 1 -
data/theme/gnome-shell-sass/widgets/_app-grid.scss | 19 ++-
data/theme/gnome-shell-sass/widgets/_buttons.scss | 1 +
data/theme/gnome-shell-sass/widgets/_calendar.scss | 73 +++++-------
data/theme/gnome-shell-sass/widgets/_dash.scss | 2 +-
data/theme/gnome-shell-sass/widgets/_dialogs.scss | 18 ++-
data/theme/gnome-shell-sass/widgets/_entries.scss | 8 +-
.../gnome-shell-sass/widgets/_ibus-popup.scss | 29 ++---
data/theme/gnome-shell-sass/widgets/_keyboard.scss | 19 +--
.../gnome-shell-sass/widgets/_login-dialog.scss | 6 +-
.../gnome-shell-sass/widgets/_looking-glass.scss | 27 ++---
.../gnome-shell-sass/widgets/_message-list.scss | 19 ++-
data/theme/gnome-shell-sass/widgets/_misc.scss | 8 +-
.../gnome-shell-sass/widgets/_network-dialog.scss | 65 +++-------
data/theme/gnome-shell-sass/widgets/_osd.scss | 4 +-
data/theme/gnome-shell-sass/widgets/_overview.scss | 2 +-
data/theme/gnome-shell-sass/widgets/_panel.scss | 6 +-
data/theme/gnome-shell-sass/widgets/_popovers.scss | 131 ++++++++++-----------
.../gnome-shell-sass/widgets/_screen-shield.scss | 2 +-
.../gnome-shell-sass/widgets/_screenshot.scss | 93 +++++----------
.../gnome-shell-sass/widgets/_search-entry.scss | 24 ++--
.../gnome-shell-sass/widgets/_search-results.scss | 10 +-
data/theme/gnome-shell-sass/widgets/_slider.scss | 6 -
.../gnome-shell-sass/widgets/_switcher-popup.scss | 6 +-
.../gnome-shell-sass/widgets/_tiled-previews.scss | 19 ---
.../gnome-shell-sass/widgets/_window-picker.scss | 12 +-
.../widgets/_workspace-switcher.scss | 2 +-
.../widgets/_workspace-thumbnails.scss | 2 +-
data/theme/meson.build | 1 -
32 files changed, 412 insertions(+), 452 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index c659acd747..55012a78db 100644
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -1,8 +1,8 @@
// When color definition differs for dark and light variant,
// it gets @if-ed depending on $variant
-$base_color: if($variant == 'light', #fff, darken(desaturate(#2a2a2a, 20%), 2%));
-$bg_color: if($variant == 'light', #f6f5f4, #2a2a2a);
+$base_color: if($variant == 'light', #fff, darken(desaturate(#241f31, 100%), 2%));
+$bg_color: if($variant == 'light', #f6f5f4, lighten($base_color, 5%));
$fg_color: if($variant == 'light', transparentize(black, .2), white);
$selected_fg_color: #fff;
@@ -30,7 +30,7 @@ $osd_outer_borders_color: transparentize($osd_fg_color, 0.98);
$shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
// overview background color
-$system_bg_color: if($variant == 'light', darken(desaturate($bg_color, 100%), 35%), darken($bg_color, 2%));
+$system_bg_color: $base_color;
//insensitive state derived colors
$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index b68260236c..63090b46ab 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -28,7 +28,6 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
// padding, margin and spacing
$base_padding: 6px;
$base_margin: 4px;
-$base_spacing: 6px;
// border radii
$base_border_radius: 8px;
@@ -36,18 +35,17 @@ $base_border_radius: 8px;
// radii of things that display over other things, e.g. popovers
$modal_radius: $base_border_radius*2; // 24px
-// non-standard colors
-$bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%));
-$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 4%));
-// $bubble_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3));
-
// derived hover colors
-$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 7%));
-$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 7%));
+$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 4%));
+$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 4%));
// derived active colors
-$active_bg_color: darken($bg_color,if($variant=='light', 9%, 5%));
-$active_fg_color: darken($fg_color,if($variant=='light', 5%, 3%));
+$active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 6%));
+$active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 6%));
+
+// derived checked colors
+$checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 9%));
+$checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 9%));
// fonts
$base_font_size: 11;
@@ -65,13 +63,6 @@ stage {
/* Common Stylings */
-// Text
-%status_text {
- font-size: 2em;
- font-weight: bold;
- color: $osd_fg_color;
-}
-
// osd panels
%osd_panel {
color: $osd_fg_color;
@@ -97,42 +88,47 @@ stage {
text-align: center;
}
-// button styling
+// dialogs
+%bubble_panel {
+ color: $fg_color;
+ background-color: $bg_color;
+ border-radius: $base_border_radius*1.25 + 1px;
+ border: 1px solid $borders_edge;
+}
+
+// normal button styling
%button {
border-radius: $base_border_radius - 2px; // 6px
border-style: solid;
border-width: 1px;
- min-height: 22px;
font-weight: bold;
- padding: $base_padding * 0.5 $base_padding * 4;
+ padding: $base_padding*.5 $base_padding*4;
@include button(normal);
&:focus { @include button(focus);}
&:hover { @include button(hover);}
&:insensitive { @include button(insensitive);}
- &:active, &:checked { @include button(active);}
-}
-
-// dialogs
-%bubble_panel {
- color: $fg_color;
- background-color: $bg_color;
- border-radius: $base_border_radius*1.25 + 1px;
- border: 1px solid $borders_edge;
+ &:active { @include button(active);}
+ &:checked { @include button(checked);}
}
// buttons in dialogs/notifications
+// lighter in color and have a greater radius
+
$bubble_button_radius:$base_border_radius*1.25;
+$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 4%));
%bubble_button {
padding: $base_padding * 2;
- font-weight: bold;
+ font-weight: bold !important;
+ margin-right: 1px;
@include button(normal, $c:$bubble_buttons_color);
&:insensitive { @include button(insensitive, $c:$bubble_buttons_color);}
&:focus { @include button(focus, $c:$bubble_buttons_color);}
&:hover { @include button(hover, $c:$bubble_buttons_color);}
&:active { @include button(active, $c:$bubble_buttons_color);}
+ &:checked { @include button(checked, $c:$bubble_buttons_color);}
&:first-child:ltr {
border-radius: 0 0 0 $bubble_button_radius;
@@ -140,7 +136,7 @@ $bubble_button_radius:$base_border_radius*1.25;
&:last-child:ltr {
border-radius: 0 0 $bubble_button_radius 0;
- border-right-width: 0 !important;
+ margin-right: 0 !important;
}
&:first-child:rtl {
@@ -149,10 +145,72 @@ $bubble_button_radius:$base_border_radius*1.25;
&:last-child:rtl {
border-radius: 0 0 0 $bubble_button_radius;
- border-left-width: 0 !important;
+ margin-right: 0 !important;
}
&:first-child:last-child {
border-radius: 0 0 $bubble_button_radius $bubble_button_radius !important;
+ margin-right: 0 !important;
}
}
+
+// buttons on OSD elements
+// that are undecorated by default and use OSD colors
+%osd_button {
+ @include button(undecorated);
+ &:insensitive { @include button(undecorated, $c:$osd_bg_color);}
+ &:focus { @include button(focus, $c:$osd_bg_color);}
+ &:hover { @include button(hover, $c:$osd_bg_color);}
+ &:active { @include button(active, $c:$osd_bg_color);}
+ &:outlined,&:checked { @include button(checked, $c:$osd_bg_color);}
+}
+
+/* General Typography */
+
+%large_title {
+ font-weight: 300;
+ @include fontsize(24);
+}
+
+%title_1 {
+ font-weight: 800;
+ @include fontsize(20);
+}
+
+%title_2 {
+ font-weight: 800;
+ @include fontsize(15);
+}
+
+%title_3 {
+ font-weight: 700;
+ @include fontsize(15);
+}
+
+%title_4 {
+ font-weight: 700;
+ @include fontsize(13);
+}
+
+%heading {
+ font-weight: 700;
+ @include fontsize(11);
+}
+
+%caption_heading {
+ font-weight: 700;
+ @include fontsize(9);
+}
+
+%caption {
+ font-weight: 400;
+ @include fontsize(9);
+}
+
+%smaller {
+ font-weight: 400;
+ @include fontsize(8);
+}
+
+%monospace {font-family: monospace;}
+%numeric { font-feature-settings: "tnum";}
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 7e953841eb..d177ba44db 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -25,33 +25,40 @@
// entries
-@mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) {
+@mixin entry($t, $fc:$selected_bg_color) {
//
// Entries drawing function
//
// $t: entry type
// $fc: focus color
-// $edge: set to none to not draw the bottom edge or specify a color to not use the default one
//
// possible $t values:
// normal, focus, insensitive
//
@if $t==normal {
- background-color: $base_color;
- border-color: $borders_color;
+ background-color: lighten($bg_color, 5%);
+ color: transparentize($fg_color,0.3);
+ border: 2px solid lighten($bg_color, 5%);
}
+
@if $t==focus {
- border-color: if($fc==$selected_bg_color,
- $selected_borders_color,
- darken($fc,35%));
- box-shadow: inset 0 0 0 2px $fc;
+ background-color: mix(lighten($bg_color, 5%), $selected_bg_color, 95%);
+ border-color: $fc;
+ color: $fg_color;
+ &:hover {}
}
- @if $t==hover { }
+
+ @if $t==hover {
+ background-color:lighten($hover_bg_color, 5%);
+ border-color:lighten($hover_bg_color, 5%);
+ color: transparentize($fg_color,0.3);
+ }
+
@if $t==insensitive {
+ background-color:lighten($insensitive_bg_color, 5%);
+ border-color: lighten($insensitive_bg_color, 5%);
color: $insensitive_fg_color;
- border-color: $insensitive_bg_color;
- box-shadow: none;
}
}
@@ -85,18 +92,28 @@
background-color: mix(lighten($c, 8%), $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
}
+ &:active {
+ background-color: mix(lighten($c, 10%), $selected_bg_color, 90%);
+ box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
+ }
}
// hover key
@else if $t==hover {
color: $tc;
- background-color: lighten($c, if($variant == 'light', 8%, 5%));
+ background-color: lighten($c, 7%);
}
// active key
@else if $t==active {
color: $tc;
- background-color: darken($c,3%);
+ background-color: lighten($c, 10%);
+ }
+
+ // checked key
+ @else if $t==checked {
+ color: $tc;
+ background-color: lighten($c, 15%);
}
// insensitive key
@@ -140,12 +157,15 @@
@if $t==focus {
color: $tc;
background-color: mix(mix($tc, $c, 5%), $selected_bg_color, 90%);
- // border-color: lighten($tc, 3%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
&:hover {
background-color: mix(mix($tc, $c, 7%), $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
}
+ &:active {
+ background-color: mix(mix($tc, $c, 10%), $selected_bg_color, 90%);
+ box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
+ }
}
// hover button
@@ -157,7 +177,16 @@
// active button
@else if $t==active {
color: $tc;
- background-color: mix($tc, $c, 2%);
+ background-color: mix($tc, $c, 9%);
+ }
+
+ // checked button
+ @else if $t==checked {
+ color: $tc;
+ background-color: mix($tc, $c, 11%);
+ &:hover {
+ background-color: mix($tc, $c, 13%);
+ }
}
// insensitive button
@@ -187,10 +216,16 @@
color: transparentize($selected_fg_color, .5);
}
}
+
// reset
@else if $t==undecorated {
background-color: transparent;
background-color: none;
+ &:insensitive {
+ @include button(insensitive);
+ background-color: transparent;
+ color: transparentize($selected_fg_color, .5);
+ }
}
}
@@ -198,29 +233,19 @@
@mixin tile($color) {
@extend %tile;
background-color: transparent;
-
- &:hover,
- &:selected:hover {
- background-color: transparentize($color, .85);
- }
-
- &:focus:hover {
- background-color: transparentize($color, .8);
+ &:hover { background-color: transparentize($color, .9);}
+ &:selected, &:focus {
+ background-color: transparentize($color, .87);
+ &:hover { background-color: transparentize($color, .84);}
+ &:active { background-color: transparentize($color, .87);}
}
-
- &:selected,
- &:focus {
- background-color: transparentize($color, .9);
- }
-
- &:outlined,
- &:checked,
- &:active {
- background-color: transparentize(darken($osd_bg_color, 10%), .5);
+ &:active { background-color: transparentize($color, .84);}
+ &:outlined, &:checked {
+ background-color: transparentize($color, .81);
+ &:active { background-color: transparentize($color, .78);}
}
}
-
// overview icons
// mixin fo tiles in the overview
@mixin overview_icon($color) {
@@ -228,19 +253,14 @@
@extend %tile;
color: $color;
}
-
- &:hover,
- &:focus:hover,
- &:selected {
- .overview-icon {
- background-color: transparentize($color, .9);
- }
+ &:hover {
+ .overview-icon { background-color: transparentize($color, .9);}
}
&:focus {
- .overview-icon {
- background-color: transparentize($color, .95);
- // border-color: $selected_bg_color;
+ .overview-icon { background-color: transparentize($color, .87);}
+ &:hover {
+ .overview-icon { background-color: transparentize($color, .84);}
}
}
@@ -251,15 +271,14 @@
}
}
- &:active,
- &:focus:active,
- &:checked {
- .overview-icon {
- background-color: transparentize(darken($osd_bg_color, 10%), .5);
- }
+ &:active {
+ .overview-icon { background-color: transparentize($color, .84);}
}
-}
+ &:selected, &:checked {
+ .overview-icon {background-color: transparentize($color, .81);}
+ }
+}
// styling for elements within popovers that look like notifications
@mixin card($flat: false) {
diff --git a/data/theme/gnome-shell-sass/_widgets.scss b/data/theme/gnome-shell-sass/_widgets.scss
index 6896213e8f..4ed082f1f9 100644
--- a/data/theme/gnome-shell-sass/_widgets.scss
+++ b/data/theme/gnome-shell-sass/_widgets.scss
@@ -44,7 +44,6 @@
// A11y / misc
@import 'widgets/a11y';
@import 'widgets/misc';
-@import 'widgets/tiled-previews';
@import 'widgets/keyboard';
@import 'widgets/looking-glass';
// Lock / login screens
diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index 9f44473374..06e23b6929 100644
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -4,10 +4,10 @@ $app_icon_size: 96px;
// app icons
.icon-grid {
- row-spacing: $base_spacing * 2;
- column-spacing: $base_spacing * 2;
- max-row-spacing: $base_spacing * 12;
- max-column-spacing: $base_spacing * 12;
+ row-spacing: $base_padding * 2;
+ column-spacing: $base_padding * 2;
+ max-row-spacing: $base_padding * 12;
+ max-column-spacing: $base_padding * 12;
page-padding-top: $base_padding * 4;
page-padding-bottom: $base_padding * 4;
page-padding-left: $base_padding * 2;
@@ -27,7 +27,7 @@ $app_grid_fg_color: #fff;
padding: 10px 8px 5px 8px;
> StBoxLayout {
- spacing: $base_spacing;
+ spacing: $base_padding;
}
}
}
@@ -50,8 +50,7 @@ $app_grid_fg_color: #fff;
& .folder-name-label,
& .folder-name-entry {
- font-size: 18pt;
- font-weight: 1000;
+ @extend %title_1;
}
& .folder-name-entry { width: 300px }
@@ -75,8 +74,8 @@ $app_grid_fg_color: #fff;
}
& .icon-grid {
- row-spacing: $base_spacing * 2;
- column-spacing: $base_spacing * 5;
+ row-spacing: $base_padding * 2;
+ column-spacing: $base_padding * 5;
page-padding-top: 0;
page-padding-bottom: 0;
page-padding-left: 0;
@@ -106,7 +105,7 @@ $app_grid_fg_color: #fff;
// Rename popup for app folders
.rename-folder-popup {
.rename-folder-popup-item {
- spacing: $base_spacing;
+ spacing: $base_padding;
&:ltr, &:rtl { padding: 0 $base_padding * 2; }
}
}
diff --git a/data/theme/gnome-shell-sass/widgets/_buttons.scss
b/data/theme/gnome-shell-sass/widgets/_buttons.scss
index 709ac467c7..6a72c07966 100644
--- a/data/theme/gnome-shell-sass/widgets/_buttons.scss
+++ b/data/theme/gnome-shell-sass/widgets/_buttons.scss
@@ -2,4 +2,5 @@
.button {
@extend %button; // that's it
+ min-height: 22px;
}
diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss
b/data/theme/gnome-shell-sass/widgets/_calendar.scss
index 4e589462f3..da93846c93 100644
--- a/data/theme/gnome-shell-sass/widgets/_calendar.scss
+++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss
@@ -5,15 +5,10 @@
// Calendar menu side column
.datemenu-calendar-column {
- spacing: $base_spacing;
- border: none;
- border-style: solid;
- border-color: $borders_color;
-
+ spacing: $base_padding;
&:ltr {padding-left: $base_padding;}
&:rtl {padding-right: $base_padding;}
-
- .datemenu-displays-box {spacing: $base_spacing;}
+ .datemenu-displays-box {spacing: $base_padding;}
}
/* today button (the date) */
@@ -23,15 +18,14 @@
// weekday label
.day-label {
- @include fontsize($base_font_size+1);
+ @extend %heading;
color: $insensitive_fg_color;
- font-weight: bold;
}
// date label
.date-label {
- @include fontsize($base_font_size+7);
- font-weight: 1000;
+ @extend %title_1;
+ color: $fg_color;
}
}
@@ -50,9 +44,10 @@
// month label
.calendar-month-label {
- font-weight: bold;
+ color: lighten($fg_color,5%);
+ @extend %heading;
+ padding: 8px 0;
}
-
.pager-button {
background-color: transparent;
height: 32px;
@@ -67,13 +62,13 @@
$calendar_day_size: 32px;
.calendar-day-base {
- @include fontsize($base_font_size - 3);
text-align: center;
margin: 2px;
height: $calendar_day_size;
width: $calendar_day_size;
border-radius: $calendar_day_size * 0.5 + 2px;
- font-feature-settings: "tnum";
+ @extend %numeric;
+ @extend %smaller;
&:hover {background-color: $hover_bg_color;}
&:focus {
@@ -97,7 +92,8 @@
color: $insensitive_fg_color;
padding-top: $base_padding;
height: 16px !important; // force heading to be smaller height
- @include fontsize($base_font_size - 2);
+ font-weight: bold;
+ @extend %smaller;
}
}
@@ -168,23 +164,23 @@
padding: $base_padding * 2;
.events-box {
- spacing: $base_spacing;
+ spacing: $base_padding;
}
.events-list {
- spacing: 2 * $base_spacing;
+ spacing: 2 * $base_padding;
}
.events-title {
+ @extend %heading;
color: $insensitive_fg_color;
- font-weight: bold;
margin-bottom: $base_margin;
}
.event-time {
+ @extend %numeric;
+ @extend %caption;
color: $insensitive_fg_color;
- font-feature-settings: "tnum";
- @include fontsize($base_font_size - 1);
}
}
@@ -194,29 +190,26 @@
padding: $base_padding * 2;
.world-clocks-grid {
- spacing-rows: $base_spacing;
- spacing-columns: $base_spacing * 2;
+ spacing-rows: $base_padding;
+ spacing-columns: $base_padding * 2;
}
// title
.world-clocks-header {
+ @extend %heading;
color: $insensitive_fg_color;
- font-weight: bold;
}
// city label
.world-clocks-city {
color: $fg_color;
- @include fontsize($base_font_size);
- font-weight: normal;
}
// timezone time
.world-clocks-time {
- font-weight: bold;
+ @extend %heading;
+ @extend %numeric;
color: $fg_color;
- font-feature-settings: "tnum";
- @include fontsize($base_font_size);
&:ltr {text-align: right;}
&:rtl {text-align: left;}
@@ -224,9 +217,9 @@
// timezone offset label
.world-clocks-timezone {
+ @extend %numeric;
+ @extend %caption;
color: $insensitive_fg_color;
- font-feature-settings: "tnum";
- @include fontsize($base_font_size - 1);
}
}
@@ -236,33 +229,31 @@
padding: $base_padding * 2;
.weather-box {
- spacing: $base_spacing + $base_margin;
+ spacing: $base_padding + $base_margin;
}
.weather-header-box {
- spacing: $base_spacing;
+ spacing: $base_padding;
}
.weather-header {
color: $insensitive_fg_color;
- font-weight: bold;
+ @extend %heading;
&.location {
font-weight: normal;
- @include fontsize($base_font_size - 1);
}
}
.weather-grid {
- spacing-rows: $base_spacing;
- spacing-columns: $base_spacing * 2;
+ spacing-rows: $base_padding;
+ spacing-columns: $base_padding * 2;
}
.weather-forecast-time {
+ @extend %numeric;
+ @extend %caption;
color: darken($fg_color,30%);
- font-feature-settings: "tnum";
- @include fontsize($base_font_size - 2);
- font-weight: normal;
padding-top: 0.2em;
padding-bottom: 0.4em;
}
@@ -272,6 +263,6 @@
}
.weather-forecast-temp {
- font-weight: bold;
+ @extend %heading;
}
}
diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss
index 9d820e7848..d78febbea2 100644
--- a/data/theme/gnome-shell-sass/widgets/_dash.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dash.scss
@@ -9,7 +9,7 @@ $dash_border_radius: $modal_radius + 8px;
// container for the dash
#dash {
- @include fontsize($base_font_size - 2);
+ @extend %caption;
margin-top: $base_margin * 3;
padding: $dash_padding;
diff --git a/data/theme/gnome-shell-sass/widgets/_dialogs.scss
b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
index add8f5d076..6ac4e8fde1 100644
--- a/data/theme/gnome-shell-sass/widgets/_dialogs.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
@@ -1,7 +1,7 @@
/* Modal Dialogs */
.headline {
- @include fontsize($base_font_size + 1);
+ @extend %title_4;
}
.modal-dialog {
@@ -34,13 +34,9 @@
.message-dialog-title {
text-align: center;
- font-size: 18pt;
- font-weight: 800;
+ @extend %title_2;
- &.lightweight {
- font-size: 13pt;
- font-weight: 800;
- }
+ &.lightweight { @extend %title_4;}
}
.message-dialog-description { text-align: center; }
}
@@ -51,7 +47,7 @@
.dialog-list-title {
text-align: center;
- font-weight: bold;
+ @extend %heading;
}
.dialog-list-scrollview { max-height: 200px; }
@@ -64,7 +60,7 @@
.dialog-list-item-title { font-weight: bold; }
.dialog-list-item-description {
color: darken($fg_color,5%);
- @include fontsize($base_font_size - 1);
+ @extend %caption;
}
}
}
@@ -78,7 +74,7 @@
}
.run-dialog-entry { width: 20em; }
.run-dialog-description {
- @include fontsize($base_font_size - 1);
+ @extend %caption;
text-align: center;
color: darken($fg_color, 20%);
}
@@ -119,7 +115,7 @@
.prompt-dialog-info-label,
.prompt-dialog-null-label {
text-align: center;
- @include fontsize($base_font_size - 1);
+ @extend %caption;
}
.prompt-dialog-error-label {
diff --git a/data/theme/gnome-shell-sass/widgets/_entries.scss
b/data/theme/gnome-shell-sass/widgets/_entries.scss
index 5a11945566..17e05cd2b0 100644
--- a/data/theme/gnome-shell-sass/widgets/_entries.scss
+++ b/data/theme/gnome-shell-sass/widgets/_entries.scss
@@ -3,23 +3,27 @@
StEntry {
border-radius: $base_border_radius;
padding: 8px;
- border-width: 0;
color: $fg_color;
+
@include entry(normal);
- //&:hover { @include entry(hover);}
+ &:hover { @include entry(hover);}
&:focus { @include entry(focus);}
&:insensitive { @include entry(insensitive);}
+
selection-background-color: $selected_bg_color;
selected-color: $selected_fg_color;
+
StIcon.capslock-warning {
icon-size: 16px;
warning-color: $warning_color;
padding: 0 4px;
}
+
StIcon.peek-password {
icon-size: $base_icon_size;
padding: 0 4px;
}
+
StLabel.hint-text {
margin-left: 2px;
color: transparentize($fg_color, 0.3);
diff --git a/data/theme/gnome-shell-sass/widgets/_ibus-popup.scss
b/data/theme/gnome-shell-sass/widgets/_ibus-popup.scss
index 6f820236ae..28f89f3369 100644
--- a/data/theme/gnome-shell-sass/widgets/_ibus-popup.scss
+++ b/data/theme/gnome-shell-sass/widgets/_ibus-popup.scss
@@ -5,31 +5,32 @@
}
.candidate-popup-content {
- padding: 0.5em;
- spacing: 0.3em;
+ padding: $base_padding;
+ spacing: $base_padding;
+ @extend .popup-menu-content;
}
.candidate-index {
- padding: 0 0.5em 0 0;
- color: darken($fg_color,10%);
+ padding: 0;
+ padding-right: $base_padding;
+ color: $insensitive_fg_color;
}
.candidate-box {
- padding: 0.3em 0.5em 0.3em 0.5em;
+ padding: $base_padding $base_padding*2 $base_padding $base_padding*2;
border-radius: $base_border_radius;
- &:selected,&:hover { background-color: $selected_bg_color; color: $selected_fg_color; }
+ &:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
+ &:hover { background-color: $hover_bg_color; color: $hover_fg_color; }
}
.candidate-page-button-box {
height: 2em;
- .vertical & { padding-top: 0.5em; }
- .horizontal & { padding-left: 0.5em; }
+ .vertical & { padding-top: $base_padding*2; }
+ .horizontal & { padding-left: $base_padding*2; }
}
-.candidate-page-button {
- padding: 4px;
-}
+.candidate-page-button { padding: $base_padding;}
-.candidate-page-button-previous { border-radius: $base_border_radius 0px 0px $base_border_radius;
border-right-width: 0; }
-.candidate-page-button-next { border-radius: 0px $base_border_radius $base_border_radius 0px; }
-.candidate-page-button-icon { icon-size: 1em; }
+.candidate-page-button-previous { border-radius: $base_border_radius 0px 0px $base_border_radius;
border-right-width: 0;box-shadow: none;}
+.candidate-page-button-next { border-radius: 0px $base_border_radius $base_border_radius 0px;box-shadow:
none;}
+.candidate-page-button-icon { icon-size: $base_icon_size; }
diff --git a/data/theme/gnome-shell-sass/widgets/_keyboard.scss
b/data/theme/gnome-shell-sass/widgets/_keyboard.scss
index 43d5af8283..91d9a3d5cb 100644
--- a/data/theme/gnome-shell-sass/widgets/_keyboard.scss
+++ b/data/theme/gnome-shell-sass/widgets/_keyboard.scss
@@ -44,8 +44,9 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
@include keyboard_key(normal, $key_bg_color, $osd_fg_color);
&:focus { @include keyboard_key(focus);}
- &:hover, &:checked { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
+ &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
&:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
+ &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
&:grayed { //FIXMEy
background-color: darken($bg_color, 3%);
@@ -56,16 +57,18 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
// non-character keys
&.default-key {
@include keyboard_key(normal, $default_key_bg_color, $osd_fg_color);
- &:hover, &:checked {@include keyboard_key(hover, $default_key_bg_color, $osd_fg_color);}
+ &:hover {@include keyboard_key(hover, $default_key_bg_color, $osd_fg_color);}
&:active { @include keyboard_key(active, $default_key_bg_color, $osd_fg_color);}
+ &:checked { @include keyboard_key(checked, $default_key_bg_color, $osd_fg_color);}
border-radius: $key_border_radius;
}
// enter key is suggested-action
&.enter-key {
@include keyboard_key(normal, $selected_bg_color, $selected_fg_color);
- &:hover, &:checked { @include keyboard_key(hover, lighten($selected_bg_color, 3%), $selected_fg_color);}
- &:active {@include keyboard_key(active, darken($selected_bg_color, 2%), $selected_fg_color);}
+ &:hover { @include keyboard_key(hover, $selected_bg_color, $selected_fg_color);}
+ &:active {@include keyboard_key(active, $selected_bg_color, $selected_fg_color);}
+ &:checked {@include keyboard_key(checked, $selected_bg_color, $selected_fg_color);}
border-radius: $key_border_radius;
color: $osd_fg_color;
}
@@ -94,15 +97,16 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
-arrow-border-color: lighten($osd_bg_color, 9%);
-arrow-base: 20px;
-arrow-rise: 10px;
- -boxpointer-gap: $base_spacing;
+ -boxpointer-gap: $base_padding;
padding: $base_padding;
.keyboard-key {
@include keyboard_key(normal, $key_bg_color, $osd_fg_color);
&:focus { @include keyboard_key(focus);}
- &:hover, &:checked { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
+ &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
&:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
+ &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
border-radius:$key_border_radius;
}
@@ -142,7 +146,8 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
@include keyboard_key(undecorated, $key_bg_color, $osd_fg_color);
&:focus { @include keyboard_key(focus);}
- &:hover, &:checked { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
+ &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
&:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
+ &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
}
}
diff --git a/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
b/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
index 6d16ac241a..4ff50937ca 100644
--- a/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
+++ b/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
@@ -76,7 +76,7 @@
}
.login-dialog-not-listed-label {
- @include fontsize($base_font_size - 1);
+ @extend %caption;
font-weight: bold;
color: darken($osd_fg_color,30%);
padding-top: 1em;
@@ -158,7 +158,7 @@
.login-dialog-prompt-layout {
padding-top: 24px;
padding-bottom: 12px;
- spacing: $base_spacing * 2;
+ spacing: $base_padding * 2;
width: 23em;
}
@@ -185,8 +185,8 @@
// Custom styling for unlock entry
.unlock-dialog {
StEntry {
+ border:none !important;
&:focus {
- box-shadow:none;
background-color: transparentize($fg_color, 0.9);
}
&:insensitive {
diff --git a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
index e03457e28c..8639889e3e 100644
--- a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
+++ b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
@@ -8,7 +8,7 @@
border: 1px solid $osd_outer_borders_color;
color: $osd_fg_color;
padding: $base_padding;
- spacing: $base_spacing;
+ spacing: $base_padding;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
& > #Toolbar {
@@ -16,7 +16,7 @@
padding: $base_padding;
border-radius: 0;
background-color: transparent;
- spacing: $base_spacing;
+ spacing: $base_padding;
.lg-toolbar-button {
padding: $base_padding $base_padding*2;
@@ -27,7 +27,7 @@
}
.labels {
- spacing: $base_spacing;
+ spacing: $base_padding;
}
.notebook-tab {
@@ -54,8 +54,8 @@
}
}
- StBoxLayout#EvalBox { padding: 4px; spacing: $base_spacing; padding: $base_padding; }
- StBoxLayout#ResultsArea { spacing: $base_spacing; padding: $base_padding; }
+ StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; }
+ StBoxLayout#ResultsArea { spacing: $base_padding; padding: $base_padding; }
}
.lg-dialog {
@@ -83,12 +83,12 @@
}
.lg-completions-text {
- font-size: .9em;
+ @extend %caption;
font-style: italic;
}
.lg-obj-inspector-title {
- spacing: $base_spacing;
+ spacing: $base_padding;
}
.lg-obj-inspector-button {
@@ -103,7 +103,7 @@
.lg-extensions-list {
padding: $base_padding;
- spacing: $base_spacing;
+ spacing: $base_padding;
}
.lg-extension {
@@ -112,11 +112,11 @@
}
.lg-extension-name {
- font-weight: bold;
+ @extend %heading;
}
.lg-extension-meta {
- spacing: $base_spacing;
+ spacing: $base_padding;
}
// Inspector
@@ -128,7 +128,7 @@
}
.lg-debug-flag-button {
- StLabel { padding: $base_spacing, 2 * $base_spacing; }
+ StLabel { padding: $base_padding, 2 * $base_padding; }
color: $fg_color;
&:hover { color: lighten($fg_color, 20%); }
@@ -136,8 +136,7 @@
}
.lg-debug-flags-header {
- padding-top: 2 * $base_spacing;
- font-size: 120%;
- font-weight: bold;
+ padding-top: 2 * $base_padding;
padding: $base_padding;
+ @extend %title_2;
}
diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss
b/data/theme/gnome-shell-sass/widgets/_message-list.scss
index 0dc2092198..6d6dadb87a 100644
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -4,20 +4,15 @@
// main list
.message-list {
width: 32em;
- border: none;
- border-style: solid;
- border-color: $borders_color;
- padding: $base_padding;
+ border: solid $borders_color;
// padding and margins to account for scrollbar
&:ltr {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; }
&:rtl {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; }
.message-list-placeholder {
- font-weight:1000;
- font-size: 18pt;
- color: transparentize($fg_color, .8);
- spacing: 12px;
+ @extend %title_2;
+ color: transparentize($insensitive_fg_color, .5);
// icon size and color
> StIcon {
@@ -29,7 +24,7 @@
}
.message-list-sections {
- spacing: $base_spacing;
+ spacing: $base_padding;
margin: 0;
padding-bottom: $base_padding;
@@ -40,15 +35,15 @@
.message-list-section,
.message-list-section-list {
- spacing: $base_spacing;
+ spacing: $base_padding;
}
// do-not-disturb + clear button
.message-list-controls {
// NOTE: remove the padding if notification_bubble could remove margin for drop shadow
padding: $base_padding;
- margin: 0;
- spacing: $base_spacing;
+ spacing: $base_padding;
+ @extend %heading;
.dnd-button {
// We need this because the focus outline isn't inset like for the buttons
diff --git a/data/theme/gnome-shell-sass/widgets/_misc.scss b/data/theme/gnome-shell-sass/widgets/_misc.scss
index 0fe174a74e..740927824c 100644
--- a/data/theme/gnome-shell-sass/widgets/_misc.scss
+++ b/data/theme/gnome-shell-sass/widgets/_misc.scss
@@ -48,7 +48,7 @@
.caps-lock-warning-label {
text-align: center;
padding-bottom: 8px;
- @include fontsize($base_font_size - 1);
+ @extend %caption;
color: $warning_color;
}
@@ -57,3 +57,9 @@
.workspace-animation {
background-color: $system_bg_color;
}
+
+/* Tiled window previews */
+.tile-preview {
+ background-color: transparentize($selected_bg_color,0.5);
+ border: 1px solid $selected_bg_color;
+}
diff --git a/data/theme/gnome-shell-sass/widgets/_network-dialog.scss
b/data/theme/gnome-shell-sass/widgets/_network-dialog.scss
index 51394ed39c..168ec3a798 100644
--- a/data/theme/gnome-shell-sass/widgets/_network-dialog.scss
+++ b/data/theme/gnome-shell-sass/widgets/_network-dialog.scss
@@ -1,4 +1,4 @@
-/* Network Dialogs */
+/* Select Network dialogs */
.nm-dialog {
max-height: 34em;
min-height: 31em;
@@ -10,70 +10,39 @@
padding: 24px;
}
-.nm-dialog-airplane-box { spacing: 12px; }
-
-.nm-dialog-airplane-headline {
- font-weight: bold;
- text-align: center;
-}
-
-.nm-dialog-airplane-text { color: $fg_color; }
-
-// header
-.nm-dialog-header {
- font-weight: bold;
-}
-.nm-dialog-subheader {
- color: $insensitive_fg_color;
-}
-
-.nm-dialog-header-icon {
- icon-size: $base_icon_size * 2;
-}
+.nm-dialog-header { @extend %heading; }
+.nm-dialog-subheader {color: $insensitive_fg_color;}
+.nm-dialog-header-icon {icon-size: $base_icon_size*2;}
.nm-dialog-header-hbox { spacing: 10px; }
-// airplane mode
-.nm-dialog-airplane-headline {
- font-weight: bold;
-}
-
-.nm-dialog-airplane-text {
- color: $insensitive_fg_color;
-}
-
-// list of networks
.nm-dialog-scroll-view {
- border: none;
padding:$base_padding;
border-radius: $base_border_radius;
- background-color: darken($bg_color, 3%);
+ background-color: $base_color;
}
-// list item
.nm-dialog-item {
- @include fontsize($base_font_size);
- border: none;
padding: $base_padding * 2;
- spacing: 0px;
- text-shadow: none;
- icon-shadow: none;
&:selected {
background-color: $selected_bg_color;
- color: $selected_fg_color;
-
border-radius: $base_border_radius - 3px;
+ color: $selected_fg_color;
}
-
- &:hover {
- background-color:$hover_bg_color;
- }
+ &:hover { background-color:$hover_bg_color;}
}
-// icons in list
.nm-dialog-icon { icon-size: $base_icon_size; }
-.nm-dialog-icons { spacing: $base_spacing * 2; }
+.nm-dialog-icons { spacing: $base_padding * 2; }
// no networks
-.no-networks-label { color: $insensitive_fg_color; }
.no-networks-box { spacing: $base_padding; }
+.no-networks-label { color: $insensitive_fg_color; }
+
+// airplane mode
+.nm-dialog-airplane-box {
+ text-align: center;
+ spacing: 12px;
+}
+.nm-dialog-airplane-headline { @extend %title_3;}
+.nm-dialog-airplane-text { color: $insensitive_fg_color;}
diff --git a/data/theme/gnome-shell-sass/widgets/_osd.scss b/data/theme/gnome-shell-sass/widgets/_osd.scss
index 87f376d17f..b5ac47b3c6 100644
--- a/data/theme/gnome-shell-sass/widgets/_osd.scss
+++ b/data/theme/gnome-shell-sass/widgets/_osd.scss
@@ -4,9 +4,9 @@ $osd_levelbar_height:8px;
.osd-window {
@extend %osd_panel;
+ @extend %heading;
text-align: center;
- font-weight: bold;
- spacing: $base_spacing * 2; // 12px
+ spacing: $base_padding * 2; // 12px
margin: $base_margin * 8; // 32px
min-width: 64px;
min-height: 64px;
diff --git a/data/theme/gnome-shell-sass/widgets/_overview.scss
b/data/theme/gnome-shell-sass/widgets/_overview.scss
index c593cebc4e..d8e70eaf22 100644
--- a/data/theme/gnome-shell-sass/widgets/_overview.scss
+++ b/data/theme/gnome-shell-sass/widgets/_overview.scss
@@ -1,7 +1,7 @@
/* OVERVIEW */
.controls-manager, .secondary-monitor-workspaces {
- spacing: $base_spacing * 2;
+ spacing: $base_padding * 2;
}
#overviewGroup {
diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
index 7e577e828c..83f49c6a8f 100644
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
+++ b/data/theme/gnome-shell-sass/widgets/_panel.scss
@@ -10,7 +10,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
background-color: $panel_bg_color;
font-weight: bold;
height: $panel_height;
- font-feature-settings: "tnum";
+ @extend %numeric;
transition-duration: $panel_transition_duration;
// transparent panel on lock & login screens
@@ -150,13 +150,13 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// App Menu
#appMenu {
- spacing: $base_spacing;
+ spacing: $base_padding;
.label-shadow { color: transparent; }
}
#appMenu .panel-status-menu-box {
padding: 0 $base_padding;
- spacing: $base_spacing;
+ spacing: $base_padding;
}
diff --git a/data/theme/gnome-shell-sass/widgets/_popovers.scss
b/data/theme/gnome-shell-sass/widgets/_popovers.scss
index c0e34142c2..88a9298e6d 100644
--- a/data/theme/gnome-shell-sass/widgets/_popovers.scss
+++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss
@@ -2,15 +2,6 @@
// the popover itself
.popup-menu-boxpointer {
- // override popover styles for panel menus so
- // we can draw a box shadow and no arrow
- -arrow-border-radius: $modal_radius;
- -arrow-background-color: transparent;
- -arrow-border-color: transparent;
- -arrow-border-width: 0;
- -arrow-base: 0;
- -arrow-rise: $base_margin; // use this as top margin
- -arrow-box-shadow: none; // dreaming bugzilla #689995
margin: $base_margin; // used as distance from the screen edge
}
@@ -23,20 +14,16 @@
&.panel-menu {
-boxpointer-gap: $base_margin+2px; // distance from the panel
margin-bottom: 1.75em; // so it doesn't touch the bottom of the screen
-
- // style the menu content instead
- .popup-menu-content {
- padding: $base_padding*1.5;
- }
-
- .popup-menu-item {}
}
}
-// popover content;
+// popover content
.popup-menu-content {
padding: $base_padding;
- border-radius: $modal_radius;
+ // account for margin oddities
+ padding-top: $base_padding - 2px !important;
+ padding-bottom: $base_padding - 2px !important;
+ border-radius: $modal_radius - 2px;
border: 1px solid $borders_edge;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
background-color: $bg_color;
@@ -44,82 +31,76 @@
// menu items
.popup-menu-item {
- spacing: $base_spacing;
- padding: $base_padding*1.5;
+ padding: $base_padding*1.5 $base_padding*2;
margin: 2px 0;
border-radius: $base_border_radius;
transition: 0.2s all ease;
+ background-color: transparent;
- &:ltr {padding-right:$base_padding; padding-left: 0;}
- &:rtl {padding-right: 0; padding-left:$base_padding;}
+ &:hover { background-color: $hover_bg_color !important;}
- &:hover {
- background-color: $hover_bg_color;
+ &:checked {
+ background-color: $checked_bg_color !important;
}
&:checked {
- background-color: $hover_bg_color;
margin-bottom: 0;
- box-shadow: inset 0 -1px 0 0 darken($hover_bg_color, 3%);
+ box-shadow: inset 0 -1px 0 0 darken($checked_bg_color, 5%);
border-radius: $base_border_radius $base_border_radius 0 0;
-
- &:hover {
- background-color: lighten($hover_bg_color, 5%);
- }
+ &:hover { background-color: lighten($checked_bg_color, 3%) !important;}
}
- &.selected {
- background-color: transparentize($fg_color, if($variant=='light', 0.7, 0.9));
- color: $fg_color;
- }
-
- &:active {
- background-color: lighten($active_bg_color,3%);
- color: lighten($active_fg_color,3%);
+ &:active {
+ background-color: $active_bg_color;
+ color: $active_fg_color;
}
&:insensitive {color: transparentize($fg_color,0.5);}
}
-// all icons and other graphical elements
+
+// all other graphical elements (sliders)
.popup-inactive-menu-item {
color: $fg_color;
-
- // "Open Windows" label
- font-weight: bold;
- font-size: smaller;
-
- &:insensitive {color: $insensitive_fg_color;}
+ &:insensitive { color: $insensitive_fg_color; }
}
// symbolic icons in popover
.popup-menu-arrow,
-.popup-menu-icon {
- icon-size: 16px !important;
+.popup-menu-icon {
+ icon-size: 16px !important; // for some reason the variable doesn't work here
}
.popup-menu-arrow {
- margin-right: $base_margin;
+ &:ltr {margin-right: $base_margin;}
+ &:rtl {margin-left: $base_margin;}
}
+
// popover submenus
.popup-sub-menu {
- border:none;
- background-color: $hover_bg_color;
+ background-color: $checked_bg_color;
border-radius: 0 0 $base_border_radius $base_border_radius;
.popup-menu-ornament {
- min-width: 14px !important;
+ min-width: $base_icon_size !important;
}
+ // submenu specific styles
.popup-menu-item {
border-radius: 0;
margin: 0;
- padding: $base_padding*1.5 $base_padding*2;
&:last-child {
border-radius: 0 0 $base_border_radius $base_border_radius;
}
+
+ &:hover { background-color: lighten($hover_bg_color, 10%) !important;}
+ &:checked {
+ background-color: lighten($checked_bg_color, 10%) !important;
+ &:hover { background-color: lighten($checked_bg_color, 8%) !important;}
+ }
+ &:active { background-color: lighten($active_bg_color, 10%) !important;}
}
.popup-menu-section {
@@ -132,9 +113,9 @@
// container for radio and check boxes
.popup-menu-ornament {
+ @extend %heading;
width: 1.2em;
- font-weight: bold;
- font-size: 1em;
+ text-align: center !important;
&:ltr {text-align: right;};
&:rtl {text-align: left;};
@@ -175,30 +156,36 @@
.aggregate-menu {
min-width: 22em;
- // this is unneeded in at the top-level this menu, hide it
- .popup-menu-ornament {width:0;padding:0;margin:0;}
-
- .popup-menu-item {
- &:ltr {padding-left:$base_padding;padding-right:$base_padding*2;}
- &:rtl {padding-right:$base_padding;padding-left:$base_padding*2;}
- }
+ // this is unneeded at the top-level in this menu, hide it
+ .popup-menu-ornament { width: 0 !important; }
// lock screen, shutdown, etc. buttons
- .popup-menu-icon {
- padding:0;
- margin: 0 $base_margin;
+ .popup-menu-icon {
-st-icon-style: symbolic;
+ &:ltr {margin-right: $base_margin*2;}
+ &:rtl {margin-left: $base_margin*2;}
}
- // account for icons in submenus with padding
+ // account for ornaments in submenus with padding
.popup-sub-menu .popup-menu-item > :first-child {
- &:ltr {
- padding-left: 0;
- margin-left: $base_icon_size;
- }
- &:rtl {
- padding-right: 0;
- margin-right: $base_icon_size;
+ // this value is hardcoded for visual effect
+ &:ltr { margin-left: $base_margin*2;}
+ &:rtl { margin-right: $base_margin*2;}
+ }
+}
+
+// app menu
+.app-menu {
+
+ // this is unneeded at the top-level in this menu, hide it
+ .popup-menu-ornament { width: 0 !important; }
+
+ .popup-inactive-menu-item:first-child {
+ // "Open Windows" label
+ > StLabel {
+ @extend %caption_heading;
+ &:ltr {margin-right: $base_margin*2;}
+ &:rtl {margin-left: $base_margin*2;}
}
}
}
diff --git a/data/theme/gnome-shell-sass/widgets/_screen-shield.scss
b/data/theme/gnome-shell-sass/widgets/_screen-shield.scss
index fec369724a..6550e5bc09 100644
--- a/data/theme/gnome-shell-sass/widgets/_screen-shield.scss
+++ b/data/theme/gnome-shell-sass/widgets/_screen-shield.scss
@@ -11,7 +11,7 @@
.unlock-dialog-clock-time {
font-size: 64pt;
padding-top: 42px;
- font-feature-settings: "tnum";
+ @extend %numeric;
}
.unlock-dialog-clock-date {
diff --git a/data/theme/gnome-shell-sass/widgets/_screenshot.scss
b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
index 1113606ebc..5ac59a437d 100644
--- a/data/theme/gnome-shell-sass/widgets/_screenshot.scss
+++ b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
@@ -1,75 +1,50 @@
// Screenshot UI
.icon-label-button-container {
- spacing: $base_spacing;
- font-size: $base_font_size - 3pt;
+ spacing: $base_padding;
+ @extend %caption;
- StIcon {
- icon-size: 32px;
- }
+ StIcon { icon-size: $base_icon_size*2;}
}
-$screenshot_ui_panel_padding: 18px;
+$screenshot_ui_panel_padding: $base_padding*3;
$screenshot_ui_shot_cast_margin: 21px;
-$screenshot_ui_shot_cast_border_radius: 12px;
-$screenshot_ui_panel_border_radius: $screenshot_ui_shot_cast_border_radius + $screenshot_ui_shot_cast_margin;
+$screenshot_ui_panel_border_radius: $modal_radius + $screenshot_ui_shot_cast_margin;
$screenshot_ui_shot_cast_spacing: 3px;
-$screenshot_ui_button_red: #e01b24;
+$screenshot_ui_button_red: $error_color;
.screenshot-ui-panel {
- background-color: $osd_bg_color;
+ @extend %osd_panel;
border-radius: $screenshot_ui_panel_border_radius;
padding: $screenshot_ui_panel_padding;
// Reduce the bottom padding a little to accommodate the large capture button.
padding-bottom: $screenshot_ui_panel_padding - 6px;
- margin-bottom: $base_margin * 8;
+ margin-bottom: 4em;
spacing: $base_padding * 2;
}
.screenshot-ui-close-button {
- background-color: $osd_bg_color;
- color: $osd_fg_color;
- border-radius: 99px;
- padding: 6px;
- height: 30px;
- width: 30px;
- box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
- margin-top: 8px;
-
+ @extend .window-close; // copy window close button
+ padding: $base_padding; // but with more padding
&.left { margin-left: 8px; }
&.right { margin-right: 8px; }
-
- & StIcon { icon-size: 24px; }
-
- &:hover {
- background-color: lighten($osd_bg_color, 15%);
- }
-
- &:active {
- color: transparentize($osd_fg_color, 0.2);
- background-color: darken($osd_bg_color, 5%);
- }
}
.screenshot-ui-type-button {
- padding: $base_padding * 2 $base_padding * 3;
+ @extend %osd_button;
+ padding: $base_padding * 2 $base_padding * 3 !important;
border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding;
- font-weight: bold;
- &:hover, &:focus { background-color: $hover_bg_color; }
- &:active { background-color: $active_bg_color; }
- &:checked { background-color: $hover_bg_color; }
- &:insensitive { color: $insensitive_fg_color; }
}
.screenshot-ui-capture-button {
width: 36px;
height: 36px;
border-radius: 99px;
- border: 4px white;
+ border: 4px $osd_fg_color;
padding: 4px;
.screenshot-ui-capture-button-circle {
- background-color: white;
+ background-color: $osd_fg_color;
transition-duration: 200ms;
&:hover, &:focus { background-color: $hover_bg_color; }
border-radius: 99px;
@@ -77,13 +52,13 @@ $screenshot_ui_button_red: #e01b24;
&:hover, &:focus {
.screenshot-ui-capture-button-circle {
- background-color: darken(white, 15%);
+ background-color: darken($osd_fg_color, 15%);
}
}
&:active {
.screenshot-ui-capture-button-circle {
- background-color: darken(white, 50%);
+ background-color: darken($osd_fg_color, 50%);
}
}
@@ -108,7 +83,7 @@ $screenshot_ui_button_red: #e01b24;
.screenshot-ui-shot-cast-container {
background-color: $hover_bg_color;
- border-radius: $screenshot_ui_shot_cast_border_radius;
+ border-radius: $modal_radius;
padding: $screenshot_ui_shot_cast_spacing;
spacing: $screenshot_ui_shot_cast_spacing;
@@ -117,39 +92,31 @@ $screenshot_ui_button_red: #e01b24;
}
.screenshot-ui-shot-cast-button {
- padding: $base_padding $base_padding * 1.5;
+ padding: $base_padding $base_padding*2;
background-color: transparent;
&:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
&:active { background-color: $active_bg_color; }
&:checked { background-color: white; color: black; }
- border-radius: $screenshot_ui_shot_cast_border_radius - $screenshot_ui_shot_cast_spacing;
+ border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing;
- StIcon {
- icon-size: $base_icon_size;
- }
+ StIcon { icon-size: $base_icon_size; }
}
.screenshot-ui-show-pointer-button {
- padding: $base_padding * 2;
+ @extend %osd_button;
border-radius: 99px;
- background-color: $hover_bg_color;
- &:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
- &:active { background-color: $active_bg_color; }
- &:checked { background-color: darken($hover_bg_color, 10%); }
-
- StIcon {
- icon-size: $base_icon_size;
- }
+ padding: $base_padding * 2 !important;
+ StIcon { icon-size: $base_icon_size; }
}
.screenshot-ui-area-indicator-shade {
- background-color: rgba(0, 0, 0, .3);
+ background-color: rgba(0,0,0,.3);
}
.screenshot-ui-area-selector {
.screenshot-ui-area-indicator-shade {
- background-color: rgba(0, 0, 0, .5);
+ background-color: rgba(0,0,0,.5);
}
.screenshot-ui-area-indicator-selection {
@@ -160,7 +127,7 @@ $screenshot_ui_button_red: #e01b24;
.screenshot-ui-area-selector-handle {
border-radius: 99px;
background-color: white;
- box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 1px 3px 2px rgba(0,0,0,0.2);
width: 24px;
height: 24px;
}
@@ -182,7 +149,7 @@ $screenshot_ui_button_red: #e01b24;
.screenshot-ui-window-selector-window-border {
transition-duration: 200ms;
- border-radius: 18px;
+ border-radius: $modal_radius;
border: 6px transparent;
}
@@ -215,10 +182,10 @@ $screenshot_ui_button_red: #e01b24;
.screenshot-ui-screen-selector {
transition-duration: 200ms;
- background-color: rgba(0, 0, 0, .5);
+ background-color: rgba(0,0,0,.5);
- &:hover { background-color: rgba(0, 0, 0, .3); }
- &:active { background-color: rgba(0, 0, 0, .7); }
+ &:hover { background-color: rgba(0,0,0,.3); }
+ &:active { background-color: rgba(0,0,0,.7); }
&:checked {
background-color: transparent;
border: 2px white;
diff --git a/data/theme/gnome-shell-sass/widgets/_search-entry.scss
b/data/theme/gnome-shell-sass/widgets/_search-entry.scss
index 409fff0ce9..122a3a5220 100644
--- a/data/theme/gnome-shell-sass/widgets/_search-entry.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-entry.scss
@@ -5,27 +5,17 @@ $search_entry_height: 36px;
%search_entry,
.search-entry {
- background-color: lighten($bg_color, 5%);
- border-width: 2px;
- border-color: transparent;
border-radius: $search_entry_height * 0.5; // half the height
- color: transparentize($fg_color,0.3);
- margin-top: $base_spacing * 2;
- margin-bottom: $base_spacing;
+
+ margin-top: $base_padding * 2;
+ margin-bottom: $base_padding;
padding: $base_padding+1 $base_padding+3;
width: $search_entry_width;
- &:hover {
- background-color: lighten($hover_bg_color, 5%);
- color: lighten($hover_fg_color, 5%);
- }
-
- &:focus {
- border-style: solid;
- border-color: $selected_bg_color;
- color: $fg_color;
- box-shadow: none;
- }
+ @include entry(normal);
+ &:hover { @include entry(hover);}
+ &:focus { @include entry(focus);}
+ &:insensitive { @include entry(insensitive);}
.search-entry-icon {
color: inherit;
diff --git a/data/theme/gnome-shell-sass/widgets/_search-results.scss
b/data/theme/gnome-shell-sass/widgets/_search-results.scss
index c377ba61ff..3ece1b44d4 100644
--- a/data/theme/gnome-shell-sass/widgets/_search-results.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss
@@ -39,11 +39,11 @@
// "no results" text
.search-statustext {
- @extend %status_text;
+ @extend %large_title;
}
.grid-search-results {
- spacing: $base_spacing * 6;
+ spacing: $base_padding * 6;
}
// Search results with icons
@@ -57,7 +57,7 @@
// content
.list-search-provider-content {
- spacing: $base_spacing * 2;
+ spacing: $base_padding * 2;
// provider labels
.list-search-provider-details {
@@ -69,7 +69,7 @@
// search results list
.list-search-results {
- spacing: $base_spacing;
+ spacing: $base_padding;
}
// search result listitem
@@ -83,7 +83,7 @@
// list item title (with leading icon)
.list-search-result-title {
- spacing: $base_spacing * 2;
+ spacing: $base_padding * 2;
// font-weight: bold;
}
diff --git a/data/theme/gnome-shell-sass/widgets/_slider.scss
b/data/theme/gnome-shell-sass/widgets/_slider.scss
index 04de5a21c3..500249aa52 100644
--- a/data/theme/gnome-shell-sass/widgets/_slider.scss
+++ b/data/theme/gnome-shell-sass/widgets/_slider.scss
@@ -3,7 +3,6 @@
$slider_size: 16px;
.slider {
- height: $slider_size;
// slider trough
-barlevel-height: 4px;
-barlevel-background-color: if($variant == 'light', transparentize($fg_color, 0.6),
transparentize($fg_color, 0.8)); //background of the trough
@@ -20,9 +19,4 @@ $slider_size: 16px;
-slider-handle-radius: $slider_size * 0.5; // half the size of the size
-slider-handle-border-width: 0;
-slider-handle-border-color: transparent; // because 0 width
- margin: 0 $base_padding;
-
- color: $fg_color;
- &:hover { color: $hover_bg_color; }
- &:active { color: $active_bg_color; }
}
diff --git a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
index b3144a2198..726b5001ba 100644
--- a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
+++ b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
@@ -8,7 +8,7 @@ $switcher_border_radius: $modal_radius + 8px;
// the full screen container of the switcher
.switcher-popup {
padding: 0;
- spacing: $base_spacing * 4;
+ spacing: $base_padding * 4;
}
// switcher onscreen panel
@@ -20,7 +20,7 @@ $switcher_border_radius: $modal_radius + 8px;
// container for items in list
.switcher-list-item-container {
- spacing: $base_spacing * 2;
+ spacing: $base_padding * 2;
}
// each item in the list
@@ -36,7 +36,7 @@ $switcher_border_radius: $modal_radius + 8px;
// container of thumbnails
.thumbnail-box {
padding: 2px;
- spacing: $base_spacing;
+ spacing: $base_padding;
}
// window thumbnail itself
diff --git a/data/theme/gnome-shell-sass/widgets/_window-picker.scss
b/data/theme/gnome-shell-sass/widgets/_window-picker.scss
index fa3f191945..e494f6d8a1 100644
--- a/data/theme/gnome-shell-sass/widgets/_window-picker.scss
+++ b/data/theme/gnome-shell-sass/widgets/_window-picker.scss
@@ -1,10 +1,11 @@
/* Window Picker */
-$window_picker_spacing: $base_spacing; // 6px
+$window_picker_spacing: $base_padding; // 6px
$window_picker_padding: $base_padding * 2; // 12px
$window_thumbnail_label_color: transparentize($osd_bg_color, 0.4);
+$window_close_button_color: darken(transparentize($osd_bg_color, .05), 3%);
$window_close_button_size: 30px;
$window_close_button_padding: 3px;
@@ -24,24 +25,23 @@ $window_close_button_padding: 3px;
// Close button
.window-close {
- background-color: $osd_bg_color;
+ background-color: $window_close_button_color;
color: $osd_fg_color;
border-radius: $window_close_button_size * 0.5 + $window_close_button_padding * 2;
padding: $window_close_button_padding;
height: $window_close_button_size;
width: $window_close_button_size;
- box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
transition-duration: 300ms;
- & StIcon { icon-size: 24px; }
+ & StIcon { icon-size: 24px; } // uses non standard icon size
&:hover {
- background-color: lighten($osd_bg_color, 15%);
+ background-color: mix($osd_fg_color, $window_close_button_color, 15%);
}
&:active {
color: transparentize($osd_fg_color, 0.2);
- background-color: darken($osd_bg_color, 5%);
+ background-color: darken($window_close_button_color, 5%);
}
}
diff --git a/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
b/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
index 69cf4148bc..2a30a891a8 100644
--- a/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
+++ b/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
@@ -18,7 +18,7 @@ $ws_border_radius: $modal_radius + 8px;
background: transparent;
border: none;
border-radius: 0;
- spacing: $base_spacing * 2;
+ spacing: $base_padding * 2;
}
.ws-switcher-box {
diff --git a/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss
b/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss
index 508ac25361..0a1867cc89 100644
--- a/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss
+++ b/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss
@@ -3,7 +3,7 @@
// thumbnails in overview
.workspace-thumbnails {
visible-width: 32px; //amount visible before hover
- spacing: $base_spacing;
+ spacing: $base_padding;
padding: $base_padding;
.workspace-thumbnail {
diff --git a/data/theme/meson.build b/data/theme/meson.build
index 8467325506..26471b6792 100644
--- a/data/theme/meson.build
+++ b/data/theme/meson.build
@@ -37,7 +37,6 @@ theme_sources = files([
'gnome-shell-sass/widgets/_slider.scss',
'gnome-shell-sass/widgets/_switcher-popup.scss',
'gnome-shell-sass/widgets/_switches.scss',
- 'gnome-shell-sass/widgets/_tiled-previews.scss',
'gnome-shell-sass/widgets/_window-picker.scss',
'gnome-shell-sass/widgets/_workspace-switcher.scss',
'gnome-shell-sass/widgets/_workspace-thumbnails.scss'
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
