MediaWiki:Common.css: Różnice pomiędzy wersjami

Z Oświetleniowo
Przejdź do nawigacji Przejdź do wyszukiwania
Nie podano opisu zmian
Znacznik: Wycofane
Nie podano opisu zmian
Znacznik: Wycofane
Linia 7: Linia 7:
}
}


/* Prosty ciemny motyw przez odwrócenie kolorów */
/* Domyślny styl - tryb jasny */
html {
:root {
     filter: invert(1) hue-rotate(180deg) !important;
     --bg-color: #ffffff;
     background-color: white !important;
    --text-color: #000000;
     --border-color: #cccccc;
    --link-color: #0645ad;
    --link-visited: #0b0080;
    --header-bg: #f8f9fa;
    --table-bg: #f8f9fa;
    --input-bg: #ffffff;
    --button-bg: #f8f9fa;
}
}


/* Przywróć naturalne kolory obrazków */
/* Tryb ciemny */
img,
.dark-mode {
video,
    --bg-color: #1a1a1a;
iframe,
    --text-color: #ffffff;
.svg,
    --border-color: #666666;
.mw-logo-wordmark {
    --link-color: #66b3ff;
     filter: invert(1) hue-rotate(180deg) !important;
    --link-visited: #b366ff;
    --header-bg: #252525;
    --table-bg: #2d2d2d;
    --input-bg: #2d2d2d;
    --button-bg: #333333;
}
 
/* Styl przycisku przełączania */
#dark-mode-toggle {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 10000;
    background: var(--button-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 12px;
}
 
#dark-mode-toggle:hover {
    background: var(--link-color);
    color: white;
}
 
/* Zastosowanie zmiennych */
body,
#content,
.mw-body,
.mw-page-container {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}
 
h1, h2, h3, h4, h5, h6 {
    color: var(--text-color) !important;
}
 
a {
    color: var(--link-color) !important;
}
 
a:visited {
    color: var(--link-visited) !important;
}
 
table {
    background-color: var(--table-bg) !important;
    color: var(--text-color) !important;
}
 
th, td {
    background-color: var(--table-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}
 
input, textarea, select {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}
 
button, .mw-ui-button {
    background-color: var(--button-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}
 
#mw-navigation,
#mw-panel,
#p-logo,
.vector-menu-content,
.vector-menu-tabs {
     background-color: var(--header-bg) !important;
}
 
#footer {
    background-color: var(--header-bg) !important;
    color: var(--text-color) !important;
}
 
code, pre {
    background-color: var(--table-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}
}

Wersja z 22:19, 28 wrz 2025

/* Umieszczony tutaj kod CSS zostanie zastosowany we wszystkich skórkach */

/* Wyłącza klikalność banera WikidataPageBanner */
.wpb-topbanner a {
    pointer-events: none;
    cursor: default;
}

/* Domyślny styl - tryb jasny */
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --border-color: #cccccc;
    --link-color: #0645ad;
    --link-visited: #0b0080;
    --header-bg: #f8f9fa;
    --table-bg: #f8f9fa;
    --input-bg: #ffffff;
    --button-bg: #f8f9fa;
}

/* Tryb ciemny */
.dark-mode {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
    --border-color: #666666;
    --link-color: #66b3ff;
    --link-visited: #b366ff;
    --header-bg: #252525;
    --table-bg: #2d2d2d;
    --input-bg: #2d2d2d;
    --button-bg: #333333;
}

/* Styl przycisku przełączania */
#dark-mode-toggle {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 10000;
    background: var(--button-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 12px;
}

#dark-mode-toggle:hover {
    background: var(--link-color);
    color: white;
}

/* Zastosowanie zmiennych */
body,
#content,
.mw-body,
.mw-page-container {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-color) !important;
}

a {
    color: var(--link-color) !important;
}

a:visited {
    color: var(--link-visited) !important;
}

table {
    background-color: var(--table-bg) !important;
    color: var(--text-color) !important;
}

th, td {
    background-color: var(--table-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

input, textarea, select {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

button, .mw-ui-button {
    background-color: var(--button-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

#mw-navigation,
#mw-panel,
#p-logo,
.vector-menu-content,
.vector-menu-tabs {
    background-color: var(--header-bg) !important;
}

#footer {
    background-color: var(--header-bg) !important;
    color: var(--text-color) !important;
}

code, pre {
    background-color: var(--table-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}