MediaWiki:Cosmos.css

/* All CSS here will be loaded for users of the Cosmos skin */
/* Root var colors */

body {
	--theme-body-background-color: #f7f7f7;
		/* NAMESPACE COLOR VARIABLES */
	--theme-page-background-color-mod: rgba(210, 216, 233, 0.90); /* mods namespace bg (pale aqua) #d2d8e9 75% opacity*/
    --theme-page-background-color-com: rgba(179, 255, 217, 0.90); /* community namespace bg (reef green) #b3ffd9 75% opacity*/
    --theme-page-background-color-res: rgba(233, 222, 211, 0.90); /* resources namespace bg ( antique white) #fce5cd 75% opacity*/
    --theme-page-background-color-ifw: rgba(217, 211, 233, 0.90); /* falloutwiki namespace bg (heliotrope violet) #d9d2e9 75% opacity*/
    --theme-page-background-color-usr: rgba(231, 254, 242, 0.90); /* user namespace bg (off-white mint cream) #E7FEF2 75% opacity*/
    --theme-page-background-color-ovv: rgba(237, 222, 222, 0.90); /* overview namespace bg (off-white snow) #eddede 75% opacity*/

    
    --theme-banner-background-color-mod: #486c3b; /* mods namespace banner bg */
    --theme-banner-background-color-com: #6c5239; /* community namespace banner bg */
    --theme-banner-background-color-res: #8c6741; /* resources namespace banner bg */
    --theme-banner-background-color-ifw: #503c7c; /* falloutwiki namespace banner bg */
    --theme-banner-background-color-ovv: #7c3c3c; /* overview namespace banner bg */
    
    
    --theme-footer-background-color-mod: #486c3b; /* mods namespace banner bg */
    --theme-footer-background-color-com: #6c5239; /* community namespace banner bg */
    --theme-footer-background-color-res: #8c6741; /* resources namespace banner bg */
    --theme-footer-background-color-ifw: #503c7c; /* falloutwiki namespace banner bg */
    --theme-footer-background-color-ovv: #7c3c3c; /* falloutwiki namespace banner bg */
    /* END OF NAMESPACE STUFF*/
	--theme-body-background-image: url(https://images.fallout.wiki/d/df/Vaultboybg.webp);
	--theme-body-text-color: #000;
	--theme-banner-background-color: #37535f;
	--theme-footer-background-color: #34495E;
	--theme-footer-links-list-color: #95A5A6;
	--theme-footer-links-list-link-color: #EAEDED;
	--theme-suggestions-results-background-color: #d6e2ef;
	--theme-suggestions-results-text-color: #000;
	--theme-suggestions-results-current-text-color: #fff;
	--theme-suggestions-results-special-child-hover-text-color: #000;
	--theme-suggestions-results-special-hover-background-color: #2a4b8d;
	--theme-suggestions-results-special-hover-text-color: #fff;
	--theme-diff-line-border-color: #aaffc7;
	--theme-diff-line-background-color: #d7d7d7;
	--theme-diff-addedline-diffchange-background-color: #aaffc7;
	--theme-diff-deletedline-border-color: #ef6881;
	--theme-diff-deletedline-diffchange-border-color: #ef6881;
	--theme-recentchanges-plusminus-pos: #00A400;
	--theme-recentchanges-plusminus-neg: #c5312d;
	--theme-discussion-button-text-color: #000;
	--theme-edit-button-background-color: #37535f;
	--theme-edit-button-text-color: #fff;
	--theme-gallery-image-background-color: #f8f9fa;
	--theme-containerTem-background-color: #37535f;
	--theme-page-actionLinks-item-hover-bg-color: #d1d1d1a0; 
	--theme-headerbar-icon-color: #d6dadb;
	
	--theme-search-tab-current-background-color: var(--theme-page-background-color--aceiary);
	--theme-search-tab-current-text-color: var(--theme-body-text-color);
}

.cosmos-header:before {
	border-radius: 10px 10px 0 0;
}

.cosmos-button {
	padding: 8px 10px;
}

#cosmos-articleHeader-actions .cosmos-button {
	height: 15px;
}

#cosmos-banner {
    position: fixed;
    z-index: 700;
    top: 0;
    left: 0;
    width: 100%;
    height: 55px;
    padding: 0;
    margin: 0;
    background-color: var(--theme-banner-background-color);
    font-size: 15px;
}

#cosmos-banner-search {
  display: flex;
  width: 100%;
  margin: 0 10px;
  background-color: var(--theme-banner-background-color);
}

