1006 lines
24 KiB
CSS
1006 lines
24 KiB
CSS
@import url('https://fonts.googleapis.com/css?family=Aldrich|Orbitron|Exo+2:wght@400;900|Major+Mono+Display|Titillium+Web&display=swap');
|
|
|
|
.wrapper, .sheet-rolltemplate-roll {
|
|
--col-border-900: hsl(180, 83%, 89%);
|
|
--col-border-700: hsl(180, 47%, 71%);
|
|
--col-border-500: hsl(167, 100%, 28%);
|
|
--col-border-300: hsl(187, 78%, 20%);
|
|
--col-border-100: hsl(217, 35%, 20%);
|
|
--col-disabled-500: #e4c4ff;
|
|
--col-disabled-300: #ac92c9;
|
|
--col-disabled-100: #4e324e;
|
|
--txt-medium-100: #1c272b;
|
|
--txt-medium-200: #50808E;
|
|
--txt-medium-300: #39cfa2;
|
|
--txt-medium-310: #46a88b;
|
|
--txt-medium-500: #a2f3b4;
|
|
--txt-aspect-300: #b9652d;
|
|
--txt-aspect-500: #ffd986;
|
|
--col-background: #24231b;
|
|
--col-chocolate: #100B00;
|
|
--font-black: "Orbitron", sans-serif;
|
|
--font-header: "Aldrich", sans-serif;
|
|
--font-label: "Exo 2", sans-serif;
|
|
--font-special: "Major Mono Display", sans-serif;
|
|
--gra-stripe-01: repeating-linear-gradient(45deg, transparent 0%, transparent 10px, var(--col-border-300) 10px, var(--col-border-300) 20px);
|
|
|
|
/* --col-scan-01: hsl(149, 68%, 39%, 0.15);
|
|
--col-scan-02: hsl(166, 68%, 44%, 0.08); */
|
|
--col-scan-01: rgba(233, 143, 25, 0.14);
|
|
--col-scan-02: rgba(188, 46, 36, 0.24);
|
|
--gra-scan-01: linear-gradient(90deg, transparent 38%, var(--col-scan-01) 40%, var(--col-scan-01) 50%, transparent 51%, transparent 71%, var(--col-scan-02) 73%, var(--col-scan-02) 80%, transparent 81%, transparent 100%);
|
|
--gra-scan-02: linear-gradient(90deg, transparent 5%, var(--col-scan-02) 5%, var(--col-scan-01) 40%, transparent 41%, transparent 61%, var(--col-scan-02) 63%, var(--col-scan-02) 90%, transparent 91%, transparent 100%);
|
|
--gra-scan-03: linear-gradient(90deg, transparent 12%, var(--col-scan-02) 12%, var(--col-scan-01) 18%, transparent 18%, transparent 20%, var(--col-scan-02) 20%, var(--col-scan-02) 26%, transparent 26%, transparent 48%, var(--col-scan-01) 20%, var(--col-scan-02) 48%, transparent 48%, transparent 72%, var(--col-scan-01) 72%, var(--col-scan-02) 76%, transparent 76%, transparent 100%);
|
|
--gra-inset: linear-gradient(var(--col-border-100), var(--col-border-700));
|
|
--gra-disabled: linear-gradient(var(--col-disabled-100), var(--col-disabled-300));
|
|
|
|
font-family: "Exo 2", sans-serif;
|
|
color: var(--txt-medium-200);
|
|
background: var(--col-chocolate);
|
|
position: relative;
|
|
border: 4px double var(--col-border-700);
|
|
border-color: var(--col-border-700) transparent;
|
|
margin-top: -2rem;
|
|
}
|
|
|
|
main {
|
|
padding: 1rem;
|
|
box-shadow: inset 0 0 10px var(--col-border-700);
|
|
|
|
}
|
|
h1, h2, h3, h4, span {
|
|
color: var(--txt-medium-200);
|
|
line-height: 1;
|
|
height: fit-content;
|
|
}
|
|
h1, h2, h3, h4 {
|
|
padding: 0 1ch;
|
|
}
|
|
h1 {
|
|
font-family: var(--font-black);
|
|
background: var(--col-border-100);
|
|
line-height: 1.25em;
|
|
}
|
|
h2 {
|
|
font-family: var(--font-black);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
background: var(--col-border-100);
|
|
}
|
|
h3 {
|
|
padding: 0;
|
|
font-size: 10px;
|
|
line-height: 1;
|
|
font-weight: bold;
|
|
}
|
|
h3, h4, span {font-family: var(--font-label);}
|
|
|
|
h4 {
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
|
|
main * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.ui-dialog .charsheet main button[type=roll]::before {
|
|
content: unset;
|
|
}
|
|
.skill-row:hover .btn_skill-normal {
|
|
border: 2px solid var(--col-border-900);
|
|
}
|
|
.charsheet label {
|
|
padding: 0;
|
|
position: relative;
|
|
display: flex;
|
|
margin: 0;
|
|
}
|
|
|
|
.charsheet main button.btn_show[type=roll] {
|
|
display: none;
|
|
position: absolute;
|
|
right: 0;
|
|
top: -3px;
|
|
height: 20px;
|
|
width: 20px;
|
|
line-height: 20px;
|
|
border: none;
|
|
font-family: 'pictos' !important;
|
|
font-size: 18px;
|
|
content: '9';
|
|
transition: all 200ms;
|
|
}
|
|
.charsheet main button.btn_show[type=roll]:hover, .charsheet main button.btn_show[type=roll]:active {
|
|
background: none;
|
|
outline: none;
|
|
background: none;
|
|
color: var(--col-border-900);
|
|
transform-origin: center;
|
|
transform: scale(2);
|
|
transition: all 200ms;
|
|
}
|
|
input:hover ~ .btn_show, input ~ .btn_show:hover, textarea:hover ~ .btn_show, .stuntContainer:hover .btn_show, label:hover ~ .btn_show, .btn_show:hover {
|
|
display: block !important;
|
|
}
|
|
/*===================== Input Styling =======================*/
|
|
.charsheet input, .charsheet select {
|
|
background: none;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
color: var(--txt-medium-300);
|
|
border-color: var(--col-border-300);
|
|
border-radius: 0;
|
|
padding: 0 5px;
|
|
transition: background 1200ms, color 1200ms, border-color 1200ms;
|
|
}
|
|
.charsheet select option {
|
|
background: var(--col-border-100);
|
|
}
|
|
.charsheet input.minorInput {
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
color: var(--txt-medium-310);
|
|
}
|
|
.charsheet input.aspect {color: var(--txt-aspect-300);}
|
|
|
|
input::placeholder {
|
|
color: var(--txt-medium-200);
|
|
font-size: 12px;
|
|
}
|
|
.charsheet main input[type=text]:placeholder-shown {
|
|
background: var(--col-chocolate);
|
|
background-image:
|
|
var(--gra-scan-01),
|
|
var(--gra-scan-02),
|
|
var(--gra-scan-03),
|
|
var(--gra-scan-03);
|
|
background-blend-mode: color-dodge;
|
|
animation: slide 24s ease infinite;
|
|
}
|
|
.charsheet input:hover, .charsheet input:active, .charsheet input:focus, input:placeholder-shown:hover, input:placeholder-shown:focus, .skill-row:hover .skill-rating[value="0"] {
|
|
background: var(--col-border-500);
|
|
color: var(--txt-medium-500);
|
|
border-color: var(--col-border-500);
|
|
transition: background 0ms, color 0ms;
|
|
}
|
|
.charsheet input.aspect:hover, .charsheet input.aspect:active, .charsheet input.aspect:focus {
|
|
color: var(--txt-aspect-500);
|
|
background: var(--txt-aspect-300);
|
|
}
|
|
|
|
.charsheet main *:nth-of-type(2n) > input:placeholder-shown {
|
|
animation-duration: 20s;
|
|
animation-delay: -4s;
|
|
}
|
|
.charsheet main *:nth-of-type(3n) > input:placeholder-shown {
|
|
animation-duration: 28s;
|
|
animation-delay: -12s;
|
|
}
|
|
.charsheet main *:nth-of-type(4n) > input:placeholder-shown {
|
|
animation-duration: 40s;
|
|
animation-delay: -2s;
|
|
}
|
|
|
|
@keyframes slide {
|
|
0% {
|
|
background-position-x: -30px, 40px, 0px, 34px;
|
|
background-size: 20%, 50%, 100%;
|
|
}
|
|
30% {background-position-x: 50px, 0px, 75px, 0px;}
|
|
25%, 75% {
|
|
background-position-x: 60px, 0px;
|
|
background-size: 45%, 200%, 50%;
|
|
}
|
|
50% {
|
|
background-position-x: 0px, -20px, 100%;
|
|
background-size: 100%, 50%, 100%;
|
|
}
|
|
100% {
|
|
background-position-x: -30px, 40px, 0px, 34px;
|
|
background-size: 20%, 50%, 100%;
|
|
}
|
|
|
|
}
|
|
|
|
input[type=number] {
|
|
-moz-appearance:textfield;
|
|
}
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
.ui-dialog .charsheet .titled {
|
|
position: relative;
|
|
margin: 15px 0 0px 0;
|
|
display: flex;
|
|
}
|
|
.charsheet main input[type=text] {
|
|
flex: 1;
|
|
width: 100%;
|
|
}
|
|
.titled span {
|
|
position: absolute;
|
|
bottom: calc(100% + 2px);
|
|
left: 0;
|
|
font-size: 10px;
|
|
line-height: 1;
|
|
font-weight: bold;
|
|
}
|
|
.charsheet main textarea {
|
|
font-size: 12px;
|
|
color: var(--txt-medium-300);
|
|
line-height: 1;
|
|
background: var(--col-border-100);
|
|
height: 5em;
|
|
resize: vertical;
|
|
border-color: var(--col-border-300);
|
|
transition: background-color 200ms;
|
|
}
|
|
.charsheet main textarea:hover {
|
|
outline: none;
|
|
background-color: var(--col-border-300);
|
|
}
|
|
.charsheet main textarea:active, .charsheet main textarea:focus-within {
|
|
outline: none;
|
|
border-color: transparent;
|
|
background-color: var(--col-border-300);
|
|
animation: bgpulse 1.06s infinite;
|
|
}
|
|
@keyframes bgpulse {
|
|
20% {box-shadow:
|
|
0px 0px 2px var(--col-border-500),
|
|
2px 0px 5px var(--col-border-500),
|
|
inset 0 0 12px var(--col-border-500),
|
|
inset 0 0 24px var(--col-border-500);
|
|
/* filter: drop-shadow(1px 0px 2px var(--col-border-500)); */
|
|
color: white;
|
|
}
|
|
}
|
|
.charsheet main button {
|
|
border: 2px solid transparent;
|
|
border-bottom-color: var(--col-border-700);
|
|
background: var(--col-border-00);
|
|
border-radius: 0;
|
|
text-shadow: unset;
|
|
box-shadow: none;
|
|
color: var(--txt-medium-300);
|
|
font-family: var(--font-black);
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.overlay {
|
|
display: grid;
|
|
position: fixed;
|
|
visibility: hidden;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background:hsl(217, 35%, 20%, 0.5);
|
|
}
|
|
.overlay:target {
|
|
visibility: visible;
|
|
}
|
|
div.overlay a {
|
|
position: absolute;
|
|
z-index: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
div.overlay div {
|
|
background: var(--col-chocolate);
|
|
z-index: 1;
|
|
padding: 1rem;
|
|
justify-self: center;
|
|
width: 80%;
|
|
height: auto;
|
|
}
|
|
.shapedLabel {
|
|
font-family: var(--font-black);
|
|
font-size: 2rem;
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
padding: 4px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
}
|
|
input[type=checkbox] {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
/*===================== Character tabs =======================*/
|
|
.tab_character, .tab_records {
|
|
display: none;
|
|
}
|
|
input.tabselect[value="character"] ~ .tab_character, input.tabselect[value="records"] ~ .tab_records {
|
|
display: grid;
|
|
}
|
|
|
|
/*===================== Repeating Field Styling =======================*/
|
|
.charsheet .repcontainer.editmode .itemcontrol {
|
|
background-color: none;
|
|
z-index: 2;
|
|
background-color:hsl(217, 35%, 20%, 0.5) !important;
|
|
}
|
|
.charsheet .repcontainer.editmode .itemcontrol::before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--gra-stripe-01);
|
|
|
|
box-shadow:
|
|
inset 0 0 20px var(--col-border-300),
|
|
inset 0 0 10px var(--col-border-300),
|
|
inset 0 0 5px var(--col-border-300);
|
|
mix-blend-mode: overlay;
|
|
}
|
|
.repcontainer .repcontrol_move, .repcontainer .repcontrol_del {
|
|
font-family: "Pictos" !important;
|
|
border: 2px solid var(--col-border-700);
|
|
background: var(--col-border-100);
|
|
z-index: 2;
|
|
}
|
|
|
|
/*===================== Helpers =======================*/
|
|
.charsheet .bignumber input[type=number] {
|
|
font-family: var(--font-black);
|
|
font-size: 6rem;
|
|
color: var(--txt-medium-300);
|
|
text-align: center;
|
|
width: 1.25em;
|
|
height: 1em;
|
|
}
|
|
.bignumber h1 {
|
|
font-size: 12px;
|
|
}
|
|
|
|
/*===================== Stunt =======================*/
|
|
.stuntContainer {
|
|
display: flex;
|
|
position: relative;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/*===================== Sections =======================*/
|
|
.section {
|
|
border: 2px solid var(--col-border-700);
|
|
padding: 0 2px;
|
|
border-width: 0 1px 2px 1px;
|
|
border-color: var(--col-disabled-100) var(--col-disabled-100) var(--col-border-700) var(--col-disabled-100) ;
|
|
}
|
|
.tab_character {
|
|
grid-gap: 1rem;
|
|
grid-template-columns: 1.25fr 1fr 1fr;
|
|
grid-template-rows: auto auto auto auto 1fr auto;
|
|
grid-template-areas:
|
|
"bio game game"
|
|
"bio consequences consequences"
|
|
"skills skills extra"
|
|
"aspects morph morph"
|
|
"extras morph morph"
|
|
"equipment equipment equipment";
|
|
}
|
|
.bio {
|
|
grid-area: bio;
|
|
}
|
|
.skills {
|
|
grid-area: skills;
|
|
}
|
|
.gameAspects {
|
|
grid-area: game;
|
|
}
|
|
.aspects {
|
|
grid-area: aspects;
|
|
}
|
|
.ego_stunts {
|
|
grid-area: egoStunts;
|
|
}
|
|
.consequences {
|
|
grid-area: consequences;
|
|
}
|
|
.extras {
|
|
grid-area: extras;
|
|
}
|
|
.equipment {
|
|
grid-area: equipment;
|
|
}
|
|
.section h1, .section a, header, .stretch {
|
|
grid-column: 1/-1;
|
|
}
|
|
/*===================== Header =======================*/
|
|
|
|
header {
|
|
background-image: url('https://i.imgur.com/6L8hUgZ.png');
|
|
background-size: auto 60px;
|
|
background-repeat: no-repeat;
|
|
height: 60px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
header h1 {
|
|
margin-left: auto;
|
|
background: unset;
|
|
line-height: 1em;
|
|
}
|
|
/*===================== BIO =======================*/
|
|
|
|
.bio {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 1fr auto;
|
|
grid-template-areas:
|
|
"firewall firewall fate"
|
|
"realname realname fate"
|
|
"concept concept concept"
|
|
"faction faction faction"
|
|
"motivation motivation motivation";
|
|
}
|
|
|
|
.bio .firewall {
|
|
grid-area: firewall;
|
|
}
|
|
.bio .realname {
|
|
grid-area: realname;
|
|
}
|
|
.bio .fate {
|
|
grid-area: fate;
|
|
}
|
|
.bio .concept {
|
|
grid-area: concept;
|
|
}
|
|
/* .bio .background {
|
|
grid-area: background;
|
|
}
|
|
.bio .faction {
|
|
grid-area: faction;
|
|
} */
|
|
.bio label {
|
|
display: flex;
|
|
}
|
|
.faction-background {
|
|
grid-area: faction;
|
|
display: grid;
|
|
grid-gap: 1rem;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.faction-background label input {
|
|
width: 100%;
|
|
}
|
|
.bio input[type=text] {
|
|
flex: 1;
|
|
}
|
|
|
|
/*===================== Motivations =======================*/
|
|
.motivations {
|
|
display: flex;
|
|
flex-direction: column;
|
|
grid-area: motivation;
|
|
}
|
|
.motivations h2 {
|
|
font-size: 10px;
|
|
font-family: var(--font-label);
|
|
margin-bottom: 2px;
|
|
}
|
|
.motivations label {
|
|
display: inline-block;
|
|
}
|
|
.motivations input[type=text] {
|
|
flex: 1;
|
|
text-align: left;
|
|
font-size: 12px;
|
|
}
|
|
/*===================== Fate =======================*/
|
|
|
|
.fate {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
}
|
|
|
|
.cardRefresh {
|
|
position: absolute;
|
|
opacity: 0;
|
|
top: 0;
|
|
left: 0;
|
|
text-align: center;
|
|
display: grid;
|
|
background: var(--col-border-300);
|
|
border: 2px solid var(--col-chocolate);
|
|
border-width: 0 2px 2px 0;
|
|
transition: opacity 200ms linear 450ms, transform 200ms linear 500ms;
|
|
}
|
|
.fate:hover .cardRefresh, .cardRefresh:hover, .fate:focus-within .cardRefresh, .cardRefresh:focus-within {
|
|
transform: translateX(-100%);
|
|
opacity: 1;
|
|
transition: opacity 200ms linear, transform 100ms linear;
|
|
}
|
|
.refresh {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
}
|
|
.charsheet .fate .refresh input[type=number] {
|
|
font-size: 4rem;
|
|
flex: 1;
|
|
align-self: center;
|
|
}
|
|
.charsheet .fate .refresh h1 {
|
|
font-size: 10px;
|
|
}
|
|
.charsheet main .fate .btn_refresh {
|
|
font-family: 'Pictos' !important;
|
|
font-size: 25px;
|
|
border: 1px solid var(--col-border-700);
|
|
border-radius: 5px;
|
|
padding: 4px;
|
|
margin: 2px;
|
|
width: calc(100% - 2px);
|
|
}
|
|
|
|
/*===================== Stress =======================*/
|
|
.stress h1 {
|
|
font-size: 16px;
|
|
grid-column: 1/-1;
|
|
}
|
|
.stress {
|
|
display: grid;
|
|
}
|
|
.extra .stress_container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: -13px;
|
|
}
|
|
.extra .stress {
|
|
grid-template-columns: auto auto auto auto;
|
|
}
|
|
.extra .stress label.optional {
|
|
transform: translate(calc(50%), calc(-50%))
|
|
}
|
|
.stress label {
|
|
position: relative;
|
|
padding: 0;
|
|
margin: 0;
|
|
margin-top: 1.15em;
|
|
margin-bottom: .5em;
|
|
width: fit-content;
|
|
font-size: 14px;
|
|
justify-self: center;
|
|
}
|
|
.extra .stress label:first-of-type, .extra .stress label:nth-of-type(3) {
|
|
grid-column-start: 2;
|
|
}
|
|
.extra .stress label {
|
|
font-size: 10px;
|
|
}
|
|
.stress label h3 {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -45%);
|
|
font-size: 1.5em;
|
|
font-family: var(--font-black);
|
|
color: var(--col-border-900);
|
|
}
|
|
.stress span {
|
|
margin-top: -0.25em;
|
|
font-size: 4em;
|
|
font-family: sans-serif;
|
|
line-height: 1;
|
|
-webkit-text-stroke: 4px var(--col-border-700);
|
|
background: var(--gra-inset);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.stress label input[type=checkbox]:checked + span {
|
|
color: var(--col-border-700);
|
|
background: var(--col-border-900);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
}
|
|
.stress label input[type=checkbox]:checked ~ h3 {
|
|
color: var(--col-chocolate)
|
|
}
|
|
.optional {
|
|
font-size: 14px;
|
|
}
|
|
.optional h3 {
|
|
color: var(--col-disabled-500);
|
|
}
|
|
.optional span {
|
|
color: var(--col-disabled-300);
|
|
background: var(--gra-disabled);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
}
|
|
.optional input {
|
|
border-color: var(--col-disabled-100);
|
|
}
|
|
.stress .optional span {
|
|
-webkit-text-stroke: 4px var(--col-disabled-300);
|
|
}
|
|
label.optional input[type=checkbox]:checked + span {
|
|
background: var(--col-disabled-500);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
}
|
|
|
|
/*===================== Muse =======================*/
|
|
.muse .stress *:first-child {
|
|
grid-column-start: 2;
|
|
}
|
|
.muse h1 {
|
|
font-size: 19px;
|
|
}
|
|
.muse .stress {
|
|
grid-template-columns: 1fr auto auto auto auto 1fr;
|
|
}
|
|
.muse .stress label.optional {
|
|
transform: translate(calc(0%), calc(0%))
|
|
}
|
|
.muse .stress label:nth-of-type(3) {
|
|
grid-column-start: 4;
|
|
}
|
|
|
|
/*===================== Consequences =======================*/
|
|
.consequences {
|
|
display: grid;
|
|
grid-gap: 0.5rem;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-areas:
|
|
". ."
|
|
". ."
|
|
". ."
|
|
". table"
|
|
". table";
|
|
}
|
|
.consequences table {
|
|
grid-area: table;
|
|
font-size: 9px;
|
|
}
|
|
.consequences > div {
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
.consequences h2 {
|
|
grid-column: 1/-1;
|
|
}
|
|
.consequences input {
|
|
height: min-content !important;
|
|
}
|
|
|
|
/*===================== Skills =======================*/
|
|
.skills .repcontainer {
|
|
display: grid;
|
|
border: 1px solid var(--col-border-100);
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-gap: 1rem;
|
|
grid-template-areas: "mediocre .";
|
|
}
|
|
.skills .default-skill {
|
|
margin-bottom: 1rem;
|
|
}
|
|
.skills .repcontainer .repitem {
|
|
display: flex;
|
|
}
|
|
.skills .repitem input[type=number], .charsheet main input[type=number].skill-rating {
|
|
width: 2em;
|
|
text-align: center;
|
|
border: none;
|
|
}
|
|
.skill-row {
|
|
display: flex;
|
|
flex: 1;
|
|
border: 1px solid var(--col-border-700);
|
|
border-width: 1px 8px;
|
|
}
|
|
.skill-row input[type=text] {
|
|
flex: 1;
|
|
width: 100%;
|
|
min-width: 0;
|
|
text-align: center;
|
|
background: var(--col-border-300);
|
|
border: 2px solid var(--col-border-700);
|
|
border-width: 1px 8px;
|
|
box-shadow: inset 0 0 8px var(--col-border-100);
|
|
font-size: 12px;
|
|
}
|
|
.charsheet main .skill-row button {
|
|
border-top-color: var(--col-border-700);
|
|
color: var(--txt-medium-300);
|
|
width: 1.75em;
|
|
}
|
|
.skill-row button.btn_skill-normal span {
|
|
color: var(--txt-medium-300);
|
|
font-weight: 900;
|
|
font-family: var(--font-black);
|
|
}
|
|
.skill-row button.btn_skill-bonus input {
|
|
font-weight: normal;
|
|
color: var(--txt-medium-200);
|
|
}
|
|
.skill-row button.btn_skill-mod {
|
|
font-weight: 900;
|
|
color: var(--txt-medium-200);
|
|
}
|
|
.skill-row .skill-rating {
|
|
background: var(--col-border-700);
|
|
color: var(--txt-medium-100);
|
|
}
|
|
|
|
/*===================== Morphs =======================*/
|
|
.morph {
|
|
grid-area: morph;
|
|
display: grid;
|
|
grid-template-rows: auto auto 1fr;
|
|
grid-template-areas:
|
|
". . . ."
|
|
". . . selected"
|
|
"display display display display"
|
|
;
|
|
}
|
|
.morphViewer {
|
|
display: none;
|
|
}
|
|
.morph input[value="morph1"] ~ #morph1,
|
|
.morph input[value="morph2"] ~ #morph2,
|
|
.morph input[value="morph3"] ~ #morph3,
|
|
.morph input[value="morph4"] ~ #morph4,
|
|
.morph input[value="morph5"] ~ #morph5,
|
|
.morph input[value="morph6"] ~ #morph6 {
|
|
display: grid;
|
|
grid-gap: 2px;
|
|
grid-area: display;
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-rows: auto auto auto auto auto auto auto auto 1fr;
|
|
grid-template-areas:
|
|
"name refresh"
|
|
"durability refresh"
|
|
"aspect aspect";
|
|
}
|
|
.morphViewer h1 {
|
|
grid-column: 1/-1;
|
|
}
|
|
.morphViewer .name {
|
|
grid-area: name;
|
|
}
|
|
.morphViewer .morphRefresh {
|
|
grid-area: refresh;
|
|
}
|
|
.morphViewer .durability {
|
|
grid-area: durability;
|
|
}
|
|
.morphViewer .aspect {
|
|
grid-area: aspect;
|
|
}
|
|
.morphViewer .repcontainer, .morphViewer .repcontrol {
|
|
grid-column: 1/-1;
|
|
}
|
|
.selectMorph {
|
|
display: flex;
|
|
height: min-content;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.charsheet main .selectMorph button {
|
|
font-size: 10px;
|
|
flex: 1 0 auto;
|
|
border-radius: 10px 0 0 0;
|
|
}
|
|
.selectMorph button:hover {
|
|
border-color: var(--col-border-300) var(--col-border-700) var(--col-border-700) var(--col-border-300);
|
|
box-shadow: 0 3px 4px var(--col-border-500);
|
|
}
|
|
.selectMorph input[value="1"] ~ #btn_morph1,
|
|
.selectMorph input[value="2"] ~ #btn_morph2,
|
|
.selectMorph input[value="3"] ~ #btn_morph3,
|
|
.selectMorph input[value="4"] ~ #btn_morph4,
|
|
.selectMorph input[value="5"] ~ #btn_morph5,
|
|
.selectMorph input[value="6"] ~ #btn_morph6 {
|
|
border: 2px solid var(--col-border-700);
|
|
border-color: var(--col-border-700);
|
|
|
|
background: var(--col-border-100);
|
|
}
|
|
|
|
/*===================== Devices =======================*/
|
|
.deviceViewer {
|
|
display: grid;
|
|
grid-area: display;
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-areas:
|
|
". ."
|
|
"name refresh"
|
|
"durability refresh"
|
|
"aspect aspect";
|
|
}
|
|
.deviceViewer h1 {
|
|
grid-column: 1/-1;
|
|
}
|
|
.deviceViewer .name {
|
|
grid-area: name;
|
|
}
|
|
.deviceViewer .morphRefresh {
|
|
grid-area: refresh;
|
|
}
|
|
.deviceViewer .durability {
|
|
grid-area: durability;
|
|
}
|
|
.deviceViewer .aspect {
|
|
grid-area: aspect;
|
|
}
|
|
.deviceViewer .repcontainer, .morphViewer .repcontrol {
|
|
grid-column: 1/-1;
|
|
}
|
|
|
|
/*===================== Equipment =======================*/
|
|
.equipment .repcontainer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
grid-gap: 1rem;
|
|
}
|
|
.equipment .repcontainer .repitem {
|
|
flex: 1 0 350px;
|
|
}
|
|
.equipment .repcontainer .repitem div.section {
|
|
display: grid;
|
|
grid-gap: 0.5rem;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: auto 60px 1fr;
|
|
grid-template-areas:
|
|
". ."
|
|
"aspects stress"
|
|
"aspects notes";
|
|
}
|
|
.equipment .notes {
|
|
grid-area: notes;
|
|
}
|
|
.equipment .stress {
|
|
grid-area: stress;
|
|
background: var(--gra-stripe-01);
|
|
grid-template-columns: auto auto auto auto 1fr;
|
|
padding-left: 1rem;
|
|
}
|
|
.equipment .aspects {
|
|
grid-area: aspects;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
.equipment .aspects div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
.equipment textarea {
|
|
flex: 1;
|
|
margin: 0;
|
|
}
|
|
|
|
/*===================== Extras =======================*/
|
|
.extras {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.extras textarea {
|
|
flex: 1;
|
|
min-height: 6em;
|
|
}
|
|
|
|
/*===================== Records =======================*/
|
|
.tab_records {
|
|
grid-gap: 1rem;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.tab_records h2 {
|
|
color: var(--col-disabled-300);
|
|
}
|
|
.tab_records .notes {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.tab_records .notes textarea {
|
|
flex:1;
|
|
}
|
|
/*===================== Roll Template =======================*/
|
|
.sheet-rolltemplate-roll {
|
|
margin: 0;
|
|
}
|
|
.sheet-rolltemplate-roll > div {
|
|
border: 1px solid var(--col-border-300);
|
|
margin: 0;
|
|
display: grid;
|
|
grid-template-areas:
|
|
"name"
|
|
"ability"
|
|
"result"
|
|
"label";
|
|
position: relative;
|
|
background: transparent;
|
|
}
|
|
.sheet-rolltemplate-roll h1 {
|
|
color: var(--txt-medium-300);
|
|
text-align: center;
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
}
|
|
.sheet-rolltemplate-roll h2 {
|
|
color: var(--txt-medium-300);
|
|
text-align: center;
|
|
font-size: 14px;
|
|
grid-area: label;
|
|
text-transform: uppercase;
|
|
}
|
|
.sheet-rolltemplate-roll h3 {
|
|
color: var(--txt-medium-300);
|
|
text-align: center;
|
|
font-size: 18px;
|
|
font-family: var(--font-black);
|
|
text-transform: uppercase;
|
|
}
|
|
.sheet-rolltemplate-roll .sheet-result {
|
|
text-align: center;
|
|
grid-area: result;
|
|
}
|
|
.sheet-rolltemplate-roll .sheet-result .inlinerollresult {
|
|
background: var(--col-chocolate);
|
|
display: inline-block;
|
|
padding: 4px;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
line-height: 2rem;
|
|
border: 1px solid var(--col-border-300);
|
|
}
|
|
.sheet-rolltemplate-roll .sheet-ability {
|
|
display: flex;
|
|
justify-self: center;
|
|
}
|
|
.sheet-rolltemplate-roll .sheet-ability .inlinerollresult {
|
|
background: none;
|
|
border: none;
|
|
font-size: 18px;
|
|
}
|
|
.sheet-rolltemplate-roll .sheet-ability h3:last-of-type:not(value=""):before, .sheet-rolltemplate-roll .inlinerollresult:before {
|
|
content: " +";
|
|
}
|
|
.sheet-rolltemplate-roll .sheet-ability .inlinerollresult:before {
|
|
content: " +";
|
|
}
|
|
.sheet-rolltemplate-roll .sheet-background {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
z-index: 0;
|
|
background: linear-gradient(90deg, var(--col-chocolate) 45%, red 50%, var(--col-chocolate) 55%);
|
|
}
|
|
.sheet-rolltemplate-roll .sheet-content {
|
|
z-index: 1;
|
|
margin: 4px;
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
.sheet-rolltemplate-roll .sheet-description {
|
|
padding: 0 5px;
|
|
color: var(--txt-medium-500);
|
|
text-align: center;
|
|
font-style: italic;
|
|
}
|