ClaudeandClaude Opus 5.5
dc6bd3362b
Logo-Kacheln, Logo-Infozeile und Detailseite zeigen keinen Ersatz („von Anonym“, alter Anzeigename) mehr, der gleich auf „von @name“ wechselt: Solange die Abfrage für den Hochlader läuft, ist die Zeile leer und behält ihre Höhe (U+200B vor dem leeren Inhalt in logos.css und community.css); danach steht der Name, ohne Profil oder bei einem Fehler der Ersatz. Schon bekannte Hochlader zeigen ihre Zeile sofort, ein gemeldeter Name beendet das Warten. Die Infozeile lässt dabei Zeile und Trenner weg („<Name> · ♥ <Zahl>“), LogoInfoHost bekommt byline(logo) statt names(). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
914 lines
16 KiB
CSS
914 lines
16 KiB
CSS
/* Startseite: kompakter Hero mit schwebender Karte und die Community-Galerie darunter.
|
|
Wichtig (Abnahmekriterium): bei 1440 x 900 und 390 x 844 stehen die Überschrift „Community-Karten“ und
|
|
die Oberkante der ersten Kartenreihe schon im ersten Bildschirm. Der Hero bleibt deshalb niedrig. */
|
|
|
|
/* Knöpfe der Startseite (unabhängig von editor.css / account.css) */
|
|
|
|
.home-btn {
|
|
appearance: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 46px;
|
|
margin: 0;
|
|
padding: 0 22px;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 12px;
|
|
background: transparent;
|
|
color: var(--text);
|
|
font: inherit;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: background-color 0.12s, border-color 0.12s;
|
|
}
|
|
|
|
.home-btn:hover:not(:disabled) {
|
|
border-color: var(--sel-line);
|
|
background: var(--panel);
|
|
}
|
|
|
|
.home-btn-primary {
|
|
border-color: var(--primary);
|
|
background: var(--primary);
|
|
color: var(--on-primary);
|
|
}
|
|
|
|
.home-btn-primary:hover:not(:disabled) {
|
|
border-color: var(--primary-hover);
|
|
background: var(--primary-hover);
|
|
}
|
|
|
|
.home-btn:disabled {
|
|
opacity: 0.55;
|
|
cursor: progress;
|
|
}
|
|
|
|
/* Hero */
|
|
|
|
.home-hero {
|
|
--hero-card-max: 540px;
|
|
--card-radius: 3.711% / 5.882%; /* 57 px von 1536 x 969, wie in der Editor-Vorschau */
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
|
|
align-items: center;
|
|
gap: 24px 56px;
|
|
min-height: auto;
|
|
padding: 14px 0 10px;
|
|
}
|
|
|
|
/* Nur auf breiten, hohen Fenstern: der Hero nimmt höchstens 60 % der Höhe. Auf schmaleren oder niedrigeren Fenstern
|
|
bräche der Text in mehr Zeilen um und würde über die Grenze hinausragen (und die Galerie-Überschrift überdecken). */
|
|
@media (min-width: 1100px) and (min-height: 700px) {
|
|
.home-hero {
|
|
max-height: 60vh;
|
|
--hero-card-max: min(540px, calc((60vh - 48px) * 1536 / 969));
|
|
}
|
|
}
|
|
|
|
.home-hero-copy {
|
|
min-width: 0;
|
|
}
|
|
|
|
.home-hero-eyebrow {
|
|
margin: 0 0 10px;
|
|
color: var(--muted);
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
#app-root .home-hero-title {
|
|
margin: 0 0 14px;
|
|
font-size: clamp(1.95rem, 4.4vw, 3.15rem);
|
|
font-weight: 800;
|
|
line-height: 1.08;
|
|
letter-spacing: -0.01em;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.home-hero-lead {
|
|
max-width: 34em;
|
|
margin: 0 0 22px;
|
|
color: var(--muted);
|
|
font-size: 1.1rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.home-hero-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px 12px;
|
|
}
|
|
|
|
.home-hero-visual {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
min-width: 0;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
/* weicher Lichtschein hinter der Karte */
|
|
.home-hero-visual::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -10% 0; /* seitlich nicht über den Hero hinaus: sonst entsteht waagerechtes Scrollen */
|
|
border-radius: 50%;
|
|
background: radial-gradient(closest-side, rgb(112 92 255 / 0.32), rgb(60 140 255 / 0.12) 60%, transparent);
|
|
filter: blur(14px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
:root[data-theme='light'] .home-hero-visual::before {
|
|
background: radial-gradient(closest-side, rgb(112 92 255 / 0.22), rgb(60 140 255 / 0.1) 60%, transparent);
|
|
}
|
|
|
|
.hero-card {
|
|
position: relative;
|
|
width: min(100%, var(--hero-card-max));
|
|
aspect-ratio: 1536 / 969;
|
|
overflow: hidden;
|
|
border-radius: var(--card-radius);
|
|
background: var(--panel-2);
|
|
box-shadow: var(--shadow-card), 0 0 0 1px rgb(255 255 255 / 0.06);
|
|
transform: rotate(-1.5deg);
|
|
}
|
|
|
|
.hero-card img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.hero-card-link {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Schwebe-Animation: nur ohne „Bewegung reduzieren“ */
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.hero-card {
|
|
animation: hero-float 7s ease-in-out infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes hero-float {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0) rotate(-1.5deg);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-10px) rotate(-0.7deg);
|
|
}
|
|
}
|
|
|
|
/* Galerie-Abschnitt */
|
|
|
|
.home-community {
|
|
margin-top: 36px;
|
|
scroll-margin-top: 16px;
|
|
}
|
|
|
|
.community-head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 12px 24px;
|
|
}
|
|
|
|
.community-head-text {
|
|
min-width: 0;
|
|
}
|
|
|
|
.community-title {
|
|
margin: 0;
|
|
font-size: clamp(1.5rem, 3vw, 1.95rem);
|
|
font-weight: 800;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.community-sub {
|
|
margin: 4px 0 0;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.community-toolbar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0 16px;
|
|
}
|
|
|
|
.community-toolbar > :empty {
|
|
display: none;
|
|
}
|
|
|
|
.community-active,
|
|
.community-filter {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.community-active {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.community-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
max-width: 100%;
|
|
padding: 3px 4px 3px 14px;
|
|
border: 1px solid var(--sel-line);
|
|
border-radius: 999px;
|
|
background: var(--sel-bg);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.community-chip-label {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.community-chip-value {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.community-chip-clear {
|
|
appearance: none;
|
|
display: grid;
|
|
flex: none;
|
|
place-items: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
font-size: 1.35rem;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.community-chip-clear:hover {
|
|
background: rgb(127 127 127 / 0.22);
|
|
}
|
|
|
|
.community-filter {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.community-filter-btn {
|
|
appearance: none;
|
|
min-height: 36px;
|
|
margin: 0;
|
|
padding: 0 16px;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--text);
|
|
font: inherit;
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.community-filter-btn:hover {
|
|
border-color: var(--sel-line);
|
|
}
|
|
|
|
.community-filter-btn[aria-pressed='true'] {
|
|
border-color: var(--primary);
|
|
background: var(--primary);
|
|
color: var(--on-primary);
|
|
}
|
|
|
|
.community-status {
|
|
margin: 24px 0 12px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.community-status.is-error,
|
|
.community-more-msg.is-error {
|
|
color: var(--danger-text);
|
|
}
|
|
|
|
.community-empty {
|
|
margin-top: 20px;
|
|
padding: 36px 20px;
|
|
border: 1px dashed var(--line-strong);
|
|
border-radius: 18px;
|
|
color: var(--muted);
|
|
font-size: 1.05rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.community-empty p {
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
.community-empty p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.community-more {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-top: 28px;
|
|
}
|
|
|
|
.community-more:empty {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.community-more-msg {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Kachelraster */
|
|
|
|
.gallery-grid {
|
|
--card-radius: 3.711% / 5.882%;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
|
|
gap: 20px;
|
|
margin: 20px 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.gallery-tile {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
padding: 10px 10px 14px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 18px;
|
|
background: var(--panel);
|
|
transition: border-color 0.12s, box-shadow 0.12s;
|
|
}
|
|
|
|
.gallery-tile:hover {
|
|
border-color: var(--line-strong);
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
|
|
.gallery-tile-link {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
border-radius: 12px;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.gallery-thumb {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
aspect-ratio: 1536 / 969;
|
|
overflow: hidden;
|
|
border-radius: var(--card-radius);
|
|
background: var(--panel-2);
|
|
color: var(--muted);
|
|
font-size: 0.9rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.gallery-thumb img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.gallery-title {
|
|
display: -webkit-box;
|
|
margin: 0;
|
|
padding: 0 4px;
|
|
overflow: hidden;
|
|
font-size: 1.05rem;
|
|
font-weight: 700;
|
|
line-height: 1.25;
|
|
overflow-wrap: anywhere;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
}
|
|
|
|
.gallery-issuer {
|
|
margin: 0;
|
|
padding: 0 4px;
|
|
overflow: hidden;
|
|
color: var(--muted);
|
|
font-size: 0.9rem;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.gallery-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin-top: auto;
|
|
padding: 6px 4px 0;
|
|
}
|
|
|
|
.gallery-tag {
|
|
appearance: none;
|
|
min-height: 28px;
|
|
margin: 0;
|
|
padding: 2px 11px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
background: var(--panel-2);
|
|
color: var(--muted);
|
|
font: inherit;
|
|
font-size: 0.82rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.gallery-tag:hover {
|
|
border-color: var(--sel-line);
|
|
color: var(--text);
|
|
}
|
|
|
|
.gallery-badges {
|
|
position: absolute;
|
|
top: 18px;
|
|
left: 18px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.gallery-badge {
|
|
padding: 2px 9px;
|
|
border-radius: 999px;
|
|
background: rgb(15 24 40 / 0.85);
|
|
color: #fff;
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.gallery-badge-hidden {
|
|
background: #b42318;
|
|
}
|
|
|
|
/* Detailseite /community/<id> */
|
|
|
|
.detail-page {
|
|
--card-radius: 3.711% / 5.882%;
|
|
}
|
|
|
|
.detail-back {
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
.detail-back a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 36px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.detail-back a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.detail-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
|
|
align-items: start;
|
|
gap: 24px 36px;
|
|
}
|
|
|
|
.detail-card {
|
|
position: relative;
|
|
aspect-ratio: 1536 / 969;
|
|
overflow: hidden;
|
|
border-radius: var(--card-radius);
|
|
background: var(--panel-2);
|
|
box-shadow: var(--shadow-card), 0 0 0 1px rgb(255 255 255 / 0.06);
|
|
}
|
|
|
|
.detail-card img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.detail-card-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
height: 100%;
|
|
padding: 16px;
|
|
color: var(--muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.detail-card-empty p {
|
|
margin: 0;
|
|
}
|
|
|
|
.detail-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
}
|
|
|
|
#app-root .detail-title {
|
|
margin: 0;
|
|
font-size: clamp(1.5rem, 3vw, 2rem);
|
|
font-weight: 800;
|
|
line-height: 1.15;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.detail-issuer {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.detail-meta {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* Solange der Name des Autors noch gesucht wird, ist die Zeile leer (kein Knoten darin). Ein Zeichen ohne Breite (U+200B) hält die Zeile
|
|
in der Höhe des Textes, damit die Seite nicht springt, wenn „von @name · Datum“ dazukommt. */
|
|
.detail-meta:empty::before {
|
|
content: '\200b';
|
|
}
|
|
|
|
.detail-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.detail-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 32px;
|
|
padding: 2px 13px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
background: var(--panel-2);
|
|
color: var(--muted);
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.detail-tag:hover {
|
|
border-color: var(--sel-line);
|
|
color: var(--text);
|
|
}
|
|
|
|
.detail-notice-slot:empty,
|
|
.detail-admin-slot:empty {
|
|
display: none;
|
|
}
|
|
|
|
.detail-hidden {
|
|
margin: 0;
|
|
padding: 10px 14px;
|
|
border: 1px solid var(--danger);
|
|
border-radius: 12px;
|
|
background: rgb(229 72 77 / 0.12);
|
|
}
|
|
|
|
.detail-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.detail-btn-danger {
|
|
border-color: var(--danger);
|
|
color: var(--danger-text);
|
|
}
|
|
|
|
.detail-btn-danger:hover:not(:disabled) {
|
|
border-color: var(--danger);
|
|
background: rgb(229 72 77 / 0.16);
|
|
}
|
|
|
|
.detail-msg {
|
|
margin: 0;
|
|
color: var(--ok-text);
|
|
}
|
|
|
|
.detail-msg.is-error {
|
|
color: var(--danger-text);
|
|
}
|
|
|
|
/* Leer bleibt die Meldungszeile gerendert (Live-Region), nimmt aber keinen Platz ein: mit display: none stünde sie nicht im
|
|
Zugänglichkeitsbaum, und Screenreader meldeten den Text nicht, der später hineinkommt. */
|
|
.detail-msg:empty {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
margin: -1px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
clip-path: inset(50%);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.detail-admin {
|
|
margin-top: 8px;
|
|
padding: 16px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 16px;
|
|
background: var(--panel);
|
|
}
|
|
|
|
.detail-admin-title {
|
|
margin: 0 0 8px;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.detail-reports-count {
|
|
margin: 0 0 8px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.detail-reasons {
|
|
margin: 0 0 12px;
|
|
padding-left: 20px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.detail-admin-note {
|
|
margin: 0 0 12px;
|
|
color: var(--warn-text);
|
|
}
|
|
|
|
.detail-admin-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.detail-unavailable {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
max-width: 560px;
|
|
padding: 24px 0;
|
|
}
|
|
|
|
.detail-load-error,
|
|
.detail-status {
|
|
margin: 24px 0;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.detail-load-error {
|
|
margin: 0;
|
|
color: var(--danger-text);
|
|
}
|
|
|
|
/* Melden-Dialog (Knöpfe und Meldungen kommen aus account.css) */
|
|
|
|
.report-dialog {
|
|
width: min(420px, calc(100vw - 32px));
|
|
max-height: calc(100dvh - 32px);
|
|
padding: 0;
|
|
overflow: auto;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 20px;
|
|
background: var(--panel);
|
|
color: var(--text);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.report-dialog::backdrop {
|
|
background: var(--backdrop);
|
|
}
|
|
|
|
.report-card {
|
|
padding: 24px;
|
|
}
|
|
|
|
.report-title {
|
|
margin: 0 0 8px;
|
|
font-size: 1.25rem;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.report-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
|
|
.report-text {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.report-reasons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
.report-legend {
|
|
margin-bottom: 4px;
|
|
padding: 0;
|
|
color: var(--muted);
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.report-reason {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-height: 44px;
|
|
padding: 0 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.report-reason:hover {
|
|
border-color: var(--sel-line);
|
|
}
|
|
|
|
.report-reason:has(input:checked) {
|
|
border-color: var(--sel-line);
|
|
background: var(--sel-bg);
|
|
}
|
|
|
|
.report-reason input {
|
|
flex: none;
|
|
width: 18px;
|
|
height: 18px;
|
|
margin: 0;
|
|
accent-color: var(--sel-line);
|
|
}
|
|
|
|
.report-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* Veröffentlichen-Dialog: Hülle, Meldungen und Knöpfe wie beim Melden-Dialog, dazu Felder und die Pflicht-Checkbox */
|
|
|
|
.publish-dialog {
|
|
width: min(480px, calc(100vw - 32px));
|
|
}
|
|
|
|
.publish-fields {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
|
|
.publish-consent {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.publish-consent:has(input:checked) {
|
|
border-color: var(--sel-line);
|
|
background: var(--sel-bg);
|
|
}
|
|
|
|
.publish-consent input {
|
|
flex: none;
|
|
width: 18px;
|
|
height: 18px;
|
|
margin: 2px 0 0;
|
|
accent-color: var(--sel-line);
|
|
}
|
|
|
|
.publish-consent span {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* Tablet und Handy: eine Spalte, der Hero bleibt niedrig */
|
|
|
|
@media (max-width: 899px) {
|
|
.detail-layout {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.home-hero {
|
|
--hero-card-max: 400px;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 16px;
|
|
padding: 4px 0 6px;
|
|
}
|
|
|
|
.home-hero-visual {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 599px) {
|
|
.detail-actions .home-btn {
|
|
flex: 1 1 100%;
|
|
}
|
|
|
|
.home-hero {
|
|
--hero-card-max: 250px;
|
|
gap: 8px;
|
|
margin-top: -4px;
|
|
padding: 0;
|
|
}
|
|
|
|
.home-hero-eyebrow {
|
|
margin-bottom: 4px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
#app-root .home-hero-title {
|
|
margin-bottom: 8px;
|
|
font-size: 1.85rem;
|
|
}
|
|
|
|
.home-hero-lead {
|
|
margin-bottom: 14px;
|
|
font-size: 0.97rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.home-btn {
|
|
min-height: 44px;
|
|
padding: 0 18px;
|
|
}
|
|
|
|
.home-hero-visual {
|
|
padding: 10px 0 4px; /* Luft nach oben für die Schwebe-Animation (10 px nach oben) */
|
|
}
|
|
|
|
.home-community {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.community-head {
|
|
gap: 10px;
|
|
}
|
|
|
|
.community-publish {
|
|
width: 100%;
|
|
min-height: 42px;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.home-btn,
|
|
.gallery-tile {
|
|
transition: none;
|
|
}
|
|
}
|