mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
lithl
7e2428101b
In FFX, repeating items with flexboxes below floating content weren't beginning below the floated content. Additionally, "header" widths for several repeating sections had incorrect widths, and intimacy repitems weren't flowing correctly..
624 lines
16 KiB
CSS
624 lines
16 KiB
CSS
.sheet-rolltemplate-joinbattle > div > img,
|
|
.sheet-rolltemplate-joindebate > div > img,
|
|
.sheet-rolltemplate-joinwar > div > img {
|
|
height: 45px;
|
|
float: left;
|
|
margin: 3px;
|
|
}
|
|
|
|
.sheet-rolltemplate-attack > div,
|
|
.sheet-rolltemplate-damage > div {
|
|
background-image: url(http://i.imgur.com/X0RX9Qu.png);
|
|
background-size: contain;
|
|
background-position: right center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.sheet-rolltemplate-damage > div { background-image: url(http://i.imgur.com/t9YYFMu.png); }
|
|
|
|
.sheet-rolltemplate-joinbattle > div > h3,
|
|
.sheet-rolltemplate-joindebate > div > h3,
|
|
.sheet-rolltemplate-joinwar > div > h3,
|
|
.sheet-rolltemplate-attack > div > h3,
|
|
.sheet-rolltemplate-damage > div > h3 {
|
|
color: #d6c110;
|
|
font-style: italic;
|
|
text-align: left;
|
|
}
|
|
|
|
.sheet-rolltemplate-joindebate > div > h3 { color: #90c1a5; }
|
|
.sheet-rolltemplate-joinwar > div > h3 { color: #f69010; }
|
|
.sheet-rolltemplate-attack > div > h3 { color: #d63010; }
|
|
.sheet-rolltemplate-damage > div > h3 { color: #b39d9c; }
|
|
|
|
.sheet-rolltemplate-attack h3.sheet-unnamed,
|
|
.sheet-rolltemplate-damage h3.sheet-unnamed { text-align: center; }
|
|
|
|
.sheet-rolltemplate-joinbattle > div > div,
|
|
.sheet-rolltemplate-joindebate > div > div,
|
|
.sheet-rolltemplate-joinwar > div > div,
|
|
.sheet-rolltemplate-attack > div > div,
|
|
.sheet-rolltemplate-damage > div > div {
|
|
text-align: right;
|
|
}
|
|
|
|
.sheet-rolltemplate-joinbattle > div,
|
|
.sheet-rolltemplate-joindebate > div,
|
|
.sheet-rolltemplate-joinwar > div,
|
|
.sheet-rolltemplate-attack > div,
|
|
.sheet-rolltemplate-damage > div {
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-damage span.sheet-minimum + span.sheet-regular { display: none; }
|
|
.sheet-rolltemplate-damage span.sheet-damage-type {
|
|
display: inline-block;
|
|
font-weight: bolder;
|
|
text-transform: lowercase;
|
|
font-variant: small-caps;
|
|
background-color: #88ffff;
|
|
padding: 0 3px 0 3px;
|
|
}
|
|
.sheet-rolltemplate-damage span.sheet-damage-type::first-letter { text-transform: uppercase; }
|
|
|
|
.charsheet
|
|
{
|
|
background-color: #fff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sheet-vspace { margin-top:10px; }
|
|
|
|
h4
|
|
{
|
|
font-weight: 400;
|
|
margin-left: 0;
|
|
}
|
|
|
|
h1,
|
|
hr
|
|
{
|
|
background-image: url(http://i.imgur.com/TwZ84rO.jpg);
|
|
background-position: left 50%;
|
|
background-repeat: repeat-x;
|
|
background-size: auto 10px;
|
|
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
hr { height: 10px; }
|
|
|
|
label { font-size: 16px; }
|
|
|
|
h1 span
|
|
{
|
|
background: #fff;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
img { max-height: 100px; }
|
|
|
|
span.sheet-attribute,
|
|
span.sheet-ability
|
|
{
|
|
display: inline-block;
|
|
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
div.sheet-attribute,
|
|
div.sheet-ability,
|
|
ul.sheet-craft-types li { clear: right; }
|
|
|
|
.sheet-col .sheet-2colrow.sheet-sub2colrow { width: 841px; }
|
|
|
|
.sheet-span2
|
|
{
|
|
margin-left: 0;
|
|
width: 543px;
|
|
}
|
|
|
|
.sheet-charm,
|
|
.sheet-combo,
|
|
.sheet-sorcery,
|
|
.sheet-artifacts,
|
|
.sheet-hearthstones,
|
|
.sheet-languages,
|
|
.sheet-background,
|
|
.sheet-specialty,
|
|
.sheet-intimacy,
|
|
.sheet-merit,
|
|
.sheet-flaw { margin-bottom: 5px; }
|
|
|
|
.sheet-four-lines { height: 11ex; }
|
|
|
|
.sheet-three-lines { height: 8ex; }
|
|
|
|
.sheet-two-lines { height: 5ex; }
|
|
|
|
.sheet-regular { width: 120px; }
|
|
|
|
.sheet-narrow { width: 80px; }
|
|
|
|
.sheet-very-narrow { width: 40px; }
|
|
|
|
.sheet-span-header
|
|
{
|
|
display: inline-block;
|
|
|
|
font-size: 110%;
|
|
font-weight: 700;
|
|
|
|
margin: 0;
|
|
padding: 4px;
|
|
}
|
|
|
|
.sheet-2colrow.sheet-span2 .sheet-col { width: 250px; }
|
|
|
|
.sheet-2colrow.sheet-span2 .sheet-col .sheet-span-header:first-child { width: 200px; }
|
|
|
|
[data-groupname=repeating_attack] div:not(:first-child) .sheet-attack { border-top: 1px solid #ccc; }
|
|
|
|
[data-groupname=repeating_intimacies] .repitem:nth-child(even) { margin-left: 40px; }
|
|
|
|
.sheet-combat-equipment .sheet-weapons
|
|
{
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.sheet-weapons .sheet-rolls { padding: 5px; }
|
|
|
|
.sheet-weapons span
|
|
{
|
|
border-right: 1px solid #000;
|
|
border-top: 3px solid #000;
|
|
}
|
|
|
|
.sheet-weapons span:first-of-type,
|
|
.sheet-weapons .sheet-rolls,
|
|
.sheet-weapons .sheet-attack input:first-of-type { border-left: 3px solid #000; }
|
|
|
|
.sheet-weapons span:last-of-type,
|
|
.sheet-weapons .sheet-rolls,
|
|
.sheet-weapons .sheet-attack input:last-of-type { border-right: 3px solid #000; }
|
|
|
|
.sheet-weapons .sheet-attack select
|
|
{
|
|
height: 28px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.sheet-weapons .sheet-attack input,
|
|
.sheet-weapons .sheet-attack select
|
|
{
|
|
border: 1px solid #000;
|
|
border-left: none;
|
|
border-radius: 0;
|
|
|
|
margin: 0;
|
|
}
|
|
|
|
.repcontainer[data-groupname=repeating_attacks] .repitem:last-child .sheet-rolls { border-bottom: 3px solid #000; }
|
|
|
|
.repcontainer[data-groupname=repeating_merits],
|
|
.repcontainer[data-groupname=repeating_flaws],
|
|
.repcontainer[data-groupname=repeating_charms],
|
|
.repcontainer[data-groupname=repeating_combos],
|
|
.repcontainer[data-groupname=repeating_sorcery],
|
|
.repcontainer[data-groupname=repeating_artifacts],
|
|
.repcontainer[data-groupname=repeating_hearthstones] { clear: left; }
|
|
|
|
.repcontainer[data-groupname=repeating_intimacies] .repitem { width: calc(50% - 20px); }
|
|
|
|
.sheet-weapons .repcontrol { width: 400px; }
|
|
|
|
.sheet-anima:first-of-type > tbody > tr > td:last-child,
|
|
.sheet-anima:last-of-type > thead > tr:last-child > th:last-child,
|
|
.sheet-anima:last-of-type > tbody > tr > td:first-child { padding-left: 10px; }
|
|
|
|
.sheet-anima:last-of-type { margin-top: 30px; }
|
|
|
|
.sheet-anima:last-of-type > thead > tr > td { width: 70px; }
|
|
|
|
.sheet-anima th
|
|
{
|
|
font-size: 18px;
|
|
text-align: left;
|
|
}
|
|
|
|
.sheet-anima td { font-weight: 700; }
|
|
|
|
.sheet-anima > thead > tr:first-child > th { font-size: 20px; }
|
|
|
|
.sheet-familiar-attacks > thead > tr > th:first-child { text-align: left; }
|
|
|
|
label,
|
|
.sheet-background,
|
|
.sheet-charm,
|
|
.sheet-combo,
|
|
.sheet-sorcery,
|
|
.sheet-artifacts,
|
|
.sheet-hearthstones,
|
|
.sheet-languages,
|
|
.sheet-specialty,
|
|
.sheet-intimacy,
|
|
.sheet-familiar-row,
|
|
.sheet-merit,
|
|
.sheet-flaw
|
|
{
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-background input[type=text],
|
|
.sheet-charm input,
|
|
.sheet-combo input:not(.sheet-narrow),
|
|
.sheet-sorcery input:not(.sheet-regular):not(.sheet-narrow),
|
|
.sheet-artifacts input,
|
|
.sheet-hearthstones input[type=text],
|
|
.sheet-languages input[type=text],
|
|
.sheet-specialty input[type=text],
|
|
.sheet-intimacy > input,
|
|
.sheet-merit input[type=text],
|
|
.sheet-flaw input[type=text],
|
|
label input,
|
|
label select
|
|
{
|
|
-webkit-flex: 1 1 auto;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.sheet-intimacy > input { max-width: 220px; }
|
|
|
|
.sheet-intimacy .sheet-dots { width: 185px; }
|
|
|
|
.sheet-sorcery .sheet-wide-flex,
|
|
.sheet-artifacts .sheet-wide-flex,
|
|
.sheet-hearthstones .sheet-wide-flex
|
|
{
|
|
-webkit-flex: 70%;
|
|
flex: 70%;
|
|
}
|
|
|
|
.sheet-sorcery input,
|
|
.sheet-artifacts input,
|
|
.sheet-artifacts select,
|
|
.sheet-hearthstones input,
|
|
.sheet-hearthstones select,
|
|
.sheet-charm select,
|
|
.sheet-charm input,
|
|
.sheet-combo input,
|
|
.sheet-merit input[type=text],
|
|
.sheet-flaw input[type=text] { margin-right: 5px; }
|
|
|
|
.sheet-artifacts select,
|
|
.sheet-hearthstones select:not(:first-of-type) { font-size: 21px; }
|
|
|
|
label span
|
|
{
|
|
-webkit-flex: 0 1 auto;
|
|
flex: 0 1 auto;
|
|
|
|
margin-right: 20px;
|
|
}
|
|
|
|
ul.sheet-craft-types
|
|
{
|
|
-moz-border-radius: 5px;
|
|
-webkit-border-radius: 5px;
|
|
border-radius: 5px;
|
|
border: 1px solid #3f8ff3;
|
|
|
|
background-color: #fefefe;
|
|
display: none;
|
|
list-style-type: none;
|
|
padding: 5px;
|
|
position: absolute;
|
|
width: 190px;
|
|
z-index: 5;
|
|
}
|
|
|
|
div.sheet-craft-types:hover ul.sheet-craft-types + div { opacity: 0.4; }
|
|
|
|
label input[type=text],
|
|
label:not(.sheet-dv) input[type=number],
|
|
label select,
|
|
.sheet-background > input,
|
|
.sheet-charm input,
|
|
.sheet-charm select,
|
|
.sheet-combo input,
|
|
.sheet-sorcery input,
|
|
.sheet-artifacts input,
|
|
.sheet-artifacts select,
|
|
.sheet-hearthstones > input,
|
|
.sheet-hearthstones select,
|
|
.sheet-languages input[type=text],
|
|
.sheet-specialty input[type=text],
|
|
.sheet-intimacy > input,
|
|
.sheet-familiar-health-row select,
|
|
.sheet-merit input,
|
|
.sheet-flaw input,
|
|
.sheet-familiar-attacks > tbody > tr > td > input,
|
|
.sheet-health-label,
|
|
.sheet-health-value,
|
|
.sheet-essence input:not([disabled]),
|
|
.sheet-fancy
|
|
{
|
|
-moz-box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
|
|
background: transparent;
|
|
|
|
border: 0;
|
|
border-bottom: 1px solid #000;
|
|
border-radius: 0;
|
|
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.sheet-charm select,
|
|
.sheet-artifacts select,
|
|
.sheet-hearthstones select { margin-bottom: 0; }
|
|
|
|
label input:focus,
|
|
label.sheet-essence input:focus,
|
|
label.sheet-soak input:focus,
|
|
.sheet-background > input:focus,
|
|
.sheet-charm input:focus,
|
|
.sheet-combo input:focus,
|
|
.sheet-sorcery input:focus,
|
|
.sheet-artifacts input:focus,
|
|
.sheet-hearthstones > input:focus,
|
|
.sheet-languages input[type=text]:focus,
|
|
.sheet-specialty input[type=text]:focus,
|
|
.sheet-intimacy > input:focus,
|
|
.sheet-merit input:focus,
|
|
.sheet-flaw input:focus,
|
|
.sheet-familiar-attacks > tbody > tr > td > input:focus,
|
|
.sheet-essence input:focus,
|
|
.sheet-armor > label > input:focus,
|
|
.sheet-familiar-row > label > input:focus,
|
|
.sheet-fancy:focus { box-shadow: rgba(83, 167, 235, 0.466667) 0 0 6px 0; }
|
|
|
|
.sheet-soak,
|
|
.sheet-dv
|
|
{
|
|
display: inline-block;
|
|
max-width: 70px;
|
|
}
|
|
|
|
.sheet-dv { max-width: 100px; }
|
|
|
|
.sheet-essence label:not(.sheet-committed),
|
|
.sheet-essence input[type=number]
|
|
{
|
|
display: inline;
|
|
padding-right: 0;
|
|
}
|
|
|
|
input[type=radio],
|
|
input[type=checkbox]
|
|
{
|
|
cursor: pointer;
|
|
|
|
top: 5px;
|
|
left: 6px;
|
|
width: 16px;
|
|
height: 16px;
|
|
|
|
margin: -10px;
|
|
opacity: 0;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
input[type=radio] + span::before,
|
|
input[type=checkbox] + span::before
|
|
{
|
|
-moz-box-shadow: 0 0 2px #ccc;
|
|
-webkit-box-shadow: 0 0 2px #ccc;
|
|
box-shadow: 0 0 2px #ccc;
|
|
|
|
background: radial-gradient(#f6f6f6,#dfdfdf);
|
|
border: solid 1px #a8a8a8;
|
|
display: inline-block;
|
|
line-height: 14px;
|
|
margin-right: 4px;
|
|
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
input[type=radio] + span::before
|
|
{
|
|
-moz-border-radius: 50%;
|
|
-webkit-border-radius: 50%;
|
|
border-radius: 50%;
|
|
|
|
content:" •";
|
|
font-size: 24px;
|
|
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
input[type=checkbox] + span::before
|
|
{
|
|
-moz-border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
|
|
content: "";
|
|
font-size: 12px;
|
|
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.sheet-dots input[type=checkbox]:first-child + span::before { opacity: 0.3; }
|
|
|
|
.sheet-ability input[type=checkbox]:first-child:checked + span::before,
|
|
.sheet-attribute input[type=checkbox]:first-child:checked + span::before,
|
|
.sheet-will input[type=checkbox]:checked + span::before,
|
|
.sheet-hearthstones input[type=checkbox]:checked + span::before,
|
|
.sheet-languages input[type=checkbox]:checked + span::before,
|
|
.sheet-anima input[type=checkbox]:checked + span::before
|
|
{
|
|
-moz-box-shadow: 0 0 2px #ccc;
|
|
-webkit-box-shadow: 0 0 2px #ccc;
|
|
box-shadow: 0 0 2px #ccc;
|
|
|
|
background: radial-gradient(#f6f6f6,#dfdfdf);
|
|
color: #bea000;
|
|
content: "✓";
|
|
}
|
|
|
|
.sheet-hearthstones input[type=checkbox] + span::before
|
|
{
|
|
margin-left: -15px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.sheet-dots input[type=checkbox]:first-child:checked + span::before
|
|
{
|
|
-moz-box-shadow: 0 0 2px transparent;
|
|
-webkit-box-shadow: 0 0 2px transparent;
|
|
box-shadow: 0 0 2px transparent;
|
|
|
|
background: transparent;
|
|
border: solid 1px transparent;
|
|
color: #a00;
|
|
content: "✖";
|
|
}
|
|
|
|
.sheet-dots input[type=checkbox]:first-child:hover:checked + span::before,
|
|
.sheet-ability input[type=checkbox]:first-child + span::before,
|
|
.sheet-attribute input[type=checkbox]:first-child + span::before
|
|
{
|
|
-moz-box-shadow: 0 0 2px #ccc;
|
|
-webkit-box-shadow: 0 0 2px #ccc;
|
|
box-shadow: 0 0 2px #ccc;
|
|
|
|
border: solid 1px #a8a8a8;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.sheet-dots input[type=checkbox]:checked ~ input[type=radio] + span { opacity: 0.5; }
|
|
|
|
.sheet-health-label,.sheet-health-value { width: 45px; }
|
|
|
|
.sheet-familiar-health-row select.sheet-health-value { float: none; }
|
|
|
|
input.sheet-tab
|
|
{
|
|
width: 100px;
|
|
height: 18px;
|
|
|
|
position:inherit;
|
|
}
|
|
|
|
input.sheet-tab:first-of-type { margin-left: 5px; }
|
|
|
|
input.sheet-tab:first-of-type + span::before { margin-left: -85px; }
|
|
|
|
input.sheet-tab + span::before,
|
|
input.sheet-tab:checked ~ input.sheet-tab + span::before
|
|
{
|
|
-moz-border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
|
|
background-color: #cbd600;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#cbd600), to(#d9b84e));
|
|
background-image: -webkit-linear-gradient(top, #cbd600, #d9b84e);
|
|
background-image: -moz-linear-gradient(top, #cbd600, #d9b84e);
|
|
background-image: -ms-linear-gradient(top, #cbd600, #d9b84e);
|
|
background-image: -o-linear-gradient(top, #cbd600, #d9b84e);
|
|
background-image: linear-gradient(to bottom, #cbd600, #d9b84e);
|
|
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#cbd600, endColorstr=#d9b84e);
|
|
|
|
color: #f8f8f8;
|
|
content: attr(title);
|
|
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
|
|
width: 100px;
|
|
height: 18px;
|
|
|
|
margin-left: -90px;
|
|
margin-right: 10px;
|
|
padding-top: 2px;
|
|
|
|
text-shadow: -1px -1px 0 rgba(0,0,0,0.5);
|
|
}
|
|
|
|
input.sheet-tab:checked + span::before
|
|
{
|
|
background-color: #9ba300;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#9ba300), to(#c9a32b));
|
|
background-image: -webkit-linear-gradient(top, #9ba300, #c9a32b);
|
|
background-image: -moz-linear-gradient(top, #9ba300, #c9a32b);
|
|
background-image: -ms-linear-gradient(top, #9ba300, #c9a32b);
|
|
background-image: -o-linear-gradient(top, #9ba300, #c9a32b);
|
|
background-image: linear-gradient(to bottom, #9ba300, #c9a32b);
|
|
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#9ba300, endColorstr=#c9a32b);
|
|
|
|
border: 1px solid #6a7000;
|
|
}
|
|
|
|
.sheet-tab-content { display: none; }
|
|
|
|
.sheet-center,
|
|
h3.sheet-ability,
|
|
h4,
|
|
.sheet-familiar-attacks > tbody > tr > td:nth-child(2),
|
|
.sheet-familiar-attacks > tbody > tr > td:nth-child(3),
|
|
.sheet-familiar-attacks > tbody > tr > td:nth-child(5),
|
|
input[type=number] { text-align: center; }
|
|
|
|
.sheet-right,
|
|
.sheet-background .sheet-dots,
|
|
.sheet-specialty .sheet-dots,
|
|
.sheet-intimacy .sheet-dots { text-align: right; }
|
|
|
|
button[type=roll].sheet-blank-roll-button::before,
|
|
input[type=radio]:not(.sheet-tab):checked ~ input[type=radio] + span::before,
|
|
.sheet-dots input[type=checkbox]:checked ~ input[type=radio] + span::before { content: ""; }
|
|
|
|
span.sheet-attribute + div,
|
|
span.sheet-ability + div,
|
|
.sheet-virtue,
|
|
[data-groupname=repeating_intimacies] .repitem,
|
|
.sheet-combat-equipment .sheet-armor { display: inline-block; }
|
|
|
|
div.sheet-attribute div,
|
|
div.sheet-ability div,
|
|
.sheet-health-value { float: right; }
|
|
|
|
[data-groupname=repeating_charms] .repitem,
|
|
.sheet-anima,
|
|
.sheet-familiar-attacks,
|
|
.sheet-familiar-attacks > tbody > tr > td > input[type=text] { width: 100%; }
|
|
|
|
.repcontrol,
|
|
.sheet-familiar-attacks > tbody > tr:not(:first-child) > td > input { margin-top: 5px; }
|
|
|
|
div.sheet-craft-types:hover ul.sheet-craft-types,
|
|
.sheet-tab[value=statistics]:checked ~ .sheet-statistics-tab,
|
|
.sheet-tab[value=combat]:checked ~ .sheet-combat-tab,
|
|
.sheet-tab[value=magic]:checked ~ .sheet-magic-tab,
|
|
.sheet-tab[value=background]:checked ~ .sheet-background-tab { display: block; }
|
|
|
|
div.sheet-ability > input[type=checkbox]:first-child + span::before,
|
|
.sheet-dots input[type=checkbox]:first-child:hover + span::before,
|
|
.sheet-dots input[type=checkbox]:first-child:checked + span::before { opacity: 1; }
|
|
|
|
div.sheet-attribute > input[type=checkbox]:first-child + span::before,
|
|
.sheet-dots input[type=checkbox]:first-child:hover + span::before,
|
|
.sheet-dots input[type=checkbox]:first-child:checked + span::before { opacity: 1; } |