#cosmos-banner-userOptions {
  display: flex;
  align-items: center;
  margin: 0 10px;
  background-color: var(--theme-banner-background-color);
}

#cosmos-footer {
    width: 100%;
    border: 0;
    margin: 0;
    background-color: var(--theme-footer-background-color);
    opacity: 0.7;
}
#cosmos-footer-footerContent {}
	#cosmos-footerContent-footerLinks {
	  padding-top: 15px;
	}
	#cosmos-footerLinks-info {
	  padding: 0;
	  margin: 0;
	}
	.cosmos-footerLinks-list {
	  padding: 0;
	  margin: 0;
	  color: var(--theme-footer-links-list-color);
	  font-size: 10pt;
	  list-style: none;
	}
	.cosmos-footerLinks-list li a {
	  color: var(--theme-footer-links-list-link-color);
	}
	#cosmos-footerLinks-places > li {
	  display: inline;
	  padding: 0 0 5px 0;
	}
	#cosmos-footerLinks-places > li:not( :first-child ):before {
	  color: var(--theme-footer-links-list-link-color);
	  content: ' | ';
	}

.va-documentation-links a {
	background-image: none !important;
	padding-right: 0 !important;
}

section[data-item-name="images"] img {
    max-height: 300px;
    max-width: 270px !important;
}

.thumbimage {
	background-color: transparent !important;
	border: 0 !important;
}

.thumbcaption {
	border: 0 !important;
	padding: 0 !important;
}

.thumbinner {
	background-color: transparent !important;
}

.thumbinner .magnify a.internal {
	background-image: none !important;
}

.thumbinner .magnify {
	display: none;
}

.mw-highlight pre, #cosmos-pageBody-content pre {
	font-family: monospace !important;
}

body > .suggestions .suggestions-results, body > .suggestions .suggestions-special {
	background-color: var(--theme-suggestions-results-background-color);
	color: var(--theme-suggestions-results-text-color);
}

body > .suggestions .suggestions-result-current, body > .suggestions .suggestions-result-current .highlight {
	color: var(--theme-suggestions-results-current-text-color) !important;
}

body > .suggestions .suggestions-special *:hover {
	color: var(--theme-suggestions-results-special-child-hover-text-color);
}

body > .suggestions .suggestions-special:hover {
	background-color: var(--theme-suggestions-results-special-hover-background-color);
	color: var(--theme-suggestions-results-special-hover-text-color) !important;
}

.mw-special-ApiSandbox .oo-ui-selectWidget {
	max-height:400px;
}

#cosmos-articleHeader-title {
	max-width: 65%;
}

#cosmos-header-articleHeader {
	align-items: flex-start;
}

#cosmos-articleHeader-title .mw-indicators {
	display: none !important;
}

.CodeMirror-lines * {
    font-family: monospace;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
	color: #FFFFFF !important;
}

.diff-addedline, 
.diff-deletedline {
	border-color: var(--theme-diff-line-border-color) !important;
	background-color: var(--theme-diff-line-background-color) !important;
}

.diff-addedline .diffchange {
	background: var(--theme-diff-addedline-diffchange-background-color) !important;
}

.diff-deletedline {
	border-color: var(--theme-diff-deletedline-border-color) !important;
}

.diff-deletedline .diffchange {
	background-color: var(--theme-diff-deletedline-diffchange-border-color) !important;
}

.mw-rcfilters-ui-overlay {
	z-index: 100 !important;
}

.mw-specialpages-list {
    -webkit-columns: 16em 2;
    -moz-columns: 16em 2;
    columns: 16em 2;
}

#profile-image {
    z-index: 2;
}

body * {
    font-family: 'Segoe UI', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}

h2, h3, h4, h5 {
	margin-bottom: 4px !important;
}

h4 {
	font-size: 1.07em;
    scale: 97%;
}

.cosmos-button-text {
	margin: 0 !important;
}

#mw-content, .mw-content-banner, .mw-content-bottom-ads {
	background-color: var(--theme-body-background-color);
    background-size: 613px;
    background-image: var(--theme-body-background-image);
}

.cosmos-userButton-label {
	margin-top: 0 !important;
}
.va-hatnote {
	display:flex;
}
.va-hatnote > div {
	line-height: 1.2em;
}

.va-hatnote .va-hatnote-image img {
	vertical-align: baseline;
	margin-top: 0.1em;
}

#catlinks {
	padding-top: 10px !important;
	position: relative;
	border-radius: 10px;
}

#catlinks > div {
	position: relative;
}

