roll20-character-sheets/Hyperborea/hyperborea.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
}