|
:root { |
|
--HB_Color_Background: #EEE5CE; |
|
--HB_Color_Accent: #E0E5C1; |
|
--HB_Color_HeaderUnderline: #C0AD6A; |
|
--HB_Color_HorizontalRule: #9C2B1B; |
|
--HB_Color_HeaderText: #58180D; |
|
--HB_Color_MonsterStatBackground: #F2E5B5; |
|
--HB_Color_CaptionText: #766649; |
|
--HB_Color_WatercolorStain: #BBAD82; |
|
--HB_Color_Footnotes: #C9AD6A; |
|
} |
|
input[type="text"], textarea { |
|
width: auto; |
|
padding: 8px; |
|
margin: 5px 0; |
|
border: 1px solid #ccc; |
|
border-radius: 4px; |
|
font-size: 14px; |
|
background-color: #f9f9f9; |
|
transition: background-color 0.3s ease, border-color 0.3s ease; |
|
} |
|
.grid-container { |
|
display: grid; |
|
grid-template-columns: 1fr 3fr; |
|
grid-gap: 20px; |
|
padding: 20px; |
|
height: 100vh; |
|
} |
|
.block-container { |
|
position: fixed; |
|
top: 20px; |
|
left: 20px; |
|
width: 450px; |
|
height: calc(100vh - 40px); |
|
overflow-y: auto; |
|
border-right: 1px solid #ccc; |
|
padding-right: 20px; |
|
box-sizing: border-box; |
|
background-color: #f9f9f9; |
|
z-index: 1000; |
|
} |
|
|
|
.block-container .page { |
|
column-count: 1; |
|
padding: 0; |
|
width: 425px; |
|
height: auto; |
|
overflow: visible; |
|
page-break-before: auto; |
|
page-break-after: auto; |
|
|
|
} |
|
.page-container { |
|
margin-left: 450px; |
|
width: 900px; |
|
padding: 20px; |
|
overflow: auto; |
|
height: 100vh; |
|
box-sizing: border-box; |
|
} |
|
|
|
@media print { |
|
|
|
.page { |
|
page-break-before: auto; |
|
page-break-after: avoid; |
|
page-break-inside: avoid; |
|
|
|
} |
|
.columnWrapper { |
|
overflow: visible; |
|
} |
|
.block-content { |
|
margin-bottom: 0; |
|
} |
|
} |
|
|
|
|
|
.page { |
|
column-count: 2; |
|
column-gap: .9cm; |
|
column-width: 8cm; |
|
-webkit-column-count: 2; |
|
-moz-column-count: 2; |
|
-webkit-column-width: 8cm; |
|
-moz-column-width: 8cm; |
|
-webkit-column-gap: .9cm; |
|
-moz-column-gap: .9cm; |
|
position: relative; |
|
z-index: 15; |
|
box-sizing: border-box; |
|
width: 215.9mm; |
|
height: 279.4mm; |
|
padding: 1.4cm 1.2cm 1.7cm; |
|
overflow: hidden; |
|
font-family: "BookInsanityRemake"; |
|
font-size: .34cm; |
|
counter-increment: phb-page-numbers; |
|
background-color: var(--HB_Color_Background); |
|
background-image: url('./themes/assets/parchmentBackground.jpg'); |
|
text-rendering: optimizeLegibility; |
|
page-break-before: always; |
|
page-break-after: always; |
|
contain: size; |
|
|
|
} |
|
|
|
.page .monster hr:last-of-type + * { |
|
margin-top: .1cm; |
|
} |
|
.page * + h3 { |
|
margin-top: .05cm; |
|
} |
|
.page * + h4 { |
|
margin-top: .1cm; |
|
} |
|
.page h4 + * { |
|
margin-top: .1cm; |
|
} |
|
.page dl + * { |
|
margin-top: .1cm; |
|
} |
|
.page p + * { |
|
margin-top: .1cm; |
|
} |
|
.page img { |
|
width: 100%; |
|
height: auto; |
|
cursor: pointer; |
|
} |
|
.page .classTable.frame{ |
|
width: 95%; |
|
margin-right:0.1cm; |
|
margin-left: 0.1cm; |
|
} |
|
|
|
|
|
.block-content h1 { |
|
column-span: none; |
|
box-sizing: border-box; |
|
margin: 0 auto; |
|
overflow: hidden; |
|
word-wrap: break-word; |
|
} |
|
.columnWrapper { |
|
width: 100%; |
|
column-gap: inherit; |
|
max-height: 100%; |
|
column-span: all; |
|
columns: inherit; |
|
height: 100%; |
|
box-sizing: border-box; |
|
} |
|
|
|
.block-item { |
|
border: 1px solid #ccc; |
|
border-radius: 8px; |
|
background-color: transparent; |
|
padding: 15px; |
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); |
|
transition: transform 0.3s; |
|
} |
|
.block-item:hover { |
|
transform: translateY(-5px); |
|
background-color: rgba(255, 255, 255, 0.5); |
|
} |
|
|
|
.block-item img { |
|
width: 100%; |
|
height: auto; |
|
cursor: pointer; |
|
} |
|
|
|
|
|
.modal { |
|
display: none; |
|
position: fixed; |
|
z-index: 1001; |
|
left: 0; |
|
top: 0; |
|
width: 100%; |
|
height: 100%; |
|
overflow: auto; |
|
background-color: rgb(0,0,0); |
|
background-color: rgba(0,0,0,0.9); |
|
} |
|
|
|
.modal-content { |
|
margin: auto; |
|
display: block; |
|
width: 80%; |
|
max-width: 700px; |
|
} |
|
|
|
.modal-content, #caption { |
|
animation-name: zoom; |
|
animation-duration: 0.6s; |
|
} |
|
|
|
@keyframes zoom { |
|
from {transform: scale(0)} |
|
to {transform: scale(1)} |
|
} |
|
|
|
.close { |
|
position: absolute; |
|
top: 15px; |
|
right: 35px; |
|
color: #f1f1f1; |
|
font-size: 40px; |
|
font-weight: bold; |
|
transition: 0.3s; |
|
} |
|
|
|
.close:hover, |
|
.close:focus { |
|
color: #bbb; |
|
text-decoration: none; |
|
cursor: pointer; |
|
} |
|
input[type="text"]:focus, textarea:focus { |
|
background-color: #e9e9e9; |
|
border-color: #aaa; |
|
outline: none; |
|
} |
|
|
|
|
|
|
|
.user-description-textarea { |
|
width: 400px; |
|
height: 40px; |
|
resize: vertical; |
|
background: none; |
|
font-family: "ScalySansRemake"; |
|
font-weight: 800; |
|
|
|
} |
|
|
|
.user-description-textarea:focus { |
|
background-color: #e9e9e9; |
|
border-color: #aaa; |
|
outline: none; |
|
} |
|
|
|
.heading-textarea { |
|
width: 100%; |
|
font-size: .458cm; |
|
line-height: .7em; |
|
font-weight: 800; |
|
border: none; |
|
background: none; |
|
margin: 0; |
|
padding: 0; |
|
resize: none; |
|
overflow: hidden; |
|
outline: none; |
|
font-family: "MrEavesRemake"; |
|
color: var(--HB_Color_HeaderText) |
|
|
|
} |
|
.title-textarea{ |
|
height:30px; |
|
width: 100%; |
|
margin-bottom: 5px; |
|
column-span: all; |
|
font-size: .89cm; |
|
line-height: 1em; |
|
font-family: "MrEavesRemake"; |
|
font-weight: 800; |
|
color: var(--HB_Color_HeaderText); |
|
border: 0; |
|
font: inherit; |
|
background: none; |
|
padding: 0; |
|
resize: none; |
|
overflow: hidden; |
|
outline: none; |
|
|
|
} |
|
|
|
.subtitle-textarea{ |
|
height:20px; |
|
width: 100%; |
|
margin-bottom: 5px; |
|
column-span: all; |
|
font-size: .89cm; |
|
line-height: 1em; |
|
font-family: "MrEavesRemake"; |
|
font-weight: 800; |
|
color: var(--HB_Color_HeaderText); |
|
border: 0; |
|
font: inherit; |
|
background: none; |
|
padding: 0; |
|
resize: none; |
|
overflow: hidden; |
|
outline: none; |
|
|
|
} |
|
|
|
div[contenteditable="true"]:focus { |
|
background-color: #e9e9e9; |
|
border-color: #aaa; |
|
outline: none; |
|
} |
|
|
|
div[contenteditable="true"] p::first-letter { |
|
float: left; |
|
padding-bottom: 2px; |
|
padding-left: 40px; |
|
margin-top: 0cm; |
|
margin-bottom: -20px; |
|
margin-left: -40px; |
|
font-family: "SolberaImitationRemake"; |
|
font-size: 3.5cm; |
|
line-height: 1em; |
|
color: rgba(0, 0, 0, 0); |
|
background-image: linear-gradient(-45deg, #322814, #998250, #322814); |
|
-webkit-background-clip: text; |
|
background-clip: text; |
|
border: 0; |
|
} |
|
.properties-textarea { |
|
width: 100%; |
|
font-size: 12px; |
|
font-weight: 400; |
|
line-height: .7em; |
|
margin-bottom: 0; |
|
font-style: italic; |
|
box-sizing: border-box; |
|
border: 0; |
|
font-family: "ScalySansRemake"; |
|
vertical-align: baseline; |
|
margin: 0; |
|
padding: 0; |
|
overflow-wrap: break-word; |
|
text-rendering: optimizeLegibility; |
|
background: none; |
|
resize: none; |
|
|
|
} |
|
|
|
.description-textarea { |
|
width: 100%; |
|
height: auto; |
|
font-size: .318cm; |
|
font-weight: 400; |
|
line-height: .9em; |
|
margin-bottom: 0; |
|
font-style: italic; |
|
box-sizing: border-box; |
|
border: 0; |
|
font-family: "ScalySansSmallCapsRemake"; |
|
vertical-align: baseline; |
|
margin: 0; |
|
padding: 0; |
|
overflow-wrap: break-word; |
|
text-rendering: optimizeLegibility; |
|
background: none; |
|
resize: none; |
|
overflow: hidden; |
|
} |
|
|
|
.red-integer-stat-textarea { |
|
width: 20px; |
|
height:13px; |
|
font-size: .318cm; |
|
font-weight: 400; |
|
line-height: 1.2em; |
|
margin-bottom: 0; |
|
font-style: italic; |
|
box-sizing: border-box; |
|
border: 0; |
|
font-family: "ScalySansSmallCapsRemake"; |
|
vertical-align: baseline; |
|
margin: 0; |
|
padding: 0; |
|
overflow-wrap: break-word; |
|
text-rendering: optimizeLegibility; |
|
background: none; |
|
resize: none; |
|
overflow: hidden; |
|
color: var(--HB_Color_HeaderText); |
|
white-space: pre-line; |
|
} |
|
|
|
.integer-stat-textarea { |
|
width: 20px; |
|
height:13px; |
|
font-size: .318cm; |
|
font-weight: 400; |
|
line-height: 1.2em; |
|
margin-bottom: 0; |
|
font-style: italic; |
|
box-sizing: border-box; |
|
border: 0; |
|
font-family: "ScalySansRemake"; |
|
vertical-align: baseline; |
|
margin: 0; |
|
padding: 0; |
|
overflow-wrap: break-word; |
|
text-rendering: optimizeLegibility; |
|
background: none; |
|
resize: none; |
|
overflow: hidden; |
|
white-space: pre-line; |
|
} |
|
|
|
.string-stat-textarea { |
|
width: 200px; |
|
height:13px; |
|
font-size: .318cm; |
|
font-weight: 400; |
|
line-height: 1.2em; |
|
margin-bottom: 0; |
|
font-style: italic; |
|
box-sizing: border-box; |
|
border: 0; |
|
font-family: "ScalySansRemake"; |
|
vertical-align: baseline; |
|
margin: 0; |
|
padding: 0; |
|
overflow-wrap: break-word; |
|
text-rendering: optimizeLegibility; |
|
background: none; |
|
resize: none; |
|
overflow: hidden; |
|
white-space: pre-wrap; |
|
} |
|
|
|
.string-action-name-textarea { |
|
width: 100%; |
|
height:13px; |
|
font-size: .318cm; |
|
font-style: italic; |
|
font-weight: bold; |
|
line-height: 1.2em; |
|
margin-bottom: 0; |
|
font-style: italic; |
|
box-sizing: border-box; |
|
border: 0; |
|
font-family: "ScalySansRemake"; |
|
vertical-align: baseline; |
|
margin: 0; |
|
padding: 0; |
|
overflow-wrap: break-word; |
|
text-rendering: optimizeLegibility; |
|
background: none; |
|
resize: none; |
|
overflow: hidden; |
|
|
|
} |
|
|
|
.string-action-description-textarea { |
|
width: 100%; |
|
height:16px; |
|
font-size: 14px; |
|
font-weight: 400; |
|
line-height: 16px; |
|
margin-bottom: 0; |
|
box-sizing: border-box; |
|
border: 0; |
|
font-family: "ScalySansRemake"; |
|
vertical-align: baseline; |
|
margin: 0; |
|
padding: 0; |
|
overflow-wrap: break-word; |
|
text-rendering: optimizeLegibility; |
|
background: none; |
|
resize: none; |
|
overflow: hidden; |
|
} |
|
|
|
.block.monster.frame.wide { |
|
column-count: inherit; |
|
min-height: 100px; |
|
height: 859px; |
|
column-fill: auto; |
|
overflow: hidden; |
|
width: 100%; |
|
|
|
} |
|
|
|
.highlight-page { |
|
outline: 2px dashed #2196F3; |
|
background-color: rgba(33, 150, 243, 0.1); |
|
} |
|
|
|
.highlight-block { |
|
border-bottom: 2px solid #2196F3; |
|
background-color: rgba(33, 150, 243, 0.1); |
|
} |
|
|
|
.highlight-block-top { |
|
border-top: 2px solid #2196F3; |
|
background-color: rgba(33, 150, 243, 0.1); |
|
} |
|
|
|
.name-textbox { |
|
width: 50px; |
|
font-size: 1.5em; |
|
padding: 10px; |
|
} |
|
|
|
.stat-textbox { |
|
width: 50px; |
|
text-align: center; |
|
font-size: 1em; |
|
padding: 5px; |
|
} |
|
|
|
.trash-area { |
|
position: fixed; |
|
bottom: 20px; |
|
right: 20px; |
|
width: 100px; |
|
height: 100px; |
|
|
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
|
|
cursor: pointer; |
|
background-image: url('./closed-mimic-trashcan.png'); |
|
background-size: contain; |
|
background-repeat: no-repeat; |
|
background-position: center; |
|
} |
|
|
|
.trash-area:hover { |
|
background-image: url('./mimic_trashcan.png'); |
|
} |
|
.trash-area.over { |
|
color: white; |
|
background-image: url('./mimic_trashcan.png'); |
|
} |
|
|