fix: issue #1 button styling

This commit is contained in:
2026-07-06 09:45:43 +02:00
parent a772e3abea
commit c8d2c73a72
27 changed files with 424 additions and 799 deletions

View File

@@ -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 {

View File

@@ -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 {

View File

@@ -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;

View File

@@ -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);

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;
}

View File

@@ -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 {

View File

@@ -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 {