~emersion/public-inbox

gamja: style.css: Substitute repeated colours with variables v1 APPLIED

Thorben Günther: 1
 style.css: Substitute repeated colours with variables

 1 files changed, 48 insertions(+), 62 deletions(-)
Export patchset (mbox)
How do I use this?

Copy & paste the following snippet into your terminal to import this patchset into git:

curl -s https://lists.sr.ht/~emersion/public-inbox/patches/22401/mbox | git am -3
Learn more about email & git
View this thread in the archives

[PATCH gamja] style.css: Substitute repeated colours with variables Export this patch

Whenever possible (light and dark scheme use same variable name),
the element was removed from the dark block.
---
 style.css | 110 ++++++++++++++++++++++++------------------------------
 1 file changed, 48 insertions(+), 62 deletions(-)

diff --git a/style.css b/style.css
index 77af918..b7d7572 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,23 @@
:root {
	--main-background: white;
	--main-color: black;
	--buffer-background: #e3e3e3;
	--green: green;

	--gray: #4a4a4a;
}

@media (prefers-color-scheme: dark) {
	:root {
		--main-background: #212529;
		--main-color: #f8f9fa;
		--buffer-background: #131618;
		--green: #53b266;

		--red: #fb615b;
	}
}

html, body {
	height: 100%;
	padding: 0;
@@ -13,6 +33,8 @@ body {
}

#buffer-list, #buffer, #connect, #member-list {
	color: var(--main-color);
	background: var(--main-background);
	width: 100%;
	height: 100%;
	overflow-x: hidden;
@@ -20,7 +42,7 @@ body {
}

#buffer-list {
	background-color: #e3e3e3;
	background-color: var(--buffer-background);
	grid-column: 1;
	grid-row: 1 / 4;

@@ -42,7 +64,7 @@ body {
}
#buffer-list li.active a {
	color: white;
	background-color: #4a4a4a;
	background-color: var(--gray);
}
#buffer-list li.unread-message a {
	color: #b37400;
@@ -52,9 +74,11 @@ body {
}

#buffer-header, #member-list-header {
	color: var(--main-color);
	background-color: var(--main-background);
	box-sizing: border-box;
	padding: 5px 10px;
	border-bottom: 1px solid #e3e3e3;
	border-bottom: 1px solid var(--buffer-background);
}

#buffer-header {
@@ -63,7 +87,7 @@ body {
}

#buffer-header .status-here {
	color: green;
	color: var(--green);
}
#buffer-header .status-gone {
	color: orange;
@@ -84,12 +108,12 @@ body {
#member-list-header {
	grid-row: 1;
	grid-column: 3;
	border-left: 1px solid #e3e3e3;
	border-left: 1px solid var(--buffer-background);
}
#member-list {
	grid-row: 2;
	grid-column: 3;
	border-left: 1px solid #e3e3e3;
	border-left: 1px solid var(--buffer-background);
}

#member-list ul {
@@ -105,9 +129,11 @@ body {
}

#composer {
	color: var(--main-color);
	background: var(--main-background);
	grid-row: 3;
	grid-column: 2 / 4;
	border-top: 1px solid #e3e3e3;
	border-top: 1px solid var(--buffer-background);
}
#composer input {
	display: block;
@@ -130,7 +156,6 @@ body {
	top: 0;
	left: 0;
	height: 100%;
	background: white;
}
#connect form {
	margin: 0 auto;
@@ -147,10 +172,10 @@ form input[type="email"] {
}

a {
	color: green;
	color: var(--green);
}
#buffer-list li a, a.timestamp, a.nick {
	color: #4a4a4a;
	color: var(--gray);
	text-decoration: none;
}
#buffer-list li a:hover, #buffer-list li a:active,
@@ -165,7 +190,7 @@ details summary {

#buffer {
	box-sizing: border-box;
	color: #4a4a4a;
	color: var(--gray);
	word-wrap: break-word;
}
#buffer .logline-list {
@@ -325,57 +350,22 @@ kbd {
}

@media (prefers-color-scheme: dark) {
	#buffer-list {
		background-color: #131618;
	}

	#buffer,
	#connect,
	#member-list {
		color: #f8f9fa;
		background: #212529;
	}

	#buffer-list li.active a {
		color: #131618;
		color: var(--buffer-background);
		background-color: white;
	}
	#buffer-list li.unread-message a {
		color: #53b266;
		color: var(--green);
	}
	#buffer-list li.unread-highlight a {
		color: #0062cc;
	}

	#buffer-header,
	#member-list-header {
		color: #f8f9fa;
		background-color: #212529;
		border-bottom: 1px solid #131618;
	}

	#buffer-header .status-here {
		color: #53b266;
	}
	#buffer-header .status-gone {
		color: #fb885b;
	}
	#buffer-header .status-offline {
		color: #fb615b;
	}

	#member-list-header,
	#member-list {
		border-left: 1px solid #131618;
	}

	#composer {
		border-top: 1px solid #131618;
	}

	#composer {
		color: #f8f9fa;
		background: #212529;
		color: var(--red);
	}

	form input[type="text"],
@@ -384,9 +374,9 @@ kbd {
	form input[type="url"],
	form input[type="email"] {
		color: #ffffff;
		background: #131618;
		background: var(--buffer-background);
		border: 1px solid #495057;
		padding: .25rem .375rem;
		padding: 0.25rem 0.375rem;
	}
	form input[type="text"]:focus,
	form input[type="username"]:focus,
@@ -397,25 +387,21 @@ kbd {
		border-color: #3897ff;
	}

	a {
		color: #53b266;
	}

	#buffer-list li a,
	a.timestamp,
	a.nick {
		color: #f8f9fa;
		color: var(--main-color);
	}

	#buffer {
		color: #f8f9fa;
		background: #212529;
		color: var(--main-color);
		background: var(--main-background);
	}
	#buffer .talk {
		color: #f8f9fa;
		color: var(--main-color);
	}
	#buffer .error {
		color: #fb615b;
		color: var(--red);
	}
	#buffer .me-tell {
		color: #c42560;
@@ -434,11 +420,11 @@ kbd {
		border-color: white;
	}
	#buffer .unread-separator {
		color: #53b266;
		color: var(--green);
	}
	#buffer .unread-separator::before,
	#buffer .unread-separator::after {
		border-color: #53b266;
		border-color: var(--green);
	}

	#error-msg {
-- 
2.31.1
Thanks! Pushed, with one minor change: replaced --buffer-background
with --sidebar-background because a buffer is the component where
messages are displayed.