mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
970 lines
21 KiB
CSS
970 lines
21 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');
|
|
|
|
|
|
.charsheet {
|
|
font-family: "EB Garamond", serif;
|
|
background: gray;
|
|
}
|
|
|
|
.charsheet:has(> div > input[name="attr_font_picker"][value="1"]){
|
|
font-family: "Google Sans Flex", sans-serif;
|
|
}
|
|
|
|
.charsheet > div{
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
}
|
|
|
|
.charsheet > div > div.font-picker{
|
|
justify-self: end;
|
|
}
|
|
|
|
.charsheet > div > div.font-picker > span{
|
|
color: white;
|
|
-webkit-text-stroke: 0.1px black;
|
|
}
|
|
|
|
.charsheet .title-wrapper .title{
|
|
font-family: "UnifrakturCook", cursive;
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-size: 44pt;
|
|
text-align:center;
|
|
text-justify:center;
|
|
color: white;
|
|
display: grid;
|
|
place-items: center;
|
|
-webkit-text-stroke: 1px black;
|
|
}
|
|
|
|
.charsheet .title-wrapper .subtitle{
|
|
font-family: "EB Garamond", serif;
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-size: 14pt;
|
|
text-align:center;
|
|
text-justify:center;
|
|
color: black;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.charsheet .section_title,
|
|
.charsheet .input_label{
|
|
font-optical-sizing: auto;
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
font-size: 11pt;
|
|
}
|
|
|
|
.charsheet .section_title{
|
|
font-size: 13pt;
|
|
}
|
|
|
|
input,
|
|
select,
|
|
textarea{
|
|
color: black;
|
|
}
|
|
|
|
.charsheet input[type="number"]{
|
|
text-align: center;
|
|
}
|
|
|
|
input[readonly],
|
|
select[disabled],
|
|
textarea[readonly]{
|
|
cursor: pointer;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.charsheet .outer_box{
|
|
border: black 1px solid;
|
|
border-radius: 10px;
|
|
margin: 10px;
|
|
padding: 10px;
|
|
background: white;
|
|
}
|
|
|
|
.charsheet .inner_box{
|
|
|
|
}
|
|
|
|
/* Grid */
|
|
|
|
.charsheet .sheet-grid-section{
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
}
|
|
|
|
.charsheet .top_left{
|
|
grid-column: 1 / 2;
|
|
grid-row: 1 / 2;
|
|
}
|
|
|
|
.charsheet .top_right{
|
|
grid-column: 2 / 3;
|
|
grid-row: 1 / 2;
|
|
}
|
|
|
|
.charsheet .bottom_left{
|
|
grid-column: 1 / 2;
|
|
grid-row: 2 / 4;
|
|
}
|
|
|
|
.charsheet .bottom_right{
|
|
grid-column: 2 / 3;
|
|
grid-row: 2 / 4;
|
|
}
|
|
|
|
.charsheet div.top{
|
|
grid-column: 1 / 2;
|
|
grid-row: 1 / 2;
|
|
}
|
|
|
|
.charsheet div.bottom{
|
|
grid-column: 1 / 2;
|
|
grid-row: 2 / 3;
|
|
}
|
|
|
|
.charsheet .wide-grid{
|
|
grid-column-end: span 2;
|
|
}
|
|
|
|
/* TABS */
|
|
|
|
/* configure the tab buttons */
|
|
.charsheet .sheet-main,
|
|
.charsheet .sheet-details {
|
|
display: none;
|
|
}
|
|
|
|
/* style the active button */
|
|
.charsheet .sheet-tabstoggle[value="main"] ~ div .sheet-button0 {outline: 2px solid red;}
|
|
.charsheet .sheet-tabstoggle[value="details"] ~ div .sheet-button1 {outline: 2px solid red;}
|
|
|
|
/* show the selected tab */
|
|
.charsheet .sheet-tabstoggle[value="main"] ~ div.sheet-main,
|
|
.charsheet .sheet-tabstoggle[value="details"] ~ div.sheet-details {
|
|
display: block;
|
|
}
|
|
|
|
/* NUMBER FIELDS */
|
|
|
|
/*Firefox spinner buttons mod*/
|
|
/*by default is not visible*/
|
|
.charsheet input[Type="number"]{
|
|
-moz-appearance: textfield;
|
|
}
|
|
/* hover over reveals buttons*/
|
|
.charsheet input[Type="number"]:hover{
|
|
-moz-appearance: initial;
|
|
}
|
|
/* Chrome, Safari, Edge, Opera spinner buttons*/
|
|
/*by default is not visible*/
|
|
.charsheet input[type="number"]::-webkit-inner-spin-button,
|
|
.charsheet input[type="number"]::-webkit-outer-spin-button {
|
|
display: none;
|
|
}
|
|
/* hover over reveals buttons*/
|
|
.charsheet input[type="number"]:hover::-webkit-inner-spin-button,
|
|
.charsheet input[type="number"]:hover::-webkit-outer-spin-button {
|
|
display: inline
|
|
}
|
|
|
|
/* Textinputs */
|
|
.charsheet input.name_textfield{
|
|
width: 12em;
|
|
}
|
|
|
|
.charsheet select.ba_input{
|
|
min-width: 9em;
|
|
width:9em;
|
|
}
|
|
|
|
.charsheet input[type="number"].ap_cost_input{
|
|
width: 3em;
|
|
display:inline-block;
|
|
}
|
|
|
|
.charsheet input[type="number"].pool_input{
|
|
width: 3em;
|
|
display:inline-block;
|
|
}
|
|
|
|
/* Textareas */
|
|
|
|
.charsheet textarea.textbox {
|
|
resize: none;
|
|
box-sizing: border-box;
|
|
height: 6em;
|
|
}
|
|
|
|
/* Max Attributes */
|
|
|
|
span.extendedValue{
|
|
display: none;
|
|
}
|
|
|
|
input.extendedBubble{
|
|
display: none;
|
|
}
|
|
|
|
input.maxforcheck[value="1"] ~ input.extendedBubble{
|
|
display: inline-block;
|
|
}
|
|
|
|
input.maxforcheck[value="1"] ~ span.extendedValue {
|
|
display: inline-block;
|
|
}
|
|
|
|
input.maxbodcheck[value="1"] ~ input.extendedBubble{
|
|
display: inline-block;
|
|
}
|
|
|
|
input.maxbodcheck[value="1"] ~ span.extendedValue {
|
|
display: inline-block;
|
|
}
|
|
|
|
input.maxspecheck[value="1"] ~ input.extendedBubble{
|
|
display: inline-block;
|
|
}
|
|
|
|
input.maxspecheck[value="1"] ~ span.extendedValue {
|
|
display: inline-block;
|
|
}
|
|
|
|
input.maxintcheck[value="1"] ~ input.extendedBubble{
|
|
display: inline-block;
|
|
}
|
|
|
|
input.maxintcheck[value="1"] ~ span.extendedValue {
|
|
display: inline-block;
|
|
}
|
|
|
|
input.maxfeecheck[value="1"] ~ input.extendedBubble{
|
|
display: inline-block;
|
|
}
|
|
|
|
input.maxfeecheck[value="1"] ~ span.extendedValue {
|
|
display: inline-block;
|
|
}
|
|
|
|
input.maxintcheck[value="1"] ~ input.extendedBubble{
|
|
display: inline-block;
|
|
}
|
|
|
|
input.maxintcheck[value="1"] ~ span.extendedValue {
|
|
display: inline-block;
|
|
}
|
|
|
|
input.maxexpcheck[value="1"] ~ input.extendedBubble{
|
|
display: inline-block;
|
|
}
|
|
|
|
input.maxexpcheck[value="1"] ~ span.extendedValue {
|
|
display: inline-block;
|
|
}
|
|
|
|
input.maximpcheck[value="1"] ~ input.extendedBubble{
|
|
display: inline-block;
|
|
}
|
|
|
|
input.maximpcheck[value="1"] ~ span.extendedValue {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Checkboxes & Radios */
|
|
|
|
input[type="checkbox"].sheet-normal.bubbles + span::before{
|
|
content: "";
|
|
width: 10px;
|
|
height: 10px;
|
|
font-size: 41.9px;
|
|
font-family: "Arial";
|
|
text-indent: -2px;
|
|
font-weight: normal;
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-border-radius: 25%;
|
|
-webkit-border-radius: 25%;
|
|
border-radius: 25%;
|
|
}
|
|
|
|
input[type="checkbox"].sheet-normal.bubbles:has(~ input[type="checkbox"].sheet-normal.bubbles:checked) + span::before,
|
|
input[type="checkbox"].sheet-normal.bubbles:checked + span::before{
|
|
content: "•";
|
|
}
|
|
|
|
/* Hide actual dot/checkbox */
|
|
input[type="radio"].sheet-normal,
|
|
input[type="checkbox"].sheet-normal
|
|
{
|
|
position: absolute;
|
|
opacity: 0.0;
|
|
width: 15px;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/* Styles common to fake dot and checkbox */
|
|
input[type="radio"].sheet-normal + span::before,
|
|
input[type="checkbox"].sheet-normal + span::before,
|
|
.sheet-permadot::before
|
|
{
|
|
border: solid 1px #000000;
|
|
line-height: 11px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
-moz-box-shadow: 0 0 0px #000;
|
|
-webkit-box-shadow: 0 0 0px #000;
|
|
box-shadow: 0 0 0px #000;
|
|
|
|
background: #000000;
|
|
background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: -o-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: radial-gradient(#f6f6f6, #dfdfdf);
|
|
}
|
|
|
|
/* Styles common to fake dot and checkbox */
|
|
body.sheet-darkmode input[type="radio"].sheet-normal + span::before,
|
|
body.sheet-darkmode input[type="checkbox"].sheet-normal + span::before,
|
|
body.sheet-darkmode .sheet-permadot::before
|
|
{
|
|
border: solid 1px #fff;
|
|
background: #1f1f1f;
|
|
}
|
|
|
|
/* Styles unique to fake dot (checked or left of checked) */
|
|
input[type="radio"].sheet-normal + span::before,
|
|
input[type="checkbox"].sheet-normal:not(.bubbles) + span::before,
|
|
.sheet-permadot::before
|
|
{
|
|
content: "•";
|
|
width: 10px;
|
|
height: 10px;
|
|
font-size: 41.9px;
|
|
font-family: "Arial";
|
|
text-indent: -2px;
|
|
font-weight: normal;
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-border-radius: 25%;
|
|
-webkit-border-radius: 25%;
|
|
border-radius: 25%;
|
|
}
|
|
|
|
/* Remove dot from all radios _after_ selected one */
|
|
input[type="radio"].sheet-normal:checked ~ input[type="radio"] + span::before,
|
|
input[type="checkbox"].sheet-normal:not(.bubbles):not(:checked) + span::before
|
|
{
|
|
content: "";
|
|
}
|
|
|
|
input.sheet-zero:checked + span::before
|
|
{
|
|
opacity: 0;
|
|
}
|
|
|
|
input.sheet-zero:hover + span::before
|
|
{
|
|
opacity: 0.25;
|
|
font-size: 12px;
|
|
content: "✖";
|
|
text-indent: 0.5px;
|
|
}
|
|
|
|
input.sheet-zero + span::before
|
|
{
|
|
opacity: 0;
|
|
}
|
|
|
|
/* POP UP */
|
|
|
|
.overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
transition: opacity 500ms;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
.overlay:target {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
.popup {
|
|
margin: 70px auto;
|
|
padding: 20px;
|
|
background: #fff;
|
|
border-radius: 5px;
|
|
width: 30%;
|
|
position: relative;
|
|
transition: all 5s ease-in-out;
|
|
}
|
|
|
|
body.sheet-darkmode .popup {
|
|
background: #1f1f1f;
|
|
}
|
|
|
|
.popup h2 {
|
|
margin-top: 0;
|
|
color: #333;
|
|
font-family: Tahoma, Arial, sans-serif;
|
|
}
|
|
.popup .close {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 30px;
|
|
transition: all 200ms;
|
|
font-size: 30px;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
color: #333;
|
|
}
|
|
.popup .close:hover {
|
|
color: #06D85F;
|
|
}
|
|
.popup .content {
|
|
max-height: 30%;
|
|
overflow: auto;
|
|
}
|
|
|
|
/* Main Page */
|
|
|
|
.charsheet div.sheet-main div.sheet-grid-section{
|
|
display: grid;
|
|
grid-template-columns: 30% 30% 30% 10%;
|
|
}
|
|
|
|
/* Character Details */
|
|
.charsheet div.character-details.sub-grid{
|
|
display: grid;
|
|
grid-template-columns: 33.3% 33.3% 33.3%;
|
|
grid-auto-rows: max-content;
|
|
|
|
grid-column: 2 / 5;
|
|
grid-row: 1 / 2;
|
|
}
|
|
|
|
.charsheet div.character-details.sub-grid div.top-left{
|
|
grid-column: 1 / 3;
|
|
grid-row: 1 / 2;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.charsheet div.character-details.sub-grid div.top-right{
|
|
grid-column: 3 / 4;
|
|
grid-row: 1 / 2;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.charsheet div.character-details.sub-grid div.bottom-left{
|
|
grid-column: 1 / 2;
|
|
grid-row: 2 / 3;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.charsheet div.character-details.sub-grid div.bottom-middle{
|
|
grid-column: 2 / 3;
|
|
grid-row: 2 / 3;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.charsheet div.character-details.sub-grid div.bottom-right{
|
|
grid-column: 3 / 4;
|
|
grid-row: 2 / 3;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.charsheet div.character-details input[type="text"]{
|
|
width: 100%;
|
|
}
|
|
|
|
/* Signature Move */
|
|
.charsheet div.charge-wrapper.sub-grid{
|
|
display: grid;
|
|
grid-template-columns: 30% 70%;
|
|
|
|
grid-column: 1 / 2;
|
|
grid-row: 2 / 3;
|
|
}
|
|
|
|
.charsheet div.charge-wrapper .box.sub-grid{
|
|
display: grid;
|
|
grid-template-columns: 15% 70% 15%;
|
|
|
|
margin-top:2em;
|
|
}
|
|
|
|
.charsheet div.charge-wrapper .box input{
|
|
width:100%;
|
|
}
|
|
|
|
.charsheet .popup .content{
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
|
|
margin-top:2em;
|
|
}
|
|
|
|
/* Stats */
|
|
.charsheet div.stats-wrapper.sub-grid{
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
grid-template-rows: 50% 50%;
|
|
|
|
grid-column: 1 / 2;
|
|
grid-row: 3 / 4;
|
|
|
|
gap:1em;
|
|
}
|
|
|
|
.charsheet div.stats-wrapper div.stat-wrapper{
|
|
display: grid;
|
|
grid-template-columns: 100%;
|
|
grid-template-rows: 50% 50%;
|
|
}
|
|
|
|
.charsheet .stat_dec,
|
|
.charsheet .stat_inc{
|
|
border: solid 1px #000000;
|
|
line-height: 11px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
-moz-box-shadow: 0 0 0px #000;
|
|
-webkit-box-shadow: 0 0 0px #000;
|
|
box-shadow: 0 0 0px #000;
|
|
|
|
background: #000000;
|
|
background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: -o-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: radial-gradient(#f6f6f6, #dfdfdf);
|
|
|
|
content:"-";
|
|
width: 10px;
|
|
height: 10px;
|
|
font-size: 15px;
|
|
font-family: "Arial";
|
|
text-indent: -2px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
text-justify: center;
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-border-radius: 25%;
|
|
-webkit-border-radius: 25%;
|
|
border-radius: 25%;
|
|
}
|
|
|
|
/* Status Effects */
|
|
.charsheet div.status-effect-wrapper.sub-grid{
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
|
|
grid-column: 1 / 2;
|
|
grid-row: 4 / 5;
|
|
}
|
|
|
|
.charsheet div.status-effect-wrapper.sub-grid div.effect-wrapper{
|
|
display: grid;
|
|
grid-template-columns: 80% 20%;
|
|
}
|
|
|
|
/* Attributes */
|
|
.charsheet div.sub-grid.attributes-wrapper{
|
|
display: grid;
|
|
grid-template-columns: 100%;
|
|
|
|
grid-column: 2 / 3;
|
|
grid-row: 2 / 6;
|
|
}
|
|
|
|
.charsheet div.attribute-wrapper{
|
|
display: grid;
|
|
grid-template-columns: 20% 40% 40%;
|
|
}
|
|
|
|
.charsheet div.attribute-wrapper div.attribute_points{
|
|
justify-self: end;
|
|
}
|
|
|
|
/* Talents */
|
|
.charsheet div.talents-wrapper.sub-grid{
|
|
display: grid;
|
|
grid-template-columns: 100%;
|
|
|
|
grid-column: 3 / 4;
|
|
grid-row: 2 / 5;
|
|
}
|
|
|
|
.charsheet div.talents-wrapper div.talent-wrapper{
|
|
display: grid;
|
|
grid-template-columns: 20% 40% 40%;
|
|
}
|
|
|
|
.charsheet div.talents-wrapper div.talent-wrapper div.pool_points{
|
|
justify-self: end;
|
|
}
|
|
|
|
.charsheet div.talents-wrapper div.talent-wrapper div.skilled_point{
|
|
justify-self: center;
|
|
}
|
|
|
|
/* Plot Points */
|
|
.charsheet div.plot-points-wrapper.sub-grid{
|
|
display: grid;
|
|
grid-template-columns: 100%;
|
|
grid-template-rows: 20% 10% 10% 10% 10% 10% 15% 15%;
|
|
|
|
grid-column: 4 / 5;
|
|
grid-row: 2 / 5;
|
|
}
|
|
|
|
.charsheet div.plot-points-wrapper.sub-grid div{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.charsheet div.plot-points-wrapper.sub-grid span{
|
|
justify-self:center;
|
|
align-self:center;
|
|
}
|
|
|
|
.charsheet div.plot-points-wrapper.sub-grid input[type="number"]{
|
|
font-size: 15pt;
|
|
width:2em;
|
|
}
|
|
|
|
.charsheet div.plot-points-wrapper > div:has(~ div > input[type="checkbox"].sheet-normal.bubbles:checked) > span::before{
|
|
content: "•";
|
|
}
|
|
|
|
/* Actions */
|
|
.charsheet div.actions-wrapper.sub-grid{
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
|
|
grid-column: 1 / 2;
|
|
grid-row: 5 / 6;
|
|
}
|
|
|
|
/* Abilities */
|
|
.charsheet div.abilities-wrapper.sub-grid{
|
|
display: grid;
|
|
grid-template-columns: 100%;
|
|
|
|
grid-column: 3 / 5;
|
|
grid-row: 5 / 6;
|
|
}
|
|
|
|
.charsheet div.abilities-wrapper.sub-grid .repcontrol[data-groupname=repeating_abilities] button.repcontrol_edit,
|
|
.charsheet div.abilities-wrapper.sub-grid .repcontrol[data-groupname=repeating_abilities] button.repcontrol_add,
|
|
.charsheet div.abilities-wrapper.sub-grid .repcontrol[data-groupname=repeating_abilities] button.repcontrol_del {
|
|
display: none;
|
|
}
|
|
|
|
/* Cumulative Talents */
|
|
.charsheet div.cum-talents-wrapper.sub-grid{
|
|
display: grid;
|
|
grid-template-columns: 100%;
|
|
|
|
grid-column: 1 / 2;
|
|
grid-row: 6 / 7;
|
|
}
|
|
|
|
/* Weapon Talents */
|
|
.charsheet div.weapon-talents-wrapper.sub-grid{
|
|
display: grid;
|
|
grid-template-columns: 100%;
|
|
|
|
grid-column: 2 / 5;
|
|
grid-row: 6 / 7;
|
|
}
|
|
|
|
.charsheet div.sheet-main div.weapon-talent-wrapper{
|
|
display: grid;
|
|
grid-template-columns: 5% 20% 10% 10% 20% 35%;
|
|
|
|
grid-column: 2 / 5;
|
|
grid-row: 6 / 7;
|
|
}
|
|
|
|
.charsheet div.weapon-talent-wrapper div input[type="text"],
|
|
.charsheet div.weapon-talent-wrapper div input[type="number"],
|
|
.charsheet div.weapon-talent-wrapper div select{
|
|
width: 100%;
|
|
}
|
|
|
|
.charsheet div.weapon-talents-wrapper.sub-grid .repcontrol[data-groupname=repeating_weapon-talents] button.repcontrol_edit,
|
|
.charsheet div.weapon-talents-wrapper.sub-grid .repcontrol[data-groupname=repeating_weapon-talents] button.repcontrol_add,
|
|
.charsheet div.weapon-talents-wrapper.sub-grid .repcontrol[data-groupname=repeating_weapon-talents] button.repcontrol_del {
|
|
display: none;
|
|
}
|
|
|
|
/* Reactions */
|
|
.charsheet div.reactions-wrapper.sub-grid{
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
|
|
grid-column: 1 / 5;
|
|
grid-row: 7 / 8;
|
|
}
|
|
|
|
.charsheet div.reactions-wrapper div.sheet-condensed-reactions.sub-grid{
|
|
display: grid;
|
|
grid-template-columns: 20% 60% 5% 15%;
|
|
|
|
margin: 0.1em;
|
|
padding: 0.5em;
|
|
border: 0.1em solid gray;
|
|
}
|
|
|
|
.charsheet div.reactions-wrapper div.sheet-condensed-reactions.sub-grid input[type="text"],
|
|
.charsheet div.reactions-wrapper div.sheet-condensed-reactions.sub-grid select{
|
|
width:100%;
|
|
}
|
|
|
|
.charsheet div.reactions-wrapper div.sheet-condensed-reactions.sub-grid .wide-grid{
|
|
grid-column-end: span 3;
|
|
}
|
|
|
|
.charsheet div.reactions-wrapper.sub-grid .repcontrol[data-groupname=repeating_reactions] button.repcontrol_edit,
|
|
.charsheet div.reactions-wrapper.sub-grid .repcontrol[data-groupname=repeating_reactions] button.repcontrol_add,
|
|
.charsheet div.reactions-wrapper.sub-grid .repcontrol[data-groupname=repeating_reactions] button.repcontrol_del {
|
|
display: none;
|
|
}
|
|
|
|
.charsheet div.reactions-wrapper div.sheet-condensed-reactions input[name="attr_reaction-Is-Incantation"][value="1"] ~ .hidden_reaction_ba{
|
|
display: inline-block;
|
|
}
|
|
|
|
.charsheet div.reactions-wrapper div.sheet-condensed-reactions .hidden_reaction_ba.wide-grid{
|
|
grid-column-end: span 3;
|
|
}
|
|
|
|
/* Character Info */
|
|
.charsheet .character-info-wrapper{
|
|
display:flex;
|
|
flex-direction:column ;
|
|
}
|
|
.charsheet .character-info-wrapper div{
|
|
flex-grow: 1;
|
|
}
|
|
.charsheet .character-info-wrapper div textarea{
|
|
height: 100%;
|
|
}
|
|
|
|
/* Epithets */
|
|
.charsheet .epithets-wrapper .epithet-wrapper{
|
|
display:grid;
|
|
grid-template-columns: 15% 85%;
|
|
}
|
|
|
|
.charsheet .epithets-wrapper .epithet-wrapper input[type="text"]{
|
|
width:100%;
|
|
}
|
|
|
|
.charsheet .epithets-wrapper div.input{
|
|
justify-self: center;
|
|
}
|
|
|
|
/* Inventory */
|
|
.charsheet .item-wrapper{
|
|
display: grid;
|
|
grid-template-columns: 12% 73% 15%;
|
|
}
|
|
|
|
.charsheet .item-wrapper input[type="text"]{
|
|
width: auto;
|
|
}
|
|
|
|
.charsheet .item-wrapper div.input{
|
|
justify-self: center;
|
|
}
|
|
|
|
/* ABILITY */
|
|
.charsheet div.ability-wrapper{
|
|
display: grid;
|
|
grid-template-columns: 100%;
|
|
|
|
margin: 0.1em;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
/* SIGNATURE MOVE */
|
|
.charsheet div.signature-move-wrapper{
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
}
|
|
|
|
/* WEAPON TALENTS */
|
|
.charsheet div.weapon-talent-wrapper{
|
|
display: grid;
|
|
grid-template-columns: 20% 5% 5% 20% 45% 15%;
|
|
}
|
|
|
|
.charsheet div.weapon-talent-wrapper div input[type="text"],
|
|
.charsheet div.weapon-talent-wrapper div input[type="number"],
|
|
.charsheet div.weapon-talent-wrapper div select{
|
|
width: 100%;
|
|
}
|
|
|
|
div.weapon-masteries-wrapper{
|
|
display:none;
|
|
}
|
|
|
|
.charsheet div.weapon-talent-wrapper div:has(input[type="checkbox"].visibility-toggle:checked) ~ div.weapon-masteries-wrapper{
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
|
|
grid-column: 1 / 7;
|
|
}
|
|
|
|
.charsheet div.weapon-talent-wrapper div.weapon-masteries-wrapper div.weapon-mastery-wrapper{
|
|
display: grid;
|
|
grid-template-columns: 12% 88%;
|
|
|
|
margin: 0.1em;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.charsheet div.weapon-talent-wrapper div.weapon-masteries-wrapper div.weapon-mastery-wrapper .input{
|
|
justify-self: center;
|
|
}
|
|
|
|
div.sheet-condensed-masteries{
|
|
display:none;
|
|
}
|
|
|
|
.charsheet div.sheet-condensed-masteries:has(> input[value="1"].sheet-condensed-masteries-toggle){
|
|
display: grid;
|
|
grid-template-columns: 100%;
|
|
|
|
grid-column: 1 / 7;
|
|
}
|
|
|
|
.charsheet div.sheet-condensed-masteries div.filtered.weapon-mastery-wrapper{
|
|
display:none;
|
|
}
|
|
|
|
.charsheet div.sheet-condensed-masteries div.filtered.mastery-1:has(> input[value="1"].sheet-filtered-mastery-toggle){
|
|
display: grid;
|
|
grid-template-columns: 20% 80%;
|
|
}
|
|
|
|
.charsheet div.sheet-condensed-masteries div.filtered.mastery-2:has(> input[value="2"].sheet-filtered-mastery-toggle){
|
|
display: grid;
|
|
grid-template-columns: 20% 80%;
|
|
}
|
|
|
|
.charsheet div.sheet-condensed-masteries div.filtered.weapon-mastery-wrapper input,
|
|
.charsheet div.sheet-condensed-masteries div.filtered.weapon-mastery-wrapper textarea{
|
|
height: auto;
|
|
}
|
|
|
|
.charsheet div.plot-points-wrapper.sub-grid div{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/* REACTIONS */
|
|
|
|
.charsheet div.repcontainer[data-groupname="repeating_reactions"]{
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
}
|
|
|
|
.charsheet div.sheet-reaction-wrapper{
|
|
display: grid;
|
|
grid-template-columns: 90% 10%;
|
|
grid-template-rows: minmax(47px,3em) minmax(56px,3em);
|
|
|
|
margin: 0.1em;
|
|
padding: 0.5em;
|
|
border: 0.1em solid gray;
|
|
}
|
|
|
|
.charsheet div.sheet-reaction-wrapper > div.sub-grid{
|
|
display: grid;
|
|
grid-template-columns: 25% 75%;
|
|
}
|
|
|
|
.charsheet div.sheet-reaction-wrapper > div > input[type="text"],
|
|
.charsheet div.sheet-reaction-wrapper > div > input[type="number"],
|
|
.charsheet div.sheet-reaction-wrapper > div > select{
|
|
width: 100%;
|
|
}
|
|
|
|
.hidden_reaction_ba{
|
|
display:none;
|
|
}
|
|
|
|
div:has(> input[type="checkbox"].visibility-toggle:checked) ~ div > .hidden_reaction_ba{
|
|
display:inline-block;
|
|
}
|
|
|
|
div.sheet-condensed-reactions{
|
|
display:none;
|
|
}
|
|
|
|
div.sheet-condensed-reactions:has(> input[value="1"]){
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Darkmode */
|
|
|
|
|
|
body.sheet-darkmode button,
|
|
body.sheet-darkmode input,
|
|
body.sheet-darkmode optgroup,
|
|
body.sheet-darkmode select,
|
|
body.sheet-darkmode textarea,
|
|
body.sheet-darkmode .charsheet,
|
|
body.sheet-darkmode .charsheet .subtitle {
|
|
color: #eee
|
|
}
|
|
|
|
body.sheet-darkmode input,
|
|
body.sheet-darkmode input[readonly],
|
|
body.sheet-darkmode select,
|
|
body.sheet-darkmode select[disabled],
|
|
body.sheet-darkmode textarea,
|
|
body.sheet-darkmode button,
|
|
body.sheet-darkmode .charsheet .outer_box{
|
|
background: #1f1f1f;
|
|
}
|
|
|
|
|
|
|
|
body.sheet-darkmode .charsheet .stat_dec,
|
|
body.sheet-darkmode .charsheet .stat_inc{
|
|
color: #1f1f1f;
|
|
}
|
|
|
|
body.sheet-darkmode .btn,
|
|
body.sheet-darkmode .btn.btn-default {
|
|
color: #c8c3bc;
|
|
text-shadow: rgba(24,26,27,.75) 0px 1px 1px;
|
|
background-color: #1e2021;
|
|
background-image: linear-gradient(#181a1b, #26292b);
|
|
border-color: #3e4446 #3e4446 #43494c;
|
|
box-shadow: rgba(24,26,27,.2) 0px 1px 0px inset,rgba(0,0,0,.05) 0px 1px 2px
|
|
} |