MediaWiki:Vector.css: Difference between revisions
From Celeste Wiki
Content deleted Content added
Saving |
replaced mask with clip-path per Welp's suggestion |
||
(11 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will affect users of the Vector skin */ |
/* CSS placed here will affect users of the Vector skin */ |
||
/* This skin is named "Strawberry", after its extensive use of strawberry pink bordering on purple. Also, Celeste reference. */ |
|||
/* THIS PAGE IS (UNIQUELY TO THIS WIKI) UNDER A CC BY-NC-SA 3.0 LICENSE (instead of 4.0). */ |
|||
/* Body Styling */ |
/* Body Styling */ |
||
Line 13: | Line 15: | ||
border: 1px solid #F7A7D9; |
border: 1px solid #F7A7D9; |
||
margin-right: 15px; |
margin-right: 15px; |
||
background-color: rgba(248, 209, 255, 0. |
background-color: rgba(248, 209, 255, 0.80); |
||
min-height:500px; |
min-height:500px; |
||
margin-bottom: 60px; |
margin-bottom: 60px; |
||
Line 81: | Line 83: | ||
/* Mediawiki page tabs */ |
/* Mediawiki page tabs */ |
||
#mw-head |
#mw-head .vectorMenu h3, .vectorTabs ul, .vectorTabs li.selected, .vectorTabs ul li, .vectorTabs, .vectorTabs span { |
||
background:none; |
background:none; |
||
} |
} |
||
.vectorTabs li a { |
|||
color: #B7D2FF; |
color: #B7D2FF; |
||
} |
} |
||
.vectorTabs li.new a, .vectorTabs li.new a:visited, .vectorMenu h3 span { |
|||
color: #99BFFF; |
color: #99BFFF; |
||
} |
} |
||
.vectorTabs li.selected a, .vectorTabs li.selected a:visited { |
|||
color: #C6DBFF; |
color: #C6DBFF; |
||
} |
} |
||
.vectorMenu .menu { |
|||
background-color: rgba(30, 17, 102, 0.67); |
background-color: rgba(30, 17, 102, 0.67); |
||
} |
} |
||
.vectorMenu .menu a { |
|||
color: #C6DBFF; |
color: #C6DBFF; |
||
} |
} |
||
Line 162: | Line 164: | ||
#mw-panel { |
#mw-panel { |
||
border: 1px solid #F7A7D9; |
border-right: 1px solid #F7A7D9; |
||
border-bottom: 1px solid #F7A7D9; |
|||
left: -12px; |
left: -12px; |
||
background-color: rgba(249,208,255,0.77); |
background-color: rgba(249,208,255,0.77); |
||
padding-bottom: 15px; |
padding-bottom: 15px; |
||
border-top-right-radius: 8px; |
/* border-top-right-radius: 8px; */ |
||
border-bottom-right-radius: 8px; |
border-bottom-right-radius: 8px; |
||
} |
} |
||
Line 240: | Line 243: | ||
} |
} |
||
/* Season Schedule Table Styling */ |
|||
/* Infobox Styling */ |
|||
#scheduletable { |
|||
margin-bottom:-19px; |
|||
width:100%; |
|||
} |
|||
.infobox { |
|||
#seasontable { |
|||
border: 1px solid #a2a9b1; |
|||
border-spacing: 3px; |
|||
padding:5px; |
|||
background-color: #f8f9fa; |
|||
border-radius:11px; |
|||
color: black; |
|||
margin-top:15px; |
|||
/* @noflip */ |
|||
width:100%; |
|||
margin: 0.5em 0 0.5em 1em; |
|||
padding: 0.2em; |
|||
/* @noflip */ |
|||
float: right; |
|||
/* @noflip */ |
|||
clear: right; |
|||
font-size: 88%; |
|||
line-height: 1.5em; |
|||
} |
} |
||
.infobox caption { |
|||
font-size: 125%; |
|||
#seasontable th { |
|||
font-weight: bold; |
|||
text-align: center; |
|||
padding: 0.2em; |
|||
border-color: #007448; |
|||
text-align: center; |
|||
box-shadow: 0px 1px rgba(0, 0, 0, 0.3); |
|||
color: white; |
|||
text-shadow: 0px 2px #00321f; |
|||
} |
} |
||
.infobox td, |
|||
.infobox th { |
|||
vertical-align: top; |
|||
background-color: Pink; |
|||
/* @noflip */ |
|||
text-align: left; |
|||
} |
} |
||
.infobox.bordered { |
|||
border-collapse: collapse; |
|||
table.summertable th { |
|||
background-color: Green; |
|||
} |
} |
||
.infobox.bordered td, |
|||
.infobox.bordered th { |
|||
border: 1px solid #a2a9b1; |
|||
background-color: Orange; |
|||
} |
|||
.infobox.bordered .borderless td, |
|||
.infobox.bordered .borderless th { |
|||
border: 0; |
|||
} |
} |
||
.infobox.sisterproject { |
|||
table.wintertable th { |
|||
width: 20em; |
|||
background-color: Lightblue; |
|||
font-size: 90%; |
|||
} |
} |
||
.infobox.standard-talk { |
|||
/* Infobox Styling */ |
|||
border: 1px solid #c0c090; |
|||
background-color: #f8eaba; |
|||
#infoboxtable { |
|||
max-width:350px; |
|||
width:100%; |
|||
} |
} |
||
.infobox.standard-talk.bordered td, |
|||
.infobox.standard-talk.bordered th { |
|||
#infoboxheader { |
|||
border: 1px solid #c0c090; |
|||
text-align:center; |
|||
font-size:24px; |
|||
padding-top:5px; |
|||
padding-bottom:5px; |
|||
text-shadow: 0px 1.5px 0px rgba(0,0,0,0.2); |
|||
} |
} |
||
/* styles for bordered infobox with merged rows */ |
|||
#infoboxsection { |
|||
.infobox.bordered .mergedtoprow td, |
|||
background-color:#03A007; |
|||
.infobox.bordered .mergedtoprow th { |
|||
vertical-align:top; |
|||
border: 0; |
|||
padding-left:15px; |
|||
border-top: 1px solid #a2a9b1; |
|||
padding-right:5px; |
|||
/* @noflip */ |
|||
width:105px; |
|||
border-right: 1px solid #a2a9b1; |
|||
box-shadow: 0px 1px rgba(0,0,0,0.3); |
|||
color: white; |
|||
text-shadow: 0px 2px #00321f; |
|||
} |
} |
||
.infobox.bordered .mergedrow td, |
|||
#infoboxdetail { |
|||
.infobox.bordered .mergedrow th { |
|||
vertical-align:top; |
|||
border: 0; |
|||
padding-left:3px; |
|||
/* @noflip */ |
|||
padding-right:12px; |
|||
border-right: 1px solid #a2a9b1; |
|||
} |
} |
||
/* Styles for geography infoboxes, eg countries, |
|||
#infoboxdetail p { |
|||
country subdivisions, cities, etc. */ |
|||
margin:0px; |
|||
.infobox.geography { |
|||
border-collapse: collapse; |
|||
line-height: 1.2em; |
|||
font-size: 90%; |
|||
} |
} |
||
.infobox.geography td, |
|||
#infoboxfooter { |
|||
.infobox.geography th { |
|||
width:100%; |
|||
border-top: 1px solid #a2a9b1; |
|||
padding-top:5px; |
|||
padding: 0.4em 0.6em 0.4em 0.6em; |
|||
} |
|||
.infobox.geography .mergedtoprow td, |
|||
.infobox.geography .mergedtoprow th { |
|||
border-top: 1px solid #a2a9b1; |
|||
padding: 0.4em 0.6em 0.2em 0.6em; |
|||
} |
} |
||
.infobox.geography .mergedrow td, |
|||
#infoboxdetail ul { |
|||
.infobox.geography .mergedrow th { |
|||
margin: 0em 0px 0px 0.9em; |
|||
border: 0; |
|||
padding: 0 0.6em 0.2em 0.6em; |
|||
} |
} |
||
.infobox.geography .mergedbottomrow td, |
|||
#infoboxsep { |
|||
.infobox.geography .mergedbottomrow th { |
|||
text-align:center; |
|||
border-top: 0; |
|||
background-color:#03A007; |
|||
border-bottom: 1px solid #a2a9b1; |
|||
vertical-align:top; |
|||
padding: 0 0.6em 0.4em 0.6em; |
|||
border-color:#007448; |
|||
box-shadow: 0px 1px rgba(0,0,0,0.3); |
|||
color: white; |
|||
text-shadow: 0px 2px #00321f; |
|||
} |
} |
||
.infobox.geography .maptable td, |
|||
.pixelperfect, #pixelperfect { |
|||
.infobox.geography .maptable th { |
|||
image-rendering:-moz-crisp-edges; |
|||
border: 0; |
|||
image-rendering:-o-crisp-edges; |
|||
padding: 0; |
|||
image-rendering:-webkit-optimize-contrast; |
|||
-ms-interpolation-mode:nearest-neighbor; |
|||
image-rendering:crisp-edges; |
|||
image-rendering:pixelated; |
|||
} |
} |
||
Line 354: | Line 363: | ||
} |
} |
||
/* Gallery Styling */ |
|||
.villagergallery a { |
|||
font-size:120%; |
|||
} |
|||
.villagergallery img { |
|||
width:128px; |
|||
height:128px; |
|||
} |
|||
.portraitgallery { |
|||
text-align:left !important; |
|||
} |
|||
.portraitgallery img { |
|||
width:128px; |
|||
height:128px; |
|||
} |
|||
/* Template Styling */ |
|||
/* Object Quality Stars */ |
|||
#qualitycontainer { |
|||
position:relative; |
|||
height:48px; |
|||
width:48px; |
|||
text-align:left; |
|||
} |
|||
#qualitycontainermed { |
|||
position:relative; |
|||
height:32px; |
|||
width:32px; |
|||
text-align:left; |
|||
} |
|||
#qualitycontainersm { |
|||
position:relative; |
|||
height:24px; |
|||
width:24px; |
|||
text-align:left; |
|||
} |
|||
#qualitycontainer div.qualityindicator { |
|||
text-align:left; |
|||
} |
|||
#qualitycontainermed div.qualityindicator { |
|||
text-align:left; |
|||
} |
|||
#qualitycontainersm div.qualityindicator { |
|||
text-align:left; |
|||
} |
|||
#qualityimage img { |
|||
position:absolute; |
|||
} |
|||
#qualityimage p { |
|||
margin:0px; |
|||
} |
|||
#recipeimage p { |
|||
margin:0px; |
|||
} |
|||
#recipeimage img { |
|||
position:absolute; |
|||
opacity:0.6; |
|||
max-height: 48px; |
|||
width: auto; |
|||
} |
|||
/* Quality Pricing */ |
|||
div.qualitycontainerprice { |
|||
margin-top: -7px; |
|||
padding-right:12px; |
|||
} |
|||
div.qualitycontainerprice span { |
|||
padding-left: 20px; |
|||
} |
|||
div.qualitycontainerprice img { |
|||
position: absolute; |
|||
margin-top:2px; |
|||
} |
|||
#qualityprice { |
|||
margin-top:-11px; |
|||
} |
|||
.no-wrap { |
|||
white-space: nowrap; |
|||
} |
|||
/* Talk Page Headers */ |
/* Talk Page Headers */ |
||
#talkheadertitle { |
#talkheadertitle { |
||
background-color: # |
background-color: #C133BD; |
||
text-align: center; |
text-align: center; |
||
color: white; |
color: white; |
||
Line 474: | Line 388: | ||
} |
} |
||
/* Skill page tables */ |
|||
#skilltable { |
|||
width:100%; |
|||
} |
|||
#skilltable th { |
|||
width:18%; |
|||
} |
|||
th.skilltableend { |
|||
width:28% !important; |
|||
} |
|||
td.skillsubheaderten { |
|||
width:14% !important; |
|||
text-align: center; |
|||
font-size: 12px; |
|||
background-color: rgba(255, 255, 255, 0.79); |
|||
} |
|||
#skilltable td { |
|||
vertical-align:top; |
|||
} |
|||
.skillsubheader { |
|||
text-align: center; |
|||
font-size: 12px; |
|||
background-color: rgba(255, 255, 255, 0.79); |
|||
} |
|||
/* Map Template */ |
|||
#mapcontainer { |
|||
position:relative; |
|||
} |
|||
#maplocation { |
|||
position:absolute; |
|||
} |
|||
/* Calendar Template */ |
|||
#calendar { |
|||
position:relative; |
|||
width:481px; |
|||
height:337px; |
|||
float:right; |
|||
} |
|||
#calendar img { |
|||
position:absolute; |
|||
} |
|||
#calendartable { |
|||
position: absolute; |
|||
margin: 64px 14px 0px 16px; |
|||
border-collapse: collapse; |
|||
display: block; |
|||
} |
|||
#calendartable td { |
|||
width: 60px; |
|||
height: 59px; |
|||
border-style: solid; |
|||
} |
|||
#calendartable a { |
|||
width: 100%; |
|||
height: 100%; |
|||
display:block; |
|||
font-size:0px; |
|||
} |
|||
#calendartable a:hover { |
|||
border-style:solid; |
|||
border-color:blue; |
|||
border-width:3px; |
|||
box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-webkit-box-sizing: border-box; |
|||
} |
|||
/* Copyright Templates */ |
|||
#c-fairuse { |
|||
padding:10px; |
|||
max-width:700px; |
|||
margin: 0px auto; |
|||
border: 1px solid #8DCAF0; |
|||
background-color: rgba(255, 255, 255, 0.58); |
|||
} |
|||
#c-fairuse td { |
|||
vertical-align:middle; |
|||
} |
|||
/* Alert Templates */ |
/* Alert Templates */ |
||
Line 743: | Line 565: | ||
image-rendering: -moz-crisp-edges; /* Firefox */ |
image-rendering: -moz-crisp-edges; /* Firefox */ |
||
image-rendering: pixelated; |
image-rendering: pixelated; |
||
} |
|||
/* Invert the notification icons */ |
|||
.mw-echo-notifications-badge { |
|||
filter: invert( 1 ) |
|||
hue-rotate( 180deg ) |
|||
} |
|||
/* added 17-02-2024 */ |
|||
/* Body-mounted Nav Menus */ |
|||
.vector-menu-tabs li{ |
|||
background-image: linear-gradient(to top,rgba(247,167,217,1) 1px,rgba(192,131,204,1) 1px,80%,rgba(248,209,255,0.0) 100%); |
|||
} |
|||
.vector-menu-tabs .selected { |
|||
background: linear-gradient(to top, rgba(248,209,255,0.80), 80%, rgba(255,255,255,0.0)); |
|||
} |
|||
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { |
|||
background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#F7A7D9 100%); |
|||
} |
|||
.vector-menu-dropdown { |
|||
background: linear-gradient(to top,rgba(247,167,217,1) 1px,rgba(192,131,204,0.75) 1px,80%,rgba(248,209,255,0.0) 100%); |
|||
} |
|||
.vector-menu-dropdown .vector-menu-heading { |
|||
color: #2e3133; |
|||
} |
|||
.vector-menu-dropdown .vector-menu-content { |
|||
background-color: rgba(248,209,255,1); |
|||
} |
|||
/* Dynamic top border to account for transparency - JS linked */ |
|||
.mw-body { |
|||
margin-top: calc(-1 * var(--p4)); |
|||
--p1: 100%; |
|||
--p2: 0; |
|||
--p3: 0; |
|||
--p4: 1px; |
|||
/*mask: linear-gradient(black var(--p4), white var(--p4)) luminance add, linear-gradient(to right, black var( |
|||
--p1), white var(--p1), white var(--p2), black var(--p2), black var(--p3), white var(--p3)) luminance;*/ |
|||
clip-path: polygon(0 var(--p4),var(--p1) var(--p4), var(--p1) 0, var(--p2) 0, var(--p2) var(--p4), var(--p3) var(--p4), var(--p3) 0, 100% var(--p4), 100% 100%, 0% 100%); |
|||
} |
|||
/* User navbar */ |
|||
/* #p-personal { |
|||
background: rgba(192,131,204,0.80); |
|||
border-bottom-left-radius: 5px; |
|||
padding-bottom: 4px; |
|||
padding-top: 2px; |
|||
padding-right: 15px; |
|||
height: 22px; |
|||
top: 0; |
|||
right: 0; |
|||
border: solid rgba(192,131,204,1); |
|||
border-width: 0 0 1px 1px; |
|||
} |
|||
#p-personal ul { |
|||
padding-left: 1em; |
|||
} |
|||
#p-personal a, #p-personal a.new, p-personal a:visited { |
|||
color: #0645ad; |
|||
} */ |
|||
/* Stretch footer background over subelements */ |
|||
#footer { |
|||
overflow: hidden; |
|||
} |
|||
/* Strawberry watch icon */ |
|||
.vector-menu-tabs .mw-watchlink.icon a:before{ |
|||
background-size: contain; |
|||
height: 19.5px; |
|||
width: 24px; |
|||
top: 12px; |
|||
left: 2px; |
|||
} |
|||
.vector-menu-tabs #ca-watch.icon a:hover:before, |
|||
.vector-menu-tabs #ca-unwatch.icon a:hover:before { |
|||
background-image: url(https://static.miraheze.org/celestewiki/a/a1/Strawberry_ingame.png) !important; |
|||
filter: sepia(1); |
|||
} |
|||
.vector-menu-tabs #ca-watch.icon a:before { |
|||
background-image: url(https://static.miraheze.org/celestewiki/2/20/Strawberry_collected.png) !important; |
|||
} |
|||
.vector-menu-tabs #ca-unwatch.icon a:before { |
|||
background-image: url(https://static.miraheze.org/celestewiki/a/a1/Strawberry_ingame.png) !important; |
|||
} |
|||
#mw-indicator-interwiki { |
|||
float: right; |
|||
padding: 0 3px; |
|||
border: 2px solid rgb(192, 131, 204); |
|||
border-radius: 7px; |
|||
font-family: "Consolas", sans-serif; |
|||
font-size: 0.83em; |
|||
letter-spacing: -0.5px; |
|||
background-color: rgba(192, 131, 204, 0.5); |
|||
} |
|||
#mw-indicator-interwiki img { |
|||
border-radius: 25%; |
|||
margin-right: -3px; |
|||
margin-top: -2px; |
|||
} |
} |