# Изменение внешнего вида Roll20 с использованием Stylish или Freestyler

###### tags: `R20`

## Дополнение Stylish

## Основные пользовательские темы
###

Apply to URL https://app.roll20.net/editor/
#page-toolbar {
    height: 74%;
    width: 78%;
    background-color: #CCC;
    border: 1px solid #000;
    border-radius: 0px;
    margin:0px;
    padding: 0px 0px 0px 1%;
}

#page-toolbar .handle {
    right: 20px!important;
}

#page-toolbar .container, #page-toolbar .pages {
    height: 100%;
}

#page-toolbar .availablepage {
    float: left;
    width: 50px;
    height: 50px;
    margin: 0px;
    padding: 0px;
}

###

@-moz-document url("https://app.roll20.net/editor/") {
body {
background:url(http://subtlepatterns.com/patterns/dark_leather.png)!important;
}

#editor-wrapper {
overflow:seen!important;
}

.ui-widget-content {
color:hsl(0,0%,75%)!important;
border:1px solid black!important;
background:hsl(0,0%,20%)!important;
}

#rightsidebar {
background-color:hsl(0,0%,0%)!important;
}

::-webkit-scrollbar {
display:none!important;
}

code {
color:hsl(0,0%,75%)!important;
background-color:hsl(0,0%,20%)!important;
border:1px solid hsl(0,0%,0%)!important;
}

#textchat .formula,#textchat .rolled {
background:hsl(0,0%,20%)!important;
border:1px solid hsl(0,0%,0%)!important;
}

#textchat .message {
background-color:hsl(0,0%,10%)!important;
border:none!important;
border-right:1px solid hsl(0,0%,50%)!important;
}

#textchat .rolled {
color:hsl(0,0%,75%)!important;
}

#textchat .message.system {
border-color:hsl(100,30%,40%)!important;
}

#textchat .message.private {
border-color:hsl(50,30%,40%)!important;
}

#textchat .message.rollresult {
border-color:hsl(200,30%,40%)!important;
}

#textchat .message.system .spacer {
background-color:hsl(100,30%,40%)!important;
}

#textchat .message.private .spacer {
background-color:hsl(50,30%,40%)!important;
}

#textchat .message.rollresult .spacer {
background-color:hsl(200,30%,40%)!important;
}

#textchat .message .spacer {
background-color:hsl(0,0%,50%)!important;
margin-right:-5px!important;
height:1px!important;
}

#textchat .message.emote {
border-color:hsl(25,30%,40%)!important;
color:hsl(25,30%,40%)!important;
}

#textchat .message.emote .spacer {
background-color:hsl(25,30%,40%)!important;
}

#rightsidebar ul.tabmenu {
position:fixed!important;
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 {
text-shadow:none!important;
}

#textchat-input {
position:absolute!important;
width:260px!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:none!important;
text-shadow:none!important;
}

.btn:hover {
text-shadow:0 0 5px hsl(200,60%,60%)!important;
color:hsl(0,0%,75%)!important;
}

textarea,select,.btn,input,table {
background-color:hsl(0,0%,20%)!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;
}

#imagedialog .searchbox {
background-color:none!important;
}

.ui-dialog .ui-dialog-buttonpane {
background-color:hsl(0,0%,15%)!important;
border-top:none!important;
box-shadow:none!important;
}

.ui-dialog .ui-dialog-titlebar {
border:none!important;
background-color:hsl(0,0%,15%)!important;
}

#initiativewindow ul li {
border-bottom:1px solid hsl(0,0%,20%)!important;
background-color:hsl(0,0%,25%)!important;
text-shadow:none!important;
}

#initiativewindow ul li:first-child {
background-color:hsl(100,30%,25%)!important;
}

.ui-widget-content a,.ui-dialog .ui-dialog-title,label,h1,h2,h3,h4,h5,h6 {
color:hsl(0,0%,75%)!important;
}

hr {
border-color:hsl(0,0%,15%)!important;
}

.table-striped tbody tr:nth-child(odd) td,.table-striped tbody tr:nth-child(odd) th {
background-color:hsl(0,0%,25%)!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%,20%)!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;
}

#textchat .inlinerollresult.fullcrit {
border: 2px solid hsl(104, 79%, 39%)!important;
}
#textchat .inlinerollresult.fullfail {
border: 2px solid hsl(0, 79%, 39%)!important;
}
}

@-moz-document domain("app.roll20.net") {
#initiativewindow .characterlist     {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}
}

