favs, last used, sortable columns, and update splitter transforms to match selection

This commit is contained in:
Dustin Farley
2025-12-06 00:21:38 -08:00
parent dc10a90851
commit 27d63583a5
5 changed files with 584 additions and 20 deletions
+95 -4
View File
@@ -1445,6 +1445,66 @@ h1, h2, h3, h4, h5 {
padding-left: 8px;
text-transform: capitalize;
border-left: 4px solid;
display: flex;
align-items: center;
gap: 8px;
}
.category-order-controls {
display: flex;
gap: 4px;
margin-left: auto;
opacity: 0.6;
transition: opacity 0.2s ease;
}
.category-title:hover .category-order-controls {
opacity: 1;
}
.category-move-btn {
background: var(--button-bg);
border: 1px solid var(--input-border);
border-radius: 4px;
padding: 4px 6px;
cursor: pointer;
color: var(--text-color);
font-size: 0.75rem;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
}
.category-move-btn:hover {
background: var(--button-hover-bg);
border-color: var(--accent-color);
color: var(--accent-color);
transform: scale(1.1);
}
.category-move-btn:active {
transform: scale(0.95);
}
.last-used-section {
border: 2px dashed var(--accent-color);
background: rgba(var(--accent-color-rgb), 0.05);
}
.last-used-section .category-title {
color: var(--accent-color);
border-left-color: var(--accent-color);
}
.last-used-section .transform-buttons .transform-button-group {
width: 100%;
}
.legend-item {
position: relative;
}
.category-title.transform-category-encoding {
@@ -1509,6 +1569,10 @@ h1, h2, h3, h4, h5 {
width: 100%;
}
#category-randomizer .transform-buttons .transform-button {
width: 100%;
}
#category-randomizer .transform-buttons .transform-button .transform-preview {
max-width: 300px;
}
@@ -2083,20 +2147,47 @@ h1, h2, h3, h4, h5 {
width: 30px;
}
/* Auto-copy icon styling */
.auto-copy-icon {
/* Favorite icon styling */
.favorite-icon {
position: absolute;
right: 8px;
bottom: 8px;
font-size: 0.8rem;
opacity: 0.5;
transition: all 0.2s ease;
cursor: pointer;
z-index: 10;
color: var(--text-color);
}
.transform-button:hover .auto-copy-icon {
.favorite-icon:hover {
opacity: 1;
transform: scale(1.2);
color: var(--accent-color);
color: #ffd700;
}
.favorite-icon.favorited {
opacity: 1;
color: #ffd700;
}
.favorite-icon.favorited:hover {
transform: scale(1.3);
color: #ffed4e;
}
.favorites-section {
border: 2px dashed #ffd700;
background: rgba(255, 215, 0, 0.05);
}
.favorites-section .category-title {
color: #ffd700;
border-left-color: #ffd700;
}
.favorites-section .transform-buttons .transform-button-group {
width: 100%;
}
/* Output section */