mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
857 lines
22 KiB
CSS
857 lines
22 KiB
CSS
/* FONTS */
|
|
@import url('https://fonts.googleapis.com/css?family=Space+Grotesk:wght@400&display=swap');
|
|
@import url('https://fonts.googleapis.com/css?family=Space+Grotesk:wght@600&display=swap');
|
|
@import url('https://fonts.googleapis.com/css?family=Roboto:ital,wght@1,300&display=swap');
|
|
@import url('https://fonts.googleapis.com/css?family=Teko:wght@600&display=swap');
|
|
|
|
/* COLORS */
|
|
:root {
|
|
--the-breach-black: #1D1D1D;
|
|
--the-breach-darkgrey: #5D5D5D;
|
|
--the-breach-white: #FFFFFF;
|
|
--the-breach-accent-color: #cb2e2e;
|
|
--the-breach-accent-transparent: rgb(203 46 46 / 50%);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.main {
|
|
min-width: 800px;
|
|
max-width: 1500px;
|
|
}
|
|
|
|
/* TITLE */
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
padding: 2rem 0 1rem;
|
|
background-color: var(--the-breach-black);
|
|
background-image: url(https://github.com/wellenina/roll20-the-breach-character-sheet/blob/73f2aa3dd0bd8b5b2aef518a87586a98c46b5e5e/Assets/background-title.jpg?raw=true);
|
|
background-size: 1300px;
|
|
}
|
|
h1 {
|
|
color: var(--the-breach-white);
|
|
}
|
|
|
|
h1, h3 {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 600 !important;
|
|
text-transform: uppercase;
|
|
text-wrap: nowrap;
|
|
}
|
|
h3 {
|
|
font-size: 16px;
|
|
color: var(--the-breach-black);
|
|
}
|
|
h3.with-margins {
|
|
margin: 1.6rem 0 1rem;
|
|
}
|
|
|
|
/* ROWS AND SECTIONS */
|
|
.row-container {
|
|
width: 100%;
|
|
padding: 0 1rem;
|
|
}
|
|
.row-container, .line, .line-content, .weapons,
|
|
.trait-checkboxes, .die-selection-container, .progress-points-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.line, .die-selection-container {
|
|
align-items: center;
|
|
}
|
|
|
|
.select-condition-die {
|
|
margin: 0 1rem;
|
|
}
|
|
|
|
.section {
|
|
background-color: lightgray;
|
|
background-image: linear-gradient(rgba(211, 211, 211, 0.8), rgba(211, 211, 211, 0.8)), url(https://github.com/wellenina/roll20-the-breach-character-sheet/blob/73f2aa3dd0bd8b5b2aef518a87586a98c46b5e5e/Assets/background-box.jpg?raw=true);
|
|
background-size: 600px;
|
|
|
|
border-radius: 2px;
|
|
border: 4px solid var(--the-breach-black);
|
|
outline: 2px solid var(--the-breach-black);
|
|
outline-offset: -9px;
|
|
|
|
padding: 1.5rem;
|
|
margin: 1.2rem 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.section.smaller {
|
|
width: 42%;
|
|
}
|
|
.section.larger {
|
|
width: 56%;
|
|
}
|
|
.section.half {
|
|
width: 49%;
|
|
}
|
|
.weapons, .roll-section {
|
|
width: 100%;
|
|
}
|
|
.weapon-column {
|
|
width: 48.8%;
|
|
}
|
|
|
|
.weapon-info {
|
|
border: 2px solid var(--the-breach-black);
|
|
border-radius: 2px;
|
|
margin-top: 1rem;
|
|
}
|
|
.text-line {
|
|
display: flex;
|
|
}
|
|
.text-line + .text-line {
|
|
border-top: 1px dashed darkgray;
|
|
}
|
|
.weapon-info span {
|
|
display: block;
|
|
width: 35%;
|
|
height: 26px;
|
|
padding: 4px;
|
|
background-color: var(--the-breach-white);
|
|
border-right: 1px solid darkgray;
|
|
}
|
|
.text-row {
|
|
width: 100%;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* single rows */
|
|
.line + .line, input[type="hidden"] + .line, .repitem + .repitem {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.line {
|
|
height: 46px;
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
border: 2px solid var(--the-breach-black);
|
|
}
|
|
.line.rectangular {
|
|
border-radius: 2px;
|
|
padding: 0.9rem;
|
|
}
|
|
.line.rounded {
|
|
border-radius: 999rem;
|
|
padding: 0.3rem;
|
|
}
|
|
.cloak h3, .equipment h3 {
|
|
margin-left: 1.5rem;
|
|
}
|
|
|
|
.approach-title {
|
|
width: 16%;
|
|
margin-left: .5rem;
|
|
}
|
|
|
|
.line-content {
|
|
width: 66%;
|
|
}
|
|
|
|
label {
|
|
width: auto !important;
|
|
margin: 0 !important;
|
|
padding: 0 5px 0 0 !important;
|
|
}
|
|
|
|
/* INPUT */
|
|
input {
|
|
min-width: 0;
|
|
}
|
|
|
|
input[type=checkbox], input[type=radio], select {
|
|
z-index: 2;
|
|
}
|
|
input[type=text], select {
|
|
color: var(--the-breach-black);
|
|
background-color: var(--the-breach-white);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
input:focus, input:focus-visible, select:focus-visible {
|
|
outline: none !important;
|
|
}
|
|
|
|
input[type=text], .weapon-info span {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
font-size: 14px;
|
|
}
|
|
|
|
input[type=text] {
|
|
height: 26px !important;
|
|
border: none;
|
|
}
|
|
.cloak input[type=text] {
|
|
width: 30%;
|
|
}
|
|
.item input[type=text] {
|
|
width: 42%;
|
|
}
|
|
|
|
select, label {
|
|
font-family: 'Space Grotesk', sans-serif !important;
|
|
font-size: 12px !important;
|
|
color: var(--the-breach-black) !important;
|
|
}
|
|
|
|
select {
|
|
flex-basis: content;
|
|
margin: 0;
|
|
|
|
cursor: pointer;
|
|
width: min-content;
|
|
height: 26px;
|
|
border: none;
|
|
}
|
|
.die-selection-container select {
|
|
padding: 0;
|
|
}
|
|
select.select-clock {
|
|
padding: 0 6px;
|
|
}
|
|
|
|
/* CHECKBOXES */
|
|
input[type=checkbox] {
|
|
appearance: none;
|
|
width: 12px !important;
|
|
height: 12px !important;
|
|
border: 2px solid var(--the-breach-black);
|
|
border-radius: 2px;
|
|
}
|
|
input[type=checkbox]:checked {
|
|
background-color: var(--the-breach-accent-color);
|
|
}
|
|
|
|
.trait-checkboxes {
|
|
flex-direction: column;
|
|
margin-left: 0.6rem;
|
|
}
|
|
|
|
|
|
/* TOOLTIPS */
|
|
.tooltip-container {
|
|
position: relative;
|
|
}
|
|
|
|
.tooltiptext {
|
|
visibility: hidden;
|
|
position: absolute;
|
|
z-index: 3;
|
|
padding: 0.6rem 1rem;
|
|
border-radius: 3px;
|
|
background-color: var(--the-breach-black);
|
|
color: var(--the-breach-white) !important;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
text-wrap: wrap;
|
|
text-transform: none;
|
|
}
|
|
|
|
.approach-title .tooltiptext {
|
|
width: 340%;
|
|
left: 30%;
|
|
}
|
|
|
|
.approach-title.tooltip-container:hover > .tooltiptext {
|
|
visibility: visible;
|
|
}
|
|
|
|
/* BUTTONS */
|
|
button, .itemcontrol .repcontrol_move {
|
|
color: var(--the-breach-black) !important;
|
|
border-radius: 999rem !important;
|
|
background-image: none !important;
|
|
box-shadow: none !important;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
/* all buttons EXCEPT the delete button */
|
|
button[type="action"], button[type="roll"],
|
|
.repcontrol button, .itemcontrol .repcontrol_move {
|
|
background-color: var(--the-breach-white) !important;
|
|
}
|
|
|
|
button[type="action"], button[type="roll"] {
|
|
font-family: 'Space Grotesk', sans-serif !important;
|
|
border: 2px solid var(--the-breach-black) !important;
|
|
}
|
|
|
|
button.add-die, button.save-roll, button.condition-roll {
|
|
margin-left: 0.6rem;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
button[type="action"]:hover, button[type="roll"]:hover,
|
|
.repcontrol button:hover, .itemcontrol .repcontrol_move:hover {
|
|
background-color: var(--the-breach-accent-transparent) !important;
|
|
}
|
|
|
|
/* ICONS */
|
|
.approach-icon {
|
|
width: 38px;
|
|
height: 38px;
|
|
}
|
|
|
|
/* CLOCK */
|
|
.clock-container {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 38px;
|
|
height: 38px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.clock-color-fill {
|
|
border: 2px solid var(--the-breach-black);
|
|
border-radius: 50%;
|
|
background: var(--the-breach-white);
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
.clock-container input[type=radio],
|
|
.xp-icon-container input[type=radio],
|
|
.harms-icon-container input[type=radio] {
|
|
opacity: 0;
|
|
}
|
|
|
|
.clock-spoke {
|
|
height: 38px;
|
|
width: 2px;
|
|
position: absolute;
|
|
left: -3px;
|
|
top: 0;
|
|
background: var(--the-breach-black);
|
|
}
|
|
.clock-vertical-spoke {
|
|
transform: translateX(21px);
|
|
}
|
|
/* 4 and 8 segments clock spoke */
|
|
.clock-horizontal-spoke {
|
|
transform: translateX(21px) rotate(90deg);
|
|
}
|
|
/* 6-segments clock spokes */
|
|
.clock-container-6 .clock-diagonal-1-spoke {
|
|
transform: translateX(21px) rotate(60deg);
|
|
}
|
|
.clock-container-6 .clock-diagonal-2-spoke {
|
|
transform: translateX(21px) rotate(120deg);
|
|
}
|
|
/* 8-segments clock spokes */
|
|
.clock-container-8 .clock-diagonal-1-spoke {
|
|
transform: translateX(21px) rotate(45deg);
|
|
}
|
|
.clock-container-8 .clock-diagonal-2-spoke {
|
|
transform: translateX(21px) rotate(135deg);
|
|
}
|
|
|
|
.clock-progress-zero, .reset-clock-icon {
|
|
position: absolute;
|
|
top: 29px;
|
|
left: -10px;
|
|
width: 9px !important;
|
|
height: 9px !important;
|
|
}
|
|
|
|
.reset-clock-icon {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--the-breach-black);
|
|
background: var(--the-breach-white);
|
|
}
|
|
|
|
.reset-clock-icon::before, .reset-clock-icon::after {
|
|
content: "";
|
|
width: 1px;
|
|
height: 9px;
|
|
background: var(--the-breach-black);
|
|
position: absolute;
|
|
left: 3px;
|
|
top: -1px;
|
|
}
|
|
.reset-clock-icon::before {
|
|
transform: rotate(45deg);
|
|
|
|
}
|
|
.reset-clock-icon::after {
|
|
transform: rotate(135deg);
|
|
}
|
|
|
|
.clock-progress-zero:checked + .reset-clock-icon {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.clock-progress-zero:checked ~ .clock-color-fill {
|
|
background-image: none;
|
|
}
|
|
|
|
.clock-progress {
|
|
position: absolute;
|
|
}
|
|
|
|
/* radio button size - 4-segments clock */
|
|
.clock-container-4 .clock-progress {
|
|
width: 20px !important;
|
|
height: 20px !important;
|
|
}
|
|
/* radio button size - 6-segments clock */
|
|
.clock-container-6 .clock-progress {
|
|
width: 13px !important;
|
|
height: 13px !important;
|
|
}
|
|
/* radio button size - 6-segments clock */
|
|
.clock-container-8 .clock-progress {
|
|
width: 11px !important;
|
|
height: 11px !important;
|
|
}
|
|
|
|
/* positioning - 4-segments clock */
|
|
.clock-container-4 .clock-progress[value="1"] {
|
|
margin-left: 20px;
|
|
}
|
|
.clock-container-4 .clock-progress[value="2"] {
|
|
margin: 20px 0 0 20px;
|
|
}
|
|
.clock-container-4 .clock-progress[value="3"] {
|
|
margin-top: 20px;
|
|
}
|
|
/* positioning - 6-segments clock */
|
|
.clock-container-6 .clock-progress[value="1"] {
|
|
margin-left: 21px;
|
|
margin-top: 1px;
|
|
}
|
|
.clock-container-6 .clock-progress[value="2"] {
|
|
margin-left: 28px;
|
|
margin-top: 13px;
|
|
}
|
|
.clock-container-6 .clock-progress[value="3"] {
|
|
margin-left: 21px;
|
|
margin-top: 25px;
|
|
}
|
|
.clock-container-6 .clock-progress[value="4"] {
|
|
margin-left: 6px;
|
|
margin-top: 25px;
|
|
}
|
|
.clock-container-6 .clock-progress[value="5"] {
|
|
margin-left: 0px;
|
|
margin-top: 13px;
|
|
}
|
|
.clock-container-6 .clock-progress[value="6"] {
|
|
margin-left: 6px;
|
|
margin-top: 1px;
|
|
}
|
|
/* positioning - 8-segments clock */
|
|
.clock-container-8 .clock-progress[value="1"] {
|
|
margin-left: 20px;
|
|
margin-top: 1px;
|
|
}
|
|
.clock-container-8 .clock-progress[value="2"] {
|
|
margin-left: 28px;
|
|
margin-top: 9px;
|
|
}
|
|
.clock-container-8 .clock-progress[value="3"] {
|
|
margin-left: 28px;
|
|
margin-top: 20px;
|
|
}
|
|
.clock-container-8 .clock-progress[value="4"] {
|
|
margin-left: 20px;
|
|
margin-top: 28px;
|
|
}
|
|
.clock-container-8 .clock-progress[value="5"] {
|
|
margin-left: 9px;
|
|
margin-top: 28px;
|
|
}
|
|
.clock-container-8 .clock-progress[value="6"] {
|
|
margin-left: 1px;
|
|
margin-top: 20px;
|
|
}
|
|
.clock-container-8 .clock-progress[value="7"] {
|
|
margin-left: 1px;
|
|
margin-top: 9px;
|
|
}
|
|
.clock-container-8 .clock-progress[value="8"] {
|
|
margin-left: 9px;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
/* color - 4 and 8 segments clock */
|
|
.clock-container-4 .clock-progress[value="1"]:checked ~ .clock-color-fill,
|
|
.clock-container-8 .clock-progress[value="2"]:checked ~ .clock-color-fill {
|
|
background-image: linear-gradient(90deg, var(--the-breach-white) 50%, transparent 50%), linear-gradient(180deg, var(--the-breach-accent-color) 50%, var(--the-breach-white) 50%);
|
|
}
|
|
.clock-container-4 .clock-progress[value="2"]:checked ~ .clock-color-fill,
|
|
.clock-container-8 .clock-progress[value="4"]:checked ~ .clock-color-fill {
|
|
background-image: linear-gradient(90deg, var(--the-breach-white) 50%, var(--the-breach-accent-color) 50%);
|
|
}
|
|
.clock-container-4 .clock-progress[value="3"]:checked ~ .clock-color-fill,
|
|
.clock-container-8 .clock-progress[value="6"]:checked ~ .clock-color-fill {
|
|
background-image: linear-gradient(180deg, transparent 50%, var(--the-breach-accent-color) 50%), linear-gradient(90deg, var(--the-breach-white) 50%, var(--the-breach-accent-color) 50%);
|
|
}
|
|
.clock-container-4 .clock-progress[value="4"]:checked ~ .clock-color-fill,
|
|
.clock-container-8 .clock-progress[value="8"]:checked ~ .clock-color-fill {
|
|
background: var(--the-breach-accent-color);
|
|
}
|
|
/* color - 6-segments clock */
|
|
.clock-container-6 .clock-progress[value="1"]:checked ~ .clock-color-fill {
|
|
background-image: linear-gradient(90deg, var(--the-breach-white) 50%, transparent 50%), linear-gradient(150deg, var(--the-breach-accent-color) 50%, var(--the-breach-white) 50%);
|
|
}
|
|
.clock-container-6 .clock-progress[value="2"]:checked ~ .clock-color-fill {
|
|
background-image: linear-gradient(90deg, var(--the-breach-white) 50%, transparent 50%), linear-gradient(210deg, var(--the-breach-accent-color) 50%, var(--the-breach-white) 50%);
|
|
}
|
|
.clock-container-6 .clock-progress[value="3"]:checked ~ .clock-color-fill {
|
|
background-image: linear-gradient(90deg, var(--the-breach-white) 50%, var(--the-breach-accent-color) 50%);
|
|
}
|
|
.clock-container-6 .clock-progress[value="4"]:checked ~ .clock-color-fill {
|
|
background-image: linear-gradient(90deg, transparent 50%, var(--the-breach-accent-color) 50%), linear-gradient(150deg, var(--the-breach-white) 50%, var(--the-breach-accent-color) 50%);
|
|
}
|
|
.clock-container-6 .clock-progress[value="5"]:checked ~ .clock-color-fill {
|
|
background-image: linear-gradient(90deg, transparent 50%, var(--the-breach-accent-color) 50%), linear-gradient(210deg, var(--the-breach-white) 50%, var(--the-breach-accent-color) 50%);
|
|
}
|
|
.clock-container-6 .clock-progress[value="6"]:checked ~ .clock-color-fill {
|
|
background: var(--the-breach-accent-color);
|
|
}
|
|
/* color - 8-segments clock */
|
|
.clock-container-8 .clock-progress[value="1"]:checked ~ .clock-color-fill {
|
|
background-image: linear-gradient(90deg, var(--the-breach-white) 50%, transparent 50%), linear-gradient(135deg, var(--the-breach-accent-color) 50%, var(--the-breach-white) 50%);
|
|
}
|
|
.clock-container-8 .clock-progress[value="3"]:checked ~ .clock-color-fill {
|
|
background-image: linear-gradient(90deg, var(--the-breach-white) 50%, transparent 50%), linear-gradient(225deg, var(--the-breach-accent-color) 50%, var(--the-breach-white) 50%);
|
|
}
|
|
.clock-container-8 .clock-progress[value="5"]:checked ~ .clock-color-fill {
|
|
background-image: linear-gradient(90deg, transparent 50%, var(--the-breach-accent-color) 50%), linear-gradient(135deg, var(--the-breach-white) 50%, var(--the-breach-accent-color) 50%);
|
|
}
|
|
.clock-container-8 .clock-progress[value="7"]:checked ~ .clock-color-fill {
|
|
background-image: linear-gradient(90deg, transparent 50%, var(--the-breach-accent-color) 50%), linear-gradient(225deg, var(--the-breach-white) 50%, var(--the-breach-accent-color) 50%);
|
|
}
|
|
|
|
/* show different clock depending on option selected */
|
|
.clock-options-container {
|
|
height: 38px;
|
|
width: 38px;
|
|
}
|
|
.clock-option {
|
|
display: none;
|
|
}
|
|
.cloak-clock-size[value="4"] ~ .clock-options-container .clock-container-4 {
|
|
display: block;
|
|
}
|
|
.cloak-clock-size[value="6"] ~ .clock-options-container .clock-container-6 {
|
|
display: block;
|
|
}
|
|
.cloak-clock-size[value="8"] ~ .clock-options-container .clock-container-8 {
|
|
display: block;
|
|
}
|
|
|
|
|
|
/* XP and HARMS ICONS */
|
|
.line.experience {
|
|
justify-content: flex-start;
|
|
}
|
|
.progress-points-container {
|
|
width: 190px;
|
|
margin: 0 2rem;
|
|
align-items: end;
|
|
}
|
|
|
|
.progress-point, .reset-progress-points {
|
|
appearance: none;
|
|
background: var(--the-breach-white);
|
|
}
|
|
|
|
.progress-point {
|
|
border: 2px solid var(--the-breach-black);
|
|
width: 18px !important;
|
|
height: 18px !important;
|
|
}
|
|
|
|
.progress-point.round, .reset-progress-points {
|
|
border-radius: 50% !important;
|
|
}
|
|
.progress-point.square {
|
|
transform: rotate(135deg);
|
|
}
|
|
|
|
/* xp and harms icon color */
|
|
.progress-point:checked,
|
|
.progress[value="2"] ~ .progress-point[value="1"],
|
|
.progress[value="3"] ~ .progress-point[value="1"],
|
|
.progress[value="4"] ~ .progress-point[value="1"],
|
|
.progress[value="5"] ~ .progress-point[value="1"],
|
|
.progress[value="3"] ~ .progress-point[value="2"],
|
|
.progress[value="4"] ~ .progress-point[value="2"],
|
|
.progress[value="5"] ~ .progress-point[value="2"],
|
|
.progress[value="4"] ~ .progress-point[value="3"],
|
|
.progress[value="5"] ~ .progress-point[value="3"],
|
|
.progress[value="5"] ~ .progress-point[value="4"] {
|
|
outline: 5px solid var(--the-breach-accent-color) !important;
|
|
outline-offset: -15px !important;
|
|
}
|
|
|
|
|
|
/* RESET XP and HARMS ICON */
|
|
.reset-progress-points {
|
|
border: 1px solid var(--the-breach-black);
|
|
width: 11px !important;
|
|
height: 11px !important;
|
|
position: relative;
|
|
}
|
|
|
|
.reset-progress-points:checked {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.reset-progress-points::before,
|
|
.reset-progress-points::after {
|
|
position: absolute;
|
|
width: 1px;
|
|
content: "";
|
|
left: 0;
|
|
background: var(--the-breach-black);
|
|
height: 11px;
|
|
}
|
|
.reset-progress-points::before {
|
|
transform: translate(4px, -1px) rotate(45deg);
|
|
}
|
|
.reset-progress-points::after {
|
|
transform: translate(4px, -1px) rotate(135deg);
|
|
}
|
|
|
|
|
|
/* ROLL SECTION */
|
|
.roll-section * {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
color: var(--the-breach-black);
|
|
}
|
|
|
|
.assemble-dice-pool-container {
|
|
margin-bottom: 1rem;
|
|
position: relative;
|
|
}
|
|
|
|
/* DICE POOL TEXT */
|
|
.dice-pool {
|
|
display: block;
|
|
height: 50px;
|
|
border: 2px solid var(--the-breach-black);
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
|
|
font-size: larger;
|
|
font-weight: bold;
|
|
|
|
padding: 0.6rem;
|
|
}
|
|
|
|
.buttons {
|
|
margin-top: 1.5rem;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
button.reaction-roll {
|
|
padding: 1rem 2rem !important;
|
|
font-size: 16px !important;
|
|
}
|
|
button[type=roll]::before {
|
|
margin-right: 6px;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.clear-button, .reduce-size-button {
|
|
height: fit-content;
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
.clear-button {
|
|
right: 0;
|
|
}
|
|
.reduce-size-button {
|
|
right: 0;
|
|
}
|
|
|
|
/* DISABLED BUTTONS */
|
|
.consumable-object[value="0"] + .add-die,
|
|
.harms-points[value="0"] ~ button.save-roll {
|
|
pointer-events: none;
|
|
background: var(--the-breach-darkgrey) !important;
|
|
color: var(--the-breach-white) !important;
|
|
}
|
|
|
|
/* HIGHLIGHT SELECTED DIE */
|
|
.selectable-die {
|
|
display: none;
|
|
}
|
|
.selectable-die[value="selected"] + .line {
|
|
background-color: var(--the-breach-accent-transparent);
|
|
}
|
|
|
|
/* permanent condition roll button */
|
|
.condition-die[value="permanent"] + button.condition-roll {
|
|
visibility: hidden;
|
|
}
|
|
|
|
|
|
/* REPEATING SECTION CONTROLS */
|
|
.repcontrol {
|
|
margin-top: 2px;
|
|
position: relative;
|
|
text-align: center;
|
|
}
|
|
|
|
.repcontrol button, .itemcontrol button, .itemcontrol .repcontrol_move {
|
|
border: 1px solid var(--the-breach-black) !important;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.repcontrol button.repcontrol_edit, .itemcontrol button, .itemcontrol .repcontrol_move {
|
|
font-family: pictos;
|
|
}
|
|
|
|
.repcontrol button {
|
|
font-size: 0;
|
|
padding: 0.6rem 1rem 0.3rem;
|
|
line-height: 8px;
|
|
}
|
|
|
|
.repcontrol .repcontrol_edit {
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
.repcontrol button.repcontrol_edit::after {
|
|
content: "(";
|
|
}
|
|
.repcontrol button.repcontrol_add::after {
|
|
content: "New condition or effect";
|
|
font-family: 'Space Grotesk', sans-serif !important;
|
|
}
|
|
.repcontrol button.repcontrol_edit::after, .repcontrol button.repcontrol_add::after {
|
|
font-size: 12px;
|
|
}
|
|
.repcontainer.editmode + .repcontrol button.repcontrol_edit::after {
|
|
content: ")";
|
|
}
|
|
|
|
|
|
/* ROLLTEMPLATE */
|
|
|
|
.preload {
|
|
opacity: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.sheet-rolltemplate-saveroll,
|
|
.sheet-rolltemplate-conditionroll,
|
|
.sheet-rolltemplate-reactionroll {
|
|
box-sizing: border-box;
|
|
padding-top: 0.8rem;
|
|
}
|
|
|
|
.sheet-rolltemplate-saveroll .sheet-template-container *,
|
|
.sheet-rolltemplate-conditionroll .sheet-template-container *,
|
|
.sheet-rolltemplate-reactionroll .sheet-template-container * {
|
|
color: #1D1D1D;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
line-height: normal;
|
|
}
|
|
|
|
.sheet-rolltemplate-saveroll .sheet-template-container,
|
|
.sheet-rolltemplate-conditionroll .sheet-template-container,
|
|
.sheet-rolltemplate-reactionroll .sheet-template-container {
|
|
padding: 1.5rem;
|
|
|
|
background-color: lightgray;
|
|
background-image: linear-gradient(rgba(211, 211, 211, 0.8), rgba(211, 211, 211, 0.8)), url(https://github.com/wellenina/roll20-the-breach-character-sheet/blob/73f2aa3dd0bd8b5b2aef518a87586a98c46b5e5e/Assets/background-box.jpg?raw=true);
|
|
background-size: 600px;
|
|
|
|
border-radius: 2px;
|
|
border: 4px solid #1D1D1D;
|
|
outline: 2px solid #1D1D1D;
|
|
outline-offset: -9px;
|
|
|
|
position: relative;
|
|
}
|
|
|
|
.sheet-rolltemplate-saveroll .sheet-background-logo,
|
|
.sheet-rolltemplate-conditionroll .sheet-background-logo,
|
|
.sheet-rolltemplate-reactionroll .sheet-background-logo {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url(https://github.com/wellenina/roll20-the-breach-character-sheet/blob/b1cf6ebbf260eac9cacadb8c833adeb90b745720/Assets/background-logo.png?raw=true);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
opacity: 0.1;
|
|
}
|
|
|
|
.sheet-rolltemplate-saveroll .sheet-background-logo,
|
|
.sheet-rolltemplate-conditionroll .sheet-background-logo {
|
|
background-size: auto 90%;
|
|
}
|
|
.sheet-rolltemplate-reactionroll .sheet-background-logo {
|
|
background-size: auto 80%;
|
|
}
|
|
|
|
.sheet-rolltemplate-saveroll .sheet-result-title,
|
|
.sheet-rolltemplate-conditionroll .sheet-result-title,
|
|
.sheet-rolltemplate-reactionroll .sheet-result-title {
|
|
text-align: center;
|
|
font-size: large;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.sheet-rolltemplate-saveroll .inlinerollresult,
|
|
.sheet-rolltemplate-conditionroll .inlinerollresult,
|
|
.sheet-rolltemplate-reactionroll .inlinerollresult {
|
|
font-family: "Teko", sans-serif;
|
|
font-weight: 600;
|
|
font-size: 50px;
|
|
text-align: center;
|
|
display: block;
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
line-height: 1;
|
|
}
|
|
|
|
.sheet-rolltemplate-saveroll p,
|
|
.sheet-rolltemplate-conditionroll p,
|
|
.sheet-rolltemplate-reactionroll p {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.sheet-rolltemplate-saveroll .sheet-template-separator,
|
|
.sheet-rolltemplate-conditionroll .sheet-template-separator,
|
|
.sheet-rolltemplate-reactionroll .sheet-template-separator {
|
|
width: 70%;
|
|
height: 2px;
|
|
margin: 0.6rem auto;
|
|
background-color: #1D1D1D;
|
|
}
|
|
|
|
.sheet-rolltemplate-saveroll .sheet-result-description,
|
|
.sheet-rolltemplate-conditionroll .sheet-result-description,
|
|
.sheet-rolltemplate-reactionroll .sheet-result-description {
|
|
font-style: italic;
|
|
}
|
|
|
|
.sheet-rolltemplate-saveroll .sheet-success-fail,
|
|
.sheet-rolltemplate-conditionroll .sheet-success-fail,
|
|
.sheet-rolltemplate-reactionroll .sheet-success-fail {
|
|
font-family: "Teko", sans-serif;
|
|
font-size: 34px;
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
text-align: center;
|
|
} |