.campaign_details .masthead {
    background-color: #000;
    padding-bottom: 0px !important;
    border: 1px solid #000;
}

.campaign_details .masthead .iconcover {
    display: none;
}

.campaign_details .campaignname {
    border: none !important;
}

.campaign_details .campaignname h1 {
    margin: 0px !important;
    color: #000 !important;
    text-align: center !important;
    text-shadow: 1px 1px 5px #FFF, -1px 1px 5px #FFF, 1px -1px 5px #FFF, -1px -1px 15px #FFF;
}

This little bit makes the minimized character sheets and handouts less transparent and adds a darker border. Easier to find on brighter maps and backgrounds.

.ui-dialog.dialog-collapsed {
    opacity: 0.75 !important;
    border: 1px solid #000;
}

# FREESTYLER

@-moz-document url-prefix("https://app.roll20.net/editor/") {

html, body {
	height: 100%;
}

body {
    background: white;
}

#sidebarcontrol .fonticon-menu {
    display: none !important;
}

#sidebarcontrol:after {
    content: 'Menu' !important;
}


::-webkit-scrollbar {width: 7px; height:7px;}
::-webkit-scrollbar-button {}     
::-webkit-scrollbar-track {}      
::-webkit-scrollbar-track-piece {background-color: #191919}
::-webkit-scrollbar-thumb {color: #999; background-color: #999;}      
::-webkit-scrollbar-corner {background-color: #191919;}     
::-webkit-resizer {}      


#zoomslider {
	background: #191919;
    border-color: #999;
    left:30px;
    bottom:230px;
    top:auto;
}

#zoomslider .ui-slider-vertical .ui-slider-handle {
	color: #191919;
}

#sidebarcontrol {
	 opacity: 1 !important;
    padding: 0 !important;
    -webkit-transform: translateX(0) rotate(-90deg) !important;
    -moz-transform: translateX(0) rotate(-90deg) !important;
    width: 100px !important;
    text-align: center !important;
    border: none !important;
    font-size: 12px !important;
    color: #eee !important;
    background-color: #111 !important;
    height: 30px !important;
    line-height: 30px !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-top: -75px !important;

}

#floatingtoolbar {
    top: initial;
    bottom: 50px;
    border: none;
}

#floatingtoolbar div.submenu {
    left: 30px;
    padding: 0;
    top: 0;
}

#secondary-toolbar {
    position: absolute;
    top: 130px;
    left: 10px;
    
    background: #191919;
    background-color: #191919;
    border: none;
}

#secondary-toolbar li {
    border: none;
}

#secondary-toolbar select {
    opacity:100%;
    color: white;
    background-color: #191919;
}

#floatingtoolbar div.submenu ul {
    border: 0;
    border-radius: 0;
    box-shadow: 0;
    padding: 0;
    width: 200px;
}

#floatingtoolbar div.submenu ul li {
	height:27px;
}

#floatingtoolbar li {
	color: #dbdbdb;
	background: #191919;
    border: none;
}

#floatingtoolbar {
    width:30px;
}

#floatingtoolbar li .activebutton {
	color: #479fbc;
    border-color: black;
    border: none;
}

#floatingtoolbar div.submenu ul {
    background: #191919;
    border-color: black;
    border: none;
}

#playerzone {
	top: 0px;
	margin-left: 10px;
}

#playerzone .player .playername {
    background: rgba(255, 255, 255, 0.4);
    text-align: center;
    color: black;
}

#playerzone .player .playercolor {
	visibility: hidden;
}

#playerzone .player .color_picker {
	visibility: hidden;
}

div#macrobar {
    background:transparent;
    height:auto;
    bottom: -15px;
	right: 20px;
}

#macrobar_macros {
    background: transparent;
}
}

#page-toolbar {
    height: 95%;
}
.availablepage {
    float: left;
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
}
#page-toolbar .container {
    height: 100%;
}
#page-toolbar .pages .availablepage img.pagethumb {
    margin-left: auto;
    margin-right: auto;
    max-width: 80px;
    max-height: 80px;
}
#page-toolbar .pages .availablepage span {
    position: inherit;
    margin-top: 10px;
    font-size: small;
}
#page-toolbar .pages .availablepage .duplicate {
    background-color: #54C3E8;
}

Macrobar Font CSS and Stylish

#macrobar .btn {
    font-size: 12px;
}

#macrobar .btn {
    font-size: 12px !important;
}