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