gnome-shell/data/theme/gnome-shell-sass/widgets/_screenshot.scss

236 lines
5.7 KiB
SCSS
Raw Normal View History

// Screenshot UI
.icon-label-button-container {
spacing: $base_spacing;
font-size: $base_font_size - 3pt;
StIcon {
icon-size: 32px;
}
}
$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-panel {
background-color: $osd_bg_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;
margin-bottom: $base_margin * 8;
spacing: $base_padding * 2;
}
.screenshot-ui-close-button {
background-color: $osd_bg_color;
color: $osd_fg_color;
border-radius: 99px;
padding: 6px;
height: 30px;
width: 30px;
box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
margin-top: 8px;
&.left { margin-left: 8px; }
&.right { margin-right: 8px; }
& StIcon { icon-size: 24px; }
&:hover {
background-color: lighten($osd_bg_color, 15%);
}
&:active {
color: transparentize($osd_fg_color, 0.2);
background-color: darken($osd_bg_color, 5%);
}
}
.screenshot-ui-type-button {
padding: $base_padding * 2 $base_padding * 3;
border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding;
font-weight: bold;
&:hover, &:focus { background-color: $hover_bg_color; }
&:active { background-color: $active_bg_color; }
&:checked { background-color: $hover_bg_color; }
&:insensitive { color: $insensitive_fg_color; }
}
.screenshot-ui-capture-button {
width: 36px;
height: 36px;
border-radius: 99px;
border: 4px white;
padding: 4px;
.screenshot-ui-capture-button-circle {
background-color: white;
transition-duration: 200ms;
&:hover, &:focus { background-color: $hover_bg_color; }
border-radius: 99px;
}
&:hover, &:focus {
.screenshot-ui-capture-button-circle {
background-color: darken(white, 15%);
}
}
&:active {
.screenshot-ui-capture-button-circle {
background-color: darken(white, 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: $screenshot_ui_shot_cast_border_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 * 1.5;
background-color: transparent;
&:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
&:active { background-color: $active_bg_color; }
&:checked { background-color: white; color: black; }
border-radius: $screenshot_ui_shot_cast_border_radius - $screenshot_ui_shot_cast_spacing;
StIcon {
icon-size: $base_icon_size;
}
}
.screenshot-ui-show-pointer-button {
padding: $base_padding * 2;
border-radius: 99px;
background-color: $hover_bg_color;
&:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
&:active { background-color: $active_bg_color; }
&:checked { background-color: darken($hover_bg_color, 10%); }
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: 18px;
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;
}