User:Binonbo/common.css

/* 1) Disables advertisements on-screen - Quality of Life */
.ad-slot-placeholder,
.top-ads-container {
    display: none !important;
}

/* 2) Link Customization - Taken from SCP:S Testing Grounds */
.resizable-container a:hover {
    color: #003366 !important;
    text-decoration: none;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s
}

/* 3) Top-Navigational Section - Taken from Backrooms and ROBLOX Galaxy */
.wds-dropdown__toggle-chevron,
.fandom-community-header__local-navigation .wds-list .wds-dropdown-chevron{transition: .3s;}
.fandom-community-header__local-navigation .wds-list li:hover .wds-dropdown-chevron {transform: rotate(0deg) !important;}

.wds-dropdown.wds-is-active .wds-dropdown__toggle-chevron, .wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):hover .wds-dropdown__toggle-chevron {transform: rotate(180deg) !important;}
.wds-tabs .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 .wds-dropdown-chevron {
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wds-tabs .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2:hover .wds-dropdown-chevron {
	transform: rotate(90deg) !important;
}

.wds-tabs .wds-dropdown.wds-is-active .wds-dropdown__content,
.wds-tabs .wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):hover .wds-dropdown__content {
	display: inline-block;
}

.wds-tabs .wds-tabs__tab .wds-dropdown__content {
	left: -7px;
	transform: none;
}

.wds-tabs .wds-dropdown.wds-is-active:not(.wds-no-chevron):after,
.wds-tabs .wds-dropdown.wds-is-active:not(.wds-no-chevron):before,
.wds-tabs .wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):hover:not(.wds-no-chevron):after,
.wds-tabs .wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):hover:not(.wds-no-chevron):before {
	display: none !important;
}

.wds-tabs .wds-tabs__tab .wds-dropdown__content,
.wds-tabs .wds-dropdown__content.wds-is-right-aligned,
.wds-tabs .wds-dropdown__content.wds-is-left-aligned,
.wds-tabs .wds-global-navigation__search-suggestions.wds-dropdown__content {
	animation-duration: 0.5s;
	animation-fill-mode: both;
	animation-name: navfade;
	animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
	background-color: #22252D;
	border: none;
}

.wds-community-header .wds-tabs .wds-dropdown__content .wds-list .wds-dropdown-level-2 .wds-dropdown-level-2__content {
	animation-duration: 0.5s;
	animation-fill-mode: both;
	animation-name: navfadeleft;
	animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
	background-color: #22252D;
	border: none;
}

.wds-tabs .wds-dropdown__content .wds-list.wds-is-linked>li.wds-is-selected>a:not(.wds-button),
.wds-tabs .wds-dropdown__content .wds-list.wds-is-linked>li:hover {
	background-color: rgba(16, 62, 137, 0.25);
	color: white;
	border-radius: 5px;
}

.wds-tabs .wds-dropdown__content .wds-list.wds-is-linked>li.wds-is-selected>a:not(.wds-button),
.wds-tabs .wds-dropdown__content .wds-list.wds-is-linked>li {
	transition: transform 0.5s, background-color 0.5s, color 0.5s;
}

.wds-tabs .wds-dropdown__content .wds-list.wds-is-linked>li.wds-is-selected>a:not(.wds-button),
.wds-tabs .wds-dropdown__content .wds-list.wds-is-linked>li>a:not(.wds-button) {
	background-color: transparent !important;
	color: white;
	border-radius: 5px;
}

.wds-tabs .wds-dropdown__content .wds-list.wds-is-linked>li.wds-is-selected>a:not(.wds-button),
.wds-tabs .wds-dropdown__content .wds-list.wds-is-linked>li:hover>a:not(.wds-button) {
	transform: translate(3px, 0);
	color: white;
}

.wds-tabs .wds-dropdown__content .wds-list.wds-is-linked>li.wds-is-selected>a:not(.wds-button),
.wds-tabs .wds-dropdown__content .wds-list.wds-is-linked>li>a:not(.wds-button) {
	transition: transform 0.5s, background-color 0.5s, color 0.5s;
	transition-timing-function: ease;
}
@keyframes navfade {
	from {
		opacity: 0;
		transform: translate(0, -10px);
	}
	to {
		opacity: 1;
		transform: translate(0);
	}
}

@keyframes navfadeleft {
	from {
		opacity: 0;
		transform: translate(-10px, 0);
	}
	to {
		opacity: 1;
		transform: translate(0);
	}
}