User:Redirected/wikitabs.css

From Noita Wiki
Jump to navigation Jump to search

In other languages: 日本語 • Български • Deutsch • Ελληνικά • English • Español • Français • Magyar • Italiano • 한국어 • Nederlands • Polski • Português • Português do Brasil • Русский • Türkçe • 中文

CSS and Javascript changes must not modify the wiki.gg branding or advertisements.

Note: After saving, 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)
Internet Explorer Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera Clear the cache in Tools → Preferences 
/**************************************************************
*        Tabs-script and Infobox CSS from User:Redirected     *
**************************************************************/
/* Tabs container code */
  /* don't mess with these start */
    .tabs-container .tabs-btn {  display: inline-block; cursor: pointer; }
    .tabs-container .tabs-btn:only-child {  display: none; }
    .tabs-container .tabs-btn a {  pointer-events: none; }
  /* don't mess with these end */
    .tabs-container .tabs-btn.tabs-active {
      border-color: var(--visited-link-color);
      box-shadow: 0 -6px 6px -4px rgb(255 255 255 / 50%) inset;
    }
/* Infobox basic styling */
  /* don't mess with these start */
    .ib-infobox-container dd,
    .ib-infobox-container dt,
    .ib-infobox-container dl {
      margin: unset;
      font-weight: unset;
    }
    .ib-infobox-container {  position:relative; }
    .ib-infobox {
      display: grid; overflow: auto;
      grid-template-columns: 1fr auto;
  /* don't mess with these end */
      --ib-main-border-style:  3px solid;
      --ib-main-border-color:  #5f5f5f;
      --ib-item-border-style:  0.5px solid;
      --ib-item-border-color:  #272727;
      --ib-item-border-color2:  #373737;
      border: var(--ib-main-border-style) var(--ib-main-border-color);
      background-color: #000;
      font-family: 'noita',sans-serif;
      font-weight: normal;
      text-shadow: 1px 1px 1px rgb(0 0 0 / 75%);
      line-height: 1.5;
      color: #FFF;
      hyphens: auto;
    }
    .ib-infobox .ib-tabs {
      padding: 0 .5em;
    }
    .ib-infobox .ib-tabs > * {
      padding: 0 .25em;
      margin: .25em;
      color: var(--visited-link-color);
      border-bottom: 3px solid var(--ib-main-border-color);
    }
    .ib-infobox .ib-header {
      font-size: 1.02em;
      background-color: #181818;
    }
    .ib-infobox .ib-item {
      font-size: 1.02em;
      padding: 0.5em;
      overflow-wrap: break-word; /*word-break: break-word;/* deprecated */

/* Shaping code from below onwards, don't mess with it */
      flex: 1; min-width: 0;
      overflow: hidden;
    }
/* Right columnization, usually for images */
    .ib-infobox .ib-group {
      grid-column: 1 / 3;
    }
    @media (min-width: 400px) { /* wider than 400px, allow right column to exist in single tab mode */
      .ib-infobox:not(.tabs-multi) .ib-group.ib-columnize-right + .ib-group{
        grid-row: colgroup_r;
        grid-column: 1 / 2;
      }
      .ib-infobox:not(.tabs-multi) .ib-group.ib-columnize-right{
        grid-row: colgroup_r;
        grid-column: 2 / 3;
        /* below two are for vertical centering of right column items */
        display: grid;
        align-items: center;
      }
    }
    .ib-infobox .ib-group.ib-columnize-right .ib-propsg .ib-prop .ib-val .ib-item {
      text-align: center;
    }
/**/
/* Hierarchy:
  .ib-infobox-container > .ib-infobox.tabs-multi > .ib-group.ib-columnize-right >
    1>  .ib-header
        1>  .ib-tabs ...
        2>  .ib-propsg ...
    2>  .ib-propsg.ib-columnize.ib-nokey .ib-prop .ib-key/.ib-val .ib-item
*/
/* hide keys for .ib-nokey */
    .ib-infobox.tabs-multi .ib-nokey .ib-key .ib-item,
    .ib-infobox:not(.tabs-multi) .ib-nokey .ib-key {
      display: none;
    }
