Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* All CSS here will be loaded for users of the Citizen skin */
@font-face {
font-family: Caprica;
font-style: normal;
src: url('https://media.battlestarwiki.org/w/skins/Daybreak/resources/fonts/caprica.ttf') format('truetype'),
url('https://media.battlestarwiki.org/w/skins/Daybreak/resources/fonts/caprica.otf') format('opentype');
}
#mw-header-container #p-banner,
#mw-header-container #personal h2,
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
#content #firstHeading,
.mw-logo-wordmark,
#header-pagetitle {
font-family: Caprica;
}
#content h1,
#content h2 {
font-variant: small-caps;
}
:root.skin-citizen-dark {
--text: #fff;
--background: #471919;
--background2: #330c0c; /* orig #000; */
--background3: #160807;
--background-dark: #f4a460;
--background-dark2: #d2691e;
--text-inverse: #018;
--grey: #ccc;
--grey-bright: #eee;
--grey-dark: #666;
--red: #d44;
--red-bright: #f55;
--red-dark: #900;
--orange: #ffa500;
--orange-bright: #ff4500;
--orange-dark: #ff8c00;
--yellow: #ffff00;
--yellow-bright: #ffffe0;
--yellow-dark: #ffd700;
--green: #3b7;
--green-bright: #4c8;
--green-dark: #396;
--blue: #08d;
--blue-bright: #2af;
--blue-dark: #069;
--color-link: #ffff00;
--color-link-red: #d44;
--color-link--hover: #ffffe0;
--link: #ffff00;
--link-red: #d44;
--font-size: 0.93em;
--color-primary__l: 60%;
--color-surface-0: hsl(4deg 52% 6%);
--color-surface-1: hsl(0deg 48% 19%);
--color-surface-2: hsl(0deg 48% 19%);
--color-surface-3: hsl(0deg 48% 19%);
--color-surface-4: hsl(0deg 48% 19%);
--background-color-primary--hover: hsl(55deg 79% 38%);
--background-color-primary--active: hsl(var(--color-primary__h),var(--color-primary__s),20%);
--color-surface-2--hover: hsl(0deg 53% 30%);
--color-surface-2--active: hsl(0deg 66% 28%);
--background-color-dp-00: #160807;
--background-color-dp-01: #160807;
--background-color-dp-02: #160807;
--background-color-dp-03: #160807;
--background-color-dp-04: #160807;
--background-color-dp-06: #160807;
--background-color-dp-08: #160807;
--background-color-dp-12: #160807;
--background-color-dp-16: #160807;
--background-color-dp-24: #160807;
--background-color-overlay: rgba(19,26,33,0.95);
--background-color-overlay--lighter: rgba(19,26,33,0.6);
--background-color-framed: #160807;
--background-color-framed--hover: #262c32;
--background-color-framed--active: #131a21;
--background-color-input: rgba(0,0,0,0.5);
--background-color-icon: rgba(255,255,255,0.6);
--background-color-icon--hover: rgba(255,255,255,0.8);
--background-color-icon--active: rgba(255,255,255,0.4);
--background-color-quiet--hover: rgba(255,255,255,0.07000000000000001);
--background-color-quiet--active: rgba(255,255,255,0.03);
--background-color-destructive: #b32424;
--background-color-warning: #ac6600;
--background-color-success: #14866d;
--color-base: #fff;
--color-base--emphasized: rgba(255,255,255,0.87);
--color-base--subtle: rgba(255,255,255,0.38);
--color-primary: #ffff00;
--color-primary--hover: #ffffe0;
--color-primary--active: #ffd700;
--color-link-new: #d44;
--color-link-new--hover: #f55;
--color-link-new--active: #900;
--opacity-icon-base--active: 0.4;
--border-color-base: #ffd700;
--border-color-base--lighter: #ffffe0;
--border-color-base--darker: #ffd700;
--border-color-input: rgba(255,255,255,0.05);
--border-color-input--hover: rgba(255,255,255,0.5);
}
.mw-footer {
background: var(--background-color-dp-00);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
border-color: var(--green-dark);
background-color: var(--green-dark);
color: var(--link);
}
.editOptions, .ext-replacetext-searchoptions {
background-color: var(--background3);
color: #c8ccd1;
border: 1px solid var(--border-color-base);
border-top: 0;
padding: 1em 1em 1.5em 1em;
margin-bottom: 2em;
}
/* Page Triage */
#mwe-pt-toolbar {
background: var(--background);
}
.mwe-pt-tool-flyout {
position: absolute;
top: -12px;
width: 500px;
padding: 5px;
background-color: var(--background) !important;
text-align: left;
z-index: 2;
border-radius: 4px;
border: 1px solid var(--yellow-dark) !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}
.mwe-pt-tool-content {
background-color: var(--background2) !important;
font-size: 0.8em;
/* border: var(--red-dark); */
padding: 6px;
}
/* Lingo Tooltips */
.qtip-content{
border: 1px var(--yellow) solid !important;
}
/* Drawer Menu */
#mw-drawer-header {
background-color: var(--background3);
}
#mw-drawer-menu {
background-color: var(--background2);
}
#ca-history > a:after {
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2217%22 viewBox=%220 0 20 17%22%3E%3Ctitle%3E history %3C/title%3E%3Cg fill=%22%23000%22%3E %3Cpath d=%22M11.424 0C6.686 0 2.857 3.806 2.857 8.5H0l3.71 3.68.066.136L7.62 8.5H4.76c0-3.65 2.986-6.61 6.667-6.61 3.68 0 6.665 2.96 6.665 6.61 0 3.65-2.985 6.61-6.666 6.61a6.668 6.668 0 0 1-4.71-1.94l-1.35 1.337A8.553 8.553 0 0 0 11.426 17C16.16 17 20 13.194 20 8.5S16.162 0 11.424 0zm-1.037 5v4.524l3.904 2.298.66-1.1-3.192-1.877V5H10.39z%22/%3E %3C/g%3E%3C/svg%3E");
}
#ca-view > a:after {
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E article %3C/title%3E%3Cg fill=%22%23000%22%3E %3Cpath d=%22M5 1a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm0 3h5v1H5zm0 2h5v1H5zm0 2h5v1H5zm10 7H5v-1h10zm0-2H5v-1h10zm0-2H5v-1h10zm0-2h-4V4h4z%22/%3E %3C/g%3E%3C/svg%3E");
}
#ca-edit > a:after {
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22%23000%22%3E %3Cpath d=%22m19.5 9.8 2.2-2.2c.4-.4.4-1.1 0-1.6L18 2.3c-.4-.4-1.1-.4-1.6 0l-2.2 2.2 5.3 5.3zm-6.4-4.1L2 16.7V22h5.3l11.1-11.1c-.1 0-5.3-5.2-5.3-5.2z%22/%3E %3C/g%3E%3C/svg%3E");
}
#ca-ve-edit > a:after {
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ctitle%3E Visual Edit %3C/title%3E%3Cg fill=%22%23000%22%3E %3Cpath d=%22m19.5 9.8 2.2-2.2a1.215 1.215 0 0 0 0-1.6L18 2.3a1.215 1.215 0 0 0-1.6 0l-2.2 2.2zm-6.4-4.1L2 16.7V22h5.3l11.1-11.1c-.1 0-5.3-5.2-5.3-5.2zM18 21a1.8 1.8 0 1 1 1.8-1.8A1.8 1.8 0 0 1 18 21zm0-4.6c-2.8 0-4 2.8-4 2.8s1.2 2.8 4 2.8 4-2.8 4-2.8-1.2-2.8-4-2.8z%22/%3E %3Ccircle cx=%2218%22 cy=%2219.2%22 r=%221%22/%3E %3C/g%3E%3C/svg%3E");
}
div#addthistoolbar {
background: inherit !important;
}
.citizen-body, .mw-body-content {
background-color: var(--background) !important;
padding: 10px;
clip-path: polygon(0 10.00px, 10.00px 0, calc(100% - 8px) 0, 100% 10.00px, 100% calc(100% - 10.00px), calc(100% - 10.00px) 100%, 10.00px 100%, 0 calc(100% - 10.00px)) ;
}
.citizen-loading:after {
background: linear-gradient(90deg,var(--red) 0%,var(--red) 100%) -10% 0 / 0 var(--height-progress-bar) no-repeat,transparent;
}
/* boxes */
.infobox tr {
/* border-bottom: 1px solid var(--yellow) !important; */ /*blanking for now because of issues with infobox formatting */
padding: 8px;
}
.infoboxheader td {
border-bottom: none !important;
}
.infobox td {
padding: 3px;
border-bottom: 2px groove var(--background3);
}
table.infobox {
float: right;
/* border: 1px solid var(--yellow); */
background-color: var(--background2) !important;
clip-path: polygon(0 10.00px,10.00px 0,calc(100% - 8px) 0,100% 10.00px,100% calc(100% - 10.00px),calc(100% - 10.00px) 100%,10.00px 100%,0 calc(100% - 10.00px));
border-collapse: unset; /* originally collapse, but this caused problems with yellow borders not showing up properly */
margin: 10px;
padding: 10px;
/*width: 300px;*/
}
th.infoboxheader, .infoboxheader, dl .noexcerpt, .sortable thead tr {
background-color: var(--color-surface-2--active);
clip-path: polygon(0 5.00px,5.00px 0,calc(100% - 5px) 0,100% 5.00px,100% calc(100% - 5.00px),calc(100% - 5.00px) 100%,5.00px 100%,0 calc(100% - 5.00px));
padding:.5em;
}
table tr:nth-child(even) {
background: var(--background3) !important;
}
table.infobox tr:nth-child(even) {
background: inherit !important;
}
.sortable td {
padding: 0.5em;
}
.hiddenStructure {
display: none;
}
/* Dealing with images */
a.images {
display: inline !important;
}
figure .thumbinner a.new, .thumb .thumbinner a.new {
display: inline !important;
padding: 0px !important;
background-color: inherit !important;
background: inherit !important;
transition: background 200ms ease,color 200ms ease;
}
.thumb {
background-color: var(--background2) !important;
clip-path: polygon(0 10.00px,10.00px 0,calc(100% - 8px) 0,100% 10.00px,100% calc(100% - 10.00px),calc(100% - 10.00px) 100%,10.00px 100%,0 calc(100% - 10.00px));
}
.thumbcaption {
padding: 0.25em 1em;
}
/* Inline article preview popups */
.mwe-popups {
background-color:var(--background-dark) !important;
color:var(--background2) !important;
border: 1px solid var(--red) !important;
}
.mwe-popups-container {
background-color:var(--orange) !important;
}
.mwe-popups .mwe-popups-extract:after {
background-image: -webkit-linear-gradient(to right,rgba(244,164,96,0),#f4a460 50%) !important;
background-image: linear-gradient(to right,rgba(244,164,96,0),#f4a460 50%) !important;
}
/* no images */
.mwe-popups.flipped-x-y:after, .mwe-popups.flipped-y:after {
border-top: 12px solid var(--background-dark) !important;
}
.mwe-popups.mwe-popups-no-image-pointer:after, .mwe-popups.mwe-popups-no-image-pointer:before {
border-bottom: 12px solid var(--background-dark) !important;
}
/* with images */
.mwe-popups.mwe-popups-image-pointer:before, .mwe-popups.flipped-x.mwe-popups-is-tall:before, .mwe-popups.mwe-popups-image-pointer.flipped-x:before {
border-bottom: 8px solid var(--red) !important
}
.mwe-popups.mwe-popups-type-page.mwe-popups-fade-in-down.flipped-x-y.mwe-popups-is-tall:before, .mwe-popups.mwe-popups-type-page.mwe-popups-fade-in-down.flipped-x-y.mwe-popups-is-not-tall:before {
border-top: 8px solid var(--red) !important
}
.mwe-popups.mwe-popups-type-page.mwe-popups-fade-in-down.flipped-x-y.mwe-popups-is-tall:after {
border-top: 12px solid var(--red) !important
}
/* gallery */
ul.gallery.mw-gallery-slideshow .gallerybox.slideshow-current {
background: var(--color-surface-2--active) !important;
}
/* checkboxes */
.oo-ui-checkboxInputWidget [type='checkbox'] + span {
background-color: var(--color-surface-1) !important;
}
/* visual editor */
.ve-ce-linkAnnotation.ve-ce-annotation-active {
background-color: var(--color-surface-1) !important;
}
/* visual editor save change dialogue */
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget:hover, .ve-ui-specialCharacterPage-character:hover, .oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget:selected, .ve-ui-specialCharacterPage-character:selected {
background-color: var(--color-surface-2--hover) !important;
}
/* prevents "negative" on images when editing a link that has an image preview in editor */
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-iconElement.oo-ui-iconElement-icon.oo-ui-icon-page-existing.oo-ui-labelElement-invisible.oo-ui-iconWidget.ve-ui-mwInternalLinkContextItem-hasImage {
filter: none;
}
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}
/* TABBER */
.tabber.tabber--animate.tabber--live, .tabber {
background-color: var(--background2) !important;
clip-path: polygon(0 10.00px,10.00px 0,calc(100% - 8px) 0,100% 10.00px,100% calc(100% - 10.00px),calc(100% - 10.00px) 100%,10.00px 100%,0 calc(100% - 10.00px));
}
.tabber__tab:visited {
color: var(--color-primary) !important;
}
.tabber__tab[aria-selected='true'], .tabber__tab[aria-selected='true']:visited {
color: var(--color-primary--active) !important;
background-color: var(--background3) !important;
clip-path: polygon(0 10.00px,10.00px 0,calc(100% - 10.00px) 0,100% 10.00px,100% 100%,0 100%) !important;
}
.tabber__tabs {
margin: .3em 0em 0em .3em !important;
}
.tabber__indicator {
background: var(--red) !important;
box-shadow: 0 1px 20px 1px var(--red);
}
.tabber__panel {
padding: 0.1em 1em;
}
/* handles the coloring of infoboxes and thumb backgrounds ONLY if called from within the tabber panel, so as to make them more distinct */
.tabber__panel table.infobox, .tabber__panel .thumb {
background-color: var(--background3) !important;
}
/* hides the edit section pencil ONLY if called from within the tabber panel, to avoid technical issues that user will encounter */
.tabber__panel .mw-editsection {
display: none !important;
}
/* hides error messages relating to defaultsorts ONLY if called from the tabber panel */
.tabber__panel .error {
display: none;
}
/* hides the infobox header on transcluded pages, particularly as they use templates that call on {{pagename}} to fill in those areas... causing confusing results on disambiguation tabbed pages... */
.tabber__panel tr.infoboxheader, .tabber__panel .infoboxheader {
display: none !important;
}
/* Message boxes */
.box, .navbox, .cdx-card {
background: var(--background3);
clip-path: polygon(0 10.00px,10.00px 0,calc(100% - 8px) 0,100% 10.00px,100% calc(100% - 10.00px),calc(100% - 10.00px) 100%,10.00px 100%,0 calc(100% - 10.00px));
}
.cdx-card {
background: var(--background);
border:0px !important;
}
.cdx-card__text__title {
color: var(--color-link);
}
/* Cut Corner Images */
.citizen-body a.image > img, .mw-body-content a.image > img, a > img {
clip-path: polygon(0 10.00px,10.00px 0,calc(100% - 8px) 0,100% 10.00px,100% calc(100% - 10.00px),calc(100% - 10.00px) 100%,10.00px 100%,0 calc(100% - 10.00px));
}
.flag img, .messagebox img {
clip-path: none !important;
}
/* fixes issue on front page with localization flags */
.flag a.image {
display: inline !important;
}
.ace-tm {
backgroud-color: var(--background2) !important;
color: var(text) !important;
}
.wikiEditor-ui .ace_editor {
font-family: var(--font-family-monospace);
background: var(--background3);
}
/* images in VisualEditor */
/*deals with the article header overlapping the edit bar when in VE mode - JB 9.1.24 */
.ve-init-mw-desktopArticleTarget-originalContent > .citizen-body-container > .citizen-page-header {
z-index: unset;
}
img.ve-ce-mwBlockImageNode-thumbimage, figure.ve-ce-mwBlockImageNode img {
contain: inherit !important;
}
/* Flow */
.flow-topic-titlebar {
background-color: var(--background3) !important;
}
.flow-post {
background-color: var(--background2) !important;
color: var(--text) !important;
padding: 1em;
}