mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-31 20:22:29 +00:00
1279 lines
26 KiB
CSS
1279 lines
26 KiB
CSS
@import url('https://fonts.googleapis.com/css?family=Uncial+Antiqua|Roboto+Slab:wght@200|Inconsolata:wght@300&display=swap');
|
|
|
|
/* COLORS */
|
|
|
|
:root {
|
|
/* light theme */
|
|
--bgs-light: #f7f7f7f1;
|
|
--bgd-light: #a27800;
|
|
--bgi-light: #ffffff99;
|
|
--bgir-light: #ffffff00;
|
|
--bgg-light: #ffffd7;
|
|
--tcd-light: #262626;
|
|
--tcl-light: #ffffd7;
|
|
--tch-light: #0087ff;
|
|
--hlr-light: #ffea81b3;
|
|
/* dark theme */
|
|
--bgs-dark: #1c1c1cf1;
|
|
--bgd-dark: #af8700; /* always keep section titles the same background */
|
|
--bgi-dark: #ffffff21;
|
|
--bgir-dark: #00000000;
|
|
--bgg-dark: #262626c2;
|
|
--tcd-dark: #e4e4e4;
|
|
--tcl-dark: #e4e4e4;
|
|
--tch-dark: #0087ff;
|
|
--hlr-dark: #484845b3;
|
|
}
|
|
|
|
.themeactivator[value="light"] ~ div.character,
|
|
.themeactivator[value="light"] ~ div.inventory,
|
|
.themeactivator[value="light"] ~ div.settings {
|
|
--background-sheet: var(--bgs-light);
|
|
--background-dark: var(--bgd-light); /* TODO rename variable, unclear now */
|
|
--background-input: var(--bgi-light);
|
|
--background-inputro: var(--bgir-light);
|
|
--background-grid: var(--bgg-light);
|
|
--textcolor-dark: var(--tcd-light);
|
|
--textcolor-light: var(--tcl-light);
|
|
--textcolor-highlight: var(--tch-light);
|
|
--highlight-row: var(--hlr-light);
|
|
}
|
|
|
|
.themeactivator[value="dark"] ~ div.character,
|
|
.themeactivator[value="dark"] ~ div.inventory,
|
|
.themeactivator[value="dark"] ~ div.settings {
|
|
--background-sheet: var(--bgs-dark);
|
|
--background-dark: var(--bgd-dark); /* TODO rename variable, unclear now */
|
|
--background-input: var(--bgi-dark);
|
|
--background-inputro: var(--bgir-dark);
|
|
--background-grid: var(--bgg-dark);
|
|
--textcolor-dark: var(--tcd-dark);
|
|
--textcolor-light: var(--tcl-dark);
|
|
--textcolor-highlight: var(--tch-dark);
|
|
--highlight-row: var(--hlr-dark);
|
|
}
|
|
|
|
.themeactivator[value="dark"] ~ div img {
|
|
filter: invert(100%);
|
|
}
|
|
|
|
/* coloring some elements outside the basis character sheet */
|
|
|
|
.characterviewer {
|
|
/* color: var(--tcd-light); */
|
|
background-color: #f7f7f7;
|
|
background-image: url(https://github.com/olafvantol/roll20-character-sheets/blob/4850f0511913bbe0a9b0fdb6e58a7f83f53d1d3d/HarnMaster3_v2/holmgang_by_noiseman433_d2xrib.jpg?raw=true);
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
background-size: cover;
|
|
}
|
|
|
|
.nav-tabs {
|
|
background-color: #fff;
|
|
border-radius: 0px 0px 5px 5px;
|
|
}
|
|
|
|
.characterviewer .nav-tabs>li.active>a {
|
|
background-color: var(--bgs-light);
|
|
}
|
|
|
|
.charsheet {
|
|
margin-left: 13px;
|
|
}
|
|
|
|
/*Configure the tab buttons*/
|
|
|
|
.tab-buttons {
|
|
/* float: right; */
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: 110px;
|
|
z-index:1000;
|
|
padding: 10px;
|
|
width: fit-content;
|
|
/* margin-right: 2em; prevent overlap with edit button */
|
|
}
|
|
|
|
.tab-buttons > button {
|
|
position: absolute; /* Position them relative to the browser window */
|
|
left: -155px; /* Position them outside of the screen */
|
|
transition: 0.3s; /* Add transition on hover */
|
|
padding: 15px 5px; /* 15px padding */
|
|
width: 130px; /* Set a specific width */
|
|
font-size: 20px; /* Increase font size */
|
|
/* color: white; White text color */
|
|
border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
|
|
background-color: #fff5aa;
|
|
text-align: right;
|
|
border-color: #CCC;
|
|
}
|
|
|
|
.buttonicon {
|
|
font-family: pictos;
|
|
}
|
|
|
|
.tab-buttons > button:hover {
|
|
left: -55px; /* On mouse-over, make the elements appear as they should */
|
|
}
|
|
|
|
#chartab {
|
|
top: 20px;
|
|
}
|
|
|
|
#inventab {
|
|
top: 80px;
|
|
}
|
|
|
|
#settingstab {
|
|
top: 140px;
|
|
}
|
|
|
|
.character,
|
|
.inventory,
|
|
.settings {
|
|
display: none;
|
|
color: var(--textcolor-dark);
|
|
background-color: var(--background-sheet);
|
|
margin-top: -36px;
|
|
padding-top: 18px;
|
|
}
|
|
|
|
.settings {
|
|
min-height: 700px;
|
|
}
|
|
|
|
/* show the selected tab */
|
|
.tabstoggle[value="character"] ~ div.character,
|
|
.tabstoggle[value="inventory"] ~ div.inventory,
|
|
.tabstoggle[value="settings"] ~ div.settings {
|
|
display: block;
|
|
}
|
|
|
|
/* GRID */
|
|
|
|
.character-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
grid-template-rows: repeat(16, auto);
|
|
grid-row-gap: 1em;
|
|
grid-column-gap: 0.5em;
|
|
width: 99%;
|
|
}
|
|
|
|
.inventory-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
grid-template-rows: repeat(7, auto) ;
|
|
grid-row-gap: 1em;
|
|
grid-column-gap: 0.5em;
|
|
width: 99%;
|
|
}
|
|
|
|
.settings-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
grid-row-gap: 1em;
|
|
grid-column-gap: 1em;
|
|
width: 99%;
|
|
}
|
|
|
|
.character-grid-section,
|
|
.inventory-grid-section {
|
|
padding: 0px 3px;
|
|
grid-row-gap: 2px;
|
|
}
|
|
|
|
.personal {
|
|
grid-column-start: 1;
|
|
grid-column-end: 5;
|
|
}
|
|
|
|
.attribs {
|
|
grid-column-start: 5;
|
|
grid-column-end: 9;
|
|
grid-row: 1 / span 2;
|
|
}
|
|
|
|
.family {
|
|
grid-column-start: 9;
|
|
grid-column-end: 13;
|
|
grid-row: 1 / span 2;
|
|
}
|
|
|
|
.physical {
|
|
grid-column-start: 1;
|
|
grid-column-end: 5;
|
|
grid-row: 2;
|
|
}
|
|
|
|
.section-title {
|
|
grid-column: 1 / span 12;
|
|
}
|
|
|
|
.sectionoptions ~ span,
|
|
.sectionoptions ~ input {
|
|
align-self: center;
|
|
}
|
|
|
|
.sectionoptions ~ span {
|
|
justify-self: right;
|
|
}
|
|
|
|
.sectionoptions ~ input {
|
|
justify-self: left;
|
|
width: auto !important;
|
|
}
|
|
|
|
.section-title-half {
|
|
grid-column: 1 / span 5;
|
|
}
|
|
|
|
.skills {
|
|
grid-column: span 4;
|
|
}
|
|
|
|
.combat {
|
|
grid-column: 1 / span 3;
|
|
grid-row: 7;
|
|
}
|
|
|
|
.load {
|
|
grid-column: 4 / span 2;
|
|
grid-row: 7;
|
|
}
|
|
|
|
.penalties {
|
|
grid-column: 6 / span 2;
|
|
grid-row: 7;
|
|
}
|
|
|
|
.injuries {
|
|
grid-column: 1 / span 7;
|
|
grid-row: 8;
|
|
}
|
|
|
|
.armorprotection {
|
|
grid-column: 8 / span 5;
|
|
grid-row: 7 / span 2;
|
|
}
|
|
|
|
.carriedweapons {
|
|
grid-column: 1 / span 12;
|
|
grid-row: 9;
|
|
}
|
|
|
|
.carriedmissileweapons {
|
|
grid-column: 1 / span 12;
|
|
grid-row: 10;
|
|
}
|
|
|
|
.magic {
|
|
grid-column: 1 / span 9;
|
|
}
|
|
|
|
input[type="hidden"].showsinglepiety[value="1"] ~ .magic {
|
|
grid-column: 1 / span 12;
|
|
}
|
|
|
|
.piety {
|
|
grid-column: 10 / span 3;
|
|
grid-row: 12 / span 3;
|
|
}
|
|
|
|
.basichorseinfo {
|
|
grid-column: 1 / span 12;
|
|
height: 3em;
|
|
align-content: center;
|
|
}
|
|
|
|
.horseattribs {
|
|
grid-column: 1 / span 3;
|
|
}
|
|
|
|
.horseabilities {
|
|
grid-column: 4 / span 3;
|
|
}
|
|
|
|
.horsecombat {
|
|
grid-column: 7 / span 3;
|
|
}
|
|
|
|
.horseload {
|
|
grid-column: 10 / span 3;
|
|
}
|
|
|
|
.horseap {
|
|
grid-column: 1 / span 5;
|
|
}
|
|
|
|
.horseinjuries {
|
|
grid-column: 6 / span 5;
|
|
grid-row: span 2;
|
|
}
|
|
|
|
.horseattacks {
|
|
grid-column: 1 / span 5;
|
|
|
|
}
|
|
|
|
.horsepenalties {
|
|
grid-column: 11 / span 2;
|
|
grid-row: span 2;
|
|
}
|
|
|
|
.inven-weapons {
|
|
grid-column: 1 / span 12;
|
|
}
|
|
|
|
.inven-missileweapons {
|
|
grid-column: 1 / span 12;
|
|
}
|
|
|
|
.inven-armor {
|
|
grid-column: 1 / span 12;
|
|
}
|
|
|
|
.inven-personal {
|
|
grid-column: 1 / span 6;
|
|
grid-row: 5 / span 2;
|
|
}
|
|
|
|
input[type="hidden"].showhorse[value="0"] ~ .inven-personal {
|
|
grid-column: 1 / span 12;
|
|
grid-row: 5 / span 2;
|
|
}
|
|
|
|
.inven-horse {
|
|
grid-column: 7 / span 6;
|
|
grid-row: 5;
|
|
}
|
|
|
|
.inven-horsearmor {
|
|
grid-column: 7 / span 6;
|
|
grid-row: 6;
|
|
}
|
|
|
|
.inven-moneypersonal {
|
|
grid-column: 1 / span 4;
|
|
grid-row: 7;
|
|
}
|
|
|
|
.inven-moneybank {
|
|
grid-column: 5 / span 4;
|
|
grid-row: 7;
|
|
}
|
|
|
|
.inven-moneygroup {
|
|
grid-column: 9 / span 4;
|
|
grid-row: 7;
|
|
}
|
|
|
|
.inven-notes {
|
|
grid-column: 1 / span 12;
|
|
grid-row: 8;
|
|
}
|
|
|
|
.settingsgroup {
|
|
grid-column: span 6;
|
|
display: grid;
|
|
grid-template-columns: 1fr 2em;
|
|
align-content: baseline;
|
|
grid-row-gap: 5px;
|
|
}
|
|
|
|
/* SUB-GRIDS */
|
|
|
|
.personal-grid {
|
|
display: grid;
|
|
grid-template-columns: 70px auto;
|
|
grid-auto-rows: auto;
|
|
grid-auto-flow: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.personal-grid label {
|
|
grid-column: 1;
|
|
}
|
|
|
|
.personal-grid input,
|
|
.personal-grid select {
|
|
grid-column: 2;
|
|
}
|
|
|
|
.physical-grid {
|
|
display: grid;
|
|
grid-template-columns: 5.5em 1fr 5.5em 1fr;
|
|
grid-auto-flow: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.attribs-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr 1fr 2.5em);
|
|
grid-template-rows: 2em;
|
|
align-items: center;
|
|
}
|
|
|
|
.family-grid {
|
|
display: grid;
|
|
grid-template-columns: 90px 1fr;
|
|
align-items: center;
|
|
}
|
|
|
|
.skills-grid,
|
|
.skills-grid .repcontainer > .repitem {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2.2em 2.5em 2.5em 2.2em;
|
|
align-content: baseline;
|
|
}
|
|
|
|
.combat-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2.5em 2.5em;
|
|
align-items: center;
|
|
align-content: baseline;
|
|
}
|
|
|
|
.armorprotection-grid,
|
|
.armorprotection-grid > .sectionwrapper {
|
|
display: grid;
|
|
grid-template-columns: 6em 1fr 2em 2em 2em 2em;
|
|
align-items: center;
|
|
}
|
|
|
|
.load-grid, .penalties-grid, .horseload-grid, .horsepenalties-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2.6em;
|
|
align-items: center;
|
|
align-content: baseline;
|
|
}
|
|
|
|
.injuries-grid,
|
|
.injuries-grid .repcontainer > .repitem,
|
|
.horseinjuries-grid,
|
|
.horseinjuries-grid .repcontainer > .repitem {
|
|
display: grid;
|
|
grid-template-columns: 1fr 3.5em repeat(4, 2.5em) 2em;
|
|
align-items: center;
|
|
align-content: baseline;
|
|
}
|
|
|
|
.weapons-grid,
|
|
.weapons-grid .repcontainer > .repitem {
|
|
display: grid;
|
|
grid-template-columns: 8.5em 1em repeat(3, 2.2em) repeat(2, 2.7em) repeat(5, 2.2em) 2.7em 2.7em 2.3em 2.5em 2.3em 2.2em 1fr;
|
|
align-items: center;
|
|
align-content: baseline;
|
|
}
|
|
|
|
.missileweapons-grid,
|
|
.missileweapons-grid .repcontainer > .repitem {
|
|
display: grid;
|
|
grid-template-columns: 8.5em 1.5em 1.5em 2.2em 2.5em repeat(4, 4.5em 2.5em 2.5em 2.2em) 1fr;
|
|
align-items: center;
|
|
align-content: baseline;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.magic-grid,
|
|
.magic-grid .repcontainer > .repitem {
|
|
display: grid;
|
|
grid-template-columns: 20% 100px 3em 3em 2.2em 1fr;
|
|
align-items: center;
|
|
align-content: baseline;
|
|
}
|
|
|
|
input[type="hidden"].showsinglepiety[value="0"] ~ .piety-grid,
|
|
input[type="hidden"].showsinglepiety[value="0"] ~ .piety-grid .repcontainer > .repitem {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2.5em;
|
|
align-items: center;
|
|
align-content: baseline;
|
|
}
|
|
|
|
.bhigrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, auto 1fr);
|
|
align-items: center;
|
|
align-content: center;
|
|
justify-items: left;
|
|
}
|
|
|
|
.horseattribs-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
align-items: center;
|
|
align-content: baseline;
|
|
}
|
|
|
|
.horseabilities-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2em 2.5em 2.5em;
|
|
align-items: center;
|
|
align-content: baseline;
|
|
}
|
|
|
|
.horsecombat-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 3em 2.5em;
|
|
align-items: center;
|
|
align-content: baseline;
|
|
}
|
|
|
|
.horseap-grid {
|
|
display: grid;
|
|
grid-template-columns: 6em 1fr repeat(5, 1.8em);
|
|
align-items: center;
|
|
align-content: baseline;
|
|
}
|
|
|
|
.horseattacks-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr repeat(6, 2.5em);
|
|
align-items: center;
|
|
align-content: baseline;
|
|
}
|
|
|
|
.armorinvengrid,
|
|
.armorinvengrid .repcontainer > .repitem {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.5em 2.5em repeat(21, 2em);
|
|
align-items: center;
|
|
align-content: baseline;
|
|
}
|
|
|
|
.armorinvengrid .repitem > .sectionarmourhead {
|
|
display: inline-grid;
|
|
grid-template-columns: repeat(3, 2em);
|
|
grid-column: span 3;
|
|
height: 100%;
|
|
align-content: center;
|
|
}
|
|
|
|
.armorinvengrid .repitem > .sectionarmourarms {
|
|
display: inline-grid;
|
|
grid-template-columns: repeat(5, 2em);
|
|
grid-column: span 5;
|
|
height: 100%;
|
|
align-content: center;
|
|
}
|
|
|
|
.armorinvengrid .repitem > .sectionarmourtorso,
|
|
.armorinvengrid .repitem > .sectionarmourlegs {
|
|
display: inline-grid;
|
|
grid-template-columns: repeat(4, 2em);
|
|
grid-column: span 4;
|
|
height: 100%;
|
|
align-content: center;
|
|
}
|
|
|
|
.legacyarmor-grid {
|
|
grid-column: span 12;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 6em 1fr 2em 2em 2em 2em);
|
|
}
|
|
|
|
.personalinvengrid,
|
|
.personalinvengrid .repcontainer > .repitem {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2.5em 2em;
|
|
align-items: center;
|
|
align-content: baseline;
|
|
}
|
|
|
|
.horseinvengrid,
|
|
.horseinvengrid .repcontainer > .repitem {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2.5em;
|
|
align-items: center;
|
|
align-content: baseline;
|
|
}
|
|
|
|
.horsearmorinvengrid,
|
|
.horsearmorinvengrid .repcontainer > .repitem {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2.5em 2.5em;
|
|
align-items: center;
|
|
align-content: baseline;
|
|
}
|
|
|
|
.moneygrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
align-items: center;
|
|
align-content: baseline;
|
|
}
|
|
|
|
.moneygrid > input[type="text"].money-label {
|
|
grid-column: 2 / span 3;
|
|
}
|
|
|
|
.moneygrid > label {
|
|
grid-column: 1;
|
|
}
|
|
|
|
.moneygrid > input[type="text"] {
|
|
grid-column: 1 / span 3;
|
|
}
|
|
|
|
.moneygrid > input[type="number"] {
|
|
grid-column: 4;
|
|
}
|
|
|
|
/*
|
|
empty rule for notegrid, use this for additional styling if desired
|
|
.notesgrid {
|
|
|
|
}
|
|
*/
|
|
|
|
.inven-notes > textarea {
|
|
grid-column: 1 / -1;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
box-sizing: border-box;
|
|
display: block;
|
|
width: 98%;
|
|
}
|
|
|
|
.injuryrollbutton-grid {
|
|
grid-column: 1 / -1;
|
|
display: grid;
|
|
grid-template-columns: 1fr 7em 7em 7em 1fr;
|
|
}
|
|
|
|
.footnote {
|
|
grid-column: 1 / -1;
|
|
font-style: italic;
|
|
text-align: center;
|
|
}
|
|
|
|
/* repeating sections in subgrids */
|
|
|
|
.charsheet .repcontainer,
|
|
.charsheet .repcontrol {
|
|
grid-column: 1/-1;
|
|
}
|
|
|
|
button.repcontrol_edit {
|
|
grid-column: -1;
|
|
}
|
|
|
|
/* support div to prevent grid issues with some exceptions */
|
|
.wrapper {
|
|
display: contents;
|
|
}
|
|
|
|
/* some background color and border styling classes for subgrids */
|
|
|
|
.colored-grid,
|
|
.changelog {
|
|
border: grey 2px solid;
|
|
border-radius: 8px;
|
|
background-color: var(--background-grid);
|
|
}
|
|
|
|
.bordered-grid {
|
|
border: grey 2px solid;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.sectionarmourhead {
|
|
background-color: #a7ffa78a;
|
|
}
|
|
|
|
.sectionarmourarms {
|
|
background-color: #ffffa48a;
|
|
}
|
|
|
|
.sectionarmourtorso {
|
|
background-color: #ffdbb68a;
|
|
}
|
|
|
|
.sectionarmourlegs {
|
|
background-color: #aaeaff8a;
|
|
}
|
|
|
|
/* END GRIDS and SUB-GRIDS */
|
|
|
|
/* overwrite some roll20 default styling */
|
|
|
|
.ui-dialog .charsheet label,
|
|
.ui-dialog .charsheet input,
|
|
.ui-dialog .charsheet select {
|
|
margin-bottom: 0px;
|
|
color: var(--textcolor-dark);
|
|
}
|
|
|
|
.ui-dialog .charsheet label {
|
|
width: auto;
|
|
}
|
|
|
|
/* Headers */
|
|
|
|
.charactersheet h1 {
|
|
font-family: 'Uncial Antiqua', cursive;
|
|
color: var(--textcolor-dark);
|
|
}
|
|
|
|
.charactersheet h2 {
|
|
font-family: 'Roboto Slab', serif;
|
|
color: var(--textcolor-dark);
|
|
}
|
|
|
|
.skill-section-title {
|
|
grid-column: 1/-1;
|
|
background-color: var(--background-dark);
|
|
color: var(--textcolor-light);
|
|
font-size: larger;
|
|
font-family: 'Roboto Slab', serif;
|
|
text-align: center;
|
|
padding: 0.2em 0px;
|
|
align-self: flex-start;
|
|
justify-self: stretch;
|
|
margin: 0px -3px;
|
|
border-top-left-radius: 5px;
|
|
border-top-right-radius: 5px;
|
|
}
|
|
|
|
.skill-header {
|
|
font-family: 'Roboto Slab', serif;
|
|
padding: 3px 0px;
|
|
border-bottom: 2px black solid;
|
|
color: var(--textcolor-dark);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.missileweapons-grid > .skill-header {
|
|
font-size: smaller;
|
|
}
|
|
|
|
.armorprotection > .skill-header {
|
|
background-color: var(--background-grid);
|
|
}
|
|
|
|
/* input boxes and labels. Incl overwrite roll20 styling: set width to 99%, size will be determined by grid. */
|
|
|
|
.ui-dialog .charsheet select,
|
|
.ui-dialog .charsheet input,
|
|
.ui-dialog .charsheet input[type=number] {
|
|
width: 99%;
|
|
}
|
|
|
|
.charactersheet input[type=number]::-webkit-outer-spin-button,
|
|
.charactersheet input[type=number]::-webkit-inner-spin-button {
|
|
-webkit-appearance: none !important;
|
|
margin: 0;
|
|
}
|
|
|
|
.charactersheet input.charsheet[type=text] {
|
|
text-align: left;
|
|
}
|
|
|
|
select.skill-label,
|
|
input.skill-label,
|
|
input.skill-value,
|
|
input.armor-label,
|
|
input.weapon-label,
|
|
input.magic-label,
|
|
input.piety-label,
|
|
input.inventory-label,
|
|
input.money-label,
|
|
textarea.notes {
|
|
background-color: var(--background-input);
|
|
}
|
|
|
|
input.skill-label[readonly],
|
|
input.skill-value[readonly],
|
|
input.armor-label[readonly],
|
|
input.weapon-label[readonly],
|
|
input.magic-label[readonly],
|
|
input.piety-label[readonly] {
|
|
background-color: var(--background-inputro);
|
|
border: none;
|
|
}
|
|
|
|
.personal-grid input,
|
|
.personal-grid select,
|
|
.attribs-grid input,
|
|
.family-grid input,
|
|
.physical-grid input,
|
|
.horseattribs-grid input,
|
|
.horseattribs-grid input:read-only {
|
|
border-top-left-radius: 0px;
|
|
border-bottom-left-radius: 0px;
|
|
border-left-style: none;
|
|
background-color: var(--background-grid);
|
|
}
|
|
|
|
.settings-grid select {
|
|
background-color: var(--background-grid);
|
|
}
|
|
|
|
.horseattribs-grid input:read-only {
|
|
border-color: #ccc;
|
|
border-style: solid solid solid none;
|
|
border-width: 1px;
|
|
}
|
|
|
|
.personal-grid label,
|
|
.attribs-grid label,
|
|
.family-grid label,
|
|
.physical-grid label,
|
|
.horseattribs-grid label {
|
|
border-top-left-radius: 3px;
|
|
border-bottom-left-radius: 3px;
|
|
border-left-style: solid;
|
|
border-top-style: solid;
|
|
border-bottom-style: solid;
|
|
border-color: #ccc;
|
|
border-width: 1px;
|
|
background-color: var(--background-grid);
|
|
text-transform: uppercase;
|
|
font-size: smaller;
|
|
font-family: 'Roboto Slab', serif;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.armorprotection-grid label {
|
|
text-transform: uppercase;
|
|
font-size: smaller;
|
|
font-family: 'Roboto Slab', serif;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.combat-grid label,
|
|
.load-grid label,
|
|
.penalties-grid label,
|
|
.horsecombat-grid label,
|
|
.horseload-grid label,
|
|
.horsepenalties-grid label,
|
|
.settingsgroup label {
|
|
font-size: small;
|
|
}
|
|
|
|
.personal-grid label,
|
|
.family-grid label,
|
|
.physical-grid label,
|
|
.horseattribs-grid label {
|
|
height:26px;
|
|
}
|
|
|
|
.physical-grid label,
|
|
.attribs-grid label,
|
|
.horseattribs-grid label {
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
.ui-dialog .charsheet .attribs-grid input,
|
|
.ui-dialog .charsheet .horseattribs-grid input{
|
|
width: 2.5em;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.attribs-grid label,
|
|
.charsheet .attribs-grid input,
|
|
.horseattribs-grid label,
|
|
.charsheet .horseattribs-grid input {
|
|
height:33px;
|
|
box-sizing: content-box;
|
|
padding-top:0px;
|
|
padding-bottom: 0px;
|
|
}
|
|
|
|
.labelinputjoin {
|
|
background-color: var(--background-grid);
|
|
border-color: #ccc;
|
|
border-width: 1px;
|
|
border-top-style: solid;
|
|
border-bottom-style: solid;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.sumrow {
|
|
background-color: var(--highlight-row) !important; /* resorting to important, roll20 styling keeps getting in the way */
|
|
color: var(--textcolor-highlight)!important; /* resorting to important, roll20 styling keeps getting in the way */
|
|
font-weight: bold;
|
|
}
|
|
|
|
label.sumrow {
|
|
padding: 4px 0 4px 3px !important; /* resorting to important, roll20 styling keeps getting in the way */
|
|
}
|
|
|
|
/* disable spinners in Firefox too */
|
|
|
|
.charactersheet input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
/* SHOW and HIDE sections */
|
|
|
|
input.toggle-show-spells:not(:checked) ~ div.mr-spells {
|
|
display: none;
|
|
}
|
|
|
|
input.toggle-show-rituals:not(:checked) ~ div.mr-rituals {
|
|
display: none;
|
|
}
|
|
|
|
input.toggle-show-psionic:not(:checked) ~ div.mr-psionic {
|
|
display: none;
|
|
}
|
|
|
|
div.weapon-display, div.missileweapon-display {
|
|
display:none;
|
|
}
|
|
|
|
input.display-carried-weapon[value="1"] ~ div.weapon-display, input.display-carried-missileweapon[value="1"] ~ div.missileweapon-display {
|
|
display: contents;
|
|
}
|
|
|
|
div.mounted-display, input.display-mounted-status[value="1"] ~ div.unmounted-display {
|
|
display:none;
|
|
}
|
|
|
|
input.display-mounted-status[value="1"] ~ div.mounted-display, div.unmounted-display {
|
|
display: contents;
|
|
}
|
|
|
|
.character-grid fieldset.repeating_weapon~.repcontrol,
|
|
.character-grid fieldset.repeating_missileweapon~.repcontrol {
|
|
display: none;
|
|
}
|
|
|
|
input[type="hidden"].showhorse[value="0"] ~ div.horse-grid,
|
|
input[type="hidden"].showhorse[value="0"] ~ div.horse-section,
|
|
input[type="hidden"].showhorse[value="0"] ~ div.horse-inven-section
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
input[type="hidden"].showhorse[value="1"] ~ div.horse-section {
|
|
display: contents;
|
|
}
|
|
|
|
input[type="hidden"].showsinglepiety[value="0"] ~ label,
|
|
input[type="hidden"].showsinglepiety[value="0"] ~ input,
|
|
input[type="hidden"].showsinglepiety[value="1"] ~ .piety-grid,
|
|
input[type="hidden"].showsinglepiety[value="1"] ~ .piety-grid .repcontainer > .repitem {
|
|
display: none;
|
|
}
|
|
|
|
input[type="hidden"].hidelegacyarmor[value="1"] ~ div.legacyarmor-grid
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
input[type="hidden"].showupgradenotification[value="0"] ~ div.newversion-notifcation
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
/* VARIOUS STYLING */
|
|
|
|
.charsheet label {
|
|
padding: 0px 3px;
|
|
}
|
|
|
|
.charsheet summary {
|
|
display:list-item;
|
|
}
|
|
|
|
summary::after {
|
|
position: relative;
|
|
bottom: 0.5em;
|
|
font-family: 'Pictos';
|
|
content: " i";
|
|
/* content: "\24D8"; the nice i symbol gets rejected by roll20 css validation*/
|
|
font-style: normal;
|
|
font-weight: bold;
|
|
color: var(--textcolor-highlight);
|
|
}
|
|
|
|
/* display button as a link */
|
|
|
|
button.buttonaslink {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
color: #069;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Development roll button */
|
|
.charactersheet button[type=roll].skilldev-button::before {
|
|
font-family: 'Pictos';
|
|
content: '{ ';
|
|
}
|
|
|
|
/* Add to turn tracker button */
|
|
.charactersheet button[type=roll].turnorder-button::before {
|
|
font-family: 'Pictos';
|
|
content: 't ';
|
|
}
|
|
|
|
/* center text in number inputs AND value backed spans */
|
|
.charactersheet input[type=number],
|
|
.charactersheet .skill-value {
|
|
text-align: center;
|
|
}
|
|
|
|
/* graphics for mounted/unmounted status */
|
|
.mounted-display img,
|
|
.unmounted-display img {
|
|
max-width: 50px;
|
|
max-height: 50px;
|
|
justify-self: center;
|
|
}
|
|
|
|
.changelog {
|
|
margin-top: 2em;
|
|
padding: 1em;
|
|
}
|
|
|
|
.changelog > h3 {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.changelog-summary {
|
|
padding-left: 1em;
|
|
margin-top: -1.2em;
|
|
}
|
|
|
|
summary.changelog-summary::marker {
|
|
margin-left: -0.5em;
|
|
}
|
|
|
|
summary.changelog-summary::after {
|
|
content: "";
|
|
}
|
|
|
|
/* classes to span some columns if needed */
|
|
.width-2col {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.width-3col {
|
|
grid-column: span 3;
|
|
}
|
|
|
|
.full-width {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
/* version upgrade notification */
|
|
.newversion-notifcation {
|
|
border: 1px solid #ffc931;
|
|
background-color: #ffe19e;
|
|
border-radius: 2px;
|
|
clear: both;
|
|
margin-bottom: 2em;
|
|
padding: 1em;
|
|
}
|
|
|
|
button.dismissnotification {
|
|
margin-left: 5em;
|
|
}
|
|
|
|
/* TOOLTIPS */
|
|
/* Tooltip container */
|
|
.harntooltip {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Tooltip text */
|
|
.harntooltip::after {
|
|
content: attr(data-tooltiptext);
|
|
position:absolute;
|
|
width: 240px;
|
|
height: auto;
|
|
background-color: var(--background-grid);
|
|
color: var(--textcolor-dark);
|
|
font-size: small;
|
|
text-align: center;
|
|
padding: 5px;
|
|
border-radius: 4px;
|
|
border: 1px solid lightgrey;
|
|
white-space: pre-wrap;
|
|
z-index: 1;
|
|
/* Top position */
|
|
bottom: 140%;
|
|
left: 50%;
|
|
margin-left: -60px;
|
|
/* hide by default */
|
|
visibility: hidden;
|
|
opacity:0;
|
|
transition:.3s opacity;
|
|
}
|
|
|
|
.harntooltip:hover::after {
|
|
opacity:1;
|
|
visibility: visible;
|
|
}
|
|
|
|
/* END TOOLTIPS */
|
|
|
|
/* ROLL TEMPLATES */
|
|
|
|
.sheet-rolltemplate-custom .sheet-container {
|
|
width: 100%;
|
|
border: 1px solid;
|
|
/* by default, the border is the same color as the header. You can change this here, e.g. to black */
|
|
border-color: var(--custom-border-color);
|
|
}
|
|
|
|
/* Smaller margins - remove these if you want the huge default left margin */
|
|
/* .sheet-rolltemplate-custom {
|
|
margin-left: -37px;
|
|
}
|
|
.withoutavatars .sheet-rolltemplate-custom {
|
|
margin-left: -7px;
|
|
} */
|
|
|
|
|
|
/* 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);
|
|
padding: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-title {
|
|
font-size:1.2em;
|
|
/* font-weight: bold; */
|
|
font-family: 'Roboto Slab', serif;
|
|
padding: 0.2em;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-subtitle {
|
|
font-size:.9em;
|
|
}
|
|
|
|
/* example colors */
|
|
.sheet-rolltemplate-custom .sheet-container {
|
|
/* this is the default color */
|
|
--header-bg-color: rgba(112,32,130,1);
|
|
--header-text-color: #FFF;
|
|
--content-bg-color: #FFF;
|
|
--custom-border-color: #000;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-harn {
|
|
--header-bg-color: #a27800;
|
|
--header-text-color: #FFF;
|
|
--content-bg-color: #FFFAF0;
|
|
--custom-border-color: #00000000;
|
|
--highlight-text-color: #0087ff;
|
|
--highlight-row-bg: #ffffd7;
|
|
}
|
|
|
|
/* Allprops part */
|
|
.sheet-rolltemplate-custom .sheet-content {
|
|
display: grid;
|
|
/* background: #FFF; */
|
|
background-color: var(--content-bg-color);
|
|
/* 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;
|
|
}
|
|
|
|
/* 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 {
|
|
}
|
|
*/
|
|
|
|
/* Style roll results and infected notice - TODO: consider changing this to be configurable via template */
|
|
.sheet-rolltemplate-custom .sheet-infected {
|
|
text-align: center;
|
|
border: 2px solid #D8D456;
|
|
background-color: #83AB2C;
|
|
font-weight: bold;
|
|
font-style: oblique;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-success {
|
|
grid-column: span 2;
|
|
border: 2px solid #3FB315;
|
|
background-color: #99FF99 !important;
|
|
color: #262626;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-failure {
|
|
grid-column: span 2;
|
|
border: 2px solid #CC6600;
|
|
background-color: #FFCC99 !important;
|
|
color: #262626;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-crit-success {
|
|
grid-column: span 2;
|
|
border: 2px solid #009900;
|
|
background-color: #00CC00 !important;
|
|
color: #000;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-crit-failure {
|
|
grid-column: span 2;
|
|
border: 2px solid #990000;
|
|
background-color: #CC0000 !important;
|
|
color: #FFF;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Style roll target and result rows */
|
|
.sheet-rolltemplate-custom .sheet-rolltarget {
|
|
font-weight: bold;
|
|
border-bottom: 1px solid #777;
|
|
border-top: 1px solid #777;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-rollresult {
|
|
/* color: var(--highlight-text-color); */
|
|
font-weight: bold !important;
|
|
background-color: var(--highlight-row-bg) !important;
|
|
}
|
|
|
|
/* Make even-numbered rows grey */
|
|
.sheet-rolltemplate-custom .sheet-content :nth-child(4n+3),
|
|
.sheet-rolltemplate-custom .sheet-content :nth-child(4n) {
|
|
background:#EEE;
|
|
}
|
|
|
|
/* Description field */
|
|
.sheet-rolltemplate-custom .sheet-desc {
|
|
grid-column: span 2;
|
|
padding: 5px;
|
|
text-align: center;
|
|
}
|
|
|