Skip to content

macOS Elk by slippinggitty

Imported from https://github.com/SlippingGitty/macOSElk-UserStyle/raw/main/macOSElk.user.css

Screenshot of macOS Elk

Details

Authorslippinggitty

LicenseNo License

Categoryelk.zone

Created

Updated

Size24 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Elk themed to look more like the macOS Twitter app

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.
@-moz-document domain("elk.zone") {
/* ==UserStyle==
@name         macOS Elk
@description  Elk themed to look more like the macOS Twitter app
@author       Vozer
@namespace    https://github.com/SlippingGitty/macOSElk
@version      1.0.0
==/UserStyle== */

/*
███╗   ███╗ █████╗  ██████╗ ██████╗ ███████╗        ███████╗██╗     ██╗  ██╗
████╗ ████║██╔══██╗██╔════╝██╔═══██╗██╔════╝        ██╔════╝██║     ██║ ██╔╝
██╔████╔██║███████║██║     ██║   ██║███████╗        █████╗  ██║     █████╔╝ 
██║╚██╔╝██║██╔══██║██║     ██║   ██║╚════██║        ██╔══╝  ██║     ██╔═██╗ 
██║ ╚═╝ ██║██║  ██║╚██████╗╚██████╔╝███████║███████╗███████╗███████╗██║  ██╗
╚═╝     ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝╚══════╝╚══════╝╚══════╝╚═╝  ╚═╝
                                                                            */

/* ----- Color Varriables ----- */

/* Dark Theme stuff */       
.dark {
    --c-primary: rgb(35, 145, 223) !important;
    --c-primary-active: rgb(35, 145, 223) !important;
    --c-primary-light: var(--c-dark-primary-light);
    --c-primary-fade: var(--c-dark-primary-fade);
    --c-border: rgb(15, 59, 58);
    --c-border-dark: rgb(15, 59, 58);
    --rgb-bg-base: rga(17, 17, 17);
    --c-bg-active: rgb(40, 40, 40);
    --c-bg-card: #ffffff06;
    --c-bg-code: #ffffff06;
    --c-bg-dm: rgb(15, 59, 58);
    --c-bg-base: rgb(15, 59, 58);
    --c-text-base: rgb(224, 224, 224);
    --c-text-secondary: rgba(108, 112, 117);
    --c-text-secondary-light: rgba(108, 112, 117);
    --c-bg-btn-disabled: rgb(40, 40, 40);
    --c-text-btn-disabled: rgba(35, 145, 223, 0.612);
    --c-background-amoled: black;
    --c-background-dark: rgb(16, 19, 22);
    --c-background-midnight: rgb(21, 32, 43);
    --c-sidebar-midnight: rgb(28, 47, 66);
    --c-sidebar-dark: rgb(40, 40, 40);
    --c-text-color: white;
}
    
/* Light Theme stuff */    
.light {
    --c-primary: rgb(35, 145, 223) !important;
    --c-primary-active: rgb(35, 145, 223) !important;
    --c-primary-light: var(--c-dark-primary-light);
    --c-primary-fade: var(--c-dark-primary-fade);
    --c-border: rgba(100, 100, 100, .12);
    --c-border-dark: rgb(139, 139, 139);
    --rgb-bg-base: rga(17, 17, 17);
    --c-bg-active: rgb(236, 236, 236);
    --c-bg-card: #ffffff06;
    --c-bg-code: #ffffff06;
    --c-bg-dm: rgb(15, 59, 58);
    --c-bg-base: rgb(255, 255, 255);
    --c-text-base: rgb(107, 107, 107);
    --c-text-secondary: rgb(81, 81, 81);
    --c-text-secondary-light: rgb(0, 0, 0);
    --c-bg-btn-disabled: rgb(40, 40, 40);
    --c-text-btn-disabled: rgba(35, 145, 223, 0.612);
    --c-background-midnight: rgb(255, 255, 255);
    --c-sidebar-midnight: rgb(192, 192, 192);
    --c-text-color: black;
}
.light #__nuxt>div:nth-child(2)>main>aside.hidden.sm\:flex.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4.justify-end.xl\:me-4.zen-hide /* Sidebar border */ {
    border-right: solid 1px rgb(192, 192, 192);
}
.light #__nuxt > div:nth-child(2) > main > aside.hidden.native\:w-auto.sm\:flex.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4.justify-end.xl\:me-4.zen-hide > div > div > nav /* Sidebar Icons */ {
    color: #383838;
}
.light #__nuxt>div:nth-child(2)>main>aside.hidden.sm\:flex.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4.justify-end.xl\:me-4.zen-hide>div>div>nav>a.text-primary.router-link-exact-active>div>div /* Selected Icons */ {
    background: #0000001f;    
}
.light #__nuxt>div:nth-child(2)>main>aside.hidden.sm\:flex.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4.justify-end.xl\:me-4.zen-hide>div>div>nav>a:nth-child(10)>div>div /* Quilt Icon */ {
    color: white;
}
.light div:nth-child(3)>div:nth-child(2)>div:nth-child(2)>a {
    border: solid #3636368f 1px;
}


