MediaWiki:Common.css

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

/************************************************* /* Custom Sonic fonts here */
 * IMPORT FONTS
 * IMPORT FONTS

/************************************************* 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; }

/*************************************************	height: 175px; margin: 1em 0; }
 * LOGO
 * 1) p-logo a, #p-logo a:hover{
 * 1) p-logo a, #p-logo a:hover{
 * 1) p-logo a, #p-logo a:hover{
 * 1) p-logo a, #p-logo a:hover{

div#sidebar, .skin-metrolook #p-navigation{ padding: 1.5em 0 !important; }

/*************************************************
 * 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); }

img.mwe-popups-thumbnail { object-position: top; }

/************************************************* .catlinks { border: none; background: none; }
 * CATEGORIES
 * CATEGORIES

.mw-normal-catlinks li, .catlinks li:first-child, .catlinks :not(li) >.hotcatlink { font-size: 0.8em; transition: 0.2s ease-in-out; font-weight: 500; text-transform: uppercase; }

.mw-normal-catlinks li a{	transition: 0.2s ease-in-out; }

.mw-normal-catlinks li:hover a, .catlinks .hotcatlink:hover a { color: #FFFFFF; text-decoration: none; }

.mw-normal-catlinks li:hover, .catlinks .hotcatlink:hover { background: #016CC4; box-shadow: 0 0 7px -2px #000000; }

/************************************************* ul.ext-related-articles-card-list { overflow: visible; }
 * RELATED ARTICLES
 * RELATED ARTICLES

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

/*************************************************	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; }

@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) { html .thumbcaption { background: rgba(204,204,204,0.6); backdrop-filter: saturate(180%)blur(15px); } }

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

.mw-parser-output .tableNoBg{ background: transparent; }

.tableNoBg tr:nth-child(even) { background: transparent; }

/************************************************* .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-search-results .mw-search-result{ transition: 0.2s ease-in-out; padding: 1em; border-radius: 4px; }

.mw-search-results .mw-search-result:hover { box-shadow: 0 0 0.7em 0 rgba(0,0,0,0.5); }

/************************************************* .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{

/************************************************* .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

/************************************************* .usermessage { background-color: #fff4ce; padding: 1em; box-shadow: 0 0 0.5em 0em rgb(0 0 0 / 50%); border:none; }
 * USERMESSAGE
 * USERMESSAGE

.usermessage a{	color:#797673; }

.usermessage a:before { content: ''; display: inline-block; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 48 48'%3E%3ClinearGradient id='a' x1='9.899' x2='38.183' y1='9.98' y2='38.264' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2333bef0'/%3E%3Cstop offset='1' stop-color='%230a85d9'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23a)' d='M44.041 24.122c0 11.045-8.955 20-20 20s-20-8.955-20-20 8.955-20 20-20 20 8.955 20 20z'/%3E%3Cpath d='M22 36h4a1 1 0 001-1V20a1 1 0 00-1-1h-4a1 1 0 00-1 1v15a1 1 0 001 1z' opacity='.05'/%3E%3Cpath d='M22.227 35.5h3.547a.727.727 0 00.727-.727V20.227a.727.727 0 00-.727-.727h-3.547a.727.727 0 00-.727.727v14.547c0 .401.325.726.727.726z' opacity='.07'/%3E%3Cellipse cx='24' cy='15.402' fill='url(%23undefined)' opacity='.15' rx='3.988' ry='3.609'/%3E%3Cpath fill='%23fff' d='M24 17.732c1.7 0 2.65-1.068 2.65-2.388C26.65 14.024 25.647 13 24 13s-2.65 1.024-2.65 2.344c0 1.32.95 2.388 2.65 2.388zM22 20h4v15h-4z'/%3E%3C/svg%3E"); width: 20px; height: 20px; vertical-align: middle; margin-right: .5em; }

/************************************************* .leaflet-popup-content-wrapper{ background: linear-gradient(0deg,#9e1d1d,#f5210c); color: #FFFFFF; }
 * MAP STYLES
 * MAP STYLES

.leaflet-popup-tip{ background: #9e1d1d; }

.leaflet-popup-content-wrapper a, .leaflet-popup-tip a { color: #5cc3ff; }

.leaflet-bar a, .leaflet-container .leaflet-control-attribution{ background: rgba(214, 214, 214, 0.8); }

.leaflet-bar a.leaflet-disabled{ background: rgba(255, 255, 255, 0.6); }

.leaflet-bar a:hover, .leaflet-bar a:focus{ background: rgba(244, 244, 244, 0.6); }

.leaflet-bar a, .leaflet-container .leaflet-control-attribution{ backdrop-filter: blur(15px)saturate(1.8); }

.leaflet-bar a.fullscreen-icon{ background-image: url(/extensions/Maps/resources/lib/leaflet.fullscreen/icon-fullscreen.png?fdda3); }