DevWiki Articles MediaWiki:Citizen.css

MediaWiki:Citizen.css

MediaWiki interface page

Hinweis: Leere nach dem Speichern den Browser-Cache, um die Änderungen sehen zu können.

  • Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
  • Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
  • Internet Explorer/Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
  • Opera: Strg+F5
/* All CSS here will be loaded for users of the Citizen skin */

/**
  * MENU
  */
.mw-portal > h3::after {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    align-self: center;
    background-position: center;
    background-repeat: no-repeat;
    content: '';
    display: block;
    margin-left: 15px;
    background-size: contain;
    opacity: var(--opacity-icon-base);
    transition: opacity 200ms ease;
    float: right;
}
#p-Menschengruppen-label::after {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gU3ZnIFZlY3RvciBJY29ucyA6IGh0dHA6Ly93d3cub25saW5ld2ViZm9udHMuY29tL2ljb24gLS0+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAwIDEwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPG1ldGFkYXRhPiBTdmcgVmVjdG9yIEljb25zIDogaHR0cDovL3d3dy5vbmxpbmV3ZWJmb250cy5jb20vaWNvbiA8L21ldGFkYXRhPg0KPGc+PHBhdGggZD0iTTk5MCw4MTQuOUM5OTAsODE0LjksOTkwLDgxNSw5OTAsODE0LjljMCwxNi45LTEzLjYsMzAuNS0zMC41LDMwLjVINzMyLjFjMTcuMS0zLjcsMjkuOC0xOC44LDI5LjgtMzdjMCwwLDAtMC4xLDAtMC4xaDBjMCwwLDAtMTM4LjEtMTAxLjItMTg4LjNjLTQzLjMtMjEuNS00Ni4yLTE3LjQtNjcuNy0yMi41bDAuNi01OS44YzAsMC0yMy42LTE4LTMxLTc0LjVjLTE0LjgsNC4zLTE5LjctMTcuMy0yMC41LTMxYy0wLjgtMTMuMy04LjYtNTQuNyw5LjUtNTFjLTMuNy0yNy43LTYuNC01Mi42LTUtNjUuOGM0LjUtNDYuNCw0OS40LTk0LjksMTE4LjQtOTguNGM4MS4yLDMuNSwxMTMuNCw1MiwxMTcuOSw5OC40YzEuMywxMy4yLTEuNiwzOC4yLTUuMyw2NS44YzE4LjEtMy43LDEwLjIsMzcuNyw5LjMsNTFjLTAuOCwxMy43LTUuOCwzNS4yLTIwLjYsMzFjLTcuNCw1Ni41LTMxLDc0LjQtMzEsNzQuNGwwLjUsNTkuOGMwLDAsMTUsOC41LDc4LjEsMzQuNmM2My4xLDI2LjEsNDMuMyw2LjYsOTQuNywzMkM5OTAsNzA0LjEsOTkwLDgxNC45LDk5MCw4MTQuOUw5OTAsODE0Ljl6IE01MzIuMSw2MTAuNWM2OS40LDI4LjcsNDcuNiw3LjIsMTA0LjEsMzUuM2M4OS4zLDQ0LjMsODkuMywxNjYuMSw4OS4zLDE2Ni4xaDBjMCwwLDAsMC4xLDAsMC4xYzAsMTguNS0xNSwzMy40LTMzLjYsMzMuNEg0My42QzI1LDg0NS40LDEwLDgzMC40LDEwLDgxMmMwLDAsMCwwLDAtMC4xbDAsMGMwLDAsMC0xMjEuOCw4OS4zLTE2Ni4xYzU2LjUtMjgsMzQuOC01LjMsMTA0LjEtMzMuOWM2OS40LTI4LjYsODUuOC0zOC42LDg1LjgtMzguNmwwLjctNjZjMCwwLTI2LTE5LjgtMzQtODEuOWMtMTYuMiw0LjctMjEuNi0xOS0yMi42LTM0LjFjLTAuOS0xNC42LTkuNC02MC4xLDEwLjQtNTZjLTQuMS0zMC40LTctNTcuOC01LjUtNzIuM2M1LTUxLDU0LjMtMTA0LjMsMTMwLjItMTA4LjJjODkuMywzLjksMTI0LjcsNTcuMSwxMjkuNiwxMDguMWMxLjUsMTQuNS0xLjcsNDItNS44LDcyLjNjMTkuOC00LjEsMTEuMiw0MS40LDEwLjIsNTZjLTAuOSwxNS4xLTYuNCwzOC43LTIyLjYsMzRjLTguMSw2Mi4xLTM0LjEsODEuOC0zNC4xLDgxLjhsMC42LDY1LjdDNDQ2LjMsNTcyLjUsNDYyLjgsNTgxLjksNTMyLjEsNjEwLjUiLz48L2c+DQo8L3N2Zz4=")
}
#p-Personen-label::after {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gU3ZnIFZlY3RvciBJY29ucyA6IGh0dHA6Ly93d3cub25saW5ld2ViZm9udHMuY29tL2ljb24gLS0+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAwIDEwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPG1ldGFkYXRhPiBTdmcgVmVjdG9yIEljb25zIDogaHR0cDovL3d3dy5vbmxpbmV3ZWJmb250cy5jb20vaWNvbiA8L21ldGFkYXRhPg0KPGc+PHBhdGggZD0iTTk5MCw5OTBjMCwwLDAtNjcuNC01LjYtMTAyLjZjLTQuNi0yNy44LTQzLjEtNjQuNi0yMDctMTI0LjhjLTE2MS4zLTU5LjItMTUxLjMtMzAuNC0xNTEuMy0xMzkuM2MwLTcwLjcsMzYtMjkuNiw1OS0xNjMuOGM4LjktNTIuOCwxNi4xLTE3LjYsMzUuNS0xMDIuM2MxMC4yLTQ0LjQtNi45LTQ3LjctNC44LTY4LjljMi0yMS4yLDQuMS00MC4xLDcuOS04My41QzcyOC4yLDE1MS4xLDY3OC40LDEwLDUwMCwxMFMyNzEuOCwxNTEuMSwyNzYuNywyMDVjMy44LDQzLjEsNS45LDYyLjMsNy45LDgzLjVjMiwyMS4yLTE1LjEsMjQuNS00LjgsNjguOWMxOS40LDg0LjUsMjYuNSw0OS4zLDM1LjUsMTAyLjNjMjMsMTM0LjIsNTksOTMuMiw1OSwxNjMuOGMwLDEwOS4yLDEwLDgwLjQtMTUxLjMsMTM5LjNjLTE2My44LDYwLTIwMi42LDk3LTIwNywxMjQuOEMxMCw5MjIuNiwxMCw5OTAsMTAsOTkwaDQ5MEg5OTB6Ii8+PC9nPg0KPC9zdmc+")
}
#p-Tiere-label::after {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4PSIwIiB5PSIwIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDUwMCA1MDAiPg0KPGc+DQoJPHBhdGggZD0iTTEyLjksMTUzYzAuOC00LjgsMS4zLTkuNywyLjYtMTQuNWMyLjItOC4xLDUuMi0xNS43LDEwLjYtMjIuMWMxMC0xMS45LDIyLjYtMTUuNiwzNy41LTExLjhjOS43LDIuNSwxNy45LDcuNywyNS4yLDE0LjQNCgkJYzE5LjYsMTcuNywzMC45LDQwLjMsMzcuMiw2NS42YzIuMyw5LjEsMy41LDE4LjMsMy42LDI3LjdjMC4xLDE0LjctMi4xLDI5LjEtMTAsNDEuOWMtNS44LDkuNC0xMy45LDE1LjctMjUsMTcuNQ0KCQljLTcuOCwxLjMtMTUuMi0wLjItMjIuMy0zLjJjLTEwLTQuMi0xOC4xLTEwLjgtMjUuNC0xOC42Yy0xMS4yLTEyLTE5LjItMjYtMjUuMS00MS4yYy00LjYtMTEuOS03LjUtMjQuMy04LjctMzcNCgkJYzAtMC40LTAuMi0wLjctMC4zLTEuMUMxMi45LDE2NC42LDEyLjksMTU4LjgsMTIuOSwxNTN6Ii8+DQoJPHBhdGggZD0iTTE5MS40LDI0LjRjNC40LDEuMSw4LjgsMi4zLDEyLjgsNC41YzkuNCw1LjMsMTYuNCwxMy4xLDIyLjEsMjIuMWM4LjcsMTMuOSwxMy41LDI5LjIsMTYsNDUuM2MxLjQsOS40LDEuOSwxOC45LDEuNCwyOC41DQoJCWMtMC45LDE3LjktNC45LDM1LTE0LjIsNTAuNmMtNC4zLDcuMy05LjgsMTMuNi0xNywxOC4yYy0xMy4yLDguMy0yOC4zLDcuNS00MS40LTIuMWMtOC41LTYuMi0xNC44LTE0LjMtMTkuOC0yMy41DQoJCWMtNy41LTEzLjctMTEuNy0yOC4zLTEzLjYtNDMuN2MtMi4xLTE2LjktMS41LTMzLjcsMi43LTUwLjNjMy0xMS43LDcuNi0yMi43LDE1LTMyLjNjNi43LTguNiwxNS0xNC45LDI2LTE3YzAuMiwwLDAuNS0wLjIsMC43LTAuMw0KCQlDMTg1LjEsMjQuNCwxODguMiwyNC40LDE5MS40LDI0LjR6Ii8+DQoJPHBhdGggZD0iTTMxMC45LDQ3Ni41Yy03LjYsMC44LTE2LTEuOC0yNC42LTMuM2MtMTYuOS0zLTMzLjktNS44LTUwLjktOC4yYy0xMi4zLTEuNy0yNC42LTMuMi0zNi45LTQuNGMtOC4xLTAuOC0xNi4zLTEuMy0yNC41LTEuNw0KCQljLTcuNi0wLjQtMTUuMSwwLTIyLjctMC4zYy0yMC44LTAuOC00MC43LTUuMi01OC43LTE2LjNjLTE4LjktMTEuNi0yOS44LTI4LjUtMzIuOS01MC41Yy0wLjYtNC4zLTEuNy04LjUtMS42LTEyLjkNCgkJYzAuMy03LjUsMi4xLTE0LjcsNC4yLTIxLjhjMS42LTUuNSw3LjMtMzIuNSw0NC4yLTQ4LjZjNC44LTIuMSw3LjMtMy40LDEzLTYuMWM3LjMtMy41LDE0LjItNy4yLDIwLjUtMTIuMg0KCQljMTAuOS04LjcsMjAuNC0xOC43LDI5LjctMjkuMWM4LjMtOS4zLDE1LjgtMTkuMiwyMy44LTI4LjZjMTAtMTEuNywyMi4xLTIwLjIsMzcuNi0yMy4xYzExLjItMiwyMS43LDAuMywzMS41LDUuOA0KCQljOC42LDQuOCwyMy45LDIyLjMsMjcuMSwyOGMxNC44LDI2LjIsMjkuNSw1Mi40LDQ4LjEsNzYuMWM4LjcsMTEsMzQuOCwzNy43LDM3LjUsNDJjNy40LDExLjgsMTIuOSwyNS41LDE0LjgsMzkuNA0KCQljMy42LDI2LTcuMSw1Mi41LTMzLjMsNjUuOWMtMTAuNSw1LjQtMjEuOCw4LjEtMzMuNSw5LjRDMzE5LjYsNDc2LjUsMzE1LjksNDc2LjQsMzEwLjksNDc2LjVDMzAzLjMsNDc3LjMsMzE1LjksNDc2LjQsMzEwLjksNDc2LjUNCgkJeiIvPg0KCTxwYXRoIGQ9Ik00ODgsMTk4LjhjLTAuMiwxNS0zLjgsMjkuMi05LjYsNDIuOGMtNy43LDE3LjktMTguNSwzMy44LTMyLjksNDdjLTExLDEwLjEtMjMuMywxOC4xLTM4LDIxLjZjLTguOSwyLjEtMTcuOCwxLjktMjYuMi0yLjENCgkJYy05LjQtNC40LTE1LjMtMTItMTguNy0yMS41Yy0zLjEtOC42LTQuMS0xNy41LTMuNC0yNi42YzIuMS0yOSwxNC4yLTUzLjgsMzIuOC03NS42YzkuNC0xMSwyMC4zLTIwLjEsMzMuNC0yNi40DQoJCWM3LjktMy44LDE2LTYuMywyNC45LTYuMmMxNSwwLjEsMjUuOCw3LjEsMzIuNCwyMC40QzQ4Ni4zLDE3OS43LDQ4OCwxODguNCw0ODgsMTk4Ljh6Ii8+DQoJPHBhdGggZD0iTTI2OCwxNTIuMWMwLjEtMTguMSw0LjQtMzUuMywxMS43LTUxLjhjNS4zLTEyLDEyLTIzLjEsMjAuNy0zM2M5LjYtMTAuOSwyMC40LTIwLjEsMzQuNS0yNC43YzExLjEtMy42LDIxLjktMy40LDMyLDMuMQ0KCQljOC4yLDUuMiwxMy4yLDEzLDE2LjQsMjJjNC4yLDExLjUsNS4xLDIzLjMsNC4xLDM1LjRjLTEuOSwyNC4zLTEwLjIsNDYuNC0yMy44LDY2LjVjLTcuNywxMS40LTE3LjEsMjEuMy0yOC44LDI4LjgNCgkJYy04LDUuMS0xNi41LDguNi0yNi4yLDguOWMtMTMuMiwwLjQtMjMuMy01LjMtMzAuNi0xNi4xYy01LjMtNy44LTcuOS0xNi43LTkuMi0yNkMyNjguMiwxNjAuOCwyNjcuOSwxNTYuNSwyNjgsMTUyLjF6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==")
}

