mirror of
https://github.com/XTLS/Xray-docs-next.git
synced 2026-09-28 09:58:06 +03:00
Upgrade vuepress to beta.15
- use official dark theme - fix: Fix Tabs
This commit is contained in:
hmol233
@@ -0,0 +1,32 @@
|
||||
:root {
|
||||
--c-brand: #407ce8;
|
||||
--c-brand-light: #2e73ea;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--c-brand: #407ce8;
|
||||
--c-brand-light: #2e73ea;
|
||||
--c-warning-bg: rgba(185, 174, 119, 0.3);
|
||||
--c-warning-text: #c0bebe;
|
||||
--c-warning-text-accent: var(--c-text-accent);
|
||||
|
||||
--c-danger-title: #b40505;
|
||||
--c-danger-bg: rgba(72, 56, 57, 0.3);
|
||||
--c-danger-text: #c0bebe;
|
||||
|
||||
--c-bg-light: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
color: var(--c-text);
|
||||
background-color: var(--c-bg-lighter);
|
||||
border-left: 4px solid #17a2b8;
|
||||
}
|
||||
|
||||
* {
|
||||
scroll-behavior: smooth;
|
||||
transition: background-color 0.1s ease;
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1 @@
|
||||
# Xray-docs-next dark theme
|
||||
|
||||
Fork from https://github.com/tolking/vuepress-theme-default-prefers-color-scheme .
|
||||
# Xray-docs-next theme
|
||||
|
||||
@@ -2,8 +2,6 @@ import { defineClientAppEnhance } from "@vuepress/client";
|
||||
import Tab from "./components/Tab.vue";
|
||||
import Tabs from "./components/Tabs.vue";
|
||||
|
||||
import "./styles/default/index.scss";
|
||||
|
||||
export default defineClientAppEnhance(({ app, router, siteData }) => {
|
||||
app.component("Tab", Tab);
|
||||
app.component("Tabs", Tabs);
|
||||
|
||||
@@ -22,11 +22,16 @@ export default defineComponent({
|
||||
let tag = this.title;
|
||||
return {
|
||||
tabID: tag,
|
||||
labelID: tag + "-" + "label",
|
||||
};
|
||||
},
|
||||
beforeMount() {
|
||||
this.$parent.$data.children.push(this);
|
||||
mounted() {
|
||||
this.tabID = "tab-" + Math.random().toString(36).substring(2);
|
||||
this.$parent.$data.children.push({ id: this.tabID, title: this.title });
|
||||
},
|
||||
computed: {
|
||||
labelID(): String {
|
||||
return this.tabID + "-label";
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
<div :id="tag" class="nav nav-pills" role="tablist">
|
||||
<button
|
||||
v-for="tab of children"
|
||||
:id="tab.labelID"
|
||||
:aria-controls="tab.tabID"
|
||||
:data-bs-target="'#' + tab.tabID"
|
||||
:id="tab.id + '-label'"
|
||||
:aria-controls="tab.id"
|
||||
:data-bs-target="'#' + tab.id"
|
||||
aria-selected="false"
|
||||
class="nav-link"
|
||||
data-bs-toggle="tab"
|
||||
@@ -41,13 +41,10 @@ export default defineComponent({
|
||||
this.children = [];
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(function () {
|
||||
import("bootstrap").then((b) => {
|
||||
let triggerEl = document.getElementById(
|
||||
this.children["0"].$data.labelID
|
||||
);
|
||||
new b.Tab(triggerEl).show();
|
||||
});
|
||||
this.$nextTick(async function () {
|
||||
const bootstrap = await import("bootstrap");
|
||||
let triggerEl = document.getElementById(this.children["0"].id + "-label");
|
||||
new bootstrap.Tab(triggerEl).show();
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
<nav v-if="enable" class="navbar-links toggle-bar">
|
||||
<div class="navbar-links-item">
|
||||
<a class="nav-link" @click.prevent="toggleTheme">{{ text }}</a>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { useThemeLocaleData } from "@vuepress/plugin-theme-data/lib/client";
|
||||
import { ToggleOptions } from "../types";
|
||||
|
||||
export default defineComponent({
|
||||
computed: {
|
||||
enable: function (): Boolean {
|
||||
const option = useThemeLocaleData<ToggleOptions>();
|
||||
return option.value.enableToggle;
|
||||
},
|
||||
text: function (): String {
|
||||
const option = useThemeLocaleData<ToggleOptions>();
|
||||
return option.value.ToggleText;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleTheme() {
|
||||
const html = document.getElementsByTagName("html")[0];
|
||||
|
||||
let theme = html.getAttribute("theme");
|
||||
if (theme == "light") {
|
||||
html.setAttribute("theme", "dark");
|
||||
} else if (theme == "dark") {
|
||||
html.setAttribute("theme", "light");
|
||||
} else {
|
||||
html.setAttribute("theme", "light");
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.toggle-bar {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -5,9 +5,6 @@ export const docsPlugin: Theme = (options, app) => {
|
||||
return {
|
||||
name: "xray-docs-theme",
|
||||
extends: "@vuepress/theme-default",
|
||||
layouts: {
|
||||
Layout: path.resolve(__dirname, "layouts/Layout.vue"),
|
||||
},
|
||||
clientAppEnhanceFiles: path.resolve(__dirname, "clientAppEnhance.ts"),
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<ParentLayout>
|
||||
<template v-slot:navbar-after>
|
||||
<ThemeToggle />
|
||||
</template>
|
||||
</ParentLayout>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import ParentLayout from "@vuepress/theme-default/lib/client/layouts/Layout.vue";
|
||||
import ThemeToggle from "../components/ThemeToggle.vue";
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
ParentLayout,
|
||||
ThemeToggle,
|
||||
},
|
||||
beforeMount() {
|
||||
function setTheme(newTheme) {
|
||||
const html = document.getElementsByTagName("html")[0];
|
||||
html.setAttribute("theme", newTheme);
|
||||
}
|
||||
var dark = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
dark.addEventListener("change", (e) => {
|
||||
setTheme(e.matches ? "dark" : "light");
|
||||
});
|
||||
setTheme(dark.matches ? "dark" : "light");
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -1,43 +0,0 @@
|
||||
$accentLightColor: #2e73ea;
|
||||
$textLightColor: #2c3e50;
|
||||
$borderLightColor: #d3d5d9;
|
||||
$codeBgLightColor: #282c34;
|
||||
$arrowBgLightColor: #ccc;
|
||||
$tipLightColor: #42b983;
|
||||
$tipBackgroundLightColor: #eff2f7;
|
||||
$warningLightColor: #e7c000;
|
||||
$dangerLightColor: #cc0000;
|
||||
$badgeTipLightColor: #5bdca2;
|
||||
$badgeWarningLightColor: $warningLightColor;
|
||||
$badgeDangerLightColor: $dangerLightColor;
|
||||
$backgroundLightColor: #fff;
|
||||
$kbdBackgroundLightColor: #eeeeee;
|
||||
$kbdBorderLightColor: #ccc;
|
||||
$tableBorderLightColor: #dfe2e5;
|
||||
$tableBackgroundLightColor: #f6f8fa;
|
||||
$metaItemLightColor: #767676;
|
||||
$dangerBgLightColor: #ffe6e6;
|
||||
$warningBgLightColor: rgba(255, 229, 100, 0.3);
|
||||
$miniCodeBgLightColor: rgba(95, 101, 106, 0.1);
|
||||
|
||||
$accentDarkColor: #407ce8;
|
||||
$textDarkColor: #c0bebe;
|
||||
$borderDarkColor: #4e4e4e;
|
||||
$codeBgDarkColor: #282c34;
|
||||
$arrowBgDarkColor: #ccc;
|
||||
$tipDarkColor: #42b983;
|
||||
$tipBackgroundDarkColor: #373a3f;
|
||||
$warningDarkColor: #e7c000;
|
||||
$dangerDarkColor: #cc0000;
|
||||
$badgeTipDarkColor: #18411a;
|
||||
$badgeWarningDarkColor: #e4be04;
|
||||
$badgeDangerDarkColor: #b00606;
|
||||
$backgroundDarkColor: #25272a;
|
||||
$kbdBackgroundDarkColor: #3c3c3c;
|
||||
$kbdBorderDarkColor: #666b6f;
|
||||
$tableBorderDarkColor: #666b6f;
|
||||
$tableBackgroundDarkColor: #313438;
|
||||
$metaItemDarkColor: #626262;
|
||||
$dangerBgDarkColor: rgba(72, 56, 57, 0.3);
|
||||
$warningBgDarkColor: rgba(185, 174, 119, 0.3);
|
||||
$miniCodeBgDarkColor: rgba(255, 255, 255, 0.1);
|
||||
@@ -1,51 +0,0 @@
|
||||
@import "_variables";
|
||||
|
||||
html,
|
||||
body {
|
||||
background-color: var(--backgroundColor);
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--textColor);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accentColor);
|
||||
}
|
||||
|
||||
p a code {
|
||||
color: var(--accentColor);
|
||||
}
|
||||
|
||||
kbd {
|
||||
background: var(--kbdBackgroundColor);
|
||||
border: solid 0.15rem var(--kbdBorderColor);
|
||||
border-bottom: solid 0.25rem var(--kbdBorderColor);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
color: var(--textColor);
|
||||
background-color: var(--kbdBackgroundColor);
|
||||
border-left: 4px solid #17a2b8;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 1px solid var(--borderColor);
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: 1px solid var(--borderColor);
|
||||
}
|
||||
|
||||
tr {
|
||||
border-top: 1px solid var(--tableBorderColor);
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: var(--tableBackgroundColor);
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid var(--tableBorderColor);
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
@import "@vuepress/plugin-palette/palette";
|
||||
@import "_color";
|
||||
$MQMobile: 719px;
|
||||
$contentClass: ".theme-default-content";
|
||||
|
||||
html[theme="dark"] {
|
||||
--accentColor: #{$accentDarkColor};
|
||||
--textColor: #{$textDarkColor};
|
||||
--borderColor: #{$borderDarkColor};
|
||||
--codeBgColor: #{$codeBgDarkColor};
|
||||
--arrowBgColor: #{$arrowBgDarkColor};
|
||||
--tipColor: #{$tipDarkColor};
|
||||
--tipBackgroundColor: #{$tipBackgroundDarkColor};
|
||||
--warningColor: #{$warningDarkColor};
|
||||
--dangerColor: #{$dangerDarkColor};
|
||||
--badgeTipColor: #{$badgeTipDarkColor};
|
||||
--badgeWarningColor: #{$badgeWarningDarkColor};
|
||||
--badgeDangerColor: #{$badgeDangerDarkColor};
|
||||
--backgroundColor: #{$backgroundDarkColor};
|
||||
--kbdBackgroundColor: #{$kbdBackgroundDarkColor};
|
||||
--kbdBorderColor: #{$kbdBorderDarkColor};
|
||||
--tableBorderColor: #{$tableBorderDarkColor};
|
||||
--tableBackgroundColor: #{$tableBackgroundDarkColor};
|
||||
--metaItemColor: #{$metaItemDarkColor};
|
||||
--dangerBgDarkColor: #{$dangerBgDarkColor};
|
||||
--warningBgDarkColor: #{$warningBgDarkColor};
|
||||
--miniCodeBgColor: #{$miniCodeBgDarkColor};
|
||||
--search-border-color: #{$miniCodeBgDarkColor};
|
||||
--search-item-focus-bg-color: #{$kbdBackgroundDarkColor};
|
||||
--search-accent-color: #{$accentDarkColor};
|
||||
--search-text-color: #{$textDarkColor};
|
||||
|
||||
--textColorLighten10: #{lighten($textDarkColor, 7%)};
|
||||
--textColorLighten25: #{lighten($textDarkColor, 10%)};
|
||||
--textColorLighten40: #{lighten($textDarkColor, 15%)};
|
||||
--accentColorLighten8: #{lighten($accentDarkColor, 8%)};
|
||||
--accentColorLighten10: #{lighten($accentDarkColor, 10%)};
|
||||
--accentColorLighten30: #{lighten($accentDarkColor, 30%)};
|
||||
}
|
||||
|
||||
html[theme="light"] {
|
||||
--accentColor: #{$accentLightColor};
|
||||
--textColor: #{$textLightColor};
|
||||
--borderColor: #{$borderLightColor};
|
||||
--codeBgColor: #{$codeBgLightColor};
|
||||
--arrowBgColor: #{$arrowBgLightColor};
|
||||
--tipColor: #{$tipLightColor};
|
||||
--tipBackgroundColor: #{$tipBackgroundLightColor};
|
||||
--warningColor: #{$warningLightColor};
|
||||
--dangerColor: #{$dangerLightColor};
|
||||
--badgeTipColor: #{$badgeTipLightColor};
|
||||
--badgeWarningColor: #{$badgeWarningLightColor};
|
||||
--badgeDangerColor: #{$badgeDangerLightColor};
|
||||
--backgroundColor: #{$backgroundLightColor};
|
||||
--kbdBackgroundColor: #{$kbdBackgroundLightColor};
|
||||
--kbdBorderColor: #{$kbdBorderLightColor};
|
||||
--tableBorderColor: #{$tableBorderLightColor};
|
||||
--tableBackgroundColor: #{$tableBackgroundLightColor};
|
||||
--metaItemColor: #{$metaItemLightColor};
|
||||
--dangerBgDarkColor: #{$dangerBgLightColor};
|
||||
--warningBgDarkColor: #{$warningBgLightColor};
|
||||
--miniCodeBgColor: #{$miniCodeBgLightColor};
|
||||
--search-accent-color: #{$accentLightColor};
|
||||
|
||||
--textColorLighten10: #{lighten($textLightColor, 10%)};
|
||||
--textColorLighten25: #{lighten($textLightColor, 20%)};
|
||||
--textColorLighten40: #{lighten($textLightColor, 30%)};
|
||||
--accentColorLighten8: #{lighten($accentLightColor, 8%)};
|
||||
--accentColorLighten10: #{lighten($accentLightColor, 12%)};
|
||||
--accentColorLighten30: #{lighten($accentLightColor, 30%)};
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
@import "_variables";
|
||||
|
||||
.arrow {
|
||||
&.up {
|
||||
border: {
|
||||
bottom: 6px solid var(--arrowBgColor);
|
||||
}
|
||||
}
|
||||
|
||||
&.down {
|
||||
border: {
|
||||
top: 6px solid var(--arrowBgColor);
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
border: {
|
||||
left: 6px solid var(--arrowBgColor);
|
||||
}
|
||||
}
|
||||
|
||||
&.left {
|
||||
border: {
|
||||
right: 6px solid var(--arrowBgColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
@import "_variables";
|
||||
|
||||
.badge {
|
||||
color: var(--backgroundColor);
|
||||
background-color: var(--badgeTipColor);
|
||||
&.tip {
|
||||
background-color: var(--badgeTipColor);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: var(--badgeWarningColor);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background-color: var(--badgeDangerColor);
|
||||
}
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
@use 'sass:color';
|
||||
|
||||
@import "_variables";
|
||||
|
||||
#{$contentClass} {
|
||||
code {
|
||||
color: var(--textColorLighten25);
|
||||
background-color: var(--miniCodeBgColor);
|
||||
}
|
||||
}
|
||||
|
||||
#{$contentClass} {
|
||||
pre {
|
||||
background-color: var(--codeBgColor);
|
||||
|
||||
code {
|
||||
color: var(--textColorLighten25);
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.line-number {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
|
||||
monospace;
|
||||
}
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
@use 'sass:color';
|
||||
|
||||
@import "_variables";
|
||||
|
||||
.custom-container {
|
||||
&.tip {
|
||||
background-color: var(--tipBackgroundColor);
|
||||
border-color: var(--tipColor);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: var(--warningBgDarkColor);
|
||||
border-color: var(--warningColor);
|
||||
color: var(--textColor);
|
||||
|
||||
.custom-container-title {
|
||||
color: var(--warningColor);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--textColor);
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background-color: var(--dangerBgDarkColor);
|
||||
border-color: var(--dangerColor);
|
||||
color: var(--textColor);
|
||||
|
||||
.custom-container-title {
|
||||
color: var(--dangerColor);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--textColor);
|
||||
}
|
||||
}
|
||||
|
||||
&.details {
|
||||
background-color: var(--backgroundColor);
|
||||
}
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
@import "_variables";
|
||||
|
||||
.dropdown-wrapper {
|
||||
.dropdown-title {
|
||||
color: var(--textColor);
|
||||
}
|
||||
|
||||
.mobile-dropdown-title {
|
||||
font-size inherit {
|
||||
&:hover {
|
||||
color: var(--accentColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
.dropdown-item {
|
||||
.dropdown-subtitle {
|
||||
border-top: 1px solid var(--kbdBackgroundColor);
|
||||
}
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
color: var(--accentColor);
|
||||
}
|
||||
|
||||
&.router-link-active {
|
||||
color: var(--accentColor);
|
||||
|
||||
&::after {
|
||||
border-left: 5px solid var(--accentColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $MQMobile) {
|
||||
.dropdown-wrapper {
|
||||
.nav-dropdown {
|
||||
background-color: var(--backgroundColor);
|
||||
border: 1px solid var(--kbdBorderColor);
|
||||
border-bottom-color: var(--kbdBorderColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
@use 'sass:color';
|
||||
|
||||
@import "_variables";
|
||||
|
||||
.home {
|
||||
.hero {
|
||||
.description {
|
||||
color: var(--textColorLighten40);
|
||||
}
|
||||
|
||||
.action-button {
|
||||
&.primary {
|
||||
color: #fff;
|
||||
background-color: var(--accentColor);
|
||||
border-color: var(--accentColor);
|
||||
&:hover {
|
||||
background-color: var(--accentColorLighten8);
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
color: var(--accentColor);
|
||||
background-color: var(--kbdBackgroundDarkColor);
|
||||
border-color: var(--accentColor);
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: var(--accentColorLighten8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.features {
|
||||
border-top: 1px solid var(--borderColor);
|
||||
}
|
||||
|
||||
.feature {
|
||||
h2 {
|
||||
color: var(--textColorLighten10);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--textColorLighten10);
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-top: 1px solid var(--borderColor);
|
||||
color: var(--textColorLighten10);
|
||||
}
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
@use '_normalize';
|
||||
|
||||
@use 'arrow';
|
||||
@use 'badge';
|
||||
@use 'custom-container';
|
||||
@use 'dropdown';
|
||||
@use 'home';
|
||||
@use 'layout';
|
||||
@use 'navbar';
|
||||
@use 'page';
|
||||
@use 'plugins';
|
||||
@use 'sidebar';
|
||||
@use 'code';
|
||||
|
||||
@use '@vuepress/plugin-palette/style';
|
||||
|
||||
* {
|
||||
scroll-behavior: smooth;
|
||||
transition: background-color 0.1s ease;
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
html[theme="dark"] {
|
||||
.search-box {
|
||||
input {
|
||||
background-color: var(--backgroundColor);
|
||||
}
|
||||
.suggestions {
|
||||
background: var(--backgroundColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[theme="light"] {
|
||||
.search-box {
|
||||
input {
|
||||
background-color: var(--backgroundColor);
|
||||
}
|
||||
.suggestions {
|
||||
background: var(--backgroundColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
@import "_variables";
|
||||
|
||||
.navbar {
|
||||
background-color: var(--backgroundColor);
|
||||
border-bottom: 1px solid var(--borderColor);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: var(--backgroundColor);
|
||||
border-right: 1px solid var(--borderColor);
|
||||
scrollbar-color: var(--accentColorLighten8) var(--borderColor);
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: var(--borderColor);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--accentColorLighten8);
|
||||
}
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
@use 'sass:color';
|
||||
|
||||
@import "_variables";
|
||||
|
||||
.navbar {
|
||||
.site-name {
|
||||
color: var(--textColor);
|
||||
}
|
||||
|
||||
.navbar-links-wrapper {
|
||||
background-color: var(--backgroundColor);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* navbar-links
|
||||
*/
|
||||
.navbar-links {
|
||||
a {
|
||||
&:hover,
|
||||
&.router-link-active {
|
||||
color: var(--accentColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $MQMobile) {
|
||||
.navbar-links-item > a:not(.external) {
|
||||
&:hover,
|
||||
&.router-link-active {
|
||||
border-bottom: 2px solid var(--accentColorLighten8);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
@use 'sass:color';
|
||||
|
||||
@import "_variables";
|
||||
|
||||
.page-meta {
|
||||
.meta-item {
|
||||
.meta-item-label {
|
||||
color: var(--textColorLighten25);
|
||||
}
|
||||
|
||||
.meta-item-info {
|
||||
color: var(--metaItemColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-nav {
|
||||
.inner {
|
||||
border-top: 1px solid var(--borderColor);
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
@use 'sass:color';
|
||||
|
||||
@import "_variables";
|
||||
|
||||
.back-to-top {
|
||||
--back-to-top-color: #{var(--accentColor)};
|
||||
--back-to-top-color-hover: #{var(--accentColorLighten30)};
|
||||
}
|
||||
|
||||
#nprogress {
|
||||
--nprogress-color: #{var(--accentColor)};
|
||||
}
|
||||
|
||||
.DocSearch {
|
||||
--docsearch-primary-color: #{var(--accentColor)};
|
||||
--docsearch-highlight-color: var(--docsearch-primary-color);
|
||||
--docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
@import "_variables";
|
||||
|
||||
.sidebar {
|
||||
.navbar-links {
|
||||
border-bottom: 1px solid var(--borderColor);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-heading {
|
||||
color: var(--textColor);
|
||||
}
|
||||
|
||||
.sidebar-link {
|
||||
color: var(--textColor);
|
||||
}
|
||||
|
||||
a.sidebar-heading,
|
||||
a.sidebar-link {
|
||||
&.active {
|
||||
color: var(--accentColor);
|
||||
border-left-color: var(--accentColor);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--accentColor);
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export * from "./toggle";
|
||||
@@ -1,4 +0,0 @@
|
||||
export interface ToggleOptions {
|
||||
enableToggle?: boolean;
|
||||
ToggleText?: string;
|
||||
}
|
||||
Reference in New Issue
Block a user