MediaWiki:Citizen.css: Difference between revisions

MediaWiki interface page
No edit summary
No edit summary
Line 146: Line 146:
/*Infobox modifications*/
/*Infobox modifications*/
.infobox {
.infobox {
/* In case if tooltips go out of boundary */
    box-shadow: var(--tmw-pink-shadow);
overflow: visible;
    border: var(--tmw-pink-border);
width: 100%;
    border-spacing: 3px;
max-width: 400px;
    background-image: var(--tmw-bg-gradient-dark);
margin-top: 0;
    border-radius: var(--tmw-default-radius);
margin-bottom: var( --space-md );
    margin: 0.5em 0 0.5em 1.5em;
background: var( --color-surface-2 );
    padding: 0.5em;
border-radius: var( --border-radius--medium );
    float: right;
border-spacing: 0;
    clear: both;
font-size: 0.875rem;
    font-size: 88%;
text-align: left;
    width: 19rem !important;
display: block;
    /*width: min-content;*/
    line-height: 1.5em;
    & th {
    background: initial !important;
}
& .nowrap {
white-space: nowrap;
padding-right: 10px;
}
& :is(.infobox-above, .infobox-title, caption) {
font-size: 125%;
font-weight: bold;
text-align: center;
text-wrap: balance;
}
& :is(.infobox-header,.infobox-subheader, .infobox-image, .infobox-full-data, .infobox-below) {
text-align: center;
}
& :is(#youtube-outer, .video-outer) {
width: 300px !important;
height: 273px !important;
}
& .infobox-navbar {
text-align: right;
}
& .mw-collapsible-toggle {
    float: none;
}
& tbody {
position: relative;
z-index: 1;
}
}
}
 
@media (width <= 850px) {
/* Table elements */
.infobox {
.infobox tbody {
float: none;
display: flex;
margin: 0 auto !important;
flex-wrap: wrap;
}
}
 
.infobox tr {
display: flex;
box-sizing: border-box;
flex-direction: column;
padding: 0 10px;
margin-top: 10px;
}
 
.infobox th,
.infobox td {
padding: 0 5px;
}
 
/* Infobox column */
.infobox .infobox-nocol {
width: 100%;
flex-direction: row;
}
 
.infobox .infobox-nocol th {
width: 30%;
}
 
.infobox .infobox-nocol td {
width: 70%;
}
 
.infobox .infobox-col1 {
width: 100%;
}
 
.infobox .infobox-col2 {
width: 50%;
}
 
.infobox .infobox-col3 {
width: calc( 100% / 3 );
}
 
.infobox .infobox-col4 {
width: 25%;
}
 
.infobox-data {
min-width: 25%;
}
 
/* Infobox image */
.infobox .infobox-image {
overflow: hidden;
padding: 0;
margin-top: 0;
border-radius: var( --border-radius--medium ) var( --border-radius--medium ) 0 0;
}
 
.infobox-image td {
padding: 0;
}
 
.infobox-image--light .image {
background: #eaecf0;
}
 
.infobox-image--dark .image {
background: #2b2f36;
}
 
.infobox-image .image:hover img {
transform: scale( 1.1 );
}
 
.infobox-image img {
display: block;
max-width: 100%;
background: var( --background-color-quiet--hover );
}
}
 
.infobox-header, .infobox-label, .infobox-above, .infobox-full-data, .infobox-data, .infobox-below, .infobox-subheader, .infobox-image, .infobox-navbar, .infobox th, .infobox td {
/* Neutral background for all transprent SVG */
    vertical-align: top;
.infobox-image img[ src$='.svg' ] {
background: #eaecf0;
}
}
 
.infobox-label, .infobox-data, .infobox th, .infobox td {
/* Infobox title */
     text-align: left;
.infobox .infobox-title {
width: 100%;
margin-top: 20px;
margin-bottom: 5px;
color: var( --color-base--emphasized );
font-size: var( --font-size-x-large );
     line-height: var( --line-height-xs );
}
}
 
.infobox-below {
/* Infobox indicator */
    text-align: left !important;
.infobox .infobox-indicator {
margin-top: 0;
padding: 0;
}
}
 
.infobox-title, .infobox caption {
/* Infobox subtitle */
    padding: 0.2em;
.infobox .infobox-subtitle {
/* Cancel infobox-title bottom margin */
margin-top: -5px;
margin-bottom: 5px;
}
}
 
.hidden-content.mw-collapsible-content p {
.infobox .infobox-indicator th,
    display: none;
.infobox .infobox-subtitle th {
display: none;
}
}
 
