|
|
(9 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
| /* Navbar */ | | /* Rewritting the wiki skin from the ground up for a cleaner, smoother, |
| #mw-header-container {background:#c7649aDD;} /* Header color */
| | bug-free, fast and optimized user experience, with no visual changes. */ |
| .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) {
| | { /* Disable the entire CSS document - only for the testing phase */ |
| #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 */ | | /* All screens */ |
| @media screen and (min-width: 851px) and (max-width: 1099px) {#mw-content {margin: 7.5em 1em 1em;}} | | @media screen { |
| @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;}
| | /* Mobile */ |
| | @media (max-width: 850px) { |
| | |
| } | | } |
| @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) { | | /* Tablet */ |
| #mw-content-wrapper {background-color: #f8fff5;}
| | @media (min-width: 851px) and (max-width: 1099px) { |
| | |
| } | | } |
|
| |
|
| @media screen and (min-width: 851px) { | | /* Mobile & tablet */ |
| #catlinks:not(:empty) {margin-top:10px!important; border-radius:10px; display:block; background:#f6f0f8; color:#000; padding: 10px; border:3px solid #252570;}
| | @media (max-width: 1099px) { |
| .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) { | | /* Tablet & all desktops */ |
| #mw-footer {padding: 1px 2em;}
| | @media (min-width: 851px) { |
| #catlinks {margin: 1em!important;}
| | |
| } | | } |
|
| |
|
| @media screen and (min-width: 1100px) { | | /* All desktops */ |
| #mw-content, #content-bottom-stuff {margin-left: 14em!important;} | | @media (min-width: 1100px) { |
| | |
| } | | } |
|
| |
|
| /* Footer inner padding */ | | /* Large desktops */ |
| #footer-icons li, #footer-icons li a, .footer-places {margin:0!important; padding:0!important;}
| | @media (min-width: 1340px) { |
| #footer-icons img {margin:0 8px 10px 1em;}
| | |
| @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 1em!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;}
| |