나블라 스타일

정보

---

제목: 나블라 스타일
저자: Navla

---

작가의 말: 직접 만든 범용 테마 입니다. 커스텀이 쉬우니 많이 주물러 주세요.
∇

---

이게 뭔가요?

1. Navla가 만든 범용 테마 입니다.
2. 그 어떤 연작이나 카논, 요단과 관계없는 순수히 미학적인 테마입니다.
3. 본인이 지금껏 만든 테마를 대체하고 필요한 테마를 쉽게 확장할 심산으로 만들었습니다.
4. 개인적인 취향을 듬쁙 넣어 만들었습니다.
5. 시그마 기반 테마입니다.

특징

1. 가볍다!
2. 이쁘다!
3. 읽기 편하다!
4. 범용성 있다!¹
5. 계속 유지보수 됩니다.(그래서 특정 서식이 조금씩 바뀔 수 있어요. 이점 유의해 주세요)²

디자인 방향성

1. 정갈하고 단정하기
2. 미니멀리즘
3. 글래스모피즘
4. 은은한 그라데이션

포함된 컴포넌트

• 접는 사이드바
• 나블라 컴포넌트
• 나블라의 프라이드 로고
• 이미지 블록 Peppo의 코드가 내장됨. 그냥 표준 이미지 블록을 사용해도 자동으로 Peppo의 코드가 적용됩니다.

호환되는 컴포넌트

• 인포 모듈
• 인포 바
• ACS
• 배경지

---

사용법

다음 코드를 편집창에 붙여 넣어주세요.

[[include :scpko:theme:navla-style]]

사용 가능한 인수는 다음과 같습니다.

• preset=0 : 프리셋을 적용할 수 있습니다.
• flag=pride : 나블라의 프라이드 플래그를 적용할 수 있습니다. 나블라의 프라이드 로고 페이지에서 적용할 수 있는 다른 플래그를 알아보세요.
• tocbox=o : 페이지 좌상단에 목차가 포함된 사이드 박스를 표시합니다. (알파벳 소문자 o입니다.)
• help=o : 나블라 컴포넌트에 존재하는 클래스들을 알려주는 박스가 나타납니다. (역시 알파벳 소문자 o입니다.)

각 인수는 "|"를 이용해 구분해 주어야 합니다.

예시) 나블라 스타일 기반 짭랙 하이라이터 테마에 트랜스 플래그를 적용하려면:
[[include :scpko:theme:navla-style preset=8|flag=trans]]

주요 변수

나블라 스타일 테마는 커스텀이 쉽게 설계되어 있습니다. 여러분은 간단한 변수 재선언을 통해 여러분의 입맞에 따라 마음껏 주무를 수 있습니다.
특히 이 중, 여러분이 손쉽게 만질 수 있는 변수는 다음과 같습니다. 이 외에도 커스텀을 도울 수 있는 정말 다양한 변수들이 있으니, 더 자세한 커스텀 방안에 대하여 이 페이지를 참고해 보세요.

변수 재선언은 다음 코드를 테마 선언 아래에 해주시면 됩니다.

[[module CSS]]
:root:lang(ko) {
--원하는-변수1: 원하는 값;
--원하는-변수2: 원하는 값;
}
[[/module]]

기본적인 변수들은 다음과 같습니다.

:root:lang(ko) {
    --theme-color: 120, 120, 120; /*테마의 하이라이트 색상입니다.*/
    --theme-color-dark: 60, 60, 60; /*더 어두운 하이라이트 색상입니다.*/
    --logo-image: url('https://upload.wikimedia.org/wikipedia/commons/e/ec/SCP_Foundation_%28emblem%29.svg'); /*로고이미지 입니다. #header-extra-div-1의 백그라운드 이미지가 됩니다.*/
    --header-title: "SCP 재단"; /*헤더의 제목 텍스트입니다.*/
    --header-subtitle: "확보, 격리, 보호"; /*헤더의 부제목 텍스트입니다.*/
}

프리셋 및 커스텀

변용이 쉬운 테마이니만큼, 다양한 프리셋을 미리 구비해 두었습니다. 또, 커스텀 하실 때 이것들을 참고하실 수도 있습니다.

[[include :scpko:theme:navla-style preset=n]]

여기서 n 자리에 적절한 숫자를 넣으면 해당 프리셋을 바로 적용할 수 있습니다.

어떤 프리셋이 있는지, 그리고 어떻게 커스텀을 할 수 있는지, 주의사항은 무엇인지 확인하고 싶으시다면, 아래 링크를 참조하세요.

나블라 스타일 테마 프리셋 & 커스텀

---

서식 보기

이미지 블록

수평줄은 하이픈 5개 "------"를 치면 만들어지며, 따로 들어 있는 곳 (인용 블록 등)이 없다면 페이지 전체를 가로지릅니다. 이 글에서 섹션을 나누는 줄은 모두 이 수평줄입니다.

---

제목은 문장 처음에 "+"을 1개부터 6개까지 입력해서 적용할 수 있습니다.

제목들

제목 1단계

제목 2단계

제목 3단계

제목 4단계

제목 5단계

제목 6단계

탭 뷰

탭 뷰입니다.

탭 뷰

봐요, 글자 더 있음.

대단하죠.

긴 탭

긴 탭입니다. 많은 글자가 들어가죠.

긴 탭입니다. 많은 글자가 들어가죠.

