태평양사령부 테마
평가: +3+x



평가: +3+x

사용 방법: 태평양사령부 CSS 테마

  • SCP-987-KO를 위한 전용 테마입니다.
  • 본 테마를 적용할 페이지 최상단에 다음 구문을 삽입하세요.

[[include :scpko:theme:pacom]]

How to use: PACOM CSS THEME

  • This is the original theme for SCP-987-KO.
  • Add the following code on the top of your page.

[[include :scpko:theme:pacom]]

@charset "utf-8";
 
/*
    태평양사령부 CSS 테마
    [2020 Wikidot Theme]
    Edited by thd-glasses.
    Based on Anderson Robotics theme created by Croquembouche, with help from Jacob Conwell and OthellotheCat.
*/
 
/*-----------------------*\
 *   Fonts and Colours   * 
\*-----------------------*/
 
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600|Raleway|Roboto+Mono');
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo');
@import url('https://scpko.wdfiles.com/local--files/unfont/UnJamoBatang.css');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
 
:root {
  --background: #ECECED;
  --main: #000;
  --highlight: #555;
  --hyperlink: #000;
  --hyperlink-visited: #000;
  --padding: 2em;
  --padding-ng: -2em;
}
 
body {
  font-family: 'Roboto Mono','Nanum Myeongjo',sans-serif;
  background: var(--background) url(https://scpko.wdfiles.com/local--files/theme%3Apacom/body_bg.jpg) center -100em repeat;
  -webkit-background-size: 1920px 2500px;
  background-size: 1920px 2500px;
  text-align: justify;
}
textarea[name=source] {
  font-family: 'Roboto Mono',monospace;
}
 
a, a.newpage {
  color: var(--hyperlink);
}
a:visited {
  color: var(--hyperlink-visited);
}
a, a.newpage, a:visited {
  text-decoration: underline;
}
#side-bar a, #side-bar a.newpage, #side-bar a:visited, #breadcrumbs a {
  text-decoration: none;
}
 
.comments-box {
  margin-top: 1.5em;
}
 
::selection {
  background-color: var(--main);
  color: var(--background);
}
 
table.wiki-content-table {
  line-height: 18px;
}
 
.cell {
  border-right: 2px solid var(--main);
  margin: -0.35em 0.6em -0.35em -1em;
  padding: 0.35em 1em 0.35em 0;
  display:inline-block;
  min-width: 60px;
}
 
/*--------------------*\
 *   Titles/Headers   * 
\*--------------------*/
 
h1, h2, h3, h4, h5, h6, #page-title {
  font-family: 'Special Elite', 'UnJamoBatang',sans-serif;
}
h1, #page-title {
  color: #000;
}
#page-title {
  display: block;
  font-size: 2.4em;
  border-bottom: 2px solid var(--main);
  padding: 0 0 0.2em 2.5%;
  width: 97.5%;
  min-height: 39px;
  margin: 0.5em 0 0 0;
}
#breadcrumbs {
  position: absolute;
  top: 1.5em;
  margin-left: 1em;
}
 
#main-content {
  margin: 0 3.3em 0 20em;
  padding: 2em 0 2em 0;
  border-left: 2px solid var(--main);
  border-right: 2px solid var(--main);
}
 
#page-content {
  margin: -0.8em 0 0 0;
  padding: 0 var(--padding) 2em var(--padding);
  border-bottom: 2px solid var(--main);
}
 
#action-area {
  width: 95%;
  padding-left: 3em;
}
 
#footer{
  margin-top: 0px;
}
 
/*------------------*\
 *    Top Header    * 
\*------------------*/
 
div#container-wrap {
  background: url(https://scpko.wdfiles.com/local--files/theme%3Apacom/report_bg.png) 50% 0% no-repeat;
}
 
#header {
  background-image: url(https://scpko.wdfiles.com/local--files/theme%3Apacom/header.png);
  background-position: -5px 0px;
  -webkit-background-size: 233px;
  background-size: 233px;
}
 
#header h1 {
  margin-left: 245px;
}
 
