MediaWiki:Vector.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.

/* ===== Logo w Vector (legacy) ===== */
.skin-vector #p-logo .mw-wiki-logo {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover !important;
}

/* ===== PEN: hero box (nagłówek strony głównej) ===== */
.pen-hero {
  margin: 0 0 1rem 0;
  background: linear-gradient(135deg, #f7f7fb 0%, #eef3ff 60%, #e8f6ff 100%);
  border: 1px solid #dfe3ea;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(20, 35, 70, 0.08);
  /* Motyw monet w tle */
  background-image: url("/images/6/6e/Monety-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-blend-mode: lighten;
}

.pen-hero__inner {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem;
  align-items: stretch;
}

/* Lewa kolumna: tytuł i opis */
.pen-hero__left { flex: 1 1 40%; min-width: 280px; }
.pen-hero__title { font-size: 1.7rem; font-weight: 700; color: #1a2840; line-height: 1.2; margin: 0 0 .2rem 0; }
.pen-hero__subtitle { color: #3b4b6b; font-size: 1rem; margin: 0 0 .55rem 0; }
.pen-hero__mission { font-size: .95rem; color: #2c3d5a; margin-bottom: .7rem; }
.pen-hero__statsline { color: #5b6a86; font-size: .82rem; }

/* Prawa kolumna: nawigacja */
.pen-hero__right {
  flex: 1 1 60%;
  min-width: 320px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .9rem;
}

.pen-nav {
  background: #fff;
  border: 1px solid #e7ebf2;
  border-radius: 10px;
  padding: .8rem .9rem;
}

.pen-nav__title {
  display: flex;
  align-items: flex-start; /* poprawione z 'left' */
  gap: .5rem;
  font-weight: 700;
  color: #1a2840;
  margin: 0 0 .35rem 0;
  letter-spacing: .2px;
}

img.pen-icon { border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.08); }

/* Linki: każdy zakończony kulką (•) */
.pen-nav__links a { color: #2752c4; text-decoration: none; margin-right: .4em; }
.pen-nav__links a:hover { color: #1a3ea0; }
.pen-nav__links a::after { content: " •"; color: #999; margin-left: .4em; }

/* Responsywność */
@media (max-width: 980px) {
  .pen-hero__inner { flex-direction: column; }
  .pen-hero__right { grid-template-columns: 1fr; }
}

/* --- Layout kart sekcji --- */
.pen-sections {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

/* Domyślnie karty na 6/12 kolumn (dwie w rzędzie); na wąskich 1/1 */
.pen-card { grid-column: span 6; }
@media (max-width: 980px) { .pen-card { grid-column: span 12; } }

/* --- Kolory domyślne (jasnoniebieskie) – łatwe do podmiany --- */
:root {
  --pen-card-bg:        #eef6ff;
  --pen-card-border:    #bcd3f3;
  --pen-header-from:    #e8f1ff;
  --pen-header-to:      #cfe4ff;
  --pen-header-text:    #10315e;
  --pen-body-text:      #1b2a44;
}

/* --- Karta --- */
.pen-card {
  background: var(--pen-card-bg);
  border: 1px solid var(--pen-card-border);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(20, 35, 70, 0.06);
  overflow: hidden;
}

/* Nagłówek karty */
.pen-card__header {
  padding: .6rem .85rem;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--pen-header-text);
  background: linear-gradient(135deg, var(--pen-header-from), var(--pen-header-to));
  border-bottom: 1px solid var(--pen-card-border);
}

/* Treść karty */
.pen-card__body {
  padding: .85rem .95rem;
  color: var(--pen-body-text);
  line-height: 1.55;
}

/* Wspierają nas – centrowanie siatki */
.pen-card__body--center { display: grid; place-items: center; gap: .6rem; }

/* Obrazki wewnątrz kart */
.pen-card__body img { max-width: 100%; height: auto; border-radius: 6px; }

/* Linki w kartach */
.pen-card__body a { color: #2752c4; text-decoration: none; border-bottom: 1px solid rgba(39,82,196,.2); }
.pen-card__body a:hover { color: #1a3ea0; border-bottom-color: rgba(39,82,196,.45); }

/* Ukryj tytuł i podtytuły na Stronie głównej */
body.page-Strona_główna #firstHeading { display: none; }
body.page-Strona_główna #siteSub,
body.page-Strona_główna #contentSub { display: none; }

/* ==== Neutralizacja <pre> i pierwszego elementu w treści kart ==== */
.pen-card__body .pen-plain pre {
  white-space: normal !important;
  font: inherit !important;
  text-align: left !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 .5rem 0 !important;
  display: block !important;
}

.pen-card__body .pen-plain > *:first-child {
  font: inherit !important;
  text-align: left !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
  line-height: inherit !important;
}

/* Miniatury poza galerią — nie wyciągaj pierwszej na górę */
.pen-card__body .pen-plain .thumb,
.pen-card__body .pen-plain .thumb .thumbinner {
  float: none !important;
  display: inline-block !important;
  vertical-align: top !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 .5rem .5rem 0 !important;
  padding: 0 !important;
}

/* Galerie w kartach – bez ramek/wyśrodkowań */
.pen-card__body .pen-plain .gallery {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  text-align: left !important;
}

/* „Wspierają nas” – obrazy w jednym rzędzie, ignoruj <pre>/<p> */
.pen-card__body--center .pen-plain {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: .75rem !important;
  justify-content: center;
}

.pen-card__body--center .pen-plain pre,
.pen-card__body--center .pen-plain p {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

.pen-card__body--center .pen-plain [typeof="mw:File"] { display: inline-block !important; }
.pen-card__body--center .pen-plain img { display: block; height: auto; max-width: 130px; border-radius: 6px; }