This style adds:
- Larger monitor support
- Windows/MacOS/Android/iOS Dark mode support, so you don't need to manually switch themes in settings
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
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) !...