mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
430 lines
9.1 KiB
CSS
430 lines
9.1 KiB
CSS
.charsheet input {
|
|
display: inline-block;
|
|
width: 160px;
|
|
}
|
|
|
|
.charsheet {
|
|
background-color: white;
|
|
}
|
|
|
|
.charsheet select {
|
|
width: 42px;
|
|
}
|
|
|
|
/* Sections Headers */
|
|
h2, h3 {
|
|
text-align: center;
|
|
}
|
|
|
|
/* General Information Grid */
|
|
.sheet-info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, max-content minmax(7ch, 1fr) minmax(2ch, auto)) max-content minmax(7ch, 1fr);
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-spacer {
|
|
height: 20px;
|
|
}
|
|
|
|
.sheet-info-grid > label {
|
|
width: 12ch;
|
|
margin: 2px 1ch 2px 2px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
padding-right: 0px;
|
|
}
|
|
|
|
.sheet-info-grid > input[type="text"] {
|
|
width: auto;
|
|
border-width: 0 0 1px 0;
|
|
border-radius: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
/* Attributes Grid */
|
|
.sheet-attributes-grid > h3:nth-of-type(1) { grid-column: 1 / span 2; }
|
|
.sheet-attributes-grid > h3:nth-of-type(2) { grid-column: 4 / span 2; }
|
|
.sheet-attributes-grid > h3:nth-of-type(3) { grid-column: 7 / span 2; }
|
|
.sheet-attributes-grid {
|
|
display: grid;
|
|
grid-template-columns:
|
|
repeat(2, max-content max-content minmax(2ch, auto))
|
|
max-content max-content;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-attributes-grid > h4 {
|
|
width: 16ch;
|
|
margin: 2px 1ch 2px 2px;
|
|
}
|
|
|
|
.sheet-attributes-grid .sheet-fake-align {
|
|
display: inline-block;
|
|
width: 14px;
|
|
}
|
|
|
|
/* Abilities Grid */
|
|
.sheet-abilities-grid > h3:nth-of-type(1) { grid-column: 1 / span 2; }
|
|
.sheet-abilities-grid > h3:nth-of-type(2) { grid-column: 4 / span 2; }
|
|
.sheet-abilities-grid > h3:nth-of-type(3) { grid-column: 7 / span 2; }
|
|
.sheet-abilities-grid {
|
|
display: grid;
|
|
grid-template-columns:
|
|
repeat(2, max-content max-content minmax(2ch, auto))
|
|
max-content max-content;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-abilities-grid > h4 {
|
|
width: 16ch;
|
|
margin: 2px 1ch 2px 2px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Advantages Grid */
|
|
.sheet-advantages-grid {
|
|
display: grid;
|
|
grid-template-columns:
|
|
repeat(2, max-content max-content minmax(2ch, auto))
|
|
max-content max-content;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-advantages-grid > h3:nth-of-type(1) { grid-column: 1 / span 2; }
|
|
.sheet-advantages-grid > h3:nth-of-type(2) { grid-column: 4 / span 2; }
|
|
.sheet-advantages-grid > h3:nth-of-type(3) { grid-column: 7 / span 2; }
|
|
.sheet-advantages-grid > .sheet-virtue { grid-column: 7; }
|
|
.sheet-advantages-grid > .sheet-virtue-dots { grid-column: 8; }
|
|
.sheet-advantages-grid > .sheet-virtue.sheet-row2,
|
|
.sheet-advantages-grid > .sheet-virtue.sheet-row2 + .sheet-virtue-dots {
|
|
grid-row: 2 / span 2;
|
|
}
|
|
.sheet-advantages-grid > .sheet-virtue.sheet-row4,
|
|
.sheet-advantages-grid > .sheet-virtue.sheet-row4 + .sheet-virtue-dots {
|
|
grid-row: 4 / span 2;
|
|
}
|
|
.sheet-advantages-grid > .sheet-virtue.sheet-row6,
|
|
.sheet-advantages-grid > .sheet-virtue.sheet-row6 + .sheet-virtue-dots {
|
|
grid-row: 6 / span 2;
|
|
}
|
|
|
|
.sheet-advantages-grid > input[type="text"] {
|
|
width: 16ch;
|
|
border-width: 0 0 1px 0;
|
|
border-radius: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.sheet-advantages-grid h4 {
|
|
width: 16ch;
|
|
margin: 2px 1ch 2px 2px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Other - Traits, Paths, Humanity, Health */
|
|
.sheet-other-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 32%);
|
|
grid-column-gap: 2%;
|
|
}
|
|
|
|
.sheet-other-grid textarea {
|
|
box-sizing: border-box;
|
|
resize: vertical;
|
|
}
|
|
|
|
.sheet-other-grid > div:nth-of-type(3) > div > textarea {
|
|
height: 2.5em;
|
|
}
|
|
|
|
.sheet-other-grid h3 {
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
/* Traits and Paths */
|
|
.sheet-single-col-grid > h3 { grid-column: 1 / span 2; }
|
|
.sheet-single-col-grid {
|
|
display: grid;
|
|
grid-template-columns: max-content max-content;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-single-col-grid > input[type="text"] {
|
|
width: 16ch;
|
|
border-width: 0 0 1px 0;
|
|
border-radius: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
/* Humanity */
|
|
.sheet-humanity {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-humanity > input[type="text"] {
|
|
width: 76%;
|
|
border-width: 0 0 1px 0;
|
|
border-radius: 0;
|
|
padding-bottom: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-humanity .sheet-dots {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-humanity .sheet-dots > .sheet-fake-align {
|
|
display: inline-block;
|
|
width: 15px;
|
|
}
|
|
|
|
/* Willpower */
|
|
.sheet-willpower .sheet-dots,
|
|
.sheet-willpower .sheet-checks {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-willpower .sheet-checks > .sheet-fake-align {
|
|
display: inline-block;
|
|
width: 15px;
|
|
}
|
|
|
|
/* Blood Pool */
|
|
.sheet-bloodpool > .sheet-checks {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-bloodpool > .sheet-checks > .sheet-fake-align {
|
|
display: inline-block;
|
|
width: 14px;
|
|
}
|
|
|
|
.sheet-bloodpool > .sheet-limit {
|
|
text-align: center;
|
|
}
|
|
|
|
/* Dice Pools */
|
|
.sheet-dice-pools-grid > h3 { grid-column: 1 / span 4; }
|
|
.sheet-dice-pools-grid {
|
|
display: grid;
|
|
grid-template-columns: max-content auto auto max-content;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-dice-pools-grid > input[type="checkbox"] {
|
|
opacity: 1;
|
|
position: initial;
|
|
}
|
|
|
|
.sheet-dice-pools-grid > select,
|
|
.sheet-dice-pools-grid > select > option {
|
|
width: 98%;
|
|
}
|
|
|
|
button.sheet-DP1,
|
|
button.sheet-DP2,
|
|
button.sheet-DP2,
|
|
button.sheet-DP3,
|
|
button.sheet-DP4,
|
|
button.sheet-DP5 {
|
|
display: inline;
|
|
}
|
|
|
|
button.sheet-DP1wSpec,
|
|
button.sheet-DP2wSpec,
|
|
button.sheet-DP2wSpec,
|
|
button.sheet-DP3wSpec,
|
|
button.sheet-DP4wSpec,
|
|
button.sheet-DP5wSpec {
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-DP1Spec:checked ~ div > button.sheet-DP1,
|
|
input.sheet-DP2Spec:checked ~ div > button.sheet-DP2,
|
|
input.sheet-DP2Spec:checked ~ div > button.sheet-DP2,
|
|
input.sheet-DP3Spec:checked ~ div > button.sheet-DP3,
|
|
input.sheet-DP4Spec:checked ~ div > button.sheet-DP4,
|
|
input.sheet-DP5Spec:checked ~ div > button.sheet-DP5 {
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-DP1Spec:checked ~ div > button.sheet-DP1wSpec,
|
|
input.sheet-DP2Spec:checked ~ div > button.sheet-DP2wSpec,
|
|
input.sheet-DP2Spec:checked ~ div > button.sheet-DP2wSpec,
|
|
input.sheet-DP3Spec:checked ~ div > button.sheet-DP3wSpec,
|
|
input.sheet-DP4Spec:checked ~ div > button.sheet-DP4wSpec,
|
|
input.sheet-DP5Spec:checked ~ div > button.sheet-DP5wSpec {
|
|
display: inline;
|
|
}
|
|
|
|
/* Health */
|
|
.sheet-health-grid {
|
|
display: grid;
|
|
grid-template-columns: 60% auto auto;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-health-grid > div {
|
|
text-align: center;
|
|
}
|
|
|
|
/* Additional - Stuff that should be reworked or removed */
|
|
.sheet-additional-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 32%);
|
|
grid-column-gap: 2%;
|
|
}
|
|
|
|
.sheet-additional-grid textarea {
|
|
box-sizing: border-box;
|
|
resize: vertical;
|
|
}
|
|
|
|
/* Something */
|
|
div.sheet-col-blessure
|
|
{
|
|
width:calc(100% - 90px);
|
|
}
|
|
|
|
/* Hide actual dot/checkbox */
|
|
input[type="radio"],
|
|
input[type="checkbox"]
|
|
{
|
|
position: absolute;
|
|
opacity: 0;
|
|
width:15px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
/* Styles common to fake dot and checkbox */
|
|
input[type="radio"] + span::before,
|
|
input[type="checkbox"] + span::before
|
|
{
|
|
border: solid 1px #a8a8a8;
|
|
line-height: 14px;
|
|
text-align: middle;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
-moz-box-shadow: 0 0 2px #ccc;
|
|
-webkit-box-shadow: 0 0 2px #ccc;
|
|
box-shadow: 0 0 2px #ccc;
|
|
|
|
background: #f6f6f6;
|
|
background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: -o-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: radial-gradient(#f6f6f6, #dfdfdf);
|
|
}
|
|
|
|
/* Styles unique to fake dot (checked or left of checked) */
|
|
input[type="radio"] + span::before
|
|
{
|
|
content: "•";
|
|
width: 12px;
|
|
height: 12px;
|
|
font-size: 36px;
|
|
|
|
-moz-border-radius: 50%;
|
|
-webkit-border-radius: 50%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Styles unique to fake checkbox (unchecked) */
|
|
input[type="checkbox"] + span::before
|
|
{
|
|
position:relative;
|
|
content: "";
|
|
opacity: .25;
|
|
width: 14px;
|
|
height: 14px;
|
|
font-size: 12px;
|
|
|
|
-moz-border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Styles unique to fake checkbox (checked) */
|
|
input[type="checkbox"]:checked + span::before
|
|
{
|
|
content: "✖";
|
|
color: #a00;
|
|
|
|
-moz-box-shadow: 0 0 2px transparent;
|
|
-webkit-box-shadow: 0 0 2px transparent;
|
|
box-shadow: 0 0 2px transparent;
|
|
}
|
|
|
|
/* Remove dot from all radios _after_ selected one */
|
|
input[type="radio"]:checked ~ input[type="radio"] + span::before
|
|
{
|
|
content: "";
|
|
}
|
|
|
|
input.sheet-used+span::before
|
|
{
|
|
content: "✖";
|
|
width: 12px;
|
|
height: 12px;
|
|
font-size: 12px;
|
|
|
|
-moz-border-radius: 0%;
|
|
-webkit-border-radius: 0%;
|
|
border-radius: 0%;
|
|
}
|
|
|
|
input.sheet-zero:checked + span::before
|
|
{
|
|
opacity: 0;
|
|
}
|
|
|
|
input.sheet-zero:hover + span::before
|
|
{
|
|
opacity: 1;
|
|
}
|
|
|
|
input.sheet-zero+ span::before
|
|
{
|
|
font-size: 12px;
|
|
content: "✖";
|
|
opacity: 0.25;
|
|
}
|
|
|
|
h4.sheet-SCorI1,
|
|
h4.sheet-SCorI2,
|
|
h4.sheet-CorC1,
|
|
h4.sheet-CorC2
|
|
{
|
|
display: block;
|
|
}
|
|
|
|
input.sheet-SCorI1,
|
|
input.sheet-SCorI2,
|
|
input.sheet-CorC1,
|
|
input.sheet-CorC2
|
|
{
|
|
width: 120px;
|
|
}
|
|
|
|
input.sheet-SCorI1:checked ~ h4.sheet-SCorI1,
|
|
input.sheet-SCorI2:checked ~ h4.sheet-SCorI2
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-CorC1:checked ~ h4.sheet-CorC1,
|
|
input.sheet-CorC2:checked ~ h4.sheet-CorC2
|
|
{
|
|
display: none;
|
|
}
|
|
|