进销存文档主题配置代码
/lib/client/components/global
Badge.vue
<script setup lang="ts">
defineProps({
type: {
type: String,
required: false,
default: 'jxc',
},
text: {
type: String,
required: false,
default: '',
},
vertical: {
type: String,
required: false,
default: undefined,
},
})
</script>
<template>
<span
class="badge"
:class="type"
:style="{
verticalAlign: vertical,
}"
>
<slot>{{ text }}</slot>
</span>
</template>
/lib/styles
badge.scss
.badge {
display: inline-block;
font-size: 14px;
height: 18px;
line-height: 18px;
border-radius: 3px;
padding: 0 6px;
color: var(--c-bg);
vertical-align: top;
transition: color var(--t-color), background-color var(--t-color);
&.tip {
background-color: var(--c-badge-tip);
}
&.warning {
background-color: var(--c-badge-warning);
}
&.danger {
background-color: var(--c-badge-danger);
}
&.jxc {
background-color: var(--c-badge-jxc);
}
.table-of-contents & {
vertical-align: middle;
}
& + & {
margin-left: 5px;
}
}
code-group.scss
@import '_variables';
/**
* code-group
*/
.code-group__nav {
margin-top: 0.85rem;
// 2 * margin + border-radius of <pre> tag
margin-bottom: calc(-1.7rem - 6px);
padding-bottom: calc(1.7rem - 6px);
padding-left: 10px;
padding-top: 10px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
background-color: var(--code-bg-color);
}
.code-group__ul {
margin: auto 0;
padding-left: 0;
display: inline-flex;
list-style: none;
}
.code-group__nav-tab {
border: 0;
padding: 5px;
cursor: pointer;
background-color: transparent;
font-size: 0.85em;
line-height: 1.4;
color: rgba(255, 255, 255, 0.9);
font-weight: 600;
}
.code-group__nav-tab:focus {
outline: none;
}
.code-group__nav-tab:focus-visible {
outline: 1px solid rgba(255, 255, 255, 0.9);
}
.code-group__nav-tab-active {
border-bottom: var(--c-brand) 1px solid;
}
@media (max-width: $MQMobileNarrow) {
.code-group__nav {
margin-left: -1.5rem;
margin-right: -1.5rem;
border-radius: 0;
}
}
/**
* code-group-item
*/
.code-group-item {
display: none;
}
.code-group-item__active {
display: block;
}
.code-group-item > pre {
background-color: #f60;
}
vars-dark.scss
html.dark {
// brand colors
--c-brand: #f60;
--c-brand-light: #f60;
// background colors
--c-bg: #22272e;
--c-bg-light: #2b313a;
--c-bg-lighter: #262c34;
// text colors
--c-text: #adbac7;
--c-text-light: #96a7b7;
--c-text-lighter: #8b9eb0;
--c-text-lightest: #8094a8;
// border colors
--c-border: #3e4c5a;
--c-border-dark: #34404c;
// custom container colors
--c-tip: #318a62;
--c-warning: #ceab00;
--c-warning-bg: #7e755b;
--c-warning-title: #ceac03;
--c-warning-text: #362e00;
--c-danger: #940000;
--c-danger-bg: #806161;
--c-danger-title: #610000;
--c-danger-text: #3a0000;
--c-jxc: #f60;
--c-details-bg: #323843;
// code blocks vars
--code-hl-bg-color: #363b46;
}
// plugin-docsearch
html.dark .DocSearch {
--docsearch-logo-color: var(--c-text);
--docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
--docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
0 2px 2px 0 rgba(3, 4, 9, 0.3);
--docsearch-key-gradient: linear-gradient(-225deg, #444950, #1c1e21);
--docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
0 -4px 8px 0 rgba(0, 0, 0, 0.2);
}
vars.scss
:root {
// brand colors
--c-brand: #f60;
--c-brand-light: #f60;
// background colors
--c-bg: #ffffff;
--c-bg-light: #f3f4f5;
--c-bg-lighter: #eeeeee;
--c-bg-navbar: var(--c-bg);
--c-bg-sidebar: var(--c-bg);
--c-bg-arrow: #cccccc;
// text colors
--c-text: #2c3e50;
--c-text-accent: var(--c-brand);
--c-text-light: #3a5169;
--c-text-lighter: #4e6e8e;
--c-text-lightest: #6a8bad;
--c-text-quote: #999999;
// border colors
--c-border: #eaecef;
--c-border-dark: #dfe2e5;
// custom container colors
--c-tip: #42b983;
--c-tip-bg: var(--c-bg-light);
--c-tip-title: var(--c-text);
--c-tip-text: var(--c-text);
--c-tip-text-accent: var(--c-text-accent);
--c-warning: #e7c000;
--c-warning-bg: #fffae3;
--c-warning-title: #ad9000;
--c-warning-text: #746000;
--c-warning-text-accent: var(--c-text);
--c-danger: #cc0000;
--c-danger-bg: #ffe0e0;
--c-danger-title: #990000;
--c-danger-text: #660000;
--c-danger-text-accent: var(--c-text);
--c-jxc: #f60;
--c-jxc-bg: var(--c-bg-light);
--c-jxc-title: var(--c-text);
--c-jxc-text: var(--c-text);
--c-jxc-text-accent: var(--c-text-accent);
--c-details-bg: #eeeeee;
// badge component colors
--c-badge-tip: var(--c-tip);
--c-badge-warning: var(--c-warning);
--c-badge-danger: var(--c-danger);
--c-badge-jxc: var(--c-jxc);
// transition vars
--t-color: 0.3s ease;
--t-transform: 0.3s ease;
// code blocks vars
--code-bg-color: #282c34;
--code-hl-bg-color: rgba(0, 0, 0, 0.66);
--code-ln-color: #9e9e9e;
--code-ln-wrapper-width: 3.5rem;
// font vars
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
--font-family-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
// layout vars
--navbar-height: 3.6rem;
--navbar-padding-v: 0.7rem;
--navbar-padding-h: 1.5rem;
--sidebar-width: 20rem;
--sidebar-width-mobile: calc(var(--sidebar-width) * 0.82);
--content-width: 740px;
--homepage-width: 960px;
}
// plugin-back-to-top
.back-to-top {
--back-to-top-color: var(--c-brand);
--back-to-top-color-hover: var(--c-brand-light);
}
// plugin-docsearch
.DocSearch {
--docsearch-primary-color: var(--c-brand);
--docsearch-text-color: var(--c-text);
--docsearch-highlight-color: var(--c-brand);
--docsearch-muted-color: var(--c-text-quote);
--docsearch-container-background: rgba(9, 10, 17, 0.8);
--docsearch-modal-background: var(--c-bg-light);
--docsearch-searchbox-background: var(--c-bg-lighter);
--docsearch-searchbox-focus-background: var(--c-bg);
--docsearch-searchbox-shadow: inset 0 0 0 2px var(--c-brand);
--docsearch-hit-color: var(--c-text-light);
--docsearch-hit-active-color: var(--c-bg);
--docsearch-hit-background: var(--c-bg);
--docsearch-hit-shadow: 0 1px 3px 0 var(--c-border-dark);
--docsearch-footer-background: var(--c-bg);
}
// plugin-external-link-icon
.external-link-icon {
--external-link-icon-color: var(--c-text-quote);
}
// plugin-medium-zoom
.medium-zoom-overlay {
--medium-zoom-bg-color: var(--c-bg);
}
// plugin-nprogress
#nprogress {
--nprogress-color: var(--c-brand);
}
// plugin-pwa-popup
.pwa-popup {
--pwa-popup-text-color: var(--c-text);
--pwa-popup-bg-color: var(--c-bg);
--pwa-popup-border-color: var(--c-brand);
--pwa-popup-shadow: 0 4px 16px var(--c-brand);
--pwa-popup-btn-text-color: var(--c-bg);
--pwa-popup-btn-bg-color: var(--c-brand);
--pwa-popup-btn-hover-bg-color: var(--c-brand-light);
}
// plugin-search
.search-box {
--search-bg-color: var(--c-bg);
--search-accent-color: var(--c-brand);
--search-text-color: var(--c-text);
--search-border-color: var(--c-border);
--search-item-text-color: var(--c-text-lighter);
--search-item-focus-bg-color: var(--c-bg-light);
}
/lib/node
defaultTheme.js
import { activeHeaderLinksPlugin } from '../plugin-active-header-links';
import { backToTopPlugin } from '../plugin-back-to-top';
import { containerPlugin } from '../plugin-container';
import { externalLinkIconPlugin } from '../plugin-external-link-icon';
import { gitPlugin } from '../plugin-git';
import { mediumZoomPlugin } from '../plugin-medium-zoom';
import { nprogressPlugin } from '../plugin-nprogress';
import { palettePlugin } from '../plugin-palette';
import { prismjsPlugin } from '../plugin-prismjs';
import { themeDataPlugin } from '../plugin-theme-data';
import { fs, getDirname, path } from '../utils';
import { assignDefaultLocaleOptions, resolveContainerPluginOptions, } from './utils/index.js';
const __dirname = getDirname(import.meta.url);
export const defaultTheme = ({ themePlugins = {}, ...localeOptions } = {}) => {
assignDefaultLocaleOptions(localeOptions);
return {
name: '../theme-default',
templateBuild: path.resolve(__dirname, '../../templates/build.html'),
alias: {
// use alias to make all components replaceable
...Object.fromEntries(fs
.readdirSync(path.resolve(__dirname, '../client/components'))
.filter((file) => file.endsWith('.vue'))
.map((file) => [
`@theme/${file}`,
path.resolve(__dirname, '../client/components', file),
])),
},
clientConfigFile: path.resolve(__dirname, '../client/config.js'),
extendsPage: (page) => {
// save relative file path into page data to generate edit link
page.data.filePathRelative = page.filePathRelative;
// save title into route meta to generate navbar and sidebar
page.routeMeta.title = page.title;
},
plugins: [
// ../plugin-active-header-link
themePlugins.activeHeaderLinks !== false
? activeHeaderLinksPlugin({
headerLinkSelector: 'a.sidebar-item',
headerAnchorSelector: '.header-anchor',
// should greater than page transition duration
delay: 300,
})
: [],
// ../plugin-back-to-top
themePlugins.backToTop !== false ? backToTopPlugin() : [],
// ../plugin-container
themePlugins.container?.tip !== false
? containerPlugin(resolveContainerPluginOptions(localeOptions, 'tip'))
: [],
themePlugins.container?.warning !== false
? containerPlugin(resolveContainerPluginOptions(localeOptions, 'warning'))
: [],
themePlugins.container?.danger !== false
? containerPlugin(resolveContainerPluginOptions(localeOptions, 'danger'))
: [],
themePlugins.container?.jxc !== false
? containerPlugin(resolveContainerPluginOptions(localeOptions, 'jxc'))
: [],
themePlugins.container?.remark !== false
? containerPlugin(resolveContainerPluginOptions(localeOptions, 'remark'))
: [],
themePlugins.container?.imgbox !== false
? containerPlugin(resolveContainerPluginOptions(localeOptions, 'imgbox'))
: [],
themePlugins.container?.details !== false
? containerPlugin({
type: 'details',
before: (info) => `<details class="custom-container details">${info ? `<summary>${info}</summary>` : ''}\n`,
after: () => '</details>\n',
})
: [],
themePlugins.container?.codeGroup !== false
? containerPlugin({
type: 'code-group',
before: () => `<CodeGroup>\n`,
after: () => '</CodeGroup>\n',
})
: [],
themePlugins.container?.codeGroupItem !== false
? containerPlugin({
type: 'code-group-item',
before: (info) => `<CodeGroupItem title="${info}">\n`,
after: () => '</CodeGroupItem>\n',
})
: [],
// ../plugin-external-link-icon
themePlugins.externalLinkIcon !== false
? externalLinkIconPlugin({
locales: Object.entries(localeOptions.locales || {}).reduce((result, [key, value]) => {
result[key] = {
openInNewWindow: value.openInNewWindow ?? localeOptions.openInNewWindow,
};
return result;
}, {}),
})
: [],
// ../plugin-git
themePlugins.git !== false
? gitPlugin({
createdTime: false,
updatedTime: localeOptions.lastUpdated !== false,
contributors: localeOptions.contributors !== false,
})
: [],
// ../plugin-medium-zoom
themePlugins.mediumZoom !== false
? mediumZoomPlugin({
selector: '.theme-default-content > img, .theme-default-content :not(a) > img',
zoomOptions: {},
// should greater than page transition duration
delay: 300,
})
: [],
// ../plugin-nprogress
themePlugins.nprogress !== false ? nprogressPlugin() : [],
// ../plugin-palette
palettePlugin({ preset: 'sass' }),
// ../plugin-prismjs
themePlugins.prismjs !== false ? prismjsPlugin() : [],
// ../plugin-theme-data
themeDataPlugin({ themeData: localeOptions }),
],
};
};
/lib/shared
options.d.ts
import type { ThemeData } from '../plugin-theme-data';
import type { LocaleData } from '../shared';
import type { NavbarConfig, SidebarConfig } from './nav.js';
export interface DefaultThemePluginsOptions {
/**
* Enable ../plugin-active-header-links or not
*/
activeHeaderLinks?: boolean;
/**
* Enable ../plugin-back-to-top or not
*/
backToTop?: boolean;
/**
* Enable ../plugin-container or not
*/
container?: {
tip?: boolean;
warning?: boolean;
danger?: boolean;
jxc?: boolean;
remark?: boolean;
imgbox?: boolean;
details?: boolean;
codeGroup?: boolean;
codeGroupItem?: boolean;
};
/**
* Enable ../plugin-external-link-icon or not
*/
externalLinkIcon?: boolean;
/**
* Enable ../plugin-git or not
*/
git?: boolean;
/**
* Enable ../plugin-medium-zoom or not
*/
mediumZoom?: boolean;
/**
* Enable ../plugin-nprogress or not
*/
nprogress?: boolean;
/**
* Enable ../plugin-prismjs or not
*/
prismjs?: boolean;
}
export declare type DefaultThemeLocaleOptions = DefaultThemeData;
export declare type DefaultThemeData = ThemeData<DefaultThemeLocaleData>;
export interface DefaultThemeLocaleData extends LocaleData {
/**
* Default color mode
*
* @default 'auto'
*/
colorMode?: 'auto' | 'dark' | 'light';
/**
* Enable color mode switching and display a button in navbar or not
*
* @default true
*/
colorModeSwitch?: boolean;
/**
* Home path of current locale
*
* Used as the link of back-to-home and navbar logo
*/
home?: string;
/**
* Navbar config
*
* Set to `false` to disable navbar in current locale
*/
navbar?: false | NavbarConfig;
/**
* Navbar logo config
*
* Logo to display in navbar
*/
logo?: null | string;
/**
* Navbar logo config for dark mode
*
* Logo to display in navbar in dark mode
*/
logoDark?: null | string;
/**
* Navbar repository config
*
* Used for the repository link of navbar
*/
repo?: null | string;
/**
* Navbar repository config
*
* Used for the repository text of navbar
*/
repoLabel?: string;
/**
* Navbar language selection config
*
* Text of the language selection dropdown
*/
selectLanguageText?: string;
/**
* Navbar language selection config
*
* Aria label of of the language selection dropdown
*/
selectLanguageAriaLabel?: string;
/**
* Navbar language selection config
*
* Language name of current locale
*
* Displayed inside the language selection dropdown
*/
selectLanguageName?: string;
/**
* Sidebar config
*
* Set to `false` to disable sidebar in current locale
*/
sidebar?: 'auto' | false | SidebarConfig;
/**
* Sidebar depth
*
* - Set to `0` to disable all levels
* - Set to `1` to include `<h2>`
* - Set to `2` to include `<h2>` and `<h3>`
* - ...
*
* The max value depends on which headers you have extracted
* via `markdown.headers.level`.
*
* The default value of `markdown.headers.level` is `[2, 3]`,
* so the default max value of `sidebarDepth` is `2`
*/
sidebarDepth?: number;
/**
* Page meta - edit link config
*
* Whether to show "Edit this page" or not
*/
editLink?: boolean;
/**
* Page meta - edit link config
*
* The text to replace the default "Edit this page"
*/
editLinkText?: string;
/**
* Page meta - edit link config
*
* Pattern of edit link
*
* @example ':repo/edit/:branch/:path'
*/
editLinkPattern?: string;
/**
* Page meta - edit link config
*
* Use `repo` config by default
*
* Set this config if your docs is placed in a different repo
*/
docsRepo?: string;
/**
* Page meta - edit link config
*
* Set this config if the branch of your docs is not 'main'
*/
docsBranch?: string;
/**
* Page meta - edit link config
*
* Set this config if your docs is placed in sub dir of your `docsRepo`
*/
docsDir?: string;
/**
* Page meta - last updated config
*
* Whether to show "Last Updated" or not
*/
lastUpdated?: boolean;
/**
* Page meta - last updated config
*
* The text to replace the default "Last Updated"
*/
lastUpdatedText?: string;
/**
* Page meta - contributors config
*
* Whether to show "Contributors" or not
*/
contributors?: boolean;
/**
* Page meta - contributors config
*
* The text to replace the default "Contributors"
*/
contributorsText?: string;
/**
* Custom block config
*
* Default title of TIP custom block
*/
tip?: string;
/**
* Custom block config
*
* Default title of WARNING custom block
*/
warning?: string;
/**
* Custom block config
*
* Default title of DANGER custom block
*/
danger?: string;
/**
* 404 page config
*
* Not Found messages for 404 page
*/
jxc?: string;
/**
* 404 page config
*
* Not Found messages for 404 page
*/
remark?: string;
/**
* 404 page config
*
* Not Found messages for 404 page
*/
imgbox?: string;
/**
* 404 page config
*
* Not Found messages for 404 page
*/
notFound?: string[];
/**
* 404 page config
*
* Text of back-to-home link in 404 page
*/
backToHome?: string;
/**
* A11y text for external link icon
*/
openInNewWindow?: string;
/**
* A11y text for color mode toggle button
*/
toggleColorMode?: string;
/**
* A11y text for sidebar toggle button
*/
toggleSidebar?: string;
}
/templates
build.html
<!DOCTYPE html>
<html lang="{{ lang }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="进销存文档 {{ version }}">
<style>
:root {
--c-bg: #fff;
}
html.dark {
--c-bg: #22272e;
}
html, body {
background-color: var(--c-bg);
}
</style>
<script>
const userMode = localStorage.getItem('jxcdoc-color-scheme');
const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
document.documentElement.classList.toggle('dark', true);
}
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?d9c5f1711b7c999e9e5b7d6b500560d7";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
…………body什么的
</html>
/foobar
foo.bar
+foo
-bar
高级语法插件
container/index.scss
@use 开始
:root {
// info
--info-title-color: rgb(255, 102, 0);
--info-bg-color: #fdfcf8;
--info-border-color: rgb(255, 102, 0);
// note
--note-title-color: #474748;
--note-bg-color: #f3f4f7;
--note-border-color: #d4d5d8;
// tip
--tip-title-color: #003100;
--tip-bg-color: #e6f6e6;
--tip-border-color: #009400;
// warning
--warning-title-color: #4d3800;
--warning-bg-color: #fff8e6;
--warning-border-color: #e6a700;
// danger
--danger-title-color: #4b1113;
--danger-bg-color: #ffebec;
--danger-border-color: #e13238;
// detail
--detail-bg-color: #eee;
--detail-text-color: inherit;
}
#{hope-config.$dark-selector} {
// info
--info-title-color: rgb(255, 102, 0);
--info-bg-color: rgb(57, 45, 41);
// note
--note-title-color: #fdfdfe;
--note-bg-color: #474748;
// tip
--tip-title-color: #e6f6e6;
--tip-bg-color: #003100;
// warning
--warning-title-color: #fff8e6;
--warning-bg-color: #4d3800;
// danger
--danger-title-color: #ffebec;
--danger-bg-color: #4b1113;
// detail
--detail-bg-color: #333;
--detail-text-color: #a8a8a8;
}
.custom-container {
position: relative;
transition: background var(--color-transition),
border-color var(--color-transition), color var(--color-transition);
.custom-container-title {
position: relative;
font-weight: 600;
line-height: 1.25;
}
&.info,
&.note,
&.tip,
&.warning,
&.danger {
margin: 1rem 0;
padding: 0.25rem 1rem;
border-left-width: 0.3rem;
border-left-style: solid;
border-radius: 0.5rem;
color: inherit;
.custom-container-title {
padding-left: 1.5rem;
&::before {
content: " ";
position: absolute;
left: 0;
width: 20px;
height: 20px;
background-position: left;
background-repeat: no-repeat;
}
}
p {
line-height: 1.5;
}
a {
color: var(--c-brand, #3eaf7c);
}
}
&.info {
border-color: var(--info-border-color);
background: var(--info-bg-color);
.custom-container-title {
color: var(--info-title-color);
&::before {
@include svg.background-svg(icons.$info-icon);
#{hope-config.$dark-selector} & {
@include svg.background-svg(icons.$info-dark-icon);
}
}
}
}
&.note {
border-color: var(--note-border-color);
background: var(--note-bg-color);
.custom-container-title {
color: var(--note-title-color);
&::before {
@include svg.background-svg(icons.$note-icon);
#{hope-config.$dark-selector} & {
@include svg.background-svg(icons.$note-dark-icon);
}
}
}
}
&.tip {
border-color: var(--tip-border-color);
background: var(--tip-bg-color);
.custom-container-title {
color: var(--tip-title-color);
&::before {
@include svg.background-svg(icons.$tip-icon);
#{hope-config.$dark-selector} & {
@include svg.background-svg(icons.$tip-dark-icon);
}
}
}
}
&.warning {
border-color: var(--warning-border-color);
background: var(--warning-bg-color);
.custom-container-title {
color: var(--warning-title-color);
&::before {
@include svg.background-svg(icons.$warning-icon);
#{hope-config.$dark-selector} & {
@include svg.background-svg(icons.$warning-dark-icon);
}
}
}
}
&.danger {
border-color: var(--danger-border-color);
background: var(--danger-bg-color);
.custom-container-title {
color: var(--danger-title-color);
&::before {
@include svg.background-svg(icons.$danger-icon);
#{hope-config.$dark-selector} & {
@include svg.background-svg(icons.$danger-dark-icon);
}
}
}
}
}
.custom-container.details {
position: relative;
display: block;
margin: 1.6em 0;
padding: 1.5rem;
border-radius: 0.5rem;
background: var(--detail-bg-color);
color: var(--detail-text-color);
transition: background var(--transform-transition),
color var(--transform-transition);
h4 {
margin-top: 0;
}
figure,
p {
&:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
}
a {
color: var(--c-brand, #3eaf7c);
}
summary {
position: relative;
padding-left: 2.5rem;
outline: none;
list-style: none;
cursor: pointer;
// a deprecated prefix
&::-webkit-details-marker,
&::marker {
color: transparent;
font-size: 0;
}
&::before,
&::after {
content: " ";
position: absolute;
top: calc(50% - 0.75rem);
left: 0;
width: 1.5rem;
height: 1.5rem;
}
&::before {
border-radius: 50%;
background: #ccc;
transition: background var(--color-transition),
transform var(--transform-transition);
#{hope-config.$dark-selector} & {
background: #555;
}
}
&::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(0,0,0,0.5)' d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");
line-height: normal;
transition: transform var(--transform-transition);
transform: rotate(90deg);
#{hope-config.$dark-selector} & {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(255,255,255,0.5)' d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");
}
}
}
&[open] summary {
margin-bottom: 0.5em;
&::after {
transform: rotate(180deg);
}
}
}