Files
roll20-character-sheets/DragonQuest/DQSheet.css
T
2016-04-08 00:19:07 +01:00

1037 lines
22 KiB
CSS

/* Enable the pictos font */
.sheet-pictos {
font-family: pictos;
}
/* Stop char sheet from getting squished up */
.sheet-charsheet {
min-width: 805px;
}
/* CSS for generic classes */
.sheet-header {
font-weight: bold;
display: block;
clear: both;
}
.sheet-2colsec {
display: -webkit-flex;
display: flex;
}
.sheet-colm {
width: 49.5%;
}
.sheet-colm:first-child {
margin-right: 1%;
}
.sheet-colm:last-child {
-webkit-flex: 1;
flex: 1;
}
.sheet-headers span {
font-weight: bold;
}
.sheet-headers, .sheet-summary {
display: -webkit-flex;
display: flex;
}
.sheet-headers span, .sheet-summary > span, .sheet-summary button[type="roll"].sheet-btn {
border: solid brown;
border-width: 0 0 1px 0;
line-height: 19px;
height: 20px;
}
.sheet-summary button[type="roll"].sheet-btn {
width: calc(100% - 17em);
border-radius: 0;
white-space: nowrap;
overflow: hidden;
}
.sheet-hidden {
display:none;
}
/* CSS for main DIVs */
.sheet-chardets, .sheet-chars, .sheet-weapons, .sheet-armours, .sheet-shields,
.sheet-possessions, .sheet-money, .sheet-colleges, .sheet-spells, .sheet-skills,
.sheet-special, .sheet-exp {
border: solid 1px black;
overflow: auto;
margin-bottom: 10px;
background-color: rgba(100,100,100,0.1);
border-radius: 9px;
padding: 10px;
}
.sheet-weapon, .sheet-armour, .sheet-shield, .sheet-spell, .sheet-initchars {
/* based on .sheet-* styles */
border: solid 1px black;
overflow: auto;
padding: 5px;
}
/* GENERAL DISPLAY SETTINGS */
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
overflow: auto;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 0 5px;
align-items: center;
}
li span, li button {
max-width: calc(100% - 3.5em);
}
button[type=roll].sheet-btn {
margin: 0;
padding: 0;
font-size: 1em;
border: 0;
background: none;
box-shadow: none;
color: inherit;
text-align: left;
}
button[type=roll]:hover {
color: green;
}
button::before {
font-size: 0.75em;
font-weight: bold;
padding: 0 2px;
}
input, span, select {
-webkit-align-self: center;
align-self: center;
margin: 0;
}
textarea {
resize: vertical;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Options flag functionality */
.sheet-options-flag, .sheet-expand-flag {
opacity: 0;
position: absolute;
width: 18px;
height: 18px;
z-index: 2;
}
.sheet-options-flag ~ span, .sheet-expand-flag ~ span {
position: absolute;
white-space: nowrap;
width: 18px;
height: 18px;
font-size: 20px;
font-family: pictos;
cursor: pointer;
margin-top: 0px;
}
.sheet-flag-unchecked, .sheet-expand {
display: block;
color: black;
}
.sheet-flag-checked, .sheet-shrink {
display: none;
}
.sheet-options-flag:checked ~ .sheet-flag-checked,
.sheet-expand-flag:checked ~ .sheet-shrink {
display: block;
color: green;
}
.sheet-options-flag:checked ~ .sheet-flag-unchecked,
.sheet-expand-flag:checked ~ .sheet-expand {
display: none;
}
/* Top row - 2 columns */
/* Column 1: Character details (chardets) */
/* Initchars options-flag settings */
.sheet-chardets .sheet-options-flag,
.sheet-chardets .sheet-options-flag ~ span:nth-of-type(-n+2) {
top: 10px;
right: 10px;
}
.sheet-chardets {
position: relative;
}
.sheet-chardets .sheet-initchars {
display: none;
}
.sheet-chardets .sheet-options-flag:checked ~ .sheet-initchars {
display: inherit;
}
/* Description (descrip) */
.sheet-descrip {
padding-bottom: 10px;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.sheet-descrip > span {
width: 100%;
text-align: center;
}
.sheet-descrip > div .sheet-pictos {
padding: 0 10px 0 0;
}
/* History summary (hsummary) */
/* Initial characterstics (initchars) */
.sheet-initchars {
margin-top: 5px;
}
.sheet-initchars ul {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.sheet-initchars li {
width: 100%;
margin: 0;
padding: 0 10px;
}
.sheet-initchars input {
max-width: calc(100% - 3.5em);
margin: 0;
}
/* RP notes (rpnotes) */
.sheet-rpnotes {
margin-top: 5px;
}
.sheet-rpnotes textarea {
width: 100%;
height: initial;
min-height: 10em;
max-width: 100%;
margin: 0;
}
/* Column 2: Characteristics (chars) */
.sheet-chars .sheet-colm {
width: 47%;
}
.sheet-chars .sheet-colm:first-of-type {
margin-right: 6%;
}
.sheet-chars input:nth-of-type(n) {
margin: 0;
border-radius: 3px;
text-align: center;
width: 2.5em;
}
.sheet-chars input[type=number]::-webkit-inner-spin-button,
.sheet-chars input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.sheet-chars input[type=number] {
-moz-appearance:textfield;
}
/* (prichars, secchars) */
.sheet-prichars li, .sheet-secchars li {
min-height: 2.5em;
}
.sheet-prichars li:nth-of-type(2), .sheet-prichars li:nth-of-type(3),
.sheet-secchars li:first-of-type, .sheet-secchars li:nth-of-type(2) {
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.sheet-prichars li:nth-of-type(2) button, .sheet-prichars li:nth-of-type(3) button,
.sheet-secchars li:first-of-type span, .sheet-secchars li:nth-of-type(2) span {
margin-right: auto;
}
.sheet-prichars li:nth-of-type(2) button, .sheet-prichars li:nth-of-type(3) button,
.sheet-secchars li:nth-of-type(-n+2) span {
width: calc(100% - 5.5em);
}
.sheet-secchars li span {
width: calc(100% - 2.5em);
}
/* Main body of character sheet - 2 columns */
/* Column 1: Weapons, Armours, Shields, Possessions, Money */
/* Weapons (weapons) */
/* Headers & Summary (headers, summary) */
.sheet-weapons .sheet-headers span:first-of-type {
width: calc(100% - 17em);
padding-left: 10px;
}
.sheet-weapons .sheet-headers span:nth-of-type(2), .sheet-weapons .sheet-headers span:nth-last-of-type(2),
.sheet-weapons .sheet-summary > span:nth-of-type(1), .sheet-weapons .sheet-summary > span:nth-last-of-type(2) {
width:3.5em;
display: block;
text-align: center;
}
.sheet-weapons .sheet-headers span:last-of-type, .sheet-weapons .sheet-summary > span:last-of-type {
width: 18px;
}
.sheet-weapons .sheet-headers span:nth-of-type(3), .sheet-weapons .sheet-headers span:nth-of-type(4),
.sheet-weapons .sheet-headers span:nth-of-type(5), .sheet-weapons .sheet-headers span:nth-of-type(6),
.sheet-weapons .sheet-headers span:nth-of-type(7), .sheet-weapons .sheet-summary > span:nth-of-type(2),
.sheet-weapons .sheet-summary > span:nth-of-type(3), .sheet-weapons .sheet-summary > span:nth-of-type(4),
.sheet-weapons .sheet-summary > span:nth-of-type(5), .sheet-weapons .sheet-summary > span:nth-of-type(6) {
width: 2em;
display: block;
text-align: center;
}
.repitem:nth-child(odd) .sheet-repeating-weapon .sheet-summary {
background-color: rgba(255,255,0,0.3);
}
/* Repeating weapon (repeating-weapon) */
/* Weapon options-flag settings -- see generic options flag settings*/
.sheet-weapons .sheet-options-flag, .sheet-weapons .sheet-options-flag ~ span {
top: 0px;
right: 0px;
}
.sheet-repeating-weapon {
position: relative;
}
.sheet-weapon {
display: none;
}
.sheet-options-flag:checked ~ .sheet-weapon {
display: inherit;
}
/* Weapon (weapon) - weapondets, weaponstats, use */
/* Weaponstats options-flag settings -- see generic options flag settings */
.sheet-weapons .sheet-expand-flag, .sheet-weapons .sheet-expand-flag ~ span {
top: 10px;
right: 10px;
}
.sheet-weapon {
position: relative;
}
.sheet-weaponstats {
display: none;
}
.sheet-expand-flag:checked ~ .sheet-weaponstats {
display: inherit;
}
/* Weapondets */
.sheet-weapondets ul {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.sheet-weapondets > ul li { /* Unarmed combat li */
width: 50%;
}
.sheet-weapondets > ul li:nth-of-type(2) {
-webkit-justify-content: flex-end;
justify-content: flex-end;
padding-right: 30px;
}
.sheet-weapondets > ul li:nth-of-type(2) span {
margin-right: 5px;
}
.sheet-weapondets > div > div:last-of-type > ul > li { /* Repeating weapons li */
margin: 0 30px 0 auto;
}
.sheet-weapondets input[type="text"] {
max-width: 100%
}
.sheet-weapondets > span {
display: block;
}
.sheet-weapondets textarea {
margin: 0;
width: 100%;
max-width: 100%;
height: 104px;
}
/* Weaponstats - use */
.sheet-weaponstats {
border-top: 1px dashed black;
padding-top: 5px;
margin-top: 5px;
}
.sheet-weaponstats > .sheet-2colsec > .sheet-colm {
padding: 0 10px;
}
.sheet-weaponstats .sheet-use > ul > li {
margin: 0;
padding-left: 10px;
display: block; // Override usual flex setting
}
.sheet-weaponstats .sheet-use > ul > li > span {
padding-left: 5px;
}
.sheet-use {
width: 100%;
}
.sheet-weaponstats select {
width: 9em;
}
margin: 0;
.sheet-weaponstats {
margin-top: 10px;
}
.sheet-weaponstats input[name="attr_wwgt"] {
width: 5em;
}
/* Armours (armours) & Shields (shields) */
/* Armour headers & summary (headers, summary)
& Shield headers & summary (headers, summary) */
.sheet-armours .sheet-headers span:first-of-type, .sheet-armours .sheet-summary span:first-of-type {
width: calc(100% - 14em - 18px);
padding-left: 10px;
}
.sheet-armours .sheet-headers span:not(:first-of-type), .sheet-armours .sheet-summary span:not(:first-of-type) {
width:3.5em;
display: block;
text-align: center;
}
.sheet-armours .sheet-headers span:last-of-type, .sheet-armours .sheet-summary span:last-of-type {
width: 18px;
}
.sheet-shields .sheet-headers span:first-of-type, .sheet-shields .sheet-summary span:first-of-type {
width: calc(100% - 10.5em);
padding-left: 10px;
}
.sheet-shields .sheet-headers span:not(:first-of-type), .sheet-shields .sheet-summary span:not(:first-of-type) {
width:3.5em;
display: block;
text-align: center;
}
.sheet-shields .sheet-headers span:last-of-type, .sheet-shields .sheet-summary span:last-of-type {
width: 18px;
}
.repitem:nth-child(even) .sheet-repeating-armour .sheet-summary,
.repitem:nth-child(even) .sheet-repeating-shield .sheet-summary {
background-color: rgba(255,255,0,0.3);
}
/* Repeating armour (repeating-armour) & Repeating shield (repeating-shield) - options flag, armour */
/* Armour & Shield options-flag settings -- see generic options-flag settings */
.sheet-armours .sheet-options-flag, .sheet-shields .sheet-options-flag,
.sheet-armours .sheet-options-flag ~ span, .sheet-shields .sheet-options-flag ~ span {
top: 0px;
right: 0px;
}
.sheet-repeating-armour, .sheet-repeating-shield {
position: relative;
}
.sheet-repeating-armour .sheet-armour, .sheet-repeating-shield .sheet-shield {
display: none;
}
.sheet-armours .sheet-options-flag:checked ~ .sheet-armour,
.sheet-shields .sheet-options-flag:checked ~ .sheet-shield {
display: inherit;
}
/* Armour (armour) & Shield (shield) */
.sheet-armour ul, .sheet-shield ul {
display: flex;
flex-wrap: wrap;
}
.sheet-armour ul li, .sheet-shield ul li {
width: 50%;
padding: 0 10px;
}
.sheet-armour li:first-of-type, .sheet-shield li:first-of-type {
width: 70%;
justify-content: flex-start;
}
.sheet-armour li:nth-of-type(2), .sheet-shield li:nth-of-type(2) {
width: 30%;
}
.sheet-armour li:nth-of-type(3) {
width: 100%;
}
.sheet-armour textarea {
max-width: 100%;
height: 100px;
margin: 0;
}
.sheet-shield li:nth-of-type(5) {
width: 100%;
}
/* Armour & Shield totals (total) */
.sheet-total {
padding-top: 5px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.sheet-total span {
padding-right: 5px;
}
.sheet-total input[type=number]::-webkit-inner-spin-button,
.sheet-total input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.sheet-total input[type=number] {
-moz-appearance:textfield;
}
/* Possessions (possessions) & Money (money) */
/* Possessions headers and summary (headers, summary) & Possession repeats (possession) & Money rows (mrow) */
.sheet-possession, .sheet-mrow {
display: -webkit-flex;
display: flex;
}
.sheet-possession input,
.sheet-mrow span, .sheet-mrow input {
border: solid brown;
border-width: 0 0 1px 0;
min-height: 19px;
}
.sheet-possessions .sheet-headers span:first-of-type, .sheet-possessions .sheet-summary span:first-of-type,
.sheet-possession input:first-of-type {
width: 80%;
padding-left: 10px;
}
.sheet-possessions .sheet-headers span:last-of-type, .sheet-possessions .sheet-summary span:last-of-type,
.sheet-possession input:last-of-type, .sheet-mrow input:first-of-type {
width: 20%;
text-align: center;
}
.sheet-possession input, .sheet-mrow input {
padding: 0;
margin: 0;
background: none;
border-radius: 0;
color: inherit;
}
.sheet-possession input[type=number]::-webkit-inner-spin-button,
.sheet-possession input[type=number]::-webkit-outer-spin-button,
.sheet-mrow input[type=number]::-webkit-inner-spin-button,
.sheet-mrow input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.sheet-possession input[type=number], .sheet-mrow input[type=number] {
-moz-appearance:textfield;
}
.sheet-mrow {
justify-content: flex-end;
}
.sheet-mrow span {
min-width: 14em;
}
.sheet-possessions > div.sheet-summary:not(:last-of-type):nth-of-type(even),
.sheet-possessions .repcontainer .repitem:nth-of-type(even) .sheet-possession input,
.sheet-mrow:nth-of-type(odd) span, .sheet-mrow:nth-of-type(odd) input {
background-color: rgba(255,255,0,0.3);
}
/* Possession total, Money total */
.sheet-possessions div:nth-last-of-type(2) span:first-of-type,
.sheet-money div:last-child span {
text-align: right;
font-weight: bold;
}
/* Possession agility modifier (pagmod) */
.sheet-pagmod {
padding-top: 5px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.sheet-pagmod span {
padding-right: 5px;
}
.sheet-pagmod input[type=number]::-webkit-inner-spin-button,
.sheet-pagmod input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.sheet-pagmod input[type=number] {
-moz-appearance:textfield;
}
/* Column 2: Magic, Skills, Specials & Experience */
/* Magic (magic) */
/* Magic colleges (colleges) */
.sheet-colleges input {
padding: 0;
margin: 0;
background: none;
border-radius: 0;
color: inherit;
border: solid brown;
border-width: 0 0 1px 0;
min-height: 18px;
}
.sheet-colleges .repcontainer .repitem:nth-of-type(even) input {
background-color: rgba(255,255,0,0.3);
}
.sheet-colleges input[type="text"] {
width: 100%
}
/* Spells (spells) */
/* Spell options flag -- see generic options flag settings */
.sheet-spells .sheet-options-flag, .sheet-spells .sheet-options-flag ~ span {
top: 0px;
right: 0px;
}
.sheet-repeating-spell {
position: relative;
}
.sheet-repeating-spell .sheet-spell {
display: none;
}
.sheet-spells .sheet-options-flag:checked ~ .sheet-spell {
display: inherit;
}
/* Spells summary (summary) */
.sheet-spells .sheet-headers span:first-of-type {
width: calc(100% - 17em);
padding-left: 10px;
}
.sheet-spells .sheet-headers span:nth-of-type(2), .sheet-spells .sheet-headers span:nth-of-type(3),
.sheet-spells .sheet-headers span:nth-of-type(4), .sheet-spells .sheet-headers span:nth-of-type(7),
.sheet-spells .sheet-headers span:nth-of-type(8), .sheet-spells .sheet-summary > span:nth-of-type(1),
.sheet-spells .sheet-summary > span:nth-of-type(2), .sheet-spells .sheet-summary > span:nth-of-type(3),
.sheet-spells .sheet-summary > span:nth-of-type(6), .sheet-spells .sheet-summary > span:nth-of-type(7) {
width: 2em;
text-align: center;
}
.sheet-spells .sheet-headers span:nth-of-type(5), .sheet-spells .sheet-headers span:nth-of-type(6),
.sheet-spells .sheet-summary > span:nth-of-type(4), .sheet-spells .sheet-summary > span:nth-of-type(5) {
width: 3.5em;
text-align: center;
}
.sheet-spells .sheet-headers span:last-of-type, .sheet-spells .sheet-summary > span:last-of-type {
width: 18px;
}
.repitem:nth-child(even) .sheet-repeating-spell .sheet-summary {
background-color: rgba(255,255,0,0.3);
}
/* Spell (spell) */
/* Spellstats options-flag settings -- see generic options flag settings */
.sheet-spells .sheet-expand-flag, .sheet-spells .sheet-expand-flag ~ span {
top: 10px;
right: 10px;
}
.sheet-spell {
position: relative;
}
.sheet-spellstats {
display: none;
}
.sheet-expand-flag:checked ~ .sheet-spellstats {
display: inherit;
}
/* Spelldets */
.sheet-spelldets ul {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
}
.sheet-spelldets li:first-of-type {
width: 50%;
padding: 0 10px;
}
.sheet-spelldets li:nth-of-type(2) {
width: 50%;
padding: 0 30px 0 10px;
}
.sheet-spelldets li:nth-of-type(3) {
width: 100%;
margin-top: -3px;
}
.sheet-spelldets li:nth-of-type(3) textarea {
max-width: 100%;
height: 5em;
margin: 0;
width: 100%;
}
/* Spellstats */
.sheet-spellstats {
border-top: 1px dashed black;
padding-top: 5px;
}
.sheet-spellstats .sheet-2colsec div:first-of-type li:nth-of-type(n+2) input[type="text"] {
width: 3.5em;
}
.sheet-spellstats .sheet-2colsec div:last-of-type li:nth-of-type(4) input[type="checkbox"] {
margin-right: auto; // Ritual tickbox
margin-left: 10px;
}
/* Spell resistances (res) */
.sheet-res li {
margin: 0;
justify-content: flex-start;
padding-left: 10px;
}
/* Skills (skills) */
/* Skill headers & data (headers, skdata) */
.sheet-skills .sheet-headers {
flex: 0 0 100%;
}
.sheet-skills .sheet-headers span:first-of-type {
padding-left: 10px;
}
.sheet-skills .sheet-headers span:first-of-type, .sheet-skdata div {
width: 11em;
}
.sheet-skills .sheet-headers span:nth-of-type(2), .sheet-skdata input[type="text"] {
width: calc(100% - 14.5em);
}
.sheet-skills .sheet-headers span:nth-of-type(3) {
width:3.5em;
}
.sheet-skdata {
overflow: auto;
display: -webkit-flex;
display: flex;
border: solid brown;
border-width: 0 0 1px 0;
min-height: 18px;
}
.sheet-skdata div {
display: -webkit-flex;
display: flex;
}
.sheet-skdata select, .sheet-skdata input {
margin: 0;
border: 0;
padding: 0;
background: none;
border-radius: 0;
}
.sheet-skdata select {
height: calc(1em + 5px);
width: calc(100% - 1em);
}
div.repitem:nth-of-type(even) .sheet-skdata {
background-color: rgba(255,255,0,0.3);
}
/* Special (special) & Experience (exp) */
.sheet-special textarea {
max-width: 100%
}
.sheet-exp ul {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-end;
align-items: flex-end;
}
.sheet-exp li input[type="number"] {
width: 6em;
text-align: right;
}
/* Button styling from DnD5e Roll20 sheet */
.repcontrol .btn {
border: medium none;
background: none;
box-shadow: none;
font-size: 0;
}
.repcontrol .btn:focus {
outline: 0;
}
.repcontrol .repcontrol_edit:after {
content: '(';
visibility: visible;
font-family: pictos;
background-color: #fff;
border: 1px solid black;
border-radius: 2px;
font-size: 12px;
height: 12px;
width: 12px;
padding: 2px 4px 2px 4px;
color: black;
}
.editmode ~ .repcontrol .repcontrol_edit:after {
content: ')';
}
.repcontrol .repcontrol_add:before {
content: '&';
visibility: visible;
font-family: pictos;
background-color: #fff;
border: 1px solid black;
border-radius: 2px;
font-size: 12px;
height: 12px;
width: 12px;
padding: 2px 4px 2px 4px;
color: black;
}
.repcontrol .repcontrol_edit:hover:after,
.repcontrol .repcontrol_add:hover:before
{
background-color: #EFEFEF;
}
.sheet-resources .repcontrol {
margin-top: -10px;
}
.itemcontrol {
z-index: 10;
}
.itemcontrol .repcontrol_del, .itemcontrol .repcontrol_move {
font-size: 14px;
margin: 0;
padding: 0;
height: 18px;
width: 18px;
}
.itemcontrol .repcontrol_del {
border: 0;
}