mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
1516 lines
27 KiB
CSS
1516 lines
27 KiB
CSS
.ui-dialog .charsheet {
|
|
padding: 0px;
|
|
}
|
|
|
|
|
|
.sheet-main {
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Farsight%20RPG%20Community%20Edition/images/farsight.jpg");
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
min-width: 980px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
/*----------------- TEMPLATE CSS -----------------*/
|
|
|
|
/* configure the tab buttons */
|
|
.sheet-main .pgsheet,
|
|
.sheet-main .npcsheet,
|
|
.sheet-main .vehiclesheet,
|
|
.sheet-main .shipsheet {
|
|
display: none;
|
|
}
|
|
|
|
/* style the active button */
|
|
.sheet-main .sheet-templatetoggle[value="pg"] ~ div .sheet-buttonpg {
|
|
outline: 2px solid red;
|
|
}
|
|
|
|
.sheet-main .sheet-templatetoggle[value="npc"] ~ div .sheet-buttonnpc {
|
|
outline: 2px solid red;
|
|
}
|
|
|
|
.sheet-main .sheet-templatetoggle[value="vehicle"] ~ div .sheet-buttonvehicle {
|
|
outline: 2px solid red;
|
|
}
|
|
|
|
.sheet-main .sheet-templatetoggle[value="ship"] ~ div .sheet-buttonship {
|
|
outline: 2px solid red;
|
|
}
|
|
|
|
/* show the selected tab */
|
|
.sheet-main .sheet-templatetoggle[value="pg"] ~ div.pgsheet,
|
|
.sheet-main .sheet-templatetoggle[value="npc"] ~ div.npcsheet,
|
|
.sheet-main .sheet-templatetoggle[value="vehicle"] ~ div.vehiclesheet,
|
|
.sheet-main .sheet-templatetoggle[value="ship"] ~ div.shipsheet {
|
|
display: block;
|
|
}
|
|
|
|
.template {
|
|
margin-bottom: 10px;
|
|
clip-path: polygon(0 20px,20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px));
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
display: grid;
|
|
grid-template-columns: 900px;
|
|
grid-template-rows: 60px;
|
|
justify-self: center;
|
|
text-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/*----------------- GENERAL CSS ------------------*/
|
|
|
|
.section {
|
|
background-color: #424549;
|
|
clip-path: polygon(0 20px,20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px));
|
|
background: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.sheet-section {
|
|
padding: 5px;
|
|
border-style: solid;
|
|
}
|
|
|
|
.largedialog label{
|
|
width: auto;
|
|
}
|
|
|
|
label.titolosezione {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.repcontainer{
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.repcontrol{
|
|
width: 300px;
|
|
padding-bottom: 25px;
|
|
}
|
|
|
|
.repitem{
|
|
grid-area: repeat-condizioni;
|
|
align-items: center;
|
|
margin-left: 20px;
|
|
margin-bottom: 10px;
|
|
display: grid;
|
|
grid-template-columns: 150px 30px 90px;
|
|
grid-template-areas:
|
|
"titolo roll toggle"
|
|
"descrizione descrizione descrizione";
|
|
}
|
|
|
|
input.titolo{
|
|
grid-area: titolo;
|
|
width: auto;
|
|
}
|
|
|
|
textarea.descrizione{
|
|
grid-area: descrizione;
|
|
max-width: 250px !important;
|
|
height: 80px !important;
|
|
background-color: white;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
input.sheet-toggle-show{
|
|
grid-area: toggle;
|
|
margin-left: 10px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
input.sheet-toggle-show:not(:checked) ~ .descrizione {
|
|
display: none;
|
|
}
|
|
|
|
span.sheet-toggle-show{
|
|
grid-area: toggle;
|
|
margin-left: 25px;
|
|
font-size: 8px;
|
|
}
|
|
|
|
.text-white {
|
|
color: white;
|
|
}
|
|
|
|
.sheet-rolltemplate-base {
|
|
background-color: #424549;
|
|
clip-path: polygon(0 20px,20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px));
|
|
background: rgba(0, 0, 0, 0.3);
|
|
min-height: 60px;
|
|
}
|
|
|
|
.sheet-rolltemplate-base .sheet-template-title {
|
|
color: white;
|
|
text-align: center;
|
|
height: fit-content;
|
|
padding: 20px;
|
|
align-self: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-rolltemplate-base span {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-base .sheet-rolls {
|
|
display: grid;
|
|
grid-template-columns: 45% 45%;
|
|
column-gap: 10%;
|
|
padding-bottom: 20px;
|
|
padding-right: 20px;
|
|
padding-left: 20px;
|
|
grid-auto-rows: 30px;
|
|
}
|
|
|
|
.sheet-rolltemplate-base .sheet-roll-title {
|
|
height: fit-content;
|
|
align-self: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-base .sheet-roll-result {
|
|
height: fit-content;
|
|
align-self: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-base .sheet-roll div:nth-child(odd) {
|
|
text-align: right;
|
|
}
|
|
.sheet-rolltemplate-base .sheet-roll div:nth-child(even) {
|
|
text-align: left;
|
|
}
|
|
|
|
/*------------- Tab CSS ----------------*/
|
|
|
|
/* configure the tab buttons */
|
|
.charsheet .sheet-character, .charsheet .sheet-powers, .charsheet .sheet-biography {
|
|
display: none;
|
|
}
|
|
|
|
/* style the active button */
|
|
.charsheet .sheet-tabstoggle[value="character"] ~ div .sheet-button0 {
|
|
outline: 2px solid red;
|
|
}
|
|
|
|
.charsheet .sheet-tabstoggle[value="powers"] ~ div .sheet-button1 {
|
|
outline: 2px solid red;
|
|
}
|
|
|
|
.charsheet .sheet-tabstoggle[value="biography"] ~ div .sheet-button2 {
|
|
outline: 2px solid red;
|
|
}
|
|
|
|
/* show the selected tab */
|
|
.charsheet .sheet-tabstoggle[value="character"] ~ div.sheet-character,
|
|
.charsheet .sheet-tabstoggle[value="powers"] ~ div.sheet-powers,
|
|
.charsheet .sheet-tabstoggle[value="biography"] ~ div.sheet-biography {
|
|
display: block;
|
|
}
|
|
|
|
.sheet-character {
|
|
grid-area: sheet;
|
|
}
|
|
|
|
.sheet-powers {
|
|
grid-area: sheet;
|
|
}
|
|
|
|
.sheet-biography {
|
|
grid-area: sheet;
|
|
}
|
|
|
|
.pg {
|
|
justify-content: center;
|
|
padding-bottom: 10px;
|
|
display: grid !important;
|
|
min-width: 980px;
|
|
grid-gap: 4px;
|
|
grid-template-columns: 300px 300px 300px ;
|
|
grid-template-rows: 100px 60px auto 135px;
|
|
grid-template-areas:
|
|
"common common header"
|
|
"tabs tabs tabs"
|
|
"sheet sheet sheet"
|
|
"attribution attribution attribution";
|
|
}
|
|
|
|
.character {
|
|
display: grid;
|
|
min-width: 980px;
|
|
grid-gap: 4px;
|
|
grid-template-columns: 300px 300px 300px ;
|
|
grid-template-rows: 350px min-content;
|
|
grid-template-areas:
|
|
"skill health stats"
|
|
"skill attack traits";
|
|
}
|
|
|
|
.powers {
|
|
display: grid;
|
|
min-width: 980px;
|
|
grid-gap: 4px;
|
|
grid-template-columns: 300px 300px 300px ;
|
|
grid-template-rows: min-content;
|
|
grid-template-areas:
|
|
"power power power";
|
|
}
|
|
|
|
.biography {
|
|
display: grid;
|
|
min-width: 980px;
|
|
grid-gap: 4px;
|
|
grid-template-columns: 300px 300px 300px ;
|
|
grid-template-rows: 180px min-content;
|
|
grid-template-areas:
|
|
"inv finance aspect "
|
|
"inv personality aspect";
|
|
}
|
|
|
|
.tabs {
|
|
grid-area: tabs;
|
|
text-align: center;
|
|
align-content: center;
|
|
clip-path: polygon(0 20px,20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px));
|
|
background-color: rgba(0, 0, 0, 0.7)
|
|
}
|
|
|
|
/*------------- Input CSS--------------------------*/
|
|
|
|
input[type="text"] {
|
|
border-style: none none none none;
|
|
border-color: transparent;
|
|
background-color: #E5E7E9;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.ui-dialog .charsheet input[type=text]{
|
|
height: 20px;
|
|
}
|
|
|
|
input[type="number"] {
|
|
border: none;
|
|
background-color: #E5E7E9;
|
|
}
|
|
|
|
input[type="number"].esagono{
|
|
position:absolute;
|
|
overflow:hidden;
|
|
z-index:0;
|
|
height: 50px;
|
|
text-align: center;
|
|
clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
|
|
width: 45px !important;
|
|
height: 45px !important;
|
|
}
|
|
|
|
input[type="number"].esagonosmall{
|
|
margin-top: 10px;
|
|
overflow:hidden;
|
|
z-index:0;
|
|
height: 30px;
|
|
width: 30px !important;
|
|
text-align: center;
|
|
clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
|
|
}
|
|
|
|
button.btn.repcontrol_add{
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
button.btn.repcontrol_edit{
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
|
|
.ui-dialog .charsheet input[type=number].main-skill{
|
|
height:40px;
|
|
margin-left:25px;
|
|
text-align: center;
|
|
}
|
|
|
|
.ui-dialog .charsheet input[type=number].sub-skill{
|
|
height:16px;
|
|
width: 30px;
|
|
text-align: center;
|
|
margin-left:0px;
|
|
}
|
|
|
|
.ui-dialog .charsheet input[type=number].tot-sub-skill{
|
|
height:16px;
|
|
width: 30px;
|
|
text-align: center;
|
|
margin-left:0px;
|
|
}
|
|
|
|
textarea {
|
|
width: 260px;
|
|
height: 80px;
|
|
}
|
|
|
|
input[type="checkbox"]{
|
|
width: 15px;
|
|
}
|
|
|
|
input[type="checkbox"].sheet-checkbox {
|
|
background-image: none;
|
|
}
|
|
|
|
|
|
input[type=number].sheet-ref::-webkit-inner-spin-button, input[type=number].sheet-ref::-webkit-outer-spin-button, input[type=number].sheet-txtfield::-webkit-inner-spin-button, input[type=number].sheet-txtfield::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type=number].sheet-ref, input[type=number].sheet-txtfield {
|
|
appearance: textfield;
|
|
}
|
|
|
|
input[type=number]::-webkit-inner-spin-button{
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type=number]::-webkit-inner-spin-button{
|
|
appearance: textfield;
|
|
}
|
|
|
|
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
|
|
appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
/*------------- Section-specific CSS -------------*/
|
|
|
|
.sheet-header {
|
|
grid-area: header;
|
|
background-image:url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Farsight%20RPG%20Community%20Edition/images/farsight%20logo.png");
|
|
background-size: 90%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.sheet-shortbio {
|
|
align-items: center;
|
|
justify-items: center;
|
|
grid-area: common;
|
|
display: grid;
|
|
grid-template-columns: 300px 150px 150px;
|
|
grid-template-rows: auto;
|
|
grid-template-areas:
|
|
"nome giocatore giocatore"
|
|
"concetto specie classelivello";
|
|
}
|
|
|
|
input[type="text"].nome{
|
|
grid-area: nome;
|
|
width: 250px;
|
|
}
|
|
|
|
input[type="text"].giocatore{
|
|
grid-area: giocatore;
|
|
width: 250px;
|
|
justify-self: left;
|
|
}
|
|
|
|
input[type="text"].concetto{
|
|
grid-area: concetto;
|
|
width: 250px;
|
|
}
|
|
|
|
input[type="text"].specie{
|
|
grid-area: specie;
|
|
width: 140px;
|
|
justify-self: left;
|
|
}
|
|
|
|
div.classelivello{
|
|
grid-area: classelivello;
|
|
justify-self: left;
|
|
}
|
|
|
|
select.classe{
|
|
align-items: center;
|
|
max-width: 65px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
input[type="number"].livello{
|
|
max-width: 65px;
|
|
max-height: 20px;
|
|
}
|
|
|
|
/*--------ATTRIBUTION SECTION------*/
|
|
|
|
.attribuzione {
|
|
grid-area: attribution;
|
|
padding: 25px;
|
|
text-align: justify;
|
|
}
|
|
|
|
/*--------SKILL SECTION---------*/
|
|
.sheet-skill {
|
|
grid-area: skill;
|
|
max-height: 1180px;
|
|
padding-bottom: 25px;
|
|
}
|
|
|
|
.sheet-main-skill{
|
|
margin-top: 20px !important;
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
margin-bottom: 2px;
|
|
text-align: center;
|
|
align-items: center;
|
|
display: grid;
|
|
grid-template-columns: 55px 130px 35px 35px;
|
|
grid-template-rows: 20px;
|
|
grid-gap: 10px;
|
|
grid-template-areas:"input button . tot";
|
|
}
|
|
|
|
.sheet-sub-skill{
|
|
display: grid;
|
|
align-items: center;
|
|
grid-template-columns: 55px 130px 35px 35px;
|
|
grid-gap: 10px;
|
|
grid-template-rows: 16px;
|
|
grid-template-areas:". button input tot";
|
|
margin-top: 2px;
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
input[class="main-skill"]{
|
|
grid-area: input;
|
|
}
|
|
|
|
input[type="number"].main-skill{
|
|
margin-left: 10px !important;
|
|
}
|
|
|
|
button[type="roll"].main-skill.btn.ui-draggable::before{
|
|
content: "";
|
|
border: none;
|
|
grid-area: button;
|
|
font-weight: bold;
|
|
font-size: 15px;
|
|
text-align: center;
|
|
height: 15px;
|
|
width: auto;
|
|
}
|
|
|
|
button[type="roll"].main-skill.btn.ui-draggable{
|
|
border: none;
|
|
font-weight: bold;
|
|
font-size: 15px;
|
|
text-align: center;
|
|
grid-area: button;
|
|
height: 15px;
|
|
width: auto;
|
|
line-height: 15px;
|
|
}
|
|
|
|
label[class="skill-tot"]{
|
|
grid-area: tot;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
margin: 3px !important;
|
|
}
|
|
|
|
input[class="sub-skill"]{
|
|
grid-area: input;
|
|
height: 16px;
|
|
}
|
|
|
|
button[type="roll"].sub-skill.btn.ui-draggable::before{
|
|
content: "";
|
|
border: none;
|
|
font-weight: bold;
|
|
font-size: 10px;
|
|
text-align: center;
|
|
grid-area: button;
|
|
height: 10px;
|
|
width: auto;
|
|
}
|
|
|
|
button[type="roll"].sub-skill.btn.ui-draggable{
|
|
border: none;
|
|
font-weight: bold;
|
|
font-size: 10px;
|
|
text-align: center;
|
|
grid-area: button;
|
|
height: 10px;
|
|
width: auto;
|
|
line-height: 10px;
|
|
}
|
|
|
|
input[class="tot-sub-skill"]{
|
|
grid-area: tot;
|
|
height: 16px;
|
|
}
|
|
|
|
/*---------HEALTH SECTION-----------*/
|
|
.sheet-health {
|
|
grid-area: health;
|
|
}
|
|
|
|
input[type="number"].puntivitalita{
|
|
margin-left: 44px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
label[class="puntivitalita"]{
|
|
position:absolute;
|
|
overflow:hidden;
|
|
z-index:0;
|
|
margin-left: 70px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
input[type="number"].puntivitalitamax{
|
|
margin-left: 20px;
|
|
}
|
|
|
|
label[class="sogliamorte"]{
|
|
position:absolute;
|
|
overflow:hidden;
|
|
z-index:0;
|
|
margin-left: 10px;
|
|
width: 30px;
|
|
line-height: 1;
|
|
font-size: 10px;
|
|
}
|
|
|
|
input[type="number"].sogliamorte{
|
|
margin-top: 44px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.salvezzamorte{
|
|
display: grid;
|
|
grid-template-columns: 150px 75px 75px;
|
|
grid-template-rows: 20px 16px 16px;
|
|
grid-template-areas:
|
|
". salvezzamorte salvezzamorte"
|
|
". labelsuccesso checkboxsuccesso"
|
|
". labelfallimento checkboxfallimento";
|
|
justify-items: flex-start;
|
|
}
|
|
|
|
label[class="salvezzamorte"]{
|
|
grid-area: salvezzamorte;
|
|
font-size: 10px;
|
|
}
|
|
|
|
label[class="successo"]{
|
|
grid-area: labelsuccesso;
|
|
font-size: 10px;
|
|
}
|
|
|
|
input[type="checkbox"].successo-1{
|
|
grid-area: checkboxsuccesso;
|
|
}
|
|
|
|
input[type="checkbox"].successo-2{
|
|
grid-area: checkboxsuccesso;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
input[type="checkbox"].successo-3{
|
|
grid-area: checkboxsuccesso;
|
|
margin-left: 30px;
|
|
}
|
|
|
|
label[class="fallimento"]{
|
|
grid-area: labelfallimento;
|
|
font-size: 10px;
|
|
}
|
|
|
|
input[type="checkbox"].fallimento-1{
|
|
grid-area: checkboxfallimento;
|
|
}
|
|
|
|
input[type="checkbox"].fallimento-2{
|
|
grid-area: checkboxfallimento;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
input[type="checkbox"].fallimento-3{
|
|
grid-area: checkboxfallimento;
|
|
margin-left: 30px;
|
|
}
|
|
|
|
.affaticamento{
|
|
margin-top: 20px;
|
|
display: grid;
|
|
grid-template-columns: 150px 150px;
|
|
grid-template-rows: 20px 16px;
|
|
grid-template-areas:
|
|
". label"
|
|
". checkbox";
|
|
justify-items: flex-start;
|
|
}
|
|
|
|
label[class="affaticamento"]{
|
|
grid-area: label;
|
|
font-size: 10px;
|
|
}
|
|
|
|
input[type="checkbox"].affaticamento-1{
|
|
grid-area: checkbox;
|
|
}
|
|
|
|
input[type="checkbox"].affaticamento-2{
|
|
grid-area: checkbox;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
input[type="checkbox"].affaticamento-3{
|
|
grid-area: checkbox;
|
|
margin-left: 30px;
|
|
}
|
|
|
|
input[type="checkbox"].affaticamento-4{
|
|
grid-area: checkbox;
|
|
margin-left: 45px;
|
|
}
|
|
|
|
input[type="checkbox"].affaticamento-5{
|
|
grid-area: checkbox;
|
|
margin-left: 60px;
|
|
}
|
|
|
|
input[type="checkbox"].affaticamento-6{
|
|
grid-area: checkbox;
|
|
margin-left: 75px;
|
|
}
|
|
|
|
.condizioni{
|
|
display: grid;
|
|
grid-template-columns: 300px;
|
|
grid-template-rows: auto;
|
|
grid-template-areas:
|
|
"label"
|
|
"textarea";
|
|
}
|
|
|
|
label[class="condizioni"]{
|
|
grid-area:label;
|
|
margin-left: 10px;
|
|
font-size: 10px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
textarea[class="textarea"]{
|
|
grid-area: textarea;
|
|
max-width: 260px;
|
|
max-height: 60px;
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
/*----------STATS SECTION------------*/
|
|
|
|
.sheet-stats {
|
|
grid-area: stats;
|
|
}
|
|
|
|
.stats{
|
|
display: grid;
|
|
grid-template-columns: 75px 150px 75px;
|
|
grid-template-rows: 50px;
|
|
grid-template-areas:"left label right";
|
|
align-items: center;
|
|
}
|
|
|
|
label[class="stat right"]{
|
|
grid-area: label;
|
|
align-items: center;
|
|
text-align: end;
|
|
margin-bottom: unset;
|
|
}
|
|
|
|
label[class="stat left"]{
|
|
grid-area: label;
|
|
align-items: center;
|
|
text-align: start;
|
|
margin-bottom: unset;
|
|
}
|
|
|
|
button[type="roll"].stat.btn.ui-draggable{
|
|
grid-area: label;
|
|
background-size: 16px 16px;
|
|
background-repeat: no-repeat;
|
|
border: 1px;
|
|
border-style: solid;
|
|
height: 10px;
|
|
width: 10px;
|
|
margin-left: 70px;
|
|
}
|
|
|
|
button[type="roll"].stat.btn.ui-draggable::before{
|
|
content: "";
|
|
border: 0px;
|
|
grid-area: label;
|
|
height: 15px;
|
|
width: 15px;
|
|
}
|
|
|
|
input[type="number"].stat.right{
|
|
grid-area: right;
|
|
align-items: center;
|
|
position: unset;
|
|
justify-self: center;
|
|
|
|
}
|
|
|
|
input[type="number"].stat.left{
|
|
grid-area: left;
|
|
margin-left: 10px;
|
|
align-items: center;
|
|
position: unset;
|
|
justify-self: center;
|
|
}
|
|
|
|
/*------------ATTACK SECTION-----------*/
|
|
|
|
.sheet-attack {
|
|
grid-area: attack;
|
|
min-height: auto;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
height: min-content;
|
|
}
|
|
|
|
/* Nascondi le righe che non corrispondono alla ricerca */
|
|
.sheet-repeating_attacchi[data-display="none"] {
|
|
display: none;
|
|
}
|
|
|
|
/* Mostra le righe che corrispondono alla ricerca */
|
|
.sheet-repeating_attacchi[data-display="block"] {
|
|
display: block;
|
|
}
|
|
|
|
div.attacchi {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.attacchi input {
|
|
max-height: 20px;
|
|
}
|
|
|
|
select.arma {
|
|
grid-area: titolo;
|
|
width: auto;
|
|
max-height: 20px;
|
|
font-size: 9px;
|
|
margin-bottom: 0px !important;
|
|
}
|
|
|
|
button[type="roll"].attacco.btn.ui-draggable{
|
|
grid-area: roll;
|
|
background-size: 16px 16px;
|
|
background-repeat: no-repeat;
|
|
border: 1px;
|
|
border-style: solid;
|
|
height: 15px;
|
|
width: 15px;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
button[type="roll"].attacco.btn.ui-draggable::before{
|
|
border: 0px;
|
|
grid-area: tiro;
|
|
height: 15px;
|
|
width: 15px;
|
|
}
|
|
|
|
.descrizioneattacco{
|
|
grid-area:descrizione;
|
|
align-items: center;
|
|
display: grid;
|
|
grid-template-columns: 90px 90px 90px;
|
|
grid-template-rows: auto;
|
|
grid-template-areas:
|
|
"bonusattacco danno tipo"
|
|
"portata munizioni ."
|
|
"dettagli dettagli dettagli";
|
|
}
|
|
|
|
div.bonusattacco {
|
|
grid-area: bonusattacco;
|
|
display: grid;
|
|
grid-template-columns: 90px;
|
|
grid-template-rows: 25px 25px;
|
|
grid-template-areas:
|
|
"label"
|
|
"input";
|
|
}
|
|
|
|
div.danno {
|
|
grid-area: danno;
|
|
display: grid;
|
|
grid-template-columns: 90px;
|
|
grid-template-rows: 25px 25px;
|
|
grid-template-areas:
|
|
"label"
|
|
"input";
|
|
}
|
|
|
|
div.tipo {
|
|
grid-area: tipo;
|
|
display: grid;
|
|
grid-template-columns: 90px;
|
|
grid-template-rows: 25px 25px;
|
|
grid-template-areas:
|
|
"label"
|
|
"input";
|
|
}
|
|
|
|
div.portata {
|
|
grid-area: portata;
|
|
display: grid;
|
|
grid-template-columns: 90px;
|
|
grid-template-rows: 25px 25px;
|
|
grid-template-areas:
|
|
"label"
|
|
"input";
|
|
}
|
|
|
|
div.munizioni {
|
|
grid-area: munizioni;
|
|
display: grid;
|
|
grid-template-columns: 90px;
|
|
grid-template-rows: 25px 25px;
|
|
grid-template-areas:
|
|
"label"
|
|
"input";
|
|
}
|
|
|
|
label.bonusattacco{
|
|
grid-area: label;
|
|
align-self: flex-end;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
input[type="number"].bonusattacco{
|
|
grid-area: input;
|
|
width: 80px !important;
|
|
}
|
|
|
|
label.danno{
|
|
grid-area: label;
|
|
align-self: flex-end;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
input[type="text"].danno{
|
|
grid-area: input;
|
|
width: 80px !important;
|
|
}
|
|
|
|
label.munizioni{
|
|
grid-area: label;
|
|
align-self: flex-end;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
input[type="number"].munizioni{
|
|
grid-area: input;
|
|
width: 80px !important;
|
|
}
|
|
|
|
label.portata{
|
|
grid-area: label;
|
|
align-self: flex-end;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
input[type="text"].portata{
|
|
grid-area: input;
|
|
width: 80px !important;
|
|
}
|
|
|
|
label.tipo{
|
|
grid-area: label;
|
|
align-self: flex-end;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
input[type="text"].tipo{
|
|
grid-area: input;
|
|
width: 80px !important;
|
|
}
|
|
|
|
div.dettagli {
|
|
grid-area: dettagli;
|
|
display: grid;
|
|
grid-template-columns: 90px;
|
|
grid-template-rows: 25px 70px;
|
|
grid-template-areas:
|
|
"label"
|
|
"input";
|
|
align-self: flex-start;
|
|
}
|
|
|
|
label.dettagli{
|
|
grid-area: label;
|
|
align-self: flex-end;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
textarea.dettagli{
|
|
grid-area: input;
|
|
width: 250px !important;
|
|
height: 50px !important;
|
|
margin-left: 0px !important;
|
|
}
|
|
|
|
input.sheet-toggle-show:not(:checked) ~ .attacchi {
|
|
display: none;
|
|
}
|
|
|
|
span.sheet-toggle-show{
|
|
grid-area: toggle;
|
|
margin-left: 25px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
/*----------TRAITS SECTION-------------*/
|
|
|
|
|
|
.sheet-traits {
|
|
grid-area: traits;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
height: min-content;
|
|
}
|
|
|
|
/*-----------POWER SECTION-----------*/
|
|
.sheet-power {
|
|
grid-area: power;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
display: grid;
|
|
grid-template-columns: 300px 300px 300px;
|
|
grid-template-rows: 180px min-content min-content min-content;
|
|
grid-template-areas:
|
|
"head head head"
|
|
"praxis illusione metabiosi"
|
|
"metarealta telecinesi telepatia"
|
|
"veggenza . .";
|
|
}
|
|
|
|
.power-head {
|
|
grid-area: head;
|
|
}
|
|
|
|
.power-stats{
|
|
grid-area: head;
|
|
display: grid;
|
|
grid-template-columns: 40px 210px 50px;
|
|
grid-template-rows: 35px;
|
|
grid-template-areas: ". label limite";
|
|
}
|
|
|
|
label[class="puntipsi"]{
|
|
grid-area: label;
|
|
margin-left: 110px;
|
|
margin-bottom: 0px;
|
|
align-self: center;
|
|
}
|
|
|
|
label[class="limitepsionico"]{
|
|
grid-area: limite;
|
|
font-size: 10px;
|
|
text-align: center;
|
|
line-height: 10px;
|
|
margin-bottom: 0px;
|
|
align-self: center;
|
|
}
|
|
|
|
label[class="attaccopsionico"]{
|
|
grid-area: label;
|
|
font-size: 10px;
|
|
margin-left: 5px;
|
|
margin-bottom: 0px;
|
|
align-self: center;
|
|
}
|
|
|
|
label[class=forzapsionica]{
|
|
grid-area: label;
|
|
font-size: 10px;
|
|
margin-left: 25px;
|
|
margin-bottom: 0px;
|
|
align-self: center;
|
|
}
|
|
|
|
input[type="number"].puntipsimax{
|
|
|
|
margin-left: 235px;
|
|
}
|
|
|
|
input[type="number"].puntipsi{
|
|
|
|
margin-left: 210px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
input[type="number"].limitepsionico{
|
|
position: absolute;
|
|
margin-left: 260px;
|
|
margin-top: 45px;
|
|
}
|
|
|
|
input[type="number"].attaccopsionico{
|
|
position: absolute;
|
|
margin-left: 10px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
input[type="number"].forzapsionica{
|
|
position: absolute;
|
|
margin-left: 30px;
|
|
margin-top: 70px;
|
|
}
|
|
|
|
.power{
|
|
display: grid;
|
|
grid-template-columns: 300px;
|
|
grid-template-rows: 25px;
|
|
grid-template-areas:
|
|
"label"
|
|
"repeat-powers";
|
|
}
|
|
|
|
label[class="power"]{
|
|
grid-area: label;
|
|
margin-left: 20px;
|
|
font-size: 10px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
/*----------INVENTORY SECTION-------------*/
|
|
|
|
.sheet-inv {
|
|
grid-area: inv;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
height: min-content;
|
|
}
|
|
|
|
/*----------ASPECT SECTION-------------*/
|
|
|
|
.sheet-appearance {
|
|
grid-area: aspect;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
height: min-content;
|
|
}
|
|
|
|
.aspetto {
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
display: grid;
|
|
grid-template-columns: repeat(2,130px);
|
|
grid-template-rows: 30px 30px auto;
|
|
grid-template-areas:
|
|
"sesso altezza"
|
|
"peso eta"
|
|
"descrizione descrizione";
|
|
font-size: 10px;
|
|
}
|
|
|
|
.sesso {
|
|
grid-area: sesso;
|
|
width: 120px;
|
|
}
|
|
|
|
.altezza {
|
|
grid-area: altezza;
|
|
width: 120px;
|
|
}
|
|
|
|
.peso {
|
|
grid-area: peso;
|
|
width: 120px;
|
|
}
|
|
|
|
.eta {
|
|
grid-area: eta;
|
|
width: 120px;
|
|
}
|
|
|
|
div.descrizione {
|
|
grid-area: descrizione;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
div.aspetto textarea{
|
|
margin: 0px !important;
|
|
}
|
|
|
|
/*----------PERSONALITY SECTION-------------*/
|
|
|
|
.sheet-personality {
|
|
grid-area: personality;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
height: min-content;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.personalita {
|
|
margin-left: 20px;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.personalita label{
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
/*----------FINANCE SECTION-------------*/
|
|
|
|
.sheet-finance {
|
|
grid-area: finance;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
height: min-content;
|
|
}
|
|
|
|
.finanze {
|
|
display: grid;
|
|
grid-template-columns: 60px 130px 60px;
|
|
grid-template-rows: 45px 30px 30px;
|
|
grid-template-areas:
|
|
"crediti label-1 ."
|
|
". label-2 oneri"
|
|
". label-3 rendita";
|
|
font-size: 10px;
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
grid-column-gap: 5px;
|
|
grid-row-gap: 5px;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
input.crediti {
|
|
grid-area: crediti;
|
|
max-height: 35px;
|
|
align-self: center;
|
|
width: 60px !important;
|
|
}
|
|
|
|
label.crediti {
|
|
grid-area: label-1;
|
|
margin-bottom: 0px;
|
|
font-size: 16px;
|
|
align-self: center;
|
|
}
|
|
|
|
input.oneri {
|
|
grid-area: oneri;
|
|
margin-top: 0px;
|
|
max-height: 30px;
|
|
width: 60px !important;
|
|
}
|
|
|
|
label.oneri {
|
|
grid-area: label-2;
|
|
margin-bottom: 0px;
|
|
justify-self: flex-end;
|
|
align-self: center;
|
|
}
|
|
|
|
input.rendita {
|
|
grid-area: rendita;
|
|
margin-top: 0px;
|
|
max-height: 30px;
|
|
width: 60px !important;
|
|
}
|
|
|
|
label.rendita {
|
|
grid-area: label-3;
|
|
margin-bottom: 0px;
|
|
justify-self: flex-end;
|
|
align-self: center;
|
|
}
|
|
|
|
/*---------- NPC SHEET ----------*/
|
|
|
|
.npc {
|
|
display: grid;
|
|
justify-self: center;
|
|
grid-gap: 4px;
|
|
grid-template-columns: 300px 300px 300px;
|
|
grid-template-rows: min-content min-content auto;
|
|
grid-template-areas:
|
|
"stats tratti azioni"
|
|
"stats poteri reazioni";
|
|
}
|
|
|
|
.npc .npc_stats{
|
|
padding: 20px;
|
|
padding-bottom: unset;
|
|
grid-area: stats;
|
|
display: grid;
|
|
grid-row-gap: 4px;
|
|
grid-column-gap: 4px;
|
|
grid-template-areas:
|
|
"titolo titolo titolo titolo"
|
|
"nome nome nome nome"
|
|
"tipo taglia taglia natura"
|
|
"livellolabel livelloinput minaccialabel minacciainput"
|
|
"pvlabel pvinput velocitalabel velocitainput"
|
|
"difesalabel difesainput armaturalabel armaturainput"
|
|
"stats stats stats stats";
|
|
grid-template-columns: 70px 45px 70px 65px;
|
|
grid-template-rows: min-content min-content min-content min-content min-content min-content auto;
|
|
}
|
|
|
|
.npc label.stats {
|
|
grid-area: titolo;
|
|
}
|
|
|
|
button[type="roll"].skill.btn.ui-draggable{
|
|
background-size: 16px 16px;
|
|
background-repeat: no-repeat;
|
|
border: 1px;
|
|
border-style: solid;
|
|
height: 10px;
|
|
width: 10px;
|
|
}
|
|
|
|
button[type="roll"].skill.btn.ui-draggable::before{
|
|
content: "";
|
|
border: 0px;
|
|
height: 15px;
|
|
width: 15px;
|
|
}
|
|
|
|
.npc label {
|
|
justify-self: center;
|
|
align-self: center;
|
|
margin: unset;
|
|
}
|
|
|
|
.npc label.titolosezione {
|
|
text-align: center;
|
|
margin: 10px !important;
|
|
}
|
|
|
|
.npc input {
|
|
width: auto !important;
|
|
max-height: 20px;
|
|
align-self: center;
|
|
margin:unset;
|
|
}
|
|
|
|
.npc input.sheet-toggle-show {
|
|
width: 15px !important;
|
|
}
|
|
|
|
.npc select {
|
|
width: auto;
|
|
max-height: 20px;
|
|
margin-bottom: auto;
|
|
padding: 0px;
|
|
}
|
|
|
|
.npc input.nome {
|
|
grid-area: nome;
|
|
width: auto;
|
|
}
|
|
|
|
.npc .tipocreatura{
|
|
grid-area: tipo;
|
|
}
|
|
|
|
.npc .taglia {
|
|
grid-area: taglia;
|
|
}
|
|
|
|
.npc .natura {
|
|
grid-area: natura;
|
|
}
|
|
|
|
.npc label.livello {
|
|
grid-area: livellolabel;
|
|
}
|
|
|
|
.npc input.livello {
|
|
grid-area: livelloinput;
|
|
}
|
|
|
|
.npc label.minaccia {
|
|
grid-area: minaccialabel;
|
|
}
|
|
|
|
.npc select.minaccia {
|
|
grid-area: minacciainput;
|
|
}
|
|
|
|
.npc label.puntivitalita {
|
|
grid-area: pvlabel;
|
|
grid-area: pvlabel;
|
|
position: unset;
|
|
margin: unset;
|
|
text-align: center;
|
|
}
|
|
|
|
.npc input.puntivitalita {
|
|
grid-area: pvinput;
|
|
margin: unset;
|
|
}
|
|
|
|
.npc label.velocita {
|
|
grid-area: velocitalabel;
|
|
}
|
|
|
|
.npc input.velocita {
|
|
grid-area: velocitainput;
|
|
}
|
|
|
|
.npc label.difesa {
|
|
grid-area: difesalabel;
|
|
}
|
|
|
|
.npc input.difesa {
|
|
grid-area: difesainput;
|
|
}
|
|
|
|
.npc label.armatura {
|
|
grid-area: armaturalabel;
|
|
}
|
|
|
|
.npc input.armatura {
|
|
grid-area: armaturainput;
|
|
}
|
|
|
|
.npc .npc_abilita {
|
|
grid-area: stats;
|
|
padding: 20px;
|
|
padding-bottom: unset;
|
|
display: grid;
|
|
grid-template-areas:
|
|
"cmblabel roblabel deslabel perlabel intlabel vollabel teclabel"
|
|
"cmbinput robinput desinput perinput intinput volinput tecinput"
|
|
"qualifiche qualifiche qualifiche qualifiche qualifiche qualifiche qualifiche";
|
|
grid-template-columns: repeat(7, 37px);
|
|
grid-template-rows: min-content min-content auto;
|
|
justify-self: center;
|
|
}
|
|
|
|
.npc .npc_abilita label{
|
|
padding: unset;
|
|
}
|
|
|
|
.npc .npc_abilita input{
|
|
width: 30px !important;
|
|
justify-self: center;
|
|
}
|
|
|
|
.npc button[type="roll"].button-text.btn.ui-draggable{
|
|
background:none;
|
|
border:none;
|
|
margin:0;
|
|
padding:0;
|
|
cursor: pointer;
|
|
color: var(--dark-secondarytext);
|
|
font-size: 15px;
|
|
}
|
|
|
|
.npc button[type="roll"].button-text.btn.ui-draggable::before{
|
|
content: "";
|
|
}
|
|
|
|
.npc button.cmb{
|
|
grid-area: cmblabel;
|
|
}
|
|
|
|
.npc input.cmb{
|
|
grid-area: cmbinput;
|
|
}
|
|
|
|
.npc button.rob{
|
|
grid-area: roblabel;
|
|
}
|
|
|
|
.npc input.rob{
|
|
grid-area: robinput;
|
|
}
|
|
|
|
.npc button.des{
|
|
grid-area: deslabel;
|
|
}
|
|
|
|
.npc input.des{
|
|
grid-area: desinput;
|
|
}
|
|
|
|
.npc button.per{
|
|
grid-area: perlabel;
|
|
}
|
|
|
|
.npc input.per{
|
|
grid-area: perinput;
|
|
}
|
|
|
|
.npc button.int{
|
|
grid-area: intlabel;
|
|
}
|
|
|
|
.npc input.int{
|
|
grid-area: intinput;
|
|
}
|
|
|
|
.npc button.vol{
|
|
grid-area: vollabel;
|
|
}
|
|
|
|
.npc input.vol{
|
|
grid-area: volinput;
|
|
}
|
|
|
|
.npc button.tec{
|
|
grid-area: teclabel;
|
|
}
|
|
|
|
.npc input.tec{
|
|
grid-area: tecinput;
|
|
}
|
|
|
|
.npc .npc_abilita div.qualifiche{
|
|
grid-area: qualifiche;
|
|
justify-self: center;
|
|
}
|
|
|
|
.npc input.qualifica {
|
|
width: 140px !important;
|
|
justify-self: unset;
|
|
}
|
|
|
|
.npc .npc_tratti {
|
|
grid-area: tratti;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.npc .npc_azioni {
|
|
grid-area: azioni;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.npc .npc_poteri {
|
|
grid-area: poteri;
|
|
}
|
|
|
|
.npc .npc_reazioni {
|
|
grid-area: reazioni;
|
|
}
|
|
|