351 lines
11 KiB
CSS
351 lines
11 KiB
CSS
/* Lichttisch
|
|
Fotos stehen im Mittelpunkt: neutrales Mittelgrau als Unterlage (wie ein
|
|
Kontaktbogen auf dem Leuchtpult), die Bedienung tritt zurück. Einziger
|
|
Farbakzent ist das Bernstein der Dunkelkammerlampe. */
|
|
|
|
:root {
|
|
--chrome: #242527; /* Seitenleiste, Werkzeugleiste */
|
|
--table: #38393c; /* Unterlage hinter den Fotos */
|
|
--tile: #2e2f32; /* Platzhalter, solange ein Bild lädt */
|
|
--line: #47484c;
|
|
--text: #ecebe7;
|
|
--muted: #a3a29d;
|
|
--safelight: #eea33a;
|
|
--safelight-ink: #2a1b05;
|
|
--danger: #f08a7c;
|
|
|
|
--thumb: 180px;
|
|
--gap: 3px;
|
|
|
|
font-family: "Cantarell", "Noto Sans", "Ubuntu", "DejaVu Sans", system-ui, sans-serif;
|
|
font-size: 15px;
|
|
line-height: 1.45;
|
|
color: var(--text);
|
|
background: var(--chrome);
|
|
color-scheme: dark;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body { height: 100%; margin: 0; }
|
|
body { overflow: hidden; -webkit-font-smoothing: antialiased; }
|
|
[hidden] { display: none !important; }
|
|
|
|
button, input, select { font: inherit; color: inherit; }
|
|
|
|
button {
|
|
background: transparent;
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
padding: 0.45em 0.9em;
|
|
cursor: pointer;
|
|
}
|
|
button:hover { background: rgba(255, 255, 255, 0.06); }
|
|
button.primary {
|
|
background: var(--safelight);
|
|
color: var(--safelight-ink);
|
|
border-color: var(--safelight);
|
|
font-weight: 600;
|
|
}
|
|
button.primary:hover { filter: brightness(1.07); }
|
|
button.quiet { border-color: transparent; color: var(--muted); padding-left: 0; padding-right: 0; }
|
|
button.quiet:hover { background: none; color: var(--text); }
|
|
button:disabled { opacity: 0.5; cursor: default; }
|
|
|
|
:focus-visible { outline: 2px solid var(--safelight); outline-offset: 2px; }
|
|
|
|
input[type=text], input[type=url], input[type=password], select {
|
|
background: #1b1c1e;
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
padding: 0.55em 0.7em;
|
|
}
|
|
select { padding: 0.35em 0.5em; }
|
|
|
|
/* ------------------------------------------------------------ Anmeldung */
|
|
|
|
.login, .connecting {
|
|
height: 100%;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 2rem;
|
|
overflow: auto;
|
|
}
|
|
.connecting p { color: var(--muted); }
|
|
|
|
.login-panel { width: min(26rem, 100%); display: grid; gap: 1.1rem; }
|
|
|
|
.wordmark {
|
|
margin: 0;
|
|
font-size: 2.6rem;
|
|
font-weight: 300;
|
|
letter-spacing: -0.01em;
|
|
line-height: 1.1;
|
|
}
|
|
.lede { margin: -0.4rem 0 0.6rem; color: var(--muted); }
|
|
|
|
.field { display: grid; gap: 0.35rem; }
|
|
.field span { font-size: 0.87rem; color: var(--muted); }
|
|
|
|
.hint { margin: 0.4rem 0 0; font-size: 0.87rem; color: var(--muted); }
|
|
|
|
#browser-login button { width: 100%; padding: 0.7em; }
|
|
|
|
.waiting { display: flex; align-items: center; gap: 0.8rem; }
|
|
.waiting p { margin: 0; flex: 1; }
|
|
.pulse {
|
|
width: 10px; height: 10px; border-radius: 50%;
|
|
background: var(--safelight);
|
|
animation: pulse 1.6s ease-in-out infinite;
|
|
}
|
|
@keyframes pulse { 50% { opacity: 0.25; } }
|
|
|
|
details { border-top: 1px solid var(--line); padding-top: 0.9rem; }
|
|
details[open] { display: grid; gap: 0.9rem; }
|
|
summary { cursor: pointer; color: var(--muted); }
|
|
summary:hover { color: var(--text); }
|
|
details button { justify-self: start; }
|
|
|
|
.check { display: flex; gap: 0.5rem; align-items: center; color: var(--muted); font-size: 0.93rem; }
|
|
.check input { accent-color: var(--safelight); }
|
|
|
|
.error { margin: 0; color: var(--danger); }
|
|
|
|
/* ------------------------------------------------------------ Grundlayout */
|
|
|
|
.app { height: 100%; display: grid; grid-template-columns: 13rem 1fr; }
|
|
|
|
.sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.6rem;
|
|
padding: 1.1rem 0.8rem 1rem;
|
|
border-right: 1px solid #1a1b1d;
|
|
min-width: 0;
|
|
}
|
|
.brand { font-size: 1.25rem; font-weight: 300; padding: 0 0.5rem; }
|
|
|
|
.sources { display: grid; gap: 2px; }
|
|
.sources button {
|
|
text-align: left;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
padding: 0.5em 0.6em;
|
|
color: var(--muted);
|
|
}
|
|
.sources button[aria-current="true"] {
|
|
color: var(--text);
|
|
background: rgba(255, 255, 255, 0.07);
|
|
box-shadow: inset 3px 0 0 var(--safelight);
|
|
}
|
|
|
|
.account { margin-top: auto; padding: 0 0.5rem; display: grid; gap: 0.1rem; font-size: 0.87rem; }
|
|
.acc-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.acc-server { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.account button { justify-self: start; margin-top: 0.4rem; }
|
|
|
|
.main { display: grid; grid-template-rows: auto 1fr; min-width: 0; min-height: 0; }
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 0.7rem 1.1rem;
|
|
border-bottom: 1px solid #1a1b1d;
|
|
min-width: 0;
|
|
}
|
|
.crumbs { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 0.15rem; min-width: 0; font-size: 1.05rem; }
|
|
.crumbs button { border: 0; padding: 0.2em 0.4em; color: var(--muted); }
|
|
.crumbs button:last-child { color: var(--text); cursor: default; }
|
|
.crumbs button:last-child:hover { background: none; }
|
|
.crumbs .sep { color: var(--line); }
|
|
|
|
.tools { display: flex; align-items: center; gap: 1rem; }
|
|
.zoom { display: flex; align-items: center; gap: 0.5rem; }
|
|
.zoom input { width: 7rem; accent-color: var(--safelight); }
|
|
.zoom-dot { display: block; border: 1.5px solid var(--muted); border-radius: 2px; }
|
|
.zoom-dot.small { width: 8px; height: 8px; }
|
|
.zoom-dot.big { width: 13px; height: 13px; }
|
|
|
|
.content {
|
|
overflow-y: auto;
|
|
background: var(--table);
|
|
padding: 1.1rem 1.1rem 3rem;
|
|
outline: none;
|
|
}
|
|
|
|
/* ------------------------------------------------------------ Kontaktbogen */
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(var(--thumb), 1fr));
|
|
gap: var(--gap);
|
|
}
|
|
|
|
.tile {
|
|
position: relative;
|
|
aspect-ratio: 1;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
background: var(--tile);
|
|
content-visibility: auto;
|
|
contain-intrinsic-size: var(--thumb) var(--thumb);
|
|
}
|
|
.tile:hover { background: var(--tile); }
|
|
.tile img {
|
|
width: 100%; height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
.tile img.loaded { opacity: 1; }
|
|
.tile:hover img { filter: brightness(1.08); }
|
|
.tile:focus-visible { outline-offset: -2px; }
|
|
|
|
.tile .badge {
|
|
position: absolute; left: 6px; bottom: 6px;
|
|
width: 22px; height: 22px; border-radius: 50%;
|
|
background: rgba(0, 0, 0, 0.55);
|
|
display: grid; place-items: center;
|
|
font-size: 10px;
|
|
}
|
|
.tile.broken::after {
|
|
content: attr(data-name);
|
|
position: absolute; inset: 0;
|
|
display: grid; place-items: center;
|
|
padding: 0.6rem;
|
|
font-size: 0.8rem; color: var(--muted);
|
|
word-break: break-all; text-align: center;
|
|
}
|
|
|
|
/* Ordner und Alben tragen ihren Namen unter dem Bild */
|
|
.tile.folder, .tile.album {
|
|
aspect-ratio: auto;
|
|
background: none;
|
|
text-align: left;
|
|
display: grid;
|
|
gap: 0.35rem;
|
|
content-visibility: visible;
|
|
}
|
|
.tile.folder:hover, .tile.album:hover { background: none; }
|
|
.cover {
|
|
aspect-ratio: 1;
|
|
border-radius: 2px;
|
|
background: var(--tile);
|
|
overflow: hidden;
|
|
display: grid; place-items: center;
|
|
}
|
|
.cover img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.2s ease; }
|
|
.cover img.loaded { opacity: 1; }
|
|
.folder-shape {
|
|
width: 42%; aspect-ratio: 5 / 4;
|
|
border: 2px solid var(--muted);
|
|
border-radius: 3px 6px 4px 4px;
|
|
position: relative;
|
|
opacity: 0.7;
|
|
}
|
|
.folder-shape::before {
|
|
content: ""; position: absolute; top: -8px; left: -2px;
|
|
width: 40%; height: 8px;
|
|
border: 2px solid var(--muted); border-bottom: 0;
|
|
border-radius: 3px 3px 0 0;
|
|
}
|
|
.tile:hover .folder-shape { opacity: 1; }
|
|
.label { font-size: 0.9rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
|
|
.sublabel { font-size: 0.8rem; color: var(--muted); margin-top: -0.3rem; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
.folders { margin-bottom: 1.6rem; row-gap: 0.9rem; }
|
|
|
|
/* Zeitleiste: Monate als ruhige, große Überschriften */
|
|
.month { margin: 0 0 2.2rem; }
|
|
.month h2 {
|
|
margin: 0 0 0.7rem;
|
|
font-size: 1.75rem;
|
|
font-weight: 300;
|
|
letter-spacing: -0.01em;
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.7rem;
|
|
}
|
|
.month h2 small { font-size: 0.85rem; color: var(--muted); letter-spacing: 0; }
|
|
|
|
.notice {
|
|
max-width: 34rem;
|
|
margin: 4rem auto;
|
|
text-align: center;
|
|
color: var(--muted);
|
|
display: grid;
|
|
gap: 1rem;
|
|
justify-items: center;
|
|
}
|
|
.notice strong { color: var(--text); font-weight: 600; font-size: 1.05rem; }
|
|
.notice.error strong { color: var(--danger); }
|
|
|
|
.sentinel { height: 1px; }
|
|
.loading-more { text-align: center; color: var(--muted); padding: 1.5rem; }
|
|
|
|
/* ------------------------------------------------------------ Betrachter */
|
|
|
|
.viewer {
|
|
position: fixed; inset: 0;
|
|
background: #000;
|
|
z-index: 10;
|
|
}
|
|
.v-top {
|
|
display: flex; align-items: center; gap: 1rem;
|
|
padding: 0.6rem 1rem 1.4rem;
|
|
background: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0));
|
|
position: absolute; top: 0; left: 0; right: 0; z-index: 2;
|
|
transition: opacity 0.25s ease;
|
|
}
|
|
.v-title { flex: 1; min-width: 0; display: flex; gap: 0.9rem; align-items: baseline; }
|
|
#v-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.v-meta { color: var(--muted); font-size: 0.87rem; white-space: nowrap; display: flex; gap: 1.1rem; }
|
|
.v-actions { display: flex; gap: 0.4rem; }
|
|
.v-actions button { border-color: #3a3a3a; font-size: 0.9rem; }
|
|
#v-original.active { border-color: var(--safelight); color: var(--safelight); }
|
|
|
|
.v-stage { position: absolute; inset: 0; overflow: hidden; }
|
|
.v-stage img, .v-stage video {
|
|
position: absolute; inset: 0;
|
|
width: 100%; height: 100%;
|
|
object-fit: contain;
|
|
display: block;
|
|
}
|
|
.v-stage img.lowres { filter: blur(6px); }
|
|
.v-msg { position: absolute; bottom: 1.5rem; left: 0; right: 0; text-align: center; color: var(--muted); margin: 0; }
|
|
|
|
.v-nav {
|
|
position: fixed; top: 50%; transform: translateY(-50%);
|
|
width: 3.2rem; height: 5rem;
|
|
border: 0; border-radius: 6px;
|
|
font-size: 2.4rem; line-height: 1;
|
|
color: rgba(255,255,255,0.75);
|
|
background: rgba(0,0,0,0.25);
|
|
z-index: 3;
|
|
transition: opacity 0.25s ease;
|
|
}
|
|
.v-nav:hover { background: rgba(0,0,0,0.5); color: #fff; }
|
|
.v-nav.prev { left: 0.8rem; }
|
|
.v-nav.next { right: 0.8rem; }
|
|
.v-nav:disabled { opacity: 0 !important; pointer-events: none; }
|
|
|
|
.viewer.idle .v-top, .viewer.idle .v-nav { opacity: 0; }
|
|
.viewer.idle { cursor: none; }
|
|
|
|
@media (max-width: 760px) {
|
|
.app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
|
|
.sidebar { flex-direction: row; align-items: center; padding: 0.6rem; gap: 1rem; border-right: 0; border-bottom: 1px solid #1a1b1d; }
|
|
.sources { display: flex; }
|
|
.account { margin: 0 0 0 auto; }
|
|
.acc-server, .acc-name { display: none; }
|
|
.brand { display: none; }
|
|
.zoom { display: none; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after { transition: none !important; animation: none !important; }
|
|
}
|