Jak vtisknout Brejku vlastní styl

Od poslední větší změny vzhledu Brejku uběhlo zhruba 12 let. Při psaní minisérie Kvarteto (kvůli nedostatku času prozatím odložené stranou, chystám se ale pokračovat) jsem narazil například na nerealizovaný červený motiv. S grafikou to neumím a nedá se říci, že bych měl nějaký vytříbený smysl pro vizuální řešení. Na druhou stranu se slušně orientuji v HTML a CSS kódování, takže mě napadlo, že by byla zábava zkusit si vlastní motiv vytvořit sám. V dnešním článku Vám chci v kostce ukázat, jak na to.

Jak na to

Za vizuální podobu webu je odpovědný jazyk CSS. Kdo se někdy vrtal v editoru na Brejku, pravděpodobně s ním dříve či později přišel do styku.

Abychom si mohli vzhled Brejku přizpůsobit, potřebujeme se vloupat do stránky a vložit tam naše CSS styly. Naštěstí existuje rozšíření prohlížeče, které přesně to umožňuje. Jmenuje se Stylus a dělá jedinou věc - vezme Vámi vytvořené CSS styly a přidá je na konec zdrojového kódu stránky. Tím v podstatě zajistí, že Vaše styly budou mít přednost před původními.

Práce na vlastním CSS spočívá v nalezení původního pravidla a jeho přepsání. Použijeme zjednodušený příklad, kdy změníme barvu pozadí oznámení na červenou. Oznámení má v CSS třídu .alert_oznameni, Brejk má nastaveno:

.alert_oznameni {background-color: #fff723;}

My ale zapíšeme vlastní barvu a vložíme do Stylusu:

.alert_oznameni {background-color: red;}

Hotovo. S ostatními styly postupujete obdobně, dokud nejste s výsledkem úplně spokojeni (což, pokud bych měl soudit dle vlastní zkušenosti, nebudete nikdy).

CSS představuje mocný nástroj, ne však všemocný. Přebarvit písmo? Posunout tlačítko? Žádný problém. Vložit nový nadpis? Přidat sloupec do tabulky? Bohužel nelze. Zkuste si Brejk představit jako dům. Pomocí CSS uděláte novou fasádu, vymalujete, přestěhujete menší kusy nábytku. Určitě ale nepřistavíte patro.

To nás přivádí k otázce, co vlastně můžeme na Brejku díky vlastnímu CSS změnit:

Mantinely jsou tedy stanovené, prostor pro kreativitu je přesto velký.

Instalace rozšíření

Rozšíření Stylus by mělo být k dispozici na všechny velké prohlížeče, já jsem testoval tři:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge (Google Chrome a Microsoft Edge jsou postavené na stejném základu, v Edge by tak mělo fungovat Chrome rozšíření)

Nemusím asi dodávat, že je vhodné mít prohlížeč aktualizovaný na poslední vydanou verzi. Nemám po ruce žádné zařízení od Apple, takže fungování v Safari nemohu ani potvrdit, ani vyvrátit.

Jak jsem již avizoval v předchozí části, pokud je mi známo, na mobilní prohlížeče Stylus nedostanete. Vše se tedy týká pouze desktopu.

Příklad

Kam jsem se s vlastními úpravami dostal já? Stále zkouším různé varianty, současný stav odpovídá níže umístěným obrázkům.

Předělal jsem řadu drobností a zároveň se snažil nic nerozbít. Jak si jistě všimnete, velkých změn doznala hlavička webu. Zbytečně velké logo Brejku (Po přihlášení vím, že jsem na Brejku. Obří logo mi to nemusí stále připomínat.) například uvolnilo místo pro znak týmu. Zbavil jsem se obrázků na pozadí a prozatím je nahradil barvami. Přepsal jsem celou řadu dalších barev pozadí a textů. Trochu záhadou je pro mě přepínač týmů - nemám B-tým, proto je přepínač umístěn naslepo. Já to nezaznamenám, ale pokud by někdo moje styly zkoušel, možná narazí na nevhodné umístění tlačítka.

Pro ilustraci dvě srovnání - homepage a sestavy před a po.

Kompletní CSS kód najdete o několik řádků dál. Import do Stylusu provedete jednoduše:

1. otevřete Brejk
2. v prohlížeči kliknete na ikonku Stylus
3. u možnosti Napsat nový styl pro: kliknete na www.brejk.cz
4. vložíte zkopírované CSS a uložíte

CSS

Protože se jedná o "work in progress", nic není definitivní a zřejmě už ve chvíli, kdy tyto řádky čtete, jsem ve stylech něco přepsal. :-) Z tohoto důvodu se zde nebudu šířeji rozepisovat o jednotlivých změnách a motivacích za nimi stojícími. Bude-li zájem, mohu tomu klidně věnovat samostatný článek. Uvedu jen několik technických poznámek.

