mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
1425 lines
26 KiB
CSS
1425 lines
26 KiB
CSS
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
|
|
|
|
|
|
/*Configure the tab buttons*/
|
|
.charsheet .sheet-main_char,
|
|
.charsheet .sheet-equipment,
|
|
.charsheet .sheet-spells,
|
|
.charsheet .sheet-settings,
|
|
.charsheet .sheet-vehicle {
|
|
display: none;
|
|
}
|
|
|
|
/* show the selected tab */
|
|
.charsheet .sheet-tabstoggle[value="main_char"] ~ div.sheet-main_char,
|
|
.charsheet .sheet-tabstoggle[value="equipment"] ~ div.sheet-equipment,
|
|
.charsheet .sheet-tabstoggle[value="spells"] ~ div.sheet-spells,
|
|
.charsheet .sheet-tabstoggle[value="settings"] ~ div.sheet-settings,
|
|
.charsheet .sheet-tabstoggle[value="vehicle"] ~ div.sheet-vehicle {
|
|
display: grid;
|
|
}
|
|
|
|
|
|
.tab_button{
|
|
background-color: olive;
|
|
color: ghostwhite;
|
|
}
|
|
|
|
.tab_button:focus, .tab_button:active{
|
|
background-color: darkolivegreen;
|
|
color: black;
|
|
}
|
|
|
|
.tab_button_selected{
|
|
background-color: darkolivegreen;
|
|
color: black;
|
|
}
|
|
|
|
.charsheet .settings_button{
|
|
font-family: 'Material Icons';
|
|
position: relative;
|
|
top: 3px;
|
|
}
|
|
|
|
.helper_button{
|
|
background-color: olive;
|
|
/* color: ghostwhite; */
|
|
float: right;
|
|
}
|
|
|
|
/*----------------- main_char Layout ------------------*/
|
|
|
|
/* A CSS Grid example using "grid-template-areas"
|
|
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
|
|
*/
|
|
.sheet-main_char {
|
|
display: grid;
|
|
width: 800px;
|
|
height: 1200px;
|
|
grid-gap: 4px;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
grid-template-rows: 60px 2fr 1fr 1fr 3fr;
|
|
grid-template-areas:
|
|
"mc_header mc_header mc_header mc_header mc_header"
|
|
"common common common common common"
|
|
"stress stress soak injuries injuries"
|
|
"attr attr attr attr attr"
|
|
"skills skills skills skills skills";
|
|
}
|
|
|
|
|
|
/*----------------- equipment Layout ------------------*/
|
|
|
|
/* A CSS Grid example using "grid-template-areas"
|
|
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
|
|
*/
|
|
.sheet-equipment {
|
|
display: grid;
|
|
width: 800px;
|
|
/* height: 600px; */
|
|
grid-gap: 4px;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 60px 250px auto auto;
|
|
grid-template-areas:
|
|
"e_header"
|
|
"equip"
|
|
"weapons"
|
|
"talents";
|
|
}
|
|
|
|
/*----------------- spells Layout ------------------*/
|
|
|
|
/* A CSS Grid example using "grid-template-areas"
|
|
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
|
|
*/
|
|
.sheet-spells {
|
|
display: grid;
|
|
width: 800px;
|
|
/* height: 400px; */
|
|
grid-gap: 4px;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 60px auto;
|
|
grid-template-areas:
|
|
"s_header"
|
|
"magic"
|
|
"spells";
|
|
}
|
|
|
|
|
|
/*----------------- vehicle Layout ------------------*/
|
|
|
|
/* A CSS Grid example using "grid-template-areas"
|
|
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
|
|
*/
|
|
.sheet-vehicle {
|
|
display: grid;
|
|
width: 800px;
|
|
/* height: 600px; */
|
|
grid-gap: 4px;
|
|
grid-template-columns: 10fr 5fr 5fr 6fr;
|
|
grid-template-rows: 60px 4fr 5fr auto;
|
|
grid-template-areas:
|
|
"v_header v_header v_header v_header"
|
|
"v_main v_main v_main v_main"
|
|
"v_stress v_injuries v_rolls v_truths"
|
|
"v_weapons v_weapons v_weapons v_weapons";
|
|
}
|
|
|
|
|
|
/*----------------- settings Layout ------------------*/
|
|
|
|
/* A CSS Grid example using "grid-template-areas"
|
|
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
|
|
*/
|
|
.sheet-settings {
|
|
display: grid;
|
|
width: 800px;
|
|
height: 600px;
|
|
grid-gap: 4px;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 60px 1fr;
|
|
grid-template-areas:
|
|
"st_header st_header"
|
|
"settings_left settings_right";
|
|
}
|
|
|
|
|
|
/*----------------- GENERAL CSS ------------------*/
|
|
body.sheet-darkmode {
|
|
--dark-secondarytext: ghostwhite;
|
|
}
|
|
|
|
body.sheet-darkmode .charactersheet {
|
|
background-color: #1f1f1f;
|
|
}
|
|
|
|
section {
|
|
padding: 5px;
|
|
border-style: solid;
|
|
}
|
|
|
|
.hide_element{
|
|
display: none;
|
|
}
|
|
|
|
.show_element{
|
|
display: block;
|
|
}
|
|
|
|
.show_element_inline{
|
|
display: inline-block;
|
|
}
|
|
|
|
.show_element_grid{
|
|
display: grid;
|
|
}
|
|
|
|
.chat_button:before {
|
|
content: '' !important;
|
|
}
|
|
|
|
.chat_button {
|
|
height: 35%;
|
|
width: 50%;
|
|
background-image: var(--chat);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 70% 70%;
|
|
background-color: #f5f5f5;
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.chat_button:hover {
|
|
height: 35%;
|
|
width: 50%;
|
|
background-image: var(--chat);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 70% 70%;
|
|
background-color: #dcdcdc;
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
|
|
.attributeOutOfBounds {
|
|
background-color: bisque;
|
|
}
|
|
|
|
|
|
/* CSS Flexbox styling, used for adjusting how content inside section behaves */
|
|
.f-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.f-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.wrap {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.nowrap {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.f-center {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.f1 {
|
|
flex: 1;
|
|
}
|
|
|
|
.f2 {
|
|
flex: 2;
|
|
}
|
|
|
|
.f3 {
|
|
flex: 3;
|
|
}
|
|
|
|
.f4 {
|
|
flex: 4;
|
|
}
|
|
|
|
.f5 {
|
|
flex: 5;
|
|
}
|
|
|
|
.f6 {
|
|
flex: 6;
|
|
}
|
|
|
|
.f7 {
|
|
flex: 7;
|
|
}
|
|
|
|
.f8 {
|
|
flex: 8;
|
|
}
|
|
|
|
.f12 {
|
|
flex: 12;
|
|
}
|
|
|
|
/*----------------- Text & Input styling -----------------*/
|
|
|
|
@import url("https://fonts.googleapis.com/css?family=Lexend&display=swap");
|
|
|
|
|
|
/* these are for overwriting default CSS that comes from Roll20 */
|
|
|
|
.charsheet * {
|
|
font-family: "Lexend";
|
|
--chat: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Achtung!_Cthulhu_2d20/img/chat.png");
|
|
}
|
|
|
|
.charsheet h1 {
|
|
display: inline;
|
|
}
|
|
|
|
.charsheet h3 {
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet label {
|
|
margin: 3px;
|
|
padding: 3px 0 0 0;
|
|
}
|
|
|
|
.charsheet input[type="text"],
|
|
input[type="number"], select {
|
|
margin: 2px 4px;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.charsheet select {
|
|
width: auto;
|
|
min-width: 125px;
|
|
}
|
|
|
|
.charsheet textarea {
|
|
width: 95%;
|
|
height: 85%;
|
|
resize: none;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.charsheet hr {
|
|
border-top: 1px solid black;
|
|
margin: 5px;
|
|
}
|
|
|
|
/*------------- header Section-specific CSS -------------*/
|
|
.mc_header {
|
|
grid-area: mc_header;
|
|
background-color: darkolivegreen;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
color: ghostwhite;
|
|
}
|
|
.mc_header h1 {
|
|
color:ghostwhite;
|
|
}
|
|
|
|
.mc_header span {
|
|
font-size: 2em;
|
|
}
|
|
|
|
|
|
|
|
/*------------- main_char Section-specific CSS -------------*/
|
|
.common {
|
|
grid-area: common;
|
|
background-color: linen;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.common label{
|
|
background-color: darkolivegreen;
|
|
padding-right: 25px;
|
|
padding-top: 3px;
|
|
color: ghostwhite;
|
|
width: fit-content;
|
|
}
|
|
|
|
.common .truth_text {
|
|
height: 75px;
|
|
}
|
|
|
|
.stress {
|
|
grid-area: stress;
|
|
background-color: linen;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.stress label{
|
|
background-color: darkolivegreen;
|
|
padding-right: 25px;
|
|
padding-top: 3px;
|
|
color: ghostwhite;
|
|
width: fit-content;
|
|
}
|
|
|
|
.stress input[type="checkbox"]{
|
|
width: 1.75em;
|
|
height: 1.75em;
|
|
position: relative;
|
|
margin: 1px;
|
|
}
|
|
|
|
.stress input[type="checkbox"]::after {
|
|
content: " ";
|
|
width: 90%;
|
|
height: 90%;
|
|
border: 1px solid black;
|
|
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
-webkit-transform: translate(-50%,-50%);
|
|
-moz-transform: translate(-50%,-50%);
|
|
-ms-transform: translate(-50%,-50%);
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
|
|
|
|
.stress input[type="checkbox"]:checked:after {
|
|
content: "X";
|
|
color: black;
|
|
width: 90%;
|
|
height: 90%;
|
|
background: white;
|
|
border: 1px solid black;
|
|
text-align: center;
|
|
font-size: large;
|
|
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
-webkit-transform: translate(-50%,-50%);
|
|
-moz-transform: translate(-50%,-50%);
|
|
-ms-transform: translate(-50%,-50%);
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
|
|
.disableStressBox {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.disableStressBox:after {
|
|
background: darkgrey;
|
|
}
|
|
|
|
.stress_sublabel {
|
|
font-weight: bold;
|
|
font-size: 1.2em;
|
|
text-align: center;
|
|
}
|
|
|
|
.stress_box_row {
|
|
width: fit-content;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
#attr_stress_attributes, #attr_stress_total {
|
|
background-color: #dcdcdc;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.soak {
|
|
grid-area: soak;
|
|
background-color: linen;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.soak label{
|
|
background-color: darkolivegreen;
|
|
padding-right: 25px;
|
|
padding-top: 3px;
|
|
color: ghostwhite;
|
|
width: fit-content;
|
|
}
|
|
|
|
.injuries {
|
|
grid-area: injuries;
|
|
background-color: linen;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.injuries label{
|
|
background-color: darkolivegreen;
|
|
padding-right: 25px;
|
|
padding-top: 3px;
|
|
color: ghostwhite;
|
|
width: fit-content;
|
|
}
|
|
|
|
.injuries div {
|
|
height: 90%;
|
|
}
|
|
|
|
.attr {
|
|
grid-area: attr;
|
|
background-color: linen;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.attr label{
|
|
background-color: olive;
|
|
padding-right: 5px;
|
|
padding-top: 3px;
|
|
color: ghostwhite;
|
|
}
|
|
|
|
.attr h3{
|
|
background-color: darkolivegreen;
|
|
padding-right: 5px;
|
|
padding-top: 3px;
|
|
margin: 3px;
|
|
color: ghostwhite;
|
|
}
|
|
|
|
.attribute_header {
|
|
display: inline-flex;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.skills {
|
|
grid-area: skills;
|
|
background-color: linen;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.skills label{
|
|
background-color: olive;
|
|
padding-right: 5px;
|
|
padding-top: 3px;
|
|
color: ghostwhite;
|
|
}
|
|
|
|
.skills h3{
|
|
background-color: darkolivegreen;
|
|
padding-right: 5px;
|
|
padding-top: 3px;
|
|
margin: 3px;
|
|
color: ghostwhite;
|
|
}
|
|
|
|
.skill_row {
|
|
justify-content: start;
|
|
}
|
|
|
|
.skill_row div {
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.skill_row span {
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.power {
|
|
grid-area: power;
|
|
background-color: linen;
|
|
}
|
|
|
|
.power .repcontainer[data-groupname="repeating_power"] {
|
|
padding-bottom: 0.2em;
|
|
}
|
|
|
|
.power .repcontainer[data-groupname="repeating_power"] .repitem {
|
|
margin: 4px 0px;
|
|
}
|
|
|
|
.attack {
|
|
grid-area: attack;
|
|
background-color: green;
|
|
}
|
|
|
|
.inv {
|
|
grid-area: inv;
|
|
background-color: grey;
|
|
}
|
|
|
|
.misc {
|
|
grid-area: misc;
|
|
background-color: chocolate;
|
|
}
|
|
|
|
|
|
/*------------- equipment Section-specific CSS -------------*/
|
|
.e_header {
|
|
grid-area: e_header;
|
|
background-color: darkolivegreen;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
color: ghostwhite;
|
|
}
|
|
.e_header h1 {
|
|
color:ghostwhite;
|
|
}
|
|
|
|
.e_header span {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.weapons {
|
|
grid-area: weapons;
|
|
background-color: linen;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.weapons label{
|
|
background-color: olive;
|
|
padding-right: 25px;
|
|
padding-top: 3px;
|
|
color: ghostwhite;
|
|
width: fit-content;
|
|
}
|
|
|
|
.weapons h3{
|
|
background-color: darkolivegreen;
|
|
padding-right: 25px;
|
|
padding-top: 3px;
|
|
color: ghostwhite;
|
|
width: fit-content;
|
|
}
|
|
|
|
.weapons_row1 {
|
|
height:65px;
|
|
}
|
|
|
|
.weapons_row1 .stress_effects {
|
|
height:30px;
|
|
width: 95%;
|
|
}
|
|
|
|
.weapons_row2{
|
|
height:85px;
|
|
}
|
|
|
|
.weapons_row2 div{
|
|
height:50px;
|
|
width: 95%;
|
|
}
|
|
|
|
|
|
.equip {
|
|
grid-area: equip;
|
|
background-color: linen;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.equip label{
|
|
background-color: olive;
|
|
padding-right: 5px;
|
|
padding-top: 3px;
|
|
color: ghostwhite;
|
|
}
|
|
|
|
.equip h3{
|
|
background-color: darkolivegreen;
|
|
padding-right: 25px;
|
|
padding-top: 3px;
|
|
color: ghostwhite;
|
|
width: fit-content;
|
|
}
|
|
|
|
.talents {
|
|
grid-area: talents;
|
|
background-color: linen;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.talents label{
|
|
background-color: olive;
|
|
padding-right: 5px;
|
|
padding-top: 3px;
|
|
color: ghostwhite;
|
|
}
|
|
|
|
.talents h3{
|
|
background-color: darkolivegreen;
|
|
padding-right: 25px;
|
|
padding-top: 3px;
|
|
color: ghostwhite;
|
|
width: fit-content;
|
|
}
|
|
|
|
.talent_row{
|
|
height:75px;
|
|
}
|
|
|
|
|
|
/*------------- spells Section-specific CSS -------------*/
|
|
|
|
.s_header {
|
|
grid-area: s_header;
|
|
background-color: darkolivegreen;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
color: ghostwhite;
|
|
}
|
|
.s_header h1 {
|
|
color:ghostwhite;
|
|
}
|
|
|
|
.s_header span {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.magic {
|
|
grid-area: magic;
|
|
background-color: linen;
|
|
}
|
|
|
|
.magic label{
|
|
background-color: darkolivegreen;
|
|
padding-right: 25px;
|
|
padding-top: 3px;
|
|
color: ghostwhite;
|
|
width: fit-content;
|
|
}
|
|
|
|
.magic h3{
|
|
background-color: olive;
|
|
padding-right: 5px;
|
|
padding-top: 3px;
|
|
margin: 3px;
|
|
color: ghostwhite;
|
|
}
|
|
|
|
#attr_spells_power_attributes, #attr_spells_power_total {
|
|
background-color: #dcdcdc;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.spells_sublabel {
|
|
font-weight: bold;
|
|
font-size: 1.2em;
|
|
text-align: left;
|
|
}
|
|
|
|
.spells {
|
|
grid-area: spells;
|
|
background-color: linen;
|
|
/* justify-content: space-evenly; */
|
|
}
|
|
|
|
.spells label{
|
|
background-color: olive;
|
|
padding-right: 25px;
|
|
padding-top: 3px;
|
|
color: ghostwhite;
|
|
width: fit-content;
|
|
}
|
|
|
|
.spells h3{
|
|
background-color: darkolivegreen;
|
|
padding-right: 25px;
|
|
padding-top: 3px;
|
|
margin: 3px;
|
|
color: ghostwhite;
|
|
width: fit-content;
|
|
}
|
|
|
|
.spell_row2{
|
|
height:110px;
|
|
}
|
|
|
|
.spell_row2 div{
|
|
height:75px;
|
|
width: 95%;
|
|
}
|
|
|
|
|
|
/*------------- vehicle Section-specific CSS -------------*/
|
|
.v_header {
|
|
grid-area: v_header;
|
|
background-color: darkolivegreen;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
color: ghostwhite;
|
|
}
|
|
.v_header h1 {
|
|
color:ghostwhite;
|
|
}
|
|
|
|
.v_header span {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.v_main {
|
|
grid-area: v_main;
|
|
background-color: linen;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.v_main label{
|
|
background-color: darkolivegreen;
|
|
padding-right: 25px;
|
|
padding-top: 3px;
|
|
color: ghostwhite;
|
|
width: fit-content;
|
|
}
|
|
|
|
.v_weapons {
|
|
grid-area: v_weapons;
|
|
background-color: linen;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.v_weapons label{
|
|
background-color: olive;
|
|
padding-right: 25px;
|
|
padding-top: 3px;
|
|
color: ghostwhite;
|
|
width: fit-content;
|
|
}
|
|
|
|
.v_weapons h3{
|
|
background-color: darkolivegreen;
|
|
padding-right: 25px;
|
|
padding-top: 3px;
|
|
color: ghostwhite;
|
|
width: fit-content;
|
|
}
|
|
|
|
.vehicle_weapons_row1 {
|
|
height:65px;
|
|
}
|
|
|
|
.vehicle_weapons_row1 .stress_effects {
|
|
height:30px;
|
|
width: 95%;
|
|
}
|
|
|
|
.vehicle_weapons_row2{
|
|
height:85px;
|
|
}
|
|
|
|
.vehicle_weapons_row2 div{
|
|
height:50px;
|
|
width: 95%;
|
|
}
|
|
|
|
.v_stress {
|
|
grid-area: v_stress;
|
|
background-color: linen;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.v_stress label{
|
|
background-color: darkolivegreen;
|
|
padding-right: 25px;
|
|
padding-top: 3px;
|
|
color: ghostwhite;
|
|
width: fit-content;
|
|
}
|
|
|
|
.v_stress input[type="checkbox"]{
|
|
width: 1.75em;
|
|
height: 1.75em;
|
|
position: relative;
|
|
margin: 1px;
|
|
}
|
|
|
|
.v_stress input[type="checkbox"]::after {
|
|
content: " ";
|
|
width: 90%;
|
|
height: 90%;
|
|
border: 1px solid black;
|
|
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
-webkit-transform: translate(-50%,-50%);
|
|
-moz-transform: translate(-50%,-50%);
|
|
-ms-transform: translate(-50%,-50%);
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
|
|
.v_stress input[type="checkbox"]:checked:after {
|
|
content: "X";
|
|
color: black;
|
|
width: 90%;
|
|
height: 90%;
|
|
background: white;
|
|
border: 1px solid black;
|
|
text-align: center;
|
|
font-size: large;
|
|
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
-webkit-transform: translate(-50%,-50%);
|
|
-moz-transform: translate(-50%,-50%);
|
|
-ms-transform: translate(-50%,-50%);
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.v_injuries {
|
|
grid-area: v_injuries;
|
|
background-color: linen;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.v_injuries label{
|
|
background-color: darkolivegreen;
|
|
padding-right: 25px;
|
|
padding-top: 3px;
|
|
color: ghostwhite;
|
|
width: fit-content;
|
|
}
|
|
|
|
|
|
|
|
.v_injuries input[type="checkbox"]{
|
|
width: 1.75em;
|
|
height: 1.75em;
|
|
position: relative;
|
|
margin: 1px;
|
|
}
|
|
|
|
.v_injuries input[type="checkbox"]::after {
|
|
content: " ";
|
|
width: 90%;
|
|
height: 90%;
|
|
border: 1px solid black;
|
|
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
-webkit-transform: translate(-50%,-50%);
|
|
-moz-transform: translate(-50%,-50%);
|
|
-ms-transform: translate(-50%,-50%);
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
|
|
.v_injuries input[type="checkbox"]:checked:after {
|
|
content: "X";
|
|
color: black;
|
|
width: 90%;
|
|
height: 90%;
|
|
background: white;
|
|
border: 1px solid black;
|
|
text-align: center;
|
|
font-size: large;
|
|
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
-webkit-transform: translate(-50%,-50%);
|
|
-moz-transform: translate(-50%,-50%);
|
|
-ms-transform: translate(-50%,-50%);
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.v_rolls {
|
|
grid-area: v_rolls;
|
|
background-color: linen;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.v_rolls label{
|
|
background-color: darkolivegreen;
|
|
padding-right: 25px;
|
|
padding-top: 3px;
|
|
color: ghostwhite;
|
|
width: fit-content;
|
|
}
|
|
|
|
|
|
.v_truths {
|
|
grid-area: v_truths;
|
|
background-color: linen;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.v_truths label{
|
|
background-color: darkolivegreen;
|
|
padding-right: 25px;
|
|
padding-top: 3px;
|
|
color: ghostwhite;
|
|
width: fit-content;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*------------- settings Section-specific CSS -------------*/
|
|
.st_header {
|
|
grid-area: st_header;
|
|
background-color: darkolivegreen;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
color: ghostwhite;
|
|
}
|
|
.st_header h1 {
|
|
color:ghostwhite;
|
|
}
|
|
|
|
.st_header span {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.settings_left {
|
|
grid-area: settings_left;
|
|
background-color: linen;
|
|
/* justify-content: space-evenly; */
|
|
}
|
|
|
|
.settings_right {
|
|
grid-area: settings_right;
|
|
background-color: linen;
|
|
/* justify-content: space-evenly; */
|
|
}
|
|
|
|
.settings_left label,
|
|
.settings_right label{
|
|
background-color: darkolivegreen;
|
|
padding-right: 25px;
|
|
padding-top: 3px;
|
|
color: ghostwhite;
|
|
width: fit-content;
|
|
}
|
|
|
|
/*------------------------------------*\
|
|
#skill TEMPLATES
|
|
\*------------------------------------*/
|
|
|
|
.sheet-rolltemplate-skill {
|
|
font-family: "Lexend";
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .sheet-container {
|
|
border: 3px solid black;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .top-border {
|
|
border-top: 2px solid black;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .sheet-header {
|
|
background-color: darkolivegreen;
|
|
color: #FFF;
|
|
text-align: left;
|
|
text-transform: capitalize;
|
|
padding: 5px;
|
|
border-bottom: 2px solid black;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .sheet-title {
|
|
font-size: 1.4em;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .sheet-subtitle {
|
|
font-size: 1.2em;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .sheet-description {
|
|
font-size: 1.1em;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .sheet-result .sheet-success {
|
|
background-color: lightyellow;
|
|
color: darkgreen;
|
|
text-align: center;
|
|
text-transform: capitalize;
|
|
padding: 5px;
|
|
border-bottom: 2px solid black;
|
|
font-weight: bold;
|
|
font-size: 1.2em;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .sheet-result .sheet-failure {
|
|
background-color: lightyellow;
|
|
color: red;
|
|
text-align: center;
|
|
text-transform: capitalize;
|
|
padding: 5px;
|
|
border-bottom: 2px solid black;
|
|
font-weight: bold;
|
|
font-size: 1.2em;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .sheet-content {
|
|
display: grid;
|
|
background: #FFF;
|
|
color: #333333;
|
|
grid-template-columns: auto auto;
|
|
line-height: 1.4em;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .sheet-content>div {
|
|
padding: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .sheet-content :nth-child(4n+3),
|
|
.sheet-rolltemplate-skill .sheet-content :nth-child(4n) {
|
|
background: #EEE;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .sheet-roll-bold .inlinerollresult {
|
|
background-color:transparent;
|
|
border:0px transparent !important;
|
|
font-size:15px;
|
|
font-weight: bold;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .sheet-roll-bold-highlight .inlinerollresult {
|
|
background-color: #fef68e;
|
|
border:0px transparent !important;
|
|
font-size:15px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .sheet-show-details {
|
|
background: lightyellow;
|
|
color: #333333;
|
|
line-height: 1.1em;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .sheet-show-details:hover ~ .sheet-details-wrapper {
|
|
display: block;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .sheet-details-wrapper {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .sheet-details-wrapper:hover {
|
|
display: block;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .sheet-details {
|
|
display: grid;
|
|
background: #FFF;
|
|
color: #333333;
|
|
grid-template-columns: auto auto;
|
|
line-height: 1.4em;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .sheet-details :nth-child(4n+3),
|
|
.sheet-rolltemplate-skill .sheet-details :nth-child(4n) {
|
|
background: #EEE;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .sheet-roll-normal .inlinerollresult {
|
|
background-color:transparent;
|
|
border:0px transparent !important;
|
|
font-size:15px;
|
|
font-weight: normal;
|
|
cursor: auto;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .sheet-roll-normal-nopad .inlinerollresult {
|
|
background-color:transparent;
|
|
border:0px transparent !important;
|
|
font-size:15px;
|
|
font-weight: normal;
|
|
padding: 0px;
|
|
cursor: auto;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/*------------------------------------*\
|
|
#damage TEMPLATES
|
|
\*------------------------------------*/
|
|
|
|
.sheet-rolltemplate-damage {
|
|
font-family: "Lexend";
|
|
}
|
|
|
|
.sheet-rolltemplate-damage .sheet-container {
|
|
border: 3px solid black;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.sheet-rolltemplate-damage .top-border {
|
|
border-top: 2px solid black;
|
|
}
|
|
|
|
.sheet-rolltemplate-damage .sheet-header {
|
|
background-color: darkolivegreen;
|
|
color: #FFF;
|
|
text-align: left;
|
|
text-transform: capitalize;
|
|
padding: 5px;
|
|
border-bottom: 2px solid black;
|
|
}
|
|
|
|
.sheet-rolltemplate-damage .sheet-title {
|
|
font-size: 1.4em;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-damage .sheet-subtitle {
|
|
font-size: 1.2em;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-damage .sheet-description {
|
|
font-size: 1.1em;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-damage .sheet-content {
|
|
display: grid;
|
|
background: #FFF;
|
|
color: #333333;
|
|
grid-template-columns: auto auto;
|
|
line-height: 1.4em;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.sheet-rolltemplate-damage .sheet-content>div {
|
|
padding: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-damage .sheet-content :nth-child(4n+3),
|
|
.sheet-rolltemplate-damage .sheet-content :nth-child(4n) {
|
|
background: #EEE;
|
|
}
|
|
|
|
.sheet-rolltemplate-damage .sheet-roll-bold .inlinerollresult {
|
|
background-color:transparent;
|
|
border:0px transparent !important;
|
|
font-size:15px;
|
|
font-weight: bold;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-damage .sheet-roll-bold-highlight .inlinerollresult {
|
|
background-color: #fef68e;
|
|
border:0px transparent !important;
|
|
font-size:15px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-rolltemplate-damage .sheet-roll-normal-nopad .inlinerollresult {
|
|
background-color:transparent;
|
|
border:0px transparent !important;
|
|
font-size:15px;
|
|
font-weight: normal;
|
|
padding: 0px;
|
|
cursor: auto;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/*------------------------------------*\
|
|
#talent TEMPLATES
|
|
\*------------------------------------*/
|
|
|
|
.sheet-rolltemplate-talent {
|
|
font-family: "Lexend";
|
|
}
|
|
|
|
.sheet-rolltemplate-talent .sheet-container {
|
|
border: 3px solid black;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.sheet-rolltemplate-talent .sheet-header {
|
|
background-color: darkolivegreen;
|
|
color: #FFF;
|
|
text-align: left;
|
|
text-transform: capitalize;
|
|
padding: 5px;
|
|
border-bottom: 2px solid black;
|
|
}
|
|
|
|
.sheet-rolltemplate-talent .sheet-title{
|
|
font-size: 1.4em;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-talent .sheet-name {
|
|
font-size: 1.2em;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-talent .sheet-keywords {
|
|
font-size: 1.1em;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-talent .sheet-content {
|
|
background: #FFF;
|
|
color: #333333;
|
|
font-size: 1.1em;
|
|
line-height: 1.4em;
|
|
}
|
|
|
|
.sheet-rolltemplate-talent .sheet-content>div {
|
|
padding: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-talent .inlinerollresult {
|
|
background-color: #fef68e;
|
|
}
|
|
|
|
/*------------------------------------*\
|
|
#spell TEMPLATES
|
|
\*------------------------------------*/
|
|
|
|
.sheet-rolltemplate-spell {
|
|
font-family: "Lexend";
|
|
}
|
|
|
|
.sheet-rolltemplate-spell .sheet-container {
|
|
border: 3px solid black;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.sheet-rolltemplate-spell .sheet-header {
|
|
background-color: darkolivegreen;
|
|
color: #FFF;
|
|
text-align: left;
|
|
text-transform: capitalize;
|
|
padding: 5px;
|
|
border-bottom: 2px solid black;
|
|
}
|
|
|
|
.sheet-rolltemplate-spell .sheet-title {
|
|
font-size: 1.4em;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-spell .sheet-name {
|
|
font-size: 1.2em;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-spell .sheet-content {
|
|
display: grid;
|
|
background: #FFF;
|
|
color: #333333;
|
|
grid-template-columns: auto auto;
|
|
line-height: 1.4em;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.sheet-rolltemplate-spell .sheet-content>div {
|
|
padding: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-spell .sheet-content :nth-child(4n+3),
|
|
.sheet-rolltemplate-spell .sheet-content :nth-child(4n) {
|
|
background: #EEE;
|
|
}
|
|
|
|
.sheet-rolltemplate-spell .sheet-content2 {
|
|
display: grid;
|
|
background: #FFF;
|
|
color: #333333;
|
|
grid-template-columns: auto;
|
|
line-height: 1.4em;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.sheet-rolltemplate-spell .sheet-content2 :nth-child(2n){
|
|
background: #EEE;
|
|
}
|
|
|
|
.sheet-rolltemplate-spell .inlinerollresult {
|
|
background-color: #fef68e;
|
|
}
|
|
|
|
/*------------------------------------*\
|
|
#weapon TEMPLATES
|
|
\*------------------------------------*/
|
|
|
|
.sheet-rolltemplate-weapon {
|
|
font-family: "Lexend";
|
|
}
|
|
|
|
.sheet-rolltemplate-weapon .sheet-container {
|
|
border: 3px solid black;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.sheet-rolltemplate-weapon .sheet-header {
|
|
background-color: darkolivegreen;
|
|
color: #FFF;
|
|
text-align: left;
|
|
text-transform: capitalize;
|
|
padding: 5px;
|
|
border-bottom: 2px solid black;
|
|
}
|
|
|
|
.sheet-rolltemplate-weapon .sheet-title {
|
|
font-size: 1.4em;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-weapon .sheet-name {
|
|
font-size: 1.2em;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-weapon .sheet-content {
|
|
display: grid;
|
|
background: #FFF;
|
|
color: #333333;
|
|
grid-template-columns: auto auto;
|
|
line-height: 1.4em;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.sheet-rolltemplate-weapon .sheet-content>div {
|
|
padding: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-weapon .sheet-content :nth-child(4n+3),
|
|
.sheet-rolltemplate-weapon .sheet-content :nth-child(4n) {
|
|
background: #EEE;
|
|
}
|
|
|
|
.sheet-rolltemplate-weapon .inlinerollresult {
|
|
background-color: #fef68e;
|
|
} |