[N8]

MediaWiki:Common.css: Difference between revisions

← Older edit
Mr Pie 5 (talk | contribs)
79 edits
Added styles for new skin. Added new main page styles (currently still in my sandbox). Added links to images used in the stylesheet so they don't show up as unused.
Mr Pie 5 (talk | contribs)
79 edits
Updated mp-featured color to better match figma. Removed red header border on main page.
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');
@font-face {
    font-family: 'KingthingsPetrock';
    font-style: normal;
    font-weight: normal;
    src: local("Kingthings Petrock"),
        url('filepath://Kingthings_Petrock-webfont.woff') format('woff');
}
@font-face {
    font-family: 'MuseoSans';
    font-style: normal;
    font-weight: normal;
    src: local("Museo Sans"),
        url('filepath://Museo_Sans_500.woff') format('woff');
}


/* CSS placed here will be applied to all skins */
@font-face {
    font-family: 'League Spartan';
    font-style: normal;
    font-weight: bold;
    src: local("League Spartan"),
        url('filepath://Leaguespartan-bold.woff') format('woff');
}


.new, #p-personal a.new {
.new, #p-personal a.new {
Line 235: Line 260:
     height:auto;
     height:auto;
      
      
}
@font-face {
    font-family: 'KingthingsPetrock';
    font-style: normal;
    font-weight: normal;
    src: local("Kingthings Petrock"),
        url('filepath://Kingthings_Petrock-webfont.woff') format('woff');
}
@font-face {
    font-family: 'MuseoSans';
    font-style: normal;
    font-weight: normal;
    src: local("Museo Sans"),
        url('filepath://Museo_Sans_500.woff') format('woff');
}
@font-face {
    font-family: 'League Spartan';
    font-style: normal;
    font-weight: bold;
    src: local("League Spartan"),
        url('filepath://Leaguespartan-bold.woff') format('woff');
}
}


Line 497: Line 498:
.mw-userlink[title="User:Botsey"],
.mw-userlink[title="User:Botsey"],
.mw-userlink[title="User:BrenBot"],
.mw-userlink[title="User:BrenBot"],
.mw-userlink[title="User:Cåmdroid"],
.mw-userlink[title="User:CÃ¥mdroid"],
.mw-userlink[title="User:CapitalWillowBot"],
.mw-userlink[title="User:CapitalWillowBot"],
.mw-userlink[title="User:CephBot"],
.mw-userlink[title="User:CephBot"],
Line 6,703: Line 6,704:
      
      
.timebody li:before {
.timebody li:before {
         content: "\0151";
         content: "–";
         margin-right: .5em;
         margin-right: .5em;
   }
   }
Line 6,961: Line 6,962:




/******************
* Sliding gallery *
*******************/
.sliding-gallery {
  max-width:100%;
  display:flex;
  flex-direction:row;
  align-items:center;
}


:root {
.sliding-gallery--buttons {
  --accent-color:#8f1f16;
   display:flex;
 
   flex-direction:column;
  --logo-width:25em;
  --logo-height:calc(var(--logo-width) * 0.166);
 
  --search-width:35em;
  --search-height:3em;
 
  --head-border-height:10px;
  --head-text-color--rgb:255, 255, 255;
  --head-text-color--opacity:0.9;
  --head-personal-height:3em;
  --head-background-image:url("https://wiki.geministation.com/images/0/0f/Wiki_background.jpg"); /* [[File:Wiki_background.jpg]] */
  --head-height:calc(8em + var(--head-personal-height) + var(--search-height) + var(--logo-height));
 
 
   --footer-background-color:#212f3e;
   --footer-text-color:#fff;
  --footer-link-color:#dfdcdc;
 
  --sidebar-background-color:#f6f6f6;
  --sidebar-width:11em;
 
  --left-extra-sidebar-width: 5em;
}
}


/************
.sliding-gallery--button {
* Wiki logo *
   background:var(--accent-color);
*************/
   color:#fff;
