MediaWiki:Citizen.css

/* Header na vrchu pre mobilné zariadenia */
@media screen and (max-width: 1129px) {
  /* Header hore */
  .citizen-header {
    bottom: unset !important;
    top: 0 !important;
  }

  /* Skryť header, ak je zapnutý vizuálny editor */
  .ve-active .citizen-header {
    display: none !important;
  }

  /* Oprava pozície menu so stránkami, nastavení stránky a menu používateľa */
  .citizen-header .citizen-menu__card {
    bottom: unset !important;
    top: 50px !important;
  }

  /* Oprava pozície menu notifikácií a oznámení */
  /*.mw-echo-ui-overlay .mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
    top: -961px !important;
  }*/

  /* Oprava pozície headera pri scrollovaní */
  .citizen-scroll--down .citizen-header {
    transform: translateY(-100%) !important;
  }

  /* Odstránenie medzere (okraja) pre akcie stránky */
  .page-actions {
    bottom: var(--space-xs) !important;
  }

  /* To isté, ale pre ToC */
  .citizen-toc {
    bottom: var(--space-xs) !important;
  }

  /* Odsadiť content od headeru */
  .citizen-body-container {
    padding-top: var(--header-size);
  }
}

/* Širšie menu akcií stránky */
@media screen {
  .page-actions .citizen-menu__card {
    width: 250px !important;
  }
}


/* Oprava klikania kontextového menu vo VisualEditore */
#bodyContent {
    z-index: 0 !important;
}

/* Skryť dátum poslednej úpravy */
/*
#citizen-sidebar-lastmod, #footer-info-lastmod {
    display: none !important;
}
*/


/* Oprava farby pozadia v niektorých formulároch */
.mw-specialCiteThisPage-bibliographic, .fieldBox {
    background-color: #7e7e7e14 !important;
}


/* Skryť možnosť zobrazenia zdroja pre neprihlásených používateľov, skryť informácie o copyrighte, skryť "upraviť zdroj" (vedľa nadpisu) */
#ca-viewsource, #footer-info-copyright, .mw-editsection {
    display: none;
}

/* Skryť "Upraviť zdroj", ak je k dispozícii Visual Editor */
#ca-ve-edit + #ca-edit {
    display: none;
}


/* Oprava farby pozadia v LaTeX editore matematických vzorcov (v tmavom režime je písmo čierne a nečitateľné) */
.ve-ui-mwLatexPage-symbol {
    background-color: lightgray;
}

/* Diagram editor */
#canvas .bjs-container {
    background-color: white !important;
}

#canvas .bjs-powered-by {
    display: none !important;
}

.mermaidEditPane .mermaidCodePane {
    background: transparent !important;
    float: unset;
    width: unset;
}

.gantt_cal_light {
    color: #6b6b6b !important;
}

.gantt_cal_light input, .gantt_cal_light textarea, .gantt_cal_light select {
    color: black !important;
}


/* Skryť informačné texty keď sa edituje stránka */
span.editHelp, #editpage-copywarn {
    display: none;
}

/* Oprava rôznych farieb pozadí */
.quiz .correction, .editOptions {
    color: unset !important;
    background: transparent !important;
}

/*
  Kvíz:
*/
/* Úprava odsadenia orámovania pre odpovede v kvíze */
.quiz .question .border {
    padding-left: 8px;
}

/* Úprava pre rámovanie políčok s výberom */
.quiz .question .check {
    outline-offset: 3px;
    margin-right: 0.5rem;
}

/* Úprava textu spätnej väzby v kvíze */
.quiz .object .correction {
    font-size: 11px;
    color: gold !important;
}

/* Úprava textu skóre */
p:has(> span.correction:only-child) {
    padding: 8px;
    text-align: center;
    font-weight: bold;
    color: goldenrod;
}

/* Oprava textu za doplňovacím polom v prehľade výsledku */
.quiz a.input {
    color: inherit !important;
}

/* Úprava tlačidiel odoslania */
input[type="submit"] {
    padding: 8px 10px;
}

/* Lepšia viditelnosť polí a tlačidiel pre odoslanie */
input[type="submit"], input[type="text"] {
    border: 1px solid gray !important;
}

/* Farba boldového textu v poznámkach */
#mw-content-text b, .ve-ce-annotation.ve-ce-boldAnnotation {
    color: goldenrod;
}

/* Skryť zobrazenie zdrojového kódu pre MathJax vo vizuálnom editore (vedľa renderovanej rovnice - zbytočne zaberá miesto) */
.ve-ce-mwLatexNode > span {
    display: none !important;
}

/* Odlíšenie MathJax rovnice od ostatného textu (vizuálny editor + režim čítania) */
/* Poznámka: ak je to v `a` elemente, nemeniť farbu pretože zmizne farba odkazu (visual clue že je to odkaz) */
.skin-citizen-dark .ve-ce-mwLatexNode > mrow:not(:is(a mrow)),
.skin-citizen-dark #mw-content-text .mwe-math-element:not(:is(a .mwe-math-element)) {
    color: lightgray;
}

/* To isté čo vyššie ale pre svetlú tému
(nepoužívať `.skin-citizen-light`, potom by sme nemali prípad pre `.skin-citizen-auto` (automatickú tému)) */
.ve-ce-mwLatexNode > mrow:not(:is(a mrow)),
#mw-content-text .mwe-math-element:not(:is(a .mwe-math-element)) {
    color: gray; /* tmavšie ako darkgray */
}

/* Pojmy v postrannom paneli */
.sidebar-pojem {
    position: absolute;
    font-size: 12px;
}

/* Odstránenie marginu pre paragrafy v pojmoch */
.sidebar-pojem p {
    margin: 0;
}

/* Pojmy – PC */
@media screen and (min-width: 1120px) {
    /* Odstrániť ToC sidebar na pravej strane */
    .citizen-body-container > .citizen-page-sidebar {
        display: none;
    }

    .sidebar-pojem {
        right: 2vw;
        width: 200px;
    }

    /* Posunúť pojmy doprava vo vizuálnom editore, aby neprekrývali text */
    .ve-active .sidebar-pojem {
        transform: translateX(300px);
    }
}

/* Pojmy – tablety a smartfóny */
@media screen and (max-width: 1119px) {
    /* Skryť pre mobilné zariadenia – pojmy sú príliš rušivé, treba to vymyslieť nejako inak */
    .sidebar-pojem {
        display: none !important;
    }

    /* CSS pre mobilné zariadenia – ak sú pojmy zobrazené: */
    .sidebar-pojem {
        right: 20px;
        display: inline-flex;
        gap: 8px;
        transform: translateY(-25px);
        min-width: 200px;
        max-width: 80vw;
        text-align: right;
        overflow-x: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* Posunúť pojem nižšie vo vizuálnom editore */
    .ve-active .sidebar-pojem {
      transform: translateY(-7px);
    }

    /* Urobiť miesto pre pojmy medzi paragrafmi v poznámkach (ktoré nie sú v pojmoch) */
    /*.mw-body-content p:not(.sidebar-pojem *),
    .mw-body-content ul:not(.sidebar-pojem *),
    .mw-body-content ol:not(.sidebar-pojem *),
    .mw-body-content .mw-heading {
        margin-bottom: 2rem;
    }/*
}