Cygnus9

라이선스

이 테마는 SCP-Sigma-9 기반으로, CC BY-SA 3.0 라이선스 하에 배포됩니다.

Used Components

最小化された検索バー by Dr Devan

Top Bar Menu by stormbreath

Top Bar Menu design Heavily Inspired by Black Highlighter Theme

Black Highligher Style Tabs from Flopstyle CSS by Lt Flops

Footnote and Page Option design by Black Highlighter Theme

Modal design from クレジット付き評価モジュール by SCP-JP members

소개

안녕.

사용법

[[include :smlt:denev:cygnus9]]

이 테마는 지극히 개인적인 용도로 제작되었습니다. 갑자기 작동을 멈추거나 디자인이 바뀔 수 있습니다. 사용 전 그 점을 고려해주세요.

예시

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

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

+ 제목

탭뷰입니다.

인용 블록입니다. 문장 처음에 ">"를 붙여서 만들 수 있습니다.
다른 텍스트

요건 수평줄

블록 속의 블록

그리고 또 하나¹

이건	표입니다
어떤 식으로	만드는 건진
다 아시죠

소스코드

+ 코드 보이기

- 코드 숨기기

@charset "utf-8";
 
@import url("https://use.typekit.net/rit0pba.css");@import url("https://fonts.googleapis.com/css?family=Poppins:600,800|Space+Mono:400,400i,700,700i&display=swap&subset=latin-ext");
 
@font-face{font-family:NanumBarunGothic;font-style:normal;font-weight:400;font-display:swap;src:local('나눔바른고딕'),url(https://tistory1.daumcdn.net/tistory/3180661/skin/images/NBG.woff2) format('woff2'),url(https://tistory1.daumcdn.net/tistory/3180661/skin/images/NBG.woff) format('woff')}@font-face{font-family:NanumBarunGothic;font-style:normal;font-weight:600;font-display:swap;src:local('나눔바른고딕 Bold'),url(https://tistory1.daumcdn.net/tistory/3180661/skin/images/NBGBold.woff2) format('woff2'),url(https://tistory1.daumcdn.net/tistory/3180661/skin/images/NBGBold.woff) format('woff')}@font-face{font-family:NanumBarunGothic;font-style:normal;font-weight:300;font-display:swap;src:local('나눔바른고딕 Light'),url(https://tistory1.daumcdn.net/tistory/3180661/skin/images/NBGLight.woff2) format('woff2'),url(https://tistory1.daumcdn.net/tistory/3180661/skin/images/NBGLight.woff) format('woff')}
 
body {
font-family: proxima-nova, verdana, NanumBarunGothic, arial, helvetica, sans-serif;
font-size: .8213rem;
}
 
h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', "Trebuchet MS", Trebuchet, Verdana, NanumBarunGothic, Arial, Helvetica, sans-serif;
}
 
tt, pre, code, .code {
font-family: 'Space Mono', 'Andale Mono', 'Courier New', "Nanum Gothic Coding", Courier, monospace;
}
 
hr {
    margin: 1em 0;
    border-top: .063rem solid #aaa;
}
 
#header, #top-bar {
    font-weight: 600;
}
 
#header h1 a {
    font-family: 'Poppins', BauhausLTDemi, NanumBarunGothic, Arial, sans-serif;
}
 
#page-title {
    color: #0c0c0c;
    font-weight: 600;
}
 
.page-rate-widget-box .rate-points {
    text-transform: uppercase;
}
 
.page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a {
    padding: 0 5px;
    margin: 0;
}
 
.page-rate-widget-box .rateup a:hover {
    background: #00c800;
}
 
.page-rate-widget-box .ratedown a:hover {
    background: #c80000;
}
 
#account-options {
    width: inherit;
    text-align: center;
    box-shadow: 0 2px 6px rgba(102, 0, 0, .5);
    border: #333 solid 1px;
    border-radius: 5px 0 5px 5px;
}
 
#login-status li a {
    background-color: whitesmoke;
    margin: 1rem;
    padding: .5rem 5px;
    border-radius: 5px;
    text-align: left;
}
 
#login-status li a:hover {
    text-decoration: none;
    background-color: #dedede;
}
 
#account-options li a {
    padding-right: 10px;
}
 
#login-status a::before {
    margin: 0 5px;
    font-family: FontAwesome;
}
 
