사이버 망령 CSS 테마

사이버 망령 테마

평가 모듈:

정보 모듈이 있는 평가 모듈:

정보

하이 헬로 헬로오오오오오오!

사이버 망령 CSS 테마는 romrom이 c_bonefish와 Denevola, 그리고 Navla가 제작한 가장 위대한 골목길 테마를 참고해 만들었습니다. 이 테마는 요주의 웹사이트 연구과, 즉 WoI 연구과와 관련된 글들을 위해 만들어졌습니다.

테마에 사용된 WoI 연구과 로고는 Navla가 제작하였으며, 공개일은 2021.9.20, CC-BY SA 3.0 하에 배포되었습니다.

테마를 적용하기 위해서는 다음과 같은 구문을 페이지 상단에 삽입하세요:

[[include theme:cyber-specter
|alt=0
|subtitle=
]]

테마의 부제를 바꾸기 위해서는 다음과 같은 구문을 페이지 상단에 삽입하세요:

[[include theme:cyber-specter
|alt=1
|subtitle=넣고 싶은 부제를 여기 넣으세요!
]]

페이지 요소

헤더 이미지

+ show block

제목1

제목2

제목3

제목4

제목5

제목6

ㅁㄴㅇㄹ

Link

방문하지 않은 링크 | 방문한 링크

이게 사람이냐? 사이버 망령이지.

WoI 연구과는 인터넷 상에서 변칙성을 기반으로 활동하는 무리, 또는 그들이 활동하는 네트워크 허브에 대처하고 연구 및 감시, 견제하는 역할을 맡고 있다. 모든 네트워크 허브는 Web of Interest, 즉 WoI로 지칭된다.

/*
    Cyber Specter CSS Theme
    [2022 Wikidot Theme]
 
    Created by romrom, inspired by c_bonefish, Denevola and Navla. Sp. Thanks to thd-glasses
    CC BY-SA 3.0
 
    woiwall5.png file is created by romrom, 2022/11/10. CC BY-SA 3.0.
 
   WoI2.png file is created by Navla in 2021.9.20. CC-BY SA 3.0.
*/
 
@import url('https://fonts.googleapis.com/css?family=Do+Hyeon');
 
 :root {
     --header-sub: var(--subtitle-{$alt}, '인터넷 중독자들을 격리하자');
     --subtitle-1: "{$subtitle}";
}
 
/* Header */
div#container-wrap {
    background: url('http://scpkrsandbox.wikidot.com/local--files/woitheme/woiwall5.png') center top repeat-x;
    background-size: 100px;
}
 
#header {
    height: 130px;
    background-image: url('http://scpkrsandbox.wikidot.com/local--files/woitheme/WoI2.png');
    background-position: 3% 40%;
    background-repeat: no-repeat;
    background-size: 140px auto;
}
 
#header h1 a span,
#header h2 span {
    display: none;
}
 
#header h1 {
    max-height: 125px;
}
 
#header h1 a {
    padding-top: 170px;
    color: #FFFFFF;
    font-family: 'Do Hyeon', sans-serif;
    font-size: 45px;
    font-weight: normal;
    letter-spacing: 2px;
    text-shadow: -2px 0 3px #1b5d75, 0 2px 3px  #1b5d75, 2px 0 3px  #1b5d75, 0 -2px 3px  #1b5d75;
}
 
#header h1 a::before {
    display: inline-block;
    position: absolute;
    left: 18%;
    top: 55%;
    content: "WoI 연구과";
}
 
#header h2::after {
    display: inline-block;
    position: absolute;
    top: 65%;
    left: 18%;
    color: #FFFFFF;
    font-family: 'Do Hyeon', sans-serif;
    font-size: 18px;
    text-shadow: -2px 0 3px #1b5d75, 0 2px 3px  #1b5d75, 2px 0 3px  #1b5d75, 0 -2px 3px  #1b5d75;
    letter-spacing: 4px;
 
    content: var(--header-sub);
    line-height: 1.2;
    text-align: left;
}
 
/* Login & Search & Top Bar */
#login-status {
    position: absolute;
    top: 3px;
    z-index: 2;
}
 
#login-status a {
    font-weight: bolder;
}
 
#account-topbutton {
    border-color: #FFFFFF;
}
 
#login-status ul a {
    color: #000000 !important;
}
 
#search-top-box {
    position: absolute;
    top: 70px;
    right: 0;
    width: 250px;
    text-align: right;
    z-index: 1;
}
 
#search-top-box-form {
    display: inline-flex;
}
 
