Imported and mirrored from https://raw.githubusercontent.com/Azmoria/dndbeyonddark/master/DNDBeyond%20Character%20Sheet.user.css
Authorazmoria
LicenseNo License
CategoryDndbeyond
Created
Updated
Size344 kB
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Theme for Dndbeyond Character sheets. Almost all colors are customizable including the dice. Also includes optional hue animations for dice, frame and border.
You can find the theme for the rest of the site here: Dndbeyond Dark
You can support this project at https://ko-fi.com/azmoria
Themes for DNDBeyond allowing for custom colors. It's set to a dark mode by default.
Now includes customizing Dice Tint. See dropdowns below for examples.
You will need Stylus or another User CSS extension to apply these themes.
You can get Stylus here:
For Chrome
For Firefox **Note I do not play using firefox - testing will be slow. Please report any issues you find and I will attempt to fix them.
I recommend setting the popup width for stylus to at least 500 pixels. You can find this under options when clicking on the stylus extension.
Once you have Stylus installed click the links below to install the themes. I suggest opening them in a new tab clicking install then closing the tab.
Character Sheet Theme
The rest of DNDBeyond site
Theme for chroma capture of dice while using combat tracker: here
For android devices (mobile/tablet) Kiwi Browser allows the installation of desktop Chrome extentions. There may be alternatives that work for iOS. However I only own android devices so I am unaware of which ones would work or exist.
**Note: Mobile/tablet testing will be slow as I primarily play on desktop - please add issues for problems you find, either desktop or other devices, as your help finding problems is appreciated. If you have requests you can also add them to issues and I will attempt to add what I can.
How to create character specific themes
How to capture just the dice for your stream
With the exception of the dice roller most of the alpha or beta content has not been themed as I am waiting for finalized versions and they either have their own dark mode available (such as the encounter builder) or are darker than the original site design.
Encounter Builder and Combat tracker are now included as of 1.1.1
I also probably will not touch the marketplace at all as this is more for everyday use pages.
/* ==UserStyle==
@name DNDBeyond Character Sheet Dark
@version 1.3.318
@namespace DNDBeyond Character Sheet Dark
@preprocessor uso
@author Azmoria (Jay_Lane)
@advanced dropdown backgroundImg "Background" {
color "Color" <<<EOT
background-image: none !important;
EOT;
dnd "DnDBeyond Set" <<<EOT
EOT;
custom "Custom Image" <<<EOT
background-image: var(--custom-background) !important;
EOT;
}
@var text customBackground "Custom Background url; Include url() eg. url(http://imgur.com/img.jpg)" "url()"
@var color background "Background Color" "#0b0b0d"
@var color sheetColor "Sheet Color" #000000aa
@var color sidebarColor "Sidebar Color" #0b0b0dff
@var color fontColor "Font Color" #ddd
@advanced dropdown outlineToggle "Text Outline" {
on "ON" <<<EOT
.ddbc-builder-svg,
.ct-sidebar__control-icon,
.ddbc-character-tidbits__body,
[class$=filter__active-remove-icon]{
filter: drop-shadow(1px 1px 0px var(--outline-color));
}
.ct-character-sheet__inner *,
.dice_result *,
.glc-game-log *,
.dice-rolling-panel *,
div.ct-sidebar__inner [class*='styles_content'] *{
text-shadow: 1px 0px 0
var(--outline-color),
0.9239px 0.3827px 0
var(--outline-color),
0.7071px 0.7071px 0
var(--outline-color),
0.3827px 0.9239px 0
var(--outline-color),
0px 1px 0
var(--outline-color),
-0.3827px 0.9239px 0
var(--outline-color),
-0.7071px 0.7071px 0
var(--outline-color),
-0.9239px 0.3827px 0
var(--outline-color),
-1px 0px 0
var(--outline-color),
-0.9239px -0.3827px 0
var(--outline-color),
-0.7071px -0.7071px 0
var(--outline-color),
-0.3827px -0.9239px 0
var(--outline-color),
0px -1px 0
var(--outline-color),
0.3827px -0.9239px 0
var(--outline-color),
0.7071px -0.7071px 0
var(--outline-color),
0.9239px -0.3827px 0
var(--outline-color);
}
EOT;
off "OFF"<<<EOT
EOT;
}
@var color outlineColor "Outline Color" #000
@var color borderColor "Border Color" #5dbbf7
@var color highlightColor "Highlight Color" #5dbbf7
@var color iconPrimary "Icon Primary Color" #5dbbf7
@var color iconSecondary "Icon Secondary Color" #041925
@var color scrollbarColor "Scrollbar Color" #5dbbf7
@var color rollColor "Rollable Items Color" #5dbbf7
@advanced dropdown titleToggle "Character Title Background" {
off "OFF"<<<EOT
background: none !important;
EOT;
on "Default"<<<EOT
EOT;
sheetColor "Sheet Color"<<<EOT
background: var(--sheet-color);
EOT;
}
@advanced dropdown scrollWheelHP "Enable Scrollwheel HP" {
off "OFF"<<<EOT
EOT;
on "ON"<<<EOT
.ct-health-manager__adjuster-scrollwheel {
display: block !important;
}
.ct-health-manager__adjuster-scrollwheel .ct-health-manager__adjuster-scrollwheel-instructions {
color: var(--font-color) !important;
}
.ddbc-scrollwheel__bg,
.ddbc-scrollwheel__wheel{
background: var(--sidebar-color);
}
.ddbc-scrollwheel__wheel-bg {
background: linear-gradient(180deg,#000f,#0009 3%,#ddd5 18.83%,#fffa 49.39%,#ddd9 79.64%,#0006 98%,#000f);
}
.ddbc-scrollwheel__wheel-scroll {
background-image: repeating-linear-gradient(180deg,#000 1px,#000 2px,transparent 4px,transparent 8px);
opacity: 0.3;
bottom: 2px;
z-index:1;
}
EOT;
}
@advanced dropdown rollableAreas "Rollable Area's Button Style" {
small "Smaller Buttons" <<<EOT
.ct-character-sheet--dice-enabled .integrated-dice__container,
.avtt-roll-formula-button.integrated-dice__container{
border-width: 0px !important;
}
.ct-character-sheet--dice-enabled .ct-skills__item .integrated-dice__container,
.ct-character-sheet--dice-enabled .ct-spells-spell__tohit .integrated-dice__container,
.ct-character-sheet--dice-enabled .ddbc-combat-attack__tohit .integrated-dice__container,
.avtt-roll-formula-button.integrated-dice__container{
height: auto !important;
font-size: 15px !important;
width: auto !important;
margin-bottom: 0px !important;
}
.ct-character-sheet--dice-enabled .ddbc-combat-attack__tohit .integrated-dice__container,
.ct-character-sheet--dice-enabled .ddbc-combat-attack__damage .integrated-dice__container,
.ct-character-sheet--dice-enabled .ddbc-combat-item-attack__damage .integrated-dice__container,
.ct-character-sheet--dice-enabled .ddbc-spell-damage-effect__damages .integrated-dice__container,
.ct-character-sheet--dice-enabled .ddbc-spell-damage-effect__healing .integrated-dice__container,
.ct-character-sheet--dice-enabled .ct-skills__col--modifier .integrated-dice__container,
.ct-character-sheet--dice-enabled .ddbc-combat-attack__tohit .integrated-dice__container,
.ct-character-sheet--dice-enabled .ddbc-ability-summary__primary .integrated-dice__container,
.ct-character-sheet--dice-enabled .ct-initiative-box__value .integrated-dice__container,
.ct-character-sheet--dice-enabled .ddbc-combat-attack__tohit .integrated-dice__container:hover,
.ct-character-sheet--dice-enabled .ddbc-combat-attack__damage .integrated-dice__container:hover,
.ct-character-sheet--dice-enabled .ddbc-combat-item-attack__damage .integrated-dice__container:hover,
.ct-character-sheet--dice-enabled .ddbc-spell-damage-effect__damages .integrated-dice__container:hover,
.ct-character-sheet--dice-enabled .ddbc-spell-damage-effect__healing .integrated-dice__container:hover,
.ct-character-sheet--dice-enabled .ct-skills__col--modifier .integrated-dice__container:hover,
.ct-character-sheet--dice-enabled .ddbc-combat-attack__tohit .integrated-dice__container:hover,
.ct-character-sheet--dice-enabled .ddbc-ability-summary__primary .integrated-dice__container:hover,
.ct-character-sheet--dice-enabled .ct-initiative-box__value .integrated-dice__container:hover,
.encounter-builder-app [aria-haspopup=menu].integrated-dice__container,
.encounter-builder-app [aria-haspopup=menu].integrated-dice__container:hover,
.avtt-roll-formula-button.integrated-dice__container:hover{
border-color: var(--character-sheet-border);
padding: 0px 1px;
height: auto;
}
.ct-character-sheet--dice-enabled .ct-skills__item .ct-skills__col--skill {
padding: 2px 0px !important;
}
.ddbc-tab-list .integrated-dice__container,
.avtt-roll-formula-button.integrated-dice__container{
font-size: 14px;
}
.ct-skills__item .ct-skills__col--modifier,
.ct-skills__item .ct-skills__col--adjustments,
.avtt-roll-formula-button.integrated-dice__container {
padding: 0px !important;
line-height: 16px;
}
EOT;
default "DNDBeyond Default" <<<EOT
.ct-character-sheet--dice-enabled .ddbc-combat-attack__tohit .integrated-dice__container,
.ct-character-sheet--dice-enabled .ddbc-combat-attack__damage .integrated-dice__container,
.ct-character-sheet--dice-enabled .ddbc-combat-item-attack__damage .integrated-dice__container,
.ct-character-sheet--dice-enabled .ddbc-spell-damage-effect__damages .integrated-dice__container,
.ct-character-sheet--dice-enabled .ddbc-spell-damage-effect__healing .integrated-dice__container,
.ct-character-sheet--dice-enabled .ct-skills__col--modifier .integrated-dice__container,
.ct-character-sheet--dice-enabled .ddbc-combat-attack__tohit .integrated-dice__container,
.ct-character-sheet--dice-enabled .ddbc-ability-summary__primary .integrated-dice__container,
.ct-character-sheet--dice-enabled .ct-initiative-box__value .integrated-dice__container,
.ct-character-sheet--dice-enabled .ddbc-combat-attack__tohit .integrated-dice__container:hover,
.ct-character-sheet--dice-enabled .ddbc-combat-attack__damage .integrated-dice__container:hover,
.ct-character-sheet--dice-enabled .ddbc-combat-item-attack__damage .integrated-dice__container:hover,
.ct-character-sheet--dice-enabled .ddbc-spell-damage-effect__damages .integrated-dice__container:hover,
.ct-character-sheet--dice-enabled .ddbc-spell-damage-effect__healing .integrated-dice__container:hover,
.ct-character-sheet--dice-enabled .ct-skills__col--modifier .integrated-dice__container:hover,
.ct-character-sheet--dice-enabled .ddbc-combat-attack__tohit .integrated-dice__container:hover,
.ct-character-sheet--dice-enabled .ddbc-ability-summary__primary .integrated-dice__container:hover,
.ct-character-sheet--dice-enabled .ct-initiative-box__value .integrated-dice__container:hover,
.encounter-builder-app [aria-haspopup=menu].integrated-dice__container,
.encounter-builder-app [aria-haspopup=menu].integrated-dice__container:hover,
.avtt-roll-formula-button.integrated-dice__container
{
border-color: var(--character-sheet-border);
}
EOT;
}
@var color rollCalcColor "Roll Results Background Color" #030f1acc
@advanced dropdown beyond20Invert "Invert Beyond20 Menu"{
yes "Y...