MediaWiki:Custom-common.less/minecraft.less

/* // Inventory slot (Module:Inventory slot) // Taken from corresponding template of same name on minecraft.gamepedia.com // and modified for use on this wiki .mw-parser-output .invslot { position: relative; display: inline-block; background: #8B8B8B no-repeat center center / 32px 32px; border: 2px solid; border-color: #373737 #FFF #FFF #373737; width: 32px; height: 32px; font-size: 16px; line-height: 1; text-align: left; vertical-align: bottom; box-sizing: content-box; } .mw-parser-output .invslot-item, .mw-parser-output .invslot-item > a:first-child:not(.invslot-hover-overlay) { position: relative; display: block; width: 32px; height: 32px; top: -2px; left: -2px; padding: 2px; } .mw-parser-output .invslot-stacksize { position: absolute; margin-right: 2px; margin-bottom: 2px; right: 0; bottom: 0; font-family: minecraft, unifontm, unifont, Rubik, serif, sans-serif; font-weight: normal; font-size: 16px; text-align: right; color: #FFF; text-shadow: 1.5px 1.5px 0 #3F3F3F; filter: dropshadow(color=#3F3F3F, offx=2, offy=2); z-index: 2; } .mw-parser-output .invslot-hover-overlay { display: block; position: absolute; margin: 2px; background-color: transparent; top: 0; left: 0; height: 32px; width: 32px; cursor: default; z-index: 3; } .mw-parser-output .invslot-item:hover .invslot-hover-overlay { background-color: rgba(255, 255, 255, 0.5); } .invslot a[href] ~ .invslot-hover-overlay, .invslot[class*="goto-"] .invslot-hover-overlay { cursor: pointer; } .slot-image-follow { position: absolute; z-index: 5; } .mw-parser-output .invslot-large { padding: 8px; } .mw-parser-output .invslot-item-image > a.new:first-child { background: url(https://vignette.wikia.nocookie.net/hypixel-skyblock/images/3/30/Question.png/revision/latest/scale-to-width-down/24?cb=20190928151533) no-repeat center; width: 32px; height: 32px; text-indent: -9999px; overflow: hidden; }

/* // MC Interfaces (Generic) .mcui { display: inline-block; position: relative; background-color: #C6C6C6; border: 2px solid; border-color: #DBDBDB #5B5B5B #5B5B5B #DBDBDB; border-radius: 3px; margin: 12px 0; padding: 6px; width: fit-content; text-align: left; white-space: nowrap; vertical-align: bottom; } .mcui-centered { display: table; margin-left: auto; margin-right: auto; } .mcui-header { font-family: minecraft, unifontm, unifont, Rubik, serif, sans-serif; font-size: 14px; position: absolute; margin-top: -8px; color: #2B2D2F; letter-spacing: .2px; } .mcui-header + .mcui-row { margin-top: 24px; } .mcui-returnbutton { position: absolute; top: -2px; right: 20px; font-size: 22px; color: #B84000; cursor: pointer; transition: color 0.2s ease, transform 0.5s ease; } .mcui-returnbutton:hover { color: #e1926b; transform: rotate(20deg); }

/* // MC Interface (Common Features) .mcui-Chest > *, .mcui-Crafting_Table > *, .mcui-Furnace > *, .mcui-Forging_Table > * { display: inline-block; vertical-align: top; } .mcui-Chest .mcui-row, .mcui-Crafting_Table .mcui-row, .mcui-Forging_Table .mcui-row { display: flex; } .mcui-Chest .mcui-row td, .mcui-Crafting_Table .mcui-row td { display: inline-block; border: none; padding: 0 !important; }

/* // MC Interface (Chest)

/* // MC Interface (Crafting Grid) // Taken from minecraft.gamepedia.com .mcui-Crafting_Table > .mcui-arrow { background: url(https://vignette.wikia.nocookie.net/hypixel-skyblock/images/8/86/Grid_layout_Arrow_%28small%29.png) no-repeat; width: 32px; height: 26px; margin: 40px 4px 0; } .mcui-Crafting_Table > .mcui-output { margin-top: 28px; }

/* // MC Interface (Forging Table) .mcui-Forging_Table .mcui-row td { display: inline-block; border: none; padding: 0 !important; margin-top: 6px; } .mcui-Forging_Table > .mcui-arrow { background: url(https://vignette.wikia.nocookie.net/hypixel-skyblock/images/8/86/Grid_layout_Arrow_%28small%29.png) no-repeat; width: 32px; height: 26px; margin: 12px 4px 0; } .mcui-Forging_Table > .mcui-output { margin-top: 0; }

/* // MC Interface (Furnace) // Taken from minecraft.gamepedia.com .mcui-Furnace .mcui-fuel { display: block; background: url(https://vignette.wikia.nocookie.net/hypixel-skyblock/images/d/d8/Grid_layout_Fire.png) no-repeat; width: 36px; height: 36px; } /* .mcui-Furnace .mcui-fuel.mcui-inactive { background-image: url(/media/a/ab/Grid_layout_Fire_%28in-active%29.png); } */ .mcui-Furnace > .mcui-arrow { background: url(https://vignette.wikia.nocookie.net/hypixel-skyblock/images/8/8e/Grid_layout_Furnace_Progress.png) no-repeat; width: 44px; height: 32px; margin: 36px 18px 0 14px; } /* .mcui-Furnace > .mcui-arrow.mcui-inactive { background-image: url(/media/d/dc/Grid_layout_Furnace_Progress_%28in-active%29.png); } */ .mcui-Furnace > .mcui-output { margin-top: 28px; }

/* // MC Interface (Brewing Stand) // Taken from minecraft.gamepedia.com .mcui-Brewing_Stand > * { display: block; } .mcui-Brewing_Stand .invslot { vertical-align: top; } .mcui-Brewing_Stand > .mcui-input { text-align: center; } .mcui-Brewing_Stand > .mcui-input > .invslot { margin-top: 3px; } .mcui-Brewing_Stand .mcui-bubbling, .mcui-Brewing_Stand .mcui-arrow { display: inline-block; background-repeat: no-repeat; width: 24px; height: 57px; } /* .mcui-Brewing_Stand .mcui-bubbling { background-image: url(/media/6/65/Grid_layout_Brewing_Bubbles.gif); } .mcui-Brewing_Stand > .mcui-input.mcui-inactive > .mcui-bubbling { background-image: url(/media/d/db/Grid_layout_Brewing_Bubbles_%28In-active%29.png); } .mcui-Brewing_Stand .mcui-arrow { background-image: url(/media/4/4b/Grid_layout_Brewing_Arrow.png); } .mcui-Brewing_Stand > .mcui-input.mcui-inactive > .mcui-arrow { background-image: url(/media/5/59/Grid_layout_Brewing_Arrow_%28In-active%29.png); } .mcui-Brewing_Stand > .mcui-paths { position: relative; background: url(https://vignette.wikia.nocookie.net/hypixel-skyblock/images/8/82/Grid_layout_Brewing_Paths.png) no-repeat; width: 60px; height: 40px; margin: -20px auto -16px; z-index: 1; } .mcui-Brewing_Stand .mcui-output .invslot { background-image: url(https://vignette.wikia.nocookie.net/hypixel-skyblock/images/5/59/Grid_layout_Brewing_Empty.png); } .mcui-Brewing_Stand .mcui-output2 { margin: 14px 10px 0; }

/* Styling for minecraft style tooltip */ /* Taken from minecraft.gamepedia.com */ position: fixed; top: 0; left: 0; } .minetip-static { position: relative; width: fit-content; }	background-color: #100010; background-color: rgba(16, 0, 16, 0.94); margin: 0.125em 0.25em; padding: 0.375em; font-family: minecraft, unifontm, unifont, Rubik, serif, sans-serif; font-size: 16px; line-height: 1.25em; white-space: pre; pointer-events: none; z-index: 9999; /* white as default */ color: #fff; text-shadow: 0.125em 0.125em #3F3F3F; &::before { content: ""; position: absolute; top: 0.125em; right: -0.125em; bottom: 0.125em; left: -0.125em; border: 0.25em solid #100010; border-style: none solid; border-color: rgba(16, 0, 16, 0.94) }	&::after { content: ""; position: absolute; top: 0.125em; right: 0; bottom: 0.125em; left: 0; border: 0.125em solid #2D0A63; border-image: -webkit-linear-gradient(rgba(80, 0, 255, 0.31), rgba(40, 0, 127, 0.31)) 1; border-image: linear-gradient(rgba(80, 0, 255, 0.31), rgba(40, 0, 127, 0.31)) 1 }	> .description, > .minetip-description { display: block; margin-top: 0.25em } }
 * 1) minetip-tooltip {
 * 1) minetip-tooltip, .minetip-static {

/* Element Animator - used in conjunction with JS to cycle through multiple items */ /* Taken from minecraft.gamepedia.com */ display: none; }	display: inline-block; }	display: block; }
 * 1) mw-content-text .animated>*:not(.animated-active),
 * 2) mw-content-text .animated>.animated-subframe>*:not(.animated-active) {
 * 1) mw-content-text div.animated.animated-visible,
 * 2) mw-content-text span.animated.animated-visible,
 * 3) mw-content-text span.animated.animated-visible>*,
 * 4) mw-content-text span.animated.animated-visible>.animated-subframe>* {
 * 1) mw-content-text div.animated.animated-visible>*,
 * 2) mw-content-text div.animated.animated-visible>.animated-subframe>* {

/* Animator tweaks for this wiki */ position: relative; display: inline-block; overflow-x: auto; .animated-fakeimage { visibility: hidden; position: relative; }	.animated { display: flex; justify-content: center; position: absolute; top: 0; height: 100%; width: 100%; align-items: center; &.animated-visible { display: inline-flex; justify-content: left; left: 0; .pi-image-thumbnail { max-width: none; }		}	} } .mcui.animated-paused::before, .animated-container.animated-paused:before { background: rgba(119, 0, 0, 0.3); content: ""; display: block; position: absolute; margin: 0; top: -2px; left: -2px; right: -2px; bottom: -2px; } .mcui.animated-paused::after, .animated-container.animated-paused:after { content: "animation\A paused"; position: absolute; top: 0; right: 2px; font-family: minecraft, unifontm, unifont, Rubik, serif, sans-serif; font-size: 12px; color: #2B2D2F; text-align: right; white-space: pre; line-height: 12px; letter-spacing: .2px; }
 * 1) mw-content-text .animated-wrapper {

/* Text & Dialogue */ .mcui-text { font-family: minecraft, unifontm, unifont, Rubik, serif, sans-serif; font-size: 14px; /* white as default */ color: #fff; text-shadow: 0.125em 0.125em #3F3F3F; /* Experimental: dialogue background */ padding-top: 0.125em; padding-bottom: 0.125em; .theme-fandomdesktop-light & { background-color: rgba(0, 0, 0, 0.58); } } .mcdialogue { width: fit-content; white-space: pre-wrap; /* Copy of mcui-text styling (except font-size) */ font-family: minecraft, unifontm, unifont, Rubik, serif, sans-serif; font-size: 11px; /* white as default */ color: #fff; text-shadow: 0.125em 0.125em #3F3F3F; /* Experimental: dialogue background */ margin: 0.125em 0.25em; padding: 0.125em 0.5em; .theme-fandomdesktop-light & { background-color: rgba(0, 0, 0, 0.58); } } /* Game font */ .page-content .hsw-gamefont { display: inline; font-family: minecrafts, minecraft, unifontm, unifont, Rubik, serif, sans-serif; &.cram { letter-spacing: -1px; } }

/* Put this at the bottom! Add other things before this! */ /* MC Font color codes */ .format-0, .ace_format-0 { color: #000 !important; text-shadow: 0.125em 0.125em #000000; } .format-0 .format-l, .ace_format-0 .ace_format-l, .format-l .format-0, .ace_format-l .ace_format-0 { text-shadow: 1.6px 0, 1.6px 0.125em #000000, 3.2px 0.125em #000000; } .format-1, .ace_format-1 { color: #00A !important; text-shadow: 0.125em 0.125em #00002A; } .format-1 .format-l, .ace_format-1 .ace_format-l, .format-l .format-1, .ace_format-l .ace_format-1 { text-shadow: 1.6px 0, 1.6px 0.125em #00002A, 3.2px 0.125em #00002A; } .format-2, .ace_format-2 { color: #0A0 !important; text-shadow: 0.125em 0.125em #002A00; } .format-2 .format-l, .ace_format-2 .ace_format-l, .format-l .format-2, .ace_format-l .ace_format-2 { text-shadow: 1.6px 0, 1.6px 0.125em #002A00, 3.2px 0.125em #002A00; } .format-3, .ace_format-3 { color: #0AA !important; text-shadow: 0.125em 0.125em #002A2A; } .format-3 .format-l, .ace_format-3 .ace_format-l, .format-l .format-3, .ace_format-l .ace_format-3 { text-shadow: 1.6px 0, 1.6px 0.125em #002A2A, 3.2px 0.125em #002A2A; } .format-4, .ace_format-4 { color: #A00 !important; text-shadow: 0.125em 0.125em #2A0000; } .format-4 .format-l, .ace_format-4 .ace_format-l, .format-l .format-4, .ace_format-l .ace_format-4 { text-shadow: 1.6px 0, 1.6px 0.125em #2A0000, 3.2px 0.125em #2A0000; } .format-5, .ace_format-5 { color: #A0A !important; text-shadow: 0.125em 0.125em #2A002A; } .format-5 .format-l, .ace_format-5 .ace_format-l, .format-l .format-5, .ace_format-l .ace_format-5 { text-shadow: 1.6px 0, 1.6px 0.125em #2A002A, 3.2px 0.125em #2A002A; } .format-6, .ace_format-6 { color: #FA0 !important; text-shadow: 0.125em 0.125em #2A2A00; } .format-6 .format-l, .ace_format-6 .ace_format-l, .format-l .format-6, .ace_format-l .ace_format-6 { text-shadow: 1.6px 0, 1.6px 0.125em #2A2A00, 3.2px 0.125em #2A2A00; } .format-7, .ace_format-7 { color: #AAA !important; text-shadow: 0.125em 0.125em #2A2A2A; } .format-7 .format-l, .ace_format-7 .ace_format-l, .format-l .format-7, .ace_format-l .ace_format-7 { text-shadow: 1.6px 0, 1.6px 0.125em #2A2A2A, 3.2px 0.125em #2A2A2A; } .format-8, .ace_format-8 { color: #555 !important; text-shadow: 0.125em 0.125em #151515; } .format-8 .format-l, .ace_format-8 .ace_format-l, .format-l .format-8, .ace_format-l .ace_format-8 { text-shadow: 1.6px 0, 1.6px 0.125em #151515, 3.2px 0.125em #151515; } .format-9, .ace_format-9 { color: #55F !important; text-shadow: 0.125em 0.125em #15153F; } .format-9 .format-l, .ace_format-9 .ace_format-l, .format-l .format-9, .ace_format-l .ace_format-9 { text-shadow: 1.6px 0, 1.6px 0.125em #15153F, 3.2px 0.125em #15153F; } .format-a, .ace_format-a { color: #5F5 !important; text-shadow: 0.125em 0.125em #153F15; } .format-a .format-l, .ace_format-a .ace_format-l, .format-l .format-a, .ace_format-l .ace_format-a { text-shadow: 1.6px 0, 1.6px 0.125em #153F15, 3.2px 0.125em #153F15; } .format-b, .ace_format-b { color: #5FF !important; text-shadow: 0.125em 0.125em #153F3F; } .format-b .format-l, .ace_format-b .ace_format-l, .format-l .format-b, .ace_format-l .ace_format-b { text-shadow: 1.6px 0, 1.6px 0.125em #153F3F, 3.2px 0.125em #153F3F; } .format-c, .ace_format-c { color: #F55 !important; text-shadow: 0.125em 0.125em #3F1515; } .format-c .format-l, .ace_format-c .ace_format-l, .format-l .format-c, .ace_format-l .ace_format-c { text-shadow: 1.6px 0, 1.6px 0.125em #3F1515, 3.2px 0.125em #3F1515; } .format-d, .ace_format-d { color: #F5F !important; text-shadow: 0.125em 0.125em #3F153F; } .format-d .format-l, .ace_format-d .ace_format-l, .format-l .format-d, .ace_format-l .ace_format-d { text-shadow: 1.6px 0, 1.6px 0.125em #3F153F, 3.2px 0.125em #3F153F; } .format-e, .ace_format-e { color: #FF5 !important; text-shadow: 0.125em 0.125em #3F3F15; } .format-e .format-l, .ace_format-e .ace_format-l, .format-l .format-e, .ace_format-l .ace_format-e { text-shadow: 1.6px 0, 1.6px 0.125em #3F3F15, 3.2px 0.125em #3F3F15; } .format-f, .ace_format-f { color: #FFF !important; text-shadow: 0.125em 0.125em #3F3F3F; } .format-f .format-l, .ace_format-f .ace_format-l, .format-l .format-f, .ace_format-l .ace_format-f { text-shadow: 1.6px 0, 1.6px 0.125em #3F3F3F, 3.2px 0.125em #3F3F3F; } .format-l, .ace_format-l { letter-spacing: 1.6px; } .format-m, .ace_format-m { text-decoration: line-through; } .format-n, .ace_format-n { text-decoration: underline; } .format-o, .ace_format-o { font-style: italic; } /* Don't add things below! Add them above! */