mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 11:42:29 +00:00
2096 lines
50 KiB
CSS
2096 lines
50 KiB
CSS
/* ===================================== */
|
|
|
|
/* FONT FACES */
|
|
|
|
/* ===================================== */
|
|
|
|
/* DMSans - Primary Font Family */
|
|
@font-face {
|
|
font-family: 'DMSans';
|
|
src: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/fonts/dm-sans-v17-latin_latin-ext-regular.woff2') format('woff2');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'DMSans';
|
|
src: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/fonts/dm-sans-v17-latin_latin-ext-600.woff2') format('woff2');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'DMSans';
|
|
src: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/fonts/dm-sans-v17-latin_latin-ext-900.woff2') format('woff2');
|
|
font-weight: 900;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Bird of Feather';
|
|
src: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/fonts/bird-of-feather.woff2') format('woff2');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
div.container {
|
|
--sheet-primary-color: #cc9133;
|
|
--sheet-background-color: #fff4e7;
|
|
}
|
|
|
|
.sheet-type-select[value="npc"]~div.container {
|
|
--sheet-primary-color: #2babe3;
|
|
--sheet-background-color: #e7f4fb;
|
|
}
|
|
|
|
.sheet-type-select[value="adversary"]~div.container {
|
|
--sheet-primary-color: #da3831;
|
|
--sheet-background-color: #f9e7e4;
|
|
}
|
|
|
|
/* ===================================== */
|
|
|
|
/* ROLL20 INTEGRATION */
|
|
|
|
/* ===================================== */
|
|
|
|
.characterviewer,
|
|
.characterviewer .tab-content .sheetform,
|
|
.characterviewer .tab-content .sheetform .charactersheet,
|
|
.characterviewer .tab-content .sheetform .charactersheet .container {
|
|
height: 100%;
|
|
}
|
|
|
|
.characterviewer .tab-content .sheetform .charactersheet .container {
|
|
display: grid;
|
|
grid-template-rows: 0 calc(100% - 16px) 16px 0;
|
|
}
|
|
|
|
.eem {
|
|
display: grid;
|
|
grid-template-rows: 100px 32px calc(100% - 132px);
|
|
}
|
|
|
|
.characterviewer .tab-content {
|
|
height: calc(100% - 61px);
|
|
}
|
|
|
|
.ui-dialog .charsheet {
|
|
padding: 0;
|
|
}
|
|
|
|
.ui-dialog .charsheet input[type="number"] {
|
|
width: 100%;
|
|
}
|
|
|
|
.ui-dialog .charsheet .treasure button[type=action],
|
|
.ui-dialog .charsheet .sheet-attributes button[type=action],
|
|
.ui-dialog .charsheet .sheet-adversary-preview button[type=action] {
|
|
background: transparent;
|
|
color: #000000;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: none;
|
|
font-size: 15px;
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
text-align: left;
|
|
}
|
|
|
|
.ui-dialog .charsheet .treasure button[type=action]:hover,
|
|
.ui-dialog .charsheet .sheet-attributes button[type=action]:hover,
|
|
.ui-dialog .charsheet .sheet-adversary-preview button[type=action]:hover {
|
|
color: var(--sheet-primary-color);
|
|
text-decoration: underline solid 1px #000000;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ui-dialog .charsheet button[type=action].treasure {
|
|
float: right;
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.ui-dialog .charsheet button[type=action]:hover h2 {
|
|
color: #000000;
|
|
text-decoration: underline solid 1px var(--sheet-primary-color);
|
|
}
|
|
|
|
.ui-dialog .charsheet button[type=action]::before {
|
|
content: '';
|
|
}
|
|
|
|
.clearRoll {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-attack,
|
|
.sheet-rolltemplate-check,
|
|
.sheet-rolltemplate-description {
|
|
--sheet-primary-color: #cc9133;
|
|
--sheet-background-color: #fff4e7;
|
|
background-color: #ffffff;
|
|
border: solid var(--sheet-primary-color) 2px;
|
|
border-radius: 8px;
|
|
color: #000000;
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.sheet-rolltemplate-attack:has(.sheet-adversary),
|
|
.sheet-rolltemplate-check:has(.sheet-adversary),
|
|
.sheet-rolltemplate-description:has(.sheet-adversary) {
|
|
--sheet-primary-color: #da3831;
|
|
--sheet-background-color: #f9e7e4;
|
|
|
|
}
|
|
|
|
.sheet-rolltemplate-attack:has(.sheet-npc),
|
|
.sheet-rolltemplate-check:has(.sheet-npc),
|
|
.sheet-rolltemplate-description:has(.sheet-npc) {
|
|
--sheet-primary-color: #2babe3;
|
|
--sheet-background-color: #e7f4fb;
|
|
}
|
|
|
|
.sheet-rolltemplate-attack ul,
|
|
.sheet-rolltemplate-check ul,
|
|
.sheet-rolltemplate-description ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.sheet-rolltemplate-attack h3,
|
|
.sheet-rolltemplate-check h3,
|
|
.sheet-rolltemplate-description h3 {
|
|
padding: 8px;
|
|
text-align: center;
|
|
background-color: var(--sheet-background-color);
|
|
color: #000000;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.sheet-rolltemplate-attack h4,
|
|
.sheet-rolltemplate-check h4,
|
|
.sheet-rolltemplate-description h4 {
|
|
padding: 4px;
|
|
font-size: 13px;
|
|
font-weight: normal;
|
|
color: #000000;
|
|
}
|
|
|
|
.sheet-rolltemplate-attack h5,
|
|
.sheet-rolltemplate-check h5,
|
|
.sheet-rolltemplate-description h5 {
|
|
padding: 4px;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
color: #e62c2c;
|
|
background-color: var(--sheet-background-color);
|
|
margin-top: -8px;
|
|
}
|
|
|
|
.sheet-rolltemplate-attack h2,
|
|
.sheet-rolltemplate-check h2,
|
|
.sheet-rolltemplate-description h2 {
|
|
background-color: var(--sheet-primary-color);
|
|
font-size: 14px;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
color: #ffffff;
|
|
padding: 4px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.sheet-rolltemplate-attack h2 i,
|
|
.sheet-rolltemplate-check h2 i,
|
|
.sheet-rolltemplate-description h2 i {
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
text-transform: none;
|
|
color: var(--sheet-background-color);
|
|
padding: 4px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.sheet-rolltemplate-attack span.inlinerollresult,
|
|
.sheet-rolltemplate-check span.inlinerollresult {
|
|
border: 1.5px solid var(--sheet-primary-color);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.sheet-rolltemplate-attack span.inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-check span.inlinerollresult.fullcrit {
|
|
border: 2px solid #08a500;
|
|
}
|
|
|
|
.sheet-rolltemplate-attack span.inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-check span.inlinerollresult.fullfail {
|
|
border: 2px solid #e62c2c;
|
|
}
|
|
|
|
.sheet-rolltemplate-attack .sheet-critical-hit span.inlinerollresult,
|
|
.sheet-rolltemplate-check .sheet-critical-hit span.inlinerollresult {
|
|
font-weight: bolder;
|
|
font-size: 20px;
|
|
line-height: 30px;
|
|
border-radius: 7px;
|
|
border-width: 4px;
|
|
border-style: outset;
|
|
}
|
|
|
|
/* ===================================== */
|
|
|
|
/* GLOBAL CONTAINER & LAYOUT */
|
|
|
|
/* ===================================== */
|
|
|
|
.container {
|
|
--radiusouter: 8px;
|
|
--radius: 7px;
|
|
--thickness: 2px;
|
|
|
|
background-color: var(--sheet-background-color);
|
|
margin: 0;
|
|
padding: 0;
|
|
min-width: 850px;
|
|
min-height: 595px;
|
|
letter-spacing: 0.075em;
|
|
}
|
|
|
|
.container textarea {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--sheet-primary-color) #ffffff;
|
|
}
|
|
|
|
/* Firefox-specific adjustment using feature query */
|
|
@supports (-moz-appearance: none) {
|
|
.container textarea {
|
|
scrollbar-width: auto;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.container {
|
|
width: unset;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 880px) {
|
|
.container {
|
|
width: unset;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.container {
|
|
width: unset;
|
|
}
|
|
}
|
|
|
|
/* ===================================== */
|
|
|
|
/* CORNER BOX COMPONENT */
|
|
|
|
/* ===================================== */
|
|
|
|
.corner-box-wrapper {
|
|
display: block;
|
|
height: 50px;
|
|
margin: 8px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
/* Corner Box - Main Container */
|
|
.corner-box {
|
|
shape-rendering: geometricprecision;
|
|
height: 100%;
|
|
padding: var(--radiusouter);
|
|
clip-path: polygon(0 var(--radiusouter),
|
|
var(--radiusouter) 0,
|
|
calc(100% - var(--radiusouter)) 0,
|
|
100% var(--radiusouter),
|
|
100% calc(100% - var(--radiusouter)),
|
|
calc(100% - var(--radiusouter)) 100%,
|
|
var(--radiusouter) 100%,
|
|
0 calc(100% - var(--radiusouter)));
|
|
background-color: var(--sheet-primary-color);
|
|
position: relative;
|
|
}
|
|
|
|
/* Corner Box - Inner White Background */
|
|
.corner-box::before {
|
|
shape-rendering: geometricprecision;
|
|
display: block;
|
|
content: '';
|
|
position: relative;
|
|
left: calc(var(--thickness) * 1 - var(--radiusouter));
|
|
top: calc(var(--thickness) * 1 - var(--radiusouter));
|
|
width: calc(100% - var(--thickness) * 2 + var(--radiusouter) * 2);
|
|
height: calc(100% - var(--thickness) * 2 + var(--radiusouter) * 2);
|
|
clip-path: polygon(0 var(--radius),
|
|
var(--radius) 0,
|
|
calc(100% - var(--radius)) 0,
|
|
100% var(--radius),
|
|
100% calc(100% - var(--radius)),
|
|
calc(100% - var(--radius)) 100%,
|
|
var(--radius) 100%,
|
|
0 calc(100% - var(--radius)));
|
|
background-color: #ffffff;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* Corner Box - Header Label */
|
|
.corner-box-wrapper .corner-box-header {
|
|
margin-bottom: -12px;
|
|
margin-left: 8px;
|
|
background-color: white;
|
|
color: var(--sheet-primary-color);
|
|
text-transform: uppercase;
|
|
height: 16px;
|
|
width: fit-content;
|
|
padding: 4px;
|
|
position: relative;
|
|
z-index: 1;
|
|
font: 13px 'DMSans', sans-serif;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Corner Box - Content Area */
|
|
.corner-box .content {
|
|
width: calc(100% - var(--radiusouter) * 2);
|
|
display: block;
|
|
position: absolute;
|
|
top: var(--radiusouter);
|
|
left: var(--radiusouter);
|
|
}
|
|
|
|
.corner-box .inner-header {
|
|
margin-left: -4px;
|
|
margin-top: -4px;
|
|
}
|
|
|
|
.corner-box .content.two-columns {
|
|
grid-template-columns: fit-content(50%) auto;
|
|
display: grid;
|
|
}
|
|
|
|
/* Corner Box - Labels */
|
|
.corner-box label {
|
|
font: 12px 'DMSans', sans-serif;
|
|
font-weight: 900;
|
|
color: var(--sheet-primary-color);
|
|
display: flex;
|
|
align-items: center;
|
|
padding-right: 4px;
|
|
height: 100%;
|
|
margin-bottom: 0;
|
|
max-height: 26px;
|
|
line-height: 13px;
|
|
}
|
|
|
|
/* Corner Box - Input Fields */
|
|
.corner-box input {
|
|
border: none;
|
|
background-color: #ffffff;
|
|
font-family: 'DMSans', sans-serif;
|
|
font-size: 16.5px;
|
|
line-height: 22px;
|
|
font-weight: 600;
|
|
padding: 2px 4px;
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 0;
|
|
color: #000000;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Corner Box - Textarea Fields */
|
|
.corner-box .content textarea {
|
|
width: 96%;
|
|
resize: none;
|
|
line-height: 18px;
|
|
font-family: 'DMSans', sans-serif;
|
|
font-size: 14.5px;
|
|
font-weight: 400;
|
|
height: 54px;
|
|
border: none;
|
|
background-color: transparent;
|
|
color: #000000;
|
|
}
|
|
|
|
/* Corner Box - Side Variant */
|
|
.corner-box-wrapper.side {
|
|
margin-top: 0;
|
|
height: 58px;
|
|
}
|
|
|
|
.corner-box-wrapper.side .corner-box {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* ===================================== */
|
|
|
|
/* XP ROWS (LEVEL & EXPERIENCE) */
|
|
|
|
/* ===================================== */
|
|
|
|
.xp-rows {
|
|
grid-template-rows: 0% 50% 50%;
|
|
grid-template-columns: 78px;
|
|
display: grid;
|
|
vertical-align: middle;
|
|
height: 64px;
|
|
margin: 8px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.xp-rows::after {
|
|
background-color: #000000;
|
|
content: '';
|
|
}
|
|
|
|
.xp-rows .corner-box-wrapper {
|
|
height: 18px;
|
|
margin: 0;
|
|
}
|
|
|
|
.xp-rows .corner-box input {
|
|
font-size: 15px;
|
|
padding: 0 4px;
|
|
margin-top: -2px;
|
|
}
|
|
|
|
.xp-background {
|
|
position: relative;
|
|
height: min-content;
|
|
width: min-content;
|
|
height: 80px;
|
|
background-color: var(--sheet-background-color);
|
|
}
|
|
|
|
.xp-background::after {
|
|
background-color: var(--sheet-primary-color);
|
|
mask-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/xp_bw.png");
|
|
content: '';
|
|
position: absolute;
|
|
top: -17px;
|
|
left: -11px;
|
|
height: 100px;
|
|
width: 100%;
|
|
mask-size: 100%;
|
|
mix-blend-mode: plus-lighter;
|
|
}
|
|
|
|
.xp-background img {
|
|
position: relative;
|
|
top: -17px;
|
|
left: -11px;
|
|
height: 100px;
|
|
width: 100px;
|
|
max-width: none;
|
|
}
|
|
|
|
/* ===================================== */
|
|
|
|
/* NAVIGATION BAR & TAB SYSTEM */
|
|
|
|
/* ===================================== */
|
|
|
|
/* Nav Bar Container */
|
|
.nav-bar {
|
|
background-color: var(--sheet-primary-color);
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
border-top-left-radius: 8px;
|
|
border-top-right-radius: 8px;
|
|
}
|
|
|
|
/* Nav Bar Buttons */
|
|
.nav-bar button {
|
|
font-family: 'DMSans', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
display: inline-block;
|
|
padding: 5px 10px;
|
|
padding-bottom: 7px;
|
|
border: 2px solid var(--sheet-primary-color);
|
|
border-bottom: none;
|
|
border-top-left-radius: 7px;
|
|
border-top-right-radius: 7px;
|
|
background-color: var(--sheet-primary-color);
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
letter-spacing: -0.25px;
|
|
}
|
|
|
|
/* Nav Bar Button Hover */
|
|
.nav-bar button:hover {
|
|
position: relative;
|
|
top: -7px;
|
|
padding-bottom: 14px;
|
|
margin-bottom: -7px;
|
|
box-shadow: 0 0 4px rgb(0 0 0 / 10%);
|
|
}
|
|
|
|
/* Tab Content Containers - Hidden by Default */
|
|
.sheet-npc,
|
|
.sheet-adversary-definition,
|
|
.sheet-adversary-preview,
|
|
.sheet-attributes,
|
|
.sheet-inventory,
|
|
.sheet-background,
|
|
.sheet-notes,
|
|
.sheet-portrait,
|
|
.sheet-settings {
|
|
display: none;
|
|
border: 2px solid var(--sheet-primary-color);
|
|
border-top: none;
|
|
margin: 8px;
|
|
margin-top: 0;
|
|
background-color: #ffffff;
|
|
padding: 8px;
|
|
}
|
|
|
|
/* Active Tab Button Styling */
|
|
.eem .sheet-tabstoggle[value="attributes"]~div.nav-bar .sheet-button0,
|
|
.eem .sheet-tabstoggle[value="inventory"]~div.nav-bar .sheet-button1,
|
|
.eem .sheet-tabstoggle[value="background"]~div.nav-bar .sheet-button2,
|
|
.eem .sheet-tabstoggle[value="notes"]~div.nav-bar .sheet-button3,
|
|
.eem .sheet-tabstoggle[value="portrait"]~div.nav-bar .sheet-button4,
|
|
.eem .sheet-tabstoggle[value="settings"]~div.nav-bar .sheet-button5,
|
|
.eem .sheet-tabstoggle[value="npc"]~div.nav-bar .sheet-button-npc,
|
|
.eem .sheet-tabstoggle[value="adversary-definition"]~div.nav-bar .sheet-button-adversary,
|
|
.eem .sheet-tabstoggle[value="adversary-preview"]~div.nav-bar .sheet-button-preview {
|
|
background-color: #ffffff;
|
|
color: var(--sheet-primary-color);
|
|
position: relative;
|
|
top: -7px;
|
|
padding-bottom: 14px;
|
|
margin-bottom: -7px;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.eem .sheet-button5 {
|
|
float: right;
|
|
}
|
|
|
|
.eem .sheet-button5 .gear-icon {
|
|
font-size: 17px;
|
|
margin-left: 4px;
|
|
line-height: 0;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* Show Selected Tab Content */
|
|
.eem .sheet-tabstoggle[value="npc"]~div.sheet-npc,
|
|
.eem .sheet-tabstoggle[value="adversary-definition"]~div.sheet-adversary-definition,
|
|
.eem .sheet-tabstoggle[value="adversary-preview"]~div.sheet-adversary-preview,
|
|
.eem .sheet-tabstoggle[value="attributes"]~div.sheet-attributes,
|
|
.eem .sheet-tabstoggle[value="inventory"]~div.sheet-inventory,
|
|
.eem .sheet-tabstoggle[value="background"]~div.sheet-background,
|
|
.eem .sheet-tabstoggle[value="notes"]~div.sheet-notes,
|
|
.eem .sheet-tabstoggle[value="portrait"]~div.sheet-portrait,
|
|
.eem .sheet-tabstoggle[value="settings"]~div.sheet-settings {
|
|
display: grid;
|
|
}
|
|
|
|
.eem .sheet-type-pc,
|
|
.eem .nav-bar button.sheet-type-pc,
|
|
.eem .header.sheet-type-pc,
|
|
.eem .sheet-type-npc,
|
|
.eem .nav-bar button.sheet-type-npc,
|
|
.eem .header.sheet-type-npc,
|
|
.eem .sheet-type-adversary,
|
|
.eem .nav-bar button.sheet-type-adversary,
|
|
.eem .header.sheet-type-adversary {
|
|
display: none;
|
|
}
|
|
|
|
.eem .sheet-type-select[value="pc"]~div.sheet-type-pc,
|
|
.eem .sheet-type-select[value="npc"]~div.sheet-type-npc,
|
|
.eem .sheet-type-select[value="adversary"]~div.sheet-type-adversary {
|
|
display: block;
|
|
}
|
|
|
|
.eem .sheet-type-select[value="pc"]~.nav-bar button.sheet-type-pc,
|
|
.eem .sheet-type-select[value="npc"]~.nav-bar button.sheet-type-npc,
|
|
.eem .sheet-type-select[value="adversary"]~.nav-bar button.sheet-type-adversary {
|
|
display: inline-block;
|
|
}
|
|
|
|
.eem .sheet-type-select[value="pc"]~.header.sheet-type-pc,
|
|
.eem .sheet-type-select[value="npc"]~.header.sheet-type-npc,
|
|
.eem .sheet-type-select[value="adversary"]~.header.sheet-type-adversary {
|
|
display: grid;
|
|
}
|
|
|
|
/* ===================================== */
|
|
|
|
/* CHARACTER HEADER */
|
|
|
|
/* ===================================== */
|
|
|
|
.eem .header {
|
|
background-color: var(--sheet-background-color);
|
|
color: var(--sheet-primary-color);
|
|
display: grid;
|
|
height: 100px;
|
|
grid-template-columns: 4fr 3fr 100px 140px 82px;
|
|
}
|
|
|
|
.eem .header.sheet-type-npc {
|
|
grid-template-columns: 1fr 1fr 140px 82px;
|
|
}
|
|
|
|
.eem .header.sheet-type-adversary {
|
|
grid-template-columns: max-content auto 140px 82px;
|
|
}
|
|
|
|
.eem .header.sheet-type-adversary .adversary-name {
|
|
font-size: 66px;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
vertical-align: middle;
|
|
color: var(--sheet-primary-color);
|
|
margin: 0;
|
|
margin-left: 4px;
|
|
margin-top: 14px;
|
|
font-family: 'Bird of Feather', sans-serif;
|
|
border: none;
|
|
background-color: transparent;
|
|
field-sizing: content;
|
|
width: fit-content;
|
|
padding: 0;
|
|
padding-right: 4px;
|
|
padding-left: 4px;
|
|
padding-top: 10px;
|
|
height: 70px;
|
|
}
|
|
|
|
.eem .header.sheet-type-adversary .adversary-type-symbol {
|
|
width: auto;
|
|
height: 50px;
|
|
margin: auto 0;
|
|
background-color: var(--sheet-primary-color);
|
|
mask-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/creatures.svg');
|
|
mask-repeat: no-repeat;
|
|
float: left;
|
|
}
|
|
|
|
.eem .header.sheet-type-adversary input.adversary-type[value="creature"]~.adversary-type-symbol {
|
|
mask-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/creatures.svg');
|
|
}
|
|
|
|
.eem .header.sheet-type-adversary input.adversary-type[value="critter"]~.adversary-type-symbol {
|
|
mask-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/critters.svg');
|
|
}
|
|
|
|
.eem .header.sheet-type-adversary input.adversary-type[value="creeper"]~.adversary-type-symbol {
|
|
mask-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/creepers.svg');
|
|
}
|
|
|
|
.eem .header .frame {
|
|
padding: 8px;
|
|
margin: 8px;
|
|
border: 1px solid var(--sheet-primary-color);
|
|
background-color: #ffffff;
|
|
display: block;
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.eem .header .logo {
|
|
margin-top: 27px;
|
|
margin-left: -4px;
|
|
margin-right: 0;
|
|
max-width: 100%;
|
|
height: min-content;
|
|
position: relative;
|
|
}
|
|
|
|
.eem .header .logo img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.eem .header .logo::after {
|
|
background-color: var(--sheet-primary-color);
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
mask-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/logo-flat.png');
|
|
width: 100%;
|
|
height: 100%;
|
|
mask-size: 100%
|
|
}
|
|
|
|
.eem .header .top-avatar {
|
|
margin: 18px auto;
|
|
height: 62px;
|
|
width: 62px;
|
|
border: 2px solid var(--sheet-primary-color);
|
|
border-radius: 4px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.eem .header img.top-avatar:not([src]) {
|
|
border: none;
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/stars.png');
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
outline: 4px solid var(--sheet-background-color);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.header .corner-box label {
|
|
letter-spacing: normal;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.header small {
|
|
color: var(--sheet-primary-color);
|
|
font-size: 10px;
|
|
letter-spacing: -0.02em;
|
|
display: block;
|
|
position: relative;
|
|
top: -10px;
|
|
text-align: left;
|
|
}
|
|
|
|
/* ===================================== */
|
|
|
|
/* ATTRIBUTES TAB */
|
|
|
|
/* ===================================== */
|
|
|
|
/* Attributes Tab Layout */
|
|
.eem .sheet-attributes {
|
|
grid-template-columns: minmax(auto, 240px) minmax(auto, 130px) 1fr 1fr;
|
|
padding: 10px 8px 9px 16px !important;
|
|
grid-template-rows: repeat(3, 90px 17px) 93px calc(100% - 414px)
|
|
}
|
|
|
|
/* Attribute Box Component */
|
|
.attribute-box {
|
|
font-family: 'DMSans', sans-serif;
|
|
font-size: 16px;
|
|
grid-template-columns: 95px 35px auto;
|
|
display: grid;
|
|
width: 200px;
|
|
align-items: center;
|
|
letter-spacing: normal;
|
|
}
|
|
|
|
.attribute-box ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.attribute-box li {
|
|
height: 20px;
|
|
color: #000000;
|
|
}
|
|
|
|
.attribute-box h2 {
|
|
font-size: 15.5px;
|
|
color: var(--sheet-primary-color);
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
line-height: 22px;
|
|
overflow: visible;
|
|
display: block;
|
|
width: 100px;
|
|
}
|
|
|
|
.charsheet input[type="number"]::-webkit-inner-spin-button,
|
|
.charsheet input[type="number"]::-webkit-outer-spin-button {
|
|
display: none;
|
|
}
|
|
|
|
.charsheet input[type="number"] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
.ui-dialog .charsheet .attribute-box input {
|
|
border: none;
|
|
border-bottom: 0.5px solid var(--sheet-primary-color);
|
|
border-radius: 0;
|
|
background-color: transparent;
|
|
width: 30px;
|
|
font-size: 16px;
|
|
height: 16px;
|
|
padding: 3px;
|
|
padding-left: 0;
|
|
color: #000000;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Dice Field Component */
|
|
.dice-field {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/dice.png');
|
|
width: 62px;
|
|
height: 71px;
|
|
display: block;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-color: rgb(255 255 255 / 80%);
|
|
background-blend-mode: lighten;
|
|
}
|
|
|
|
.ui-dialog .charsheet .dice-field input {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
background-color: transparent;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
color: #000000;
|
|
}
|
|
|
|
/* Stat Box Base Styles */
|
|
.stat-box {
|
|
font-family: 'DMSans', sans-serif;
|
|
font-size: 16px;
|
|
max-height: 100px;
|
|
margin-left: 10px;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.stat-box h2 {
|
|
font-size: 15.5px;
|
|
color: var(--sheet-primary-color);
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
line-height: 22px;
|
|
overflow: visible;
|
|
display: block;
|
|
width: 100px;
|
|
position: relative;
|
|
z-index: 1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ui-dialog .charsheet .stat-box input.big {
|
|
position: absolute;
|
|
width: 60px;
|
|
height: 40px;
|
|
border: none;
|
|
background-color: transparent;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
color: #000000;
|
|
}
|
|
|
|
.ui-dialog .charsheet .stat-box input.small {
|
|
position: absolute;
|
|
width: 64px;
|
|
height: 48px;
|
|
border: none;
|
|
background-color: transparent;
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/small_frame.svg');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
color: #000000;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
label.small {
|
|
font-size: 9px;
|
|
margin-bottom: 0;
|
|
padding-right: 0;
|
|
display: block;
|
|
position: relative;
|
|
overflow: visible;
|
|
height: 0;
|
|
width: 50px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Stat Box - Courage Variant */
|
|
.stat-box.stat-courage {
|
|
position: relative;
|
|
background: 0 22px url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/stats_1.png") no-repeat;
|
|
background-size: auto 58px;
|
|
background-color: rgb(255 255 255 / 80%);
|
|
background-blend-mode: lighten;
|
|
}
|
|
|
|
.stat-box.stat-courage input.big {
|
|
top: 28px;
|
|
left: 1px;
|
|
}
|
|
|
|
.stat-box.stat-courage input.small {
|
|
top: 38px;
|
|
left: 52px;
|
|
}
|
|
|
|
.stat-box.stat-courage label.small {
|
|
top: 8px;
|
|
left: 60px;
|
|
}
|
|
|
|
/* Stat Box - Attack Variant */
|
|
.stat-box.stat-attack {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.stat-box.stat-attack input.big {
|
|
top: 36px;
|
|
left: -5px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.stat-box.stat-attack input.small {
|
|
top: 20px;
|
|
left: 54px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.stat-box.stat-attack label.small {
|
|
top: -12px;
|
|
left: 62px;
|
|
}
|
|
|
|
/* Stat Box - Defense Variant */
|
|
.stat-box.stat-defense {
|
|
position: relative;
|
|
background: 0 22px url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/stats_3.png") no-repeat;
|
|
background-size: auto 70px;
|
|
background-color: rgb(255 255 255 / 80%);
|
|
background-blend-mode: lighten;
|
|
}
|
|
|
|
.stat-box.stat-defense input.big {
|
|
top: 34px;
|
|
left: 2px;
|
|
}
|
|
|
|
.stat-box.stat-defense input.small {
|
|
top: 49px;
|
|
left: 54px;
|
|
}
|
|
|
|
.stat-box.stat-defense label.small {
|
|
top: 17px;
|
|
left: 61px;
|
|
}
|
|
|
|
/* Stat Box - Mettle Variant */
|
|
.stat-box.stat-mettle {
|
|
grid-column: 1;
|
|
position: relative;
|
|
background: 0 22px url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/stats_6.png") no-repeat;
|
|
background-size: auto 72px;
|
|
background-color: rgb(255 255 255 / 80%);
|
|
background-blend-mode: lighten;
|
|
}
|
|
|
|
.stat-box.stat-mettle input.big {
|
|
top: 42px;
|
|
left: 5px;
|
|
}
|
|
|
|
/* Stat Box - Quest Points Variant */
|
|
.stat-box.stat-quest {
|
|
position: relative;
|
|
background: 0 22px url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/stats_4.png") no-repeat;
|
|
background-size: 90px 68px;
|
|
background-color: rgb(255 255 255 / 80%);
|
|
background-blend-mode: lighten;
|
|
}
|
|
|
|
.stat-box.stat-quest input.big {
|
|
top: 40px;
|
|
left: 8px;
|
|
}
|
|
|
|
/* Note Box Component */
|
|
.note-box {
|
|
margin-left: 8px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.note-box h2 {
|
|
font-family: 'DMSans', sans-serif;
|
|
font-size: 15px;
|
|
color: var(--sheet-primary-color);
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
line-height: 22px;
|
|
overflow: visible;
|
|
display: block;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.note-box textarea,
|
|
.note-box .fake-textarea,
|
|
.note-box .repcontainer,
|
|
.note-box .repcontainer .sheet-auto-expand {
|
|
border: none;
|
|
background-color: transparent;
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.07) 2px, transparent 2px);
|
|
background-size: 100% 21px;
|
|
background-attachment: local;
|
|
font-family: 'DMSans', sans-serif;
|
|
font-size: 14.5px;
|
|
font-weight: 400;
|
|
line-height: 21px;
|
|
margin-top: -4px;
|
|
color: #000000;
|
|
resize: none;
|
|
height: 100%;
|
|
width: 100%;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.note-box .repcontainer .sheet-auto-expand {
|
|
|
|
background-color: #eee;
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.07) 2px, transparent 2px);
|
|
}
|
|
|
|
/* Sparkle Icon */
|
|
.sparkle {
|
|
color: var(--sheet-primary-color);
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
align-self: center;
|
|
margin: 0 -4px;
|
|
background-image: url('https: //raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/star.png');
|
|
background-size: 10px 10px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
width: 11px;
|
|
height: 11px;
|
|
}
|
|
|
|
.note-box .hint,
|
|
.note-box .sparkle {
|
|
margin-top: -2px;
|
|
}
|
|
|
|
.note-box h2.hint {
|
|
margin-right: 3px;
|
|
}
|
|
|
|
/* Separator Line */
|
|
.separator {
|
|
border-bottom: 2px solid var(--sheet-primary-color);
|
|
margin-top: 8px;
|
|
margin-bottom: 4px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
/* ===================================== */
|
|
|
|
/* NPC TAB */
|
|
|
|
/* ===================================== */
|
|
|
|
.eem .sheet-npc {
|
|
grid-template-columns: auto auto;
|
|
grid-template-rows: min-content 8px 84px auto;
|
|
}
|
|
|
|
.eem .sheet-npc .note-box.flexible div {
|
|
height: calc(calc(100% - 23px) - mod(calc(100% - 23px), 21px));
|
|
}
|
|
|
|
/* ===================================== */
|
|
|
|
/* ADVERSARY DEFINITION TAB */
|
|
|
|
/* ===================================== */
|
|
|
|
.eem .sheet-adversary-definition {
|
|
font-family: 'DMSans', sans-serif;
|
|
grid-template-columns: 24px 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr;
|
|
grid-template-rows: repeat(6, 25px 18px 18px);
|
|
min-height: 417px;
|
|
font-weight: 600;
|
|
line-height: 21px;
|
|
}
|
|
|
|
.eem .sheet-adversary-definition .separator {
|
|
height: min-content;
|
|
grid-column-end: span 12;
|
|
margin: auto 0;
|
|
}
|
|
|
|
.eem .sheet-adversary-definition h2 {
|
|
font-size: 15.5px;
|
|
color: var(--sheet-primary-color);
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
line-height: 22px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.eem .sheet-adversary-definition input {
|
|
height: 20px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.eem .sheet-adversary-definition .levels {
|
|
grid-column-end: span 6;
|
|
display: grid;
|
|
grid-template-columns: max-content 64px max-content 64px;
|
|
}
|
|
|
|
.eem .sheet-adversary-definition input[type="number"] {
|
|
font-family: 'DMSans', sans-serif;
|
|
font-size: 16.5px;
|
|
font-weight: 600;
|
|
padding: 0;
|
|
width: 60px;
|
|
height: auto;
|
|
color: #000000;
|
|
margin: 0 4px;
|
|
text-align: center;
|
|
}
|
|
|
|
.eem .sheet-adversary-definition .levels :nth-child(3) {
|
|
margin-left: 8px;
|
|
|
|
}
|
|
|
|
.eem .sheet-adversary-definition input.adversary-type[value="creeper"]~.non-creeper {
|
|
display: none;
|
|
}
|
|
|
|
.eem .sheet-adversary-definition input.adversary-type[value="creeper"]~.creeper-swap {
|
|
grid-column: 7;
|
|
grid-row: 1;
|
|
}
|
|
|
|
/* ===================================== */
|
|
|
|
/* ADVERSARY PREVIEW TAB */
|
|
|
|
/* ===================================== */
|
|
|
|
.eem .sheet-adversary-preview {
|
|
grid-template-columns: 140px 140px 1fr;
|
|
grid-template-rows: 74px 110px 116px 110px calc(100% - 410px);
|
|
padding: 10px 8px 9px 16px !important;
|
|
min-height: 414px;
|
|
}
|
|
|
|
.eem .sheet-adversary-preview .adversary-basic-info,
|
|
.eem .sheet-adversary-preview .adversary-basic-info h2,
|
|
.eem .sheet-adversary-preview .adversary-basic-info span {
|
|
font-family: 'DMSans', sans-serif;
|
|
font-size: 15px;
|
|
color: var(--sheet-primary-color);
|
|
font-weight: 700;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.eem .sheet-adversary-preview .adversary-basic-info {
|
|
display: grid;
|
|
grid-column: span 3;
|
|
grid-template-columns: 124px 124px 1fr 1fr 1fr 3fr;
|
|
grid-column-gap: 10px;
|
|
margin-right: 8px;
|
|
margin-bottom: 8px;
|
|
padding: 0 8px;
|
|
background-color: var(--sheet-background-color);
|
|
border-top: 2px solid #cc9133;
|
|
border-bottom: 2px solid #cc9133;
|
|
}
|
|
|
|
.eem .sheet-adversary-preview .adversary-basic-info h2 {
|
|
line-height: 22px;
|
|
}
|
|
|
|
.eem .sheet-adversary-preview .adversary-basic-info div {
|
|
min-height: 60px;
|
|
width: 100%;
|
|
text-align: center;
|
|
place-content: center;
|
|
align-items: baseline;
|
|
|
|
}
|
|
|
|
.eem .sheet-adversary-preview .adversary-basic-info select {
|
|
margin: 0;
|
|
width: auto;
|
|
float: left;
|
|
padding: 0 4px;
|
|
height: 20px;
|
|
width: 75px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.eem .sheet-adversary-preview .adversary-basic-info .two-columns {
|
|
display: grid;
|
|
grid-template-columns: min-content min-content;
|
|
border: none;
|
|
padding: 0 5px;
|
|
text-align: left;
|
|
}
|
|
|
|
.eem .sheet-adversary-preview .adversary-basic-info .right-border {
|
|
position: relative;
|
|
z-index: 1;
|
|
border-right: 2px solid #cc9133;
|
|
}
|
|
|
|
.eem .sheet-adversary-preview .stat-wrangle,
|
|
.eem .sheet-adversary-preview .stat-parley {
|
|
display: none;
|
|
}
|
|
|
|
.eem .sheet-adversary-preview input.adversary-type[value="critter"]~.stat-wrangle,
|
|
.eem .sheet-adversary-preview input.adversary-type[value="creature"]~.stat-parley {
|
|
display: block;
|
|
}
|
|
|
|
.eem .sheet-adversary-preview input.adversary-type[value="creeper"]~.stat-courage,
|
|
.eem .sheet-adversary-preview input.adversary-type[value="creeper"]~.stat-defense,
|
|
.eem .sheet-adversary-preview input.adversary-type[value="creeper"]~.stat-mettle,
|
|
.eem .sheet-adversary-preview input.adversary-type[value="creeper"]~.adversary-basic-info .non-creeper {
|
|
display: none;
|
|
}
|
|
|
|
.eem .sheet-adversary-preview input.adversary-type[value="creeper"]~.adversary-basic-info .keywords {
|
|
grid-column: span 6;
|
|
}
|
|
|
|
.eem .sheet-adversary-preview input.adversary-type[value="creeper"]~.stat-attack {
|
|
grid-column: span 2;
|
|
grid-row: span 3;
|
|
justify-self: center;
|
|
height: 100%;
|
|
margin: auto;
|
|
padding-bottom: 20px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.eem .sheet-adversary-preview .stat-wrangle,
|
|
.eem .sheet-adversary-preview .stat-parley {
|
|
background-size: auto 58px;
|
|
background-position: 0 22px;
|
|
background-color: rgb(255 255 255 / 80%);
|
|
background-blend-mode: lighten;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.eem .sheet-adversary-preview .stat-parley {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/stats_5.png');
|
|
}
|
|
|
|
.eem .sheet-adversary-preview .stat-wrangle {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/stats_5b.png');
|
|
}
|
|
|
|
.eem .sheet-adversary-preview .stat-parley input.small,
|
|
.eem .sheet-adversary-preview .stat-wrangle input.small {
|
|
position: relative;
|
|
top: 16px;
|
|
left: 54px;
|
|
}
|
|
|
|
.eem .sheet-adversary-preview .stat-parley label.small,
|
|
.eem .sheet-adversary-preview .stat-wrangle label.small {
|
|
position: relative;
|
|
top: -40px;
|
|
left: 62px;
|
|
}
|
|
|
|
.eem .sheet-adversary-preview input.min-level[value="2"]~select option.lt-2,
|
|
.eem .sheet-adversary-preview input.min-level[value="3"]~select option.lt-3,
|
|
.eem .sheet-adversary-preview input.min-level[value="4"]~select option.lt-4,
|
|
.eem .sheet-adversary-preview input.min-level[value="5"]~select option.lt-5,
|
|
.eem .sheet-adversary-preview input.min-level[value="6"]~select option.lt-6,
|
|
.eem .sheet-adversary-preview input.min-level[value="7"]~select option.lt-7,
|
|
.eem .sheet-adversary-preview input.min-level[value="8"]~select option.lt-8,
|
|
.eem .sheet-adversary-preview input.min-level[value="9"]~select option.lt-9,
|
|
.eem .sheet-adversary-preview input.min-level[value="10"]~select option.lt-10,
|
|
.eem .sheet-adversary-preview input.max-level[value="1"]~select option.gt-1,
|
|
.eem .sheet-adversary-preview input.max-level[value="2"]~select option.gt-2,
|
|
.eem .sheet-adversary-preview input.max-level[value="3"]~select option.gt-3,
|
|
.eem .sheet-adversary-preview input.max-level[value="4"]~select option.gt-4,
|
|
.eem .sheet-adversary-preview input.max-level[value="5"]~select option.gt-5,
|
|
.eem .sheet-adversary-preview input.max-level[value="6"]~select option.gt-6,
|
|
.eem .sheet-adversary-preview input.max-level[value="7"]~select option.gt-7,
|
|
.eem .sheet-adversary-preview input.max-level[value="8"]~select option.gt-8,
|
|
.eem .sheet-adversary-preview input.max-level[value="9"]~select option.gt-9 {
|
|
display: none;
|
|
}
|
|
|
|
.eem .sheet-adversary-preview select option.goon,
|
|
.eem .sheet-adversary-preview select option.bruiser,
|
|
.eem .sheet-adversary-preview select option.champion {
|
|
display: none;
|
|
}
|
|
|
|
.eem .sheet-adversary-preview select option.tiny,
|
|
.eem .sheet-adversary-preview select option.small,
|
|
.eem .sheet-adversary-preview select option.medium,
|
|
.eem .sheet-adversary-preview select option.folk,
|
|
.eem .sheet-adversary-preview select option.large,
|
|
.eem .sheet-adversary-preview select option.huge {
|
|
display: none;
|
|
}
|
|
|
|
.eem .sheet-adversary-preview input.keyword-tiny[value="on"]~select option.tiny,
|
|
.eem .sheet-adversary-preview input.keyword-small[value="on"]~select option.small,
|
|
.eem .sheet-adversary-preview input.keyword-medium[value="on"]~select option.medium,
|
|
.eem .sheet-adversary-preview input.keyword-folk[value="on"]~select option.folk,
|
|
.eem .sheet-adversary-preview input.keyword-large[value="on"]~select option.large,
|
|
.eem .sheet-adversary-preview input.keyword-huge[value="on"]~select option.huge {
|
|
display: unset;
|
|
}
|
|
|
|
.eem .sheet-adversary-preview input.keyword-goon[value="on"]~select option.goon,
|
|
.eem .sheet-adversary-preview input.keyword-bruiser[value="on"]~select option.bruiser,
|
|
.eem .sheet-adversary-preview input.keyword-champion[value="on"]~select option.champion {
|
|
display: unset;
|
|
}
|
|
|
|
.eem .sheet-adversary-preview input.adversary-disadvantage[value="false"]~.stat-wrangle .disadvantage-note,
|
|
.eem .sheet-adversary-preview input.adversary-disadvantage[value="false"]~.stat-parley .disadvantage-note {
|
|
display: none;
|
|
}
|
|
|
|
/* ===================================== */
|
|
|
|
/* BACKGROUND TAB */
|
|
|
|
/* ===================================== */
|
|
|
|
.eem .sheet-background {
|
|
grid-template-columns: auto auto;
|
|
grid-template-rows: 105px 8px calc(calc(100% - 113px) / 2 - mod(calc(calc(100% - 113px)/2), 21px)) 21px auto;
|
|
}
|
|
|
|
.eem .sheet-background .note-box div {
|
|
height: calc(100% - mod(100%, 21px) - 19px);
|
|
}
|
|
|
|
/* Corner Box - Background Tab Variant */
|
|
.sheet-background .corner-box-wrapper,
|
|
.sheet-npc .corner-box-wrapper {
|
|
margin-top: 8px;
|
|
height: 73px;
|
|
margin-bottom: 25.5px;
|
|
}
|
|
|
|
.sheet-background textarea,
|
|
.sheet-npc textarea {
|
|
height: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.sheet-background .corner-box .content textarea,
|
|
.sheet-npc .corner-box .content textarea {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
height: 56px;
|
|
}
|
|
|
|
/* ===================================== */
|
|
|
|
/* NOTES TAB */
|
|
|
|
/* ===================================== */
|
|
|
|
.eem .sheet-notes .note-box {
|
|
margin-top: 4px;
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
.eem .sheet-notes .note-box div {
|
|
height: calc(100% - 16px - mod(calc(100% - 16px), 21px));
|
|
}
|
|
|
|
/* ===================================== */
|
|
|
|
/* INVENTORY TAB */
|
|
|
|
/* ===================================== */
|
|
|
|
.eem .sheet-inventory {
|
|
grid-template-rows: 50px calc((100% - 250px)) 60px 140px;
|
|
padding-bottom: 9px !important;
|
|
}
|
|
|
|
.eem .sheet-inventory .note-box div {
|
|
height: calc(100% - mod(100%, 21px) - 19px);
|
|
}
|
|
|
|
/* Inventory - Vertical Line Separator */
|
|
.eem .sheet-inventory .vertical-line {
|
|
height: calc(100% - 15px);
|
|
margin-top: 15px;
|
|
background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/vertical_line.png');
|
|
background-size: 6px 6px;
|
|
}
|
|
|
|
.eem .sheet-inventory .inventory-upper .vertical-line {
|
|
height: calc(100% - 35px);
|
|
margin-top: 35px;
|
|
}
|
|
|
|
/* Inventory - Upper Section */
|
|
.eem .sheet-inventory .inventory-upper {
|
|
display: inline-grid;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
grid-template-columns: 1fr 6px 1fr;
|
|
}
|
|
|
|
.eem .sheet-inventory .inventory-upper h2 {
|
|
margin-top: -2px;
|
|
padding: 2px;
|
|
text-align: center;
|
|
width: 100%;
|
|
background-color: var(--sheet-primary-color);
|
|
color: #ffffff;
|
|
padding-right: 6px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.eem .sheet-inventory .inventory-upper h2.worn {
|
|
padding-right: 30px;
|
|
}
|
|
|
|
.eem .sheet-inventory .inventory-upper textarea {
|
|
margin-top: -2px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.eem .sheet-inventory .inventory-upper .watermark {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 50%;
|
|
text-align: center;
|
|
align-content: center;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.eem .sheet-inventory .inventory-upper .watermark img {
|
|
margin-top: 28px;
|
|
}
|
|
|
|
.eem .sheet-inventory .inventory-upper .watermark.carried {
|
|
left: 50%;
|
|
}
|
|
|
|
/* Inventory - Lower Section */
|
|
.eem .sheet-inventory .inventory-lower {
|
|
display: inline-grid;
|
|
width: 100%;
|
|
height: 100%;
|
|
grid-template-columns: 2fr 6px 1fr 6px 1fr;
|
|
position: relative;
|
|
}
|
|
|
|
.eem .sheet-inventory .inventory-lower .crafting-icons {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 30px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.eem .sheet-inventory .inventory-lower .crafting-icons img {
|
|
max-height: 16px;
|
|
max-width: 20px;
|
|
margin: 8px;
|
|
}
|
|
|
|
.eem .sheet-inventory .inventory-lower .fake-textarea.crafting {
|
|
margin-top: 6px;
|
|
line-height: 16px;
|
|
font-size: 14px;
|
|
background-size: 100% 16px;
|
|
background-position-y: -2px;
|
|
margin-left: 24px;
|
|
width: calc(100% - 24px);
|
|
height: 128px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.eem .sheet-inventory .inventory-lower .fake-textarea.coins section {
|
|
display: inline-block;
|
|
line-height: 21px;
|
|
margin-right: 4px;
|
|
vertical-align: inherit;
|
|
}
|
|
|
|
.eem .sheet-inventory .inventory-lower .fake-textarea.coins section.small {
|
|
font-size: 10px;
|
|
color: var(--sheet-primary-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.eem .sheet-inventory .inventory-lower section.hint {
|
|
color: #999999;
|
|
margin-top: 0;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.eem .sheet-inventory .inventory-lower .fake-textarea.coins {
|
|
padding-top: 2px;
|
|
margin-top: 34px;
|
|
height: 84px;
|
|
display: grid;
|
|
grid-template-columns: min-content min-content auto;
|
|
grid-template-rows: repeat(4, 21px);
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.eem .sheet-inventory .inventory-lower .fake-textarea.rations {
|
|
padding-top: 2px;
|
|
margin-top: 44px;
|
|
height: 63px;
|
|
display: grid;
|
|
grid-template-columns: min-content auto;
|
|
grid-template-rows: repeat(3, 21px);
|
|
align-items: center;
|
|
column-gap: 4px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.eem .sheet-inventory .inventory-lower input {
|
|
border: none;
|
|
background-color: transparent;
|
|
font-family: 'DMSans', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
color: #000000;
|
|
width: inherit;
|
|
text-align: center;
|
|
}
|
|
|
|
.eem .sheet-inventory .inventory-lower .fake-textarea textarea {
|
|
height: 34px;
|
|
line-height: 16px;
|
|
font-size: 13px;
|
|
padding: 1px 2px;
|
|
margin: 0;
|
|
margin-bottom: -2px;
|
|
background: none;
|
|
box-sizing: border-box;
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* Firefox-specific adjustment using feature query */
|
|
@supports (-moz-appearance: none) {
|
|
.eem .sheet-inventory .inventory-lower .fake-textarea textarea {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
/* Inventory - Stripe Upper */
|
|
.eem .sheet-inventory .stripe.upper {
|
|
display: grid;
|
|
grid-template-columns: 2fr 2fr;
|
|
}
|
|
|
|
.eem .sheet-inventory .stripe.upper h2.inventory {
|
|
float: left;
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
margin: 0;
|
|
padding: 8px;
|
|
background-color: var(--sheet-primary-color);
|
|
color: #ffffff;
|
|
position: relative;
|
|
}
|
|
|
|
/* Inventory - Stripe Lower */
|
|
.eem .sheet-inventory .stripe.lower {
|
|
margin-top: 18px;
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 1fr;
|
|
}
|
|
|
|
.eem .sheet-inventory .stripe.lower section.hint {
|
|
display: inline-block;
|
|
margin: 12px 0;
|
|
margin-left: -4px;
|
|
font-weight: 600;
|
|
color: #999999;
|
|
}
|
|
|
|
.eem .sheet-inventory .right-align {
|
|
text-align: right;
|
|
}
|
|
|
|
/* Inventory - Stripe Base Styles */
|
|
.eem .sheet-inventory .stripe {
|
|
width: calc(100% - 16px);
|
|
margin: 8px;
|
|
height: 38px;
|
|
background-color: var(--sheet-background-color);
|
|
border-top: 2px solid var(--sheet-primary-color);
|
|
}
|
|
|
|
.eem .sheet-inventory .stripe h2 {
|
|
font: 13.5px 'DMSans', sans-serif;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
color: var(--sheet-primary-color);
|
|
display: block;
|
|
margin: 11px;
|
|
float: left;
|
|
align-content: center;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.eem .sheet-inventory .stripe h2.small {
|
|
margin: 11px 0;
|
|
}
|
|
|
|
.eem .sheet-inventory .stripe h2.treasure {
|
|
float: right;
|
|
}
|
|
|
|
.eem .sheet-inventory .stripe label {
|
|
display: inline;
|
|
font-size: 8px;
|
|
color: var(--sheet-primary-color);
|
|
line-height: 100%;
|
|
margin: 0;
|
|
align-content: center;
|
|
font-weight: 600;
|
|
margin-left: 4px;
|
|
text-rendering: optimizelegibility;
|
|
}
|
|
|
|
.eem .sheet-inventory .stripe .checkbox-group {
|
|
display: inline-grid;
|
|
grid-template-columns: 8px min-content;
|
|
grid-template-rows: 50% 50%;
|
|
height: 26px;
|
|
align-content: center;
|
|
margin: 6px;
|
|
margin-left: 16px;
|
|
float: left;
|
|
}
|
|
|
|
.eem .sheet-inventory .stripe input.small {
|
|
float: left;
|
|
width: 22px;
|
|
background-color: transparent;
|
|
border: none;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
color: #000000;
|
|
padding: 0;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.eem .sheet-inventory .stripe img {
|
|
float: left;
|
|
}
|
|
|
|
.eem .sheet-inventory .stripe img.crafting {
|
|
height: 53px;
|
|
margin-top: -8px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.eem .sheet-inventory .stripe img.coins {
|
|
height: 62px;
|
|
margin-top: -10px;
|
|
}
|
|
|
|
.eem .sheet-inventory .stripe img.rations {
|
|
height: 62px;
|
|
margin-top: -11px;
|
|
}
|
|
|
|
.eem .sheet-inventory .stripe div.treasure {
|
|
float: right;
|
|
width: 73px;
|
|
height: 68px;
|
|
margin-top: -16px;
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/treasure.png");
|
|
background-repeat: no-repeat;
|
|
background-size: auto 68px;
|
|
margin-right: -5px;
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
.eem .sheet-inventory .stripe div.treasure input {
|
|
width: 36px;
|
|
background-color: transparent;
|
|
border: none;
|
|
text-align: center;
|
|
font: 18px 'DMSans', sans-serif;
|
|
font-weight: 600;
|
|
color: #000000;
|
|
padding: 0;
|
|
padding-left: 8px;
|
|
margin: 24px 0 0 24px;
|
|
}
|
|
|
|
.eem .sheet-inventory .stripe .corner-box-wrapper {
|
|
float: left;
|
|
height: 32px;
|
|
width: 132px;
|
|
margin: 0;
|
|
margin-top: -3px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.eem .sheet-inventory .stripe .corner-box-wrapper .content {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.eem .sheet-inventory .stripe .corner-box-wrapper .content label {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.eem .sheet-inventory .stripe .corner-box-wrapper .content input {
|
|
text-align: center;
|
|
}
|
|
|
|
/* ===================================== */
|
|
|
|
/* PORTRAIT TAB */
|
|
|
|
/* ===================================== */
|
|
.eem .sheet-portrait {
|
|
grid-template-columns: auto 430px auto;
|
|
place-items: center;
|
|
}
|
|
|
|
.eem .sheet-portrait img {
|
|
height: 360px;
|
|
border: 8px double var(--sheet-primary-color);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.eem .sheet-portrait img:not([src]) {
|
|
border: none;
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/stars.png');
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
outline: 4px solid #ffffff;
|
|
outline-offset: -2px;
|
|
width: 105px;
|
|
}
|
|
|
|
/* ===================================== */
|
|
|
|
/* SETTINGS TAB */
|
|
|
|
/* ===================================== */
|
|
.eem .sheet-settings {
|
|
line-height: 28px;
|
|
grid-template-rows: repeat(7, min-content);
|
|
}
|
|
|
|
.eem .sheet-settings label {
|
|
margin: 0;
|
|
line-height: 28px;
|
|
color: var(--sheet-primary-color);
|
|
}
|
|
|
|
.eem .sheet-settings span {
|
|
margin: 0 8px;
|
|
}
|
|
|
|
.eem .sheet-settings .separator {
|
|
margin-right: 0;
|
|
height: min-content;
|
|
}
|
|
|
|
.eem .sheet-settings select {
|
|
margin: 0;
|
|
}
|
|
|
|
.eem .sheet-settings .hint {
|
|
font-size: 10px;
|
|
color: #999999;
|
|
font-family: 'DMSans', sans-serif;
|
|
letter-spacing: 0;
|
|
font-weight: 600;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.eem .sheet-settings .sparkle {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.eem .sheet-settings .settings-radio {
|
|
display: grid;
|
|
grid-template-columns: minmax(250px, max-content) min-content min-content min-content min-content 16px auto;
|
|
grid-template-rows: min-content;
|
|
height: min-content;
|
|
}
|
|
|
|
.eem .sheet-settings .settings-dropdown {
|
|
display: grid;
|
|
grid-template-columns: minmax(250px, max-content) min-content 16px auto;
|
|
height: min-content;
|
|
}
|
|
|
|
/* ===================================== */
|
|
|
|
/* UTILITY CLASSES */
|
|
|
|
/* ===================================== */
|
|
|
|
/* Hint Text Styling */
|
|
h2.hint,
|
|
label.hint {
|
|
width: fit-content;
|
|
display: inline-block;
|
|
}
|
|
|
|
section.hint {
|
|
font-size: 9px;
|
|
color: #999999;
|
|
display: inline-flex;
|
|
width: fit-content;
|
|
vertical-align: middle;
|
|
font-family: 'DMSans', sans-serif;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.eem .note-box .repitem .sheet-auto-expand {
|
|
display: none;
|
|
font-family: 'DMSans', sans-serif;
|
|
}
|
|
|
|
.eem .note-box .repitem input.skilledit[value="on"]~.sheet-auto-expand {
|
|
display: block;
|
|
min-height: 21px;
|
|
margin-top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.container textarea.skill-description {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #ccc #eee;
|
|
}
|
|
|
|
.eem .note-box .repitem input {
|
|
font-family: 'DMSans', sans-serif;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.eem .note-box .repitem input[type="text"] {
|
|
border: none;
|
|
outline: none;
|
|
background-color: transparent;
|
|
color: #000;
|
|
font-size: 15px;
|
|
text-transform: uppercase;
|
|
padding: 0;
|
|
height: 16px;
|
|
width: calc(100% - 24px);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.eem .note-box .repitem input[type="checkbox"] {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
width: 16px;
|
|
height: 16px;
|
|
font-size: 20px;
|
|
line-height: 18px;
|
|
text-align: center;
|
|
border: none;
|
|
position: relative;
|
|
margin-right: 6px;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
background-color: transparent;
|
|
color: var(--sheet-primary-color);
|
|
padding: 0;
|
|
margin: 0;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
.eem .note-box .repitem input[type="checkbox"]:after {
|
|
content: "+";
|
|
display: block;
|
|
width: 16px;
|
|
}
|
|
|
|
.eem .note-box .repitem input[type="checkbox"]:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.eem .note-box .repitem input[type="checkbox"]:checked:after {
|
|
content: '-';
|
|
display: block;
|
|
width: 16px;
|
|
}
|
|
|
|
.eem .note-box .repeating_skills_container {
|
|
position: relative;
|
|
height: calc(100% - mod(100%, 21px));
|
|
width: 100%;
|
|
}
|
|
|
|
.eem .sheet-attributes .note-box .repeating_skills_container {
|
|
height: calc(100% - mod(100%, 21px));
|
|
margin-top: -12px;
|
|
}
|
|
|
|
.eem .note-box .repcontainer {
|
|
position: relative;
|
|
height: calc(100% - 56px);
|
|
overflow-y: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--sheet-primary-color) #ffffff;
|
|
width: 100%;
|
|
}
|
|
|
|
.eem .sheet-attributes .note-box .repcontainer {
|
|
height: calc(100% - 38px);
|
|
}
|
|
|
|
.eem .note-box .repcontrol {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.eem .note-box .repcontrol_add,
|
|
.eem .note-box .repcontrol_edit,
|
|
.eem .note-box .repcontrol_move,
|
|
.eem .note-box .repcontrol_del {
|
|
border: 1px solid var(--sheet-primary-color);
|
|
border-style: outset;
|
|
background: linear-gradient(#fff, #fff, var(--sheet-background-color));
|
|
text-transform: uppercase;
|
|
font: bold 14px 'DMSans', sans-serif;
|
|
color: var(--sheet-primary-color);
|
|
}
|
|
|
|
.eem .note-box .repcontrol_move,
|
|
.eem .note-box .repcontrol_del {
|
|
width: 14px;
|
|
height: 14px;
|
|
padding: 2px;
|
|
}
|
|
|
|
.eem .note-box .repcontrol_move {
|
|
float: right;
|
|
padding-top: 0;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.eem .note-box .repcontrol_del {
|
|
font-family: 'Pictos', sans-serif;
|
|
font-weight: normal;
|
|
margin-left: 1px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.eem .sheet-auto-expand {
|
|
position: relative;
|
|
/* For absolute positioning */
|
|
overflow: hidden;
|
|
/* Hide overflow */
|
|
}
|
|
|
|
.eem .sheet-auto-expand span {
|
|
visibility: hidden;
|
|
/* Hide the span */
|
|
white-space: pre-wrap;
|
|
/* Preserve formatting */
|
|
display: block;
|
|
/* Takes full width */
|
|
font: inherit;
|
|
font-size: 14.5px;
|
|
letter-spacing: 0;
|
|
line-height: 21px;
|
|
/* Match textarea padding */
|
|
}
|
|
|
|
.eem .sheet-auto-expand textarea {
|
|
position: absolute;
|
|
/* Overlay the span */
|
|
top: 4px;
|
|
left: 4px;
|
|
width: calc(100% - 8px);
|
|
height: 100%;
|
|
/* Cover the span area */
|
|
resize: none;
|
|
/* Disable manual resizing */
|
|
box-sizing: border-box;
|
|
/* Important for padding/border */
|
|
overflow: hidden;
|
|
background: none;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
/* ===================================== */
|
|
|
|
/* FOOTER */
|
|
|
|
/* ===================================== */
|
|
|
|
.footer {
|
|
font: 9px 'DMSans', sans-serif;
|
|
color: var(--sheet-primary-color);
|
|
width: 100%;
|
|
display: block;
|
|
text-align: center;
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
/* ===================================== */
|
|
|
|
/* Share Button */
|
|
|
|
/* ===================================== */
|
|
|
|
.btn-share {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 4px;
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
position: absolute;
|
|
top: 3px;
|
|
right: 0;
|
|
}
|
|
|
|
.btn-share div {
|
|
width: 100%;
|
|
height: 100%;
|
|
mask: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/icon-chat.svg');
|
|
mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center;
|
|
background-color: var(--sheet-primary-color);
|
|
}
|
|
|
|
.btn-share:hover div {
|
|
background-color: #000;
|
|
} |