MediaWiki:Common.less/infobox.less
< MediaWiki:Common.less
Jump to navigation
Jump to search
Revision as of 13:15, 20 December 2018 by Corey (talk | contribs) (Created page with "// <pre> →==================== new infoboxes ====================: // @TODO: change .rsw-infobox back to .infobox when everything is updated @infobox-background...")
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: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
//
/* ==================== new infoboxes ==================== */ // @TODO: change .rsw-infobox back to .infobox when everything is updated @infobox-background: @white; @infobox-header-color: @jelly-bean; @infobox-header-border: .5em solid @infobox-background; @infobox-subheader-color: @fountain-blue; @infobox-cell-border: 1px solid @mystic; .rsw-infobox { background: @infobox-background; 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; .infobox-header { color: @white; font-size: 1.15em; line-height: 1.4em; background: @infobox-header-color; border-bottom: @infobox-header-border; padding: .5em 0; } .infobox-subheader { background: @infobox-subheader-color; color: @white; line-height: 2em; border-top: @infobox-header-border; border-bottom: @infobox-header-border; a { color: @white; } } // usually first row .infobox-image { text-align: center; // for things like inventory icon in infobox item &.bordered-image { border: @infobox-cell-border; border-bottom: none; padding: .4em; } // keep infobox images from sticking together a.image + a.image { margin-left: .1em; } img { max-width: 300px; height: auto; } } // usually last row .infobox-map { border-top: @infobox-header-border; text-align: center; 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) { text-align: right; vertical-align: top; border-left: @infobox-cell-border; border-right: .175em solid @infobox-subheader-color; padding: 0.2em 0.5em; } td { &:not(.infobox-image):not(.infobox-map) { border-right: @infobox-cell-border; padding: 0.25em 0.5em; line-height: 1.6em; } // for full width td's at the bottom like infobox item examine &[colspan="2"]:not(.infobox-image):not(.infobox-map) { border: @infobox-cell-border; padding-bottom: .6em; } } .infobox-cell-hidden { display: none; } .infobox-template-links { text-align: center; } } /* used in Module:Infobox to contain switch infoboxes */ /* we're trying to remove all instances of infobox-wrapper */ .infobox-wrapper { display: table; float: right; } /* ============================= infobox-specific styles ============================= */ /* ---------------------- Infobox item ---------------------- */ .infobox-item { // for HiDPI screens; otherwise inventory icons appear blurry .infobox-image { image-rendering: -moz-crisp-edges; // firefox doesn't support unprefixed image-rendering: pixelated; // chrome only supports this value image-rendering: crisp-edges; // this is what should be used; only safari supports it } } /* ---------------------- Infobox monster ---------------------- */ // @TODO: redo all of this, it looks terrible .infobox-monster { text-align:center; // why do this? // th, // td { // vertical-align: middle !important; // } // remove this when fixed th:not(.infobox-header):not(.infobox-subheader) { text-align: center; } .offensive-header { background-color: #861c10; color: #fff; font-variant: small-caps; } .offensive-subheader { background-color: #ecccc6; font-variant: small-caps; a { color: #861c10 !important; } } .defensive-header { background-color: #438ab5; color: #fff; font-variant: small-caps; } .defensive-subheader { background-color: #c1deed; font-variant: small-caps; a { color: #32637c !important; } } .slayer-header { background: #464646; color: #fff; font-variant: small-caps; } } /* ============================= miscellaneous stuff ============================= */ // document your shit // i don't know what half this stuff does or where it is // [view] and [talk] links .infobox-bottom-links { clear: right; float: right; font-size: xx-small; margin-top: -1.5em; } // switch infobox buttons .infobox-buttons { text-align: center; max-width: 250px; display: none; margin: 0 auto; .button { margin: 0 3px; } } .infobox-switch-resources { display:none; } .infobox .infobox-cell-hidden { display: none; } /* infobox bonuses switch buttons */ .switch-infobox { .switch-infobox-triggers, .loading-button { clear: left; } } .infobox .nestedinfo td table { min-width: 263px; margin: -1px; width: ~"calc(100% + 2px)" !important; } .infobox .nestedinfo td { width:100%; padding:0; } /* ======================== legacy infoboxes ======================== */ // @TODO: remove this when infoboxes are converted .infobox { border: 1px solid darken( @default-page, 33.5% ); background-color: darken( @default-page, 2.5% ); color: inherit !important; margin: 0 0 0.5em 0.2em !important; padding: 0.2em; float: right; clear: right; td, th { vertical-align: top; } caption { font-size: larger; padding-bottom: 10px !important; margin-left: 0 !important; color: inherit !important; } &.bordered { border-collapse: collapse; td, th { border: 1px solid darken( @default-page, 33.5%); } .borderless { td, th { border: 0; } } } // fix awkward margins for lists in infoboxes ul { margin: 0.3em 0 0 1.6em; } // fix for nested collapsible wikitables in infoboxes // @todo fix monster infoboxes so we don't need this .wikitable.mw-collapsible { margin: -1px; width: ~"calc(100% + 2px)" !important; } // keep infobox images from sticking together a.image + a.image { margin-left: 3px; } // remove effect of any spaces when there's File File to let margins do all the work .infobox-image { text-align: center; word-spacing: -4px; img { height: inherit; max-width: 250px; } } // let red links have normal spacing td .new { word-spacing: 0; } .infobox-cell-hidden { display: none; } }