mirror of
https://github.com/gtritchie/bulk-properties.git
synced 2026-07-22 06:08:37 +00:00
eaf24746b3
* Move "Delete selected" button to select/deselect row Addresses #48: the warning-red delete button next to the lighter-red "Update properties" CTA drew the eye toward delete and made update look inactive. Move delete to the Select all / Deselect all row, left-justified, with the same styling as the sibling buttons. * Let selection row span full modal width The "Delete selected" button was only pushed left within the right half of the row. Hide the empty .setting-item-info on this row so the control area spans the modal, letting margin-right: auto put Delete at the left edge while Select all / Deselect all stay on the right.
112 lines
2.6 KiB
CSS
112 lines
2.6 KiB
CSS
.bulk-properties-modal {
|
|
max-width: 500px;
|
|
}
|
|
|
|
.bulk-properties-date-input,
|
|
.bulk-properties-number-input {
|
|
background: var(--background-modifier-form-field);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--input-radius);
|
|
color: var(--text-normal);
|
|
padding: var(--size-4-1) var(--size-4-2);
|
|
font-size: var(--font-ui-medium);
|
|
}
|
|
|
|
.bulk-properties-modal a:focus-visible {
|
|
outline: 2px solid var(--background-modifier-border-focus);
|
|
outline-offset: 2px;
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
.bulk-properties-file-list {
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
padding: var(--size-4-1);
|
|
margin-bottom: var(--size-4-4);
|
|
}
|
|
|
|
.bulk-properties-file-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-4-2);
|
|
padding: var(--size-2-1) 0;
|
|
}
|
|
|
|
.bulk-properties-file-path {
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.bulk-properties-cancel-btn {
|
|
margin-left: var(--size-4-2);
|
|
}
|
|
|
|
.bulk-properties-selection-row .setting-item-info {
|
|
display: none;
|
|
}
|
|
|
|
.bulk-properties-delete-btn {
|
|
margin-right: auto;
|
|
}
|
|
|
|
.bulk-properties-value-container {
|
|
padding-bottom: var(--size-4-3);
|
|
}
|
|
|
|
.bulk-properties-pill-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--size-2-2);
|
|
min-height: var(--input-height);
|
|
padding: var(--size-4-1) var(--size-4-2);
|
|
background: var(--background-modifier-form-field);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--input-radius);
|
|
cursor: text;
|
|
}
|
|
|
|
.bulk-properties-pill-container:focus-within {
|
|
border-color: var(--background-modifier-border-focus);
|
|
box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
|
|
}
|
|
|
|
.bulk-properties-pill-container .multi-select-pill {
|
|
font-size: var(--font-ui-smaller);
|
|
padding: var(--size-2-1) var(--size-2-3);
|
|
}
|
|
|
|
.bulk-properties-pill-container .multi-select-pill-remove-button {
|
|
border: none;
|
|
background: none;
|
|
padding: var(--size-2-1);
|
|
border-radius: var(--radius-s);
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.bulk-properties-pill-container .multi-select-pill-remove-button:hover {
|
|
color: var(--text-normal);
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.bulk-properties-pill-container .multi-select-pill-remove-button:focus-visible {
|
|
color: var(--text-normal);
|
|
outline: 2px solid var(--background-modifier-border-focus);
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
.bulk-properties-pill-input {
|
|
flex: 1 1 80px;
|
|
min-width: 80px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-medium);
|
|
outline: none;
|
|
padding: 0;
|
|
}
|