Gnome-Shell: theme screenshot dialog

This commit is contained in:
Daniel Ruiz de Alegría 2022-03-11 18:21:13 +01:00
parent f541fcf0a0
commit 48c9290e05
No known key found for this signature in database
GPG Key ID: 59667A77E8BFCB6C
3 changed files with 162 additions and 40 deletions

View File

@ -2661,27 +2661,62 @@ StScrollBar {
icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); }
/* OSD */
/*
$_osd_color: if($variant=='light', black, $fg_color);
%osd_panel {
font-weight: bold;
background-color: $bg_color;
color: $fg_color;
border: 1px solid if($variant=='light', transparentize(black, 0.85), $borders_color);
box-shadow: 0 4px 10px transparentize(black, .8);
.osd-window, .resize-popup, .switcher-list, .workspace-switcher, .screenshot-ui-panel {
background-color: rgba(48, 51, 64, 0.96);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
StIcon {
color: $_osd_color;
icon-shadow: 0 0 6px transparentize(black, .6);
}
}
.osd-window {
.level {
-barlevel-background-color: transparentize($_osd_color, if($variant=='light', 0.7, 0.9));
-barlevel-active-background-color: $_osd_color;
}
}
.screenshot-ui-type-button, .screenshot-ui-show-pointer-button {
border: 1px solid transparent;
background-color: transparent;
background-color: none;
border-color: transparent;
border: 0 !important; }
.screenshot-ui-type-button:insensitive, .screenshot-ui-show-pointer-button:insensitive {
border: 1px solid transparent;
color: rgba(238, 238, 236, 0.5);
background-color: rgba(238, 238, 236, 0.05);
border-color: #0d0e11;
background-color: transparent; }
.screenshot-ui-type-button:insensitive, .screenshot-ui-show-pointer-button:insensitive {
border: 1px solid transparent;
background-color: transparent;
background-color: none;
border-color: transparent; }
.screenshot-ui-type-button:insensitive:insensitive, .screenshot-ui-show-pointer-button:insensitive:insensitive {
border: 1px solid transparent;
color: rgba(238, 238, 236, 0.5);
background-color: rgba(238, 238, 236, 0.05);
border-color: #0d0e11;
background-color: transparent; }
.screenshot-ui-type-button:focus, .screenshot-ui-show-pointer-button:focus {
border: 1px solid transparent;
color: white;
background-color: #394560;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.screenshot-ui-type-button:focus:hover, .screenshot-ui-show-pointer-button:focus:hover {
background-color: #3f4b68;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.screenshot-ui-type-button:focus:active, .screenshot-ui-show-pointer-button:focus:active {
background-color: #455170;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.screenshot-ui-type-button:hover, .screenshot-ui-show-pointer-button:hover {
border: 1px solid transparent;
color: white;
background-color: #414554;
border-color: #272a34; }
.screenshot-ui-type-button:active, .screenshot-ui-show-pointer-button:active {
border: 1px solid transparent;
color: white;
background-color: #464b59;
border-color: #181a20; }
.screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:checked, .screenshot-ui-show-pointer-button:checked {
border: 1px solid transparent;
color: white;
background-color: #4c505e; }
.screenshot-ui-type-button:outlined:hover, .screenshot-ui-show-pointer-button:outlined:hover, .screenshot-ui-type-button:checked:hover, .screenshot-ui-show-pointer-button:checked:hover {
background-color: #555b71; }
.screenshot-ui-type-button:outlined:active, .screenshot-ui-show-pointer-button:outlined:active, .screenshot-ui-type-button:checked:active, .screenshot-ui-show-pointer-button:checked:active {
background-color: #5b627a; }
/* Switches */
.toggle-switch {
@ -2775,6 +2810,20 @@ $_osd_color: if($variant=='light', black, $fg_color);
color: transparent;
transition-duration: 0s; }
/* Screenshot UI */
.screenshot-ui-shot-cast-container {
background-color: #383d4b; }
.screenshot-ui-shot-cast-button {
background-color: transparent; }
.screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus {
background-color: #464b5d; }
.screenshot-ui-shot-cast-button:active {
background-color: #51576b; }
.screenshot-ui-shot-cast-button:checked {
background-color: white;
color: black; }
/* Top Bar */
#panel {
background: rgba(35, 37, 46, 0.8);

View File

@ -2657,27 +2657,62 @@ StScrollBar {
icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); }
/* OSD */
/*
$_osd_color: if($variant=='light', black, $fg_color);
%osd_panel {
font-weight: bold;
background-color: $bg_color;
color: $fg_color;
border: 1px solid if($variant=='light', transparentize(black, 0.85), $borders_color);
box-shadow: 0 4px 10px transparentize(black, .8);
.osd-window, .resize-popup, .switcher-list, .workspace-switcher, .screenshot-ui-panel {
background-color: rgba(48, 51, 64, 0.96);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
StIcon {
color: $_osd_color;
icon-shadow: 0 0 6px transparentize(black, .6);
}
}
.osd-window {
.level {
-barlevel-background-color: transparentize($_osd_color, if($variant=='light', 0.7, 0.9));
-barlevel-active-background-color: $_osd_color;
}
}
.screenshot-ui-type-button, .screenshot-ui-show-pointer-button {
border: 1px solid transparent;
background-color: transparent;
background-color: none;
border-color: transparent;
border: 0 !important; }
.screenshot-ui-type-button:insensitive, .screenshot-ui-show-pointer-button:insensitive {
border: 1px solid transparent;
color: rgba(92, 97, 108, 0.5);
background-color: rgba(92, 97, 108, 0.05);
border-color: #d9d9d9;
background-color: transparent; }
.screenshot-ui-type-button:insensitive, .screenshot-ui-show-pointer-button:insensitive {
border: 1px solid transparent;
background-color: transparent;
background-color: none;
border-color: transparent; }
.screenshot-ui-type-button:insensitive:insensitive, .screenshot-ui-show-pointer-button:insensitive:insensitive {
border: 1px solid transparent;
color: rgba(92, 97, 108, 0.5);
background-color: rgba(92, 97, 108, 0.05);
border-color: #d9d9d9;
background-color: transparent; }
.screenshot-ui-type-button:focus, .screenshot-ui-show-pointer-button:focus {
border: 1px solid transparent;
color: white;
background-color: #394560;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.screenshot-ui-type-button:focus:hover, .screenshot-ui-show-pointer-button:focus:hover {
background-color: #3f4b68;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.screenshot-ui-type-button:focus:active, .screenshot-ui-show-pointer-button:focus:active {
background-color: #455170;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.screenshot-ui-type-button:hover, .screenshot-ui-show-pointer-button:hover {
border: 1px solid transparent;
color: white;
background-color: #414554;
border-color: #181a20; }
.screenshot-ui-type-button:active, .screenshot-ui-show-pointer-button:active {
border: 1px solid transparent;
color: white;
background-color: #464b59;
border-color: #08090b; }
.screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:checked, .screenshot-ui-show-pointer-button:checked {
border: 1px solid transparent;
color: white;
background-color: #4c505e; }
.screenshot-ui-type-button:outlined:hover, .screenshot-ui-show-pointer-button:outlined:hover, .screenshot-ui-type-button:checked:hover, .screenshot-ui-show-pointer-button:checked:hover {
background-color: #555b71; }
.screenshot-ui-type-button:outlined:active, .screenshot-ui-show-pointer-button:outlined:active, .screenshot-ui-type-button:checked:active, .screenshot-ui-show-pointer-button:checked:active {
background-color: #5b627a; }
/* Switches */
.toggle-switch {
@ -2771,6 +2806,20 @@ $_osd_color: if($variant=='light', black, $fg_color);
color: transparent;
transition-duration: 0s; }
/* Screenshot UI */
.screenshot-ui-shot-cast-container {
background-color: #383d4b; }
.screenshot-ui-shot-cast-button {
background-color: transparent; }
.screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus {
background-color: #464b5d; }
.screenshot-ui-shot-cast-button:active {
background-color: #51576b; }
.screenshot-ui-shot-cast-button:checked {
background-color: white;
color: black; }
/* Top Bar */
#panel {
background: rgba(255, 255, 255, 0.8);

View File

@ -12,6 +12,18 @@ $dialog_box_shadow: 0 2px 8px 0 transparentize(black, .6);
box-shadow: 0 4px 10px transparentize(black, .8);
}
// buttons on OSD elements
// that are undecorated by default and use OSD colors
%osd_button {
@include button(undecorated);
border: 0!important;
&:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color); }
&:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color); }
&:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color); }
&:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color); }
&:outlined, &:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color); }
}
/* Switches */
.toggle-switch {
height: 22px;
@ -120,6 +132,18 @@ $dialog_box_shadow: 0 2px 8px 0 transparentize(black, .6);
}
}
/* Screenshot UI */
.screenshot-ui-shot-cast-container {
background-color: lighten($osd_bg_color, 4%);
}
.screenshot-ui-shot-cast-button {
background-color: transparent;
&:hover, &:focus { background-color: lighten($osd_bg_color, 10%); }
&:active { background-color: lighten($osd_bg_color, 15%); }
&:checked { background-color: white; color: black; }
}
/* Top Bar */
#panel {
$_panel_bg: transparentize($bg_color, .2);