MediaWiki:Citizen.css

/* All CSS here will be loaded for users of the Citizen skin */

/*#n-upload > a::after {
    background-image: url(/load.php?modules=skins.citizen.icons.t&image=upload&format=rasterized&skin=citizen&version=34l68);
    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 upload %3C/title%3E%3Cg fill=%22%23000%22%3E %3Cpath d=%22M17 12v5H3v-5H1v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5z%22/%3E %3Cpath d=%22M10 1 5 7h4v8h2V7h4z%22/%3E %3C/g%3E%3C/svg%3E");
}*/

/**
  * 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-Zeitepochen-label::after {
    background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2217%22 viewBox=%220 0 20 17%22%3E%3Ctitle%3E history %3C/title%3E%3Cg fill=%22%23000%22%3E %3Cpath d=%22M11.424 0C6.686 0 2.857 3.806 2.857 8.5H0l3.71 3.68.066.136L7.62 8.5H4.76c0-3.65 2.986-6.61 6.667-6.61 3.68 0 6.665 2.96 6.665 6.61 0 3.65-2.985 6.61-6.666 6.61a6.668 6.668 0 0 1-4.71-1.94l-1.35 1.337A8.553 8.553 0 0 0 11.426 17C16.16 17 20 13.194 20 8.5S16.162 0 11.424 0zm-1.037 5v4.524l3.904 2.298.66-1.1-3.192-1.877V5H10.39z%22/%3E %3C/g%3E%3C/svg%3E");
}

/**
  * 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;
	}
}