Home
/*================================================ Common.css ================================================*/
/* Note: CSS placed here will be applied to all skins. */
/*================================================ Colours ================================================*/
- root {
/* surface colours */ --background: #0C161E; --background_dark: #090E18;
--surface: #131D25; --surface_dark: #19262C; --surface_light: #1a262f; --surface_light_variant: #293b4a;
/* links */ --link: #4C99B9; --link_external: #4EA4C8; --link_visited: #287493; --link_selected: #6BCED4; --link_hovered: var(--link_selected); --link_hover: var(--link_selected); --redlink: #ee5454; --redlink_visited: #d04848;
/* text */ --text_low_emphasis: #a4a4a4; --text_content: #d0d0d0; --text_heading: #e1e1e1;
/* component colours */ --tab_selected: #e1e1e1;
--divider: rgba(164, 163, 163, 0.11); }
/*================================================ Values ================================================*/
- root {
--transition_time: 0.25s; --transition_speed: var(--transition_time);
}
/*================================================ Fonts ================================================*/
/* Free alternative to Starfield's menu font (NB Architekt Std Bold) */ @font-face {
font-family: 'Barlow';
src: url('/w/extensions/fonts/Barlow-Medium.ttf') format('truetype');
}
@font-face {
font-family: 'Barlow-Semibold';
src: url('/w/extensions/fonts/Barlow-SemiBold.ttf') format('truetype');
}
/*================================================ General ================================================*/
/* resize wiki logo slightly */
- p-logo a:hover { filter: drop-shadow(1px 1px 7px var(--link_visited)); }
- p-logo a {
transition: all var(--transition_speed); background-size: contain; background-origin: content-box; background-size: 150px;
}
/* create body background image/gradient */ body {
height: fit-content; /* ensure gradient fits whole page content */ background: url(//images.starfieldwiki.net/backgrounds/lines_transparent_075.png) no-repeat, linear-gradient(var(--background), var(--background_dark)); background-attachment: fixed; font-family: "Barlow"; font-size: 1.1em !important; /* slightly increase font size to compensate for font's smaller characters */ background-repeat: no-repeat; background-attachment: fixed; background-position: center center !important; background-size: cover;
}
- content, .mw-body {
background: var(--surface); border: 2px solid var(--divider);
}
- mw-page-base {
background: unset !important;
}
/* cards */ .em-section, .em-card {
background: var(--surface_light); border: solid 2px var(--divider); padding: 8px;
}
/*================================================ Text ================================================*/
/* set barlow fonts on headings */
- firstHeading, h1 { font-family: "Barlow-Semibold" !important; }
h1, h2, h3, h4, h5, h6 {
font-family: "Barlow" !important; color: var(--text_heading) !important;
}
/* style heading underlines */ h1, h2 { border-bottom: 1px solid var(--divider); }
/* set body to text content colour */ body, .mw-body-content { color: var(--text_content); }
/* sidebar headings */ div#mw-panel div.portal h3 {
text-transform: capitalize !important; font-size: medium;
}
/* bullet points */ li::marker { color: var(--text_low_emphasis) !important; } span.tocnumber { color: var(--text_low_emphasis) !important; } ul {
list-style-type: square; list-style-image: unset !important;
}
/* set toc toggle to link colour */ .toctogglelabel { color: var(--link); } .toctogglelabel:hover { color: var(--link_hover); }
/*================================================ Links ================================================*/
/* standard links */ a:link:not(.new, a[href*="redlink"]) { color: var(--link) !important; } /* normal link */ a:visited:not(.new) { color: var(--link_visited) !important; } /* visited link */ a:hover:not(.new) { color: var(--link_hovered) !important; } /* hovered link */
/* redlinks */ a.new, a[href*="redlink"] { color: var(--redlink) !important; } /* normal redlink */ a.new:visited, a[href*="redlink"]:visited { color: var(--redlink_visited) !important; } /* visited redlink */
/* standard link colors /
.mw-body-content a:link { color: #0000FF; } / normal unvisited links /
.mw-body-content a:link:visited { color: #0B0080; } / visited links /
.mw-body-content a:link:active { color: #FF0000; } / active links /
.mw-body-content a:link.new { color: #FF0000; } / new links /
.mw-body-content a:link.extiw { color: #3366BB; } / interwiki links /
.mw-body-content a:link.external { color: #3366BB; } / external links /
.mw-body-content a:link.stub { color: #772233; } / hovered links */
.mw-body-content a:link {color: #FF0000} .mw-body-content a:visited {color: #00FF00} .mw-body-content a:hover {color: #FF00FF} .mw-body-content a:active {color: #0000FF}
.coloredlinks a { color:inherit; }
/*================================================ Home ================================================*/
/* make title heading on homepage ALL CAPS */ .rootpage-Home .mw-headline:not(.news-div span), .rootpage-Home #firstHeading {
text-transform: capitalize !important;
}
/* disable underlines on headers on home */ .rootpage-Home h2 {
border-bottom: unset; margin-bottom: 0.5em !important;
}
/* banner */
- em-hero-banner {
overflow: hidden; max-height: 300px; min-height: 150px; border: solid 2px var(--divider); position: relative; display: flex;
}
- em-hero-banner p {
width: inherit !important; height: inherit !important; margin: 0; line-height: 0;
} .em-hero-banner-background {
position: absolute; height: 100%; width: 100%;
} .em-hero-background-img {
height: 100% !important; width: 100% !important; object-fit: cover !important; object-position: center;
} .em-hero-logo {
filter: drop-shadow(1px 2px 5px black); width: clamp(100px, 30vw, 350px) !important;
} .em-hero-banner-content {
display: inline-flex; flex-direction: row; place-items: center !important; position: relative; backdrop-filter: blur(3px) brightness(0.7); flex-grow: 1; text-align: center; justify-content: space-around;
} .em-hero-banner-content p {
line-height: 1.6 !important; margin: 0.5em 0 !important;
} .em-hero-banner-content-text { max-width: 25vw; /* constrain text width for readability */
min-width: 300px; color: var(--text_heading); text-shadow: 1px 2px 5px black;
}
/* content grid */
.content_grid {
display: flex; color: var(--text_heading); font-size: 1.2rem; text-shadow: 1px 2px 5px black; font-family: "Barlow-Semibold"; gap: 16px; flex-wrap: wrap; justify-content: center; padding: 8px;
}
.content_grid .thumb {
width: fit-content; height: fit-content; clear: unset; float: unset; margin: 0; transition: all var(--transition_speed);
}
.content_grid .thumb:hover .content_image {
transform: scale(1.3);
}
.content_grid .thumbinner {
position: relative; width: fit-content !important; height: fit-content !important;
}
.content_grid .thumbcaption {
position: absolute; bottom: 5px; left: 5px; pointer-events: none;
}
.content_image {
width: 160px; height: 70px; object-fit: cover; transition: all 0.3s;
}
- em-content-main {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 5px; padding: .5em 1em; /* border: 1px solid #dddddd; background-color: #2a2a2a; */
}
- em-content-other {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 5px; padding: .5em 1em; /* border: 1px solid #dddddd; background-color: #2a2a2a; */
}
/*================================================ Sidebar ================================================*/
/* remove sidebar section borders */
- mw-navigation #mw-panel div.portal { border-top: unset; }
/* delete first sidebar heading (is made invisible by mediawiki anyway) */
- p-thisisignored { display: none; }
/* set up sidebar entry item icons */
- n-Discord {
background-image: url(//images.starfieldwiki.net/icons/discordiconsmall.png); background-position: top left; background-repeat: no-repeat; padding-left: 20px !important;
}
- n-Facebook {
background-image: url(//images.starfieldwiki.net/icons/facebookiconsmall.png); background-position: top left; background-repeat: no-repeat; padding-left: 20px !important;
}
- n-Twitter {
background-image: url(//images.starfieldwiki.net/icons/twittericonsmall.png); background-position: top left; background-repeat: no-repeat; padding-left: 20px !important;
} li[id*="Deltia"] {
background-image: url(//images.starfieldwiki.net/icons/deltiasgaming.ico); background-position: top left; background-repeat: no-repeat; padding-left: 20px !important; background-size: 16px;
}
/*================================================ Tabs ================================================*/
/* tabs */ li[id^="ca"] {
text-transform: capitalize; background-image: unset !important; background-color: unset !important; font-family: "Barlow-Semibold"; font-size: 1.25em; height: fit-content !important; width: fit-content !important; padding: 5px !important; padding-left: 8px !important; padding-right: 8px !important;
}
/* selected tabs */
li[id^="ca"].selected {
background: var(--tab_selected) !important; color: black;
}
li[id^="ca"] a {
height: auto !important; margin: 0; padding: 0 !important;
}
li[id^="ca"] span {
display: block;
}
.darkvectorTabs {
position: relative; background-color: unset !important; height: fit-content !important; bottom: 1px;
} .darkvectorTabs ul {
background-color: unset !important; display: flex; gap: 16px; background-image: unset !important;
}
/* hide tab text on watch/unwatch tab */
- ca-unwatch a, #ca-watch a { color: #0000 !important; }
- ca-unwatch a:hover, #ca-watch a:hover { color: #0000 !important; }
/* hide "read" tab */
- ca-view { display: none !important; }
- ca-viewsource { display: none !important; }
- pt-anontalk { display: none!important; }
- pt-anoncontris { display: none!important; }
- left-navigation {
margin-left: 10.5em;
}
.infobox {
border: 1px solid #666; border-spacing: 3px; background-color: #2a2a2a; color: white; margin: 0.5em 0 0.5em 1em; padding: 0.2em; float: right; clear: right; font-size: 88%; line-height: 1.5em;
}
div.news {
margin-left: 2%;
}
div.news:after {
content: "."; visibility: hidden; display: block; height: 0; clear: both;
}
/*================================================ Unsorted Stuff ================================================*/
@media screen and (min-width: 950px) {
.uespMainPage { height: auto; overflow: hidden; }
#em-content-main { width: 75%; display: table-cell; }
#em-content-other { display: table-cell; }
}
@media screen and (min-width: 950px) {
#uespMainLogo { padding-bottom: 1em; }
}
- wikiEditor-ui-toolbar {
height: 32px;
}
div.thumbinner {
background-color: var(--surface_light_variant) !important; border-color: var(--divider) !important; border-width: 2px !important;
}
.thumbimage {
background-color: var(--divider) !important; border: 2px solid var(--divider);
}
.catlinks {
border-color: var(--divider) !important; border-width: 2px !important; background-color: var(--surface_dark);
}
- toc, div.toc, ul#filetoc, li.gallerybox div.thumb {
background-color: var(--surface_light); border-color: var(--divider); border: solid 2px var(--divider);
}
/*================================================ Debug Menu ================================================*/
.mw-debug {
border-top: 2px solid var(--divider);
}
- mw-debug-toolbar {
background: var(--background_dark);
} .mw-debug-pane {
color: black;
} .mw-debug-bits {
border-color: var(--divider);
} .mw-debug-panelink {
background-color: var(--surface); border-right: 2px solid var(--divider);
} .mw-debug-panelink.current {
background-color: var(--surface_dark);
} .mw-debug-panelink:first-child {
border-left: 2px solid var(--divider);
} .mw-debug-panelink:hover {
background-color: var(--surface_light);
}
/*================================================ Code Editor ================================================*/
/* code colours */ .mw-highlight pre { background-color: #272822; } .mw-highlight .hll { background-color: #272822; } .mw-highlight .c { color: #75715e } /* Comment */ .mw-highlight .err { color: #960050; background-color: #1e0010 } /* Error */ .mw-highlight .k { color: #66d9ef } /* Keyword */ .mw-highlight .l { color: #ae81ff } /* Literal */ .mw-highlight .n { color: #f8f8f2 } /* Name */ .mw-highlight .o { color: #f92672 } /* Operator */ .mw-highlight .p { color: #f8f8f2 } /* Punctuation */ .mw-highlight .cm { color: #75715e } /* Comment.Multiline */ .mw-highlight .cp { color: #75715e } /* Comment.Preproc */ .mw-highlight .c1 { color: #75715e } /* Comment.Single */ .mw-highlight .cs { color: #75715e } /* Comment.Special */ .mw-highlight .ge { font-style: italic } /* Generic.Emph */ .mw-highlight .gs { font-weight: bold } /* Generic.Strong */ .mw-highlight .kc { color: #66d9ef } /* Keyword.Constant */ .mw-highlight .kd { color: #66d9ef } /* Keyword.Declaration */ .mw-highlight .kn { color: #f92672 } /* Keyword.Namespace */ .mw-highlight .kp { color: #66d9ef } /* Keyword.Pseudo */ .mw-highlight .kr { color: #66d9ef } /* Keyword.Reserved */ .mw-highlight .kt { color: #66d9ef } /* Keyword.Type */ .mw-highlight .ld { color: #e6db74 } /* Literal.Date */ .mw-highlight .m { color: #ae81ff } /* Literal.Number */ .mw-highlight .s { color: #e6db74 } /* Literal.String */ .mw-highlight .na { color: #a6e22e } /* Name.Attribute */ .mw-highlight .nb { color: #f8f8f2 } /* Name.Builtin */ .mw-highlight .nc { color: #a6e22e } /* Name.Class */ .mw-highlight .no { color: #66d9ef } /* Name.Constant */ .mw-highlight .nd { color: #a6e22e } /* Name.Decorator */ .mw-highlight .ni { color: #f8f8f2 } /* Name.Entity */ .mw-highlight .ne { color: #a6e22e } /* Name.Exception */ .mw-highlight .nf { color: #a6e22e } /* Name.Function */ .mw-highlight .nl { color: #f8f8f2 } /* Name.Label */ .mw-highlight .nn { color: #f8f8f2 } /* Name.Namespace */ .mw-highlight .nx { color: #a6e22e } /* Name.Other */ .mw-highlight .py { color: #f8f8f2 } /* Name.Property */ .mw-highlight .nt { color: #f92672 } /* Name.Tag */ .mw-highlight .nv { color: #f8f8f2 } /* Name.Variable */ .mw-highlight .ow { color: #f92672 } /* Operator.Word */ .mw-highlight .w { color: #f8f8f2 } /* Text.Whitespace */ .mw-highlight .mf { color: #ae81ff } /* Literal.Number.Float */ .mw-highlight .mh { color: #ae81ff } /* Literal.Number.Hex */ .mw-highlight .mi { color: #ae81ff } /* Literal.Number.Integer */ .mw-highlight .mo { color: #ae81ff } /* Literal.Number.Oct */ .mw-highlight .sb { color: #e6db74 } /* Literal.String.Backtick */ .mw-highlight .sc { color: #e6db74 } /* Literal.String.Char */ .mw-highlight .sd { color: #e6db74 } /* Literal.String.Doc */ .mw-highlight .s2 { color: #e6db74 } /* Literal.String.Double */ .mw-highlight .se { color: #ae81ff } /* Literal.String.Escape */ .mw-highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */ .mw-highlight .si { color: #e6db74 } /* Literal.String.Interpol */ .mw-highlight .sx { color: #e6db74 } /* Literal.String.Other */ .mw-highlight .sr { color: #e6db74 } /* Literal.String.Regex */ .mw-highlight .s1 { color: #e6db74 } /* Literal.String.Single */ .mw-highlight .ss { color: #e6db74 } /* Literal.String.Symbol */ .mw-highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */ .mw-highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */ .mw-highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */ .mw-highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */ .mw-highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */ .mw-highlight .gh { } /* Generic Heading & Diff Header */ .mw-highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */ .mw-highlight .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */ .mw-highlight .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */ .linenos { color: #72777d !important; } .linenos:hover { color: #bbb !important; } .hil, .mw-highlight { background: #264f78 !important; } .c { color: #6A9955 !important; } /* code commments */ .nt { color: #D7BA7D !important; } .cp { color: #569CD6 !important; } .mh { color: #CE9178 !important; } .nv { color: #9CDCFE !important; } .k, .kp { color: #9CDCFE !important; } .mi, .kt, .mf { color: #B5CEA8 !important; } .nn, .nc, .nd { color: #D7BA7D !important; } .s1, .s2, .sx { color: #CE9178 !important; } .nf, .nb { color: #DCDCAA !important; } .kc { color: #CE9178 !important; } .p, .o { color: #CCCCCC !important; }
/* code editor window */ .mw-highlight > pre:nth-child(1) {
background-color: #1F1F1F !important; box-shadow: unset; border: solid var(--divider); color: #CCCCCC !important;
}