Przejdź do zawartości

MediaWiki:Vector-2022.css: Różnice pomiędzy wersjami

Z Horyzont Zdarzeń
← poprzednia edycja
Nie podano opisu zmian
Nie podano opisu zmian
 
(Nie pokazano 24 pośrednich wersji utworzonych przez tego samego użytkownika)
Linia 1: Linia 1:
/* === Styl DarkVector dla Vector 2022 === */
/* ========================================================= */
/* ======================= SPIS SEKCJI ===================== */
/* ========================================================= */
/*
1. GLOBAL DARK VECTOR
2. LINKI
3. SIDEBAR
4. NAGŁÓWEK
5. WYSZUKIWARKA
6. FOOTER
7. FORMULARZE
8. NAGŁÓWKI TREŚCI
9. PASKI VECTOR
10. KOMUNIKATY
11. PRZYCISKI
12. WIKIEDITOR
13. SCROLL TOP BUTTON
14. KARTY / CARD GRID
15. NAV GRID
16. PORTALE
17. PNG FIX
18. MSCALENDAR
*/
/* ========================================================= */
/* ===================== KONIEC SPISU ====================== */
/* ========================================================= */
 
 
 
/* ========================================================= */
/* ================= GLOBAL DARK VECTOR START ============== */
/* ========================================================= */


/* --- Tło i tekst --- */
.skin-vector-2022,
.skin-vector-2022,
.skin-vector-2022 body {
.skin-vector-2022 body {
Linia 8: Linia 38:
}
}


/* --- Linki --- */
/* ========================================================= */
/* ================== GLOBAL DARK VECTOR END =============== */
/* ========================================================= */
 
 
 
/* ========================================================= */
/* ======================== LINKI START ==================== */
/* ========================================================= */
 
.skin-vector-2022 a {
.skin-vector-2022 a {
     color: #ffcc66 !important;
     color: #ffcc66 !important;
Linia 21: Linia 60:
}
}


/* --- Sidebar (lewe menu) --- */
/* ========================================================= */
/* ========================= LINKI END ===================== */
/* ========================================================= */
 
 
 
/* ========================================================= */
/* ======================= SIDEBAR START =================== */
/* ========================================================= */
 
.skin-vector-2022 .mw-sidebar {
.skin-vector-2022 .mw-sidebar {
     background-color: #1a1a1a !important;
     background-color: #1a1a1a !important;
Linia 27: Linia 75:
}
}


/* --- Nagłówek --- */
/* ========================================================= */
/* ======================== SIDEBAR END ==================== */
/* ========================================================= */
 
 
 
/* ========================================================= */
/* ======================= NAGŁÓWEK START ================== */
/* ========================================================= */
 
.skin-vector-2022 .mw-header,
.skin-vector-2022 .mw-header,
.skin-vector-2022 #mw-head {
.skin-vector-2022 #mw-head {
Linia 34: Linia 91:
}
}


/* --- Pasek wyszukiwania --- */
/* ========================================================= */
/* ======================== NAGŁÓWEK END =================== */
/* ========================================================= */
 
 
 
/* ========================================================= */
/* ===================== WYSZUKIWARKA START ================ */
/* ========================================================= */
 
.skin-vector-2022 .vector-search-box,
.skin-vector-2022 .vector-search-box,
.skin-vector-2022 .vector-search-box input {
.skin-vector-2022 .vector-search-box input {
Linia 41: Linia 107:
}
}


/* --- Footer --- */
/* ========================================================= */
/* ====================== WYSZUKIWARKA END ================= */
/* ========================================================= */
 
 
 
/* ========================================================= */
/* ========================= FOOTER START ================== */
/* ========================================================= */
 
.skin-vector-2022 .mw-footer {
.skin-vector-2022 .mw-footer {
     background-color: #1a1a1a !important;
     background-color: #1a1a1a !important;
Linia 47: Linia 122:
}
}


/* --- Pola edycji i formularze --- */
/* ========================================================= */
/* ========================== FOOTER END =================== */
/* ========================================================= */
 
 
 
/* ========================================================= */
/* ======================== FORMULARZE START =============== */
/* ========================================================= */
 
.skin-vector-2022 input,
.skin-vector-2022 input,
.skin-vector-2022 textarea,
.skin-vector-2022 textarea,
Linia 56: Linia 140:
}
}


/* --- Nagłówki --- */
/* ========================================================= */
.skin-vector-2022 h1,  
/* ========================= FORMULARZE END ================ */
.skin-vector-2022 h2,  
/* ========================================================= */
.skin-vector-2022 h3,  
 
 
 