#p-logo {
  border:none;
   position:absolute;
  font-weight:bold;
  left:calc(50vw - var(--logo-width)/2);
  font-size:2em;
   top:calc((var(--head-height) + var(--head-border-height)) * -1);
  height:1.75em;
    
   width:1.75em;
   /* separation from #p-personal */
   margin:5px;
   margin-top:var(--head-personal-height);
   cursor:pointer;
}
}


#p-logo,
.sliding-gallery--button:hover {
#p-logo a {
   box-shadow:inset 0 0 0.5em 0.05em rgba(0,0,0,0.75);
   width:var(--logo-width);
  height:var(--logo-height);
}
}


.mw-wiki-logo {
.sliding-gallery > .gallery {
   background-image:url(https://wiki.geministation.com/images/f/f4/Wiki_logo_1.png); /* [[File:Wiki_logo_1.png]] */
   overflow-x:scroll;
  background-size:contain;
  display:flex;
 
  scrollbar-width:none; /* Firefox */
  filter:invert(1);
}
.sliding-gallery > .gallery::-webkit-scrollbar{
display:none; /* Other browsers */
}
}
/**********************
* End sliding gallery *
***********************/


/****************
/******************
* End wiki logo *
* Main page stuff *
*****************/
*******************/
.page-User_Mr_Pie_5_Sandbox {
  --sidebar-width:0em;
  --search-width:55em;
  --head-border-height:0px;
}


/*********
.page-User_Mr_Pie_5_Sandbox #mw-panel nav {
* Header *
   font-size:0;
**********/
#content {
   border:none;
  margin-top:0;
}
}


.mw-body {
.page-User_Mr_Pie_5_Sandbox #content {
   margin-top:0;
   padding:0;
}
}


#mw-page-base {
.page-User_Mr_Pie_5_Sandbox.action-view #content {
  position:relative;
   background:none;
   background:none;
  height:var(--head-height);
  margin-bottom:var(--head-border-height);
}
}


/* doing this as an ::after instead of a simple border ensures that the sidebar and content area always appear to line up vertically.
.page-User_Mr_Pie_5_Sandbox h1#firstHeading,
normally rounding errors can sometimes misalign them a tiny bit, but by having this hover over them, this misalignment is hidden */
.page-User_Mr_Pie_5_Sandbox #contentSub,
#mw-page-base::after {
.page-User_Mr_Pie_5_Sandbox #n-Discord {
  position:absolute;
   display:none;
  width:100%;
  height:var(--head-border-height);
  background:var(--accent-color);
  bottom:calc(var(--head-border-height) * -1);
  content:'';
   z-index:1;
  pointer-events:none;
}
}


#p-personal {
.mp-divider {
   height:var(--head-personal-height);
   height:10px;
  background:var(--accent-color);
}
}


#p-personal a {
.mp-button.top {
   color:rgba(var(--head-text-color--rgb), var(--head-text-color--opacity));
   margin-left:20px;
}
}


#p-personal .oo-ui-icon-bell,
.mp-button a,
#p-personal .oo-ui-icon-tray {
.mp-button a:visited {
   filter:invert(1);
   background:var(--accent-color);
   opacity:var(--head-text-color--opacity);
   padding:10px;
  color: #fff;
  font-weight:bold;
  font-size:0.75em;
  text-transform: uppercase;
}
}


#left-navigation,
/* MP-featured */
#right-navigation {
#mp-featured {
   margin-top:calc(var(--head-height) - 2.5em);
   display:flex;
  flex-flow:row wrap;
  justify-content: space-evenly;
  column-gap:10px;
  row-gap: 10px;
  background-color:rgba(241,248,251,0.25);
  padding:10px;
  margin:20px;
  border-radius:10px;
}
}


#left-navigation {
.mp-featured--item {
   margin-left:0;
   flex:0 1 24%;
  min-width:300px;
  position:relative;
  border-radius:10px;
  overflow:clip;
}
}