#header h2 {
  margin-left: 245px;
  margin-top: 10px;
}
 
#header h1 a {
  background: transparent;
  font-family: 'Special Elite', 'UnJamoBatang',sans-serif;
  text-decoration: none;
  text-shadow: none;
  letter-spacing: -0.05em;
  font-weight: 400;
  /* hide real header */
  line-height: 0px;
  max-height: 0px;
  color: transparent;
}
#header h1 a::before {
  content: "SCP 태평양사령부"; /* SCP PACIFIC COMMAND */
  color: var(--main);
}
#header h2 span {
  background: transparent;
  font-family: 'Roboto Mono','Nanum Myeongjo',sans-serif;
  text-shadow: none;
  letter-spacing: -0.05em;
  font-weight: 600;
  color: #eee;
  /* hide real header */
  line-height: 0px;
  max-height: 0px;
  color: transparent;
}
#header h2 span::before {
  content: "수신 : ███████ “GORDON” ███ 사령관";
  color: var(--main);
}
 
#search-top-box{
  top: 8.6em;
}
 
#search-top-box-input {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 2px;
  font-family: 'Special Elite', 'Nanum Myeongjo',monospace;
  color: #000;
}
#search-top-box input.empty{
  color: var(--main);
  padding: 2px;
}
#search-top-box-input:hover {
  border: none;
  background: rgba(0, 0, 0, 0);
  color: #000;
}
#search-top-box-input:focus {
  border: none;
  background: rgba(0, 0, 0, 0);
  box-shadow: none;
  color: #000;
}
 
#search-top-box-form input[type=submit] {
  border: solid 2px var(--main);
  color: var(--main);
  background: rgba(0, 0, 0, 0);
  box-shadow: none;
  border-radius: 0;
  font-family: 'Special Elite', 'Nanum Myeongjo',monospace;
}
 
#search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus {
  border: solid 1px var(--main);
  color: var(--highlight);
  background: rgba(0, 0, 0, 0);
}
 
#login-status,#login-status a,#login-status ul a {
  color: var(--main);
  text-decoration: none;
}
 
#top-bar {
  font-size: 1em;
}
 
#top-bar a {
  color: var(--main);
  text-decoration: none;
}
 
#top-bar ul {
  border-left: solid 2px var(--main);
  border-right: solid 2px var(--main);
}
 
#top-bar ul li ul {
  border-left: none;
  border-right: none;
  border-bottom: solid 2px var(--main);
  box-shadow: none;
}
 
#top-bar ul.sfhover a, #top-bar ul:hover a {
  border-left: none;
  border-right: none;
}
 
#top-bar ul li.sfhover a, #top-bar ul li:hover a {
  background: var(--background);
  color: var(--main);
}
 
#top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a {
  border-top: 2px solid var(--main);
}
 
#top-bar ul li.sfhover a:hover, #top-bar ul li:hover a:hover {
  background: var(--background);
  color: var(--highlight);
}
 
#top-bar ul li ul a, #top-bar a:hover {
  color: var(--highlight);
  background: var(--background);
}
 
/*----------------------------------------*\
 *  Height Adjustment for central border  * 
\*----------------------------------------*/
 
#content-wrap {
  margin-top: 0em;
  min-height: 1660px;
}
#side-bar {
  top: 3.5em;
}
 
/*------------------*\
 *     Side Bar     * 
\*------------------*/
 
#side-bar .side-block {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent !important;
  padding: 0;
}
 
#side-bar .side-block img {
  -webkit-filter: grayscale(100%);
  filter: gray;
}
 
#side-bar .side-block img:hover {
  -webkit-filter: grayscale(0%);
  filter: none;
}
 
#side-bar .heading {
  border: none;
  border-radius: 0;
  color: var(--main);
  font-family: 'Special Elite', 'UnJamoBatang',sans-serif;
  font-size: 1.2em;
  padding: 1em 1em 0 0;
  border-top: 2px solid var(--main);
  margin: 1em calc(-1em + 2px) 1em 0;
  font-weight: normal;
}
#side-bar div.menu-item {
  margin: 0;
  font-size: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