/**
  * VE
  */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement.oo-ui-buttonElement-framed.oo-ui-labelElement.oo-ui-buttonWidget a {
    background: var(--color-primary);
    color: white;
}
.ve-ui-toolbar-group-help.oo-ui-widget.oo-ui-widget-enabled.oo-ui-toolGroup.oo-ui-barToolGroup {
    display: none;
}
.oo-ui-toolbar-tools {
    display: inline !important;
}
.oo-ui-buttonElement-button {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 3px !important;
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-labelElement input {
    border-radius: var(--border-radius--medium) !important;
    font-size: 14px;
    font-weight: normal;
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-labelElement.oo-ui-optionWidget.oo-ui-buttonElement.oo-ui-buttonElement-framed.oo-ui-buttonOptionWidget:not(.oo-ui-buttonElement-active) a {
    background: transparent;
    color: var(--color-base) !important;
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-labelElement:not(.oo-ui-flaggedElement-primary) input {
    background-color: transparent;
    color: var(--color-base) !important;
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-labelElement:not(.oo-ui-flaggedElement-primary) input:hover {
    background-color: var(--background-color-quiet--hover);
    color: var(--color-base--emphasized) !important;
}
.oo-ui-processDialog-actions-other a {
    background-color: transparent !important;
    color: var(--color-base) !important;
}
.oo-ui-processDialog-actions-other a:hover {
    background-color: var(--background-color-quiet--hover) !important;
    color: var(--color-base--emphasized) !important;
}
.cancelLink > span > a {
    background-color: var(--color-destructive) !important;
    border-radius: var(--border-radius--medium) !important;
    font-size: 14px !important;
    font-weight: normal !important;
}
.cancelLink > span > a:hover {
    background-color: var(--color-destructive--hover) !important;
}
.ve-ui-toolbar-saveButton::before, .ve-ui-toolbar-saveButton::after {
    background: white !important;
}
.oo-ui-popupToolGroup-handle:focus {
    box-shadow: none !important;
    outline: none !important;
}
.oo-ui-toolGroup-tools.oo-ui-clippableElement-clippable.oo-ui-floatableElement-floatable {
    margin: 5px 0 0 0 !important;
    width: auto !important;
    border-radius: var(--border-radius--medium);
    box-shadow: 0 14px 28px rgba(0,0,0,0.0625),0 10px 10px rgba(0,0,0,0.055);
    border: none;
}
.oo-ui-window-frame {
	border-radius: var(--border-radius--medium) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,0.0625),0 10px 10px rgba(0,0,0,0.055) !important;
    border: none !important;
    overflow: hidden;
}
.ve-ui-mwCategoryItemWidget a {
    background: var(--background-color-framed) !important;
}

/**
  * Notification
  */
.mw-echo-ui-notificationItemWidget {
    background-color: #eaecf0 !important;
}

/**
  * View
  */
#siteSub {
	display: none;
}

/* Map Fullwindow */
.oo-ui-windowManager-modal > .oo-ui-dialog {
    z-index: 100;
}

/**
  * History
  */
#pagehistory li {
    border-radius: 3px;
    overflow: hidden;
    padding: 10px;
    margin: 5px;
}

/**
  * Talk
  */
.page-actions-more-menu {
    margin-top: 5px;
}
#pt-notifications-alert .mw-echo-notifications-badge:focus, #pt-notifications-notice .mw-echo-notifications-badge:focus {
    box-shadow: none;
}
#mwe-upwiz-steps {
    border-radius: 8px;
    overflow: hidden;
}
.mw-ui-button.mw-ui-quiet.side-rail-toggle-button {
    min-width: 30px;
    min-height: 30px;
    padding: 3px;
    border-radius: 3px;
    border: none;
}
.flow-topic-titlebar {
    border-radius: 3px;
}
.mw-ui-button {
    border: none;
}
.flow-menu-js-drop a {
    border-radius: 3px !important;
}
.mw-ui-button-container.flow-list {
    border-radius: var(--border-radius--medium);
    box-shadow: 0 14px 28px rgba(0,0,0,0.0625),0 10px 10px rgba(0,0,0,0.055);
    border: none;
    margin-top: 5px;
    padding: 8px 0;
    overflow: hidden;
}
.mw-ui-button {
    font-weight: normal !important;
}
.mw-ui-button:hover {
    background-color: var(--background-color-primary--hover) !important;
}
.mw-ui-button.mw-ui-quiet.mw-ui-icon.mw-ui-icon-before.mw-ui-icon-trash {
    background: var(--color-destructive);
    color: white;
}
.mw-ui-button.mw-ui-quiet.mw-ui-icon.mw-ui-icon-before.mw-ui-icon-trash:hover {
    background: var(--color-destructive--hover);
}
.mw-ui-icon.mw-ui-icon-before::before {
    opacity: .5;
    scale: .7;
}
.mw-ui-button.mw-ui-quiet.mw-ui-icon.mw-ui-icon-before.mw-ui-icon-trash::before {
    filter: invert(1);
    opacity: .8;
}
.oo-ui-popupWidget-popup {
    border-radius: var(--border-radius--medium);
}

