CSS theme: 日本生類創研 (簡易版)

魔法の言葉、CSS!

これは本Wiki内部で使用されているテンプレートページです。

このページに触れないでください
特に下のボタンを押さないでください



/*
    JOICL Theme (Simplified Theme)
    [2018 Wikidot Theme]
    Based on Nanimono Demonai's JOICL Theme
    Edited by 7happy7
*/
 
/*
背景画像
*/
 
div#container-wrap {
  background: none !important;
}
 
/*
ヘッダ
*/
 
#header {
  padding-top: 2em;
  height: 130px;
  z-index: 10;
  background: url(http://scp-jp-sandbox2.wikidot.com/local--files/nanimono-demonai/q2.png) 10px 40px no-repeat, calc(100% - 10px) calc(100% - 40px) no-repeat;
}
 
div #header h1 {
  margin-left: 0;
  width: 273px;
  top: 35px;
  min-height: 100px;
  position: absolute;
}
 
div #header h1 a {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 1px;
}
 
div #header h2 {
  display: none;
}
#top-bar a {
  color: #fff;
}
 
#top-bar {
  position: absolute;
  bottom: 0px;
  border-radius: 5px;
  background-color: rgba(23,140,206,0.03);
  border-top: dotted 1px rgba(23,140,206,0.5);
  border: solid 1px #178cce; 
  height: auto;
  padding: 0;
  z-index: 20;
  font-size: 90%;
 
}
#top-bar ul li ul {
  border-radius: 0 0 5px 5px;
  background-color: transparent;
  border: solid 1px #178cce;
  border-top: none;
  box-shadow: none;
}
#top-bar ul {
  float: right;
  padding-right: : 5em;
}
 
#top-bar a {
  color: #b5cde2;
}
 
#top-bar ul li a {
  border-left: none;
  border-right: none;
}
 
#top-bar ul li.sfhover a, #top-bar ul li:hover a {
  color: #178cce;
  border-left: none;
  border-right: none;
}
 
#search-top-box-input {
    border: solid 1px #0b65c0;
    background-color: #132639;
}
#search-top-box-input:hover,
#search-top-box-input:focus {
    border: solid 1px #0b65c0
    background-color: #132639;
}
#search-top-box-form input[type=submit] {
    border: solid 1px #0b65c0;
    background-color: #132639;
    color: #0b2447;
    background: linear-gradient(to bottom, #2373cd,#319ec2,#183291);
}
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
    border: solid 1px #0b65c0;
    color: #0b2447;
    background-color: #132639;
    background: linear-gradient(to bottom, #2373cd,#319ec2,#183291);
}
 
/*
コンテント
*/
 
h1, #page-title {
  color: #000;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
}
 
a {
  color: #b5cde2;
}
 
#page-content a{
  color: #00A;
}
#page-content h2{
font-weight:bold;
}
#page-content h2:before{
  content:'■';
  color:#006837;
}
 
.page-rate-widget-box .rate-points {
    background-color: #b5cde2 !important;
    border: solid 1px #b5cde2;
}
.page-rate-widget-box .rateup, .page-rate-widget-box .ratedown {
    background-color: #b5cde2;
    border-top: solid 1px #b5cde2;
    border-bottom: solid 1px #b5cde2;
}
.page-rate-widget-box .cancel {
    background-color: #b5cde2;
    border: solid 1px #b5cde2;
}
.page-rate-widget-box a{
    color: #fff !important;
}
.page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover {
    background: #b5cde2;
    color: #fffff0;
}
.page-rate-widget-box .cancel a:hover {
    background: #b5cde2;
}
/*
リスト http://webnonotes.com/css/css-list/
*/
.defaultlist, .defaultlist li{
  padding:0px;
  margin:0px;
}
 
.defaultlist li{
  list-style-type:none !important;
  list-style-image:none !important;
  margin: 5px 0px 5px 0px !important;
}
.list1 li{
  position:relative;
  padding-left:20px;
}
 
.list1 li:before{
  content:''; 
  display:block; 
  position:absolute; 
  box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
  top:3px; 
  left:2px; 
  height:0; 
  width:0; 
  border-top: 6px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #aaa;
}
.list2 li{
  position:relative;
  padding-left:20px;
}
 
.list2 li:before{
  content:''; 
  height:0; 
  width:0; 
  display:block; 
  border:5px transparent solid; 
  border-right-width:0; 
  border-left-color:#aaa; 
  position:absolute; 
  top:5px; 
  left:8px;
}
 
.list2 li:after{
  content:''; 
  height:2px; 
  width:10px; 
  display:block; 
  background:#aaa; 
  position:absolute; 
  top:9px; 
  left:0px;
}
.list4 li{
  position:relative;
  padding-left:20px;
}
 
