MediaWiki:Vector.css: Difference between revisions

From Pikipedia, the Pikmin wiki
Jump to navigation Jump to search
mNo edit summary
(slightly less fade. don't want to go too solid)
 
(3 intermediate revisions by the same user not shown)
Line 8: Line 8:
  */
  */
body {
body {
  /* Background of everything. */
/* Background of everything. */
  background: #C2DAB8 url(https://pikmin.wiki.gallery/images/3/37/Vector_background.jpg) center top;
background: #C2DAB8 url(https://pikmin.wiki.gallery/images/3/37/Vector_background.jpg) center top;
}
}


@media all and (min-width: 1350px) {
@media all and (min-width: 1350px) {
  /* Add a right padding on wider displays. */
/* Add a right padding on wider displays. */
  body, #right-navigation {
body, #right-navigation {
    padding-right: 11em;
padding-right: 11em;
  }
}
}
}


Line 24: Line 24:
  */
  */
#mw-page-base {
#mw-page-base {
  /* Full-white header-like background that the Vector skin has. */
/* Full-white header-like background that the Vector skin has. */
  background: initial;
background: initial;
}
}


nav.vector-menu-tabs {
nav.vector-menu-tabs {
  /* Tabs div. */
/* Tabs div. */
  background: initial;
background: initial;
  margin-left: 10px;
margin-left: 10px;
  height: 37px;
height: 37px;
}
}


nav.vector-menu-tabs ul {
nav.vector-menu-tabs ul {
  /* Tabs ul. */
/* Tabs ul. */
  background: initial;
background: initial;
  height: 37px;
height: 37px;
}
}


nav.vector-menu-tabs ul > li {
nav.vector-menu-tabs ul > li {
  /* Tabs. */
/* Tabs. */
  background: #cec;
background: #cec;
  border: 2px solid #66b283;
border: 2px solid #66b283;
  border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
  margin-right: 10px;
margin-right: 10px;
  line-height: 0.5em;
line-height: 0.5em;
}
}


nav.vector-menu-tabs li.selected {
nav.vector-menu-tabs li.selected {
  /* Current tab. */
/* Current tab. */
  background: #F4F9F2;
background: #F4F9F2;
  background: linear-gradient(to top,#F4F9F2 2px,#fffc 2px);
background: linear-gradient(to top,#F4F9F2 2px,#fffc 2px);
  padding-bottom: 2px;
padding-bottom: 2px;
  border-bottom: 0;
border-bottom: 0;
}
}


.vector-menu-tabs, .vector-menu-tabs a,
.vector-menu-tabs, .vector-menu-tabs a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
#mw-head .vector-menu-dropdown .vector-menu-heading {
  /* Remove blue from tabs. */
/* Remove blue from tabs. */
  background: none;
background: none;
}
}


Line 71: Line 71:


#p-search {
#p-search {
  /* Search container. */
/* Search container. */
  margin-right: 10px;
margin-right: 10px;
}
}


#p-search form {
#p-search form {
  /* Search form. */
/* Search form. */
  margin-top: 10px;
margin-top: 10px;
}
}


#searchInput, .rcoptions #tagfilter {
#searchInput, .rcoptions #tagfilter {
  /* Search bar and RC tag filter. */
/* Search bar and RC tag filter. */
  background: #fff;
background: #fff;
  border-radius: 6px;
border-radius: 6px;
  border: 1px solid #a2a9b1;
border: 1px solid #a2a9b1;
  padding: 0.3em 0.4em 0.2em;
padding: 0.3em 0.4em 0.2em;
  transition: border-color 250ms,box-shadow 250ms;
transition: border-color 250ms,box-shadow 250ms;
}
}
.rcoptions #tagfilter:hover {
.rcoptions #tagfilter:hover {
  /* RC tag filter hover. */
/* RC tag filter hover. */
  border-color: #72777d;
border-color: #72777d;
}
}


#searchButton {
#searchButton {
  /* Search button. */
/* Search button. */
  background-position: center 5px;
background-position: center 5px;
}
}


#ca-watch, #ca-unwatch {
#ca-watch, #ca-unwatch {
  /* Watch/unwatch button. */
/* Watch/unwatch button. */
  line-height: 2em;
line-height: 2em;
}
}


Line 108: Line 108:
  */
  */
