mirrors/copyparty
1
0
Fork 0
mirror of https://github.com/9001/copyparty.git synced 2026-06-20 21:22:26 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

browser css focus styles only when focused by keyboard

Browse source
This commit is contained in:
Til Schmitter 2026-04-20 17:37:39 +02:00
parent 6f1d5fbe03
commit e363e60502
1 changed files with 14 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
copyparty/web/browser.css
View file

@ -565,7 +565,7 @@ pre, code, tt, #doc, #doc>code {
left: -10em; left: -10em;
color: var(--bg); color: var(--bg);
} }
html .ayjump:focus { html .ayjump:focus-visible {
z-index: 80386; z-index: 80386;
color: #fff; color: #fff;
color: var(--a-hil); color: var(--a-hil);
@ -828,8 +828,8 @@ html.y #path a:hover {
width: 100%; width: 100%;
height: 0; height: 0;
} }
#doc>iframe.focus, #doc>iframe.focus-visible,
.logue>iframe.focus { .logue>iframe.-visible {
box-shadow: 0 0 .1em .1em var(--a); box-shadow: 0 0 .1em .1em var(--a);
} }
#pro.logue>iframe { #pro.logue>iframe {
@ -980,7 +980,7 @@ html.dz #flogout {
border-top: 1px solid var(--g-b2); border-top: 1px solid var(--g-b2);
box-shadow: 0 .1em .3em var(--g-sh); box-shadow: 0 .1em .3em var(--g-sh);
} }
#ggrid>a:focus, #ggrid>a:focus-visible,
#ggrid>a:hover { #ggrid>a:hover {
color: var(--g-f-fg); color: var(--g-f-fg);
background: var(--g-f-bg); background: var(--g-f-bg);
@ -1055,7 +1055,7 @@ html.dz #flogout {
font-size: 2em; font-size: 2em;
transition: font-size .15s, margin .15s; transition: font-size .15s, margin .15s;
} }
#ggrid>a:focus:before, #ggrid>a:focus-visible:before,
#ggrid>a:hover:before { #ggrid>a:hover:before {
font-size: 2.5em; font-size: 2.5em;
margin: -.2em; margin: -.2em;
@ -1063,7 +1063,7 @@ html.dz #flogout {
#ggrid>a[tt] { #ggrid>a[tt] {
background: linear-gradient(135deg, var(--g-g1) 95%, var(--g-g2) 95%); background: linear-gradient(135deg, var(--g-g1) 95%, var(--g-g2) 95%);
} }
#ggrid>a[tt]:focus, #ggrid>a[tt]:focus-visible,
#ggrid>a[tt]:hover { #ggrid>a[tt]:hover {
background: var(--g-f-bg); background: var(--g-f-bg);
} }
@ -1092,9 +1092,9 @@ html.dz #flogout {
transition: all 0.2s cubic-bezier(.2, 2.2, .5, 1); /* https://cubic-bezier.com/#.4,2,.7,1 */ transition: all 0.2s cubic-bezier(.2, 2.2, .5, 1); /* https://cubic-bezier.com/#.4,2,.7,1 */
} }
#files tbody tr.sel:hover td, #files tbody tr.sel:hover td,
#files tbody tr.sel:focus td, #files tbody tr.sel:focus-visible td,
#ggrid>a.sel:hover, #ggrid>a.sel:hover,
#ggrid>a.sel:focus { #ggrid>a.sel:focus-visible {
color: var(--g-sel-fg); color: var(--g-sel-fg);
background: var(--g-fsel-bg); background: var(--g-fsel-bg);
border-color: var(--g-fsel-b1); border-color: var(--g-fsel-b1);
@ -1121,15 +1121,15 @@ html.dz #flogout {
#files tr.sel a.play.act { #files tr.sel a.play.act {
text-shadow: 0 0 1px var(--fg-max); text-shadow: 0 0 1px var(--fg-max);
} }
#files tr:focus { #files tr:focus-visible {
outline: none; outline: none;
position: relative; position: relative;
} }
#files tr:focus td+td { #files tr:focus-visible td+td {
background: var(--bg-d3); background: var(--bg-d3);
box-shadow: 0 .2em 0 var(--f-sel-sh), 0 -.2em 0 var(--f-sel-sh); box-shadow: 0 .2em 0 var(--f-sel-sh), 0 -.2em 0 var(--f-sel-sh);
} }
#files tr:focus:not(.play):not(.sel) td:first-child { #files tr:focus-visible:not(.play):not(.sel) td:first-child {
background: var(--bg-d3); background: var(--bg-d3);
box-shadow: -.2em .2em 0 var(--f-sel-sh), -.2em -.2em 0 var(--f-sel-sh); box-shadow: -.2em .2em 0 var(--f-sel-sh), -.2em -.2em 0 var(--f-sel-sh);
} }
@ -2517,7 +2517,7 @@ html.y #bbox-overlay figcaption a {
#bbox-overlay button:hover { #bbox-overlay button:hover {
opacity: 1 !important; opacity: 1 !important;
} }
#bbox-overlay button:focus, #bbox-overlay button:focus-visible,
#bbox-overlay button:hover { #bbox-overlay button:hover {
color: rgba(255,255,255,0.9); color: rgba(255,255,255,0.9);
background: rgba(50, 50, 50, 0.9); background: rgba(50, 50, 50, 0.9);
@ -4090,8 +4090,8 @@ html.e #ops a {
justify-content: center; justify-content: center;
font-size: 1.25em; font-size: 1.25em;
} }
html.e #blogout:focus, html.e #blogout:focus-visible,
html.e #ops a:focus { html.e #ops a:focus-visible {
outline: 1px dashed var(--w) !important; outline: 1px dashed var(--w) !important;
} }