MediaWiki:Vector.css: Difference between revisions

From Celeste Wiki
Content deleted Content added
Forked from Stardew Valley Wiki (https://stardewcommunitywiki.com/mediawiki/index.php?title=MediaWiki:Vector.css&mobileaction=toggle_view_desktop)
 
replaced mask with clip-path per Welp's suggestion
 
(12 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.70);
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 div.vectorMenu h3, div.vectorTabs ul, div.vectorTabs li.selected, div.vectorTabs ul li, div.vectorTabs, div.vectorTabs span {
#mw-head .vectorMenu h3, .vectorTabs ul, .vectorTabs li.selected, .vectorTabs ul li, .vectorTabs, .vectorTabs span {
background:none;
background:none;
}
}


div.vectorTabs li a {
.vectorTabs li a {
color: #B7D2FF;
color: #B7D2FF;
}
}


div.vectorTabs li.new a, div.vectorTabs li.new a:visited, div.vectorMenu h3 span {
.vectorTabs li.new a, .vectorTabs li.new a:visited, .vectorMenu h3 span {
color: #99BFFF;
color: #99BFFF;
}
}


div.vectorTabs li.selected a, div.vectorTabs li.selected a:visited {
.vectorTabs li.selected a, .vectorTabs li.selected a:visited {
color: #C6DBFF;
color: #C6DBFF;
}
}


div.vectorMenu div.menu {
.vectorMenu .menu {
background-color: rgba(30, 17, 102, 0.67);
background-color: rgba(30, 17, 102, 0.67);
}
}


div.vectorMenu div.menu a {
.vectorMenu .menu a {
color: #C6DBFF;
color: #C6DBFF;
}
}
Line 129: Line 131:


#preferences {
#preferences {
background-color: rgba(209,248,255,0.67);
background-color: rgba(248,208,255,0.67);
}
}


#preftoc li.selected a {
#preftoc li.selected a {
background: rgba(209,248,255,0.67);
background: rgba(248,208,255,0.67);
}
}


Line 146: Line 148:


/* Captcha Styling */
/* Captcha Styling */
div.editOptions label, div.editOptions input#wpCaptchaWord.mw-ui-input {
div.editOptions label, div.editOptions #wpCaptchaWord.mw-ui-input {
display: inline !important;
display: inline !important;
}
}


#editform label, #editform input#wpCaptchaWord.mw-ui-input {
#editform label, #editform #wpCaptchaWord.mw-ui-input {
display: none;
display: none;
}
}
Line 156: Line 158:
/* Graphical borders */
/* Graphical borders */
#menuborder {
#menuborder {
border: 9px solid transparent;
border: 1px solid #F7A7D9;
padding: 12px;
padding: 12px;
background-color: rgba(249,208,255,0.77);
-webkit-border-image: url("skins/Vector/stardewimages/menu_border.png") 15 stretch; /* Safari 3.1-5 */
-o-border-image: url("skins/Vector/stardewimages/menu_border.png") 15 stretch; /* Opera 11-12.1 */
border-image: url("skins/Vector/stardewimages/menu_border.png") 15 stretch;
background-color:background-color: rgba(255,255,255,0.58);
}
}


div#mw-panel {
#mw-panel {
border: 6px solid transparent;
border-right: 1px solid #F7A7D9;
border-bottom: 1px solid #F7A7D9;
left: -12px;
left: -12px;
background-color: rgba(249,208,255,0.77);
-webkit-border-image: url("skins/Vector/stardewimages/menu_border.png") 15 stretch; /* Safari 3.1-5 */
-o-border-image: url("skins/Vector/stardewimages/menu_border.png") 15 stretch; /* Opera 11-12.1 */
border-image: url("skins/Vector/stardewimages/menu_border.png") 15 stretch;
background-color: rgba(209, 248, 255, 0.67);
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;
}
}


