mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
1486 lines
28 KiB
CSS
1486 lines
28 KiB
CSS
|
|
/*----------------- FONTS ------------------*/
|
|
|
|
@import url('https://fonts.googleapis.com/css?family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&display=swap');
|
|
/*@import url('https://fonts.googleapis.com/css?family=EB+Garamond&display=swap');*/
|
|
|
|
/*
|
|
font-family: 'EB Garamond', serif;
|
|
*/
|
|
|
|
|
|
|
|
/*----------------- BACKGROUND ------------------*/
|
|
|
|
.charsheet {
|
|
|
|
background: none;
|
|
background-color:white;
|
|
background-size: 64px 128px;
|
|
background-repeat: round;
|
|
|
|
width: 830px;
|
|
height: auto;
|
|
|
|
}
|
|
|
|
|
|
/*----------------- GRIDS ------------------*/
|
|
|
|
|
|
|
|
.sheet-main {
|
|
|
|
}
|
|
|
|
.sheet-main-top {
|
|
display: grid;
|
|
width: 310px;
|
|
height: 50px;
|
|
grid-gap: 6px;
|
|
grid-template-columns: 310px;
|
|
grid-template-rows: 30px 30px 30px 30px;
|
|
grid-template-areas:"topgrid"
|
|
"stat1"
|
|
"stat2"
|
|
"stat3";
|
|
}
|
|
|
|
/*----------------- 2 columned, 406px each ------------------*/
|
|
|
|
.sheet-main-pc {
|
|
display: block;
|
|
width: 820px;
|
|
height: auto;
|
|
grid-gap: 6px;
|
|
align-items: start;
|
|
grid-template-columns: 406px 406px;
|
|
grid-template-rows: minmax(min-content, max-content) ;
|
|
grid-template-areas:"pcleft pcright";
|
|
}
|
|
|
|
|
|
.sheet-main-npc {
|
|
display: block;
|
|
width: 820px;
|
|
height: auto;
|
|
grid-gap: 6px;
|
|
align-items: start;
|
|
grid-template-columns: 820px;
|
|
grid-template-rows: minmax(min-content, max-content) ;
|
|
grid-template-areas:"npcrollers"
|
|
"specials"
|
|
"appearance";
|
|
}
|
|
|
|
|
|
|
|
/*----------------- GENERAL CSS ------------------*/
|
|
|
|
.sheet-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-section {
|
|
padding: 5px;
|
|
border-style: solid;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.sheet-flex-col {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
/*justify-content: flex-start;*/
|
|
}
|
|
|
|
.sheet-flex-col-center {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: center;
|
|
align-content: center;
|
|
/*justify-content: flex-start;*/
|
|
}
|
|
|
|
.sheet-flex-center {
|
|
display: grid;
|
|
justify-content: center;
|
|
align-content: center;
|
|
}
|
|
|
|
.sheet-hide-section {
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
/* --------------------------------Hide and Display section of Code-------------------------------- */
|
|
/* Configure the tab buttons*/
|
|
.sheet-main-pc,
|
|
.sheet-main-npc {display: none;}
|
|
|
|
/* show the selected tab */
|
|
.sheet-tabstoggle[value="pc"] ~ div.sheet-main-pc,
|
|
.sheet-tabstoggle[value="npc"] ~ div.sheet-main-npc {display: block;}
|
|
|
|
|
|
/*------------- Top Section -------------*/
|
|
|
|
|
|
.sheet-topgrid {
|
|
grid-area: topgrid;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 200px 2px 50px 6px 50px 6px 50px 2px 80px 2px 40px 2px 70px 2px 40px 8px 70px 9px 70px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: 30px;
|
|
|
|
}
|
|
|
|
label.sheet-big-label {
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
text-align: center;
|
|
color: black;
|
|
display: inline;
|
|
font-size: 1.5em;
|
|
font-weight: normal;
|
|
line-height: 30px;
|
|
margin-bottom: 0px;
|
|
|
|
}
|
|
|
|
label.sheet-big-label-title {
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
text-align: center;
|
|
color: rgb(236,60,67);
|
|
display: inline;
|
|
font-size: 1.3em;
|
|
font-weight: bold;
|
|
line-height: 30px;
|
|
margin-bottom: 0px;
|
|
|
|
}
|
|
|
|
.sheet-topgrid input[type=number].sheet-stat-inputs {
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
color: black;
|
|
display: inline;
|
|
height:30px;
|
|
width:40px;
|
|
text-align: center;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.sheet-gamename {
|
|
grid-area: gamename;
|
|
|
|
background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Red%20Giant/red_giant_logo.PNG?raw=true"); /*Red Giant logo, used with publisher permission*/
|
|
|
|
background-size: contain;
|
|
align-items: center;
|
|
justify-items: center;
|
|
|
|
}
|
|
|
|
button.sheet-radio-roll-state {
|
|
|
|
font-family: 'Balthazar', serif;
|
|
font-size: 1.5em;
|
|
color: black;
|
|
border-style: solid;
|
|
/*border-radius: 8px;*/
|
|
text-align: center;
|
|
line-height: 25px;
|
|
height: 25px;
|
|
|
|
}
|
|
|
|
|
|
button.sheet-radio-roll-state-advantage {
|
|
|
|
background-color: rgb(213, 235, 217);
|
|
|
|
}
|
|
|
|
button.sheet-radio-roll-state-flat {
|
|
|
|
background-color: rgb(235, 237, 235);
|
|
|
|
}
|
|
|
|
button.sheet-radio-roll-state-disadvantage {
|
|
|
|
background-color: rgb(230, 204, 208);
|
|
|
|
}
|
|
|
|
input.sheet-radio-roll-state[value="advantage"] ~ button.sheet-radio-roll-state-advantage {
|
|
background-color: rgb(149, 232, 164);
|
|
|
|
}
|
|
|
|
input.sheet-radio-roll-state[value="flat"] ~ button.sheet-radio-roll-state-flat {
|
|
/*background-color: rgb(160, 163, 160);*/
|
|
background-color: #888;
|
|
}
|
|
|
|
input.sheet-radio-roll-state[value="disadvantage"] ~ button.sheet-radio-roll-state-disadvantage {
|
|
background-color: rgb(212, 97, 115);
|
|
}
|
|
|
|
button.sheet-tabbutton {
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
background-color: rgb(144,144,144);
|
|
font-size: 150%;
|
|
font-weight: bold;
|
|
color: white;
|
|
width: 64px;
|
|
height: 24px;
|
|
border-width: 3px;
|
|
border-style: groove;
|
|
border-color: rgb(236,60,67);
|
|
border-radius: 0px;
|
|
|
|
}
|
|
|
|
button.sheet-tabbutton:hover,
|
|
.sheet-stat1 button[type=roll].sheet-statrollbutton:hover,
|
|
.sheet-stat3 button[type=roll].sheet-statrollbuttonshort:hover,
|
|
.sheet-healing button[type=roll].sheet-healingbuttonshort:hover,
|
|
.sheet-healing button[type=roll].sheet-healingbutton:hover,
|
|
.sheet-npcrollers button[type=roll].sheet-statrollbuttonshort:hover {
|
|
|
|
background-color: rgb(108,108,108);
|
|
|
|
}
|
|
|
|
/*------------- Stats - Common section -------------*/
|
|
|
|
|
|
.sheet-stat1 {
|
|
grid-area: stat1;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 195px 80px 60px 80px 60px 85px 85px 55px 50px 4px 50px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: 30px;
|
|
|
|
}
|
|
|
|
.sheet-stat2 {
|
|
grid-area: stat2;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 195px 80px 60px 80px 65px 50px 50px 10px 45px 57px 50px 4px 50px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: 30px;
|
|
|
|
}
|
|
|
|
.sheet-stat3 {
|
|
grid-area: stat3;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 50px 145px 2px 100px 10px 100px 54px 61px 291px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: 30px;
|
|
|
|
}
|
|
|
|
select.sheet-die-dropdowns{
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
display: inline;
|
|
height:30px;
|
|
width:60px;
|
|
|
|
}
|
|
|
|
select.sheet-attribute-dropdowns{
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
display: inline;
|
|
height:30px;
|
|
width:100px;
|
|
|
|
}
|
|
|
|
label.sheet-regular-label {
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
text-align: center;
|
|
color: black;
|
|
display: inline;
|
|
font-size: 1.3em;
|
|
font-weight: normal;
|
|
line-height: 30px;
|
|
margin-bottom: 0px;
|
|
|
|
}
|
|
|
|
label.sheet-big-label-italic {
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
text-align: center;
|
|
color: rgb(236,60,67);
|
|
display: inline;
|
|
/*font-style: italic;*/
|
|
font-size: 1.3em;
|
|
font-weight: bold;
|
|
line-height: 30px;
|
|
margin-bottom: 0px;
|
|
|
|
}
|
|
|
|
.sheet-stat1 button[type=roll].sheet-statrollbutton{
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
background-color: rgb(144,144,144);
|
|
font-size: 120%;
|
|
font-weight: bold;
|
|
color: white;
|
|
width: 73px;
|
|
height: 24px;
|
|
border-width: 3px;
|
|
border-style: groove;
|
|
border-color: rgb(236,60,67);
|
|
border-radius: 0px;
|
|
background-image: none;
|
|
|
|
}
|
|
|
|
.sheet-stat3 button[type=roll].sheet-statrollbuttonshort,
|
|
.sheet-npcrollers button[type=roll].sheet-statrollbuttonshort {
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
background-color: rgb(144,144,144);
|
|
font-size: 120%;
|
|
font-weight: bold;
|
|
color: white;
|
|
width: 46px;
|
|
height: 24px;
|
|
border-width: 3px;
|
|
border-style: groove;
|
|
border-color: rgb(236,60,67);
|
|
border-radius: 0px;
|
|
background-image: none;
|
|
|
|
}
|
|
|
|
.sheet-stat1 button[type=roll].sheet-statrollbutton:before,
|
|
.sheet-stat3 button[type=roll].sheet-statrollbuttonshort:before,
|
|
.sheet-npcrollers button[type=roll].sheet-statrollbuttonshort:before {
|
|
content: "";
|
|
|
|
}
|
|
|
|
.sheet-stat1 input[type=number].sheet-stat-inputs,
|
|
.sheet-stat2 input[type=number].sheet-stat-inputs,
|
|
.sheet-stat3 input[type=number].sheet-stat-inputs{
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
color: black;
|
|
display: inline;
|
|
height:30px;
|
|
width:50px;
|
|
text-align: center;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
input.sheet-char-inputs{
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
display: inline;
|
|
height:30px;
|
|
width:145px;
|
|
font-size: 1.2em;
|
|
|
|
}
|
|
|
|
input.sheet-char-inputs-long{
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
display: inline;
|
|
height:30px;
|
|
width:276px;
|
|
font-size: 1.2em;
|
|
|
|
}
|
|
|
|
input.sheet-char-inputs-look{
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
display: inline;
|
|
height:30px;
|
|
width:291px;
|
|
font-size: 1.2em;
|
|
|
|
}
|
|
|
|
input.sheet-radio-roll-state[value="advantage"] ~ button.flat,
|
|
input.sheet-radio-roll-state[value="advantage"] ~ button.disadvantage,
|
|
input.sheet-radio-roll-state[value="flat"] ~ button.advantage,
|
|
input.sheet-radio-roll-state[value="flat"] ~ button.disadvantage,
|
|
input.sheet-radio-roll-state[value="disadvantage"] ~ button.flat,
|
|
input.sheet-radio-roll-state[value="disadvantage"] ~ button.advantage {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
/*------------- PC - Left Column Styling -------------*/
|
|
|
|
.sheet-main-pc-left {
|
|
display: block;
|
|
grid-area: pcleft;
|
|
width: 406px;
|
|
height: auto;
|
|
grid-gap: 6px;
|
|
align-items: start;
|
|
grid-template-columns: 406px;
|
|
grid-template-rows: minmax(min-content, max-content) ;
|
|
grid-template-areas:"attributes"
|
|
"usables"
|
|
"armor"
|
|
"weapons"
|
|
"items"
|
|
"speechmagic";
|
|
}
|
|
|
|
|
|
/* ATTRIBUTES */
|
|
|
|
.sheet-attributes {
|
|
grid-area: attributes;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 140px 280px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
|
|
}
|
|
|
|
label.sheet-left-label-1 {
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
text-align: left;
|
|
color: rgb(236,60,67);
|
|
display: inline;
|
|
/*font-style: italic;*/
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
line-height: 30px;
|
|
margin-bottom: 0px;
|
|
grid-column: 1 / -1;
|
|
|
|
}
|
|
|
|
label.sheet-left-label {
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
text-align: left;
|
|
color: black;
|
|
display: inline;
|
|
font-size: 1.3em;
|
|
font-weight: normal;
|
|
line-height: 30px;
|
|
margin-bottom: 0px;
|
|
|
|
}
|
|
|
|
/* USEABLES - 424px per line */
|
|
|
|
.sheet-useables {
|
|
grid-area: useables;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 30px 70px 5px 50px 50px 5px 70px 50px 4px 50px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
|
|
}
|
|
|
|
.sheet-useables input[type=number].sheet-useable-inputs,
|
|
.sheet-armordetails input[type=number].sheet-useable-inputs {
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
color: black;
|
|
display: inline;
|
|
height:30px;
|
|
width:50px;
|
|
text-align: center;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
|
|
.sheet-useables input[type=number].sheet-useable-inputs-long {
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
color: black;
|
|
display: inline;
|
|
height:30px;
|
|
width:70px;
|
|
text-align: center;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
label.sheet-regular-label-left {
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
text-align: left;
|
|
color: black;
|
|
display: inline;
|
|
font-size: 1.3em;
|
|
font-weight: normal;
|
|
line-height: 30px;
|
|
margin-bottom: 0px;
|
|
|
|
}
|
|
|
|
/* ARMOR */
|
|
|
|
.sheet-armor {
|
|
grid-area: armor;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 424px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
grid-template-areas:"armortitle"
|
|
"armordetails";
|
|
|
|
}
|
|
|
|
.sheet-armortitle {
|
|
grid-area: armortitle;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 290px 84px 50px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
|
|
}
|
|
|
|
.sheet-armordetails {
|
|
grid-area: armordetails;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 424px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
|
|
}
|
|
|
|
label.sheet-big-label-table {
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
text-align: left;
|
|
color: rgb(236,60,67);
|
|
display: inline;
|
|
font-size: 1.3em;
|
|
font-weight: bold;
|
|
line-height: 30px;
|
|
margin-bottom: 0px;
|
|
|
|
}
|
|
|
|
input.sheet-armor-inputs{
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
display: inline;
|
|
height:30px;
|
|
width:286px;
|
|
font-size: 1.2em;
|
|
color:rgb(236,60,67);
|
|
text-transform: uppercase;
|
|
|
|
}
|
|
|
|
/* WEAPONS */
|
|
|
|
.sheet-weapons {
|
|
grid-area: weapons;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 424px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
grid-template-areas:"weaponstitle"
|
|
"weaponsdetails";
|
|
|
|
}
|
|
|
|
.sheet-weaponstitle {
|
|
grid-area: weaponstitle;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 144px 124px 45px 65px 36px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
|
|
}
|
|
|
|
.sheet-weaponsdetails {
|
|
grid-area: weaponsdetails;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 424px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
|
|
}
|
|
|
|
input.sheet-weapons-inputs{
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
display: inline;
|
|
height:30px;
|
|
width:140px;
|
|
font-size: 1.2em;
|
|
color:rgb(236,60,67);
|
|
text-transform: uppercase;
|
|
|
|
}
|
|
|
|
input.sheet-weapons-inputs-short{
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
display: inline;
|
|
height:30px;
|
|
width:120px;
|
|
font-size: 1.2em;
|
|
color:black;
|
|
text-transform: uppercase;
|
|
|
|
}
|
|
|
|
input.sheet-weapons-inputs-shortest{
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
display: inline;
|
|
height:30px;
|
|
width:60px;
|
|
font-size: 1.2em;
|
|
color:black;
|
|
text-transform: uppercase;
|
|
|
|
}
|
|
|
|
.sheet-weaponsdetails input[type=number].sheet-useable-inputs {
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
color: black;
|
|
display: inline;
|
|
height:30px;
|
|
width:36px;
|
|
text-align: center;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
.sheet-itemsdetails input[type=number].sheet-useable-inputs,
|
|
.sheet-speechmagicdetails input[type=number].sheet-useable-inputs {
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
color: black;
|
|
display: inline;
|
|
height:30px;
|
|
width:45px;
|
|
text-align: center;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
/* ITEMS */
|
|
|
|
.sheet-items {
|
|
grid-area: items;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 424px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
grid-template-areas:"itemstitle"
|
|
"itemsdetails";
|
|
|
|
}
|
|
|
|
.sheet-itemstitle {
|
|
grid-area: itemstitle;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 379px 36px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
|
|
}
|
|
|
|
.sheet-itemsdetails {
|
|
grid-area: itemsdetails;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 424px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
|
|
}
|
|
|
|
input.sheet-items-inputs{
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
display: inline;
|
|
height:30px;
|
|
width:371px;
|
|
font-size: 1.2em;
|
|
color:rgb(236,60,67);
|
|
text-transform: uppercase;
|
|
|
|
}
|
|
|
|
/* SPEECH MAGIC */
|
|
|
|
.sheet-speechmagic {
|
|
grid-area: speechmagic;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 424px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
grid-template-areas:"speechmagictitle"
|
|
"speechmagicdetails";
|
|
|
|
}
|
|
|
|
.sheet-speechmagictitle {
|
|
grid-area: speechmagictitle;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 96px 264px 50px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
|
|
}
|
|
|
|
.sheet-speechmagicdetails {
|
|
grid-area: speechmagicdetails;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 424px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
|
|
}
|
|
|
|
.speechmagic-width {
|
|
width:424px;
|
|
}
|
|
|
|
select.sheet-speechmagic-dropdowns{
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
display: inline;
|
|
justify-items: center;
|
|
height:28.46px;
|
|
width:92px;
|
|
|
|
}
|
|
|
|
input.sheet-speechmagic-inputs{
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
display: inline;
|
|
height:30px;
|
|
width:271px;
|
|
font-size: 1.2em;
|
|
color:rgb(236,60,67);
|
|
text-transform: uppercase;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*------------- PC - Right Column Styling -------------*/
|
|
|
|
.sheet-main-pc-right {
|
|
display: block;
|
|
grid-area: pcright;
|
|
width: 406px;
|
|
height: auto;
|
|
grid-gap: 6px;
|
|
align-items: start;
|
|
grid-template-columns: 406px;
|
|
grid-template-rows: minmax(min-content, max-content) ;
|
|
position: absolute;
|
|
left: 480px; top: 233px;
|
|
grid-template-areas:"archetype"
|
|
"exchanges"
|
|
"curses"
|
|
"healing"
|
|
"stavemagic"
|
|
"orbmagic";
|
|
}
|
|
|
|
/* ARCHETYPE */
|
|
|
|
.sheet-archetype {
|
|
grid-area: archetype;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 70px 321px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-areas:"archetypename archetypename"
|
|
". ."
|
|
". ."
|
|
". ."
|
|
". ."
|
|
". ."
|
|
". .";
|
|
grid-template-rows: auto;
|
|
|
|
}
|
|
|
|
.sheet-archetypename {
|
|
grid-area: archetypename;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 222px 169px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
|
|
}
|
|
|
|
label.sheet-left-label-big {
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
text-align: left;
|
|
color: rgb(236,60,67);
|
|
display: inline;
|
|
/*font-style: italic;*/
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
line-height: 30px;
|
|
margin-bottom: 0px;
|
|
|
|
}
|
|
|
|
input.sheet-char-inputs-title{
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
display: inline;
|
|
height:30px;
|
|
width:169px;
|
|
font-size: 1.2em;
|
|
color:rgb(236,60,67);
|
|
text-transform: uppercase;
|
|
|
|
}
|
|
|
|
.attribute-width {
|
|
width:321px;
|
|
}
|
|
|
|
.sheet-auto-expand {
|
|
position: relative;
|
|
cursor: text;
|
|
word-wrap: break-word;
|
|
min-height: 18px;
|
|
/*width:321px;*/
|
|
line-height: 18px;
|
|
}
|
|
.sheet-auto-expand span {
|
|
visibility: hidden;
|
|
white-space: pre-wrap;
|
|
display: block;
|
|
min-height: 18px;
|
|
}
|
|
.sheet-auto-expand textarea {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
resize: none;
|
|
height: 100%;
|
|
width: 100%;
|
|
display: block;
|
|
box-sizing: border-box;
|
|
background: transparent;
|
|
/*border: none;*/
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
color: inherit;
|
|
font: inherit;
|
|
letter-spacing: inherit;
|
|
padding: inherit;
|
|
text-align: inherit;
|
|
text-transform: inherit;
|
|
font-family: 'EB Garamond', serif;
|
|
font-size: 1.2em;
|
|
min-height: 18px;
|
|
}
|
|
|
|
/* EXCHANGES */
|
|
|
|
.sheet-exchanges {
|
|
grid-area: exchanges;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 395px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
|
|
}
|
|
|
|
.charsheet .repcontrol_add,
|
|
.charsheet .repcontrol_edit,
|
|
.charsheet .repcontrol_del {
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
background-color: rgb(144,144,144);
|
|
background-image: none;
|
|
font-size: 100%;
|
|
font-weight: bold;
|
|
color: white;
|
|
width: 64px;
|
|
height: 14px;
|
|
border-width: 3px;
|
|
border-style: groove;
|
|
border-color: rgb(236,60,67);
|
|
border-radius: 0px;
|
|
|
|
}
|
|
|
|
.charsheet .repcontrol_add:hover,
|
|
.charsheet .repcontrol_edit:hover,
|
|
.charsheet .repcontrol_del:hover {
|
|
|
|
background-color: rgb(108,108,108);
|
|
|
|
}
|
|
|
|
.exchange-width {
|
|
width:267px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.red-width {
|
|
width:120px;
|
|
display: inline-block;
|
|
color:rgb(236,60,67);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.exchangelong-width {
|
|
width:322px;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* CURSES */
|
|
|
|
.sheet-curses {
|
|
grid-area: curses;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 395px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
|
|
}
|
|
|
|
.curse-width {
|
|
width:395px;
|
|
}
|
|
|
|
/* HEALING */
|
|
|
|
.sheet-healing {
|
|
grid-area: healing;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 135px 5px 225px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
|
|
}
|
|
|
|
button.sheet-healingbutton {
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
background-color: rgb(144,144,144);
|
|
font-size: 150%;
|
|
font-weight: bold;
|
|
color: white;
|
|
width: 229px;
|
|
height: 24px;
|
|
border-width: 3px;
|
|
border-style: groove;
|
|
border-color: rgb(236,60,67);
|
|
border-radius: 0px;
|
|
|
|
}
|
|
|
|
button.sheet-healingbuttonshort {
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
background-color: rgb(144,144,144);
|
|
font-size: 150%;
|
|
font-weight: bold;
|
|
color: white;
|
|
width: 119px;
|
|
height: 24px;
|
|
border-width: 3px;
|
|
border-style: groove;
|
|
border-color: rgb(236,60,67);
|
|
border-radius: 0px;
|
|
|
|
}
|
|
|
|
/* STAVE MAGIC */
|
|
|
|
.sheet-stavemagic {
|
|
grid-area: stavemagic;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 395px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
grid-template-areas:"stavemagictitle"
|
|
"stavemagicdetails";
|
|
|
|
}
|
|
|
|
.sheet-stavemagictitle {
|
|
grid-area: stavemagictitle;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 130px 219px 40px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
|
|
}
|
|
|
|
.sheet-stavemagicdetails {
|
|
grid-area: stavemagicdetails;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 395px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
|
|
}
|
|
|
|
.stavemagic-width {
|
|
width:395px;
|
|
}
|
|
|
|
input.sheet-stavemagic-inputs{
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
display: inline;
|
|
height:30px;
|
|
width:279px;
|
|
font-size: 1.2em;
|
|
color:rgb(236,60,67);
|
|
text-transform: uppercase;
|
|
|
|
}
|
|
|
|
.sheet-stavemagicdetails input[type=number].sheet-useable-inputs,
|
|
.sheet-orbmagicdetails input[type=number].sheet-useable-inputs {
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
color: black;
|
|
display: inline;
|
|
height:30px;
|
|
width:50px;
|
|
text-align: center;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
/* ORB MAGIC */
|
|
|
|
.sheet-orbmagic {
|
|
grid-area: orbmagic;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 395px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
grid-template-areas:"orbmagictitle"
|
|
"orbmagicdetails";
|
|
|
|
}
|
|
|
|
.sheet-orbmagictitle {
|
|
grid-area: orbmagictitle;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 224px 125px 40px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
|
|
}
|
|
|
|
.sheet-orbmagicdetails {
|
|
grid-area: orbmagicdetails;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 395px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
|
|
}
|
|
|
|
.orbmagic-width {
|
|
width:395px;
|
|
}
|
|
|
|
input.sheet-orbmagic-inputs{
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
display: inline;
|
|
height:30px;
|
|
width:279px;
|
|
font-size: 1.2em;
|
|
color:rgb(236,60,67);
|
|
text-transform: uppercase;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*------------- NPC - Styling -------------*/
|
|
|
|
/* NPC ROLLERS */
|
|
|
|
.sheet-npcrollers {
|
|
grid-area: npcrollers;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 140px 2px 90px 10px 90px 50px 32px 130px 2px 90px 10px 90px 50px ;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: 30px;
|
|
|
|
}
|
|
|
|
select.sheet-attribute-dropdowns-npc{
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
display: inline;
|
|
height:30px;
|
|
width:90px;
|
|
|
|
}
|
|
|
|
|
|
/* SPECIALS */
|
|
|
|
.sheet-specials {
|
|
grid-area: specials;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 844px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
grid-template-areas:"specialstitle"
|
|
"specialsdetails";
|
|
|
|
}
|
|
|
|
.sheet-specialstitle {
|
|
grid-area: specialstitle;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 234px 280px 40px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
|
|
}
|
|
|
|
.sheet-specialsdetails {
|
|
grid-area: specialsdetails;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 844px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
|
|
}
|
|
|
|
.specials-width {
|
|
width:522px;
|
|
display: inline-block;
|
|
}
|
|
|
|
input.sheet-specials-inputs{
|
|
|
|
font-family: 'EB Garamond', serif;
|
|
display: inline;
|
|
height:30px;
|
|
width:260px;
|
|
font-size: 1.2em;
|
|
color:rgb(236,60,67);
|
|
text-transform: uppercase;
|
|
|
|
}
|
|
|
|
/* APPEARANCE */
|
|
|
|
.sheet-appearance {
|
|
grid-area: appearance;
|
|
align-self: self-start;
|
|
font-family: 'EB Garamond', serif;
|
|
grid-template-columns: 844px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-rows: auto;
|
|
|
|
}
|
|
|
|
.appearance-width {
|
|
width:844px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*------------- Roll Template Styling -------------*/
|
|
|
|
|
|
/* ROLL TEMPLATE STYLING - ATTRIBUTE */
|
|
|
|
.sheet-rolltemplate-attribute div.sheet-attribute-container{
|
|
background-color:rgb(144,144,144);
|
|
font-family: 'EB Garamond', serif;
|
|
border-width: 8px;
|
|
border-style: groove;
|
|
border-color: rgb(236,60,67);
|
|
border-radius: 0px;
|
|
}
|
|
.sheet-rolltemplate-attribute .sheet-attribute-roll-header{
|
|
|
|
font-weight: bold;
|
|
color: #fcedd8;
|
|
font-size:large;
|
|
text-align:left;
|
|
text-shadow: 2px 2px 0px #eb452b,
|
|
4px 4px 0px #efa032;
|
|
}
|
|
.sheet-rolltemplate-attribute .sheet-attribute-type{
|
|
font-size:large;
|
|
text-align: left;
|
|
padding: 5px;
|
|
font-weight: normal;
|
|
font-size:110%;
|
|
color: white;
|
|
|
|
|
|
}
|
|
.sheet-rolltemplate-attribute .sheet-attribute-checktype{
|
|
font-size:large;
|
|
text-align: right;
|
|
padding: 5px;
|
|
font-weight: bold;
|
|
font-size:110%;
|
|
color: white;
|
|
|
|
|
|
}
|
|
|
|
.sheet-rolltemplate-attribute .sheet-attribute-roll-header .sheet-attribute-roll-result {
|
|
background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Red%20Giant/red-moon-transparent.png?raw=true"); /*Red moon*/
|
|
background-size: 60%;
|
|
align-items: center;
|
|
justify-items: center;
|
|
background-repeat: no-repeat;
|
|
padding-right: 50px;
|
|
margin-right: -50px;
|
|
padding-bottom: 25px;
|
|
margin-bottom: -25px;
|
|
padding-top: 5px;
|
|
margin-top: -5px;
|
|
|
|
}
|
|
|
|
.sheet-rolltemplate-attribute .sheet-attribute-roll-header .sheet-attribute-roll-result .inlinerollresult{
|
|
text-align: center;
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
padding-top: 0px !important;
|
|
padding-bottom: 0px !important;
|
|
font-style:italic;
|
|
font-size:X-large !important;
|
|
color:white;
|
|
|
|
}
|
|
|
|
/* ROLL TEMPLATE STYLING - TREAT WOUNDS */
|
|
|
|
.sheet-rolltemplate-treatwounds div.sheet-treatwounds-container{
|
|
background-color:rgb(144,144,144);
|
|
font-family: 'EB Garamond', serif;
|
|
border-width: 8px;
|
|
border-style: groove;
|
|
border-color: rgb(236,60,67);
|
|
border-radius: 0px;
|
|
}
|
|
.sheet-rolltemplate-treatwounds .sheet-treatwounds-roll-header{
|
|
|
|
font-weight: bold;
|
|
color: #fcedd8;
|
|
font-size:large;
|
|
text-align:left;
|
|
text-shadow: 2px 2px 0px #eb452b,
|
|
4px 4px 0px #efa032;
|
|
}
|
|
.sheet-rolltemplate-treatwounds .sheet-treatwounds-type{
|
|
font-size:large;
|
|
text-align: right;
|
|
padding: 5px;
|
|
font-weight: bold;
|
|
font-size:110%;
|
|
color: white;
|
|
}
|
|
|
|
.sheet-rolltemplate-treatwounds .sheet-treatwounds-hp-header{
|
|
font-size:large;
|
|
text-align: left;
|
|
padding: 1px;
|
|
padding-bottom: 1px;
|
|
font-weight: normal;
|
|
font-size:110%;
|
|
color: white;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-treatwounds .sheet-treatwounds-hp-header .sheet-treatwounds-hp-result {
|
|
align-items: center;
|
|
justify-items: center;
|
|
|
|
}
|
|
|
|
.sheet-rolltemplate-treatwounds .sheet-treatwounds-hp-header .sheet-treatwounds-hp-result .inlinerollresult{
|
|
text-align: center;
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
padding-top: 0px !important;
|
|
padding-bottom: 0px !important;
|
|
font-style:italic;
|
|
font-size:X-large !important;
|
|
color:white;
|
|
|
|
}
|
|
|
|
|
|
/* ROLL TEMPLATE STYLING - MEAL AND REST */
|
|
|
|
.sheet-rolltemplate-mealandrest div.sheet-mealandrest-container{
|
|
background-color:rgb(144,144,144);
|
|
font-family: 'EB Garamond', serif;
|
|
border-width: 8px;
|
|
border-style: groove;
|
|
border-color: rgb(236,60,67);
|
|
border-radius: 0px;
|
|
}
|
|
.sheet-rolltemplate-mealandrest .sheet-mealandrest-roll-header{
|
|
|
|
font-weight: bold;
|
|
color: #fcedd8;
|
|
font-size:large;
|
|
text-align:left;
|
|
text-shadow: 2px 2px 0px #eb452b,
|
|
4px 4px 0px #efa032;
|
|
}
|
|
.sheet-rolltemplate-mealandrest .sheet-mealandrest-type{
|
|
font-size:large;
|
|
text-align: right;
|
|
padding: 5px;
|
|
font-weight: bold;
|
|
font-size:110%;
|
|
color: white;
|
|
}
|
|
|
|
.sheet-rolltemplate-mealandrest .sheet-mealandrest-hp-header,
|
|
.sheet-rolltemplate-mealandrest .sheet-mealandrest-spirit-header,
|
|
.sheet-rolltemplate-mealandrest .sheet-mealandrest-sanity-header{
|
|
font-size:large;
|
|
text-align: left;
|
|
padding: 1px;
|
|
padding-bottom: 1px;
|
|
font-weight: normal;
|
|
font-size:110%;
|
|
color: white;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-mealandrest .sheet-mealandrest-hp-header .sheet-mealandrest-hp-result,
|
|
.sheet-rolltemplate-mealandrest .sheet-mealandrest-spirit-header .sheet-mealandrest-spirit-result,
|
|
.sheet-rolltemplate-mealandrest .sheet-mealandrest-sanity-header .sheet-mealandrest-sanity-result {
|
|
align-items: center;
|
|
justify-items: center;
|
|
|
|
}
|
|
|
|
.sheet-rolltemplate-mealandrest .sheet-mealandrest-hp-header .sheet-mealandrest-hp-result .inlinerollresult,
|
|
.sheet-rolltemplate-mealandrest .sheet-mealandrest-spirit-header .sheet-mealandrest-spirit-result .inlinerollresult,
|
|
.sheet-rolltemplate-mealandrest .sheet-mealandrest-sanity-header .sheet-mealandrest-sanity-result .inlinerollresult{
|
|
text-align: center;
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
padding-top: 0px !important;
|
|
padding-bottom: 0px !important;
|
|
font-style:italic;
|
|
font-size:X-large !important;
|
|
color:white;
|
|
|
|
}
|
|
|
|
|
|
|
|
|