-Platzhalter (.hexSpacer)
ein, damit die :nth-of-type-Zählung der Waben dahinter korrekt bleibt. */
.hexGrid .hexItem.hexLogo.doublesize {
width: calc( ( var(--s) * 2 ) + var(--mh) );
}
/* Logo: „Bis zum Rand ausfüllen" (1,5 Waben) – für ein Logo am Rand einer Zeile. */
.hexGrid .hexItem.hexLogo.logoRand {
width: calc( var(--s) + ( var(--s) / 2 ) );
}
/* Versteckter Zähl-Platzhalter: zählt bei :nth-of-type mit, belegt aber keine Breite. */
.hexGrid .hexSpacer {
display: none;
}
/* Lücke (Waben/Lücke): reserviert eine volle Waben-Breite, ist in der normalen
Ansicht aber unsichtbar (kein grauer/roter Hex-Hintergrund, kein Hover). */
.hexGrid .hexItem.blank,
.hexGrid > .hexItem.blank:nth-of-type(7n+1) {
background-color: transparent !important;
}
/* ---- Bilderwabe (image hexagon) for the clip-path honeycomb ----
Only image hexagons carry ![]()
//
inside .hexLink, so these
selectors do not affect the plain text waben (which use span.content). */
.hexGrid .hexItem .hexLink,
div.ve-init-target .hexItem .hexLink {
position: relative;
overflow: hidden;
}
.hexGrid .hexItem .hexLink img,
div.ve-init-target .hexItem .hexLink img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
margin: 0;
z-index: 0;
transition: filter .3s ease-out;
}
.hexGrid .hexItem:hover .hexLink img {
filter: brightness(.72);
}
.hexGrid .hexItem .hexLink h1,
.hexGrid .hexItem .hexLink p,
div.ve-init-target .hexItem .hexLink h1,
div.ve-init-target .hexItem .hexLink p {
position: absolute;
left: 0;
right: 0;
width: 100%;
margin: 0 !important;
padding: 6px 14px;
box-sizing: border-box;
color: #fff;
text-align: center;
background-color: rgba(128, 128, 128, .85);
z-index: 2;
border: 0;
transition: transform .25s ease-out, opacity .3s ease-out;
}
/* obere Hälfte = Titel, untere Hälfte = Text; beide horizontal zentriert und
vertikal nah an der Mitte zusammengeführt (nicht weit auseinander).
Positionierung gilt für normale Ansicht UND VisualEditor. */
.hexGrid .hexItem .hexLink h1,
div.ve-init-target .hexItem .hexLink h1 {
top: 0;
bottom: 50%;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 12px;
font-size: 1em;
line-height: 1.25;
}
.hexGrid .hexItem .hexLink p,
div.ve-init-target .hexItem .hexLink p {
top: calc(50% - 1px);
bottom: 0;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 12px;
font-size: 0.76em;
line-height: 1.25;
}
/* Normale Ansicht: versteckt, beim Hover von oben/unten eingeblendet. */
.hexGrid .hexItem .hexLink h1 { transform: translateY(-100%); opacity: 0; }
.hexGrid .hexItem .hexLink p { transform: translateY( 100%); opacity: 0; }
.hexGrid .hexItem:hover .hexLink h1,
.hexGrid .hexItem:hover .hexLink p {
transform: translateY(0);
opacity: 1;
}
/* VisualEditor: Vorschau — Bild SICHTBAR lassen, Titel/Text als kompakte
lesbare Bänder mittig darüber (nicht die ganze Wabe grau überdecken).
Echtes :hover ist im VE unzuverlässig, darum dauerhaft sichtbar. */
div.ve-init-target .hexItem .hexLink h1,
div.ve-init-target .hexItem .hexLink p {
height: auto;
transform: translateY(0);
opacity: 1;
}
div.ve-init-target .hexItem .hexLink h1 { top: auto; }
div.ve-init-target .hexItem .hexLink p { bottom: auto; }
div.ve-init-target .hexItem .hexLink img {
filter: none;
}
/* Modifications for the Visual Editor */
div.ve-init-target .hexGrid {
margin: 0 !important;
/* Platz unter dem "Waben/Start"-Label: die erste Wabe zieht durch ihren
negativen Top-Margin sonst über das Label und macht es unanklickbar.
Dieser Abstand fängt den Negativ-Margin ab → Label bleibt frei. Die
Verzahnung der Waben untereinander bleibt unverändert. (Nach dem margin-
Shorthand notiert, damit margin-bottom gewinnt.) */
margin-bottom: 3em !important;
/* padding: 0 !important; */
padding-bottom: 0 !important;
padding-left: 3px;
width: 9.7em;
border-left: solid 6px #00000000;
border-right: solid 6px #00000000;
border-top: solid 2px #00000000;
border-bottom: solid 2px #00000000;
}
div.ve-init-target .hexGrid::before {
opacity: 0.5;
padding: 5px 6px 5px 30px;
font-family: 'Lato', sans-serif;
font-weight: bold;
color: #202122;
content: "Waben/Start";
background-position: center left;
background-repeat: no-repeat;
background-size: 20px;
background-image: url(/load.php?modules=oojs-ui.styles.icons-editing-advanced&image=puzzle&format=rasterized&lang=de-formal&skin=bluespicediscovery&version=fsb61);
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E puzzle %3C/title%3E%3Ccircle cx=%2217%22 cy=%2210%22 r=%223%22/%3E%3Cpath d=%22M10.58 3A3 3 0 0 1 11 4.5a3 3 0 0 1-6 0A3 3 0 0 1 5.42 3H1v12a2 2 0 0 0 2 2h12V3z%22/%3E%3C/svg%3E");
}
/* div.ve-init-target .hexGrid::before {
background-position: center left;
background-repeat: no-repeat;
background-size: 20px;
background-image: url(/load.php?modules=oojs-ui.styles.icons-editing-advanced&image=puzzle&format=rasterized&lang=de-formal&skin=bluespicediscovery&version=fsb61);
background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E puzzle %3C/title%3E%3Ccircle cx=%2217%22 cy=%2210%22 r=%223%22/%3E%3Cpath d=%22M10.58 3A3 3 0 0 1 11 4.5a3 3 0 0 1-6 0A3 3 0 0 1 5.42 3H1v12a2 2 0 0 0 2 2h12V3z%22/%3E%3C/svg%3E);
} */
div.ve-init-target .hex {
position: relative;
outline: 1px solid transparent;
/* background-color: #c0143c !important; */
}
div.ve-init-target .hex {
list-style-type: none;
/* Vertikaler Abstand der Waben NUR im VisualEditor (enger = kleinerer Wert). */
margin-bottom: 20px;
}
/* Editor (VisualEditor): Lücke als gestrichelte WABEN-Form (nicht als Rechteck).
clip-path kann keinen normalen (gestrichelten) Rand tragen, darum wird die
Hexagon-Kontur als SVG-Hintergrund gezeichnet. preserveAspectRatio=none +
background-size:100% 100% dehnt die Kontur exakt auf die Wabenbox; das Polygon
ist leicht eingerückt, damit der 3px-Strich nicht am Rand abgeschnitten wird.
clip-path wird hier aufgehoben, sonst würde die äußere Strichhälfte weggeclippt. */
div.ve-init-target .hexItem.blank,
div.ve-init-target .hex.blank {
background-color: transparent;
border: 0;
clip-path: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115' preserveAspectRatio='none'%3E%3Cpolygon points='50,3 97,30 97,85 50,112 3,85 3,30' fill='none' stroke='%23a7acb1' stroke-width='3' stroke-dasharray='7 6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
}
/* Editor (VisualEditor): Logo-Wabe als weißes Hexagon mit hellgrauem Rand,
Logo zentriert, einheitliche Größe (Varianten doublesize/logoRand werden
im Editor ignoriert — das Logo wird immer gleich groß angezeigt).
Rand = zweischichtig: graues Eltern-Hexagon + weißes inneres Hexagon
(transform: scale) → klar sichtbarer hellgrauer Ring entlang der
clip-path-Form (border/drop-shadow sind bei clip-path zu unsichtbar). */
div.ve-init-target .hexItem.hexLogo {
width: var(--s) !important;
height: calc( var(--s) * var(--r) ) !important;
box-sizing: border-box !important;
padding: 0 !important;
background: #cccccc;
}
div.ve-init-target .hexItem.hexLogo .logoIn {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
background-color: #fff;
background-size: 60%;
background-position: center center;
clip-path: polygon(var(--hc) 0, calc(100% - var(--hc)) 0, 100% var(--vc), 100% calc(100% - var(--vc)), calc(100% - var(--hc)) 100%, var(--hc) 100%, 0 calc(100% - var(--vc)), 0 var(--vc));
transform: scale(0.97);
}
/* ############### Template: Attentionbox - Box for attention (template) */
.box {
display: flex;
align-items: center;
flex-direction: row;
padding: 5px;
margin-top: 1rem;
margin-bottom: 1rem;
}
.box .pic {
margin: 0 20px 0 15px;
}
.box .text {
}
.box.box_general_styling {
}
.box.box_general_styling .heading {
text-transform: uppercase;
font-weight: bold;
}
.box.box_general_styling .content {
}
.box.box_general_styling .fa, .box.box_general_styling .far , .box.box_general_styling .fas {
font-size: 3em;
}
/* ############### Template: Infobox */
.infobox {
width: 100%;
/* z-index: 999; */
position: relative;
}
@media (min-width: 601px) {
.infobox {
margin-left: 16px;
width: 22rem;
float: right;
}
}
.infobox .infobox-heading {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
min-height: 32px;
/*background-color: rgba(60, 60, 60, 0.15);*/
/* background-color: rgba(60, 60, 60, 0.5); */
background-color: #9d9d9d;
color: #ffffff;
font-weight: bold;
padding: 8px;
}
.infobox .infobox-innerheading {
margin: auto 0;
}
.infobox .infobox-body {
background-color: #fff;
padding: 0px;
border-right: 1px solid rgba(60, 60, 60, 0.5);
border-left: 1px solid rgba(60, 60, 60, 0.5);
border-bottom: 1px solid rgba(60, 60, 60, 0.5);
}
.infobox .infobox-image {
padding: 8px;
}
.infobox .pic {
text-align: center;
}
/*
.infobox .logo {
padding: 0 8px;
}
.infobox .logo img {
object-fit: contain;
width: 100%;
}
*/
/*
.infobox .pic img {
object-fit: contain;
width: 100%;
}
*/
.infobox .infobox-desc {
font-size: 0.8em;
text-align: center;
padding: 4px 0;
}
.infobox table {
margin-bottom: 0;
}
.infobox table p {
margin: 0;
}
.infobox table td.infoboxLabel {
font-weight: bold;
}
.infobox table td.infoboxHeading {
font-weight: bold;
/* background-color: rgba(60, 60, 60, 0.15); */
background-color: #e2e2e2;
}
.infobox table td.infoboxData {
}
/* ############### CopikiBlog - SMW Semantic Blog */
#blog-input-box {
margin: auto;
margin-bottom: 2rem;
}
#blog-input-box form[name="createbox"] {
background-color: #e2e2e2;
box-shadow: 3px 3px 3px rgba(0,0,0,.35);
border-top: 1px solid rgba(0,0,0,.075);
border-left: 1px solid rgba(0,0,0,.075);
border-radius: 5px;
padding: .25rem 1rem;
margin: 0 1rem 1rem 1rem;
}
.ns-1580 #blog-input-box form[name="createbox"] {
margin: 0
}
.ns-1580 #blog-input-box .inputbox-label {
margin-top: -62px;
margin-left: 0;
}
#blog-input-box form[name="createbox"] p {
display: flex;
}
#blog-input-box form[name="createbox"] p .formInput {
flex-grow: 1;
margin-left: 50px;
}
#blog-input-box .inputbox-label {
display: flex;
align-items: center;
min-height: 62px;
width: 68px;
justify-content: center;
font-weight: bold;
margin-top: -78px;
margin-bottom: 1rem;
margin-left: 1rem;
color: #c0143c;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
font-size: 1.15rem;
}
#blog-input-box .inputbox-label:hover a {
text-decoration: none !important;
}
#blog-input-box .inputbox-icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background: #9d9d9d;
}
#blog-input-box .inputbox-icon:hover {
background: #c0143c;
}
#blog-input-box .inputbox-icon i {
color: #fff;
}
.blog-feed-item {
display: flex;
gap: 16px;
padding: 0 1rem 0 26px;
margin-bottom: 1rem;
}
.blog-feed-item-date {
background: #c0143c;
color: #fff;
display: flex;
border-radius: 50%;
width: 50px;
height: 50px;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 1.1rem;
flex-shrink: 0;
}
.blog-feed-item-date .date-day {
font-size: 1.1rem;
font-weight: bold;
}
.blog-feed-item-date .date-month {
font-size: small;
}
.blog-feed-item-body {
border-radius: 4px;
padding: .5rem 2rem;
box-shadow: 3px 3px 3px rgba(0,0,0,.25);
border-top: 1px solid rgba(0,0,0,.15);
border-left: 1px solid rgba(0,0,0,.15);
width: 100%;
min-width: 300px;
}
.blog-feed-item-title {
margin: -20px 0 .5rem 0;
}
.blog-feed-item-published {
color: #666666;
margin-bottom: .5rem
}
.blog-feed-item-footer {
display: flex;
justify-content: space-between;
}
.blog-feed-item-teaser {
cursor: pointer;
font-size: 0.9375rem;
}
.blog-feed-item-expand, .blog-feed-item-collapse {
color: #c0143c;
cursor: pointer;
float: right;
margin-top: .5rem;
}
.blog-feed-item-expand:before, .blog-feed-item-collapse:before {
font-family: 'Font Awesome 5 Free';
font-weight: bold;
font-size: 1.25rem;
}
.blog-feed-item-expand.icon-down:before {
content: '\f424';
}
.blog-feed-item-expand.icon-up:before {
content: '\f424';
}
.blog-feed-item-collapse:before {
content: '\f00d';
}
.blog-feed-item-expand:hover span, .blog-feed-item-collapse:hover span {
text-decoration: underline;
}
.blog-feed-item-expand i, .blog-feed-item-collapse i {
font-size: 1.25rem;
text-decoration: none !important;
}
.blog-feed-item-catlinks {
list-style: none;
margin: 0 !important;
padding: .5rem 0 !important;
display: flex;
justify-content: start;
align-items: center;
}
.blog-feed-item-catlinks:before {
content: "\e903";
font-family: "bluespice-logo";
font-style: normal;
font-size: 0.63rem;
margin-right: 0.3125rem;
display: inline-block;
vertical-align: middle;
}
.blog-feed-item-catlinks li {
padding: 0 0.3125rem;
border: 1px solid #c4c4c4;
border-radius: 0.19rem;
background-color: transparent;
margin-left: 0.3125rem;
margin-bottom: 0.3125rem;
line-height: 1.25rem;
color: #c0143c;
margin-right: 2px !important;
}
.blog-feed-item-body::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
transform: rotate(45deg);
background: white;
margin-left: -43px;
border-left: 1px solid #ddd;
border-bottom: 1px solid #ccc;
top: 7px;
position: relative;
}
#category-filters {
margin: 0 1rem 2rem 1rem;
padding: 0 1rem;
background: #e2e2e2;
box-shadow: 3px 3px 3px rgba(0,0,0,.35);
border-top: 1px solid rgba(0,0,0,.075);
border-left: 1px solid rgba(0,0,0,.075);
border-radius: 5px;
display: flex;
flex-wrap: wrap;
}
.blog-feed-item-catlinks {
list-style: none;
margin: 0 !important;
padding: .5rem 0 !important;
display: flex;
justify-content: start;
align-items: center;
margin-right: 1rem !important;
}
.blog-feed-controls {
float: right;
margin-top: .5rem;
}
.category-filter {
cursor: pointer;
}
#category-filters * {
color: #444;
padding: 5px 0 !important;
}
#category-filters *.active {
color: #c0143c;
}
.reset-filters {
align-self: center;
margin-left: auto;
cursor: pointer;
}
.sort-desc, .sort-asc {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: #c0143c;
cursor: pointer;
}
.sort-desc::before, .sort-asc::before {
font-family: icomoon !important;
content: '\ea4c';
color: #fff;
}
.sort-asc::before {
transform: rotate3d(1,0,0,180deg);
}
@media ( max-width: 576px ) {
.blog-feed-item {
padding-left: 1rem;
}
.inputbox-label {
display: none !important;
}
#blog-input-box form[name="createbox"] p {
flex-direction: column;
}
#blog-input-box form[name="createbox"] p .formInput {
margin-left: 0;
min-height: 40px;
}
}
@media ( max-width: 768px ) {
.blog-feed-item-date {
order: 1;
border-radius: 0;
border-top-right-radius: 4px;
margin-left: -66px;
}
}
/* Filtered format */
.filtered-filters,
.filtered-views {
border: 0 !important;
}
.filtered-views, .filtered-views-container {
padding: 1rem 0 !important;
}
/* Misc */
.mr-2 {
margin-right: .5rem !important;
}
#pfForm label {
margin-right: 1rem;
}
/* Blog SMW form to create/edit and elements */
.createbox .smwfrom-inputwrapper {
padding: 7px 10px;
background: #eee;
border-radius: 5px;
margin-bottom: 15px;
}
.createbox .blogfrom-info {
padding: 0px 10px;
}
.createbox .editOptions {
padding: 10px;
border: 1px solid #bbb;
background: #eee
}
.createbox ul.fancytree-container {
font-family: inherit;
font-size: 1em;
border-radius: 3px;
border: 1px solid #BBB;
}
.createbox span.fancytree-node {
min-height: 25px;
}
/* ############### Small Elements */
/* Cutted mib Logo in background */
.mw-parser-output .bg-mibcutlogo {
background-image: url(/copikiresources/images/mib_logo_cutted_white.svg) !important;
background-position: bottom right 10%;
background-repeat: no-repeat;
background-size: 50%;
}
/* Cutted Copiki hex in background */
.mw-parser-output .bg-copikihexcut {
background-image: url(/copikiresources/images/copiki_hex_cutted_white.svg) !important;
background-position: bottom right 10%;
background-repeat: no-repeat;
background-size: 35%;
}
.mw-parser-output .bg-copikihexcut-lightgrey {
background-image: url(/copikiresources/images/copiki_hex_cutted_lightgrey.svg) !important;
background-position: bottom right 10%;
background-repeat: no-repeat;
background-size: 35%;
}
/* Lists - Norm list CSS*/
.norm-list {
counter-reset: my-counter;
list-style-type: none;
margin: 0 0 0 2em;
padding: 0;
}
.norm-list li {
position: relative;
margin-bottom: 10px;
}
.norm-list li:before {
content: counter(my-counter, lower-alpha) ")";
position: absolute;
left: -20px;
counter-increment: my-counter;
}
.norm-list li ul {
counter-reset: nested-counter;
list-style-type: none;
}
.norm-list li ul li:before {
content: counter(nested-counter) ")";
counter-increment: nested-counter;
position: absolute;
left: -20px;
}
/* Make disable TOC number possible */
.noautonum span.tocnumber { display: none; }
/* ################################################# Custom additional styles ################################################# */
/* Badges */
.badge {
display: inline-block;
min-width: 16px;
padding: 6px 9px;
border-radius: 5px;
font-size: 16px;
text-align: center;
background: #c0143c;
color: #fefefe;
margin-left: 0;
margin-right: 6px
}
.badge.primary {
background: var(--breadcrumbs-rootnode-bg);
}
.badge.secondary {
background: #616265;
}
.badge-hp {
display: inline-block;
min-width: 16px;
padding: 2px 4px 2px 8px;
border-radius: 5px;
font-size: 16px;
text-align: center;
background: #ef8200;
color: #fefefe;
margin-left: 0;
margin-right: 6px
}
/* PDF Export and just show on PDFs */
.bs-page-content .no-pdf {
display: none !important;
}
.bs-page-content div.only-pdf {
display:block;
}
.bs-page-content span.only-pdf {
display:inline;
}
.only-pdf {
display: none !important;
}
.flexbreak {
flex-basis: 100%;
height: 0;
}
/* ============================================================
IMS tab navigation — Vorlage:IMS-Navigation (.ims-nav)
A horizontal tab bar for the "IMS-Übersicht" page family and
its sibling subpages. The tab for the page currently being
viewed is highlighted automatically: MediaWiki renders the link
that points at the current page as (no href), so no parameter or state class is needed.
Lives here (not in a TemplateStyles subpage) because the
active-tab fill follows the live brand colour via
var(--mws-primary-bg, …), and the TemplateStyles sanitizer
rejects var(). The fallback chain prefers --mws-primary-bg (the
real colour the Discovery skin paints) over --copiki-primary-color
(SCSS-baked) over a hard red, per the Copiki CSS convention.
Tabs are inline-flex pills spaced with margin (not flex gap on
the container), so the bar lays out correctly whether MediaWiki
keeps the links as direct children of .ims-nav or wraps them in
a .
The text colours carry !important to override a third-party skin
rule: Discovery styles every content link via
`.mw-body-content a:not([class*="oo-ui-"]) { color: var(--link-fg) }`
(specificity 0,2,1), which otherwise beats these rules and forces
each tab — the active one included — back to the default link
colour. Inactive tabs follow the title-bar foreground
(--title-nav-fg); the active tab is forced white. */
.ims-nav {
border-bottom: 1px solid #ddd;
margin: 0 0 1em 0;
padding: 0.4em 0;
line-height: 2.2;
text-align: center;
}
.ims-nav p {
margin: 0;
}
.ims-nav a,
.ims-nav .mw-selflink,
.ims-nav .selflink {
display: inline-flex;
align-items: center;
gap: 0.35em;
margin: 0 0.15em;
padding: 0.3em 0.85em;
border-radius: 999px;
line-height: 1.3;
font-weight: 500;
/* never underline tabs — including the active tab on hover, where the
Discovery skin would otherwise add an a:hover underline */
text-decoration: none !important;
white-space: nowrap;
}
/* inactive tabs: borderless pill in the title-bar foreground colour */
.ims-nav a {
color: var(--title-nav-fg, #747474) !important;
background: transparent;
transition: background-color 0.12s ease, color 0.12s ease;
}
.ims-nav a:not(.mw-selflink):not(.selflink):hover,
.ims-nav a:not(.mw-selflink):not(.selflink):focus {
background: var(--navbar-primary-searchform-bg, #eee8ea);
color: var(--title-nav-fg--hover, #252525) !important;
text-decoration: none;
}
/* active tab = self-link to the current page: filled brand pill, white text */
.ims-nav .mw-selflink,
.ims-nav .selflink {
background: var(--mws-primary-bg, var(--copiki-primary-color, #c0143c));
color: #fff !important;
font-weight: 700 !important;
cursor: default;
}
/* Containerfilter search box on the IMS overview pages: remove the OOUI
50em max-width cap so the filter input spans the full content width.
Scoped via .ims-nav (only present on the IMS-Übersicht overview pages and
their subpages), so containerfilter instances elsewhere keep the default
OOUI width. The filter widget carries both .container-filter-search and
.oo-ui-textInputWidget on the same element; the two-class context selector
outranks the bare .oo-ui-textInputWidget rule without needing !important. */
.ims-nav ~ div .container-filter-search {
max-width: none;
}
/* ---- IMS KPI tiles (Vorlage:IMS Kennzahlen) ---- */
.ims-kpi-row {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin: 20px 0 8px;
}
.ims-kpi {
flex: 1 1 180px;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
border-radius: 8px;
background: #f3f4f5;
border-left: 4px solid var(--copiki-secondary-color);
}
.ims-kpi__icon { font-size: 1.4em; color: var(--copiki-secondary-color); }
.ims-kpi__value { font-size: 1.6em; font-weight: 700; line-height: 1; white-space: nowrap; }
.ims-kpi__label { font-size: 1em; color: var(--copiki-secondary-color); line-height: 1.2; }
/* Label mit hinterlegtem Tooltip (Schwellenwert-Beschreibung) -> Hilfe-Cursor als Hinweis */
.ims-kpi__label[data-bs-toggle="tooltip"] { cursor: help; }
.ims-kpi--alert { border-left-color: var(--copiki-danger); }
.ims-kpi--alert .ims-kpi__icon, .ims-kpi--alert .ims-kpi__value { color: var(--copiki-danger); }
.ims-kpi--ok { border-left-color: var(--copiki-success); }
.ims-kpi--ok .ims-kpi__icon { color: var(--copiki-success); }
.ims-kpi--warn { border-left-color: var(--copiki-warn); }
.ims-kpi--warn .ims-kpi__icon { color: var(--copiki-warn); }
.ims-kpi--planned { border-left-color: var(--copiki-success-light); }
.ims-kpi--planned .ims-kpi__icon { color: var(--copiki-success-light); }
/* ---- Diagramm-Karte: Chart im Karten-Look der KPI-Kacheln ----
Gleiche Aussenabstaende wie .ims-kpi-row, damit ein Chart zwischen
zwei KPI-Reihen oben wie unten denselben Abstand hat. */
.mm-chart-card {
margin: 20px 0 8px;
padding: 10px 16px;
border-radius: 8px;
background: #f3f4f5;
}
.mm-chart-card .hc-chart { display: block; }
.mm-chart-card > p { margin: 0; }
/* Mehrere Diagramm-Karten nebeneinander (z.B. 2 halbbreite Charts in einer Reihe).
Flex haelt sie side-by-side; flex-wrap + min-width stapeln sie auf schmalen Screens. */
.mm-chart-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 8px; }
.mm-chart-row > .mm-chart-card { flex: 1 1 260px; min-width: 0; margin: 0; }
/* ---- Termin-Zelle nach Fristampel einfaerben ------------------------------
Opt-in: greift NUR innerhalb von .mm-termin-tinted, damit nicht fleet-weit
jede Terminspalte eingefaerbt wird. Auf einer Seite aktivieren, indem der
Tabellenaufruf in
gewickelt wird.
Die Markerklassen (.mm-termin--overdue usw.) setzt MM-MA-TerminIcon auf das
Uhr-Icon; dessen Farbe bleibt zusaetzlich als Inline-Style bestehen, damit
die Ampel auch ohne dieses Stylesheet farbig ist.
Zwei bewusste Entscheidungen:
1. :has() -- geht hier, weil diese Datei NICHT durch den TemplateStyles-
Sanitizer laeuft. Auf einer TemplateStyles-Seite (Vorlage-Unterseite
"styles.css") wuerde der Selektor dagegen als
"invalid-selector-list" abgelehnt (geprueft). Deshalb steht die Regel
global und nicht bei der Vorlage.
2. color-mix() statt fester Hex-Werte -- der Flaechenton wird aus demselben
Theme-Token abgeleitet wie die Ampel, bleibt also white-label-fest. Kennt
ein Browser color-mix() nicht, ist die Deklaration ungueltig und die Zelle
bleibt schlicht ungefaerbt (unkritischer Ausfall). */
/* ---- Absaetze in SMW-Ergebnistabellen -------------------------------------
MediaWiki wickelt Zellinhalte in
ein, sobald sie aus einer Vorlage oder
aus mehrzeiligem Wikitext stammen. Der Standard-Aussenabstand dieser Absaetze
blaeht jede Tabellenzeile auf -- in datatables-Listen traegt praktisch jede
Zelle so ein
, entsprechend hoch werden die Zeilen.
Aussenabstand daher raus. ABER: stehen MEHRERE Absaetze in EINER Zelle
(langer Feststellungstext mit Leerzeile), sollen sie weiterhin voneinander
abgesetzt sein -- dafuer die p + p-Regel, die nur zwischen Geschwistern
greift und den stoerenden Abstand nach aussen nicht zurueckholt. */
/* Angehaengt an SMWs eigene Typklasse auf der Zelle (smwtype_txt, smwtype_wpg,
smwtype_dat, smwtype_num ...). Bewusst NICHT ueber den Container
(.srf-datatable): dessen Struktur baut die DataTables-JS zur Laufzeit um,
die Zellklasse dagegen kommt direkt aus SMW und ist da, egal in welchem
Ergebnisformat oder wie tief verschachtelt.
Die Gegenregel ist das nackte p{margin:0.4em 0 0.5em 0} aus
resources/src/mediawiki.skinning/elements.less -- Spezifitaet (0,0,1),
wird also von jedem dieser Selektoren geschlagen, kein !important noetig. */
td[class*="smwtype_"] p,
th[class*="smwtype_"] p,
.srf-datatable td p,
.srf-datatable th p,
table.smwtable td p,
table.smwtable th p {
margin: 0;
}
td[class*="smwtype_"] p + p,
.srf-datatable td p + p,
table.smwtable td p + p {
margin-top: 0.4em;
}
/* ---- Maßnahmen-Tabellen: erste Spalte -------------------------------------
.mm-table sitzt am Container jeder SMW-Tabelle des Maßnahmen-Moduls (via
class-Parameter der Vorlage bzw. |class=mm-table in den handgeschriebenen
#ask). Damit greifen die folgenden Feinheiten modulweit und nur dort. */
/* Die Maßnahmen-Bezeichnung (MA-2026-58) soll nicht umbrechen -- sie ist ein
Bezeichner, kein Fliesstext. Wie beim Termin ohne feste Breite: das
automatische Tabellenlayout zieht die Spalte genau passend.
tr:not(.child) ist Pflicht: die aufgeklappte Detailzeile von DataTables
Responsive ist ein eigenes
mit EINER Zelle
. Die ist damit ebenfalls td:first-child --
ein ungefiltertes :first-child faengt sie mit und setzt die kompletten
ausgeklappten Details (Feststellung, Bemerkung ...) auf nowrap, sodass
lange Texte aus der Tabelle herauslaufen. Gemeint ist nur die erste Spalte
der echten Datenzeilen. */
.mm-table tbody > tr:not(.child) > td:first-child {
white-space: nowrap;
}
/* Aufklapp-Plus (DataTables Responsive) UNTER die Bezeichnung statt daneben.
Original: das Icon ist ein absolut positioniertes ::before, vertikal
zentriert am linken Rand, wofuer die Zelle padding-left:30px reserviert.
Hier: linker Einzug zurueck auf normal, unten Platz schaffen, Icon nach
unten holen und am Textanfang ausrichten.
Die volle Selektorkette ist noetig, um die DataTables-Regel (Spezifitaet
0,4,4) zu schlagen -- mit .mm-table davor sind es 0,5,4, also kein
!important noetig. */
.mm-table table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control {
padding-left: 10px;
padding-bottom: 26px;
}
.mm-table table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before {
top: auto;
bottom: 6px;
left: 10px;
margin-top: 0;
}
/* Termin-Datum nicht umbrechen. Bewusst KEINE feste Spaltenbreite: die
Tabellen laufen mit datatables-autoWidth=false, also bestimmt das
automatische Tabellenlayout des Browsers die Breite -- nowrap laesst die
Spalte damit genau so breit werden, wie das laengste Datum es braucht.
Ein Pixelwert waere geraten und wuerde bei anderen Datumsformaten oder
Sprachen wieder brechen. Gilt fuer MM-MA-TerminBadge und -TerminPlain,
also in allen Maßnahmen-Tabellen. */
.mm-termin-datum {
white-space: nowrap;
}
/* DataTables hebt die SORTIERTE Spalte hervor -- nicht per Hintergrundfarbe,
sondern per flaechendeckendem Inset-Schatten:
table.dataTable.order-column.stripe>tbody>tr.odd >.sorting_1
{ box-shadow: inset 0 0 0 9999px rgba(0,0,0,.054) }
... tr.even>.sorting_1 { ... rgba(0,0,0,.019) }
Der Schatten liegt UEBER der Hintergrundfarbe und legte einen Grauschleier
ueber den Fristton. Getroffen hat das vor allem Rot (dunkelster Ton) in
ungeraden Zeilen mit dem staerkeren Schleier -- dort war praktisch nichts
mehr zu sehen. In der getoenten Spalte ERSETZT der Fristton diese
Hervorhebung, der Schatten kann also weg.
!important bewusst: die DataTables-Regel liegt bei Spezifitaet (0,5,4) und
kommt aus einem ResourceLoader-Modul, dessen Ladereihenfolge gegenueber
dieser statisch eingebundenen Datei nicht garantiert ist. Ein reiner
Spezifitaets-Ueberbietung waere zudem an die exakte Selektorkette der
jeweiligen DataTables-Version gebunden. (Ausnahme nach .claude/rules/
frontend.md: Override von Drittanbieter-CSS mit Begruendung.) */
/* Nur Zellen, die tatsaechlich einen Fristton bekommen, verlieren den Schatten
-- in Tabellen ohne Ampel (terminvorlage=MM-MA-TerminPlain) bleibt die
Sortierspalten-Hervorhebung von DataTables also erhalten. */
.mm-termin-tinted td:has(.mm-termin--overdue),
.mm-termin-tinted td:has(.mm-termin--urgent),
.mm-termin-tinted td:has(.mm-termin--soon),
.mm-termin-tinted td:has(.mm-termin--planned) {
box-shadow: none !important;
}
.mm-termin-tinted td:has(.mm-termin--overdue) {
background-color: color-mix(in srgb, var(--copiki-danger) 14%, transparent);
}
.mm-termin-tinted td:has(.mm-termin--urgent) {
background-color: color-mix(in srgb, var(--copiki-warn) 10%, transparent);
}
.mm-termin-tinted td:has(.mm-termin--soon) {
background-color: color-mix(in srgb, var(--copiki-success) 12%, transparent);
}
.mm-termin-tinted td:has(.mm-termin--planned) {
background-color: color-mix(in srgb, var(--copiki-success-light) 12%, transparent);
}
/* ERLEDIGTE Vorgaenge nicht einfaerben. Die Ampel rechnet gegen HEUTE -- an
einer 2021 abgeschlossenen Maßnahme waere ein rotes "ueberfaellig" schlicht
falsch und wuerde Handlungsbedarf vortaeuschen, den es nicht gibt. Betrifft
vor allem die Uebersichtsseite und die Prozessseiten, die alle Status zeigen.
Erkennung ueber die Statusklasse in derselben Zeile (.completed = Abge-
schlossen, .discarded = Verworfen), moeglich seit die Status-Indikatoren
Klassen statt wiederholter IDs tragen. */
.mm-termin-tinted tr:has(.status-indicator.completed) td,
.mm-termin-tinted tr:has(.status-indicator.discarded) td {
background-color: transparent;
}
/* Highcharts: Credits ("Highcharts.com") ausblenden */
.highcharts-credits { display: none !important; }
/* ---- IMS due-date teaser (Vorlage:IMS Fälligkeiten Teaser) ---- */
.ims-due-teaser {
margin: 20px 0 16px;
padding: 10px 16px;
border-radius: 8px;
background: #f3f4f5;
}
.ims-due-teaser__title { font-weight: 700; margin-bottom: 6px; }
.ims-due-teaser__row { padding: 2px 0; }
.ims-due-teaser__date { color: #6f7273; font-size: .9em; margin-left: 8px; }
.ims-due-teaser__more { margin-top: 6px; font-size: .9em; }
/* Benutzer-Link im Meta-Block der Teaser-/Aktivitäts-Zeilen (z. B. „14.07.2026
· Name" im Aktivitäts-Feed): gedeckt grau wie das Datum statt Primärfarbe,
damit der Feed ruhig bleibt; Hover zeigt die Link-Natur per Unterstreichung. */
.ims-due-teaser__date a {
color: inherit;
}
.ims-due-teaser__date a:hover {
text-decoration: underline;
}
/* ---- IMS export buttons (CSV/PDF row above overview tables) ---- */
.ims-export-btns {
text-align: right;
margin: 4px 0 8px;
}
.ims-export-btns a {
display: inline-block;
padding: 3px 10px;
border: 1px solid #a2a9b1;
border-radius: 4px;
background: #f8f9fa;
color: #202122;
font-size: .9em;
text-decoration: none;
}
.ims-export-btns a:hover {
background: #fff;
border-color: var(--mws-primary-bg, var(--copiki-primary-color, #c0143c));
text-decoration: none;
}
/* ---- neutralize BlueSpice exportexclude screen background on IMS elements (vendor rule: .bs-universalexport-exportexclude { background-color:#EBECEC; border: 2px #EBECEC; } in BlueSpiceUniversalExport/resources/bluespice.universalExport.css). NOTE: .ims-nav deliberately NOT overridden — the nav bars' grey background IS that vendor rule. ---- */
.ims-export-btns.bs-universalexport-exportexclude {
background: transparent;
background-color: transparent;
border: none;
}
/* ---- IMS teaser row: due-date teaser + approvals card side by side ---- */
.ims-teaser-row {
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: stretch;
margin: 20px 0 16px;
}
.ims-teaser-row .ims-due-teaser {
flex: 1 1 300px;
margin: 0;
}
/* ---- Export-Buttons: plainlinks unterdrückt das Extern-Link-Icon, aber die
MW-Core-Regel (mediawiki.skinning/content.links.less: .plainlinks a.external
{ padding: 0 !important }) killt zugleich das GESAMTE Button-Padding.
!important hier gerechtfertigt: einzige Möglichkeit, ein Vendor-!important zu
überstimmen; per #mw-content-text-Anker eng auf unsere Export-Buttons begrenzt.
Wert = Button-Grundpadding aus .ims-export-btns a. ---- */
#mw-content-text .ims-export-btns.plainlinks a.external {
padding: 3px 10px !important;
}
/* ---- KPI-Kachel "Audits überfällig": komplette Kachel verlinkt auf die Audit-Seite ----
Stretched-Link-Overlay statt -Wrapper, damit Kachel-Markup/Farben unangetastet bleiben */
.ims-kpi {
position: relative;
}
.ims-kpi__link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: inherit;
}
/* Hover-Aufhellung exakt wie bei den Waben (#ffffff66 + 0.4s ease), nur auf verlinkten
Kacheln. Das Overlay hellt die Kachelfläche auf; Icon/Wert/Label werden per
position:relative ÜBER das Overlay gestapelt (Text bleibt unverändert) und per
pointer-events:none klickdurchlässig, damit die ganze Kachel klickbar bleibt. */
.ims-kpi__link:hover {
background-color: #ffffff66;
transition: background-color 0.4s ease;
}
.ims-kpi__link ~ .ims-kpi__icon,
.ims-kpi__link ~ .ims-kpi__value,
.ims-kpi__link ~ .ims-kpi__label {
position: relative;
pointer-events: none;
}
/* ---- IMS-Status-Filter (Tag , RL-Modul ext.copiki.statusFilter) ---- */
.copiki-status-filter {
margin: 8px 0;
}
/* Zeile vom Status-Filter ausgeblendet. !important bewusst: die ContainerFilter-
Textsuche zeigt/versteckt Zeilen per Inline-Style (fadeIn/fadeOut) — die Klasse
muss diese Inline-Styles schlagen, damit beide Filter unabhängig (UND) wirken. */
tr.ims-status-hidden {
display: none !important;
}
/* ---- IMS Bulk-Freigabe: Auswahlspalte (Tag , RL-Modul
ext.copiki.bulkApprove) ----
Die leeren Zellen (th/td class="copiki-bulk-col") rendert Vorlage:IMS
Elemente/SMW(/Head) serverseitig mit — nachträgliches JS-Einfügen würde das
beim tablesorter-Init eingefrorene Header→Spalten-Mapping verschieben. Sie
bleiben versteckt, bis das Modul auswählbare Zeilen findet und die Tabelle
per Klasse copiki-bulk-active aktiviert. */
.copiki-bulk-col {
display: none;
}
table.copiki-bulk-active .copiki-bulk-col {
display: table-cell;
width: 1%;
text-align: center;
}
/* ---- Norm-Wabe: Kapitel-Abdeckungszeile ("x/y Kapitel") ----
inline-block statt block, damit das
in der Vorlage (Fallback für den
PDF-Export, wo dieses Theme-CSS nicht lädt) keinen Doppelumbruch erzeugt */
.ims-wabe-cov {
display: inline-block;
margin-top: 14px;
font-size: 0.75em;
color: #dcdcdc;
}
.ims-wabe-cov .fa-list-check {
margin-right: 2px;
color: #38c748;
} |