mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-31 12:12:30 +00:00
861 lines
18 KiB
CSS
861 lines
18 KiB
CSS
/* === Whole-sheet use ===*/
|
|
|
|
.charsheet {
|
|
min-height: 100%;
|
|
font-family: Arial;
|
|
color: white;
|
|
font-size: 14px;
|
|
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c64027+0,193d57+18,20364e+83,0e202e+99 */
|
|
background: #c64027; /* Old browsers */
|
|
background: -moz-linear-gradient(top, #c64027 0%, #193d57 18%, #20364e 83%, #0e202e 99%); /* FF3.6-15 */
|
|
background: -webkit-linear-gradient(top, #c64027 0%,#193d57 18%,#20364e 83%,#0e202e 99%); /* Chrome10-20,Safari5.1-6 */
|
|
background: linear-gradient(to bottom, #c64027 0%,#193d57 18%,#20364e 83%,#0e202e 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera20+, Safari7+ */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c64027', endColorstr='#0e202e',GradientType=0 ); /* IE6-9 */
|
|
}
|
|
|
|
.charsheet table {
|
|
border-collapse: collapse;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.sheet-NPC td {
|
|
background-color: white;
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet td,
|
|
.charsheet th {
|
|
border-color: #70c4db;
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
td.sheet-empty {
|
|
border-style: none;
|
|
}
|
|
|
|
input[type=text] {
|
|
border: none;
|
|
width: 98%;
|
|
font-size: 15px;
|
|
font-family: Arial;
|
|
}
|
|
|
|
input[type=number] {
|
|
border: none;
|
|
width: 98%;
|
|
font-size: 15px;
|
|
font-family: Arial;
|
|
}
|
|
|
|
input[type=number]::-webkit-inner-spin-button,
|
|
input[type=number]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type='number'] {
|
|
-moz-appearance:textfield;
|
|
}
|
|
|
|
input[type=text] {
|
|
text-align: center;
|
|
}
|
|
|
|
input[type=number] {
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
textarea {
|
|
border: none;
|
|
margin: 0;
|
|
width: 97%;
|
|
outline: none;
|
|
resize: vertical;
|
|
height: 100%;
|
|
}
|
|
|
|
fieldset {
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
select {
|
|
border: none;
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 22px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.sheet-center {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.sheet-row:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
.sheet-column {
|
|
float: left;
|
|
width: 48%;
|
|
padding-top: 4px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
padding-left: 0px;
|
|
}
|
|
|
|
.sheet-column-middle {
|
|
padding-left: 14px;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.sheet-column-middle table {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.sheet-column-right {
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.sheet-header {
|
|
background-image: linear-gradient(to bottom left, transparent 50%, black 50%), linear-gradient(black, black), linear-gradient(black, black);
|
|
background-size: 20px 20px, 100% 100%, 100% 100%;
|
|
background-position: 100% 0%, -20px 0%, 100% 20px;
|
|
background-repeat: no-repeat;
|
|
font-family: Tahoma;
|
|
font-weight: bold;
|
|
font-size: 1.3em;
|
|
padding: 8px;
|
|
color: #f3a715;
|
|
}
|
|
|
|
.sheet-header span {
|
|
text-align: left;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.sheet-filled {
|
|
background-image: linear-gradient(#70c4db, #70c4db), linear-gradient(#70c4db, #70c4db), linear-gradient(#70c4db, #70c4db), linear-gradient(#70c4db, #70c4db), linear-gradient(to bottom left, transparent calc(50% - 1px), #70c4db calc(50% - 1px), #70c4db calc(50% + 1px), black calc(50% + 1px)), linear-gradient(black, black), linear-gradient(black, black);
|
|
background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px, 20px 20px, 100% 100%, 100% 100%;
|
|
background-position: 0% 0%, 100% 20px, -20px 0%, 0px 100%, 100% 0%, -20px 0%, 100% 20px;
|
|
}
|
|
|
|
.sheet-stats-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-stats-center table {
|
|
display: inline-table;
|
|
}
|
|
|
|
.sheet-StatLabel,
|
|
td.sheet-StatLabel {
|
|
font-family: Arial;
|
|
color: White;
|
|
text-align: center;
|
|
background: #1c3156;
|
|
padding: 5px;
|
|
font-size: 1.0em;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.sheet-StatLabelSub,
|
|
th {
|
|
font-family: Arial Narrow;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
background: #b9e1ef;
|
|
color: #2d320c;
|
|
font-size: 90%;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.sheet-left,
|
|
input.sheet-left {
|
|
text-align: left;
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.sheet-number {
|
|
width: 50px;
|
|
}
|
|
|
|
.sheet-number td {
|
|
width: 50px;
|
|
}
|
|
|
|
.sheet-StatInput {
|
|
background: white;
|
|
font-size: 0;
|
|
line-height: 0;
|
|
|
|
}
|
|
|
|
.sheet-StatInput input[type=radio] {
|
|
display: inline;
|
|
}
|
|
|
|
.sheet-StatInput input[type=number] {
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-StatInput label {
|
|
width: 12px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.sheet-InputText {
|
|
font-size: 14px;
|
|
color: black;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.sheet-SkillTable {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.sheet-SkillTable input[disabled] {
|
|
display: none
|
|
}
|
|
|
|
tr.sheet-SkillTableHeader td:first-child {
|
|
font-family: Arial;
|
|
color: White;
|
|
text-align: left;
|
|
background: #1c3156;
|
|
padding-left: 10px;
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
|
|
}
|
|
|
|
tr.sheet-SkillTableHeader td:nth-child(2) {
|
|
background: white;
|
|
font-size: 0;
|
|
border-right-style: none;
|
|
}
|
|
|
|
tr.sheet-SkillTableHeader td:nth-child(3) {
|
|
background: white;
|
|
font-size: 1em;
|
|
border-left-style: none;
|
|
}
|
|
|
|
tr.sheet-SkillTableHeaderSub td {
|
|
font-family: Arial Narrow;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
background: #b9e1ef;
|
|
color: #2d320c;
|
|
font-size: 90%;
|
|
width: 50px;
|
|
}
|
|
|
|
tr.sheet-SkillTableHeaderSub td:first-child {
|
|
text-align: left;
|
|
width: 30%;
|
|
border-right-style: none;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
tr.sheet-SkillTableHeaderSub td:nth-child(2) {
|
|
border-left-style: none;
|
|
width: auto;
|
|
}
|
|
|
|
tr.sheet-Skill td {
|
|
background: white;
|
|
}
|
|
|
|
tr.sheet-Skill td:first-child {
|
|
padding-left: 10px;
|
|
border-right-style: none;
|
|
font-family: Arial Narrow, Arial, sans-serif;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
background: #ebf7fb;
|
|
color: #2d320c;
|
|
font-size: 90%
|
|
}
|
|
|
|
tr.sheet-Skill td:nth-child(2) {
|
|
border-left-style:none;
|
|
font-family: Arial Narrow;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
background: #ebf7fb;
|
|
color: #2d320c;
|
|
font-size: 90%
|
|
}
|
|
|
|
.sheet-column-triple td{
|
|
width: 30%;
|
|
}
|
|
|
|
.sheet-character-background td {
|
|
padding: 0;
|
|
font-size: 0.8em;
|
|
line-height: 1em;
|
|
}
|
|
|
|
/* === WEAPON STATS REPEATING FIELD === */
|
|
table.sheet-WeaponStats {
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Range, Burst, Size headers */
|
|
.sheet-WeaponStats-EvenLabel {
|
|
width: 10%;
|
|
}
|
|
|
|
/* Damage fields */
|
|
table.sheet-WeaponStats tr:nth-child(3) td:nth-child(2),
|
|
table.sheet-WeaponStats tr:nth-child(3) td:nth-child(4) {
|
|
width: 10%;
|
|
}
|
|
|
|
/* Damage cell "merge" */
|
|
table.sheet-WeaponStats tr:nth-child(3) td:nth-child(2) {
|
|
border-right-style: none;
|
|
}
|
|
|
|
table.sheet-WeaponStats tr:nth-child(3) td:nth-child(3) {
|
|
border-left-style: none;
|
|
border-right-style: none;
|
|
text-align: center;
|
|
}
|
|
|
|
table.sheet-WeaponStats tr:nth-child(3) td:nth-child(4) {
|
|
border-left-style: none;
|
|
}
|
|
|
|
table.sheet-WeaponStats-bottom {
|
|
margin-top: -2px;
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-WeaponStats-radio {
|
|
width: 22px;
|
|
}
|
|
|
|
.sheet-WeaponStats-bottom button {
|
|
margin: 0;
|
|
height: 22px;
|
|
}
|
|
|
|
.sheet-WeaponStats-bottom span {
|
|
color: white;
|
|
}
|
|
|
|
table.sheet-NPC {
|
|
width: 100%;
|
|
color: black;
|
|
}
|
|
|
|
table.sheet-expertise th {
|
|
width: 12%;
|
|
}
|
|
|
|
table.sheet-expertise td {
|
|
width: 7%;
|
|
text-align: center;
|
|
}
|
|
|
|
table.sheet-defences th {
|
|
width: 15%;
|
|
}
|
|
|
|
table.sheet-defences td {
|
|
width: 18%;
|
|
}
|
|
|
|
table.sheet-defences tr:nth-child(2) td.sheet-StatInput input {
|
|
width: 47%;
|
|
}
|
|
|
|
/* == RADIO BUTTONS STYLING == */
|
|
/* The container */
|
|
.sheet-radio-container {
|
|
display: inline-block;
|
|
position: relative;
|
|
cursor: pointer;
|
|
|
|
font-family: Arial;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
|
|
width: 22px;
|
|
height: 22px;
|
|
margin: 0px;
|
|
}
|
|
|
|
/* Hide the browser's default radio button */
|
|
.sheet-radio-container input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Create a custom radio button */
|
|
.sheet-radio-container span {
|
|
position: absolute;
|
|
top: -1px;
|
|
left: -1px;
|
|
height: 21px;
|
|
width: 24px;
|
|
background-color: #eeeeee;
|
|
border-style: none;
|
|
margin: 0px;
|
|
padding-top: 3px;
|
|
color: white;
|
|
}
|
|
|
|
/* On mouse-over, add a gray background color */
|
|
.sheet-radio-container:hover input ~ span {
|
|
background-color: #bbbbbb;
|
|
}
|
|
|
|
/* When the radio button is checked, add a blue background */
|
|
.sheet-radio-container input:checked ~ span {
|
|
background-color: #3399FF;
|
|
}
|
|
|
|
/* Max stress trackers */
|
|
|
|
.sheet-stress-max td {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.sheet-stress-max-container {
|
|
display: inline-block;
|
|
position: relative;
|
|
cursor: pointer;
|
|
|
|
color: white;
|
|
font-family: Arial;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
|
|
width: 40px;
|
|
height: 10px;
|
|
margin: 0;
|
|
}
|
|
|
|
.sheet-stress-max-container input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sheet-stress-max-container span {
|
|
position: relative;
|
|
top: -3px;
|
|
left: 0px;
|
|
height: 10px;
|
|
width: 40px;
|
|
background-color: #eeeeee;
|
|
border-style: none;
|
|
margin: 0;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.sheet-stress-max-container:hover input ~ span {
|
|
background-color: #bbbbbb;
|
|
}
|
|
|
|
.sheet-stress-max-container input:checked ~ span {
|
|
background-color: #9933ff;
|
|
}
|
|
|
|
/* === GRADIENTS === */
|
|
.sheet-radio-gradient-red input:checked ~ span {
|
|
background-color: #CC3333;
|
|
}
|
|
|
|
.sheet-radio-gradient-black input:checked ~ span {
|
|
background-color: #111111;
|
|
}
|
|
/* 6-step */
|
|
.sheet-radio-gradient6-1 input:checked ~ span {
|
|
background-color: #4C88DD;
|
|
}
|
|
|
|
.sheet-radio-gradient6-2 input:checked ~ span {
|
|
background-color: #6677BB;
|
|
}
|
|
|
|
.sheet-radio-gradient6-3 input:checked ~ span {
|
|
background-color: #7F6699;
|
|
}
|
|
|
|
.sheet-radio-gradient6-4 input:checked ~ span {
|
|
background-color: #995577;
|
|
}
|
|
|
|
.sheet-radio-gradient6-5 input:checked ~ span {
|
|
background-color: #B24455;
|
|
}
|
|
|
|
/* 5-step */
|
|
.sheet-radio-gradient5-1 input:checked ~ span {
|
|
background-color: #5184D6;
|
|
}
|
|
|
|
.sheet-radio-gradient5-2 input:checked ~ span {
|
|
background-color: #7070AD;
|
|
}
|
|
|
|
.sheet-radio-gradient5-3 input:checked ~ span {
|
|
background-color: #8E5B84;
|
|
}
|
|
|
|
.sheet-radio-gradient5-4 input:checked ~ span {
|
|
background-color: #AD475B;
|
|
}
|
|
|
|
/* 4-step */
|
|
.sheet-radio-gradient4-1 input:checked ~ span {
|
|
background-color: #597FCC;
|
|
}
|
|
|
|
.sheet-radio-gradient4-2 input:checked ~ span {
|
|
background-color: #7F6699;
|
|
}
|
|
|
|
.sheet-radio-gradient4-3 input:checked ~ span {
|
|
background-color: #A54C66;
|
|
}
|
|
|
|
.sheet-radio-gradient4-4 input:checked ~ span {
|
|
background-color: #CC3333;
|
|
}
|
|
|
|
/* === SHEET TABS === */
|
|
|
|
/*this hides the contents of each tab by default*/
|
|
.charsheet div[class^="sheet-section"] {
|
|
display: none;
|
|
}
|
|
|
|
/*this shows the tab content when the appropriate input field is selected*/
|
|
.charsheet input.sheet-tab1:checked ~ div.sheet-section-overview,
|
|
.charsheet input.sheet-tab2:checked ~ div.sheet-section-talents,
|
|
.charsheet input.sheet-tab3:checked ~ div.sheet-section-gear,
|
|
.charsheet input.sheet-tab4:checked ~ div.sheet-section-character,
|
|
.charsheet input.sheet-tab5:checked ~ div.sheet-section-bio,
|
|
.charsheet input.sheet-tab6:checked ~ div.sheet-section-6 {
|
|
display: block;
|
|
}
|
|
|
|
.charsheet 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: 110px;
|
|
height: 28px;
|
|
cursor: pointer;
|
|
position: static;
|
|
opacity: 0;
|
|
z-index: 9999;
|
|
margin: 0;
|
|
}
|
|
|
|
/*this styles the span with the tab information and slides to the left, so it appears underneath the radio button*/
|
|
span.sheet-tab {
|
|
padding-top: 4px;
|
|
font-family: Tahoma;
|
|
text-align: center;
|
|
display: inline-block;
|
|
font-size: 1.3em;
|
|
background: #eeeeee;
|
|
color: DarkGrey;
|
|
font-weight: bold;
|
|
|
|
border: 2px solid #66cccc;
|
|
|
|
width: 110px;
|
|
height: 24px;
|
|
cursor: pointer;
|
|
|
|
position: static;
|
|
|
|
margin: 0;
|
|
vertical-align: middle;
|
|
margin-left: -112px;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
input.sheet-tab:hover + span.sheet-tab,
|
|
span.sheet-tab:hover {
|
|
background: #dddddd;
|
|
}
|
|
|
|
/*this modifies the span color once the radio button is selected so you know which tab is selected*/
|
|
.charsheet input.sheet-tab1:checked + span.sheet-tab1,
|
|
.charsheet input.sheet-tab2:checked + span.sheet-tab2,
|
|
.charsheet input.sheet-tab3:checked + span.sheet-tab3,
|
|
.charsheet input.sheet-tab4:checked + span.sheet-tab4,
|
|
.charsheet input.sheet-tab5:checked + span.sheet-tab5,
|
|
.charsheet input.sheet-tab6:checked + span.sheet-tab6,
|
|
.charsheet input.sheet-tab7:checked + span.sheet-tab7,
|
|
.charsheet input.sheet-tab8:checked + span.sheet-tab8,
|
|
.charsheet input.sheet-tab99:checked + span.sheet-tab99 {
|
|
|
|
background: Black;
|
|
color: #ff9900;
|
|
}
|
|
|
|
.sheet-button-damage {
|
|
display: none;
|
|
}
|
|
|
|
input[value="Infowar"]:checked ~ button.sheet-button-infowar,
|
|
input[value="Psywar"]:checked ~ button.sheet-button-psywar,
|
|
input[value="Melee"]:checked ~ button.sheet-button-melee,
|
|
input[value="Ranged"]:checked ~ button.sheet-button-ranged {
|
|
display: inline;
|
|
}
|
|
|
|
input.sheet-weapon-tab {
|
|
width: 50px;
|
|
height: 28px;
|
|
cursor: pointer;
|
|
position: static;
|
|
opacity: 0;
|
|
z-index: 9999;
|
|
margin: 0;
|
|
}
|
|
|
|
span.sheet-weapon-tab {
|
|
font-family: Tahoma;
|
|
text-align: center;
|
|
display: inline;
|
|
font-size: 16px;
|
|
background: #eeeeee;
|
|
color: DarkGrey;
|
|
font-weight: bold;
|
|
|
|
border: 1px solid #66cccc;
|
|
|
|
width: 50px;
|
|
height: 28px;
|
|
cursor: pointer;
|
|
position: static;
|
|
margin: 0;
|
|
vertical-align: middle;
|
|
margin-left: -50px;
|
|
}
|
|
|
|
input.sheet-weapon-tab:hover + span.sheet-weapon-tab,
|
|
span.sheet-weapon-tab:hover {
|
|
background: #dddddd;
|
|
}
|
|
|
|
.charsheet input.sheet-weapon-tab-1:checked + span.sheet-weapon-tab-1,
|
|
.charsheet input.sheet-weapon-tab-2:checked + span.sheet-weapon-tab-2,
|
|
.charsheet input.sheet-weapon-tab-3:checked + span.sheet-weapon-tab-3,
|
|
.charsheet input.sheet-weapon-tab-4:checked + span.sheet-weapon-tab-4 {
|
|
|
|
background: #333366;
|
|
color: white;
|
|
}
|
|
|
|
table.sheet-WeaponStats-bottom td.sheet-StatInput button {
|
|
margin: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
text-align: center;
|
|
position: relative;
|
|
left: 5px;
|
|
}
|
|
|
|
td.sheet-tablediv-7 {
|
|
width: 7%;
|
|
}
|
|
|
|
/*this hides the contents of each tab by default*/
|
|
.charsheet div[class^="sheet-type"] {
|
|
display: none;
|
|
}
|
|
|
|
/*this shows the tab content when the appropriate input field is selected*/
|
|
.charsheet input.sheet-type-tab1:checked ~ div.sheet-type-PC,
|
|
.charsheet input.sheet-type-tab2:checked ~ div.sheet-type-NPC,
|
|
.charsheet input.sheet-type-tab3:checked ~ div.sheet-type-Geist,
|
|
.charsheet input.sheet-type-tab4:checked ~ div.sheet-type-Shell,
|
|
.charsheet input.sheet-type-tab5:checked ~ div.sheet-type-Vehicle,
|
|
.charsheet input.sheet-type-tab6:checked ~ div.sheet-type-6 {
|
|
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-type-tab {
|
|
width: 60px;
|
|
height: 22px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
opacity: 0;
|
|
z-index: 9999;
|
|
margin: 0;
|
|
}
|
|
|
|
/*this styles the span with the tab information and slides to the left, so it appears underneath the radio button*/
|
|
span.sheet-type-tab {
|
|
padding-top: 1px;
|
|
font-family: Tahoma;
|
|
text-align: center;
|
|
display: inline-block;
|
|
font-size: 1em;
|
|
background: #eeeeee;
|
|
color: DarkGrey;
|
|
font-weight: bold;
|
|
|
|
border: 1px solid #66cccc;
|
|
|
|
width: 60px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
|
|
position: relative;
|
|
top: 2px;
|
|
|
|
margin: 0;
|
|
vertical-align: middle;
|
|
margin-left: -61px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
input.sheet-type-tab:hover + span.sheet-type-tab,
|
|
span.sheet-type-tab:hover {
|
|
background: #dddddd;
|
|
}
|
|
|
|
/*this modifies the span color once the radio button is selected so you know which tab is selected*/
|
|
.charsheet input.sheet-type-tab1:checked + span.sheet-type-tab1,
|
|
.charsheet input.sheet-type-tab2:checked + span.sheet-type-tab2,
|
|
.charsheet input.sheet-type-tab3:checked + span.sheet-type-tab3,
|
|
.charsheet input.sheet-type-tab4:checked + span.sheet-type-tab4,
|
|
.charsheet input.sheet-type-tab5:checked + span.sheet-type-tab5,
|
|
.charsheet input.sheet-type-tab6:checked + span.sheet-type-tab6,
|
|
.charsheet input.sheet-type-tab7:checked + span.sheet-type-tab7,
|
|
.charsheet input.sheet-type-tab8:checked + span.sheet-type-tab8,
|
|
.charsheet input.sheet-type-tab99:checked + span.sheet-type-tab99 {
|
|
|
|
background: Black;
|
|
color: #ff9900;
|
|
}
|
|
|
|
/* === ROLL TEMPLATES === */
|
|
|
|
.sheet-rolltemplate-skillroll table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-rolltemplate-skillroll td {
|
|
font-weight: bold;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
font-size: .8em;
|
|
border-style: none;
|
|
color: black;
|
|
background: #eff7fa;
|
|
font-family: Arial;
|
|
}
|
|
|
|
.sheet-rolltemplate-label {
|
|
text-align: right;
|
|
width: 80px;
|
|
padding-right: 3px;
|
|
}
|
|
|
|
.sheet-rolltemplate-body span {
|
|
padding: 2px;
|
|
background: #ffff99;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-rolltemplate-greenborder {
|
|
border: 1px solid #33cc00;
|
|
}
|
|
|
|
.sheet-rolltemplate-blueborder {
|
|
border: 1px solid #3366ff;
|
|
}
|
|
|
|
.sheet-rolltemplate-skillroll .sheet-subheader {
|
|
text-align: center;
|
|
padding: 2px;
|
|
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#981c1c+0,281c26+52 */
|
|
background: #981c1c; /* Old browsers */
|
|
background: -moz-linear-gradient(top, #981c1c 0%, #281c26 52%); /* FF3.6-15 */
|
|
background: -webkit-linear-gradient(top, #981c1c 0%,#281c26 52%); /* Chrome10-25,Safari5.1-6 */
|
|
background: linear-gradient(to bottom, #981c1c 0%,#281c26 52%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#981c1c', endColorstr='#281c26',GradientType=0 ); /* IE6-9 */
|
|
color: white;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-collapse: separate;
|
|
border-color: #be4135;
|
|
}
|
|
|
|
.sheet-rolltemplate-skillroll .sheet-subheader span.inlinerollresult {
|
|
background-color: transparent;
|
|
border-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.sheet-rolltemplate-skillroll th {
|
|
height: auto;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-image: url("https://i.imgur.com/Mq5fb3h.png");
|
|
background-color: #0d3956;
|
|
color: white;
|
|
padding: 5px;
|
|
font-size: 1.3em;
|
|
text-shadow:
|
|
-2px -2px 0 black,
|
|
2px -2px 0 black,
|
|
-2px 2px 0 black,
|
|
2px 2px 0 black;
|
|
border-style: solid solid none;
|
|
border-width: 1px;
|
|
border-color: black;
|
|
font-family: Arial;
|
|
}
|
|
|
|
.sheet-icon-N-small {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 16px;
|
|
} |