diff --git a/.vscode/settings.json b/.vscode/settings.json index 6c14396..58fc66f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -7,6 +7,6 @@ "scss.validate": false, "css.validate": false, "editor.codeActionsOnSave": { - "source.fixAll.stylelint": true + "source.fixAll.stylelint": "explicit" } } \ No newline at end of file diff --git a/util/sandbox/styles/theme.css b/util/sandbox/styles/theme.css index 8b87e83..a1cbb69 100644 --- a/util/sandbox/styles/theme.css +++ b/util/sandbox/styles/theme.css @@ -1,7 +1,7 @@ @charset "utf-8"; -@import url('/files/util/common/media/component/theme/font-bauhaus.css'); -@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); -@import url('http://cdnjs.cloudflare.com/ajax/libs/cc-icons/1.2.1/css/cc-icons.min.css'); +@import url("/files/util/common/media/component/theme/font-bauhaus.css"); +@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); +@import url("http://cdnjs.cloudflare.com/ajax/libs/cc-icons/1.2.1/css/cc-icons.min.css"); /* SCP Sigma 9 @@ -11,961 +11,994 @@ */ /* for Ruby size*/ + body { - background-color: #fff; - font-size: 0.80em; - color: #333; - -webkit-text-size-adjust: 110%; + font-size: 0.80em; + color: #333333; + background-color: #ffffff; + -webkit-text-size-adjust: 110%; } /* COMMON */ + #content-wrap { - position: relative; - margin: 2em auto 0; - max-width: 1040px; - min-height: 2500px; - height: auto !important; - height: 1850px; + position: relative; + max-width: 1040px; + height: auto !important; + height: 1850px; + min-height: 2500px; + margin: 2em auto 0; } h1, #page-title { - color: #901; - padding: 0 0 0.25em; - margin: 0 0 0.6em; - font-weight: normal; + padding: 0 0 0.25em; + margin: 0 0 0.6em; + font-weight: normal; + color: #990011; } h1 { - margin-top: 0.7em; - padding: 0; - font-weight: bold; + padding: 0; + margin-top: 0.7em; + font-weight: bold; } h2, h3, h4, h5, -h6, -h7 { - margin: 0.5em 0 0.4em; - padding: 0; - letter-spacing: 1px; +h6 { + padding: 0; + margin: 0.5em 0 0.4em; + letter-spacing: 1px; } #page-title { - border-color: #bbb; + border-color: #bbbbbb; } ul { - /* list-style-image: url(http://d3g0gp89917ko0.cloudfront.net/v--3b8418686296/common--theme/shiny/images/bullet.gif); */ - list-style: square; + /* list-style-image: url(http://d3g0gp89917ko0.cloudfront.net/v--3b8418686296/common--theme/shiny/images/bullet.gif); */ + list-style: square; } #top-bar ul { - /* list-style-image: none; /* IE ONLY! IF list-style-image IS SET */ + /* list-style-image: none; /* IE ONLY! IF list-style-image IS SET */ } li, p { - line-height: 141%; + line-height: 141%; } a { - color: #b01; - text-decoration: none; - background: transparent; + color: #bb0011; + text-decoration: none; + background: transparent; } a.newpage { - color: #d61; - text-decoration: none; - background: transparent; + color: #dd6611; + text-decoration: none; + background: transparent; } a:hover { - text-decoration: underline; - background-color: transparent; + text-decoration: underline; + background-color: transparent; } .form-control { - width: 95%; + width: 95%; } /* GLOBAL WIDTH */ + #header, #top-bar { - width: 90%; - max-width: 980px; - margin: 0 auto; + width: 90%; + max-width: 980px; + margin: 0 auto; } #top-bar { - width: 100%; - margin: 0 auto; + width: 100%; + margin: 0 auto; } .mobile-top-bar { - display: none; - position: absolute; - left: 1em; - bottom: 0px; - z-index: 0; + position: absolute; + bottom: 0px; + left: 1em; + z-index: 0; + display: none; } .mobile-top-bar ul { - display: inline-block; - flot: right !important; + display: inline-block; + float: right !important; } div#container-wrap { - background: url(/files/util/sandbox/media/component/theme/body_bg.png) top left repeat-x; + background: url(/files/util/sandbox/media/component/theme/body_bg.png) top left repeat-x; } /* HEADER */ + #header { - height: 140px; - position: relative; - z-index: 10; - padding-bottom: 22px; - /* FOR MENU */ - background: url(/files/util/sandbox/media/component/theme/logo.png) 10px 40px no-repeat; + position: relative; + z-index: 10; + height: 140px; + padding-bottom: 22px; + /* FOR MENU */ + background: url(/files/util/sandbox/media/component/theme/logo.png) 10px 40px no-repeat; } #search-top-box { - position: absolute; - top: 79px; - right: 9px; - width: 250px; - text-align: right; + position: absolute; + top: 79px; + right: 9px; + width: 250px; + text-align: right; } #search-top-box-input { - border: solid 1px #999; - border-radius: 5px; - color: #ccc; - background-color: #030; - box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .5); + color: #cccccc; + background-color: #003300; + border: solid 1px #999999; + border-radius: 5px; + box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .5); } #search-top-box-input:hover, #search-top-box-input:focus { - border: solid 1px #fff; - color: #fff; - background-color: #32A18E; - box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .8); -} - -#search-top-box-form input[type=submit] { - border: solid 1px #999; - border-radius: 5px; - padding: 2px 5px; - font-size: 90%; - font-weight: bold; - color: #ccc; - background-color: #32A18E; - background: linear-gradient(to bottom, #226E61, #32A18E, #030); - box-shadow: 0 1px 3px rgba(0, 0, 0, .5); - cursor: pointer; -} - -#search-top-box-form input[type=submit]:hover, -#search-top-box-form input[type=submit]:focus { - border: solid 1px #fff; - color: #fff; - text-shadow: 0 0 1px rgba(255, 255, 255, .25) background-color: #226E61; - background: linear-gradient(to bottom, #42D4BB, #226E61, #32A18E); - box-shadow: 0 1px 3px rgba(0, 0, 0, .8); + color: #ffffff; + background-color: #32a18e; + border: solid 1px #ffffff; + box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .8); +} + +#search-top-box-form input[type = "submit"] { + padding: 2px 5px; + font-size: 90%; + font-weight: bold; + color: #cccccc; + cursor: pointer; + background: linear-gradient(to bottom, #226e61, #32a18e, #003300); + background-color: #32a18e; + border: solid 1px #999999; + border-radius: 5px; + box-shadow: 0 1px 3px rgba(0, 0, 0, .5); +} + +#search-top-box-form input[type = "submit"]:hover, +#search-top-box-form input[type = "submit"]:focus { + color: #ffffff; + text-shadow: 0 0 1px rgba(255, 255, 255, .25); + background: linear-gradient(to bottom, #42d4bb, #226e61, #32a18e); background-color: #226e61; + border: solid 1px #ffffff; + box-shadow: 0 1px 3px rgba(0, 0, 0, .8); } #login-status { - color: #aaa; - font-size: 90%; - z-index: 30; - font-family: verdana, arial, helvetica, 'Meiryo', sans-serif; + z-index: 30; + font-family: verdana, arial, helvetica, "Meiryo", sans-serif; + font-size: 90%; + color: #aaaaaa; } #login-status a { - background: transparent; - color: #ddd; + color: #dddddd; + background: transparent; } #login-status ul a { - color: #700; - background: transparent; + color: #770000; + background: transparent; } #account-topbutton { - background: #ccc; - color: #700; + color: #770000; + background: #cccccc; } .printuser img.small { - margin-right: 1px; + margin-right: 1px; } #header h1 { - margin-left: 120px; - padding: 0; - float: left; - max-height: 95px; + float: left; + max-height: 95px; + padding: 0; + margin-left: 120px; } #header h2 { - margin-left: 120px; - padding: 0; - clear: left; - float: left; - font-size: 105%; - max-height: 38px; + float: left; + max-height: 38px; + padding: 0; + margin-left: 120px; + clear: left; + font-size: 105%; } #header h1 a { - display: block; - margin: 0; - padding: 80px 0 25px; - line-height: 0px; - max-height: 0px; - color: #eee; - background: transparent; - font-family: BauhausLTDemi, Arial, sans-serif; - font-size: 180%; - text-decoration: none; - text-shadow: 3px 3px 5px #000; - letter-spacing: 0.9px; + display: block; + max-height: 0px; + padding: 80px 0 25px; + margin: 0; + font-family: BauhausLTDemi, Arial, sans-serif; + font-size: 180%; + line-height: 0px; + color: #eeeeee; + text-decoration: none; + text-shadow: 3px 3px 5px #000000; + letter-spacing: 0.9px; + background: transparent; } #header h2 span { - display: block; - margin: 0; - padding: 19px 0; - line-height: 0px; - max-height: 0px; - font-weight: bold; - color: #f0f0c0; - text-shadow: 1px 1px 1px #000; - text-shadow: 1px 1px 1px rgba(0, 0, 0, .8); + display: block; + max-height: 0px; + padding: 19px 0; + margin: 0; + font-weight: bold; + line-height: 0px; + color: #f0f0c0; + text-shadow: 1px 1px 1px #000000; + text-shadow: 1px 1px 1px rgba(0, 0, 0, .8); } /* TOP MENU */ + #top-bar { - position: absolute; - z-index: 50; - top: 140px; - height: 21px; - line-height: 18px; - padding: 0; - z-index: 20; - font-size: 90%; + position: absolute; + top: 140px; + z-index: 20; + height: 21px; + padding: 0; + font-size: 90%; + line-height: 18px; } #top-bar ul { - display: inline-block; - width: 100%; + display: inline-block; + width: 100%; } #top-bar a { - color: #fff; - background: transparent; + color: #ffffff; + background: transparent; } #top-bar ul li { - margin: 0; - border: 0; - position: relative; + position: relative; + margin: 0; + border: 0; } #top-bar ul li:nth-of-type(2), #top-bar ul li:nth-of-type(3) { - float: right; + float: right; } #top-bar ul li ul { - border: solid 1px #666; - box-shadow: 0 2px 6px rgba(0, 0, 0, .5); - border-top: 0; + border: solid 1px #666666; + border-top: 0; + box-shadow: 0 2px 6px rgba(0, 0, 0, .5); } #top-bar ul li a { - border-left: solid 1px rgba(64, 64, 64, .1); - border-right: solid 1px rgba(64, 64, 64, .1); - text-decoration: none; - padding-top: 10px; - padding-bottom: 10px; - line-height: 1px; - max-height: 1px; - overflow: hidden; - font-weight: bold; + max-height: 1px; + padding-top: 10px; + padding-bottom: 10px; + overflow: hidden; + font-weight: bold; + line-height: 1px; + text-decoration: none; + border-right: solid 1px rgba(64, 64, 64, .1); + border-left: solid 1px rgba(64, 64, 64, .1); } #top-bar ul li.sfhover a, #top-bar ul li:hover a { - background: #333; - color: #0a1; - border-left: solid 1px rgba(64, 64, 64, 1); - border-right: solid 1px rgba(64, 64, 64, 1); + color: #00aa11; + background: #333333; + border-right: solid 1px rgba(64, 64, 64, 1); + border-left: solid 1px rgba(64, 64, 64, 1); } #top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a { - border-width: 0; - width: 150px; - border-top: 1px solid #ddd; - line-height: 160%; - height: auto; - max-height: none; - padding-top: 0; - padding-bottom: 0; + width: 150px; + height: auto; + max-height: none; + padding-top: 0; + padding-bottom: 0; + line-height: 160%; + border-width: 0; + border-top: 1px solid #dddddd; } #top-bar ul li.sfhover a:hover, #top-bar ul li:hover a:hover { - background: #333; - text-decoration: none; + text-decoration: none; + background: #333333; } #top-bar ul li ul { - border-width: 0 1px 1px 1px; - width: auto; + width: auto; + border-width: 0 1px 1px 1px; } #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 { - border-width: 0; + border-width: 0; } #top-bar ul li ul li a { - border-width: 0; + border-width: 0; } #top-bar ul li ul a, #top-bar a:hover { - color: #0a1; + color: #00aa11; } .top-bar ul li:last-of-type ul { - right: 0; + right: 0; } /* IE7 HACK */ -#top-bar ul>li>ul { - *margin-top: -4px; + +#top-bar ul> li> ul { + *margin-top: -4px; } /* SIDE MENU */ + #side-bar { - margin: 0 0 0 2em; - clear: none; - float: none; - position: absolute; - top: 0.5em; - left: 0; - width: 17em; - padding: 0; - border: none; - display: block; + position: absolute; + top: 0.5em; + left: 0; + display: block; + float: none; + width: 17em; + padding: 0; + margin: 0 0 0 2em; + clear: none; + border: none; } #side-bar .side-block { - padding: 10px; - border: 1px solid #660000; - border-radius: 10px; - box-shadow: 0 2px 6px rgba(102, 0, 0, .5); - background: #fff; - margin-bottom: 15px; + padding: 10px; + margin-bottom: 15px; + background: #ffffff; + border: 1px solid #660000; + border-radius: 10px; + box-shadow: 0 2px 6px rgba(102, 0, 0, .5); } #side-bar .side-area { - padding: 10px; + padding: 10px; } #side-bar .heading { - color: #600; - border-bottom: solid 1px #600; - padding-left: 15px; - margin-top: 10px; - margin-bottom: 5px; - font-size: 8pt; - font-weight: bold; + padding-left: 15px; + margin-top: 10px; + margin-bottom: 5px; + font-size: 8pt; + font-weight: bold; + color: #660000; + border-bottom: solid 1px #660000; } #side-bar p { - margin: 0; + margin: 0; } #side-bar div.menu-item { - margin: 2px 0; + margin: 2px 0; } #side-bar div.menu-item img { - width: 13px; - height: 13px; - border: 0; - margin-right: 2px; - position: relative; - bottom: -2px; + position: relative; + bottom: -2px; + width: 13px; + height: 13px; + margin-right: 2px; + border: 0; } #side-bar div.menu-item a { - font-weight: bold; + font-weight: bold; } #side-bar div.menu-item.inactive img { - opacity: 0.25; + opacity: 0.25; } #side-bar div.menu-item.inactive a { - color: #999; + color: #999999; } #side-bar div.menu-item .sub-text { - font-size: 80%; - color: #666; + font-size: 80%; + color: #666666; } #side-bar div.menu-item.sub-item {} #side-bar .collapsible-block-folded { - background: url(/files/util/common/media/nav/side//expand.png) 0 2px no-repeat; + background: url(/files/util/common/media/nav/side//expand.png) 0 2px no-repeat; } #side-bar .collapsible-block-link { - margin-left: 15px; - font-weight: bold; + margin-left: 15px; + font-weight: bold; } #side-bar .collapsible-block-unfolded-link { - border-bottom: solid 1px #600; + border-bottom: solid 1px #660000; } #side-bar .collapsible-block-unfolded-link .collapsible-block-link { - margin-top: 10px; - margin-bottom: 5px; - font-size: 8pt; - color: #600; + margin-top: 10px; + margin-bottom: 5px; + font-size: 8pt; + color: #660000; } #side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover { - color: #b01; - text-decoration: none; + color: #bb0011; + text-decoration: none; } #side-bar ul { - list-style-type: none; - padding: 0 5px 0; + padding: 0 5px 0; + list-style-type: none; } /* CONTENT */ + #main-content { - margin: 0 4em 0 20em; - padding: 1em; - position: relative; + position: relative; + padding: 1em; + margin: 0 4em 0 20em; } /* ACTUALLY HIDE HIDDEN TAGS */ -#main-content .page-tags a[href^="/system:page-tags/tag/_"] { - display: none; + +#main-content .page-tags a[href ^= "/system:page-tags/tag/_"] { + display: none; } #breadcrumbs { - margin: -1em 0 1em; - font-weight: 85%; + margin: -1em 0 1em; + font-weight: 85%; } /* YUI-TABS */ + .yui-navset .yui-content { - background-color: #f5f5f5; + background-color: #f5f5f5; } .yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a { - background-color: #d8d8d8; - background-image: url(http://d3g0gp89917ko0.cloudfront.net/v--3b8418686296/common--theme/shiny/images/yuitabs.png); + background-color: #d8d8d8; + background-image: url(http://d3g0gp89917ko0.cloudfront.net/v--3b8418686296/common--theme/shiny/images/yuitabs.png); } .yui-navset .yui-nav .selected a, .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: #700 url(http://d3g0gp89917ko0.cloudfront.net/v--3b8418686296/common--theme/shiny/images/yuitabs.png) repeat-x left -1400px; - /* selected tab background */ - color: #fff; + /* selected tab background */ + color: #ffffff; + /* no hover effect for selected */ + background: #770000 url(http://d3g0gp89917ko0.cloudfront.net/v--3b8418686296/common--theme/shiny/images/yuitabs.png) repeat-x left -1400px; } .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus { - background: #d88 url(http://d3g0gp89917ko0.cloudfront.net/v--3b8418686296/common--theme/shiny/images/yuitabs.png) repeat-x left -1300px; - text-decoration: none; + text-decoration: none; + background: #dd8888 url(http://d3g0gp89917ko0.cloudfront.net/v--3b8418686296/common--theme/shiny/images/yuitabs.png) repeat-x left -1300px; } .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav { - border-color: #444; + border-color: #444444; } .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav { - border-color: #444; + border-color: #444444; } .yui-navset li { - line-height: normal; + line-height: normal; } /* FOOTER */ + #footer { - clear: both; - font-size: 77%; - background: #444; - color: #bbb; - margin-top: 15px; - padding: 3px 10px; + padding: 3px 10px; + margin-top: 15px; + clear: both; + font-size: 77%; + color: #bbbbbb; + background: #444444; } #footer .options { - visibility: visible; - display: block; - float: right; - width: 50%; - font-size: 100%; - text-align: right; + display: block; + float: right; + width: 50%; + font-size: 100%; + text-align: right; + visibility: visible; } #footer a { - color: #fff; - background: transparent; + color: #ffffff; + background: transparent; } /* SOME NICE BOXES */ + div.sexy-box { - background: #eee; - border: 1px solid #ccc; - padding: 0 10px 12px; - margin: 7px 4px 12px; - overflow: hidden; + padding: 0 10px 12px; + margin: 7px 4px 12px; + overflow: hidden; + background: #eeeeee; + border: 1px solid #cccccc; } div.sexy-box div.image-container img { - margin: 5px; - padding: 2px; - border: 1px solid #999; + padding: 2px; + margin: 5px; + border: 1px solid #999999; } /* Custom page content classes */ + #page-content { - min-height: 720px; + min-height: 720px; } -.unmargined>p { - margin: 0; - line-height: 100%; +.unmargined> p { + margin: 0; + line-height: 100%; } .content-panel { - border: solid 1px #888880; - border-radius: 10px; - background-color: #999990; - margin: 10px 0 15px; - box-shadow: 3px 3px 6px #bbb; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.3), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 30px rgba(0, 0, 0, 0.1); + margin: 10px 0 15px; + background-color: #999990; + border: solid 1px #888880; + border-radius: 10px; + box-shadow: 3px 3px 6px #bbbbbb; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.3), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 30px rgba(0, 0, 0, 0.1); } .content-panel.standalone { - background: #fcfdfb; + background: #fcfdfb; } .content-panel.series { - padding: 0 20px; - margin-bottom: 20px; + padding: 0 20px; + margin-bottom: 20px; } .content-panel.centered { - text-align: center; + text-align: center; } .content-panel.left-column { - float: left; - width: 48%; + float: left; + width: 48%; } .content-panel.right-column { - float: right; - width: 48%; + float: right; + width: 48%; } .content-panel .panel-heading { - padding: 2px 10px; - color: #ffffff; - font-size: 90%; - font-weight: bold; - text-shadow: 1px 1px 2px rgba(0, 0, 0, .35); + padding: 2px 10px; + font-size: 90%; + font-weight: bold; + color: #ffffff; + text-shadow: 1px 1px 2px rgba(0, 0, 0, .35); } -.content-panel .panel-heading>p, -.content-panel .panel-footer>p { - margin: 0; +.content-panel .panel-heading> p, +.content-panel .panel-footer> p { + margin: 0; } .content-panel .panel-body { - padding: 5px 10px; - background: #fff9f0 url(/files/util/common/media/component/theme/panel-bg-gradient-reverse.png) bottom repeat-x; - /* box-shadow: 1px 2px 3px rgba(0,0,0,.2) inset */ + padding: 5px 10px; + background: #fff9f0 url(/files/util/common/media/component/theme/panel-bg-gradient-reverse.png) bottom repeat-x; + /* box-shadow: 1px 2px 3px rgba(0,0,0,.2) inset */ } .content-panel .panel-footer { - padding: 1px 10px; - color: #fffff0; - font-size: 80%; - font-weight: bold; - text-align: right; - text-shadow: 1px 1px 2px rgba(0, 0, 0, .5); + padding: 1px 10px; + font-size: 80%; + font-weight: bold; + color: #fffff0; + text-align: right; + text-shadow: 1px 1px 2px rgba(0, 0, 0, .5); } .content-panel .panel-footer a { - color: #ffffff; + color: #ffffff; } .content-panel .content-toc { - float: right; - padding: 0 20px; - background-color: #fff; - border: solid 1px #ccc; - border-radius: 10px; - margin: 20px 0 5px 5px; - white-space: nowrap; - box-shadow: inset 1px 2px 6px rgba(0, 0, 0, .15) + float: right; + padding: 0 20px; + margin: 20px 0 5px 5px; + white-space: nowrap; + background-color: #ffffff; + border: solid 1px #cccccc; + border-radius: 10px; + box-shadow: inset 1px 2px 6px rgba(0, 0, 0, .15) } .alternate:nth-child(even) { - background-color: rgba(255, 255, 255, .9); + background-color: rgba(255, 255, 255, .9); } /* Page Rating Module Customizations */ + .page-rate-widget-box { - display: inline; - border-radius: 5px; - box-shadow: 1px 1px 3px rgba(0, 0, 0, .5); - margin-bottom: 10px; - margin: 0; - padding: 0; + display: inline; + padding: 0; + margin: 0; + margin-bottom: 10px; + border-radius: 5px; + box-shadow: 1px 1px 3px rgba(0, 0, 0, .5); } div.page-rate-widget-box .rate-points { - background-color: #633; - border: solid 1px #633; - border-right: 0; - border-radius: 5px 0 0 5px; + background-color: #663333; + border: solid 1px #663333; + border-right: 0; + border-radius: 5px 0 0 5px; } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown { - background-color: #fff6f0; - border-top: solid 1px #633; - border-bottom: solid 1px #633; - font-weight: bold; + font-weight: bold; + background-color: #fff6f0; + border-top: solid 1px #663333; + border-bottom: solid 1px #663333; } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a { - background: transparent; - color: #633; - padding: 0 4px; - margin: 0 1px; + padding: 0 4px; + margin: 0 1px; + color: #663333; + background: transparent; } .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover { - background: #633; - color: #fffff0; - text-decoration: none; + color: #fffff0; + text-decoration: none; + background: #663333; } .page-rate-widget-box .cancel { - background-color: #633; - border: solid 1px #633; - border-left: 0; - border-radius: 0 5px 5px 0; + background-color: #663333; + border: solid 1px #663333; + border-left: 0; + border-radius: 0 5px 5px 0; } .page-rate-widget-box .cancel a { - background: transparent; - text-transform: uppercase; - color: #966; + color: #996666; + text-transform: uppercase; + background: transparent; } .page-rate-widget-box .cancel a:hover { - border-radius: 0 3px 3px 0; - background: #633; - color: #fffff0; - text-decoration: none; + color: #fffff0; + text-decoration: none; + background: #663333; + border-radius: 0 3px 3px 0; } /* Heritage Collection Rating Module */ + .heritage-rating-module { - float: right; - display: -webkit-inline-flex; - display: inline-flex; - -webkit-flex-direction: row-reverse; - flex-direction: row-reverse; - vertical-align: top; - background-color: #633; - padding: 0px 8px 0px 5px; - border: solid 1px #ccc066; - border-radius: 8px; - box-shadow: 0 1px 3px rgba(0, 0, 0, .25); - margin: 0; - margin-bottom: 10px; + display: -webkit-inline-flex; + display: inline-flex; + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; + float: right; + padding: 0px 8px 0px 5px; + margin: 0; + margin-bottom: 10px; + vertical-align: top; + background-color: #663333; + border: solid 1px #ccc066; + border-radius: 8px; + box-shadow: 0 1px 3px rgba(0, 0, 0, .25); } .heritage-rating-module .page-rate-widget-box { - box-shadow: none; - margin: 0; + margin: 0; + box-shadow: none; } .heritage-rating-module .heritage-emblem { - float: right; - position: relative; - top: -1px; - left: 2px; - height: 16px; - width: 16px; - overflow: visible; - margin-right: 2px; + position: relative; + top: -1px; + left: 2px; + float: right; + width: 16px; + height: 16px; + margin-right: 2px; + overflow: visible; } .heritage-rating-module .heritage-emblem img { - width: 20px; - height: 20px; - border: 0; + width: 20px; + height: 20px; + border: 0; } .rateBox { - display: inline-block; + display: inline-block; } .rateBox p { - display: inline; - margin: 0; - padding: 0; + display: inline; + padding: 0; + margin: 0; } /* Fixes for multi-line page tags */ + #main-content .page-tags { - margin: 1em 0 0; - padding: 0; + padding: 0; + margin: 1em 0 0; } #main-content .page-tags span { - display: inline-block; - padding: 0; - max-width: 60%; + display: inline-block; + max-width: 60%; + padding: 0; } #main-content .page-tags a { - display: inline-block; - white-space: nowrap; + display: inline-block; + white-space: nowrap; } /* Standard Image Block */ + .scp-image-block { - border: solid 1px #666; - box-shadow: 0 1px 6px rgba(0, 0, 0, .25); - width: 300px; + width: 300px; + border: solid 1px #666666; + box-shadow: 0 1px 6px rgb(0 0 0 / 25%); } .scp-image-block.block-right { - float: right; - clear: right; - margin: 0 2em 1em 2em; + float: right; + margin: 0 2em 1em; + clear: right; } .scp-image-block.block-left { - float: left; - clear: left; - margin: 0 2em 1em 0; + float: left; + margin: 0 2em 1em 0; + clear: left; } .scp-image-block.block-center { - margin-right: auto; - margin-left: auto; + margin-right: auto; + margin-left: auto; } .scp-image-block img { - border: 0; - width: 100%; + width: 100%; + border: 0; } .scp-image-block .scp-image-caption { - background-color: #eee; - border-top: solid 1px #666; - padding: 2px 0; - font-size: 80%; - font-weight: bold; - text-align: center; - width: 300px; + padding: 2px 0; + font-size: 80%; + font-weight: 700; + text-align: center; + background-color: #eeeeee; + border-top: solid 1px #666666; +} + +.scp-image-block> p { + margin: 0; } -.scp-image-block>p { - margin: 0; +.scp-image-block .scp-image-caption> p { + padding: 0 10px; + margin: 0; } -.scp-image-block .scp-image-caption>p { - margin: 0; - padding: 0 10px; +@media (max-width: 768px) { + + .scp-clear-true.scp-image-block { + float: none; + margin-right: auto; + margin-left: auto; + clear: both; + } } /* Forum Customizations */ + .forum-thread-box .description-block { - padding: .5em 1em; - border-radius: 10px; - box-shadow: 0 1px 5px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 10px 5px rgba(255, 255, 255, .25), inset 0 -15px 30px rgba(0, 0, 0, .1) + padding: .5em 1em; + border-radius: 10px; + box-shadow: 0 1px 5px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 10px 5px rgba(255, 255, 255, .25), inset 0 -15px 30px rgba(0, 0, 0, .1) } .thread-container .post .head { - padding: 0.5em 1em; - background-color: #eee; - background: linear-gradient(to right, #eee, #eeecec); - box-shadow: inset 2px 3px 6px rgba(0, 0, 0, .15); - border-radius: 5px 5px 0 0; + padding: 0.5em 1em; + background: linear-gradient(to right, #eeeeee, #eeecec); + background-color: #eeeeee; + border-radius: 5px 5px 0 0; + box-shadow: inset 2px 3px 6px rgba(0, 0, 0, .15); } /* Hide Forum Signatures */ + .signature { - display: none !important; + display: none !important; } /* Ruby by Nanimono Demonai */ + .ruby, ruby { - display: inline-table; - text-align: center; - white-space: nowrap; - line-height: 1; - height: 1em; - vertical-align: text-bottom; + display: inline-table; + height: 1em; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: text-bottom; } .rt, rt { - display: table-header-group; - font-size: 0.6em; - line-height: 1.1; - text-align: center; - white-space: nowrap; + display: table-header-group; + font-size: 0.6em; + line-height: 1.1; + text-align: center; + white-space: nowrap; } /* Keycap */ + .keycap { - border: 1px solid; - border-color: #ddd #bbb #bbb #ddd; - border-bottom-width: 2px; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; - background-color: #f9f9f9; - padding: 1px 3px; - font-family: inherit; - font-size: 0.85em; - white-space: nowrap; + padding: 1px 3px; + font-family: inherit; + font-size: 0.85em; + white-space: nowrap; + background-color: #f9f9f9; + border: 1px solid; + border-color: #dddddd #bbbbbb #bbbbbb #dddddd; + border-bottom-width: 2px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; } /* tag style */ + .tags { - display: inline-block; - margin: 0 0 0 5px; - padding: 3px 5px 3px 0px; - height: 13px; - line-height: 13px; - font-size: 11px; - background: #666; - color: #fff; - text-decoration: none; - -moz-border-radius-bottomright: 4px; - -webkit-border-bottom-right-radius: 4px; - border-bottom-right-radius: 4px; - -moz-border-radius-topright: 4px; - -webkit-border-top-right-radius: 4px; - border-top-right-radius: 4px; + display: inline-block; + height: 13px; + padding: 3px 5px 3px 0px; + margin: 0 0 0 5px; + font-size: 11px; + line-height: 13px; + color: #ffffff; + text-decoration: none; + background: #666666; + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -moz-border-radius-bottomright: 4px; + -moz-border-radius-topright: 4px; } .tags:before { - content: ""; - padding: 0px 1px 3px 1px; - float: left; - position: relative; - top: -3px; - left: -10px; - width: 0; - height: 0; - border-color: transparent #666 transparent transparent; - border-style: solid; - border-width: 8px 8px 8px 0px; + position: relative; + top: -3px; + left: -10px; + float: left; + width: 0; + height: 0; + padding: 0px 1px 3px 1px; + content: ""; + border-color: transparent #666666 transparent transparent; + border-style: solid; + border-width: 8px 8px 8px 0px; } .tags:after { - content: ""; - position: relative; - top: 4.5px; - left: -8px; - float: left; - width: 4px; - height: 4px; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; - background: #fff; - -moz-box-shadow: -1px -1px 2px #004977; - -webkit-box-shadow: -1px -1px 2px #333; - box-shadow: -1px -1px 2px #333; + position: relative; + top: 4.5px; + left: -8px; + float: left; + width: 4px; + height: 4px; + content: ""; + background: #ffffff; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; + -moz-box-shadow: -1px -1px 2px #004977; + -webkit-box-shadow: -1px -1px 2px #333333; + box-shadow: -1px -1px 2px #333333; } /* Display Black Block by Nanimono Demonai */ + .bblock { - color: #000000; - background-color: #000000; - transition: 2s; - text-decoration: none; + color: #000000; + text-decoration: none; + background-color: #000000; + transition: 2s; } .bblock:hover { - background-color: #000000; - color: #006600; - text-decoration: none; + color: #006600; + text-decoration: none; + background-color: #000000; } .dblock { - color: #000000; - background-color: #000000; - transition: 2s; - text-decoration: none; + color: #000000; + text-decoration: none; + background-color: #000000; + transition: 2s; } .dblock:hover { - background-color: transparent; - text-decoration: none; + text-decoration: none; + background-color: transparent; } /* Blockquote Mimic Dic */ + div.blockquote { - border: 1px dashed #999; - background-color: #f4f4f4; - padding: 0 1em; - margin: 1em 3em; + padding: 0 1em; + margin: 1em 3em; + background-color: #f4f4f4; + border: 1px dashed #999999; } @media (max-width: 479px) { - div.blockquote { - margin: 1em 0; - } + + div.blockquote { + margin: 1em 0; + } } @media (min-width: 480px) and (max-width: 580px) { - div.blockquote { - margin: 0.5em; - } + + div.blockquote { + margin: 0.5em; + } } /* @@ -973,399 +1006,408 @@ div.blockquote { www.marguerite.jp/Nihongo/WWW/CSSTips/EmphasizeDots-CSS3.html Edited for the SCP Foundation by Nanimono_Demonai */ + .emph { - text-emphasis-style: dot; - -webkit-text-emphasis-style: dot; + -webkit-text-emphasis-style: dot; + text-emphasis-style: dot; } /* viewport */ @viewport { - width: device-width; - zoom: 1.0; + width: device-width; + zoom: 1.0; } /* IE viewport */ @-ms-viewport { - width: device-width; - zoom: 1.0; + width: device-width; + zoom: 1.0; } /* opera viewport */ @-o-viewport { - width: device-width; - zoom: 1.0; + width: device-width; + zoom: 1.0; } /* chrome viewport - maybe it isn't work... */ @-webkit-viewport { - width: device-width; - zoom: 1.0; + width: device-width; + zoom: 1.0; } /* firefox viewport - maybe it isn't work too... */ @-moz-viewport { - width: device-width; - zoom: 1.0; + width: device-width; + zoom: 1.0; } /* adblock */ + .wd-adunit { - display: none; + display: none; } /* webkit scrollbar */ + ::-webkit-scrollbar { - width: 9px; - /* for vertical scrollbars */ - height: 9px; - /* for horizontal scrollbars */ - border: solid 1px rgba(0, 0, 0, 0.1); - border-round: 0.5px; + width: 9px; + /* for vertical scrollbars */ + height: 9px; + /* for horizontal scrollbars */ + border: solid 1px rgba(0, 0, 0, 0.1); } ::-webkit-scrollbar-track { - background: rgba(0, 0, 0, 0.1); + background: rgba(0, 0, 0, 0.1); } ::-webkit-scrollbar-thumb { - background: rgba(50, 50, 50, 0.3); + background: rgba(50, 50, 50, 0.3); } .page-source { - word-break: break-all; + word-break: break-all; } /* Responsive Web Design */ + img, embed, video, object, iframe, table { - max-width: 100%; + max-width: 100%; } #page-content div, #page-content div table { - max-width: 100%; + max-width: 100%; } #edit-page-comments { - width: 100%; + width: 100%; } /* basic Query for mobile devices */ @media (max-width: 767px) { - .owindow { - min-width: 80%; - max-width: 99%; - } - .modal-body .table, - .modal-body .table~div { - float: left; - } + .owindow { + min-width: 80%; + max-width: 99%; + } - .owindow .button-bar { - float: right; - } + .modal-body .table, + .modal-body .table~ div { + float: left; + } - .owindow div a.btn-primary { - width: 100%; - float: left; - } + .owindow .button-bar { + float: right; + } + + .owindow div a.btn-primary { + float: left; + width: 100%; + } } /* Mobile Media Query Mini */ @media (max-width: 410px) { - #header h1 a { - font-size: 75%; - } + + #header h1 a { + font-size: 75%; + } } /* Mobile Media Query */ @media (max-width: 479px) { - #search-top-box-input { - width: 5em; - } - - #page-content { - font-size: 0.9em; - } - - #main-content { - margin: 0; - } - - #recent-posts-category { - width: 100%; - } - - #header, - .mobile-top-bar { - max-width: 90%; - } - - #side-bar { - width: 80%; - position: relative; - } - - .top-bar { - display: none; - } - .mobile-top-bar { - display: block; - padding: 0; - } + #search-top-box-input { + width: 5em; + } + + #page-content { + font-size: 0.9em; + } + + #main-content { + margin: 0; + } + + #recent-posts-category { + width: 100%; + } + + #header, + .mobile-top-bar { + max-width: 90%; + } + + #side-bar { + position: relative; + width: 80%; + } + + .top-bar { + display: none; + } + + .mobile-top-bar { + display: block; + padding: 0; + } + + .page-options-bottom a { + padding: 0 4px; + } + + #header h1 a { + font-size: 85%; + } + + blockquote { + margin: 1em 0; + } + + .license-area { + font-size: 0.8em; + } + + #header { + background-position: 0 5.5em; + background-size: 55px 55px; + } + + #header h1, + #header h2 { + margin-left: 66px; + } + + #header h2 span { + padding: 11px 0px; + } + + table.form td, + table.form th { + float: left; + } + + td.title { + width: 30%; + } + + table.form td, + table.form th { + padding: 0; + } + + #edit-page-title { + max-width: 90%; + } + + .content-panel.left-column, + .content-panel.right-column { + float: left; + width: 99%; + } + + #page-content div, + #page-content div table { + clear: both; + } + + .heritage-rating-module { + padding: 1px 8px 1px 5px; + } + + .heritage-rating-module .heritage-emblem { + top: -2px; + } + + #search-top-box { + top: 115px; + right: 2px; + } +} - .page-options-bottom a { - padding: 0 4px; - } +/* Note Media Query */ +@media (min-width: 480px) and (max-width: 580px) { - #header h1 a { - font-size: 85%; - } + #search-top-box-input { + width: 7em; + } - blockquote { - margin: 1em 0; - } + #main-content { + margin: 0 2em 0 2em; + } - .license-area { - font-size: 0.8em; - } + #header, + .mobile-top-bar { + max-width: 90%; + } - #header { - background-position: 0 5.5em; - background-size: 55px 55px; - } + #side-bar { + position: relative; + width: 80%; + } - #header h1, - #header h2 { - margin-left: 66px; - } + .top-bar { + display: none; + } - #header h2 span { - padding: 11px 0px; - } + .mobile-top-bar { + display: block; + } - table.form td, - table.form th { - float: left; - } + .page-options-bottom a { + padding: 0 5px; + } - td.title { - width: 30%; - } + #header h1 a { + font-size: 120%; + } - table.form td, - table.form th { - padding: 0; - } + blockquote { + margin: 0.5em; + } - #edit-page-title { - max-width: 90%; - } + .license-area { + font-size: 0.85em; + } - .content-panel.left-column, - .content-panel.right-column { - width: 99%; - float: left; - } + #header { + background-position: 0.5em 4.5em; + background-size: 66px 66px; + } - #page-content div, - #page-content div table { - clear: both; - } + #header h1, + #header h2 { + margin-left: 80px; + } - .heritage-rating-module { - padding: 1px 8px 1px 5px; - } + td.title { + width: 30%; + } - .heritage-rating-module .heritage-emblem { - top: -2px; - } + .content-panel.left-column, + .content-panel.right-column { + float: left; + width: 99%; + } - #search-top-box { - top: 115px; - right: 2px; - } + #page-content div, + #page-content div table { + clear: both; + } } -/* Note Media Query */ -@media (min-width: 480px) and (max-width: 580px) { - #search-top-box-input { - width: 7em; - } - - #main-content { - margin: 0 2em 0 2em; - } - - #header, - .mobile-top-bar { - max-width: 90%; - } - - #side-bar { - width: 80%; - position: relative; - } +/* Mini Tablet Media Query */ +@media (min-width: 581px) and (max-width: 767px) { - .top-bar { - display: none; - } + #search-top-box-input { + width: 8em; + } - .mobile-top-bar { - display: block; - } + #side-bar { + position: relative; + width: 80%; + } - .page-options-bottom a { - padding: 0 5px; - } + #main-content { + margin: 0 3em 0 2em; + } - #header h1 a { - font-size: 120%; - } + #header, + .mobile-top-bar { + max-width: 90%; + } - blockquote { - margin: 0.5em; - } + .top-bar { + display: none; + } - .license-area { - font-size: 0.85em; - } + .mobile-top-bar { + display: block; + } - #header { - background-position: 0.5em 4.5em; - background-size: 66px 66px; - } + .page-options-bottom a { + padding: 0 6px; + } - #header h1, - #header h2 { - margin-left: 80px; - } + #header h1 a { + font-size: 140%; + } - td.title { - width: 30%; - } + .license-area { + font-size: 0.9em; + } - .content-panel.left-column, - .content-panel.right-column { - width: 99%; - float: left; - } + #header { + background-position: 1em 4em; + background-size: 77px 77px; + } - #page-content div, - #page-content div table { - clear: both; - } + #header h1, + #header h2 { + margin-left: 93px; + } } -/* Mini Tablet Media Query */ -@media (min-width: 581px) and (max-width: 767px) { - #search-top-box-input { - width: 8em; - } - - #side-bar { - width: 80%; - position: relative; - } - - #main-content { - margin: 0 3em 0 2em; - } - - #header, - .mobile-top-bar { - max-width: 90%; - } +/* Tablet Media Query */ +@media (min-width: 768px) and (max-width: 979px) { - .top-bar { - display: none; - } + #main-content { + margin: 0 4em 0 20em; + } - .mobile-top-bar { - display: block; - } + #header, + #top-bar #side-bar { + max-width: 100%; + } - .page-options-bottom a { - padding: 0 6px; - } + .top-bar li { + margin: 0; + } - #header h1 a { - font-size: 140%; - } + #top-bar ul li.sfhover ul li a, + #top-bar ul li:hover ul li a { + width: 110px; + } - .license-area { - font-size: 0.9em; - } + .page-options-bottom a { + padding: 0 7px; + } - #header { - background-position: 1em 4em; - background-size: 77px 77px; - } + #header h1 a { + font-size: 160%; + } - #header h1, - #header h2 { - margin-left: 93px; - } -} + .license-area { + font-size: 0.95em; + } -/* Tablet Media Query */ -@media (min-width: 768px) and (max-width: 979px) { - #main-content { - margin: 0 4em 0 20em; - } + #header { + background-position: 1em 4em; + background-size: 88px 88px; + } - #header, - #top-bar #side-bar { - max-width: 100%; - } + #header h1, + #header h2 { + margin-left: 106px; + } - .top-bar li { - margin: 0; - } - - #top-bar ul li.sfhover ul li a, - #top-bar ul li:hover ul li a { - width: 110px; - } - - .page-options-bottom a { - padding: 0 7px; - } - - #header h1 a { - font-size: 160%; - } - - .license-area { - font-size: 0.95em; - } - - #header { - background-position: 1em 4em; - background-size: 88px 88px; - } - - #header h1, - #header h2 { - margin-left: 106px; - } - - .content-panel.left-column, - .content-panel.right-column { - width: 99%; - float: left; - } + .content-panel.left-column, + .content-panel.right-column { + float: left; + width: 99%; + } - #page-content div, - #page-content div table { - clear: both; - } + #page-content div, + #page-content div table { + clear: both; + } } /* Desktop Media Query ----------- @@ -1379,300 +1421,315 @@ table { } ------------------------------------------ */ /* off-canvas */ + .close-menu { - display: none; + display: none; } @media (max-width: 767px) { - .page-history tbody tr td:last-child { - width: 35%; - } - - .owindow { - min-width: 80%; - max-width: 99%; - } - - .modal-body .table, - .modal-body .table~div { - float: left; - } - - .owindow .button-bar { - float: right; - } - - .owindow div .btn-primary { - width: 100%; - float: left; - } - - .owindow div .btn-primary~div { - width: 100%; - } - - .yui-navset { - z-index: 1; - } - - #navi-bar, - #navi-bar-shadow { - display: none; - } - - .open-menu a { - position: fixed; - bottom: 0.5em; - left: 0.5em; - z-index: 15; - font-family: san-serif; - font-size: 30px; - font-weight: 700; - width: 30px; - height: 30px; - line-height: 0.9em; - text-align: center; - border: 0.2em solid #888 !important; - background-color: #fff !important; - border-radius: 3em; - color: #888 !important; - } - - .open-menu a:hover { - text-decoration: none !important; - -webkit-box-shadow: 0px 0px 20px 3px rgba(153, 153, 153, 1); - -moz-box-shadow: 0px 0px 20px 3px rgba(153, 153, 153, 1); - -ms-box-shadow: 0px 0px 20px 3px rgba(153, 153, 153, 1); - -o-box-shadow: 0px 0px 20px 3px rgba(153, 153, 153, 1); - box-shadow: 0px 0px 20px 3px rgba(153, 153, 153, 1); - } - - #main-content { - max-width: 90%; - margin: 0 5%; - padding: 0; - -webkit-transition: 0.5s ease-in-out 0.1s; - -moz-transition: 0.5s ease-in-out 0.1s; - -ms-transition: 0.5s ease-in-out 0.1s; - -o-transition: 0.5s ease-in-out 0.1s; - transition: 0.5s ease-in-out 0.1s; - } - - #side-bar { - display: block; - position: fixed; - top: 0; - left: -25em; - width: 17em; - height: 100%; - background-color: rgb(50, 161, 142); - overflow-y: auto; - z-index: 10; - padding: 1em 1em 0 1em; - -webkit-transition: left 0.5s ease-in-out 0.1s; - -moz-transition: left 0.5s ease-in-out 0.1s; - -ms-transition: left 0.5s ease-in-out 0.1s; - -o-transition: left 0.5s ease-in-out 0.1s; - transition: left 0.5s ease-in-out 0.1s; - } - - #side-bar:after { - content: ""; - position: absolute; - top: 0; - width: 0; - height: 100%; - background-color: rgba(0, 0, 0, 0.2); - } - - #side-bar:target { - display: block; - left: 0; - width: 17em; - margin: 0; - border: 1px solid #dedede; - z-index: 10; - } - - #side-bar:target+#main-content { - left: 0; - } - #side-bar:target .close-menu { - display: block; - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - background: rgba(0, 0, 0, 0.3) 1px 1px repeat; - z-index: -1; - } + .page-history tbody tr td:last-child { + width: 35%; + } + + .owindow { + min-width: 80%; + max-width: 99%; + } + + .modal-body .table, + .modal-body .table~ div { + float: left; + } + + .owindow .button-bar { + float: right; + } + + .owindow div .btn-primary { + float: left; + width: 100%; + } + + .owindow div .btn-primary~ div { + width: 100%; + } + + .yui-navset { + z-index: 1; + } + + #navi-bar, + #navi-bar-shadow { + display: none; + } + + .open-menu a { + position: fixed; + bottom: 0.5em; + left: 0.5em; + z-index: 15; + width: 30px; + height: 30px; + font-family: san-serif; + font-size: 30px; + font-weight: 700; + line-height: 0.9em; + color: #888888 !important; + text-align: center; + background-color: #ffffff !important; + border: 0.2em solid #888888 !important; + border-radius: 3em; + } + + .open-menu a:hover { + text-decoration: none !important; + -webkit-box-shadow: 0px 0px 20px 3px rgba(153, 153, 153, 1); + -moz-box-shadow: 0px 0px 20px 3px rgba(153, 153, 153, 1); + -ms-box-shadow: 0px 0px 20px 3px rgba(153, 153, 153, 1); + -o-box-shadow: 0px 0px 20px 3px rgba(153, 153, 153, 1); + box-shadow: 0px 0px 20px 3px rgba(153, 153, 153, 1); + } + + #main-content { + max-width: 90%; + padding: 0; + margin: 0 5%; + -webkit-transition: 0.5s ease-in-out 0.1s; + -moz-transition: 0.5s ease-in-out 0.1s; + -ms-transition: 0.5s ease-in-out 0.1s; + -o-transition: 0.5s ease-in-out 0.1s; + transition: 0.5s ease-in-out 0.1s; + } + + #side-bar { + position: fixed; + top: 0; + left: -25em; + z-index: 10; + display: block; + width: 17em; + height: 100%; + padding: 1em 1em 0 1em; + overflow-y: auto; + background-color: rgb(50, 161, 142); + -webkit-transition: left 0.5s ease-in-out 0.1s; + -moz-transition: left 0.5s ease-in-out 0.1s; + -ms-transition: left 0.5s ease-in-out 0.1s; + -o-transition: left 0.5s ease-in-out 0.1s; + transition: left 0.5s ease-in-out 0.1s; + } + + #side-bar:after { + position: absolute; + top: 0; + width: 0; + height: 100%; + content: ""; + background-color: rgba(0, 0, 0, 0.2); + } + + #side-bar:target { + left: 0; + z-index: 10; + display: block; + width: 17em; + margin: 0; + border: 1px solid #dedede; + } + + #side-bar:target+ #main-content { + left: 0; + } + + #side-bar:target .close-menu { + position: fixed; + top: 0; + left: 0; + z-index: -1; + display: block; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.3) 1px 1px repeat; + } } .post .content a { - word-wrap: break-word; + word-wrap: break-word; } /*Colmod*/ -.colmod-block>ul, -.colmod-block>ul>li { - display: block; - line-height: normal; - list-style: none; - margin: 0; - padding: 0; + +.colmod-block> ul, +.colmod-block> ul> li { + display: block; + padding: 0; + margin: 0; + line-height: normal; + list-style: none; } -.colmod-block>ul>li>ul, -li.folded>.colmod-link-top a+a, -li.folded>.colmod-content, -li.folded>.colmod-link-end a, -li.unfolded>.colmod-link-top a:first-child { - display: none; +.colmod-block> ul> li> ul, +li.folded> .colmod-link-top a+ a, +li.folded> .colmod-content, +li.folded> .colmod-link-end a, +li.unfolded> .colmod-link-top a:first-child { + display: none; } .colmod-content { - -webkit-animation: colmod-fade-in 0.2s ease-in-out; - -moz-animation: colmod-fade-in 0.2s ease-in-out; - animation: colmod-fade-in 0.2s ease-in-out; - -webkit-animation-timing-function: cubic-bezier(0.3649610494, 0, 0.6350389506, 1); - -moz-animation-timing-function: cubic-bezier(0.3649610494, 0, 0.6350389506, 1); - animation-timing-function: cubic-bezier(0.3649610494, 0, 0.6350389506, 1); + -webkit-animation: colmod-fade-in 0.2s ease-in-out; + -moz-animation: colmod-fade-in 0.2s ease-in-out; + animation: colmod-fade-in 0.2s ease-in-out; + -webkit-animation-timing-function: cubic-bezier(0.3649610494, 0, 0.6350389506, 1); + -moz-animation-timing-function: cubic-bezier(0.3649610494, 0, 0.6350389506, 1); + animation-timing-function: cubic-bezier(0.3649610494, 0, 0.6350389506, 1); } -li.folded>.colmod-content { - -webkit-animation-name: none; - -moz-animation-name: none; - animation-name: none; +li.folded> .colmod-content { + -webkit-animation-name: none; + -moz-animation-name: none; + animation-name: none; } @-webkit-keyframes colmod-fade-in { - from { - opacity: 0; - } - to { - opacity: 1; - } + from { + opacity: 0; + } + + to { + opacity: 1; + } } @-moz-keyframes colmod-fade-in { - from { - opacity: 0; - } - to { - opacity: 1; - } + from { + opacity: 0; + } + + to { + opacity: 1; + } } @keyframes colmod-fade-in { - from { - opacity: 0; - } - to { - opacity: 1; - } + from { + opacity: 0; + } + + to { + opacity: 1; + } } -[class|="colmod-link"] div.foldable-list-container { - display: inline; +[class |= "colmod-link"] div.foldable-list-container { + display: inline; } -.colmod-collapsiblealt>[class|="colmod-link"] { - margin: 0.5em 0; - text-align: center; +.colmod-collapsiblealt> [class |= "colmod-link"] { + margin: 0.5em 0; + text-align: center; } -.colmod-collapsiblealt>[class|="colmod-link"], -.collapsiblealt>.colmod-block>ul>li>[class|="colmod-link"] { - margin: 0.5em 0; - text-align: center; +.colmod-collapsiblealt> [class |= "colmod-link"], +.collapsiblealt> .colmod-block> ul> li> [class |= "colmod-link"] { + margin: 0.5em 0; + text-align: center; } -.colmod-collapsiblealt>[class|="colmod-link"] a, -.collapsiblealt>.colmod-block>ul>li>[class|="colmod-link"] a { - padding: 0.1em 0.5em; - text-decoration: none; - background-color: #F4F4F4; - border: 1px solid #AAA; - color: #000; +.colmod-collapsiblealt> [class |= "colmod-link"] a, +.collapsiblealt> .colmod-block> ul> li> [class |= "colmod-link"] a { + padding: 0.1em 0.5em; + color: #000000; + text-decoration: none; + background-color: #f4f4f4; + border: 1px solid #aaaaaa; } -.colmod-collapsiblealt>[class|="colmod-link"] a:hover, -.colmod-collapsiblealt>[class|="colmod-link"] a:active, -.collapsiblealt>.colmod-block>ul>li>[class|="colmod-link"] a:hover, -.collapsiblealt>.colmod-block>ul>li>[class|="colmod-link"] a:active { - background: #DDD; - text-decoration: none; +.colmod-collapsiblealt> [class |= "colmod-link"] a:hover, +.colmod-collapsiblealt> [class |= "colmod-link"] a:active, +.collapsiblealt> .colmod-block> ul> li> [class |= "colmod-link"] a:hover, +.collapsiblealt> .colmod-block> ul> li> [class |= "colmod-link"] a:active { + text-decoration: none; + background: #dddddd; } /* SB3 only! */ + .join-box, #membership-apply-box { - /* Avoiding applications before going live http://scp-jp.wikidot.com/forum/t-13652551/9-1 */ - display: none; + /* Avoiding applications before going live http://scp-jp.wikidot.com/forum/t-13652551/9-1 */ + display: none; } #page-tags-input + .sub { - background: #fff0f0; - box-shadow: 0 0 5px #b01, 0 0 10px #b01; - font-size: 0; - left: 0; - margin: auto; - max-width: 400px; - padding: 1rem; position: fixed; - right: 0; top: 0; - width: calc(100% - 3rem); + right: 0; + left: 0; z-index: 10; + width: calc(100% - 3rem); + max-width: 400px; + padding: 1rem; + margin: auto; + font-size: 0; + background: #fff0f0; + box-shadow: 0 0 5px #bb0011, 0 0 10px #bb0011; } + #page-tags-input + .sub::before { - content: '\f06a'; - color: #b01; - font-family: 'FontAwesome'; - font-size: 1.5rem; margin-right: 8px; + font-family: "FontAwesome"; + font-size: 1.5rem; + color: #bb0011; + content: "\f06a"; } + #page-tags-input + .sub::after { - content: '一般メンバーによるタグの編集は禁止されています。SB3利用ガイドをご確認ください。'; - color: #b01; font-size: 1.5rem; + color: #bb0011; + content: "一般メンバーによるタグの編集は禁止されています。SB3利用ガイドをご確認ください。"; } /* Show-Changes Highlights from SCP-CN */ + .inline-diff ins:first-of-type::before, .inline-diff del:first-of-type::before, .inline-diff br + ins::before, .inline-diff br + del::before { + position: absolute; + left: 0.75em; display: inline-block; font: normal normal normal 14px/1 FontAwesome; + content: "\f111"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - content: '\f111'; - position: absolute; - left: 0.75em; } + .inline-diff ins::before { - color: #DDF; + color: #ddddff; } + .inline-diff del::before { - color: #FCC; + color: #ffcccc; } + .inline-diff ins + del::before, .inline-diff del + ins::before { color: transparent; } /* printuser avaterhover非選択 */ + .printuser.avatarhover > a > img { -webkit-user-select: none; user-select: none; } + #avatar-hover-container { display: none; } \ No newline at end of file