#search-top-box-form > input {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    border-radius: 5px;
}
 
#search-top-box-input {
    background-color: #FAF5FF;
    border: solid 1px #000;
    color: #000;
}
 
#search-top-box-input:hover,
#search-top-box-input:focus {
    box-shadow: inset 1px 1px 5px #4490ab;
    color: #000000 !important;
}
 
#search-top-box-form input[type=submit] {
    padding: 2px 5px;
    background: #81BBD2;
    box-shadow: 0 1px 3px #1b5d75;
    border: solid 1px #1b5d75;
    color: #000000;
    font-size: 90%;
}
 
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
    background: #1A566C;
}
 
#top-bar {
    display: flex;
    justify-content: center;
    top: 140px;
    width: 100%;
    z-index: 20;
}
 
#top-bar a {
    color: #ebeef0;
    background: none;
}
 
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
    background: #227fa3;
    border-color: transparent;
    color: #FCFBF9;
}
 
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
    background: #164152;
}
 
#top-bar ul li ul,
#top-bar ul li ul li ul {
    border-color: rgba(0, 0, 0, .4);
}
 
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
    border-color: rgba(0, 0, 0, .1);
}
 
#top-bar ul li.sfhover ul li ul a,
#top-bar ul li:hover ul li ul a {
    border-top: none;
}
 
.top-bar {
    position: relative;
    margin: 0 auto;
}
.c_topbar_arrow {
    color: #D5D5D5;
}
 
/* Page Elements */
#page-title,
.meta-title {
    color: #205366;
    font-size: 2.1em;
    font-weight: bold;
}
 
#content-wrap {
    margin: 30px auto 0;
}
 
h1, h2, h3, h4, h5, h6 {
    color: #205366;
    font-weight: bold;
}
 
body {
    background-color: #ffffff;
    color: #000000;
}
 
a:link {
    color: #106fb3;
}
 
a:visited {
    color: #4988c4;
    text-decoration: underline;
    text-underline-position:under;
}
 
.hovertip {
    background-color: #FFFFFF !important;
    border: 2px solid #1b5d75 !important;
    color: #000000 !important;
}
 
.scp-image-block {
    background: #f7feff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
 
.scp-image-block .scp-image-caption {
    background: #f7feff;
    border-top: none;
    font-size: 85%;
}
 
.scp-image-block img {
    box-shadow: 0 0 1px black;
}
 
/* ---- SCROLLBAR ---- */
::-webkit-scrollbar {
    width: unset;
    height: unset;
}
 
::-webkit-scrollbar-track {
    background: #B5DCE9;
}
 
::-webkit-scrollbar-thumb {
    background: #1b5d75;
    border: none;
}
 
::-webkit-scrollbar-thumb:hover {
    background: #288AAE;
}
 
textarea::-webkit-scrollbar-track {
    background: #B5DCE9;
}
 
/* Side Bar */
#side-bar {
    background:#FFFFFF !important;
}
 
#side-bar .side-block {
    border: 2px solid #1b5d75;
    box-shadow : 0 2px 6px #1b5d75;
    border-radius: 10px 0;
    background-color: #FFFFFF !important;
}
 
#side-block {
    background: #B5DCE9;
}
 
#side-bar .side-block.media,
#side-bar .side-block.resources {
    background-color: #bfeeff !important;
    border: 2px solid #1b5d75;
    border-radius: 10px 0;
}
 
#side-bar .heading,
#side-bar .collapsible-block-unfolded-link {
    background: #B5DCE9;
    border-bottom: solid 1px #1b5d75;
    color: #0277a1;
}
 
#side-bar .collapsible-block-folded-link .collapsible-block-link:hover,
#side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover {
    color: #867036;
}
 
#side-bar .collapsible-block-folded-link .collapsible-block-link,
#side-bar .collapsible-block-unfolded-link .collapsible-block-link {
    color: #00005B;
}
 
#side-bar .menu-item .image,
#side-bar .collapsible-block-folded,
#side-bar .collapsible-block-unfolded-link .collapsible-block-content .image {
    filter: grayscale(80%);
}
 
#side-bar .collapsible-block-folded a:link {
    filter: grayscale(80%);
}
 
#side-bar a:link {
    color: #47b6de;
}
 
#side-bar a:visited {
    color: #307b96;
}
 
#side-bar a:link:hover,
#side-bar a:visited:hover {
    color: #7E7DB3;
}
 
.scpnet-interwiki-frame {
    filter: invert(1) grayscale(80%) saturate(.8);
}
 
