User:WEEABXTCH/common.css

@font-face { font-family: 'TGreFont'; src: url('https://youngjump.jp/tokyoghoul/re/chara/tgrefont.woff') format('woff'); } .oggai { display: inline-block; } .oggai:before { font-family: 'TGreFont'; content: "あ"; }

.col-3{float: left; width: 27.33%; margin: 40px 3%; position: relative;} input[type=text]#bodySearchInput {  border: 0; padding: 7px 0; border-bottom: 1px solid #ccc; font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px; } {  position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: #4caf50; transition: 0.4s; } {  width: 100%; transition: 0.4s; left: 0; } input[type=text]#bodySearchInput:focus { outline:none; }
 * 1) bodySearchInput ~ .focus-border
 * 1) bodySearchInput:focus ~ .focus-border

input[type=submit].bodySearchBtnGo { background: none; border: 0; border-radius: 0; color: #3a3a3a; font-size: 1em; height: inherit; line-height: inherit; padding: 0; color: blue; } input[type=submit].bodySearchBtnGo:hover   { background: none; }

/******** ********/ .noarticletext {	background-image: url(https://static.wikia.nocookie.net/weeabxtchpersonal/images/6/61/Wide_blood_2000_x_1660.png/revision/latest); background-repeat: no-repeat; background-position: center; background-size: 18em; }	.noarticle { margin:1.4em; } .noarticle dl { margin:0.5em 0; } /******** ********/ .WikiaPage .page-header__title, .WikiaRail .rail-module h2 {  font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif; letter-spacing: 0.5px; }  .WikiaPage .page-header__title:before { content:'☰ '; }

/* .WikiaArticle h2 {  display: table; white-space: nowrap; padding: 0; border: 0; }  .WikiaArticle h2:before, .WikiaArticle h2:after {  content: ''; display: table-cell; position: relative; top: 0.5em; border-top: 1px solid #b2b2b2; }  .WikiaArticle h2:before { right:1.5%; width:5%; } .WikiaArticle h2:after { left:1.5%; width:90%; }

display: none; }
 * 1) gallery h2:after,#toctitle h2:after {

.WikiaArticle h2 { position: relative; } .WikiaArticle h2:after { content: ''; width: 80px; height: 2px; background: #b2b2b2; position: absolute; bottom: 0px; right: 0px; }

.WikiaRail .rail-module h2 { position: relative; } .WikiaRail .rail-module h2:after { content: ''; width: 70px; height: 1px; background: #b2b2b2; position: absolute; bottom: -5px; right: 0; }

/******** ********/

.article-thumb .caption { color: #565656; padding: 5px; background: rgba(0,0,0,0.1); }

/******** ********/ .editsection a { /*color: #A14296;*/ font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif; font-size: 13px; letter-spacing: 1px; font-style: normal; } .WikiaArticle .editsection img { display:none; }

/******** ********/ .octagon-container {  border: 1px solid #3a3a3a; max-width: 100%; margin-bottom: 18px; }  .octagon {  position: relative; left: 1em; width: calc(100% - 2em); padding: 1em 0; background: #dfdede; }  .octagon:before, .octagon:after {  content: ''; position: absolute; top: 0; bottom: 0; border-top: 1em solid #3a3a3a; border-bottom: 1em solid #3a3a3a; }       .octagon:before { left:-1em; border-right:1em solid #dfdede; } .octagon:after { right:-1em; border-left:1em solid #dfdede; } .octagon-container { animation: fadeInAnimation ease 3s; animation-iteration-count: 1; animation-fill-mode: forwards; }

@keyframes fadeInAnimation { 0% { 		opacity: 0; } 	100% { 		opacity: 1; } }

/******** ********/ hr.lined {  width: 300px; position: relative; height: 5px; display: block; border: 0; }   hr.lined:before, hr.lined:after {  content: ''; height: 3px; width: 225px; background: #b2b2b2; position: absolute; }   hr.lined:before { top:-2px; left:0; } hr.lined:after { bottom:-2px; right:0; } /******** ********/ .squarebox-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .squarebox { width: 160px; position: relative; height: 160px; border: 1px solid #3a3a3a; opacity: 1; margin-right: -1px; z-index: 10; }

.squarebox:before, .squarebox:after { content: ""; display: block; position: absolute; background: #dfdede; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; z-index: 1; opacity: 0.8; } .squarebox:before { width: calc(100% + 2px); height: 100%; height: 85%; } .squarebox:after { height: calc(100% + 2px); width: 100%; width: 85%; } .squarebox-content { width: 60%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); z-index: 2; }

/******** ********/ .quad-container { /*width: 500px;*/ display: flex; justify-content: center; align-items: stretch; flex-direction: column; } .quad-container a { /*width: 300px;*/ position: relative; height: 3em; border: 1px solid #3a3a3a; opacity: 1; margin-bottom: -1px; z-index: 10; display:block; color: #3a3a3a; text-transform: capitalize; font-size: 16px; }

.quad-container a:before, .quad-container a:after { content: ""; display: block; position: absolute; background: #dfdede; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; z-index: 1; opacity: 0.8; } .quad-container a:before { width: calc(100% + 2px); height: 60%; } .quad-container a:after { height: calc(100% + 2px); width: 85%; } span.quad { position: absolute; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); z-index: 2; display: block; width:100% } .quad-container a:hover:before, .quad-container a:hover:after, .quad-container a:hover { background: #ccc; text-decoration: none; color: #1a1a1a; }

/******** ********/ .jcarousel-wrapper	{ max-width:100%; margin:0; position:relative; } .jcarousel-wrapper:hover .jcarousel-control-prev, .jcarousel-wrapper:hover .jcarousel-control-next	{ opacity:1 !important; } .jcarousel	{ position:relative; overflow:hidden; } .jcarousel .jcarousel-list	{ position:relative; margin:0; padding:0; } .jcarousel .jcarousel-item	{ float:left; } .jcarousel-list .jcarousel-item-flat {	position: relative; overflow: hidden; height: auto; margin-bottom: .6em; }	.jcarousel-list .jcarousel-item-flat h2			{	font-size: 2em; line-height: 1.2em; white-space: nowrap; padding: 0; margin: 0; border: 0; overflow: visible; }			.jcarousel-list .jcarousel-item-flat h3			{	font-size: 1.5em; line-height: 1.2em; margin: 0; overflow: visible; }			.jcarousel-list .jcarousel-item-flat span {	display: block; font-size: 1em; line-height: 1.2em; overflow: visible; }			.jcarousel-list .jcarousel-item-flat p	{ margin:0; } .jcarousel-list .jcarousel-item-flat a	{ color:#fff; } .jcarousel-list .jcarousel-item-flat a:hover	{ color:lightblue; } .jcarousel-list .inner-box-right	{ right:5%; text-align:right; } .jcarousel-list .inner-box-left		{ left:5%; text-align:left; } .jcarousel-list .inner-box-right, .jcarousel-list .inner-box-left {	position: absolute; z-index: 20; margin-top: 2.5em; background: rgba(0,0,0,0.4); padding: 10px; width: 50%; min-width: 20em; color: #fff; font-weight: bold; text-shadow: #000 0.3em 0.3em 1em, #000 -0.1em -0.1em 1em; }		.jcarousel-item img	{ display:block; max-width:100%; height:auto !important; } .jcarousel-pagination {	position: absolute; bottom: 5px; left: 50%; margin: 0; margin-left: -22px; }  .jcarousel-pagination a			{	text-decoration: none; display: inline-block; height: 7px; width: 7px; line-height: 7px; background: #eee; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; text-indent: -9999px; margin-right: 7px; opacity: 0.7; }  .jcarousel-pagination a.active {	background: #fff; -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0.9; }		.jcarousel-control-prev, .jcarousel-control-next {	position: absolute; top: 50%; margin-top: -15px; width: 40px; height: 40px; text-align: center; text-decoration: none; font: 40px Arial, sans-serif; opacity: 0; }		.jcarousel-control-prev	{ left:0; } .jcarousel-control-next	{ right:0; } .jcarousel-control-prev:hover span, .jcarousel-control-next:hover span	{ display:block; } i.arrow {	border: solid #eee; border-width: 0 3px 3px 0; display: inline-block; padding: 8px; opacity: 0.8; }	i.arrow:hover	{ opacity:1; } i.arrow.right	{ -webkit-transform:rotate(-45deg); transform:rotate(-45deg); } i.arrow.left	{ -webkit-transform:rotate(135deg); transform:rotate(135deg); } /******** ********/

.logocarousel-wrapper	{ max-width:100%; margin:0; position:relative; } .logocarousel	{ position:relative; overflow:hidden; margin:auto; margin-bottom:20px; } .logocarousel .logocarousel-list	{ display:flex; position:relative; padding:0; justify-content:flex-start;} .logocarousel-item img	{ display:block; width:200px; height:auto !important; opacity:1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .logocarousel-item img:hover { opacity: .5; } .logocarousel-pagination {	position: absolute; bottom: -100%; left: 45%; }  .logocarousel-pagination a			{	text-decoration: none; display: inline-block; height: 3px; width: 18px; background: #9a9a9a; text-indent: -9999px; opacity: 0.7; margin: auto 5px; }  .logocarousel-pagination a.active {	background: #3a3a3a; opacity: 0.9; height: 4px; }		.logocarousel-control-prev, .logocarousel-control-next {	position: absolute; top: 50%; margin-top: -25px; width: 40px; height: 40px; text-align: center; text-decoration: none; font: 40px Arial, sans-serif; background: rbga(0,0,0,0.5); }		.logocarousel-control-prev	{ left:0; } .logocarousel-control-next	{ right:0; } .logocarousel-control-prev:hover span, .logocarousel-control-next:hover span	{ display:block; } .logocarousel-wrapper i.arrow {	border: solid #3a3a3a; border-width: 0 2px 2px 0; display: inline-block; padding: 8px; opacity: 0.8; }	.logocarousel-wrapper i.arrow:hover	{ opacity:1; } .logocarousel-wrapper i.arrow.right	{ -webkit-transform:rotate(-45deg); transform:rotate(-45deg); } .logocarousel-wrapper i.arrow.left	{ -webkit-transform:rotate(135deg); transform:rotate(135deg); } /******** ********/