긴 탭입니다. 많은 글자가 들어가죠.

긴 탭입니다. 많은 글자가 들어가죠.

긴 탭입니다. 많은 글자가 들어가죠.

긴 탭입니다. 많은 글자가 들어가죠.

긴 탭입니다. 많은 글자가 들어가죠.

긴 탭입니다. 많은 글자가 들어가죠.

긴 탭입니다. 많은 글자가 들어가죠.

긴 탭입니다. 많은 글자가 들어가죠.

긴 탭입니다. 많은 글자가 들어가죠.

긴 탭입니다. 많은 글자가 들어가죠.

빈 탭

무지무지 이름이 긴 탭인데요 얼마나 더 길어질까요?

빈 탭

빈 탭

빈 탭

빈 탭

오늘 승리의 여신은 나에게만 입맞춤해

이것은 인용구입니다. 그리고! [[div class="blockquote"]]로 선언한 인용구와 줄의 시작에 ">"를 넣어 만드는 인용구는 여기서 다른 서식으로 작용합니다. 전자는 긴 글을 위한 인용구 서식, 후자는 강조를 위한 서식입니다. 지금 이 블록은 전자입니다.

---

둘의 차이점을 한번 볼까요?

긴 글을 묶기 편한 적은 집중도의 인용구입니다.
묶고자 하는 단락의 윗줄에 [[div class="blockquote"]]를,
그리고 그 아랫줄에 [[/div]]를 달아주면 긴 글 앞에 ">"를 찍는 노가다 없이도 쉽게 인용구를 만들 수 있습니다.

다중 인용구도 가능합니다!

그리고 이것이 줄의 앞에 >를 달아 만든 간편한 인용구입니다.
빠르고 편하게 짧은 단락을 강조할 때 쓰기 편합니다.

역시 다중 인용구도 가능합니다!³

펄서는 J. 벨과 A. 휴이시[1]가 처음 관찰했다. 다른 참조는 [2를 참고].

Bibliography

1. Bell, J.; Hewish, A.; Pilkington, J. D. H.; Scott, P. F.; and Collins, R. A. Observation of a Rapidly Pulsating Radio Source. Nature 217, 709, 1968.

2. Guy, R. K. Modular Difference Sets and Error Correcting Codes. §C10 in Unsolved Problems in Number Theory, 2nd ed. New York: Springer-Verlag, pp. 118-121, 1994.

이것은	표
만드는 법은	이미 아실 거라
생각합니다

링크 : 링크 서식
링크링크 : 방문한 링크 서식
젤다 : 존재하지 않는 링크 서식

사이드박스 추가

바로 이것입니다!

사이드 박스가 뭐냐고요? 오른쪽에 박스에 손을 대 보세요.
워데나즈의 것과 비슷해 보이지만… 그냥 제가 새로 만들었습니다.

[[div class="limit"]] <— 앵커의 시작 한계를 설정
[[div class="anchor"]] <— 사이드박스가 고정될 위치를 설정
[[div class="sidebox"]]
사이드박스에 들어갈 내용
[[/div]]
[[/div]]

사이드박스가 스크롤해 지나갈 내용

[[/div]] <— 앵커의 종료 한계를 설정

이 코드로 사용할 수 있습니다.

나블라 컴포넌트 요소들

나블라 컴포넌트에 설정된 서식들 입니다.

지금 기본 테마 컬러가 무채도라 잘 안보이지만, 몇몇 클래스는 테마 색깔에 따라 서식이 변하게끔 했습니다.
또, 모두 배경색이 꾸안꾸, 스리슬쩍 들어가 있습니다.

범용 텍스트 박스 입니다.

[[div class="box"]]
이 구문으로 이 서식을 불러올 수 있습니다.
[[/div]]

종이질감 텍스트 박스입니다.

[[div class="box-paper"]]
이 구문으로 이 서식을 불러올 수 있습니다.
[[/div]]

미니멀 텍스트 박스입니다.

[[div class="box-mini"]]
이 구문으로 이 서식을 불러올 수 있습니다.
[[/div]]

이미지 텍스트 박스입니다.

[[div class="box-img"]]
이 구문으로 이 서식을 불러올 수 있습니다.
[[/div]]

명언 인용문 입니다 _—나블라

[[div class="box-quote"]]
이 구문으로 이 서식을 불러올 수 있습니다. ,,--나블라,,
[[/div]]

디지털 스타일 박스입니다.

[[div class="box-digit"]]
이 구문으로 이 서식을 불러올 수 있습니다.
[[/div]]

« 이것은 | 연작바 | 입니다 »

[[div class="pre-next"]]
@< 이 구문으로 위 서식을 불러올 수 있습니다. >@
[[/div]]

글래시즈 스타일

^{배너입니다.}

[[div class="glss-banner"]]
+* 이 구문으로
++* 이 서식을 불러올 수 있습니다.
[[/div]]

익명(06542)

이거 머임?

Navla

물론, 댓글 서식 입니다.

Navla

[[div class="re"]]
사용자 이름

이 구문으로 이 서식을 불러올 수 있습니다.
[[/div]]

두 개의 열 구문입니다.

어라? 두 개로 안보이신다고요? 그냥 세로로 쌓인 두 글로 보이신다고요?
모바일 환경에선 가독성 이슈로 가로가 아닌 세로로 쌓이게 됩니다. 폰을 가로로 돌리거나 다른 환경에서 접속해 보세요.

