MediaWiki:Vector.css: Difference between revisions
From Inkipedia, the Splatoon wiki
(Halloween decoration) Tag: Reverted |
(Added code to solve a bug in Main Page with events and vector skin) |
||
(16 intermediate revisions by 4 users not shown) | |||
Line 2: | Line 2: | ||
body { | body { | ||
background-image: url("//cdn.wikimg.net/ | background-image: url("https://cdn.wikimg.net/es/splatoonwiki/images/6/60/Inkipedia_background_S3_Vector.svg"); | ||
background-repeat: repeat; | background-repeat: repeat; | ||
} | } | ||
/* Styles the account information box in the top right corner */ | /* Styles the account information box in the top right corner */ | ||
#p-personal { | .skin-vector-legacy #p-personal { | ||
background-color: white; | background-color: white; | ||
top: -0.09em; | top: -0.09em; | ||
Line 14: | Line 14: | ||
border-radius: 2px 2px 10px 10px; | border-radius: 2px 2px 10px 10px; | ||
border-style: solid; | border-style: solid; | ||
border-color: # | border-color: #AADC00; | ||
border-width: 2px; | border-width: 2px; | ||
} | } | ||
/* Tab stuff */ | /* Tab stuff */ | ||
nav.vectorTabs, | .skin-vector-legacy nav.vectorTabs, | ||
nav.vectorMenu h3#p-cactions-label, | .skin-vector-legacy nav.vectorMenu h3#p-cactions-label, | ||
#left-navigation .vector-menu-content a, | .skin-vector-legacy #left-navigation .vector-menu-content a, | ||
#right-navigation .vector-menu-content a { | .skin-vector-legacy #right-navigation .vector-menu-content a { | ||
background-image: none; | background-image: none; | ||
} | } | ||
nav#p-namespaces li, | .skin-vector-legacy nav#p-namespaces li, | ||
nav#p-views li, | .skin-vector-legacy nav#p-views li, | ||
nav#p-cactions { | .skin-vector-legacy nav#p-cactions { | ||
background-color: #f3f3f3; | background-color: #f3f3f3; | ||
background-image: none; | background-image: none; | ||
border-radius: 0.95em 0.95em 0 0; | border-radius: 0.95em 0.95em 0 0; | ||
height: 1. | height: 1.85em; | ||
line-height: 1px; | line-height: 1px; | ||
margin-right: 0.15em; | margin-right: 0.15em; | ||
margin-top: 0.5em; | margin-top: 0.5em; | ||
border-style: dashed dashed solid dashed; | border-style: dashed dashed solid dashed; | ||
border-color: # | border-color: #aadc00; | ||
border-width: 1px; | border-width: 1px; | ||
min-width: 30px; | min-width: 30px; | ||
} | } | ||
nav#p-cactions h3 { | .skin-vector-legacy nav#p-cactions h3 { | ||
color: var(--link-internal,#378B00); | color: var(--link-internal,#378B00); | ||
height: 30px !important; | height: 30px !important; | ||
Line 47: | Line 47: | ||
text-align: center; | text-align: center; | ||
} | } | ||
nav#p-cactions h3::after { | .skin-vector-legacy nav#p-cactions h3::after { | ||
right: 0; | right: 0; | ||
top: | padding: 0.5em; | ||
background-position: initial; | |||
/** This brings the arrow in-line with the middle of the e from "More" */ | |||
top: 0.6em; | |||
margin-left: 0.2em; | |||
} | } | ||
.vector-menu-dropdown .vector-menu-content { | /* Make the dropdown arrow play nicely */ | ||
.skin-vector-legacy .vector-menu-dropdown h3:after { | |||
top: auto; | |||
right: inherit; | |||
position: inherit; | |||
} | |||
.skin-vector-legacy .vector-menu-dropdown .vector-menu-content { | |||
border-width: 1px; | border-width: 1px; | ||
top: 100%; | top: 100%; | ||
} | } | ||
nav#p-views .selected, | .skin-vector-legacy nav#p-views .selected, | ||
nav#p-namespaces .selected { | .skin-vector-legacy nav#p-namespaces .selected { | ||
background: #ffffff; | background: #ffffff; | ||
} | } | ||
#ca-unwatch.icon a, | .skin-vector-legacy #ca-unwatch.icon a, | ||
#ca-watch.icon a { | .skin-vector-legacy #ca-watch.icon a { | ||
padding-top: 21px; | padding-top: 21px; | ||
padding-bottom: 21px; | padding-bottom: 21px; | ||
Line 72: | Line 81: | ||
} | } | ||
#ca-unwatch.icon a { | .skin-vector-legacy #ca-unwatch.icon a { | ||
width: 82px; | width: 82px; | ||
} | } | ||
div#mw-head div.vectorMenu h3 { | .skin-vector-legacy div#mw-head div.vectorMenu h3 { | ||
background: #fff; | background: #fff; | ||
height: 28px; | height: 28px; | ||
margin-top: 0.6em; | margin-top: 0.6em; | ||
border-style: dashed dashed solid dashed; | border-style: dashed dashed solid dashed; | ||
border-color: # | border-color: #aadc00; | ||
border-width: 1px; | border-width: 1px; | ||
border-radius: 10px 10px 0 0; | border-radius: 10px 10px 0 0; | ||
Line 88: | Line 97: | ||
} | } | ||
div.vectorMenu h3 span { | .skin-vector-legacy div.vectorMenu h3 span { | ||
padding-top: 6px; | padding-top: 6px; | ||
} | } | ||
#left-navigation { | .skin-vector-legacy .skin-vector-legacy #left-navigation { | ||
margin-left: 11em; | margin-left: 11em; | ||
} | } | ||
#right-navigation { | .skin-vector-legacy #right-navigation { | ||
margin-right: 4em; | margin-right: 4em; | ||
overflow: visible; | overflow: visible; | ||
Line 102: | Line 111: | ||
} | } | ||
#p-logo { | .skin-vector-legacy #p-logo { | ||
left: -1em; | left: -1em; | ||
margin-top: -185px; | margin-top: -185px; | ||
Line 108: | Line 117: | ||
} | } | ||
div#mw-page-base { | .skin-vector-legacy div#mw-page-base { | ||
background-image: none; | background-image: none; | ||
background-color: rgba(255,255,255,0); | background-color: rgba(255,255,255,0); | ||
Line 114: | Line 123: | ||
} | } | ||
#mw-panel { | .skin-vector-legacy #mw-panel { | ||
background-color: white; | background-color: white; | ||
max-width: 8em; | max-width: 8em; | ||
Line 121: | Line 130: | ||
padding: 1em 0.5em 1em 0em; | padding: 1em 0.5em 1em 0em; | ||
border-style: solid; | border-style: solid; | ||
border-color: # | border-color: #AADC00; | ||
border-width: 2px 2px 2px 10px; | border-width: 2px 2px 2px 10px; | ||
border-radius: 2px; | border-radius: 2px; | ||
} | } | ||
.mw-body { | .skin-vector-legacy .mw-body { | ||
border-style: solid; | border-style: solid; | ||
border-color: # | border-color: #AADC00; | ||
border-width: 1px 2px 0 2px; | border-width: 1px 2px 0 2px; | ||
margin-left: 11em; | margin-left: 11em; | ||
Line 135: | Line 144: | ||
} | } | ||
.mw-body h1, .mw-body h2, .mw-body #firstHeading { | .skin-vector-legacy .mw-body h1, .mw-body h2, .mw-body #firstHeading { | ||
font-family: sans-serif; | font-family: sans-serif; | ||
} | } | ||
/* ink splotches on headers */ | /* ink splotches on headers */ | ||
.mw-body h1, | .skin-vector-legacy .mw-body h1, | ||
.mw-body h2 { | .skin-vector-legacy .mw-body h2 { | ||
position: relative; | position: relative; | ||
} | } | ||
/* ::before element is needed for opacity */ | /* ::before element is needed for opacity */ | ||
.mw-body h1::before, | .skin-vector-legacy .mw-body h1::before, | ||
.mw-body h2::before { | .skin-vector-legacy .mw-body h2::before { | ||
content: ""; | content: ""; | ||
position: absolute; | position: absolute; | ||
Line 152: | Line 161: | ||
left: 0; | left: 0; | ||
width: 100%; | width: 100%; | ||
height: | height: 30px; | ||
opacity: .6; | opacity: .6; | ||
z-index: -1; | z-index: -1; | ||
background-image: url(//cdn.wikimg.net/splatoonwiki/images/5/5c/Drip-heading.png); | background-image: url(//cdn.wikimg.net/splatoonwiki/images/5/5c/Drip-heading.png); | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
bottom: 0; | |||
} | } | ||
.mw-body h1::before { background-position: 95% -2.5%; } /* green */ | .skin-vector-legacy .mw-body h1::before { background-position: 95% -2.5%; } /* green */ | ||
.mw-body h2:nth-of-type(6n-5)::before { background-position: 95% 20%; } /* purple */ | .skin-vector-legacy .mw-body h2:nth-of-type(6n-5)::before { background-position: 95% 20%; } /* purple */ | ||
.mw-body h2:nth-of-type(6n-4)::before { background-position: 95% 40%; } /* blue */ | .skin-vector-legacy .mw-body h2:nth-of-type(6n-4)::before { background-position: 95% 40%; } /* blue */ | ||
.mw-body h2:nth-of-type(6n-3)::before { background-position: 95% 60%; } /* orange */ | .skin-vector-legacy .mw-body h2:nth-of-type(6n-3)::before { background-position: 95% 60%; } /* orange */ | ||
.mw-body h2:nth-of-type(6n-2)::before { background-position: 95% 80%; } /* pink */ | .skin-vector-legacy .mw-body h2:nth-of-type(6n-2)::before { background-position: 95% 80%; } /* pink */ | ||
.mw-body h2:nth-of-type(6n-1)::before { background-position: 95% 100%; } /* cyan */ | .skin-vector-legacy .mw-body h2:nth-of-type(6n-1)::before { background-position: 95% 100%; } /* cyan */ | ||
.mw-body h2:nth-of-type(6n)::before { background-position: 95% 0%; } /* green */ | .skin-vector-legacy .mw-body h2:nth-of-type(6n)::before { background-position: 95% 0%; } /* green */ | ||
#toc h2::before { background: none; } /* prevent splotches from showing on table of contents header */ | .skin-vector-legacy #toc h2::before { background: none; } /* prevent splotches from showing on table of contents header */ | ||
#firstHeading {z-index: 0; } /* fix splotch not showing on title header */ | .skin-vector-legacy #firstHeading {z-index: 0; } /* fix splotch not showing on title header */ | ||
/* prevent h1 help links from becoming unclickable due to the ::before elements */ | /* prevent h1 help links from becoming unclickable due to the ::before elements */ | ||
div.mw-indicators.mw-body-content { | .skin-vector-legacy div.mw-indicators.mw-body-content { | ||
position: relative; | position: relative; | ||
z-index: 1; | z-index: 1; | ||
} | } | ||
#footer { | .skin-vector-legacy #footer { | ||
background-color: white; | background-color: white; | ||
background-image: url("//cdn.wikimg.net/splatoonwiki/images/b/b4/Featured-bg.png"); | background-image: url("//cdn.wikimg.net/splatoonwiki/images/b/b4/Featured-bg.png"); | ||
border-style: solid; | border-style: solid; | ||
border-color: # | border-color: #AADC00; | ||
border-width: 1px 2px 1px 2px; | border-width: 1px 2px 1px 2px; | ||
margin-right: 5em; | margin-right: 5em; | ||
Line 187: | Line 197: | ||
/* Make margins of footer and search consistent */ | /* Make margins of footer and search consistent */ | ||
.mw-footer { | .skin-vector-legacy .mw-footer { | ||
margin-left: 11em; | margin-left: 11em; | ||
} | } | ||
#p-search { | .skin-vector-legacy #p-search { | ||
margin-right: 1em; | margin-right: 1em; | ||
} | } | ||
Line 201: | Line 211: | ||
/* "More" menu */ | /* "More" menu */ | ||
.vectorMenu h3{ | .skin-vector-legacy .vectorMenu h3{ | ||
border-radius:0.95em 0.95em 0 0 !important; | border-radius:0.95em 0.95em 0 0 !important; | ||
padding-bottom:2px !important; | padding-bottom:2px !important; | ||
} | } | ||
.vectorMenu h3 span:after{ | .skin-vector-legacy .vectorMenu h3 span:after{ | ||
top:6px !important; | top:6px !important; | ||
} | } | ||
.vectorMenu span{ | .skin-vector-legacy .vectorMenu span{ | ||
top:2px; | top:2px; | ||
} | } | ||
.vectorMenu .menu{ | .skin-vector-legacy .vectorMenu .menu{ | ||
border-radius: 0 0 10px 10px; | border-radius: 0 0 10px 10px; | ||
left:1.5px; | left:1.5px; | ||
min-width:86.5%; | min-width:86.5%; | ||
} | } | ||
.vectorMenu .menu ul{ | .skin-vector-legacy .vectorMenu .menu ul{ | ||
position:relative; | position:relative; | ||
left:-1px; | left:-1px; | ||
} | |||
/* Remove blue background from the tab */ | |||
.skin-vector-legacy .vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown h3 { | |||
background: none; | |||
} | |||
/* Fix watch tab from overflow and bouncing */ | |||
.skin-vector-legacy .vector-menu-tabs .mw-watchlink.icon a { | |||
padding: 0.5em; | |||
} | |||
.skin-vector-legacy #ca-watch.icon a, #ca-unwatch.icon a { | |||
width: inherit; | |||
} | } | ||
/* Search */ | /* Search */ | ||
#simpleSearch{ | .skin-vector-legacy #simpleSearch{ | ||
background:#f3f3f3; | background:#f3f3f3; | ||
bottom:3px; | bottom:3px; | ||
Line 228: | Line 251: | ||
border-style: dashed dashed solid dashed !important; | border-style: dashed dashed solid dashed !important; | ||
border-width:1px; | border-width:1px; | ||
border-color:# | border-color:#aadc00; | ||
padding-bottom: | padding-bottom:0px; | ||
padding-top:4px; | padding-top:4px; | ||
padding-left:5px; | padding-left:5px; | ||
Line 238: | Line 261: | ||
transition: background-color 100ms linear; | transition: background-color 100ms linear; | ||
} | } | ||
#simpleSearch:hover{ | .skin-vector-legacy #simpleSearch:hover{ | ||
background-color:#ffffff; | background-color:#ffffff; | ||
/* border-color:transparent; */ | /* border-color:transparent; */ | ||
} | } | ||
#searchInput{ | .skin-vector-legacy #searchInput{ | ||
border:none; | border:none; | ||
} | } | ||
#searchInput:focus, #simpleSearch:hover #searchInput:focus{ | .skin-vector-legacy #searchInput:focus, #simpleSearch:hover #searchInput:focus{ | ||
-webkit-box-shadow:none; /* Disables blue border when focused */ | -webkit-box-shadow:none; /* Disables blue border when focused */ | ||
box-shadow:none; | box-shadow:none; | ||
} | } | ||
#searchButton{ | .skin-vector-legacy #searchButton{ | ||
top:1px; | top:1px; | ||
right:5px; | right:5px; | ||
} | |||
/* Code to resolve a display error on small screens for the main page */ | |||
@media all and (min-width: 1075px){ | |||
.hide-div-mainPage-event { | |||
display: flex; | |||
flex-wrap: wrap; | |||
} | |||
} | } |
Latest revision as of 15:37, 16 February 2024
/* CSS placed here will affect users of the Vector skin */ body { background-image: url("https://cdn.wikimg.net/es/splatoonwiki/images/6/60/Inkipedia_background_S3_Vector.svg"); background-repeat: repeat; } /* Styles the account information box in the top right corner */ .skin-vector-legacy #p-personal { background-color: white; top: -0.09em; margin-right: 4em; padding: 2px 12px 2px 0; border-radius: 2px 2px 10px 10px; border-style: solid; border-color: #AADC00; border-width: 2px; } /* Tab stuff */ .skin-vector-legacy nav.vectorTabs, .skin-vector-legacy nav.vectorMenu h3#p-cactions-label, .skin-vector-legacy #left-navigation .vector-menu-content a, .skin-vector-legacy #right-navigation .vector-menu-content a { background-image: none; } .skin-vector-legacy nav#p-namespaces li, .skin-vector-legacy nav#p-views li, .skin-vector-legacy nav#p-cactions { background-color: #f3f3f3; background-image: none; border-radius: 0.95em 0.95em 0 0; height: 1.85em; line-height: 1px; margin-right: 0.15em; margin-top: 0.5em; border-style: dashed dashed solid dashed; border-color: #aadc00; border-width: 1px; min-width: 30px; } .skin-vector-legacy nav#p-cactions h3 { color: var(--link-internal,#378B00); height: 30px !important; padding-right: 8px !important; text-align: center; } .skin-vector-legacy nav#p-cactions h3::after { right: 0; padding: 0.5em; background-position: initial; /** This brings the arrow in-line with the middle of the e from "More" */ top: 0.6em; margin-left: 0.2em; } /* Make the dropdown arrow play nicely */ .skin-vector-legacy .vector-menu-dropdown h3:after { top: auto; right: inherit; position: inherit; } .skin-vector-legacy .vector-menu-dropdown .vector-menu-content { border-width: 1px; top: 100%; } .skin-vector-legacy nav#p-views .selected, .skin-vector-legacy nav#p-namespaces .selected { background: #ffffff; } .skin-vector-legacy #ca-unwatch.icon a, .skin-vector-legacy #ca-watch.icon a { padding-top: 21px; padding-bottom: 21px; padding-left: 24px; margin-top: -5px; width: 68px; } .skin-vector-legacy #ca-unwatch.icon a { width: 82px; } .skin-vector-legacy div#mw-head div.vectorMenu h3 { background: #fff; height: 28px; margin-top: 0.6em; border-style: dashed dashed solid dashed; border-color: #aadc00; border-width: 1px; border-radius: 10px 10px 0 0; margin-left: 0.1em; margin-right: 0.4em; } .skin-vector-legacy div.vectorMenu h3 span { padding-top: 6px; } .skin-vector-legacy .skin-vector-legacy #left-navigation { margin-left: 11em; } .skin-vector-legacy #right-navigation { margin-right: 4em; overflow: visible; display: inline; } .skin-vector-legacy #p-logo { left: -1em; margin-top: -185px; margin-left: -15px; } .skin-vector-legacy div#mw-page-base { background-image: none; background-color: rgba(255,255,255,0); opacity: 0; } .skin-vector-legacy #mw-panel { background-color: white; max-width: 8em; margin-left: 0.8em; margin-top: 11em; padding: 1em 0.5em 1em 0em; border-style: solid; border-color: #AADC00; border-width: 2px 2px 2px 10px; border-radius: 2px; } .skin-vector-legacy .mw-body { border-style: solid; border-color: #AADC00; border-width: 1px 2px 0 2px; margin-left: 11em; margin-right: 5em; background-color: #ffffff; } .skin-vector-legacy .mw-body h1, .mw-body h2, .mw-body #firstHeading { font-family: sans-serif; } /* ink splotches on headers */ .skin-vector-legacy .mw-body h1, .skin-vector-legacy .mw-body h2 { position: relative; } /* ::before element is needed for opacity */ .skin-vector-legacy .mw-body h1::before, .skin-vector-legacy .mw-body h2::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 30px; opacity: .6; z-index: -1; background-image: url(//cdn.wikimg.net/splatoonwiki/images/5/5c/Drip-heading.png); background-repeat: no-repeat; bottom: 0; } .skin-vector-legacy .mw-body h1::before { background-position: 95% -2.5%; } /* green */ .skin-vector-legacy .mw-body h2:nth-of-type(6n-5)::before { background-position: 95% 20%; } /* purple */ .skin-vector-legacy .mw-body h2:nth-of-type(6n-4)::before { background-position: 95% 40%; } /* blue */ .skin-vector-legacy .mw-body h2:nth-of-type(6n-3)::before { background-position: 95% 60%; } /* orange */ .skin-vector-legacy .mw-body h2:nth-of-type(6n-2)::before { background-position: 95% 80%; } /* pink */ .skin-vector-legacy .mw-body h2:nth-of-type(6n-1)::before { background-position: 95% 100%; } /* cyan */ .skin-vector-legacy .mw-body h2:nth-of-type(6n)::before { background-position: 95% 0%; } /* green */ .skin-vector-legacy #toc h2::before { background: none; } /* prevent splotches from showing on table of contents header */ .skin-vector-legacy #firstHeading {z-index: 0; } /* fix splotch not showing on title header */ /* prevent h1 help links from becoming unclickable due to the ::before elements */ .skin-vector-legacy div.mw-indicators.mw-body-content { position: relative; z-index: 1; } .skin-vector-legacy #footer { background-color: white; background-image: url("//cdn.wikimg.net/splatoonwiki/images/b/b4/Featured-bg.png"); border-style: solid; border-color: #AADC00; border-width: 1px 2px 1px 2px; margin-right: 5em; margin-bottom: 16px; border-radius: 0 0 10px 10px; padding-bottom: 48px; } /* Make margins of footer and search consistent */ .skin-vector-legacy .mw-footer { margin-left: 11em; } .skin-vector-legacy #p-search { margin-right: 1em; } /*================================================== Interface improvements ==================================================*/ /*=NAVIGATION=*/ /* "More" menu */ .skin-vector-legacy .vectorMenu h3{ border-radius:0.95em 0.95em 0 0 !important; padding-bottom:2px !important; } .skin-vector-legacy .vectorMenu h3 span:after{ top:6px !important; } .skin-vector-legacy .vectorMenu span{ top:2px; } .skin-vector-legacy .vectorMenu .menu{ border-radius: 0 0 10px 10px; left:1.5px; min-width:86.5%; } .skin-vector-legacy .vectorMenu .menu ul{ position:relative; left:-1px; } /* Remove blue background from the tab */ .skin-vector-legacy .vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown h3 { background: none; } /* Fix watch tab from overflow and bouncing */ .skin-vector-legacy .vector-menu-tabs .mw-watchlink.icon a { padding: 0.5em; } .skin-vector-legacy #ca-watch.icon a, #ca-unwatch.icon a { width: inherit; } /* Search */ .skin-vector-legacy #simpleSearch{ background:#f3f3f3; bottom:3px; border-radius:0.95em 0.95em 0 0; border-style: dashed dashed solid dashed !important; border-width:1px; border-color:#aadc00; padding-bottom:0px; padding-top:4px; padding-left:5px; padding-right:5px; -webkit-transition: background-color 100ms linear; -ms-transition: background-color 100ms linear; transition: background-color 100ms linear; } .skin-vector-legacy #simpleSearch:hover{ background-color:#ffffff; /* border-color:transparent; */ } .skin-vector-legacy #searchInput{ border:none; } .skin-vector-legacy #searchInput:focus, #simpleSearch:hover #searchInput:focus{ -webkit-box-shadow:none; /* Disables blue border when focused */ box-shadow:none; } .skin-vector-legacy #searchButton{ top:1px; right:5px; } /* Code to resolve a display error on small screens for the main page */ @media all and (min-width: 1075px){ .hide-div-mainPage-event { display: flex; flex-wrap: wrap; } }