Nu-SCPテーマ
まて!これは孔明の罠だ!
ここはSCP Wiki内部で使われているテンプレートページです。
スタッフの許可なしに
このページを触れないでください
@charset "utf-8"; @import url(http://scp-jp.wdfiles.com/local--files/component:newscptheme/normalize.css); @import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900,900i|PT+Sans&subset=latin-ext'); /* nu-SCP [2019 Wikidot Theme] Designed by djkaktus & Woedenaz Built by Woedenaz & Aers & Croquembouche ft Rounderhouse Edited by SCP-JP Technical Team (Dr Devan) */ /*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */ /* main.css 1.0.0 | MIT License | https://github.com/h5bp/main.css#readme */ /* * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. */ /* ========================================================================== Base styles: opinionated defaults ========================================================================== */ html { color: #222; font-size: 1em; line-height: 1.5; } /* * Remove text-shadow in selection highlight: * https://twitter.com/miketaylr/status/12228805301 * * Vendor-prefixed and regular ::selection selectors cannot be combined: * https://stackoverflow.com/a/16982510/7133471 * * Customize the background color to match your design. */ ::-moz-selection { background: #FCB3B3; text-shadow: none; } ::selection { background: #FCB3B3; text-shadow: none; } /* * A better looking default horizontal rule */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* * Remove the gap between audio, canvas, iframes, * images, videos and the bottom of their containers: * https://github.com/h5bp/html5-boilerplate/issues/440 */ audio, canvas, iframe, img, svg, video { vertical-align: middle; } /* * Remove default fieldset styles. */ fieldset { border: 0; margin: 0; padding: 0; } /* * Allow only vertical resizing of textareas. */ textarea { resize: vertical; } /* ========================================================================== Browser Upgrade Prompt ========================================================================== */ .browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ========================================================================== Author's custom styles ========================================================================== */ body { background-color: #fcfcfc; background-image: linear-gradient(to top, /* creates the red part of the header */ rgb(70, 30, 32) 0%, rgb(78, 0, 12) 30%, rgb(100, 3, 15) 100%), linear-gradient(to bottom, /* creates the grey part of the header */ rgba(0,0,0,1) 7.5rem, rgba(66,66,66,1) calc(7.5rem + 2px), rgba(66,66,66,1) calc(100% - 2px), rgba(0,0,0,1) calc(100% - 2px), rgba(0,0,0,1) 100%); background-size: 100% 7.5rem, 100% 9.375rem; /* 120px, 150px */ background-repeat: no-repeat; color: rgb(85,85,85) !important; } p, span, div, li { font-family: 'Lato', sans-serif; font-kerning: auto; orphans: 2; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; word-break: break-word; text-rendering: optimizeLegibility; } .code { background-color: #f6f6f6; } .code *, pre * { font-family: 'PT Mono', 'Andale Mono', 'Courier New', Courier, monospace; max-width: 90vw; white-space: pre-wrap; } #container { display: flex; flex-direction: column; margin: 0; padding: 0; width: 100%; height: 100%; } #content-wrap { margin: 2em auto 0; width: inherit; min-height: 1300px; height: 100%; position: initial; display: flex; font-size: inherit; } h1, #page-title { color: #000000; padding: 0 0 0.25em; margin: 0 0 0.6em; font-weight: 600; } div#container-wrap { background: none; } sup { vertical-align: top; position: relative; top: -0.5em; } textarea { line-height: 1.5; } a { color: rgb(218, 13, 13); } a.newpage { color: rgb(163, 204, 199); } a:visited { color: #2e0000; } textarea { line-height: normal; } .title.modal-header { background-color: #fff; } .owindow { background-color: #fff; } .page-rate-widget-box { overflow: hidden; padding: 4px 0 4px 0; background-color: #590505 !important; } /* GLOBAL WIDTH */ #header, #top-bar { font-weight: 600; background: none; } #header > h1 > a > span { position: relative; display: inline-table; width: 25rem; height: 5.75rem; z-index: 9999; left: -23rem; top: -2rem; } .mobile-top-bar { display: none; position: relative; z-index: 9999; } .mobile-top-bar > div > p { display: none; } .info-container .collapsible-block-link, .info-container:hover .collapsible-block-link { line-height: 1.6em; } body { background-color: rgb(252,252,252); font-size: 0.90em; color: rgb(12,12,12); font-kerning: normal; font-variant-numeric: oldstyle-nums; -moz-font-feature-settings: "onum", "kern", "liga", "clig", "calt"; -ms-font-feature-settings: "onum", "kern", "liga", "clig", "alt"; -webkit-font-feature-settings: "onum", "kern", "liga", "clig", "calt"; font-feature-settings: "onum", "kern", "liga", "clig", "calt"; text-rendering:auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* line behavior */ orphans:2; -webkit-hyphens:auto; -moz-hyphens:auto; -ms-hyphens:auto; hyphens:auto; word-break:break-word; } /* HEADER */ #header { width: 90%; height: 70px; } #header h1 { margin-top: 0.7em; margin-bottom: -0.7em; } #header h1, #header h2 { font-family: 'Lato', sans-serif !important; margin-left: 6.75rem; font-weight: 900; text-transform: uppercase; } #header h2 { margin-top: 1.5em; margin-bottom: -0.5em; } #header h1 a { font-family: 'Lato', sans-serif !important; } #header-extra-div-2 { content: " "; position: absolute; top: 0; background: url(http://scp-jp.wdfiles.com/local--files/component:newscptheme/logo.svg) 10px 40px no-repeat; background-position: center left; background-clip: border-box; background-size: contain; z-index: 9999; margin-top: 20px; height: 80px; width: 100%; pointer-events: none; } #search-top-box { display: inline-flex; text-align: center; justify-content: flex-end; } #search-top-box-input { border: solid 1px #000000; border-radius: 1px; color: #fff; background-color: #424242 !important; } #search-top-box-input:hover, #search-top-box-input:focus { border: solid 1px #000; border-radius: 1px; background-color: #424242 !important; } #search-top-box-form input[type=submit] { border: solid 1px #000; padding: 3px 5px 2px; border-radius: 1px; color: #fff; background: #590505 !important; box-shadow: none !important; } #search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus { border: solid 1px #000; border-radius: 1px; background: #590505 !important; box-shadow: none !important; } #login-status { color: #fff; font-size: 90% !important; z-index: 10000; right: 1em; top: 1em; } #login-status a { color: #fff; } #login-status ul a { color: #000; background-color: transparent; } #account-topbutton { background-color: #C0C0C0; color: #000000; } #header h1 a { padding: 30px 0px 0px; color: transparent; font-size: 100%; text-shadow: none; z-index: 9999; } #header h1 a::before { content: "SCP財団"; color: #fff; text-shadow: 1px 1px 1px #000000; } #header h2 span { padding: 30px 0px 0px; font-weight: normal; color: transparent; text-shadow: none; } #header h2 span::before { content: '確保、収容、保護'; color: #fafafa; text-shadow: 1px 1px 1px #000000; width: 100vw; } /* TOP MENU */ #top-bar { width: 100%; margin: 0; padding: 0 0 0.25em 0; top: 120px; height: 28px; line-height: 20px; display: inline-flex; align-items: center; } #top-bar ul li ul { border: solid 1px #000; } #top-bar ul li a { padding-top: 9px; } #top-bar ul li.sfhover a, #top-bar ul li:hover a { background: #C0C0C0; color: #000; } #top-bar ul li.sfhover a, #top-bar ul li:hover a { background-color: #dedede; } #top-bar ul li.sfhover a:hover, #top-bar ul li:hover a:hover { background-color: #C0C0C0; } /* Woedenaz Flex Boxes */ #top-bar .top-bar, #top-bar .top-bar > ul, #top-bar .top-bar > ul > li > ul { display: flex; z-index: 20; } #top-bar .top-bar { align-content: stretch; justify-content: space-around; } #top-bar .top-bar > ul { width: 90vw; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; max-width: 61.250rem; height: auto; z-index: 20; } #top-bar .top-bar > ul > li > a, #top-bar .mobile-top-bar > ul > li > a { white-space: pre; padding-top: 1em; } #top-bar .top-bar > ul > li, #top-bar .top-bar > ul > li > a, #top-bar .mobile-top-bar > ul, #top-bar .mobile-top-bar > ul > li, #top-bar .mobile-top-bar > ul > li > a { width: auto; flex-grow: 2; flex-shrink: 2; } #top-bar .top-bar > ul > li > ul, #top-bar .mobile-top-bar > ul > li > ul { flex-direction: column; margin-top: 0; } #top-bar .top-bar > ul > li > ul > li > a, #top-bar .mobile-top-bar > ul > li > ul > li > a { white-space: pre-wrap; line-height: 140%; padding: 0.5em 1em !important; } /* attempt at a menu by woedenaz #top-bar .top-bar > ul > li > ul { position: fixed; width: 60vw; top: 11em; left: 20vw; right: 0; flex-wrap: wrap; justify-content: stretch; align-items: stretch; align-content: stretch; font-size: 1.15em; } #top-bar ul li ul li, #top-bar ul li ul li.sfhover, #top-bar ul li ul li, #top-bar ul li ul li:hover { position: initial; left: 0; height: auto; align-self: center; border: 1px solid rgba(48, 7, 7, 1); box-sizing: border-box; display: block; padding: 1.5em 1em !important; background: #dedede; flex-grow: 2; cursor: pointer; } #top-bar ul li.sfhover , #top-bar ul li:hover { background: #C0C0C0; text-decoration: none; | #top-bar .top-bar > ul > li > ul > li > a { text-align: center; border-top: none; width: 100%; margin: 0 auto; padding: 0; align-self: center; align-items: center; } */ /* SIDE MENU */ #side-bar { position: initial; padding: 2.5em 0 0 0; margin: 1em 0 0 1em; display: flex; flex-direction: column; background: transparent; flex-basis: 13.5rem; flex-shrink: 0.1; } #side-bar img { filter: hue-rotate(210deg); -webkit-filter: hue-rotate(210deg); /* Safari 6.0 - 9.0 */ filter: brightness(120%); -webkit-filter: brightness(120%); } #side-bar > div:nth-child(1) { background-color: #eafbfa !important; } #side-bar > div:nth-child(5) { background-color: #e1ddda !important; } #side-bar > div:nth-child(6) { background-color: #f6e6e6 !important; } #side-bar > div:nth-child(7) { background-color: #e6f0ef !important; } #side-bar div.side-block.sns img { filter: none; -webkit-filter: none; } #side-bar .side-block { border: 1px solid #000000; border-radius: 0.25vw; box-shadow: 0 2px 6px #c0c0c0; } #side-bar .heading { color: #000000; border-bottom: solid 1px #000000; } #side-bar div.menu-item.inactive a { color: #d20000; } #side-bar div.menu-item .sub-text { color: #d20000; } #side-bar .collapsible-block-unfolded-link { border-bottom: solid 1px #000000; } #side-bar .collapsible-block-unfolded-link .collapsible-block-link { color: #d20000; } #side-bar a:visited { color: #d20000; } /* CONTENT */ #main-content { margin: 2.5em 0 0 1em; flex-basis: 47.188rem; max-width: 47.188rem } /* YUI-TABS */ .yui-navset li { line-height: normal; } .footnote-footer { padding-bottom: 1em; } /* Custom page content classes */ #page-content { max-width: 90vw; } .content-panel .panel-body { background: #C0C0C0; } .content-panel .panel-footer { color: #C0C0C0; } .content-panel .panel-footer a { color: #C0C0C0; } .content-panel .content-toc { background-color: #C0C0C0; } /* Page Rating Module Customizations */ .page-rate-widget-box { display: inline-block; border-radius: 0px; margin-right: 2em; } .page-rate-widget-box .rate-points { background-color: #590505 !important; border: solid 1px #590505; border-radius: 0px; } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown { background-color: #590505; border-top: solid 1px #590505; border-bottom: solid 1px #590505; } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a { background-color: #590505; color: #fff; } .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover { background-color: #6c1616; color: #fff; } .page-rate-widget-box .cancel { background-color: #590505; border: solid 1px #590505; border-radius: 0px; } .page-rate-widget-box .cancel a { color: #fff; } .page-rate-widget-box .cancel a:hover { background-color: #6c1616; color: #fff; } /* Heritage Collection Rating Module */ .heritage-rating-module { padding: 2px 8px 2px 5px; margin-right: 2em; } .heritage-rating-module .heritage-emblem { float: left; top: -2px; } /* Standard Image Block */ .scp-image-block { border: solid 1px #000; display: flex; flex-flow: column nowrap; align-items: center; min-width: 100%; } .scp-image-block img { min-width: 100% } .scp-image-block .scp-image-caption { background-color: #C0C0C0; border-top: solid 1px #000; min-width: 100%; } div.block-right, div.block-left { min-width: 20%; } /* Wikiwalk Navigation */ .footer-wikiwalk-nav { font-weight: bold; font-size: 75%; } /* Phones */ @media (max-width: 767px) { html { overflow-x: hidden; } #header, .mobile-top-bar { max-width: 90vw; } .top-bar { display: none !important; } .mobile-top-bar { display: flex; position: relative; width: 100vw; left: -2vw; } .mobile-top-bar > div > p { display: block } .page-history tbody tr td:last-child { font-side: 1.5rem; } #header h1 { font-size: 1.4em; margin-top: 1em !important; margin-bottom: -1em !important; } #header h1 a::before { max-width: 69vw; } #header h2 { margin-top: 1.4em !important; margin-bottom: -1.5em !important; } #header h1, #header h2 { margin-left: 5.75rem; max-width: 69vw; } #header h2 span::before { display: inline-block; width: 69vw; } #header > h1 > a > span { top: -3.2rem; left: -6rem; max-width: 91vw; margin-right: -23vw; } #login-status { font-size: 70%; } .open-menu a { z-index: 150; } #main-content { max-width: 90vw; } #side-bar { width: 80%; display: block; position: fixed; top: 0; left: -25em; width: 17em; height: 100%; background-color: #fff; overflow-y: auto; z-index: 10; padding: 1em 1em 0 1em; -webkit-transition: left 0.5s ease-in-out 0.1s; transition: left 0.5s ease-in-out 0.1s; } td.name { width: 15em; } #page-content div.title { word-break: keep-all; } #content-wrap { margin: 3.5em auto 0; } } @media (max-width: 450px) { div.block-right, div.block-left { min-width: 100%; margin: 0 auto; } } /* for the Interwiki */ #side-bar .scpnet-interwiki-wrapper iframe.scpnet-interwiki-frame { background-color: #fff9ce !important; -webkit-filter: hue-rotate(5deg) brightness(112%); filter: hue-rotate(5deg) brightness(112%); border-radius: 0.25vw; box-shadow: 0 2px 6px #929292; }
page revision: 18, last edited: 26 Jan 2019 04:33