오른쪽(혹은 아래)에 이 서식을 불러올 수 있는 구문이 적혀 있습니다.

[[div class="flex-column"]]
[[div class="flex-1"]]
첫번째 글
[[/div]]
[[div class="flex-2"]]
두번째 글
[[/div]]
[[/div]]

글자 강조 구문입니다.

이렇게 블록을 강조할 수도 있습니다.

[[span class="accent"]]글자 강조[[/span]]

[[div class="accent"]]
블록 강조
[[/div]]
위 구문으로 이 서식을 불러올 수 있습니다.

혹시, 접기 구문에 기본적으로 특정한 서식이 부여되는 게 싫으신가요?
숨겨진 접기 구문을 넣고 싶은데 맘대로 그라데이션과 특수문자가 달려있는 게 싫으시다면, 다음 구문을 이용해 해결할 수 있습니다.

[[div class="no-colstyle"]]

[[collapsible show="+ 수정한 접기" hide="- 수정한 접기"]]
내용
[[/collapsible]]

[[/div]]

이렇게 no-colstyle 이라는 클래스를 가진 div 내에 접기 구문을 두면, 접기 구문에 기본적으로 깔려있던 서식이 사라집니다! 콜랍시블 구문 뿐 아니라, 이중 접기 구문도 해당됩니다!

즉…

일반 접기 열기

내용

이랬던 서식이

수정한 접기 열기

내용

이렇게 바뀝니다.

소스 코드

코드 보이기

/* 
Made by Navla from SCP-KO
2023, enduring a slump in writing.
*/
 
:root:lang(ko) {
    --header-height: 200px;
    --top-bar-height: 25px;
 
    --theme-color: 120, 120, 120;
    --theme-color-dark: 60, 60, 60;
    --body-txt-color: 44, 44, 44;
    --bg-color: 242, 242, 242;
    --logo-image: url('https://upload.wikimedia.org/wikipedia/commons/e/ec/SCP_Foundation_%28emblem%29.svg');
    --header-title: "SCP 재단";
    --header-subtitle: "확보, 격리, 보호";
 
    --title-font: 'Unbatang', sans-serif;
    --logo-size: calc(var(--header-height) - var(--top-bar-height) - 10px);
    --logo-top: 25%;
    --header-txt-color: var(--body-txt-color);
    --title-color: var(--header-txt-color);
    --title-outline: none;
    --title-outline-color: 0,0,0;
    --title-align: center;
    --some-border-color: var(--body-txt-color);
    --link-color: var(--theme-color);
    --link-color-visited: var(--theme-color-dark);
    --h1-top: calc(var(--header-height)/1.2 - 80px);
    --h1-size: calc(var(--header-height)/6 + 10px);
    --h2-top: calc(var(--h1-top) + var(--h1-size)/1.3 + 11px);
    --h2-size: calc(var(--h1-size) * 0.45);
    --top-bar-position: static;
    --tob-bar-justify: center;
    --link-bg-style: linear-gradient(transparent 60%, rgba(var(--theme-color),var(--alt-link-opa,.25)) 60%, rgba(var(--theme-color),var(--alt-link-opa,.25)) 90%, transparent 90%, transparent 100%);
 
/*
    --drk: 1;
    --clrd: 1;
    --left: 1;
    --sticky: 1;
*/
 
    --white: 255, 255, 255;
    --alt-black: calc(var(--drk)*20),calc(var(--drk)*20),calc(var(--drk)*20);
    --alt-bg-color: var(--alt-black,var(--white));
    --alt-link-opa: calc(var(--clrd)*0.12);
    --alt-h1-hlt-opa: calc(var(--clrd)*0.15);
    --alt-title-padding: calc(var(--logo-size) + var(--left)*5px);
}
 
/* ========< RESET >======== */
div#container-wrap {
    background-image: none;
}
input#search-top-box-input {
    display: none;
}
 
/* ========< HEADER >======== */
#header {
    height: var(--header-height);
    padding-bottom: 0;
    background-image: none;
    position: var(--top-bar-position);
    top: calc((var(--header-height) - var(--top-bar-height)) * -1);
    max-width: 100vw;
    margin: 0;
    width: 100%;
    margin-bottom: 15px;
}
div#header-extra-div-1 {
    width: 100%;
    max-width: 708px;
    position: relative;
    margin: 0 auto;
    height: var(--header-height);
    top: 0;
    background: transparent;
    z-index: 4;
    background-image: var(--logo-image);
    background-position: var(--title-align) top var(--logo-top);
    background-size: var(--logo-size);
    background-repeat: no-repeat;
    opacity: 0.2;
}
div#header-extra-div-2 {
    width: 100%;
    right: 0;
    height: var(--header-height);
    position: absolute;
    top: 0;
    background: transparent;
    z-index: 3;
}
 