#p-logo + .mw-portlet .vector-menu-heading {
#p-logo + .mw-portlet .vector-menu-heading {
  /* Show "Navigation" header. */
/* Show "Navigation" header. */
  display: block;
display: block;
}
}


.vector-menu-portal .vector-menu-heading {
.vector-menu-portal .vector-menu-heading {
  /* Section headers. */
/* Section headers. */
  color: #000;
color: #000;
  border-bottom: 1px solid #66b283;
border-bottom: 1px solid #66b283;
  margin-right: 10px;
margin-right: 10px;
}
}


#mw-panel .portal {
#mw-panel .portal {
  /* Sections. */
/* Sections. */
  margin-top: 10px;
margin-top: 10px;
}
}


#mw-panel #p-logo + .portal,
#mw-panel #p-logo + .portal,
#mw-panel .portal, #p-personal {
#mw-panel .portal, #p-personal {
  /* Sidebar sections, as well as header personal info box. */
/* Sidebar sections, as well as header personal info box. */
  padding: 6px;
padding: 6px;
  padding-left: 10px;
padding-left: 10px;
  border: 2px solid #fff8;
border: 2px solid #fff8;
  border-radius: 12px;
border-radius: 12px;
  box-shadow: inset 0 0 20px #fff8;
box-shadow: inset 0 0 20px #fff8;
  background-color: #fff4;
background-color: #fff4;
}
}


.vector-menu-portal .vector-menu-content ul {
.vector-menu-portal .vector-menu-content ul {
  /* Lists. */
/* Lists. */
  list-style-image: url(https://pikmin.wiki.gallery/images/a/a5/Vector_bullet.png);
list-style-image: url(https://pikmin.wiki.gallery/images/a/a5/Vector_bullet.png);
}
}


#p-personal {
#p-personal {
  /* Personal info box. */
/* Personal info box. */
  padding: 0 10px 2px 0;
padding: 0 10px 2px 0;
  right: 0.33em;
right: 0.33em;
}
}


#p-personal ul {
#p-personal ul {
  /* Personal info box list. */
/* Personal info box list. */
  padding-left: 0;
padding-left: 0;
}
}


.vector-user-menu-legacy #pt-userpage a {
.vector-user-menu-legacy #pt-userpage a {
  /* Logged-in user icon. */
/* Logged-in user icon. */
  background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2213.836%22 viewBox=%220 0 12 13.836%22%3E %3Cpath fill=%22%233C8F5B%22 d=%22M1.938%2C6.656c-1.32%2C1.485-1.47%2C3.15-0.97%2C4.25c0.323%2C0.707%2C0.78%2C1.127%2C1.313%2C1.375 c0.496%2C0.229%2C1.074%2C0.273%2C1.658%2C0.282c0.023%2C0%2C0.04%2C0.03%2C0.062%2C0.03h4.187c0.61%2C0%2C1.225-0.125%2C1.75-0.405 c0.527-0.28%2C0.961-0.718%2C1.188-1.376c0.335-0.964%2C0.175-2.529-1.094-4.03C9.094%2C7.954%2C7.68%2C8.719%2C6.065%2C8.719 c-1.677%2C0-3.182-0.812-4.125-2.063H1.938z%22/%3E %3Cpath fill=%22%233C8F5B%22 d=%22M6.063%2C0c-1.89%2C0-3.595%2C1.674-3.594%2C3.563C2.467%2C5.45%2C4.173%2C7.155%2C6.06%2C7.155 c1.89%2C0%2C3.564-1.705%2C3.563-3.593C9.625%2C1.673%2C7.95%2C0%2C6.063%2C0L6.063%2C0z%22/%3E %3C/svg%3E");
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2213.836%22 viewBox=%220 0 12 13.836%22%3E %3Cpath fill=%22%233C8F5B%22 d=%22M1.938%2C6.656c-1.32%2C1.485-1.47%2C3.15-0.97%2C4.25c0.323%2C0.707%2C0.78%2C1.127%2C1.313%2C1.375 c0.496%2C0.229%2C1.074%2C0.273%2C1.658%2C0.282c0.023%2C0%2C0.04%2C0.03%2C0.062%2C0.03h4.187c0.61%2C0%2C1.225-0.125%2C1.75-0.405 c0.527-0.28%2C0.961-0.718%2C1.188-1.376c0.335-0.964%2C0.175-2.529-1.094-4.03C9.094%2C7.954%2C7.68%2C8.719%2C6.065%2C8.719 c-1.677%2C0-3.182-0.812-4.125-2.063H1.938z%22/%3E %3Cpath fill=%22%233C8F5B%22 d=%22M6.063%2C0c-1.89%2C0-3.595%2C1.674-3.594%2C3.563C2.467%2C5.45%2C4.173%2C7.155%2C6.06%2C7.155 c1.89%2C0%2C3.564-1.705%2C3.563-3.593C9.625%2C1.673%2C7.95%2C0%2C6.063%2C0L6.063%2C0z%22/%3E %3C/svg%3E");
}
}


