Venator_Ignis Roll20 Dark Mode
Venator_Ignis Roll20 Dark Mode by venator-ignis
Details
Authorvenator-ignis
LicenseMIT
Categoryapp.roll20.net
Created
Updated
Size381 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Venator_Ignis Roll20 Dark Mode
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 Venator_Ignis's version of Roll20 Dark Mode
@author Venator_Ignis
==/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: #242533;
--color-bg-light-rgba: rgb(36, 37, 51, 0.95);
--color-bg-dark: #1c1d28;
--color-bg-medium: #21222f;
--color-text-main: #fff;
--color-border-light: #292b3b;
--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: #5b40f5;
--color-button-hover: #4933c2;
--color-button-main-tr: #5b40f5bf;
--color-element-bg: #373a52;
--color-floating-bar-bg: rgba(55, 58, 82, 0.9);
--color-red: #f85212;
--color-green: #78ff10;
--color-blue: #0c8ce7;
--color-yellow: #fc0;
--color-player-progress: rgba(255, 204, 0, 0.6);
--color-none: #0000;
--font-number: "Ruda", sans-serif;
--font-primary: "Alegreya Sans", sans-serif;
--font-header: "Alegreya Sans SC", sans-serif;
--font-secondary: "Ruda", sans-serif;
--font-mono: "Ubuntu Mono", monospace;
--version: "Venator_Ignis Roll20 Dark Mode";
--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...