From 788e8d22a29f89127e6ea0c34e3fb9489001f993 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jon=C3=A1=C5=A1=20Havelka?= Date: Fri, 25 Oct 2024 12:57:07 +0200 Subject: [PATCH] =?UTF-8?q?Pokus=20o=20opravu=20styl=C5=AF=20na=20star?= =?UTF-8?q?=C3=BDch=20iOSech?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mamweb/static/css/base.css | 2 + mamweb/static/css/mamweb_legacy.css | 728 ++++++++++++++++++++++++++++ mamweb/templates/base.html | 2 +- 3 files changed, 731 insertions(+), 1 deletion(-) create mode 100644 mamweb/static/css/mamweb_legacy.css diff --git a/mamweb/static/css/base.css b/mamweb/static/css/base.css index a4433d55..c562cb5b 100644 --- a/mamweb/static/css/base.css +++ b/mamweb/static/css/base.css @@ -1,5 +1,7 @@ @charset "utf-8"; /* vynuť utf-8 */ +@import "mamweb_legacy.css" supports((-webkit-touch-callout: none) and (not (offset-position: normal))); + /* Obecné styly pro html tagy */ @font-face { diff --git a/mamweb/static/css/mamweb_legacy.css b/mamweb/static/css/mamweb_legacy.css new file mode 100644 index 00000000..4da02fba --- /dev/null +++ b/mamweb/static/css/mamweb_legacy.css @@ -0,0 +1,728 @@ +@charset "utf-8"; /* vynuť utf-8 */ + +.button { + margin: 10px 0 10px 0; + padding: 4px 0; /*vertikální centování textu*/ + text-align: center; + background-color: var(--hlavni-oranzova); + color: var(--barva-pozadi); + font-size: 150%; + font-weight: bold; + font-variant: small-caps; + filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4)); +} +.button:hover { + position: relative; + top: 2px; + left: 2px; + background-color: #df490e; +} +/******************/ + + + + + +/* Rozložení webu a jeho prvky (hlavička, menu, footer) */ + +/**** KONTEJNER ****/ +div.kontejner { /* Ne container, aby se to netlouklo s bootstrapem. */ + width: 970px; + margin: auto; + min-height: 100vh; + position: relative; + padding: 0; +} + +.org-logged-in div.kontejner { + margin-top: var(--login-bar-height); +} + +div.kontejner div.kontent-wrapper { + padding-bottom: var(--footer-height); +} + +div.kontejner div.kontent-wrapper div.kontent { + padding: 15px 30px; +} + +/* Roztáhne obsah z containeru na celou šířku obrazovky: */ +.full_width { + width: 100vw; + margin-left: calc(-50vw + 485px); +} + +/* Na úzkém displeji nechceme nic dělat. */ +@media(max-width: 860px) { + .full_width { + margin-left: 0; + width: unset; + } +} +/*******************/ + + +/**** HLAVIČKA ****/ +#header { + position: relative; + background: url("../images/header/vikendovka.jpg") no-repeat center top; /* poměr 350:970, TODO: aby to nemuselo být přesně na pixely */ + background-size: 100%; + top: 58px; +} + +#header img.logo { + width: 100%; + filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4)); +} + +#header img.logo-mobile { + display: none; +} + +#header .no-mobile { + background-size: contain; +} +/******************/ + + +/**** Footer ****/ +#footer { + position: absolute; + bottom: 0; + width: 100%; + background: url("../images/mozaika-footer.svg") no-repeat top center; + height: var(--footer-height); + background-size: 100%; + filter: drop-shadow(5px 0px 5px rgba(0, 0, 0, 0.4)); + padding-top: 3.5%; +} + +#footer p.license { + text-align: center; + font-weight: 400; + bottom: 0; +} + +#footer p.license a { + color: #333; +} + +@media (max-width: 650px) { + #footer { + display: none; + } +} + +p.license-mobile { + display: none; + margin-bottom: 0; +} + +@media (max-width: 650px) { + p.license-mobile { + position: relative; + display: block; + font-size: 90%; + background-color: var(--hlavni-oranzova); + padding: 5%; + text-align: justify; + } +} +/****************/ + + +/**** LOGIN BAR ****/ +div.login-bar { + background: var(--orgovska-fialova); + color: var(--svetla-oranzova); + width: 100%; + + position: fixed; + margin-top: calc(-1 * var(--login-bar-height)); + min-height: var(--login-bar-height); + z-index: 4086; + + padding-left: 5px; + padding-right: 5px; +} + +div.login-bar div { + display: inline; +} + +div.login-bar a.LOGIN-ref-admin { + display: inline; + color: var(--barva-pozadi); +} + +div.login-bar .LOGIN_napis-webarum { + display: inline; + color: var(--barva-pozadi); + float: right; +} + +div.login-bar .LOGIN_napis-webarum a { + color: var(--svetla-oranzova); + text-decoration: underline; +} +/*******************/ + + +/* stránka přes celý displej */ +@media (max-width: 970px) { + #header { + background-size: 100%; + } + + #header img.logo { + width: 100%; + } +} + +/* malý tablet, mobil */ +@media (max-width: 650px) { + #header { + width: 100%; + top: 0; + background-image: none; + } + + #header img.logo { + display: none; + } + + #header img.logo-mobile { + display: block; + top: 0; + left: 0; + width: 100%; + filter: drop-shadow(0px 0 5px rgba(0, 0, 0, 0.4)); + margin-bottom: 3px; + } + + #header .no-mobile{ + display: none; + } +} + + + + + +/**** MENU ****/ + +ul.menu { + width: 100%; + padding: 0; + margin-top: -5px; /* posune celé menu nahoru (pak potřeba zvětšit mezeru mezi menu a submenu) */ + + font-variant: small-caps; +} + +ul.menu a { + text-decoration: none; + font-weight: bold; + font-size: 105%; +} + +ul.menu li { + margin: 0; + display: inline-block; + width: 16.666667%; + text-align: center; + + font-size: 140%; + font-weight: 400; +} + +ul.menu li >a:hover, >a:active { + color: black; +} + +ul.menu li.active>a { + color: var(--svetla-oranzova); +} + +ul.menu ul.submenu { + background-color: var(--hlavni-oranzova); + margin-top: 10px; /* mezera mezi hlavním menu a submenu */ + margin-bottom: 10px; + padding-top: 10px; + padding-bottom: 5px; + filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4)); + + z-index: 50; + font-weight: 400; +} + +ul.menu ul.submenu li { + width: auto; + padding: 0 20px 0 20px; + display: inline-block; +} + +ul.menu ul.submenu li >a { + color: var(--svetla-oranzova); + text-decoration: none; + text-shadow: none; +} + +ul.menu ul.submenu li >a :hover { + color: black; +} + +ul.menu ul.submenu li.active>a, .parentactive ul li:first-child>a { + color: black; +} + +@media (max-width: 970px) { + ul.menu { + font-size: 90%; + margin-top: -7px; + } + + ul.menu li { + margin-top: 10px; /* posunutí textu hlavního menu níže */ + } + + ul.submenu { + margin-top: 8px; /* mezera mezi hlavním menu a submenu */ + } + + ul.submenu li { + margin-top: 0; /* aby se spolu s textem hlavního menu neposunoval níže i text submenu */ + } +} + +@media(max-width: 800px) { + ul.menu { + font-size: 80%; + margin-top: -2px; + } + + ul.menu li { + margin-top: 10px; /* posunutí textu hlavního menu níže */ + } + + ul.submenu { + margin-top: 8px; /* mezera mezi hlavním menu a submenu */ + } + ul.submenu li { + margin-top: 0; /* aby se spolu s textem hlavního menu neposunoval níže i text submenu */ + } +} + +@media (max-width: 650px) { + ul.menu { + display: none; + } + + ul.menu_mobile { + display: block; + z-index: 10; + position: sticky; + font-variant: small-caps; + font-size: 150%; + font-weight: bold; + list-style-type: none; + padding-top: 3px; + padding-bottom: 3px; + padding-left: 12px; + } + + ul.menu_mobile a:active, ul.menu_mobile a:hover, ul.menu_mobile a:focus { + text-decoration: none; + color: black; + } + + ul.menu_mobile ul { + list-style-type: none; + font-size: 90%; + color: black; /*černé šipky submenu*/ + } + + ul.menu_mobile ul li > a { + color: black; + } + + ul.menu_mobile ul li::before { + content: ' \276D '; /*https://www.w3schools.com/cssref/css_entities.asp*/ + } + + ul.menu_mobile br { + display: none; + } +} /* konec @media */ +/**************/ + +/**** ZBYTEK ****/ +/* (konkrétní stránky) */ + +/* Titulní stránka */ +.titulnistrana { + display: flex; + text-align: justify; + +@media(max-width: 800px){ + .titulnistrana { + display: block; + } +} + +.titulnistrana h1 { text-align: center; } + +.titulnistrana .TITULNI_STRANA_zjistit_vic { + text-align: center; + margin-bottom: 30px; +} + +.titulnistrana .TITULNI_STRANA_zjistit_vic hr { + display: none; +} + +@media(max-width: 800px){ + .titulnistrana .TITULNI_STRANA_zjistit_vic hr { + display: flex; + } +} + +@media(max-width: 800px) { + .titulnistrana .TITULNI_STRANA_graf { + padding-top: 40px; + } +} + +.titulnistrana .TITULNI_STRANA_graf .TITULNI_STRANA_graf-svg { + display: flex; +} + +.titulnistrana .TITULNI_STRANA_graf .TITULNI_STRANA_graf-svg #svg-graf { + width: 100%; + height: auto; + margin: 30px; +} + +@media(max-width: 800px){ + .titulnistrana .TITULNI_STRANA_graf .TITULNI_STRANA_graf-svg #svg-graf { + max-width: 500px; + padding: 10px; + margin: auto; + } +} + +.titulnistrana .TITULNI_STRANA_obsah { + width: 66%; +} + +@media(max-width: 800px){ + .titulnistrana .TITULNI_STRANA_obsah { + width: 100%; + } +} + +.titulnistrana .TITULNI_STRANA_vitej_titulka, .TITULNI_STRANA_temata_titulka { + width: 49%; + padding: 10px; + display: table-cell; +} + +@media (max-width: 650px) { + .titulnistrana .TITULNI_STRANA_vitej_titulka, .TITULNI_STRANA_temata_titulka { + width: 100%; + display: block; + } +} + +.titulnistrana .TITULNI_STRANA_novinky { + width: 33%; + padding: 10px; +} + +@media(max-width: 800px){ + .titulnistrana .TITULNI_STRANA_novinky { + width: 100%; + max-width: 500px; + margin: auto; + } +} + + +/* Stránky Aktuální ročník */ +.stranka_aktualni_zadani { + text-align: center; +} + +.stranka_aktualni_zadani #AKTUALNI_ZADADNI_obrazek { + margin-top: 15px; +} + +.stranka_aktualni_zadani div.AKTUALNI_ZADANI_termin { + text-align: center; + font-size: large; + font-weight: bold; +} + +@media (max-width: 420px) { + .stranka_aktualni_zadani div.AKTUALNI_ZADANI_termin { + font-size: small; + } +} + +.stranka_aktualni_zadani .AKTUALNI_ZADANI_datum { + color: var(--hlavni-oranzova); + margin: 0; + } +} + +/* Stránka Jak řešit */ +.jakresit svg { + width: 33%; + padding: 10px; + filter: none; +} + +@media(max-width: 860px) { + .jakresit svg { + margin: auto; + display: grid; + width: 100%; + max-width: 360px; + } +} + + + + + + + + + +/**** OZNAČENÍ NE-PUBLIC ČÁSTÍ ****/ +.mam-org-only { + background: var(--orgovska-svetla-fialova); + padding: 10px; + margin: 10px -10px; + border: var(--orgovska-fialova) 2px dashed; +} + +.mam-org-only .mam-org-only { + border: 0; +} + +.mam-org-only li { + padding: 3px 0; + margin: -2px 0; +} +/**********************************/ + + + +/**** OTÁČECÍ KARTY ****/ +/* (orgové, archiv) */ +.flip-card { + perspective: 1000px; /* Remove this if you don't want the 3D effect */ + margin-left: auto; + margin-right: auto; +} + + /* This container is needed to position the front and back side */ +.flip-card .flip-card-inner { + position: relative; + width: 100%; + height: 100%; + transition: transform 0.8s; + transform-style: preserve-3d; +} + + /* Do an horizontal flip when you move the mouse over the flip box container */ +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); +} + + /* Position the front and back side */ +.flip-card .flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + -webkit-backface-visibility: hidden; /* Safari */ + backface-visibility: hidden; +} + +.flip-card div.flip-card-foto, div.flip-card-foto img { + width: 100%; + height: 100%; + + /* Pokud je na přední straně něco proklikávacího (třeba celá fotka), tak na dotykových zařízeních nemůže proklikávat, aby se dalo otáčet */ +@media(hover: none) { + .flip-card div.flip-card-foto, div.flip-card-foto img a { pointer-events: none; } +} + + /* Style the back side */ + .flip-card-back { + transform: rotateY(180deg); + padding: 10px; + padding-top: 20px; + } +} +/***********************/ + + +/**** TABULKY ****/ + +/** Tabulka s čárami mezi sloupci **/ +/* Např. výsledkovky */ + +.tabulka_oramovane_sloupce { + border: solid 2px; +} + +.tabulka_oramovane_sloupce td:first-child, .tabulka_oramovane_sloupce th:first-child { + border-left: none; + border-right: solid 1px; +} + +.tabulka_oramovane_sloupce td:nth-child(2), .tabulka_oramovane_sloupce th:nth-child(2) { + border-left: none; +} + +.tabulka_oramovane_sloupce td, .tabulka_oramovane_sloupce th { + padding: 0.1em 0.3em; + border-left: solid 1px; +} + +.tabulka_oramovane_sloupce thead th, .tabulka_oramovane_sloupce thead td { + border-bottom: solid 1px; +} +/***********************************/ + + +/** Tabulka se střídajícími se barvami řádků **/ +/* Skoro jakákoliv tabulka kromě výsledkovek */ + +.barevna_tabulka td th { + padding: 1px 10px 1px 10px; +} + +.barevna_tabulka tbody tr:nth-child(even), thead tr { + background: var(--svetlounka-oranzova); +} + +.barevna_tabulka tbody tr:nth-child(odd) { + background: var(--barva-pozadi); +} +/**********************************************/ + + +/** Tabulka, kde první řádek a sloupec je pořád vidět **/ +/* Např. tabulka odevzdaných řešení, nebo výsledkovky */ +.tabulka_s_uchycenym_radkem_a_sloupcem { + /* Omezí výšku a šířku, aby bylo příjemné na scrollování a zapne scrollování */ + display: block; + width: fit-content; /* display: block; roztahuje na celou šířku */ + max-height: 80vh; + overflow: auto; + max-width: 90%; /* (FIXME asi není potřeba u tabulek, co nejsou na celou obrazovku) */ + margin-left: 5%; /* Vystředování (FIXME není potřeba u tabulek, co nejsou na celou obrazovku) */ + + border-collapse: separate; /* Pokud má tabulka orámování, je potřeba ho separovat, aby dodrželo position: sticky; */ + border-spacing: 0; +} + + /* Uchytí první řádek */ +.tabulka_s_uchycenym_radkem_a_sloupcem thead tr { + position: sticky; + top: 0; + z-index: 2; +} + + /* Uchytí první sloupec */ +.tabulka_s_uchycenym_radkem_a_sloupcem td:first-child, .tabulka_s_uchycenym_radkem_a_sloupcem th:first-child { + position: sticky; + left: 0; + background: inherit; /* (Snad) zneprůhlední první sloupec */ + z-index: 1; +} +/*******************************************************/ + +/** Tabulka mající všechna ohraničení **/ +.plne_ohranicena_tabulka { + border-collapse: collapse; +} + +.plne_ohranicena_tabulka tr th, .plne_ohranicena_tabulka tr td { + border: 1px solid black; + padding: 1px 10px 1px 10px; +} +/***************************************/ + +/** Výsledkovky **/ +.vysledkovka, .tabulka_oramovane_sloupce td:first-child, .vysledkovka, .tabulka_oramovane_sloupce th:first-child { position: unset; } +.vysledkovka, .tabulka_oramovane_sloupce td:nth-child(2), .vysledkovka, .tabulka_oramovane_sloupce th:nth-child(2) { + border-right: solid 1px; + + position: sticky; + left: 0; + background: inherit; /* (Snad) zneprůhlední druhý sloupec */ + z-index: 1; +} +.vysledkovka, .tabulka_oramovane_sloupce td:nth-child(3), .vysledkovka, .tabulka_oramovane_sloupce th:nth-child(3) { + border-left: none; +} +/*****************/ + + +/** Tabulka mých (řešitelových) řešení **/ +.moje_reseni tr th, .moje_reseni tr td { + text-align: center; +} + +.moje_reseni tr td.problem { text-align: left; } +/****************************************/ + + +/** Detail řešení **/ +.bodovani>input { + width: 4em; +} + +.bodovani>input::placeholder { + color: lightgray; + opacity: 1; +} + +.bodovani>input::-webkit-input-placeholder { /* Edge */ + color: lightgray; +} + +/*******************/ +/*****************/ + + +.novinka .novinka_obrazek { + margin: 10px 0 10px 0; + width: 100%; +} + +.novinka .novinka_datum { + font-weight: bold; +} + +.novinka .novinka_autor { + text-align: right; + font-style: italic; +} + +/**** FORMULÁŘE ****/ +div.gdpr { + font-size: 6pt; +} + +div.gdpr p { + font-size: 6pt; + margin-bottom: .66em; +} + +/*******************/ + + diff --git a/mamweb/templates/base.html b/mamweb/templates/base.html index 1a4c22ab..60447467 100644 --- a/mamweb/templates/base.html +++ b/mamweb/templates/base.html @@ -10,7 +10,7 @@ {% block custom_css %}{% endblock %} - +