MediaWiki:Vector-2022.css: Difference between revisions
m CSS test |
Lifting stuff over |
||
(65 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; | ||
background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/42/YouTube_light_icon_%282017%29.svg'); | background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/42/YouTube_light_icon_%282017%29.svg'); | ||
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; | ||
background-image: url('https://upload.wikimedia.org/wikipedia/commons/8/86/Map_icon.svg'); | background-image: url('https://upload.wikimedia.org/wikipedia/commons/8/86/Map_icon.svg'); | ||
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 85: | 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; | |||
} | |||
} |