MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/** colors **/

body {
	--border-color: #000;
	--text-color:   #000;

	--color-dlc: #70b04a;
}

.main-page-game-content {
	columns: 3;
}

@media (max-width: 1450px) {
	.main-page-game-content {
		columns: 2;
	}
}

.main-page-game-content ul {
	list-style-type:     none;
	list-style-position: inside;
	margin:              0;
}

.main-page-game-content a {
    padding:        6px 4px;
    display:        inline-block;
    vertical-align: middle;
}
.main-page-game-content a + a {
    width: calc(
      100%
      - 24px /** image width */
      - 8px /** padding image */
      - 8px /** padding text */
      - 8px /** just to be sure */
    );
}

.infobox {
    box-sizing:      border-box;
    border-collapse: collapse;
    border-spacing:  0;
    clear:           right;
    float:           right;
    margin:          0 0 0.5em 0.5em;
    max-width:       320px;
    z-index:         9999999999;
}

.clearfix:after {
  content: "";
  display: table;
  clear:   both;
}

.tabber__tabs {
	z-index: 9999999999;
}

.color--dlc {
	--text-color: var(--color-dlc);
	--border-color: var(--color-dlc);
}

.div--bordered {
	border: 1px solid var(--border-color);
}

.text--colored {
	color: var(--text-color);
}

/* Own */

blockquote.templatequote {
    border-left:   2px solid #36c;
    padding-left:  12px;
    border-radius: 6px;
    opacity:       0.75;
}

.text-muted {
	color: #666;
}
.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}

.main-page-section .patch-notes {
	width: calc(100% - 245px);
} 

.main-page-section-container {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap:       10px;
	grid-row-gap:          10px;
}

.table-header-title {
    border:     1px solid #696969;
    margin:     0;
    text-align: left;
    padding:    0.2em 0.4em;
}

table.navbox {
    border:           1px solid #79542B;
    background-color: #fffce9;
    width:            100%;
    margin:           auto;
    clear:            both;
    font-size:        0.9em;
    text-align:       center;
    padding:          1px;
}

.navbox-group {
    white-space: nowrap;
    text-align:  right;
    font-weight: bold;
}

.info-message-container {
  width:     50%;
  min-width: 350px;
  max-width: 700px;
  margin:    0 auto;
}

.media-block {
  display:     flex;
  align-items: flex-start;
  padding:     1rem;
  margin:      0 0 1rem 0;
}

.media-block > .media-item {
  width:      75px;
  margin:     0 1rem 0 0;
  align-self: center;
  font-size:  1.5rem;
  text-align: center;
}

.media-block > .media-content {
  flex: 1;
}



.infobox-table::after {
  content: "";
  clear:   both;
  display: table;
}

@media only screen and (min-width: 852px) {


}


@media (max-width: 1000px) {
    .main-page-section-container {
        max-width: 100%;
        grid-template-columns: repeat(1, 1fr);
    }
    
    .main-page-section {
        max-width: 100%;
    }
    
    .main-page-section iframe {
        max-width: 100%;
    }
}

.wikitable ~ h2 {
    max-width: 70%;
}

#mw-header #p-logo-text a {
	font-size: 1.75em;
}

.station-level-container {
	position: relative;
	display:  inline-block;
}

.station-level-container a {
	display: block;
}

.station-level-container span {
	position:    absolute;
	left:        12px;
	top:         6px;
	font-weight: bold;

	pointer-events: none;
}

.valheimwiki-note {
     background:    #ffd9d9;
     border:        2px solid #fb4f4f;
     border-radius: 4px;
     overflow:      auto;
     padding:       5px;
 }

.valheimwiki-message {
    background:    #ced7e1;
    border:        2px solid #77a1cd;
    border-radius: 4px;
    overflow:      auto;
    padding:       5px;
}

.digimon-hover-box {
    background: #fff;
    padding:    10px;
    border:     1px solid black;
    width:      200px;
}

.digimon-hover-box img {
    width: 120px;
}

.digimon-mave-hover:after {
    content: url('/images/arrow.png');
    margin:  0 3px;
}

#mw-panel .body {
    background: none !important;
}

.admin-sig a {
    color:       #03a9f4;
    font-weight: bold;
}

/*
@media (max-width: 1000px) {
    .main-alert {
        display: none;
    }
}

.main-alert {
    background: #E74C3C;
    border: 2px solid #E74C3C;
    color: #fff;
    padding: 3px;
    text-align: center;
    width: 100%;
    position: absolute;
    font-size: 13px;
    z-index: 99999;
}

.main-alert a {
    text-decoration: underline;
    font-weight: bold;
    color: #fff;
}

#p-personal {
    top: 25px !important;
}*/