#header h1, #header h2 {
    max-width: 708px;
    position: relative;
    margin: 0 auto;
    float: none;
    height: 0;
    overflow-x: clip;
}
#header h1 a {
    font-family: var(--title-font), serif;
    z-index: 10;
    padding: 1.875rem 0 0;
    font-family: var(--header-font);
    line-height: 0;
    -webkit-text-decoration: none;
    text-decoration: none;
}
#header h1 a::before, #header h1 a::after, 
#header h2 span::before, #header h2 span::after {
    position: relative;
    left: 0;
    right: 0;
    text-align: var(--title-align);
    margin-left: var(--alt-title-padding, 0);
    padding: 0;
    display: block;
    white-space: nowrap;
}
#header h1 a>span {
    display:none;
}
#header h1 a::before {
    content: var(--header-title);
    color: rgb(var(--title-outline-color));
    z-index: 12;
    -webkit-text-stroke: 0.325rem rgb(var(--title-outline-color));
    text-shadow: none;
    top: var(--h1-top);
    font-size: var(--h1-size);
    display: var(--title-outline);
}
#header h1 a::after {
    content: var(--header-title);
    color: rgb(var(--title-color));
    z-index: 13;
    top: var(--h1-top);
    font-size: var(--h1-size);
    text-shadow: none;
}
#header h2 span {
    color: transparent;
    text-shadow: none;
}
#header h2 span::before {
    content: var(--header-subtitle);
    color: rgb(var(--title-outline-color));
    z-index: 12;
    -webkit-text-stroke: 0.25rem rgb(var(--title-outline-color));
    text-shadow: none;
    top: var(--h2-top);
    font-size: var(--h2-size);
    display: var(--title-outline);
}
#header h2 span::after {
    content: var(--header-subtitle);
    color: rgb(var(--title-color));
    z-index: 13;
    top: var(--h2-top);
    font-size: var(--h2-size);
    text-shadow: none;
}
 
@media all and (max-width: 767px) {
#header h1 a::before {
    top: calc(var(--h1-top) + 2px);
    font-size: calc(var(--h1-size)/1.1);
}
#header h1 a::after {
    top: calc(var(--h1-top) + 2px);
    font-size: calc(var(--h1-size)/1.1);
}
#header h2 span::before {
    top: var(--h2-top);
    font-size: calc(var(--h2-size)/1.1);
}
#header h2 span::after {
    top: var(--h2-top);
    font-size: calc(var(--h2-size)/1.1);
}
}
 
/* --------<searsh & account>-------- */
#search-top-box {
    top: 26px;
    right: 7px;
}
#search-top-box-form input[type=submit] {
    background: rgba(var(--theme-color-dark), .9);
    border-radius: 0;
    color: white;
    box-shadow: none;
}
#search-top-box-form input[type=submit]:hover {
    background: rgba(var(--theme-color), .9);
    box-shadow: none;
}
@media (max-width: 767px) {
#search-top-box-form input[type=submit] {
    height: 25px;
}
#login-status {
    font-size: 0;
    right: 47px;
    height: 30px;
    width: 110px;
    background: transparent;
    white-space: nowrap;
}
#login-status #account-options * {
    color: rgb(var(--body-txt-color)) !important;
    font-size: 15px !important;
}
div#login-status::before {
    display: none;
}
div#login-status:hover::before {
    content: "";
    opacity: 1;
    position: absolute;
    width: 145px;
    height: 30px;
    display: block;
    background: linear-gradient(90deg, rgba(var(--theme-color),0.8), rgba(var(--theme-color-dark),0.7)), black;
    top: 30px;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
}
#login-status::after {
    content: "▼";
    font-size: 1rem;
    position: absolute;
    right: 4px;
    border: solid 1px rgba(var(--header-txt-color),.6);
    top: 2px;
    padding: 0 5px 2px;
    font-size: 13px;
}
#login-status .printuser {
    font-size: 0 !important;
}
#login-status:hover > #account-options {
    display: block !important;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
    background: linear-gradient(rgba(var(--alt-bg-color), 0.7), rgba(var(--alt-bg-color), 0.4)), rgba(var(--theme-color),0.2);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    position: absolute;
    top: 60px;
    right: -35px;
}
#account-options {
    width: 145px;
    border: none;
}
#account-options ul {
    display: flex;
    flex-wrap: wrap;
}
 
#login-status > * {
    top: 35px;
    position: relative;
    font-size: initial;
}
#login-status a {
    margin: 0 3px;
}
a#my-account {
    margin-left: 6px;
}
div#login-status > * {
    display: none;
}
div#login-status:hover > * {
    display: initial;
    font-size: 15px;
}
#login-status > a#account-topbutton, #login-status > script {
    display: none !important;
}
#login-status > a, #login-status > span {
    color: white !important;
}
}
#login-status > a#my-account {
    top: 31px;
}
 
/* --------<top bar>-------- */
#top-bar {
    display: flex;
    max-width: 708px;
    left: 0;
    right: 0;
    top: calc(var(--header-height) - var(--top-bar-height));
    height: var(--top-bar-height);
    z-index: 10;
    position: absolute;
    justify-content: var(--tob-bar-justify);
}
div#header-extra-div-3 {
    width: 100%;
    left: 0;
    right: 0;
    top: calc(var(--header-height) - var(--top-bar-height));
    height: var(  --top-bar-height);
    position: absolute;
    z-index: 4;
}
#top-bar ul li a {
    padding: calc(var(--top-bar-height) /2) 11.5px;
}
#top-bar ul li.sfhover>a, #top-bar ul li:hover>a {
    background: rgb(var(--theme-color-dark)) !important;
    color: #EEE;
    transition: 0.3s;
}
#top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a {
    background: rgb(var(--bg-color)) !important;
    color: rgb(var(--body-txt-color));
}
#top-bar ul li.sfhover ul li.sfhover a {
    background-color: rgb(var(--alt-bg-color)) !important;
    transition: 0.3s;
}
.c_topbar_arrow {
    color: rgb(var(--body-txt-color));
}
#top-bar ul > li:hover > ul, #top-bar ul > li.sfhover > ul {
    opacity: 1;
}
#top-bar ul > li > ul {
    opacity: 0;
    transition: opacity 0.3s;
}
 
