Fix table checkbox ellipsis and style selection checkboxes.
Release rolling / release (push) Successful in 8m43s

This commit is contained in:
Raven Scott
2026-07-15 23:05:47 -04:00
parent afc10d1dbc
commit 2153cdbbde
+106
View File
@@ -2000,6 +2000,97 @@ textarea::placeholder {
min-width: 0;
}
/* Checkbox columns: no ellipsis (was showing "..." after checkboxes) */
.table th:has(> input[type='checkbox']),
.table td:has(> input[type='checkbox']),
.table th.table-check-col,
.table td.table-check-col {
overflow: visible !important;
text-overflow: clip !important;
white-space: nowrap;
width: 2.75rem;
min-width: 2.75rem;
max-width: 3rem;
padding-left: 0.65rem;
padding-right: 0.4rem;
text-align: center;
vertical-align: middle;
}
/* Selection checkboxes — compact accent-styled boxes */
.table input[type='checkbox'],
input.container-checkbox,
input.image-checkbox,
input.reg-tag-check,
#select-all-containers,
#select-all-images,
#registry-tags-select-all {
-webkit-appearance: none;
appearance: none;
width: 1rem;
height: 1rem;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
box-sizing: border-box;
border: 1.5px solid var(--border-strong);
border-radius: 4px;
background-color: var(--bg-tertiary);
background-repeat: no-repeat;
background-position: center;
background-size: 0.7rem 0.7rem;
cursor: pointer;
transition:
border-color 0.15s ease,
background-color 0.15s ease,
box-shadow 0.15s ease;
}
.table input[type='checkbox']:hover,
input.container-checkbox:hover,
input.image-checkbox:hover,
input.reg-tag-check:hover,
#select-all-containers:hover,
#select-all-images:hover,
#registry-tags-select-all:hover {
border-color: var(--accent-primary);
background-color: var(--bg-hover);
}
.table input[type='checkbox']:checked,
input.container-checkbox:checked,
input.image-checkbox:checked,
input.reg-tag-check:checked,
#select-all-containers:checked,
#select-all-images:checked,
#registry-tags-select-all:checked {
background-color: var(--accent-primary);
border-color: var(--accent-primary);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' stroke='%230a0c10' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.table input[type='checkbox']:focus-visible,
input.container-checkbox:focus-visible,
input.image-checkbox:focus-visible,
input.reg-tag-check:focus-visible,
#select-all-containers:focus-visible,
#select-all-images:focus-visible,
#registry-tags-select-all:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.28);
}
.table input[type='checkbox']:indeterminate,
#select-all-containers:indeterminate,
#select-all-images:indeterminate,
#registry-tags-select-all:indeterminate {
background-color: var(--accent-primary);
border-color: var(--accent-primary);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8h9' stroke='%230a0c10' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* ─── Responsive resource tables (no horizontal scrollbar) ─── */
.view,
.view .container-fluid,
@@ -2102,7 +2193,12 @@ textarea::placeholder {
#containers-view table th:nth-child(1),
#containers-view table td:nth-child(1) {
width: 2.75rem;
min-width: 2.75rem;
max-width: 3rem;
text-align: center;
overflow: visible !important;
text-overflow: clip !important;
white-space: nowrap;
}
#containers-view table th:nth-child(2),
#containers-view table td:nth-child(2) {
@@ -2213,7 +2309,12 @@ textarea::placeholder {
#networks-view table th:nth-child(1),
#networks-view table td:nth-child(1) {
width: 2.75rem;
min-width: 2.75rem;
max-width: 3rem;
text-align: center;
overflow: visible !important;
text-overflow: clip !important;
white-space: nowrap;
}
#images-view table td,
@@ -2575,6 +2676,11 @@ textarea::placeholder {
overflow: hidden;
}
#containers-view #container-list > tr > td:first-child {
overflow: visible !important;
text-overflow: clip !important;
}
/* ── Container more-actions modal ── */
.cam-modal {
border: 1px solid var(--border-strong);