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

theme: Define default user-icon sizing in SASS

Browse Source 
The default sizing for user-icon style was not defined in the theme,
but it simply used the default Avatar iconSize from UserWidget.js.

This didn't work with the current fallback avatar styling (i.e. when
the avatar icon is not set for an user account, and a symbolic icon
is displayed in its place), as the fallback StIcon was not scaled
to align inside the circle shaped user-icon properly.

Define the user-icon and corrected fallback StIcon sizes in the
stylesheet to correct this. The default 64px user-icon size is based
on default UserWidget.Avatar iconSize. The sizing for the StIcon is
taken from `.user-widget.horizontal .user-icon` styling, which uses
the same base icon-size.

Additionally, the special `.user-widget.horizontal .user-icon`
styling is removed, as it is now redundant.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1490>
This commit is contained in:
Joonas Henriksson 2020-11-01 10:55:45 +02:00 committed by Florian Müllner
parent fe90da82b4
commit 6b9f277081
1 changed files with 3 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,7 @@
color: $osd_fg_color; color: $osd_fg_color;
border-radius: 99px; border-radius: 99px;
border: 2px $osd_fg_color; border: 2px $osd_fg_color;
icon-size: $base_icon_size * 4; // 64px
&:hover { &:hover {
color: lighten($osd_fg_color,30%); color: lighten($osd_fg_color,30%);
} }
@ -17,6 +18,8 @@
& StIcon { & StIcon {
background-color: transparentize($osd_fg_color,0.95); background-color: transparentize($osd_fg_color,0.95);
border-radius: 99px; border-radius: 99px;
padding: $base_padding * 2 ; // 12px
width: $base_icon_size * 2.5; height: $base_icon_size * 2.5; // 40px;
} }
} }
@ -31,15 +34,6 @@
} }
} }
.user-widget.horizontal .user-icon {
icon-size: $base_icon_size * 4; // 64px
& StIcon {
padding: $base_padding * 2 ; // 12px
width: $base_icon_size * 2.5; height: $base_icon_size * 2.5; // 40px;
}
}
.lightbox { background-color: black; } .lightbox { background-color: black; }
.flashspot { background-color: white; } .flashspot { background-color: white; }