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; }

/* ############################################ */ /* ###         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; } }