#right-navigation {
.mp-featured--image img {
   margin-right:1px;
   width:100%;
  height:auto;
  border-radius:10px;
}
}


@media (min-width:600px){
.mp-featured--text {
   #mw-head{
   padding:5px;
    display:flex;
  width:calc(100% - 10px);
    justify-content:flex-end;
  position:absolute;
    column-gap:1px;
   bottom:0;
   }
   background-color:#0A1420;
    
   color:#aaa;
   #right-navigation .vector-menu-tabs {
  font-size:0.7em;
    background:none;
  min-height:6em;
  }
}
}


#right-navigation #p-views .vector-menu-content-list > li:first-of-type {
.mp-featured--title {
   position:relative;
  color:#f5f5f5;
  font-weight:bold;
   font-size: 1.3em;
}
}


/* this gives the appearance of the left and right navigation being one object, but without interfering with the collapsing script they use */
.mp-featured--link {
#right-navigation #p-views .vector-menu-content-list > li:first-of-type::after {
   position:absolute;
   position:absolute;
  width:50px;
   height:100%;
   height:100%;
   top:0;
   width:100%;
  left:-2px;
   z-index:2;
  background:#fff;
  content:'';
   z-index:-1;
}
}


#p-cactions.vector-menu-dropdown h3 {
.mp-featured--link a {
   background:#fff;
   display:block;
  height:100%;
  width:100%;
  font-size:0;
}
}


#p-cactions .menu {
/* MP-big links */
  left:unset;
  right:-1px;
}


 
#mp-big-links {
/**********************************************
   display:flex;
* End main header section, search bar follows *
   flex-flow:row wrap;
***********************************************/
  justify-content: space-between;
 
  align-items: flex-start;
/*************
  column-gap: 20px;
* Search bar *
  row-gap: 10px;
**************/
   margin-left:20px;
/* the :not(.sticky-hidden) reverts the search bar to its normal spot when the user scrolls and triggers the sticky header */
 
#mw-head:not(.sticky-hidden) #p-search {
  --textbox-bottom-margin:50px;
   position:absolute;
   top:calc(var(--head-personal-height) + var(--logo-height) + 1em);
   left:calc(50vw - var(--search-width)/2);
}
}


#mw-head:not(.sticky-hidden) #searchInput {
.mp-big-link {
   height:var(--search-height);
   flex:0 1 48%;
   border-radius:var(--search-height);
  position:relative;
  border:2px solid #fff;
   margin-bottom:var(--textbox-bottom-margin);
  background:rgba(33,33,33,0.5);
  box-shadow:none;
  color:#fff;
  padding-left:1.2em;
}
}


#mw-head:not(.sticky-hidden) #searchInput::placeholder {
.mp-big-link--image img {
   color:rgba(255,255,255,0.7)
  width:100%;
   height:auto;
}
}


#mw-head:not(.sticky-hidden) #searchButton {
.mp-big-link--text {
   filter:invert(1);
  padding:5px;
  width:calc(100% - 40px);
  position:absolute;
  left:15px;
   bottom:calc(var(--textbox-bottom-margin) * -1);
  background-color:#ffffff;
  color:#000;
  font-size:0.7em;
  min-height:6em;
}
}


#mw-head:not(.sticky-hidden) #simpleSearch {
.mp-big-link--title {
   width:var(--search-width);
  color:#000;
   max-width:100%;
  text-align:center;
  margin:0 2.5em 10px 2.5em;
  padding-bottom:2px;
   font-weight:bold;
  font-size: 1.2em;
   border-bottom:2px solid #dab5b2;
}
}
/*****************
* End search bar *
******************/


/**********
.mp-big-link--link {
* Sidebar *
   position:absolute;
***********/
  height:calc(100% + var(--textbox-bottom-margin));
#mw-panel {
   width:100%;
   top:calc(var(--head-height) + var(--head-border-height) - 1px);
  z-index:2;
   width:var(--sidebar-width);
}
}


