diff --git a/Ronin/images/mork_borg.webp b/Ronin/images/mork_borg.webp new file mode 100644 index 0000000000..e0f22d1046 Binary files /dev/null and b/Ronin/images/mork_borg.webp differ diff --git a/Ronin/images/ronin_ability_fields_resilience.webp b/Ronin/images/ronin_ability_fields_resilience.webp new file mode 100644 index 0000000000..6c3c700894 Binary files /dev/null and b/Ronin/images/ronin_ability_fields_resilience.webp differ diff --git a/Ronin/images/ronin_ability_fields_spirit.webp b/Ronin/images/ronin_ability_fields_spirit.webp new file mode 100644 index 0000000000..b91441d8f9 Binary files /dev/null and b/Ronin/images/ronin_ability_fields_spirit.webp differ diff --git a/Ronin/images/ronin_ability_fields_swiftness.webp b/Ronin/images/ronin_ability_fields_swiftness.webp new file mode 100644 index 0000000000..e8927ab1c3 Binary files /dev/null and b/Ronin/images/ronin_ability_fields_swiftness.webp differ diff --git a/Ronin/images/ronin_ability_fields_vigor.webp b/Ronin/images/ronin_ability_fields_vigor.webp new file mode 100644 index 0000000000..21e44d363a Binary files /dev/null and b/Ronin/images/ronin_ability_fields_vigor.webp differ diff --git a/Ronin/images/ronin_col_1.webp b/Ronin/images/ronin_col_1.webp new file mode 100644 index 0000000000..f11ee032de Binary files /dev/null and b/Ronin/images/ronin_col_1.webp differ diff --git a/Ronin/images/ronin_dashed_line.webp b/Ronin/images/ronin_dashed_line.webp new file mode 100644 index 0000000000..aa6aa6edd0 Binary files /dev/null and b/Ronin/images/ronin_dashed_line.webp differ diff --git a/Ronin/images/ronin_header_left.webp b/Ronin/images/ronin_header_left.webp new file mode 100644 index 0000000000..53461f8366 Binary files /dev/null and b/Ronin/images/ronin_header_left.webp differ diff --git a/Ronin/images/ronin_header_right.webp b/Ronin/images/ronin_header_right.webp new file mode 100644 index 0000000000..582898d88f Binary files /dev/null and b/Ronin/images/ronin_header_right.webp differ diff --git a/Ronin/images/ronin_honour_10_image.webp b/Ronin/images/ronin_honour_10_image.webp new file mode 100644 index 0000000000..2159bd3470 Binary files /dev/null and b/Ronin/images/ronin_honour_10_image.webp differ diff --git a/Ronin/images/ronin_honour_10_image_darkmode.webp b/Ronin/images/ronin_honour_10_image_darkmode.webp new file mode 100644 index 0000000000..f1e3c4c67b Binary files /dev/null and b/Ronin/images/ronin_honour_10_image_darkmode.webp differ diff --git a/Ronin/images/ronin_honour_1_image.webp b/Ronin/images/ronin_honour_1_image.webp new file mode 100644 index 0000000000..556f5e98f6 Binary files /dev/null and b/Ronin/images/ronin_honour_1_image.webp differ diff --git a/Ronin/images/ronin_honour_1_image_darkmode.webp b/Ronin/images/ronin_honour_1_image_darkmode.webp new file mode 100644 index 0000000000..164612b578 Binary files /dev/null and b/Ronin/images/ronin_honour_1_image_darkmode.webp differ diff --git a/Ronin/images/ronin_honour_20_image.webp b/Ronin/images/ronin_honour_20_image.webp new file mode 100644 index 0000000000..53fd2613c2 Binary files /dev/null and b/Ronin/images/ronin_honour_20_image.webp differ diff --git a/Ronin/images/ronin_honour_20_image_darkmode.webp b/Ronin/images/ronin_honour_20_image_darkmode.webp new file mode 100644 index 0000000000..06a2510c12 Binary files /dev/null and b/Ronin/images/ronin_honour_20_image_darkmode.webp differ diff --git a/Ronin/images/ronin_honour_kanji.webp b/Ronin/images/ronin_honour_kanji.webp new file mode 100644 index 0000000000..d20f71e2b9 Binary files /dev/null and b/Ronin/images/ronin_honour_kanji.webp differ diff --git a/Ronin/images/ronin_kusarigama.webp b/Ronin/images/ronin_kusarigama.webp new file mode 100644 index 0000000000..d33c686985 Binary files /dev/null and b/Ronin/images/ronin_kusarigama.webp differ diff --git a/Ronin/images/ronin_kusarigama_darkmode.webp b/Ronin/images/ronin_kusarigama_darkmode.webp new file mode 100644 index 0000000000..37942ccc51 Binary files /dev/null and b/Ronin/images/ronin_kusarigama_darkmode.webp differ diff --git a/Ronin/images/ronin_logo.webp b/Ronin/images/ronin_logo.webp new file mode 100644 index 0000000000..75370c9f3a Binary files /dev/null and b/Ronin/images/ronin_logo.webp differ diff --git a/Ronin/images/ronin_red_branches_spirit.webp b/Ronin/images/ronin_red_branches_spirit.webp new file mode 100644 index 0000000000..6a867c2162 Binary files /dev/null and b/Ronin/images/ronin_red_branches_spirit.webp differ diff --git a/Ronin/images/ronin_red_branches_swiftness.webp b/Ronin/images/ronin_red_branches_swiftness.webp new file mode 100644 index 0000000000..4e542a49ef Binary files /dev/null and b/Ronin/images/ronin_red_branches_swiftness.webp differ diff --git a/Ronin/images/ronin_red_branches_vigor.webp b/Ronin/images/ronin_red_branches_vigor.webp new file mode 100644 index 0000000000..6d34ed0c61 Binary files /dev/null and b/Ronin/images/ronin_red_branches_vigor.webp differ diff --git a/Ronin/images/ronin_ryo_background.webp b/Ronin/images/ronin_ryo_background.webp new file mode 100644 index 0000000000..0e8e889822 Binary files /dev/null and b/Ronin/images/ronin_ryo_background.webp differ diff --git a/Ronin/images/ronin_seppuku_image.webp b/Ronin/images/ronin_seppuku_image.webp new file mode 100644 index 0000000000..4c994d7f1a Binary files /dev/null and b/Ronin/images/ronin_seppuku_image.webp differ diff --git a/Ronin/images/ronin_sword.webp b/Ronin/images/ronin_sword.webp new file mode 100644 index 0000000000..a932e2575e Binary files /dev/null and b/Ronin/images/ronin_sword.webp differ diff --git a/Ronin/images/ronin_template_background.webp b/Ronin/images/ronin_template_background.webp new file mode 100644 index 0000000000..ac5b8a7ffa Binary files /dev/null and b/Ronin/images/ronin_template_background.webp differ diff --git a/Ronin/images/ronin_template_background_darkmode.webp b/Ronin/images/ronin_template_background_darkmode.webp new file mode 100644 index 0000000000..c64e5c32fa Binary files /dev/null and b/Ronin/images/ronin_template_background_darkmode.webp differ diff --git a/Ronin/images/ronin_texts_bottom.webp b/Ronin/images/ronin_texts_bottom.webp new file mode 100644 index 0000000000..91bae383d0 Binary files /dev/null and b/Ronin/images/ronin_texts_bottom.webp differ diff --git a/Ronin/images/ronin_texts_middle.webp b/Ronin/images/ronin_texts_middle.webp new file mode 100644 index 0000000000..634168f0e2 Binary files /dev/null and b/Ronin/images/ronin_texts_middle.webp differ diff --git a/Ronin/images/ronin_texts_top.webp b/Ronin/images/ronin_texts_top.webp new file mode 100644 index 0000000000..faaae35965 Binary files /dev/null and b/Ronin/images/ronin_texts_top.webp differ diff --git a/Ronin/images/ronin_trunk.webp b/Ronin/images/ronin_trunk.webp new file mode 100644 index 0000000000..acb04620ac Binary files /dev/null and b/Ronin/images/ronin_trunk.webp differ diff --git a/Ronin/images/ronin_woes.webp b/Ronin/images/ronin_woes.webp new file mode 100644 index 0000000000..03bff96e3c Binary files /dev/null and b/Ronin/images/ronin_woes.webp differ diff --git a/Ronin/ronin.css b/Ronin/ronin.css new file mode 100644 index 0000000000..814de00228 --- /dev/null +++ b/Ronin/ronin.css @@ -0,0 +1,2625 @@ +@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Delicious+Handrawn&family=Freckle+Face&family=Jolly+Lodger&family=Loved+by+the+King&family=Manufacturing+Consent&family=New+Tegomin&family=Pirata+One&family=Candal&family=Yuji+Mai&display=swap'); + +@font-face { + font-family: 'Ghastly Panic'; + font-weight: 400; + font-style: normal; + src: + local('Ghastly Panic'), + url('https://fonts.cdnfonts.com/s/3399/Ghastly Panic.woff2') format('woff2'), + url('https://fonts.cdnfonts.com/s/3399/Ghastly Panic.woff') format('woff'); +} + +.ui-dialog .tab-content .charsheet .font-ghastly-panic { + font-family: 'Ghastly Panic', sans-serif; + font-size: 3rem; + font-style: normal; + font-synthesis: none; + font-weight: 400; + letter-spacing: 4px; + line-height: 3rem; + padding: 5px 3px 5px 8px; + text-shadow: 0 0 0 #000, 0 0 0 #000; +} + +.ui-dialog .tab-content .charsheet .font-jolly-lodger { + font-family: "Jolly Lodger", system-ui; + font-size: 2rem; + font-weight: 400; + font-style: normal; +} + +.ui-dialog .tab-content .charsheet .font-manufacturing-consent { + font-family: "Manufacturing Consent", system-ui; + font-weight: 400; + font-style: normal; +} + +.ui-dialog .tab-content .charsheet .font-new-tegomin { + font-family: "New Tegomin", serif; + font-weight: 400; + font-style: normal; +} + +.ui-dialog .tab-content .charsheet .font-pirata-one { + font-family: "Pirata One", system-ui; + font-size: 1.5rem; + font-weight: 400; + font-style: normal; +} + +.ui-dialog .tab-content .charsheet .font-special-elite { + font-family: "Special Elite", system-ui; + font-weight: 400; + font-style: normal; +} + +.ui-dialog .tab-content .charsheet .font-yuji-mai { + font-family: "Yuji Mai", serif; + font-weight: 400; + font-style: normal; +} + +.ui-dialog .tab-content .charsheet .font-loved { + font-family: "Loved by the King", cursive; + font-weight: 400; + font-style: normal; +} + +.ui-dialog .tab-content .charsheet .font-candal { + font-family: "Candal", sans-serif; + font-weight: 400; + font-style: normal; +} + +.ui-dialog .tab-content .charsheet .font-freckle-face { + font-family: "Freckle Face", system-ui; + font-weight: 400; + font-style: normal; +} + +.ui-dialog .tab-content .charsheet *, +.ui-dialog .tab-content .charsheet *::before, +.ui-dialog .tab-content .charsheet *::after { + box-sizing: border-box; +} + +.ui-dialog .characterviewer { + padding-inline: 4px; +} + +.ui-dialog .tab-content .charsheet { + padding: 0; +} + +.sheet-darkmode .ui-dialog .tab-content .charsheet { + background-color: #222; + color: #c1c1c1; +} + +.ui-dialog .tab-content .charsheet .wrapper { + container-type: inline-size; + max-width: 1280px; + overflow-x: clip; + position: relative; +} + +.ui-dialog .tab-content .charsheet .wrapper .show-creature:not(:checked) ~ .show-creature { + display: none; +} + +.ui-dialog .tab-content .charsheet .show-creature:checked ~ .show-creature { + display: grid; + grid-template-columns: 1fr 2fr; + outline: 2px solid #000; + outline-offset: -2px; + padding-right: 1em; + width: fit-content; +} + +.ui-dialog .tab-content .charsheet .wrapper .show-creature:checked ~ .show-pc { + display: none; +} + +/* set min/max width for show-creature */ +@media (max-width: 635px) { + .ui-dialog .tab-content .charsheet .wrapper:has(.show-creature:checked) { + min-width: 634px; + } +} + +@media (min-width: 959px) { + .ui-dialog .tab-content .charsheet .wrapper:has(.show-creature:checked) { + max-width: 960px; + } +} + +/* collapse sheet for smaller viewports */ +@container (max-width: 858px) { + .ui-dialog .tab-content .charsheet .wrapper .show-creature:not(:checked) ~ .small-nav { + grid-template-rows: 2.25em; + } + .ui-dialog .tab-content .charsheet .wrapper .show-pc { + grid-template-columns: minmax(442px, 56%) auto; + overflow-y: visible; + & .col1 { + & .col1-a { + background-color: #eb3143; + border-top: 3em solid #eb3143; + min-width: 160px; + } + & .col1-a > section { + z-index: 3; + } + & section.name, + section.nickname, + section.class { + max-width: clamp(90%, 19.875vw, 16em); + } + & .col1-footer { + margin-left: 1.5em; + } + & .header-left {left:-3em;} + & .swiftness, .spirit, .vigor, .resilience, .honour {margin-right: -8%;} + & .honour {left: -6em;} + } + & .col1-b { + min-width: 235px; + z-index: 1; + & .logo {transform: scale(.93);} + & .resilience::after {min-width: 17em;} + } + & .col2 { + background-color: #fff; + background-image: linear-gradient(to right, #efefef, #fff); + border-top-width: 3em; + min-width: 442px; + padding-top: 3em; + & .weapons { + margin-top: -3em; + & .weapons-grid { + max-width: 95%; + } + } + & .legal-gutter { + position: relative; + top: -3em; + } + } + } + + .sheet-darkmode .ui-dialog .tab-content .charsheet .wrapper .page-view ~ .show-pc { + & .col1 { + & .col1-b { + background-color: #222; + color: #c1c1c1; + } + } + & .col2, + .legal-gutter { + background-color: #222; + background-image: none; + color: #c1c1c1; + } + } + + /* sheet left */ + .charsheet .wrapper .page-view[value="0"]:checked ~ .show-pc { + & .col1 { + z-index: 1; + & .col1-b { + background-color: #fff; + box-shadow: 2px 0 1px 1px #000; + } + } + & .col2 { + border-color: transparent; + box-shadow: none; + margin-left: calc(100% - 442px); + filter: brightness(0.25) blur(3px); + outline: 1px solid #333; + pointer-events: none; + z-index: 0; + } + } + + /* sheet right */ + .charsheet .wrapper .page-view[value="1"]:checked ~ .show-pc { + & .col1 { + filter: brightness(0.25) blur(3px); + outline: 1px solid #333; + pointer-events: none; + } + & .col2 { + box-shadow: -5px 2px 5px 0 #000; + margin-left: calc(100% - 442px); + z-index: 3; + } + } +} + +@container (max-width: 456px) { + .ui-dialog .tab-content .charsheet .wrapper .show-pc { + & .col1 { + & .col1-b {box-shadow: none;} + } + & .col2 {box-shadow: none;} + } +} + +.ui-dialog .tab-content .charsheet .show-pc, +.ui-dialog .tab-content .charsheet .show-creature { + background-image: linear-gradient(to right, #efefef, #fff); + display: grid; + font-size: 1.2rem; + grid-template-areas: "col1 col2"; + grid-template-columns: 49% auto; + overflow: clip; + position: relative; +} + +.sheet-darkmode .ui-dialog .tab-content .charsheet .show-pc, +.sheet-darkmode .ui-dialog .tab-content .charsheet .show-creature { + background-color: #363636; + background-image: none; + color: #c1c1c1; +} + +.ui-dialog .tab-content .charsheet .show-pc .col2::before { + background-image: url('https://vinceflaggpainting.com/images/ronin_header_right.webp'); + background-position: 0 0; + background-repeat: repeat-x; + background-size: 250px 48px; + content: ''; + height: 4em; + position: absolute; + top: -3em; + width: 100%; +} + +.ui-dialog .tab-content .charsheet .show-creature::after { + background-image: url('https://vinceflaggpainting.com/images/ronin_header_right.webp'); + background-position: 0 0; + background-repeat: repeat-x; + background-size: 250px 78px; + content: ''; + height: 7em; + position: absolute; + top: -3em; + width: 100%; +} + +.ui-dialog .tab-content .charsheet .show-creature .col2::before { + background-image: url('https://vinceflaggpainting.com/images/ronin_logo_small.png'); + background-repeat: no-repeat; + background-size: cover; + content: ''; + height: 5em; + left: 36%; + position: absolute; + top: -3em; + width: 11em; +} + +.ui-dialog .tab-content .charsheet .show-creature::after { + top: 0; + width: 100%; + z-index: 1; +} + +/* shown at smaller viewport size */ +.charsheet .small-nav { + background-color: #eb3143; + display: grid; + grid-template-columns: auto; + grid-template-rows: 0em; + overflow: clip; + place-items: center; + position: relative; + transform-origin: top; + transform: scale(1); + transition: grid-template-rows .4s ease-in-out, transform .3s ease-in-out; + z-index: 4; +} + +.ui-dialog .tab-content .charsheet .wrapper .small-nav:hover, +.ui-dialog .tab-content .charsheet .wrapper .small-nav:focus, +.ui-dialog .tab-content .charsheet .wrapper .small-nav:focus-within { + transform: scale(1.5); +} + +.charsheet .small-nav label { + align-items: center; + display: inline-flex; + justify-content: center; + min-height: 100%; +} + +.charsheet .small-nav label span { + color: #000; + font-size: 2.5rem; + padding: 4px 0px 4px 4px; +} + +.charsheet .page-view[value="0"]:checked ~ .small-nav label span::before { + content: "►"; +} + +.charsheet .page-view[value="1"]:checked ~ .small-nav label span::before { + content: "◄"; +} + +.charsheet .page-view[value="0"]:checked ~ .small-nav label:hover span { + text-shadow: 2px 0 0px #FFF !important; +} + +.charsheet .page-view[value="1"]:checked ~ .small-nav label:hover span { + text-shadow: -2px 0px 0px #FFF !important; +} + +.charsheet .page-view[value="0"] ~ .small-nav label, +.charsheet .page-view[value="1"] ~ .small-nav label { + display: flex; +} + +.charsheet .page-view[value="0"]:checked ~ .small-nav label:has(input:checked), +.charsheet .page-view[value="1"]:checked ~ .small-nav label:has(input:checked) { + display: none; +} + +.charsheet .col1, +.charsheet .col1-a, +.charsheet .col1-b, +.charsheet .col2 { + align-content: start; + display: grid; + height: 100%; + position: relative; +} + +.charsheet .col1 { + align-items: self-start; + display: grid; + grid-area: col1; + grid-template-areas: "col1-a col1-b"; + grid-template-rows: 100%; + filter: brightness(1) blur(0px); + transition: filter 0.5s ease-in-out; + z-index: 0; +} + +.charsheet .show-creature .col1 { + z-index: 2; +} + +.charsheet .col2 { + border-top: 3em solid #000; + filter: brightness(1) blur(0px); + grid-area: col2; + margin-inline: auto; + row-gap: 10px; + transition: filter 0.5s ease-in-out; + z-index: 0; + grid-template-areas: + "weapons weapons legal" + "battle battle legal" + "armour armour legal" + "equipment equipment legal" + "tenets hp-box legal" + "tenets hp-box2 legal"; +} + +.charsheet .show-creature .col2 { + grid-template-areas: "weapons weapons" + "battle battle" + "armour hp-box"; + width: 100%; + z-index: 2; +} + +.charsheet .col1-a { + align-items: self-start; + border-top: 3em solid #eb3143; + color: #fff; + grid-area: col1-a; + grid-template-rows: min-content min-content min-content min-content min-content min-content 1fr min-content; + padding: 0 0 0 2em; + min-width: 210px; + row-gap: 1em; + grid-template-areas: "header-left" + "name" + "nickname" + "class" + "description" + "features" + "texts" + "footer"; +} + +.charsheet .show-creature .col1-a { + border-top: 0; + grid-template-rows: auto; + padding-top: .75em; + grid-template-areas: + "name" + "description" + "features"; +} + +.charsheet .col1-a::before { + background-color: #eb3143; + background-image: url('https://vinceflaggpainting.com/images/ronin_col_1.webp'); + background-repeat: repeat-y; + background-size: 200px 600px; + content: ''; + height: 100%; + position: absolute; + width: 100%; + /* z-index: 1; */ +} + +.charsheet .col1-a > section { + z-index: 1; +} + +.charsheet .col1-b { + background-image: url('https://vinceflaggpainting.com/images/ronin_trunk.webp'); + background-position: 0 -110px; + background-repeat: repeat-y; + background-size: 104PX 600PX; + border-top: 3em solid #000; + grid-area: col1-b; + justify-items: center; + grid-template-areas: + "logo" + "swiftness" + "spirit" + "vigor" + "resilience" + "honour"; +} + +.charsheet .legal-gutter { + grid-area: legal; + padding-top: 1em; +} + +.charsheet .legal-margin { + font-size: .9rem; + text-align: center; + text-orientation: upright; + white-space: nowrap; + writing-mode: sideways-lr; +} + +.charsheet .header-left { + background-color: #eb3143; + background-image: url('https://vinceflaggpainting.com/images/ronin_header_left.webp'); + background-position: top right; + background-repeat: no-repeat; + grid-area: header-left; + height: 5em; + left: -9px; + max-width: 286px; + position: absolute; + top: -35.5px; + width: clamp(180px, 22vw, 100%); + /* z-index: 1; */ +} + +.charsheet .col1-a .section-header { + color: #fff; + text-shadow: 1px 1px 1px #111; +} + +.charsheet .name {grid-area: name;} +.charsheet .nickname {grid-area: nickname;} +.charsheet .class {grid-area: class;} + +.ui-dialog .tab-content .charsheet section.name, +.ui-dialog .tab-content .charsheet section.nickname, +.ui-dialog .tab-content .charsheet section.class { + align-items: baseline; + display: inline-grid; + grid-template-columns: 1.75em 1fr 1fr; + justify-content: left; + line-height: normal; + margin-inline: auto; + margin-left: 0; + max-width: 24em; + position: relative; + width: 100%; +} + +.ui-dialog .charsheet .col1-a .name input[type="text"], +.ui-dialog .charsheet .col1-a .nickname input[type="text"], +.ui-dialog .charsheet .col1-a .name input[type="text"], +.ui-dialog .charsheet .col1-a .nickname input[type="text"], +.ui-dialog .charsheet .col1-a .class input[type="text"] { + margin-inline: 0; +} + +.ui-dialog .charsheet .name-style { + transform: scaleY(1.25); + color: #fff; + text-shadow: 1px 1px 1px #111; +} + +.ui-dialog .charsheet .class-column-one { + grid-row: 1/3; + padding: 0; + position: relative; + top: 1px; +} + +.charsheet .description { + grid-area: description; + width: calc(100% + 1em); + z-index: 1; +} + +.charsheet .features { + grid-area: features; + width: calc(100% + 1em); + z-index: 1; +} + +.ui-dialog .tab-content .charsheet .show-creature .name, +.ui-dialog .tab-content .charsheet .show-creature .description, +.ui-dialog .tab-content .charsheet .show-creature .features { + min-width: 95%; + width: calc(100% - 1em); +} + +.ui-dialog .tab-content .charsheet .texts { + grid-area: texts; + margin: 1em -5em 0 -2em; + max-width: 360px; + min-width: 280px; + z-index: 2; +} + +.ui-dialog .charsheet .kamis-style { + font-family: "Pirata One"; + font-size: 1.75rem; + font-weight: normal; + line-height: 1.75rem; +} + +.charsheet .texts > div:first-child { + background-image: url('https://vinceflaggpainting.com/images/ronin_texts_top.webp'); + background-repeat: no-repeat; + background-size: 100% 9em; + margin: 0; + padding: 3em 1em 0 2em; + position: relative; +} + +.ui-dialog .tab-content .charsheet .texts .repcontainer[data-groupname="repeating_texts"] .repitem { + background-image: url('https://vinceflaggpainting.com/images/ronin_texts_middle.webp'); + background-repeat: round; + background-size: 100% 100%; + margin: 0; + padding: .25em 1.75em .25em 1.75em; + position: relative; +} + +.ui-dialog .tab-content .charsheet .texts .repcontainer[data-groupname="repeating_texts"] + .repcontrol { + background-image: url('https://vinceflaggpainting.com/images/ronin_texts_bottom.webp'); + background-repeat: no-repeat; + background-size: 100% 5em; + height: 5em; + margin: 0; + padding: .5em 2em 0 2em; + position: relative; +} + +.ui-dialog .charsheet .texts-style { + color: revert; + display: block; + font-family: 'Loved by the King'; + font-size: 2.5rem; + line-height: 4rem; + padding: 0 2px 0 2px; + text-shadow: none; +} + +.ui-dialog .tab-content .charsheet .texts .section-notes:not(:last-child) { + color: #111; +} + +.ui-dialog .tab-content .charsheet .repcontainer[data-groupname="repeating_texts"] .repitem .flex-row { + border-top: 1px solid #111; +} + +.charsheet .col1-footer { + align-self: end; + display: grid; + grid-area: footer; + margin-bottom: 10px; + margin-inline: auto; + max-width: 95%; +} + +.ui-dialog .tab-content .charsheet .col1-footer button[type="roll"]:hover { + background-color: #111; + color: #fff; + outline: 1px solid #111; +} + +.charsheet .credits { + aspect-ratio: 3; + background-image: url('https://vinceflaggpainting.com/images/mork_borg.webp'); + background-repeat: no-repeat; + background-size: contain; + height: 50px; + margin-top: 2px; +} + +.charsheet .virtues { + bottom: -4px; + display: grid; + grid-template-columns: auto auto; + margin: auto; + position: relative; + right: -4em; +} + +.ui-dialog .charsheet .virtues .virtues-box { + position: absolute; + top: -3em; + right: -2.5em; +} + +.ui-dialog .charsheet .virtues .virtues-box button[type="roll"] { + background-color: transparent; + background-image: none; + border: none; + box-shadow: none; + position: relative; + transform: rotate(30deg); + z-index: 2; +} + +.ui-dialog .charsheet .virtues-style { + color: #fff; + font-family: 'Freckle Face'; + font-size: 2rem; + font-weight: normal; + line-height: 3rem; + letter-spacing: 1px; + text-shadow: 1px 2px 1px #000; + transform: scaleY(1.75); +} + +.ui-dialog .charsheet .die-style { + font-family: 'Manufacturing Consent'; + font-size: 2rem; + font-weight: normal; +} + +.ui-dialog .charsheet .swiftness { + grid-area: swiftness; + z-index: 1; +} + +.ui-dialog .charsheet .swiftness > button { + transform: rotate(6deg); +} + +.ui-dialog .charsheet .swiftness .ability-base-mod::before { + background-image: url('https://vinceflaggpainting.com/images/ronin_ability_fields_swiftness.webp'); + background-repeat: no-repeat; + background-size: 100% 100%; + content: ''; + height: 3.75em; + position: absolute; + top: -4px; + left: -15px; + width: 6em; +} + +.charsheet .spirit {grid-area: spirit;} + +.charsheet .spirit > button { + transform: rotate(4deg); +} + +.ui-dialog .charsheet .spirit .ability-base-mod::before { + background-image: url('https://vinceflaggpainting.com/images/ronin_ability_fields_spirit.webp'); + background-repeat: no-repeat; + background-size: 100% 100%; + content: ''; + height: 4.2em; + position: absolute; + top: -6px; + left: -8px; + width: 5em; +} + +.charsheet .vigor {grid-area: vigor;} + +.ui-dialog .charsheet .vigor .ability-base-mod::before { + background-image: url('https://vinceflaggpainting.com/images/ronin_ability_fields_vigor.webp'); + background-repeat: no-repeat; + background-size: 100% 100%; + content: ''; + height: 4.5em; + position: absolute; + top: -6px; + left: -8px; + width: 5em; +} + +.charsheet .resilience {grid-area: resilience;} + +.charsheet .resilience > button { + transform: rotate(2deg); +} + +.ui-dialog .charsheet .resilience .ability-base-mod::before { + background-image: url('https://vinceflaggpainting.com/images/ronin_ability_fields_resilience.webp'); + background-repeat: no-repeat; + background-size: 100% 100%; + content: ''; + height: 5em; + position: absolute; + top: -6px; + left: -8px; + width: 5em; +} + +.charsheet .swiftness::after { + background-image: url('https://vinceflaggpainting.com/images/ronin_red_branches_swiftness.webp'); + background-repeat: no-repeat; + background-size: clamp(13.75em, 18vw, 19em) 3em; + content: ''; + display: inline-flex; + height: 3em; + left: 0; + margin: 1.5em 0 0 4.7em; + position: absolute; + width: 100%; + z-index: 1; +} + +.charsheet .spirit::after { + background-image: url('https://vinceflaggpainting.com/images/ronin_red_branches_spirit.webp'); + background-repeat: no-repeat; + background-size: clamp(13.75em, 18vw, 19em) 3em; + content: ''; + display: inline-flex; + height: 3em; + left: 0; + margin: -.5em 0 0 4em; + position: absolute; + width: 100%; + z-index: 1; +} + +.charsheet .vigor::after { + background-image: url('https://vinceflaggpainting.com/images/ronin_red_branches_vigor.webp'); + background-repeat: no-repeat; + background-size: clamp(13.75em, 18vw, 19em) 3em; + content: ''; + display: inline-flex; + height: 3em; + left: 0; + margin: -.5em 0 0 3.25em; + position: absolute; + width: 100%; + z-index: 1; +} + +.charsheet .resilience::after { + background-image: url('https://vinceflaggpainting.com/images/ronin_dashed_line.webp'); + background-size: cover; + content: ''; + display: inline-flex; + height: 2em; + left: 0; + margin: 1em 0 0 4.5em; + min-width: clamp(14em, calc(100% - 6vw), 15.5em); + position: absolute; +} + +.charsheet .honour { + display: inline-flex; + grid-area: honour; + left: -5em; + top: 3em; + position: relative; + z-index: 1; +} + +.charsheet .honour-grid { + column-gap: clamp(2px, calc(2vw - 18px), 8px); + display: grid; + grid-template-columns: repeat(4, 1fr); + margin-inline: auto; + position: relative; + row-gap: clamp(16px, calc(2vw - 4px), 21px); + top: 1em; +} + +.ui-dialog .tab-content .charsheet .honour .honour-grid label { + height: 18px; + margin: auto; + padding: 0; + position: relative; + width: 20px; + margin-inline: 3px; +} + +.ui-dialog .charsheet .honour-style { + display: flex; + font-size: 2.25rem; + margin-inline: auto; + position: absolute; + right: -1.15em; + top: 8px; + transform: scaleY(1.75); + width: min-content; +} + +.ui-dialog .charsheet .honour::before { + background-image: url('https://vinceflaggpainting.com/images/ronin_honour_kanji.webp'); + background-repeat: no-repeat; + background-size: cover; + content: ''; + display: inline-flex; + height: 34px; + left: 66%; + position: absolute; + top: 5px; + width: 25px; + z-index: 1; +} + +.ui-dialog .charsheet .honour-grid label:first-child, +.ui-dialog .charsheet .honour-grid label:nth-child(10) { + grid-column: 1/-1; +} + +.ui-dialog .tab-content .charsheet .honour .honour-grid label:last-child { + grid-column: span 2; + margin-left: 8px; +} + +.ui-dialog .charsheet .honour-grid label:first-child::before { + background-image: url('https://vinceflaggpainting.com/images/ronin_honour_1_image.webp'); + background-repeat: no-repeat; + background-size: cover; + content: ''; + height: 39px; + left: clamp(21px, calc(2.5vw), 30px); + position: absolute; + top: -15px; + width: 30px; +} + +.ui-dialog .charsheet .honour-grid label:nth-child(10)::before { + background-image: url('https://vinceflaggpainting.com/images/ronin_honour_10_image.webp'); + background-repeat: no-repeat; + background-size: cover; + content: ''; + height: 38px; + left: clamp(21px, calc(2.5vw), 30px); + position: absolute; + top: -12px; + width: 32px; +} + +.ui-dialog .charsheet .honour-grid label:nth-child(20)::before { + background-image: url('https://vinceflaggpainting.com/images/ronin_honour_20_image.webp'); + background-repeat: no-repeat; + background-size: cover; + content: ''; + height: 36px; + left: clamp(17px, calc(2vw), 26px); + position: absolute; + top: -7px; + width: 34px; +} + +.sheet-darkmode .charsheet .honour-grid label:first-child::before { + background-image: url('https://vinceflaggpainting.com/images/ronin_honour_1_image_darkmode.webp'); +} + +.sheet-darkmode .charsheet .honour-grid label:nth-child(10)::before { + background-image: url('https://vinceflaggpainting.com/images/ronin_honour_10_image_darkmode.webp'); +} + +.sheet-darkmode .charsheet .honour-grid label:nth-child(21)::before { + background-image: url('https://vinceflaggpainting.com/images/ronin_honour_20_image_darkmode.webp'); +} + +.charsheet .woes { + align-content: end; + background-image: url('https://vinceflaggpainting.com/images/ronin_woes.webp'); + background-repeat: no-repeat; + background-size: cover; + background-position: 0 0; + bottom: -1px; + color: #fff; + grid-area: woes; + left: 0; + margin: 0 0 0 2em; + min-height: 10em; + padding: 0 0 .5em 1.2em; + position: absolute; + width: 20em; + z-index: 1; +} + +.charsheet .weapons { + grid-area: weapons; + z-index: 1; +} + +.charsheet .weapons-grid { + display: grid; + grid-template-columns: minmax(9em, 2fr) minmax(4em, 1fr) minmax(5em, 1fr) 3em minmax(min-content, auto); + grid-template-rows: 4.5em 2em 2em auto; + margin-inline: auto; + max-width: 95%; + place-items: center; + position: relative; +} + +.charsheet .show-creature .weapons-grid { + column-gap: 4px; + grid-template-columns: minmax(12em, 3fr) minmax(4em, 1fr) minmax(5em, 1fr) minmax(4em, 1fr) minmax(7.5em, 1fr); + grid-template-rows: auto; + margin-inline: 1em; + margin-top: 3em; + min-width: fit-content; +} + +.charsheet .weapons-grid .sword-image { + background-image: url('https://vinceflaggpainting.com/images/ronin_sword.webp'); + background-repeat: no-repeat; + background-size: 95% 100%; + background-position: center; + height: 2.85em; + left: 1em; + max-width: 38em; + position: relative; + width: 100%; +} + +.ui-dialog .charsheet .dueling-style { + font-family: "Special Elite"; + font-weight: normal; + padding-top: 2px; +} + +.charsheet .weapons-grid .column-header { + display: inline-block; + font-size: 1.5rem; + font-variant-caps: all-petite-caps; + font-weight: normal; +} + +.ui-dialog .tab-content .charsheet .weapons-grid .repcontainer .repitem .weapon-type:not(:checked) + .show-ranged { + display: none; +} + +.ui-dialog .tab-content .charsheet .weapon-type:checked + .show-ranged { + display: grid; + grid-template-rows: 2rem; + left: -2em; + margin-top: -3px; + position: relative; + transform: scale(.85); + transform-origin: right; +} + +.ui-dialog .tab-content .charsheet .show-ranged label { + align-content: center; + display: inline-block; + margin-inline: auto; + padding-inline: 2px; + width: min-content; +} + +.ui-dialog .tab-content .charsheet .weapons-grid .repcontainer, +.ui-dialog .tab-content .charsheet .weapons-grid .repcontainer .repitem, +.ui-dialog .tab-content .charsheet .weapons-grid .repcontainer .repitem .weapons-grid-row { + display: grid; + grid-column: 1/-1; + grid-template-columns: subgrid; +} + +.ui-dialog .tab-content .charsheet .weapons-grid .repcontrol { + grid-column: 1/-1; + width: 100%; +} + +.ui-dialog .tab-content .charsheet .weapons-grid select { + font-size: 1.2rem; + font-weight: normal; +} + +.charsheet .weapons-grid button span { + font-size: 1.3rem; + font-weight: 700; +} + +.ui-dialog .charsheet .weapon-notes-style { + color: #c1c1c1; + column-gap: 2px; + display: inline-grid; + grid-template-columns: repeat(6, min-content); + justify-content: center; + margin-inline: auto; + position: absolute; + top: -1.65em; + width: 102%; +} + +.ui-dialog .tab-content .charsheet .weapon-notes-style label input[type="checkbox"] { + display: none; +} + +.ui-dialog .tab-content .charsheet .weapon-notes-style label { + align-items: center; + display: inline-flex; + height: 1.85rem; + justify-content: center; + z-index: 1; +} + +.ui-dialog .tab-content .charsheet .weapon-notes-style label span { + align-items: center; + color: #c1c1c1; + display: inline-flex; + font-size: 1.2rem; + font-weight: normal; + white-space: nowrap; +} + +.ui-dialog .tab-content .charsheet .show-creature-style { + position: absolute; + right: 4px; + z-index: 3; +} + +.ui-dialog .tab-content .charsheet .wrapper .show-creature-style input[type="checkbox"] { + display: block; + height: 1.2em; + left: -1em; + margin-inline: 2px; + opacity: 0; + position: absolute; + top: 0; + width: 8em; +} + +.ui-dialog .tab-content .charsheet .show-creature-style label { + display: inline-flex; +} + +.ui-dialog .tab-content .charsheet .show-creature-style label span { + padding-inline: 1px; +} + +.ui-dialog .tab-content .charsheet .wrapper .show-creature-style label:has(input:checked) .pc-sheet, +.ui-dialog .tab-content .charsheet .wrapper .show-creature-style label:has(input) .pc-sheet + span, +.ui-dialog .tab-content .charsheet .wrapper .show-creature-style label:has(input:not(:checked)) .creature-sheet { + background-color: transparent; + color: #c1c1c1; + font-size: 1rem; + opacity: .5; + transform: scale(1); + transition: transform .2s ease-in-out; +} + +.ui-dialog .tab-content .charsheet .wrapper .show-creature-style label:has(input:not(:checked)) .pc-sheet, +.ui-dialog .tab-content .charsheet .wrapper .show-creature-style label:has(input:checked) .creature-sheet { + background-color: transparent; + color: #fff; + font-size: 1rem; + opacity: 1; + padding-inline: 5px; + transform: scale(1.1); +} + +.ui-dialog .tab-content .charsheet .wrapper .show-creature-style label:has(input:not(:checked)):hover .creature-sheet, +.ui-dialog .tab-content .charsheet .wrapper .show-creature-style label:has(input:checked):hover .pc-sheet { + background-color: transparent; + color: #eb3143; + opacity: 1; + transform: scale(1.1); +} + +.ui-dialog .charsheet .weapon-style { + bottom: -1rem; + font-family: 'Jolly Lodger'; + font-size: 3rem; + font-style: italic; + font-weight: normal; + letter-spacing: 2px; + margin-inline: auto; + position: relative; + top: 12%; + left: 18%; + transform: rotate(-5deg); +} + +.ui-dialog .charsheet .show-creature .weapon-style { + left: auto; + top: 0; + transform: none; +} + +.charsheet .weapon-actions { + column-gap: 2px; + display: flex; +} + +.charsheet .battle { + display: inline-flex; + flex-wrap: wrap; + grid-area: battle; + line-height: 2; + margin-inline: auto; + max-width: 376px; + padding: 0 10px 5px 10px; + position: relative; + text-align: center; + top: -5px; + z-index: 1; +} + +.ui-dialog .charsheet .defence-style { + font-family: 'New Tegomin'; + font-size: 1.5rem; + font-weight: 700; + letter-spacing: 2px; + padding: 0 0 3px 0; +} + +.charsheet .armour { + align-items: center; + column-gap: 5px; + display: grid; + grid-area: armour; + grid-template-columns: min-content minmax(15em, 20em) minmax(1em, 3em) 8em; + grid-template-rows: 4em 1.2em 1.2em; + padding-block: 1em; + position: relative; +} + +.charsheet .show-creature .armour { + grid-template-columns: minmax(10em, min-content) minmax(10em, auto); + grid-template-rows: 3em 2em 3em; + margin-inline: auto; + margin-left: 0; + padding: 0 2em 0 0; + width: 100%; + justify-items: end; +} + +.charsheet .show-creature .armour .span-2 { + align-items: center; + display: inline-flex; + margin-inline: auto; + margin-right: 0; +} + +.charsheet .show-creature .armour-tier-grid { + left: 0; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + width: 15em; +} + +.charsheet .armour .section-notes { + padding-left: 3em; + white-space: nowrap; +} + +.charsheet .show-pc .armour::before { + background-image: url('https://vinceflaggpainting.com/images/ronin_kusarigama.webp'); + background-repeat: no-repeat; + background-size: 100% 17em; + content: ''; + display: block; + height: 17em; + left: 1em; + max-width: 49em; + position: absolute; + top: -7em; + width: 97%; +} + +.sheet-darkmode .charsheet .armour::before { + background-image: url('https://vinceflaggpainting.com/images/ronin_kusarigama_darkmode.webp'); +} + +.ui-dialog .charsheet .armour-style { + font-family: 'Pirata One'; + font-size: 3rem; + font-weight: normal; + left: 1em; + position: relative; + width: min-content; +} + +.ui-dialog .charsheet .show-creature .armour-style { + left: 0; +} + +.ui-dialog .tab-content .charsheet label:has(.damaged-style) { + display: inline-flex; + width: 5.5em; + white-space: nowrap; + z-index: 1; +} + +.ui-dialog .tab-content .charsheet .damaged-style { + font-family: 'Loved by the King'; + font-size: 1.5rem; + font-weight: bold; + letter-spacing: 1px; + line-height: 1.5rem; + padding-top: 2px; +} + +.charsheet .equipment { + border: 12px solid transparent; + border-top: 12px; + display: grid; + grid-area: equipment; + grid-template-columns: minmax(5em, 1fr) minmax(10em, 3fr) min-content; + grid-template-rows: 1.25em; + margin: 4em auto auto auto; + margin-right: 2%; + min-height: 19em; + outline: 7px solid #333; + outline-offset: -8px; + width: 90%; +} + +.sheet-darkmode .charsheet .equipment { + outline-color: #000; +} + +.charsheet .equipment-notes { + left: -6em; + min-width: 15.75em; + position: relative; + text-align: right; + top: -3.5em; +} + +.ui-dialog .charsheet .equipment-style { + -webkit-text-stroke-color: #000; + -webkit-text-stroke-width: 1px; + align-self: center; + color: #fff; + font-family: 'Candal'; + font-size: 2.5rem; + letter-spacing: .4rem; + margin-left: -1rem; + position: relative; + right: -1rem; + text-shadow: 2px 3px 0 #000; + top: -1.5em; + transform: scaleY(1.5); +} + +.ui-dialog .tab-content .charsheet .ryo { + background-color: #eb3143; + background-image: url('https://vinceflaggpainting.com/images/ronin_ryo_background.webp'); + background-repeat: no-repeat; + background-size: contain; + border-radius: 40%; + color: #fff; + height: 6.25em; + left: -1.4em; + outline: 1px solid #fff; + outline-offset: -4px; + position: relative; + top: -1.5em; + transform: rotateZ(7deg); + width: 4em; +} + +.ui-dialog .charsheet .ryo span, +.ui-dialog .charsheet .ryo span.kanji-text { + color: #fff; + font-weight: normal; +} + +.charsheet .consumables { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + height: 100%; + justify-content: center; + margin: 2em auto auto 2px; + row-gap: 10px; + width: 4em; +} + +.ui-dialog .tab-content .charsheet .consumables > label { + border-radius: 50%; + box-shadow: 2px 1px 2px #eb3143; + height: 3.5em; + min-width: 3.5em; + outline: 2px solid #eb3143; + outline-offset: 2px; + padding-top: 4px; + position: relative; +} + +.ui-dialog .tab-content .charsheet .consumables label input.input-width-small { + font-size: 1.85rem; + height: auto; + margin-block: -2px; + max-width: 32px; + min-width: auto; + width: 32px; +} + +.charsheet .tenets { + grid-area: tenets; + left: .5em; + margin-inline: auto; + position: relative; + top: 2em; + width: calc(100% - 1vw); +} + + + +.ui-dialog .charsheet .haiku-style { + font-family: 'Special Elite'; + font-size: 2rem; + line-height: 2rem; + padding-top: 5px; +} + +.ui-dialog .charsheet .chance-style { + font-family: 'Jolly Lodger'; + font-size: 2rem; + font-weight: normal; + letter-spacing: 1px; + line-height: 2rem; + padding: 2px; +} + +.ui-dialog .tab-content .charsheet .wrapper .tenets-grid input[type="text"] { + box-shadow: 0px 2px 2px -2px #000; + border: none; + max-width: 90%; +} + +.charsheet .hp-box { + display: grid; + grid-area: hp-box; + grid-template-columns: min-content min-content 1fr; + grid-template-areas: + "resurrection meditation hpCurrMax" + "resurrection meditation hpCurrMax" + "resurrection meditation seppuku"; + padding-inline: 2px; +} + +.charsheet .show-creature .hp-box { + grid-template-areas: none; + margin: 0 0 .5em -1em; + position: relative; +} + +.charsheet .resurrection {grid-area: resurrection;} +.charsheet .meditation {grid-area: meditation;} + +.charsheet .hpCurrMax { + display: grid; + grid-area: hpCurrMax; + grid-template-columns: 1fr 2px 1fr; + grid-template-rows: 3.25rem 1.25rem 4.5rem auto; + justify-items: center; + margin: auto auto 5px auto; + outline: 4px solid #eb3143; + padding: 0 0 2px 0; + width: 12em; +} + +.charsheet .hpCurrMax .column-header { + color: #eb3143; + margin-inline: -5px; + letter-spacing: 1px; +} + +.ui-dialog .charsheet .red-background, +.ui-dialog .charsheet .red-background span { + background-color: #eb3143; + color: #fff; + overflow: hidden; + display: inline-flex; + margin-inline: auto; +} + +.ui-dialog .charsheet .hit-points-style { + transform: scaleY(1.5); + display: inline-block; + font-size: 2.25rem; + font-weight: normal; + font-family: 'Special Elite'; + max-height: 2.25rem; + overflow: hidden; + margin: 3px 0 0 0; +} + +.ui-dialog .tab-content .charsheet .infected-style { + display: block; + font-size: 1.65rem; + letter-spacing: 3px; + margin-block: 1px; +} + +.ui-dialog .tab-content .charsheet .seppuku .infected-style { + transform: scaleY(1.5); +} + +.charsheet .hpCurrMax .red-background ~ div { + margin-block: 1px; +} + +.charsheet .seppuku { + display: grid; + grid-area: seppuku; + grid-template-rows: 3rem; +} + +.charsheet .seppuku label:first-child::before { + background-image: url('https://vinceflaggpainting.com/images/ronin_seppuku_image.webp'); + background-position-y: center; + background-repeat: no-repeat; + background-size: 100% 12px; + content: ''; + height: 21px; + margin-left: -22px; + position: absolute; + width: 12em; + z-index: 0; +} + +.charsheet .seppuku-box { + margin: auto; + margin-top: 5px; + max-width: 12em; + outline: 1px solid #333; +} + +.ui-dialog .tab-content .charsheet input, +.ui-dialog .tab-content .charsheet select { + background-color: #e6e6e6ab; + color: #000; + height: 1.75em; + margin: 2px; + padding: 0 2px 0 2px; + vertical-align: middle; + width: auto; + z-index: 0; +} + +.ui-dialog .tab-content .charsheet button:focus, +.ui-dialog .tab-content .charsheet input:hover, +.ui-dialog .tab-content .charsheet input:focus, +.ui-dialog .tab-content .charsheet input[type="checkbox"]:hover, +.ui-dialog .tab-content .charsheet input[type="checkbox"]:focus, +.ui-dialog .tab-content .charsheet textarea:hover, +.ui-dialog .tab-content .charsheet textarea:focus, +.ui-dialog .tab-content .charsheet select:hover, +.ui-dialog .tab-content .charsheet select:focus { + background-clip : border-box; + background-color: lightgoldenrodyellow; + box-shadow: 0px 0px 4px #fff; + color: #111; + outline: 2px solid #555; +} + +.ui-dialog .charsheet input[type="text"] { + display: inline-flex; + margin-inline: auto; + min-width: 3em; +} + +.ui-dialog .tab-content .charsheet textarea { + background-color: #e6e6e6ab; + color: #000; + height: 9em; + margin: auto; + max-height: 32em; + min-height: 3em; + resize: vertical; + scrollbar-width: thin; + white-space: normal; +} + +.ui-dialog .tab-content .charsheet .repcontainer .repitem { + display: inline-flex; + width: 100%; +} + +.ui-dialog .tab-content .charsheet .flex-row { + align-items: center; + display: flex; + flex: 1 1 0; + flex-wrap: wrap; + justify-content: space-between; +} + +.ui-dialog .tab-content .charsheet .flex-row > * { + margin-inline: 2px; + margin-block: 2px; +} + +.ui-dialog .tab-content .charsheet .flex-inline-row { + align-items: center; + display: inline-flex; + gap: 2px; + margin: auto; + padding-bottom: 2px; + position: relative; + white-space: nowrap; + z-index: 1; +} + +.ui-dialog .tab-content .charsheet .flex-inline-row > * { + margin-inline: 2px; + margin-block: 2px; +} + +.ui-dialog .tab-content .charsheet label { + margin: 0; + padding: 0; +} + +.charsheet label:has(input[type="checkbox"]) span { + font-family: 'Nunito', serif; + padding: 0 4px 0 4px; + vertical-align: middle; +} + +.ui-dialog .tab-content .charsheet label:has(button):hover, +.ui-dialog .tab-content .charsheet label:has(input[type="checkbox"]):hover, +.ui-dialog .tab-content .charsheet label:has(input[type="radio"]):hover { + cursor: pointer; +} + +.ui-dialog .tab-content .charsheet input[type="radio"] { + padding: inherit; +} + +.ui-dialog .tab-content .charsheet .repitem textarea { + height: 1.75em; + line-height: 1.25em; + max-height: 12em; + min-height: 1.75em; + padding: 2px 2px 0 2px; + resize: vertical; +} + + +.ui-dialog .tab-content .charsheet button[type="roll"] { + align-items: center; + display: inline-flex; + font-size: 1.2rem; + font-weight: normal; + justify-content: center; + margin: auto; + padding: 0 2px 0 2px; +} + +.ui-dialog .tab-content .charsheet button[type="roll"]:before { + content: "0"; + display: inline-grid; + font-family: "dicefontd20"; + font-size: 1.75rem; +} + +.ui-dialog .tab-content .charsheet button[type="roll"]:empty { + display: inline-grid; + font-size: 1em; + font-weight: normal; + margin: auto; + min-width: 2em; + outline: 1px solid #333; + padding: 1px; +} + +/* hides the dice image */ +.ui-dialog .tab-content .charsheet button[type="roll"]:not(:empty):before { + content: ''; + display: none; +} + +.ui-dialog .tab-content .charsheet input[type="checkbox"] { +appearance: none; + background: white; + border-left: 1px solid #eb3143; + box-shadow: 1px -1px 2px 1px #eb3143; + border-radius: 3px; + position: relative; + height: 15px; + width: 15px; + margin: auto; + outline: none; + vertical-align: middle; + + &:checked::before { + align-items: center; + color: #000; + content: '*'; + display: flex; + font-family: 'Pictos'; + font-size: 20px; + inset: 0; + justify-content: center; + position: absolute; + transform: rotate(17deg); + } +} + +.ui-dialog .tab-content .charsheet input[type="radio"] { + appearance: none; + background: white; + border-radius: 2px; + position: relative; + height: 10px; + width: 10px; + outline: none; + + &:checked::before { + align-items: center; + color: #000; + content: '*'; + display: flex; + font-family: 'Pictos'; + font-size: 12px; + inset: 0; + justify-content: center; + position: absolute; + transform: rotate(17deg); + } +} + +.ui-dialog .tab-content .charsheet select.input-width-small, +.ui-dialog .tab-content .charsheet input[type="text"].input-width-small, +.ui-dialog .tab-content .charsheet input[type="number"].input-width-small { + text-align: center; + min-width: 0; + width: 3em; +} + +.ui-dialog .tab-content .charsheet select.input-width-smallest, +.ui-dialog .tab-content .charsheet input[type="text"].input-width-smallest, +.ui-dialog .tab-content .charsheet input[type="number"].input-width-smallest { + text-align: center; + min-width: 0; + width: 2em; +} + +.ui-dialog .tab-content .charsheet .ability-input { + background-clip: text; + border: none; + font-size: 2rem; + font-weight: bold; + max-width: 2em; + min-width: 2em; + text-align: center; + z-index: 1; +} + +.ui-dialog .tab-content .charsheet .hpCurrMax .ability-input { + background-clip: inherit; +} + +.ui-dialog .tab-content .charsheet .ability-mod { + align-self: center; + font-size: 1.1rem; + height: 2.25em; + min-width: 2.25em; + padding-right: 4px; + margin-left: 8px; +} + +.ui-dialog .tab-content .charsheet input[type="text"].input-width-medium { + max-width: 43%; + min-width: 7em; +} + +.ui-dialog .tab-content .charsheet .input-width-medium-stretch { + max-width: 18em; + min-width: 11.5em; + width: 40%; +} + +.ui-dialog .tab-content .charsheet input[type="text"].input-width-large { + max-width: 15em; + min-width: 10em; + width: 100%; +} + +.ui-dialog .tab-content .charsheet .width-full, +.ui-dialog .tab-content .charsheet .input-width-full, +.ui-dialog .tab-content .charsheet textarea.input-width-full { + width: 100%; +} + +.ui-dialog .tab-content .charsheet .vertical-text { + display: flex; + margin: auto; + margin-top: 0; + padding-block: 4px; + padding-inline: 2px; + text-orientation: upright; + width: min-content; + writing-mode: vertical-lr; +} + +.charsheet .two-columns { + display: grid; + grid-template-columns: 1fr 1fr; +} + +.charsheet .three-columns { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.charsheet .span-all { + grid-column: 1/-1; +} + +.charsheet .span-2 { + grid-column: span 2; +} + +.charsheet .span-3 { + grid-column: span 3; +} + +.charsheet .span-4 { + grid-column: span 4; +} + +.charsheet .span-5 { + grid-column: span 5; +} + +.charsheet .nowrap { + white-space: nowrap; +} + +.ui-dialog .tab-content .charsheet .left { + text-align: left; + margin-inline: auto; + margin-left: 0; +} + +.ui-dialog .tab-content .charsheet .center { + align-content: center; + text-align: center; +} + +.ui-dialog .tab-content .charsheet .right { + text-align: right; +} + +.charsheet .armour-tier-grid { + align-content: center; + column-gap: 5px; + display: grid; + font-size: 1rem; + grid-template-columns: 1fr 1fr 1fr 1fr; + height: 3em; + left: -2.5em; + position: relative; + width: 12em; + z-index: 1; +} + +.charsheet .woes-grid { + display: grid; + font-size: 1rem; + gap: 3px; + grid-template-columns: repeat(auto-fill, minmax(20px, 1fr)); + left: -3em; + top: -3em; + position: relative; + z-index: 1; +} + +.ui-dialog .tab-content .charsheet .woes-style { + font-family: 'Pirata One'; + font-size: 3rem; + font-weight: normal; + left: -10px; + letter-spacing: 2px; + position: relative; + top: -24px; +} + +.ui-dialog .tab-content .charsheet .woes-grid label { + margin: auto; + padding: 0; + position: relative; + width: 20px; +} + +.ui-dialog .tab-content .charsheet .armour-tier-grid label span { + color: #333; + display: flex; + font-family: 'New Tegomin'; + font-size: 1.2rem; + height: 23px; + padding: 1px 2px 0 0; + place-content: space-evenly; + position: relative; + width: 26px; +} + +.ui-dialog .tab-content .charsheet .honour-grid label span, +.ui-dialog .tab-content .charsheet .woes-grid label span { + color: #333; + display: flex; + font-family: 'New Tegomin'; + font-size: 1.2rem; + height: 20px; + place-content: space-evenly; + position: relative; + width: 20px; +} + +.ui-dialog .tab-content .charsheet .honour-grid label input, +.ui-dialog .tab-content .charsheet .woes-grid label input { + -webkit-appearance: none; + border: 1px solid #8a8a8a; + border-radius: 50%; + height: 20px; + margin: 0; + outline: 1px solid #000; + outline-offset: 1px; + position: absolute; + width: 20px; +} + + +.ui-dialog .tab-content .charsheet .armour-tier-grid label input { + -webkit-appearance: none; + border: 1px solid #8a8a8a; + border-radius: 50%; + height: 23px; + margin: 0; + outline: 1px solid #000; + outline-offset: 1px; + position: absolute; + width: 26px; +} + +.ui-dialog .tab-content .charsheet .honour-grid label:last-child, +.ui-dialog .tab-content .charsheet .woes-grid label:last-child { + transform: scale(1.5); + margin: 4px; + z-index: 1; +} + +.ui-dialog .tab-content .charsheet .woes-grid label:last-child { + border-radius: 50%; + bottom: -20px; + left: -15px; + margin-inline: 6px 0; + outline: 1px solid #FFF; + outline-offset: 2px; +} + +.ui-dialog .tab-content .charsheet label:has(input[type="checkbox"]:checked) span, +.ui-dialog .tab-content .charsheet label:has(input[type="checkbox"]):hover span, +.ui-dialog .tab-content .charsheet button[type="roll"]:hover, +.ui-dialog .charsheet .virtues:hover .virtues-box button[type="roll"] { + background-color: #eb3143; + background-image: none; + border-color: transparent; + border-radius: 4px; + box-shadow: none; + color: #000; + outline: none; + text-shadow: none; +} + +.ui-dialog .tab-content .charsheet .weapon-notes-style label:has(input[type="checkbox"]:checked) span { + background-color: #eb3143; + outline: none; +} + +.ui-dialog .tab-content .charsheet .honour-grid label input[type='radio']:hover, +.ui-dialog .tab-content .charsheet .woes-grid label input[type='radio']:hover, +.ui-dialog .tab-content .charsheet .armour-tier-grid label input[type='checkbox']:hover { + background-color: #eb3143; +} + +.ui-dialog .tab-content .charsheet .honour-grid label input[type='radio']:hover + span, +.ui-dialog .tab-content .charsheet .woes-grid label input[type='radio']:hover + span, +.ui-dialog .tab-content .charsheet .armour-tier-grid label input[type='checkbox']:hover + span { + border-radius: 50%; + color: #fff; + font-weight: normal; +} + +.ui-dialog .tab-content .charsheet .honour-grid label input[type='radio']::before, +.ui-dialog .tab-content .charsheet .woes-grid label input[type='radio']::before, +.ui-dialog .tab-content .charsheet .armour-tier-grid label input[type='checkbox']::before { + border-radius: 50%; + content: ''; + display: block; + height: 100%; +} + +.ui-dialog .tab-content .charsheet .honour-grid label input[type='radio']:checked + span, +.ui-dialog .tab-content .charsheet .woes-grid label input[type='radio']:checked + span, +.ui-dialog .tab-content .charsheet .armour-tier-grid label input[type='checkbox']:checked + span { + background-color: #eb3143; + border-radius: 50%; + color: #fff; + font-weight: normal; + min-height: 21px; + min-width: 21px; + outline: 1px solid #fff; +} + +.ui-dialog .tab-content .charsheet .armour .armour-tier-grid label input[type='checkbox']:checked + span { + outline: 3px solid #000; +} + +.sheet-darkmode .ui-dialog .tab-content .charsheet .armour .armour-tier-grid label input[type='checkbox']:checked + span { + outline: 2px solid #fff; +} + +.ui-dialog .tab-content .charsheet .honour-grid label:has(~ label input:checked) input:before, +.ui-dialog .tab-content .charsheet .woes-grid label:has(~ label input:checked) input:before, +.ui-dialog .tab-content .charsheet .armour-tier-grid label:has(~ label input:checked) input:before { + background-color: #555; +} + +.ui-dialog .tab-content .charsheet .armour-tier-grid label:has(~ label input:checked) input:before { + height: 23px; + margin-left: -2px; + margin-top: -1px; + outline: 2px solid #000; + width: 25px; +} + +.ui-dialog .tab-content .charsheet .honour-grid label:has(~ label input:checked) span, +.ui-dialog .tab-content .charsheet .woes-grid label:has(~ label input:checked) span, +.ui-dialog .tab-content .charsheet .armour-tier-grid label:has(~ label input:checked) span { + border-radius: 50%; + color: #cbcbcb; + font-weight: normal; +} + +.ui-dialog .tab-content .charsheet .armour-tier-grid label:has(input[type="checkbox"]):hover span { + border-radius: 50%; +} + +.charsheet .tenets-grid { + display: grid; + grid-template-columns: auto auto; + grid-template-rows: 2rem 3rem; + margin: 5px 2px 15px 2px; + outline: 2px solid #333; + padding: 5px; + row-gap: 5px; +} + +.sheet-darkmode .charsheet .tenets-grid { + outline-color: #000; +} + +.ui-dialog .charsheet .tenets-style { + font-family: 'Proxima Nova'; + letter-spacing: 10px; + font-weight: normal; + width: 100%; + display: inline-flex; + justify-content: center; +} + +.charsheet .tenets-grid input[type="text"] { + text-align: center; +} + +.ui-dialog .tab-content .charsheet input.lost-broken { + position: relative; +} + +.ui-dialog .tab-content .charsheet label.lost-broken { + display: none; +} + +.ui-dialog .tab-content .charsheet input.lost-broken:checked + label.lost-broken { + align-items: center; + background-color: #eb3143; + color: #fff; + display: inline-flex; + font-size: 1.5em; + height: 100%; + margin: auto; + opacity: .85; + padding-left: 4px; + place-content: center; + position: absolute; + text-align: left; + width: 100%; + z-index: 1; +} + +.ui-dialog .tab-content .charsheet .repitem:has(input.lost-broken:checked):hover input.lost-broken:checked { + z-index: 2; +} + +.ui-dialog .tab-content .charsheet input.lost-broken:checked:hover + .lost-broken, +.ui-dialog .tab-content .charsheet input.lost-broken:checked + label.lost-broken:hover { + opacity: 1; +} + +.charsheet .broken-pc:checked ~ .broken-pc { + align-content: center; + background-color: #555555; + display: block; + min-height: 2em; + min-width: 8em; + outline: 2px solid #000; + width: 100%; +} + +.charsheet .warning:checked + input { + background-color: #eb3143; + border-radius: 0; + color: #fff; + outline: 3px solid #eb3143; +} + +.ui-dialog .tab-content .charsheet .weapons .normal-view, +.ui-dialog .tab-content .charsheet .weapons .dueling-view { + display: none; +} + +.charsheet .show-duel:not(:checked) ~ div[data-groupname="repeating_weapons"] .normal-view, +.charsheet .show-duel:checked ~ div[data-groupname="repeating_weapons"] .dueling-view { + display: block; + max-width: 11em; + white-space: nowrap; +} + +/* Hide spinners in Firefox */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -moz-appearance: none; + -webkit-appearance: none; + margin: 0; +} + +.charsheet input:hover::-webkit-outer-spin-button, +.charsheet input:hover::-webkit-inner-spin-button, +.charsheet input:focus::-webkit-outer-spin-button, +.charsheet input:focus::-webkit-inner-spin-button { + appearance: textfield; + -moz-appearance: auto; + /* Restore default appearance on focus */ +} + +.charsheet select { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + cursor: pointer; + text-align: center; +} + +/* repeating row controls */ +.ui-dialog .tab-content .charsheet .repcontainer .repitem, +.ui-dialog .tab-content .charsheet .repcontainer + .repcontrol { + background-color: transparent; + margin: auto; + min-height: 1em; + padding-bottom: 2px; +} + +.ui-dialog .charsheet .repcontainer .repitem .itemcontrol { + max-width: -webkit-fill-available; +} + +.ui-dialog .tab-content .charsheet .itemcontrol button.repcontrol_del, +.ui-dialog .tab-content .charsheet .itemcontrol a.repcontrol_move { + border: 2px solid #111; + border-radius: 3px; + bottom: -.5em; + display: block; + height: 1.5em; + padding: 0 0 1.5em 0; + position: relative; + width: 1.5em; + z-index: 3; +} + +.ui-dialog .tab-content .charsheet .itemcontrol button.repcontrol_del { + background: red; + color: #fff; + outline: none; + right: 5px; +} + +.ui-dialog .tab-content .charsheet .itemcontrol a.repcontrol_move { + background: #fff; + color: #000; + outline: none; +} + +.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_add, +.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_del, +.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_move, +.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_edit { + background: none; + border: 0; + box-shadow: none; + font-size: 0; + line-height: 1; + outline: none; + padding: 0; +} + +.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_add:before, +.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_del:before, +.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_move:before, +.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_edit:before { + background: none; + background-color: #fff; + border: 2px solid #222222d4; + border-radius: 3px; + box-shadow: none; + display: block; + height: 1.5em; + line-height: normal; + outline: none; + padding: 0; + width: 1.5em; +} + +.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_add:hover, +.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_del:hover, +.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_move:hover, +.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_edit:hover { + color: #fff; + outline: none; +} + +.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_add:hover:before, +.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_del:hover:before, +.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_move:hover:before, +.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_edit:hover:before { + background-color: #000; + font-weight: normal; + outline: none; +} + +.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_add:before { + content: "&"; + display: block; + font-family: "Pictos"; + font-size: 12px; + font-weight: bold; +} + +.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_edit:before { + content: "("; + display: block; + font-family: "Pictos"; + font-size: 12px; + font-weight: bold; +} + +.ui-dialog .tab-content .charsheet .editmode + .repcontrol button.repcontrol_edit:before { + content: ")"; +} + +.charsheet .section-header, +.charsheet .section-header-inline { + font-family: 'Nunito', serif; + font-size: 1.5rem; + font-weight: bold; + margin-inline: 2px; +} + +.charsheet .column-header { + font-family: 'Nunito', serif; + font-weight: bold; + font-size: 1.1rem; +} + +.charsheet .swiftness, +.charsheet .spirit, +.charsheet .vigor, +.charsheet .resilience { + display: inline-block; + margin-bottom: 2em; + position: static; + text-align: center; + width: 100%; + & span.section-header { + font-family: 'Ghastly Panic', sans-serif; + font-size: 3rem; + font-synthesis: none; + letter-spacing: 4px; + line-height: 3rem; + padding: 5px 3px 5px 8px; + text-shadow: 0 0 0 #000, 0 0 0 #000; + } +} + +.charsheet .swiftness, +.charsheet .spirit, +.charsheet .vigor, +.charsheet .resilience, +.charsheet .honour { + margin-inline: auto; + /* inverts margin-right based on vw + 888px up to 1280px + */ + margin-right: max(-36px, min(0px, calc(-0.0918 * 100vw + 81.55px))); +} + +.charsheet .spirit, +.charsheet .vigor { + margin-left: -2em; +} + +.charsheet .ability-base-mod { + display: flex; + margin: -6px auto 2px auto; + max-width: 5em; + position: relative; + vertical-align: middle; + z-index: 1; +} + +.charsheet .section-notes { + font-size: 1.2rem; + font-family: 'Times New Roman', Times, serif; + line-height: 1.25rem; +} + +.charsheet .logo { + background-image: url('https://vinceflaggpainting.com/images/ronin_logo.webp'); + background-repeat: no-repeat; + background-size: cover; + display: grid; + grid-area: logo; + height: 218px; + left: -4em; + margin-bottom: -4em; + margin-right: -5em; + place-self: center; + position: relative; + top: -3em; + transform-origin: top left; + transform: scale(1); + transition: transform .5s ease-in-out; + width: 330px; + z-index: 0; +} + +.ui-dialog .charsheet .kanji-text { + font-family: 'Yuji Mai'; + font-size: 1.65rem; + font-weight: 400; + text-shadow: 1px 1px 1px #111; +} + +/* roll template */ + +.sheet-rolltemplate-ronin { + align-content: center; + color: #111 !important; + margin-bottom: 5px; + margin-inline: auto; + max-inline-size: 360px; + min-height: 3em; +} + +.sheet-rolltemplate-ronin .sheet-heading-row { + background-color: #000; + display: grid; font-family: 'Special Elite'; + grid-template-columns: 1fr 1fr; + min-height: 2em; + padding: 5px 2px 2px 2px; + position: relative; +} + +.sheet-rolltemplate-ronin .sheet-template-body { + align-content: center; + background-image: url('https://vinceflaggpainting.com/images/ronin_template_background.webp'); + background-position: 0 -6px; + background-repeat: no-repeat; + background-size: 100%; + padding-top: 2em; +} + +.sheet-rolltemplate-ronin .sheet-template-body::after { + background-image: url('https://vinceflaggpainting.com/images/ronin_template_background.webp'); + background-position: bottom; + background-repeat: no-repeat; + background-size: cover; + bottom: -7px; + content: ''; + display: block; + padding-top: 20px; + position: relative; +} + +.sheet-rolltemplate-darkmode.sheet-rolltemplate-ronin .sheet-template-body, +.sheet-rolltemplate-darkmode.sheet-rolltemplate-ronin .sheet-template-body::after { + background-image: url('https://vinceflaggpainting.com/images/ronin_template_background_darkmode.webp'); + color: #fff; +} + +.sheet-rolltemplate-ronin .sheet-row { + align-items: center; + display: grid; + grid-template-columns: 1fr 1fr; +} + +.sheet-rolltemplate-ronin .sheet-span-all { + grid-column: 1/-1; + text-align: center; +} + +.sheet-rolltemplate-ronin .sheet-key { + margin-inline: auto; + margin-right: 2px; +} + +.sheet-rolltemplate-ronin .sheet-value { + margin-inline: auto; + margin-left: 0; +} + +.sheet-rolltemplate-ronin .sheet-heading { + font-family: 'Special Elite'; + font-size: 1.2em; +} + +.sheet-rolltemplate-ronin .sheet-subheading { + font-family: 'Nunito'; +} + +.sheet-rolltemplate-ronin .sheet-heading, +.sheet-rolltemplate-ronin .sheet-subheading { + align-content: center; + background-color: #000; + color: #fff; + padding-block: 2px; + padding-inline: 5px; + position: relative; +} + +.sheet-rolltemplate-ronin .sheet-duel-label { + background-color: #eb3143; + border-radius: 5px; + box-shadow: 1px 3px 1px 1px #111; + font-family: serif; + font-size: 12px; + padding-inline: 6px; + pointer-events: none; + position: absolute; + right: -1px; + text-orientation: upright; + top: 5px; + transform: rotate(7deg); + writing-mode: vertical-lr; +} + +.sheet-rolltemplate-ronin .sheet-block { + display: inline-block; +} + +.sheet-rolltemplate-ronin .sheet-block:empty { + display: none; +} + +.sheet-rolltemplate-ronin .sheet-description { + background-color: #e6e6e6ab; + display: block; + margin: .25em 1em .5em 1em; + padding: 5px 5px 10px 5px; + text-align: left; + white-space: normal; +} + +.sheet-rolltemplate-darkmode.sheet-rolltemplate-ronin .sheet-description { + background-color: #000000b8; +} + +.sheet-rolltemplate-ronin .sheet-center { + text-align: center; +} + +.sheet-rolltemplate-ronin hr { + background-color: #111; + height: 2px; + margin-block: 2px; + width: 70%; +} + +.sheet-rolltemplate-ronin .sheet-footnote { + font-size: .85em; + padding-inline: 5px; +} + +.sheet-rolltemplate-ronin .sheet-success-roll, +.sheet-rolltemplate-ronin .sheet-crit-roll { + color: #3fb315 !important; + display: inline-block; + font-size: 1.25em; + font-weight: bold; + padding-block: 2px; + vertical-align: top; + width: 100%; +} + +.sheet-rolltemplate-ronin .inlinerollresult.fullcrit { + border: 2px solid #3fb315 !important; +} + +.sheet-rolltemplate-ronin .sheet-failed-roll, +.sheet-rolltemplate-ronin .sheet-fumble-roll { + color: #eb3143 !important; + display: inline-block; + font-size: 1.25em; + font-weight: bold; + padding-block: 2px; + vertical-align: top; + width: 100%; +} + +.sheet-rolltemplate-ronin .inlinerollresult.fullfail { + border: 2px solid #eb3143 !important; +} + +.sheet-rolltemplate-ronin span.inlinerollresult { + background-color: transparent; + border: 1px solid #666; + cursor: help; + display: inline-block; + font-weight: 600; + margin: 1px; + min-width: 1em; + padding: 0 3px 0 3px; + text-align: center; +} + +.sheet-rolltemplate-ronin span[data-i18n="versus-difficulty-rating"] + .inlinerollresult { + border-color: transparent; +} + +/* d20 dice image */ +.sheet-rolltemplate-ronin .sheet-d20-roll span.inlinerollresult { + border-color: transparent; + display: inline-grid; + height: 24px; + line-height: normal; + margin-inline: 0; + padding: 0; + position: relative; + width: 24px; +} + +.sheet-rolltemplate-ronin .sheet-d20-roll span.inlinerollresult::before { + content: '0'; + display: inline-grid; + font-family: 'dicefontd20'; + font-size: 1.85em; + line-height: 1em; + opacity: .85; + position: absolute; +} + +.sheet-rolltemplate-darkmode.sheet-rolltemplate-ronin .sheet-d20-roll span.inlinerollresult::before { + opacity: .25; +} + +.sheet-rolltemplate-ronin .sheet-dice-roll span.inlinerollresult { + background-color: #000; + border: none !important; + border-radius: 2px; + color: #fff; + display: inline-grid; + font-weight: normal; + height: 24px; + line-height: normal; + margin-inline: 0; + outline: 1px solid #333; + outline-offset: -2px; + padding: 0; + position: relative; + width: 24px; +} + +.sheet-rolltemplate-ronin span.sheet-roll-detail { + cursor: help; + vertical-align: text-top; + opacity: .5; +} + +.sheet-rolltemplate-ronin span.sheet-roll-detail:hover { + opacity: 1; +} + +.sheet-rolltemplate-ronin span.sheet-roll-detail .inlinerollresult { + background-color: transparent; + border: none; + font-size: 1rem; + font-weight: normal; + padding: 0 1px 0 1px; + pointer-events: none; +} + +/* hyperlinks */ +.sheet-rolltemplate-ronin a { + background-color: #ffffffa6; + font-family: system-ui; + font-weight: bold; + padding: 0 4px 4px 4px; + text-decoration: underline; +} + +.sheet-rolltemplate-darkmode.sheet-rolltemplate-ronin a { + background-color: #000000a6; +} + +/* removes text and adds dice image */ +.sheet-rolltemplate-ronin .sheet-roll-query a::before, +.sheet-rolltemplate-ronin .sheet-roll-query a::after { + bottom: -1px; + color: #000; + content: 'F'; + font-family: 'dicefontd6'; + font-size: 16px; + opacity: .75; + position: relative; +} + +.sheet-rolltemplate-ronin .sheet-roll-query { + display: contents; +} + +.sheet-rolltemplate-ronin .sheet-roll-query a { + text-decoration: none; +} + +.sheet-rolltemplate-ronin .sheet-roll-query a::before { + margin-right: -10px; + top: -3px; +} + +.sheet-rolltemplate-ronin .sheet-roll-query:hover a { + text-decoration: none; +} + +.sheet-rolltemplate-ronin .sheet-roll-query:hover a::before { + color: #eb3143; + font-size: 17px; + opacity: 1; +} + +.sheet-rolltemplate-ronin .sheet-roll-query:hover a::after { + color: #eb3143; + font-size: 17px; + opacity: 1; + top: 1px; +} \ No newline at end of file diff --git a/Ronin/ronin.html b/Ronin/ronin.html new file mode 100644 index 0000000000..76f6f1dcb3 --- /dev/null +++ b/Ronin/ronin.html @@ -0,0 +1,3072 @@ +