Files
roll20-character-sheets/Red Markets/redMarkets.css
T
Melanikus2000 b58630a12d Red Markets Upload
Uploading the Red Markets Character sheet
2021-07-23 21:34:59 +01:00

943 lines
19 KiB
CSS

p {
color: #598930;
font-family: 'courier', serif;
font-size: 1em;
margin: 5px 0px 0px 5px;
line-height: 1.15em;
}
.sheet-container {
display: block;
min-width: 700px;
}
.sheet-hidden {
display: none !important;
}
.sheet-standard p {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size: 0.875em;
color: #598930;
}
.sheet-tiny p {
font-size: 0.625em;
color: #598930;
}
.sheet-smaller p {
font-size: 0.875em;
color: #598930;
}
.sheet-greenBG {
background-color: #f5f8e9;
}
.sheet-whiteBG {
background-color: #ffffff;
}
.sheet-gap {
border: 1px solid #598930;
}
.sheet-header {
font-size: 1.25em;
font-weight: bold;
text-align: center;
}
input[type=text], input[type=number] {
background-color:transparent;
display: inline-block;
box-shadow: none;
border: none;
-moz-appearance:textfield;
font-size: 1.06em;
}
/*----------- ************************************************************************** -------------*/
/*----------- Tabs Setup -------------*/
/*this hides the contents of each tab by default*/
div[class^="sheet-section"]{
display: none;
}
/*this shows the tab content when the appropriate input field is selected*/
input.sheet-tab1:checked ~ div.sheet-section-taker,
input.sheet-tab2:checked ~ div.sheet-section-damage,
input.sheet-tab3:checked ~ div.sheet-section-inv,
input.sheet-tab4:checked ~ div.sheet-section-bounty {
display: block;
/*width: 540px;*/
background-color: white;
}
input.sheet-tab99:checked ~ div[class^="sheet-section"]{
display: block;
}
/*this hides the radio button for each tab, makes it 100px wide and 40px tall and makes sure it's above everything else*/
input.sheet-tab {
width: 100px;
height: 40px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 9999;
}
/*this styles the span with the tab information and slides to the left, so it appears underneath the radio button*/
span.sheet-tab {
display: inline-block;
text-align: center;
font-size: 13px;
background: #9cc876;
color: white;
font-weight: bold;
border-radius: 4px;
width: 100px;
height: 40px;
cursor: pointer;
position: relative;
vertical-align: middle;
margin-left: -101px;/*originally 91px*/
}
/*this modifies the span color once the radio button is selected so you know which tab is selected*/
input.sheet-tab1:checked + span.sheet-tab1,
input.sheet-tab2:checked + span.sheet-tab2,
input.sheet-tab3:checked + span.sheet-tab3,
input.sheet-tab4:checked + span.sheet-tab4,
input.sheet-tab5:checked + span.sheet-tab5,
input.sheet-tab6:checked + span.sheet-tab6,
input.sheet-tab7:checked + span.sheet-tab7,
input.sheet-tab8:checked + span.sheet-tab8,
input.sheet-tab99:checked + span.sheet-tab99{
background: #598930;
color: white;
border-radius: 4px;
}
/*----------- ************************************************************************** -------------*/
/*----------- Sheet styling -------------*/
.sheet-section-taker, .sheet-section-damage, .sheet-section-inv, .sheet-section-bounty {
background-color: #ffffff;
background-repeat: no-repeat;
padding-top: 30px;
padding-bottom: 10px;
vertical-align:top;
width: 100%;
}
/*----------- Column Layout -------------*/
.sheet-col1 {
/*First column containing stats and skills and backpack*/
display: inline-block;
vertical-align:top;
width: 49%;
}
.sheet-col2 {
/*Second column containing dependents, references, and rations */
display: inline-block;
vertical-align:top;
width: 49%;
}
.sheet-damage-col1 {
/*First column containing stats and skills and backpack*/
display: inline-block;
vertical-align:top;
width: 34%;
}
.sheet-damage-col2 {
/*Second column containing dependents, references, and rations */
display: inline-block;
vertical-align:top;
width: 64%;
}
/*----------- ************************************************************************** -------------*/
/*----------- Taker Section -------------*/
/*----------- Taker Details Section -------------*/
.sheet-taker-details {
/*Grid layout for the taker details*/
display: grid;
grid-column-gap: 0px;
grid-template-columns: 30% 10px 68%;
padding: 0px;
}
.sheet-taker-details-name {
border: 1px solid #598930;
}
.sheet-taker-details-input {
border: 1px solid #598930;
text-align: center;
}
.sheet-taker-details input {
height: 40px;
width: 90%
}
/*----------- Taker Pot/Skills Section -------------*/
.sheet-taker-potSkills, .sheet-taker-ref, .sheet-gear, .sheet-taker-notes {
margin-top: 10px;
}
.sheet-taker-potSkills {
/*grid layout for potentials and skills*/
display: grid;
grid-column-gap: 0px;
grid-template-columns: 35% 10px 63%;
padding: 0px;
}
.sheet-taker-potskills-header {
border: 1px solid #598930;
font-weight: bold;
}
.sheet-taker-potSkills-pot {
border: 1px solid #598930;
display: grid;
grid-column-gap: 0px;
grid-template-columns: 50% 50%;
padding: 0px;
}
.sheet-taker-potskills-skills {
border: 1px solid #598930;
display: grid;
grid-column-gap: 0px;
grid-template-columns: 60% 40%;
padding: 0px;
}
.sheet-taker-potSkills-pot-txt {
padding-top:5px;
}
.sheet-taker-potSkills-pot-txt p {
font-size: 1.5em;
}
.sheet-taker-potSkills-pot-score {
}
.sheet-taker-potSkills-pot-score input{
margin-top: 5px;
font-size: 1.5em;
width: 80%;
}
.sheet-taker-potSkills-pot-sub {
border-top: 1px solid #598930; border-bottom: 1px solid #598930;
grid-column-start: 1;
grid-column-end: 3;
}
.sheet-taker-potSkills-pot-sub-score {
grid-column-start: 1;
grid-column-end: 3;
}
.sheet-taker-potSkills-pot-sub-score input{
font-size: 1.5em;
width: 80%;
}
.sheet-taker-potSkills-pot-field {
display: block;
font-size: 1.5em;
height: 55px;
margin: 0px 0px 5px 8px;
vertical-align:top;
width: 80px;
}
.sheet-taker-potskills-sName {
border-right: 1px solid #598930;
}
.sheet-taker-potskills-sName input{
height: 24px;
width: 80%;
}
.sheet-taker-potskills-sInput {
}
.sheet-taker-potskills-sInput_col1 {
display: inline-block;
vertical-align:top;
width: 60%;
}
.sheet-taker-potskills-sInput_col2 {
display: inline-block;
vertical-align:middle;
width: 30%;
}
.sheet-taker-potskills-sInput_col1 input{
display: block;
font-size: 0.875em;
height: 24px;
margin: 0px 0px 0px 6px;
padding: 0px;
width: 30px;
}
.sheet-taker-potskills-sInput_col2 button {
width: 20px;
height: 17px;
}
/*----------- Taker Dependents and references Section -------------*/
.sheet-taker-dep, .sheet-taker-ref {
/*grid layout for dependents*/
border: 1px solid #598930;
display: grid;
grid-column-gap: 0px;
grid-template-columns: 70% 30%;
padding: 0px;
}
.sheet-taker-dep-title, .sheet-taker-ref-title{
border-bottom: 1px solid #598930;
height: 25px;
margin: 0px;
padding: 0px;
text-align: center;
vertical-align: middle;
}
.sheet-taker-dep-status, .sheet-taker-ref-status{
border-left: 1px solid #598930;
border-bottom: 1px solid #598930;
height: 25px;
margin: 0px;
padding: 0px;
text-align: center;
vertical-align: middle;
}
.sheet-taker-dep-title p, .sheet-taker-ref-title p, .sheet-taker-dep-status p, .sheet-taker-ref-status p {
font-weight: bold;
}
.sheet-taker-dep-txt, .sheet-taker-ref-txt {
border-top: 1px solid #598930;
text-align: center;
vertical-align: middle;
}
.sheet-taker-dep-input, .sheet-taker-ref-input {
border-left: 1px solid #598930;
border-top: 1px solid #598930;
text-align: center;
vertical-align: middle;
}
.sheet-taker-dep-field,.sheet-taker-ref-field {
background: transparent;
border: 0;
height: 25px;
text-align: center;
width: 90%;
}
/*----------- Notes Section -------------*/
.sheet-taker-notes textarea {
border: 1px solid #598930;
display: block;
height: 270px;
width: 98%;
}
/*----------- Gear Section -------------*/
.sheet-gear {
/*grid layout for equipment*/
border: 1px solid #598930;
display: grid;
grid-column-gap: 0px;
grid-template-columns: 17% 3% 6% 6% 16% 52%;
padding: 0px;
}
.sheet-gear-title {
border-bottom: 1px solid #598930;
grid-column-start: 1;
grid-column-end: 7;
}
.sheet-gear-title p {
font-weight: bold;
height: 25px;
margin: 3px 0px 0px 0px;
padding: 0px;
text-align: center;
}
.sheet-gear-title input{
display: block;
font-size: 0.875em;
margin: 3px 0px 0px 0px;
width: 85%
}
.sheet-gear-upkeep {
border-right: 1px solid #598930;
}
.sheet-gear-upkeep p{
margin-bottom: 3px;
}
.sheet-gear-upkeep-input {
border-right: 1px solid #598930;
grid-column-start: 2;
grid-column-end: 5;
padding-top: 2px;
}
.sheet-gear-upkeep-input span {
padding-left: 3px;
}
.sheet-gear-upkeep-input input{
display: block;
font-size: 0.875em;
margin: 3px 0px 0px 0px;
width: 85%
}
.sheet-gear-charges {
border-right: 1px solid #598930;
}
.sheet-gear-charges p{
margin-bottom: 3px;
}
.sheet-gear-charges-input {}
.sheet-gear-charges-input select{
background: transparent;
border: 0;
width: 85%
}
.sheet-gear-effect {
border-top: 1px solid #598930;
border-right: 1px solid #598930;
border-bottom: 1px solid #598930;
grid-column-start: 1;
grid-column-end: 3;
}
.sheet-gear-effect-txt {
border-top: 1px solid #598930;
grid-column-start: 3;
grid-column-end: 7;
grid-row-start: 3;
grid-row-end: 5;
}
.sheet-gear-effect-txt textarea{
background: transparent;
border: 0px;
display: block;
height: 50px;
margin-bottom: 3px;
width: 98%;
}
.sheet-gear-qualities {
border-top: 1px solid #598930;
border-right: 1px solid #598930;
grid-column-start: 1;
grid-column-end: 4;
}
.sheet-gear-qualities p{
margin-bottom: 3px;
}
.sheet-gear-qualities-txt {
border-top: 1px solid #598930;
grid-column-start: 4;
grid-column-end: 7;
}
.sheet-gear-qualities-txt textarea {
background: transparent;
border: 0px;
display: block;
height: 50px;
margin-bottom: 3px;
width: 98%;
}
.sheet-gear-upgrades {
border-top: 1px solid #598930;
border-right: 1px solid #598930;
grid-column-start: 1;
grid-column-end: 4;
}
.sheet-gear-upgrades p{
margin-bottom: 3px;
}
.sheet-gear-upgrades-txt {
border-top: 1px solid #598930;
grid-column-start: 4;
grid-column-end: 7;
}
.sheet-gear-upgrades-txt textarea{
background: transparent;
border: 0px;
display: block;
height: 50px;
margin-bottom: 3px;
width: 98%;
}
/*----------- ************************************************************************** -------------*/
/*----------- Damage Section -------------*/
.sheet-damage-table {
/*Grid layout for the damage grid*/
border: 1px solid #598930;
display: grid;
margin: 0;
grid-column-gap: 0px;
grid-template-columns: 20% 60% 20%;
padding: 0px;
}
div.sheet-hBox {
display: inline-block;
height: 15px;
/*margin: 2px 2px 0px 0px;*/
position: relative;
width: 15px;
}
input.sheet-hBox {
height: 15px;
margin: 0px;
opacity: 0;
position: absolute;
width: 15px;
z-index: 1;
}
span.sheet-hBox {
display: none;
margin: 0px;
}
input.sheet-gBox { z-index: 2; }
input.sheet-gBox:checked + input.sheet-sBox,
input.sheet-sBox:checked + input.sheet-kBox { z-index: 3; }
input.sheet-gBox:checked ~ span.sheet-gBox,
input.sheet-sBox:checked ~ span.sheet-sBox,
input.sheet-kBox:checked ~ span.sheet-kBox { display: inline-block; }
.sheet-gBox {
width: 15px;
height: 15px;
background: #598930;
border-radius:0px;
}
.sheet-sBox {
width: 15px;
height: 15px;
background: #ffad00;
border-radius:0px;
overflow: hidden;
}
.sheet-sBox:before {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
/*content: "/";*/
color:black;
text-align:center;
padding: 0px;
margin:0px;
text-shadow:none;
font-weight:bold;
font-size:0.875em;
}
.sheet-kBox {
width: 15px;
height: 15px;
background: #b10000;
border-radius:0px;
overflow: hidden;
}
.sheet-kBox:before {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
/*content: "X";*/
color:black;
padding: 0px;
margin:0px;
text-shadow:none;
font-weight:bold;
font-size:0.875em;
}
.sheet-damage-pDamBox {/*input box for totals*/
border: 1px solid #598930;
font-size: 0.675em;
width: 30px;
}
.sheet-damage-threats {
border: 1px solid #598930;
display: grid;
margin: 20px 0px 0px 0px;
grid-column-gap: 0px;
grid-template-columns: 22% 20% 6% 20% 6% 20% 6%;
padding: 0px;
}
.sheet-damage-threats-title {
grid-column-start: 1;
grid-column-end: 8;
text-align: center;
}
.sheet-damage-threats-text {
border-top: 1px solid #598930;
border-right: 1px solid #598930;
height: 25px;
}
.sheet-damage-threats-input {
border-top: 1px solid #598930;
border-left: 1px solid #598930;
height: 25px;
text-align: center;
}
.sheet-damage-threats-input select {
background: transparent;
border: 1px;
height: 25px;
width: 90%;
}
.sheet-damage-threats-input checkbox {
background: transparent;
border: 1px;
height: 15px;
width: 15px;
}
.sheet-damage-threats-input input {
background: transparent;
border: 1px;
height: 25px;
}
.sheet-damage-threats-side {
border-top: 1px solid #598930;
border-left: 1px solid #598930;
grid-row-start: 2;
grid-row-end: 5;
margin: 0px;
padding: 0px;
text-align: center;
vertical-align: middle;
}
.sheet-damage-threats-crack {
grid-column-start: 3;
grid-column-end: 4;
}
.sheet-damage-threats-crum {
grid-column-start: 5;
grid-column-end: 6;
}
.sheet-damage-threats-break {
grid-column-start: 7;
grid-column-end: 8;
}
.sheet-damage-threats-side p {
/* Rotate from top left corner (not default) */
display: block;
margin: 15px 0px 0px 0px;
-webkit-transform-origin: 0 4;
-moz-transform-origin: 0 4;
-ms-transform-origin: 0 4;
transform-origin: 0 4;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(90deg);
}
.sheet-damage-phys {
border: 1px solid #598930;
display: grid;
margin: 0;
grid-column-gap: 0px;
grid-template-columns: 40% 30% 30%;
padding: 0px;
width: 80%;
}
.sheet-damage-phys-text{
border-right: 1px solid #598930;
border-bottom: 1px solid #598930;
}
.sheet-damage-phys-input{
border-left: 1px solid #598930;
border-bottom: 1px solid #598930;
height: 25px;
text-align: center;
}
.sheet-damage-phys-input input {
background: transparent;
border: 1px;
height: 25px;
}
.sheet-damage-phys-input span {}
.sheet-damage-ment {
border: 1px solid #598930;
display: grid;
margin: 10px 0px 0px 0px;
grid-column-gap: 0px;
grid-template-columns: 60% 40%;
padding: 0px;
width:50%;
}
.sheet-damage-ment-text{
border-right: 1px solid #598930;
border-bottom: 1px solid #598930;
}
.sheet-damage-ment-input{
border-left: 1px solid #598930;
border-bottom: 1px solid #598930;
height: 25px;
text-align: center;
}
.sheet-damage-ment-input input {
background: transparent;
border: 1px;
height: 25px;
}
.sheet-damage-ment-input span {}
.sheet-bounty-upkeep {
border: 1px solid #598930;
display: grid;
margin: 10px 0px 0px 0px;
grid-column-gap: 0px;
grid-template-columns: 25% 17% 8% 17% 8% 17% 8%;
padding: 0px;
width:100%;
}
.sheet-bounty-upkeep-heading {
border-bottom: 1px solid #598930;
grid-column-start: 1;
grid-column-end: 8;
}
.sheet-bounty-upkeep-heading p {
font-weight: bold;
font-size: 1.5em;
margin-bottom: 5px;
}
.sheet-bounty-upkeep-title {
border-bottom: 1px solid #598930;
border-right: 1px solid #598930;
}
.sheet-bounty-upkeep-title p {
font-weight: bold;
}
.sheet-bounty-upkeep-text {
border-bottom: 1px solid #598930;
border-left: 1px solid #598930;
}
.sheet-bounty-upkeep-input {
border-bottom: 1px solid #598930;
}
.sheet-bounty-upkeep-input input{
background: transparent;
height: 25px;
width: 100%;
}
.sheet-bounty-upkeep-break-title {
border-top: 1px solid #598930;
border-right: 1px solid #598930;
}
.sheet-bounty-upkeep-break-title p {
font-weight: bold;
}
.sheet-bounty-upkeep-break-input {
border-top: 1px solid #598930;
border-left: 1px solid #598930;
grid-column-start: 2;
grid-column-end: 4;
}
.sheet-bounty-upkeep-break-input input{
background: transparent;
height: 25px;
width: 100%;
}
.sheet-bounty-upkeep-earn-title {
border-top: 1px solid #598930;
border-left: 1px solid #598930;
grid-column-start: 4;
grid-column-end: 6;
}
.sheet-bounty-upkeep-earn-title p {
font-weight: bold;
}
.sheet-bounty-upkeep-earn-input {
border-top: 1px solid #598930;
border-left: 1px solid #598930;
grid-column-start: 6;
grid-column-end: 8;
}
.sheet-bounty-upkeep-earn-input input{
background: transparent;
height: 25px;
width: 100%;
}
.sheet-bounty-heading {
border: 1px solid #598930;
margin: 10px 0px 0px 0px;
padding: 0px;
width:100%;
}
.sheet-bounty-heading p {
font-weight: bold;
font-size: 1.5em;
margin-bottom: 5px;
}
.sheet-bounty-txt {
border: 1px solid #598930;
margin: 0px;
padding: 0px;
width:100%;
}
.sheet-bounty-txt textarea {
background: transparent;
border:0;
margin: 0px;
padding: 5px;
height: 100px;
width: 98%;
}
.sheet-bounty-txt input[type=number] {
background: transparent;
border:0;
margin: 0px;
height: 25px;
width: 100%;
}
.sheet-bounty-2col {
display: grid;
grid-column-gap: 0px;
grid-template-columns: 50% 50%;
padding: 0px;
width:100%;
}
/***************************************************************************/
/*ROLL TEMPLATE*/
/***************************************************************************/
/* Smaller margins - remove these if you want the huge default left margin */
.sheet-rolltemplate-customRM {
margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-customRM {
margin-left: -7px;
}
.sheet-rolltemplate-customRM .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-customRM .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-customRM .sheet-title {
font-size:1.1em;
}
.sheet-rolltemplate-customRM .sheet-subtitle {
font-size:.9em;
}
/* example colors */
.sheet-rolltemplate-customRM .sheet-container {
/* this is the default color */
--header-bg-color: rgba(89,137,48,1);
--header-text-color: #FFF;
}
/* Allprops part */
.sheet-rolltemplate-customRM .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-customRM .sheet-content > div {
padding: 5px;
}
/* Left column */
.sheet-rolltemplate-customRM .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-customRM .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-customRM .sheet-content :nth-child(4n) {
background:#f5f8e9;
}
/* Description field */
.sheet-rolltemplate-customRM .sheet-desc {
grid-column: span 2;
padding: 5px;
text-align: center;
}
.sheet-rolltemplate-customRM .sheet-red {
color: #B40000;
font-weight: bold;
}
.sheet-rolltemplate-customRM .sheet-black {
color: #000000;
font-weight: bold;
}
.sheet-rolltemplate-customRM .sheet-grey {
color: #999999;
font-weight: normal;
}