@media (min-width: 768px) {
.top-bar {
    display: flex;
}
}
.mobile-top-bar {
    display: flex;
    justify-content: var(--tob-bar-justify);
    width: 100%;
    max-width: 100%;
    right: 0;
    left: 0;
}
#top-bar ul > li > ul {
    flex-direction: column;
}
 
/* ========< SIDE BAR >======== */
div#side-bar {
    background-color: rgba(var(--body-txt-color),.1);
    background: linear-gradient(90deg, rgba(var(--bg-color), .6), rgba(var(--bg-color), .4)), linear-gradient(90deg, rgba(var(--theme-color),.2),transparent);
    z-index: 15;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
}
#side-bar:target .close-menu {
    background: transparent;
    margin-left: 21em;
}
 
div#side-bar::before {
    content: "";
    width: 16.8rem;
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: -18rem;
    transition: left 0.4s ease-in-out;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    z-index: -1;
    height: 100%;
}
div#side-bar:target::before {
    left: 0px;
}
@media (max-width: 767px) {
#side-bar:target {
    border: none;
    z-index:15;
}
#side-bar:target .close-menu {
    margin-left: 19em;
}
div#side-bar::before {
    left: -25em;
    width: 19em;
    transition: left 0.5s ease-in-out 0.1s;
}
}
 
#top-bar .open-menu a {
    bottom: 0.5em;
    border: 5px solid rgb(var(--theme-color));
    background-color: rgba(var(--theme-color-dark), 0.15);
    border-radius: 30%;
    color: rgb(var(--theme-color));
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    top: unset;
}
#side-bar .side-block {
    padding: 10px;
    border: unset;
    border-radius: unset;
    box-shadow: unset;
    background: rgba(var(--alt-bg-color),.4) !important;
    margin-bottom: 15px;
}
#side-bar .heading {
    font-size: 1.2em;
    color: rgb(var(--body-txt-color));
}
#side-bar a:visited {
    color: rgb(var(--link-color-visited));
}
#side-bar::-webkit-scrollbar {
    display: none;
}
 
/* ========< FONT & COLOR >======== */
#login-status, #login-status a, #top-bar a {
    color: rgb(var(--header-txt-color));
}
h1, h2, h3, h4, h5, h6, body {
  color: rgb(var(--body-txt-color));
}
 
h1, h2, h3, h4, h5, h6, #page-title, .meta-title, #side-bar .heading, #interwiki .heading, .f-heading, #header h1 a::before, #header h2::before, .title, .r-heading {
    font-family: var(--title-font);
    font-weight: bold;
}
 
/* ========< MAIN CONTENTS >======== */
/* --------< rate box >-------- */
.rate-box-with-credit-button {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, rgba(var(--theme-color), .1), transparent), linear-gradient(rgba(var(--alt-bg-color),0.5),rgba(var(--alt-bg-color),0.5)), linear-gradient(rgb(var(--bg-color)),rgb(var(--bg-color)));
    box-shadow: 2px 2px 5px rgba(0,0,0,.3) !important;
    height: unset !important;
}
.rate-box-with-credit-button p a {
    color: rgb(var(--body-txt-color)) !important;
    border-left: none !important;
}
.rate-box-with-credit-button .creditButton {
    background-color: unset !important;
    border: unset !important;
    border-radius: unset !important;
    box-shadow: unset !important;
}
.creditButton a {
color: inherit !important;
}
.page-rate-widget-box .rate-points {
    background-color: transparent !important;
    border: none;
    border-right: 0;
    border-radius: 0;
}
.page-rate-widget-box .rate-points {
    color: rgb(var(--body-txt-color)) !important;
}
.page-rate-widget-box .rateup, .page-rate-widget-box .ratedown {
    background-color: transparent;
    border-top: none;
    border-bottom: none;
    font-weight: bold;
}
.page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a {
    background: transparent;
    color: rgb(var(--body-txt-color));
}
.page-rate-widget-box .cancel {
    background-color: transparent;
    border: none;
    border-left: 0;
    border-radius: 0;
}
.page-rate-widget-box .cancel a {
    background: transparent;
    color: rgb(var(--body-txt-color)) !important;
}
.page-rate-widget-box {
    border-radius: 0;
    background: linear-gradient(90deg, rgba(var(--theme-color), .1), transparent), linear-gradient(rgba(var(--alt-bg-color),0.5),rgba(var(--alt-bg-color),0.5)), linear-gradient(rgb(var(--bg-color)),rgb(var(--bg-color)));
    padding: 0.3em 0 !important;
    border-left: solid 3px rgb(var(--theme-color-dark));
    box-shadow: 2px 2px 5px rgba(0,0,0,.3);
}
.rate-box-with-credit-button > .page-rate-widget-box {
    background: transparent !important;
    box-shadow: none !important;
}
.modalbox .modalbox-title {
    background: rgba(var(--bg-color),.4) !important;
}
.modalcontainer {
    height: 350px !important;
    width: 600px !important;
    max-width: 95vw !important;
}
.credit {
    height: 30vh;
    overflow-y: auto;
}
#u-credit-view {
    z-index: 15 !important;
}
 
