MediaWiki:Timeless.css: Difference between revisions

Revision as of 22:05, 9 April 2022

/* All CSS here will be loaded for users of the Timeless skin */
 @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
 @font-face {
     font-family: 'MyWebFont';
     src: url('/fonts/PressStart2P-Regular.ttf') format('truetype'), 
}
 @font-face {
     font-family: 'OpticianSans';
     src: url('https://static.media.wiki/fonts/Optiker-K.woff2') format('woff2'), 
}
 @font-face {
     font-family: Southpaw;
     src: url("/fonts/southpaw.eot");
     src: url("/fonts/southpaw.eot?#iefix") format("embedded-opentype"), url("/fonts/southpaw.otf") format("opentype"), url("/fonts/southpaw.svg") format("svg"), url("/fonts/southpaw.ttf") format("truetype"), url("/fonts/southpaw.woff") format("woff"), url("/fonts/southpaw.woff2") format("woff2");
     font-weight: normal;
     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;
}
 ul#filetoc {
     background: transparent;
     border: none;
}
 .home-page {
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
     align-items: flex-start;
     justify-content: space-evenly;
}
.mw-mmv-post-image, .mw-mmv-image-metadata {
    color: inherit !important;
    background-color: #007ad0 !important;
    background-image: radial-gradient(#02131fd9,#000 200%) !important;
    box-shadow: 0 0 14px rgb(14 119 192 / 75%), inset 0 0 14px rgb(14 119 192 / 75%) !important;
    border-top: 1px solid #00c5ffa3
}
.mw-mmv-image-metadata-desc-column {
    width: 100%;
}
.mw-mmv-above-fold {
	border-top: 1px solid #00c5ffa3;
}
.mw-mmv-image-metadata-links-column {
	float: none;
}
.mw-ui-button.mw-ui-progressive:not(:disabled) {
	background-color: #F81472;
}
.mw-mmv-post-image::after{
	content: "";
    position: inherit;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
	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;
}
 .wikitable {
     background: unset;
     background-color: unset;
     color: unset;
     filter: brightness(120%);
     border: 1px solid #F81472;
     background-image: radial-gradient(#001321d9, black 200%) !important;
}
.mw_metadata > tr > th, .mw-datatable > tr > th, .wikitable > tr > th, .mw_metadata > tr > td, .mw-datatable > tr > td, .wikitable > tr > td, .mw_metadata > * > tr > th, .mw-datatable > * > tr > th, .wikitable > * > tr > th, .mw_metadata > * > tr > td, .mw-datatable > * > tr > td, .wikitable > * > tr > td {
    border: 1px solid #F81472 !important;
}
th {
    background-color: #F81472 !important;
}

/*
th, td {
    border: 1px solid #F81472 !important;
}
*/

.toccolours th {
	width: auto !important;
	text-align: center !important;
	vertical-align: middle !important;
	padding-right: 0 !important;
}

.toccolours {
    border: none !important;
    background: inherit !important;
}
 #personal .dropdown, .mw-mmv-dialog {
     background-color: #007ad0;
     background-image: radial-gradient(#02131fd9,#000 200%);
     border: 1px solid #00c5ffa3;
     border-radius: 15px;
     box-shadow: 0 0 14px rgb(14 119 192 / 75%), inset 0 0 14px rgb(14 119 192 / 75%);
}
 #personal .dropdown::after {
     content: "";
     position: inherit;
     top: 0;
     left: 0;
     margin: 0;
     width: 100%;
     height: 100%;
     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;
     border-bottom: none;
     border-left: none;
     border-right: none;
}
 #personal .dropdown::before{
     content: "";
     border-bottom: none;
     border-left: none;
     border-right: none;
}
.mw-mmv-dialog-down-arrow {
    display: none;
}
.mw-mmv-options-dialog-header {
    color: #F81472;
}
.mw-mmv-options-text-header, .mw-mmv-options-text-body, .mw-ui-button.mw-ui-quiet {
    color: inherit;
}
.mw-mmv-dialog .mw-mmv-dialog-warning, .mw-mmv-download-pane .mw-mmv-download-attribution {
    background-color: unset !important;
}
.mw-mmv-download-pane .mw-mmv-download-area {
    padding-bottom: 0;
}
.mw-mmv-options-dialog::after, .mw-mmv-reuse-dialog::after, .mw-mmv-download-dialog::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     margin: 0;
     width: 100%;
     height: 100%;
     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;
}
 ol.references li:target, sup.reference:target {
    background-color: #F81493;
}
 .diff-addedline .diffchange {
    background: #F81493;
}
 .diff-context {
    background: #F81493;
    border-color: #00c5ffa3;
    color: inherit;
}
 ::-webkit-scrollbar-thumb {
     background-color: #F81472;
}
 ::-webkit-scrollbar-track {
     border: 1px solid #F81472;
     background-color: #F5F5F5;
}
 ::selection {
     background: #0080FF;
     text-shadow: none;
}
 .optician-sans {
     font-family: OpticianSans;
}
 .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;
}
 .thumbcaption {
     font-family: Southpaw;
     color: #333;
     text-align: center !important;
     padding-top: 10px;
}
 .mw-content-ltr .magnify {
     display: none;
}
 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: 95;
     max-width:302px;
}
 .thumbinner img {
     width: 100% 
}
 #p-logo {
     display: none;
}
 #p-banner img {
     filter: drop-shadow(0 0.2rem #007ad0);
}
 ol.references > li {
     word-wrap: break-word;
}
/* make entire header logo linkable */
 #p-logo-text {
     max-width: 302px !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 {
     word-wrap: unset;
}
 .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;
         margin-top: 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;
         border: unset;
         border-top: 1px solid #00c5ffa3;
         border-bottom: 1px solid #00c5ffa3;
    }
     #site-navigation h2 {
         right: 7.7em;
         left: unset;
    }
     #site-tools h2 {
         right: 4.45em;
    }
     #p-logo-text {
         left: unset;
    }
     #site-navigation .sidebar-inner {
         right: 0;
         left: unset;
    }
     #p-banner img {
         width: 200px;
         height: 25.75px;
         padding-top: 5px;
    }
     .mw-body h1.firstHeading {
         overflow-wrap: anywhere;
    }
     #bodyContent {
         padding-right: 1em;
         padding-left: 1em;
    }
     .thumbinner {
         width: unset !important;
    }
     .mw-body h1.firstHeading {
         text-align: center;
    }
     h1 {
         font-size: 1.5rem !important;
    }
     h2 {
         font-size: 1rem !important;
    }
     h3 {
         font-size: 0.83rem !important;
    }
     h4 {
         font-size: 0.67rem !important;
    }
     h5 {
         font-size: 0.5rem !important;
    }
     h6 {
         font-size: 0.33rem !important;
    }
}
 @media screen and (min-width: 851px) {
     .ts-inner {
         max-width: unset;
         margin: unset;
    }
}