/* ========================================================= */
/* ===================== NAGŁÓWKI TREŚCI START ============= */
/* ========================================================= */
 
.skin-vector-2022 h1,
.skin-vector-2022 h2,
.skin-vector-2022 h3,
.skin-vector-2022 h4 {
.skin-vector-2022 h4 {
     color: #ffcc66 !important;
     color: #ffcc66 !important;
}
}


/* --- Pasek narzędzi użytkownika --- */
/* ========================================================= */
/* ====================== NAGŁÓWKI TREŚCI END ============== */
/* ========================================================= */
 
 
 
/* ========================================================= */
/* ======================= PASKI VECTOR START ============== */
/* ========================================================= */
 
.skin-vector-2022 .vector-user-links {
.skin-vector-2022 .vector-user-links {
     background-color: #1a1a1a !important;
     background-color: #1a1a1a !important;
}
}


/* --- Pasek zakładek artykułu --- */
.skin-vector-2022 .vector-page-toolbar {
.skin-vector-2022 .vector-page-toolbar {
     background-color: #1a1a1a !important;
     background-color: #1a1a1a !important;
}
}


/* --- Bloki komunikatów --- */
/* ========================================================= */
/* ======================== PASKI VECTOR END =============== */
/* ========================================================= */
 
 
 
/* ========================================================= */
/* ======================== KOMUNIKATY START =============== */
/* ========================================================= */
 
.skin-vector-2022 .mw-message-box {
.skin-vector-2022 .mw-message-box {
     background-color: #333333 !important;
     background-color: #333333 !important;
Linia 81: Linia 191:
}
}


/* === Stylizacja przycisków === */
/* ========================================================= */
/* ========================= KOMUNIKATY END ================ */
/* ========================================================= */
 
 
 
/* ========================================================= */
/* ========================= PRZYCISKI START =============== */
/* ========================================================= */


/* --- Główne przyciski --- */
.skin-vector-2022 .mw-ui-button,
.skin-vector-2022 .mw-ui-button,
.skin-vector-2022 .oo-ui-buttonElement-button {
.skin-vector-2022 .oo-ui-buttonElement-button {
Linia 92: Linia 209:
}
}


/* --- Efekt najechania kursorem --- */
.skin-vector-2022 .mw-ui-button:hover,
.skin-vector-2022 .mw-ui-button:hover,
.skin-vector-2022 .oo-ui-buttonElement-button:hover {
.skin-vector-2022 .oo-ui-buttonElement-button:hover {
Linia 99: Linia 215:
}
}


/* --- Przycisk "Zapisz stronę" --- */
.skin-vector-2022 .oo-ui-flaggedElement-primary .oo-ui-buttonElement-button {
.skin-vector-2022 .oo-ui-flaggedElement-primary .oo-ui-buttonElement-button {
     background-color: #ffcc66 !important;
     background-color: #ffcc66 !important;
Linia 105: Linia 220:
}
}


/* --- Efekt najechania na "Zapisz stronę" --- */
.skin-vector-2022 .oo-ui-flaggedElement-primary .oo-ui-buttonElement-button:hover {
.skin-vector-2022 .oo-ui-flaggedElement-primary .oo-ui-buttonElement-button:hover {
     background-color: #e6b800 !important;
     background-color: #e6b800 !important;
Linia 111: Linia 225:
}
}


/* === Styl WikiEditor (pasek narzędzi edytora) === */
/* ========================================================= */
/* ========================== PRZYCISKI END ================ */
/* ========================================================= */
 
 
 
/* ========================================================= */
/* ========================= WIKIEDITOR START ============== */
/* ========================================================= */
 
.skin-vector-2022 .mw-edittoolbar,
.skin-vector-2022 .mw-edittoolbar,
.skin-vector-2022 .wikiEditor-ui-toolbar,
.skin-vector-2022 .wikiEditor-ui-toolbar,
Linia 147: Linia 270:
     filter: brightness(0.8) invert(0.9);
     filter: brightness(0.8) invert(0.9);
}
}
/* ========================================================= */
/* ========================== WIKIEDITOR END =============== */
/* ========================================================= */
/* ========================================================= */
/* ===================== SCROLL TOP BUTTON START =========== */
/* ========================================================= */


#scrollTopBtn {
#scrollTopBtn {
Linia 172: Linia 305:
     opacity: 1;
     opacity: 1;
}
}
/* ========================================================= */
/* ====================== SCROLL TOP BUTTON END ============ */
/* ========================================================= */
/* ========================================================= */
/* ===================== KARTY / CARD GRID START =========== */
/* ========================================================= */


