mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
916 lines
26 KiB
CSS
916 lines
26 KiB
CSS
/* COLORS
|
|
============================= */
|
|
.repcontrol {
|
|
display: inline-grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
margin: 1%;
|
|
width: 98%; }
|
|
.repcontrol .btn {
|
|
color: transparent !important;
|
|
float: unset;
|
|
padding: 0px;
|
|
text-shadow: none;
|
|
width: 2.5em; }
|
|
.repcontrol .repcontrol_add {
|
|
position: relative; }
|
|
.repcontrol .repcontrol_edit:after,
|
|
.repcontrol .repcontrol_add:after {
|
|
background: transparent;
|
|
color: #004242;
|
|
font-family: pictos;
|
|
font-size: 1.5em;
|
|
position: relative;
|
|
width: 0.2em; }
|
|
.repcontrol .repcontrol_edit:after {
|
|
content: '(';
|
|
left: -100%; }
|
|
.repcontrol .repcontrol_add:after {
|
|
content: '&';
|
|
left: -70%; }
|
|
.repcontrol .repcontrol_edit:hover,
|
|
.repcontrol .repcontrol_add:hover,
|
|
.repcontrol .repcontrol_edit:focus,
|
|
.repcontrol .repcontrol_add:focus {
|
|
background: #d9d9d9; }
|
|
.repcontrol .repcontrol_edit:hover:after,
|
|
.repcontrol .repcontrol_add:hover:after,
|
|
.repcontrol .repcontrol_edit:focus:after,
|
|
.repcontrol .repcontrol_add:focus:after {
|
|
color: #113232; }
|
|
|
|
.editmode ~ .repcontrol .repcontrol_edit:after {
|
|
content: ')'; }
|
|
|
|
.itemcontrol {
|
|
z-index: 10; }
|
|
.itemcontrol .repcontrol_del,
|
|
.itemcontrol .repcontrol_move {
|
|
font-size: 1em;
|
|
height: 2em;
|
|
padding: 0px;
|
|
width: 2em; }
|
|
.itemcontrol .repcontrol_del {
|
|
background-color: darkred;
|
|
font-family: pictos; }
|
|
.itemcontrol .repcontrol_del:before {
|
|
display: none; }
|
|
|
|
div.sheet-npc .repcontrol .repcontrol_add {
|
|
left: 90%; }
|
|
|
|
/* SWITCHES
|
|
============================= */
|
|
/* GLOBAL SETTINGS
|
|
============================= */
|
|
* {
|
|
box-sizing: border-box;
|
|
font-family: sans-serif; }
|
|
|
|
.charsheet {
|
|
min-width: 850px;
|
|
background-size: cover; }
|
|
.charsheet h1, .charsheet h2, .charsheet h3 {
|
|
color: whitesmoke; }
|
|
.charsheet h1 {
|
|
font-size: 1.5em; }
|
|
.charsheet h2 {
|
|
font-size: 1.1em;
|
|
line-height: 1em;
|
|
padding-top: 10%; }
|
|
.charsheet h3 {
|
|
font-size: 1em; }
|
|
.charsheet input[type=text],
|
|
.charsheet input[type=number] {
|
|
border: 3px solid #004242;
|
|
height: 2em;
|
|
width: 100%;
|
|
border-radius: 6px;
|
|
font-style: bold;
|
|
font-size: 1.2em; }
|
|
.charsheet input[type=text]::placeholder,
|
|
.charsheet input[type=number]::placeholder {
|
|
color: #000; }
|
|
.charsheet input[type=text] {
|
|
text-align: left; }
|
|
.charsheet input[type=number][type=number]::-webkit-inner-spin-button, .charsheet input[type=number][type=number]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
margin: 0; }
|
|
.charsheet input[type=number][type="number"]:disabled {
|
|
background: #000;
|
|
color: whitesmoke; }
|
|
.charsheet label {
|
|
width: 100%; }
|
|
.charsheet select {
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
background: whitesmoke;
|
|
border: 3px solid #004242;
|
|
color: #000;
|
|
height: 2.2em;
|
|
line-height: 1em;
|
|
margin: 0px;
|
|
padding: 0% 0% 0% 5%;
|
|
width: 100%; }
|
|
.charsheet select optgroup {
|
|
font-weight: bold; }
|
|
.charsheet select option {
|
|
text-align: center; }
|
|
.charsheet textarea::placeholder {
|
|
color: #000; }
|
|
|
|
/* SWITCHES
|
|
============================= */
|
|
/* The switch - the box around the slider */
|
|
.sheet-switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 50px;
|
|
height: 24px; }
|
|
|
|
/* Hide default HTML checkbox */
|
|
.sheet-switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0; }
|
|
|
|
/* The slider */
|
|
.sheet-slider {
|
|
-webkit-transition: .4s;
|
|
background-color: #4d4d4d;
|
|
border-radius: 34px;
|
|
bottom: 0;
|
|
cursor: pointer;
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
transition: .4s; }
|
|
|
|
.sheet-slider:before {
|
|
-webkit-transition: .4s;
|
|
background-color: whitesmoke;
|
|
border-radius: 50%;
|
|
bottom: 4px;
|
|
content: "";
|
|
height: 16px;
|
|
left: 4px;
|
|
position: absolute;
|
|
transition: .4s;
|
|
width: 16px; }
|
|
|
|
input:checked + .sheet-slider {
|
|
background-color: #004242; }
|
|
|
|
input:focus + .sheet-slider {
|
|
box-shadow: 0 0 1px #004242; }
|
|
|
|
input:checked + .sheet-slider:before {
|
|
-webkit-transform: translateX(26px);
|
|
-ms-transform: translateX(26px);
|
|
transform: translateX(26px); }
|
|
|
|
/* GRID
|
|
============================= */
|
|
div.sheet-grid {
|
|
display: inline-grid;
|
|
grid-column-gap: 1%; }
|
|
|
|
/* GENERIC STYLES
|
|
============================= */
|
|
.sheet-border-bottom {
|
|
border-bottom: 0.15em solid #004242; }
|
|
|
|
.sheet-center {
|
|
text-align: center; }
|
|
|
|
.sheet-background-color {
|
|
background-color: rgba(1, 1, 1, 0.71); }
|
|
|
|
.sheet-dashed {
|
|
border: 3px dashed rgba(1, 1, 1, 0.71); }
|
|
|
|
/* PC
|
|
============================= */
|
|
div.sheet-pc {
|
|
background-color: rgba(1, 1, 1, 0.71);
|
|
grid-column-gap: 0.1%;
|
|
grid-row-gap: 1%;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: auto;
|
|
padding-bottom: 10%;
|
|
width: 100%;
|
|
/* CHARACTER INFO
|
|
----------------------------- */
|
|
/* CHARACTER QUOTE
|
|
----------------------------- */
|
|
/* CHARACTER SHAOOW
|
|
----------------------------- */
|
|
/* TABS
|
|
----------------------------- */
|
|
/* TOUGHNESS & CORRUPTION SHARED STYLES
|
|
----------------------------- */
|
|
/* TOUGHNESS
|
|
----------------------------- */
|
|
/* CORRUPTION
|
|
----------------------------- */
|
|
/* ATTRIBUTES
|
|
----------------------------- */
|
|
/* ATTACKS & DEFENSE SHARED STYLES
|
|
----------------------------- */
|
|
/* ATTACKS
|
|
----------------------------- */
|
|
/* DEFENSE
|
|
----------------------------- */
|
|
/* TRAITS & ABILITIES
|
|
----------------------------- */
|
|
/* TRAITS
|
|
----------------------------- */
|
|
/* ABILITIES
|
|
----------------------------- */ }
|
|
div.sheet-pc div.sheet-character-info {
|
|
grid-template-columns: 22em 2fr 3fr 2fr 1fr 1fr;
|
|
grid-area: 1 / 1 / 1 / 3; }
|
|
div.sheet-pc div.sheet-character-info label {
|
|
grid-row: 1; }
|
|
div.sheet-pc div.sheet-character-info span {
|
|
grid-row: 2; }
|
|
div.sheet-pc div.sheet-character-quote {
|
|
grid-template-columns: 1fr 90% 1fr;
|
|
grid-column: 1 / 2; }
|
|
div.sheet-pc div.sheet-character-quote input[type="text"] {
|
|
font-style: italic; }
|
|
div.sheet-pc div.sheet-character-quote label {
|
|
grid-column: 2 / 3;
|
|
font-style: italic; }
|
|
div.sheet-pc div.sheet-character-quote span.sheet-quote {
|
|
transform: rotate(180deg);
|
|
position: relative;
|
|
font-size: 3em; }
|
|
div.sheet-pc div.sheet-character-quote span.sheet-quote:nth-of-type(1) {
|
|
transform: rotate(360deg);
|
|
top: -20%; }
|
|
div.sheet-pc div.sheet-character-quote span.sheet-quote:nth-of-type(2) {
|
|
transform: rotate(180deg);
|
|
top: -20%; }
|
|
div.sheet-pc div.sheet-character-shadow {
|
|
grid-column: 2 / 3; }
|
|
div.sheet-pc div.sheet-tabs {
|
|
grid-column: 1 / 4;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
border-bottom: 5px solid #000; }
|
|
div.sheet-pc div.sheet-tabs input.sheet-tab:nth-of-type(1),
|
|
div.sheet-pc div.sheet-tabs span.sheet-tab:nth-of-type(1) {
|
|
grid-row: 1;
|
|
grid-column: 1 / 1; }
|
|
div.sheet-pc div.sheet-tabs input.sheet-tab:nth-of-type(2),
|
|
div.sheet-pc div.sheet-tabs span.sheet-tab:nth-of-type(2) {
|
|
grid-row: 1;
|
|
grid-column: 2 / 2; }
|
|
div.sheet-pc div.sheet-tabs input.sheet-tab:nth-of-type(3),
|
|
div.sheet-pc div.sheet-tabs span.sheet-tab:nth-of-type(3) {
|
|
grid-row: 1;
|
|
grid-column: 3 / 3; }
|
|
div.sheet-pc div.sheet-tabs input.sheet-tab:nth-of-type(4),
|
|
div.sheet-pc div.sheet-tabs span.sheet-tab:nth-of-type(4) {
|
|
grid-row: 1;
|
|
grid-column: 4 / 4; }
|
|
div.sheet-pc div.sheet-tough-corr-row {
|
|
margin: 0px 20%; }
|
|
div.sheet-pc div.sheet-tough-corr-row label {
|
|
grid-row: 2; }
|
|
div.sheet-pc div.sheet-tough-corr-row span {
|
|
grid-row: 3; }
|
|
div.sheet-pc div.sheet-toughness {
|
|
grid-column: 1 / 2;
|
|
grid-template-columns: 1fr 1fr 1fr; }
|
|
div.sheet-pc div.sheet-toughness h1 {
|
|
grid-area: 1 / 1 / 1 / 4; }
|
|
div.sheet-pc div.sheet-corruption {
|
|
grid-column: 2 / 3;
|
|
grid-template-columns: 5em 1fr 1fr 1fr; }
|
|
div.sheet-pc div.sheet-corruption button[type="roll"] {
|
|
grid-row: 2;
|
|
background-image: url(http://i.imgur.com/MC61Qmt.png?1);
|
|
background-position: center;
|
|
height: 1.5em; }
|
|
div.sheet-pc div.sheet-corruption button[type="roll"]:before {
|
|
display: none; }
|
|
div.sheet-pc div.sheet-corruption h1 {
|
|
grid-area: 1 / 1 / 1 / 5; }
|
|
div.sheet-pc div.sheet-corruption select {
|
|
grid-row: 3; }
|
|
div.sheet-pc div.sheet-attributes {
|
|
grid-column: 1 / 3;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
|
margin-bottom: 2%; }
|
|
div.sheet-pc div.sheet-attributes input[type="number"] {
|
|
background: whitesmoke;
|
|
border-radius: 3em;
|
|
border: 3px solid #004242;
|
|
color: #000;
|
|
font-size: 1.5em;
|
|
height: 3em;
|
|
text-align: center;
|
|
width: 3em;
|
|
grid-row: 1;
|
|
margin-left: 15%;
|
|
padding: 0 .5em; }
|
|
div.sheet-pc div.sheet-attributes button {
|
|
background: rgba(16, 32, 48, 0.78);
|
|
grid-row: 2;
|
|
height: 1.5em;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
font-size: 1.3em;
|
|
border-bottom: 2px solid #113232;
|
|
border-right: 2px solid #113232;
|
|
color: whitesmoke;
|
|
text-shadow: 1px 1px 2px #004242, 0 0 25px #113232, 0 0 5px #113232; }
|
|
div.sheet-pc div.sheet-attributes button:before {
|
|
display: none; }
|
|
div.sheet-pc div.sheet-attributes button span {
|
|
box-shadow: 3px 3px 2px #4d4d4d inset, -3px -3px 1px #113232 inset;
|
|
padding: .5em 0; }
|
|
div.sheet-pc div.sheet-attacks,
|
|
div.sheet-pc div.sheet-defense {
|
|
grid-column: 1 / 3; }
|
|
div.sheet-pc div.sheet-attacks button[type="roll"],
|
|
div.sheet-pc div.sheet-defense button[type="roll"] {
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
height: 100%;
|
|
width: 100%; }
|
|
div.sheet-pc div.sheet-attacks button[type="roll"]:before,
|
|
div.sheet-pc div.sheet-defense button[type="roll"]:before {
|
|
display: none; }
|
|
div.sheet-pc div.sheet-attacks div.sheet-section-header h1,
|
|
div.sheet-pc div.sheet-defense div.sheet-section-header h1 {
|
|
grid-row: 1; }
|
|
div.sheet-pc div.sheet-attacks div.sheet-section-header h2,
|
|
div.sheet-pc div.sheet-defense div.sheet-section-header h2 {
|
|
grid-row: 1;
|
|
border-top-left-radius: 3em;
|
|
border-top-right-radius: 3em; }
|
|
div.sheet-pc div.sheet-attacks div.sheet-section-header h3,
|
|
div.sheet-pc div.sheet-defense div.sheet-section-header h3 {
|
|
grid-row: 3; }
|
|
div.sheet-pc div.sheet-attacks h1 {
|
|
grid-column: 1 / 6; }
|
|
div.sheet-pc div.sheet-attacks h2 {
|
|
grid-column: 6 / 9; }
|
|
div.sheet-pc div.sheet-attacks button[type="roll"] {
|
|
background-image: url(http://i.imgur.com/EPH4536.png); }
|
|
div.sheet-pc div.sheet-attacks div.sheet-section-header,
|
|
div.sheet-pc div.sheet-attacks div.sheet-section-body {
|
|
grid-template-columns: 2.5em 15em 8em 5em 1fr 5em 5em 5em;
|
|
width: 100%; }
|
|
div.sheet-pc div.sheet-defense h1 {
|
|
grid-column: 1 / 7; }
|
|
div.sheet-pc div.sheet-defense h2 {
|
|
grid-column: 7 / 10; }
|
|
div.sheet-pc div.sheet-defense button[type="roll"] {
|
|
background-image: url(http://i.imgur.com/QFy0qCe.png?); }
|
|
div.sheet-pc div.sheet-defense div.sheet-section-header,
|
|
div.sheet-pc div.sheet-defense div.sheet-section-body {
|
|
grid-template-columns: 2.5em 15em 4em 8em 5em 1fr 4em 5em 5em;
|
|
width: 100%; }
|
|
div.sheet-pc div.sheet-section-pc2 {
|
|
grid-column: 1 / 3; }
|
|
div.sheet-pc div.sheet-section-pc2 div.sheet-left-side,
|
|
div.sheet-pc div.sheet-section-pc2 div.sheet-right-side {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: 48%; }
|
|
div.sheet-pc div.sheet-section-pc2 div.sheet-left-side {
|
|
margin-right: 2%; }
|
|
div.sheet-pc div.sheet-traits,
|
|
div.sheet-pc div.sheet-abilities {
|
|
margin: 0px 5%;
|
|
grid-template-rows: min-content;
|
|
width: 100%; }
|
|
div.sheet-pc div.sheet-traits button[type=roll],
|
|
div.sheet-pc div.sheet-abilities button[type=roll] {
|
|
color: #000; }
|
|
div.sheet-pc div.sheet-traits button[type=roll]:before,
|
|
div.sheet-pc div.sheet-abilities button[type=roll]:before {
|
|
display: block; }
|
|
div.sheet-pc div.sheet-traits h1,
|
|
div.sheet-pc div.sheet-abilities h1 {
|
|
grid-area: 1 / 1 / 1 / 4; }
|
|
div.sheet-pc div.sheet-traits label.sheet-long,
|
|
div.sheet-pc div.sheet-abilities label.sheet-long {
|
|
grid-column: 2 / 7; }
|
|
div.sheet-pc div.sheet-traits select[name*="attribute"],
|
|
div.sheet-pc div.sheet-abilities select[name*="attribute"] {
|
|
grid-column: 1 / 3; }
|
|
div.sheet-pc div.sheet-traits input[type="text"][name*="type"],
|
|
div.sheet-pc div.sheet-abilities input[type="text"][name*="type"] {
|
|
grid-column: 3 / 5; }
|
|
div.sheet-pc div.sheet-traits textarea,
|
|
div.sheet-pc div.sheet-abilities textarea {
|
|
grid-column: 1 / 7; }
|
|
div.sheet-pc div.sheet-traits div.sheet-section-body,
|
|
div.sheet-pc div.sheet-abilities div.sheet-section-body {
|
|
margin-bottom: 2%; }
|
|
div.sheet-pc div.sheet-traits div.sheet-section-header,
|
|
div.sheet-pc div.sheet-abilities div.sheet-section-header {
|
|
max-height: 2.5em; }
|
|
div.sheet-pc div.sheet-traits div.sheet-section-header,
|
|
div.sheet-pc div.sheet-traits div.sheet-section-body,
|
|
div.sheet-pc div.sheet-abilities div.sheet-section-header,
|
|
div.sheet-pc div.sheet-abilities div.sheet-section-body {
|
|
grid-template-columns: 2.5em 1fr 1fr 1fr 1fr 1fr;
|
|
width: 98%; }
|
|
div.sheet-pc div.sheet-boon,
|
|
div.sheet-pc div.sheet-burdens {
|
|
margin: 0px 5%;
|
|
grid-template-rows: min-content;
|
|
width: 100%; }
|
|
div.sheet-pc div.sheet-boon div.sheet-section-header,
|
|
div.sheet-pc div.sheet-boon div.sheet-section-body,
|
|
div.sheet-pc div.sheet-burdens div.sheet-section-header,
|
|
div.sheet-pc div.sheet-burdens div.sheet-section-body {
|
|
grid-template-columns: 1fr 1fr 1fr 1fr; }
|
|
div.sheet-pc div.sheet-boon div.sheet-section-header label:nth-of-type(1),
|
|
div.sheet-pc div.sheet-boon div.sheet-section-body label:nth-of-type(1),
|
|
div.sheet-pc div.sheet-burdens div.sheet-section-header label:nth-of-type(1),
|
|
div.sheet-pc div.sheet-burdens div.sheet-section-body label:nth-of-type(1) {
|
|
grid-row: 1;
|
|
grid-column: 1 / 5; }
|
|
div.sheet-pc div.sheet-boon textarea,
|
|
div.sheet-pc div.sheet-burdens textarea {
|
|
grid-column: 1 / 5; }
|
|
div.sheet-pc div.sheet-traits,
|
|
div.sheet-pc div.sheet-boon {
|
|
grid-column: 1 / 2; }
|
|
div.sheet-pc div.sheet-abilities,
|
|
div.sheet-pc div.sheet-burdens {
|
|
grid-column: 2 / 3; }
|
|
div.sheet-pc div.sheet-section-pc3,
|
|
div.sheet-pc div.sheet-section-pc4 {
|
|
grid-column: 1 / 3; }
|
|
div.sheet-pc div.sheet-section-pc3 select {
|
|
width: 15%; }
|
|
|
|
/* OLD CSS
|
|
============================= */
|
|
/*** Background ***/
|
|
.sheet-col-small {
|
|
text-align: center;
|
|
min-width: 5em; }
|
|
|
|
.sheet-col-medium {
|
|
text-align: center;
|
|
min-width: 6em; }
|
|
|
|
.sheet-row > div {
|
|
display: inline-block; }
|
|
|
|
.sheet-row {
|
|
padding: 0 30px 10px 30px; }
|
|
|
|
.sheet-2colrow > .sheet-col {
|
|
margin: 10px !important; }
|
|
|
|
/*** Font ***/
|
|
::-webkit-input-placeholder {
|
|
/* WebKit, Blink, Edge */
|
|
color: #fafafa;
|
|
background-color: transparent; }
|
|
|
|
:-moz-placeholder {
|
|
/* Mozilla Firefox 4 to 18 */
|
|
color: #fafafa;
|
|
opacity: 1; }
|
|
|
|
::-moz-placeholder {
|
|
/* Mozilla Firefox 19+ */
|
|
color: #fafafa;
|
|
opacity: 1; }
|
|
|
|
:-ms-input-placeholder {
|
|
/* Internet Explorer 10-11 */
|
|
color: #fafafa; }
|
|
|
|
/*** Pages ***/
|
|
.sheet-row div[class^="repcontrol"] {
|
|
padding: 1em; }
|
|
|
|
input.sheet-tab {
|
|
width: 100%;
|
|
height: 23px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
opacity: 0;
|
|
z-index: 9999;
|
|
vertical-align: top; }
|
|
|
|
span.sheet-tab {
|
|
text-align: center;
|
|
display: inline-block;
|
|
padding-left: 3px;
|
|
padding-right: 3px;
|
|
height: 23px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
margin-top: 0px;
|
|
color: #FAFAFA;
|
|
border-radius: 5px 5px 0px 0px;
|
|
font-size: 12px;
|
|
box-shadow: 2px 2px 5px #FAFAFA inset,-2px -2px 5px #202020 inset;
|
|
vertical-align: top;
|
|
background-color: #303030; }
|
|
|
|
input.sheet-tab::before {
|
|
display: inline-block;
|
|
margin-top: -30px;
|
|
content: attr(title);
|
|
text-align: center;
|
|
width: 100%;
|
|
height: 100%; }
|
|
|
|
input.sheet-tab:checked::before {
|
|
background: #4E686A;
|
|
color: blue; }
|
|
|
|
/* Next section makes a page visible when the tab is clicked */
|
|
div.sheet-section-pc1,
|
|
div.sheet-section-pc2,
|
|
div.sheet-section-pc3,
|
|
div.sheet-section-pc4 {
|
|
display: none; }
|
|
|
|
input.sheet-tab[value="1"] ~ div.sheet-pc div.sheet-section-pc1 {
|
|
display: inline-grid; }
|
|
|
|
input.sheet-tab[value="1"] ~ div.sheet-pc div.sheet-section-pc2,
|
|
input.sheet-tab[value="2"] ~ div.sheet-pc div.sheet-section-pc2,
|
|
input.sheet-tab[value="3"] ~ div.sheet-pc div.sheet-section-pc3,
|
|
input.sheet-tab[value="4"] ~ div.sheet-pc div.sheet-section-pc4 {
|
|
display: inline-block; }
|
|
|
|
input.sheet-tab:checked + span.sheet-tab {
|
|
box-shadow: -2px -2px 5px #FAFAFA inset, 2px 2px 5px #202020 inset;
|
|
opacity: 1; }
|
|
|
|
label {
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: left;
|
|
font-size: 1em;
|
|
font-weight: normal;
|
|
color: #D8D8D8; }
|
|
|
|
input[type=radio] {
|
|
margin: 0 5px 0 5px; }
|
|
|
|
input[type=number] {
|
|
-moz-appearance: textfield; }
|
|
|
|
input[type="number"].sheet-number-box-small {
|
|
border: 3px solid #004040;
|
|
padding: 0 0 0 3px;
|
|
width: 3.1em;
|
|
height: 2em;
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
border-radius: 6px; }
|
|
|
|
.sheet-roll {
|
|
width: 25px;
|
|
height: 25px;
|
|
border: 2px solid #004040;
|
|
border-radius: 6px; }
|
|
|
|
input[type="checkbox"] {
|
|
border: 3px solid #004040;
|
|
color: #000000;
|
|
background: #FBFCFC;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
box-shadow: 1px 1px 2px #000101, -1px -1px 2px #000101,1px -1px 2px #000101, -1px 1px 2px #000101; }
|
|
|
|
textarea {
|
|
padding: 3px;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
resize: vertical;
|
|
overflow: hidden;
|
|
display: block;
|
|
text-align: left;
|
|
border: 3px solid #004040;
|
|
color: #000000;
|
|
background: #FBFCFC;
|
|
border-radius: 6px;
|
|
height: 6.3em;
|
|
width: 100%; }
|
|
|
|
input[name^="attr_friend"] {
|
|
width: 48%; }
|
|
|
|
.sheet-table fieldset,
|
|
.sheet-table {
|
|
display: table;
|
|
text-align: center; }
|
|
|
|
.sheet-table > fieldset,
|
|
.sheet-table > div {
|
|
display: table-row;
|
|
width: 75px; }
|
|
|
|
.sheet-table fieldset > div,
|
|
.sheet-table > div > div {
|
|
display: table-cell;
|
|
vertical-align: bottom; }
|
|
|
|
.sheet-table label {
|
|
text-align: center; }
|
|
|
|
/*** Buttons ***/
|
|
/*** Roll Templates ***/
|
|
.sheet-rolltemplate-defense,
|
|
.sheet-rolltemplate-attack, .sheet-rolltemplate-attrib {
|
|
padding: 1px; }
|
|
|
|
.sheet-rolltemplate-attack table {
|
|
font-family: "Georgia";
|
|
background-color: #a0a0a0;
|
|
background: url(http://www.designbolts.com/wp-content/uploads/2013/02/Rough-Grey-Tilable-Pattern-For-Website-Background.jpg) top left repeat;
|
|
width: 100%;
|
|
border: 3px solid #7f0000; }
|
|
|
|
.sheet-rolltemplate-attack th {
|
|
border-top: 3px solid #7f0000;
|
|
background-color: #ffffff;
|
|
background: url(https://www.toptal.com/designers/subtlepatterns/patterns/concrete_seamless.png) top left repeat;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: #7f0000; }
|
|
|
|
.sheet-rolltemplate-attack td {
|
|
padding: 3px; }
|
|
|
|
.sheet-rolltemplate-attack .sheet-attkhead {
|
|
border-bottom: 3px solid #7f0000; }
|
|
|
|
.sheet-rolltemplate-attack .sheet-attkcat {
|
|
text-align: right;
|
|
width: 50%; }
|
|
|
|
.sheet-rolltemplate-attack .sheet-attkresult {
|
|
font-weight: bold;
|
|
text-align: left;
|
|
width: 50%;
|
|
padding-left: 5px; }
|
|
|
|
.sheet-rolltemplate-attack .sheet-attkhit {
|
|
color: #007f00; }
|
|
|
|
.sheet-rolltemplate-attack .sheet-attkmiss {
|
|
color: #7f0000; }
|
|
|
|
.sheet-rolltemplate-attack .sheet-effex {
|
|
background-color: #ffffff;
|
|
background: url(https://www.toptal.com/designers/subtlepatterns/patterns/concrete_seamless.png) top left repeat;
|
|
text-align: center;
|
|
/* border-top:3px solid #7f0000; */ }
|
|
|
|
.sheet-rolltemplate-defense table {
|
|
font-family: "Georgia";
|
|
background-color: #a0a0a0;
|
|
background: url(http://www.designbolts.com/wp-content/uploads/2013/02/Rough-Grey-Tilable-Pattern-For-Website-Background.jpg) top left repeat;
|
|
width: 100%;
|
|
border: 3px solid #00007f; }
|
|
|
|
.sheet-rolltemplate-defense th {
|
|
border-top: 3px solid #00007f;
|
|
background-color: #ffffff;
|
|
background: url(https://www.toptal.com/designers/subtlepatterns/patterns/concrete_seamless.png) top left repeat;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: #00007f; }
|
|
|
|
.sheet-rolltemplate-defense td {
|
|
padding: 3px; }
|
|
|
|
.sheet-rolltemplate-defense .sheet-defhead {
|
|
border-bottom: 3px solid #00007f; }
|
|
|
|
.sheet-rolltemplate-defense .sheet-defcat {
|
|
text-align: right;
|
|
width: 50%; }
|
|
|
|
.sheet-rolltemplate-defense .sheet-defresult {
|
|
font-weight: bold;
|
|
text-align: left;
|
|
width: 50%;
|
|
padding-left: 5px; }
|
|
|
|
.sheet-rolltemplate-defense .sheet-defhit {
|
|
color: #7f0000; }
|
|
|
|
.sheet-rolltemplate-defense .sheet-defmiss {
|
|
color: #007f00; }
|
|
|
|
.sheet-rolltemplate-defense .sheet-effex {
|
|
background-color: #ffffff;
|
|
background: url(https://www.toptal.com/designers/subtlepatterns/patterns/concrete_seamless.png) top left repeat;
|
|
text-align: center;
|
|
/* border-top:3px solid #00007f; */ }
|
|
|
|
.sheet-rolltemplate-attrib table {
|
|
font-family: "Georgia";
|
|
background-color: #a0a0a0;
|
|
background: url(http://www.designbolts.com/wp-content/uploads/2013/02/Rough-Grey-Tilable-Pattern-For-Website-Background.jpg) top left repeat;
|
|
width: 100%;
|
|
border: 3px solid #007f00; }
|
|
|
|
.sheet-rolltemplate-attrib th {
|
|
border-top: 3px solid #007f00;
|
|
border-bottom: 3px solid #007f00;
|
|
background-color: #ffffff;
|
|
background: url(https://www.toptal.com/designers/subtlepatterns/patterns/concrete_seamless.png) top left repeat;
|
|
text-align: center;
|
|
color: #007f00; }
|
|
|
|
.sheet-rolltemplate-attrib td {
|
|
padding: 3px; }
|
|
|
|
.sheet-rolltemplate-attrib .sheet-attribcat {
|
|
text-align: right;
|
|
width: 50%; }
|
|
|
|
.sheet-rolltemplate-attrib .sheet-attribresult {
|
|
font-weight: bold;
|
|
text-align: left;
|
|
width: 50%;
|
|
padding-left: 5px; }
|
|
|
|
.sheet-rolltemplate-attrib .sheet-attribhit {
|
|
color: #007f00;
|
|
font-weight: bold; }
|
|
|
|
.sheet-rolltemplate-attrib .sheet-attribmiss {
|
|
color: #7f0000;
|
|
font-weight: bold; }
|
|
|
|
.sheet-rolltemplate-attrib .sheet-effex {
|
|
background-color: #ffffff;
|
|
background: url(https://www.toptal.com/designers/subtlepatterns/patterns/concrete_seamless.png) top left repeat;
|
|
text-align: center;
|
|
border-top: 3px solid #007f00; }
|
|
|
|
.sheet-rolltemplate-abilitycheck table {
|
|
font-family: "Georgia";
|
|
background-color: #a0a0a0;
|
|
background: url(http://www.designbolts.com/wp-content/uploads/2013/02/Rough-Grey-Tilable-Pattern-For-Website-Background.jpg) top left repeat;
|
|
width: 100%;
|
|
border: 3px solid #cc6600; }
|
|
|
|
.sheet-rolltemplate-abilitycheck th {
|
|
border-top: 3px solid #cc6600;
|
|
border-bottom: 3px solid #cc6600;
|
|
background-color: #ffffff;
|
|
background: url(https://www.toptal.com/designers/subtlepatterns/patterns/concrete_seamless.png) top left repeat;
|
|
text-align: center;
|
|
color: #cc6600; }
|
|
|
|
.sheet-rolltemplate-abilitycheck td {
|
|
padding: 3px; }
|
|
|
|
.sheet-rolltemplate-abilitycheck .sheet-attribcat {
|
|
text-align: right;
|
|
width: 50%; }
|
|
|
|
.sheet-rolltemplate-abilitycheck .sheet-attribresult {
|
|
font-weight: bold;
|
|
text-align: left;
|
|
width: 50%;
|
|
padding-left: 5px; }
|
|
|
|
.sheet-rolltemplate-abilitycheck .sheet-attribhit {
|
|
color: #007f00;
|
|
font-weight: bold; }
|
|
|
|
.sheet-rolltemplate-abilitycheck .sheet-attribmiss {
|
|
color: #7f0000;
|
|
font-weight: bold; }
|
|
|
|
.sheet-rolltemplate-abilitycheck .sheet-effex {
|
|
background-color: #ffffff;
|
|
background: url(https://www.toptal.com/designers/subtlepatterns/patterns/concrete_seamless.png) top left repeat;
|
|
text-align: center;
|
|
border-top: 3px solid #cc6600; }
|
|
|
|
.sheet-rolltemplate-powercheck table {
|
|
font-family: "Georgia";
|
|
background-color: #a0a0a0;
|
|
background: url(http://www.designbolts.com/wp-content/uploads/2013/02/Rough-Grey-Tilable-Pattern-For-Website-Background.jpg) top left repeat;
|
|
width: 100%;
|
|
border: 3px solid #9900ff; }
|
|
|
|
.sheet-rolltemplate-powercheck th {
|
|
border-top: 3px solid #9900ff;
|
|
border-bottom: 3px solid #9900ff;
|
|
background-color: #ffffff;
|
|
background: url(https://www.toptal.com/designers/subtlepatterns/patterns/concrete_seamless.png) top left repeat;
|
|
text-align: center;
|
|
color: #9900ff; }
|
|
|
|
.sheet-rolltemplate-powercheck td {
|
|
padding: 3px; }
|
|
|
|
.sheet-rolltemplate-powercheck .sheet-attribcat {
|
|
text-align: right;
|
|
width: 50%; }
|
|
|
|
.sheet-rolltemplate-powercheck .sheet-attribresult {
|
|
font-weight: bold;
|
|
text-align: left;
|
|
width: 50%;
|
|
padding-left: 5px; }
|
|
|
|
.sheet-rolltemplate-powercheck .sheet-attribhit {
|
|
color: #007f00;
|
|
font-weight: bold; }
|
|
|
|
.sheet-rolltemplate-powercheck .sheet-attribmiss {
|
|
color: #7f0000;
|
|
font-weight: bold; }
|
|
|
|
.sheet-rolltemplate-powercheck .sheet-effex {
|
|
background-color: #ffffff;
|
|
background: url(https://www.toptal.com/designers/subtlepatterns/patterns/concrete_seamless.png) top left repeat;
|
|
text-align: center;
|
|
border-top: 3px solid #9900ff; }
|
|
|
|
.charsheet {
|
|
background-color: #000303;
|
|
background-image: url("http://i.imgur.com/XOomnMY.jpg?1");
|
|
background-repeat: no-repeat;
|
|
background-position: 0px 33px;
|
|
text-shadow: 1px 1px 2px #000101, -1px -1px 2px #000101,1px -1px 2px #000101, -1px 1px 2px #000101, 1px 1px 12px #000101, -1px -1px 12px #000101,1px -1px 12px #000101, -1px 1px 12px #000101;
|
|
color: #FAFAFA; }
|
|
|
|
/*** Misc***/
|
|
[class^="sheet-faded"] {
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
display: inline;
|
|
border-radius: 1em 1em 0 0; }
|
|
|
|
.sheet-faded-nam {
|
|
vertical-align: middle;
|
|
width: 76px;
|
|
padding: 4px; }
|
|
|
|
.sheet-faded-nam > div {
|
|
display: inline-block;
|
|
width: 32%; }
|
|
|
|
.sheet-faded-text {
|
|
vertical-align: middle;
|
|
padding: 4px; }
|
|
|
|
.sheet-label-row div,
|
|
.sheet-label-row label {
|
|
display: inline-block; }
|
|
|
|
.sheet-label-row div > span {
|
|
margin-right: 6px; }
|
|
|
|
.sheet-label-large {
|
|
padding: 0;
|
|
font-size: 1.5em;
|
|
margin: 0px 0px .5em 0px; }
|
|
|
|
.sheet-row-with-labels div {
|
|
display: inline-block;
|
|
vertical-align: bottom; }
|
|
|
|
.sheet-row-with-labels label {
|
|
text-align: center; }
|
|
|
|
.sheet-ability-section {
|
|
width: 360px;
|
|
display: inline-block;
|
|
padding: 4px 4px 0 4px; }
|
|
|
|
.sheet-attributes {
|
|
display: inline-block;
|
|
width: 100%;
|
|
vertical-align: top;
|
|
height: 80px;
|
|
border-radius: 6px;
|
|
text-align: center; }
|
|
|
|
.sheet-attributes > div {
|
|
display: inline-block;
|
|
padding-bottom: 5px;
|
|
font-size: 16px;
|
|
width: 10.5%; }
|
|
|
|
.charsheet * {
|
|
box-sizing: border-box;
|
|
font-family: "Georgia"; }
|