/* this little hack gives the sidebar the appearance of stretching all the way down the page */
.mp-big-link--link a {
#content {
   display:block;
  position:relative;
}
 
#content::after {
   position:absolute;
  width:calc(var(--sidebar-width));
   height:100%;
   height:100%;
   background:var(--sidebar-background-color);
   width:100%;
   content:'';
   font-size:0;
  top:0;
  margin-left:calc(var(--sidebar-width) * -1 - 1.5em);
}
}
/**/


/**************
/* MP-side links */
* End sidebar *
#mp-side-links {
***************/
   display:flex;
 
   flex-flow:row wrap;
/*********
   justify-content: space-evenly;
* Footer *
  row-gap: 10px;
**********/
.mw-footer {
   text-align:center;
   margin-left:0;
   background-color:var(--footer-background-color);
}
}


.mw-footer,
.mp-side-link {
.mw-footer li {
   position:relative;
   color:var(--footer-text-color);
}
}


.mw-footer a {
.mp-side-link--image img {
   color:var(--footer-link-color);
   width:100%;
  height:auto;
}
}


#footer-places li{
.mp-side-link--text {
   float:none;
   padding:5px;
   display:inline-block;
  width:calc(100% - 40px);
  position:absolute;
  left:15px;
   bottom:0;
  color:#fff;
  font-size:0.7em;
}
}


/*************
.mp-side-link--title {
* End footer *
   padding-bottom:2px;
**************/
   font-weight:bold;
 
   font-size: 1.2em;
/*********************
* Left extra sidebar *
**********************/
body {
   background-image:var(--head-background-image);
   background-size:cover;
   background-attachment: fixed;
}
}


#mw-panel {
.mp-side-link--link {
   background-color:var(--sidebar-background-color);
   position:absolute;
  height:100%;
  width:100%;
  z-index:2;
}
}


.mw-body,
.mp-side-link--link a {
#mw-head-base,
   display:block;
#mw-data-after-content {
  height:100%;
   margin-left:calc(var(--sidebar-width) + var(--left-extra-sidebar-width));
  width:100%;
  font-size:0;
}
}


.mw-footer {
/* MP-links */
   margin-left: var(--left-extra-sidebar-width);
#mp-links {
   background:#000;
  padding:10px 20px 20px 20px;
  display:flex;
  flex-flow:row wrap;
  justify-content: flex-start;
}
}


#mw-panel,
.mp-links--group {
#mw-page-base,
   flex:0 1 11em;
#mw-head {
   margin-left:var(--left-extra-sidebar-width);
}
}


#mw-panel {
.mp-links--group:not(:nth-child(2)){
   width:calc(var(--sidebar-width) - 0.5em);
   border-left:1px solid #888;
  padding-left:25px;
}
}


#mw-head {
.mp-links--group-title {
   width:calc(100% - var(--left-extra-sidebar-width));
   color:#2885BE;
}
}
/*************************
* End left extra sidebar *
**************************/


/******************
.mp-links--group ul {
* Sliding gallery *
   list-style:none;
*******************/
   margin:0;
.sliding-gallery {
   max-width:100%;
   display:flex;
  flex-direction:row;
  align-items:center;
}
}


.sliding-gallery--buttons {
.mp-links--group a {
   display:flex;
   color: #fff;
  flex-direction:column;
}
}


.sliding-gallery--button {
#mp-links .mp-button {
   background:var(--accent-color);
   align-self:center;
  color:#fff;
  border:none;
  font-weight:bold;
  font-size:2em;
  height:1.75em;
  width:1.75em;
  margin:5px;
  cursor:pointer;
}
}


.sliding-gallery--button:hover {
#mp-links .mp-button a {
   box-shadow:inset 0 0 0.5em 0.05em rgba(0,0,0,0.75);
  border: 1px solid #BFBFBF;
  border-radius:5px;
   margin-right:25px;
}
}