/*  Below is the code for the image on the right of the categories box  */
/* Written by Eckserah, inspired by Halopedia.org Nimbus skin categ box */
div#catlinks::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
    background: var(--theme-page-background-color) url("https://images.fallout.wiki/1/16/FO76_ui_condition_01.png") no-repeat top right;
    opacity: 0.25;
    background-size: 6%;
    background-position: 98% -10%;
}

div.gallerytext {
	font-size: 75% !important;
}

.ui-autocomplete {
	z-index: 3 !important;
}

.anon-allowed-page .cosmos-header__local-navigation {
	visibility:hidden !important;
}

.va-transcript-text {
    font-family: monospace !important;
}

.va-transcript-text * {
    font-family: monospace !important;
}


/* ############################################ */
/* ###       Recent changes byte drip       ### */
/* ############################################ */

.mw-plusminus-pos {
   color: var(--theme-recentchanges-plusminus-pos);
}

.mw-plusminus-neg {
   color: var(--theme-recentchanges-plusminus-neg);
}

/* ############################################ */
/* ###            Top Banner CSS            ### */
/* ###            User:Eckserah             ### */
/* ############################################ */

.mw-content-banner {
	height: auto;
    border-color: black;
    border-width: 2px 0;
    border-style: dashed solid;
}

.mw-content-bottom-ads {
	height: auto;
    border-color: black;
    border-width: 0;
    border-top-width: 2px;
    border-style: dashed solid;
}

.topBannerMobile {
	display: none;
}

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

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

.leftBoxContainer {
	flex: 70%;
}

.rightBoxContainer, .rightBoxContainer30 {
	flex: 30%;
}

.leftBoxContainer50 {
	flex: 50%;
}

.rightBoxContainer50 {
	flex: 50%;
}

.leftBoxContainer30 {
	flex: 30%;
}

.leftBoxContainer80 {
	flex: 80%;
}

.rightBoxContainer20 {
	flex: 20%;
}

.fullBoxContainer {
  flex: 100%;
}

/* ############################################ */
/* ###          Number of articles          ### */
/* ###            User:Kate Aces            ### */
/* ############################################ */

.cosmos-header__counter-label {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
}

.cosmos-header__counter-value {
  display: block;
  font-size: 20px;
  line-height: 1;
}

/* ############################################ */
/* ###               Headings               ### */
/* ###            User:Kate Aces            ### */
/* ############################################ */
/*
.mw-headline {
	font-family: 'Work Sans',sans-serif;
	text-transform: uppercase;
	padding-top: 3px;
	font-weight: 500;
	color: #000000;
}*/

.snd_move_break {
	display: none;
}




#toc > ul {
	border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

#toc {
	overflow:hidden;
}

body #mw-content-banner, 
body #mw-content,
.mw-body h1.firstHeading,
body h1, 
body h2, 
body h3, 
body h4, 
body h5, 
body h6,
body #mw-content-text {
	color: var(--theme-body-text-color);
}

#ca-talk.cosmos-button.cosmos-button-secondary,
#ca-nstab-mediawiki.cosmos-button.cosmos-button-secondary,
#ca-nstab-main.cosmos-button.cosmos-button-secondary,
#ca-nstab-user.cosmos-button.cosmos-button-secondary{
	color: var(--theme-discussion-button-text-color);
	stroke: var(--theme-discussion-button-text-color);
}

#cosmos-articleHeader-actions .cosmos-button-primary {
	background-color: var(--theme-edit-button-background-color);
	color: var(--theme-edit-button-text-color);
	stroke: var(--theme-edit-button-text-color)
}

/* ############################################ */
/* ###      Gallery thumbnail background    ### */
/* ###             User:Eckserah            ### */
/* ############################################ */

li.gallerybox div.thumb {
	background-color: var(--theme-gallery-image-background-color);
}

/* ############################################ */
/* ###            Interlang icons           ### */
/* ###             User:Eckserah            ### */
/* ############################################ */

#interlang-links p {
	margin: 0;
}

#interlang-links {
	margin-left: 20px;
}

#interlang-links .interlang-icon {
    border: 1px solid transparent;
    border-radius: 5px;
}

/* ############################################ */
/* ###    Better action list hover actions  ### */
/* ###             User:Eckserah            ### */
/* ############################################ */

#cosmos-actionsList-list a:hover {
	background-color: inherit;	
}

#cosmos-actionsList-list li:hover {
	background-color: var(--theme-page-actionLinks-item-hover-bg-color);
}

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

