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

bbox uses default button style

Browse source
This commit is contained in:
Til Schmitter 2026-04-26 10:04:02 +02:00
parent 823cdaed7c
commit 3a0542511e
2 changed files with 36 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
copyparty/web/baguettebox.js
View file

@ -305,19 +305,19 @@ window.baguetteBox = (function () {
ctr.innerHTML = ( ctr.innerHTML = (
'<div id="bbox-overlay" role="dialog">' + '<div id="bbox-overlay" role="dialog">' +
'<div id="bbox-slider"></div>' + '<div id="bbox-slider"></div>' +
'<button id="bbox-prev" class="bbox-btn" type="button" aria-label="Previous">◀</button>' + '<a id="bbox-prev" class="btn" aria-label="Previous">◀</a>' +
'<button id="bbox-next" class="bbox-btn" type="button" aria-label="Next">▶</button>' + '<a id="bbox-next" class="btn" aria-label="Next">▶</a>' +
'<div id="bbox-btns">' + '<div id="bbox-btns">' +
'<button id="bbox-help" type="button">?</button>' + '<a id="bbox-help" class="btn">?</a>' +
'<button id="bbox-anim" type="button" tt="a">-</button>' + '<a id="bbox-anim" class="btn" tt="a">-</a>' +
'<button id="bbox-readdir" type="button" tt="a">ltr</button>' + '<a id="bbox-readdir" class="btn" tt="a">ltr</a>' +
'<button id="bbox-rotl" type="button">↶</button>' + '<a id="bbox-rotl" class="btn">↶</a>' +
'<button id="bbox-rotr" type="button">↷</button>' + '<a id="bbox-rotr" class="btn">↷</a>' +
'<button id="bbox-tsel" type="button">☑️sel</button>' + '<a id="bbox-tsel" class="tgl btn">☑️sel</a>' +
'<button id="bbox-full" type="button" tt="full-screen">⛶</button>' + '<a id="bbox-full" class="btn" tt="full-screen">⛶</a>' +
'<button id="bbzoom" type="button" tt="zoom/stretch smaller images to fill screen">↕</button>' + '<a id="bbzoom" class="tgl btn" tt="zoom/stretch smaller images to fill screen">↕</a>' +
'<button id="bbox-vmode" type="button" tt="a"></button>' + '<a id="bbox-vmode" class="btn" tt="a"></a>' +
'<button id="bbox-close" type="button" aria-label="Close">✕</button>' + '<a id="bbox-close" class="btn" aria-label="Close">✕</a>' +
'</div></div>' '</div></div>'
); );
overlay = ctr.firstChild; overlay = ctr.firstChild;
@ -576,18 +576,14 @@ window.baguetteBox = (function () {
if (vsplit(files[a].vp)[1] == name) if (vsplit(files[a].vp)[1] == name)
sel = true; sel = true;
ebi('bbox-overlay').style.background = sel ? clmod(ebi('bbox-overlay'), 'sel', sel);
'rgba(153,85,34,0.7)' : '';
img.style.borderRadius = sel ? '1em' : ''; img.style.borderRadius = sel ? '1em' : '';
btnState(btnSel, sel); btnState(btnSel, sel);
} }
function btnState(btn, sel) { function btnState(btn, sel) {
btn.style.color = sel ? '#fff' : ''; clmod(btn, 'on', sel);
btn.style.background = sel ? '#d84' : '';
btn.style.textShadow = sel ? '1px 1px 0 #b83' : '';
btn.style.boxShadow = sel ? '.15em .15em 0 #520' : '';
} }
function keyUpHandler(e) { function keyUpHandler(e) {

47
copyparty/web/browser.css
View file

@ -1931,7 +1931,7 @@ html {
.btn { .btn {
color: var(--btn-fg); color: var(--btn-fg);
background: #eee; background: #eee;
background: linear-gradient(-5deg, var(--btn-bg), color-mix(var(--a-gray) 20%, transparent 80%)); background: linear-gradient(-5deg, var(--btn-bg), color-mix(var(--a-gray) 30%, transparent));
box-shadow: var(--btn-bs); box-shadow: var(--btn-bs);
border: 1px solid var(--bg-u3); border: 1px solid var(--bg-u3);
border-bottom: var(--btn-bb); border-bottom: var(--btn-bb);
@ -2464,6 +2464,9 @@ html.noscroll .sbar::-webkit-scrollbar {
#bbox-overlay.visible { #bbox-overlay.visible {
opacity: 1; opacity: 1;
} }
#bbox-overlay.sel {
background: color-mix(var(--a-dark) 70%, transparent);
}
.full-image { .full-image {
display: inline-block; display: inline-block;
position: relative; position: relative;
@ -2576,52 +2579,46 @@ html.y #bbox-overlay figcaption a {
@keyframes eog { @keyframes eog {
0% {filter: brightness(1.5)} 0% {filter: brightness(1.5)}
} }
#bbox-next, #bbox-overlay #bbox-next,
#bbox-prev { #bbox-overlay #bbox-prev {
position: fixed;
top: 50%; top: 50%;
top: calc(50% - 30px); top: calc(50% - 30px);
width: 44px; width: 30px;
height: 60px; height: 60px;
transition: background-color .3s ease, color .3s ease, opacity .3s ease; transition: opacity .3s ease;
} text-align: center;
#bbox-btns button { line-height: 60px;
transition: background-color .3s ease, color .3s ease;
} }
#bbox-btns { #bbox-btns {
transition: top .3s ease; transition: top .3s ease;
} }
.bbox-btn { #bbox-btns .btn {
position: fixed; cursor: pointer;
} }
#bbox-overlay.immersive #bbox-next, #bbox-overlay.immersive #bbox-next,
#bbox-overlay.immersive #bbox-prev { #bbox-overlay.immersive #bbox-prev {
opacity: 0; opacity: 0;
} }
#bbox-overlay.immersive #bbox-btns { #bbox-overlay.immersive #bbox-btns {
top: -2.8em; top: -3.5em;
} }
#bbox-overlay button { #bbox-overlay .btn {
cursor: pointer; cursor: pointer;
outline: none;
padding: 0 .4em; padding: 0 .4em;
margin: 0 .2em; margin: 0 .1em;
border: 0;
border-radius: var(--b-radius);
background: rgba(50, 50, 50, 0.5);
color: rgba(255,255,255,0.7);
font-size: 1.4em; font-size: 1.4em;
line-height: 2em; line-height: 2em;
vertical-align: top; vertical-align: top;
font-variant: small-caps; font-variant: small-caps;
color: var(--fg);
} }
#bbox-overlay button:hover { #bbox-overlay .btn.on {
color: var(--bg);
}
#bbox-overlay .btn:hover {
opacity: 1 !important; opacity: 1 !important;
} }
#bbox-overlay button:focus-visible,
#bbox-overlay button:hover {
color: rgba(255,255,255,0.9);
background: rgba(50, 50, 50, 0.9);
}
#bbox-next { #bbox-next {
right: 1%; right: 1%;
} }
@ -2630,7 +2627,7 @@ html.y #bbox-overlay figcaption a {
} }
#bbox-btns { #bbox-btns {
top: .5em; top: .5em;
right: .5em; right: .2em;
position: fixed; position: fixed;
} }
#bbox-halp { #bbox-halp {