MediaWiki:Common.css: Difference between revisions

From RollerCoaster Tycoon Wiki Wiki, the RollerCoaster Tycoon encyclopedia that anyone can edit.
Content added Content deleted
(Add ridebox list)
(Start CSS tweaks to accomodate Vector 2022)
Line 100: Line 100:
color: transparent;
color: transparent;
padding-top: 0; }
padding-top: 0; }
body.skin-vector #mw-panel nav,
body.skin-vector #mw-panel,
body.skin-vector-legacy #mw-panel nav {
body.skin-vector-legacy #mw-panel {
background-color: var(--rct-indian-red);
background-color: transparent;
border: 1px solid;
border: 0; }
body.skin-vector #mw-panel nav,
border-top-color: var(--rct-indian-red-lighter);
body.skin-vector-legacy #mw-panel nav {
border-left-color: var(--rct-indian-red-lighter);
border-right-color: var(--rct-indian-red-darker);
background-color: var(--rct-indian-red);
border-bottom-color: var(--rct-indian-red-darker);
padding-top: 0; }
body.skin-vector #mw-panel nav + nav,
body.skin-vector-legacy #mw-panel nav + nav {
margin-top: 15px; }
body.skin-vector #mw-panel nav h3,
body.skin-vector-legacy #mw-panel nav h3 {
height: 12px;
margin: 0;
border: 1px solid;
border: 1px solid;
border-top-color: var(--rct-indian-red-darker);
border-top-color: var(--rct-indian-red-lighter);
border-left-color: var(--rct-indian-red-darker);
border-left-color: var(--rct-indian-red-lighter);
border-right-color: var(--rct-indian-red-lighter);
border-right-color: var(--rct-indian-red-darker);
border-bottom-color: var(--rct-indian-red-lighter);
border-bottom-color: var(--rct-indian-red-darker);
padding-top: 0; }
background-color: var(--rct-dark-indian-red);
body.skin-vector #mw-panel nav + nav,
color: white;
body.skin-vector-legacy #mw-panel nav + nav {
font-weight: bold;
text-align: center;
margin-top: 15px; }
body.skin-vector #mw-panel nav h3,
background-image: none;
body.skin-vector-legacy #mw-panel nav h3 {
line-height: 12px; }
height: 12px;
body.skin-vector #mw-panel nav a,
margin: 0;
body.skin-vector-legacy #mw-panel nav a {
color: #fff;
border: 1px solid;
border-bottom: 1px dotted; }
border-top-color: var(--rct-indian-red-darker);
border-left-color: var(--rct-indian-red-darker);
border-right-color: var(--rct-indian-red-lighter);
border-bottom-color: var(--rct-indian-red-lighter);
background-color: var(--rct-dark-indian-red);
color: white;
font-weight: bold;
text-align: center;
background-image: none;
line-height: 12px; }
body.skin-vector #mw-panel nav a,
body.skin-vector-legacy #mw-panel nav a {
color: #fff;
border-bottom: 1px dotted; }
body.skin-vector #p-personal .vector-menu-content-list,
body.skin-vector #p-personal .vector-menu-content-list,
body.skin-vector-legacy #p-personal .vector-menu-content-list {
body.skin-vector-legacy #p-personal .vector-menu-content-list {
Line 265: Line 269:
color: transparent;
color: transparent;
padding: 0 !important; }
padding: 0 !important; }
body.skin-vector #pt-notifications-alert a ::before,
body.skin-vector #pt-notifications-notice a ::before,
body.skin-vector li#pt-preferences a ::before,
body.skin-vector li#pt-watchlist a ::before,
body.skin-vector li#pt-betafeatures a ::before,
body.skin-vector li#pt-userpage a ::before,
body.skin-vector li#pt-login a ::before,
body.skin-vector li#pt-logout a ::before,
body.skin-vector li#pt-mytalk a ::before,
body.skin-vector li#pt-anontalk a ::before,
body.skin-vector li#pt-mycontris a ::before,
body.skin-vector li#pt-anoncontribs a ::before,
body.skin-vector li#pt-createaccount a ::before,
body.skin-vector-legacy #pt-notifications-alert a ::before,
body.skin-vector-legacy #pt-notifications-notice a ::before,
body.skin-vector-legacy li#pt-preferences a ::before,
body.skin-vector-legacy li#pt-watchlist a ::before,
body.skin-vector-legacy li#pt-betafeatures a ::before,
body.skin-vector-legacy li#pt-userpage a ::before,
body.skin-vector-legacy li#pt-login a ::before,
body.skin-vector-legacy li#pt-logout a ::before,
body.skin-vector-legacy li#pt-mytalk a ::before,
body.skin-vector-legacy li#pt-anontalk a ::before,
body.skin-vector-legacy li#pt-mycontris a ::before,
body.skin-vector-legacy li#pt-anoncontribs a ::before,
body.skin-vector-legacy li#pt-createaccount a ::before {
background-image: none; }
body.skin-vector #pt-notifications-alert .mw-echo-notifications-badge::after,
body.skin-vector #pt-notifications-alert .mw-echo-notifications-badge::after,
body.skin-vector #pt-notifications-notice .mw-echo-notifications-badge::after,
body.skin-vector #pt-notifications-notice .mw-echo-notifications-badge::after,
Line 276: Line 307:
body.skin-vector-legacy .mw-footer li a {
body.skin-vector-legacy .mw-footer li a {
color: var(--light-link); }
color: var(--light-link); }
body.skin-vector .mw-page-container,
body.skin-vector-legacy .mw-page-container {
background-color: transparent;
border: 0; }
body.skin-vector .mw-header,
body.skin-vector-legacy .mw-header {
background-color: var(--rct-light-grey);
border-top: 1px solid var(--rct-light-grey-lighter);
border-left-color: var(--rct-light-grey-lighter);
border-right-color: var(--rct-light-grey-darker);
border-bottom-color: var(--rct-light-grey-darker); }