/**
  * Moderation
  */
.usermessage {
	width: 100%;
	margin-top: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.usermessage a {
	max-width: var(--width-layout);
	background-color: #ffb952;
	border-radius: 8px;
	padding: 10px 15px;
	font-size: .875rem;
	color: rgba(0,0,0,.6);
}

/**
  * Search
  */
.grid.uls-menu.uls-wide {
    border-radius: var(--border-radius--medium);
    overflow: hidden;
}

@media screen and (min-width: 1300px) {
	.fadeOut {
	    margin-top: -100px !important;
	}
	#searchform {
	    z-index: 10;
	    pointer-events: auto;
	    transform: none;
	    position: absolute;
	    left: 30%;
	    right: 30%;
	    transition: margin .5s ease-in-out !important;
	}
	#searchInput {
	    width: 100%;
	}
	#search-toggle {
	    right: calc(30% - 10px);
	    transition: margin .5s ease-in-out !important;
	}
	#search-toggle-icon {
		position: absolute;
	    right: calc(30% - 10px);
	    transition: margin .5s ease-in-out !important;
	}
	#mw-header-tools {
	    margin-right: 8px;
	}
	#mw-drawer {
	    z-index: 30;
	}
	#mw-drawer-button {
	    z-index: 32;
	}
	#mw-drawer-button-icon {
	    z-index: 31;
	}
}

