mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 11:42:29 +00:00
462 lines
9.2 KiB
CSS
462 lines
9.2 KiB
CSS
@import url('https://fonts.googleapis.com/css?family=Playfair+Display+SC&display=swap');
|
|
@import url('https://fonts.googleapis.com/css?family=PT+Serif&display=swap');
|
|
|
|
|
|
h1 {
|
|
font-family: 'Playfair Display SC';
|
|
font-size: 46px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
font-family: 'PT Serif';
|
|
}
|
|
|
|
h3 {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
font-family: 'PT Serif';
|
|
}
|
|
|
|
input[type=checkbox] {
|
|
transform: scale(.75);
|
|
}
|
|
|
|
.sheet-one_col {
|
|
display: grid;
|
|
grid-template-columns: repeat(1, max-content);
|
|
gap: 10px;
|
|
}
|
|
|
|
.sheet-one_col_box {
|
|
display: grid;
|
|
grid-template-columns: repeat(1, max-content);
|
|
gap: 5px;
|
|
border: 2px solid black;
|
|
padding: 3px;
|
|
padding-right: 5px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.sheet-two_col {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, max-content);
|
|
row-gap: 5px;
|
|
column-gap: 10px;
|
|
}
|
|
|
|
.sheet-two_col_box {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, max-content);
|
|
row-gap: 5px;
|
|
column-gap: 10px;
|
|
border: 2px solid black;
|
|
padding: 10px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.sheet-three_col {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, max-content);
|
|
row-gap: 10px;
|
|
column-gap: 10px;
|
|
}
|
|
|
|
.sheet-fixed {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.sheet-table_header {
|
|
font-size:12px !important;
|
|
border: 1px solid black;
|
|
background-color: lightgrey;
|
|
text-align: center !important;
|
|
font-family: 'PT Serif';
|
|
max-height: 20px;
|
|
}
|
|
|
|
.sheet-table_header_small {
|
|
font-size:12px !important;
|
|
border: 1px solid black;
|
|
background-color: lightgrey;
|
|
text-align: center !important;
|
|
font-family: 'PT Serif';
|
|
max-width: 71px;
|
|
max-height: 20px;
|
|
}
|
|
|
|
.sheet-table_header_large {
|
|
font-size:12px !important;
|
|
border: 1px solid black;
|
|
background-color: lightgrey;
|
|
text-align: center !important;
|
|
font-family: 'PT Serif';
|
|
max-width: 149px;
|
|
max-height: 20px;
|
|
}
|
|
|
|
.sheet-table_header_large2 {
|
|
font-size:12px !important;
|
|
border: 1px solid black;
|
|
background-color: lightgrey;
|
|
text-align: center !important;
|
|
font-family: 'PT Serif';
|
|
max-width: 241px;
|
|
max-height: 20px;
|
|
}
|
|
|
|
.sheet-table_header_xlarge {
|
|
font-size:12px !important;
|
|
border: 1px solid black;
|
|
background-color: lightgrey;
|
|
text-align: center !important;
|
|
font-family: 'PT Serif';
|
|
max-width: 390px;
|
|
max-height: 20px;
|
|
}
|
|
|
|
.sheet-table_entry_small {
|
|
width: 80px;
|
|
min-width: 80px;
|
|
max-height: 20px;
|
|
text-align: center;
|
|
font-family: 'PT Serif';
|
|
}
|
|
|
|
.sheet-table_entry_small_right {
|
|
width: 80px;
|
|
max-height: 20px;
|
|
text-align: right;
|
|
font-family: 'PT Serif';
|
|
}
|
|
|
|
|
|
.sheet-table_entry_large {
|
|
width: 150px;
|
|
max-height: 20px;
|
|
font-family: 'PT Serif';
|
|
}
|
|
|
|
.sheet-table_entry_large2_left {
|
|
width: 250px;
|
|
text-align: left;
|
|
max-height: 20px;
|
|
font-family: 'PT Serif';
|
|
}
|
|
|
|
.sheet-table_entry_xlarge {
|
|
width: 400px;
|
|
max-height: 20px;
|
|
font-family: 'PT Serif';
|
|
}
|
|
|
|
.sheet-weapon_table {
|
|
display: grid;
|
|
grid-template-columns: 80px 250px 80px 80px 80px 80px 80px 80px;
|
|
grid-gap: 1px;
|
|
font-size:8px;
|
|
}
|
|
|
|
.sheet-monster_attack_table {
|
|
display: grid;
|
|
grid-template-columns: 80px 250px 80px 80px;
|
|
grid-gap: 1px;
|
|
font-size:8px;
|
|
}
|
|
|
|
.repitem {
|
|
display: grid;
|
|
align-items: center;
|
|
margin-bottom: 3px;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.sheet-ability_table {
|
|
display: grid;
|
|
grid-template-columns: 80px 150px 80px 80px 400px;
|
|
grid-gap: 1px;
|
|
}
|
|
|
|
.sheet-equipment_table {
|
|
display: grid;
|
|
grid-template-columns: 250px 80px 80px 80px;
|
|
grid-gap: 1px;
|
|
}
|
|
|
|
.sheet-hireling_table {
|
|
display: grid;
|
|
grid-template-columns: 150px 400px;
|
|
grid-gap: 1px;
|
|
}
|
|
|
|
.sheet-coin_table {
|
|
display: grid;
|
|
grid-template-columns: 80px 80px 80px 80px 80px 80px;
|
|
grid-gap: 1px;
|
|
}
|
|
|
|
.sheet-spell_table {
|
|
display: grid;
|
|
grid-template-columns: 150px 80px 80px 80px 80px 250px;
|
|
grid-gap: 1px;
|
|
}
|
|
|
|
.sheet-spell_slot_table {
|
|
display: grid;
|
|
grid-template-columns: 80px 80px 80px 80px 80px 80px;
|
|
grid-gap: 1px;
|
|
}
|
|
|
|
.sheet-digit_input {
|
|
width: 50px !important;
|
|
max-width: 50px;
|
|
max-height: 25px;
|
|
font-family: 'PT Serif';
|
|
}
|
|
|
|
.sheet-digit_input_left {
|
|
width: 50px !important;
|
|
max-width: 50px;
|
|
max-height: 25px;
|
|
font-family: 'PT Serif';
|
|
text-align: left;
|
|
}
|
|
|
|
.sheet-digit_input_small_bold {
|
|
width: 50px !important;
|
|
max-width: 25px;
|
|
max-height: 25px;
|
|
font-family: 'PT Serif';
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-digit_input_stat {
|
|
width: 50px !important;
|
|
max-width: 50px;
|
|
max-height: 25px;
|
|
font-family: 'PT Serif';
|
|
margin-top: -5px !important;
|
|
}
|
|
|
|
.sheet-digit_input_bold {
|
|
width: 50px !important;
|
|
max-width: 50px;
|
|
max-height: 25px;
|
|
font-weight: bold;
|
|
font-family: 'PT Serif';
|
|
}
|
|
|
|
.sheet-digit_input_right {
|
|
width: 50px !important;
|
|
max-width: 50px;
|
|
max-height: 25px;
|
|
text-align: right;
|
|
font-family: 'PT Serif';
|
|
}
|
|
|
|
.sheet-digit_input_right_bold {
|
|
width: 50px !important;
|
|
max-width: 50px;
|
|
max-height: 25px;
|
|
text-align: right;
|
|
font-weight: bold;
|
|
font-family: 'PT Serif';
|
|
}
|
|
|
|
input.sheet-txt_input {
|
|
font-size:14px;
|
|
max-width: 189px;
|
|
max-height: 25px;
|
|
margin-top: -3px;
|
|
font-family: 'PT Serif';
|
|
}
|
|
|
|
label.sheet-txt_label {
|
|
font-size:14px;
|
|
font-family: 'PT Serif';
|
|
}
|
|
|
|
label.sheet-radio_label {
|
|
font-size:14px;
|
|
font-family: 'PT Serif';
|
|
margin-top: 8px;
|
|
}
|
|
|
|
label.sheet-txt_label_small {
|
|
font-size:12px;
|
|
font-family: 'PT Serif';
|
|
}
|
|
|
|
.sheet-txt_title {
|
|
background-color: black;
|
|
color: white;
|
|
font-weight: bold;
|
|
padding: 5px;
|
|
max-width: 20px;
|
|
max-height: 15px;
|
|
font-family: 'PT Serif';
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
.sheet-txt_title_small label {
|
|
font-size: medium;
|
|
background-color: black;
|
|
color: white;
|
|
font-weight: bold;
|
|
font-family: 'PT Serif';
|
|
}
|
|
|
|
.sheet-txt_label_bold {
|
|
font-size:14px;
|
|
font-weight: bold;
|
|
font-family: 'PT Serif';
|
|
}
|
|
|
|
.sheet-stat_block {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, max-content);
|
|
}
|
|
|
|
.sheet-stat_block_small {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, max-content);
|
|
font-size:12px;
|
|
font-family: 'PT Serif';
|
|
}
|
|
|
|
.sheet-stat_button {
|
|
font-size:14px !important;;
|
|
max-width:100% !important;
|
|
max-height:15px !important;
|
|
font-family: 'PT Serif';
|
|
}
|
|
|
|
.sheet-stat_checkbox {
|
|
margin-bottom: 11px !important;
|
|
}
|
|
|
|
.sheet-tab_button {
|
|
font-family: 'PT Serif';
|
|
}
|
|
|
|
.sheet-textarea {
|
|
resize: vertical;
|
|
min-width: 800px;
|
|
min-height: 50px;
|
|
}
|
|
|
|
.sheet-monster_sa_area {
|
|
resize: none;
|
|
min-width: 50px;
|
|
box-sizing: border-box;
|
|
min-height: 415px;
|
|
min-width: 400px;
|
|
}
|
|
|
|
/*
|
|
* Roll Template
|
|
*/
|
|
.sheet-rolltemplate-default td {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.sheet-rolltemplate-default td:first-child{
|
|
font-weight: normal;
|
|
}
|
|
|
|
.sheet-rolltemplate-default table{
|
|
border-collapse: separate;
|
|
overflow: hidden;
|
|
}
|
|
.sheet-rolltemplate-default caption {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
border-top-left-radius: 6% 50%;
|
|
border-top-right-radius: 6% 50%;
|
|
background-color: black;
|
|
color: white;
|
|
}
|
|
.sheet-rolltemplate-default table,
|
|
.sheet-rolltemplate-default tbody,
|
|
.sheet-rolltemplate-default table tr:last-of-type {
|
|
border-bottom-left-radius: 15px;
|
|
border-bottom-right-radius: 15px;
|
|
}
|
|
|
|
/*
|
|
* Tabs
|
|
*/
|
|
|
|
/*Configure the tab buttons*/
|
|
.sheet-monster_tab,
|
|
.sheet-pc_tab,
|
|
.sheet-hireling_tab,
|
|
.sheet-equipment_tab,
|
|
.sheet-melee_tab,
|
|
.sheet-missile_tab,
|
|
.sheet-class_tab,
|
|
.sheet-spell_tab {
|
|
display: none;
|
|
}
|
|
|
|
/* show the selected tab */
|
|
.sheet-sheet_toggle[value="monster_tab"] ~ div.sheet-monster_tab,
|
|
.sheet-sheet_toggle[value="pc_tab"] ~ div.sheet-pc_tab,
|
|
.sheet-items_toggle[value="hireling_tab"] ~ div.sheet-hireling_tab,
|
|
.sheet-items_toggle[value="equipment_tab"] ~ div.sheet-equipment_tab,
|
|
.sheet-weapon_toggle[value="melee_tab"] ~ div.sheet-melee_tab,
|
|
.sheet-weapon_toggle[value="missile_tab"] ~ div.sheet-missile_tab,
|
|
.sheet-ability_toggle[value="class_tab"] ~ div.sheet-class_tab,
|
|
.sheet-ability_toggle[value="spell_tab"] ~ div.sheet-spell_tab {
|
|
display: block;
|
|
}
|
|
|
|
/*
|
|
* Darkmode Support
|
|
*/
|
|
body.sheet-darkmode select,
|
|
body.sheet-darkmode textarea,
|
|
body.sheet-darkmode .charsheet,
|
|
body.sheet-darkmode input {
|
|
background-color: black;
|
|
color: white;
|
|
}
|
|
|
|
body.sheet-darkmode h3,
|
|
body.sheet-darkmode h2,
|
|
body.sheet-darkmode h1 {
|
|
color: darkorange;
|
|
}
|
|
|
|
body.sheet-darkmode .sheet-one_col_box,
|
|
body.sheet-darkmode .sheet-two_col_box {
|
|
border-color: darkorange;
|
|
}
|
|
|
|
body.sheet-darkmode .sheet-txt_title,
|
|
body.sheet-darkmode .sheet-table_header ,
|
|
body.sheet-darkmode .sheet-table_header_small,
|
|
body.sheet-darkmode .sheet-table_header_large,
|
|
body.sheet-darkmode .sheet-table_header_large2,
|
|
body.sheet-darkmode .sheet-table_header_xlarge {
|
|
background-color: darkorange;
|
|
color: black;
|
|
}
|
|
|
|
body.sheet-darkmode button,
|
|
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
|
|
}
|