MediaWiki:Common.css

/* CSS placed here will be applied to all skins */
/* Main page */
/* [["Fear_and_Hunger:_the_Tormentpedia"_Wiki]] */
#mp-container {
    display:grid;
    grid-template-areas:"welcome" "about" "game1" "game2" "news" "links";
    grid-template-columns:100%;
    column-gap:5px;
    row-gap:5px;
  }
  @media screen and (min-width:1350px) {
    #mp-container {
      grid-template-areas:"welcome welcome welcome about" "game1 game1 game2 game2" "news news links links";
      grid-template-columns:25% 1fr 25% 1fr;
    }
  }
  @media screen and (min-width:1600px) {
    #mp-container {
      grid-template-areas:"welcome welcome about" "game1 game2 news" "game1 game2 links";
      grid-template-columns:40% 40% 1fr;
    }
  }
  #mp-welcome {grid-area:welcome;}
  #mp-game1 {grid-area:game1;}
  #mp-game2 {grid-area:game2;}
  #mp-about {grid-area:about;}
  #mp-links {grid-area:links;}
  #mp-news {grid-area:news;}
  
  .mp-box {
      display:flex;
      flex-direction:column;
      width:calc(100% - 2px);
      box-sizing:border-box;
      background:rgba(var(--wiki-content-background-color--secondary--rgb),0.1);
      border:1px solid var(--wiki-accent-color);
      padding:5px
  }
  
  .mp-box.plain {
    background:none;
    border:none;
  }
  
  .mp-box .gallerytext {
    font-size:12px;
  }
  
  .mp-body {
    align-self:center;
    padding:2px;
  }
  
  .mp-heading {
    padding:0.2em 0.4em;
    margin-bottom:5px;
    background: var(--wiki-accent-color);
    color:var(--wiki-accent-text-color);
    font-size:120%;
    font-weight:bold;
    text-align:center;
  }
  
  .mp-header-image {
    max-width:100%;
    height:auto;
  }
  
  /* End main page */
  
  /* Infoboxes */
  :root {
      --pi-background: var(--wiki-content-background-color--secondary);
      --pi-border-color:rgba(var(--wiki-accent-color--rgb), 0.5);
      --pi-secondary-background:var(--wiki-accent-color);
    --infobox-background: var(--wiki-content-background-color--secondary);
    --infobox-background-color:rgba(var(--wiki-accent-color--rgb), 0.5);
    --infobox-text-color: var(--wiki-content-text-color);
  }
  
  .portable-infobox .pi-title,
  .portable-infobox .pi-header {
    text-align:center;
    background:var(--pi-secondary-background);
    color:var(--wiki-accent-text-color);
  }
  
  .portable-infobox {
    border:1px solid var(--pi-border-color);
  }
  
  .infobox {
    border: 1px solid #600;
    border-bottom: 0px;
    background-color: var(--infobox-background);
    color: var(--infobox-text-color);
    margin-left: 1em;
    padding: 0.2em;
    float: right;
    clear: right;
  }
  .infobox td,
  .infobox th {
    vertical-align: top;
  }
  .infobox caption {
    font-size: larger;
    margin-left: inherit;
  }
  .infobox.bordered {
    border-collapse: collapse;
  }
  .infobox.bordered td,
  .infobox.bordered th {
    border: 1px solid #aaaaaa;
  }
  .infobox.bordered .borderless td,
  .infobox.bordered .borderless th {
    border: 0;
  }
  
  /* End infoboxes */

  /*Infobox button*/

.infobox
.mw-collapsible-toggle-default:after {
    content: " ";
}
.infobox
.mw-collapsible-toggle-default:before {
    content: "⮟";
    color: white;
    font-size: 15px;

}
.infobox
.mw-collapsible-toggle a span {
    display: none;
}
.infobox
.mw-collapsible-toggle a {
    display: none;

}
.infobox
.mw-collapsible-toggle-expanded:after {
    content: " ";
}
.infobox
.mw-collapsible-toggle-collapsed:after {
    content: " ";
}
.infobox
.mw-collapsible-toggle-expanded:before {
    content: "⮟";
    color: white;
    font-size: 15px;
}
.infobox
.mw-collapsible-toggle-collapsed:before {
    content: "⮝";
    color: white;
    font-size: 14px;
}
  /* End */

  
  /* ↓ The following part is from Fgo.wiki: https://fgo.wiki/w/MediaWiki:Common.css */
  
  /* backTotop */
.backToTop {
  opacity: 1;
  filter: alpha(opacity=100);
  position: fixed;
  _position: absolute;
  z-index: 9999;
  bottom: 10px;
  left: 11px;
  display: none;
  height: 131px;
  width: 115px;
  background: url(/zh/images/3/32/Topx.gif) no-repeat;
  cursor: pointer;
  color: #272727;
}
  /* LetYouDown */
