Empyrean
Xianxia Roll20 Dark Mode by BreathingMoon
Details
AuthorBreathingMoon
LicenseNo License
CategoryHttps://app.roll20.net
Created
Updated
Size282 kB
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("app.roll20.net") {
/* ==UserStyle==
@name Venator_Ignis Roll20 Dark Mode
@namespace github.com/openstyles/stylus
@version 2
@description Empyrean
@author Rivkin
==/UserStyle== */
}
@-moz-document url-prefix("https://app.roll20.net/") {
/* Currency Change */
:root {
--Currency1: "Copper Piece";
--Currency2: "Silver Piece";
--Currency3: "Gold Piece";
--Currency4: "Contribution";
--Currency5: "Spirit Stone";
}
}
@-moz-document url-prefix("https://app.roll20.net/") {
/* Variables */
:root {
--color-bg-light: #000;
--color-bg-light-rgba: rgb(0, 0, 0);
--color-bg-dark: #000;
--color-bg-medium: #000;
--color-text-main: #fff;
--color-border-light: #000;
--color-text-primary: #ecedf6;
--color-text-secondary: rgba(236, 237, 246, 0.7);
--color-text-disabled: #888994;
--opacity-text-helper: 0.45;
--color-button-main: #000;
--color-button-hover: #838103;
--color-button-main-tr: #f5ec40bf;
--color-element-bg: #0000009e;
--color-floating-bar-bg: rgba(0, 0, 0, .9);
--color-red: #f85212;
--color-green: #78ff10;
--color-blue: #e70c0c;
--color-yellow: #fc0;
--color-player-progress: rgba(255, 0, 0, .6);
--color-none: #0000;
--font-number: "Ruda", sans-serif;
--font-primary: "Zen Dots", sans-serif;
--font-header: "Zen Dots", sans-serif;
--font-secondary: "Zen Dots", sans-serif;
--font-mono: "Nanum Myeongjo", monospace;
--version: "Welcom";
--anim-numbers: fadein cubic-bezier(0.8, 0, 0.9, 1) 0.7s;
--anim-attack: slide-in-blurred-right 0.3s;
--anim-damage: slide-in-blurred-top 0.5s;
--anim-traits: bounceInLeft 1s;
--anim-crit: text-flicker-in-glow 1.5s linear 0.5s both;
--anim-spell: jackInTheBox 1s;
--anim-simple: flipInY 1s;
--anim-sheet: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
}
@-moz-document url-prefix("https://app.roll20.net/") {
/* Animations */
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slide-in-right {
0% {
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes zoomInLeft {
from {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes flipInY {
from {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes jackInTheBox {
from {
opacity: 0;
transform: scale(0.1) rotate(30deg);
transform-origin: center bottom;
}
50% {
transform: rotate(-10deg);
}
70% {
transform: rotate(3deg);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes bounceInDown {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: translate3d(0, -60px, 0) scaleY(3);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0) scaleY(0.9);
}
75% {
transform: translate3d(0, -10px, 0) scaleY(0.95);
}
90% {
transform: translate3d(0, 5px, 0) scaleY(0.985);
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes backInRight {
0% {
transform: translateX(2000px) scale(0.7);
opacity: 0.7;
}
80% {
transform: translateX(0px) scale(0.7);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes bounceInRight {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
transform: translate3d(3000px, 0, 0) scaleX(3);
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0) scaleX(1);
}
75% {
transform: translate3d(10px, 0, 0) scaleX(0.98);
}
90% {
transform: translate3d(-5px, 0, 0) scaleX(0.995);
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInLeft {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: translate3d(-3000px, 0, 0) scaleX(3);
}
60% {
opacity: 1;
transform: translate3d(25px, 0, 0) scaleX(1);
}
75% {
transform: translate3d(-10px, 0, 0) scaleX(0.98);
}
90% {
transform: translate3d(5px, 0, 0) scaleX(0.995);
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes slide-in-blurred-right {
0% {
-webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0) scaleY(1) scaleX(1);
transform: translateX(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
@keyframes slide-in-blurred-top {
0% {
-webkit-transform: translateY(-100px) scaleY(2.5) scaleX(0.2);
transform: translateY(-100px) scaleY(2.5) scaleX(0.2);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0) scaleY(1) scaleX(1);
transform: translateY(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
@keyframes roll-in-blurred-left {
0% {
-webkit-transform: translateY(-300px) rotate(-720deg);
transform: translateY(-300px) rotate(-720deg);
-webkit-filter: blur(50px);
filter: blur(50px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0) rotate(0deg);
transform: translateY(0) rotate(0deg);
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
@keyframes focus-in-contract {
0% {
letter-spacing: 1em;
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
@keyframes focus-in-expand-fwd {
0% {
letter-spacing: -0.5em;
-webkit-transform: translateZ(-800px);
transform: translateZ(-800px);
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
@keyframes shake-lr {
0%,
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
10% {
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
}
20%,
40%,
60% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
30%,
50%,
70% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
80% {
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
}
90% {
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
}
}
@keyframes text-flicker-in-glow {
0% {
opacity: 0;
}
10% {
opacity: 0;
text-shadow: none;
}
10.1% {
opacity: 1;
text-shadow: none;
}
10.2% {
opacity: 0;
text-shadow: none;
}
20% {
opacity: 0;
text-shadow: none;
}
20.1% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
}
20.6% {
opacity: 0;
text-shadow: none;
}
30% {
opacity: 0;
text-shadow: none;
}
30.1% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
}
30.5% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
}
30.6% {
opacity: 0;
text-shadow: none;
}
45% {
opacity: 0;
text-shadow: none;
}
45.1% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
}
50% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, ...