mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 11:42:29 +00:00
Cassie Levett
918b8a722a
* trophy gold commit' * save trophy gold * update preview * remove unused files and updat readme
565 lines
17 KiB
CSS
565 lines
17 KiB
CSS
/* GLOBAL SETTINGS
|
|
============================= */
|
|
/* GLOBAL SETTINGS
|
|
============================= */
|
|
* {
|
|
box-sizing: border-box;
|
|
font-family: sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 62.5%; }
|
|
|
|
button {
|
|
text-overflow: ellipsis;
|
|
font-family: serif;
|
|
font-variant: small-caps;
|
|
transition: all .2s;
|
|
box-shadow: -1px -1px 1px 1px rgba(0, 0, 0, 0.5); }
|
|
button:before {
|
|
display: none; }
|
|
button:focus, button:hover, button:active {
|
|
background: none;
|
|
background-color: #1e1a1a !important;
|
|
color: #fff;
|
|
transform: scale(1.1);
|
|
box-shadow: none; }
|
|
button[type="roll"], button[type="action"] {
|
|
background-color: whitesmoke;
|
|
border-bottom: 1px solid #666;
|
|
border-bottom-right-radius: 1px;
|
|
border-color: #b3b3b3;
|
|
border-radius: 0.25rem;
|
|
border-right: 0.02rem solid #333333;
|
|
border-style: outset;
|
|
font-size: 2rem !important;
|
|
margin: 0.25rem !important;
|
|
padding: 0.2rem 0.5rem !important; }
|
|
|
|
div {
|
|
background-color: transparent;
|
|
width: 100%; }
|
|
|
|
fieldset {
|
|
background-color: transparent; }
|
|
|
|
h2.sheet-label {
|
|
border-bottom: 0.15em solid black;
|
|
text-align: center;
|
|
margin-left: 3%; }
|
|
|
|
input[type="text"], input[type="number"] {
|
|
background-color: transparent;
|
|
border: none;
|
|
height: 2.1rem;
|
|
padding: 1% 2%;
|
|
width: 100%; }
|
|
input[type="text"]:hover, input[type="number"]:hover {
|
|
background-color: #d8d6d0; }
|
|
|
|
input[type='number'] {
|
|
text-align: center;
|
|
width: 100% !important; }
|
|
|
|
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
|
|
margin: 0; }
|
|
|
|
label {
|
|
margin-bottom: 0px;
|
|
padding-right: 0px; }
|
|
|
|
select {
|
|
margin-bottom: 0px;
|
|
vertical-align: bottom;
|
|
border: 2px solid #1e1a1a;
|
|
font-weight: bold;
|
|
text-transform: capitalize;
|
|
margin-top: 8%;
|
|
width: 100%; }
|
|
|
|
span {
|
|
font-size: 1.5rem;
|
|
word-break: break-word; }
|
|
|
|
textarea {
|
|
text-align: left;
|
|
border-bottom: 0.2em dotted #b9dadf;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
min-height: 50px;
|
|
line-height: 18px;
|
|
overflow: hidden;
|
|
overflow-wrap: break-word;
|
|
padding: 2px;
|
|
resize: vertical;
|
|
vertical-align: top;
|
|
overflow: scroll;
|
|
background-color: transparent; }
|
|
|
|
.charsheet {
|
|
width: 850px; }
|
|
|
|
div.sheet-background {
|
|
background-color: rgba(77, 77, 77, 0.0784314); }
|
|
|
|
.sheet-border {
|
|
border: 0.15em solid #4c4c4c; }
|
|
|
|
.sheet-bottom-border {
|
|
border-bottom: 0.2em solid black; }
|
|
|
|
.sheet-description {
|
|
white-space: pre-line; }
|
|
|
|
.sheet-eclipse {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap; }
|
|
|
|
.sheet-font-weight-bold {
|
|
font-weight: bold; }
|
|
|
|
.sheet-grid {
|
|
display: inline-grid;
|
|
grid-gap: 0.5%; }
|
|
|
|
.sheet-inline-block {
|
|
display: inline-block; }
|
|
|
|
.sheet-text-vertical {
|
|
transform: rotate(180deg);
|
|
writing-mode: vertical-lr; }
|
|
|
|
.sheet-text-center {
|
|
text-align: center; }
|
|
|
|
div.sheet-2column {
|
|
grid-template-columns: repeat(2, 1fr); }
|
|
|
|
div.sheet-3column {
|
|
grid-template-columns: repeat(3, 1fr); }
|
|
|
|
div.sheet-4column {
|
|
grid-template-columns: repeat(4, 1fr); }
|
|
|
|
div.sheet-5column {
|
|
grid-template-columns: repeat(5, 1fr); }
|
|
|
|
div.sheet-6column {
|
|
grid-template-columns: repeat(6, 1fr); }
|
|
|
|
div.sheet-2autocolumn {
|
|
grid-template-columns: auto 1fr; }
|
|
|
|
div.sheet-4autocolumn {
|
|
grid-template-columns: auto 1fr auto 1fr; }
|
|
|
|
div.sheet-3columnbutton {
|
|
grid-template-columns: auto 1fr 3rem; }
|
|
|
|
h1 {
|
|
color: #1e1a1a;
|
|
text-transform: capitalize;
|
|
font-family: serif;
|
|
font-size: 2.5rem; }
|
|
|
|
h2 {
|
|
font-size: 1.5rem;
|
|
line-height: 2rem;
|
|
text-transform: capitalize;
|
|
font-variant: small-caps;
|
|
margin-bottom: 2%; }
|
|
|
|
h3 {
|
|
font-size: 1.25rem;
|
|
line-height: 2rem;
|
|
text-transform: capitalize;
|
|
font-style: italic; }
|
|
|
|
h4 {
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase; }
|
|
|
|
label {
|
|
font-size: 3rem; }
|
|
|
|
.sheet-pictos {
|
|
font-family: "pictos"; }
|
|
|
|
.sheet-d20 {
|
|
font-family: "dicefontd20"; }
|
|
|
|
.sheet-text-capitalize {
|
|
text-transform: capitalize; }
|
|
|
|
.sheet-text-uppercase {
|
|
text-transform: uppercase; }
|
|
|
|
.sheet-text-center {
|
|
text-align: center; }
|
|
|
|
.sheet-text-left {
|
|
text-align: left !important; }
|
|
|
|
.sheet-text-right {
|
|
text-align: right; }
|
|
|
|
.sheet-text-primary {
|
|
color: #1e1a1a; }
|
|
|
|
/* GRID
|
|
============================= */
|
|
div.sheet-grid {
|
|
display: inline-grid;
|
|
grid-column-gap: 1%;
|
|
grid-row-gap: 0.5%; }
|
|
|
|
span.sheet-display {
|
|
border-bottom: 2px dotted black;
|
|
padding-top: 3%; }
|
|
|
|
input.sheet-toggles {
|
|
position: relative;
|
|
opacity: 0;
|
|
width: 100%;
|
|
z-index: 2; }
|
|
input.sheet-toggles:checked + span {
|
|
color: #1e1a1a;
|
|
margin-left: 5%; }
|
|
|
|
/* HEADER
|
|
============================= */
|
|
div.sheet-header {
|
|
margin-top: 2%;
|
|
border-top: 2px solid #1e1a1a;
|
|
border-bottom: 2px solid #1e1a1a;
|
|
text-align: center;
|
|
background: #b9dadf;
|
|
/* Old browsers */
|
|
background: -moz-linear-gradient(top, #b9dadf 0%, #d8d6d0 50%, #b9dadf 100%);
|
|
/* FF3.6-15 */
|
|
background: -webkit-linear-gradient(top, #b9dadf 0%, #d8d6d0 50%, #b9dadf 100%);
|
|
/* Chrome10-25,Safari5.1-6 */
|
|
background: linear-gradient(to bottom, #b9dadf 0%, #d8d6d0 50%, #b9dadf 100%);
|
|
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$light', endColorstr='$light',GradientType=0 );
|
|
/* IE6-9 */ }
|
|
|
|
/* PC
|
|
============================= */
|
|
div.sheet-pc {
|
|
border: 0.8em solid #4c4c4c;
|
|
background-color: #d8d6d0;
|
|
padding: 2% 1%;
|
|
grid-template-columns: 3fr 2fr 0.5fr;
|
|
grid-row-gap: 1%;
|
|
-moz-box-shadow: inset 0 0 10px #000000;
|
|
-webkit-box-shadow: inset 0 0 10px #000000;
|
|
box-shadow: inset 0 0 10px #000000; }
|
|
div.sheet-pc h1 {
|
|
grid-area: 1 / 1 / 1 / 4;
|
|
border-bottom: 0.5rem solid black; }
|
|
div.sheet-pc label {
|
|
border: 1px solid black; }
|
|
div.sheet-pc div.sheet-row {
|
|
display: inline-grid;
|
|
margin-bottom: 5%; }
|
|
div.sheet-pc div.sheet-skill {
|
|
padding: 1% 2%;
|
|
overflow: hidden; }
|
|
div.sheet-pc div.sheet-training div.sheet-skill,
|
|
div.sheet-pc div.sheet-library div.sheet-skill {
|
|
border-left: 0.5rem solid black; }
|
|
div.sheet-pc div.sheet-hoard {
|
|
grid-template-columns: repeat(10, 1fr);
|
|
grid-row-gap: 2%;
|
|
border-bottom: 2px solid black;
|
|
padding-bottom: 5%; }
|
|
div.sheet-pc div.sheet-hoard h2 {
|
|
grid-area: 1 / 1 / 1 / 11; }
|
|
div.sheet-pc div.sheet-hoard label {
|
|
border: none; }
|
|
div.sheet-pc div.sheet-household textarea {
|
|
border-left: 0.5rem solid black; }
|
|
div.sheet-pc div.sheet-equipment {
|
|
border-bottom: 2px solid black; }
|
|
div.sheet-pc div.sheet-equipment div.sheet-backpack,
|
|
div.sheet-pc div.sheet-equipment div.sheet-combat {
|
|
grid-column-gap: 1%; }
|
|
div.sheet-pc div.sheet-equipment div.sheet-repeating-container {
|
|
grid-column: 1 / 3; }
|
|
div.sheet-pc div.sheet-equipment div.sheet-armor,
|
|
div.sheet-pc div.sheet-equipment div.sheet-backpack {
|
|
grid-template-columns: 80% 1fr; }
|
|
div.sheet-pc div.sheet-equipment div.sheet-armor div.sheet-grid,
|
|
div.sheet-pc div.sheet-equipment div.sheet-backpack div.sheet-grid {
|
|
grid-template-columns: 80% 1fr; }
|
|
div.sheet-pc div.sheet-equipment div.sheet-combat {
|
|
grid-template-columns: 80% 1fr; }
|
|
div.sheet-pc div.sheet-equipment div.sheet-combat label:first-child {
|
|
border-left: 0.5rem solid black; }
|
|
div.sheet-pc div.sheet-column:not(:last-child) {
|
|
border-right: 0.5rem solid black;
|
|
padding-right: 2%; }
|
|
div.sheet-pc div.sheet-squares {
|
|
text-align: center;
|
|
display: inline-grid;
|
|
align-items: start; }
|
|
div.sheet-pc div.sheet-squares label {
|
|
border: 1px solid black;
|
|
width: 5rem;
|
|
height: 5rem;
|
|
margin: auto;
|
|
margin-bottom: 5%;
|
|
display: grid;
|
|
align-items: center; }
|
|
div.sheet-pc div.sheet-squares input {
|
|
height: 100%;
|
|
width: 100%; }
|
|
div.sheet-pc div.sheet-gold input,
|
|
div.sheet-pc div.sheet-burdens input {
|
|
text-align: center; }
|
|
div.sheet-pc div.sheet-burdens label {
|
|
border-left: 0.5rem solid black; }
|
|
div.sheet-pc div.sheet-ruin {
|
|
transition: all 2s; }
|
|
div.sheet-pc div.sheet-ruin label {
|
|
position: relative; }
|
|
div.sheet-pc div.sheet-ruin div.sheet-slash {
|
|
opacity: 0; }
|
|
div.sheet-pc div.sheet-ruin input[type='checkbox'] {
|
|
height: 100%;
|
|
opacity: 0;
|
|
width: 100%;
|
|
position: absolute; }
|
|
div.sheet-pc div.sheet-ruin input[type='checkbox']:checked + div.sheet-slash {
|
|
background-color: black;
|
|
height: 5px;
|
|
opacity: 1;
|
|
transform: skewY(-44deg); }
|
|
div.sheet-pc div.sheet-ruin div.sheet-text-center {
|
|
position: absolute; }
|
|
|
|
/* REPEATING SECTIONS
|
|
============================= */
|
|
div.sheet-repeating-container {
|
|
margin-top: 2%; }
|
|
div.sheet-repeating-container button {
|
|
font-variant: none;
|
|
width: fit-content;
|
|
font-size: 1.5rem;
|
|
padding: 1% 2%; }
|
|
div.sheet-repeating-container button[type='roll'] {
|
|
width: 100%; }
|
|
div.sheet-repeating-container textarea {
|
|
margin-top: 2%; }
|
|
div.sheet-repeating-container div.sheet-skill {
|
|
border: 1px solid black; }
|
|
div.sheet-repeating-container .repcontrol {
|
|
margin-top: 5%; }
|
|
div.sheet-repeating-container .repcontrol_del {
|
|
font-family: "pictos";
|
|
position: relative; }
|
|
div.sheet-repeating-container .repitem {
|
|
margin-bottom: 2%; }
|
|
div.sheet-repeating-container div.sheet-descriptor {
|
|
grid-template-columns: 1fr repeat(2, 1.5rem);
|
|
align-items: center;
|
|
justify-items: center; }
|
|
div.sheet-repeating-container div.sheet-descriptor div.sheet-collapse {
|
|
padding-left: 5%; }
|
|
div.sheet-repeating-container div.sheet-descriptor input[name='attr_collapse'] + span,
|
|
div.sheet-repeating-container div.sheet-descriptor input[name='attr_settings'] + span {
|
|
font-size: 1.5rem; }
|
|
div.sheet-repeating-container div.sheet-descriptor input[name='attr_collapse'],
|
|
div.sheet-repeating-container div.sheet-descriptor input[name='attr_collapse'] + span {
|
|
grid-area: 1 / 2 / 1 / 2; }
|
|
div.sheet-repeating-container div.sheet-descriptor input[name='attr_settings'],
|
|
div.sheet-repeating-container div.sheet-descriptor input[name='attr_settings'] + span {
|
|
grid-area: 1 / 3 / 1 / 3; }
|
|
div.sheet-repeating-container div.sheet-descriptor div.sheet-collapse,
|
|
div.sheet-repeating-container div.sheet-descriptor div.sheet-settings {
|
|
grid-column: 1 / 4; }
|
|
div.sheet-repeating-container div.sheet-descriptor div.sheet-settings {
|
|
grid-template-columns: 1fr;
|
|
background-color: rgba(76, 76, 76, 0.2);
|
|
padding: 3% 5%;
|
|
margin-top: 5%;
|
|
position: relative; }
|
|
div.sheet-repeating-container div.sheet-descriptor div.sheet-settings::before {
|
|
position: absolute;
|
|
top: -1rem;
|
|
left: 50%;
|
|
content: '';
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 10px solid transparent;
|
|
border-right: 10px solid transparent;
|
|
border-bottom: 10px solid rgba(76, 76, 76, 0.2); }
|
|
|
|
/* SHOW & HIDE SECTIONS
|
|
============================= */
|
|
/***** SETTINGS *****/
|
|
input[name='attr_collapse']:checked ~ div.sheet-collapse,
|
|
input[name='attr_settings']:checked ~ div.sheet-settings {
|
|
display: block; }
|
|
|
|
input.sheet-type:not([value="npc"]) ~ div.sheet-npc, input[name='attr_sheet_type']:not([value='core']) ~ div.sheet-pc div.sheet-info,
|
|
input[name='attr_sheet_type']:not([value='core']) ~ div.sheet-pc div.sheet-skill-traits,
|
|
input[name='attr_sheet_type']:not([value='arms']) ~ div.sheet-pc div.sheet-arms,
|
|
input[name='attr_sheet_type']:not([value='advancement']) ~ div.sheet-pc div.sheet-advancement,
|
|
input[name='attr_sheet_type'][value='advancement'] ~ div.sheet-pc div.sheet-characteristics, div.sheet-collapse,
|
|
.sheet-settings {
|
|
display: none; }
|
|
|
|
/* SWITCH
|
|
============================= */
|
|
/* SWITCH
|
|
============================= */
|
|
.sheet-switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 50px;
|
|
height: 24px;
|
|
/* Hide default HTML checkbox */ }
|
|
.sheet-switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0; }
|
|
|
|
/* The slider */
|
|
.sheet-slider {
|
|
-webkit-transition: .4s;
|
|
background-color: #ccc;
|
|
border-radius: 34px;
|
|
bottom: 0;
|
|
cursor: pointer;
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
transition: .4s; }
|
|
.sheet-slider:before {
|
|
-webkit-transition: .4s;
|
|
background-color: white;
|
|
border-radius: 50%;
|
|
bottom: 4px;
|
|
content: "";
|
|
height: 16px;
|
|
left: 4px;
|
|
position: absolute;
|
|
transition: .4s;
|
|
width: 16px; }
|
|
input:checked + .sheet-slider {
|
|
background-color: black; }
|
|
input:checked + .sheet-slider:before {
|
|
-webkit-transform: translateX(26px);
|
|
-ms-transform: translateX(26px);
|
|
transform: translateX(26px); }
|
|
input:focus + .sheet-slider {
|
|
box-shadow: 0 0 1px black; }
|
|
|
|
/* STYLED CHECKBOXES
|
|
============================= */
|
|
label.sheet-styled-checkbox input, label.sheet-styled-checkbox span {
|
|
grid-area: 1 / 1 / 1 / 1;
|
|
height: 15px;
|
|
width: 15px;
|
|
position: relative;
|
|
left: 20%; }
|
|
|
|
label.sheet-styled-checkbox span {
|
|
border: 2px solid #1e1a1a;
|
|
display: inline-block;
|
|
top: -20%;
|
|
color: transparent;
|
|
text-align: center;
|
|
font-size: 1rem;
|
|
line-height: 90%; }
|
|
|
|
label.sheet-styled-checkbox input {
|
|
opacity: 0;
|
|
top: 20%;
|
|
z-index: 2; }
|
|
label.sheet-styled-checkbox input[type="checkbox"]:checked + span {
|
|
background-color: #1e1a1a;
|
|
color: #fff; }
|
|
|
|
/* FOOTER
|
|
============================= */
|
|
.sheet-footer {
|
|
display: block;
|
|
text-align: center; }
|
|
.sheet-footer span[name="attr_version"]::after {
|
|
content: '.';
|
|
margin-right: 0.2rem; }
|
|
.sheet-footer span {
|
|
font-size: 1rem; }
|
|
.sheet-footer img {
|
|
margin-left: 2%;
|
|
height: 2.5rem;
|
|
width: 2.5rem; }
|
|
|
|
/* ROLL TEMPLATE STYLE
|
|
============================= */
|
|
.sheet-rolltemplate-rolls div.sheet-template-container {
|
|
border: 2px solid black;
|
|
border-radius: 0.3rem;
|
|
box-shadow: inset 0px 0px 3px 1px #1e1a1a;
|
|
text-align: center;
|
|
font-family: 'fantasy';
|
|
/* DICE ROLL STYLES
|
|
----------------------------- */ }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult.importantroll {
|
|
border: none; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult.fullfail, .sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult.fullcrit {
|
|
color: #1e1a1a; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult {
|
|
background-color: transparent;
|
|
border: none;
|
|
font-size: 2rem;
|
|
padding: unset; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-header {
|
|
background-color: #1e1a1a;
|
|
border-bottom: 2px solid black;
|
|
color: whitesmoke;
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
margin-top: -2px;
|
|
padding: 5% 2%;
|
|
text-transform: capitalize;
|
|
-moz-box-shadow: inset 0 0 10px #000000;
|
|
-webkit-box-shadow: inset 0 0 10px #000000;
|
|
box-shadow: inset 0 0 10px #000000; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body {
|
|
background-color: black;
|
|
color: whitesmoke; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-row:nth-child(2n+0) {
|
|
background-color: #b9dadf; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-row span.sheet-inlinerollresult {
|
|
color: whitesmoke;
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
cursor: help;
|
|
padding: 0 3px 0 3px;
|
|
font-weight: bold; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-row span.sheet-percent, .sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-row span.sheet-template-desc {
|
|
color: whitesmoke;
|
|
font-size: 1rem; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-damage {
|
|
background-color: #fff;
|
|
padding: 3% 2%; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-roll {
|
|
display: inline-grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
width: 100%; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-roll div.sheet-template-col {
|
|
padding: 5%; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-roll div.sheet-template-col:nth-of-type(2) {
|
|
border-left: 2px solid black; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-roll div.sheet-template-col span {
|
|
display: block; }
|
|
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-roll div.sheet-template-col span:last-child {
|
|
margin-top: 5%; }
|