.alert.alert-info {
    padding: 3px 15px 3px 11px !important;
}

.armor-tr .digivolve-level {
    top: 15px;
}

.width-auto {
    width: auto !important;
}

.digivolve-table {
    width:        calc(100% - 400px);
    table-layout: fixed;
}

.digivolve-table .down-right-arrow .digivolve-version {
    bottom: 30px;
    right:  -2px;
}

.infoboxhover a {
    display: block;
    padding: 10px;
}

.infoboxhover a * {
    box-sizing: border-box;
}

.digivolve-table .down-right-arrow {
    text-align:    right;
    font-size:     24px;
    padding-top:   0 !important;
    padding-right: 10px;
    position:      relative;
}

.digivolve-table .armor-tr td {
    padding-top: 10px;
}

.digivolve-table .digivolve-type {
    position: absolute;
    bottom:   0;
    right:    -18px;
}

.digivolve-table .digivolve-version {
    position: absolute;
    bottom:   12px;
    right:    -18px;
}

.w46 {
    width: 46px !important;
}

.w46 a {
    display:  block;
    position: relative;
}

.digivolve-relative {
    position:   relative;
    width:      30px;
    text-align: center;
}

.digivolve-level {
    position:  absolute;
    top:       5px;
    left:      2px;
    width:     30px;
    font-size: 10px;
}

.digivolve-table * {
    box-sizing: border-box;
}

.alert {
    display: inline-block !important;
    width:   auto !important;
}

.wikitable.glossary td,
.wikitable.glossary th,
.wikitable.droptable td {
    padding: 4px 8px;
}

.wikitable.glossary td:first-child {

    text-align: center;
}

.wikitable .questname {
    padding: 8px;
}

.statstable td {
    padding: 5px 10px !important;
}

.wild {
    border-spacing: 0;
    border:         2px solid grey;
    border-radius:  4px;
    width:          400px;
}

.wild .wild-mutation {
    background: #bfcaff;
}

.wild .wild-leader {
    background: #caffbf;
}

.wild .wild-dd {
    background: #ffc66b;
}

/*.wild .wild-mutation td, .wild .wild-leader td { padding: 2px 2px 2px 10px; }*/

.wild .wild-padding td {
    padding-left: 20px;
}

.wild th {
    background:              #ffc0cb;
    border-top-left-radius:  2px;
    border-top-right-radius: 2px;
}

.wild th, .wild td {
    padding: 5px;
}

.questtable td, .questtable th {
    padding: 5px !important;
}

.questtable td:first-child {
    text-align: center;
}

.questtable th:first-child {
    text-align: left;
    width:      50px;
}

.questtable th:first-child + th + th {
    text-align: left;
    width:      40px;
}

.infobox td {

    padding: 3px;
}

.mw-collapsible-toggle {
    float: left;
}

.attacktable td:hover {
    background: #f2f2f2;
}

.atkdesc {
    color: #666;
    width: 450px;
}

.atkdesc span {
    margin-left: 10px;
}

.atkbor {
    border-right: 1px solid #666;
}

.atkbor:hover {
    border-right: 1px solid #af1015;
}

.atkpad {
    /*padding: 0px 10px;*/
    padding-right: 10px;
}

.atkpad:hover {
    background: #f2f2f2;
}

.infoboxhover, .wild .wild-image {
    background-color: transparent;
}

.infoboxhover:hover, .wild .wild-image:hover {
    background-color: #666;
}

.selecteddigivolve {
    border: 3px solid #fb4f4f;
    padding: 2px;
}

.doesnotexist {
    opacity: 0.6;
}

.doesnotexist:hover {
    cursor:  not-allowed;
    opacity: 1;
}

.attacktable td {
    text-align: center;
}

.attacktable .attackname {
    padding: 0px 10px;
}

.tableheader a, .tableheader a:visited {
    color: #fbc93d;
    /*text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;*/
}

.tableheader {

    color:                   white;
    font-weight:             bold;
    text-align:              center;
    text-shadow:             -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    background-size:         50px 50px; /* Controls the size of the stripes */

    background-color:        #222 !important;
    background-image:        linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}

.tableheadersmall {
    background-size:         15px 15px; /* Controls the size of the stripes */
}

.locations td {
    padding: 5px !important;
}

.gallerybox img {
    background: transparent;
}

.gallerybox img:hover {
    background: #666;
}