/* --------< links >-------- */
a {
    color: rgb(var(--link-color));
}
a:visited {
    color: rgb(var(--link-color-visited));
}
 
#page-content a:not(a.fa.fa-info, div.open-menu-btn>p>a, .footnoteref>a, a.bibcite, .system-pagestate-ctrl a, ul.yui-nav>li>a, div#np-editor-panel.wd-editor-toolbar-panel a, .footnoteref>a, a.bibcite, .system-comment-Area a, div.page-rate-widget-box span a, span.printuser.avatarhover>a, .footnoteref>a, a.bibcite, .system-pagestate-ctrl a, .printuser a, .footnote-footer a, .danger-diamond a, .collapsible-block-folded a, .collapsible-block-unfolded-link a, .foldable-list-container a, .ko-footer a, #toc a, .pre-next a, .accent a) {
    background: var(--link-bg-style);
}
#page-content a:not(.system-pagestate-ctrl a, .ko-footer a) {
  text-decoration-line: none;
  color: auto;
  background-color: transparent;
  transition-property: all;
  transition: 0.2s ease-in;
  font-weight: bold;
}
#page-content li a:not(.system-pagestate-ctrl a, .ko-footer a) {
  text-decoration-line: none;
}
#page-content a:hover:not(.system-pagestate-ctrl a, .ko-footer a, .accent a) {
  background: none;
  background-color: rgb(var(--theme-color)) !important;
  color: #FFF;
  text-decoration-line: none;
}
 
/* --------< tab >-------- */
.yui-navset .yui-nav .selected :is(a, a:focus, a:hover) {
    background: rgb(var(--theme-color-dark)) !important;
    color: #fff;
}
.yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a {
    background: transparent;
    border: transparent;
    border-width: 0 1px;
    position: relative;
    text-decoration: none;
    background-image: none;
    color: rgb(var(--body-txt-color));
    font-weight: normal;
}
.yui-navset .yui-nav a em, .yui-navset .yui-navset-top .yui-nav a em {
    border: transparent;
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em {
    border-color: transparent;
}
.yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li {
    margin: 0;
    padding: 0;
}
.yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected {
    margin: 0;
}
.yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav {
    border-color: rgb(var(--theme-color-dark));
    background-color: rgb(var(--alt-bg-color));
}
.yui-navset .yui-nav .selected a em {
    padding: 0.25em .75em;
}
.yui-navset .yui-content {
    background-color: rgba(var(--alt-bg-color),0.2);
    border: 1px solid rgb(var(--some-border-color));
    border-top: none;
}
 
/* --------< info >-------- */
.fader {
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
div.modalbox {
    background: linear-gradient(rgba(var(--alt-bg-color),.45), rgba(var(--alt-bg-color),.8)), linear-gradient(rgba(var(--body-txt-color),0.2), rgba(var(--theme-color),.4));
    border: none;
    border-radius: 0;
    box-shadow: 3px 3px 13px rgba(0,0,0,.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
 
/* --------< SIDE BOX >--------*/
.anchor {
    top: calc(var(--top-bar-height) + 10px);
}
.anchor:hover {
    z-index: 11;
}
.sidebox {
    right: calc(((100vw - 9px - 100%) / 2) * -1);
    background-color: none;
    background: linear-gradient(90deg, rgba(var(--alt-bg-color), 0.5), rgba(var(--alt-bg-color), 0.9));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    box-shadow: -2px 2px 5px rgba(0,0,0,0.2);
}
 
.tocanchor {
    top: calc(var(--top-bar-height) + 10px);
}
.tocbox {
    right: unset;
    left: calc(((100vw - 9px - 100%) / 2) * -1);
    background-color: none;
    background: linear-gradient(90deg, rgba(var(--alt-bg-color), 0.9), rgba(var(--alt-bg-color), 0.5));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
 
.sidebox:before, .tocbox:before {
    color: rgb(var(--theme-color));
}
 
@media all and (max-width: 479px) {
.sidebox {
    right: calc(((100vw - 100%) / 2) * -1);
}
.tocbox {
    right: unset;
    left: calc(((100vw - 100%) / 2) * -1);
}
}
@media (min-width: 1289px) {
.sidebox, .tocbox {
    max-width: calc((100vw - 100%)/2 - 50px) !important;
    padding: 10px;
    margin: 0 10px;
    max-height: 60vh;
    overflow-y: auto;
}
.sidebox::before, .tocbox::before {
    opacity: 0;
}
.sidebox *, .tocbox * {
    opacity: 1;
}
.sidebox:hover, .tocbox:hover {
    max-width: calc((100vw - 100%)/2 - 50px) !important;
    padding: 10px;
    margin: 0 10px;
}
}
 
/* --------< ETC >-------- */
#page-content hr {
    clear: both;
    height: 0;
    border: crimson;
    background-color: transparent;
    border-bottom: rgb(var(--theme-color-dark)) solid 1px;
    border-top: rgb(var(--theme-color)) solid 1px;
}
 
#page-title, .meta-title {
    border-color: rgb(var(--theme-color-dark));
    border-bottom-width: 1.5px;
    text-align: center;
    color: rgb(var(--body-txt-color));
    margin-top: 1em;
    padding: 0 0 0.25em;
    margin: 0 0 0.6em;
}
.meta-title p {
    margin: 0;
}
 
div#extra-div-4 {
    background: linear-gradient(rgba(var(--theme-color-dark),0.1), transparent calc(var(--header-height) + 300px), transparent), linear-gradient(rgba(0,0,0,0.1), transparent calc(var(--header-height) + 300px), transparent);
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: absolute;
    z-index: -10;
}
body {
    background-color: rgb(var(--bg-color));
}
div#extra-div-5 {
    position: fixed;
    top:0;
    right:0;
    left:0;
    bottom:0;
    z-index: -5;
}
 
.hovertip {
    background: rgba(var(--alt-bg-color), 0.5) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: none !important;
    box-shadow: 2px 2px 7px rgba(0,0,0,0.2);
}
.footnote .f-footer, .equation .e-footer, .reference .r-footer {
    display: none;
}
 
table.wiki-content-table th {
    border: 1px solid #222;
    padding: 0.3em 0.7em;
    background-color: rgb(var(--theme-color-dark));
    color: white;
}
 
.scp-image-block .scp-image-caption {
    background-color: rgb(var(--bg-color));
}
 
#main-content h1 span:not(.cool-title, .glss-banner) {
    background: linear-gradient(transparent 60%, rgba(var(--theme-color),var(--alt-h1-hlt-opa,.4)) 60%, rgba(var(--theme-color),var(--alt-h1-hlt-opa,.4)) 90%, transparent 90%, transparent 100%);
}
 
