×
Create a new article
Write your page title here:
We currently have 169 articles on The Sonic the Hedgehog Wiki. Type your article name above or click on one of the titles below and start writing!



The Sonic the Hedgehog Wiki
169Articles

MediaWiki:Vector.css: Difference between revisions

No edit summary
No edit summary
Line 1: Line 1:
@import url("/load.php?mode=articles&articles=MediaWiki:Highlight.css|MediaWiki:Homepage.css|MediaWiki:Tabber.css|MediaWiki:InfoboxTheme.css&only=styles");
@import url("/load.php?mode=articles&articles=u:dev:MediaWiki:ContribsButtons.css|u:dev:MediaWiki:FontAwesome.css|u:dev:MediaWiki:AjaxPoll.Modern.css&only=styles");
/*************************************** Template:Talk **************************************/
.page-bright .page__main {
    background-color: rgba(255, 255, 255, .9);
}
.talk {
    display: flex;
    flex-direction: column;
}
#headerh2 {
    background: linear-gradient(to bottom,#0461f7 0%,#1351dc 100%) !important;
    border-top-left-radius: 24px;
    padding: 6px;
    border-top-right-radius:24px;
    box-shadow: 0 1px 3px -1px rgba(0,0,0,0.12),0 2px 6px rgba(0,0,0,0.07);
    color: black;
    text-align: center;
}
/* Hover effect */
.img1 {
    position: relative;
}
.img1:hover .overlay {
    opacity: 1;
  }
.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: .5s ease;
  }
