Files
roll20-character-sheets/FFD20/ffd20.css
T
2017-11-07 12:08:07 -05:00

804 lines
20 KiB
CSS

* {
box-sizing: border-box;
}
.sheet-info-section {
color: black;
font-family: "Tahoma", "Arial";
line-height: 110%;
}
div[class^="sheet-section"] {
margin-top: -27px;
display: none;
}
div.sheet-character,
div.sheet-monster {
display: none;
}
div.sheet-monster {
margin-top: -30px;
}
.sheet-header {
height: 137px;
background: -moz-linear-gradient(top, rgba(30,87,153,0) 50%, rgba(125,185,232,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(30,87,153,0) 50%,rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(30,87,153,0) 50%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
input.sheet-type-character:checked ~ div.sheet-character,
input.sheet-type-monster:checked ~ div.sheet-monster {
display: block;
}
input.sheet-main:checked ~ div.sheet-section-main,
input.sheet-class:checked ~ div.sheet-section-class,
input.sheet-items:checked ~ div.sheet-section-items,
input.sheet-materia:checked ~ div.sheet-section-materia,
input.sheet-skills:checked ~ div.sheet-section-skills,
input.sheet-feats:checked ~ div.sheet-section-feats,
input.sheet-spells:checked ~ div.sheet-section-spells,
input.sheet-notes:checked ~ div.sheet-section-notes {
display: block;
}
input.sheet-tab {
width: 70px;
height: 25px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 9999;
top: -29px;
left: 3px;
margin-left: -3px;
}
span.sheet-tab {
color: #E8E8E8;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
font-family: "Tahoma", "Arial";
line-height: 200%;
letter-spacing: 1px;
text-align: center;
vertical-align: middle;
display: inline-block;
font-size: 90%;
background: rgb(122,122,122); /* Old browsers */
background: -moz-linear-gradient(top, rgba(122,122,122,1) 0%, rgba(89,89,89,1) 75%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(122,122,122,1) 0%,rgba(89,89,89,1) 75%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(122,122,122,1) 0%,rgba(89,89,89,1) 75%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border: solid 1px black;
font-weight: bold;
border-radius: 2px;
width: 70px;
height: 25px;
cursor: pointer;
position: relative;
margin-left: -70px;
top: -29px;
}
span.sheet-tab + input.sheet-tab {
margin-left: -5px;
}
input.sheet-main:checked + span.sheet-main,
input.sheet-class:checked + span.sheet-class,
input.sheet-items:checked + span.sheet-items,
input.sheet-materia:checked + span.sheet-materia,
input.sheet-skills:checked + span.sheet-skills,
input.sheet-feats:checked + span.sheet-feats,
input.sheet-spells:checked + span.sheet-spells,
input.sheet-notes:checked + span.sheet-notes {
background: rgb(163,163,163); /* Old browsers */
background: -moz-linear-gradient(top, rgba(163,163,163,1) 0%, rgba(127,127,127,1) 76%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(163,163,163,1) 0%,rgba(127,127,127,1) 76%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(163,163,163,1) 0%,rgba(127,127,127,1) 76%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color: #00E8E8;
}
.sheet-wrapper {
min-width: 800px;
}
.sheet-background {
background: rgb(4,0,255); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(4,0,255,1) 20%, rgba(1,0,12,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(4,0,255,1) 20%,rgba(1,0,12,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(4,0,255,1) 20%,rgba(1,0,12,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color: #E8E8E8;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
font-family: "Tahoma", "Arial";
border-radius: 8px;
white-space: normal;
}
.sheet-box-outer {
border: 1px solid black;
border-radius: 5px;
height: 100%;
}
.sheet-box-middle {
border: 2px solid lightgrey;
border-radius: 4px;
height: 100%;
}
.sheet-box-inner {
border: 1px solid black;
border-radius: 3px;
height: 100%;
}
.sheet-box-title {
padding: 3px;
letter-spacing: 1px;
text-align: center;
font-weight: bold;
font-size: 90%;
}
.sheet-box-content {
padding: 5px;
}
.sheet-table {
display: table;
table-layout: fixed;
width: 100%;
border-collapse: separate;
border-spacing: 1px;
margin-top: -1px;
}
.sheet-table-row {
display: table-row;
vertical-align: middle;
}
.sheet-table-label {
display: table-cell;
font-size: 80%;
text-align: center;
vertical-align: middle;
color: #00E8E8;
height: 20px;
line-height: 100%;
}
.sheet-table-label-left {
display: table-cell;
text-align: center;
vertical-align: middle;
padding: 0px 4px 0px 4px;
color: #00E8E8;
letter-spacing: 1px;
line-height: 90%;
}
.sheet-table-data {
display: table-cell;
text-align: center;
padding: 0px;
}
table {
table-layout: fixed;
width: 100%;
border-collapse: separate;
border-spacing: 1px;
margin: 0px 0px -1px 0px;
}
table.sheet-table-skill {
table-layout: fixed;
border-collapse: separate;
border-spacing: 0px;
width: 100%;
vertical-align: middle;
margin-top: -1px;
}
td.sheet-label-top {
font-size: 80%;
text-align: center;
vertical-align: middle;
color: #00E8E8;
height: 20px;
line-height: 100%;
}
td.sheet-label-left {
text-align: center;
vertical-align: middle;
padding: 0px 4px 0px 4px;
color: #00E8E8;
letter-spacing: 1px;
line-height: 90%;
}
td.sheet-label-skill {
vertical-align: middle;
letter-spacing: 1px;
line-height: 90%;
padding-left: 8px;
text-align: left;
}
.sheet-table-label-left-lb {
text-align: center;
vertical-align: middle;
padding: 6px;
color: grey;
letter-spacing: 1px;
line-height: 90%;
}
.sheet-materia-level {
display: table-cell;
text-align: center;
vertical-align: middle;
letter-spacing: 1px;
line-height: 90%;
color: #E8E8E8;
}
tr {
vertical-align: middle;
}
tr.sheet-table-row-skill {
vertical-align: middle;
height: 25px;
}
tr.sheet-table-row-skill:hover {
background-color: rgba(255, 255, 255, 0.25);
}
tr.sheet-table-row-skill:nth-child(even) {
background-color: rgba(0, 0, 0, 0.4);
}
tr.sheet-table-row-skill:nth-child(even):hover {
background-color: rgba(255, 255, 255, 0.25);
}
td {
vertical-align: middle;
text-align: center;
padding: 0px;
}
td.sheet-data-skill {
vertical-align: middle;
text-align: center;
padding-left: 1px;
}
table.sheet-table-skill-monster {
table-layout: fixed;
border-collapse: separate;
border-spacing: 0px;
width: 100%;
vertical-align: middle;
margin-top: -1px;
font-size: 80%;
line-height: 100%;
}
table.sheet-table-skill-monster td.sheet-data-skill {
padding: 0px;
}
table.sheet-table-skill-monster td.sheet-label-top {
font-size: 100%;
}
table.sheet-table-skill-monster tr.sheet-table-row-skill {
vertical-align: middle;
height: 19px;
}
table.sheet-table-skill-monster tr,
table.sheet-table-skill-monster input {
height: 18px;
}
.sheet-lb { display: none; }
.sheet-inactive:checked ~ .sheet-table-label-left-lb {
color: #E8E8E8;
border: 1px solid #00E8E8;
background: #232323; /* Old browsers */
background: -moz-linear-gradient(top, #232323 0%, #4c4c4c 50%, #6b6b6b 90%, #3d3d3d 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #232323 0%,#4c4c4c 50%,#6b6b6b 90%,#3d3d3d 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #232323 0%,#4c4c4c 50%,#6b6b6b 90%,#3d3d3d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.sheet-active:checked ~ .sheet-table-label-left-lb {
color: yellow;
border: 1px solid #00E8E8;
background: #9e38a5; /* Old browsers */
background: -moz-linear-gradient(top, #9e38a5 0%, #ffccff 40%, #ffe5ff 50%, #ffccff 60%, #d17ddb 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #9e38a5 0%,#ffccff 40%,#ffe5ff 50%,#ffccff 60%,#d17ddb 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #9e38a5 0%,#ffccff 40%,#ffe5ff 50%,#ffccff 60%,#d17ddb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.sheet-materia-type-none:checked ~ .sheet-materia-level { color: #E8E8E8; }
.sheet-materia-type-ability:checked ~ .sheet-materia-level { color: #ffff4d; }
.sheet-materia-type-independent:checked ~ .sheet-materia-level { color: #cc00cc; }
.sheet-materia-type-spell:checked ~ .sheet-materia-level { color: #00e600; }
.sheet-materia-type-summon:checked ~ .sheet-materia-level { color: #e60000; }
.sheet-materia-type-support:checked ~ .sheet-materia-level { color: #8080ff; }
.sheet-materia-type-none:checked ~ .sheet-materia-icon {
background-image: none;
background-repeat: no-repeat;
background-position: center;
}
.sheet-materia-type-ability:checked ~ .sheet-materia-icon {
background-image: url("http://www.finalfantasyd20.com/ffd20/images/materia-yellow.png");
background-repeat: no-repeat;
background-position: center;
}
.sheet-materia-type-independent:checked ~ .sheet-materia-icon {
background-image: url("http://www.finalfantasyd20.com/ffd20/images/materia-purple.png");
background-repeat: no-repeat;
background-position: center;
}
.sheet-materia-type-spell:checked ~ .sheet-materia-icon {
background-image: url("http://www.finalfantasyd20.com/ffd20/images/materia-green.png");
background-repeat: no-repeat;
background-position: center;
}
.sheet-materia-type-summon:checked ~ .sheet-materia-icon {
background-image: url("http://www.finalfantasyd20.com/ffd20/images/materia-red.png");
background-repeat: no-repeat;
background-position: center;
}
.sheet-materia-type-support:checked ~ .sheet-materia-icon {
background-image: url("http://www.finalfantasyd20.com/ffd20/images/materia-blue.png");
background-repeat: no-repeat;
background-position: center;
}
.sheet-cs-show {
text-align: center;
vertical-align: middle;
padding: 0px 4px 0px 4px;
color: #00E8E8;
letter-spacing: 1px;
line-height: 90%;
}
.sheet-lb { display: none; }
input[class^="sheet-spells-interface"] {
display: none;
}
input.sheet-spells-interface-0:checked ~ div.sheet-spells-section-0,
input.sheet-spells-interface-1:checked ~ div.sheet-spells-section-1,
input.sheet-spells-interface-2:checked ~ div.sheet-spells-section-2,
input.sheet-spells-interface-3:checked ~ div.sheet-spells-section-3,
input.sheet-spells-interface-4:checked ~ div.sheet-spells-section-4,
input.sheet-spells-interface-5:checked ~ div.sheet-spells-section-5,
input.sheet-spells-interface-6:checked ~ div.sheet-spells-section-6,
input.sheet-spells-interface-7:checked ~ div.sheet-spells-section-7,
input.sheet-spells-interface-8:checked ~ div.sheet-spells-section-8,
input.sheet-spells-interface-9:checked ~ div.sheet-spells-section-9 {
display: none;
}
input.sheet-spells-interface-0:not(:checked) ~ div.sheet-spells-section-0,
input.sheet-spells-interface-1:not(:checked) ~ div.sheet-spells-section-1,
input.sheet-spells-interface-2:not(:checked) ~ div.sheet-spells-section-2,
input.sheet-spells-interface-3:not(:checked) ~ div.sheet-spells-section-3,
input.sheet-spells-interface-4:not(:checked) ~ div.sheet-spells-section-4,
input.sheet-spells-interface-5:not(:checked) ~ div.sheet-spells-section-5,
input.sheet-spells-interface-6:not(:checked) ~ div.sheet-spells-section-6,
input.sheet-spells-interface-7:not(:checked) ~ div.sheet-spells-section-7,
input.sheet-spells-interface-8:not(:checked) ~ div.sheet-spells-section-8,
input.sheet-spells-interface-9:not(:checked) ~ div.sheet-spells-section-9 {
display: block;
}
input[type=checkbox] {
text-align: center;
width: 20px;
height: 20px;
margin-top: 2px;
}
input[type=number] {
color: black;
width: 100% !important;
border: 1px solid #00E8E8;
font-family: "Tahoma", "Arial";
text-align: center;
padding: 2px 4px 2px 4px;
border-radius: 0px;
height: 24px;
margin: 0px;
}
input[type=text] {
color: black;
width: 100%;
text-align: left;
border: 1px solid #00E8E8;
font-family: "Tahoma", "Arial";
padding: 2px 4px 2px 4px;
border-radius: 0px;
height: 24px;
margin: 0px;
}
input[readonly] {
border: 1px solid #00E8E8;
box-shadow: none !important;
background-color: transparent;
font-family: "Tahoma", "Arial";
color: #F8F8F8;
text-align: center;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
vertical-align: middle;
padding: 2px 4px 2px 4px;
height: 24px;
}
input[readonly].sheet-total {
color: yellow;
background-color: rgba(0, 232, 232, 0.4);
}
input[type='number'] {
-moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input:focus {
background-color: #00E8E8;
}
button[type=roll] {
width: 24px;
height: 24px;
padding: 0px;
margin: 0px;
vertical-align: middle;
color: black;
}
table.sheet-table-skill-monster button[type=roll] {
width: 18px;
height: 18px;
padding: 0px;
margin: 0px;
vertical-align: middle;
color: black;
}
button[type=roll].sheet-text-button {
padding-top: 3px;
margin: 0px;
vertical-align: middle;
color: black;
}
button[type=roll]:hover {
background-image: none;
color: #00E8E8;
}
textarea {
resize: none;
border: 1px solid #00E8E8;
height: 100%;
font-family: "Tahoma", "Arial";
color: black;
border-radius: 0px;
margin: 0px;
padding: 2px 4px 2px 4px;
overflow-x: hidden;
}
textarea.sheet-notes {
border: 1px solid #00E8E8;
height: 100%;
font-family: "Tahoma", "Arial";
color: black;
border-radius: 0px;
margin: 0px;
padding: 2px 4px 2px 4px;
overflow-x: hidden;
background-image: url("http://www.finalfantasyd20.com/ffd20/images/Mog_US.png");
background-repeat: no-repeat;
background-position: right bottom;
}
textarea:focus {
background-color: #00E8E8;
}
input[type="checkbox"].sheet-spells-show {
opacity: 0;
width: 18px;
height: 18px;
position: relative;
left: 9px;
bottom: 2px;
margin: -10px;
cursor: pointer;
z-index: 1;
}
input[type="checkbox"].sheet-spells-show + span::before {
text-align: center;
display: inline-block;
content: "▼";
color: yellow;
width: 18px;
height: 18px;
margin: 2px 0px 2px 0px;
font-size: 120%;
left: 11px;
border: 1px solid #00E8E8;
border-radius: 2px;
}
input[type="checkbox"].sheet-spells-show:checked + span::before {
content: "►";
background-color: transparent;
color: #F8F8F8;
}
select {
width: 100% !important;
height: 24px;
vertical-align: center;
padding: 0px;
margin: 0px;
color: black;
border: 1px solid #00E8E8;
border-radius: 0px;
font-family: "Tahoma", "Arial";
}
select.sheet-spell-type {
font-size: 80%;
border: 1px solid #00E8E8;
box-shadow: none !important;
background-color: transparent;
font-family: "Tahoma", "Arial";
color: #00E8E8;
text-align: center;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
vertical-align: middle;
}
.repcontrol_add,
.repcontrol_edit,
.repcontrol_del,
.repcontrol_move {
height: 24px;
width: 60px;
margin: 1px 1px 0px 0px;
padding: 0px;
vertical-align: middle;
text-align: center;
}
.repcontrol_del,
.repcontrol_move {
width: 23px;
margin: 1px;
font-size: 140%;
border-radius: 0px;
}
.repitem {
margin-top: -1px;
}
.repcontrol {
width: 122px;
float: left;
margin: 0px 0px 1px 1px;
}
.sheet-rolltemplate-weapon-attack .sheet-background {
background: rgb(4,0,255); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(4,0,255,1) 20%, rgba(1,0,12,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(4,0,255,1) 20%,rgba(1,0,12,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(4,0,255,1) 20%,rgba(1,0,12,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
font-family: "Tahoma", "Arial";
border-radius: 8px;
white-space: normal;
min-width: 233px;
}
.sheet-rolltemplate-weapon-attack .sheet-box-outer {
border: 1px solid black;
border-radius: 5px;
}
.sheet-rolltemplate-weapon-attack .sheet-box-middle {
border: 2px solid lightgrey;
border-radius: 4px;
}
.sheet-rolltemplate-weapon-attack .sheet-box-inner {
border: 1px solid black;
border-radius: 3px;
padding: 5px;
}
.sheet-rolltemplate-weapon-attack td.sheet-title {
padding: 3px;
letter-spacing: 1px;
text-align: center;
font-weight: bold;
font-size: 90%;
color: #E8E8E8;
}
.sheet-rolltemplate-weapon-attack td.sheet-label {
text-align: center;
vertical-align: middle;
color: #00E8E8;
letter-spacing: 1px;
line-height: 90%;
font-size: 90%;
}
.sheet-rolltemplate-weapon-attack .sheet-label-small {
text-align: left;
vertical-align: middle;
color: #00E8E8;
letter-spacing: 1px;
line-height: 90%;
font-size: 75%;
}
.sheet-rolltemplate-weapon-attack hr.sheet-divider {
border: 1px solid transparent;
border-top: 1px solid #00E8E8;
margin: 2px 0px 2px 0px;
}
.sheet-rolltemplate-weapon-attack td.sheet-roll-result {
text-align: left;
vertical-align: middle;
letter-spacing: 1px;
line-height: 90%;
font-size: 90%;
text-shadow: none;
color: black;
padding-left: 5px;
width: 38px;
}
.sheet-rolltemplate-weapon-attack td.sheet-weapon-critical {
text-align: left;
vertical-align: middle;
letter-spacing: 1px;
line-height: 90%;
font-size: 90%;
color: yellow;
font-weight: bold;
font-style: italic;
padding-left: 5px;
}
.sheet-rolltemplate-weapon-attack table {
table-layout: fixed;
border-collapse: separate;
border-spacing: 1px;
width: 100%;
}
.sheet-rolltemplate-roll-check .sheet-background {
background: rgb(4,0,255); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(4,0,255,1) 20%, rgba(1,0,12,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(4,0,255,1) 20%,rgba(1,0,12,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(4,0,255,1) 20%,rgba(1,0,12,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
font-family: "Tahoma", "Arial";
border-radius: 8px;
white-space: normal;
min-width: 233px;
}
.sheet-rolltemplate-roll-check .sheet-box-outer {
border: 1px solid black;
border-radius: 5px;
}
.sheet-rolltemplate-roll-check .sheet-box-middle {
border: 2px solid lightgrey;
border-radius: 4px;
}
.sheet-rolltemplate-roll-check .sheet-box-inner {
border: 1px solid black;
border-radius: 3px;
padding: 5px;
}
.sheet-rolltemplate-roll-check td.sheet-title {
padding: 3px;
letter-spacing: 1px;
text-align: center;
font-weight: bold;
font-size: 90%;
color: #E8E8E8;
}
.sheet-rolltemplate-roll-check td.sheet-label {
text-align: center;
vertical-align: middle;
color: #00E8E8;
letter-spacing: 1px;
line-height: 90%;
font-size: 90%;
}
.sheet-rolltemplate-roll-check td.sheet-label-small {
text-align: left;
vertical-align: middle;
color: #00E8E8;
letter-spacing: 1px;
line-height: 90%;
font-size: 75%;
}
.sheet-rolltemplate-roll-check hr.sheet-divider {
border: 1px solid transparent;
border-top: 1px solid #00E8E8;
margin: 2px 0px 2px 0px;
}
.sheet-rolltemplate-roll-check td.sheet-roll-result {
text-align: left;
vertical-align: middle;
letter-spacing: 1px;
line-height: 90%;
font-size: 90%;
text-shadow: none;
color: black;
padding-left: 5px;
width: 38px;
}
.sheet-rolltemplate-roll-check td.sheet-weapon-critical {
text-align: left;
vertical-align: middle;
letter-spacing: 1px;
line-height: 90%;
font-size: 90%;
color: yellow;
font-weight: bold;
font-style: italic;
padding-left: 5px;
}
.sheet-rolltemplate-roll-check table {
table-layout: fixed;
border-collapse: separate;
border-spacing: 1px;
width: 100%;
}