#side-bar div.menu-item a {
  font-weight: normal;
  flex: 1;
}
#side-bar .menu-item > img {
  display: none;
}
#side-bar .menu-item > a {
  transition: all 0.1s ease-in-out;
  display: block;
  color: var(--highlight);
  margin: 0;
  padding: 0.4em 0;
  font-size: 12.8px;
}
#side-bar .menu-item > a:hover {
  background-color: rgba(0,0,0,0.04);
  color: var(--main);
  text-decoration: none;
}
 
/*--------------------*\
 *  Horizontal Rules  * 
\*--------------------*/
 
hr {
  background-color: var(--main);
  height: 2px;
  margin: -0.8em var(--padding-ng) -0.8em var(--padding-ng);
}
 
blockquote > hr, div.blockquote > hr {
  margin: -0.8em -1em -0.8em -1em;
}
 
#side-bar hr {
  display: none;
}
 
.modalbox hr {
  margin: 1em;
}
 
/*-------------------*\
 *    Blockquotes    * 
\*-------------------*/
 
blockquote,
div.blockquote {
  border: 2px solid var(--main);
  background-color: transparent;
}
 
/*-----------------------*\
 *     Rating & Tags     * 
\*-----------------------*/
 
.page-rate-widget-box, #page-content .creditRate {
  box-shadow: none;
  margin: 0 -1em 0 0;
  margin-right: -1em;
}
 
.page-rate-widget-box, .page-rate-widget-box .rate-points, .page-rate-widget-box .cancel, #page-content .creditRate {
  border-radius: 0;
}
 
.page-rate-widget-box .rate-points {
  background-color: var(--background) !important;
  border: solid 2px var(--main);
  color: var(--main);
}
 
.page-rate-widget-box .rateup, .page-rate-widget-box .ratedown {
  background-color: var(--background);
  border-top: solid 2px var(--main);
  border-bottom: solid 2px var(--main);
}
 
.page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a {
  color: var(--main);
}
 
.page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover {
  background: var(--background);
  color: var(--highlight);
}
 
.page-rate-widget-box .cancel {
  background-color: var(--background);
  border: solid 2px var(--main);
}
 
.page-rate-widget-box .cancel a {
  color: var(--main);
}
 
.page-rate-widget-box .cancel a:hover {
  background-color: var(--background);
  color: var(--highlight);
}
 
/* Info Rating Module */
 
.rate-box-with-credit-button {
  background-color: var(--background) !important;
  border: 2px solid var(--main) !important;
  border-radius: 0px !important;
  box-shadow: none !important;
}
 
.rate-box-with-credit-button .creditButton p a {
  border-left: 0 !important;
  color: var(--main);
}
 
.rate-box-with-credit-button .creditButton p a:hover {
  color: var(--highlight);
}
 
.rate-box-with-credit-button .page-rate-widget-box .cancel {
  border-right: 2px solid var(--main) !important;
}
 
.rate-box-with-credit-button .page-rate-widget-box .rate-points {
  border-left: 0;
}
 
/* Heritage Collection Rating Module */
 
.heritage-rating-module {
  border-radius: 0;
  border: none;
  background-color: var(--main);
  box-shadow: none;
}
 
.heritage-rating-module .heritage-emblem {
  padding-right: 0.5em;
}
 
.heritage-rating-module .heritage-emblem img {
  mix-blend-mode: luminosity;
}
.heritage-rating-module .heritage-emblem img:hover {
  mix-blend-mode: normal;
}
 
.heritage-rating-module .creditButton p a {
  border-left: 0 !important;
}
 
/* tags */
 
#main-content .page-tags {
  margin-top: 0;
}
#main-content .page-tags span {
  border: none;
  padding-left: 1em;
  padding-top: 0.5em;
}
#main-content .page-tags a, #page-options-bottom a, #page-options-bottom-2 a {
  text-decoration: none;
}
 
/*------------------*\
 *       Tabs       * 
\*------------------*/
 