.sliding-gallery > .gallery {
/* MP lower section */
   overflow-x:scroll;
#mp-lower {
  display:flex;
   background:#f3f5f5;
  scrollbar-width:none;
}
}
/**********************
* End sliding gallery *
***********************/


/******************
#mp-lower > div {
* Main page stuff *
   display: flex;
*******************/
  flex-wrap: wrap;
.page-User_Mr_Pie_5_Sandbox {
   overflow:hidden;
   --sidebar-width:0em;
   --search-width:55em;
}
}


.page-User_Mr_Pie_5_Sandbox #mw-panel nav {
#mp-lower {
   font-size:0;
  display: grid;
  grid-template-areas: "a" "b" "c" "d" "e";
  grid-template-columns: 100%;
}
@media screen and (min-width:990px) {
  #mp-lower {
    grid-template-areas: "a a" "b b" "c d" "e d";
    grid-template-columns: 50% 50%;
  }
}
@media screen and (min-width:1350px) {
   #mp-lower {
    grid-template-areas: "a c" "b d" "b e";
    grid-template-columns: auto 350px;
    column-gap: 40px;
  }
}
}


.page-User_Mr_Pie_5_Sandbox #content {
#mp-ships {grid-area:a;}
  padding:0;
#mp-big-links {grid-area:b;}
  background:none;
#mp-community {grid-area:c;}
}
#mp-side-links {grid-area:d;}
#mp-story {grid-area:e;}


.page-User_Mr_Pie_5_Sandbox h1#firstHeading,
/* MP-ships */
.page-User_Mr_Pie_5_Sandbox #contentSub {
#mp-ships .gallery {
   display:none;
   margin:20px 20px 20px 18px;
}
}


.mp-divider {
#mp-ships .gallery a {
   height:10px;
   color:#000;
  background:var(--accent-color);
}
}


.mp-button.top {
#mp-ships .gallery .thumb {
   margin-left:20px;
   border-bottom:2px solid var(--accent-color);
}
}


.mp-button a,
#mp-ships .gallerytext {
.mp-button a:visited {
   text-align:left;
   background:var(--accent-color);
  padding:10px;
  color: #fff;
   font-weight:bold;
   font-weight:bold;
   font-size:0.75em;
   font-size:0.7em;
   text-transform: uppercase;
   padding-top:0;
}
}


/* MP-featured */
#mp-ships .gallerytext p {
#mp-featured {
   margin:0;
   display:flex;
  flex-flow:row wrap;
  justify-content: space-evenly;
  column-gap:10px;
  row-gap: 10px;
  background-color:rgba(128,128,128,0.6);
  padding:10px;
  margin:20px;
  border-radius:10px;
}
}


.mp-featured--item {
/* MP-wiki */
   flex:0 1 24%;
#mp-wiki {
   min-width:300px;
   background:#1e3a4e;
   position:relative;
   color:#ffffff;
   border-radius:10px;
   padding:1em;
  overflow:clip;
   margin-bottom:20px;
}
}


.mp-featured--image img {
#mp-wiki--top {
   width:100%;
   margin:-1em -1em 1em -1em;
   height:auto;
   padding:1em;
   border-radius:10px;
   background:#112f45;
}
}


.mp-featured--text {
#mp-wiki--title {
  padding:5px;
   font-size:1.5em;
  width:calc(100% - 10px);
  position:absolute;
  bottom:0;
  background-color:#0A1420;
  color:#aaa;
   font-size:0.7em;
  min-height:6em;
}
 
.mp-featured--title {
  color:#f5f5f5;
   font-weight:bold;
   font-weight:bold;
  font-size: 1.3em;
}
}


.mp-featured--link {
#mp-wiki ul {
   position:absolute;
   list-style:none;
  height:100%;
  width:100%;
  z-index:2;
}
}


.mp-featured--link a {
#mp-wiki ul > li::before {
   display:block;
   content: "\2022";
   height:100%;
  font-weight:bold;
   width:100%;
   display:inline-block;
   font-size:0;
   width:1em;
   margin-left:-1em;
}
}


