jxduran Photon Lemmy by jxduran

/* ==UserStyle==
@name           jxduran Photon Lemmy
@namespace      github.com/openstyles/stylus
@version        1.0.5
@description    A new userstyle
@author         jxduran
==/UserStyle== */
@-moz-document domain("lemdro.id"), domain("p.lemdro.id") {
	: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;
		}
	}
	html {
		font-size: 110%;
	}
	
	body, body div.shell {
		font-family: sans-serif;
	}
    body div.shell > nav button[aria-label="Profile"] > div > img {
		width: 100% !important;
		height: 100% !important;
	}
	body > div > div.min-h-screen > div.w-full.h-full > nav {
		max-width: 400px;
		@media (max-width: 1300px) {
			max-width: 30%;
		}
	}
	body > div > div.min-h-screen > div.w-full.h-full > main > div.w-full.h-full > div.w-full.max-w-full {
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}
	body > div > div.min-h-screen > div.w-full.h-full > main > div.mt-4 > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div {
		padding-bottom: 10px;
	}
	body > div > div.min-h-screen > div.w-full.h-full > main > div.mt-4 > div:nth-of-type(2) > div > div > div:nth-of-type(2) textarea {
		height: 100px;
		padding: 0.5rem;
	}
	body > div > div.min-h-screen > div.w-full.h-full > main > div.mt-4 > div:nth-of-type(2) > div > div > div:nth-of-type(3) {
		padding-top: 0.2rem;
	}
	body > div > div.min-h-screen > div.w-full.h-full > main .markdown p {
		line-height: 1.4;
	}

	main#main ul.divide-y ul.border-l >li.py-3 {
		padding-bottom: 0 !important;
	}
	main#main > div.max-w-full.w-full > ul.divide-y > li > div.rounded-lg > div.gap-4 > div.gap-2 > div.gap-2 > a.font-medium {
		font-size: 1.1rem;
	}
	main#main > div.max-w-full.w-full > ul.divide-y > li > div.rounded-lg > div.gap-4 > div.gap-2 > div.border.rounded-lg > div > a.text-base {
		color: inherit !important;
		line-height: 1.25rem !important;
	}
	
	.markdown p {
		line-height: 1.25rem !important;
	}
	
	/*a {
		color: var(--lemmy-secondary-1) !important;
	}
	a:hover {
		color: var(--lemmy-secondary-2) !important;
	}*/
	
	@media (min-width: 690px) and (max-width: 767px) {
        .content.svelte-1tfjyei {
            grid-template-columns:min-content 2fr;
            justify-items:end start;
            grid-template-areas:"sidebar main"
        }
	}
    
    @media (min-width: 690px) {
        .md\:ml-auto {
            margin-left:auto
        }
        .md\:flex {
            display:flex
        }
        .md\:h-8 {
            height:2rem
        }
        .md\:flex-1 {
            flex:1 1 0%
        }
        .md\:grid-cols-3 {
            grid-template-columns:repeat(3,minmax(0,1fr))
        }
        .md\:flex-row {
            flex-direction:row
        }
        .md\:items-center {
            align-items:center
        }
        .md\:gap-4 {
            gap:1rem
        }
        .md\:divide-x>:not([hidden])~:not([hidden]) {
            --tw-divide-x-reverse: 0;
            border-right-width:calc(1px * var(--tw-divide-x-reverse));
            border-left-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))
        }
    }
}