MediaWiki:Common.css: Difference between revisions

From RollerCoaster Tycoon Wiki Wiki, the RollerCoaster Tycoon encyclopedia that anyone can edit.
Content added Content deleted
(More styling (mainly article))
(Fixes, more top toolbar styling)
Line 45: Line 45:
body.skin-vector {
body.skin-vector {
background: url("https://static.miraheze.org/rctwiki/0/01/Mowedgrass.png"); }
background: url("https://static.miraheze.org/rctwiki/0/01/Mowedgrass.png"); }
body.skin-vector div.mw-page-container header.mw-header nav.vector-user-links ul.vector-menu-content-list > #pt-notifications-alert,
body.skin-vector div.mw-page-container {
body.skin-vector div.mw-page-container header.mw-header nav.vector-user-links ul.vector-menu-content-list > #pt-notifications-notice,
body.skin-vector div.mw-page-container header.mw-header nav.vector-user-links ul.vector-menu-content-list > #pt-watchlist-2 {
background-color: var(--rct-grey-7);
border-top: 1px solid var(--rct-grey-8);
border-left: 1px solid var(--rct-grey-8);
border-right: 1px solid var(--rct-grey-5);
border-bottom: 1px solid var(--rct-grey-5);
height: 52px; }
body.skin-vector div.mw-page-container header.mw-header #p-personal {
background-color: var(--rct-grey-7);
border-top: 1px solid var(--rct-grey-8);
border-left: 1px solid var(--rct-grey-8);
border-right: 1px solid var(--rct-grey-5);
border-bottom: 1px solid var(--rct-grey-5);
height: 52px; }
body.skin-vector div.mw-page-container #mw-panel {
background-color: transparent; }
background-color: transparent; }
body.skin-vector div.mw-page-container #mw-panel > * {
body.skin-vector div.mw-page-container header.mw-header #mw-sidebar-button {
padding: 0;
background-color: var(--rct-grey-7);
background-color: var(--rct-indian-red);
border-top: 1px solid var(--rct-indian-red-lighter);
border-left: 1px solid var(--rct-indian-red-lighter);
border-right: 1px solid var(--rct-indian-red-darker);
border-bottom: 1px solid var(--rct-indian-red-darker);
margin-left: 0;
margin-right: 0; }
body.skin-vector div.mw-page-container #mw-panel > * + * {
margin-top: 1em; }
body.skin-vector div.mw-page-container #mw-panel > * > *:first-child {
background-color: var(--rct-indian-red-2);
padding: 2px;
color: var(--rct-white-lighter);
text-align: center;
font-weight: bold;
border-top-color: var(--rct-indian-red-5);
border-left-color: var(--rct-indian-red-5);
border-right-color: var(--rct-indian-red-8);
border-bottom-color: var(--rct-indian-red-8);
margin: 0; }
body.skin-vector div.mw-page-container #mw-panel > * > *:first-child h1, body.skin-vector div.mw-page-container #mw-panel > * > *:first-child h2, body.skin-vector div.mw-page-container #mw-panel > * > *:first-child h3, body.skin-vector div.mw-page-container #mw-panel > * > *:first-child h4, body.skin-vector div.mw-page-container #mw-panel > * > *:first-child h5, body.skin-vector div.mw-page-container #mw-panel > * > *:first-child h6 {
color: var(--rct-white-lighter);
font-family: sans-serif; }
body.skin-vector div.mw-page-container #mw-panel > * > *:nth-child(2) {
padding-bottom: 0.3em; }
body.skin-vector div.mw-page-container #mw-panel > * > *:nth-child(2) li:hover {
background-color: var(--rct-indian-red-5); }
body.skin-vector div.mw-page-container #mw-panel > * > *:nth-child(2) a {
color: white; }
body.skin-vector div.mw-page-container #content > header {
background-color: var(--rct-indian-red-2);
padding: 2px;
color: var(--rct-white-lighter);
text-align: center;
font-weight: bold;
border-top-color: var(--rct-indian-red-5);
border-left-color: var(--rct-indian-red-5);
border-right-color: var(--rct-indian-red-8);
border-bottom-color: var(--rct-indian-red-8); }
body.skin-vector div.mw-page-container #content > header h1, body.skin-vector div.mw-page-container #content > header h2, body.skin-vector div.mw-page-container #content > header h3, body.skin-vector div.mw-page-container #content > header h4, body.skin-vector div.mw-page-container #content > header h5, body.skin-vector div.mw-page-container #content > header h6 {
color: var(--rct-white-lighter);
font-family: sans-serif; }
body.skin-vector div.mw-page-container #content > nav.vector-article-toolbar {
background-color: var(--rct-indian-red-6);
border-bottom: 1px solid var(--rct-grey-8); }
body.skin-vector div.mw-page-container #content > nav.vector-article-toolbar .mw-article-toolbar-container {
border-bottom: 0; }
body.skin-vector div.mw-page-container #content > nav.vector-article-toolbar #left-navigation {
margin-left: 0; }
body.skin-vector div.mw-page-container #content > nav.vector-article-toolbar li.mw-list-item {
margin: 2px 0 -1px 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background: var(--rct-grey-6);
border-top: 1px solid var(--rct-grey-8);
border-top: 1px solid var(--rct-grey-8);
border-left: 1px solid var(--rct-grey-8);
border-left: 1px solid var(--rct-grey-8);
border-right: 1px solid var(--rct-grey-4);
border-right: 1px solid var(--rct-grey-5);
border-bottom: 1px solid var(--rct-grey-9); }
border-bottom: 1px solid var(--rct-grey-5);
height: 44px;
body.skin-vector div.mw-page-container #content > nav.vector-article-toolbar li.mw-list-item a {
color: white;
width: 44px; }
body.skin-vector div.mw-page-container header.mw-header nav.vector-user-links ul.vector-menu-content-list > #pt-notifications-alert {
font-weight: bold;
padding: 13px;
background-color: var(--rct-grey-7);
border-bottom: 0 !important; }
border-top: 1px solid var(--rct-grey-8);
border-left: 1px solid var(--rct-grey-8);
body.skin-vector div.mw-page-container #content > nav.vector-article-toolbar li.mw-list-item.selected {
background: var(--rct-grey-7);
border-right: 1px solid var(--rct-grey-5);
border-top: 1px solid var(--rct-grey-9);
border-bottom: 1px solid var(--rct-grey-5);
height: 44px;
border-left: 1px solid var(--rct-grey-9);
width: 44px; }
border-right: 1px solid var(--rct-grey-5);
body.skin-vector div.mw-page-container header.mw-header nav.vector-user-links ul.vector-menu-content-list > #pt-notifications-alert a:before {
border-bottom: 1px solid var(--rct-grey-7); }
background-image: url("https://static.miraheze.org/rctwiki/7/74/Notifications.png"); }
body.skin-vector div.mw-page-container #content #bodyContent {
body.skin-vector div.mw-page-container header.mw-header nav.vector-user-links ul.vector-menu-content-list > #pt-notifications-notice {
background-color: var(--rct-grey-7);
background-color: var(--rct-grey-7);
padding: 1.0em; }
border-top: 1px solid var(--rct-grey-8);
body.skin-vector div.mw-page-container #content #bodyContent #mw-content-text {
margin-top: 0; }
border-left: 1px solid var(--rct-grey-8);
border-right: 1px solid var(--rct-grey-5);
border-bottom: 1px solid var(--rct-grey-5);
height: 44px;
width: 44px; }
body.skin-vector div.mw-page-container header.mw-header nav.vector-user-links ul.vector-menu-content-list > #pt-notifications-notice a:before {
background-image: url("https://static.miraheze.org/rctwiki/4/4f/Newspaper.png"); }
body.skin-vector div.mw-page-container header.mw-header nav.vector-user-links ul.vector-menu-content-list > #pt-watchlist-2 {
background-color: var(--rct-grey-7);
border-top: 1px solid var(--rct-grey-8);
border-left: 1px solid var(--rct-grey-8);
border-right: 1px solid var(--rct-grey-5);
border-bottom: 1px solid var(--rct-grey-5);
height: 44px;
width: 44px; }
body.skin-vector div.mw-page-container header.mw-header #p-personal {
background-color: var(--rct-grey-7);
border-top: 1px solid var(--rct-grey-8);
border-left: 1px solid var(--rct-grey-8);
border-right: 1px solid var(--rct-grey-5);
border-bottom: 1px solid var(--rct-grey-5);
height: 44px;
width: 44px; }
body.skin-vector div.mw-page-container #mw-panel {
background-color: transparent; }
body.skin-vector div.mw-page-container #mw-panel > * {
padding: 0;
background-color: var(--rct-indian-red);
border-top: 1px solid var(--rct-indian-red-lighter);
border-left: 1px solid var(--rct-indian-red-lighter);
border-right: 1px solid var(--rct-indian-red-darker);
border-bottom: 1px solid var(--rct-indian-red-darker);
margin-left: 0;
margin-right: 0; }
body.skin-vector div.mw-page-container #mw-panel > * + * {
margin-top: 1em; }
body.skin-vector div.mw-page-container #mw-panel > * > *:first-child {
background-color: var(--rct-indian-red-2);
padding: 2px;
color: var(--rct-white-lighter);
text-align: center;
font-weight: bold;
border-top: 1px solid var(--rct-indian-red-5);
border-left: 1px solid var(--rct-indian-red-5);
border-right: 1px solid var(--rct-indian-red-8);
border-bottom: 1px solid var(--rct-indian-red-8);
margin: 0; }
body.skin-vector div.mw-page-container #mw-panel > * > *:first-child h1, body.skin-vector div.mw-page-container #mw-panel > * > *:first-child h2, body.skin-vector div.mw-page-container #mw-panel > * > *:first-child h3, body.skin-vector div.mw-page-container #mw-panel > * > *:first-child h4, body.skin-vector div.mw-page-container #mw-panel > * > *:first-child h5, body.skin-vector div.mw-page-container #mw-panel > * > *:first-child h6 {
color: var(--rct-white-lighter);
font-family: sans-serif; }
body.skin-vector div.mw-page-container #mw-panel > * > *:nth-child(2) {
padding-bottom: 0.3em; }
body.skin-vector div.mw-page-container #mw-panel > * > *:nth-child(2) li:hover {
background-color: var(--rct-indian-red-5); }
body.skin-vector div.mw-page-container #mw-panel > * > *:nth-child(2) a {
color: white; }
body.skin-vector div.mw-page-container #content > header {
background-color: var(--rct-indian-red-2);
padding: 2px;
color: var(--rct-white-lighter);
text-align: center;
font-weight: bold;
border-top: 1px solid var(--rct-indian-red-5);
border-left: 1px solid var(--rct-indian-red-5);
border-right: 1px solid var(--rct-indian-red-8);
border-bottom: 1px solid var(--rct-indian-red-8); }
body.skin-vector div.mw-page-container #content > header h1, body.skin-vector div.mw-page-container #content > header h2, body.skin-vector div.mw-page-container #content > header h3, body.skin-vector div.mw-page-container #content > header h4, body.skin-vector div.mw-page-container #content > header h5, body.skin-vector div.mw-page-container #content > header h6 {
color: var(--rct-white-lighter);
font-family: sans-serif; }
body.skin-vector div.mw-page-container #content > nav.vector-article-toolbar {
background-color: var(--rct-indian-red-6);
border-bottom: 1px solid var(--rct-grey-8); }
body.skin-vector div.mw-page-container #content > nav.vector-article-toolbar .mw-article-toolbar-container {
border-bottom: 0; }
body.skin-vector div.mw-page-container #content > nav.vector-article-toolbar #left-navigation {
margin-left: 0; }
body.skin-vector div.mw-page-container #content > nav.vector-article-toolbar li.mw-list-item {
margin: 2px 0 -1px 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background: var(--rct-grey-6);
border-top: 1px solid var(--rct-grey-8);
border-left: 1px solid var(--rct-grey-8);
border-right: 1px solid var(--rct-grey-4);
border-bottom: 1px solid var(--rct-grey-9); }
body.skin-vector div.mw-page-container #content > nav.vector-article-toolbar li.mw-list-item a {
color: white;
font-weight: bold;
padding: 13px;
border-bottom: 0 !important; }
body.skin-vector div.mw-page-container #content > nav.vector-article-toolbar li.mw-list-item.selected {
background: var(--rct-grey-7);
border-top: 1px solid var(--rct-grey-9);
border-left: 1px solid var(--rct-grey-9);
border-right: 1px solid var(--rct-grey-5);
border-bottom: 1px solid var(--rct-grey-7); }
body.skin-vector div.mw-page-container #content #bodyContent {
background-color: var(--rct-grey-7);
padding: 1.0em; }
body.skin-vector div.mw-page-container #content #bodyContent #mw-content-text {
margin-top: 0; }


