Elk themed to look more like the macOS Twitter app
macOS Elk by uzair
Details
Authoruzair
LicenseNo License
Categorywww.google.com
Created
Updated
Code size24 kB
Code checksumf65fb9d9
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.@-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 the Mumei ------ */
#__nuxt>div:nth-child(2)>main>aside.hidden.sm\:none.lg\:block.w-1\/4.zen-hide {
display: none;
}
/* Post Positioning and width */
#__nuxt>div:nth-child(2)>main>div {
margin: auto;
width: 90%;
padding: 0p...