.list4 li:after, .list4 li:before{
  content:''; 
  display:block; 
  position:absolute; 
  top:4px; 
  left:8px; 
  height:11px; 
  width:4px; 
  background:#aaa; 
  border-radius:10px;
  transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  -o-transform:rotate(45deg);
}
.list4 li:before{
  top:8px; 
  left:3px;
  height:8px; 
  transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
}
.list5 li{
  position:relative;
  padding-left:20px;
}
.list5 li:before{
  content:''; 
  height:0px; 
  width: 90%;
  display:block; 
  position:absolute; 
  top:18px; 
  left:0px; 
  border-bottom: 1px dashed #aaa;
}
.list5 li:after{
  content:'';
  display:block; 
  position:absolute; 
  background:#aaa;
  width:5px;
  height:5px; 
  top:7px; 
  left:5px; 
  border-radius: 5px;
}
.list6 li{
  position:relative;
  padding-left:20px;
}
 
.list6 li:after{
  content:'';
  display:block; 
  position:absolute; 
  background:#aaa;
  width:9px;
  height:9px; 
  top:5px; 
  left:5px; 
  transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
}
.list7 li{
  position:relative;
  display: block;
  padding: 5px 0px 5px 30px;
  background: #ccc;
  color: #444;
  border-radius:15px 0px 0px 15px;
}
 
.list7 li:after{
  content:'';
  display:block; 
  position:absolute;
  width:14px;
  height: 14px;
  top:7px;
  left:5px;
  background: #fff;
  border-radius: 10px;
}
/*http://tablestyler.com/#
*/
.defaultT table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
}
.defaultT table td, .defaultT table th {
  padding: 3px 10px;
}
.defaultT table th:first-child {
  border: none;
}
.defaultT table th:first-child {
  border: none;
}
 
.defaultT table tbody td:first-child {
background-color: #f0f0e6;
font-weight: bold;
  border-left: none;
}
 
.defaultT table tbody tr:last-child td {
  border-bottom: none;
}
 
.defaultT .wiki-content-table {
    margin: 0;
}
.defaultT{
  font: normal 12px/150% Arial, Helvetica, sans-serif;
  background: #fff;
  overflow: hidden;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
 
.defaultT table th {
    color: #FFFFFF;
  font-size: 15px;
  font-weight: bold;
}
 
.defaultT table tbody td {
  font-size: 12px;
  font-weight: normal;
}
 
.blueT {
  border: 1px solid #006699;
}
 
.blueT table th {
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F));
  background: -moz-linear-gradient( center top, #006699 5%, #00557F 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
  background-color: #006699;
  border-left: 1px solid #0070A8;
}
 
.blueT table tbody td {
  border-left: 1px solid #E1EEF4;
}
.blueT table tbody td:first-child {
color: #00496B;
}
 
.redT {
  border: 1px solid #991821;
}
 
.redT table th {
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #991821), color-stop(1, #80141C));
  background: -moz-linear-gradient( center top, #991821 5%, #80141C 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#991821', endColorstr='#80141C');
  background-color: #991821;
  border-left: 1px solid #B01C26;
}
 
.redT table tbody td {
  border-left: 1px solid #F7CDCD;
}
 
.redT table tbody td:first-child {
color: #80141C;
}
 
.greenT {
  border: 1px solid #36752D;
}
 
.greenT table th {
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #36752D), color-stop(1, #275420));
  background: -moz-linear-gradient( center top, #36752D 5%, #275420 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#36752D', endColorstr='#275420');
  background-color: #36752D;
  border-left: 1px solid #36752D;
}
 
.greenT table tbody td {
  border-left: 1px solid #C6FFC2;
}
 
.greenT table tbody td:first-child {
color: #275420;
}
 
/*
サイド
*/
 
#side-bar {
  background-color: #b5cde2;
}
 
#side-bar .side-block {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent !important;
  margin-top: 4em;
}
#side-bar .heading {
    color: #178cce;
    border-bottom: solid 1px #178cce;
}
#side-bar .side-block a {
  color: #fff;
}
 
/*
めであ
*/
 
@media (max-width: 767px) and (min-width:440px) {
 
  #container {
    border-left: 9px solid #b5cde2;
  }
  #header {
    background-size: 200px, 180px;
  }
  div #header h1 {
    width: 200px;
    min-height: 100px;
  }
  #side-bar {
  transform: translateY(0em);
}
}
 
@media (max-width: 440px) {
  #container {
    border-left: 3px solid #b5cde2;
  }
  #header {
    background-size: 130px, 140px;
    height: 100px;
  }
  div #header h1 {
    width: 200px;
    min-height: 80px;
  }
  #top-bar {
    margin-top: -15px;
    margin-bottom: 2px;
  }
}
 
@media (min-width: 441px) and (max-width: 767px) {
  #top-bar {
    margin-top: 15px;
  }
}
 
@media (min-width: 767px) {
  #top-bar {
  margin-bottom: 15px;
  }
  #content-wrap {
  transform: translateY(-2em);
  }
}
 
@media (max-width: 767px) {
    #side-bar:target .close-menu {
        min-width: 100vw;
        min-height: 100vh;
    }
}
 
img.close-menu {
    opacity: 0 !important;
}
/*
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License