Roll20 - Better20 Dark Theme by vllur

/* ==UserStyle==
@name           Roll20 - Better20 Dark Theme
@namespace      USO Archive
@author         vllur
@description    `Adjusted from Roll20 - Emoh's Darkness`
@version        20210322.19.50
@license        CC0-1.0
@preprocessor   uso
==/UserStyle== */
@-moz-document url("https://app.roll20.net/editor/") {
p{
  color: #666; }

h1 {
  color: #999; }

h2 {
  color: #999; }

h3 {
  color: #999; }

label {
  color: #666; }

.btn, button {
  background: #151515;
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(100, 100, 100, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
  color: #999;
  text-shadow: none;
  transition: all .2s; }

.btn:hover {
  background-color: #1b1b1b;
  box-shadow: inset 0 1px 0 rgba(100, 100, 100, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
  color: #999;
  transition: all .2s; }

.btn:focus {
  outline: none; }

#macrobar .btn {
  border: 1px solid #000 !important;
  box-shadow: inset 0 1px 0 rgba(100, 100, 100, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1); }

a:focus, img:focus {
  outline: none; }

hr {
  border-color: #222 !important; }

table, tr, td, th {
  border-color: #000 !important; }

select {
  background: #151515;
  border: 1px solid #000;
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.1);
  color: #666; }
  select:focus {
    outline: none; }

input, textarea {
  background: #222;
  border: 1px solid #000;
  box-shadow: inset 0 0 5px #000;
  color: #999; }
  input:focus,  textarea:focus {
    border-color: #000;
    box-shadow: inset 0 0 5px #000;
    outline: none; }

input[type=checkbox] {
  background: #222;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 16px;
  width: 16px;
  margin: 3px 0 6px 0;
  border-radius: 2px; }
  input[type=checkbox]:focus {
    outline: none; }

input[type="checkbox"]:checked {
  background: #bc1038; }

.ui-dialog label.checkbox input[type="checkbox"] {
  display: inline-table;
  position: relative;
  top: 2px; }

.ui-dialog .dialog label input[type="checkbox"] {
  margin: 0;
  position: relative;
  top: 2px; }

.ui-tabs-panel input[type="checkbox"] {
  margin: 0;
  position: relative;
  top: 2px; }

textarea::-webkit-scrollbar-corner {
  border-left: 1px solid #000; }

textarea::-webkit-resizer {
  display: none; }

::placeholder {
  color: #555; }

::-webkit-scrollbar, scrollbar, scrollbar * {
  width: auto;
  -moz-appearance: none !important; }

::-webkit-scrollbar-track, scrollbar-track {
  background: #111;
  border: 1px solid #000; }

::-webkit-scrollbar-thumb, scrollbar-thumb {
  border: 1px solid #000; }

::-webkit-scrollbar-corner, scrollbar-corner {
  background: #0A0A0A;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  border-color: #000; }

#sidebarcontrol {
  background: #0A0A0A;
  border: 1px solid #000;
  top: 0px;
  height: 25px;
  line-height: 28px;
  color: #666;
  opacity: 1;
  display: none; }

#sidebarcontrol .fonticon-menu:before {
  margin-left: 1px; }

#rightsidebar {
  background: #0A0A0A;
  border: none; }

#rightsidebar ul.tabmenu {
  background-color: #0A0A0A;
  border-bottom: 1px solid #333; }

#rightsidebar .ui-tabs-nav a {
  color: #666;
  text-shadow: none;
  transition: all .2s; }

.ui-tabs .ui-tabs-nav li:hover, .ui-tabs .ui-tabs-nav li:hover a, .ui-tabs .ui-tabs-nav li a:hover {
  background: #222;
  border-bottom: 1px solid #333;
  color: #999 !important; }

#rightsidebar .ui-tabs-nav li.ui-state-active a {
  color: #ddd !important; }

#rightsidebar .ui-tabs-nav li:focus, #rightsidebar .ui-tabs-nav li a:focus, #rightsidebar .ui-tabs-nav li.ui-state-active:focus {
  outline: none; }

#rightsidebar li.alertify a {
  background-color: #666; }

.dd-handle {
  background: #222;
  height: 30px; }
  .dd-handle:before {
    color: #999;
    top: 5px; }

.ui-widget-content {
  background: #111;
  border-color: #000; }

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  background: #1b1b1b;
  border: 1px solid #000;
  outline: none; }

#zoomslider {
  opacity: 1;
  box-shadow: 0 0 3px #000; }

#imagedialog .searchbox {
  background-color: #0A0A0A; }

#imagedialog .tabcontainer a {
  color: #666; }
  #imagedialog .tabcontainer a:hover {
    color: #999; }

#imagedialog .tabcontainer a.active {
  color: #666 !important; }

.dd-item > button:before {
  color: #666; }

.folderroot .dd-content {
  border-top: 1px solid #222; }

.dd-content {
  color: #666; }
  .dd-content:hover {
    color: #999 !important; }

.dd-list .handout img, .archivetable img {
  max-height: 28px; }

.handout .dd-content .token {
  width: 28px;
  height: 28px; }

.dd-item .playerdots {
  background-color: transparent; }

.d20contextmenu > ul {
  background-color: #222;
  color: #999; }

.d20contextmenu ul li:hover {
  background-color: #333; }

.folderroot .archiveentry {
  border-bottom: 1px solid #222; }

.atribsitem-link, .expandcontroller {
  font-size: 0px; }

.container {
  background: #111112; }

#tableofcontents {
  background-color: #111112;
  border: none; }

.breadcrumb {
  background: #111112;
  border-bottom: 1px solid #222 !important; }

.content-text a:link {
  color: #666; }

.pull-right {
  background-color: transparent !important; }

.content-text h1, .content-text h2, .content-text h3, .content-text h4 {
  color: #999; }

.content-text {
  color: #666; }

a.autolink {
  border-bottom: 1px dotted #bc1038; }
  a.autolink:hover {
    background-color: #ccc; }

.attrList .attrListItem:nth-child(odd) {
  background-color: #151515; }

.attrList .attrListItem, .attrList .newAttrListItem {
  border-color: #222; }

#jukeboxwhatsplaying {
  border: 1px solid #222; }

#jukeboxwhatsplaying h4 {
  color: #999; }

#jukeboxfolderroot div.title:hover {
  background-color: #151515; }

#jukeboxfolderroot .loopcontainer input[type="checkbox"] + label span {
  opacity: 1; }

#jukeboxfolderroot .loopcontainer input[type="checkbox"]:checked + label span {
  color: #666; }

.sheet-rolltemplate-npc .sheet-header, .sheet-rolltemplate-npcaction .sheet-header, .sheet-rolltemplate-npcfullatk .sheet-header, .sheet-rolltemplate-npcatk .sheet-header, .sheet-rolltemplate-npcdmg .sheet-header, .sheet-rolltemplate-dmgaction .sheet-header {
    color: #999999;
    font-size: 18px;
    text-align: left;
    font-family: "Times New Roman", Times, serif;
    font-variant: small-caps;
}

.sheet-rolltemplate-npc div.sheet-arrow-right, .sheet-rolltemplate-npcaction div.sheet-arrow-right, .sheet-rolltemplate-npcfullatk div.sheet-arrow-right, .sheet-rolltemplate-npcatk div.sheet-arrow-right, .sheet-rolltemplate-npcdmg div.sheet-arrow-right, div.sheet-rolltemplate-npcatk div.sheet-arrow-right, .sheet-rolltemplate-dmgaction div.sheet-arrow-right {
    border: none;
    border-bottom: 0.25em solid transparent;
    border-left: 14em solid #999999;
}

.sheet-rolltemplate-npc, .sheet-rolltemplate-npcaction .sheet-container, .sheet-rolltemplate-npcfullatk .sheet-container, .sheet-rolltemplate-npcatk, .sheet-rolltemplate-npcdmg, .sheet-rolltemplate-dmgaction, .sheet-rolltemplate-traits {
    width: 188px;
    border:none;
    background-color: #222;
    padding: 5px;
}

.volume input[type="range"] {
  -webkit-appearance: none;
  background: #666 !important;
  box-shadow: none;
  border: none;
  height: 3px !important; }

.volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #666;
  border: 1px solid #000;
  height: 20px;
  width: 15px; }

.macro input[type="checkbox"] {
  width: 16px !important;
  position: relative;
  top: 2px; }

#existingmacros .rollmacro {
  color: #999; }

.table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th {
  background-color: #151515; }

.table-striped tbody tr:nth-child(even) td, .table-striped tbody tr:nth-child(even) th {
  background-color: #222; }

.table th, .table td {
  border-top: 1px solid #000; }

.ui-widget-content {
  color: #666; }

.textchatcontainer .message {
  padding-bottom: 10px;
  background-color: transparent; }

.textchatcontainer .emote{
    color:#9e4f16;
}

.textchatcontainer .message .spacer {
  background-color: #151515; }

.textchatcontainer .message:first-child .spacer {
  opacity: 0; }

.ui-widget-content a {
  color: #666 !important; }

.textchatcontainer a[href^="!"], .textchatcontainer a[href^="~"] {
  background: #222; }

code {
  color: #666;
  background-color: #333;
  border: 1px solid #333; }

.textchatcontainer .message.system {
  display: none; }

.textchatcontainer .message.you {
  background-color: transparent; }

.textchatcontainer .message.you .spacer {
  background-color: #151515; }

.textchatcontainer .message.you .by {
  color: #666; }

.textchatcontainer .message.private {
  background-color: #222; }

.textchatcontainer .message.private .spacer {
  background-color: #111; }

.textchatcontainer .error {
  border-color: #990000; }

.textchatcontainer .message.error .spacer {
  background-color: transparent; }

.textchatcontainer .formula, .textchatcontainer .rolled {
  background: #222;
  border: 1px solid #000;
  color: #666; }

.textchatcontainer .rolled {
  color: #999; }

.grey span {
  color: #666; }

.diceroll .didroll {
  color: #999;
  text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px #000; }

.textchatcontainer .formattedformula > .dicegrouping.ui-sortable {
  color: transparent; }

.diceroll .backing {
  color: #999;
  text-shadow: 0 0 3px #999; }

.textchatcontainer .rollresult.quantumRoll {
  background: url(https://i.imgur.com/L0zwzjO.png) no-repeat bottom left; }

.diceroll.critsuccess .didroll {
  color: #33cc33; }

.diceroll.critfail .didroll {
  color: #cc3333; }

#textchat-input {
  background-color: #0A0A0A;
  border-top: none; }

#textchat-input textarea {
  background: #111;
  border: 1px solid #000;
  box-shadow: inset 0 0 5px #000;
  color: #666; }

.rolltemplate-simple .adv span, .rolltemplate-simple .solo span, .rolltemplate-atk .adv span, .rolltemplate-atk .solo span, .rolltemplate-atkdmg .a...