/* ----------------------------------------- */ /* LOCAL FONTS */ /* ----------------------------------------- */ @import "../node_modules/rpg-awesome/css/rpg-awesome.min.css"; @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; -webkit-animation: rotation 10s infinite linear; animation: rotation 10s infinite linear; } #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.5em; font-weight: 700; } .bol h2.form-header { font-size: 2em; font-weight: 500; border-bottom: 1px groove #eeede0; } .bol h3.form-header { font-size: 1.5em; 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; } /* Items List */ .items-list { list-style: none; margin: 7px 0; padding: 0; 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; } /* ----------------------------------------- */ /* 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 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; } .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 .stat-value { font-size: 1.5rem; font-weight: bold; color: darkred; } .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 { 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; top: 2.75rem; left: 4rem; } .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.75rem; }