#infoboxborder {
#infoboxborder {
border: 12px solid transparent;
border: 1px solid #F7A7D9;
background-color: rgba(249,208,255,0.77);
-webkit-border-image: url("skins/Vector/stardewimages/menu_border.png") 15 stretch; /* Safari 3.1-5 */
-o-border-image: url("skins/Vector/stardewimages/menu_border.png") 15 stretch; /* Opera 11-12.1 */
border-image: url("skins/Vector/stardewimages/menu_border.png") 15 stretch;
background-color: rgba(255,255,255,0.58);
float:right;
float:right;
border-radius: 12px;
border-radius: 12px;
Line 189: Line 183:
}
}


/* Main Page Content */
body.page-Stardew_Valley_Wiki h1.firstHeading, body.page-Stardew_Valley_Wiki #contentSub, body.page-Stardew_Valley_Wiki #contentSub2 {
display: none;
}

body.page-Stardew_Valley_Wiki div#bodyContent.mw-body-content {
padding-top: 25px;
}

#nametemplate {
margin: 2px 5px 1px 2px;
display:block;
white-space:nowrap;
}


/* Navboxstyling */
/* Navboxstyling */
Line 222: Line 202:
}
}
table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td {
table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td {
border: 1px solid #8DCAF0;
border: 1px solid #CE8BF0;
padding: 0.2em;
padding: 0.2em;
background-color: rgba(255, 255, 255, 0.58);
background-color: rgba(255, 255, 255, 0.58);
Line 228: Line 208:


table.wikitable > tr > th, table.wikitable > * > tr > th {
table.wikitable > tr > th, table.wikitable > * > tr > th {
background-color: #03A007;
background-color: #C133BD;
text-align: center;
text-align: center;
border-color: #007448;
border-color: #650048;
box-shadow: 0px 1px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px rgba(0, 0, 0, 0.3);
color: white;
color: white;
Line 263: Line 243:
}
}


/* Season Schedule Table Styling */


/* Infobox Styling */
#scheduletable {
margin-bottom:-19px;
width:100%;
}


.infobox {
#seasontable {
border:1px solid rgb(132,174,236);
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,

table.springtable th {
.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,

table.falltable th {
.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;
.infobox.standard-talk.bordered td,
width:100%;
.infobox.standard-talk.bordered th {
border: 1px solid #c0c090;
}
}


/* styles for bordered infobox with merged rows */
#infoboxheader {
.infobox.bordered .mergedtoprow td,
text-align:center;
.infobox.bordered .mergedtoprow th {
font-size:24px;
border: 0;
padding-top:5px;
border-top: 1px solid #a2a9b1;
padding-bottom:5px;
/* @noflip */
text-shadow: 0px 1.5px 0px rgba(0,0,0,0.2);
border-right: 1px solid #a2a9b1;
}
}


.infobox.bordered .mergedrow td,
#infoboxsection {
.infobox.bordered .mergedrow th {
background-color:#03A007;
border: 0;
vertical-align:top;
/* @noflip */
padding-left:15px;
padding-right:5px;
border-right: 1px solid #a2a9b1;
width:105px;
border-color:#007448;
box-shadow: 0px 1px rgba(0,0,0,0.3);
color: white;
text-shadow: 0px 2px #00321f;
}
}


/* Styles for geography infoboxes, eg countries,
#infoboxdetail {
country subdivisions, cities, etc. */
vertical-align:top;
.infobox.geography {
padding-left:3px;
border-collapse: collapse;
padding-right:12px;
line-height: 1.2em;
font-size: 90%;
}
}


.infobox.geography td,
#infoboxdetail p {
.infobox.geography th {
margin:0px;
border-top: 1px solid #a2a9b1;
padding: 0.4em 0.6em 0.4em 0.6em;
}
}
.infobox.geography .mergedtoprow td,

.infobox.geography .mergedtoprow th {
#infoboxfooter {
border-top: 1px solid #a2a9b1;
width:100%;
padding: 0.4em 0.6em 0.2em 0.6em;
padding-top:5px;
}
}


.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 377: 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: #03A007;
background-color: #C133BD;
text-align: center;
text-align: center;
color: white;
color: white;
Line 497: 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 766: 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;
}
}
Retrieved from "https://celeste.ink/wiki/MediaWiki:Vector.css"