Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* 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;
}