.card-grid {
.card-grid {
Linia 178: Linia 321:
     justify-content: center;
     justify-content: center;
     gap: 30px;
     gap: 30px;
     margin: 30px 0;
 
    max-width: 1400px;
     margin: 30px auto;
 
    --neon: #00ff99;
}
}


.card {
.card {
     width: 180px;
     width: 180px;
    height: 280px;
 
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
     align-items: center;
     align-items: center;
     text-align: center;
     text-align: center;
     font-weight: bold;
     font-weight: bold;
Linia 192: Linia 340:
     color: #ccc;
     color: #ccc;


     --neon: #00ff99; /* domyślny kolor jeśli user nie poda */
     background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
}


.card img {
/* Czyści link MediaWiki wewnątrz kart */
     width: 100%;
.card a,
     height: 240px;
.card .image,
     object-fit: cover;
.card .mw-file-description,
     border: 2px solid var(--neon);
.expo-card a,
     border-radius: 8px;
.expo-card .image,
     box-shadow: 0 0 10px var(--neon);
.expo-card .mw-file-description {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     display: block !important;
     line-height: 0 !important;
 
     background: transparent !important;
     border: none !important;
     outline: none !important;
     box-shadow: none !important;
 
    padding: 0 !important;
     margin: 0 !important;
}
}


.card img:hover {
/* PORTRETY */
     transform: scale(1.05);
/* MediaWiki daje klasę portrait-card-img na span, nie bezpośrednio na img */
     box-shadow: 0 0 20px var(--neon), 0 0 30px var(--neon);
 
/* PORTRETY */
/* MediaWiki daje klasę portrait-card-img na span, nie bezpośrednio na img */
 
.portrait-card-img {
    width: 180px !important;
    height: 270px !important;
 
    display: block !important;
    overflow: hidden !important;
 
    background: #111111 !important;
 
    border: 2px solid #333333 !important;
     border-radius: 8px !important;
 
     box-shadow: none !important;
 
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}
}


.card-label {
.portrait-card-img img {
     margin-top: 8px;
     width: 100% !important;
    height: 100% !important;
 
    object-fit: cover !important;
    object-position: center top !important;
 
    display: block !important;
 
    background: transparent !important;
 
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
 
    padding: 0 !important;
    margin: 0 !important;
}
}


.portrait-card-img:hover {
    transform: scale(1.05);
    border-color: var(--neon) !important;


.nav-grid {
    box-shadow:
  display: grid;
        0 0 15px var(--neon),
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        0 0 25px var(--neon) !important;
  gap: 20px;
  justify-items: center;
  align-items: center;
  margin: 30px 0;
}
}


.nav-tile img {
/* EXPO */
  width: 100px;
 
  height: 100px;
.expo-grid {
  object-fit: cover;
    display: flex;
  border-radius: 12px;
    flex-wrap: wrap;
  box-shadow: 0 0 8px #00ff99;
    justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
    gap: 35px;
 
    max-width: 1400px;
    margin: 30px auto;
 
    --neon: #00ff99;
}
}


.nav-tile img:hover {
.expo-card {
  transform: scale(1.07);
    width: 260px;
  box-shadow: 0 0 15px #00ff99;
 
    display: flex;
    flex-direction: column;
    align-items: center;
 
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    color: #ccc;
 
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
}


.portal-grid {
/* MediaWiki daje klasę expo-card-img na span, nie bezpośrednio na img */
  display: grid;
 
  grid-template-columns: repeat(2, 1fr);
.expo-card-img {
  gap: 20px;
    width: 240px !important;
  justify-content: center;
 
  margin: 30px 0;
    display: block !important;
}
    overflow: hidden !important;
 
    background: transparent !important;
 
    border: 2px solid #333333 !important;
    border-radius: 8px !important;


.portal-tile {
    box-shadow: none !important;
  --neon: var(--user-neon, #00ff99);
  border: 2px solid var(--neon);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 10px var(--neon);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}


.portal-tile:hover {
    transition:
  transform: scale(1.02);
        transform 0.3s ease,
  box-shadow: 0 0 20px var(--neon), 0 0 30px var(--neon);
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}
}


.portal-tile img {
.expo-card-img img {
  width: 100%;
    width: 100% !important;
  height: auto;
    height: auto !important;
  display: block;
}


    object-fit: contain !important;
    display: block !important;


/* Usuń tło i obramowania z obrazków PNG */
.skin-vector-2022 img[src$=".png"],
.skin-vector-2022 .mw-parser-output img[src$=".png"] {
     background: transparent !important;
     background: transparent !important;
     border: none !important;
     border: none !important;
    outline: none !important;
     box-shadow: none !important;
     box-shadow: none !important;
     padding: 0 !important;
     padding: 0 !important;
     margin: 0 !important;
     margin: 0 !important;
}
}


/* ===== MsCalendar – wygląd kalendarza na stronie [[Kalendarz]] ===== */
.expo-card-img:hover {
    transform: scale(1.05);
 
    border-color: var(--neon) !important;


/* Główna tabela kalendarza – pierwszy duży <table> na stronie Kalendarz */
    box-shadow:
body.page-Kalendarz .mw-parser-output > table:first-of-type {
        0 0 15px var(--neon),
    border-collapse: separate !important;
        0 0 25px var(--neon) !important;
    border-spacing: 4px !important;
    background: #151515 !important;
    padding: 8px !important;
    border-radius: 10px !important;
}
}


/* Nagłówki dni tygodnia (PONIEDZIAŁEK, WTOREK, ...) */
/* PODPISY */
body.page-Kalendarz .mw-parser-output > table:first-of-type th {
 
     background: #111 !important;
.card-label,
    color: #ffcc66 !important;
.expo-label {
     font-weight: bold;
     margin-top: 10px;
     padding: 6px 4px !important;
     min-height: 38px;
    text-align: center;
     line-height: 1.4;
    border: 1px solid #333 !important;
}
}


/* Pojedyncze dni (komórki tabeli) */
/* ========================================================= */
body.page-Kalendarz .mw-parser-output > table:first-of-type td {
/* ====================== KARTY / CARD GRID END ============ */
     background: #222 !important;
/* ========================================================= */
     color: #dddddd !important;
 
     border: 1px solid #333 !important;
 
     border-radius: 6px !important;
 
     padding: 8px 6px !important;
/* ========================================================= */
    vertical-align: top;
/* ========================= NAV GRID START ================ */
     min-width: 60px;
/* ========================================================= */
    height: 70px;
 
     transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
.nav-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
     gap: 20px;
     justify-items: center;
     align-items: center;
     margin: 30px 0;
 
     --neon: #00ff99;
}
}


/* Hover dnia */
.nav-tile img {
body.page-Kalendarz .mw-parser-output > table:first-of-type td:hover {
    width: 100px;
     background: #2d2d2d !important;
    height: 100px;
     border-color: #ffcc66 !important;
    object-fit: cover;
     box-shadow: 0 0 8px #ffcc6630;
 
     cursor: pointer;
     border: 2px solid var(--neon);
     border-radius: 12px;
 
     box-shadow: 0 0 8px var(--neon);
 
     transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}
}


/* Dzisiejszy dzień – MsCalendar zwykle daje mu zielone tło inline,
.nav-tile img:hover {
  więc łapiemy każdą komórkę z backgroundem i nadpisujemy na pomarańczowe */
     transform: scale(1.07);
body.page-Kalendarz .mw-parser-output > table:first-of-type td[style*="background"] {
     box-shadow: 0 0 15px var(--neon);
     background: #ff9f1a !important;
    color: #000000 !important;
    font-weight: bold !important;
    border-color: #ffaa33 !important;
     box-shadow: 0 0 10px #ff9f1a70;
}
}


/* Linki w kalendarzu (plusy, nazwy wydarzeń) */
/* ========================================================= */
body.page-Kalendarz .mw-parser-output > table:first-of-type a {
/* ========================== NAV GRID END ================= */
     color: #ffcc66 !important;
/* ========================================================= */
     text-decoration: none;
 
     font-weight: 600;
 
 
/* ========================================================= */
/* ========================= PORTALE START ================= */
/* ========================================================= */
 
.portal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
     gap: 20px;
     justify-content: center;
     margin: 30px 0;
 
    --neon: #00ff99;
}
}


