나블라 스타일 코드

/* 
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: "확보, 격리, 보호";
 
    --text-font: verdana, "Nanum Gothic", arial, helvetica, sans-serif;
    --title-font: 'Unbatang', 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;
    --hlt-opa-link: 0.2;
    --hlt-opa-h1: 0.2;
    --link-bg-style: linear-gradient(transparent 60%, rgba(var(--theme-color),var(--hlt-opa-link)) 60%, rgba(var(--theme-color),var(--hlt-opa-link)) 90%, transparent 90%, transparent 100%);
 
/*
    --drk: 1;
    --left: 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-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;
    z-index: 11;
}
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-family: 'Verdana', sans-serif;
    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(15px);
    -webkit-backdrop-filter: blur(15px);
    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);
    scrollbar-width: none;
}
#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(20px);
    -webkit-backdrop-filter: blur(20px);
    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: linear-gradient(rgba(var(--bg-color), 0.5), rgba(var(--bg-color), 0.5)), linear-gradient(rgba(var(--theme-color), 0.3), rgba(var(--theme-color), 0.3));
    border-radius: 30%;
    color: rgb(var(--theme-color));
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    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));
}
body {
    font-family: var(--text-font);
    overflow-x: hidden;
}
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 >-------- */
div.rate-box-with-credit-button {
    background-color: none;
    border: none;
    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)));
    box-shadow: 2px 2px 5px rgba(0,0,0,.3);
}
:is(div.page-rate-widget-box, div.rate-box-with-credit-button) *:not(.page-rate-widget-box) {
    border: none;
    background: none;
    color: rgb(var(--body-txt-color));
}
 
div.rate-box-with-credit-button p a {
    border-left: none;
    color: inherit;
    padding: 3px 0px;
}
 
.page-rate-widget-box :is(.rate-points, .rateup, .ratedown, .cancel) {
    background-color: transparent;
    border: none;
    color: rgb(var(--body-txt-color));
}
.page-rate-widget-box :is(.rateup, .ratedown, .cancel) a {
    color: rgb(var(--body-txt-color));
}
 
.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;
    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, #side-bar 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, .collection a) {
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
  background-color: transparent;
  transition-property: all;
  transition: 0.2s ease-in-out;
  font-weight: bold;
}
#page-content li a:not(.system-pagestate-ctrl a, .ko-footer a) {
  -webkit-text-decoration-line: none;
          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;
  -webkit-text-decoration-line: none;
          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: none;
    border: none;
    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, .yui-navset .yui-nav .selected a em{
    border: none;
    padding: .35em .75em .15em .75em;
}
.yui-navset .yui-nav .selected a {
    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-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(15px);
    -webkit-backdrop-filter: blur(15px);
}
div.modalbox {
    background: linear-gradient(rgba(var(--alt-bg-color),.7), rgba(var(--alt-bg-color),.5)), linear-gradient(transparent, rgba(var(--theme-color),.5));
    border: none;
    border-radius: 0;
    box-shadow: 3px 3px 13px rgba(0,0,0,.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
 
}
 
/* --------< SIDE BOX >--------*/
.anchor {
    top: calc(var(--top-bar-height) + 10px);
}
.anchor:hover {
    z-index: 11;
}
.sidebox {
    background-color: none;
    background: linear-gradient(90deg, rgba(var(--alt-bg-color), 0.7), rgba(var(--alt-bg-color), 1));
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: none;
    box-shadow: -2px 2px 5px rgba(0,0,0,0.2);
}
 
.tocanchor {
    top: calc(var(--top-bar-height) + 10px);
}
.tocbox {
    background-color: none;
    background: linear-gradient(90deg, rgba(var(--alt-bg-color), 0.9), rgba(var(--alt-bg-color), 0.5));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: none;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
 
.sidebox:before, .tocbox:before {
    color: rgb(var(--theme-color));
    font-family: 'Verdana', sans-serif;
}
 
/* --------< 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-tags span {
    border-top: 1px solid rgba(var(--theme-color-dark),0.5);
}
 
#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;
    text-align: var(--title-align);
}
.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(15px);
    -webkit-backdrop-filter: blur(15px);
    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(--hlt-opa-h1)) 60%, rgba(var(--theme-color),var(--hlt-opa-h1)) 90%, transparent 90%, transparent 100%);
}
 
#login-status {
    z-index: 13;
    right: 10px;
    top: 5px;
}
.owindow .title {
    background-color: rgba(var(--bg-color), 1);
}
 
/* ----<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;
}
 
.inline-diff del {
    background-color: rgba(250, 80, 60, 0.4);
}
.inline-diff ins {
    background-color: rgba(60,80,250,.4);
}
 
.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));
}
 
::-moz-selection {
    background: rgba(var(--theme-color),0.2);
}
 
::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;
}
 
#license-area {
    color: var(--body-txt-color);
}
 
/* ========< MY COMPONENT>======== */
table.wiki-content-table td, 
div.blockquote {
    border: solid rgba(var(--some-border-color),0.5) 1px;
    background-color: rgba(var(--alt-bg-color), 0.1);
}
 
blockquote {
    border-left: solid rgb(var(--theme-color-dark)) 3px;
    background: linear-gradient(90deg, rgba(var(--alt-bg-color),.7),transparent);
}
 
.digit blockquote {
    background: black;
}
 
.box {
    --border-clr: var(--some-border-color);
}
.mini {
    --border-clr: var(--theme-color-dark);
}
.pre-next {
    --border-clr: var(--theme-color-dark);
}
.help {
    border: solid 2px rgb(var(--body-txt-color));
}
.quote {
    --clr: rgb(var(--theme-color-dark));
}
 
.box:not(.quote, .mini, .digit), div.blockquote {
    background-color: rgba(var(--alt-bg-color), 0.15);
}
.paper {
    background-color:rgba(var(--alt-bg-color), 0.35);
}
 
.collapsible-block-unfolded-link:not(.system-pagestate-ctrl div, .collection div), .collapsible-block-folded:not(.system-pagestate-ctrl div, .collection 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:not(.collection div), .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;
    padding: 0.5em 0;
}
#side-bar .collapsible-block-unfolded-link {
    padding: 2px;
}
.colmod-content {
    padding: 0.7em 0;
}
 
.re {
    border-left: rgba(var(--theme-color),0.3) solid 5px;
}
.re p:first-child {
    background: rgba(var(--theme-color-dark),0.1);
}
 
.flex {
    --border-clr: var(--theme-color-dark), .2;
}
 
.accent {
    --bg-clr: rgb(var(--theme-color));
}
.accent a:hover {
    text-decoration: underline !important;
}
div.accent a, span.accent a {
    color: white;
}
 
.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;
}
 
/* --------<Other component Compatibility>-------- */
/* component:info-ayers */
.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;
}
 
/* component:wikimodule */
.collection .collapsible-block-unfolded-link a, .collection .collapsible-block-folded a, .namerow, .titlecolumn {
    color: rgb(var(--body-text-color));
    background-color: rgba(var(--theme-color), .2);
}

설명은 나블라 스타일 참조