/* * Extended Common.css file of Copiki (for the Copiki Standard Theme) * For MediaWiki 1.39.x / BS 4.x / Copiki 4 */ /* ################################################# Includes ################################################# */ /* Font Awesome is loaded as ResourceLoader module ext.copiki.fontawesome via the BeforePageDisplay hook in the Copiki extension. */ /* Include Bootstrap Icons - Include only when template is used */ @import url("bootstrap-icons.min.css"); /* ################################################# Webfonts ################################################# */ /* Lato as WOFF2 — overrides the BlueSpiceDiscovery skin's TTF @font-face (skins/BlueSpiceDiscovery/resources/stylesheets/font.css). This file loads AFTER the skin style bundle, so for each family+weight+style the browser uses the WOFF2 src below and never fetches the heavier TTF (~556 KB -> ~216 KB). ?v=1 makes them eligible for the 1-year immutable cache (cache-headers.conf); bump it if the font files are ever replaced. */ @font-face { font-family: 'Lato'; src: url('/copikiresources/fonts/Lato-Regular.woff2?v=1') format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Lato'; src: url('/copikiresources/fonts/Lato-Italic.woff2?v=1') format('woff2'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Lato'; src: url('/copikiresources/fonts/Lato-Bold.woff2?v=1') format('woff2'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Lato'; src: url('/copikiresources/fonts/Lato-BoldItalic.woff2?v=1') format('woff2'); font-weight: bold; font-style: italic; } @font-face { font-family: 'Lato'; src: url('/copikiresources/fonts/Lato-Light.woff2?v=1') format('woff2'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Lato'; src: url('/copikiresources/fonts/Lato-LightItalic.woff2?v=1') format('woff2'); font-weight: 300; font-style: italic; } @font-face { font-family: 'Lato'; src: url('/copikiresources/fonts/Lato-Black.woff2?v=1') format('woff2'); font-weight: 900; font-style: normal; } @font-face { font-family: 'Lato'; src: url('/copikiresources/fonts/Lato-BlackItalic.woff2?v=1') format('woff2'); font-weight: 900; font-style: italic; } /* ################################################# CSS Variables ################################################# */ :root { --copiki-primary-color: #c0143c; --copiki-secondary-color: #616265; --copiki-tertiary-color: #ef8200; --copiki-verydarkgrey: #3d3d3d; --copiki-darkgrey: #616161; --copiki-middlegrey: #9d9d9d; --copiki-grey: #d8d8d9; --copiki-lightgrey: #eeeeee; --copiki-verylightgrey: #f6f6f6; --primary-element-highlight-color: var(--mws-primary-bg); --primary-element-highlight-color-light: var(--mws-primary-bg--hover); --primary-element-highlight-color-lighter: var(--mm-secondary-bg); --primary-element-filter-lighter: 1.25; --primary-element-filter-darker: 0.85; --neutral-element-selected-background-color: var(--copiki-grey); --neutral-element-selected-font-color: var(--copiki-verydarkgrey); --bs-border-radius: 0.4rem; } :root { /* Sidebar */ /* --sidebar-primary-marker--hover: var(--mws-primary-bg); --sidebar-primary-header-fg: var(--mws-primary-bg); */ --sidebar-primary-bg: var(--copiki-verylightgrey); /* --sidebar-secondary-marker--hover: var(--mws-primary-bg); --sidebar-secondary-header-fg: var(--mws-primary-bg); */ --sidebar-secondary-bg: var(--copiki-verylightgrey); --sidebar-secondary-toolbar-bg: var(--copiki-grey); } /* ################################################# General App styling ################################################# */ ::selection { color: #fff; background: var(--mws-primary-bg); } a { color: var(--link-fg); } a:visited { color: var(--link-fg); filter: brightness(var(--primary-element-filter-darker)); } #main { padding-bottom: 1rem; } h1,h2 { margin-bottom: 0; } /* ################################################# Navigation ################################################# */ /* Header */ /* Megamenu */ @media (min-width: 768px) { .dropdown-menu.megamenu .mm-bg { /* background-color: var(--mm-primary-separator); */ background-color: var(--copiki-verydarkgrey); /* opacity: 0.3; */ } } /* Sidebar */ #tp-main:before { content:""; display: block; /* margin-top: 8px; */ width: 100%; height: 20px; background-image: url('../branding/copiki_logo_rgb_fullcolor_vec.svg'); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; } #sb-pri-cnt .card-header.menu-title { font-weight: 600; } #sb-pri .list-group .list-group-item > a:active, #sb-sec .list-group .list-group-item > a:active { filter: brightness(var(--primary-element-filter-darker)); } #sb-sec a.ico-btn:hover { /* color: var(--icon-primary-fg--hover); */ color: var(--sidebar-secondary-marker--hover); /* background-color: var(--icon-primary-bg--hover); */ background-color: var(--sidebar-secondary-bg); } #sb-pri #edit-sidebar-link { color: var(--sidebar-primary-header-fg); text-decoration: none; background-color: var(--copiki-lightgrey); padding: 5px; } #sb-pri #edit-sidebar-link:hover { background-color: var(--copiki-grey); text-decoration: none; } /* Main Nav Elements */ .breadcrumb-item.root-node a:hover { background-color: var(--mws-primary-bg--hover); } .dropdown-item:focus, .dropdown-item:hover, .breadcrumb-item .dropdown-menu ul li a.dropdown-item:hover, .breadcrumb-item .dropdown-menu ul li a.dropdown-item:active { background-color: var(--navbar-primary-searchform-bg); } /* Notifications */ .mw-echo-ui-toggleReadCircleButtonWidget-circle { background-color: var(--primary-element-highlight-color); } .mw-echo-ui-toggleReadCircleButtonWidget-circle-unread { background-color: #eaecf0; } .mw-echo-ui-toggleReadCircleButtonWidget:hover .mw-echo-ui-toggleReadCircleButtonWidget-circle { background-color: var(--primary-element-highlight-color-light); background-color: var(--primary-element-highlight-color); filter: brightness(1.2); } .mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-selected { background-color: var(--primary-element-highlight-color-lighter); color: var(--primary-element-highlight-color); } .oo-ui-optionWidget-selected .mw-echo-ui-pageNotificationsOptionWidget-label-count { color: var(--primary-element-highlight-color); } .mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-selected.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-highlighted, .mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-pressed.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-highlighted { /* background-color: rgba(41,98,204,0.1); */ background-color: var(--primary-element-highlight-color-lighter); color: var(--primary-element-highlight-color); filter: brightness(0.95); } .mw-echo-ui-notificationItemWidget-icon::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--primary-element-highlight-color); mask: url('/extensions/Echo/modules/icons/edit-progressive.svg') no-repeat center / contain; -webkit-mask: url('/extensions/Echo/modules/icons/edit-progressive.svg') no-repeat center / contain; pointer-events: none; /* Ensures it doesn't interfere with clicking the icon */ } .mw-echo-ui-notificationItemWidget:focus { box-shadow: inset 0 0 0 2px var(--primary-element-highlight-color); } /* ################################################# Sections : Header ################################################# */ /* Loading indicator for pages*/ .loader-indicator.loading { background-color: var(--mws-primary-bg); } /* ################################################# Sections : Footer ################################################# */ #footer { background-color: var(--copiki-verylightgrey); } /* #footer ul { display: block; } #footer-icons { text-align: right; float: none; } */ /* ################################################# Forms and UI styling ################################################# */ /* Buttons */ .mws-button-primary:hover { opacity: 100%; background-color: var(--mws-primary-bg); color: var(--mws-primary-fg); filter: brightness(1.2); } .mws-button-primary:hover:after { color: var(--mws-primary-fg); } .mws-dropdown-primary.dropdown-menu a:hover { background-color: var(--mws-primary-bg); color: var(--mws-primary-fg); filter: brightness(1.2); } .mws-button-secondary, .mw-body-content .mws-button-secondary, .mw-body-content a.mws-button-secondary:not([class*="oo-ui-"]), [class^="mw-content-"] a.mws-button-secondary:not([class*="oo-ui-"]) { color: var(--mws-primary-bg); } .mws-button-secondary:hover, .mw-body-content .mws-button-secondary:hover { opacity: 100%; background-color: var(--bs-gray-200); color: var(--mws-secondary-fg); } button:focus:not(:focus-visible), .mws-button-primary:focus, .mws-button-primary:active, .mws-button-secondary:focus, .mws-button-secondary:active { box-shadow: 0 0 1.5px 1px #00000088 inset; } /* oo-ui Dialog */ .oo-ui-processDialog .oo-ui-actionWidget:not(.oo-ui-flaggedElement-progressive):not(.oo-ui-flaggedElement-destructive) > .oo-ui-buttonElement-button:focus { border-color: var(--primary-element-highlight-color); } /* oo-ui Tab Select Widget */ .oo-ui-tabSelectWidget-framed { background-color: var(--copiki-verylightgrey); } /* oo-ui Button */ .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(1.2); } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color), inset 0 0 0 2px #fff; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color), inset 0 0 0 2px #fff; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(0.85); } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { color: var(--primary-element-highlight-color); } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { /* color: var(--mws-primary-bg--hover); */ color: var(--primary-element-highlight-color); filter: brightness(1.2); } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(0.85); } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { color: var(--primary-element-highlight-color); } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { /* border-color: #447ff5; */ border-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button { background-color: var(--primary-element-highlight-color-lighter); color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-darker)); } /* oo-ui MultiSelect */ .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-tagMultiselectWidget-focus .oo-ui-tagMultiselectWidget-handle { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } /* oo-ui Option */ .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted, .oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted { background-color: var(--primary-element-highlight-color-lighter); color: var(--primary-element-highlight-color); } /* oo-ui Checkbox */ .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:focus + span { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:hover + span { border-color: var(--primary-element-highlight-color); filter: brightness(1.2); } .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:active + span { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); filter: brightness(0.85); } .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate + span { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); } .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:focus + span,.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:focus + span { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color),inset 0 0 0 2px #fff } .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:hover + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:hover + span { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(1.2); } .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:active + span,.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:active + span { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); filter: brightness(0.85); } /* oo-ui Radio Input */ .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:hover + span { border-color: var(--primary-element-highlight-color); filter: brightness(1.2); } .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:active + span { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(0.85); } .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked + span { border-color: var(--primary-element-highlight-color); } .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:hover + span { border-color: var(--primary-element-highlight-color); filter: brightness(1.2); } .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:active + span { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); filter: brightness(0.85); } .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:active + span:before { border-color: var(--primary-element-highlight-color); filter: brightness(0.85); } /* oo-ui Text */ .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input:focus { border-color: var(--primary-element-highlight-color); } @media screen and (min-width: 0) { .oo-ui-textInputWidget.oo-ui-widget-enabled textarea.oo-ui-inputWidget-input:focus { outline:1px solid var(--primary-element-highlight-color); } } /* oo-ui Dropdown */ .oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected { background-color: var(--primary-element-highlight-color-lighter); } /* oo-ui Images */ .oo-ui-image-progressive.oo-ui-icon-settings,.mw-ui-icon-settings-progressive:before { background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E settings %3C/title%3E%3Cg fill=%22%2336c%22%3E%3Cg xmlns:xlink=%22http://www.w3.org/1999/xlink%22 transform=%22translate%2810 10%29%22%3E%3Cpath id=%22a%22 d=%22M1.5-10h-3l-1 6.5h5m0 7h-5l1 6.5h3%22/%3E%3Cuse xlink:href=%22%23a%22 transform=%22rotate%2845%29%22/%3E%3Cuse xlink:href=%22%23a%22 transform=%22rotate%2890%29%22/%3E%3Cuse xlink:href=%22%23a%22 transform=%22rotate%28135%29%22/%3E%3C/g%3E%3Cpath d=%22M10 2.5a7.5 7.5 0 0 0 0 15 7.5 7.5 0 0 0 0-15v4a3.5 3.5 0 0 1 0 7 3.5 3.5 0 0 1 0-7%22/%3E%3C/g%3E%3C/svg%3E") } /* oo-ui Widget */ .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link { background-color: var(--primary-element-highlight-color); } .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:hover { background-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:active, .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-tool-active > .oo-ui-tool-link { background-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-darker)); } .oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:focus { outline: 1px solid var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active { background-color: var(--primary-element-highlight-color-lighter); } /* oo-ui Option Widget */ .oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected { background-color: var(--primary-element-highlight-color-lighter); color: var(--primary-element-highlight-color); /* background-color: var(--neutral-element-selected-background-color); */ /* color: var(--neutral-element-selected-font-color); */ } .oo-ui-outlineOptionWidget.oo-ui-optionWidget-pressed { background-color: var(--primary-element-highlight-color-lighter); color: var(--primary-element-highlight-color); } /* oo-ui Tag Item */ .oo-ui-tagItemWidget.oo-ui-widget-enabled:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } /* oo-ui Toggle Switch */ .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover { border-color: var(--primary-element-highlight-color-light); } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover .oo-ui-toggleSwitchWidget-grip { border-color: var(--primary-element-highlight-color-light); } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:focus { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-darker)); } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus { border-color:var(--primary-element-highlight-color); box-shadow:inset 0 0 0 1px var(--primary-element-highlight-color); } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus .oo-ui-toggleSwitchWidget-grip { border-color:var(--primary-element-highlight-color); } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:hover { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active:hover { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-darker)); } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:focus { border-color:var(--primary-element-highlight-color); } /* oo-ui Progress Bar */ .oo-ui-progressBarWidget.oo-ui-widget-enabled .oo-ui-progressBarWidget-bar { background-color: var(--primary-element-highlight-color); } /* oo-ui Tab Select Widget */ .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget { box-shadow: inset 0 0 0 0 var(--primary-element-highlight-color); } .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { color: var(--primary-element-highlight-color); box-shadow: inset 0 -2px 0 0 var(--primary-element-highlight-color); } .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover { color: var(--primary-element-highlight-color); box-shadow: inset 0 -2px 0 0 var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active { color: var(--primary-element-highlight-color); box-shadow: inset 0 -2px 0 0 var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-darker)); } /* XForm - Header */ .x-window-header-title-default { color: var(--primary-element-highlight-color); } /* XForm - Dropdown / Boundlist */ .x-form-trigger-wrap-default.x-form-trigger-wrap-focus { border-color: var(--primary-element-highlight-color-light); } .x-boundlist-item-over { background: var(--primary-element-highlight-color-lighter); border-color: var(--primary-element-highlight-color-lighter); } .x-boundlist-selected { background: var(--primary-element-highlight-color-lighter); border-color: var(--primary-element-highlight-color-lighter); } /* XForm - X-Grid*/ .x-grid-with-row-lines .x-grid-item.x-grid-item-over { /* border-color: #e6ecf9; */ border-color: var(--copiki-lightgrey); } .x-grid-item-over { /* background-color: #e6ecf9; */ background-color: var(--copiki-lightgrey); } /* MW UI - Button */ .mw-ui-button.mw-ui-progressive:not(:disabled) { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); } .mw-ui-button.mw-ui-progressive:not(:disabled):hover { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } .mw-ui-button.mw-ui-progressive:not(:disabled):active, .mw-ui-button.mw-ui-progressive:not(:disabled).is-on { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-darker)); } .mw-ui-button.mw-ui-progressive:not(:disabled):focus { box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color), inset 0 0 0 2px #ffffff; } /* MW UI - Checkbox */ .mw-ui-checkbox [type='checkbox']:enabled:hover + label:before { border-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } .mw-ui-checkbox [type='checkbox']:enabled:active + label:before { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-darker)); } .mw-ui-checkbox [type='checkbox']:enabled:checked + label:before { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); } .mw-ui-checkbox [type='checkbox']:enabled:focus + label:before { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .mw-ui-checkbox [type='checkbox']:enabled:checked:hover + label:before { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } .mw-ui-checkbox [type='checkbox']:enabled:checked:active + label:before { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-darker)); } .mw-ui-checkbox [type='checkbox']:enabled:checked:focus + label:before { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color), inset 0 0 0 2px #ffffff; } /* MW UI - Input */ .mw-ui-input:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } /* Select2 Input */ .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--primary-element-highlight-color); } /* X Button */ .x-btn-default-small { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); } .x-btn-over.x-btn-default-small { border-color: var(--primary-element-highlight-color); background-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } .x-btn.x-btn-menu-active.x-btn-default-small, .x-btn.x-btn-pressed.x-btn-default-small { border-color: var(--primary-element-highlight-color); background-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-darker)); } .mwext-dialog a.x-btn.mwext-progressive { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); } .mwext-dialog a.x-btn.mwext-progressive:hover { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } /* ################################################# MediaWiki Elements ################################################# */ .wikitable { background-color: var(--sidebar-secondary-bg); } .wikitable > tr > th, .wikitable > * > tr > th { background-color: var(--sidebar-secondary-toolbar-bg); } /* Zebra striping — opt-in helper. Add the class "striped-rows" to any wikitable / smwtable to alternate row colours (odd = white, even = secondary sidebar tint). Scoped to > tbody > so the header row stays untouched (SMW result tables and sortable tables both emit a real /). Works with jquery-tablesorter: it physically reorders the nodes on sort, so :nth-child recolours and the stripes stay visually consistent after every sort. Specificity (0,2,3) overrides the wikitable / smwtable-clean cell backgrounds without !important. Note: #fff is literally white, so odd rows stay white in dark mode. */ .striped-rows > tbody > tr:nth-child(odd) > td, .striped-rows > tbody > tr:nth-child(odd) > th { background-color: #fff; } .striped-rows > tbody > tr:nth-child(even) > td, .striped-rows > tbody > tr:nth-child(even) > th { background-color: var(--sidebar-secondary-bg); } /* ################################################# Extensions ################################################# */ /* ############### Extension:BlueSpice in General - Configuration Tables */ /* X Panel - Config and Settings Tables */ /* A lot of BS config tables run with x panels */ .x-panel .bs-crud-panel-toolbar .x-btn-icon-el { /* background-image: none !important; */ border-radius: 50%; /* background-color: bisque; */ background-color: var(--primary-element-highlight-color); display: flex; align-content: center; align-items: center; justify-content: center; } .x-panel .bs-crud-panel-toolbar .x-btn-icon-el::before { display: flex; align-items: center; flex-wrap: wrap; } .x-panel .bs-crud-panel-toolbar a.x-btn { border-radius: 25%; } .x-panel .bs-crud-panel-toolbar a.x-btn:hover { text-decoration: none; } .x-panel .bs-crud-panel-toolbar a.x-btn:hover .x-btn-icon-el { /* background-color: black; */ filter: brightness(1.2); } .x-panel .bs-crud-panel-toolbar a.x-btn .x-btn-icon-el::before { font-family: "Font Awesome 7 Free"; color: #fff; } .x-column-header-sort-ASC, .x-column-header-sort-DESC { background-color: var(--copiki-lightgrey); } .x-column-header-over { background-color: var(--copiki-lightgrey); } .x-column-header-open { background-color: var(--copiki-lightgrey); } .x-column-header-trigger { background-color: var(--copiki-lightgrey); } .x-menu-item-default.x-menu-item-focus, .x-menu-item-default.x-menu-item-active { background-color: var(--copiki-lightgrey); } .x-grid-with-row-lines .x-grid-item.x-grid-item-selected { border-color: var(--copiki-grey); } .x-grid-item-selected { background-color: var(--copiki-grey); } /* #bs-reminder-overview-grid-crud-btn-add-btnIconEl { background-image: none !important; } #bs-reminder-overview-grid-crud-btn-add-btnIconEl::before { content: "\2b"; } #bs-reminder-overview-grid-crud-btn-edit-btnIconEl { background-image: none !important; } #bs-reminder-overview-grid-crud-btn-edit-btnIconEl::before { content: "\f0ad"; } #bs-reminder-overview-grid-crud-btn-remove-btnIconEl { background-image: none !important; } #bs-reminder-overview-grid-crud-btn-remove-btnIconEl::before { content: "\f00d"; } */ body.mediawiki #content .bs-extjs-actioncolumn-icon.progressive:before, body.mediawiki #content .x-btn-glyph.progressive:before { color: var(--copiki-darkgrey); } /* ############### Extension:BlueSpiceExtendedSearch */ .bs-extendedsearch-autocomplete-popup { padding: 10px } #bs-extendedsearch-box .bs-extendedsearch-autocomplete-popup .bs-extendedsearch-autocomplete-popup-primary { border-right: none; } #nb-pri form button { border: 1px solid var(--copiki-grey); border-right: none; } #nb-pri form input { outline: 0; box-shadow: none; border: 1px solid var(--copiki-grey); border-left: none; } /* ########## Extension:DrawioEditor */ div[id*="drawio-img-box-"] { text-align: center; } div[id*="drawio-img-box-"] img { max-width: 100% !important; } a[id^="drawio-img-href-"] { cursor: zoom-in; } /*Drawio png - do not auto-resize drawio diagrams that are wrapped in a container with class drawio-linked */ .drawio-linked { overflow-x:scroll } .drawio-linked img { height: initial!important; max-width: initial!important; width: initial!important; } /* ############### Extension:BlueSpiceSocial */ .bs-social-entitylist-more { background: var(--primary-element-highlight-color); } .bs-social-entitylist-more:hover { background: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } .bs-social-entitylist-menu .bs-social-entitylist-menu-section-button .bs-social-entitylist-menu-item { background: var(--primary-element-highlight-color); } .bs-social-entitylist-menu .bs-social-entitylist-menu-section-button .bs-social-entitylist-menu-item:hover, .bs-social-entitylist-menu .bs-social-entitylist-menu-section-button .bs-social-entitylist-menu-item.active { background: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } .bs-social-entitylist-menu-item-actions-btn:hover { /* color: #3e5389; */ color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } #mw-content-text ul.entitylist a:hover { color: var(--primary-element-highlight-color) !important; } #content .bs-social-entity-right a:hover::before { color: var(--primary-element-highlight-color) !important; } /* ############### Extension:UnifiedTaskOverview */ .cdx-text-input__input:enabled:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } /* ############### Extension:PageForms */ .mw-special-FormEdit .oo-ui-fieldLayout { margin-top: 0; } /* Hide the auto-injected "Keine/unbekannt" radio option in every PageForms radiobutton group. PageForms (PF_RadioButtonInput.php:39) prepends a blank-value radio via array_unshift, so when present it's always the FIRST child of .radioButtonSpan. Two rules together cover all cases without relying solely on CSS :has() (browser support still patchy): 1) Non-mandatory groups (the common case in Copiki forms): the empty radio is always injected, so :first-child is a safe target. 2) Mandatory groups: the empty radio is only injected when the current value is also empty; :has() lets us scope to that case so we don't hide a legitimate first option when cur_value is set. */ /* #pfForm prefix is required to beat PageForms.css's own rule `#pfForm label.radioButtonItem { display: inline-block; }` — without an ID in the selector the cascade keeps the PageForms rule. */ /* TEMP DISABLED 2026-05-27 — UX evaluation: show the auto-injected empty radio option to see how a 3-option radio (incl. visible "Keine") feels to end users. Re-enable by removing the surrounding "TEMP DISABLED" block comments (the two rule blocks below). Hack affects ALL PageForms in the wiki, not just IMS Document control — switching back to hidden is a single edit here. */ /* #pfForm .radioButtonSpan:not(.mandatoryFieldSpan) > label.radioButtonItem:first-child { display: none; } #pfForm .mandatoryFieldSpan > label.radioButtonItem:has(input[type="radio"][value=""]) { display: none; } */ /* Targeted re-enable: keep the empty radio hidden ONLY for radios marked class=processType-radio inside the IMS Document control form, even while the global hide-rule above stays disabled. The processType field is mandatory and must always be one of Kernprozess / Führungsprozess / Unterstützungsprozess — showing "Keine/unbekannt" there would mislead the user. Lives in this global CSS file (not in the TemplateStyles page) because the TemplateStyles sanitizer rejects :has(). The #pfForm prefix is required to beat PageForms' own `#pfForm label.radioButtonItem { display: inline-block; }` — without the ID our class-only selector loses the cascade. */ #pfForm .ims-doc-control__form .radioButtonSpan.processType-radio > label.radioButtonItem:has(input[type="radio"][value=""]) { display: none; } /* ---- OOUI-Look für PageForms-Radiobuttons (Drop-in, kein Eingriff in die Extension) ---- PageForms rendert native (gefüllter Punkt) innerhalb von label.radioButtonItem. MediaWikis OOUI/WikimediaUI-Radios (Special:Preferences) nutzen dagegen einen separaten als optischen Kreis (dicker Ring + weißer Kern). Da wir das HTML der Extension nicht ändern, stylen wir den nativen Input per `appearance: none` direkt zum selben Look um. Akzentfarbe = Copiki-Primär (var(--primary-element-highlight-color)) für Theme-Konsistenz & White-Labeling. */ #pfForm .radioButtonItem > input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; /* 1.25em ≈ 20px @16px — gleiche Grundgröße wie die OOUI-Radios */ width: 1.25em; height: 1.25em; min-width: 1.25em; /* Größe halten, auch wenn Label-Text umbricht */ margin: 0 0.2em 0 0; padding: 0; /* Radio-Mittelpunkt nahe der optischen Textmitte; -0.25em ist der Feinabgleich, der Kreis und Label-Text auf einer Linie hält */ vertical-align: -0.25em; border: 1px solid var(--copiki-middlegrey); border-radius: 50%; background-color: #fff; cursor: pointer; transition: border-color 100ms ease, border-width 100ms ease; } #pfForm .radioButtonItem > input[type="radio"]:hover { border-color: var(--primary-element-highlight-color); } /* Checked: dicker Ring (~6px) + weißer Kern = der typische OOUI-„Donut"-Punkt */ #pfForm .radioButtonItem > input[type="radio"]:checked { border-width: 0.375em; border-color: var(--primary-element-highlight-color); } #pfForm .radioButtonItem > input[type="radio"]:focus { outline: 0; box-shadow: 0 0 0 2px var(--primary-element-highlight-color); } #pfForm .radioButtonItem > input[type="radio"]:disabled { opacity: 0.5; cursor: default; } /* ---- OOUI-Look für PageForms-Dropdowns (Drop-in, kein Eingriff in die Extension) ---- PageForms rendert ein natives (kein Drop-in, würde PageForms' `show on select`-Logik gefährden) und ist daher bewusst ausgeklammert. Scope: einzeilige Dropdowns; Mehrfach-Listboxen ([multiple]) bleiben nativ. Akzent/Focus identisch zur bestehenden .oo-ui-dropdown-Regel oben (Copiki-Primär). */ #pfForm select.createboxInput:not([multiple]) { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; min-height: 32px; /* gleiche Grundhöhe wie OOUI-Inputs (2em @16px) */ max-width: 100%; padding: 4px 30px 4px 8px; /* rechts Platz für den Chevron */ border: 1px solid var(--copiki-middlegrey); border-radius: 2px; /* OOUI-Handle-Radius */ background-color: #fff; /* OOUI-Down-Chevron (neutrales Icon-Grau #72777d), rechtsbündig zentriert */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 5.25 7 8.75l3.5-3.5' fill='none' stroke='%2372777d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; color: var(--copiki-verydarkgrey); line-height: 1.4; cursor: pointer; transition: border-color 100ms ease, box-shadow 100ms ease; } #pfForm select.createboxInput:not([multiple]):hover { border-color: var(--copiki-darkgrey); } #pfForm select.createboxInput:not([multiple]):focus { outline: 0; border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } #pfForm select.createboxInput:not([multiple]):disabled { opacity: 0.6; background-color: var(--copiki-verylightgrey); cursor: default; } /* ---- OOUI-Look für PageForms-Text-Inputs (Drop-in, kein Eingriff in die Extension) ---- PF_TextInput rendert ein natives ohne OOUI-Wrapper. Ein Klassentausch auf oo-ui-/cdx- bringt nichts (deren CSS-Selektoren brauchen das Widget-Markup), und es gibt keinen PF-Schalter/Hook für OOUI-Plain-Text. Daher themen wir die geteilte PF-Klasse `createboxInput` direkt — gleiche Maße/Akzente wie Select & Radio, damit das ganze Formular eine Familie bildet. Akzent/Focus = Copiki-Primär, identisch zur Select-Regel oben. Binäre Typen (radio/checkbox) ausgenommen. */ #pfForm input.createboxInput:not([type="checkbox"]):not([type="radio"]) { box-sizing: border-box; min-height: 32px; /* gleiche Grundhöhe wie OOUI-Inputs & unser Select */ max-width: 100%; padding: 4px 8px; border: 1px solid var(--copiki-middlegrey); border-radius: 2px; background-color: #fff; color: var(--copiki-verydarkgrey); line-height: 1.4; transition: border-color 100ms ease, box-shadow 100ms ease; } #pfForm input.createboxInput:not([type="checkbox"]):not([type="radio"]):hover { border-color: var(--copiki-darkgrey); } #pfForm input.createboxInput:not([type="checkbox"]):not([type="radio"]):focus { outline: 0; border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } #pfForm input.createboxInput:not([type="checkbox"]):not([type="radio"]):disabled { opacity: 0.6; background-color: var(--copiki-verylightgrey); cursor: default; } /* ---- Form-Look für PageForms-Token-Felder (Select2, Drop-in) ---- `input type=tokens` rendert über das Select2-jQuery-Widget. Die Klasse `createboxInput` sitzt hier auf dem Container- (nicht auf einem ), daher greift unsere input-Regel oben bewusst NICHT. Wir gleichen die Select2-Box an die Formular-Familie an (Rahmen, Radius, Höhe) und setzen bei Aktivität denselben roten Rahmen wie bei Input/Select. `.pfTokens` trifft nur PF-Token-Felder; das aufgeklappte Ergebnis-Popup wird bereits oben im Select2-Input-Abschnitt gethemt. */ .pfTokens.select2-selection--multiple { min-height: 32px; margin-bottom: 0; /* Select2-Default-Abstand entfernen, damit das Ergebnis-Popup direkt an der Box anliegt */ border: 1px solid var(--copiki-middlegrey); border-radius: 2px; background-color: #fff; transition: border-color 100ms ease, box-shadow 100ms ease; } /* Aktiv = Fokus im Suchfeld ODER Dropdown offen → roter Rahmen wie bei den anderen Feldern. :focus-within ist die robuste Hauptregel; die Select2-Modifier-Klassen decken den Fall „offen, aber Suchfeld nicht fokussiert" zusätzlich ab. */ .pfTokens.select2-selection--multiple:focus-within, .select2-container--focus .pfTokens.select2-selection--multiple, .select2-container--open .pfTokens.select2-selection--multiple { outline: 0; border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } /* ################################################# Widgets ################################################# */ /* MW Widget - Calendar */ .mw-widget-calendarWidget-day-today { box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .mw-widget-calendarWidget-item-selected { background-color: var(--primary-element-highlight-color); /* filter: brightness(0.85); */ } .mw-widget-calendarWidget-item:hover { background-color: var(--primary-element-highlight-color); filter: brightness(1.2); } .mw-widgets-datetime-calendarWidget-grid .mw-widgets-datetime-calendarWidget-cell.oo-ui-widget-enabled .oo-ui-buttonElement-button:hover { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); } .mw-widgets-datetime-calendarWidget:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color),0 2px 2px 0 rgba(0,0,0,0.25); } .mw-widgets-datetime-calendarWidget-grid .mw-widgets-datetime-calendarWidget-cell.mw-widgets-datetime-calendarWidget-selected .oo-ui-buttonElement-button { background-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-darker)); } .mw-widgets-datetime-dateTimeInputWidget.oo-ui-widget-enabled .mw-widgets-datetime-dateTimeInputWidget-editField:focus { box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color),0 0 0 1px var(--primary-element-highlight-color); } /* ################################################# Pages ################################################# */ .page-Glossar #content .mw-parser-output h2 { font-size: 1.4em; margin: 0 0 15px 0; border-bottom: 1px solid #e3e6ee; } /* ################################################# VisualEditor ################################################# */ /* VE General */ .ve-init-mw-progressBarWidget { background-color: #fff; border: 1px solid var(--primary-element-highlight-color); } .ve-init-mw-progressBarWidget-bar{ background-color:var(--primary-element-highlight-color); } .mw-pulsating-dot:before, .mw-pulsating-dot:after { background-color: var(--primary-element-highlight-color); } .mw-pulsating-dot:before, .mw-pulsating-dot:after { background-color: var(--primary-element-highlight-color); } /* VE Toolbar */ .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle { background-color: var(--primary-element-highlight-color-lighter); color: var(--primary-element-highlight-color); } .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle:hover { background-color: var(--primary-element-highlight-color-lighter); color: var(--primary-element-highlight-color); } .oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:focus { outline: 1px solid var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:active, .oo-ui-tool.oo-ui-widget-enabled.oo-ui-tool-active > .oo-ui-tool-link, .oo-ui-tool.oo-ui-widget-enabled.oo-ui-popupToolGroup-active > .oo-ui-tool-link { background-color: var(--primary-element-highlight-color-lighter); color: var(--primary-element-highlight-color); } .oo-ui-popupToolGroup-tools .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title { color: var(--primary-element-highlight-color); } /* VE Medium Settings and Insert */ .mw-widget-mediaResultWidget.oo-ui-optionWidget-highlighted, .mw-widget-mediaResultWidget.oo-ui-optionWidget-selected { box-shadow: 0 0 2px var(--primary-element-highlight-color); } /* VE ACE Editor */ .ve-ui-mwAceEditorWidget .ace_focus { border-color: #36c; border-width: 2px; margin: 0; } /* VE Widgets */ .ve-ui-targetWidget-focused { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .oo-ui-lookupElement-menu .oo-ui-optionWidget .oo-ui-labelElement-label { color: var(--primary-element-highlight-color); } /* VE Range Slider */ .oojsplus-range-widget .oojsplus-range-widget-input input[type=range]::-webkit-slider-runnable-track { /* background:#3071a9 */ background: var(--primary-element-highlight-color); border-radius: 8px; } .oojsplus-range-widget .oojsplus-range-widget-input input[type=range]:focus::-webkit-slider-runnable-track { /* background:#0060df */ background: var(--primary-element-highlight-color); filter: brightness(1.2); } .oojsplus-range-widget .oojsplus-range-widget-input input[type=range]::-moz-range-track { background: var(--primary-element-highlight-color); filter: brightness(1.2); } .oojsplus-range-widget .oojsplus-range-widget-input input[type=range]::-ms-fill-lower { background: var(--primary-element-highlight-color); filter: brightness(1.2); } .oojsplus-range-widget .oojsplus-range-widget-input input[type=range]:focus::-ms-fill-lower { background: var(--primary-element-highlight-color); border-radius: 8px; } .oojsplus-range-widget .oojsplus-range-widget-input input[type=range]::-ms-fill-upper { background: var(--primary-element-highlight-color); filter: brightness(1.2); } .oojsplus-range-widget .oojsplus-range-widget-input input[type=range]:focus::-ms-fill-upper { background: var(--primary-element-highlight-color); filter: brightness(1.2); } /* ################################################# Small Elements ################################################# */ #back-to-top:focus { border: none; } .noarticletext .bs-pt-item:hover .card-body { background-color: var(--copiki-verylightgrey); } .noarticletext .bs-pt-item:active .card-body { background-color: var(--copiki-lightgrey); } .toctogglelabel { color: var(--link-fg); } /* ################################################# Extension corrections, Bugfixes, etc. ################################################# */ /* Menus */ .mws-button-primary:hover { opacity: 100%; } /* Modals, Dialogs */ body.mediawiki .oo-ui-windowManager-modal > .oo-ui-dialog { background-color: rgba(97, 98, 101, 0.7) !important; z-index: 1052 !important; } .oo-ui-window-content { overflow: visible; } /* EmbedVideo */ .embedvideo-overlay { top: 0; position: absolute; } /* BlueSpice UniversalExport */ .bs-universalexport-exportexclude { position: relative; background: var(--sidebar-secondary-bg); border-radius: 10px; } .bs-universalexport-exportexclude::before { /* content: "No PDF Export"; position: absolute; bottom: 10px; right: 10px; background: #61626599; color: #ffffff; font-size: 0.8em; padding: 2px 6px; border-radius: 4px; z-index: 1; pointer-events: none; */ } /* IMS Document control — switch which Freigabe status is shown based on the ContentStabilization view the reader is on. The state class (copiki-cs-*) is set directly on #doccontrol-container by the {{#copiki-cs-state:}} parser function in the template wikitext, so it travels with the ParserOutput and survives every render path (normal view, PDF, book export). Default is "stable" — handles the empty-class fallback when ContentStabilization is not active or the function returned empty. Selectors compound `#doccontrol-container` and the state class on the same element (no whitespace), since the class lives on the container itself and a descendant selector would not match it. */ #doccontrol-container .ims-doc-control__status { display: none; } #doccontrol-container .ims-doc-control__status--stable { display: inline; } #doccontrol-container.copiki-cs-implicit-unstable .ims-doc-control__status--stable { display: none; } #doccontrol-container.copiki-cs-implicit-unstable .ims-doc-control__status--implicit-unstable { display: inline; } #doccontrol-container.copiki-cs-unstable .ims-doc-control__status--stable, #doccontrol-container.copiki-cs-first-unstable .ims-doc-control__status--stable { display: none; } #doccontrol-container.copiki-cs-unstable .ims-doc-control__status--unstable { display: inline; } #doccontrol-container.copiki-cs-first-unstable .ims-doc-control__status--first-unstable { display: inline; } /* "Freigegeben durch X / am Y" approval metadata: only meaningful when the namespace actually has the Freigabe (ContentStabilization) mechanism. The full view renders it as the .ims-doc-control__details sub-table; the minimal view inlines it in the .ims-doc-control__approval-detail span. Both default to HIDDEN so they never show in namespaces without stabilization — there yields no state class and the fields are empty, which would otherwise render blank "Freigegeben durch: / am:" rows. Shown only on the two approved states (stable + implicit-unstable); the real draft states never had an approval to display. */ #doccontrol-container .ims-doc-control__details { display: none; } #doccontrol-container.copiki-cs-stable .ims-doc-control__details, #doccontrol-container.copiki-cs-implicit-unstable .ims-doc-control__details { display: block; } #doccontrol-container .ims-doc-control__approval-detail { display: none; } #doccontrol-container.copiki-cs-stable .ims-doc-control__approval-detail, #doccontrol-container.copiki-cs-implicit-unstable .ims-doc-control__approval-detail { display: inline; } /* Green stable-pill label depends on whether the namespace runs the Freigabe mechanism. The tag leaves an empty state class for a non-stabilized namespace, so the DEFAULT shows "Gültige Version" (label-valid); an actually-approved page in a stabilized namespace (copiki-cs-stable) shows "Freigegeben" (label-approved). Both spans live inside .ims-doc-control__ok; only one is ever visible. */ #doccontrol-container .ims-doc-control__label-approved { display: none; } #doccontrol-container .ims-doc-control__label-valid { display: inline; } #doccontrol-container.copiki-cs-stable .ims-doc-control__label-approved { display: inline; } #doccontrol-container.copiki-cs-stable .ims-doc-control__label-valid { display: none; } /* The sub-table sits flush against the main table — no extra margin, and no top border on its first row so the seam looks continuous. */ #doccontrol-container .ims-doc-control__details > table.infobox-table { margin-top: 0; } /* ################################################# Copiki & mib additional designs ################################################# */ .copikitable { background-color: #fff; } .copikitable, .copikitable > tr > th, .copikitable > tr > td, .copikitable > * > tr > th, .copikitable > * > tr > td { /* border: 2px solid var(--sidebar-primary-bg); */ border: 2px solid #fff; } .card.copikicard .copikitable { margin: 8px 0 0; } .card.copikicard .card-body { padding-top: 0; } .card.copikicard { border: none; } .card.copikicard .card-header { font-weight: bold; } .card.copikicard .card-header:first-child { /* border: 1px solid var(--copiki-grey); */ border-bottom: none; } .card.copikicard .card-body { /* border-left: 1px solid var(--copiki-grey); border-right: 1px solid var(--copiki-grey); */ } .card.copikicard .card-body:not(:has(+ .card-footer)) { /* border-bottom: 1px solid var(--copiki-grey); */ border-bottom-left-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); } .card.copikicard.bg-primary .card-header { background-color: var(--mws-primary-bg); color: #fff; } .card.copikicard.bg-primary .card-body { background-color: var(--mws-primary-bg); } .card.copikicard.bg-light .card-header { background-color: var(--copiki-verylightgrey); } .card.copikicard.bg-light .card-body { background-color: var(--sidebar-primary-bg); } .status-indicator { position: relative; color:#a2a9b100; width:22px; height:22px; /* float:right; */ border:#a2a9b1 solid 2px; border-radius:50%; text-align:center; /* transition: box-shadow .3s ease-out; */ margin: 0 auto; } .status-indicator:hover { /* box-shadow: 0 0 3px 1px var(--primary-element-highlight-color); */ /* filter: brightness(1.1); */ } .status-indicator.inprogress { background: linear-gradient(to right, #f2c200 50%, transparent 50%); background-clip: padding-box; /* keeps fill inside border */ } .status-indicator.waiting::before, .status-indicator.waiting::after { z-index: 1000; content: ""; position: absolute; top: 4px; width: 3px; height: 10px; background-color: #a2a9b1; border-radius: 1px; } .status-indicator.waiting::before { left: 5px; } .status-indicator.waiting::after { right: 5px; } .status-indicator.discarded { border-color: #b30000; background-color: #b30000; } .status-indicator.discarded::before, .status-indicator.discarded::after { content: ""; position: absolute; left: 8px; top: 4px; width: 2px; height: 10px; background-color: #fff; border-radius: 1px; } .status-indicator.discarded::before { transform: rotate(45deg); } .status-indicator.discarded::after { transform: rotate(-45deg); } .status-indicator.completed { border-color: #2a7b2e; background-color: #2a7b2e; } .status-indicator.done::before{ content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #2a7b2e; border-width: 0 2px 2px 0; transform: rotate(45deg); } .status-indicator.completed::before { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .status-indicator.stopped { border-color: #616161; background-color: #616161; } .status-indicator.stopped::before { content: ""; position: absolute; left: 4px; top: 9px; width: 10px; height: 2px; background-color: #fff; border-radius: 1px; } /* ############### Template: Waben / Hexgrid - clip-path Honeycomb (Screen) */ .hexGrid { /* Responsive: die längste Reihe füllt die Container-Breite (100cqw), jede Wabe aber max. --hexmax. --hexn = Spalten der breiten Reihe (Muster), --hexmax = Max-Wabe je Größe. min() deckelt; calc füllt. Pro Wabe = --hexsize + 8px (2×--mh, mh ist immer 4px). Ohne cqw-Support wird --hexsize ungültig → Fallback 220px (dann greift das JS). Container = .mw-parser-output (unten). */ --hexmax: 220px; /* max size of hex */ --hexn: 4; /* cells in the wide row (3/4=4, 4/5=5, 5/6=6) */ --hexsize: min( var(--hexmax), calc( 100cqw / var(--hexn) - 8px ) ); --s: var(--hexsize, 220px); --r: 1.15; /* ratio */ /* clip-path */ --h: 0.5; --v: 0.25; --hc:calc(clamp(0,var(--h),0.5) * var(--s)) ; --vc:calc(clamp(0,var(--v),0.5) * var(--s) * var(--r)); /* margin */ --m: 4px; /* margin inbetween hex */ --mv: var(--m); /* vertical */ --mh: calc(var(--mv) + (var(--s) - 2*var(--hc))/2); /* horizontal */ --mv-top: calc( ( ( var(--s) * var(--r) ) / 4 ) - var(--mv) ); /* vertical top to ident */ /* for the float*/ --f: calc(2*var(--s)*var(--r) + 4*var(--mv) - 2*var(--vc) - 2px); display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; gap: 0; width: calc( var(--hexn) * ( var(--s) + ( var(--mh) * 2 ) ) ); list-style: none; padding: 0; margin: calc( var(--mv-top) + ( var(--mv) * 2 ) ) auto calc( var(--mv) * 2 ) auto !important; } /* Waben/Start – Wabengröße (Dropdown). Default (ohne Klasse) = 220px = größte Variante. --hexsize wird auf dem Grid gesetzt und vererbt sich an .hexItem (dort --s: var(--hexsize)) → die gesamte Wabe inkl. Schrift skaliert mit. */ /* Wabengröße (Dropdown) setzt jetzt nur das MAXIMUM; die tatsächliche Größe ergibt sich responsiv aus der Container-Breite (siehe --hexsize oben). */ .hexGrid.wabenSizeM { --hexmax: 175px; } .hexGrid.wabenSizeS { --hexmax: 130px; } /* Waben/Start – Reihenmuster (Dropdown, versteckt). Standard (keine Klasse) = 3/4 (4 Waben breit). wabenRows45 = 4/5 (5 breit), wabenRows56 = 5/6 (6 breit). Nur --hexn setzen → Breite (calc(var(--hexn)*…)) UND die responsive --hexsize (100cqw/var(--hexn)) richten sich automatisch danach. */ .hexGrid.wabenRows45 { --hexn: 5; } .hexGrid.wabenRows56 { --hexn: 6; } /* Query-Container für die responsive Wabengröße: 100cqw = Breite des Artikel- Inhalts (skaliert auch mit, wenn der Inhalt auf volle Breite gezogen wird). */ .mw-parser-output { container-type: inline-size; } /* Waben/Start – Ausrichtung (Dropdown). Mittig = Default (margin auto, zentriert). Links/Rechts = Float, damit der umliegende Fließtext um die Waben herumläuft. Das margin-Shorthand der Basis ist !important, darum hier ebenfalls !important. */ .hexGrid.wabenLeft { float: left; margin: calc( var(--mv-top) + ( var(--mv) * 2 ) ) 2rem calc( var(--mv) * 2 ) 0 !important; } .hexGrid.wabenRight { float: right; margin: calc( var(--mv-top) + ( var(--mv) * 2 ) ) 0 calc( var(--mv) * 2 ) 2rem !important; } /* Größe und Ausrichtung wirken ausschließlich in der Ansicht. Im VisualEditor bleibt die Wabenstruktur unverändert stehen – Float und Größe werden hier zurückgesetzt, damit das Umschalten den Editor nicht verschiebt. */ div.ve-init-target .hexGrid.wabenLeft, div.ve-init-target .hexGrid.wabenRight { float: none !important; margin: 0 !important; } /* Im VisualEditor gibt es keinen cqw-Container → feste Wabengröße erzwingen, sonst würde 100cqw ins Leere laufen. Größe/Muster bleiben im Editor neutral. */ div.ve-init-target .hexGrid { --hexsize: 220px !important; } /* Each hexagon item */ .hexGrid .hexItem, div.ve-init-target .hexItem { --s: var(--hexsize, 220px); /* size of hex */ --r: 1.15; /* ratio */ /* clip-path */ --h: 0.5; --v: 0.25; --hc:calc(clamp(0,var(--h),0.5) * var(--s)) ; --vc:calc(clamp(0,var(--v),0.5) * var(--s) * var(--r)); /* margin */ --m: 4px; /* margin inbetween hex */ --mv: var(--m); /* vertical */ --mh: calc(var(--mv) + (var(--s) - 2*var(--hc))/2); /* horizontal */ --mv-top: calc( ( ( var(--s) * var(--r) ) / 4 ) - var(--mv) ); /* vertical top to ident */ /* for the float*/ --f: calc(2*var(--s)*var(--r) + 4*var(--mv) - 2*var(--vc) - 2px); display: inline-block; /* Schriftgröße an die Hexgröße koppeln → Text skaliert mit --hexsize/--s mit. Innentexte (.content, h1, p) sind em-basiert, relativ zu dieser Basis. */ font-size: calc( var(--s) / 11 ); margin-bottom: calc(var(--mv) - var(--vc)); /* width: var(--s); height: auto; aspect-ratio: var(--r); */ width: var(--s); margin: calc( -1 * var(--mv-top) ) var(--mh) var(--mv) var(--mh); height: calc(var(--s)*var(--r)); /* Create the hexagon shape */ 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)); } /* Standard-Wabenfarbe = Copiki-Grau (Variable, NICHT hartcodiert). Gilt nur für echte Waben (Waben/Wabe) — Logos und Lücken sind ausgenommen. Eine im Template per |wabenfarbe= gesetzte Inline-Farbe überschreibt diesen Wert automatisch (Inline-Style schlägt jede Stylesheet-Regel ohne !important). */ .hexGrid .hexItem:not(.hexLogo):not(.blank), div.ve-init-target .hexItem:not(.hexLogo):not(.blank) { background: var(--copiki-secondary-color); } /* Reihen-Versatz je Muster: die SCHMALE Reihe wird um eine halbe Wabe eingerückt. Muster (3/4 = Standard, 4/5, 5/6) und Start (.startFour = breite Reihe zuerst) schließen sich per :not() gegenseitig aus → genau EINE Versatz-Regel je Kombi, keine Resets nötig. Periode = Summe der beiden Reihenlängen (7, 9, 11); der Versatz sitzt auf der ersten Wabe jeder schmalen Reihe. Versatz = halbe Wabe. */ /* 3/4 (Standard, keine Muster-Klasse) */ .hexGrid:not(.wabenRows45):not(.wabenRows56):not(.startFour) > .hexItem:nth-of-type(7n+1) { margin-left: calc( (var(--s) / 2 ) + ( var(--m) * 2 ) ); } .hexGrid:not(.wabenRows45):not(.wabenRows56).startFour > .hexItem:nth-of-type(7n+5) { margin-left: calc( (var(--s) / 2 ) + ( var(--m) * 2 ) ); } /* 4/5 */ .hexGrid.wabenRows45:not(.startFour) > .hexItem:nth-of-type(9n+1) { margin-left: calc( (var(--s) / 2 ) + ( var(--m) * 2 ) ); } .hexGrid.wabenRows45.startFour > .hexItem:nth-of-type(9n+6) { margin-left: calc( (var(--s) / 2 ) + ( var(--m) * 2 ) ); } /* 5/6 */ .hexGrid.wabenRows56:not(.startFour) > .hexItem:nth-of-type(11n+1) { margin-left: calc( (var(--s) / 2 ) + ( var(--m) * 2 ) ); } .hexGrid.wabenRows56.startFour > .hexItem:nth-of-type(11n+7) { margin-left: calc( (var(--s) / 2 ) + ( var(--m) * 2 ) ); } /* .hexGrid .hexItem:nth-child(odd), div.ve-init-target .hexItem:nth-child(odd) { background:green; } */ /* The hexagon shape via clip-path */ .hexGrid .hexItem .hexLink, div.ve-init-target .hexItem .hexLink { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: #ffffff00; transition: background-color 0.4s ease; } /* Hover effect */ .hexGrid .hexItem:hover .hexLink, div.ve-init-target .hexItem:hover .hexLink { text-decoration: none; background-color: #ffffff66; transition: background-color 0.4s ease; } /* Skin re-adds the link underline on :focus / :active — this shows up when a tile is clicked and the mouse is dragged off and released beside it (the drag-cancelled click leaves the focused/active). The 's underline draws through .content, so it has to be cleared on .hexLink itself. */ .hexGrid .hexItem .hexLink:focus, .hexGrid .hexItem .hexLink:active, .hexGrid .hexItem .hexLink:visited, div.ve-init-target .hexItem .hexLink:focus, div.ve-init-target .hexItem .hexLink:active { text-decoration: none; } /* Content styling */ .hexGrid .hexItem .hexLink .content, div.ve-init-target .hexItem .hexLink .content { align-content: center; width: 100%; height: 100%; padding: var(--mv-top) 10px; color: #fff; text-align: center; font-size: 1.2em; line-height: 1.15; text-decoration: none; } /* hexagon logo */ .hexGrid .hexItem.hexLogo { background: none; padding: var(--mv-top) 0; } .hexGrid .hexItem.hexLogo .logoIn, div.ve-init-target .hexItem.hexLogo .logoIn { width: 100%; height: 100%; background-color: unset; background-position: center center; background-size: contain; background-image: url('/images_noauth/companylogo.png'); background-repeat: no-repeat; } /* Logo: „Doppelte Größe" (2 Waben) – für ein Logo in der Zeilenmitte. Das Logo-Template fügt zusätzlich einen versteckten
  • -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 #616265; } .ims-kpi__icon { font-size: 1.4em; color: #6f7273; } .ims-kpi__value { font-size: 1.6em; font-weight: 700; line-height: 1; white-space: nowrap; } .ims-kpi__label { font-size: 1em; color: #6f7273; line-height: 1.2; } .ims-kpi--alert { border-left-color: #c0143c; } .ims-kpi--alert .ims-kpi__icon, .ims-kpi--alert .ims-kpi__value { color: #c0143c; } .ims-kpi--ok { border-left-color: #38c748; } .ims-kpi--ok .ims-kpi__icon { color: #38c748; } .ims-kpi--warn { border-left-color: #e49c00; } .ims-kpi--warn .ims-kpi__icon { color: #e49c00; } /* ---- 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; }