/*-- Layouts -- */ .sheet-player { width: 708px; height: 780px; background-image: url('http://i.imgur.com/tJS6vua.png'); background-repeat: no-repeat; } .sheet-master{ width: 708px; height: 320px; background: #0f0f0f; } .sheet-container-p { display: grid; grid-template-columns: 320px 388px; grid-template-rows: 140px 620px 20px; grid-template-areas: "head head" "side content" "foot foot"; } .sheet-header { grid-area: head; } .sheet-profile { grid-area: side; } .sheet-content { grid-area: content; } .sheet-footer { grid-area: foot; color: silver; text-align: right; } .sheet-container-m { display: grid; grid-template-columns: 8px 362px 10px 320px 8px; grid-template-rows: 20px 300px; grid-template-areas: "foot foot foot foot foot" ". sect1 . sect2 ."; } .sheet-sect1 { grid-area: sect1; } .sheet-sect2 { grid-area: sect2; } .sheet-status { display: grid; grid-template-columns: 60px 30px 196px 30px 64px; grid-template-rows: 30px; grid-template-areas: "name reduce ui add value"; } .sheet-aspect-name { grid-area: name; background: #666666; color: white; text-align: center; } .sheet-aspect-reduce { grid-area: reduce; } .sheet-aspect-UI { grid-area: ui; background: #cccccc; font-family: 'Pictos Custom'; } .sheet-aspect-add { grid-area: add; } .sheet-aspect-value { grid-area: value; background: #999999; color: white; } .sheet-round { display: grid; grid-template-columns: 190px 190px; grid-template-rows: 50px; grid-template-areas: "round1 round2"; } .sheet-round1 { grid-area: round1; } .sheet-round2 { grid-area: round2; } .sheet-action { display: grid; grid-template-columns: 270px 110px; grid-template-rows: 24px 50px; grid-template-areas: "sect1 sect3" "sect2 sect3"; } .sheet-action-sect1 { grid-area: sect1; background: #444444; } .sheet-action-sect2 { grid-area: sect2; background: #444444; } .sheet-action-sect3 { grid-area: sect3; background: #444444; } .sheet-number { position: absolute; height: 22px; color: white; font-weight: bold; } .sheet-number input[type="text"] { padding-top: 6px; font-size: 0.9em; font-weight: bold; color: white; } .sheet-info { position: absolute; top: 608px; left: 51px; width: 278px; height: 118px; border-radius: 6px; border: 2px solid #bfbfbf; color: white; } .sheet-info div { border-bottom: 2px solid #bfbfbf; padding: 3px 6px; font-weight: bold; font-size: 1.2em; } .sheet-info span { border-right: 2px solid #bfbfbf; padding-right: 6px; } .sheet-info input[type="text"] { margin: -4px 0 0 4px; font-weight: bold; color: white; } .sheet-despair { display: none; position: absolute; top: 73px; width: 708px; height: 780px; background-color: rgba(0, 0, 0, 0.2); pointer-events: none; z-index: 10px; } .sheet-stamp { width: 290px; height: 150px; margin: 150px 0 0 15px; background-image: url('https://i.imgur.com/WSV2pID.png'); background-repeat: no-repeat; } .sheet-UI1[value="15"] ~ .sheet-despair { display: block; } .sheet-UI2[value="15"] ~ .sheet-despair { display: block; } .sheet-tap-PL[value="0"] ~ .sheet-player, .sheet-tap-GM[value="0"] ~ .sheet-master { display: none; } .sheet-tap-PL[value="1"] ~ .sheet-player, .sheet-tap-GM[value="1"] ~ .sheet-master { display: block; } .sheet-tap-GM[value="1"] ~ .sheet-PLtaps { display: none; } .sheet-tap-PL[value="0"], .sheet-tap-GM[value="0"] ~ .sheet-player { display: block; } .sheet-copyright { width: 708px; height: 20px; font-size: 0.9em; color: silver; text-align: right; } /*-- Contents -- */ .sheet-name { width: 380px; height: 28px; margin-top: 8px; font-weight: bold; text-align: center; background: #444444; color: white; } .sheet-name span { display: inline-block; margin-top: 5px; } .sheet-name input[type="text"] { padding-bottom: 5px; font-weight: bold; text-align: center; color: white; } .sheet-name button[type=roll]::before { height: 23px; padding: 2px 0 0 2px; font-family: 'dicefontd20'; font-weight: normal; font-size: 1.3em; content: '0' !important; } .sheet-name button[type=roll] { height: 23px; margin: 0 -1px 0 -2px; border: 1px solid #cccccc; border-radius: 3px; background: #666666; text-align: center; } .sheet-aspect-name b { display: inline-block; margin-top: 5px; font-size: 1.1em; } .sheet-aspect-UI input[type="text"] { font-size: 15px; } .sheet-aspect-value input[type="text"] { text-align: center; font-weight: bold; color: white; } .sheet-textbox { width: 380px; height: 50px; background: #cccccc; } .sheet-round p { display: inline-block; width: 160px; height: 20px; margin-bottom: -1px; padding-top: 4px; text-align: center; background: #666666; color: white; } .sheet-round button[type=roll] { width: 30px; height: 23px; margin: -4px 0 0 -1px; border-left: 1px solid #cccccc; padding-top: 0px; background: #666666; font-family: 'dicefontd6'; font-size: 1.2em !important; text-align: center; } .sheet-action span { display: inline-block; padding: 3px 18px; background: #666666; color: white; } .sheet-action b { font-family: 'Pictos'; font-weight: normal; } .sheet-action input[type="text"] { margin: 0 -3px; 0 -2px; text-align: center; background: #cccccc; color: black; } .sheet-adjust { height: 28px; } .sheet-adjust p { display: inline-block; height: 23px; padding-top: 5px; text-align: center; background: #666666; color: white; } .sheet-adjust input[type="text"] { width: 144px; height: 28px; margin: 0 -4px 0 -4px; text-align: center; background: #cccccc; color: black; } .sheet-adjust input[type=checkbox] { margin: -2px 0 0 -3px } .sheet-sect1 textarea { width: 354px; height: 238px; margin: 0px; } .sheet-sect2 table { width: 100%; border-collapse: separate; border-spacing: 3px; } .sheet-sect2 th { height: 26px; border-radius: 3px; background: #666666; text-align: center; font-size: 0.9em; color: white; } .sheet-sect2 td { height: 24px; border-radius: 3px; text-align: center; background: #cccccc; } .sheet-sect2 input[type=checkbox] { width: 15px; height: 15px; margin-bottom: 1px; } .sheet-sect2 input[type=checkbox]:after { width: 15px; height: 15px; content: ""; border-radius: 3px; border: 1px solid #444444; padding-top: 0px; background: #cccccc; } .sheet-sect2 input[type=checkbox]:checked:after { content: "✔"; background: #444444; } .sheet-remission input[type=checkbox] { width: 20px; height: 20px; } .sheet-remission input[type=checkbox]:after { width: 51px; height: 20px; margin-left: -15px; border: none; padding-top: 2px; content: "✔ 체크"; color: grey; } .sheet-remission input[type=checkbox]:checked:after { content: "면제"; background: #980000; } .sheet-out1, .sheet-out2, .sheet-out3, .sheet-out4, .sheet-out5, .sheet-out6, .sheet-out7, .sheet-out8 { display: none; position: absolute; width: 72px; height: 47px; background: #0f0f0f; font-size: 0.9em; } .sheet-ec, .sheet-sc { width: 70px; margin-top: 6px; } .sheet-ec:after, .sheet-sc:after { width: 70px; padding: 2px; font-size: 0.9em; background: #0f0f0f; color: white; } .sheet-ec:after { content: "✔ 내면의 악"; } .sheet-sc:after { content: "✔ 이기 수치"; } .sheet-ec:checked:after, .sheet-sc:checked:after { background: #980000; } .sheet-drop1:hover .sheet-out1, .sheet-drop2:hover .sheet-out2, .sheet-drop3:hover .sheet-out3, .sheet-drop4:hover .sheet-out4, .sheet-drop5:hover .sheet-out5, .sheet-drop6:hover .sheet-out6, .sheet-drop7:hover .sheet-out7, .sheet-drop8:hover .sheet-out8 { display: block; } /*-- ETC Styles -- */ input[type="text"] { width: 100%; height: 100%; margin: auto; outline: none; border: none; border-radius: 0px; background: transparent; } input[type="number"] { width: 100%; height: 100%; margin: auto; outline: none; border: none; border-radius: 0px; padding: 0px; background: transparent; } textarea { width: 368px; height: 40px; margin: 1px 0 0 1px; outline: none; border: none; border-radius: 0px; resize: none; background: #cccccc; color: black; } select { width: 100%; height: 27px; outline: none; border: none; border-radius: 0px; text-align-last: center; background: #cccccc; color: black; } button[type="action"] { margin: auto; outline: none; border: none; border-radius: 0px; padding: 0px; box-shadow: none; background: #444444; text-align: center; font-weight: bold; color: white; } button[type=roll]::before { margin-left: 0px; content: '' !important; box-shadow: none; } button[type=roll] { border: none; border-top: 1px solid #444444; border-radius: 0px; box-shadow: none; text-shadow: none; box-sizing: border-box; font-size: 1em !important; background: #666666; color: white; } button[type=roll]:hover { font-weight: bold; background: #980000; } ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); background-clip: padding-box; border-radius: 10px; } ::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.1); border-radius: 12px; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { opacity: 1; } input[type=checkbox] { width: 38px; height: 23px; outline: none; border: none; cursor: pointer; font-size: 0.9em; } input[type=checkbox]:after { display: inline-block; width: 38px; height: 23px; content: ""; border-radius: 0px; padding-top: 5px; background: #444444; text-align: center; color: silver; } input[type=checkbox]:checked:after { font-weight: bold; background: #980000; color: white; } .sheet-check1 input[type=checkbox]:after { content: "이기"; margin: -2px 0 0 -1px; } .sheet-check2 input[type=checkbox]:after { content: "양심"; margin: -2px 0 0 -2px; } .sheet-check3 input[type=checkbox]:after { content: "증가"; margin: -2px 0 0 -3px; } .sheet-check4 input[type=checkbox]:after { content: "감소"; margin: -2px 0 0 -4px; width: 37px; } .sheet-footer input[type=checkbox] { width: 18px; height: 18px; } .sheet-footer input[type=checkbox]:after { width: 18px; height: 18px; content: "▼"; padding-top: 0px; background: #0f0f0f; } .sheet-footer input[type=checkbox]:checked:after { content: "▲"; font-weight: normal; background: #0f0f0f; color: silver; } /*-- Rolltemplate -- */ .sheet-rolltemplate-NUZENA-table { color: black; } .sheet-rolltemplate-NUZENA-table .sheet-T-name-L { display: inline-block; width: 10px; height: 27px; background-image: url('https://i.imgur.com/8oauRk3.png'); } .sheet-rolltemplate-NUZENA-table .sheet-T-name { display: inline-block; height: 27px; font-weight: bold; vertical-align: bottom; color: white; background-image: url('https://i.imgur.com/8oauRk3.png'); background-position: -10px 0; } .sheet-rolltemplate-NUZENA-table .sheet-T-name-R { display: inline-block; width: 10px; height: 27px; background-image: url('https://i.imgur.com/8oauRk3.png'); background-position: -190px 0; } .sheet-rolltemplate-NUZENA-table .sheet-T-content { width: 232px; text-align: center; background-image: url('https://i.imgur.com/8oauRk3.png'); background-position: 0 -27px; } .sheet-rolltemplate-NUZENA-table .sheet-T-footer { width: 232px; height: 30px; background-image: url('https://i.imgur.com/8oauRk3.png'); background-position: 0 -310px; } .sheet-rolltemplate-NUZENA-table .sheet-T-target { margin: 0 10px; padding: 30px 0 8px 0; line-height: 1.2em; font-weight: bold; font-size: 1.4em; } .sheet-rolltemplate-NUZENA-table .sheet-T-vision { margin: 0 10px; padding: 10px 0 0 0; border-top: 1px solid black; border-bottom: 1px solid black; line-height: 1em; font-weight: bold; font-size: 1em; } .sheet-rolltemplate-NUZENA-table .sheet-T-vision b { margin: 8px 4px 8px 0; padding: 4px; border-radius: 3px; background: #d01d00; color: white; } .sheet-rolltemplate-NUZENA-table .sheet-T-block { display: inline-block; width: 180px; margin: auto; margin-top: 30px; margin-bottom: 6px; padding: 20px 8px 10px 8px; border: 2px dashed black; word-break: keep-all; } .sheet-rolltemplate-NUZENA-table .sheet-T-counter { width: 180px; margin: auto; } .sheet-rolltemplate-NUZENA-table .sheet-T-counter i { font-weight: bold; font-size: 1.6em; color: #d01d00; text-shadow: 0 1px black, 0 -1px black, 1px 0 black, -1px 0 black; } .sheet-rolltemplate-NUZENA-table .sheet-T-counter .inlinerollresult { border: 3px solid black !important; font-size: 1.6em !important; background: #f3b505; color: black; } .sheet-rolltemplate-NUZENA-table .sheet-T-title { position: relative; top: 38px; left: 0px; padding: 4px 6px; border-radius: 3px; background: #d01d00; color: white; } .sheet-rolltemplate-NUZENA-table .inlinerollresult { outline: none !important; border: none !important; border-radius: 3px; padding: 2px 5px; background: #444444; color: white; } .sheet-rolltemplate-NUZENA-table .sheet-T-roll { margin: 0 10px; padding: 10px 0 0 0; line-height: 1.3em; font-size: 0.9em; } .sheet-rolltemplate-NUZENA-table a[href^="~"] { width: 192px; background: #ba1900; margin-top: 4px; padding: 4px 8px; border: 0px; font-weight: bold; font-size: 1em; color: white; } .sheet-rolltemplate-NUZENA-dice { color: black; } .sheet-rolltemplate-NUZENA-dice .sheet-D-header { width: 232px; height: 30px; background-image: url('https://i.imgur.com/8oauRk3.png'); background-position: 0 -27px; } .sheet-rolltemplate-NUZENA-dice .sheet-D-content { width: 232px; text-align: center; background-image: url('https://i.imgur.com/8oauRk3.png'); background-position: 0 -60px; } .sheet-rolltemplate-NUZENA-dice .sheet-D-columns { display: inline-block; width: 100px; height: 70px; padding: 2px 0; } .sheet-rolltemplate-NUZENA-dice .sheet-D-title { border-radius: 3px; padding: 4px 8px; background: #d01d00; color: white; } .sheet-rolltemplate-NUZENA-dice table { width: 90%; height: 100%; margin: auto; } .sheet-rolltemplate-NUZENA-dice th { text-align: center; border: 2px solid black; padding-top: 2px; } .sheet-rolltemplate-NUZENA-dice td { text-align: center; font-weight: bold; } .sheet-rolltemplate-NUZENA-dice .sheet-D-footer { width: 232px; height: 30px; background-image: url('https://i.imgur.com/8oauRk3.png'); background-position: 0 -310px; } .sheet-rolltemplate-NUZENA-dice .sheet-success { height: 20px; padding-top: 2px; background: #d01d00; color: white; } .sheet-rolltemplate-NUZENA-dice .sheet-fail { height: 20px; padding-top: 2px; background: #cccccc; color: black; } .sheet-rolltemplate-NUZENA-dice .sheet-counter { height: 20px; padding-top: 2px; background: #f3b505; color: black; } .sheet-rolltemplate-NUZENA-dice .inlinerollresult { outline: none !important; border: none !important; border-radius: 3px; padding: 2px 5px; background: #444444; color: white; } .sheet-rolltemplate-NUZENA-judge { width: 232px; border: 1px solid #0f0f0f; text-align: center; } .sheet-rolltemplate-NUZENA-judge .sheet-J-head { display: inline-block; width: 100%; margin: auto; border-bottom: 1px solid #0f0f0f; padding: 6px 0px; font-weight: bold; font-size: 1em; background: #bbbbbb; color: black; } .sheet-rolltemplate-NUZENA-judge table { width: 221px; margin: 6px 0 6px 6px; border: 1px solid #0f0f0f; color: black; } .sheet-rolltemplate-NUZENA-judge th { height: 24px; border: 1px solid #0f0f0f; text-align: center; } .sheet-rolltemplate-NUZENA-judge td { height: 24px; border: 1px solid black; padding-left: 3px; text-align: left; } .sheet-rolltemplate-NUZENA-judge b { border: 1px solid black; border-radius: 3px; padding: 2px; background: #b51900; color: white; font-size: 0.9em; } .sheet-rolltemplate-NUZENA-judge a[href^="~"] { width: 210px; margin: auto; margin-bottom: 6px; padding: 6px; border: 0px; font-weight: bold; font-size: 1em; background: #d01d00; color: white; } .sheet-rolltemplate-NUZENA-judge .sheet-J-name { padding: 14px; font-weight: bold; font-size: 1.6em; color: black; text-shadow: 0 1px #d01d00, 0 -1px #d01d00, 1px 0 #d01d00, -1px 0 #d01d00; } .sheet-rolltemplate-NUZENA-judge .sheet-J-icon { padding: 16px; font-size: 5em; color: #888888; } .sheet-rolltemplate-NUZENA-judge .sheet-J-target { padding: 14px; font-weight: bold; font-size: 1.2em; color: white; } .sheet-rolltemplate-NUZENA-judge .sheet-J-title { display: inline; position: relative; top: 8px; left: 0px; padding: 4px 6px; border-radius: 3px; font-weight: bold; background: #d01d00; color: #0f0f0f; } .sheet-rolltemplate-NUZENA-judge .sheet-J-block { display: inline-block; width: 180px; margin: auto; margin-bottom: 10px; padding: 20px 8px 10px 8px; border: 2px solid #d01d00; word-break: keep-all; background: #444444; color: white; } .sheet-rolltemplate-NUZENA-judge .sheet-detail { font-size: 0.8em; font-style: italic; background: rgba(0, 0, 0, 0.1); }