bol/css/bol.css

1100 lines
22 KiB
CSS
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* ----------------------------------------- */
/* LOCAL FONTS */
/* ----------------------------------------- */
@font-face {
font-family: 'Contrail One';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/contrailone/v10/eLGbP-j_JA-kG0_Zo51noafdZQ.ttf) format('truetype');
}
@font-face {
font-family: "CCMeanwhile";
src: url('../fonts/ccmeanwhile-regular.ttf');
}
@font-face {
font-family: "Wolfsbane2";
src: url('../fonts/wolfsbane2.ttf');
}
@font-face {
font-family: "Wolfsbane2Condensed";
src: url('../fonts/wolfsbane2cond.ttf');
}
@font-face {
font-family: "Wolfsbane2Expanded";
src: url('../fonts/wolfsbane2expand.ttf');
}
@font-face {
font-family: "IMFellDWPicaSC-Regular";
src: url('../fonts/IMFellDWPicaSC-Regular.ttf');
}
/* ----------------------------------------- */
/* TEXT STYLES */
/* ----------------------------------------- */
/* -------------- */
/* Font Awesome */
/* Overrides */
/* -------------- */
/* ------------- */
a.entity-link,
a.inline-roll {
border: none;
background: transparent;
border-bottom: 1px dotted grey;
padding: 0;
}
a.inline-roll {
border: none;
}
a:hover {
text-shadow: 0 0 5px #a00;
}
#pause {
background: none;
}
#pause > img {
width: 200px;
height: 200px;
top: -50px;
left: calc(50% - 100px);
opacity: 0.7;
}
#pause h3 {
font-family: "IMFellDWPicaSC-Regular", serif;
font-size: 32px;
text-shadow: 0px 3px 5px #000000;
}
::-webkit-scrollbar-thumb {
outline: none;
border-radius: 3px;
background: #999 !important;
border: 1px solid #333 !important;
border-color: #333 !important;
}
::-webkit-scrollbar-track {
box-shadow: 0 0 3px #005d67 inset !important;
border-radius: 3px;
}
* {
scrollbar-width: thin !important;
scrollbar-color: #005d67 #ccc !important;
}
.element-invisible {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
.roll-box {
border-width: 1px;
border-color: #000000;
margin-bottom: 2px;
}
.hide {
display: none;
}
ul.no-bullets {
list-style-type: none; /* Remove bullets */
padding: 0; /* Remove padding */
margin: 0; /* Remove margins */
}
.ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.nomargin {
margin: 0;
padding: 0;
}
.flxrow {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.flxrow > * {
flex: 1;
}
.flxrow .flex1 {
flex: 1;
}
.flxrow .flex2 {
flex: 2;
}
.flxrow .flex3 {
flex: 3;
}
.flxrow .flex4 {
flex: 4;
}
/* ----------------------------------------- */
/* Flexbox */
/* ----------------------------------------- */
.flexrow {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.flexrow > * {
flex: 1;
}
.flexrow .flex1 {
flex: 1;
}
.flexrow .flex2 {
flex: 2;
}
.flexrow .flex3 {
flex: 3;
}
.flexrow .flex4 {
flex: 4;
}
.flexrow .flex5 {
flex: 5;
}
.flexrow .flex6 {
flex: 6;
}
.flexrow .flex7 {
flex: 7;
}
.flexrow .flex8 {
flex: 8;
}
.flexrow .flex9 {
flex: 9;
}
.flexcol {
display: flex;
flex-flow: column nowrap;
}
.flexcol > * {
flex: 1;
}
.flexcol .flex1 {
flex: 1;
}
.flexcol .flex2 {
flex: 2;
}
.flexcol .flex3 {
flex: 3;
}
.flexcol .flex4 {
flex: 4;
}
.flex-group-center,
.flex-group-left,
.flex-group-right {
justify-content: center;
align-items: center;
text-align: center;
padding: 5px;
}
.flex-group-left {
justify-content: flex-start;
text-align: left;
}
.flex-group-right {
justify-content: flex-end;
text-align: right;
}
.center {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.left {
text-align: left;
display: flex;
align-items: center;
justify-content: flex-start;
}
.right {
justify-content: flex-end;
text-align: right;
display: flex;
align-items: center;
}
.flex-center {
align-items: center;
justify-content: center;
text-align: center;
}
.flex-between {
justify-content: space-between;
}
.no-wrap {
flex-wrap: nowrap !important;
}
.bol {
/*
Copied from dnd5e
*/
/* Form Groups */
/*
Placeholders
*/
}
.bol input[readonly="true"] {
border: none;
color: dimgray;
cursor: not-allowed;
width: 100%;
vertical-align: middle;
background: transparent;
}
.bol input[type="text"],
.bol input[type="number"],
.bol input[type="text"]:hover,
.bol input[type="number"]:hover,
.bol input[type="text"]:focus,
.bol input[type="number"]:focus {
border-radius: 0;
border: none;
box-shadow: none;
}
.bol input:disabled:hover,
.bol select:disabled:hover,
.bol textarea:disabled:hover,
.bol input:disabled:focus,
.bol select:disabled:focus,
.bol textarea:disabled:focus {
box-shadow: none !important;
border: 1px solid transparent !important;
outline: none !important;
}
.bol button {
background: rgba(0, 0, 0, 0.1);
}
.chat-button {
font-size: 0.8rem;
}
.bol select {
box-shadow: none;
font-size: 14px;
text-align: center;
text-align-last: center;
-moz-text-align-last: center;
width: 100%;
border: none;
border-radius: 0;
}
.bol select[multiple] {
box-shadow: none;
border: none;
font-size: 14px;
}
.bol select[multiple]:focus option:checked {
background: darkred linear-gradient(0deg, darkred 0%, darkred 100%);
color: white;
}
.bol option {
font-size: 14px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.bol option:hover,
.bol option:focus,
.bol option:active,
.bol option:checked,
.bol option[selected] {
cursor: pointer;
background: darkred linear-gradient(0deg, darkred 0%, darkred 100%);
color: white;
}
.bol label.checkbox {
flex: auto;
padding: 0;
margin: 0;
height: 22px;
line-height: 22px;
font-size: 11px;
}
.bol label.checkbox > input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0 2px 0 0;
position: relative;
top: 4px;
}
.bol label.checkbox.right > input[type="checkbox"] {
margin: 0 0 0 2px;
}
.bol .form-group label {
flex: 2;
font-weight: bold;
}
.bol .form-group .form-fields {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.bol .form-group .form-fields > * {
flex: 1;
margin: 0 3px 0 0;
}
.bol .form-group .form-fields > *:last-child {
margin-right: 0;
}
.bol .form-group .form-fields > * .flex1 {
flex: 1;
}
.bol .form-group .form-fields > * .flex2 {
flex: 2;
}
.bol .form-group .form-fields > * .flex3 {
flex: 3;
}
.bol .form-group .form-fields > * .flex4 {
flex: 4;
}
.bol .form-group .form-fields label {
flex: 0 0 100%;
margin: 0;
}
.bol .form-group .form-fields label.checkbox {
flex: auto;
text-align: left;
}
.bol .form-group .form-fields .field-value {
text-align: center;
}
.bol .form-group.stacked label {
flex: 0 0 100%;
margin: 0;
}
.bol .form-group.stacked label.checkbox {
flex: auto;
text-align: left;
}
.bol .form-header {
margin: 0.25em 0 0.25em 0;
padding: 2px 5px;
font-family: "Wolfsbane2Expanded", cursive;
color: #4b4a44;
background-color: lightgray;
}
.bol h1.form-header {
font-size: 2.2em;
font-weight: 700;
}
.bol h2.form-header {
font-size: 1.8em;
font-weight: 500;
border-bottom: 1px groove #eeede0;
}
.bol h3.form-header {
font-size: 1.2em;
font-weight: 500;
border-bottom: 1px groove #eeede0;
}
.bol h4.form-header {
font-size: 1em;
font-weight: 500;
font-family: 'Signika', sans-serif;
color: black;
background-color: transparent;
border-top: none;
border-bottom: 1px groove #eeede0;
}
.bol .tag {
display: inline-block;
margin: 0 2px 0 0;
padding: 0 3px;
font-size: 10px;
line-height: 16px;
border: 1px solid #999;
border-radius: 3px;
background: rgba(0, 0, 0, 0.05);
}
.bol ::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: lightgray;
opacity: 1;
/* Firefox */
}
.bol :-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: lightgray;
}
.bol ::-ms-input-placeholder {
/* Microsoft Edge */
color: lightgray;
}
.bol input::placeholder {
color: lightgray;
}
.bol .property {
margin-top: 2px;
}
.bol .inc-dec-btns {
color: #4b4a44;
}
.summmary-number {
padding-left: 4rem;
}
/* Items List */
.items-list {
list-style: none;
margin: 7px 0;
padding: 0;
overflow-y:hidden;
/*overflow-y: auto;*/
}
.items-list .item-header {
font-family: 'Signika', sans-serif;
font-size: 1em;
color: #4b4a44;
background-color: lightgray;
}
.items-list .item-header .item-name {
font-family: "Wolfsbane2Expanded", cursive;
font-size: 1.5em;
}
.items-list .item {
min-height: 30px;
line-height: 24px;
padding: 3px 0 3px 3px;
border-bottom: 1px solid #BBB;
align-items: stretch;
}
.items-list .item .item-image {
flex: 0 0 30px;
padding: 0;
margin: 0 5px 0 0;
height: 30px;
width: 30px;
min-height: 30px;
min-width: 30px;
}
.items-list .item .item-image img {
padding: 0;
margin: 0;
border: none;
height: 30px;
width: 30px;
min-height: 30px;
min-width: 30px;
}
.items-list .item .item-image.roll-weapon,
.items-list .item .item-image.roll-career {
background-color: transparent;
background-image: url("../../../icons/svg/dice-target.svg") !important;
background-size: 30px 30px;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.items-list .item .item-image.roll-weapon:hover,
.items-list .item .item-image.roll-career:hover {
background-color: gray;
}
.items-list .item .item-image.roll-weapon:hover img,
.items-list .item .item-image.roll-career:hover img {
visibility: hidden;
}
.items-list .item .item-name,
.items-list .item .item-field {
margin: 0;
}
.items-list .item .item-controls-1 {
flex: 0 0 18px;
}
.items-list .item .item-controls,
.items-list .item .item-controls-2 {
flex: 0 0 36px;
}
.items-list .item .item-controls-3 {
flex: 0 0 54px;
}
.items-list .item .item-control {
color: #4b4a44;
}
.items-list .item-name-fixed-medium {
min-width: 8rem;
width: 8rem;
}
.items-list .item-field-fixed-short {
max-width: 3rem;
min-width: 3rem;
width: 3rem;
}
.bougette-dice-img {
color:rgba(150, 44, 44, 0.70);
}
/* ----------------------------------------- */
/* Premade colors */
/* ----------------------------------------- */
.light {
color: lightgray;
}
.bg-light {
background: lightgray;
}
.darkgray {
color: #23221d;
}
.bg-darkgray {
background: #23221d;
color: #fff;
}
.darkbrown {
color: #464331c4;
}
.bg-darkbrown {
background: #464331c4;
color: #fff;
}
.darkslate {
color: darkslategray;
}
.bg-darkslate {
background: darkslategray;
color: #fff;
}
.darkgreen {
color: #003c1e;
}
.bg-darkgreen {
background: #003c1e;
color: #fff;
}
.darkblue {
color: midnightblue;
}
.bg-darkblue {
background: midnightblue;
color: #fff;
}
.blue {
color: #009ee0;
}
.bg-blue {
background: #009ee0;
color: #fff;
}
.green {
color: #44a12b;
}
.bg-green {
background: #44a12b;
color: #fff;
}
.black {
color: #000;
}
.bg-black {
background: #000;
color: #fff;
}
.red {
color: #cd071e;
}
.bg-red {
background: #cd071e;
color: #fff;
}
.darkred {
color: darkred;
}
.bg-darkred {
background: darkred;
color: #fff;
}
.purple {
color: purple;
}
.bg-purple {
background: purple;
color: #fff;
}
.message-header h2.damage {
color: orangered;
font-weight: bold;
}
.message-header h2.critical {
color: green;
font-weight: bold;
}
.message-header h2.fumble {
color: red;
font-weight: bold;
}
.message-header h2.success {
color: darkgreen;
font-weight: bold;
}
.message-header h2.failure {
color: darkred;
font-weight: bold;
}
h2.good {
color: darkgreen;
font-weight: bold;
}
h2.bad {
color: darkred;
font-weight: bold;
}
.message-header h2.roll {
color: darkslategrey;
font-weight: bold;
}
.chat-message {
margin: 3px;
padding: 10px;
font-size: 14px;
border-radius: 0;
background-color: white;
background-image: url("/systems/bol/ui/box-border-large.webp");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.chat-message .message-header .flavor-text {
font-family: "IMFellDWPicaSC-Regular", serif;
font-size: 14px;
}
.chat-message .message-header .flavor-text h2 {
font-family: "Modesto Condensed", "Palatino Linotype", serif;
font-size: 20px;
}
.chat-message .message-content .dice-roll .dice-result .dice-formula {
border-radius: 0px;
border: 1px inset lightgray;
background-color: #282828;
color: white;
}
.chat-message .message-content .dice-roll .dice-result .dice-tooltip .tooltip-part .part-total {
border-radius: 0px;
border: 1px inset lightgray;
background-color: #2a2a2a;
color: white;
}
.chat-message .message-content .dice-roll .dice-result .dice-total {
border-radius: 0px;
border: 1px inset lightgray;
background-color: #2a2a2a;
color: white;
}
body.system-bol img#logo {
content: url("/systems/bol/ui/logo2.webp");
}
.bol.sheet .window-header {
border: none;
}
.bol.sheet .window-content {
height: 100%;
padding: 10px;
overflow-y: hidden;
background: transparent;
}
.bol.sheet .window-content form {
border: 10px solid transparent;
border-image: url("/systems/bol/ui/box-border-large.webp") 36 repeat;
border-image-outset: 1;
background: white;
margin: 0;
padding: 0;
height: 100%;
}
.bol.sheet .window-content form .sheet-header {
background-image: url("/systems/bol/ui/banner.webp");
background-repeat: no-repeat;
background-size: 330px 62px;
background-position-y: -15px;
background-position-x: right;
height: 115px;
min-height: 115px;
max-height: 115px;
overflow: hidden;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-end;
padding-bottom: 10px;
}
.bol.sheet .window-content form .sheet-header .header-field .header-field-group {
overflow: hidden;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: baseline;
}
.bol.sheet .window-content form .sheet-header .header-field .header-field-group .header-field-label {
margin-right: 5px;
}
.bol.sheet .window-content form .sheet-header .header-field .header-field-group .charname,
.bol.sheet .window-content form .sheet-header .header-field .header-field-group .itemname,
.bol.sheet .window-content form .sheet-header .header-field .header-field-group .header-field-value {
color: #4b4a44;
font-family: 'Contrail One', cursive;
font-size: 1.5rem;
background-color: #EEE;
}
.bol.sheet .window-content form .main {
/* Sheet Tabs */
}
.bol.sheet .window-content form .main .tabs {
flex: 0 0 30px;
background-color: black;
}
.bol.sheet .window-content form .main .tabs .item {
line-height: 30px;
font-weight: bold;
font-family: "CCMeanwhile", cursive;
color: white;
padding-top: 4px;
font-size: 0.8em;
}
.bol.sheet .window-content form .main .tabs .item.active {
text-decoration: underline;
text-shadow: none;
}
.bol.sheet .window-content form .main .sheet-body {
overflow: hidden;
}
.bol.sheet .window-content form .main .sheet-body .tab {
height: 95%;
border: none;
overflow-y: auto;
/* Items List */
}
.bol.sheet .window-content form .main .sheet-body .tab.description .editor,
.bol.sheet .window-content form .main .sheet-body .tab.description .editor-content {
height: 100%;
}
.bol.sheet.actor {
min-width: 820px;
min-height: 700px;
height: 700px;
}
.bol.sheet.actor .window-content .bol-actor-form {
background-image: url("/systems/bol/ui/logo.webp");
background-repeat: no-repeat;
background-size: 190px 115px;
}
.bol.sheet.actor .window-content form .sidebar {
padding-top: 115px;
min-width: 250px;
width: 250px;
max-width: 250px;
}
.bol.sheet.actor .window-content form .sidebar .profile-img {
cursor: pointer;
border: none;
background-color: #EEE;
height: auto;
width: calc(250px - 10px);
min-width: calc(250px - 10px);
max-width: calc(250px - 10px);
margin-right: 10px;
}
.sheet-profile-img {
cursor: pointer;
border: none;
background-color: #EEE;
height: auto;
width: 96px;
height: 96px;
min-width: 96px;
min-height: 96px;
max-width: 96px;
margin-right: 10px;
}
.bol.sheet.actor .window-content form .main .sheet-body {
overflow: hidden;
}
.bol.sheet.actor .window-content form .main .sheet-body .tab .attribute.vigor {
background-image: url("/systems/bol/ui/attributes/vigor.webp");
background-repeat: no-repeat;
background-position: center center;
background-size: 64px 64px;
}
.bol.sheet.actor .window-content form .main .sheet-body .tab .attribute.agility {
background-image: url("/systems/bol/ui/attributes/agility.webp");
background-repeat: no-repeat;
background-position: center center;
background-size: 64px 64px;
}
.bol.sheet.actor .window-content form .main .sheet-body .tab .attribute.mind {
background-image: url("/systems/bol/ui/attributes/mind.webp");
background-repeat: no-repeat;
background-position: center center;
background-size: 64px 64px;
}
.bol.sheet.actor .window-content form .main .sheet-body .tab .attribute.appeal {
background-image: url("/systems/bol/ui/attributes/appeal.webp");
background-repeat: no-repeat;
background-position: center center;
background-size: 64px 64px;
}
.bol.sheet.actor .window-content form .main .sheet-body .tab .attribute .stat-value {
margin-top: -10px;
}
.bol.sheet.actor .bol-footer {
height: 62px;
max-height: 62px;
min-height: 62px;
}
.bol.sheet.actor .bol-footer .footer-left img {
border: none;
height: 62px;
max-height: 62px;
min-height: 62px;
transform: scaleX(-1);
}
.bol.sheet.actor .bol-footer .footer-center {
margin-top: 20px;
margin-left: calc(-330px * 2);
margin-right: calc(-330px * 2);
height: 30px;
max-height: 30px;
min-height: 30px;
background-color: black;
}
.bol.sheet.actor .bol-footer .footer-right {
text-align: right;
}
.bol.sheet.actor .bol-footer .footer-right img {
border: none;
height: 62px;
max-height: 62px;
min-height: 62px;
}
.bol.sheet.actor .stat-max {
font-size: 1rem;
font-weight: bold;
color: #4b4a44;
}
.bol.sheet.actor .bonus-text {
margin-top: 7px;
}
.bol.sheet.actor .stat-value {
font-size: 1.5rem;
font-weight: bold;
color: darkred;
}
.bol.sheet.actor .resource-bonus {
font-weight: bold;
color: darkred;
}
.bol.sheet.actor .resources-value {
background-color:#2a2a2a30;
border-color: #003c1e;
margin-top: 4px;
border-radius: 0.5rem;
}
.bol.sheet.actor .resources-novalue {
background-color:#2a2a2a00;
border-color: #003c1e;
margin-top: 4px;
border-radius: 0.5rem;
}
.bol.sheet.actor .stat-roll {
font-size: 1.5rem;
color: #4b4a44;
}
.bol.sheet.actor .stat-roll.malus {
color: darkred;
}
.bol.sheet.actor .stat-roll.bonus {
color: darkgreen;
}
.bol.sheet.actor .header-field-label,
.bol.sheet.actor .stat-label {
font-weight: bold;
font-family: "Wolfsbane2Expanded", cursive;
font-size: 2rem;
font-variant: small-caps;
}
.bol.sheet.actor .rounded {
border-radius: 100px;
width: 4rem;
height: 4rem;
}
.bol.sheet.actor .rounded-border {
border: 3px solid #4b4a44;
box-shadow: 5px 5px 5px gray;
border-radius: 100px;
width: 4rem;
height: 4rem;
}
.bol.sheet.actor .half-rounded {
border-radius: 100px 100px 0px 0px;
width: 4rem;
height: 4rem;
}
.bol.sheet.actor .half-rounded-border {
border-radius: 100px 100px 0px 0px;
border: 3px solid #4b4a44;
width: 4rem;
height: 4rem;
}
.bol.sheet.item {
min-width: 460px;
min-height: 400px;
}
.bol.sheet.item h1 input.itemname {
margin-top: 32px;
font-family: "Wolfsbane2Expanded", cursive;
}
.bol.sheet.item .item-properties {
flex: 0 0 150px;
margin: 5px 5px 5px 0;
padding-right: 5px;
border-right: 1px groove #eeede0;
}
.bol.sheet.item .item-properties .form-group {
margin: 0;
}
.bol.sheet.item .item-properties .form-group label {
line-height: 20px;
}
.bol.sheet.item .item-properties .properties-list {
list-style: none;
margin: 0;
padding: 0;
}
.bol.sheet.item .item-properties .properties-list li {
margin: 3px 0;
padding: 0 2px;
background: rgba(0, 0, 0, 0.05);
border: 1px groove #eeede0;
text-align: center;
font-size: 12px;
line-height: 18px;
}
.bol.dialog .sheet-header h3 {
font-family: "Wolfsbane2Expanded", cursive;
font-size: 24px;
color: black;
}
.editor,
.editor-content {
height: 100%;
}
.rollable {
cursor: pointer;
}
.chat-message .chat-icon {
float: right;
border: 1px outset lightgray;
box-shadow: 3px 3px 3px black;
margin: 3px;
width: 64px;
height: 64px;
}
.dialog-button {
max-height: 2rem;
}
.xp-next {
color: darkgrey;
font-size: 1.0rem;
border: 1px solid #4b4a44;
box-shadow: 1px 1px 1px gray;
border-radius: 100px;
width: 1.25rem;
height: 1.25rem;
}
/** Tooltip section */
.tooltip-container {
position: relative;
display: inline-block;
}
.tooltip-container .tooltiptext {
text-align: center;
/* Position the tooltip text */
position: absolute;
z-index: 1;
/* Fade in tooltip */
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
background-color: #f2f3a2a0;
padding: 4px;
width: 4rem;
border-radius: 25%;
border-width: 1px;
transform: translate(-40%, -60%);
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip-container:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
/** HUD SECTION */
.tokenhudext {
display: flex;
flex: 0 !important;
font-family: CaslonPro;
font-weight: 600;
}
.tokenhudext.left {
justify-content: flex-start;
flex-direction: column;
position: absolute;
top: 2.75rem;
right: 4rem;
}
.tokenhudext.right {
justify-content: flex-start;
flex-direction: column;
position: absolute;
/*transform: translate(0, -30%);*/
top: -4rem;
max-width: 250px;
left: 4rem;
}
.tokenhudext.right2 {
justify-content: flex-start;
flex-direction: column;
transform: translate(0, -30%);
position: absolute;
top: -4rem;
left: -12rem;
}
.control-icon.tokenhudicon {
width: fit-content;
height: fit-content;
min-width: 6rem;
flex-basis: auto;
padding: 0;
line-height: 1rem;
margin: 0.25rem;
}
.control-icon.tokenhudicon.right {
margin-left: 8px;
}
#token-hud .status-effects.active{
z-index: 2;
}
.bol-hud-menu label {
font-size: 0.6rem;
}
.bol-margin-tb-2 {
margin-top: 2px;
margin-bottom: 2px;
}
.character-summary-container {
  opacity: 0.95;
}
.character-summary-rollable {
text-decoration: underline;
}