View

2069 명이 보았습니다.

Keyword

팝아트, 활기찬, 쾌활한, 엉뚱한

Color

HTML

<div class="sheet-wrap"> <div class="sheet-wrap-inner"> <div class="sheet-header"> <div class="sheet-logo"> <div class="sheet-job"> <input type="text" name="attr_job" value="" placeholder="당신의 직업은?" /> </div> </div> <div class="sheet-name"> <strong>이름</strong> <input type="text" name="attr_character_name" value="" /> </div> <div class="sheet-hp"> <strong>HP</strong> <div class="sheet-group"> <strong>경상</strong> <span class="sheet-chk1"> <input type="checkbox" name="attr_hp1" value="1" /> <input type="checkbox" name="attr_hp2" value="1" /> </span> <strong>중상</strong> <span class="sheet-chk2"> <input type="checkbox" name="attr_hp3" value="1" /> </span> <strong>기절</strong> <span class="sheet-chk3"> <input type="checkbox" name="attr_hp4" value="1" /> </span> </div> <div class="sheet-copyright"> w.냐브, 믹하 &nbsp;&nbsp;&nbsp; Sheet. Tateck </div> </div> <div class="sheet-status"> <strong> 능력치 (고유능력 : <input type="text" name="attr_mag_edit" value="" placeholder="고유능력" />) </strong> <ul> <li> <div> <button type="roll" value="&{template:GDH} {{name=@{character_name}}} {{job=@{job}}} {{subject=육체}} {{roll=[[2D6+@{str}]]}}">육체</button> <input type="hidden" name="attr_str" value="" /> <select name="attr_str_ori"> <option value="-2">-2</option> <option value="-1">-1</option> <option value="0" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <div class="sheet-chk"> <input type="checkbox" name="attr_str_panalty" value="1" /> <span>패널티 : 피로</span> </div> </div> </li> <li> <div> <button type="roll" value="&{template:GDH} {{name=@{character_name}}} {{job=@{job}}} {{subject=이성}} {{roll=[[2D6+@{san}]]}}">이성</button> <input type="hidden" name="attr_san" value="" /> <select name="attr_san_ori"> <option value="-2">-2</option> <option value="-1">-1</option> <option value="0" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <div class="sheet-chk"> <input type="checkbox" name="attr_san_panalty" value="1" /> <span>패널티 : 멍함</span> </div> </div> </li> <li> <div> <button type="roll" value="&{template:GDH} {{name=@{character_name}}} {{job=@{job}}} {{subject=감성}} {{roll=[[2D6+@{emo}]]}}">감성</button> <input type="hidden" name="attr_emo" value="" /> <select name="attr_emo_ori"> <option value="-2">-2</option> <option value="-1">-1</option> <option value="0" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <div class="sheet-chk"> <input type="checkbox" name="attr_emo_panalty" value="1" /> <span>패널티 : 불안</span> </div> </div> </li> <li> <div> <button type="roll" value="&{template:GDH} {{name=@{character_name}}} {{job=@{job}}} {{subject=직관}} {{roll=[[2D6+@{int}]]}}">직관</button> <input type="hidden" name="attr_int" value="" /> <select name="attr_int_ori"> <option value="-2">-2</option> <option value="-1">-1</option> <option value="0" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <div class="sheet-chk"> <input type="checkbox" name="attr_int_panalty" value="1" /> <span>패널티 : 둔함</span> </div> </div> </li> <li> <div> <button type="roll" value="&{template:GDH} {{name=@{character_name}}} {{job=@{job}}} {{subject=@{mag_edit}}} {{roll=[[2D6+@{mag}]]}}" class="sheet-button-title"></button> <input type="text" name="attr_mag_name" value="" placeholder="???" class="sheet-button-title" /> <select name="attr_mag"> <option value="-2">-2</option> <option value="-1">-1</option> <option value="0" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> </li> </ul> </div> </div> <div class="sheet-grid"> <div class="sheet-left"> <div class="sheet-row"> <strong>자유 주사위</strong> <input type="text" name="attr_free_dice" value="2D6" style="width:100px;" class="sheet-tac" /> &nbsp;&nbsp;<button type="roll" value="&{template:GDH} {{name=@{character_name}}} {{job=@{job}}} {{subject=@{free_dice}}} {{free_roll=[[@{free_dice}]]}}" class="sheet-dice" /> </div> <div class="sheet-row"> <div><strong>외형</strong></div> <textarea name="attr_app" style="height:80px;"></textarea> </div> <div class="sheet-row"> <div><strong>복장</strong></div> <textarea name="attr_cloth" style="height:80px;"></textarea> </div> <div class="sheet-row"> <div><strong>이미지</strong></div> <textarea name="attr_img" style="height:80px;"></textarea> </div> <div class="sheet-row"> <div><strong>성장</strong></div> <div class="sheet-exp"> <strong>경험치</strong> <input type="radio" name="attr_exp" value="0" checked class="sheet-first"/> <input type="radio" name="attr_exp" value="1" /> <input type="radio" name="attr_exp" value="2" /> <input type="radio" name="attr_exp" value="3" /> <input type="radio" name="attr_exp" value="4" /> <input type="radio" name="attr_exp" value="5" /> </div> <ul class="sheet-extp-list"> <li> <input type="checkbox" name="attr_exp_get_1" value="1" /> <span>+1 육체 (최대 +2)</span> </li> <li> <input type="checkbox" name="attr_exp_get_2" value="1" /> <span>+1 이성 (최대 +2)</span> </li> <li> <input type="checkbox" name="attr_exp_get_3" value="1" /> <span>+1 감성 (최대 +2)</span> </li> <li> <input type="checkbox" name="attr_exp_get_4" value="1" /> <span>+1 직관 (최대 +2)</span> </li> <li> <input type="checkbox" name="attr_exp_get_5" value="1" /> <span>+1 마법 (최대 +3)</span> </li> <li> <input type="checkbox" name="attr_exp_get_6" value="1" /> <span>새 액션 하나 추가</span> </li> <li> <input type="checkbox" name="attr_exp_get_7" value="1" /> <span>새 액션 하나 추가</span> </li> <li> <input type="checkbox" name="attr_exp_get_8" value="1" /> <span>새 액션 하나 추가</span> </li> <li class="sheet-both"> <input type="checkbox" name="attr_exp_get_9" value="1" /> <span><input type="text" name="attr_exp_get_9_name" value="" /> 흉내내기<br /><span>다른 사람의 액션을 가져옵니다. 단, -1로 판정!</span></span> </li> </ul> </div> </div> <div class="sheet-right"> <div class="sheet-row"> <div><strong>소동레벨측정기</strong></div> <div class="sheet-disadv_box"> <input type="hidden" name="attr_disadv_value" value="0" /> <input type="radio" name="attr_disadv" value="0" checked class="sheet-first" /> <input type="radio" name="attr_disadv" value="1" /> <input type="radio" name="attr_disadv" value="2" /> <input type="radio" name="attr_disadv" value="3" /> <input type="radio" name="attr_disadv" value="4" /> <input type="radio" name="attr_disadv" value="5" /> <input type="radio" name="attr_disadv" value="6" /> </div> </div> <div class="sheet-row"> <div><strong>고유액션</strong></div> <div class="sheet-list"> <div class="sheet-item"> <input type="checkbox" name="attr_char_action_flag" value="1" class="sheet-flag"/> <div class="sheet-data"> <button type="roll" value="&{template:GDH} {{name=@{character_name}}} {{job=@{job}}} {{subject=@{char_action_name}}} {{roll=[[@{char_action_spec}+(@{disadv_value})]]}} {{penalty=[[@{disadv_value}]]}} {{descript=@{char_action_effect}}}" class="sheet-dice"></button> <input type="text" name="attr_char_action_name" value="" style="width:310px;" placeholder="Name" /> <span>판정</span> <select name="attr_char_action_spec" style="width:70px;" class="sheet-tac"> <option value="0">-</option> <option value="1d6">1D6</option> <option value="2d6">2D6</option> <option value="2d6+(@{str})">육체</option> <option value="2d6+(@{san})">이성</option> <option value="2d6+(@{emo})">감성</option> <option value="2d6+(@{int})">직관</option> <option value="2d6+(@{mag})">고유능력</option> </select> <textarea name="attr_char_action_effect" placeholder="descript..." class="sheet-flag-item"></textarea> </div> </div> <fieldset class="repeating_char_action"> <div class="sheet-item"> <input type="checkbox" name="attr_char_action_rep_flag" value="1" class="sheet-flag"/> <div class="sheet-data"> <button type="roll" value="&{template:GDH} {{name=@{character_name}}} {{job=@{job}}} {{subject=@{char_action_rep_name}}} {{roll=[[@{char_action_rep_spec}+(@{disadv_value})]]}} {{penalty=[[@{disadv_value}]]}} {{descript=@{char_action_rep_effect}}}" class="sheet-dice"></button> <input type="text" name="attr_char_action_rep_name" value="" style="width:310px;" placeholder="Name" /> <span>판정</span> <select name="attr_char_action_rep_spec" style="width:70px;" class="sheet-tac"> <option value="0">-</option> <option value="1d6">1D6</option> <option value="2d6">2D6</option> <option value="2d6+(@{str})">육체</option> <option value="2d6+(@{san})">이성</option> <option value="2d6+(@{emo})">감성</option> <option value="2d6+(@{int})">직관</option> <option value="2d6+(@{mag})">고유능력</option> </select> <textarea name="attr_char_action_rep_effect" placeholder="descript..." class="sheet-flag-item"></textarea> </div> </div> </fieldset> </div> </div> <div class="sheet-row"> <div class="sheet-tit"><strong>보유무기</strong></div> <div class="sheet-list"> <div class="sheet-item"> <div class="sheet-data"> <button type="roll" value="&{template:GDH} {{name=@{character_name}의 보유무기}} {{job=@{job}}} {{subject=@{weapon_name}}} {{tag=@{weapon_tag}}}" class="sheet-dice"></button> <input type="text" name="attr_weapon_name" value="" style="width:260px;" placeholder="Name" /> <input type="text" name="attr_weapon_tag" value="" style="width:177px;" placeholder="tag..." /> </div> </div> <fieldset class="repeating_weapon"> <div class="sheet-item"> <div class="sheet-data"> <button type="roll" value="&{template:GDH} {{name=@{character_name}의 보유무기}} {{job=@{job}}} {{subject=@{weapon_rep_name}}} {{tag=@{weapon_rep_tag}}}" class="sheet-dice"></button> <input type="text" name="attr_weapon_rep_name" value="" style="width:260px;" placeholder="Name" /> <input type="text" name="attr_weapon_rep_tag" value="" style="width:177px;" placeholder="tag..." /> </div> </div> </fieldset> </div> </div> <div class="sheet-row"> <div><strong>보유장비</strong></div> <div class="sheet-list"> <div class="sheet-item"> <input type="checkbox" name="attr_apparatus_flag" value="1" class="sheet-flag"/> <div class="sheet-data"> <button type="roll" value="&{template:GDH} {{name=@{character_name}의 보유장비}} {{job=@{job}}} {{subject=@{apparatus_name}}} {{descript=@{apparatus_effect}}}" class="sheet-dice"></button> <input type="text" name="attr_apparatus_name" value="" style="width:410px;" placeholder="Name" /> <textarea name="attr_apparatus_effect" placeholder="effect..." class="sheet-flag-item"></textarea> </div> </div> <fieldset class="repeating_apparatus"> <div class="sheet-item"> <input type="checkbox" name="attr_apparatus_rep_flag" value="1" class="sheet-flag"/> <div class="sheet-data"> <button type="roll" value="&{template:GDH} {{name=@{character_name}의 보유장비}} {{job=@{job}}} {{subject=@{apparatus_rep_name}}} {{descript=@{apparatus_rep_effect}}}" class="sheet-dice"></button> <input type="text" name="attr_apparatus_rep_name" value="" style="width:410px;" placeholder="Name" /> <textarea name="attr_apparatus_rep_effect" placeholder="effect..." class="sheet-flag-item"></textarea> </div> </div> </fieldset> </div> </div> <div class="sheet-row"> <div><strong>인연</strong></div> <div class="sheet-list"> <div class="sheet-item"> <input type="checkbox" name="attr_relation_flag" value="1" class="sheet-flag"/> <div class="sheet-data"> <button type="roll" value="&{template:GDH} {{name=@{character_name}의 인연}} {{job=@{job}}} {{subject=@{relation_name}}} {{descript=@{relation_effect}}}" class="sheet-dice"></button> <input type="text" name="attr_relation_name" value="" style="width:410px;" placeholder="Name" /> <textarea name="attr_relation_effect" placeholder="descript..." class="sheet-flag-item"></textarea> </div> </div> <fieldset class="repeating_relation"> <div class="sheet-item"> <input type="checkbox" name="attr_relation_rep_flag" value="1" class="sheet-flag"/> <div class="sheet-data"> <button type="roll" value="&{template:GDH} {{name=@{character_name}의 인연}} {{job=@{job}}} {{subject=@{relation_rep_name}}} {{descript=@{relation_rep_effect}}}" class="sheet-dice"></button> <input type="text" name="attr_relation_rep_name" value="" style="width:410px;" placeholder="Name" /> <textarea name="attr_relation_rep_effect" placeholder="descript..." class="sheet-flag-item"></textarea> </div> </div> </fieldset> </div> </div> </div> </div> <div class="sheet-bottom"> <textarea name="attr_memo" placeholder="Memo..."></textarea> </div> </div> </div> <script type="text/worker"> on("change:str_ori change:san_ori change:emo_ori change:int_ori", function() { getAttrs(["str_ori", "san_ori", "emo_ori", "int_ori"], function(values) { setAttrs({str:values.str_ori}); setAttrs({san:values.san_ori}); setAttrs({emo:values.emo_ori}); setAttrs({int:values.int_ori}); }); }); on("change:str_panalty change:san_panalty change:emo_panalty change:int_panalty", function() { getAttrs(["str_panalty", "san_panalty", "emo_panalty", "int_panalty", "str_ori", "san_ori", "emo_ori", "int_ori"], function(values) { var istr_p = parseInt(values.str_panalty); var isan_p = parseInt(values.san_panalty); var iemo_p = parseInt(values.emo_panalty); var iint_p = parseInt(values.int_panalty); var istr = parseInt(values.str_ori); var isan = parseInt(values.san_ori); var iemo = parseInt(values.emo_ori); var iint = parseInt(values.int_ori); if(istr_p == 1) { setAttrs({str:-1}); } if(istr_p == 0) { setAttrs({str:istr}); } if(isan_p == 1) { setAttrs({san:-1}); } if(isan_p == 0) { setAttrs({san:isan}); } if(iemo_p == 1) { setAttrs({emo:-1}); } if(iemo_p == 0) { setAttrs({emo:iemo}); } if(iint_p == 1) { setAttrs({int:-1}); } if(iint_p == 0) { setAttrs({int:iint}); } }); }); on("add:mag_edit change:mag_edit", function() { getAttrs(["mag_edit"], function(values) { setAttrs({mag_name:values.mag_edit}); }); }); on("change:disadv", function() { getAttrs(["disadv"], function(values) { var idisadv = parseInt(values.disadv); switch(idisadv) { case 0 : setAttrs({disadv_value:0}); break; case 1 : setAttrs({disadv_value:0}); break; case 2 : setAttrs({disadv_value:0}); break; case 3 : setAttrs({disadv_value:0}); break; case 4 : setAttrs({disadv_value:-1}); break; case 5 : setAttrs({disadv_value:-2}); break; case 6 : setAttrs({disadv_value:-3}); break; } }); }); </script> <!-- ROLL TEMPLATES --> <rolltemplate class="sheet-rolltemplate-GDH"> <div class="sheet-GDH-wrap"> <div class="sheet-top-area"> {{#name}} <div class="sheet-title"> {{name}} </div> {{/name}} {{#subject}} <div class="sheet-subject"> {{subject}} </div> {{/subject}} </div> <div class="sheet-body-area"> {{#roll}} {{#rollGreater() roll 0}} <div class="sheet-dice-result"> {{roll}} </div> <div class="sheet-result"> {{#rollGreater() roll 9}} <!-- 완전 성공 --> <p class="sheet-critical">실수 없이 성공!</p> {{/rollGreater() roll 9}} {{#^rollGreater() roll 9}} {{#rollGreater() roll 6}} <!-- 실수있는 성공 --> <p class="sheet-success">문제있는 성공</p> {{/rollGreater() roll 6}} {{#^rollGreater() roll 6}} <p class="sheet-fale">헉, 무슨일이?!</p> {{/^rollGreater() roll 6}} {{/^rollGreater() roll 9}} </div> {{/rollGreater() roll 0}} {{/roll}} {{#free_roll}} <div class="sheet-dice-result"> {{free_roll}} </div> {{/free_roll}} {{#penalty}} {{#^rollTotal() penalty 0}} <div class="sheet-penalty">패널티 : {{penalty}}</div> {{/^rollTotal() penalty 0}} {{/penalty}} {{#tag}} <div class="sheet-tag"> {{tag}} </div> {{/tag}} {{#descript}} <div class="sheet-descript"> {{descript}} </div> {{/descript}} {{#job}} <div class="sheet-job"> {{job}} </div> {{/job}} </div> </div> </rolltemplate>

CSS

@font-face { font-family: 'Dovemayo-Bold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.0/Dovemayo-Bold.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Binggrae-Bold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2110@1.0/Binggrae-Bold.woff2') format('woff2'); font-weight: normal; font-style: normal; } /**************************************************** Reset ****************************************************/ .charsheet select, .charsheet div, .charsheet button, .charsheet textarea, .charsheet span, .charsheet input, .charsheet img, .charsheet label{box-sizing: border-box; outline:0; outline:0; appearance:none !important; -webkit-appearance:none !important;} .ui-dialog .charsheet {padding:0;} .charsheet .sheet-wrap {font-size:14px;} .charsheet .sheet-wrap * {color:#000; outline:0 !important; font-family: 'Dovemayo-Bold';} .charsheet .sheet-wrap p {margin:0;} .charsheet .sheet-wrap ul, .charsheet .sheet-wrap li {list-style:none; margin:0; padding:0;} .charsheet .sheet-wrap input, .charsheet .sheet-wrap textarea, .charsheet .sheet-wrap select, .charsheet .sheet-wrap .uneditable-input {margin:0; border-radius:0 !important;} .charsheet .sheet-wrap input[type="checkbox"], .charsheet .sheet-wrap input[type="radio"] {display:block; position:absolute; top:0; left:0; opacity:0; border:none !important;} .charsheet .sheet-wrap input[type="text"], .charsheet .sheet-wrap input[type="number"] {border:none; height:30px; border-radius:0; background:transparent; padding:0 5px; font-size:12px; width:100%;} .charsheet .sheet-wrap select {border:none; height:30px; padding:0 5px; font-size:12px; width:100%; background:transparent;} .charsheet .sheet-wrap input[type="number"]::-webkit-outer-spin-button, .charsheet .sheet-wrap input[type="number"]::-webkit-inner-spin-button {appearance:none; -webkit-appearance:none; -moz-appearance:none; margin:0;} .charsheet .sheet-wrap select, .charsheet .sheet-wrap input[type="checkbox"], .charsheet .sheet-wrap input[type="radio"], .charsheet .sheet-wrap button {cursor:pointer;} .charsheet .sheet-wrap input:-internal-autofill-selected {background-color:transparent !important; appearance:none !important; -webkit-appearance:none !important; -moz-appearance:none !important;} .charsheet .sheet-wrap input[type="number"] {} .charsheet .sheet-wrap select * {color:#000 !important;} .charsheet .sheet-wrap input[type="checkbox"], .charsheet .sheet-wrap input[type="radio"], .charsheet .sheet-wrap button, .charsheet .sheet-wrap select {box-shadow: none !important; appearance:none; -webkit-appearance:none; -moz-appearance:none;} .charsheet .sheet-wrap select {padding-right:15px; background:transparent;} .charsheet .sheet-wrap button {border:none; margin:0; background:transparent;} .charsheet .sheet-wrap textarea {width:100%; background:transparent; border:none; resize:none; line-height:1.5;} .charsheet .sheet-wrap fieldset {margin:0; padding:0; border:none;} .charsheet .sheet-wrap .repcontainer.editmode .repitem .itemcontrol {z-index:990 !important; height:auto; top:0; bottom:0;} .charsheet .sheet-wrap .repcontainer.editmode .repitem .itemcontrol button, .charsheet .sheet-wrap .repcontainer.editmode .repitem .itemcontrol a {width:30px; height:30px; border:none; border-radius:0; line-height:30px; padding:0; text-align:center;} .charsheet .sheet-wrap .repcontainer.editmode .repitem .itemcontrol button {background:red;} .charsheet .sheet-wrap .repcontrol {display:block; position:relative; overflow:hidden; margin-top:10px; margin-bottom:30px; background:#242f59; border-radius:9em; font-size:11px;} .charsheet .sheet-wrap .repcontrol:before {content:""; display:block; position:absolute; width:1px; top:5px; bottom:5px; left:50%; background:#fff; opacity:.5;} .charsheet .sheet-wrap .repcontrol > * {height:20px; line-height:20px; padding:0 10px; font-size:11px; font-weight:400; color:#fff;} .charsheet .sheet-wrap .sheet-dice {display:inline-block; vertical-align:middle; border:none; padding:0 !important; margin:0 !important; width:25px; height:30px; border-radius:0; background:url('https://i.imgur.com/DehPqI9.png') no-repeat 50% 50%;} .charsheet .sheet-wrap .sheet-dice:before, .charsheet .sheet-wrap button[type=roll] {padding:0 !important;} .charsheet .sheet-wrap button[type=roll]:before {display:none !important;} .charsheet .sheet-wrap input::placeholder {color:rgba(0, 0, 0, .3);} .charsheet .sheet-wrap textarea::placeholder {color:rgba(0, 0, 0, .3);} .charsheet .sheet-tal {text-align:left !important;} .charsheet .sheet-tar {text-align:right !important;} .charsheet .sheet-tac {text-align:center !important;} .charsheet .sheet-wrap .inlinerollresult {display:inline !important; font-size:1em !important; opacity:1 !important; padding:0 !important; background:transparent !important; border:none !important;} /**************************************************** Default Layout ****************************************************/ .charsheet .sheet-wrap {display:block; position:relative; margin:0 auto; width:850px; background:url('https://i.imgur.com/Oborkue.png') repeat #ebeeef;} .charsheet .sheet-wrap-inner {display:block; position:relative; background:url('https://i.imgur.com/y6hbrlB.png') no-repeat 50% 0;} /**************************************************** Header ****************************************************/ .charsheet .sheet-header {position:relative; height:355px; padding:132px 20px 0; padding-left:290px;} .charsheet .sheet-header .sheet-logo {position:absolute; top:0; left:0; width:283px; height:288px; background:url('https://i.imgur.com/fyIgTiU.png') no-repeat 0 0;} .charsheet .sheet-header .sheet-logo input[type="text"] {display:block; position:absolute; bottom:60px; left:50%; margin-left:-92px; width:185px; height:32px; box-sizing:border-box; background:#fff; border:3px solid #242f59; text-align:center; font-size:14px;} .charsheet .sheet-header strong {display:inline-block; position:relative; line-height:35px; font-size:15px; font-weight:800; font-family: 'Binggrae-Bold';} .charsheet .sheet-header strong input[type="text"] {display:inline-block; position:Relative; font-size:15px; height:20px !important; width:4em !important; text-align:center;} .charsheet .sheet-header .sheet-name {display:block; position:absolute; left:290px; top:25px; width:355px;} .charsheet .sheet-header .sheet-name input[type="text"] {display:block; position:relative; width:355px; height:49px; padding:0 20px; box-sizing:border-box; font-size:25px; background:url('https://i.imgur.com/7frUQME.png') no-repeat 0 0;} .charsheet .sheet-header .sheet-hp {display:block; position:absolute; right:20px; top:25px; width:175px;} .charsheet .sheet-header .sheet-hp .sheet-group {display:block; position:relative; border-radius:9em; background:rgba(255, 255, 255, .8); height:22px; text-align:center;} .charsheet .sheet-header .sheet-hp .sheet-group > * {display:inline-block; vertical-align:middle;} .charsheet .sheet-header .sheet-hp .sheet-group strong {line-height:22px; font-size:12px; padding:0 1px;} .charsheet .sheet-header .sheet-hp .sheet-group *[class*="sheet-chk"] input[type="checkbox"] {display:inline-block; position:relative; width:16px; height:16px; position:relative; vertical-align:middle; background:url('https://i.imgur.com/rOWMNEn.png') no-repeat 0 0; opacity:.5;} .charsheet .sheet-header .sheet-hp .sheet-group *[class*="sheet-chk"] input[type="checkbox"]:checked {opacity:1;} .charsheet .sheet-header .sheet-hp .sheet-group .sheet-chk1 input[type="checkbox"] {background-position:-19px 0;} .charsheet .sheet-header .sheet-hp .sheet-group .sheet-chk1 input[type="checkbox"]:checked {background-position:0 0;} .charsheet .sheet-header .sheet-hp .sheet-group .sheet-chk2 input[type="checkbox"] {background-position:-64px 0;} .charsheet .sheet-header .sheet-hp .sheet-group .sheet-chk2 input[type="checkbox"]:checked {background-position:-41px 0;} .charsheet .sheet-header .sheet-hp .sheet-group .sheet-chk3 input[type="checkbox"] {background-position:-108px 0;} .charsheet .sheet-header .sheet-hp .sheet-group .sheet-chk3 input[type="checkbox"]:checked {background-position:-88px 0;} .charsheet .sheet-header .sheet-copyright {text-align:right; line-height:30px; padding-right:10px; font-size:12px;} .charsheet .sheet-status {position:relative;} .charsheet .sheet-status:after {content:""; display:block; clear:both;} .charsheet .sheet-status ul {margin:0 -6px;} .charsheet .sheet-status ul li {display:block; position:relative; width:20%; float:left; padding:0 8px; text-align:center; box-sizing:border-box;} .charsheet .sheet-status li > div {position:relative; padding-top:10px;} .charsheet .sheet-status li button, .charsheet .sheet-status li .sheet-button-title {display:block; position:absolute; top:0; left:50%; margin-left:-32px !important; width:65px; height:20px; line-height:20px; border-radius:9em; background:#242f59; color:#fff; font-size:12px !important; z-index:2;} .charsheet .sheet-status li button.sheet-button-title {opacity:0; z-index:2;} .charsheet .sheet-status li input.sheet-button-title {opacity:1; z-index:1; border-radius:9em !important; text-align:center;} .charsheet .sheet-status li select {display:block; position:relative; height:55px; background:rgba(255,255,255,.7); z-index:0; text-align:center; font-size:28px; color:#000; font-weight:800; padding:10px 0 0; line-height:48px;} .charsheet .sheet-status li select option {font-size:12px;} .charsheet .sheet-status li .sheet-chk {display:block; position:relative; margin-top:8px; height:20px;} .charsheet .sheet-status li .sheet-chk span {display:block; position:relative; height:20px; text-align:center; background:rgba(0,0,0,.1); color:#fff; line-height:20px; font-size:13px; z-index:0;} .charsheet .sheet-status li .sheet-chk input[type="checkbox"] {display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;} .charsheet .sheet-status li .sheet-chk input[type="checkbox"]:checked + span {background:rgba(255, 64, 187, .7);} .charsheet .sheet-status li .sheet-edit {position:absolute; bottom:100%; left:0; right:0; text-align:center;} .charsheet .sheet-status li .sheet-edit input[type="text"] {text-align:center;} /**************************************************** Grid ****************************************************/ .charsheet .sheet-grid {display:block; position:relative; overflow:hidden;} .charsheet .sheet-grid:before {content:""; display:block; position:absolute; top:0; bottom:30px; width:1px; left:40%; background:rgba(0,0,0,.6);} .charsheet .sheet-grid input[type="text"], .charsheet .sheet-grid input[type="number"], .charsheet .sheet-grid textarea, .charsheet .sheet-grid select {display:inline-block; vertical-align:middle; border-radius:15px; border:1px solid #d1d1d1; background:rgba(255,255,255,.7); padding:0 10px; font-size:13px; border-radius:15px !important;} .charsheet .sheet-grid input[type="text"], .charsheet .sheet-grid input[type="number"], .charsheet .sheet-grid select {height:30px;} .charsheet .sheet-grid textarea {padding:10px; display:block; margin-top:5px;} .charsheet .sheet-grid .sheet-left, .charsheet .sheet-grid .sheet-right {display:block; position:relative; padding:0 20px 30px; box-sizing:border-box; float:left; min-height:200px;} .charsheet .sheet-grid .sheet-left {width:40%;} .charsheet .sheet-grid .sheet-right {width:60%;} .charsheet .sheet-grid .sheet-row + .sheet-row {margin-top:30px;} .charsheet .sheet-grid strong {padding-right:15px; font-size:15px; font-weight:800; font-family: 'Binggrae-Bold';} /**************** Exp List ****************/ .charsheet .sheet-grid .sheet-exp {display:block; position:relative; margin:10px 0;} .charsheet .sheet-grid .sheet-exp > * {display:inline-block; vertical-align:middle;} .charsheet .sheet-grid .sheet-exp strong {font-size:15px; font-family: 'Dovemayo-Bold';} .charsheet .sheet-grid .sheet-exp input[type="radio"] {display:inline-block; position:relative; width:20px; height:20px; opacity:1; background:#ff8212; border:2px solid #242f59 !important; box-sizing:border-box;} .charsheet .sheet-grid .sheet-exp input[type="radio"]:checked ~ input[type="radio"] {background:#fff;} .charsheet .sheet-grid .sheet-exp input[type="radio"].sheet-first {position:absolute; width:45px; border:none !important; background:transparent; opacity:0; } .charsheet .sheet-grid .sheet-extp-list {display:block; margin:10px 0;} .charsheet .sheet-grid .sheet-extp-list li {display:block; position:relative; padding:5px 0 5px 30px; line-height:1.5; box-sizing:border-box; width:50%; float:left;} .charsheet .sheet-grid .sheet-extp-list li input[type="checkbox"] {display:inline-block; position:absolute; top:9px; left:5px; width:15px; height:15px; margin-right:5px; box-sizing:border-box; border-radius:100% !important; opacity:1; border:2px solid #242f59 !important; background:#fff;} .charsheet .sheet-grid .sheet-extp-list li input[type="checkbox"]:checked {background:#ff8212;} .charsheet .sheet-grid .sheet-extp-list li input[type="text"] {height:20px; width:100px;} .charsheet .sheet-grid .sheet-extp-list li span span {display:block; font-size:12px; margin-top:5px;} .charsheet .sheet-grid .sheet-extp-list li.sheet-both {width:auto; float:none; clear:both;} .charsheet .sheet-grid .sheet-disadv_box {display:block; position:relative; margin-top:10px;} .charsheet .sheet-grid .sheet-disadv_box:after {content:""; display:block; clear:both;} .charsheet .sheet-grid .sheet-disadv_box input[type="radio"] {display:block; position:relative; width:75px; height:50px; opacity:1; float:left; background:url('https://i.imgur.com/84hPwdH.png') no-repeat 0 0; box-sizing:border-box;} .charsheet .sheet-grid .sheet-disadv_box input[type="radio"].sheet-first {position:absolute; top:auto; bottom:100%; margin-bottom:10px; height:20px; width:100px; background:transparent; opacity:0;} .charsheet .sheet-grid .sheet-disadv_box input[type="radio"].sheet-first + input[type="radio"] ~ input[type="radio"] {margin-left:4px;} .charsheet .sheet-grid .sheet-disadv_box input[type="radio"]:checked ~ input[type="radio"] {background-image:url('https://i.imgur.com/jYfz5Mr.png');} .charsheet .sheet-grid .sheet-disadv_box input[type="radio"].sheet-first + input[type="radio"] {background-position:0 0;} .charsheet .sheet-grid .sheet-disadv_box input[type="radio"].sheet-first + input[type="radio"] + input[type="radio"] {background-position:-79px 0;} .charsheet .sheet-grid .sheet-disadv_box input[type="radio"].sheet-first + input[type="radio"] + input[type="radio"] + input[type="radio"] {background-position:-158px 0;} .charsheet .sheet-grid .sheet-disadv_box input[type="radio"].sheet-first + input[type="radio"] + input[type="radio"] + input[type="radio"] + input[type="radio"] {background-position:-237px 0;} .charsheet .sheet-grid .sheet-disadv_box input[type="radio"].sheet-first + input[type="radio"] + input[type="radio"] + input[type="radio"] + input[type="radio"] + input[type="radio"] {background-position:-316px 0;} .charsheet .sheet-grid .sheet-disadv_box input[type="radio"].sheet-first + input[type="radio"] + input[type="radio"] + input[type="radio"] + input[type="radio"] + input[type="radio"] + input[type="radio"] {background-position:-395px 0;} /**************** Data List ****************/ .charsheet .sheet-list {position:relative;} .charsheet .sheet-list .sheet-item {position:relative; margin-top:10px;} .charsheet .sheet-list input[type="checkbox"].sheet-flag {display:block; position:absolute; top:0; left:0; width:30px; height:30px; opacity:1; background:url('https://i.imgur.com/6oiU3F0.png') no-repeat 50% -15px;} .charsheet .sheet-list input[type="checkbox"].sheet-flag:checked {background-position:50% 8px;} .charsheet .sheet-list .sheet-data {overflow:hidden; white-space:nowrap;} .charsheet .sheet-list .sheet-flag ~ .sheet-data {margin-left:30px;} .charsheet .sheet-list .sheet-flag ~ .sheet-data .sheet-flag-item {display:none;} .charsheet .sheet-list .sheet-flag:checked ~ .sheet-data .sheet-flag-item {display:block;} /**************** Memo ****************/ .charsheet .sheet-bottom {clear:both; display:block; position:relative; z-index:2; padding:20px;} .charsheet .sheet-bottom textarea {display:block; vertical-align:middle; border-radius:15px; border:1px solid #d1d1d1; background:rgba(255,255,255,.7); padding:0 10px; font-size:13px; border-radius:15px !important;} .charsheet .sheet-bottom textarea {padding:10px; display:block; margin-top:5px; height:150px;} /***************************************** Template Style *****************************************/ .sheet-rolltemplate-GDH {} .sheet-rolltemplate-GDH:before {content:""; display:block; position:relative; height:10px; clear:both;} .sheet-rolltemplate-GDH .inlinerollresult {display:inline !important; font-size:1em !important; opacity:1 !important; padding:0 !important; background:transparent !important; border:none !important;} .sheet-rolltemplate-GDH .sheet-GDH-wrap {display:block; position:relative; border-radius:10px; border:1px solid #242f59; background:url('https://i.imgur.com/Oborkue.png') repeat #ebeeef; overflow:hidden; font-family:'Dovemayo-Bold';} .sheet-rolltemplate-GDH .sheet-top-area {display:block; position:relative; padding:10px; background:url('https://i.imgur.com/Z7e26EG.png'); text-align:center; color:#242f59; border-bottom:3px solid #84dfff;} .sheet-rolltemplate-GDH .sheet-top-area .sheet-title {font-size:12px; color:#242f59;} .sheet-rolltemplate-GDH .sheet-top-area .sheet-subject {font-weight:800; font-size:17px; font-family:'Binggrae-Bold'; line-height:1.3; padding:5px 0;} .sheet-rolltemplate-GDH .sheet-top-area .sheet-subject:after {content:""; display:block; position:absolute; bottom:0; left:0; right:0; height:3px; background:#ff8212;} .sheet-rolltemplate-GDH .sheet-body-area {display:block; position:relative; padding:10px;} .sheet-rolltemplate-GDH .sheet-job {text-align:center; padding-top:5px; border-top:1px solid rgba(0,0,0,.3); margin:15px -5px -5px;} .sheet-rolltemplate-GDH .sheet-dice-result {display:block; position:relative; margin:0 auto; width:120px; height:95px; text-align:center; line-height:95px; background:url('https://i.imgur.com/Gg4WGkq.png') no-repeat 50% 50%; background-size:contain; font-size:24px; font-weight:800; color:#242f59; font-family: 'Binggrae-Bold';} .sheet-rolltemplate-GDH .sheet-dice-result, .sheet-rolltemplate-GDH .sheet-dice-result span {font-family: 'Binggrae-Bold';} .sheet-rolltemplate-GDH .sheet-result {margin-top:10px; margin-bottom:10px;} .sheet-rolltemplate-GDH .sheet-result > p {display:block; position:relative; height:25px; line-height:25px; text-align:center; color:#fff; font-family: 'Binggrae-Bold'; background: rgb(0,0,0); background: linear-gradient(-90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);} .sheet-rolltemplate-GDH .sheet-result .sheet-fumble {background: rgb(255,0,42); background: linear-gradient(-90deg, rgba(255,0,42,0) 0%, rgba(255,0,42,1) 50%, rgba(255,0,42,0) 100%);} .sheet-rolltemplate-GDH .sheet-result .sheet-fale {background: rgb(84,0,0); background: linear-gradient(-90deg, rgba(84,0,0,0) 0%, rgba(84,0,0,1) 50%, rgba(84,0,0,0) 100%);} .sheet-rolltemplate-GDH .sheet-result .sheet-success {background: rgb(21,105,96); background: linear-gradient(-90deg, rgba(21,105,96,0) 0%, rgba(21,105,96,1) 50%, rgba(21,105,96,0) 100%);} .sheet-rolltemplate-GDH .sheet-result .sheet-critical {background: rgb(104, 185, 0); background: linear-gradient(-90deg, rgba(104, 185, 0,0) 0%, rgba(104, 185, 0,1) 50%, rgba(104, 185, 0,0) 100%);} .sheet-rolltemplate-GDH .sheet-penalty {display:block; text-align:center; color:red; padding-bottom:10px;} .sheet-rolltemplate-GDH .sheet-descript {display:block; background:rgba(255,255,255,.5); padding:10px;} .sheet-rolltemplate-GDH .sheet-tag:before {content:"tag"; display:inline-block; position:relative; vertical-align:middle; padding:2px 10px; font-size:11px; color:#fff; background:#242f59; border-radius:5px;}

API