(no border radius on mobile) |
(prettify css and remove commented out code) |
||
| Line 1: | Line 1: | ||
/* All CSS here will be loaded for users of the Timeless skin */ | /* All CSS here will be loaded for users of the Timeless skin */ | ||
@import url(https://fonts.googleapis.com/css?family=Press+Start+2P); | @import url(https://fonts.googleapis.com/css?family=Press+Start+2P); | ||
@font-face{ | @font-face { | ||
font-family: Coders-Crux; | |||
src: url(fonts/coderscrux.eot); | |||
src: url(fonts/coderscrux.eot?#iefix) format("embedded-opentype"), url(fonts/coderscrux.otf) format("opentype"), url(fonts/coderscrux.svg) format("svg"), url(fonts/coderscrux.ttf) format("truetype"), url(fonts/coderscrux.woff) format("woff"), url(fonts/coderscrux.woff2) format("woff2"); | |||
font-weight: 400; | |||
font-style: normal | |||
} | } | ||
@font-face { | @font-face { | ||
font-family: 'IBM VGA 8x16'; | |||
src: url(fonts/WebPlus_IBM_VGA_8x16.woff) format('woff'); | |||
font-weight: normal; | |||
font-style: normal; | |||
} | } | ||
::-webkit-scrollbar { | ::-webkit-scrollbar { | ||
width: 10px; | |||
background-color: #F5F5F5; | |||
} | } | ||
::-webkit-scrollbar-thumb { | ::-webkit-scrollbar-thumb { | ||
background-color: #F81472; | |||
} | } | ||
::-webkit-scrollbar-track { | ::-webkit-scrollbar-track { | ||
border: 1px solid #F81472; | |||
background-color: #F5F5F5; | |||
} | } | ||
::selection { | ::selection { | ||
background: #0080FF; | |||
text-shadow: none; | |||
} | } | ||
.mw-wiki-logo { | .mw-wiki-logo { | ||
background-image: url(/images/c/ce/270.png?54f72); | |||
filter: drop-shadow(0 0.2rem #007ad0); | |||
} | } | ||
#searchButton, #mw-searchButton, #personal h2 { | #searchButton, | ||
#mw-searchButton, | |||
#personal h2 { | |||
background-size: 25px; | |||
} | } | ||
a { | a { | ||
color: #00ceff; | |||
} | } | ||
a:hover { | a:hover { | ||
color: #00cff; | |||
} | } | ||
a:visited { | a:visited { | ||
color: #00ceff; | |||
} | } | ||
#bodyContentOuter { | #bodyContentOuter { | ||
z-index: unset; | |||
} | } | ||
p { | p { | ||
color: #D3D3D3; | |||
line-height: 20px; | |||
margin: 0 0 18px; | |||
} | } | ||
.thumbinner { | .thumbinner { | ||
padding: 12px 3px 9px; | |||
background-color: #ddd; | |||
border-top: 1px solid #fff; | |||
border-left: 1px solid #fff; | |||
border-right: 1px solid #777; | |||
border-bottom: 1px solid #777; | |||
box-shadow: 0 4px 15px 4px rgb(0 0 0 / 30%); | |||
transform-origin: center center; | |||
position: relative; | |||
z-index: 100; | |||
} | } | ||
#p-logo { | #p-logo { | ||
display: none; | |||
} | } | ||
#p-banner img { | #p-banner img { | ||
filter: drop-shadow(0 0.2rem #007ad0); | |||
} | } | ||
/* make entire header logo linkable */ | /* make entire header logo linkable */ | ||
#p-logo-text { | #p-logo-text { | ||
max-width: unset !important; | |||
} | } | ||
#p-logo-text a { | #p-logo-text a { | ||
font-family: 'Press Start 2P', cursive !important; | |||
color: #F81472; | |||
font-variant: unset; | |||
font-size: 1.25em !important; | |||
text-transform: uppercase; | |||
padding: unset !important; | |||
width: max-content; | |||
} | } | ||
.mw-editsection { | .mw-editsection { | ||
font-family: 'IBM VGA 8x16' !important; | |||
text-transform: none !important; | |||
} | } | ||
.mw-body h1.firstHeading { | .mw-body h1.firstHeading { | ||
border-bottom: 1px solid #00c5ffa3; | |||
} | } | ||
.tools-inline li.selected a { | .tools-inline li.selected a { | ||
color: #F81472; | |||
} | } | ||
.tools-inline li.selected { | .tools-inline li.selected { | ||
border-bottom: none | |||
} | } | ||
.tools-inline li { | .tools-inline li { | ||
border-bottom: none; | |||
} | } | ||
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{ | .h1, | ||
.h2, | |||
.h3, | |||
.h4, | |||
.h5, | |||
.h6, | |||
h1, | |||
h2, | |||
h3, | |||
h4, | |||
h5, | |||
h6 { | |||
color: #F81472; | |||
font-family: 'Press Start 2P', cursive !important; | |||
text-transform: uppercase; | |||
} | } | ||
.mw-body .mw-parser-output h1:after, .mw-body .mw-parser-output h2:after { | .mw-body .mw-parser-output h1:after, | ||
.mw-body .mw-parser-output h2:after { | |||
border-bottom: 1px solid #00c5ffa3 !important; | |||
} | } | ||
#mw-header-container { | #mw-header-container { | ||
background-color: inherit; | |||
background-image: inherit; | |||
position: relative; | |||
} | } | ||
.mw-footer-container { | .mw-footer-container { | ||
border-top: none; | |||
} | } | ||
#mw-header-hack { | #mw-header-hack { | ||
display: none; | |||
} | } | ||
#mw-content-container { | #mw-content-container { | ||
background-color: inherit; | |||
background-image: inherit; | |||
background-repeat: unset; | |||
border-bottom: none !important; | |||
margin-top: unset; | |||
} | } | ||
#mw-content{ | #mw-content { | ||
background-color: #007ad0; | |||
background-image: radial-gradient(#02131fd9, #000 200%); | |||
border: 1px solid #00c5ffa3; | |||
border-radius: 15px; | |||
box-shadow: 0 0 14px rgba(14, 119, 192, .75), inset 0 0 14px rgba(14, 119, 192, .75); | |||
} | } | ||
.sidebar-chunk { | .sidebar-chunk { | ||
background-color: unset !important; | |||
background-image: unset !important; | |||
border: unset !important; | |||
border-radius: unset !important; | |||
box-shadow: unset !important; | |||
} | |||
.toc { | |||
background-color: #007ad0 !important; | |||
background-image: radial-gradient(#02131fd9, #000 200%) !important; | |||
border: 1px solid #00c5ffa3 !important; | |||
border-radius: 15px !important; | |||
box-shadow: 0 0 14px rgba(14, 119, 192, .75), inset 0 0 14px rgba(14, 119, 192, .75) !important; | |||
} | } | ||
. | .sidebar-chunk h3 { | ||
font-size: 0.9em !important; | |||
border-bottom: 1px solid #00c5ffa3 !important; | |||
} | |||
#mw-header-nav-hack { | |||
display: none; | |||
} | } | ||
body { | body { | ||
background-color: #00151b; | |||
background-image: radial-gradient(#00203c, black 100%); | |||
font-family: 'IBM VGA 8x16', monospace; | |||
font-size: 16px; | |||
line-height: 20px; | |||
color: #D3D3D3 !important; | |||
} | } | ||
body::after { | body::after { | ||
content: ""; | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
margin: 0; | |||
width: 100vw; | |||
height: 100vh; | |||
background: repeating-linear-gradient(0deg, rgba(0, 128, 255, 0), rgba(0, 128, 255, 0.1) 4px, rgba(0, 128, 255, 0.1) 4px, rgba(0, 128, 255, 0) 7px); | |||
pointer-events: none; | |||
} | } | ||
/* One-sided navigation menu */ | |||
@media (min-width: 1340px) { | @media (min-width: 1340px) { | ||
#mw-content-block { | |||
display: block; | |||
} | |||
#mw-content, | |||
#content-bottom-stuff { | |||
margin-left: 14em; | |||
margin-right: 1em; | |||
} | |||
#mw-content-wrapper { | |||
float: right; | |||
margin-left: -14em; | |||
width: 100%; | |||
} | |||
#mw-related-navigation { | |||
width: 14em; | |||
padding: 0 1em 0 0; | |||
} | |||
div.color-middle { | |||
margin-right: 0; | |||
} | |||
.mw-wiki-logo { | |||
display: inline-block; | |||
} | |||
} | } | ||
/* Re-aligning bottom logos */ | /* Re-aligning bottom logos */ | ||
#footer { | |||
padding-right: 1em; | |||
} | } | ||
#mw-content { | @media screen and (max-width: 850px) { | ||
#mw-content-block { | |||
} | background: unset; | ||
} | |||
#p-banner img{ | #mw-content { | ||
border-radius: unset; | |||
} | |||
#p-banner img { | |||
} | width: 200px; | ||
height: 25.75px; | |||
.thumbinner { | padding-top: 5px; | ||
} | |||
} | .thumbinner { | ||
width: 302px !important; | |||
} | |||
} | } | ||
@media screen and (min-width: 851px) { | @media screen and (min-width: 851px) { | ||
.ts-inner { | .ts-inner { | ||
max-width: unset; | |||
margin: unset; | |||
} | |||
} | |||
} | } | ||
Revision as of 08:08, 23 March 2022
/* All CSS here will be loaded for users of the Timeless skin */
@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);
@font-face {
font-family: Coders-Crux;
src: url(fonts/coderscrux.eot);
src: url(fonts/coderscrux.eot?#iefix) format("embedded-opentype"), url(fonts/coderscrux.otf) format("opentype"), url(fonts/coderscrux.svg) format("svg"), url(fonts/coderscrux.ttf) format("truetype"), url(fonts/coderscrux.woff) format("woff"), url(fonts/coderscrux.woff2) format("woff2");
font-weight: 400;
font-style: normal
}
@font-face {
font-family: 'IBM VGA 8x16';
src: url(fonts/WebPlus_IBM_VGA_8x16.woff) format('woff');
font-weight: normal;
font-style: normal;
}
::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
background-color: #F81472;
}
::-webkit-scrollbar-track {
border: 1px solid #F81472;
background-color: #F5F5F5;
}
::selection {
background: #0080FF;
text-shadow: none;
}
.mw-wiki-logo {
background-image: url(/images/c/ce/270.png?54f72);
filter: drop-shadow(0 0.2rem #007ad0);
}
#searchButton,
#mw-searchButton,
#personal h2 {
background-size: 25px;
}
a {
color: #00ceff;
}
a:hover {
color: #00cff;
}
a:visited {
color: #00ceff;
}
#bodyContentOuter {
z-index: unset;
}
p {
color: #D3D3D3;
line-height: 20px;
margin: 0 0 18px;
}
.thumbinner {
padding: 12px 3px 9px;
background-color: #ddd;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #777;
border-bottom: 1px solid #777;
box-shadow: 0 4px 15px 4px rgb(0 0 0 / 30%);
transform-origin: center center;
position: relative;
z-index: 100;
}
#p-logo {
display: none;
}
#p-banner img {
filter: drop-shadow(0 0.2rem #007ad0);
}
/* make entire header logo linkable */
#p-logo-text {
max-width: unset !important;
}
#p-logo-text a {
font-family: 'Press Start 2P', cursive !important;
color: #F81472;
font-variant: unset;
font-size: 1.25em !important;
text-transform: uppercase;
padding: unset !important;
width: max-content;
}
.mw-editsection {
font-family: 'IBM VGA 8x16' !important;
text-transform: none !important;
}
.mw-body h1.firstHeading {
border-bottom: 1px solid #00c5ffa3;
}
.tools-inline li.selected a {
color: #F81472;
}
.tools-inline li.selected {
border-bottom: none
}
.tools-inline li {
border-bottom: none;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
color: #F81472;
font-family: 'Press Start 2P', cursive !important;
text-transform: uppercase;
}
.mw-body .mw-parser-output h1:after,
.mw-body .mw-parser-output h2:after {
border-bottom: 1px solid #00c5ffa3 !important;
}
#mw-header-container {
background-color: inherit;
background-image: inherit;
position: relative;
}
.mw-footer-container {
border-top: none;
}
#mw-header-hack {
display: none;
}
#mw-content-container {
background-color: inherit;
background-image: inherit;
background-repeat: unset;
border-bottom: none !important;
margin-top: unset;
}
#mw-content {
background-color: #007ad0;
background-image: radial-gradient(#02131fd9, #000 200%);
border: 1px solid #00c5ffa3;
border-radius: 15px;
box-shadow: 0 0 14px rgba(14, 119, 192, .75), inset 0 0 14px rgba(14, 119, 192, .75);
}
.sidebar-chunk {
background-color: unset !important;
background-image: unset !important;
border: unset !important;
border-radius: unset !important;
box-shadow: unset !important;
}
.toc {
background-color: #007ad0 !important;
background-image: radial-gradient(#02131fd9, #000 200%) !important;
border: 1px solid #00c5ffa3 !important;
border-radius: 15px !important;
box-shadow: 0 0 14px rgba(14, 119, 192, .75), inset 0 0 14px rgba(14, 119, 192, .75) !important;
}
.sidebar-chunk h3 {
font-size: 0.9em !important;
border-bottom: 1px solid #00c5ffa3 !important;
}
#mw-header-nav-hack {
display: none;
}
body {
background-color: #00151b;
background-image: radial-gradient(#00203c, black 100%);
font-family: 'IBM VGA 8x16', monospace;
font-size: 16px;
line-height: 20px;
color: #D3D3D3 !important;
}
body::after {
content: "";
position: fixed;
top: 0;
left: 0;
margin: 0;
width: 100vw;
height: 100vh;
background: repeating-linear-gradient(0deg, rgba(0, 128, 255, 0), rgba(0, 128, 255, 0.1) 4px, rgba(0, 128, 255, 0.1) 4px, rgba(0, 128, 255, 0) 7px);
pointer-events: none;
}
/* One-sided navigation menu */
@media (min-width: 1340px) {
#mw-content-block {
display: block;
}
#mw-content,
#content-bottom-stuff {
margin-left: 14em;
margin-right: 1em;
}
#mw-content-wrapper {
float: right;
margin-left: -14em;
width: 100%;
}
#mw-related-navigation {
width: 14em;
padding: 0 1em 0 0;
}
div.color-middle {
margin-right: 0;
}
.mw-wiki-logo {
display: inline-block;
}
}
/* Re-aligning bottom logos */
#footer {
padding-right: 1em;
}
@media screen and (max-width: 850px) {
#mw-content-block {
background: unset;
}
#mw-content {
border-radius: unset;
}
#p-banner img {
width: 200px;
height: 25.75px;
padding-top: 5px;
}
.thumbinner {
width: 302px !important;
}
}
@media screen and (min-width: 851px) {
.ts-inner {
max-width: unset;
margin: unset;
}
}