MediaWiki:Citizen.css

/* All CSS here will be loaded for users of the Citizen skin */
.toc {
    background-color: transparent;
    border: navajowhite;
}
.toc .toctitle {
    text-align: left;
}
#siteSub {
	display: none;
}

/** --------- CHANGE ME --------- **/
body.skin-citizen .mw-parser-output a.new {
	color: var( --color-base ) !important;
}
/** Purge URL: https://star-citizen.wiki/load.php?lang=de&modules=site.styles&only=styles&skin=citizen */
/** --------- CHANGE ME --------- **/

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: invert(1) opacity(0.55);
}

html.skin-citizen-dark body.skin-citizen .mw-logo-icon {
	filter: 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;
	}
}