/* pbflow — ein Stylesheet fuer alle Seiten. Weisse Boxen mit schwarzem Rahmen auf dem UWU-Muster. Keine Akzentfarbe, keine Rundungen, keine Schatten. Alles, was klickbar ist, sieht gleich aus. */ @import url('https://fonts.googleapis.com/css?family=Work+Sans:400,600,800&display=swap'); * { box-sizing: border-box; } /* Muster und Schleier als zwei Ebenen auf : faerbt immer die gesamte Canvas ein, unabhaengig von der Dokumenthoehe. */ html { background: linear-gradient(rgba(255, 255, 255, 0.60), rgba(255, 255, 255, 0.60)), #FFFFFF url('/uwu1.gif') repeat; background-size: auto, 150px; -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 24px 16px; font-family: 'Work Sans', sans-serif; font-weight: 400; font-size: 18px; line-height: 1.5; color: #000; } .wrap { max-width: 720px; margin: 0 auto; } /* --- Die Box --- */ .panel { background: #FFFFFF; border: 2px solid #000; padding: 20px 22px; margin: 0 0 20px; } /* Kein Leerraum am Rand der Box: das erste und letzte Element sitzen buendig. */ .panel > :first-child { margin-top: 0; } .panel > :last-child { margin-bottom: 0; } /* --- Text --- */ h1 { font-weight: 800; font-size: 28px; line-height: 1.2; margin: 0 0 12px; } h2 { font-weight: 800; font-size: 19px; margin: 20px 0 8px; } h3 { font-weight: 700; font-size: 15px; margin: 16px 0 6px; } p { margin: 0 0 12px; } ul, ol { margin: 0 0 12px; padding-left: 22px; } li { margin: 5px 0; } li:first-child { margin-top: 0; } li:last-child { margin-bottom: 0; } code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; } /* Fliesstext zum Kopieren bricht um; nur echter Code scrollt. */ pre.wrap-text { white-space: pre-wrap; word-break: break-word; } pre { background: #FFFFFF; border: 2px solid #000; padding: 10px 12px; margin: 0 0 12px; overflow-x: auto; white-space: pre; } .muted { color: #555; } .small { font-size: 15px; } /* --- Klickbares: Buttons und Links sehen gleich aus --- */ a { color: #000; } .button { display: inline-block; background: #FFFFFF; color: #000; border: 2px solid #000; border-radius: 0; padding: 12px 22px; font-family: 'Work Sans', sans-serif; font-weight: 800; font-size: 20px; line-height: 1.2; cursor: pointer; text-align: center; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .button:hover:not(:disabled), .button:focus-visible { background: #000; color: #FFFFFF; } .button:disabled { color: #777; border-color: #777; cursor: progress; } .button.big { display: block; width: 100%; font-size: 34px; padding: 24px; margin: 0 0 20px; } /* --- Ergebnisbild --- */ .resultbox { background: #FFFFFF; border: 2px solid #000; padding: 8px; margin: 0 0 20px; line-height: 0; } .resultbox img { display: block; max-width: 100%; height: auto; } /* --- Statuszeile --- */ .status { background: #FFFFFF; border: 2px solid #000; padding: 12px 16px; margin: 0 0 20px; font-weight: 600; word-break: break-word; } .status:empty { display: none; } /* Innerhalb einer Box braucht die Statuszeile keinen zweiten Rahmen. */ .panel .status { border: 0; padding: 0; margin: 0 0 12px; } /* --- Die Linkzeile am Fuss jeder Seite --- */ .nav { background: #FFFFFF; border: 2px solid #000; padding: 0; margin: 0; font-size: 16px; /* auto-fit + 1fr: gleich breite Zellen, egal wie viele Links es sind. Die Box hat dadurch keinen toten Rest. */ display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } .nav a { min-width: 0; padding: 12px 8px; text-align: center; text-decoration: underline; border-right: 2px solid #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav a:last-child { border-right: 0; } /* Schmale Fenster: zwei mal zwei statt vier nebeneinander. */ @media (max-width: 520px) { .nav { grid-template-columns: 1fr 1fr; } .nav a { border-right: 2px solid #000; } .nav a:nth-child(2n) { border-right: 0; } .nav a:nth-last-child(n+3) { border-bottom: 2px solid #000; } } .nav a:hover, .nav a:focus-visible { background: #000; color: #FFFFFF; text-decoration: none; } @media (max-width: 480px) { body { padding: 14px 10px; font-size: 17px; } .panel { padding: 16px 16px; margin-bottom: 14px; } h1 { font-size: 24px; } .button.big { font-size: 26px; padding: 18px; } pre, code { font-size: 13.5px; } } @media (prefers-reduced-motion: reduce) { .button { transition: none; } } /* --- Lichtstreifen: laeuft einmal von links nach rechts durch --- */ /* Der Streifen ist ein heller Balken in einem grauen Verlauf, der ueber das Element wandert. Der Grauton ist derselbe wie beim UWU-Muster, damit die Hervorhebung zum Hintergrund passt. */ .glow-text, .glow-block, .button.glow { background-size: 200% 100%; background-repeat: no-repeat; background-position: 100% 0; animation: sweep 3.2s linear infinite; } /* Im Text darf der Kontrast kraeftig sein - der helle Balken soll auf weissem Papier als Aufleuchten lesbar sein, nicht nur als Farbverlauf. */ .glow-text, .glow-block { background-image: linear-gradient( 100deg, #C4C4C4 0%, #C4C4C4 30%, #FFFFFF 50%, #C4C4C4 70%, #C4C4C4 100% ); } /* Auf dem Button weicher, sonst sieht er nach "deaktiviert" aus. */ .button.glow { background-image: linear-gradient( 100deg, #E4E4E4 0%, #E4E4E4 30%, #FFFFFF 50%, #E4E4E4 70%, #E4E4E4 100% ); } @keyframes sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } } /* Inline im Fliesstext: eigener Chip, der auch ueber Zeilenumbrueche haelt. */ .glow-text { display: inline; padding: 1px 5px; color: #000; font-weight: 600; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* Im Codeblock ohne breite Polsterung, sonst verrutscht die Ausrichtung. */ pre .glow-text { padding: 0 2px; } /* Ganze Codebox, wenn dort nur eine URL steht. */ .glow-block { color: #000; } /* Buttons: der Streifen laeuft im Ruhezustand, beim Hover uebernimmt die Invertierung - sonst kaempfen zwei Effekte um dieselbe Flaeche. */ .button.glow:hover:not(:disabled), .button.glow:focus-visible { background-image: none; animation: none; background-color: #000; color: #FFFFFF; } /* Kopfbox: derselbe Streifen, nur langsamer und ueber die volle Breite. */ .panel-glow { text-align: center; position: relative; overflow: hidden; background-image: linear-gradient( 100deg, #FFFFFF 0%, #FFFFFF 40%, #EDEDED 50%, #FFFFFF 60%, #FFFFFF 100% ); background-size: 280% 100%; background-repeat: no-repeat; animation: sweep 5s linear infinite; } @media (prefers-reduced-motion: reduce) { .glow-text, .glow-block, .button.glow, .panel-glow { animation: none; background-image: none; } .glow-text, .glow-block { background-color: #C9C9C9; } } /* --- Sprechblase mit rundem Avatar --- */ .say { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; } .say-avatar { flex: 0 0 auto; display: block; width: 92px; height: 92px; border-radius: 50%; border: 2px solid #000; background: #FFFFFF; object-fit: cover; } /* Die Blase umschliesst ihren Text, statt die Zeile auszufuellen - sonst steht rechts in der Blase toter Platz. */ .say-bubble { position: relative; flex: 0 1 auto; min-width: 0; background: #FFFFFF; border: 2px solid #000; padding: 16px 18px; margin: 0; font-weight: 800; font-size: 19px; line-height: 1.3; } /* Zipfel aus zwei Dreiecken: das schwarze steht 3px weiter links als das weisse, dadurch bleibt der 2px-Rahmen auch an den Schraegen erhalten. Das weisse ragt bewusst in die Blase hinein und oeffnet dort den Rahmen. */ .say-bubble::before, .say-bubble::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); border: 12px solid transparent; border-left: 0; } .say-bubble::before { left: -14px; border-right-color: #000; } .say-bubble::after { left: -11px; border-right-color: #FFFFFF; } @media (max-width: 480px) { .say { gap: 10px; } .say-avatar { width: 68px; height: 68px; } .say-bubble { padding: 12px 14px; font-size: 17px; } .say-bubble::before, .say-bubble::after { border-width: 9px; border-left: 0; } .say-bubble::before { left: -11px; } .say-bubble::after { left: -8px; } } /* --- Links in den Prompt-Karten: Unterstrich waechst von links --- */ .prompt a { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; padding-bottom: 2px; /* Die ruhende Linie ist bewusst hell. Waere sie schwarz wie der wachsende Balken (currentColor), bliebe der Effekt unsichtbar. */ border-bottom: 1px solid #C4C4C4; transition: background-size 200ms ease-out; } .prompt a:hover, .prompt a:focus-visible { background-size: 100% 1px; } .prompt a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .prompt a { transition: none; } }