brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: Improve text scaling support

Browse Source 
- 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 2023-11-29 14:18:59 -03:30 committed by Marge Bot
parent bb78a0083a
commit 49c0b849c4
35 changed files with 369 additions and 359 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
data/theme/gnome-shell-high-contrast.scss
View File

@ -5,7 +5,6 @@ $variant: 'dark';
@import "gnome-shell-sass/_common"; @import "gnome-shell-sass/_common";
@import "gnome-shell-sass/_widgets"; @import "gnome-shell-sass/_widgets";
.toggle-switch { width: 48px; }
.toggle-switch { .toggle-switch {
background-image: url("resource:///org/gnome/shell/theme/toggle-off-hc.svg"); 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"); } &:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-hc.svg"); }

2
data/theme/gnome-shell-sass/_colors.scss
View File

@ -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_borders_color: transparentize($osd_fg_color, 0.9);
$osd_outer_borders_color: transparentize($osd_fg_color, 0.98); $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)); $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 // buttons
$button_mix_factor: if($variant == 'light', 12%, 9%); $button_mix_factor: if($variant == 'light', 12%, 9%);

66
data/theme/gnome-shell-sass/_common.scss
View File

@ -25,29 +25,39 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
/* Global Values */ /* Global Values */
// padding, margin and spacing // Base values of elemetns of the shell in their smallest "unit".
$base_padding: 6px; // These are used in calculations elsewhere to have elements in proportion
$base_margin: 4px; $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 // Radius used to make sure elements that have rounded corners stay as such.
$base_border_radius: 8px; // This is a workaround for 50% not working.
$forced_circular_radius: 999px;
// radii of things that display over other things, e.g. popovers // 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. // 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 // This allows any box-shadow behind it to be rendered more efficiently by
// omitting the middle rectangle. // omitting the middle rectangle.
$invisible_occluded_bg_color: rgba(3,2,1,0); $invisible_occluded_bg_color: rgba(3,2,1,0);
// fonts // Fixed icon sizes
$base_font_size: 11; $base_icon_size: 16px;
$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2)); $medium_icon_size: $base_icon_size * 1.5; // 24px
$large_icon_size: $base_icon_size * 2; // 32px
// 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;
// icons
$base_icon_size: 1.09em;
$large_icon_size: $base_icon_size*2; // 32px
// $base_icon_size: 16px;
// Stage // Stage
stage { stage {
@ -59,7 +69,7 @@ stage {
// icon tiles // icon tiles
%tile { %tile {
border-radius: $base_border_radius * 2; // 16px border-radius: $base_border_radius * 2;
padding: $base_padding; padding: $base_padding;
spacing: $base_padding; spacing: $base_padding;
border: 2px solid transparent; border: 2px solid transparent;
@ -78,7 +88,7 @@ stage {
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
font-weight: bold; font-weight: bold;
padding: $base_padding*.5 $base_padding*4; padding: $base_padding * .5 $base_padding * 4;
} }
%button { %button {
@ -108,7 +118,7 @@ stage {
// normal entry style // normal entry style
%entry_common { %entry_common {
border-radius: $base_border_radius; border-radius: $base_border_radius;
padding: $base_padding*1.5 $base_padding*1.5; padding: $base_padding * 1.5 $base_padding * 1.5;
selection-background-color: $selected_bg_color; selection-background-color: $selected_bg_color;
selected-color: $selected_fg_color; selected-color: $selected_fg_color;
} }
@ -172,7 +182,7 @@ stage {
border: 1px solid transparentize($light_1, 0.9); border: 1px solid transparentize($light_1, 0.9);
color: $light_1; color: $light_1;
border-radius: 99px; border-radius: $forced_circular_radius;
padding: $base_padding $base_padding * 2; padding: $base_padding $base_padding * 2;
text-align: center; text-align: center;
@ -185,47 +195,47 @@ stage {
/* General Typography */ /* General Typography */
%large_title { %large_title {
font-weight: 300; font-weight: 300;
@include fontsize(24); @include fontsize(24pt);
} }
%title_1 { %title_1 {
font-weight: 800; font-weight: 800;
@include fontsize(20); @include fontsize(20pt);
} }
%title_2 { %title_2 {
font-weight: 800; font-weight: 800;
@include fontsize(15); @include fontsize(15pt);
} }
%title_3 { %title_3 {
font-weight: 700; font-weight: 700;
@include fontsize(15); @include fontsize(15pt);
} }
%title_4 { %title_4 {
font-weight: 700; font-weight: 700;
@include fontsize(13); @include fontsize(13pt);
} }
%heading { %heading {
font-weight: 700; font-weight: 700;
@include fontsize(11); @include fontsize(11pt);
} }
%caption_heading { %caption_heading {
font-weight: 700; font-weight: 700;
@include fontsize(9); @include fontsize(9pt);
} }
%caption { %caption {
font-weight: 400; font-weight: 400;
@include fontsize(9); @include fontsize(9pt);
} }
%smaller { %smaller {
font-weight: 400; font-weight: 400;
@include fontsize(8); @include fontsize(8pt);
} }
%monospace {font-family: monospace;} %monospace {font-family: monospace;}
@ -237,8 +247,8 @@ stage {
color: $osd_fg_color; color: $osd_fg_color;
background-color: $osd_bg_color; background-color: $osd_bg_color;
border: 1px solid $osd_outer_borders_color; border: 1px solid $osd_outer_borders_color;
border-radius: 999px; border-radius: $forced_circular_radius;
padding: $base_padding*2; padding: $base_padding * 2;
@if $is_highcontrast { @if $is_highcontrast {
border: 2px solid $hc_inset_color; border: 2px solid $hc_inset_color;

27
data/theme/gnome-shell-sass/_drawing.scss
View File

@ -7,10 +7,20 @@
@return 0 1px $c; @return 0 1px $c;
} }
// provide font size in rem, with px fallback // Function to convert px values to em
@mixin fontsize($size: 24, $base: 16) { @function to_em($input, $base: 16px) {
font-size: round($size) + pt; // multiplied and divided by 1000 to make up for round() shortcoming
//font-size: ($size / $base) * 1rem; $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) { @mixin draw_shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
@ -326,7 +336,8 @@
// styling for elements within popovers that look like notifications // styling for elements within popovers that look like notifications
@mixin card($flat: false) { @mixin card($flat: false) {
border-radius: $base_border_radius*1.5; border-radius: $base_border_radius * 1.5;
padding: $scaled_padding * 2;
margin: $base_margin; margin: $base_margin;
@if $flat { @if $flat {
@ -355,7 +366,7 @@
font-weight: normal; font-weight: normal;
spacing: $base_padding; spacing: $base_padding;
transition-duration: 100ms; transition-duration: 100ms;
padding: $base_padding*1.5 $base_padding*2; padding: $base_padding * 1.5 $base_padding * 2;
@if $flat { @if $flat {
@include button(undecorated); @include button(undecorated);
@ -387,7 +398,7 @@
transition-duration: 150ms; transition-duration: 150ms;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 99px; border-radius: $forced_circular_radius;
font-weight: bold; font-weight: bold;
background-color: transparent; background-color: transparent;
@ -429,7 +440,7 @@
#{$child_class} { #{$child_class} {
transition-duration: 150ms; transition-duration: 150ms;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 99px; border-radius: $forced_circular_radius;
} }
&:active, &:focus, &:checked { &:active, &:focus, &:checked {

44
data/theme/gnome-shell-sass/widgets/_app-grid.scss
View File

@ -21,8 +21,8 @@ $app_icon_size: 96px;
@include overview_icon($system_fg_color); @include overview_icon($system_fg_color);
.overview-icon { .overview-icon {
padding: $base_padding*2; padding: $base_padding * 2;
border-radius: $base_border_radius*3; border-radius: $base_border_radius * 3;
color: $system_fg_color; color: $system_fg_color;
} }
.overview-icon.overview-icon-with-label { .overview-icon.overview-icon-with-label {
@ -39,7 +39,7 @@ $app_icon_size: 96px;
// expanded folder // expanded folder
.app-folder-dialog { .app-folder-dialog {
border-radius: $modal_radius*4; border-radius: $modal_radius * 4;
background-color: $system_overlay_bg_color; background-color: $system_overlay_bg_color;
@if $is_highcontrast { @if $is_highcontrast {
@ -51,8 +51,8 @@ $app_icon_size: 96px;
} }
& .folder-name-container { & .folder-name-container {
padding: 24px 36px 0; padding: $base_padding * 4 $base_padding * 6 0;
spacing: 12px; spacing: $base_padding * 2;
& .folder-name-label, & .folder-name-label,
& .folder-name-entry { & .folder-name-entry {
@ -66,15 +66,6 @@ $app_icon_size: 96px;
/* FIXME: this is to keep the label in sync with the entry */ /* FIXME: this is to keep the label in sync with the entry */
& .folder-name-label { padding: 5px 7px; color: $system_fg_color; } & .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 { & .icon-grid {
@ -92,7 +83,7 @@ $app_icon_size: 96px;
} }
.app-folder-dialog-container { .app-folder-dialog-container {
padding: $base_padding*2; padding: $base_padding * 2;
width: 720px; width: 720px;
height: 720px; height: 720px;
} }
@ -115,14 +106,15 @@ $app_icon_size: 96px;
} }
// App Grid pagination indicators // App Grid pagination indicators
$page_indicator_size: 10px;
.page-indicator { .page-indicator {
padding: $base_padding $base_padding * 2 0; padding: $base_padding $base_padding * 2 0;
transition-duration:400ms; transition-duration:400ms;
.page-indicator-icon { .page-indicator-icon {
width: 10px; width: $page_indicator_size;
height: 10px; height: $page_indicator_size;
border-radius: 10px; // the same as height&width border-radius: $forced_circular_radius;
background-color: white; background-color: white;
transition-duration: 400ms; transition-duration: 400ms;
} }
@ -136,7 +128,7 @@ $app_icon_size: 96px;
.system-action-icon { .system-action-icon {
background-color: transparentize($system_fg_color,.9); background-color: transparentize($system_fg_color,.9);
color: $system_fg_color; color: $system_fg_color;
border-radius: 99px; border-radius: $forced_circular_radius;
icon-size: $app_icon_size * 0.5; icon-size: $app_icon_size * 0.5;
@if $is_highcontrast { @if $is_highcontrast {
box-shadow: inset 0 0 0 2px $hc_inset_color; box-shadow: inset 0 0 0 2px $hc_inset_color;
@ -153,7 +145,7 @@ $app_icon_size: 96px;
background-gradient-start: rgba(255, 255, 255, 0.05); background-gradient-start: rgba(255, 255, 255, 0.05);
background-gradient-end: transparent; background-gradient-end: transparent;
background-gradient-direction: horizontal; background-gradient-direction: horizontal;
border-radius: $modal_radius*1.5 0px 0px $modal_radius*1.5; border-radius: $modal_radius * 1.5 0px 0px $modal_radius * 1.5;
} }
&.previous:ltr, &.previous:ltr,
@ -161,16 +153,16 @@ $app_icon_size: 96px;
background-gradient-start: transparent; background-gradient-start: transparent;
background-gradient-end: rgba(255, 255, 255, 0.05); background-gradient-end: rgba(255, 255, 255, 0.05);
background-gradient-direction: horizontal; background-gradient-direction: horizontal;
border-radius: 0px $modal_radius*1.5 $modal_radius*1.5 0px; border-radius: 0px $modal_radius * 1.5 $modal_radius * 1.5 0px;
} }
} }
.page-navigation-arrow { .page-navigation-arrow {
margin: 6px; margin: $base_padding;
padding: 18px; padding: $base_padding * 3;
width: 24px; width: $medium_icon_size;
height: 24px; height: $medium_icon_size;
border-radius: 99px; border-radius: $forced_circular_radius;
transition-duration: 100ms; transition-duration: 100ms;
> StIcon { color: $system_fg_color;} > StIcon { color: $system_fg_color;}

15
data/theme/gnome-shell-sass/widgets/_buttons.scss
View File

@ -1,19 +1,20 @@
/* Buttons */ /* Buttons */
.button { .button {
@extend %button; // that's it @extend %button;
min-height: 22px; // uses scalable value since it's a text element
min-height: to_em(22px);
} }
.icon-button { .icon-button {
@extend .button; // same style as buttons @extend %button;
border-radius: 99px; border-radius: $forced_circular_radius; // is circular
padding: $base_padding*2; padding: $scaled_padding * 2;
min-height: 16px; min-height: $scalable_icon_size;
StIcon { StIcon {
icon-size: $base_icon_size; icon-size: $scalable_icon_size;
-st-icon-style: symbolic; -st-icon-style: symbolic;
} }
} }

29
data/theme/gnome-shell-sass/widgets/_calendar.scss
View File

@ -2,7 +2,7 @@
// overall menu // overall menu
#calendarArea { #calendarArea {
padding: $base_padding - 2px; padding: $base_margin;
} }
// Calendar menu side column // Calendar menu side column
@ -40,7 +40,7 @@
// prev/next month icons // prev/next month icons
.calendar-change-month-back StIcon, .calendar-change-month-back StIcon,
.calendar-change-month-forward StIcon { .calendar-change-month-forward StIcon {
icon-size: $base_icon_size; icon-size: $scalable_icon_size;
} }
// month label // month label
@ -50,12 +50,10 @@
} }
.pager-button { .pager-button {
@extend .button, .flat; @extend .icon-button, .flat;
padding: 0 !important; margin: $base_margin * 0.5;
height: 32px; padding: $base_padding !important;
width: 32px; border-radius: $base_border_radius !important;
margin: 2px;
border-radius: $base_border_radius;
transition-duration: 100ms; transition-duration: 100ms;
} }
} }
@ -66,7 +64,7 @@
@extend %smaller; @extend %smaller;
@extend .button, .flat; @extend .button, .flat;
border-radius: 99px; border-radius: $forced_circular_radius;
height: 3em !important; height: 3em !important;
width: 3em !important; width: 3em !important;
margin: 2px; margin: 2px;
@ -82,7 +80,7 @@
height: 0.93em !important; // force heading to be smaller height height: 0.93em !important; // force heading to be smaller height
padding-top: $base_padding !important; padding-top: $base_padding !important;
margin-bottom: 0; margin-bottom: 0;
border-radius: 9px; border-radius: $base_border_radius * 1.5;
} }
&.calendar-weekday {} &.calendar-weekday {}
@ -109,13 +107,13 @@
// week number style // week number style
.calendar-week-number { .calendar-week-number {
@include fontsize($base_font_size - 4); @extend %smaller;
font-weight: bold; font-weight: bold;
font-feature-settings: "tnum"; font-feature-settings: "tnum";
text-align: center; text-align: center;
margin: 6px; margin: $base_padding;
padding: 0 $base_padding; padding: 0 $base_padding;
border-radius: 3px; border-radius: $base_border_radius * 0.5;
background-color: transparentize($fg_color, 0.9); background-color: transparentize($fg_color, 0.9);
color: $insensitive_fg_color; color: $insensitive_fg_color;
@ -128,7 +126,6 @@
/* Events */ /* Events */
.events-button { .events-button {
@include card; @include card;
padding: $base_padding * 2;
.events-box { .events-box {
spacing: $base_padding; spacing: $base_padding;
@ -154,7 +151,6 @@
/* World clocks */ /* World clocks */
.world-clocks-button { .world-clocks-button {
@include card; @include card;
padding: $base_padding * 2;
.world-clocks-grid { .world-clocks-grid {
spacing-rows: $base_padding; spacing-rows: $base_padding;
@ -193,7 +189,6 @@
/* Weather */ /* Weather */
.weather-button { .weather-button {
@include card; @include card;
padding: $base_padding * 2;
.weather-box { .weather-box {
spacing: $base_padding + $base_margin; spacing: $base_padding + $base_margin;
@ -226,7 +221,7 @@
} }
.weather-forecast-icon { .weather-forecast-icon {
icon-size: $large_icon_size; icon-size: $large_scalable_icon_size;
} }
.weather-forecast-temp { .weather-forecast-temp {

4
data/theme/gnome-shell-sass/widgets/_dash.scss
View File

@ -4,7 +4,7 @@
$dash_background_color: $system_overlay_bg_color; $dash_background_color: $system_overlay_bg_color;
$dash_placeholder_size: 32px; $dash_placeholder_size: 32px;
$dash_padding: $base_padding*2; // 12px $dash_padding: $base_padding * 2; // 12px
$dash_border_radius: $modal_radius + $dash_padding; $dash_border_radius: $modal_radius + $dash_padding;
// container for the dash // container for the dash
@ -53,7 +53,7 @@ $dash_border_radius: $modal_radius + $dash_padding;
// each app item on the dash // each app item on the dash
.app-well-app .overview-icon { .app-well-app .overview-icon {
padding: $base_padding; padding: $base_padding;
border-radius: $base_border_radius*2; border-radius: $base_border_radius * 2;
} }
// show apps button // show apps button

40
data/theme/gnome-shell-sass/widgets/_dialogs.scss
View File

@ -10,8 +10,8 @@
box-shadow: inset 0 0 0 1px $outer_borders_color; box-shadow: inset 0 0 0 1px $outer_borders_color;
.modal-dialog-content-box { .modal-dialog-content-box {
margin: 32px 40px; margin: $base_margin * 8 $base_margin * 10;
spacing: 32px; spacing: $base_margin * 8;
max-width: 28em; max-width: 28em;
} }
@ -32,7 +32,7 @@
/* Message Dialog */ /* Message Dialog */
.message-dialog-content { .message-dialog-content {
spacing: 18px; spacing: $base_padding * 3;
.message-dialog-title { .message-dialog-title {
text-align: center; text-align: center;
@ -45,7 +45,7 @@
/* Dialog List */ /* Dialog List */
.dialog-list { .dialog-list {
spacing: 18px; spacing: $base_padding * 3;
.dialog-list-title { .dialog-list-title {
text-align: center; text-align: center;
@ -71,8 +71,8 @@
/* Run Dialog */ /* Run Dialog */
.run-dialog { .run-dialog {
.modal-dialog-content-box { .modal-dialog-content-box {
margin-top: 24px; margin-top: $base_padding * 4;
margin-bottom: 14px; margin-bottom: $base_padding * 2;
} }
.run-dialog-entry { width: 20em; } .run-dialog-entry { width: 20em; }
.run-dialog-description { .run-dialog-description {
@ -88,25 +88,25 @@
width: 28em; width: 28em;
.modal-dialog-content-box { .modal-dialog-content-box {
margin-bottom: 24px; margin-bottom: $base_margin * 6;
} }
} }
.prompt-dialog-password-grid { .prompt-dialog-password-grid {
spacing-rows: 8px; spacing-rows: $base_margin * 2;
spacing-columns: 4px; spacing-columns: $base_margin;
.prompt-dialog-password-entry { .prompt-dialog-password-entry {
width: auto; width: auto;
// 4px (spacing) + 16px (spinner-width) // 4px (spacing) + 16px (spinner-width)
&:ltr { margin-left: 20px; } &:ltr { margin-left: $base_margin+$base_icon_size; }
&:rtl { margin-right: 20px; } &:rtl { margin-right: $base_margin+$base_icon_size; }
} }
} }
.prompt-dialog-password-layout { .prompt-dialog-password-layout {
spacing: 8px; spacing: $base_margin * 2;
} }
.prompt-dialog-password-entry { .prompt-dialog-password-entry {
@ -129,30 +129,30 @@
.polkit-dialog-user-layout { .polkit-dialog-user-layout {
text-align: center; text-align: center;
spacing: 8px; spacing: $base_margin * 2;
margin-bottom: 6px; margin-bottom: $base_padding;
.polkit-dialog-user-root-label { color: $warning_color; } .polkit-dialog-user-root-label { color: $warning_color; }
} }
/* Audio selection dialog */ /* Audio selection dialog */
.audio-device-selection-dialog { .audio-device-selection-dialog {
.modal-dialog-content-box { margin-bottom: 28px; } .modal-dialog-content-box { margin-bottom: $base_margin * 7; }
.audio-selection-box { spacing: 20px; } .audio-selection-box { spacing: $base_margin * 5; }
} }
.audio-selection-device { .audio-selection-device {
border-radius: $base_border_radius*2; border-radius: $base_border_radius * 2;
&:hover,&:focus { background-color: $hover_bg_color; } &:hover,&:focus { background-color: $hover_bg_color; }
&:active { &:active {
background-color: $selected_bg_color; background-color: $selected_bg_color;
color: $selected_fg_color; color: $selected_fg_color;
} }
} }
.audio-selection-device-box { .audio-selection-device-box {
padding: 20px; padding: $base_margin * 5;
spacing: 20px; spacing: $base_margin * 5;
} }
.audio-selection-device-icon { .audio-selection-device-icon {

10
data/theme/gnome-shell-sass/widgets/_entries.scss
View File

@ -4,17 +4,17 @@ StEntry {
@extend %entry; @extend %entry;
StIcon.capslock-warning { StIcon.capslock-warning {
icon-size: $base_icon_size; icon-size: $scalable_icon_size;
warning-color: $warning_color; warning-color: $warning_color;
padding: 0 4px; padding: 0 $base_margin;
} }
StIcon.peek-password { StIcon.peek-password {
icon-size: $base_icon_size; icon-size: $scalable_icon_size;
padding: 0 4px; padding: 0 $base_margin;
} }
StLabel.hint-text { StLabel.hint-text {
margin-left: 2px; margin-left: $base_margin * 0.5;
} }
} }

4
data/theme/gnome-shell-sass/widgets/_hotplug.scss
View File

@ -5,6 +5,6 @@
} }
.hotplug-notification-item-icon { .hotplug-notification-item-icon {
icon-size: 24px; icon-size: $medium_icon_size;
padding: 0 4px; padding: 0 $base_margin;
} }

6
data/theme/gnome-shell-sass/widgets/_ibus-popup.scss
View File

@ -17,7 +17,7 @@
} }
.candidate-box { .candidate-box {
padding: $base_padding $base_padding*2 $base_padding $base_padding*2; padding: $base_padding $base_padding * 2 $base_padding $base_padding * 2;
border-radius: $base_border_radius; border-radius: $base_border_radius;
&:selected { 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; } &:hover { background-color: $hover_bg_color; color: $hover_fg_color; }
@ -25,8 +25,8 @@
.candidate-page-button-box { .candidate-page-button-box {
height: 2em; height: 2em;
.vertical & { padding-top: $base_padding*2; } .vertical & { padding-top: $base_padding * 2; }
.horizontal & { padding-left: $base_padding*2; } .horizontal & { padding-left: $base_padding * 2; }
} }
.candidate-page-button { .candidate-page-button {

21
data/theme/gnome-shell-sass/widgets/_keyboard.scss
View File

@ -1,7 +1,7 @@
/* On-screen Keyboard */ /* On-screen Keyboard */
$key_size: 1.2em; $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%); $key_bg_color: darken($osd_fg_color, 70%);
// $default_key_bg_color: darken($key_bg_color, 4%); // $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%)); $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 // the keys
.keyboard-key { .keyboard-key {
@include fontsize($base_font_size + 5pt);
@include fontsize($base_font_size + 5);
font-weight: bold; font-weight: bold;
min-height: $key_size; min-height: $key_size;
min-width: $key_size; min-width: $key_size;
@ -80,9 +79,9 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
} }
&.shift-key-lowercase {} &.shift-key-lowercase {}
// pressed shift has different style // pressed shift has different style
&.shift-key-uppercase { &.shift-key-uppercase {
background-color: lighten($key_bg_color, 20%); background-color: lighten($key_bg_color, 20%);
color: $osd_bg_color; color: $osd_bg_color;
&:hover { &:hover {
@ -92,12 +91,12 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
} }
// size of icons on keys // size of icons on keys
StIcon { icon-size: 24px; } StIcon { icon-size: $medium_icon_size; }
} }
// long press on a key popup // long press on a key popup
.keyboard-subkeys { .keyboard-subkeys {
-arrow-border-radius: $base_border_radius*2; -arrow-border-radius: $base_border_radius * 2;
-arrow-background-color: $osd_bg_color; -arrow-background-color: $osd_bg_color;
-arrow-border-width: 1px; -arrow-border-width: 1px;
-arrow-border-color: lighten($osd_bg_color, 9%); -arrow-border-color: lighten($osd_bg_color, 9%);
@ -136,18 +135,18 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
// suggestions // suggestions
.word-suggestions { .word-suggestions {
@include fontsize($base_font_size + 1); @extend %title_4;
spacing: 12px; spacing: 12px;
min-height: 17pt; min-height: 17pt;
padding: $base_padding*2; padding: $base_padding * 2;
color: $osd_fg_color; color: $osd_fg_color;
// each suggestion // each suggestion
StButton { StButton {
margin: 0 3px; margin: 0 3px;
min-width: 32px; min-width: 32px;
border-radius: $base_border_radius - 2px; border-radius: 4px;
padding: 0px $base_padding*3; padding: 0px $base_padding * 3;
@include keyboard_key(undecorated, $key_bg_color, $osd_fg_color); @include keyboard_key(undecorated, $key_bg_color, $osd_fg_color);

70
data/theme/gnome-shell-sass/widgets/_login-lock.scss
View File

@ -28,13 +28,13 @@ $_gdm_dialog_width: 23em;
} }
&.cancel-button { &.cancel-button {
padding: $base_padding*1.5; padding: $base_padding * 1.5;
} }
} }
.login-dialog-button-box { .login-dialog-button-box {
width: $_gdm_dialog_width; width: $_gdm_dialog_width;
spacing: $base_padding*2; spacing: $base_padding * 2;
} }
.login-dialog-logo-bin { .login-dialog-logo-bin {
@ -46,10 +46,10 @@ $_gdm_dialog_width: 23em;
.login-dialog-user-selection-box { padding: 100px 0px; } .login-dialog-user-selection-box { padding: 100px 0px; }
.login-dialog-not-listed-label { .login-dialog-not-listed-label {
@include fontsize($base_font_size); @extend %heading;
font-weight: bold; font-weight: bold;
color: darken($_gdm_fg,30%); color: darken($_gdm_fg,30%);
padding: $base_padding*2; padding: $base_padding * 2;
.login-dialog-not-listed-button:focus &, .login-dialog-not-listed-button:focus &,
.login-dialog-not-listed-button:hover & { .login-dialog-not-listed-button:hover & {
@ -62,7 +62,7 @@ $_gdm_dialog_width: 23em;
.login-dialog-auth-list-view { -st-vfade-offset: 1em; } .login-dialog-auth-list-view { -st-vfade-offset: 1em; }
.login-dialog-auth-list { .login-dialog-auth-list {
spacing: 6px; spacing: $base_padding;
margin-left: 2em; margin-left: 2em;
} }
.login-dialog-auth-list-title { .login-dialog-auth-list-title {
@ -70,8 +70,8 @@ $_gdm_dialog_width: 23em;
} }
.login-dialog-auth-list-item { .login-dialog-auth-list-item {
border-radius: $base_border_radius*2; border-radius: $base_border_radius * 2;
padding: 4px; padding: $base_margin;
color: darken($_gdm_fg,30%); color: darken($_gdm_fg,30%);
&:focus, &:selected { &:focus, &:selected {
@ -81,22 +81,20 @@ $_gdm_dialog_width: 23em;
} }
.login-dialog-auth-list-label { .login-dialog-auth-list-label {
@include fontsize($base_font_size + 2); @extend %title_4;
font-weight: bold; font-weight: bold;
padding-left: 15px; &:ltr { padding-left: $base_padding * 2.5; text-align: left; }
&:rtl { padding-right: $base_padding * 2.5; text-align: right; }
&:ltr { padding-left: 14px; text-align: left; }
&:rtl { padding-right: 14px; text-align: right; }
} }
.login-dialog-user-list-view { -st-vfade-offset: 1em; } .login-dialog-user-list-view { -st-vfade-offset: 1em; }
.login-dialog-user-list { .login-dialog-user-list {
spacing: 12px; spacing: $base_padding * 2;
width: $_gdm_dialog_width; width: $_gdm_dialog_width;
.login-dialog-user-list-item { .login-dialog-user-list-item {
border-radius: $base_border_radius + 4px; border-radius: $base_border_radius + $base_margin;
padding: $base_padding; padding: $base_padding;
background-color: transparentize($_gdm_fg, .95); background-color: transparentize($_gdm_fg, .95);
color: $_gdm_fg; color: $_gdm_fg;
@ -110,7 +108,7 @@ $_gdm_dialog_width: 23em;
.login-dialog-timed-login-indicator { .login-dialog-timed-login-indicator {
height: 2px; height: 2px;
margin-top: 6px; margin-top: $base_padding;
background-color: darken($_gdm_fg, 30%); background-color: darken($_gdm_fg, 30%);
} }
@ -141,7 +139,7 @@ $_gdm_dialog_width: 23em;
} }
.login-dialog-prompt-layout { .login-dialog-prompt-layout {
spacing: $base_padding*2; spacing: $base_padding * 2;
width: 26em; width: 26em;
} }
@ -178,7 +176,7 @@ $_gdm_dialog_width: 23em;
.unlock-dialog-clock-time { .unlock-dialog-clock-time {
@extend %numeric; @extend %numeric;
@include fontsize(72); @include fontsize(72pt);
font-weight: 200; font-weight: 200;
} }
@ -189,8 +187,8 @@ $_gdm_dialog_width: 23em;
.unlock-dialog-clock-hint { .unlock-dialog-clock-hint {
margin-top: 2em; margin-top: 2em;
padding: $base_padding $base_padding*3; padding: $base_padding $base_padding * 3;
border-radius: $base_border_radius*2; border-radius: $base_border_radius * 2;
font-weight: bold; font-weight: bold;
} }
} }
@ -205,8 +203,8 @@ $_gdm_dialog_width: 23em;
} }
.unlock-dialog-notifications-container { .unlock-dialog-notifications-container {
margin: 12px; margin: $base_margin * 3;
spacing: 6px; spacing: $base_padding;
width: $_gdm_dialog_width; width: $_gdm_dialog_width;
background-color: transparent; background-color: transparent;
@ -217,7 +215,7 @@ $_gdm_dialog_width: 23em;
.notification, .notification,
.unlock-dialog-notification-source { .unlock-dialog-notification-source {
padding: 12px 16px; padding: $base_margin * 3 $base_margin * 4;
border: none; border: none;
background-color: transparentize($_gdm_fg,0.9); background-color: transparentize($_gdm_fg,0.9);
color: $_gdm_fg; color: $_gdm_fg;
@ -228,17 +226,17 @@ $_gdm_dialog_width: 23em;
} }
.unlock-dialog-notification-label { .unlock-dialog-notification-label {
padding-left: 12px; padding-left: $base_padding * 2;
padding-right: 0; padding-right: 0;
&:rtl { padding-right: 12px; padding-left: 0; } &:rtl { padding-right: $base_padding * 2; padding-left: 0; }
} }
.unlock-dialog-notification-count-text { .unlock-dialog-notification-count-text {
font-weight: bold; font-weight: bold;
padding: 0 12px; padding: 0 $base_padding * 2;
color: $_gdm_fg; color: $_gdm_fg;
background-color: transparentize($_gdm_fg, 0.9); background-color: transparentize($_gdm_fg, 0.9);
border-radius: 99px; border-radius: $forced_circular_radius;
} }
@ -251,17 +249,19 @@ $_gdm_dialog_width: 23em;
// layout of the user list // layout of the user list
&.horizontal { &.horizontal {
spacing: $base_padding*3; spacing: $base_padding * 3;
.user-widget-label { .user-widget-label {
@extend %title_3; @extend %title_3;
} }
.user-icon { .user-icon {
border-radius: $forced_circular_radius;
& StIcon { & StIcon {
padding: 12px; padding: $base_padding * 2;
icon-size: $base_icon_size*2; icon-size: $base_icon_size * 2;
width: $base_icon_size*3; width: $base_icon_size * 3;
height: $base_icon_size*3; height: $base_icon_size * 3;
background-color: transparentize($_gdm_fg, 0.9); background-color: transparentize($_gdm_fg, 0.9);
} }
} }
@ -269,7 +269,7 @@ $_gdm_dialog_width: 23em;
// layout of the login prompt // layout of the login prompt
&.vertical { &.vertical {
spacing: $base_padding*4; spacing: $base_padding * 4;
.user-widget-label { .user-widget-label {
@extend %title_1; @extend %title_1;
@ -278,11 +278,11 @@ $_gdm_dialog_width: 23em;
} }
.user-icon { .user-icon {
icon-size: $base_icon_size*10; icon-size: $base_icon_size * 10;
& StIcon { & StIcon {
padding: 32px; padding: $base_padding * 4;
icon-size: $base_icon_size*4; icon-size: $base_icon_size * 4;
background-color: transparentize($_gdm_fg, 0.9); background-color: transparentize($_gdm_fg, 0.9);
} }
} }

11
data/theme/gnome-shell-sass/widgets/_looking-glass.scss
View File

@ -29,7 +29,7 @@
.lg-toolbar-button { .lg-toolbar-button {
@extend %osd_button; @extend %osd_button;
padding: $base_padding $base_padding*2; padding: $base_padding $base_padding * 2;
& > StIcon { icon-size: $base_icon_size; } & > StIcon { icon-size: $base_icon_size; }
} }
@ -41,9 +41,9 @@
.notebook-tab { .notebook-tab {
@extend %osd_button; @extend %osd_button;
-natural-hpadding: $base_padding*2; -natural-hpadding: $base_padding * 2;
-minimum-hpadding: $base_padding*2; -minimum-hpadding: $base_padding * 2;
padding: $base_padding $base_padding*2; padding: $base_padding $base_padding * 2;
} }
StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; } StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; }
@ -54,7 +54,7 @@
StEntry { StEntry {
@extend %osd_entry; @extend %osd_entry;
min-height: 22px; min-height: to_em(22px);
} }
.shell-link { .shell-link {
@ -97,7 +97,6 @@
} }
.lg-extension { .lg-extension {
padding: $base_padding*2;
@include card; @include card;
} }

66
data/theme/gnome-shell-sass/widgets/_message-list.scss
View File

@ -16,8 +16,8 @@
// icon size and color // icon size and color
> StIcon { > StIcon {
icon-size: $base_icon_size*3; // 48px icon-size: $scalable_icon_size * 3; // 48px
margin-bottom: $base_margin*3; margin-bottom: $base_margin * 3;
-st-icon-style: symbolic; -st-icon-style: symbolic;
} }
} }
@ -63,6 +63,7 @@
// message bubbles // message bubbles
.message { .message {
@include card; @include card;
padding: 0 !important;
// icon container // icon container
.message-icon-bin { .message-icon-bin {
@ -73,7 +74,7 @@
// icon size and color // icon size and color
> StIcon { > StIcon {
icon-size: $large_icon_size; // 32px icon-size: $large_icon_size;
-st-icon-style: symbolic; -st-icon-style: symbolic;
} }
@ -87,44 +88,43 @@
// content // content
.message-content { .message-content {
spacing: 4px; spacing: 4px;
padding: ($base_padding*1.5); padding: ($base_padding * 1.5);
margin-bottom: $base_margin*2; margin-bottom: $base_margin * 2;
} }
// title .message-title-box {
.message-title { spacing: $base_padding;
font-weight: bold; // title
/* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ .message-title {
padding-top: 0.57em; font-weight: bold;
} }
// secondary container in title box // secondary container in title box
.message-secondary-bin { .message-secondary-bin {
padding: 0 $base_margin * 2;
// notification time stamp // notification time stamp
> .event-time { > .event-time {
color: transparentize($fg_color, 0.5); @extend %caption;
@include fontsize($base_font_size - 2); color: transparentize($fg_color, 0.5);
/* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ padding-bottom: to_em(1px);
padding-bottom: 0.13em;
&:ltr { text-align: right }; &:ltr { text-align: right };
&:rtl { text-align: left }; &:rtl { text-align: left };
}
} }
} }
// close button // close button
.message-close-button { .message-close-button {
@extend .icon-button;
color: $fg_color; color: $fg_color;
background-color: transparentize($fg_color, 0.8); background-color: transparentize($fg_color, 0.8);
border-radius: 99px; padding: 0 !important;
padding: $base_padding - 1px; border: 5px transparent solid;
margin: 1px; margin: 1px;
&:hover {background-color: transparentize($fg_color, 0.7);} &:hover {background-color: transparentize($fg_color, 0.7);}
&:active {background-color: transparentize($fg_color, 0.8);} &:active {background-color: transparentize($fg_color, 0.8);}
> StIcon { icon-size: $base_icon_size; }
} }
// body // body
@ -138,14 +138,14 @@
/* Media Controls */ /* Media Controls */
.message-media-control { .message-media-control {
padding: 0 $base_padding*3; padding: 0 $base_padding * 3;
margin: $base_padding*2 0; margin: $base_padding * 2 0;
border-radius: $base_border_radius; border-radius: $base_border_radius;
color: $fg_color; color: $fg_color;
@if $is_highcontrast { @if $is_highcontrast {
border: 1px solid $hc_inset_color; border: 1px solid $hc_inset_color;
margin: $base_padding*2 2px; margin: $base_padding * 2 2px;
} }
// colors are lightened since the media controls are in a card // colors are lightened since the media controls are in a card
@ -167,15 +167,15 @@
} }
// fix margin for last button // fix margin for last button
&:last-child:ltr { margin-right: $base_margin*3; } &:last-child:ltr { margin-right: $base_margin * 3; }
&:last-child:rtl { margin-left: $base_margin*3; } &:last-child:rtl { margin-left: $base_margin * 3; }
& StIcon { icon-size: $base_icon_size; } & StIcon { icon-size: $base_icon_size; }
} }
// album-art // album-art
.media-message-cover-icon { .media-message-cover-icon {
icon-size: $base_icon_size*3 !important; // 48px icon-size: $base_icon_size * 3 !important; // 48px
border-radius: $base_border_radius; border-radius: $base_border_radius;
// when there is no artwork // when there is no artwork
@ -185,6 +185,6 @@
border: 1px solid transparent; border: 1px solid transparent;
border-radius: $base_border_radius; border-radius: $base_border_radius;
icon-size: $large_icon_size !important; // 32px icon-size: $large_icon_size !important; // 32px
padding: ($base_padding*2 + 2); // 16px padding: ($base_padding * 2 + 2); // 16px
} }
} }

4
data/theme/gnome-shell-sass/widgets/_misc.scss
View File

@ -8,12 +8,12 @@
.user-icon { .user-icon {
background-size: contain; background-size: contain;
color: $osd_fg_color; color: $osd_fg_color;
border-radius: 99px; border-radius: $forced_circular_radius;
icon-size: $base_icon_size * 4; // 64px icon-size: $base_icon_size * 4; // 64px
& StIcon { & StIcon {
background-color: transparentize($osd_fg_color,0.95); background-color: transparentize($osd_fg_color,0.95);
border-radius: 99px; border-radius: $forced_circular_radius;
padding: $base_padding * 2 ; // 12px padding: $base_padding * 2 ; // 12px
width: $base_icon_size * 2.5; height: $base_icon_size * 2.5; // 40px; width: $base_icon_size * 2.5; height: $base_icon_size * 2.5; // 40px;
} }

2
data/theme/gnome-shell-sass/widgets/_notifications.scss
View File

@ -52,8 +52,8 @@ $notification_banner_width: 34em;
} }
.chat-meta-message { .chat-meta-message {
@extend %caption;
padding-left: 4px; padding-left: 4px;
@include fontsize($base_font_size - 2);
font-weight: bold; font-weight: bold;
color: lighten($fg_color,18%); color: lighten($fg_color,18%);
&:rtl { padding-left: 0; padding-right: 4px; } &:rtl { padding-left: 0; padding-right: 4px; }

22
data/theme/gnome-shell-sass/widgets/_osd.scss
View File

@ -7,30 +7,30 @@ $osd_levelbar_height:6px;
@extend %heading; @extend %heading;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
spacing: $base_padding * 2; // 12px spacing: $base_padding * 2;
padding: $base_padding * 2 $base_padding * 3; padding: $base_padding * 2 $base_padding * 3;
& > * { spacing: 8px; } & > * { spacing: $base_margin * 2; }
margin-bottom: 4em; margin-bottom: 4em;
StIcon { icon-size:$large_icon_size;} StIcon { icon-size: $large_icon_size;}
StLabel { StLabel {
&:ltr { margin-right: 6px; } &:ltr { margin-right: $base_padding; }
&:rtl { margin-left: 6px; } &:rtl { margin-left: $base_padding; }
} }
.level { .level {
margin-bottom: 4px; margin-bottom: $base_margin;
&:first-child { margin-bottom: 0px; } &:first-child { margin-bottom: 0; }
min-width:$base_icon_size * 10; min-width: 160px;
-barlevel-height: $osd_levelbar_height; -barlevel-height: $osd_levelbar_height;
-barlevel-background-color: transparentize($osd_fg_color, if($variant=='light', 0.7, 0.9)); -barlevel-background-color: transparentize($osd_fg_color, if($variant=='light', 0.7, 0.9));
-barlevel-active-background-color: $osd_fg_color; -barlevel-active-background-color: $osd_fg_color;
-barlevel-overdrive-color: $destructive_color; -barlevel-overdrive-color: $destructive_color;
-barlevel-overdrive-separator-width: 3px; -barlevel-overdrive-separator-width: $base_padding * 0.5;
&:ltr { margin-right: 6px; } &:ltr { margin-right: $base_padding; }
&:rtl { margin-left: 6px; } &:rtl { margin-left: $base_padding; }
} }
} }

2
data/theme/gnome-shell-sass/widgets/_overview.scss
View File

@ -9,5 +9,5 @@
} }
.overview-controls { .overview-controls {
padding-bottom: 32px; padding-bottom: $base_margin * 8;
} }

46
data/theme/gnome-shell-sass/widgets/_panel.scss
View File

@ -27,33 +27,37 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// status area icons // status area icons
.system-status-icon { .system-status-icon {
icon-size: $base_icon_size; icon-size: $scalable_icon_size;
padding: $base_padding - 1px; padding: $base_padding;
margin: 0 $base_margin; 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
.app-menu-icon { .app-menu-icon {
-st-icon-style: symbolic; -st-icon-style: symbolic;
// dimensions of the icon are hardcoded // dimensions of the icon are hardcoded
} }
&#panelActivities { // reduce margin between icons in combined menu
-natural-hpadding: $base_padding * 2.5; .panel-status-menu-box,
.panel-status-indicators-box {
spacing: $base_margin;
> .system-status-icon {
padding: 0;
}
}
&#panelActivities {
& StBoxLayout { & StBoxLayout {
padding: 0 $scaled_padding * 0.5; // use em padding to keep proportion
spacing: 5px; spacing: 5px;
} }
& .workspace-dot { & .workspace-dot {
border-radius: 999px; border-radius: $forced_circular_radius;
min-width: 8px; min-width: $scalable_icon_size * 0.5;
min-height: 8px; min-height: $scalable_icon_size * 0.5;
background-color: $panel_fg_color; background-color: $panel_fg_color;
} }
} }
@ -62,11 +66,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&.screen-recording-indicator, &.screen-recording-indicator,
&.screen-sharing-indicator { &.screen-sharing-indicator {
StBoxLayout { StBoxLayout {
spacing: $base_padding; spacing: $scaled_padding;
} }
StIcon { 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 { .clock {
// the highlighted child // 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 // App Menu
#appMenu { #appMenu {
spacing: $base_padding; spacing: $scaled_padding;
.label-shadow { color: transparent; } .label-shadow { color: transparent; }
} }
#appMenu .panel-status-menu-box { #appMenu .panel-status-menu-box {
padding: 0 $base_padding; padding: 0 $scaled_padding;
spacing: $base_padding; spacing: $scaled_padding;
} }
@ -151,7 +159,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
.clock-display-box { .clock-display-box {
spacing: 2px; spacing: 2px;
.clock { .clock {
padding-left: $base_padding * 2; padding-left: $scaled_padding * 2;
padding-right: $base_padding * 2; padding-right: $scaled_padding * 2;
} }
} }

16
data/theme/gnome-shell-sass/widgets/_popovers.scss
View File

@ -2,13 +2,13 @@
$menu_bg_color: $bg_color; $menu_bg_color: $bg_color;
$menuitem_bg_color: lighten($menu_bg_color, 4%); $menuitem_bg_color: lighten($menu_bg_color, 4%);
$menuitem_border_radius: $base_border_radius*1.5; $menuitem_border_radius: $base_border_radius * 1.5;
$submenu_bg_color: lighten($menu_bg_color, 7%); $submenu_bg_color: lighten($menu_bg_color, 7%);
// the popover itself // the popover itself
.popup-menu-boxpointer { .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 // container of the popover menu
@ -26,7 +26,7 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
.popup-menu-content { .popup-menu-content {
padding: $base_padding; padding: $base_padding;
background-color: $bg_color; background-color: $bg_color;
border-radius: $modal_radius*1.25; border-radius: $modal_radius * 1.25;
border: 1px solid $outer_borders_color; border: 1px solid $outer_borders_color;
box-shadow: 0 2px 4px 0 $shadow_color; box-shadow: 0 2px 4px 0 $shadow_color;
} }
@ -67,7 +67,7 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
// symbolic icons in popover // symbolic icons in popover
.popup-menu-arrow, .popup-menu-arrow,
.popup-menu-icon { .popup-menu-icon {
icon-size: 16px !important; // for some reason the variable doesn't work here icon-size: $scalable_icon_size;
} }
// popover submenus // popover submenus
@ -103,8 +103,8 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
// container for radio and check boxes // container for radio and check boxes
.popup-menu-ornament { .popup-menu-ornament {
icon-size: $base_icon_size !important; icon-size: $scalable_icon_size !important;
width: $base_icon_size; width: $scalable_icon_size;
} }
// separator // separator
@ -144,8 +144,8 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
// "Open Windows" label // "Open Windows" label
> StLabel { > StLabel {
@extend %caption_heading; @extend %caption_heading;
&:ltr {margin-right: $base_margin*2;} &:ltr {margin-right: $base_margin * 2;}
&:rtl {margin-left: $base_margin*2;} &:rtl {margin-left: $base_margin * 2;}
} }
} }
} }

75
data/theme/gnome-shell-sass/widgets/_quick-settings.scss
View File

@ -1,45 +1,45 @@
.quick-settings { .quick-settings {
padding: $base_padding*3; padding: $base_padding * 3;
border-radius: $modal_radius*2.25; border-radius: $modal_radius * 2.25;
.icon-button, .button { .icon-button, .button {
padding: $base_padding*1.75; padding: $base_padding * 1.75;
} }
} }
.quick-settings-grid { .quick-settings-grid {
spacing-rows: $base_padding*2; spacing-rows: $base_padding * 2;
spacing-columns: $base_padding*2; spacing-columns: $base_padding * 2;
} }
.quick-toggle, .quick-menu-toggle { .quick-toggle, .quick-menu-toggle {
border-radius: 99px; border-radius: $forced_circular_radius;
min-width: 12em; min-width: 12em;
max-width: 12em; max-width: 12em;
min-height: 48px; min-height: $scalable_icon_size * 3; // use icon size so the button scales
border:none; border:none;
} }
.quick-toggle { .quick-toggle {
&:checked { @include button(default, $c:$selected_bg_color); } &:checked { @include button(default, $c:$selected_bg_color); }
& > StBoxLayout { spacing: $base_padding*1.5; } & > StBoxLayout { spacing: $base_padding * 1.5; }
/* Move padding into the box; this is to allow menu arrows /* Move padding into the box; this is to allow menu arrows
to extend to the border */ to extend to the border */
&.button { padding: 0; } &.button { padding: 0; }
& > StBoxLayout { padding: 0 $base_padding*2; } & > StBoxLayout { padding: 0 $base_padding * 2; }
&:ltr > StBoxLayout { padding-left: $base_padding*2.5; } &:ltr > StBoxLayout { padding-left: $base_padding * 2.5; }
&:rtl > StBoxLayout { padding-right: $base_padding*2.5; } &:rtl > StBoxLayout { padding-right: $base_padding * 2.5; }
.quick-toggle-title { font-weight: bold; } .quick-toggle-title { font-weight: bold; }
& StBoxLayout > .quick-toggle-subtitle { & StBoxLayout > .quick-toggle-subtitle {
@extend %caption;
font-weight: normal; 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 { .quick-menu-toggle {
@ -47,17 +47,17 @@
min-width: auto; min-width: auto;
max-width: auto; max-width: auto;
&:ltr { border-radius: 99px 0 0 99px; } &:ltr { border-radius: $forced_circular_radius 0 0 $forced_circular_radius; }
&:ltr > StBoxLayout { padding-right: $base_padding*1.5; } &:ltr > StBoxLayout { padding-right: $scaled_padding * 1.5; }
&:rtl { border-radius: 0 99px 99px 0; } &:rtl { border-radius: 0 $forced_circular_radius $forced_circular_radius 0; }
&:rtr > StBoxLayout { padding-left: $base_padding*1.5; } &:rtr > StBoxLayout { padding-left: $scaled_padding * 1.5; }
&:ltr:last-child { border-radius: 99px; } &:ltr:last-child { border-radius: $forced_circular_radius; }
&:rtl:last-child { border-radius: 99px; } &:rtl:last-child { border-radius: $forced_circular_radius; }
} }
& .quick-toggle-arrow { & .quick-toggle-arrow {
padding: $base_padding $base_padding*1.75; padding: $scaled_padding $scaled_padding * 1.75;
border-width: 0; border-width: 0;
border-color: transparentize($fg_color, .75); border-color: transparentize($fg_color, .75);
@ -67,11 +67,11 @@
} }
&:ltr { &:ltr {
border-radius: 0 99px 99px 0; border-radius: 0 $forced_circular_radius $forced_circular_radius 0;
border-left-width: 1px; border-left-width: 1px;
} }
&:rtl { &:rtl {
border-radius: 99px 0 0 99px; border-radius: $forced_circular_radius 0 0 $forced_circular_radius;
border-right-width: 1px; border-right-width: 1px;
} }
} }
@ -85,7 +85,7 @@
.slider-bin { .slider-bin {
&:focus {@include button(focus);} &:focus {@include button(focus);}
padding: $base_padding; padding: $base_padding;
border-radius: 99px; border-radius: $forced_circular_radius;
} }
} }
@ -96,20 +96,23 @@
background-color: $bg_color !important; background-color: $bg_color !important;
color: $fg_color !important; color: $fg_color !important;
border-radius: $base_border_radius*3; 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; } margin: $base_padding * 2 $base_padding * 3 0;
.popup-menu-item > StIcon {
-st-icon-style: symbolic;
icon-size: $scalable_icon_size;
}
& .header { & .header {
spacing-rows: 0.5 * $base_padding; spacing-rows: $base_padding * 0.5;
spacing-columns: $base_padding*2; spacing-columns: $base_padding * 2;
padding-bottom: 2 * $base_padding; padding-bottom: $base_padding * 2;
& .icon { & .icon {
icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok icon-size: $medium_scalable_icon_size;
border-radius: 999px; border-radius: $forced_circular_radius;
padding: 1.5 * $base_padding; padding: 1.5 * $base_padding;
background-color: transparentize($fg_color, 0.8); background-color: transparentize($fg_color, 0.8);
@ -133,7 +136,7 @@
} }
.quick-settings-system-item { .quick-settings-system-item {
& > StBoxLayout { spacing: 2 * $base_padding; } & > StBoxLayout { spacing: $base_padding * 2; }
& .power-item { & .power-item {
min-height: 0; min-height: 0;
@ -147,7 +150,7 @@
} }
.nm-network-item { .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 { .bt-device-item {
@ -172,10 +175,10 @@
// background apps // background apps
.background-apps-quick-toggle { .background-apps-quick-toggle {
min-height: 40px; min-height: to_em(40px);
background-color: transparent; background-color: transparent;
& StIcon { icon-size: $base_icon_size !important; } & StIcon { icon-size: $scalable_icon_size !important; }
} }
.background-app-item { .background-app-item {

74
data/theme/gnome-shell-sass/widgets/_screenshot.scss
View File

@ -1,16 +1,7 @@
// Screenshot UI // 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_padding: $base_padding * 3;
$screenshot_ui_panel_border_radius: $modal_radius * 2;
$screenshot_ui_button_red: $error_color; $screenshot_ui_button_red: $error_color;
.screenshot-ui-panel { .screenshot-ui-panel {
@ -18,7 +9,7 @@ $screenshot_ui_button_red: $error_color;
border-radius: $screenshot_ui_panel_border_radius; border-radius: $screenshot_ui_panel_border_radius;
padding: $screenshot_ui_panel_padding; padding: $screenshot_ui_panel_padding;
// Reduce the bottom padding a little to accommodate the large capture button. // 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; margin-bottom: 4em;
spacing: $base_padding * 2; spacing: $base_padding * 2;
} }
@ -26,31 +17,38 @@ $screenshot_ui_button_red: $error_color;
.screenshot-ui-close-button { .screenshot-ui-close-button {
@extend .window-close; // copy window close button @extend .window-close; // copy window close button
padding: $base_padding !important; // but with more padding padding: $base_padding !important; // but with more padding
margin-top: 12px; margin-top: $base_margin * 3;
box-shadow: 0 2px 4px 0 $shadow_color; box-shadow: 0 2px 4px 0 $shadow_color;
&.left { margin-left: 12px;} &.left { margin-left: $base_margin * 3;}
&.right { margin-right: 12px;} &.right { margin-right: $base_margin * 3;}
} }
.screenshot-ui-type-button { .screenshot-ui-type-button {
@extend %osd_button_flat; @extend %osd_button_flat;
min-width: 48px; 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; 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 { .screenshot-ui-capture-button {
width: 36px; width: $large_icon_size;
height: 36px; height: $large_icon_size;
border-radius: 99px; border-radius: $forced_circular_radius;
border: 4px $osd_fg_color; border: 4px $osd_fg_color;
padding: 4px; padding: $base_margin;
.screenshot-ui-capture-button-circle { .screenshot-ui-capture-button-circle {
background-color: $osd_fg_color; background-color: $osd_fg_color;
transition-duration: 200ms; transition-duration: 200ms;
&:hover, &:focus { background-color: $hover_bg_color;} &:hover, &:focus { background-color: $hover_bg_color;}
border-radius: 99px; border-radius: $forced_circular_radius;
} }
&:hover, &:focus { &:hover, &:focus {
@ -84,29 +82,27 @@ $screenshot_ui_button_red: $error_color;
.screenshot-ui-shot-cast-container { .screenshot-ui-shot-cast-container {
background-color: transparentize($osd_fg_color,0.9); background-color: transparentize($osd_fg_color,0.9);
border-radius: $modal_radius; border-radius: $forced_circular_radius;
padding: $screenshot_ui_shot_cast_spacing; padding: $base_padding * 0.5;
spacing: $screenshot_ui_shot_cast_spacing; spacing: $base_padding * 0.5;
@if $is_highcontrast { @if $is_highcontrast {
box-shadow: inset 0 0 0 1px $hc_inset_color; 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 { .screenshot-ui-shot-cast-button {
padding: $base_padding $base_padding*2; padding: $base_padding $base_padding * 2;
background-color: transparent; background-color: transparent;
border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing; border-radius: $forced_circular_radius;
StIcon { icon-size: $base_icon_size;}
@if $is_highcontrast { @if $is_highcontrast {
box-shadow: inset 0 0 0 1px $hc_inset_color; 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);} &:hover, &:focus { background-color: transparentize($osd_fg_color, 0.8);}
&:active { background-color: transparentize($osd_fg_color, .5);} &:active { background-color: transparentize($osd_fg_color, .5);}
&:checked { background-color: $osd_fg_color; color: $osd_bg_color;} &: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 { .screenshot-ui-show-pointer-button {
@extend %osd_button_flat; @extend %osd_button_flat;
border-radius: 99px; @extend .icon-button;
padding: $base_padding * 2 !important;
StIcon { icon-size: $base_icon_size;}
} }
.screenshot-ui-area-indicator-shade { .screenshot-ui-area-indicator-shade {
@ -135,11 +129,11 @@ $screenshot_ui_button_red: $error_color;
} }
.screenshot-ui-area-selector-handle { .screenshot-ui-area-selector-handle {
border-radius: 99px; border-radius: $forced_circular_radius;
background-color: white; background-color: white;
box-shadow: 0 1px 3px 2px $shadow_color; box-shadow: 0 1px 3px 2px $shadow_color;
width: 24px; width: $medium_icon_size;
height: 24px; height: $medium_icon_size;
} }
.screenshot-ui-window-selector { .screenshot-ui-window-selector {
@ -166,9 +160,9 @@ $screenshot_ui_button_red: $error_color;
.screenshot-ui-window-selector-check { .screenshot-ui-window-selector-check {
transition-duration: 200ms; transition-duration: 200ms;
color: transparent; color: transparent;
border-radius: 99px; border-radius: $forced_circular_radius;
border-width: 12px; border-width: 12px;
icon-size: 24px; icon-size: $medium_icon_size;
} }
.screenshot-ui-window-selector-window { .screenshot-ui-window-selector-window {
@ -205,5 +199,5 @@ $screenshot_ui_button_red: $error_color;
.screenshot-ui-tooltip { .screenshot-ui-tooltip {
@extend %tooltip; @extend %tooltip;
text-align: center; text-align: center;
-y-offset: 24px; -y-offset: $base_margin * 6;
} }

8
data/theme/gnome-shell-sass/widgets/_search-entry.scss
View File

@ -1,15 +1,15 @@
// Search entry // Search entry
.search-entry { .search-entry {
border-radius: 99px; border-radius: $forced_circular_radius;
margin-top: $base_padding*2; margin-top: $base_padding * 2;
margin-bottom: $base_padding; margin-bottom: $base_padding;
width: 24em; width: 24em;
@extend %system_entry; @extend %system_entry;
.search-entry-icon { .search-entry-icon {
icon-size: $base_icon_size; icon-size: $scalable_icon_size;
margin-top: 2px; // center vertically margin-top: 2px; // center vertically
padding: 0 4px; padding: 0 $base_margin;
} }
} }

16
data/theme/gnome-shell-sass/widgets/_search-results.scss
View File

@ -12,11 +12,11 @@
// search results sections "the boxes" // search results sections "the boxes"
.search-section { .search-section {
// This should be equal to #searchResultsContent spacing // This should be equal to #searchResultsContent spacing
spacing: $base_padding*3; spacing: $base_padding * 3;
// separator (unstyled) // separator (unstyled)
.search-section-separator { .search-section-separator {
height: $base_margin*2; // use it as a spacer height: $base_margin * 2; // use it as a spacer
background-color: transparent; background-color: transparent;
} }
} }
@ -25,14 +25,14 @@
.search-section-content { .search-section-content {
background-color: $system_overlay_bg_color; background-color: $system_overlay_bg_color;
color: $system_fg_color; color: $system_fg_color;
border-radius: $modal_radius*1.5; border-radius: $modal_radius * 1.5;
padding: $base_padding*2; padding: $base_padding * 2;
margin:0 $base_margin*3; margin:0 $base_margin * 3;
} }
%search_section_content_item { %search_section_content_item {
@include tile_button($system_fg_color); @include tile_button($system_fg_color);
border-radius: $base_border_radius+3px; border-radius: $base_border_radius * 1.65;
} }
// "no results" text // "no results" text
@ -42,8 +42,8 @@
} }
.grid-search-results { .grid-search-results {
spacing: $base_padding*5; spacing: $base_padding * 5;
margin:0 $base_margin*3; margin:0 $base_margin * 3;
} }
// Search results with icons // Search results with icons

4
data/theme/gnome-shell-sass/widgets/_slider.scss
View File

@ -1,12 +1,12 @@
/* Slider */ /* Slider */
$slider_size: 16px; $slider_size: $scalable_icon_size;
.slider { .slider {
// slider trough // slider trough
-barlevel-height: 4px; -barlevel-height: 4px;
-barlevel-background-color: transparentize($fg_color, 0.8); //background of the trough -barlevel-background-color: transparentize($fg_color, 0.8); //background of the trough
-barlevel-border-width: 2px; -barlevel-border-width: 2px;
-barlevel-border-color: transparent; // trough border color -barlevel-border-color: transparent; // trough border color
// fill style // fill style
-barlevel-active-background-color: $selected_bg_color; -barlevel-active-background-color: $selected_bg_color;

5
data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
View File

@ -1,7 +1,8 @@
/* App Switcher */ /* App Switcher */
// same as dash // same as dash
$switcher_padding: $base_padding*2; $switcher_padding: $base_padding * 2;
$switcher_radius: $modal_radius + $switcher_padding;
// the full screen container of the switcher // the full screen container of the switcher
@ -14,7 +15,7 @@ $switcher_padding: $base_padding*2;
.switcher-list { .switcher-list {
@extend %osd_panel; @extend %osd_panel;
padding: $switcher_padding; padding: $switcher_padding;
border-radius: $modal_radius+$switcher_padding; border-radius: $switcher_radius;
box-shadow: 0 8px 8px 0 $shadow_color; box-shadow: 0 8px 8px 0 $shadow_color;
// container for items in list // container for items in list

2
data/theme/gnome-shell-sass/widgets/_switches.scss
View File

@ -10,7 +10,7 @@ $switch_width: 48px;
width: $switch_width; width: $switch_width;
background-size: contain; background-size: contain;
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-off-light.svg"),url("resource:///org/gnome/shell/theme/toggle-off.svg")); background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-off-light.svg"),url("resource:///org/gnome/shell/theme/toggle-off.svg"));
&:checked { &:checked {
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on-light.svg"),url("resource:///org/gnome/shell/theme/toggle-on.svg")); background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on-light.svg"),url("resource:///org/gnome/shell/theme/toggle-on.svg"));
} }
} }

20
data/theme/gnome-shell-sass/widgets/_window-picker.scss
View File

@ -1,18 +1,10 @@
/* Window Picker */ /* 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_color: transparentize(lighten($system_bg_color, 7%), .02);
$window_close_button_size: 30px;
$window_close_button_padding: 3px;
// Window picker // Window picker
.window-picker { .window-picker {
// Space between window thumbnails // Space between window thumbnails
spacing: $window_picker_spacing; spacing: $base_padding;
} }
// Window titles // Window titles
@ -24,14 +16,14 @@ $window_close_button_padding: 3px;
.window-close { .window-close {
background-color: $window_close_button_color; background-color: $window_close_button_color;
color: $system_fg_color; color: $system_fg_color;
border-radius: 99px; border-radius: $forced_circular_radius;
box-shadow: 0 2px 4px 0 $shadow_color; box-shadow: 0 2px 4px 0 $shadow_color;
padding: $window_close_button_padding; padding: $base_padding * 0.5;
height: $window_close_button_size; height: $large_icon_size;
width: $window_close_button_size; width: $large_icon_size;
transition-duration: 100ms; transition-duration: 100ms;
& StIcon { icon-size: 24px; } // uses non standard icon size & StIcon { icon-size: $medium_icon_size; }
&:hover { &:hover {
background-color: lighten($window_close_button_color, 7%); background-color: lighten($window_close_button_color, 7%);

2
data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
View File

@ -1,6 +1,6 @@
/* Workspace Switcher */ /* Workspace Switcher */
$ws_indicator_height: $large_icon_size; $ws_indicator_height: 48px;
$ws_dot_active: $ws_indicator_height / 3; $ws_dot_active: $ws_indicator_height / 3;
$ws_dot_inactive: $ws_indicator_height / 6; $ws_dot_inactive: $ws_indicator_height / 6;

2
data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss
View File

@ -9,7 +9,7 @@
.workspace-thumbnail { .workspace-thumbnail {
color: $system_fg_color; color: $system_fg_color;
background-color: lighten($system_bg_color, 10%); background-color: lighten($system_bg_color, 10%);
border-radius: $base_border_radius*0.5; border-radius: $base_border_radius * 0.5;
border: 1px solid transparent; border: 1px solid transparent;
@if $is_highcontrast { @if $is_highcontrast {

2
js/ui/appDisplay.js
View File

@ -2607,7 +2607,7 @@ export const AppFolderDialog = GObject.registerClass({
// Edit button // Edit button
this._editButton = new St.Button({ this._editButton = new St.Button({
style_class: 'edit-folder-button', style_class: 'icon-button',
button_mask: St.ButtonMask.ONE, button_mask: St.ButtonMask.ONE,
toggle_mode: true, toggle_mode: true,
reactive: true, reactive: true,

2
js/ui/dateMenu.js
View File

@ -729,7 +729,7 @@ const MessagesIndicator = GObject.registerClass(
class MessagesIndicator extends St.Icon { class MessagesIndicator extends St.Icon {
_init() { _init() {
super._init({ super._init({
icon_size: 16, style_class: 'messages-indicator',
visible: false, visible: false,
y_expand: true, y_expand: true,
y_align: Clutter.ActorAlign.CENTER, y_align: Clutter.ActorAlign.CENTER,

8
js/ui/messageList.js
View File

@ -358,16 +358,20 @@ export const Message = GObject.registerClass({
this._mediaControls = new St.BoxLayout(); this._mediaControls = new St.BoxLayout();
hbox.add_child(this._mediaControls); hbox.add_child(this._mediaControls);
let titleBox = new St.BoxLayout(); let titleBox = new St.BoxLayout({style_class: 'message-title-box'});
contentBox.add_child(titleBox); 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); this.setTitle(title);
titleBox.add_child(this.titleLabel); titleBox.add_child(this.titleLabel);
this._secondaryBin = new St.Bin({ this._secondaryBin = new St.Bin({
style_class: 'message-secondary-bin', style_class: 'message-secondary-bin',
x_expand: true, y_expand: true, x_expand: true, y_expand: true,
y_align: Clutter.ActorAlign.END,
}); });
titleBox.add_child(this._secondaryBin); titleBox.add_child(this._secondaryBin);