gnome-shell: Update .window-close styling
Use the SVG asset only for icon.
This allows the button to have transition-duration.
roundabout,
created on Sunday, 21 March 2021, 14:25:24 (1616336724),
received on Sunday, 11 May 2025, 13:23:00 (1746969780)
Author identity: nana-4 <hnmaigo@gmail.com>
53c1e238e2eedcda095212be1b2ed2f1157a684d
src/gnome-shell/assets-dark/window-close-active.svg
@@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
<circle cx="18" cy="18" r="18" fill="#f28b82"/>
<circle cx="18" cy="18" r="18" fill="#000000" fill-opacity=".08"/>
<circle cx="18" cy="18" r="18" fill="#000000" fill-opacity=".16"/>
<path d="M23 14.41L21.59 13 18 16.59 14.41 13 13 14.41 16.59 18 13 21.59 14.41 23 18 19.41 21.59 23 23 21.59 19.41 18z" fill="#000000"/>
</svg>
src/gnome-shell/assets-dark/window-close-hover.svg
@@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
<circle cx="18" cy="18" r="18" fill="#f28b82"/>
<circle cx="18" cy="18" r="18" fill="#000000" fill-opacity=".08"/>
<circle cx="18" cy="18" r="18" fill="#000000" fill-opacity="0"/>
<path d="M23 14.41L21.59 13 18 16.59 14.41 13 13 14.41 16.59 18 13 21.59 14.41 23 18 19.41 21.59 23 23 21.59 19.41 18z" fill="#000000"/>
</svg>
src/gnome-shell/assets-dark/window-close.svg
@@ -1,6 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
<circle cx="18" cy="18" r="18" fill="#f28b82"/>
<circle cx="18" cy="18" r="18" fill="#000000" fill-opacity="0"/>
<circle cx="18" cy="18" r="18" fill="#000000" fill-opacity="0"/>
<path d="M23 14.41L21.59 13 18 16.59 14.41 13 13 14.41 16.59 18 13 21.59 14.41 23 18 19.41 21.59 23 23 21.59 19.41 18z" fill="#000000"/>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000">
<path d="M17 8.41L15.59 7 12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12z"/>
</svg>
src/gnome-shell/assets/window-close-active.svg
@@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
<circle cx="18" cy="18" r="18" fill="#d93025"/>
<circle cx="18" cy="18" r="18" fill="#ffffff" fill-opacity=".08"/>
<circle cx="18" cy="18" r="18" fill="#ffffff" fill-opacity=".16"/>
<path d="M23 14.41L21.59 13 18 16.59 14.41 13 13 14.41 16.59 18 13 21.59 14.41 23 18 19.41 21.59 23 23 21.59 19.41 18z" fill="#ffffff"/>
</svg>
src/gnome-shell/assets/window-close-hover.svg
@@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
<circle cx="18" cy="18" r="18" fill="#d93025"/>
<circle cx="18" cy="18" r="18" fill="#ffffff" fill-opacity=".08"/>
<circle cx="18" cy="18" r="18" fill="#ffffff" fill-opacity="0"/>
<path d="M23 14.41L21.59 13 18 16.59 14.41 13 13 14.41 16.59 18 13 21.59 14.41 23 18 19.41 21.59 23 23 21.59 19.41 18z" fill="#ffffff"/>
</svg>
src/gnome-shell/assets/window-close.svg
@@ -1,6 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
<circle cx="18" cy="18" r="18" fill="#d93025"/>
<circle cx="18" cy="18" r="18" fill="#ffffff" fill-opacity="0"/>
<circle cx="18" cy="18" r="18" fill="#ffffff" fill-opacity="0"/>
<path d="M23 14.41L21.59 13 18 16.59 14.41 13 13 14.41 16.59 18 13 21.59 14.41 23 18 19.41 21.59 23 23 21.59 19.41 18z" fill="#ffffff"/>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#fff">
<path d="M17 8.41L15.59 7 12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12z"/>
</svg>
src/gnome-shell/gnome-shell-theme.gresource.xml
@@ -51,8 +51,6 @@
<file>assets/toggle-off.svg</file>
<file>assets/toggle-on.svg</file>
<file>assets/window-close.svg</file>
<file>assets/window-close-active.svg</file>
<file>assets/window-close-hover.svg</file>
<file>extensions/workspaces-to-dock/workspaces-to-dock.css</file>
<file>gnome-shell.css</file>
<file>icons/color-pick.svg</file>
src/gnome-shell/sass/components/overview/_window-picker.scss
@@ -46,37 +46,44 @@
-shell-close-overlap: $medium-size / 2;
}
// FIXME: unless disable the transition, button will distort when hovering
// transition-duration: $duration;
transition-duration: $duration;
height: $medium-size;
width: $medium-size;
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
background-color: transparent;
color: transparent;
border-radius: $medium-size / 2;
box-shadow: $shadow-z2;
background-color: $error;
color: $on-error;
-st-background-image-shadow: $shadow-z2;
background-image: url("assets/window-close.svg");
background-size: $medium-size;
background-size: 24px;
&:hover {
box-shadow: $shadow-z4;
border-color: transparent;
background-color: transparent;
color: transparent;
background-color: overlay("hover", $on-error, $on: $error);
color: $on-error;
-st-background-image-shadow: $shadow-z4;
background-image: url("assets/window-close-hover.svg");
@if $version < 3.32 {
background-image: url("assets/window-close.svg");
}
}
&:active {
transition-duration: $duration-ripple;
box-shadow: $shadow-z8;
border-color: transparent;
background-color: transparent;
color: transparent;
background-color: overlay("pressed", $on-error, $on: $error);
color: $on-error;
// transition-duration: $duration-ripple;
-st-background-image-shadow: $shadow-z8;
background-image: url("assets/window-close-active.svg");
@if $version < 3.32 {
background-image: url("assets/window-close.svg");
}
}
StIcon {
icon-size: 24px;
color: transparent;
}
}