lobsters-warm-dark.user.css

/* ==UserStyle==
@name           Lobste.rs Warm Dark Theme
@namespace      github.com/supremesnickers
@version        1.0.2
@description    A heart-warming dark theme for lobste.rs
@author         supremesnickers
@preprocessor   less
==/UserStyle== */
@-moz-document domain("lobste.rs") {
	@bg-primary: #292524;
	@bg-secondary: #44403C;
	@bg-tertiary: #403b3b;
	@text-primary: #F4F4F5;
	@text-secondary: #D6D3D1;
	@text-tertiary: #A8A29E;
	@text-placeholder: #57534E;
	@text-disabled: #686664;
	@text-white: #fff;
	@border-danger: #EF4444;

	body {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	}

	@media(prefers-color-scheme:dark) {
		@media(max-width: 480px) {
			div#header, div#leader {
				color: @text-tertiary;
				padding: 16px 5px;
				background-color: @bg-primary;
				border-bottom: 1px solid @text-placeholder;
			}
			ol.stories.list li.story {
				border-bottom: 0px solid @text-placeholder;
				div.story_liner {
					background-color: @bg-primary;
				}
				.mobile_comments {
					background-color: @bg-secondary;
				}
			}
		}
		body {
			background-color: @bg-primary;
			color: @text-primary;
		}
		#headerleft {
			.headerlinks .cur_url {
				color: @text-primary;
			}
		}

		#header {
			a {
				color: @text-tertiary;
				&:hover {
					color: @text-white;
				}
			}
		}
		#inside {
			p {
				color: @text-secondary;
			}
			.stories .story {
				.link {
					a {
						color: @text-secondary;
						&:visited {
							color: @text-disabled !important;
						}
						&:hover {
							text-decoration: underline;
							text-decoration-line: underline;
							text-decoration-thickness: 2px;
							text-decoration-style: initial;
							text-decoration-color: initial;
						}
					}
				}
			}
			a {
				color: @text-secondary;
			}
			.help {
				color: @text-tertiary;
			}
		}
		table {
			&.data {
				th {
					background-color: @bg-primary;
					border-bottom: 1px solid @text-placeholder;
					border-top: 1px solid @text-placeholder;
				}
				&.zebra {
					border-color: @text-placeholder;
					td {
						border-bottom: 1px solid @text-placeholder !important;
					}
					tr:nth-child(even) td {
						background-color: @bg-tertiary;
					}
					tr:nth-child(odd) td {
						background-color: @bg-secondary;
					}
				}
			}
			span.hat {
				span.crown,
				a {
					color: @bg-primary !important;
				}
			}
		}
		a.tags {
			color: @bg-primary !important;
		}
		.upvoter:hover {
			border-bottom-color: @border-danger !important;
		}
		li {
			.comment_parent_tree_line,
			.comment_siblings_tree_line {
				border-left: 1px dotted @text-placeholder;
			}
		}
		textarea {
			&::placeholder {
				color: @text-tertiary;
			}
			background-color: @bg-secondary !important;
			border: 1px solid @text-placeholder;
		}
	}
}