MediaWiki:Common.css

MediaWiki interface page

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */

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


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

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

#jump-to-nav{
	display:none;
}

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

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

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

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

#StH {
	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; 
}

#StH2 {
	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; 
}

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

#SnK{
	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;
}

#S3DB{
	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;
}

#SM{
	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;
}

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

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

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

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

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

/*************************************************
**
**		SITE NOTICE
**
**************************************************/
#siteNotice{
	padding:0;
}

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

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

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

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

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

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

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

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

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

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

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

#mw-searchoptions table td{
	padding: .5em;
}

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

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

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

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

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

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

/*************************************************
**
**		BLUR ELEMENT LEVELS
**
**************************************************/
@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);
	}
}


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

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

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

.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);
}
Retrieved from "https://www.sonicarchive.com/index.php?title=MediaWiki:Common.css&oldid=905"
Cookies help us deliver our services. By using our services, you agree to our use of cookies.
More information