445 lines
13 KiB
CSS
445 lines
13 KiB
CSS
@import url("https://fonts.googleapis.com/css?family=Audiowide|Montserrat:400:800&display=swap");
|
|
.sheet-tis-wrapper {
|
|
position: relative;
|
|
min-width: 818px;
|
|
padding: 0.5em;
|
|
margin: 0;
|
|
font-family: "Audiowide", sans-serif;
|
|
font-size: 10pt;
|
|
}
|
|
.sheet-tis-wrapper * {
|
|
box-sizing: border-box;
|
|
}
|
|
.sheet-tis-wrapper input {
|
|
height: 1.75em;
|
|
}
|
|
.sheet-tis-wrapper input[type=number] {
|
|
-moz-appearance: textfield;
|
|
text-align: center;
|
|
}
|
|
.sheet-tis-wrapper input[type=number]::-webkit-outer-spin-button, .sheet-tis-wrapper input[type=number]::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
.sheet-tis-wrapper input[type=number],
|
|
.sheet-tis-wrapper input[type=text],
|
|
.sheet-tis-wrapper textarea,
|
|
.sheet-tis-wrapper select {
|
|
margin: 0;
|
|
background-color: transparent;
|
|
font-family: "Montserrat", Verdana, sans-serif;
|
|
font-size: 12pt;
|
|
font-variant: normal;
|
|
}
|
|
.sheet-tis-wrapper input[type=number]:hover,
|
|
.sheet-tis-wrapper input[type=text]:hover,
|
|
.sheet-tis-wrapper textarea:hover,
|
|
.sheet-tis-wrapper select:hover {
|
|
background-color: rgba(0, 0, 0, 0.125);
|
|
}
|
|
.sheet-tis-wrapper select {
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
cursor: pointer;
|
|
height: 1.75em;
|
|
background: transparent url("https://s3.amazonaws.com/files.d20.io/images/138210258/mZTqw1vke8SrkprMJmiZQw/med.png?1590443723") right 5px center no-repeat;
|
|
}
|
|
.sheet-tis-wrapper textarea {
|
|
resize: vertical;
|
|
width: 100%;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
.sheet-tis-wrapper label {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.sheet-tis-wrapper .itemcontrol {
|
|
position: relative;
|
|
}
|
|
.sheet-tis-wrapper .itemcontrol button.repcontrol_del,
|
|
.sheet-tis-wrapper .itemcontrol a.repcontrol_move {
|
|
display: block;
|
|
top: calc(50% - 1.5rem);
|
|
position: relative;
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 3rem;
|
|
width: 3rem;
|
|
box-shadow: none;
|
|
border: 1px solid #000;
|
|
border-radius: 0;
|
|
line-height: 2em;
|
|
text-shadow: none;
|
|
font-weight: bold;
|
|
}
|
|
.sheet-tis-wrapper .itemcontrol button.repcontrol_del {
|
|
margin-right: 0.25rem;
|
|
background: #a00;
|
|
color: #fff;
|
|
}
|
|
.sheet-tis-wrapper .itemcontrol a.repcontrol_move {
|
|
margin-left: 0.25rem;
|
|
background: transparent;
|
|
color: #000;
|
|
}
|
|
.sheet-tis-wrapper .repcontrol {
|
|
padding: 1em 0.25em;
|
|
clear: both;
|
|
min-height: 5rem;
|
|
background-color: transparent;
|
|
}
|
|
.sheet-tis-wrapper .repcontrol button.repcontrol_add,
|
|
.sheet-tis-wrapper .repcontrol button.repcontrol_del,
|
|
.sheet-tis-wrapper .repcontrol button.repcontrol_move,
|
|
.sheet-tis-wrapper .repcontrol button.repcontrol_edit {
|
|
display: block;
|
|
border: 1px solid #000;
|
|
border-radius: 0;
|
|
background: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 3rem;
|
|
width: 3rem;
|
|
box-shadow: none;
|
|
font-size: 0;
|
|
line-height: 1em;
|
|
text-shadow: none;
|
|
}
|
|
.sheet-tis-wrapper .repcontrol button.repcontrol_add:before {
|
|
display: block;
|
|
content: "&";
|
|
font-family: "Pictos";
|
|
font-size: 12pt;
|
|
font-weight: bold;
|
|
}
|
|
.sheet-tis-wrapper .repcontrol button.repcontrol_edit:before {
|
|
display: block;
|
|
content: "p";
|
|
right: 5px;
|
|
font-family: "Pictos";
|
|
font-size: 12pt;
|
|
font-weight: bold;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-body {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1.5fr;
|
|
margin-top: 2em;
|
|
gap: 1em;
|
|
padding: 1em;
|
|
background: #023;
|
|
clip-path: polygon(6rem 0, calc(100% - 9rem) 0, calc(100% - 3rem) 6rem, calc(100% - 3rem) 50%, 100% calc(50% + 3rem), 100% calc(100% - 3rem), calc(100% - 3rem) 100%, 3rem 100%, 0 calc(100% - 3rem), 0rem 6rem);
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-body__stats h2 {
|
|
margin: 0;
|
|
margin-left: 1.5em;
|
|
color: #fff !important;
|
|
text-align: left !important;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-body__subtext {
|
|
display: block;
|
|
font-family: "Montserrat", Verdana, sans-serif;
|
|
font-size: 11pt;
|
|
text-align: center;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-body h2 {
|
|
font-weight: normal;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
color: #a00;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-body__hex, .sheet-tis-wrapper .sheet-tis-body__hex--first {
|
|
display: grid;
|
|
grid-template-rows: 0.5fr 1fr;
|
|
align-items: center;
|
|
justify-items: center;
|
|
height: 6.5em;
|
|
width: 12.5em;
|
|
margin-left: 0.5em;
|
|
background: #fff;
|
|
clip-path: polygon(0 0, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0%);
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-body__hex--first {
|
|
margin-top: -2em !important;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-body__hex:nth-child(even), .sheet-tis-wrapper .sheet-tis-body__hex--first:nth-child(even) {
|
|
position: relative;
|
|
left: 9.6em;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-body__hex:not(:first-child), .sheet-tis-wrapper .sheet-tis-body__hex--first:not(:first-child) {
|
|
margin-top: -3.1em;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-body__hex h2, .sheet-tis-wrapper .sheet-tis-body__hex--first h2 {
|
|
width: 55%;
|
|
font-size: 8pt;
|
|
line-height: 8pt;
|
|
text-align: center;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-body__hex label.sheet-tis-improvement, .sheet-tis-wrapper .sheet-tis-body__hex--first label.sheet-tis-improvement,
|
|
.sheet-tis-wrapper .sheet-tis-body__hex label.sheet-tis-adversity,
|
|
.sheet-tis-wrapper .sheet-tis-body__hex--first label.sheet-tis-adversity {
|
|
height: 100%;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-body__hex input[type=number], .sheet-tis-wrapper .sheet-tis-body__hex--first input[type=number] {
|
|
align-self: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
font-size: 30pt;
|
|
text-align: center;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-body__improvements, .sheet-tis-wrapper .sheet-tis-body__records, .sheet-tis-wrapper .sheet-tis-body__shiproles, .sheet-tis-wrapper .sheet-tis-body__backpack {
|
|
margin-top: 1em;
|
|
padding: 0 1.5em;
|
|
background: #fff;
|
|
clip-path: polygon(3rem 0, calc(100% - 4.5rem) 0, calc(100% - 1.5rem) 3rem, calc(100% - 1.5rem) 50%, 100% calc(50% + 1.5rem), 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 1.5rem 100%, 0 calc(100% - 1.5rem), 0rem 3rem);
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-name {
|
|
position: absolute;
|
|
z-index: 1000;
|
|
width: 60%;
|
|
height: 5em;
|
|
padding-left: 2em;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
align-items: flex-end;
|
|
clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
|
|
background: #fff;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-name__label {
|
|
flex-shrink: 0;
|
|
text-transform: uppercase;
|
|
font-size: 20pt;
|
|
color: #a00;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-name__input[type=text] {
|
|
flex-grow: 1;
|
|
height: 30pt;
|
|
margin-left: 0.5em;
|
|
margin-right: 20%;
|
|
border-radius: 0;
|
|
border: 0;
|
|
font-size: 13pt;
|
|
font-weight: bold;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-characteristics, .sheet-tis-wrapper .sheet-tis-characteristics__general, .sheet-tis-wrapper .sheet-tis-characteristics__wand, .sheet-tis-wrapper .sheet-tis-characteristics__broom, .sheet-tis-wrapper .sheet-tis-characteristics__other {
|
|
padding: 0.5em;
|
|
margin-top: 3em;
|
|
background: #fff;
|
|
clip-path: polygon(3rem 0, calc(100% - 4.5rem) 0, calc(100% - 1.5rem) 3rem, calc(100% - 1.5rem) 50%, 100% calc(50% + 1.5rem), 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 1.5rem 100%, 0 calc(100% - 1.5rem), 0rem 3rem);
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-characteristics h3, .sheet-tis-wrapper .sheet-tis-characteristics__general h3, .sheet-tis-wrapper .sheet-tis-characteristics__wand h3, .sheet-tis-wrapper .sheet-tis-characteristics__broom h3, .sheet-tis-wrapper .sheet-tis-characteristics__other h3 {
|
|
grid-column: 1/-1;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-characteristics h3:after, .sheet-tis-wrapper .sheet-tis-characteristics__general h3:after, .sheet-tis-wrapper .sheet-tis-characteristics__wand h3:after, .sheet-tis-wrapper .sheet-tis-characteristics__broom h3:after, .sheet-tis-wrapper .sheet-tis-characteristics__other h3:after {
|
|
display: inline;
|
|
content: ":";
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-characteristics__general {
|
|
padding: 0.5em 0 0 0;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-characteristics__wand {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-characteristic {
|
|
grid-column: 1/-1;
|
|
display: grid;
|
|
grid-template-columns: 0.75fr 1fr;
|
|
align-items: center;
|
|
margin-bottom: 0.25em;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-characteristic__label, .sheet-tis-wrapper .sheet-tis-characteristic__label--description {
|
|
padding: 0.25em;
|
|
font-size: 10pt;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
clip-path: polygon(0 0, 92.5% 0%, 100% 50%, 92.5% 100%, 0 100%);
|
|
color: #fff;
|
|
background: #023;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-characteristic__label--description {
|
|
width: 43%;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-characteristic__select, .sheet-tis-wrapper .sheet-tis-characteristic__input[type=number], .sheet-tis-wrapper .sheet-tis-characteristic__input[type=text] {
|
|
flex-grow: 1;
|
|
min-width: 0;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: center;
|
|
border: 0;
|
|
border-bottom: 3px solid #ddd;
|
|
border-radius: 0;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-stat {
|
|
display: grid;
|
|
grid-template-columns: 1fr 25%;
|
|
grid-template-rows: 2em 1fr;
|
|
align-items: stretch;
|
|
height: 6.5em;
|
|
width: 12.5em;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
clip-path: polygon(0 0, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0%);
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-stat:nth-child(even) {
|
|
position: relative;
|
|
left: 9.6em;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-stat:not(:first-child) {
|
|
margin-top: -3.1em;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-stat__select {
|
|
margin-left: 25%;
|
|
margin-right: 0.5em;
|
|
height: 60%;
|
|
width: auto;
|
|
border: 0;
|
|
font-size: 20pt;
|
|
line-height: 20pt;
|
|
text-align: center;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-stat__button {
|
|
margin-left: 20% !important;
|
|
color: #000;
|
|
background: transparent;
|
|
border: none;
|
|
font-size: 10pt !important;
|
|
line-height: 1.5em;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-stat__button:before {
|
|
display: none;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-stat__bonus {
|
|
position: relative;
|
|
grid-row: span 2;
|
|
background-color: #bbb;
|
|
border: none;
|
|
color: #023;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-stat__bonus input {
|
|
height: 100%;
|
|
width: 100%;
|
|
padding-left: 30%;
|
|
border: none;
|
|
background: #bbb;
|
|
color: #023;
|
|
font-family: "Montserrat" sans-serif;
|
|
font-size: 16pt;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-stat__bonus:before {
|
|
position: absolute;
|
|
display: inline-block;
|
|
content: "BONUS";
|
|
top: calc(50% - .75em);
|
|
left: -2.75em;
|
|
color: #bbb;
|
|
font-size: 12pt;
|
|
font-weight: bold;
|
|
letter-spacing: 2px;
|
|
transform: rotate(-90deg);
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-stat__bonus:after {
|
|
position: absolute;
|
|
display: inline-block;
|
|
content: "&";
|
|
top: calc(50% - .9em);
|
|
left: 2px;
|
|
font-family: "Pictos";
|
|
font-size: 10pt;
|
|
font-weight: bold;
|
|
letter-spacing: 4px;
|
|
transform: rotate(-90deg);
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-body__improvements .repitem:not(:last-child) .sheet-tis-improvementrow, .sheet-tis-wrapper .sheet-tis-body__improvements .repitem:not(:last-child) .sheet-tis-improvementrow--header {
|
|
border-bottom: 0;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-improvementrow, .sheet-tis-wrapper .sheet-tis-improvementrow--header {
|
|
display: grid;
|
|
grid-template-columns: 0.45fr 0.5em 1fr;
|
|
border: 2px solid #ddd;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-improvementrow--header {
|
|
grid-template-columns: 0.45fr 1fr;
|
|
border: none;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-improvementrow--header * {
|
|
border: none;
|
|
color: #023;
|
|
font-size: 10pt;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-improvementrow__input {
|
|
border: 0;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-improvementrow__input:first-child {
|
|
border-right: 0;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-improvementrow__input:first-child input[type=text] {
|
|
font-weight: bold;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-improvementrow__input input[type=text] {
|
|
width: 100%;
|
|
padding: 1em 0;
|
|
font-size: 10pt;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
.sheet-tis-wrapper .sheet-tis-improvementrow__divider {
|
|
background: #ddd;
|
|
clip-path: polygon(40% 0, 100% 50%, 40% 100%, 0 100%, 65% 50%, 0 0);
|
|
}
|
|
|
|
.sheet-rolltemplate-tispace .sheet-tispace-container {
|
|
display: block;
|
|
padding: 1em;
|
|
border: 1px solid #023;
|
|
background: #fff;
|
|
}
|
|
.sheet-rolltemplate-tispace .sheet-tispace-container h1 {
|
|
width: 80%;
|
|
margin: auto;
|
|
color: #fff;
|
|
background: #023;
|
|
clip-path: polygon(0 0, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0 50%, 10% 0%);
|
|
font-family: "Audiowide", sans-serif;
|
|
font-size: 14pt;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
}
|
|
.sheet-rolltemplate-tispace .sheet-tispace-container h2 {
|
|
font-family: "Montserrat", sans-serif;
|
|
font-size: 12pt;
|
|
text-align: center;
|
|
}
|
|
.sheet-rolltemplate-tispace .sheet-tispace-container .sheet-tispace-roll-result {
|
|
margin-top: 1em;
|
|
font-family: "Audiowide", sans-serif;
|
|
font-size: 14pt;
|
|
text-align: center;
|
|
}
|
|
.sheet-rolltemplate-tispace .sheet-tispace-container .sheet-tispace-roll-result .importantroll,
|
|
.sheet-rolltemplate-tispace .sheet-tispace-container .sheet-tispace-roll-result .fullcrit,
|
|
.sheet-rolltemplate-tispace .sheet-tispace-container .sheet-tispace-roll-result .fullfail,
|
|
.sheet-rolltemplate-tispace .sheet-tispace-container .sheet-tispace-roll-result .inlinerollresult {
|
|
border: none;
|
|
background: transparent;
|
|
font-family: inherit;
|
|
line-height: 1em;
|
|
}
|
|
.sheet-rolltemplate-tispace .sheet-tispace-container .sheet-tispace-roll-result .importantroll {
|
|
color: #3e7bff;
|
|
}
|
|
.sheet-rolltemplate-tispace .sheet-tispace-container .sheet-tispace-roll-result .fullcrit {
|
|
color: #4cc016;
|
|
}
|
|
.sheet-rolltemplate-tispace .sheet-tispace-container .sheet-tispace-roll-result .fullfail {
|
|
color: #900;
|
|
}
|