Przejdź do zawartości

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

Z Horyzont Zdarzeń
← poprzednia edycjanastępna edycja →
Nie podano opisu zmian
Nie podano opisu zmian
Znacznik: Wycofane
Linia 1: Linia 1:
/* ========================================================= */
/* ======================= 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 =========== */
/* ===================== KARTY / CARD GRID START =========== */
Linia 319: Linia 6:


<div class="card-grid" style="--neon: #00ff99;">
<div class="card-grid" style="--neon: #00ff99;">
   ...
 
   <div class="card">
    [[Plik:Omar.jpg|160x270px|class=card-img]]
    <div class="card-label">Omar – Menedżer</div>
  </div>
 
</div>
</div>
WAŻNE:
Nie używaj już "frameless".
*/
*/


Linia 334: Linia 29:
     --neon: #00ff99;
     --neon: #00ff99;
}
}
/* ========================================================= */
/* ======================== KARTA START ==================== */
/* ========================================================= */


.card {
.card {
Linia 348: Linia 47:


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


/* Czyszczenie wrapperów MediaWiki wokół grafik */
/* ========================================================= */
/* ========================= KARTA END ===================== */
/* ========================================================= */
 
 
 
/* ========================================================= */
/* ========== CZYSZCZENIE WRAPPERÓW MEDIAWIKI START ======== */
/* ========================================================= */
 
.card *,
.card > *,
.card figure,
.card figure,
.card span,
.card a,
.card .image,
.card .thumb,
.card .thumb,
.card .tright,
.card .tleft,
.card .thumbinner,
.card .thumbinner,
.card .mw-file-element,
.card .mw-file-element,
Linia 362: Linia 74:
.card .mw-halign-none,
.card .mw-halign-none,
.card .mw-halign-center,
.card .mw-halign-center,
.card a,
.card .mw-file-description,
.card .image,
.card .tright,
.card .mw-file-description {
.card .tleft {
     background: transparent !important;
     background: transparent !important;
     border: none !important;
 
     border: 0 !important;
    outline: 0 !important;
     box-shadow: none !important;
     box-shadow: none !important;
     padding: 0 !important;
     padding: 0 !important;
     margin: 0 !important;
     margin: 0 !important;
}
}


.card img,
/* ========================================================= */
.card-img {
/* ============ CZYSZCZENIE WRAPPERÓW MEDIAWIKI END ======== */
/* ========================================================= */
 
 
 
/* ========================================================= */
/* ====================== STYL OBRAZKÓW START ============== */
/* ========================================================= */
 
.card img.card-img {
     width: 160px !important;
     width: 160px !important;
     height: 270px !important;
     height: 270px !important;


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


     background: transparent !important;
     background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;


     border: 2px solid var(--neon) !important;
     border: 2px solid var(--neon) !important;
     border-radius: 8px !important;
     border-radius: 8px !important;


     box-shadow: 0 0 10px var(--neon) !important;
     box-shadow:
        0 0 10px var(--neon) !important;


     transition:
     transition:
Linia 394: Linia 117:
}
}


.card img:hover,
/* Hover */
.card-img:hover {
 
.card img.card-img:hover {
     transform: scale(1.05);
     transform: scale(1.05);


Linia 401: Linia 125:
         0 0 20px var(--neon),
         0 0 20px var(--neon),
         0 0 30px var(--neon) !important;
         0 0 30px var(--neon) !important;
}
.card-label {
    margin-top: 10px;
    min-height: 38px;
    line-height: 1.4;
}
/* Totalne czyszczenie wrapperów MediaWiki */
.card * {
    background: transparent !important;
}
.card figure,
.card span,
.card a,
.card .image,
.card .thumbinner,
.card .mw-file-element {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
}


/* ========================================================= */
/* ========================================================= */
/* ====================== KARTY / CARD GRID END ============ */
/* ======================= STYL OBRAZKÓW END =============== */
/* ========================================================= */
/* ========================================================= */


Linia 431: Linia 134:


/* ========================================================= */
/* ========================================================= */
/* ========================= NAV GRID START ================ */
/* ====================== PODPISY KART START =============== */
/* ========================================================= */
/* ========================================================= */


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


     --neon: #00ff99;
     line-height: 1.4;
}
 
.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 ================= */
/* ======================= PODPISY KART END ================ */
/* ========================================================= */
/* ========================================================= */


Linia 472: Linia 151:


/* ========================================================= */
/* ========================================================= */
/* ========================= PORTALE START ================= */
/* ====================== KARTY / CARD GRID END ============ */
/* ========================================================= */
 
.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 ================ */
/* ========================================================= */
/*
Naprawa PNG:
usuwa tło, ramki i cienie ze zwykłych PNG w treści artykułu,
ALE NIE dotyka obrazków w kartach .card-img.
*/
 
.skin-vector-2022 .mw-parser-output img[src$=".png"]:not(.card-img) {
    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 ================ */
/* ========================================================= */
/* ========================================================= */

Wersja z 12:08, 15 maj 2026

/* ========================================================= */
/* ===================== KARTY / CARD GRID START =========== */
/* ========================================================= */
/*
Użycie w artykule:

<div class="card-grid" style="--neon: #00ff99;">

  <div class="card">
    [[Plik:Omar.jpg|160x270px|class=card-img]]
    <div class="card-label">Omar – Menedżer</div>
  </div>

</div>

WAŻNE:
Nie używaj już "frameless".
*/

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

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

    --neon: #00ff99;
}

/* ========================================================= */
/* ======================== KARTA START ==================== */
/* ========================================================= */

.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: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* ========================================================= */
/* ========================= KARTA END ===================== */
/* ========================================================= */



/* ========================================================= */
/* ========== CZYSZCZENIE WRAPPERÓW MEDIAWIKI START ======== */
/* ========================================================= */

.card *,
.card > *,
.card figure,
.card span,
.card a,
.card .image,
.card .thumb,
.card .thumbinner,
.card .mw-file-element,
.card .mw-default-size,
.card .mw-halign-none,
.card .mw-halign-center,
.card .mw-file-description,
.card .tright,
.card .tleft {
    background: transparent !important;

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

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

/* ========================================================= */
/* ============ CZYSZCZENIE WRAPPERÓW MEDIAWIKI END ======== */
/* ========================================================= */



/* ========================================================= */
/* ====================== STYL OBRAZKÓW START ============== */
/* ========================================================= */

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

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

    background: transparent !important;

    border: 2px solid var(--neon) !important;
    border-radius: 8px !important;

    box-shadow:
        0 0 10px var(--neon) !important;

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

/* Hover */

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

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

/* ========================================================= */
/* ======================= STYL OBRAZKÓW END =============== */
/* ========================================================= */



/* ========================================================= */
/* ====================== PODPISY KART START =============== */
/* ========================================================= */

.card-label {
    margin-top: 10px;
    min-height: 38px;

    line-height: 1.4;
}

/* ========================================================= */
/* ======================= PODPISY KART END ================ */
/* ========================================================= */



/* ========================================================= */
/* ====================== KARTY / CARD GRID END ============ */
/* ========================================================= */
Źródło: „https://hzrp.eu/index.php?title=MediaWiki:Vector-2022.css&oldid=4086”