.infobox-caption {
/* Infobox header */
text-wrap: balance;
.infobox .infobox-header {
width: 100%;
padding-top: 15px;
    border-top: 1px solid;
border-color: var( --border-color-base );
margin-top: 15px;
color: var( --color-base--emphasized );
line-height: var( --line-height-xs );
font-size: 1rem;
}
}
 
.mw-body-content table .infobox-image a > img {
/* Infobox value */
max-width: 100% !important;
.infobox-data th {
color: var( --color-base--subtle );
font-size: 0.8125rem;
font-weight: normal;
letter-spacing: 0.75px;
}
 
.infobox-data td {
font-weight: 600;
}
 
.infobox-data ul,
.infobox-data ol {
margin-top: 0;
}
 
/* Infobox button */
.infobox .infobox-button-bar {
width: 100%;
padding: 0;
margin-top: 25px;
text-align: center;
}
 
.infobox-button-bar th {
padding: 0;
}
 
/* Collapsible toggle */
.infobox tr:first-of-type .mw-collapsible-toggle {
position: relative;
display: none;
float: none;
}
 
.infobox tr:first-of-type .mw-collapsible-toggle .mw-collapsible-text {
position: absolute;
right: 0;
display: block;
padding: 5px 15px;
background: var( --color-destructive );
border-radius: 0 var( --border-radius--medium );
color: #fff;
}
 
.infobox tr:first-of-type .mw-collapsible-toggle .mw-collapsible-text:hover {
background: var( --color-destructive--hover );
}
 
.infobox tr:first-of-type .mw-collapsible-toggle .mw-collapsible-text:active {
background: var( --color-destructive--active );
}
 
.infobox tr:first-of-type .mw-collapsible-toggle-collapsed .mw-collapsible-text {
background: var( --color-primary );
}
 
.infobox tr:first-of-type .mw-collapsible-toggle-collapsed .mw-collapsible-text:hover {
background: var( --color-primary--hover );
}
 
.infobox tr:first-of-type .mw-collapsible-toggle-collapsed .mw-collapsible-text:active {
background: var( --color-primary--active );
}
 
.infobox tr:first-of-type .mw-collapsible-toggle:before,
.infobox tr:first-of-type .mw-collapsible-toggle:after {
content: none;
}
 
@media only screen and ( max-width: 720px ) {
.infobox {
margin-right: auto;
margin-left: auto;
}
 
.infobox tr:first-of-type .mw-collapsible-toggle {
display: block;
}
}
}

Revision as of 14:05, 5 April 2024

/* All CSS here will be loaded for users of the Citizen skin */
/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
@import url("https://fonts.googleapis.com/css?family=VT323&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Reddit+Mono:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

/*Variables*/
:root {
    --tmw-pink: hsl(337,99%,50%);
    --tmw-purple: rgb(192 14 171 / 75%);
    --tmw-blue: hsl(194, 100%, 50%);
    --tmw-white: #e8eaed;
    --tmw-bg-gradient: radial-gradient(hsl(205, 88%, 12%), black 200%);
    --tmw-bg-gradient-dark: radial-gradient(hsl(208, 100%, 12%), black 100%);
    --tmw-after-gradient: repeating-linear-gradient(0deg, rgba(0, 128, 255, 0), rgba(0, 128, 255, 0.1) 4px, 
		rgba(0, 128, 255, 0.1) 4px, rgba(0, 128, 255, 0) 7px);
    --tmw-table-gradient: radial-gradient(hsl(205, 100%, 6%), black 200%);
    --tmw-blue-shadow: 0 0 5px var(--tmw-blue),
        inset 0 0 5px var(--tmw-blue);
    --tmw-pink-shadow: 0 0 14px var(--tmw-purple),
        inset 0 0 14px var(--tmw-pink);
    --tmw-blue-border: 1px solid var(--tmw-blue);
    --tmw-pink-border: 1px solid var(--tmw-pink);
    --tmw-pink-border-figure: 2px solid var(--tmw-pink);
    --tmw-default-radius: 15px;
    --cover-size: 15rem;
}

/*Generic style templates*/
.tmw-pink-box {
	border: var(--tmw-pink-border);
	border-radius: var(--tmw-default-radius);
	background: var(--tmw-bg-gradient-dark);
	box-shadow: var(--tmw-pink-shadow);
	padding: 1em;
}
.tmw-blue-box {
	border: var(--tmw-blue-border);
	border-radius: var(--tmw-default-radius);
	background: var(--tmw-bg-gradient-dark);
	box-shadow: var(--tmw-blue-shadow);
	padding: 1em;
}

/*General body/interface modifications*/
html {
	background: var(--tmw-bg-gradient-dark);
}
body {
    background: var(--tmw-bg-gradient-dark);
    /*font: 0.8125rem/1.25rem monospace;*/
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-style: normal;
    line-height: 1.25rem;
    font-size: 0.75rem;
    text-shadow: 0 0 5px var(--tmw-pink);
    color: var(--tmw-white) !important;
}
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    background: var(--tmw-after-gradient);
    pointer-events: none;
}

