MediaWiki:Common.css: Unterschied zwischen den Versionen
Die Seite wurde neu angelegt: „→Fester, kleiner Sidebar-Wrapper: .infobox-container { float: right !important; clear: right !important; width: 22em; →<< kleiner machen hier: max-width: 100%; margin: 0 0 1rem 1rem; →Abstand zum Fließtext links/unten: } →Infobox-Basis: table.infobox { background: #fff; border: 1px solid #d9d9e3; border-collapse: separate; border-spacing: 0; width: 100%; →füllt den Wrapper (22em): b…“ |
Keine Bearbeitungszusammenfassung Markierung: Zurückgesetzt |
||
| Zeile 1: | Zeile 1: | ||
/* ====== DroneSpots Startseite ====== */ | |||
/* 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 */ | /* Fester, kleiner Sidebar-Wrapper */ | ||
.infobox-container { | .infobox-container { | ||