mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
588 lines
11 KiB
CSS
588 lines
11 KiB
CSS
.charsheet label {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
width: auto;
|
|
color: #333;
|
|
font: inherit
|
|
}
|
|
|
|
/* radios and checks from blades, replace with nwod official below
|
|
.charsheet label input[type=checkbox],
|
|
.charsheet label input[type=radio] {
|
|
position: absolute
|
|
}
|
|
|
|
.charsheet input[type=checkbox],
|
|
.charsheet input[type=radio] {
|
|
opacity: 0;
|
|
z-index: 1;
|
|
-moz-appearance: none;
|
|
position: relative
|
|
}
|
|
*/
|
|
|
|
.charsheet input[type=checkbox]+span,
|
|
.charsheet input[type=radio]+span {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
width: 0;
|
|
}
|
|
|
|
.sheet-hider[value="0"]+li,
|
|
.sheet-hider[value="0"]+div,
|
|
.sheet-hider[value="0"]+label,
|
|
.sheet-hider[value="-1"]+li,
|
|
.sheet-hider[value="-1"]+div,
|
|
.sheet-hider[value="-1"]+label {
|
|
display: none
|
|
}
|
|
|
|
.sheet-tierhider[value="0"] ~ .sheet-tier1,
|
|
.sheet-tierhider[value="0"] ~ .sheet-tier2,
|
|
.sheet-tierhider[value="0"] ~ .sheet-tier3,
|
|
.sheet-tierhider[value="1"] ~ .sheet-tier2,
|
|
.sheet-tierhider[value="1"] ~ .sheet-tier3,
|
|
.sheet-tierhider[value="2"] ~ .sheet-tier3,
|
|
.sheet-tierhider[value="0"] ~ * .sheet-tier1,
|
|
.sheet-tierhider[value="0"] ~ * .sheet-tier2,
|
|
.sheet-tierhider[value="0"] ~ * .sheet-tier3,
|
|
.sheet-tierhider[value="1"] ~ * .sheet-tier2,
|
|
.sheet-tierhider[value="1"] ~ * .sheet-tier3,
|
|
.sheet-tierhider[value="2"] ~ * .sheet-tier3,
|
|
.sheet-tierhider:not([value="0"]) ~ .sheet-tier0,
|
|
.sheet-tierhider:not([value="0"]) ~ * .sheet-tier0
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.sheet-col > .sheet-legend
|
|
{
|
|
margin-bottom:0px;
|
|
}
|
|
|
|
.sheet-settings-checkbox {
|
|
margin-right: 10px;
|
|
width: 20px;
|
|
height: 20px;
|
|
font-size: 16px;
|
|
font-family: pictos
|
|
}
|
|
|
|
.sheet-settings-checkbox input+span {
|
|
opacity: .3
|
|
}
|
|
|
|
.sheet-settings-checkbox input:checked+span {
|
|
opacity: 1
|
|
}
|
|
|
|
.sheet-settings {
|
|
position: absolute;
|
|
right: 30px;
|
|
top: 127px;
|
|
width: 215px;
|
|
border: 1px solid #000;
|
|
background: #fff;
|
|
z-index: 100;
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
flex-wrap: wrap
|
|
}
|
|
|
|
.sheet-settings>div {
|
|
min-width: 50%;
|
|
display: flex;
|
|
flex-grow: 1;
|
|
align-items: center;
|
|
padding: 2px;
|
|
font-size: 10px;
|
|
min-height: 24px;
|
|
line-height: 17px;
|
|
border-bottom: 1px solid #d8d8d8
|
|
}
|
|
|
|
.sheet-flex-container {
|
|
display: flex;
|
|
align-items: baseline;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.sheet-flex-container.sheet-flex-normal{
|
|
align-items: normal;
|
|
}
|
|
|
|
.sheet-flex-container.sheet-stretch{
|
|
align-items: stretch;
|
|
}
|
|
|
|
.sheet-flex-container.sheet-justify-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.sheet-flex-container.sheet-vertical {
|
|
flex-direction: column;
|
|
padding-top: 3px;
|
|
}
|
|
|
|
.sheet-flex-container.sheet-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-flex-container > input[type=text] {
|
|
flex-grow: 1;
|
|
min-width: 10em;
|
|
}
|
|
|
|
.sheet-flex-container > select {
|
|
width: auto;
|
|
margin: 0 .3em 0 0;
|
|
}
|
|
|
|
.sheet-vertical-encroach {
|
|
margin-bottom: -1.25em;
|
|
}
|
|
|
|
.sheet-input-label {
|
|
line-height: 2;
|
|
margin-right: .4em;
|
|
}
|
|
|
|
h2 {
|
|
text-align: center;
|
|
}
|
|
|
|
span.sheet-line{
|
|
border-bottom: 1px solid black;
|
|
flex-grow: 1;
|
|
height: 1em;
|
|
}
|
|
|
|
input[type=text].sheet-line {
|
|
background: transparent;
|
|
border: none;
|
|
border-bottom: 1px solid #000000;
|
|
border-radius: 0;
|
|
height: 1.2em;
|
|
padding: 0 0 0 5px;
|
|
}
|
|
|
|
/* radios/boxes from nwod official */
|
|
|
|
/* Hide actual dot/checkbox */
|
|
input[type="radio"].sheet-normal,
|
|
input[type="checkbox"].sheet-normal,
|
|
.sheet-settings-checkbox input,
|
|
input[type="radio"].sheet-solo,
|
|
.sheet-dropdown input,
|
|
input[type="checkbox"].sheet-expander
|
|
{
|
|
position: relative;
|
|
opacity: 0.0;
|
|
width: 15px;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
margin-top: 5px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Styles common to fake dot and checkbox */
|
|
input[type="radio"].sheet-normal + span::before,
|
|
input[type="checkbox"].sheet-normal + span::before,
|
|
.sheet-permadot::before,
|
|
input[type="radio"].sheet-solo + span::before
|
|
{
|
|
border: solid 1px #000000;
|
|
line-height: 11px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
-moz-box-shadow: 0 0 0px #000;
|
|
-webkit-box-shadow: 0 0 0px #000;
|
|
box-shadow: 0 0 0px #000;
|
|
|
|
background: #000000;
|
|
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);
|
|
|
|
position: relative;
|
|
left: -13px;
|
|
}
|
|
|
|
/* Styles unique to fake dot (checked or left of checked) */
|
|
input[type="radio"].sheet-normal + span::before,
|
|
.sheet-permadot::before,
|
|
input[type="radio"].sheet-solo + span::before
|
|
{
|
|
content: "•";
|
|
width: 10px;
|
|
height: 10px;
|
|
font-size: 41.9px;
|
|
font-family: "Arial";
|
|
text-indent: -2px;
|
|
font-weight: normal;
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-border-radius: 50%;
|
|
-webkit-border-radius: 50%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Styles unique to fake checkbox (unchecked) */
|
|
input[type="checkbox"].sheet-normal + span::before
|
|
{
|
|
position:relative;
|
|
content: "";
|
|
opacity: 1.0;
|
|
width: 10px;
|
|
height: 10px;
|
|
font-size: 12px;
|
|
|
|
-moz-border-radius: 1px;
|
|
-webkit-border-radius: 1px;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
/* Styles unique to fake checkbox (checked) */
|
|
input[type="checkbox"].sheet-normal:checked + span::before
|
|
{
|
|
background:
|
|
linear-gradient(to top left,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) calc(50% - 0.8px),
|
|
rgba(0,0,0,1) 50%,
|
|
rgba(0,0,0,0) calc(50% + 0.8px),
|
|
rgba(0,0,0,0) 100%),
|
|
linear-gradient(to top right,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) calc(50% - 0.8px),
|
|
rgba(0,0,0,1) 50%,
|
|
rgba(0,0,0,0) calc(50% + 0.8px),
|
|
rgba(0,0,0,0) 100%);
|
|
|
|
-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"].sheet-normal + span::before,
|
|
input[type="radio"].sheet-solo:not(:checked) + 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: 0.25;
|
|
font-size: 12px;
|
|
content: "✖";
|
|
text-indent: 0.5px;
|
|
}
|
|
|
|
input.sheet-zero + span::before
|
|
{
|
|
opacity: 0;
|
|
}
|
|
|
|
/* end boxes/radios */
|
|
|
|
table.sheet-attribute-table {
|
|
table-layout: fixed;
|
|
text-align: center;
|
|
width:100%;
|
|
}
|
|
td, th {
|
|
padding: 0 .1em 0 .1em;
|
|
}
|
|
|
|
td:first-child, th:first-child {
|
|
padding: 0 .1em 0 0;
|
|
}
|
|
|
|
td:last-child, th:last-child {
|
|
padding: 0 0 0 .1em;
|
|
}
|
|
|
|
td:only-child, th:only-child {
|
|
padding: 0;
|
|
}
|
|
|
|
td.sheet-fill, td.sheet-fill input{
|
|
width: 100%;
|
|
}
|
|
|
|
table.sheet-attribute-table td, table.sheet-attribute-table th {
|
|
padding: 0 1em 0 1em;
|
|
}
|
|
|
|
table.sheet-attribute-table td:first-child, table.sheet-attribute-table th:first-child {
|
|
padding: 0 1em 0 0;
|
|
}
|
|
|
|
table.sheet-attribute-table td:last-child, table.sheet-attribute-table th:last-child {
|
|
padding: 0 0 0 1em;
|
|
}
|
|
|
|
|
|
table.sheet-attribute-table td>div {
|
|
display: flex;
|
|
}
|
|
|
|
table th {
|
|
text-align: center;
|
|
}
|
|
|
|
table.sheet-attribute-table th:first-child {
|
|
text-align: right;
|
|
}
|
|
|
|
table th {
|
|
text-align: center;
|
|
}
|
|
|
|
td select {
|
|
width: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
.sheet-row > .sheet-col {
|
|
width: 100%;
|
|
}
|
|
|
|
/*fake dropdown*/
|
|
.sheet-dropdown input[type="checkbox"] + span::after
|
|
{
|
|
content: "▾";
|
|
text-align: right;
|
|
margin-left: .3em;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.sheet-dropdown input[type="checkbox"]:checked + span::after
|
|
{
|
|
opacity: 1;
|
|
}
|
|
|
|
input[type="checkbox"].sheet-expander,
|
|
input[type="checkbox"].sheet-expander + span::after
|
|
{
|
|
line-height: 2;
|
|
}
|
|
|
|
input[type="checkbox"].sheet-expander + span::after {
|
|
content: "▼";
|
|
position: relative;
|
|
left: -13px;
|
|
}
|
|
|
|
input[type="checkbox"].sheet-expander:checked + span::after {
|
|
content: "▲";
|
|
}
|
|
|
|
.sheet-dropdown {
|
|
position: relative;
|
|
border: 1px solid #ccc;
|
|
display: inline-block;
|
|
border-radius: 10%;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.sheet-dropdown input {
|
|
width: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.sheet-dropdown > div {
|
|
position: absolute;
|
|
top: 1.2em;
|
|
left: 1.2em;
|
|
border: 1px solid #ccc;
|
|
background: white;
|
|
z-index: 100;
|
|
}
|
|
|
|
.sheet-dropdown span {
|
|
width: auto !important;
|
|
margin: 1px 5px;
|
|
}
|
|
|
|
.sheet-dropdown > div label:not(:last-child) {
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
.sheet-dropdown > div label:hover {
|
|
background: lightgrey;
|
|
}
|
|
|
|
.sheet-knack-guide-rating,
|
|
.sheet-knack-guide-rating + span::before
|
|
{
|
|
display: none !important;
|
|
}
|
|
|
|
input[value="guide"] ~ .sheet-knack-guide-rating,
|
|
input[value="guide"] ~ .sheet-knack-guide-rating + span::before
|
|
{
|
|
display: inline-block !important;
|
|
}
|
|
|
|
textarea {
|
|
height: auto;
|
|
}
|
|
|
|
div.sheet-skills label > span {
|
|
margin-right: 2px;
|
|
}
|
|
|
|
div.sheet-roll
|
|
{
|
|
display:flex;
|
|
width:100%;
|
|
justify-content:space-between;
|
|
flex-wrap:wrap;
|
|
}
|
|
|
|
div.sheet-roll > h3
|
|
{
|
|
display:flex;
|
|
width:100%;
|
|
justify-content:center;
|
|
flex-wrap:wrap;
|
|
}
|
|
|
|
div.sheet-roll > label
|
|
{
|
|
display:flex;
|
|
width:calc(50% - 5px - 15px);
|
|
justify-content:space-between;
|
|
margin:0px;
|
|
padding:0px;
|
|
flex-wrap:wrap;
|
|
}
|
|
|
|
div.sheet-roll > label > h4
|
|
{
|
|
display:flex;
|
|
width:100%;
|
|
justify-content:center;
|
|
}
|
|
|
|
div.sheet-roll > label > select
|
|
{
|
|
display: flex;
|
|
width: 100%;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
div.sheet-roll > button[type="roll"]
|
|
{
|
|
display: flex;
|
|
align-self: end;
|
|
margin: 0px;
|
|
width: 22px;
|
|
height: 22px;
|
|
line-height: 22px;
|
|
font-size: 34px;
|
|
justify-content: center;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
div.sheet-roll > button[type="roll"]::before
|
|
{
|
|
font-family:"dicefontd10";
|
|
content:"j";
|
|
}
|
|
|
|
.sheet-rolltemplate-roll > div
|
|
{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
justify-content:space-between;
|
|
background:white;
|
|
}
|
|
|
|
.sheet-rolltemplate-roll > div > h4
|
|
{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
width:100%;
|
|
justify-content:center;
|
|
}
|
|
|
|
.sheet-rolltemplate-roll > div > span:nth-of-type(1)
|
|
{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
width:calc(50% - 5px);
|
|
justify-content:right;
|
|
}
|
|
|
|
.sheet-rolltemplate-roll > div > span:nth-of-type(3)
|
|
{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
width:calc(50% - 5px);
|
|
justify-content:left;
|
|
}
|
|
|
|
.sheet-rolltemplate-roll > div > span:nth-of-type(2)
|
|
{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
width:5px;
|
|
justify-content:center;
|
|
}
|
|
|
|
.sheet-rolltemplate-roll > div > span:nth-of-type(4)
|
|
{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
width:100%;
|
|
justify-content:center;
|
|
}
|
|
|
|
.sheet-rolltemplate-roll .inlinerollresult
|
|
{
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-roll .inlinerollresult.fullcrit
|
|
{
|
|
border: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-roll .inlinerollresult.fullfail
|
|
{
|
|
border: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-roll .inlinerollresult.importantroll
|
|
{
|
|
border: none;
|
|
} |