mirror of
https://github.com/tachiyomiorg/website.git
synced 2025-01-06 23:38:21 +01:00
31169bd527
* Add a changelogs page. * Fix local search highlight colors. * Make changelog headers a link. * Replace GitHub links with local ones. * Fix missing `Badge` component. * Show release contributors. * Add missing flex-wrap to mobile devices. * Add missing `alt` attribute to the avatar. * Use `@theme` alias while importing components from the theme. * Minor design tweaks to the extensions items. * Show contributors on WhatsNew component as well. * Fix extensions page not centered. * Show sidebar on the changelogs page. * Fix missing link replacements. * Add missing unmentioned credits.
185 lines
3.9 KiB
Stylus
185 lines
3.9 KiB
Stylus
/**
|
|
* Customize default theme styling by overriding CSS variables:
|
|
* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
|
|
*/
|
|
/**
|
|
* Colors
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
// Assign theme color
|
|
$themeColor = #818cf8
|
|
|
|
:root {
|
|
--vp-c-brand: $themeColor
|
|
--vp-c-brand-light: tint($themeColor, 20%)
|
|
--vp-c-brand-lighter: tint($themeColor, 40%)
|
|
--vp-c-brand-lightest: tint($themeColor, 60%)
|
|
--vp-c-brand-dark: shade($themeColor, 25%)
|
|
--vp-c-brand-darker: shade($themeColor, 50%)
|
|
--vp-c-brand-darkest: shade($themeColor, 75%)
|
|
--vp-c-brand-dimm: alpha($themeColor, 0.08)
|
|
}
|
|
|
|
/**
|
|
* Dark/Light Theme Overrides
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
html:not(.dark) {
|
|
img[data-mode="darkmode-only"] {
|
|
display: none !important
|
|
|
|
& + figcaption {
|
|
display: none !important
|
|
}
|
|
}
|
|
}
|
|
|
|
.dark {
|
|
img[data-mode="lightmode-only"] {
|
|
display: none !important
|
|
|
|
& + figcaption {
|
|
display: none !important
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Component: Button
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
:root {
|
|
--vp-button-brand-bg: var(--vp-c-brand-darker)
|
|
}
|
|
|
|
/**
|
|
* Component: Home
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
:root {
|
|
--vp-home-hero-name-color: transparent
|
|
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--vp-c-brand) 30%, var(--vp-c-brand-dark))
|
|
--vp-home-hero-image-background-image: linear-gradient(-45deg, var(--vp-c-brand-light) 50%, var(--vp-c-brand-lighter) 50%)
|
|
--vp-home-hero-image-filter: blur(40px)
|
|
}
|
|
|
|
.dark {
|
|
--vp-home-hero-image-background-image: linear-gradient(-45deg, var(--vp-c-brand-darker) 25%, var(--vp-c-brand-darkest) 25%)
|
|
}
|
|
|
|
@media (min-width 640px) {
|
|
:root {
|
|
--vp-home-hero-image-filter: blur(56px)
|
|
}
|
|
}
|
|
|
|
@media (min-width 960px) {
|
|
:root {
|
|
--vp-home-hero-image-filter: blur(72px)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Component: Custom Block
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
:root {
|
|
--vp-custom-block-tip-border: var(--vp-c-brand)
|
|
--vp-custom-block-tip-text: var(--vp-c-brand-darker)
|
|
--vp-custom-block-tip-bg: var(--vp-c-brand-dimm)
|
|
}
|
|
|
|
.dark {
|
|
--vp-custom-block-tip-border: var(--vp-c-brand)
|
|
--vp-custom-block-tip-text: var(--vp-c-brand-lightest)
|
|
--vp-custom-block-tip-bg: var(--vp-c-brand-dimm)
|
|
--vp-custom-block-info-bg: #212127
|
|
}
|
|
|
|
.plugin-tabs {
|
|
&--content {
|
|
padding: 2rem !important
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Component: Algolia
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
.DocSearch {
|
|
--docsearch-primary-color: var(--vp-c-brand) !important
|
|
}
|
|
|
|
.VPImage.image-src {
|
|
border-radius: 8px
|
|
}
|
|
|
|
/**
|
|
* Component: LocalSearch
|
|
*/
|
|
.VPLocalSearchBox {
|
|
--vp-local-search-highlight-bg: var(--vp-c-brand-soft);
|
|
--vp-local-search-highlight-text: var(--vp-c-brand-dark);
|
|
}
|
|
|
|
.dark .VPLocalSearchBox {
|
|
--vp-local-search-highlight-text: var(--vp-c-brand-lightest);
|
|
}
|
|
|
|
/**
|
|
* Component: Image Figure
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
// Shitty method to give elevation to image - TO BE REPLACED
|
|
|
|
main > div > div > figure:has(img) img {
|
|
box-shadow: 2px 2px 8px 4px var(--vp-c-bg-alt)
|
|
}
|
|
|
|
figure {
|
|
&:has(img) {
|
|
position: relative
|
|
display: flex
|
|
flex-direction: column
|
|
width: auto
|
|
text-align: center
|
|
transition: transform var(--vp-tt)
|
|
|
|
img {
|
|
overflow: hidden
|
|
margin: 0 auto
|
|
border-radius: 8px
|
|
}
|
|
|
|
figcaption {
|
|
display: inline-block
|
|
margin: 6px auto
|
|
font-size: 0.8rem
|
|
}
|
|
|
|
& > a .external-link-icon {
|
|
display: none
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Component: Links
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
@media print {
|
|
figure:has(img)>a[href^="http://"]:after,
|
|
figure:has(img)>a[href^="https://"]:after {
|
|
content: ""
|
|
}
|
|
}
|
|
|
|
.vp-doc a {
|
|
text-decoration: none
|
|
|
|
&:hover {
|
|
text-decoration: underline
|
|
text-underline-offset: 2px
|
|
}
|
|
}
|