498 lines
13 KiB
CSS
498 lines
13 KiB
CSS
/***************************
|
|
** START: Global Settings **
|
|
***************************/
|
|
.charsheet { /** Overall page viewed on the website: setting font, padding, and background color **/
|
|
font-family: 'Candal', Helvetica, Arial, sans-serif;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
-webkit-box-sizing: border-box;
|
|
-mox-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
color: #111111; /** set text to black **/
|
|
color: #ffffff; /** set background to white **/
|
|
}
|
|
.charsheet textarea, div, input, button { /** making padding, border, and margin appear INSIDE div area **/
|
|
-webkit-box-sizing: border-box;
|
|
-mox-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
.sheet-container { /** Container for the entire sheet: Background and border and set width **/
|
|
vertical-align: top;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 800px;
|
|
text-align: center;
|
|
padding: 10px;
|
|
border: 3px solid #121212;
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Worlds%20in%20Peril/Worlds%20in%20Peril%20background%20sheet.jpg');
|
|
background-size: cover;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
}
|
|
.sheet-section { /** Borders around individual sections of the sheet to give white background **/
|
|
border: 3px solid #121212;
|
|
background: #ededed;
|
|
padding: 5px;
|
|
width: 100%;
|
|
margin-bottom: 5px;
|
|
vertical-align: top;
|
|
}
|
|
.sheet-header-1b { /** Section labels for Editor in Chief (red) **/
|
|
height: 39px;
|
|
background: #b11116;
|
|
position: relative;
|
|
padding-left: 5px;
|
|
padding-top: 3px;
|
|
text-align: left;
|
|
}
|
|
.sheet-header-1b:before { /** Section labels for Editor in Chief (red): Beveling the top left **/
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border-top: 15px solid #ededed;
|
|
border-right: 15px solid rgba(177,17,22,0.0);
|
|
}
|
|
.sheet-header-1b:after { /** Section labels for Editor in Chief (red): Beveling the bottom right **/
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
border-bottom: 15px solid #ededed;
|
|
border-left: 15px solid rgba(177,17,22,0.0);
|
|
}
|
|
.sheet-header-1a { /** Section labels for Player Characters (blue) **/
|
|
height: 39px;
|
|
background: #0061a5;
|
|
position: relative;
|
|
padding-left: 5px;
|
|
padding-top: 3px;
|
|
text-align: left;
|
|
}
|
|
.sheet-header-1a:before { /** Section labels for Player Characters (blue): Beveling the top left **/
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border-top: 15px solid #ededed;
|
|
border-right: 15px solid rgba(0,97,165,0.0);
|
|
}
|
|
.sheet-header-1a:after { /** Section labels for Player Characters (blue): Beveling the bottom right **/
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
border-bottom: 15px solid #ededed;
|
|
border-left: 15px solid rgba(0,97,165,0.0);
|
|
}
|
|
.sheet-header-2 { /** Gray header with 45 degree cut on the right **/
|
|
height: 30px;
|
|
background: #cecece;
|
|
position: relative;
|
|
padding-left: 5px;
|
|
padding-top: 3px;
|
|
text-align: left;
|
|
margin-right: 15px;
|
|
}
|
|
.sheet-header-2:after { /** Gray header with 45 degree cut on the right **/
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: -30px;
|
|
border-bottom: 30px solid transparent;
|
|
border-left: 30px solid #cecece;
|
|
}
|
|
.sheet-heading {
|
|
font-family: 'Candal', Helvetica, Arial, sans-serif;
|
|
text-transform: uppercase;
|
|
display: inline-block;
|
|
color: #ffffff;
|
|
font-size: 1.5em;
|
|
font-weight: bolder;
|
|
line-height: 35px;
|
|
}
|
|
.sheet-heading-spacer {
|
|
content: '';
|
|
width: 15px;
|
|
display: inline-block;
|
|
}
|
|
.sheet-heading-text,
|
|
.sheet-heading-text input[type=text] {
|
|
display: inline-block;
|
|
height: 29px;
|
|
}
|
|
.sheet-heading-2 {
|
|
display: inline-block;
|
|
text-transform: uppercase;
|
|
font-family: 'Candal', Helvetica, Arial, sans-serif;
|
|
font-weight: bold;
|
|
font-size: 1.25em;
|
|
}
|
|
.sheet-half {
|
|
width: 49%;
|
|
padding-right: 1%;
|
|
padding-left: 1%;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
.sheet-third {
|
|
width: 32.5%;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
.sheet-width200 {
|
|
width: 60px;
|
|
}
|
|
.sheet-width300 {
|
|
width: 300px;
|
|
}
|
|
.sheet-bevel-input,
|
|
.sheet-bevel-input:focus { /** Cut off top left and bottom right corners **/
|
|
height: 30px;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
padding-left: 15px;
|
|
padding-right: 10px;
|
|
-webkit-clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
|
|
clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
|
|
}
|
|
/** START Main Sheet Tab select **/
|
|
input[type=radio].sheet-tab-sheet {
|
|
margin-top: 2px;
|
|
opacity: 0;
|
|
width: 100px;
|
|
height: 50px;
|
|
z-index: 2;
|
|
}
|
|
input[type=radio].sheet-tab-sheet + div {
|
|
margin-top: 2px;
|
|
margin-left: -100px;
|
|
display: inline-block;
|
|
width: 100px;
|
|
height: 50px;
|
|
padding: 5px;
|
|
border: 1px solid white;
|
|
border-radius: 5px;
|
|
background-color: #111111;
|
|
color: #AAAAAA;
|
|
font-family: Verdana, Geneva, sans-serif;
|
|
font-variant: small-caps;
|
|
text-align: center;
|
|
vertical-align: top;
|
|
font-weight: bold;
|
|
}
|
|
input[type=radio].sheet-tab-sheet:checked + div {
|
|
background-color: #0061a5;
|
|
color:#FFFFFF;
|
|
}
|
|
/** END Main Sheet Tab select **/
|
|
/** START show/hide EiC vs Player sheets **/
|
|
.sheet-tab {
|
|
display: none;
|
|
}
|
|
input[type=radio].sheet-tab-sheet.sheet-main:checked ~ .sheet-tab.sheet-main,
|
|
input[type=radio].sheet-tab-sheet.sheet-background:checked ~ .sheet-tab.sheet-background {
|
|
display: block;
|
|
}
|
|
.sheet-toggle {
|
|
display: none;
|
|
}
|
|
input[type=checkbox].sheet-toggle-sheet:not(:checked) ~ .sheet-toggle.sheet-pc,
|
|
input[type=checkbox].sheet-toggle-sheet:checked ~ .sheet-toggle.sheet-eic {
|
|
display: block;
|
|
}
|
|
input[type=checkbox].sheet-toggle-sheet:checked ~ .sheet-toggle.sheet-pc,
|
|
input[type=checkbox].sheet-toggle-sheet:not(:checked) ~ .sheet-toggle.sheet-eic {
|
|
display: none;
|
|
}
|
|
/** formatting for the EiC checkbox **/
|
|
input[type=checkbox].sheet-toggle-sheet {
|
|
display: inline-block;
|
|
width: 100px;
|
|
opacity: 0;
|
|
z-index: 2;
|
|
height: 20px;
|
|
}
|
|
input[type=checkbox].sheet-toggle-sheet + div {
|
|
display: inline-block;
|
|
border: 1px solid #121212;
|
|
border-radius: 5px;
|
|
margin-left: -100px;
|
|
width: 100px;
|
|
font-size: 1.0em;
|
|
font-weight: bolder;
|
|
color: #A0A0A0;
|
|
background: #FFFFFF;
|
|
cursor: pointer;
|
|
line-height: 18px;
|
|
text-align: center;
|
|
}
|
|
input[type=checkbox].sheet-toggle-sheet:checked + div {
|
|
display: inline-block;
|
|
color: #FFFFFF;
|
|
background: #b11116;
|
|
}
|
|
input[type=checkbox].sheet-toggle-sheet:hover + div,
|
|
input[type=checkbox].sheet-toggle-sheet:hover * {
|
|
display: inline-block;
|
|
color: #121212;
|
|
background: #b11116;
|
|
}
|
|
/** END show/hide **/
|
|
|
|
.sheet-clear {
|
|
clear: both;
|
|
}
|
|
|
|
.sheet-mr1 {
|
|
margin-right: 1em;
|
|
}
|
|
|
|
.sheet-mb25 {
|
|
margin-bottom: .25em;
|
|
}
|
|
|
|
label {
|
|
display: inline;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
font-weight: bold;
|
|
padding-right: .15em;
|
|
}
|
|
|
|
label.sheet-label-bold {
|
|
display: inline-block;
|
|
text-transform: uppercase;
|
|
font-family: 'Candal', Helvetica, Arial, sans-serif;
|
|
font-weight: bold;
|
|
font-size: 1.25em;
|
|
width: 100%;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
label.sheet-label-bold-inline {
|
|
display: inline;
|
|
text-transform: uppercase;
|
|
font-family: 'Candal', Helvetica, Arial, sans-serif;
|
|
font-weight: bold;
|
|
font-size: 1.25em;
|
|
line-height: 2;
|
|
margin-right: .25em;
|
|
}
|
|
|
|
label.sheet-label-full {
|
|
display: inline-block;
|
|
margin: .5em 0 .25em 0;
|
|
padding: .25em .25em .25em 1em;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
border: 0;
|
|
background: #0061a5;
|
|
color: #fff;
|
|
text-transform: uppercase;
|
|
width: 100%;
|
|
font-size: 1.6em;
|
|
line-height: 1.625;
|
|
font-family: 'Candal', Helvetica, Arial, sans-serif;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-input-full {
|
|
width: 100%;
|
|
margin-bottom: .5em;
|
|
}
|
|
|
|
textarea.sheet-textarea-small {
|
|
height: 4em;
|
|
}
|
|
|
|
textarea.sheet-textarea-medium {
|
|
height: 7em;
|
|
}
|
|
|
|
textarea.sheet-textarea-large {
|
|
height: 10em;
|
|
}
|
|
|
|
.sheet-repeated-item-wrapper {
|
|
padding-bottom: .5em;
|
|
border-bottom: 1px solid #ccc;
|
|
margin-bottom: .75em;
|
|
}
|
|
|
|
.sheet-note {
|
|
padding: 0;
|
|
margin: 0 0 .5em 0;
|
|
}
|
|
|
|
/*-----------------*
|
|
* Character Sheet *
|
|
*-----------------*/
|
|
.sheet-bonds-wrapper {
|
|
margin-top: .5em;
|
|
border-top: 1px solid #ccc;
|
|
padding-top: .5em;
|
|
}
|
|
|
|
.sheet-bonds-wrapper .repcontainer .repitem:nth-child(2n+1) {
|
|
background: #93a1a1;
|
|
padding: 5px;
|
|
}
|
|
|
|
.sheet-moves-wrapper input[type="text"],
|
|
.sheet-moves-wrapper textarea {
|
|
margin-bottom: .5em;
|
|
}
|
|
|
|
.sheet-drives-wrapper .repcontainer .repitem,
|
|
.sheet-drives-wrapper .repcontrol,
|
|
.sheet-moves-wrapper .repcontainer .repitem,
|
|
.sheet-moves-wrapper .repcontrol,
|
|
.sheet-mob-wrapper .repcontainer .repitem,
|
|
.sheet-mob-wrapper .repcontrol,
|
|
.sheet-punch-wrapper .repcontainer .repitem,
|
|
.sheet-punch-wrapper .repcontrol {
|
|
width: 49%;
|
|
float: left;
|
|
padding: 5px;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
margin-top: .5em;
|
|
margin-left: 2px;
|
|
margin-right: 1px;
|
|
}
|
|
|
|
.sheet-drives-wrapper .repcontainer .repitem:nth-child(4n+3),
|
|
.sheet-drives-wrapper .repcontainer .repitem:nth-child(4n+2) {
|
|
border: 2px solid #121212;
|
|
background: #93a1a1;
|
|
}
|
|
|
|
.sheet-drives-wrapper .repcontainer .repitem:nth-child(4n+4),
|
|
.sheet-drives-wrapper .repcontainer .repitem:nth-child(4n+1) {
|
|
border: 2px solid #121212;
|
|
background: #586e75;
|
|
}
|
|
|
|
.sheet-moves-wrapper .repcontainer .repitem {
|
|
border: 2px solid #121212;
|
|
background: #fceabb;
|
|
background: -moz-linear-gradient(-45deg, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
|
|
background: -webkit-linear-gradient(-45deg, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
|
|
background: linear-gradient(135deg, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=1 );
|
|
}
|
|
|
|
.sheet-punch-wrapper .repcontainer .repitem:nth-child(3n+1),
|
|
.sheet-mob-wrapper .repcontainer .repitem:nth-child(3n+1) {
|
|
border: 2px solid #121212;
|
|
background: #859900;
|
|
}
|
|
.sheet-punch-wrapper .repcontainer .repitem:nth-child(3n+2),
|
|
.sheet-mob-wrapper .repcontainer .repitem:nth-child(3n+2) {
|
|
border: 2px solid #121212;
|
|
background: #dc322f;
|
|
}
|
|
.sheet-punch-wrapper .repcontainer .repitem:nth-child(3n+3),
|
|
.sheet-mob-wrapper .repcontainer .repitem:nth-child(3n+3) {
|
|
border: 2px solid #121212;
|
|
background: #268bd2;
|
|
}
|
|
|
|
.sheet-drives-wrapper .repcontainer .repitem:nth-child(2n+1),
|
|
.sheet-moves-wrapper .repcontainer .repitem:nth-child(2n+1),
|
|
.sheet-mob-wrapper .repcontainer .repitem:nth-child(2n+1),
|
|
.sheet-punch-wrapper .repcontainer .repitem:nth-child(2n+1) {
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.sheet-drives-wrapper .repcontainer .repitem .sheet-repeated-item-wrapper,
|
|
.sheet-moves-wrapper .repcontainer .repitem .sheet-repeated-item-wrapper,
|
|
.sheet-mob-wrapper .repcontainer .repitem .sheet-repeated-item-wrapper,
|
|
.sheet-punch-wrapper .repcontainer .repitem .sheet-repeated-item-wrapper {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
/* ROLL TEMPLATE */
|
|
|
|
.sheet-rolltemplate-wip {
|
|
width: 100%;
|
|
padding: 1em;
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Worlds%20in%20Peril/Worlds%20in%20Peril%20background%20rolls.jpg');
|
|
background-size: cover;
|
|
border: 4px solid #000;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
}
|
|
|
|
.sheet-rolltemplate-wip table {
|
|
width: 100%;
|
|
font-family: 'Candal', Helvetica, Arial, sans-serif;
|
|
border-spacing: 0;
|
|
margin-bottom: .5em;
|
|
}
|
|
|
|
.sheet-rolltemplate-wip table div,
|
|
.sheet-rolltemplate-wip table span {
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.sheet-rolltemplate-wip th {
|
|
color: #666;
|
|
padding-bottom: 1em;
|
|
line-height: 1.2;
|
|
font-size: 1.5em;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
}
|
|
|
|
.sheet-rolltemplate-wip th div.sheet-rt-character-name {
|
|
color: #121212;
|
|
}
|
|
|
|
.sheet-rolltemplate-wip th div.sheet-rt-roll-name {
|
|
color: #ff6c00;
|
|
}
|
|
|
|
.sheet-rolltemplate-wip th div.sheet-rt-roll-name span.sheet-rt-roll-mod {
|
|
color: #121212;
|
|
}
|
|
|
|
.sheet-rolltemplate-wip .sheet-result {
|
|
font-size: 2.5em;
|
|
padding: 0;
|
|
width: 20%;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-wip .inlinerollresult,
|
|
.sheet-rolltemplate-wip .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-wip .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-wip .inlinerollresult.importantroll {
|
|
background-color: transparent;
|
|
color: #000;
|
|
border: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-wip th span.sheet-rt-roll-effect-adv,
|
|
.sheet-rolltemplate-wip .sheet-success .inlinerollresult,
|
|
.sheet-rolltemplate-wip .sheet-success .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-wip .sheet-success .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-wip .sheet-success .inlinerollresult.importantroll {
|
|
background-color: transparent;
|
|
color: #3fb315;
|
|
border: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-wip th span.sheet-rt-roll-effect-dis,
|
|
.sheet-rolltemplate-wip .sheet-failure .inlinerollresult,
|
|
.sheet-rolltemplate-wip .sheet-failure .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-wip .sheet-failure .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-wip .sheet-failure .inlinerollresult.importantroll {
|
|
background-color: transparent;
|
|
color: #b31515;
|
|
border: none;
|
|
} |