ADD：meta-light样式
This commit is contained in:
parent
585de35cb4
commit
8677d89b03
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'PolySans', Helvetica, Arial, sans-serif;
|
||||
font-family: var(--font-family-primary);
|
||||
font-weight: var(--font-weight-regular);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
font-kerning: normal;
|
||||
|
|
|
|||
|
|
@ -4,12 +4,13 @@
|
|||
right: 20px;
|
||||
bottom: 20px;
|
||||
width: 350px;
|
||||
background-color: var(--color-background);
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: var(--radius-standard);
|
||||
border-radius: var(--radius-card);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.chat-content {
|
||||
|
|
@ -18,43 +19,44 @@
|
|||
flex: 1;
|
||||
overflow: hidden;
|
||||
z-index: 20;
|
||||
border-radius: var(--radius-standard);
|
||||
background-color: var(--color-background);
|
||||
border-radius: var(--radius-card);
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
padding: 16px 20px;
|
||||
padding: var(--space-7) var(--space-9);
|
||||
border-bottom: 1px solid var(--color-border-subtle);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: var(--radius-standard) var(--radius-standard) 0 0;
|
||||
border-radius: var(--radius-card) var(--radius-card) 0 0;
|
||||
}
|
||||
|
||||
.chat-header h3 {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-heading-small);
|
||||
font-size: var(--font-size-heading-3);
|
||||
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;
|
||||
font-family: var(--font-family-primary);
|
||||
font-feature-settings: "ss01", "ss02";
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.new-chat-btn {
|
||||
padding: 8px;
|
||||
background-color: var(--color-surface-slate);
|
||||
padding: var(--space-3);
|
||||
background-color: var(--color-soft-gray);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: var(--radius-circle);
|
||||
cursor: pointer;
|
||||
|
|
@ -66,18 +68,20 @@
|
|||
}
|
||||
|
||||
.new-chat-btn:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
border-color: var(--color-jelly-mint);
|
||||
background-color: var(--color-button-hover);
|
||||
color: var(--color-white);
|
||||
border-color: var(--color-meta-blue);
|
||||
}
|
||||
|
||||
.new-chat-btn:focus-visible {
|
||||
outline: 1px solid var(--color-focus-ring);
|
||||
outline: 3px ring var(--color-meta-blue);
|
||||
outline: auto 2px var(--color-meta-blue);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.history-btn {
|
||||
padding: 8px;
|
||||
background-color: var(--color-surface-slate);
|
||||
padding: var(--space-3);
|
||||
background-color: var(--color-soft-gray);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: var(--radius-circle);
|
||||
cursor: pointer;
|
||||
|
|
@ -89,19 +93,21 @@
|
|||
}
|
||||
|
||||
.history-btn:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
border-color: var(--color-jelly-mint);
|
||||
background-color: var(--color-button-hover);
|
||||
color: var(--color-white);
|
||||
border-color: var(--color-meta-blue);
|
||||
}
|
||||
|
||||
.history-btn:focus-visible {
|
||||
outline: 1px solid var(--color-focus-ring);
|
||||
outline: 3px ring var(--color-meta-blue);
|
||||
outline: auto 2px var(--color-meta-blue);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.history-btn.active {
|
||||
background-color: var(--color-jelly-mint);
|
||||
border-color: var(--color-jelly-mint);
|
||||
color: var(--color-absolute-black);
|
||||
background-color: var(--color-meta-blue);
|
||||
border-color: var(--color-meta-blue);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.model-selector {
|
||||
|
|
@ -109,30 +115,31 @@
|
|||
}
|
||||
|
||||
.model-select {
|
||||
padding: 8px 12px;
|
||||
background-color: var(--color-surface-slate);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
padding: var(--space-3) var(--space-5);
|
||||
background-color: var(--color-soft-gray);
|
||||
border: 1px solid var(--color-border-medium);
|
||||
border-radius: var(--radius-small);
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
font-size: var(--font-size-caption);
|
||||
font-family: var(--font-family-primary);
|
||||
letter-spacing: var(--letter-spacing-tighter);
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease;
|
||||
transition: border-color 200ms ease, box-shadow 200ms ease;
|
||||
}
|
||||
|
||||
.model-select:hover {
|
||||
border-color: var(--color-jelly-mint);
|
||||
border-color: var(--color-meta-blue);
|
||||
}
|
||||
|
||||
.model-select:focus {
|
||||
border-color: var(--color-jelly-mint);
|
||||
border-color: hsl(214, 89%, 52%);
|
||||
box-shadow: 0 0 0 3px rgba(0, 100, 224, 0.1);
|
||||
}
|
||||
|
||||
.model-select:focus-visible {
|
||||
outline: 1px solid var(--color-focus-ring);
|
||||
outline: 3px ring var(--color-meta-blue);
|
||||
outline: auto 2px var(--color-meta-blue);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -143,14 +150,15 @@
|
|||
width: 250px;
|
||||
height: 200px;
|
||||
transform: translateX(0);
|
||||
background-color: var(--color-background);
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: var(--radius-standard);
|
||||
border-radius: var(--radius-card);
|
||||
transition: transform 0.3s ease;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.conversation-sidebar.visible {
|
||||
|
|
@ -159,15 +167,14 @@
|
|||
|
||||
.conversation-sidebar h4 {
|
||||
margin: 0;
|
||||
padding: 12px 16px;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
padding: var(--space-5) var(--space-7);
|
||||
font-family: var(--font-family-primary);
|
||||
font-size: var(--font-size-caption-bold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
color: var(--color-text-primary);
|
||||
border-bottom: 1px solid var(--color-border-subtle);
|
||||
flex-shrink: 0;
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
}
|
||||
|
||||
.conversation-list {
|
||||
|
|
@ -176,7 +183,7 @@
|
|||
}
|
||||
|
||||
.conversation-item {
|
||||
padding: 10px 16px;
|
||||
padding: var(--space-4) var(--space-7);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease;
|
||||
border-bottom: 1px solid var(--color-border-subtle);
|
||||
|
|
@ -184,40 +191,41 @@
|
|||
}
|
||||
|
||||
.conversation-item:hover {
|
||||
background-color: var(--color-surface-slate);
|
||||
background-color: var(--color-soft-gray);
|
||||
}
|
||||
|
||||
.conversation-item:focus-visible {
|
||||
outline: 1px solid var(--color-focus-ring);
|
||||
outline: 3px ring var(--color-meta-blue);
|
||||
outline: auto 2px var(--color-meta-blue);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.conversation-item.active {
|
||||
background-color: var(--color-jelly-mint);
|
||||
color: var(--color-absolute-black);
|
||||
background-color: var(--color-meta-blue);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.conversation-title {
|
||||
font-size: var(--font-size-body-relaxed);
|
||||
font-size: var(--font-size-body);
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: var(--space-2);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
font-family: var(--font-family-primary);
|
||||
}
|
||||
|
||||
.conversation-time {
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
font-family: var(--font-family-secondary);
|
||||
font-size: var(--font-size-small);
|
||||
color: var(--color-text-muted);
|
||||
letter-spacing: var(--letter-spacing-mono-sm);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
}
|
||||
|
||||
.conversation-item.active .conversation-time {
|
||||
color: var(--color-absolute-black);
|
||||
color: var(--color-white);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.chat-main {
|
||||
|
|
@ -225,11 +233,11 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-standard) var(--radius-standard) 0 0;
|
||||
border-radius: var(--radius-card) var(--radius-card) 0 0;
|
||||
}
|
||||
|
||||
.bottom-model-selector {
|
||||
padding: 0 16px 8px;
|
||||
padding: 0 var(--space-7) var(--space-3);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -238,10 +246,10 @@
|
|||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
padding: var(--space-9);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: var(--space-7);
|
||||
}
|
||||
|
||||
.message {
|
||||
|
|
@ -259,28 +267,29 @@
|
|||
|
||||
.message-content {
|
||||
max-width: 80%;
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--radius-standard);
|
||||
font-size: var(--font-size-body-relaxed);
|
||||
line-height: var(--line-height-body-relaxed);
|
||||
padding: var(--space-5) var(--space-7);
|
||||
border-radius: var(--radius-card);
|
||||
font-size: var(--font-size-body);
|
||||
line-height: var(--line-height-body);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
font-family: var(--font-family-primary);
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.message.user .message-content {
|
||||
background-color: var(--color-jelly-mint);
|
||||
color: var(--color-absolute-black);
|
||||
border: 1px solid var(--color-jelly-mint);
|
||||
background-color: var(--color-meta-blue);
|
||||
color: var(--color-white);
|
||||
border: 1px solid var(--color-meta-blue);
|
||||
}
|
||||
|
||||
.message.ai .message-content {
|
||||
background-color: var(--color-surface-slate);
|
||||
background-color: var(--color-soft-gray);
|
||||
color: var(--color-text-primary);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
}
|
||||
|
||||
.message.ai.loading .message-content {
|
||||
background-color: var(--color-surface-slate);
|
||||
background-color: var(--color-soft-gray);
|
||||
color: var(--color-text-primary);
|
||||
opacity: 0.7;
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
|
|
@ -289,7 +298,7 @@
|
|||
.loading-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.loading-indicator span {
|
||||
|
|
@ -310,8 +319,8 @@
|
|||
}
|
||||
|
||||
.upload-progress {
|
||||
padding: 12px 20px;
|
||||
background-color: var(--color-surface-slate);
|
||||
padding: var(--space-5) var(--space-9);
|
||||
background-color: var(--color-soft-gray);
|
||||
border-bottom: 1px solid var(--color-border-subtle);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
|
@ -320,43 +329,42 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6px 0;
|
||||
font-size: var(--font-size-body-relaxed);
|
||||
padding: var(--space-3) 0;
|
||||
font-size: var(--font-size-body);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
font-family: var(--font-family-primary);
|
||||
}
|
||||
|
||||
.upload-status {
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
font-family: var(--font-family-secondary);
|
||||
font-size: var(--font-size-small);
|
||||
color: var(--color-text-muted);
|
||||
letter-spacing: var(--letter-spacing-mono-sm);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
}
|
||||
|
||||
.context-display {
|
||||
padding: 12px 20px;
|
||||
background-color: var(--color-surface-slate);
|
||||
padding: var(--space-5) var(--space-9);
|
||||
background-color: var(--color-soft-gray);
|
||||
border-bottom: 1px solid var(--color-border-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.context-icon {
|
||||
font-size: 16px;
|
||||
color: var(--color-jelly-mint);
|
||||
color: var(--color-meta-blue);
|
||||
}
|
||||
|
||||
.context-text {
|
||||
flex: 1;
|
||||
font-size: var(--font-size-body-relaxed);
|
||||
font-size: var(--font-size-body);
|
||||
color: var(--color-text-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
font-family: var(--font-family-primary);
|
||||
}
|
||||
|
||||
.context-clear {
|
||||
|
|
@ -365,27 +373,29 @@
|
|||
color: var(--color-text-primary);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
padding: var(--space-2);
|
||||
line-height: 1;
|
||||
transition: all 0.15s ease;
|
||||
border-radius: var(--radius-circle);
|
||||
}
|
||||
|
||||
.context-clear:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
background-color: var(--color-button-hover);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.context-clear:focus-visible {
|
||||
outline: 1px solid var(--color-focus-ring);
|
||||
outline: 3px ring var(--color-meta-blue);
|
||||
outline: auto 2px var(--color-meta-blue);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
padding: 16px;
|
||||
padding: var(--space-7);
|
||||
border-top: 1px solid var(--color-border-subtle);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.input-container {
|
||||
|
|
@ -395,27 +405,30 @@
|
|||
|
||||
.chat-input textarea {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background-color: var(--color-surface-slate);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
padding: var(--space-5);
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-border-medium);
|
||||
border-radius: var(--radius-small);
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-body-relaxed);
|
||||
font-size: var(--font-size-body);
|
||||
resize: none;
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
font-family: var(--font-family-primary);
|
||||
height: 120px;
|
||||
padding-bottom: 50px;
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
transition: border-color 0.15s ease;
|
||||
transition: border-color 200ms ease, box-shadow 200ms ease;
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.chat-input textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-jelly-mint);
|
||||
border-color: hsl(214, 89%, 52%);
|
||||
box-shadow: 0 0 0 3px rgba(0, 100, 224, 0.1);
|
||||
}
|
||||
|
||||
.chat-input textarea:focus-visible {
|
||||
outline: 1px solid var(--color-focus-ring);
|
||||
outline: 3px ring var(--color-meta-blue);
|
||||
outline: auto 2px var(--color-meta-blue);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -426,7 +439,7 @@
|
|||
.absolute-btn {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
background-color: var(--color-surface-slate);
|
||||
background-color: var(--color-soft-gray);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: var(--radius-pill);
|
||||
cursor: pointer;
|
||||
|
|
@ -439,19 +452,21 @@
|
|||
}
|
||||
|
||||
.absolute-btn:focus-visible {
|
||||
outline: 1px solid var(--color-focus-ring);
|
||||
outline: 3px ring var(--color-meta-blue);
|
||||
outline: auto 2px var(--color-meta-blue);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.absolute-btn.upload-btn {
|
||||
left: 12px;
|
||||
padding: 8px;
|
||||
padding: var(--space-3);
|
||||
border-radius: var(--radius-circle);
|
||||
}
|
||||
|
||||
.absolute-btn.upload-btn:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
border-color: var(--color-jelly-mint);
|
||||
background-color: var(--color-button-hover);
|
||||
color: var(--color-white);
|
||||
border-color: var(--color-meta-blue);
|
||||
}
|
||||
|
||||
.absolute-btn.model-selector-btn {
|
||||
|
|
@ -463,45 +478,45 @@
|
|||
}
|
||||
|
||||
.absolute-btn.model-selector-btn .model-select {
|
||||
padding: 8px 12px;
|
||||
background-color: var(--color-surface-slate);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
padding: var(--space-3) var(--space-5);
|
||||
background-color: var(--color-soft-gray);
|
||||
border: 1px solid var(--color-border-medium);
|
||||
border-radius: var(--radius-small);
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
font-size: var(--font-size-caption);
|
||||
font-family: var(--font-family-primary);
|
||||
letter-spacing: var(--letter-spacing-tighter);
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease;
|
||||
transition: border-color 200ms ease, box-shadow 200ms ease;
|
||||
}
|
||||
|
||||
.absolute-btn.send-btn {
|
||||
right: 12px;
|
||||
padding: 8px 16px;
|
||||
background-color: var(--color-jelly-mint);
|
||||
color: var(--color-absolute-black);
|
||||
border-color: var(--color-jelly-mint);
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-button);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
padding: var(--space-3) var(--space-7);
|
||||
background-color: var(--color-meta-blue);
|
||||
color: var(--color-white);
|
||||
border-color: var(--color-meta-blue);
|
||||
font-family: var(--font-family-primary);
|
||||
font-size: var(--font-size-button);
|
||||
font-weight: var(--font-weight-regular);
|
||||
letter-spacing: var(--letter-spacing-tighter);
|
||||
transition: background 200ms ease, transform 150ms ease;
|
||||
}
|
||||
|
||||
.absolute-btn.send-btn:hover:not(:disabled) {
|
||||
background-color: var(--color-primary-hover);
|
||||
box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
|
||||
background-color: var(--color-meta-blue-hover);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.absolute-btn.send-btn:focus-visible {
|
||||
outline: 1px solid var(--color-focus-ring);
|
||||
outline: 3px ring var(--color-meta-blue);
|
||||
outline: auto 2px var(--color-meta-blue);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.absolute-btn.send-btn:disabled {
|
||||
background-color: var(--color-surface-slate);
|
||||
background-color: var(--color-soft-gray);
|
||||
border-color: var(--color-border-subtle);
|
||||
color: var(--color-text-muted);
|
||||
opacity: 0.6;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -4,7 +4,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--color-overlay-black);
|
||||
background-color: var(--color-overlay);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -12,8 +12,8 @@
|
|||
}
|
||||
|
||||
.context-modal {
|
||||
background-color: var(--color-background);
|
||||
border-radius: var(--radius-standard);
|
||||
background-color: var(--color-white);
|
||||
border-radius: var(--radius-card);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
width: 400px;
|
||||
max-width: 90%;
|
||||
|
|
@ -22,10 +22,11 @@
|
|||
flex-direction: column;
|
||||
position: relative;
|
||||
z-index: 1001;
|
||||
box-shadow: 0 12px 28px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.context-modal-header {
|
||||
padding: 24px;
|
||||
padding: var(--space-9);
|
||||
border-bottom: 1px solid var(--color-border-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -34,11 +35,12 @@
|
|||
|
||||
.context-modal-header h3 {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-heading-small);
|
||||
font-size: var(--font-size-heading-3);
|
||||
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;
|
||||
font-family: var(--font-family-primary);
|
||||
font-feature-settings: "ss01", "ss02";
|
||||
}
|
||||
|
||||
.context-modal-close {
|
||||
|
|
@ -58,16 +60,17 @@
|
|||
}
|
||||
|
||||
.context-modal-close:hover {
|
||||
background-color: var(--color-surface-slate);
|
||||
background-color: var(--color-soft-gray);
|
||||
}
|
||||
|
||||
.context-modal-close:focus-visible {
|
||||
outline: 1px solid var(--color-focus-ring);
|
||||
outline: 3px ring var(--color-meta-blue);
|
||||
outline: auto 2px var(--color-meta-blue);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.context-modal-body {
|
||||
padding: 24px;
|
||||
padding: var(--space-9);
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
@ -75,43 +78,44 @@
|
|||
.context-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: var(--space-7);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
font-family: var(--font-family-primary);
|
||||
font-size: var(--font-size-caption-bold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
padding: var(--space-5) var(--space-6);
|
||||
border: 1px solid var(--color-border-medium);
|
||||
border-radius: var(--radius-small);
|
||||
font-size: var(--font-size-body-relaxed);
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
font-size: var(--font-size-body);
|
||||
font-family: var(--font-family-primary);
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease;
|
||||
background-color: var(--color-surface-slate);
|
||||
transition: border-color 200ms ease, box-shadow 200ms ease;
|
||||
background-color: var(--color-white);
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: var(--color-jelly-mint);
|
||||
border-color: hsl(214, 89%, 52%);
|
||||
box-shadow: 0 0 0 3px rgba(0, 100, 224, 0.1);
|
||||
}
|
||||
|
||||
.form-input:focus-visible {
|
||||
outline: 1px solid var(--color-focus-ring);
|
||||
outline: 3px ring var(--color-meta-blue);
|
||||
outline: auto 2px var(--color-meta-blue);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -120,26 +124,28 @@
|
|||
}
|
||||
|
||||
.form-textarea {
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
padding: var(--space-5) var(--space-6);
|
||||
border: 1px solid var(--color-border-medium);
|
||||
border-radius: var(--radius-small);
|
||||
font-size: var(--font-size-body-relaxed);
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
font-size: var(--font-size-body);
|
||||
font-family: var(--font-family-primary);
|
||||
resize: none;
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease;
|
||||
transition: border-color 200ms ease, box-shadow 200ms ease;
|
||||
min-height: 120px;
|
||||
background-color: var(--color-surface-slate);
|
||||
background-color: var(--color-white);
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
}
|
||||
|
||||
.form-textarea:focus {
|
||||
border-color: var(--color-jelly-mint);
|
||||
border-color: hsl(214, 89%, 52%);
|
||||
box-shadow: 0 0 0 3px rgba(0, 100, 224, 0.1);
|
||||
}
|
||||
|
||||
.form-textarea:focus-visible {
|
||||
outline: 1px solid var(--color-focus-ring);
|
||||
outline: 3px ring var(--color-meta-blue);
|
||||
outline: auto 2px var(--color-meta-blue);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -148,68 +154,71 @@
|
|||
}
|
||||
|
||||
.context-modal-footer {
|
||||
padding: 24px;
|
||||
padding: var(--space-9);
|
||||
border-top: 1px solid var(--color-border-subtle);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.context-modal-cancel {
|
||||
background-color: var(--color-surface-slate);
|
||||
background-color: var(--color-soft-gray);
|
||||
color: var(--color-text-primary);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
padding: 12px 28px;
|
||||
border-radius: var(--radius-feature);
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-button);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
padding: var(--space-4) var(--space-9);
|
||||
border-radius: var(--radius-pill);
|
||||
font-family: var(--font-family-primary);
|
||||
font-size: var(--font-size-button);
|
||||
font-weight: var(--font-weight-regular);
|
||||
letter-spacing: var(--letter-spacing-tighter);
|
||||
cursor: pointer;
|
||||
transition: all 0.18s ease;
|
||||
transition: background 200ms ease, transform 150ms ease;
|
||||
}
|
||||
|
||||
.context-modal-cancel:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
border-color: var(--color-jelly-mint);
|
||||
background-color: var(--color-button-hover);
|
||||
color: var(--color-white);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.context-modal-cancel:focus-visible {
|
||||
outline: 1px solid var(--color-focus-ring);
|
||||
outline: 3px ring var(--color-meta-blue);
|
||||
outline: auto 2px var(--color-meta-blue);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.context-modal-cancel:active {
|
||||
opacity: 0.9;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.context-modal-submit {
|
||||
background-color: var(--color-jelly-mint);
|
||||
color: var(--color-absolute-black);
|
||||
background-color: var(--color-meta-blue);
|
||||
color: var(--color-white);
|
||||
border: none;
|
||||
padding: 12px 28px;
|
||||
border-radius: var(--radius-feature);
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-button);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
padding: var(--space-4) var(--space-9);
|
||||
border-radius: var(--radius-pill);
|
||||
font-family: var(--font-family-primary);
|
||||
font-size: var(--font-size-button);
|
||||
font-weight: var(--font-weight-regular);
|
||||
letter-spacing: var(--letter-spacing-tighter);
|
||||
cursor: pointer;
|
||||
transition: all 0.18s ease;
|
||||
transition: background 200ms ease, transform 150ms ease;
|
||||
}
|
||||
|
||||
.context-modal-submit:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
|
||||
background-color: var(--color-meta-blue-hover);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.context-modal-submit:focus-visible {
|
||||
outline: 1px solid var(--color-focus-ring);
|
||||
outline: 3px ring var(--color-meta-blue);
|
||||
outline: auto 2px var(--color-meta-blue);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.context-modal-submit:active {
|
||||
background-color: var(--color-dim-gray);
|
||||
background-color: var(--color-meta-blue-pressed);
|
||||
transform: scale(0.9);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,26 +3,27 @@
|
|||
top: 100px;
|
||||
left: 20px;
|
||||
width: 48px;
|
||||
background-color: var(--color-background);
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: var(--radius-standard);
|
||||
border-radius: var(--radius-card);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 100;
|
||||
transition: width 0.3s ease;
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.menu-items {
|
||||
padding: 20px 0;
|
||||
padding: var(--space-9) 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
padding: var(--space-4) 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
color: var(--color-text-primary);
|
||||
|
|
@ -30,47 +31,48 @@
|
|||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: var(--color-surface-slate);
|
||||
background-color: var(--color-soft-gray);
|
||||
}
|
||||
|
||||
.menu-item:focus-visible {
|
||||
outline: 1px solid var(--color-focus-ring);
|
||||
outline: 3px ring var(--color-meta-blue);
|
||||
outline: auto 2px var(--color-meta-blue);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.menu-item.active {
|
||||
background-color: var(--color-jelly-mint);
|
||||
color: var(--color-absolute-black);
|
||||
background-color: var(--color-meta-blue);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
font-size: 20px;
|
||||
margin: 0 14px;
|
||||
margin: 0 var(--space-5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
font-family: var(--font-family-primary);
|
||||
font-size: var(--font-size-caption);
|
||||
font-weight: var(--font-weight-medium);
|
||||
letter-spacing: var(--letter-spacing-tighter);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
left: 48px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: var(--color-surface-slate);
|
||||
color: var(--color-primary-text);
|
||||
padding: 10px 16px;
|
||||
border-radius: var(--radius-standard);
|
||||
background-color: var(--color-soft-gray);
|
||||
color: var(--color-text-primary);
|
||||
padding: var(--space-4) var(--space-7);
|
||||
border-radius: var(--radius-card);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
white-space: nowrap;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 101;
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.menu-item:hover .menu-label {
|
||||
|
|
@ -84,7 +86,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--color-overlay-black);
|
||||
background-color: var(--color-overlay);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -92,8 +94,8 @@
|
|||
}
|
||||
|
||||
.note-modal {
|
||||
background-color: var(--color-background);
|
||||
border-radius: var(--radius-standard);
|
||||
background-color: var(--color-white);
|
||||
border-radius: var(--radius-card);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
width: 400px;
|
||||
max-width: 90%;
|
||||
|
|
@ -102,6 +104,7 @@
|
|||
flex-direction: column;
|
||||
position: relative;
|
||||
z-index: 1001;
|
||||
box-shadow: 0 12px 28px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.note-modal-position {
|
||||
|
|
@ -109,7 +112,7 @@
|
|||
}
|
||||
|
||||
.note-modal-header {
|
||||
padding: 24px;
|
||||
padding: var(--space-9);
|
||||
border-bottom: 1px solid var(--color-border-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -118,11 +121,12 @@
|
|||
|
||||
.note-modal-header h3 {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-heading-small);
|
||||
font-size: var(--font-size-heading-3);
|
||||
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;
|
||||
font-family: var(--font-family-primary);
|
||||
font-feature-settings: "ss01", "ss02";
|
||||
}
|
||||
|
||||
.note-modal-close {
|
||||
|
|
@ -142,16 +146,17 @@
|
|||
}
|
||||
|
||||
.note-modal-close:hover {
|
||||
background-color: var(--color-surface-slate);
|
||||
background-color: var(--color-soft-gray);
|
||||
}
|
||||
|
||||
.note-modal-close:focus-visible {
|
||||
outline: 1px solid var(--color-focus-ring);
|
||||
outline: 3px ring var(--color-meta-blue);
|
||||
outline: auto 2px var(--color-meta-blue);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.note-modal-body {
|
||||
padding: 24px;
|
||||
padding: var(--space-9);
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -160,30 +165,32 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 120px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
padding: var(--space-5);
|
||||
border: 1px solid var(--color-border-medium);
|
||||
border-radius: var(--radius-small);
|
||||
font-size: var(--font-size-body-relaxed);
|
||||
font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
|
||||
font-size: var(--font-size-body);
|
||||
font-family: var(--font-family-primary);
|
||||
resize: none;
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease;
|
||||
background-color: var(--color-surface-slate);
|
||||
transition: border-color 200ms ease, box-shadow 200ms ease;
|
||||
background-color: var(--color-white);
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
}
|
||||
|
||||
.note-modal-textarea:focus {
|
||||
border-color: var(--color-jelly-mint);
|
||||
border-color: hsl(214, 89%, 52%);
|
||||
box-shadow: 0 0 0 3px rgba(0, 100, 224, 0.1);
|
||||
}
|
||||
|
||||
.note-modal-textarea:focus-visible {
|
||||
outline: 1px solid var(--color-focus-ring);
|
||||
outline: 3px ring var(--color-meta-blue);
|
||||
outline: auto 2px var(--color-meta-blue);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.note-modal-footer {
|
||||
padding: 24px;
|
||||
padding: var(--space-9);
|
||||
border-top: 1px solid var(--color-border-subtle);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
|
@ -191,35 +198,36 @@
|
|||
}
|
||||
|
||||
.note-modal-submit {
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-button);
|
||||
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);
|
||||
font-family: var(--font-family-primary);
|
||||
font-size: var(--font-size-button);
|
||||
font-weight: var(--font-weight-regular);
|
||||
letter-spacing: var(--letter-spacing-tighter);
|
||||
background-color: var(--color-meta-blue);
|
||||
color: var(--color-white);
|
||||
border: none;
|
||||
padding: 12px 28px;
|
||||
border-radius: var(--radius-feature);
|
||||
padding: var(--space-4) var(--space-9);
|
||||
border-radius: var(--radius-pill);
|
||||
cursor: pointer;
|
||||
transition: all 0.18s ease;
|
||||
transition: background 200ms ease, transform 150ms ease;
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
right: 12px;
|
||||
bottom: var(--space-5);
|
||||
right: var(--space-5);
|
||||
}
|
||||
|
||||
.note-modal-submit:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
|
||||
background-color: var(--color-meta-blue-hover);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.note-modal-submit:focus-visible {
|
||||
outline: 1px solid var(--color-focus-ring);
|
||||
outline: 3px ring var(--color-meta-blue);
|
||||
outline: auto 2px var(--color-meta-blue);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.note-modal-submit:active {
|
||||
background-color: var(--color-dim-gray);
|
||||
background-color: var(--color-meta-blue-pressed);
|
||||
transform: scale(0.9);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
|
@ -228,18 +236,18 @@
|
|||
left: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: var(--color-surface-slate);
|
||||
color: var(--color-primary-text);
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--radius-standard);
|
||||
background-color: var(--color-soft-gray);
|
||||
color: var(--color-text-primary);
|
||||
padding: var(--space-5) var(--space-7);
|
||||
border-radius: var(--radius-card);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
font-family: var(--font-family-primary);
|
||||
font-size: var(--font-size-caption);
|
||||
letter-spacing: var(--letter-spacing-tighter);
|
||||
white-space: nowrap;
|
||||
z-index: 101;
|
||||
animation: fadeInOut 3s ease-in-out;
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
@keyframes fadeInOut {
|
||||
|
|
@ -267,7 +275,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--color-overlay-black);
|
||||
background-color: var(--color-overlay);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -275,8 +283,8 @@
|
|||
}
|
||||
|
||||
.resource-modal {
|
||||
background-color: var(--color-background);
|
||||
border-radius: var(--radius-standard);
|
||||
background-color: var(--color-white);
|
||||
border-radius: var(--radius-card);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
width: 600px;
|
||||
max-width: 90%;
|
||||
|
|
@ -285,10 +293,11 @@
|
|||
flex-direction: column;
|
||||
position: relative;
|
||||
z-index: 1001;
|
||||
box-shadow: 0 12px 28px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.resource-modal-header {
|
||||
padding: 24px;
|
||||
padding: var(--space-9);
|
||||
border-bottom: 1px solid var(--color-border-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -297,11 +306,12 @@
|
|||
|
||||
.resource-modal-header h3 {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-heading-small);
|
||||
font-size: var(--font-size-heading-3);
|
||||
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;
|
||||
font-family: var(--font-family-primary);
|
||||
font-feature-settings: "ss01", "ss02";
|
||||
}
|
||||
|
||||
.resource-modal-close {
|
||||
|
|
@ -321,31 +331,32 @@
|
|||
}
|
||||
|
||||
.resource-modal-close:hover {
|
||||
background-color: var(--color-surface-slate);
|
||||
background-color: var(--color-soft-gray);
|
||||
}
|
||||
|
||||
.resource-modal-close:focus-visible {
|
||||
outline: 1px solid var(--color-focus-ring);
|
||||
outline: 3px ring var(--color-meta-blue);
|
||||
outline: auto 2px var(--color-meta-blue);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.resource-modal-body {
|
||||
padding: 24px;
|
||||
padding: var(--space-9);
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.resource-row {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
gap: var(--space-9);
|
||||
margin-bottom: var(--space-9);
|
||||
}
|
||||
|
||||
.resource-section {
|
||||
flex: 1;
|
||||
background-color: var(--color-surface-slate);
|
||||
border-radius: var(--radius-standard);
|
||||
padding: 16px;
|
||||
background-color: var(--color-soft-gray);
|
||||
border-radius: var(--radius-card);
|
||||
padding: var(--space-7);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
}
|
||||
|
||||
|
|
@ -355,107 +366,110 @@
|
|||
}
|
||||
|
||||
.resource-section h4 {
|
||||
margin: 0 0 12px 0;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
margin: 0 0 var(--space-5) 0;
|
||||
font-family: var(--font-family-primary);
|
||||
font-size: var(--font-size-caption-bold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
}
|
||||
|
||||
.resource-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.logo-display {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
gap: var(--space-5);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.logo-placeholder {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: var(--color-surface-slate);
|
||||
background-color: var(--color-white);
|
||||
border-radius: var(--radius-small);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
color: var(--color-text-primary);
|
||||
font-family: var(--font-family-primary);
|
||||
font-size: var(--font-size-caption);
|
||||
color: var(--color-text-secondary);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
letter-spacing: var(--letter-spacing-tighter);
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.font-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.font-item {
|
||||
padding: 10px 14px;
|
||||
background-color: var(--color-surface-slate);
|
||||
padding: var(--space-4) var(--space-5);
|
||||
background-color: var(--color-white);
|
||||
border-radius: var(--radius-small);
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
font-family: var(--font-family-primary);
|
||||
font-size: var(--font-size-caption);
|
||||
color: var(--color-text-primary);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
letter-spacing: var(--letter-spacing-tighter);
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.image-display {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
gap: var(--space-5);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: var(--color-surface-slate);
|
||||
background-color: var(--color-white);
|
||||
border-radius: var(--radius-small);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
color: var(--color-text-primary);
|
||||
font-family: var(--font-family-primary);
|
||||
font-size: var(--font-size-caption);
|
||||
color: var(--color-text-secondary);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
letter-spacing: var(--letter-spacing-tighter);
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-button);
|
||||
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);
|
||||
font-family: var(--font-family-primary);
|
||||
font-size: var(--font-size-button);
|
||||
font-weight: var(--font-weight-regular);
|
||||
letter-spacing: var(--letter-spacing-tighter);
|
||||
background-color: var(--color-meta-blue);
|
||||
color: var(--color-white);
|
||||
border: none;
|
||||
padding: 12px 28px;
|
||||
border-radius: var(--radius-feature);
|
||||
padding: var(--space-4) var(--space-9);
|
||||
border-radius: var(--radius-pill);
|
||||
cursor: pointer;
|
||||
transition: all 0.18s ease;
|
||||
transition: background 200ms ease, transform 150ms ease;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.upload-btn:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
|
||||
background-color: var(--color-meta-blue-hover);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.upload-btn:focus-visible {
|
||||
outline: 1px solid var(--color-focus-ring);
|
||||
outline: 3px ring var(--color-meta-blue);
|
||||
outline: auto 2px var(--color-meta-blue);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.upload-btn:active {
|
||||
background-color: var(--color-dim-gray);
|
||||
background-color: var(--color-meta-blue-pressed);
|
||||
transform: scale(0.9);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,15 +2,17 @@
|
|||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
height: 60px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
background-color: var(--color-background);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: var(--radius-standard);
|
||||
padding: 0 8px;
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-cta-gray-border);
|
||||
border-radius: var(--radius-pill);
|
||||
padding: 0 var(--space-7);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.top-bar-left {
|
||||
|
|
@ -18,58 +20,58 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.verge-wordmark {
|
||||
font-family: 'Anton', Impact, Helvetica, sans-serif;
|
||||
font-size: var(--font-size-tertiary-display);
|
||||
font-weight: var(--font-weight-regular);
|
||||
color: var(--color-primary-text);
|
||||
letter-spacing: var(--letter-spacing-tight-hero);
|
||||
line-height: var(--line-height-display);
|
||||
.meta-wordmark {
|
||||
font-family: var(--font-family-primary);
|
||||
font-size: var(--font-size-heading-3);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
line-height: var(--line-height-heading-3);
|
||||
margin: 0;
|
||||
font-feature-settings: "ss01", "ss02";
|
||||
}
|
||||
|
||||
.top-bar-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
gap: var(--space-9);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-timestamp);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-primary-text);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
font-family: var(--font-family-primary);
|
||||
font-size: var(--font-size-body-compact);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: none;
|
||||
transition: all 0.15s ease;
|
||||
padding: 8px 0;
|
||||
padding: var(--space-3) 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--color-deep-link-blue);
|
||||
color: var(--color-link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
box-shadow: 0px -1px 0px 0px inset var(--color-jelly-mint);
|
||||
box-shadow: 0px -2px 0px 0px inset var(--color-meta-blue);
|
||||
}
|
||||
|
||||
.top-bar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
gap: var(--space-7);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
color: var(--color-primary-text);
|
||||
color: var(--color-text-primary);
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.search-icon:hover {
|
||||
color: var(--color-deep-link-blue);
|
||||
color: var(--color-link-hover);
|
||||
}
|
||||
|
||||
.chat-session {
|
||||
|
|
@ -79,38 +81,38 @@
|
|||
}
|
||||
|
||||
.chat-btn {
|
||||
font-family: 'Space Mono', Courier New, Courier, monospace;
|
||||
font-size: var(--font-size-mono-button);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--letter-spacing-mono);
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--radius-feature);
|
||||
transition: all 0.18s ease;
|
||||
background-color: var(--color-surface-slate);
|
||||
color: var(--color-muted-text);
|
||||
font-family: var(--font-family-primary);
|
||||
font-size: var(--font-size-button);
|
||||
font-weight: var(--font-weight-regular);
|
||||
letter-spacing: var(--letter-spacing-tighter);
|
||||
padding: var(--space-4) var(--space-7);
|
||||
border-radius: var(--radius-pill);
|
||||
transition: background 200ms ease, transform 150ms ease;
|
||||
background-color: var(--color-soft-gray);
|
||||
color: var(--color-text-secondary);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.chat-btn:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
color: var(--color-absolute-black);
|
||||
box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
|
||||
background-color: var(--color-button-hover);
|
||||
color: var(--color-white);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.chat-btn.active {
|
||||
background-color: var(--color-jelly-mint);
|
||||
color: var(--color-absolute-black);
|
||||
background-color: var(--color-meta-blue);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.chat-btn:focus-visible {
|
||||
outline: 1px solid var(--color-focus-ring);
|
||||
outline: 3px ring var(--color-meta-blue);
|
||||
outline: auto 2px var(--color-meta-blue);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
gap: var(--space-5);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
|
|
|||
891
src/index.css
891
src/index.css
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue