diff --git a/docs/components/window/titlebar.ejs b/docs/components/window/titlebar.ejs index 1445087..fe77978 100644 --- a/docs/components/window/titlebar.ejs +++ b/docs/components/window/titlebar.ejs @@ -39,7 +39,7 @@

We make use of aria-label to render the Close button, to let assistive technologies know the intent of this button. You may also use - "Minimize" and "Maximize" like so: + "Minimize", "Maximize", "Restore" and "Help" like so:

<%- example(` @@ -62,11 +62,21 @@ + +
+ +
+
A help Title Bar
+
+ + +
+
`) %>

Alternatively, you can use the is-close, is-minimize, - is-maximize, is-restore classes to target the respective + is-maximize, is-restore, is-help classes to target the respective controls for your styling preference.

diff --git a/gui/_window.scss b/gui/_window.scss index aa85a2b..ff670ab 100644 --- a/gui/_window.scss +++ b/gui/_window.scss @@ -332,6 +332,13 @@ } } + &[aria-label="Help"], + &.is-help { + &::before { + background: url("./icon/help.png") no-repeat center; + } + } + &[aria-label="Restore"], &.is-restore { &::before { @@ -431,6 +438,31 @@ } } + &[aria-label="Help"], + &.is-help { + background: url("./icon/help.png") no-repeat center, + var(--control-background); + &::before { + content: ""; + box-shadow: 0 0 7px 3px #5dc4f0, var(--control-inset-shadow); + background: url("./icon/help.png") no-repeat center, + var(--control-background-hovered); + opacity: 0; + transition: opacity 0.3s linear; + } + + &:hover::before, + &:focus-visible::before { + opacity: 1; + transition: opacity 0.1s linear; + } + + &:active::before { + background: url("./icon/help.png") no-repeat center, + var(--control-background-active); + } + } + &[aria-label="Restore"], &.is-restore { background: url("./icon/restore.png") no-repeat center, diff --git a/gui/icon/help.png b/gui/icon/help.png new file mode 100644 index 0000000..503b40c Binary files /dev/null and b/gui/icon/help.png differ