/* ===== Paleta barev webu – světlý a tmavý vzhled =====
Vzhled určuje atribut data-bs-theme na (App.razor z cookie DiscussionTheme). Na :root jsou SVĚTLÉ hodnoty,
blok html[data-bs-theme="dark"] pod ním přepisuje TYTÉŽ proměnné tmavými. Pravidla stránek barvu nikdy nepíší
napevno – berou ji z těchto proměnných (vlastní paleta chatu je v Messages.css, administrace v admin.css) nebo
z proměnných Bootstrapu, které se přepínají samy (--bs-body-bg = bílý podklad karet a panelů, --bs-body-color,
--bs-border-color, --bs-tertiary-bg …). Odstíny průhledné šedi = rgb(var(--shade-rgb) / alfa): ve světlém
ztmavují, v tmavém zesvětlují. Značková modrá --primary-color je VÝPLŇ (tlačítka, vlastní bublina chatu,
pruhy) a zůstává v obou vzhledech stejná; modrý TEXT a ikony berou --primary-text, který je v tmavém světlejší
kvůli kontrastu 4,5 : 1. */
:root {
--primary-color: #3a7cd5;
--primary-color-hover: #1e5aaa;
--primary-text: #3a7cd5; /* modrý text, odkaz a ikona */
--primary-text-strong: #1e5aaa; /* aktivní položka menu, odkaz pod myší */
--light-primary-color: #5b9ae5;
--light-primary-color-ultra-light: #F7FBFF; /* pozadí stránky */
--primary-tint: #F7FBFF; /* jemně modrý podklad vybrané položky (konverzace, vlastní reakce, lišta odpovědi) */
--secondary-color: #D6E6F9;
--light-secondary-color: #ECD9EC; /* světle fialová barva */
--tertiary-color: white;
--text-color: #666666; /* šedivá barva */
--ultra-light-text-color: #EBEBEB; /* velmi světle šedivá */
--light-text-color: #F2EFF0; /* světle šedivá */
--comment-graphic-color: #D6D6D6;
--toggle-header-color: var(--light-text-color);
--toggle-text-color: black;
--muted-text: #6c757d; /* vedlejší text (časy, počty, popisky) */
--muted-text-light: #9aa7b8; /* velmi nenápadný text a ikony (počítadla znaků) */
--strong-muted-text: #495057; /* popisky polí */
--border-soft: #eceff3; /* rámeček rozbalovacích nabídek a hamburger menu */
--border-subtle: #e9ecef; /* dělicí čáry řádků */
--card-surface: #ffffffda; /* karta diskuze a kategorie na pozadí stránky */
--card-surface-hover: #fff;
--shade-rgb: 0 0 0; /* jemné stínování: rgb(var(--shade-rgb) / 0.05) */
--danger-text: #dc3545; /* červený text a ikona (končící platnost, smazat) */
--alert-danger-text: #842029;
--scrollbar-thumb: #888;
--scrollbar-track: #f1f1f1;
--footer-muted: #666e76; /* údaje provozovatele a verze – drobné písmo, na šedé patičce 4,9 : 1 */
--footer-dim: #adb5bd;
--footer-sep: #c4c9cf;
--cookie-bg: #f4f7fb;
--cookie-border: #d5dde7;
/* Hlasovací anketa (PollCard) */
--poll-border: #d9e2ef;
--poll-closed-bg: #f7f8fa;
--poll-danger-text: #c62828;
--poll-open-bg: #e3f4e8;
--poll-open-text: #1e7a3c;
--poll-closed-badge-bg: #ececec;
--poll-closed-badge-text: #555;
--poll-multi-bg: #eef4ff;
--poll-multi-text: #3d5a99;
--poll-confirm-bg: #fff3f3;
--poll-confirm-border: #f1c0c0;
--poll-option-border: #e3e8ef;
--poll-option-hover-bg: #f5f9ff;
--poll-option-mine-bg: #eef4ff;
--poll-winner-bg: #fff9e0;
--poll-bar-bg: #e9edf3;
--poll-hint-text: #9a6b00;
--poll-muted-text: #636b73; /* počty hlasů a „Kdo hlasoval“ – i na modrém podkladu vybrané varianty 4,9 : 1 */
/* Varování (4. typ hlášek vedle úspěchu, chyby a informace): žlutá – stav, na který je třeba dát pozor,
ale nejde o chybu (pozastavená funkce, údržba, zastaralá záloha, potvrzení nebezpečné akce). */
--alert-warning-color: #e0a800; /* rámeček */
--alert-warning-color-light: #fff3cd; /* pozadí */
--alert-warning-text-color: #664d03; /* text */
--private-badge-color: #dc3545; /* odznak soukromé diskuze */
/* tlacitka */
--btn-height: 37px;
--btn-border-radius: 5px;
/* Písmo celého webu (vč. administrace a editoru CKEditor) – Inter z css/fonts.css; dokud se nenačte,
kreslí se metricky srovnaným záložním písmem, a kdyby se nenačetl vůbec, systémovým bezpatkovým.
Emoji fonty na konci: Inter emoji nemá, znaky mimo jeho sady dokreslí systém. */
--font-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--bs-font-sans-serif: var(--font-sans);
--bs-body-font-family: var(--font-sans);
--heading-color: #1f2733;
}
/* Tmavý vzhled: tytéž proměnné s tmavými hodnotami. Pozadí stránky je o stupeň tmavší než karty a panely
(--bs-body-bg Bootstrapu = #212529), stejně jako ve světlém je stránka namodralá a karty bílé. Selektor
html[…] je silnější než :root, takže na pořadí stylopisů nezáleží. */
html[data-bs-theme="dark"] {
--primary-text: #6ea8fe;
--primary-text-strong: #9ec5fe;
--light-primary-color-ultra-light: #16191d;
--primary-tint: #1b2738;
--secondary-color: #1f3250;
--light-secondary-color: #3a2a3a;
--tertiary-color: #212529;
--text-color: #adb5bd;
--ultra-light-text-color: #2b3035;
--light-text-color: #343a40;
--comment-graphic-color: #495057;
--toggle-header-color: #343a40;
--toggle-text-color: #f8f9fa;
--muted-text: #9ba5b0;
--muted-text-light: #8794a5;
--strong-muted-text: #ced4da;
--border-soft: #343a40;
--border-subtle: #343a40;
--card-surface: #212529;
--card-surface-hover: #2b3035;
--shade-rgb: 255 255 255;
--danger-text: #ea868f;
--alert-danger-text: #ea868f;
--scrollbar-thumb: #6c757d;
--scrollbar-track: #2b3035;
--footer-muted: #9ba5b0;
--footer-dim: #6c757d;
--footer-sep: #6c757d;
--cookie-bg: #2b3035;
--cookie-border: #495057;
--poll-border: #3d4650;
--poll-closed-bg: #262a2f;
--poll-danger-text: #ea868f;
--poll-open-bg: #13311f;
--poll-open-text: #75b798;
--poll-closed-badge-bg: #343a40;
--poll-closed-badge-text: #ced4da;
--poll-multi-bg: #1b2738;
--poll-multi-text: #9ec5fe;
--poll-confirm-bg: #2c0b0e;
--poll-confirm-border: #842029;
--poll-option-border: #3d4650;
--poll-option-hover-bg: #1b2738;
--poll-option-mine-bg: #1f3250;
--poll-winner-bg: #332701;
--poll-bar-bg: #343a40;
--poll-hint-text: #ffda6a;
--poll-muted-text: var(--muted-text);
--alert-warning-color: #997404;
--alert-warning-color-light: #332701;
--alert-warning-text-color: #ffda6a;
--heading-color: #e9ecef;
--nav-link-color: #dee2e6;
--nav-hover-bg: rgba(110, 168, 254, 0.12);
--nav-active-bg: rgba(110, 168, 254, 0.2);
}
/* CKEditor nastavuje písmo své lišty a dialogů proměnnou --ck-font-face na :root ve stylech vložených až
za site.css – proto se proměnná přepisuje přímo na prvcích editoru (všechny mají třídu .ck). */
.ck {
--ck-font-face: var(--font-sans);
}
/* Reset a základní nastavení (platí pro všechny velikosti) */
html {
font-size: 14px;
position: relative;
font-family: var(--font-sans);
min-height: 100vh;
}
body {
background-color: var(--light-primary-color-ultra-light);
min-height: 100vh;
display:flex;
flex-direction: column;
justify-content: flex-start;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.alert-info {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--primary-color);
background-color: var(--secondary-color);
}
.alert-info h4{
margin:0px;
}
.alert-warning {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--alert-warning-color);
background-color: var(--alert-warning-color-light);
color: var(--alert-warning-text-color);
}
/* Úspěch a chyba: sytý rámeček v barvě typu jako u informace a varování (chyba výrazně červená). */
.alert-success {
border: 1px solid #198754;
}
.alert-danger {
border: 1px solid #dc3545;
color: var(--alert-danger-text);
}
/* Lišta se sdělením administrátora pod menu: text vycentrovaný jako ostatní .alert-info, dlouhé slovo se
zalomí; vlevo od křížku (alert-dismissible) zůstává místo. */
.maintenance-banner {
margin: 8px 0 0;
display: flex;
align-items: center;
}
.announcement-banner {
margin-top: .75rem;
overflow-wrap: anywhere;
text-align: center;
}
/* Řádek jazyka v kartě „Sdělení uživatelům": vlajka ve velikosti přepínače jazyků, kód jazyka pevné šířky. */
.announcement-flag {
width: 26px;
height: 18px;
object-fit: cover;
border-radius: 2px;
flex: 0 0 auto;
}
.announcement-code {
width: 2em;
flex: 0 0 auto;
}
.announcement-row .form-control {
min-width: 0;
}
/* Potvrzovací box „Vyčistit databázi" obsahuje delší text + tlačítka pod sebou –
nesmí na něj platit flex-zarovnání pro krátké hlášky (rozhází ho do sloupců). */
.alert-warning.cleanup-confirm {
display: block;
}
/* Desing scroll posuvniku */
.scrollbar {
scrollbar-width: thin; /* Firefox - lze použít 'thin', 'auto' nebo 'none' */
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); /* Firefox - barva posuvníku a pozadí */
}
/* Pro Chrome, Safari a Opera */
.scrollbar::-webkit-scrollbar {
width: 0.5px; /* Šířka vertikálního scrollbaru */
height: 1px; /* Výška horizontálního scrollbaru */
}
.scrollbar::-webkit-scrollbar-track {
background: var(--primary-color); /* Barva dráhy scrollbaru */
}
.scrollbar::-webkit-scrollbar-thumb {
background: var(--primary-color); /* Barva posuvníku */
}
.scrollbar::-webkit-scrollbar-thumb:hover {
background: var(--primary-color); /* Barva posuvníku při najetí myší */
}
/* info boxy – zavírací křížek je skutečné tlačítko (StatusAlert.razor / data-alert-dismiss), ne ozdoba v CSS */
.alert.alert-danger, .alert.alert-info {
position: relative;
}
.comment-content {
white-space: pre-wrap; /* Zachovává odřádkování */
}
/* Detail diskuse - graficke cary pro jednotlive komentar */
/* Hlavní kontejner komentáře */
.komentar-wrapper {
position: relative;
padding-left: 24px !important;
}
/* Nastavení pozicování pro levou část hlavičky komentáře */
.hlavicka-komentare-leva-cast {
position: relative;
}
/* Vertikální červená čára vedoucí od kolečka dolů */
.komentar-wrapper::after {
content: "";
position: absolute;
left: 11px; /* Pozice odpovídající kolečku */
top: 17px; /* Začátek pod kolečkem */
bottom: 19px; /* Konec před tlačítkem odpovědět */
height: calc(100% - 40px);
width: 2px;
background-color: var(--comment-graphic-color);
z-index: 1;
}
/* kolečko u hlavičky komentáře */
.hlavicka-komentare-leva-cast::before {
content: "";
position: absolute;
left: -18px; /* Pozice kolečka vlevo od hlavičky */
top: 4px; /* Vertikální zarovnání */
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--comment-graphic-color);
z-index: 2;
}
/* Horizontální čára vedoucí k odpovědi */
.odpoved-na-komentar {
position: relative;
margin-left: 30px !important; /* Přepsání bootstrap ms-2 pro více prostoru */
padding: 0px 7px 7px 7px !important;
}
.odpoved-na-komentar::before {
content: "";
position: absolute;
left: -42px;
top: 15px; /* Vertikální zarovnání s odpovědí */
width: 40px;
height: 2px;
background-color: var(--comment-graphic-color);
z-index: 1;
}
/* Čára vedoucí k tlačítku Odpovědět */
.reply-button {
position: relative;
margin-left: 35px;
margin-bottom: 10px !important;
height: 30px;
}
.reply-button::before {
content: "";
position: absolute;
left: -48px;
top: 50%;
width: 40px;
height: 2px;
background-color: var(--comment-graphic-color);
z-index: 1;
}
.btn-add-coment-wrapper {
display: inline-flex;
align-items: center;
}
/* Malá tlačítka v hlavičce komentáře (Skrýt/Zobrazit u admina, lajk…) mají pevnou výšku – na úzkém telefonu
se popisek nesmí zalomit pod ikonu, jinak vyteče z rámečku tlačítka. Místo uvolní levá část (autor, čas). */
.komentar-wrapper .btn-sm {
white-space: nowrap;
}
.emoji {
font-size: 20px;
cursor: pointer;
margin: 5px;
}
/* Úprava ostatních stylů pro lepší vzhled s vytvořenými čárami */
.komentar-wrapper {
overflow: visible; /* Zajistí, že čáry nebudou oříznuty */
padding-left: 20px; /* Přidá prostor vlevo pro kolečko a čáru */
}
.texty-ikon-diskuse {
color: var(--text-color) !important;
}
/* konec detailu diskuse */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-sans);
font-weight: 600;
letter-spacing: -0.015em;
color: var(--heading-color);
}
/* FocusOnNavigate (Routes.razor, Selector="h1") po načtení/navigaci přesune fokus na
kvůli přístupnosti (čtečky obrazovky ohlásí nadpis stránky). Prohlížeč ale kolem nadpisu
vykreslí focus outline – černý rámeček, který na úvodní stránce krátce problikne, než se
fokus ztratí. Nadpis není interaktivní prvek, takže outline schováme bez dopadu na ovládání
klávesnicí; fokus pro přístupnost zůstává zachován. */
h1:focus,
h1:focus-visible {
outline: none;
}
.spinner {
color: var(--primary-text);
}
/* Základní container – JEDNO pravidlo šířky obsahu pro celý web (stránky, patička, menu):
do 1560 px okna vyplňuje obsah celou šířku (jen okraje 5 px; stránka má vlastní .container uvnitř
kontejneru layoutu, takže od okraje okna je 10 px), od 1560 px je obsah široký 1550 px a vystředěný.
Přepisuje pevné stupně Bootstrapu (540/720/960/1140/1320 px) – ty nechávaly na telefonu na šířku
i na tabletu zbytečně široké prázdné okraje a každá stránka pak vypadala jinak než chat, který je měl
vypnuté. Výjimka: administrace (admin.css) si kontejner rozšiřuje na 2400 px kvůli širokým tabulkám. */
.container {
padding-left: 5px;
padding-right: 5px;
min-width: 320px;
max-width: 1550px;
margin-left: auto;
margin-right: auto;
}
/* Vnořený .container nepotřebuje vlastní min. šířku (drží ji vnější kontejner layoutu) – na telefonu
s šířkou 320 px by jinak vyčníval o 2 × 5 px okrajů vnějšího kontejneru. */
.container .container {
min-width: 0;
}
/* Stránka má vlastní .container uvnitř .container layoutu (MainLayout) – od okraje okna je tak jen 2 × 5 px,
Bootstrap .row ale vystupuje o půl mezery sloupců (10,5–12 px) a celá stránka pak přetékala do strany
(na telefonu o 0,5 px, na šířce 1200–1550 px o 2 px = vodorovný posuvník). Přesah řádku se proto omezí
na těch 10 px (i u řádku zabaleného v dalším divu, např. #discussions-list); menší mezery (g-2, g-3)
zůstávají beze změny. */
main .container .row {
margin-left: max(-10px, calc(var(--bs-gutter-x) * -0.5));
margin-right: max(-10px, calc(var(--bs-gutter-x) * -0.5));
}
/* Základní styly pro odkazy */
a {
color: var(--primary-text);
}
/* Zástupný text polí mimo .form-control (pole zprávy v chatu) by měl pevnou šeď prohlížeče #757575 – na tmavém
podkladu nečitelnou a na světle šedém poli pod 4,5 : 1. Bere tutéž tlumenou barvu jako pole Bootstrapu. */
::placeholder {
color: var(--bs-secondary-color);
opacity: 1; /* Firefox placeholder jinak ještě ztlumí */
}
/* Nadpis rozbalovací nabídky (zvoneček „Nové aktivity") – Bootstrap má pevnou šeď #6c757d, na tmavé nabídce nečitelnou. */
.dropdown-header {
color: var(--muted-text);
}
/* Základní styly pro tlačítka */
.btn{
width: 100%; /* Na mobilu tlačítka přes celou šířku */
margin-bottom: 0.5rem;
border-radius: var(--btn-border-radius);
}
.bg-primary{
background-color: var(--primary-color) !important ;
}
.like-btn-disable, .like-btn, .pocetZobrazeni {
margin-bottom: 0.5rem !important;
border: none;
background-color: transparent;
}
.mine-like::before{
cursor: pointer !important;
}
.btn:active, .btn:focus, .btn:focus-visible, .btn:active:focus {
border: none !important;
outline: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
}
.btn-primary {
color: #fff;
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.btn-primary:active:focus, .btn-outline-primary:focus {
outline: none;
box-shadow: 0 0 0 0.1rem var(--bs-body-bg), 0 0 0 0.25rem var(--primary-color);
border-color: var(--primary-color);
}
.btn-primary:hover {
background-color: var(--primary-color-hover);
border-color: var(--primary-color-hover);
}
.btn-primary:disabled {
background-color: var(--light-primary-color);
border-color: var(--light-primary-color);
}
.top-star {
align-items: center;
}
/* Odznak typu diskuze (TOP / Pro přátele / Soukromá) v patičce detailu diskuze. Flex odstraní mezeru pod řádkovým
SVG a spodní okraj je stejný jako u srdce a počtu zobrazení – střed ikony pak leží na téže ose jako ostatní ikony. */
.discussion-type-badge {
display: flex;
margin-bottom: 0.5rem;
}
.pocetZobrazeni {
display: flex;
gap: 5px;
color: var(--primary-text);
margin-bottom: 0.5rem;
}
.like-btn-footer, .like-btn-disable, .like-btn {
display: flex;
gap: 5px;
align-items: center;
color: var(--primary-text) !important;
transition: ease-in-out;
padding:0;
}
.bi-heart:hover{
transform:scale(1.3);
}
.bi-heart-fill, .bi-heart-fill::before, like-btn-disable * {
cursor: default;
}
.like-btn-disable i:before, .like-btn i:before, .like-btn-disable *, .like-btn * {
color: var(--primary-text) !important;
}
.btn:focus,
.btn:active:focus {
outline: none;
box-shadow: 0 0 0 0.1rem var(--bs-body-bg), 0 0 0 0.25rem var(--primary-color);
border-color: var(--primary-color);
}
.btn-outline-primary-invert {
border: 1.5px solid white;
color: white;
}
.btn-outline-primary {
border: 1.5px solid var(--primary-color);
color: var(--primary-text);
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
color: white !important;
background-color: var(--primary-color) !important;
border: 1.5px solid var(--primary-color) !important;
}
.btn-group{
align-items: stretch;
}
/* Navigace – položky menu jsou „pilulky“: najetí myší = jemné podbarvení, aktivní stránka = výraznější
podbarvení + barva + polotučné písmo (žádné podtrhávací čáry). Platí pro lištu i hamburger menu. */
:root {
--nav-link-color: #27303d;
--nav-hover-bg: rgba(58, 124, 213, 0.09);
--nav-active-bg: rgba(58, 124, 213, 0.15);
--nav-radius: 8px;
}
.detail-diskuse-dolni-btn-wrapper i {
color: var(--primary-text);
}
#user-icon{
margin-right: 0.7rem;
}
#friendship-badge{
left: 40px;
}
/* Styly pro ikony v menu*/
#notification-bell, #user-icon, #messages-icon, #people-icon {
font-size: 1.2rem;
line-height: 1; /* větší ikona nesmí zvětšit výšku řádku – položka je stejně vysoká jako textová */
vertical-align: -0.15em;
transition: color 0.3s;
}
.notification-active {
color: var(--primary-text);
animation: bell-ring 1s;
}
@keyframes bell-ring {
0% {
transform: rotate(0);
}
20% {
transform: rotate(15deg);
}
40% {
transform: rotate(-15deg);
}
60% {
transform: rotate(7deg);
}
80% {
transform: rotate(-7deg);
}
100% {
transform: rotate(0);
}
}
/* Úprava pozice badge */
.menu-icon-wrapper .badge{
font-size: 0.55rem;
top: -10px ;
left: 34px !important;
}
.menu-icon-wrapper{
text-align: left;
width: auto;
max-height: 35px;
}
.menu-icon-wrapper a{
padding: 7px 14px;
}
#user-icon, #notification-bell, #messages-icon, #people-icon {
margin-left: 25px;
max-width: 30px;
}
#notificationsDropdown{
width: 100%;
}
#friendship-badge {
top: -3px;
left: 47px !important;
}
/* Hamburger menu: pravá část (účet, zprávy, odhlášení…) je oddělená tenkou čarou od hlavních odkazů. */
.menu-right-section{
border-top: 1px solid var(--border-soft);
margin-top: 0.25rem;
}
/* Navigace - mobilní verze */
.navbar {
padding: 0.5rem;
}
.navbar-toggler {
position: absolute;
right: 10%;
top: 1.8rem;
border: none;
padding: 0.5rem;
z-index: 1000;
transition: all 0.3s ease-in-out;
padding: 0.5rem 1rem 0.5rem 0.5rem; /* Trochu více prostoru vpravo pro notifikaci */
}
/* Nastavení vlastností pro čáry hamburgeru */
.navbar-toggler .navbar-toggler-icon {
background-image: none !important; /* Odstranění výchozí Bootstrap ikony */
position: relative;
transition: all 0.3s ease-in-out;
}
/* Vytvoření tří čar pro hamburger pomocí ::before, ::after a samotného elementu */
.navbar-toggler .navbar-toggler-icon,
.navbar-toggler .navbar-toggler-icon::before,
.navbar-toggler .navbar-toggler-icon::after {
width: 28px;
height: 2px;
border-radius: 2px;
background-color: var(--nav-link-color);
display: inline-block;
position: absolute;
left: 50%;
margin-left: -14px;
transition: all 0.3s ease-in-out;
}
.navbar-toggler .navbar-toggler-icon::before {
content: '';
top: -10px;
}
.navbar-toggler .navbar-toggler-icon::after {
content: '';
top: 10px;
}
/* Notifikace u hamburger menu */
#hamburger-menu-notification {
position: absolute;
top: -8px;
right: -14px;
width: 14px;
height: 14px;
background-color: var(--primary-color); /* Červená barva pro notifikaci */
border-radius: 50%; /* Kulatý tvar */
display: flex;
justify-content: center;
align-items: center;
font-size: 10px;
color: white;
font-weight: bold;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* Jemný stín pro lepší viditelnost */
border: 1px solid var(--bs-body-bg); /* Bílý okraj pro lepší kontrast */
z-index: 1001;
}
/* Styl pro stav, kdy je menu rozbalené (tvoří křížek) */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
background-color: transparent; /* Prostřední čára zmizí */
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
transform: rotate(45deg);
top: 0;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
transform: rotate(-45deg);
top: 0;
}
/* Odstranění outline při zaměření (focus) */
.navbar-toggler:focus {
outline: none;
box-shadow: none;
}
.navbar-nav {
padding: 0.25rem 0;
text-align: left;
width: 100%;
gap: 2px;
}
.navbar-nav .nav-item {
margin-bottom: 0;
}
.navbar-nav .nav-link {
color: var(--nav-link-color) !important;
font-weight: 500;
padding: 0.55rem 0.9rem;
border-radius: var(--nav-radius);
transition: background-color 0.15s ease, color 0.15s ease;
}
.navbar-nav .nav-link:hover {
background-color: var(--nav-hover-bg);
color: var(--primary-text) !important;
}
.navbar-nav .nav-link:focus-visible {
outline: 2px solid var(--light-primary-color);
outline-offset: 1px;
}
/* Aktivní stránka; u položky účtu nese třídu active
, ne odkaz. */
.navbar-nav .nav-link.active,
.navbar-nav li.active > .nav-link {
background-color: var(--nav-active-bg);
color: var(--primary-text-strong) !important;
font-weight: 600;
}
/* Text u ikonových položek (Zprávy, Nové aktivity) jen v hamburger menu – na liště stačí ikona s tooltipem. */
.nav-icon-label {
margin-left: 0.7rem;
}
.navbar-collapse {
display: flex;
flex-direction: column; /* Na mobilních zařízení řadí položky pod sebe */
background-color: var(--bs-body-bg);
border: 1px solid var(--border-soft);
box-shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
border-radius: 12px;
padding: 0.75rem 0.5rem 0.5rem;
width: 100%;
}
.fulltextForm {
order: 1; /* Vyhledavaci form bude jako prvni nahore */
width: 100%;
padding: 0 0.4rem 0.4rem;
}
.fulltextFormInput:focus {
outline: none;
box-shadow: none;
border-color: var(--primary-color);
}
.fulltextFormBtn{
width:5rem;
margin: auto 5px;
}
/* Krizek zobrazovany uvnitr vyhledavaciho pole - Pro prohlížeče založené na Webkit (Chrome, Safari, Opera, nový Edge) */
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
display: none;
}
/* Krizek zobrazovany uvnitr vyhledavaciho pole - Pro starší verze IE a Edge */
input[type="search"]::-ms-clear {
display: none;
}
/* Defaultní pořadí menu prvků na mobilnich zarizenich */
.navbar-nav.flex-grow-1 {
order: 2; /* Levé menu bude zobrazeno jako druhé */
}
.navbar-nav:last-child {
order: 3; /* Pravé menu bude zobrazeno jako třetí */
}
/* Zarovnání položek v rozbaleném hamburger menu (< 1200 px, tj. dokud je navbar sbalený).
Ikonové položky (zprávy, zvoneček, účet) mají odsazení ikony 25 px, které dává smysl jen ve
vodorovné liště na desktopu (tam ho ≥1200px media query stejně vynuluje). Ve svislém menu
kvůli němu vypadaly odsazené oproti textovým položkám (Diskuze / Novinky / Odhlásit se).
Odznaky (badge) jsou vůči ikoně polohované absolutně v px, proto se posouvají o stejných 25 px. */
@media (max-width: 1199.98px) {
#user-icon, #notification-bell, #messages-icon, #people-icon {
margin-left: 0;
}
/* Odznak na pravém horním rohu ikony (ikona ~17 px); text položky začíná až za ním. */
.menu-icon-wrapper .badge,
#friendship-badge {
left: 16px !important;
}
}
/* Logo na mobilu */
.logo-container{
width: 50vw;
}
.logo-container img {
width: 100px !important;
}
/* Nadpisy - mobilní verze */
h1 {
font-size: 1.8rem;
}
h1 a {
color: inherit;
}
h1 a:hover {
color: var(--primary-text);
}
.kategorie-wrapper {
display: flex;
flex-wrap: wrap;
}
.title-wrapper {
display: flex;
align-items: center;
font-size: 16px;
flex-wrap: wrap;
justify-content:flex-start;
width:100%;
}
/* Řádek metadat karty diskuze: vlevo datum, počet komentářů a zobrazení, vpravo štítek autora.
Štítek je v normálním toku řádku, takže nikdy nevyčnívá z karty do sousední karty ani do tlačítka
pod výpisem; když se vedle metadat nevejde, zalomí se pod ně (a zůstane vpravo). */
.popisky {
font-size: 12px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 4px 8px;
line-height: 1.2;
color: var(--text-color);
margin-top: 2px;
}
.popisky .autor {
margin-left: auto;
margin-right: -10px; /* štítek dosedá k pravému okraji karty (karta má vnitřní okraj 10 px) */
max-width: calc(100% + 10px);
padding: 1px 6px 1px 12px;
background-color: var(--secondary-color);
border-radius: 2px;
color: var(--primary-text);
clip-path: polygon(8px 0%, 100% 0%, 100% 100%, 8px 100%, 0% 50%);
}
.popisky .autor a {
color: var(--primary-text);
}
.title-autor-wrapper {
justify-content: space-between;
gap: 5px;
align-items: center;
flex-direction: row;
width: 100%;
flex-wrap: wrap;
position: relative;
}
.card-title {
max-width: 83%;
flex-wrap: wrap;
line-height: 1;
}
.card-kategorie, .card-diskuse{
background-color: var(--light-primary-color-ultra-light);
padding: 10px;
border: 1px solid var(--bs-body-bg);
}
.card-text{
color: var(--text-color);
}
.card-body-icon-wrapper {
max-width: 180px;
height: 50px;
margin-right: 10px;
}
.card-body-icon-wrapper img {
height: 100%;
}
#discussions-list {
display: grid;
grid-template-columns: 1fr; /* Jeden sloupec */
}
/* Karta kategorie roste s textem (název a popis mají v každém jazyce jinou délku), dvojice karet vedle sebe
zůstává stejně vysoká – sloupec mřížky je flex a karta ho vyplní. */
.category-list > [class*="col-"] {
display: flex;
}
.category-list .card-kategorie {
background-color: var(--card-surface);
min-height: 80px;
flex: 1 1 auto;
border: 1px solid var(--light-text-color);
display: flex;
align-items: center;
overflow: hidden;
}
/* Výpis kategorií (/Categories): karta hlavní kategorie = ikona, název a popis (celá karta je odkaz); karta roste
s textem (přeložené názvy a popisy mají různou délku). */
.category-list .category-tree-card {
flex-direction: column;
align-items: stretch;
gap: 8px;
margin-bottom: 12px;
}
.category-tree-main {
flex: 1 1 auto;
align-items: center;
}
.category-list .category-tree-card:hover {
background-color: var(--card-surface-hover);
box-shadow: var(--bs-box-shadow);
}
.category-tree-main .card-title {
margin-bottom: 4px;
}
.category-tree-main .card-text {
margin-bottom: 0;
}
/* Dlaždice podkategorií (stránka hlavní kategorie, výběr podkategorie při zakládání diskuze): mřížka dlaždic
s ikonou a názvem na nejvýš dva řádky. Minimální šířka 210 px je změřená na nejdelších přeložených názvech
(32 znaků, nejdelší slovo 15 znaků; při 180 px se portugalské „Jogos de computador e móveis" lámalo na tři řádky);
na telefonu (do ~450 px) tak zbývá jeden sloupec přes celou šířku – dvě užší dlaždice vedle sebe dlouhé názvy
neunesou. */
.category-subcategories {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
gap: 6px;
}
/* Tužka u dlaždice vlastní podkategorie (CategoryPageTools) – stejná výška jako dlaždice, bez globální výšky .btn. */
.category-subcategory-edit {
height: auto;
min-height: 40px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
}
.category-subcategory {
display: flex;
align-items: center;
gap: 8px;
min-height: 40px;
height: 100%;
padding: 5px 8px;
border: 1px solid var(--light-text-color);
border-radius: 8px;
color: var(--text-color);
text-decoration: none;
line-height: 1.2;
}
.category-subcategory img {
flex: 0 0 auto;
}
.category-subcategory:hover {
border-color: var(--primary-color);
color: var(--primary-text);
}
/* Vybraná podkategorie (stránka podkategorie): vyplněná dlaždice, klik vede zpět na celou hlavní kategorii. */
.category-subcategory.is-selected {
background-color: var(--primary-color);
border-color: var(--primary-color-hover);
color: #fff;
font-weight: 600;
}
.category-subcategory.is-selected:hover {
background-color: var(--primary-color-hover);
color: #fff;
}
/* Podkategorie na stránce hlavní kategorie a ve výběru při zakládání – stejné dlaždice s odstupem od obsahu pod nimi. */
.category-subcategories-page {
margin-bottom: 1.5rem;
}
.card-diskuse {
width: 100%;
max-width: 100%;
background-color: var(--card-surface);
border: 1px solid var(--light-text-color);
display: flex;
align-items: center;
height:100%;
}
/* Výběr přátel s přístupem k diskuzi (čtenáři / spoluautoři): seznam roluje uvnitř, dlouhý seznam přátel stránku nenatáhne. */
.discussion-access-list {
max-height: 220px;
overflow-y: auto;
border: 1px solid var(--bs-border-color, #dee2e6);
border-radius: 0.375rem;
padding: 0.25rem 0.5rem;
}
.discussion-access-item .form-check-label {
cursor: pointer;
}
/* Typ diskuze při zakládání: nadpis a krátký popisek na jednom řádku (na úzkém displeji popisek pod nadpisem),
výběr typu pod nimi přes celou šířku. */
.discussion-type-heading {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 10px;
margin-bottom: 0.5rem;
}
/* Tlačítko „Předvyplnit ze skupin" nad seznamem přátel + hláška o počtu přidaných vedle něj (zalomí se pod). */
.discussion-access-prefill {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
margin: 0.35rem 0;
}
.discussion-access-prefill .btn {
height: auto;
min-height: 31px;
white-space: normal;
}
/* Dialog výběru skupinových chatů (obal .admin-dialog z admin.css). */
.group-prefill-dialog .admin-dialog-header h2 {
overflow-wrap: anywhere;
}
.group-prefill-list {
max-height: min(50vh, 420px);
overflow-y: auto;
border: 1px solid var(--bs-border-color, #dee2e6);
border-radius: 0.375rem;
}
.group-prefill-row {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 4px 4px 10px;
}
.group-prefill-row + .group-prefill-row {
border-top: 1px solid var(--bs-border-color, #dee2e6);
}
.group-prefill-row .form-check-input {
flex: 0 0 auto;
width: 1.2em;
height: 1.2em;
}
.group-prefill-open {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 6px 4px;
border: 0;
border-radius: 0.375rem;
background: none;
color: inherit;
text-align: left;
}
.group-prefill-open:hover {
background-color: var(--bs-tertiary-bg, #f8f9fa);
}
.group-prefill-text {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
}
.group-prefill-name {
overflow-wrap: anywhere;
}
.group-prefill-back {
height: auto;
font-size: 1.25rem;
line-height: 1;
}
.group-prefill-members {
list-style: none;
margin: 0;
padding: 0;
max-height: min(55vh, 460px);
overflow-y: auto;
}
.group-prefill-members li {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
padding: 5px 0;
}
.group-prefill-members li.is-muted > span {
opacity: 0.6;
}
/* Nadpis kategorie – jeden vzhled pro h1 výpisu kategorie i drobečkovou navigaci kategorií nad diskuzí, aby se
nadpis při otevření diskuze neměnil. Velikost a tloušťka odpovídají h1 (navigace nadpisem stránky není). */
.title-detail-category {
color: var(--text-color);
text-align: center;
font-size: 1.8rem;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.2;
margin: 0;
}
@media (min-width: 768px) {
.title-detail-category {
font-size: 2rem;
}
}
.title-detail-category a {
color: inherit;
text-decoration: none;
}
.title-detail-category a:hover {
color: var(--primary-text);
}
/* Ikona kategorie před názvem v nadpisu kategorie (a v drobečkové navigaci nad diskuzí) = pozadí prvního slova
názvu (komponenta CategoryTitleName): velikost podle písma nadpisu, svisle na středu řádku textu, odsazení zleva
drží ikonu u slova i při zalomení dlouhého názvu. */
.category-title-lead {
padding-left: 1.45em;
background-repeat: no-repeat;
background-position: left center;
background-size: 1.15em 1.15em;
}
/* Drobečková navigace kategorií nad diskuzí. Oddělovač vnořených kategorií je jen ozdoba v CSS, čtečka obrazovky
čte seznam odkazů. Položky jsou řádkové (inline), ne flex – dlouhý přeložený název se na telefonu zalomí
mezi slovy a nadřazená kategorie neodskočí na samostatný řádek. */
.category-trail-nav {
margin-bottom: 0.75rem;
}
.category-trail {
list-style: none;
padding: 0;
}
.category-trail li {
display: inline;
}
.category-trail li + li::before {
content: "›";
padding: 0 0.4em;
font-weight: 300;
opacity: 0.5;
}
/* Na telefonu je každá kategorie drobečků na vlastním řádku bez oddělovače: seznam se zúží na nejdelší název,
vycentruje se jako celek a řádky jsou zarovnané vlevo, takže ikony nadřazené kategorie a podkategorie stojí
přesně pod sebou (jinak by se podkategorie zalomila uprostřed svého názvu). */
@media (max-width: 767.98px) {
.category-trail {
display: table;
margin: 0 auto;
text-align: left;
}
.category-trail li {
display: block;
}
.category-trail li + li::before {
content: none;
}
}
.lead {
margin-bottom: -10px;
margin-top: 5px;
text-align: center;
}
/* Neviditelný backdrop pod dropdownem notifikací – klik kamkoli mimo dropdown ho zavře.
Leží nad obsahem stránky, ale POD samotným dropdownem (ten má z-index:1052), aby kliky na
položky notifikací dál fungovaly. */
.notifications-backdrop {
position: fixed;
inset: 0;
z-index: 1051;
background: transparent;
}
/* Dropdown nových aktivit (zvoneček) – zaoblená karta se stínem a položkami ve stylu menu. Otevírá se POD
zvonečkem (bez top by ležel od horní hrany položky a zakrýval zvoneček i sousední ikony). */
#notifications-dropdown {
top: calc(100% + 6px);
/* Pevná šířka na všech breakpointech: absolutně umístěný dropdown by si jinak šířku odvodil z úzké
položky zvonečku (minimum Bootstrapu 10 rem) a text aktivity by se lámal po dvou slovech;
na telefonu se vejde do okna. */
width: 20rem;
max-width: calc(100vw - 1.5rem);
border: 1px solid var(--border-soft);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12);
padding: 0.25rem;
}
#notifications-dropdown .dropdown-item {
border-radius: var(--nav-radius);
}
/* Zvoneček s otevřeným dropdownem vypadá jako „zmáčknutý“. */
.navbar-nav #notificationsDropdown[aria-expanded="true"] {
background-color: var(--nav-active-bg);
color: var(--primary-text-strong) !important;
}
#notifications-dropdown .dropdown-item:hover,
#notifications-dropdown .dropdown-item:focus {
background-color: var(--nav-hover-bg);
}
/* Tlačítko v hlavičce sloupce, které funguje jako odkaz pro řazení (bez vzhledu tlačítka). */
.sort-header {
background: none;
border: none;
padding: 0;
font: inherit;
font-weight: bold;
color: inherit;
cursor: pointer;
text-align: left;
}
.sort-header:hover {
text-decoration: underline;
}
/* Patička: nízká lišta – nahoře značka s tagline a právní odkazy, pod nimi jeden drobný řádek údajů
provozovatele (povinná identifikace OSVČ) a verze. Na telefonu vše pod sebou na střed, od 768 px
značka vlevo a odkazy vpravo. */
.footer {
width: 100%;
padding: 0.9rem 0 1rem;
line-height: 1.45;
font-size: 0.8rem;
background-color: var(--bs-tertiary-bg);
margin-top: auto;
}
.footer .container {
padding-left: 1rem;
padding-right: 1rem;
}
.footer-top {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
text-align: center;
}
.footer-brand {
font-weight: 600;
color: var(--heading-color);
}
.footer-tagline::before {
content: "·";
margin: 0 0.4rem;
color: var(--footer-dim);
}
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.25rem 1rem;
}
.footer-links a {
color: var(--primary-text);
text-decoration: none;
}
.footer-links a:hover {
color: var(--primary-text-strong);
text-decoration: underline;
}
.footer-legal {
margin: 0.5rem 0 0;
font-size: 0.75rem;
color: var(--footer-muted);
text-align: center;
}
/* Na telefonu údaje a verze pod sebou (od 768 px je řádek flex a verze stojí vpravo). */
.footer-legal > span {
display: block;
}
/* Oddělovač mezi údaji provozovatele – mezery kolem tečky, na konci řádku se zalomí jako celek. */
.footer-legal .footer-sep {
margin: 0 0.4rem;
color: var(--footer-sep);
}
@media (min-width: 768px) {
.footer-top {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
.footer-legal {
display: flex;
justify-content: space-between;
gap: 1rem;
text-align: left;
}
}
/* Zalomení nazvu kategorie v seznamu kategorii a obsahu i pro extra dlouha slova
* Zalomeni nazvu diskuse v seznamu diskusi a obsahu i pro extra dlouha slova
* Zalomeni nazbu detailu diskuse a obsahu
*/
.long-word-break a,
.card-body p,
.long-word-break {
overflow-wrap: break-word !important;
word-break: normal !important;
hyphens: none !important;
overflow: hidden !important;
max-width: 100% !important;
}
/* Detail diskuse */
.text-editor-wrapper{
padding:15px 15px 0px 15px;
background-color:var(--bs-body-bg);
border:none;
border-radius: 0;
}
.text-editor-head {
background-color: var(--ultra-light-text-color) !important; /* linear-gradient(to bottom, var(--light-primary-color) 0%, var(--primary-color) 100%)*/
border: none;
color: var(--text-color);
border-radius: 0px !important;
}
/* Nadpis článku – stejně výrazný jako ostatní nadpisy (třída .h3 by jinak převzala šedou barvu hlavičky). */
.text-editor-title {
font-weight: 600 !important;
color: var(--heading-color);
}
.text-editor-head i {
color: var(--primary-text);
background-color: var(--bs-body-bg);
padding: 2px 4px;
border-radius: 999px;
}
.text-editor-head span, .text-editor-head a {
color: white;
}
.text-editor-head, .text-editor-footer {
background-color: var(--tertiary-color);
position: relative;
}
.seznam-diskusi-title-text {
color: var(--primary-text);
font-weight: bold;
}
.text-editor-title {
padding: 5px;
margin-bottom: 10px !important;
}
#comments-list .card {
padding-left: 10px;
padding-right: 10px;
}
.text-editor-footer{
justify-content: space-between;
}
.btn, .pocetZobrazeni {
width: auto;
height: var(--btn-height);
}
.like-btn-disable, .like-btn[disabled] {
color: var(--text-color);
}
.like-btn-disable i::before {
color: var(--text-color);
}
.reply-button {
border: 1.5px solid var(--primary-color);
color: var(--primary-text);
margin-bottom: 0.5rem;
border-radius: var(--btn-border-radius);
background-color: var(--bs-body-bg);
}
.reply-button:hover {
color: white;
background-color: var(--primary-color);
border: 1.5px solid var(--primary-color);
}
/* Stranka registrace */
/* Honeypot na registraci: pole musí zůstat ve stránce a odesílat se, ale nesmí být vidět
ani dosažitelné. Odsunutí mimo viewport (ne display:none) – část automatů skrytá pole přeskakuje. */
.honeypot-field {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Pole pro heslo s „očičkem" (Components/Shared/PasswordToggle.razor + js/password-toggle.js):
tlačítko leží uvnitř pole u pravého okraje, text pole pod něj nezajede. */
.password-field {
position: relative;
}
.password-field > .form-control {
padding-right: 2.75rem;
}
/* Edge kreslí do pole pro heslo vlastní tlačítko zobrazení – vedle našeho by byla dvě. */
.password-field > input::-ms-reveal,
.password-field > input::-ms-clear {
display: none;
}
.password-toggle {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 2.75rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
background: transparent;
color: var(--bs-secondary-color);
font-size: 1.1rem;
line-height: 1;
}
.password-toggle:hover {
color: var(--bs-body-color);
}
.password-toggle:focus-visible {
outline: 2px solid var(--primary-color);
outline-offset: -2px;
}
.register-wrapper, .login-wrapper, .create-disscussion-wrapper {
width: 95%;
max-width: 750px;
margin: 10vh auto;
padding: 20px;
background-color: var(--bs-body-bg);
backdrop-filter: blur(5px); /* Rozmazání pozadí */
-webkit-backdrop-filter: blur(5px); /* Pro Safari podporu */
border-radius: 15px;
}
dialog h5 {
margin-left: 16px;
}
.btn-close:focus {
border: none;
outline: none;
box-shadow: none;
}
/* Vyhledání uživatele + pozvánka e-mailem v řádku Přátelé (Můj účet): mřížka pole | tlačítko. Sloupec tlačítek je
pro oba řádky stejně široký (nejdelší popisek) a končí u pravého okraje jako tlačítka Odebrat v seznamu pod ním;
výška tlačítek = globální --btn-height = výška polí i tlačítek kontaktů. Hlášky zabírají celou šířku. */
.vyhledat-uzivatele {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(5.5rem, max-content);
gap: 0.5rem 0.75rem;
align-items: center;
/* Stejné vodorovné odsazení jako řádek kontaktu (.contact-row má 4 px) – tlačítka pak končí přesně nad Odebrat. */
padding: 0 4px 0.75rem;
margin-bottom: 0.75rem;
border-bottom: 1px solid var(--bs-border-color-translucent);
}
.vyhledat-uzivatele > .btn {
width: 100%;
white-space: nowrap;
}
.vyhledat-uzivatele > .vyhledat-full {
grid-column: 1 / -1;
}
.bg-info {
background-color: var(--light-primary-color) !important;
}
/* Seznam kontaktů (komponenta ContactRow – přátelé a blokace v Mém účtu, přátelé na profilu): vlevo avatar,
jméno a pod ním stav, vpravo akce. Řádek je flex se zalomením a jméno má základ v plné délce (flex-basis
auto), takže se nikdy nemačká: když se akce vedle celého jména nevejdou, přejdou pod něj doprava. Uprostřed
slova se jméno zalomí, jen když je delší než celý řádek; štítek stavu s delším překladem se zalomí. */
.contact-list {
list-style: none;
margin: 0;
padding: 0;
}
.contact-row {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 0.75rem;
row-gap: 0.4rem;
padding: 0.5rem 0.25rem;
border-bottom: 1px solid var(--bs-border-color);
}
.contact-row:last-child {
border-bottom: none;
}
@media (hover: hover) {
.contact-row:hover {
background-color: rgb(var(--shade-rgb) / 0.03);
}
}
.contact-identity {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
}
.contact-row--muted .contact-identity {
color: var(--bs-secondary-color);
}
.contact-text {
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.15rem;
line-height: 1.3;
}
.contact-name {
overflow-wrap: anywhere;
}
.contact-status .badge {
white-space: normal;
text-align: left;
}
.contact-actions {
flex: 0 1 auto;
min-width: 0;
margin-left: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0.35rem;
}
.contact-actions:empty {
display: none;
}
/* Globální .btn má pevnou výšku – tlačítko s delším (zalomeným) popiskem by text nalepilo na okraj. */
.contact-actions .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3em;
height: auto;
min-height: var(--btn-height);
margin: 0;
white-space: normal;
line-height: 1.25;
text-align: center;
}
#user-discussions {
max-height: 250px;
overflow-y: scroll;
}
/* Bez backdrop-filter: vytváří obal pro position:fixed a přilepená lišta editoru by při posunu článku ujela. */
.create-disscussion-wrapper {
max-width: 1400px;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.create-disscussion-wrapper form{
width: 100%;
}
.register-btn-wrapper, .create-discusssion-btn-wrapper {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 10px;
}
.register-btn-wrapper button, .create-discussion-btn{
width: 60%;
max-width: 500px;
}
.create-discussion-back-wrapper{
display: flex;
align-items: center;
}
.register-btn-wrapper a {
width: 40%;
}
/* Styly pro tablet a větší obrazovky (≥576px) */
@media (min-width: 576px) {
/* Tlačítka na širších obrazovkách */
.btn, .pocetZobrazeni, like-btn-disable, like-btn {
margin-bottom: 0;
}
/* Navigace pro tablet */
.navbar-nav .nav-link {
font-size: 0.9rem;
}
#friendship-badge {
left: 30px;
}
}
/* Styly pro větší tablety a menší notebooky (≥768px) */
@media (min-width: 768px) {
html {
font-size: 16px;
}
/* Nadpisy */
h1 {
font-size: 2rem;
}
li.account-icon-text{
height: 44.8px;
}
.navbar-toggler {
top: 2.3rem;
}
/* Logo */
.logo-container img {
width: 150px !important;
}
#friendship-badge {
left: 35px;
}
}
/* Styly pro velké desktopy (≥1200px) */
@media (min-width: 1200px) {
.logo-container {
width: auto;
}
/* Lišta: všechny položky na jedné vodorovné ose (žádné ruční posuny nahoru/dolů). */
.navbar-collapse {
flex-direction: row; /* Na desktopu řadí položky vedle sebe */
align-items: center;
background-color: transparent;
border: 0;
box-shadow: none;
border-radius: 0;
padding: 0;
}
.navbar-nav {
padding: 0;
align-items: center;
}
.menu-right-section{
justify-content: end;
padding: 0px;
border-top: 0;
margin-top: 0;
}
.menu-right-section .nav-item{
width: auto;
}
/* Ikonové položky (zprávy, zvoneček, účet) mají stejnou „pilulku“ jako textové – odsazení nese odkaz,
ikona sama žádné; odznaky jsou pak vůči ikoně všude ve stejné poloze. */
#notificationsDropdown {
width: auto;
}
#notification-bell, #user-icon, #messages-icon, #people-icon {
margin-left: 0px;
padding: 0;
}
li.account-icon-text {
height: auto;
max-height: none;
}
/* Obsah ikonových položek (lidé, obálka, zvoneček i účet) je vystředěný flexem – ikona tak sedí ve stejné
výšce jako text sousedních položek; vertical-align ikony se v řádkovém toku projevoval posunem o ~1 px dolů. */
.menu-right-section .nav-link > .menu-icon-wrapper {
display: flex;
align-items: center;
}
.nav-icon-label {
display: none;
}
.odhlasit-menu {
margin-bottom: 0px !important;
}
.nav-item{
text-align: center;
}
.nav-link{
white-space: nowrap;
}
/* Odznaky sedí na pravém horním rohu ikony (ikona ~19 px, translate-middle je vystředí na bod). */
#messages-badge, #notification-badge, #friendship-badge {
left: 20px !important;
}
.navbar-nav.flex-grow-1 {
order: 1; /* Levé menu bude první */
padding-top: 0px;
}
.navbar-expand-xl {
justify-content: center;
}
.navbar-expand-xl > .container{
margin: 0px;
width: 100%;
}
.fulltextForm {
order: 2; /* Formulář bude druhý */
flex: 1 1 auto; /* využije volné místo v liště, ale smí se i smrštit */
min-width: 0; /* KLÍČOVÉ: bez toho by se lišta nemohla zúžit a přetékala by (scroll do stran) */
max-width: 520px;
padding: 0 24px; /* menší odsazení než v hamburger menu – víc místa pro pole (u admina je lišta plná) */
}
/* Vyhledávací pole v horní liště využije volné místo, a když je ho málo, plynule se zúží (nikdy nepřeteče).
Pod 1200px se celé menu i s hledáním skládá do hamburgeru (Bootstrap collapse). */
.fulltextForm .fulltextFormInput {
flex: 1 1 auto;
min-width: 0;
}
/* Položky menu k sobě přiblížíme, ať zbyde prostor pro vyhledávání
a lišta se nemusí scrollovat do stran. */
.navbar-nav .nav-link {
padding-left: 0.7rem;
padding-right: 0.7rem;
}
.navbar-nav:last-child {
order: 3; /* Pravé menu zůstává třetí */
}
.card-diskuse {
width: 100%;
max-width: 100%;
}
#discussions-list {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 5px;
}
}
/* Krátké zvýraznění komentáře, na který se doscrollovalo z notifikace „Aktivity" (anchor-scroll.js). */
.activity-target-highlight {
animation: activity-target-fade 2.6s ease-out;
}
@keyframes activity-target-fade {
0% { background-color: rgba(255, 214, 0, 0.55); }
100% { background-color: transparent; }
}
/* Kolečko s profilovou fotkou (avatarem) / iniciálami – sdílená komponenta UserAvatar
(levý panel Zpráv, profil uživatele, Můj účet). Rozměr a barvu dodává komponenta inline. */
.user-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #fff;
font-weight: 600;
overflow: hidden;
flex-shrink: 0;
vertical-align: middle;
user-select: none;
}
.user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Odkaz na profil s avatarem před jménem (komponenta UserLink) – autor diskuze, komentáře apod. */
.user-link {
display: inline-flex;
align-items: center;
gap: 0.3em;
vertical-align: middle;
max-width: 100%;
}
/* Jméno přebírá barvu odkazu – i tam, kde obecné pravidlo barví všechny (hlavička diskuze). */
.user-link .user-link-name {
color: inherit;
overflow-wrap: anywhere;
}
/* Úvodní stránka: automatické rozložení tabulky dávalo na telefonu sloupci autora jen ~45 px na jméno
a běžné přezdívky se lámaly uprostřed (Toma|sH). Minimální šířka sloupce je udrží celé; názvy diskuzí
a kategorií se zalomí po slovech a tabulka se na 320 px pořád vejde. */
.home-feed-table td:first-child {
min-width: 8.5rem;
}
/* Anonymní autor komentáře – neklikací náhrada odkazu na profil s neutrálním kolečkem. */
.user-avatar-anonymous {
background-color: #8d939b;
}
/* Značka anonymního komentáře vedle přezdívky (vidí ji jen administrátor a autor). */
.comment-anonymous-badge {
margin-left: 0.3em;
cursor: help;
}
/* Zaškrtávátko „Zveřejnit anonymně“ pod formulářem komentáře a reakce. */
.comment-anonymous-check {
margin-top: 0.25rem;
}
/* Rámeček upoutávky na mobilní aplikaci nad obsahem úvodního článku (komponenta MobileAppPromo). */
.app-promo-article {
border: 1px solid var(--secondary-color);
border-radius: 8px;
background: var(--light-primary-color-ultra-light);
padding: 16px;
}
.app-promo-article h2 {
color: var(--primary-text);
}
/* Cookie lišta (opt-in souhlas pro Google tag; právní minimum provozovatele).
Fixní lišta u spodního okraje přes celou šířku; nad Blazor error UI nižší z-index netřeba řešit
(error UI je display:none, dokud nenastane chyba). Mobile-first: text nad tlačítky, na širších
displejích vedle sebe díky flex-wrap. */
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 2000;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 16px;
padding: 10px 16px;
background: var(--cookie-bg);
border-top: 1px solid var(--cookie-border);
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
font-size: 0.9rem;
}
.cookie-banner-text {
max-width: 720px;
}
.cookie-banner-buttons {
display: flex;
gap: 8px;
}
/* ==========================================================================================
Hlasovací anketa (PollCard / PollEditor) – sdílená karta pod diskuzí i v chatu. Mobile-first:
text varianty a progress bar jsou pod sebou, hlasující jako řádek malých avatarů (klik = jména).
Vzhled záměrně odpovídá kartě v MAUI appce. */
.poll-card {
border: 1px solid var(--poll-border);
border-radius: 14px;
background: var(--bs-body-bg);
padding: 12px 14px;
max-width: 520px;
color: var(--bs-body-color);
font-size: 0.95rem;
}
.message .poll-card {
max-width: 100%;
min-width: min(300px, 78vw);
margin: 2px 0;
}
.poll-closed {
background: var(--poll-closed-bg);
}
.poll-head {
display: flex;
align-items: flex-start;
gap: 8px;
}
.poll-icon {
font-size: 1.15rem;
line-height: 1.3;
}
.poll-question {
flex: 1 1 auto;
font-weight: 600;
line-height: 1.3;
overflow-wrap: anywhere;
}
.poll-menu-wrap {
position: relative;
flex-shrink: 0;
}
.poll-menu-btn {
border: none;
background: transparent;
color: var(--muted-text);
padding: 0 4px;
line-height: 1;
font-size: 1.1rem;
cursor: pointer;
}
.poll-menu-btn:hover {
color: var(--primary-text);
}
.poll-menu {
position: absolute;
right: 0;
top: 100%;
z-index: 20;
background: var(--bs-body-bg);
border: 1px solid var(--poll-border);
border-radius: 10px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
min-width: 190px;
padding: 4px 0;
}
.poll-menu button {
display: block;
width: 100%;
text-align: left;
border: none;
background: transparent;
padding: 8px 14px;
font-size: 0.9rem;
cursor: pointer;
}
.poll-menu button:hover {
background: var(--secondary-color);
}
.poll-menu button.danger {
color: var(--poll-danger-text);
}
.poll-status {
margin: 6px 0 10px 0;
font-size: 0.8rem;
color: var(--muted-text);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.poll-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 10px;
font-weight: 600;
}
.poll-badge.open {
background: var(--poll-open-bg);
color: var(--poll-open-text);
}
.poll-badge.closed {
background: var(--poll-closed-badge-bg);
color: var(--poll-closed-badge-text);
}
/* Odznak ankety, ve které smí hlasující označit několik variant. */
.poll-badge.multi {
background: var(--poll-multi-bg);
color: var(--poll-multi-text);
}
.poll-confirm {
background: var(--poll-confirm-bg);
border: 1px solid var(--poll-confirm-border);
border-radius: 10px;
padding: 8px 10px;
margin-bottom: 10px;
font-size: 0.85rem;
}
.poll-confirm-actions {
display: flex;
gap: 6px;
margin-top: 6px;
}
.poll-options {
display: flex;
flex-direction: column;
gap: 8px;
}
.poll-option {
border: 1px solid var(--poll-option-border);
border-radius: 10px;
padding: 8px 10px;
transition: border-color .15s, background-color .15s;
}
.poll-option.votable {
cursor: pointer;
}
.poll-option.votable:hover {
border-color: var(--primary-color);
background: var(--poll-option-hover-bg);
}
.poll-option.mine {
border-color: var(--primary-color);
background: var(--poll-option-mine-bg);
}
.poll-option.winner {
border-color: #e0b400;
background: var(--poll-winner-bg);
}
.poll-option-row {
display: flex;
align-items: center;
gap: 8px;
}
.poll-radio {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid var(--muted-text-light);
flex-shrink: 0;
position: relative;
}
.poll-closed .poll-radio {
opacity: 0.5;
}
.poll-radio.checked {
border-color: var(--primary-color);
}
.poll-radio.checked::after {
content: "";
position: absolute;
inset: 2px;
border-radius: 50%;
background: var(--primary-color);
}
/* Anketa s více hlasy: místo kolečka zaškrtávátko. */
.poll-radio.square {
border-radius: 4px;
}
.poll-radio.square.checked::after {
inset: 2px;
border-radius: 2px;
}
.poll-option-text {
flex: 1 1 auto;
overflow-wrap: anywhere;
line-height: 1.3;
}
.poll-trophy {
flex-shrink: 0;
}
.poll-option-count {
flex-shrink: 0;
font-size: 0.8rem;
color: var(--poll-muted-text);
white-space: nowrap;
}
.poll-bar {
height: 8px;
border-radius: 4px;
background: var(--poll-bar-bg);
overflow: hidden;
margin-top: 6px;
}
.poll-bar-fill {
height: 100%;
border-radius: 4px;
background: var(--primary-color);
transition: width .4s ease;
}
.poll-option.winner .poll-bar-fill {
background: #e0b400;
}
.poll-voters {
margin-top: 6px;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
cursor: pointer;
font-size: 0.75rem;
color: var(--poll-muted-text);
}
.poll-avatars {
display: inline-flex;
}
.poll-avatars .poll-avatar {
margin-left: -6px;
border: 2px solid var(--bs-body-bg);
box-shadow: 0 0 0 1px var(--poll-border);
font-size: 9px !important;
}
.poll-avatars .poll-avatar:first-child {
margin-left: 0;
}
.poll-more {
font-weight: 600;
}
.poll-voters-hint {
text-decoration: underline dotted;
}
.poll-voter-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
width: 100%;
}
.poll-voter-list li {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--bs-body-color);
}
.poll-foot {
margin-top: 10px;
font-size: 0.78rem;
color: var(--muted-text);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.poll-link {
border: none;
background: transparent;
padding: 0;
color: var(--primary-text);
font-size: inherit;
cursor: pointer;
text-decoration: underline;
}
.poll-link:disabled {
opacity: 0.6;
cursor: default;
}
/* Editor ankety */
.poll-editor-label {
display: block;
font-size: 0.8rem;
font-weight: 600;
color: var(--strong-muted-text);
margin: 8px 0 4px 0;
}
.poll-editor-counter {
text-align: right;
font-size: 0.72rem;
color: var(--muted-text-light);
}
.poll-editor-option {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
}
.poll-editor-remove {
border: none;
background: transparent;
color: var(--muted-text-light);
padding: 4px;
cursor: pointer;
}
.poll-editor-remove:hover:not(:disabled) {
color: var(--poll-danger-text);
}
.poll-editor-remove:disabled {
opacity: 0.35;
cursor: default;
}
.poll-editor-add {
margin-top: 2px;
font-size: 0.85rem;
text-decoration: none;
}
/* Volba režimu hlasování v editoru nové ankety (jeden hlas / více hlasů). */
.poll-editor-mode {
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: center;
font-size: 0.85rem;
}
.poll-editor-mode label {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
margin: 0;
}
.poll-editor-hint {
font-size: 0.75rem;
color: var(--poll-hint-text);
margin-top: 6px;
}
/* Neutrální vysvětlivka (ne varování) – např. popis režimu hlasování. */
.poll-editor-hint.neutral {
color: var(--muted-text);
}
.poll-editor-actions {
display: flex;
justify-content: flex-end;
gap: 6px;
margin-top: 10px;
}
/* Veřejná stránka s popisem kreditů – úzký čtecí sloupec. */
.credits-page {
max-width: 820px;
margin: 0 auto;
}
.credits-page h2 {
font-size: 1.25rem;
margin-top: 1.75rem;
}
.credits-page-legal {
margin-top: 2rem;
font-size: 0.9rem;
}
/* Sdílený editor pořadí (CategoryOrderEditor): položka = úchyt | obsah | šipky ▲▼. Přetahovaná položka je
průhlednější, cíl pustění má modrou horní čáru. */
.category-order-list {
list-style: none;
margin: 0;
padding: 0;
}
.category-order-item {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px;
margin-bottom: 4px;
border: 1px solid var(--bs-border-color);
border-radius: 6px;
background-color: var(--bs-body-bg);
cursor: grab;
}
.category-order-item.is-dragging {
opacity: 0.5;
}
.category-order-item.is-over {
border-top: 3px solid var(--primary-color, #3A7CD5);
}
.category-order-handle {
flex: 0 0 auto;
color: var(--muted-text);
}
.category-order-content {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
overflow-wrap: anywhere;
}
.category-order-content img {
flex: 0 0 auto;
border-radius: 50%;
}
.category-order-arrows {
display: flex;
gap: 4px;
flex: 0 0 auto;
}
.category-order-arrows .btn {
height: auto;
min-height: 32px;
min-width: 36px;
padding: 2px 8px;
}
/* ---------- Sekce Přílohy diskuze (DISC-163) – řádky příloh sdílí styly .group-file-* z Messages.css ---------- */
.discussion-files .discussion-files-head .alert {
margin: 0.5rem 0 0;
padding: 0.25rem 2rem 0.25rem 0.5rem;
font-size: 0.85rem;
}
/* Křížek Bootstrapu má vlastní odsazení 1,25 rem – u nízké hlášky by vyčníval pod ni. */
.discussion-files .discussion-files-head .alert .btn-close {
padding: 0.5rem;
}
.discussion-files-list {
margin: 0;
padding: 0.25rem 0.9rem;
list-style: none;
}
.discussion-files-list li {
display: block;
padding: 0;
border-bottom: 1px solid rgb(var(--shade-rgb) / 0.05);
}
.discussion-files-list li:last-child {
border-bottom: 0;
}
/* Vnořené formuláře (přejmenování, hlášení) mají stejné odsazení jako lišta akcí. */
.discussion-files-inline {
margin: 0 0.25rem;
}
/* Sekce je širší než panel v chatu (karta článku), tabulkový řádek proto už od 576 px. */
@media (min-width: 576px) and (max-width: 767.98px) {
.discussion-files .group-file-row {
grid-template-columns: 32px minmax(0, 1fr) 96px 130px;
grid-template-areas:
"icon name added expires"
"icon note added expires"
"icon meta added expires";
align-items: center;
}
.discussion-files .group-link-row {
grid-template-columns: 32px minmax(0, 1fr) 96px;
grid-template-areas:
"icon name added"
"icon host added"
"icon note added"
"icon meta added";
}
.discussion-files .group-file-dates {
display: contents;
}
.discussion-files .group-file-added {
grid-area: added;
font-size: 0.8rem;
color: var(--muted-text);
}
.discussion-files .group-file-expires {
grid-area: expires;
font-size: 0.8rem;
}
}
/* ===== Seznamte se (/People) a údaje pro seznamování ===== */
.discover-filter-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
/* Na telefonu jazyk a pohlaví přes celou šířku, věk od – do vedle sebe. */
.discover-filter-grid > :first-child,
.discover-filter-grid > :last-child {
grid-column: 1 / -1;
}
@media (min-width: 768px) {
.discover-filter-grid {
grid-template-columns: 2fr 1fr 1fr 1.4fr;
}
.discover-filter-grid > :first-child,
.discover-filter-grid > :last-child {
grid-column: auto;
}
}
.discover-btn {
height: auto;
min-height: var(--btn-height, 38px);
white-space: normal;
}
.discover-hint {
display: block;
}
.discover-hint-link {
text-decoration: none;
color: var(--bs-alert-color);
}
.discover-hint-link:hover .alert-link {
text-decoration: underline;
}
.discover-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
}
@media (min-width: 576px) {
.discover-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
.discover-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Oddělovač plných a částečných shod – přes celou šířku mřížky. */
.discover-partial-divider {
grid-column: 1 / -1;
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--bs-border-color);
}
.discover-partial-divider:first-child {
margin-top: 0;
}
.discover-partial-title {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
color: var(--heading-color, inherit);
}
.discover-partial-hint {
margin: 0.125rem 0 0;
font-size: 0.85rem;
color: var(--bs-secondary-color);
}
.discover-card {
display: flex;
flex-direction: column;
gap: 0.5rem;
min-width: 0;
padding: 0.75rem;
border: 1px solid var(--bs-border-color);
border-radius: 0.75rem;
background: var(--bs-body-bg);
}
.discover-card-head {
display: flex;
align-items: center;
gap: 0.6rem;
min-width: 0;
text-decoration: none;
color: inherit;
}
.discover-card-title {
display: flex;
flex-direction: column;
min-width: 0;
gap: 0.15rem;
}
.discover-card-name {
font-weight: 600;
overflow-wrap: anywhere;
}
.discover-card-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4rem;
font-size: 0.875rem;
color: var(--bs-secondary-color);
}
.discover-flag {
width: 18px;
height: 13px;
border-radius: 2px;
flex: 0 0 auto;
}
.discover-card-about {
margin: 0;
font-size: 0.95rem;
overflow-wrap: anywhere;
}
.discover-card-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
margin-top: auto;
}
.discover-card-foot .badge {
white-space: normal;
text-align: left;
}
/* Profil: řádek věk/pohlaví a text O sobě – i 100 znaků bez mezer se zalomí uvnitř karty. */
.profile-about {
overflow-wrap: anywhere;
white-space: pre-wrap;
}
/* Zpráva u příchozí žádosti o přátelství (Můj účet) – celý text, zalomený ve sloupci jména. */
.contact-request-msg {
display: block;
font-size: 0.875rem;
color: var(--bs-body-color);
overflow-wrap: anywhere;
white-space: pre-wrap;
max-width: 100%;
}
/* Formulář údajů pro seznamování (Můj účet, registrace). */
.meet-form-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
}
@media (min-width: 576px) {
.meet-form-grid { grid-template-columns: 1fr 1fr; }
}
.meet-form-grid .meet-form-full { grid-column: 1 / -1; }
.meet-counter {
font-size: 0.8rem;
color: var(--bs-secondary-color);
text-align: right;
}
/* Zpráva k žádosti o přátelství na profilu. */
.friend-request-panel textarea {
resize: vertical;
min-height: 4.5rem;
}
/* Profil – sekce Správa účtu (jen admin): popisek | hodnota, na telefonu pod sebou. */
.profile-admin-details {
display: grid;
grid-template-columns: 1fr;
gap: 0 1rem;
}
.profile-admin-details dt {
font-weight: 600;
}
.profile-admin-details dd {
margin-bottom: 0.5rem;
overflow-wrap: anywhere;
}
@media (min-width: 576px) {
.profile-admin-details {
grid-template-columns: auto 1fr;
}
.profile-admin-details dd {
margin-bottom: 0.25rem;
}
}
/* ===== Stránky Můj účet a Profil uživatele – sekce nastavení jako v mobilní aplikaci =====
Šířku dává jedno pravidlo .container (jako ostatní stránky). Hlavička účtu přes celou šířku, pod ní od 992 px
dva sloupce (vlevo nastavení, vpravo moje aktivita). Karta sekce (.settings-card) = bílý podklad, zaoblení a jemný
stín jako hamburger menu a popover aktivit; řádky (.settings-row) oddělené linkou, hlavička řádku = tlačítko
s názvem, odznakem, hodnotou vpravo a šipkou. Barvy jen přes proměnné Bootstrapu (--bs-*), aby fungoval tmavý
vzhled (data-bs-theme na ). */
.account-page {
padding-top: 1rem;
}
.account-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.25rem;
margin-top: 1.25rem;
}
@media (min-width: 992px) {
/* Levý sloupec (nastavení) užší, pravý (seznamy přátel, aktivit a transakcí) širší. */
.account-grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: start;
}
}
.account-col {
display: flex;
flex-direction: column;
gap: 1.25rem;
min-width: 0;
}
.settings-section-title {
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bs-secondary-color);
margin: 0 0 0.5rem 0.25rem;
display: flex;
align-items: center;
gap: 0.4rem;
}
.settings-section-title .bi {
color: var(--primary-text);
font-size: 1rem;
}
.settings-card {
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
overflow: hidden;
}
.settings-row + .settings-row,
.settings-row-link + .settings-row,
.settings-row-link + .settings-row-link,
.settings-row + .settings-row-link {
border-top: 1px solid var(--bs-border-color-translucent);
}
/* Hlavička řádku = celé tlačítko (bez vlastního rámečku), odkaz (.settings-row-link) vypadá stejně. */
.settings-row-head,
.settings-row-link {
display: flex;
align-items: center;
gap: 0.6rem;
width: 100%;
padding: 0.8rem 1rem;
background: none;
border: 0;
color: var(--bs-body-color);
text-align: left;
text-decoration: none;
min-height: 3.1rem;
}
.settings-row-head:hover,
.settings-row-link:hover {
background-color: var(--bs-tertiary-bg);
color: var(--bs-body-color);
}
.settings-row-head:focus-visible,
.settings-row-link:focus-visible {
outline: 2px solid var(--primary-color);
outline-offset: -2px;
}
.settings-row-icon {
color: var(--primary-text);
font-size: 1.1rem;
line-height: 1;
}
.settings-row-title {
font-weight: 600;
flex: 0 1 auto;
min-width: 0;
}
.settings-row-badge {
display: inline-flex;
align-items: center;
}
/* Hodnota vpravo: zabere zbytek řádku, dlouhý e-mail se ořízne třemi tečkami. */
.settings-row-value {
margin-left: auto;
color: var(--bs-secondary-color);
text-align: right;
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 0.35rem;
}
.settings-row-chevron {
color: var(--bs-secondary-color);
flex: 0 0 auto;
transition: transform 0.2s ease;
}
/* Když řádek nemá hodnotu, šipku doprava posune odznak / název (flex-grow). */
.settings-row-head > .settings-row-chevron:last-child,
.settings-row-link > .settings-row-chevron:last-child {
margin-left: auto;
}
.settings-row-value + .settings-row-chevron {
margin-left: 0;
}
.settings-row.is-open .settings-row-chevron {
transform: rotate(180deg);
}
.settings-row.is-open > .settings-row-head {
background-color: var(--bs-tertiary-bg);
}
.settings-row--danger .settings-row-title,
.settings-row--danger .settings-row-icon {
color: var(--danger-text);
}
.settings-row-body {
padding: 0.9rem 1rem 1rem;
}
.settings-row-body > :last-child {
margin-bottom: 0;
}
/* Hlavička účtu: fotka (tlačítko s tužkou), jméno + VIP, e-mail, údaje, vpravo Odhlásit se. */
.account-hero {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.25rem;
padding: 1.25rem;
}
.account-hero-avatar {
position: relative;
background: none;
border: 0;
padding: 0;
border-radius: 50%;
flex: 0 0 auto;
line-height: 0;
}
.account-hero-avatar:focus-visible {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.account-hero-avatar-edit {
position: absolute;
right: -2px;
bottom: -2px;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--primary-color);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
line-height: 1;
border: 2px solid var(--bs-body-bg);
}
.account-hero-avatar:hover .account-hero-avatar-edit {
background-color: var(--primary-color-hover);
}
.account-hero-main {
flex: 1 1 240px;
min-width: 0;
}
.account-hero-name {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.account-hero-nickname {
font-size: 1.5rem;
font-weight: 600;
color: var(--heading-color);
overflow-wrap: anywhere;
}
.account-vip-badge {
background: linear-gradient(135deg, #f6c442, #e0962a);
color: #3a2a05;
font-weight: 700;
letter-spacing: 0.04em;
}
.account-hero-email {
color: var(--bs-secondary-color);
overflow-wrap: anywhere;
}
.account-hero-meta {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
margin-top: 0.4rem;
font-size: 0.85rem;
color: var(--bs-secondary-color);
}
.account-hero-meta .bi {
margin-right: 0.2rem;
}
.account-hero-actions {
flex: 0 0 auto;
margin-left: auto;
}
@media (max-width: 575.98px) {
.account-hero {
justify-content: center;
text-align: center;
}
.account-hero-main {
flex-basis: 100%;
}
.account-hero-name,
.account-hero-meta {
justify-content: center;
}
.account-hero-actions {
margin-left: 0;
width: 100%;
}
.account-hero-actions .btn {
width: 100%;
}
}
/* Profil uživatele: hlavička vystředěná (jméno, fotka, O sobě, akce). */
.profile-hero {
padding: 1.25rem 1rem 1rem;
}
.profile-hero .account-hero-meta {
justify-content: center;
margin-top: 0.75rem;
}
/* Volby jazyka a vzhledu: mřížka „čipů" – každý je formulář s tlačítkem (POST bez JavaScriptu). */
.account-choice-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0.5rem;
}
.account-choice-grid--two {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 360px;
}
.account-choice-grid form {
display: contents;
}
.account-choice {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid var(--bs-border-color);
border-radius: 10px;
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
text-align: left;
line-height: 1.2;
}
.account-choice:hover {
border-color: var(--primary-color);
background-color: var(--nav-hover-bg);
}
.account-choice.is-active {
border-color: var(--primary-color);
background-color: var(--nav-active-bg);
font-weight: 600;
}
.account-choice .lang-flag,
.settings-row-value .lang-flag {
width: 22px;
height: 16px;
object-fit: cover;
border-radius: 2px;
flex: 0 0 auto;
}
.account-choice .bi {
font-size: 1.1rem;
color: var(--primary-text);
}
/* Peněženka: zůstatek a vnořený panel Poslat kredity. */
.account-wallet-balance {
font-size: 1.25rem;
font-weight: 600;
color: var(--heading-color);
}
.account-subpanel {
border: 1px solid var(--bs-border-color);
border-radius: 10px;
padding: 0.9rem 1rem;
background-color: var(--bs-tertiary-bg);
}
/* ===== Tmavý vzhled – prvky s pevnou barvou z Bootstrapu a vložené obrázky =====
Bootstrap 5.3 v tmavém vzhledu přepíná podklady a rámečky, ale ne barvy utilit a tlačítek (.text-danger,
.btn-outline-secondary … zůstávají sytě tmavé a na tmavém podkladu nemají kontrast 4,5 : 1) – berou proto
jeho světlejší odstíny „emphasis“. Ve světlém vzhledu se nic z tohoto bloku neuplatní. */
html[data-bs-theme="dark"] .text-danger {
color: var(--bs-danger-text-emphasis) !important;
}
html[data-bs-theme="dark"] .text-success {
color: var(--bs-success-text-emphasis) !important;
}
html[data-bs-theme="dark"] .text-primary {
color: var(--primary-text) !important;
}
html[data-bs-theme="dark"] .text-secondary {
color: var(--bs-secondary-color) !important;
}
html[data-bs-theme="dark"] .btn-outline-secondary {
--bs-btn-color: #adb5bd;
--bs-btn-border-color: #6c757d;
--bs-btn-disabled-color: #adb5bd;
}
html[data-bs-theme="dark"] .btn-outline-danger {
--bs-btn-color: #ea868f;
--bs-btn-disabled-color: #ea868f;
}
html[data-bs-theme="dark"] .btn-outline-success {
--bs-btn-color: #75b798;
--bs-btn-disabled-color: #75b798;
}
/* .btn-light (tlačítko výběru emoji) je v Bootstrapu světlé v obou vzhledech. */
html[data-bs-theme="dark"] .btn-light {
--bs-btn-color: var(--bs-body-color);
--bs-btn-bg: var(--bs-tertiary-bg);
--bs-btn-border-color: var(--bs-border-color);
--bs-btn-hover-color: var(--bs-emphasis-color);
--bs-btn-hover-bg: var(--bs-secondary-bg);
--bs-btn-hover-border-color: var(--bs-border-color);
--bs-btn-active-color: var(--bs-emphasis-color);
--bs-btn-active-bg: var(--bs-secondary-bg);
--bs-btn-active-border-color: var(--bs-border-color);
}
/* Karta diskuze dostává při najetí myší .bg-white (DiscussionCard) – v tmavém o stupeň světlejší karta. */
html[data-bs-theme="dark"] .card-diskuse.bg-white {
background-color: var(--card-surface-hover) !important;
}
/* Vlajky s bílým pruhem (Česko, Polsko) potřebují na tmavém podkladu světlý obrys místo tmavého stínu. */
html[data-bs-theme="dark"] .lang-flag,
html[data-bs-theme="dark"] .discover-flag,
html[data-bs-theme="dark"] .announcement-flag,
html[data-bs-theme="dark"] .cell-lang-flag {
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}