MediaWiki:Theme-lw-test.css

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)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* CSS placed here will be applied to all skins */

/* LW Theming */
:root {
	--lw-primary: #414141;
	--lw-primary-hovered: #464646;
	--lw-primary-pressed: #434343;
	
	--lw-secondary: #5a5a5a;
	--lw-secondary-hovered: #646464;
	--lw-secondary-pressed: #5f5f5f;
	
	--lw-tertiary: #2d2d2d;
	--lw-tertiary-hovered: #373737;
	--lw-tertiary-pressed: #323232;
	
	--lw-quaternary: #c8c8c8;
	--lw-quaternary-hovered: #f0f0f0;
	--lw-quaternary-pressed: #dcdcdc;
	
	--lw-accent: #d60e24;
	--lw-accent-hovered: #4892e7;
	--lw-accent-pressed: #266cbe;
	
	--lw-accent-modified: #932b33;
	--lw-accent-modified-hovered: #234cfa;
	--lw-accent-modified-pressed: #1a41e9;
	
	--lw-graphic-primary: #ffffff;
	--lw-graphic-secondary: #303030;
	
	--lw-text-primary: #ffffff;
	--lw-text-secondary: #000000;
	
	--lw-input-field: #ffffff;
	--lw-input-field-hovered: #f0f0f0;
	--lw-input-field-pressed: #dcdcdc;
	--lw-input-field-text: #000000;
	
	--lw-link-color: color-mix(in oklab, var(--lw-accent), white 10%);
	--lw-link-color-hover: color-mix(in oklab, var(--lw-accent-hovered), white 10%);
	--lw-link-color-pressed: color-mix(in oklab, var(--lw-accent-pressed), white 10%);
}

:root {
	--lw-radius: 10px;
}

@media screen {
	/* Link colors: */
	body,
	#pt-userpage-2 /* Admin (top bar)*/ {
		a[href], a[href]:visited {
			color: var(--lw-link-color);
		}
		a[href]:hover, a[href]:visited:hover {
			color: var(--lw-link-color-hover);
		}
		a[href]:active, a[href]:visited:active {
			color: var(--lw-link-color-pressed);
		}
		
		a[href].new, a[href].new:visited {
			color: #d60e24;
		}
		a[href].new:hover, a[href].new:visited:hover {
			color: #ffcccc;
		}
		a[href].new:active, a[href].new:visited:active {
			color: #ff8888;
		}
	}
	
	
	header.mw-header {
		background-color: var(--lw-secondary) !important;
		border-bottom: 3px solid var(--lw-tertiary);
	}
	
	main > header {
		margin-bottom: 0.3em; 
	}
	
	body {
		background-color: var(--lw-primary);
		color: var(--lw-text_primary)
	}
	.vector-header-container {
		background-color: var(--lw-primary);
	}
	.mw-page-container {
		background-color: var(--lw-primary);
	}
	
	/* Styling of generic tabs */
	.vector-tab-noicon {
		border: 3px solid var(--lw-tertiary);
		border-bottom: none;
		border-radius: var(--lw-radius) var(--lw-radius) 0px 0px;
		background-color: var(--lw-secondary);
		padding: 0px 8px 0px 8px;
		margin: 0px 4px 0px 4px !important;
		
		bottom: -3px;
		position: relative;
		
		> a {
			/* padding: 0px 0px 0px 0px !important; */
			border: none !important;
		}
	}
	#vector-page-tools-dropdown-label {
		/* padding: 0px 0px 0px 0px; */
	}
	.vector-tab-noicon.selected {
		padding-bottom: 3px;
		z-index: 2;
	}
	.vector-page-toolbar-container {
		margin: 0px;
	}
	.vector-page-toolbar {
		padding: 0px 15px 0px 15px;
	}
	
	/* Main content */
	/* Do not use class, as there is a teleportation target, which uses it as well */
	#bodyContent {
		border: 3px solid var(--lw-tertiary);
		border-radius: var(--lw-radius);
		background-color: var(--lw-secondary);
		padding: 10px;
	}
	
	.vector-pinned-container {
		background-color: var(--lw-secondary);
		border: 3px solid var(--lw-tertiary);
		border-radius: var(--lw-radius);
	}
	.vector-sticky-pinned-container::after {
		background: none;
	}
	/* Fix whyever there is weird margin... */
	.vector-column-start, .vector-main-menu-container, .vector-toc, .vector-toc-pinnable-header {
		margin-left: 0px !important;
	}
	.vector-toc-list-item {
		padding: 0px !important;
	}
}