/* Barvy: cerna = Black seda = Gray Bila = White */ /* ===================================================================== POZOR - nazev tohoto souboru nese verzi: layout-RRRRMMDDX.css (RRRR = rok, MM = mesic, DD = den, X = poradi revize v ramci dne). Je to obrana proti cachovani v prohlizeci: bez zmeny nazvu drzi prohlizec stary stylopis a uzivatel musi delat Ctrl+F5. Pri KAZDE zmene obsahu se tedy soubor prejmenuje na aktualni datum a upravi se jediny odkaz na nej - configs/config.defaults.php, klic $_CONF['style_default_name']. Nikde jinde se nazev nevyskytuje. ===================================================================== */ * { padding: 0px; margin: 0px;} body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; background: Black; } /* body.mceContentBody { background: gray; color: #191c1f; } */ /* Obecne styly atp */ img {border: 0;} iframe { width: 600px; height: 494px; } a { color: White; text-decoration: none; } a:hover { text-decoration: underline; } .on { text-decoration: underline; } input, textarea, select { background-color: #272727; border: solid 1px White; color: Silver; } hr { height: 1px;} h1 { text-align: right; font-weight: normal; font-size: 14px; padding: 3px 10px 0px 0px; } h3, h4, h5, h6 { margin-top: 7px; margin-bottom: 7px; } h2 { margin-right: 20px; text-align: left; font-size: 20px; } h3 { font-size: 19px; text-align: center; } h4 { font-size: 17px; text-align: center; } h5 { font-size: 15px; text-align: center; } h6 { font-size: 14px; text-align: left; text-decoration: underline; } #wrapper { margin: 0 auto; width: 667px; background-color: Black; color: Silver; } #part_0 { height: 77px; width: 667px; background-color: Black; background-image: url(../images/zus_02.gif); text-align: center; } #part_1 { width: 667px; height: 24px; background-image: url('../images/zus_04.gif'); background-color: #474747; color: White; } #part_2 { width: 657px; height: 28px; background-image: url(../images/zus_05.gif); background-color: #272727; text-align: right; padding-top: 12px; padding-right: 10px; } #part_3 { width: 647px; background-color: Black; _height: 500px; min-height: 500px; padding: 10px; } #part_3 p { padding: 3px; } #part_4 { width: 667px; height: 29px; background-color: #474747; text-align: center; color: Silver; font-size: 10px; vertical-align: middle; background-image: url('../images/zus_07.gif'); } #part_4 p { text-align: center; padding: 8px; } #part_4 a { color: White; } #part_5 { width: 667px; height: 15px; text-align: center; font-size: 10px; } /* ===================================================================== Siroky layout pro seznamy v administraci --------------------------------------------------------------------- Trida 'admin-siroky' se dava na jen tam, kde je .admin_table - tedy seznam textu, souboru a jazyku (webadmin.php). Verejny web ani editacni obrazovky se nemeni a zustavaji na puvodnich 667 px. Duvod: po zvetseni pisma .admin_table z 10 na 12 px se dlouhe nadpisy a adresy v seznamu zalamovaly na dva radky a seznam byl neprehledny. Pasove obrazky layoutu jsou 667 px siroke, takze se pri rozsireni musi dokreslit: - #part_0 (fotobanner) se NEROZTAHUJE - zustane v puvodni velikosti a vystredi se na cerne. Obrazek ma po obou stranach cerny ramecek, takze prechod do pozadi neni videt a fotky se nedeformuji. - #part_1, #part_2 a #part_4 maji obrazek vlevo (jsou v nem logo a panacci) a zbytek radku dokresli plna barva. Prava cast vsech tri obrazku je jednolita - zmereno pres GD sloupec po sloupci: zus_04 #34/#3C dither, prumer #363636 zus_05 radek 0 je svetla linka #363636, dal #1C/#24, prumer #1E1E1E zus_07 presne #363636 po cele vysce, bez ditheru POZOR pri overovani: vsechny tri obrazky maji na pravem kraji 1px tmavy ramecek. Prumer z poslednich sloupcu proto vyjde falesne tmavy a svar je pak videt - merit se musi sloupec uvnitr (napr. w-10). ===================================================================== */ body.admin-siroky #wrapper { /* Dolni hranice je puvodnich 667 px - uzsi by se pasy nevesly. Prostredni clen je 100 % dostupne sirky (bez svisleho posuvniku, proto '100%' a ne '100vw') minus male okraje. */ width: clamp(667px, calc(100% - 24px), 1280px); } body.admin-siroky #part_0, body.admin-siroky #part_1, body.admin-siroky #part_2, body.admin-siroky #part_3, body.admin-siroky #part_4, body.admin-siroky #part_5 { /* Puvodni pevne sirky (667 / 657 / 647 px) se odvodi od #wrapper */ width: auto; } body.admin-siroky #part_0 { background-repeat: no-repeat; background-position: center top; } body.admin-siroky #part_1 { background-repeat: no-repeat; background-position: left top; background-color: #363636; } body.admin-siroky #part_2 { /* Prvni radek obrazku je svetla linka, ktera navazuje na #part_1 nad nim. Bez ni by mel pas za obrazkem tupou hranu. */ background-image: url('../images/zus_05.gif'), linear-gradient(to bottom, #363636 0px, #363636 1px, #1E1E1E 1px, #1E1E1E 100%); background-repeat: no-repeat, no-repeat; background-position: left top, left top; } body.admin-siroky #part_4 { background-repeat: no-repeat; background-position: left top; background-color: #363636; } .textarea_html { height: 500px; width: 640px; font-size: 11px; } .naStred { text-align: center; } .chyba { color: Red; font-weight: bold; } .uspech { color: #00cc00; font-weight: bold; } .table_tr1 { background-color: #272727; } .table_tr0 { background-color: #474747; } .admin_table { width: 100%; font-size: 12px; background-color: #474747; } .admin_table a { color: Silver; } .admin_table tr, td { border-bottom: dotted 1px black; vertical-align: top; } /* Nahledy obrazku v seznamu souboru. Vybirame je podle zdroje, aby pravidlo nechytlo i ikonky akci - ty jsou obycejne gify ze slozky images/. */ .admin_table img[src^="picture.php"] { display: block; margin: 2px auto; } /* Sloupec s ikonami akci (tuzka a kos). Mezi obema odkazy je mezera, na ktere se obsah bunky smi zalomit. Chrome podle toho spocita nejmensi mozny obsah na sirku jedne ikony, sloupec zuzi a ikony skonci pod sebou; Firefox je necha vedle sebe. Zakazem zalomeni se obe chovaji stejne, width drzi sloupec uzky. */ .admin_table td.akce { white-space: nowrap; width: 1px; text-align: center; } /* Zaznam, ze ktereho se uzivatel vratil do seznamu (?last= v adrese). Pozadi se dava na bunky, protoze radek uz barvu ma z table_tr0/table_tr1. Zluta je stejna jako u .button:hover, at web nema dalsi barvu navic. */ .admin_table tr.lastSelectedRow > td { background-color: #5a5a52; border-top: solid 1px #FFFB35; border-bottom: solid 1px #FFFB35; } a.lastSelected, .admin_table a.lastSelected { color: #FFFB35; font-weight: bold; text-decoration: underline; } /* Odkaz dostane focus ze skriptu, takze musi byt na cerne videt */ .admin_table a:focus { outline: solid 2px #FFFB35; outline-offset: 1px; } .button { width: 60px; } .button:hover { border: 1px solid #FFFB35; color: #FFFB35; } .obteceni { float: left; } /*Formatovani formularu*/ #forms { margin: 5px; text-align: left; padding: 8px; } #forms label { width: 100px; float: left; margin: 0; padding: 0.2em; text-align: right; font-weight: bold; } #forms input, textarea { margin: 3px; width: 320px; } #forms textarea { height: 140px; } /* Nadpis clanku v rozsirenem editacnim modu (edittranslate2.php). Puvodne bez sirky, takze prohlizec dal inputu vychozich ~20 znaku a delsi nadpis nebyl videt cely. Sirka je odvozena od #part_3 (647px obsahu): zbytek radku zabira vlajecka jazyka a padding odstavce. */ .txt_nadpis { width: 550px; } /* Odkaz do sekce Soubory u editovaneho clanku */ .odkazSoubory { font-size: 12px; } /* Panel s nahledovym obrazkem clanku do mrizky (edittranslate2.php) */ .nahledGrid { width: 620px; margin: 8px 0; padding: 8px; border: solid 1px #474747; font-size: 12px; text-align: center; } .nahledGrid legend { padding: 0 4px; font-weight: bold; } .nahledGrid p { padding: 3px; } /* Mrizka zobrazuje obrazek na 200px, panel ho ukazuje ve stejne velikosti */ .nahledGrid img { max-width: 200px; max-height: 200px; } .nahledGrid input[type="file"] { width: auto; font-size: 11px; } .nahledGridNapoveda { font-size: 11px; text-align: left; color: #999999; } /* Automaticke seznamy predstaveni, kroniky a videi (functions/zus.php) Puvodne o tri sloupcich pouzita cistne na rozvrzeni. Rozmery odpovidaji puvodnimu stavu: tri stejne siroke sloupce, mezera 2px jako vychozi border-spacing tabulky, obsah na stred a zarovnany dolu. */ .tableSeznam { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; width: 100%; } .tableSeznam .polozkaSeznamu { /* Polozka se roztahne na celou vysku radku (aby pozadi vyplnilo radek stejne jako drive pozadi ) a obsah se posadi dolu - to je nahrada za puvodni vertical-align: bottom u

. */ display: flex; flex-direction: column; justify-content: flex-end; text-align: center; background-color: #272727; /* puvodni trida table_tr1 */ transition: background-color 0.15s ease-in-out; } /* Puvodni tabulka stridala barvu radku pres tridy table_tr1 a table_tr0, ktere prirazovala CTableExCSS::SetRow(). V mrizce nejsou radky elementy, takze se stejna zebra dela po trojicich polozek. */ .tableSeznam .polozkaSeznamu:nth-child(6n+4), .tableSeznam .polozkaSeznamu:nth-child(6n+5), .tableSeznam .polozkaSeznamu:nth-child(6n+6) { background-color: #474747; /* puvodni trida table_tr0 */ } /* Zvyrazneni polozky pod mysi - jen mirne projasneni, at to nerusi */ .tableSeznam .polozkaSeznamu:hover { background-color: #5a5a5a; } .tableSeznam .nazevPolozky { text-align: center; } /* Barvicky */ .bila { color: #FFFFFF; } .cervena { color: #FF0000; } .fialova { color: #9900CC; } .modra { color: #0000FF; } .oranzova { color: #FF9900; } .ruzova { color: #FFCCFF; } .zelena { color: #009900; } .zluta { color: #FFFF00; }