Skip to content

Showdown Glassmorphism by 12as3m

Screenshot of Showdown Glassmorphism
Write a review Install Get Stylus

Details

Author12as3m

LicenseCC BY 4.0

Categoryplay.pokemonshowdown.com

Created

Updated

Size116 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

NOT DONE YET; BATTLE STUFF IS A BIT INCOMPLETE.

Makes Pokemon Showdown have nice, glassmorphic surfaces.

Notes

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           Showdown Glassmorphism
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me

@advanced number accent-hue "Accent hue:" 210

@advanced number accent-sat "Accent saturation:" 50

@advanced number accent-lghtnss "Accent brightness:" 50

@advanced number room-bg-sat "Room background saturation:" 20

@advanced dropdown solid-bg-lghtnss "Solid background lightness mode:" {
accent-50 "Accent + Or - 50%*" <<<EOT
:root {
    --solid-bg: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 1.5));
    --solid-bg-2: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 1.4));
    --solid-bg-3: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 1.3));
}

.dark {
    --solid-bg: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 0.5));
    --solid-bg-2: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 0.4));
    --solid-bg-3: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 0.3));
}
EOT;

accent-40 "Accent + Or - 40%" <<<EOT
:root {
    --solid-bg: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 1.4));
    --solid-bg-2: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 1.3));
    --solid-bg-3: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 1.2));
}

.dark {
    --solid-bg: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 0.6));
    --solid-bg-2: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 0.5));
    --solid-bg-3: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 0.4));
}
EOT;

accent-30 "Accent + Or - 30%" <<<EOT
:root {
    --solid-bg: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 1.3));
    --solid-bg-2: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 1.2));
    --solid-bg-3: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 1.1));
}

.dark {
    --solid-bg: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 0.7));
    --solid-bg-2: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 0.6));
    --solid-bg-3: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 0.5));
}
EOT;

accent-10 "Accent + Or - 10%" <<<EOT
:root {
    --solid-bg: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 1.1));
    --solid-bg-2: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 1.0));
    --solid-bg-3: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 0.9));
}

.dark {
    --solid-bg: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 0.9));
    --solid-bg-2: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 0.8));
    --solid-bg-3: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 0.7));
}
EOT;

accent-60 "Accent + Or - 60%" <<<EOT
:root {
    --solid-bg: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 1.6));
    --solid-bg-2: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 1.5));
    --solid-bg-3: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 1.4));
}

.dark {
    --solid-bg: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 0.4));
    --solid-bg-2: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 0.3));
    --solid-bg-3: hsl(var(--accent-hue), calc(var(--room-bg-sat) * 2), calc(var(--accent-lghtnss) * 0.2));
}
EOT;
}

@advanced dropdown elev-shad_over-glass "Solid background shadow:" {
medium "Medium*" <<<EOT
--elev-shad_over-glass: 0 3px 8px hsla(0, 0%, 0%, .2);
--elev-shad_inset: inset 0 2px 3px hsla(0, 0%, 0%, 0.1);
EOT;

weak "Weak" <<<EOT
--elev-shad_over-glass: 0 3px 8px hsla(0, 0%, 0%, .1);
--elev-shad_inset: inset 0 2px 3px hsla(0, 0%, 0%, 0.05);
EOT;

strong "Strong*" <<<EOT
--elev-shad_over-glass: 0 3px 8px hsla(0, 0%, 0%, .3);
--elev-shad_inset: inset 0 2px 3px hsla(0, 0%, 0%, 0.2);
EOT;
}

@advanced dropdown accent-2 "Accent 2's hue is accent 1's plus:" {
120 "120 (Triadic)*" <<<EOT 120 EOT;

180 "180 (Complementary)" <<<EOT 180 EOT;

240 "240 (Triadic)" <<<EOT 240 EOT;

270 "270" <<<EOT 270 EOT;

300 "300" <<<EOT 300 EOT;

330 "330" <<<EOT 330 EOT;

30 "30" <<<EOT 30 EOT;

60 "60" <<<EOT 60 EOT;

90 "90" <<<EOT 90 EOT;
}

@advanced dropdown room-opacity "Room background style:" {
normal "Glass*" <<<EOT  EOT;

thicker-glass "Thicker Glass" <<<EOT 
:root {
    --room-bg: radial-gradient(hsla(var(--accent-hue), var(--room-bg-sat), 95%, .8), hsla(var(--accent-hue), var(--room-bg-sat), 95%, .9));
}

.dark {
    --room-bg: radial-gradient(hsla(var(--accent-hue), var(--room-bg-sat), 10%, .8), hsla(var(--accent-hue), var(--room-bg-sat), 10%, .9));
}
EOT;

translucent "Translucent" <<<EOT 
:root {
    --room-bg: hsla(var(--accent-hue), var(--room-bg-sat), 95%, .7);
    --blur-satu: none;
}

.dark {
    --room-bg: hsla(var(--accent-hue), var(--room-bg-sat), 10%, .7);
}

.ps-popup,
#tooltipwrapper .tooltip {
    --room-bg: hsla(var(--accent-hue), var(--room-bg-sat), 95%, .95);
}

.dark .ps-popup,
.dark #tooltipwrapper .tooltip {
    --room-bg: hsla(var(--accent-hue), var(--room-bg-sat), 10%, .95);
}
EOT;

darker-translucent "Thicker Translucent" <<<EOT 
:root {
    --room-bg: hsla(var(--accent-hue), var(--room-bg-sat), 95%, .9);
    --blur-satu: none;
}

.dark {
    --room-bg: hsla(var(--accent-hue), var(--room-bg-sat), 10%, .9);
}