/* ---- Background & Text Color ----- */
    
/* Background Color */

html {
    background-color: var(--c-background-dark);
    color: var(--c-text-color);
}

/* ---- Sidebar ---- */
#__nuxt > div:nth-child(2) > main > aside.native\:w-auto.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4  {
    background-color: var(--c-sidebar-dark);
    width: auto;
    border-right: solid 1px rgb(15, 59, 58);
}
#__nuxt>div:nth-child(2)>main>aside.hidden.sm\:flex.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4.justify-end.xl\:me-4.zen-hide>div>div>nav>a.text-primary.router-link-exact-active>div>div /* selected tab color */ {
    background-color: rgb(31, 31, 31);
}
#__nuxt>div:nth-child(2)>main>aside.hidden.sm\:flex.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4.justify-end.xl\:me-4.zen-hide>div>div>nav>a.text-primary.router-link-exact-active>div>div /* selected tab color */ {
    background-color: rgb(31 31 31 / 70%);
}
    
.sm\:mxa, [sm\:mxa=""] {
    margin-bottom: -1px !important;
}
    
/* #__nuxt > div:nth-child(2) > main > aside.native\:w-auto.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4 > div > div > nav > div:nth-child(1),
#__nuxt > div:nth-child(2) > main > aside.native\:w-auto.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4 > div > div > nav > div:nth-child(4), #__nuxt > div:nth-child(2) > main > aside.native\:w-auto.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4 > div > div > nav > div:nth-child(2), #__nuxt > div:nth-child(2) > main > aside.native\:w-auto.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4 > div > div > div:nth-child(1) > div, #__nuxt > div:nth-child(2) > main > aside.native\:w-auto.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4.zen-hide > div > div > nav > a:nth-child(2), .py-4, .py4, [py-4=""], [py4=""] {
        display: none;
} */

.zen .zen-hide {
    opacity: 1;
}

.py-4, .py4, [py-4=""], [py4=""] {
    padding-bottom: 1px;
    padding-top: 1rem;
    background-color: transparent;
}

#__nuxt > div:nth-child(2) > main > aside.native\:w-auto.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4.zen-hide > div > div > nav > div:nth-child(3) {
    display: none;
}
#__nuxt > div:nth-child(2) > main > aside.native\:w-auto.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4 > div > div > nav
 /* hides scroll bar */ {
    overflow-y: hidden;
}
.sm\:mxa,
[sm\:mxa=""] /* properly aligns sidebar icons */{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}
#__nuxt > div:nth-child(2) > main > aside.native\:w-auto.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4 > div > div > div:nth-child(1) > a /* hides logo */ {
    display: none;
}
.text-xl,
[text-xl=""]:hover /* Woah cool hover effect woah */{
    font-size: 1.05rem;
    line-height: 1.05rem;
    transition: .2s;
}
    
    
 #__nuxt > div:nth-child(2) > main > aside.native\:w-auto.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4 > div > div > div:nth-child(4) > div:nth-child(2) {
        background-color:  var(--c-sidebar-dark);
}

