Toggle menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:B9s LED table/styles.css: Difference between revisions

Template page
(dark theme)
(attempt to use css variables, this is probably way overcomplicated (and maybe it won't work))
Line 1: Line 1:
.b9s-table {
.b9s-table {
text-align: center;
text-align: center;
--loaded-l:  #c8ffc8;
--missing-l: #ffc8c8;
--corrupt-l: #c8c8ff;
--loaded-d:  #4b804b;
--missing-d: #804b4b;
--corrupt-d: #4b4b80;
--loaded:  var(--loaded-l);
--missing: var(--missing-l);
--corrupt: var(--corrupt-l);
}
}
.b9s-loaded  { background-color: #c8ffc8 }
.b9s-missing { background-color: #ffc8c8 }
.b9s-corrupt { background-color: #c8c8ff }


@media screen and (prefers-color-scheme: dark) {
@media screen and (prefers-color-scheme: dark) {
/* only timeless has a dark theme skin right now */
/* only timeless has a dark theme skin right now */
/* [[Category:Pages that ihaveahax really needs to update when more skins get a dark theme]] */
body.skin-timeless .b9s-table {
body.skin-timeless .b9s-loaded  { background-color: #4b804b }
--loaded: var(--loaded-d);
body.skin-timeless .b9s-missing { background-color: #804b4b }
--missing: var(--missing-d);
body.skin-timeless .b9s-corrupt { background-color: #4b4b80 }
--corrupt: var(--corrupt-d);
}
}
 
html.skin-citizen-dark .b9s-table {
--loaded: var(--loaded-d);
--missing: var(--missing-d);
--corrupt: var(--corrupt-d);
}
}
.b9s-loaded  { background-color: var(--loaded)  }
.b9s-missing { background-color: var(--missing) }
.b9s-corrupt { background-color: var(--corrupt) }

Revision as of 10:02, 6 October 2022

.b9s-table {
	text-align: center;
	
	--loaded-l:  #c8ffc8;
	--missing-l: #ffc8c8;
	--corrupt-l: #c8c8ff;
	
	--loaded-d:  #4b804b;
	--missing-d: #804b4b;
	--corrupt-d: #4b4b80;
	
	--loaded:  var(--loaded-l);
	--missing: var(--missing-l);
	--corrupt: var(--corrupt-l);
}

@media screen and (prefers-color-scheme: dark) {
	/* only timeless has a dark theme skin right now */
	body.skin-timeless .b9s-table {
		--loaded:  var(--loaded-d);
		--missing: var(--missing-d);
		--corrupt: var(--corrupt-d);
	}
}

html.skin-citizen-dark .b9s-table {
	--loaded:  var(--loaded-d);
	--missing: var(--missing-d);
	--corrupt: var(--corrupt-d);
}

.b9s-loaded  { background-color: var(--loaded)  }
.b9s-missing { background-color: var(--missing) }
.b9s-corrupt { background-color: var(--corrupt) }