mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
2159 lines
46 KiB
CSS
2159 lines
46 KiB
CSS
/* <editor-fold desc="Roll Template"> */
|
|
|
|
/* Smaller margins - remove these if you want the huge default left margin */
|
|
|
|
.sheet-rolltemplate-custom .sheet-content a[href^="~"],
|
|
.sheet-rolltemplate-custom .sheet-content a[href*="fullattack"],
|
|
.sheet-rolltemplate-custom .sheet-content a[href*="fullattackdamage"],
|
|
.sheet-rolltemplate-custom .sheet-content a[href*="fullattackcritdamage"],
|
|
.sheet-rolltemplate-custom .sheet-content a[href*="fullattackconfirm"] {
|
|
display: inline-block;
|
|
transition-duration: 0.2s;
|
|
min-width: fit-content;
|
|
margin: 1px;
|
|
padding: 0 4px 0 4px;
|
|
background-color: #F0F0F0;
|
|
color: #000000 !important;
|
|
border: 1px solid #000000;
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px #909090;
|
|
font-style: normal;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
text-decoration: none !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-content a[href^="~"]:hover,
|
|
.sheet-rolltemplate-custom .sheet-content a[href*="fullattack"]:hover {
|
|
background-color: #323232;
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-content a[href^="~"]:active,
|
|
.sheet-rolltemplate-custom .sheet-content a[href*="fullattack"]:active {
|
|
background-color: #000000;
|
|
color: #db1c1c !important;
|
|
box-shadow: 0 0;
|
|
transform: translateY(2px);
|
|
}
|
|
|
|
.sheet-rolltemplate-custom {
|
|
margin-left: -37px;
|
|
color:rgba(0,0,0,1);
|
|
}
|
|
|
|
.withoutavatars .sheet-rolltemplate-custom {
|
|
margin-left: -7px;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-container {
|
|
border: 0 solid;
|
|
/* by default, the border is the same color as the header. You can change this here, e.g. to black */
|
|
border-color: var(--header-bg-color);
|
|
width: fit-content;
|
|
min-width: 220px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Header formatting - title and subtitle */
|
|
.sheet-rolltemplate-custom .sheet-header {
|
|
background-color: var(--header-bg-color);
|
|
/* change text-align to center to center the header text */
|
|
text-align: left;
|
|
color: var(--header-text-color);
|
|
border-bottom: 1px black solid;
|
|
border-radius: 4px 4px 0 0;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-title {
|
|
font-family: Georgia, "Times New Roman", serif;
|
|
font-size:1.6em;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin: auto;
|
|
padding-top: 4px;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-title::after {
|
|
content: "꧁✧━━━━━━❖━━━━━━✧꧂";
|
|
display: block;
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
margin-top: 2px;
|
|
opacity: 0.75;
|
|
letter-spacing: -1px;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-title a:link{
|
|
color: #DDDDDD;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-title a:visited{
|
|
color: #FFFFFF;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-title a:active{
|
|
color: #EE00EE;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-subtitle {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background-color: #323232;
|
|
font-size:1.1em;
|
|
font-style: italic;
|
|
text-align: center;
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
align-items: end;
|
|
column-gap: 8px;
|
|
padding: 5px 8px;
|
|
min-height: 26px;
|
|
line-height: 1.2;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-subtitle::before {
|
|
content: "✧❖━━";
|
|
grid-column: 1;
|
|
align-self: end;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
opacity: 0.7;
|
|
letter-spacing: -1px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-subtitle::after {
|
|
content: "━━❖✧";
|
|
grid-column: 3;
|
|
align-self: end;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
opacity: 0.7;
|
|
letter-spacing: -1px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-container {
|
|
/* this is the default color */
|
|
/*--header-bg-color: #800020;*/
|
|
--header-bg-color: #000000;
|
|
--header-text-color: #FFFFFF;
|
|
color: #000000;
|
|
border: solid 1px black;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-red {
|
|
--header-bg-color: #F00;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-green {
|
|
--header-bg-color: #0F0;
|
|
--header-text-color: #000;
|
|
}
|
|
|
|
/* Allprops part */
|
|
.sheet-rolltemplate-custom .sheet-content {
|
|
display: grid;
|
|
background: rgba(0,0,0,0);
|
|
/* Header formatting - modify the column layout below */
|
|
grid-template-columns: auto auto;
|
|
/* Line height to match default roll template */
|
|
line-height:1.4em;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-content > div {
|
|
padding: 5px;
|
|
/*background-color: #EAD2A8;*/
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
/* Left column */
|
|
.sheet-rolltemplate-custom .sheet-content .sheet-key {
|
|
font-weight: bold;
|
|
padding-right: 10px;
|
|
text-align: right;
|
|
}
|
|
|
|
/* Empty rule, use this if you want to change the right column
|
|
.sheet-rolltemplate-custom .sheet-value {
|
|
}
|
|
*/
|
|
|
|
/* Make even-numbered rows grey */
|
|
|
|
.sheet-rolltemplate-custom .sheet-content :nth-child(4n+3),
|
|
.sheet-rolltemplate-custom .sheet-content :nth-child(4n){
|
|
/*background: #f6efe4;*/
|
|
background-color: #D0D0D0;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-content > div.sheet-key:nth-last-child(2) {
|
|
border-radius: 0 0 0 4px;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-content > div.sheet-value:last-child{
|
|
border-radius: 0 0 4px 0;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-content > div.sheet-desc:last-child{
|
|
border-radius: 0 0 4px 4px;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-content a:link{
|
|
background: rgba(0,0,0,0);
|
|
color: #0000EE;
|
|
font-style: italic;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-content a:visited{
|
|
background: rgba(0,0,0,0);
|
|
color: #551A8B;
|
|
font-style: italic;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-content a:active{
|
|
background: rgba(0,0,0,0);
|
|
color: #AA00DD;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Description field */
|
|
.sheet-rolltemplate-custom .sheet-desc {
|
|
grid-column: span 2;
|
|
padding: 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-key .inlinerollresult,
|
|
.sheet-rolltemplate-custom .sheet-desc .inlinerollresult,
|
|
.sheet-rolltemplate-custom .sheet-value .inlinerollresult{
|
|
/*background-color: #f6efe4;*/
|
|
background-color: #FFFFFF;
|
|
border-radius: 4px;
|
|
}
|
|
/*</editor-fold>*/
|
|
|
|
/*<editor-fold desc="Tab Buttons"*/
|
|
/*Configure the tab buttons*/
|
|
.charsheet .sheet-main,
|
|
.charsheet .sheet-skills,
|
|
.charsheet .sheet-gear,
|
|
.charsheet .sheet-definitions,
|
|
.charsheet .sheet-abilities,
|
|
.charsheet .sheet-spells,
|
|
.charsheet .sheet-accessories,
|
|
.charsheet .sheet-inventory,
|
|
.charsheet .sheet-profitloss,
|
|
.charsheet .sheet-settings{
|
|
display: none;
|
|
text-align: center;
|
|
}
|
|
|
|
/* show the selected tab */
|
|
.charsheet .sheet-tabstoggle[value="main"] ~ div.sheet-main,
|
|
.charsheet .sheet-tabstoggle[value="skills"] ~ div.sheet-skills,
|
|
.charsheet .sheet-tabstoggle[value="definitions"] ~ div.sheet-definitions,
|
|
.charsheet .sheet-tabstoggle[value="gear"] ~ div.sheet-gear,
|
|
.charsheet .sheet-tabstoggle[value="abilities"] ~ div.sheet-abilities,
|
|
.charsheet .sheet-tabstoggle[value="spells"] ~ div.sheet-spells,
|
|
.charsheet .sheet-tabstoggle[value="accessories"] ~ div.sheet-accessories,
|
|
.charsheet .sheet-tabstoggle[value="inventory"] ~ div.sheet-inventory,
|
|
.charsheet .sheet-tabstoggle[value="profitloss"] ~ div.sheet-profitloss,
|
|
.charsheet .sheet-tabstoggle[value="settings"] ~ div.sheet-settings {
|
|
display: grid;
|
|
width: 800px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.ui-dialog .charsheet .SAbutton {
|
|
position: relative;
|
|
width: 800px;
|
|
text-align: left !important;
|
|
padding-left: 10px;
|
|
padding-top: 4px;
|
|
white-space: nowrap;
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.ui-dialog .charsheet .SAbutton button{
|
|
position: relative;
|
|
z-index: 1;
|
|
background-color: #ffffff;
|
|
color: #000000;
|
|
padding: 0 8px 0 8px;
|
|
margin: 0 -6px 0 0;
|
|
font-weight: bold;
|
|
border: solid 1px black;
|
|
border-radius: 5px 5px 0 0;
|
|
border-bottom: 1px #323232 solid;
|
|
transform: skewX(-8deg);
|
|
transform-origin: bottom left;
|
|
transition-duration: 0.1s;
|
|
}
|
|
|
|
.ui-dialog .charsheet .SAbutton button:hover{
|
|
z-index: 2;
|
|
background-color: #323232;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.ui-dialog .charsheet .SAbutton button:active{
|
|
background-color: #000000;
|
|
color: #db1c1c;
|
|
box-shadow: 0 0;
|
|
}
|
|
|
|
.ui-dialog .charsheet .SAbutton button::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: -7px;
|
|
top: -1px;
|
|
bottom: -1px;
|
|
width: 12px;
|
|
height: auto;
|
|
background-color: inherit;
|
|
border-top: 1px solid black;
|
|
border-right: 1px solid black;
|
|
border-bottom: inherit;
|
|
border-radius: 0 12px 0 0;
|
|
box-sizing: border-box;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ui-dialog .charsheet .sheet-tabstoggle[value="main"] ~ .SAbutton .sheet-tab-button-main,
|
|
.ui-dialog .charsheet .sheet-tabstoggle[value="definitions"] ~ .SAbutton .sheet-tab-button-definitions,
|
|
.ui-dialog .charsheet .sheet-tabstoggle[value="abilities"] ~ .SAbutton .sheet-tab-button-abilities,
|
|
.ui-dialog .charsheet .sheet-tabstoggle[value="spells"] ~ .SAbutton .sheet-tab-button-spells,
|
|
.ui-dialog .charsheet .sheet-tabstoggle[value="skills"] ~ .SAbutton .sheet-tab-button-skills,
|
|
.ui-dialog .charsheet .sheet-tabstoggle[value="gear"] ~ .SAbutton .sheet-tab-button-gear,
|
|
.ui-dialog .charsheet .sheet-tabstoggle[value="accessories"] ~ .SAbutton .sheet-tab-button-accessories,
|
|
.ui-dialog .charsheet .sheet-tabstoggle[value="inventory"] ~ .SAbutton .sheet-tab-button-inventory,
|
|
.ui-dialog .charsheet .sheet-tabstoggle[value="profitloss"] ~ .SAbutton .sheet-tab-button-profitloss,
|
|
.ui-dialog .charsheet .sheet-tabstoggle[value="settings"] ~ .SAbutton .sheet-tab-button-settings{
|
|
background-color: #323232;
|
|
color: #FFFFFF;
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
/*</editor-fold>*/
|
|
|
|
/*<editor-fold desc="General Styles"*/
|
|
|
|
.ui-dialog .charsheet .SAbutton .rollAction button[type=action] {
|
|
background-color: #000000;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.color{
|
|
display: inline-block;
|
|
}
|
|
|
|
.titleinputhidden[value=""] ~ .color{
|
|
display: None;
|
|
}
|
|
|
|
.shadow{
|
|
display: None;
|
|
}
|
|
|
|
.titleinputhidden[value=""] ~ .shadow{
|
|
display: inline-block;
|
|
}
|
|
|
|
.titleblock {
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
background-color: #323232;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.titleblock_stat {
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
background-color: #000000;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.wrapped-div{
|
|
border-radius: 15px 15px 0 0;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.midline-right-div{
|
|
border-radius: 15px 15px 0 0;
|
|
border-bottom: 1px solid black;
|
|
border-right: 1px solid black;
|
|
border-top: 1px solid black;
|
|
}
|
|
|
|
.bottom-border-div{
|
|
border-bottom: 1px solid black;
|
|
}
|
|
|
|
.column-header {
|
|
background-color: #323232;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
font-size: medium;
|
|
text-align: center;
|
|
border-radius: 12px 12px 0 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.column-header-dark {
|
|
background-color: #000000;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
font-size: medium;
|
|
text-align: center;
|
|
border-radius: 12px 12px 0 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.row-header{
|
|
background-color: #323232;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
font-size: medium;
|
|
text-align: center;
|
|
border-radius: 10px 10px 0 0;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.row-footer{
|
|
background-color: #323232;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
font-size: medium;
|
|
text-align: center;
|
|
border-radius: 0 0 10px 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
.row-header-dark{
|
|
background-color: #000000;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
font-size: medium;
|
|
text-align: center;
|
|
border-radius: 10px 10px 0 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.ui-dialog .charsheet .column-header button[type=roll],
|
|
.ui-dialog .charsheet .column-header button[type=compendium]{
|
|
height: 16px;
|
|
width: 16px;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.ui-dialog .charsheet .Small-Button{
|
|
width: 16px;
|
|
height: 12px;
|
|
padding: 0 0 1px 0;
|
|
margin: 0;
|
|
border: 1px black solid;
|
|
transition-duration: 0.4s;
|
|
box-shadow: 0 2px #505050;
|
|
background-color: #F0F0F0;
|
|
color: #000000;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
font-weight: bold;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.ui-dialog .charsheet .Small-Button:hover{
|
|
background-color: #323232;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.ui-dialog .charsheet .Small-Button:active{
|
|
background-color: #000000;
|
|
color: #db1c1c;
|
|
box-shadow: 0 0;
|
|
transform: translateY(2px);
|
|
}
|
|
|
|
|
|
.ui-dialog .charsheet .CRP_Button{
|
|
margin: 0;
|
|
border: 1px black solid;
|
|
transition-duration: 0.2s;
|
|
box-shadow: 0 2px #505050;
|
|
background-color: #F0F0F0;
|
|
color: #000000;
|
|
text-align: center;
|
|
vertical-align: center;
|
|
border-radius: 5px;
|
|
font-size: medium;
|
|
width: 17px;
|
|
height: 17px;
|
|
font-family: dicefontd20,serif;
|
|
font-weight: normal;
|
|
padding: 0;
|
|
}
|
|
|
|
.ui-dialog .charsheet .CRP_Button:hover{
|
|
background-color: #323232;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.ui-dialog .charsheet .CRP_Button:active{
|
|
background-color: #000000;
|
|
color: #db1c1c;
|
|
box-shadow: 0 0;
|
|
transform: translateY(2px);
|
|
}
|
|
|
|
/* Firefox does not reliably apply :active to Roll20 type="roll" buttons.
|
|
Chromium works. Do not waste another afternoon on this unless refactoring
|
|
roll buttons into action buttons. */
|
|
|
|
.ui-dialog .charsheet button[type=roll],
|
|
.ui-dialog .charsheet button[type=compendium]{
|
|
padding: 0;
|
|
border: 0;
|
|
margin: 0;
|
|
transition-duration: 0.2s;
|
|
width: 16px;
|
|
height: 16px;
|
|
text-align: center;
|
|
background-color: #F0F0F0;
|
|
color: #000000;
|
|
background-image: none;
|
|
box-shadow: 0 2px #909090;
|
|
}
|
|
|
|
|
|
.ui-dialog .charsheet button[type=roll]:hover,
|
|
.ui-dialog .charsheet button[type=compendium]:hover {
|
|
background-color: #323232;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.ui-dialog .charsheet button[type=roll]:active,
|
|
.ui-dialog .charsheet button[type=compendium]:active {
|
|
background-color: #000000;
|
|
color: #db1c1c;
|
|
box-shadow: 0 0;
|
|
transform: translateY(2px);
|
|
}
|
|
|
|
.ui-dialog .charsheet input::-webkit-outer-spin-button,
|
|
.ui-dialog .charsheet input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.ui-dialog .charsheet input[type=number]{
|
|
-moz-appearance: textfield;
|
|
height: 18px;
|
|
padding: 2px;
|
|
border: 1px solid #909090;
|
|
background-color: #FFFFFF;
|
|
color: #000000;
|
|
text-align: center;
|
|
}
|
|
|
|
.ui-dialog .charsheet input[readonly]{
|
|
background-color: #5A5A5A;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ui-dialog .charsheet select{
|
|
width: 96%;
|
|
height: 18px;
|
|
text-align: center;
|
|
padding: 0;
|
|
font-size: 12px;
|
|
margin: 0;
|
|
}
|
|
|
|
.ui-dialog .charsheet .die-select{
|
|
width: 24px;
|
|
height: 21px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding: 0;
|
|
font-size: 12px;
|
|
margin: 0;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.ui-dialog .charsheet .fixed-select{
|
|
width: 60px;
|
|
height: 21px;
|
|
text-align: center;
|
|
padding: 0;
|
|
font-size: 12px;
|
|
margin: 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/*General Grid*/
|
|
|
|
.ggrid{
|
|
display: grid;
|
|
grid-auto-columns: auto;
|
|
}
|
|
|
|
.ggridc{
|
|
display: grid;
|
|
grid-auto-rows: auto;
|
|
}
|
|
|
|
/* Roll20 generated repeating-section controls: +Add / Modify */
|
|
.ui-dialog .charsheet .repcontrol {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
margin: 4px 0 8px 0;
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.ui-dialog .charsheet .repcontrol button {
|
|
width: auto;
|
|
min-width: 16px;
|
|
height: 18px;
|
|
padding: 0 8px;
|
|
margin: 0;
|
|
border: 1px solid black;
|
|
border-radius: 5px;
|
|
background-color: #F0F0F0;
|
|
background-image: none;
|
|
color: #000000;
|
|
box-shadow: 0 2px #505050;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
line-height: 16px;
|
|
text-align: center;
|
|
text-shadow: none;
|
|
transition-duration: 0.2s;
|
|
}
|
|
|
|
.ui-dialog .charsheet .repcontrol button:hover {
|
|
background-color: #323232;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.ui-dialog .charsheet .repcontrol button:active {
|
|
background-color: #000000;
|
|
color: #db1c1c;
|
|
box-shadow: 0 0;
|
|
transform: translateY(2px);
|
|
}
|
|
|
|
/* Replace Roll20's generated button text */
|
|
.ui-dialog .charsheet .repcontrol .repcontrol_add,
|
|
.ui-dialog .charsheet .repcontrol .repcontrol_edit {
|
|
font-size: 0;
|
|
}
|
|
|
|
.ui-dialog .charsheet .repcontrol .repcontrol_add::after {
|
|
content: "+";
|
|
font-size: 11px;
|
|
}
|
|
|
|
.ui-dialog .charsheet .repcontrol .repcontrol_edit::after {
|
|
content: "Move/Delete";
|
|
font-size: 11px;
|
|
}
|
|
|
|
.ui-dialog .charsheet .repcontainer.editmode + .repcontrol .repcontrol_edit::after {
|
|
content: "End";
|
|
font-size: 11px;
|
|
}
|
|
|
|
/*End General Grid -- End*/
|
|
|
|
/*General Columns*/
|
|
|
|
.grcsa{grid-column: 1/-1;}
|
|
.grc1{grid-column: 1;}
|
|
.grc2{grid-column: 2;}
|
|
.grc3{grid-column: 3;}
|
|
.grc4{grid-column: 4;}
|
|
.grc5{grid-column: 5;}
|
|
.grc6{grid-column: 6;}
|
|
.grc7{grid-column: 7;}
|
|
.grc8{grid-column: 8;}
|
|
|
|
.grr1{grid-row: 1;}
|
|
.grr2{grid-row: 2;}
|
|
.grr3{grid-row: 3;}
|
|
.grr4{grid-row: 4;}
|
|
.grr5{grid-row: 5;}
|
|
.grr6{grid-row: 6;}
|
|
.grr7{grid-row: 7;}
|
|
|
|
/*End General columns -- End*/
|
|
.flex-input{
|
|
height: 18px;
|
|
width: 96%;
|
|
border: 0;
|
|
padding: 0;
|
|
text-align: center;
|
|
color: #000000;
|
|
}
|
|
|
|
.flex-bordered-input{
|
|
height: 18px;
|
|
width: 96%;
|
|
border: 1px solid black;
|
|
padding: 0;
|
|
margin: 2px;
|
|
text-align: center;
|
|
}
|
|
|
|
.ui-dialog .charsheet .flex-input[type=number]{
|
|
height: 18px;
|
|
width: 96%;
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.small-input{
|
|
height: 18px;
|
|
width: 24px;
|
|
padding: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.ui-dialog .charsheet .small-input[type=number]{
|
|
height: 18px;
|
|
width: 24px;
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.standard-input{
|
|
height: 18px;
|
|
width: 60px;
|
|
padding: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.standard-input [type=number]{
|
|
height: 18px;
|
|
width: 60px;
|
|
padding: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.standard-select {
|
|
width: 60px;
|
|
height: 18px;
|
|
text-align: center;
|
|
padding: 0;
|
|
font-size: 12px;
|
|
margin: 0;
|
|
}
|
|
|
|
/*</editor-fold>*/
|
|
|
|
/*<editor-fold desc="Main Tab"*/
|
|
|
|
.sheet-main{
|
|
grid-template-columns: repeat(2,1fr);
|
|
background-color: #000000;
|
|
padding-bottom: 18px;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
z-index: 5;
|
|
}
|
|
|
|
.main-full{grid-column: 1/-1;}
|
|
.main-left{grid-column: 1;}
|
|
.main-right{grid-column: 2;}
|
|
|
|
/*Shared Main Selector Styles*/
|
|
.attribute-block > span,
|
|
.hp-armor-block > span,
|
|
.saving-throw-block > span{
|
|
background-color: #000000;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
font-size: medium;
|
|
text-align: center;
|
|
height: 18px;
|
|
padding-bottom: 3px;
|
|
align-self: start;
|
|
}
|
|
/*End Shared Main Selector Styles -- End*/
|
|
|
|
/* Character Info Block Styles */
|
|
.character-info-block{
|
|
width: 800px;
|
|
display: grid;
|
|
grid-template-columns: repeat(7,1fr);
|
|
}
|
|
|
|
.character-info-block > span{
|
|
background-color: #000000;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
font-size: medium;
|
|
text-align: center;
|
|
border-radius: 6px 6px 0 0;
|
|
}
|
|
|
|
#info-title {grid-column: 1/-1;}
|
|
#player-name {grid-column: 1;}
|
|
#age-and-height{grid-column: 2;}
|
|
#weight-and-gender{grid-column: 3;}
|
|
#species-name {grid-column: 4;}
|
|
#more-speed {grid-column: 5;}
|
|
#religion-name {grid-column: 6;}
|
|
#hd-and-size {grid-column: 7;}
|
|
|
|
#player-name > div,
|
|
#age-and-height > div,
|
|
#weight-and-gender > div,
|
|
#species-name > div,
|
|
#more-speed > div,
|
|
#religion-name > div,
|
|
#hd-and-size > div{
|
|
background-color: #000000;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
padding-bottom: 2px;
|
|
}
|
|
/*End Character Info Block Styles -- End*/
|
|
|
|
/* Main Attribute Block Styles*/
|
|
|
|
.ui-dialog .charsheet .sheet-main .main-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-self: stretch;
|
|
}
|
|
|
|
.ui-dialog .charsheet .sheet-main .main-notes-body {
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.ui-dialog .charsheet .sheet-main .main-notes-body textarea {
|
|
flex: 1 1 auto;
|
|
min-height: 120px;
|
|
width: 97%;
|
|
box-sizing: border-box;
|
|
vertical-align: top;
|
|
text-align: left;
|
|
border: 0;
|
|
border-radius: 5px;
|
|
resize: none;
|
|
margin: 6px 6px -10px 6px;
|
|
padding: 3px;
|
|
}
|
|
|
|
.attribute-block {
|
|
width: 400px;
|
|
display: grid;
|
|
background-color: #000000;
|
|
grid-template-columns: repeat(8, 1fr);
|
|
align-self: start;
|
|
border: 1px #323232;
|
|
}
|
|
|
|
.attribute-block-title{
|
|
grid-column: 1/9;
|
|
background-color: #000000;
|
|
}
|
|
#name {grid-column: 1;}
|
|
#base {
|
|
grid-column:2;
|
|
background-color: #FFFFFF;
|
|
}
|
|
#enhancement {
|
|
grid-column: 3;
|
|
background-color: #FFFFFF;
|
|
}
|
|
#bonus {
|
|
grid-column: 4;
|
|
background-color: #FFFFFF;
|
|
}
|
|
#penalty {
|
|
grid-column: 5;
|
|
background-color: #FFFFFF;
|
|
}
|
|
#total { grid-column: 6;}
|
|
#modifier {grid-column: 7;}
|
|
#check {grid-column: 8;}
|
|
|
|
#name > div,
|
|
#base > div,
|
|
#enhancement > div,
|
|
#bonus > div,
|
|
#penalty > div,
|
|
#total > div,
|
|
#modifier > div,
|
|
#check > div{
|
|
padding-bottom: 3px;
|
|
padding-right: 1px;
|
|
height: 18px;
|
|
}
|
|
|
|
#check > div{
|
|
background-color: #000000;
|
|
}
|
|
|
|
|
|
.ui-dialog .charsheet .attribute-block input[type=text]{
|
|
height: 18px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 2px;
|
|
border: 1px solid #909090;
|
|
background-color: #FFFFFF;
|
|
color: #000000;
|
|
text-align: center;
|
|
}
|
|
|
|
.ui-dialog .charsheet .attribute-block input[type=text][readonly]{
|
|
background-color: #5A5A5A;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ui-dialog .charsheet .attribute-block button[type=roll],
|
|
.ui-dialog .charsheet .attribute-block button[type=compendium]{
|
|
height: 16px;
|
|
width: 16px;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
/* End Attribute Block Styles -- End*/
|
|
|
|
/*Saving Throw Block*/
|
|
.saving-throw-block{
|
|
width: 400px;
|
|
display: grid;
|
|
grid-template-columns: repeat(8,1fr);
|
|
background-color: #000000;
|
|
color: #FFFFFF;
|
|
align-self: start;
|
|
}
|
|
|
|
#save-name {grid-column: 1;}
|
|
#save-total {grid-column: 2;}
|
|
#save-base {grid-column: 3;}
|
|
#save-key {grid-column: 4;}
|
|
#save-magic {
|
|
grid-column: 5;
|
|
background-color: #FFFFFF;
|
|
color: #000000;
|
|
}
|
|
#save-misc {
|
|
grid-column: 6;
|
|
background-color: #FFFFFF;
|
|
color: #000000;
|
|
}
|
|
#save-temp {
|
|
grid-column: 7;
|
|
background-color: #FFFFFF;
|
|
color: #000000;
|
|
}
|
|
#save-check {grid-column: 8;}
|
|
|
|
#save-name > div,
|
|
#save-total > div,
|
|
#save-base > div,
|
|
#save-key > div,
|
|
#save-magic > div,
|
|
#save-misc > div,
|
|
#save-temp > div,
|
|
#save-check > div{
|
|
padding-bottom: 3px;
|
|
padding-right: 1px;
|
|
height: 18px;
|
|
}
|
|
|
|
.main-left .ggrid .grc1 > div,
|
|
.main-left .ggrid .grc2 > div,
|
|
.main-left .ggrid .grc3 > div,
|
|
.main-left .ggrid .grc4 > div,
|
|
.main-left .ggrid .grc5 > div,
|
|
.main-left .ggrid .grc6 > div{
|
|
padding-bottom: 3px;
|
|
padding-right: 1px;
|
|
height: 18px;
|
|
}
|
|
|
|
/*End Saving Throw Block -- End*/
|
|
|
|
/* HP and Armor Block Styles */
|
|
|
|
.hp-armor-block{
|
|
width: 400px;
|
|
display: grid;
|
|
grid-template-columns: repeat(2,1fr);
|
|
align-self: start;
|
|
}
|
|
|
|
.hp-column{
|
|
grid-column: 1;
|
|
display: grid;
|
|
grid-template-columns: repeat(2,1fr);
|
|
}
|
|
|
|
#hp-names{grid-column: 1;}
|
|
#hp-inputs{grid-column: 2;}
|
|
|
|
.ac-column{
|
|
grid-column: 2;
|
|
display: grid;
|
|
grid-template-columns: repeat(2,1fr);
|
|
}
|
|
|
|
#ac-names{grid-column: 1;}
|
|
#ac-inputs{grid-column: 2;}
|
|
|
|
#hp-names > div,
|
|
#hp-inputs > div,
|
|
#ac-names > div,
|
|
#ac-inputs > div{
|
|
background-color: #000000;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
height: 18px;
|
|
padding-bottom: 3px;
|
|
align-self: start;
|
|
}
|
|
|
|
/* End HP and Armor Block Styles -- End*/
|
|
|
|
.ui-dialog .charsheet .conditions-effects-block .conditions-subheader{
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
padding: 2px;
|
|
}
|
|
|
|
.ui-dialog .charsheet .conditions-effects-block .condition-select{
|
|
width: 84px;
|
|
}
|
|
|
|
.ui-dialog .charsheet .conditions-effects-block .condition-duration-input{
|
|
height: 18px;
|
|
width: 60px;
|
|
padding: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.ui-dialog .charsheet .conditions-effects-block .condition-effect-display{
|
|
background-color: #323232;
|
|
border-radius: 5px;
|
|
padding: 1px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.ui-dialog .charsheet .sheet-main .temporary-effects-strip {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.ui-dialog .charsheet .sheet-main .temporary-effects-strip label {
|
|
width: auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
}
|
|
|
|
/*</editor-fold>*/
|
|
|
|
/*<editor-fold desc="Definitions and Traits"*/
|
|
.sheet-definitions{
|
|
width: 800px;
|
|
border-radius: 12px;
|
|
border: 1px solid;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.ui-dialog .charsheet .sheet-definitions .DTA-name{
|
|
background-color: #323232;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
border: 0;
|
|
}
|
|
|
|
.ui-dialog .charsheet .sheet-definitions .DTA-name-dark{
|
|
background-color: #000000;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
border: 0;
|
|
}
|
|
|
|
.ui-dialog .charsheet .sheet-definitions textarea{
|
|
vertical-align: top;
|
|
text-align: left;
|
|
height: 54px;
|
|
min-height: 54px;
|
|
width: 94%;
|
|
border: 1px solid black;
|
|
border-radius: 5px 5px 5px 5px;
|
|
resize: vertical;
|
|
padding: 0;
|
|
}
|
|
|
|
.sheet-definitions .ggrid .grr3.ggrid .dta-toggle[value="1"] ~ .dta-shrink{
|
|
display: none;
|
|
}
|
|
|
|
.sheet-definitions .definition-flag{
|
|
background-color: #000000;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding: 2px;
|
|
}
|
|
|
|
/*</editor-fold>*/
|
|
|
|
/*<editor-fold desc="Abilities/Feats"*/
|
|
|
|
.sheet-abilities .ability-title-row,
|
|
.sheet-abilities .feat-title-row{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 3px;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.sheet-abilities .ability-title-row .Ability-name,
|
|
.sheet-abilities .feat-title-row .Ability-name{
|
|
flex: 1 1 auto;
|
|
min-width: 80px;
|
|
}
|
|
|
|
.sheet-abilities .grant-meta{
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
white-space: nowrap;
|
|
font-size: 10px;
|
|
font-weight: normal;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.ui-dialog .charsheet .sheet-abilities .grant-level-input[type=number]{
|
|
width: 28px;
|
|
height: 14px;
|
|
padding: 0;
|
|
font-size: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.ui-dialog .charsheet .sheet-abilities .grant-source-input[type=text]{
|
|
width: 58px;
|
|
height: 14px;
|
|
padding: 0;
|
|
font-size: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-abilities .grant-available[value="0"] ~ .Ability-name{
|
|
color: #db1c1c !important;
|
|
}
|
|
|
|
.sheet-abilities .grant-hidden[value="1"] ~ .grant-row{
|
|
display: none !important;
|
|
}
|
|
|
|
.ui-dialog .charsheet .sheet-abilities .grant-level-input[readonly],
|
|
.ui-dialog .charsheet .sheet-abilities .grant-source-input[readonly]{
|
|
background-color: #5A5A5A;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-abilities{
|
|
width: 800px;
|
|
border-radius: 12px;
|
|
border: 1px solid;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.charsheet .sheet-abilities .repcontainer[data-groupname="repeating_abilities"] .grc1,
|
|
.charsheet .sheet-abilities .repcontainer[data-groupname="repeating_abilities"] .grc2,
|
|
.charsheet .sheet-abilities .repcontainer[data-groupname="repeating_abilities"] .grc3,
|
|
.charsheet .sheet-abilities .repcontainer[data-groupname="repeating_abilities"] .grc4{
|
|
width: auto;
|
|
}
|
|
|
|
.sheet-abilities .grc1 > div,
|
|
.sheet-abilities .grc2 > div,
|
|
.sheet-abilities .grc3 > div,
|
|
.sheet-abilities .grc4 > div{
|
|
align-items: center;
|
|
min-height: 20px;
|
|
height: auto;
|
|
}
|
|
|
|
.ui-dialog .charsheet .sheet-abilities .Ability-name{
|
|
background-color: #000000;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
border: 0;
|
|
font-size: medium;
|
|
}
|
|
|
|
.charsheet .sheet-abilities .ability_description{
|
|
background-color: #D0D0D0;
|
|
}
|
|
|
|
.ui-dialog .charsheet .sheet-abilities textarea{
|
|
vertical-align: top;
|
|
text-align: left;
|
|
height: 54px;
|
|
min-height: 54px;
|
|
width: 96%;
|
|
border: 1px solid black;
|
|
border-radius: 5px 5px 5px 5px;
|
|
resize: vertical;
|
|
padding: 2px;
|
|
color: #000000;
|
|
}
|
|
|
|
/* Abilities / Feats column split */
|
|
.sheet-abilities .grr4.ggridc {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.sheet-abilities .grr4.ggridc > .grc1,
|
|
.sheet-abilities .grr4.ggridc > .grc2 {
|
|
min-width: 0;
|
|
}
|
|
|
|
.sheet-abilities .ggrid .grr4.ggridc .ability-toggle[value="0"] ~ div.ability_description.ggrid{
|
|
display: none;
|
|
}
|
|
|
|
.sheet-abilities .ggrid .grr4.ggridc .feats-toggle[value="0"] ~ div.feats_description{
|
|
display: none;
|
|
}
|
|
|
|
.ui-dialog .charsheet .sheet-abilities .resourceName{
|
|
width: 96%;
|
|
background-color: #000000;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
border: 0;
|
|
font-size: medium;
|
|
}
|
|
|
|
.charsheet .repcontainer[data-groupname="repeating_resources"]{
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
text-align: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.charsheet .repcontainer[data-groupname="repeating_resources"] > *{
|
|
text-align: center;
|
|
width: 20%;
|
|
border-radius: 12px 12px 0 0;
|
|
overflow: clip;
|
|
background: #D0D0D0;
|
|
}
|
|
|
|
/*</editor-fold>*/
|
|
|
|
/*<editor-fold desc="Spell Sheet Style">*/
|
|
|
|
.charsheet .sheet-spells{
|
|
text-align: center;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.charsheet .sheet-spells .gridarea{
|
|
text-align: center;
|
|
justify-content: space-evenly;
|
|
align-content: space-evenly;
|
|
grid-template-columns: auto auto;
|
|
padding: 0;
|
|
display: grid;
|
|
gap: 0 0;
|
|
grid-template-areas:
|
|
"HeaderS HeaderS"
|
|
"Column1 Column2";
|
|
}
|
|
|
|
.charsheet .sheet-spells .gridarea .titleblock{
|
|
grid-area: HeaderS;
|
|
border-radius: 10px 10px 0 0;
|
|
}
|
|
|
|
.charsheet .sheet-spells .Spell-Level{
|
|
width: 396px;
|
|
border: 1px solid black;
|
|
border-top: 1px white solid;
|
|
border-radius: 12px 12px 0 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.Spell-Level-Name {
|
|
width: 100%;
|
|
border-radius: 10px 10px 0 0;
|
|
background-color: #000000;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
padding: 0;
|
|
margin: 0;
|
|
border-bottom: 1px solid white;
|
|
}
|
|
|
|
.Spell-Level-Name span{
|
|
font-size: 18px;
|
|
}
|
|
|
|
.Spell-Level-Name input{
|
|
height: 16px;
|
|
width: 48px;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.Spell-Level .sheet-repeating-fields{
|
|
display: none;
|
|
}
|
|
|
|
input.sptoggle[value="1"] ~ .sheet-repeating-fields{
|
|
display: inline-block;
|
|
}
|
|
|
|
/*<editor-fold desc="Spell Repeating Fields">*/
|
|
|
|
.minimizable-repeat-spells{
|
|
display: inline-block;
|
|
text-align: center;
|
|
width: 390px;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
|
|
.minimizable-repeat-spells span{
|
|
background-color: #383838;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
}
|
|
.minimizable-repeat-spells .spelltitle{
|
|
width: 388px;
|
|
background-color: #383838;
|
|
border: 1px solid black;
|
|
border-radius: 5px 5px 0 0;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
|
|
.minimizable-repeat-spells .spelltitle input[type=text]{
|
|
width: 50%;
|
|
height: 18px;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
background-color: #383838;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
border: 0;
|
|
}
|
|
|
|
.minimizable-repeat-spells .spells_description{
|
|
width: 388px;
|
|
overflow: clip;
|
|
background-color: #FFFFFF;
|
|
color: #000000;
|
|
border: 1px solid black;
|
|
border-radius: 0 0 5px 5px;
|
|
text-align: center;
|
|
justify-content: center;
|
|
display: none;
|
|
grid-template-columns: 50% 50%;
|
|
padding: 0;
|
|
grid-template-rows: auto auto auto;
|
|
gap: 1px 1px;
|
|
grid-template-areas:
|
|
"Details-1 Details-2"
|
|
"Description Description"
|
|
"Advanced Advanced";
|
|
}
|
|
|
|
.minimizable-repeat-spells .spells-toggle[value="1"] ~ div.spells_description{
|
|
display: grid;
|
|
background: #D0D0D0;
|
|
}
|
|
|
|
.minimizable-repeat-spells .spells_description input[type=number]{
|
|
height: 18px;
|
|
text-align: center;
|
|
float: right;
|
|
}
|
|
|
|
.minimizable-repeat-spells .spells_description .Details-1 {
|
|
grid-area: Details-1;
|
|
padding: 3px;
|
|
text-align: left;
|
|
}
|
|
|
|
.minimizable-repeat-spells .spells_description .Details-1 .spellselect{
|
|
padding: 0;
|
|
border: 0;
|
|
text-align: center;
|
|
height: 18px;
|
|
width: 80px;
|
|
margin: 0;
|
|
justify-self: end;
|
|
}
|
|
|
|
.minimizable-repeat-spells .spells_description .Details-1 input{
|
|
justify-self: end;
|
|
}
|
|
|
|
.minimizable-repeat-spells .spells_description .Details-1 select{
|
|
justify-self: end;
|
|
}
|
|
|
|
.minimizable-repeat-spells .spells_description .Details-1 input[type=checkbox]{
|
|
float: right;
|
|
}
|
|
|
|
.minimizable-repeat-spells .spells_description .Details-1 input[type=text]{
|
|
height: 18px;
|
|
width: 56px;
|
|
text-align: center;
|
|
float: right;
|
|
}
|
|
|
|
|
|
.minimizable-repeat-spells .spells_description .Details-2 {
|
|
grid-area: Details-2;
|
|
padding: 3px;
|
|
text-align: left;
|
|
}
|
|
|
|
.minimizable-repeat-spells .spells_description .Details-2 .spellselect{
|
|
padding: 0;
|
|
border: 0;
|
|
text-align: center;
|
|
height: 18px;
|
|
width: 80px;
|
|
margin: 0;
|
|
justify-self: end;
|
|
}
|
|
|
|
|
|
.minimizable-repeat-spells .spells_description .Details-2 input{
|
|
justify-self: end;
|
|
}
|
|
|
|
.minimizable-repeat-spells .spells_description .Details-2 select{
|
|
justify-self: end;
|
|
}
|
|
|
|
.minimizable-repeat-spells .spells_description .Details-2 input[type=checkbox]{
|
|
float: right;
|
|
}
|
|
|
|
.minimizable-repeat-spells .spells_description .Details-2 input[type=text]{
|
|
height: 18px;
|
|
width: 56px;
|
|
text-align: center;
|
|
float: right;
|
|
}
|
|
|
|
.minimizable-repeat-spells .spells_description .Description {
|
|
grid-area: Description;
|
|
}
|
|
|
|
.minimizable-repeat-spells .spells_description .Description textarea{
|
|
vertical-align: top;
|
|
text-align: left;
|
|
height: 54px;
|
|
min-height: 54px;
|
|
width: 94%;
|
|
border: 1px solid black;
|
|
border-radius: 5px 5px 5px 5px;
|
|
resize: vertical;
|
|
padding: 0;
|
|
}
|
|
|
|
.minimizable-repeat-spells .spells_description .Advanced {
|
|
grid-area: Advanced;
|
|
}
|
|
|
|
.minimizable-repeat-spells .spells_description .spells-advanced-toggle[value="1"] ~ div.grr2.ggridc{
|
|
display: none;
|
|
}
|
|
|
|
/*</editor-fold*/
|
|
|
|
/*</editor-fold>*/
|
|
|
|
/*<editor-fold desc="Accessories">*/
|
|
|
|
.sheet-accessories .accessories-grid{
|
|
width: 800px;
|
|
background-color: #FFFFFF;
|
|
color: #000000;
|
|
border: 1px solid black;
|
|
border-top: none;
|
|
border-radius: 12px;
|
|
text-align: center;
|
|
justify-content: center;
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
padding: 0;
|
|
grid-template-rows: auto auto;
|
|
gap: 0 0;
|
|
grid-template-areas:
|
|
"HeaderM HeaderM"
|
|
"Column1 Column2";
|
|
}
|
|
|
|
.sheet-accessories .accessories-grid > div{
|
|
border-radius: 10px 10px 0 0;
|
|
}
|
|
.sheet-accessories .accessories-grid .crown-check{
|
|
height: 24px;
|
|
width: 24px;
|
|
}
|
|
|
|
.sheet-accessories .accessories-grid textarea{
|
|
vertical-align: top;
|
|
text-align: left;
|
|
height: 54px;
|
|
width: 94%;
|
|
border: 1px solid black;
|
|
border-radius: 5px 5px 5px 5px;
|
|
resize: vertical;
|
|
padding: 0;
|
|
}
|
|
|
|
.sheet-accessories .accessories-grid input[type=text]{
|
|
font-weight: bold;
|
|
text-align: center;
|
|
height: 24px;
|
|
width: 240px;
|
|
}
|
|
|
|
.sheet-accessories .accessories-grid h3{
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.sheet-accessories .accessories-grid .HeaderM {
|
|
grid-area: HeaderM;
|
|
background-color: #323232;
|
|
Color: #FFFFFF;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-accessories .accessories-grid .Column-1 {
|
|
grid-area: Column-1;
|
|
}
|
|
|
|
.sheet-accessories .accessories-grid .Column-2 {
|
|
grid-area: Column-2;
|
|
}
|
|
|
|
/*</editor-fold>*/
|
|
|
|
/*<editor-fold desc="Inventory Tab"*/
|
|
|
|
.inventory-grid{
|
|
width: 800px;
|
|
background-color: #FFFFFF;
|
|
overflow: hidden;
|
|
color: #000000;
|
|
border: 1px solid black;
|
|
border-top: none;
|
|
border-radius: 12px;
|
|
text-align: center;
|
|
justify-content: center;
|
|
grid-template-columns: 1fr;
|
|
padding: 0 0 5px 0;
|
|
grid-template-rows: auto auto;
|
|
gap: 0 0;
|
|
grid-template-areas:
|
|
"Header-I"
|
|
"Column-I";
|
|
}
|
|
|
|
.inventory-grid .Header-I{
|
|
grid-area: Header-I;
|
|
background-color: #000000;
|
|
font-weight: bold;
|
|
border-radius: 10px 10px 0 0;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.charsheet .sheet-inventory input[type=number]{
|
|
height: 24px;
|
|
width: 64px;
|
|
text-align: center;
|
|
}
|
|
|
|
.inventory-grid .Header-I h3{
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.inventory-grid .Column-I{
|
|
grid-area: Column-I;
|
|
}
|
|
|
|
.charsheet .repcontainer[data-groupname="repeating_maininventory"] > div:nth-child(odd),
|
|
.charsheet .repcontainer[data-groupname="repeating_locationtotals"] > div:nth-child(odd),
|
|
.charsheet .repcontainer[data-groupname="repeating_profitloss"] > div:nth-child(odd){
|
|
background-color: #D0D0D0;
|
|
}
|
|
|
|
|
|
.bag-grid{
|
|
width: 100%;
|
|
margin: auto;
|
|
display: grid;
|
|
grid-template-columns: auto auto auto auto auto;
|
|
grid-template-rows: auto;
|
|
gap: 0 40px;
|
|
grid-template-areas: "name location quantity piece-weight total-weight";
|
|
justify-content: center;
|
|
align-items: end;
|
|
text-align: center;
|
|
border-bottom: 1px solid black;
|
|
}
|
|
|
|
.ui-dialog .charsheet .name textarea,
|
|
.ui-dialog .charsheet .location textarea{
|
|
min-height: 22px;
|
|
height: 22px;
|
|
width: 240px;
|
|
text-align: center;
|
|
resize: vertical;
|
|
margin: auto;
|
|
display: block;
|
|
padding: 0
|
|
}
|
|
|
|
.inventory-location[value="0"] ~ div.location{
|
|
background-color: #920a15;
|
|
}
|
|
|
|
.location input[type=text]{
|
|
height: 24px;
|
|
width: 64px;
|
|
text-align: center;
|
|
}
|
|
|
|
.quantity input[type=text]{
|
|
height: 24px;
|
|
width: 64px;
|
|
text-align: center;
|
|
}
|
|
|
|
.piece-weight input[type=text]{
|
|
height: 24px;
|
|
width: 64px;
|
|
text-align: center;
|
|
}
|
|
|
|
.total-weight input[type=text]{
|
|
height: 24px;
|
|
width: 64px;
|
|
text-align: center;
|
|
}
|
|
|
|
.inventory-weight input{
|
|
height: 24px;
|
|
width: 64px;
|
|
text-align: center;
|
|
margin: 3px;
|
|
}
|
|
|
|
.bag-grid .name{
|
|
grid-area: name;
|
|
display: block
|
|
}
|
|
|
|
.bag-grid .quantity{
|
|
grid-area: quantity;
|
|
display: inline-block;
|
|
vertical-align: bottom
|
|
}
|
|
|
|
.bag-grid .piece-weight{
|
|
grid-area: piece-weight;
|
|
display: inline-block;
|
|
vertical-align: bottom
|
|
}
|
|
|
|
.bag-grid .total-weight{
|
|
grid-area: total-weight;
|
|
display: inline-block;
|
|
vertical-align: bottom
|
|
}
|
|
|
|
/*</editor-fold>*/
|
|
|
|
/*<editor-fold desc="skill page">*/
|
|
.SkillsPage{
|
|
width: 800px;
|
|
border: 1px solid black;
|
|
border-top: none;
|
|
border-radius: 12px;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ui-dialog .charsheet .SkillsPage button[type=roll],
|
|
.ui-dialog .charsheet .SkillsPage button[type=compendium]{
|
|
padding: 0;
|
|
border: #909090 solid 1px;
|
|
margin: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
text-align: center;
|
|
background-image: none;
|
|
content: "";
|
|
float: right;
|
|
transition-duration: 0.4s;
|
|
box-shadow: 0 2px #909090;
|
|
}
|
|
|
|
.ui-dialog .charsheet .SkillsPage button[type=roll]:hover,
|
|
.ui-dialog .charsheet .SkillsPage button[type=compendium]:hover {
|
|
background-color: #323232;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.ui-dialog .charsheet .SkillsPage button[type=roll]:active,
|
|
.ui-dialog .charsheet .SkillsPage button[type=compendium]:active {
|
|
background-color: #000000;
|
|
color: #db1c1c;
|
|
box-shadow: 0 0;
|
|
transform: translateY(2px);
|
|
}
|
|
|
|
.SkillsPage .skill-desc{
|
|
background-color: #A2A2A2;
|
|
color: #000000;
|
|
font-weight: bold;
|
|
margin: 6px auto;
|
|
}
|
|
|
|
.SkillsPage input[type=text]{
|
|
text-align: left;
|
|
width: 100px;
|
|
height: 20px;
|
|
}
|
|
|
|
.ui-dialog .charsheet .SkillsPage input[type=number]{
|
|
-moz-appearance: textfield;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ui-dialog .charsheet .SkillsPage input::-webkit-outer-spin-button,
|
|
.ui-dialog .charsheet .SkillsPage input::-webkit-inner-spin-button {
|
|
display: none;
|
|
-webkit-appearance: none;
|
|
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
|
|
}
|
|
|
|
.ui-dialog .charsheet .SkillsPage input[readonly]{
|
|
background-color: #5A5A5A;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ui-dialog .charsheet .SkillsPage th{
|
|
text-align: center;
|
|
width: 800px;
|
|
border-radius: 10px 10px 0 0;
|
|
background-color: #323232;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
font-size: medium;
|
|
}
|
|
|
|
.ui-dialog .charsheet .SkillsPage table tr:nth-child(even){
|
|
background-color: #D0D0D0;
|
|
}
|
|
|
|
|
|
.ui-dialog .charsheet .SkillsPage td{
|
|
padding: 1px;
|
|
}
|
|
|
|
.ui-dialog .charsheet .hoverskill{
|
|
transition-duration: .05s;
|
|
}
|
|
|
|
.ui-dialog .charsheet .SkillsPage .hoverskill:hover{
|
|
background-color: #323232;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
/*</editor-fold>*/
|
|
|
|
/* <editor-fold desc="Weapons/Armor Tab">*/
|
|
.sheet-gear{
|
|
width: 800px;
|
|
border-radius: 12px;
|
|
border: 1px solid;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.sheet-gear .weapon-shrink > div{
|
|
padding-bottom: 3px;
|
|
padding-right: 1px;
|
|
height: 18px;
|
|
}
|
|
|
|
|
|
.ui-dialog .charsheet .sheet-gear textarea{
|
|
padding: 0;
|
|
border: 1px solid black;
|
|
width: 177px;
|
|
resize: vertical;
|
|
height: 18px;
|
|
min-height: 18px;
|
|
}
|
|
|
|
.ui-dialog .charsheet .sheet-gear .weapon-name{
|
|
background-color: #000000;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: small;
|
|
border: 0;
|
|
padding: 3px;
|
|
width: 350px;
|
|
}
|
|
|
|
.weapon-column-span{
|
|
grid-column: 1/5;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.weapon-repeat-box{
|
|
border: 1px solid black;
|
|
border-radius: 15px 15px 0 0;
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
.sheet-gear .ggrid .weapon-toggle[value="0"] ~ .weapon-shrink{
|
|
display: none;
|
|
}
|
|
|
|
.sheet-gear .ggridc .grr1.ggrid .critconfirm-toggle[value="0"] ~ .crit-shrink{
|
|
display: none;
|
|
}
|
|
|
|
.sheet-gear .ggridc .grr1.ggrid .advancedweapon-toggle[value="0"] ~ .advancedweapon-shrink,
|
|
.sheet-gear .ggridc .grr2.ggrid .advancedweapon-toggle[value="0"] ~ .advancedweapon-shrink{
|
|
display: none;
|
|
}
|
|
|
|
|
|
.ui-dialog .charsheet .advancedAttackButton button[type="roll"]::before{
|
|
content: none;
|
|
}
|
|
|
|
.ui-dialog .charsheet .advancedAttackButton button{
|
|
background-color: #ffffff;
|
|
color: #000000;
|
|
border: solid 1px black;
|
|
border-radius: 5px;
|
|
font-size: small;
|
|
transition-duration: 0.4s;
|
|
box-shadow: 0 2px #909090;
|
|
margin: 1px;
|
|
padding: 1px;
|
|
content: none;
|
|
width: fit-content;
|
|
height: 16px;
|
|
}
|
|
|
|
.ui-dialog .charsheet .advancedAttackButton button:hover{
|
|
background-color: #323232;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.ui-dialog .charsheet .advancedAttackButton button:active{
|
|
background-color: #000000;
|
|
color: #db1c1c;
|
|
box-shadow: 0 0;
|
|
transform: translateY(2px);
|
|
}
|
|
|
|
.sheet-gear .grr7{
|
|
grid-template-columns: repeat(2,1fr);
|
|
}
|
|
|
|
/*</editor-fold>*/
|
|
|
|
/*<editor-fold desc="P&L">*/
|
|
.sheet-profitloss {
|
|
width: 800px;
|
|
border-radius: 12px;
|
|
border: 1px solid;
|
|
overflow: clip;
|
|
}
|
|
/*</editor-fold>*/
|
|
|
|
/*<editor-fold desc="settings">*/
|
|
.sheet-settings {
|
|
width: 800px;
|
|
border-radius: 12px;
|
|
border: 1px solid;
|
|
overflow: clip;
|
|
}
|
|
|
|
.settings-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
width: 800px;
|
|
}
|
|
|
|
.settings-left,
|
|
.settings-right {
|
|
width: 400px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.settings-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
align-items: center;
|
|
min-height: 24px;
|
|
}
|
|
|
|
.settings-left .settings-row:nth-child(even),
|
|
.settings-right .settings-row:nth-child(even) {
|
|
background-color: #D0D0D0;
|
|
}
|
|
|
|
.settings-left .settings-row:nth-child(odd),
|
|
.settings-right .settings-row:nth-child(odd) {
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.settings-label {
|
|
background-color: #000000;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
text-align: right;
|
|
padding: 4px 8px 4px 4px;
|
|
min-height: 18px;
|
|
}
|
|
|
|
.settings-value {
|
|
background-color: #FFFFFF;
|
|
padding: 2px 6px;
|
|
text-align: left;
|
|
}
|
|
|
|
.settings-value input[type=number] {
|
|
background-color: #FFFFFF;
|
|
color: #000000;
|
|
}
|
|
/*</editor-fold>*/
|
|
/* Vitals and Resistances */
|
|
|
|
|
|
.vitals-resistances-block{
|
|
width: 400px;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
background-color: #000000;
|
|
align-self: start;
|
|
}
|
|
|
|
.vitals-resistances-content{
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 4px;
|
|
box-sizing: border-box;
|
|
width: 400px;
|
|
padding: 4px;
|
|
background-color: #000000;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.vitals-rest-row,
|
|
.vitals-death-save-row{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
min-height: 22px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ui-dialog .charsheet .sheet-main .main-right .vitals-death-save-row{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.ui-dialog .charsheet .sheet-main .main-right .vitals-death-save-row span{
|
|
font-size: medium;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.ui-dialog .charsheet .sheet-main .main-right .vitals-death-save-row label{
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 3px;
|
|
font-weight: bold;
|
|
font-size: small;
|
|
width: auto;
|
|
height: 18px;
|
|
line-height: 18px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
.ui-dialog .charsheet .sheet-main .main-right .vitals-death-save-row input.death-save-checkbox {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
width: 18px;
|
|
height: 18px;
|
|
margin: 0;
|
|
border: 1px solid #000000;
|
|
border-radius: 4px;
|
|
background: #FFFFFF;
|
|
cursor: pointer;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.ui-dialog .charsheet .sheet-main .main-right .vitals-death-save-row input.death-save-checkbox:checked {
|
|
background: #000000;
|
|
border-color: #000000;
|
|
}
|
|
|
|
.ui-dialog .charsheet .sheet-main .main-right .vitals-death-save-row input.death-save-checkbox:checked::after {
|
|
content: "☠";
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -52%);
|
|
color: #FFFFFF;
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.ui-dialog .charsheet .vitals-rest-button,
|
|
.ui-dialog .charsheet .vitals-death-save-button{
|
|
width: 42px;
|
|
height: 18px;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.vitals-repeat-columns{
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4px;
|
|
align-items: start;
|
|
}
|
|
|
|
.vitals-repeat-section{
|
|
min-width: 0;
|
|
background-color: #000000;
|
|
border: 0;
|
|
border-radius: 8px 8px 0 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.vitals-subheader{
|
|
background-color: #323232;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
min-height: 18px;
|
|
line-height: 18px;
|
|
border: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.damage-reduction-row,
|
|
.resistance-row{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 3px;
|
|
min-height: 22px;
|
|
padding: 2px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.ui-dialog .charsheet .damage-reduction-row input[type=number],
|
|
.ui-dialog .charsheet .resistance-row input[type=number],
|
|
.ui-dialog .charsheet input.vitals-small-number[type=number]{
|
|
width: 34px;
|
|
height: 18px;
|
|
padding: 0;
|
|
}
|
|
|
|
.ui-dialog .charsheet .vitals-bypass-input[type=text]{
|
|
width: 104px;
|
|
height: 18px;
|
|
padding: 0 2px;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
}
|
|
|
|
.ui-dialog .charsheet .vitals-element-select{
|
|
width: 112px;
|
|
height: 18px;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 11px;
|
|
text-align: center;
|
|
}
|
|
|
|
.ui-dialog .charsheet .vitals-repeat-section .repcontrol{
|
|
margin: 2px 0 4px 0;
|
|
}
|
|
|
|
.ui-dialog .charsheet .vitals-repeat-section .repcontrol button{
|
|
height: 16px;
|
|
padding: 0 5px;
|
|
line-height: 14px;
|
|
}
|