MediaWiki:Common.css

/*================================================				   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: #131B22; --surface_light: #1a262f; --surface_light_variant: #232f39;

/* links */ --link: #4C99B9; --link_external: #4EA4C8; --link_visited: #287493; --link_external: #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); --divider_light: rgba(225, 222, 222, 0.35); }

/*================================================					 Values

=
===================================*/


 * root {

--transition_time: 0.25s ease; --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

=
===================================*/

/* set up wiki logos */ transition: all var(--transition_speed); background-size: contain; background-origin: content-box; background-size: 150px; }
 * 1) p-logo a:hover, .em-hero-logo:hover { filter: drop-shadow(1px 1px 7px var(--link_visited)); }
 * 2) p-logo a {

/* 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; }   background: var(--surface); border: 2px solid var(--divider); }   background: unset !important; }
 * 1) content, .mw-body {
 * 1) mw-page-base {

/* cards */ .em-section, .em-card { background: var(--surface_light); border: solid 2px var(--divider); padding: 8px; }

/*================================================					   Text

=
===================================*/

/* set barlow fonts on headings */ h1, h2, h3, h4, h5, h6 { font-family: "Barlow" !important; color: var(--text_heading) !important; }
 * 1) firstHeading, h1 { font-family: "Barlow-Semibold" !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:not(.new, a[href*="redlink"]) { color: var(--link) !important; }           /* normal link */ a.external { color: var(--link_external) !important; }                       /* external link */ a:visited:not(.new, .oo-ui-buttonElement-button) { color: var(--link_visited) !important; } /* visited link */ a.external:visited { color: var(--link_external) !important; }                       /* external link */ a:hover:not(.new, .oo-ui-buttonElement-button) { text-decoration: underline; }   /* hovered link */ .coloredlinks a { color:inherit; } /* 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 */ a.new:hover, a[href*="redlink"]:hover { text-decoration: underline; }                   /* hovered link */

/*================================================				      Home

=
===================================*/

/* style title heading on homepage */ .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 */ overflow: hidden; max-height: 300px; min-height: 150px; border: solid 2px var(--divider); position: relative; display: flex; }   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; transition: all var(--transition_speed); } .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; }
 * 1) em-hero-banner {
 * 1) em-hero-banner p {

/* content grid menu */ .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: 174px; height: 84px; clear: unset; float: unset; margin: 0; transition: all var(--transition_speed); border: solid 2px var(--divider); flex-grow: 1; }

.content_grid .thumb:hover .content_image { transform: scale(1.15); }

.content_grid .thumb:hover { border: solid 2px var(--divider_light); }

.content_grid .thumbinner { position: relative; height: 100% !important; width: 100% !important; padding: 0; margin: 0; border: unset; }

.content_grid .thumbcaption { position: absolute; pointer-events: none; box-shadow: inset #000000a3 0px 0px 65px -12px; bottom: 0; left: 0; width: 100%; height: 100%; }

.content_grid .thumbcaption span { position: absolute; bottom: 5px; left: 5px; }

.content_image { width: 100%; height: 100%; object-fit: cover; transition: all 0.3s; border: unset !important; }

-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; */ }
 * 1) 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; */ }
 * 1) em-content-other {

/*================================================				     Sidebar

=
===================================*/

/* remove sidebar section borders */
 * 1) mw-navigation #mw-panel div.portal { border-top: unset; }

/* delete first sidebar heading (is made invisible by mediawiki anyway) */
 * 1) p-thisisignored { display: none; }

/* set up sidebar entry item icons */ background-image: url(//images.starfieldwiki.net/icons/discordiconsmall.png); background-position: top left; background-repeat: no-repeat; padding-left: 20px !important; }  background-image: url(//images.starfieldwiki.net/icons/facebookiconsmall.png); background-position: top left; background-repeat: no-repeat; padding-left: 20px !important; }  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; }
 * 1) n-Discord {
 * 1) n-Facebook {
 * 1) n-Twitter {

/*================================================				      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 */
 * 1) ca-unwatch a, #ca-watch a { color: #0000 !important; }
 * 2) ca-unwatch a:hover, #ca-watch a:hover { color: #0000 !important; }

