MediaWiki:Common.css
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.
html { --table-header-background: #eaecf0; --table-border: #a2a9b1; --table-background-color: #f8f9fa; --code-background-color: #f8f9fa; --code-border: #eaecf0; --default-text-color: #000000; --infobox-out-background: #c6c6c6; --tooltip-background: rgba(0,0,0,0.7529411765); } html.client-darkmode { --table-header-background: #444444; --table-background-color: #222226; --code-background-color: #000011; --code-border: #222222; --default-text-color: #dddddd; --infobox-out-background: #222226; } @font-face { font-family: 'Minecraft'; src: url('https://static.miraheze.org/btawiki/1/1a/Minecraft.woff') format('woff'); font-weight: normal; font-style: normal; font-display: fallback; } @font-face { font-family: 'Minecraft'; src: url('https://static.miraheze.org/btawiki/7/7f/Minecraft-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: fallback; } .vector-menu-portal .vector-menu-content li a:visited { color: #69bad9; } .vector-menu-portal .vector-menu-content li a { color: #aa69cf; } .nowrap { white-space: nowrap; } .no-external-icon a.external { background-image: none !important; padding-right: 0 !important; } /* Collapsible table button restyle */ .mw-collapsible-toggle { margin-left: 0.8em; } .mw-collapsible-text::before { content: "hide"; display: inline; font-size: 14px; } .mw-collapsible-toggle-collapsed .mw-collapsible-text::before { content: 'show'; } .mw-collapsible-text { font-size: 0; } /* Module:Sprite p.doc() */ .spritedoc-ul { list-style-type: none; display: flex; align-items: stretch; flex-wrap: wrap; margin: 0 !important; padding: 0 !important; } .spritedoc-cell { display: flex; align-items: center; border: 1px solid var(--table-border); background-color: var(--table-background-color); padding: 5px; width: 14em; margin: 0 0 -1px -1px; } .spritedoc-image { margin-right: 5px; } .spritedoc-names { margin: 0 !important; } .spritedoc-name { display: block; } /* Adds "BTA WIKI" overlay on wiki icon */ /*.mw-wiki-logo::before { content: ''; width: 160px; height: 160px; background-image: url(https://static.miraheze.org/btawiki/c/c6/BTA_wiki_icon_overlay.png); background-position: center center; background-repeat: no-repeat; display: inline-block; position: absolute; image-rendering: pixelated; }*/ #mw-page-base { background-color: #c0d8ff; background-image: url(https://static.miraheze.org/btawiki/6/6d/Wiki-bg-top.png); background-repeat: repeat-x; background-size: 512px; background-position: bottom left; } .client-darkmode #mw-page-base { background-image: url(https://static.miraheze.org/btawiki/d/d0/Wiki-bg-top-dark-mode.png); } body, html { background-image: url(https://static.miraheze.org/btawiki/b/b9/Wiki-bg-bottom.png); background-size: 32px !important; background-position: top left !important; } .client-darkmode, .client-darkmode img, .client-darkmode video, .client-darkmode svg, .client-darkmode iframe, .client-darkmode .mw-no-invert, .client-darkmode td .diffchange, .client-darkmode .wvui-typeahead-suggestion__thumbnail, .client-darkmode .skin-minerva .mw-notification-visible .mw-notification-content, .client-darkmode .cdx-menu-item__thumbnail, .client-darkmode .cx-slitem__image, .client-darkmode .mwe-math-element, .client-darkmode .mw-mmv-overlay, .client-darkmode .mw-mmv-pre-image, .client-darkmode .mw-kartographer-map, .client-darkmode .mw-kartographer-mapDialog-map, .client-darkmode .ext-related-articles-card-list .ext-related-articles-card-thumb { filter: none; } .client-darkmode body, .client-darkmode html, html.client-darkmode, body.client-darkmode { background-image: url(https://static.miraheze.org/btawiki/0/00/Wiki-bg-bottom-dark-mode.png) !important; } .client-darkmode #content, .client-darkmode #content h1, .client-darkmode #content h2, .client-darkmode #content h3, .client-darkmode #content h4, .client-darkmode #content h5, .client-darkmode #content h6 { background-color: #111116; color: var(--default-text-color); } .client-darkmode #content #mw-toc-heading { background: none; } .client-darkmode .documentation, .client-darkmode .documentation h2 { color: #000; } .client-darkmode .documentation h2 { color: #000 !important; background-color: transparent !important; } .catlinks { background-color: var(--table-background-color); } /* ignore the errors, this code is perfectly valid and compatible with most modern browsers */ pre:not(.documentation pre), code:not(.documentation code), .mw-code:not(.documentation .mw-code), table code { background-color: var(--code-background-color); color: var(--default-text-color); border: 1px solid var(--code-border); } table, table.ambox-content, table.toccolours, .mw-notification, .mwe-popups, .infobox, .toc, .thumbinner, .wikitable, .cbnnr-main, .cx-callout, #simpleSearch, #searchInput, #centralNotice .cnotice { background-color: var(--table-background-color) !important; } .client-darkmode #searchInput, .client-darkmode .wikitable, .client-darkmode .mw-footer li { color: #ddd; } .wikitable > tr > th, .wikitable > * > tr > th { background-color: var(--table-header-background); border: 1px solid var(--table-border); } .client-darkmode .wikitable { color: #ddd; } .client-darkmode .tocnumber { color: #aaa; } .pixelated { -ms-interpolation-mode: nearest-neighbor; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated; } .sprite { display: inline-block; } .sprite img { width: 100% !important; height: 100% !important; } /* Inventories (currently only Template:Crafting) */ .crafting-table-ui { padding: 6px; border-image-slice: 3 3 3 3; border-image-width: 6px 6px 6px 6px; border-image-outset: 0 0 0 0; border-image-repeat: stretch stretch; border-image-source: url(https://static.miraheze.org/btawiki/0/00/BTA_Border.png); border-style: solid; image-rendering: pixelated; image-rendering: crisp-edges; background-color: #c6c6c6; display: inline-flex; align-items: center; position: relative; } /* Infoboxes */ .infobox { padding: 8px; min-width: 200px; max-width: 300px; text-align: center; box-sizing: border-box; } .infobox p { margin: 0 !important; } .infobox.out { border-image-slice: 3 3 3 3; border-image-width: 6px 6px 6px 6px; border-image-outset: 0 0 0 0; border-image-repeat: stretch stretch; border-image-source: url("https://static.miraheze.org/btawiki/0/00/BTA_Border.png"); border-style: solid; image-rendering: pixelated; image-rendering: crisp-edges; background-color: var(--infobox-out-background) !important; } .client-darkmode .infobox.out { border-image-source: url("https://static.miraheze.org/btawiki/a/a6/BTA_Border-dark-mode.png"); } .infobox.in { border-left: 2px solid black; border-right: 2px solid black; background-color: #555555 !important; } .infobox-table { margin-top: 6px; width: 100%; text-align: left; background-color: transparent !important; } .infobox-table td, .infobox-table th { padding-left: 6px; padding-right: 6px; } /* Inventory slot ({{Inventory slot}} template) */ .inventory-slot { position: relative; border-top: 2px solid #373737; border-left: 2px solid #373737; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; background-color: #8b8b8b; display: inline-flex; align-items: center; justify-content: center; } .inventory-slot::before, .inventory-slot::after { content: ''; position: absolute; width: 2px; height: 2px; background-color: #8b8b8b; } .inventory-slot::before { bottom: -2px; left: -2px; } .inventory-slot::after { top: -2px; right: -2px; } /* Splash */ .splash-text { font-family: 'Minecraft', sans-serif; word-spacing: 0.375em; font-size: 35px; color: #ffff00; text-shadow: 0.125em 0.125em 0 #7f7f00; position: absolute; display: inline-block; transform-origin: center center; left: 100%; top: 100%; animation: splash 0.5s linear infinite !important; white-space: nowrap; } /* Avoid Discord splash receiving link styling */ .splash-text a.external { background-image: none !important; padding-right: 0; color: #ffff00; } /* Message boxes */ .msgbox { width: 70%; padding: 5px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 10px; } .msgbox.important, .msgbox.warning, .msgbox.info { background-color: #fff; } .msgbox.important { background-color: rgba(255, 40, 40, 0.6); border: 1px solid rgb(255, 0, 0); border-left: 4px solid rgb(255, 0, 0); } .msgbox.warning { background-color: rgba(255, 255, 80, 0.6); border: 1px solid rgb(200, 160, 0); border-left: 4px solid rgb(200, 160, 0); } .msgbox.info { background-color: rgba(80, 150, 255, 0.4); border: 1px solid rgb(100, 100, 160); border-left: 4px solid rgb(100, 100, 160); } /* Minecraft tooltips */ .shadow-line { color: #3f3f3f; } .minecraft-tip br + br { display: grid; content: ""; margin-top: 1.5em; } .minecraft-tip br:not(.minecraft-tip br + br) { display: block; content: ""; margin-top: 0.25em; } .shadow-line .c-0 { color: #3f3f3f; } .shadow-line .c-1 { color: #3f2a00; } .shadow-line .c-2 { color: #3f0928; } .shadow-line .c-3 { color: #17343f; } .shadow-line .c-4 { color: #3f3c14; } .shadow-line .c-5 { color: #193a04; } .shadow-line .c-6 { color: #3f1f3b; } .shadow-line .c-6-bedrock { color: #402a00; } .shadow-line .c-7 { color: #1b1b1b; } .shadow-line .c-8 { color: #2c2c2c; } .shadow-line .c-9 { color: #02282b; } .shadow-line .c-a { color: #1e093f; } .shadow-line .c-b { color: #03133f; } .shadow-line .c-c { color: #231409; } .shadow-line .c-d { color: #092005; } .shadow-line .c-e { color: #3a0808; } .shadow-line .c-f { color: #0c0c0c; } .shadow-line .c-g { color: #373501; } .c-l { font-weight: bold; } .c-o { font-style: italic; } .c-0 { color: #ffffff; } .c-1 { color: #ffaa00; } .c-2 { color: #fc26a3; } .c-3 { color: #5ed2ff; } .c-4 { color: #fff152; } .c-5 { color: #65ea13; } .c-6 { color: #ff7fec; } .c-6-bedrock { color: #ffaa00; } .c-7 { color: #6e6e6e; } .c-8 { color: #b3b3b3; } .c-9 { color: #09a0ae; } .c-a { color: #7824ff; } .c-b { color: #0d4dff; } .c-c { color: #8f5224; } .c-d { color: #268217; } .c-e { color: #e82020; } .c-f { color: #303030; } .c-g { color: #ddd605; } .shadow.c-0 { text-shadow: 0.125em 0.125em 0 #3f3f3f; } .shadow.c-1 { text-shadow: 0.125em 0.125em 0 #3f2a00; } .shadow.c-2 { text-shadow: 0.125em 0.125em 0 #3f0928; } .shadow.c-3 { text-shadow: 0.125em 0.125em 0 #17343f; } .shadow.c-4 { text-shadow: 0.125em 0.125em 0 #3f3c14; } .shadow.c-5 { text-shadow: 0.125em 0.125em 0 #193a04; } .shadow.c-6 { text-shadow: 0.125em 0.125em 0 #3f1f3b; } .shadow.c-6-bedrock { text-shadow: 0.125em 0.125em 0 #402a00; } .shadow.c-7 { text-shadow: 0.125em 0.125em 0 #1b1b1b; } .shadow.c-8 { text-shadow: 0.125em 0.125em 0 #2c2c2c; } .shadow.c-9 { text-shadow: 0.125em 0.125em 0 #02282b; } .shadow.c-a { text-shadow: 0.125em 0.125em 0 #1e093f; } .shadow.c-b { text-shadow: 0.125em 0.125em 0 #03133f; } .shadow.c-c { text-shadow: 0.125em 0.125em 0 #231409; } .shadow.c-d { text-shadow: 0.125em 0.125em 0 #092005; } .shadow.c-e { text-shadow: 0.125em 0.125em 0 #3a0808; } .shadow.c-f { text-shadow: 0.125em 0.125em 0 #0c0c0c; } .shadow.c-g { text-shadow: 0.125em 0.125em 0 #373501; } .c-m { position: relative; } .c-m:after { content: ''; display: block; width: calc(100% + 0.125em); height: 0; margin-top: 0.925em; position: absolute; top: 0; left: -0.125em; border-bottom: 0.125em solid; z-index: 1; } .shadow-line .c-m:after { width: calc(100% + 0.125em); top: 0; left: -0.125em; border-bottom: 0.125em solid; } .c-m .c-0:after, .c-m .c-1:after, .c-m .c-2:after, .c-m .c-3:after, .c-m .c-4:after, .c-m .c-5:after, .c-m .c-6:after, .c-m .c-7:after, .c-m .c-8:after, .c-m .c-9:after, .c-m .c-a:after, .c-m .c-b:after, .c-m .c-c:after, .c-m .c-d:after, .c-m .c-e:after, .c-m .c-f:after, .c-m .c-g:after, .c-m .c-6-bedrock:after { content: ''; display: block; width: calc(100% + 0.125em); height: 0; margin-top: 0.925em; position: absolute; top: 0; left: -0.125em; border-bottom: 0.125em solid; z-index: 2; } .c-n { position: relative; text-decoration: underline 0.125em; text-underline-offset: 0.125em; } .c-n .c-0, .c-n .c-1, .c-n .c-2, .c-n .c-3, .c-n .c-4, .c-n .c-5, .c-n .c-6, .c-n .c-7, .c-n .c-8, .c-n .c-9, .c-n .c-a, .c-n .c-b, .c-n .c-c, .c-n .c-d, .c-n .c-e, .c-n .c-f, .c-n .c-g, .c-n .c-h { text-decoration: underline 0.125em; } .c-0, .c-1, .c-2, .c-3, .c-4, .c-5, .c-6, .c-7, .c-8, .c-9, .c-a, .c-b, .c-c, .c-d, .c-e, .c-f, .c-g, .c-h { position: relative; font-family: Minecraft; font-size: 16px; word-spacing: 0.375em; } .minecraft-tip { left: 0; top: 0; border: 0.125em solid transparent; background-color: #000000; background-color: var(--tooltip-background); font-family: Minecraft,"WenQuanYi Bitmap Song",SimSun,Unifont,NISC18030,Beijing,Courier,sans-serif; word-spacing: 0.375em; margin: 0.125em 0.125em; padding: 0 0.25em 0.375em 0.25em; line-height: 1.125em; white-space: nowrap; font-size: 16px; text-align: left; font-smooth: never; -webkit-font-smoothing: none; position: fixed; z-index: 9999; display: none; color: #ffffff; pointer-events: none; } .minecraft-tip::before { content: ''; position: absolute; top: -0.125em; right: -0.250em; bottom: -0.125em; left: -0.250em; } .minecraft-tip::after { content: ''; position: absolute; top: -0.250em; right: -0.125em; bottom: -0.250em; left: -0.125em; } .shadow-line { z-index: -1; } .text-line, .shadow-line { filter: url(#crispify); } .c-m .shadow, .c-n .shadow-line { top: 0.375em; } .k-manager { display: none; } .text-line { position: relative; display: inline-block; } .shadow-line { position: absolute; display: inline-block; top: 0.125em; left: 0.375em; } .no-break-space { display: inline-block; width: 0.75em; } /* Keyframes */ @keyframes splash { 0% { transform: translate(-50%, -50%) scale(1.1) rotateZ(-20deg); } 10% { transform: translate(-50%, -50%) scale(1.0690983005625) rotateZ(-20deg); } 20% { transform: translate(-50%, -50%) scale(1.0412214747708) rotateZ(-20deg); } 30% { transform: translate(-50%, -50%) scale(1.0190983005625) rotateZ(-20deg); } 40% { transform: translate(-50%, -50%) scale(1.0048943483705) rotateZ(-20deg); } 50% { transform: translate(-50%, -50%) scale(1) rotateZ(-20deg); } 60% { transform: translate(-50%, -50%) scale(1.0048943483705) rotateZ(-20deg); } 70% { transform: translate(-50%, -50%) scale(1.0190983005625) rotateZ(-20deg); } 80% { transform: translate(-50%, -50%) scale(1.0412214747708) rotateZ(-20deg); } 90% { transform: translate(-50%, -50%) scale(1.0690983005625) rotateZ(-20deg); } 100% { transform: translate(-50%, -50%) scale(1.1) rotateZ(-20deg); } } /* Main page */ .page-Main_Page .firstHeading { display: none; } .main-page-logo { background-color: rgb(30,100,200); background-color: rgba(80,150,255,0.4); border: 1px solid rgb(100,100,160); padding: 40px 15px; display: flex; align-items: center; flex-direction: column; flex-wrap: wrap; gap: 15px; background-image: url(https://static.miraheze.org/btawiki/f/f5/BetterTownscreenshot1.png); background-attachment: fixed; background-size: 100vw; background-size: 100svw; } .main-page-block { position: relative; border: 1px solid var(--table-border); padding: 5px; padding-top: 40px; } .main-page-blocks { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; grid-template-areas: 'a a d' 'b b d' 'c c e'; } .main-page-block-title { position: absolute; top: 0; left: 0; width: 100%; height: 30px; background-image: linear-gradient(rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.6)), url(https://static.miraheze.org/btawiki/f/f5/BetterTownscreenshot1.png); background-attachment: fixed; image-rendering: pixelated; box-shadow: rgb(0 0 0 / 10%) 0 0.25em; display: flex; align-items: center; padding-left: 10px; box-sizing: border-box; background-size: 100vw; background-size: 100svw; } @media only screen and (max-width: 900px) { .main-page-blocks { grid-template-rows: repeat(3, 1fr); grid-template-areas: 'a a a' 'b b b' 'c c c' 'd d d' 'e e e'; } }