MediaWiki:Common.css

/* === Spoiler === */ .spoilerblur { filter: blur(2px); -webkit-filter: blur(2px); opacity: .40; display: inline; -webkit-transition: all 1s 0 linear; -moztransition: all 1s 0 linear; -o-transition: all 1s 0 linear; -ms-transition: all 1s 0 linear; transition: all 1s 0 linear; } .spoilerblur:hover { filter: blur(0px); -webkit-filter: blur(0px); opacity: 1; text-shadow: 0 0 0 transparent; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; -ms-transition-delay: 0.5s; transition-delay: 0.5s; } a:hover, a:active { color: #FFFFFF !important; text-decoration: none; text-shadow: #000099 0 0 3px, #000099 0 0 3px, #000099 0 0 3px; transition: all 0.5s ease-in; }

a.new:hover, a.new:active { color: #FFFFFF !important; text-decoration: none; text-shadow: #000099 0 0 3px, #000099 0 0 3px, #000099 0 0 3px; transition: all 0.5s ease-in; } a { transition: all 0.5s ease-out; }	margin: 0; padding: 0; box-sizing: border-box; }

body { display: flex; padding-top: 50px; justify-content: center; font-family: "Poppins", sans-serif; background-color: var(--bg-gray); color: #9baacf; }

.tabs { width: 90%; }

.tabs .tabs--nav { position: relative; display: inline-flex; align-items: center; padding: 10px; box-shadow: 1rem 0.3rem 0.6rem -0.6rem var(--shadow-gray), -0.2rem -0.2rem 0.5rem var(--shadow-white); border-radius: 1rem 1rem 0 0; background-color: var(--bg-gray); }

.tabs .tabs--nav span { padding: 15px; display: block; transition-delay: 0s; transition-duration: 0.5s; border-radius: 0.75rem; cursor: pointer; }

.tabs .tabs--nav span.wait-animation { pointer-events: none; }

.tabs .tabs--nav span:not(:first-of-type):not(:last-of-type) { margin: 0 10px; }

.tabs .tabs--nav span.active { color: var(--text-purple); transition-delay: 0.25s; transition-duration: 0.5s; }

.tabs .tabs--nav span:not(.active):hover { /* 	box-shadow: inset 0.15em 0.15em 0.15em var(--shadow-white), inset -0.15em -0.15em 0.15em var(--shadow-gray), 0.3rem 0.3rem 0.6rem var(--shadow-gray), -0.3rem -0rem 0.6rem var(--shadow-white); */ box-shadow: inset 0.2rem 0.2rem 0.5rem var(--shadow-gray), inset -0.2rem -0.2rem 0.5rem var(--shadow-white); }

.tabs .tabs--nav .tabs--fx { position: absolute; /* 	box-shadow: inset 0.2rem 0.2rem 0.5rem var(--shadow-gray), inset -0.2rem -0.2rem 0.5rem var(--shadow-white); */ box-shadow: inset 0.15em 0.15em 0.15em var(--shadow-white), inset -0.15em -0.15em 0.15em var(--shadow-gray), 0.3rem 0.3rem 0.6rem var(--shadow-gray), -0.3rem -0rem 0.6rem var(--shadow-white); border-radius: 0.75rem; opacity: 0; }

.tabs .tabs--content { padding: 20px; box-shadow: 0.3rem 0.3rem 0.6rem var(--shadow-gray), -0.2rem -0.2rem 0.5rem var(--shadow-white); border-radius: 0 1rem 1rem 1rem; background-color: var(--bg-gray); }

.tabs .tabs--content h2 { color: var(--text-purple); }

.social-media { position: fixed; bottom: 15px; right: 15px; display: flex; }

.social-media > * { width: 60px; height: 60px; background-color: var(--bg-gray); display: flex; justify-content: center; align-items: center; text-decoration: none; font-size: 24px; box-shadow: inset 0.15em 0.15em 0.15em var(--shadow-white), inset -0.15em -0.15em 0.15em var(--shadow-gray), 0.3rem 0.3rem 0.6rem var(--shadow-gray), -0.3rem -0rem 0.6rem var(--shadow-white); border-radius: 50%; margin: 5px; transition: 0.3s; }

.social-media > *:hover { transform: translateY(-5px); }

.fa-twitter { color: #19a9dd; }

.fa-github, .fa-codepen { color: #010101; }

.fa-linkedin { color: #19a9dd; }

.fa-instagram { color: #ff0066; }

.ext-wordmark img { object-fit: contain; width: 170px; height: 170px; } /* Characters*/ .char-element img { transition: all 0.3s; }

.char-element img:hover { transform: scale(1.1); } /*Dowm codes is ony to be used by User:Just Some Guy In Nutshell*/ .Card{ text-align:center; padding:20px; background-color:rgba(255,255,255,.9); cursor:pointer; z-index:1; transition:.5s; color:black } .Card:before, .Card:after{ content:''; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:-1; animation:RotateDiv 5s linear infinite; } .Card:before{ border-radius:130% 151% 189% 166%; background-color:rgba(255, 255, 255,.7); animation-delay:0s; transition:.5s; } .Card:after{ border-radius:145% 86% 80% 90%; background-color:rgba(255, 255, 255,.3); animation-delay:.2s; transition:.5s; } .Card:hover{ background-color:rgba(0,0,0,.8); color:#fff; } .Card:hover:after{ background-color: rgba(0,0,0,.7); } .Card:hover:before{ background-color: rgba(0,0,0,.3); } .Card div h2{ font-size:14px; } .Card div p{	margin-top:20px; font-size:14px; } @keyframes RotateDiv{ 0%{		transform:rotate(0deg); }	100%{		transform:rotate(360deg); } }

/*btn*/ .btn-grad {background-image: linear-gradient(to right, #02AAB0 0%, #00CDAC 51%, #02AAB0  100%)} .btn-grad { margin: 10px; padding: 15px 45px; text-align: center; text-transform: uppercase; transition: 0.5s; background-size: 200% auto; color: white; box-shadow: 0 0 20px #eee; display: block; }

.btn-grad:hover { background-position: right center; /* change the direction of the change here */ color: #fff; text-decoration: none; } .page-Xyzz h2 { font-weight: bold; background-color:blue; } /*#userProfileApp { background-image: url("https://static.wikia.nocookie.net/immortality/images/7/7f/By-the-Grace-of-the-Gods-Season-2-release-date-Kami-tachi-ni-Hirowareta-Otoko-Season-2-KamiHiro-anime-1024x576.jpg/revision/latest/scale-to-width-down/800?cb=20210708051430");background-repeat: no-repeat; } /*/ /* Makes the scrollbar 8px wide */
 * -webkit-scrollbar {

width: 8px; }

/* Makes the scrollbar track have a black background */
 * -webkit-scrollbar-track {

background: black; }

/* Makes the scrollbar bar have a green background */
 * -webkit-scrollbar-thumb {

background: #228B22; }

/* Makes the background for the scrollbar bar a darker shade of green when hovered */
 * -webkit-scrollbar-thumb:hover {

background: #222; } /*scrool*/ .WikiaRail .rail-module, .WikiaRail .module { color: #800040; border-bottom: 2px dotted #800040; border-top: 2px dotted #800040; border-right: 2px dotted #800040; border-left: 2px dotted #800040; border-radius: 23px 0 25px 0; margin: 0; padding: 15px; } .WikiaRail .module > h2, .WikiaRail .rail-module h2 { background: -webkit-linear-gradient(#b30047, #800040); border-color: transparent; border-image: linear-gradient(to right, transparent 0%, #fd0000 30%, #bd0000 70%, #fd0000 90%, transparent 100%) 1 1 1 1; border-style: none none solid; border-width: 0 0 2px; color: #b30047; font-size: 1.7em !important; line-height: 1em !important; margin-bottom: 15px; text-align: center; text-transform: uppercase; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .WikiaRail .module { background: none; border-color: transparent; border-style: none; border-width: 0; }

/* CSS placed here will be applied to all skins */

/* -- Community Header -- */

.community-header { background-image: url("https://i.imgur.com/4jsJ3fN.gif") !important; }