MediaWiki:Mbhh.css
From Against the Storm Official Wiki
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)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* All CSS here will be loaded for users of the MBHH skin. */ body { background-image: url(/wiki/Against_the_Storm/skins/MBHH/resources/images/shade-right.png?9ba42), url(/wiki/Against_the_Storm/skins/MBHH/resources/images/shade-left.png?30070), url(/wiki/Against_the_Storm/skins/MBHH/resources/images/shade-bottom.png?ff4a7), url(/wiki/Against_the_Storm/skins/MBHH/resources/images/game_bgs/main_AtS_bg.jpg?6e063); } @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Asap+Condensed:wght@200;300;400;500;600;700;800;900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans+Mono:wght@100;200;300;400;500;600;700;800;900&display=swap'); /*VARIABLES*/ :root { /*FONTS*/ --ats-body: 'Noto Sans'; /*TODO REMOVE*/ --ats-heading: 'EB Garamond'; /*TODO REMOVE*/ --ats-mono: 'Noto Sans Mono'; /*TODO REMOVE*/ --ats-condensed: 'Asap Condensed'; /*TODO REMOVE*/ --ats-font-body: 'Noto Sans'; --ats-font-heading: 'EB Garamond'; --ats-font-monospace: 'Noto Sans Mono'; --ats-font-condensed: 'Asap Condensed'; /*COLORS*/ --ats-default: #dedede; /*TODO REMOVE*/ --ats-color-white: #dedede; --ats-dark: #0e0f0a; /* approx. black */ --ats-yellow: #e1aa46; /* approx. gold */ --ats-brown: #59482d; /* approx. dimgray */ --ats-dark-brown: #302513; /* approx black */ --ats-dark-brown-alt: #261d0f; /* approx black */ --ats-green: #53b522; /* approx. lawngreen */ --ats-dark-green: #0e1b0d; /* approx. darkslategray */ --ats-dark-green-alt: #122411; /* approx. darkslategray */ --ats-blue: #31b7fa; /* approx. deepskyblue */ --ats-bright-blue: #92d8fc; /* approx. deepskyblue */ --ats-bright-blue-highlight: #b4e5fd; /* approx. skyblue */ --ats-bright-blue-brighest: #e1f5fe; /* approx. lightblue */ --ats-bright-blue-dim: #79d0fc; /* approx. royalblue */ /*TODO REMOVE*/ --ats-bright-red: #f02a00; --ats-color-red-penalty-text: #f62800; --ats-color-red-warehouse: #b23b20; --ats-color-red-toolbar: #884033; /* rusty color of base of construction toolbar icons */ --ats-color-red-button: #77311A; /* rusty color of "PICK" buttons for blueprints and cornerstones */ --ats-color-red-effect-brilliant: #fe4520; /* brightest red in artwork */ --ats-color-red-effect-dark: #2C0000; /* background red in artwork */ --ats-bright-green: #87cb64; /* approx. lightgreen */ --ats-bright-green-highlight: #bae1a7; /* approx. palegreen */ --ats-bright-green-dim: #53B522; /* approx. lawngreen */ } .dark-mode { /* Art */ div#mw-content { background-color: var(--ats-dark, black); border: 2px solid var(--ats-brown, dimgray); } .wikitable { background-color: var(--ats-dark-brown, darkslategray); border: none; } .wikitable > * > tr > th { background-color: var(--ats-brown, dimgray); border: 2px solid var(--ats-dark, black); } .wikitable > * > tr > td { border: 2px solid var(--ats-dark, black); } .wikitable:not(.ats-table-nobands) > * > tr:nth-child(odd) { background-color: var(--ats-dark-brown-alt, darkslategray); } pre { background-color: var(--ats-dark-green, black); border: 1px solid var(--ats-dark-green-alt, dimgray); } code { background-color: var(--ats-default, white); border: 1px solid var(--ats-bright-gold, black); } .mw-body .mw-parser-output h1::after, .mw-body .mw-parser-output h2::after { border-bottom: 1px solid var(--ats-gold, palegoldenrod); } div.thumbinner { background-color: unset; border-image-source: url('https://hoodedhorse.com/wiki/images/mbhh_ats/b/b4/Popup_Tooltips_BG.png'); border-image-slice: 19 31 31 31 fill; border-image-width: auto; border-image-repeat: stretch; border-image-outset: 19px 31px 31px 31px; margin: 10px 18px 30px 18px; padding: 8px 0px 0px 2px; } .thumbinner .thumbimage, .thumbborder { border-color: var(--ats-brown, dimgrey); } div.ats-messagebox-version, div.ats-messagebox-stub { border-image-source: url('https://hoodedhorse.com/wiki/images/mbhh_ats/b/b4/Popup_Tooltips_BG.png'); border-image-slice: 19 31 31 31 fill; border-image-width: auto; border-image-repeat: stretch; border-image-outset: 19px 31px 31px 31px; margin: 30px 18px 30px 18px; padding: 8px 0px 0px 2px; } div.ats-messagebox-version p { background-image: url('/wiki/images/mbhh_ats/1/1f/Hourglass_Icon_.png'); background-size: 48px; background-repeat: no-repeat; padding-left: 58px; padding-bottom: 8px; } div.ats-messagebox-stub p { background-image: url('/wiki/images/mbhh_ats/b/bf/Monitor_Icon_LowFood.png'); background-size: 48px; background-repeat: no-repeat; padding-left: 58px; padding-bottom: 8px; } div.ats-infobox-border { background: radial-gradient(circle, rgba(0,0,0,0.2),rgba(0,0,0,0.8)), url('/wiki/images/mbhh_ats/2/2b/BG_Green_03.png'), black; border: 0 solid transparent; border-image-source: url('/wiki/images/mbhh_ats/c/c3/Popup_RightPanel_BG.png'); border-image-slice: 27 0 65 59; border-image-width: auto; border-image-outset: 17px 0 26px 22px; margin: 13px 0 13px 13px; padding: 9px 0 9px 9px; } div.ats-infobox-header-border { border: 0px solid transparent; border-image-source: url('/wiki/images/mbhh_ats/4/41/Popup_Seperation0.png'); border-image-slice: 16 fill; border-image-width: auto; border-image-repeat: round; border-image-outset: 8px; margin: 6px 8px 6px 6px; padding: 8px; } .ats-infobox-header-icon-border { border: 0px solid transparent; border-image-source: url('/wiki/images/mbhh_ats/0/06/FRAME_Tex_Square_Big_1.png'); border-image-slice: 20; border-image-width: auto; border-image-repeat: stretch; border-image-outset: 7px; display: inline-block; margin: 5px; padding: 0; } .ats-infobox-innerinfo .ats-goods-category-icon { border: 0px solid transparent; border-image-source: url('/wiki/images/mbhh_ats/8/8a/Frame_Square.png'); border-image-slice: 15; border-image-width: auto; border-image-repeat: round; border-image-outset: 5px; } table.ats-infobox-innerinfo-border { background-color: rgba(0,0,0,0.85); border: 0px solid transparent; border-image-source: url('/wiki/images/mbhh_ats/7/71/Infobox-group-border.png'); border-image-slice: 30 37 30 37; border-image-width: auto; border-image-repeat: round; border-image-outset: 14px; margin: 6px; padding: 5px; } .ats-infobox-separator th, .ats-infobox-separator td { border-top: 10px solid transparent; } .ats-infobox-separator { position: relative; border: none; } .ats-infobox-separator::after { content: ''; height: 8px; position: absolute; left: 0; top: 0; background-image: url('/wiki/images/mbhh_ats/9/96/Box-separator.png'); width: 100%; background-position-y: center; background-size: 100% 100%; } div.toc { background: var(--ats-dark, black); border: 0px solid transparent; border-image-source: url('/wiki/images/mbhh_ats/6/6b/HUD_BG_for_text.png'); border-image-slice: 12 81 12 81 fill; border-image-width: auto; border-image-repeat: stretch; } .mw-body .toctitle { border: none; } div.ats-container-recipe { display: inline-block; border: 0px solid transparent; border-image-source: url('/wiki/images/mbhh_ats/6/6a/Skin_BG_Small_3.png'); border-image-slice: 42 14 15 14 fill; border-image-width: auto; border-image-repeat: round; border-image-outset: 0px 6px 0px 6px; padding: 0px 12px 0px 12px; } table.ats-table-recipe, table.ats-table-recipe th, table.ats-table-recipe td { border: none; background: none; } .ats-table-recipe .ats-building-icon img, .ats-table-recipe .ats-single-ingredient-icon img, .ats-table-recipe .ats-product-icon img { border-image-source: url('/wiki/images/mbhh_ats/0/06/FRAME_Tex_Square_Big_1.png'); border-image-slice: 20; border-image-width: auto; border-image-repeat: stretch; border-image-outset: 7px; margin: 0 2px 0 2px; } .ats-optional-ingredient-icon img { border-radius: 50%; } .ats-optional-ingredient-icon > a:first-child::after { content:""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; border-image-source: url('/wiki/images/mbhh_ats/7/79/FRAME_Swap_66x66.png'); border-image-slice: 35; border-image-width: auto; border-image-repeat: round; border-image-outset: 7px; } .ats-optional-ingredient-icon > a { display: inline-block; position: relative; margin: 1px 5px 1px 5px; } .ats-table-recipe { border-collapse: separate; border-spacing: 0px 12px; } .ats-table-recipe > * > tr > td { border-top: 2px ridge var(--ats-brown, dimgray); border-bottom: 2px ridge var(--ats-brown, dimgray); border-right: none; background-color: rgba(0,0,0,0.20); padding: 4px 0 4px 0; } .ats-table-recipe > * > tr > td:first-of-type { border-left: 2px ridge var(--ats-brown, dimgray); padding-left: 12px; } .ats-table-recipe > * > tr > td:last-of-type { border-right: 2px ridge var(--ats-brown, dimgray); padding-right: 12px; } .ats-mainbox { border: 1px solid transparent; border-image-source: url('https://hoodedhorse.com/wiki/images/mbhh_ats/9/97/CaravanSlot_Highlight.png'); border-image-slice: 18 93 28 135 fill; border-image-width: auto; border-image-repeat: round; margin-left: -30px; padding: 0 80px 30px 30px; } .ats-main-billboard { border: 1px solid red; border-image-source: url('/wiki/images/mbhh_ats/3/35/Frame_News.png'); border-image-slice: 75; border-image-width: auto; border-image-repeat: round; border-image-outset: 40px; margin: 40px 10px 60px 10px; } .ats-main-billboard span { display: inline-block; width: 32%; text-align: center; } .ats-main-billboard-text { color: var(--ats-bright-gold, khaki); font-size: 150%; font-variant: small-caps; } h1:after, h2:after { border-bottom: 1px solid var(--ats-gold); } .toctitle { border-bottom: none; } .mw-editsection, #ca-edit { background-image: url("https://hoodedhorse.com/wiki/images/mbhh_ats/thumb/1/10/Icon_Clear.png/15px-Icon_Clear.png"); background-repeat: no-repeat; } .magnify { background-image: url('https://hoodedhorse.com/wiki/images/mbhh_ats/thumb/c/c5/Popup_Icon_Expand.png/28px-Popup_Icon_Expand.png'); } li#ca-nstab-user { background-image: url('/wiki/images/mbhh_ats/thumb/e/ea/Icon_Worker.png/20px-Icon_Worker.png'); background-repeat: no-repeat; } li#ca-talk { background-image: url('/wiki/images/mbhh_ats/thumb/6/6b/HUD_Icon_Villigers.png/20px-HUD_Icon_Villigers.png'); background-repeat: no-repeat; } .tools-inline li:hover { border-bottom-color: var(--ats-bright-blue-brightest, lightblue); } .tools-inline li.selected a { background-image: url('/wiki/images/mbhh_ats/thumb/0/01/Tab-Recipes.png/20px-Tab-Recipes.png'); background-repeat: no-repeat; color: var(--ats-gold, palegoldenrod); } #ca-history a { background-image: url('/wiki/images/mbhh_ats/thumb/4/4c/FlatIcon_Order_NeedForTime.png/16px-FlatIcon_Order_NeedForTime.png'); background-repeat: no-repeat; } div .header { border: 1px solid var(--ats-yellow, gold); margin-top: 2em; } /* Type and color */ p, td, th, li, dd, caption, .mw-headline, h1.mw-first-heading, .thumbcaption, .toc, .usermessage, .ats-infobox-header-title { color: var(--ats-default, white); font-family: var(--ats-body), sans-serif; font-weight: 300; font-size: 11pt; line-height: 1.7em; letter-spacing: 0.10em; word-spacing: 0.06em; } caption, dt, .ats-flavor-text, .ats-flavor-text p, .mw-headline, h1.mw-first-heading, #mw-toc-heading, .mw-portlet-body .mw-list-item, .ats-infobox-header-title, #ats-infobox-header-subtitle { font-family: var(--ats-heading), serif; font-size: 11pt; font-weight: 500; letter-spacing: 0.6pt; line-height: 1.4em; } pre, code { font-family: var(--ats-mono), monospaced; font-size: 95%; font-weight: 500; letter-spacing: 0.05em; word-spacing: 0em; } .ats-table-recipe th, .ats-table-recipe td { font-family: var(--ats-condensed, sans-serif); font-size: 10.5pt; text-transform: uppercase; } .ats-table-recipe caption, dt { color: var(--ats-yellow, gold); } .ats-building-icon img { display: block; } caption, .mw-headline, h1.mw-first-heading, #mw-toc-heading, .mw-portlet-body .mw-list-item, .ats-infobox-header-title { font-variant: small-caps; } caption .mw-collapsible-toggle { color: var(--ats-default, white); } #contentSub { color: var(--ats-gold, palegoldenrod); } h1.mw-first-heading, .mw-headline, .tocnumber, #mw-toc-heading, #ca-nstab-user, .mw-changeslist > h4 { color: var(--ats-gold, palegoldenrod); } h1.mw-first-heading { font-size: 250%; letter-spacing: 0.07em; } h2 .mw-headline { font-size: 120%; letter-spacing: 0.10em; } h3 .mw-headline, h4 .mw-headline, h5 .mw-headline, h6 .mw-headline, h7 .mw-headline { font-size: 120%; } caption { color: var(--ats-gold, palegoldenrod); font-size: 150%; } th { color: var(--ats-default, white); font-weight: 400; } .ats-infobox-header-title { font-size: 16pt; } div.ats-messagebox-version p { font-size: 67%; } blockquote.ats-flavor-text p { color: var(--ats-bright-gold, khaki); font-size: 90%; margin-right: 33%; } li::marker { color: var(--ats-gold, palegoldenrod); } pre { color: var(--ats-bright-green, gold); } code { color: var(--ats-dark, black); font-weight: 500; } strike { color: var(--ats-gold, palegoldenrod); } u { color: var(--ats-bright-green, lightgreen); } b { color: var(--ats-bright-gold, khaki); } a, a:link, .toctogglelabel { color: var(--ats-bright-blue, deepskyblue); } a:active, a:hover, a:visited:hover, .toctogglelabel:hover { color: var(--ats-bright-blue-brightest, lightblue); text-decoration: underline; } a:visited { color: var(--ats-bright-blue-dim, dodgerblue); } /* This needs 2 ids and at least 3 types specificity to win over the broadly defined filter. */ #mw-content #toc ul a :not(img) { color: var(--ats-bright-blue, deepskyblue); filter: none; } a.new { color: var(--ats-bright-red, red); } a.external, a.external:link { color: var(--ats-bright-green, lightgreen); } a.external:active, a.external:hover, a.external:visited:hover { color: var(--ats-bright-green-highlight, palegreen); text-decoration: underline; } a.external:visited { color: var(--ats-bright-green-dim, lawngreen); } /* Layout and spacing */ div.ats-infobox { clear: both; float: right; margin: 2em -2em 3em 2em; max-width: 320px; } div.ats-infobox-header { margin-bottom: 1.5em; padding: 0.5em; padding-bottom: 0.75em; text-align: center; } div.ats-infobox-header img { width: 200px; } div.ats-infobox-header p { margin: auto; margin-bottom: 6pt; } table.ats-infobox-innerinfo { margin: 2.3em 1.3em 2.3em 1.3em; } div.ats-infobox th { text-align: left; padding-right: 0.5em; } .ats-infobox-separator { margin: auto; } div.ats-messagebox-version { margin-left: 45%; } div.ats-messagebox-version p { margin: 0; } div.ats-messagebox-stub { margin-left: auto; margin-right: auto; max-width: 67%; } table.ats-table-recipe { margin-top: 8px; } table.ats-table-recipe caption { margin-top: -2px; margin-bottom: 2px; white-space: nowrap; } table.ats-table-recipe th { margin-top: 8px; padding-top: 6px; } div.ats-product-icon { display: inline; } td:has(> div.ats-product-icon) { padding-left: 10px; white-space: nowrap; } td:has(> div.ats-building-icon) { padding-right: 10px; } ul#filetoc { background-color: var(--ats-dark, black); border: 1px solid var(--ats-brown); } div.mw-message-box-warning { background-color: var(--ats-gold, deepskyblue); border: 1px solid var(--ats-brown); } div.mw-message-box-warning p, div.mw-message-box-warning .mw-continue-editing a { color: var(--ats-dark, black); } /*************************/ /** DARK MODE VERSION 2 **/ /*************************/ /*OVERRIDES*/ .nowrap { white-space: nowrap; } .error { color: var(--ats-color-red-toolbar); font-family: var(--ats-font-monospace), sans-serif; font-size: initial; font-weight: initial; } /*INFOBOX*/ /* Infoboxes are intended to be unique on a page, so these can be selected mostly with IDs. */ div#ats-infobox { clear: right; float: right; margin: 2em -2em 3em 2em; /* This pushes the styled infobox into the regular page margin so it sits right up against the edge of the content, like in the game */ padding: 5px 6px 5px 5px; } div#ats-infobox > div { margin-bottom: 14px; padding: 8px 20px 10px 20px; } div#ats-infobox-header { text-align: center; } div#ats-infobox-header > p { font-family: var(--ats-heading), serif; margin: auto; max-width: 85%; } div#ats-infobox-header > p#ats-infobox-header-title { font-size: 14pt; font-variant: small-caps; letter-spacing: 1.5pt; margin-bottom: 0; } div#ats-infobox-header > p#ats-infobox-header-subtitle { color: var(--ats-yellow, gold); font-size: 10pt; letter-spacing: 0.4pt; margin-bottom: 14px; text-transform: uppercase; } div#ats-infobox-header > p#ats-infobox-header-description { margin-bottom: 20px; max-width: 300px; /* Don't let the description push the width out any more than this. */ } div#ats-infobox-header > p#ats-infobox-header-specialization { margin-bottom: 10px; min-width: 260px; /* Need 256 to fit meat production spec on one line. */ } div#ats-infobox-header > div#ats-infobox-header-icon-container { display: inline-block; } div#ats-infobox > div#ats-infobox-workplaces { padding: 0; } div#ats-infobox-workplaces > p { margin: 0; text-align: center; } div.ats-infobox-section { margin-left: 10px; margin-right: 10px; } div.ats-infobox-section > ul { margin: 8px 0 0 0; } div.ats-infobox-section > ul > li { list-style-type: none; margin-bottom: 2px; } div.ats-infobox-section > ul > li > a > img { border: 0 solid transparent; /* This is a special situation where we want to override the list view, so put the border here, not apply the border class. */ border-image-source: url('/wiki/images/mbhh_ats/0/06/FRAME_Tex_Square_Big_1.png'); border-image-slice: 7; border-image-width: auto; border-image-outset: 2px; border-width: 5px; vertical-align: middle; width: 30px; } p#ats-infobox-id { font-family: var(--ats-heading), serif; font-size: 9.5pt; margin-bottom: 0; text-align: center; } /*BORDERS*/ /* Border art MUST be implemented with only border properties, like border-width. No margins or padding can be specified here. */ div.ats-infobox-border { border: 0 solid transparent; border-image-source: url('/wiki/images/mbhh_ats/c/c3/Popup_RightPanel_BG.png'); border-image-slice: 27 0 65 59; border-image-outset: 4px 0px 14px 9px; border-image-width: auto; border-width: 20px 0px 48px 19px; } .ats-thin-border { border: 0 solid transparent; border-image-source: url('/wiki/images/mbhh_ats/4/41/Popup_Seperation0.png'); border-image-slice: 7; border-image-outset: 4px; border-image-width: auto; border-width: 3px; } .ats-thin-border-bright { border: 0 solid transparent; border-image-source: url('/wiki/images/mbhh_ats/0/06/FRAME_Tex_Square_Big_1.png'); border-image-slice: 7; border-image-width: auto; border-image-outset: 2px; border-width: 5px; } div.ats-double-border-with-header { border: 0 solid transparent; border-image-source: url('/wiki/images/mbhh_ats/d/d6/Popup_SeperationBGPattern2.png'); border-image-slice: 36 46 15 46 fill; border-image-outset: 3px 9px 9px 9px; border-image-width: auto; border-width: 32px 5px 5px 5px; } div.ats-double-border-with-header > p.ats-double-border-with-header-title { font-family: var(--ats-heading), serif; font-variant: small-caps; margin: 0; position: relative; height: 0px; top: -38px; text-align: center; } .ats-circle-border-thick { border: 0 solid transparent; border-image-source: url('/wiki/images/mbhh_ats/d/db/FRAME_Circle_Thick3.png'); border-image-slice: 45; border-image-width: auto; border-image-outset: 0px; border-width: 6px; } .ats-cutout-border { border: 0 solid transparent; border-image-source: url('/wiki/images/mbhh_ats/d/d9/Popup_Seperation1.png'); border-image-slice: 23 23 8 23 fill; border-image-outset: 3px; border-image-width: auto; border-width: 3px; } .ats-link-species a > img { border-radius: 50px; border: 0px solid transparent; border-image-source: url('/wiki/images/mbhh_ats/f/f7/FRAME_Circle_84x84_RaceHud.png'); border-image-width: auto; border-image-slice: 45; border-image-outset: 1px; border-width: 3px; } /*BACKGROUNDS*/ .ats-semitransparent-background { background-color: rgba(0, 0, 0, 0.5); } .ats-green-leather-background { background: radial-gradient(circle, rgba(0,0,0,0.2),rgba(0,0,0,0.8)), url('/wiki/images/mbhh_ats/2/2b/BG_Green_03.png'), black; } } /* end dark-mode */