Joe Beaudoin Jr. at 17:17, 8 March 2026

2026-03-08T17:17:25Z

Joe Beaudoin Jr. at 00:47, 21 June 2025

2025-06-21T00:47:34Z

← Older revision		Revision as of 00:47, 21 June 2025
Line 4:		Line 4:
	font-family: Caprica;		font-family: Caprica;
	font-style: normal;		font-style: normal;
	src: url('https://en.battlestarwiki.org/w/skins/Daybreak/resources/fonts/caprica.ttf') format('truetype'),		src: url('https://media.battlestarwiki.org/w/skins/Daybreak/resources/fonts/caprica.ttf') format('truetype'),
	url('https://en.battlestarwiki.org/w/skins/Daybreak/resources/fonts/caprica.otf') format('opentype');		url('https://media.battlestarwiki.org/w/skins/Daybreak/resources/fonts/caprica.otf') format('opentype');
	}		}

Joe Beaudoin Jr.: Replaced content with "{{subst::en:MediaWiki:Citizen.css}}"

2025-06-21T00:47:18Z

Replaced content with "{{subst::en:MediaWiki:Citizen.css}}"

← Older revision		Revision as of 00:47, 21 June 2025
Line 4:		Line 4:
	font-family: Caprica;		font-family: Caprica;
	font-style: normal;		font-style: normal;
	src: url('https://~~media~~.battlestarwiki.org/w/skins/Daybreak/resources/fonts/caprica.ttf') format('truetype'),		src: url('https://en.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');		url('https://en.battlestarwiki.org/w/skins/Daybreak/resources/fonts/caprica.otf') format('opentype');
	}		}

Line 190:		Line 190:
	}		}

	.citizen-body, .mw-body-content {		/* Popping this out as it causes problems with clip-path. - JB 12.29.24*/
			.citizen-body {
			padding: 1px 10px;
			}

			.mw-body-content {
	background-color: var(--background) !important;		background-color: var(--background) !important;
	padding: 10px;		padding: 10px;
Line 245:		Line 250:
	}		}

	.hiddenStructure {		.hiddenStructure, .mw-collapsible .mw-collapsed .hiddenStructure {
	display: none;		display: none;
	}		}
Line 273:		Line 278:

	/* Inline article preview popups */		/* Inline article preview popups */
			/*
	.mwe-popups {		.mwe-popups {
	background-color:var(--background-dark) !important;		background-color:var(--background-dark) !important;
Line 288:		Line 293:
	background-image: 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 */		/* no images */

Line 329:		Line 334:
	.ve-ce-linkAnnotation.ve-ce-annotation-active {		.ve-ce-linkAnnotation.ve-ce-annotation-active {
	background-color: var(--color-surface-1) !important;		background-color: var(--color-surface-1) !important;
			}
			/* Handles an issue preventing the dialog from going outside the bonds of the "cut corner" clipping.*/
			.ve-ui-surface.oo-ui-widget {
			clip-path: none !important;
	}		}

Line 446:		Line 455:

	/deals with the article header overlapping the edit bar when in VE mode - JB 9.1.24 /		/deals with the article header overlapping the edit bar when in VE mode - JB 9.1.24 /
			/* disabled as this causes problems in VE.... it may be removed in full later on, depending on updates to Citizen skin - JB 12.29.24*/
	.ve-init-mw-desktopArticleTarget-originalContent > .citizen-body-container > .citizen-page-header {		.ve-init-mw-desktopArticleTarget-originalContent > .citizen-body-container > .citizen-page-header {
	z-index: unset;		/* z-index: unset;*/
	}		}

	img.ve-ce-mwBlockImageNode-thumbimage, figure.ve-ce-mwBlockImageNode img {		img.ve-ce-mwBlockImageNode-thumbimage, figure.ve-ce-mwBlockImageNode img {
	contain: inherit !important;		/* contain: inherit !important;*/
	}		}

Joe Beaudoin Jr. at 23:04, 9 December 2024

2024-12-09T23:04:24Z

← Older revision		Revision as of 23:04, 9 December 2024
Line 4:		Line 4:
	font-family: Caprica;		font-family: Caprica;
	font-style: normal;		font-style: normal;
	src: url('https://en.battlestarwiki.org/w/skins/Daybreak/resources/fonts/caprica.ttf') format('truetype'),		src: url('https://media.battlestarwiki.org/w/skins/Daybreak/resources/fonts/caprica.ttf') format('truetype'),
	url('https://en.battlestarwiki.org/w/skins/Daybreak/resources/fonts/caprica.otf') format('opentype');		url('https://media.battlestarwiki.org/w/skins/Daybreak/resources/fonts/caprica.otf') format('opentype');
	}		}

Joe Beaudoin Jr.: Created page with "/* All CSS here will be loaded for users of the Citizen skin */ @font-face { font-family: Caprica; font-style: normal; src: url('https://en.battlestarwiki.org/w/skins/Daybreak/resources/fonts/caprica.ttf') format('truetype'), url('https://en.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 h..."

2024-12-09T03:15:20Z

Created page with "All CSS here will be loaded for users of the Citizen skin: @font-face { font-family: Caprica; font-style: normal; src: url('https://en.battlestarwiki.org/w/skins/Daybreak/resources/fonts/caprica.ttf') format('truetype'), url('https://en.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 h..."

New page

/* All CSS here will be loaded for users of the Citizen skin */

@font-face {
font-family: Caprica;
font-style: normal;
src: url('https://en.battlestarwiki.org/w/skins/Daybreak/resources/fonts/caprica.ttf') format('truetype'),
url('https://en.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;
}

MediaWiki:Citizen.css - Revision history

Joe Beaudoin Jr. at 17:17, 8 March 2026

Joe Beaudoin Jr. at 00:47, 21 June 2025

Joe Beaudoin Jr.: Replaced content with "{{subst::en:MediaWiki:Citizen.css}}"

Joe Beaudoin Jr. at 23:04, 9 December 2024