Toggle search
Toggle menu
3.6K
8.1K
1.7K
39.4K
Battlestar Wiki Media
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Citizen.css: Difference between revisions

MediaWiki interface page
More actions
Joe Beaudoin Jr. (talk | contribs)
Bureaucrats, checkuser, Interface administrators, interwiki, sponsor, Administrators
13,780 edits
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..."
 
Joe Beaudoin Jr. (talk | contribs)
Bureaucrats, checkuser, Interface administrators, interwiki, sponsor, Administrators
13,780 edits
No edit summary
 
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');
}
}


Latest revision as of 23:04, 9 December 2024

/* 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;
}
Retrieved from "https://media.battlestarwiki.org/w/index.php?title=MediaWiki:Citizen.css&oldid=108200"
Last modified
This page was last edited on 9 December 2024, at 23:04.
Copyright
All text content is available under Attribution-NonCommercial-ShareAlike 3.0.
Images, Audio and Video are copyright to Universal Studios / Sci-Fi Channel / Sky One.