MediaWiki:Common.css: Difference between revisions

Latest revision as of 19:27, 27 March 2026

/* CSS placed here will be applied to all skins */

/*@import url("/vswiki/index.php?action=raw&ctype=text/css&title=MediaWiki:MainPage.css")*/

.centered {
  justify-content: center;
  justify-items: center;
  text-align: center;
}

.bordered{
  padding: 0px;
  margin: 8px;
  border-radius: 8px;
  border: 2px solid var(--border-color-base);
  overflow: hidden;
}

.split-table td{
  width: 50%;
  .embedvideo, .embedvideo-wrapper, video{
    height: 100% !important;
    width: 100% !important;
  }
}

.hatnote{
  padding-left: 1.6em;
  margin-bottom: 0.5em;
  font-style: italic;
}

/* ========================== CLICKABLE ========================== */

.clickable{
  color: var(--color-link);
  cursor: pointer;
}

.clickable:hover{
  color: var(--color-link--hover);
  text-decoration: underline;
}

.clickable:active{
  color: var(--color-link--active);
  text-decoration: underline;
}

/* ========================== INFOBOX ========================== */

.infobox-table{
  display: block;
  width: max-content;
  float: none;
  margin: auto;

  th{
    margin: 0px;
    padding: 8px;
    background: var(--color-progressive);
    border-bottom: 2px solid var(--border-color-base);
  }

  tbody{
   display: block;
   margin: -2px;
  }
  
  .tabber{
    header, article{
      width: max-content;
    }
    section{
      width: 256px;
    }
    p{
      margin: 0;
    }
}
}

.infobox-row{
  display: flex;
  flex-direction: row;
  gap: 1rem;

  .label{
    text-align: right;
    flex: 1;  
  }
  
  .value{
    flex: 1.75;  
  }
  
  p{margin: 0;}
}


@media (min-width: 600px) {
  .infobox-table{
    float: right;
    margin: 0;
  }
}

/* ========================== ABILITIES ========================== */

.ability-table{
    width: 100%;
  }

@media (min-width: 600px) {
  .ability-table{
    width: calc(100% - 300px);
  }
}

/* ========================== MAIN PAGE ========================== */

.mainpage-wrapper{
  display: flex;
  flex-direction: column-reverse;
}

.bordered{

  .mw-heading{
    margin: 0px;
    padding: 8px;
    background: var(--color-progressive);
    border-bottom: 2px solid var(--border-color-base);
    width: 100%;
  }

  h1,h2,h3,h4,h5,h6{
    margin: 0;
  }

  >p{
    margin: 16px 8px;
  }
}

@media (min-width: 1100px) {
  .mainpage-wrapper{
    flex-direction: row;
  }

  .mainpage-left{
    flex: 2;
  }

  .mainpage-right{
    flex: 1;
  }
 
}