body.page-Kalendarz .mw-parser-output > table:first-of-type a:hover {
.portal-tile {
     color: #ffe6a3 !important;
    border: 2px solid var(--neon);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 10px var(--neon);
     transition: transform 0.2s ease, box-shadow 0.2s ease;
}
}


/* Plusy – trochę większe i bardziej „pomarańczowe” */
.portal-tile:hover {
body.page-Kalendarz .mw-parser-output > table:first-of-type a[href*="action=msevent"],
    transform: scale(1.02);
body.page-Kalendarz .mw-parser-output > table:first-of-type a:contains("+") {
 
    font-size: 18px;
    box-shadow:
        0 0 20px var(--neon),
        0 0 30px var(--neon);
}
}


/* Wpisane wydarzenia – małe „pigułki” w komórce */
.portal-tile img {
body.page-Kalendarz .mw-parser-output > table:first-of-type span,
    width: 100%;
body.page-Kalendarz .mw-parser-output > table:first-of-type div {
     height: auto;
     /* delikatne podbicie czytelności, bez demolowania układu */
     display: block;
     line-height: 1.2;
}
}


/* ===== MsCalendar – okienko dodawania/edycji wydarzeń ===== */
/* ========================================================= */
/* ========================== PORTALE END ================== */
/* ========================================================= */


