Vorlage:SubmersContentStyles/styles.css: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
(Pageoptions-Hilfsklassen ergänzt) |
Dirk (Diskussion | Beiträge) (Inhaltsseiten: Badge- und Bildkarten-CSS ergänzen (20260605-065619)) |
||
| (Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt) | |||
| Zeile 57: | Zeile 57: | ||
.submers-hidden { | .submers-hidden { | ||
display: none; | display: none; | ||
} | |||
/* Allgemeine Submers-Inhaltsseiten */ | |||
.submers-content-page { color: #1e2f33; } | |||
.submers-content-page * { box-sizing: border-box; } | |||
.submers-content-hero { | |||
border-radius: 22px; | |||
background: linear-gradient(135deg, #073b4a 0%, #087a8e 52%, #18b97c 100%); | |||
color: white; | |||
padding: 28px; | |||
margin: 12px 0 28px; | |||
box-shadow: 0 16px 34px rgba(5,78,94,0.22); | |||
} | |||
.submers-content-kicker { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #b8f4ee; font-weight: bold; } | |||
.submers-content-title { font-size: 38px; line-height: 1.05; margin: 6px 0 3px; font-weight: bold; } | |||
.submers-content-subtitle { font-size: 19px; color: #dafaf6; max-width: 900px; } | |||
.submers-content-body { font-size: 16px; line-height: 1.65; } | |||
.submers-content-body > p, .submers-content-body > ul, .submers-content-body > ol { | |||
background: #ffffff; | |||
border: 1px solid #c9e2e8; | |||
border-radius: 16px; | |||
padding: 16px 18px; | |||
box-shadow: 0 6px 18px rgba(0,45,58,.06); | |||
} | |||
.submers-content-body h2 { | |||
margin: 30px 0 14px; | |||
font-size: 24px; | |||
color: #12343b; | |||
border-bottom: 3px solid #bfe8e8; | |||
padding-bottom: 7px; | |||
} | |||
.submers-content-body h3 { color: #075a69; margin-top: 22px; } | |||
.submers-content-page table.submers-image-table, | |||
.submers-content-page table.submers-image-table tbody, | |||
.submers-content-page table.submers-image-table tr, | |||
.submers-content-page table.submers-image-table td { display: block; width: auto; } | |||
.submers-content-page table.submers-image-table tr { | |||
display: grid; | |||
grid-template-columns: repeat(2,minmax(0,1fr)); | |||
gap: 18px; | |||
} | |||
.submers-content-page table.submers-image-table td { | |||
border: 1px solid #c9d9dd; | |||
border-radius: 16px; | |||
background: #fff; | |||
box-shadow: 0 8px 22px rgba(0,45,58,.08); | |||
overflow: hidden; | |||
padding: 0; | |||
} | |||
.submers-content-page .thumb, | |||
.submers-content-page .thumbinner { border: 0 !important; background: transparent !important; max-width: 100%; } | |||
.submers-content-page .thumbcaption { padding: 10px 12px !important; color: #26474f; background: #f7fbfc; } | |||
.submers-content-page img { max-width: 100%; height: auto; } | |||
@media (max-width:900px) { | |||
.submers-content-title { font-size: 30px; } | |||
.submers-content-page table.submers-image-table tr { grid-template-columns: 1fr; } | |||
} | |||
/* Shared badge and image-card rules for general content pages */ | |||
.submers-content-page .submers-badges { margin-top: 14px; } | |||
.submers-content-page .submers-badge { | |||
display: inline-block; | |||
border-radius: 999px; | |||
padding: 5px 10px; | |||
margin: 3px 5px 3px 0; | |||
background: #1a8490; | |||
border: 1px solid #7bd3d7; | |||
color: #fff; | |||
font-size: 12px; | |||
font-weight: bold; | |||
} | |||
.submers-content-page .submers-badge-main { | |||
background: #d9fbff; | |||
color: #075a69; | |||
} | |||
.submers-content-page .submers-image-card-grid { | |||
display: grid; | |||
grid-template-columns: repeat(4,minmax(0,1fr)); | |||
gap: 14px; | |||
margin: 14px 0 26px; | |||
align-items: start; | |||
} | |||
.submers-content-page .submers-image-card { | |||
border-radius: 14px; | |||
background: #ffffff; | |||
border: 1px solid #d2e3e7; | |||
padding: 8px; | |||
box-shadow: 0 4px 14px rgba(0,45,58,0.06); | |||
overflow: hidden; | |||
align-self: start; | |||
} | |||
.submers-content-page .submers-image-card img { | |||
display: block; | |||
width: 100%; | |||
height: auto; | |||
border-radius: 10px; | |||
} | |||
.submers-content-page .submers-photo-caption { | |||
padding: 8px 4px 2px; | |||
font-size: 14px; | |||
color: #26474f; | |||
} | |||
@media (max-width:900px) { | |||
.submers-content-page .submers-image-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } | |||
} | } | ||
Aktuelle Version vom 5. Juni 2026, 04:56 Uhr
.submers-image-table {
width: 100%;
border-collapse: collapse;
}
.submers-image-table td {
vertical-align: top;
}
.submers-clear {
clear: both;
}
.submers-small-text {
font-size: 12px;
}
.submers-heading-main {
font-size: 20px;
}
.submers-heading-subtitle {
font-size: 16px;
}
.author {
white-space: nowrap;
}
.submers-bold {
font-weight: bold;
}
.submers-justify {
text-align: justify;
}
.submers-size-comparison {
width: 60%;
border-collapse: collapse;
}
.submers-size-comparison td {
padding: 5px;
border: 1px solid #a2a9b1;
}
.submers-size-comparison__name {
width: 50%;
}
.submers-size-comparison__measure {
width: 25%;
}
.submers-image-table--narrow {
width: 90%;
}
.submers-form-preview {
display: none;
padding-bottom: 25px;
margin-bottom: 25px;
border-bottom: 1px solid #aaaaaa;
}
.submers-page-options {
line-height: 1.5em;
}
.submers-hidden {
display: none;
}
/* Allgemeine Submers-Inhaltsseiten */
.submers-content-page { color: #1e2f33; }
.submers-content-page * { box-sizing: border-box; }
.submers-content-hero {
border-radius: 22px;
background: linear-gradient(135deg, #073b4a 0%, #087a8e 52%, #18b97c 100%);
color: white;
padding: 28px;
margin: 12px 0 28px;
box-shadow: 0 16px 34px rgba(5,78,94,0.22);
}
.submers-content-kicker { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #b8f4ee; font-weight: bold; }
.submers-content-title { font-size: 38px; line-height: 1.05; margin: 6px 0 3px; font-weight: bold; }
.submers-content-subtitle { font-size: 19px; color: #dafaf6; max-width: 900px; }
.submers-content-body { font-size: 16px; line-height: 1.65; }
.submers-content-body > p, .submers-content-body > ul, .submers-content-body > ol {
background: #ffffff;
border: 1px solid #c9e2e8;
border-radius: 16px;
padding: 16px 18px;
box-shadow: 0 6px 18px rgba(0,45,58,.06);
}
.submers-content-body h2 {
margin: 30px 0 14px;
font-size: 24px;
color: #12343b;
border-bottom: 3px solid #bfe8e8;
padding-bottom: 7px;
}
.submers-content-body h3 { color: #075a69; margin-top: 22px; }
.submers-content-page table.submers-image-table,
.submers-content-page table.submers-image-table tbody,
.submers-content-page table.submers-image-table tr,
.submers-content-page table.submers-image-table td { display: block; width: auto; }
.submers-content-page table.submers-image-table tr {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 18px;
}
.submers-content-page table.submers-image-table td {
border: 1px solid #c9d9dd;
border-radius: 16px;
background: #fff;
box-shadow: 0 8px 22px rgba(0,45,58,.08);
overflow: hidden;
padding: 0;
}
.submers-content-page .thumb,
.submers-content-page .thumbinner { border: 0 !important; background: transparent !important; max-width: 100%; }
.submers-content-page .thumbcaption { padding: 10px 12px !important; color: #26474f; background: #f7fbfc; }
.submers-content-page img { max-width: 100%; height: auto; }
@media (max-width:900px) {
.submers-content-title { font-size: 30px; }
.submers-content-page table.submers-image-table tr { grid-template-columns: 1fr; }
}
/* Shared badge and image-card rules for general content pages */
.submers-content-page .submers-badges { margin-top: 14px; }
.submers-content-page .submers-badge {
display: inline-block;
border-radius: 999px;
padding: 5px 10px;
margin: 3px 5px 3px 0;
background: #1a8490;
border: 1px solid #7bd3d7;
color: #fff;
font-size: 12px;
font-weight: bold;
}
.submers-content-page .submers-badge-main {
background: #d9fbff;
color: #075a69;
}
.submers-content-page .submers-image-card-grid {
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr));
gap: 14px;
margin: 14px 0 26px;
align-items: start;
}
.submers-content-page .submers-image-card {
border-radius: 14px;
background: #ffffff;
border: 1px solid #d2e3e7;
padding: 8px;
box-shadow: 0 4px 14px rgba(0,45,58,0.06);
overflow: hidden;
align-self: start;
}
.submers-content-page .submers-image-card img {
display: block;
width: 100%;
height: auto;
border-radius: 10px;
}
.submers-content-page .submers-photo-caption {
padding: 8px 4px 2px;
font-size: 14px;
color: #26474f;
}
@media (max-width:900px) {
.submers-content-page .submers-image-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}