fix table with handling, icons implemented
This commit is contained in:
root
+120
-6
@@ -1,4 +1,4 @@
|
||||
:root{font-family:Arial,sans-serif;color:#222;background:#f3f5f7}*{box-sizing:border-box}body{margin:0}header{height:58px;background:#036;color:#fff;display:flex;align-items:center;padding:0 24px;gap:36px}.brand{font-size:22px;font-weight:bold}nav{display:flex;gap:20px}header a{color:#fff;text-decoration:none}main{width:100%;max-width:none;margin:24px 0;padding:0 24px}.toolbar{display:flex;justify-content:space-between;align-items:center}.button,button{background:#0878bd;color:#fff;border:0;border-radius:4px;padding:10px 15px;text-decoration:none;cursor:pointer}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.card{display:flex;gap:14px;background:#fff;border:1px solid #d8dde2;border-radius:6px;padding:14px;text-decoration:none;color:#222}.card img,.placeholder{width:58px;height:58px;object-fit:cover;border-radius:5px}.placeholder{display:grid;place-items:center;background:#dbeaf3;font-size:26px}.card small{display:block;color:#667;margin-top:8px}table{width:100%;border-collapse:collapse;background:#fff}th,td{text-align:left;border-bottom:1px solid #ddd;padding:10px}th{background:#e8edf1}a{color:#056ca8}.filters{display:flex;gap:10px;margin:12px 0 18px;flex-wrap:wrap}.filters a{background:#fff;border:1px solid #ccd4da;padding:7px 10px;border-radius:4px;text-decoration:none}form{background:#fff;padding:20px;border:1px solid #d8dde2;border-radius:6px}label{display:block;margin-bottom:14px;font-weight:bold}input,select,textarea{display:block;width:100%;padding:9px;margin-top:5px;border:1px solid #bbb;border-radius:4px;font:inherit}textarea{min-height:100px}.detail{display:grid;grid-template-columns:280px 1fr;gap:24px;background:#fff;padding:20px}.asset-image{max-width:100%;max-height:260px;object-fit:contain}dl{display:grid;grid-template-columns:220px 1fr;margin:0}dt,dd{padding:9px;border-bottom:1px solid #eee;margin:0}dt{font-weight:bold}@media(max-width:700px){.detail{grid-template-columns:1fr}dl{grid-template-columns:1fr}header{padding:0 10px;gap:12px}nav{gap:9px}}
|
||||
:root{font-family:Arial,sans-serif;color:#222;background:#f3f5f7}*{box-sizing:border-box}body{margin:0}header{height:58px;background:#036;color:#fff;display:flex;align-items:center;padding:0 24px;gap:36px}.brand{font-size:22px;font-weight:bold}nav{display:flex;gap:20px}header a{color:#fff;text-decoration:none}main{width:100%;max-width:none;margin:24px 0;padding:0 24px}.toolbar{display:flex;justify-content:space-between;align-items:center}.button,button{background:#0878bd;color:#fff;border:0;border-radius:4px;padding:10px 15px;text-decoration:none;cursor:pointer}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.card{display:flex;gap:14px;background:#fff;border:1px solid #d8dde2;border-radius:6px;padding:14px;text-decoration:none;color:#222}.card img,.placeholder{width:58px;height:58px;object-fit:contain;border-radius:5px}.card img{flex:0 0 58px;padding:2px;background:transparent}.placeholder{display:grid;place-items:center;background:#dbeaf3;font-size:26px}.card small{display:block;color:#667;margin-top:8px}table{width:100%;border-collapse:collapse;background:#fff}th,td{text-align:left;border-bottom:1px solid #ddd;padding:10px}th{background:#e8edf1}a{color:#056ca8}.filters{display:flex;gap:10px;margin:12px 0 18px;flex-wrap:wrap}.filters a{background:#fff;border:1px solid #ccd4da;padding:7px 10px;border-radius:4px;text-decoration:none}form{background:#fff;padding:20px;border:1px solid #d8dde2;border-radius:6px}label{display:block;margin-bottom:14px;font-weight:bold}input,select,textarea{display:block;width:100%;padding:9px;margin-top:5px;border:1px solid #bbb;border-radius:4px;font:inherit}textarea{min-height:100px}.detail{display:grid;grid-template-columns:280px 1fr;gap:24px;background:#fff;padding:20px}.asset-image{max-width:100%;max-height:260px;object-fit:contain}dl{display:grid;grid-template-columns:220px 1fr;margin:0}dt,dd{padding:9px;border-bottom:1px solid #eee;margin:0}dt{font-weight:bold}@media(max-width:700px){.detail{grid-template-columns:1fr}dl{grid-template-columns:1fr}header{padding:0 10px;gap:12px}nav{gap:9px}}
|
||||
.panel{background:#fff;border:1px solid #ccd4dc;border-radius:4px;padding:18px;margin-top:18px;overflow:auto}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.card{background:#fff;border:1px solid #ccd4dc;padding:16px;display:flex;flex-direction:column}.card strong{font-size:28px}.config-list{display:grid;grid-template-columns:minmax(130px,220px) 1fr;gap:8px 16px}.sync-status{display:inline-block;padding:3px 8px;border-radius:12px;background:#e5e7eb}.status-success,.status-synced,.status-created,.status-updated{background:#d9f2df}.status-conflict,.status-partial{background:#fff0c2}.status-error,.status-missing{background:#ffd9d9}code{word-break:break-all}
|
||||
.log-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.log-header h2{margin:0}.sync-log{height:340px;overflow:auto;background:#111827;color:#e5e7eb;border-radius:5px;padding:12px;font-family:Consolas,"Courier New",monospace;font-size:13px;line-height:1.55;white-space:pre-wrap}.log-line{padding:1px 0}.log-debug{color:#9ca3af}.log-info{color:#dbeafe}.log-success{color:#86efac}.log-warning{color:#fde68a}.log-error{color:#fca5a5}button:disabled{opacity:.65;cursor:wait}
|
||||
.toolbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.inline-form{display:inline;margin:0;padding:0;background:transparent;border:0}.button-danger{background:#b42318}.button-danger:hover{background:#912018}.empty-state{text-align:center;color:#667;padding:24px}
|
||||
@@ -2934,12 +2934,12 @@ html.table-column-resizing * {
|
||||
|
||||
|
||||
/* User-resizable widths for every data-table column. */
|
||||
.data-table th.table-resizable-column-header {
|
||||
table th.table-resizable-column-header {
|
||||
position: relative;
|
||||
padding-right: 14px;
|
||||
overflow: visible;
|
||||
}
|
||||
.data-table .table-column-resizer {
|
||||
table .table-column-resizer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -4px;
|
||||
@@ -2949,7 +2949,7 @@ html.table-column-resizing * {
|
||||
z-index: 4;
|
||||
touch-action: none;
|
||||
}
|
||||
.data-table .table-column-resizer::after {
|
||||
table .table-column-resizer::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
@@ -2957,7 +2957,121 @@ html.table-column-resizing * {
|
||||
left: 4px;
|
||||
border-left: 1px solid transparent;
|
||||
}
|
||||
.data-table .table-column-resizer:hover::after,
|
||||
.data-table .table-column-resizer:focus-visible::after {
|
||||
table .table-column-resizer:hover::after,
|
||||
table .table-column-resizer:focus-visible::after {
|
||||
border-left-color: currentColor;
|
||||
}
|
||||
|
||||
|
||||
/* Asset list device preview: first real column after the generated row number. */
|
||||
.asset-visual-column {
|
||||
width: 64px;
|
||||
min-width: 64px;
|
||||
max-width: 64px;
|
||||
text-align: center;
|
||||
padding-left: 6px !important;
|
||||
padding-right: 6px !important;
|
||||
}
|
||||
.asset-visual-link { display:inline-flex; align-items:center; justify-content:center; width:48px; height:42px; }
|
||||
.asset-list-device-image { max-width:46px; max-height:38px; width:auto; height:auto; object-fit:contain; border-radius:4px; }
|
||||
.asset-list-device-placeholder { font-size:24px; opacity:.35; line-height:1; }
|
||||
.mesh-icon-category-label { align-items:stretch; }
|
||||
.mesh-icon-category-title { display:flex; align-items:center; gap:8px; min-height:38px; }
|
||||
.mesh-icon-preview { width:38px; height:38px; object-fit:contain; flex:0 0 38px; }
|
||||
|
||||
/* v0.5.5.55 asset/category image management */
|
||||
.asset-edit-image-preview{display:flex;align-items:center;gap:14px;margin:8px 0 10px;padding:10px;border:1px solid #d8dde2;border-radius:6px;background:var(--am-surface-soft,#f8fafc);max-width:520px}
|
||||
.asset-edit-preview-image{width:110px;height:90px;object-fit:contain;border-radius:5px;background:transparent;border:1px solid #e1e5e9}
|
||||
.asset-edit-image-preview-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
|
||||
.button-small{padding:7px 10px;font-size:.9rem}
|
||||
.category-image-cell{text-align:center}
|
||||
.category-table-image{width:52px;height:42px;object-fit:contain;border-radius:4px;display:inline-block;background:transparent}
|
||||
html[data-theme="dark"] .asset-edit-image-preview{border-color:#46515d;background:#252b31}
|
||||
html[data-theme="dark"] .asset-edit-preview-image{background:transparent;border-color:#4a5561}
|
||||
|
||||
/* v0.5.5.56: consistent transparent image presentation and reliable table resize handles. */
|
||||
.asset-list-device-image,
|
||||
.category-table-image,
|
||||
.asset-edit-preview-image,
|
||||
.card img {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.card img,
|
||||
.asset-list-device-image,
|
||||
.category-table-image,
|
||||
.asset-edit-preview-image {
|
||||
object-fit: contain !important;
|
||||
object-position: center center;
|
||||
}
|
||||
|
||||
table th.table-resizable-column-header {
|
||||
position: relative;
|
||||
}
|
||||
table th.table-resizable-column-header > .table-column-resizer {
|
||||
right: 0;
|
||||
width: 12px;
|
||||
z-index: 30;
|
||||
}
|
||||
table th.table-resizable-column-header > .table-column-resizer::after {
|
||||
left: auto;
|
||||
right: 0;
|
||||
border-left-color: color-mix(in srgb, currentColor 28%, transparent);
|
||||
}
|
||||
table th.table-resizable-column-header > .table-column-resizer:hover::after,
|
||||
table th.table-resizable-column-header > .table-column-resizer:focus-visible::after {
|
||||
border-left-color: currentColor;
|
||||
}
|
||||
|
||||
/* v0.5.5.57: universal table resize visibility and reliable image editor state. */
|
||||
.asset-edit-image-preview[hidden],
|
||||
.image-remove-pending[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
.image-remove-pending {
|
||||
margin: 8px 0 10px;
|
||||
padding: 9px 11px;
|
||||
max-width: 520px;
|
||||
border: 1px solid var(--am-warning, #d97706);
|
||||
border-radius: 6px;
|
||||
background: color-mix(in srgb, var(--am-warning, #d97706) 10%, transparent);
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
/* Every resizable header has a permanent separator; the transparent hit area
|
||||
remains wider than the visible line for easy mouse/touch dragging. */
|
||||
table th.table-resizable-column-header {
|
||||
position: relative !important;
|
||||
box-shadow: inset -1px 0 0 color-mix(in srgb, currentColor 28%, transparent);
|
||||
}
|
||||
table th.table-resizable-column-header > .table-column-resizer {
|
||||
display: block !important;
|
||||
pointer-events: auto !important;
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
right: -5px !important;
|
||||
bottom: 0 !important;
|
||||
width: 11px !important;
|
||||
z-index: 100 !important;
|
||||
cursor: col-resize !important;
|
||||
touch-action: none;
|
||||
background: transparent;
|
||||
}
|
||||
table th.table-resizable-column-header:hover > .table-column-resizer::after,
|
||||
table th.table-resizable-column-header > .table-column-resizer:focus-visible::after {
|
||||
border-left-color: currentColor !important;
|
||||
}
|
||||
|
||||
/* Reusable standard image library */
|
||||
.standard-image-library{margin-top:14px;padding-top:12px;border-top:1px solid var(--border,#d8dde2);max-width:760px}
|
||||
.image-library-help,.image-library-empty{margin:4px 0 9px}
|
||||
.standard-image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin:8px 0 12px;max-height:330px;overflow:auto;padding:2px}
|
||||
.standard-image-choice{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:7px;border:1px solid var(--border,#d8dde2);border-radius:7px;cursor:pointer;background:transparent}
|
||||
.standard-image-choice:hover{border-color:var(--primary,#2583d8)}
|
||||
.standard-image-choice:has(input:checked){outline:2px solid var(--primary,#2583d8);outline-offset:-2px}
|
||||
.standard-image-choice input{position:absolute;top:6px;left:6px;margin:0}
|
||||
.standard-image-choice img{width:72px;height:58px;object-fit:contain;background:transparent}
|
||||
.standard-image-choice span{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:.78rem}
|
||||
.image-upload-label{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-top:8px}
|
||||
html[data-theme="dark"] .standard-image-library{border-color:#46515d}
|
||||
html[data-theme="dark"] .standard-image-choice{border-color:#46515d}
|
||||
|
||||
Reference in New Issue
Block a user