#top-bar .open-menu a {
    border-color: #686680;
    color: #000000;
}
 
/* Tab */
div.yui-navset ul.yui-nav a,
div.yui-navset ul.yui-nav a:hover,
div.yui-navset ul.yui-nav .selected a,
div.yui-navset ul.yui-nav .selected a:hover,
div.yui-navset ul.yui-nav .selected a:focus {
    background: none;
    border: none;
}
 
.yui-navset {
    clear: both;
    margin-bottom: 1em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
 
.yui-navset .yui-nav {
    border: 1px solid gainsboro;
    border-bottom: none;
}
 
.yui-navset .yui-nav li {
    margin-right: 10px !important;
}
 
.yui-navset .yui-nav li:first-child {
    margin-left: 1.5em;
}
 
.yui-navset .yui-nav li a em {
    padding: 10px .75em .25em;
    margin-bottom: -1px;
    background: none;
    border: none;
    border-bottom: 4px solid transparent;
    color: gray;
    transition: .2s;
}
 
.yui-navset .yui-nav li a em:hover {
    background: none;
}
 
.yui-navset .yui-nav .selected a em,
.yui-navset .yui-nav .selected a em:hover {
    padding: 10px .75em .25em;
    background: none;
    border: none;
    border-bottom: 4px solid #356682;
    color: #000;
    font-weight: bold;
}
 
div.yui-navset div.yui-content {
    background: #f5fafc;
    border: 1px solid gainsboro;
}
 
/* Rate Module */
.page-rate-widget-box {
    margin-right: 0;
    border: 2px solid #c1d0d9;
    background: #227fa3;
    box-shadow: none;
}
 
.page-rate-widget-box > span {
    border: none !important;
}
 
.page-rate-widget-box .rate-points {
    background: #227fa3 !important;
    color: #fff !important;
}
 
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background: #227fa3;
}
 
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    color: #fff;
}
 
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
    background-color: #c1d0d9;
    color: #227fa3;
}
 
.page-rate-widget-box .cancel {
    background: #227fa3;
}
 
.page-rate-widget-box .cancel a {
    color: #fff;
    font-weight: bold;
}
 
.page-rate-widget-box .cancel a:hover {
    background: #c1d0d9;
    border-radius: 0;
    color: #227fa3;
}
 
.creditRate {
    margin-right: 0 !important;
}
 
.rate-box-with-credit-button {
    background: #227fa3 !important;
    border: 2px solid #c1d0d9 !important;
    box-shadow: none !important;
}
 
.rate-box-with-credit-button .page-rate-widget-box {
    border: none;
}
 
.creditButton p a {
    border-left: none !important;
    color: #fff !important;
}
 
#page-content .rate-box-with-credit-button .fa-info {
    padding: 3px 0 1px;
}
 
#page-content .rate-box-with-credit-button .fa-info:hover {
    background: #227fa3;
    border-radius: 0 3px 3px 0;
    color: #c1d0d9 !important;
}
 
/* ---- EDITING WINDOWS ---- */
.owindow {
    background-color: #ffffff;
    border-color: #3D3D4D;
}
 
.owindow .modal-header {
    background-color: #ffffff;
}
 
.owindow .modal-body img {
    background-color: #ffffff !important;
    color: #ffffff;
}
 
.owindow .title {
    background-color: #ffffff;
}
 
.owindow a,
.owindow a:visited {
    color: #D0CED9;
}
 
.owindow .active {
    color: #000000;
}
 
.owindow .content.modal-body img {
    background-color: #49495C !important;
}
 
.owindow .button-bar a {
    background-color: #ffffff;
    color: #000000;
}
 
.owindow .button-bar a:hover,
.owindow .button-bar a:focus {
    background-color: #ffffff !important;
    border-color: #ffffff;
    color: #000000;
}
 
table.page-files .highlight {
    background-color: #FFFCFC;
}
 
input.text,
input.text:focus,
input.text:hover {
    background-color: #ffffff !important;
    border-color: #999999;
    color: #000000;
}
 
textarea {
    background-color: #FBFAFC;
    color: #000000;
}
 
.change-textarea-size a {
    background-color: #FBFAFC;
    color: #000000;
}
 
#lock-info {
    background-color: #ffffff;
}
 
/* Blockquote */
blockquote,
div.blockquote {
    background-color: #FDFCFF;
    border-style: dotted;
}
 