.yui-navset .yui-content{
  border: transparent;
  border-bottom: 2px solid var(--main);
  background-color: transparent;
  margin: 0 var(--padding-ng) 0 var(--padding-ng);
  padding: 0 var(--padding) 0 var(--padding);
}
 
.yui-navset:after {
  float: right;
  content: "《탭 끝남》";
  color: var(--main);
  font-size: 90%;
  font-weight: 400;
  margin: 0.2em 2em 0.5em;
}
 
.yui-navset .yui-nav a {
  background: rgba(0, 0, 0, 0) url(https://scpko.wdfiles.com/local--files/theme%3Apacom/report_bg.png) repeat-x;
  border: 0px solid rgba(0, 0, 0, 0);
  border-top: 0px solid var(--main);
  font-family: 'Special Elite', 'UnJamoBatang',sans-serif;
  font-size: 1.2em;
  font-weight: 500;
  color: var(--main);
}
.yui-navset .yui-nav a em {
  border-top: solid;
  border-top-width: 2px;
  border-top-color: var(--main);
}
 
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em,
.yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */
.yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */
  background: var(--main); /* selected tab background */
  border-top: solid;
  border-top-width: 1px;
  border-top-color: var(--main);
  font-family: 'Special Elite', 'UnJamoBatang',sans-serif;
  color: var(--background);
}
 
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
  color: var(--highlight);
  background: none;
  text-decoration: none;
}
 
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
  border-color: var(--main);
  border-width:0 0 2px; 
  margin: 0 var(--padding-ng) 0 var(--padding-ng);
  padding-left: var(--padding);
}
 
/*--------------------*\
 *       Tables       * 
\*--------------------*/
 
table.wiki-content-table td {
  /* rgba is useless here */
  border: 2px solid;
  border-color: var(--main);
}
table.wiki-content-table th {
  border: 2px solid;
  border-color: var(--main);
  background-color: var(--main);
  color: var(--background);
}
 
/*------------------*\
 *      Images      * 
\*------------------*/
 
#page-content .scp-image-block {
  margin-top: 1.3em;
  border: none;
  box-shadow: none;
}
#page-content .scp-image-block .scp-image-caption {
  border: none;
  background-color: transparent;
  font-size: 0.9em;
}
 
#page-content .scp-image-block.block-right {
  margin-right: 0;
}
 
/*------------------*\
 *      Mobile      * 
\*------------------*/
 
@media (max-width: 767px) {
  #main-content {
    margin: 0 5%;
    padding: 2em 0 2em 0;
  }
  #page-title {
    margin-top: 0.9em;
  }
  #side-bar {
    background-color: var(--background);
    left: -19em;
  }
  #side-bar .close-menu {
    transition: width 0.5s ease-in-out 0.1s,
    opacity 1s ease-in-out 0s;
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background: rgba(0,0,0,0.3);
    background-position: 19em 50%;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
  }
  #side-bar:target .close-menu {
    width: calc(100% - 19em);
    right: 0;
    left: auto;
    opacity: 1;
    pointer-events: auto;
  }
  #side-bar .heading {
    margin: 1em -1em 1em -5em;
    padding-left: 5em;
  }
}
 
