/* * Extended Common.css file of Copiki (for the Copiki Standard Theme) * For MediaWiki 1.39.x / BS 4.x / Copiki 4 */ /* ################################################# Includes ################################################# */ /* Include Font Awesome */ @import url("fa.all.min.css"); /* Include Bootstrap Icons - Include only when template is used */ @import url("bootstrap-icons.min.css"); /* ################################################# 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); } :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); } /* ################################################# 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 6 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; } /* ########## 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); } /* ################################################# 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; } /* ################################################# Copiki & mib additional designs ################################################# */ /* ############### Template: Waben / Hexgrid - Code for responsive hexagons */ #hexGrid, #content .hexGrid { display: flex !important; flex-wrap: wrap; margin: 0 auto !important; overflow: hidden; font-size: 15px; list-style-type: none; padding-bottom: 6.5% !important; } #hexGrid *, #content #bodyContent .hexGrid * , div.ve-init-target .hex, div.ve-init-target .hex * { margin: 0; padding: 0; } #hexGrid .hex, #content #bodyContent .hexGrid .hex { position: relative; visibility:hidden; outline:1px solid transparent; } #hexGrid .hex::after, #hexGrid .logo::after, #content #bodyContent .hexGrid .hex::after, #content #bodyContent .hexGrid .logo::after, div.ve-init-target .hex::after, div.ve-init-target .logo::after { content:''; display:block; padding-bottom: 86.602%; } #hexGrid .hexIn, #content #bodyContent .hexGrid .hexIn, div.ve-init-target .hex .hexIn { position: absolute; width:96%; padding-bottom: 110.851%; margin:0 2%; overflow: hidden; visibility: hidden; outline:1px solid transparent; -webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg); -ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg); transform: rotate3d(0,0,1,-60deg) skewY(30deg); } #hexGrid .hexIn *, #content #bodyContent .hexGrid .hexIn *, div.ve-init-target .hex .hexIn *{ position: absolute; visibility: visible; outline:1px solid transparent } /* Design for //mib */ #hexGrid .hexIn duv, #content #bodyContent .hexGrid .hexIn duv, div.ve-init-target .hex .hexIn duv { position: relative; } #hexGrid .hexIn duv img, #content #bodyContent .hexGrid .hexIn duv img, div.ve-init-target .hex .hexIn duv img { max-height:1em; left: auto; right: auto; position: relative; } #hexGrid .hexLink, #content #bodyContent .hexGrid .hexLink, div.ve-init-target .hex .hexLink { display:block; width: 100%; height: 100%; text-align: center; color: #fff; background-color: #6f7273; overflow: hidden; -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg); -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg); transform: skewY(-30deg) rotate3d(0,0,1,60deg); } /*** HEX CONTENT ***/ #hexGrid .hex img, #content #bodyContent .hexGrid .hex img, div.ve-init-target .hex img { left: -100%; right: -100%; width: auto; height: 100% !important; max-width: none !important; margin: 0 auto; -webkit-transform: rotate3d(0,0,0,0deg); -ms-transform: rotate3d(0,0,0,0deg); transform: rotate3d(0,0,0,0deg); } #hexGrid .hex div.content, #content #bodyContent .hexGrid .hex div.content, div.ve-init-target .hex div.content { color: #fff; text-align: center; line-height: 1.8rem; display:flex; align-items: center; /* Vertical center alignment */ justify-content: center; /* Horizontal center alignment */ flex-wrap: wrap; padding: 3%; width: 100%; height: 100%; /* -webkit-transform: rotate3d(0,0,0,0deg); */ /* -ms-transform: rotate3d(0,0,0,0deg); */ /* transform: rotate3d(0,0,0,0deg); */ } #hexGrid .hex div.content div, #content #bodyContent .hexGrid .hex div.content div, div.ve-init-target .hex div.content div { display: flex; flex-direction: column; flex-wrap: wrap; } #hexGrid .hex h1, #hexGrid .hex p, #content #bodyContent .hexGrid .hex h1, #content #bodyContent .hexGrid .hex p, div.ve-init-target .hex h1, div.ve-init-target .hex p { color: #fff; width: 100%; padding: 5%; box-sizing: border-box; background-color: rgba(0, 128, 128, 0.8); background-color: rgba(128, 128, 128, 0.8); font-weight: 300; -webkit-transition: -webkit-transform .2s ease-out, opacity .3s ease-out; transition: transform .2s ease-out, opacity .3s ease-out; } #hexGrid .hex h1, #content #bodyContent .hexGrid .hex h1, div.ve-init-target .hex h1 { bottom: 50%; margin: 0 !important; padding-top:50%; font-size: 1.5em; z-index: 1; -webkit-transform:translate3d(0,-100%,0); -ms-transform:translate3d(0,-100%,0); transform:translate3d(0,-100%,0); } #hexGrid .hex h1::after, #content #bodyContent .hexGrid .hex h1::after, div.ve-init-target .hex h1::after { content: ''; position: absolute; bottom: 0; left: 45%; width: 10%; text-align: center; border-bottom: 1px solid #fff; } #hexGrid .hex p, #content #bodyContent .hexGrid .hex p, div.ve-init-target .hex p { top: 50%; padding-bottom: 50%; -webkit-transform:translate3d(0,100%,0); -ms-transform:translate3d(0,100%,0); transform:translate3d(0,100%,0); } #hexGrid .hex .bg-animation-overlay, #content #bodyContent .hexGrid .hex .bg-animation-overlay, div.ve-init-target .hex .bg-animation-overlay { color: #fff; width: 100%; height: 100%; padding: 5%; box-sizing: border-box; background-color: #fff; opacity: 0; -webkit-transition: opacity .3s ease-out; transition: opacity .3s ease-out; } /*** HEX LOGO ***/ #hexGrid .logo, #content #bodyContent .hexGrid .logo, div.ve-init-target .logo { display: flex; flex-direction: row; align-items: center; /* Vertical center alignment */ justify-content: center; /* Horizontal center alignment */ margin: 0 auto -65px auto; width: 33.333%; } #hexGrid .logoIn, #content #bodyContent .hexGrid .logoIn, div.ve-init-target .logoIn { position: absolute; visibility: visible; width: 100%; width: 96%; margin: 24% 2%; padding-bottom: 62.8%; /* to set height to 100% of hex */ background-position: center center; background-size: contain; background-image: url('/images_noauth/companylogo.png'); background-repeat: no-repeat; } /* For individual logos */ #content #bodyContent .hexGrid .logoIn.logoIndividual img { position: absolute; top: 50%; right: auto; bottom: auto; left: 50%; transform: translate(-50%, -50%); margin: 0; width: auto !important; height: auto !important; max-height: 100% !important; max-width: 100% !important; } #content #bodyContent .hexGrid .logoIn.logoIndividual { /* height: 63.5%; */ } /* Logo as last element in small row */ #hexGrid li:nth-child(14n+5) .logoIn, #content #bodyContent .hexGrid li:nth-child(14n+5) .logoIn { width: 142%; margin: 28% -46% 28% 4%; padding-bottom: 54.8%; } /* Logo as first element in small row */ #hexGrid li:nth-child(14n+1) .logoIn, #content #bodyContent .hexGrid li:nth-child(7n+1) .logoIn { width: 142%; margin: 28% 4% 28% -46%; padding-bottom: 54.8%; } /* Double size logo */ #hexGrid li .logoIn.doublesize, #content #bodyContent .hexGrid li .logoIn.doublesize { width: 176%; margin: 28% 12%; padding-bottom: 54.8%; } /*** HOVER EFFECT ***/ #hexGrid .hexLink:hover h1, #hexGrid .hexLink:focus h1, #hexGrid .hexLink:hover p, #hexGrid .hexLink:focus p, #content #bodyContent .hexGrid .hexLink:hover h1, #content #bodyContent .hexGrid .hexLink:focus h1, #content #bodyContent .hexGrid .hexLink:hover p, #content #bodyContent .hexGrid .hexLink:focus p { -webkit-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } #hexGrid .hexLink:hover .bg-animation-overlay, #hexGrid .hexLink:focus .bg-animation-overlay, #content #bodyContent .hexGrid .hexLink:hover .bg-animation-overlay, #content #bodyContent .hexGrid .hexLink:focus .bg-animation-overlay { opacity: 0.4; -webkit-transition: opacity .3s ease-out; transition: opacity .3s ease-out; } /* Variables for sizes */ @media (max-width: 575px) { #hexGrid, .hexGrid { width: 576px; max-width: 100%; } #hexGrid .hex div.content, #content #bodyContent .hexGrid .hex div.content, div.ve-init-target .hex div.content { font-size: 1em; } } @media (max-width: 767px) and (min-width: 576px) { #hexGrid, .hexGrid { width: 576px; max-width: 100%; } #hexGrid .hex div.content, #content #bodyContent .hexGrid .hex div.content, div.ve-init-target .hex div.content { font-size: 1.1em; } #hexGrid .logo, #content #bodyContent .hexGrid .logo, div.ve-init-target .logo { margin: 0 auto -43px auto; } } @media (max-width: 999px) and (min-width: 768px) { #hexGrid, .hexGrid { width: 768px; max-width: 100%; } #hexGrid .hex div.content, #content #bodyContent .hexGrid .hex div.content, div.ve-init-target .hex div.content { font-size: 1.3em; } #hexGrid .logo, #content #bodyContent .hexGrid .logo, div.ve-init-target .logo { /* max-height: 205px; */ margin: 0 auto -43px auto; } } @media (min-width: 1000px) { #hexGrid, .hexGrid { width: 910px; max-width: 100%; } #hexGrid .hex div.content, #content #bodyContent .hexGrid .hex div.content, div.ve-init-target .hex div.content { font-size: 1.5em; } #hexGrid .logo, #content #bodyContent .hexGrid .logo { /* max-height: 223px; */ } } /*** HEXAGON SIZING AND EVEN ROW INDENTATION ***/ /* Sizes for hexs */ @media (max-width: 575px) { #hexGrid .hex, #content #bodyContent .hexGrid .hex, div.ve-init-target .hex { width: 33%; } #hexGrid .hex:nth-child(5n+1), #content #bodyContent .hexGrid .hex:nth-child(5n+1), div.ve-init-target .hex:nth-child(5n+1) { margin-left:16.5%; } #hexGrid .logo, #content #bodyContent .hexGrid .logo { /* width: 33.333%; margin: 0 -1px -40px -1px; padding: 5px; */ } } @media (min-width: 576px) { #hexGrid .hex, #content #bodyContent .hexGrid .hex, div.ve-init-target .hex { width: 25%; } #hexGrid .hex:nth-child(7n+1), #content #bodyContent .hexGrid .hex:nth-child(7n+1), div.ve-init-target .hex:nth-child(7n+1) { margin-left:12.5%; } #hexGrid .logo:nth-child(7n+1), #content #bodyContent .hexGrid .logo:nth-child(7n+1) { /* width: 50%; */ /*overflow: scroll;*/ } } /* ###################################################################################################################### */ /* Modifications for the Visual Editor */ #content div.ve-init-target .hexGrid { margin: 0 !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; margin-bottom: 35px; } div.ve-init-target .hex.blank { border: 3px dashed lightgrey; } /*! ############################################################################### Waben neues CSS */ .hexGrid_new { display: grid; grid-template-columns: repeat(auto-fit,calc(var(--s) + 2*var(--mh))); justify-content:center; --s: 200px; /* size */ --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 */ --mv: 4px; /* vertical */ --mh: calc(var(--mv) + (var(--s) - 2*var(--hc))/2); /* horizontal */ /* for the float*/ --f: calc(2*var(--s)*var(--r) + 4*var(--mv) - 2*var(--vc) - 2px); } .hexGrid_new .container { grid-column: 1/-1; font-size: 0; /*disable white space between inline block element */ } .hexGrid_new .container .hexItem_new, div.ve-init-target .hexItem_new { --s: 200px; /* size */ --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 */ --mv: 4px; /* vertical */ --mh: calc(var(--mv) + (var(--s) - 2*var(--hc))/2); /* horizontal */ /* for the float*/ --f: calc(2*var(--s)*var(--r) + 4*var(--mv) - 2*var(--vc) - 2px); width: var(--s); margin: var(--mv) var(--mh); height: calc(var(--s)*var(--r)); display: inline-block; font-size:initial; 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)); background: red; margin-bottom: calc(var(--mv) - var(--vc)); } .hexGrid_new .container .hexItem_new:nth-child(odd), div.ve-init-target .hexItem_new:nth-child(odd) { background:green; } .hexGrid_new .container .hexItem_new.blank { background: #00000000; } .hexGrid_new .container::before{ content: ""; width: calc(var(--s)/2 + var(--mh)); float: left; height: 120%; shape-outside: repeating-linear-gradient( #0000 0 calc(var(--f) - 2px), #000 0 var(--f)); } /* ############### 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%; } /* 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; }