.vector-user-menu-legacy #pt-userpage a,
.vector-user-menu-legacy #pt-userpage a,
.vector-user-menu-legacy #pt-anonuserpage {
.vector-user-menu-legacy #pt-anonuserpage {
  /* User/anon icon position. */
/* User/anon icon position. */
  background-position: left 5px;
background-position: left 5px;
}
}


Line 167: Line 167:
  */
  */
#footer {
#footer {
  /* Footer. */
/* Footer. */
  background: url(https://pikmin.wiki.gallery/images/8/83/Vector_banner.png) no-repeat center bottom;
background: url(https://pikmin.wiki.gallery/images/8/83/Vector_banner.png) no-repeat right bottom;
  min-height: 85px;
min-height: 75px;
border-width: 8px;
border-bottom-style: solid;
border-image: linear-gradient(to right, rgba(242, 255, 192, 0), rgba(242, 255, 192, 255) 20%, rgba(242, 255, 192, 255) 80%, rgba(242, 255, 192, 0)) 1;
}
}


#footer::after {
#footer::after {
  /* Clear fix. */
/* Clear fix. */
  content: '';
content: '';
  display: block;
display: block;
  clear: both;
clear: both;
}
}


Line 184: Line 187:
  */
  */
#content {
#content {
  /* Article body. */
/* Article body. */
  background: #fffc;
background: #fffc;
  border-right-width: initial;
border-right-width: initial;
  border: 2px solid #66b283;
border: 2px solid #66b283;
  border-radius: 14px;
border-radius: 14px;
}
}


.mw-body-content {
.mw-body-content {
  /* Article body. */
/* Article body. */
  font-size: 11pt;
font-size: 11pt;
}
}


.pikipediaBox, .mw-message-box,
.pikipediaBox, .mw-message-box,
.messagebox, .errorbox, .warningbox, .successbox {
.messagebox, .errorbox, .warningbox, .successbox {
  /* Pikipedia & MediaWiki boxes. */
/* Pikipedia & MediaWiki boxes. */
  border-radius: 8px;
border-radius: 8px;
}
}


.mw-indicators {
.mw-indicators {
  /* Game icons. */
/* Game icons. */
  top: 7px;
top: 7px;
}
}


#localNotice {
#localNotice {
  /* Site notice. */
/* Site notice. */
  margin: -9px 0 6px;
margin: -9px 0 6px;
}
}


#localNotice .pikipediaBox {
#localNotice .pikipediaBox {
  /* Site notice box. */
/* Site notice box. */
  margin: 0 auto 5px;
margin: 0 auto 5px;
}
}


Line 222: Line 225:
  */
  */
.infobox {
.infobox {
  /* Infoboxes. */
/* Infoboxes. */
  border-radius: 8px;
border-radius: 8px;
}
}


.infobox th {
.infobox th {
  /* Headers. */
/* Headers. */
  border-radius: 6px;
border-radius: 6px;
}
}


Line 236: Line 239:
  */
  */
.navbox {
.navbox {
  /* Navboxes. */
/* Navboxes. */
  border-radius: 8px;
border-radius: 8px;
}
}


table.navbox th {
table.navbox th {
  /* Headers. */
/* Headers. */
  border-radius: 6px;
border-radius: 6px;
}
}


Line 250: Line 253:
  */
  */
#catlinks {
#catlinks {
  /* Categories box. */
/* Categories box. */
  border-radius: 8px;
border-radius: 8px;
}
}


Line 259: Line 262:
  */
  */
.titledBox {
.titledBox {
  /* Section boxes. */
/* Section boxes. */
  border-radius: 16px;
border-radius: 16px;
  margin-top: 32px;
margin-top: 32px;
}
}


