MediaWiki:Citizen.css

/* Commenting out Dark Mode (for now) to make way for light mode, If you're reading this Mr. Enclave and you still want this Terminal theme, shoot me a line - User:RurinGas

/* * Fallout terminal theme * Written by User:Enclave
 * root.skin-citizen-dark {

/* Use HSL because Citizen generates hover and active color from them --color-primary__h: 144; --color-primary__s: 70%; --color-primary__l: 40%; --color-base: #26d46c; /* Probably better to use a variable monospace font from Google Fonts --font-family-base: var( --font-family-monospace ); /* Disable rounded corner --border-radius--small: 0; --border-radius--medium: 0; --border-radius--large: 0; --color-surface-0: #072714; --color-surface-1: #041d0f; }

html.skin-citizen-dark, .skin-citizen-dark body { /* Terminal scan line background background: repeating-linear-gradient( 0deg,  #072714,  #072714 1px,  #07321a 1px,  #07321a 2px, #041d0f 2px, #041d0f 3px) }

.skin-citizen-dark a { /* Set independently than primary color because of readibility /* Use the same color for visited link? --color-link: #ccc; }

/* ############################################ */ /* ###       Editor Highlight Colors       ### */ /* ###            User:RurinGas            ### */ /* ############################################ */

.cm-mw-pagename { text-decoration: underline; }

