fix: quickaction in media with icon on button

This commit is contained in:
2026-04-26 22:25:33 +02:00
parent 4e991247e1
commit 004c359e84
3 changed files with 107 additions and 8 deletions

View File

@@ -2674,6 +2674,87 @@ button svg * {
font-style: italic;
}
[data-testid="media-editor"] .quick-actions-wrapper {
position: relative;
}
[data-testid="media-editor"] .quick-actions-btn {
display: inline-flex;
align-items: center;
gap: 6px;
}
[data-testid="media-editor"] .quick-actions-btn-icon {
font-size: 12px;
line-height: 1;
}
[data-testid="media-editor"] .quick-actions-menu {
position: absolute;
top: calc(100% + 4px);
right: 0;
width: 280px;
background: var(--vscode-dropdown-background, #252526);
border: 1px solid var(--vscode-dropdown-border, #454545);
border-radius: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
overflow: hidden;
z-index: 30;
}
[data-testid="media-editor"] .quick-actions-divider {
height: 1px;
background: var(--vscode-dropdown-border, #454545);
}
[data-testid="media-editor"] .quick-action-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
width: 100%;
padding: 10px 12px;
background: none;
border: none;
color: var(--vscode-dropdown-foreground, #ccc);
cursor: pointer;
text-align: left;
transition: background 0.1s;
}
[data-testid="media-editor"] .quick-action-item:hover:not(:disabled) {
background: var(--vscode-list-hoverBackground, #2a2d2e);
}
[data-testid="media-editor"] .quick-action-item:disabled {
opacity: 0.5;
cursor: not-allowed;
}
[data-testid="media-editor"] .quick-action-icon {
font-size: 16px;
flex-shrink: 0;
margin-top: 2px;
}
[data-testid="media-editor"] .quick-action-text {
display: flex;
flex: 1;
flex-direction: column;
gap: 2px;
min-width: 0;
}
[data-testid="media-editor"] .quick-action-text strong {
font-size: 13px;
font-weight: 500;
}
[data-testid="media-editor"] .quick-action-text small {
font-size: 11px;
opacity: 0.7;
}
[data-testid="media-editor"] .editor-content {
flex: 1;
display: flex;
@@ -2742,6 +2823,7 @@ button svg * {
background-color: var(--vscode-input-background);
border-radius: 8px;
min-height: 300px;
overflow: hidden;
}
[data-testid="media-editor"] .media-preview-placeholder {
@@ -2753,17 +2835,20 @@ button svg * {
}
[data-testid="media-editor"] .media-preview-image {
max-width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
width: 100%;
height: 100%;
min-height: 0;
padding: 16px;
box-sizing: border-box;
}
[data-testid="media-editor"] .media-preview-image img {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 4px;
}