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 Infobox bar Translate



@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; padding: 0 !important; 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 {

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

div#simpleSearch { display: block; position: relative; margin: 0; padding-right: 1.4em; border: 0; 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% !important; margin: 0 !important; padding: 0 .55rem !important; background: url(images/5/5a/More.svg) center center no-repeat !important; background-size: 13px !important; }
 * 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 !important; line-height: 4rem !important; padding: 0 .75em !important; color: #c3f2ff; }

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

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

div#mw-head div.vectorMenu h3 { clear: both; background: none; font-size: 1em; height: auto; margin: 0; padding: 0; }

div.vectorMenu h3 span { display: block; font-size: 0.8rem; padding: 0; line-height: 4rem; color: #c3f2ff; }

div.vectorMenu div.menu, min-width: 100%; position: absolute; top: 4rem; border: 0; padding: 0; background-color: white; border-top-width: 0; clear: both; text-align: left; display: none; z-index: 2; box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
 * 1) p-personal ul {

div.vectorMenu div.menu { left: -10px; }

div.vectorMenu li a,   display: block; padding: 10px 20px; white-space: nowrap; color: black; cursor: pointer; font-size: 0.8rem; -webkit-transition: background 0.3s; transition: background 0.3s; }
 * 1) p-personal a {

div.vectorMenu li a:hover, background-color: rgba(0, 0, 0, 0.1); }
 * 1) p-personal a: hover {

div.vectorMenu li a.new, color: black; }
 * 1) p-personal a.new {

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

width: 12px; overflow: hidden; text-indent: 100%; white-space: nowrap; -webkit-transition: background 0.3s; transition: background 0.3s; }
 * 1) ca-view a,
 * 2) ca-ve-edit a,
 * 3) ca-edit a,
 * 4) ca-viewsource a,
 * 5) ca-watch.icon a,
 * 6) ca-unwatch.icon a,
 * 7) ca-talk a,
 * 8) p-cactions-label {

background: url(images/4/4d/Read.svg) no-repeat center center; }
 * 1) ca-view a {

background: url(images/8/82/Read-hover.svg) no-repeat center center; }
 * 1) ca-view a:hover {

background: url(images/3/30/Edit.svg) no-repeat center center; }
 * 1) ca-ve-edit a {

background: url(images/2/28/Edit-hover.svg) no-repeat center center; }
 * 1) ca-ve-edit a:hover {

background: url(images/5/57/Code.svg) no-repeat center center; }
 * 1) ca-edit a,
 * 2) ca-viewsource a {

background: url(images/e/e6/Code-hover.svg) no-repeat center center; }
 * 1) ca-edit a:hover,
 * 2) ca-viewsource a:hover {

width: auto; text-indent: 0; background: none; }
 * 1) ca-edit.collapsible a {

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

margin: 0; }
 * 1) ca-unwatch.icon a,
 * 2) ca-watch.icon a {

background: url(/images/0/06/Watch.svg) no-repeat center center; }
 * 1) ca-watch.icon a,
 * 2) ca-watch.icon a:focus,
 * 3) ca-unwatch.icon a:hover {

background: url(images/2/2d/Discussion.svg) center center no-repeat; background-size: 13px auto; }
 * 1) ca-talk a {

background: url(images/8/84/Discussion-hover.svg) center center no-repeat; background-size: 13px auto; }
 * 1) ca-talk a:hover {

display: none; }
 * 1) p-namespaces ul > li[id^="ca-nstab-"] {

background: url(/images/e/ee/Watch-hover.svg) no-repeat center center; }
 * 1) ca-unwatch.icon a,
 * 2) ca-watch.icon a:hover,
 * 3) ca-unwatch.icon a:focus {

position: fixed; font-family: "Electrolize", sans-serif; }
 * 1) mw-navigation > div {

text-decoration: none; }
 * 1) mw-navigation a:hover {

height: 4em; background: none; }
 * 1) mw-page-base {

div#mw-head { display: -webkit-box; display: -ms-flexbox; display: flex; left: 0; z-index: 3; padding: 0 1.5rem; height: 4rem; width: auto; box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); background: #0a1b2c; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
 * 1) left-navigation {

display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
 * 1) right-navigation {

position: relative; top: 0; left: 0; margin: 4em 0 8px 0; padding: 3em 1em; border-bottom: 1px solid #e0e0e0; background: #fefefe; }
 * 1) p-logo {

div#mw-panel { top: 0; left: 0; padding: 0; width: 12rem; height: 100%; max-height: calc(100% - 2rem - 10px); font-size: inherit; overflow-y: scroll; }

div#mw-panel div.portal div.body { margin: 0; }

div#mw-panel > div { position: relative; }

div#mw-panel div.portal { margin: 0; padding: 0; direction: ltr; background: none; }

div#mw-panel div.portal h3 { margin: 8px 0; padding: 10px 20px; border-bottom: 1px solid #d0d0d0; text-transform: uppercase; font-size: 0.6rem; color: #9e9e9e; font-weight: bold; }

div#mw-panel div.portal div.body ul li { padding: 0; line-height: auto; font-size: 0.75rem; }

div#mw-panel div.portal div.body ul li a { display: block; padding: 8px 20px; color: #616161; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }

div#mw-panel div.portal div.body ul li a:visited { color: #616161; }

div#mw-panel div.portal div.body ul li a:hover { background-color: rgba(0, 0, 0, 0.05); }

div#mw-panel #p-logo + div.portal div.body { margin-left: 0; }

/* Infobox bar */

table.infobox-table { position: relative; top: -15em; right: -4.5em; float: right; width: 33.3%; padding: 0; padding-top: 5em; color: rgba(0, 0, 0, 0.7); background: #f6f9fa; border-spacing: 0; box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.16), inset 0 2px 10px 0 rgba(0, 0, 0, 0.12); }

th.infobox-table-name { padding: 1em; text-transform: uppercase; font-stretch: semi-condensed; }

background-color: transparent; }
 * 1) infobox-table-img-bg {

.infobox-table-img img { float: left; width: 100%; height: auto; background: #fff; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); -o-object-fit: cover; object-fit: cover; }

.infobox-table th { padding: 1em 1em .5em 1em; font-size: small; text-transform: uppercase; }

.infobox-table td { padding: .8em 1.5em !important; font: caption; border-top: 1px solid #eee; }

/* Translate */

padding: 10px 20px; line-height: auto; }
 * 1) pt-uls a.uls-trigger {

.uls-trigger { background: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22….367-3.116%202.367%203.116h3.57v2.484h-11.873v-2.484z%22%2F%3E%3C%2Fsvg%3E) right 10px center no-repeat; background-size: 1.5rem; }