Anonymous user
MediaWiki:Common.css: Difference between revisions
m
oops
imported>Ttv pedro270707 m (Removed variable) |
imported>Ttv pedro270707 m (oops) |
||
(220 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
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-face { | ||
font-family: 'Minecraft'; | font-family: 'Minecraft'; | ||
Line 17: | Line 37: | ||
} | } | ||
.vector-menu-portal .vector-menu-content li a:visited { | |||
background-image: | 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; | 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; | |||
} | } | ||
.main- | .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; | |||
} | } | ||
Line 59: | Line 210: | ||
width: 100% !important; | width: 100% !important; | ||
height: 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; | |||
} | } | ||
Line 68: | Line 314: | ||
color: #ffff00; | color: #ffff00; | ||
text-shadow: 0.125em 0.125em 0 #7f7f00; | text-shadow: 0.125em 0.125em 0 #7f7f00; | ||
position: | position: absolute; | ||
display: inline-block; | display: inline-block; | ||
transform-origin: center center; | transform-origin: center center; | ||
left: | left: 100%; | ||
top: | top: 100%; | ||
animation: splash 0.5s linear infinite; | 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 */ | /* Message boxes */ | ||
.msgbox { | .msgbox { | ||
width: | width: 70%; | ||
padding: 5px; | padding: 5px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
display: inline- | display: inline-flex; | ||
align-items: center; | |||
gap: 10px; | |||
} | } | ||
Line 111: | Line 367: | ||
} | } | ||
. | .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 { | .shadow-line .c-0 { | ||
color: # | color: #3f3f3f; | ||
} | } | ||
.shadow-line .c-1 { | .shadow-line .c-1 { | ||
color: # | color: #3f2a00; | ||
} | } | ||
.shadow-line .c-2 { | .shadow-line .c-2 { | ||
color: # | color: #3f0928; | ||
} | } | ||
.shadow-line .c-3 { | .shadow-line .c-3 { | ||
color: # | color: #17343f; | ||
} | } | ||
.shadow-line .c-4 { | .shadow-line .c-4 { | ||
color: # | color: #3f3c14; | ||
} | } | ||
.shadow-line .c-5 { | .shadow-line .c-5 { | ||
color: # | color: #193a04; | ||
} | } | ||
.shadow-line .c-6 { | .shadow-line .c-6 { | ||
color: # | color: #3f1f3b; | ||
} | } | ||
Line 156: | Line 412: | ||
.shadow-line .c-7 { | .shadow-line .c-7 { | ||
color: # | color: #1b1b1b; | ||
} | } | ||
.shadow-line .c-8 { | .shadow-line .c-8 { | ||
color: # | color: #2c2c2c; | ||
} | } | ||
.shadow-line .c-9 { | .shadow-line .c-9 { | ||
color: # | color: #02282b; | ||
} | } | ||
.shadow-line .c-a { | .shadow-line .c-a { | ||
color: # | color: #1e093f; | ||
} | } | ||
.shadow-line .c-b { | .shadow-line .c-b { | ||
color: # | color: #03133f; | ||
} | } | ||
.shadow-line .c-c { | .shadow-line .c-c { | ||
color: # | color: #231409; | ||
} | } | ||
.shadow-line .c-d { | .shadow-line .c-d { | ||
color: # | color: #092005; | ||
} | } | ||
.shadow-line .c-e { | .shadow-line .c-e { | ||
color: # | color: #3a0808; | ||
} | } | ||
.shadow-line .c-f { | .shadow-line .c-f { | ||
color: # | color: #0c0c0c; | ||
} | } | ||
Line 204: | Line 460: | ||
.c-0 { | .c-0 { | ||
color: # | color: #ffffff; | ||
} | } | ||
.c-1 { | .c-1 { | ||
color: # | color: #ffaa00; | ||
} | } | ||
.c-2 { | .c-2 { | ||
color: # | color: #fc26a3; | ||
} | } | ||
.c-3 { | .c-3 { | ||
color: # | color: #5ed2ff; | ||
} | } | ||
.c-4 { | .c-4 { | ||
color: # | color: #fff152; | ||
} | } | ||
.c-5 { | .c-5 { | ||
color: # | color: #65ea13; | ||
} | } | ||
.c-6 { | .c-6 { | ||
color: # | color: #ff7fec; | ||
} | } | ||
Line 236: | Line 492: | ||
.c-7 { | .c-7 { | ||
color: # | color: #6e6e6e; | ||
} | } | ||
.c-8 { | .c-8 { | ||
color: # | color: #b3b3b3; | ||
} | } | ||
.c-9 { | .c-9 { | ||
color: # | color: #09a0ae; | ||
} | } | ||
.c-a { | .c-a { | ||
color: # | color: #7824ff; | ||
} | } | ||
.c-b { | .c-b { | ||
color: # | color: #0d4dff; | ||
} | } | ||
.c-c { | .c-c { | ||
color: # | color: #8f5224; | ||
} | } | ||
.c-d { | .c-d { | ||
color: # | color: #268217; | ||
} | } | ||
.c-e { | .c-e { | ||
color: # | color: #e82020; | ||
} | } | ||
.c-f { | .c-f { | ||
color: # | color: #303030; | ||
} | } | ||
.c-g { | .c-g { | ||
color: #ddd605; | 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; | |||
} | } | ||
Line 318: | Line 646: | ||
} | } | ||
.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 { | .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; | text-decoration: underline 0.125em; | ||
} | } | ||
.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 { | .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; | position: relative; | ||
font-family: Minecraft; | font-family: Minecraft; | ||
font-size: 16px; | font-size: 16px; | ||
word-spacing: 0.375em; | |||
} | } | ||
Line 332: | Line 661: | ||
top: 0; | top: 0; | ||
border: 0.125em solid transparent; | border: 0.125em solid transparent; | ||
background-color: # | background-color: #000000; | ||
background-color: | background-color: var(--tooltip-background); | ||
font-family: Minecraft,"WenQuanYi Bitmap Song",SimSun,Unifont,NISC18030,Beijing,Courier,sans-serif; | font-family: Minecraft,"WenQuanYi Bitmap Song",SimSun,Unifont,NISC18030,Beijing,Courier,sans-serif; | ||
word-spacing: 0. | word-spacing: 0.375em; | ||
margin: 0.125em 0.125em; | margin: 0.125em 0.125em; | ||
padding: 0 0. | padding: 0 0.25em 0.375em 0.25em; | ||
line-height: 1.125em; | line-height: 1.125em; | ||
white-space: nowrap; | white-space: nowrap; | ||
Line 348: | Line 677: | ||
display: none; | display: none; | ||
color: #ffffff; | color: #ffffff; | ||
pointer-events: none; | |||
} | } | ||
Line 369: | Line 699: | ||
.shadow-line { | .shadow-line { | ||
z-index: -1; | z-index: -1; | ||
} | } | ||
Line 396: | Line 723: | ||
display: inline-block; | display: inline-block; | ||
top: 0.125em; | top: 0.125em; | ||
left: 0. | left: 0.375em; | ||
} | } | ||
Line 407: | Line 734: | ||
@keyframes splash { | @keyframes splash { | ||
0% { | 0% { | ||
transform: scale(1.1) rotateZ(-20deg); | transform: translate(-50%, -50%) scale(1.1) rotateZ(-20deg); | ||
} | } | ||
10% { | 10% { | ||
transform: scale(1.0690983005625) rotateZ(-20deg); | transform: translate(-50%, -50%) scale(1.0690983005625) rotateZ(-20deg); | ||
} | } | ||
20% { | 20% { | ||
transform: scale(1.0412214747708) rotateZ(-20deg); | transform: translate(-50%, -50%) scale(1.0412214747708) rotateZ(-20deg); | ||
} | } | ||
30% { | 30% { | ||
transform: scale(1.0190983005625) rotateZ(-20deg); | transform: translate(-50%, -50%) scale(1.0190983005625) rotateZ(-20deg); | ||
} | } | ||
40% { | 40% { | ||
transform: scale(1.0048943483705) rotateZ(-20deg); | transform: translate(-50%, -50%) scale(1.0048943483705) rotateZ(-20deg); | ||
} | } | ||
50% { | 50% { | ||
transform: scale(1) rotateZ(-20deg); | transform: translate(-50%, -50%) scale(1) rotateZ(-20deg); | ||
} | } | ||
60% { | 60% { | ||
transform: scale(1.0048943483705) rotateZ(-20deg); | transform: translate(-50%, -50%) scale(1.0048943483705) rotateZ(-20deg); | ||
} | } | ||
70% { | 70% { | ||
transform: scale(1.0190983005625) rotateZ(-20deg); | transform: translate(-50%, -50%) scale(1.0190983005625) rotateZ(-20deg); | ||
} | } | ||
80% { | 80% { | ||
transform: scale(1.0412214747708) rotateZ(-20deg); | transform: translate(-50%, -50%) scale(1.0412214747708) rotateZ(-20deg); | ||
} | } | ||
90% { | 90% { | ||
transform: scale(1.0690983005625) rotateZ(-20deg); | transform: translate(-50%, -50%) scale(1.0690983005625) rotateZ(-20deg); | ||
} | } | ||
100% { | 100% { | ||
transform: scale(1.1) rotateZ(-20deg); | 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'; | |||
} | } | ||
} | } |