@media screen {
#p-Navigation.wds-dropdown,
#p-Fallout.wds-dropdown,
#p-Fallout_2.wds-dropdown,
#p-Fallout_3.wds-dropdown,
#p-Fallout_New_Vegas.wds-dropdown,
#p-Fallout_4.wds-dropdown,
#p-Fallout_76.wds-dropdown,
#p-Utilities.wds-dropdown,
#p-Mod.wds-dropdown{
	display: none;
}
}

#content {
	margin: 0 40px;
}

#mw-content {
	padding: 10px 0;
}


/* ############################################ */
/* ###       Gimped Footer Image Resize		### */
/* ###             User:RurinGas            ### */
/* ############################################ */
[src="https://images.fallout.wiki/6/6c/IWF_Member.png"] {
  max-width: 88px;
  height: auto;
}

/* ############################################ */
/* ###      Trepidatious word wrap fix		### */
/* ###             User:RurinGas            ### */
/* ############################################ */
#mw-content-text {
    overflow-wrap: normal;
}

/* ############################################ */
/* ###    Bumping Scroll to top Button up	### */
/* ###             User:RurinGas            ### */
/* ############################################ */
#scrollUpButton {
  bottom: 65px;
}

/* ############################################ */
/* ###         Color by namespace           ### */
/* ###             User:Wana                ### */
/* ############################################ */
/* Mods namespace color*/
/*.theme-light.ns-4000 #mw-content{ background-color: var(--theme-page-background-color-mod);}
/* Community namespace color*
.theme-light.ns-4500 #mw-content{ background-color: var(--theme-page-background-color-com);}
/* Overview namespace color*
.theme-light.ns-3100 #mw-content{ background-color: var(--theme-page-background-color-ovv);}
/* Resources namespace color*
.theme-light.ns-3002 #mw-content{ background-color: var(--theme-page-background-color-res);}
/* Projects namespace color*
.theme-light.ns-3000 #mw-content{ background-color: var(--theme-page-background-color-ifw);}
/* Falloutwiki namespace color*
.theme-light.ns-4 #mw-content{ background-color: var(--theme-page-background-color-ifw);}
/* Userpages namespace color/
.theme-light.ns-2 #mw-content{ background-color: var(--theme-page-background-color-usr);}
*/

/* ############################################ */
/* ###    Changes for collapsible button    ### */
/* ###             User:Eckserah                ### */
/* ############################################ */

#mw-content .mw-collapsible:not(.mw-enhanced-rc):not(.mw-disable-button):not(#mw-history-search):not(.oo-ui-fieldsetLayout-header) a:not(.new).mw-collapsible-text {
	color: var(--theme-edit-button-text-color);
	text-decoration: underline;
}

#mw-content .ace-table.mw-collapsible a:not(.new).mw-collapsible-text, #mw-content .ace-chart.mw-collapsible a:not(.new).mw-collapsible-text, #mw-content .ace-table .mw-collapsible a:not(.new).mw-collapsible-text {
	color: var(--theme-link-color) !important;
}

.mw-collapsible:not(.mw-enhanced-rc):not(.mw-disable-button):not(#mw-history-search):not(.oo-ui-fieldsetLayout-header) .mw-collapsible-toggle-default:before, .mw-collapsible:not(.mw-enhanced-rc):not(.mw-disable-button):not(#mw-history-search):not(.oo-ui-fieldsetLayout-header) .mw-collapsible-toggle-default:after {
 	display: none;
}

.mw-collapsible:not(.mw-enhanced-rc):not(.mw-disable-button):not(#mw-history-search) .mw-collapsible-toggle:not(.oo-ui-fieldsetLayout-header) {
    background-color: #b5b3ec21;
    padding-left: 8px;
    padding-right: 8px;
    border: 1px solid #ababab;
    border-radius: 5px;
}

/* ############################################ */
/* ###     Fringe-case fixes for above      ### */
/* ###             User:Rurin               ### */
/* ############################################ */

.infoboxcollapse .mw-collapsible-toggle-expanded::after, .infoboxcollapse .mw-collapsible-toggle-collapsed::after, .infoboxcollapse .mw-collapsible-toggle {
  visibility: initial;
  font-size: 25px;
  display: block !important;
  border: 0 !important;
  background-color: transparent !important;
}

.infoboxcollapse .mw-collapsible-toggle-expanded::after {
  content: "<";
}

.infoboxcollapse .mw-collapsible-toggle-collapsed::after {
  content: ">";
}

.infobox .mw-collapsible-toggle {
  background-color: unset;
  border: unset;
}

