No edit summary |
No edit summary |
||
Line 157: | Line 157: | ||
font-size: 88%; | font-size: 88%; | ||
width: 100%; | width: 100%; | ||
max-width: | max-width: 19rem; | ||
/*width: min-content;*/ | /*width: min-content;*/ | ||
line-height: 1.5em; | line-height: 1.5em; |
Revision as of 13:53, 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, 69%, 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); } body { background: var(--tmw-bg-gradient); /*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: 100%; max-width: 19rem; /*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; } /*Navbox modifications - used at the bottom of content pages*/ .navbox-inner { box-shadow: var(--tmw-pink-shadow); } .navbox-inner .fn.org { font-size: 100% !important; margin: 0 !important; } /*Headings modifications*/ h1, h2, h3, h4, h5, h6 { color: var(--tmw-pink); font-family: "Press Start 2P", monospace !important; text-shadow: 0.2rem 0 var(--tmw-purple); letter-spacing: -0.06rem; } /*Reference tooltips modifications - when hovering over a citation/Other reference stuff*/ .rt-settingsLink { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fd184e' d='M20 14.5v-2.9l-1.8-.3c-.1-.4-.3-.8-.6-1.4l1.1-1.5-2.1-2.1-1.5 1.1c-.5-.3-1-.5-1.4-.6L13.5 5h-2.9l-.3 1.8c-.5.1-.9.3-1.4.6L7.4 6.3 5.3 8.4l1 1.5c-.3.5-.4.9-.6 1.4l-1.7.2v2.9l1.8.3c.1.5.3.9.6 1.4l-1 1.5 2.1 2.1 1.5-1c.4.2.9.4 1.4.6l.3 1.8h3l.3-1.8c.5-.1.9-.3 1.4-.6l1.5 1.1 2.1-2.1-1.1-1.5c.3-.5.5-1 .6-1.4l1.5-.3zM12 16c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z'/%3E%3C/svg%3E"); } .rt-tooltip { background: var(--tmw-bg-gradient-dark); border: var(--tmw-blue-border); border-radius: var(--tmw-default-radius); font-size: 14px; box-shadow: var(--tmw-blue-shadow); color: inherit; } .rt-tooltip::after { content: ""; position: inherit; top: 0; left: 0; margin: 0; width: 100%; height: 100%; background: var(--tmw-after-gradient); pointer-events: none; } .rt-tooltipTail { display: none; } ol.references li:target, sup.reference:target { background-color: var(--tmw-pink); } ol.references > li { word-wrap: break-word; } cite > a, .mw-parser-output a.extiw, .mw-parser-output a.extiw:active, .mw-parser-output a.external { color: var(--tmw-blue) !important; } /*MWE popups modifications - when hovering over a link to another article*/ .mwe-popups { background: transparent; border: var(--tmw-blue-border); border-radius: var(--tmw-default-radius); } .mwe-popups-container { background: var(--tmw-bg-gradient-dark) !important; border: var(--tmw-blue-border); border-radius: var(--tmw-default-radius); box-shadow: var(--tmw-blue-shadow); } .mwe-popups-container::after { content: ""; position: absolute; top: 0; left: 0; margin: 0; width: 100%; height: 100%; background: var(--tmw-after-gradient); pointer-events: none; } .mwe-popups-extract:hover { color: var(--tmw-blue) !important; } .mwe-popups .mwe-popups-extract[dir="ltr"]:after { background-image: none !important; } .mwe-popups .mwe-popups-container { clip-path: none; } .mwe-popups.mwe-popups-is-not-tall .mwe-popups-thumbnail { border-top-left-radius: var(--tmw-default-radius); border-top-right-radius: var(--tmw-default-radius); width: 318px; z-index: 1; position: relative; } .mwe-popups.mwe-popups-is-tall .mwe-popups-discreet .mwe-popups-thumbnail { border-top-right-radius: var(--tmw-default-radius); border-bottom-right-radius: var(--tmw-default-radius); z-index: 1; position: relative; } .mwe-popups .mwe-popups-extract { color: var(--tmw-white); font-size: 0.75rem; }