/* ========================================================================== Freifunk Dresden — Weboberflaeche der Router-Firmware Keine Web-Schriften, keine externen Dateien, kein Build-Schritt: Der Router kann nichts nachladen, und was hier steht, wird unveraendert ausgeliefert. Zwei Schalter am steuern die ganze Oberflaeche: data-rolle = gast | betreiber -- angemeldet oder nicht data-modus = standard | experte -- Anzeigetiefe Sie hat das alte ff.css abgeloest; jenes ist mit der letzten CGI-Seite entfallen. ========================================================================== */ /* ========================================================================== Freifunk Dresden — Entwurf Router-Oberfläche Keine Web-Schriften, keine externen Dateien: der Router kann nichts nachladen. ========================================================================== */ /* Das hidden-Attribut muss gewinnen. * * Der Browser setzt dafür nur [hidden]{display:none} in seinem eigenen * Stylesheet -- und JEDE Klassenregel mit display schlägt das, weil sie * spezifischer ist. Ohne diese Zeile bleibt ein .marker oder eine .meldung * sichtbar, obwohl das Skript sie ausgeblendet hat: Auf der Statusseite * standen "verbunden" und "kein Gateway" nebeneinander. * * Aufgefallen erst auf dem Gerät. In jsdom gibt es kein Layout -- die Tests * prüfen el.hidden, und das war die ganze Zeit richtig gesetzt. */ [hidden]{display:none!important} :root{ --gelb:#ffcb05; --tanne:#2f3d38; --tanne-hell:#4b5f56; --magenta:#dc0067; --magenta-dunkel:#b60055; --flaeche:#f4f4f1; --karte:#ffffff; --linie:#dcdcd6; --text:#23302c; --text-leise:#66716d; --ok:#2e7d4f; --warn:#b26b00; --gefahr:#c62828; --mono:ui-monospace,"DejaVu Sans Mono","Liberation Mono",Menlo,Consolas,monospace; --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --r:6px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--flaeche);color:var(--text); font:15px/1.55 var(--sans); } a{color:var(--magenta)} h1,h2,h3{margin:0;font-weight:700;line-height:1.25} h1{font-size:22px;letter-spacing:-.01em} h2{font-size:16px} h3{font-size:14px} code,.mono,.wert{font-family:var(--mono);font-variant-numeric:tabular-nums} /* --- Etikett: gesperrte Versalien, das Ordnungsmittel der ganzen Oberfläche --- */ .etikett{ font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--text-leise); } /* ==================== Kopfleiste ==================== */ .kopf{ position:sticky;top:0;z-index:40; background:var(--tanne);color:#fff; display:flex;align-items:center;gap:12px; padding:0 14px;height:52px; } .marke{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;white-space:nowrap} .marke-punkt{width:15px;height:15px;border-radius:50%;background:var(--gelb);flex:none} .marke small{font-weight:400;opacity:.72;font-size:12px} .kopf-schub{margin-left:auto} .menu-knopf{ display:none;background:transparent;border:1px solid rgba(255,255,255,.34); color:#fff;border-radius:var(--r);padding:7px 11px;font:inherit;font-size:13px;cursor:pointer; } /* Modusschalter */ .modus{display:flex;background:rgba(0,0,0,.26);border-radius:99px;padding:3px;gap:2px} .modus button{ border:0;background:transparent;color:rgba(255,255,255,.74); font:inherit;font-size:12.5px;font-weight:600;padding:5px 13px;border-radius:99px;cursor:pointer; } .modus button[aria-pressed=true]{background:var(--gelb);color:var(--tanne)} .modus button:focus-visible{outline:2px solid var(--gelb);outline-offset:2px} /* ==================== Gerüst ==================== */ .geruest{display:flex;align-items:flex-start;max-width:1400px;margin:0 auto} .nav{ flex:none;width:232px;padding:18px 0 40px; position:sticky;top:52px;max-height:calc(100vh - 52px);overflow-y:auto; } .nav-gruppe{margin:0 0 4px;padding-bottom:8px;border-bottom:1px solid var(--linie)} .nav-gruppe:last-child{border-bottom:0} /* Gruppenkopf als eigener Streifen: die Gliederung soll man sehen, bevor man liest. */ .nav-gruppe > .etikett{ display:block;padding:9px 18px 8px;margin-bottom:4px; background:#eeeeea;color:var(--tanne);border-bottom:1px solid var(--linie); } /* Der Gruppenkopf der Verwaltung ist ein Schalter: 33 Eintraege in sechs Gruppen sind zugeklappt schneller zu ueberblicken als offen. Er sieht aus wie das Etikett daneben -- nur der Pfeil verraet, dass er etwas tut. */ .nav-gruppe > button.etikett{ width:100%;font:inherit;font-weight:inherit;cursor:pointer;text-align:left; display:flex;align-items:center;justify-content:space-between;gap:8px; border:0;border-bottom:1px solid var(--linie); } .nav-gruppe > button.etikett:hover{background:#e6e6e1} .nav-gruppe > button.etikett:focus-visible{outline:2px solid var(--gelb);outline-offset:-2px} .nav-gruppe > button.etikett::after{ content:"";flex:none;width:7px;height:7px;margin-right:2px; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s; } .nav-gruppe > button.etikett[aria-expanded=false]::after{ transform:rotate(-45deg) translate(-1px,1px); } .nav a{ display:block;padding:7px 18px;color:var(--text);text-decoration:none; font-size:14px;border-left:3px solid transparent; } .nav a:hover{background:rgba(0,0,0,.045)} .nav a[aria-current=page]{ border-left-color:var(--gelb);background:var(--karte);font-weight:700; } .nav a .zahl{float:right;color:var(--text-leise);font-family:var(--mono);font-size:12px;font-weight:400} .inhalt{flex:1;min-width:0;padding:18px 18px 64px;max-width:980px} /* ==================== Seitenkopf ==================== */ .brotkrumen{font-size:12.5px;color:var(--text-leise);margin:0 0 6px} .seiten-kopf{margin:0 0 16px} .seiten-kopf p{margin:5px 0 0;color:var(--text-leise);font-size:14px;max-width:70ch} /* ==================== Typenschild ==================== */ .typenschild{ background:var(--karte);border:1px solid var(--linie);border-radius:var(--r); padding:14px 16px;margin-bottom:18px; display:flex;align-items:center;gap:16px;flex-wrap:wrap; } .ts-nummer{display:flex;align-items:center;gap:12px} .ts-punkt{ width:11px;height:11px;border-radius:50%;background:var(--ok);flex:none; box-shadow:0 0 0 4px rgba(46,125,79,.16); } .ts-punkt.aus{background:var(--gefahr);box-shadow:0 0 0 4px rgba(198,40,40,.16)} .ts-zahl{ font-family:var(--mono);font-size:30px;font-weight:700;line-height:1; letter-spacing:.02em;font-variant-numeric:tabular-nums; border-bottom:3px solid var(--gelb);padding-bottom:3px; } .ts-daten{font-size:13px;color:var(--text-leise);line-height:1.5} .ts-daten b{color:var(--text);font-weight:600} .ts-rechts{margin-left:auto;text-align:right;font-size:13px;color:var(--text-leise)} /* ==================== Karten ==================== */ .karte{ background:var(--karte);border:1px solid var(--linie);border-radius:var(--r); margin:0 0 16px;overflow:hidden; } .karte-kopf{ padding:11px 16px;border-bottom:1px solid var(--linie); display:flex;align-items:center;gap:10px;flex-wrap:wrap; } .karte-kopf h2{flex:1;min-width:0} .karte-leib{padding:14px 16px} .karte-fuss{padding:12px 16px;border-top:1px solid var(--linie);background:#fafaf8; display:flex;gap:10px;align-items:center;flex-wrap:wrap} .hinweis{font-size:13px;color:var(--text-leise);margin:4px 0 0} /* Die Aktionsleiste eines Formulars, das MEHRERE Karten umspannt. * * Als Fuss der letzten Karte sah "Uebernehmen" aus, als gaelte es nur fuer * diese eine -- auf der Automatik-Seite etwa fuer den naechtlichen * Neustart, nicht auch fuer Wartungszeit und Update. Freistehend unter den * Karten ist der Bezug richtig: alles darueber. */ .formular-fuss{ display:flex;gap:10px;align-items:center;flex-wrap:wrap; margin:0 0 18px;padding:0 2px; } /* ==================== Verbindungskette (Signatur der Übersicht) ============ */ .kette{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;padding:4px 0} .kette-glied{ flex:1 1 130px;min-width:120px;text-align:center;padding:12px 8px;position:relative; } .kette-glied .etikett{display:block;margin-bottom:6px} .kette-glied .kg-wert{font-family:var(--mono);font-size:15px;font-weight:700;word-break:break-all} .kette-glied .kg-sub{font-size:12px;color:var(--text-leise);margin-top:3px} .kette-glied::after{ content:"";position:absolute;right:-9px;top:50%;width:18px;height:3px;border-radius:2px; background:var(--ok);z-index:1; } .kette-glied:last-child::after{display:none} .kette-glied.gebrochen::after{background:var(--gefahr)} .kg-punkt{ width:34px;height:34px;border-radius:50%;margin:0 auto 8px; border:3px solid var(--ok);display:flex;align-items:center;justify-content:center; font-size:15px;color:var(--ok);background:var(--karte);position:relative;z-index:2; } .kg-punkt.warn{border-color:var(--warn);color:var(--warn)} .kg-punkt.aus{border-color:var(--gefahr);color:var(--gefahr)} /* ==================== Aufgabenliste ==================== */ .aufgaben{list-style:none;margin:0;padding:0} .aufgaben li{ display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--linie); } .aufgaben li:first-child{border-top:0} .hak{ flex:none;width:19px;height:19px;border-radius:50%;font-size:11px;font-weight:700; display:flex;align-items:center;justify-content:center;color:#fff;margin-top:2px; } .hak.ok{background:var(--ok)} .hak.offen{background:var(--warn)} .aufgaben .a-text{flex:1;min-width:0;font-size:14px} .aufgaben .a-text small{display:block;color:var(--text-leise);font-size:12.5px} /* ==================== Wertetabelle ==================== */ .werte{width:100%;border-collapse:collapse;font-size:14px} .werte th{ text-align:left;font-weight:600;color:var(--text-leise);padding:6px 12px 6px 0; white-space:nowrap;vertical-align:top;width:1%; } .werte td{padding:6px 0;font-family:var(--mono);font-size:13.5px;word-break:break-word} .werte tr + tr th,.werte tr + tr td{border-top:1px solid var(--linie)} /* ==================== Formular ==================== */ .feld{margin:0 0 16px;max-width:520px} .feld > label{display:block;font-size:13.5px;font-weight:600;margin-bottom:4px} .feld .erklaerung{font-size:12.5px;color:var(--text-leise);margin:0 0 6px} input[type=text],input[type=password],input[type=number],select,textarea{ width:100%;font:inherit;font-size:16px;padding:9px 11px; border:1px solid #bfc4c1;border-radius:var(--r);background:#fff;color:var(--text); } input.wert,select.wert,textarea.wert{font-family:var(--mono);font-size:15px} input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{ outline:3px solid var(--gelb);outline-offset:1px;border-color:var(--tanne); } input[disabled],select[disabled]{background:#ececeb;color:var(--text-leise)} .feld-reihe{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch} .feld-reihe .feld{ flex:1 1 150px;margin-bottom:0; /* Spalte, damit die Eingabe unten buendig sitzt: Die Erklaerungen ueber den Feldern sind unterschiedlich lang, und ohne das stuenden die Eingabefelder einer Reihe auf verschiedenen Hoehen -- sichtbar bei Netzwerk-ID und Router-Gruppe. */ display:flex;flex-direction:column; } .feld-reihe .feld > :last-child{margin-top:auto} .schalter{display:flex;gap:10px;align-items:flex-start;padding:9px 0;max-width:620px} .schalter input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--magenta)} .schalter .s-text{font-size:14px} .schalter .s-text small{display:block;color:var(--text-leise);font-size:12.5px;margin-top:1px} fieldset{border:0;margin:0;padding:0} legend{padding:0} /* Knöpfe */ .knopf{ font:inherit;font-size:14px;font-weight:600;padding:9px 17px;border-radius:var(--r); border:1px solid var(--linie);background:#fff;color:var(--text);cursor:pointer; /* inline-flex, damit ein genauso hoch wird wie ein