mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-09-08 16:12:33 +00:00
NathaTerrien
b4c6a7eabe
New tabbed character sheet, with improved readability, over three tabs : Main (stats, attacks, skills, special abilities), Numenera & Equipment, Advancements & Background. The attributes are the same (so are the macros and API functions), so the campaign can be updated with the new sheet (HTML and CSS) and keep existing character(s).
273 lines
6.4 KiB
CSS
273 lines
6.4 KiB
CSS
.charsheet div,
|
|
.charsheet textarea,
|
|
.charsheet input,
|
|
.charsheet span,
|
|
{
|
|
box-sizing: border-box;
|
|
}
|
|
/* RADIO */
|
|
.charsheet input[type="radio"].sheet-falseRadio
|
|
{
|
|
position: relative;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 70px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
z-index: 9999;
|
|
}
|
|
.charsheet span.sheet-falseRadio {
|
|
position: relative;
|
|
top: -20px;
|
|
left: 0px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
margin-left, margin-right: 2px;
|
|
padding-left, padding-right: 3px;
|
|
width: 70px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
border: none;
|
|
color: #000000;
|
|
background: white; /* #FBFCFC; */
|
|
font-size: 11px;
|
|
text-decoration: none;
|
|
font-weight: normal;
|
|
}
|
|
.charsheet input.sheet-falseRadio:checked + span.sheet-falseRadio
|
|
{
|
|
font-weight: bold;
|
|
color: #000077;
|
|
}
|
|
.charsheet input.sheet-falseRadio:checked + span.sheet-falseRadio::after
|
|
{
|
|
content: '✔';
|
|
}
|
|
/* TABS HANDLING */
|
|
.sheet-desc-show:not(:checked)~.sheet-desc,
|
|
.sheet-macro-text-show:not(:checked)~.sheet-macro-text,
|
|
.sheet-sect-show:not(:checked)~.sheet-sect {
|
|
display:none;
|
|
}
|
|
.charsheet div[class^="sheet-section"] {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
max-height:0;
|
|
overflow: hidden;
|
|
}
|
|
.charsheet div[class^="sheet-npc"] {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
max-height:0;
|
|
overflow: hidden;
|
|
}
|
|
.charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] {
|
|
max-height: 999998px;
|
|
opacity: 1;
|
|
transition: opacity 0.5s linear 0s;
|
|
overflow: auto;
|
|
}
|
|
.charsheet input.sheet-tab {
|
|
width: 180px;
|
|
height: 17px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
opacity: 0;
|
|
z-index: 9999;
|
|
}
|
|
.charsheet span.sheet-tab {
|
|
text-align: center;
|
|
display: inline-block;
|
|
padding-left, padding-right: 3px;
|
|
width: 180px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
margin-left: -185px;
|
|
border: 1px solid #4E686A;
|
|
color: #000000;
|
|
background: lightgrey; /* #FBFCFC; */
|
|
border-radius:6px;
|
|
font-size: 11px;
|
|
}
|
|
.charsheet input.sheet-tab::before {
|
|
content: attr(title);
|
|
text-align: center;
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
background: #4E686A;
|
|
color:white;
|
|
}
|
|
.charsheet input.sheet-tab:checked::before {
|
|
background: #4E686A;
|
|
color:white;
|
|
}
|
|
.charsheet input.sheet-tab1:checked ~ div.sheet-section-pc1,
|
|
.charsheet input.sheet-tab2:checked ~ div.sheet-section-pc2,
|
|
.charsheet input.sheet-tab3:checked ~ div.sheet-section-pc3,
|
|
.charsheet input.sheet-tab4:checked ~ div.sheet-section-npc {
|
|
max-height: 999999px;
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition: opacity 0.5s linear 0s;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
.charsheet input.sheet-tab1:checked + span.sheet-tab1,
|
|
.charsheet input.sheet-tab2:checked + span.sheet-tab2,
|
|
.charsheet input.sheet-tab3:checked + span.sheet-tab3,
|
|
.charsheet input.sheet-tab4:checked + span.sheet-tab4,
|
|
{
|
|
background: #4E686A;
|
|
color: white;
|
|
}
|
|
/* END TABS HANDLING */
|
|
.charsheet span.sheet-heavy {
|
|
font-size: 13px;
|
|
color: #000066;
|
|
font-weight: bold;
|
|
}
|
|
.charsheet label {
|
|
text-align: left;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
font-family: "Verdana";
|
|
vertical-align: middle;
|
|
color: #000000;
|
|
display: inline-block;
|
|
}
|
|
.charsheet input[type=text] {
|
|
margin: 1px 1px 1px 1px;
|
|
width: 100%;
|
|
height: 24px;
|
|
display: inline-block;
|
|
border: 1px solid #4E686A;
|
|
color: #000000;
|
|
text-align: left;
|
|
background: #FBFCFC;
|
|
border-radius:6px;
|
|
font-size: 12px;
|
|
}
|
|
.charsheet input[type=text].boldInput {
|
|
font-weight: bold;
|
|
}
|
|
.charsheet input[type=number] {
|
|
margin: 1px 1px 1px 1px;
|
|
width: 100%;
|
|
display: inline-block;
|
|
height: 24px;
|
|
text-align: right;
|
|
border: 1px solid #4E686A;
|
|
color: #000000;
|
|
background: #FBFCFC;
|
|
border-radius:6px;
|
|
font-size: 12px;
|
|
}
|
|
.charsheet input:disabled {
|
|
margin: 1px 1px 1px 1px;
|
|
display: inline-block;
|
|
height: 24px;
|
|
text-align: right;
|
|
border: 0px;
|
|
color: #000000;
|
|
background: #FBFCFC;
|
|
border-radius:6px;
|
|
font-size: 12px;
|
|
}
|
|
.charsheet input[type=checkbox] {
|
|
margin: 1px 1px 1px 1px;
|
|
display: inline-block;
|
|
border: 1px solid #4E686A;
|
|
color: #000000;
|
|
background: #FBFCFC;
|
|
border-radius:6px;
|
|
font-size: 12px;
|
|
}
|
|
.charsheet select {
|
|
margin: 1px 1px 1px 1px;
|
|
height: 24px;
|
|
display: inline-block;
|
|
border: 1px solid #4E686A;
|
|
color: #000000;
|
|
background: #FBFCFC;
|
|
border-radius:6px;
|
|
font-size: 12px;
|
|
}
|
|
.charsheet textarea {
|
|
margin: 1px 1px 1px 1px;
|
|
resize: vertical;
|
|
display: inline-block;
|
|
text-align: left;
|
|
border: 1px solid #4E686A;
|
|
color: #000000;
|
|
background: #FBFCFC;
|
|
border-radius:6px;
|
|
font-size: 12px;
|
|
}
|
|
.charsheet table td, .charsheet table th {
|
|
border-collapse : collapse;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
font-family: "Verdana";
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
border: 0px solid black;
|
|
padding: 0px;
|
|
color: #000000;
|
|
vertical-align: top;
|
|
}
|
|
.charsheet table td.sheet-tdsmall-center {
|
|
text-align: center;
|
|
font-weight: normal;
|
|
}
|
|
.charsheet table td.sheet-td-left {
|
|
text-align: left;
|
|
font-weight: bold;
|
|
}
|
|
.charsheet table td.sheet-tdsmall-left {
|
|
text-align: left;
|
|
font-weight: normal;
|
|
}
|
|
.charsheet table td.sheet-td-right {
|
|
text-align: right;
|
|
font-weight: bold;
|
|
}
|
|
.charsheet table td.sheet-tdsmall-right {
|
|
text-align: right;
|
|
font-weight: normal;
|
|
}
|
|
.charsheet button {
|
|
display: inline-block;
|
|
box-shadow: 0px 0px 5px 1px #056da1 inset;
|
|
font-size: 12px;
|
|
font-family: "Verdana";
|
|
color: #000066;
|
|
text-align: right;
|
|
}
|
|
.charsheet hr {
|
|
margin: 4px 0 4px 0;
|
|
border: 0;
|
|
height: 1px;
|
|
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(5,109,161,1.75), rgba(0,0,0,0));
|
|
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(5,109,161,1.75), rgba(0,0,0,0));
|
|
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(5,109,161,1.75), rgba(0,0,0,0));
|
|
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(5,109,161,1.75), rgba(0,0,0,0));
|
|
}
|
|
.charsheet hr.sheet-two {
|
|
margin: 4px 4px 4px 4px;
|
|
border: 1px dashed #000066;
|
|
}
|
|
.charsheet {
|
|
box-shadow: 0px 0px 12px 1px #4E686A inset;
|
|
background-image: url("");
|
|
background-color: #FEFEFF;
|
|
background-attachment: fixed;
|
|
font-family: "Verdana";
|
|
font-size: 12px;
|
|
text-align: left;
|
|
color: #000000;
|
|
}
|