mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
351 lines
8.9 KiB
CSS
351 lines
8.9 KiB
CSS
/******* LAYOUT ********/
|
|
main {
|
|
width: 850px;
|
|
display: flex;
|
|
}
|
|
|
|
main > section {
|
|
width: 410px;
|
|
}
|
|
|
|
main > section:last-of-type {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
div.row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
div.row > div.col2 {
|
|
width: calc(50% - 5px);
|
|
margin-left: 15px;
|
|
}
|
|
|
|
div.row > div.col2:last-of-type {
|
|
margin-left: 25px;
|
|
}
|
|
|
|
div.row > div.col2 > .statLine,
|
|
div.row > div.col2 > .frameTitle {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
div.row > div.col2 > .statLine:not(:first-of-type),
|
|
div.row > div.col2 > .frameTitle:not(:first-of-type) {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
div.row > div.col2 > .statLine > div,
|
|
div.row > div.col2 > .frameTitle > div {
|
|
width: fit-content;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
padding-top: 15px;
|
|
border-top: dotted 1px #bbb;
|
|
color: #999;
|
|
}
|
|
|
|
/********** COMPONENTS **********/
|
|
details > summary:first-of-type {
|
|
display: revert;
|
|
}
|
|
|
|
button[type="roll"],
|
|
button[type="action"] {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: none;
|
|
border: none;
|
|
border-radius: 0px;
|
|
margin: 0px;
|
|
box-shadow: none;
|
|
padding: 2px 3px;
|
|
}
|
|
|
|
button[type="roll"]:hover,
|
|
button[type="action"]:hover {
|
|
background: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
section textarea {
|
|
width: calc(100% - 9px) !important;
|
|
font-family: 'Patrick Hand';
|
|
font-size: 13px;
|
|
font-style: italic;
|
|
border: none;
|
|
border-left: dotted 1px #ccc;
|
|
border-bottom: dotted 1px #ccc;
|
|
}
|
|
|
|
input[type="number"] {
|
|
text-align: center;
|
|
border-radius: 0px;
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0px;
|
|
}
|
|
|
|
.repcontrol > button,
|
|
.itemcontrol > button {
|
|
padding: 2px 5px;
|
|
border-radius: 0px;
|
|
font-size: .8em;
|
|
}
|
|
|
|
.sheet-rolltemplate-base,
|
|
.sheet-rolltemplate-attack,
|
|
.sheet-rolltemplate-defense,
|
|
.sheet-rolltemplate-anima {
|
|
width: 100%;
|
|
margin: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-base .sheet-template-container,
|
|
.sheet-rolltemplate-attack .sheet-template-container,
|
|
.sheet-rolltemplate-defense .sheet-template-container,
|
|
.sheet-rolltemplate-anima .sheet-template-container {
|
|
background-color: white;
|
|
border: solid black 2px;
|
|
padding: 2px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-base .sheet-template-container > .sheet-template-header,
|
|
.sheet-rolltemplate-attack .sheet-template-container > .sheet-template-header,
|
|
.sheet-rolltemplate-defense .sheet-template-container > .sheet-template-header,
|
|
.sheet-rolltemplate-anima .sheet-template-container > .sheet-template-header {
|
|
background-color: black;
|
|
color: white;
|
|
padding: 5px;
|
|
width: calc(100% - 10px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sheet-rolltemplate-base .sheet-template-container > .sheet-template-header > .sheet-template-character,
|
|
.sheet-rolltemplate-attack .sheet-template-container > .sheet-template-header > .sheet-template-character,
|
|
.sheet-rolltemplate-defense .sheet-template-container > .sheet-template-header > .sheet-template-character,
|
|
.sheet-rolltemplate-anima .sheet-template-container > .sheet-template-header > .sheet-template-character {
|
|
width: 100%;
|
|
font-size: 1.1em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-rolltemplate-base .sheet-template-container > .sheet-template-header > .sheet-template-equipment,
|
|
.sheet-rolltemplate-attack .sheet-template-container > .sheet-template-header > .sheet-template-equipment,
|
|
.sheet-rolltemplate-defense .sheet-template-container > .sheet-template-header > .sheet-template-equipment,
|
|
.sheet-rolltemplate-anima .sheet-template-container > .sheet-template-header > .sheet-template-equipment {
|
|
font-size: .75em;
|
|
font-style: italic;
|
|
}
|
|
|
|
.sheet-rolltemplate-base .sheet-template-container > .sheet-template-body,
|
|
.sheet-rolltemplate-attack .sheet-template-container > .sheet-template-body,
|
|
.sheet-rolltemplate-defense .sheet-template-container > .sheet-template-body,
|
|
.sheet-rolltemplate-anima .sheet-template-container > .sheet-template-body {
|
|
border-left: solid black 1px;
|
|
border-right: solid black 1px;
|
|
border-bottom: solid black 1px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-base .sheet-template-container > .sheet-template-body .inlinerollresult,
|
|
.sheet-rolltemplate-base .sheet-template-container > .sheet-template-body .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-base .sheet-template-container > .sheet-template-body .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-attack .sheet-template-container > .sheet-template-body .inlinerollresult,
|
|
.sheet-rolltemplate-attack .sheet-template-container > .sheet-template-body .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-attack .sheet-template-container > .sheet-template-body .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-defense .sheet-template-container > .sheet-template-body .inlinerollresult,
|
|
.sheet-rolltemplate-defense .sheet-template-container > .sheet-template-body .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-defense .sheet-template-container > .sheet-template-body .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-anima .sheet-template-container > .sheet-template-body .inlinerollresult,
|
|
.sheet-rolltemplate-anima .sheet-template-container > .sheet-template-body .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-anima .sheet-template-container > .sheet-template-body .inlinerollresult.fullcrit {
|
|
background-color: white;
|
|
border: none;
|
|
font-family: 'Patrick Hand';
|
|
font-size: 14px;
|
|
font-style: italic;
|
|
}
|
|
|
|
/*********** TYPOGRAPHY ***********/
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
|
|
.statLine > span,
|
|
.frameTitle > span {
|
|
font-variant: small-caps;
|
|
}
|
|
|
|
section:first-of-type h3:first-of-type {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
section:first-of-type textarea {
|
|
height: 6em;
|
|
}
|
|
|
|
summary > input[type="text"] {
|
|
line-height: 15px;
|
|
font-family: 'Patrick Hand';
|
|
padding: 2px 4px;
|
|
width: calc(100% - 14px);
|
|
border: none;
|
|
border-bottom: 1px dotted #bbb;
|
|
}
|
|
|
|
details.capacite > textarea {
|
|
height: 3em;
|
|
}
|
|
|
|
/********** PAGE PERSONNAGES ***********/
|
|
section:last-of-type > input[type="text"]:first-of-type {
|
|
border: none;
|
|
border-radius: 0px;
|
|
border-bottom: dotted 1px #bbb;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
margin-top: 5px;
|
|
margin-top: 5px;
|
|
color: black;
|
|
}
|
|
|
|
div.frameTitle > span:first-of-type {
|
|
padding-left: 4px;
|
|
}
|
|
|
|
div.statLine > div > input[type="number"] {
|
|
border: solid black 1px;
|
|
}
|
|
|
|
div.frame {
|
|
border: solid black 1px;
|
|
}
|
|
|
|
div.frame > .frameTitle > input[type="number"] {
|
|
border: none;
|
|
border-bottom: dotted #bbb 1px;
|
|
}
|
|
|
|
div.frame > textarea {
|
|
border-bottom: none;
|
|
border-radius: 0px;
|
|
margin-bottom: 0px;
|
|
height: 6em;
|
|
}
|
|
|
|
div.rptFrame > .frameTitle {
|
|
border-bottom: double #999 1px;
|
|
}
|
|
|
|
div.rptFrame > .frameTitle > span:not(:first-of-type) {
|
|
border-left: solid 1px #999;
|
|
text-align: center;
|
|
}
|
|
|
|
div.rptFrame > .frameTitle > span:last-of-type {
|
|
background-color: #999;
|
|
}
|
|
|
|
div.rptFrame > .repcontainer > .repitem {
|
|
border-bottom: dotted 1px #bbb;
|
|
}
|
|
|
|
div.rptFrame > .repcontainer > .repitem > input {
|
|
border: none;
|
|
border-radius: 0px;
|
|
margin: 0px;
|
|
font-family: 'Patrick Hand';
|
|
font-size: 12px;
|
|
font-style: italic;
|
|
}
|
|
|
|
div.rptFrame > .repcontainer > .repitem > input:not(:first-of-type) {
|
|
border-left: solid 1px #999;
|
|
text-align: center;
|
|
}
|
|
|
|
div.rptFrame > .repcontainer > .repitem > button[type="roll"],
|
|
div.rptFrame > .repcontainer > .repitem > button[type="action"] {
|
|
height: 22px;
|
|
border-left: solid 1px #999;
|
|
margin: 0px;
|
|
}
|
|
|
|
#weapons > .frameTitle > span:nth-of-type(1),
|
|
#armours > .frameTitle > span:nth-of-type(1) {
|
|
width: calc(100% - 5px - 37px - 37px - 28px);
|
|
}
|
|
|
|
#weapons > .frameTitle > span:nth-of-type(2),
|
|
#weapons > .frameTitle > span:nth-of-type(3),
|
|
#armours > .frameTitle > span:nth-of-type(2),
|
|
#armours > .frameTitle > span:nth-of-type(3) {
|
|
width: 33px;
|
|
}
|
|
|
|
#weapons > .frameTitle > span:nth-of-type(4),
|
|
#armours > .frameTitle > span:nth-of-type(4) {
|
|
width: 26px;
|
|
}
|
|
|
|
#weapons > .repcontainer > .repitem > input:nth-of-type(1),
|
|
#armours > .repcontainer > .repitem > input:nth-of-type(1) {
|
|
width: calc(100% - 2px - 28px - 37px - 37px);
|
|
}
|
|
|
|
#weapons > .repcontainer > .repitem > input:nth-of-type(2), #weapons > .repcontainer > .repitem > input:nth-of-type(3),
|
|
#armours > .repcontainer > .repitem > input:nth-of-type(2),
|
|
#armours > .repcontainer > .repitem > input:nth-of-type(3) {
|
|
width: 33px;
|
|
}
|
|
|
|
#heal > .frameTitle > span:nth-of-type(1) {
|
|
width: calc(100% - 5px - 20px - 32px - 32px - 28px);
|
|
}
|
|
|
|
#heal > .frameTitle > span:nth-of-type(2) {
|
|
width: 18px;
|
|
}
|
|
|
|
#heal > .frameTitle > span:nth-of-type(3),
|
|
#heal > .frameTitle > span:nth-of-type(4) {
|
|
width: 28px;
|
|
}
|
|
|
|
#heal > .frameTitle > span:nth-of-type(5) {
|
|
width: 26px;
|
|
}
|
|
|
|
#heal > .repcontainer > .repitem > input:nth-of-type(1) {
|
|
width: calc(100% - 3px - 28px - 32px - 32px - 20px);
|
|
}
|
|
|
|
#heal > .repcontainer > .repitem > input:nth-of-type(2) {
|
|
width: 19px;
|
|
}
|
|
|
|
#heal > .repcontainer > .repitem > input:nth-of-type(3), #heal > .repcontainer > .repitem > input:nth-of-type(4) {
|
|
width: 27px;
|
|
}
|
|
|
|
#heal button[type="action"]::before {
|
|
font-family: 'Pictos';
|
|
content: 'h';
|
|
}
|