style: Improve text scaling support
- new drawing function to convert px to em, for select instances - updated fontsize function to convert fonts in pt to em - replace instances of discrete sizes with defined values - fix instances where assets or icons did not scale along with text - rework panel buttons to accommodate the scaling padding and icons - new 'scalable' definitions for elements that follow text scaling Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3033>
This commit is contained in:
Sam Hewitt
Marge Bot
parent
bb78a0083a
commit
49c0b849c4
@ -5,7 +5,6 @@ $variant: 'dark';
|
||||
@import "gnome-shell-sass/_common";
|
||||
@import "gnome-shell-sass/_widgets";
|
||||
|
||||
.toggle-switch { width: 48px; }
|
||||
.toggle-switch {
|
||||
background-image: url("resource:///org/gnome/shell/theme/toggle-off-hc.svg");
|
||||
&:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-hc.svg"); }
|
||||
|
||||
@ -37,7 +37,9 @@ $osd_insensitive_fg_color: mix($osd_fg_color, $osd_bg_color, 70%);
|
||||
$osd_borders_color: transparentize($osd_fg_color, 0.9);
|
||||
$osd_outer_borders_color: transparentize($osd_fg_color, 0.98);
|
||||
|
||||
// shadows
|
||||
$shadow_color: if($variant == 'light', rgba(0,0,0,.05), rgba(0,0,0,0.2));
|
||||
$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
|
||||
|
||||
// buttons
|
||||
$button_mix_factor: if($variant == 'light', 12%, 9%);
|
||||
|
||||
@ -25,29 +25,39 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
|
||||
|
||||
/* Global Values */
|
||||
|
||||
// padding, margin and spacing
|
||||
$base_padding: 6px;
|
||||
$base_margin: 4px;
|
||||
// Base values of elemetns of the shell in their smallest "unit".
|
||||
// These are used in calculations elsewhere to have elements in proportion
|
||||
$base_font_size: 11pt; // font size
|
||||
$base_padding: 6px; // internal padding of elements
|
||||
$base_margin: 4px; // margin between elements
|
||||
$base_border_radius: 8px; // radii on all elements
|
||||
|
||||
// border radii
|
||||
$base_border_radius: 8px;
|
||||
// Radius used to make sure elements that have rounded corners stay as such.
|
||||
// This is a workaround for 50% not working.
|
||||
$forced_circular_radius: 999px;
|
||||
|
||||
// radii of things that display over other things, e.g. popovers
|
||||
$modal_radius: $base_border_radius*2; // 24px
|
||||
$modal_radius: $base_border_radius * 2;
|
||||
|
||||
// Chroma key to flag when a background-color is always occluded, not visible.
|
||||
// This allows any box-shadow behind it to be rendered more efficiently by
|
||||
// omitting the middle rectangle.
|
||||
$invisible_occluded_bg_color: rgba(3,2,1,0);
|
||||
|
||||
// fonts
|
||||
$base_font_size: 11;
|
||||
$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
|
||||
|
||||
// icons
|
||||
$base_icon_size: 1.09em;
|
||||
// Fixed icon sizes
|
||||
$base_icon_size: 16px;
|
||||
$medium_icon_size: $base_icon_size * 1.5; // 24px
|
||||
$large_icon_size: $base_icon_size * 2; // 32px
|
||||
// $base_icon_size: 16px;
|
||||
|
||||
// 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;
|
||||
|
||||
|
||||
// Stage
|
||||
stage {
|
||||
@ -59,7 +69,7 @@ stage {
|
||||
|
||||
// icon tiles
|
||||
%tile {
|
||||
border-radius: $base_border_radius * 2; // 16px
|
||||
border-radius: $base_border_radius * 2;
|
||||
padding: $base_padding;
|
||||
spacing: $base_padding;
|
||||
border: 2px solid transparent;
|
||||
@ -172,7 +182,7 @@ stage {
|
||||
border: 1px solid transparentize($light_1, 0.9);
|
||||
color: $light_1;
|
||||
|
||||
border-radius: 99px;
|
||||
border-radius: $forced_circular_radius;
|
||||
padding: $base_padding $base_padding * 2;
|
||||
text-align: center;
|
||||
|
||||
@ -185,47 +195,47 @@ stage {
|
||||
/* General Typography */
|
||||
%large_title {
|
||||
font-weight: 300;
|
||||
@include fontsize(24);
|
||||
@include fontsize(24pt);
|
||||
}
|
||||
|
||||
%title_1 {
|
||||
font-weight: 800;
|
||||
@include fontsize(20);
|
||||
@include fontsize(20pt);
|
||||
}
|
||||
|
||||
%title_2 {
|
||||
font-weight: 800;
|
||||
@include fontsize(15);
|
||||
@include fontsize(15pt);
|
||||
}
|
||||
|
||||
%title_3 {
|
||||
font-weight: 700;
|
||||
@include fontsize(15);
|
||||
@include fontsize(15pt);
|
||||
}
|
||||
|
||||
%title_4 {
|
||||
font-weight: 700;
|
||||
@include fontsize(13);
|
||||
@include fontsize(13pt);
|
||||
}
|
||||
|
||||
%heading {
|
||||
font-weight: 700;
|
||||
@include fontsize(11);
|
||||
@include fontsize(11pt);
|
||||
}
|
||||
|
||||
%caption_heading {
|
||||
font-weight: 700;
|
||||
@include fontsize(9);
|
||||
@include fontsize(9pt);
|
||||
}
|
||||
|
||||
%caption {
|
||||
font-weight: 400;
|
||||
@include fontsize(9);
|
||||
@include fontsize(9pt);
|
||||
}
|
||||
|
||||
%smaller {
|
||||
font-weight: 400;
|
||||
@include fontsize(8);
|
||||
@include fontsize(8pt);
|
||||
}
|
||||
|
||||
%monospace {font-family: monospace;}
|
||||
@ -237,7 +247,7 @@ stage {
|
||||
color: $osd_fg_color;
|
||||
background-color: $osd_bg_color;
|
||||
border: 1px solid $osd_outer_borders_color;
|
||||
border-radius: 999px;
|
||||
border-radius: $forced_circular_radius;
|
||||
padding: $base_padding * 2;
|
||||
|
||||
@if $is_highcontrast {
|
||||
|
||||
@ -7,10 +7,20 @@
|
||||
@return 0 1px $c;
|
||||
}
|
||||
|
||||
// provide font size in rem, with px fallback
|
||||
@mixin fontsize($size: 24, $base: 16) {
|
||||
font-size: round($size) + pt;
|
||||
//font-size: ($size / $base) * 1rem;
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Mixin to convert provided font size in pt to em units
|
||||
@mixin fontsize($size, $base: 16px, $unit: pt) {
|
||||
// if pt, convert into unitless value with the assumption: 1pt = 1.091px
|
||||
$adjusted_size: if($unit == pt, $size * 1.091, $size) * 1000;
|
||||
$rounded_size: round($adjusted_size / $base) / 1000;
|
||||
font-size: $rounded_size * 1em;
|
||||
// font-size: round($size) + pt;
|
||||
}
|
||||
|
||||
@mixin draw_shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
|
||||
@ -327,6 +337,7 @@
|
||||
// styling for elements within popovers that look like notifications
|
||||
@mixin card($flat: false) {
|
||||
border-radius: $base_border_radius * 1.5;
|
||||
padding: $scaled_padding * 2;
|
||||
margin: $base_margin;
|
||||
|
||||
@if $flat {
|
||||
@ -387,7 +398,7 @@
|
||||
|
||||
transition-duration: 150ms;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 99px;
|
||||
border-radius: $forced_circular_radius;
|
||||
|
||||
font-weight: bold;
|
||||
background-color: transparent;
|
||||
@ -429,7 +440,7 @@
|
||||
#{$child_class} {
|
||||
transition-duration: 150ms;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 99px;
|
||||
border-radius: $forced_circular_radius;
|
||||
}
|
||||
|
||||
&:active, &:focus, &:checked {
|
||||
|
||||
@ -51,8 +51,8 @@ $app_icon_size: 96px;
|
||||
}
|
||||
|
||||
& .folder-name-container {
|
||||
padding: 24px 36px 0;
|
||||
spacing: 12px;
|
||||
padding: $base_padding * 4 $base_padding * 6 0;
|
||||
spacing: $base_padding * 2;
|
||||
|
||||
& .folder-name-label,
|
||||
& .folder-name-entry {
|
||||
@ -66,15 +66,6 @@ $app_icon_size: 96px;
|
||||
|
||||
/* FIXME: this is to keep the label in sync with the entry */
|
||||
& .folder-name-label { padding: 5px 7px; color: $system_fg_color; }
|
||||
|
||||
& .edit-folder-button {
|
||||
@extend %button;
|
||||
padding: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 99px;
|
||||
& > StIcon { icon-size: $base_icon_size }
|
||||
}
|
||||
}
|
||||
|
||||
& .icon-grid {
|
||||
@ -115,14 +106,15 @@ $app_icon_size: 96px;
|
||||
}
|
||||
|
||||
// App Grid pagination indicators
|
||||
$page_indicator_size: 10px;
|
||||
.page-indicator {
|
||||
padding: $base_padding $base_padding * 2 0;
|
||||
transition-duration:400ms;
|
||||
|
||||
.page-indicator-icon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 10px; // the same as height&width
|
||||
width: $page_indicator_size;
|
||||
height: $page_indicator_size;
|
||||
border-radius: $forced_circular_radius;
|
||||
background-color: white;
|
||||
transition-duration: 400ms;
|
||||
}
|
||||
@ -136,7 +128,7 @@ $app_icon_size: 96px;
|
||||
.system-action-icon {
|
||||
background-color: transparentize($system_fg_color,.9);
|
||||
color: $system_fg_color;
|
||||
border-radius: 99px;
|
||||
border-radius: $forced_circular_radius;
|
||||
icon-size: $app_icon_size * 0.5;
|
||||
@if $is_highcontrast {
|
||||
box-shadow: inset 0 0 0 2px $hc_inset_color;
|
||||
@ -166,11 +158,11 @@ $app_icon_size: 96px;
|
||||
}
|
||||
|
||||
.page-navigation-arrow {
|
||||
margin: 6px;
|
||||
padding: 18px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 99px;
|
||||
margin: $base_padding;
|
||||
padding: $base_padding * 3;
|
||||
width: $medium_icon_size;
|
||||
height: $medium_icon_size;
|
||||
border-radius: $forced_circular_radius;
|
||||
transition-duration: 100ms;
|
||||
|
||||
> StIcon { color: $system_fg_color;}
|
||||
|
||||
@ -1,19 +1,20 @@
|
||||
/* Buttons */
|
||||
|
||||
.button {
|
||||
@extend %button; // that's it
|
||||
min-height: 22px;
|
||||
@extend %button;
|
||||
// uses scalable value since it's a text element
|
||||
min-height: to_em(22px);
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
@extend .button; // same style as buttons
|
||||
@extend %button;
|
||||
|
||||
border-radius: 99px;
|
||||
padding: $base_padding*2;
|
||||
min-height: 16px;
|
||||
border-radius: $forced_circular_radius; // is circular
|
||||
padding: $scaled_padding * 2;
|
||||
min-height: $scalable_icon_size;
|
||||
|
||||
StIcon {
|
||||
icon-size: $base_icon_size;
|
||||
icon-size: $scalable_icon_size;
|
||||
-st-icon-style: symbolic;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
// overall menu
|
||||
#calendarArea {
|
||||
padding: $base_padding - 2px;
|
||||
padding: $base_margin;
|
||||
}
|
||||
|
||||
// Calendar menu side column
|
||||
@ -40,7 +40,7 @@
|
||||
// prev/next month icons
|
||||
.calendar-change-month-back StIcon,
|
||||
.calendar-change-month-forward StIcon {
|
||||
icon-size: $base_icon_size;
|
||||
icon-size: $scalable_icon_size;
|
||||
}
|
||||
|
||||
// month label
|
||||
@ -50,12 +50,10 @@
|
||||
}
|
||||
|
||||
.pager-button {
|
||||
@extend .button, .flat;
|
||||
padding: 0 !important;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
margin: 2px;
|
||||
border-radius: $base_border_radius;
|
||||
@extend .icon-button, .flat;
|
||||
margin: $base_margin * 0.5;
|
||||
padding: $base_padding !important;
|
||||
border-radius: $base_border_radius !important;
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
}
|
||||
@ -66,7 +64,7 @@
|
||||
@extend %smaller;
|
||||
@extend .button, .flat;
|
||||
|
||||
border-radius: 99px;
|
||||
border-radius: $forced_circular_radius;
|
||||
height: 3em !important;
|
||||
width: 3em !important;
|
||||
margin: 2px;
|
||||
@ -82,7 +80,7 @@
|
||||
height: 0.93em !important; // force heading to be smaller height
|
||||
padding-top: $base_padding !important;
|
||||
margin-bottom: 0;
|
||||
border-radius: 9px;
|
||||
border-radius: $base_border_radius * 1.5;
|
||||
}
|
||||
|
||||
&.calendar-weekday {}
|
||||
@ -109,13 +107,13 @@
|
||||
|
||||
// week number style
|
||||
.calendar-week-number {
|
||||
@include fontsize($base_font_size - 4);
|
||||
@extend %smaller;
|
||||
font-weight: bold;
|
||||
font-feature-settings: "tnum";
|
||||
text-align: center;
|
||||
margin: 6px;
|
||||
margin: $base_padding;
|
||||
padding: 0 $base_padding;
|
||||
border-radius: 3px;
|
||||
border-radius: $base_border_radius * 0.5;
|
||||
background-color: transparentize($fg_color, 0.9);
|
||||
color: $insensitive_fg_color;
|
||||
|
||||
@ -128,7 +126,6 @@
|
||||
/* Events */
|
||||
.events-button {
|
||||
@include card;
|
||||
padding: $base_padding * 2;
|
||||
|
||||
.events-box {
|
||||
spacing: $base_padding;
|
||||
@ -154,7 +151,6 @@
|
||||
/* World clocks */
|
||||
.world-clocks-button {
|
||||
@include card;
|
||||
padding: $base_padding * 2;
|
||||
|
||||
.world-clocks-grid {
|
||||
spacing-rows: $base_padding;
|
||||
@ -193,7 +189,6 @@
|
||||
/* Weather */
|
||||
.weather-button {
|
||||
@include card;
|
||||
padding: $base_padding * 2;
|
||||
|
||||
.weather-box {
|
||||
spacing: $base_padding + $base_margin;
|
||||
@ -226,7 +221,7 @@
|
||||
}
|
||||
|
||||
.weather-forecast-icon {
|
||||
icon-size: $large_icon_size;
|
||||
icon-size: $large_scalable_icon_size;
|
||||
}
|
||||
|
||||
.weather-forecast-temp {
|
||||
|
||||
@ -10,8 +10,8 @@
|
||||
box-shadow: inset 0 0 0 1px $outer_borders_color;
|
||||
|
||||
.modal-dialog-content-box {
|
||||
margin: 32px 40px;
|
||||
spacing: 32px;
|
||||
margin: $base_margin * 8 $base_margin * 10;
|
||||
spacing: $base_margin * 8;
|
||||
max-width: 28em;
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
|
||||
/* Message Dialog */
|
||||
.message-dialog-content {
|
||||
spacing: 18px;
|
||||
spacing: $base_padding * 3;
|
||||
|
||||
.message-dialog-title {
|
||||
text-align: center;
|
||||
@ -45,7 +45,7 @@
|
||||
|
||||
/* Dialog List */
|
||||
.dialog-list {
|
||||
spacing: 18px;
|
||||
spacing: $base_padding * 3;
|
||||
|
||||
.dialog-list-title {
|
||||
text-align: center;
|
||||
@ -71,8 +71,8 @@
|
||||
/* Run Dialog */
|
||||
.run-dialog {
|
||||
.modal-dialog-content-box {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 14px;
|
||||
margin-top: $base_padding * 4;
|
||||
margin-bottom: $base_padding * 2;
|
||||
}
|
||||
.run-dialog-entry { width: 20em; }
|
||||
.run-dialog-description {
|
||||
@ -88,25 +88,25 @@
|
||||
width: 28em;
|
||||
|
||||
.modal-dialog-content-box {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: $base_margin * 6;
|
||||
}
|
||||
}
|
||||
|
||||
.prompt-dialog-password-grid {
|
||||
spacing-rows: 8px;
|
||||
spacing-columns: 4px;
|
||||
spacing-rows: $base_margin * 2;
|
||||
spacing-columns: $base_margin;
|
||||
|
||||
.prompt-dialog-password-entry {
|
||||
width: auto;
|
||||
|
||||
// 4px (spacing) + 16px (spinner-width)
|
||||
&:ltr { margin-left: 20px; }
|
||||
&:rtl { margin-right: 20px; }
|
||||
&:ltr { margin-left: $base_margin+$base_icon_size; }
|
||||
&:rtl { margin-right: $base_margin+$base_icon_size; }
|
||||
}
|
||||
}
|
||||
|
||||
.prompt-dialog-password-layout {
|
||||
spacing: 8px;
|
||||
spacing: $base_margin * 2;
|
||||
}
|
||||
|
||||
.prompt-dialog-password-entry {
|
||||
@ -129,16 +129,16 @@
|
||||
|
||||
.polkit-dialog-user-layout {
|
||||
text-align: center;
|
||||
spacing: 8px;
|
||||
margin-bottom: 6px;
|
||||
spacing: $base_margin * 2;
|
||||
margin-bottom: $base_padding;
|
||||
|
||||
.polkit-dialog-user-root-label { color: $warning_color; }
|
||||
}
|
||||
|
||||
/* Audio selection dialog */
|
||||
.audio-device-selection-dialog {
|
||||
.modal-dialog-content-box { margin-bottom: 28px; }
|
||||
.audio-selection-box { spacing: 20px; }
|
||||
.modal-dialog-content-box { margin-bottom: $base_margin * 7; }
|
||||
.audio-selection-box { spacing: $base_margin * 5; }
|
||||
}
|
||||
|
||||
.audio-selection-device {
|
||||
@ -151,8 +151,8 @@
|
||||
}
|
||||
|
||||
.audio-selection-device-box {
|
||||
padding: 20px;
|
||||
spacing: 20px;
|
||||
padding: $base_margin * 5;
|
||||
spacing: $base_margin * 5;
|
||||
}
|
||||
|
||||
.audio-selection-device-icon {
|
||||
|
||||
@ -4,17 +4,17 @@ StEntry {
|
||||
@extend %entry;
|
||||
|
||||
StIcon.capslock-warning {
|
||||
icon-size: $base_icon_size;
|
||||
icon-size: $scalable_icon_size;
|
||||
warning-color: $warning_color;
|
||||
padding: 0 4px;
|
||||
padding: 0 $base_margin;
|
||||
}
|
||||
|
||||
StIcon.peek-password {
|
||||
icon-size: $base_icon_size;
|
||||
padding: 0 4px;
|
||||
icon-size: $scalable_icon_size;
|
||||
padding: 0 $base_margin;
|
||||
}
|
||||
|
||||
StLabel.hint-text {
|
||||
margin-left: 2px;
|
||||
margin-left: $base_margin * 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,6 +5,6 @@
|
||||
}
|
||||
|
||||
.hotplug-notification-item-icon {
|
||||
icon-size: 24px;
|
||||
padding: 0 4px;
|
||||
icon-size: $medium_icon_size;
|
||||
padding: 0 $base_margin;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/* On-screen Keyboard */
|
||||
|
||||
$key_size: 1.2em;
|
||||
$key_border_radius: $base_border_radius + 4px; // 12px
|
||||
$key_border_radius: $base_border_radius * 1.25;
|
||||
$key_bg_color: darken($osd_fg_color, 70%);
|
||||
// $default_key_bg_color: darken($key_bg_color, 4%);
|
||||
$default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken($key_bg_color, 10%));
|
||||
@ -31,8 +31,7 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
|
||||
|
||||
// the keys
|
||||
.keyboard-key {
|
||||
|
||||
@include fontsize($base_font_size + 5);
|
||||
@include fontsize($base_font_size + 5pt);
|
||||
font-weight: bold;
|
||||
min-height: $key_size;
|
||||
min-width: $key_size;
|
||||
@ -92,7 +91,7 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
|
||||
}
|
||||
|
||||
// size of icons on keys
|
||||
StIcon { icon-size: 24px; }
|
||||
StIcon { icon-size: $medium_icon_size; }
|
||||
}
|
||||
|
||||
// long press on a key popup
|
||||
@ -136,7 +135,7 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
|
||||
|
||||
// suggestions
|
||||
.word-suggestions {
|
||||
@include fontsize($base_font_size + 1);
|
||||
@extend %title_4;
|
||||
spacing: 12px;
|
||||
min-height: 17pt;
|
||||
padding: $base_padding * 2;
|
||||
@ -146,7 +145,7 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
|
||||
StButton {
|
||||
margin: 0 3px;
|
||||
min-width: 32px;
|
||||
border-radius: $base_border_radius - 2px;
|
||||
border-radius: 4px;
|
||||
padding: 0px $base_padding * 3;
|
||||
|
||||
@include keyboard_key(undecorated, $key_bg_color, $osd_fg_color);
|
||||
|
||||
@ -46,7 +46,7 @@ $_gdm_dialog_width: 23em;
|
||||
.login-dialog-user-selection-box { padding: 100px 0px; }
|
||||
|
||||
.login-dialog-not-listed-label {
|
||||
@include fontsize($base_font_size);
|
||||
@extend %heading;
|
||||
font-weight: bold;
|
||||
color: darken($_gdm_fg,30%);
|
||||
padding: $base_padding * 2;
|
||||
@ -62,7 +62,7 @@ $_gdm_dialog_width: 23em;
|
||||
|
||||
.login-dialog-auth-list-view { -st-vfade-offset: 1em; }
|
||||
.login-dialog-auth-list {
|
||||
spacing: 6px;
|
||||
spacing: $base_padding;
|
||||
margin-left: 2em;
|
||||
}
|
||||
.login-dialog-auth-list-title {
|
||||
@ -71,7 +71,7 @@ $_gdm_dialog_width: 23em;
|
||||
|
||||
.login-dialog-auth-list-item {
|
||||
border-radius: $base_border_radius * 2;
|
||||
padding: 4px;
|
||||
padding: $base_margin;
|
||||
color: darken($_gdm_fg,30%);
|
||||
|
||||
&:focus, &:selected {
|
||||
@ -81,22 +81,20 @@ $_gdm_dialog_width: 23em;
|
||||
}
|
||||
|
||||
.login-dialog-auth-list-label {
|
||||
@include fontsize($base_font_size + 2);
|
||||
@extend %title_4;
|
||||
font-weight: bold;
|
||||
padding-left: 15px;
|
||||
|
||||
&:ltr { padding-left: 14px; text-align: left; }
|
||||
&:rtl { padding-right: 14px; text-align: right; }
|
||||
&:ltr { padding-left: $base_padding * 2.5; text-align: left; }
|
||||
&:rtl { padding-right: $base_padding * 2.5; text-align: right; }
|
||||
}
|
||||
|
||||
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
|
||||
|
||||
.login-dialog-user-list {
|
||||
spacing: 12px;
|
||||
spacing: $base_padding * 2;
|
||||
width: $_gdm_dialog_width;
|
||||
|
||||
.login-dialog-user-list-item {
|
||||
border-radius: $base_border_radius + 4px;
|
||||
border-radius: $base_border_radius + $base_margin;
|
||||
padding: $base_padding;
|
||||
background-color: transparentize($_gdm_fg, .95);
|
||||
color: $_gdm_fg;
|
||||
@ -110,7 +108,7 @@ $_gdm_dialog_width: 23em;
|
||||
|
||||
.login-dialog-timed-login-indicator {
|
||||
height: 2px;
|
||||
margin-top: 6px;
|
||||
margin-top: $base_padding;
|
||||
background-color: darken($_gdm_fg, 30%);
|
||||
}
|
||||
|
||||
@ -178,7 +176,7 @@ $_gdm_dialog_width: 23em;
|
||||
|
||||
.unlock-dialog-clock-time {
|
||||
@extend %numeric;
|
||||
@include fontsize(72);
|
||||
@include fontsize(72pt);
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
@ -205,8 +203,8 @@ $_gdm_dialog_width: 23em;
|
||||
}
|
||||
|
||||
.unlock-dialog-notifications-container {
|
||||
margin: 12px;
|
||||
spacing: 6px;
|
||||
margin: $base_margin * 3;
|
||||
spacing: $base_padding;
|
||||
width: $_gdm_dialog_width;
|
||||
background-color: transparent;
|
||||
|
||||
@ -217,7 +215,7 @@ $_gdm_dialog_width: 23em;
|
||||
|
||||
.notification,
|
||||
.unlock-dialog-notification-source {
|
||||
padding: 12px 16px;
|
||||
padding: $base_margin * 3 $base_margin * 4;
|
||||
border: none;
|
||||
background-color: transparentize($_gdm_fg,0.9);
|
||||
color: $_gdm_fg;
|
||||
@ -228,17 +226,17 @@ $_gdm_dialog_width: 23em;
|
||||
}
|
||||
|
||||
.unlock-dialog-notification-label {
|
||||
padding-left: 12px;
|
||||
padding-left: $base_padding * 2;
|
||||
padding-right: 0;
|
||||
&:rtl { padding-right: 12px; padding-left: 0; }
|
||||
&:rtl { padding-right: $base_padding * 2; padding-left: 0; }
|
||||
}
|
||||
|
||||
.unlock-dialog-notification-count-text {
|
||||
font-weight: bold;
|
||||
padding: 0 12px;
|
||||
padding: 0 $base_padding * 2;
|
||||
color: $_gdm_fg;
|
||||
background-color: transparentize($_gdm_fg, 0.9);
|
||||
border-radius: 99px;
|
||||
border-radius: $forced_circular_radius;
|
||||
}
|
||||
|
||||
|
||||
@ -257,8 +255,10 @@ $_gdm_dialog_width: 23em;
|
||||
}
|
||||
|
||||
.user-icon {
|
||||
border-radius: $forced_circular_radius;
|
||||
|
||||
& StIcon {
|
||||
padding: 12px;
|
||||
padding: $base_padding * 2;
|
||||
icon-size: $base_icon_size * 2;
|
||||
width: $base_icon_size * 3;
|
||||
height: $base_icon_size * 3;
|
||||
@ -281,7 +281,7 @@ $_gdm_dialog_width: 23em;
|
||||
icon-size: $base_icon_size * 10;
|
||||
|
||||
& StIcon {
|
||||
padding: 32px;
|
||||
padding: $base_padding * 4;
|
||||
icon-size: $base_icon_size * 4;
|
||||
background-color: transparentize($_gdm_fg, 0.9);
|
||||
}
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
|
||||
StEntry {
|
||||
@extend %osd_entry;
|
||||
min-height: 22px;
|
||||
min-height: to_em(22px);
|
||||
}
|
||||
|
||||
.shell-link {
|
||||
@ -97,7 +97,6 @@
|
||||
}
|
||||
|
||||
.lg-extension {
|
||||
padding: $base_padding*2;
|
||||
@include card;
|
||||
}
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
// icon size and color
|
||||
> StIcon {
|
||||
icon-size: $base_icon_size*3; // 48px
|
||||
icon-size: $scalable_icon_size * 3; // 48px
|
||||
margin-bottom: $base_margin * 3;
|
||||
-st-icon-style: symbolic;
|
||||
}
|
||||
@ -63,6 +63,7 @@
|
||||
// message bubbles
|
||||
.message {
|
||||
@include card;
|
||||
padding: 0 !important;
|
||||
|
||||
// icon container
|
||||
.message-icon-bin {
|
||||
@ -73,7 +74,7 @@
|
||||
|
||||
// icon size and color
|
||||
> StIcon {
|
||||
icon-size: $large_icon_size; // 32px
|
||||
icon-size: $large_icon_size;
|
||||
-st-icon-style: symbolic;
|
||||
}
|
||||
|
||||
@ -91,40 +92,39 @@
|
||||
margin-bottom: $base_margin * 2;
|
||||
}
|
||||
|
||||
.message-title-box {
|
||||
spacing: $base_padding;
|
||||
// title
|
||||
.message-title {
|
||||
font-weight: bold;
|
||||
/* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
|
||||
padding-top: 0.57em;
|
||||
}
|
||||
|
||||
// secondary container in title box
|
||||
.message-secondary-bin {
|
||||
padding: 0 $base_margin * 2;
|
||||
|
||||
// notification time stamp
|
||||
> .event-time {
|
||||
@extend %caption;
|
||||
color: transparentize($fg_color, 0.5);
|
||||
@include fontsize($base_font_size - 2);
|
||||
/* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
|
||||
padding-bottom: 0.13em;
|
||||
padding-bottom: to_em(1px);
|
||||
|
||||
&:ltr { text-align: right };
|
||||
&:rtl { text-align: left };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// close button
|
||||
.message-close-button {
|
||||
@extend .icon-button;
|
||||
color: $fg_color;
|
||||
background-color: transparentize($fg_color, 0.8);
|
||||
border-radius: 99px;
|
||||
padding: $base_padding - 1px;
|
||||
padding: 0 !important;
|
||||
border: 5px transparent solid;
|
||||
margin: 1px;
|
||||
&:hover {background-color: transparentize($fg_color, 0.7);}
|
||||
&:active {background-color: transparentize($fg_color, 0.8);}
|
||||
|
||||
> StIcon { icon-size: $base_icon_size; }
|
||||
}
|
||||
|
||||
// body
|
||||
|
||||
@ -8,12 +8,12 @@
|
||||
.user-icon {
|
||||
background-size: contain;
|
||||
color: $osd_fg_color;
|
||||
border-radius: 99px;
|
||||
border-radius: $forced_circular_radius;
|
||||
icon-size: $base_icon_size * 4; // 64px
|
||||
|
||||
& StIcon {
|
||||
background-color: transparentize($osd_fg_color,0.95);
|
||||
border-radius: 99px;
|
||||
border-radius: $forced_circular_radius;
|
||||
padding: $base_padding * 2 ; // 12px
|
||||
width: $base_icon_size * 2.5; height: $base_icon_size * 2.5; // 40px;
|
||||
}
|
||||
|
||||
@ -52,8 +52,8 @@ $notification_banner_width: 34em;
|
||||
}
|
||||
|
||||
.chat-meta-message {
|
||||
@extend %caption;
|
||||
padding-left: 4px;
|
||||
@include fontsize($base_font_size - 2);
|
||||
font-weight: bold;
|
||||
color: lighten($fg_color,18%);
|
||||
&:rtl { padding-left: 0; padding-right: 4px; }
|
||||
|
||||
@ -7,30 +7,30 @@ $osd_levelbar_height:6px;
|
||||
@extend %heading;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
spacing: $base_padding * 2; // 12px
|
||||
spacing: $base_padding * 2;
|
||||
padding: $base_padding * 2 $base_padding * 3;
|
||||
& > * { spacing: 8px; }
|
||||
& > * { spacing: $base_margin * 2; }
|
||||
margin-bottom: 4em;
|
||||
|
||||
StIcon { icon-size: $large_icon_size;}
|
||||
|
||||
StLabel {
|
||||
&:ltr { margin-right: 6px; }
|
||||
&:rtl { margin-left: 6px; }
|
||||
&:ltr { margin-right: $base_padding; }
|
||||
&:rtl { margin-left: $base_padding; }
|
||||
}
|
||||
|
||||
.level {
|
||||
margin-bottom: 4px;
|
||||
&:first-child { margin-bottom: 0px; }
|
||||
margin-bottom: $base_margin;
|
||||
&:first-child { margin-bottom: 0; }
|
||||
|
||||
min-width:$base_icon_size * 10;
|
||||
min-width: 160px;
|
||||
-barlevel-height: $osd_levelbar_height;
|
||||
-barlevel-background-color: transparentize($osd_fg_color, if($variant=='light', 0.7, 0.9));
|
||||
-barlevel-active-background-color: $osd_fg_color;
|
||||
-barlevel-overdrive-color: $destructive_color;
|
||||
-barlevel-overdrive-separator-width: 3px;
|
||||
&:ltr { margin-right: 6px; }
|
||||
&:rtl { margin-left: 6px; }
|
||||
-barlevel-overdrive-separator-width: $base_padding * 0.5;
|
||||
&:ltr { margin-right: $base_padding; }
|
||||
&:rtl { margin-left: $base_padding; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -9,5 +9,5 @@
|
||||
}
|
||||
|
||||
.overview-controls {
|
||||
padding-bottom: 32px;
|
||||
padding-bottom: $base_margin * 8;
|
||||
}
|
||||
|
||||
@ -27,33 +27,37 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
|
||||
// status area icons
|
||||
.system-status-icon {
|
||||
icon-size: $base_icon_size;
|
||||
padding: $base_padding - 1px;
|
||||
icon-size: $scalable_icon_size;
|
||||
padding: $base_padding;
|
||||
margin: 0 $base_margin;
|
||||
}
|
||||
|
||||
.panel-status-indicators-box .system-status-icon,
|
||||
.panel-status-menu-box .system-status-icon {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// app menu icon
|
||||
.app-menu-icon {
|
||||
-st-icon-style: symbolic;
|
||||
// dimensions of the icon are hardcoded
|
||||
}
|
||||
|
||||
&#panelActivities {
|
||||
-natural-hpadding: $base_padding * 2.5;
|
||||
// reduce margin between icons in combined menu
|
||||
.panel-status-menu-box,
|
||||
.panel-status-indicators-box {
|
||||
spacing: $base_margin;
|
||||
|
||||
> .system-status-icon {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&#panelActivities {
|
||||
& StBoxLayout {
|
||||
padding: 0 $scaled_padding * 0.5; // use em padding to keep proportion
|
||||
spacing: 5px;
|
||||
}
|
||||
|
||||
& .workspace-dot {
|
||||
border-radius: 999px;
|
||||
min-width: 8px;
|
||||
min-height: 8px;
|
||||
border-radius: $forced_circular_radius;
|
||||
min-width: $scalable_icon_size * 0.5;
|
||||
min-height: $scalable_icon_size * 0.5;
|
||||
background-color: $panel_fg_color;
|
||||
}
|
||||
}
|
||||
@ -62,11 +66,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
&.screen-recording-indicator,
|
||||
&.screen-sharing-indicator {
|
||||
StBoxLayout {
|
||||
spacing: $base_padding;
|
||||
spacing: $scaled_padding;
|
||||
}
|
||||
|
||||
StIcon {
|
||||
icon-size: $base_icon_size;
|
||||
icon-size: $scalable_icon_size;
|
||||
}
|
||||
}
|
||||
|
||||
@ -88,6 +92,10 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
.clock {
|
||||
// the highlighted child
|
||||
}
|
||||
|
||||
.messages-indicator {
|
||||
icon-size: $scalable_icon_size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -137,13 +145,13 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
|
||||
// App Menu
|
||||
#appMenu {
|
||||
spacing: $base_padding;
|
||||
spacing: $scaled_padding;
|
||||
.label-shadow { color: transparent; }
|
||||
}
|
||||
|
||||
#appMenu .panel-status-menu-box {
|
||||
padding: 0 $base_padding;
|
||||
spacing: $base_padding;
|
||||
padding: 0 $scaled_padding;
|
||||
spacing: $scaled_padding;
|
||||
}
|
||||
|
||||
|
||||
@ -151,7 +159,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
.clock-display-box {
|
||||
spacing: 2px;
|
||||
.clock {
|
||||
padding-left: $base_padding * 2;
|
||||
padding-right: $base_padding * 2;
|
||||
padding-left: $scaled_padding * 2;
|
||||
padding-right: $scaled_padding * 2;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
|
||||
|
||||
// the popover itself
|
||||
.popup-menu-boxpointer {
|
||||
-arrow-rise: $base_margin+2px; // distance from the panel & screen edge
|
||||
-arrow-rise: $base_padding; // distance from the panel & screen edge
|
||||
}
|
||||
|
||||
// container of the popover menu
|
||||
@ -67,7 +67,7 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
|
||||
// symbolic icons in popover
|
||||
.popup-menu-arrow,
|
||||
.popup-menu-icon {
|
||||
icon-size: 16px !important; // for some reason the variable doesn't work here
|
||||
icon-size: $scalable_icon_size;
|
||||
}
|
||||
|
||||
// popover submenus
|
||||
@ -103,8 +103,8 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
|
||||
|
||||
// container for radio and check boxes
|
||||
.popup-menu-ornament {
|
||||
icon-size: $base_icon_size !important;
|
||||
width: $base_icon_size;
|
||||
icon-size: $scalable_icon_size !important;
|
||||
width: $scalable_icon_size;
|
||||
}
|
||||
|
||||
// separator
|
||||
|
||||
@ -13,10 +13,10 @@
|
||||
}
|
||||
|
||||
.quick-toggle, .quick-menu-toggle {
|
||||
border-radius: 99px;
|
||||
border-radius: $forced_circular_radius;
|
||||
min-width: 12em;
|
||||
max-width: 12em;
|
||||
min-height: 48px;
|
||||
min-height: $scalable_icon_size * 3; // use icon size so the button scales
|
||||
border:none;
|
||||
}
|
||||
|
||||
@ -35,11 +35,11 @@
|
||||
.quick-toggle-title { font-weight: bold; }
|
||||
|
||||
& StBoxLayout > .quick-toggle-subtitle {
|
||||
@extend %caption;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.quick-toggle-icon { icon-size: $base_icon_size; }
|
||||
.quick-toggle-icon { icon-size: $scalable_icon_size; }
|
||||
}
|
||||
|
||||
.quick-menu-toggle {
|
||||
@ -47,17 +47,17 @@
|
||||
min-width: auto;
|
||||
max-width: auto;
|
||||
|
||||
&:ltr { border-radius: 99px 0 0 99px; }
|
||||
&:ltr > StBoxLayout { padding-right: $base_padding*1.5; }
|
||||
&:rtl { border-radius: 0 99px 99px 0; }
|
||||
&:rtr > StBoxLayout { padding-left: $base_padding*1.5; }
|
||||
&:ltr { border-radius: $forced_circular_radius 0 0 $forced_circular_radius; }
|
||||
&:ltr > StBoxLayout { padding-right: $scaled_padding * 1.5; }
|
||||
&:rtl { border-radius: 0 $forced_circular_radius $forced_circular_radius 0; }
|
||||
&:rtr > StBoxLayout { padding-left: $scaled_padding * 1.5; }
|
||||
|
||||
&:ltr:last-child { border-radius: 99px; }
|
||||
&:rtl:last-child { border-radius: 99px; }
|
||||
&:ltr:last-child { border-radius: $forced_circular_radius; }
|
||||
&:rtl:last-child { border-radius: $forced_circular_radius; }
|
||||
}
|
||||
|
||||
& .quick-toggle-arrow {
|
||||
padding: $base_padding $base_padding*1.75;
|
||||
padding: $scaled_padding $scaled_padding * 1.75;
|
||||
border-width: 0;
|
||||
border-color: transparentize($fg_color, .75);
|
||||
|
||||
@ -67,11 +67,11 @@
|
||||
}
|
||||
|
||||
&:ltr {
|
||||
border-radius: 0 99px 99px 0;
|
||||
border-radius: 0 $forced_circular_radius $forced_circular_radius 0;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
&:rtl {
|
||||
border-radius: 99px 0 0 99px;
|
||||
border-radius: $forced_circular_radius 0 0 $forced_circular_radius;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
}
|
||||
@ -85,7 +85,7 @@
|
||||
.slider-bin {
|
||||
&:focus {@include button(focus);}
|
||||
padding: $base_padding;
|
||||
border-radius: 99px;
|
||||
border-radius: $forced_circular_radius;
|
||||
}
|
||||
}
|
||||
|
||||
@ -97,19 +97,22 @@
|
||||
color: $fg_color !important;
|
||||
|
||||
border-radius: $base_border_radius * 3;
|
||||
padding: $base_padding*2;
|
||||
|
||||
margin: $base_padding * 2 $base_padding * 3 0;
|
||||
|
||||
.popup-menu-item > StIcon { -st-icon-style: symbolic; }
|
||||
.popup-menu-item > StIcon {
|
||||
-st-icon-style: symbolic;
|
||||
icon-size: $scalable_icon_size;
|
||||
}
|
||||
|
||||
& .header {
|
||||
spacing-rows: 0.5 * $base_padding;
|
||||
spacing-rows: $base_padding * 0.5;
|
||||
spacing-columns: $base_padding * 2;
|
||||
padding-bottom: 2 * $base_padding;
|
||||
padding-bottom: $base_padding * 2;
|
||||
|
||||
& .icon {
|
||||
icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok
|
||||
border-radius: 999px;
|
||||
icon-size: $medium_scalable_icon_size;
|
||||
border-radius: $forced_circular_radius;
|
||||
padding: 1.5 * $base_padding;
|
||||
background-color: transparentize($fg_color, 0.8);
|
||||
|
||||
@ -133,7 +136,7 @@
|
||||
}
|
||||
|
||||
.quick-settings-system-item {
|
||||
& > StBoxLayout { spacing: 2 * $base_padding; }
|
||||
& > StBoxLayout { spacing: $base_padding * 2; }
|
||||
|
||||
& .power-item {
|
||||
min-height: 0;
|
||||
@ -147,7 +150,7 @@
|
||||
}
|
||||
|
||||
.nm-network-item {
|
||||
.wireless-secure-icon { icon-size: 0.5 * $base_icon_size; }
|
||||
.wireless-secure-icon { icon-size: $scalable_icon_size * 0.5; } // half-size symbolic
|
||||
}
|
||||
|
||||
.bt-device-item {
|
||||
@ -172,10 +175,10 @@
|
||||
// background apps
|
||||
|
||||
.background-apps-quick-toggle {
|
||||
min-height: 40px;
|
||||
min-height: to_em(40px);
|
||||
background-color: transparent;
|
||||
|
||||
& StIcon { icon-size: $base_icon_size !important; }
|
||||
& StIcon { icon-size: $scalable_icon_size !important; }
|
||||
}
|
||||
|
||||
.background-app-item {
|
||||
|
||||
@ -1,16 +1,7 @@
|
||||
// Screenshot UI
|
||||
.icon-label-button-container {
|
||||
spacing: $base_padding;
|
||||
@extend %caption;
|
||||
|
||||
StIcon { icon-size: 32px;}
|
||||
}
|
||||
|
||||
$screenshot_ui_panel_padding: $base_padding * 3;
|
||||
$screenshot_ui_shot_cast_margin: 21px;
|
||||
$screenshot_ui_panel_border_radius: $modal_radius + $screenshot_ui_shot_cast_margin;
|
||||
$screenshot_ui_shot_cast_spacing: 3px;
|
||||
|
||||
$screenshot_ui_panel_border_radius: $modal_radius * 2;
|
||||
$screenshot_ui_button_red: $error_color;
|
||||
|
||||
.screenshot-ui-panel {
|
||||
@ -18,7 +9,7 @@ $screenshot_ui_button_red: $error_color;
|
||||
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;
|
||||
padding-bottom: $screenshot_ui_panel_padding - $base_padding;
|
||||
margin-bottom: 4em;
|
||||
spacing: $base_padding * 2;
|
||||
}
|
||||
@ -26,31 +17,38 @@ $screenshot_ui_button_red: $error_color;
|
||||
.screenshot-ui-close-button {
|
||||
@extend .window-close; // copy window close button
|
||||
padding: $base_padding !important; // but with more padding
|
||||
margin-top: 12px;
|
||||
margin-top: $base_margin * 3;
|
||||
box-shadow: 0 2px 4px 0 $shadow_color;
|
||||
&.left { margin-left: 12px;}
|
||||
&.right { margin-right: 12px;}
|
||||
&.left { margin-left: $base_margin * 3;}
|
||||
&.right { margin-right: $base_margin * 3;}
|
||||
}
|
||||
|
||||
.screenshot-ui-type-button {
|
||||
@extend %osd_button_flat;
|
||||
min-width: 48px;
|
||||
padding: $base_padding * 2 $base_padding * 3 !important;
|
||||
padding: $base_padding * 2 $base_padding * 3;
|
||||
border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding;
|
||||
|
||||
.icon-label-button-container {
|
||||
@extend %caption;
|
||||
spacing: $scaled_padding;
|
||||
|
||||
> StIcon { icon-size: $large_icon_size;}
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot-ui-capture-button {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 99px;
|
||||
width: $large_icon_size;
|
||||
height: $large_icon_size;
|
||||
border-radius: $forced_circular_radius;
|
||||
border: 4px $osd_fg_color;
|
||||
padding: 4px;
|
||||
padding: $base_margin;
|
||||
|
||||
.screenshot-ui-capture-button-circle {
|
||||
background-color: $osd_fg_color;
|
||||
transition-duration: 200ms;
|
||||
&:hover, &:focus { background-color: $hover_bg_color;}
|
||||
border-radius: 99px;
|
||||
border-radius: $forced_circular_radius;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
@ -84,29 +82,27 @@ $screenshot_ui_button_red: $error_color;
|
||||
|
||||
.screenshot-ui-shot-cast-container {
|
||||
background-color: transparentize($osd_fg_color,0.9);
|
||||
border-radius: $modal_radius;
|
||||
padding: $screenshot_ui_shot_cast_spacing;
|
||||
spacing: $screenshot_ui_shot_cast_spacing;
|
||||
|
||||
border-radius: $forced_circular_radius;
|
||||
padding: $base_padding * 0.5;
|
||||
spacing: $base_padding * 0.5;
|
||||
|
||||
@if $is_highcontrast {
|
||||
box-shadow: inset 0 0 0 1px $hc_inset_color;
|
||||
}
|
||||
|
||||
&:ltr { margin-left: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;}
|
||||
&:rtl { margin-right: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;}
|
||||
}
|
||||
|
||||
// non-standard button style
|
||||
.screenshot-ui-shot-cast-button {
|
||||
padding: $base_padding $base_padding * 2;
|
||||
background-color: transparent;
|
||||
border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing;
|
||||
StIcon { icon-size: $base_icon_size;}
|
||||
border-radius: $forced_circular_radius;
|
||||
|
||||
@if $is_highcontrast {
|
||||
box-shadow: inset 0 0 0 1px $hc_inset_color;
|
||||
}
|
||||
|
||||
> StIcon { icon-size: $base_icon_size;}
|
||||
|
||||
&:hover, &:focus { background-color: transparentize($osd_fg_color, 0.8);}
|
||||
&:active { background-color: transparentize($osd_fg_color, .5);}
|
||||
&:checked { background-color: $osd_fg_color; color: $osd_bg_color;}
|
||||
@ -115,9 +111,7 @@ $screenshot_ui_button_red: $error_color;
|
||||
|
||||
.screenshot-ui-show-pointer-button {
|
||||
@extend %osd_button_flat;
|
||||
border-radius: 99px;
|
||||
padding: $base_padding * 2 !important;
|
||||
StIcon { icon-size: $base_icon_size;}
|
||||
@extend .icon-button;
|
||||
}
|
||||
|
||||
.screenshot-ui-area-indicator-shade {
|
||||
@ -135,11 +129,11 @@ $screenshot_ui_button_red: $error_color;
|
||||
}
|
||||
|
||||
.screenshot-ui-area-selector-handle {
|
||||
border-radius: 99px;
|
||||
border-radius: $forced_circular_radius;
|
||||
background-color: white;
|
||||
box-shadow: 0 1px 3px 2px $shadow_color;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: $medium_icon_size;
|
||||
height: $medium_icon_size;
|
||||
}
|
||||
|
||||
.screenshot-ui-window-selector {
|
||||
@ -166,9 +160,9 @@ $screenshot_ui_button_red: $error_color;
|
||||
.screenshot-ui-window-selector-check {
|
||||
transition-duration: 200ms;
|
||||
color: transparent;
|
||||
border-radius: 99px;
|
||||
border-radius: $forced_circular_radius;
|
||||
border-width: 12px;
|
||||
icon-size: 24px;
|
||||
icon-size: $medium_icon_size;
|
||||
}
|
||||
|
||||
.screenshot-ui-window-selector-window {
|
||||
@ -205,5 +199,5 @@ $screenshot_ui_button_red: $error_color;
|
||||
.screenshot-ui-tooltip {
|
||||
@extend %tooltip;
|
||||
text-align: center;
|
||||
-y-offset: 24px;
|
||||
-y-offset: $base_margin * 6;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Search entry
|
||||
.search-entry {
|
||||
border-radius: 99px;
|
||||
border-radius: $forced_circular_radius;
|
||||
margin-top: $base_padding * 2;
|
||||
margin-bottom: $base_padding;
|
||||
width: 24em;
|
||||
@ -8,8 +8,8 @@
|
||||
@extend %system_entry;
|
||||
|
||||
.search-entry-icon {
|
||||
icon-size: $base_icon_size;
|
||||
icon-size: $scalable_icon_size;
|
||||
margin-top: 2px; // center vertically
|
||||
padding: 0 4px;
|
||||
padding: 0 $base_margin;
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
|
||||
%search_section_content_item {
|
||||
@include tile_button($system_fg_color);
|
||||
border-radius: $base_border_radius+3px;
|
||||
border-radius: $base_border_radius * 1.65;
|
||||
}
|
||||
|
||||
// "no results" text
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/* Slider */
|
||||
|
||||
$slider_size: 16px;
|
||||
$slider_size: $scalable_icon_size;
|
||||
|
||||
.slider {
|
||||
// slider trough
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
// same as dash
|
||||
$switcher_padding: $base_padding * 2;
|
||||
$switcher_radius: $modal_radius + $switcher_padding;
|
||||
|
||||
|
||||
// the full screen container of the switcher
|
||||
@ -14,7 +15,7 @@ $switcher_padding: $base_padding*2;
|
||||
.switcher-list {
|
||||
@extend %osd_panel;
|
||||
padding: $switcher_padding;
|
||||
border-radius: $modal_radius+$switcher_padding;
|
||||
border-radius: $switcher_radius;
|
||||
box-shadow: 0 8px 8px 0 $shadow_color;
|
||||
|
||||
// container for items in list
|
||||
|
||||
@ -1,18 +1,10 @@
|
||||
/* Window Picker */
|
||||
|
||||
$window_picker_spacing: $base_padding; // 6px
|
||||
$window_picker_padding: $base_padding * 2; // 12px
|
||||
|
||||
$window_thumbnail_label_color: transparentize($system_bg_color, 0.4);
|
||||
|
||||
$window_close_button_color: transparentize(lighten($system_bg_color, 7%), .02);
|
||||
$window_close_button_size: 30px;
|
||||
$window_close_button_padding: 3px;
|
||||
|
||||
// Window picker
|
||||
.window-picker {
|
||||
// Space between window thumbnails
|
||||
spacing: $window_picker_spacing;
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
// Window titles
|
||||
@ -24,14 +16,14 @@ $window_close_button_padding: 3px;
|
||||
.window-close {
|
||||
background-color: $window_close_button_color;
|
||||
color: $system_fg_color;
|
||||
border-radius: 99px;
|
||||
border-radius: $forced_circular_radius;
|
||||
box-shadow: 0 2px 4px 0 $shadow_color;
|
||||
padding: $window_close_button_padding;
|
||||
height: $window_close_button_size;
|
||||
width: $window_close_button_size;
|
||||
padding: $base_padding * 0.5;
|
||||
height: $large_icon_size;
|
||||
width: $large_icon_size;
|
||||
transition-duration: 100ms;
|
||||
|
||||
& StIcon { icon-size: 24px; } // uses non standard icon size
|
||||
& StIcon { icon-size: $medium_icon_size; }
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($window_close_button_color, 7%);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/* Workspace Switcher */
|
||||
|
||||
$ws_indicator_height: $large_icon_size;
|
||||
$ws_indicator_height: 48px;
|
||||
$ws_dot_active: $ws_indicator_height / 3;
|
||||
$ws_dot_inactive: $ws_indicator_height / 6;
|
||||
|
||||
|
||||
@ -2607,7 +2607,7 @@ export const AppFolderDialog = GObject.registerClass({
|
||||
|
||||
// Edit button
|
||||
this._editButton = new St.Button({
|
||||
style_class: 'edit-folder-button',
|
||||
style_class: 'icon-button',
|
||||
button_mask: St.ButtonMask.ONE,
|
||||
toggle_mode: true,
|
||||
reactive: true,
|
||||
|
||||
@ -729,7 +729,7 @@ const MessagesIndicator = GObject.registerClass(
|
||||
class MessagesIndicator extends St.Icon {
|
||||
_init() {
|
||||
super._init({
|
||||
icon_size: 16,
|
||||
style_class: 'messages-indicator',
|
||||
visible: false,
|
||||
y_expand: true,
|
||||
y_align: Clutter.ActorAlign.CENTER,
|
||||
|
||||
@ -358,16 +358,20 @@ export const Message = GObject.registerClass({
|
||||
this._mediaControls = new St.BoxLayout();
|
||||
hbox.add_child(this._mediaControls);
|
||||
|
||||
let titleBox = new St.BoxLayout();
|
||||
let titleBox = new St.BoxLayout({style_class: 'message-title-box'});
|
||||
contentBox.add_child(titleBox);
|
||||
|
||||
this.titleLabel = new St.Label({style_class: 'message-title'});
|
||||
this.titleLabel = new St.Label({
|
||||
style_class: 'message-title',
|
||||
y_align: Clutter.ActorAlign.END,
|
||||
});
|
||||
this.setTitle(title);
|
||||
titleBox.add_child(this.titleLabel);
|
||||
|
||||
this._secondaryBin = new St.Bin({
|
||||
style_class: 'message-secondary-bin',
|
||||
x_expand: true, y_expand: true,
|
||||
y_align: Clutter.ActorAlign.END,
|
||||
});
|
||||
titleBox.add_child(this._secondaryBin);
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user