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; }

/* 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; } .no-decor a:hover { text-decoration: none; } /* 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; }
 * 1) PageHeader #EditMessageWallGreeting .wds-button-group .wds-dropdown::before,
 * 2) PageHeader #EditMessageWallGreeting .wds-button-group .wds-dropdown::after,
 * 1) PageHeader

/* 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; }

/*User Avatar Color Glow*/ .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; } }