/* etc. */
/* Mobile Media Query */
 @media (max-width: 479px) {
     #header {
         background-position: 3% 50%;
         background-size: 80px;
    }
     #header h1 a {
         font-size: 20px;
        text-shadow: -1px 0 2px #1b5d75, 0 1px 2px  #1b5d75, 1px 0 2px  #1b5d75, 0 -1px 2px  #1b5d75;
    }
    #header h1 a::before {
        left: 18%;
        top: 55%;
    }
     #header h2::after {
        top: 65%;
        left: 18%;
        font-size: 14px;
        text-shadow: -1px 0 1px #1b5d75, 0 1px 1px  #1b5d75, 1px 0 1px  #1b5d75, 0 -1px 1px  #1b5d75;
    }
}
/* Small Mobile Media Query */
@media (max-width: 385px) {
  #header {
         background-position: 2% 46%;
         background-size: 78px;
    }
     #header h1 a {
         font-size: 20px;
        text-shadow: -1px 0 2px #1b5d75, 0 1px 2px  #1b5d75, 1px 0 2px  #1b5d75, 0 -1px 2px  #1b5d75;
    }
    #header h1 a::before {
        left: 24%;
        top: 55%;
    }
     #header h2::after {
        top: 65%;
        left: 22%;
        font-size: 14px;
        text-shadow: -1px 0 1px #1b5d75, 0 1px 1px  #1b5d75, 1px 0 1px  #1b5d75, 0 -1px 1px  #1b5d75;
    }
}
/* Note Media Query */
@media (min-width: 386px) and (max-width: 580px) {
      #header {
         background-position: 2% 70%;
         background-size: 80px;
    }
     #header h1 a {
         font-size: 22px;
        text-shadow: -1px 0 2px #1b5d75, 0 1px 2px  #1b5d75, 1px 0 2px  #1b5d75, 0 -1px 2px  #1b5d75;
    }
    #header h1 a::before {
        left: 23%;
        top: 55%;
    }
     #header h2::after {
        top: 65%;
        left: 24%;
        font-size: 14px;
        text-shadow: -1px 0 1px #1b5d75, 0 1px 1px  #1b5d75, 1px 0 1px  #1b5d75, 0 -1px 1px  #1b5d75;
    }
}
/* Mini Tablet Media Query */
@media (min-width: 581px) and (max-width: 768px) {
        #header {
         background-position: 3% 60%;
         background-size: 84px;
    }
     #header h1 a {
         font-size: 22px;
        text-shadow: -1px 0 2px #1b5d75, 0 1px 2px  #1b5d75, 1px 0 2px  #1b5d75, 0 -1px 2px  #1b5d75;
    }
    #header h1 a::before {
        left: 18%;
        top: 55%;
    }
     #header h2::after {
        top: 65%;
        left: 18%;
        font-size: 16px;
        text-shadow: -1px 0 1px #1b5d75, 0 1px 1px  #1b5d75, 1px 0 1px  #1b5d75, 0 -1px 1px  #1b5d75;
    }
}
/* Tablet Media Query */
@media (min-width: 768px) and (max-width: 979px) {
      #header {
         background-position: 6% 60%;
         background-size: 100px;
    }
     #header h1 a {
         font-size: 24px;
        text-shadow: -1px 0 2px #1b5d75, 0 1px 2px  #1b5d75, 1px 0 2px  #1b5d75, 0 -1px 2px  #1b5d75;
    }
    #header h1 a::before {
        left: 18%;
        top: 55%;
    }
     #header h2::after {
        top: 65%;
        left: 18%;
        font-size: 19px;
        text-shadow: -1px 0 1px #1b5d75, 0 1px 1px  #1b5d75, 1px 0 1px  #1b5d75, 0 -1px 1px  #1b5d75;
    }
}

SCP 재단

확보, 격리, 보호

사이버 망령 테마

정보

페이지 요소

제목1

제목2

제목3

제목4

제목5

제목6

Link

사이버 망령 테마

정보

페이지 요소

제목1

제목2

제목3

제목4

제목5

제목6

Link

사이버 망령 테마

정보

페이지 요소

제목1

제목2

제목3

제목4

제목5

제목6

Link

사이버 망령 테마

정보

페이지 요소

제목1

제목2

제목3

제목4

제목5

제목6

Link

사이버 망령 테마

정보

페이지 요소

제목1

제목2

제목3

제목4

제목5

제목6

Link

사이버 망령 테마

정보

페이지 요소

제목1

제목2

제목3

제목4

제목5

제목6

Link

사이버 망령 테마

정보

페이지 요소

제목1

제목2

제목3

제목4

제목5

제목6

Link

사이버 망령 테마

정보

페이지 요소

제목1

제목2

제목3

제목4

제목5