MediaWiki:Citizen.css: Unterschied zwischen den Versionen

Version vom 12. März 2023, 21:41 Uhr

/* Das folgende CSS wird für Benutzer des Citizen-Skins geladen */

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

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

/* Drawer Menu */

#mw-drawer-header {
	background-color: var(--background3);
}

#mw-drawer-menu {
	background-color: var(--background2);
}

#ca-history > a:after {
    background-image: url(/w/load.php?modules=skins.citizen.icons.ca&image=history&format=rasterized&skin=citizen&version=53epe);
    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: url(/w/load.php?modules=skins.citizen.icons.ca&image=view&format=rasterized&skin=citizen&version=53epe);
    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: url(/w/load.php?modules=skins.citizen.icons.ca&image=edit&format=rasterized&skin=citizen&version=53epe);
    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: url(/w/load.php?modules=skins.citizen.icons.ca&image=ve-edit&format=rasterized&skin=citizen&version=53epe);
    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;
}

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

.infobox td {
    padding: 3px;
}

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:200px;
}

th.infoboxheader {
	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));
}

.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 */

.ve-ui-mwInternalLinkContextItem-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;
	}


/* Cut Corner Images */

.citizen-body a.image > img, .mw-body-content a.image > 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 {
    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;
}

/* images in VisualEditor */

img.ve-ce-mwBlockImageNode-thumbimage {
    contain: inherit !important;
}