:root { --width-main: 720px; --fsp: 17px; --fsh2: calc(var(--fsp) + 11px); --fsh3: calc(var(--fsp) + 7px); --fsh4: calc(var(--fsp) + 4px); --side-content-width: 224px; --gap-margin: 16px; --gap-padding: 16px; --gap-p: calc(17px + 4px); --gap-p-compact: calc(17px * 0.75); } @media screen and (min-width: 2048px) { :root { --width-main: 780px; } } @media screen and (min-width: 2560px) { :root { --width-main: 860px; } } @media screen and (max-width: 768px) { :root { --side-content-width: 188px; } } @media screen and (max-width: 667px) { :root { --side-content-width: 224px; } } :root { --gap-max: calc(var(--gap-margin) + var(--gap-padding)); } :root { --hue: 192deg; --sat: 98%; --light: 55%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --accent: #ff5724; --link: hsla(207deg 90% 54% / 1); --link-a20: hsla(207deg 90% 54% / 0.2); --background: hsla(210deg 20% 98% / 1); --card: #fff; --bg-a20: hsla(210deg 0% 100% / 0.2); --bg-a50: hsla(210deg 0% 100% / 0.5); --bg-a60: hsla(210deg 0% 100% / 0.6); --bg-a75: hsla(210deg 0% 100% / 0.75); --bg-a100: hsla(210deg 0% 100% / 1); --text: hsla(210deg 0% 0% / 1); --text-reverse: hsla(210deg 0% 100% / 1); --text-p1: hsla(210deg 0% 0% / 0.8); --text-p2: hsla(210deg 0% 0% / 0.7); --text-p3: hsla(210deg 0% 0% / 0.5); --text-p4: hsla(210deg 0% 0% / 0.4); --text-meta: hsla(210deg 0% 0% / 0.2); --text-code: hsla(210deg 0% 0% / 0.9); --text-a10: hsla(210deg 0% 0% / 0.1); --text-a20: hsla(210deg 0% 0% / 0.2); --block: hsla(210deg 50% 12% / 0.04); --block-border: hsla(210deg 50% 12% / 0.06); } @media (prefers-color-scheme: dark) { :root { --background: hsla(210deg 8% 12% / 1); --card: hsla(210deg 10% 24% / 1); --bg-a20: hsla(210deg 0% 0% / 0.2); --bg-a50: hsla(210deg 0% 0% / 0.5); --bg-a60: hsla(210deg 0% 0% / 0.6); --bg-a75: hsla(210deg 0% 0% / 0.75); --bg-a100: hsla(210deg 0% 0% / 1); --text: hsla(210deg 0% 100% / 1); --text-reverse: hsla(210deg 0% 0% / 1); --text-p1: hsla(210deg 0% 100% / 0.8); --text-p2: hsla(210deg 0% 100% / 0.7); --text-p3: hsla(210deg 0% 100% / 0.5); --text-p4: hsla(210deg 0% 100% / 0.4); --text-meta: hsla(210deg 0% 100% / 0.2); --text-code: hsla(210deg 0% 100% / 0.9); --text-a10: hsla(210deg 0% 100% / 0.1); --text-a20: hsla(210deg 0% 100% / 0.2); --block: hsla(210deg 24% 72% / 0.08); --block-border: hsla(210deg 24% 72% / 0.12); --text-code: hsla(20 75 60 / 1); } } @media screen and (prefers-color-scheme: dark) and (max-width: 667px) { :root { --background: #000; } } :root[data-theme="light"] { --background: hsla(210deg 20% 98% / 1); --card: #fff; --bg-a20: hsla(210deg 0% 100% / 0.2); --bg-a50: hsla(210deg 0% 100% / 0.5); --bg-a60: hsla(210deg 0% 100% / 0.6); --bg-a75: hsla(210deg 0% 100% / 0.75); --bg-a100: hsla(210deg 0% 100% / 1); --text: hsla(210deg 0% 0% / 1); --text-reverse: hsla(210deg 0% 100% / 1); --text-p1: hsla(210deg 0% 0% / 0.8); --text-p2: hsla(210deg 0% 0% / 0.7); --text-p3: hsla(210deg 0% 0% / 0.5); --text-p4: hsla(210deg 0% 0% / 0.4); --text-meta: hsla(210deg 0% 0% / 0.2); --text-code: hsla(210deg 0% 0% / 0.9); --text-a10: hsla(210deg 0% 0% / 0.1); --text-a20: hsla(210deg 0% 0% / 0.2); --block: hsla(210deg 50% 12% / 0.04); --block-border: hsla(210deg 50% 12% / 0.06); } :root[data-theme="dark"] { --background: hsla(210deg 8% 12% / 1); --card: hsla(210deg 10% 24% / 1); --bg-a20: hsla(210deg 0% 0% / 0.2); --bg-a50: hsla(210deg 0% 0% / 0.5); --bg-a60: hsla(210deg 0% 0% / 0.6); --bg-a75: hsla(210deg 0% 0% / 0.75); --bg-a100: hsla(210deg 0% 0% / 1); --text: hsla(210deg 0% 100% / 1); --text-reverse: hsla(210deg 0% 0% / 1); --text-p1: hsla(210deg 0% 100% / 0.8); --text-p2: hsla(210deg 0% 100% / 0.7); --text-p3: hsla(210deg 0% 100% / 0.5); --text-p4: hsla(210deg 0% 100% / 0.4); --text-meta: hsla(210deg 0% 100% / 0.2); --text-code: hsla(210deg 0% 100% / 0.9); --text-a10: hsla(210deg 0% 100% / 0.1); --text-a20: hsla(210deg 0% 100% / 0.2); --block: hsla(210deg 24% 72% / 0.08); --block-border: hsla(210deg 24% 72% / 0.12); --text-code: hsla(20 75 60 / 1); } @media screen and (max-width: 667px) { :root[data-theme="dark"] { --background: #000; } } .tag-plugin { --theme-border: var(--block-border); --theme-block: var(--block); --theme-mark: var(--block); --theme-codeblock: var(--block); } .colorful[color='red'] { --hue: 4.105263157894738deg; --sat: 89.62264150943398%; --light: 58.43137254901961%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(4.105263157894738deg 89.62264150943398% 58.43137254901961% / 1); --link-a20: hsla(4.105263157894738deg 89.62264150943398% 58.43137254901961% / 0.2); --theme-border: hsla(4.105263157894738deg 50% 80% / var(--alpha)); --theme-block: hsla(4.105263157894738deg 90% 92% / var(--alpha)); --theme-mark: hsla(4.105263157894738deg 95% 80% / var(--alpha)); --theme-codeblock: hsla(4.105263157894738deg 50% 95% / var(--alpha)); --text: hsla(4.105263157894738deg 55% 16% / 1); --text-p1: hsla(4.105263157894738deg 90% 20% / 1); --text-p2: hsla(4.105263157894738deg 90% 20% / 0.8); --text-p3: hsla(4.105263157894738deg 90% 20% / 0.6); --text-p4: hsla(4.105263157894738deg 90% 20% / 0.4); --link: hsla(4.105263157894738deg 95% 32% / 1); --link-a20: hsla(4.105263157894738deg 95% 32% / 0.2); } .colorful[color='orange'] { --hue: 24deg; --sat: 100%; --light: 49.01960784313725%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(24deg 100% 49.01960784313725% / 1); --link-a20: hsla(24deg 100% 49.01960784313725% / 0.2); --theme-border: hsla(24deg 50% 80% / var(--alpha)); --theme-block: hsla(24deg 90% 92% / var(--alpha)); --theme-mark: hsla(24deg 95% 80% / var(--alpha)); --theme-codeblock: hsla(24deg 50% 95% / var(--alpha)); --text: hsla(24deg 55% 16% / 1); --text-p1: hsla(24deg 90% 20% / 1); --text-p2: hsla(24deg 90% 20% / 0.8); --text-p3: hsla(24deg 90% 20% / 0.6); --text-p4: hsla(24deg 90% 20% / 0.4); --link: hsla(24deg 95% 32% / 1); --link-a20: hsla(24deg 95% 32% / 0.2); } .colorful[color='amber'] { --hue: 41.320754716981135deg; --sat: 100%; --light: 58.43137254901961%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(41.320754716981135deg 100% 58.43137254901961% / 1); --link-a20: hsla(41.320754716981135deg 100% 58.43137254901961% / 0.2); --theme-border: hsla(41.320754716981135deg 50% 80% / var(--alpha)); --theme-block: hsla(41.320754716981135deg 90% 92% / var(--alpha)); --theme-mark: hsla(41.320754716981135deg 95% 80% / var(--alpha)); --theme-codeblock: hsla(41.320754716981135deg 50% 95% / var(--alpha)); --text: hsla(41.320754716981135deg 55% 16% / 1); --text-p1: hsla(41.320754716981135deg 90% 20% / 1); --text-p2: hsla(41.320754716981135deg 90% 20% / 0.8); --text-p3: hsla(41.320754716981135deg 90% 20% / 0.6); --text-p4: hsla(41.320754716981135deg 90% 20% / 0.4); --link: hsla(41.320754716981135deg 95% 32% / 1); --link-a20: hsla(41.320754716981135deg 95% 32% / 0.2); } .colorful[color='yellow'] { --hue: 50.96385542168675deg; --sat: 100%; --light: 67.45098039215686%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(50.96385542168675deg 100% 67.45098039215686% / 1); --link-a20: hsla(50.96385542168675deg 100% 67.45098039215686% / 0.2); --theme-border: hsla(50.96385542168675deg 50% 80% / var(--alpha)); --theme-block: hsla(50.96385542168675deg 90% 92% / var(--alpha)); --theme-mark: hsla(50.96385542168675deg 95% 80% / var(--alpha)); --theme-codeblock: hsla(50.96385542168675deg 50% 95% / var(--alpha)); --text: hsla(50.96385542168675deg 55% 16% / 1); --text-p1: hsla(50.96385542168675deg 90% 20% / 1); --text-p2: hsla(50.96385542168675deg 90% 20% / 0.8); --text-p3: hsla(50.96385542168675deg 90% 20% / 0.6); --text-p4: hsla(50.96385542168675deg 90% 20% / 0.4); --link: hsla(50.96385542168675deg 95% 32% / 1); --link-a20: hsla(50.96385542168675deg 95% 32% / 0.2); } .colorful[color='green'] { --hue: 128.38235294117646deg; --sat: 53.96825396825397%; --light: 50.588235294117645%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(128.38235294117646deg 53.96825396825397% 50.588235294117645% / 1); --link-a20: hsla(128.38235294117646deg 53.96825396825397% 50.588235294117645% / 0.2); --theme-border: hsla(128.38235294117646deg 50% 80% / var(--alpha)); --theme-block: hsla(128.38235294117646deg 90% 92% / var(--alpha)); --theme-mark: hsla(128.38235294117646deg 95% 80% / var(--alpha)); --theme-codeblock: hsla(128.38235294117646deg 50% 95% / var(--alpha)); --text: hsla(128.38235294117646deg 55% 16% / 1); --text-p1: hsla(128.38235294117646deg 90% 20% / 1); --text-p2: hsla(128.38235294117646deg 90% 20% / 0.8); --text-p3: hsla(128.38235294117646deg 90% 20% / 0.6); --text-p4: hsla(128.38235294117646deg 90% 20% / 0.4); --link: hsla(128.38235294117646deg 95% 32% / 1); --link-a20: hsla(128.38235294117646deg 95% 32% / 0.2); } .colorful[color='cyan'] { --hue: 192.53333333333333deg; --sat: 97.40259740259742%; --light: 54.70588235294118%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(192.53333333333333deg 97.40259740259742% 54.70588235294118% / 1); --link-a20: hsla(192.53333333333333deg 97.40259740259742% 54.70588235294118% / 0.2); --theme-border: hsla(192.53333333333333deg 50% 80% / var(--alpha)); --theme-block: hsla(192.53333333333333deg 90% 92% / var(--alpha)); --theme-mark: hsla(192.53333333333333deg 95% 80% / var(--alpha)); --theme-codeblock: hsla(192.53333333333333deg 50% 95% / var(--alpha)); --text: hsla(192.53333333333333deg 55% 16% / 1); --text-p1: hsla(192.53333333333333deg 90% 20% / 1); --text-p2: hsla(192.53333333333333deg 90% 20% / 0.8); --text-p3: hsla(192.53333333333333deg 90% 20% / 0.6); --text-p4: hsla(192.53333333333333deg 90% 20% / 0.4); --link: hsla(192.53333333333333deg 95% 32% / 1); --link-a20: hsla(192.53333333333333deg 95% 32% / 0.2); } .colorful[color='blue'] { --hue: 206.57142857142856deg; --sat: 89.74358974358974%; --light: 54.11764705882353%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(206.57142857142856deg 89.74358974358974% 54.11764705882353% / 1); --link-a20: hsla(206.57142857142856deg 89.74358974358974% 54.11764705882353% / 0.2); --theme-border: hsla(206.57142857142856deg 50% 80% / var(--alpha)); --theme-block: hsla(206.57142857142856deg 90% 92% / var(--alpha)); --theme-mark: hsla(206.57142857142856deg 95% 80% / var(--alpha)); --theme-codeblock: hsla(206.57142857142856deg 50% 95% / var(--alpha)); --text: hsla(206.57142857142856deg 55% 16% / 1); --text-p1: hsla(206.57142857142856deg 90% 20% / 1); --text-p2: hsla(206.57142857142856deg 90% 20% / 0.8); --text-p3: hsla(206.57142857142856deg 90% 20% / 0.6); --text-p4: hsla(206.57142857142856deg 90% 20% / 0.4); --link: hsla(206.57142857142856deg 95% 32% / 1); --link-a20: hsla(206.57142857142856deg 95% 32% / 0.2); } .colorful[color='purple'] { --hue: 291.24087591240874deg; --sat: 63.72093023255814%; --light: 42.15686274509804%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(291.24087591240874deg 63.72093023255814% 42.15686274509804% / 1); --link-a20: hsla(291.24087591240874deg 63.72093023255814% 42.15686274509804% / 0.2); --theme-border: hsla(291.24087591240874deg 50% 80% / var(--alpha)); --theme-block: hsla(291.24087591240874deg 90% 92% / var(--alpha)); --theme-mark: hsla(291.24087591240874deg 95% 80% / var(--alpha)); --theme-codeblock: hsla(291.24087591240874deg 50% 95% / var(--alpha)); --text: hsla(291.24087591240874deg 55% 16% / 1); --text-p1: hsla(291.24087591240874deg 90% 20% / 1); --text-p2: hsla(291.24087591240874deg 90% 20% / 0.8); --text-p3: hsla(291.24087591240874deg 90% 20% / 0.6); --text-p4: hsla(291.24087591240874deg 90% 20% / 0.4); --link: hsla(291.24087591240874deg 95% 32% / 1); --link-a20: hsla(291.24087591240874deg 95% 32% / 0.2); } .colorful[color='theme'] { --hue: 192deg; --sat: 98%; --light: 55%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(192deg 98% 55% / 1); --link-a20: hsla(192deg 98% 55% / 0.2); --theme-border: hsla(192deg 50% 80% / var(--alpha)); --theme-block: hsla(192deg 90% 92% / var(--alpha)); --theme-mark: hsla(192deg 95% 80% / var(--alpha)); --theme-codeblock: hsla(192deg 50% 95% / var(--alpha)); --text: hsla(192deg 55% 16% / 1); --text-p1: hsla(192deg 90% 20% / 1); --text-p2: hsla(192deg 90% 20% / 0.8); --text-p3: hsla(192deg 90% 20% / 0.6); --text-p4: hsla(192deg 90% 20% / 0.4); --link: hsla(192deg 95% 32% / 1); --link-a20: hsla(192deg 95% 32% / 0.2); } .colorful[color='accent'] { --hue: 14deg; --sat: 100%; --light: 57%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(14deg 100% 57% / 1); --link-a20: hsla(14deg 100% 57% / 0.2); --theme-border: hsla(14deg 50% 80% / var(--alpha)); --theme-block: hsla(14deg 90% 92% / var(--alpha)); --theme-mark: hsla(14deg 95% 80% / var(--alpha)); --theme-codeblock: hsla(14deg 50% 95% / var(--alpha)); --text: hsla(14deg 55% 16% / 1); --text-p1: hsla(14deg 90% 20% / 1); --text-p2: hsla(14deg 90% 20% / 0.8); --text-p3: hsla(14deg 90% 20% / 0.6); --text-p4: hsla(14deg 90% 20% / 0.4); --link: hsla(14deg 95% 32% / 1); --link-a20: hsla(14deg 95% 32% / 0.2); } .colorful[color='light'] { --theme: #fff; --theme-block: var(--theme); --theme-mark: var(--theme); --theme-codeblock: var(--theme); --background: hsla(210deg 20% 98% / 1); --card: #fff; --bg-a20: hsla(210deg 0% 100% / 0.2); --bg-a50: hsla(210deg 0% 100% / 0.5); --bg-a60: hsla(210deg 0% 100% / 0.6); --bg-a75: hsla(210deg 0% 100% / 0.75); --bg-a100: hsla(210deg 0% 100% / 1); --text: hsla(210deg 0% 0% / 1); --text-reverse: hsla(210deg 0% 100% / 1); --text-p1: hsla(210deg 0% 0% / 0.8); --text-p2: hsla(210deg 0% 0% / 0.7); --text-p3: hsla(210deg 0% 0% / 0.5); --text-p4: hsla(210deg 0% 0% / 0.4); --text-meta: hsla(210deg 0% 0% / 0.2); --text-code: hsla(210deg 0% 0% / 0.9); --text-a10: hsla(210deg 0% 0% / 0.1); --text-a20: hsla(210deg 0% 0% / 0.2); --block: hsla(210deg 50% 12% / 0.04); --block-border: hsla(210deg 50% 12% / 0.06); } .colorful[color='dark'] { --background: hsla(210deg 8% 12% / 1); --card: hsla(210deg 10% 24% / 1); --bg-a20: hsla(210deg 0% 0% / 0.2); --bg-a50: hsla(210deg 0% 0% / 0.5); --bg-a60: hsla(210deg 0% 0% / 0.6); --bg-a75: hsla(210deg 0% 0% / 0.75); --bg-a100: hsla(210deg 0% 0% / 1); --text: hsla(210deg 0% 100% / 1); --text-reverse: hsla(210deg 0% 0% / 1); --text-p1: hsla(210deg 0% 100% / 0.8); --text-p2: hsla(210deg 0% 100% / 0.7); --text-p3: hsla(210deg 0% 100% / 0.5); --text-p4: hsla(210deg 0% 100% / 0.4); --text-meta: hsla(210deg 0% 100% / 0.2); --text-code: hsla(210deg 0% 100% / 0.9); --text-a10: hsla(210deg 0% 100% / 0.1); --text-a20: hsla(210deg 0% 100% / 0.2); --block: hsla(210deg 24% 72% / 0.08); --block-border: hsla(210deg 24% 72% / 0.12); --text-code: hsla(20 75 60 / 1); --theme: #111; --theme-border: none; --theme-block: var(--theme); --theme-mark: var(--theme); --theme-codeblock: var(--theme); } @media screen and (max-width: 667px) { .colorful[color='dark'] { --background: #000; } } .colorful[color='warning'] { --hue: 50.96385542168675deg; --sat: 100%; --light: 67.45098039215686%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(50.96385542168675deg 100% 67.45098039215686% / 1); --link-a20: hsla(50.96385542168675deg 100% 67.45098039215686% / 0.2); --theme-border: hsla(50.96385542168675deg 50% 80% / var(--alpha)); --theme-block: hsla(50.96385542168675deg 90% 92% / var(--alpha)); --theme-mark: hsla(50.96385542168675deg 95% 80% / var(--alpha)); --theme-codeblock: hsla(50.96385542168675deg 50% 95% / var(--alpha)); --text: hsla(50.96385542168675deg 55% 16% / 1); --text-p1: hsla(50.96385542168675deg 90% 20% / 1); --text-p2: hsla(50.96385542168675deg 90% 20% / 0.8); --text-p3: hsla(50.96385542168675deg 90% 20% / 0.6); --text-p4: hsla(50.96385542168675deg 90% 20% / 0.4); --link: hsla(50.96385542168675deg 95% 32% / 1); --link-a20: hsla(50.96385542168675deg 95% 32% / 0.2); --background: hsla(210deg 20% 98% / 1); --card: #fff; --bg-a20: hsla(210deg 0% 100% / 0.2); --bg-a50: hsla(210deg 0% 100% / 0.5); --bg-a60: hsla(210deg 0% 100% / 0.6); --bg-a75: hsla(210deg 0% 100% / 0.75); --bg-a100: hsla(210deg 0% 100% / 1); --text: hsla(210deg 0% 0% / 1); --text-reverse: hsla(210deg 0% 100% / 1); --text-p1: hsla(210deg 0% 0% / 0.8); --text-p2: hsla(210deg 0% 0% / 0.7); --text-p3: hsla(210deg 0% 0% / 0.5); --text-p4: hsla(210deg 0% 0% / 0.4); --text-meta: hsla(210deg 0% 0% / 0.2); --text-code: hsla(210deg 0% 0% / 0.9); --text-a10: hsla(210deg 0% 0% / 0.1); --text-a20: hsla(210deg 0% 0% / 0.2); --block: hsla(210deg 50% 12% / 0.04); --block-border: hsla(210deg 50% 12% / 0.06); --link: hsla(4.105263157894738deg 89.62264150943398% 58.43137254901961% / 1); --link-a20: hsla(4.105263157894738deg 89.62264150943398% 58.43137254901961% / 0.2); --theme-border: none; --theme-block: var(--theme); --text-code: var(--text-p1); } .colorful[color='error'] { --hue: 4.105263157894738deg; --sat: 89.62264150943398%; --light: 58.43137254901961%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(4.105263157894738deg 89.62264150943398% 58.43137254901961% / 1); --link-a20: hsla(4.105263157894738deg 89.62264150943398% 58.43137254901961% / 0.2); --theme-border: hsla(4.105263157894738deg 40% 24% / var(--alpha)); --theme-block: hsla(4.105263157894738deg 24% 24% / var(--alpha)); --theme-mark: hsla(4.105263157894738deg 24% 24% / var(--alpha)); --theme-codeblock: hsla(4.105263157894738deg 12% 24% / var(--alpha)); --text: hsla(4.105263157894738deg 50% 75% / 1); --text-p1: hsla(4.105263157894738deg 80% 80% / 1); --text-p2: hsla(4.105263157894738deg 80% 80% / 0.8); --text-p3: hsla(4.105263157894738deg 80% 80% / 0.6); --text-p4: hsla(4.105263157894738deg 80% 80% / 0.4); --link: hsla(4.105263157894738deg 80% 60% / 1); --link-a20: hsla(4.105263157894738deg 80% 60% / 0.2); --background: hsla(210deg 8% 12% / 1); --card: hsla(210deg 10% 24% / 1); --bg-a20: hsla(210deg 0% 0% / 0.2); --bg-a50: hsla(210deg 0% 0% / 0.5); --bg-a60: hsla(210deg 0% 0% / 0.6); --bg-a75: hsla(210deg 0% 0% / 0.75); --bg-a100: hsla(210deg 0% 0% / 1); --text: hsla(210deg 0% 100% / 1); --text-reverse: hsla(210deg 0% 0% / 1); --text-p1: hsla(210deg 0% 100% / 0.8); --text-p2: hsla(210deg 0% 100% / 0.7); --text-p3: hsla(210deg 0% 100% / 0.5); --text-p4: hsla(210deg 0% 100% / 0.4); --text-meta: hsla(210deg 0% 100% / 0.2); --text-code: hsla(210deg 0% 100% / 0.9); --text-a10: hsla(210deg 0% 100% / 0.1); --text-a20: hsla(210deg 0% 100% / 0.2); --block: hsla(210deg 24% 72% / 0.08); --block-border: hsla(210deg 24% 72% / 0.12); --text-code: hsla(20 75 60 / 1); --link: hsla(50.96385542168675deg 100% 67.45098039215686% / 1); --link-a20: hsla(50.96385542168675deg 100% 67.45098039215686% / 0.2); --theme-border: none; --theme-block: var(--theme); --text-code: var(--text-p1); } @media screen and (max-width: 667px) { .colorful[color='error'] { --background: #000; } } :root[data-theme="dark"] .tag-plugin.tag { --hue: 192deg; --sat: 98%; --light: 55%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(192deg 98% 55% / 1); --link-a20: hsla(192deg 98% 55% / 0.2); --theme-border: hsla(192deg 40% 24% / var(--alpha)); --theme-block: hsla(192deg 24% 24% / var(--alpha)); --theme-mark: hsla(192deg 24% 24% / var(--alpha)); --theme-codeblock: hsla(192deg 12% 24% / var(--alpha)); --text: hsla(192deg 50% 75% / 1); --text-p1: hsla(192deg 80% 80% / 1); --text-p2: hsla(192deg 80% 80% / 0.8); --text-p3: hsla(192deg 80% 80% / 0.6); --text-p4: hsla(192deg 80% 80% / 0.4); --link: hsla(192deg 80% 60% / 1); --link-a20: hsla(192deg 80% 60% / 0.2); } :root[data-theme="dark"] .colorful[color='red'] { --hue: 4.105263157894738deg; --sat: 89.62264150943398%; --light: 58.43137254901961%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(4.105263157894738deg 89.62264150943398% 58.43137254901961% / 1); --link-a20: hsla(4.105263157894738deg 89.62264150943398% 58.43137254901961% / 0.2); --theme-border: hsla(4.105263157894738deg 40% 24% / var(--alpha)); --theme-block: hsla(4.105263157894738deg 24% 24% / var(--alpha)); --theme-mark: hsla(4.105263157894738deg 24% 24% / var(--alpha)); --theme-codeblock: hsla(4.105263157894738deg 12% 24% / var(--alpha)); --text: hsla(4.105263157894738deg 50% 75% / 1); --text-p1: hsla(4.105263157894738deg 80% 80% / 1); --text-p2: hsla(4.105263157894738deg 80% 80% / 0.8); --text-p3: hsla(4.105263157894738deg 80% 80% / 0.6); --text-p4: hsla(4.105263157894738deg 80% 80% / 0.4); --link: hsla(4.105263157894738deg 80% 60% / 1); --link-a20: hsla(4.105263157894738deg 80% 60% / 0.2); } :root[data-theme="dark"] .colorful[color='orange'] { --hue: 24deg; --sat: 100%; --light: 49.01960784313725%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(24deg 100% 49.01960784313725% / 1); --link-a20: hsla(24deg 100% 49.01960784313725% / 0.2); --theme-border: hsla(24deg 40% 24% / var(--alpha)); --theme-block: hsla(24deg 24% 24% / var(--alpha)); --theme-mark: hsla(24deg 24% 24% / var(--alpha)); --theme-codeblock: hsla(24deg 12% 24% / var(--alpha)); --text: hsla(24deg 50% 75% / 1); --text-p1: hsla(24deg 80% 80% / 1); --text-p2: hsla(24deg 80% 80% / 0.8); --text-p3: hsla(24deg 80% 80% / 0.6); --text-p4: hsla(24deg 80% 80% / 0.4); --link: hsla(24deg 80% 60% / 1); --link-a20: hsla(24deg 80% 60% / 0.2); } :root[data-theme="dark"] .colorful[color='amber'] { --hue: 41.320754716981135deg; --sat: 100%; --light: 58.43137254901961%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(41.320754716981135deg 100% 58.43137254901961% / 1); --link-a20: hsla(41.320754716981135deg 100% 58.43137254901961% / 0.2); --theme-border: hsla(41.320754716981135deg 40% 24% / var(--alpha)); --theme-block: hsla(41.320754716981135deg 24% 24% / var(--alpha)); --theme-mark: hsla(41.320754716981135deg 24% 24% / var(--alpha)); --theme-codeblock: hsla(41.320754716981135deg 12% 24% / var(--alpha)); --text: hsla(41.320754716981135deg 50% 75% / 1); --text-p1: hsla(41.320754716981135deg 80% 80% / 1); --text-p2: hsla(41.320754716981135deg 80% 80% / 0.8); --text-p3: hsla(41.320754716981135deg 80% 80% / 0.6); --text-p4: hsla(41.320754716981135deg 80% 80% / 0.4); --link: hsla(41.320754716981135deg 80% 60% / 1); --link-a20: hsla(41.320754716981135deg 80% 60% / 0.2); } :root[data-theme="dark"] .colorful[color='yellow'] { --hue: 50.96385542168675deg; --sat: 100%; --light: 67.45098039215686%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(50.96385542168675deg 100% 67.45098039215686% / 1); --link-a20: hsla(50.96385542168675deg 100% 67.45098039215686% / 0.2); --theme-border: hsla(50.96385542168675deg 40% 24% / var(--alpha)); --theme-block: hsla(50.96385542168675deg 24% 24% / var(--alpha)); --theme-mark: hsla(50.96385542168675deg 24% 24% / var(--alpha)); --theme-codeblock: hsla(50.96385542168675deg 12% 24% / var(--alpha)); --text: hsla(50.96385542168675deg 50% 75% / 1); --text-p1: hsla(50.96385542168675deg 80% 80% / 1); --text-p2: hsla(50.96385542168675deg 80% 80% / 0.8); --text-p3: hsla(50.96385542168675deg 80% 80% / 0.6); --text-p4: hsla(50.96385542168675deg 80% 80% / 0.4); --link: hsla(50.96385542168675deg 80% 60% / 1); --link-a20: hsla(50.96385542168675deg 80% 60% / 0.2); } :root[data-theme="dark"] .colorful[color='green'] { --hue: 128.38235294117646deg; --sat: 53.96825396825397%; --light: 50.588235294117645%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(128.38235294117646deg 53.96825396825397% 50.588235294117645% / 1); --link-a20: hsla(128.38235294117646deg 53.96825396825397% 50.588235294117645% / 0.2); --theme-border: hsla(128.38235294117646deg 40% 24% / var(--alpha)); --theme-block: hsla(128.38235294117646deg 24% 24% / var(--alpha)); --theme-mark: hsla(128.38235294117646deg 24% 24% / var(--alpha)); --theme-codeblock: hsla(128.38235294117646deg 12% 24% / var(--alpha)); --text: hsla(128.38235294117646deg 50% 75% / 1); --text-p1: hsla(128.38235294117646deg 80% 80% / 1); --text-p2: hsla(128.38235294117646deg 80% 80% / 0.8); --text-p3: hsla(128.38235294117646deg 80% 80% / 0.6); --text-p4: hsla(128.38235294117646deg 80% 80% / 0.4); --link: hsla(128.38235294117646deg 80% 60% / 1); --link-a20: hsla(128.38235294117646deg 80% 60% / 0.2); } :root[data-theme="dark"] .colorful[color='cyan'] { --hue: 192.53333333333333deg; --sat: 97.40259740259742%; --light: 54.70588235294118%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(192.53333333333333deg 97.40259740259742% 54.70588235294118% / 1); --link-a20: hsla(192.53333333333333deg 97.40259740259742% 54.70588235294118% / 0.2); --theme-border: hsla(192.53333333333333deg 40% 24% / var(--alpha)); --theme-block: hsla(192.53333333333333deg 24% 24% / var(--alpha)); --theme-mark: hsla(192.53333333333333deg 24% 24% / var(--alpha)); --theme-codeblock: hsla(192.53333333333333deg 12% 24% / var(--alpha)); --text: hsla(192.53333333333333deg 50% 75% / 1); --text-p1: hsla(192.53333333333333deg 80% 80% / 1); --text-p2: hsla(192.53333333333333deg 80% 80% / 0.8); --text-p3: hsla(192.53333333333333deg 80% 80% / 0.6); --text-p4: hsla(192.53333333333333deg 80% 80% / 0.4); --link: hsla(192.53333333333333deg 80% 60% / 1); --link-a20: hsla(192.53333333333333deg 80% 60% / 0.2); } :root[data-theme="dark"] .colorful[color='blue'] { --hue: 206.57142857142856deg; --sat: 89.74358974358974%; --light: 54.11764705882353%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(206.57142857142856deg 89.74358974358974% 54.11764705882353% / 1); --link-a20: hsla(206.57142857142856deg 89.74358974358974% 54.11764705882353% / 0.2); --theme-border: hsla(206.57142857142856deg 40% 24% / var(--alpha)); --theme-block: hsla(206.57142857142856deg 24% 24% / var(--alpha)); --theme-mark: hsla(206.57142857142856deg 24% 24% / var(--alpha)); --theme-codeblock: hsla(206.57142857142856deg 12% 24% / var(--alpha)); --text: hsla(206.57142857142856deg 50% 75% / 1); --text-p1: hsla(206.57142857142856deg 80% 80% / 1); --text-p2: hsla(206.57142857142856deg 80% 80% / 0.8); --text-p3: hsla(206.57142857142856deg 80% 80% / 0.6); --text-p4: hsla(206.57142857142856deg 80% 80% / 0.4); --link: hsla(206.57142857142856deg 80% 60% / 1); --link-a20: hsla(206.57142857142856deg 80% 60% / 0.2); } :root[data-theme="dark"] .colorful[color='purple'] { --hue: 291.24087591240874deg; --sat: 63.72093023255814%; --light: 42.15686274509804%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(291.24087591240874deg 63.72093023255814% 42.15686274509804% / 1); --link-a20: hsla(291.24087591240874deg 63.72093023255814% 42.15686274509804% / 0.2); --theme-border: hsla(291.24087591240874deg 40% 24% / var(--alpha)); --theme-block: hsla(291.24087591240874deg 24% 24% / var(--alpha)); --theme-mark: hsla(291.24087591240874deg 24% 24% / var(--alpha)); --theme-codeblock: hsla(291.24087591240874deg 12% 24% / var(--alpha)); --text: hsla(291.24087591240874deg 50% 75% / 1); --text-p1: hsla(291.24087591240874deg 80% 80% / 1); --text-p2: hsla(291.24087591240874deg 80% 80% / 0.8); --text-p3: hsla(291.24087591240874deg 80% 80% / 0.6); --text-p4: hsla(291.24087591240874deg 80% 80% / 0.4); --link: hsla(291.24087591240874deg 80% 60% / 1); --link-a20: hsla(291.24087591240874deg 80% 60% / 0.2); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .tag-plugin.tag { --hue: 192deg; --sat: 98%; --light: 55%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(192deg 98% 55% / 1); --link-a20: hsla(192deg 98% 55% / 0.2); --theme-border: hsla(192deg 40% 24% / var(--alpha)); --theme-block: hsla(192deg 24% 24% / var(--alpha)); --theme-mark: hsla(192deg 24% 24% / var(--alpha)); --theme-codeblock: hsla(192deg 12% 24% / var(--alpha)); --text: hsla(192deg 50% 75% / 1); --text-p1: hsla(192deg 80% 80% / 1); --text-p2: hsla(192deg 80% 80% / 0.8); --text-p3: hsla(192deg 80% 80% / 0.6); --text-p4: hsla(192deg 80% 80% / 0.4); --link: hsla(192deg 80% 60% / 1); --link-a20: hsla(192deg 80% 60% / 0.2); } :root:not([data-theme]) .colorful[color='red'] { --hue: 4.105263157894738deg; --sat: 89.62264150943398%; --light: 58.43137254901961%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(4.105263157894738deg 89.62264150943398% 58.43137254901961% / 1); --link-a20: hsla(4.105263157894738deg 89.62264150943398% 58.43137254901961% / 0.2); --theme-border: hsla(4.105263157894738deg 40% 24% / var(--alpha)); --theme-block: hsla(4.105263157894738deg 24% 24% / var(--alpha)); --theme-mark: hsla(4.105263157894738deg 24% 24% / var(--alpha)); --theme-codeblock: hsla(4.105263157894738deg 12% 24% / var(--alpha)); --text: hsla(4.105263157894738deg 50% 75% / 1); --text-p1: hsla(4.105263157894738deg 80% 80% / 1); --text-p2: hsla(4.105263157894738deg 80% 80% / 0.8); --text-p3: hsla(4.105263157894738deg 80% 80% / 0.6); --text-p4: hsla(4.105263157894738deg 80% 80% / 0.4); --link: hsla(4.105263157894738deg 80% 60% / 1); --link-a20: hsla(4.105263157894738deg 80% 60% / 0.2); } :root:not([data-theme]) .colorful[color='orange'] { --hue: 24deg; --sat: 100%; --light: 49.01960784313725%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(24deg 100% 49.01960784313725% / 1); --link-a20: hsla(24deg 100% 49.01960784313725% / 0.2); --theme-border: hsla(24deg 40% 24% / var(--alpha)); --theme-block: hsla(24deg 24% 24% / var(--alpha)); --theme-mark: hsla(24deg 24% 24% / var(--alpha)); --theme-codeblock: hsla(24deg 12% 24% / var(--alpha)); --text: hsla(24deg 50% 75% / 1); --text-p1: hsla(24deg 80% 80% / 1); --text-p2: hsla(24deg 80% 80% / 0.8); --text-p3: hsla(24deg 80% 80% / 0.6); --text-p4: hsla(24deg 80% 80% / 0.4); --link: hsla(24deg 80% 60% / 1); --link-a20: hsla(24deg 80% 60% / 0.2); } :root:not([data-theme]) .colorful[color='amber'] { --hue: 41.320754716981135deg; --sat: 100%; --light: 58.43137254901961%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(41.320754716981135deg 100% 58.43137254901961% / 1); --link-a20: hsla(41.320754716981135deg 100% 58.43137254901961% / 0.2); --theme-border: hsla(41.320754716981135deg 40% 24% / var(--alpha)); --theme-block: hsla(41.320754716981135deg 24% 24% / var(--alpha)); --theme-mark: hsla(41.320754716981135deg 24% 24% / var(--alpha)); --theme-codeblock: hsla(41.320754716981135deg 12% 24% / var(--alpha)); --text: hsla(41.320754716981135deg 50% 75% / 1); --text-p1: hsla(41.320754716981135deg 80% 80% / 1); --text-p2: hsla(41.320754716981135deg 80% 80% / 0.8); --text-p3: hsla(41.320754716981135deg 80% 80% / 0.6); --text-p4: hsla(41.320754716981135deg 80% 80% / 0.4); --link: hsla(41.320754716981135deg 80% 60% / 1); --link-a20: hsla(41.320754716981135deg 80% 60% / 0.2); } :root:not([data-theme]) .colorful[color='yellow'] { --hue: 50.96385542168675deg; --sat: 100%; --light: 67.45098039215686%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(50.96385542168675deg 100% 67.45098039215686% / 1); --link-a20: hsla(50.96385542168675deg 100% 67.45098039215686% / 0.2); --theme-border: hsla(50.96385542168675deg 40% 24% / var(--alpha)); --theme-block: hsla(50.96385542168675deg 24% 24% / var(--alpha)); --theme-mark: hsla(50.96385542168675deg 24% 24% / var(--alpha)); --theme-codeblock: hsla(50.96385542168675deg 12% 24% / var(--alpha)); --text: hsla(50.96385542168675deg 50% 75% / 1); --text-p1: hsla(50.96385542168675deg 80% 80% / 1); --text-p2: hsla(50.96385542168675deg 80% 80% / 0.8); --text-p3: hsla(50.96385542168675deg 80% 80% / 0.6); --text-p4: hsla(50.96385542168675deg 80% 80% / 0.4); --link: hsla(50.96385542168675deg 80% 60% / 1); --link-a20: hsla(50.96385542168675deg 80% 60% / 0.2); } :root:not([data-theme]) .colorful[color='green'] { --hue: 128.38235294117646deg; --sat: 53.96825396825397%; --light: 50.588235294117645%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(128.38235294117646deg 53.96825396825397% 50.588235294117645% / 1); --link-a20: hsla(128.38235294117646deg 53.96825396825397% 50.588235294117645% / 0.2); --theme-border: hsla(128.38235294117646deg 40% 24% / var(--alpha)); --theme-block: hsla(128.38235294117646deg 24% 24% / var(--alpha)); --theme-mark: hsla(128.38235294117646deg 24% 24% / var(--alpha)); --theme-codeblock: hsla(128.38235294117646deg 12% 24% / var(--alpha)); --text: hsla(128.38235294117646deg 50% 75% / 1); --text-p1: hsla(128.38235294117646deg 80% 80% / 1); --text-p2: hsla(128.38235294117646deg 80% 80% / 0.8); --text-p3: hsla(128.38235294117646deg 80% 80% / 0.6); --text-p4: hsla(128.38235294117646deg 80% 80% / 0.4); --link: hsla(128.38235294117646deg 80% 60% / 1); --link-a20: hsla(128.38235294117646deg 80% 60% / 0.2); } :root:not([data-theme]) .colorful[color='cyan'] { --hue: 192.53333333333333deg; --sat: 97.40259740259742%; --light: 54.70588235294118%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(192.53333333333333deg 97.40259740259742% 54.70588235294118% / 1); --link-a20: hsla(192.53333333333333deg 97.40259740259742% 54.70588235294118% / 0.2); --theme-border: hsla(192.53333333333333deg 40% 24% / var(--alpha)); --theme-block: hsla(192.53333333333333deg 24% 24% / var(--alpha)); --theme-mark: hsla(192.53333333333333deg 24% 24% / var(--alpha)); --theme-codeblock: hsla(192.53333333333333deg 12% 24% / var(--alpha)); --text: hsla(192.53333333333333deg 50% 75% / 1); --text-p1: hsla(192.53333333333333deg 80% 80% / 1); --text-p2: hsla(192.53333333333333deg 80% 80% / 0.8); --text-p3: hsla(192.53333333333333deg 80% 80% / 0.6); --text-p4: hsla(192.53333333333333deg 80% 80% / 0.4); --link: hsla(192.53333333333333deg 80% 60% / 1); --link-a20: hsla(192.53333333333333deg 80% 60% / 0.2); } :root:not([data-theme]) .colorful[color='blue'] { --hue: 206.57142857142856deg; --sat: 89.74358974358974%; --light: 54.11764705882353%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(206.57142857142856deg 89.74358974358974% 54.11764705882353% / 1); --link-a20: hsla(206.57142857142856deg 89.74358974358974% 54.11764705882353% / 0.2); --theme-border: hsla(206.57142857142856deg 40% 24% / var(--alpha)); --theme-block: hsla(206.57142857142856deg 24% 24% / var(--alpha)); --theme-mark: hsla(206.57142857142856deg 24% 24% / var(--alpha)); --theme-codeblock: hsla(206.57142857142856deg 12% 24% / var(--alpha)); --text: hsla(206.57142857142856deg 50% 75% / 1); --text-p1: hsla(206.57142857142856deg 80% 80% / 1); --text-p2: hsla(206.57142857142856deg 80% 80% / 0.8); --text-p3: hsla(206.57142857142856deg 80% 80% / 0.6); --text-p4: hsla(206.57142857142856deg 80% 80% / 0.4); --link: hsla(206.57142857142856deg 80% 60% / 1); --link-a20: hsla(206.57142857142856deg 80% 60% / 0.2); } :root:not([data-theme]) .colorful[color='purple'] { --hue: 291.24087591240874deg; --sat: 63.72093023255814%; --light: 42.15686274509804%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); --link: hsla(291.24087591240874deg 63.72093023255814% 42.15686274509804% / 1); --link-a20: hsla(291.24087591240874deg 63.72093023255814% 42.15686274509804% / 0.2); --theme-border: hsla(291.24087591240874deg 40% 24% / var(--alpha)); --theme-block: hsla(291.24087591240874deg 24% 24% / var(--alpha)); --theme-mark: hsla(291.24087591240874deg 24% 24% / var(--alpha)); --theme-codeblock: hsla(291.24087591240874deg 12% 24% / var(--alpha)); --text: hsla(291.24087591240874deg 50% 75% / 1); --text-p1: hsla(291.24087591240874deg 80% 80% / 1); --text-p2: hsla(291.24087591240874deg 80% 80% / 0.8); --text-p3: hsla(291.24087591240874deg 80% 80% / 0.6); --text-p4: hsla(291.24087591240874deg 80% 80% / 0.4); --link: hsla(291.24087591240874deg 80% 60% / 1); --link-a20: hsla(291.24087591240874deg 80% 60% / 0.2); } } pre { font-family: Menlo, Monaco, Consolas, system-ui, monospace, sans-serif; font-size: 0.8125rem; tab-size: 4; -moz-tab-size: 4; -o-tab-size: 4; -webkit-tab-size: 4; } a { text-decoration: none; color: var(--link); } a:hover { color: var(--accent); } .md-text p:not([class]) { text-align: left; } hr { color: var(--text-meta); opacity: 0.1; } img { max-width: 100%; } li { font-size: calc(var(--fsp) - 1px); } ul, ol { padding-left: var(--fsp); } table:not([class]) { border-collapse: collapse; overflow: auto; margin: 1rem 0; max-width: 100%; vertical-align: text-top; --fsp: calc(17px - 2px); font-size: var(--fsp); display: table; } table:not([class])::-webkit-scrollbar { height: 0; width: 0; } table:not([class])::-webkit-scrollbar-track-piece { background: transparent; } table:not([class])::-webkit-scrollbar-thumb { background: var(--text-meta); cursor: pointer; border-radius: 0; } table:not([class])::-webkit-scrollbar-thumb:hover { background: var(--text-p3); } table:not([class]) th { background: var(--block); border-top: 1px solid var(--block-border); border-bottom: 1px solid var(--block-border); } table:not([class]) td, table:not([class]) th { padding: 4px 1em; line-height: 1.5; } table:not([class]) tr { border-bottom: 1px dashed var(--block-border); } table:not([class]) tr:hover { background: var(--block); } @media screen and (min-width: 667px) { table:not([class]) { width: 100%; } } @media screen and (max-width: 667px) { table:not([class]) { display: block; } table:not([class]) tr { word-break: keep-all; white-space: nowrap; } } blockquote { display: block; margin-left: 0; margin-right: 0; padding: 0 var(--fsp); color: var(--text-p3); position: relative; } blockquote:before { transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; content: ''; position: absolute; top: 0; bottom: 0; width: 4px; border-radius: 1px; left: 0; opacity: 0.5; background: var(--text-meta); } blockquote:hover:before { background: var(--theme); } :root { --blur-px: 12px; --blur-bg: var(--bg-a50); --blur-sat: 300%; } .blur { background-color: var(--blur-bg); } @supports ((-webkit-backdrop-filter: blur(var(--blur-px))) or (backdrop-filter: blur(var(--blur-px)))) { .blur { background-color: var(--blur-bg) !important; backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px)); -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px)); } } .blur:hover { background-color: var(--card); } button { border: none; font-weight: 500; outline: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; cursor: pointer; background: none; } a.button { font-weight: 500; line-height: 1; padding: 0.75rem 2rem; border-radius: 8px; font-size: 0.9375rem; user-select: none; } a.button.theme { background: var(--theme); color: var(--card); } a.button.theme:hover { background: var(--accent); } a.button.start { border-radius: 100px; background: var(--text-p1); color: var(--card); } a[onclick]:hover { cursor: pointer; } a.button.start.gradient { position: relative; } :root[data-theme="dark"] a.button.start.gradient { transition: 0.38s ease-out; z-index: 0; background: linear-gradient(to right, #4c95fa, #38c9fa, #24f9c4, #24f9c4, #38c9fa, #4c95fa); background-size: 1000%; color: #fff; text-shadow: 0 0 1px rgba(0,0,0,0.12); animation: glow 60s linear infinite; } :root[data-theme="dark"] a.button.start.gradient:after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 100px; background: inherit; z-index: -1; filter: blur(12px); opacity: 0.5; transition: 0.38s ease-out; } :root[data-theme="dark"] a.button.start.gradient:hover:after { filter: blur(36px); opacity: 1; } @-moz-keyframes glow { from { background-position: 0%; } to { background-position: 1000%; } } @-webkit-keyframes glow { from { background-position: 0%; } to { background-position: 1000%; } } @-o-keyframes glow { from { background-position: 0%; } to { background-position: 1000%; } } @keyframes glow { from { background-position: 0%; } to { background-position: 1000%; } } @media (prefers-color-scheme: dark) { :root:not([data-theme]) a.button.start.gradient { transition: 0.38s ease-out; z-index: 0; background: linear-gradient(to right, #4c95fa, #38c9fa, #24f9c4, #24f9c4, #38c9fa, #4c95fa); background-size: 1000%; color: #fff; text-shadow: 0 0 1px rgba(0,0,0,0.12); animation: glow 60s linear infinite; } :root:not([data-theme]) a.button.start.gradient:after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 100px; background: inherit; z-index: -1; filter: blur(12px); opacity: 0.5; transition: 0.38s ease-out; } :root:not([data-theme]) a.button.start.gradient:hover:after { filter: blur(36px); opacity: 1; } @-moz-keyframes glow { from { background-position: 0%; } to { background-position: 1000%; } } @-webkit-keyframes glow { from { background-position: 0%; } to { background-position: 1000%; } } @-o-keyframes glow { from { background-position: 0%; } to { background-position: 1000%; } } @keyframes glow { from { background-position: 0%; } to { background-position: 1000%; } } } .canonical-tip { position: fixed; text-align: center; bottom: 4rem; left: 50%; transform: translateX(-50%); max-width: 90%; background-color: var(--card); color: var(--text-p1); font-size: 1rem; font-family: #fff8e1; z-index: 9999999; box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 4px 16px rgba(0,0,0,0.1), 0 8px 32px rgba(0,0,0,0.1); border-radius: 6px; } .canonical-tip .headline { font-size: calc(17px + 11px); } .canonical-tip a { display: block; color: inherit; padding: 1rem 2rem; } .canonical-tip.unofficial { background-color: #f43; color: #fff; animation: breathe 3s ease-in-out infinite; } @-moz-keyframes breathe { 0% { background-color: #f43; } 50% { background-color: #990d00; } 100% { background-color: #f43; } } @-webkit-keyframes breathe { 0% { background-color: #f43; } 50% { background-color: #990d00; } 100% { background-color: #f43; } } @-o-keyframes breathe { 0% { background-color: #f43; } 50% { background-color: #990d00; } 100% { background-color: #f43; } } @keyframes breathe { 0% { background-color: #f43; } 50% { background-color: #990d00; } 100% { background-color: #f43; } } .cap { font-weight: 500; font-size: 0.8125rem; scrollbar-width: none; color: var(--text-p2); } .cap.blue { color: #0d87e9; } .cap.cyan { color: #03c3f5; } .cap.theme { color: var(--theme); } .dis-select { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } .mobile-only { display: none; } @media screen and (max-width: 667px) { .mobile-only { display: block !important; } } @media screen and (max-width: 667px) { .mobile-hidden { display: none !important; } } .float-panel { position: sticky; grid-column-end: span 3; --inset: 2rem; right: 0; bottom: calc(var(--inset) * 2); margin-left: auto; margin-right: var(--inset); float: right; z-index: 999999; display: flex; justify-content: center; flex-direction: column; border-radius: 64px; overflow: hidden; transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; box-shadow: 0 0 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04); transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; text-shadow: 0 0 4px #fff, 0 0 8px rgba(255,255,255,0.8), 0 0 16px rgba(255,255,255,0.6); } @media screen and (min-width: 667px) { .float-panel { margin-right: 3rem; } } .float-panel:before, .float-panel:after { border-radius: 64px; } @media (prefers-color-scheme: dark) { .float-panel { text-shadow: 0 0 2px rgba(0,0,0,0.2), 0 0 4px rgba(0,0,0,0.4); } } .float-panel nav a:not(.active, .float-panel :hover) { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 4px #fff); } @media (prefers-color-scheme: dark) { .float-panel nav a:not(.active, .float-panel :hover) { filter: none; } } .float-panel:before, .float-panel:after { z-index: -1; position: absolute; pointer-events: none; content: ''; left: 0; right: 0; top: 0; bottom: 0; border-radius: 64px; } .float-panel:before { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(255,255,255,0.3); margin: 1px; } @media (prefers-color-scheme: dark) { .float-panel:before { background: rgba(255,255,255,0.2); } } .float-panel:after { --blur-px: 16px; --blur-sat: 300%; backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px)); -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px)); mask: linear-gradient(#fff, 20%, transparent, 80%, #fff), linear-gradient(90deg, #fff, 20%, transparent, 80%, #fff); -webkit-mask-image: linear-gradient(#fff, 20%, transparent, 80%, #fff), linear-gradient(90deg, #fff, 20%, transparent, 80%, #fff); box-shadow: inset 0 0 4px 1px rgba(255,255,255,0.5); transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } @media (prefers-color-scheme: dark) { .float-panel:after { box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.2); } } .float-panel button { cursor: pointer; color: var(--text); background: none; width: 48px; height: 48px; line-height: 0; font-size: 28px; margin: 0; display: flex; } .float-panel button >* { width: auto; height: 28px; } .float-panel button >* path#sep { transition: transform 0.2s ease-out; -moz-transition: transform 0.2s ease-out; -webkit-transition: transform 0.2s ease-out; -o-transition: transform 0.2s ease-out; } .l_body[leftbar] .float-panel, .l_body[rightbar] .float-panel { box-shadow: 0 0 4px -1px var(--theme), 0 0 16px -4px var(--theme), 0 0 32px -12px var(--theme), 0 0 128px -32px var(--theme); } .l_body[leftbar] .float-panel:before, .l_body[rightbar] .float-panel:before { background: var(--bg-a50); } .l_body[leftbar] .float-panel button.leftbar-toggle { color: var(--theme); } .l_body[leftbar] .float-panel button.leftbar-toggle svg g { fill: currentColor; fill-opacity: 0.3; } .l_body[leftbar] .float-panel button.leftbar-toggle svg g path#sep { transform: translateX(2px); } .l_body .l_right:empty+.float-panel button.rightbar-toggle { display: none !important; } .l_body[rightbar] .float-panel button.rightbar-toggle { color: var(--theme); } .l_body[rightbar] .float-panel button.rightbar-toggle svg g { fill: currentColor; fill-opacity: 0.3; } .l_body[rightbar] .float-panel button.rightbar-toggle svg g path#sep { transform: translateX(2px); } code { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; font-family: Menlo, Monaco, Consolas, system-ui, monospace, sans-serif; } p>code:not([class]), li>code:not([class]) { font-size: 85%; background: var(--block); padding: 0.2em; border-radius: 4px; color: var(--text-code); } .md-text .highlight, pre:not([class]):has(>code) { --theme: var(--text-p3); margin: var(--gap-p) 0; border-radius: 16px; overflow: hidden; background: var(--block); line-height: 1.5; font-family: Menlo, Monaco, Consolas, system-ui, monospace, sans-serif; box-sizing: border-box; } @media screen and (min-width: 500px) { .md-text .highlight, pre:not([class]):has(>code) { min-width: 180px; } } .md-text .highlight { position: relative; overflow: auto; display: block; } .md-text .highlight figcaption { color: var(--text-p2); font-size: 0.8125rem; font-weight: 500; margin-left: 0.5rem; display: inline-block; } .md-text .highlight figcaption span { padding: 4px 0.5rem; display: block; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background: var(--block); } .md-text .highlight >table { overflow: auto; display: block; margin: 0 !important; background: transparent; border: none; } .md-text .highlight >table td, .md-text .highlight >table th { padding: 0; border: none; line-height: 1.5; } .md-text .highlight >table::-webkit-scrollbar { height: 4px; width: 4px; } .md-text .highlight >table::-webkit-scrollbar-track-piece, .md-text .highlight >table::-webkit-scrollbar-corner { background: transparent; } .md-text .highlight >table::-webkit-scrollbar-thumb { background: transparent; cursor: pointer; border-radius: 8px; } .md-text .highlight >table:hover::-webkit-scrollbar-thumb { background: var(--text-meta); } .md-text .highlight >table:hover::-webkit-scrollbar-thumb:hover { background: var(--text-p3); } .md-text .highlight >table tr { background: transparent; border: none; } .md-text .highlight >table tr:hover { background: transparent; } .md-text .highlight .gutter { pointer-events: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; text-align: right; padding: 0 1em; border-width: 0; margin-left: 0; left: 0; z-index: 1; } .md-text .highlight .gutter pre .line { color: var(--text-p4); } .md-text .highlight .code pre { display: block; padding: 0.5em 1rem; } .md-text .highlight .gutter+.code pre { padding-left: 0.25em; } .md-text .gist .gist-file { border: 1px solid var(--block-border); border-radius: 16px; overflow: hidden; } .md-text .gist .gist-data { --bgColor-default: var(--block); border-bottom: 1px solid var(--block-border); } .md-text .gist .highlight { display: inherit; border: none; border-radius: 0; background: var(--block); margin: 0; padding: 1em 0; } .md-text .gist .highlight pre { background: none; } .md-text .gist .blob-code-inner { color: var(--text-p1); font-family: Menlo, Monaco, Consolas, system-ui, monospace, sans-serif; } .md-text .gist .gist-meta { background: var(--block); } table:not([class]) { border-collapse: collapse; } .md-text pre >.caption { color: var(--text-p3); } .md-text pre >.hljs { padding: 1rem; border-radius: 16px; line-height: 1.5; box-sizing: border-box; } .md-text .highlight .code { vertical-align: top; } .md-text .highlight .code:before { position: absolute; top: 0; right: 0; padding: 4px 0.5rem; opacity: 0.25; font-weight: 700; color: var(--theme); } .md-text .highlight.yaml .code:before { content: "YAML"; } .md-text .highlight.json .code:before { content: "JSON"; } .md-text .highlight.diff .code:before { content: "diff"; } .md-text .highlight.html .code:before { content: "HTML"; } .md-text .highlight.js .code:before, .md-text .highlight.javascript .code:before { content: "JS"; } .md-text .highlight.css .code:before { content: "CSS"; } .md-text .highlight.less .code:before { content: "Less"; } .md-text .highlight.stylus .code:before { content: "Stylus"; } .md-text .highlight.bash .code:before { content: "bash"; } .md-text .highlight.shell .code:before { content: "shell"; } .md-text .highlight.sh .code:before { content: "sh"; } .md-text .highlight.ini .code:before { content: "ini"; } .md-text .highlight.c .code:before { content: "C"; } .md-text .highlight.cpp .code:before { content: "C++"; } .md-text .highlight.objc .code:before, .md-text .highlight.objectivec .code:before { content: "Objective-C"; } .md-text .highlight.swift .code:before { content: "Swift"; } .md-text .highlight.java .code:before { content: "Java"; } .md-text .highlight.python .code:before { content: "Python"; } .md-text .highlight.php .code:before { content: "PHP"; } .md-text .highlight.rust .code:before, .md-text .highlight.rs .code:before { content: "Rust"; } .md-text .highlight.sql .code:before { content: "SQL"; } .md-text .highlight.ruby .code:before { content: "Ruby"; } .md-text .highlight.makefile .code:before { content: "Makefile"; } .md-text .highlight.go .code:before { content: "Go"; } .md-text .highlight.typescript .code:before, .md-text .highlight.ts .code:before { content: "TS"; } .md-text .highlight.matlab .code:before { content: "MATLAB"; } .md-text .highlight.nginx .code:before { content: "Nginx"; } .code>pre .code:before { display: none; } .code>pre .line, .code>pre .params { color: var(--text-p1); } .code>pre .line .addition { color: #3fa33f; } .code>pre .line .deletion { color: #ee2b29; } .code>pre .marked { background-color: rgba(254,213,66,0.4); padding: 2px 8px 2px 0; border-radius: 2px; width: 100%; } .code>pre .title, .code>pre .attr, .code>pre .attribute { color: #3f51b5; } .code>pre .comment { color: var(--text-p4); font-style: italic; } .code>pre .keyword, .code>pre .meta-keyword, .code>pre .javascript .function { color: #8959a8; } .code>pre .type, .code>pre .built_in, .code>pre .tag .name { color: #2196f3; } .code>pre .variable, .code>pre .regexp, .code>pre .ruby .constant, .code>pre .xml .tag .title, .code>pre .xml .pi, .code>pre .xml .doctype, .code>pre .html .doctype, .code>pre .css .id, .code>pre .css .class, .code>pre .css .pseudo { color: #fd8607; } .code>pre .number, .code>pre .preprocessor, .code>pre .literal, .code>pre .constant { color: #fd8607; } .code>pre .class, .code>pre .ruby .class .title, .code>pre .css .rules .attribute { color: #ff9800; } .code>pre .string, .code>pre .meta-string { color: #449e48; } .code>pre .value, .code>pre .inheritance, .code>pre .header, .code>pre .ruby .symbol, .code>pre .xml .cdata { color: #4caf50; } .code>pre .css .hexcolor { color: #6cc; } .code>pre .function, .code>pre .python .decorator, .code>pre .python .title, .code>pre .ruby .function .title, .code>pre .ruby .title .keyword, .code>pre .perl .sub, .code>pre .javascript .title, .code>pre .coffeescript .title { color: #69c; } .highlight.html .line .tag .name, .highlight.css .line .tag .name, .highlight.less .line .tag .name, .highlight.stylus .line .tag .name, .highlight.html .line .selector-tag, .highlight.css .line .selector-tag, .highlight.less .line .selector-tag, .highlight.stylus .line .selector-tag { color: #ee2b29; } .highlight.html .line .selector-class, .highlight.css .line .selector-class, .highlight.less .line .selector-class, .highlight.stylus .line .selector-class, .highlight.html .line .selector-attr, .highlight.css .line .selector-attr, .highlight.less .line .selector-attr, .highlight.stylus .line .selector-attr { color: #fd8607; } .highlight.html .line .attribute, .highlight.css .line .attribute, .highlight.less .line .attribute, .highlight.stylus .line .attribute { color: #3f51b5; } .highlight.html .line .number, .highlight.css .line .number, .highlight.less .line .number, .highlight.stylus .line .number { color: #17afca; } .highlight.objc .line .meta, .highlight.objectivec .line .meta, .highlight.swift .line .meta, .highlight.c .line .meta { color: #8959a8; } .highlight.objc .line .class, .highlight.objectivec .line .class, .highlight.swift .line .class, .highlight.c .line .class { color: var(--text-p1); } .highlight.json .line .attr { color: #e24f5a; } .highlight.json .line .literal { color: #3f51b5; } .highlight.yaml .line .attr { color: #e24f5a; } * { outline: none; } html { height: 100%; width: 100%; overflow-y: scroll; font-family: system-ui, "Microsoft Yahei", "Segoe UI", Arial, sans-serif; font-size: 16px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; scroll-padding-top: 8px; scroll-behavior: smooth; } html::-webkit-scrollbar { height: 8px; width: 8px; } html::-webkit-scrollbar-track-piece { background: transparent; } html::-webkit-scrollbar-thumb { background: var(--text-meta); cursor: pointer; border-radius: 8px; } html::-webkit-scrollbar-thumb:hover { background: var(--text-p3); } body { background: var(--background); margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility; -webkit-tap-highlight-color: rgba(0,0,0,0); } div.lazy.img { width: 100%; height: 100%; background-position: center; background-size: cover; } input { background: none; border: none; } input.copy-area { display: block; font-family: Menlo, Monaco, Consolas, system-ui, monospace, sans-serif; font-size: 0.8125rem; font-weight: 700; color: var(--text-p3); } .flex { display: flex; align-items: center; } .flex.column { flex-direction: column; } svg.loading { display: block; position: absolute; color: var(--text-p3); z-index: -1; width: 100%; height: 2rem; margin: auto; animation: spin infinite 2s; animation-timing-function: linear; } @-moz-keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .loading-wrap { margin: 0; text-align: center; align-content: center; background: var(--block); border-radius: 16px; position: relative; padding: 2rem; } .loading-wrap svg { margin: 4px; } .loading-wrap:after { content: '正在加载'; color: var(--text-p1); display: block; font-size: 14px; } .loading-wrap.error:after { content: '加载失败，请稍后重试。'; } audio, video { max-width: 100%; } video { z-index: 1; } pre:not([class]):has(>code) { display: block; padding: 1rem; overflow: auto; } pre:not([class]):has(>code)::-webkit-scrollbar { height: 0; width: 0; } pre:not([class]):has(>code)::-webkit-scrollbar-track-piece { background: transparent; } pre:not([class]):has(>code)::-webkit-scrollbar-thumb { background: var(--text-meta); cursor: pointer; border-radius: 0; } pre:not([class]):has(>code)::-webkit-scrollbar-thumb:hover { background: var(--text-p3); } pre:not([class]):has(>code) code { padding: 0; } span.dot, span.sep { font-size: 0.9em; margin: 0 0.25em; } span.dot:before { content: '·'; font-weight: 900; } span.sep:before { content: '/'; padding-left: 2px; padding-right: 2px; } svg.icon { width: 1em; height: 1em; vertical-align: middle; fill: currentColor; overflow: hidden; } svg.active-icon { color: var(--theme); } h1, .h1 { font-size: var(--fsh2); font-weight: 700; } @media screen and (max-width: 500px) { h1, .h1 { font-size: var(--fsh2); } } h2, .h2 { font-size: var(--fsh2); margin-top: 1.5em; } h3, .h3 { font-size: var(--fsh3); } h4, .h4 { font-size: var(--fsh4); } h5 { font-size: calc(var(--fsp) + 1px); } h6 { font-size: calc(var(--fsp) + 0px); } .fs15 { --fsp: 0.9375rem; font-size: var(--fsp); } .fs14 { --fsp: 0.875rem; font-size: var(--fsp); } .footnote { --fsp: 0.8125rem; font-size: var(--fsp); } .widgets .post-title { margin: 0.75rem 0; line-height: 1.2; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .widgets .post-title .cap { margin-bottom: 2px; opacity: 0.5; } .widgets .post-title a { color: inherit; font-weight: 500; } .widgets .post-title a:hover { color: var(--accent); } div.toast { max-width: 60%; padding: 1rem 2rem; line-height: 1.5; color: var(--text-p1); font-weight: 500; text-align: center; border-radius: 8px; background: var(--card); position: fixed; left: 50%; top: 32px; transform: translateX(-50%); z-index: 9; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; box-shadow: 0 4px 8px 0px rgba(0,0,0,0.1), 0 12px 16px -4px rgba(0,0,0,0.2); visibility: hidden; } div.toast.show { visibility: visible; -webkit-animation: fadein 0.5s, fadeout 0.5s 2s; animation: fadein 0.5s, fadeout 0.5s 2s; animation-fill-mode: forwards; } @-webkit-keyframes fadein { from { top: -64px; opacity: 0; } to { top: 32px; opacity: 1; } } @-webkit-keyframes fadeout { from { top: 32px; opacity: 1; } to { top: -64px; opacity: 0; } } @-moz-keyframes fadein { from { top: -64px; opacity: 0; } to { top: 32px; opacity: 1; } } @-webkit-keyframes fadein { from { top: -64px; opacity: 0; } to { top: 32px; opacity: 1; } } @-o-keyframes fadein { from { top: -64px; opacity: 0; } to { top: 32px; opacity: 1; } } @keyframes fadein { from { top: -64px; opacity: 0; } to { top: 32px; opacity: 1; } } @-moz-keyframes fadeout { from { top: 32px; opacity: 1; } to { top: -64px; opacity: 0; } } @-webkit-keyframes fadeout { from { top: 32px; opacity: 1; } to { top: -64px; opacity: 0; } } @-o-keyframes fadeout { from { top: 32px; opacity: 1; } to { top: -64px; opacity: 0; } } @keyframes fadeout { from { top: 32px; opacity: 1; } to { top: -64px; opacity: 0; } } .article.banner { --text-banner: var(--text); background: var(--block); margin: 0; height: unset; } .article.banner .bg+.content { min-height: 200px; aspect-ratio: 2.5; --text-banner: #fff; --button-hover-bg: rgba(255,255,255,0.25); } .article.banner .content .top { align-items: flex-start; margin: 1rem calc(1rem - 4px); } .article.banner .content .title { font-size: calc(17px + 9px); color: var(--text-banner); } .article.banner .content h1 { line-height: 1.2; margin: 0.25rem 0; } .l_body .article.banner .content .bottom.only-title .title { padding: 0.75rem 0; } .article.banner .bg+.content { --blur-bg: rgba(0,0,0,0); --blur-px: 1em; --blur-sat: 100%; --blur-height-top: 6rem; --blur-height-bottom: 7rem; --blur-opacity: 0; background: var(--blur-bg); transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .article.banner .bg+.content:hover { --blur-bg: rgba(0,0,0,0.1); --blur-sat: 150%; --blur-height-top: 6rem; --blur-height-bottom: 7rem; --blur-opacity: 1; } .article.banner .bg+.content:before, .article.banner .bg+.content:after { content: ''; position: absolute; z-index: 0; left: 0; right: 0; backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px)); -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px)); transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; opacity: var(--blur-opacity); } .article.banner .bg+.content:before { top: 0; height: var(--blur-height-top); mask: linear-gradient(#000, rgba(0,0,0,0.75), transparent); -webkit-mask: linear-gradient(#000, rgba(0,0,0,0.75), transparent); } .article.banner .bg+.content:after { bottom: 0; height: var(--blur-height-bottom); mask: linear-gradient(transparent, rgba(0,0,0,0.75), #000); -webkit-mask: linear-gradient(transparent, rgba(0,0,0,0.75), #000); } .article.banner .bg+.content .top, .article.banner .bg+.content .bottom { z-index: 1; } .article.banner { --button-hover-bg: rgba(0,0,0,0.05); } :root[data-theme="dark"] .article.banner { --button-hover-bg: rgba(255,255,255,0.15); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .article.banner { --button-hover-bg: rgba(255,255,255,0.15); } } .article-footer { margin: 2rem 1rem 1rem; padding: 1rem; background: var(--block); border-radius: 24px; border: 1px solid var(--block-border); font-size: 0.9375rem; line-height: 1.6; color: var(--text-p1); } .article-footer:empty { display: none; } .article-footer .header { font-weight: 500; font-size: calc(17px + 2px); } .article-footer .body { --fsp: calc(17px - 2px); } .article-footer .body >.link { margin: 0; height: 0; opacity: 0; } .article-footer .body p { color: var(--text-p2); margin: 0.5rem 0; } .article-footer .body p a { font-weight: unset; } .article-footer .body ul { margin: 0; overflow: hidden; padding-left: 1rem; } .article-footer .body ul li { font-size: var(--fsp); } .article-footer .body .post-title { margin: 0; line-height: 1.2; word-break: break-all; } .article-footer .body .post-title p { --fsp: calc(17px - 2px); } .article-footer section+section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--block-border); } .article-footer #contributors .header { display: flex; justify-content: space-between; } .article-footer #contributors .header a.edit { font-size: 0.875rem; display: flex; align-items: center; color: inherit; background: var(--block); padding: 0 0.5rem; border-radius: 8px; transition: background 0.2s ease-out; -moz-transition: background 0.2s ease-out; -webkit-transition: background 0.2s ease-out; -o-transition: background 0.2s ease-out; } .article-footer #contributors .header a.edit svg { width: 1.2em; height: 1.2em; margin-right: 4px; color: var(--text-p4); transition: color 0.2s ease-out; -moz-transition: color 0.2s ease-out; -webkit-transition: color 0.2s ease-out; -o-transition: color 0.2s ease-out; } .article-footer #contributors .header a.edit span { line-height: 1.5; transition: color 0.2s ease-out; -moz-transition: color 0.2s ease-out; -webkit-transition: color 0.2s ease-out; -o-transition: color 0.2s ease-out; } .article-footer #contributors .header a.edit:hover { color: var(--theme); background: var(--theme-a20); } .article-footer #contributors .header a.edit:hover svg { color: var(--theme); } .article-footer #contributors .body .loading-wrap { margin-top: 4px; padding: 0; height: 84px; } .article-footer #contributors .body .users-wrap .grid-box { margin-top: 4px; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); grid-gap: 4px; } .article-footer #contributors .body .users-wrap .grid-box:empty { display: none; } .article-footer #contributors .body .users-wrap .user-card .card-link { background: var(--block); transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .article-footer #contributors .body .users-wrap .user-card .card-link:hover { background: var(--theme-a20); color: var(--theme); } .article-footer #contributors .body .users-wrap .user-card .card-link img { width: 32px; height: 32px; } .article-footer .social-wrap { grid-gap: 0.5rem 2rem; margin: 1rem 0 0.5rem; grid-template-columns: repeat(auto-fill, 20px); } .article-footer .social-wrap a.social { background: none; border-radius: 4px; padding: 0; } .article-footer .qrcode { width: 128px; padding: 4px; background: #fff; border-radius: 4px; box-shadow: 0 4px 8px 0px rgba(0,0,0,0.1), 0 0 32px 0px rgba(0,0,0,0.1); overflow: hidden; transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; height: 0; margin: 0 auto; transform: scale(0.01); } .article-footer .qrcode img { object-fit: contain; } .article-footer .qrcode.display { margin: 2rem auto 1rem; height: 128px !important; opacity: 1 !important; transform: scale(1); } .bread-nav { font-weight: 500; display: flex; justify-content: space-between; color: var(--text-banner); } .bread-nav .flex-row { display: flex; align-items: baseline; flex-direction: row; } .bread-nav a { color: var(--text-banner); padding: 4px; border-radius: 2px; } .bread-nav a:hover { background: var(--button-hover-bg); } .bread-nav span { color: var(--text-banner); } .bread-nav span.sep { opacity: 0.5; margin: 0; } .bread-nav span.text { padding: 4px; } .bread-nav div#post-meta span.sep:before { content: '|'; } .bread-nav div#post-meta span.updated { visibility: hidden; } .bread-nav:hover div#post-meta span.updated { visibility: visible; } .bread-nav .ghrepo { font-size: 0.8125rem; display: flex; flex-direction: column; align-items: flex-start; border-left: 1px solid var(--text-meta); padding-left: 8px; } .bread-nav .ghrepo a { display: flex; align-items: center; color: var(--text-banner); } .bread-nav .ghrepo a svg { margin-right: 4px; } .bread-nav .ghrepo a.bold { font-weight: 600; color: var(--text-banner); } .bread-nav .ghrepo a span { margin-left: 4px; } .bread-nav .ghrepo a:hover { opacity: 1; } .l_cover { height: 100vh; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .l_cover.post { height: inherit; } .l_cover .cover-wrap { margin-bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: var(--fsp); } .l_cover .cover-wrap .cover-title { font-weight: 700; font-size: 1.5rem; margin: 1rem 0; line-height: 1.2; color: var(--text); } .l_cover .cover-wrap .description { margin: 1rem 0; } .l_cover .cover-wrap .start-wrap { margin: 2rem 0; flex-shrink: 0; } .l_cover .cover-wrap .start-wrap a.start { display: inline-block; } .l_cover.post .cover { z-index: -1; width: 100%; height: 30vh; max-width: 2048px; min-height: 150px; max-height: 400px; } @media screen and (max-width: 768px) { .l_cover.post .cover { height: 25vh; } } @media screen and (max-width: 500px) { .l_cover.post .cover { height: 20vh; } } @media screen and (min-width: 2048px) { .l_cover.post .cover { margin-top: 4rem; } .l_cover.post .cover .img { border-radius: 2rem; } } .l_cover.wiki .cover-wrap { max-width: 500px; } .l_cover.wiki .cover-wrap .preview { margin-bottom: 2rem; } .l_cover.wiki .cover-wrap .preview img { object-fit: contain; min-width: 96px; min-height: 96px; max-height: 35vh; max-width: 100%; } @media screen and (max-width: 500px) { .l_cover.wiki .cover-wrap .preview img { max-width: 60%; } } .l_cover.wiki .cover-wrap .cover-title:first-child { font-size: 3rem; } .page-footer { margin: 4rem 1rem 3rem; color: var(--text-p2); } .page-footer a { color: var(--text-p2); border-radius: 4px; transition: background 0.2s ease-out; } .page-footer a:hover { color: var(--text); background: var(--block-border); } .page-footer .sitemap { margin: 0.5rem -4px; grid-gap: 1rem 1rem; column-count: 4; } .page-footer .sitemap::-webkit-scrollbar { height: 0; width: 0; } .page-footer .sitemap::-webkit-scrollbar-track-piece { background: transparent; } .page-footer .sitemap::-webkit-scrollbar-thumb { background: var(--text-meta); cursor: pointer; border-radius: 0; } .page-footer .sitemap::-webkit-scrollbar-thumb:hover { background: var(--text-p3); } .page-footer .sitemap .sitemap-group { break-inside: avoid; display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 1rem; } .page-footer .sitemap .sitemap-group >span, .page-footer .sitemap .sitemap-group >a { text-decoration: none; padding: 4px; } .page-footer .sitemap .sitemap-group >span { font-weight: 500; color: var(--text-p1); margin: 4px 0; } .page-footer .text { margin-top: 0.5rem; } .page-footer .text p { margin: 4px 0; line-height: 1.5; } .page-footer .text a:not([class]) { font-weight: 500; } .navbar { z-index: 8; top: calc(var(--gap-margin) * 2); position: sticky; position: -webkit-sticky; } .navbar-blur { margin: 0 1rem; border-radius: 64px; position: relative; box-shadow: 0 0 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04); transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; text-shadow: 0 0 4px #fff, 0 0 8px rgba(255,255,255,0.8), 0 0 16px rgba(255,255,255,0.6); } @media (prefers-color-scheme: dark) { .navbar-blur { text-shadow: 0 0 2px rgba(0,0,0,0.2), 0 0 4px rgba(0,0,0,0.4); } } .navbar-blur nav a:not(.active, .navbar-blur :hover) { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 4px #fff); } @media (prefers-color-scheme: dark) { .navbar-blur nav a:not(.active, .navbar-blur :hover) { filter: none; } } .navbar-blur:before, .navbar-blur:after { z-index: -1; position: absolute; pointer-events: none; content: ''; left: 0; right: 0; top: 0; bottom: 0; border-radius: 64px; } .navbar-blur:before { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(255,255,255,0.3); margin: 1px; } @media (prefers-color-scheme: dark) { .navbar-blur:before { background: rgba(255,255,255,0.2); } } .navbar-blur:after { --blur-px: 16px; --blur-sat: 300%; backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px)); -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px)); mask: linear-gradient(#fff, 20%, transparent, 80%, #fff), linear-gradient(90deg, #fff, 20%, transparent, 80%, #fff); -webkit-mask-image: linear-gradient(#fff, 20%, transparent, 80%, #fff), linear-gradient(90deg, #fff, 20%, transparent, 80%, #fff); box-shadow: inset 0 0 4px 1px rgba(255,255,255,0.5); transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } @media (prefers-color-scheme: dark) { .navbar-blur:after { box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.2); } } .navbar-container { max-width: 100%; margin: 1px; border-radius: 64px; overflow: scroll visible; } .navbar-container::-webkit-scrollbar { height: 0; width: 0; } .navbar-container::-webkit-scrollbar-track-piece { background: transparent; } .navbar-container::-webkit-scrollbar-thumb { background: var(--text-meta); cursor: pointer; border-radius: 0; } .navbar-container::-webkit-scrollbar-thumb:hover { background: var(--text-p3); } .navbar nav { display: inline-flex; font-size: 0.875rem; z-index: 1; } .navbar nav >p { margin: 0; } .navbar nav a { padding: 0.25rem 0.75rem; margin: 0.25rem; line-height: 2; color: var(--text-p1); border-radius: 32px; font-weight: 500; white-space: nowrap; position: relative; z-index: 1; transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .navbar nav a:hover { background: var(--bg-a50); } .navbar nav a.active, .navbar nav a:hover { color: var(--text); } .navbar nav a.active { background: var(--bg-a60); box-shadow: 0 0 1px rgba(0,0,0,0.04), 0 0 2px rgba(0,0,0,0.04), 0 0 4px rgba(0,0,0,0.08); cursor: default; pointer-events: none; backdrop-filter: saturate(300%); -webkit-backdrop-filter: saturate(300%); } @media (prefers-color-scheme: dark) { .navbar nav a.active { background: rgba(255,255,255,0.25); } } .navbar nav a.active:after { content: ''; } .navbar nav a+a { margin-left: 4px; } @media screen and (max-width: 450px) { .navbar.top { top: 36px; } } .paginator-wrap { margin: 1rem; display: flex; justify-content: space-between; align-items: center; font-size: 1rem; font-weight: 700; background: var(--card); border-radius: 24px; overflow: hidden; box-shadow: 0 2px 8px 0px rgba(0,0,0,0.03); color: var(--text-p3); } .paginator-wrap .page-number { padding: 4px 8px; border-radius: 8px; margin: 2px; } .paginator-wrap a.page-number { color: var(--text-p3); } .paginator-wrap a.page-number:hover { color: var(--text-p1); background: var(--block); } .paginator-wrap .extend { text-align: center; background-size: contain; width: 1rem; height: 1rem; background-origin: content-box; background-clip: content-box; } .paginator-wrap .extend.next { border-left: 1px dashed var(--block-border); background-image: url("https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/arrow/064b95430caf4.svg"); } .paginator-wrap .extend.prev { border-right: 1px dashed var(--block-border); background-image: url("https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/arrow/f049bbd4e88ec.svg"); } .paginator-wrap .current { font-family: Menlo, Monaco, Consolas, system-ui, monospace, sans-serif; background: var(--block); } .paginator-wrap .extend { padding: 1rem; line-height: 0; filter: grayscale(100%); } .paginator-wrap .extend img { height: 1rem; } .paginator-wrap .extend.disable { pointer-events: none; } .paginator-wrap span.extend { opacity: 0.25; } .paginator-wrap a.extend:hover { filter: unset; } .related-wrap { padding: 0 1rem; margin: 4rem 0; } .related-wrap:empty { display: none; } .related-wrap section.header { display: flex; justify-content: space-between; align-items: center; } .related-wrap section.header >span.title { padding: 0.25rem 0; } .related-wrap section.footer { margin-top: 1rem; } .related-wrap a.more { padding: 0.25rem 0.5rem; border-radius: 8px; color: var(--text-p1); } article.md-text.content+.related-wrap { margin-top: 0; } .related-posts { max-width: 100%; margin: 1rem 0; } .related-posts .item { line-height: 1.2; display: block; border-left: 0; margin-top: 1rem; } .related-posts .item .title { color: var(--text-p1); font-weight: 500; --fsp: calc(17px - 1px); font-size: var(--fsp); transition: color 0.2s ease-out, border 0.2s ease-out; -moz-transition: color 0.2s ease-out, border 0.2s ease-out; -webkit-transition: color 0.2s ease-out, border 0.2s ease-out; -o-transition: color 0.2s ease-out, border 0.2s ease-out; position: relative; padding-bottom: 2px; border-bottom: 1px dashed var(--text-meta); line-height: 1.6; } .related-posts .item .excerpt { color: var(--text-p3); --fsp: calc(17px - 3px); font-size: var(--fsp); margin-top: 0.5rem; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; } .related-posts .item.active .title { border-bottom: 1px dashed var(--theme); } .related-posts .item:hover .title { color: var(--accent); border-bottom: 1px solid var(--accent); } .related-wrap#read-next .body { display: grid; grid-gap: 16px; grid-template-columns: repeat(auto-fill, calc((100% - 1 * 16px) / 2)); } .related-wrap#read-next .body .item { border-top: 1px dashed var(--block-border); border-bottom: 1px dashed var(--block-border); padding: 1rem 0; } .related-wrap#read-next .body .note { margin-bottom: 0.75rem; font-size: 0.8125rem; color: var(--text-p4); font-weight: 500; } .related-wrap#read-next .body a { margin: 0; line-height: 1.2; color: var(--text-p1); font-size: calc(17px + 2px); } .related-wrap#read-next .body a:hover { color: var(--accent) !important; } .related-wrap#read-next .body #next { text-align: right; } .wiki+.related-wrap#read-next .item a { font-size: calc(17px + 7px); } .wiki+.related-wrap#read-next .item#prev a { color: var(--text-p3); } .related-wrap#comments { padding: 0 1rem; } .related-wrap#comments .cmt-title p { margin: 0; font-size: inherit; } .related-wrap#comments .cmt-title p a { --link: var(--theme); --link-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); } .related-wrap#comments .cmt-body { min-height: 150px; position: relative; } .related-wrap#comments .cmt-body svg.loading { top: 60px; } .related-wrap#comments .cmt-body iframe { border-radius: 4px; border: none; width: 100%; } .tag-plugin.about { background: var(--block); border-radius: 16px; padding: 2rem; position: relative; } .tag-plugin.about .nav-back { display: none; position: absolute; line-height: 1; overflow: hidden; left: 0.75rem; top: 0.75rem; align-items: center; } @media screen and (max-width: 667px) { .tag-plugin.about .nav-back { display: flex; } } .tag-plugin.about .nav-back svg { width: 1rem; height: 1rem; } .tag-plugin.about .about-header { display: flex; justify-content: center; flex-wrap: wrap; margin: 1.5rem 0; } .tag-plugin.about .about-header img { object-fit: contain; } .tag-plugin.about .about-header >img { margin: auto 0; } .tag-plugin.about .about-header >p { font-size: 0.75rem; font-weight: 500; color: var(--text-p3); padding-top: 0.75rem; } .tag-plugin.about .about-header >p strong:first-child { font-size: 3rem; font-weight: 700; color: var(--text-p1); margin-right: 0.75rem; } .tag-plugin.about .about-header .avatar { display: inline-flex; margin: 0 1rem; } .tag-plugin.about .about-body >p { line-height: 1.5; } .tag-plugin.about .about-body >p:first-child { margin-top: 2.5rem; } .tag-plugin.about .about-body p+.tag-plugin.navbar .cap { margin-top: 1rem; } .tag-plugin.about .about-header+.about-body { margin-top: 2rem; } @media screen and (max-width: 500px) { .tag-plugin.about { padding: 2rem 1rem; } .tag-plugin.about .about-header p { width: 100%; } } .banner { border-radius: 16px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; height: 220px; } .banner.top { border-radius: 24px; } @media screen and (max-width: 667px) { .banner { height: 180px; } } .banner .bg { z-index: 0; } .banner .content { z-index: 1; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .banner .content .top { display: flex; justify-content: space-between; align-items: center; line-height: 1; margin: 1rem; } .banner .content .top .tag-plugin.navbar { margin: 0; border-radius: 6px; padding: 2px; background: rgba(0,0,0,0.2); overflow: hidden; } .banner .content .top .tag-plugin.navbar:after { content: none; } .banner .content .top .tag-plugin.navbar .link { margin: 0; border-radius: 4px; color: rgba(255,255,255,0.8); padding: 2px 6px; background: none; line-height: 1.5; font-size: 0.9375rem; text-shadow: 0 0 1px rgba(0,0,0,0.12); } .banner .content .top .tag-plugin.navbar .link+.link { margin-left: 2px; } .banner .content .top .tag-plugin.navbar .link:after { content: none; } .banner .content .top .tag-plugin.navbar .link:hover { color: #fff; background: rgba(255,255,255,0.25); } .banner .content .top .tag-plugin.navbar .link.active { color: #fff; background: rgba(255,255,255,0.25); } .banner .content .top .back { background: none; padding: 0; line-height: 0; visibility: hidden; } @media screen and (max-width: 667px) { .banner .content .top .back { visibility: visible; } } .banner .content .top .back svg { width: 20px; height: 20px; fill: #fff; } .banner .banner-link { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; z-index: 2; } .banner img { object-fit: cover; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; margin: 0; height: 100%; width: 100%; } .banner img.bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .banner img.avatar { border-radius: 50%; width: 48px; height: 48px; } .banner .bottom { display: flex; padding: 1rem; width: 100%; box-sizing: border-box; } .banner .title { font-size: 1.5rem; font-weight: 600; } .banner .avatar+.text-area { margin-left: 0.75rem; } .banner .text-area .text { line-height: 1.2; margin-top: 0.25rem; margin-bottom: 0.25rem; } .banner .avatar+.text-area .title { font-size: 1.2rem; } .banner .subtitle { font-size: 0.875rem; } .banner .content:only-child { color: var(--text-p1); } .banner .bg+.content { color: #fff; } .banner .bg+.content .avatar { border: 2px solid #fff; margin: 0; } .banner .bg+.content .bottom { background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)); text-shadow: 0 0 1px rgba(0,0,0,0.12); } .tag-plugin.banner { transition: transform 2s ease-out; -moz-transition: transform 2s ease-out; -webkit-transition: transform 2s ease-out; -o-transition: transform 2s ease-out; } .tag-plugin.banner:hover img.bg { transform: scale(1.01); } .tag-plugin.banner .navbar a.active { background-color: var(--blur-bg); } @supports ((-webkit-backdrop-filter: blur(var(--blur-px))) or (backdrop-filter: blur(var(--blur-px)))) { .tag-plugin.banner .navbar a.active { background-color: var(--blur-bg) !important; backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px)); -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px)); } } .tag-plugin.banner .navbar a.active:hover { background-color: var(--card); } @media screen and (max-width: 667px) { .banner.top { border-radius: 0; } } a.tag-plugin.button { background: var(--theme); color: var(--bg-a100); display: inline-flex; align-items: baseline; justify-content: center; padding: 0 0.5rem; transition: background 0.2s ease-out; -moz-transition: background 0.2s ease-out; -webkit-transition: background 0.2s ease-out; -o-transition: background 0.2s ease-out; margin: 0.5em 0; font-size: 1em; line-height: 1.5; } a.tag-plugin.button svg, a.tag-plugin.button img { height: 1.2em; width: auto; margin: 0 -0.25em 0 0.5em; flex-shrink: 0; align-self: center; } a.tag-plugin.button span { text-indent: 0; margin: 0.5em; } a.tag-plugin.button[size='xs'] { margin: 0; border-radius: 4px; padding: 0 4px; } a.tag-plugin.button[size='xs'] svg, a.tag-plugin.button[size='xs'] img, a.tag-plugin.button[size='xs'] span { margin: 0 2px; } a.tag-plugin.button:hover { --theme: var(--accent); } .tag-plugin.grid a.tag-plugin.button { width: 100%; box-sizing: border-box; } :root[data-theme="light"] { --chat-bg: #f1f2f5; --chat-block: #fff; --chat-border: #f2f2f2; --chat-qq-right-bg: #09f; --chat-qq-right-text: #fff; --chat-wechat-news-num: #d8dadf; --chat-video-button: rgba(255,255,255,0.902); --chat-wechat-right-bg: #91ed61; --chat-quote-blink-color: rgba(24,92,109,0.102); --chat-wechat-quote-color: #808080; --chat-wechat-quote-bg: rgba(128,128,128,0.102); } :root[data-theme="dark"] { --chat-bg: #1f2224; --chat-block: #25282a; --chat-border: #303437; --chat-qq-right-bg: rgba(0,153,255,0.502); --chat-qq-right-text: rgba(255,255,255,0.6); --chat-wechat-news-num: #25282a; --chat-video-button: rgba(37,40,42,0.851); --chat-wechat-right-bg: #305034; --chat-quote-blink-color: rgba(24,92,109,0.149); --chat-wechat-quote-color: #858585; --chat-wechat-quote-bg: rgba(133,133,133,0.102); } :root:not([data-theme]) { --chat-bg: #f1f2f5; --chat-block: #fff; --chat-border: #f2f2f2; --chat-qq-right-bg: #09f; --chat-qq-right-text: #fff; --chat-wechat-news-num: #d8dadf; --chat-video-button: rgba(255,255,255,0.902); --chat-wechat-right-bg: #91ed61; --chat-quote-blink-color: rgba(24,92,109,0.102); --chat-wechat-quote-color: #808080; --chat-wechat-quote-bg: rgba(128,128,128,0.102); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --chat-bg: #1f2224; --chat-block: #25282a; --chat-border: #303437; --chat-qq-right-bg: rgba(0,153,255,0.502); --chat-qq-right-text: rgba(255,255,255,0.6); --chat-wechat-news-num: #25282a; --chat-video-button: rgba(37,40,42,0.851); --chat-wechat-right-bg: #305034; --chat-quote-blink-color: rgba(24,92,109,0.149); --chat-wechat-quote-color: #858585; --chat-wechat-quote-bg: rgba(133,133,133,0.102); } } .md-text .tag-plugin.chat { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 375px; margin: 1rem auto; border-radius: 8px; background: var(--chat-block); box-shadow: rgba(0,0,0,0.16) 0px 1px 4px; display: flex; flex-direction: column; height: 658px; width: 329px; overflow: hidden; } .md-text .tag-plugin.chat .fs12 { font-size: 0.75rem; } .md-text .tag-plugin.chat .cap { color: var(--text-p3); } .md-text .tag-plugin.chat * { word-break: break-all; } .md-text .tag-plugin.chat.iphone11 { width: 329px; height: 658px; border-radius: 3em; padding: 1em; position: relative; box-shadow: unset; } .md-text .tag-plugin.chat.iphone11 >.device-image { background-image: url("https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.4/frame/iphone11.svg"); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; } .md-text .tag-plugin.chat.iphone11 >.status-bar { display: flex; margin: 0.5em 0.7em; justify-content: space-between; } .md-text .tag-plugin.chat.iphone11 >.status-bar >.left-items { font-size: 0.75rem; width: 5em; display: flex; justify-content: center; } .md-text .tag-plugin.chat.iphone11 >.status-bar >.right-items { display: flex; flex-direction: row; align-items: center; } .md-text .tag-plugin.chat.iphone11 >.status-bar >.right-items >svg.icon { width: 1.3em; height: 1.3em; } .md-text .tag-plugin.chat.iphone11 >.status-bar >.right-items >svg.icon.earphone, .md-text .tag-plugin.chat.iphone11 >.status-bar >.right-items >svg.icon.bluetooth { display: none; } .md-text .tag-plugin.chat.iphone11 >.status-bar >.right-items >svg.icon >path { fill: var(--text-p1); } .md-text .tag-plugin.chat.iphone11 >.chat-navbar, .md-text .tag-plugin.chat.iphone11 >.content { margin: 0 0.4em; } .md-text .tag-plugin.chat.iphone11 >.bottom { margin: 0 0.4em; padding-bottom: 0.75em; } .md-text .tag-plugin.chat >.chat-navbar { display: flex; padding: 0.3rem 0; justify-content: space-between; z-index: 4; } .md-text .tag-plugin.chat >.chat-navbar .left-items { display: flex; align-items: center; } .md-text .tag-plugin.chat >.chat-navbar .left-items .back-btn { margin-left: 0.2em; } .md-text .tag-plugin.chat >.chat-navbar .left-items .back-btn .icon.back { width: 1.3em; height: 1.3em; } .md-text .tag-plugin.chat >.chat-navbar .left-items .news-num { background: var(--chat-bg); border-radius: 8px; font-size: 0.75em; padding: 0px 4px; margin-right: 8px; color: var(--text-p2); } .md-text .tag-plugin.chat >.chat-navbar .right-items>.more-btn { height: 100%; margin-right: 0.5em; } .md-text .tag-plugin.chat >.chat-navbar .left-items>.back-btn, .md-text .tag-plugin.chat >.chat-navbar .right-items>.more-btn { display: flex; align-items: center; } .md-text .tag-plugin.chat >.chat-navbar .left-items>.back-btn >svg>path, .md-text .tag-plugin.chat >.chat-navbar .right-items>.more-btn >svg>path { fill: var(--text-p1); } .md-text .tag-plugin.chat >.content { background: var(--chat-bg); overflow: auto; position: relative; flex: 1; z-index: 3; } .md-text .tag-plugin.chat >.content::-webkit-scrollbar { height: 4px; width: 4px; } .md-text .tag-plugin.chat >.content::-webkit-scrollbar-track-piece, .md-text .tag-plugin.chat >.content::-webkit-scrollbar-corner { background: transparent; } .md-text .tag-plugin.chat >.content::-webkit-scrollbar-thumb { background: transparent; cursor: pointer; border-radius: 8px; } .md-text .tag-plugin.chat >.content:hover::-webkit-scrollbar-thumb { background: var(--text-meta); } .md-text .tag-plugin.chat >.content:hover::-webkit-scrollbar-thumb:hover { background: var(--text-p3); } .md-text .tag-plugin.chat >.bottom { z-index: 1; padding-bottom: 0.5em; background: var(--chat-bg); box-shadow: rgba(0,0,0,0.06) 0px 1px 1px 0px inset; } .md-text .tag-plugin.chat >.bottom .input { display: flex; align-items: center; justify-content: space-between; margin: 0 0.5em; margin-top: 0.5em; height: 32px; } .md-text .tag-plugin.chat >.bottom .input .input-text { background: var(--chat-block); border-radius: 6px; width: calc(100% - 40px - 0.5em); height: 100%; } .md-text .tag-plugin.chat >.bottom .input .submit-btn { padding: 3px 6px; background: var(--theme-a30); border-radius: 6px; font-size: 0.875rem; color: var(--theme); } .md-text .tag-plugin.chat >.bottom .icons { margin: 0 0.5em; display: flex; justify-content: space-between; margin-top: 0.5em; } .md-text .tag-plugin.chat >.bottom .icons >svg.icon { width: 1.5em; height: 1.5em; } .md-text .tag-plugin.chat >.bottom .icons >svg.icon.voice { width: 1.3em !important; height: 1.3em !important; } .md-text .tag-plugin.chat >.bottom .icons >svg.icon path { fill: var(--text-p2); } .md-text .tag-plugin.chat >.content >div:first-child { margin-top: 0.5em; } .md-text .tag-plugin.chat >.content >div:last-child { margin-bottom: 0.5em; } .md-text .tag-plugin.chat >.content .chattip { font-size: 0.75rem; color: var(--text-p3); margin: auto; width: fit-content; padding: 0.5em; } .md-text .tag-plugin.chat >.content .chatcell { padding: 0.5em; } .md-text .tag-plugin.chat >.content .chatcell img { border-radius: 6px; } .md-text .tag-plugin.chat >.content .chatcell .user-avatar { float: left; } .md-text .tag-plugin.chat >.content .chatcell .user-avatar img { width: 32px; height: 32px; border-radius: 50%; } .md-text .tag-plugin.chat >.content .chatcell .user-main { padding: 0 0.5em; display: flex; flex-flow: column; } .md-text .tag-plugin.chat >.content .chatcell .user-main .header { line-height: 1.5; font-size: 13px; margin-bottom: 0.3em; overflow: hidden; position: relative; display: flex; flex-wrap: wrap; align-items: center; } .md-text .tag-plugin.chat >.content .chatcell .user-main .header .label { padding: 0 4px; color: var(--theme); background: var(--theme-a30); border-radius: 3px; margin-right: 4px; font-size: calc(0.75rem - .1rem); font-weight: 600; } .md-text .tag-plugin.chat >.content .chatcell .user-main .header .name { color: var(--text-p3); font-size: 0.75rem; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk { width: fit-content; max-width: calc(100% - 32px); background: var(--chat-block); padding: calc((32px - 1.3 * 0.875rem) / 2) .5em; border-radius: 6px; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk p { font-size: 0.875rem; line-height: 1.3; margin: 0; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk >.error-img-to-show { min-width: 100px; min-height: 100px; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk >.quote { color: var(--text-p3); background: var(--text-a20); padding: 0.3rem; border-radius: 6px; cursor: pointer; margin-bottom: 0.3em; transition: color 0.5s ease-out, background 0.5s ease-out; -moz-transition: color 0.5s ease-out, background 0.5s ease-out; -webkit-transition: color 0.5s ease-out, background 0.5s ease-out; -o-transition: color 0.5s ease-out, background 0.5s ease-out; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk >.quote:hover { color: var(--theme); background: var(--theme-a30); } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk >.quote:hover .quote-user>svg>path { fill: var(--theme); } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk >.quote .quote-user { display: flex; justify-content: space-between; align-items: center; column-gap: 1em; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk >.quote .quote-user >span { font-size: 0.75rem; height: 16px; line-height: 16px; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk >.quote .quote-user >svg { width: 0.75em; height: 0.75em; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk >.quote .quote-user >svg path { fill: var(--text-p3); transition: color 0.2s ease-out, 0.5s 0.2s ease-out; -moz-transition: color 0.2s ease-out, 0.5s 0.2s ease-out; -webkit-transition: color 0.2s ease-out, 0.5s 0.2s ease-out; -o-transition: color 0.2s ease-out, 0.5s 0.2s ease-out; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk >.quote .quote-content { margin-top: 0.3em; font-size: 0.75rem; line-height: 1; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk >.quote .quote-content span { display: inline-block; white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk >.quote .quote-content span p, .md-text .tag-plugin.chat >.content .chatcell .user-main .talk >.quote .quote-content span span { font-size: 0.75rem; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.md .tag-plugin { margin-bottom: 0; margin: 0.2rem 0; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.image, .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.emoji, .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.link, .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.video, .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.file { background: unset !important; padding: 0 !important; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.link .link-card { background: var(--chat-block); box-shadow: unset; transition: unset; -webkit-transition: unset; -moz-transition: unset; -o-transition: unset; border-radius: 6px; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.link .link-card:hover { transform: none; color: var(--text-p3); } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.link .link-card .top { margin: 0.5em; max-width: unset; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.link .link-card .top span { white-space: unset; font-size: 0.875rem; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.link .link-card .center { margin: 0 0.5em; column-gap: 0.5em; display: flex; align-self: unset; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.link .link-card .center .left { width: calc(100% - 32px - 0.5em); height: 32px; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.link .link-card .center .left .desc { -webkit-line-clamp: 2; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.link .link-card .center .right { flex: 1; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.link .link-card .bottom { margin: 0.5em 0.5em 0.3em 0.5em; padding-top: 0.3em; border-top: 1px solid var(--chat-border); display: flex; align-items: center; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.link .link-card .bottom >svg, .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.link .link-card .bottom >span { height: 0.8rem; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.voice { display: flex; align-items: center; justify-content: left; padding: 4.5px 0.5em; cursor: pointer; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.voice .voice-btns { flex-shrink: 0; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.voice .voice-btns svg.icon { width: 1.3em; height: 1.3em; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.voice .voice-btns svg.icon >path { fill: var(--text-p1); } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.voice canvas.voice-wave { margin: 0 0.5em; height: 23px; width: 36px; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.voice div.voice-wave { height: 1.2em; margin: 0 0.5em; display: flex; justify-content: center; align-items: center; position: relative; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.voice div.voice-wave .play-line { position: absolute; top: -20%; left: 0; height: 140%; width: 1px; background: var(--text-p2); content: ""; opacity: 0; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.voice div.voice-wave .play-line.active { opacity: 1; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.voice div.voice-wave .play-line.back { transition: transform 0.3s linear !important; -moz-transition: transform 0.3s linear !important; -webkit-transition: transform 0.3s linear !important; -o-transition: transform 0.3s linear !important; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.voice div.voice-wave span.voice-wave-item { background: var(--text-p2); width: 2px; border-radius: 2px; flex-shrink: 0; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.voice .voice-metas { font-size: 0.875rem; display: flex; flex-shrink: 0; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.voice .voice-metas span { line-height: 1; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.video { position: relative; line-height: 0; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.video .video-btns { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.video .video-btns .play-btn, .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.video .video-btns .pause-btn { align-items: center; justify-content: center; width: 100%; height: 100%; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.video .video-btns svg.icon { width: 3em; height: 3em; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.video .video-btns svg.icon >path { fill: var(--chat-video-button); } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.video video { width: 100%; border-radius: 6px; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.file { background: transparent !important; display: flex; padding: unset !important; column-gap: 0.3rem; width: calc(100% - 32px); cursor: pointer; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.file >.content { background: var(--chat-block); padding: 0.5em; border-radius: 6px; flex-grow: 1; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.file >.content >.top { display: flex; align-items: center; column-gap: 0.5rem; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.file >.content >.top >.left { height: 2.5rem; flex-grow: 1; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.file >.content >.top >.left >span { white-space: unset; font-size: 0.875rem; font-weight: 500; color: var(--text-p1); overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: calc(2.5rem / 2); } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.file >.content >.top >.right { height: fit-content; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.file >.content >.top >.right >svg.icon { height: 2.5rem; width: unset; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.file >.content >.bottom { margin-top: 0.5em; display: flex; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.file >.content >.bottom >span { line-height: 0.75rem; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.file >.download-btn { display: flex; align-items: flex-end; } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.file >.download-btn >svg.icon { height: 1rem; width: 1rem; padding: 0.2em; border-radius: 50%; background: var(--chat-block); } .md-text .tag-plugin.chat >.content .chatcell .user-main .talk.file >.download-btn >svg.icon >path { fill: var(--text-p1); } .md-text .tag-plugin.chat >.content .chatcell.right .user-avatar { float: right; } .md-text .tag-plugin.chat >.content .chatcell.right .user-main { flex-flow: row-reverse; flex-wrap: wrap; } .md-text .tag-plugin.chat >.content .chatcell.right .user-main .header { flex-basis: 100%; justify-content: flex-end; } .md-text .tag-plugin.chat >.content .chatcell.right .user-main .talk.file { flex-direction: row-reverse; } .md-text .tag-plugin.chat >.content .chatcell.right .user-main .talk.voice .voice-btns svg.icon>path { fill: var(--chat-qq-right-text); } .md-text .tag-plugin.chat >.content .chatcell.right .user-main .talk.md, .md-text .tag-plugin.chat >.content .chatcell.right .user-main .talk.voice { background: var(--chat-qq-right-bg); color: var(--chat-qq-right-text); } .md-text .tag-plugin.chat >.content .chatcell.quote-blink { animation: chatQuoteblinking 1s; } .md-text .tag-plugin.chat.person >.content >.chatcell >.user-main { min-height: 32px; justify-content: center; align-content: unset; } .md-text .tag-plugin.chat.person >.content >.chatcell >.user-main >.header { display: none; } .md-text .tag-plugin.chat.person >.content >.chatcell.right>.user-main { justify-content: unset; align-content: center; } .md-text .tag-plugin.chat.wechat.iphone11 { background: var(--chat-bg); } .md-text .tag-plugin.chat.wechat.iphone11 >.bottom { padding-bottom: 0.75rem; } .md-text .tag-plugin.chat.wechat >.chat-navbar { background: var(--chat-bg); box-shadow: rgba(27,31,35,0.02) 0px 1px 0px; } .md-text .tag-plugin.chat.wechat >.chat-navbar >.left-items >.news-num { background: var(--chat-wechat-news-num); } .md-text .tag-plugin.chat.wechat >.content >.chatcell img { border-radius: 4px; } .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-avatar>img { border-radius: 4px; } .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.header { line-height: 1; margin-bottom: 0.2em; } .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.header >.label { display: none; } .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.talk { position: relative; border-radius: 4px; } .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.talk:before { content: ""; position: absolute; left: -2.5px; top: 11px; width: 10px; height: 10px; border-radius: 1.5px; transform: rotate3d(0, 0, 1, -45deg); background: var(--chat-block); } .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.talk.emoji:before, .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.talk.video:before, .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.talk.image:before { display: none; } .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.talk.link>.link-card, .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.talk.video>video, .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.talk.file>.content, .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.talk.image>img, .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.talk.emoji>img { border-radius: 4px; } .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.talk.file .download-btn { display: none; } .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.talk.voice { padding: 8px 0.5em; } .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.talk.voice >.wechat-voice { width: 16px; height: 16px; box-sizing: border-box; overflow: hidden; position: relative; transform: rotate3d(0, 0, 1, 135deg); margin-left: 0.2rem; margin-right: 0; } .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.talk.voice >.wechat-voice >.voice-circle { border: 2px solid var(--text-p1); border-radius: 50%; position: absolute; } .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.talk.voice >.wechat-voice >.voice-circle.first { width: 5px; height: 5px; background: var(--text-p1); top: 12px; left: 12px; } .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.talk.voice >.wechat-voice >.voice-circle.second { width: 13px; height: 13px; top: 8px; left: 8px; } .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.talk.voice >.wechat-voice >.voice-circle.third { width: 21px; height: 21px; top: 4px; left: 4px; } .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.talk.voice >.wechat-voice.play >.second { animation: wehcatVoicefadeInOut 1s infinite 0.2s; } .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.talk.voice >.wechat-voice.play >.third { animation: wehcatVoicefadeInOut 1s infinite 0.4s; } .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.quote { width: fit-content; max-width: calc(100% - 32px); background: var(--chat-wechat-quote-bg); padding: 0.2em 0.5em; border-radius: 4px; margin-top: 0.2em; font-size: 0.75rem; color: var(--chat-wechat-quote-color); display: flex; column-gap: 4px; } .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.quote.image-chat { display: flex; column-gap: 0.4em; padding: 0.5em; } .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.quote img { border-radius: 4px; display: inline; width: 64px; } .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.quote .tag-plugin { margin-bottom: 0; margin: 0.2rem 0; } .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.quote .tag-plugin.image img { display: block; width: unset; } .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.quote p, .md-text .tag-plugin.chat.wechat >.content >.chatcell >.user-main >.quote span { font-size: 0.75rem; margin: 0; padding: 0; } .md-text .tag-plugin.chat.wechat >.content >.chatcell.right>.user-main >.header { display: none; } .md-text .tag-plugin.chat.wechat >.content >.chatcell.right>.user-main >.talk:before { right: -2px; left: unset; } .md-text .tag-plugin.chat.wechat >.content >.chatcell.right>.user-main >.talk.md, .md-text .tag-plugin.chat.wechat >.content >.chatcell.right>.user-main >.talk.md:before, .md-text .tag-plugin.chat.wechat >.content >.chatcell.right>.user-main >.talk.voice, .md-text .tag-plugin.chat.wechat >.content >.chatcell.right>.user-main >.talk.voice:before { background: var(--chat-wechat-right-bg); color: var(--text-p1); } .md-text .tag-plugin.chat.wechat >.content >.chatcell.right>.user-main >.talk.voice { flex-direction: row-reverse; } .md-text .tag-plugin.chat.wechat >.content >.chatcell.right>.user-main >.talk.voice >.wechat-voice { transform: rotate3d(0, 0, 1, -45deg); margin-left: 0; margin-right: 0.2rem; } .md-text .tag-plugin.chat.wechat >.bottom { display: flex; align-items: center; justify-content: space-between; padding: 0.5em; column-gap: 0.5em; } .md-text .tag-plugin.chat.wechat >.bottom .input-text { border-radius: 4px; flex-grow: 1; height: 2rem; background: var(--chat-block); } .md-text .tag-plugin.chat.wechat >.bottom .icon { height: 1.5rem; width: 1.5rem; } .md-text .tag-plugin.chat.wechat >.bottom .icon >path { fill: var(--text-p2); } @-moz-keyframes wehcatVoicefadeInOut { 0% { opacity: 0; /*初始状态 透明度为0*/ } 100% { opacity: 1; /*结尾状态 透明度为1*/ } } @-webkit-keyframes wehcatVoicefadeInOut { 0% { opacity: 0; /*初始状态 透明度为0*/ } 100% { opacity: 1; /*结尾状态 透明度为1*/ } } @-o-keyframes wehcatVoicefadeInOut { 0% { opacity: 0; /*初始状态 透明度为0*/ } 100% { opacity: 1; /*结尾状态 透明度为1*/ } } @keyframes wehcatVoicefadeInOut { 0% { opacity: 0; /*初始状态 透明度为0*/ } 100% { opacity: 1; /*结尾状态 透明度为1*/ } } @-moz-keyframes chatQuoteblinking { 0% { background-color: transparent; } 50% { background-color: var(--chat-quote-blink-color); } 100% { background-color: transparent; } } @-webkit-keyframes chatQuoteblinking { 0% { background-color: transparent; } 50% { background-color: var(--chat-quote-blink-color); } 100% { background-color: transparent; } } @-o-keyframes chatQuoteblinking { 0% { background-color: transparent; } 50% { background-color: var(--chat-quote-blink-color); } 100% { background-color: transparent; } } @keyframes chatQuoteblinking { 0% { background-color: transparent; } 50% { background-color: var(--chat-quote-blink-color); } 100% { background-color: transparent; } } .md-text .tag-plugin.checkbox { display: flex; align-items: center; font-size: 0.9375rem; line-height: 1.2; --gap-p: calc(var(--gap-p-compact) / 2); /* Checkbox */ /* Radio */ /* Colors */ } .md-text .tag-plugin.checkbox input { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; position: relative; height: 16px; width: 16px; cursor: pointer; display: inline-block; outline: none; border-radius: 2px; flex-shrink: 0; margin-right: 8px; pointer-events: none; } .md-text .tag-plugin.checkbox input[type=checkbox]:before, .md-text .tag-plugin.checkbox input[type=checkbox]:after { position: absolute; content: ""; background: var(--background); } .md-text .tag-plugin.checkbox input[type=checkbox]:before { left: 1px; top: 5px; width: 0px; height: 2px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .md-text .tag-plugin.checkbox input[type=checkbox]:after { right: 7px; bottom: 3px; width: 2px; height: 0px; transform: rotate(40deg); -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); -ms-transform: rotate(40deg); -o-transform: rotate(40deg); } .md-text .tag-plugin.checkbox input[type=checkbox]:checked:before { left: 0px; top: 7px; width: 6px; height: 2px; } .md-text .tag-plugin.checkbox input[type=checkbox]:checked:after { right: 3px; bottom: 1px; width: 2px; height: 10px; } .md-text .tag-plugin.checkbox[symbol=minus] input[type=checkbox]:before { transform: rotate(0); left: 1px; top: 5px; width: 0px; height: 2px; } .md-text .tag-plugin.checkbox[symbol=minus] input[type=checkbox]:after { transform: rotate(0); left: 1px; top: 5px; width: 0px; height: 2px; } .md-text .tag-plugin.checkbox[symbol=minus] input[type=checkbox]:checked:before { left: 1px; top: 5px; width: 10px; height: 2px; } .md-text .tag-plugin.checkbox[symbol=minus] input[type=checkbox]:checked:after { left: 1px; top: 5px; width: 10px; height: 2px; } .md-text .tag-plugin.checkbox[symbol=plus] input[type=checkbox]:before { transform: rotate(0); left: 1px; top: 5px; width: 0px; height: 2px; } .md-text .tag-plugin.checkbox[symbol=plus] input[type=checkbox]:after { transform: rotate(0); left: 5px; top: 1px; width: 2px; height: 0px; } .md-text .tag-plugin.checkbox[symbol=plus] input[type=checkbox]:checked:before { left: 1px; top: 5px; width: 10px; height: 2px; } .md-text .tag-plugin.checkbox[symbol=plus] input[type=checkbox]:checked:after { left: 5px; top: 1px; width: 2px; height: 10px; } .md-text .tag-plugin.checkbox[symbol=times] input[type=checkbox]:before { transform: rotate(45deg); left: 3px; top: 1px; width: 0px; height: 2px; } .md-text .tag-plugin.checkbox[symbol=times] input[type=checkbox]:after { transform: rotate(135deg); right: 3px; top: 1px; width: 0px; height: 2px; } .md-text .tag-plugin.checkbox[symbol=times] input[type=checkbox]:checked:before { left: 1px; top: 5px; width: 10px; height: 2px; } .md-text .tag-plugin.checkbox[symbol=times] input[type=checkbox]:checked:after { right: 1px; top: 5px; width: 10px; height: 2px; } .md-text .tag-plugin.checkbox input[type=radio] { border-radius: 50%; transform: translateY(-1px); } .md-text .tag-plugin.checkbox input[type=radio]:before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; margin: 2px; transform: scale(0); } .md-text .tag-plugin.checkbox input[type=radio]:checked:before { transform: scale(1); } .md-text .tag-plugin.checkbox input { border: 2px solid var(--theme); } .md-text .tag-plugin.checkbox input[type=checkbox]:checked { background: var(--theme); } .md-text .tag-plugin.checkbox input[type=radio]:checked:before { background: var(--theme); } .tag-plugin.checkbox:not([color]) { --theme: #2196f3; } .md-text .tag-plugin.copy { display: flex; justify-content: space-between; box-sizing: border-box; background: var(--card); border-radius: 8px; border: 1px solid var(--block-border); overflow: hidden; width: 100%; min-width: 200px; } .md-text .tag-plugin.copy span { padding: 0.25rem 0.5rem; margin: auto 0.5rem; line-height: 1; border-radius: 4px; background: hsla(var(--hue) var(--sat) var(--light) / 0.2); color: var(--theme); font-family: Menlo, Monaco, Consolas, system-ui, monospace, sans-serif; font-size: 0.8125rem; font-weight: 700; flex-shrink: 0; } .md-text .tag-plugin.copy input.copy-area { display: inline-block; padding: 0; width: 100%; color: var(--text-p2); line-height: 3; text-indent: 1rem; } .md-text .tag-plugin.copy span+input.copy-area { text-indent: 0; } .md-text .tag-plugin.copy button.copy-btn { margin: 2px 2px 2px 0; border-radius: calc(8px - 2px); display: inline-block; background: var(--block); transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; line-height: 0; font-size: 1rem; padding: 0 0.75rem; color: var(--text-p2); } .md-text .tag-plugin.copy button.copy-btn:hover { color: var(--theme); background: var(--theme-a20); } .md-text .tag-plugin.emoji { display: inline-block; margin: -4px 2px 0; vertical-align: middle; } .md-text .tag-plugin.emoji img { display: block; object-fit: contain; height: 1.75em; border-radius: 0; } .tag-plugin.folders { margin: var(--gap-p) 0; --fsp: calc(17px - 2px); font-size: var(--fsp); border-top: 1px solid var(--block-border); overflow: hidden; } .tag-plugin.folders .folder { border-bottom: 1px solid var(--block-border); padding: 1rem; } .tag-plugin.folders summary { cursor: pointer; color: var(--text-p2); font-weight: 500; position: relative; line-height: 1.2; outline: none; padding: 1rem; margin: -1rem; } .tag-plugin.folders summary:last-child { border-bottom: none; } .tag-plugin.folders summary > span { margin-left: 0.25em; } .tag-plugin.folders summary > p, .tag-plugin.folders summary > h1, .tag-plugin.folders summary > h2, .tag-plugin.folders summary > h3, .tag-plugin.folders summary > h4, .tag-plugin.folders summary > h5, .tag-plugin.folders summary > h6 { display: inline; border-bottom: none !important; } .tag-plugin.folders summary:hover { color: var(--text); } .tag-plugin.folders summary:after { position: absolute; content: '+'; text-align: center; top: 50%; transform: translateY(-50%); right: 1rem; } .tag-plugin.folders details[open] >summary { color: var(--text-p1); font-weight: 700; } .tag-plugin.folders details[open] >summary:after { content: '-'; } .tag-plugin.folders details[open] >div.body { --fsp: calc(17px - 1px); } .tag-plugin.folders details[open] >div.body >:first-child { margin-top: 1rem; } .tag-plugin.folders details[open] >div.body >:last-child { margin-bottom: 0; } details.folding { display: block; padding: 1rem; margin: 1rem 0; border-radius: 16px; background: var(--theme-block); border: 1px solid var(--theme-border); } details.folding summary { cursor: pointer; padding: 1rem; margin: -1rem; color: var(--text-p2); font-weight: 500; --fsp: calc(17px - 2px); font-size: var(--fsp); position: relative; line-height: 1.2; outline: none; } details.folding summary > span { margin-left: 0.25em; } details.folding summary > p, details.folding summary > h1, details.folding summary > h2, details.folding summary > h3, details.folding summary > h4, details.folding summary > h5, details.folding summary > h6 { display: inline; border-bottom: none !important; } details.folding summary:hover { color: var(--text); } details.folding summary:after { position: absolute; content: '+'; text-align: center; top: 50%; transform: translateY(-50%); right: 1rem; line-height: 1; } details.folding[open] >summary { color: var(--text-p1); font-weight: 700; z-index: 1; } details.folding[open] >summary:after { content: '-'; } details.folding[open] >div.body { padding: 0 1rem 1rem; margin: 0 -1rem -1rem; color: var(--text-p1); --fsp: calc(17px - 1px); } details.folding[open] >div.body >:first-child { margin-top: 1rem; } details.folding[open] >div.body >:last-child { margin-bottom: 0; } details.folding[child=codeblock]>div.body { padding: 0; background: transparent; overflow: hidden; } details.folding[child=codeblock]>div.body .highlight { border: none; border-radius: 0; background: transparent; margin: 0; } details.folding[child=codeblock]>div.body .highlight figcaption { display: none; } details.folding[child=codeblock]>div.body .highlight figcaption span { background: var(--theme-block); } details.folding[child=codeblock]>div.body .highlight .code:before { content: none; } details.folding[child=codeblock]>div.body .highlight+.highlight { border-top: 1px dashed var(--theme-border); border-top-left-radius: 0; border-top-right-radius: 0; } details.folding[child=iframe] { overflow: hidden; background: none; } details.folding[child=iframe] >summary { background: none; } details.folding[child=iframe] >div.body { padding: 0; background: none; overflow: hidden; } .md-text .frame-wrap { position: relative; overflow: hidden; margin: 0 auto; max-width: 100%; display: flex; flex-direction: column; align-items: center; } .md-text .frame-wrap img, .md-text .frame-wrap video { border-radius: 0; } .md-text .frame-wrap .frame { z-index: 1; display: block; position: absolute; background-size: 100%; background-repeat: no-repeat; overflow: hidden; } .md-text .tag-plugin.img-wrap .frame-wrap[focus] { height: auto; } .md-text .frame-wrap#iphone11 img, .md-text .frame-wrap#iphone11 video { width: 287px; margin-top: 19px; margin-bottom: 20px; } .md-text .frame-wrap#iphone11 .frame { background-image: url("https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/frame/iphone11.svg"); width: 329px; height: 658px; } .md-text .frame-wrap[focus='top'] img, .md-text .frame-wrap[focus='top'] video { margin-bottom: 0 !important; } .md-text .frame-wrap:not([focus='bottom']) .frame { top: 0; } .md-text .frame-wrap[focus='bottom'] img, .md-text .frame-wrap[focus='bottom'] video { bottom: 0; margin-top: 0 !important; } .md-text .frame-wrap[focus='bottom'] .frame { bottom: 0; } @media screen and (max-width: 500px) { .md-text .frame-wrap#iphone11 img, .md-text .frame-wrap#iphone11 video { width: 208px; margin-top: 13px; margin-bottom: 14px; } .md-text .frame-wrap#iphone11 .frame { width: 238px; height: 476px; } } .users-posts-wrap .grid-box { display: grid; grid-template-columns: 1fr; grid-gap: 2px; overflow: hidden; border-radius: 16px; } .users-posts-wrap .user-post-card { display: grid; grid-template-columns: 1fr 2fr; grid-gap: 16px; font-weight: 500; border-radius: 4px; background: var(--block); padding: 1rem; } .users-posts-wrap .user-post-card div, .users-posts-wrap .user-post-card span { line-height: 1.2; } .users-posts-wrap .user-post-card .labels { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; pointer-events: none; user-select: none; } .users-posts-wrap .user-post-card .labels .label { color: #fff; font-size: 12px; padding: 2px 6px; margin: 4px 2px 0 2px; line-height: 1; border-radius: 16px; } .users-posts-wrap .user-post-card .avatar-box { display: flex; justify-content: center; flex-direction: column; align-items: center; padding: 1rem; } .users-posts-wrap .user-post-card .card-link { color: var(--text-p1); display: flex; justify-content: flex-start; flex-direction: column; align-items: center; text-align: center; border-radius: 4px; position: relative; flex-shrink: 0; transition: width 0.2s ease-out; -moz-transition: width 0.2s ease-out; -webkit-transition: width 0.2s ease-out; -o-transition: width 0.2s ease-out; } .users-posts-wrap .user-post-card .card-link span { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; position: relative; } .users-posts-wrap .user-post-card .card-link .title { font-size: 0.875rem; font-weight: 500; margin-top: 1rem; max-width: 100%; } .users-posts-wrap .user-post-card .card-link .lazy-box { border-radius: 64px; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; -moz-transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; -webkit-transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; -o-transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; } .users-posts-wrap .user-post-card .card-link img { object-fit: cover; display: block; width: 64px; height: 64px; } .users-posts-wrap .user-post-card .previews { display: flex; justify-content: space-between; flex-direction: column; height: 100%; position: relative; } .users-posts-wrap .user-post-card .previews .empty { min-height: 1rem; } .users-posts-wrap .user-post-card .previews .desc { font-size: 1.2rem; color: var(--text-p3); font-weight: 400; margin: 1rem 0; margin-right: auto; position: relative; } .users-posts-wrap .user-post-card .previews .desc:before { position: absolute; font-weight: 900; font-size: 32px; color: var(--block-border); top: 0; content: '“'; left: -16px; transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .users-posts-wrap .user-post-card .previews .spacer { height: 100%; } .users-posts-wrap .user-post-card .previews .posts { margin: 0.5rem 0 1rem 0; display: flex; flex-direction: column; align-items: flex-start; } .users-posts-wrap .user-post-card .previews .post-link { display: flex; flex-direction: column; color: var(--text-p1); position: relative; transition: color 0.2s ease-out; -moz-transition: color 0.2s ease-out; -webkit-transition: color 0.2s ease-out; -o-transition: color 0.2s ease-out; } .users-posts-wrap .user-post-card .previews .post-link+.post-link { margin-top: 1rem; } .users-posts-wrap .user-post-card .previews .post-link:before { content: ''; position: absolute; left: -12px; top: 2px; height: calc(0.875rem - 2px); width: 4px; border-radius: 4px; background: var(--block-border); transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .users-posts-wrap .user-post-card .previews .post-link:hover:before { background: var(--accent); height: 100%; top: 0; } .users-posts-wrap .user-post-card .previews .post-link span { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; position: relative; } .users-posts-wrap .user-post-card .previews .title { font-size: 0.875rem; font-weight: 500; max-width: 100%; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; position: relative; } .users-posts-wrap .user-post-card .previews .date { font-size: 0.75rem; color: var(--text-p3); margin-top: 0.25rem; } .users-posts-wrap .user-post-card .previews .no-post { font-size: 0.8125rem; color: var(--text-p4); } .users-posts-wrap .user-post-card:hover .desc:before { color: var(--accent); transform: scale(1.2) translateX(-4px); } .users-posts-wrap .user-post-card .card-link:hover .lazy-box { transform: scale(1.2) rotate(8deg); box-shadow: 0 12px 16px -4px rgba(0,0,0,0.2); } .users-posts-wrap .user-post-card .post-link:hover { color: var(--accent); } .users-wrap .grid-box { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); } .users-wrap .user-card .card-link { color: var(--text-p1); font-size: 10px; font-weight: 500; display: flex; justify-content: flex-start; flex-direction: column; align-items: center; text-align: center; line-height: 1.2; border-radius: 8px; overflow: hidden; position: relative; padding: 1rem 0.5rem; } .users-wrap .user-card .card-link .name { max-width: 100%; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; position: relative; } .users-wrap .user-card .card-link .lazy-box { border-radius: 64px; margin: 0 0 0.5rem; } .users-wrap .user-card .card-link img { object-fit: cover; display: block; width: 48px; height: 48px; } .users-wrap .user-card .label { margin-top: 4px; color: #fff; font-size: 10px; padding: 1px 4px; border-radius: 16px; font-weight: 500; } .users-wrap .user-card .card-link .lazy-box { transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; -moz-transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; -webkit-transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; -o-transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; } .users-wrap .user-card .card-link:hover { background: var(--block-border); } .users-wrap .user-card .card-link:hover .lazy-box { transform: scale(1.2) rotate(8deg); box-shadow: 0 12px 16px -4px rgba(0,0,0,0.2); } .tag-plugin.gallery .grid-cell, .tag-plugin.gallery .flow-cell { display: block; overflow: hidden; z-index: 0; position: relative; } .tag-plugin.gallery .grid-cell:hover .image-meta, .tag-plugin.gallery .flow-cell:hover .image-meta { background: rgba(0,0,0,0.5); } .tag-plugin.gallery .grid-cell:hover .image-caption, .tag-plugin.gallery .flow-cell:hover .image-caption { color: #fff; } .tag-plugin.gallery img { object-fit: cover; max-height: 100%; display: block; } .tag-plugin.gallery .image-meta { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background: transparent; transition: background 0.2s ease-out; -moz-transition: background 0.2s ease-out; -webkit-transition: background 0.2s ease-out; -o-transition: background 0.2s ease-out; display: flex; flex-direction: column; justify-content: flex-end; } .tag-plugin.gallery .image-meta .image-caption { display: block; font-size: 0.8125rem; color: transparent; pointer-events: none; line-height: 1.2; margin: 0.5rem; transition: color 0.2s ease-out; -moz-transition: color 0.2s ease-out; -webkit-transition: color 0.2s ease-out; -o-transition: color 0.2s ease-out; text-align: left; } .tag-plugin.gallery .image-meta .image-caption:empty { display: none; } .tag-plugin.gallery .grid-cell >img { transition: transform 0.5s ease-out; -moz-transition: transform 0.5s ease-out; -webkit-transition: transform 0.5s ease-out; -o-transition: transform 0.5s ease-out; } .tag-plugin.gallery .grid-cell:hover >img { transform: scale(1.1); } .tag-plugin.gallery.grid-box { display: grid; } .tag-plugin.gallery.grid-box[size='xs'] { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); grid-gap: 2px; } .tag-plugin.gallery.grid-box[size='xs'] .grid-cell, .tag-plugin.gallery.grid-box[size='xs'] img { border-radius: 2px; } .tag-plugin.gallery.grid-box[size='xs'] .image-caption { font-size: 0.75rem; } .tag-plugin.gallery.grid-box[size='s'] { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-gap: 2px; } .tag-plugin.gallery.grid-box[size='s'] .grid-cell, .tag-plugin.gallery.grid-box[size='s'] img { border-radius: 2px; } .tag-plugin.gallery.grid-box[size='m'] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-gap: 4px; } .tag-plugin.gallery.grid-box[size='m'] .grid-cell, .tag-plugin.gallery.grid-box[size='m'] img { border-radius: 4px; } .tag-plugin.gallery.grid-box[size='l'] { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 8px; } .tag-plugin.gallery.grid-box[size='l'] .grid-cell, .tag-plugin.gallery.grid-box[size='l'] img { border-radius: 8px; } .tag-plugin.gallery.grid-box[size='xl'] { grid-template-columns: repeat(2, 1fr); grid-gap: 16px; } .tag-plugin.gallery.grid-box[size='xl'] .grid-cell, .tag-plugin.gallery.grid-box[size='xl'] img { border-radius: 16px; } .tag-plugin.gallery.grid-box[size='mix'] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-gap: 4px; } .tag-plugin.gallery.grid-box[size='mix'] .grid-cell, .tag-plugin.gallery.grid-box[size='mix'] img { border-radius: 4px; } .tag-plugin.gallery.grid-box[size='mix'] .grid-cell:nth-child(3n+1) { grid-column: auto/span 2; grid-row: auto/span 2; } .tag-plugin.gallery.grid-box[ratio='square'] .grid-cell { aspect-ratio: 1; } .tag-plugin.gallery.grid-box[ratio='portrait'] .grid-cell { aspect-ratio: 2/3; } .tag-plugin.gallery.grid-box .grid-cell { background: var(--block); } .tag-plugin.gallery.grid-box .grid-cell img { width: 100%; height: 100%; } .tag-plugin.gallery.flow-box { column-count: 3; column-gap: 8px; } .tag-plugin.gallery.flow-box .flow-cell { border-radius: 8px; padding-bottom: 8px; } .tag-plugin.gallery.flow-box .flow-cell img { width: 100%; height: 100%; border-radius: 8px; } .tag-plugin.gallery.flow-box .flow-cell:has(img.loading), .tag-plugin.gallery.flow-box .flow-cell:has(img.error) { background-color: var(--block); } .tag-plugin.gallery.flow-box .flow-cell:has(img.loading) img, .tag-plugin.gallery.flow-box .flow-cell:has(img.error) img { background-color: var(--block); } .tag-plugin.gallery.flow-box .image-meta { border-radius: 8px; margin-bottom: 8px; } .tag-plugin.ghcard { line-height: 0; } .tag-plugin.ghcard a.ghcard { display: inline-block; } .tag-plugin.grid { display: grid; grid-gap: 16px; } .tag-plugin.grid[bg]>.cell> p { line-height: 1.5; } .tag-plugin.grid[bg]>.cell> :first-child { margin-top: 0; } .tag-plugin.grid[bg]>.cell> :last-child { margin-bottom: 0; } .tag-plugin.grid[bg]>.cell> p:first-child { margin-top: -0.25em; } .tag-plugin.grid[bg]>.cell> p:last-child { margin-bottom: -0.25em; } .tag-plugin.grid[bg]>.cell { padding: 1rem; border-radius: 16px; } .tag-plugin.grid[bg='box']>.cell { background: var(--block); } .tag-plugin.grid[bg='card']>.cell { background: var(--card); transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } :root[data-theme="light"] .tag-plugin.grid[bg='card']>.cell { box-shadow: 0 1px 2px 0px rgba(0,0,0,0.1); } :root[data-theme="light"] .tag-plugin.grid[bg='card']>.cell:hover { box-shadow: 0 12px 20px -4px rgba(0,0,0,0.15); transform: translate3d(0, -2px, 0); } :root[data-theme="dark"] .tag-plugin.grid[bg='card']>.cell:hover { box-shadow: 0 0 4px -2px var(--theme), 0 0 24px -8px var(--theme); } :root:not([data-theme]) .tag-plugin.grid[bg='card']>.cell { box-shadow: 0 1px 2px 0px rgba(0,0,0,0.1); } :root:not([data-theme]) .tag-plugin.grid[bg='card']>.cell:hover { box-shadow: 0 12px 20px -4px rgba(0,0,0,0.15); transform: translate3d(0, -2px, 0); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .tag-plugin.grid[bg='card']>.cell:hover { box-shadow: 0 0 4px -2px var(--theme), 0 0 24px -8px var(--theme); } } .md-text .tag-plugin.hashtag { padding: 0px 8px; border-radius: 100px; background: var(--theme-block); color: var(--text-p2); margin: 2px 0; display: inline-flex; align-items: center; --fsp: calc(17px - 2px); font-size: var(--fsp); font-weight: 500; transition: background 0.2s ease-out, color 0.2s ease-out; -moz-transition: background 0.2s ease-out, color 0.2s ease-out; -webkit-transition: background 0.2s ease-out, color 0.2s ease-out; -o-transition: background 0.2s ease-out, color 0.2s ease-out; } .md-text .tag-plugin.hashtag span { margin: 0 2px; } .md-text .tag-plugin.hashtag:hover { background: var(--text-p2); color: var(--theme-block); } span.tag-plugin.icon { display: inline-block; margin: -4px 1px 0; vertical-align: middle; } span.tag-plugin.icon svg, span.tag-plugin.icon img { display: block; height: 1.5em; width: auto; } span.tag-plugin.icon svg { color: var(--theme); } span.tag-plugin.icon img { object-fit: contain; } p>strong>span.tag-plugin.icon { margin: -4px 4px 0 0; } .tag-plugin.icon-wrap span.tag-plugin.icon { margin-right: 4px; } .tag-plugin.image { margin-top: 1rem; margin-bottom: 1rem; box-sizing: border-box; } .tag-plugin.image .image-bg { text-align: center; border-radius: 16px; position: relative; overflow: hidden; display: flex; box-sizing: border-box; flex-direction: column; justify-content: center; align-items: center; margin: auto; max-width: 100%; } .tag-plugin.image .image-bg:has(img.lazy.loading), .tag-plugin.image .image-bg:has(img.lazy.error) { background-color: var(--block); } .tag-plugin.image .image-bg:hover .image-download { opacity: 1 !important; } .tag-plugin.image .image-bg img { display: block; object-fit: cover; border-radius: 16px; } .tag-plugin.image .image-bg .image-download { position: absolute; bottom: 8px; right: 8px; font-size: 1.125rem; padding: 6px; line-height: 0; border-radius: 40px; transition: color 0.2s ease-out, opacity 0.2s ease-out, background 0.2s ease-out; -moz-transition: color 0.2s ease-out, opacity 0.2s ease-out, background 0.2s ease-out; -webkit-transition: color 0.2s ease-out, opacity 0.2s ease-out, background 0.2s ease-out; -o-transition: color 0.2s ease-out, opacity 0.2s ease-out, background 0.2s ease-out; color: var(--text-p1); } .tag-plugin.image .image-bg .image-download:hover { background: var(--card) !important; color: var(--theme); } .tag-plugin.image .image-meta { display: flex; justify-content: center; padding: 0.5rem 0; } .tag-plugin.image .image-meta .image-caption { display: inline-block; font-size: 0.8125rem; color: var(--text-p2); line-height: 1.5; text-align: justify; } .tag-plugin.image .image-meta .image-caption:empty { display: none; } .md-text .tag-plugin.paper { display: flex; flex-direction: column; align-items: center; padding-top: var(--gap-padding); padding-bottom: var(--gap-padding); } .md-text .tag-plugin.paper >.content { border-left: 1px dashed var(--text-meta); border-right: 1px dashed var(--text-meta); border-bottom: 1px dashed var(--text-meta); border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; padding: 1rem; max-width: calc(95%); } .md-text .tag-plugin.paper >.content >.title { font-weight: 500; text-align: center; } .md-text .tag-plugin.paper >.content >.meta { color: var(--text-p2); font-size: 0.75rem; font-weight: 500; } .md-text .tag-plugin.paper >.content >.body >.paragraph { text-indent: 2em; } .md-text .tag-plugin.paper >.content >.body >.section >.section-title { text-align: center; } .md-text .tag-plugin.paper >.content >.body >.section >.section-content { text-indent: 2em; } .md-text .tag-plugin.paper >.content >.body >.line.right >p { text-align: right; } .md-text .tag-plugin.paper >.content >.body .tag-plugin { margin: 0; } .md-text .tag-plugin.paper >.content >.footer { color: var(--text-p4); font-size: 0.75rem; text-align: right; } .md-text .tag-plugin.paper >.content >.footer >.author-date { text-align: right; } .md-text .tag-plugin.paper >.content >.footer >.author-date >span { color: var(--text-p2); font-size: 0.75rem; font-weight: 500; } .md-text .tag-plugin.paper >.content >.footer >.author-date >.author { margin-right: calc(0.5 * var(--gap-p)); } .md-text .tag-plugin.paper>.content { position: relative; } .md-text .tag-plugin.paper>.content:before { content: ''; position: absolute; height: 4px; left: -16px; top: -4px; right: -16px; border-radius: 4px; background: var(--block); } .md-text .tag-plugin.paper>.content >.title { position: relative; } .md-text .tag-plugin.paper>.content >.title:before { content: ''; position: absolute; height: 4px; left: calc(-1rem - 6px); top: calc(-1rem - 4px); right: calc(100% + 1rem - 6px); border-radius: 4px; background: var(--accent); } .md-text .tag-plugin.paper>.content >.title:after { content: ''; position: absolute; height: 4px; right: calc(-1rem - 6px); top: calc(-1rem - 4px); left: calc(100% + 1rem - 6px); border-radius: 4px; background: var(--accent); } .md-text .tag-plugin.paper > .content.underline > .title, .md-text .tag-plugin.paper > .content.underline > .meta, .md-text .tag-plugin.paper > .content.underline > .author-date, .md-text .tag-plugin.paper > .content.underline > .footer, .md-text .tag-plugin.paper > .content.underline > .body { background: linear-gradient(transparent 1.5rem, var(--text-meta) 1px); background-size: 100% calc(1.5rem + 1px); line-height: calc(1.5rem + 1px); padding: 0 3px; } .md-text .tag-plugin.paper > .content.underline p { margin: 0; } .md-text .tag-plugin.paper > .content.underline >.title { border-top: 1px solid var(--text-meta); } .md-text .tag-plugin.reel { display: flex; flex-direction: column; align-items: center; padding-top: var(--gap-padding); padding-bottom: var(--gap-padding); } .md-text .tag-plugin.reel >.content { display: flex; flex-direction: column; writing-mode: vertical-rl; border-top: 1px dashed var(--text-meta); border-bottom: 1px dashed var(--text-meta); max-width: calc(100% - 80px); padding: 1rem; } .md-text .tag-plugin.reel >.content >.title { font-weight: 500; font-size: 1rem; } .md-text .tag-plugin.reel >.content >.meta { color: var(--text-p2); font-size: 0.75rem; font-weight: 500; } .md-text .tag-plugin.reel >.content >.body { overflow: auto; margin: calc(var(--gap-padding) - 4px); } .md-text .tag-plugin.reel >.content >.body::-webkit-scrollbar { height: 4px; width: 4px; } .md-text .tag-plugin.reel >.content >.body::-webkit-scrollbar-track-piece { background: transparent; } .md-text .tag-plugin.reel >.content >.body::-webkit-scrollbar-thumb { background: var(--text-meta); cursor: pointer; border-radius: 2px; } .md-text .tag-plugin.reel >.content >.body::-webkit-scrollbar-thumb:hover { background: var(--text-p3); } .md-text .tag-plugin.reel >.content >.body .main p { margin: 0; font-size: 0.875rem; } .md-text .tag-plugin.reel >.content >.date { color: var(--text-p2); font-size: 0.75rem; font-weight: 500; text-align: right; } .md-text .tag-plugin.reel >.content >.footer { color: var(--text-p4); font-size: 0.75rem; text-align: right; } .md-text .tag-plugin.reel>.content { position: relative; } .md-text .tag-plugin.reel>.content:before { content: ''; position: absolute; width: 4px; left: -4px; top: -16px; bottom: -16px; border-radius: 4px; background: var(--block); } .md-text .tag-plugin.reel>.content:after { content: ''; position: absolute; width: 4px; left: calc(100%); top: -16px; bottom: -16px; border-radius: 4px; background: var(--block); } .md-text .tag-plugin.reel>.content >.title { position: relative; } .md-text .tag-plugin.reel>.content >.title:before { content: ''; position: absolute; width: 4px; right: calc(-1rem - 4px); top: calc(-1rem - 6px); bottom: calc(100% + 1rem - 6px); border-radius: 4px; background: var(--accent); z-index: 1; } .md-text .tag-plugin.reel>.content >.title:after { content: ''; position: absolute; width: 4px; right: calc(-1rem - 4px); top: calc(100% + 1rem - 6px); bottom: calc(-1rem - 6px); border-radius: 4px; background: var(--accent); z-index: 1; } .md-text .tag-plugin.reel>.content >.footer { position: relative; } .md-text .tag-plugin.reel>.content >.footer:before { content: ''; position: absolute; width: 4px; left: calc(-1rem - 4px); top: calc(-1rem - 6px); bottom: calc(100% + 1rem - 6px); border-radius: 4px; background: var(--accent); } .md-text .tag-plugin.reel>.content >.footer:after { content: ''; position: absolute; width: 4px; left: calc(-1rem - 4px); top: calc(100% + 1rem - 6px); bottom: calc(-1rem - 6px); border-radius: 4px; background: var(--accent); } .md-text u { text-decoration: none; border-bottom: 2px solid var(--accent); } .md-text emp { width: fit-content; text-decoration: none; border-bottom: 4px dotted var(--accent); } .md-text wavy { text-decoration: underline wavy var(--accent); } .md-text del { color: var(--text-p3); text-decoration: line-through var(--text-p3); } .md-text kbd { border-radius: 4px; border: 1px solid #d2d2d2; border-bottom-width: 2px; background: var(--card); padding: 2px 4px 1px 4px; font-family: Menlo, Monaco, Consolas, system-ui, monospace, sans-serif; font-weight: 700; } .md-text psw { color: transparent; background: #a1a1a1; border-radius: 2px; transition: background 0.2s ease-out; -moz-transition: background 0.2s ease-out; -webkit-transition: background 0.2s ease-out; -o-transition: background 0.2s ease-out; margin: auto 2px; } .md-text psw:hover { color: inherit; background: none; } .md-text blur { filter: blur(4px); transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .md-text blur:hover { filter: blur(0); } .md-text sup, .md-text sub { color: var(--theme); line-height: 1; font-weight: 700; font-family: Menlo, Monaco, Consolas, system-ui, monospace, sans-serif; } .md-text h1 sup, .md-text h2 sup, .md-text h3 sup, .md-text h4 sup, .md-text h1 sub, .md-text h2 sub, .md-text h3 sub, .md-text h4 sub { font-size: 0.85rem; } .md-text .tag-plugin.link { margin: 1em auto; display: flex; justify-content: center; text-align: left; } .md-text .link-card { background: var(--card); display: inline-flex; justify-content: space-between; align-items: center; cursor: pointer; width: 300px; max-width: 100%; border-radius: 12px; transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } :root[data-theme="light"] .md-text .link-card { box-shadow: 0 1px 2px 0px rgba(0,0,0,0.1); } :root[data-theme="light"] .md-text .link-card:hover { box-shadow: 0 12px 20px -4px rgba(0,0,0,0.15); transform: translate3d(0, -2px, 0); } :root[data-theme="dark"] .md-text .link-card:hover { box-shadow: 0 0 4px -2px var(--theme), 0 0 24px -8px var(--theme); } :root:not([data-theme]) .md-text .link-card { box-shadow: 0 1px 2px 0px rgba(0,0,0,0.1); } :root:not([data-theme]) .md-text .link-card:hover { box-shadow: 0 12px 20px -4px rgba(0,0,0,0.15); transform: translate3d(0, -2px, 0); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .md-text .link-card:hover { box-shadow: 0 0 4px -2px var(--theme), 0 0 24px -8px var(--theme); } } .md-text .link-card.plain { flex-direction: row; align-items: center; } .md-text .link-card.rich { flex-direction: column; align-items: stretch; width: 460px; text-align: justify; } .md-text .link-card >.left { overflow: hidden; margin: 0.75rem 0 0.75rem 0.75rem; } .md-text .link-card >.left .title { font-size: 0.875rem; } .md-text .link-card >.left span+span { margin-top: 0.25rem; } .md-text .link-card >.right { width: 2.75rem; height: 2.75rem; margin: 0.75rem; overflow: hidden; flex-shrink: 0; } .md-text .link-card >.top { display: flex; margin: 1rem 1rem 0.75rem; overflow: hidden; max-width: calc(100% - 1rem * 2); align-items: center; } .md-text .link-card >.top .img { line-height: 0; height: 16px; width: 16px; border-radius: 16px; margin-right: 8px; background-repeat: no-repeat; background-size: contain; background-position: left center; } .md-text .link-card >.top span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .md-text .link-card >.bottom { margin: 0 1rem 1rem; } .md-text .link-card >.bottom .title { font-size: 1rem; margin-bottom: 0.5rem; } .md-text .link-card { line-height: 1.2; } .md-text .link-card .title { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; } .md-text .link-card .cap { flex-shrink: 0; color: var(--text-p3); } .md-text .link-card .link { line-height: 1.5; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .md-text .link-card .desc { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; } .md-text .link-card .img { border-radius: 4px; } .md-text .link-card span { margin: 0; display: block; } .md-text .link-card .title { font-weight: 500; color: var(--text-p1); } .md-text .tag-plugin.mark { padding: 1px 2px; border-radius: 2px; background: var(--theme-mark); color: var(--text); } .ds-mdrender p strong { font-size: 17px; font-weight: 500; color: var(--text); } .l_body[text-indent] article.content .ds-mdrender p:not([class]) { text-indent: 0; } .l_body[type=story] .md-text.content .ds-mdrender ol, .l_body[type=story] .md-text.content .ds-mdrender ul { margin-left: 0.5rem; } .tag-plugin.video-player { line-height: 0; margin: auto; } .tag-plugin.video-player video, .tag-plugin.video-player iframe { border-radius: 16px; box-shadow: 0 12px 16px -4px rgba(0,0,0,0.2); z-index: 1; background: var(--block); width: 100%; height: 100%; margin: 0; } .tag-plugin.navbar { display: inline-flex; } .tag-plugin.navbar a { box-sizing: border-box; padding: 0.25rem 0; color: inherit; position: relative; } .tag-plugin.navbar a+a { margin-left: 1rem; } .tag-plugin.navbar a:after { content: ''; position: absolute; border-radius: 2px; width: 100%; height: 2px; left: 0; bottom: 0; transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .tag-plugin.navbar a.active:after, .tag-plugin.navbar a:hover:after { background: var(--theme); } .md-text .tag-plugin.note { position: relative; padding: 0.25rem 1rem; border-radius: 16px; background: var(--theme-block); overflow: hidden; border: 1px solid var(--theme-border); color: var(--text-p1); } .md-text .tag-plugin.note >.title { --fsp: calc(17px - 1px); font-size: var(--fsp); line-height: 1.5; margin-top: var(--gap-p-compact); font-weight: 500; color: var(--text); } .md-text .tag-plugin.note >.body { margin-top: var(--gap-p-compact); margin-bottom: var(--gap-p-compact); } .md-text .tag-plugin.note >.body, .md-text .tag-plugin.note >.body p { --fsp: calc(17px - 2px); font-size: var(--fsp); line-height: 1.5; } .md-text .tag-plugin.note >.body:only-child { margin: calc(var(--gap-p) - 0.25rem) 0; } .md-text .tag-plugin.note[color] code { background: none; } .md-text .tag-plugin.note[child=codeblock] { padding: 0; background: var(--theme-codeblock); } .md-text .tag-plugin.note[child=codeblock] >.title, .md-text .tag-plugin.note[child=codeblock] >.body:only-child { margin-top: 0; } .md-text .tag-plugin.note[child=codeblock] >.body { margin-bottom: 0; } .md-text .tag-plugin.note[child=codeblock] .highlight { margin: 0; border: none; background: none; } .md-text .tag-plugin.note[child=codeblock] .highlight figcaption span { background: var(--theme-block); } .md-text .tag-plugin.note[child=codeblock] .highlight+.highlight { border-top: 1px dashed var(--theme-border); border-top-left-radius: 0; border-top-right-radius: 0; } .md-text .tag-plugin.note[child=tabs] >.body { margin: 0; } .md-text .tag-plugin.note[child=tabs] >.body >.tabs { margin-top: 0.5rem; } .md-text .tag-plugin.note[child=iframe] { padding: 0; } .md-text .tag-plugin.note[child=iframe] >.body { margin: 0; } .md-text .tag-plugin.note[child=iframe] >.body iframe { margin: 0; } .md-text .tag-plugin .tag-plugin.note { --gap-p: 1rem; } .l_body[type=story] .tag-plugin.note .title p:not([class]) { text-indent: 0; } .md-text .tag-plugin.okr { position: relative; border-radius: 16px; background: var(--theme-block); border: 1px solid var(--theme-border); overflow: hidden; color: var(--text-p1); line-height: 1.5; } .md-text .tag-plugin.okr .o .title { font-size: 0.9375rem; } .md-text .tag-plugin.okr .o .note { font-size: 0.875rem; } .md-text .tag-plugin.okr .o .note p { font-size: 0.875rem; } .md-text .tag-plugin.okr .kr .title { font-size: 0.875rem; } .md-text .tag-plugin.okr .kr .note { font-size: 0.875rem; } .md-text .tag-plugin.okr .kr .note p, .md-text .tag-plugin.okr .kr .note li, .md-text .tag-plugin.okr .kr .note .tag-plugin { font-size: 0.875rem; } .md-text .tag-plugin.okr .title { font-weight: 600; display: block; } .md-text .tag-plugin.okr .note { font-weight: 400; display: block; margin-top: 0.5rem; } .md-text .tag-plugin.okr .note >p, .md-text .tag-plugin.okr .note >ul { margin-top: 0.25rem; margin-bottom: 0.25rem; } .md-text .tag-plugin.okr .note >.tag-plugin { margin-top: 0.25rem; margin-bottom: 0.25rem; } .md-text .tag-plugin.okr .note >*:last-child { margin-bottom: 0; } .md-text .tag-plugin.okr .status { font-size: 0.75rem; padding: 2px 4px; border-radius: 2px; } .md-text .tag-plugin.okr .okr-item.o { border-bottom: 4px solid var(--block-border); } .md-text .tag-plugin.okr .okr-item.kr+.okr-item.kr { border-top: 1px dashed var(--block-border); } .tag-plugin.okr .okr-item { display: grid; grid-template-columns: 3.2rem auto 100px; grid-column-gap: 0.75rem; padding: 1rem; } .tag-plugin.okr .okr-item .okr-left .title { background: var(--card); border-radius: 1rem; text-align: center; padding: 0 0.5rem; } .tag-plugin.okr .okr-item .labels { display: flex; justify-content: space-between; align-items: flex-start; position: relative; flex-wrap: wrap; } .tag-plugin.okr .okr-item .labels .label { background: var(--theme-block); color: var(--text-p1); } .tag-plugin.okr .okr-item .progress { margin-top: 4px; height: 4px; border-radius: 2px; position: relative; background: var(--card); } .tag-plugin.okr .okr-item .progress .fill { position: absolute; background: var(--theme); border-radius: 2px; top: 0; left: 0; bottom: 0; } .tag-plugin.okr .okr-item .progress .fill:before { content: ''; position: absolute; top: -4px; bottom: -4px; right: -4px; width: 8px; height: 12px; border-radius: 8px; background: #fff; box-shadow: 0 0 2px 0px rgba(0,0,0,0.04), 0 0 8px 0px rgba(0,0,0,0.04); } .tag-plugin.okr .okr-item .progress .fill:after { content: ''; position: absolute; top: -2px; bottom: -2px; right: -2px; width: 4px; height: 8px; border-radius: 4px; background: var(--theme); } @media screen and (max-width: 667px) { .tag-plugin.okr .okr-item { grid-template-columns: 2.8rem auto 50px; grid-column-gap: 0.5rem; padding: 0.5rem; } .tag-plugin.okr .okr-item .okr-left .title { padding: 0 0.25rem; } .tag-plugin.okr .okr-item .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .tag-plugin.note blockquote, .tag-plugin.folding blockquote { border-top-left-radius: 0; border-bottom-left-radius: 0; background: none; padding-top: 0; padding-bottom: 0; } .md-text .tag-plugin.poetry { display: flex; flex-direction: column; align-items: center; text-align: left; --fsp: 17px; } .md-text .tag-plugin.poetry .content >.title { font-weight: 500; margin-top: var(--gap-p); } .md-text .tag-plugin.poetry .content >.meta { color: var(--text-p2); --fsp: calc(17px - 3px); font-size: var(--fsp); font-weight: 500; } .md-text .tag-plugin.poetry .content >.meta span+span { margin-left: 4px; } .md-text .tag-plugin.poetry .content >.body { margin: var(--gap-p) 0; border-top: 1px dashed var(--block-border); border-bottom: 1px dashed var(--block-border); line-height: 2; } .md-text .tag-plugin.poetry .content >.footer { font-style: italic; color: var(--text-p4); margin: var(--gap-p) 0; --fsp: calc(17px - 3px); font-size: var(--fsp); } .md-text .tag-plugin.poetry .content { padding-left: 1rem; position: relative; } .md-text .tag-plugin.poetry .content:before { content: ''; position: absolute; width: 4px; left: -4px; top: 4px; bottom: 4px; border-radius: 4px; background: var(--block); } .md-text .tag-plugin.poetry .content >.title { position: relative; } .md-text .tag-plugin.poetry .content >.title:before { content: ''; position: absolute; width: 4px; left: calc(-1rem - 4px); top: 6px; bottom: 6px; border-radius: 4px; background: var(--accent); } .md-text .tag-plugin.quot { text-align: center; align-items: center; display: flex; flex-direction: column; --gap-p: 2rem; margin: var(--gap-p) 1rem; } .md-text .tag-plugin.quot .content { display: flex; align-items: center; border-bottom: none; font-weight: 700; padding: 0 24px; line-height: 1.2; } @media screen and (max-width: 500px) { .md-text .tag-plugin.quot .content { padding: 0 20px; } } .md-text .tag-plugin.quot .content { position: relative; } .md-text.content .tag-plugin.quot { text-wrap: balance; } .md-text.content .tag-plugin.quot h1, .md-text.content .tag-plugin.quot h2 { font-size: calc(17px + 11px); font-weight: 900; padding: 4px 32px 0; } @media screen and (max-width: 500px) { .md-text.content .tag-plugin.quot h1, .md-text.content .tag-plugin.quot h2 { padding: 4px 24px 0; } } .md-text.content .tag-plugin.quot h3, .md-text.content .tag-plugin.quot h4, .md-text.content .tag-plugin.quot h5, .md-text.content .tag-plugin.quot h6 { font-size: calc(17px + 7px); } .md-text.content .tag-plugin.quot p { font-size: calc(var(--fsp) + 2px); color: var(--text); } .md-text .tag-plugin.quot img, .md-text .tag-plugin.quot svg { height: 1.5em; display: inline-block; color: var(--accent); border-radius: 0; flex-shrink: 0; } .md-text .tag-plugin.quot span.text { margin: 0 0.5rem; padding-top: 1px; } .md-text .tag-plugin.quot span.empty { padding: 0 8px; } .md-text .tag-plugin.quot.p .content { transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .md-text .tag-plugin.quot.p .content .text { position: relative; } .md-text .tag-plugin.quot.p .content .text:after { content: ""; position: absolute; --width: 90%; width: var(--width); height: 4px; left: calc(50% - var(--width) / 2); bottom: -8px; border-radius: 100%; background: var(--text); opacity: 0.1; filter: blur(2px); transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .md-text .tag-plugin.quot.p:hover .content { transform: translateY(-4px) scale(1.05); } .md-text .tag-plugin.quot.p:hover .content .text:after { opacity: 0.2; filter: blur(8px); transform: translateY(4px) scale(1.2, 1.5); } .tag-plugin.blockquote { position: relative; } .tag-plugin.blockquote p:not([class]) { text-indent: 0 !important; } .tag-plugin.blockquote[indent='true'] p:not([class]) { text-indent: calc(var(--fsp) * 2) !important; } .tag-plugin.ds-rating { text-align: center; } .tag-plugin.ds-rating .header { margin: 0.5rem; font-weight: 500; color: var(--text); } .tag-plugin.ds-rating .body { display: flex; align-items: center; justify-content: center; } .tag-plugin.ds-rating .body button { color: var(--text-p1); font-size: 1rem; padding: 0; border-radius: 8px; display: flex; transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; color: var(--theme); opacity: 0.2; } .tag-plugin.ds-rating .body button svg { font-size: 1.5em; margin: 4px; } .tag-plugin.ds-rating .body button img { margin: 4px; } .tag-plugin.ds-rating .body button:hover, .tag-plugin.ds-rating .body button.hover, .tag-plugin.ds-rating .body button.preview { opacity: 1; } .tag-plugin.ds-rating .body span { line-height: 1; font-size: 1em; margin: 4px; } .tag-plugin.ds-rating .footer { margin: 0.5rem; color: var(--text-p3); font-weight: 500; font-size: 0.75rem; } .tag-plugin.ds-rating.rated { pointer-events: none; } .sites-wrap .grid-box { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-gap: 1rem 1rem; } .sites-wrap .grid-box .grid-cell { aspect-ratio: 1.5; } .sites-wrap .site-card .card-link { width: 100%; display: flex; flex-direction: column; position: relative; } .sites-wrap .site-card .card-link .lazy-box { border-radius: 12px; box-shadow: 0 1px 2px 0px rgba(0,0,0,0.2); overflow: hidden; } .sites-wrap .site-card .card-link .lazy-box >img { object-fit: cover; aspect-ratio: 1.5; width: 100%; height: 100%; } .sites-wrap .site-card .card-link .info { margin-top: 0.5rem; line-height: 1.2; position: relative; } .sites-wrap .site-card .card-link .info .lazy-box { float: left; margin-right: 8px; margin-top: 2px; border-radius: 100%; } .sites-wrap .site-card .card-link .info .lazy-box >img { width: 28px; height: 28px; } .sites-wrap .site-card .card-link .info span { display: block; } .sites-wrap .site-card .card-link .info .title { font-weight: 500; color: var(--text-p1); font-size: 0.875rem; margin-top: 1px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; } .sites-wrap .site-card .card-link .info .desc { font-size: 10px; margin-top: 2px; word-wrap: break-word; color: var(--text-p3); display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; } .sites-wrap .site-card .card-link .labels { position: absolute; top: 2px; right: 2px; display: flex; flex-wrap: wrap; justify-content: flex-end; pointer-events: none; user-select: none; opacity: 1; transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .sites-wrap .site-card .card-link .labels .label { font-weight: 500; color: #fff; font-size: 12px; padding: 3px 6px 2px 6px; margin: 2px; line-height: 1; border-radius: 16px; } .sites-wrap .site-card .card-link >.lazy-box { transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; -moz-transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; -webkit-transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; -o-transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; } .sites-wrap .site-card .card-link:hover .labels { opacity: 0; transform: translateY(-4px); } .sites-wrap .site-card .card-link:hover >.lazy-box { box-shadow: 0 12px 20px -4px rgba(0,0,0,0.15); transform: translate3d(0, -2px, 0); } .tag-plugin.tabs { position: relative; margin-top: 1rem; margin-bottom: 1rem; display: flex; flex-direction: column; } .tag-plugin.tabs[align=left] { align-items: flex-start; } .tag-plugin.tabs[align=left] .nav-tabs, .tag-plugin.tabs[align=left] .tab-content { align-self: flex-start; } .tag-plugin.tabs[align=center] { align-items: center; } .tag-plugin.tabs[align=center] .nav-tabs, .tag-plugin.tabs[align=center] .tab-content { align-items: center; } .tag-plugin.tabs[align=right] { align-items: flex-end; } .tag-plugin.tabs[align=right] .nav-tabs, .tag-plugin.tabs[align=right] .tab-content { align-self: flex-end; } .tag-plugin.tabs .nav-tabs { display: flex; align-self: center; overflow: scroll visible; max-width: 100%; white-space: nowrap; margin: 0 !important; line-height: 1.5; position: relative; padding: 8px 0; } .tag-plugin.tabs .nav-tabs::-webkit-scrollbar { height: 0; width: 0; } .tag-plugin.tabs .nav-tabs::-webkit-scrollbar-track-piece { background: transparent; } .tag-plugin.tabs .nav-tabs::-webkit-scrollbar-thumb { background: var(--text-meta); cursor: pointer; border-radius: 0; } .tag-plugin.tabs .nav-tabs::-webkit-scrollbar-thumb:hover { background: var(--text-p3); } .tag-plugin.tabs .nav-tabs:after { content: ''; position: absolute; background: var(--block-border); width: 100%; height: 2px; bottom: 0; left: 0; border-radius: 2px; } .tag-plugin.tabs .nav-tabs .tab { list-style-type: none; } .tag-plugin.tabs .nav-tabs .tab a { display: block; cursor: pointer; padding: 0.25rem 0.75rem; --fsp: calc(17px - 3px); font-size: var(--fsp); line-height: inherit; font-weight: 500; color: var(--text-p3); border-radius: 4px; position: relative; margin: 0 2px; } .tag-plugin.tabs .nav-tabs .tab a:hover { color: var(--text-p1); background: var(--block-border); } .tag-plugin.tabs .nav-tabs .tab a i { pointer-events: none; } .tag-plugin.tabs .nav-tabs .tab.active a { cursor: default; color: var(--text-p1); background: var(--card); box-shadow: 0 0 2px 0px rgba(0,0,0,0.04), 0 0 8px 0px rgba(0,0,0,0.04); } .tag-plugin.tabs .nav-tabs .tab.active a:after { content: ''; z-index: 1; position: absolute; background: var(--theme); height: 2px; bottom: -8px; left: 0.75rem; right: 0.75rem; border-radius: 2px; } .tag-plugin.tabs .tab-content { max-width: 100%; text-align: justify; margin-top: 0.5rem; display: flex; flex-direction: column; } .tag-plugin.tabs .tab-content .tab-pane { display: block; max-width: 100%; } .tag-plugin.tabs .tab-content .tab-pane:not(.active) { height: 0; overflow: hidden; } .tag-plugin.tabs .tab-content .tab-pane.active { height: auto; } .tag-plugin.tabs .tab-content:has(.grid-box), .tag-plugin.tabs .tab-pane:has(.grid-box) { width: 100%; } .tag-plugin.timeline { position: relative; padding-left: 16px; } .tag-plugin.timeline p>img { border-radius: 8px; } .tag-plugin.timeline:before { content: ''; position: absolute; z-index: 0; background: var(--block); width: 4px; left: 0px; border-radius: 8px; top: 0.5rem; bottom: 0; } .tag-plugin.timeline:has(.loading-wrap) { padding-left: 0; } .tag-plugin.timeline:has(.loading-wrap):before { display: none; } .l_body[type=story] .md-text.content .tag-plugin.timeline ol, .l_body[type=story] .md-text.content .tag-plugin.timeline ul { margin-left: 0; } .l_body[type=story] .md-text.content .tag-plugin.timeline p>img { border-radius: 8px; } .tag-plugin.timeline .timenode { position: relative; display: flex; flex-direction: column; align-items: flex-start; box-sizing: border-box; max-width: 100%; } .tag-plugin.timeline .timenode >.header, .tag-plugin.timeline .timenode >.body { box-sizing: border-box; max-width: 100%; } .tag-plugin.timeline .timenode[highlight] .header:before { background: var(--theme); } .tag-plugin.timeline .timenode+.timenode { margin-top: 1rem; } .tag-plugin.timeline .timenode:hover .header span { color: var(--text-p1); } .tag-plugin.timeline .timenode:hover .header:before { background: var(--theme); height: 16px; top: calc(50% - 0.5 * 16px); transform: scale(1); } .tag-plugin.timeline .timenode .header { display: flex; align-items: center; position: relative; margin: 0.25rem 0; font-size: 0.8125rem; } .tag-plugin.timeline .timenode .header a.user-info span { font-weight: 600; } .tag-plugin.timeline .timenode .header .user-info { display: flex; align-items: center; font-size: 0.8125rem; font-weight: 500; color: var(--text-p1); margin-right: 8px; line-height: 1; border-radius: 16px; } .tag-plugin.timeline .timenode .header .user-info img { background: #fff; height: 16px; border-radius: 16px; display: inline; margin: 0 4px 0 0; object-fit: contain; } .tag-plugin.timeline .timenode .header, .tag-plugin.timeline .timenode .header span { font-weight: 500; color: var(--text-p3); line-height: 1; } .tag-plugin.timeline .timenode .header:before { content: ''; position: absolute; left: -16px; width: 4px; border-radius: 12px; height: 4px; top: calc(50% - 0.5 * 4px); background: var(--text-meta); transition: background 0.2s ease-out, height 0.2s ease-out, top 0.2s ease-out, transform 0.2s ease-out; -moz-transition: background 0.2s ease-out, height 0.2s ease-out, top 0.2s ease-out, transform 0.2s ease-out; -webkit-transition: background 0.2s ease-out, height 0.2s ease-out, top 0.2s ease-out, transform 0.2s ease-out; -o-transition: background 0.2s ease-out, height 0.2s ease-out, top 0.2s ease-out, transform 0.2s ease-out; transform: scale(2); } .tag-plugin.timeline .body { background: var(--card); border-radius: 16px; border-top-left-radius: 2px; padding: 0.5rem 1rem; margin-top: 4px; box-shadow: 0 1px 4px 0px rgba(0,0,0,0.02), 0 2px 8px 0px rgba(0,0,0,0.02); } .tag-plugin.timeline .body p { --fsp: calc(17px - 1px); } .tag-plugin.timeline .body p img { display: block; } .tag-plugin.timeline .body:empty { display: none; } .tag-plugin.timeline .body p, .tag-plugin.timeline .body .highlight, .tag-plugin.timeline .body ol, .tag-plugin.timeline .body ul, .tag-plugin.timeline .body .tag-plugin { margin: 0.5rem 0; } .tag-plugin.timeline .body .tag-plugin.copy { width: 240px; } .tag-plugin.timeline[data-api] a.body { display: block; color: var(--text-p1); line-height: 1.25; padding: 0.75rem 1rem; --fsp: calc(17px - 1px); font-size: var(--fsp); } .tag-plugin.timeline[data-api] .body p.title { font-weight: 700; margin: 0.5rem 0 0.75rem; line-height: 1.25; border-bottom: 1px solid var(--block-border); } .tag-plugin.timeline[data-api] .body p.title:only-child { margin-bottom: 0.5rem; font-weight: 500; } .tag-plugin.timeline[data-api] .body p.title a { color: inherit; text-decoration: none; padding-bottom: 0.75rem; display: inline-block; transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .tag-plugin.timeline[data-api] .body p.title a:hover { color: var(--accent); } .tag-plugin.timeline[data-api] .body >p:first-child:not([class]) { font-size: 1rem; margin: 0.25rem 0 0.5rem; } .tag-plugin.timeline[data-api] .body a:has(img):after { display: none; } .tag-plugin.timeline[data-api] .body a img { margin: 0 auto; } .tag-plugin.timeline[data-api] .body img { margin: 0.5rem auto; } .tag-plugin.timeline[data-api] .body .lazy-box { margin: 0.5rem 0; border-radius: 16px; } .tag-plugin.timeline[data-api] .body .lazy-box >img { margin: 0 auto; } .tag-plugin.timeline[data-api] .body pre code { font-size: 0.8125rem; } aside .tag-plugin.timeline[data-api] .body .lazy-box { border-radius: 8px; } .tag-plugin.timeline[data-api] .body .footer { margin: 0 0 -0.5rem; padding: 0.5rem 0 1rem; user-select: none; font-weight: 500; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; } .tag-plugin.timeline[data-api] .body .footer span { line-height: 1.8; } .tag-plugin.timeline[data-api] .body .footer:empty { display: none; } .tag-plugin.timeline[data-api] .body .footer .flex { display: flex; flex-wrap: wrap; font-size: 0.8125rem; align-items: stretch; } .tag-plugin.timeline[data-api] .body .footer .left+.right { margin-left: 4px; } .tag-plugin.timeline[data-api] .body .footer .item { border-width: 1px; border-style: solid; margin: 2px; border-radius: 4px; padding: 0 0.5rem; display: flex; align-items: center; border-color: var(--link); } .tag-plugin.timeline[data-api] .body .footer .item:first-child { margin-left: 0; } .tag-plugin.timeline[data-api] .body .footer .item:last-child { margin-right: 0; } .tag-plugin.timeline[data-api] .body .footer a.item { background: var(--block); border-color: var(--block-border); color: inherit; } .tag-plugin.timeline[data-api] .body .footer a.item:hover { background: var(--block-border); } .tag-plugin.timeline[data-api] .body .footer .reaction { border-color: var(--block); } .tag-plugin.timeline .body blockquote { background: none; border-radius: 0; padding: 0 0.5rem; margin: 0.75rem 0; } .tag-plugin.timeline .body blockquote p { --fsp: calc(17px - 2px); margin: 0.25rem; } .tag-plugin.timeline .body { line-height: 1.5; } .tag-plugin.timeline .body h1, .tag-plugin.timeline .body h2 { font-size: 1.25rem; margin: 1rem 0; line-height: 1.2; } .tag-plugin.timeline .body h3, .tag-plugin.timeline .body h4 { font-size: 1rem; margin: 0.75rem 0; line-height: 1.2; } .tag-plugin.timeline .body h5, .tag-plugin.timeline .body h6 { font-size: 0.9375rem; margin: 0.5rem 0; line-height: 1.2; } .tag-plugin.timeline.ds-memos .body p:first-child { margin-top: 2px; } .tag-plugin.timeline.ds-memos .body p:last-child { margin-bottom: 2px; } .tag-plugin.timeline.ds-memos .body img { margin: 0.5rem 0; max-height: 128px; cursor: zoom-in; } .tag-plugin.timeline.ds-memos .body .tag-plugin.image { display: flex; } .tag-plugin.timeline.ds-memos .body .tag-plugin.image .image-bg+.image-bg { margin-left: 4px; } details.toc { background: var(--block); border: 1px solid var(--block-border); border-radius: 16px; overflow: hidden; color: var(--text-p2); } details.toc summary { cursor: pointer; padding: 0 0.5rem; line-height: 2; color: var(--text-p2); font-size: 0.8125rem; font-weight: 500; } details.toc summary:hover { background: var(--block-border); } details.toc >div.body { margin: var(--gap-p) 1rem 1rem; } details.toc[open] >summary { border-bottom: 1px solid transparent; } details.toc[open] >summary:hover { border-bottom-color: var(--block-border); } details.toc[open] >div.body section+section { margin-top: 1rem; } details.toc[open] >div.body section .header { line-height: 2; font-weight: 500; } details.toc[open] >div.body section .header+.doc_tree { margin-top: 0; } @media screen and (max-width: 667px) { .tag-plugin.toc[display=mobile] { display: block !important; } } .tag-plugin.ds-vote { text-align: center; } .tag-plugin.ds-vote .header { margin: 0.5rem; font-weight: 500; color: var(--text); } .tag-plugin.ds-vote .body { width: 50%; min-width: 240px; max-width: 320px; margin: 1rem auto; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2rem; } .tag-plugin.ds-vote .body button { color: var(--text-p1); font-size: 1rem; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.5rem; background: var(--block); border-radius: 8px; font-weight: 500; transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; color: var(--theme); background: var(--theme-a10); } .tag-plugin.ds-vote .body button svg { font-size: 1.5em; margin: 8px; } .tag-plugin.ds-vote .body button span { line-height: 1; font-size: 1em; margin-bottom: 4px; } @media (prefers-color-scheme: dark) { .tag-plugin.ds-vote .body button { background: var(--theme-a20); } } .tag-plugin.ds-vote .body button.vote-up { --hue: 128.38235294117646deg; --sat: 53.96825396825397%; --light: 50.588235294117645%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); } .tag-plugin.ds-vote .body button.vote-down { --hue: 4.105263157894738deg; --sat: 89.62264150943398%; --light: 58.43137254901961%; --alpha: 1; --theme: hsla(var(--hue) var(--sat) var(--light) / 1); --theme-a10: hsla(var(--hue) var(--sat) var(--light) / 0.1); --theme-a20: hsla(var(--hue) var(--sat) var(--light) / 0.2); --theme-a30: hsla(var(--hue) var(--sat) var(--light) / 0.3); } .tag-plugin.ds-vote .body button:hover, .tag-plugin.ds-vote .body button.active { color: #fff; background: var(--theme); } .tag-plugin.ds-vote.voted { pointer-events: none; } .l_left footer.footer { margin: 0.5rem var(--gap-max) 1rem; } .social-wrap { display: grid; grid-gap: 0.25rem 0.25rem; grid-template-columns: repeat(auto-fill, 32px); text-align: center; } .social-wrap .social { line-height: 0; display: inline-block; padding: 6px; border-radius: 32px; filter: grayscale(100%); overflow: hidden; background: transparent; transition: box-shadow 0.2s ease-out, background 0.2s ease-out, transform 0.2s ease-out; -moz-transition: box-shadow 0.2s ease-out, background 0.2s ease-out, transform 0.2s ease-out; -webkit-transition: box-shadow 0.2s ease-out, background 0.2s ease-out, transform 0.2s ease-out; -o-transition: box-shadow 0.2s ease-out, background 0.2s ease-out, transform 0.2s ease-out; } .social-wrap .social:hover { z-index: 1; filter: unset; background: var(--bg-a100); } .social-wrap .social img { border-radius: 2px; } .logo-wrap { display: flex; align-items: center; overflow: hidden; min-height: 48px; } .logo-wrap img.avatar { object-fit: cover; } .logo-wrap img.icon { object-fit: contain; } .logo-wrap .icon { width: 48px; height: 48px; margin-right: 1rem; border-radius: 4px; flex-shrink: 0; } .logo-wrap a { color: inherit; display: flex; align-items: center; } .logo-wrap a.avatar { display: block; position: relative; width: 48px; height: 48px; flex-shrink: 0; border-radius: 48px; overflow: hidden; margin-right: 1rem; } .logo-wrap a.avatar div.bg { width: 100%; height: 100%; background-size: cover; } .logo-wrap a.avatar img.avatar { margin: 2px; width: calc(100% - 2 * 2px); height: calc(100% - 2 * 2px); border-radius: calc(100% - 2 * 2px); } .logo-wrap a.avatar div.bg { transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -webkit-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; position: absolute; opacity: 0 !important; z-index: -1; } @-moz-keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .logo-wrap a.avatar:hover div.bg { opacity: 1 !important; animation: spin infinite 4s; animation-timing-function: linear; } .logo-wrap a.title { font-size: 1.5rem; font-weight: 900; color: inherit; line-height: 1.2; display: block; position: relative; } .logo-wrap a.title .main { color: var(--text); } .logo-wrap a.title .sub { color: var(--text-p1); transition: opacity 0.2s ease-out, transform 0.2s ease-out; -moz-transition: opacity 0.2s ease-out, transform 0.2s ease-out; -webkit-transition: opacity 0.2s ease-out, transform 0.2s ease-out; -o-transition: opacity 0.2s ease-out, transform 0.2s ease-out; white-space: nowrap; } .logo-wrap a.title .hover { position: absolute; bottom: 0; transform: translateY(8px); overflow: visible; } .logo-wrap a.title:hover .normal { opacity: 0; transform: translateY(-8px); } .logo-wrap a.title:hover .hover { transform: translateY(0); opacity: 1 !important; } .nav-area .menu { width: 100%; display: grid; margin: 8px 0; grid-template-columns: repeat(4, 1fr); grid-gap: 8px; } .nav-area .menu::-webkit-scrollbar { display: none; } .nav-area .menu::-webkit-scrollbar-track-piece { background: transparent; } .nav-area .menu::-webkit-scrollbar-thumb { display: none; } .nav-area .menu .nav-item { box-sizing: border-box; width: 100%; min-height: 40px; border-radius: 8px; font-size: 0.9375rem; font-weight: 500; color: var(--text-p3); text-align: center; background: var(--bg-a50); transition: background 0.2s ease-out; -moz-transition: background 0.2s ease-out; -webkit-transition: background 0.2s ease-out; -o-transition: background 0.2s ease-out; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; } .nav-area .menu .nav-item img, .nav-area .menu .nav-item svg { height: 28px; object-fit: contain; filter: grayscale(50%) brightness(0.8) opacity(0.5); transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .nav-area .menu .nav-item span { text-overflow: ellipsis; word-break: keep-all; } .nav-area .menu .nav-item.active, .nav-area .menu .nav-item:hover { color: var(--text-p1); background: var(--bg-a100); } .nav-area .menu .nav-item.active img, .nav-area .menu .nav-item:hover img, .nav-area .menu .nav-item.active svg, .nav-area .menu .nav-item:hover svg { filter: unset; } .nav-area .menu .nav-item.active:after { content: ''; position: absolute; width: 16px; height: 2px; left: 50%; transform: translateX(-50%); border-radius: 2px; bottom: 2px; background: currentColor; } .nav-area { margin: 1rem var(--gap-margin) 0; } .search-wrapper { padding-bottom: 32px; width: 100%; border-radius: 12px; } .search-wrapper >.search-form { position: sticky; top: 0; height: 40px; display: flex; flex-direction: row; align-items: center; transition: 0.38s ease-out; z-index: 1; border-radius: 12px; color: var(--text); } .search-wrapper >.search-form >* { z-index: 1; } .search-wrapper >.search-form:before { position: absolute; content: ''; height: 2px; bottom: 0; left: 1rem; right: 1rem; border-radius: 8px; background: var(--bg-a100); z-index: 0; transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } @media screen and (prefers-color-scheme: dark) { .search-wrapper >.search-form:before { background: var(--bg-a20); } } .search-wrapper >.search-form:hover:before, .search-wrapper >.search-form:has(input:focus):before, .search-wrapper >.search-form:has(input:not(:placeholder-shown)):before { background: var(--bg-a100); height: 100%; left: 0; right: 0; } .search-wrapper .search-input { width: 100%; box-sizing: border-box; font-family: system-ui, "Microsoft Yahei", "Segoe UI", Arial, sans-serif; font-size: 0.875rem; padding: 12px 0; color: var(--text); } .search-wrapper .search-input::placeholder { color: var(--text-p3); } @media screen and (prefers-color-scheme: dark) { .search-wrapper .search-input::placeholder { color: var(--text-p2); } } .search-wrapper .search-button { border-radius: 8px; display: flex; align-items: center; height: 40px; } .search-wrapper .search-button svg { height: 1rem; width: calc((var(--side-content-width) + var(--gap-padding) * 2 - 3 * 8px) * 0.25); color: var(--text-p2); fill: currentColor; } .search-wrapper .search-button svg path[p-id="1562"] { color: var(--theme); } .search-wrapper[searching='true'] .search-button path[p-id="1562"] { color: #3dc550; } .search-wrapper.noresult[searching='true'] .search-button path[p-id="1562"] { color: #f44336; } .search-wrapper .search-no-result { display: none; color: var(--text-p1); text-align: center; font-size: 0.875rem; padding: 2rem; margin: 8px 0; background: var(--bg-a20); border-radius: 12px; } .search-wrapper #search-result { max-height: 60vh; overflow: auto; scrollbar-width: none; border-radius: 8px; } .search-wrapper #search-result::-webkit-scrollbar { height: 0; width: 0; } .search-wrapper #search-result::-webkit-scrollbar-track-piece { background: transparent; } .search-wrapper #search-result::-webkit-scrollbar-thumb { background: var(--text-meta); cursor: pointer; border-radius: 0; } .search-wrapper #search-result::-webkit-scrollbar-thumb:hover { background: var(--text-p3); } .search-wrapper #search-result:empty { display: none; } .search-wrapper #search-result .search-result-list { padding: 0; margin: 8px 0; list-style-type: none; } .search-wrapper #search-result li a { display: block; background: var(--bg-a20); line-height: 1.2; padding: 0.75rem 1rem; border-radius: 12px; transition: background 0.2s ease-out; -moz-transition: background 0.2s ease-out; -webkit-transition: background 0.2s ease-out; -o-transition: background 0.2s ease-out; } .search-wrapper #search-result li a:hover { background: var(--bg-a100); } .search-wrapper #search-result li+li { margin-top: 8px; } .search-wrapper #search-result .search-result-title { color: var(--text-p1); font-weight: 700; font-size: 0.9375rem; } .search-wrapper #search-result .search-result-content { overflow: hidden; color: var(--text-p3); margin: 4px 0 0; max-height: 13em; text-align: justify; font-size: 0.8125rem; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; } .search-wrapper #search-result .search-keyword { color: #f44336; border-bottom: 1px dashed #f44336; font-weight: bold; filter: grayscale(25%); } .search-wrapper.noresult[searching='true'] .search-no-result { display: block; margin-bottom: 8px; } .l_left { margin: calc(var(--gap-margin) * 2) var(--gap-margin); max-height: calc(100vh - var(--gap-margin) * 2 - 96px); border-radius: 24px; } .l_left .header { margin: var(--gap-max) var(--gap-margin) 0; } .l_right { margin: calc(var(--gap-margin) * 2) 0; border-radius: 24px; } @media screen and (min-width: 2048px) { .l_left { margin-left: auto; margin-right: calc(2 * var(--gap-max)); } .l_right { margin-left: var(--gap-max); margin-right: auto; } } .l_left .sidebg { pointer-events: none; position: absolute; --inset: 0; top: var(--inset); bottom: var(--inset); left: var(--inset); right: var(--inset); border-radius: 24px; --saturate: 400%; --blur-px: 100px; --background-opacity: 1; background-position: center; background-size: cover; --inset: 32px; --background-opacity: 0.8; background-image: url("https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.13/image/sidebar-bg1@small.jpg"); filter: saturate(var(--saturate)) blur(var(--blur-px)) opacity(var(--background-opacity)); } @media screen and (prefers-color-scheme: dark) { .l_left .sidebg { --background-opacity: 0.6; } } .l_left .leftbar-container { height: calc(100vh - var(--gap-margin) * 2 - 96px); display: flex; flex-direction: column; word-break: break-all; text-align: justify; border-radius: 24px; overflow: hidden; } .l_left .leftbar-container >.widgets { border-radius: 8px; mask: linear-gradient(#fff, 90%, transparent); -webkit-mask: linear-gradient(#fff, 90%, transparent); } .l_left .leftbar-container >* { z-index: 1; } .l_left .leftbar-container:before, .l_left .leftbar-container:after { position: absolute; pointer-events: none; content: ''; top: 0; bottom: 0; left: 0; right: 0; border-radius: 24px; } @media screen and (min-width: 667px) { .l_left .leftbar-container:before { background: rgba(255,255,255,0.5); box-shadow: inset 0 0 32px 1px rgba(255,255,255,0.5); backdrop-filter: saturate(300%); -webkit-backdrop-filter: saturate(300%); mask: linear-gradient(#000, rgba(0,0,0,0.5), 70%, transparent, 90%, transparent); -webkit-mask: linear-gradient(#000, rgba(0,0,0,0.5), 70%, transparent, 90%, transparent); } } @media screen and (prefers-color-scheme: dark) { .l_left .leftbar-container:before { background: rgba(255,255,255,0.05); box-shadow: inset 0 0 32px 1px rgba(255,255,255,0.1); } } @media screen and (max-width: 667px) { .l_left { overflow: hidden; background: var(--bg-a100); } .l_left .sidebg { --inset: 0; --saturate: 300%; } .l_left .leftbar-container:after { background: var(--bg-a20); } } .widget-body .linklist { display: grid; grid-gap: 8px; } .linklist .link { border-radius: 8px; color: var(--text-p2); min-height: 32px; padding: 0 4px; transition: background 0.2s ease-out; -moz-transition: background 0.2s ease-out; -webkit-transition: background 0.2s ease-out; -o-transition: background 0.2s ease-out; display: flex; justify-content: center; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .linklist .link.active { background: var(--bg-a50); } .linklist .link.active svg, .linklist .link.active img { filter: unset; } .linklist .link span { padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .linklist .link svg, .linklist .link img { padding: 0 2px; max-height: 18px; width: auto; filter: grayscale(100%) brightness(0.8) opacity(0.8); transition: filter 0.2s ease-out; -moz-transition: filter 0.2s ease-out; -webkit-transition: filter 0.2s ease-out; -o-transition: filter 0.2s ease-out; flex-shrink: 0; } .linklist .link svg:not([class='active-icon']), .linklist .link img:not([class='active-icon']) { color: var(--theme); } .widget-body .linklist.left { grid-gap: 2px; } .linklist.left .link { justify-content: space-between; padding: 0 16px; } .linklist.left .link img, .linklist.left .link svg { width: 1em; height: 1em; transform: scale(1.2); } .linklist.left .link span { padding: 0 8px; } .linklist .link:hover { background: var(--bg-a100); } .linklist .link:hover svg { filter: unset; } .widget-wrapper.ghrepo .repo { display: block; padding: 0.75rem 0.5rem; color: var(--text-p2); background: var(--card); border-radius: 12px; transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } :root[data-theme="light"] .widget-wrapper.ghrepo .repo { box-shadow: 0 1px 2px 0px rgba(0,0,0,0.1); } :root[data-theme="light"] .widget-wrapper.ghrepo .repo:hover { box-shadow: 0 12px 20px -4px rgba(0,0,0,0.15); transform: translate3d(0, -2px, 0); } :root[data-theme="dark"] .widget-wrapper.ghrepo .repo:hover { box-shadow: 0 0 4px -2px var(--theme), 0 0 24px -8px var(--theme); } :root:not([data-theme]) .widget-wrapper.ghrepo .repo { box-shadow: 0 1px 2px 0px rgba(0,0,0,0.1); } :root:not([data-theme]) .widget-wrapper.ghrepo .repo:hover { box-shadow: 0 12px 20px -4px rgba(0,0,0,0.15); transform: translate3d(0, -2px, 0); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .widget-wrapper.ghrepo .repo:hover { box-shadow: 0 0 4px -2px var(--theme), 0 0 24px -8px var(--theme); } } .widget-wrapper.ghrepo .repo >div+div { margin-top: 0.5rem; } .widget-wrapper.ghrepo .repo span { color: var(--text-p2); } .widget-wrapper.ghrepo .repo svg { margin-right: 4px; } .widget-wrapper.ghrepo .repo .flex-row { display: flex; align-items: center; } .widget-wrapper.ghrepo .repo .repo-name { font-size: 0.875rem; font-weight: 700; color: var(--text-p1); } .widget-wrapper.ghrepo .repo .repo-desc { font-size: 0.8125rem; margin-left: 2px; margin-right: 2px; } .widget-wrapper.ghrepo .repo .grid { font-size: 0.8125rem; display: grid; grid-gap: 2px; grid-template-columns: repeat(auto-fill, calc((100% - 2 * 2px) / 3)); } .widget-wrapper.user-card .widget-header+.widget-body { margin: 0.75rem 0; } .widget-wrapper.user-card .widget-header a { display: flex; align-items: center; color: var(--text-p2); transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .widget-wrapper.user-card .widget-header a svg { margin-right: 4px; width: 1em; height: 1em; } .widget-wrapper.user-card .widget-header a:hover { color: var(--text); } .widget-wrapper.user-card .widget-body { text-align: center; background: var(--card); border-radius: 12px; padding: 1rem; box-shadow: 0 1px 2px 0px rgba(0,0,0,0.1); } .widgets .widget-wrapper.user-card .avatar { display: block; border-radius: 100%; margin: 1rem auto 1.25rem auto; max-width: 128px; overflow: hidden; } .widgets .widget-wrapper.user-card .avatar img { display: block; aspect-ratio: 1; } @media screen and (max-width: 768px) { .widgets .widget-wrapper.user-card .avatar { max-width: 50%; } } .widgets .widget-wrapper.user-card p.username { font-weight: 900; font-size: calc(17px + 11px); color: var(--text); margin: 0; } .widgets .widget-wrapper.user-card p.bio { font-size: 0.8125rem; margin: 0; } .widgets .widget-wrapper.user-card .follow { font-weight: 500; border-radius: 64px; margin-top: 1rem; padding: 0.5rem 1rem; background: var(--theme); color: #fff; font-size: 1rem; align-self: stretch; text-align: center; line-height: 1.5; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease-out; -moz-transition: background 0.2s ease-out; -webkit-transition: background 0.2s ease-out; -o-transition: background 0.2s ease-out; } .widgets .widget-wrapper.user-card .follow svg { margin-right: 6px; height: 1.5em; width: auto; } .widgets .widget-wrapper.user-card .follow:hover { background: var(--accent); } .widgets .widget-wrapper.user-card .buttons { margin-top: 1rem; align-self: stretch; display: grid; grid-gap: 2px; grid-template-columns: repeat(auto-fill, calc((100% - 2 * 2px) / 3)); } .widgets .widget-wrapper.user-card .btn { display: flex; flex-direction: column; align-items: center; color: inherit; border: 1px solid transparent; border-radius: 4px; padding: 0.25rem 0; transition: background 0.2s ease-out; -moz-transition: background 0.2s ease-out; -webkit-transition: background 0.2s ease-out; -o-transition: background 0.2s ease-out; } .widgets .widget-wrapper.user-card .btn:hover { background: var(--block); } .widgets .widget-wrapper.user-card .btn .title { font-size: 1rem; font-weight: 700; } .widgets .widget-wrapper.user-card .btn .desc { font-size: 0.75rem; color: var(--text-p3); font-weight: 500; } .widget-wrapper.user-card .widget-header+.widget-body { margin-top: 4px; } .widget-wrapper.post-list .widget-body a { font-size: 0.875rem; padding: 6px 16px; display: block; border-radius: 8px; color: var(--text-p1); transition: background 0.2s ease-out; -moz-transition: background 0.2s ease-out; -webkit-transition: background 0.2s ease-out; -o-transition: background 0.2s ease-out; } .widget-wrapper.post-list .widget-body a.active, .widget-wrapper.post-list .widget-body a:hover { background: var(--bg-a100); } .widget-wrapper.post-list .widget-body a+a { margin-top: 2px; } .widget-wrapper.post-list .widget-body a { display: flex; justify-content: space-between; align-items: center; } .widget-wrapper.post-list .widget-body a .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .widget-wrapper.post-list .widget-body a svg { flex-shrink: 0; height: 1em; width: auto; transform: scale(1.2); } .widget-wrapper.post-list .widget-body+.widget-header { margin-top: 28px; } .widget-wrapper.markdown .widget-body { border-radius: 12px; padding: 0.25rem 1rem; background: var(--bg-a50); } .widget-wrapper.markdown .widget-body >*:first-child { margin-top: 0.75rem; } .widget-wrapper.markdown .linklist { margin: 1em 0; } .widget-wrapper.markdown .linklist .link { background: var(--bg-a50); } .widget-wrapper.markdown .linklist .link:hover { background: var(--bg-a100); } .l_right .widget-wrapper.markdown .linklist .link { background: var(--block); } .l_right .widget-wrapper.markdown .linklist .link:hover { background: var(--theme-a20); } .widget-wrapper.post-card .widget-body { max-width: 100%; } .widget-wrapper.post-card .widget-body .item+.item { margin-top: 8px; } .widget-wrapper.post-card .widget-body .item { line-height: 1.2; background: var(--bg-a20); padding: 10px 16px; border-radius: 12px; display: block; border-left: 0; box-sizing: border-box; } .widget-wrapper.post-card .widget-body .title { color: var(--text-p1); font-weight: 500; font-size: 1rem; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; font-weight: 700; font-size: 0.875rem; } .widget-wrapper.post-card .widget-body .excerpt { color: var(--text-p3); font-size: 0.75rem; margin-top: 0.5rem; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; } .widget-wrapper.post-card .widget-body .item { transition: background 0.2s ease-out; -moz-transition: background 0.2s ease-out; -webkit-transition: background 0.2s ease-out; -o-transition: background 0.2s ease-out; } .widget-wrapper.post-card .widget-body .item.active { background: var(--bg-a50); } .widget-wrapper.post-card .widget-body .item:hover { background: var(--bg-a50); } .widget-wrapper.tagcloud .widget-body { border-radius: 12px; padding: 12px 16px; background: var(--bg-a50); } .widget-wrapper.tagcloud .widget-body a { word-break: break-word; color: var(--text-p2); line-height: 1.5; } .widget-wrapper.tagcloud .widget-body a:hover { color: var(--accent); } .widget-wrapper.timeline .tag-plugin.timeline { padding-left: 0; } .widget-wrapper.timeline .tag-plugin.timeline:before { left: 6px; } .widget-wrapper.timeline .widget-body { overflow: hidden; } .widget-wrapper.timeline .body a { transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; word-break: break-all; --fsp: calc(17px - 2px); } .widget-wrapper.timeline .tag-plugin.timeline .timenode { z-index: 1; margin-top: 0.25rem; } .widget-wrapper.timeline .tag-plugin.timeline .timenode .header { margin: 0.25rem var(--gap-padding); } .widget-wrapper.timeline .tag-plugin.timeline .timenode .header .user-info { background: none; padding-right: 0; } .widget-wrapper.timeline .tag-plugin.timeline .timenode .header img { display: none; } .widget-wrapper.timeline .tag-plugin.timeline .timenode .header:before { left: calc(6px - var(--gap-padding)); } .widget-wrapper.timeline .tag-plugin.timeline .timenode .body { border-radius: 12px; padding: 0.5rem 1rem; } .widget-wrapper.timeline .tag-plugin.timeline .timenode .body p, .widget-wrapper.timeline .tag-plugin.timeline .timenode .body li { --fsp: calc(17px - 3px); } .widget-wrapper.timeline .tag-plugin.timeline .timenode .body code { background: none; padding: 0; margin: 0; } .widget-wrapper.timeline .tag-plugin.timeline .timenode .body .highlight, .widget-wrapper.timeline .tag-plugin.timeline .timenode .body pre:not([class]):has(>code) { background: var(--bg-a50); } .widget-wrapper.timeline .tag-plugin.timeline[data-api] .body .footer { background: none; } .l_left .widget-wrapper.timeline .tag-plugin.timeline { padding-left: 0; } .l_left .widget-wrapper.timeline .tag-plugin.timeline:before { content: none; } .l_left .widget-wrapper.timeline .body { box-shadow: none; background: var(--bg-a50); } .widget-wrapper.toc { z-index: 3; } .widget-wrapper.toc .widget-body { position: relative; } .widget-wrapper.toc .widget-body:before { content: ''; position: absolute; top: 6px; bottom: 6px; left: 0; width: 4px; background: var(--block); border-radius: 4px; } @media screen and (min-width: 1180px) { .widget-wrapper.toc { background: var(--background); } } @media screen and (min-width: 1180px) { .l_left .widget-wrapper.toc { background: none; } } .widget-wrapper.toc .toc { --fsp: calc(17px - 2px); padding: 0; margin: 0; position: relative; list-style: none; } .widget-wrapper.toc .toc li { margin: 0; list-style: none; } .widget-wrapper.toc .toc a { --padding: calc(var(--gap-padding) / 2); --padding-offset: calc(0 - var(--padding)); padding: 4px var(--padding); margin: 0 var(--padding); color: var(--text-p3); display: block; position: relative; border-radius: 8px; transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .widget-wrapper.toc .toc a.active:before { content: ''; position: absolute; top: 6px; bottom: 6px; left: -8px; width: 4px; background: var(--theme); border-radius: 4px; } .widget-wrapper.toc .toc a:hover { background: var(--block-border); color: var(--text); } .l_right .widgets .widget-wrapper.toc { margin-top: 0; position: sticky; position: -webkit-sticky; top: calc(var(--gap-margin) * 1); padding: 16px 0; } .l_right .widgets .widget-wrapper.toc:first-child { top: calc(var(--gap-margin) * 2); padding-top: 1rem; } .l_right .widgets .widget-wrapper.toc .widget-body .toc { max-height: 70vh; overflow: auto; } @media screen and (max-width: 1440px) { .l_right .widgets .widget-wrapper.toc .widget-body .toc { max-height: 60vh; } } @media screen and (max-width: 1180px) { .l_right .widgets .widget-wrapper.toc .widget-body .toc { max-height: unset; } } .l_right .widgets .widget-wrapper.toc .widget-body .toc::-webkit-scrollbar { height: 0; width: 0; } .l_right .widgets .widget-wrapper.toc .widget-body .toc::-webkit-scrollbar-track-piece { background: transparent; } .l_right .widgets .widget-wrapper.toc .widget-body .toc::-webkit-scrollbar-thumb { background: var(--text-meta); cursor: pointer; border-radius: 0; } .l_right .widgets .widget-wrapper.toc .widget-body .toc::-webkit-scrollbar-thumb:hover { background: var(--text-p3); } .widget-wrapper.toc .toc .toc-item { font-weight: 500; --fsp: calc(17px - 1px); } .widget-wrapper.toc .toc .toc-item .toc-item { font-weight: 400; --fsp: calc(17px - 2px); } .widget-wrapper.toc .toc ol { padding-left: 0; } .widget-wrapper.toc .toc .toc-child .toc-link { padding-left: 1.5rem; } .widget-wrapper.toc .toc .toc-child .toc-child .toc-link { padding-left: 2.5rem; } .widget-wrapper.toc .toc .toc-child .toc-child .toc-child .toc-link { padding-left: 3.5rem; } .widget-wrapper.toc .toc .toc-child .toc-child .toc-child .toc-child .toc-link { padding-left: 4.5rem; } .widget-wrapper.toc .toc .toc-child .toc-child .toc-child .toc-child .toc-child .toc-link { padding-left: 5rem; } .widget-wrapper.toc .toc a.toc-link.active { color: var(--text); } .widget-wrapper.toc .toc a.toc-link.active:before, .widget-wrapper.toc .toc a.toc-link.active:after { content: ''; } .widget-wrapper.toc[collapse='true'] .toc-item a.toc-link+ol { display: none; } .widget-wrapper.toc[collapse='true'] .toc a.toc-link.active+ol { display: block; } .widget-wrapper.toc[collapse='auto'] .toc-item a.toc-link+ol { display: none; } .widget-wrapper.toc[collapse='auto'] .toc a.toc-link.active+ol { display: block; } .widget-wrapper.toc[collapse='auto']:hover a.toc-link+ol { display: block; } .widget-wrapper.toc[collapse='true'] ol:has(> .toc-item a.active) { display: block; } .widget-wrapper.toc[collapse='auto'] ol:has(> .toc-item a.active) { display: block; } .widget-wrapper.toc .widget-body { display: grid; grid-template-rows: 1fr; transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; overflow: hidden; } .l_right .widgets .widget-wrapper.toc .widget-header .cap-action:hover { background: var(--block-border); } .l_right .widgets .widget-wrapper.toc.collapse .widget-header .cap-action { background: var(--block-border); } .l_right .widgets .widget-wrapper.toc.collapse .widget-body { grid-template-rows: 0fr; } .widget-wrapper.toc .widget-body+.widget-footer:before { content: ''; position: absolute; background: var(--block-border); top: 0; height: 1px; left: var(--gap-padding); right: var(--gap-padding); } .widget-wrapper.toc .widget-footer { margin-top: 8px; color: var(--text-p2); position: relative; padding-top: 8px; } .widget-wrapper.toc .widget-footer a { display: flex; align-items: center; color: inherit; font-size: 0.875rem; padding: 8px var(--gap-padding); border-radius: 8px; transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .widget-wrapper.toc .widget-footer a svg, .widget-wrapper.toc .widget-footer a img { height: 16px; width: auto; margin-right: 8px; } .widget-wrapper.toc .widget-footer a:hover { background: var(--block-border); color: var(--text); } .widget-wrapper.toc+.widget-wrapper { padding-top: 32px; } @media screen and (max-width: 1180px) { .l_right { background-color: var(--blur-bg); } @supports ((-webkit-backdrop-filter: blur(var(--blur-px))) or (backdrop-filter: blur(var(--blur-px)))) { .l_right { background-color: var(--blur-bg) !important; backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px)); -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px)); } } .l_right:hover { background-color: var(--card); } .l_right .widgets .widget-wrapper.toc { position: static; background: none; } .widget-wrapper.toc .toc a { color: var(--text-p2); } .widget-wrapper.toc .widget-footer a { background: var(--block); } .widget-wrapper.toc .widget-footer a+a { margin-top: 4px; } } .widgets .loading-wrap { margin: 0.5rem 0; background: var(--bg-a50); } .widgets { overflow: scroll; flex-grow: 1; scrollbar-width: none; z-index: 1; line-height: 1.2; margin: 0 var(--gap-margin); } .widgets::-webkit-scrollbar { height: 0; width: 0; } .widgets::-webkit-scrollbar-track-piece { background: transparent; } .widgets::-webkit-scrollbar-thumb { background: var(--text-meta); cursor: pointer; border-radius: 0; } .widgets::-webkit-scrollbar-thumb:hover { background: var(--text-p3); } .widgets .widget-wrapper .widget-header { padding-left: var(--gap-padding); padding-right: var(--gap-padding); display: flex; justify-content: space-between; align-items: baseline; line-height: 28px; font-weight: 500; font-size: 0.8125rem; color: var(--text-p1); } .widgets .widget-wrapper .widget-header .item { display: block; } .widgets .widget-wrapper .widget-header >span { text-align: left; opacity: 0.6; } .widgets .widget-wrapper .widget-header:empty { display: none; } .widgets .widget-wrapper .widget-header .cap-action { line-height: 0; color: inherit; opacity: 0.6; transition: opacity 0.2s ease-out, background 0.2s ease-out; -moz-transition: opacity 0.2s ease-out, background 0.2s ease-out; -webkit-transition: opacity 0.2s ease-out, background 0.2s ease-out; -o-transition: opacity 0.2s ease-out, background 0.2s ease-out; border-radius: 4px; padding: 6px; margin-right: -6px; } .widgets .widget-wrapper .widget-header .cap-action svg { height: 1em; width: auto; transform: scale(1.2); fill: var(--text-p2); } .widgets .widget-wrapper .widget-header .cap-action:hover { color: var(--accent); background: var(--bg-a100); opacity: 1; } .widgets .widget-wrapper .widget-header .cap-action:hover svg { fill: var(--accent); } .widgets .widget-wrapper .widget-body { color: var(--text-p1); } .widgets .widget-wrapper .widget-body p { margin-top: 0.5em; margin-bottom: 0.5em; line-height: 1.5; } .widget-wrapper { display: block; padding-bottom: 32px; } .l_right .widgets:empty { display: none; } .l_right .widgets .widget-wrapper .widget-header { padding-left: var(--gap-padding); padding-right: var(--gap-padding); } @media screen and (max-width: 1180px) { .l_right .widgets .widget-wrapper { margin-top: var(--gap-margin); border-radius: 12px; } } @media screen and (min-width: 1180px) { .l_right .widgets .widget-wrapper.markdown .widget-body { background: var(--block); } } .leftbar-container .header+.widgets { margin-top: 1rem; } .post-list #archive { padding: 1rem; } .post-list #archive .archive-header { display: inline-block; font-family: Menlo, Monaco, Consolas, system-ui, monospace, sans-serif; font-weight: 700; line-height: 1.2; margin-bottom: 0.5em; position: relative; padding: 4px 0; color: var(--text-p1); } .post-list #archive .archive-header:after { content: ""; position: absolute; height: 4px; bottom: 0; left: 0; right: 0; z-index: -1; border-radius: 4px; background: var(--theme); } .post-list #archive a.post { display: inline-flex; align-items: baseline; margin: 0.25rem 0; color: var(--text-p1); transition: color 0.2s ease-out, border 0.2s ease-out; -moz-transition: color 0.2s ease-out, border 0.2s ease-out; -webkit-transition: color 0.2s ease-out, border 0.2s ease-out; -o-transition: color 0.2s ease-out, border 0.2s ease-out; border-bottom: 1px dashed var(--text-meta); } .post-list #archive a.post time { font-family: Menlo, Monaco, Consolas, system-ui, monospace, sans-serif; margin-right: 1em; font-weight: 700; flex-shrink: 0; color: var(--text-p4); } .post-list #archive a.post:hover { border-bottom: 1px solid var(--theme); color: var(--text); } .post-list #archive a.post:hover time { color: var(--theme); } .post-list #cats { padding: 0; } .post-list #cats a.cat { display: flex; padding: 0.5em 1rem; border-radius: 8px; color: var(--text-p2); align-items: center; justify-content: space-between; font-weight: 500; font-size: calc(17px - 2px); } .post-list #cats a.cat.child { padding-left: 2rem; } .post-list #cats a.cat span { display: flex; align-items: center; } .post-list #cats a.cat svg { height: 1em; width: auto; transform: scale(1.2); margin-right: 8px; } .post-list #cats a.cat .badge { font-weight: 700; font-family: Menlo, Monaco, Consolas, system-ui, monospace, sans-serif; opacity: 0.5; font-size: 0.75rem; } .post-list #cats a.cat:hover { background: var(--block-border); color: var(--text); } .post-list #cats a.cat:hover .badge { opacity: 1; color: var(--theme); } .post-list #tags { display: flex; flex-wrap: wrap; padding: 0; margin: 0 -4px; } .post-list #tags a.tag { display: inline-flex; align-items: center; position: relative; color: var(--text-p2); margin: 4px; padding: 0.5em 0.75rem; border-radius: 4px; background: var(--block); font-size: 0.8125rem; font-weight: 500; } .post-list #tags a.tag:before { content: "#"; margin-left: -2px; margin-right: 2px; opacity: 0.4; } .post-list #tags a.tag:hover { color: var(--text); background: var(--block-border); } .post-list #tags a.tag:hover:before { color: var(--theme); opacity: 1; } @media screen and (min-width: 500px) { .post-list.author #archive { padding: 1rem 0; } } .l_body[text-indent] article.content p:not([class]) { text-indent: calc(var(--fsp) * 2); text-align: justify; } .l_body[text-indent] article.content p:not([class]) a { text-indent: 0; } .l_body[type=story] .md-text.content { --fsp: calc(17px + 1px); --gap-p: 2rem; } .l_body[type=story] .md-text.content >div.tag-plugin, .l_body[type=story] .md-text.content >p>img { margin-top: 2.4rem; margin-bottom: 2.4rem; } .l_body[type=story] .md-text.content h1, .l_body[type=story] .md-text.content h2, .l_body[type=story] .md-text.content h3, .l_body[type=story] .md-text.content h4, .l_body[type=story] .md-text.content h5, .l_body[type=story] .md-text.content h6 { color: var(--text); line-height: 1.2; } .l_body[type=story] .md-text.content h1 >a:first-child, .l_body[type=story] .md-text.content h2 >a:first-child, .l_body[type=story] .md-text.content h3 >a:first-child, .l_body[type=story] .md-text.content h4 >a:first-child, .l_body[type=story] .md-text.content h5 >a:first-child, .l_body[type=story] .md-text.content h6 >a:first-child { background: var(--theme); border-radius: 2px; margin-right: 8px; padding: 0 2px; transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .l_body[type=story] .md-text.content h1 >a:first-child:hover, .l_body[type=story] .md-text.content h2 >a:first-child:hover, .l_body[type=story] .md-text.content h3 >a:first-child:hover, .l_body[type=story] .md-text.content h4 >a:first-child:hover, .l_body[type=story] .md-text.content h5 >a:first-child:hover, .l_body[type=story] .md-text.content h6 >a:first-child:hover { background: var(--accent); } .l_body[type=story] .md-text.content h1 >a:first-child:before, .l_body[type=story] .md-text.content h2 >a:first-child:before, .l_body[type=story] .md-text.content h3 >a:first-child:before, .l_body[type=story] .md-text.content h4 >a:first-child:before, .l_body[type=story] .md-text.content h5 >a:first-child:before, .l_body[type=story] .md-text.content h6 >a:first-child:before, .l_body[type=story] .md-text.content h1 >a:first-child:after, .l_body[type=story] .md-text.content h2 >a:first-child:after, .l_body[type=story] .md-text.content h3 >a:first-child:after, .l_body[type=story] .md-text.content h4 >a:first-child:after, .l_body[type=story] .md-text.content h5 >a:first-child:after, .l_body[type=story] .md-text.content h6 >a:first-child:after { color: #fff; font-weight: 700; } .l_body[type=story] .md-text.content h1 >a:first-child:before, .l_body[type=story] .md-text.content h2 >a:first-child:before, .l_body[type=story] .md-text.content h3 >a:first-child:before, .l_body[type=story] .md-text.content h4 >a:first-child:before, .l_body[type=story] .md-text.content h5 >a:first-child:before, .l_body[type=story] .md-text.content h6 >a:first-child:before { content: ''; font-size: 0.5em; } .l_body[type=story] .md-text.content h1 >a:first-child:after, .l_body[type=story] .md-text.content h2 >a:first-child:after, .l_body[type=story] .md-text.content h3 >a:first-child:after, .l_body[type=story] .md-text.content h4 >a:first-child:after, .l_body[type=story] .md-text.content h5 >a:first-child:after, .l_body[type=story] .md-text.content h6 >a:first-child:after { font-size: 0.25em; } .l_body[type=story] .md-text.content h2:not([class]):before, .l_body[type=story] .md-text.content h2:not([class]):after { content: ''; display: inline-block; width: 12px; height: 1.2em; background: #ff5724; transform: skewX(-20deg); margin: 0 0.5em; vertical-align: top; position: relative; } .l_body[type=story] .md-text.content h3:not([class]) { position: relative; } .l_body[type=story] .md-text.content h3:not([class]):before, .l_body[type=story] .md-text.content h3:not([class]):after { position: absolute; font-size: 1.2em; background-color: hsla(var(--hue) var(--sat) var(--light) / 0.5); width: 1em; height: 1em; content: ''; opacity: 1; display: inline-block; transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; vertical-align: middle; } .l_body[type=story] .md-text.content h3:not([class]):before { margin-left: -1em; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M13.488 4.43a.75.75 0 0 1 .081 1.058L7.988 12l5.581 6.512a.75.75 0 1 1-1.138.976l-6-7a.75.75 0 0 1 0-.976l6-7a.75.75 0 0 1 1.057-.081' clip-rule='evenodd'/%3E%3Cpath fill='currentColor' d='M17.75 5a.75.75 0 0 0-1.32-.488l-6 7a.75.75 0 0 0 0 .976l6 7A.75.75 0 0 0 17.75 19z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M13.488 4.43a.75.75 0 0 1 .081 1.058L7.988 12l5.581 6.512a.75.75 0 1 1-1.138.976l-6-7a.75.75 0 0 1 0-.976l6-7a.75.75 0 0 1 1.057-.081' clip-rule='evenodd'/%3E%3Cpath fill='currentColor' d='M17.75 5a.75.75 0 0 0-1.32-.488l-6 7a.75.75 0 0 0 0 .976l6 7A.75.75 0 0 0 17.75 19z'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-position: center; mask-size: contain; } .l_body[type=story] .md-text.content h3:not([class]):after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M10.512 4.43a.75.75 0 0 0-.081 1.058L16.012 12l-5.581 6.512a.75.75 0 1 0 1.138.976l6-7a.75.75 0 0 0 0-.976l-6-7a.75.75 0 0 0-1.057-.081' clip-rule='evenodd'/%3E%3Cpath fill='currentColor' d='M6.25 5a.75.75 0 0 1 1.32-.488l6 7a.75.75 0 0 1 0 .976l-6 7A.75.75 0 0 1 6.25 19z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M10.512 4.43a.75.75 0 0 0-.081 1.058L16.012 12l-5.581 6.512a.75.75 0 1 0 1.138.976l6-7a.75.75 0 0 0 0-.976l-6-7a.75.75 0 0 0-1.057-.081' clip-rule='evenodd'/%3E%3Cpath fill='currentColor' d='M6.25 5a.75.75 0 0 1 1.32-.488l6 7a.75.75 0 0 1 0 .976l-6 7A.75.75 0 0 1 6.25 19z'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-position: center; mask-size: contain; } .l_body[type=story] .md-text.content h4:not([class]) { position: relative; } .l_body[type=story] .md-text.content h4:not([class]):before { content: ''; position: absolute; width: 32px; height: 32px; margin-left: -16px; margin-top: -12px; background: hsla(var(--hue) var(--sat) var(--light) / 0.3); border-radius: 50%; --blur-px: 8px; filter: blur(var(--blur-px)); pointer-events: none; z-index: -1; transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; } .l_body[type=story] .md-text.content h4:not([class]):hover:before { --blur-px: 24px; background: hsla(var(--hue) var(--sat) var(--light) / 1); } .l_body[type=story] .md-text.content ol, .l_body[type=story] .md-text.content ul { margin-left: calc(var(--fsp) * 2); } .l_body[type=story] .md-text.content h1, .l_body[type=story] .md-text.content h2, .l_body[type=story] .md-text.content h3, .l_body[type=story] .md-text.content h4, .l_body[type=story] .md-text.content h5, .l_body[type=story] .md-text.content h6 { text-align: center; margin: 2em 0 1.5em; } .l_body[type=story] .md-text.content h1 >a:first-child, .l_body[type=story] .md-text.content h2 >a:first-child, .l_body[type=story] .md-text.content h3 >a:first-child, .l_body[type=story] .md-text.content h4 >a:first-child, .l_body[type=story] .md-text.content h5 >a:first-child, .l_body[type=story] .md-text.content h6 >a:first-child { display: none; } .l_body[type=story] .md-text.content .poetry p:not([class]), .l_body[type=story] .md-text.content .okr p:not([class]), .l_body[type=story] .md-text.content .timeline p:not([class]), .l_body[type=story] .md-text.content li p:not([class]), .l_body[type=story] .md-text.content .article-footer p:not([class]) { text-indent: 0; text-align: left; } .l_body[type=story] .md-text.content p>img, .l_body[type=story] .md-text.content .tag-plugin.image .image-bg { border-radius: 24px; } .l_body[type=story] .md-text.content p>img >img, .l_body[type=story] .md-text.content .tag-plugin.image .image-bg >img { border-radius: 24px; } .l_body[type=story] .md-text.content>blockquote, .md-text.content .tag-plugin.blockquote { text-align: center; --inset: calc(var(--fsp) * 2); margin-left: var(--inset); margin-right: var(--inset); background: var(--block); padding: 1rem 2rem; border-radius: 16px; } .l_body[type=story] .md-text.content>blockquote:before, .md-text.content .tag-plugin.blockquote:before, .l_body[type=story] .md-text.content>blockquote:after, .md-text.content .tag-plugin.blockquote:after { position: absolute; font-size: 2rem; background-color: hsla(var(--hue) var(--sat) var(--light) / 0.25); top: -0.3em; width: 1em; height: 1em; content: ''; opacity: 1; transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .l_body[type=story] .md-text.content>blockquote:before, .md-text.content .tag-plugin.blockquote:before { left: -0.3em; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from BoxIcons Solid by Atisa - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' d='M3.691 6.292C5.094 4.771 7.217 4 10 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 6.925 10H10a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2H3a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789M20 20h-6a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789C16.094 4.771 18.217 4 21 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 17.925 10H21a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from BoxIcons Solid by Atisa - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' d='M3.691 6.292C5.094 4.771 7.217 4 10 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 6.925 10H10a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2H3a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789M20 20h-6a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789C16.094 4.771 18.217 4 21 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 17.925 10H21a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-position: center; mask-size: contain; } .l_body[type=story] .md-text.content>blockquote:after, .md-text.content .tag-plugin.blockquote:after { right: -0.3em; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from BoxIcons Solid by Atisa - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' d='M20.309 17.708C22.196 15.66 22.006 13.03 22 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.9 2.9 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292m-11.007 0C11.19 15.66 10.999 13.03 10.993 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.9 2.9 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from BoxIcons Solid by Atisa - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' d='M20.309 17.708C22.196 15.66 22.006 13.03 22 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.9 2.9 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292m-11.007 0C11.19 15.66 10.999 13.03 10.993 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.9 2.9 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-position: center; mask-size: contain; } .l_body[type=story] .md-text.content>blockquote p:not([class]), .md-text.content .tag-plugin.blockquote p:not([class]) { color: var(--text-p2); font-size: 17px; text-indent: 2em; } .l_body[type=story] .md-text.content>blockquote:hover:before, .md-text.content .tag-plugin.blockquote:hover:before, .l_body[type=story] .md-text.content>blockquote:hover:after, .md-text.content .tag-plugin.blockquote:hover:after { background-color: hsla(var(--hue) var(--sat) var(--light) / 0.5); } .l_body[type=story] .article.banner .content .bottom.only-title { justify-content: center; } .l_body[text-indent] .tag-plugin.tabs .tab-content .tab-pane>p:not([class]) { text-indent: calc(var(--fsp) * 2); } .l_body[text-indent] .tag-plugin.tabs .tab-content .tab-pane>p:not([class]) a { text-indent: 0; } .l_body[type='tech'] article.content h1, .l_body[type='tech'] article.content h2, .l_body[type='tech'] article.content h3, .l_body[type='tech'] article.content h4, .l_body[type='tech'] article.content h5, .l_body[type='tech'] article.content h6 { color: var(--text); line-height: 1.8; } .l_body[type='tech'] article.content h1 >a:first-child, .l_body[type='tech'] article.content h2 >a:first-child, .l_body[type='tech'] article.content h3 >a:first-child, .l_body[type='tech'] article.content h4 >a:first-child, .l_body[type='tech'] article.content h5 >a:first-child, .l_body[type='tech'] article.content h6 >a:first-child { background: var(--theme); border-radius: 2px; margin-right: 8px; padding: 0 2px; transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .l_body[type='tech'] article.content h1 >a:first-child:hover, .l_body[type='tech'] article.content h2 >a:first-child:hover, .l_body[type='tech'] article.content h3 >a:first-child:hover, .l_body[type='tech'] article.content h4 >a:first-child:hover, .l_body[type='tech'] article.content h5 >a:first-child:hover, .l_body[type='tech'] article.content h6 >a:first-child:hover { background: var(--accent); } .l_body[type='tech'] article.content h1 >a:first-child:before, .l_body[type='tech'] article.content h2 >a:first-child:before, .l_body[type='tech'] article.content h3 >a:first-child:before, .l_body[type='tech'] article.content h4 >a:first-child:before, .l_body[type='tech'] article.content h5 >a:first-child:before, .l_body[type='tech'] article.content h6 >a:first-child:before, .l_body[type='tech'] article.content h1 >a:first-child:after, .l_body[type='tech'] article.content h2 >a:first-child:after, .l_body[type='tech'] article.content h3 >a:first-child:after, .l_body[type='tech'] article.content h4 >a:first-child:after, .l_body[type='tech'] article.content h5 >a:first-child:after, .l_body[type='tech'] article.content h6 >a:first-child:after { color: #fff; font-weight: 700; } .l_body[type='tech'] article.content h1 >a:first-child:before, .l_body[type='tech'] article.content h2 >a:first-child:before, .l_body[type='tech'] article.content h3 >a:first-child:before, .l_body[type='tech'] article.content h4 >a:first-child:before, .l_body[type='tech'] article.content h5 >a:first-child:before, .l_body[type='tech'] article.content h6 >a:first-child:before { content: ''; font-size: 0.5em; } .l_body[type='tech'] article.content h1 >a:first-child:after, .l_body[type='tech'] article.content h2 >a:first-child:after, .l_body[type='tech'] article.content h3 >a:first-child:after, .l_body[type='tech'] article.content h4 >a:first-child:after, .l_body[type='tech'] article.content h5 >a:first-child:after, .l_body[type='tech'] article.content h6 >a:first-child:after { font-size: 0.25em; } .l_body[type='tech'] article.content h2 { font-weight: 500; } .l_body[type='tech'] article.content h2 >a:first-child:before { content: '#'; } .l_body[type='tech'] article.content h3 >a:first-child:before { content: '='; } .l_body[type='tech'] article.content h4 >a:first-child:before { content: '|'; } .l_body[type='tech'] article.content h5 >a:first-child:before { content: ':'; } .md-text.error-page { text-align: center; margin-top: 2rem; } .md-text.error-page img#error { width: 30vw; max-height: 150px; margin-bottom: 2rem; } .md-text.error-page h1 { font-size: 4rem; margin-bottom: 0; } .md-text.error-page p.what, .md-text.error-page p.why { margin: 0.5em; } .md-text.error-page p.why { font-size: 0.8125rem; } .md-text.error-page a#back { margin: 2rem 0; display: inline-block; background: #fdb62f; color: #000; border: 2px solid #000; } @media screen and (max-width: 768px) { .md-text.error-page { margin-top: 4rem; } } .md-text .tag-list { display: flex; flex-wrap: wrap; padding: 0; margin-top: 2rem; } .md-text .tag-list a.tag { display: inline-flex; align-items: center; position: relative; color: var(--text-p2); margin: 4px; padding: 0.5em 0.75rem; border-radius: 4px; background: var(--block); font-size: 0.8125rem; font-weight: 500; } .md-text .tag-list a.tag:before { content: "#"; margin-left: -2px; margin-right: 2px; opacity: 0.4; } .md-text .tag-list a.tag:hover { color: var(--text); background: var(--block-border); } .md-text .tag-list a.tag:hover:before { color: var(--theme); opacity: 1; } .post-list .post-card .meta.cap .tag:before { content: "#"; margin-left: -2px; margin-right: 2px; opacity: 0.4; } .widget-body.tag-tree .tag-subtree > a > .tag-switcher-wrapper { width: 1.75rem; height: 0.875rem; display: flex; justify-content: end; align-items: center; } .widget-body.tag-tree .tag-subtree > a > .tag-switcher-wrapper:hover { color: var(--theme); } .widget-body.tag-tree .tag-subtree.parent-tag > a .tag-switcher { display: inline-block; height: 0.5rem; width: 0.5rem; border-width: 1px; border-style: none solid solid none; transform: translateX(-25%) rotate(-45deg); } .widget-body.tag-tree .tag-subtree.parent-tag.expanded > a .tag-switcher { transform: translateY(-25%) rotate(45deg); } .widget-body.tag-tree .tag-subtree.parent-tag > .tag-subtree { display: none; } .widget-body.tag-tree .tag-subtree.parent-tag.expanded > .tag-subtree { display: block; } .widget-body.tag-tree .tag-subtree .tagcon { font-size: smaller; opacity: 0.4; margin-right: 0.25rem; } .l_body { display: grid; grid-template-columns: 1fr minmax(200px, var(--width-main)) 1fr; grid-gap: calc(var(--gap-margin) * 4); margin: auto; font-size: var(--fsp); } @media screen and (max-width: 1440px) { .l_body { grid-gap: calc(var(--gap-margin) * 2); } } .l_body aside { z-index: 8; flex-shrink: 0; position: sticky; position: -webkit-sticky; --width-sidebar: calc(var(--gap-margin) * 2 + var(--gap-padding) * 2 + var(--side-content-width)); width: var(--width-sidebar); } .l_body .l_left { justify-self: right; top: calc(var(--gap-margin) * 2); } .l_body .l_right { justify-self: left; max-height: calc(100% - calc(var(--gap-margin) * 2) * 2); } .l_body .l_right .widgets { height: 100%; overflow: visible; } @media screen and (max-width: 1180px) { .l_body .l_right { --gap-margin: 16px; } .laptop-only { display: block !important; } .l_body { grid-gap: calc(var(--gap-margin) * 1); } .l_body .l_right { position: fixed; transform: translateX(320px); transition: transform 0.38s ease-out; margin: 0; --inset: 8px; right: var(--inset); top: calc(var(--gap-margin) * 2); max-height: calc(100vh - var(--gap-margin) * 2 - 96px); box-shadow: 0 12px 16px -4px rgba(0,0,0,0.2); z-index: 10; background: var(--background); overflow: auto; --blur-bg: var(--bg-a60); --blur-px: 50px; } .l_body .l_right::-webkit-scrollbar { height: 0; width: 0; } .l_body .l_right::-webkit-scrollbar-track-piece { background: transparent; } .l_body .l_right::-webkit-scrollbar-thumb { background: var(--text-meta); cursor: pointer; border-radius: 0; } .l_body .l_right::-webkit-scrollbar-thumb:hover { background: var(--text-p3); } .l_body[rightbar] .l_right { transform: translateX(0px); } .l_body[rightbar] .main-mask { pointer-events: inherit; } } @media screen and (max-width: 667px) { .mobile-only { display: block !important; } .l_body { padding: 0; display: block; } .l_body .l_left { position: fixed; transform: translateX(-320px); transition: transform 0.38s ease-out; margin: 0; --inset: 8px; left: var(--inset); top: calc(var(--gap-margin) * 2); max-height: calc(100vh - var(--gap-margin) * 2 - 96px); box-shadow: 0 12px 16px -4px rgba(0,0,0,0.2); z-index: 10; } .l_body .l_left .leftbar-container { --inset: 8px; height: calc(100vh - var(--gap-margin) * 2 - 96px); } .l_body .l_main { max-width: 100%; } .l_body[leftbar] .l_left { transform: translateX(0px); } .l_body[leftbar] .main-mask { pointer-events: inherit; } } .main-mask { position: fixed; pointer-events: none; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.1); z-index: 9; opacity: 0; transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -webkit-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; } .l_main .post-list { margin: 1rem; } .l_main .post-list .post-title:first-child { margin-top: 0.5rem; } .l_main .post-list .post-title { font-weight: 500; margin: 1.25rem auto 0.75rem 0; line-height: 1.2; font-size: calc(17px + 4px); border-bottom: none; color: var(--text); transition: color 0.2s ease-out; -moz-transition: color 0.2s ease-out; -webkit-transition: color 0.2s ease-out; -o-transition: color 0.2s ease-out; } @media screen and (max-width: 500px) { .l_main .post-list .post-title { font-size: calc(17px + 2px); margin: 0.5rem 0; } } .l_main .post-list .wiki .post-title { margin-top: 0.5rem; } .post-list .post-card { display: block; margin: 1rem 0; border-radius: 24px; background: var(--card); transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; overflow: hidden; z-index: 0; position: relative; --img-br: 100%; --img-sat: 100%; --blur-px: 1em; --blur-height: 128px; --blur-sat: 120%; } :root[data-theme="light"] .post-list .post-card { box-shadow: 0 1px 2px 0px rgba(0,0,0,0.1); } :root[data-theme="light"] .post-list .post-card:hover { box-shadow: 0 12px 20px -4px rgba(0,0,0,0.15); transform: translate3d(0, -2px, 0); } :root[data-theme="dark"] .post-list .post-card:hover { box-shadow: 0 0 4px -2px var(--theme), 0 0 24px -8px var(--theme); } :root:not([data-theme]) .post-list .post-card { box-shadow: 0 1px 2px 0px rgba(0,0,0,0.1); } :root:not([data-theme]) .post-list .post-card:hover { box-shadow: 0 12px 20px -4px rgba(0,0,0,0.15); transform: translate3d(0, -2px, 0); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .post-list .post-card:hover { box-shadow: 0 0 4px -2px var(--theme), 0 0 24px -8px var(--theme); } } .post-list .post-card:hover { --img-br: 75%; --img-sat: 120%; --blur-sat: 200%; } .post-list .post-card img { filter: brightness(var(--img-br)) saturate(var(--img-sat)); transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .post-list .post-card .excerpt { margin: 1rem 0; } @media screen and (max-width: 500px) { .post-list .post-card .excerpt { margin: 0.5rem 0; } } .post-list .post-card .excerpt >p { margin: 1rem 0; line-height: 1.5; } @media screen and (max-width: 500px) { .post-list .post-card .excerpt >p { margin: 0.5rem 0; } } .post-list .post-card .meta.cap { flex-wrap: wrap; margin: 0; line-height: 2; --fsp: calc(17px - 1px); font-size: var(--fsp); } .post-list .post-card .meta.cap, .post-list .post-card .meta.cap span { display: flex; align-items: center; } .post-list .post-card .meta.cap svg { height: 1em; width: auto; line-height: 0; transform: scale(1.2); margin-right: 8px; } .post-list .post-card .meta.cap >span+span { margin-left: 1.5rem; } .post-list .post-card .meta.cap span.pin img { object-fit: contain; } .post-list .post-card .meta.cap span.pin svg { color: #f44336; } .post-list .md-text { padding: 1rem; } @media screen and (max-width: 500px) { .post-list .md-text { padding: 0.5rem 1rem; } } .post-list .md-text p { color: var(--text-p2); font-size: 0.875rem; } .post-list .post-card .post-cover { overflow: hidden; width: calc(100% + 2 * 1rem); border-radius: 0; margin-left: -1rem; margin-top: -1rem; margin-right: -1rem; background: var(--block); } .post-list .post-card .post-cover:not(.lazy) { transition: transform 1s ease-out; -moz-transition: transform 1s ease-out; -webkit-transition: transform 1s ease-out; -o-transition: transform 1s ease-out; } .post-list .post-card .post-cover img { object-fit: cover; width: 100%; border-radius: 0; aspect-ratio: 2; } .post-list .post-card.post.photo .cover { position: relative; line-height: 0; } .post-list .post-card.post.photo .cover img { width: 100%; object-fit: cover; aspect-ratio: 2; z-index: 0; } .post-list .post-card.post.photo .cover:before { content: ''; z-index: 1; position: absolute; left: 0; right: 0; height: var(--blur-height); backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px)); -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px)); transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .post-list .post-card.post.photo .cover[position=top]:before { top: 0; mask: linear-gradient(#000, rgba(0,0,0,0.75), transparent); -webkit-mask: linear-gradient(#000, rgba(0,0,0,0.75), transparent); } .post-list .post-card.post.photo .cover[position=bottom]:before { bottom: 0; mask: linear-gradient(transparent, rgba(0,0,0,0.75), #000); -webkit-mask: linear-gradient(transparent, rgba(0,0,0,0.75), #000); } .post-list .post-card.post.photo .cover .cover-info { padding: 1.5rem 1rem; position: absolute; line-height: 1.2; width: calc(100% - 1rem * 2); --text-banner: #fff; color: var(--text-banner); z-index: 2; } .post-list .post-card.post.photo .cover .cover-info[position=top] { top: 0; background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0)); } .post-list .post-card.post.photo .cover .cover-info[position=bottom] { bottom: 0; background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)); } .post-list .post-card.post.photo .cover .cover-info div+div { margin-top: 4px; } .post-list .post-card.post.photo .cover .cover-info .text { color: unset; transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; text-shadow: 0 2px 4px rgba(0,0,0,0.2); } .post-list .post-card.post.photo .cover .cover-info .topic { font-size: 0.8125rem; } .post-list .post-card.post.photo .cover .cover-info .headline { font-weight: 500; font-size: calc(17px + 7px); } .post-list .post-card.post.photo .cover .cover-info .caption { font-size: 0.875rem; } @media screen and (max-width: 500px) { .post-list .post-card.post.photo .cover .cover-info { padding: 1rem; } .post-list .post-card.post.photo .cover .cover-info div+div { margin-top: 2px; } .post-list .post-card.post.photo .cover .cover-info .headline { font-size: calc(17px + 4px); } .post-list .post-card.post.photo .cover .cover-info .caption { font-size: 0.8125rem; } } .post-list .post-card.post.photo h2 { margin: 0.25rem 0; font-size: calc(17px + 4px); } .post-list .post-card.wiki article { display: flex; flex-wrap: wrap; transition: box-shadow 0.2s ease-out; -moz-transition: box-shadow 0.2s ease-out; -webkit-transition: box-shadow 0.2s ease-out; -o-transition: box-shadow 0.2s ease-out; justify-content: center; padding: 1rem 0.5rem; } .post-list .post-card.wiki article .preview { display: flex; margin: 1rem 3rem; align-items: center; } .post-list .post-card.wiki article .preview img { width: 96px; max-height: 96px; object-fit: contain; transition: all 0.75s ease-out; -moz-transition: all 0.75s ease-out; -webkit-transition: all 0.75s ease-out; -o-transition: all 0.75s ease-out; } .post-list .post-card.wiki article .excerpt { margin: 1rem 0.5rem; min-width: 280px; flex: 1; overflow: hidden; word-wrap: break-word; } @media screen and (min-width: 950px) { .post-list .post-card.wiki article .excerpt { margin-right: 2rem; } } .post-list .post-card.wiki article .excerpt .caps { line-height: 1; margin-bottom: 0.75rem; } .post-list .post-card.wiki article .excerpt .cap { --theme-block: var(--block); background: var(--theme-block); padding: 2px 4px; border-radius: 2px; } .post-list .post-card.wiki article .excerpt p:last-child { margin-bottom: 0; } .post-list .post-card.wiki article .excerpt .cap+.cap { margin-left: 4px; } @media screen and (max-width: 500px) { .post-list.archives { margin: 1rem 0; } } .l_main { position: relative; padding-bottom: var(--gap-max); } @media screen and (min-width: 667px) { .l_main { padding-top: calc(var(--gap-margin) * 2); } } .l_main header { margin: 2rem 1rem 1rem; } .l_main header .logo-wrap { margin: 0; } @media screen and (max-width: 667px) { .l_body.index .l_main { padding-top: 0; } } body>.sitebg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; } body>.sitebg .siteblur { width: 100%; height: 100%; --blur-px: 0; --blur-sat: 200%; background-color: var(--blur-bg); --blur-sat: 300%; --blur-px: 100px; --blur-bg: var(--bg-a75); } @supports ((-webkit-backdrop-filter: blur(var(--blur-px))) or (backdrop-filter: blur(var(--blur-px)))) { body>.sitebg .siteblur { background-color: var(--blur-bg) !important; backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px)); -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px)); } } body>.sitebg .siteblur:hover { background-color: var(--card); } .md-text { max-width: 100%; padding: 1rem; color: var(--text-p1); line-height: 1.6; word-break: break-word; } .md-text.excerpt p { font-size: 0.875rem; margin: 1em 0; } .md-text.content { position: relative; padding-top: 0; padding-bottom: 2rem; overflow: hidden; } .md-text ul:not(:last-child), .md-text ol:not(:last-child) { padding-bottom: 0.5rem; margin: 0 0.25rem; } .md-text blockquote p, .md-text ul p, .md-text ol p, .md-text blockquote ul, .md-text ul ul, .md-text ol ul, .md-text blockquote ol, .md-text ul ol, .md-text ol ol { --fsp: calc(17px - 1px); font-size: var(--fsp); line-height: 1.5; } .md-text blockquote p code, .md-text ul p code, .md-text ol p code, .md-text blockquote ul code, .md-text ul ul code, .md-text ol ul code, .md-text blockquote ol code, .md-text ul ol code, .md-text ol ol code { font-size: inherit; padding: 0; background: none; } .md-text p *, .md-text blockquote *, .md-text .tag-plugin *, .md-text ul *, .md-text ol *, .md-text .highlight *, .md-text table * { --gap-p: var(--gap-p-compact); } .md-text p, .md-text ul, .md-text ol { margin-top: calc(var(--gap-p) - 4px); margin-bottom: calc(var(--gap-p) - 4px); } .md-text .tag-plugin, .md-text iframe { margin-top: var(--gap-p); margin-bottom: var(--gap-p); } .md-text iframe { margin-left: auto; margin-right: auto; display: block; } .md-text.content blockquote h2, .md-text.content .tag-plugin h2, .md-text.content blockquote h3, .md-text.content .tag-plugin h3, .md-text.content blockquote h4, .md-text.content .tag-plugin h4, .md-text.content blockquote h5, .md-text.content .tag-plugin h5, .md-text.content blockquote h6, .md-text.content .tag-plugin h6 { margin-top: 0.25em; margin-bottom: 0.25em; } .md-text.content:first-child .tag-plugin:first-child { margin-top: 0; } .md-text p { font-size: var(--fsp); } .md-text pre { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .md-text pre.mermaid { overflow: auto; } .md-text .center { align-self: center; } .md-text>div { margin: var(--gap-p) 0; } .md-text img { margin: auto; display: block; } .md-text.content p>img, .md-text.content .tag-plugin.image .image-bg { border-radius: 16px; } li:not([class]) a:not([class]), p:not([class]) a:not([class]), table a:not([class]) { position: relative; text-decoration: none; transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; border-radius: 0; background: linear-gradient(0deg, var(--block-border), var(--block-border)) no-repeat left 100%/100% 2px; } li:not([class]) a:not([class]):hover, p:not([class]) a:not([class]):hover, table a:not([class]):hover { text-decoration: none; color: var(--link); border-radius: 4px; background: linear-gradient(0deg, var(--link-a20), var(--link-a20)) no-repeat left 100%/100% 100%; } li:not([class]) a:not([class]):has(img), p:not([class]) a:not([class]):has(img), table a:not([class]):has(img) { background: none; } li:not([class]) a:not([class]):has(img):hover, p:not([class]) a:not([class]):has(img):hover, table a:not([class]):has(img):hover { background: none; } img:not([src]) { visibility: hidden; } .lazy-box { position: relative; overflow: hidden; line-height: 0; } .lazy-box.async { background: var(--block); min-height: 4rem; } img[data-ll-status] { z-index: 1; transition: all 0.38s ease-out; -moz-transition: all 0.38s ease-out; -webkit-transition: all 0.38s ease-out; -o-transition: all 0.38s ease-out; } img[data-ll-status]:not(.loaded) { opacity: 0; } img[data-ll-status].loaded, img[data-ll-status].error { opacity: 1; } img[data-ll-status]+.lazy-icon { position: absolute; width: 2rem; height: 2rem; max-width: 100%; max-height: 100%; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); background-size: contain; background-repeat: no-repeat; background-position: center; } img[data-ll-status].loaded+.lazy-icon { display: none; } img[data-ll-status].error { width: 2rem; height: 2rem; } img[data-ll-status].error+.lazy-icon { display: none; } .md-text .aplayer { border-radius: 16px; } :root { --swiper-theme-color: var(--theme) !important; } .swiper { width: 100%; border-radius: 4px; --gap-p: 2rem; } .swiper:not(.swiper-initialized) { display: none; } div.swiper-slide { text-align: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-self: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; width: 50%; } div.swiper-slide img { border-radius: 4px; } .swiper[width='max'] .swiper-slide { width: 100%; } .swiper[width='min'] .swiper-slide { width: 25%; } .swiper[effect='cards'] .swiper-slide { max-width: 75%; } .swiper-button-prev, .swiper-button-next { padding: 1rem 0.25rem; margin-top: -2rem !important; border-radius: 40px; background: rgba(255,255,255,0.25); transition: background 0.2s ease-out; -moz-transition: background 0.2s ease-out; -webkit-transition: background 0.2s ease-out; -o-transition: background 0.2s ease-out; --swiper-theme-color: var(--text) !important; } .swiper-button-prev:after, .swiper-button-next:after { font-size: 1.2rem !important; font-weight: 700 !important; color: var(--swiper-theme-color); } .swiper-button-prev:hover, .swiper-button-next:hover { background: #fff !important; --swiper-theme-color: var(--accent) !important; } .swiper-button-prev:after { transform: translateX(-1px); } .swiper-button-next:after { transform: translateX(1px); } img[data-fancybox], a[data-fancybox] { cursor: zoom-in; } .highlight { position: relative; } .highlight .code .copy-btn { position: absolute; top: 0; right: 0; padding: 0px 0.5rem; font-weight: 700; visibility: hidden; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background: var(--card); display: block; cursor: pointer; margin-right: 4px; margin-top: 4px; border-radius: calc(16px - 4px); } .highlight:hover .code:before { visibility: hidden; } .highlight:hover .copy-btn { visibility: visible; } .highlight .code .copy-btn.success { background: #3dc550; color: #fff; visibility: visible; } .highlight .code .copy-btn.warning { background: #fa6400; color: #fff; visibility: visible; } .md-text .folding[child=codeblock] .code .copy-btn { z-index: 1; margin-right: 1rem; border-radius: 8px; } .cmt-body.beaudar { margin: 0 -4px; width: calc(100% + 8px); } .cmt-body.twikoo { --twikoo-theme: var(--theme); margin-top: 1.5rem; } .cmt-body.twikoo .tk-content .vemoji, .cmt-body.twikoo .tk-content .tk-owo-emotion { width: unset; border-radius: 8px; max-height: 24px; max-width: 100px; display: inline; margin: 0 0.25em; } .cmt-body.twikoo .tk-content img { max-width: 400px; max-height: 400px; border-radius: 8px; } .OwO .OwO-body { background-color: var(--block) !important; color: var(--text-p1) !important; } .OwO .OwO-body .OwO-items .OwO-item img { max-height: 26px; width: unset; } .twikoo .el-input-group__append, .twikoo .el-input-group__prepend, .twikoo .el-input__inner, .twikoo .el-textarea__inner, .twikoo .tk-preview-container { border-color: var(--block-border); } .twikoo .el-input__inner:focus, .twikoo .el-textarea__inner:focus { border-color: var(--twikoo-theme) !important; } .twikoo .el-button:not(.el-button--primary):not(.el-button--text):active, .twikoo .el-button:not(.el-button--primary):not(.el-button--text):focus, .twikoo .el-button:not(.el-button--primary):not(.el-button--text):hover { color: var(--twikoo-theme) !important; border-color: var(--link-a20) !important; background-color: var(--block) !important; } .twikoo .el-button--primary.is-disabled:active, .twikoo .el-button--primary.is-disabled:focus, .twikoo .el-button--primary.is-disabled:hover { background-color: var(--link-a20) !important; } .twikoo .el-button:focus, .twikoo .el-button:hover { border-color: var(--link-a20); } .twikoo .el-button:active { color: var(--twikoo-theme); border-color: var(--twikoo-theme); } .twikoo .el-button.is-active, .twikoo .el-button.is-plain:active { color: var(--twikoo-theme); border-color: var(--twikoo-theme); } .twikoo .el-button--primary { background-color: var(--twikoo-theme); border-color: var(--twikoo-theme) !important; } .twikoo .el-button--primary:focus, .twikoo .el-button--primary:hover { background: var(--accent); border-color: var(--accent) !important; } .twikoo .el-button--primary:active { background: var(--twikoo-theme); border-color: var(--twikoo-theme); } .twikoo .el-button--primary.is-active { background: var(--twikoo-theme); border-color: var(--twikoo-theme); } .twikoo .el-button--primary.is-disabled, .twikoo .el-button--primary.is-disabled:active, .twikoo .el-button--primary.is-disabled:focus, .twikoo .el-button--primary.is-disabled:hover { background-color: var(--link-a20) !important; border-color: var(--link-a20) !important; } .twikoo .el-button--primary.is-plain { color: var(--twikoo-theme) !important; border-color: var(--link-a20); } .twikoo .el-button--primary.is-plain:focus, .twikoo .el-button--primary.is-plain:hover { background: var(--twikoo-theme) !important; border-color: var(--twikoo-theme); } .twikoo .el-button--primary.is-plain:active { background: var(--twikoo-theme) !important; border-color: var(--twikoo-theme); } .twikoo .tk-action-icon svg { color: var(--text-p2); } .twikoo .tk-action-link { color: var(--text-p1); } .twikoo .tk-action-link:hover { color: var(--twikoo-theme); } .twikoo .el-loading-spinner .path { stroke: var(--twikoo-theme); } .twikoo .tk-icon.__comments { color: var(--twikoo-theme); } .twikoo b, .twikoo strong { color: var(--text-p1); } .twikoo a { cursor: pointer; } .twikoo .tk-time, .twikoo .tk-extras { color: var(--text-p3); } .twikoo .tk-expand { width: auto; border: none; padding: 6px 2rem; border-radius: 16px; background: var(--block); color: var(--text-p1); line-height: 2; font-size: 14px; font-weight: 500; transition: background 0.2s ease-out; -moz-transition: background 0.2s ease-out; -webkit-transition: background 0.2s ease-out; -o-transition: background 0.2s ease-out; } .twikoo .tk-expand:hover { background: var(--card); } .twikoo .tk-comment { margin-top: 0; margin-bottom: 1rem; border: 1px dashed var(--block-border); padding: 1rem; border-radius: 16px; background: var(--block); } .twikoo .tk-comment:hover { border-color: var(--twikoo-theme); } .twikoo .tk-main .tk-comment { margin-top: 1rem; margin-bottom: 0; } .twikoo .tk-submit { padding: 1rem 1rem 0 1rem; border-radius: 16px; background: var(--block); } .twikoo .tk-tag { vertical-align: 0.1em; } .twikoo .tk-tag-green { border: none; background-color: var(--link-a20); color: var(--twikoo-theme); } .twikoo .tk-comments-title .tk-comments-count { margin-top: 15px; color: var(--text-p1); } .twikoo .tk-comments-title .tk-comments-count span:nth-child(1) { font-size: 1.5rem; font-weight: 700; } .twikoo .tk-comments-title .tk-comments-count span:nth-child(2) { font-size: 1rem; } .twikoo .tk-comments-no { color: var(--text-p1); } .cmt-body.utterances { margin: 0 -4px; width: calc(100% + 8px); } .related-wrap#comments .cmt-body svg.loading { top: 62px; } .cmt-body { --waline-font-size: 0.9375rem; /* 常规颜色 */ --waline-white: #fff; --waline-light-grey: #999; --waline-dark-grey: #666; /* 主题色 */ --waline-theme-color: var(--theme); --waline-active-color: var(--accent); /* 布局颜色 */ --waline-color: #444; --waline-bgcolor: #fff; --waline-bgcolor-light: #f8f8f8; --waline-bgcolor-hover: #f0f0f0; --waline-border-color: #ddd; --waline-disable-bgcolor: #f8f8f8; --waline-disable-color: #bbb; --waline-code-bgcolor: #282c34; /* 特殊颜色 */ --waline-bq-color: #f0f0f0; /* 头像 */ --waline-avatar-size: 3.25rem; --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13); /* 徽章 */ --waline-badge-color: #3498db; --waline-badge-font-size: 0.725em; /* 信息 */ --waline-info-bgcolor: #f8f8f8; --waline-info-color: #999; --waline-info-font-size: 0.725em; /* 渲染选择 */ --waline-border: 1px solid var(--waline-border-color); --waline-avatar-radius: 50%; --waline-box-shadow: none; } .cmt-body .wl-panel { margin: 0.5em 0 !important; } .cmt-body .wl-meta-head { padding: 0 !important; } :root[data-theme="dark"] .cmt-body.waline { --waline-white: #000; --waline-light-grey: #666; --waline-dark-grey: #999; /* 布局颜色 */ --waline-color: #fff; --waline-bgcolor: var(--block); --waline-bgcolor-light: #272727; --waline-border-color: #333; --waline-disable-bgcolor: #444; --waline-disable-color: #272727; /* 特殊颜色 */ --waline-bq-color: #272727; /* 其他颜色 */ --waline-info-bgcolor: #272727; --waline-info-color: #666; } :root[data-theme="dark"] .cmt-body.waline .wl-count { padding: 0.375em; font-weight: bold; font-size: 1.25em; color: #fff; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .cmt-body.waline { --waline-white: #000; --waline-light-grey: #666; --waline-dark-grey: #999; --waline-color: #fff; --waline-bgcolor: var(--block); --waline-bgcolor-light: #272727; --waline-border-color: #333; --waline-disable-bgcolor: #444; --waline-disable-color: #272727; --waline-bq-color: #272727; --waline-info-bgcolor: #272727; --waline-info-color: #666; } :root:not([data-theme]) .cmt-body.waline .wl-count { padding: 0.375em; font-weight: bold; font-size: 1.25em; color: #fff; } } .cmt-body.artalk .artalk { margin-top: 1rem; } .cmt-body.artalk .artalk .atk-editor-plug-preview::-webkit-scrollbar { height: 0; width: 0; } .cmt-body.artalk .artalk .atk-editor-plug-preview::-webkit-scrollbar-track-piece { background: transparent; } .cmt-body.artalk .artalk .atk-editor-plug-preview::-webkit-scrollbar-thumb { background: var(--text-meta); cursor: pointer; border-radius: 0; } .cmt-body.artalk .artalk .atk-editor-plug-preview::-webkit-scrollbar-thumb:hover { background: var(--text-p3); } .cmt-body.artalk .artalk .atk-main-editor { border-radius: 16px; } .cmt-body.artalk .artalk .atk-main-editor .atk-header, .cmt-body.artalk .artalk .atk-main-editor .atk-editor-user-wrap { border-bottom: 1px dashed var(--block-border); padding: 0.5rem 1rem; margin: 0; } .cmt-body.artalk .artalk .atk-main-editor .atk-header .atk-editor-user, .cmt-body.artalk .artalk .atk-main-editor .atk-editor-user-wrap .atk-editor-user { padding: 0; } .cmt-body.artalk .artalk .atk-main-editor .atk-editor-user-wrap:empty { visibility: hidden; padding: 0; } .cmt-body.artalk .artalk .atk-main-editor >.atk-bottom { padding: 8px; } .cmt-body.artalk .artalk .atk-main-editor >.atk-bottom .atk-state-btn { height: 2rem; border-radius: 100px; } .cmt-body.artalk .artalk .atk-main-editor >.atk-bottom .atk-state-btn .atk-cancel { background: none; } .cmt-body.artalk .artalk .atk-main-editor >.atk-bottom .atk-plug-btn { border-radius: 32px; height: 2rem; width: 2rem; } .cmt-body.artalk .artalk .atk-main-editor >.atk-bottom .atk-send-btn { height: 2rem; border-radius: 100px; min-width: 5em; transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .cmt-body.artalk .artalk .atk-main-editor >.atk-bottom .atk-send-btn:hover { --at-color-main: var(--accent); } .cmt-body.artalk .artalk .atk-main-editor >.atk-bottom .atk-send-btn:empty { display: none; } .cmt-body.artalk .artalk .atk-list-comments-wrap>.atk-comment-wrap { border-radius: 16px; background: var(--card); box-shadow: 0 0 8px 0px rgba(0,0,0,0.02); } .cmt-body.artalk .artalk .atk-list-comments-wrap>.atk-comment-wrap >.atk-comment { padding: 1rem; } .cmt-body.artalk .artalk .atk-list-comments-wrap>.atk-comment-wrap+.atk-comment-wrap { margin-top: 0.5rem; } .cmt-body.artalk .artalk .atk-comment-children { border-top: 1px dashed var(--block-border); margin-top: 0.5rem; } .cmt-body.artalk .artalk .atk-avatar { padding: 0; } .cmt-body.artalk .artalk .atk-avatar img { border-radius: 50%; width: 36px; height: 36px; } .cmt-body.artalk .artalk .atk-comment-wrap>.atk-comment>.atk-main { margin-left: calc(36px + 0.5rem); } .cmt-body.artalk .artalk .atk-comment>.atk-main>.atk-header .atk-item.atk-nick { color: var(--text-p3); font-weight: 500; } .cmt-body.artalk .artalk .atk-badge-wrap span { border-radius: 100px; } .cmt-body.artalk .artalk .atk-height-limit-btn { padding: 0.5rem 2rem; } .cmt-body.artalk .artalk .atk-list-read-more { margin-top: 2.5rem; padding-bottom: 1.5rem; } .cmt-body.artalk .artalk .atk-list-read-more .atk-list-read-more-inner { padding: 1rem 2rem; border-radius: 8px; height: 3rem; width: 12rem; margin: -1.5rem auto 0; } .cmt-body.artalk .artalk .atk-list-read-more .atk-list-read-more-inner:hover { background: var(--card); } .cmt-body.artalk .artalk .atk-list-footer .atk-copyright { padding: 1rem; } .cmt-body.artalk .artalk .atk-error-layer { background: none; } .with-fancybox .atk-content img:not([atk-emoticon]) { cursor: zoom-in; } .cmt-body .artalk, .cmt-body .atk-layer-wrap, .cmt-body .artalk.atk-dark-mode, .cmt-body .atk-layer-wrap.atk-dark-mode { --at-color-font: var(--text-p1); --at-color-deep: var(--text-p2); --at-color-sub: var(--text-p3); --at-color-grey: var(--text-p4); --at-color-meta: var(--text-p4); --at-color-border: var(--block-border); --at-color-light: var(--link); --at-color-bg: var(--card); --at-color-bg-transl: var(--card); --at-color-bg-grey: var(--block); --at-color-bg-grey-transl: var(--block-border); --at-color-bg-light: var(--theme); --at-color-main: var(--theme); --at-color-red: #f44336; --at-color-green: #3dc550; --at-color-gradient: linear-gradient(180deg, transparent, var(--card), 50%, var(--card)); } .cmt-body.artalk .atk-comment>.atk-main>.atk-body { overflow: visible; } .cmt-body.artalk .artalk pre code, .cmt-body.artalk .atk-layer-wrap pre code { background: none; } .cmt-body.artalk .atk-main-editor>.atk-textarea-wrap>.atk-textarea { background: none; padding: 1rem; margin: 0; border: none; } .cmt-body.artalk .atk-loading { border-radius: 16px; } .cmt-body.artalk .atk-main-editor .atk-editor-user-wrap .atk-editor-user .atk-user-profile-btn { padding: 0; } .cmt-body.artalk:hover { background: none; } .cmt-body.artalk .artalk>.atk-list>.atk-list-header { padding: 0.5rem 1rem; } .cmt-body.artalk .artalk>.atk-list>.atk-list-header .atk-comment-count { display: flex; align-items: baseline; } .cmt-body.artalk .artalk>.atk-list>.atk-list-header .atk-dropdown-wrap .atk-arrow-down-icon { height: 8px; } .cmt-body.artalk .artalk>.atk-list>.atk-list-header .atk-text { display: block; } .cmt-body.artalk .atk-notify-wrap .atk-notify { border-radius: 8px; margin: 8px; } .cmt-body.artalk .atk-editor-plug-emoticons>.atk-grp-wrap>.atk-grp { padding: 0.5rem; margin-bottom: 32px; } .cmt-body.artalk .atk-editor-plug-emoticons>.atk-grp-wrap>.atk-grp[data-type=image]>.atk-item { width: 3rem; height: 3rem; margin: 0; border-radius: 4px; padding: 0.5rem; } .cmt-body.artalk .atk-editor-plug-emoticons>.atk-grp-wrap>.atk-grp[data-type=image]>.atk-item >img { border-radius: 4px; } .md-text .cmt-body.artalk .artalk { --gap-p: 1rem; } .md-text .cmt-body.artalk .artalk p { line-height: 1.5; font-size: 0.9375rem; } .md-text .cmt-body.artalk .artalk p >img { margin: var(--gap-p) auto; border-radius: 8px; } .md-text .cmt-body.artalk .artalk a>img { display: inline; } .md-text .cmt-body.artalk .artalk img[atk-emoticon] { max-height: 1.5em; transform: scale(1.2); margin: 0 4px; vertical-align: bottom; border-radius: 4px; } .md-text .cmt-body.artalk .artalk ul li, .md-text .cmt-body.artalk .artalk ol li { font-size: 0.875rem; } .md-text .cmt-body.artalk .artalk blockquote { position: relative; border-left: none; background: none; padding: 0.25rem 1rem; } .md-text .cmt-body.artalk .artalk blockquote p { color: var(--text-p3); } .md-text .cmt-body.artalk .artalk .atk-content a { --at-color-main: var(--link); }