/**
  * From https://star-citizen.wiki
  */

body.skin-citizen > .suggestions {
    display: none !important;
}

body.skin-citizen table.wikitable tr th,
body.skin-citizen table.wikitable tr td,
body.skin-citizen table.broadtable tr td,
body.skin-citizen table.broadtable tr th {
	padding-left: 10px;
}

/** Logo SVG Style **/
html.skin-citizen-light body.skin-citizen .mw-logo-icon {
	filter: opacity(0.55);
}

html.skin-citizen-dark body.skin-citizen .mw-logo-icon {
	filter: invert(1) opacity(0.55);
}

body.skin-citizen .hatnote {
	max-width: var(--width-layout);
    margin-right: auto;
    margin-left: auto;

    margin-top: 0.6rem;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 0.875rem;
    line-height: 1.4;
    background-color: var( --background-color-framed );
    color: var( --base-color );
}

/** Table Style **/
body.skin-citizen table {
    overflow-x: scroll;
}

body.skin-citizen .mw-capiunto-infobox {
    /*display: table;*/
    width: clamp( 280px, 400px, 90vw );
    color: var( --color-base--subtle );
    background: var( --background-color-framed );
    border-color: var( --border-color-base );
    padding: 0;
    border-spacing: 0;
    border-radius: 1rem;
    clear: left;
    margin-bottom: 1rem;
}