/* hide "read" tab */
 * 1) ca-view { display: none !important; }
 * 2) ca-viewsource { display: none !important; }


 * 1) pt-anontalk { display: none!important; }
 * 2) pt-anoncontris { display: none!important; }

margin-left: 10.5em; }
 * 1) left-navigation {

/*================================================				      Buttons

=
===================================*/

/* de-orange buttons */ .oo-ui-buttonElement-button, .mw-ui-button { color: var(--text_heading) !important; background-color: var(--link_visited) !important; border-color: var(--link_visited) !important; } .oo-ui-buttonElement-button:hover, .mw-ui-button:hover { background-color: var(--link) !important; border-color: var(--link) !important; } .oo-ui-labelElement-label { color: var(--text_heading) !important; }

.oo-ui-messageWidget span { color: black !important; }

/*================================================				     Tables

=
===================================*/

table tbody, .wikitable tbody { background-color: var(--surface_dark); border-color: var(--divider); border-width: 2px; }

.infobox { border: 2px solid var(--divider); border-spacing: 3px; background-color: var(--surface_dark); color: var(--text_content); margin: 0.5em 0 0.5em 1em; padding: 0.2em; float: right; clear: right; font-size: 88%; line-height: 1.5em; }

table.wikitable > * > tr > th { background: var(--surface_light) !important; border-color: var(--divider); border-width: 2px; }

table.wikitable > * > tr > td { background: var(--surface_dark); border-color: var(--divider); border-width: 2px; }

table.wikitable { background: var(--surface_dark); border-color: var(--divider); border-width: 2px; }

div.infobox, table.infobox { float:right; margin:0 0 1em 0.5em; width:33%; }

/*================================================				 Unsorted Stuff

=
===================================*/

/* dialog stuff */ .ui-dialog { background: var(--background) !important; } .wikieditor-toolbar-link-dialog { background: var(--background) !important; }

.ui-dialog-buttonpane { background: var(--background_dark); }

div.news { margin-left: 2%; }

div.news:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; }

table.notice-default { background-color: #FFFFEE; border: 1px solid #CCCCBA; clear: both; margin: 0 auto 1em auto; padding: 0.2em 0.5em; text-align: left; width: 80%; }

ul#footer-info li { color: var(--text_low_emphasis) !important; }

@media screen and (min-width: 950px) { .uespMainPage { height: auto; overflow: hidden; } #em-content-main { width: 70%; display: table-cell; } #em-content-other { display: table-cell; } }

@media screen and (min-width: 950px) { #uespMainLogo { padding-bottom: 1em; } }

height: 32px; }
 * 1) wikiEditor-ui-toolbar {

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_light); }

background-color: var(--surface_light); border-color: var(--divider); border: solid 2px var(--divider); }
 * toc, div.toc, ul#filetoc, li.gallerybox div.thumb {

