mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
Create HeavyGear4e.css
Initial upload
This commit is contained in:
arcadianbel
@@ -0,0 +1,504 @@
|
||||
/* change roll20 defaults */
|
||||
|
||||
h1,h2,h3 {
|
||||
text-align: center;
|
||||
}
|
||||
textarea {
|
||||
resize: vertical;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type=number]{
|
||||
padding: 0;
|
||||
width: 3em;
|
||||
}
|
||||
|
||||
select{
|
||||
padding: 0;
|
||||
width:fit-content;
|
||||
}
|
||||
textarea.textbox{
|
||||
resize:none;
|
||||
}
|
||||
textarea.inputarea {
|
||||
resize: vertical;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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] ~.archetype {
|
||||
display: none;
|
||||
}
|
||||
.charsheet input.archetype-toggle:checked ~.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: column;
|
||||
gap: 0.1em;
|
||||
}
|
||||
.skills{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1em;
|
||||
border: 1pt solid black;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
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].em13 {
|
||||
padding: 0;
|
||||
width: calc(100% - 13em);
|
||||
}
|
||||
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=number].digit,
|
||||
input[type=text].digit{
|
||||
padding: 0;
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
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
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* show the selected tab */
|
||||
.charsheet .sheet-tabstoggle[value="character"]~div.sheet-character,
|
||||
.charsheet .sheet-tabstoggle[value="gear"]~div.sheet-gear,
|
||||
.charsheet .sheet-tabstoggle[value="admin"]~div.sheet-admin
|
||||
{
|
||||
display: flex;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.charsheet input.sheet-toggle-show:not(:checked) ~ div.sheet-body,
|
||||
.charsheet input.sheet-toggle-hide:checked ~ div.sheet-body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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 */
|
||||
.no-frame,
|
||||
.charsheet .frame-check:checked ~ .frame {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.charsheet .frame,
|
||||
.charsheet .frame-check:checked ~ .no-frame {
|
||||
display: none;
|
||||
}
|
||||
/* 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;
|
||||
}
|
||||
*/
|
||||
/* 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;
|
||||
/* 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-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 */
|
||||
.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;
|
||||
}
|
||||
.sheet-rolltemplate-diceroll .sheet-hide {
|
||||
display: none
|
||||
}
|
||||
Reference in New Issue
Block a user