/* ******************************************************************************************************* * JAPA - publish.css * Komplettes Blatt fuer JAPA Instant Publish (index.php). Einzige Abhaengigkeit ist Bootstrap 5. * * * Drei Zustaende, alle im selben Geruest: * - Ergebnisse ?id=12345 * - noch nichts da ?id=12345, Datei fehlt noch * - ohne Kennung Aufruf ohne ?id * * AUFBAU * 1. Tokens - Kopie der Light-Tokens aus japa-formshell.css (Online-Nennung) * 2. Bausteine - Kopfleiste, Buttons, Footer-Band im Stil der Online-Nennung * 3. Publish - alles, was es nur hier gibt * 4. Viewports, Bewegung, Druck * * Teil 1 und 2 sind wortgleich mit events.css - Events, Publish und Online-Nennung sind * eigenstaendige Projekte und sollen ohne gemeinsame Datei laufen. Fuehrend bleibt * japa-formshell.css: wird dort eine Farbe geaendert, hier und in events.css nachziehen. * * Die Kopfleiste sitzt auf Bootstraps .navbar.sticky-top - wie die Kopfleiste der * Online-Nennung, die ebenfalls eine native Navbar ist. * * KEIN Dark-Mode: die Ergebnisliste wird viel gedruckt und aus Messenger-Links heraus geoeffnet, * sie soll ueberall gleich aussehen. traegt zusaetzlich data-bs-theme="light". * * 14-08-26 - Neufassung: Design an die Online-Nennung und an events.css angeglichen * *******************************************************************************************************/ /* =================================================================================================== * 1. TOKENS Stand japa-formshell.css vom 12-08-26 * =================================================================================================== */ :root { --japa-blue: #4d82a3; /* Headline / Akzent, wie Bestaetigungsmail */ --japa-blue-deep: #1e5c7a; --japa-amber: #b07d2b; /* dezenter Stoerungs-Akzent statt Rot */ --japa-link: #277bd2; --japa-action: #277bd2; --japa-action-deep: #1f66b0; --japa-action-text: #ffffff; --japa-box: #eef4f8; --japa-box-border: #e0e8ee; --japa-band: #f0f0f0; --japa-text: #1a1a1a; --japa-text-soft: #555555; --japa-text-mute: #888888; --japa-page: #ffffff; --japa-rule: #d0d0d0; --japa-canvas: #e8ebee; /* "Schreibtisch" um das Blatt */ --japa-chrome: rgba(255, 255, 255, .86); --japa-chrome-line: #d7dbdf; --japa-shade: 0 1px 2px rgba(0, 0, 0, .07), 0 10px 28px rgba(0, 0, 0, .16); --japa-ui-font: 'Segoe UI', Arial, Helvetica, sans-serif; --japa-radius: 8px; /* ---- Ergaenzungen, die es in japa-formshell.css (noch) nicht gibt ---- */ --japa-amber-box: #f7f0e2; --japa-shade-card: 0 1px 2px rgba(0, 0, 0, .05), 0 2px 8px rgba(0, 0, 0, .06); --japa-shade-lift: 0 2px 5px rgba(0, 0, 0, .08), 0 10px 24px rgba(0, 0, 0, .12); } /* =================================================================================================== * 2. BAUSTEINE Kopfleiste, Buttons, Footer-Band * =================================================================================================== */ /* ------------------------------------------------------------------ Kopfleiste */ .japa-bar { --bs-navbar-padding-y: .25rem; background: var(--japa-chrome); border-bottom: 1px solid var(--japa-chrome-line); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); } .japa-bar__brand { display: flex; align-items: center; gap: .5rem; margin-right: .5rem; color: var(--japa-text); } .japa-bar__brand svg { width: 20px; height: 20px; flex: none; } .japa-bar__title { font-weight: 500; } .japa-bar__actions { display: flex; align-items: center; gap: 2px; margin-left: auto; } .japa-bar__icons { display: flex; align-items: center; gap: 2px; } /* Umschalter zwischen Fragezeichen (breit) und drei Punkten (schmal) - siehe Abschnitt 4 */ .japa-bar__ico--narrow { display: none; } /* Symbolschalter in der Kopfleiste - Teilen, Drucken, Hilfe */ .japa-bar__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--japa-radius); background: transparent; color: var(--japa-text-soft); text-decoration: none; cursor: pointer; transition: background-color .2s ease, color .2s ease; } .japa-bar__icon:hover, .japa-bar__icon[aria-expanded="true"] { background: var(--japa-box); color: var(--japa-blue-deep); } .japa-bar__icon:focus-visible { outline: 2px solid var(--japa-link); outline-offset: 2px; } .japa-bar__icon .japa-ico { width: 17px; height: 17px; } /* Helles Menue statt des dunklen Bootstrap-Standards - gleiche Sprache wie die Kopfleiste */ .dropdown-menu.japa-menu { --bs-dropdown-bg: var(--japa-page); --bs-dropdown-border-color: var(--japa-chrome-line); --bs-dropdown-border-radius: var(--japa-radius); --bs-dropdown-link-color: var(--japa-text-soft); --bs-dropdown-link-hover-color: var(--japa-blue-deep); --bs-dropdown-link-hover-bg: var(--japa-box); --bs-dropdown-font-size: 14px; --bs-dropdown-item-padding-y: .5rem; --bs-dropdown-item-padding-x: .9rem; min-width: 200px; box-shadow: var(--japa-shade-lift); } .dropdown-menu.japa-menu .dropdown-item { display: flex; align-items: center; gap: .6em; cursor: pointer; } .dropdown-menu.japa-menu .japa-ico { width: 15px; height: 15px; color: var(--japa-text-mute); } /* ------------------------------------------------------------------ Buttons */ .japa-btn { display: inline-flex; align-items: center; gap: .5em; border: 0; border-radius: var(--japa-radius); font-family: inherit; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .12s ease; } .japa-btn:active { transform: scale(.97); } .japa-btn:focus-visible { outline: 2px solid var(--japa-link); outline-offset: 2px; } .japa-btn svg { flex: none; } .japa-btn--primary { padding: 10px 18px; font-size: 15px; font-weight: 600; line-height: 1; background: var(--japa-action); color: var(--japa-action-text); } .japa-btn--primary:hover { background: var(--japa-action-deep); color: var(--japa-action-text); } .japa-btn--primary svg { width: 18px; height: 18px; } .japa-btn--quiet { padding: 10px 14px; font-size: 15px; font-weight: 500; line-height: 1; background: transparent; color: var(--japa-text-soft); } .japa-btn--quiet:hover { background: var(--japa-box); color: var(--japa-blue-deep); } .japa-btn--quiet svg { width: 18px; height: 18px; } /* ------------------------------------------------------------------ Footer-Band */ .footer-band { background: var(--japa-band); padding: 16px; text-align: center; font-size: 12px; line-height: 1.6; color: var(--japa-text-mute); } /* Die Publikationszeile ist eine eigene Aussage, keine Fussnote zur Wortmarke - deshalb deutlich abgesetzt statt nur eine Zeile hoeher. */ .footer-band__published { margin-bottom: .9rem; } .footer-band a { color: var(--japa-link); text-decoration: none; white-space: nowrap; } .footer-band a:hover { text-decoration: underline; } .footer-band .sep { padding: 0 .5em; color: var(--japa-text-mute); } .footer-band .brand { font-weight: 600; color: var(--japa-text-soft); text-decoration: none; white-space: nowrap; } .footer-band .brand:hover { text-decoration: underline; } .footer-band .brand svg { width: 14px; height: 14px; vertical-align: -2px; margin: 0 .35em 0 .3em; } /* =================================================================================================== * 3. PUBLISH * =================================================================================================== */ body.japa-publish { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; font-family: var(--japa-ui-font); background: var(--japa-canvas); color: var(--japa-text); } .japa-main { flex: 1 0 auto; padding: 1.75rem 1rem 3rem; } /* ------------------------------------------------------------------ Das Blatt */ .japa-sheet { max-width: 980px; margin: 0 auto; background: var(--japa-page); border-radius: var(--japa-radius); box-shadow: var(--japa-shade); overflow: hidden; } /* ------------------------------------------------------------------ Kopf des Blattes */ .japa-sheet__head { padding: 1.75rem 1.5rem 1.5rem; text-align: center; background: var(--japa-box); border-bottom: 1px solid var(--japa-box-border); } /* Der Verein ist der Absender der Liste - er darf mehr Gewicht haben als eine Fusszeile, bleibt aber unter dem Blau der Veranstaltung. */ .japa-sheet__club { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--japa-text-soft); } .japa-sheet__title { margin: .25rem 0 0; font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--japa-blue); } .japa-sheet__meta .sep { color: var(--japa-text-mute); padding: 0 .15em; } .japa-sheet__meta { margin: .35rem 0 0; font-size: 14px; line-height: 1.5; color: var(--japa-text-soft); } /* Kennzahlen: gemeldet / erschienen / geprueft / bestanden */ .japa-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 2rem; margin: 1.25rem 0 0; padding: 0; list-style: none; } .japa-stat { display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 4.5rem; } /* Gefuellte Plakette statt blosser Zahl - bewusst im Headline-Blau und NICHT im Aktionsblau (--japa-action), damit die Zahlen nicht wie Schaltflaechen aussehen. Alle vier gleich: sie sind gleichrangig, es soll nichts eine Rangfolge suggerieren. */ .japa-stat__value { display: inline-block; min-width: 2.4em; padding: .2em .6em; border-radius: 999px; background: var(--japa-blue-deep); font-size: 20px; font-weight: 600; line-height: 1.25; color: #ffffff; text-align: center; } .japa-stat__label { font-size: 12px; line-height: 1; color: var(--japa-text-mute); } /* ------------------------------------------------------------------ Eintraege */ .japa-entries { margin: 0; padding: 0; list-style: none; } .japa-entry { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--japa-rule); } .japa-entry:last-child { border-bottom: 0; } .japa-entry__main { flex: 1; min-width: 0; } .japa-entry__breed { font-size: 12px; line-height: 1.3; color: var(--japa-text-mute); } .japa-entry__dog { margin: .1rem 0 .3rem; font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: var(--japa-text); } .japa-entry__meta { margin: 0; font-size: 13px; line-height: 1.5; color: var(--japa-text-soft); } .japa-entry__handler { color: var(--japa-text-mute); } /* Ergebnis rechts. min-width haelt die Zahlenspalte ueber alle Zeilen auf einer Flucht. */ .japa-entry__score { flex: none; min-width: 7rem; text-align: right; } .japa-score__label { display: block; font-size: 12px; line-height: 1.3; color: var(--japa-text-mute); } .japa-score__value { display: block; font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--japa-blue-deep); } /* "n.b." / "n.e." sind kein Ergebnis, sondern dessen Abwesenheit - entsprechend zurueckhaltend */ .japa-score__value--none { font-size: 20px; font-weight: 500; color: var(--japa-text-mute); } /* Der Preis steht direkt unter der Punktzahl und gehoert zum Ergebnis - halbfett, damit er sich von den Angaben links absetzt. */ .japa-score__prize { display: block; margin-top: .3rem; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--japa-text-soft); } .japa-chip { display: inline-flex; align-items: center; margin-top: .4rem; padding: .3em .7em; border-radius: 999px; background: var(--japa-box); font-size: 12px; line-height: 1.3; color: var(--japa-blue-deep); white-space: nowrap; } /* ------------------------------------------------------------------ Meldungsseiten */ .japa-msg { max-width: 580px; margin: 2rem auto; text-align: center; } .japa-msg__icon { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin-bottom: 1.5rem; border-radius: 50%; background: var(--japa-box); color: var(--japa-blue); } .japa-msg__icon .japa-ico { width: 34px; height: 34px; } .japa-msg__heading { margin: 0 0 1.25rem; font-size: 25px; font-weight: 700; line-height: 1.25; color: var(--japa-blue); } .japa-msg__rule { border: 0; border-top: 1px solid var(--japa-rule); margin: 0 0 1.5rem; opacity: 1; } .japa-msg__box { margin: 0; padding: 18px 22px; border: 1px solid var(--japa-box-border); border-radius: 10px; background: var(--japa-box); font-size: 15px; line-height: 1.7; color: var(--japa-text); } .japa-msg__cta { margin: 1.75rem 0 0; } /* ------------------------------------------------------------------ Teilen-Zeile im Footer */ .japa-share { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; margin: .75rem 0 0; padding: 0; list-style: none; } .japa-share a { display: inline-flex; align-items: center; gap: .45em; padding: .4rem .7rem; border-radius: var(--japa-radius); font-size: 12px; color: var(--japa-text-soft); text-decoration: none; white-space: nowrap; transition: background-color .2s ease, color .2s ease; } .japa-share a:hover { background: rgba(0, 0, 0, .05); color: var(--japa-blue-deep); text-decoration: none; } .japa-share .japa-ico { width: 14px; height: 14px; } /* ------------------------------------------------------------------ Icons */ .japa-ico { width: 1em; height: 1em; flex: none; vertical-align: -.125em; fill: currentColor; } /* ------------------------------------------------------------------ Impressums-Dialog */ .japa-modal .modal-content { border: 0; border-radius: var(--japa-radius); box-shadow: var(--japa-shade); } .japa-modal .modal-header { border-bottom: 1px solid var(--japa-rule); } .japa-modal .modal-footer { border-top: 1px solid var(--japa-rule); } .japa-modal .modal-title { font-size: 1.1rem; font-weight: 600; color: var(--japa-blue); } .japa-modal .japa-legal { font-size: 13px; line-height: 1.65; color: var(--japa-text-soft); text-align: left; } .japa-modal .japa-legal strong { color: var(--japa-text); } .japa-modal .japa-legal a { color: var(--japa-link); text-decoration: none; } .japa-modal .japa-legal a:hover { text-decoration: underline; } /* =================================================================================================== * 4. VIEWPORTS, BEWEGUNG, DRUCK * =================================================================================================== */ /* Unterhalb dieser Breite wird die Symbolreihe zu eng - alle Aktionen wandern ins Drei-Punkte-Menue, damit die Kopfleiste einzeilig bleibt. */ @media screen and (max-width: 767.98px) { .japa-bar__icons { display: none; } .japa-bar__ico--wide { display: none; } .japa-bar__ico--narrow { display: inline-block; } } @media screen and (min-width: 768px) { .japa-menu__narrow { display: none; } } @media screen and (max-width: 575.98px) { .japa-main { padding: 1rem .75rem 2rem; } .japa-sheet__head { padding: 1.25rem 1rem 1.25rem; } .japa-sheet__title { font-size: 19px; } .japa-entry { gap: .75rem; padding: .9rem 1rem; } .japa-entry__score { min-width: 5.5rem; } .japa-score__value { font-size: 26px; } .japa-stats { gap: 1rem 1.5rem; } .japa-bar__icon { width: 34px; height: 34px; } } @media (prefers-reduced-motion: reduce) { .japa-btn, .japa-btn:active, .japa-bar__icon, .japa-share a { transition: none; } .japa-btn:active { transform: none; } } /* ------------------------------------------------------------------ Druck Ergebnislisten werden viel ausgedruckt und an den Aushang gehaengt - deshalb kein Beiwerk, kein Schatten, und keine Zeile, die ueber den Seitenrand bricht. */ @media print { body.japa-publish { background: #fff !important; display: block; } .japa-bar, .footer-band .japa-share, .no-print { display: none !important; } .japa-main { padding: 0; } .japa-sheet { max-width: none; box-shadow: none; border-radius: 0; } .japa-sheet__head { background: #fff !important; border-bottom: 2px solid var(--japa-rule); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .japa-entry { break-inside: avoid; page-break-inside: avoid; padding: .5rem 0; } .japa-score__value { font-size: 22px; } /* Gefuellte Plaketten kosten auf Papier viel Toner und werden von manchen Treibern gar nicht gedruckt - deshalb hier als Umriss. */ .japa-stat__value { background: transparent; border: 1px solid var(--japa-rule); color: var(--japa-blue-deep); } .footer-band { background: #fff !important; border-top: 1px solid var(--japa-rule); } }