windowPreview: Overhaul chrome style
- increase close button size - use custom close icon that's better suited for the non-default 24pxp size - use translucent light gray for both close button and window caption https://gitlab.gnome.org/Teams/Design/os-mockups/-/issues/81 Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1605>
This commit is contained in:
Florian Müllner
parent
30f27412c2
commit
42c2bf709e
@ -25,6 +25,7 @@
|
||||
<file alias="icons/scalable/status/keyboard-hide-symbolic.svg">keyboard-hide-symbolic.svg</file>
|
||||
<file alias="icons/scalable/status/keyboard-layout-filled-symbolic.svg">keyboard-layout-filled-symbolic.svg</file>
|
||||
<file alias="icons/scalable/status/keyboard-shift-filled-symbolic.svg">keyboard-shift-filled-symbolic.svg</file>
|
||||
<file alias="icons/scalable/ui/window-close-24-symbolic.svg">window-close-24-symbolic.svg</file>
|
||||
<file>process-working.svg</file>
|
||||
<file>toggle-off.svg</file>
|
||||
<file>toggle-off-dark.svg</file>
|
||||
|
||||
@ -3,7 +3,10 @@
|
||||
$window_picker_spacing: $base_spacing; // 6px
|
||||
$window_picker_padding: $base_padding * 2; // 12px
|
||||
|
||||
$window_close_button_size: 24px;
|
||||
$window_thumbnail_chrome_color: transparentize($osd_fg_color, 0.4);
|
||||
$window_thumbnail_chrome_border: transparentize($osd_bg_color, 0.7);
|
||||
|
||||
$window_close_button_size: 30px;
|
||||
$window_close_button_padding: 3px;
|
||||
|
||||
// Window picker
|
||||
@ -14,31 +17,31 @@ $window_close_button_padding: 3px;
|
||||
|
||||
// Window titles
|
||||
.window-caption {
|
||||
color: $osd_fg_color;
|
||||
background-color: $osd_bg_color;
|
||||
border:1px solid $osd_outer_borders_color;
|
||||
border-radius: $base_border_radius + 1;
|
||||
color: $osd_bg_color;
|
||||
background-color: $window_thumbnail_chrome_color;
|
||||
border-radius: 99px;
|
||||
border: 1px solid $window_thumbnail_chrome_border;
|
||||
padding: $base_padding $base_padding * 2;
|
||||
font-weight: bold;
|
||||
@include fontsize($base_font_size + 1);
|
||||
}
|
||||
|
||||
// Close button
|
||||
.window-close {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
border: none;
|
||||
background-color: $window_thumbnail_chrome_color;
|
||||
color: $osd_bg_color;
|
||||
border: 1px solid $window_thumbnail_chrome_border;
|
||||
border-radius: $window_close_button_size * 0.5 + $window_close_button_padding * 2;
|
||||
padding: $window_close_button_padding;
|
||||
height: $window_close_button_size;
|
||||
width: $window_close_button_size;
|
||||
box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
|
||||
|
||||
& StIcon { icon-size: 24px; }
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($selected_bg_color, 5%);
|
||||
background-color: lighten($window_thumbnail_chrome_color, 5%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($selected_bg_color, 5%);
|
||||
background-color: darken($window_thumbnail_chrome_color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
71
data/theme/window-close-24-symbolic.svg
Normal file
71
data/theme/window-close-24-symbolic.svg
Normal file
@ -0,0 +1,71 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 6.3499999 6.3500002"
|
||||
version="1.1"
|
||||
id="svg59656"
|
||||
sodipodi:docname="window-close-24-symbolic.svg"
|
||||
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1016"
|
||||
id="namedview9"
|
||||
showgrid="true"
|
||||
inkscape:zoom="2.4967968"
|
||||
inkscape:cx="-99.100336"
|
||||
inkscape:cy="-39.762752"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg59656">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid901" />
|
||||
</sodipodi:namedview>
|
||||
<defs
|
||||
id="defs59650" />
|
||||
<metadata
|
||||
id="metadata59653">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
id="g905">
|
||||
<rect
|
||||
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:none;stroke:none;stroke-width:0.264583;marker:none;enable-background:new"
|
||||
id="rect10837-5"
|
||||
y="0"
|
||||
x="0"
|
||||
height="6.3499999"
|
||||
width="6.3499999" />
|
||||
<path
|
||||
sodipodi:nodetypes="ccsccccccccccccccccccccccc"
|
||||
style="color:#bebebe;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:'Andale Mono';-inkscape-font-specification:'Andale Mono';text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#241f31;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.471289;marker:none;enable-background:new"
|
||||
id="path10839-9"
|
||||
inkscape:connector-curvature="0"
|
||||
d="m 1.5875,1.5875 h 0.2645834 c 0.00274,-3.18e-5 0.0055,-1.217e-4 0.00827,0 0.067456,0.00296 0.1349031,0.03402 0.181901,0.082682 L 3.1758323,2.8029916 4.2155899,1.670182 c 0.07028,-0.060986 0.118182,-0.08083 0.181901,-0.082682 h 0.2645834 v 0.264583 c 0,0.075795 -0.00909,0.1456928 -0.066146,0.1984375 L 3.5644391,3.1833301 4.688086,4.3077474 C 4.737877,4.3575344 4.762498,4.4277227 4.7625,4.4979167 V 4.7625 H 4.4979167 C 4.4277225,4.7624974 4.3575325,4.7378673 4.3077475,4.6880859 L 3.1758323,3.5554004 2.0422526,4.688086 C 1.9924676,4.737878 1.9222747,4.7625 1.8520834,4.7625 H 1.5875 V 4.4979168 c -8e-7,-0.070191 0.024622,-0.1403827 0.074414,-0.1901693 L 2.7954938,3.1833301 1.6619141,2.0505208 C 1.6061553,1.9990249 1.581703,1.9263651 1.5875,1.8520833 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
@ -354,7 +354,7 @@ var WindowPreview = GObject.registerClass({
|
||||
this._closeButton = new St.Button({
|
||||
visible: false,
|
||||
style_class: 'window-close',
|
||||
child: new St.Icon({ icon_name: 'window-close-symbolic' }),
|
||||
child: new St.Icon({ icon_name: 'window-close-24-symbolic' }),
|
||||
});
|
||||
this._closeButton.add_constraint(new Clutter.BindConstraint({
|
||||
source: this._windowContainer,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user