User:Alistair3149/common.css

/*

Starskin Light Beta 0.1 Created for starcitizen.tools by Alistair3149 A heavily modified Vector skin - Font Electrolize Tahoma

Color #0a1b2c | Navbar background #fefefe | Wiki logo background #fff   | Content background #f6f9fa | Page background #546e7a | Footer top #37474f | Fotter bottom

#eee   | Light Border #e0e0e0 | Dark Border

#0645ad | Link #0b0080 | Visited link #ba0000 | New link

#6c6c6c | Navbar icon #c3f2ff | Navbar icon hover / text

#347bff | Mediawiki Blue

Extension



@import 'https://fonts.googleapis.com/css?family=Electrolize';

/* Core code */

.oo-ui-icon-bell { background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M17.5%2014V9c0-3-2.3-5-5.5-5S6.5%206%206.5%209v5c0%202%200%203-2%203v1h15v-1c-2%200-2-1-2-3zM12%2020H9c0%201%201.6%202%203%202s3-1%203-2h-3z%22%2F%3E%0A%3C%2Fsvg%3E%0A); }

.oo-ui-image-invert.oo-ui-icon-bell { background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22%23FFFFFF%22%3E%0A%20%20%20%20%3Cpath%20xmlns%3Adefault%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20d%3D%22M17.5%2014V9c0-3-2.3-5-5.5-5S6.5%206%206.5%209v5c0%202%200%203-2%203v1h15v-1c-2%200-2-1-2-3zM12%2020H9c0%201%201.6%202%203%202s3-1%203-2h-3z%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E%0A); }

.oo-ui-icon-bellOn { background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M17.8%2014.7l1.7-4.7c1-2.8-.5-5.5-3.5-6.6s-5.9%200-6.9%202.8l-1.7%204.7c-.7%201.9-1%202.8-2.9%202.1l-.3%201%2014.1%205.1.3-.9c-1.9-.7-1.5-1.6-.8-3.5zM12%2019.8l-2.8-1c-.3.9.8%202.4%202.1%202.9s3.2.1%203.5-.9l-2.8-1z%22%2F%3E%0A%3C%2Fsvg%3E%0A); }

.oo-ui-image-invert.oo-ui-icon-bellOn { background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22%23FFFFFF%22%3E%0A%20%20%20%20%3Cpath%20xmlns%3Adefault%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20d%3D%22M17.8%2014.7l1.7-4.7c1-2.8-.5-5.5-3.5-6.6s-5.9%200-6.9%202.8l-1.7%204.7c-.7%201.9-1%202.8-2.9%202.1l-.3%201%2014.1%205.1.3-.9c-1.9-.7-1.5-1.6-.8-3.5zM12%2019.8l-2.8-1c-.3.9.8%202.4%202.1%202.9s3.2.1%203.5-.9l-2.8-1z%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E%0A); }

.oo-ui-icon-speechBubbles { background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M20%209v9l2%202H8V9h12zM3%204h12v4H7v7H1l2-2V4z%22%2F%3E%0A%3C%2Fsvg%3E%0A); }

.oo-ui-image-invert.oo-ui-icon-speechBubbles { background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22%23FFFFFF%22%3E%0A%20%20%20%20%3Cpath%20xmlns%3Adefault%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20d%3D%22M20%209v9l2%202H8V9h12zM3%204h12v4H7v7H1l2-2V4z%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E%0A); }

float: right; box-sizing: border-box; font-size: .8rem; text-align: right; display: block; margin: 0; padding: 10px 15px; width: 100%; height: auto; border-radius: 0; background-size: 1rem; background-repeat: no-repeat; }
 * 1) pt-notifications-alert .mw-echo-notifications-badge,
 * 2) pt-notifications-message .mw-echo-notifications-badge {

body.ltr #pt-notifications-alert .mw-echo-notifications-badge, body.ltr #pt-notifications-message .mw-echo-notifications-badge { background-position: 10px center; }

width: 50% !important; }
 * 1) pt-notifications-alert,
 * 2) pt-notifications-message {

border-radius: 0; background-color: #d2d2d2; color: #ffffff; font-size: 1em; }
 * 1) pt-notifications-alert .mw-echo-notifications-badge,
 * 2) pt-notifications-message .mw-echo-notifications-badge {

.mw-content-ltr .toc ul ul, .mw-content-ltr #toc ul ul, .mw-content-rtl .mw-content-ltr .toc ul ul, .mw-content-rtl .mw-content-ltr #toc ul ul { margin: 0 0 0 1em }

h1, h2, h3, h4, h5, h6 { border: none; }

hr { display: none; }

.toc, .mw-warning, .toccolours { border: 0; background-color: #e0e0e0; }
 * toc,

.toc { position: fixed; bottom: 0; left: 0; z-index: 2; padding: 0; box-sizing: border-box; color: white; width: 12rem; max-height: calc(100% - 4rem); overflow-y: scroll; box-shadow: inset 0 4px 15px 0 rgba(0, 0, 0, 0.15); -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
 * toc,

color: #37474f; }
 * 1) toc h2,
 * 2) toc span {

.toc h2 { display: none; }
 * 1) toc h2,

.toctoggle { display: block; text-indent: 100%; overflow: hidden; font-size: 0; }

.toctoggle a { padding: 10px 20px; background: url(images/0/00/ToC.svg) center center no-repeat; background-size: 14px; height: 1rem; }

.toc a { display: block; text-decoration: none; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
 * 1) toc a,

.toc a:hover { background-color: rgba(0, 0, 0, 0.1); }
 * 1) toc a:hover,

