Files
roll20-character-sheets/DCC/DCC.css
T
2014-05-09 16:30:25 -04:00

472 lines
11 KiB
CSS
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* CSS Reset */{}
.charsheet .sheet-wrapper div, .charsheet .sheet-wrapper span, .charsheet .sheet-wrapper label,
.charsheet .sheet-wrapper h1, .charsheet .sheet-wrapper h2, .charsheet .sheet-wrapper h3, .charsheet .sheet-wrapper h4, .charsheet .sheet-wrapper h5, .charsheet .sheet-wrapper h6, .charsheet .sheet-wrapper p,
.charsheet .sheet-wrapper table, .charsheet .sheet-wrapper caption, .charsheet .sheet-wrapper tbody, .charsheet .sheet-wrapper tfoot, .charsheet .sheet-wrapper thead, .charsheet .sheet-wrapper tr, .charsheet .sheet-wrapper th, .charsheet .sheet-wrapper td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
color: #404040;
vertical-align: baseline;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
@font-face {
font-family: 'Corben';
font-style: normal;
font-weight: 700;
src: local('Corben'), url(http://themes.googleusercontent.com/static/fonts/corben/v6/ljkAb4w-83fUltRn9aENdbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
@font-face {
font-family: 'Corben Regular';
font-style: normal;
font-weight: 400;
src: local('Corben Regular'), local('Corben-Regular'), url(http://themes.googleusercontent.com/static/fonts/corben/v6/uWWoJk4JhWoRrYEm4mc4D-vvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
.charsheet .sheet-wrapper label {
font-family: 'Corben';
font-size: ;
}
.charsheet .sheet-wrapper label.sheet-logo {
height: 40px;
}
.charsheet .sheet-wrapper table {
border-collapse: collapse;
border-spacing: 0;
border: 2px solid #404040;
}
.charsheet .sheet-wrapper td, .charsheet .sheet-wrapper tr, .charsheet .sheet-wrapper tbody, .charsheet .sheet-wrapper thead {
border: 1px solid #404040;
padding: 5px;
}
.charsheet .sheet-wrapper input::-webkit-outer-spin-button,
.charsheet .sheet-wrapper input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.charsheet .sheet-wrapper textarea {
resize: none;
}
.charsheet .sheet-wrapper .sheet-combatbasics .sheet-row {
height: 26px;
}
.charsheet .sheet-wrapper .sheet-combatbasics .sheet-row input,  .charsheet .sheet-wrapper .sheet-combatbasics .sheet-row label, .charsheet .sheet-wrapper .sheet-combatbasics .sheet-row button {
height: 22px;
}
/* Main Styles */{}
.charsheet {
background-color: white;
}
.charsheet .sheet-wrapper h2 {
margin: 15px 0 2px;
font-weight:bold;
font-size: 15px;
font-family: 'Corben';
height: 18px;
}
.charsheet .sheet-wrapper input, .charsheet .sheet-wrapper textarea, .charsheet .sheet-wrapper select, .charsheet .sheet-wrapper input[type="number"] {
display: inline-block;
border: 1px solid #ccc;
padding: 2px;
height: 28px;
width: 100%;
font-size: 12px;
line-height: 16px;
font-weight: bold;
margin: 0;
color: #555;
background-color: white;
vertical-align: middle;
cursor: auto;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
text-align: start;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border linear .2s,box-shadow linear .2s;
-moz-transition: border linear .2s,box-shadow linear .2s;
-ms-transition: border linear .2s,box-shadow linear .2s;
-o-transition: border linear .2s,box-shadow linear .2s;
transition: border linear .2s,box-shadow linear .2s;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-writing-mode: horizontal-tb;
}
.charsheet .sheet-wrapper input[disabled], .charsheet .sheet-wrapper select[disabled], .charsheet .sheet-wrapper textarea[disabled], .charsheet .sheet-wrapper input[readonly], .charsheet .sheet-wrapper select[readonly], .charsheet .sheet-wrapper textarea[readonly] {
background-color: #f5f5f5;
border-color: #ddd;
cursor: not-allowed;
}
.charsheet .sheet-wrapper textarea.sheet-inventory {
width: 98%;
height: 170px;
font-size: 13px;
line-height: 16px;
}
.charsheet .sheet-wrapper .sheet-item input.sheet-square, .charsheet .sheet-wrapper .sheet-item button.sheet-square {
width: 28px;
}
.charsheet .sheet-wrapper label {
display: inline-block;
width: 100%;
font-size: 11px;
height: 28px;
line-height: 28px;
vertical-align: middle;
}
.charsheet .sheet-wrapper .sheet-3colrow .sheet-col {
width: calc(33% - 3px) !important;
margin-right: 2px !important;
}
.charsheet .sheet-wrapper .sheet-3colrow .sheet-col:last-child {
margin-right: 0 !important;
}
.charsheet .sheet-wrapper .sheet-2colrow .sheet-col {
width: calc(50% - 3px) !important;
margin-right: 2px !important;
}
.charsheet .sheet-wrapper .sheet-2colrow .sheet-col:last-child {
margin-right: 0 !important;
}
/* Row And Items */{}
.charsheet .sheet-wrapper .sheet-row {
height: 32px;
margin: 0 0 2px;
}
.charsheet .sheet-wrapper .sheet-alternative:nth-child(2n) {
background-color: #E3E3E3;
}
.charsheet .sheet-wrapper .sheet-header {
height: 20px;
margin: 0;
}
.charsheet .sheet-wrapper .sheet-header label {
padding: 0;
font-size: 9px;
height: 20px;
line-height: 20px;
font-weight: normal;
word-wrap:break-word;
font-family: 'Corben Regular';
}
.charsheet .sheet-wrapper .sheet-item {
display: inline-block;
width: 100%;
height: 34px;
vertical-align: middle;
margin: 0 -2px;
padding: 3px 2px;
}
.charsheet .sheet-wrapper .sheet-item.sheet-multiline label {
line-height: 9px;
padding-top: 1px;
}
.charsheet .sheet-wrapper .sheet-item.sheet-eensy {
width: calc(3% - 0.5%);
}
.charsheet .sheet-wrapper .sheet-item.sheet-tiny {
width: calc(12% - 3%);
}
.charsheet .sheet-wrapper .sheet-item.sheet-small {
width: calc(20% - 0.5%);
}
.charsheet .sheet-wrapper .sheet-item.sheet-med {
width: calc(25% - 0.5%);
}
.charsheet .sheet-wrapper .sheet-item.sheet-large {
width: calc(50% - 5%);
}
.charsheet .sheet-wrapper .sheet-item.sheet-huge {
width: calc(80% - 3%);
}
/* Base Info */{}
.sheet-baseinfo {
display: inline-block;
width: 145px;
margin-right: 3px;
}
.sheet-baseinfo.sheet-number {
width: 39px;
margin-right: 10px;
}
.sheet-baseinfo.sheet-short {
width: 60px;
}
.sheet-baseinfo.sheet-medium {
width: 100px;
}
/* Stat Blocks */{}
.charsheet .sheet-wrapper .sheet-statblock {
margin-bottom: 5px;
display: block;
visibility: visible;
-webkit-transition: .125s linear;
-moz-transition: .125s linear;
-ms-transition: .125s linear;
-o-transition: .125s linear;
transition: .125s linear;
}
.charsheet .sheet-wrapper .sheet-statblock:last-child {
margin-bottom: 0!important;
}
.charsheet .sheet-wrapper input[type=checkbox]:checked ~ label.sheet-headtwo {
background-color: #333;
}
.charsheet .sheet-wrapper input[type=checkbox]:checked ~ .sheet-statblock {
display: none;
visibility: hidden;
}
.charsheet .sheet-wrapper .sheet-hidden {
display: none;
visibility: hidden;
}
.charsheet .sheet-wrapper .sheet-center {
text-align: center;
}
.charsheet .sheet-wrapper .sheet-rowcol1 {
text-align: right;
}
.charsheet .sheet-wrapper input.sheet-AC, .charsheet .sheet-wrapper input.sheet-HP {
margin-top: 16px;
margin-bottom: 30px;
padding: 2px;
height: 48px;
width: 48px;
font-size: 36px;
line-height: 48px;
font-weight: bold;
vertical-align: middle;
text-align: center;
}
.charsheet .sheet-wrapper .sheet-ACBG {
background: url('http://i.imgur.com/6lUoOzW.png') no-repeat center top;
}
.charsheet .sheet-wrapper .sheet-HPBG {
background: url('http://i.imgur.com/37exssR.png') no-repeat center top;
}
.charsheet .sheet-wrapper .sheet-combatbasics {
border: 1px solid #ccc;
}
/* CSS tabs */
.charsheet .sheet-wrapper .sheet-tabs {
position: relative;
min-height: 200px; /* This part sucks */
clear: both;
margin: 25px 0;
}
.charsheet .sheet-wrapper .sheet-tab {
float: left;
}
.charsheet .sheet-wrapper .sheet-tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.charsheet .sheet-wrapper .sheet-tab [type=radio] {
display: none;
}
.charsheet .sheet-wrapper .sheet-tabcontent {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
}
.charsheet .sheet-wrapper .sheet-tab [type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
.charsheet .sheet-wrapper .sheet-tab [type=radio]:checked ~ label ~ .sheet-tabcontent {
z-index: 1;
}
/* Pure CSS Hide/Show - For settings */{}
.charsheet .sheet-wrapper .sheet-hider .sheet-article input[type=checkbox] ~ label {
display: inline-block;
font-size: 16px;
line-height: 16px;
font-weight: bold;
color: #555;
width: 100%;
border: 1px solid #CCC;
padding: 5px;
text-align: center;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border linear .2s,box-shadow linear .2s;
-moz-transition: border linear .2s,box-shadow linear .2s;
-ms-transition: border linear .2s,box-shadow linear .2s;
-o-transition: border linear .2s,box-shadow linear .2s;
transition: border linear .2s,box-shadow linear .2s;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.charsheet .sheet-wrapper .sheet-hider input[type=checkbox]:checked ~ label {
color: white;
background-color: #555;
border: 1px solid black;
}
.charsheet .sheet-wrapper .sheet-hider .sheet-article .sheet-section:last-of-type {
display: none;
visibility: hidden;
}
.charsheet .sheet-wrapper .sheet-hider .sheet-section {
-webkit-transition: .125s linear;
-moz-transition: .125s linear;
-ms-transition: .125s linear;
-o-transition: .125s linear;
transition: .125s linear;
}
.charsheet .sheet-wrapper .sheet-hider input[type=checkbox] {
display: none;
visibility: hidden;
}
.charsheet .sheet-wrapper .sheet-hider input[type=checkbox]:checked ~ .sheet-section {
display: block;
visibility: visible;
width: 100%;
}
/* Hidden Roll buttons */{}
.charsheet .sheet-wrapper button[type="roll"]:before {
content: ""!important;
display: none;
}
.charsheet .sheet-wrapper button[type="roll"] {
width: 100%;
height:28px;
vertical-align: middle;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 0;
}
.charsheet .sheet-wrapper button[type="roll"] label {
height:22px;
line-height: 22px;
font-size: 11px;
vertical-align: middle;
text-align:center;
width: 99%;
}
.charsheet .sheet-wrapper button[type="roll"].sheet-hidden-roll {
border: 0;
padding: 0;
margin: 0;
display: inline-block;
}
.charsheet .sheet-wrapper button[type="roll"].sheet-hidden-roll input {
background-color: #B6DCB6;
}