/* Hides Search Button */
/* #__nuxt>div:nth-child(2)>main>aside.hidden.sm\:flex.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4.justify-end.xl\:me-4.zen-hide>div>div>nav>a:nth-child(3) {
    display: none;
} */

/* Quilt Button */
#__nuxt > div:nth-child(2) > main > aside.native\:w-auto.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4 > div > div > nav > a:nth-child(10) > div > div, #__nuxt > div:nth-child(2) > main > aside.native\:w-auto.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4.zen-hide > div > div > nav > a:nth-child(9) {
    background: rgb(54, 159, 230);
    color: white;
    border-radius: 100px;
    height: 50px;
    width: 50px;
    box-shadow: 1px 1px 10px #0000007a;
    margin-left: 2px;
        order: 1;
}
    #__nuxt > div:nth-child(2) > main > aside.native\:w-auto.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4.zen-hide > div > div > nav > div:nth-child(8), #__nuxt > div:nth-child(2) > main > aside.native\:w-auto.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4.zen-hide > div > div > nav > div:nth-child(10), #__nuxt > div:nth-child(2) > main > aside.native\:w-auto.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4.zen-hide > div > div > nav > div:nth-child(15) {
    display: none;
}

.i-ri\:quill-pen-line {
    margin: auto;
    margin-top: 6px;
    margin-left: 3px;
}


/* Title Bar */
#__nuxt>div:nth-child(2)>main>div>div:nth-child(1)>div>div:nth-child(1) [gap-2=""]  {
    margin-left: auto;
    margin-right: auto;
    color: rgb(219,219,219);
    font-weight: 900;
    font-size: 20px;
    height: 15px;
}
[i-ri\:home-5-line=""], [i-ri\:notification-4-line=""], [i-ri\:at-line=""], [i-ri\:heart-3-line=""], [i-ri\:bookmark-line=""], [i-ri\:settings-3-line=""] {
    display: none;
}
#__nuxt>div:nth-child(2)>main>div>div:nth-child(1)>div>div:nth-child(1) {
    border-bottom: solid 0.1px #a4a4a40f;
}


/* Mobile App Bar */    
#__nuxt>div:nth-child(2)>main>div>div:nth-child(2) {
    border-radius: 15px;
    background: rgba(var(--c-sidebar-midnight, .50));
    backdrop-filter: blur(200px);
    margin-right: 100px;
    margin-left: 100px;
}

/* Make Shift Recreation of XL Sidebar for all sizes */
.xl\:w-100,
[xl\:w-100=""] {
    width: 5.5rem;
}
.xl-block,
.xl\:block,
[xl-block=""],
[xl\:block=""] {
    font-size: 0;
}
#__nuxt>div:nth-child(2)>main>aside.hidden.native\:w-auto.sm\:flex.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4.justify-end.xl\:me-4.zen-hide>div>div>nav>div:nth-child(2) {
    display: none;
}
#__nuxt>div:nth-child(2)>main {
    max-width: initial;
}

/* Little avatar circle thingy :B */
#__nuxt > div:nth-child(2) > main > aside.native\:w-auto.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4 > div > div > div:nth-child(4) > div:nth-child(2) > div.v-popper.v-popper--theme-dropdown > button > img,
#__nuxt > div:nth-child(2) > main > aside.native\:w-auto.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4 > div > div > div:nth-child(4) > div:nth-child(2) > div:nth-child(1) > div > a > div > div:nth-child(1) > img{
    border: 2px solid #b5b5b5;
    border-radius: 100%;
}

#__nuxt > div:nth-child(2) > main > aside.native\:w-auto.w-1\/8.md\:w-1\/6.lg\:w-1\/5.xl\:w-1\/4 > div > div > div:nth-child(4) > div:nth-child(2) > div:nth-child(1) > div > a > div > div:nth-child(1) {
    border-radius: 100%;
    margin-left: -5px;
}

/* ------ The rest of th...

Reviews

No reviews yet.