body.skin-citizen .mw-capiunto-infobox .mw-capiunto-infobox-header.table-image {
	background: var( --background-color-framed--active );
}

body.skin-citizen .mw-capiunto-infobox tr th,
body.skin-citizen .mw-capiunto-infobox tr td {
    border-bottom: 0;
}

table.mw-capiunto-infobox tbody {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 10px;
}

table.mw-capiunto-infobox tbody tr td,
table.mw-capiunto-infobox tbody tr th {
    padding: 0 20px;
}

table.mw-capiunto-infobox tbody tr {
    margin-top: 10px;   
    display: flex;
    flex-direction: column;
}

table.mw-capiunto-infobox tbody .row-image {
	margin-top: 0;
	margin-bottom: 5px;
    flex-basis: 100%;
}

table.mw-capiunto-infobox tbody .row-image.padded {
    padding: 0.5rem 1rem 0 1rem;
}

table.mw-capiunto-infobox tbody .row-image td {
    padding: 0 !important;
}

table.mw-capiunto-infobox tbody .row-image img {
    width: 100%;
    object-fit: cover;
}

table.mw-capiunto-infobox tbody .row-image .placeholder img {
    max-height: 224px;
}

table.mw-capiunto-infobox tbody .row-header {
    flex-basis: 100%;
    padding-top: 15px;
    border-top: 1px solid var(--border-color-base--darker);
}