.toc ul ul { margin: 0 0 0 1em; }
 * 1) toc ul ul,

.toc ul li a { padding: 5px 20px; line-height: .85rem; font-family: "Electrolize", sans-serif; font-size: .7rem; }

.tocnumber { display: none; }

.mw-wiki-logo { background-image: url(images/4/40/Scwiki.svg); }

html, body { font-family: Tahoma, sans-serif; }

body { -webkit-font-smoothing: antialiased; background: #f6f9fa; -moz-osx-font-smoothing: grayscale; }

.mw-body { position: relative; z-index: 2; margin-top: 0; margin-left: 12em; padding: 4em; background: #fff; border: 0; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); direction: ltr; }

.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 { font-family: "Electrolize", sans-serif; }

.mw-body h3, .mw-body h4 { font-weight: normal; }

position: relative; top: 0; right: 0; padding: 0 0 0 .5rem; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
 * 1) p-personal {

display: block; margin: 0; padding: 0; width: 36px; height: 100%; background: url(skins/Vector/images/user-icon.svg) left center no-repeat, url(/skins/Vector/images/arrow-down-icon.svg) right center no-repeat; text-indent: 100%; white-space: nowrap; overflow: hidden; }
 * 1) p-personal h3 {

right: .5rem; }
 * 1) p-personal ul {

display: block; }
 * 1) p-personal:hover > ul {

line-height: normal; margin: 0; width: 100%; white-space: nowrap; }
 * 1) p-personal li {

background: none; }
 * 1) pt-userpage,
 * 2) pt-anonuserpage {

margin: 0 1rem 0 0; height: 100%; line-height: 100%; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
 * 1) p-search {

height: 100%; }
 * 1) p-search form,
 * 2) p-search input {

div#simpleSearch { display: block; position: relative; margin: 0; padding-right: 1.4em; width: 9rem; height: 100%; background: none; }

div#simpleSearch input { font-family: "Electrolize", sans-serif; color: #c3f2ff; }

div#simpleSearch #searchInput { padding: 0; box-sizing: content-box; font-size: .8rem; -webkit-transition: all .3s; transition: all .3s; }

div#simpleSearch #searchInput:focus { border-bottom: 1px solid #40e6f0; box-shadow: 0 1px 0 0 #40e6f0; }

div#simpleSearch #searchInput.placeholder { color: #c3f2ff; }

div#simpleSearch #searchInput::-webkit-input-placeholder { color: #c3f2ff; }

div#simpleSearch #searchInput::-moz-placeholder { color: #c3f2ff; }

div#simpleSearch #searchInput:-ms-input-placeholder { color: #c3f2ff; }

div#simpleSearch #searchInput:-moz-placeholder { color: #c3f2ff; }

div#simpleSearch #searchButton, div#simpleSearch #mw-searchButton { text-indent: 100%; background: url(skins/Vector/images/search-ltr.svg) center center no-repeat; -webkit-transition: background 0.3s; transition: background 0.3s; }

div#simpleSearch #searchButton:hover, div#simpleSearch #mw-searchButton:hover { background-image: url(images/d/da/Search-ltr-hover.svg); }

margin-left: auto; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
 * 1) p-views {

margin-right: auto; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
 * 1) p-cactions {

height: 100%; margin: 0; padding: 0 .55rem; background: url(images/5/5a/More.svg) center center no-repeat; background-size: 13px; }
 * 1) p-cactions-label {

background: url(images/8/85/More-hover.svg) center center no-repeat; background-size: 13px; }
 * 1) p-cactions-label:hover {

display: none; }
 * 1) p-cactions-label span,
 * 2) p-cactions-label a {

div.vectorTabs { clear: both; height: auto; background: none; padding-left: 1px }

div.vectorTabs ul { background: none; }

div.vectorTabs ul li { display: block; background: none; }

div.vectorTabs li.selected { border-bottom: 2px solid #40e6f0; background: none; }

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

div.vectorTabs li a { display: block; height: auto; line-height: 4rem; padding: 0 .75em; color: #c3f2ff; }

div.vectorTabs span { display: block; background: none; }

div.vectorTabs span a { display: inline-block; padding: 0; }

div.vectorTabs span > a { clear: both; display: block; }