#pt-notifications-alert .mw-echo-notifications-badge,
#pt-notifications-alert .mw-echo-notifications-badge:after, 
#pt-notifications-notice .mw-echo-notifications-badge,
#pt-notifications-notice .mw-echo-notifications-badge:after {
	filter: invert(1);
}

#cosmos-userButton-avatar > img,
.cosmos-userOptions-personalTools:hover #cosmos-userButton-avatar > img {
	border-color: var(--theme-headerbar-icon-color);
}

#p-personal-label {
	color: var(--theme-headerbar-icon-color);
}

.cosmos-bannerOption-dropdownIcon,
.cosmos-bannerOption:hover .cosmos-bannerOption-dropdownIcon {
	fill: var(--theme-headerbar-icon-color);
	stroke: var(--theme-headerbar-icon-color);
}

#searchInput {
	border-radius: 1000px;
}

.oo-ui-optionWidget-selected .oo-ui-buttonElement-button {
    color: var(--theme-edit-button-text-color) !important;
}

#mw-above-content {
	margin: 0 40px;
}

/* ############################################ */
/* ###          Fix block calendar          ### */
/* ###            User:Eckserah             ### */
/* ############################################ */

form input.mw-widgets-datetime-dateTimeInputWidget-field {
    padding: 0.34em 0;
    margin: revert;
}
/* ################################################### */
/* ##    Padding for title if it has a namespace   ### */
/* ###                User:Wana                    ### */
/* ################################################### */
/* Only apply padding when there is a namespace tag */
.has-namespace #cosmos-title-text {
    padding-top: 40px;  /* Add padding only if namespace tag exists */
}
#cosmos-articleHeader-title #cosmos-title-text {
	position: relative;
    display: inline-block;  /* Makes the container respect the positioning of child elements */
	margin-right: 5px;
}

/* ################################################### */
/* ###      Fix for the move dropdown hiding       ### */
/* ###          behind the search bar              ### */
/* ###              User:Eckserah                  ### */
/* ################################################### */

.oo-ui-defaultOverlay {
	z-index:1001;
}

/* ################################################### */
/* ###         Fix diff content text color         ### */
/* ###                 User:Ecks                   ### */
/* ################################################### */
.diff-context {
	color: var(--theme-body-text-color);
}

.mw-scribunto-input {
	padding-bottom: 5px;
}

.mw-scribunto-print {
	padding: 5px;
	border-radius: 10px;
}

.editpage-copywarn {
	margin-top: 10px;
}

/* ############################################ */
/* ###              SiteNotice              ### */
/* ###             User:RurinGas            ### */
/* ############################################ */

#siteNotice .mw-dismissable-notice-close a {
    background-image: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"white\" class=\"bi bi-x\" viewBox=\"0 0 16 16\"><path d=\"M 0.571 0.572 C 1.002 0.138 1.706 0.138 2.138 0.572 L 7.995 6.431 L 13.852 0.572 C 14.457 -0.03 15.486 0.244 15.708 1.07 C 15.81 1.45 15.701 1.86 15.42 2.139 L 9.56 7.996 L 15.42 13.853 C 16.024 14.458 15.748 15.487 14.924 15.709 C 14.541 15.811 14.134 15.702 13.852 15.421 L 7.995 9.561 L 2.138 15.421 C 1.536 16.025 0.505 15.749 0.285 14.925 C 0.181 14.542 0.292 14.135 0.571 13.853 L 6.43 7.996 L 0.571 2.139 C 0.137 1.707 0.137 1.006 0.571 0.572\" style=\"\"></path></svg>");
    background-repeat: no-repeat;
    background-size: 13px;
    height: 24px;
    display: block;
    width: 24px;
    color: transparent;
    opacity: 75%;
    border: 2px solid white;
    border-radius: 7px;
    margin-top: 7px;
    background-position: 5px;
}

#siteNotice .mw-dismissable-notice-close {
  color: transparent;
  font-size: 0;
  position: relative;
  top: -6px;
  right: 12px;
  scale: 0.9;
}

#siteNotice .mw-dismissable-notice-body {
  margin: 0.5em;
  border-radius: 9px;
  box-shadow: 0 0 6px #666;
}

#siteNotice .mw-dismissable-notice-body .containerTem {
	width: 100%;
}

#siteNotice .mw-dismissable-notice-body .containerTem .containerTitle {
	height: 25px;
	padding-top: 4px;
}

html.cmp-visible ins[id*='Adhesion'] {
  bottom: 133px !important;  /* Adjust this value to match your CMP height */
}

center div .youtube iframe {
	position:relative;
}

@media screen and (min-width: 851px) {
    .ts-inner {
        max-width: 100em;
    }
}