NOTICE: By continued use of this site you understand and agree to the binding Terms of Service and Privacy Policy.
// ==UserScript==
// @name Dark Fate (R20D core)
// @namespace https://openuserjs.org/scripts/RedReign/Roll20_Dark
// @description A dark theme for Roll20.net.
// @author RedReign (90%) + EksDee mods (10%)
// @include https://app.roll20.net/editor*
// @include https://app.roll20.net/campaigns/chatarchive*
// @run-at document-start
// @version 2019.4.13.1
// @license GPL-3.0-or-later
// ==/UserScript==
(function() {var css =`
.button-2{
background-color: hsl(0,0%,10%) !important;
}
.ui-tabs-panel {
color:hsl(0,0%,75%)!important;
border:1px solid black!important;
background:hsl(0,0%,10%)!important;
}
#textchat-input .btn,
#rightsidebar .btn,
.tokenactions .btn,
.ui-dialog-content .ui-dialog-buttonset > button {
background-color:hsl(0,0%,10%)!important;
color:hsl(0,0%,75%)!important;
border-color:black!important;
}
.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default {
box-shadow:none !important;
text-shadow:none !important;
}
input.sheet-sa-free-invoke {
color:3B3B3B !important;
font-weight:bold !important;
}
h3, h2, h1, h4, label, tabcontainer {
color:8C8C8C !important;
border-color:black !important;
}
input {
border-color:black !important;
}
div.sheet-bonus-circle, div.sheet-fate-point-circle {
color:black !important;
font-weight:bold !important;
top:-6px !important;
overflow:visible !important;
z-index:4 !important;
font-size:18px !important;
}
div.sheet-row, div.formula, div.didroll {
color:white !important;
font-weight:bold !important;
font-size:14px !important;
opacity:1 !important;
}
div.sheet-row.sheet-header {
font-size:16px !important;
}
div.sheet-row + span.basicdiceroll {
color:green !important;
font-weight:bold !important;
font-size:14px !important;
}
div.sheet-section-id-logo.sheet-section {
display:none !important;
}
div.sheet-display button.sheet-action-button.btn.ui-draggable {
min-width: 105px !important;
}
div.sheet-section-id.sheet-section {
min-width:825px;
}
input.sheet-section-options-flag {
color:red !important;
}
.button-1{
background-color: hsl(0,0%,10%) !important;
}
#color_selector{
background-color:hsl(0,0%,10%) !important;
border: 1px solid hsl(250,25%,15%) !important;
}
body {
background:url(http://subtlepatterns.com/patterns/dark_leather.png)!important;
}
#floatingtoolbar, #floatinglayerbar {
background-color:hsl(0,0%,10%) !important;
border: none !important;
box-shadow: none !important;
width: 40px !important;
}
#floatingtoolbar div.submenu {
left: 40px !important;
padding: 0 !important;
top: 0 !important;
}
#floatingtoolbar div.submenu .pictos, #floatingtoolbar div.submenu .pictosthree, #floatingtoolbar div.submenu .pictostwo {
left: 15px !important;
position: absolute !important;
text-align: center !important;
width: 20px !important;
}
#floatingtoolbar div.submenu ul {
background-color:#333 !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
width: 190px !important;
}
#floatingtoolbar div.submenu ul li {
color:hsl(0,0%,80%) !important;
padding-right: 20px !important;
padding-left: 45px !important;
}
#floatingtoolbar div.submenu ul li span {
padding-left: 10px !important;
}
#floatingtoolbar div.submenu ul li img {
margin-left: -20px !important;
}
#editinglayer li.gm_slider_box {
background-color: #333 !important;
}
#floatingtoolbar li.activebutton,
#floatingtoolbar li:hover
#floatingtoolbar div.submenu ul li:hover,
#floatinglayerbar li:hover,
#editinglayer.map div.submenu li.choosemap,
#editinglayer.objects div.submenu li.chooseobjects,
#editinglayer.foreground div.submenu li.chooseforeground,
#editinglayer.gmlayer div.submenu li.choosegmlayer,
#editinglayer.walls div.submenu li.choosewalls,
#editinglayer.weather div.submenu li.chooseweather,
#floatinglayerbar.map li.choosemap,
#floatinglayerbar.objects li.chooseobjects,
#floatinglayerbar.gmlayer li.choosegmlayer,
#floatinglayerbar.walls li.choosewalls,
#floatinglayerbar.weather li.chooseweather,
#floatinglayerbar.foreground li.chooseforeground,
#measure li.activerulermode {
background-color: #282150 !important;
}
#floatingtoolbar li, #floatinglayerbar li {
border: 0 !important;
color:hsl(0,0%,80%) !important;
}
#ttaudio_results .result,
#battlebards_results .result,
#incompetech_results .result,
#jukebox_results .result,
#fanburst_results .result,
#myaudio_results .result,
.listresults .result {
background-color: #1a1a1a !important;
}
#jukeboxfolderroot div.title:hover {
background-color: transparent !important;
}
#floatingtoolbar li.activebutton,
#floatingtoolbar li:hover {
background-color: #282150 !important;
}
#page-toolbar {
background-color:hsl(0,0%,10%) !important;
border-radius: 0 !important;
}
#page-toolbar .availablepage {
box-sizing: border-box !important;
}
#page-toolbar .availablepage span {
color:hsl(0,0%,80%) !important;
font-size: 12px !important;
}
#page-toolbar .handle {
background:hsl(0,0%,10%) !important;
border:1px solid hsl(0,0%,0%)!important;
border-radius: 0 0 100% 100% !important;
color:hsl(0,0%,80%) !important;
}
#editor-wrapper {
overflow: scroll !important; /// CHANGE HIDDEN TO SCROLL FOR SCROLLBARS
}
.btn.btn-danger {
background-color: #660000 !important;
}
#rightsidebar {
background-color:hsl(0,0%,0%)!important;
}
#sidebarcontrol {
opacity: .7 !important;
padding: 0 !important;
-webkit-transform: translateX(0) rotate(-90deg) !important;
-moz-transform: translateX(0) rotate(-90deg) !important;
width: 50px !important;
text-align: center !important;
border: 2px solid hsl(0,0%,0%)!important;
font-size: 10px !important;
color:hsl(0,0%,80%) !important;
background-color:hsl(0,0%,10%) !important;
height: 24px !important;
line-height: 35px !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
-webkit-transform-origin: 100% 100% !important;
-moz-transform-origin: 100% 100% !important;
border-radius: 100% 100% 0 0 !important;
top: 50% !important;
margin-right: -1px !important;
margin-top: -62.5px !important;
transition: width, margin-top, opacity, height, font-size .5s,.5s,.5s,.5s,.5s !important;
}
#sidebarcontrol:hover {
opacity: 1 !important;
width: 75px !important;
margin-top: -80px !important;
height: 32px !important;
font-size: 14px !important;
transition: width, margin-top, opacity, height, font-size .5s,.5s,.5s,.5s,.5s !important;
}
#sidebarcontrol .fonticon-menu {
display: none !important;
}
#sidebarcontrol:after {
content: \'Menu\' !important;
}
code {
color:hsl(0,0%,750%)!important;
background-color:hsl(0,0%,10%)!important;
border:1px solid hsl(0,0%,0%)!important;
}
#textchat .formula,#textchat .rolled {
background:hsl(0,0%,10%)!important;
border:1px solid hsl(0,0%,0%)!important;
}
#textchat .message {
color:hsl(0,0%,80%)!important;
background-color:hsl(0,0%,10%)!important;
border:none!important;
border-right:1px solid hsl(0,0%,50%)!important;
height: auto !important;
}
#textchat .message.general {
padding-top: 3px !important;
}
#textchat .by {
color:hsl(44,63%,63%)!important;
}
#textchat .rolled {
color:hsl(0,0%,75%)!important;
}
#textchat .message.system {
color:hsl(360,100%,100%)!important;
}
#textchat .userscript-sharelink {
background-color:black !important;
}
#textchat .message > .userscript-sharelink:hover a {
color: white !important;
}
#textchat .userscript-commandintro {
color:hsl(360,100%,100%)!important;
}
#textchat .message.rollresult {
color:hsl(0,0%,75%)!important;
}
#textchat .message .spacer {
background-color: black !important;
margin-right: -5px !important;
height: 1px !important;
margin-top: -3px !important;
}
#textchat .message.emote {
color:hsl(30,40%,45%)!important;
}
#textchat .message.emote .spacer {
background-color: black !important;
}
#rightsidebar ul.tabmenu {
top: 2px!important;
right: 1px!important;
background-color: hsl(0,0%,10%) !important;
}
.ui-tabs .ui-tabs-nav {
padding:1px 5px!important;
border-bottom:none!important;
}
.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default {
box-shadow:none !important;
text-shadow:none !important;
}
#textchat-input {
width:300px!important;
right:0!important;
bottom:0!important;
background-color:hsl(0,0%,10%)!important;
padding:12px 1px 5px 5px!important;
margin:0 -5px 0 0!important;
border-top:0 solid hsl(0,0%,0%)!important;
text-align:left!important;
}
.btn {
background-image: none !important;
text-shadow:none!important;
}
textarea,select,table,
#textchat-input .btn,
#rightsidebar .btn,
.tokenactions .btn, {
background-color:hsl(0,0%,10%)!important;
color:hsl(0,0%,75%)!important;
border-color:black!important;
}
.diceroll .didroll {
text-shadow:0 0 10px hsl(0,0%,0%)!important;
color:hsl(0,0%,75%)!important;
}
.diceroll.critfail .didroll {
text-shadow:0 0 10px hsl(0,100%,50%)!important;
color:hsl(0,80%,50%)!important;
}
.diceroll.critsuccess .didroll {
text-shadow:0 0 10px hsl(100,50%,50%)!important;
color:hsl(100,50%,50%)!important;
}
.diceroll.importantroll .didroll {
text-shadow:0 0 10px hsl(240,100%,65%)!important;
color:hsl(240,100%,65%)!important;
}
#initiativewindow ul li {
border-bottom:1px solid hsl(0,0%,10%)!important;
background-color:hsl(0,0%,25%)!important;
text-shadow:none!important;
}
#initiativewindow ul li:first-child {
background-color:hsl(100,30%,25%)!important;
}
hr {
border-color:hsl(0,0%,15%)!important;
}
.sheet-rolltemplate-default caption {
background-color: #4b0c59 !important;
}
.sheet-rolltemplate-default tr:nth-child(2n),
.table-striped tbody tr:nth-child(odd) td,
.table-striped tbody tr:nth-child(odd) th {
background-color:hsl(0,0%,15%)!important;
}
.table tbody tr:hover td,.table tbody tr:hover th {
background-color:hsl(0,0%,30%)!important;
}
.table th,.table td {
border-color:hsl(0,0%,10%)!important;
background-color:hsl(0,0%,25%)!important;
}
#imagedialog .searchbox {
background:none!important;
}
#textchat .inlinerollresult {
background-color: hsl(0, 0%, 10%) !important;
border: 2px solid hsl(50, 30%, 30%) !important;
color:hsl(0,0%,90%) !important;
}
#textchat .inlinerollresult.importantroll {
border: 2px solid hsl(240, 100%, 65%) !important;
}
#textchat .inlinerollresult.fullcrit {
border: 2px solid hsl(104, 79%, 39%) !important;
}
#textchat .inlinerollresult.fullfail {
border: 2px solid hsl(0, 79%, 39%) !important;
}
div.dd-content {
color:hsl(0,0%,75%) !important;
}
div.dd-content:hover {
background-color:hsl(0,0%,40%) !important;
}
.ui-tabs .ui-tabs-nav li:hover,
.ui-tabs .ui-tabs-nav li a:hover {
background: hsl(0,0%,20%) !important;
border-bottom: 2px solid hsl(44,63%,63%) !important;
}
li.ui-tabs-active.ui-state-active:focus {
outline: none;
}
li.ui-tabs-active.ui-state-active:focus {
border-color: transparent !important;
outline: none;
}
li.ui-tabs-active.ui-state-active:hover,
li.ui-tabs-active.ui-state-active > a:hover {
color:hsl(0,0%,100%) !important;
}
li.ui-tabs-active.ui-state-active > a {
outline: none;
border-bottom: 2px solid hsl(44,63%,63%) !important;
color:hsl(0,0%,96%) !important;
}
.dd-item.character > div.dd-content > .name {
color:hsl(214,100%,79%) !important;
}
.dd-item.handout .dd-content > .name {
color:hsl(214,100%,79%) !important
}
.sheet-rolltemplate-dmg {
margin-top: 0px !important;
}
.sheet-rolltemplate-dmg > .sheet-desc {
background-color: transparent !important;
}
.dd-sortablehandle {
color: whitesmoke !important;
}
.nav-tabs {
border-color:hsl(0,0%,47%) !important;
}
.nav-tabs>.active>a,
.nav-tabs>.active>a:hover {
background-color: transparent !important;
border-color:transparent !important;
}
.nav-tabs a:hover,
.nav-tabs a:hover {
background-color: transparent !important;
border-color:hsl(0,0%,100%) !important;
border-bottom: 1px solid hsl(0,0%,100%) !important;
color:hsl(0,0%,80%) !important;
}
.inlinerollresult {
margin: 3px !important;
}
/* RED'S EDITS */
.ui-dialog-buttonset button[type='button'],
.ui-dialog-buttonset > button,
.r20es-dialog .btn {
background-color: #1a1a1a !important;
color: hsl(0,0%,80%) !important;
border: 1px solid black !important;
line-height: 18px;
border-radius: 4px !important;
padding: 4px 10px 4px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05) !important;
}
.ui-dialog-buttonset button[type='button']:hover,
.ui-dialog-buttonset > button:hover {
background-color: hsl(0,0%,20%) !important;
color: white !important;
}
li.handout.compendium-item .namecontainer {
box-shadow: none !important;
}
#measure.activebutton > img {
-webkit-filter: brightness(0) !important;
}
#measure:not(.activebutton) > img {
opacity: 1 !important;
-webkit-filter: brightness(2.5) !important;
}
.searchbox > input,
.content > #player-search,
#compendium > .searchbox span input {
background-color: hsl(0,0%,30%) !important;
color: hsl(0,0%,0%) !important;
}
.tools-list .tool-row:nth-child(2n+1),
table.config-table tbody tr:nth-child(2n+1) {
background-color: hsl(0,0%,20%) !important;
}
.dd-handle {
color: transparent !important;
background-color: #444 !important;
}
#secondary-toolbar {
background-color:#222 !important;
}
#secondary-toolbar li{
border-right: 1px solid #000 !important;
}
#measure_sticky_clear {
background-color: #111 !important;
border-color: black !important;
}
.dd-list .journalitem .name, .dd-list .library-item .name {
position: static !important;
}
#textchat .message.you {
color:hsl(0,0%,80%)!important;
background-color:hsl(250,25%,15%)!important;
}
#textchat .message.emote {
background-color:hsl(20,25%,15%)!important;
}
.dd-item.handout .dd-content .redactor_editor > .name {
background-color:hsl(0,0%,20%) !important
}
li.search-choice {
background-color: #333 !important;
background-image: linear-gradient(#444444 20%,#404040 50%,#383838 52%,#3e3e3e 100%) !important;
color: #ccc !important;
}
.textboxlist-bit-box {
background: #223 !important;
}
.textboxlist-bits {
border: 1px solid #000 !important;
}
.chosen-container-multi .chosen-choices {
border: 1px solid #000 !important;
}
.textboxlist-autocomplete-placeholder, .textboxlist-autocomplete-results {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
background: #111 !important;
-webkit-box-shadow: 0 3px 3px #222 !important;
-moz-box-shadow: 0 3px 3px #222 !important;
box-shadow: 0 3px 3px #222 !important;
}
.redactor_editor.content {
background-color: hsl(0,0%,10%) !important;
}
.note-editor span[style*='color: rgb( 0 , 0 , 0 )'],
.note-editor span[style*='color: rgb( 66 , 66 , 66 )'] {
color: hsl(0,0%,75%) !important;
}
.note-editor.note-frame .note-editing-area .note-editable {
color: inherit !important;
}
.note-editor .panel-default > .panel-heading {
background-color: #2a2a2a !important;
border-color: #111 !important;
}
.handouteditor .dropbox,
.note-statusbar > .note-resizebar {
background-color: #111 !important;
}
.note-editor.note-frame {
border: 1px solid #000 !important;
}
#containerdiv,
.redactor_box, .redactor_editor, .redactor_editor:focus, div[contenteditable], div[contenteditable]:focus {
background: #1a1a1a !important;
}
.charactereditor .avatar {
background-color: #1a1a1a !important;
}
.folderroot .dd-content {
border-top: 1px solid hsl(0,0%,30%) !important;
}
img[src='/images/handout.png'] {
content: url('https://i.imgur.com/zM79lGs.png')!important;
}
img[src='/images/character.png'] {
content: url('https://i.imgur.com/nZ5EHJd.png')!important;
}
.dd-item .playerdots {
background-color: transparent !important;
}
.chosen-container-multi .chosen-choices {
background-color: #1a1a1a !important;
background-image: none !important;
}
.textboxlist-bit-editable {
border: 1px solid #aaaaaa !important;
}
.anm-edit__gui-row-name {
color: black !important;
-webkit-text-stroke: 0px rgb(85, 85, 85) !important;
}
.anm-edit__gui-row {
border: 1px solid hsl(0,0%,30%) !important;
}
.anm-edit__gui-row:nth-child(2n) {
background: hsl(0,0%,20%) none repeat scroll 0% 0% !important;
}
.anm-edit__gui-row .flex-v-center div input,
anm-edit__gui-row .flex-v-center div button {
height: 24px !important;
}
.anm-win {
}
.charactereditor .avatar,
.artr__side {
background-color: #1a1a1a !important;
}
.artr__item,
.artr__item__top,
.artr__item__bottom {
background-color:#222 !important;
}
.artr__side__tag_header,
.artr__side__head,
.artr__side__tag_grid,
.artr__search {
background-color:hsl(0,0%,10%) !important;
border-bottom: 1px solid black !important;
}
.artr__side__tag[data-state="1"] {
background-image: linear-gradient(#2a2a2a, #337ab7) !important;
}
.artr__side__tag[data-state="2"] {
background-image: linear-gradient(#2a2a2a, #8a1a1b) !important;
}
.artr__main .artr__view_inner,
.artr__main .artr__view {
background-color: hsl(0,0%,10%) !important;
}
`;
if (typeof GM_addStyle != "undefined") {
GM_addStyle(css);
} else if (typeof PRO_addStyle != "undefined") {
PRO_addStyle(css);
} else if (typeof addStyle != "undefined") {
addStyle(css);
} else {
const node = document.createElement("style");
node.type = "text/css";
node.innerHTML = css;
// Note(stormy): wait for document.head to be available
const interval = 10;
const waitForDepts = () => {
if(!document.head) {
setTimeout(waitForDepts, 10);
return;
}
document.head.appendChild(node);
}
setTimeout(waitForDepts, 10);
}
})();
(function(){
const el = document.createElement("link");
el.rel = "stylesheet";
el.href = "/css/licensed5ednd.css";
document.head.appendChild(el)
})();