User:LunarSeong/common.css

/*Rainbow Username*/ @keyframes RainbowUserName{ from { -webkit-filter:hue-rotate(15deg); filter:hue-rotate(15deg); } to { -webkit-filter:hue-rotate(360deg); filter:hue-rotate(360deg); } }/* Rainbow Animation */ @keyframes rainbowanimate{ 0% {color:red;} 28% {color:orange;} 42% {color:yellow;} 56% {color:green;} 70% {color:blue;} 84% {color:indigo;} 100% {color:violet;} } /* Site glow */ .WikiaPage { box-shadow: 0px 0px 10px white; } /* Profile Masthead Changes */ .UserProfileMasthead .masthead-info hgroup { 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); }

@keyframes rainbowanimateother{ 0% {color:#ff9191;} 12% {color:#ffc191;} 24% {color:#fff891;} 36% {color:#95ff91;} 48% {color:#94cfff;} 60% {color:#948fff;} 72% {color:#d296ff;} 84% {color:#fd96ff} 96% {color:#ff96da;} 100% {color:#ff96b0;} } a[href*="/LunarSeong"], a[href*=":LunarSeong"] a[href$="/LunarSeong"], a[href$=":LunarSeong"]{ animation-name:rainbowanimateother; animation-duration:4s; animation-iteration-count:infinite; /*font-family:Josefin Sans;*/ }

/* Animated arrows */ .wds-global-navigation .wds-dropdown::after, .wds-community-header .wds-community-header__local-navigation .wds-tabs .wds-tabs__tab .wds-dropdown::before, .wds-community-header .wds-community-header__local-navigation .wds-tabs .wds-tabs__tab .wds-dropdown::after, .page-header .page-header__contribution .page-header__contribution-buttons .wds-button-group .wds-dropdown::before, .page-header .page-header__contribution .page-header__contribution-buttons .wds-button-group .wds-dropdown::after, .wds-community-header__wiki-buttons .wds-dropdown::before, .wds-community-header__wiki-buttons .wds-dropdown::after { display: none !important; } .wds-global-navigation .wds-dropdown__content { -webkit-animation: dropdown-global 0.35s; -moz-animation: dropdown-global 0.35s; animation: dropdown-global 0.35s; } .wds-community-header .wds-community-header__local-navigation .wds-tabs .wds-tabs__tab .wds-dropdown .wds-dropdown__content { -webkit-animation: dropdown-topnav 0.3s; -moz-animation: dropdown-topnav 0.3s; animation: dropdown-topnav 0.3s; } .wds-community-header .wds-community-header__local-navigation .wds-tabs .wds-tabs__tab .wds-dropdown .wds-dropdown__content .wds-dropdown-level-2__content { -webkit-animation: dropdown-animation 0.3s; -moz-animation: dropdown-animation 0.3s; animation: dropdown-animation 0.3s; } .page-header .page-header__contribution .page-header__contribution-buttons .wds-button-group .wds-dropdown .wds-dropdown__content, #EditMessageWallGreeting .wds-button-group .wds-dropdown .wds-dropdown__content, .wds-community-header__wiki-buttons .wds-dropdown .wds-dropdown__content { -webkit-animation: contribution-dropdown 0.3s linear; -moz-animation: contribution-dropdown 0.3s linear; animation: contribution-dropdown 0.3s linear; } .wds-dropdown__content.wds-global-navigation__search-suggestions { -webkit-animation: searchsuggestions-dropdown 0.35s; -moz-animation: searchsuggestions-dropdown 0.35s; animation: searchsuggestions-dropdown 0.35s; } @keyframes dropdown-global { from { opacity: 0; top: 45px; } to { opacity: 1; } } @keyframes dropdown-topnav { from { opacity: 0; top: 30px; } to { opacity: 1; top: 40px; } } @keyframes dropdown-animation { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } } @keyframes contribution-dropdown { from { opacity: 0; top: 25px; } to { opacity: 1; top: 35px; } } @keyframes searchsuggestions-dropdown { from { top: 80%; opacity: 0; } to { top: calc(1px+100%); opacity: 1; } } .wds-dropdown-level-2:hover .wds-dropdown-chevron { transform: rotate(-90deg) translateY(3px) !important; } .wds-dropdown-level-2 .wds-dropdown-chevron { -webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; -o-transition: transform 0.3s; transition: transform 0.3s; } .wds-dropdown__toggle-chevron { transition: transform 0.3s; }
 * 1) PageHeader #EditMessageWallGreeting .wds-button-group .wds-dropdown::before,
 * 2) PageHeader #EditMessageWallGreeting .wds-button-group .wds-dropdown::after,
 * 1) PageHeader

