MediaWiki:Minerva.less/infobox.less

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

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

@infobox-background: @BODY_LIGHT; @infobox-header-color: @BODY_DARK; @infobox-border-color: @BODY_BORDER; @infobox-subheader-color: @BODY_DARK;

.infobox {

   font-size: 85%;
   background-color: @infobox-background;
   border: 1px solid @infobox-border-color;
   box-shadow: @box-shadow;
   table-layout: fixed;
   
   // override minerva's mobile-friendlyness
   // our infoboxes shouldn't be scrollable anyway
   .content & {
   	display: table;
   	
   	caption {
   		display: table-caption;
   		background: none; // bg in > 720px
   	}
   }

   .infobox-header {
       color: var(--infobox-text-color);
       font-size: 1.15em;
       background: @infobox-header-color;
       padding: .5em 0;
       text-align: center;
   }

   .infobox-subheader {
       background: @infobox-subheader-color;
       line-height: 2em;
       text-align: center;

       a {
           color: var(--infobox-text-color);
       }
   }

   th:not(.infobox-nested):not(.infobox-subheader):not(.infobox-header) {
       text-align: right;
       vertical-align: top;
       border-right: 2px solid @infobox-subheader-color;
       padding: 0.2em 0.5em;
   }
   
   caption.infobox-caption {
   	text-align: center;
   }

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

       &.infobox-nested {
           padding: 0.25em 0;
           line-height: 1em;
       }
   }
   
   .infobox-padding {
       height: 0.5em;
       padding: 0;
       border: 0;
   }
   
   .infobox-image {
       text-align: center;
       
       // for inventory icon in infobox item
       &.inventory-image {
           height: 32px; // functions as min-height
       }
   }

   .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-x: hidden;
       padding: 0;
   }

}

// (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-bonuses { float: none; table-layout: fixed; font-size: 100%; // revert gadget display: table; to allow // table to be scrollable table.infobox-switch& { display: block !important; } // this infobox should be scrollable .content & { display: block;

&.infobox-bonuses-noimage { display: table !important; // override gadget !important } }

tbody { border: 1px solid @infobox-border-color; }

// since setting a min-width to infobox-subheader has unintended effects .infobox-nested { min-width: 40px; }

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

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

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

       a {
           color: var(--infobox-text-color);
       }

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

}

// 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;

}

.infobox-buttons {

   margin-top: 0.5em;
   text-align: center;

}

.infobox-bottom-links {

   display: none;

}

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

   display: none;

}

@media screen and (min-width: @width-breakpoint-tablet) {

   .content table.infobox {
   	float: right;
       margin-top: 0.5em;
       margin-left: 1em;
       width: 300px !important; // Needed to compete with !important for .content table
       
       &.skill-info {
       	float: none;
       	margin: 0 0 1em 0;
       }
       

&.infobox-bonuses { display: table; float: none; margin: 0; width: 100% !important; max-width: 600px; } } }

// Template:Multi Infobox styles .multi-infobox { margin-top: 0.5em; margin-bottom: 2.5em;

.tabber { margin: 0;

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

.tabbertab { display: flex; justify-content: center; padding: 5px; } }

table.infobox { margin: 0; }

.infobox-buttons { margin-top: 0; } }

@media screen and (min-width: @width-breakpoint-tablet) { .multi-infobox { float: right; margin-left: 1em; max-width: 350px; } }

/*

 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; // } // } // // // @media screen and (min-width: @width-breakpoint-tablet) { // .multi-infobox table.infobox { // margin: 0; // } // }