Skip to content

1440p and DarkMode-supported Lemmy by jxduran by jxduran

Details

Authorjxduran

LicenseNo License

Categorylemmy.ml

Created

Updated

Size10 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

This style adds:

  1. Larger monitor support
  2. Windows/MacOS/Android/iOS Dark mode support, so you don't need to manually switch themes in settings

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         1440p Lemmy
@author       zettajon
@version      20230603.18.17
@namespace    ?
==/UserStyle== */
@-moz-document domain("lemmy.ml"),
domain("beehaw.org"),
domain("lemmy.one"), domain("lemmy.world"), domain("infosec.pub"), domain("geddit.social"), domain("lemm.ee"), domain("lemdro.id") {
	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl {
		max-width: 1800px !important;
	}

	:root {
		--lemmy-primary-1: #0057b3;
		--lemmy-primary-2: #003d80;
		--lemmy-secondary-1: #00696b;
		--lemmy-secondary-2: #008c8f;
		--lemmy-bg: rgb(255, 255, 255);
		--lemmy-bg-t: rgb(255, 255, 255, 0.7);
		--lemmy-element: rgb(248, 249, 250);
		--lemmy-text: #222;
		--lemmy-muted: #404040;
		--lemmy-border: #b7b7b7;
	}
	@media(prefers-color-scheme:dark) {
		:root {
			--lemmy-primary-1: #375a7f;
			--lemmy-primary-2: #2b6aaa;
			--lemmy-secondary-1: #48ac8b;
			--lemmy-secondary-2: #368c7c;
			/*--lemmy-secondary-1: #c88853;
			--lemmy-secondary-2: #e4a978;*/
			--lemmy-bg: rgb(7, 7, 7);
			--lemmy-bg-t: rgb(7, 7, 7, 0.7);
			--lemmy-element: rgb(26, 26, 26);
			--lemmy-text: #ececec;
			--lemmy-muted: #CFCFCF;
			--lemmy-border: #373737;
		}
	}

	body {
		background-color: var(--lemmy-bg) !important;
		color: var(--lemmy-text);
	}

	#app > div.mt-4 {
		margin-top: 70px !important;
	}
	
	#app > div .container-lg .row > .col-8 {
		flex-grow: 1;
	}
	#app > div .container-lg .row > .col-4 {
		width: min-content;
	}
	#app main > div.post > .row ul.comments {
		border-left: none !important;
	}
	#app .main-content-wrapper .post-listing .post-title h5 {
		display: flex;
	}
	#app .main-content-wrapper .post-listing .post-title h5 a.text-primary {
		color: var(--lemmy-secondary-1) !important;
	}
	#app .main-content-wrapper .post-listing .post-title h5 a.text-primary:hover, #app .main-content-wrapper .post-listing .post-title h5 a.text-primary:focus {
		color: var(--lemmy-secondary-2) !important;
	}
	#app .main-content-wrapper .post-listing .post-title h5 .btn-link {
		padding: 0;
	}
	#app .main-content-wrapper .post-listing .row > .col-12 > div.justify-content-start.flex-wrap:last-child {
		margin-top: 10px;
	}
	@media (min-width:1080px) {
		.d-md-none {
			display: none !important;
		}
		.d-md-block {
			display: block !important;
		}
		.container-lg main.col-md-8 {
			flex-basis: 100%;
			max-width: calc(100% - 420px);
		}
		.container-lg aside, .community-sidebar {
			width: 420px;
			padding: 0;
		}
		#app .main-content-wrapper .post-listing .post-title h5 {
			font-size: 18px;
			flex-direction: row-reverse;
		}
		#app .main-content-wrapper .post-listing .post-title h5 > a.d-inline-block {
			margin-right: auto;
		}
		#app .main-content-wrapper .post-listing .post-title h5 > small {
			margin-left: 0 !important;
			margin-right: 10px;
		}
		#app .main-content-wrapper .post-listing .post-title h5 .btn-link {
			height: 24px;
			display: flex !important;
			margin-right: 10px;
		}
		#app .main-content-wrapper .post-listing .post-title h5 .btn-link > svg.icon {
			margin: auto;
		}
	}
	@media (max-width:1079px) {
		.d-md-block {
			display: none !important;
		}
		.d-md-none {
			display: block !important;
		}
		.container-lg main.col-md-8 {
			flex-basis: 100% !important;
		}
		main, .container-lg > div.row > div:first-child {
			max-width: none !important;
			flex: unset !important;
		}
		.navbar-toggler {
			width: 32px;
			height: 32px;
			margin-left: 10px;
		}
		button.navbar-toggler > svg {
			width: 100%;
			height: 100%;
			display: block;
		}
		.navbar .nav-item .dropdown-content {
			padding: 4px;
			top: 42px;
			right: 0;
			background-color: var(--lemmy-element) !important;
			border-radius: 10px;
			box-shadow: 0 0 1px 0px var(--lemmy-text);
		}
		.navbar-expand-md .navbar-nav .nav-link {
			display: flex !important;
		}
		.navbar .nav-item .dropdown-content li button {
			margin: auto;
		}
		.navbar > .container-lg:first-child {
			min-height: 3rem;
		}
		/*#navbarLinks, #navMessages {
			display: none;
		}*/
		#navbarIcons {
			margin-left: auto;
		}
		#app .main-content-wrapper .post-listing .post-title h5 .btn-link {
			margin-left: 4px;
			margin-right: 4px;
		}
		#app .main-content-wrapper .post-listing .row .row .col-4 {
			display: flex;
			padding: 0 10px 0 0;
		}
		#app .main-content-wrapper .post-listing .row .row .col-4 > a.text-body {
			margin: auto !important;
		}
		#app .main-content-wrapper .post-listing .row .justify-content-start > .btn.btn-link:first-child {
			padding-right: 8px;
		}
		#app .main-content-wrapper .post-listing .row .justify-content-start > .btn.btn-link:first-child > a {
			display: flex;
			margin-top: 3px;
		}
		#app .main-content-wrapper .post-listing .row .justify-content-start > .btn.btn-link:first-child > a > svg.icon {
			margin: auto;
		}
		#app .main-content-wrapper .post-listing .row .justify-content-start > .btn.btn-link:first-child > a > .mr-2 {
			max-width: 100px;
			height: 24px;
			line-height: 20px;
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		#app .main-content-wrapper .post-listing .row .justify-content-start > a[title="cross-post"] {
			display: none;
		}
	}
	
	.navbar {
		width: 100%;
		height: max-content;
		min-height: 44px;
		background-color: var(--lemmy-bg);
		border-bottom: 1px solid var(--lemmy-border);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		box-shadow: none !important;
		z-index: 4;
	}
	.navbar .navbar-brand {
		align-items: revert !important;
		height: 2.2rem;
		font-size: 1.3rem;
		line-height: 1.4rem;
		padding-left: 40px;
		position: relative;
	}
	.navbar .navbar-brand picture {
		width: 30px;
		height: 36px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.navbar .navbar-brand picture > .img-icon {
		width: 30px;
		height: 30px;
		margin-top: 3px;
	}
	.navbar:first-of-type .container-lg .navbar-collapse ul {
		width: max-content;
	}
	.container-lg.navbar.navbar-expand-md.navbar-light.navbar-bg.p-3 {
		display: none;
	}
	.nav-item, #dropdownUser {
		display: flex;
	}
	.nav-item > a, , #dropdownUser > button {
		display: flex !important;
		margin-top: auto;
		margin-bottom: auto;
	}
	
	@media (max-width: 768px) {
		.collapse:not(.show) {
			display: none !important;
		}
		#app > div.mt-4 {
			margin-top: 50px !important;
		}
		.navbar {
			background-color: var(--lemmy-bg-t);
			backdrop-filter: blur(6px);
		}
		.navbar > * > *:nth-child(4) {
			z-index: 4;
			width: calc(100% - 30px);
			height: max-content;
			max-height: 70px;
			display: flex;
			top: 50px;
			background-color: var(--lemmy-bg);
		}
		.navbar > * > *:nth-child(4) ul {
			flex-direction: row;
		}
		.navbar > * > *:nth-child(4) ul:nth-child(1) li:last-child {
			display: none !important;
		}
		.navbar > * > *:nth-child(4) ul:nth-child(4) {
			display: none !important;
		}
		.navbar > * > *:nth-child(4) > ul > li {
			margin-right: 16px;
			display: flex;
			text-align: center;
			align-items: center;
		}
		.navbar > * > *:nth-child(4) ul:last-of-type > li {
			margin-right: 0;
		}
	}
	
	
	#app .card,
	#app form .form-group textarea.form-control {
		background-color: var(--lemmy-element);
		border-color: var(--lemmy-border);
	}
	#app .comments .comment .comment-node {
		background-color: var(--lemmy-bg) !important;
	}
	
	a {
		color: var(--lemmy-secondary-1);
	}
	a.link-primary > span.d-inline {
		color: var(--lemmy-secondary-1) !important;
	}
	a:focus, a:hover {
		color: var(--lemmy-secondary-2) !important;
	}
	a.link-primary:hover > span.d-inline, a.link-primary:focus > span.d-inline {
		color: var(--lemmy-secondary-2) !important;
	}

	.btn-outline-secondary:not(:disabled):not(.disabled).active,
	.btn-outline-secondary:not(:disabled):not(.disabled):active,
	.show > .btn-outline-secondary.dropdown-toggle,
	.btn-outline-secondary:hover,
	.btn-secondary,
	.badge-secondary {
		background-color: var(--lemmy-primary-1);
		border-color: var(--lemmy-primary-1);
		color: white !important;
	}

	.btn:focus {
		box-shadow: 0 0 0 .2rem var(--lemmy-secondary-1);
		border-color: var(--lemmy-secondary-1);
	}

	.btn-outline-secondary {
		color: var(--lemmy-primary-1);
		border-color: var(--lemmy-primary-1) !important;
	}
	.btn-outline-secondary.disabled,
	.btn-outline-secondary:disabled {
		color: var(--lemmy-primary-1);
	}

	.btn-secondary.disabled,
	.btn-secondary:disabled {
		background-color: var(--lemmy-primary-1);
		border-color: var(--lemmy-primary-2);
	}
	.btn-secondary:hover,
	.btn-secondary:focus {
		background-color: var(--lemmy-primary-2);
		border-color: var(--lemmy-primary-2);
	}

	.border-secondary {
		border-color: var(--lemmy-secondary-1) !important;
	}
	
	.comments .comment .badge:nth-of-type(1) {
		display: inline-block !important;
	}
	.comments .comment .badge:nth-of-type(2) {
		display: none !important;
	}
	.badge-primary {
		background-color: var(--lemmy-secondary-1);
	}
	.badge-primary:focus, .badge-primary:hover {
		background-color: var(--lemmy-secondary-2) !important;
	}

	.choices {
		background: var(--lemmy-bg) !important;
		border-color: var(--lemmy-text);
	}
	.choices__item,
	.choices__inner {
		background-color: var(--lemmy-bg) !important;
	}
	
	.form-select:hover, .form-control:hover, .custom-select:hover {
		border-color: var(--lemmy-primary-1);
	}
	.form-select:focus, .form-control:focus, .custom-select:focus {
		box-shadow: 0 0 0 .2rem var(--lemmy-primary-1);
		border-color: var(--lemmy-primary-1);
	}
	
	textarea.form-control {
		background-color: var(--lemmy-bg);
	}
	.text-body {
		color: var(--lemmy-text) !important;
	}
	.text-muted, .card-body {
		color: var(--lemmy-muted) !...

Reviews

No reviews yet.