Files
roll20-character-sheets/Heavy Gear 4e/HeavyGear4e.css
T
2024-07-27 13:12:48 +10:00

840 lines
19 KiB
CSS

/* change roll20 defaults */
/* Style the header */
.charsheet div.sticky {
position: sticky;
top: 0;
border: #000 1px solid;
background-color: #FFF;
z-index: 100;
}
h1,h2,h3,h4 {
text-align: center;
}
textarea {
resize: vertical;
box-sizing: border-box;
height: auto;
padding: 0;
}
input[type=text] {
padding: 0;
}
.charsheet input[type=number].digit,
.charsheet input[type=text].digit{
padding: 0;
width: 2.5em;
}
.charsheet input[type=number]{
padding: 0;
width: 3em;
}
.charsheet label {
display: contents
}
.charsheet .no-buttons .repcontrol button.repcontrol_edit,
.charsheet .no-buttons .repcontrol button.repcontrol_add {
display: none;
}
p {
margin: 0;
}
.charsheet select{
padding: 0;
width:fit-content;
margin: 0;
height: auto;
}
textarea.textbox{
resize:none;
}
textarea.inputarea {
resize: vertical;
box-sizing: border-box;
height: auto;
padding: 0;
}
.font-d6{
font-family: dicefontd6;
}
.charsheet .font-pictos{
font-family: pictos;
}
.sheet-character {
display: flex;
flex-direction: column;
border: 1pt solid black;
background-color:cornsilk;
border-radius: 15px;
}
.sheet-gear{
display: flex;
flex-direction: column;
border: 1pt solid black;
background-color:cornsilk;
border-radius: 15px;
}
.sheet-admin{
display: flex;
flex-direction: column;
border: 1pt solid black;
background-color:cornsilk;
border-radius: 15px;
}
.sheet-npcgear {
display: flex;
flex-direction: column;
border: 1pt solid black;
background-color:cornsilk;
border-radius: 15px;
}
.sheet-npccharacter {
display: flex;
flex-direction: column;
border: 1pt solid black;
background-color:cornsilk;
border-radius: 15px;
}
.sheet-creature {
display: flex;
flex-direction: column;
border: 1pt solid black;
background-color:cornsilk;
border-radius: 15px;
}
.background{
width: 100%;
display: flex;
flex-direction: row;
border: 1pt solid black;
border-radius: 15px;
}
.char-image{
display: flex;
border: 1pt solid black;
flex-direction: column;
justify-content: left;
width: 15em;
background-color: antiquewhite;
border-radius: 15px;
}
.sheet-character img.portrait {
max-width: 15em;
max-height: 15em;
}
.background-info{
background-color:beige;
justify-content: right;
border-radius: 15px;
width: 100%;
}
.background-info-upper{
display: flex;
flex-direction: column;
width: auto;
}
.info-upper-row{
display: flex;
border: 1pt solid black;
border-radius: 15px;
flex-direction: row;
width: auto;
}
.info-upper-row1{
border: 1pt solid black;
flex-direction: column;
border-radius: 15px;
width: 100%;
}
.background-infolower{
display: flex;
flex-direction: row;
padding: 1px;
justify-content: space-evenly;
}
.attributes{
display: flex;
width: auto;
gap: 0.1em;
}
.damage-box{
width: 30%;
display: flex;
border: 1pt solid black;
flex-direction: column;
background-color:blanchedalmond;
border-radius: 15px;
}
.attributes-box{
width: 100%;
display: flex;
flex-direction: column;
gap: 0.1em;
}
.attributes-box-rows{
width: 100%;
display: flex;
flex-direction: row;
gap: 0.1em;
}
.archetype{
width: 100%;
display: flex;
flex-direction: column;
gap: 0.1em;
border: 1pt solid black;
border-radius: 15px;
}
.charsheet input.archetype-toggle[value=1] ~div.archetype {
display: none;
}
.charsheet input.archetype-toggle:checked ~div.archetype {
display: none;
}
.play-info{
width: 100%;
display: flex;
flex-direction: row;
gap: 0.1em;
}
.inventory{
width: 40%;
display: flex;
flex-direction: column;
gap: 0.1em;
}
.skills-misc{
width: 100%;
display: flex;
flex-direction: row;
gap: 0.1em;
}
.skills{
width: 100%;
display: flex;
flex-direction: column;
gap: 0.1em;
border: 1pt solid black;
border-radius: 15px;
}
.trait-box{
display: flex;
flex-wrap: wrap;
columns: 2;
}
.trait-item {
display: flex;
border-bottom: 1pt solid black;
flex-direction: row;
flex-shrink: 1;
flex-wrap: wrap;
box-sizing: border-box;
margin-right: 0.5em;
}
.charsheet .ammo-box {
float: right;
}
.charsheet input.sheet-ammunition-show:checked + .ammo-box {
display: none;
}
div.infobox{
border: 1pt solid black;
display: flex;
flex-direction: column;
width: 100%;
border-radius: 15px;
}
input[type=text].full {
padding: 0;
width: fit-content;
}
input[type=text].emcalc { /*set the width of the input to the number of ems specified by - style="--index: 1;" */
padding: 0;
width: calc(100% + (var(--index,0) * 1em));
}
input[type=text].lvinfoused {
padding: 0;
width: calc(100% - 9em);
}
input[type=text].infoused {
padding: 0;
width: calc(100% - 6em);
}
input[type=text].used {
padding: 0;
width: calc(100% - 2em);
}
input[type=text].info {
padding: 0;
width: calc(100% - 2em);
}
input[type=text].info {
padding: 0;
width: calc(100% - 2em);
}
input[type=text].em13 {
padding: 0;
width: 13em;
}
input[type=text].em8 {
padding: 0;
width: 8em;
}
select.size{
width: fit-content;
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
/*Configure the tab buttons*/
.charsheet .sheet-character,
.charsheet .sheet-gear,
.charsheet .sheet-admin,
.charsheet .sheet-npcgear,
.charsheet .sheet-npccharacter,
.charsheet .sheet-creature{
display: none;
}
/* show the selected tab */
.charsheet .sheet-tabstoggle[value="character"]~.sheet-character,
.charsheet .sheet-tabstoggle[value="gear"]~.sheet-gear,
.charsheet .sheet-tabstoggle[value="admin"]~.sheet-admin,
.charsheet .sheet-tabstoggle[value="npcgear"]~.sheet-npcgear,
.charsheet .sheet-tabstoggle[value="npccharacter"]~.sheet-npccharacter,
.charsheet .sheet-tabstoggle[value="creature"]~.sheet-creature{
display: flex;
}
.charsheet .sheet-buttonstoggle:not([value="pc"]) ~.sheet-buttons-pc,
.charsheet .sheet-buttonstoggle:not([value="npc"])~.sheet-buttons-npc {
display: none;
}
.charsheet .archetype-caretaker,
.charsheet .archetype-commander,
.charsheet .archetype-duelist,
.charsheet .archetype-fixer,
.charsheet .archetype-grunt,
.charsheet .archetype-pilot,
.charsheet .archetype-scout,
.charsheet .archetype-techie{
display: none;
}
.charsheet .archetype-select[value="Caretaker"]~.archetype-caretaker,
.charsheet .archetype-select[value="Commander"]~.archetype-commander,
.charsheet .archetype-select[value="Duelist"]~.archetype-duelist,
.charsheet .archetype-select[value="Fixer"]~.archetype-fixer,
.charsheet .archetype-select[value="Grunt"]~.archetype-grunt,
.charsheet .archetype-select[value="Pilot"]~.archetype-pilot,
.charsheet .archetype-select[value="Scout"]~.archetype-scout,
.charsheet .archetype-select[value="Techie"]~.archetype-techie{
display: flex;
flex-direction: column;
}
.charsheet .archetype-default{
display: flex;
flex-direction: column;
}
.charsheet .archetype-select[value="Caretaker"]~.archetype-default,
.charsheet .archetype-select[value="Commander"]~.archetype-default,
.charsheet .archetype-select[value="Duelist"]~.archetype-default,
.charsheet .archetype-select[value="Fixer"]~.archetype-default,
.charsheet .archetype-select[value="Grunt"]~.archetype-default,
.charsheet .archetype-select[value="Pilot"]~.archetype-default,
.charsheet .archetype-select[value="Scout"]~.archetype-default,
.charsheet .archetype-select[value="Techie"]~.archetype-default{
display: none;
}
.charsheet .archetype-rank-0{
display: flex;
flex-direction: row;
}
.charsheet .archetype-rank-1,
.charsheet .archetype-rank-2,
.charsheet .archetype-rank-3,
.charsheet .archetype-rank-4,
.charsheet .archetype-rank-5,
.charsheet .archetype-rank-6{
display: none;
}
.charsheet .archetype-rank-select[value="1"]~.archetype-rank-1,
.charsheet .archetype-rank-select[value="2"]~.archetype-rank-1,
.charsheet .archetype-rank-select[value="3"]~.archetype-rank-1,
.charsheet .archetype-rank-select[value="4"]~.archetype-rank-1,
.charsheet .archetype-rank-select[value="5"]~.archetype-rank-1,
.charsheet .archetype-rank-select[value="6"]~.archetype-rank-1,
.charsheet .archetype-rank-select[value="2"]~.archetype-rank-2,
.charsheet .archetype-rank-select[value="3"]~.archetype-rank-2,
.charsheet .archetype-rank-select[value="4"]~.archetype-rank-2,
.charsheet .archetype-rank-select[value="5"]~.archetype-rank-2,
.charsheet .archetype-rank-select[value="6"]~.archetype-rank-2,
.charsheet .archetype-rank-select[value="3"]~.archetype-rank-3,
.charsheet .archetype-rank-select[value="4"]~.archetype-rank-3,
.charsheet .archetype-rank-select[value="5"]~.archetype-rank-3,
.charsheet .archetype-rank-select[value="6"]~.archetype-rank-3,
.charsheet .archetype-rank-select[value="4"]~.archetype-rank-4,
.charsheet .archetype-rank-select[value="5"]~.archetype-rank-4,
.charsheet .archetype-rank-select[value="6"]~.archetype-rank-4,
.charsheet .archetype-rank-select[value="5"]~.archetype-rank-5,
.charsheet .archetype-rank-select[value="6"]~.archetype-rank-5,
.charsheet .archetype-rank-select[value="6"]~.archetype-rank-6
{
display: flex;
flex-direction: row;
}
.sheet-posture-stationary,
.sheet-posture-braced,
.sheet-posture-dugIn,
.sheet-posture-standard,
.sheet-posture-allOut,
.sheet-posture-topSpeed {
display: none;
}
input[value="stationary"].sheet-posture~.sheet-posture-stationary,
input[value="braced"].sheet-posture~.sheet-posture-braced,
input[value="dugIn"].sheet-posture~.sheet-posture-dugIn,
input[value="standard"].sheet-posture~.sheet-posture-standard,
input[value="allOut"].sheet-posture~.sheet-posture-allOut,
input[value="topSpeed"].sheet-posture~.sheet-posture-topSpeed {
display: contents;
}
[value="pc"].sheet-type ~span.sheet-npcshow {
display: none;
}
[value="npc"].sheet-type ~span.sheet-npcshow {
display: contents;
}
.charsheet input.sheet-toggle-show:not(:checked) ~ div.sheet-body,
.charsheet input.sheet-toggle-hide:checked ~ div.sheet-body {
display: none;
}
.charsheet input.sheet-toggle-show-span:not(:checked) ~ span.sheet-body,
.charsheet input.sheet-toggle-hide-span:checked ~ span.sheet-body {
display: none;
}
.charsheet .sheet-block-a,
.charsheet .sheet-block-switch:checked ~ .sheet-block-b {
display: contents;
}
.charsheet .sheet-block-b,
.charsheet .sheet-block-switch:checked ~ .sheet-block-a {
display: none;
}
/* Displays alternate info for frames */
.charsheet .no-frame,
.charsheet .frame-check:checked ~ .frame {
display: contents;
}
.charsheet .frame,
.charsheet .frame-check:checked ~ .no-frame {
display: none;
}
.charsheet .no-blitz,
.charsheet .blitz-check:checked ~ .blitz {
display: contents;
}
.charsheet .blitz,
.charsheet .blitz-check:checked ~ .no-blitz {
display: none;
}
input.sheet-skills-hide-check~.sheet-skills-hide{
display: contents;
font-weight: bold;
}
input[value="0"].sheet-skills-hide-check+.sheet-skills-hide{
display: none;
}
input[value="0"].sheet-familiar~.sheet-familiar-skill:after{
content: "";
}
input[value="1"].sheet-familiar:checked~.sheet-familiar-skill:after{
font-weight: bold;
content: "*";
}
/* Displays info for domains in skills */
.sheet-domains-0,
.sheet-domains-1,
.sheet-domains-2,
.sheet-domains-3 {
display: none;
}
input[value="0"].sheet-domains~.sheet-domains-0,
input[value="1"].sheet-domains~.sheet-domains-1,
input[value="2"].sheet-domains~.sheet-domains-2,
input[value="3"].sheet-domains~.sheet-domains-3 {
display: inline-block;
}
/* Custom Templates 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;
}
.sheet-rolltemplate-custom .sheet-container {
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(--header-bg-color);
}
/* 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.1em;
}
.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;
}
.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: #FFF;
/* 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 {
}
*/
/* 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;
}
.autoExpand {
overflow: hidden; /* hides overflow that is caused by the span */
position: relative; /* Allows the input's absolute positioning to be relative to this parent div */
min-width: 50px; /* Whatever feels good to you, prevents a new span from collapsing to 0. */
width: fit-content; /* Will fit the width to the contents without going outside itself or collapsing smaller than its content, though we will be using min-width in the case where there's no content. */
height: 20px; /* Prevent the span from defining the height of the input container which can't be multiline */
}
.autoExpand span {
visibility: hidden;
font-size: 1em;
padding: 0 8px; /* Matching my input's padding so that the widths are correct */
}
.autoExpand input {
position: absolute; /* removes the input from the DOM flow, allowing the span to exist in the same space */
width: 100%; /* Inputs match the width of the parent element as defined by the spans */
font-size: 1em;
}
/* use to hide add and modify buttons by SECTIONNAME
div[data-groupname=repeating_SECTIONNAME].repcontrol {
display:none;
}
*/
/* Diceroll template */
/* Custom Templates Smaller margins - remove these if you want the huge default left margin */
.sheet-rolltemplate-diceroll {
margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-diceroll {
margin-left: -7px;
}
.sheet-rolltemplate-diceroll .sheet-container {
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(--header-bg-color);
}
/* Header formatting - title and subtitle */
.sheet-rolltemplate-diceroll .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-diceroll .sheet-title {
font-size: 1.1em;
}
.sheet-rolltemplate-diceroll .sheet-subtitle {
font-size: .9em;
}
/* example colors */
.sheet-rolltemplate-diceroll .sheet-container {
/* this is the default color */
--header-bg-color: rgba(112, 32, 130, 1);
--header-text-color: #FFF;
}
.sheet-rolltemplate-diceroll .sheet-container.sheet-color-red {
--header-bg-color: #F00;
}
.sheet-rolltemplate-diceroll .sheet-container.sheet-color-green {
--header-bg-color: #0F0;
--header-text-color: #000;
}
/* Allprops part */
.sheet-rolltemplate-diceroll .sheet-content {
display: grid;
background: #FFF;
color: #000;
/* Header formatting - modify the column layout below */
grid-template-columns: auto auto;
/* Line height to match default roll template */
line-height: 1.4em;
}
/* diceroll part */
.sheet-rolltemplate-diceroll .sheet-content>div {
padding: 5px;
}
/* Left column */
.sheet-rolltemplate-diceroll .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-diceroll .sheet-value {
}
*/
/* Make even-numbered rows grey but not .inline*/
.sheet-rolltemplate-diceroll .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-diceroll .sheet-content :nth-child(4n) {
background: #EEE;
}
/* Description field */
.sheet-rolltemplate-diceroll .sheet-desc {
grid-column: span 2;
padding: 5px;
text-align: center;
background-color: #FFF;
color: #000;
}
.sheet-rolltemplate-diceroll .sheet-hide {
display: none;
}
/* WeaponDiceroll template */
/* Custom Templates Smaller margins - remove these if you want the huge default left margin */
.sheet-rolltemplate-weapondiceroll {
margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-weapondiceroll {
margin-left: -7px;
}
.sheet-rolltemplate-weapondiceroll .sheet-container {
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(--header-bg-color);
}
/* Header formatting - title and subtitle */
.sheet-rolltemplate-weapondiceroll .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-weapondiceroll .sheet-title {
font-size: 1.1em;
}
.sheet-rolltemplate-weapondiceroll .sheet-subtitle {
font-size: .9em;
}
/* example colors */
.sheet-rolltemplate-weapondiceroll .sheet-container {
/* this is the default color */
--header-bg-color: rgba(112, 32, 130, 1);
--header-text-color: #FFF;
}
.sheet-rolltemplate-weapondiceroll .sheet-container.sheet-color-red {
--header-bg-color: #F00;
}
.sheet-rolltemplate-weapondiceroll .sheet-container.sheet-color-green {
--header-bg-color: #0F0;
--header-text-color: #000;
}
/* Allprops part */
.sheet-rolltemplate-weapondiceroll .sheet-content {
display: grid;
background: #FFF;
color: #000;
/* Header formatting - modify the column layout below */
grid-template-columns: auto auto;
/* Line height to match default roll template */
line-height: 1.4em;
}
/* diceroll part */
.sheet-rolltemplate-weapondiceroll .sheet-content>div {
padding: 5px;
}
/* Left column */
.sheet-rolltemplate-weapondiceroll .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-diceroll .sheet-value {
}
*/
/* Make even-numbered rows grey but not .inline*/
.sheet-rolltemplate-weapondiceroll .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-weapondiceroll .sheet-content :nth-child(4n) {
background: #EEE;
}
/* Description field */
.sheet-rolltemplate-weapondiceroll .sheet-desc {
grid-column: span 2;
padding: 5px;
text-align: center;
background-color: #FFF;
color: #000;
}
.sheet-rolltemplate-weapondiceroll .sheet-hide {
display: none;
}
.sheet-rolltemplate-weapondiceroll .sheet-traits {
font-size: .9em;
padding: 5px;
text-align: left;
background-color: #EEE;
color: #000;
}