table.mw-capiunto-infobox tbody .row-header td {
    font-size: 1rem;
    text-align: left;
    font-weight: bold;
    color: var(--color-base);
}

table.mw-capiunto-infobox tbody .row-subheader {
    flex-basis: 100%;
    margin-bottom: 10px;
    text-align: left;
}

table.mw-capiunto-infobox tbody .row-title {
	color: var(--color-base--emphasized);
    margin-top: 20px;
    padding-top: 0;
    border-top: 0;
    flex-basis: 100%;
}

table.mw-capiunto-infobox tbody > .row-title {
    margin-top: 10px;
}

table.mw-capiunto-infobox tbody .row-title td {
    text-align: left;
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: bold;
    color: var(--color-base);
}

table.mw-capiunto-infobox tbody .row-title + .row-header {
    border-top: 0;
    margin-top: 0;
}

table.mw-capiunto-infobox tbody .row {
    min-width: 25%;
}

table.mw-capiunto-infobox tbody .row.col-full  {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
}

table.mw-capiunto-infobox tbody .row.col-full th,
table.mw-capiunto-infobox tbody .row.col-full td {
    width: 100%;
}

table.mw-capiunto-infobox tbody .row.col1  {
    width: 100%;
    flex-direction: row;
}

table.mw-capiunto-infobox tbody .row.col1 th {
    width: 35%;
}

