Drone Spots Info

MediaWiki:Common.css: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied
Keine Bearbeitungszusammenfassung
Markierung: Zurückgesetzt
Keine Bearbeitungszusammenfassung
 
(3 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
/* ====== DroneSpots Startseite ====== */
/* =========================
 
  Infobox-Wrapper
/* Hero */
  ========================= */
.ds-hero {
  position: relative;
  background: url('/images/Drone_spots_Banner.png') center/cover no-repeat;
  border-radius: 14px;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
  margin: 0 0 1.5rem 0;
  color: #fff;
}
.ds-hero::after { /* leichte Abdunklung für Lesbarkeit */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.45));
  border-radius: 14px;
}
.ds-hero__text { position: relative; z-index: 1; text-align: center; }
.ds-hero h1 { margin: 0 0 .4rem 0; font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.ds-hero p { margin: 0 0 .8rem 0; font-size: 1.05rem; opacity: .95; }
.ds-cta-row { display: inline-flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
 
.ds-btn {
  display: inline-block; padding: .65rem 1rem; border-radius: 10px;
  font-weight: 600; text-decoration: none; line-height: 1; border: 2px solid transparent;
}
.ds-btn--primary { background: #1a73e8; color: #fff; }
.ds-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.8); }
.ds-btn:hover { filter: brightness(1.03); transform: translateY(-1px); }
 
/* Einleitender Absatz */
.ds-lead {
  background: #f5fbff;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin: 1rem 0 1.25rem 0;
}
 
/* Grid-Karten */
.ds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .9rem;
  margin: 1rem 0 1.25rem 0;
}
.ds-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.ds-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.ds-card--soft { background: #f9fafb; }
.ds-card__icon, .ds-card__resicon {
  display: block; margin: 0 auto .5rem auto;
  max-width: 64px !important; height: auto !important;
}
.ds-card h3 { margin: .3rem 0 .35rem; font-size: 1.05rem; }
.ds-link { font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; }
.ds-link:hover { border-color: currentColor; }
 
/* Zwei-Spalten-Listen */
.ds-columns {
  display: grid; gap: 1rem; margin: 1rem 0 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.ds-col h2 { margin-top: 0; }
.ds-col ul { margin-top: .4rem; }
 
/* Tabellen-Hülle für horizontales Scrollen auf Mobile */
.ds-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
 
/* Wikitable veredeln (nur auf Startseite via Klasse) */
table.wikitable.ds-table {
  border-color: #e5e7eb;
  font-size: .98rem;
}
table.wikitable.ds-table > * > tr > th {
  background: #f0f7ff;
  color: #0f172a;
  font-weight: 700;
}
table.wikitable.ds-table > * > tr:nth-child(even) { background: #fafafa; }
 
/* KPI-Block */
.ds-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: .9rem; margin: 1.25rem 0 0;
}
.ds-stat {
  background: #f8fffb; border: 1px solid #d1fae5; border-radius: 12px; padding: .9rem;
  text-align: center;
}
.ds-stat__number { display: block; font-size: 1.6rem; font-weight: 700; }
.ds-stat__label { color: #065f46; }
 
/* Sonstiges */
h2 { scroll-margin-top: 80px; }
 
 
/* Fester, kleiner Sidebar-Wrapper */
.infobox-container {
.infobox-container {
   float: right !important;
   float: right !important;
   clear: right !important;
   clear: right !important;
   width: 22em;             /* << kleiner machen hier */
   width: 22em;
   max-width: 100%;
   max-width: 100%;
   margin: 0 0 1rem 1rem;   /* Abstand zum Fließtext links/unten */
   margin: 0 0 1rem 1rem;
  box-sizing: border-box;
}
}


/* Infobox-Basis */
/* =========================
  Infobox-Basis
  ========================= */
table.infobox {
table.infobox {
   background: #fff;
  width: 100%;
   background: #ffffff;
  color: #111827;
   border: 1px solid #d9d9e3;
   border: 1px solid #d9d9e3;
   border-collapse: separate;
   border-collapse: separate;
   border-spacing: 0;
   border-spacing: 0;
  width: 100%;              /* füllt den Wrapper (22em) */
  box-shadow: 0 6px 24px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
   border-radius: 12px;
   border-radius: 12px;
   overflow: hidden;
   overflow: hidden;
   font-size: 90%;
   font-size: 90%;
  line-height: 1.35;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
}
}


/* Titel */
/* =========================
  Titelzeile
  ========================= */
table.infobox .infobox-title {
table.infobox .infobox-title {
   background: linear-gradient(180deg, #e9efff 0%, #dfe7ff 100%);
   background: linear-gradient(180deg, #e9efff 0%, #dfe7ff 100%);
Zeile 130: Zeile 36:
   text-align: center;
   text-align: center;
   font-weight: 700;
   font-weight: 700;
   padding: .7rem .9rem;
  font-size: 1.05em;
   padding: 0.75rem 0.9rem;
   border-bottom: 1px solid #d9d9e3;
   border-bottom: 1px solid #d9d9e3;
}
}


/* Bild */
/* =========================
  optionales Bildfeld
  ========================= */
table.infobox .infobox-media {
table.infobox .infobox-media {
   text-align: center;
   text-align: center;
   padding: .6rem .9rem .4rem;
   padding: 0.7rem 0.9rem 0.5rem;
   background: #fbfcff;
   background: #fbfcff;
   border-bottom: 1px solid #d9d9e3;
   border-bottom: 1px solid #d9d9e3;
}
}


/* Zellen */
table.infobox .infobox-media img {
table.infobox th, table.infobox td {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
 
/* =========================
  Standardzellen
  ========================= */
table.infobox th,
table.infobox td {
   vertical-align: top;
   vertical-align: top;
   padding: .5rem .9rem;
   padding: 0.55rem 0.9rem;
  line-height: 1.35;
   border-top: 1px solid #ececf3;
   border-top: 1px solid #ececf3;
}
}
table.infobox th {
table.infobox th {
   width: 46%;
   width: 42%;
   color: #6b7280;
   color: #6b7280;
   font-weight: 600;
   font-weight: 600;
  text-align: left;
  background: #fcfcfe;
}
table.infobox td {
  background: #ffffff;
  word-break: break-word;
}
}


/* leichte Zebra-Optik */
/* Zebra nur für Datenzeilen */
table.infobox tr:nth-child(even) th,
table.infobox tbody tr:nth-child(even) th,
table.infobox tr:nth-child(even) td {
table.infobox tbody tr:nth-child(even) td {
   background: #fafafa;
   background: #fafafa;
}
}


/* Mobile: Sidebar auf volle Breite unter den Text */
/* Erste Inhaltszeile nicht doppelt trennen, falls direkt nach Titel/Bild */
table.infobox tr:first-child th,
table.infobox tr:first-child td {
  border-top: none;
}
 
/* Links innerhalb der Infobox */
table.infobox a {
  word-break: break-word;
}
 
/* =========================
  Mobile Darstellung
  ========================= */
@media (max-width: 768px) {
@media (max-width: 768px) {
   .infobox-container {
   .infobox-container {
Zeile 168: Zeile 106:
     width: 100%;
     width: 100%;
     margin: 0 0 1rem 0;
     margin: 0 0 1rem 0;
  }
  table.infobox th,
  table.infobox td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  table.infobox th {
    padding-bottom: 0.2rem;
  }
  table.infobox td {
    padding-top: 0.2rem;
   }
   }
}
}
Abgerufen von „https://dronespots.info/MediaWiki:Common.css“