分享一个用 AI 手搓自用的 Typroa 主题（claude artifact +github风格，大杂烩）css
AI
/*
* Claude Theme for Typora
*
* Background & Blockquote: Strict copy from Claude artifact (amber-50/amber-100)
* Typography: Strict copy from laper.ai (Montserrat + Noto Sans SC + PingFang SC)
*
* Author: Claude Theme
* Version: 3.0.0
*/
/* ========================================
Google Fonts - Montserrat + Noto Sans SC
======================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Noto+Sans+SC:wght@200;300;400;500;600;700&display=swap');
/* ========================================
CSS Variables - Design Tokens
======================================== */
:root {
/* --- Surface palette (from Claude artifact bg-amber-50) --- */
--bg-color: #FFFBEB;
--side-bar-bg-color: #FFFBEB;
--card-bg: #FFFBEB;
--control-text-color: #78716C;
/* --- Text palette (from Claude artifact stone palette) --- */
--text-color: #292524;
--text-secondary: #57534E;
--md-char-color: #A8A29E;
--meta-content-color: #78716C;
/* --- Accent palette (from Claude artifact amber palette) --- */
--primary-color: #D97706;
--primary-btn-border-color: #B45309;
--primary-btn-text-color: #FFFFFF;
/* --- Interactive states --- */
--active-file-bg-color: rgba(217, 119, 6, 0.15);
--active-file-text-color: #292524;
--active-file-border-color: #D97706;
--item-hover-bg-color: rgba(217, 119, 6, 0.10);
--item-hover-text-color: #292524;
/* --- Borders --- */
--window-border: 1px solid #E7E5E4;
--border-color: #D6D3D1;
/* --- Type scale (from laper.ai: Montserrat + Noto Sans SC + PingFang SC) --- */
--font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", sans-serif;
--font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", sans-serif;
--monospace: "JetBrains Mono", "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* --- Code --- */
--code-bg-color: #FFFFFF;
--code-text-color: #383A42;
/* --- Callout / Blockquote (from Claude artifact amber quote blocks) --- */
--callout-bg: #FEF3C7;
--callout-border: #D97706;
--callout-text: #78350F;
}
/* ========================================
Base Typography
======================================== */
html {
font-size: 16px;
background-color: var(--bg-color);
color: var(--text-color);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
font-family: var(--font-body);
font-weight: 400;
line-height: 1.5;
color: var(--text-color);
background-color: var(--bg-color);
letter-spacing: normal;
}
/* ========================================
Main Content Card
======================================== */
#write {
max-width: 1100px;
margin: 40px auto;
padding: 64px 64px 100px;
background-color: var(--card-bg);
border-radius: 16px;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.04),
0 4px 24px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(0, 0, 0, 0.06);
font-size: 1.0625rem;
line-height: 1.375;
}
#write>ul:first-child,
#write>ol:first-child {
margin-top: 30px;
}
/* ========================================
Headings - Montserrat geometric style
======================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
color: var(--text-color);
line-height: 1.375;
margin-top: 1.6em;
margin-bottom: 0.5em;
letter-spacing: normal;
}
h1 {
font-size: 1.875rem;
font-weight: 700;
padding-bottom: 0.3em;
border-bottom: none;
margin-top: 0;
}
h2 {
font-size: 1.75rem;
font-weight: 400;
padding-bottom: 8px;
border-bottom: 2px solid #D6D3D1;
}
h3 {
font-size: 1.25rem;
font-weight: 400;
}
h4 {
font-size: 1.1rem;
font-weight: 600;
}
h5 {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
h6 {
font-size: 0.875rem;
font-weight: 600;
color: var(--meta-content-color);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Active heading highlight */
#write h1.md-focus,
#write h2.md-focus,
#write h3.md-focus,
#write h4.md-focus,
#write h5.md-focus,
#write h6.md-focus {
background-color: var(--active-file-bg-color);
border-radius: 8px;
padding-left: 8px;
margin-left: -8px;
}
/* ========================================
Paragraph & Inline Text
======================================== */
p {
margin: 0 0 1em 0;
font-weight: 400;
line-height: 1.375;
}
#write>p:first-child {
margin-top: 0;
}
strong {
font-weight: 700;
color: var(--text-color);
}
em {
font-style: italic;
}
del {
color: var(--meta-content-color);
text-decoration: line-through;
}
u {
text-decoration: underline;
text-decoration-color: #D97706;
text-underline-offset: 3px;
}
mark {
background-color: rgba(217, 119, 6, 0.2);
color: var(--text-color);
padding: 2px 5px;
border-radius: 4px;
}
/* ========================================
Links
======================================== */
a {
color: #161922;
font-weight: 500;
text-decoration: none;
border-bottom: 1.5px solid rgba(22, 25, 34, 0.25);
transition: color 0.2s ease, border-color 0.2s ease;
}
a:hover {
color: #161922;
border-bottom-color: #161922;
}
#write a {
color: #161922;
font-size: 1em;
}
/* ========================================
Inline Code
======================================== */
code {
font-family: var(--monospace);
font-size: 0.85em;
background-color: #EEEEEE;
color: #111827;
padding: 2px 8px;
border-radius: 6px;
border: none;
}
#write p code,
#write li code,
#write td code,
#write th code {
font-family: var(--monospace);
font-size: 0.85em;
background-color: #EEEEEE;
color: #111827;
padding: 2px 8px;
border-radius: 6px;
border: none;
}
blockquote code,
.md-alert code {
background-color: rgba(217, 119, 6, 0.15);
color: #78350F;
}
/* ========================================
Code Blocks
======================================== */
pre {
font-family: var(--monospace);
font-size: 0.875rem;
line-height: 1.6;
background-color: var(--code-bg-color);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 16px 20px;
overflow-x: auto;
margin: 1em 0;
}
pre code {
font-family: var(--monospace);
font-size: 0.875rem;
background: transparent;
padding: 0;
border: none;
border-radius: 0;
color: var(--code-text-color);
}
.md-fences {
font-family: var(--monospace);
font-size: 0.875rem;
background-color: var(--code-bg-color);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 16px 20px;
margin: 1em 0;
position: relative;
}
.md-fences.mock-cm {
font-family: var(--monospace);
}
/* Code block language badge */
.md-fences .code-tooltip {
background-color: var(--side-bar-bg-color) !important;
border: 1px solid var(--border-color) !important;
border-radius: 6px !important;
color: var(--meta-content-color) !important;
font-size: 0.75rem !important;
font-family: var(--font-body) !important;
font-weight: 500 !important;
position: absolute !important;
top: 8px !important;
right: 12px !important;
left: auto !important;
bottom: auto !important;
padding: 0 8px !important;
z-index: 10;
width: auto !important;
min-width: 40px !important;
max-width: 100px !important;
height: 24px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: none !important;
}
.md-fences .code-tooltip *,
.md-fences .code-tooltip input,
.md-fences .code-tooltip .ty-input {
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
font-size: 0.75rem !important;
line-height: 24px !important;
border: none !important;
background: transparent !important;
text-align: center !important;
color: inherit !important;
cursor: pointer !important;
}
.md-fences .md-lang-selection,
.md-fences .ty-cm-lang-input,
.md-fences [class*="lang"] {
width: auto !important;
max-width: 100px !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.md-fences .ty-cm-lang,
.md-fences .cm-lang-tag,
.md-fences .CodeMirror-code .cm-lang {
display: none !important;
}
/* ========================================
Syntax Highlighting - CodeMirror
======================================== */
.cm-s-inner {
font-family: var(--monospace);
color: var(--code-text-color);
background-color: var(--code-bg-color);
}
.cm-s-inner .CodeMirror-gutters {
background-color: var(--code-bg-color);
border-right: 1px solid var(--border-color);
}
.cm-s-inner .CodeMirror-linenumber {
color: #B8B7B2;
}
.cm-s-inner .cm-keyword {
color: #A626A4;
}
.cm-s-inner .cm-atom {
color: #986801;
}
.cm-s-inner .cm-number {
color: #986801;
}
.cm-s-inner .cm-def {
color: #4078F2;
}
.cm-s-inner .cm-variable {
color: #383A42;
}
.cm-s-inner .cm-variable-2 {
color: #C6613F;
}
.cm-s-inner .cm-variable-3 {
color: #C18401;
}
.cm-s-inner .cm-property {
color: #C6613F;
}
.cm-s-inner .cm-operator {
color: #383A42;
}
.cm-s-inner .cm-comment {
color: #A0A1A7;
font-style: italic;
}
.cm-s-inner .cm-string {
color: #50A14F;
}
.cm-s-inner .cm-string-2 {
color: #50A14F;
}
.cm-s-inner .cm-meta {
color: #383A42;
}
.cm-s-inner .cm-qualifier {
color: #4078F2;
}
.cm-s-inner .cm-builtin {
color: #C18401;
}
.cm-s-inner .cm-bracket {
color: #383A42;
}
.cm-s-inner .cm-tag {
color: #E45649;
}
.cm-s-inner .cm-attribute {
color: #986801;
}
.cm-s-inner .cm-header {
color: #C6613F;
font-weight: bold;
}
.cm-s-inner .cm-quote {
color: #50A14F;
}
.cm-s-inner .cm-hr {
color: #B8B7B2;
}
.cm-s-inner .cm-link {
color: #4078F2;
}
.cm-s-inner .cm-error {
color: #E45649;
}
.cm-s-inner .CodeMirror-selected {
background-color: rgba(217, 119, 6, 0.15);
}
.cm-s-inner .CodeMirror-selectedtext {
background-color: rgba(217, 119, 6, 0.2);
}
/* ========================================
Blockquote - Strict copy from Claude artifact
bg-amber-100, border-l-4 border-amber-600,
rounded-r-lg, shadow-md
======================================== */
blockquote {
margin: 2em 1em;
padding: 24px;
border: none;
border-left: 4px solid #D97706;
background-color: #FEF3C7;
border-radius: 0 8px 8px 0;
color: #44403C;
font-style: normal;
box-shadow:
rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
}
blockquote p {
margin: 0;
font-style: italic;
color: #78350F;
font-size: 1.125rem;
line-height: 1.625;
}
blockquote p:last-child:not(:first-child) {
font-style: normal;
text-align: right;
color: #B45309;
font-weight: 500;
font-size: 1rem;
margin-top: 12px;
}
blockquote blockquote {
margin-top: 0.5em;
margin-bottom: 0;
background-color: rgba(254, 243, 199, 0.7);
box-shadow: none;
}
blockquote,
blockquote span,
blockquote strong,
blockquote em,
blockquote li {
color: #78350F !important;
}
blockquote strong {
font-weight: 700;
font-style: normal;
}
blockquote a {
color: #78350F !important;
border-bottom-color: rgba(120, 53, 15, 0.35) !important;
}
blockquote a:hover {
color: #78350F !important;
border-bottom-color: rgba(120, 53, 15, 0.85) !important;
}
/* ========================================
Lists
======================================== */
ul,
ol {
padding-left: 2em;
margin: 0.5em 0 1em 0;
}
li {
margin: 0.35em 0;
line-height: 1.375;
}
li>ul,
li>ol {
margin: 0.3em 0;
}
ul {
list-style-type: disc;
}
ul ul {
list-style-type: circle;
}
ul ul ul {
list-style-type: square;
}
ol {
list-style-type: decimal;
}
/* Task list */
.task-list-item {
list-style-type: none;
margin-left: -1.5em;
}
.task-list-item input[type="checkbox"] {
margin-right: 0.5em;
vertical-align: middle;
}
.task-list-item input[type="checkbox"]:checked::before {
background-color: var(--primary-color);
}
/* ========================================
Tables
======================================== */
table {
width: 100%;
border-collapse: collapse;
margin: 1.5em 0;
font-size: 0.9375rem;
}
thead tr {
border-bottom: 2px solid var(--border-color);
}
tbody tr {
border-bottom: 1px solid var(--border-color);
}
th,
td {
padding: 10px 16px;
text-align: left;
vertical-align: top;
}
th {
font-weight: 600;
font-size: 0.85rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
tbody tr:last-child {
border-bottom: none;
}
tr:nth-child(2n) {
background-color: transparent;
}
tr:hover {
background-color: rgba(22, 25, 34, 0.02);
transition: background-color 0.15s ease;
}
table code {
background-color: #FEF3C7;
border-radius: 999px;
border: 1px solid #FDE68A;
padding: 2px 10px;
font-size: 0.85em;
}
/* ========================================
Horizontal Rule
======================================== */
hr {
border: none;
border-top: 1px solid var(--border-color);
margin: 2.5em 0;
}
/* ========================================
Images
======================================== */
img {
max-width: 100%;
height: auto;
border-radius: 12px;
margin: 1em 0;
}
.md-image>.md-meta {
color: var(--meta-content-color);
font-size: 0.8rem;
font-weight: 400;
text-align: center;
margin-top: 0.5em;
}
/* ========================================
Footnotes
======================================== */
sup.md-footnote {
background-color: var(--primary-color);
color: white;
padding: 1px 6px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.15s ease;
}
sup.md-footnote:hover {
background-color: #B45309;
}
.md-def-footnote {
font-size: 0.875rem;
color: var(--meta-content-color);
padding-left: 1em;
border-left: 3px solid var(--border-color);
margin: 0.5em 0;
}
/* ========================================
Table of Contents
======================================== */
.md-toc {
font-size: 0.9375rem;
background-color: var(--side-bar-bg-color);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 16px 24px;
margin: 1em 0;
}
.md-toc-content {
margin-left: 0;
}
.md-toc-item {
color: var(--text-color);
}
.md-toc-h1 {
font-weight: 600;
}
.md-toc-h2 {
padding-left: 1em;
}
.md-toc-h3,
.md-toc-h4,
.md-toc-h5,
.md-toc-h6 {
padding-left: 2em;
font-size: 0.875rem;
}
/* ========================================
YAML Front Matter
======================================== */
pre.md-meta-block {
background-color: var(--code-bg-color);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 16px 20px;
font-size: 0.875rem;
color: var(--meta-content-color);
margin-bottom: 2em;
}
/* ========================================
Math Blocks
======================================== */
.MathJax_Display {
overflow-x: auto;
overflow-y: hidden;
}
.md-math-block {
font-size: 1.1em;
}
/* ========================================
Callout / Alert Cards
======================================== */
.md-alert {
padding: 20px 24px;
margin: 1em 0;
border-radius: 16px;
border: 1px solid var(--callout-border);
background-color: var(--callout-bg);
color: var(--callout-text);
}
.md-alert-note,
.md-alert-tip,
.md-alert-important,
.md-alert-warning,
.md-alert-caution {
background-color: var(--callout-bg);
border-left-color: transparent;
}
.md-alert,
.md-alert p,
.md-alert span,
.md-alert strong,
.md-alert em,
.md-alert li {
color: #78350F !important;
}
.md-alert a {
color: #78350F !important;
border-bottom-color: rgba(120, 53, 15, 0.35) !important;
}
.md-alert a:hover {
border-bottom-color: rgba(120, 53, 15, 0.85) !important;
}
/* ========================================
Sidebar
======================================== */
#typora-sidebar {
background-color: var(--side-bar-bg-color);
border-right: 2px solid rgba(0, 0, 0, 0.06);
}
#typora-sidebar .sidebar-content {
background-color: var(--side-bar-bg-color);
}
.file-list-item {
border-bottom: none;
border-radius: 12px;
margin: 4px 10px;
padding: 10px 14px;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
font-family: var(--font-body);
}
.file-list-item.active {
background-color: var(--active-file-bg-color);
border-left: none;
box-shadow:
0 1px 0 rgba(0, 0, 0, 0.04),
0 8px 24px rgba(0, 0, 0, 0.06);
}
.file-list-item:hover {
background-color: var(--item-hover-bg-color);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}
/* Outline */
.outline-item:hover {
background-color: var(--item-hover-bg-color);
border-radius: 8px;
}
.outline-item.select,
.outline-item.active {
background-color: var(--active-file-bg-color);
border-radius: 8px;
}
/* ========================================
Search Panel
======================================== */
#md-searchpanel {
background-color: var(--bg-color);
border-bottom: 1px solid var(--border-color);
}
#md-searchpanel input {
background-color: var(--side-bar-bg-color);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-color);
font-family: var(--font-body);
}
#md-searchpanel input:focus {
border-color: #D97706;
outline: none;
box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.15);
}
/* ========================================
Scrollbar
======================================== */
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-track {
background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
background-color: #D6D3D1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #A8A29E;
}
/* ========================================
Text Selection
======================================== */
::selection {
background-color: rgba(217, 119, 6, 0.2);
color: var(--text-color);
}
/* ========================================
Focus Mode
======================================== */
.on-focus-mode .md-end-block:not(.md-focus):not(.md-focus-container) {
opacity: 0.45;
}
.on-focus-mode .md-end-block:not(.md-focus):not(.md-focus-container) * {
color: inherit !important;
}
/* ========================================
Print
======================================== */
@media print {
html,
body {
background-color: white;
}
#write {
max-width: 100%;
padding: 20px;
box-shadow: none;
border: none;
}
pre,
.md-fences {
page-break-inside: avoid;
border: 1px solid #D6D3D1;
}
h1,
h2,
h3,
h4,
h5,
h6 {
page-break-after: avoid;
}
table {
page-break-inside: avoid;
}
}
/* ========================================
Source Code Mode
======================================== */
.cm-s-typora-default {
font-family: var(--monospace);
color: var(--code-text-color);
background-color: var(--bg-color);
}
.cm-s-typora-default .cm-header {
color: var(--primary-color);
font-weight: 600;
}
.cm-s-typora-default .cm-link {
color: #4078F2;
}
.cm-s-typora-default .cm-string {
color: #50A14F;
}
.cm-s-typora-default .cm-comment {
color: #A0A1A7;
font-style: italic;
}
/* ========================================
Mermaid Diagrams
======================================== */
.md-diagram-panel {
background-color: var(--side-bar-bg-color);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 16px;
}
/* ========================================
Windows / Linux Specific
======================================== */
#md-notification {
background-color: var(--side-bar-bg-color);
border: 1px solid var(--border-color);
border-radius: 8px;
}
.megamenu-menu {
background-color: var(--bg-color);
border: 1px solid var(--border-color);
}
.megamenu-menu-header {
border-bottom: 1px solid var(--border-color);
}
.megamenu-menu-list li a:hover {
background-color: var(--item-hover-bg-color);
}
/* ========================================
Heading Anchor
======================================== */
.md-heading:hover .md-header-anchor {
opacity: 1;
}
.md-header-anchor {
color: var(--primary-color);
opacity: 0;
transition: opacity 0.2s ease;
}
[衡天云]爆款云服务器 低至12元/月
![[衡天云]爆款云服务器 低至12元/月](/hty.png)