Link to article: SCP-4367.
/* RECOLORING THE TABS */
:root {
--tab-flicker-color-1: var(--swatch-primary-darker);
--tab-flicker-color-2: var(--swatch-primary);
}
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
margin: 0 0.25em 0.5em;
box-shadow: 0px 0px 0px rgba(var(--dark-accent));
transition: all 300ms cubic-bezier(0.4,0.0,0.2,1);
background-color: rgb(var(--swatch-menubg-light-color));
}
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected {
margin: -0.25em 0 0.25em 0;
}
.yui-navset .yui-nav li:not([class*="selected"]) a:hover,
.yui-navset .yui-navset-top .yui-nav li:not([class*="selected"]) a:hover {
animation: flicker-on-1 1s linear forwards;
-webkit-animation: flicker-on-1 1s linear forwards;
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-navset-top .yui-nav .selected a {
animation: flicker-on-2 1s linear forwards;
-webkit-animation: flicker-on-2 1s linear forwards;
background-color: rgba(var(--tab-flicker-color-2),1);
box-shadow: 0px 1px 2px rgba(var(--dark-accent));
}
.yui-navset .yui-nav .selected a:hover,
.yui-navset .yui-navset-top .yui-nav .selected a:hover {
background-color: rgba(var(--tab-flicker-color-2),1) !important;
}
@keyframes flicker-on-1 {
0% {
background-color: rgba(var(--tab-flicker-color-1),0);
}
10% {
background-color: rgba(var(--tab-flicker-color-1),1);
}
15% {
background-color: rgba(var(--tab-flicker-color-1),0);
}
20% {
background-color: rgba(var(--tab-flicker-color-1),0.5);
}
25% {
background-color: rgba(var(--tab-flicker-color-1),0.2);
}
30%,75% {
background-color: rgba(var(--tab-flicker-color-1),0.75);
}
79% {
background-color: rgba(var(--tab-flicker-color-1),0.8);
}
80% {
background-color: rgba(var(--tab-flicker-color-1),0.85);
}
100% {
background-color: rgba(var(--tab-flicker-color-1),1);
}
}
@keyframes flicker-on-2 {
0% {
background-color: rgba(var(--tab-flicker-color-2),0);
}
10% {
background-color: rgba(var(--tab-flicker-color-2),1);
}
15% {
background-color: rgba(var(--tab-flicker-color-2),0);
}
20% {
background-color: rgba(var(--tab-flicker-color-2),0.5);
}
25% {
background-color: rgba(var(--tab-flicker-color-2),0.2);
}
30%,75% {
background-color: rgba(var(--tab-flicker-color-2),0.75);
}
79% {
background-color: rgba(var(--tab-flicker-color-2),0.8);
}
80% {
background-color: rgba(var(--tab-flicker-color-2),0.85);
}
100% {
background-color: rgba(var(--tab-flicker-color-2),1);
}
}
display: inline-block; border-radius: 10px; border:dashed 1px #444444; background:#F5F5F5; float:top; width:96.5%; padding:10px
display: inline-block; border-radius: 10px; border:dashed 1px #444444; background:#F5F5F5; float:top; width:96.5%; padding:10px
display: inline-block; border-radius: 10px; border:dashed 1px #444444; background:#F5F5F5; float:top; width:96.5%; padding:10px
display: inline-block; border-radius: 10px; border:dashed 1px #444444; background:#F5F5F5; float:top; width:96.5%; padding:10px
display: inline-block; border-radius: 10px; border:dashed 1px #444444; background:#F5F5F5; float:top; width:96.5%; padding:10px
display: inline-block; border-radius: 10px; border:dashed 1px #444444; background:#F5F5F5; float:top; width:96.5%; padding:10px
background-color:#000080
color:white
footer-wikiwalk-nav