/*	Homepage CSS (Joritochip)

.no-decor a:hover { text-decoration: none; }

/* Navigation card hover transitions */ .home-nav-card:hover img { transform: scale(1.05); } .home-nav-card:hover a > div { background-color: #fbf3ee !important; } .home-nav-card a > div { transition: 0.2s; } .home-nav-image .floatnone img { max-height: 6em; width: 100%; transition: 0.2s; object-fit: cover !important; }

/* Chevron arrow image + animations */ .chevron { background: url(https://roblox.fandom.com/wiki/Special:Redirect/file/White-chevron.svg) no-repeat center; background-size: 100% 100%; vertical-align: middle; display: inline-block; height: 0.7rem; width: 0.49rem; transition: 0.2s ease-out; } a:hover .chevron { transform: translateX(3px); } .chevron.dark { filter: invert(85%); } .home-frame-footer .chevron { margin-left: 0.5rem; } .home-social-frame .chevron { height: 1rem; width: 0.7rem; }

/* Resize and hide cards depending on screen width */ @media screen and (max-width: 1064px) { .home-nav-container .home-nav-card:nth-of-type(6) { display: none !important; } .home-nav-card { width: 18.5% !important; } } @media only screen and (min-width: 1024px) { .main-page-tag-lcs-exploded { width: calc(100% - 340px); } .main-page-tag-rcs, .main-page-tag-rcs .rcs-container { width: 320px; } } .fandom-community-header__background { background-position: 50% 15%; }

/*Adds Shadow to Fandom Header text* .main-container .fandom-community-header__community-name-wrapper, .main-container .fandom-community-header__local-navigation .wds-tabs__tab-label { text-shadow: 2px 2px 4px #000; } .main-container .fandom-community-header__local-navigation .first-level-item .wds-icon { filter: drop-shadow(2px 2px 4px black); } /* End homepage CSS */

/* Center tabs in infoboxes https://community.fandom.com/f/p/4400000000003176261*/ .portable-infobox .wds-tabs__tab:first-child { margin-left: auto; } .portable-infobox .wds-tabs__tab:last-child { margin-right: auto; }

/* semicolan line-height/space fix https://dev.fandom.com/f/p/4400000000000014423/r/4400000000000042444 paragraph bottom space fix*/ .page-content dl { margin-bottom: 0; }

.page-content p, .page-content section { margin-bottom: 12px; }

.page-User_ div.user-identity-avatar img.user-identity-avatar__image, .page-Message_Wall_ div.user-identity-avatar img.user-identity-avatar__image, .page-User_blog_ div.user-identity-avatar img.user-identity-avatar__image, .page-Special_Contributions_ div.user-identity-avatar img.user-identity-avatar__image, .page-Special_UserProfileActivity_ div.user-identity-avatar img.user-identity-avatar__image { -webkit-animation-name: pulsate-avatar-large-manager; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; animation-name: pulsate-avatar-large-manager; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; }

img.wds-avatar__image[alt=''] { -webkit-animation-name: pulsate-avatar-manager; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; animation-name: pulsate-avatar-manager; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } div.EntityHeader_avatar__2TDnq[alt=''] { -webkit-animation-name: pulsate-avatar-small-manager; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; animation-name: pulsate-avatar-small-manager; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } @-webkit-keyframes pulsate-avatar-manager { from { -webkit-box-shadow: 0px 0px 1px 2px #00d6d6; -moz-box-shadow: 0px 0px 1px 2px #00d6d6; box-shadow: 0px 0px 1px 2px #00d6d6; }   to { -webkit-box-shadow: 0px 0px 8px 6px #00d6d6; -moz-box-shadow: 0px 0px 8px 6px #00d6d6; box-shadow: 0px 0px 8px 6px #00d6d6; } } @keyframes pulsate-avatar-manager { from { -webkit-box-shadow: 0px 0px 1px 2px #00d6d6; -moz-box-shadow: 0px 0px 1px 2px #00d6d6; box-shadow: 0px 0px 1px 2px #00d6d6; }   to { -webkit-box-shadow: 0px 0px 8px 6px #00d6d6; -moz-box-shadow: 0px 0px 8px 6px #00d6d6; box-shadow: 0px 0px 8px 6px #00d6d6; } } @-webkit-keyframes pulsate-avatar-small-manager { from { -webkit-box-shadow: 0px 0px 1px 2px #00d6d6; -moz-box-shadow: 0px 0px 1px 2px #00d6d6; box-shadow: 0px 0px 1px 2px #00d6d6; }   to { -webkit-box-shadow: 0px 0px 4px 3px #00d6d6; -moz-box-shadow: 0px 0px 4px 3px #00d6d6; box-shadow: 0px 0px 4px 3px #00d6d6; } } @keyframes pulsate-avatar-small-manager { from { -webkit-box-shadow: 0px 0px 1px 2px #00d6d6; -moz-box-shadow: 0px 0px 1px 2px #00d6d6; box-shadow: 0px 0px 1px 2px #00d6d6; }   to { -webkit-box-shadow: 0px 0px 4px 3px #00d6d6; -moz-box-shadow: 0px 0px 4px 3px #00d6d6; box-shadow: 0px 0px 4px 3px #00d6d6; }           } @-webkit-keyframes pulsate-avatar-large-manager { from { -webkit-box-shadow: 0px 0px 1px 2px #00d6d6; -moz-box-shadow: 0px 0px 1px 2px #00d6d6; box-shadow: 0px 0px 1px 2px #00d6d6; }   to { -webkit-box-shadow: 0px 0px 12px 9px #00d6d6; -moz-box-shadow: 0px 0px 12px 9px #00d6d6; box-shadow: 0px 0px 12px 9px #00d6d6; } } @keyframes pulsate-avatar-large-manager { from { -webkit-box-shadow: 0px 0px 1px 2px #00d6d6; -moz-box-shadow: 0px 0px 1px 2px #00d6d6; box-shadow: 0px 0px 1px 2px #00d6d6; }   to { -webkit-box-shadow: 0px 0px 12px 9px #00d6d6; -moz-box-shadow: 0px 0px 12px 9px #00d6d6; box-shadow: 0px 0px 12px 9px #00d6d6; } }

.page-User_LunarSeong div.user-identity-avatar img.user-identity-avatar__image, .page-Message_Wall_LunarSeong div.user-identity-avatar img.user-identity-avatar__image, .page-User_blog_LunarSeong div.user-identity-avatar img.user-identity-avatar__image, .page-Special_Contributions_LunarSeong div.user-identity-avatar img.user-identity-avatar__image, .page-Special_UserProfileActivity_LunarSeong div.user-identity-avatar img.user-identity-avatar__image { -webkit-animation-name: pulsate-avatar-large-bureaucrat; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; animation-name: pulsate-avatar-large-bureaucrat; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } img.wds-avatar__image[alt='LunarSeong'] { -webkit-animation-name: pulsate-avatar-bureaucrat; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; animation-name: pulsate-avatar-bureaucrat; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } div.EntityHeader_avatar__2TDnq[alt='LunarSeong'] { -webkit-animation-name: pulsate-avatar-small-bureaucrat; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; animation-name: pulsate-avatar-small-bureaucrat; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; }

@-webkit-keyframes pulsate-avatar-bureaucrat { from { -webkit-box-shadow: 0px 0px 1px 2px #00d6d6; -moz-box-shadow: 0px 0px 1px 2px #00d6d6; box-shadow: 0px 0px 1px 2px #00d6d6; }   to { -webkit-box-shadow: 0px 0px 8px 6px #00d6d6; -moz-box-shadow: 0px 0px 8px 6px #00d6d6; box-shadow: 0px 0px 8px 6px #00d6d6; } } @keyframes pulsate-avatar-bureaucrat { from { -webkit-box-shadow: 0px 0px 1px 2px #00d6d6; -moz-box-shadow: 0px 0px 1px 2px #00d6d6; box-shadow: 0px 0px 1px 2px #00d6d6; }   to { -webkit-box-shadow: 0px 0px 8px 6px #00d6d6; -moz-box-shadow: 0px 0px 8px 6px #00d6d6; box-shadow: 0px 0px 8px 6px #00d6d6; } } @-webkit-keyframes pulsate-avatar-small-bureaucrat { from { -webkit-box-shadow: 0px 0px 1px 2px #00d6d6; -moz-box-shadow: 0px 0px 1px 2px #00d6d6; box-shadow: 0px 0px 1px 2px #00d6d6; }   to { -webkit-box-shadow: 0px 0px 4px 3px #00d6d6; -moz-box-shadow: 0px 0px 4px 3px #00d6d6; box-shadow: 0px 0px 4px 3px #00d6d6; } } @keyframes pulsate-avatar-small-bureaucrat { from { -webkit-box-shadow: 0px 0px 1px 2px #00d6d6; -moz-box-shadow: 0px 0px 1px 2px #00d6d6; box-shadow: 0px 0px 1px 2px #00d6d6; }   to { -webkit-box-shadow: 0px 0px 4px 3px #00d6d6; -moz-box-shadow: 0px 0px 4px 3px #00d6d6; box-shadow: 0px 0px 4px 3px #00d6d6; } } @-webkit-keyframes pulsate-avatar-large-bureaucrat { from { -webkit-box-shadow: 0px 0px 1px 2px #00d6d6; -moz-box-shadow: 0px 0px 1px 2px #00d6d6; box-shadow: 0px 0px 1px 2px #00d6d6; }   to { -webkit-box-shadow: 0px 0px 12px 9px #00d6d6; -moz-box-shadow: 0px 0px 12px 9px #00d6d6; box-shadow: 0px 0px 12px 9px #00d6d6; } } @keyframes pulsate-avatar-large-bureaucrat { from { -webkit-box-shadow: 0px 0px 1px 2px #00d6d6; -moz-box-shadow: 0px 0px 1px 2px #00d6d6; box-shadow: 0px 0px 1px 2px #00d6d6; }   to { -webkit-box-shadow: 0px 0px 12px 9px #00d6d6; -moz-box-shadow: 0px 0px 12px 9px #00d6d6; box-shadow: 0px 0px 12px 9px #00d6d6; } }