.cm-mw-matching { background-color: #ffd700; }

.cm-mw-skipformatting { background-color: #adf; } .cm-mw-list { color: #08f; font-weight: bold; } .cm-mw-doubleUnderscore, .cm-mw-signature, .cm-mw-hr { color: #08f; font-weight: bold; background-color: #eee; } .cm-mw-indenting { color: #08f; font-weight: bold; } .cm-mw-mnemonic { color: #290; } .cm-mw-comment { color: #84a0a0; font-weight: normal; } .cm-mw-apostrophes-bold, .cm-mw-apostrophes-italic { color: #08f; }

pre.CodeMirror-line.cm-mw-section-1, pre.CodeMirror-line-like.cm-mw-section-1 { font-size: 1.8em; line-height: 1.2em; } pre.CodeMirror-line.cm-mw-section-2, pre.CodeMirror-line-like.cm-mw-section-2 { font-size: 1.5em; line-height: 1.2em; } pre.CodeMirror-line.cm-mw-section-3, pre.CodeMirror-line-like.cm-mw-section-3 { font-weight: bold; } pre.CodeMirror-line.cm-mw-section-4, pre.CodeMirror-line-like.cm-mw-section-4 { font-weight: bold; } pre.CodeMirror-line.cm-mw-section-5, pre.CodeMirror-line-like.cm-mw-section-5 { font-weight: bold; } pre.CodeMirror-line.cm-mw-section-6, pre.CodeMirror-line-like.cm-mw-section-6 { font-weight: bold; } .cm-mw-section-header { color: #08f; font-weight: normal; }

.cm-mw-template { color: #80c; font-weight: normal; } .cm-mw-template-name { color: #80c; font-weight: bold; } .cm-mw-template-name-mnemonic { font-weight: normal; } .cm-mw-template-argument-name { color: #80c; font-weight: bold; } .cm-mw-template-delimiter { color: #80c; font-weight: bold; } .cm-mw-template-bracket { color: #80c; font-weight: bold; }

.cm-mw-templatevariable { color: #f50; font-weight: normal; } .cm-mw-templatevariable-name { color: #f50; font-weight: bold; } .cm-mw-templatevariable-bracket { color: #f50; font-weight: normal; } .cm-mw-templatevariable-delimiter { color: #f50; font-weight: bold; }

.cm-mw-parserfunction { font-weight: normal; } .cm-mw-parserfunction-name { color: #a11; font-weight: bold; } .cm-mw-parserfunction-bracket { color: #a11; font-weight: bold; } .cm-mw-parserfunction-delimiter { color: #a11; font-weight: bold; }

pre.CodeMirror-line.cm-mw-exttag, pre.CodeMirror-line-like.cm-mw-exttag { background-color: rgba( 119, 0, 170, 0.02 ); } .cm-mw-exttag { background-color: rgba( 119, 0, 170, 0.04 ); } .cm-mw-exttag-name { color: #290; font-weight: bold; } .cm-mw-exttag-bracket { color: #290; font-weight: normal; } .cm-mw-exttag-attribute { color: #290; font-weight: normal; }

.cm-mw-htmltag-name { color: #290; font-weight: bold; } .cm-mw-htmltag-bracket { color: #290; font-weight: normal; } .cm-mw-htmltag-attribute { color: #290; font-weight: normal; }

pre.CodeMirror-line.cm-mw-tag-pre, pre.CodeMirror-line-like.cm-mw-tag-pre, .cm-mw-tag-pre { background-color: rgba( 0, 0, 0, 0.04 ); } pre.CodeMirror-line.cm-mw-tag-nowiki, pre.CodeMirror-line-like.cm-mw-tag-nowiki, .cm-mw-tag-nowiki { background-color: rgba( 0, 0, 0, 0.04 ); }

.cm-mw-link { color: #36c; font-weight: normal; } .cm-mw-link-pagename { color: #36c; font-weight: normal; } .cm-mw-link-tosection { color: #18e; font-weight: normal; } .cm-mw-link-bracket { color: #36c; font-weight: normal; } /* .cm-mw-link-text { } */ .cm-mw-link-delimiter { color: #36c; font-weight: normal; }

.cm-mw-extlink, .cm-mw-free-extlink { color: #36c; font-weight: normal; } .cm-mw-extlink-protocol, .cm-mw-free-extlink-protocol { color: #36c; font-weight: bold; } /* .cm-mw-extlink-text { } */ .cm-mw-extlink-bracket { color: #36c; font-weight: bold; }

.cm-mw-table-bracket { color: #e0e; font-weight: bold; } .cm-mw-table-delimiter { color: #e0e; font-weight: bold; } .cm-mw-table-definition { color: #e0e; font-weight: normal; } .cm-mw-table-caption { font-weight: bold; }

/* .cm-mw-template-ground {} */ .cm-mw-template2-ground { background-color: rgba( 170, 17, 17, 0.04 ); } .cm-mw-template3-ground { background-color: rgba( 170, 17, 17, 0.08 ); } .cm-mw-template-ext-ground { background-color: rgba( 119, 0, 170, 0.04 ); } .cm-mw-template-ext2-ground { background-color: rgba( 119, 0, 170, 0.08 ); } .cm-mw-template-ext3-ground { background-color: rgba( 119, 0, 170, 0.12 ); } .cm-mw-template-link-ground { background-color: rgba( 34, 17, 153, 0.04 ); } .cm-mw-template-ext-link-ground { background-color: rgba( 77, 9, 162, 0.08 ); } .cm-mw-template-ext2-link-ground { background-color: rgba( 91, 6, 164, 0.12 ); } .cm-mw-template-ext3-link-ground { background-color: rgba( 98, 4, 166, 0.16 ); } .cm-mw-template2-ext-ground { background-color: rgba( 145, 9, 94, 0.08 ); } .cm-mw-template2-ext2-ground { background-color: rgba( 136, 6, 119, 0.12 ); } .cm-mw-template2-ext3-ground { background-color: rgba( 132, 4, 132, 0.16 ); } .cm-mw-template2-link-ground { background-color: rgba( 102, 17, 85, 0.08 ); } .cm-mw-template2-ext-link-ground { background-color: rgba( 108, 11, 113, 0.12 ); } .cm-mw-template2-ext2-link-ground { background-color: rgba( 111, 9, 128, 0.16 ); } .cm-mw-template2-ext3-link-ground { background-color: rgba( 112, 7, 136, 0.2 ); } .cm-mw-template3-ext-ground { background-color: rgba( 153, 11, 68, 0.12 ); } .cm-mw-template3-ext2-ground { background-color: rgba( 145, 9, 94, 0.16 ); } .cm-mw-template3-ext3-ground { background-color: rgba( 139, 7, 109, 0.2 ); } .cm-mw-template3-link-ground { background-color: rgba( 125, 17, 62, 0.12 ); } .cm-mw-template3-ext-link-ground { background-color: rgba( 123, 13, 89, 0.16 ); } .cm-mw-template3-ext2-link-ground { background-color: rgba( 122, 10, 105, 0.2 ); } .cm-mw-template3-ext3-link-ground { background-color: rgba( 122, 9, 116, 0.24 ); } .cm-mw-ext-ground { background-color: rgba( 119, 0, 170, 0.04 ); } .cm-mw-ext2-ground { background-color: rgba( 119, 0, 170, 0.08 ); } .cm-mw-ext3-ground { background-color: rgba( 119, 0, 170, 0.12 ); } .cm-mw-ext-link-ground { background-color: rgba( 34, 17, 153, 0.04 ); } .cm-mw-ext2-link-ground { background-color: rgba( 77, 9, 162, 0.08 ); } .cm-mw-ext3-link-ground { background-color: rgba( 91, 6, 164, 0.12 ); } .cm-mw-link-ground { background-color: rgba( 34, 17, 153, 0.04 ); }

.cm-mw-matchingbracket { background-color: #eee; box-shadow: inset 0 0 1px 1px #999; font-weight: bold; }

/* ############################################ */ /* ###         Sidebar Theme Junk		    ### */ /* ###            User:RurinGas            ### */ /* ############################################ */

display: none; }
 * 1) p-About,
 * 2) p-Mods,
 * 3) p-Series,
 * 4) p-Resources,
 * 5) p-Community{

/* ############################################ */ /* ### 		  	Basic Stuff		        ### */ /* ###  Background, Header & Footer, etc.	### */ /* ###            User:RurinGas            ### */ /* ############################################ */

@media screen { html, body { background: url(https://images.fallout.wiki/4/43/Digital_Frontiers_May23_51.jpg); background-attachment: fixed; background-size: cover; } }

overflow-x: clip; }
 * 1) searchform-suggestions {

.mw-body-header { background: url(https://images.fallout.wiki/2/2e/Vaultboybg.png); background-color: white; background-position-y: 3px; background-size: 613px; padding: 15px 15px 0 15px; border-radius: 10px 10px 0 0; margin-bottom: 0; }

.citizen-body { background: url(https://images.fallout.wiki/2/2e/Vaultboybg.png); background-color: white; background-size: 613px; border-radius: 0 0 10px 10px; padding: 1px 15px 15px 15px; }

@media screen { #footer-sitetitle { display:none; } }

@media screen { .mw-footer { background: #34495e; opacity: 0.7; } }

@media screen { #footer-bottom { margin-top: 0; background: #34495e; opacity: 0.7; } }

@media screen { #footer-desc { margin: 0; } }

@media screen { .mw-header::before { mask-image: none; -webkit-mask-image: none; background: #37535f; height: 50px; } }

@media screen { .mw-footer::before, #mw-data-after-content::before { display:none; } }

@media screen { #p-views #ca-edit > a, #p-views #ca-ve-edit > a { background-color: #37535f; } }

@media screen { #searchInput { background-color: #87989f; } }

@media screen { .page-heading { margin-bottom: 0; padding: 15px 0 0 25px; } }

/* ############################################ */ /* ###      	   Contents list	        ### */ /* ###            User:RurinGas            ### */ /* ############################################ */

.toc { display:none; }

@media screen and (max-width: 1300px) { .skin-citizen-has-toc .toc { bottom: 50px; top: unset; } }

.skin-citizen-has-toc .toc { margin-left: 20px; margin-top: 20px; border: 0; padding: 0; display: block; }

.skin-citizen-has-toc .toc ul { background: url(https://images.fallout.wiki/2/2e/Vaultboybg.png); background-color: rgba(255, 255, 255, 0.5); background-size: 613px; border-radius: 0 0 10px 10px; margin: 0 !important; padding: 10px; }

.skin-citizen-has-toc .toclevel-1 ul { background: none; padding: 0; background-color: transparent !important; }

.skin-citizen-has-toc .toctogglelabel { opacity: 0.6; }

@media screen { .skin-citizen-has-toc .toctitle h2 { text-transform: none; text-align: center; border-bottom: 1px solid; padding-bottom: 5px; padding-top: 10px; background: url(https://images.fallout.wiki/2/2e/Vaultboybg.png); background-color: rgba(255, 255, 255, 0.5); background-size: 613px; border-radius: 10px 10px 0 0; margin: 0 !important; } }

@media screen and (max-width: 1300px) { .skin-citizen-has-toc .toctitle h2, .skin-citizen-has-toc .toc ul{ background-color: white; } }

@media screen and (max-width: 1300px) { .skin-citizen-has-toc .toctitle { margin-bottom: 33px; } }

@media screen { .skin-citizen-has-toc .tocnumber { display: none; } }

@media screen and (max-width: 1300px) { .skin-citizen-has-toc .toc > ul { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 6px 6px rgba(0, 0, 0, 0.3), 0 -35px 20px rgba(0, 0, 0, 0.3), 0 -39px 6px rgba(0, 0, 0, 0.3); } }

@media screen and (max-width: 1300px) { .skin-citizen-has-toc .toctogglelabel { right: unset; } }

@media screen { .skin-citizen-has-toc .toc li { border-left: none; } }

/* ############################################ */ /* ###     Asssorted container tweaks	    ### */ /* ###            User:RurinGas            ### */ /* ############################################ */

.mediaContainer, .PopUpMediaTransform { display:inline-block; }

@media screen { .citizen-body h1 + h2, .mw-body-content h1 + h2, .citizen-body h2 + h3, .mw-body-content h2 + h3, .citizen-body h3 + h4, .mw-body-content h3 + h4, .citizen-body h4 + h5, .mw-body-content h4 + h5, .citizen-body h5 + h6, .mw-body-content h5 + h6, .citizen-body table, .mw-body-content table { margin-top: 0; } }

.tabber { margin-top: 0; }

.usermessage { background: url(https://images.fallout.wiki/2/2e/Vaultboybg.png); background-color: white; background-size: 613px; border-radius: 10px; padding: 10px; margin-top: 10px; opacity: 0.7; width: 81%; left: 105px; position: relative; }

.va-columns{ margin-top: 0.8rem; margin-bottom: 0.8rem; }

.snd_move_break{ display: none; }

.np-quote-snd-trigger { margin: -2px 0 0 0; }

.va-hatnote { display: flex; }

.va-hatnote-text i { padding-top:1px; }

/* ############################################ */ /* ###      	      Sidebar	            ### */ /* ###            User:RurinGas            ### */ /* ############################################ */

@media screen { #mw-drawer { display: grid; background: rgba(255,255,255,0.97); margin: 8px 10px 8px 60px; overflow-x: clip; max-width: 960px; } }

@media screen { #mw-drawer-header { align-items: baseline; justify-content: flex-start; padding: 15px 0px 0px 20px; display: ruby; } }

@media screen { .mw-logo-icon { display: ruby; margin-bottom: 0; } }

.mw-logo-container{ left: 25px; position: relative; bottom: 40px; font-size: 40px; }

right: 215px; position: relative; bottom: 10px; }
 * 1) mw-drawer-sitestats {

display: contents; }
 * 1) mw-drawer-logo{

.mw-logo{ display:inline; }

@media screen { #footer-icons { position: relative; bottom: 30px; } }

@media screen { #mw-drawer-menu { padding: 0; gap: 20px 0px; margin-bottom: 0; } }

@media screen { #mw-drawer-menu a { padding: 7px 20px; } }

@media screen { #mw-drawer-menu a:hover { background-color: #87989f; color: #cbdee6 !important; } }

@media screen and (min-width: 1300px) { #mw-drawer-menu { max-width: 960px; } }

@media screen { #p-personal #pt-usergroups { display:none; } }

@media only screen and (max-width: 720px) { .mw-logo-container { font-size: x-large; bottom: 37px; left: 10px; } }

@media only screen and (max-width: 720px) { #mw-drawer-sitestats { right: 144px; } }

@media only screen and (max-width: 720px) { #mw-drawer-logo .mw-logo-icon { height: 60px; bottom: 3px; position: relative; } }

.mw-rcfilters-enabled .mw-specialpage-summary, .mw-rcfilters-disabled .mw-specialpage-summary { margin: 0.3rem 1rem 1rem 1.5rem; }

table.mw-enhanced-rc { border-bottom: 0; }

margin-top:20px; }
 * 1) mw-content-text {

.interlanguage-link-target{ background-image: url(https://images.fallout.wiki/thumb/9/97/French_flag.png/30px-French_flag.png); width: 0; height: 10px; font-size: 0; background-position: bottom; margin-left: 20px; background-repeat: round; }

display:none; }
 * 1) n-Give-It-a-Spin,#n-Account-Migration{

/* ############################################ */ /* ###       Sidebar Social Buttons        ### */ /* ###            User:RurinGas            ### */ /* ############################################ */

display: flex; left: 450px; position: absolute; top: 48px; padding: 5px 305px 0 305px; }
 * 1) p-Utilities ul{

display:none; }
 * 1) p-Utilities-label{

@media only screen and (max-width: 1030px) { #mw-drawer-menu{ margin-bottom: 10px; } }

@media only screen and (max-width: 1030px) { #p-Utilities ul{ padding: 5px 215px 5px 215px; bottom: 0; left: 345px; } }

@media only screen and (max-width: 800px) { #p-Utilities ul{ display: none; } }

background-image: url(https://images.fallout.wiki/1/18/Discord_icon.png); background-size: 30px; width: 0; font-size: 0; background-position: bottom; background-repeat: no-repeat; }
 * 1) n-Discord a {

background-image: url(https://images.fallout.wiki/f/f3/Twitter_icon.png); background-size: 30px; width: 0; font-size: 0; background-position: bottom; background-repeat: no-repeat; }
 * 1) n-Twitter a {

background-image: url(https://images.fallout.wiki/1/1c/Tumblr_Icon.png); background-size: 30px; width: 0; font-size: 0; background-position: bottom; background-repeat: no-repeat; }
 * 1) n-Tumblr a {

background-image: url(https://images.fallout.wiki/8/86/Icon_Instagram.png); background-size: 30px; width: 0; font-size: 0; background-position: bottom; background-repeat: no-repeat; }
 * 1) n-Instagram a {

background-image: url(https://images.fallout.wiki/7/7a/Threads_icon.png); background-size: 30px; width: 0; font-size: 0; background-position: bottom; background-repeat: no-repeat; }
 * 1) n-Threads a {

background-color: transparent; background-size: 35px; }
 * 1) n-Discord a:hover,
 * 2) n-Twitter a:hover,
 * 3) n-Tumblr a:hover,
 * 4) n-Instagram a:hover,
 * 5) n-Threads a:hover {

margin-top: 10px; }
 * 1) n-Discord a::after,
 * 2) n-Twitter a::after,
 * 3) n-Tumblr a::after,
 * 4) n-Threads a::after,
 * 5) n-Instagram a::after {

/* ############################################ */ /* ###           Give it a Spin! ### */ /* ###            User:RurinGas            ### */ /* ############################################ */

@media screen { #searchform-random { background-image: url(https://images.fallout.wiki/0/0e/Load_roulette_wheel.png); background-size: 35px; transition: transform 400ms cubic-bezier(0.77, 0.2, 0.05, 1), opacity 400ms ease; opacity: 0.45; } }

@media screen { #searchform-random:hover { transform: rotate(370deg); } }

/* ############################################ */ /* ###              Userpage               ### */ /* ###            User:RurinGas            ### */ /* ############################################ */

.skin-citizen--titlehidden #content .mw-body-header{ height: 0; }

.mainpage #content .mw-body-header{ height: auto; }

@media screen { .page-actions { padding: 15px 0 0 0; z-index: 1; } }

/* ############################################ */ /* ###        Home page box alignment      ### */ /* ###           User:Eckserah             ### */ /* ###          & User:RurinGas            ### */ /* ############################################ */

.mainBoxContainer { width: 100%; display: flex; flex-wrap: wrap; }

.leftBoxContainer { flex: 70%; }

.rightBoxContainer { flex: 30%; }

@media only screen and (max-width: 600px) { .mainBoxContainer { display: block; } }

/* ############################################ */ /* ###           Image Resizing            ### */ /* ###            User:RurinGas            ### */ /* ############################################ */

a > img { max-width: 100%; height: auto; } @media screen { a.image > img { max-width: 100%; } }

/* ############################################ */ /* ###          Cat Trees Mobile           ### */ /* ###            User:RurinGas            ### */ /* ############################################ */

@media only screen and (max-width: 450px) { .CategoryTreeTag { column-count: 2 !important; font-size: 82%; } }

@media only screen and (max-width: 450px) { .va-columns { font-size: 82%; margin-right: 0.5rem; } }

/* ############################################ */ /* ###        Force stop line breaks       ### */ /* ###            User:RurinGas            ### */ /* ############################################ */

.unbroken p, .unbroken a { display: inline-flex; }

@media screen { .citizen-body a.image, .mw-body-content a.image { display: unset; } }