my personal elk theme
shared just because open source is nice
Elk 257 DELUXE by Whey
Details
AuthorWhey
LicenseMIT
Categoryelk.zone
Created
Updated
Code size22 kB
Code checksum987233b2
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
my personal elk theme
shared just because open source is nice
no versioning and no support given
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Elk 257 DELUXE
@namespace github.com/openstyles/stylus
@version 0.0.0
@description my personal elk theme
@author Whey!
@preprocessor stylus
@var checkbox accent 'Enable Accent Color' 1
@var color ac123 'Custom Accent Color' #83d496bf
@var range askdiaksd 'search results scale' [1.2, 1, 1.4, 0.05, ]
==/UserStyle== */
@-moz-document domain("elk.zone") {
:root {
/*
--c-primary-active: #8774BC !important;
--c-primary: hsl(257, 56%, 72%) !important;
--c-primary-light: #4f44ea1a !important;
--c-border: #d4d4d4 !important;
--c-border-dark: #333639 !important;
--c-bg-base: hsl(257, 18%, 7%) !important;
--c-bg-base-rgb: 17, 17, 17;
--c-bg-active: hsl(257, 20%, 10%) !important;
--c-bg-card: hsla(257, 0%, 100%, .024) !important;
--c-bg-code: hsla(257, 0%, 100%, .024) !important;
--c-bg-fade: hsla(257, 8%, 59%, .067) !important;
--c-bg-dm: hsl(257, 68%, 12%) !important;
--c-text-base: #f3f3f3;
--c-text-code: #8e9bec !important;
--c-text-secondary: hsl(257, 2%, 53%) !important;
--c-text-secondary-light: hsl(257, 2%, 41%) !important;
--c-bg-btn-disabled: hsl(257, 9%, 16%) !important;
--c-text-btn-disabled: hsl(257, 5%, 57%) !important;
background: hsl(240, 15%, 7%) !important;*/
}
:root{
--askdiaksd: askdiaksd;
--scalery: var(--askdiaksd, 1.2);
}
if accent {
:root {
/*declared*/
--c-primary: ac123 !important;
}
@css{
:root{
--c-primary-active: color-mix(in lch, var(--c-primary) 80%, white) !important;
}
}
}
@css {
html.dark {
--c-border: #333639 !important;
--c-bg-base: black;
}
html.light {
--c-border: #d4d4d4 !important;
--c-bg-base: white;
}
@media (min-width: 1024px){
main{
max-width: 80rem !important;
>aside:nth-of-type(1){
width: 22%;
}
>aside:nth-of-type(2){
width: 30%;
}
}
}
div:has( + [left-0][top-11][absolute][w-full][z10][invisible][pointer-events-none]){
border-radius: 9999px;
}
[left-0][top-11][absolute][w-full][z10][invisible][pointer-events-none]{
border-radius: 16px;
width: calc((100%)* var(--scalery)) !important;
visibility: visible;
pointer-events: auto;
top: 3.75rem;
scale: calc(1/(var(--scalery)));
transform-origin: top left;
> div{
background: var(--c-bg-active) !important;
border: none;
max-height: calc((100dvh - 2.75rem - 200px)*var(--scalery));
min-height: 120px;
>span:nth-child(1):nth-last-child(1){
text-align: start;
text-indent: 12px;
font-size: 15px;
margin-top: 6px;
}
a:has( > [id*="status-"]){
padding: 0;
div[flex="~ col 1"][min-w-0] > div[flex][items-center][space-x-1]:has(time){
margin-right: 12px;
}
}
}
}
div[aria-roledescription="status-details"] > a[class=""][rounded-full][transition-100][pe5][me-a]{
margin-bottom: -8px;
/*
margin-top: 0;
.content-rich > p:first-child{
margin-top: 0 !important;
}*/
}
@media (min-width: 1280px) {
main > aside + div,
a[href = "/home"] + div[hidden] > div {
translate: -14px 0px;
}
/*
main > aside + div{
z-index: 5;
}
a[href = "/home"] + div[hidden] > div {
z-index: 6;
}*/
}
button[text-sm][font-bold][class = "rounded-1 bg-black/65 text-white hover:bg-black px1.2 py0.2"] {
font-size: .725rem;
}
a[bg-card]:has(> div[w-24][h-24][min-w-24][sm="min-w-32 w-32 h-32"] > [class="i-ri:profile-line"]):has(> div[w-24][h-24][min-w-24][sm="min-w-32 w-32 h-32"] + [max-h-2xl][my-auto][class="justify-center sm:justify-start"]) {
flex-direction: row !important;
display: flex;
}
a[bg-card] > div[w-24][h-24][min-w-24][sm="min-w-32 w-32 h-32"]:has(+ [max-h-2xl][my-auto][class="justify-center sm:justify-start"]) {
border-right: 1px solid var(--c-border);
}
/*
main[mxa=""]{
max-width: 84rem;
&>aside[xl\:me-4=""]{
width: auto;
max-width: 270px;
}
&>div{
max-width: 600px;
}
&>aside[.xl\:block]{
width: auto;
}
}*/
g[id = "g28"] > path[id = "path22"][class = "body"] {
fill: var(--c-primary);
}
.text-sm, [text-sm = ""] {
--c-text-secondary-light: hsl(257, 1%, 53%) !important;
}
img.rtl-flip {
content: url("https://cdn.discordapp.com/attachments/1042248613109186625/1063034107640172574/logo-257.svg");
}
@media (min-width: 800px) {
/*.sm\:max-w-600px, div[flex = "~ col"][pt-6 = ""][h-screen = ""],*/
div[class = "sm:w-600px md:shrink-0"][w-full = ""][min-h-screen = ""][border-base = ""] {
border-left: 1px solid var(--c-border);
border-right: 1px solid var(--c-border);
}
}
.bg-border, [bg-border = ""] {
width: 999999px;
translate: -33% 0;
}
main > aside:nth-of-type(1), main > aside:nth-of-type(1) > div, main > aside:nth-of-type(1) > div > div {
overflow: visible;
z-index: 5;
}
.xl\:mt-4, [xl\:mt-4 = ""] {
margin-top: 5px;
}
div[class = "xl:block"][hidden = ""][h-6 = ""] {
height: 54px;
border-bottom: 1px solid var(--c-border);
}
a[href = "/home"] + div[hidden] > div {
position: absolute;
right: calc( 0px - 1rem - 600px);
top: 0;
width: 600px;
height: 53px;
border-left: 1px solid var(--c-border);
border-right: 1px solid var(--c-border);
}
@media (min-width: 1280px){
[aria-label = "Go back"] {
&::after {
content: "Back";
position: absolute;
width: auto;
height: auto;
padding-left: 50px;
color: var(--c-text-base);
font-size: 18px;
font-weight: bold;
transform: translatey(-1px);
}
&::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: -59;
/*background: hsla(240, 15%, 7%, 0.65);*/
background: var(--c-bg-base);
opacity: 0.65;
}
backdrop-filter: blur(12px);
width: 100%;
height: 100%;
/*
border-bottom: 1px solid var(--c-border);*/
display: flex;
align-items: center;
justify-items: center;
& > div {
margin-left: 10px;
}
}
}
.squircle, .squircle *, .account-avatar {
border-radius: 9999999px;
}
span.xl\:pt5, span[xl\:pt5 = ""] {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
div[class = ""][flex = ""][flex-col = ""][border = "b base"] {
border-bottom: 0;
}
div[relative = ""][group = ""][mt-4 = ""][mx-1 = ""][hidden = ""][xl\:block = ""] {
margin-top: 0px;
}
a[href = "/compose"] + div {
display: none;
}
a[href = "/compose"] {
margin-top: 14px;
order: 99999999999;
& > div {
& > div {
display: flex;
align-items: center;
justify-items: center;
justify-content: center;
margin-left: 8px;
margin-right: auto;
max-width: 80%;
border-radius: 9999999999px;
padding-bottom: 8px !important;
padding-top: 8px !important;
background: var(--c-primary);
color: var(--c-text-base);
&:hover {
background: var(--c-primary-active) !important;
}
& > div {
display: none;
}
}
}
&:hover {
& > div > div {
background: var(--c-primary-active) !important;
}
}
}
/*<div flex="~ col gap2" rounded="" min-w-90="" max-w-120="" z-100="" overflow-hidden="" p-4="">*/
[class = "v-popper__inner"]/*, div[flex="~ col gap2"][rounded=""][min-w-90=""][max-w-120=""][z-100=""][overflow-hidden=""][p-4=""]*/
{
border-radius: 16px !important;
box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 15px, rgba(255, 255, 255, 0.15) 0px 0px 3px 1px;
...