/* Przyciemnione tło za oknem */
 
.ui-widget-overlay {
 
     background: #000000 !important;
/* ========================================================= */
     opacity: 0.75 !important;
/* ========================== PNG FIX START ================ */
/* ========================================================= */
/*
Nie dotyka PNG wewnątrz kart i expo.
*/
 
.skin-vector-2022 .mw-parser-output img[src$=".png"]:not(.mw-file-element) {
     background: transparent !important;
     border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
}


/* Okno dialogowe */
/* ========================================================= */
.ui-dialog {
/* =========================== PNG FIX END ================= */
    background: #232323 !important;
/* ========================================================= */
    border: 1px solid #444 !important;
 
    border-radius: 10px !important;
    color: #f0f0f0 !important;
}


/* Pasek tytułu */
.ui-dialog-titlebar {
    background: #111 !important;
    border-bottom: 1px solid #444 !important;
}


.ui-dialog-title {
/* ========================================================= */
    color: #ffcc66 !important;
/* ======================== MSCALENDAR START =============== */
    font-weight: bold;
/* ========================================================= */
}


/* Treść i etykiety */
.mscal-entry {
.ui-dialog .ui-dialog-content,
     color: #000000 !important;
.ui-dialog label {
     color: #f0f0f0 !important;
    font-size: 14px;
}
}


/* Pola formularza */
.ui-dialog input,
.ui-dialog input,
.ui-dialog select,
.ui-dialog select,
Linia 394: Linia 634:
     color: #000000 !important;
     color: #000000 !important;
     border: 1px solid #888 !important;
     border: 1px solid #888 !important;
    padding: 3px 6px;
}
}


/* Przyciski w pop-upie */
/* ========================================================= */
.ui-dialog-buttonset button {
/* ========================= MSCALENDAR END ================ */
    background: #ffcc66 !important;
/* ========================================================= */
    border: none !important;
    color: #1b1b1b !important;
    padding: 6px 14px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.15s ease;
}


.ui-dialog-buttonset button:hover {
/* ========================================================= */
    background: #e6b800 !important;
/* ======================= CLUB LOGO FIX START ============= */
}
/* ========================================================= */
/* ===== KALENDARZ – ciemny motyw i pomarańczowe akcenty (strona [[Kalendarz]]) ===== */


/* Cała tabela kalendarza na stronie Kalendarz */
span.club-logo,
.page-Kalendarz .mw-parser-output table {
span.club-logo a,
    background: #151515 !important;
span.club-logo img,
    border-collapse: separate !important;
.club-logo,
    border-spacing: 4px !important;
.club-logo a,
    padding: 8px !important;
.club-logo img {
    border-radius: 10px !important;
     background: transparent !important;
}
     border: none !important;
 
     outline: none !important;
/* Nagłówki dni tygodnia */
     box-shadow: none !important;
.page-Kalendarz .mw-parser-output th {
     padding: 0 !important;
     background: #111111 !important;
     color: #ffcc66 !important;
     font-weight: bold;
     text-align: center;
    padding: 6px 4px !important;
     border: 1px solid #333333 !important;
}
}


