75a5a596c5
Toolbar wird jetzt am oberen Bildschirmrand angezeigt (Desktop), damit sie nicht mehr den Header/Nav ueberlagert. Auf Mobile bleibt sie unterhalb des Headers. Cancel/Download-Buttons nutzen direktes Binding auf $toolbar statt Delegation auf document. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
121 lines
1.9 KiB
SCSS
121 lines
1.9 KiB
SCSS
@import 'libs/vars';
|
|
@import 'libs/functions';
|
|
|
|
/* Utilities */
|
|
.text-fg {
|
|
color: _palette(fg);
|
|
}
|
|
|
|
/* ==================== Selection Mode ==================== */
|
|
|
|
#selection-toolbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background: rgba(31, 34, 36, 0.95);
|
|
padding: 0.75em 1.5em;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1em;
|
|
z-index: _misc(z-index-base) + 3;
|
|
transform: translateY(-100%);
|
|
transition: transform 0.3s ease;
|
|
box-sizing: border-box;
|
|
|
|
&.visible {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
#sel-count {
|
|
color: _palette(fg-bold);
|
|
font-weight: _font(weight-extrabold);
|
|
margin-right: auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
button {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
body.selection-mode {
|
|
#main .thumb {
|
|
cursor: pointer;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0.6em;
|
|
left: 0.6em;
|
|
width: 1.4em;
|
|
height: 1.4em;
|
|
border: 2px solid rgba(255, 255, 255, 0.7);
|
|
border-radius: 3px;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
z-index: 2;
|
|
transition: all 0.2s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&.selected {
|
|
&::before {
|
|
background: _palette(accent1);
|
|
border-color: _palette(accent1);
|
|
}
|
|
|
|
.image {
|
|
outline: 3px solid _palette(accent1);
|
|
outline-offset: -3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 736px) {
|
|
#selection-toolbar {
|
|
top: _size(header);
|
|
padding: 0.5em 1em;
|
|
gap: 0.5em;
|
|
|
|
button {
|
|
font-size: 0.85em;
|
|
padding: 0.4em 0.8em;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Footer */
|
|
#footer {
|
|
.presentify {
|
|
margin: 0 0 1.4em 0;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
column-gap: 1rem;
|
|
align-items: center;
|
|
|
|
.presentify-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 0;
|
|
}
|
|
|
|
img {
|
|
width: 72px;
|
|
height: 72px;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.presentify-text {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|