MediaWiki:Timeless.css

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

/*-LIST OF COLORS---*/ /* #eee - DOL not-quite-white for text/ICONS										*/ /* #ec3535 - DOL RED 																*/ /* #38b20a - DOL GREEN																*/ /* #4372ff - DOL BLUE																*/ /* #C30000 - REV RED /* #5d85ff - HOVERBLUE/PROGRESSIVE ICONS											*/ /* #111 - DARK BACKGROUND/INVERTED TEXT												*/ /* #222 - LIGHT BACKGROUND															*/ /* #333 - BUTTON AND INPUT BACKGROUND/INVERTED ICONS								*/ /* #444 - DOL BORDER COLOR															*/ /* #aaa - DISABLED																	*/ /* #68d - WORKING UNCLICKED LINK BLUE												*/ /* #8af - LINK HOVER BLUE															*/ /*																					*/ /* #c22 - BROKEN/NEW LINK RED														*/ /* #e44 - BROKEN/NEW LINK RED:HOVER													*/ /* ACTIVE INPUT ELEMENTS/HOVERED OVER BUTTONS SHOULD HAVE							*/ /*			transition-duration: 0.2s;												*/ /*			on hover:	color: #fff;												*/ /*						background-color: #444;										*/ /*						border: 1px solid #fff;										*/ /*																					*/ /*--*/

/* =========CONTENTS:========= 1) Code for Ease of Editing	1.1) Collapsible Text 1.2) Infobox Appearance	1.3) Template Appearance 1.3.1) Navbox Templates		1.3.2) Notice Templates 2) General Appearance	2.1) Main Colors and Fonts Main background colors & font Presentation Unbulleted lists Headers Notifications 2.2) Links		Default colors		Stop some from changing with :visited, making :hover consistent		No arrow on external links	2.3) Dropdown Lists 2.4) Miscellaneous		Reduce page jumps by hiding collapsed/dismissed content		Same spacing for indented and unindented paragraphs on talk pages		Reset top margin for lists embedded in columns		Avoid elements breaking between columns 3) Page Header 3.1) Top bar		Top bar colors	3.2) Wiki Name 3.3) User Menu	3.4) Search Bar Search Suggestions 3.5) Search Results 4) Sidebars Making the sidebar look like buttons Making the sidebars sticky Hiding specific links 5) Footer Appearance 6) Wiki Administration 6.1) Admin Pages	6.2) Tables Within Admin Sections 6.3) Special Pages		File upload 7) Content Appearance 7.1) General		Aligning "last updated" text with "help" button	7.2) Images, Containers and Media viewer Checkered backgrounds for highlighting transparency Image previewer Fancybox 7.3) Table of Contents	7.4) Wikitables and Datatables 7.5) Categories	7.6) Miscellaneous Make black redirection arrow white Edit count References highlighting 8) Buttons, Checkboxes and Co.	8.1) Checkboxes Replacing the default browser checkboxes 8.2) Radiobuttons		Replacing the default browser radiobuttons	8.3) Buttons 8.4) Selects	8.5) Tabs 8.6) Miscallaneous 9) History, Changes and Co.	9.1) Recent Changes		9.1.1) Tag Filters Tag Highlights 9.2) Page History		Differences	9.3) Miscallaneous 10) Page Editing	10.1) Code Editor 10.1.1) Code Editor in Source mode			Buttons (might not be code editor)			Dialogues for "Insert Link" Button			Dialogues for "Insert Image" Button			Dialogues for "Insert Template" Button			Advanced Dropdown Menu			Special Characters Dropdown Menu			Help Dropdown Menu		10.1.2) Code Editor in Code mode 10.1.3) ACE Search (Code mode plugin for searching)		10.1.4) Code Colors 10.2) Visual Editor		Fix for button for adding paragraphs		Education Popup Header		"Loading thing" - the one and only (Moving gray stripes to signify loading) 11) Widgets 11.1) General Settings	11.2) Wikilove 11.3) MS Upload		Modified dynamic loader icon	11.4) Echo 11.5) Calendar / Date Widget	11.6) Page Triage 12) New icons	12.1) General Icons 12.2) Code Editor Icons	12.3) Visual Editor Icons (actually mixed) 12.4) Page Triage Icons

/*===================================================*/ /*============ 1) Code for Wiki Editors =============*/ /*===================================================*/

/*============ 1.2) Infobox Appearance ==============*/ /*

.skin-timeless #mw-content-text .pi-header { background-color: #333; } .portable-infobox .pi-border-color { border: none; } .portable-infobox { background:#222;				/* Light background */ /* float: right; width: 310px; background-color: #222;			/* Light background */ /* border: 2px solid #444; border-radius: 15px; } .portable-infobox .pi-data { display: flex; align-items: center;			/* vertically align items or text */ /* border-bottom: none; } /* First Header */ /* .pi-title { border-radius: 15px 15px 0 0; font-size: 24px; font-weight: bold; text-align: center; color: #eee;					/* DOL not-quite-white for text */ /* background-color: #333; } .mw-body .mw-parser-output .portable-infobox h1::after, .mw-body .mw-parser-output .portable-infobox h2::after { border-bottom: none; } /* Second and Third Headers */ /* .pi-header { font-size: 18px; font-weight: bold; text-align: center; color: #eee;						/* DOL not-quite-white for text */ /* background-color: #333; } .pi-header a { color: #eee;					/* DOL not-quite-white for text */ /* } /* Image */ /* .pi-image { text-align: center; } /* First row */ /* .pi-data-label { vertical-align: middle; } /* Second row */ /* .pi-data-value { text-align: left; }

/*===================================================*/ /*============= 2) General Appearance ===============*/ /*===================================================*/

/*=========== 2.1) Main Colors and Fonts ============*/ /*

/* Main background colors & font */ 	/* body { background: #222;			/* Light background */		/* color: #eee;			/* DOL not-quite-white for text */	/* margin: 0; font-family: 'Helmet', 'Freesans', sans-serif; font-family: 'Arial', 'Helmet', 'Freesans', sans-serif; }	background: #333;						/* Outter background color */ border-bottom: solid 4px #C30000;		/* Bottom border */ } /* pre, code, .mw-code { font-weight: normal; background: #222;				/* Light background */ /* color: #eee;					/* DOL not-quite-white for text */ /* border: solid 1px #444; } pre { overflow: auto; }
 * 1) mw-content-container {
 * 1) mw-content-container {

legend { font-weight: bold; font-size: 1.2em; }


 * placeholder {

color: #aaa;			/* Disabled color */ /* opacity: 1;			/* Firefox fix */ /* }

background: #222;			/* Light background */ /* }
 * 1) menus-cover {

/* Presentation */ /* .mw-highlight { background: #111111b0; background: rgba(17, 17, 17, 0.69); color: #eee;					/* DOL not-quite-white for text */ /* }

/* Unbulleted lists */ /* .plainlist ol, .plainlist ul { line-height: inherit; list-style: none none; margin: 0; } .plainlist ol li, .plainlist ul li { margin-bottom: 0; }

.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame { border: 1px solid #444; background: #222;			/* Light background */ /* }

/* Headers */ /* h1, h2, h3, h4, h5, h6 { color: #eee;			/* DOL not-quite-white for text */ /* } .mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body dt { font-family: 'Helmet','Freesans',sans-serif; margin: 1.25em 0 0.5em; } .mw-body h1.firstHeading { border-bottom: 4px solid #eee;			/* DOL not-quite-white for text */ /* margin: 0.25em 0 0.5em; } .mw-body h2 { font-size: 1.9em; }

/* Notifications */ /* .mw-notification { background: #222;			/* Light background */ /* border: 1px solid #444; border-radius: 0; color: #eee;			/* DOL not-quite-white for text */ /* }

.mw-dismissable-notice { border: 1px solid #444; background: #222;			/* Light background */ /* color: #eee;				/* DOL not-quite-white for text */ /* background-image: -webkit-repeating-linear-gradient(135deg,#444,#444 10px,transparent 10px,transparent 20px); background-image: -moz-repeating-linear-gradient(135deg,#444,#444 10px,transparent 10px,transparent 20px); background-image: repeating-linear-gradient(135deg,#444,#444 10px,transparent 10px,transparent 20px); /*styled like "loading thing", but not animated */ /* } .mw-dismissable-notice-close { color: #eee;				/* DOL not-quite-white for text */ /* }

/*===================================================*/ /*================ 3) Page Header ===================*/ /*===================================================*/

/*================= 3.1) Top bar ====================*/ /*	background: #222;			/* Light background */ /*	color: #111; 				/* inverted text color */ /*	padding-top: 0.4em; }
 * 1) mw-header-container {

width: 100%; position: static; }
 * 1) mw-header {

border: none; background: #222;			/* Light background */ /* }
 * 1) mw-header-nav-hack {

color: #eee;				/* DOL not-quite-white for text */ /* }
 * 1) siteSub {

/* Top bar colors (under search), aka top border */ .color-middle { background: #C30000; 		/* red */ } .color-left { background: #C30000;		/* red */ } .color-right { background: #C30000;		/* red */ }