mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
640 lines
12 KiB
CSS
640 lines
12 KiB
CSS
/*----------------- MAIN CONTAINER DEFINITIONS ------------------*/
|
|
@import url('https://fonts.googleapis.com/css?family=Paytone+One|Lustria&display=swap');
|
|
|
|
.sheet-main-container {
|
|
min-width: 600px;
|
|
max-width: 800px;
|
|
min-height: 600px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sheet-main-container input {
|
|
height: 20px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.sheet-main-container select {
|
|
width: auto;
|
|
height: 20px;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.sheet-main-container input[type=text] {
|
|
flex-grow: 1;
|
|
width: auto;
|
|
}
|
|
|
|
.sheet-main-container input[type=number] {
|
|
width: 4.2em;
|
|
}
|
|
|
|
.sheet-bigger-number-input {
|
|
width: 6em !important;
|
|
}
|
|
|
|
.sheet-main-container textarea {
|
|
box-sizing: border-box;
|
|
margin: 0px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.sheet-main-container button {
|
|
margin: 0px !important;
|
|
}
|
|
|
|
/*----------------- GENERAL CSS ------------------*/
|
|
|
|
.sheet-main-font {
|
|
font-family: Paytone One;
|
|
font-size: 12px;
|
|
color: red;
|
|
-webkit-text-stroke: 0.5px black;
|
|
}
|
|
|
|
.sheet-secondary-font {
|
|
font-family: Lustria;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.sheet-flex-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.sheet-flex-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sheet-grow {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.sheet-label {
|
|
text-transform: uppercase;
|
|
margin-right: 5px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-column-header {
|
|
text-transform: uppercase;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.sheet-column-subheader {
|
|
font-style: italic;
|
|
font-size: 10px !important;
|
|
}
|
|
|
|
.sheet-row-item-margin {
|
|
margin-right: 5px !important;
|
|
}
|
|
|
|
/*----------------- SHEET PARTS ------------------*/
|
|
|
|
.sheet-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-header input {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.sheet-header-row {
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-header-row2 {
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.sheet-header-row2 input[type=text] {
|
|
width:4.2em !important;
|
|
flex-grow: 0 !important;
|
|
}
|
|
|
|
.sheet-header-grid {
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
justify-items: center;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.sheet-header-box {
|
|
border: 2px solid lightgrey;
|
|
border-radius: 15px;
|
|
position: relative;
|
|
padding: 5px;
|
|
}
|
|
|
|
.sheet-actions-grid {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto;
|
|
justify-items: center;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.sheet-actions-label {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 25px;
|
|
}
|
|
|
|
.sheet-init-grid {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto auto;
|
|
justify-items: center;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.sheet-dodge-grid {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto auto auto;
|
|
justify-items: center;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.sheet-damage {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.sheet-damage span {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-logo {
|
|
text-align: center;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.sheet-tab-panel {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 10px;
|
|
display: none;
|
|
}
|
|
|
|
.sheet-tab-panel button {
|
|
margin-right: 5px !important;
|
|
}
|
|
|
|
.sheet-attributes-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
|
justify-items: start;
|
|
align-items: center;
|
|
column-gap: 5px;
|
|
}
|
|
|
|
.sheet-attributes-grid input {
|
|
width: 4.2em !important;
|
|
}
|
|
|
|
.sheet-special-mod {
|
|
grid-column: 4/6;
|
|
}
|
|
|
|
|
|
.sheet-middle {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 5px;
|
|
}
|
|
|
|
.sheet-middle-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.sheet-footer {
|
|
text-align: right;
|
|
font-style: italic;
|
|
}
|
|
|
|
.sheet-box {
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
border: 2px solid lightgrey;
|
|
border-radius: 15px;
|
|
position: relative;
|
|
}
|
|
|
|
.sheet-box-title {
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.sheet-repeatable-grid {
|
|
display: grid;
|
|
justify-items: stretch;
|
|
align-items: center;
|
|
column-gap: 5px;
|
|
row-gap: 5px;
|
|
}
|
|
|
|
.sheet-repeatable-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sheet-repeatable-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.sheet-repeatable-row-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-features {
|
|
grid-template-columns: auto 60px 60px 24px;
|
|
}
|
|
|
|
.sheet-contact-weapons {
|
|
grid-template-columns: 100px 40px 60px 60px 60px 24px;
|
|
}
|
|
|
|
.sheet-contact-weapons-hidden {
|
|
grid-template-columns: 100px 100px 100px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.sheet-long-range-weapons {
|
|
grid-template-columns: 100px 40px 60px 60px 60px 24px;
|
|
}
|
|
|
|
.sheet-long-range-weapons-hidden {
|
|
grid-template-columns: 50px 60px 70px 70px;
|
|
}
|
|
|
|
.sheet-weapons-die-label {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.sheet-weapons-die-label input {
|
|
margin-right: 1px !important;
|
|
}
|
|
|
|
.sheet-weapons-base {
|
|
width: 30px !important;
|
|
}
|
|
|
|
.sheet-weapons-damage-base {
|
|
width: 40px !important;
|
|
}
|
|
|
|
.sheet-weapons-damage-total {
|
|
width: 60px !important;
|
|
}
|
|
|
|
.sheet-weapons-subheader-grid {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto;
|
|
column-gap: 2px;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-powers {
|
|
grid-template-columns: auto 60px 60px 24px;
|
|
}
|
|
|
|
.sheet-skills {
|
|
grid-template-columns: 24px 100px auto 45px 45px 45px 24px
|
|
}
|
|
|
|
.sheet-protection {
|
|
grid-template-columns: auto 60px 100px 60px 24px;
|
|
}
|
|
|
|
.sheet-penalty {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.sheet-absortion {
|
|
justify-self: center;
|
|
}
|
|
|
|
.sheet-experience-points {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/*----------------- TAB CONTROL ------------------*/
|
|
|
|
/*Configure the tab buttons*/
|
|
.sheet-profiletab,
|
|
.sheet-configurationtab,
|
|
.sheet-journaltab {
|
|
display: none;
|
|
}
|
|
|
|
/* show the selected tab */
|
|
.sheet-tabcontrol[value="profile"] ~ div.sheet-profiletab,
|
|
.sheet-tabcontrol[value="configuration"] ~ div.sheet-configurationtab,
|
|
.sheet-tabcontrol[value="journal"] ~ div.sheet-journaltab {
|
|
display: block;
|
|
}
|
|
|
|
/*----------------- ROLL BUTTON ------------------*/
|
|
|
|
.sheet-main-container button[type=roll] {
|
|
border: 0px;
|
|
font-size: 22px;
|
|
width: 25px;
|
|
height: 25px;
|
|
background: transparent !important;
|
|
text-shadow: none !important;
|
|
box-shadow: none !important;
|
|
padding: 0px;
|
|
}
|
|
|
|
.sheet-main-container button[type=roll]::before {
|
|
content: 'f';
|
|
font-family: 'dicefontd6' !important;
|
|
}
|
|
|
|
.sheet-main-container button[type=roll]:hover {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/*------------- REPEATABLE SECTIONS BUTTONS -------------*/
|
|
|
|
.repcontrol>.btn {
|
|
background-color: transparent;
|
|
font-size: 2px;
|
|
background-image: none;
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
display: inline-block;
|
|
position: relative;
|
|
border: 0px;
|
|
}
|
|
|
|
.repcontrol>.btn:hover {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.repcontrol>.btn.repcontrol_add::before {
|
|
content: "&";
|
|
color: black;
|
|
font-size: 15px;
|
|
font-family: 'Pictos' !important;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.repcontrol>.btn.repcontrol_edit::before {
|
|
content: "(";
|
|
color: black;
|
|
font-size: 15px;
|
|
font-family: 'Pictos' !important;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
/* change the 'Done' text after clicking 'Modify' */
|
|
.editmode ~ .repcontrol>.repcontrol_edit::before {
|
|
content: ')';
|
|
}
|
|
|
|
.sheet-main-container .repcontainer[data-groupname="repeating_contactweapons"]>.repitem .itemcontrol,
|
|
.sheet-main-container .repcontainer[data-groupname="repeating_longrangeweapons"]>.repitem .itemcontrol,
|
|
.sheet-main-container .repcontainer[data-groupname="repeating_equipments"]>.repitem .itemcontrol,
|
|
.sheet-main-container .repcontainer[data-groupname="repeating_skills"]>.repitem .itemcontrol,
|
|
.sheet-main-container .repcontainer[data-groupname="repeating_powers"]>.repitem .itemcontrol,
|
|
.sheet-main-container .repcontainer[data-groupname="repeating_features"]>.repitem .itemcontrol,
|
|
.sheet-main-container .repcontainer[data-groupname="repeating_protection"]>.repitem .itemcontrol {
|
|
z-index: 99;
|
|
font-family: 'Pictos'
|
|
}
|
|
|
|
.sheet-main-container .repcontainer[data-groupname="repeating_contactweapons"]>.repitem .repcontrol_del,
|
|
.sheet-main-container .repcontainer[data-groupname="repeating_longrangeweapons"]>.repitem .repcontrol_del,
|
|
.sheet-main-container .repcontainer[data-groupname="repeating_equipments"]>.repitem .repcontrol_del,
|
|
.sheet-main-container .repcontainer[data-groupname="repeating_skills"]>.repitem .repcontrol_del,
|
|
.sheet-main-container .repcontainer[data-groupname="repeating_powers"]>.repitem .repcontrol_del,
|
|
.sheet-main-container .repcontainer[data-groupname="repeating_features"]>.repitem .repcontrol_del,
|
|
.sheet-main-container .repcontainer[data-groupname="repeating_protection"]>.repitem .repcontrol_del {
|
|
font-family: 'Pictos';
|
|
background-color: #d13235;
|
|
background-image: none;
|
|
position: absolute;
|
|
z-index: 99 !important;
|
|
top: 0;
|
|
right: 0
|
|
}
|
|
|
|
|
|
/*------------- REPEATABLE SECTIONS TOGGLE SHOW/HIDE -------------*/
|
|
|
|
.sheet-showhidebutton {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
}
|
|
|
|
.sheet-showhidebutton input[type=checkbox] {
|
|
width: 20px;
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
|
|
.sheet-showhidebutton:hover {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.sheet-arrowtype input[type=checkbox]:checked~span::before {
|
|
content: '▲';
|
|
}
|
|
|
|
.sheet-arrowtype span::before {
|
|
content: '▼';
|
|
}
|
|
|
|
.sheet-showhidebutton span {
|
|
color: black;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.sheet-toggle-checkbox {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-showhide {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-toggle-checkbox:checked~.sheet-showhide {
|
|
display: block;
|
|
}
|
|
|
|
.sheet-main-container .repcontainer[data-groupname="repeating_equipments"]>.repitem .itemcontrol {
|
|
z-index: 99;
|
|
font-family: 'Pictos'
|
|
}
|
|
|
|
.sheet-main-container .repcontainer[data-groupname="repeating_equipments"]>.repitem .repcontrol_del {
|
|
font-family: 'Pictos';
|
|
background-color: #d13235;
|
|
background-image: none;
|
|
position: absolute;
|
|
z-index: 99 !important;
|
|
top: 0;
|
|
right: 0
|
|
}
|
|
|
|
/*------------- HIDDEN SELECT ITEMS -------------*/
|
|
.sheet-select-hidden-grid {
|
|
display: grid;
|
|
grid-template-columns: 20px auto;
|
|
gap: 2px;
|
|
align-items: center;
|
|
background-color: antiquewhite;
|
|
}
|
|
|
|
.sheet-configtype {
|
|
font-family: 'Pictos';
|
|
}
|
|
|
|
.sheet-configtype input[type=checkbox]:checked~span::before {
|
|
content: '*';
|
|
}
|
|
|
|
.sheet-configtype span::before {
|
|
content: 'y';
|
|
}
|
|
|
|
.sheet-corner-position {
|
|
position: absolute;
|
|
right: 10px;
|
|
}
|
|
|
|
.sheet-add-button {
|
|
border: 0px;
|
|
font-size: 20px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: transparent !important;
|
|
text-shadow: none !important;
|
|
box-shadow: none !important;
|
|
padding: 0px;
|
|
}
|
|
|
|
.sheet-add-button::before {
|
|
content: '+';
|
|
font-family: 'Pictos' !important;
|
|
}
|
|
|
|
.sheet-add-button:hover {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
|
|
/*------------- SHEET ROLL TEMPLATE -------------*/
|
|
|
|
.sheet-rolltemplate-main .sheet-template-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 2px solid black;
|
|
font-family: Paytone One;
|
|
text-align: center;
|
|
background-color: white;
|
|
}
|
|
|
|
.sheet-rolltemplate-main p {
|
|
font-family: Paytone One;
|
|
text-align: left;
|
|
}
|
|
|
|
.sheet-rolltemplate-main .sheet-template-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-bottom: 1px solid black;
|
|
padding: 5px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-main .sheet-template-header {
|
|
flex-direction: row !important;
|
|
color: red;
|
|
-webkit-text-stroke: 0.5px black;
|
|
}
|
|
|
|
.sheet-rolltemplate-main .sheet-template-label {
|
|
text-transform: uppercase;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-main .inlinerollresult {
|
|
display: inline-block;
|
|
min-width: 1.5em;
|
|
text-align: center;
|
|
border: 2px solid rgba(167, 168, 170,1);
|
|
}
|
|
|
|
.sheet-rolltemplate-main .inlinerollresult.fullcrit {
|
|
border: 4px solid green;
|
|
color: green;
|
|
|
|
}
|
|
|
|
.sheet-rolltemplate-main .inlinerollresult.fullfail {
|
|
border: 4px solid red;
|
|
color: red;
|
|
}
|
|
|
|
.sheet-rolltemplate-main .inlinerollresult.importantroll {
|
|
border: 2px solid #4A57ED;
|
|
}
|
|
|
|
.sheet-rolltemplate-main .sheet-template-success {
|
|
color: green;
|
|
}
|
|
|
|
.sheet-rolltemplate-main .sheet-template-fail {
|
|
color: red;
|
|
}
|