Do horní části stylů jsou vytažené proměnné s barvami, aby se člověk nemusel kvůli každé změně nořit hluboko do kódu. Můžete využít jakýkoli formát barev chcete (je jich celá řada, výběr barvy lze realizovat i v Google vyhledávači). Pro sebe jsem používal hlavně formát hsl, který usnadnil realizaci myšlenky vycházet z jedné barvy (jednotně definovaný odstín a sytost) a varianty tvořit pomocí světlosti. Odstín je číslo od 0 do 360, sytost se zapisuje v procentech.

Část s :has selektorem umožní, abyste v každém týmu měli vlastní barvy i logo. Pokud si v Centrála -> Nastavení zakliknete u jednoho týmu zelený barevný motiv, budou pro tým platit pravidla uvnitř html:has(head > link[href="layout_css/body_big_green.css"]). Obdobně pro modné téma, tam se uplatní pravidla uvnitř html:has(head > link[href="layout_css/body_big_blue.css"])

Uživatelé Firefoxu pro zajištění fungování :has selektoru provedou ještě následující:

1. zadáte v adresním řádku about:config
2. vyhledáte layout.css.has-selector.enabled
3. přepnete na true

Nakonec samotný CSS kód:

html {
--odstin: 100;
--sytost: 50%;

--pozadi-stranka: hsl(var(--odstin) var(--sytost) 25%);
--pozadi-header: hsl(0 0% 5%);
--pozadi-menu: hsl(0 0% 10%);
--pozadi-menu-podkategorie: hsl(0 0% 20%);
--pozadi-nadpisy: hsl(var(--odstin) var(--sytost) 20%);
--pozadi-p-panel-nadpisy: hsl(0 0% 20%);
--pozadi-text-vyber: hsl(var(--odstin) var(--sytost) 90%);
--pozadi-hledani: hsl(0 0% 25%);
--pozadi-logo: #fafafa;
--pozadi-zakladni-sestava: hsl(var(--odstin) var(--sytost) 30%);
--pozadi-nahradnik: hsl(var(--odstin) var(--sytost) 80%);
--pozadi-hlavicka-tabulky: linear-gradient(to top, #dbdee3, #f6f7fb);
--pozadi-nahradnik-hover: hsl(var(--odstin) var(--sytost) 75%);
--pozadi-zakladni-sestava-hover: hsl(var(--odstin) var(--sytost) 75%);
--pozadi-oznameni: hsl(var(--odstin) var(--sytost) 75%);

--menu-oddelovac: hsl(0 0% 50%);
--menu-focus: hsl(var(--odstin) var(--sytost) 30%);

--barva-text-globalni: #222;
--barva-text-stranka: #fafafa;
--barva-text-header: #fafafa;
--barva-text-paticka: #fafafa;
--barva-text-menu: #fafafa;
--barva-odkazy-hover: hsl(var(--odstin) var(--sytost) 35%);
--barva-text-vyber: #222;
--barva-accent: hsl(var(--odstin) var(--sytost) 50%);
--barva-text-zakladni-sestava: #fafafa;
--barva-text-nahradnik: #222;
--barva-text-zakladni-sestava-hover: #222;
--barva-text-nahradnik-hover: #222;
--barva-text-nadpis-panelu: #fafafa;
--barva-text-oznameni: #222;

scrollbar-gutter: stable;
}

html:has(head > link[href="layout_css/body_big_green.css"]),
html:has(head > link[href="layout_css/body_green.css"]){
--odstin: 125;
--logo-url: url("https://www.brejk.cz/img_user/img1_49507.jpg");
}

html:has(head > link[href="layout_css/body_big_blue.css"]) {
--odstin: 350;
--logo-url: url("https://www.brejk.cz/img_user/img1_49507.jpg");
}

/* Obecné */
* {-webkit-box-shadow: none !important;box-shadow: none !important; accent-color: var(--barva-accent)}
*::-moz-selection {background-color: var(--pozadi-text-vyber); color: var(--barva-text-vyber);}
*::selection {background-color: var(--pozadi-text-vyber); color: var(--barva-text-vyber);}
html {color: var(--barva-text-globalni);}
a:link, a:visited {color: currentColor;}
a:hover {color: var(--barva-odkazy-hover);}

/* - */
#body-background {min-height: max(776px, 100vh); background: var(--pozadi-stranka);}
#body-full {padding-bottom: 1rem; background: var(--pozadi-menu);}
#right-panel > div[id], #body-box, #right-panel, #footer {background: none;}

/* Header*/
#header {height: 100px; background: var(--pozadi-header); color: var(--barva-text-header);}
#header a {color: var(--barva-text-header) !important;}
#header #info-user {width: auto; left: 210px; top: 10px; font-size: 1rem !important; line-height: 1.25;}
#header #filtration {top: 60px; right: 6px; left: auto;}
#ikona_napoveda {right: 140px; left: auto; top: 112px;}
#ikona_ukoly {right: 170px; left: auto; top: 112px;}
#header #statistika-online {width: auto; right: 10px; left: auto; top: 112px}
#header_finance_info, #header_balicek_info {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.5em; width: auto; height: auto;}
#header_finance_info {left: 210px; top: 66px;}
#header_balicek_info {left: 370px; top: 68px;}
#logout {top: 10px; right: 10px; left: auto; text-transform: uppercase;}
:is(#header [id^="posta"], #header [id^="dorost"], #header [id^="nabidka"], #header [id^="wait"]) {width: auto; height: auto; right: auto; top: 30px;}
:is(#header [id^="posta"], #header [id^="dorost"], #header [id^="nabidka"], #header [id^="wait"]) a {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; font-size: .8rem}
:is(#header [id^="posta"], #header [id^="dorost"], #header [id^="nabidka"], #header [id^="wait"]) img {height: 25px;}
#header [id^="posta"] {left: 550px;}
#header [id^="dorost"] {left: 700px;}
#header [id^="nabidka"] {left: 600px;}
#header [id^="wait"] {left: 650px;}
#header #filtration #tlacitko {position: absolute; right: 0; left: auto; width: 65px; height: 29px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
#header #filtration #tlacitko::before {content: "Hledat";}
#header #filtration input.submit {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: none;}
#header #filtration input.submit:hover {width: 100%; background: none;}
#header #filtration #policko {left: 25px; background: var(--pozadi-hledani);}
#header #homepage {position: absolute; top: 10px; left: 30px; width: 10rem; height: 10rem; border-radius: 50%; z-index: 100; overflow: hidden;}
#header #homepage a {display: block; width: 10rem; height: 10rem; background-color: var(--pozadi-logo); background-image: var(--logo-url, url("https://www.brejk.cz/img_user/default.gif")); background-repeat: no-repeat; background-size: 6rem 6rem; background-position: center;}
#header_prepinani_tymu {top: 65px; left: 210px;}
#header #login-text {top: 20px;}
#header #registrace {top: 20px;}
#header #login {top: 50px;}

/* Horní menu */
#menu {width: 775px !important; height: 47px; padding-right: 0 !important; background: var(--pozadi-menu);}
#menu ul li {border-bottom: 6px solid transparent; background: none;}
#menu ul li.active {background: none !important;}
#menu ul li a, #menu ul li strong {background: none !important;}
#menu ul li:hover, #menu ul li a:hover {background: none !important;}
#menu ul li:hover, #menu ul li.active {border-color: var(--menu-focus);}

/* Levé menu + Hlavní obsah */
#body-full #content .box {background: var(--pozadi-nadpisy);}
#content .box h3 span {color: currentColor;}
#content-top, #content-bottom {display: none;}
#left-panel {width: 210px; padding-left: 0; background-color: var(--pozadi-menu);}
#left-menu-bottom {display: none;}
#left-menu {width: 100%; background: none;}
#left-menu > ul > li {background: none !important;}
#left-menu > ul > li > a {padding-left: 1.5rem; border-bottom: 2px solid var(--menu-oddelovac); background: var(--pozadi-menu) !important; font-size: 1rem;}
#left-menu > ul > li > ul a {padding-left: 1.5rem !important; border-bottom: 1px solid var(--menu-oddelovac); background: var(--pozadi-menu-podkategorie) !important;}
#left-menu a {position: relative; color: var(--barva-text-menu) !important;}
#left-menu a::after {content: ""; position: absolute; top: 0; right: 0; width: 6px; height: 100%;}
#left-menu a:hover {color: var(--barva-text-menu) !important; text-decoration: underline; border-color: var(--menu-oddelovac);}
#left-menu a:hover::after {background-color: var(--menu-focus);}
.listovani {background-color: inherit;}

/* Pravý panel */
#right-panel {width: 215px; height: auto; top: 147px; left: 985px; padding-top: 0;}
#right-panel > div {width: 100% !important;}
#right-panel :is(a, .text_orange) {color: var(--barva-text-stranka);}
#panel_atym {padding-bottom: 0;}
.right-panel-header {width: 100%; height: auto; background: var(--pozadi-p-panel-nadpisy, none);}
.right-panel-header + div {padding-left: 1.5rem !important;}
.nadpis_panelu {padding: 8px 5px; height: auto; color: var(--barva-text-nadpis-panelu); text-align: center; text-indent: 0;}

/* Tabulky */
.bgcolor-orange {background-color: var(--pozadi-zakladni-sestava); color: var(--barva-text-zakladni-sestava) !important;}
.bgcolor-yellow {background-color: var(--pozadi-nahradnik); color: var(--barva-text-nahradnik) !important;}
.table-basic tr.bgcolor-orange:hover td {background-color: var(--pozadi-zakladni-sestava-hover); color: var(--barva-text-zakladni-sestava-hover);}
.table-basic tr.bgcolor-yellow:hover td {background-color: var(--pozadi-nahradnik-hover); color: var(--barva-text-nahradnik-hover);}
.table-small table th, .table-smaller table th {background: var(--pozadi-hlavicka-tabulky) !important;}
.tabulky_ramecek {table-layout: fixed !important;} /* Ve Firefoxu to na stránce Taktika vyhazovalo mimo stránku ty spodní tabulky. */

/* Alert */
.alert_oznameni {background-color: var(--pozadi-oznameni); color: var(--barva-text-oznameni)}
.alert_close {opacity: .8;}

/* Footer */
#footer {height: auto;}
#footer iframe {display: none;}
#footer a, #footer .text_white {color: var(--barva-text-paticka);}

/* Diskuze */
.discussion-box, .discussion-admin, .discussion-me {padding: .5rem; margin-bottom: .8rem;}

/* Ostatní */
list_ikona_help {right: 20px !important;}
#dialog_napoveda {display: none;}
	

Co s tím

Je jasné, že pokud Vám tvorba webu a výrazy jako HTML nebo CSS nic neříkají, těžko si budete vlastní styly vyrábět. Dnešním článkem jsem chtěl zjistit, zda by o tyto úpravy Brejku byl zájem. Pokud ne, zůstane u tohoto jednoho vydání. Pokud ano, můžeme vše podrobněji rozebrat v dalších textech, opatřit styly podrobnými návody apod. Najde-li se zájemce, který by na tématu chtěl spolupracovat, velmi rád s ním spojím síly.

Všichni víme, jak "rychle" jsou na Brejku zaváděny novinky. V oblasti grafiky web už dlouho stojí na místě. Brejk potřebuje zejména kvalitní responzivní šablonu, která bude fungovat napříč zařízeními. Uživatelské CSS samozřejmě problémy nevyřeší, ale může nám každodenní přihlašování do hry (bohužel pouze v desktopových prohlížečích) alespoň osvěžit.

Závěr

Děkuji všem, kdo dočetli do konce! Otázky, podněty a připomínky prosím směřujte do komentářů pod článek, případně do pošty.