MediaWiki:Vector.less/infobox.less

/* ====================

      infoboxes
  ==================== */

.infobox {

   background: @infobox-background;
   border: 1px solid @infobox-border-color;
   font-size: .85em;
   width: 300px; // fixed size so image always fills entire width
   margin: .5em 0 1em 1em;
   border-collapse: collapse;
   box-shadow: @box-shadow;
   float: right;
   table-layout: fixed;
   word-break: break-word;

   .infobox-header {
       color: var(--infobox-text-color);
       font-size: 1.15em;
       line-height: 1.4em;
       background: @infobox-header-color;
       padding: .5em 0;

       a {
           color: inherit;
           font-size: 1.15em;
           font-weight: bold;
       }
   }

   .infobox-subheader {
       background: @infobox-subheader-color;
       color: var(--infobox-text-color);
       line-height: 2em;

       a {
           color: inherit;
       }

       &+.infobox-subheader {
           border-left: 2px solid @BODY_LIGHT;
       }
   }

   .infobox-image {
       text-align: center;

       // for inventory icon in infobox item
       &.inventory-image {
           height: 32px; // functions as min-height
       }

       // keep infobox images from sticking together
       a.image + a.image {
           margin-left: .1em;
       }

       img {
           max-width: 300px;
           height: auto;
       }
   }

   // browsers get your shit together https://caniuse.com/#feat=css-not-sel-list
   th:not(.infobox-header):not(.infobox-subheader):not(.infobox-nested) {
       text-align: right;
       vertical-align: top;
       border-right: 2px solid @infobox-subheader-color;
       padding: 0.25em 0.5em;
   }

   td {
       padding: 0.25em 0.5em;
       line-height: 1.6em;

       &.infobox-nested {
           padding: 0.25em 0;
           line-height: 1em;
       }
   }

// same vertical aligning as s; so headers aren't needed to be nowrap'ed

th ~ td { vertical-align: top; }

   .infobox-padding {
       height: 0.5em;
       padding: 0;
       border: 0;
   }

   .infobox-nested {
       text-align: center;

       &+.infobox-nested {
           border-left: 2px solid @infobox-subheader-color;
       }
   }

   .infobox-cell-hidden {
       display: none;
   }

   .infobox-full-width-content {
       max-width: 300px;
       text-align: center;
       overflow: hidden;
       padding: 0;
   }

   .infobox-caption {
       font-weight: bold;
   }
   
   select {
   	max-width: 300px;
   }

}

/* =============================

     infobox-specific styles
  ============================= */

.infobox-item {

   .infobox-image {
       .pixelate()
   }

}

.infobox.skill-info { float: none; margin: 1em 0; }

.infobox-bonuses {

   clear: left;
   float: none;
   word-break: break-word;
   font-size: 100%;

margin: 1em 0;

   .infobox-bonuses-image {
       width: 125px;
       text-align: center;
       vertical-align: middle;
       border: 1px solid @infobox-border-color;
   }

   .infobox-bonuses-image-caption {
       font-size: 0.85em;
   }

   .infobox-subheader {
       width: 250px;
   }

}

// (dirty trick) Hide a silly bug in switch infoboxes: // switching between versions where there is a Quantity box followed by text will cause the text to be duplicated on switch // This currently only occurs where the text consists of "? (edit)" links, so hiding consecutive edit links works to hide this // This should ideally be fixed for real though, instead of just hiding it. .skill-info a[href$="?action=edit"] + a[href$="?action=edit"] { display: none; }

// Infobox Room door layout .poh-room {

   background-color: var(--infobox-room-poh-color);
   margin: auto;
   width: 100px;
   
   img {
       display: block;	
   }

}

.poh-room-row {

   display: flex;

}

.poh-room-text {

   margin: auto;
   width: 92px;

}

// switch infobox buttons .infobox-buttons {

   text-align: center;
   max-width: 300px;
   display: none;

}

.infobox-switch-resources {

   display: none;

}

/* infobox bonuses switch buttons */ .switch-infobox {

   .switch-infobox-triggers,
   .loading-button {
       clear: left;
   }

}

/* Infobox Pure max hit items */ .infobox-pure .max-hit-list { a { display: inline-block; min-width: 32px; min-height: 32px; text-align: center; } }

// Hides advanced data. Class gets replaced by .advanced-data-display // if the showAdvancedData gadget is enabled. .advanced-data { display: none; }

// Template:Multi Infobox styles .multi-infobox { @multi-infobox-padding: 5px; float: right; margin: 0 0 calc(1em - @multi-infobox-padding) calc(1em - @multi-infobox-padding);

.tabber { margin: 0;

.tabbernav { text-align: center; margin: 0;

a { padding: 0.5em 0.8em; } }

.tabbertab { padding: @multi-infobox-padding; display: flex; justify-content: center; } }

.infobox { margin: 0; } }

/*

 The following styles were used as a temporary fix for TabberNeue.
 We're currently using old Tabber because TabberNeue breaks if a tab
 dynamically changes size, such as multi-infobox.

• /

// .multi-infobox { // margin: 0 0 5px 5px; // float: right; // // .tabber__tabs { // font-size: 95%; // justify-content: center; // padding: 0; // } // // .tabber__tab { // padding: 0.25em 0.6em; // } // // .tabber__section { // padding: 0; // } // // .tabber__panel { // padding: 5px; // display: flex; // justify-content: center; // } // // .tabber__panel[aria-hidden='true'] { // display: none; // } // // .infobox { // margin: 0; // } // }