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

screenshot: Assign names to several CSS expressions

Browse Source 
This commit replaces a few of the screenshot UI CSS expressions with
named variables.

The shot-cast margin is not defined, but rather set to the value it ends
up equal to, given the panel padding and the capture button's
sizes + position, which would be a bit awkward to compute here. It ends
up slightly larger than the general panel padding due to the capture
button being larger than other elements, and due to having to
center-align the shot-cast container to the capture button.

The shot-cast container border radius is defined as 12px, then the panel
border radius is computed from the shot-cast border radius + margin,
then the type button border radius is computed from panel
border radius - padding.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2103>
This commit is contained in:
Ivan Molodetskikh 2022-01-28 22:53:38 +03:00 committed by Marge Bot
parent 497d9f32eb
commit b16cfa85e9
1 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,13 +8,20 @@
} }
} }
$screenshot_ui_panel_padding: 18px;
$screenshot_ui_shot_cast_margin: 21px;
$screenshot_ui_shot_cast_border_radius: 12px;
$screenshot_ui_panel_border_radius: $screenshot_ui_shot_cast_border_radius + $screenshot_ui_shot_cast_margin;
$screenshot_ui_shot_cast_spacing: 3px;
$screenshot_ui_button_red: #e01b24; $screenshot_ui_button_red: #e01b24;
.screenshot-ui-panel { .screenshot-ui-panel {
background-color: $osd_bg_color; background-color: $osd_bg_color;
border-radius: 12px + 21px; border-radius: $screenshot_ui_panel_border_radius;
padding: 18px; padding: $screenshot_ui_panel_padding;
padding-bottom: 18px - 6px; // Reduce the bottom padding a little to accommodate the large capture button.
padding-bottom: $screenshot_ui_panel_padding - 6px;
margin-bottom: $base_margin * 8; margin-bottom: $base_margin * 8;
spacing: $base_padding * 2; spacing: $base_padding * 2;
} }
@ -37,7 +44,7 @@ $screenshot_ui_button_red: #e01b24;
.screenshot-ui-type-button { .screenshot-ui-type-button {
padding: $base_padding * 2 $base_padding * 3; padding: $base_padding * 2 $base_padding * 3;
border-radius: 12px + 21px - 18px; border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding;
font-weight: bold; font-weight: bold;
&:hover, &:focus { background-color: $hover_bg_color; } &:hover, &:focus { background-color: $hover_bg_color; }
&:active { background-color: $active_bg_color; } &:active { background-color: $active_bg_color; }
@ -92,12 +99,12 @@ $screenshot_ui_button_red: #e01b24;
.screenshot-ui-shot-cast-container { .screenshot-ui-shot-cast-container {
background-color: $hover_bg_color; background-color: $hover_bg_color;
border-radius: 12px; border-radius: $screenshot_ui_shot_cast_border_radius;
padding: $base_padding / 2; padding: $screenshot_ui_shot_cast_spacing;
spacing: $base_padding / 2; spacing: $screenshot_ui_shot_cast_spacing;
&:ltr { margin-left: 3px; } &:ltr { margin-left: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding; }
&:rtl { margin-right: 3px; } &:rtl { margin-right: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding; }
} }
.screenshot-ui-shot-cast-button { .screenshot-ui-shot-cast-button {
@ -107,7 +114,7 @@ $screenshot_ui_button_red: #e01b24;
&:active { background-color: $active_bg_color; } &:active { background-color: $active_bg_color; }
&:checked { background-color: white; color: black; } &:checked { background-color: white; color: black; }
border-radius: 12px - 3px; border-radius: $screenshot_ui_shot_cast_border_radius - $screenshot_ui_shot_cast_spacing;
StIcon { StIcon {
icon-size: $base_icon_size; icon-size: $base_icon_size;