.titledBoxTitle {
.titledBoxTitle {
  /* Section box titles. */
/* Section box titles. */
  border-radius: 12px;
border-radius: 12px;
}
}


.main-page-left-col {
.main-page-left-col {
  /* Left column. */
/* Left column. */
  padding-right: 16px;
padding-right: 16px;
}
}


.main-page-right-col {
.main-page-right-col {
  /* Right column. */
/* Right column. */
  padding-left: 16px;
padding-left: 16px;
}
}


Line 284: Line 287:
  */
  */
.mw-editform .editOptions {
.mw-editform .editOptions {
  /* Edit options form. */
/* Edit options form. */
  border-bottom-left-radius: 12px;
border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
border-bottom-right-radius: 12px;
}
}



Latest revision as of 10:22, July 21, 2024

/* CSS placed here will affect users of the Vector skin */

/* Shared Vector styles
       Edit here: https://www.pikminwiki.com/MediaWiki:Gadget-SharedVector.css */

/*
 * Body.
 */
body {
	/* Background of everything. */
	background: #C2DAB8 url(https://pikmin.wiki.gallery/images/3/37/Vector_background.jpg) center top;
}

@media all and (min-width: 1350px) {
	/* Add a right padding on wider displays. */
	body, #right-navigation {
		padding-right: 11em;
	}
}


/*
 * Header.
 */
#mw-page-base {
	/* Full-white header-like background that the Vector skin has. */
	background: initial;
}

nav.vector-menu-tabs {
	/* Tabs div. */
	background: initial;
	margin-left: 10px;
	height: 37px;
}

nav.vector-menu-tabs ul {
	/* Tabs ul. */
	background: initial;
	height: 37px;
}

nav.vector-menu-tabs ul > li {
	/* Tabs. */
	background: #cec;
	border: 2px solid #66b283;
	border-radius: 10px 10px 0px 0px;
	margin-right: 10px;
	line-height: 0.5em;
}

nav.vector-menu-tabs li.selected {
	/* Current tab. */
	background: #F4F9F2;
	background: linear-gradient(to top,#F4F9F2 2px,#fffc 2px);
	padding-bottom: 2px;
	border-bottom: 0;
}

.vector-menu-tabs, .vector-menu-tabs a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
	/* Remove blue from tabs. */
	background: none;
}

.vector-menu-tabs-legacy .new a,
.vector-menu-tabs-legacy .new a:visited {
	/* Non-existent page tab link color. */
	color: #880;
}

#p-search {
	/* Search container. */
	margin-right: 10px;
}

#p-search form {
	/* Search form. */
	margin-top: 10px;
}

#searchInput, .rcoptions #tagfilter {
	/* Search bar and RC tag filter. */
	background: #fff;
	border-radius: 6px;
	border: 1px solid #a2a9b1;
	padding: 0.3em 0.4em 0.2em;
	transition: border-color 250ms,box-shadow 250ms;
}
.rcoptions #tagfilter:hover {
	/* RC tag filter hover. */
	border-color: #72777d;
}

#searchButton {
	/* Search button. */
	background-position: center 5px;
}

#ca-watch, #ca-unwatch {
	/* Watch/unwatch button. */
	line-height: 2em;
}


/*
 * Sidebar.
 */
#p-logo + .mw-portlet .vector-menu-heading {
	/* Show "Navigation" header. */
	display: block;
}

.vector-menu-portal .vector-menu-heading {
	/* Section headers. */
	color: #000;
	border-bottom: 1px solid #66b283;
	margin-right: 10px;
}

#mw-panel .portal {
	/* Sections. */
	margin-top: 10px;
}

#mw-panel #p-logo + .portal,
#mw-panel .portal, #p-personal {
	/* Sidebar sections, as well as header personal info box. */
	padding: 6px;
	padding-left: 10px;
	border: 2px solid #fff8;
	border-radius: 12px;
	box-shadow: inset 0 0 20px #fff8;
	background-color: #fff4;
}

.vector-menu-portal .vector-menu-content ul {
	/* Lists. */
	list-style-image: url(https://pikmin.wiki.gallery/images/a/a5/Vector_bullet.png);
}

#p-personal {
	/* Personal info box. */
	padding: 0 10px 2px 0;
	right: 0.33em;
}

#p-personal ul {
	/* Personal info box list. */
	padding-left: 0;
}

