mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
360 lines
7.5 KiB
CSS
360 lines
7.5 KiB
CSS
/* Quest board game CSS */
|
|
/* Version 1.0 */
|
|
|
|
|
|
/****************
|
|
*** FONTS ***
|
|
****************/
|
|
|
|
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:wght@300&display=swap');
|
|
|
|
/* end Fonts */
|
|
|
|
|
|
/**************
|
|
** Wrapper **
|
|
**************/
|
|
|
|
.sheet-ept {
|
|
/* max-width: 1100px;
|
|
min-width: 700px; */
|
|
margin: 0;
|
|
padding: 10px 20px;
|
|
background: #f9fbed;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/*****************
|
|
** Typography **
|
|
*****************/
|
|
|
|
h2, span, label, .sheet-label, .sheet-text {
|
|
margin: 0;
|
|
font-family: 'Roboto Condensed', Arial, sans-serif;
|
|
font-size: 18px;
|
|
line-height: 50px;
|
|
font-weight: 200;
|
|
color: #000;
|
|
}
|
|
|
|
h2, h2 span {
|
|
margin: 0 0 20px 0;
|
|
text-transform: uppercase;
|
|
font-weight: 200;
|
|
}
|
|
|
|
.sheet-label {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.sheet-underline {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/******************
|
|
*** LAYAOUT ***
|
|
******************/
|
|
|
|
.sheet-section {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.sheet-skills.sheet-section {
|
|
margin: 40px 0 20px 0;
|
|
}
|
|
|
|
/* FLEXBOX */
|
|
|
|
.sheet-flex-row {
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
.sheet-tab1 {
|
|
padding-left: 16px;
|
|
}
|
|
.sheet-tab2 {
|
|
padding-left: 32px;
|
|
}
|
|
.sheet-tab3 {
|
|
padding-left: 48px;
|
|
}
|
|
|
|
|
|
.sheet-grid-4 {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-template-rows: 100%;
|
|
grid-gap: 0 8px;
|
|
}
|
|
.sheet-grid-4-span-1 {
|
|
grid-column: span 1;
|
|
}
|
|
.sheet-grid-4-span-2
|
|
{
|
|
grid-column: span 2;
|
|
}
|
|
.sheet-grid-4-span-3
|
|
{
|
|
grid-column: span 3;
|
|
}
|
|
.sheet-grid-4-span-4 {
|
|
grid-column: span 4;
|
|
}
|
|
|
|
|
|
/************************
|
|
*** FORM ELEMENTS ***
|
|
************************/
|
|
|
|
.sheet-ept label {
|
|
margin: 0;
|
|
padding: 0 8px 0 0;
|
|
width: auto;
|
|
line-height: 50px;
|
|
}
|
|
|
|
.sheet-extra-space{
|
|
margin: 0 0 20px 0;
|
|
}
|
|
|
|
.sheet-ept input, .sheet-ept textarea, .sheet-ept select, .sheet-worker, .sheet-worker-text {
|
|
border: none;
|
|
margin: 0;
|
|
background: transparent;
|
|
font-family: 'Patrick Hand';
|
|
font-size: 22px;
|
|
/* line-height: 30px; */
|
|
color: #666;
|
|
overflow: visible;
|
|
}
|
|
|
|
.sheet-worker, .sheet-worker-text {
|
|
/* line-height: 50px;
|
|
height: 50px;
|
|
overflow: hidden; */
|
|
line-height: normal;
|
|
height: auto;
|
|
overflow: visible;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-ept input, .sheet-ept select, .sheet-worker, .sheet-worker-text {
|
|
padding: 0 8px;
|
|
border-radius: 0;
|
|
border-bottom: 1.5px solid #000;
|
|
}
|
|
|
|
.sheet-ept select, .sheet-ept input[type="checkbox"], .sheet-checklist input[type="checkbox"] {
|
|
-webkit-appearance:none;
|
|
height: 48px;
|
|
padding: 0;
|
|
}
|
|
|
|
.sheet-ept input[type="checkbox"], .sheet-checklist input[type="checkbox"] {
|
|
width: 18px;
|
|
height: 10px;
|
|
border: 1px solid #000;
|
|
border-radius: 6px;
|
|
margin: 0 10px 0 0;
|
|
}
|
|
.sheet-ept input[type="checkbox"]:checked, .sheet-checklist input[type="checkbox"]:checked {
|
|
background: #000;
|
|
}
|
|
|
|
.sheet-worker, .sheet-item-label, input.sheet-worker {
|
|
border-bottom: 2px dotted #000;
|
|
}
|
|
|
|
.sheet-worker.sheet-thick {
|
|
border-bottom: 4px solid #000;
|
|
}
|
|
|
|
input.sheet-fill, .sheet-fill {
|
|
width: 100%;
|
|
flex-grow: 1;
|
|
overflow: auto;
|
|
}
|
|
|
|
|
|
::placeholder, .sheet-ept input[type=number], .sheet-center, .sheet-worker {
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.sheet-ept .sheet-right, .sheet-ept input[type=number].sheet-right {
|
|
text-align: right;
|
|
justify-content: right;
|
|
}
|
|
.sheet-left {
|
|
text-align: left;
|
|
justify-content: left;
|
|
}
|
|
|
|
.sheet-ept input[type=number].sheet-nospin::-webkit-outer-spin-button,
|
|
.sheet-ept input[type=number].sheet-nospin::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
.sheet-ept input[type="number"].sheet-nospin{
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
|
|
.sheet-hide-input {
|
|
display: none;
|
|
}
|
|
|
|
.repcontrol {
|
|
margin: 15px 0;
|
|
}
|
|
.repcontrol button {
|
|
font-family: 'Roboto Condensed', Arial, sans-serif;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
background: #000;
|
|
border-radius: 16px;
|
|
padding: 5px 5px;
|
|
width: 50px;
|
|
}
|
|
.repcontrol_move {
|
|
background: #000;
|
|
color: #fff;
|
|
padding: 0px 5px;
|
|
width: auto;
|
|
height: auto;
|
|
border-radius: 50px;
|
|
font-size: 14px;
|
|
top: 2px;
|
|
left: -22px;
|
|
position: relative;
|
|
}
|
|
.btn.btn-danger.pictos.repcontrol_del {
|
|
background: transparent;
|
|
border: none;
|
|
color: #f9fbed;
|
|
text-shadow: none;
|
|
}
|
|
.btn.btn-danger.pictos.repcontrol_del:after {
|
|
content: "D";
|
|
color: #cc1e1e;
|
|
font-size: 20px;
|
|
left: 10px;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
/****************
|
|
*** Skills ***
|
|
****************/
|
|
|
|
|
|
/* 1. Skill checkbox list styling + interactions */
|
|
|
|
input.sheet-skill-checkbox {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.sheet-checklist label {
|
|
margin: 0 0 0 8px;
|
|
padding: 0;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
min-width: inherit;
|
|
max-width: inherit;
|
|
}
|
|
|
|
.sheet-checklist input[type="checkbox"]:checked + label {
|
|
font-weight: bold;
|
|
}
|
|
.sheet-checklist .sheet-spell-slots-row input[type="checkbox"]:checked + label {
|
|
font-weight: normal;
|
|
}
|
|
|
|
|
|
/* 2. Profess Skills */
|
|
|
|
/* 2.1 SHOW/HIDE Prof Skills */
|
|
/* hide all prof skills labels */
|
|
.sheet-label-profession-warrior,
|
|
.sheet-label-profession-priest,
|
|
.sheet-label-profession-magicuser {
|
|
display: none;
|
|
}
|
|
/* hide all prof skills */
|
|
.sheet-profession-warrior,
|
|
.sheet-profession-priest,
|
|
.sheet-profession-magicuser,
|
|
.sheet-profession-bonus-spells {
|
|
display: none;
|
|
}
|
|
/* show selected prof skills labels*/
|
|
.sheet-profession-select[value="Warrior"] ~ * .sheet-label-profession-warrior,
|
|
.sheet-profession-select[value="Priest"] ~ * .sheet-label-profession-priest,
|
|
.sheet-profession-select[value="Magic-User"] ~ * .sheet-label-profession-magicuser{
|
|
display: block;
|
|
}
|
|
/* show selected prof skills */
|
|
.sheet-profession-select[value="Warrior"] ~ * .sheet-profession-warrior,
|
|
.sheet-profession-select[value="Priest"] ~ * .sheet-profession-priest,
|
|
.sheet-profession-select[value="Priest"] ~ * .sheet-profession-bonus-spells,
|
|
.sheet-profession-select[value="Magic-User"] ~ * .sheet-profession-magicuser,
|
|
.sheet-profession-select[value="Magic-User"] ~ * .sheet-profession-bonus-spells{
|
|
display: block;
|
|
}
|
|
|
|
|
|
/************************
|
|
*** Play / Edit Mode ***
|
|
*************************/
|
|
|
|
/* 1. Skills */
|
|
|
|
/* Hide number-of-skills section */
|
|
.sheet-skills-switch-edit-play:checked + .sheet-number-of-skills {
|
|
display: none;
|
|
}
|
|
/* Play mode: hide unchecked skills */
|
|
.sheet-skills-switch-edit-play:checked ~ * .sheet-skill-set .sheet-skill-checkbox:not(:checked) + label {
|
|
display: none;
|
|
}
|
|
|
|
/* Play mode: hide all checkboxes and remove left margin */
|
|
.sheet-skills-switch-edit-play:checked ~ * .sheet-skill-set input {
|
|
display: none;
|
|
}
|
|
.sheet-skills-switch-edit-play:checked ~ * .sheet-skill-set .sheet-spell-slot {
|
|
display: inline-block;
|
|
}
|
|
.sheet-skills-switch-edit-play:checked ~ * .sheet-checklist label {
|
|
margin-left: 0;
|
|
}
|
|
/* Hide skills set borders */
|
|
.sheet-skills-switch-edit-play:checked ~ * .sheet-checklist .sheet-skill-set {
|
|
border: none;
|
|
}
|
|
|
|
/* Play mode: Set bottom boarders */
|
|
.sheet-skills-switch-edit-play:checked ~ * .sheet-plebian .sheet-checklist .sheet-skill-checkbox:checked + .sheet-skill-label,
|
|
.sheet-skills-switch-edit-play:checked ~ * .sheet-skilled .sheet-checklist .sheet-skill-checkbox:checked + .sheet-skill-label,
|
|
.sheet-skills-switch-edit-play:checked ~ * .sheet-noble .sheet-checklist .sheet-skill-checkbox:checked + .sheet-skill-label {
|
|
border-bottom: 1.5px solid black;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Put in Correct Professional Bottom Borders for Languages + Spells */
|
|
.sheet-skills-switch-edit-play:checked ~ * .sheet-prof-level-2.sheet-spell-slots-row {
|
|
margin: 0;
|
|
padding: .75px 0 .75px 26px;
|
|
border-bottom: 1.5px solid black;
|
|
}
|
|
.sheet-skills-switch-edit-play:checked ~ * .sheet-language-checkbox:checked + .sheet-skill-set {
|
|
margin: 0;
|
|
padding: .75px 0;
|
|
border-bottom: 1.5px solid black;
|
|
}
|