User:It's moon/common.css: Difference between revisions

Revision as of 05:54, 9 July 2025

/* Navbar */
#mw-header-container {background:#c7649aDD;} /* Header color */
.color-middle, .color-left, .color-right {background:#FC944F;} /* Orange line */
#p-banner.mw-wiki-title {margin-top: -3px;} /* Wordmark centering */

@media screen and (min-width:851px) {
#user-tools {margin-top: -4px;} /* Username centering, affects wordmark too */
#personal h2 {color: #FFF; text-shadow: 1px 1px #252570; background-image:none; font-family:"Quantico",sans-serif!important;}
#personal h2:hover {color: #ff9750; text-shadow: 1px 1px #252570; background-image:none; font-family:"Quantico",sans-serif!important;}
#personal .dropdown {border: 3px solid #252570; border-radius:10px; background:#5e70f2EE; color:#FFF;}
#personal .dropdown h3 {color:#FFF;}
#personal .dropdown .mw-portlet-body {margin-bottom:5px;}
#personal .dropdown li a {color:#FFF;}
#personal .dropdown li a:hover {color:#bbfe9b;}
#personal .dropdown li a.new:hover {color:#ff9750!important;}
#personal .dropdown li a.new:visited:hover {color:#ff9750;}
#personal .dropdown #pt-logout a:hover {color:#ff9750;}
}

/* Dropdown arrow color */
#personal .dropdown::after, #mw-site-navigation .sidebar-chunk h2 span::after, #mw-related-navigation .sidebar-inner::after {border-bottom-color:#5e70f2;}
#personal .dropdown::before, #mw-site-navigation .sidebar-chunk h2 span::before, #mw-related-navigation .sidebar-inner::before {border-bottom-color:#252570;}

/* Sidebar */
@media screen and (max-width:850px) {
body {background:#252570!important;}
.sidebar-inner h3, .dropdown h3 {margin: 0.5em 0 1em;}
}

@media screen and (max-width: 1099px) {
.sidebar-inner, .dropdown {background: #5e70f2EE!important; border: 3px solid #252570!important; border-radius: 10px!important; padding: 2em 2.5em .5em!important;}
.sidebar-inner h3, .sidebar-inner h3 li a, .sidebar-inner h3 li a:hover, .sidebar-inner h3 li a:visited, .dropdown h3, .dropdown h3 li a, .dropdown h3 li a:hover, .dropdown h3 li a:visited {color:#FFF!important; border-bottom: solid 2px #c8ccd1!important;}
.sidebar-inner li a, .sidebar-inner li a:hover, .sidebar-inner li a:visited, .dropdown li a, .dropdown li a:hover, .dropdown li a:visited {color:#FFF!important;}
}

@media screen and (min-width: 851px) {
#personal .dropdown li {padding: 0.4em 0;}
}

@media screen and (min-width: 851px) and (max-width: 1099px) {
#mw-site-navigation .sidebar-chunk h2 span::before {top: 53px!important;}
#mw-site-navigation .sidebar-chunk h2 span::after {top: 55.5px!important;}
#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {padding-top: 0!important;margin-top: .4rem;}
#mw-site-navigation .sidebar-chunk .mw-portlet-body, #mw-related-navigation .sidebar-chunk .mw-portlet-body {margin-bottom: 0;}
#mw-site-navigation h2, #mw-related-navigation h2 {padding: 2rem 0; position: relative; bottom: 3.25em;}
#mw-site-navigation .sidebar-inner, #mw-related-navigation .sidebar-inner {background-color:#c7649aDD; border: solid 3px #252570; color: #FFF; border-radius: 10px; top: 0!important;}
#mw-header-hack {box-shadow: none;}
#mw-header-nav-hack {z-index: 196; background-color: #c7649aDD; color: #FFF; border-top: none; font-family: "Quantico",sans-serif; margin-top: .35em;}
#personal h2, #mw-site-navigation h2, #mw-related-navigation h2 {color: #FFF; text-shadow: 1px 1px #252570; background-image: none; font-family: "Quantico", sans-serif;}
#personal h2:hover, #mw-site-navigation h2:hover, #mw-related-navigation h2:hover {color: #ff9750; text-shadow: 1px 1px #252570; background-image: none; font-family: "Quantico", sans-serif;}
#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {color:#0000; height:0}
#mw-site-navigation .sidebar-inner li, #mw-related-navigation .sidebar-inner li {padding: 0.4em 0;}
}

@media screen and (min-width: 1100px) {
#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {background:none; border:none; box-shadow:none; padding: 0 1.5em 0; margin: 0;}
#mw-site-navigation .sidebar-chunk .mw-portlet-body, #mw-related-navigation .sidebar-chunk .mw-portlet-body {margin-bottom: 5px; padding: 5px;}
#mw-site-navigation .sidebar-chunk .mw-portlet > div, #mw-related-navigation .sidebar-chunk .mw-portlet > div, #mw-site-navigation .sidebar-chunk .mw-portlet-body, #mw-related-navigation .sidebar-chunk .mw-portlet-body {margin-bottom:1px;}
.sidebar-inner .mw-portlet {background-color: #fff3eb; margin-bottom: 5px; border: 3px solid #252570; font-family:"Quantico",sans-serif;}
#mw-site-navigation .sidebar-chunk h3, #mw-related-navigation .sidebar-chunk h3 {background: none;border: none;text-align: center; margin: 0;text-transform: capitalize;color: #000;font-weight: 500; font-family:"Quantico",sans-serif;}
.ns-8 #p-cactions li, .ns-8 #p-cactions li a {background:none !important;}
}

@media screen and (min-width: 1340px) {
#mw-content-block {display: grid;}
#mw-content {margin-left: 14em;}
#mw-content-wrapper {grid-row-start: 1; grid-row-end: 99; grid-column: 1; order: unset;}
#mw-site-navigation {grid-row: 1;grid-column: 1;order: unset;}
#mw-related-navigation {grid-row: 2;grid-column: 1;width: 14em;padding: 0 1em 0 0;order: unset;}
#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {background: none;border: none;margin: 0;padding-top: 0;}
#mw-site-navigation .sidebar-chunk .mw-portlet-body, #mw-related-navigation .sidebar-chunk .mw-portlet-body {margin-bottom: 5px;}
}

/* Content */
#mw-content {border: 3px solid #252570; background-color:#f8fff5; color:#000}
#p-namespaces li a {color:#000}
.mw-body h1.firstHeading {border-color:#010001!important; border-width:2px; border-bottom-style:solid; border-top: 0; border-left: 0; border-right: 0;}
.tools-inline li.selected {border:solid 2px #252570; border-top: 0; border-left: 0; border-right: 0; font-weight: bold; font-family:"Quantico",sans-serif;}
.tools-inline li:hover {border:solid 2px #25257044; border-top: 0; border-left: 0; border-right: 0; font-weight: bold; font-family:"Quantico",sans-serif;}
#mw-portlet-body li a {color:#000; font-weight: bold;}
.new.mw-list-item {font-family:"Quantico",sans-serif;}
#p-views li a {color:#000; font-weight: bold;font-family:"Quantico",sans-serif;}

.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body dt {font-family: sans-serif;border-color:#010001!important; border-width:2px; border-bottom-style:solid;}
.mw-body .mw-parser-output h1:after, .mw-body .mw-parser-output h2:after {border-color:#010001!important; border-width:2px; border-bottom-style:solid;}

.ns-4 #content, .ns-4 #p-cactions li, .ns-4 #p-cactions li a {background-color:#EEEEDD;}
#mw-content-container {background:none;}
#localNotice {background: none; border: none;}
#bodyContentOuter {margin-top: 10px;}

/* Table of contents */
/* #toc ul a {color:#000;} TOC section links color */
.mw-body .toctitle {border: none;}
.mw-toc-heading h2 {font-family:"Quantico",sans-serif;}
.toc ul {padding: 0 10px; border:none;}
.toctitle {margin: 5px; border-radius: 5px 5px 0 0; text-align: center;font-family:"Quantico",sans-serif;}
#filetoc, .toc, .toccolours {padding: 5px; border:none; background:none;}
#toc.toc {background-color:#d7c6dd97; border:2px solid #0a0a0a;}

/* Mobile view specifically */
@media screen and (max-width:850px) {
#mw-content {box-shadow:none; border:none;}
}

/* Tablet and desktop view specifically */
@media screen and (min-width: 851px) and (max-width: 1099px) {#mw-content {margin: 7.5em 1em 1em;}}
@media screen and (min-width:851px) {
	/* Background color */
	body {
		background: linear-gradient(to bottom, #5e70f2, #c7649a) no-repeat, linear-gradient(#252570) repeat;
	}

	.mw-body h1.firstHeading {margin: 0;}
}
@media screen and (min-width:1100px) {#mw-content {margin-top: 1em;}}

/* Footer */
.mw-footer-container {background:#252570; color:#FFF; border:none; box-shadow:none;}
.mw-footer-container a {color: #bbfe9b!important;}
.mw-footer-container a:hover {color: #ff9750!important;}

#mw-content-container {border-bottom: solid 5.6px #bbfe9b;} /* Mint line */

@media screen and (max-width: 850px) {
#mw-content-wrapper {background-color: #f8fff5;}
}

@media screen and (min-width: 851px) {
#catlinks:not(:empty) {margin-top:10px!important; border-radius:10px; display:block; background:#f6f0f8; color:#000; padding: 10px; border:3px solid #252570;}
.mw-normal-catlinks a {color:#3266CC!important;}
.mw-normal-catlinks a:visited {color:#3266CC!important;}
.mw-normal-catlinks a.new:visited {color:#C2574E!important;}
.mw-normal-catlinks a.new {color:#C2574E!important;}
.mw-normal-catlinks {color:#000;}
}

@media screen and (min-width: 851px) and (max-width: 1099px) {
#mw-footer {padding: 1px 2em;}
#catlinks {margin: 1em!important;}
}

@media screen and (min-width: 1100px) {
	#mw-content, #content-bottom-stuff {margin-left: 14em!important;}
}

/* Footer inner padding */
#footer-icons li, #footer-icons li a, .footer-places {margin:0!important; padding:0!important;}
#footer-icons img {margin:0 5px 10px 1.2em;}
@media screen and (max-width: 850px) {
.footer-icons {display: grid;}
#mw-footer {padding:0 .45em .45em!important;}
}
@media screen and (min-width: 851px) {
.mw-footer {padding:0.5em 1em .75em!important;}
}

/* Other */
.mw-message-box-warning {background-color:#9d9b8c; color:#000; border: 3px solid #252570;}
pre {background-color:#d7c6dd97; border-color:#0a0a0a; border-top-style:solid; border-width:2px;}
.thumbinner {background-color:#d7c6dd97; border-color:#0a0a0a; border-top-style:solid; border-width:2px;}
code {background-color:#d7c6dd97; border-color:#0a0a0a; border-top-style:solid; border-width:2px;}
code, pre, .mw-code {background-color:#d7c6dd97; border: 2px #0a0a0a solid;}
li.gallerybox div.thumb {background-color:#d7c6dd97; border-color:#0a0a0a; border-top-style:solid; border-width:2px;}
.mw-body li.gallerybox div.thumb {background-color:#d7c6dd97; border-color:#0a0a0a; border-top-style:solid; border-width:2px;}
.cdx-button:enabled, .cdx-button.cdx-button--fake-button--enabled {background:none; border: none;}

/* Round */
pre {border-radius:10px; padding:10px;}
.mw-code {border-radius:10px; padding:10px;}
#toc.toc {border-radius:10px;}
#mw-content {border-radius:10px;}
#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {border-radius:10px;}
.sidebar-inner .mw-portlet {border-radius:10px; padding:1px;}