table.mw-capiunto-infobox tbody .row.col1 td {
    width: 65%;
}

table.mw-capiunto-infobox tbody .row.col2 {
    width: 50%;
}


table.mw-capiunto-infobox tbody .row.col3 {
    width: calc(100%/3);
}


table.mw-capiunto-infobox tbody .row.col4 {
    width: 25%;
}

table.mw-capiunto-infobox tbody .row td,
table.mw-capiunto-infobox tbody .row th {
    text-align: left;
}

table.mw-capiunto-infobox tbody .row th {
    font-weight: 400;
}

table.mw-capiunto-infobox tbody .row td {
    font-weight: bold;
    color: var(--color-base);
}

/** Input fix **/
.mw-parser-output .mw-ui-input {
    box-shadow: inset 0 0 0 1px var( --color-base );
}

/** Darkmode **/
html.skin-citizen-dark .invert-if-dark {
    filter: invert(1) hue-rotate(180deg) !important;
}

html.skin-citizen-dark body.skin-citizen .hatnote {
    background: var( --background-color-dp-01 );
    border: none;
}

/** KBD style */
kbd {
	padding: 0.25rem 0.45rem;
    background-color: var(--background-color-dp-06);
    border: 1px solid var(--border-color-base);
    border-radius: 0.25rem;
    box-shadow: inset 0 -3px 0 var(--background-color-framed--active);
    /*margin-right: 0.25rem;*/
}

/** Scrollbar Style */
* {	
	scrollbar-color: var( --scrollbar-color ) transparent;	
	scrollbar-width: thin;	
}	

::-webkit-scrollbar {	
	width: 4px;	
	height: 4px;	
}	

::-webkit-scrollbar-track {	
	background: transparent;	
}	

::-webkit-scrollbar-thumb {	
	border: 4px solid transparent;	
	background-color: var( --background-color-icon );	
}

@media only screen and (max-width: 720px) {
    body.skin-citizen .hatnote {
        margin: 0.4rem -20px 0 -20px;
        border-radius: 0;
        padding: 10px 20px;
    }
}

@media only screen and (max-width: 600px) {
    body.skin-citizen table.mw-capiunto-infobox.floatright {
        float: none;
        margin: 0 auto;
        display: block;
    }
}


@media screen and (max-width: 460px) {
    body.skin-citizen table.wikitable.sortable {
        display: block;
    }

	table.mw-capiunto-infobox {
		margin: 0;
	}

	table.mw-capiunto-infobox tbody .row {
	    flex-basis: 50%;
	}

	table.mw-capiunto-infobox tbody .row.col1 {
	    flex-basis: 100%;
	}
}

@media screen and (min-width: 1300px) {
	/** Drawer */
	body.skin-citizen #mw-drawer-menu {
		justify-content: left;
	}
}
Abgerufen von „http://dev.articles.biblewiki.one/index.php?title=MediaWiki:Citizen.css&oldid=311“
Cookies helfen uns bei der Bereitstellung von DevWiki Articles. Durch die Nutzung von DevWiki Articles erklärst du dich damit einverstanden, dass wir Cookies speichern.