#login-status li:nth-child(1) a:before {
    content: "\f200";
}
 
#login-status li:nth-child(2) a:before {
    content: "\f0e0";
}
 
#login-status li:nth-child(3) a:before {
    content: "\f0e8";
}
 
#login-status li:nth-child(4) a:before {
    content: "\f013";
}
 
#login-status li:nth-child(5) a:before {
    content: "\f062";
}
 
#login-status li:nth-child(6) a:before {
    content: "\f08b";
}
 
#top-bar ul li a {
    font-weight: 600;
}
#top-bar ul li ul li a {
    font-weight: 400;
}
 
div#extra-div-1 {
    height: 21px;
    width: 100%;
    top: 138px;
    position: absolute;
    background-color: #47474d;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    z-index: 1;
}
 
#top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a {
    padding-top: .5rem;
    padding-bottom: .5rem;
}
 
#side-bar .heading {
    background-color: rgba(0,0,0,.1);
    text-align: center;
    padding-left: 0;
    border-bottom: none;
}
 
#side-bar .collapsible-block-unfolded-link {
    background-color: rgba(0,0,0,.1);
    border-bottom: none;
    text-align: center;
}
 
#side-bar .collapsible-block-unfolded-link > .collapsible-block-link {
    margin-left: 0 !important;
}
 
.page-rate-widget-box {
    margin-bottom: 13px;
    margin-right: 0;
}
 
/* ---- YUI TAB BASE ---- */
.yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{background-color:inherit;background-image:inherit}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:inherit;text-decoration:inherit}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{color:inherit;background:inherit}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{border-color:inherit}.yui-navset li{line-height:inherit}
 
/* ---- YUI TAB CUSTOMIZATION ----
 * Adapted From Black Highlighter Theme Dev
**/
 .yui-navset *{
     transition:
                  color 80ms cubic-bezier(.4, 0, .2, 1),
       background-color 80ms cubic-bezier(.4, 0, .2, 1);
}
 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav{
     display: flex;
     flex-wrap: wrap;
     width: calc(100% - .125rem);
     margin: 0 auto;
 
     border-color: hsl(360, 94%, 20%);
     box-shadow: 0 calc(.0625rem * 5) 0 0 hsl(360, 94%, 20%);
}
 .yui-navset .yui-nav a, /* ---- Link Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav a{
     color: hsl(0, 0%, 5%);
    /* ---- Tab Background Colour | [UNSELECTED] ---- */
     background-color: hsl(0, 0%, 99%);
    /* -------- */
     background-image: none;
     border: unset;
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
     color: hsl(0, 0%, 96%);
    /* ---- Tab Background Colour | [HOVER] ---- */
     background-color: hsl(360, 100%, 27%);
    /* -------- */
}
 .yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav li{
     position: relative;
     display: flex;
     flex-grow: 2;
     max-width: 100%;
     margin: 0;
     padding: 0;
 
     background-color: hsl(0, 0%, 96%);
     border-color: transparent;
     box-shadow: 0 0 0 .0625rem hsl(360, 94%, 20%);
}
 .yui-navset .yui-nav li a,
 .yui-navset-top .yui-nav li a,
 .yui-navset-bottom .yui-nav li a{
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
}
 .yui-navset .yui-nav li em{
     border: unset;
}
 .yui-navset .yui-nav a em,
 .yui-navset .yui-navset-top .yui-nav a em{
     padding: .35em .75em;
 
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
}
 .yui-navset .yui-nav .selected, /* ---- Selection Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav .selected{
     flex-grow: 2;
     margin: 0;
     padding: 0;
 
    /* ---- Tab Background Colour | [SELECTED] ---- */
     background-color: hsl(360, 94%, 20%);
    /* -------- */
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a em{
     border: hsl(360, 94%, 20%);
}
 .yui-navset .yui-nav .selected a{
     width: 100%;
 
     color: hsl(0, 0%, 96%) !important;
     background-image: none;
}
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:active{
     color: hsl(0, 0%, 96%);
     background-color: hsl(360, 94%, 20%);
}
 .yui-navset .yui-nav .selected a:hover{
     cursor: default;
}
 .yui-navset-left .yui-content{
    /* ---- Content Background ---- */
     background-color: hsl(0, 0%, 99%);
    /* -------- */
}
 .yui-navset .yui-content,
 .yui-navset .yui-navset-top .yui-content{
     padding: .5em;
     border-color: hsl(0, 0%, 60%);
}
 