.article-thumb /* image overlap centering fix */ {
    margin-top: 0px;
}
/***************************************** The rest ***********************************/
a.tag {
    color: inherit;
}
/* Community page */
.community-page-todo-list-module .community-page-todo-list-module-content {
    border-left: none;
}
.community-page-header {
    left: -21px !important;
    width: calc(100% + 2 * 21px) !important;
}
.community-page-entry-point-module a:hover {
  color: white;
}
.community-page-header.community-page-header-cover {
    background-position-y: 0px !important;
}
/* Welcome message styling */
.WMWU {
    background-image: url('https://vignette.wikia.nocookie.net/sonic/images/b/b9/Channel_Sonic_Clear.png/revision/latest?cb=20181018143801');
    background-size: 48%;
    background-repeat: no-repeat;
    background-position: right;
    font-weight: normal;
   
}
/***** Highlight top navigation *****/
.fandom-community-header__local-navigation [href="/wiki/Category:TV_and_comics_information"]::after,
.fandom-community-header__local-navigation [href="/wiki/IDW_Publishing"] span::after
{
    content: 'new';
    position: relative;
    background-color: red;
    top: 0;
    padding: 0 2px;
    font-size: 80%;
    font-weight: normal;
    border-radius: 4px;
    text-transform: lowercase;
    color: black;
    margin-left: 5px;
}
.wds-dropdown-level-2 {
    position:relative;
}
/***** Navbox *****/
.gbox {
    margin: 5px;
    float: left;
    width: 150px;
    height: auto;
border: none;
}
.desc {
    height: auto;
    padding: 5px;
    font-size: smaller;
    line-height: 20px;
    text-align: center;
    background-color: black;
    border-top: #0041a2 solid 4px;
    color: white;
}
.desc a {
    color: white;
    word-wrap: break-word;
}
.gbox img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    object-position: center top;
    border: 1px solid aliceblue;
}
.gbox img:hover {
      background: white;
      object-fit: cover !important;
}
.mw-collapsible.mw-made-collapsible {
    overflow: hidden;
}
.navb .wds-tab__content.wds-is-current {
    display: grid;
}
.navb .wds-tabs__tab {
    color: black;
    cursor: default;
    flex-shrink: 0;
    line-height: 14px;
    position: relative;
    transition: box-shadow .1s;
    border: 1px solid black;
    border-radius: 10px;
    flex-grow: 1;
    display: flex;
}
.navb .wds-tabs__tab-label {
  margin: auto;
  text-align: center;
}
.navb .wds-tabs__tab-label a {
    font-weight: 500;
    padding-left: 8px;
    white-space: break-spaces;
}
.navb .wds-tabs__tab.wds-is-current {
    border-color: var(--wds-tab-color--active);
    box-shadow: none;
    color: var(--theme-link-color);
}
.navb .wds-tabs {
    display: flex;
    flex-direction: revert;
    justify-content: center;
    gap: 10px;
    margin: 1px !important;
    flex-wrap: wrap;
}
.navb .tabbertab {
    display: grid;
}
.navb .tabbertab table {
    width: 100%;
}
.gbox .selflink {
    color: white;
}
.navb tr {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.navb .tabber.wds-tabber {
    overflow-x: auto !important;
}
.navb .tabber .tabber.wds-tabber {
    display: grid;
    grid-template-columns: 1fr 17fr;
    overflow-x: auto !important;
}
.navb .tabber .tabber.wds-tabber .wds-tabs {
    display: flex;
    flex-direction: column;
}
.navb .tabber .tabber .wds-tabs__wrapper {
    position: relative;
    display: flex;
}
.navb .wds-tabs__wrapper .wds-tabs {
    overflow-x: unset;
}
.navb .tabber .tabber .wds-tabs__tab.wds-is-current {
    border-style: solid;
    border-color: var(--wds-tab-color--active);
    flex-grow: 1;
    border-radius: 10px;
    box-shadow: none;
    border-width: 1px;
}
.navb .tabber .tabber .wds-tabs__tab{
    border-style: solid !important;
    border-color: rgba(58, 58, 58, 0.75);
    flex-grow: 1;
    border-width: 1px;
    border-radius: 10px;
    box-shadow: none;
    width: 90%;
    margin-left: 15px;
    align-content: center;
    align-items: center;
    display: flex;
}
.navb .wds-tabs__wrapper.with-bottom-border {
    border-bottom: none;
}
/***** Audio player styling *****/
.k-player .time-disp,
.k-player .k-options {
color: #fff !important;
}
.ui-widget-header {
background: linear-gradient(to bottom,#f78604 0%,#ce5e14 100%) !important;
}
/**** Slideshow, figure image ****/
.wikia-slideshow-images-wrapper .wikia-slideshow-images li img {
    margin: -1px;
}
.WikiaMainContent .thumbcaption {
padding-top: 5px;
}
.wikia-slideshow {
    margin: 10px;
}
div.floatright, table.floatright, div.floatleft, table.floatleft {
margin-right: 5px;
}
.mw-parser-output {
position: relative;
}
.faImage {
position: relative;
z-index: 10;
left: 95%;
}
/* WikiaNotification */
.mw-notification-area {
top: 80% !important;
}
.pi-data-value.pi-font  {
    padding-left: 10px;
    max-height: 193px;
    overflow-y: auto;
}
.navb .tabber .tabber .wds-tabs__wrapper.right-arrow-visible .wds-tabs {
  -webkit-mask-image: none;
}
.navb .tabber .tabber .wds-tabs__wrapper.right-arrow-visible .wds-tabs__arrow-right {
  visibility: hidden;
}
/* Left quote styling */
:root {
  --lquote-color: var(--theme-link-color);
}
.lquote:before {
  font-family: 'Font Awesome 5 Free';
  content: "\f10d";
  color:var(--lquote-color);
  font-size: 1.6em;
  position: absolute;
  left: 15px;
  top: 8px;
  font-weight: 900;
}
.cquote:before {
  font-family: 'Font Awesome 5 Free';
  font-size: 1.6em;
  font-weight: 900;
  content: "\f10d";
  color:var(--lquote-color);
  position: absolute;
  left: 23px;
  top: 9px;
}
.lquote p:after, .cquote p:after {
    font-family: 'Font Awesome 5 Free';
font-size: 1.6em;
font-weight: 900;
    content:"\f10e";
    position: absolute;
    color: var(--lquote-color);
    right: 20px;
}
.lquote, .cquote {
    font-size: 1.1em;
  width:auto;
  margin: 5px auto;
  font-style:italic;
  padding:1.0em 57px 0.05em 60px;
  border-left:8px solid var(--lquote-color) ;
  line-height:1.6;
  position: relative;
  background: rgba(var(--theme-border-color--rgb), 0.20);
  color: var(--theme-text-color);
}
.lquote p, .cquote p {
    margin-left: 0em;
    margin-bottom: 0px;
}
.lquote small, .cquote small {
    display: inline-block;
    font-style: normal;
    color: var(--theme-text-color);
    font-weight: bold;
    margin-top: 1em;
}
.page-content .floatleft { /* fix for sprites margin */
  margin: 24px 10px 10px 0;
}
.Order tr { /* For template order */
display: flex;
align-items: last baseline;
}
.counter {
display: block !important;
}
/*Handling wikitable episode list template */
.page-bright tr.title {
background-color: #F2F2F2;
}
/**********Fix slideshow************/
.page-bright .wikia-slideshow-overlay {
background-color: #A9A9A9;
}
.page-dark .wikia-slideshow-overlay {
background-color: #D3D3D3;
}
.wikia-slideshow-overlay .wikia-slideshow-image-caption {
overflow: auto;
}
.page-dark .wikia-slideshow-image-caption {
    color: black;
}
/*Override links underline */
.mw-parser-output>p a:not(:hover):not(:focus):not(:active) {
text-decoration: none;
}
/************** For {{Div col}} from Wikipedia *********************/
.div-col {
margin-top: 0.3em;
column-width: 30em;
}
.div-col-small {
font-size: 90%;
}
.div-col-rules {
column-rule: 1px solid #aaa;
}
.div-col dl,
.div-col ol,
.div-col ul {
margin-top: 0;
}
.div-col li,
.div-col dd {
page-break-inside: avoid; /* Removed from CSS in favor of break-inside c. 2020 */
break-inside: avoid-column;
}
/* Set Roboto Condensed as the default font */
/* Set Roboto Condensed as the default font */
body {
body {

Revision as of 04:00, 21 December 2024

@import url("/load.php?mode=articles&articles=MediaWiki:Highlight.css|MediaWiki:Homepage.css|MediaWiki:Tabber.css|MediaWiki:InfoboxTheme.css&only=styles");
@import url("/load.php?mode=articles&articles=u:dev:MediaWiki:ContribsButtons.css|u:dev:MediaWiki:FontAwesome.css|u:dev:MediaWiki:AjaxPoll.Modern.css&only=styles");
/*************************************** Template:Talk **************************************/
.page-bright .page__main {
    background-color: rgba(255, 255, 255, .9);
}
.talk {
    display: flex; 
    flex-direction: column;
}
#headerh2 {
    background: linear-gradient(to bottom,#0461f7 0%,#1351dc 100%) !important;
    border-top-left-radius: 24px; 
    padding: 6px; 
    border-top-right-radius:24px; 
    box-shadow: 0 1px 3px -1px rgba(0,0,0,0.12),0 2px 6px rgba(0,0,0,0.07); 
    color: black; 
    text-align: center;
}

/* Hover effect */
.img1 {
    position: relative;
}
.img1:hover .overlay {
    opacity: 1;
   }
.overlay {
    position: absolute;
    top: 0; 
    bottom: 0;
    left: 0; 
    right: 0; 
    opacity: 0; 
    transition: .5s ease;
  }
.article-thumb /* image overlap centering fix */ {
    margin-top: 0px;
}
/***************************************** The rest ***********************************/
a.tag {
    color: inherit;
}

/* Community page */
.community-page-todo-list-module .community-page-todo-list-module-content {
    border-left: none;
}
.community-page-header {
    left: -21px !important;
    width: calc(100% + 2 * 21px) !important;
}

.community-page-entry-point-module a:hover {
  color: white;
}

.community-page-header.community-page-header-cover {
    background-position-y: 0px !important;
}

/* Welcome message styling */
.WMWU {
    background-image: url('https://vignette.wikia.nocookie.net/sonic/images/b/b9/Channel_Sonic_Clear.png/revision/latest?cb=20181018143801');
    background-size: 48%;
    background-repeat: no-repeat;
    background-position: right;
    font-weight: normal;
    
}

/***** Highlight top navigation *****/
.fandom-community-header__local-navigation [href="/wiki/Category:TV_and_comics_information"]::after, 
.fandom-community-header__local-navigation [href="/wiki/IDW_Publishing"] span::after
 {
    content: 'new';
    position: relative;
    background-color: red;
    top: 0;
    padding: 0 2px;
    font-size: 80%;
    font-weight: normal;
    border-radius: 4px;
    text-transform: lowercase;
    color: black;
    margin-left: 5px;
}
 
.wds-dropdown-level-2 {
    position:relative;
}
/***** Navbox *****/
.gbox {
    margin: 5px;
    float: left;
    width: 150px;
    height: auto;
	border: none;
}
.desc {
    height: auto;
    padding: 5px;
    font-size: smaller;
    line-height: 20px;
    text-align: center;
    background-color: black;
    border-top: #0041a2 solid 4px;
    color: white;
}
.desc a {
    color: white;
    word-wrap: break-word;
}
.gbox img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    object-position: center top;
    border: 1px solid aliceblue;
}
.gbox img:hover {
       background: white; 
       object-fit: cover !important;
}
.mw-collapsible.mw-made-collapsible {
    overflow: hidden;
}
.navb .wds-tab__content.wds-is-current {
    display: grid;
}
.navb .wds-tabs__tab {
    color: black;
    cursor: default;
    flex-shrink: 0;
    line-height: 14px;
    position: relative;
    transition: box-shadow .1s;
    border: 1px solid black;
    border-radius: 10px;
    flex-grow: 1;
    display: flex;
}
.navb .wds-tabs__tab-label {
   margin: auto;
   text-align: center;
}
.navb .wds-tabs__tab-label a {
    font-weight: 500;
    padding-left: 8px;
    white-space: break-spaces;
}
.navb .wds-tabs__tab.wds-is-current {
    border-color: var(--wds-tab-color--active);
    box-shadow: none;
    color: var(--theme-link-color);
}
.navb .wds-tabs {
    display: flex;
    flex-direction: revert;
    justify-content: center;
    gap: 10px;
    margin: 1px !important;
    flex-wrap: wrap;
}
.navb .tabbertab {
    display: grid; 
}
.navb .tabbertab table {
    width: 100%;
}
.gbox .selflink {
    color: white; 
}
.navb tr {
    display: flex; 
    flex-direction: row; 
    justify-content: space-around;
}
.navb .tabber.wds-tabber {
    overflow-x: auto !important;
}
.navb .tabber .tabber.wds-tabber {
    display: grid;
    grid-template-columns: 1fr 17fr;
    overflow-x: auto !important;
}
.navb .tabber .tabber.wds-tabber .wds-tabs {
    display: flex;
    flex-direction: column;
}
.navb .tabber .tabber .wds-tabs__wrapper {
    position: relative;
    display: flex;
}
.navb .wds-tabs__wrapper .wds-tabs {
    overflow-x: unset;
}
.navb .tabber .tabber .wds-tabs__tab.wds-is-current { 
    border-style: solid;
    border-color: var(--wds-tab-color--active);
    flex-grow: 1;
    border-radius: 10px;
    box-shadow: none;
    border-width: 1px;
}
.navb .tabber .tabber .wds-tabs__tab{ 
    border-style: solid !important;
    border-color: rgba(58, 58, 58, 0.75);
    flex-grow: 1;
    border-width: 1px;
    border-radius: 10px;
    box-shadow: none;
    width: 90%;
    margin-left: 15px;
    align-content: center;
    align-items: center;
    display: flex;
}
.navb .wds-tabs__wrapper.with-bottom-border {
    border-bottom: none;
}

/***** Audio player styling *****/
	.k-player .time-disp,
	.k-player .k-options {
	color: #fff !important;
}

	.ui-widget-header {
	background: linear-gradient(to bottom,#f78604 0%,#ce5e14 100%) !important;
}
/**** Slideshow, figure image ****/
.wikia-slideshow-images-wrapper .wikia-slideshow-images li img {
    margin: -1px;
}
.WikiaMainContent .thumbcaption {
	padding-top: 5px;
}
.wikia-slideshow {
    margin: 10px;
}
div.floatright, table.floatright, div.floatleft, table.floatleft {
	margin-right: 5px;
}
.mw-parser-output {
	position: relative;
}
.faImage {
	position: relative; 
	z-index: 10;
	left: 95%;
}

/* WikiaNotification */
.mw-notification-area {
	top: 80% !important;
}

.pi-data-value.pi-font  {
    padding-left: 10px;
    max-height: 193px;
    overflow-y: auto;
}
.navb .tabber .tabber .wds-tabs__wrapper.right-arrow-visible .wds-tabs {
   -webkit-mask-image: none;
}

.navb .tabber .tabber .wds-tabs__wrapper.right-arrow-visible .wds-tabs__arrow-right {
   visibility: hidden;
}

/* Left quote styling */ 
:root {
  --lquote-color: var(--theme-link-color);
}
.lquote:before {
  font-family: 'Font Awesome 5 Free';
  content: "\f10d";
  color:var(--lquote-color);
  font-size: 1.6em;
  position: absolute;
  left: 15px;
  top: 8px;
  font-weight: 900;
}
.cquote:before {
  font-family: 'Font Awesome 5 Free';
  font-size: 1.6em;
  font-weight: 900;
  content: "\f10d";
  color:var(--lquote-color);
  position: absolute;
  left: 23px;
  top: 9px;
}
.lquote p:after, .cquote p:after {
    font-family: 'Font Awesome 5 Free';
	font-size: 1.6em;
	font-weight: 900;
    content:"\f10e";
    position: absolute;
    color: var(--lquote-color);
    right: 20px;
}

.lquote, .cquote {
    font-size: 1.1em;
  width:auto;
  margin: 5px auto;
  font-style:italic;
  padding:1.0em 57px 0.05em 60px;
  border-left:8px solid var(--lquote-color) ;
  line-height:1.6;
  position: relative;
  background: rgba(var(--theme-border-color--rgb), 0.20);
  color: var(--theme-text-color);
}
.lquote p, .cquote p {
    margin-left: 0em;
    margin-bottom: 0px;
}
.lquote small, .cquote small {
    display: inline-block;
    font-style: normal;
    color: var(--theme-text-color);
    font-weight: bold;
    margin-top: 1em;
}

.page-content .floatleft { /* fix for sprites margin */
  margin: 24px 10px 10px 0;

}
.Order tr { /* For template order */
	display: flex;
	align-items: last baseline;
}

.counter {
	display: block !important;
}

/*Handling wikitable episode list template */
.page-bright tr.title {
	background-color: #F2F2F2;
}

/**********Fix slideshow************/
.page-bright .wikia-slideshow-overlay {
	background-color: #A9A9A9;
}
.page-dark .wikia-slideshow-overlay {
	background-color: #D3D3D3;
}
.wikia-slideshow-overlay .wikia-slideshow-image-caption {
	overflow: auto;
}

.page-dark .wikia-slideshow-image-caption {
    color: black;
}
/*Override links underline */
.mw-parser-output>p a:not(:hover):not(:focus):not(:active) {
	text-decoration: none;
}

/************** For {{Div col}} from Wikipedia *********************/
.div-col {
	margin-top: 0.3em;
	column-width: 30em;
}

.div-col-small {
	font-size: 90%;
}

.div-col-rules {
	column-rule: 1px solid #aaa;
}

.div-col dl,
.div-col ol,
.div-col ul {
	margin-top: 0;
}

.div-col li,
.div-col dd {
	page-break-inside: avoid; /* Removed from CSS in favor of break-inside c. 2020 */
	break-inside: avoid-column;
}

/* Set Roboto Condensed as the default font */
body {
    font-family: 'Roboto Condensed', Arial, sans-serif;
}
@media screen and (min-width: 1200px) {
    body {
    background-color: #051e72;
    background: linear-gradient(180deg, #051e72 0, transparent 86.1333333333vw), linear-gradient(0deg, #051e72 0, transparent 52.6666666667vw), url(https://sonic-city.net/wp-content/uploads/2024/08/intro_bg.png) center top / auto 20px;
    position: relative;
}
}

#firstHeading {
    font-family: 'Roboto Condensed', Arial, sans-serif;
}

#mw-previewheader {
    font-family: 'Roboto Condensed', Arial, sans-serif;
}

@media screen and (min-width: 1200px) {
    .mw-page-container, .vector-header-container .mw-header, .vector-header-container .vector-sticky-header {
        padding-left: 3.25rem;
        padding-right: 3.25rem;
        background-color: transparent;
}

.vector-pinned-container {
   background: #fff;
   border-radius: 12px;
   padding: 7px;
}

.mw-content-container{
    background: #fff;
    border-radius: 12px;
    padding: 7px;
}