/*===============================================                     Navbox

=
===================================*/


 * 1) pt-anontalk { display: none!important; }
 * 2) pt-anoncontris { display: none!important; }
 * 3) pt-anonuserpage { color: #e69710 !important; }

.coloredlinks a { color:inherit; }

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

.navbox .mw-collapsible-toggle { width: 6em; }

.navbox {                    /* Navbox container style */ border: 1px solid #aaa; width: 100%; margin: auto; clear: both; font-size: 88%; text-align: center; padding: 1px; }

.navbox-inner, .navbox-subgroup { width: 100%; }

.navbox th, .navbox-title, .navbox-abovebelow { text-align: center;      /* Title and above/below styles */ padding-left: 1em; padding-right: 1em; }

th.navbox-group {            /* Group style */ white-space: nowrap; /* @noflip */ text-align: right; }

.navbox, .navbox-subgroup { background: #fdfdfd;     /* Background color */ }

.navbox-list { border-color: #fdfdfd;   /* Must match background color */ }

.navbox th, .navbox-title { background: #f5deb3;     /* Level 1 color */ }

.navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background: #efe1bc;     /* Level 2 color */ }

.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: #f5e8c8;     /* Level 3 color */ }

.navbox-even { background: #fdf7ea;     /* Even row striping */ }

.navbox-odd { background: transparent; /* Odd row striping */ }

table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */ margin-top: -1px;        /* (doesn't work for IE6, but that's okay)       */ }

/* Default styling for Navbar template (from WP:MediaWiki:Common.css) */ .navbar { display: inline; font-size: 88%; font-weight: normal; }

.navbar ul { display: inline-block; white-space: nowrap; }

.mw-body-content .navbar ul { line-height: inherit; }

.navbar li { word-spacing: -0.125em; }

.navbar.mini li span { font-variant: small-caps; }

.navbar.mini li abbr[title] { font-variant: small-caps; border-bottom: none; text-decoration: none; cursor: inherit; }

/* Navbar styling when nested in infobox and navbox */ .infobox .navbar { font-size: 100%; }

.navbox .navbar { display: block; font-size: 100%; }

.navbox-title .navbar { /* @noflip */ float: left; /* @noflip */ text-align: left; /* @noflip */ margin-right: 0.5em; width: 6em; }

.navbox .hlist td dl, .navbox .hlist td ol, .navbox .hlist td ul, .navbox td.hlist dl, .navbox td.hlist ol, .navbox td.hlist ul { padding: 0.125em 0;      /* Adjust hlist padding in navboxes */ }

.navbox .hlist dd, .navbox .hlist dt, .navbox .hlist li { white-space: nowrap;     /* Nowrap list items in navboxes */ white-space: normal !ie; /* IE < 8 no-wraps entire list, so disable it */ }

.navbox .hlist dd dl, .navbox .hlist dt dl, .navbox .hlist li ol, .navbox .hlist li ul { white-space: normal;     /* But allow parent list items to be wrapped */ }

ol + table.navbox, ul + table.navbox { margin-top: 0.5em;       /* Prevent lists from clinging to navboxes */ }

/*================================================                   hlist

=
===================================*/ /* Style for horizontal lists (separator following item). @source mediawiki.org/wiki/Snippets/Horizontal_lists @revision 8 (2016-05-21) @author User:Edokter */ .hlist dl, .hlist ol, .hlist ul { margin: 0; padding: 0; } /* Display list items inline */ .hlist dd, .hlist dt, .hlist li { margin: 0; display: inline; } /* Display nested lists inline */ .hlist.inline, .hlist.inline dl, .hlist.inline ol, .hlist.inline ul, .hlist dl dl, .hlist dl ol, .hlist dl ul, .hlist ol dl, .hlist ol ol, .hlist ol ul, .hlist ul dl, .hlist ul ol, .hlist ul ul { display: inline; } /* Hide empty list items */ .hlist .mw-empty-li { display: none; } /* Generate interpuncts */ .hlist dt:after { content: ": "; } .hlist dd:after, .hlist li:after { content: " · "; font-weight: bold; } .hlist dd:last-child:after, .hlist dt:last-child:after, .hlist li:last-child:after { content: none; } /* Add parentheses around nested lists */ .hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before, .hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before, .hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before { content: " (";   font-weight: normal; } .hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after, .hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after, .hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {    content: ")"; font-weight: normal; } /* Put ordinals in front of ordered list items */ .hlist ol { counter-reset: listitem; } .hlist ol > li { counter-increment: listitem; } .hlist ol > li:before { content: " " counter(listitem) "\a0"; } .hlist dd ol > li:first-child:before, .hlist dt ol > li:first-child:before, .hlist li ol > li:first-child:before { content: " (" counter(listitem) "\a0"; }

/*================================================					Debug Menu

=
===================================*/

.mw-debug { border-top: 2px solid var(--divider); }   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); }
 * 1) mw-debug-toolbar {

/*================================================					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; }