idk
Roll20 - Dark Cobalt by EldritchJoe
Details
AuthorEldritchJoe
LicenseMIT
Categoryidk
Created
Updated
Size866 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./* ==UserStyle==
@name Roll20 - Dark Cobalt
@namespace github.com/shevernitskiy/roll20darkcobalt
@homepageURL https://github.com/shevernitskiy/roll20darkcobalt
@version 1.0.63
@author shevernitskiy
@license MIT
==/UserStyle== */
@-moz-document url-prefix("https://app.roll20.net/editor/") {
/* -------------------------------------------------------------------------- */
/* Global Things */
/* -------------------------------------------------------------------------- */
: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: "Dark Cobalt v1.0.63 \A 🔗github.com/shevernitskiy/roll20darkcobalt";
--anim-numbers: fadein cubic-bezier(0.8, 0, 0.9, 1) 0.7s;
--anim-attack: slide-in-blurred-right 0.6s;
--anim-damage: slide-in-blurred-top 0.5s;
--anim-traits: bounceInLeft 1s;
--anim-crit: text-flicker-in-glow 2s linear 1s 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;
}
.charsheet .sheet-shortfield3 {
width: 66.2%;
}
::-webkit-scrollbar {
width: 4px;
height: 3px;
}
::-webkit-scrollbar-track {
border-radius: 0px;
background-color: #333;
}
::-webkit-scrollbar-thumb {
border-radius: 0px;
background-color: #9966CC;
}
::-webkit-scrollbar-thumb:vertical:hover{
background-color:#000;
}
::selection {color: #000; background-color: #fff;}
::-moz-selection {color: #000; background-color: #fff;}
/* ---------------------------------- Animation ----------------------------- */
@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(0de...