.owindow {
    background: #fefefe;
    background: linear-gradient(#fefefe 51px,#fefefe);
    border: #333 solid 1px;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(102, 0, 0, .5);
}
 
.owindow .title {
    background-color: #eee;
    border-radius: 5px 5px 0 0;
}
 
#search-top-box-input {
    border: 2px solid #000;
    border-radius: 0;
    background-color: #47474d;
    font-family: inherit;
}
 
#search-top-box-input:hover, #search-top-box-input:focus {
    background-color: #828288;
    border: 2px solid #000;
}
 
#search-top-box-form input[type=submit] {
    border: solid 2px #000;
    border-radius: 0;
    background: #633;
    font-family: inherit;
}
 
#search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus {
    background: #966;
    border: 2px solid #000;
}
 
/* Minimalized Search Bar, Developed by the Wikidot Community */
 
@media (max-width: 479px) {
    #search-top-box input.btn {
        display: none;
    }
    #search-top-box input.text {
        position: absolute;
        right: 0;
        height: 20px;
        width: 24px;
        border-radius: 0;
        background: rgba(255, 255, 255, 0);
        box-shadow: none;
        padding: 2px 0;
        color: rgba(51, 51, 51, 0);
        transition: width .5s, color .5s, background .5s;
        cursor: pointer;
    }
    #search-top-box input.text:focus {
        background-color: #828288;
        color: #fff;
        box-shadow: inset 1px 1px 3px rgba(0,0,0,.8);
    }
    #search-top-box-input {
        margin: 0;
    }
    #search-top-box form {
        width: 24px;
        height: 28px;
    }
    #search-top-box form:hover input.text {
        background: rgba(0, 0, 0, .188);
        border-color: #D7D7D7;
    }
    #search-top-box form:hover input.text:focus {
        background: rgba(255, 255, 255, 1);
    }
    #search-top-box form:focus {
        width: 200px;
    }
    #search-top-box input.text:focus {
        width: 150px;
        padding: 2px 1em;
        color: rgba(51, 51, 51, 1);
        box-shadow: 1px 1px 2px -1px rgba(0, 0, 0, .15) inset;
        border: 1px solid #D7D7D7;
        background: rgba(255, 255, 255, 1);
        cursor: text;
    }
    #search-top-box input.text.empty {
        font-size: 0;
    }
    #search-top-box form:before {
        position: absolute;
        right: 0;
        top: 0;
        font-family: 'FontAwesome', 'Font Awesome 5 Free';
        font-weight: 700;
        font-size: 13px;
        content: '';
        width: 2em;
        height: 2em;
        padding: 0;
        color: #ccc;
        text-align: center;
        background-color: #633;
        border-radius: 0;
        box-shadow: 0 0 2px rgba(0, 0, 0, .2) inset;
        line-height: 25px;
    }
    #search-top-box-input {
        display: block !important;
    }
}
/* FIX */
#breadcrumbs {
     font-weight: 800;
}
 ::-webkit-scrollbar {
     border-radius: .5px;
}
/* TEMP */
.footnotes-footer {
    margin: 1em auto;
    background: rgba(160,160,160,.25);
    border-left: .5em solid #642e2c;
    padding: .15em 1em;
    width: 90%;
}
.footnote-footer {
    margin: .5rem 1.5rem;
}
.page-options-bottom a {
    display: inline-block;
    background-color: #64030f;
    color: #fcfcfc;
    text-decoration: none;
    border: .125rem solid #303034;
    border-radius: .25rem;
    padding: .25rem .5rem;
    margin: .1rem 0;
}
.page-options-bottom a:hover {
    background-color: #303034;
    border: .125rem solid #64030f;
    padding: .25rem .5rem;
}

denev 테마

page revision: 98, last edited: 24 Nov 2020 07:12

Edit Rate (0) Tags Discuss History Files Print Site tools + Options

SMLT Container

The SCP Sandbox by Nerds for Nerds.

라이선스

소개

사용법

예시

제목 1단계

제목 2단계

제목 3단계

제목 4단계

제목 5단계

제목 6단계

소스코드