#login-status {
    z-index: 13;
    right: 10px;
    top: 5px;
}
 
/* ----<code>---- */
.code {
    border: 1px solid #AAA;
    background-color: #222;
    color: #DDD;
    word-break: normal;
}
.hl-code {
    color: #DDD;
}
.hl-special {
    color: violet;
}
.hl-identifier {
    color: #AAA;
}
.hl-number {
    color: #E55;
}
.hl-string {
    color: #B7E;
}
.hl-brackets {
    color: #2AF;
}
.hl-reserved {
    color: #88E;
}
.hl-var {
    color: #6C6;
}
.hl-identifier {
    color: #EDA;
}
 
.system-pageconsole>.collapsible-block a.collapsible-block-link, 
.system-comment-Area .foldable-list-container>a {
    color: rgb(var(--body-txt-color)) !important;
}
 
.owindow {
    background-color: rgba(var(--bg-color),1);
    border: none;
    box-shadow: 3px 3px 13px rgba(0,0,0,.3);
}
 
#content-wrap {
    margin: 0 auto;
}
 
@media all and (max-width: 767px) {
#login-status {
    font-size: 0;
    right: 46px;
}
#search-top-box {
    top: 5px;
    right: 7px;
}
.printuser img.small {
    padding: 1px 2px 1px 8px;
}
#account-topbutton {
    display: none;
}
}
 
#toc {
    padding: 0em 1em;
    border: 1px solid rgba(var(--body-txt-color),.5);
    background-color: rgba(var(--alt-bg-color),.3);
}
#toc .title {
    margin: 0.4em 0 0.7em;
    padding: 0 2em 0.3em;
    border-bottom: 1px solid rgb(var(--body-txt-color));
}
 
::-webkit-scrollbar-thumb {
    background-color: rgb(var(--theme-color));
}
 
::selection {
    background: rgba(var(--theme-color),0.2);
}
 
/* --------<comments>---- */
.thread-container .post :is(.head, .short) {
    background-color: transparent;
    background: linear-gradient(90deg, rgba(var(--theme-color),0.6), rgba(var(--theme-color-dark),0.4)), black;
    border-radius: 0;
    color: white;
    box-shadow: 0px 3px 3px rgba(0,0,0,.2);
}
.thread-container .post :is(.head, .short) a {
    color: white !important;
}
div.content {
    padding: 0 10px;
}
.post div.long {
    background-color: rgba(var(--alt-bg-color),0.5);
    box-shadow: 3px 3px 6px rgba(0,0,0,.3);
}
.post.folded div.short {
    padding: 0.5em 1em;
}
.thread-container .post .long .options {
    padding: 0 10px 5px 0;
}
.thread-container .post .options a {
    color: rgb(var(--theme-color));
}
.thread-container .post .long .changes {
    padding: 0 10px;
}
 
#np-title, #np-text, #edit-page-title, #edit-page-textarea, #edit-page-comments, #lock-info {
    background: rgba(var(--alt-bg-color),0.5);
    color: rgb(var(--body-txt-color));
    border: rgba(var(--body-txt-color),0.5) solid 1px;
}
#np-title, #np-text {
    margin: 2px;
}
#lock-info {
    box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
}
 
.units {
    display: flex;
}
 
#page-content {
    margin-top: 15px;
}
 
input#edit-page-title {
    width: 100%;
}
.change-textarea-size {
    float: right;
    text-align: right;
    padding-right: 2em;
    padding-left: 1em;
    margin: 3px;
}
.change-textarea-size a {
    padding: 0 4px;
    border-width: 1px;
}
.info-container .collapsible-block-folded, .info-container .collapsible-block-unfolded-link {
    background: rgb(var(--theme-color-dark)) !important;
    padding: 0 !important;
}
.info-container .collapsible-block-folded .collapsible-block-link, .info-container .collapsible-block-link {
    background-color: white !important;
    width: unset !important;
}
 
