From e4a7c894e78ce5e5bde6c26fba662ea11d73a764 Mon Sep 17 00:00:00 2001 From: westtle <103447524+westtle@users.noreply.github.com> Date: Sun, 18 Feb 2024 00:12:11 +0700 Subject: [PATCH] added focus support for older browsers --- assets/styles/global.css | 5 ++++- assets/styles/style.min.css | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/assets/styles/global.css b/assets/styles/global.css index 44274bb..d75fe81 100644 --- a/assets/styles/global.css +++ b/assets/styles/global.css @@ -74,9 +74,12 @@ ul { list-style: none; } opacity: 1; } +:focus { outline: 0.125rem solid hsla(0, 0%, 0%, 0.8); } +:focus:not(:focus-visible) { outline: none; } + :focus-visible { outline: 0.125rem solid; - outline-color: hsla(var(--color-1, 0 0% 0% 1)); + outline-color: hsla(var(--color-1)); outline-offset: var(--focus-offset, 0); } diff --git a/assets/styles/style.min.css b/assets/styles/style.min.css index 107821c..169eefd 100644 --- a/assets/styles/style.min.css +++ b/assets/styles/style.min.css @@ -1 +1 @@ -img,main,svg{display:block}a,button,input,textarea{color:inherit;background-color:transparent}@font-face{font-display:swap;font-family:Roboto;font-style:normal;font-weight:400;src:url("../fonts/roboto/roboto-400.eot");src:url("../fonts/roboto/roboto-400.eot?#iefix") format("embedded-opentype"),url("../fonts/roboto/roboto-400.woff2") format("woff2"),url("../fonts/roboto/roboto-400.woff") format("woff"),url("../fonts/roboto/roboto-400.ttf") format("truetype"),url("../fonts/roboto/roboto-400.svg#Roboto") format("svg")}@font-face{font-display:swap;font-family:"Roboto Slab";font-style:normal;font-weight:500;src:url("../fonts/roboto-slab/roboto-slab-500");src:url("../fonts/roboto-slab/roboto-slab-500?#iefix") format("embedded-opentype"),url("../fonts/roboto-slab/roboto-slab-500.woff2") format("woff2"),url("../fonts/roboto-slab/roboto-slab-500.woff") format("woff"),url("../fonts/roboto-slab/roboto-slab-500.ttf") format("truetype"),url("../fonts/roboto-slab/roboto-slab-500.svg#RobotoSlab") format("svg")}:root{--font-roboto:Roboto,sans-serif;--font-roboto-slab:"Roboto Slab",serif;--font-1:var(--font-roboto);--font-2:var(--font-roboto-slab);--black:0,0%,0%;--white:0,0%,100%;--cod-gray:0,0%,6%;--gray:0,0%,58%;--color-1:var(--black),0.8;--color-2:var(--white);--color-3:var(--gray)}:root[data-theme=dark]{--color-1:var(--white),0.8;--color-2:var(--cod-gray);color-scheme:dark}*,::after,::before{margin:0;padding:0;box-sizing:border-box}html{min-height:100%}img,svg{max-width:100%;height:auto}svg{width:100%}button,input,textarea{display:block;border:none;font:inherit}ol,ul{list-style:none}::placeholder{color:hsl(var(--color-3));opacity:1}:focus-visible{outline:solid .125rem;outline-color:hsla(var(--color-1,0 0% 0% 1));outline-offset:var(--focus-offset,0)}@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}}.__sr-only{border:none;width:.0625rem;height:.0625rem;padding:0;margin:-.0625rem;overflow:hidden;white-space:nowrap;position:absolute;top:auto;left:-99rem;clip:rect(0,0,0,0);clip-path:inset(50%)}:root[data-theme=light] .settings__svg--theme-sun{display:none}:root[data-theme=dark] .settings__svg--theme-sun{display:block}:root[data-theme=dark] .settings__svg--theme-moon{display:none}:root[data-theme=dark] .settings__svg-westtle--background{fill:#ffffff}:root[data-theme=dark] .settings__svg-westtle--cat{fill:#000000}.settings{--settings-color:var(--color-3);--settings-background:var(--color-2);--settings-interact:var(--color-1);color:hsl(var(--settings-color));max-height:16.25rem;transition:left .26s cubic-bezier(.45, .05, .55, .95);position:fixed;top:1.125rem;bottom:1.125rem;left:-2.75rem;z-index:99}.settings[data-expanded=true]{left:0}.settings__buttons{background-color:hsl(var(--settings-background));border:.125rem solid hsl(var(--settings-color));border-left:none;max-height:100%;padding:.1875rem 0;overflow:hidden}.settings[data-expanded=true] .settings__buttons{overflow-y:auto}.settings__button{display:block;width:2.625rem;padding:.5625rem;cursor:pointer;transition:color .11s ease-in-out,opacity .11s ease-in-out}.settings__button:focus-visible{--focus-offset:-0.4375rem;color:hsla(var(--settings-interact))}.settings__button--toggle-settings{background-color:hsl(var(--settings-background));border:.125rem solid hsl(var(--settings-color));border-left:none;width:1.5rem;padding:0;position:absolute;left:100%}.settings__button--toggle-settings:focus-visible{--focus-offset:0.125rem}.settings__button--westtle{opacity:.75}.settings__button--westtle:focus-visible{opacity:1}@media (hover:hover){.settings__button:hover{color:hsla(var(--settings-interact))}.settings__button--westtle:hover{opacity:1}}.settings__button--toggle-settings,.settings__buttons{box-shadow:0 .0625rem .25rem hsl(0,0%,0%,.25)}.settings__svg--toggle-settings{padding:13.67%;transition:transform .26s cubic-bezier(.45, .05, .55, .95)}.settings__button--toggle-settings[aria-expanded=true] .settings__svg--toggle-settings{color:hsla(var(--settings-interact));transform:rotate(180deg)}.settings__svg--westtle{border-radius:.1875rem}.settings__svg-westtle--background,.settings__svg-westtle--cat{transition:fill .11s ease-in-out}.settings__separator{display:block;border-bottom:.125rem solid;border-color:currentColor;border-radius:6.1875rem;margin:.5625rem .5rem}body{color:hsla(var(--color-1));background-color:hsl(var(--color-2))}.simple-note{width:90%;max-width:29.125rem;margin:0 auto;padding:2rem 0}.simple-note__input{width:100%;padding:.5625rem .75rem;transition:color .1s ease-in-out}.simple-note__input--title{font-family:var(--font-2);font-size:1.5rem;font-weight:500;line-height:normal}.simple-note__input--body{height:80vh;min-height:20.3125rem;font-family:var(--font-1);font-size:1rem;font-weight:400;line-height:1.5;resize:none}@supports (display:flex){._flex{display:flex}._flex-column{flex-direction:column}._flex-grow{flex-grow:1}.simple-note__input--body{height:auto}}.simple-note__print-helper{display:none} \ No newline at end of file +img,main,svg{display:block}a,button,input,textarea{color:inherit;background-color:transparent}@font-face{font-display:swap;font-family:Roboto;font-style:normal;font-weight:400;src:url("../fonts/roboto/roboto-400.eot");src:url("../fonts/roboto/roboto-400.eot?#iefix") format("embedded-opentype"),url("../fonts/roboto/roboto-400.woff2") format("woff2"),url("../fonts/roboto/roboto-400.woff") format("woff"),url("../fonts/roboto/roboto-400.ttf") format("truetype"),url("../fonts/roboto/roboto-400.svg#Roboto") format("svg")}@font-face{font-display:swap;font-family:"Roboto Slab";font-style:normal;font-weight:500;src:url("../fonts/roboto-slab/roboto-slab-500");src:url("../fonts/roboto-slab/roboto-slab-500?#iefix") format("embedded-opentype"),url("../fonts/roboto-slab/roboto-slab-500.woff2") format("woff2"),url("../fonts/roboto-slab/roboto-slab-500.woff") format("woff"),url("../fonts/roboto-slab/roboto-slab-500.ttf") format("truetype"),url("../fonts/roboto-slab/roboto-slab-500.svg#RobotoSlab") format("svg")}:root{--font-roboto:Roboto,sans-serif;--font-roboto-slab:"Roboto Slab",serif;--font-1:var(--font-roboto);--font-2:var(--font-roboto-slab);--black:0,0%,0%;--white:0,0%,100%;--cod-gray:0,0%,6%;--gray:0,0%,58%;--color-1:var(--black),0.8;--color-2:var(--white);--color-3:var(--gray)}:root[data-theme=dark]{--color-1:var(--white),0.8;--color-2:var(--cod-gray);color-scheme:dark}*,::after,::before{margin:0;padding:0;box-sizing:border-box}html{min-height:100%}img,svg{max-width:100%;height:auto}svg{width:100%}button,input,textarea{display:block;border:none;font:inherit}ol,ul{list-style:none}::placeholder{color:hsl(var(--color-3));opacity:1}:focus{outline:hsla(0,0%,0%,.8) solid .125rem}:focus:not(:focus-visible){outline:0}:focus-visible{outline:solid .125rem;outline-color:hsla(var(--color-1));outline-offset:var(--focus-offset,0)}@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}}.__sr-only{border:none;width:.0625rem;height:.0625rem;padding:0;margin:-.0625rem;overflow:hidden;white-space:nowrap;position:absolute;top:auto;left:-99rem;clip:rect(0,0,0,0);clip-path:inset(50%)}:root[data-theme=light] .settings__svg--theme-sun{display:none}:root[data-theme=dark] .settings__svg--theme-sun{display:block}:root[data-theme=dark] .settings__svg--theme-moon{display:none}:root[data-theme=dark] .settings__svg-westtle--background{fill:#ffffff}:root[data-theme=dark] .settings__svg-westtle--cat{fill:#000000}.settings{--settings-color:var(--color-3);--settings-background:var(--color-2);--settings-interact:var(--color-1);color:hsl(var(--settings-color));max-height:16.25rem;transition:left .26s cubic-bezier(.45, .05, .55, .95);position:fixed;top:1.125rem;bottom:1.125rem;left:-2.75rem;z-index:99}.settings[data-expanded=true]{left:0}.settings__buttons{background-color:hsl(var(--settings-background));border:.125rem solid hsl(var(--settings-color));border-left:none;max-height:100%;padding:.1875rem 0;overflow:hidden}.settings[data-expanded=true] .settings__buttons{overflow-y:auto}.settings__button{display:block;width:2.625rem;padding:.5625rem;cursor:pointer;transition:color .11s ease-in-out,opacity .11s ease-in-out}.settings__button:focus-visible{--focus-offset:-0.4375rem;color:hsla(var(--settings-interact))}.settings__button--toggle-settings{background-color:hsl(var(--settings-background));border:.125rem solid hsl(var(--settings-color));border-left:none;width:1.5rem;padding:0;position:absolute;left:100%}.settings__button--toggle-settings:focus-visible{--focus-offset:0.125rem}.settings__button--westtle{opacity:.75}.settings__button--westtle:focus-visible{opacity:1}@media (hover:hover){.settings__button:hover{color:hsla(var(--settings-interact))}.settings__button--westtle:hover{opacity:1}}.settings__button--toggle-settings,.settings__buttons{box-shadow:0 .0625rem .25rem hsl(0,0%,0%,.25)}.settings__svg--toggle-settings{padding:13.67%;transition:transform .26s cubic-bezier(.45, .05, .55, .95)}.settings__button--toggle-settings[aria-expanded=true] .settings__svg--toggle-settings{color:hsla(var(--settings-interact));transform:rotate(180deg)}.settings__svg--westtle{border-radius:.1875rem}.settings__svg-westtle--background,.settings__svg-westtle--cat{transition:fill .11s ease-in-out}.settings__separator{display:block;border-bottom:.125rem solid;border-color:currentColor;border-radius:6.1875rem;margin:.5625rem .5rem}body{color:hsla(var(--color-1));background-color:hsl(var(--color-2))}.simple-note{width:90%;max-width:29.125rem;margin:0 auto;padding:2rem 0}.simple-note__input{width:100%;padding:.5625rem .75rem;transition:color .1s ease-in-out}.simple-note__input--title{font-family:var(--font-2);font-size:1.5rem;font-weight:500;line-height:normal}.simple-note__input--body{height:80vh;min-height:20.3125rem;font-family:var(--font-1);font-size:1rem;font-weight:400;line-height:1.5;resize:none}@supports (display:flex){._flex{display:flex}._flex-column{flex-direction:column}._flex-grow{flex-grow:1}.simple-note__input--body{height:auto}}.simple-note__print-helper{display:none} \ No newline at end of file