/*Images/Captions modifications*/
.thumbcaption {
	font-weight: bold;
    text-wrap: balance;
    text-align: center !important;
}

/*.thumbinner > a {
    display: flex;
    justify-content: center;
}
.figure > a {
    display: flex;
    justify-content: center;
}*/

.thumbimage {
	border: var(--tmw-pink-border) !important;
    border-radius: var(--tmw-default-radius);
    box-shadow: var(--tmw-pink-shadow);
    padding: 1px;
}
figcaption {
	font-weight: bold !important;
    text-wrap: balance;
    text-align: center !important;
    border: 0 !important;
    border-top: 0 !important;
    border-width: 0 !important;
    box-shadow: none !important;
    background-color: revert !important;
    padding: 0.75em !important;
}
figure {
	border: 0 !important;
    background-color: revert !important;
    border-collapse: separate !important;
}
figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element, 
figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element {
	margin: 0 !important;
	border: var(--tmw-pink-border-figure) !important;
	border-radius: var(--tmw-default-radius);
	box-shadow: var(--tmw-pink-shadow);
}
.mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-description::after, 
.mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-magnify::after {
	display: none;
}
.mw-content-ltr figure[typeof~='mw:File/Thumb'] > figcaption::before {
	display: none;
}
.borderless-img-with-caption .thumbimage {
	border: 0 !important;
    box-shadow: none;
}
.thumbinner {
	position: relative;
	z-index: 1;
}
.thumbinner > a.image {
	margin: 0;
}

/*File pages modifications*/
.cp-wrapper {
    border: var(--tmw-pink-border);
    border-radius: var(--tmw-default-radius);
    padding: 1em;
    box-shadow: var(--tmw-pink-shadow);
    background-image: var(--tmw-bg-gradient-dark);
}

/*Infobox modifications*/
.infobox {
    box-shadow: var(--tmw-pink-shadow);
    border: var(--tmw-pink-border);
    border-spacing: 3px;
    background-image: var(--tmw-bg-gradient-dark);
    border-radius: var(--tmw-default-radius);
    margin: 0.5em 0 0.5em 1.5em;
    padding: 0.5em;
    float: right;
    clear: both;
    font-size: 88%;
    width: 19rem !important;
    /*width: min-content;*/
    line-height: 1.5em;
	    & th {
	    background: initial !important;
		}
		& .nowrap {
		white-space: nowrap;
		padding-right: 10px;
		}
		& :is(.infobox-above, .infobox-title, caption) {
		font-size: 125%;
		font-weight: bold;
		text-align: center;
		text-wrap: balance;
		}
		& :is(.infobox-header,.infobox-subheader, .infobox-image, .infobox-full-data, .infobox-below) {
		text-align: center;
		}
		& :is(#youtube-outer, .video-outer) {
		width: 300px !important;
		height: 273px !important;
		}
		& .infobox-navbar {
		text-align: right;
		}
		& .mw-collapsible-toggle {
	    float: none;
		}
		& tbody {
		position: relative;
		z-index: 1;
		}
}
@media (width <= 850px) {
	.infobox {
		float: none;
		margin: 0 auto !important;
	}
}
.infobox-header, .infobox-label, .infobox-above, .infobox-full-data, .infobox-data, .infobox-below, .infobox-subheader, .infobox-image, .infobox-navbar, .infobox th, .infobox td {
    vertical-align: top;
}
.infobox-label, .infobox-data, .infobox th, .infobox td {
    text-align: left;
}
.infobox-below {
    text-align: left !important;
}
.infobox-title, .infobox caption {
    padding: 0.2em;
}
.hidden-content.mw-collapsible-content p {
    display: none;
}
.infobox-caption {
	text-wrap: balance;
}
.mw-body-content table .infobox-image a > img {
	max-width: 100% !important;
}
Retrieved from "https://themidnight.wiki/index.php?title=MediaWiki:Citizen.css&oldid=13266"