.main-page-game-thumbnail,
.main-page-game-thumbnail,
Line 295: Line 337:
display: flex;
display: flex;
flex-wrap: wrap; }
flex-wrap: wrap; }
div.ridebox-list > table {
width: auto; }

/*# sourceMappingURL=Common.css.map */

Revision as of 15:40, 23 July 2022

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

body.skin-vector,
body.skin-vector-legacy {
  /*background-color: var(--rct-indian-red);*/
  background: url("https://static.miraheze.org/rctwiki/0/01/Mowedgrass.png");
  /* Tabs like Main page, Discussion, etc. */
  /* Navigation boxes on the left */
  /* User links (top right) */
  /* Footer */ }
  body.skin-vector #mw-page-base,
  body.skin-vector-legacy #mw-page-base {
    /*background-color: var(--rct-indian-red);
    background-image: none;*/
    background: none; }
  body.skin-vector .mw-body,
  body.skin-vector-legacy .mw-body {
    background-color: #f5f5f5;
    border-top: 1px solid var(--rct-white-lighter);
    border-left-color: var(--rct-white-lighter);
    border-right-color: var(--rct-white-darker);
    border-bottom-color: var(--rct-white-darker); }
  body.skin-vector #left-navigation,
  body.skin-vector #right-navigation,
  body.skin-vector-legacy #left-navigation,
  body.skin-vector-legacy #right-navigation {
    margin-top: calc(2.5em - 2px); }
  body.skin-vector #left-navigation,
  body.skin-vector-legacy #left-navigation {
    padding-left: 3px; }
  body.skin-vector #left-navigation .vector-menu-tabs,
  body.skin-vector #right-navigation .vector-menu-tabs,
  body.skin-vector-legacy #left-navigation .vector-menu-tabs,
  body.skin-vector-legacy #right-navigation .vector-menu-tabs {
    background-image: none; }
  body.skin-vector #left-navigation ul.vector-menu-content-list li,
  body.skin-vector #right-navigation ul.vector-menu-content-list li,
  body.skin-vector #right-navigation .vector-menu-dropdown h3,
  body.skin-vector-legacy #left-navigation ul.vector-menu-content-list li,
  body.skin-vector-legacy #right-navigation ul.vector-menu-content-list li,
  body.skin-vector-legacy #right-navigation .vector-menu-dropdown h3 {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px; }
  body.skin-vector #left-navigation ul.vector-menu-content-list li.selected,
  body.skin-vector #right-navigation ul.vector-menu-content-list li.selected,
  body.skin-vector-legacy #left-navigation ul.vector-menu-content-list li.selected,
  body.skin-vector-legacy #right-navigation ul.vector-menu-content-list li.selected {
    background-color: #f5f5f5;
    border-left: 1px solid var(--rct-white-lighter);
    border-top: 1px solid var(--rct-white-lighter);
    border-right: 1px solid var(--rct-white-darker);
    border-bottom: 1px solid #f5f5f5; }
  body.skin-vector #left-navigation ul.vector-menu-content-list li:not(.selected),
  body.skin-vector #right-navigation ul.vector-menu-content-list li:not(.selected),
  body.skin-vector #right-navigation .vector-menu-dropdown h3,
  body.skin-vector-legacy #left-navigation ul.vector-menu-content-list li:not(.selected),
  body.skin-vector-legacy #right-navigation ul.vector-menu-content-list li:not(.selected),
  body.skin-vector-legacy #right-navigation .vector-menu-dropdown h3 {
    background-color: var(--rct-white-inactive-tab-background);
    border-left: 1px solid var(--rct-white-lighter);
    border-top: 1px solid var(--rct-white-lighter);
    border-right: 1px solid var(--rct-white-inactive-tab-darker);
    border-bottom: 1px solid var(--rct-white-inactive-tab-background);
    background-image: none; }
  body.skin-vector #left-navigation ul.vector-menu-content-list li a,
  body.skin-vector #right-navigation ul.vector-menu-content-list li a,
  body.skin-vector #right-navigation .vector-menu-dropdown h3,
  body.skin-vector-legacy #left-navigation ul.vector-menu-content-list li a,
  body.skin-vector-legacy #right-navigation ul.vector-menu-content-list li a,
  body.skin-vector-legacy #right-navigation .vector-menu-dropdown h3 {
    background-image: none;
    padding-top: 0.8em; }
  body.skin-vector #right-navigation .vector-menu-dropdown h3::after,
  body.skin-vector-legacy #right-navigation .vector-menu-dropdown h3::after {
    top: 0.3em; }
  body.skin-vector #right-navigation .vector-menu-dropdown h3,
  body.skin-vector-legacy #right-navigation .vector-menu-dropdown h3 {
    height: calc(3.07692308em + 2px); }
  body.skin-vector .mw-watchlink a,
  body.skin-vector-legacy .mw-watchlink a {
    height: 3.07692308em !important;
    color: transparent;
    padding-top: 0; }
  body.skin-vector #mw-panel,
  body.skin-vector-legacy #mw-panel {
    background-color: transparent;
    border: 0; }
    body.skin-vector #mw-panel nav,
    body.skin-vector-legacy #mw-panel nav {
      background-color: var(--rct-indian-red);
      border: 1px solid;
      border-top-color: var(--rct-indian-red-lighter);
      border-left-color: var(--rct-indian-red-lighter);
      border-right-color: var(--rct-indian-red-darker);
      border-bottom-color: var(--rct-indian-red-darker);
      padding-top: 0; }
      body.skin-vector #mw-panel nav + nav,
      body.skin-vector-legacy #mw-panel nav + nav {
        margin-top: 15px; }
      body.skin-vector #mw-panel nav h3,
      body.skin-vector-legacy #mw-panel nav h3 {
        height: 12px;
        margin: 0;
        border: 1px solid;
        border-top-color: var(--rct-indian-red-darker);
        border-left-color: var(--rct-indian-red-darker);
        border-right-color: var(--rct-indian-red-lighter);
        border-bottom-color: var(--rct-indian-red-lighter);
        background-color: var(--rct-dark-indian-red);
        color: white;
        font-weight: bold;
        text-align: center;
        background-image: none;
        line-height: 12px; }
      body.skin-vector #mw-panel nav a,
      body.skin-vector-legacy #mw-panel nav a {
        color: #fff;
        border-bottom: 1px dotted; }
  body.skin-vector #p-personal .vector-menu-content-list,
  body.skin-vector-legacy #p-personal .vector-menu-content-list {
    align-items: normal; }
    body.skin-vector #p-personal .vector-menu-content-list li,
    body.skin-vector-legacy #p-personal .vector-menu-content-list li {
      background-color: var(--rct-light-grey);
      border: 1px solid;
      border-top-color: var(--rct-light-grey-lighter);
      border-left-color: var(--rct-light-grey-lighter);
      border-right-color: var(--rct-light-grey-darker);
      border-bottom-color: var(--rct-light-grey-darker);
      color: white;
      font-weight: bold;
      min-height: 28px;
      box-sizing: border-box;
      position: relative;
      padding-left: 5px;
      padding-right: 5px; }
  body.skin-vector li#pt-notifications-alert,
  body.skin-vector li#pt-notifications-notice,
  body.skin-vector li#pt-preferences,
  body.skin-vector li#pt-watchlist,
  body.skin-vector li#pt-betafeatures,
  body.skin-vector li#pt-userpage,
  body.skin-vector li#pt-login,
  body.skin-vector li#pt-logout,
  body.skin-vector li#pt-mytalk,
  body.skin-vector li#pt-anontalk,
  body.skin-vector li#pt-mycontris,
  body.skin-vector li#pt-anoncontribs,
  body.skin-vector li#pt-createaccount,
  body.skin-vector-legacy li#pt-notifications-alert,
  body.skin-vector-legacy li#pt-notifications-notice,
  body.skin-vector-legacy li#pt-preferences,
  body.skin-vector-legacy li#pt-watchlist,
  body.skin-vector-legacy li#pt-betafeatures,
  body.skin-vector-legacy li#pt-userpage,
  body.skin-vector-legacy li#pt-login,
  body.skin-vector-legacy li#pt-logout,
  body.skin-vector-legacy li#pt-mytalk,
  body.skin-vector-legacy li#pt-anontalk,
  body.skin-vector-legacy li#pt-mycontris,
  body.skin-vector-legacy li#pt-anoncontribs,
  body.skin-vector-legacy li#pt-createaccount {
    background-repeat: no-repeat;
    background-position: center;
    padding: 0 !important;
    width: 28px;
    margin-left: 0.75em;
    margin-right: 0 !important; }
  body.skin-vector li#pt-anonuserpage,
  body.skin-vector-legacy li#pt-anonuserpage {
    /*padding: 0 !important;*/
    margin-left: 0.75em;
    margin-right: 0 !important;
    background-size: initial;
    background-position: 8px 2px;
    padding-left: 28px !important; }
    body.skin-vector li#pt-anonuserpage a,
    body.skin-vector-legacy li#pt-anonuserpage a {
      color: white; }
  body.skin-vector #pt-notifications-alert,
  body.skin-vector-legacy #pt-notifications-alert {
    background-image: url("https://static.miraheze.org/rctwiki/7/74/Notifications.png"); }
  body.skin-vector #pt-notifications-notice,
  body.skin-vector-legacy #pt-notifications-notice {
    background-image: url("https://static.miraheze.org/rctwiki/4/4f/Newspaper.png"); }
  body.skin-vector li#pt-preferences,
  body.skin-vector-legacy li#pt-preferences {
    background-image: url("https://static.miraheze.org/rctwiki/7/7d/Gears.png"); }
  body.skin-vector li#pt-watchlist,
  body.skin-vector-legacy li#pt-watchlist {
    background-image: url("https://static.miraheze.org/rctwiki/8/80/Watchlist-icon.png"); }
  body.skin-vector li#pt-betafeatures,
  body.skin-vector-legacy li#pt-betafeatures {
    background-image: url("https://static.miraheze.org/rctwiki/3/3f/Beta.png"); }
  body.skin-vector li#pt-userpage,
  body.skin-vector li#pt-anonuserpage,
  body.skin-vector-legacy li#pt-userpage,
  body.skin-vector-legacy li#pt-anonuserpage {
    background-image: url("https://static.miraheze.org/rctwiki/3/31/Guest2.png"); }
  body.skin-vector li#pt-login,
  body.skin-vector li#pt-logout,
  body.skin-vector-legacy li#pt-login,
  body.skin-vector-legacy li#pt-logout {
    background-image: url("https://static.miraheze.org/rctwiki/2/28/Entrance.png");
    background-position-y: 0; }
  body.skin-vector li#pt-mytalk,
  body.skin-vector li#pt-anontalk,
  body.skin-vector-legacy li#pt-mytalk,
  body.skin-vector-legacy li#pt-anontalk {
    background-image: url("https://static.miraheze.org/rctwiki/c/c7/Chat.png"); }
  body.skin-vector li#pt-mycontris,
  body.skin-vector li#pt-anoncontribs,
  body.skin-vector-legacy li#pt-mycontris,
  body.skin-vector-legacy li#pt-anoncontribs {
    background-image: url("https://static.miraheze.org/rctwiki/7/77/Shovel.png"); }
  body.skin-vector li#pt-createaccount,
  body.skin-vector-legacy li#pt-createaccount {
    background-image: url("https://static.miraheze.org/rctwiki/9/97/CreateAccount.png"); }
  body.skin-vector #pt-notifications-alert a,
  body.skin-vector #pt-notifications-notice a,
  body.skin-vector li#pt-preferences a,
  body.skin-vector li#pt-watchlist a,
  body.skin-vector li#pt-betafeatures a,
  body.skin-vector li#pt-userpage a,
  body.skin-vector li#pt-login a,
  body.skin-vector li#pt-logout a,
  body.skin-vector li#pt-mytalk a,
  body.skin-vector li#pt-anontalk a,
  body.skin-vector li#pt-mycontris a,
  body.skin-vector li#pt-anoncontribs a,
  body.skin-vector li#pt-createaccount a,
  body.skin-vector-legacy #pt-notifications-alert a,
  body.skin-vector-legacy #pt-notifications-notice a,
  body.skin-vector-legacy li#pt-preferences a,
  body.skin-vector-legacy li#pt-watchlist a,
  body.skin-vector-legacy li#pt-betafeatures a,
  body.skin-vector-legacy li#pt-userpage a,
  body.skin-vector-legacy li#pt-login a,
  body.skin-vector-legacy li#pt-logout a,
  body.skin-vector-legacy li#pt-mytalk a,
  body.skin-vector-legacy li#pt-anontalk a,
  body.skin-vector-legacy li#pt-mycontris a,
  body.skin-vector-legacy li#pt-anoncontribs a,
  body.skin-vector-legacy li#pt-createaccount a {
    background-image: none;
    width: 26px;
    height: 26px;
    position: static;
    display: block;
    margin: 0;
    color: transparent;
    padding: 0 !important; }
    body.skin-vector #pt-notifications-alert a ::before,
    body.skin-vector #pt-notifications-notice a ::before,
    body.skin-vector li#pt-preferences a ::before,
    body.skin-vector li#pt-watchlist a ::before,
    body.skin-vector li#pt-betafeatures a ::before,
    body.skin-vector li#pt-userpage a ::before,
    body.skin-vector li#pt-login a ::before,
    body.skin-vector li#pt-logout a ::before,
    body.skin-vector li#pt-mytalk a ::before,
    body.skin-vector li#pt-anontalk a ::before,
    body.skin-vector li#pt-mycontris a ::before,
    body.skin-vector li#pt-anoncontribs a ::before,
    body.skin-vector li#pt-createaccount a ::before,
    body.skin-vector-legacy #pt-notifications-alert a ::before,
    body.skin-vector-legacy #pt-notifications-notice a ::before,
    body.skin-vector-legacy li#pt-preferences a ::before,
    body.skin-vector-legacy li#pt-watchlist a ::before,
    body.skin-vector-legacy li#pt-betafeatures a ::before,
    body.skin-vector-legacy li#pt-userpage a ::before,
    body.skin-vector-legacy li#pt-login a ::before,
    body.skin-vector-legacy li#pt-logout a ::before,
    body.skin-vector-legacy li#pt-mytalk a ::before,
    body.skin-vector-legacy li#pt-anontalk a ::before,
    body.skin-vector-legacy li#pt-mycontris a ::before,
    body.skin-vector-legacy li#pt-anoncontribs a ::before,
    body.skin-vector-legacy li#pt-createaccount a ::before {
      background-image: none; }
  body.skin-vector #pt-notifications-alert .mw-echo-notifications-badge::after,
  body.skin-vector #pt-notifications-notice .mw-echo-notifications-badge::after,
  body.skin-vector-legacy #pt-notifications-alert .mw-echo-notifications-badge::after,
  body.skin-vector-legacy #pt-notifications-notice .mw-echo-notifications-badge::after {
    top: 55%; }
  body.skin-vector .mw-footer li,
  body.skin-vector-legacy .mw-footer li {
    color: #999999; }
  body.skin-vector .mw-footer li a,
  body.skin-vector-legacy .mw-footer li a {
    color: var(--light-link); }
  body.skin-vector .mw-page-container,
  body.skin-vector-legacy .mw-page-container {
    background-color: transparent;
    border: 0; }
  body.skin-vector .mw-header,
  body.skin-vector-legacy .mw-header {
    background-color: var(--rct-light-grey);
    border-top: 1px solid var(--rct-light-grey-lighter);
    border-left-color: var(--rct-light-grey-lighter);
    border-right-color: var(--rct-light-grey-darker);
    border-bottom-color: var(--rct-light-grey-darker); }

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

/*# sourceMappingURL=Common.css.map */