mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
492 lines
8.5 KiB
CSS
492 lines
8.5 KiB
CSS
@import url('https://fonts.googleapis.com/css?family=Tapestry|Uncial+Antiqua&display=swap');
|
|
/* image: want a config that switches between cover and contain, and maybe fill */
|
|
.nav {
|
|
margin-bottom: 0;
|
|
}
|
|
.ui-dialog .nav-tabs li.active a {
|
|
font-weight: bold;
|
|
color: purple;
|
|
background: linear-gradient(to top, palegoldenrod 60%, gold 100%);
|
|
font-family: "uncial antiqua";
|
|
}
|
|
.bioinfo,
|
|
.attributesabilities {
|
|
margin-bottom: 10px;
|
|
}
|
|
/* CSS BASICS */
|
|
label,
|
|
input,
|
|
button,
|
|
select,
|
|
textarea,
|
|
span {
|
|
text-align: center;
|
|
}
|
|
|
|
textarea,
|
|
input,
|
|
select {
|
|
border-radius: 5px;
|
|
}
|
|
select {
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
h2,
|
|
h3 {
|
|
color: purple;
|
|
text-shadow: 2px 2px 5px gold;
|
|
font-size: 1.8em;
|
|
font-family: 'Uncial Antiqua', Arial;
|
|
text-align: center;
|
|
}
|
|
|
|
h3 {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
h4 {
|
|
margin-top: 5px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.charsheet .sheet button[type="roll"] {
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 25px;
|
|
}
|
|
|
|
.charsheet .sheet input[type="number"] {
|
|
width: 2.8em;
|
|
height: 26px;
|
|
padding-top: 1px;
|
|
padding-top: 2px;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
/* get rid of arrows in all browsers */
|
|
select.no-arrows {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
text-indent: 1px;
|
|
text-overflow: '';
|
|
}
|
|
|
|
/* hide up/down arrows ("spinners") on input fields marked type="number" */
|
|
input[type=number].no-spinners {
|
|
-moz-appearance: textfield;
|
|
}
|
|
input[type=number].no-spinners::-webkit-outer-spin-button,
|
|
input[type=number].no-spinners::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ==== generic styles ============ */
|
|
|
|
.red {
|
|
color: red;
|
|
}
|
|
|
|
.black {
|
|
color: black;
|
|
}
|
|
|
|
.bold {
|
|
font-weight: bold;
|
|
/* bold text might be too strong */
|
|
}
|
|
|
|
/* ===== FULL PAGE ============*/
|
|
.sheet {
|
|
display: grid;
|
|
grid-template-areas: "bio bio"
|
|
"abilities other";
|
|
/* grid-template-columns: */
|
|
width: 575px;
|
|
padding: 5px;
|
|
background-color: red;
|
|
border: 1pt solid black;
|
|
margin-left: -10px;
|
|
}
|
|
|
|
/* ==== BIO AREA ===== */
|
|
.description {
|
|
grid-area: bio;
|
|
display: grid;
|
|
grid-template-areas:
|
|
"title title portrait"
|
|
"names diary portrait";
|
|
grid-template-columns: 135px 260px 145px;
|
|
column-gap: 5px;
|
|
}
|
|
|
|
.description h2 {
|
|
grid-area: title;
|
|
margin-bottom: 10px;
|
|
|
|
font-size: 2.7em;
|
|
text-decoration: underline;
|
|
}
|
|
.description h4 {
|
|
text-align: center;
|
|
}
|
|
|
|
.diary {
|
|
grid-area: diary;
|
|
width: 260px;
|
|
}
|
|
|
|
.names {
|
|
grid-area: names;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
|
|
.charsheet .names input,
|
|
.names select {
|
|
width: 130px;
|
|
height: 30px;
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
|
|
.names input {
|
|
padding-left: 6px;
|
|
}
|
|
|
|
.names select {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.charsheet div.description div.diary textarea {
|
|
margin-bottom: 0;
|
|
width: 250px;
|
|
background-color: initial;
|
|
background-color: white;
|
|
|
|
}
|
|
|
|
|
|
.description img {
|
|
grid-area: portrait;
|
|
width: 145px;
|
|
height: 220px;
|
|
border: 5pt double darkred;
|
|
object-fit: cover;
|
|
border-radius: 50%;
|
|
margin-right: 5px;
|
|
}
|
|
input.radio-img[value=contain] ~ img {
|
|
object-fit: contain;
|
|
}
|
|
input.radio-img[value=fill] ~ img {
|
|
object-fit: fill;
|
|
}
|
|
|
|
/* ======== ABILITIES ====================== */
|
|
.traits {
|
|
grid-area: abilities;
|
|
display: grid;
|
|
grid-template-columns: 145px 95px 30px;
|
|
grid-template-rows: 36px;
|
|
grid-auto-rows: 30px;
|
|
column-gap: 5px;
|
|
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.traits button.roll-abilities {
|
|
grid-column: 1 / -1;
|
|
border: 0;
|
|
background: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.traits select {
|
|
width: 95px;
|
|
padding-left: 0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.traits span {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.traits span,
|
|
.traits input {
|
|
text-align: right;
|
|
}
|
|
|
|
.traits span.suit {
|
|
width: 15px;
|
|
font-size: large;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.charsheet .traits input {
|
|
width: 125px;
|
|
height: 28px;
|
|
}
|
|
|
|
.passthrough {
|
|
display: contents;
|
|
}
|
|
|
|
.traits .custom-ability input {
|
|
margin-top: -6px;
|
|
position: relative;
|
|
left: 5px;
|
|
}
|
|
|
|
.traits select.suit {
|
|
width: 20px;
|
|
margin-left: -4px;
|
|
padding-left: 0;
|
|
position: relative;
|
|
left: 7px;
|
|
}
|
|
|
|
.hide[value="0"]+.passthrough,
|
|
.hide[value="0"]~.config,
|
|
.suit:not([value=♦])~.♦,
|
|
.suit:not([value=♥])~.♥,
|
|
.suit:not([value=♠])~.♠,
|
|
.suit:not([value=♣])~.♣,
|
|
.suit[value=♦]~.none,
|
|
.suit[value=♥]~.none,
|
|
.suit[value=♠]~.none,
|
|
.suit[value=♣]~.none {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* Suit Roll Buttons */
|
|
.charsheet button[type=roll].nod20:before {
|
|
content: "";
|
|
}
|
|
|
|
button[type=roll]:hover {
|
|
background-position: center center;
|
|
}
|
|
button.♦,
|
|
button.♠,
|
|
button.♥,
|
|
button.♣ {
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
background-size: contain;
|
|
}
|
|
button.♦ {
|
|
background-image: url(https://raw.githubusercontent.com/birdbrainiac/roll20-character-sheets/falkenstein/Castle%20Falkenstein/diamond.png);
|
|
}
|
|
button.♠ {
|
|
background-image: url(https://raw.githubusercontent.com/birdbrainiac/roll20-character-sheets/falkenstein/Castle%20Falkenstein/spade.png);
|
|
}
|
|
button.♥ {
|
|
background-image: url(https://raw.githubusercontent.com/birdbrainiac/roll20-character-sheets/falkenstein/Castle%20Falkenstein/heart.png);
|
|
}
|
|
button.♣ {
|
|
background-image: url(https://raw.githubusercontent.com/birdbrainiac/roll20-character-sheets/falkenstein/Castle%20Falkenstein/club.png);
|
|
}
|
|
|
|
/* === OTHER === */
|
|
.other {
|
|
grid-area: other;
|
|
}
|
|
|
|
.other h4 {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.wounds {
|
|
border-bottom: 1pt solid black;
|
|
}
|
|
|
|
.wounds .left,
|
|
.wounds .right {
|
|
display: inline-block;
|
|
width: calc(50% - 3.9em);
|
|
font-weight: bold;
|
|
}
|
|
.wounds input {
|
|
margin-top: -5px;
|
|
}
|
|
.left {
|
|
text-align: left;
|
|
}
|
|
|
|
.right {
|
|
text-align: right;
|
|
}
|
|
|
|
.money input[type=number] {
|
|
height: 24px;
|
|
padding-top: 1px;
|
|
}
|
|
|
|
.other textarea {
|
|
margin-top: 2px;
|
|
height: 80px;
|
|
width: 246px;
|
|
}
|
|
|
|
.charsheet .sheet input[type="number"].total {
|
|
width: 4.3em;
|
|
}
|
|
|
|
/* ==== config ==== */
|
|
input[type=checkbox].config-toggle {
|
|
position: absolute;
|
|
left: 591px;
|
|
top: 56px;
|
|
}
|
|
|
|
.config {
|
|
width: 585px;
|
|
background-color: palegoldenrod;
|
|
border: 1pt solid black;
|
|
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 105px;
|
|
z-index: 999;
|
|
margin-left: -5px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.config-abilities {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 15px 78px);
|
|
column-gap: 3px;
|
|
}
|
|
|
|
.config h3,
|
|
.config p {
|
|
grid-column: 1/-1;
|
|
padding: 0;
|
|
}
|
|
|
|
.config-abilities input {
|
|
width: 15px;
|
|
height: 15px;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.config-abilities span {
|
|
text-align: left;
|
|
font-size: 85%;
|
|
}
|
|
|
|
|
|
|
|
/* ================ VARIOUS ============== */
|
|
.config,
|
|
.config .card-value,
|
|
.config .roll-name,
|
|
.config .img-type,
|
|
.wounds,
|
|
.trappings,
|
|
.traits,
|
|
.description {
|
|
border: 1pt solid darkred;
|
|
border-radius: 10px;
|
|
padding: 5px;
|
|
}
|
|
input,
|
|
select,
|
|
.charsheet .sheet input[type=number].total,
|
|
button[type=roll],
|
|
textarea {
|
|
border: 1pt solid darkred;
|
|
border-radius: 10px;
|
|
}
|
|
.config,
|
|
.wounds,
|
|
.trappings,
|
|
.traits,
|
|
div.description {
|
|
background-color: palegoldenrod;
|
|
}
|
|
.wounds,
|
|
.trappings,
|
|
.traits,
|
|
div.description {
|
|
background: linear-gradient(to top, palegoldenrod 60%, gold 100%);
|
|
}
|
|
|
|
.description,
|
|
.wounds {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
|
|
/* ======== CONFIG PANE =========== */
|
|
.config .roll {
|
|
display: grid;
|
|
grid-template-columns: 130px 220px;
|
|
column-gap: 5px;
|
|
}
|
|
.config .portrait,
|
|
.config .roll {
|
|
margin-bottom: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
.config .properties {
|
|
display: grid;
|
|
grid-template-columns: 370px 200px;
|
|
column-gap: 5px;
|
|
margin-left: 5px;
|
|
|
|
}
|
|
.config .roll label,
|
|
.config .portrait label {
|
|
margin-bottom: 0;
|
|
padding-right: 0;
|
|
}
|
|
.config .roll .card-value {
|
|
display: grid;
|
|
grid-template-columns: 15px 1fr ;
|
|
column-gap: 5px;
|
|
|
|
}
|
|
.config .roll .roll-name {
|
|
display: grid;
|
|
grid-template-columns: 15px 6.2em 15px 5.8em;
|
|
column-gap: 5px;
|
|
}
|
|
.config .img-type {
|
|
display: grid;
|
|
grid-template-columns: 15px 3.2em 15px 4.2em 15px 4em;
|
|
column-gap: 5px;
|
|
}
|
|
.config .config-abilities {
|
|
padding-bottom: 5px;
|
|
border-bottom: 1pt solid darkred;
|
|
}
|
|
.config .roll h3 {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.other details h4 {
|
|
padding-left: 5px;
|
|
margin-right: 7px;
|
|
margin-left: 0px;
|
|
}
|
|
.other details[open] summary h4 {
|
|
color: gold;
|
|
background: red;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/* dark mode fixes */
|
|
.sheet-darkmode form.sheetform {
|
|
background-color: transparent;
|
|
}
|
|
.sheet-darkmode .ui-dialog .nav-tabs > li.active > a {
|
|
color: purple;
|
|
}
|
|
.sheet-darkmode .characterviewer label {
|
|
color: black;
|
|
}
|