/* MP-big links */
/* MP-story */
 
#mp-story {
#mp-big-links {
   justify-content:center;
  display:flex;
  flex-flow:row wrap;
   justify-content: space-between;
  align-items: flex-start;
  column-gap: 20px;
  row-gap: 10px;
  margin-left:20px;
 
  --textbox-bottom-margin:50px;
}
}


.mp-big-link {
.mp-story--item {
   flex:0 1 48%;
   background:#ffffff;
   position:relative;
   text-align:center;
   margin-bottom:var(--textbox-bottom-margin);
   margin-top:10px;s
}
}


.mp-big-link--image img {
.mp-story--title {
   width:100%;
  text-align:left;
   height:auto;
  padding:5px 1em;
   color:var(--accent-color);
   font-weight:bold;
}
}


.mp-big-link--text {
.mp-story--description {
   padding:5px;
   text-align:left;
  width:calc(100% - 40px);
   padding:1em;
  position:absolute;
   padding-top:0;
  left:15px;
   bottom:calc(var(--textbox-bottom-margin) * -1);
   background-color:#ffffff;
  color:#000;
  font-size:0.7em;
  min-height:6em;
}
}


.mp-big-link--title {
/* MP-attributes */
   color:#000;
#mp-attributes {
  text-align:center;
   background:#f3f5f5;
   margin:0 2.5em 10px 2.5em;
}
   padding-bottom:2px;
 
   font-weight:bold;
#mp-attributes > ul {
   font-size: 1.2em;
   columns:5;
  border-bottom:2px solid #dab5b2;
   padding:20px 5%;
   list-style:none;
   margin-bottom:0;
}
}


.mp-big-link--link {
#mp-attributes > ul > li {
   position:absolute;
   margin-right:1em;
  height:calc(100% + var(--textbox-bottom-margin));
  width:100%;
  z-index:2;
}
}


.mp-big-link--link a {
#mp-attributes > ul > li::before {
   display:block;
  content: "\2014";
   height:100%;
  color:var(--accent-color);
   width:100%;
   font-weight:bold;
   font-size:0;
   display:inline-block;
   width:1.5em;
   margin-left:-1.5em;
}
}


/* MP-side links */
#mp-attributes ul a {
#mp-side-links {
   color:#000;
   display:flex;
   font-weight:bold;
  flex-flow:row wrap;
  justify-content: space-evenly;
   row-gap: 10px;
}
}


.mp-side-link {
/* Move vector tabs to the bottom of the main page */
   position:relative;
#mp-attributes {
   padding-bottom:2em
}
}


.mp-side-link--image img {
.page-User_Mr_Pie_5_Sandbox #mw-navigation #left-navigation > nav,
   width:100%;
.page-User_Mr_Pie_5_Sandbox #mw-navigation #right-navigation > nav {
  height:auto;
   display:none;
}
}


.mp-side-link--text {
.page-User_Mr_Pie_5_Sandbox #bodyContent #mw-head {
  padding:5px;
  width:calc(100% - 40px);
   position:absolute;
   position:absolute;
   left:15px;
   top:unset;
   bottom:0;
   bottom:0;
   color:#fff;
   right:0;
  font-size:0.7em;
}
 
.mp-side-link--title {
  padding-bottom:2px;
  font-weight:bold;
  font-size: 1.2em;
}
 
.mp-side-link--link {
  position:absolute;
  height:100%;
  width:100%;
  z-index:2;
}
 
.mp-side-link--link a {
  display:block;
  height:100%;
  width:100%;
  font-size:0;
}
 
/* MP-links */
#mp-links {
  background:#000;
  padding:10px 20px 20px 20px;
  display:flex;
  flex-flow:row wrap;
  justify-content: flex-start;
}
 
.mp-links--group {
  flex:0 1 11em;
}
 
