|
|
| 1번째 줄: |
1번째 줄: |
| <div class="evewiki-dark-bg" id="evewiki-novel-body">
| |
| <div class="evewiki-novel-content" id="evewiki-drag-protection">
| |
| <!-- 헤더 -->
| |
| <div class="novel-content-header">
| |
| <span class="evewiki-dark-txt">
| |
| 여기에 제목 입력
| |
| </span>
| |
| </div>
| |
| <div class="novel-content-btn">
| |
| <html><button class="btn btn-secondary tools-btn" id="font-family-pretendard" onclick="pretendard()"><div id="novel-btn-pretendard">고딕</div></button> <button class="btn btn-secondary tools-btn" id="font-family-myeongjo" onclick="myeongjo()"><div id="novel-btn-myeongjo">명조</div></button> <button class="btn btn-secondary tools-btn" id="font-size-up"><div id="novel-btn-up">+</div></button> <button class="btn btn-secondary tools-btn" id="font-size-down"><div id="novel-btn-down">-</div></button></html>
| |
| </div>
| |
| <!-- 헤더 끝 -->
| |
| <!-- 본문 -->
| |
| <div class="novel-content-main" id="novel-content-main">
| |
| 여기에 내용 입력
| |
| </div>
| |
| <!-- 본문 끝 -->
| |
| </div>
| |
| </div>
| |
| <no-comment-streams/>
| |
| <html>
| |
| <style>
| |
| #evewiki-novel-body {
| |
| width: 100%;
| |
| height: 60vh;
| |
| padding: 1.5em 2.5em 1.5em 2.5em;
| |
| background-color: #F5F8FA;
| |
| border-radius: 1.0em;
| |
| border: 1px solid #CCD4E3;
| |
| box-shadow: 0px 4px 20px rgb(0 0 0 / 5%);
| |
| }
| |
| .evewiki-novel-content {
| |
| width: 100%;
| |
| height: calc(60vh - 3.0em);
| |
| }
| |
| /* 드래그 방지입니다. */
| |
| #evewiki-drag-protection {
| |
| -webkit-user-select: none;
| |
| -moz-user-select: none;
| |
| -ms-user-select: none;
| |
| user-select: none;
| |
| }
| |
| /* 헤더입니다. */
| |
| .novel-content-header {
| |
| display: inline-block;
| |
| width: auto;
| |
| height: 40px;
| |
| font-size: 14.0pt;
| |
| text-align: left;
| |
| font-weight: bold;
| |
| }
| |
| .novel-content-btn {
| |
| display: inline-block;
| |
| float: right;
| |
| height: 40px;
| |
| font-size: 14.0pt;
| |
| text-align: left;
| |
| font-weight: bold;
| |
| }
| |
| /* 버튼입니다 */
| |
| #font-family-pretendard, #font-family-myeongjo {
| |
| height: 30px;
| |
| box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
| |
| }
| |
| #font-size-up, #font-size-down {
| |
| width: 30px;
| |
| height: 30px;
| |
| box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
| |
| }
| |
| #novel-btn-pretendard {
| |
| margin: -0.15em 0 0 0;
| |
| font-family: 'Pretendard';
| |
| font-weight: 400;
| |
| }
| |
| #novel-btn-myeongjo {
| |
| margin: -0.15em 0 0 0;
| |
| font-family: 'ChosunSm';
| |
| font-weight: 400;
| |
| }
| |
| #novel-btn-up {
| |
| margin: -0.25em 0 0-0.3em;
| |
| }
| |
| #novel-btn-down {
| |
| margin: -0.25em 0 0-0.25em;
| |
| }
| |
| /* 본문입니다. */
| |
| .novel-content-main {
| |
| width: 100%;
| |
| height: calc(100% - 40px);
| |
| }
| |
| #novel-content-main {
| |
| font-family: 'Pretendard';
| |
| font-size: 14px;
| |
| line-height: 200%;
| |
| word-break: break-all;
| |
| }
| |
| /* 스크롤바입니다. */
| |
| .novel-content-main {
| |
| overflow-x: hidden;
| |
| overflow-y: overlay;
| |
| padding-right: 12.0px;
| |
| }
| |
| /* 스크롤바 영역입니다. */
| |
| .novel-content-main::-webkit-scrollbar {
| |
| width: 12px;
| |
| transition: 250ms;
| |
| }
| |
| /* 스크롤바 막대입니다. */
| |
| .novel-content-main::-webkit-scrollbar-thumb {
| |
| background: #adb5bdb6;
| |
| border-radius: 20px;
| |
| border: 3px solid transparent;
| |
| background-clip: padding-box;
| |
| transition: 250ms;
| |
| }
| |
| /* 스크롤바 배경입니다. */
| |
| .novel-content-main::-webkit-scrollbar-track {
| |
| background: transparent;
| |
| transition: 250ms;
| |
| }
| |
| /* 글꼴 */
| |
| @font-face {
| |
| font-family: 'ChosunSm';
| |
| src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.1/ChosunSm.woff') format('woff');
| |
| font-weight: normal;
| |
| font-style: normal;
| |
| }
| |
| /* 데스크톱(1023px 이하) */
| |
| @media screen and (max-width: 1023px) {
| |
| .title {
| |
| display:none
| |
| }
| |
| }
| |
| /* 모바일(397px 이하) */
| |
| @media screen and (max-width: 397px) {
| |
| .novel-content-main {
| |
| height: calc(100% - 80px);
| |
| }
| |
| .novel-content-header {
| |
| height: 36px;
| |
| }
| |
| .novel-content-btn {
| |
| float: left;
| |
| }
| |
| }
| |
|
| |
|
| /* 다크모드 css */
| |
| body, .Liberty, .dropdown-menu, .dropdown-item, .Liberty .nav-wrapper .navbar .form-inline .btn, .Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-header .nav .nav-item .nav-link.active, .Liberty .content-wrapper .liberty-content .liberty-content-main table.wikitable tr > th, .Liberty .content-wrapper .liberty-content .liberty-content-main table.wikitable tr > td, table.mw_metadata th, .Liberty .content-wrapper .liberty-content .liberty-content-main table.infobox th, #preferences fieldset:not(.prefsection), #preferences div.mw-prefs-buttons, .navbox, .navbox-subgroup, .navbox > tbody > tr:nth-child(even) > .navbox-list {
| |
| background-color: #090A0D;
| |
| color: #FFF;
| |
| }
| |
|
| |
| .liberty-content-header, .liberty-footer, .Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-footer, .Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-header .nav .nav-item, .Liberty .content-wrapper .liberty-content .liberty-content-header, .Liberty .content-wrapper .liberty-footer, .editOptions, html .wikiEditor-ui-toolbar, #pagehistory li.selected, .mw-datatable td, .Liberty .content-wrapper .liberty-content .liberty-content-main table.wikitable tr > td, table.mw_metadata td, .Liberty .content-wrapper .liberty-content .liberty-content-main table.wikitable, .Liberty .content-wrapper .liberty-content .liberty-content-main table.infobox, #preferences, .navbox-list, .dropdown-divider {
| |
| background-color: #2E313D;
| |
| color: #FFF;
| |
| }
| |
|
| |
| .Liberty .content-wrapper .liberty-content .liberty-content-main, .mw-datatable th, .mw-datatable tr:hover td, textarea, .Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-content, div.mw-warning-with-logexcerpt, div.mw-lag-warn-high, div.mw-cascadeprotectedwarning, div#mw-protect-cascadeon {
| |
| background-color: #1B1D25;
| |
| }
| |
| .Liberty .content-wrapper .liberty-content .liberty-content-header .title>h1, .Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-content .live-recent-list .recent-item, caption { color: #DDD; }
| |
|
| |
| .btn-secondary { background: transparent; color: #DDD; }
| |
|
| |
| #pagehistory li { border: 0; }
| |
|
| |
| .Liberty .content-wrapper .liberty-footer, .Liberty .content-wrapper .liberty-content .liberty-content-header, .Liberty .content-wrapper .liberty-content .liberty-content-main, .Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-footer, .Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-content, .Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-header .nav .nav-item, .Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-header .nav .nav-item + .nav-item, .Liberty .content-wrapper .liberty-content .liberty-content-header .content-tools .tools-btn:hover, .Liberty .content-wrapper .liberty-content .liberty-content-header .content-tools .tools-btn:focus, .Liberty .content-wrapper .liberty-content .liberty-content-header .content-tools .tools-btn, .dropdown-menu, .dropdown-divider, .Liberty .content-wrapper .liberty-content .liberty-content-main fieldset, hr, .Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-content .live-recent-list li, .mw-changeslist-legend, .Liberty .content-wrapper .liberty-content .liberty-content-header .content-tools { border-color: #555; }
| |
|
| |
| .flow-post, .Liberty .content-wrapper .liberty-content .liberty-content-main .toc .toctext { color: #DDD; }
| |
| .flow-topic-titlebar { color: #000; }
| |
| .flow-ui-navigationWidget { color: #FFF; }
| |
| .Liberty .content-wrapper .liberty-content .liberty-content-main .toccolours, .Liberty .content-wrapper .liberty-content .liberty-content-main .toc ul, .Liberty .content-wrapper .liberty-content .liberty-content-main .toc li { background-color: #000; }
| |
| .Liberty .content-wrapper .liberty-content .liberty-content-main .toc .toctitle { background-color: #2E313D; }
| |
|
| |
|
| |
| a { color: #EC9F19; }
| |
| a.new { color: #F15F5F; }
| |
| .Liberty .content-wrapper .liberty-content .liberty-content-main .catlinks { background-color: #2E313D; }
| |
|
| |
| .Liberty .nav-wrapper .navbar .form-inline .form-control {
| |
| border: none !important;
| |
| background-color: #090A0D;
| |
| color: #FFF;
| |
| }
| |
|
| |
| #searchGoButton, #mw-searchButton {
| |
| border: none;
| |
| }
| |
|
| |
| .Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-header .nav .nav-item .nav-link.active::before {
| |
| border-bottom-color: #466DFA;
| |
| }
| |
|
| |
| .Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-header .nav .nav-item .nav-link.active::before {
| |
| border: none;
| |
| }
| |
|
| |
| .Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-header .nav .nav-item .nav-link.active {
| |
| background-color: #466DFA;
| |
| }
| |
|
| |
| .nav-wrapper.navbar-fixed-top {
| |
| background: #466DFA;
| |
| }
| |
|
| |
| .evewiki-dark-bg {
| |
| background: #2E313D !important;
| |
| }
| |
| .evewiki-dark-txt {
| |
| color: #FFF !important;
| |
| }
| |
|
| |
| .wikiEditor-ui-toolbar .tabs span.tab a {
| |
| color: #EC9F19 !important;
| |
| }
| |
| .wikiEditor-ui-toolbar .group .label, .wikiEditor-ui-toolbar .page-table th {
| |
| color: #E6E9F3 !important;
| |
| }
| |
| .wikiEditor-ui-toolbar .page-table td {
| |
| color: #FFF !important;
| |
| }
| |
| .wikiEditor-ui-toolbar .section-help .page-table {
| |
| background-color: transparent;
| |
| }
| |
|
| |
| .template-documentation {
| |
| background-color: rgb(162, 253, 207, 0.1) !important;
| |
| }
| |
| </style>
| |
| <script>
| |
| // 글자 크기 조정
| |
| var min = 10;
| |
| var max = 18;
| |
|
| |
| function increaseFontSize() {
| |
| var novelcontentmain = document.getElementById('novel-content-main'),
| |
| currentFontSize = parseFloat(window.getComputedStyle(novelcontentmain, null).fontSize);
| |
|
| |
| if (currentFontSize < max) {
| |
| novelcontentmain.style.fontSize = ++currentFontSize + 'px';
| |
| }
| |
| }
| |
|
| |
| function decreaseFontSize() {
| |
| var novelcontentmain = document.getElementById('novel-content-main'),
| |
| currentFontSize = parseFloat(window.getComputedStyle(novelcontentmain, null).fontSize);
| |
|
| |
| if (currentFontSize > min) {
| |
| novelcontentmain.style.fontSize = --currentFontSize + 'px';
| |
| }
| |
| }
| |
|
| |
| document.querySelector('#font-size-up').addEventListener('click', increaseFontSize);
| |
|
| |
|
| |
| document.querySelector('#font-size-down').addEventListener('click', decreaseFontSize);
| |
|
| |
| // 글꼴 조정
| |
| function pretendard() {
| |
| document.getElementById('novel-content-main').style.fontFamily = 'Pretendard';
| |
| }
| |
| function myeongjo() {
| |
| document.getElementById('novel-content-main').style.fontFamily = 'ChosunSm';
| |
| }
| |
| </script>
| |
| </html>
| |