MediaWiki:Vector-2022.css: Difference between revisions
m CSS test |
m CSS test |
||
(62 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* All CSS here will be loaded for users of the Vector skin */ | /* All CSS here will be loaded for users of the Vector skin */ | ||
/* | /* CSS for left vertical navigation */ | ||
/* | |||
# | .vector-menu-content li { | ||
# | margin: 0; | ||
#n-View-YouTube a:link, | padding: 0.25em 0; | ||
font-size: 0.8em; | |||
line-height: 1.125em; | |||
word-wrap: break-word; | |||
} | |||
#mw-panel .vector-menu-heading { | |||
font-weight: bold; | |||
} | |||
@media screen { | |||
.skin-theme-clientpref-night .mw-body { | |||
box-shadow: none; | |||
} | |||
} | |||
/* Body and tools menu background color */ | |||
.mw-body { | |||
margin-top: 0; | |||
border-color: transparent; | |||
box-shadow: 0 0.05em 0.6em -0.15em rgba(0,0,0,0.15); | |||
padding: 1.25em 1.5em 1.5em 1.5em; | |||
background-color: #fbfbfb; | |||
} | |||
#vector-page-tools-pinned-container { | |||
background-color: #fbfbfb; | |||
} | |||
@media screen { | |||
.skin-theme-clientpref-night #vector-page-tools-pinned-container { | |||
background-color: #12161a; | |||
} | |||
.skin-theme-clientpref-night .mw-body { | |||
box-shadow: none; | |||
background-color: #12161a; | |||
} | |||
.skin-theme-clientpref-night .vector-sticky-pinned-container::after { | |||
background: none; | |||
} | |||
} | |||
.vector-sticky-pinned-container::after { | |||
background: none; | |||
} | |||
/* Links to categories */ | |||
.catlinks { | |||
background-color: var(--background-color-neutral-subtle); | |||
border-radius: 5px; | |||
border: 1px solid var(--border-color-subtle, #a2a9b1); | |||
font-weight: 600; | |||
} | |||
/* This changes CSS for the link buttons */ | |||
/* #n-View-YouTube a:link, | |||
#n-View-YouTube a:visited, | #n-View-YouTube a:visited, | ||
#n-View-DynMap a:link, | #n-View-DynMap a:link, | ||
#n-View-DynMap a:visited | #n-View-DynMap a:visited | ||
*/ | |||
#n-Join-the-Discord a:link, | |||
#n-Join-the-Discord a:visited { | |||
font-weight: bold; | font-weight: bold; | ||
color: #ffffff; | color: #ffffff; | ||
text-decoration: none; | |||
/* | |||
vertical-align: sub; | |||
*/ | |||
} | } | ||
#n- | #n-Join-the-Discord { | ||
background: # | background: #677bc4; | ||
background-image: url('https://static.wikitide.net/alathramcwiki/8/82/636e0a6ca814282eca7172c6_icon_clyde_white_RGB.svg'); | background-image: url('https://static.wikitide.net/alathramcwiki/8/82/636e0a6ca814282eca7172c6_icon_clyde_white_RGB.svg'); | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-size: 16px; | background-size: 16px; | ||
background-position: | background-position: top 52% left 7%; | ||
padding-left: 2.5em; | |||
margin-bottom: 5px; | |||
border-radius: 4px; | |||
border-width: 1px; | |||
border-style: groove; | |||
border-color: #485689; | |||
/* | /* | ||
border-width: 0px 6px 0px 6px; | border-width: 0px 6px 0px 6px; | ||
border-style: solid; | border-style: solid; | ||
border-radius: 4px; | border-radius: 4px; | ||
border-color: #7289da; | border-color: #7289da; | ||
transition: background-color .4s, border-color .4s; | transition: background-color .4s, border-color .4s; | ||
*/ | */ | ||
} | } | ||
/* | |||
#n-View-YouTube { | #n-View-YouTube { | ||
background: #e60000; | background: #e60000; | ||
Line 42: | Line 106: | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-size: 16px; | background-size: 16px; | ||
background-position: center left; | background-position: center left 4%; | ||
padding-left: 2.2em; | |||
margin-bottom: 5px; | |||
border-radius: 4px; | |||
border-width: 0px 6px 0px 6px; | border-width: 0px 6px 0px 6px; | ||
border-style: solid; | border-style: solid; | ||
border-radius: 4px; | border-radius: 4px; | ||
border-color: #e60000; | border-color: #e60000; | ||
transition: background-color .4s, border-color .4s; | transition: background-color .4s, border-color .4s; | ||
} | } | ||
/* | |||
#n-View-DynMap { | #n-View-DynMap { | ||
background: #ad9c6f; | background: #ad9c6f; | ||
Line 65: | Line 125: | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-size: 16px; | background-size: 16px; | ||
background-position: center left | background-position: center left 4%; | ||
padding-left: 2.2em; | |||
border-radius: 4px; | |||
border-width: 0px 6px 0px 6px; | border-width: 0px 6px 0px 6px; | ||
border-style: solid; | border-style: solid; | ||
border-radius: 4px; | border-radius: 4px; | ||
border-color: #ad9c6f; | border-color: #ad9c6f; | ||
transition: background-color .4s, border-color .4s; | transition: background-color .4s, border-color .4s; | ||
} | } | ||
*/ | |||
/* | /* | ||
#n- | #n-Join-the-Discord:hover { | ||
border-color: #8699df; | border-color: #8699df; | ||
background-color: #8699df; | background-color: #8699df; | ||
Line 97: | Line 153: | ||
} | } | ||
*/ | */ | ||
.vector-feature-main-menu-pinned-disabled .mw-body { | |||
max-width: 1160px; | |||
margin: auto; | |||
} | |||
.vector-main-menu .vector-main-menu-action-opt-out a, .vector-main-menu .vector-main-menu-action-lang-alert .vector-main-menu-action-content { | |||
display: none; | |||
} | |||
@media screen and (min-width: 1120px) { | |||
.mw-page-container-inner { | |||
display: grid; | |||
column-gap: 12px; | |||
grid-template: min-content 1fr min-content / 11.25rem minmax(0, 1fr); | |||
grid-template-areas: | |||
'siteNotice siteNotice' | |||
'columnStart pageContent' | |||
'footer footer'; | |||
} | |||
.mw-body { | |||
grid-template-columns: minmax(0, 1fr) min-content; | |||
} | |||
.vector-feature-page-tools-pinned-enabled .vector-column-end, .vector-feature-appearance-pinned-clientpref-1 .vector-column-end { | |||
width: 10.25rem; | |||
} | |||
} | |||
#mw-panel { | |||
top: 0; | |||
width: 11em; | |||
left: 0; | |||
} | |||
.vector-pinnable-element .vector-menu-heading { | |||
border: none; | |||
margin: 12px 0 0 0; | |||
} | |||
/* For the frame of the image in the Featured Article section*/ | |||
.featuredarticleimage { | |||
background-color: #fff; | |||
border: 2px outset #eaecf0; | |||
padding: 4px; | |||
} | |||
@media screen { | |||
html.skin-theme-clientpref-night .featuredarticleimage { | |||
background-color: #202122; | |||
border-color: #404244; | |||
} | |||
} | |||
/* For ambox and other notice dark mode compatibility */ | |||
@media screen { | |||
html.skin-theme-clientpref-night .mw-parser-output .ambox, html.skin-theme-clientpref-night .mw-parser-output .cmbox, html.skin-theme-clientpref-night .mw-parser-output .imbox, html.skin-theme-clientpref-night .mw-parser-output .tmbox, html.skin-theme-clientpref-night .mw-parser-output .fmbox, html.skin-theme-clientpref-night .mw-parser-output .ombox, html.skin-theme-clientpref-night .mw-parser-output .mbox, html.skin-theme-clientpref-night .mw-parser-output .asbox, html.skin-theme-clientpref-night .mw-parser-output .dmbox { | |||
border: 1px solid #54595d; | |||
background-color: #27292d; | |||
} | |||
} | |||
/* Changing thumb-size image style */ | |||
figure[typeof~='mw:File/Thumb'] > figcaption,figure[typeof~='mw:File/Frame'] > figcaption { | |||
padding: 3px; | |||
} | |||
body.skin--responsive .mw-parser-output figure[typeof~='mw:File/Thumb'] img.mw-file-element,body.skin--responsive .mw-parser-output figure[typeof~='mw:File/Frame'] img.mw-file-element { | |||
max-width: unset; | |||
} | |||
figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element,figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element { | |||
margin: 0; | |||
} | |||
@media screen { | |||
figure[typeof~='mw:File/Thumb'],figure[typeof~='mw:File/Frame'] { | |||
border: 3px outset var(--background-color-disabled-subtle); | |||
border-bottom: 0; | |||
border-radius: 5px 5px 0 0; | |||
border-collapse: unset; | |||
} | |||
figure[typeof~='mw:File/Thumb'] > figcaption,figure[typeof~='mw:File/Frame'] > figcaption { | |||
border: 3px outset var(--background-color-disabled-subtle); | |||
border-top: 0; | |||
border-radius: 0 0 5px 5px; | |||
background-color: var(--background-color-notice-subtle,#f8f9fa); | |||
} | |||
figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element, figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element { | |||
border: none; | |||
} | |||
figure[typeof~='mw:File/Thumb'] > .mw-file-description::after,figure[typeof~='mw:File/Thumb'] > .mw-file-magnify::after { | |||
bottom: -18px; | |||
} | |||
} | |||
/* CSS for crafting table UI */ | |||
.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; | |||
} | |||
.invslot::before,.invslot::after { | |||
content: ""; | |||
position: absolute; | |||
background-color: #8B8B8B; | |||
height: 2px; | |||
width: 2px; | |||
pointer-events: none; | |||
} | |||
.invslot::before { | |||
bottom: -2px; | |||
left: -2px; | |||
} | |||
.invslot::after { | |||
top: -2px; | |||
right: -2px; | |||
} | |||
.invslot-large { | |||
padding: 8px; | |||
} | |||
.invslot-item,.invslot-item a:first-child { | |||
position: relative; | |||
display: block; | |||
margin: -2px; | |||
padding: 2px; | |||
width: 32px; | |||
height: 32px; | |||
} | |||
.invslot-item-image a.new:first-child { | |||
background: url(/images/Grid_Unknown.png?4cbf2) no-repeat content-box; | |||
width: 32px; | |||
height: 32px; | |||
text-indent: -9999px; | |||
overflow: hidden; | |||
} | |||
.invslot-stacksize { | |||
position: absolute; | |||
right: 0; | |||
bottom: 0; | |||
font-family: Minecraft,sans-serif !important; | |||
font-weight: normal !important; | |||
color: #FFF !important; | |||
text-shadow: 2px 2px 0 #3F3F3F; | |||
filter: dropshadow(color=#3F3F3F,offx=2,offy=2); | |||
z-index: 2; | |||
} | |||
.invslot-plain { | |||
background-color: transparent; | |||
border: 0; | |||
} | |||
.invslot-plain::before,.invslot-plain::after { | |||
content: none; | |||
} | |||
.invslot-plain > .invslot-item,.invslot-plain > .invslot-item a:first-child { | |||
margin: 0; | |||
padding: 0; | |||
} | |||
.invslot-default-head { | |||
background-image: url(/images/Grid_layout_Head_Empty.png?c6d2b); | |||
} | |||
.invslot-default-chest { | |||
background-image: url(/images/Grid_layout_Chest_Empty.png?4c32c); | |||
} | |||
.invslot-default-legs { | |||
background-image: url(/images/Grid_layout_Legs_Empty.png?f5d09); | |||
} | |||
.invslot-default-feet { | |||
background-image: url(/images/Grid_layout_Feet_Empty.png?70c3c); | |||
} | |||
.invslot-default-offhand { | |||
background-image: url(/images/Grid_layout_Offhand_Empty.png?b6488); | |||
} | |||
.invslot-default-smithing { | |||
background-image: url(/images/Grid_layout_Smithing_Empty.png?e28f7); | |||
} | |||
.invslot-default-brewing { | |||
background-image: url(/images/Grid_layout_Brewing_Empty.png?2bf2a); | |||
} | |||
.invslot-default-brewing-fuel { | |||
background-image: url(/images/Grid_layout_Brewing_Fuel_Empty.png?acb80); | |||
} | |||
.mc-hearts::before { | |||
content: ' ('; | |||
} | |||
.mc-hearts::after { | |||
content: ')'; | |||
} | |||
.mcui { | |||
display: inline-block; | |||
position: relative; | |||
background-color: #C6C6C6; | |||
border: 2px solid; | |||
border-color: #DBDBDB #5B5B5B #5B5B5B #DBDBDB; | |||
padding: 6px; | |||
text-align: left; | |||
white-space: nowrap; | |||
vertical-align: bottom; | |||
} | |||
.mcui-Crafting_Table > *,.mcui-Furnace > * { | |||
display: inline-block; | |||
vertical-align: top; | |||
} | |||
.mcui-Crafting_Table .mcui-row { | |||
display: block; | |||
} | |||
.mcui-Crafting_Table > .mcui-arrow { | |||
background: url(https://minecraft.wiki/images/Grid_layout_Arrow_%28small%29.png?a4894) no-repeat; | |||
width: 32px; | |||
height: 26px; | |||
margin: 40px 4px 0; | |||
} | |||
.mcui-Crafting_Table > .mcui-output { | |||
margin-top: 28px; | |||
} | |||
.mcui-Crafting_Table > .mcui-icons { | |||
position: absolute; | |||
top: 6px; | |||
right: 6px; | |||
} | |||
.mcui-Crafting_Table .mcui-shapeless,.mcui-Crafting_Table .mcui-fixed { | |||
display: inline-block; | |||
background-repeat: no-repeat; | |||
width: 19px; | |||
height: 15px; | |||
cursor: help; | |||
} | |||
.mcui-Crafting_Table .mcui-shapeless { | |||
background-image: url(https://minecraft.wiki/images/Grid_layout_Shapeless.png?9dddf); | |||
} | |||
.mcui-Crafting_Table .mcui-fixed { | |||
background-image: url(https://minecraft.wiki/images/Grid_layout_Fixed.png?bb1da); | |||
} | |||
.mcui-Furnace .mcui-fuel { | |||
display: block; | |||
background: url(/images/Grid_layout_Fire.png?84fd9) no-repeat; | |||
width: 36px; | |||
height: 36px; | |||
} | |||
.mcui-Furnace .mcui-fuel.mcui-inactive { | |||
background-image: url(/images/Grid_layout_Fire_%28in-active%29.png?2e313); | |||
} | |||
.mcui-Furnace > .mcui-arrow { | |||
background: url(/images/Grid_layout_Furnace_Progress.png?c8400) no-repeat; | |||
width: 44px; | |||
height: 32px; | |||
margin: 36px 18px 0 14px; | |||
} | |||
.mcui-Furnace > .mcui-arrow.mcui-inactive,.mcui-Inventory-Crafting_Table-arrow { | |||
background-image: url(/images/Grid_layout_Furnace_Progress_%28in-active%29.png?4f3f7); | |||
} | |||
.mcui-Furnace > .mcui-output { | |||
margin-top: 28px; | |||
} | |||
.mcui-Furnace > .mcui-experience { | |||
position: absolute; | |||
top: 92px; | |||
left: 108px; | |||
text-align: center; | |||
width: 70px; | |||
} | |||
.mcui-Furnace .mcui-experience-orb { | |||
display: inline-block; | |||
margin-top: 3px; | |||
width: 16px; | |||
height: 16px; | |||
vertical-align: top; | |||
background-size: 16px 16px; | |||
} | |||
.mcui-Furnace .mcui-experience-text { | |||
display: inline-block; | |||
vertical-align: top; | |||
font-family: Minecraft,sans-serif; | |||
font-size: 16px; | |||
color: #404040; | |||
} | |||
/* Used to render low-res textures in larger sizes */ | |||
.pixel-image, .invslot-item-image, .sprite { | |||
image-rendering: pixelated; | |||
} | |||
.item-padding { | |||
padding: 16px; | |||
} | |||
/* Animation CSS for the Animated Sprites of the Crafting UI */ | |||
#minetip-tooltip { | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
background-color: #100010; | |||
background-color: rgba(16,0,16,0.94); | |||
padding: 0.375em; | |||
font-family: Minecraft,sans-serif; | |||
font-size: 16px; | |||
word-spacing: 4px; | |||
white-space: nowrap; | |||
line-height: 1.25em; | |||
margin: 0.125em 0.25em; | |||
pointer-events: none; | |||
z-index: 9999; | |||
} | |||
#minetip-tooltip::before { | |||
content: ""; | |||
position: absolute; | |||
top: 0.125em; | |||
right: -0.125em; | |||
bottom: 0.125em; | |||
left: -0.125em; | |||
border: 0.15em solid #100010; | |||
border-style: none solid; | |||
border-color: rgba(16,0,16,0.94); | |||
} | |||
#minetip-tooltip::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; | |||
} | |||
#minetip-tooltip > .description,#minetip-tooltip > .minetip-description { | |||
display: block; | |||
margin-top: 0.25em; | |||
} | |||
.hidden-alt-text { | |||
font-size: 0; | |||
} |