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

47
copyparty/web/browser.css
View file

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