@media (max-width: 479px) {
  div#container-wrap {
    background: url(https://scpko.wdfiles.com/local--files/theme%3Apacom/mobile_bg_s.png) left 0% no-repeat !important;
  }
  #header {
    -webkit-background-size: 70px;
    background-size: 70px;
    background-position: 0px 50px;
  }
  #header h1 a {
    font-size: 135%;
  }
  #header h1, #header h2 {
    margin-left: 100px;
  }
}
/* Small Mobile Media Query */
@media (max-width: 385px) {
  #content-wrap {
    width: 400px;
    margin-left: -20px;
  }
  #main-content {
    width: 100%;
    margin: 0 auto;
    border: none;
  }
  #header {
    background-position: 8% 4em;
  }
  #header h1 a {
    font-size: 125%;
  }
  #header h2 span::before {
    content: "수신: 고든 사령관" !important; /* TO. COMMANDER GORDON */
  }
  #header h1, #header h2 {
    margin-left: -webkit-calc(105px + 5%);
    margin-left: -moz-calc(105px + 5%);
    margin-left: calc(105px + 5%);
  }
}
/* Note Media Query */
@media (min-width: 480px) and (max-width: 580px) {
  #header {
    -webkit-background-size: 100px;
    background-size: 100px;
    background-position: 0px 30px;
  }
  #header h1 a {
    font-size: 140%;
  }
  #header h1, #header h2 {
    margin-left: 140px;
  }
}
/* Mini Tablet Media Query */
@media (min-width: 581px) and (max-width: 767px) {
  #header {
    -webkit-background-size: 100px;
    background-size: 100px;
    background-position: 0px 30px;
  }
  #header h1 a {
    font-size: 140%;
  }
  #header h1, #header h2 {
    margin-left: 130px;
  }
}
/* Tablet Media Query */
@media (min-width: 768px) and (max-width: 1104px) {
  #header {
    background: url(none);
  }
  #header h1, #header h2 {
    margin-left: 215px;
  }
  #main-content {
    margin-left: 18em;
  }
  #side-bar {
    background-image: url(https://scpko.wdfiles.com/local--files/theme%3Apacom/header.png);
    background-position: right top;
    background-repeat: no-repeat;
    -webkit-background-size: 233px;
    background-size: 233px;
    margin-top: -16.15em;
    margin-left: -1.425em;
    padding-top: 16.15em;
    padding-right: 0.545em;
  }
  #side-bar .heading {
    margin: 1em calc(-1em + 8px) 1em -5em;
    padding-left: 5em;
  }
}
 
@media (min-width: 768px) and (max-width: 1080px) {
  #header h1, #header h2 {
    margin-left: 200px;
  }
}
 
/* custom for small device */
 
@media (max-width: 767px) {
  div#container-wrap {
    background: url(https://scpko.wdfiles.com/local--files/theme%3Apacom/mobile_bg.png) left 0% no-repeat;
  }
  #header {
    background-image: url(https://scpko.wdfiles.com/local--files/theme%3Apacom/pacom.png);
  }
  #side-bar {
    top: 0em;
  }
  #action-area {
    width: 100%;
    padding-left: 2.5%;
  }
}
 
@media (max-width: 580px) {
  #header h1 a::before {
    /* content: "SCP PACOM"; */
  }
  #header h2 span::before {
    content: "수신: █. “G.” ███ 사령관"; /* TO. COMMANDER █. “GORDON” ███ */
  }
}
 
/* search-box control */
 
@media (max-width: 800px) {
  #search-top-box-input {
    display: none;
  }
}
 
/* mobile side-bar open button */
 
.open-menu a {
  left: 0%;
  border-radius: 0;
  border-color: var(--main) !important;
  border-width: 2px 2px 2px 0 !important;
  padding: 0.1em;
  color: var(--main) !important;
  background: var(--background) !important;
}
 
/* RAISA ribbon customizing */
 
.raisa {
  margin-left: calc( -22em - ( 49.9vw - 517px ) );
}
 
@media (max-width: 1104px) {
  .raisa {
    margin-left: calc( -49.23vw + 279px );
    position: absolute;
    left: 0px;
  }
}
 
@media (max-width: 1038px) {
  .raisa {
    margin-left: -18.2em;
  }
}
 
@media (max-width: 767px) {
  .raisa {
    margin-left: calc( -4.87vw - 3px );
  }
  .raisamargin {
    width: 0px;
  }
}
 
@media (max-width: 479px) {
  .raisa {
    margin-left: -2.1em;
  }
}
 
@media (max-width: 385px) {
  .raisa {
    margin-left: 0em;
  }
}
🈲: SCP 재단의 모든 컨텐츠는 15세 미만의 어린이 혹은 청소년이 시청하기에 부적절합니다.
따로 명시하지 않는 한 이 사이트의 모든 콘텐츠는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0 라이선스를 따릅니다.