.ps-popup,
#tooltipwrapper .tooltip {
    --room-bg: hsla(var(--accent-hue), var(--room-bg-sat), 95%, .97);
}

.dark .ps-popup,
.dark #tooltipwrapper .tooltip {
    --room-bg: hsla(var(--accent-hue), var(--room-bg-sat), 10%, .97);
}
EOT;

opaque "Opaque" <<<EOT 
:root {
    --room-bg: hsl(var(--accent-hue), var(--room-bg-sat), 95%);
    --blur-satu: none;
}

.dark {
    --room-bg: hsl(var(--accent-hue), var(--room-bg-sat), 10%);
}
EOT;
}

@advanced dropdown background-blur "Main background blur:" {
none "None*" <<<EOT  EOT;

5px "5px" <<<EOT 
body::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    backdrop-filter: blur(5px)
}
EOT;

15px "15px" <<<EOT 
body::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    backdrop-filter: blur(15px)
}
EOT;

30px "30px" <<<EOT 
body::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    backdrop-filter: blur(30px)
}
EOT;
}

@advanced dropdown header-font "Header font-family:" {
lexend "Lexend*" <<<EOT Lexend EOT;

bellota "Bellota" <<<EOT Bellota EOT;

bellota-text "Bellota Text" <<<EOT Bellota Text EOT;

cabin "Cabin" <<<EOT Cabin EOT;

quicksand "Quicksand" <<<EOT Quicksand EOT;

montserrat "Montserrat" <<<EOT Montserrat EOT;

nunito "Nunito" <<<EOT Nunito EOT;

nunito-sans "Nunito Sans" <<<EOT Nunito Sans EOT;

trebuchet-ms "Trebuchet MS" <<<EOT Trebuchet MS EOT;

verdana "Verdana" <<<EOT Verdana EOT;

helvetica "Helvetica" <<<EOT Helvetica EOT;

ubuntu "Ubuntu" <<<EOT Ubuntu EOT;

open-sans "Open Sans" <<<EOT Open Sans EOT;

exo-2 "Exo 2" <<<EOT 'Exo 2' EOT;

poppins "Poppins" <<<EOT Poppins EOT;

source-sans-3 "Source Sans 3" <<<EOT 'Source Sans 3' EOT;

fira-sans "Fira Sans" <<<EOT Fira Sans EOT;

monospace "Monospace" <<<EOT Monospace EOT;

work-sans "Work Sans" <<<EOT Work Sans EOT;

hanken-grotesk "Hanken Grotesk" <<<EOT Hanken Grotesk EOT;

pixelify-sans "Pixelify Sans" <<<EOT Pixelify Sans EOT;

ibm-plex-mono "IBM Plex Mono" <<<EOT IBM Plex Mono EOT;

ibm-plex-sans "IBM Plex Sans" <<<EOT IBM Plex Sans EOT;

outfit "Outfit" <<<EOT Outfit EOT;

koho "KoHo" <<<EOT KoHo EOT;

rem "REM" <<<EOT REM EOT;
}

@advanced dropdown body-font "Body font-family:" {
lexend "Lexend*" <<<EOT Lexend EOT;

bellota "Bellota" <<<EOT Bellota EOT;

bellota-text "Bellota Text" <<<EOT Bellota Text EOT;

cabin "Cabin" <<<EOT Cabin EOT;

quicksand "Quicksand" <<<EOT Quicksand EOT;

montserrat "Montserrat" <<<EOT Montserrat EOT;

nunito "Nunito" <<<EOT Nunito EOT;

nunito-sans "Nunito Sans" <<<EOT Nunito Sans EOT;

trebuchet-ms "Trebuchet MS" <<<EOT Trebuchet MS EOT;

verdana "Verdana" <<<EOT Verdana EOT;

helvetica "Helvetica" <<<EOT Helvetica EOT;

ubuntu "Ubuntu" <<<EOT Ubuntu EOT;

open-sans "Open Sans" <<<EOT Open Sans EOT;

exo-2 "Exo 2" <<<EOT 'Exo 2' EOT;

poppins "Poppins" <<<EOT Poppins EOT;

source-sans-3 "Source Sans 3" <<<EOT 'Source Sans 3' EOT;

fira-sans "Fira Sans" <<<EOT Fira Sans EOT;

monospace "Monospace" <<<EOT Monospace EOT;

work-sans "Work Sans" <<<EOT Work Sans EOT;

hanken-grotesk "Hanken Grotesk" <<<EOT Hanken Grotesk EOT;

pixelify-sans "Pixelify Sans" <<<EOT Pixelify Sans EOT;

ibm-plex-mono "IBM Plex Mono" <<<EOT IBM Plex Mono EOT;

ibm-plex-sans "IBM Plex Sans" <<<EOT IBM Plex Sans EOT;

outfit "Outfit" <<<EOT Outfit EOT;

koho "KoHo" <<<EOT KoHo EOT;

rem "REM" <<<EOT REM EOT;
}

@advanced text border-radius "Border radius (px):" 6

@advanced dropdown margin "Room margin" {
6px "6px*" <<<EOT
:root {
    --margin: 6px;
}
EOT;

2px "2px" <<<EOT
:root {
    --margin: 2px;
}
EOT;

8px "8px" <<<EOT
:root {
    --margin: 8px;
}
EOT;

none "None" <<<EOT

EOT;
}

@advanced dropdown popup-anim "Popup animation:" {
fade-in-from-top "Fade In From Top*" <<<EOT fade-in-from-top var(--anim-length_medium) EOT;

fade-in-from-left "Fade In From Left" <<<EOT fade-in-from-left var(--anim-length_medium) EOT;

pop-in "Pop In" <<<EOT pop-in var(--anim-length_short) EOT;

none "N...

Reviews

No reviews yet.