/* Komórki z dniami */
span.club-logo {
.page-Kalendarz .mw-parser-output td {
     display: block !important;
     background: #222222 !important;
     text-align: center !important;
    color: #dddddd !important;
    border: 1px solid #333333 !important;
     border-radius: 6px !important;
    padding: 8px 6px !important;
    min-width: 60px;
    height: 70px;
    vertical-align: top;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
}


/* Hover dnia */
span.club-logo img {
.page-Kalendarz .mw-parser-output td:hover {
     display: block !important;
     background: #2d2d2d !important;
     margin: 0 auto !important;
     border-color: #ffcc66 !important;
    box-shadow: 0 0 8px rgba(255, 204, 102, 0.25);
    cursor: pointer;
}
}


/* Dzisiejszy dzień – MsCalendar nadaje mu własne style inline, więc nadpisujemy wszystko co ma background */
/* ========================================================= */
.page-Kalendarz .mw-parser-output td[style*="background"] {
/* ======================== CLUB LOGO FIX END ============== */
    background: #ff9f1a !important;
/* ========================================================= */
    color: #000000 !important;
    font-weight: bold !important;
    border-color: #ffaa33 !important;
    box-shadow: 0 0 10px rgba(255, 159, 26, 0.6);
}
 
/* Linki w kalendarzu (plusy i nazwy wydarzeń) */
.page-Kalendarz .mw-parser-output table a {
    color: #ffcc66 !important;
    text-decoration: none;
    font-weight: 600;
}
 
.page-Kalendarz .mw-parser-output table a:hover {
    color: #ffe6a3 !important;
}
 
/* Wydarzenia w komórce – żeby tekst był ciut bardziej czytelny */
.page-Kalendarz .mw-parser-output table td span,
.page-Kalendarz .mw-parser-output table td div {
    line-height: 1.2;
}

Aktualna wersja na dzień 13:19, 15 maj 2026

/* ========================================================= */
/* ======================= SPIS SEKCJI ===================== */
/* ========================================================= */
/*
1. GLOBAL DARK VECTOR
2. LINKI
3. SIDEBAR
4. NAGŁÓWEK
5. WYSZUKIWARKA
6. FOOTER
7. FORMULARZE
8. NAGŁÓWKI TREŚCI
9. PASKI VECTOR
10. KOMUNIKATY
11. PRZYCISKI
12. WIKIEDITOR
13. SCROLL TOP BUTTON
14. KARTY / CARD GRID
15. NAV GRID
16. PORTALE
17. PNG FIX
18. MSCALENDAR
*/
/* ========================================================= */
/* ===================== KONIEC SPISU ====================== */
/* ========================================================= */



/* ========================================================= */
/* ================= GLOBAL DARK VECTOR START ============== */
/* ========================================================= */

.skin-vector-2022,
.skin-vector-2022 body {
    background-color: #2b2b2b !important;
    color: #cccccc !important;
}

/* ========================================================= */
/* ================== GLOBAL DARK VECTOR END =============== */
/* ========================================================= */



/* ========================================================= */
/* ======================== LINKI START ==================== */
/* ========================================================= */

.skin-vector-2022 a {
    color: #ffcc66 !important;
}

.skin-vector-2022 a:visited {
    color: #d4aa00 !important;
}

.skin-vector-2022 a.new {
    color: #ff6666 !important;
}

/* ========================================================= */
/* ========================= LINKI END ===================== */
/* ========================================================= */



/* ========================================================= */
/* ======================= SIDEBAR START =================== */
/* ========================================================= */

.skin-vector-2022 .mw-sidebar {
    background-color: #1a1a1a !important;
    border-right: none !important;
}

/* ========================================================= */
/* ======================== SIDEBAR END ==================== */
/* ========================================================= */



/* ========================================================= */
/* ======================= NAGŁÓWEK START ================== */
/* ========================================================= */

.skin-vector-2022 .mw-header,
.skin-vector-2022 #mw-head {
    background-color: #1a1a1a !important;
    color: #cccccc !important;
}

/* ========================================================= */
/* ======================== NAGŁÓWEK END =================== */
/* ========================================================= */



/* ========================================================= */
/* ===================== WYSZUKIWARKA START ================ */
/* ========================================================= */

.skin-vector-2022 .vector-search-box,
.skin-vector-2022 .vector-search-box input {
    background-color: #333333 !important;
    color: #ffffff !important;
}

/* ========================================================= */
/* ====================== WYSZUKIWARKA END ================= */
/* ========================================================= */



/* ========================================================= */
/* ========================= FOOTER START ================== */
/* ========================================================= */

.skin-vector-2022 .mw-footer {
    background-color: #1a1a1a !important;
    color: #cccccc !important;
}

/* ========================================================= */
/* ========================== FOOTER END =================== */
/* ========================================================= */



/* ========================================================= */
/* ======================== FORMULARZE START =============== */
/* ========================================================= */

.skin-vector-2022 input,
.skin-vector-2022 textarea,
.skin-vector-2022 select {
    background-color: #333333 !important;
    color: #ffffff !important;
    border: 1px solid #555555;
}

/* ========================================================= */
/* ========================= FORMULARZE END ================ */
/* ========================================================= */



/* ========================================================= */
/* ===================== NAGŁÓWKI TREŚCI START ============= */
/* ========================================================= */

.skin-vector-2022 h1,
.skin-vector-2022 h2,
.skin-vector-2022 h3,
.skin-vector-2022 h4 {
    color: #ffcc66 !important;
}

/* ========================================================= */
/* ====================== NAGŁÓWKI TREŚCI END ============== */
/* ========================================================= */