.main-page-game-thumbnail,
.main-page-game-thumbnail,

Revision as of 17:47, 29 January 2023

:root {
  --rct-indian-red: #b34f4f;
  --rct-indian-red-lighter: #c76767;
  --rct-indian-red-darker: #7b1312;
  --rct-dark-indian-red: #530000;
  --rct-light-grey: #839797;
  --rct-light-grey-lighter: #9fafaf;
  --rct-light-grey-darker: #5b7373;
  --rct-dark-grey: #3f5353;
  --rct-white: #d3dbdb;
  --rct-white-lighter: #eff3f3;
  --rct-white-darker: #9fafaf;
  --rct-white-inactive-tab-background: #b7c3c3;
  --rct-white-inactive-tab-darker: #839797;
  --rct-gold: #a76f07;
  --rct-gold-lighter: #bf8b0f;
  --rct-gold-darker: #773f00;
  --rct-dark-gold: #4b2200;
  --light-link: #66a5ff;
  --rct-indian-red-0: #230000;
  --rct-indian-red-1: #4F0000;
  --rct-indian-red-2: #5F0707;
  --rct-indian-red-3: #6F0F0F;
  --rct-indian-red-4: #7F1B1B;
  --rct-indian-red-5: #8F2727;
  --rct-indian-red-6: #A33B3B;
  --rct-indian-red-7: #B34F4F;
  --rct-indian-red-8: #C76767;
  --rct-indian-red-9: #D77F7F;
  --rct-indian-red-10: #EB9F9F;
  --rct-indian-red-11: #FFBFBF;
  --rct-grey-0: #172323;
  --rct-grey-1: #233333;
  --rct-grey-2: #2F4343;
  --rct-grey-3: #3F5353;
  --rct-grey-4: #4B6363;
  --rct-grey-5: #5B7373;
  --rct-grey-6: #6F8383;
  --rct-grey-7: #839797;
  --rct-grey-8: #9FAFAF;
  --rct-grey-9: #B7C3C3;
  --rct-grey-10: #D3DBDB;
  --rct-grey-11: #EFF3F3; }

body.skin-vector {
  background: url("https://static.miraheze.org/rctwiki/0/01/Mowedgrass.png"); }
  body.skin-vector div.mw-page-container {
    background-color: transparent; }
    body.skin-vector div.mw-page-container header.mw-header #mw-sidebar-button {
      background-color: var(--rct-grey-7);
      border-top: 1px solid var(--rct-grey-8);
      border-left: 1px solid var(--rct-grey-8);
      border-right: 1px solid var(--rct-grey-5);
      border-bottom: 1px solid var(--rct-grey-5);
      height: 44px;
      width: 44px; }
    body.skin-vector div.mw-page-container header.mw-header nav.vector-user-links ul.vector-menu-content-list > #pt-notifications-alert {
      background-color: var(--rct-grey-7);
      border-top: 1px solid var(--rct-grey-8);
      border-left: 1px solid var(--rct-grey-8);
      border-right: 1px solid var(--rct-grey-5);
      border-bottom: 1px solid var(--rct-grey-5);
      height: 44px;
      width: 44px; }
      body.skin-vector div.mw-page-container header.mw-header nav.vector-user-links ul.vector-menu-content-list > #pt-notifications-alert a:before {
        background-image: url("https://static.miraheze.org/rctwiki/7/74/Notifications.png"); }
    body.skin-vector div.mw-page-container header.mw-header nav.vector-user-links ul.vector-menu-content-list > #pt-notifications-notice {
      background-color: var(--rct-grey-7);
      border-top: 1px solid var(--rct-grey-8);
      border-left: 1px solid var(--rct-grey-8);
      border-right: 1px solid var(--rct-grey-5);
      border-bottom: 1px solid var(--rct-grey-5);
      height: 44px;
      width: 44px; }
      body.skin-vector div.mw-page-container header.mw-header nav.vector-user-links ul.vector-menu-content-list > #pt-notifications-notice a:before {
        background-image: url("https://static.miraheze.org/rctwiki/4/4f/Newspaper.png"); }
    body.skin-vector div.mw-page-container header.mw-header nav.vector-user-links ul.vector-menu-content-list > #pt-watchlist-2 {
      background-color: var(--rct-grey-7);
      border-top: 1px solid var(--rct-grey-8);
      border-left: 1px solid var(--rct-grey-8);
      border-right: 1px solid var(--rct-grey-5);
      border-bottom: 1px solid var(--rct-grey-5);
      height: 44px;
      width: 44px; }
    body.skin-vector div.mw-page-container header.mw-header #p-personal {
      background-color: var(--rct-grey-7);
      border-top: 1px solid var(--rct-grey-8);
      border-left: 1px solid var(--rct-grey-8);
      border-right: 1px solid var(--rct-grey-5);
      border-bottom: 1px solid var(--rct-grey-5);
      height: 44px;
      width: 44px; }
    body.skin-vector div.mw-page-container #mw-panel {
      background-color: transparent; }
      body.skin-vector div.mw-page-container #mw-panel > * {
        padding: 0;
        background-color: var(--rct-indian-red);
        border-top: 1px solid var(--rct-indian-red-lighter);
        border-left: 1px solid var(--rct-indian-red-lighter);
        border-right: 1px solid var(--rct-indian-red-darker);
        border-bottom: 1px solid var(--rct-indian-red-darker);
        margin-left: 0;
        margin-right: 0; }
        body.skin-vector div.mw-page-container #mw-panel > * + * {
          margin-top: 1em; }
        body.skin-vector div.mw-page-container #mw-panel > * > *:first-child {
          background-color: var(--rct-indian-red-2);
          padding: 2px;
          color: var(--rct-white-lighter);
          text-align: center;
          font-weight: bold;
          border-top: 1px solid var(--rct-indian-red-5);
          border-left: 1px solid var(--rct-indian-red-5);
          border-right: 1px solid var(--rct-indian-red-8);
          border-bottom: 1px solid var(--rct-indian-red-8);
          margin: 0; }
          body.skin-vector div.mw-page-container #mw-panel > * > *:first-child h1, body.skin-vector div.mw-page-container #mw-panel > * > *:first-child h2, body.skin-vector div.mw-page-container #mw-panel > * > *:first-child h3, body.skin-vector div.mw-page-container #mw-panel > * > *:first-child h4, body.skin-vector div.mw-page-container #mw-panel > * > *:first-child h5, body.skin-vector div.mw-page-container #mw-panel > * > *:first-child h6 {
            color: var(--rct-white-lighter);
            font-family: sans-serif; }
        body.skin-vector div.mw-page-container #mw-panel > * > *:nth-child(2) {
          padding-bottom: 0.3em; }
          body.skin-vector div.mw-page-container #mw-panel > * > *:nth-child(2) li:hover {
            background-color: var(--rct-indian-red-5); }
          body.skin-vector div.mw-page-container #mw-panel > * > *:nth-child(2) a {
            color: white; }
    body.skin-vector div.mw-page-container #content > header {
      background-color: var(--rct-indian-red-2);
      padding: 2px;
      color: var(--rct-white-lighter);
      text-align: center;
      font-weight: bold;
      border-top: 1px solid var(--rct-indian-red-5);
      border-left: 1px solid var(--rct-indian-red-5);
      border-right: 1px solid var(--rct-indian-red-8);
      border-bottom: 1px solid var(--rct-indian-red-8); }
      body.skin-vector div.mw-page-container #content > header h1, body.skin-vector div.mw-page-container #content > header h2, body.skin-vector div.mw-page-container #content > header h3, body.skin-vector div.mw-page-container #content > header h4, body.skin-vector div.mw-page-container #content > header h5, body.skin-vector div.mw-page-container #content > header h6 {
        color: var(--rct-white-lighter);
        font-family: sans-serif; }
    body.skin-vector div.mw-page-container #content > nav.vector-article-toolbar {
      background-color: var(--rct-indian-red-6);
      border-bottom: 1px solid var(--rct-grey-8); }
      body.skin-vector div.mw-page-container #content > nav.vector-article-toolbar .mw-article-toolbar-container {
        border-bottom: 0; }
      body.skin-vector div.mw-page-container #content > nav.vector-article-toolbar #left-navigation {
        margin-left: 0; }
      body.skin-vector div.mw-page-container #content > nav.vector-article-toolbar li.mw-list-item {
        margin: 2px 0 -1px 0;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        background: var(--rct-grey-6);
        border-top: 1px solid var(--rct-grey-8);
        border-left: 1px solid var(--rct-grey-8);
        border-right: 1px solid var(--rct-grey-4);
        border-bottom: 1px solid var(--rct-grey-9); }
        body.skin-vector div.mw-page-container #content > nav.vector-article-toolbar li.mw-list-item a {
          color: white;
          font-weight: bold;
          padding: 13px;
          border-bottom: 0 !important; }
        body.skin-vector div.mw-page-container #content > nav.vector-article-toolbar li.mw-list-item.selected {
          background: var(--rct-grey-7);
          border-top: 1px solid var(--rct-grey-9);
          border-left: 1px solid var(--rct-grey-9);
          border-right: 1px solid var(--rct-grey-5);
          border-bottom: 1px solid var(--rct-grey-7); }
    body.skin-vector div.mw-page-container #content #bodyContent {
      background-color: var(--rct-grey-7);
      padding: 1.0em; }
      body.skin-vector div.mw-page-container #content #bodyContent #mw-content-text {
        margin-top: 0; }

.main-page-game-thumbnail,
.main-page-addon-thumbnail {
  margin: auto;
  border-radius: 10px;
  box-shadow: 1px 1px 2px #222;
  overflow: hidden; }

.main-page-game-thumbnail {
  width: 140px;
  height: 140px; }

.main-page-addon-thumbnail {
  width: 120px;
  height: 120px; }

div.ridebox-list {
  display: flex;
  flex-wrap: wrap; }
  div.ridebox-list > table {
    width: auto; }