@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap'); .sheet-darkmode .sheetform, .charactersheet.charsheet { background: transparent; } .sheet-darkmode .characterviewer label, .sheet-darkmode .options .row > span { color: inherit; } .ui-dialog .largedialog, .characterviewer .nav-tabs, .ui-dialog .charsheet { padding: 0px; } .nav { margin-bottom: 0px; } .m-sheet { --line-height: 24px; font-size: 18.5px; line-height: var(--line-height); font-family: "Open Sans"; letter-spacing: -0.025em; position: relative; scrollbar-width: thin; scrollbar-color: #dad39b black; max-height: calc(100vh - 34px); overflow: auto; } .m-sheet * { scrollbar-width: thin; scrollbar-color: #dad39b black; } .m-sheet select.sheet-type { position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.75); color: white; padding: 0 6px; width: fit-content; z-index: 999; border-radius: 0px; font-size: 16px; min-height: 30px; line-height: 100%; } .m-sheet * { box-sizing: border-box; } .m-sheet label { font-weight: inherit; font-size: inherit; margin: 0; padding: 0; width: 100%; width: fit-content; text-align: inherit; } .m-sheet input { color: black; } .f-acme { font-family: "Acme" } .f-alegreya { font-family: "Alegreya" } .f-federo { font-family: "Federo" } .f-libertinus { font-family: "Libertinus" } .f-mina { font-family: "Mina" } .f-philosopher { font-family: "Philosopher" } .m-a4-layout { min-width: 1200px; max-width: 1200px; min-height: 1700px; background: #f5f4f2; } .m-a4-layout * { box-sizing: border-box; } .m-a4-layout { display: flex; align-items: flex-start; justify-content: center; margin: 0 auto; } .m-a4-layout > .m-page, .m-page { width: 100%; padding: 40px; padding-bottom: 45px; } .border-table-area { width: 100%; max-width: 380px; font-size: var(--v-font); line-height: calc(var(--line-height)); background: #fff; } .equipped-armour, .equipped-weapons, .traits, .inventory { --v-font: 14px; position: relative; } .border-table { padding: 3px; border: 2px solid black; position: relative; } .border-table-area.traits { max-width: 310px; } .border-table-area.inventory { max-width: 425px; } .equipped-armour .border-table, .equipped-weapons .border-table { width: 100%; } .equipped-weapons .m-tline, .equipped-weapons .m-head { grid-template-columns: 180px 40px 60px 60px 40px 100px; min-width: 480px; } input[type="hidden"][value="close"] + .equipped-weapons .m-tline, input[type="hidden"][value="close"] + .equipped-weapons .m-head { grid-template-columns: 55% 10% 35%; min-width: auto; } input[type="hidden"][value="close"] + .equipped-weapons .m-tline div:nth-child(5) { pointer-events: none; } input[type="hidden"][value="close"] + .equipped-weapons .m-head div:nth-child(3), input[type="hidden"][value="close"] + .equipped-weapons .m-head div:nth-child(4), input[type="hidden"][value="close"] + .equipped-weapons .m-head div:nth-child(5), input[type="hidden"][value="close"] + .equipped-weapons .m-tline div:nth-child(2), input[type="hidden"][value="close"] + .equipped-weapons .m-tline div:nth-child(3), input[type="hidden"][value="close"] + .equipped-weapons .m-tline div:nth-child(4) { display: none; } .m-head { font-size: 15px; } .equipped-weapons .m-table { overflow-x: auto; overflow-y: clip; } .border-table::before { content: ""; position: absolute; inset: 2px; border: 1px solid black; pointer-events: none; } .m-table { border-top: 2px solid black; } .equipped-armour {} .border-table .m-title { height: 35px; padding: 10px; display: flex; align-content: center; align-items: center; justify-content: flex-start; } .m-title { font-weight: 600; } .m-head { font-weight: 500; min-height: 30px; } .m-head, .m-tline { display: grid; grid-template-columns: 50% 25% 25%; } .equipped-armour .m-head, .equipped-armour .m-tline { grid-template-columns: 60% 40%; } .skills .m-head, .skills .m-tline { grid-template-columns: 40% 12% 18% 18% 12%; } .m-sheet input, .m-sheet select { width: 100%; max-width: 100%; border: none; padding: 0; margin: 0; outline: none; font-size: inherit; font-family: inherit; line-height: inherit; background: none; } .m-table .m-head div, .m-table .m-tline div { border-right: 2px solid black; text-align: center; display: flex; align-content: center; position: relative; } .m-table .m-head div span, .m-table .m-tline div span { width: 100%; } .m-table .m-body button[type="roll"], .m-sheet button[type="action"] { margin: 0; padding: 0; min-height: 16px; max-height: 20px; min-width: 21px; margin-right: 6px; display: flex; align-content: center; align-items: center; justify-content: center; outline: none; border: none; background: none; } .m-sheet button[type="action"] { margin-right: 0px; } .m-sheet button[type="action"]::before { font-family: "dicefontd20"; content: "t"; } .m-sheet button[tpye="roll"] { outline: none; } .m-sheet button[type="action"]::before, .m-table .m-body button[type="roll"]::before { text-transform: none; font-size: 15px; font-weight: bold; font-style: normal; } .m-table .m-tline div select { font-size: 14.5px; letter-spacing: 2.5px; font-weight: bold; font-family: monospace; flex-shrink: 1; height: 21px; max-height: 100%; text-align: center; min-height: 100%; } .m-table .m-head div:first-child { text-align: left; padding-left: 6px; } .m-table .m-head div:last-child, .m-table .m-tline div:last-child { border-right: none; } .m-table .m-head { border-bottom: 2px solid black; } .m-table .m-tline input { min-height: 24px; line-height: 24px; border-bottom: 1px solid gray; text-align: center; } .m-table .m-tline select { border-bottom: 1px solid gray; } .skills .m-table .m-tline div:first-child { justify-content: flex-start; text-align: left; padding-left: 0px; } .toolkit .m-table .m-tline div:first-child { padding-left: 0px; } .toolkit .m-table .m-tline div:first-child input, .skills .m-table .m-tline div:first-child { font-size: 16px; font-style: italic; } .m-table .m-tline div:first-child input { text-align: left; padding-left: 0px; } .equipped-armour .m-table .m-tline div:first-child input { padding-left: 9px; } .m-title { font-size: 20.5px; } .m-sheet textarea { width: 100%; height: auto; font-family: inherit; font-size: inherit; line-height: inherit; padding: 0 6px; margin: 0; border: none; resize: none; outline: none; background-color: #fff; flex-grow: 1; } .m-sheet textarea.is-textarea, .border-table textarea.is-textarea { background-image: linear-gradient(#eee .1em, transparent .1em); background-size: 100% 25px; background-attachment: local; } input[type="hidden"][value="individual"] ~ div textarea.is-textarea { display: none; } .m-sheet .m-page .m-item { display: flex; flex-wrap: wrap; color: inherit; } .i-item, .i-group { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; } .i-group, .i-item { width: 100%; } .i-1-2 { max-width: fit-content; flex-grow: 1; flex-shrink: 1; } .is-span { display: flex; position: relative; justify-content: flex-start; align-content: center; align-items: center; width: 100%; min-height: var(--line-height); } .is-span span, .is-span input, .is-span textarea, .is-span select { font-size: inherit; font-family: inherit; letter-spacing: inherit; line-height: inherit; font-weight: inherit; padding: 0; margin: 0; white-space: pre-line; } .is-span span { display: block; z-index: 1; opacity: 0; } .is-span input, .is-span textarea, .is-span select { background: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; resize: none; outline: none; } .s-select { max-width: fit-content; } .is-span.s-select span { padding-right: 21px; } .i-group .is-span, .i-item .is-span { margin: 0 6px; } .s-compact { max-width: fit-content; } .border-table .m-item { border-radius: 12px; border: 1px solid gray; border-bottom-width: 2px; padding: 0 6px; min-height: 30px; } .border-table .m-items { display: flex; flex-direction: column; gap: 6px; } .border-table .m-items { max-height: 500px; overflow-y: auto; } .traits .border-table .no-classic { padding-left: 25px; } .traits .border-table, .inventory .border-table { min-height: 550px; line-height: 25px; } input[type="checkbox"]:checked ~ div .btn-toggle span::before { content: "-" } .m-sheet label.btn-toggle { min-width: 21px; height: 15px; background: black; border-radius: 15px; color: white; display: flex; align-content: center; align-items: center; justify-content: center; } .btn-toggle span::before { content: "+"; } input[type="checkbox"]:not(:checked) ~ div .is-info { display: none !important; } .no-wrap { flex-wrap: nowrap !important; } .pre-item > input[type="checkbox"], .repitem > input[type="checkbox"] { display: none; } .is-span:hover input, .is-span:hover select { background-color: black; color: white; border-radius: 6px; } .is-span:hover textarea { background-color: rgba(0, 0, 0, 0.125); } .spaced-btw { justify-content: space-between !important; } .spaced-ard { justify-content: space-around !important; } .just-end { justify-content: flex-end !important; } span.float-title { opacity: 0; z-index: 3; user-select: none; display: block; padding: 1px 6px !important; background: black; color: white; position: absolute; border-radius: 12px; text-align: center; left: 50%; bottom: 100%; transform: translate(-50%, 50%); line-height: 12px; font-size: 10px; max-width: fit-content; pointer-events: none; transition: all ease-in-out .3s .2s; } div:hover > span.float-title { opacity: 1; transform: translate(-50%, calc(0% - 3px)); transition: all ease-in-out .3s .2s; } .pre-item:first-child span.float-title, .repitem:first-child span.float-title { top: 100%; bottom: auto; } .m-flex { display: flex !important; flex-wrap: wrap; } .gap-small { gap: 10px; } .gap-med { gap: 20px; } .gap-big { gap: 40px; } .f-column { display: flex; flex-direction: column; justify-content: space-between; } .border-table { display: flex; flex-direction: column; align-content: stretch; align-items: stretch; justify-content: flex-start; } .m-items { flex-grow: 1; padding: 0 6px; } .radio-group { gap: 3px; margin: 0 6px; } .radio-group label input { display: none; } .radio-group label { display: flex; font-size: 12px; } .radio-group label input:checked + span { background: black; } .radio-group label span { background: #d3d3d3; color: white; line-height: 15px; padding: 0 12px; border-radius: 12px; } input[type="hidden"][value="classic"] ~ div .no-classic { display: none; } .m-items-right { display: flex; flex-direction: column; font-size: 18px; gap: 3px; } .m-iline { display: flex; justify-content: space-between; gap: 6px; } .m-iline .m-item:first-child { flex-grow: 1; flex-shrink: 0; } .m-iline .m-item:last-child { max-width: 170px; flex-grow: 0; flex-shrink: 1; padding-left: 9px; } .m-iline .m-item:last-child .i-label { font-weight: 500; } .m-sheet .m-items-right .m-item { width: auto; flex-wrap: nowrap; align-content: center; align-items: center; height: 40px; } .m-items-right .m-item .i-label { width: 145px; padding-right: 5px; text-align: right; flex-shrink: 1; white-space: nowrap; font-weight: 500; font-size: 20.5px; } .m-items-right .m-item .i-value { flex-grow: 1; border: 2px solid black; height: 40px; display: flex; align-items: stretch; align-content: stretch; } .m-items-right .m-item .i-value:not(.x-long), .m-item.span-in { background: #fff; } .m-items-right .m-item .i-value input { padding: 0 12px; } .no-padding { gap: 3px !important; } .no-padding input { padding: 0 !important; } .no-padding input { text-align: right !important; } .no-padding input ~ input { text-align: left !important; } .m-items-right .span-in .i-label { width: fit-content; } .m-items-right .span-in { border: 2px solid black; } .m-items-right .span-in .i-value input { padding-left: 0px; text-align: right; } .m-items-right .span-in .i-value { border: none; height: 36px; } .m-section { position: relative; } .chardata { max-width: 705px; flex-grow: 1; flex-shrink: 0; } .chardata .pdr { padding-right: 50px; } .x-level { position: relative; display: inline-block; border: none !important; padding: 0 !important; max-width: 120px !important; margin-right: 50px !important; } .x-level-border { position: absolute; inset: 0; background: black; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 11.5px 100%, 0% 30px, 0% 0%); z-index: 1; } .x-level-content { position: relative; background: white; margin: 1.75px 2px 2px 2px; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 10px 100%, 0% 27.5px, 0% 0%); z-index: 2; display: flex; box-sizing: border-box; height: calc(100% - 4px); padding-left: 9px; align-content: center; align-items: center; } .x-long { position: relative; display: inline-block; border: none !important; padding: 0 !important; } .x-long-border { position: absolute; inset: 0; background: black; clip-path: polygon(0% 0%, 95.5% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 0%); z-index: 1; } .x-long-content { width: 100%; position: relative; background: white; margin: 2px; clip-path: polygon(0% 0%, 95.8% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 0%); z-index: 2; display: flex; align-items: center; padding-left: 9px; height: calc(100% - 4px); } .x-long-content input { padding-left: 3px !important; padding-right: 24px !important; } .x-invert-y { transform: scaleY(-1); } .x-invert-y .x-long-content input { transform: scaleY(-1); } .mastery { max-width: 370px; } .m-section { width: 100%; } .mastery .i-label { min-width: 170px; } .alg-end { justify-content: flex-end !important; align-items: flex-end !important; align-content: flex-end !important; } .alg-cen { justify-content: center !important; align-items: center !important; align-content: center !important; } .m-logo { width: 100%; max-width: 390px; margin-bottom: 20px; } .m-logo img { max-width: 100%; } .m-line:nth-child(1) { align-items: flex-end; } .mastery .m-item .i-label { font-size: 20px; } .skills { max-width: 365px; } .m-line { margin-bottom: 10px; } .m-line:last-child { margin-bottom: 0px; } .skills .m-table { border-top: none; } .m-tline input[type="hidden"][value=""] + input, .m-tline input[type="hidden"][value="0"] + input { color: rgba(0, 0, 0, 0.25); } .m-tline input[type="hidden"][value=""] + input:focus, .m-tline input[type="hidden"][value="0"] + input:focus { color: rgba(0, 0, 0, 1); } .skills .m-tline:nth-child(even) { background: #f3f3f3; } .skills .m-table .m-tline input { border-color: transparent; } .m-tdiv { display: flex; text-align: center; width: 100%; justify-content: center; font-size: 0.5em; text-transform: uppercase; background: #333 !important; color: white !important; line-height: 12px; min-height: 12px; letter-spacing: 1.5px; } .skills .m-tline > div:last-child { pointer-events: none; user-select: none; font-weight: bold; font-size: 0.875em; } input[type="hidden"][value="modern"] ~ div .skills .m-tline > div:last-child { background: #787878; } input[type="hidden"][value="modern"] ~ div .skills .m-tline:nth-child(even) > div:last-child { background: #5f5f5f; } input[type="hidden"][value="modern"] ~ div .skills .m-tline > div:last-child input { color: white; } input[type="hidden"][value="modern"] ~ div .skills .m-tline:hover > div { background: #222 !important; color: white !important; } input[type="hidden"][value="modern"] ~ div .skills .m-tline:hover div input { color: inherit; } .is-span:not(.s-textarea):not(.s-select):hover span, .is-span:not(.s-textarea):not(.s-select):hover input { padding: 0 12px; transition: all ease-in-out .15s .25s; } .is-span span:empty::before { content: "—"; } .tally .m-items-right .m-item .i-label { width: 85px; text-align: left; } .tally .m-items-right .m-item:first-child .i-value { max-width: 90px; min-width: 90px; } .tally .m-items-right .m-item:first-child .i-value input { text-align: center; } .tally .m-items-right .m-item { flex-grow: 0; flex-shrink: 1; } .tally .m-items-right .m-item:last-child { flex-grow: 1; flex-shrink: 1; max-width: none; padding-left: 3px } .tally .m-title { width: 100%; min-height: 30px; line-height: 30px; } .tally .m-title span { display: inline-block; font-size: 20.5px; } .tally .m-title span:first-child { text-align: right; min-width: 185px; padding-right: 30px; } .m-sheet .faith .m-item.mult-lines, .m-sheet .faith .m-item.mult-lines .i-value { height: auto; min-height: 40px; line-height: 25px } .m-sheet .faith .m-item.mult-lines .i-value textarea { padding: 0 12px; } .faith { width: 100%; align-self: flex-end; } .faith .m-items-right .m-item .i-label { width: 60px; } .faith .m-items-right .m-iline .m-item:last-child .i-label { width: 125px } .m-side { width: 100%; max-width: 730px; } .tally { margin-top: -10px; } .faith .m-iline .m-item:last-child { max-width: 210px } .m-white-box { border: 2px solid black; background-color: #fff; padding: 9px; min-height: 250px; display: flex; flex-direction: column; justify-content: space-around; } .span-title { font-weight: bold; font-size: 18.5px; } .reaction .i-label { position: absolute; right: 100%; } .tally.reaction .m-title span:first-child { min-width: 95px; } .m-shield { background-color: #fff; background-image: url("https://www.pktome.com.br/commissions/roll20/sheets/MossStoneSteel/bg_shield.png"); background-size: contain; background-position: center; background-repeat: no-repeat; width: 109px; height: 146px; position: relative; } .m-shield .i-label { position: absolute; left: 50%; top: 15px; transform: translateX(-50%); text-align: center; user-select: none; pointer-events: none; font-size: 19.5px; } .m-shield .i-value { position: absolute; inset: 0; display: flex; align-content: stretch; } .m-shield .i-value input { text-align: center; font-size: 42px; font-weight: bold; } .r-side { max-width: 305px; padding-top: 0px; } .skills .m-body, .skills .m-body input { line-height: 21px; } .skills .m-body input { min-height: 21px; } .m-sheet .m-attributes .m-attr { width: 80px; height: 130px; } .m-sheet .m-attributes .m-attr label { width: 100%; } .m-attr > .i-value, .m-attr > label:first-child .i-value { width: 100%; border: 2px solid black; border-top: 0; border-bottom: 0; position: relative; background: white; z-index: 1; display: flex; align-content: center; align-items: stretch; justify-content: center; height: 65px; margin-top: 12px; } .m-attr > .i-label, .m-attr > label:first-child .i-label { position: absolute; z-index: 3; left: 50%; top: 8px; font-stretch: extra-expanded; transform: translateX(-50%) scaleX(1.25); } .m-attr > .i-value input, .m-attr > label:first-child .i-value input { z-index: 3; text-align: center; position: absolute; inset: 0; line-height: 100%; margin-top: 14px; font-size: 42px; font-weight: bold; } .m-attr > .i-value::before, .m-attr > label:first-child .i-value::before { content: ""; display: block; width: 100%; height: 30px; border-radius: 90% 90% 0 0; border: 2px solid black; border-bottom: 0px; border-top-width: 3px; background: white; position: absolute; bottom: calc(100% - 20px); left: -2px; right: -2px; z-index: 0; } .m-attr > .i-value::after, .m-attr > label:first-child .i-value::after { content: ""; display: block; width: 100%; height: 70px; border-radius: 0 0 100% 100%; border: 2px solid black; border-top: 0px; background: white; position: absolute; top: calc(100% - 40px); left: -2px; right: -2px; z-index: 0; } .m-attr .m-sitem { position: absolute; left: 50%; z-index: 3; background: white; min-width: 51px; max-width: 51px; height: 51px; border-radius: 100%; border: 2px solid black; bottom: -5px; display: flex; align-content: center; align-items: center; justify-content: center; transform: translateX(-50%); } .m-attr .m-sitem .i-label { position: absolute; top: -1px; left: 0; width: 100%; font-size: 12.5px; opacity: 0.5; font-weight: bold; text-align: center; } .i-value > span { display: block; margin-top: 9px; position: relative; font-weight: bold; } span .is-positive { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); font-size: 0.85em; font-weight: normal; padding-right: .05em; } .i-label, .span-title, .m-title, .m-head, .m-logo { user-select: none; } .m-main-group { position: relative; width: 100%; max-width: 410px; margin: 0; margin-top: 9px; display: flex; align-content: stretch; flex-wrap: wrap; } .reset-01 { width: 100%; flex-grow: 1; flex-shrink: 0; min-height: 500px } .hidden-infos { align-self: flex-end; justify-self: flex-end; width: 100%; z-index: 1; flex-grow: 0; flex-shrink: 1; } .m-token { width: 225px; height: 225px; border: 2px solid black; border-radius: 100%; position: absolute; top: 157px; left: 50%; transform: translate(-50%, 0); z-index: 3; background-position: center; background-size: cover; background-repeat: no-repeat; } .m-token::before { content: ""; position: absolute; inset: -9px; border: 3px solid black; border-radius: 100%; } .m-attr { position: absolute; } .a-con { top: 0; left: 50%; transform: translate(-50%, 0); } .a-str { top: 20px; left: 75px; } .a-agi { top: 20px; right: 75px; } .a-int { top: 110px; left: 0%; } .a-cha { top: 110px; right: 0%; } .a-for { top: 255px; left: 0; } .a-ala { top: 255px; right: 0; } .m-others { position: absolute; width: 270px; height: 145px; background: #fff; top: 384px; left: 50%; transform: translateX(-50%); background-image: url("https://www.pktome.com.br/commissions/roll20/sheets/MossStoneSteel/bg_shields.png"); background-size: contain; background-position: center; background-repeat: no-repeat; display: flex; text-align: center; } .m-others label { position: relative; text-align: center; font-weight: 400; } .m-others span { position: absolute; width: 100%; left: 0; top: 15px; line-height: 16px; font-weight: bold; font-size: 16px; padding: 0 12px; } .m-others label:nth-child(2) { margin-top: 30px; } .m-others label:nth-child(2) span { top: 5px; } .m-sheet .m-others input { text-align: center; line-height: 100%; font-size: 36px; font-weight: 500; height: 110px; padding-top: 25px; margin-top: 9px; width: 83px; margin-left: 7px; } .m-others label:nth-child(2) input { padding-top: 11px; width: 76px; height: 97px; } .m-others label:nth-child(3) input { margin-left: 8px; } .reaction { margin-top: -10px; } input[type="hidden"][value="0"].plus-signal ~ span .is-positive { display: none; } .m-attr input[type="hidden"][value=""] + input, .m-attr input[type="hidden"][value=""] + span, .m-attr input[type="hidden"][value="0"] + input, .m-attr input[type="hidden"][value="0"] + span { opacity: 0.25; } .m-white-box textarea { border-bottom: 2px solid #eee; } .chardata select { padding-left: 9px; height: 100%; line-height: 100%; } .chardata input[type="hidden"][value=""] + select { opacity: 0.33; } .m-pc { display: flex; flex-direction: column; } .chardata .m-item label { display: flex; align-content: center; align-items: center; min-height: 40px; } .chardata .m-item label + label { background: #fff; max-width: 210px; border-right: 2px solid black; border-top: 2px solid black; border-bottom: 2px solid black; flex-shrink: 0; flex-grow: 1; } .chardata .m-item label + label span { font-size: 18.5px; } .chardata .m-item label + label select { padding-left: 0px; } .chardata .m-item label:first-child .i-value { max-width: 190px; border-left: 2px solid black; border-top: 2px solid black; border-bottom: 2px solid black; } .chardata .m-item label .i-value { border: none; } .small-font-inputs input { line-height: 20px; height: auto !important; min-height: 20px; border-bottom: 2px solid #eee; padding-left: 9px; } .m-white-box input, .m-white-box textarea { font-size: 15px; } .m-white-box .repcontainer { overflow-y: auto; max-height: 85px; min-height: 85px; } .m-white-box > div { position: relative; } .m-white-box .repcontrol { position: absolute; top: 0; right: 0; } .m-white-box .repitem { height: 25px; } .m-white-box .repitem .itemcontrol .btn { padding: 0px; min-height: 25px; min-width: 25px; text-align: center; } .m-sheet .repitem .itemcontrol { background-color: rgba(255, 0, 0, 0.25) !important; line-height: 25px !important; font-size: 16px !important; } input[type="hidden"]:not([value="custom"]).is-custom ~ .hidden-nocustom { display: none !important; } input[type="hidden"][value="custom"].is-custom ~ select { text-align: right; appearence: none; } .skills input[type="hidden"][value="Yes"] + div, .equipped-weapons input[type="hidden"][value="Yes"] + div { background: #e0dba5; border-bottom: 1px solid black; height: 22px; } .equipped-weapons input[type="hidden"][value="Yes"] + div { min-height: 25px; } .equipped-weapons input[type="hidden"][value="Yes"] + div input, .equipped-weapons input[type="hidden"][value="Yes"] + div select { border: none; } .hidden-nocustom + .hidden-nocustom { border: 1px solid black; border-left-width: 2px; border-right-width: 2px; border-color: black !important; border-radius: 3px; height: 18px !important } span.tooltip-mastery:not(:empty) { background: black; color: white; } div:hover > span.tooltip-mastery { opacity: 1; pointer-events: auto; transition: all ease-in-out .3s .5s; } span.tooltip-mastery { position: absolute; top: 100%; right: 0; pointer-events: none; user-select: none; opacity: 0; transition: all ease-in-out .3s .5s; font-family: "Open Sans"; font-weight: normal; max-width: 66%; z-index: 66; font-size: 14px; line-height: 21px; padding: 12px; border-radius: 12px 0px 12px 12px; } .m-sheet .equips span.tooltip-mastery { white-space: nowrap; min-width: fit-content; } span:not(:empty).tooltip-mastery::after { content: ""; position: absolute; top: -9px; right: 3px; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 12px solid black; } .m-sheet .repcontrol { display: flex; align-content: center; } .m-sheet .repcontrol .btn { height: 25px; line-height: 25px; outline: none; min-width: 25px; padding: 0px 6px; font-size: 10px; font-weight: bold; } .skills .m-tline > div:nth-child(2) { font-size: 0.875em; } .no-classic .m-item { justify-content: space-between; } .btn-toggle > input[type="checkbox"] { display: none; } .equips { min-width: 365px; } .m-tline:hover { z-index: 55; } .bg-ret1, .bg-ret2, .bg-ret3 { border: none !important; background-image: url("https://www.pktome.com.br/commissions/roll20/sheets/MossStoneSteel/bg_ret1.png") !important; background-position: center !important; background-size: contain !important; } .bg-ret2 { background-image: url("https://www.pktome.com.br/commissions/roll20/sheets/MossStoneSteel/bg_ret2.png") !important; } .bg-ret3 { background-image: url("https://www.pktome.com.br/commissions/roll20/sheets/MossStoneSteel/bg_ret3.png") !important; } .size-med { font-size: 28px; font-weight: bold; } .m-npc, .m-pc, .m-c { display: none; min-height: 100px; } input[type="hidden"][value="PC"] ~ div .m-pc, input[type="hidden"][value="NPC"] ~ div .m-npc, input[type="hidden"][value="C"] ~ div .m-c { display: flex; } .m-c { background: white; padding: 10px; width: 100%; max-width: 820px; margin: 0 auto; line-height: 20px; font-family: monospace; } .m-c * { line-height: 20px; min-height: 20px; } .m-c .hidden-infos { display: block; font-size: 13px; line-height: 20px; padding: 10px; } .columns2 { columns: 2; } .m-sheet .columns2 div label { flex-grow: 0; flex-shrink: 1; max-width: fit-content; gap: 0 !important; } .m-sheet .columns2 div label input { text-align: center !important; max-width: 25px; } .m-sheet .m-c .m-page label { display: flex; justify-content: space-between; white-space: nowrap; width: 100%; border-bottom: 1px solid black; } .m-sheet .m-c .m-page label select { line-height: 20px; height: 20px; text-align: left; max-width: fit-content; } .m-sheet .m-c .m-page label input { text-align: right; } .m-sheet .m-c .m-page label { align-content: center; align-items: center; gap: 6px; } .arrow-up { width: 25px; height: 35px; background: black; clip-path: polygon(50% 0%, 100% 50%, 70% 50%, 70% 100%, 30% 100%, 30% 50%, 0% 50%); position: absolute; bottom: -10px; left: calc(100% - 20px); pointer-events: none; user-select: none; } input[type="hidden"][value="0"] + .m-sitem .arrow-up { display: none; } input[type="hidden"][value="1"] + .m-sitem .arrow-up { background-color: green; } input[type="hidden"][value="-1"] + .m-sitem .arrow-up { background-color: red; transform: scaleY(-1) } .img-vine1, .img-vine2, .img-vine3 { position: absolute; width: 250px; height: 65px; background-image: url("https://www.pktome.com.br/commissions/roll20/sheets/MossStoneSteel/img_vine1.png"); background-position: center; background-size: contain; left: -50px; top: -33px; background-repeat: no-repeat; z-index: 999; pointer-events: none; filter: drop-shadow(4px 4px 1px white) drop-shadow(-4px -4px 1px white) drop-shadow(1px 3px 1px white) drop-shadow(-3px -1px 1px white) } .img-vine2 { width: 258px; height: 519px; background-image: url("https://www.pktome.com.br/commissions/roll20/sheets/MossStoneSteel/img_vine2.png"); top: auto; bottom: -24px; } .img-vine3 { width: 184px; height: 257px; background-image: url("https://www.pktome.com.br/commissions/roll20/sheets/MossStoneSteel/img_vine3.png"); top: auto; left: auto; bottom: -20px; right: -30px; } .m-sheet label > span { user-select: none; } .m-npc { position: relative; background: #333; flex-direction: column; width: 100%; max-width: 520px; color: white; padding: 10px; align-content: flex-start; margin: 9px auto; font-size: 14px; min-width: 420px; } .m-npc::before { content: ""; position: absolute; inset: -6px; border: 3px solid #4e4e4e; z-index: 33; user-select: none; pointer-events: none; } .npc-name { color: white; background: #55672F; background: linear-gradient(90deg, rgba(85, 103, 47, 1) 25%, rgba(121, 131, 76, 1) 75%, rgba(162, 165, 128, 1) 100%); border-left: 1px solid #55672f; border-top: 1px solid #55672f; border-bottom: 1px solid #55672f; font-size: 21px; font-weight: bold; } .npc-name input { padding-left: 12px; } .m-npc input { color: inherit; font-family: inherit; font-size: inherit; min-height: 30px; line-height: 30px; text-align: inherit; } .npc-desc textarea { font-size: 14px; padding: 0 12px; line-height: 21px; } .npc-type { color: rgba(162, 165, 128, 1); text-align: right; font-size: 16px; height: 20px; position: relative; width: 100%; padding-right: 12px; } .npc-type::before { content: ""; position: absolute; top: calc(100% + 3px); left: 0; width: 100%; height: 2px; background-color: #818955; z-index: 3; } .npc-attrs { background: #d3d3d3; color: black; text-align: center; border: 2px solid black; margin-top: 5px; } .npc-attrs > div > div:nth-child(1) { background-color: rgba(85, 103, 47, 1); color: white; } .npc-attrs > div > div:nth-child(2) { background: #fff; font-size: 21px; } .npc-attrs > div { border-right: 2px solid black; } .npc-attrs > div:last-child { border-right: none; } .npc-linhas { display: flex; flex-direction: column; border: 3px solid black; margin: 6px 0; } .npc-linhas > div { display: flex; justify-content: space-between; gap: 21px; background-color: #111; padding: 1px 9px; border-bottom: 1px solid #3e3e3e; font-size: 12px; line-height: 30px; min-height: 30px; } .npc-linhas > div:nth-child(even) { background-color: #1e1e16; } .npc-linhas > div label { width: 100%; display: flex; justify-content: space-between; align-content: center; align-items: center; color: white; } .npc-linhas > div label span { white-space: nowrap; opacity: 0.85; letter-spacing: 2px; color: #a2a580; } .npc-linhas > div label input { text-align: right; font-size: 14.5px; letter-spacing: 1.75px; width: 100%; } .npc-field fieldset { margin: 0; padding: 0; border: none; width: 100%; } .npc-field { display: flex; } .npc-field > div:first-child { min-width: 120px; flex-grow: 0; flex-shrink: 1; } .npc-field > div:last-child { display: flex; width: auto; flex-grow: 1; flex-shrink: 1; } .rep-item { display: grid; background: rgba(255, 255, 255, 0.75); color: black; grid-template-columns: calc(50% - 0px) 25% 25%; align-items: center; border-bottom: 2px solid white; line-height: 30px; min-height: 30px; width: 100%; } .no-grid .rep-item input { padding-left: 12px; } .no-grid .rep-item { display: flex; width: 100%; } .m-npc .repcontrol { position: relative; top: 0%; transform: translateY(-0%); left: auto; z-index: 999; flex-direction: row; opacity: 0.25; transition: all ease-in-out .3s .4s; } .m-npc .repcontainer { position: relative; width: 100%; } .npc-field { min-height: 35px; } .npc-field > div { position: relative; } .npc-field:hover .repcontrol, .npc-field > div:hover .repcontrol { opacity: 1; transition: all ease-in-out .3s .4s; } .npc-field .repitem:nth-child(odd) .rep-item { background: rgba(255, 255, 255, 0.95); } .npc-field { border-bottom: 1px solid white; } .npc-field:nth-child(even) { border-bottom: 1px solid #eee; } .field-title > div:last-child { display: flex; flex-wrap: wrap; justify-content: space-between; } .field-title { display: flex; flex-wrap: nowrap; flex-direction: column; } .field-title > div:first-child { display: flex; justify-content: space-between; } .m-npc .field-title .repitem .rep-item { display: flex; flex-wrap: wrap; } .m-npc .field-title .repitem .rep-item > div { border-right: 1px solid black; border-bottom: 1px solid black; } .m-npc .field-title .repitem .rep-item > div input { padding: 0 12px; } .m-npc .field-title .repitem .rep-item > div:nth-child(1) { width: 33%; } .m-npc .field-title .repitem .rep-item > div:nth-child(2) { width: 67%; } .m-npc .field-title .repitem .rep-item > div:nth-child(2) input { text-align: right; } .m-npc .field-title .repitem .rep-item > div:nth-child(3) { width: 100%; display: flex; align-items: stretch; } .m-npc .field-title .repitem .rep-item > div:nth-child(3) textarea { width: 100%; resize: none; padding: 0 12px; } .npc-field > div:first-child { display: flex; justify-content: center; align-content: center; align-items: center; text-transform: uppercase; font-size: 14px; font-weight: bold; background-color: rgba(0, 0, 0, 0.75) } .npc-field > div:first-child span { white-space: nowrap; opacity: 0.95; letter-spacing: 1.25px; color: #a2a580; font-size: 12px; } .npc-field.field-title > div:first-child { justify-content: space-between; padding: 0 12px; } .sheet-rolltemplate-ct .sheet-rt-ct { font-family: inherit; color: #fff; background: #222; border: 2px solid #4e4e4e; max-width: 420px; margin: 5px auto; } .sheet-rolltemplate-ct .sheet-rt-header { display: flex; justify-content: space-between; background: linear-gradient(90deg, #55672f 25%, #79834c 75%, #a2a580 100%); color: #fff; font-weight: bold; padding: 4px 8px; font-size: 16px; border-bottom: 2px solid #333; } .sheet-rolltemplate-ct .sheet-rt-core { display: flex; justify-content: center; align-items: center; background: #111; border-bottom: 2px solid #333; padding: 8px; } .sheet-rolltemplate-ct .sheet-rt-vs { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: bold; flex-direction: column; margin: 0 9px; } .sheet-rolltemplate-ct .sheet-rt-symbol { font-size: 20px; color: #a2a580; padding: 0 6px; } .sheet-rolltemplate-ct .sheet-rt-core label { text-align: center; color: white; margin: 0; padding: 0; } .sheet-rolltemplate-ct .sheet-rt-total .inlinerollresult, .sheet-rolltemplate-ct .sheet-rt-ct .inlinerollresult { background: #cbcea9; border: 2px solid #cbcea9; color: #111; min-width: 25px; border-radius: 3px; font-weight: bold; height: 30px; display: flex; align-items: center; align-content: center; justify-content: center; margin: 3px; font-size: 22px; box-sizing: border-box; } .sheet-rolltemplate-ct .sheet-rt-x .inlinerollresult { background: none; padding: 0; min-width: auto; height: auto; min-height: none; font-size: 14px; border: none; color: white; } .sheet-rolltemplate-ct .sheet-rt-result { text-align: center; font-weight: bold; padding: 6px; letter-spacing: 2px; } .sheet-rolltemplate-ct .sheet-rt-result.sheet-success { background: #2a4; color: #fff; } .sheet-rolltemplate-ct .sheet-rt-result.sheet-fail { background: #922; color: #fff; } .sheet-rolltemplate-ct .sheet-rt-damage { display: flex; padding: 4px 8px; background: #1a1a1a; border-top: 1px solid #333; flex-direction: column; justify-content: center; align-items: center; color: white; } .sheet-rolltemplate-ct .sheet-rt-damage label { color: white; } .sheet-rolltemplate-ct .sheet-rt-damage span { pointer-events: none; } .sheet-rolltemplate-ct .sheet-rt-extra { display: flex; justify-content: space-between; padding: 2px 8px; background: #262626; font-size: 12px; } .sheet-rolltemplate-ct .sheet-rt-extra label { color: #a2a580; } .npc-field .is-span textarea, .npc-field .is-span span { padding: 0 12px; line-height: 21px; font-size: 14px; color: #111; opacity: 1; letter-spacing: .5px; } .m-sheet .f-super-small { font-family: "Open Sans"; font-size: 12px; font-weight: 900; display: flex; line-height: 12px; white-space: normal; margin-left: auto; gap: 3px; align-content: center; align-items: center; } .m-sheet .f-super-small input { width: 16px; height: 16px; } .h-wzero[value="0"] + div span.n-zero, .h-won[value="0"] + .n-on { display: none; } .m-sheet h6 { display: flex; justify-content: flex-start; gap: 12px; } .skills:not(.toolkit) .m-tline > div:nth-child(3) { pointer-events: none; } .skills:not(.toolkit) .m-tline > div:nth-child(3) select { appearance: none; letter-spacing: 0px; font-size: 12px; font-stretch: condensed; } .is-alert[value="1"] + label input { color: white; background: lightcoral; font-weight: bold; } .is-alert[value="1"] + div input { color: red; font-weight: bold; } div:hover > .is-exausted { opacity: 0.5; transition: all ease-in-out .3s .5s; } .is-exausted { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(255, 0, 0, .125); pointer-events: none; font-size: 42px; opacity: 1; transition: all ease-in-out .3s .5s; } .major-exaust { display: block; position: relative; transform: rotate(-25deg); text-align: center; line-height: 42px; font-weight: bold; color: white; opacity: 0.75; filter: drop-shadow(2px 4px 6px black); text-transform: uppercase; }