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: #F8F1AE !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: rgba(0,0,0, .3);
	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: rgba(0,0,0, .3);
	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);
	}
}

/* 4) Making Comments DOORS-Themed */
.theme-fandomdesktop-dark div[data-testid="article-comments__comment"] {
	background-color: rgba(0,0,0, .3);
	border: 1px solid #D0AE82;
}

.theme-fandomdesktop-light div[data-testid="article-comments__comment"] {
    background-color: rgba(var(--theme-page-background-color--rgb), .9);
	border: 1px solid #D0AE82;
}

/* 5) Making TOC DOORS-Themed */
.page-content #toc {
	background: rgba(0,0,0, .3);
    border: 2px solid #D0AE82;
    border-radius: 5.25px
}
#toc > ul {
	display: block;
	margin: 5px;
	padding: 10px;
	transition: padding .25s
}

#toc > ul a {
	padding: 2.5px;
	line-height: 1.75em;
	transition: line-height .25s, opacity .425s .25s;
	display: grid;
	grid-template-columns: max-content auto
}

#toc .toctogglecheckbox:checked ~ ul a {
	line-height: 0px;
	transition: line-height .225s .2s, opacity .425s, visibility 0s .725s;
	opacity: 0;
	visibility: hidden
}

/* 6) Test */
.social-activity-list li {
  background-color: rgba(0,0,0, .3);
  padding: 5px !important;
  margin: 5px 0px;
  border: 3px solid #D0AE82;
  border-radius: 5px;
}