mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
887 lines
23 KiB
CSS
887 lines
23 KiB
CSS
/*Configure the tab buttons*/
|
|
|
|
body.sheet-darkmode .charsheet {
|
|
background-color:#1F1F1F;
|
|
/*color:#E6E6E6;*/
|
|
color:#D8D8D8
|
|
}
|
|
|
|
.sheet-character,
|
|
.sheet-journal {
|
|
display: none;
|
|
position: relative;
|
|
}
|
|
|
|
.sheet-stat-label {
|
|
display: inline-block;
|
|
min-width: 1.6em;
|
|
font-weight: bold;
|
|
font-size: larger;
|
|
}
|
|
|
|
.sheet-stat-equals,
|
|
.sheet-stat-plus {
|
|
display: inline-block;
|
|
min-width: .75em;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
.sheet-computed-value {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
min-width: 2rem;
|
|
line-height: normal;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding-top: .3rem;
|
|
padding-bottom: .3rem;
|
|
padding-left: .4rem;
|
|
padding-right: .4rem;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.sheet-expanded {
|
|
margin-left: 2.5rem;
|
|
max-width: 40rem;
|
|
width: 90%
|
|
}
|
|
|
|
.sheet-first-word {
|
|
font-size: larger;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.sheet-onechar-input {
|
|
width: 1.5em;
|
|
}
|
|
|
|
.sheet-tiny-input {
|
|
width: 3em;
|
|
}
|
|
|
|
.sheet-small-input {
|
|
width: 4em;
|
|
}
|
|
|
|
.sheet-fieldset-header span,
|
|
.sheet-label {
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-expand-button,
|
|
.sheet-describe-button
|
|
{
|
|
font-family: "Pictos";
|
|
display: inline-block;
|
|
border-style: solid;
|
|
height: 1.25em;
|
|
width: 1em;
|
|
border-width: 1px;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.sheet-describe-button::before {
|
|
content: "w"
|
|
}
|
|
|
|
.sheet-expand-button::before {
|
|
content: "y"
|
|
}
|
|
|
|
/* the weapon and spell selection button */
|
|
.sheet-select-button
|
|
{
|
|
font-family: "Pictos";
|
|
display: inline-block;
|
|
border-style: solid;
|
|
height: 1rem;
|
|
width: .1rem;
|
|
border-radius: .75rem;
|
|
border-width: 1px;
|
|
/*font-weight: bold;*/
|
|
align-self: center;
|
|
text-align: center;
|
|
}
|
|
|
|
/* our custom checkboxes */
|
|
.sheet-checkbox-button
|
|
{
|
|
font-family: "Pictos";
|
|
display: inline-block;
|
|
border-style: solid;
|
|
height: 1rem;
|
|
width: .03rem;
|
|
border-radius: .2rem;
|
|
border-width: 1px;
|
|
margin-left: .2rem;
|
|
margin-right: .2rem;
|
|
align-self: center;
|
|
text-align: center;
|
|
font-size: smaller;
|
|
}
|
|
|
|
.sheet-attack-button {
|
|
display: inline-block;
|
|
border-style: solid;
|
|
height: 1.25em;
|
|
width: 1em;
|
|
border-width: 1px;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-caption-button
|
|
{
|
|
display: inline-block;
|
|
border-style: solid;
|
|
height: 1.25em;
|
|
text-align: center;
|
|
align-self: center;
|
|
font-weight: bold;
|
|
border-radius: 1.5rem;
|
|
border-width: 1px;
|
|
}
|
|
|
|
|
|
/* Fake roll button */
|
|
.sheet-dice-button {
|
|
display: inline-block;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-radius: 4px;
|
|
position:relative;
|
|
top:.17em;
|
|
text-align: center;
|
|
/* It's a fade in the original */
|
|
margin-top: 0em;
|
|
padding-left: .125em;
|
|
padding-right: .125em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-dice-button::before {
|
|
content: "0";
|
|
font-family: "dicefontd20";
|
|
font-size: 1.4em;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* Colors */
|
|
|
|
.sheet-expand-button,
|
|
.sheet-describe-button,
|
|
.sheet-select-button,
|
|
.sheet-checkbox-button,
|
|
.sheet-caption-button,
|
|
.sheet-attack-button,
|
|
.sheet-dice-button {
|
|
background-color: #F9F9F9;
|
|
border-color: #BBBBBB;
|
|
}
|
|
|
|
/* A bit darker because checkboxes, not real buttons. */
|
|
.sheet-checkbox-button,
|
|
.sheet-caption-button {
|
|
border-color: #767676;
|
|
}
|
|
|
|
/* a white check */
|
|
.sheet-checkbox-checkbox:checked + button::after {
|
|
color: white;
|
|
}
|
|
|
|
body.sheet-darkmode .sheet-checkbox-checkbox:checked + button::after {
|
|
color: black;
|
|
}
|
|
|
|
|
|
body.sheet-darkmode .sheet-expand-button,
|
|
body.sheet-darkmode .sheet-describe-button,
|
|
body.sheet-darkmode .sheet-select-button,
|
|
body.sheet-darkmode .sheet-checkbox-button,
|
|
body.sheet-darkmode .sheet-caption-button,
|
|
body.sheet-darkmode .sheet-attack-button,
|
|
body.sheet-darkmode .sheet-dice-button {
|
|
background-color: #2F232F; /* slight dark purple */
|
|
border-color: black;
|
|
}
|
|
|
|
.sheet-expand-button:hover,
|
|
.sheet-describe-button:hover,
|
|
.sheet-select-button:hover,
|
|
.sheet-checkbox-button:hover,
|
|
.sheet-caption-button:hover,
|
|
.sheet-attack-button:hover,
|
|
.sheet-dice-button:hover {
|
|
background-color: #EBEBEB;
|
|
}
|
|
|
|
/* Even deeper purple in darkmode */
|
|
body.sheet-darkmode .sheet-expand-button:hover,
|
|
body.sheet-darkmode .sheet-describe-button:hover,
|
|
body.sheet-darkmode .sheet-select-button:hover,
|
|
body.sheet-darkmode .sheet-checkbox-button:hover,
|
|
body.sheet-darkmode .sheet-caption-button:hover,
|
|
body.sheet-darkmode .sheet-attack-button:hover,
|
|
body.sheet-darkmode .sheet-dice-button:hover {
|
|
background-color: #201820;
|
|
}
|
|
|
|
|
|
.sheet-expand-button:active,
|
|
.sheet-describe-button:active,
|
|
.sheet-select-button:active,
|
|
.sheet-checkbox-button:active,
|
|
.sheet-attack-button:active,
|
|
.sheet-dice-button:active {
|
|
background-color: #E1E1E1;
|
|
}
|
|
|
|
.sheet-computed-value {
|
|
border-color: gray;
|
|
}
|
|
|
|
body.sheet-darkmode .sheet-computed-value {
|
|
background-color: #3B0054;
|
|
background-color : #141416;
|
|
border-color: black;
|
|
}
|
|
|
|
.sheet-text-area {
|
|
resize: none;
|
|
box-sizing: border-box;
|
|
height: auto;
|
|
}
|
|
|
|
/* Roll Templates */
|
|
|
|
.sheet-rolltemplate-stat-check .sheet-container,
|
|
.sheet-rolltemplate-cast-spell .sheet-container,
|
|
.sheet-rolltemplate-attack .sheet-container,
|
|
.sheet-rolltemplate-shield-rush .sheet-container,
|
|
.sheet-rolltemplate-hth-reaction .sheet-container,
|
|
.sheet-rolltemplate-initiative .sheet-container,
|
|
.sheet-rolltemplate-turnorder .sheet-container,
|
|
.sheet-rolltemplate-description .sheet-container
|
|
{
|
|
background-color: #ffffff;
|
|
border: 2px solid;
|
|
border-color: rgb(126, 45, 64);
|
|
padding: 2px;
|
|
width: 100%;
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-stat-check .sheet-container,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-cast-spell .sheet-container,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attack .sheet-container,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-shield-rush .sheet-container,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-hth-reaction .sheet-container,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-initiative .sheet-container,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-turnorder .sheet-container,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-description .sheet-container
|
|
{
|
|
background-color: black;
|
|
border-color: rgb(126, 45, 64);
|
|
color: white; /* equals signs and such */
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-stat-check .sheet-container h1,
|
|
.sheet-rolltemplate-cast-spell .sheet-container h1,
|
|
.sheet-rolltemplate-attack .sheet-container h1,
|
|
.sheet-rolltemplate-shield-rush .sheet-container h1,
|
|
.sheet-rolltemplate-hth-reaction .sheet-container h1,
|
|
.sheet-rolltemplate-initiative .sheet-container h1,
|
|
.sheet-rolltemplate-turnorder .sheet-container h1,
|
|
.sheet-rolltemplate-description .sheet-container h1
|
|
{
|
|
color: rgb(126, 45, 64);
|
|
font-size: 1.2em;
|
|
font-style: italic;
|
|
line-height: 20px;
|
|
letter-spacing: -.02em;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-stat-check .sheet-container h1,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-cast-spell .sheet-container h1,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attack .sheet-container h1,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-shield-rush .sheet-container h1,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-hth-reaction .sheet-container h1,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-initiative .sheet-container h1,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-turnorder .sheet-container h1,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-description .sheet-container h1
|
|
{
|
|
color: #C04D68;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-stat-check .sheet-container h2,
|
|
.sheet-rolltemplate-cast-spell .sheet-container h2,
|
|
.sheet-rolltemplate-attack .sheet-container h2,
|
|
.sheet-rolltemplate-shield-rush .sheet-container h2,
|
|
.sheet-rolltemplate-hth-reaction .sheet-container h2,
|
|
.sheet-rolltemplate-initiative .sheet-container h2,
|
|
.sheet-rolltemplate-turnorder .sheet-container h2,
|
|
.sheet-rolltemplate-description .sheet-container h2
|
|
{
|
|
color: rgb(126, 45, 64);
|
|
font-size: 1em;
|
|
/* font-style: italic;*/
|
|
line-height: 20px;
|
|
letter-spacing: -.01em;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-stat-check .sheet-container h2,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-cast-spell .sheet-container h2,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attack .sheet-container h2,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-shield-rush .sheet-container h2,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-hth-reaction .sheet-container h2,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-initiative .sheet-container h2,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-turnorder .sheet-container h2,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-description .sheet-container h2
|
|
{
|
|
color: #C04D68
|
|
}
|
|
|
|
.sheet-rolltemplate-attack .sheet-flavor-success,
|
|
.sheet-rolltemplate-cast-spell .sheet-flavor-success
|
|
{
|
|
color: green;
|
|
font-size: 1em;
|
|
font-style: italic;
|
|
font-weight: bold;
|
|
line-height: 20px;
|
|
letter-spacing: -.01em;
|
|
}
|
|
|
|
.sheet-rolltemplate-attack .sheet-flavor-failure,
|
|
.sheet-rolltemplate-cast-spell .sheet-flavor-failure
|
|
{
|
|
color: red;
|
|
font-size: 1em;
|
|
font-style: italic;
|
|
font-weight: bold;
|
|
line-height: 20px;
|
|
letter-spacing: -.01em;
|
|
}
|
|
|
|
.sheet-rolltemplate-description .sheet-container h1
|
|
{
|
|
font-style: normal;
|
|
}
|
|
|
|
.sheet-rolltemplate-stat-check div,
|
|
.sheet-rolltemplate-cast-spell div,
|
|
.sheet-rolltemplate-attack div,
|
|
.sheet-rolltemplate-hth-reaction div,
|
|
.sheet-rolltemplate-shield-rush div,
|
|
.sheet-rolltemplate-initiative div,
|
|
.sheet-rolltemplate-turnorder div,
|
|
.sheet-rolltemplate-description div
|
|
{
|
|
padding: 2.5px;
|
|
};
|
|
|
|
|
|
/* This is needed to make the arrows show up. Kind of weird */
|
|
.sheet-rolltemplate-stat-check span,
|
|
.sheet-rolltemplate-cast-spell span,
|
|
.sheet-rolltemplate-attack span,
|
|
.sheet-rolltemplate-hth-reaction span,
|
|
.sheet-rolltemplate-shield-rush span,
|
|
.sheet-rolltemplate-initiative span,
|
|
.sheet-rolltemplate-turnorder span,
|
|
.sheet-rolltemplate-description span
|
|
{
|
|
color: rgb(126, 45, 64);
|
|
font-family: "Times New Roman", Times, serif;
|
|
font-size: 1.2em;
|
|
font-variant: small-caps;
|
|
line-height: 1.6em;
|
|
padding-left: 5px;
|
|
text-align: left;
|
|
}
|
|
|
|
/* This should just be the text inside the dice roll */
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-stat-check span,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-cast-spell span,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attack span,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-hth-reaction span,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-shield-rush span,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-initiative span,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-turnorder span,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-description span
|
|
{
|
|
color: lightgray;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-stat-check .sheet-arrow-right,
|
|
.sheet-rolltemplate-cast-spell .sheet-arrow-right,
|
|
.sheet-rolltemplate-attack .sheet-arrow-right,
|
|
.sheet-rolltemplate-hth-reaction .sheet-arrow-right,
|
|
.sheet-rolltemplate-shield-rush .sheet-arrow-right,
|
|
.sheet-rolltemplate-initiative .sheet-arrow-right,
|
|
.sheet-rolltemplate-turnorder .sheet-arrow-right,
|
|
.sheet-rolltemplate-description .sheet-arrow-right
|
|
{
|
|
border-bottom: 2px solid transparent;
|
|
border-left: 180px solid rgb(126, 45, 64);
|
|
border-top: 2px solid transparent;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-stat-check .sheet-arrow-right,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-cast-spell .sheet-arrow-right,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attack .sheet-arrow-right,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-hth-reaction .sheet-arrow-right,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-shield-rush .sheet-arrow-right,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-initiative .sheet-arrow-right,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-turnorder .sheet-arrow-right,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-description .sheet-arrow-right
|
|
{
|
|
color: #C04D68
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-stat-check .sheet-capitalize,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attack .sheet-capitalize,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-cast-spell .sheet-capitalize,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-turnorder .sheet-capitalize,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-description .sheet-capitalize
|
|
{
|
|
color: #C04D68
|
|
}
|
|
|
|
.sheet-rolltemplate-stat-check .inlinerollresult,
|
|
.sheet-rolltemplate-stat-check .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-stat-check .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-stat-check .inlinerollresult.importantroll,
|
|
.sheet-rolltemplate-attack .inlinerollresult,
|
|
.sheet-rolltemplate-attack .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-attack .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-attack .inlinerollresult.importantroll,
|
|
.sheet-rolltemplate-hth-reaction .inlinerollresult,
|
|
.sheet-rolltemplate-hth-reaction .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-hth-reaction .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-hth-reaction .inlinerollresult.importantroll,
|
|
.sheet-rolltemplate-initiative .inlinerollresult,
|
|
.sheet-rolltemplate-initiative .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-initiative .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-initiative .inlinerollresult.importantroll,
|
|
.sheet-rolltemplate-shield-rush .inlinerollresult,
|
|
.sheet-rolltemplate-shield-rush .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-shield-rush .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-shield-rush .inlinerollresult.importantroll,
|
|
.sheet-rolltemplate-cast-spell .inlinerollresult,
|
|
.sheet-rolltemplate-cast-spell .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-cast-spell .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-cast-spell .inlinerollresult.importantroll,
|
|
.sheet-rolltemplate-turnorder .inlinerollresult,
|
|
.sheet-rolltemplate-turnorder .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-turnorder .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-turnorder .inlinerollresult.importantroll
|
|
{
|
|
display: inline-block;
|
|
min-width: 1.5em;
|
|
text-align: center;
|
|
border: none;
|
|
}
|
|
|
|
/* Used to show dice */
|
|
.sheet-rolltemplate-stat-check .sheet-template-dice .inlinerollresult,
|
|
.sheet-rolltemplate-attack .sheet-template-dice .inlinerollresult,
|
|
.sheet-rolltemplate-hth-reaction .sheet-template-dice .inlinerollresult,
|
|
.sheet-rolltemplate-shield-rush .sheet-template-dice .inlinerollresult,
|
|
.sheet-rolltemplate-cast-spell .sheet-template-dice .inlinerollresult,
|
|
.sheet-rolltemplate-initiative .sheet-template-dice .inlinerollresult
|
|
{
|
|
background-color: white;
|
|
font-family: dicefontd6;
|
|
font-size: 2.5em;
|
|
border-style: none;
|
|
position: relative;
|
|
top: .2em;
|
|
margin-bottom: .4em;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-stat-check .sheet-template-dice .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attack .sheet-template-dice .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-hth-reaction .sheet-template-dice .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-shield-rush .sheet-template-dice .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-cast-spell .sheet-template-dice .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-initiative .sheet-template-dice .inlinerollresult
|
|
{
|
|
color: white;
|
|
background-color: black;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-attack .sheet-template-weaponadj .inlinerollresult::after,
|
|
.sheet-rolltemplate-cast-spell .sheet-template-weaponadj .inlinerollresult::after
|
|
{
|
|
font-family: Pictos;
|
|
font-size: 80%;
|
|
position: relative;
|
|
top: -.6rem;
|
|
content: "e";
|
|
}
|
|
|
|
.sheet-rolltemplate-stat-check .sheet-success,
|
|
.sheet-rolltemplate-attack .sheet-success,
|
|
.sheet-rolltemplate-shield-rush .sheet-success,
|
|
.sheet-rolltemplate-cast-spell .sheet-success
|
|
{
|
|
font-weight: bold;
|
|
color: green;
|
|
}
|
|
|
|
.sheet-rolltemplate-stat-check .sheet-failure,
|
|
.sheet-rolltemplate-cast-spell .sheet-failure,
|
|
.sheet-rolltemplate-shield-rush .sheet-failure,
|
|
.sheet-rolltemplate-attack .sheet-failure
|
|
{
|
|
font-weight: bold;
|
|
color: red;
|
|
}
|
|
|
|
.sheet-rolltemplate-attack .sheet-keyvalue span:first-child,
|
|
.sheet-rolltemplate-hth-reaction .sheet-keyvalue span:first-child,
|
|
.sheet-rolltemplate-shield-rush .sheet-keyvalue span:first-child,
|
|
.sheet-rolltemplate-cast-spell .sheet-keyvalue span:first-child,
|
|
.sheet-rolltemplate-description .sheet-keyvalue span:first-child,
|
|
.sheet-rolltemplate-initiative .sheet-keyvalue span:first-child,
|
|
.sheet-rolltemplate-turnorder .sheet-keyvalue span:first-child
|
|
{
|
|
font-weight: 550;
|
|
}
|
|
|
|
.sheet-rolltemplate-attack .sheet-description,
|
|
.sheet-rolltemplate-cast-spell .sheet-description,
|
|
.sheet-rolltemplate-description .sheet-description,
|
|
.sheet-rolltemplate-turnorder .sheet-description
|
|
{
|
|
font-style: italic;
|
|
}
|
|
|
|
.sheet-rolltemplate-hth-reaction .sheet-description
|
|
{
|
|
font-style: normal;
|
|
}
|
|
|
|
.sheet-rolltemplate-stat-check .sheet-capitalize,
|
|
.sheet-rolltemplate-attack .sheet-capitalize,
|
|
.sheet-rolltemplate-cast-spell .sheet-capitalize,
|
|
.sheet-rolltemplate-turnorder .sheet-capitalize,
|
|
.sheet-rolltemplate-description .sheet-capitalize
|
|
{
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
/* Main Sheet */
|
|
|
|
.sheet-tabstoggle[value="character"] ~ div.sheet-character,
|
|
.sheet-tabstoggle[value="journal"] ~ div.sheet-journal {
|
|
display: block;
|
|
}
|
|
|
|
.charsheet .sheet-grid-section{
|
|
display: grid;
|
|
grid-template-columns: auto auto auto;
|
|
grid-template-rows: auto auto auto auto auto auto;
|
|
grid-template-areas:
|
|
"namelvl namelvl talents"
|
|
"stats combat talents"
|
|
"attack attack talents"
|
|
"weapons weapons weapons"
|
|
"spells spells spells"
|
|
"armor armor armor"
|
|
"equip equip equip";
|
|
grid-gap: 5px;
|
|
}
|
|
|
|
.charsheet div.sheet-block{
|
|
display: grid;
|
|
padding: 5px;
|
|
border: 3px solid black;
|
|
background-color: #E8EBF1;
|
|
}
|
|
|
|
/* the main colors */
|
|
body.sheet-darkmode .charsheet div.sheet-block {
|
|
border-color: black;
|
|
/*background-color: #2E2F30;*/
|
|
background-color: #272730;
|
|
}
|
|
|
|
.charsheet div.sheet-namelvl{
|
|
grid-area: namelvl;
|
|
line-height: 3.25rem;
|
|
}
|
|
.charsheet div.sheet-stats{
|
|
grid-area: stats;
|
|
line-height: 3rem;
|
|
}
|
|
.charsheet div.sheet-combat{
|
|
grid-area: combat;
|
|
line-height: 3rem;
|
|
}
|
|
.charsheet div.sheet-talents{
|
|
grid-area: talents;
|
|
}
|
|
.charsheet div.sheet-attack{
|
|
grid-area: attack;
|
|
}
|
|
.charsheet div.sheet-weapons{
|
|
grid-area: weapons;
|
|
}
|
|
.charsheet div.sheet-armor{
|
|
grid-area: armor;
|
|
}
|
|
.charsheet div.sheet-spells{
|
|
grid-area: spells;
|
|
}
|
|
.charsheet div.sheet-equip{
|
|
grid-area: equip;
|
|
}
|
|
|
|
.charsheet .sheet-grid-section-journal{
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
grid-template-rows: auto auto auto;
|
|
grid-template-areas:
|
|
"pointhistory"
|
|
"notes"
|
|
"otherspells";
|
|
grid-gap: 5px;
|
|
}
|
|
.charsheet div.sheet-pointhistory{
|
|
grid-area: pointhistory;
|
|
}
|
|
.charsheet div.sheet-otherspells{
|
|
grid-area: otherspells;
|
|
}
|
|
.charsheet div.sheet-notes{
|
|
grid-area: notes;
|
|
}
|
|
|
|
.charsheet div.sheet-namelvl,
|
|
.charsheet div.sheet-combat,
|
|
.charsheet div.sheet-stats,
|
|
.charsheet div.sheet-talents,
|
|
.charsheet div.sheet-attack,
|
|
.charsheet div.sheet-weapons,
|
|
.charsheet div.sheet-armor,
|
|
.charsheet div.sheet-spells,
|
|
.charsheet div.sheet-equip,
|
|
.charsheet div.sheet-notes,
|
|
.charsheet div.sheet-otherspells,
|
|
.charsheet div.sheet-pointhistory {
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
/* The two things at the top */
|
|
.charsheet div.sheet-namelvl,
|
|
.charsheet div.sheet-pointhistory{
|
|
border-top-left-radius: 0rem;
|
|
}
|
|
|
|
.charsheet .sheet-toggle ~ .sheet-toggle-checked {
|
|
display: none;
|
|
}
|
|
.charsheet .sheet-toggle ~ .sheet-toggle-unchecked {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
.charsheet .sheet-toggle:checked ~ .sheet-toggle-checked {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
.charsheet .sheet-toggle:checked ~ .sheet-toggle-unchecked {
|
|
display: none;
|
|
}
|
|
|
|
.charsheet .sheet-tabrow {
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
.charsheet .sheet-selected-tab,
|
|
.charsheet .sheet-unselected-tab,
|
|
.charsheet .sheet-stub-tab {
|
|
border-radius: 5px 5px 0px 0px;
|
|
border-width: 3px;
|
|
border-bottom-width: 0;
|
|
border-style: solid;
|
|
font-style: italic;
|
|
}
|
|
|
|
.charsheet .sheet-stub-tab {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.charsheet .sheet-unselected-tab {
|
|
color: grey;
|
|
border-color: grey;
|
|
background-color: white;
|
|
}
|
|
|
|
body.sheet-darkmode .charsheet .sheet-unselected-tab {
|
|
color: darkgrey;
|
|
background-color: #505050;
|
|
border-color: black;
|
|
}
|
|
|
|
.charsheet .sheet-selected-tab {
|
|
padding-bottom: 4px; /* Make it ovewrite the border */
|
|
border-color: black;
|
|
color: black;
|
|
background-color: #E8EBF1;
|
|
}
|
|
|
|
body.sheet-darkmode .charsheet .sheet-selected-tab {
|
|
color: white;
|
|
border-color: black;
|
|
background-color: #272730;
|
|
}
|
|
|
|
/* Make the button after the checked radio button be blue */
|
|
/* See we actually hide the checkbox, but make a button after it */
|
|
.charsheet .sheet-caption-checkbox:checked + button,
|
|
.charsheet .sheet-select-radio:checked + button,
|
|
.charsheet .sheet-checkbox-checkbox:checked + button {
|
|
background-color: #0060ff;
|
|
}
|
|
.charsheet .sheet-caption-checkbox:checked + button:hover,
|
|
.charsheet .sheet-select-radio:checked + button:hover,
|
|
.charsheet .sheet-checkbox-checkbox:checked + button:hover {
|
|
background-color: blue;
|
|
}
|
|
|
|
body.sheet-darkmode .charsheet .sheet-caption-checkbox:checked + button,
|
|
body.sheet-darkmode .charsheet .sheet-checkbox-checkbox:checked + button,
|
|
body.sheet-darkmode .charsheet .sheet-select-radio:checked + button {
|
|
background-color: #0075FF;
|
|
}
|
|
body.sheet-darkmode .charsheet .sheet-caption-checkbox:checked + button:hover,
|
|
body.sheet-darkmode .charsheet .sheet-checkbox-checkbox:checked + button:hover,
|
|
body.sheet-darkmode .charsheet .sheet-select-radio:checked + button:hover {
|
|
background-color: blue;
|
|
}
|
|
|
|
.charsheet .sheet-checkbox-checkbox:checked + button::after {
|
|
/*content: "3"; 3 is check*/
|
|
content: "*"; /* x */
|
|
position: relative;
|
|
right: .4rem;
|
|
bottom: .4rem;
|
|
}
|
|
|
|
/* the Caption button. */
|
|
.charsheet .sheet-caption-checkbox + button {
|
|
color: #0075FF;
|
|
}
|
|
|
|
.charsheet .sheet-caption-checkbox:checked + button {
|
|
color: white;
|
|
}
|
|
|
|
.charsheet .sheet-caption-checkbox + button:hover {
|
|
color: blue;
|
|
background-color: darkgrey;
|
|
}
|
|
.charsheet .sheet-caption-checkbox:checked + button {
|
|
color: white;
|
|
}
|
|
.charsheet .sheet-caption-checkbox:checked + button:hover {
|
|
color: darkgray
|
|
}
|
|
|
|
body.sheet-darkmode .charsheet .sheet-caption-checkbox + button {
|
|
color: #0075FF;
|
|
}
|
|
body.sheet-darkmode .charsheet .sheet-caption-checkbox + button:hover {
|
|
color: blue;
|
|
background-color: black;
|
|
}
|
|
|
|
body.sheet-darkmode .charsheet .sheet-caption-checkbox:checked + button:hover,
|
|
body.sheet-darkmode .charsheet .sheet-caption-checkbox:checked + button {
|
|
color: black;
|
|
}
|
|
|
|
.charsheet .sheet-nowrap {
|
|
white-space : nowrap;
|
|
}
|
|
|
|
/* Flex Stuff */
|
|
.charsheet .sheet-flex-section {
|
|
display: flex;
|
|
gap: .25rem;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.charsheet .sheet-flex {
|
|
flex: 1 1 auto;
|
|
width: 13rem;
|
|
}
|
|
.charsheet .sheet-flex-checkbox {
|
|
align-self: center;
|
|
width: 2rem;
|
|
}
|
|
.charsheet .sheet-flex-buttons-stub {
|
|
width: 6.2rem;
|
|
}
|
|
|
|
.charsheet .sheet-flex-centered
|
|
{
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
::placeholder {
|
|
color: black;
|
|
opacity: .3;
|
|
}
|
|
|
|
body.sheet-darkmode input,
|
|
body.sheet-darkmode textarea {
|
|
color: #B0B0B0;
|
|
background-color : #181819;
|
|
border-color: black;
|
|
}
|
|
|
|
/* Add and Modify styling */
|
|
.charsheet .repcontrol_add,
|
|
.charsheet .repcontrol_edit,
|
|
.charsheet .repcontrol_del {
|
|
display: block;
|
|
margin-top: .3rem;
|
|
box-shadow:none;
|
|
font-size:0.9em;
|
|
padding: .2rem .5rem .2rem .5rem;
|
|
}
|
|
|
|
body.sheet-darkmode .charsheet .repcontrol_add,
|
|
body.sheet-darkmode .charsheet .repcontrol_edit,
|
|
body.sheet-darkmode .charsheet .repcontrol_del {
|
|
background: #2F232F; /* slight dark purple */
|
|
border-color: black;
|
|
color: white;
|
|
}
|
|
|
|
body.sheet-darkmode .charsheet .repcontrol_add:hover,
|
|
body.sheet-darkmode .charsheet .repcontrol_edit:hover,
|
|
body.sheet-darkmode .charsheet .repcontrol_del:hover {
|
|
background-color: #201820;
|
|
|
|
}
|