ADD：verge-light主题样式
This commit is contained in:
lilan
parent
f1edeca434
commit
aa2df80739
|
|
@ -37,6 +37,7 @@
|
|||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
|
|
@ -114,7 +115,7 @@
|
|||
border-radius: var(--radius-small);
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
cursor: pointer;
|
||||
|
|
@ -159,9 +160,9 @@
|
|||
.conversation-sidebar h4 {
|
||||
margin: 0;
|
||||
padding: 12px 16px;
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
color: var(--color-text-primary);
|
||||
|
|
@ -204,10 +205,11 @@
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.conversation-time {
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
color: var(--color-text-muted);
|
||||
letter-spacing: var(--letter-spacing-mono-sm);
|
||||
|
|
@ -262,6 +264,7 @@
|
|||
font-size: var(--font-size-body-relaxed);
|
||||
line-height: var(--line-height-body-relaxed);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.message.user .message-content {
|
||||
|
|
@ -320,10 +323,11 @@
|
|||
padding: 6px 0;
|
||||
font-size: var(--font-size-body-relaxed);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.upload-status {
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
color: var(--color-text-muted);
|
||||
letter-spacing: var(--letter-spacing-mono-sm);
|
||||
|
|
@ -352,6 +356,7 @@
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.context-clear {
|
||||
|
|
@ -397,7 +402,7 @@
|
|||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-body-relaxed);
|
||||
resize: none;
|
||||
font-family: inherit;
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
height: 120px;
|
||||
padding-bottom: 50px;
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
|
|
@ -464,7 +469,7 @@
|
|||
border-radius: var(--radius-small);
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
cursor: pointer;
|
||||
|
|
@ -478,16 +483,16 @@
|
|||
background-color: var(--color-jelly-mint);
|
||||
color: var(--color-absolute-black);
|
||||
border-color: var(--color-jelly-mint);
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-button);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
}
|
||||
|
||||
.absolute-btn.send-btn:hover:not(:disabled) {
|
||||
background-color: var(--color-primary-hover);
|
||||
box-shadow: 0px 0px 0px 1px var(--color-dim-gray);
|
||||
box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
|
||||
}
|
||||
|
||||
.absolute-btn.send-btn:focus-visible {
|
||||
|
|
|
|||
|
|
@ -52,9 +52,9 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-button);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
}
|
||||
|
|
@ -82,9 +82,9 @@
|
|||
|
||||
.zoom-display {
|
||||
padding: 0 8px;
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-text-primary);
|
||||
opacity: 0.8;
|
||||
min-width: 50px;
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
}
|
||||
|
||||
.zoom-value {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
|
|
@ -124,9 +124,9 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
}
|
||||
|
|
@ -164,7 +164,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono-sm);
|
||||
|
|
@ -210,8 +210,8 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
|
||||
linear-gradient(rgba(19, 19, 19, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(19, 19, 19, 0.05) 1px, transparent 1px);
|
||||
background-size: 25px 25px;
|
||||
background-position: center center;
|
||||
}
|
||||
|
|
@ -259,6 +259,7 @@
|
|||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.frame-title h4 {
|
||||
|
|
@ -267,10 +268,11 @@
|
|||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.frame-date {
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
color: var(--color-text-muted);
|
||||
margin-top: 2px;
|
||||
|
|
@ -302,7 +304,7 @@
|
|||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
color: var(--color-text-primary);
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
|
|
@ -346,12 +348,13 @@
|
|||
color: var(--color-text-primary);
|
||||
margin: 0 0 4px 0;
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.placeholder-meta {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
color: var(--color-text-muted);
|
||||
letter-spacing: var(--letter-spacing-mono-sm);
|
||||
|
|
@ -359,7 +362,7 @@
|
|||
}
|
||||
|
||||
.placeholder-hint {
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
color: var(--color-text-muted);
|
||||
margin-top: 8px;
|
||||
|
|
@ -368,7 +371,7 @@
|
|||
}
|
||||
|
||||
.viewport-info {
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
color: var(--color-text-muted);
|
||||
margin-top: 4px;
|
||||
|
|
@ -402,15 +405,15 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 20px;
|
||||
padding: 12px 28px;
|
||||
background-color: var(--color-surface-slate);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: var(--radius-feature);
|
||||
cursor: pointer;
|
||||
transition: all 0.18s ease;
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-button);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
color: var(--color-text-primary);
|
||||
|
|
@ -439,9 +442,9 @@
|
|||
}
|
||||
|
||||
.btn-text {
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-button);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
white-space: nowrap;
|
||||
|
|
@ -484,9 +487,9 @@
|
|||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s;
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
color: var(--color-text-primary);
|
||||
|
|
@ -584,6 +587,7 @@
|
|||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-verge-ultraviolet);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.error-message p {
|
||||
|
|
@ -591,26 +595,27 @@
|
|||
font-size: var(--font-size-body-relaxed);
|
||||
color: var(--color-text-secondary);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.error-message button {
|
||||
padding: 10px 24px;
|
||||
padding: 12px 28px;
|
||||
background-color: var(--color-jelly-mint);
|
||||
color: var(--color-absolute-black);
|
||||
border: none;
|
||||
border-radius: var(--radius-feature);
|
||||
cursor: pointer;
|
||||
transition: all 0.18s ease;
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-button);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
}
|
||||
|
||||
.error-message button:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
box-shadow: 0px 0px 0px 1px var(--color-dim-gray);
|
||||
box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
|
||||
}
|
||||
|
||||
.error-message button:focus-visible {
|
||||
|
|
@ -644,6 +649,7 @@
|
|||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
|
|
@ -651,13 +657,14 @@
|
|||
font-size: var(--font-size-body-relaxed);
|
||||
color: var(--color-text-secondary);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.empty-state code {
|
||||
background-color: var(--color-surface-slate);
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--radius-small);
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
|
|
@ -740,7 +747,7 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
background: var(--color-pure-white);
|
||||
background: var(--color-canvas-white);
|
||||
border-radius: 0 0 var(--radius-small) var(--radius-small);
|
||||
}
|
||||
|
||||
|
|
@ -756,7 +763,7 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--color-pure-white);
|
||||
background: var(--color-canvas-white);
|
||||
border: 1px solid var(--color-verge-ultraviolet);
|
||||
border-radius: 0 0 var(--radius-small) var(--radius-small);
|
||||
display: flex;
|
||||
|
|
@ -803,7 +810,7 @@
|
|||
}
|
||||
|
||||
.drag-ready-hint p {
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
|
|
@ -851,10 +858,11 @@
|
|||
color: var(--color-text-primary);
|
||||
margin: 8px 0 4px;
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.frame-error-content small {
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
color: var(--color-text-muted);
|
||||
letter-spacing: var(--letter-spacing-mono-sm);
|
||||
|
|
@ -919,7 +927,7 @@
|
|||
}
|
||||
|
||||
.frame-status {
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-micro);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
|
|
@ -941,9 +949,9 @@
|
|||
padding: 2px 6px;
|
||||
background-color: var(--color-surface-slate);
|
||||
border-radius: var(--radius-small);
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-micro);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: var(--font-weight-bold);
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text-muted);
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.context-modal-close {
|
||||
|
|
@ -84,9 +85,9 @@
|
|||
}
|
||||
|
||||
.form-group label {
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
color: var(--color-text-primary);
|
||||
|
|
@ -97,7 +98,7 @@
|
|||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: var(--radius-small);
|
||||
font-size: var(--font-size-body-relaxed);
|
||||
font-family: inherit;
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease;
|
||||
background-color: var(--color-surface-slate);
|
||||
|
|
@ -123,7 +124,7 @@
|
|||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: var(--radius-small);
|
||||
font-size: var(--font-size-body-relaxed);
|
||||
font-family: inherit;
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
resize: none;
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease;
|
||||
|
|
@ -158,11 +159,11 @@
|
|||
background-color: var(--color-surface-slate);
|
||||
color: var(--color-text-primary);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
padding: 10px 24px;
|
||||
padding: 12px 28px;
|
||||
border-radius: var(--radius-feature);
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-button);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
cursor: pointer;
|
||||
|
|
@ -187,11 +188,11 @@
|
|||
background-color: var(--color-jelly-mint);
|
||||
color: var(--color-absolute-black);
|
||||
border: none;
|
||||
padding: 10px 24px;
|
||||
padding: 12px 28px;
|
||||
border-radius: var(--radius-feature);
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-button);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
cursor: pointer;
|
||||
|
|
@ -200,7 +201,7 @@
|
|||
|
||||
.context-modal-submit:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
box-shadow: 0px 0px 0px 1px var(--color-dim-gray);
|
||||
box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
|
||||
}
|
||||
|
||||
.context-modal-submit:focus-visible {
|
||||
|
|
|
|||
|
|
@ -52,9 +52,9 @@
|
|||
}
|
||||
|
||||
.menu-label {
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
opacity: 0;
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: var(--color-surface-slate);
|
||||
color: var(--color-hazard-white);
|
||||
color: var(--color-primary-text);
|
||||
padding: 10px 16px;
|
||||
border-radius: var(--radius-standard);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
|
|
@ -122,6 +122,7 @@
|
|||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.note-modal-close {
|
||||
|
|
@ -163,11 +164,11 @@
|
|||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: var(--radius-small);
|
||||
font-size: var(--font-size-body-relaxed);
|
||||
font-family: inherit;
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
resize: none;
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease;
|
||||
background-color: var(--color-background);
|
||||
background-color: var(--color-surface-slate);
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
}
|
||||
|
|
@ -190,15 +191,15 @@
|
|||
}
|
||||
|
||||
.note-modal-submit {
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-button);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
background-color: var(--color-jelly-mint);
|
||||
color: var(--color-absolute-black);
|
||||
border: none;
|
||||
padding: 10px 24px;
|
||||
padding: 12px 28px;
|
||||
border-radius: var(--radius-feature);
|
||||
cursor: pointer;
|
||||
transition: all 0.18s ease;
|
||||
|
|
@ -209,7 +210,7 @@
|
|||
|
||||
.note-modal-submit:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
box-shadow: 0px 0px 0px 1px var(--color-dim-gray);
|
||||
box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
|
||||
}
|
||||
|
||||
.note-modal-submit:focus-visible {
|
||||
|
|
@ -228,11 +229,11 @@
|
|||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: var(--color-surface-slate);
|
||||
color: var(--color-hazard-white);
|
||||
color: var(--color-primary-text);
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--radius-standard);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
|
|
@ -300,6 +301,7 @@
|
|||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.resource-modal-close {
|
||||
|
|
@ -354,9 +356,9 @@
|
|||
|
||||
.resource-section h4 {
|
||||
margin: 0 0 12px 0;
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
color: var(--color-text-primary);
|
||||
|
|
@ -382,7 +384,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
color: var(--color-text-primary);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
|
|
@ -399,7 +401,7 @@
|
|||
padding: 10px 14px;
|
||||
background-color: var(--color-surface-slate);
|
||||
border-radius: var(--radius-small);
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
color: var(--color-text-primary);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
|
|
@ -420,7 +422,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
color: var(--color-text-primary);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
|
|
@ -428,15 +430,15 @@
|
|||
}
|
||||
|
||||
.upload-btn {
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-button);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
background-color: var(--color-jelly-mint);
|
||||
color: var(--color-absolute-black);
|
||||
border: none;
|
||||
padding: 10px 24px;
|
||||
padding: 12px 28px;
|
||||
border-radius: var(--radius-feature);
|
||||
cursor: pointer;
|
||||
transition: all 0.18s ease;
|
||||
|
|
@ -445,7 +447,7 @@
|
|||
|
||||
.upload-btn:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
box-shadow: 0px 0px 0px 1px var(--color-dim-gray);
|
||||
box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
|
||||
}
|
||||
|
||||
.upload-btn:focus-visible {
|
||||
|
|
|
|||
|
|
@ -8,8 +8,9 @@
|
|||
align-items: center;
|
||||
z-index: 100;
|
||||
background-color: var(--color-background);
|
||||
border-bottom: 1px solid var(--color-border-subtle);
|
||||
padding: 0 24px;
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: var(--radius-standard);
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.top-bar-left {
|
||||
|
|
@ -18,10 +19,10 @@
|
|||
}
|
||||
|
||||
.verge-wordmark {
|
||||
font-family: 'Manuka', Impact, Helvetica, sans-serif;
|
||||
font-family: 'Anton', Impact, Helvetica, sans-serif;
|
||||
font-size: var(--font-size-tertiary-display);
|
||||
font-weight: var(--font-weight-black);
|
||||
color: var(--color-hazard-white);
|
||||
font-weight: var(--font-weight-regular);
|
||||
color: var(--color-primary-text);
|
||||
letter-spacing: var(--letter-spacing-tight-hero);
|
||||
line-height: var(--line-height-display);
|
||||
margin: 0;
|
||||
|
|
@ -34,10 +35,10 @@
|
|||
}
|
||||
|
||||
.nav-link {
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-hazard-white);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-primary-text);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
text-decoration: none;
|
||||
|
|
@ -61,7 +62,7 @@
|
|||
}
|
||||
|
||||
.search-icon {
|
||||
color: var(--color-hazard-white);
|
||||
color: var(--color-primary-text);
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s ease;
|
||||
|
|
@ -74,15 +75,16 @@
|
|||
.chat-session {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.chat-btn {
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-button);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
padding: 10px 20px;
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--radius-feature);
|
||||
transition: all 0.18s ease;
|
||||
background-color: var(--color-surface-slate);
|
||||
|
|
@ -93,7 +95,7 @@
|
|||
.chat-btn:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
color: var(--color-absolute-black);
|
||||
box-shadow: 0px 0px 0px 1px var(--color-dim-gray);
|
||||
box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
|
||||
}
|
||||
|
||||
.chat-btn.active {
|
||||
|
|
|
|||
|
|
@ -12,12 +12,12 @@ const TopBar = ({ onToggleChat, isChatVisible }: TopBarProps) => {
|
|||
<div className="action-buttons">
|
||||
<button className="btn btn-primary">新建项目</button>
|
||||
<button className="btn btn-secondary">保存</button>
|
||||
<button className="btn btn-secondary">导出</button>
|
||||
<button className="btn btn-secondary">设置</button>
|
||||
<button className="btn btn-tertiary">导出</button>
|
||||
<button className="btn btn-tertiary">设置</button>
|
||||
</div>
|
||||
<div className='chat-session'>
|
||||
<button
|
||||
className={`btn btn-secondary chat-btn ${isChatVisible ? 'active' : ''}`}
|
||||
className={`btn btn-tertiary chat-btn ${isChatVisible ? 'active' : ''}`}
|
||||
onClick={onToggleChat}
|
||||
title={isChatVisible ? '隐藏聊天面板' : '显示聊天面板'}
|
||||
>
|
||||
|
|
|
|||
303
src/index.css
303
src/index.css
|
|
@ -1,5 +1,5 @@
|
|||
:root {
|
||||
font-family: 'PolySans', Helvetica, Arial, sans-serif;
|
||||
font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
|
@ -11,58 +11,58 @@
|
|||
/* Primary (Brand Hazards) */
|
||||
--color-jelly-mint: #3cffd0;
|
||||
--color-verge-ultraviolet: #5200ff;
|
||||
|
||||
|
||||
/* Secondary & Accent */
|
||||
--color-console-mint-border: #309875;
|
||||
--color-deep-link-blue: #3860be;
|
||||
--color-focus-cyan: #1eaedb;
|
||||
--color-purple-rule: #3d00bf;
|
||||
|
||||
--color-dim-gray: #8c8c8c;
|
||||
|
||||
/* Surface & Background */
|
||||
--color-canvas-black: #131313;
|
||||
--color-surface-slate: #2d2d2d;
|
||||
--color-image-frame: #313131;
|
||||
--color-canvas-white: #ffffff;
|
||||
--color-surface-slate: #f2f2f2;
|
||||
--color-surface-slate-2: #e6e6e6;
|
||||
--color-image-frame: #d4d4d4;
|
||||
--color-hazard-white: #ffffff;
|
||||
--color-absolute-black: #000000;
|
||||
|
||||
|
||||
/* Neutrals & Text */
|
||||
--color-primary-text: #ffffff;
|
||||
--color-secondary-text: #949494;
|
||||
--color-muted-text: #e9e9e9;
|
||||
--color-inverted-text: #131313;
|
||||
|
||||
--color-primary-text: #131313;
|
||||
--color-secondary-text: #6a6a6a;
|
||||
--color-muted-text: #8c8c8c;
|
||||
--color-inverted-text: #ffffff;
|
||||
|
||||
/* Semantic & Accent */
|
||||
--color-focus-ring: #1eaedb;
|
||||
--color-overlay-black: rgba(0, 0, 0, 0.33);
|
||||
--color-dim-gray: #8c8c8c;
|
||||
|
||||
--color-overlay-black: rgba(19, 19, 19, 0.1);
|
||||
|
||||
/* Text Colors */
|
||||
--color-text-primary: var(--color-primary-text);
|
||||
--color-text-secondary: var(--color-secondary-text);
|
||||
--color-text-muted: var(--color-muted-text);
|
||||
--color-text-placeholder: var(--color-secondary-text);
|
||||
|
||||
--color-text-placeholder: var(--color-muted-text);
|
||||
|
||||
/* Background Colors */
|
||||
--color-background: var(--color-canvas-black);
|
||||
--color-surface: var(--color-canvas-black);
|
||||
--color-background: var(--color-canvas-white);
|
||||
--color-surface: var(--color-canvas-white);
|
||||
--color-secondary-background: var(--color-surface-slate);
|
||||
|
||||
|
||||
/* Border Colors */
|
||||
--color-border-subtle: var(--color-hazard-white);
|
||||
--color-border-subtle: rgba(19, 19, 19, 0.1);
|
||||
--color-border-medium: var(--color-jelly-mint);
|
||||
--color-border-strong: var(--color-verge-ultraviolet);
|
||||
|
||||
|
||||
/* Link Colors */
|
||||
--color-link-default: var(--color-hazard-white);
|
||||
--color-link-default: var(--color-primary-text);
|
||||
--color-link-hover: var(--color-deep-link-blue);
|
||||
--color-focus-ring: var(--color-focus-cyan);
|
||||
|
||||
|
||||
/* Button Colors */
|
||||
--color-primary: var(--color-jelly-mint);
|
||||
--color-primary-hover: rgba(255, 255, 255, 0.2);
|
||||
--color-primary-hover: rgba(60, 255, 208, 0.3);
|
||||
--color-button-background: var(--color-surface-slate);
|
||||
--color-button-hover: rgba(255, 255, 255, 0.2);
|
||||
|
||||
--color-button-hover: rgba(19, 19, 19, 0.2);
|
||||
|
||||
/* Border Radius */
|
||||
--radius-small: 2px;
|
||||
--radius-image: 3px;
|
||||
|
|
@ -73,19 +73,19 @@
|
|||
--radius-outlined: 40px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-circle: 50%;
|
||||
|
||||
|
||||
/* Spacing */
|
||||
--spacing-unit: 8px;
|
||||
|
||||
|
||||
/* Letter Spacing */
|
||||
--letter-spacing-tight-hero: 1.07px;
|
||||
--letter-spacing-tight-section: 0.32px;
|
||||
--letter-spacing-tight-hero: 1px;
|
||||
--letter-spacing-tight-section: -0.3px;
|
||||
--letter-spacing-tight-subheading: -0.16px;
|
||||
--letter-spacing-normal: normal;
|
||||
--letter-spacing-wide: 1.9px;
|
||||
--letter-spacing-mono: 1.5px;
|
||||
--letter-spacing-mono-sm: 1.1px;
|
||||
|
||||
|
||||
/* Font Weights */
|
||||
--font-weight-light: 300;
|
||||
--font-weight-regular: 400;
|
||||
|
|
@ -93,19 +93,19 @@
|
|||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
--font-weight-black: 900;
|
||||
|
||||
|
||||
/* Font Sizes */
|
||||
--font-size-hero: 6.69rem; /* 107px */
|
||||
--font-size-secondary-display: 5.63rem; /* 90px */
|
||||
--font-size-hero: 6.5rem; /* 104px */
|
||||
--font-size-secondary-display: 4.5rem; /* 72px */
|
||||
--font-size-tertiary-display: 3.75rem; /* 60px */
|
||||
--font-size-large-headline: 2.13rem; /* 34px */
|
||||
--font-size-heading-wide: 2.00rem; /* 32px */
|
||||
--font-size-heading-medium: 1.50rem; /* 24px */
|
||||
--font-size-heading-small: 1.25rem; /* 20px */
|
||||
--font-size-heading-wide: 2rem; /* 32px */
|
||||
--font-size-heading-medium: 1.5rem; /* 24px */
|
||||
--font-size-heading-small: 1.19rem; /* 19px */
|
||||
--font-size-light-capitalized: 1.19rem; /* 19px */
|
||||
--font-size-all-caps-xl: 1.13rem; /* 18px */
|
||||
--font-size-bold-body: 1.00rem; /* 16px */
|
||||
--font-size-body-relaxed: 1.00rem; /* 16px */
|
||||
--font-size-bold-body: 1rem; /* 16px */
|
||||
--font-size-body-relaxed: 1rem; /* 16px */
|
||||
--font-size-inline-label: 0.94rem; /* 15px */
|
||||
--font-size-body-compact: 0.81rem; /* 13px */
|
||||
--font-size-eyebrow-all-caps: 0.75rem; /* 12px */
|
||||
|
|
@ -114,77 +114,65 @@
|
|||
--font-size-meta-nano: 0.63rem; /* 10px */
|
||||
--font-size-mono-button: 0.75rem; /* 12px */
|
||||
--font-size-mono-timestamp: 0.69rem; /* 11px */
|
||||
|
||||
|
||||
/* Line Heights */
|
||||
--line-height-display: 0.80;
|
||||
--line-height-headline: 1.00;
|
||||
--line-height-heading-wide: 1.10;
|
||||
--line-height-light-capitalized: 1.20;
|
||||
--line-height-all-caps-xl: 1.10;
|
||||
--line-height-body-relaxed: 1.60;
|
||||
--line-height-inline-label: 1.20;
|
||||
--line-height-body-compact: 1.60;
|
||||
--line-height-eyebrow-all-caps: 1.30;
|
||||
--line-height-tag-label: 1.20;
|
||||
--line-height-caption-micro: 1.20;
|
||||
--line-height-meta-nano: 1.40;
|
||||
--line-height-mono-button: 2.00;
|
||||
--line-height-mono-timestamp: 1.20;
|
||||
--line-height-display: 0.95;
|
||||
--line-height-headline: 1;
|
||||
--line-height-heading-wide: 1;
|
||||
--line-height-light-capitalized: 1.2;
|
||||
--line-height-all-caps-xl: 1.4;
|
||||
--line-height-body-relaxed: 1.6;
|
||||
--line-height-inline-label: 1.2;
|
||||
--line-height-body-compact: 1.6;
|
||||
--line-height-eyebrow-all-caps: 1.3;
|
||||
--line-height-tag-label: 1.2;
|
||||
--line-height-caption-micro: 1.2;
|
||||
--line-height-meta-nano: 1.4;
|
||||
--line-height-mono-button: 2;
|
||||
--line-height-mono-timestamp: 1.2;
|
||||
}
|
||||
|
||||
/* Font Face Definitions */
|
||||
@font-face {
|
||||
font-family: 'Manuka';
|
||||
src: local('Impact'), local('Helvetica');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Newsreader:wght@400&family=Space+Grotesk:wght@300;500;700&family=Space+Mono:wght@700&display=swap");
|
||||
|
||||
@font-face {
|
||||
font-family: 'PolySans';
|
||||
src: local('Helvetica'), local('Arial');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PolySans';
|
||||
src: local('Helvetica'), local('Arial');
|
||||
font-family: "Anton";
|
||||
src: url("https://fonts.googleapis.com/css2?family=Anton&display=swap");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PolySans';
|
||||
src: local('Helvetica'), local('Arial');
|
||||
font-family: "Space Grotesk";
|
||||
src: url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&display=swap");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Space Grotesk";
|
||||
src: url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&display=swap");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PolySans';
|
||||
src: local('Helvetica'), local('Arial');
|
||||
font-family: "Space Grotesk";
|
||||
src: url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&display=swap");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PolySans Mono';
|
||||
src: local('Courier New'), local('Courier');
|
||||
font-weight: 500;
|
||||
font-family: "Space Mono";
|
||||
src: url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&display=swap");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PolySans Mono';
|
||||
src: local('Courier New'), local('Courier');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'FK Roman Standard';
|
||||
src: local('Georgia');
|
||||
font-family: "Newsreader";
|
||||
src: url("https://fonts.googleapis.com/css2?family=Newsreader:wght@400&display=swap");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -201,8 +189,10 @@ body {
|
|||
min-height: 100vh;
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-text-primary);
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
font-family: 'PolySans', Helvetica, Arial, sans-serif;
|
||||
transition:
|
||||
background-color 0.3s ease,
|
||||
color 0.3s ease;
|
||||
font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
|
||||
font-weight: var(--font-weight-regular);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
}
|
||||
|
|
@ -224,7 +214,7 @@ select {
|
|||
font-weight: var(--font-weight-regular);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
background-color: var(--color-background);
|
||||
background-color: var(--color-surface-slate);
|
||||
color: var(--color-text-primary);
|
||||
border-radius: var(--radius-small);
|
||||
padding: 8px 12px;
|
||||
|
|
@ -268,25 +258,30 @@ select:focus {
|
|||
|
||||
/* Button Styles */
|
||||
.btn {
|
||||
padding: 10px 24px;
|
||||
padding: 12px 28px;
|
||||
border-radius: var(--radius-feature);
|
||||
font-size: var(--font-size-mono-button);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
text-transform: uppercase;
|
||||
transition: all 0.18s ease;
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family:
|
||||
"Space Mono",
|
||||
Courier New,
|
||||
Courier,
|
||||
monospace;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--color-jelly-mint);
|
||||
color: var(--color-absolute-black);
|
||||
border: none;
|
||||
border-radius: var(--radius-feature);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
box-shadow: 0px 0px 0px 1px var(--color-dim-gray);
|
||||
box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
|
||||
color: var(--color-absolute-black);
|
||||
}
|
||||
|
||||
|
|
@ -305,23 +300,24 @@ select:focus {
|
|||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--color-surface-slate);
|
||||
color: var(--color-muted-text);
|
||||
background-color: var(--color-primary-text);
|
||||
color: var(--color-hazard-white);
|
||||
border: none;
|
||||
border-radius: var(--radius-feature);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
color: var(--color-absolute-black);
|
||||
background-color: rgba(19, 19, 19, 0.2);
|
||||
color: var(--color-primary-text);
|
||||
box-shadow: 0px 0px 0px 1px var(--color-dim-gray);
|
||||
}
|
||||
|
||||
.btn-tertiary {
|
||||
background-color: transparent;
|
||||
color: var(--color-jelly-mint);
|
||||
border: 1px solid var(--color-jelly-mint);
|
||||
color: var(--color-console-mint-border);
|
||||
border: 1px solid var(--color-console-mint-border);
|
||||
border-radius: var(--radius-outlined);
|
||||
padding: 10px 20px;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
.btn-tertiary:hover {
|
||||
|
|
@ -341,6 +337,23 @@ select:focus {
|
|||
color: var(--color-hazard-white);
|
||||
}
|
||||
|
||||
.btn-pill-tag {
|
||||
background-color: var(--color-jelly-mint);
|
||||
color: var(--color-absolute-black);
|
||||
border: none;
|
||||
border-radius: var(--radius-standard);
|
||||
padding: 6px 14px;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
font-weight: var(--font-weight-bold);
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
text-transform: uppercase;
|
||||
font-family:
|
||||
"Space Mono",
|
||||
Courier New,
|
||||
Courier,
|
||||
monospace;
|
||||
}
|
||||
|
||||
/* Card Styles */
|
||||
.card {
|
||||
background-color: var(--color-background);
|
||||
|
|
@ -357,11 +370,23 @@ select:focus {
|
|||
.card-accent {
|
||||
background-color: var(--color-jelly-mint);
|
||||
color: var(--color-absolute-black);
|
||||
border: none;
|
||||
border: 1px solid var(--color-console-mint-border);
|
||||
border-radius: var(--radius-standard);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.card-feature {
|
||||
background-color: var(--color-background);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: var(--radius-feature);
|
||||
padding: 32px;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.card-feature:hover {
|
||||
border-color: var(--color-jelly-mint);
|
||||
}
|
||||
|
||||
/* Link Styles */
|
||||
a {
|
||||
color: var(--color-link-default);
|
||||
|
|
@ -371,73 +396,85 @@ a {
|
|||
|
||||
a:hover {
|
||||
color: var(--color-link-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Typography Classes */
|
||||
.text-manuka {
|
||||
font-family: 'Manuka', Impact, Helvetica, sans-serif;
|
||||
font-weight: var(--font-weight-black);
|
||||
.text-anton {
|
||||
font-family: "Anton", Impact, Helvetica, sans-serif;
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-display);
|
||||
letter-spacing: var(--letter-spacing-tight-hero);
|
||||
}
|
||||
|
||||
.text-polysans {
|
||||
font-family: 'PolySans', Helvetica, Arial, sans-serif;
|
||||
.text-space-grotesk {
|
||||
font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.text-polysans-mono {
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
.text-space-mono {
|
||||
font-family:
|
||||
"Space Mono",
|
||||
Courier New,
|
||||
Courier,
|
||||
monospace;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
}
|
||||
|
||||
.text-fk-roman {
|
||||
font-family: 'FK Roman Standard', Georgia, serif;
|
||||
.text-newsreader {
|
||||
font-family: "Newsreader", Georgia, serif;
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
.text-hero {
|
||||
font-size: var(--font-size-hero);
|
||||
font-weight: var(--font-weight-black);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-display);
|
||||
letter-spacing: var(--letter-spacing-tight-hero);
|
||||
font-family: "Anton", Impact, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.text-secondary-display {
|
||||
font-size: var(--font-size-secondary-display);
|
||||
font-weight: var(--font-weight-black);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-display);
|
||||
font-family: "Anton", Impact, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.text-tertiary-display {
|
||||
font-size: var(--font-size-tertiary-display);
|
||||
font-weight: var(--font-weight-black);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-display);
|
||||
font-family: "Anton", Impact, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.text-large-headline {
|
||||
font-size: var(--font-size-large-headline);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-headline);
|
||||
font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.text-heading-wide {
|
||||
font-size: var(--font-size-heading-wide);
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-heading-wide);
|
||||
letter-spacing: var(--letter-spacing-tight-section);
|
||||
font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.text-heading-medium {
|
||||
font-size: var(--font-size-heading-medium);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-headline);
|
||||
font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.text-heading-small {
|
||||
font-size: var(--font-size-heading-small);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-headline);
|
||||
font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.text-light-capitalized {
|
||||
|
|
@ -446,26 +483,30 @@ a:hover {
|
|||
line-height: var(--line-height-light-capitalized);
|
||||
letter-spacing: var(--letter-spacing-wide);
|
||||
text-transform: uppercase;
|
||||
font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.text-all-caps-xl {
|
||||
font-size: var(--font-size-all-caps-xl);
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-weight: var(--font-weight-light);
|
||||
line-height: var(--line-height-all-caps-xl);
|
||||
letter-spacing: var(--letter-spacing-wide);
|
||||
text-transform: uppercase;
|
||||
font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.text-bold-body {
|
||||
font-size: var(--font-size-bold-body);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-headline);
|
||||
font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.text-body-relaxed {
|
||||
font-size: var(--font-size-body-relaxed);
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: var(--line-height-body-relaxed);
|
||||
font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.text-inline-label {
|
||||
|
|
@ -473,12 +514,14 @@ a:hover {
|
|||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-inline-label);
|
||||
letter-spacing: var(--letter-spacing-tight-subheading);
|
||||
font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.text-body-compact {
|
||||
font-size: var(--font-size-body-compact);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-body-compact);
|
||||
font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.text-eyebrow-all-caps {
|
||||
|
|
@ -487,6 +530,7 @@ a:hover {
|
|||
line-height: var(--line-height-eyebrow-all-caps);
|
||||
letter-spacing: var(--letter-spacing-wide);
|
||||
text-transform: uppercase;
|
||||
font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.text-tag-label {
|
||||
|
|
@ -495,6 +539,7 @@ a:hover {
|
|||
line-height: var(--line-height-tag-label);
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
text-transform: uppercase;
|
||||
font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.text-caption-micro {
|
||||
|
|
@ -503,6 +548,7 @@ a:hover {
|
|||
line-height: var(--line-height-caption-micro);
|
||||
letter-spacing: var(--letter-spacing-mono-sm);
|
||||
text-transform: uppercase;
|
||||
font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.text-meta-nano {
|
||||
|
|
@ -511,22 +557,39 @@ a:hover {
|
|||
line-height: var(--line-height-meta-nano);
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
text-transform: uppercase;
|
||||
font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.text-mono-button {
|
||||
font-size: var(--font-size-mono-button);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-mono-button);
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
text-transform: uppercase;
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family:
|
||||
"Space Mono",
|
||||
Courier New,
|
||||
Courier,
|
||||
monospace;
|
||||
}
|
||||
|
||||
.text-mono-timestamp {
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-mono-timestamp);
|
||||
letter-spacing: var(--letter-spacing-mono-sm);
|
||||
text-transform: uppercase;
|
||||
font-family: 'PolySans Mono', Courier New, Courier, monospace;
|
||||
font-family:
|
||||
"Space Mono",
|
||||
Courier New,
|
||||
Courier,
|
||||
monospace;
|
||||
}
|
||||
|
||||
.text-serif-body {
|
||||
font-size: var(--font-size-body-relaxed);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: 1.3;
|
||||
letter-spacing: var(--letter-spacing-tight-subheading);
|
||||
font-family: "Newsreader", Georgia, serif;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue