Jump to content

MediaWiki:Common.css: Difference between revisions

From Logic World Wiki
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 2: Line 2:


@media screen {
@media screen {
 
/* LW Theming */
/* LW Theming */
:root {
:root {
--lw-radius: 10px;
--lw-radius: 10px;
 
--lw-primary: #414141;
--lw-primary: #414141;
--lw-primary_hovered: #464646;
--lw-primary_hovered: #464646;
--lw-primary_pressed: #434343;
--lw-primary_pressed: #434343;
 
--lw-secondary: #5a5a5a;
--lw-secondary: #5a5a5a;
--lw-secondary_hovered: #646464;
--lw-secondary_hovered: #646464;
--lw-secondary_pressed: #5f5f5f;
--lw-secondary_pressed: #5f5f5f;
 
--lw-tertiary: #2d2d2d;
--lw-tertiary: #2d2d2d;
--lw-tertiary_hovered: #373737;
--lw-tertiary_hovered: #373737;
--lw-tertiary_pressed: #323232;
--lw-tertiary_pressed: #323232;
 
--lw-quaternary: #c8c8c8;
--lw-quaternary: #c8c8c8;
--lw-quaternary_hovered: #f0f0f0;
--lw-quaternary_hovered: #f0f0f0;
--lw-quaternary_pressed: #dcdcdc;
--lw-quaternary_pressed: #dcdcdc;
 
--lw-accent: #d60e24;
--lw-accent: #d60e24;
--lw-accent_hovered: #4892e7;
--lw-accent_hovered: #4892e7;
--lw-accent_pressed: #266cbe;
--lw-accent_pressed: #266cbe;
 
--lw-accent_modified: #932b33;
--lw-accent_modified: #932b33;
--lw-accent_modified_hovered: #234cfa;
--lw-accent_modified_hovered: #234cfa;
--lw-accent_modified_pressed: #1a41e9;
--lw-accent_modified_pressed: #1a41e9;
 
 
--lw-graphic_primary: #ffffff;
--lw-graphic_primary: #ffffff;
--lw-graphic_secondary: #303030;
--lw-graphic_secondary: #303030;
 
--lw-text_primary: #ffffff;
--lw-text_primary: #ffffff;
--lw-text_secondary: #000000;
--lw-text_secondary: #000000;
 
--lw-input_field: #ffffff;
--lw-input_field: #ffffff;
--lw-input_field_hovered: #f0f0f0;
--lw-input_field_hovered: #f0f0f0;
--lw-input_field_pressed: #dcdcdc;
--lw-input_field_pressed: #dcdcdc;
--lw-input_field_text: #000000;
--lw-input_field_text: #000000;
 
--lw-link-color: #1d7cea;
--lw-link-color: #1d7cea;
}
}
 
header.mw-header {
header.mw-header {
background-color: var(--lw-secondary) !important;
background-color: var(--lw-secondary) !important;
border-bottom: 3px solid var(--lw-tertiary);
border-bottom: 3px solid var(--lw-tertiary);
}
}
 
main > header {
main > header {
margin-bottom: 0.3em;  
margin-bottom: 0.3em;  
}
}
 
#searchform {
#searchform {
background-color: #00000000;
background-color: #00000000;
border: none;
border: none;
& > .cdx-search-input__input-wrapper {
& > .cdx-search-input__input-wrapper {
margin: 0px;
& > .cdx-text-input > input {
border: none;
}
}
& button {
display: none;
}
& #searchInput {
border: 3px solid var(--lw-tertiary);
border-radius: var(--lw-radius);
background-color: var(--lw-input_field);
}
}
a {
color: var(--lw-link-color);
}
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;
margin: 0px;
& > .cdx-text-input > input {
border: none;
}
}
}
& button {
.vector-page-toolbar {
display: none;
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;
}
}
 
& #searchInput {
.vector-pinned-container {
background-color: var(--lw-secondary);
border: 3px solid var(--lw-tertiary);
border: 3px solid var(--lw-tertiary);
border-radius: var(--lw-radius);
border-radius: var(--lw-radius);
background-color: var(--lw-input_field);
}
}
}
.vector-sticky-pinned-container::after {
 
background: none;
a {
}
color: var(--lw-link-color);
/* Fix whyever there is weird margin... */
}
.vector-column-start, .vector-main-menu-container, .vector-toc, .vector-toc-pinnable-header {
 
margin-left: 0px !important;
body {
}
background-color: var(--lw-primary);
.vector-toc-list-item {
color: var(--lw-text_primary)
padding: 0px !important;
}
.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;
}
}
}

Revision as of 07:51, 8 September 2025

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

@media screen {
	/* LW Theming */
	:root {
		--lw-radius: 10px;
	
		--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: #1d7cea;
	}
	
	header.mw-header {
		background-color: var(--lw-secondary) !important;
		border-bottom: 3px solid var(--lw-tertiary);
	}
	
	main > header {
		margin-bottom: 0.3em; 
	}
	
	#searchform {
		background-color: #00000000;
		border: none;
		& > .cdx-search-input__input-wrapper {
			margin: 0px;
			& > .cdx-text-input > input {
				border: none;
			}
		}
		& button {
			display: none;
		}
	
		& #searchInput {
			border: 3px solid var(--lw-tertiary);
			border-radius: var(--lw-radius);
			background-color: var(--lw-input_field);
		}
	}
	
	a {
		color: var(--lw-link-color);
	}
	
	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;
	}
}