/* Theme system. themes.js adds the selected theme as a class on . Supernova is the default theme: dark blue accents instead of light blue. Colors are flat. Gradients are used for the page background only. */ body { --background-color: #000; --input-background-color: #0a0a0a; --border-color: #525252; --text-color: #ffffff; --hover-text-color: rgba(255, 255, 255, 0.49); --active-text-color: rgba(255, 255, 255, 0.81); --utility-background-color: rgb(22, 22, 22); --utility-shadow-color: rgba(66, 66, 66, 0.86); --hr-background: rgba(160, 160, 160, 0.274); --navbar-background-color: rgb(22, 22, 22); --page-text-color: rgba(82, 82, 82, 0.97); --scrolltop-background-color: rgba(32, 32, 32, 0.37); --settingsection-background-color: #0c0c0c; --settingsection-background-color-hover: #101010; --settingsection-hr-background: rgba(255, 255, 255, 0.22); --button-reg-background-color: rgb(22, 22, 22); --button-reg-hover-background-color: rgb(25, 25, 25); --button-reg-active-background-color: rgb(15, 15, 15); --dropdown-background-color: rgb(22, 22, 22); --dropdown-hover-background-color: rgb(25, 25, 25); --panic-key-successful-color: #24b95b; --panic-key-failed-color: #e20b41; --failtoast-background: rgb(255, 0, 0); --toast-background: rgb(43, 255, 0); --password-background-color: #252525; --password-hover-background-color: #181818; } /* Supernova (default): dark blue */ body.supernova { --header-active-background-color: rgba(37, 78, 168, 0.55); --header-hover-background-color: rgba(37, 78, 168, 0.18); --shortcut-background-color: #131f42; --shortcut-box-shadow: 0 0 20px 1px rgba(91, 138, 240, 0.35); --image-outline-color: #2e5cb8; --button-background-color: #1d4ed8; --link-hover-color: #5b8af0; --slider-background-color: #2e5cb8; --slider-box-shadow: inset 1px 1px 2px 0px #7fa4ec; --checkbox-background-color: #7fa4ec; --dshadow1: #14275f; --dshadow2: #1d4ed8; --dshadow3: #0a1738; --dshadow4: #2e5cb8; } /* Nebula: violet */ body.nebula, body.default { --header-active-background-color: rgba(140, 0, 255, 0.55); --header-hover-background-color: rgba(140, 0, 255, 0.13); --shortcut-background-color: #ffffff; --shortcut-box-shadow: 0 0 20px 1px #ffffff; --image-outline-color: #4400ff; --button-background-color: #4400ff; --link-hover-color: #7d2ae8; --slider-background-color: #d84f68; --slider-box-shadow: inset 1px 1px 2px 0px #ff7ca7; --checkbox-background-color: rgb(255, 169, 250); --dshadow1: #ae00ff; --dshadow2: #4400ff; --dshadow3: #ff00d4; --dshadow4: #8400ff; } /* Aurora: green */ body.aurora { --header-active-background-color: rgba(0, 255, 115, 0.55); --header-hover-background-color: rgba(0, 255, 85, 0.13); --shortcut-background-color: #ffffff; --shortcut-box-shadow: 0 0 20px 1px #ffffff; --image-outline-color: #00ff88; --button-background-color: #00ff95; --link-hover-color: #0cc6e7; --slider-background-color: #d84f68; --slider-box-shadow: inset 1px 1px 2px 0px #e97cff; --checkbox-background-color: rgb(211, 127, 245); --dshadow1: #058f61; --dshadow2: #00ff95; --dshadow3: #006eff; --dshadow4: #0abb59; } /* Nightmare: red */ body.nightmare { --header-active-background-color: rgba(255, 8, 0, 0.55); --header-hover-background-color: rgba(255, 51, 0, 0.13); --shortcut-background-color: #ffffff; --shortcut-box-shadow: 0 0 20px 1px #ffffff; --image-outline-color: #ff0000; --button-background-color: #ff0800; --link-hover-color: #e8302a; --slider-background-color: #d84f68; --slider-box-shadow: inset 1px 1px 2px 0px #e97cff; --checkbox-background-color: rgb(211, 127, 245); --dshadow1: #c70e08; --dshadow2: #ff0000; --dshadow3: #a144f8; --dshadow4: #f7453f; } /* Midnight: monochrome */ body.midnight { --header-active-background-color: rgba(216, 216, 216, 0.55); --header-hover-background-color: rgba(177, 177, 177, 0.13); --shortcut-background-color: #ffffff; --shortcut-box-shadow: 0 0 20px 1px #ffffff; --image-outline-color: #b3b3b3; --button-background-color: #acacac; --link-hover-color: #c7c7c7; --slider-background-color: #d84f68; --slider-box-shadow: inset 1px 1px 2px 0px #e97cff; --checkbox-background-color: rgb(211, 127, 245); --dshadow1: #6e6e6e; --dshadow2: #b6b6b6; --dshadow3: #ffffff; --dshadow4: #5a5a5a; } /* Daydream: magenta-violet */ body.daydream { --header-active-background-color: rgba(140, 0, 255, 0.55); --header-hover-background-color: rgba(140, 0, 255, 0.13); --shortcut-background-color: #ffffff; --shortcut-box-shadow: 0 0 20px 1px #ffffff; --image-outline-color: #4400ff; --button-background-color: #4400ff; --link-hover-color: #7d2ae8; --slider-background-color: #d84f68; --slider-box-shadow: inset 1px 1px 2px 0px #ff7ca7; --checkbox-background-color: rgb(255, 169, 250); --dshadow1: #ae00ff; --dshadow2: #8c00ff; --dshadow3: #b700ff; --dshadow4: #8400ff; }