/* ========================================================= */
/* ======================= PASKI VECTOR START ============== */
/* ========================================================= */

.skin-vector-2022 .vector-user-links {
    background-color: #1a1a1a !important;
}

.skin-vector-2022 .vector-page-toolbar {
    background-color: #1a1a1a !important;
}

/* ========================================================= */
/* ======================== PASKI VECTOR END =============== */
/* ========================================================= */



/* ========================================================= */
/* ======================== KOMUNIKATY START =============== */
/* ========================================================= */

.skin-vector-2022 .mw-message-box {
    background-color: #333333 !important;
    border: 1px solid #555555;
    color: #ffffff !important;
}

/* ========================================================= */
/* ========================= KOMUNIKATY END ================ */
/* ========================================================= */



/* ========================================================= */
/* ========================= PRZYCISKI START =============== */
/* ========================================================= */

.skin-vector-2022 .mw-ui-button,
.skin-vector-2022 .oo-ui-buttonElement-button {
    background-color: #ffcc66 !important;
    color: #2b2b2b !important;
    border: none !important;
    box-shadow: none !important;
}

.skin-vector-2022 .mw-ui-button:hover,
.skin-vector-2022 .oo-ui-buttonElement-button:hover {
    background-color: #e6b800 !important;
    color: #000000 !important;
}

.skin-vector-2022 .oo-ui-flaggedElement-primary .oo-ui-buttonElement-button {
    background-color: #ffcc66 !important;
    color: #2b2b2b !important;
}

.skin-vector-2022 .oo-ui-flaggedElement-primary .oo-ui-buttonElement-button:hover {
    background-color: #e6b800 !important;
    color: #000000 !important;
}

/* ========================================================= */
/* ========================== PRZYCISKI END ================ */
/* ========================================================= */



/* ========================================================= */
/* ========================= WIKIEDITOR START ============== */
/* ========================================================= */

.skin-vector-2022 .mw-edittoolbar,
.skin-vector-2022 .wikiEditor-ui-toolbar,
.skin-vector-2022 .wikiEditor-ui-toolbar .tabs,
.skin-vector-2022 .wikiEditor-ui-toolbar .sections,
.skin-vector-2022 .wikiEditor-ui-toolbar .group {
    background-color: #1b1b1b !important;
    border: none !important;
}

.skin-vector-2022 .wikiEditor-ui-toolbar .group input,
.skin-vector-2022 .wikiEditor-ui-toolbar .tool-select {
    background-color: #2b2b2b !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
}

.skin-vector-2022 .wikiEditor-ui-toolbar .tool {
    background-color: #2b2b2b !important;
    color: #e0e0e0 !important;
}

.skin-vector-2022 .wikiEditor-ui-toolbar .tool:hover,
.skin-vector-2022 .wikiEditor-ui-toolbar .tool:focus {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
}

.skin-vector-2022 .wikiEditor-ui-toolbar .tabs span,
.skin-vector-2022 .wikiEditor-ui-toolbar .sections span {
    color: #cccccc !important;
}

.skin-vector-2022 .wikiEditor-ui-toolbar .tool img {
    filter: brightness(0.8) invert(0.9);
}

/* ========================================================= */
/* ========================== WIKIEDITOR END =============== */
/* ========================================================= */



/* ========================================================= */
/* ===================== SCROLL TOP BUTTON START =========== */
/* ========================================================= */

#scrollTopBtn {
    display: none;
    position: fixed;
    bottom: 100px;
    left: 40px;
    z-index: 9999;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at center, #ffcc66, #e6b800);
    color: #1a1a1a;
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 204, 102, 0.6);
    font-size: 28px;
    cursor: pointer;
    transition: bottom 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.8;
}

#scrollTopBtn:hover {
    transform: scale(1.15);
    box-shadow: 0 0 20px rgba(255, 204, 102, 0.8);
    opacity: 1;
}

/* ========================================================= */
/* ====================== SCROLL TOP BUTTON END ============ */
/* ========================================================= */



/* ========================================================= */
/* ===================== KARTY / CARD GRID START =========== */
/* ========================================================= */

.card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;

    max-width: 1400px;
    margin: 30px auto;

    --neon: #00ff99;
}