.LetYouDown {
  opacity: 1;
  filter: alpha(opacity=100);
  position: fixed;
  _position: absolute;
  z-index: 9999;
  bottom: 10px;
  left: 11px;
  display: none;
  height: 131px;
  width: 115px;
  background: url(/zh/images/6/6d/LetUD.gif) no-repeat;
  cursor: pointer;
  color: #272727;
}
  /* Hide back to top button when editing
.action-edit .backToTop,
.action-submit .backToTop {
  display: none !important;
}
*/
  /* Floating Contents
      .toc-custom类添加逻辑在Mediawiki:Common.js
  */
.toc-custom {
      position: fixed;
      right: 0;
      top: 240px;
      background: rgba(255, 255, 255, 0.8);
      z-index: 100;
      max-width: 347px;
      opacity: 0.5;
      filter: alpha(opacity=50);
      -webkit-transition: -webkit-transform .2s ease-in;
      transition: transform .2s ease-in;
}
    
.toc-custom:hover {
      opacity: 1;
      filter: alpha(opacity=100);
      box-shadow: 0 0 4px black;
      -webkit-transform: translate(-100%, 0);
      -ms-transform: translate(-100%, 0);
      transform: translate(-100%, 0);
}
    
.toc-custom:hover:before {
      opacity: 0;
      filter: alpha(opacity=0);
}
    
.toc-custom:before {
    content: 'CONTENTS';
    font-family: courier new,Courier,monospace;
    vertical-align: middle;
    display: flex;
    word-wrap: break-word;
    text-align: center;
    font-size: 12px;
    width: 0;
    padding: 5px 10px;
    height: 191px;
    background: #000;
    color: #fff;
    position: absolute;
    left: -21px;
    top: 34%;
    margin-top: -30px;
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
}
    
.toc-custom>ul {
      max-height: 45vh;
      overflow-y: scroll;
}
    
.toc-custom>ul {
      max-height: 45vh;
      overflow-y: scroll;
}
li.toclevel-1>a>span.toctext {
      font-weight: bold;
}
.mw-body-content h2 {
      font-weight: bold;
}
  
.plainlist ol,
.plainlist ul {
    line-height: inherit;
    list-style: none none;
    margin: 0;
}
  
.plainlist ol li,
.plainlist ul li {
    margin-bottom: 0;
}
  
.iteminfo {
      display: none;
}
    
.itemhover:hover .iteminfo {
      display: block;
}
section.lst {
    display: none;
}
.flow-ui-load-overlay {
   pointer-events: none;
}
#p-personal ul {
  padding-left: 0;
}
table.wikitable {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  border-radius: 4px;
  overflow: hidden;
}
body:not(.ns--1):not(.ns--2) .mw-collapsible:not(.mw-collapsed) tr:first-child> :last-child {
  position: relative;
}

body:not(.ns--1):not(.ns--2) .mw-collapsible:not(.mw-collapsed) tr:first-child> :last-child .mw-collapsible-toggle:not(:last-child) {
  position: absolute;
  right: .1em;
  top: 0;
  float: none;
}
.tbui-paginator {
  margin: 24px 0 !important;
  padding: 10px 0 !important;
  border: 1px solid #56340f;
  border-right: 0;
  border-left: 0;
}

.tbui-paginator li {
  line-height: 1 !important;
}

.tbui-paginator li.paginator-btn a {
  border: 1px solid #1E90FF;
  color: #1E90FF;
  padding: 0 24px;
  height: 40px;
  line-height: 40px;
  border-radius: 0;
  max-width: none;
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
}

.tbui-paginator li.paginator-btn a:hover {
  background: rgba(30, 144, 255, 0.5) !important;
  color: #FFFFFF !important;
}

.tbui-paginator .tbui-paginator-current {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block;
  text-align: center;
  color: #000000;
}

.tbui-paginator .tbui-paginator-title,
.tbui-paginator .tbui-paginator-pagenum {
  display: inline-block;
  font-size: 16px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}

.nodesktop {
  display: none !important;
}

.mw-collapsible-toggle {
  position: relative;
  z-index: 50;
}
/* Mobile */
@media screen and (max-width: 640px){
/* Reduce table size */
table.navbox {
    font-size: 90%;
}
/* end */

/* Hide the rollback button on mobile */
span.mw-changeslist-line-inner-rollback {
    display: none;
}
span.mw-rollback-link {
    display: none;
}
/* end */

}
/* Fix image viewer layout */
.mw-mmv-above-fold {
  height: auto;
}
.mw-mmv-close {
  right: 4px;
  height: 61px;
}
.mw-mmv-fullscreen {
  right: 5px;
  top: 42px;
  height: 41px;
}
.mw-mmv-options-button {
  top: 80px;
  height: 24px;
  right: 5px;
}
/* Image Viewer Background Darken */
.mw-mmv-image-inner-wrapper {
  display: table;
  width: 100%;
  height: 100%;
  background-color: black;
}
/* Bolded NavBax Dots  */
table.navbox {
    font-family: sans-serif;
}
*/

