custom styling of the Elk browser for Mastodon; give space to images and provides a calmer experience

elk-mastodon-css.css

/* ==UserStyle==
@name           elk-mastodon-css
@version        3
@description    custom styling of the Elk browser for Mastodon; give space to images and provides a calmer experience
@author         Liam Collod
==/UserStyle== */

@-moz-document domain("elk.zone") {
:root{
    --c-bg-base: rgb(28, 28, 28);
    --c-text-base: rgb(200, 200, 200);
    --c-text-base: rgb(123, 191, 161);
}

html {
    font-family:Atkinson Hyperlegible,-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 (min-width: 1024px){
    .xl\:w-1\/4{
        width: 20%;
    }
    .lg\:max-w-80rem, [lg\:max-w-80rem=""]{
        max-width: 95rem;
    }
}
        
        
@media (min-width: 640px){
    .sm\:w-600px{
        width: 800px;
    }
    .sm\:max-w-600px {
	    max-width: 800px;
    }
}

main > aside:nth-child(1) {
    opacity: 0.2;
}

/*images in posts*/
.object-cover, [object-cover=""] {
    object-fit: contain;
}

/* separator line between posts */
article > div > div[h="1px"],
div[id^="status"] > div[h="1px"] {
    margin: 3rem;
}

/* avatar image */
article img.account-avatar,
div[id^="status"] img.account-avatar {
    width: 24px;
    height: 24px;
}
article img.account-avatar[w-48px],
div[id^="status"] img.account-avatar[w-48px] {
    width: 30px;
    height: 30px;
}

/*profile names*/
article div > span > div > a:not([text-sm])[href*="@"],
div[id^="status"] div > span > div > a:not([text-sm])[href*="@"] {
    background-color: var(--c-bg-btn-disabled);
    padding-top: 3px;
    padding-bottom: 3px;
    opacity: 0.5;
}


/*thread multi column dialog */
.dialog-main {
    flex-direction: column;
}

}