Ben Torell
2e193d1f46
* [Vaesen-dodgepong] Remove extraneous inline rolls * Add roll background images * Add roll templates * Fix normal button layouts * Update screenshot * Fix a few spacing issues * Clean up formatting more * Update screenshot * Use Roll20 Images * Fix image paths for Roll20 master * Add "Success"/"Successes" text to roll template * Fix d66 roll template title alignment
632 lines
11 KiB
CSS
632 lines
11 KiB
CSS
.sheet-preload {
|
|
opacity: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.sheet-preload img {
|
|
width: 1px;
|
|
height: 1px;
|
|
}
|
|
|
|
.charsheet {
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
font-family: Georgia, 'Times New Roman', Times, serif
|
|
}
|
|
.sheet-container {
|
|
width: 882px;
|
|
}
|
|
div,
|
|
span,
|
|
textarea,
|
|
ul,
|
|
li,
|
|
span,
|
|
label {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
label {
|
|
margin: 0;
|
|
padding: 0;
|
|
color: inherit;
|
|
font-size: 1em;
|
|
width: auto;
|
|
display: flex;
|
|
font-weight: normal;
|
|
}
|
|
|
|
input[type=text] {
|
|
width: 100%;
|
|
font-family: inherit;
|
|
font-size: 1em;
|
|
color: inherit;
|
|
text-shadow: inherit;
|
|
border: none;
|
|
border-bottom: 1px solid #bbbbbb;
|
|
border-radius: 0;
|
|
background: none;
|
|
box-shadow: none;
|
|
min-height: 22px;
|
|
padding: 3px 0 0;
|
|
margin: 3px 0 0;
|
|
}
|
|
|
|
input[type=number] {
|
|
width: 100%;
|
|
font-family: inherit;
|
|
font-size: 1em;
|
|
color: inherit;
|
|
text-shadow: inherit;
|
|
border: none;
|
|
border-bottom: 1px solid #bbbbbb;
|
|
border-radius: 0;
|
|
background: none;
|
|
box-shadow: none;
|
|
min-height: 22px;
|
|
padding: 3px 0 0;
|
|
margin: 3px 0 0;
|
|
}
|
|
|
|
select {
|
|
width: 100%;
|
|
font-family: inherit;
|
|
font-size: 1em;
|
|
color: inherit;
|
|
text-shadow: inherit;
|
|
border: none;
|
|
border-bottom: 1px solid #bbbbbb;
|
|
border-radius: 0;
|
|
background: none;
|
|
box-shadow: none;
|
|
height: 18px;
|
|
min-height: 22px;
|
|
padding: 3px 0 0;
|
|
margin: 3px 0 0;
|
|
}
|
|
|
|
.sheet-label,
|
|
input.sheet-label,
|
|
textarea.sheet-label {
|
|
text-transform: uppercase;
|
|
text-align: justify;
|
|
font-size: .7em;
|
|
font-weight: bold;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.sheet-hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
/* type selector */
|
|
|
|
.sheet-type-input:not([value="character"]) ~ .sheet-type-character,
|
|
.sheet-type-input:not([value="headquarters"]) ~ .sheet-type-headquarters,
|
|
.sheet-type-input:not([value="selector"]) ~ .sheet-type-selector {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-type-button {
|
|
border: 1px #000 solid;
|
|
padding: 4px;
|
|
margin: 4px;
|
|
cursor: pointer;
|
|
width: 100px;
|
|
text-align: center;
|
|
display: block;
|
|
}
|
|
|
|
/* sections */
|
|
|
|
.sheet-header {
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.sheet-section {
|
|
border: 1px #dddddd solid;
|
|
padding: 4px;
|
|
margin-top: 6px;
|
|
margin-bottom: 6px;
|
|
background-color: #efefef;
|
|
}
|
|
|
|
.sheet-marginless-section {
|
|
padding: 4px;
|
|
background-color: #efefef;
|
|
border: 1px #dddddd solid;
|
|
}
|
|
|
|
.sheet-usedbox {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 5px;
|
|
}
|
|
|
|
.sheet-experience {
|
|
text-align: center
|
|
}
|
|
|
|
.sheet-conditionbox {
|
|
margin: 4px;
|
|
}
|
|
|
|
.sheet-brokencondition {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-condition {
|
|
display: flex;
|
|
align-items: center;
|
|
font-variant: small-caps;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.sheet-statpoints {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* headquarters */
|
|
|
|
.sheet-auto-expand {
|
|
position: relative;
|
|
cursor: text;
|
|
word-wrap: break-word;
|
|
line-height: 14px;
|
|
min-height: 28px;
|
|
}
|
|
|
|
.sheet-auto-expand span {
|
|
visibility: hidden;
|
|
white-space: pre-wrap;
|
|
display: block;
|
|
}
|
|
|
|
.sheet-auto-expand textarea {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 0;
|
|
resize: none;
|
|
height: 100%;
|
|
word-wrap: break-word;
|
|
padding: inherit;
|
|
font: inherit;
|
|
color: inherit;
|
|
text-transform: inherit;
|
|
letter-spacing: inherit;
|
|
text-align: inherit;
|
|
}
|
|
|
|
.sheet-history {
|
|
position: relative;
|
|
cursor: text;
|
|
word-wrap: break-word;
|
|
line-height: 17px;
|
|
min-height: 34px;
|
|
background: linear-gradient(transparent 16px, #a7a7a7 1px) 0 0/100% 17px;
|
|
padding: 0 3px;
|
|
width: 100%;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.sheet-history span {
|
|
visibility: hidden;
|
|
white-space: pre-wrap;
|
|
display: block;
|
|
}
|
|
|
|
.sheet-history textarea {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 0;
|
|
resize: none;
|
|
height: 100%;
|
|
word-wrap: break-word;
|
|
padding: inherit;
|
|
font: inherit;
|
|
color: inherit;
|
|
text-transform: inherit;
|
|
letter-spacing: inherit;
|
|
text-align: inherit;
|
|
}
|
|
|
|
.sheet-hq-function {
|
|
width: 100%;
|
|
cursor: text;
|
|
word-wrap: break-word;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
/* Fieldsets */
|
|
|
|
.repcontrol {
|
|
display: flex;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.repcontrol .repcontrol_edit {
|
|
margin-left: auto;
|
|
order: 1;
|
|
}
|
|
|
|
.repcontrol button {
|
|
background: transparent;
|
|
color: #555;
|
|
border-radius: 0;
|
|
border-color: #999;
|
|
transition: all 0.2s;
|
|
font-family: pictos;
|
|
font-size: 0;
|
|
font-weight: bold;
|
|
padding: 5px 3px 2px;
|
|
line-height: 8px;
|
|
}
|
|
|
|
.repcontrol button:hover {
|
|
color: black;
|
|
border-color: black;
|
|
background: #ddd;
|
|
}
|
|
|
|
.repcontrol button.repcontrol_edit::after {
|
|
content: "(";
|
|
}
|
|
|
|
.repcontrol button.repcontrol_add::after {
|
|
content: "&";
|
|
}
|
|
|
|
.repcontrol button.repcontrol_edit::after, .repcontrol button.repcontrol_add::after {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.repcontainer.editmode + .repcontrol button.repcontrol_edit::after {
|
|
content: ")";
|
|
}
|
|
|
|
.itemcontrol {
|
|
z-index: 20;
|
|
}
|
|
|
|
/* Rollbuttons */
|
|
|
|
button[type="roll"].sheet-skill-button,
|
|
button[type="action"].sheet-skill-button {
|
|
display: flex;
|
|
border: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-shadow: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
box-sizing: border-box;
|
|
font-family: inherit;
|
|
outline: none;
|
|
border-radius: 0;
|
|
transition: all 0.2s;
|
|
z-index: 3;
|
|
}
|
|
|
|
button[type="roll"].sheet-skill-button.btn::before,
|
|
button[type="action"].sheet-skill-button.btn::before {
|
|
content: "";
|
|
}
|
|
|
|
button[type="roll"].sheet-skill-button:hover,
|
|
button[type="action"].sheet-skill-button:hover {
|
|
color: #666666;
|
|
}
|
|
|
|
button[type="roll"].sheet-skill-button.btn {
|
|
font-variant: small-caps;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-fullbutton {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-die {
|
|
font-family: pictos;
|
|
font-variant: normal;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
/* CHECKBOXES */
|
|
|
|
label input[type="checkbox"],
|
|
label input[type="radio"] {
|
|
position: absolute;
|
|
}
|
|
|
|
label:hover input[type="checkbox"] + span,
|
|
label:hover input[type="radio"] + span {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
opacity: 0;
|
|
z-index: 1;
|
|
-moz-appearance: none;
|
|
vertical-align: unset;
|
|
position: relative;
|
|
}
|
|
|
|
input[type="checkbox"] + span,
|
|
input[type="radio"] + span {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
transition: all 0.2s, opacity 0s;
|
|
}
|
|
|
|
input.sheet-checkbox {
|
|
height: 12px;
|
|
width: 12px;
|
|
flex: 0 0 auto;
|
|
margin-right: -12px;
|
|
}
|
|
|
|
.sheet-checkbox {
|
|
/* square by default */
|
|
}
|
|
|
|
.sheet-checkbox + span {
|
|
height: 12px;
|
|
width: 12px;
|
|
flex: 0 0 auto;
|
|
background: white;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.sheet-checkbox:checked + span {
|
|
background: #666666;
|
|
}
|
|
|
|
.sheet-checkbox:hover + span {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.sheet-checkbox:checked ~ .sheet-colored-if-checked {
|
|
color: #666666;
|
|
}
|
|
|
|
.sheet-checkbox:last-child + span {
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.sheet-checkbox.sheet-small {
|
|
height: 10px;
|
|
width: 10px;
|
|
margin-right: -10px;
|
|
}
|
|
|
|
.sheet-checkbox.sheet-small + span {
|
|
height: 10px;
|
|
width: 10px;
|
|
}
|
|
|
|
.sheet-checkbox.sheet-large {
|
|
height: 14px;
|
|
width: 14px;
|
|
margin-right: -14px;
|
|
}
|
|
|
|
.sheet-checkbox.sheet-large + span {
|
|
height: 14px;
|
|
width: 14px;
|
|
}
|
|
|
|
.sheet-floatingbar {
|
|
width: 2px;
|
|
height: 2px;
|
|
flex: 0 0 auto;
|
|
background: black;
|
|
}
|
|
|
|
/* Fake radios */
|
|
.sheet-checkbox.sheet-fakeradio + span {
|
|
background: #666666;
|
|
}
|
|
|
|
.sheet-fakeradio:checked ~ .sheet-fakeradio + span {
|
|
background: white;
|
|
}
|
|
|
|
/* Roll Templates */
|
|
|
|
.sheet-rolltemplate-vaesen-d66 .inlinerollresult,
|
|
.sheet-rolltemplate-vaesen-resources .inlinerollresult,
|
|
.sheet-rolltemplate-vaesen-skill .inlinerollresult {
|
|
border: none !important;
|
|
background-color: transparent;
|
|
font-weight: bold;
|
|
padding: 0 3px 0 0;
|
|
font-family: Georgia, 'Times New Roman', Times, serif;
|
|
font-size: 50px;
|
|
color: white;
|
|
}
|
|
|
|
.sheet-rolltemplate-vaesen-d66 .sheet-vaesen-d66-roll .sheet-vaesen-d66-roll-title {
|
|
font-family: Georgia, 'Times New Roman', Times, serif;
|
|
text-align: left;
|
|
color: white;
|
|
font-size: 16px;
|
|
position: relative;
|
|
top: -40px;
|
|
}
|
|
|
|
.sheet-rolltemplate-vaesen-resources .sheet-vaesen-resources-roll .sheet-vaesen-resources-roll-title,
|
|
.sheet-rolltemplate-vaesen-skill .sheet-vaesen-skill-roll .sheet-vaesen-skill-roll-title {
|
|
font-family: Georgia, 'Times New Roman', Times, serif;
|
|
text-align: left;
|
|
color: white;
|
|
font-size: 16px;
|
|
position: relative;
|
|
top: -30px;
|
|
}
|
|
|
|
.sheet-rolltemplate-vaesen-resources .sheet-vaesen-resources-roll .sheet-vaesen-resources-roll-successtext,
|
|
.sheet-rolltemplate-vaesen-skill .sheet-vaesen-skill-roll .sheet-vaesen-skill-roll-successtext {
|
|
font-family: Georgia, 'Times New Roman', Times, serif;
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 12px;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.sheet-rolltemplate-vaesen-d66 .sheet-vaesen-d66-roll {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
margin: 10px 30px 0 0;
|
|
text-align: center;
|
|
padding: 10px;
|
|
width: 200px;
|
|
height: 125px;
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen-dodgepong/Assets/vaesen-d66.png");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
.sheet-rolltemplate-vaesen-resources .sheet-vaesen-resources-roll {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
margin: 10px 30px 0 0;
|
|
text-align: center;
|
|
padding: 10px;
|
|
width: 200px;
|
|
height: 125px;
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen-dodgepong/Assets/vaesen-resources.png");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-vaesen-skill .sheet-vaesen-skill-roll {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
margin: 10px 30px 0 0;
|
|
text-align: center;
|
|
padding: 10px;
|
|
width: 200px;
|
|
height: 125px;
|
|
}
|
|
|
|
.sheet-rolltemplate-vaesen-skill .sheet-vaesen-skill-roll-fail {
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen-dodgepong/Assets/vaesen-fail.png");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
.sheet-rolltemplate-vaesen-skill .sheet-vaesen-skill-roll-success {
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen-dodgepong/Assets/vaesen-success.png");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
|
|
/* COLUMN LAYOUT */
|
|
.sheet-flex {
|
|
display: flex;
|
|
}
|
|
.sheet-flex-center {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.sheet-flex-centerall {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.sheet-flex-layout {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
.sheet-flex-wrap {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
}
|
|
.sheet-col5 {
|
|
width: 5%;
|
|
}
|
|
.sheet-col10 {
|
|
width: 10%;
|
|
}
|
|
.sheet-col15 {
|
|
width: 15%;
|
|
}
|
|
.sheet-col20 {
|
|
width: 20%;
|
|
}
|
|
.sheet-col25 {
|
|
width: 25%;
|
|
}
|
|
.sheet-col30 {
|
|
width: 30%;
|
|
}
|
|
.sheet-col33 {
|
|
width: 33%;
|
|
}
|
|
.sheet-col35 {
|
|
width: 35%;
|
|
}
|
|
.sheet-col40 {
|
|
width: 35%;
|
|
}
|
|
.sheet-col50 {
|
|
width: 50%;
|
|
}
|
|
.sheet-col55 {
|
|
width: 55%;
|
|
}
|
|
.sheet-col40 {
|
|
width: 40%;
|
|
}
|
|
.sheet-col45 {
|
|
width: 45%;
|
|
}
|
|
.sheet-col60 {
|
|
width: 60%;
|
|
}
|
|
.sheet-col65 {
|
|
width: 65%;
|
|
}
|
|
.sheet-col70 {
|
|
width: 70%;
|
|
}
|
|
.sheet-col75 {
|
|
width: 75%;
|
|
}
|
|
.sheet-col85 {
|
|
width: 85%;
|
|
}
|
|
.sheet-col90 {
|
|
width: 90%;
|
|
}
|
|
.sheet-col100 {
|
|
width: 100%;
|
|
}
|
|
.sheet-colspace {
|
|
margin-right: 8px;
|
|
}
|
|
.sheet-colpad {
|
|
padding-right: 8px;
|
|
} |