/* Make the list of references smaller
 * Keep in sync with Template:Refbegin/styles.css
 * And Template:Reflist/styles.css
 */
ol.references,
div.reflist {
    font-size: 90%;            /* Default font-size */
    margin-bottom: 0.5em;
}
div.reflist ol.references{
    font-size: 100%;           /* Reset font-size when nested in div.reflist */
}
div.reflist ol.references, div.notelist ol.references {
    list-style-type: inherit;  /* Enable custom list style types */
}

/* .references-2column b/c */
div.references-2column {
    -moz-column-count: 2;
    column-count: 2;
    font-size: 90%;
}
div.references-2column ol.references,
div.references-2column div.reflist{
    font-size: 100%;
}
/* Fixed image spilling problem in [[Fear & Hunger]] page and [[Fear & Hunger 2: Termina]] page on mobile*/
.fluidimg100 img {
    max-width: 100%;
    height: auto;
}
/* Reduce the font size of references */
ol.references {
    font-size: 10px;
}
/* wikirules */
.wikirules {
    font-size: 44px;
    font-family: Georgia;
    font-weight: bold;
    display: block;
    text-align: -webkit-center;
    padding-top: 20px;
}
/*******
* Data map *
********/

/*Outer Glow*/
.oo-ui-panelLayout-framed {
    border: 1px solid #626060;
    border-radius: 2px;
}
.ext-datamaps-container-content .ext-datamaps-container-leaflet {
    background: black;
}
.ext-datamaps-container-legend .oo-ui-labelElement-label {
    vertical-align: middle;
    color: black;
}
.ext-datamaps-container-legend .ext-datamaps-legend-badge {
    padding: 0 4px;
    border-radius: 4px;
    margin: 0 0.5em;
    background: #6665;
    font-size: 0.88em;
    vertical-align: middle;
    color: black;
}

/*Delete the "Use CTRL + Scroll to zoom the map" tips*/
.leaflet-interactionWarning-pane[data-active='true'] {
  display: none;
}

/* Remove fullscreen button */
.leaflet-control.ext-datamaps-control.ext-datamaps-control-toggle-fullscreen.leaflet-bar {
    display: none;
}
/*end*/
/* RTRC */
.mw-rtrc-settings fieldset {
    display: inline-block;
    background: var(--theme-background);
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
    box-shadow: rgb(0 0 0) 0 5px 15px;
    text-align: initial;
    margin: 0;
    padding: 0;
    border: 0;
}


.mw-rtrc-wrapper {
    color: var(--theme-text-color);
}

.mw-rtrc-diff {
    position: relative;
    width: 97%;
    background: var(--theme-background);
    margin: 20px auto 15px auto;
    padding: 0 1em;
    overflow: hidden;
    border-radius: 11px;
    box-shadow: rgba(200,200,200,1) 0 5px 15px;
    transform-origin: top;
    transform: scaleY(1);
    max-height: 1000px;
    transition: transform 300ms ease-out 200ms,max-height 500ms ease-in;
}

.mw-rtrc-feed {
    position: relative;
    padding: 2em 0;
    background: var(--theme-background);
    font-size: 14px;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
    box-shadow: rgb(0 0 0) 0 5px 15px;
}
 
.mw-rtrc-item:nth-child(odd), .mw-rtrc-heading:nth-child(odd) {
    background: var(--theme-background);
}
 
.mw-rtrc-legend {
    margin: 5px auto;
    padding: 5px 13px;
    /* border-bottom-left-radius: 11px; */
    background: var(--theme-background);
    /* border-bottom-right-radius: 11px; */
    /* box-shadow: rgba(200,200,200,1) 0 5px 15px; */
}

.content-body > main {
    background: var(--theme-background);
}
.mw-rtrc-settings {
    margin: 0 auto;
    min-width: 1000px;
    text-align: center;
    background: var(--theme-background);
}

.mw-rtrc-ready .mw-rtrc-wrapper {
    opacity: 1;
    background: var(--theme-background);
}
 
/*end*/
/* Search */
.mw-advancedSearch-namespace-selection {
  background: none;
}
.mw-advancedSearch-fieldContainer{
  background: none;
}
#preferences .mw-htmlform-submit-buttons{
  background-color: none;
}
.oo-ui-tagItemWidget.oo-ui-labelElement:not(.oo-ui-tagItemWidget-fixed) .oo-ui-labelElement-label {
  color: black;
}
/* gallery */
li.gallerycaption {
    text-align: left;
}
/* Different Page Inline Toggle Swich*/
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled .oo-ui-toggleSwitchWidget-grip {
  top: 12px;
}