funkwhale/front/ui-docs/.vitepress/theme/Theme.vue

107 lines
3.0 KiB
Vue

<script setup>
import DefaultTheme from 'vitepress/theme'
const { Theme } = DefaultTheme
</script>
<template>
<Theme>
<template>
</template>
</Theme>
</template>
<style>
:root {
--vp-sidebar-width: 250px;
}
.Layout {
--vp-c-text-1: color-mix(in oklab, light-dark(var(--fw-gray-970), var(--fw-beige-100)) 100%, transparent);
--vp-c-text-2: color-mix(in oklab, light-dark(var(--fw-gray-970), var(--fw-beige-100)) 60%, transparent);
--vp-c-bg: color-mix(in oklab, light-dark(white, var(--fw-gray-950)) 50%, transparent);
--vp-c-bg-soft: color-mix(in oklab, light-dark(var(--fw-beige-300), var(--fw-gray-970)) 50%, transparent);
--vp-c-gutter: light-dark(transparent, var(--fw-gray-970));
--vp-local-nav-bg-color: light-dark(transparent, var(--fw-gray-970));
--vp-code-block-bg: light-dark(var(--fw-beige-200), var(--fw-gray-900));
--vp-c-bg-alt: light-dark(var(--fw-beige-300), var(--fw-gray-850));
--vp-c-divider: light-dark(var(--fw-beige-300), var(--fw-gray-850));
--vp-code-line-highlight-color: light-dark(var(--fw-beige-300), var(--fw-gray-850));
--vp-custom-block-details-bg: light-dark(var(--fw-beige-400), var(--fw-gray-800));
--vp-nav-bg-color: light-dark(var(--fw-beige-100), var(--fw-gray-960));
--vp-sidebar-bg-color: light-dark(var(--fw-beige-100), var(--fw-gray-960));
background-color: light-dark(var(--fw-beige-100), var(--fw-gray-960));
}
.VPNavBarTitle .title {
font-size: 14px;
}
.vp-doc div[class*="language-"]:has(+h1){
width: min-content;
float: right;
margin: -4px -32px -4px -4px;
background: transparent;
&>pre {
padding-right: 32px;
}
}
.language-template:has(~.preview){
flex-grow: 1;
&~.preview {
flex-grow: 0;
}
}
:has(.vp-doc) .container .items {
background: light-dark(var(--fw-beige-100), var(--fw-gray-960));
}
.vp-doc .custom-block{
margin-left: -2px;
/* background-color: transparent; */
border-width: 0;
border-radius: 0;
border-left-width: 4px;
--vp-custom-block-details-border: currentcolor;
&:has(summary:hover){color: var(--fw-blue-400)}
--vp-custom-block-details-bg: color-mix(in oklab, var(--vp-custom-block-details-border) 0%, transparent);
--vp-custom-block-warning-border: var(--fw-pastel-yellow-4);
--vp-custom-block-warning-bg: color-mix(in oklab, var(--vp-custom-block-warning-border) 10%, transparent);
--vp-custom-block-info-border: var(--fw-pastel-blue-4);
--vp-custom-block-info-bg: color-mix(in oklab, var(--vp-custom-block-info-border) 10%, transparent);
}
.funkwhale h3 {
/* override vitepress */
margin:0;
}
.vp-doc .preview:not(.funkwhale .preview) {
padding: 16px 0;
flex-grow: 1;
border-radius: 8px;
justify-content: start;
--vp-code-block-bg: transparent;
&:not(.transparent){
background-color:var(--background-color);
box-shadow: 0px 0px 16px 16px var(--background-color);
margin:16px 0;
padding:0;
}
/* .preview overrides the cascade coming from .vp-docs and other containers
that may leak rules here */
p {
margin: 0;
line-height: normal
}
}
</style>