MediaWiki:Vector.css: Difference between revisions

From Pikipedia, the Pikmin wiki
Jump to navigation Jump to search
mNo edit summary
mNo edit summary
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 center bottom;
  min-height: 85px;
min-height: 85px;
}
}


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


Line 184: Line 184:
  */
  */
#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 222:
  */
  */
.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 236:
  */
  */
.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 250:
  */
  */
#catlinks {
#catlinks {
  /* Categories box. */
/* Categories box. */
  border-radius: 8px;
border-radius: 8px;
}
}


Line 259: Line 259:
  */
  */
.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 284:
  */
  */
.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;
}
}



Revision as of 09:21, 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 center bottom;
	min-height: 85px;
}

#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;
}