#license-area {
    color: var(--body-txt-color);
}
 
/* ========< from component:image-block-peppo >======== */
/* It's PeppersGhost & Stormbreath's code */
/* Aligns image to right edge */
.scp-image-block.block-right {
    margin: 0em 0em 1em 2em;
}
 
/* Visually centers image block */
@media only screen and (max-width: 479px) {
    .scp-image-block.block-right{
        float: none;
        margin: 10px auto;
    }
}
 
/* ========< MY COMPONENT>======== */
 
table.wiki-content-table td, 
div.blockquote:not(div.box-digit div.blockquote) {
    border: solid rgba(var(--some-border-color),0.5) 1px;
    background-color: rgba(var(--alt-bg-color), 0.1);
}
 
blockquote:not(div.box-digit blockquote) {
    border-left: solid rgb(var(--theme-color-dark)) 3px;
    background: linear-gradient(90deg, rgba(var(--alt-bg-color),.7),transparent);
}
 
.box {
    border: solid 2px rgba(var(--some-border-color),.7)
}
.box-mini {
    border-right: solid 3px rgba(var(--theme-color-dark),1);
    border-left: solid 3px rgba(var(--theme-color-dark),1);
}
.box-img {
    border: solid 2px rgba(var(--some-border-color),.7); 
}
.pre-next {
    border-top: rgb(var(--theme-color-dark)) 1.5px solid;
    border-bottom: rgb(var(--theme-color-dark)) 1.5px solid;
}
.help {
border: solid 2px rgb(var(--body-txt-color));
}
.collapsible-block-unfolded-link:not(.system-pagestate-ctrl div), 
.collapsible-block-folded:not(.system-pagestate-ctrl div), 
.colmod-link-top:not(.system-pagestate-ctrl div), 
.unfolded>.colmod-link-end:not(.system-pagestate-ctrl div) {
    padding: 0.5em 1em;
    background: linear-gradient(90deg, rgba(var(--theme-color),.2), transparent);
}
.collapsible-block-content, .colmod-content:not(.system-pagestate-ctrl div) {
    border-top: rgba(var(--theme-color),.7) solid 2px;
    border-bottom: rgba(var(--theme-color),.7) solid 2px;
    margin: 0.5em 0 0.5em 0;
}
#side-bar .collapsible-block-unfolded-link {
    padding: 2px;
}
.colmod-content {
    padding: 0.7em 0;
}
 
.box-quote {
    --clr: rgb(var(--theme-color-dark));
}
 
.box, div.blockquote, .box-img {
    background-color: rgba(var(--alt-bg-color), 0.15);
}
.box-paper {
    background-color:rgba(var(--alt-bg-color), 0.35);
}
.cool-title, .glss-banner :is(h1,h2,h3,h4,h5,h6) {
    font-family: var(--title-font);
}
 
.re {
    border-left: rgba(var(--theme-color),0.3) solid 5px;
}
.re p:first-child {
    background: rgba(var(--theme-color-dark),0.1);
}
 
.flex-column>.flex-1 {
    border-right: solid 1px rgb(var(--theme-color));
}
.flex-column>.flex-2 {
    border-left: solid 1px rgb(var(--theme-color-dark));
}
 
@media (max-width: 479px) {
.flex-column>.flex-1 {
    border-right: none;
    border-bottom: solid 1px rgb(var(--theme-color));
}
.flex-column>.flex-2 {
    border-left: none;
    border-top: solid 1px rgb(var(--theme-color-dark));
}
}
 
.accent {
     --bg-clr: rgb(var(--theme-color));
}
.accent a:hover {
    text-decoration: underline !important;
}
 
.line-title {
    --clr: rgb(var(--theme-color));
}
 
.no-colstyle>div>:is(.collapsible-block-folded, div>.collapsible-block-unfolded-link, ul>li>.colmod-link-top,ul>li>.colmod-link-end) {
  background: none !important;
  margin: 0;
  padding: 0;
}
 
.no-colstyle>div>div>:is(.collapsible-block-link, div>.collapsible-block-link)::before, 
.no-colstyle>div>ul>:is(.folded,.unfolded)>:is(.colmod-link-top, .colmod-link-end)>.foldable-list-container>a:first-child::before {
  content: none !important;
}

[[t{$tocbox}c]]

• nmj: 나눔명조 폰트
• ubt: 은바탕 폰트
• box: 범용 텍스트 박스
• box-img: 이미지 텍스트 박스, style="--img: url("여기에 url입력");"
• box-str: 강조 인용 박스
• box-qoute: 명언 인용 박스
• box-digit: 디지털 박스, style="--clr: 여기에 색상 입력;"
• pre-next: 연작바
• cool-title: 가운데 정렬 타이틀
• glss-banner: 이미지 배너
• re: 댓글
• indent: 들여쓰기
• flex-column (flex-1 flex-2): 비모바일 환경에서 2열 쓰기
  • flex-column-always: 언제나 2열 쓰기
• accent: span 혹은 div 강조
• ntc: 컨텐츠 경고
• line-title: 가로선 제목
• limit (anchor (sidebox)): 사이드박스

컴포넌트 링크

Footnotes

1. 커스텀 하기 쉽다는 뜻!

2. 서식 오류나 건의사항이 있다면 언제든 대화방이나 포스트를 통해 Navla를 찾아주세요.

3. 그리고 이건 각주!