.card {
    width: 180px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
    font-weight: bold;
    font-size: 14px;
    color: #ccc;

    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Czyści link MediaWiki wewnątrz kart */
.card a,
.card .image,
.card .mw-file-description,
.expo-card a,
.expo-card .image,
.expo-card .mw-file-description {
    display: block !important;
    line-height: 0 !important;

    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    padding: 0 !important;
    margin: 0 !important;
}

/* PORTRETY */
/* MediaWiki daje klasę portrait-card-img na span, nie bezpośrednio na img */

/* PORTRETY */
/* MediaWiki daje klasę portrait-card-img na span, nie bezpośrednio na img */

.portrait-card-img {
    width: 180px !important;
    height: 270px !important;

    display: block !important;
    overflow: hidden !important;

    background: #111111 !important;

    border: 2px solid #333333 !important;
    border-radius: 8px !important;

    box-shadow: none !important;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.portrait-card-img img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center top !important;

    display: block !important;

    background: transparent !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    padding: 0 !important;
    margin: 0 !important;
}

.portrait-card-img:hover {
    transform: scale(1.05);

    border-color: var(--neon) !important;

    box-shadow:
        0 0 15px var(--neon),
        0 0 25px var(--neon) !important;
}

/* EXPO */

.expo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 35px;

    max-width: 1400px;
    margin: 30px auto;

    --neon: #00ff99;
}

.expo-card {
    width: 260px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
    font-weight: bold;
    font-size: 14px;
    color: #ccc;

    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* MediaWiki daje klasę expo-card-img na span, nie bezpośrednio na img */

.expo-card-img {
    width: 240px !important;

    display: block !important;
    overflow: hidden !important;

    background: transparent !important;

    border: 2px solid #333333 !important;
    border-radius: 8px !important;

    box-shadow: none !important;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.expo-card-img img {
    width: 100% !important;
    height: auto !important;

    object-fit: contain !important;
    display: block !important;

    background: transparent !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    padding: 0 !important;
    margin: 0 !important;
}

.expo-card-img:hover {
    transform: scale(1.05);

    border-color: var(--neon) !important;

    box-shadow:
        0 0 15px var(--neon),
        0 0 25px var(--neon) !important;
}

/* PODPISY */

.card-label,
.expo-label {
    margin-top: 10px;
    min-height: 38px;
    line-height: 1.4;
}

/* ========================================================= */
/* ====================== KARTY / CARD GRID END ============ */
/* ========================================================= */



/* ========================================================= */
/* ========================= NAV GRID START ================ */
/* ========================================================= */

.nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 20px;
    justify-items: center;
    align-items: center;
    margin: 30px 0;

    --neon: #00ff99;
}

.nav-tile img {
    width: 100px;
    height: 100px;
    object-fit: cover;

    border: 2px solid var(--neon);
    border-radius: 12px;

    box-shadow: 0 0 8px var(--neon);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.nav-tile img:hover {
    transform: scale(1.07);
    box-shadow: 0 0 15px var(--neon);
}

/* ========================================================= */
/* ========================== NAV GRID END ================= */
/* ========================================================= */



/* ========================================================= */
/* ========================= PORTALE START ================= */
/* ========================================================= */

.portal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    justify-content: center;
    margin: 30px 0;

    --neon: #00ff99;
}

.portal-tile {
    border: 2px solid var(--neon);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 10px var(--neon);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.portal-tile:hover {
    transform: scale(1.02);

    box-shadow:
        0 0 20px var(--neon),
        0 0 30px var(--neon);
}

.portal-tile img {
    width: 100%;
    height: auto;
    display: block;
}

/* ========================================================= */
/* ========================== PORTALE END ================== */
/* ========================================================= */



/* ========================================================= */
/* ========================== PNG FIX START ================ */
/* ========================================================= */
/*
Nie dotyka PNG wewnątrz kart i expo.
*/

.skin-vector-2022 .mw-parser-output img[src$=".png"]:not(.mw-file-element) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ========================================================= */
/* =========================== PNG FIX END ================= */
/* ========================================================= */



/* ========================================================= */
/* ======================== MSCALENDAR START =============== */
/* ========================================================= */

.mscal-entry {
    color: #000000 !important;
}

.ui-dialog input,
.ui-dialog select,
.ui-dialog textarea {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #888 !important;
}

/* ========================================================= */
/* ========================= MSCALENDAR END ================ */
/* ========================================================= */

/* ========================================================= */
/* ======================= CLUB LOGO FIX START ============= */
/* ========================================================= */

span.club-logo,
span.club-logo a,
span.club-logo img,
.club-logo,
.club-logo a,
.club-logo img {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

span.club-logo {
    display: block !important;
    text-align: center !important;
}

span.club-logo img {
    display: block !important;
    margin: 0 auto !important;
}

/* ========================================================= */
/* ======================== CLUB LOGO FIX END ============== */
/* ========================================================= */
Źródło: „https://hzrp.eu/index.php?title=MediaWiki:Vector-2022.css&oldid=4119”