vuepress-theme-yuu/styles/themes/red.styl

A VuePress theme that supports a dark theme, multiple color themes, and other useful features.

@import '../variables.styl';

.yuu-theme-red {
	a,
	p a code,
	.theme-default-content a code {
		color: $redAccentColor;
	}

	// @parent-theme/components/AlgoliaSearchBox.vue
	.algolia-search-wrapper .algolia-autocomplete {
		.algolia-docsearch-suggestion {
			.algolia-docsearch-suggestion--category-header {
				background-color: darken($redAccentColor, 10%);
			}

			.algolia-docsearch-suggestion--subcategory-column {
				.algolia-docsearch-suggestion--highlight {
					color: $redAccentColor;
				}
			}
		}

		.algolia-docsearch-suggestion--highlight {
			color: $redAccentColor;
		}

		.algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
			box-shadow: inset 0 -2px 0 0 rgba($redAccentColor, 0.8);
		}
	}

	// @parent-theme/components/Home.vue
	.hero .action-button {
		background-color: $redAccentColor;
		border-bottom-color: darken($redAccentColor, 10%);
		&:hover {
			background-color: lighten($redAccentColor, 10%);
		}
	}

	// @parent-theme/components/NavLinks.vue
	.nav-links {
		a,
		.dropdown-wrapper .dropdown-title,
		.dropdown-wrapper .mobile-dropdown-title,
		.dropdown-wrapper .nav-dropdown .dropdown-item a {
			color: inherit;

			&:hover,
			&.router-link-active {
				color: $redAccentColor;
			}
		}

		.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after {
			border-left-color: $redAccentColor;
		}
	}

	@media (min-width: $MQMobile) {
		.nav-item > a:not(.external) {
			&:hover,
			&.router-link-active {
				border-bottom-color: $redAccentColor;
			}
		}
	}

	// @parent-theme/components/PageEdit.vue
	.page-edit {
		.edit-link a {
			color: $redAccentColor;
		}

		.last-updated .prefix {
			color: $redAccentColor;
		}
	}

	// @vuepress/plugin-search/SearchBox.vue
	.search-box {
		input:focus {
			border-color: alpha($redAccentColor, 0.75);
		}

		.suggestion {
			&.focused a {
				color: $redAccentColor;
			}
		}
	}

	// @parent-theme/components/SidebarLink.vue
	&.yuu-theme-dark {
		a.sidebar-link {
			color: $darkAltTextColor;
		}
	}

	// @parent-theme/components/SidebarLink.vue
	a.sidebar-link {
		color: $textColor;

		&:hover {
			color: $redAccentColor;
		}

		&.active {
			color: $redAccentColor;
			border-left-color: $redAccentColor;
		}
	}

	// @vuepress/plugin-pwa/lib/SWUpdatePopup.vue
	.sw-update-popup {
		border-color: $redAccentColor;
	}

	// @vuepress/plugin-nprogress/nprogress.styl
	#nprogress {
		.bar {
			background-color: $redAccentColor;
		}

		.peg {
			box-shadow: 0 0 10px $redAccentColor, 0 0 5px $redAccentColor;
		}

		.spinner-icon {
			border-top-color: $redAccentColor;
			border-left-color: $redAccentColor;
		}
	}

	// @vuepress/plugin-back-to-top/BackToTop.vue
	.go-to-top {
		color: $redAccentColor !important
	}
}