룰 범용 커스텀 시트 > 배포 | 커스텀 시트

룰 범용 커스텀 시트 둘이서 수사

Keyword: TRPG, 범용, 캐릭터 시트

Color

기본 아이콘: ICOOON MONO

코딩을 정식으로 배우지 않은 채 제작한 커스텀 시트입니다!!
코드가 최적화되어 있지 않으며 오류가 나면 대응하기 어렵습니다 ㅠㅠ.

롤20에 내장시트가 없는 룰들을 위한 범용 시트입니다.
코코포리아를 생각해보며 만들었으며 입력 항목을 자유롭게 추가할 수 있습니다.

입력 항목이 간단한 룰에 적합하다고 생각합니다. (크툴루의 부름이나 사이코로픽션 등은 항목이 많아 어려울지도...)

수정, 가공 자유 | 재배포 금지 | 문제시 내려갑니다 그 외 편하게 써주세요!

HTML: <div class="sheet-wrap"> <div class="sheet-head"> <input type="text" id="name-input25" style="width: 760px;" name="attr_character_name"> <input type="text" id="name-input12" style="width: 760px;" name="attr_player" placeholder="플레이어 이름"> </div> <div class="sheet-charea"> <div class="sheet-ch-col1"> <img name="attr_character_avatar"> <fieldset class="repeating_chinfo1"> <div class="sheet-chinfo1-item"> <input type="text" id="big-input12" style="width: 72.5px;" name="attr_info1title" placeholder="항목 이름"> <input type="text" id="small-input12" style="width: 72.5px;" name="attr_info1cont" placeholder="-"> </div> </fieldset> </div> <div class="sheet-ch-col2"> <div class="sheet-verti5"> <div class="sheet-hori10"> <input type="text" id="big-input16" style="width: 85px;" name="attr_stat1title" value="Stat 1"> <input type="text" id="num-input15" style="width: 60px;" name="attr_stat1" value="0"> <div id="big-input16">/</div> <input type="text" style="font-weight: 700; width: 60px;" id="num-input15" name="attr_stat1_max" value="0"> </div> <div class="sheet-hori10"> <input type="text" id="big-input16" style="width: 85px;" name="attr_stat2title" value="Stat 2"> <input type="text" id="num-input15" style="width: 60px;" name="attr_stat2" value="0"> <div id="big-input16">/</div> <input type="text" style="font-weight: 700; width: 60px;" id="num-input15" name="attr_stat2_max" value="0"> </div> <div class="sheet-hori10"> <input type="text" id="big-input16" style="width: 85px;" name="attr_stat3title" value="Stat 3"> <input type="text" id="num-input15" style="width: 60px;" name="attr_stat3" value="0"> <div id="big-input16">/</div> <input type="text" style="font-weight: 700; width: 60px;" id="num-input15" name="attr_stat3_max" value="0"> </div> </div> <fieldset class="repeating_chinfo2"> <div class="sheet-chinfo2-item"> <input type="text" id="big-input16" style="width: 285px;" name="attr_info2title" placeholder="항목 이름"> <input type="text" id="small-input15" style="width: 285px;" name="attr_info2cont" placeholder="-"> </div> </fieldset> </div> <div class="sheet-ch-col3"> <div class="sheet-hori5"> <div id="small-title12">자유 다이스</div> <input id="num-input12" type="text" value="2D6" name="attr_DiceRoll"> <button class="sheet-diceblack" type="roll" value="&{template:AllUseDiceRoll}{{name=@{DiceRoll}}}{{roll=[[@{DiceRoll}]]}}"></button> </div> <fieldset class="repeating_chinfo3"> <div class="sheet-chinfo3-item"> <input type="text" id="big-input12" style="width: 82px;" name="attr_info3title" placeholder="항목 이름"> <input type="text" id="num-input12" style="width: 45px;" name="attr_info3dice1" value="0"> <div id="big-input12">D</div> <input type="text" id="num-input12" style="width: 45px;" name="attr_info3dice2" value="1"> <div id="big-input12">+</div> <input type="text" id="num-input12" style="width: 45px;" name="attr_info3dice3" value="0"> <button class="sheet-diceblack" type="roll" value="&{template:AllUseDiceRoll}{{name=@{info3title}}}{{roll=[[(@{info3dice1})d(@{info3dice2})+@{info3dice3}]]}}"></button> </div> </fieldset> </div> </div> <input type="hidden" class="sheet-tabstoggle" name="attr_sheetLayout" value="catebox4"> <div class="sheet-categorylayout"> <button type="action" class="sheet-catebutton1" name="act_catebox1"><img src="https://imgur.com/WrOaUKz.png"></button> <button type="action" class="sheet-catebutton2" name="act_catebox2"><img src="https://imgur.com/u4Mq4Vv.png"></button> <button type="action" class="sheet-catebutton3" name="act_catebox3"><img src="https://imgur.com/hhPqzSx.png"></button> <button type="action" class="sheet-catebutton4" name="act_catebox4"><img src="https://imgur.com/j7trv8L.png"></button> </div> <div class="sheet-catebox1"> <div class="sheet-category1"> <input type="text" id="big-input18" style="width: 760px;" name="attr_category1title" value="◈"> <fieldset class="repeating_cate1"> <div class="sheet-cate1-item"> <div class="sheet-hori10"> <button class="sheet-diceblack" type="roll" value="&{template:AllUseTableRoll}{{title=@{category1title}}}{{name=@{cate1name}}}{{cate1=@{cate1title1}}}{{cont1=@{cate1cont1}}}{{cate2=@{cate1title2}}}{{cont2=@{cate1cont2}}}{{desc=@{cate1desc}}}"></button> <input type="text" id="big-input15" style="width: 330px;" name="attr_cate1name" placeholder="이름"> <input type="text" id="big-input14" style="width: 80px;" name="attr_cate1title1" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 98px;" name="attr_cate1cont1" value="" placeholder="-"> <input type="text" id="big-input14" style="width: 80px;" name="attr_cate1title2" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 98px;" name="attr_cate1cont2" value="" placeholder="-"> </div> <textarea name="attr_cate1desc" style="width: 748px; height: 40px;" placeholder="설명"></textarea> </div> </fieldset> </div> <div class="sheet-category2"> <input type="text" id="big-input18" style="width: 760px;" name="attr_category2title" value="◈"> <fieldset class="repeating_cate2"> <div class="sheet-cate2-item"> <div class="sheet-hori10"> <button class="sheet-diceblack" type="roll" value="&{template:AllUseTableRoll}{{title=@{category2title}}}{{name=@{cate2name}}}{{cate1=@{cate2title1}}}{{cont1=@{cate2cont1}}}{{cate2=@{cate2title2}}}{{cont2=@{cate2cont2}}}{{desc=@{cate2desc}}}"></button> <input type="text" id="big-input15" style="width: 330px;" name="attr_cate2name" placeholder="이름"> <input type="text" id="big-input14" style="width: 80px;" name="attr_cate2title1" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 98px;" name="attr_cate2cont1" value="" placeholder="-"> <input type="text" id="big-input14" style="width: 80px;" name="attr_cate2title2" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 98px;" name="attr_cate2cont2" value="" placeholder="-"> </div> <textarea name="attr_cate2desc" style="width: 748px; height: 40px;" placeholder="설명"></textarea> </div> </fieldset> </div> <div class="sheet-category3"> <input type="text" id="big-input18" style="width: 760px;" name="attr_category3title" value="◈"> <fieldset class="repeating_cate3"> <div class="sheet-cate3-item"> <div class="sheet-hori10"> <button class="sheet-diceblack" type="roll" value="&{template:AllUseTableRoll}{{title=@{category3title}}}{{name=@{cate3name}}}{{cate1=@{cate3title1}}}{{cont1=@{cate3cont1}}}{{cate2=@{cate3title2}}}{{cont2=@{cate3cont2}}}{{desc=@{cate3desc}}}"></button> <input type="text" id="big-input15" style="width: 330px;" name="attr_cate3name" placeholder="이름"> <input type="text" id="big-input14" style="width: 80px;" name="attr_cate3title1" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 98px;" name="attr_cate3cont1" value="" placeholder="-"> <input type="text" id="big-input14" style="width: 80px;" name="attr_cate3title2" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 98px;" name="attr_cate3cont2" value="" placeholder="-"> </div> <textarea name="attr_cate3desc" style="width: 748px; height: 40px;" placeholder="설명"></textarea> </div> </fieldset> </div> </div> <div class="sheet-catebox2"> <div class="sheet-cateboxrow"> <div class="sheet-category1"> <input type="text" id="big-input18" style="width: 375px;" name="attr_category1title" value="◈"> <fieldset class="repeating_cate1"> <div class="sheet-cate1-item"> <div class="sheet-hori10"> <button class="sheet-diceblack" type="roll" value="&{template:AllUseTableRoll}{{title=@{category1title}}}{{name=@{cate1name}}}{{cate1=@{cate1title1}}}{{cont1=@{cate1cont1}}}{{cate2=@{cate1title2}}}{{cont2=@{cate1cont2}}}{{desc=@{cate1desc}}}"></button> <input type="text" id="big-input15" style="width: 345px;" name="attr_cate1name" placeholder="이름"> </div> <div class="sheet-hori10"> <input type="text" id="big-input14" style="width: 72.5px;" name="attr_cate1title1" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 98px;" name="attr_cate1cont1" value="" placeholder="-"> <input type="text" id="big-input14" style="width: 72.5px;" name="attr_cate1title2" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 98px;" name="attr_cate1cont2" value="" placeholder="-"> </div> <textarea name="attr_cate1desc" style="width: 363px; height: 40px;" placeholder="설명"></textarea> </div> </fieldset> </div> <div class="sheet-category2"> <input type="text" id="big-input18" style="width: 375px;" name="attr_category2title" value="◈"> <fieldset class="repeating_cate2"> <div class="sheet-cate2-item"> <div class="sheet-hori10"> <button class="sheet-diceblack" type="roll" value="&{template:AllUseTableRoll}{{title=@{category2title}}}{{name=@{cate2name}}}{{cate1=@{cate2title1}}}{{cont1=@{cate2cont1}}}{{cate2=@{cate2title2}}}{{cont2=@{cate2cont2}}}{{desc=@{cate2desc}}}"></button> <input type="text" id="big-input15" style="width: 345px;" name="attr_cate2name" placeholder="이름"> </div> <div class="sheet-hori10"> <input type="text" id="big-input14" style="width: 72.5px;" name="attr_cate2title1" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 98px;" name="attr_cate2cont1" value="" placeholder="-"> <input type="text" id="big-input14" style="width: 72.5px;" name="attr_cate2title2" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 98px;" name="attr_cate2cont2" value="" placeholder="-"> </div> <textarea name="attr_cate2desc" style="width: 363px; height: 40px;" placeholder="설명"></textarea> </div> </fieldset> </div> </div> <div class="sheet-category3"> <input type="text" id="big-input18" style="width: 760px;" name="attr_category3title" value="◈"> <fieldset class="repeating_cate3"> <div class="sheet-cate3-item"> <div class="sheet-hori10"> <button class="sheet-diceblack" type="roll" value="&{template:AllUseTableRoll}{{title=@{category3title}}}{{name=@{cate3name}}}{{cate1=@{cate3title1}}}{{cont1=@{cate3cont1}}}{{cate2=@{cate3title2}}}{{cont2=@{cate3cont2}}}{{desc=@{cate3desc}}}"></button> <input type="text" id="big-input15" style="width: 330px;" name="attr_cate3name" placeholder="이름"> <input type="text" id="big-input14" style="width: 80px;" name="attr_cate3title1" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 98px;" name="attr_cate3cont1" value="" placeholder="-"> <input type="text" id="big-input14" style="width: 80px;" name="attr_cate3title2" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 98px;" name="attr_cate3cont2" value="" placeholder="-"> </div> <textarea name="attr_cate3desc" style="width: 748px; height: 40px;" placeholder="설명"></textarea> </div> </fieldset> </div> </div> <div class="sheet-catebox3"> <div class="sheet-category1"> <input type="text" id="big-input18" style="width: 760px;" name="attr_category1title" value="◈"> <fieldset class="repeating_cate1"> <div class="sheet-cate1-item"> <div class="sheet-hori10"> <button class="sheet-diceblack" type="roll" value="&{template:AllUseTableRoll}{{title=@{category1title}}}{{name=@{cate1name}}}{{cate1=@{cate1title1}}}{{cont1=@{cate1cont1}}}{{cate2=@{cate1title2}}}{{cont2=@{cate1cont2}}}{{desc=@{cate1desc}}}"></button> <input type="text" id="big-input15" style="width: 330px;" name="attr_cate1name" placeholder="이름"> <input type="text" id="big-input14" style="width: 80px;" name="attr_cate1title1" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 98px;" name="attr_cate1cont1" value="" placeholder="-"> <input type="text" id="big-input14" style="width: 80px;" name="attr_cate1title2" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 98px;" name="attr_cate1cont2" value="" placeholder="-"> </div> <textarea name="attr_cate1desc" style="width: 748px; height: 40px;" placeholder="설명"></textarea> </div> </fieldset> </div> <div class="sheet-cateboxrow"> <div class="sheet-category2"> <input type="text" id="big-input18" style="width: 375px;" name="attr_category2title" value="◈"> <fieldset class="repeating_cate2"> <div class="sheet-cate2-item"> <div class="sheet-hori10"> <button class="sheet-diceblack" type="roll" value="&{template:AllUseTableRoll}{{title=@{category2title}}}{{name=@{cate2name}}}{{cate1=@{cate2title1}}}{{cont1=@{cate2cont1}}}{{cate2=@{cate2title2}}}{{cont2=@{cate2cont2}}}{{desc=@{cate2desc}}}"></button> <input type="text" id="big-input15" style="width: 345px;" name="attr_cate2name" placeholder="이름"> </div> <div class="sheet-hori10"> <input type="text" id="big-input14" style="width: 72.5px;" name="attr_cate2title1" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 98px;" name="attr_cate2cont1" value="" placeholder="-"> <input type="text" id="big-input14" style="width: 72.5px;" name="attr_cate2title2" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 98px;" name="attr_cate2cont2" value="" placeholder="-"> </div> <textarea name="attr_cate2desc" style="width: 363px; height: 40px;" placeholder="설명"></textarea> </div> </fieldset> </div> <div class="sheet-category3"> <input type="text" id="big-input18" style="width: 375px;" name="attr_category3title" value="◈"> <fieldset class="repeating_cate3"> <div class="sheet-cate3-item"> <div class="sheet-hori10"> <button class="sheet-diceblack" type="roll" value="&{template:AllUseTableRoll}{{title=@{category3title}}}{{name=@{cate3name}}}{{cate1=@{cate3title1}}}{{cont1=@{cate3cont1}}}{{cate2=@{cate3title2}}}{{cont2=@{cate3cont2}}}{{desc=@{cate3desc}}}"></button> <input type="text" id="big-input15" style="width: 345px;" name="attr_cate3name" placeholder="이름"> </div> <div class="sheet-hori10"> <input type="text" id="big-input14" style="width: 72.5px;" name="attr_cate3title1" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 98px;" name="attr_cate3cont1" value="" placeholder="-"> <input type="text" id="big-input14" style="width: 72.5px;" name="attr_cate3title2" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 98px;" name="attr_cate3cont2" value="" placeholder="-"> </div> <textarea name="attr_cate3desc" style="width: 363px; height: 40px;" placeholder="설명"></textarea> </div> </fieldset> </div> </div> </div> <div class="sheet-catebox4"> <div class="sheet-cateboxrow"> <div class="sheet-category1"> <input type="text" id="big-input18" style="width: 246.67px;" name="attr_category1title" value="◈"> <fieldset class="repeating_cate1"> <div class="sheet-cate1-item"> <div class="sheet-hori10"> <button class="sheet-diceblack" type="roll" value="&{template:AllUseTableRoll}{{title=@{category1title}}}{{name=@{cate1name}}}{{cate1=@{cate1title1}}}{{cont1=@{cate1cont1}}}{{cate2=@{cate1title2}}}{{cont2=@{cate1cont2}}}{{desc=@{cate1desc}}}"></button> <input type="text" id="big-input15" style="width: 216.67px;" name="attr_cate1name" placeholder="이름"> </div> <div class="sheet-hori10"> <input type="text" id="big-input14" style="width: 54.17px;" name="attr_cate1title1" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 52.17px;" name="attr_cate1cont1" value="" placeholder="-"> <input type="text" id="big-input14" style="width: 54.17px;" name="attr_cate1title2" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 52.17px;" name="attr_cate1cont2" value="" placeholder="-"> </div> <textarea name="attr_cate1desc" style="width: 234.67px; height: 40px;" placeholder="설명"></textarea> </div> </fieldset> </div> <div class="sheet-category2"> <input type="text" id="big-input18" style="width: 246.67px;" name="attr_category2title" value="◈"> <fieldset class="repeating_cate2"> <div class="sheet-cate2-item"> <div class="sheet-hori10"> <button class="sheet-diceblack" type="roll" value="&{template:AllUseTableRoll}{{title=@{category2title}}}{{name=@{cate2name}}}{{cate1=@{cate2title1}}}{{cont1=@{cate2cont1}}}{{cate2=@{cate2title2}}}{{cont2=@{cate2cont2}}}{{desc=@{cate2desc}}}"></button> <input type="text" id="big-input15" style="width: 216.67px;" name="attr_cate2name" placeholder="이름"> </div> <div class="sheet-hori10"> <input type="text" id="big-input14" style="width: 54.17px;" name="attr_cate2title1" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 52.17px;" name="attr_cate2cont1" value="" placeholder="-"> <input type="text" id="big-input14" style="width: 54.17px;" name="attr_cate2title2" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 52.17px;" name="attr_cate2cont2" value="" placeholder="-"> </div> <textarea name="attr_cate2desc" style="width: 234.67px; height: 40px;" placeholder="설명"></textarea> </div> </fieldset> </div> <div class="sheet-category3"> <input type="text" id="big-input18" style="width: 246.67px;" name="attr_category3title" value="◈"> <fieldset class="repeating_cate3"> <div class="sheet-cate3-item"> <div class="sheet-hori10"> <button class="sheet-diceblack" type="roll" value="&{template:AllUseTableRoll}{{title=@{category3title}}}{{name=@{cate3name}}}{{cate1=@{cate3title1}}}{{cont1=@{cate3cont1}}}{{cate2=@{cate3title2}}}{{cont2=@{cate3cont2}}}{{desc=@{cate3desc}}}"></button> <input type="text" id="big-input15" style="width: 216.67px;" name="attr_cate3name" placeholder="이름"> </div> <div class="sheet-hori10"> <input type="text" id="big-input14" style="width: 54.17px;" name="attr_cate3title1" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 52.17px;" name="attr_cate3cont1" value="" placeholder="-"> <input type="text" id="big-input14" style="width: 54.17px;" name="attr_cate3title2" value="" placeholder="-"> <input type="text" id="small-input14" style="width: 52.17px;" name="attr_cate3cont2" value="" placeholder="-"> </div> <textarea name="attr_cate3desc" style="width: 234.67px; height: 40px;" placeholder="설명"></textarea> </div> </fieldset> </div> </div> </div> <div id="hr-font">◆</div> <textarea name="attr_memo" style="width: 748px; height: 100px;" placeholder="메모"></textarea> <div class="sheet-tail"> <div>ALL-PURPOSE CUSTOM SHEET</div> <div>MADE BY LARFIK</div> </div> </div>  <script type="text/worker"> //시트탭 const buttonlist = ["catebox1","catebox2", "catebox3", "catebox4"]; buttonlist.forEach(button => { on(`clicked:${button}`, function() { setAttrs({ sheetLayout: button }); }); }); </script>  <rolltemplate class="sheet-rolltemplate-AllUseDiceRoll"> <div class="sheet-container"> <img src="https://imgur.com/nIc6vZA.png"> <div class="sheet-dice-title">DICE</div> <div class="sheet-dice-name">{{name}}</div> <div class="sheet-dice-num">{{roll}}</div> </div> </rolltemplate> <rolltemplate class="sheet-rolltemplate-AllUseTableRoll"> <div class="sheet-container"> <div class="sheet-dice-title">{{title}}</div> <div class="sheet-dice-name">{{name}}</div> <div class="sheet-cate"> <div class="sheet-hori5"> <div class="sheet-dice-cate">{{cate1}}</div> <div class="sheet-dice-cont">{{cont1}}</div> </div> <div class="sheet-hori5"> <div class="sheet-dice-cate">{{cate2}}</div> <div class="sheet-dice-cont">{{cont2}}</div> </div> </div> <div class="sheet-dice-desc">{{desc}}</div> </div> </rolltemplate>

