fix: issue #1 button styling
This commit is contained in:
@@ -646,12 +646,6 @@
|
||||
max-width: 22px;
|
||||
max-height: 22px;
|
||||
padding: 0;
|
||||
background: var(--vscode-button-background);
|
||||
color: var(--vscode-button-foreground);
|
||||
}
|
||||
|
||||
.chat-panel .chat-send-button:hover:not(:disabled) {
|
||||
background: var(--vscode-button-hoverBackground);
|
||||
}
|
||||
|
||||
.chat-panel .chat-send-button:disabled {
|
||||
|
||||
@@ -14,8 +14,7 @@
|
||||
|
||||
.editor-main,
|
||||
.editor-meta,
|
||||
.panel-shell,
|
||||
.assistant-card {
|
||||
.panel-shell {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@@ -750,8 +749,7 @@
|
||||
}
|
||||
|
||||
.post-editor .editor-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
@@ -759,23 +757,27 @@
|
||||
|
||||
.post-editor .editor-toolbar-left {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.post-editor .editor-toolbar-center {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* ponytail: right group keeps its content width so buttons never wrap or
|
||||
overlap the mode toggle; the left label shrinks instead */
|
||||
.post-editor .editor-toolbar-right {
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.post-editor .editor-mode-toggle {
|
||||
@@ -817,38 +819,6 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.post-editor .gallery-button {
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--vscode-button-secondaryBackground);
|
||||
color: var(--vscode-button-secondaryForeground);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
|
||||
.post-editor .gallery-button:hover {
|
||||
background-color: var(--vscode-button-secondaryHoverBackground);
|
||||
}
|
||||
|
||||
.post-editor .insert-post-link-button,
|
||||
.post-editor .insert-media-button {
|
||||
padding: 4px 8px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--vscode-button-secondaryBackground);
|
||||
color: var(--vscode-button-secondaryForeground);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
|
||||
.post-editor .insert-post-link-button:hover,
|
||||
.post-editor .insert-media-button:hover {
|
||||
background-color: var(--vscode-button-secondaryHoverBackground);
|
||||
}
|
||||
|
||||
.post-editor .editor-preview {
|
||||
flex: 1;
|
||||
background-color: var(--vscode-input-background);
|
||||
@@ -937,8 +907,7 @@
|
||||
.post-editor .editor-header,
|
||||
.scripts-view-shell .ui-editor-header,
|
||||
.templates-view-shell .ui-editor-header,
|
||||
.post-editor .metadata-toggle-header,
|
||||
.post-editor .editor-toolbar {
|
||||
.post-editor .metadata-toggle-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
@@ -954,7 +923,6 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.post-editor .editor-toolbar-right,
|
||||
.post-editor .ui-editor-actions,
|
||||
.scripts-view-shell .ui-editor-actions,
|
||||
.templates-view-shell .ui-editor-actions {
|
||||
|
||||
@@ -67,30 +67,12 @@
|
||||
color: var(--vscode-descriptionForeground);
|
||||
}
|
||||
|
||||
.import-analysis button,
|
||||
.import-analysis select {
|
||||
border: 1px solid var(--vscode-button-border, transparent);
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.import-analysis button {
|
||||
background: var(--vscode-button-secondaryBackground, var(--vscode-button-background));
|
||||
color: var(--vscode-button-secondaryForeground, var(--vscode-button-foreground));
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.import-analysis button:hover:not(:disabled) {
|
||||
background: var(--vscode-button-secondaryHoverBackground, var(--vscode-button-hoverBackground));
|
||||
}
|
||||
|
||||
.import-analyze-btn,
|
||||
.import-execute-btn {
|
||||
background: var(--vscode-button-background) !important;
|
||||
color: var(--vscode-button-foreground) !important;
|
||||
}
|
||||
|
||||
.import-analysis button:disabled {
|
||||
opacity: 0.65;
|
||||
cursor: not-allowed;
|
||||
@@ -110,7 +92,7 @@
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid var(--vscode-descriptionForeground);
|
||||
border-top-color: var(--vscode-button-background);
|
||||
border-top-color: var(--vscode-button-background, #0e639c);
|
||||
border-radius: 50%;
|
||||
animation: import-spinner-rotate 0.8s linear infinite;
|
||||
flex-shrink: 0;
|
||||
|
||||
@@ -128,20 +128,6 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
[data-testid="media-editor"] .add-link-btn {
|
||||
background: var(--vscode-button-secondaryBackground);
|
||||
border: none;
|
||||
color: var(--vscode-button-secondaryForeground);
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
[data-testid="media-editor"] .add-link-btn:hover {
|
||||
background: var(--vscode-button-secondaryHoverBackground);
|
||||
}
|
||||
|
||||
[data-testid="media-editor"] .post-picker {
|
||||
background: var(--vscode-dropdown-background);
|
||||
border: 1px solid var(--vscode-dropdown-border);
|
||||
|
||||
@@ -257,8 +257,7 @@
|
||||
}
|
||||
|
||||
.ai-suggestions-modal-footer,
|
||||
.confirm-delete-modal-footer,
|
||||
.confirm-dialog-actions {
|
||||
.confirm-delete-modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
@@ -266,42 +265,12 @@
|
||||
border-top: 1px solid #3c3c3c;
|
||||
}
|
||||
|
||||
.button-cancel,
|
||||
.button-delete,
|
||||
.button-apply,
|
||||
.confirm-dialog-actions button,
|
||||
.insert-modal-submit,
|
||||
.language-picker-row,
|
||||
.shared-popover-entry,
|
||||
.colour-swatch {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button-cancel,
|
||||
.confirm-dialog-actions button,
|
||||
.insert-modal-submit {
|
||||
border: 1px solid #4c4c4c;
|
||||
border-radius: 4px;
|
||||
padding: 8px 14px;
|
||||
background: transparent;
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
.button-apply,
|
||||
.confirm-dialog-actions .primary,
|
||||
.insert-modal-submit {
|
||||
background: #0e639c;
|
||||
border-color: #0e639c;
|
||||
}
|
||||
|
||||
.button-delete {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 8px 14px;
|
||||
background: #c73c3c;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.insert-modal-tabs {
|
||||
display: flex;
|
||||
margin: 0 -20px;
|
||||
|
||||
@@ -116,7 +116,6 @@
|
||||
}
|
||||
|
||||
.assistant-sidebar-prompt-form,
|
||||
.assistant-sidebar-welcome,
|
||||
.assistant-sidebar-transcript {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -142,12 +141,6 @@
|
||||
|
||||
.assistant-sidebar-start-button {
|
||||
align-self: flex-start;
|
||||
border: 1px solid var(--vscode-button-border, transparent);
|
||||
border-radius: 999px;
|
||||
background: var(--vscode-button-background);
|
||||
color: var(--vscode-button-foreground);
|
||||
padding: 7px 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.assistant-sidebar-start-button:disabled {
|
||||
@@ -155,7 +148,6 @@
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.assistant-card,
|
||||
.assistant-sidebar-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -446,8 +446,7 @@
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.panel-entry,
|
||||
.assistant-card {
|
||||
.panel-entry {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
@@ -784,14 +783,6 @@
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.editor-toolbar button {
|
||||
padding: 9px 14px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
background: var(--panel-3);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.editor-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -799,7 +790,6 @@
|
||||
}
|
||||
|
||||
.editor-meta-card,
|
||||
.assistant-card,
|
||||
.panel-entry {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
@@ -148,7 +148,6 @@
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.assistant-card span,
|
||||
.panel-entry span,
|
||||
.editor-meta-row span,
|
||||
.editor-subtitle,
|
||||
@@ -777,8 +776,8 @@
|
||||
}
|
||||
|
||||
.filter-chip.active {
|
||||
background-color: var(--vscode-button-background);
|
||||
color: var(--vscode-button-foreground);
|
||||
background-color: var(--vscode-button-background, #0e639c);
|
||||
color: var(--vscode-button-foreground, #ffffff);
|
||||
}
|
||||
|
||||
.filter-chip.has-color {
|
||||
|
||||
@@ -37,6 +37,9 @@
|
||||
--vscode-editorGroupHeader-tabsBorder: #1e1e1e;
|
||||
--vscode-toolbar-hoverBackground: rgba(90, 93, 94, 0.31);
|
||||
--vscode-toolbar-activeBackground: rgba(99, 102, 103, 0.31);
|
||||
--vscode-button-secondaryBackground: rgba(255, 255, 255, 0.08);
|
||||
--vscode-button-secondaryForeground: #cccccc;
|
||||
--vscode-button-secondaryHoverBackground: #4a4d51;
|
||||
--vscode-foreground: #cccccc;
|
||||
--vscode-descriptionForeground: #858585;
|
||||
--vscode-panel-border: #80808059;
|
||||
@@ -130,12 +133,13 @@ button.compact {
|
||||
}
|
||||
|
||||
button.primary {
|
||||
background-color: var(--vscode-button-background);
|
||||
color: var(--vscode-button-foreground, #ffffff);
|
||||
background-color: var(--vscode-button-background, #0e639c);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
button.primary:hover {
|
||||
background-color: var(--vscode-button-hoverBackground);
|
||||
background-color: var(--vscode-button-hoverBackground, #1177bb);
|
||||
}
|
||||
|
||||
button.success {
|
||||
|
||||
Reference in New Issue
Block a user