.vector-user-menu-legacy #pt-userpage a {
	/* Logged-in user icon. */
	background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2213.836%22 viewBox=%220 0 12 13.836%22%3E %3Cpath fill=%22%233C8F5B%22 d=%22M1.938%2C6.656c-1.32%2C1.485-1.47%2C3.15-0.97%2C4.25c0.323%2C0.707%2C0.78%2C1.127%2C1.313%2C1.375 c0.496%2C0.229%2C1.074%2C0.273%2C1.658%2C0.282c0.023%2C0%2C0.04%2C0.03%2C0.062%2C0.03h4.187c0.61%2C0%2C1.225-0.125%2C1.75-0.405 c0.527-0.28%2C0.961-0.718%2C1.188-1.376c0.335-0.964%2C0.175-2.529-1.094-4.03C9.094%2C7.954%2C7.68%2C8.719%2C6.065%2C8.719 c-1.677%2C0-3.182-0.812-4.125-2.063H1.938z%22/%3E %3Cpath fill=%22%233C8F5B%22 d=%22M6.063%2C0c-1.89%2C0-3.595%2C1.674-3.594%2C3.563C2.467%2C5.45%2C4.173%2C7.155%2C6.06%2C7.155 c1.89%2C0%2C3.564-1.705%2C3.563-3.593C9.625%2C1.673%2C7.95%2C0%2C6.063%2C0L6.063%2C0z%22/%3E %3C/svg%3E");
}

.vector-user-menu-legacy #pt-userpage a,
.vector-user-menu-legacy #pt-anonuserpage {
	/* User/anon icon position. */
	background-position: left 5px;
}


/*
 * Footer.
 */
#footer {
	/* Footer. */
	background: url(https://pikmin.wiki.gallery/images/8/83/Vector_banner.png) no-repeat right bottom;
	min-height: 75px;
	border-width: 8px;
	border-bottom-style: solid;
	border-image: linear-gradient(to right, rgba(242, 255, 192, 0), rgba(242, 255, 192, 255) 20%, rgba(242, 255, 192, 255) 80%, rgba(242, 255, 192, 0)) 1;
}

#footer::after {
	/* Clear fix. */
	content: '';
	display: block;
	clear: both;
}


/*
 * Main text.
 */
#content {
	/* Article body. */
	background: #fffc;
	border-right-width: initial;
	border: 2px solid #66b283;
	border-radius: 14px;
}

.mw-body-content {
	/* Article body. */
	font-size: 11pt;
}

.pikipediaBox, .mw-message-box,
.messagebox, .errorbox, .warningbox, .successbox {
	/* Pikipedia & MediaWiki boxes. */
	border-radius: 8px;
}

.mw-indicators {
	/* Game icons. */
	top: 7px;
}

#localNotice {
	/* Site notice. */
	margin: -9px 0 6px;
}

#localNotice .pikipediaBox {
	/* Site notice box. */
	margin: 0 auto 5px;
}


/*
 * Infoboxes.
 */
.infobox {
	/* Infoboxes. */
	border-radius: 8px;
}

.infobox th {
	/* Headers. */
	border-radius: 6px;
}


/*
 * Navboxes.
 */
.navbox {
	/* Navboxes. */
	border-radius: 8px;
}

table.navbox th {
	/* Headers. */
	border-radius: 6px;
}


/*
 * Categories.
 */
#catlinks {
	/* Categories box. */
	border-radius: 8px;
}


/*
 * Main page.
 */
.titledBox {
	/* Section boxes. */
	border-radius: 16px;
	margin-top: 32px;
}

.titledBoxTitle {
	/* Section box titles. */
	border-radius: 12px;
}

.main-page-left-col {
	/* Left column. */
	padding-right: 16px;
}

.main-page-right-col {
	/* Right column. */
	padding-left: 16px;
}


/*
 * Edit page.
 */
.mw-editform .editOptions {
	/* Edit options form. */
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
}


/*
 * Green UI elements.
 */
#mw-sidebar-button:focus {
	border-color: #080;
	box-shadow: inset 0 0 0 1px #080;
}
#searchInput:focus, #simpleSearch:hover #searchInput:focus,
.rcoptions #tagfilter:focus, .rcoptions #tagfilter:hover:focus {
	border-color: #080;
	box-shadow: inset 0 0 0 1px #080,inset 0 0 0 2px #fff;
}
.suggestions-result-current {
	background-color: #2a8d4b;
}