MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

/************************************************* @import url('https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700&display=swap&subset=greek,greek-ext,latin-ext'); @import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap&subset=greek,greek-ext,latin-ext');
 * IMPORT FONTS
 * IMPORT FONTS

/*************************************************
 * SCROLLBAR
 * -webkit-scrollbar {
 * -webkit-scrollbar {
 * -webkit-scrollbar {
 * -webkit-scrollbar {

width: 6px; height: 6px; }


 * -webkit-scrollbar-track {

background: #06305B; }


 * -webkit-scrollbar-thumb {

background: #abc2d9; border-radius: 4px; }


 * -webkit-scrollbar-thumb:hover {

background: #d1deeb; }

/************************************************* body{ font-family:Roboto; background:url(https://www.sonicarchive.com/images/4/47/Common_Background_%28top%29.png), url(https://www.sonicarchive.com/images/thumb/0/02/Common_Background.png/60px-Common_Background.png); background-repeat: no-repeat, repeat; }
 * FORMATTING AND HEADERS
 * FORMATTING AND HEADERS

.mw-body{ padding:0; }

/* Hides Main Page/Community Portal page titles */ body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading, body.page-Sonic_Archive_News.action-view h1.firstHeading, body.page-Sonic_Archive_News.action-submit h1.firstHeading{ display: none; }

display:none; }
 * 1) jump-to-nav{

.mw-body h1, .mw-body-content h1{ font-family: "Roboto Slab","Linux Libertine","Georgia","Times",serif; border-bottom: 0px; font-size: 200%; margin-top: 10px; }

.mw-body-content h2 { font-family: "Roboto", sans-serif; font-size: 170%; font-weight:300; border-bottom: 0px; margin-bottom: 0px; }

.mw-body-content h3 { font-family: "Roboto", sans-serif; font-size:120%; font-weight:500; }

.mw-body-content h4, h5{ font-family: "Roboto", sans-serif; font-weight: 700; }

/************************************************* .mw-wiki-logo{ background-size: 160px auto; }
 * FIXED WIDTH
 * FIXED WIDTH

@media (min-width: 900px){ .mw-body, header { margin-left:6em; margin-right:6em; z-index: 1; } }

@media (min-width: 1200px){ .mw-body, header{ margin-left:11em; margin-right:11em; } }

/*************************************************
 * MAIN PAGE
 * MAIN PAGE

@media (min-width:1000px) { .series-nav{ display: block; }	.mainpageContent{ flex-direction: row; }

.mainpageContentOne{ flex:2; }	.mainpageContentTwo{ flex:1; } }

@media (max-width:1000px) { .series-nav{ display:none; }	.mainpageContent{ flex-direction: column; }

.mainpageContentOne{ flex:1; }	.mainpageContentTwo{ flex:1; } }

.tablink { background-color: #555; color: white; float: left; border: none; outline: none; cursor: pointer; padding: 5px; font-size: 17px; flex:1; transition:ease-in 0.1s; border-radius:0; }

.tablink:hover { background-color: #d4d4d4; box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.5); z-index:99; }

/* Style the tab content (and add height:100% for full page content) */ .tabcontent { color: white; display: none; padding: 50px 20px; height: 50%; background-attachment:fixed; background-position:center; background-size:cover; -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s; }

@-webkit-keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }

@keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/images/0/09/Box_art_NA_StH.png"); background-repeat: no-repeat; }
 * 1) StH {

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/images/f/ff/Box_art_NA_StH2.png"); background-repeat: no-repeat; }
 * 1) StH2 {

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/images/5/51/Box_art_NA_StH3.png"); background-repeat: no-repeat; }
 * 1) StH3 {

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/images/5/51/Box_art_NA_StH3.png"); background-repeat: no-repeat; }
 * 1) SnK{

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/images/c/ce/Key_art_01_S3DB.png"); background-repeat: no-repeat; }
 * 1) S3DB{

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/images/4/40/Key_art_01_SM.png"); background-repeat: no-repeat; }
 * SM{

/************************************************* image.mwe-popups-is-tall { y: 0; }
 * EXTENSION: POPUPS
 * EXTENSION: POPUPS

.mwe-popups{ border-radius:4px; box-shadow: 0 25.6px 57.6px 0 rgba(0,0,0,.22), 0 4.8px 14.4px 0 rgba(0,0,0,.18); }

/************************************************* div#mw-data-after-content{ background: #abc2d9; padding: 0.5em 1.5em 1.5em 1.5em; }
 * RELATED ARTICLES
 * RELATED ARTICLES

ul.ext-related-articles-card-list { overflow: visible; }

li.ext-related-articles-card { transition: ease-in-out .2s; }

li.ext-related-articles-card:hover { box-shadow: 0 0px 4px -1px #000000; transform: scale(1.02); z-index: 1; }

.ext-related-articles-card-list .ext-related-articles-card-thumb{ background-position: top center; }

.ext-related-articles-card-thumb.ext-related-articles-card-thumb-placeholder { background-position: center center; }

/************************************************* div#footer, #mw-footer, footer#footer { background: #d1deeb; padding: 1.25em 1.5em 1.5em 1.5em; }
 * FOOTER
 * FOOTER

/*************************************************	padding:0; }
 * SITE NOTICE
 * 1) siteNotice{
 * 1) siteNotice{
 * 1) siteNotice{
 * 1) siteNotice{

.siteNotice { width: 100%; display: flex; margin: 0 auto; background: #373737; white-space: nowrap; overflow: hidden; flex-direction: row; }

.siteInformation{ background:#282828; flex:1; display: flex; vertical-align: middle; align-items: center; z-index:1; }

.siteNotice .floatleft{ margin:0; padding: 7px; }

.siteNotice .scroll { display: inline-block; -webkit-animation: scroll 40s linear infinite; -moz-animation:scroll 40s linear infinite; color: #E3F2FC; }

.siteNotice p a { color: #9DCCFB; }

.siteNotice p:hover { -webkit-animation-play-state: paused; }

@keyframes scroll{ 0% {   transform: translateX(100%); } 100% {    transform: translateX(-100%); } }

/************************************************* .toc, .mw-warning, .toccolours{ border: 1px solid #C0C0C4; }
 * TABLE OF CONTENTS
 * TABLE OF CONTENTS

/************************************************* div.tright, div.tleft{ padding: 0; }
 * THUMBNAILS
 * THUMBNAILS

.thumb{ transition:0.2s ease-in; border-radius:4px; }

.thumb:hover{ box-shadow:0 0 7px 0 rgba(0,0,0,0.6); transform:scale(1.01); }

html .thumbimage{ background:none; border:none; }

div.thumbinner{ background-color: #C0C0C4; border:none; width:300px !important; padding:0; border-radius:4px; padding-bottom:.5em; }

html .thumbcaption { padding: 0.5em; text-align: left; display: none; transition: 0.3s ease-in-out; z-index: 2; bottom: 0; position: absolute; background: rgba(204,204,204,0.6); backdrop-filter: saturate(180%)blur(15px); border-radius: 0 0 4px 4px; right: 0; left: 0; -webkit-animation: ms-motion-slideUpIn .3s cubic-bezier(.1,.9,.2,1) both,ms-motion-fadeIn .3s cubic-bezier(0,0,1,1) both; animation: ms-motion-slideUpIn .3s cubic-bezier(.1,.9,.2,1) both,ms-motion-fadeIn .3s cubic-bezier(0,0,1,1) both; }

.thumb:hover .thumbcaption{ display:block; }

/************************************************* .mw-parser-output table{ border: none; background: #EFEFEF; border-spacing: 0; }
 * TABLES
 * TABLES

tr:nth-child(even) { background: #E8E8E8; }

.mw-parser-output table tr{ border: none; }

.mw-parser-output td, .mw-parser-output th { border: none; padding: 0.8em; }

.mw-changeslist table { background: none; }

.sortable.white.jquery-tablesorter th.headerSort { background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2221%22 height=%229%22 viewBox=%220 0 21 9%22%3E %3Cpath fill=%22%23fff%22 d=%22M14.5 5l-4 4-4-4zm0-1l-4-4-4 4z%22/%3E %3C/svg%3E"); } .sortable.white.jquery-tablesorter th.headerSortUp { background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2221%22 height=%224%22 viewBox=%220 0 21 4%22%3E %3Cpath fill=%22%23fff%22 d=%22M6.5 4l4-4 4 4z%22/%3E %3C/svg%3E"); } .sortable.white.jquery-tablesorter th.headerSortDown { background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2221%22 height=%224%22 viewBox=%220 0 21 4%22%3E %3Cpath fill=%22%23fff%22 d=%22M14.5 0l-4 4-4-4z%22/%3E %3C/svg%3E"); }

@media (max-width: 1100px){ table{ display: flex; overflow: auto; } }

/************************************************* .editOptions, .oui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame{ background:#FFFFFF; }
 * EDITING WINDOW
 * EDITING WINDOW

@supports (backdrop-filter:blur(20px)) or (-webkit-backdrop-filter:blur(20px)) { .editOptions, .oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame{ background:rgba(255,255,255,0.4); backdrop-filter:saturate(180%)blur(20px); }	.ve-ui-mwSaveDialog-license{ background:none !important; } }

.ms-depth-8.oo-ui-window-head{ z-index:3; }

/*************************************************
 * FORUM HOVERTABLE
 * FORUM HOVERTABLE

.forum-hovertable > tbody > tr { transition:0.1s ease-in-out; }

.forum-hovertable > tbody > tr:hover { background-color: #06305B; color:#CDCDCD; }

.forum-hovertable > tbody > tr:hover a { color:#f0f8ff; }

.forum-hovertable > tbody > tr.forum-nohover { background-color: inherit; }

.forum-hovertable .forum_title a{	display:block; padding:5px; }

.forum-hovertable .forum_title a:hover{ text-decoration:none; }

/*************************************************											 .oo-ui-actionFieldLayout.oo-ui-fieldLayout-align-top, #mw-search-top-table .oo-ui-textInputWidget{ max-width:none; }
 * SEARCH
 * SEARCH

.mw-search-profile-tabs{ background: none; border: none; }

li.normal a { transition: 0.1s ease-in-out; }

li.normal a:hover { border-bottom: 3px solid #0066FF; text-decoration: none; }

li.current a { border-bottom: 3px solid #06305B; transition: 0.1s ease-in-out; font-weight: 600; }

border: none; background: #EFEFEF; padding: 1em; }
 * 1) mw-searchoptions{

padding: .5em; }
 * 1) mw-searchoptions table td{

/************************************************* .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle{ margin-top:0; border:none; }
 * RECENT CHANGES
 * RECENT CHANGES

.oo-ui-widget.oo-ui-widget-enabled.oo-ui-draggableGroupElement.oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined.oo-ui-menuTagMultiselectWidget.mw-rcfilters-ui-filterTagMultiselectWidget{ margin-top:1em; }

span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement.oo-ui-buttonElement-frameless.oo-ui-indicatorElement.oo-ui-labelElement.oo-ui-flaggedElement-progressive.oo-ui-buttonWidget{ width:100%; }

/*************************************************	max-width:100%; }
 * UPLOAD WIZARD
 * 1) upload-wizard{
 * 1) upload-wizard{
 * 1) upload-wizard{
 * 1) upload-wizard{

/************************************************* .ns-6 #content, .ns-6 #footer { background:#282828; color: #C0C0C0; }
 * NAMESPACE 6
 * FILE THEME
 * FILE THEME

.ns-6 h1, .ns-6 h2, .ns-6 h3, .ns-6 h4, .ns-6 h5, .ns-6 h6 { color: #DEDEDE; }

.ns-6 a, .ns-6 a:visited{ color: #D1DEEB; }

.ns-6 .catlinks, .ns-6 #filetoc { background-color: #181818; border:1px solid #454545; }

.ns-6 table.wikitable, .ns-6 .mw_metadata { background-color: #181818; color: #BFBFBF; border:none; }

.ns-6 table.wikitable > tr > th, .ns-6 table.wikitable > * > tr > th, .ns-6 .mw_metadata th { background-color: #0d1926; }

.ns-6 .mw_metadata td { background-color: unset; }

.ns-6 tr:nth-child(even) { background: #252525; }

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { border: none; padding: 0.5em; }

.ns-6 .editOptions, .ns-6 .wikiEditor-ui-controls, .ns-6 .wikiEditor-ui-buttons, .ns-6 .pBody, .ns-6 #editpage-specialchars{ background: #181818; color:#EDEDED; }

.ns-6 .wikiEditor-preview-contents { background-color: #282828; }

.ns-6 #p-cactions li.selected a { background-color: #282828; color: #A0C4E8; }

/************************************************* .ns-110 #content{ background: #CCDDEB; }
 * NAMESPACE 110
 * FORUM THEME
 * FORUM THEME

.ns-110 #p-cactions li.selected a, .ns-110 .wikiEditor-ui-controls, .ns-110 .wikiEditor-ui-buttons { background-color: #CCDDEB; }

/************************************************* .ns-3000 #content{ background: #F2F8FF; }
 * NAMESPACE 3000
 * NEWS THEME
 * NEWS THEME

/************************************************* .tabbertab .infobox { float: none; }
 * INFOBOX
 * INFOBOX

.infobox { float:right; color:#FFFFFF; background:#EDEDED; box-shadow:0 0 7px 0 #00000099; border-radius:7px; }

.panel-bar{ padding:.25em; border-radius:7px 7px 0 0; }

.news .infoboxImage img{ width: 100%; height: auto; }

.infobox .highlights ul, .infobox .highlights p{	padding:5px; }

.infobox .row{ display:flex; flex-direction:row; }

.infobox .row .label{ padding:5px; flex:1; text-align:right; }

.infobox .row .content{ padding:5px; flex:2; text-align:left; }

.infobox .content a{	color:#9DEEFF !important; }

@media (max-width:720px){ .infobox{ width:100%; margin:5px 0 5px 0; }	.tabber.infoboxTab{ width:100%; } }

@media (min-width:720px){ .infobox { width:360px; margin:5px; } }

.title{ font-family: Roboto Slab; font-size: 1.2em; color: #FFFFFF; padding: 10px; text-align: center; } .infobox .row:last-child .label{ border-bottom-left-radius:7px; }

.infobox .row:last-child .content{ border-bottom-right-radius:7px; }

.infobox .tabber .infobox .row .label, .infobox .tabber .infobox .row .content { border-radius: 0 0; }

/************************************************* @supports (backdrop-filter:blur(20px)) or (-webkit-backdrop-filter:blur(20px)) { .blurElement-5{ backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }	.blurElement-10{ backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }	.blurElement-20{ backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }	.blurElement-30{ backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px); } }
 * BLUR ELEMENT LEVELS
 * BLUR ELEMENT LEVELS