diff --git a/LandOfEem/fonts/dm-sans-v17-latin_latin-ext-600.woff2 b/LandOfEem/fonts/dm-sans-v17-latin_latin-ext-600.woff2 new file mode 100644 index 000000000000..631d7fb11c96 Binary files /dev/null and b/LandOfEem/fonts/dm-sans-v17-latin_latin-ext-600.woff2 differ diff --git a/LandOfEem/fonts/dm-sans-v17-latin_latin-ext-900.woff2 b/LandOfEem/fonts/dm-sans-v17-latin_latin-ext-900.woff2 new file mode 100644 index 000000000000..11ec53ed2b67 Binary files /dev/null and b/LandOfEem/fonts/dm-sans-v17-latin_latin-ext-900.woff2 differ diff --git a/LandOfEem/fonts/dm-sans-v17-latin_latin-ext-regular.woff2 b/LandOfEem/fonts/dm-sans-v17-latin_latin-ext-regular.woff2 new file mode 100644 index 000000000000..61e2f9354ee3 Binary files /dev/null and b/LandOfEem/fonts/dm-sans-v17-latin_latin-ext-regular.woff2 differ diff --git a/LandOfEem/images/carried.png b/LandOfEem/images/carried.png new file mode 100644 index 000000000000..c71e1bf6bd8e Binary files /dev/null and b/LandOfEem/images/carried.png differ diff --git a/LandOfEem/images/coins.png b/LandOfEem/images/coins.png new file mode 100644 index 000000000000..141cd407be57 Binary files /dev/null and b/LandOfEem/images/coins.png differ diff --git a/LandOfEem/images/crafting.png b/LandOfEem/images/crafting.png new file mode 100644 index 000000000000..8d7ce9abd695 Binary files /dev/null and b/LandOfEem/images/crafting.png differ diff --git a/LandOfEem/images/dice.png b/LandOfEem/images/dice.png new file mode 100644 index 000000000000..1a9e81cac647 Binary files /dev/null and b/LandOfEem/images/dice.png differ diff --git a/LandOfEem/images/logo-flat.png b/LandOfEem/images/logo-flat.png new file mode 100644 index 000000000000..f6f253195a49 Binary files /dev/null and b/LandOfEem/images/logo-flat.png differ diff --git a/LandOfEem/images/material_beast.png b/LandOfEem/images/material_beast.png new file mode 100644 index 000000000000..1cd27b1edc50 Binary files /dev/null and b/LandOfEem/images/material_beast.png differ diff --git a/LandOfEem/images/material_elemental.png b/LandOfEem/images/material_elemental.png new file mode 100644 index 000000000000..af0993eae744 Binary files /dev/null and b/LandOfEem/images/material_elemental.png differ diff --git a/LandOfEem/images/material_fish.png b/LandOfEem/images/material_fish.png new file mode 100644 index 000000000000..f37ae2a5c1ef Binary files /dev/null and b/LandOfEem/images/material_fish.png differ diff --git a/LandOfEem/images/material_herb.png b/LandOfEem/images/material_herb.png new file mode 100644 index 000000000000..42c3c063d565 Binary files /dev/null and b/LandOfEem/images/material_herb.png differ diff --git a/LandOfEem/images/rations.png b/LandOfEem/images/rations.png new file mode 100644 index 000000000000..0c4b6cd86d13 Binary files /dev/null and b/LandOfEem/images/rations.png differ diff --git a/LandOfEem/images/small_frame.svg b/LandOfEem/images/small_frame.svg new file mode 100644 index 000000000000..424ce77201da --- /dev/null +++ b/LandOfEem/images/small_frame.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/LandOfEem/images/stars.png b/LandOfEem/images/stars.png new file mode 100644 index 000000000000..f0dd25c7a81a Binary files /dev/null and b/LandOfEem/images/stars.png differ diff --git a/LandOfEem/images/stats_1.png b/LandOfEem/images/stats_1.png new file mode 100644 index 000000000000..b5fd70ff067a Binary files /dev/null and b/LandOfEem/images/stats_1.png differ diff --git a/LandOfEem/images/stats_2.png b/LandOfEem/images/stats_2.png new file mode 100644 index 000000000000..b3a6a85d49ff Binary files /dev/null and b/LandOfEem/images/stats_2.png differ diff --git a/LandOfEem/images/stats_3.png b/LandOfEem/images/stats_3.png new file mode 100644 index 000000000000..72edf2e4e583 Binary files /dev/null and b/LandOfEem/images/stats_3.png differ diff --git a/LandOfEem/images/stats_4.png b/LandOfEem/images/stats_4.png new file mode 100644 index 000000000000..fc03e8a4c804 Binary files /dev/null and b/LandOfEem/images/stats_4.png differ diff --git a/LandOfEem/images/treasure.png b/LandOfEem/images/treasure.png new file mode 100644 index 000000000000..09c13655c833 Binary files /dev/null and b/LandOfEem/images/treasure.png differ diff --git a/LandOfEem/images/vertical_line.png b/LandOfEem/images/vertical_line.png new file mode 100644 index 000000000000..88780762fbc3 Binary files /dev/null and b/LandOfEem/images/vertical_line.png differ diff --git a/LandOfEem/images/worn.png b/LandOfEem/images/worn.png new file mode 100644 index 000000000000..f181a67c0a61 Binary files /dev/null and b/LandOfEem/images/worn.png differ diff --git a/LandOfEem/images/xp_bw.png b/LandOfEem/images/xp_bw.png new file mode 100644 index 000000000000..21b7ab8909fd Binary files /dev/null and b/LandOfEem/images/xp_bw.png differ diff --git a/LandOfEem/landofeem.css b/LandOfEem/landofeem.css index 7f4b982af9bc..4b4a82ae38ae 100644 --- a/LandOfEem/landofeem.css +++ b/LandOfEem/landofeem.css @@ -4,37 +4,41 @@ /* ===================================== */ -/* New Atten - Primary Font Family */ +/* DMSans - Primary Font Family */ @font-face { - font-family: 'New Atten'; - src: url('https://raw.githubusercontent.com/blaze-sanecki/LandOfEem/main/fonts/NewAttenRegular.woff2') format('woff2'), - url('https://raw.githubusercontent.com/blaze-sanecki/LandOfEem/main/fonts/NewAttenRegular.woff') format('woff'); + 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: 'New Atten'; - src: url('https://raw.githubusercontent.com/blaze-sanecki/LandOfEem/main/fonts/NewAttenBold.woff2') format('woff2'), - url('https://raw.githubusercontent.com/blaze-sanecki/LandOfEem/main/fonts/NewAttenBold.woff') format('woff'); - font-weight: 700; + 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: 'New Atten'; - src: url('https://raw.githubusercontent.com/blaze-sanecki/LandOfEem/main/fonts/NewAttenExtraBold.woff2') format('woff2'), - url('https://raw.githubusercontent.com/blaze-sanecki/LandOfEem/main/fonts/NewAttenExtraBold.woff') format('woff'); - font-weight: 800; + 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: 'New Atten'; - src: url('https://raw.githubusercontent.com/blaze-sanecki/LandOfEem/main/fonts/NewAttenItalic.woff2') format('woff2'), - url('https://raw.githubusercontent.com/blaze-sanecki/LandOfEem/main/fonts/NewAttenItalic.woff') format('woff'); - font-weight: normal; - font-style: italic; +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; } /* ===================================== */ @@ -47,7 +51,7 @@ padding: 0; } -.ui-dialog .charsheet input[type="number"]{ +.ui-dialog .charsheet input[type="number"] { width: 100%; } @@ -58,7 +62,7 @@ padding: 0; margin: 0; border: none; - font-size: 16px; + font-size: 15px; text-shadow: none; box-shadow: none; text-align: left; @@ -66,20 +70,20 @@ .ui-dialog .charsheet .treasure button[type=action]:hover, .ui-dialog .charsheet .sheet-attributes button[type=action]:hover { - color: #cc9133; + color: var(--sheet-primary-color); text-decoration: underline solid 1px #000000; - font-weight: 700; + font-weight: 600; } .ui-dialog .charsheet button[type=action].treasure { float: right; - border:none; - background:transparent; + border: none; + background: transparent; } .ui-dialog .charsheet button[type=action]:hover h2 { - color:#000000; - text-decoration: underline solid 1px #cc9133; + color: #000000; + text-decoration: underline solid 1px var(--sheet-primary-color); } .ui-dialog .charsheet button[type=action]::before { @@ -92,11 +96,13 @@ .sheet-rolltemplate-attack, .sheet-rolltemplate-check { + --sheet-primary-color: #cc9133; + --sheet-background-color: #fff4e7; background-color: #ffffff; - border: solid #cc9133 2px; + border: solid var(--sheet-primary-color) 2px; border-radius: 8px; - color:#000000; - overflow:hidden; + color: #000000; + overflow: hidden; } @@ -109,74 +115,77 @@ .sheet-rolltemplate-attack h3, .sheet-rolltemplate-check h3 { - padding:8px; + padding: 8px; text-align: center; - background-color: #faf4eb; - color:#000000; + background-color: var(--sheet-background-color); + color: #000000; font-size: 14px; } .sheet-rolltemplate-attack h4, .sheet-rolltemplate-check h4 { - padding:4px; + padding: 4px; font-size: 13px; font-weight: normal; - color:#000000; + color: #000000; } .sheet-rolltemplate-attack h5, .sheet-rolltemplate-check h5 { - padding:4px; + padding: 4px; font-size: 11px; font-weight: bold; text-align: center; - color:#e62c2c; - background-color: #faf4eb; - margin-top:-8px; + color: #e62c2c; + background-color: var(--sheet-background-color); + margin-top: -8px; } .sheet-rolltemplate-attack h2, .sheet-rolltemplate-check h2 { - background-color: #cc9133; + background-color: var(--sheet-primary-color); font-size: 14px; - font-weight:800; + font-weight: 900; text-transform: uppercase; - color:#ffffff; - padding:4px; + color: #ffffff; + padding: 4px; line-height: 16px; } .sheet-rolltemplate-attack h2 i, .sheet-rolltemplate-check h2 i { font-size: 12px; - font-weight:normal; + font-weight: normal; text-transform: none; - color:#faf4eb; - padding:4px; + color: var(--sheet-background-color); + padding: 4px; line-height: 16px; } .sheet-rolltemplate-attack span.inlinerollresult, .sheet-rolltemplate-check span.inlinerollresult { - border: 1.5px solid #cc9133; - border-radius: 4px; + 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; + border: 2px solid #08a500; } + .sheet-rolltemplate-attack span.inlinerollresult.fullfail, .sheet-rolltemplate-check span.inlinerollresult.fullfail { - border: 2px solid #e62c2c; + 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; + font-weight: bolder; + font-size: 20px; + line-height: 30px; + border-radius: 7px; + border-width: 4px; + border-style: outset; } /* ===================================== */ @@ -190,7 +199,7 @@ --radius: 7px; --thickness: 2px; - background-color: #faf4eb; + background-color: var(--sheet-background-color); margin: 0; padding: 0; min-width: 850px; @@ -198,6 +207,18 @@ 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; @@ -234,17 +255,15 @@ 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: #cc9133; + 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; } @@ -258,16 +277,14 @@ 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)) - ); + 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; } @@ -277,15 +294,15 @@ margin-bottom: -12px; margin-left: 8px; background-color: white; - color: #cc9133; + color: var(--sheet-primary-color); text-transform: uppercase; height: 16px; width: fit-content; padding: 4px; position: relative; z-index: 1; - font: 13px 'New Atten', sans-serif; - font-weight: 700; + font: 13px 'DMSans', sans-serif; + font-weight: 600; } /* Corner Box - Content Area */ @@ -309,9 +326,9 @@ /* Corner Box - Labels */ .corner-box label { - font: 13px 'New Atten', sans-serif; - font-weight: 800; - color: #cc9133; + font: 12px 'DMSans', sans-serif; + font-weight: 900; + color: var(--sheet-primary-color); display: flex; align-items: center; padding-right: 4px; @@ -325,9 +342,10 @@ .corner-box input { border: none; background-color: #ffffff; - font-family: 'New Atten', sans-serif; - font-size: 18px; - font-weight: 700; + font-family: 'DMSans', sans-serif; + font-size: 16.5px; + line-height: 22px; + font-weight: 600; padding: 2px 4px; width: 100%; height: auto; @@ -338,11 +356,11 @@ /* Corner Box - Textarea Fields */ .corner-box .content textarea { - width: -webkit-fill-available; + width: 96%; resize: none; line-height: 18px; - font-family: 'New Atten', sans-serif; - font-size: 16px; + font-family: 'DMSans', sans-serif; + font-size: 14.5px; font-weight: 400; height: 54px; border: none; @@ -394,17 +412,42 @@ 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: 16px; + font-size: 15px; padding: 0 4px; + margin-top: -2px; } .xp-background { + position: relative; + height: min-content; + width: min-content; +} + +.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: 100%; + width: 100%; + mask-size: 100%; + mix-blend-mode: plus-lighter; +} + +.xp-background img { position: relative; top: -17px; left: -11px; @@ -421,7 +464,7 @@ /* Nav Bar Container */ .nav-bar { - background-color: #cc9133; + background-color: var(--sheet-primary-color); margin-left: 8px; margin-right: 8px; border-top-left-radius: 8px; @@ -430,19 +473,20 @@ /* Nav Bar Buttons */ .nav-bar button { - font-family: 'New Atten', sans-serif; - font-weight: 700; - font-size: 16px; + font-family: 'DMSans', sans-serif; + font-weight: 600; + font-size: 15px; display: inline-block; padding: 5px 10px; padding-bottom: 7px; - border: 2px solid #cc9133; + border: 2px solid var(--sheet-primary-color); border-bottom: none; border-top-left-radius: 7px; border-top-right-radius: 7px; - background-color: #cc9133; + background-color: var(--sheet-primary-color); color: #ffffff; cursor: pointer; + letter-spacing: -0.25px; } /* Nav Bar Button Hover */ @@ -458,9 +502,11 @@ .sheet-attributes, .sheet-inventory, .sheet-background, -.sheet-notes { +.sheet-notes, +.sheet-portrait, +.sheet-settings { display: none; - border: 2px solid #cc9133; + border: 2px solid var(--sheet-primary-color); border-top: none; margin: 8px; margin-top: 0; @@ -469,12 +515,14 @@ } /* Active Tab Button Styling */ -.pc .sheet-tabstoggle[value="attributes"]~div.nav-bar .sheet-button0, -.pc .sheet-tabstoggle[value="inventory"]~div.nav-bar .sheet-button1, -.pc .sheet-tabstoggle[value="background"]~div.nav-bar .sheet-button2, -.pc .sheet-tabstoggle[value="notes"]~div.nav-bar .sheet-button3 { +.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 { background-color: #ffffff; - color: #cc9133; + color: var(--sheet-primary-color); position: relative; top: -7px; padding-bottom: 14px; @@ -482,11 +530,24 @@ 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 */ -.pc .sheet-tabstoggle[value="attributes"]~div.sheet-attributes, -.pc .sheet-tabstoggle[value="inventory"]~div.sheet-inventory, -.pc .sheet-tabstoggle[value="background"]~div.sheet-background, -.pc .sheet-tabstoggle[value="notes"]~div.sheet-notes { +.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; } @@ -496,39 +557,75 @@ /* ===================================== */ -.pc .header { - background-color: #faf4eb; - color: #cc9133; +.eem .header { + background-color: var(--sheet-background-color); + color: var(--sheet-primary-color); display: grid; height: 100px; - grid-template-columns: 4fr 3fr 100px 190px; + grid-template-columns: 4fr 3fr 100px 140px 82px; } -.pc .header .frame { +.eem .header .frame { padding: 8px; margin: 8px; - border: 1px solid #cc9133; + border: 1px solid var(--sheet-primary-color); background-color: #ffffff; display: block; height: 40px; border-radius: 8px; } -.pc .header .logo { - height: 62px; - margin: 20px; - margin-left: 4px; +.eem .header .logo { + margin-top: 27px; + margin-left: -4px; margin-right: 0; - max-width: none; + 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: 700; + font-weight: 600; } .header small { - color: #cc9133; + color: var(--sheet-primary-color); font-size: 10px; letter-spacing: -0.02em; display: block; @@ -544,14 +641,14 @@ /* ===================================== */ /* Attributes Tab Layout */ -.pc .sheet-attributes { +.eem .sheet-attributes { grid-template-columns: minmax(auto, 240px) minmax(auto, 130px) 1fr 1fr; padding: 10px 8px 9px 16px !important; } /* Attribute Box Component */ .attribute-box { - font-family: 'New Atten', sans-serif; + font-family: 'DMSans', sans-serif; font-size: 16px; grid-template-columns: 95px 35px auto; display: grid; @@ -572,9 +669,9 @@ } .attribute-box h2 { - font-size: 16px; - color: #cc9133; - font-weight: 800; + font-size: 15.5px; + color: var(--sheet-primary-color); + font-weight: 900; text-transform: uppercase; line-height: 22px; overflow: visible; @@ -582,18 +679,18 @@ width: 100px; } -.charsheet input[type="number"]::-webkit-inner-spin-button, +.charsheet input[type="number"]::-webkit-inner-spin-button, .charsheet input[type="number"]::-webkit-outer-spin-button { display: none; } -.charsheet input[type="number"]{ +.charsheet input[type="number"] { -moz-appearance: textfield; } .ui-dialog .charsheet .attribute-box input { border: none; - border-bottom: 0.5px solid #cc9133; + border-bottom: 0.5px solid var(--sheet-primary-color); border-radius: 0; background-color: transparent; width: 30px; @@ -607,7 +704,7 @@ /* Dice Field Component */ .dice-field { - background-image: url('https://raw.githubusercontent.com/blaze-sanecki/LandOfEem/main/images/dice.png'); + background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/dice.png'); width: 62px; height: 71px; display: block; @@ -623,14 +720,14 @@ border: none; background-color: transparent; font-size: 24px; - font-weight: 700; + font-weight: 600; text-align: center; color: #000000; } /* Stat Box Base Styles */ .stat-box { - font-family: 'New Atten', sans-serif; + font-family: 'DMSans', sans-serif; font-size: 16px; max-height: 100px; margin-left: 10px; @@ -638,9 +735,9 @@ } .stat-box h2 { - font-size: 16px; - color: #cc9133; - font-weight: 800; + font-size: 15.5px; + color: var(--sheet-primary-color); + font-weight: 900; text-transform: uppercase; line-height: 22px; overflow: visible; @@ -657,7 +754,7 @@ border: none; background-color: transparent; font-size: 24px; - font-weight: 700; + font-weight: 600; text-align: center; color: #000000; } @@ -668,32 +765,32 @@ height: 48px; border: none; background-color: transparent; - background-image: url('https://raw.githubusercontent.com/blaze-sanecki/LandOfEem/main/images/small_frame.svg'); + 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: 16px; - font-weight: 700; + font-size: 15px; + font-weight: 600; text-align: center; color: #000000; border-radius: 8px; } label.small { - font-size: 10px; + font-size: 9px; margin-bottom: 0; padding-right: 0; display: block; position: relative; overflow: visible; height: 0; - width: 36px; + width: 50px; text-align: center; } /* Stat Box - Courage Variant */ .stat-box.stat-courage { position: relative; - background: 0 22px url("https://raw.githubusercontent.com/blaze-sanecki/LandOfEem/main/images/stats_1.png") no-repeat; + 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; @@ -711,7 +808,7 @@ label.small { .stat-box.stat-courage label.small { top: 8px; - left: 64px; + left: 60px; } /* Stat Box - Attack Variant */ @@ -734,13 +831,13 @@ label.small { .stat-box.stat-attack label.small { top: -12px; - left: 68px; + left: 62px; } /* Stat Box - Defense Variant */ .stat-box.stat-defense { position: relative; - background: 0 22px url("https://raw.githubusercontent.com/blaze-sanecki/LandOfEem/main/images/stats_3.png") no-repeat; + 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; @@ -758,13 +855,13 @@ label.small { .stat-box.stat-defense label.small { top: 17px; - left: 68px; + left: 61px; } /* Stat Box - Quest Points Variant */ .stat-box.stat-quest { position: relative; - background: 0 22px url("https://raw.githubusercontent.com/blaze-sanecki/LandOfEem/main/images/stats_4.png") no-repeat; + 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; @@ -782,10 +879,10 @@ label.small { } .note-box h2 { - font-family: 'New Atten', sans-serif; - font-size: 16px; - color: #cc9133; - font-weight: 800; + font-family: 'DMSans', sans-serif; + font-size: 15px; + color: var(--sheet-primary-color); + font-weight: 900; text-transform: uppercase; line-height: 22px; overflow: visible; @@ -794,14 +891,15 @@ label.small { position: relative; } -.note-box textarea, .note-box .fake-textarea { +.note-box textarea, +.note-box .fake-textarea { border: none; background-color: transparent; background-image: linear-gradient(#eeeeee 2px, transparent 2px); background-size: 100% 21px; background-attachment: local; - font-family: 'New Atten', sans-serif; - font-size: 16px; + font-family: 'DMSans', sans-serif; + font-size: 14.5px; font-weight: 400; line-height: 21px; margin-top: -4px; @@ -815,7 +913,7 @@ label.small { /* Sparkle Icon */ .sparkle { font-size: 11px; - color: #cc9133; + color: var(--sheet-primary-color); display: inline-block; vertical-align: middle; width: fit-content; @@ -834,7 +932,7 @@ label.small { /* Separator Line */ .separator { - border-bottom: 2px solid #cc9133; + border-bottom: 2px solid var(--sheet-primary-color); margin-top: 8px; margin-bottom: 4px; margin-right: 20px; @@ -846,7 +944,7 @@ label.small { /* ===================================== */ -.pc .sheet-background { +.eem .sheet-background { grid-template-columns: auto auto; grid-template-rows: min-content 8px auto auto; } @@ -856,11 +954,11 @@ label.small { /* NOTES TAB */ /* ===================================== */ -.pc .sheet-notes { +.eem .sheet-notes { height: 100%; } -.pc .sheet-notes .note-box { +.eem .sheet-notes .note-box { margin-top: 4px; padding-bottom: 6px; } @@ -871,26 +969,26 @@ label.small { /* ===================================== */ -.pc .sheet-inventory { +.eem .sheet-inventory { height: 100%; grid-template-rows: 50px 158px 60px 148px; padding-bottom: 9px !important; } /* Inventory - Vertical Line Separator */ -.pc .sheet-inventory .vertical-line { +.eem .sheet-inventory .vertical-line { height: 128px; margin-top: 15px; - background: url('https://raw.githubusercontent.com/blaze-sanecki/LandOfEem/main/images/vertical_line.png'); + background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/vertical_line.png'); background-size: 6px 6px; } -.pc .sheet-inventory .inventory-upper .vertical-line { +.eem .sheet-inventory .inventory-upper .vertical-line { margin-top: 35px; } /* Inventory - Upper Section */ -.pc .sheet-inventory .inventory-upper { +.eem .sheet-inventory .inventory-upper { display: inline-grid; position: relative; width: 100%; @@ -898,29 +996,29 @@ label.small { grid-template-columns: 1fr 6px 1fr; } -.pc .sheet-inventory .inventory-upper h2 { +.eem .sheet-inventory .inventory-upper h2 { margin-top: -2px; padding: 2px; text-align: center; width: 100%; - background-color: #cc9133; + background-color: var(--sheet-primary-color); color: #ffffff; padding-right: 6px; position: relative; z-index: 2; } -.pc .sheet-inventory .inventory-upper h2.worn { +.eem .sheet-inventory .inventory-upper h2.worn { padding-right: 30px; } -.pc .sheet-inventory .inventory-upper textarea { +.eem .sheet-inventory .inventory-upper textarea { margin-top: -2px; position: relative; z-index: 1; } -.pc .sheet-inventory .inventory-upper .watermark { +.eem .sheet-inventory .inventory-upper .watermark { position: absolute; top: 0; left: 0; @@ -931,39 +1029,39 @@ label.small { opacity: 0.2; } -.pc .sheet-inventory .inventory-upper .watermark img { +.eem .sheet-inventory .inventory-upper .watermark img { margin-top: 28px; } -.pc .sheet-inventory .inventory-upper .watermark.carried { +.eem .sheet-inventory .inventory-upper .watermark.carried { left: 50%; } /* Inventory - Lower Section */ -.pc .sheet-inventory .inventory-lower { +.eem .sheet-inventory .inventory-lower { display: inline-grid; width: 100%; height: 144px; grid-template-columns: 2fr 6px 1fr 6px 1fr; - position:relative; + position: relative; } -.pc .sheet-inventory .inventory-lower .crafting-icons { +.eem .sheet-inventory .inventory-lower .crafting-icons { position: absolute; top: 0; left: 0; height: 100%; width: 30px; - margin-top:8px; + margin-top: 8px; } -.pc .sheet-inventory .inventory-lower .crafting-icons img { - max-height:16px; +.eem .sheet-inventory .inventory-lower .crafting-icons img { + max-height: 16px; max-width: 20px; margin: 8px; } -.pc .sheet-inventory .inventory-lower .fake-textarea.crafting { +.eem .sheet-inventory .inventory-lower .fake-textarea.crafting { margin-top: 6px; line-height: 16px; font-size: 14px; @@ -975,27 +1073,27 @@ label.small { padding-right: 8px; } -.pc .sheet-inventory .inventory-lower .fake-textarea.coins section { +.eem .sheet-inventory .inventory-lower .fake-textarea.coins section { display: inline-block; line-height: 21px; margin-right: 4px; vertical-align: inherit; } -.pc .sheet-inventory .inventory-lower .fake-textarea.coins section.small { +.eem .sheet-inventory .inventory-lower .fake-textarea.coins section.small { font-size: 10px; - color: #cc9133; + color: var(--sheet-primary-color); font-weight: 600; } -.pc .sheet-inventory .inventory-lower section.hint { +.eem .sheet-inventory .inventory-lower section.hint { color: #999999; margin-top: 0; padding-left: 4px; padding-right: 4px; } -.pc .sheet-inventory .inventory-lower .fake-textarea.coins { +.eem .sheet-inventory .inventory-lower .fake-textarea.coins { padding-top: 2px; margin-top: 34px; height: 84px; @@ -1005,7 +1103,7 @@ label.small { padding-right: 8px; } -.pc .sheet-inventory .inventory-lower .fake-textarea.rations { +.eem .sheet-inventory .inventory-lower .fake-textarea.rations { padding-top: 2px; margin-top: 44px; height: 63px; @@ -1017,10 +1115,10 @@ label.small { padding-right: 8px; } -.pc .sheet-inventory .inventory-lower input { +.eem .sheet-inventory .inventory-lower input { border: none; background-color: transparent; - font-family: 'New Atten', sans-serif; + font-family: 'DMSans', sans-serif; font-size: 16px; font-weight: normal; color: #000000; @@ -1028,10 +1126,10 @@ label.small { text-align: center; } -.pc .sheet-inventory .inventory-lower .fake-textarea textarea { +.eem .sheet-inventory .inventory-lower .fake-textarea textarea { height: 34px; line-height: 16px; - font-size: 14px; + font-size: 13px; padding: 1px 2px; margin: 0; margin-bottom: -2px; @@ -1042,18 +1140,18 @@ label.small { /* Firefox-specific adjustment using feature query */ @supports (-moz-appearance: none) { - .pc .sheet-inventory .inventory-lower .fake-textarea textarea { + .eem .sheet-inventory .inventory-lower .fake-textarea textarea { padding: 0; } } /* Inventory - Stripe Upper */ -.pc .sheet-inventory .stripe.upper { +.eem .sheet-inventory .stripe.upper { display: grid; grid-template-columns: 2fr 2fr; } -.pc .sheet-inventory .stripe.upper h2.inventory { +.eem .sheet-inventory .stripe.upper h2.inventory { float: left; display: block; text-align: center; @@ -1061,19 +1159,19 @@ label.small { line-height: 24px; margin: 0; padding: 8px; - background-color: #cc9133; + background-color: var(--sheet-primary-color); color: #ffffff; position: relative; } /* Inventory - Stripe Lower */ -.pc .sheet-inventory .stripe.lower { +.eem .sheet-inventory .stripe.lower { margin-top: 18px; display: grid; grid-template-columns: 2fr 1fr 1fr; } -.pc .sheet-inventory .stripe.lower section.hint { +.eem .sheet-inventory .stripe.lower section.hint { display: inline-block; margin: 12px 0; margin-left: -4px; @@ -1081,51 +1179,52 @@ label.small { color: #999999; } -.pc .sheet-inventory .right-align { +.eem .sheet-inventory .right-align { text-align: right; } /* Inventory - Stripe Base Styles */ -.pc .sheet-inventory .stripe { +.eem .sheet-inventory .stripe { width: calc(100% - 16px); margin: 8px; height: 38px; - background-color: #faf4eb; - border-top: 2px solid #cc9133; + background-color: var(--sheet-background-color); + border-top: 2px solid var(--sheet-primary-color); } -.pc .sheet-inventory .stripe h2 { - font: 14px 'New Atten', sans-serif; - font-weight: 800; +.eem .sheet-inventory .stripe h2 { + font: 13.5px 'DMSans', sans-serif; + font-weight: 900; text-transform: uppercase; - color: #cc9133; + color: var(--sheet-primary-color); display: block; margin: 11px; float: left; align-content: center; + line-height: 16px; } -.pc .sheet-inventory .stripe h2.small { +.eem .sheet-inventory .stripe h2.small { margin: 11px 0; } -.pc .sheet-inventory .stripe h2.treasure { +.eem .sheet-inventory .stripe h2.treasure { float: right; } -.pc .sheet-inventory .stripe label { +.eem .sheet-inventory .stripe label { display: inline; font-size: 8px; - color: #cc9133; + color: var(--sheet-primary-color); line-height: 100%; margin: 0; align-content: center; - font-weight: 700; + font-weight: 600; margin-left: 4px; text-rendering: optimizelegibility; } -.pc .sheet-inventory .stripe .checkbox-group { +.eem .sheet-inventory .stripe .checkbox-group { display: inline-grid; grid-template-columns: 8px min-content; grid-template-rows: 50% 50%; @@ -1136,7 +1235,7 @@ label.small { float: left; } -.pc .sheet-inventory .stripe input.small { +.eem .sheet-inventory .stripe input.small { float: left; width: 22px; background-color: transparent; @@ -1148,32 +1247,32 @@ label.small { margin: 10px 0; } -.pc .sheet-inventory .stripe img { +.eem .sheet-inventory .stripe img { float: left; } -.pc .sheet-inventory .stripe img.crafting { +.eem .sheet-inventory .stripe img.crafting { height: 53px; margin-top: -8px; margin-left: 4px; } -.pc .sheet-inventory .stripe img.coins { +.eem .sheet-inventory .stripe img.coins { height: 62px; margin-top: -10px; } -.pc .sheet-inventory .stripe img.rations { +.eem .sheet-inventory .stripe img.rations { height: 62px; margin-top: -11px; } -.pc .sheet-inventory .stripe div.treasure { +.eem .sheet-inventory .stripe div.treasure { float: right; width: 73px; height: 68px; margin-top: -16px; - background-image: url("https://raw.githubusercontent.com/blaze-sanecki/LandOfEem/main/images/treasure.png"); + 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; @@ -1181,20 +1280,20 @@ label.small { z-index: 3; } -.pc .sheet-inventory .stripe div.treasure input { +.eem .sheet-inventory .stripe div.treasure input { width: 36px; background-color: transparent; border: none; text-align: center; - font: 18px 'New Atten', sans-serif; - font-weight: 700; + font: 18px 'DMSans', sans-serif; + font-weight: 600; color: #000000; padding: 0; padding-left: 8px; margin: 24px 0 0 24px; } -.pc .sheet-inventory .stripe .corner-box-wrapper { +.eem .sheet-inventory .stripe .corner-box-wrapper { float: left; height: 32px; width: 132px; @@ -1203,20 +1302,104 @@ label.small { padding-right: 8px; } -.pc .sheet-inventory .stripe .corner-box-wrapper .content { +.eem .sheet-inventory .stripe .corner-box-wrapper .content { margin-top: 2px; } -.pc .sheet-inventory .stripe .corner-box-wrapper .content label { +.eem .sheet-inventory .stripe .corner-box-wrapper .content label { font-size: 12px; } -.pc .sheet-inventory .stripe .corner-box-wrapper .content input { +.eem .sheet-inventory .stripe .corner-box-wrapper .content input { text-align: center; } /* ===================================== */ +/* PORTRAIT TAB */ + +/* ===================================== */ +.eem .sheet-portrait { + height: 417px; + 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; + height: 417px; + grid-template-rows: repeat(5, 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 */ /* ===================================== */ @@ -1229,12 +1412,12 @@ label.hint { } section.hint { - font-size: 10px; + font-size: 9px; color: #999999; display: inline-flex; width: fit-content; vertical-align: middle; - font-family: 'New Atten', sans-serif; + font-family: 'DMSans', sans-serif; letter-spacing: -0.02em; } @@ -1245,8 +1428,8 @@ section.hint { /* ===================================== */ .footer { - font: 10px 'New Atten', sans-serif; - color: #cc9133; + font: 9px 'DMSans', sans-serif; + color: var(--sheet-primary-color); width: 100%; display: block; text-align: center; diff --git a/LandOfEem/landofeem.html b/LandOfEem/landofeem.html index 78ee1a96993e..93695cb25dec 100644 --- a/LandOfEem/landofeem.html +++ b/LandOfEem/landofeem.html @@ -1,12 +1,15 @@ + +
-
+
-
+
+ + + + @@ -20,41 +23,34 @@
-
+
- +
-
+
-
+
- + +
- - - + + + + +
@@ -133,9 +129,7 @@

Attack

-
+
@@ -225,8 +219,7 @@

Treasure Hunting:

Worn

-
+
@@ -235,16 +228,14 @@

Worn

Carried

-
+
- +

Crafting

@@ -256,14 +247,12 @@

Crafting

- +

Coins

3:1 tradeup
- +

Rations

@@ -277,14 +266,10 @@

Rations

- - - - + + + +
@@ -322,8 +307,7 @@

Rations

🟅
-
Gain individual XP if you demonstrate your ideals -
+
Gain individual XP if you demonstrate your ideals
@@ -333,8 +317,7 @@

Rations

🟅
-
Gain individual XP if you demonstrate your flaws -
+
Gain individual XP if you demonstrate your flaws
@@ -344,8 +327,7 @@

Rations

Personal Quest

🟅
-
Gain party XP if you pursue your personal - quest
+
Gain party XP if you pursue your personal quest
@@ -353,8 +335,7 @@

Personal Quest

Backstory

🟅
-
Gain individual XP if you tell a story about your - past
+
Gain individual XP if you tell a story about your past
@@ -362,8 +343,7 @@

Backstory

Relationships

🟅
-
Gain party XP if you build on a relationship -
+
Gain party XP if you build on a relationship
@@ -377,18 +357,37 @@

Notes

+ +
+
+ +
+
+ +
+
+ + On + Off +
🟅
On: keeps Attribute and Skill values between -3 and +3. +
+
+
+ + On + Off +
🟅
On: keeps the final sum of roll modifiers between -3 and +3. +
+
+
- Character Sheet (v.) by Blaze - Sanecki, made with a blessing from by Ben Costa & James Parks - creators of the Land of Eem. + Character Sheet (v.) by Blaze Sanecki, made with a blessing from by Ben Costa & James Parks - creators of the Land of Eem.
- - +
@@ -398,9 +397,9 @@

Name ({{character}})

  • {{#rollGreater() computed::roll 11}} - {{/rollGreater() computed::roll 11}} -

    Attack: {{computed::roll}}     Damage: {{computed::damage}}

    - {{#rollGreater() computed::roll 11}} + {{/rollGreater() computed::roll 11}} +

    Attack: {{computed::roll}}     Damage: {{computed::damage}}

    + {{#rollGreater() computed::roll 11}}     {{/rollGreater() computed::roll 11}}
    • @@ -458,19 +457,19 @@

    Name ({{character}})

  • {{#rollGreater() computed::roll 11}} - {{/rollGreater() computed::roll 11}} -

    Result: {{computed::roll}}

    - {{#rollGreater() computed::roll 11}} + {{/rollGreater() computed::roll 11}} +

    Result: {{computed::roll}}

    + {{#rollGreater() computed::roll 11}}     {{/rollGreater() computed::roll 11}}
    • {{#rollTotal() computed::roll roll}}
    - {{/rollTotal() computed::roll roll}} + {{/rollTotal() computed::roll roll}}
  • Modifier clamped to [-3..3] range.
    • - {{#rollTotal() computed::roll roll}} + {{#rollTotal() computed::roll roll}}
    {{/rollTotal() computed::roll roll}} {{#rollLess() computed::roll 3}} @@ -510,7 +509,7 @@

    [12+]: Complete Success.