.mp-links--group:not(:nth-child(2)){
  border-left:1px solid #888;
  padding-left:25px;
}
 
.mp-links--group-title {
  color:#2885BE;
}
 
.mp-links--group ul {
  list-style:none;
   margin:0;
   margin:0;
}
}


.mp-links--group a {
.page-User_Mr_Pie_5_Sandbox #bodyContent .vector-menu-tabs .mw-watchlink.icon a {
   color: #fff;
   height:2.5em !important;
}
}


#mp-links .mp-button {
.page-User_Mr_Pie_5_Sandbox #bodyContent #p-search,
  align-self:center;
.page-User_Mr_Pie_5_Sandbox #bodyContent #p-personal {
}
   display:none;
 
#mp-links .mp-button a {
  border: 1px solid #BFBFBF;
  border-radius:5px;
  margin-right:25px;
}
 
/* MP lower section */
#mp-lower {
  background:#f3f5f5;
}
 
#mp-lower > div {
  display: flex;
  flex-wrap: wrap;
  overflow:hidden;
}
 
#mp-lower {
  display: grid;
  grid-template-areas: "a" "b" "c" "d" "e";
  grid-template-columns: 100%;
}
@media screen and (min-width:990px) {
  #mp-lower {
    grid-template-areas: "a a" "b b" "c d" "e d";
    grid-template-columns: 50% 50%;
  }
}
@media screen and (min-width:1350px) {
  #mp-lower {
    grid-template-areas: "a c" "b d" "b e";
    grid-template-columns: auto 350px;
    column-gap: 40px;
  }
}
 
#mp-ships {grid-area:a;}
#mp-big-links {grid-area:b;}
#mp-community {grid-area:c;}
#mp-side-links {grid-area:d;}
#mp-story {grid-area:e;}
 
/* MP-ships */
#mp-ships .gallery {
  margin:20px 20px 20px 18px;
}
 
#mp-ships .gallery a {
  color:#000;
}
 
#mp-ships .gallery .thumb {
  border-bottom:2px solid var(--accent-color);
}
 
#mp-ships .gallerytext {
  text-align:left;
  font-weight:bold;
  font-size:0.7em;
  padding-top:0;
}
 
#mp-ships .gallerytext p {
  margin:0;
}
 
/* MP-wiki */
#mp-wiki {
  background:#1e3a4e;
  color:#ffffff;
  padding:1em;
  margin-bottom:20px;
}
 
#mp-wiki--top {
  margin:-1em -1em 1em -1em;
  padding:1em;
  background:#112f45;
}
 
#mp-wiki--title {
  font-size:1.5em;
  font-weight:bold;
}
 
#mp-wiki ul {
  list-style:none;
}
 
#mp-wiki ul > li::before {
  content: "\2022";
  font-weight:bold;
   display:inline-block;
  width:1em;
  margin-left:-1em;
}
 
/* MP-story */
#mp-story {
  justify-content:center;
}
 
.mp-story--item {
  background:#ffffff;
  text-align:center;
  margin-top:10px;
}
 
.mp-story--title {
  text-align:left;
  padding:5px 1em;
  color:var(--accent-color);
  font-weight:bold;
}
 
.mp-story--description {
  text-align:left;
  padding:1em;
  padding-top:0;
}
 
/* MP-attributes */
#mp-attributes {
  background:#f3f5f5;
}
 
#mp-attributes > ul {
  columns:5;
  padding:20px 5%;
  list-style:none;
  margin-bottom:0;
}
 
#mp-attributes > ul > li {
  margin-right:1em;
}
 
#mp-attributes > ul > li::before {
  content: "\2014";
  color:var(--accent-color);
  font-weight:bold;
  display:inline-block;
  width:1.5em;
  margin-left:-1.5em;
}
 
#mp-attributes ul a {
  color:#000;
  font-weight:bold;
}
}


Retrieved from "https://wiki.geministation.com/MediaWiki:Common.css"