.itembox {
    background:            #1e2c51;
    border:                1px solid #a7b3c5;
    border-radius:         3px;
    float:                 right;
    font-family:           Arial;
    text-shadow:           1px 1px 1px #000;
    width:                 312px;
}

.itembox a {
    color:           #fff;
    text-decoration: underline;
}

.itembox a:hover {
    color: #77ff06;
}

.itemheader {
    padding: 10px 20px;
}

.itemheader span {
    display:     inline-block;
    margin-left: 12px;
}

.iteminfo {
    margin-left: 10px !important;
}

.itemspan {
    color:      #f0ce97;
    display:    inline-block;
    margin-top: 5px;
    width:      114px;
}

.description {
    display:    inline-block;
    margin-top: 5px;
}

.itembox {
    background:  #1e2c51;
    border:      1px solid #a7b3c5;
    font-family: Arial;
    width:       312px;
}

.itembox hr {
    margin:     0 auto;
    margin-top: 10px;
    width:      80%;
}

.cash {
    color: #fff000;
}

.characterbound {
    color: #f00033;
}

.magic {
    color: #77ff06;
}

.normal {
    color: #fff;
}

.premiumsilk {
    color: #fff000;
}

.rare {
    color: #06e5ff;
}

.silk {
    color: #b8a49d;
}

.table-rank-category {
    border-collapse: separate;
    border-spacing:  0;
}

.table-rank-category td {
    text-align: center;
    padding:    0 !important;
}

.table-rank-category td.selected {
    background: #bbb;
    border:     1px solid #000;
}

.table-rank-category td a {
    display: block;
    padding: 4px 8px;
}


#p-googleadsense.emptyPortlet {
    display: initial;
}




/* -------------------------------------------------------- */
/* Template:Crafting Recipes */
/* -------------------------------------------------------- */
div.crafts {
    margin-bottom: 4px;
    line-height: 1.5;
	display: table;/*float fix*/
    overflow: auto;
}

div.crafts.centered {
    justify-content:center;
}

div.crafts .wrap {
    border: 1px solid #aaa;
    border-radius: 8px;
    padding: 6px 6px 2px 5px;
    position: relative;
    background: #FCFCFC;
}

div.crafts .wrap::after {
    content: "";
    display: block;
    height: 1px;
    width: auto;
    background: #fcfcfc;
    position: absolute;
    bottom: 2px;
    left: 6px;
    right: 6px;
}

div.crafts table {
    position: relative;
}

div.crafts table::after {
    content: "";
    display: block;
    height: 100%;
    width: 1px;
    background: #fcfcfc;
    position: absolute;
    top: 0;
    left: 0;
}

div.crafts caption {
    font-size: 1.17em;
    background: #E4F0F7;
    padding: 0.25em;
    position: relative;
    margin-bottom: 2px;
    font-weight: bold;
}
div.crafts caption > i,div.crafts caption > b{
	vertical-align: middle;
}

div.crafts caption div._nav {
    position: absolute;
    left: 1em;
    top: 0.5em;
    font-size: 10px;
    font-weight: normal;
}

div.crafts caption div._nav s {
    text-decoration: none;
}

div.crafts th {
    background: #E4F0F7;
    padding: 0.25em 0.5em;
    border-right: 1px solid #f9f9f9;
    border-left: 1px solid #f9f9f9;
}
div.crafts th:first-child {
    border-left-width: 0px;
}

div.crafts th:last-child {
    border-right: 0;
}

div.crafts td {
    padding: 0.25em 0.5em;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
/*
div.crafts td:first-child {
    border-left: 0;
}
*/
div.crafts td.result,
div.crafts td.ingredients{
    white-space: nowrap;
}

div.crafts td.station{
    text-align: center;
}

div.crafts td.station span.water{
    display: inline-block;
    vertical-align: middle;
}

div.crafts.nostation th.station,
div.crafts.nostation td.station {
    display: none;
}

div.crafts table .ingredients ul,
.crafting-ingredients > ul {
    margin: 0;
    list-style: none;
}

div.crafts table .ingredients li,
.crafting-ingredients > ul > li {
    margin: 3px auto;
}
/* itemlink default as multiline */
div.crafts .i > span,
div.crafts .i > span,
div.crafts .note-text {
    line-height: 1.25;
    vertical-align: middle;
}

.crafts .i img {
    padding: 0 4px 0 0;
}

.crafts tbody tr td {
    transition: linear background 0.05s;
}

.crafts tbody tr td:hover {
	background: rgba(0, 0, 0, 0.05);
}