/* Flex */
    .ib-infobox .ib-propsg,
    .ib-infobox .ib-propsg .ib-prop, /* .ib-val can have multiple .ib-item */
    .ib-infobox .ib-propsg .ib-prop .ib-val { /* unlike .ib-key */
      display: flex;
    }
    .ib-infobox .ib-propsg {  flex-direction: column; }
    .ib-infobox .ib-propsg .ib-prop .ib-key {  flex: 3; min-width: 0; }
    .ib-infobox .ib-propsg .ib-prop .ib-val {  flex: 4; min-width: 0; }
/* media query */
@media not (max-width: 350px) { /* wider than 350px, key and value
    rows are separate below this, so max width needs to be unset */
    .ib-infobox.tabs-multi .ib-group .ib-propsg .ib-prop .ib-key,
    .ib-infobox:not(.tabs-multi) .ib-propsg:not(.ib-columnize) .ib-prop .ib-key {
      max-width: 12.5em;
    }
/* column code start *//* when .tabs-multi mode is inactive, columns are allowed to exist */
    /* when columnized the value is often smaller than the key, key needs to flex for evenness between props */
        .ib-infobox:not(.tabs-multi) .ib-propsg.ib-columnize .ib-prop .ib-val {  flex: 0; min-width: 0; }
    /**/
    .ib-infobox:not(.tabs-multi) /*.ib-propsg*/ .ib-columnize {
      flex-direction: row;
      flex-wrap: wrap;
    }
    .ib-infobox:not(.tabs-multi) .ib-propsg.ib-columnize .ib-prop {
      /* determine items per row, min-content (default) fits all, overwritten in lua */
      flex: var(--ib-columnize-flex, min-content); min-width: 0;
      flex-direction: column;
    }
}
/* column code end */
@media (max-width: 350px) { /* smaller than than 350px */
    .ib-infobox.tabs-multi .ib-group .ib-propsg.ib-columnize .ib-prop,
    .ib-infobox .ib-group .ib-propsg:not(.ib-columnize) .ib-prop {
      flex-direction: column; /* have keys and values on separate rows in non-columnized groups */
    }
/* Border code hell */
    .ib-infobox.tabs-multi .ib-group:not(.ib-nokey) .ib-propsg:not(.ib-nokey) .ib-key{ 
      border-left: var(--ib-item-border-style) var(--ib-item-border-color); /* DIV,
        left border fix to match key with values in small mode */
    }
    .ib-infobox.tabs-multi .ib-group:not(.ib-header):not(.ib-nokey) .ib-propsg:not(.ib-nokey) .ib-key {
      border-bottom: var(--ib-item-border-style) var(--ib-item-border-color); /* DIV */
    }
}
    .ib-infobox.tabs-multi :not(.ib-header):not(.ib-nokey):not(.ib-columnize-right) .ib-propsg:not(.ib-columnize) .ib-val .ib-item,
    .ib-infobox.tabs-multi .ib-header .ib-val .ib-item,
    .ib-infobox.tabs-multi .ib-propsg.ib-columnize .ib-val .ib-item {
        border-left: var(--ib-item-border-style) var(--ib-item-border-color); /* DIV, multi mode tab value separator */
    }
    .ib-infobox.tabs-multi :not(.ib-header) .ib-propsg .ib-prop {
      border: var(--ib-item-border-style) var(--ib-item-border-color2);
      border-collapse: collapse; /* PROP */
    }
    .ib-infobox:not(.tabs-multi) :not(.ib-columnize-right):not(.ib-header) .ib-propsg:not(.ib-columnize) .ib-prop,
    .ib-infobox:not(.tabs-multi) .ib-group.ib-columnize-right,
    .ib-infobox:not(.tabs-multi) .ib-propsg.ib-columnize .ib-prop {
      border: var(--ib-item-border-style) var(--ib-item-border-color);
      border-collapse: collapse; /* PROP, all the property bordering in all the possible modes */
    }
/* Tabs-script and Infobox CSS end *
***********************************/
Retrieved from "https://noita.wiki.gg/index.php?title=User:Redirected/wikitabs.css&oldid=46542"