MediaWiki:Vector-2022.css

Uwaga: aby zobaczyć zmiany po opublikowaniu, może zajść potrzeba wyczyszczenia pamięci podręcznej przeglądarki.

• Firefox / Safari: Przytrzymaj Shift podczas klikania Odśwież bieżącą stronę, lub naciśnij klawisze Ctrl+F5, lub Ctrl+R (⌘-R na komputerze Mac)
• Google Chrome: Naciśnij Ctrl-Shift-R (⌘-Shift-R na komputerze Mac)
• Edge: Przytrzymaj Ctrl, jednocześnie klikając Odśwież, lub naciśnij klawisze Ctrl+F5.
• Opera: Naciśnij klawisze Ctrl+F5.

/* ========================================================= */
/* ===================== 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 ============ */
/* ========================================================= */