Spaces:
Runtime error
Runtime error
| :root { | |
| --chatbot-color-light: #F3F3F3; | |
| --chatbot-color-dark: #121111; | |
| --name: soft; | |
| --primary-50: #02C160; | |
| --primary-100: rgba(137, 207, 240, 0.2); | |
| --primary-200: #02C160; | |
| --primary-300: rgba(2, 193, 96, 0.32); | |
| --primary-400: rgba(2, 193, 96, 0.32); | |
| --primary-500: #4169E1; | |
| --primary-600: #4169E1; | |
| --primary-700: rgba(2, 193, 96, 0.32); | |
| --primary-800: rgba(2, 193, 96, 0.32); | |
| --primary-900: #02C160; | |
| --primary-950: #02C160; | |
| --secondary-50: #576b95; | |
| --secondary-100: #576b95; | |
| --secondary-200: #576b95; | |
| --secondary-300: #576b95; | |
| --secondary-400: #576b95; | |
| --secondary-500: #576b95; | |
| --secondary-600: #576b95; | |
| --secondary-700: #576b95; | |
| --secondary-800: #576b95; | |
| --secondary-900: #576b95; | |
| --secondary-950: #576b95; | |
| --neutral-50: #f9fafb; | |
| --neutral-100: #f3f4f6; | |
| --neutral-200: #e5e7eb; | |
| --neutral-300: #d1d5db; | |
| --neutral-400: #B2B2B2; | |
| --neutral-500: #808080; | |
| --neutral-600: #636363; | |
| --neutral-700: #515151; | |
| --neutral-800: #393939; | |
| --neutral-900: #272727; | |
| --neutral-950: #171717; | |
| --spacing-xxs: 1px; | |
| --spacing-xs: 2px; | |
| --spacing-sm: 4px; | |
| --spacing-md: 6px; | |
| --spacing-lg: 8px; | |
| --spacing-xl: 10px; | |
| --spacing-xxl: 16px; | |
| --radius-xxs: 1px; | |
| --radius-xs: 1px; | |
| --radius-sm: 2px; | |
| --radius-md: 4px; | |
| --radius-lg: 6px; | |
| --radius-xl: 8px; | |
| --radius-xxl: 12px; | |
| --text-xxs: 9px; | |
| --text-xs: 10px; | |
| --text-sm: 12px; | |
| --text-md: 14px; | |
| --text-lg: 16px; | |
| --text-xl: 22px; | |
| --text-xxl: 26px; | |
| --font: 'Montserrat', 'ui-sans-serif', 'system-ui', sans-serif; | |
| --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace; | |
| --body-background-fill: var(--background-fill-primary); | |
| --body-text-color: var(--neutral-800); | |
| --body-text-size: var(--text-md); | |
| --body-text-weight: 400; | |
| --embed-radius: var(--radius-lg); | |
| --color-accent: var(--primary-500); | |
| --color-accent-soft: var(--primary-50); | |
| --background-fill-primary: white; | |
| --background-fill-secondary: var(--neutral-50); | |
| --border-color-accent: var(--primary-300); | |
| --border-color-primary: var(--neutral-200); | |
| --link-text-color: var(--secondary-600); | |
| --link-text-color-active: var(--secondary-600); | |
| --link-text-color-hover: var(--secondary-700); | |
| --link-text-color-visited: var(--secondary-500); | |
| --body-text-color-subdued: var(--neutral-400); | |
| --shadow-drop: 0 1px 4px 0 rgb(0 0 0 / 0.1); | |
| --shadow-drop-lg: 0 2px 5px 0 rgb(0 0 0 / 0.1); | |
| --shadow-inset: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset; | |
| --shadow-spread: 6px; | |
| --block-background-fill: white; | |
| --block-border-color: var(--border-color-primary); | |
| --block-border-width: 0px; | |
| --block-info-text-color: var(--body-text-color-subdued); | |
| --block-info-text-size: var(--text-sm); | |
| --block-info-text-weight: 400; | |
| --block-label-background-fill: var(--primary-100); | |
| --block-label-border-color: var(--border-color-primary); | |
| --block-label-border-width: 1px; | |
| --block-label-text-color: var(--primary-500); | |
| --block-label-margin: var(--spacing-md); | |
| --block-label-padding: var(--spacing-sm) var(--spacing-md); | |
| --block-label-radius: var(--radius-md); | |
| --block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px); | |
| --block-label-text-size: var(--text-md); | |
| --block-label-text-weight: 600; | |
| --block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px); | |
| --block-radius: var(--radius-lg); | |
| --block-shadow: none; | |
| --block-title-background-fill: var(--primary-100); | |
| --block-title-border-color: none; | |
| --block-title-border-width: 0px; | |
| --block-title-text-color: var(--primary-500); | |
| --block-title-padding: var(--block-label-padding); | |
| --block-title-radius: var(--block-label-radius); | |
| --block-title-text-size: var(--text-md); | |
| --block-title-text-weight: 600; | |
| --container-radius: var(--radius-lg); | |
| --form-gap-width: 0px; | |
| --layout-gap: var(--spacing-xxl); | |
| --panel-background-fill: var(--background-fill-secondary); | |
| --panel-border-color: var(--border-color-primary); | |
| --panel-border-width: 1px; | |
| --section-header-text-size: var(--text-md); | |
| --section-header-text-weight: 400; | |
| --checkbox-background-color: var(--background-fill-primary); | |
| --checkbox-background-color-focus: var(--checkbox-background-color); | |
| --checkbox-background-color-hover: var(--checkbox-background-color); | |
| --checkbox-background-color-selected: var(--primary-600); | |
| --checkbox-border-color: var(--neutral-100); | |
| --checkbox-border-color-focus: var(--primary-500); | |
| --checkbox-border-color-hover: var(--neutral-300); | |
| --checkbox-border-color-selected: var(--primary-600); | |
| --checkbox-border-radius: var(--radius-sm); | |
| --checkbox-border-width: 1px; | |
| --checkbox-label-background-fill: var(--button-secondary-background-fill); | |
| --checkbox-label-background-fill-hover: var(--button-secondary-background-fill-hover); | |
| --checkbox-label-background-fill-selected: var(--primary-500); | |
| --checkbox-label-border-color: var(--border-color-primary); | |
| --checkbox-label-border-color-hover: var(--checkbox-label-border-color); | |
| --checkbox-label-border-width: var(--input-border-width); | |
| --checkbox-label-gap: var(--spacing-lg); | |
| --checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md)); | |
| --checkbox-label-shadow: var(--shadow-drop-lg); | |
| --checkbox-label-text-size: var(--text-md); | |
| --checkbox-label-text-weight: 400; | |
| --checkbox-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); | |
| --radio-circle: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); | |
| --checkbox-shadow: none; | |
| --checkbox-label-text-color: var(--body-text-color); | |
| --checkbox-label-text-color-selected: white; | |
| --error-background-fill: #fee2e2; | |
| --error-border-color: #fecaca; | |
| --error-border-width: 1px; | |
| --error-text-color: #ef4444; | |
| --input-background-fill: #F6F6F6; | |
| --input-background-fill-focus: var(--secondary-500); | |
| --input-background-fill-hover: var(--input-background-fill); | |
| --input-border-color: var(--neutral-50); | |
| --input-border-color-focus: var(--secondary-300); | |
| --input-border-color-hover: var(--input-border-color); | |
| --input-border-width: 0px; | |
| --input-padding: var(--spacing-xl); | |
| --input-placeholder-color: var(--neutral-400); | |
| --input-radius: var(--radius-lg); | |
| --input-shadow: var(--shadow-drop); | |
| --input-shadow-focus: var(--shadow-drop-lg); | |
| --input-text-size: var(--text-md); | |
| --input-text-weight: 400; | |
| --loader-color: var(--color-accent); | |
| --prose-text-size: var(--text-md); | |
| --prose-text-weight: 400; | |
| --prose-header-text-weight: 600; | |
| --slider-color: var(--primary-500); | |
| --stat-background-fill: var(--primary-300); | |
| --table-border-color: var(--neutral-300); | |
| --table-even-background-fill: white; | |
| --table-odd-background-fill: var(--neutral-50); | |
| --table-radius: var(--radius-lg); | |
| --table-row-focus: var(--color-accent-soft); | |
| --button-border-width: var(--input-border-width); | |
| --button-cancel-background-fill: var(--button-secondary-background-fill); | |
| --button-cancel-background-fill-hover: var(--button-secondary-background-fill-hover); | |
| --button-cancel-border-color: var(--button-secondary-border-color); | |
| --button-cancel-border-color-hover: var(--button-cancel-border-color); | |
| --button-cancel-text-color: var(--button-secondary-text-color); | |
| --button-cancel-text-color-hover: var(--button-cancel-text-color); | |
| --button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg)); | |
| --button-large-radius: var(--radius-lg); | |
| --button-large-text-size: var(--text-lg); | |
| --button-large-text-weight: 600; | |
| --button-primary-background-fill: #0476D0; | |
| --button-primary-background-fill-hover: #07C863; | |
| --button-primary-border-color: #06AE56; | |
| --button-primary-border-color-hover: var(--button-primary-border-color); | |
| --button-primary-text-color: #FFFFFF; | |
| --button-primary-text-color-hover: var(--button-primary-text-color); | |
| --button-secondary-background-fill: #F2F2F2; | |
| --button-secondary-background-fill-hover: var(--neutral-100); | |
| --button-secondary-border-color: var(--neutral-200); | |
| --button-secondary-border-color-hover: var(--button-secondary-border-color); | |
| --button-secondary-text-color: #393939; | |
| --button-secondary-text-color-hover: var(--button-secondary-text-color); | |
| --button-shadow: var(--shadow-drop-lg); | |
| --button-shadow-active: var(--shadow-inset); | |
| --button-shadow-hover: var(--shadow-drop-lg); | |
| --button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm)); | |
| --button-small-radius: var(--radius-lg); | |
| --button-small-text-size: var(--text-md); | |
| --button-small-text-weight: 400; | |
| --button-transition: background-color 0.2s ease; | |
| } | |
| #app_title { | |
| font-weight: var(--prose-header-text-weight); | |
| font-size: var(--text-xxl); | |
| line-height: 1.3; | |
| text-align: left; | |
| margin-top: 6px; | |
| white-space: nowrap; | |
| text-align: center; | |
| } | |
| #description { | |
| text-align: center; | |
| margin:16px 0 | |
| } | |
| /* 覆盖gradio的页脚信息QAQ */ | |
| /* footer { | |
| display: none !important; | |
| } */ | |
| /* #description { | |
| display: none; | |
| } */ | |
| #footer { | |
| text-align: center; | |
| } | |
| #footer div { | |
| display: inline-block; | |
| } | |
| #footer .versions{ | |
| font-size: 85%; | |
| opacity: 0.85; | |
| } | |
| #float_display { | |
| position: absolute; | |
| max-height: 30px; | |
| } | |
| /* user_info */ | |
| #user_info { | |
| white-space: nowrap; | |
| position: absolute; left: 8em; top: .2em; | |
| z-index: var(--layer-2); | |
| box-shadow: var(--block-shadow); | |
| border: none; border-radius: var(--block-label-radius); | |
| background: var(--color-accent); | |
| padding: var(--block-label-padding); | |
| font-size: var(--block-label-text-size); line-height: var(--line-sm); | |
| width: auto; min-height: 30px; | |
| opacity: 1; | |
| transition: opacity 0.3s ease-in-out; | |
| } | |
| #user_info .wrap { | |
| opacity: 0; | |
| } | |
| #user_info p { | |
| color: white; | |
| font-weight: var(--block-label-text-weight); | |
| } | |
| #user_info.hideK { | |
| opacity: 0; | |
| transition: opacity 1s ease-in-out; | |
| } | |
| /* status_display */ | |
| #status_display { | |
| display: flex; | |
| min-height: 2em; | |
| align-items: flex-end; | |
| justify-content: flex-end; | |
| } | |
| #status_display p { | |
| font-size: .85em; | |
| font-family: monospace; | |
| color: var(--body-text-color-subdued); | |
| } | |
| #status_display { | |
| transition: all 0.6s; | |
| } | |
| #chuanhu_chatbot { | |
| transition: height 0.3s ease; | |
| } | |
| /* usage_display */ | |
| .insert_block { | |
| position: relative; | |
| margin: 0; | |
| padding: .5em 1em; | |
| box-shadow: var(--block-shadow); | |
| border-width: var(--block-border-width); | |
| border-color: var(--block-border-color); | |
| border-radius: var(--block-radius); | |
| background: var(--block-background-fill); | |
| width: 100%; | |
| line-height: var(--line-sm); | |
| min-height: 2em; | |
| } | |
| #usage_display p, #usage_display span { | |
| margin: 0; | |
| font-size: .85em; | |
| color: var(--body-text-color-subdued); | |
| } | |
| .progress-bar { | |
| background-color: var(--input-background-fill);; | |
| margin: 0 1em; | |
| height: 20px; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| } | |
| .progress { | |
| background-color: var(--block-title-background-fill); | |
| height: 100%; | |
| border-radius: 10px; | |
| text-align: right; | |
| transition: width 0.5s ease-in-out; | |
| } | |
| .progress-text { | |
| /* color: white; */ | |
| color: var(--color-accent) ; | |
| font-size: 1em ; | |
| font-weight: bold; | |
| padding-right: 10px; | |
| line-height: 20px; | |
| } | |
| .apSwitch { | |
| top: 2px; | |
| display: inline-block; | |
| height: 24px; | |
| position: relative; | |
| width: 48px; | |
| border-radius: 12px; | |
| } | |
| .apSwitch input { | |
| display: none ; | |
| } | |
| .apSlider { | |
| background-color: var(--block-label-background-fill); | |
| bottom: 0; | |
| cursor: pointer; | |
| left: 0; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| transition: .4s; | |
| font-size: 18px; | |
| border-radius: 12px; | |
| } | |
| .apSlider::before { | |
| bottom: -1.5px; | |
| left: 1px; | |
| position: absolute; | |
| transition: .4s; | |
| content: "🌞"; | |
| } | |
| input:checked + .apSlider { | |
| background-color: var(--block-label-background-fill); | |
| } | |
| input:checked + .apSlider::before { | |
| transform: translateX(23px); | |
| content:"🌚"; | |
| } | |
| #submit_btn, #cancel_btn { | |
| height: 42px ; | |
| } | |
| #submit_btn::before { | |
| content: url("data:image/svg+xml, %3Csvg width='21px' height='20px' viewBox='0 0 21 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg id='page' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='send' transform='translate(0.435849, 0.088463)' fill='%23FFFFFF' fill-rule='nonzero'%3E %3Cpath d='M0.579148261,0.0428666046 C0.301105539,-0.0961547561 -0.036517765,0.122307382 0.0032026237,0.420210298 L1.4927172,18.1553639 C1.5125774,18.4334066 1.79062012,18.5922882 2.04880264,18.4929872 L8.24518329,15.8913017 L11.6412765,19.7441794 C11.8597387,19.9825018 12.2370824,19.8832008 12.3165231,19.5852979 L13.9450591,13.4882182 L19.7839562,11.0255541 C20.0619989,10.8865327 20.0818591,10.4694687 19.7839562,10.3105871 L0.579148261,0.0428666046 Z M11.6138902,17.0883151 L9.85385903,14.7195502 L0.718169621,0.618812241 L12.69945,12.9346347 L11.6138902,17.0883151 Z' id='shape'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/svg%3E"); | |
| height: 21px; | |
| } | |
| #cancel_btn::before { | |
| content: url("data:image/svg+xml,%3Csvg width='21px' height='21px' viewBox='0 0 21 21' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg id='pg' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cpath d='M10.2072007,20.088463 C11.5727865,20.088463 12.8594566,19.8259823 14.067211,19.3010209 C15.2749653,18.7760595 16.3386126,18.0538087 17.2581528,17.1342685 C18.177693,16.2147282 18.8982283,15.1527965 19.4197586,13.9484733 C19.9412889,12.7441501 20.202054,11.4557644 20.202054,10.0833163 C20.202054,8.71773046 19.9395733,7.43106036 19.4146119,6.22330603 C18.8896505,5.01555169 18.1673997,3.95018885 17.2478595,3.0272175 C16.3283192,2.10424615 15.2646719,1.3837109 14.0569176,0.865611739 C12.8491633,0.34751258 11.5624932,0.088463 10.1969073,0.088463 C8.83132146,0.088463 7.54636692,0.34751258 6.34204371,0.865611739 C5.1377205,1.3837109 4.07407321,2.10424615 3.15110186,3.0272175 C2.22813051,3.95018885 1.5058797,5.01555169 0.984349419,6.22330603 C0.46281914,7.43106036 0.202054,8.71773046 0.202054,10.0833163 C0.202054,11.4557644 0.4645347,12.7441501 0.9894961,13.9484733 C1.5144575,15.1527965 2.23670831,16.2147282 3.15624854,17.1342685 C4.07578877,18.0538087 5.1377205,18.7760595 6.34204371,19.3010209 C7.54636692,19.8259823 8.83475258,20.088463 10.2072007,20.088463 Z M10.2072007,18.2562448 C9.07493099,18.2562448 8.01471483,18.0452309 7.0265522,17.6232031 C6.03838956,17.2011753 5.17031614,16.6161693 4.42233192,15.8681851 C3.6743477,15.1202009 3.09105726,14.2521274 2.67246059,13.2639648 C2.25386392,12.2758022 2.04456558,11.215586 2.04456558,10.0833163 C2.04456558,8.95104663 2.25386392,7.89083047 2.67246059,6.90266784 C3.09105726,5.9145052 3.6743477,5.04643178 4.42233192,4.29844756 C5.17031614,3.55046334 6.036674,2.9671729 7.02140552,2.54857623 C8.00613703,2.12997956 9.06463763,1.92068122 10.1969073,1.92068122 C11.329177,1.92068122 12.3911087,2.12997956 13.3827025,2.54857623 C14.3742962,2.9671729 15.2440852,3.55046334 15.9920694,4.29844756 C16.7400537,5.04643178 17.3233441,5.9145052 17.7419408,6.90266784 C18.1605374,7.89083047 18.3698358,8.95104663 18.3698358,10.0833163 C18.3698358,11.215586 18.1605374,12.2758022 17.7419408,13.2639648 C17.3233441,14.2521274 16.7400537,15.1202009 15.9920694,15.8681851 C15.2440852,16.6161693 14.3760118,17.2011753 13.3878492,17.6232031 C12.3996865,18.0452309 11.3394704,18.2562448 10.2072007,18.2562448 Z M7.65444721,13.6242324 L12.7496608,13.6242324 C13.0584616,13.6242324 13.3003556,13.5384544 13.4753427,13.3668984 C13.6503299,13.1953424 13.7378234,12.9585951 13.7378234,12.6566565 L13.7378234,7.49968276 C13.7378234,7.19774418 13.6503299,6.96099688 13.4753427,6.78944087 C13.3003556,6.61788486 13.0584616,6.53210685 12.7496608,6.53210685 L7.65444721,6.53210685 C7.33878414,6.53210685 7.09345904,6.61788486 6.91847191,6.78944087 C6.74348478,6.96099688 6.65599121,7.19774418 6.65599121,7.49968276 L6.65599121,12.6566565 C6.65599121,12.9585951 6.74348478,13.1953424 6.91847191,13.3668984 C7.09345904,13.5384544 7.33878414,13.6242324 7.65444721,13.6242324 Z' id='shape' fill='%23FF3B30' fill-rule='nonzero'%3E%3C/path%3E %3C/g%3E %3C/svg%3E"); | |
| height: 21px; | |
| } | |
| /* list */ | |
| ol:not(.options), ul:not(.options) { | |
| padding-inline-start: 2em ; | |
| } | |
| /* 亮色(默认) */ | |
| #chuanhu_chatbot { | |
| background-color: var(--chatbot-color-light) ; | |
| color: #000000 ; | |
| } | |
| [data-testid = "bot"] { | |
| background-color: #FFFFFF ; | |
| } | |
| [data-testid = "user"] { | |
| background-color: #95EC69 ; | |
| } | |
| /* 暗色 */ | |
| .dark #chuanhu_chatbot { | |
| background-color: var(--chatbot-color-dark) ; | |
| color: #FFFFFF ; | |
| } | |
| .dark [data-testid = "bot"] { | |
| background-color: #2C2C2C ; | |
| } | |
| .dark [data-testid = "user"] { | |
| background-color: #26B561 ; | |
| } | |
| /* 屏幕宽度大于等于500px的设备 */ | |
| /* update on 2023.4.8: 高度的细致调整已写入JavaScript */ | |
| @media screen and (min-width: 500px) { | |
| #chuanhu_chatbot { | |
| height: calc(100vh - 200px); | |
| } | |
| #chuanhu_chatbot .wrap { | |
| max-height: calc(100vh - 200px - var(--line-sm)*1rem - 2*var(--block-label-margin) ); | |
| } | |
| } | |
| /* 屏幕宽度小于500px的设备 */ | |
| @media screen and (max-width: 499px) { | |
| #chuanhu_chatbot { | |
| height: calc(100vh - 140px); | |
| } | |
| #chuanhu_chatbot .wrap { | |
| max-height: calc(100vh - 140px - var(--line-sm)*1rem - 2*var(--block-label-margin) ); | |
| } | |
| [data-testid = "bot"] { | |
| max-width: 98% ; | |
| } | |
| #app_title h1{ | |
| letter-spacing: -1px; font-size: 22px; | |
| } | |
| } | |
| /* 对话气泡 */ | |
| [class *= "message"] { | |
| border-radius: var(--radius-xl) ; | |
| border: none; | |
| padding: var(--spacing-xl) ; | |
| font-size: var(--text-md) ; | |
| line-height: var(--line-md) ; | |
| min-height: calc(var(--text-md)*var(--line-md) + 2*var(--spacing-xl)); | |
| min-width: calc(var(--text-md)*var(--line-md) + 2*var(--spacing-xl)); | |
| } | |
| [data-testid = "bot"] { | |
| max-width: 85%; | |
| border-bottom-left-radius: 0 ; | |
| } | |
| [data-testid = "user"] { | |
| max-width: 85%; | |
| width: auto ; | |
| border-bottom-right-radius: 0 ; | |
| background-color: #0476D0 ; | |
| } | |
| .user p { | |
| color:#fff | |
| } | |
| /* 表格 */ | |
| table { | |
| margin: 1em 0; | |
| border-collapse: collapse; | |
| empty-cells: show; | |
| } | |
| td,th { | |
| border: 1.2px solid var(--border-color-primary) ; | |
| padding: 0.2em; | |
| } | |
| thead { | |
| background-color: rgba(175,184,193,0.2); | |
| } | |
| thead th { | |
| padding: .5em .2em; | |
| } | |
| /* 行内代码 */ | |
| code { | |
| display: inline; | |
| white-space: break-spaces; | |
| border-radius: 6px; | |
| margin: 0 2px 0 2px; | |
| padding: .2em .4em .1em .4em; | |
| background-color: rgba(175,184,193,0.2); | |
| } | |
| /* 代码块 */ | |
| pre code { | |
| display: block; | |
| overflow: auto; | |
| white-space: pre; | |
| background-color: hsla(0, 0%, 0%, 80%); | |
| border-radius: 10px; | |
| padding: 1.4em 1.2em 0em 1.4em; | |
| margin: 1.2em 2em 1.2em 0.5em; | |
| color: #FFF; | |
| box-shadow: 6px 6px 16px hsla(0, 0%, 0%, 0.2); | |
| } | |
| /* 代码高亮样式 */ | |
| .highlight pre{font-family: IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace ;} | |
| .highlight .hll { background-color: #49483e } | |
| .highlight .c { color: #75715e } /* Comment */ | |
| .highlight .err { color: #960050; background-color: #1e0010 } /* Error */ | |
| .highlight .k { color: #66d9ef } /* Keyword */ | |
| .highlight .l { color: #ae81ff } /* Literal */ | |
| .highlight .n { color: #f8f8f2 } /* Name */ | |
| .highlight .o { color: #f92672 } /* Operator */ | |
| .highlight .p { color: #f8f8f2 } /* Punctuation */ | |
| .highlight .ch { color: #75715e } /* Comment.Hashbang */ | |
| .highlight .cm { color: #75715e } /* Comment.Multiline */ | |
| .highlight .cp { color: #75715e } /* Comment.Preproc */ | |
| .highlight .cpf { color: #75715e } /* Comment.PreprocFile */ | |
| .highlight .c1 { color: #75715e } /* Comment.Single */ | |
| .highlight .cs { color: #75715e } /* Comment.Special */ | |
| .highlight .gd { color: #f92672 } /* Generic.Deleted */ | |
| .highlight .ge { font-style: italic } /* Generic.Emph */ | |
| .highlight .gi { color: #a6e22e } /* Generic.Inserted */ | |
| .highlight .gs { font-weight: bold } /* Generic.Strong */ | |
| .highlight .gu { color: #75715e } /* Generic.Subheading */ | |
| .highlight .kc { color: #66d9ef } /* Keyword.Constant */ | |
| .highlight .kd { color: #66d9ef } /* Keyword.Declaration */ | |
| .highlight .kn { color: #f92672 } /* Keyword.Namespace */ | |
| .highlight .kp { color: #66d9ef } /* Keyword.Pseudo */ | |
| .highlight .kr { color: #66d9ef } /* Keyword.Reserved */ | |
| .highlight .kt { color: #66d9ef } /* Keyword.Type */ | |
| .highlight .ld { color: #e6db74 } /* Literal.Date */ | |
| .highlight .m { color: #ae81ff } /* Literal.Number */ | |
| .highlight .s { color: #e6db74 } /* Literal.String */ | |
| .highlight .na { color: #a6e22e } /* Name.Attribute */ | |
| .highlight .nb { color: #f8f8f2 } /* Name.Builtin */ | |
| .highlight .nc { color: #a6e22e } /* Name.Class */ | |
| .highlight .no { color: #66d9ef } /* Name.Constant */ | |
| .highlight .nd { color: #a6e22e } /* Name.Decorator */ | |
| .highlight .ni { color: #f8f8f2 } /* Name.Entity */ | |
| .highlight .ne { color: #a6e22e } /* Name.Exception */ | |
| .highlight .nf { color: #a6e22e } /* Name.Function */ | |
| .highlight .nl { color: #f8f8f2 } /* Name.Label */ | |
| .highlight .nn { color: #f8f8f2 } /* Name.Namespace */ | |
| .highlight .nx { color: #a6e22e } /* Name.Other */ | |
| .highlight .py { color: #f8f8f2 } /* Name.Property */ | |
| .highlight .nt { color: #f92672 } /* Name.Tag */ | |
| .highlight .nv { color: #f8f8f2 } /* Name.Variable */ | |
| .highlight .ow { color: #f92672 } /* Operator.Word */ | |
| .highlight .w { color: #f8f8f2 } /* Text.Whitespace */ | |
| .highlight .mb { color: #ae81ff } /* Literal.Number.Bin */ | |
| .highlight .mf { color: #ae81ff } /* Literal.Number.Float */ | |
| .highlight .mh { color: #ae81ff } /* Literal.Number.Hex */ | |
| .highlight .mi { color: #ae81ff } /* Literal.Number.Integer */ | |
| .highlight .mo { color: #ae81ff } /* Literal.Number.Oct */ | |
| .highlight .sa { color: #e6db74 } /* Literal.String.Affix */ | |
| .highlight .sb { color: #e6db74 } /* Literal.String.Backtick */ | |
| .highlight .sc { color: #e6db74 } /* Literal.String.Char */ | |
| .highlight .dl { color: #e6db74 } /* Literal.String.Delimiter */ | |
| .highlight .sd { color: #e6db74 } /* Literal.String.Doc */ | |
| .highlight .s2 { color: #e6db74 } /* Literal.String.Double */ | |
| .highlight .se { color: #ae81ff } /* Literal.String.Escape */ | |
| .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */ | |
| .highlight .si { color: #e6db74 } /* Literal.String.Interpol */ | |
| .highlight .sx { color: #e6db74 } /* Literal.String.Other */ | |
| .highlight .sr { color: #e6db74 } /* Literal.String.Regex */ | |
| .highlight .s1 { color: #e6db74 } /* Literal.String.Single */ | |
| .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */ | |
| .highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */ | |
| .highlight .fm { color: #a6e22e } /* Name.Function.Magic */ | |
| .highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */ | |
| .highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */ | |
| .highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */ | |
| .highlight .vm { color: #f8f8f2 } /* Name.Variable.Magic */ | |
| .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */ | |