|
|
| 第1行： |
第1行： |
| <div style=" --header-size: 3.5rem; | | <div style="border-radius: 8px;display: block;flex: 1;flex-direction: column;font-size: 100%;margin: .25rem 0;padding: 5px 28px;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;-webkit-box-direction: normal;-webkit-box-orient: horizontal;flex-direction: row;"> |
| --header-card-maxheight: 70vh;
| | <h2 style="font-size: 1.3em;font-weight: 400;margin-bottom: 0;">{{{标题}}}</h2> |
| --width-layout: 1080px;
| | <p>{{{内容}}}</p> |
| --width-layout--extended: calc(var(--width-layout) * 1.5);
| |
| --width-toc: 240px;
| |
| --line-height: 1.6;
| |
| --line-height-xs: 1.25;
| |
| --line-height-sm: 1.375;
| |
| --space-unit: 1rem;
| |
| --space-xxs: calc(0.25 * var(--space-unit));
| |
| --space-xs: calc(0.5 * var(--space-unit));
| |
| --space-sm: calc(0.75 * var(--space-unit));
| |
| --space-md: var(--space-unit);
| |
| --space-lg: calc(1.25 * var(--space-unit));
| |
| --space-xl: calc(1.5 * var(--space-unit));
| |
| --space-xxl: calc(2 * var(--space-unit));
| |
| --margin-layout: calc((100vw - var(--width-layout)) / 2);
| |
| --padding-page: 16px;
| |
| --color-primary__h: 220;
| |
| --color-primary__s: 60%;
| |
| --color-primary__l: 50%;
| |
| --color-surface-0: hsl(0,0%,100%);
| |
| --color-surface-1: hsl(0,0%,100%);
| |
| --color-surface-2: hsl(210,17%,98%);
| |
| --color-surface-3: hsl(220,17%,93%);
| |
| --color-surface-4: hsl(213,9%,80%);
| |
| --color-primary: hsl(var(--color-primary__h),var(--color-primary__s),var(--color-primary__l));
| |
| --color-primary--hover: hsl(var(--color-primary__h),var(--color-primary__s),calc(var(--color-primary__l) * 1.2));
| |
| --color-primary--active: hsl(var(--color-primary__h),var(--color-primary__s),calc(var(--color-primary__l) * 0.8));
| |
| --background-color-primary--hover: hsl(var(--color-primary__h),var(--color-primary__s),95%);
| |
| --background-color-primary--active: hsl(var(--color-primary__h),var(--color-primary__s),90%);
| |
| --color-surface-2--hover: hsl(210,17%,100%);
| |
| --color-surface-2--active: hsl(210,17%,96%);
| |
| --box-shadow-card: 0 2.8px 2.2px -4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),0 6.7px 5.3px -4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),0 12.5px 10px -4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),0 22.3px 17.9px -4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),0 41.8px 33.4px -4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),0 100px 80px -4px hsl(var(--surface-shadow) / var(--shadow-strength));
| |
| --box-shadow-dialog: 0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength));
| |
| --surface-shadow: var(--color-primary__h) 10% 20%;
| |
| --shadow-strength: 0.02;
| |
| --background-color-overlay: rgba(255,255,255,0.95);
| |
| --background-color-overlay--lighter: rgba(255,255,255,0.6);
| |
| --background-color-icon: rgba(0,0,0,0.6);
| |
| --background-color-icon--hover: rgba(0,0,0,0.8);
| |
| --background-color-icon--active: #000000;
| |
| --background-color-quiet--hover: rgba(0,0,0,0.07000000000000001);
| |
| --background-color-quiet--active: rgba(0,0,0,0.09);
| |
| --background-color-destructive: #fee7e6;
| |
| --background-color-warning: #fef6e7;
| |
| --background-color-success: #d5fdf4;
| |
| --color-base: #54595d;
| |
| --color-base--emphasized: #202122;
| |
| --color-base--subtle: #72777d;
| |
| --color-destructive: #dd3333;
| |
| --color-destructive--hover: #e35b5b;
| |
| --color-destructive--active: #b32424;
| |
| --color-warning: #ffcc33;
| |
| --color-success: #00af89;
| |
| --color-link-new: #dd3333;
| |
| --color-link-new--hover: #e35b5b;
| |
| --color-link-new--active: #b32424;
| |
| --opacity-base--disabled: 0.3;
| |
| --opacity-icon-base: 0.6;
| |
| --opacity-icon-base--hover: 0.8;
| |
| --opacity-icon-base--active: 1;
| |
| --size-icon: 1.25rem;
| |
| --border-color-base: rgba(0,0,0,0.05);
| |
| --border-color-base--lighter: rgba(0,0,0,0.02);
| |
| --border-color-base--darker: rgba(0,0,0,0.08);
| |
| --border-color-input: rgba(0,0,0,0.05);
| |
| --border-color-input--hover: rgba(0,0,0,0.4);
| |
| --border-radius--small: 4px;
| |
| --border-radius--medium: 8px;
| |
| --border-radius--large: 12px;
| |
| --border-radius--pill: 9999px;
| |
| --font-family-base: 'Roboto','Noto Sans CJK',system-ui,-apple-system,sans-serif;
| |
| --font-family-serif: 'Roboto Serif','Noto Serif CJK','Linux Libertine','Georgia','Times','Source Serif Pro',serif;
| |
| --font-family-monospace: 'Roboto Mono','Menlo','Consolas','Liberation Mono','Fira Code','Courier New',monospace;
| |
| --font-size-h1: 1.75rem;
| |
| --font-size-h2: 1.375rem;
| |
| --font-size-h3: 1.125rem;
| |
| --font-size-h4: 1rem;
| |
| --font-size-h5: 1rem;
| |
| --font-size-h6: 1rem;
| |
| --font-weight-normal: 400;
| |
| --font-weight-medium: 500;
| |
| --font-weight-semibold: 600;
| |
| --font-weight-bold: 700;
| |
| --box-shadow-plist: 0 3px 10px rgb(0 0 0 / 4%),0 -3px 10px rgb(0 0 0 / 4%);
| |
| font-family: var(--font-family-base);
| |
| font-weight: var(--font-weight-normal);
| |
| accent-color: var(--color-primary);
| |
| color: var(--color-base);
| |
| direction: ltr;
| |
| line-height: var(--line-height);
| |
| position: relative;
| |
| padding: 15px;
| |
| background: var(--color-surface-1);
| |
| border-radius: 15px;
| |
| box-shadow: 0 3px 6px rgba(0,0,0,0.04),0 3px 6px rgba(0,0,0,0.0575);
| |
| font-size: 0.875rem;
| |
| grid-column: span 2;
| |
| grid-row: span 2;
| |
| display: flex;
| |
| justify-content: space-between;
| |
| flex-direction: column;">
| |
| <h2 style="font-size: 1rem;font-weight: 800;margin-bottom: 0;">{{{标题}}}</h2> | |
| <p style=" --header-size: 3.5rem; | |
| --header-card-maxheight: 70vh;
| |
| --width-layout: 1080px;
| |
| --width-layout--extended: calc(var(--width-layout) * 1.5);
| |
| --width-toc: 240px;
| |
| --line-height: 1.6;
| |
| --line-height-xs: 1.25;
| |
| --line-height-sm: 1.375;
| |
| --space-unit: 1rem;
| |
| --space-xxs: calc(0.25 * var(--space-unit));
| |
| --space-xs: calc(0.5 * var(--space-unit));
| |
| --space-sm: calc(0.75 * var(--space-unit));
| |
| --space-md: var(--space-unit);
| |
| --space-lg: calc(1.25 * var(--space-unit));
| |
| --space-xl: calc(1.5 * var(--space-unit));
| |
| --space-xxl: calc(2 * var(--space-unit));
| |
| --margin-layout: calc((100vw - var(--width-layout)) / 2);
| |
| --padding-page: 16px;
| |
| --color-primary__h: 220;
| |
| --color-primary__s: 60%;
| |
| --color-primary__l: 50%;
| |
| --color-surface-0: hsl(0,0%,100%);
| |
| --color-surface-1: hsl(0,0%,100%);
| |
| --color-surface-2: hsl(210,17%,98%);
| |
| --color-surface-3: hsl(220,17%,93%);
| |
| --color-surface-4: hsl(213,9%,80%);
| |
| --color-primary: hsl(var(--color-primary__h),var(--color-primary__s),var(--color-primary__l));
| |
| --color-primary--hover: hsl(var(--color-primary__h),var(--color-primary__s),calc(var(--color-primary__l) * 1.2));
| |
| --color-primary--active: hsl(var(--color-primary__h),var(--color-primary__s),calc(var(--color-primary__l) * 0.8));
| |
| --background-color-primary--hover: hsl(var(--color-primary__h),var(--color-primary__s),95%);
| |
| --background-color-primary--active: hsl(var(--color-primary__h),var(--color-primary__s),90%);
| |
| --color-surface-2--hover: hsl(210,17%,100%);
| |
| --color-surface-2--active: hsl(210,17%,96%);
| |
| --box-shadow-card: 0 2.8px 2.2px -4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),0 6.7px 5.3px -4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),0 12.5px 10px -4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),0 22.3px 17.9px -4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),0 41.8px 33.4px -4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),0 100px 80px -4px hsl(var(--surface-shadow) / var(--shadow-strength));
| |
| --box-shadow-dialog: 0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength));
| |
| --surface-shadow: var(--color-primary__h) 10% 20%;
| |
| --shadow-strength: 0.02;
| |
| --background-color-overlay: rgba(255,255,255,0.95);
| |
| --background-color-overlay--lighter: rgba(255,255,255,0.6);
| |
| --background-color-icon: rgba(0,0,0,0.6);
| |
| --background-color-icon--hover: rgba(0,0,0,0.8);
| |
| --background-color-icon--active: #000000;
| |
| --background-color-quiet--hover: rgba(0,0,0,0.07000000000000001);
| |
| --background-color-quiet--active: rgba(0,0,0,0.09);
| |
| --background-color-destructive: #fee7e6;
| |
| --background-color-warning: #fef6e7;
| |
| --background-color-success: #d5fdf4;
| |
| --color-base: #54595d;
| |
| --color-base--emphasized: #202122;
| |
| --color-base--subtle: #72777d;
| |
| --color-destructive: #dd3333;
| |
| --color-destructive--hover: #e35b5b;
| |
| --color-destructive--active: #b32424;
| |
| --color-warning: #ffcc33;
| |
| --color-success: #00af89;
| |
| --color-link-new: #dd3333;
| |
| --color-link-new--hover: #e35b5b;
| |
| --color-link-new--active: #b32424;
| |
| --opacity-base--disabled: 0.3;
| |
| --opacity-icon-base: 0.6;
| |
| --opacity-icon-base--hover: 0.8;
| |
| --opacity-icon-base--active: 1;
| |
| --size-icon: 1.25rem;
| |
| --border-color-base: rgba(0,0,0,0.05);
| |
| --border-color-base--lighter: rgba(0,0,0,0.02);
| |
| --border-color-base--darker: rgba(0,0,0,0.08);
| |
| --border-color-input: rgba(0,0,0,0.05);
| |
| --border-color-input--hover: rgba(0,0,0,0.4);
| |
| --border-radius--small: 4px;
| |
| --border-radius--medium: 8px;
| |
| --border-radius--large: 12px;
| |
| --border-radius--pill: 9999px;
| |
| --font-family-base: 'Roboto','Noto Sans CJK',system-ui,-apple-system,sans-serif;
| |
| --font-family-serif: 'Roboto Serif','Noto Serif CJK','Linux Libertine','Georgia','Times','Source Serif Pro',serif;
| |
| --font-family-monospace: 'Roboto Mono','Menlo','Consolas','Liberation Mono','Fira Code','Courier New',monospace;
| |
| --font-size-h1: 1.75rem;
| |
| --font-size-h2: 1.375rem;
| |
| --font-size-h3: 1.125rem;
| |
| --font-size-h4: 1rem;
| |
| --font-size-h5: 1rem;
| |
| --font-size-h6: 1rem;
| |
| --font-weight-normal: 400;
| |
| --font-weight-medium: 500;
| |
| --font-weight-semibold: 600;
| |
| --font-weight-bold: 700;
| |
| --box-shadow-plist: 0 3px 10px rgb(0 0 0 / 4%),0 -3px 10px rgb(0 0 0 / 4%);
| |
| font-family: var(--font-family-base);
| |
| font-weight: var(--font-weight-normal);
| |
| accent-color: var(--color-primary);
| |
| direction: ltr;
| |
| line-height: var(--line-height);
| |
| color: var(--color-base--subtle);
| |
| font-size: 0.8125rem;
| |
| letter-spacing: 0.75px;
| |
| margin-top: 5px;
| |
| margin-bottom: 15px;">{{{内容}}}</p>
| |
| </div> | | </div> |
