gnome-shell/data/theme/gnome-shell-sass/widgets/_screenshot.scss
Sam Hewitt 39301a744e theme: Stylesheet papercuts and other visual fixes
- remove tiled preview corners; merge with misc.scss
- sync general label styles from libadwaita
- use variables in ibus css
- remove redundant spacing variable as its equal to padding
- use more global styles in screenshot css
- tidy up entry styles
- cleanup the networks dialog stylesheet
- make colours less dark
- cleanup the popover stylesheet
- cleanup the mixins for tiles and overview icons
- adjust the button style definitions on checked style
- add osd button definitions

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2172>
2022-02-14 13:35:41 -03:30

203 lines
4.9 KiB
SCSS

// 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_button_red: $error_color;
.screenshot-ui-panel {
@extend %osd_panel;
border-radius: $screenshot_ui_panel_border_radius;
padding: $screenshot_ui_panel_padding;
// Reduce the bottom padding a little to accommodate the large capture button.
padding-bottom: $screenshot_ui_panel_padding - 6px;
margin-bottom: 4em;
spacing: $base_padding * 2;
}
.screenshot-ui-close-button {
@extend .window-close; // copy window close button
padding: $base_padding; // but with more padding
&.left { margin-left: 8px; }
&.right { margin-right: 8px; }
}
.screenshot-ui-type-button {
@extend %osd_button;
padding: $base_padding * 2 $base_padding * 3 !important;
border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding;
}
.screenshot-ui-capture-button {
width: 36px;
height: 36px;
border-radius: 99px;
border: 4px $osd_fg_color;
padding: 4px;
.screenshot-ui-capture-button-circle {
background-color: $osd_fg_color;
transition-duration: 200ms;
&:hover, &:focus { background-color: $hover_bg_color; }
border-radius: 99px;
}
&:hover, &:focus {
.screenshot-ui-capture-button-circle {
background-color: darken($osd_fg_color, 15%);
}
}
&:active {
.screenshot-ui-capture-button-circle {
background-color: darken($osd_fg_color, 50%);
}
}
&:cast {
.screenshot-ui-capture-button-circle {
background-color: $screenshot_ui_button_red;
}
&:hover, &:focus {
.screenshot-ui-capture-button-circle {
background-color: darken($screenshot_ui_button_red, 15%);
}
}
&:active {
.screenshot-ui-capture-button-circle {
background-color: darken($screenshot_ui_button_red, 30%);
}
}
}
}
.screenshot-ui-shot-cast-container {
background-color: $hover_bg_color;
border-radius: $modal_radius;
padding: $screenshot_ui_shot_cast_spacing;
spacing: $screenshot_ui_shot_cast_spacing;
&:ltr { margin-left: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding; }
&:rtl { margin-right: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding; }
}
.screenshot-ui-shot-cast-button {
padding: $base_padding $base_padding*2;
background-color: transparent;
&:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
&:active { background-color: lighten($active_bg_color,5%); }
&:checked { background-color: white; color: black; }
border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing;
StIcon { icon-size: $base_icon_size; }
}
.screenshot-ui-show-pointer-button {
@extend %osd_button;
border-radius: 99px;
padding: $base_padding * 2 !important;
StIcon { icon-size: $base_icon_size; }
}
.screenshot-ui-area-indicator-shade {
background-color: rgba(0,0,0,.3);
}
.screenshot-ui-area-selector {
.screenshot-ui-area-indicator-shade {
background-color: rgba(0,0,0,.5);
}
.screenshot-ui-area-indicator-selection {
border: 2px white;
}
}
.screenshot-ui-area-selector-handle {
border-radius: 99px;
background-color: white;
box-shadow: 0 1px 3px 2px rgba(0,0,0,0.2);
width: 24px;
height: 24px;
}
.screenshot-ui-window-selector {
background-color: $system_bg_color;
.screenshot-ui-window-selector-window-container {
margin: 100px;
}
&:primary-monitor {
.screenshot-ui-window-selector-window-container {
// Make some room for the panel.
margin-bottom: 200px;
}
}
}
.screenshot-ui-window-selector-window-border {
transition-duration: 200ms;
border-radius: $modal_radius;
border: 6px transparent;
}
.screenshot-ui-window-selector-check {
transition-duration: 200ms;
color: transparent;
border-radius: 99px;
border-width: 12px;
icon-size: 24px;
}
.screenshot-ui-window-selector-window {
&:hover {
.screenshot-ui-window-selector-window-border {
border-color: darken($selected_bg_color, 15%);
}
}
&:checked {
.screenshot-ui-window-selector-window-border {
border-color: $selected_bg_color;
background-color: transparentize($selected_bg_color, 0.8);
}
.screenshot-ui-window-selector-check {
color: white;
background-color: $selected_bg_color;
}
}
}
.screenshot-ui-screen-selector {
transition-duration: 200ms;
background-color: rgba(0,0,0,.5);
&:hover { background-color: rgba(0,0,0,.3); }
&:active { background-color: rgba(0,0,0,.7); }
&:checked {
background-color: transparent;
border: 2px white;
}
}
.screenshot-ui-tooltip {
color: $osd_fg_color;
background-color: $osd_bg_color;
border-radius: 99px;
padding: $base_padding $base_padding * 2;
text-align: center;
-y-offset: 24px;
}