MediaWiki:Wikia.css

/**********WILL NOT WORK*********** /**START Blinking Property** .blink { animation: blink normal 2.5s infinite; -webkit-animation-fill-mode:forwards; opacity:0; transform:scale(0); } @keyframes blink { 0% {opacity:0;transform:scale(0)} 50% {opacity:1;transform:scale(1)} 100% {opacity:0;transform:scale(0)} } /**END Blinking Property** /**START Glowing text** .glow { font-size: 99%; color: #fff; text-align: center; -webkit-animation: glow 1s ease-in-out infinite alternate; -moz-animation: glow 1s ease-in-out infinite alternate; animation: glow 1s ease-in-out infinite alternate; } @-webkit-keyframes glow { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px cyan, 0 0 40px cyan, 0 0 50px cyan, 0 0 60px cyan, 0 0 70px cyan; }   to { text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6; } } /**START WikiBackGround .WikiaPageContentWrapper { background-image: url(https://images.wikia.com/lol/images/b/b8/Prince_and_Knight..png); background-attachment: fixed; background-size: 50%; }
 * END Glowing text**
 * END WikiBackGround**
 * WILL NOT WORK***********/

/**************/ /* Link hover */ /**************/ a:hover { text-shadow: #F10FFF 0 0 7px; color: #28D9FF !important; text-decoration:none; -webkit-transition: all .4s linear 0s; -moz-transition: all .4s linear 0s; -ms-transition: all .4s linear 0s; -o-transition: all .4s linear 0s; transition: all .4s linear 0s; }

/* Rainbow CSS Animation for, text? (recent wiki activity\special pages) */ @keyframes RainbowModules{ 0% {   color: blue; } 14.3% {    color: yellow; } 28.6% {    color: green; } 42.9% {    color: violet; } 57.1% {    color: red; } 71.4% {    color: fuchsia; } 85.7% {    color: orange; } 100% {    color: blue; } }

/* Rainbow CSS Animation for, text? (user names)*/ @keyframes RainbowUserName{ from { -webkit-filter:hue-rotate(15deg); filter:hue-rotate(15deg); } to { -webkit-filter:hue-rotate(360deg); filter:hue-rotate(360deg); } } /* Colored Usernames, Thingies */ /*--*/ /*--ADMINISTRATORS--*/ /*--*/ a[href="/wiki/User:LuvOf99Th"] { color: #6666ff !important; animation: RainbowUserName 3s infinite; }

/*--*/ /*--Content Modreators--*/ /*--*/ a[href$=":IdleSquadron"], a[href$="/IdleSquadron"]{ color: #FFFFFF !important; text-shadow:0 0 13px #FFFFFF; font-size: 110%; font-weight: bold; background: -webkit-linear-gradient(330deg, #a3d9ff, #ffa3f6, #FFFFFF, #ffa3f6, #a3d9ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Site glow, Things */ .WikiaPage { border: 3px solid #F10FFF; box-shadow: 0px 0px 50px #FDFEFE; }

/** Scrollbar, Things **/ /* WebKit and Blink */
 * -webkit-scrollbar {

width: 15px; height: 6px; }
 * -webkit-scrollbar-thumb {

border:none !important; background: #28D9FF !important; }
 * -webkit-scrollbar-track {

background-color: transparent !important; }

/* Recent Wiki Activity, Thingies */ section#wikia-recent-activity { background-color: #27d8fe; background-image: linear-gradient(       to top right,        #f10fff calc(100% * 1 / 13),        #28d8ff calc(100% * 2 / 13),        #28d8ff calc(100% * 3 / 13),        #f10fff calc(100% * 4 / 13),        #f10fff calc(100% * 5 / 13),        #28d8ff calc(100% * 6 / 13),        #28d8ff calc(100% * 7 / 13),        #f10fff calc(100% * 8 / 13),        #f10fff calc(100% * 9 / 13),        #28d8ff calc(100% * 10 / 13),        #28d8ff calc(100% * 11 / 13),        #f10fff calc(100% * 12 / 13)    ); background-size: calc(100% * 13 / 3) calc(100% * 13 / 3); background-position: 80% bottom; box-shadow: 0 0 10px white; } @keyframes hor-trans-diag-grad { to { background-position-x: 0%; } } @keyframes hvr-pulse-shrink { to { transform: scale(0.9); } } section#wikia-recent-activity:hover, section#wikia-recent-activity:focus, section#wikia-recent-activity:active { animation-name: hvr-pulse-shrink, hor-trans-diag-grad; animation-duration: 0.3s, 1.2s; animation-timing-function: linear, linear; animation-iteration-count: infinite, infinite; animation-direction: alternate, normal; } /* Heading color */ section#wikia-recent-activity h2 { color: #F10FFF; text-shadow:0 0 7px White; animation: RainbowModules 6s linear infinite; }

/* Popular Pages, Things */ /* Background image and color */ section#recirculation-rail { background-image: linear-gradient(to top right, #28d8ff 33%, #f10fff 67%); background-color: #27D8FE; } /* Heading color */ section#recirculation-rail h2 { color: #F10FFF; text-shadow:0 0 7px White; }

/* Buzz */ @-webkit-keyframes hvr-buzz { 50% {   -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 100% {    -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } } @keyframes hvr-buzz { 50% {   -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 100% {    -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } } section#recirculation-rail { vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 10px White; } section#recirculation-rail:hover, section#recirculation-rail:focus, section#recirculation-rail:active { -webkit-animation-name: hvr-buzz; animation-name: hvr-buzz; -webkit-animation-duration: 0.15s; animation-duration: 0.15s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }

/* TOC Restyling, Things */ .toc { -moz-border-radius:1ex; border-radius:3ex; box-shadow:0 0 10px inset #F10FFF; background: linear-gradient(to top left, #28d8ff 0%, #33ccff 100%); }

.toctitle { color:black; }

/* Flip card, credit goses to Grudgeholderr'sStuffWiki */ #flip-card { transition: transform 0.9s; }   #flip-card-container:hover #flip-card { transform: rotateY(45deg) rotateZ(10deg); }   #flip-card-container:active #flip-card { transform: rotateY(180deg) rotateZ(180deg); }   #flip-card-side { backface-visibility: hidden; }

/* Images of Avatars, Options */ .page-User_LuvOf99Th #userProfileApp { background-image: url(https://vignette.wikia.nocookie.net/central/images/b/bb/Julias_can_Fly...%21.png/revision/latest/scale-to-width-down/208?cb=20200702095609); background-position: right; background-repeat: no-repeat; background-size: 150px; }

/* LuvOf99Th's Sig's, Hover */ /* Pulse Grow */ @-webkit-keyframes hvr-pulse-grow { to { -webkit-transform: scale(1.1); transform: scale(1.1); } } @keyframes hvr-pulse-grow { to { -webkit-transform: scale(1.1); transform: scale(1.1); } } .customclass { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .customclass:hover, .customclass:focus, .customclass:active { -webkit-animation-name: hvr-pulse-grow; animation-name: hvr-pulse-grow; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; }

/* all profile tabs, Profile Tab Designs */ border-bottom: 2px solid black; }     border: 2px solid black; border-bottom: 0; border-radius: 10px 10px 0 0; font-size: 14px; font-weight: normal; line-height: 23px; opacity: 1.0; padding: 5px; }     color: black; } /* active (current) profile tab */ background: linear-gradient(to top right, #27d8fe 15%, #f10fff 85%); border-bottom: 0; }     color: black; font-weight: bold; }
 * 1) userProfileApp .user-profile-navigation {
 * 1) userProfileApp .user-profile-navigation__link {
 * 1) userProfileApp .user-profile-navigation__link a {
 * 1) userProfileApp .user-profile-navigation__link.is-active {
 * 1) userProfileApp .user-profile-navigation__link.is-active a {

/* Wobble Top */ @-webkit-keyframes hvr-wobble-top { 16.65% {   -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% {    -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% {    -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% {    -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% {    -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% {    -webkit-transform: skew(0); transform: skew(0); } } @keyframes hvr-wobble-top { 16.65% {   -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% {    -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% {    -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% {    -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% {    -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% {    -webkit-transform: skew(0); transform: skew(0); } } .user-profile-navigation__link.is-active { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .user-profile-navigation__link.is-active:hover, .user-profile-navigation__link.is-active:focus, .user-profile-navigation__link.is-active:active { -webkit-animation-name: hvr-wobble-top; animation-name: hvr-wobble-top; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* inactive profile tabs */ background: linear-gradient(to bottom right, #27d8fe 15%, #f10fff 85%); border-bottom: 0; }     border: 2px solid white; border-bottom: 0; }
 * 1) userProfileApp .user-profile-navigation__link.false {
 * 1) userProfileApp .user-profile-navigation__link.false:hover {

/* Wobble Bottom */ @-webkit-keyframes hvr-wobble-bottom { 16.65% {   -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% {    -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% {    -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% {    -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% {    -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% {    -webkit-transform: skew(0); transform: skew(0); } } @keyframes hvr-wobble-bottom { 16.65% {   -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% {    -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% {    -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% {    -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% {    -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% {    -webkit-transform: skew(0); transform: skew(0); } } .user-profile-navigation__link.false { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .user-profile-navigation__link.false:hover, .user-profile-navigation__link.false:focus, .user-profile-navigation__link.false:active { -webkit-animation-name: hvr-wobble-bottom; animation-name: hvr-wobble-bottom; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }

/*   Animated Snake Border Box CSS @Source: https://www.youtube.com/watch?v=w0V4HAYYCbU @Example Page: w:c:monobunny:Animated Snake Border Box */ /* tag (1) */ div#snake-border-box { position: absolute; width: 30%; height: 150px; padding: 30px; color: #1670f0; letter-spacing: 2px; text-decoration: none; background: #0C002B; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); overflow: hidden; } div#snake-border-box::before { content: ''; position: absolute; top: 2px; left: 2px; bottom: 2px; width: 50%; background: rgba(255, 255, 255, 0.05); } /* tag (1) */ div#snake-border-box span:nth-child(1) { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(to right, #0C002B, #1779FF); animation: animate1 2s linear infinite; } @keyframes animate1 { 0% {       transform: translateX(-100%); }   100% {        transform: translateX(100%); } } /* tag (2) */ div#snake-border-box span:nth-child(2) { position: absolute; top: 0; right: 0; width: 2px; height: 100%; background: linear-gradient(to bottom, #0C002B, #1779FF); animation: animate2 2s linear infinite; animation-delay: 1s; } @keyframes animate2 { 0% {       transform: translateY(-100%); }   100% {        transform: translateY(100%); } } /* tag (3) */ div#snake-border-box span:nth-child(3) { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(to left, #0C002B, #1779FF); animation: animate3 2s linear infinite; } @keyframes animate3 { 0% {       transform: translateX(100%); }   100% {        transform: translateX(-100%); } } /* tag (4) */ div#snake-border-box span:nth-child(4) { position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: linear-gradient(to top, #0C002B, #1779FF); animation: animate4 2s linear infinite; animation-delay: 1s; } @keyframes animate4 { 0% {       transform: translateY(100%); }   100% {        transform: translateY(-100%); } }

/* header text of snake box */ text-align: center; } /* general box text of snake box */ }
 * 1) snake-border-box #snake-border-box-header {
 * 1) snake-border-box #snake-border-box-text {

/* Spiny Circles */ .SpinyCircle1 { animation-name: SpinyCircle1; animation-duration: 5000ms; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes SpinyCircle1 { from { transform:rotate(0deg); }   to { transform:rotate(360deg); } }

.SpinyCircle2 { animation-name: SpinyCircle2; animation-duration: 5000ms; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes SpinyCircle2 { from { transform:rotate(360deg); }   to { transform:rotate(0deg); } }

.SpinyCircle1 { animation: SpinyCircle1 5s linear infinite; } .BackAnim { animation: BackAnim 5s linear infinite; } .SpinyCircle1.BackAnim { animation-name: SpinyCircle1, BackAnim; animation-duration: 5s, 5s; animation-timing-function: linear, linear; animition-iteration-count: infinite, infinite; }

/* Animated Boxes */ .AnimatedBox1 { animation-name: AnimatedBox1; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; margin-left: 30px; margin-top: 5px; } @keyframes AnimatedBox1 { from { transform: translate(0, 0px); }   65%  { transform: translate(0, 50px); }   to   { transform: translate(0, -0px); }   }

.AnimatedBox2 { -webkit-animation: AnimatedBox2 3s infinite linear; } @-webkit-keyframes AnimatedBox2 { from { -webkit-transform: rotate(0deg); }   to { -webkit-transform: rotate(360deg); } }

/* Background Animations for Boxes */ .BackAnim { animation: BackAnim 5s linear infinite; }

@keyframes BackAnim { 0% {       background-color:#FF00BB; }   14.2857142857% {        background-color:#FF0000; }   28.5714285714% {        background-color:#FFFF00; }   42.8571428571% {        background-color:#00FF00; }   57.1428571429% {        background-color:#00FFFF; }   71.4285714286% {        background-color:#0000FF; }   85.7142857143% {        background-color:#BB00FF; }   to { background-color:#FF00BB; } }

.BackAnim2 { animation: BackAnim2 4s linear infinite; }

@-webkit-keyframes BackAnim2 { from { -webkit-filter:sepia(100%) hue-rotate(10deg) saturate(400%); filter:sepia(100%) hue-rotate(10deg) saturate(400%);} to { -webkit-filter: sepia(100%) hue-rotate(360deg) saturate(400%); filter:sepia(100%) hue-rotate(360deg) saturate(400%);} } @keyframes BackAnim2 { from { -webkit-filter:sepia(100%) hue-rotate(10deg) saturate(400%); filter:sepia(100%) hue-rotate(10deg) saturate(400%);} to { -webkit-filter: sepia(100%) hue-rotate(360deg) saturate(400%); filter:sepia(100%) hue-rotate(360deg) saturate(400%);} }

/* Community Header */ .wds-community-header { -webkit-transition: all 300ms; -moz-transition: all 300ms; -ms-transition: all 300ms; -o-transition: all 300ms; transition: all 300ms; } .wds-community-header:hover { -moz-box-shadow:0 0 30px #78A5FF; -webkit-box-shadow:0 0 30px #78A5FF; box-shadow:0 0 30px #78A5FF; animation-name: HeaderShadow; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes HeaderShadow { 0% {       box-shadow: 0 0 50px #F10FFF; }   70% {          box-shadow: 0 0 25px #28D9FF; }   100% {        box-shadow: 0 0 50px #F10FFF; } }

/* Category */ .WikiaArticleCategories, .article-categories, .CategorySelect.articlePage { background: #28D8FF; background-image: url(https://vignette.wikia.nocookie.net/kuroshitsuji/images/5/54/Victorian_wallpaper.png/revision/latest?cb=20200702014249); background-size:cover; background-color: #28d8ff hsla(0,0%,100%,0.70); border: 2px solid #F10FFF; line-height: normal; animation-name: HeaderShadow; animation-duration: 4s; animation-iteration-count: infinite; } .CategorySelect.articlePage > .toolbar { background-color:transparent; border-top:0; color:#f10fff; } .WikiaArticleCategories, .CategorySelect.articlePage a, .catlinks ul, .mw-normal-catlinks a, .article-categories, .CategorySelect.articlePage { color:#f10fff; opacity:1; border-radius:10px; } .CategorySelect.articlePage .input { background-color: #F10FFF; border-radius: 3px; color: #636af2; }

/* Page things */ .page-header__separator { background-color: cyan; }

.page-header__contribution-buttons * { box-shadow:27px inset white; }

.tag.usergroup-bureaucrat { background-color: gold !important; color: black !important; } .tag.usergroup-sysop { background-color: green !important; color: cyan !important; }