CSS: @font-face { font-family: 'NanumSquareNeo-Variable'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2'); font-weight: normal; font-style: normal; } select, button {width: auto; padding: 0px; background:transparent; box-shadow:none; border:none; margin: 0; border-radius: 0; font-family: 'NanumSquareNeo-Variable';} input, input:disabled {width: auto; padding: 1px 0px; background:transparent; box-shadow:none; border:none; margin: 0; border-radius: 0; font-family: 'NanumSquareNeo-Variable';} .repcontrol > button {background:transparent; font-size: 10px; box-shadow:none; border:none; margin: 0; color: #010101; font-family:'NanumSquareNeo-Variable'} .repcontrol > button:hover {background:transparent; font-size: 10px; font-weight: 700; box-shadow:none; border:none; margin: 0; color: #010101;} textarea{ padding: 5px; background: transparent; border: 1px solid #010101; color: #010101; border-radius: 5px; font-size: 12px; } /* ------------------ 주사위 ----------------------- */ .sheet-wrap button[type="roll"].sheet-diceblack:before{ content: ' '; } .sheet-wrap button[type="roll"].sheet-diceblack{ background-image: url("https://imgur.com/nIc6vZA.png"); background-size: 20px 20px; background-repeat: no-repeat; width: 20px; height: 20px; box-shadow: none; border: none; background-color: transparent; background-position: 0; margin: 0px; } .sheet-wrap button[type="roll"].sheet-diceblack:hover{ background-position: 0; background-image: url("https://imgur.com/UIVoddS.png"); } /* ------------------ //주사위 ----------------------- */ /*Configure the tab buttons*/ .charsheet .sheet-catebox1, .charsheet .sheet-catebox2, .charsheet .sheet-catebox3, .charsheet .sheet-catebox4 {display: none;} /* show the selected tab */ .charsheet .sheet-tabstoggle[value="catebox1"] ~ .sheet-catebox1, .charsheet .sheet-tabstoggle[value="catebox2"] ~ .sheet-catebox2, .charsheet .sheet-tabstoggle[value="catebox3"] ~ .sheet-catebox3, .charsheet .sheet-tabstoggle[value="catebox4"] ~ .sheet-catebox4 {display: flex;} /* ------------------ 공통 폰트 ----------------------- */ #small-title12{font-weight: 700; font-size: 12px; font-weight: 700; color: #010101;} #name-input25 {color: #FEFEFE; font-size: 25px; text-align: center; font-weight: 800;} #name-input12 {color: #FEFEFE; font-size: 12px; text-align: center;} #big-input12 {color: #010101; font-weight: 700; font-size: 12px;} #big-input14 {color: #010101; text-align: right; font-weight: 700; font-size: 14px;} #big-input15 {color: #010101; font-weight: 700; font-size: 15px;} #big-input16 {color: #010101; font-weight: 700; font-size: 16px;} #big-input18 {color: #FEFEFE; padding: 8px 0px; text-align: center; font-weight: 700; font-size: 18px; background:#010101;} #small-input14 {color: #010101; text-align: center; font-size: 14px; border-radius: 3px; border: 1px solid #010101;} #small-input15 {color: #010101; font-size: 15px; border-bottom: 1px solid #010101;} #small-input12 {color: #010101; font-size: 12px;} #num-input15{color: #010101; font-size: 15px; text-align: center;} #num-input12{color: #010101; border-bottom: 1px solid #010101; font-size: 12px; text-align: center;} /* ------------------ //공통 폰트 ----------------------- */ /* ------------------ 정렬 ----------------------- */ .sheet-verti5, .sheet-head, .sheet-ch-col1 .repcontainer, .sheet-chinfo2-item, .sheet-ch-col3 .repcontainer, .sheet-category1 .repcontainer, .sheet-cate1-item, .sheet-category2 .repcontainer, .sheet-cate2-item, .sheet-category3 .repcontainer, .sheet-cate3-item{ display: flex; flex-direction: column; align-items: center; gap: 5px; flex: none; } .sheet-verti10, .sheet-ch-col1, .sheet-ch-col3, .sheet-ch-col2 .repcontainer, .sheet-category1, .sheet-category2, .sheet-category3{ display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; } .sheet-verti15, .sheet-ch-col2{ display: flex; flex-direction: column; align-items: center; gap: 15px; flex: none; } .sheet-hori5, .sheet-chinfo1-item, .sheet-chinfo3-item{ display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 0px; gap: 5px; flex: none; } .sheet-hori10, .sheet-categorylayout{ display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 0px; gap: 10px; flex: none; } /* ------------------ //정렬 ----------------------- */ .sheet-wrap{ display: flex; flex-direction: column; align-items: center; padding: 0px 0px 20px; gap: 15px; position: relative; width: 800px; background: #FEFEFE; border: 2px solid #010101; font-family: 'NanumSquareNeo-Variable'; color: #010101;/* 전체 폰트색 */ } #hr-font {font-size: 15px; color: #010101;} .sheet-head{ padding: 10px 0px; align-self: stretch; background: #010101; } .sheet-charea{ display: flex; flex-direction: row; justify-content: center; align-items: flex-start; padding: 0px 20px; gap: 20px; width: 760px; align-self: stretch; } .sheet-ch-col1{ width: 150px; } .sheet-ch-col1 img{width: 150px; height: auto; object-fit: contain;} .sheet-ch-col2, .sheet-ch-col3{ width: 285px; } .sheet-categorylayout button{ width: 15px; height: 15px; opacity: 0.2; } .sheet-categorylayout button:hover{ opacity: 1; } .sheet-catebox1, .sheet-catebox2, .sheet-catebox3, .sheet-catebox4{ display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0px; gap: 15px; align-self: stretch; } .sheet-cateboxrow{ display: flex; flex-direction: row; justify-content: center; align-items: flex-start; padding: 0px 20px; gap: 10px; align-self: stretch; } .sheet-tail{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0px 20px; gap: 5px; align-self: stretch; font-size: 10px; text-align: center; } /* ------------------ 주사위 ----------------------- */ .sheet-rolltemplate-AllUseDiceRoll>.sheet-container, .sheet-rolltemplate-AllUseTableRoll>.sheet-container{ display: flex; flex-direction: column; align-items: center; padding: 15px 0px; gap: 10px; background: #FEFEFE; width: 200px; border: 2px solid #010101; } .sheet-rolltemplate-AllUseDiceRoll>.sheet-container img{width: 20px; height: auto; object-fit: contain;} .sheet-rolltemplate-AllUseDiceRoll>.sheet-container .sheet-dice-title, .sheet-rolltemplate-AllUseTableRoll>.sheet-container .sheet-dice-title{ padding: 10px 0px; width: 200px; background: #010101; font-weight: 700; font-size: 18px; color: #FEFEFE; font-family: 'NanumSquareNeo-Variable'; text-align: center; } .sheet-rolltemplate-AllUseDiceRoll>.sheet-container .sheet-dice-name, .sheet-rolltemplate-AllUseTableRoll>.sheet-container .sheet-dice-name{ font-size: 18px; font-weight: 700; font-family: 'NanumSquareNeo-Variable'; text-align: center; color: #010101; } .sheet-rolltemplate-AllUseDiceRoll>.sheet-container .sheet-dice-num{ margin: 10px 0px 0px; } .sheet-rolltemplate-AllUseDiceRoll>.sheet-container .sheet-dice-num .inlinerollresult {margin: 0px; padding: 0px; background: transparent; border: none; color: #010101; font-weight: 700; font-family: 'NanumSquareNeo-Variable'; font-size: 32px;} .sheet-rolltemplate-AllUseTableRoll>.sheet-container .sheet-cate { display: flex; flex-direction: column; align-items: flex-start; padding: 0px; gap: 5px; } .sheet-rolltemplate-AllUseTableRoll>.sheet-container .sheet-cate .sheet-hori5{ display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 0px; gap: 5px; } .sheet-rolltemplate-AllUseTableRoll>.sheet-container .sheet-cate .sheet-hori5 .sheet-dice-cate{ width: 60px; text-align: center; font-family: 'NanumSquareNeo-Variable'; font-size: 12px; font-weight: 700; } .sheet-rolltemplate-AllUseTableRoll>.sheet-container .sheet-cate .sheet-hori5 .sheet-dice-cont{ width: 80px; text-align: center; font-family: 'NanumSquareNeo-Variable'; font-size: 12px; } .sheet-rolltemplate-AllUseTableRoll>.sheet-container .sheet-dice-desc{ display: flex; flex-direction: row; align-items: flex-start; width: 170px; padding: 5px; border: 1px solid #010101; border-radius: 5px; }