diff options
Diffstat (limited to 'data/theme/gnome-shell-sass/widgets/_screenshot.scss')
| -rw-r--r-- | data/theme/gnome-shell-sass/widgets/_screenshot.scss | 204 |
1 files changed, 204 insertions, 0 deletions
diff --git a/data/theme/gnome-shell-sass/widgets/_screenshot.scss b/data/theme/gnome-shell-sass/widgets/_screenshot.scss new file mode 100644 index 0000000..150f273 --- /dev/null +++ b/data/theme/gnome-shell-sass/widgets/_screenshot.scss @@ -0,0 +1,204 @@ +// 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 !important; // but with more padding + margin-top: 12px; + box-shadow: 0 2px 4px 0 $shadow_color; + &.left { margin-left: 12px;} + &.right { margin-right: 12px;} +} + +.screenshot-ui-type-button { + @extend %osd_button; + min-width: 48px; + 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: lighten($screenshot_ui_button_red, 5%); + } + } + &:active { + .screenshot-ui-capture-button-circle { + background-color: darken($screenshot_ui_button_red, 7%); + } + } + } +} + +.screenshot-ui-shot-cast-container { + background-color: lighten($osd_bg_color,5%); + 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($osd_bg_color, 10%);} + &:active { background-color: lighten($active_bg_color,5%);} + &:checked { background-color: white;color: black;} + &:insensitive { color: transparentize($osd_fg_color, 0.5);} + + 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: $selected_fg_color; + 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; +} |