style(home): polish pill and filter hover effects across workspaces, filter menu, rule chips, and options

This commit is contained in:
2026-08-18 13:45:16 -05:00
parent 8c3926e6c7
commit 5dbdf1edde
+67 -12
View File
@@ -228,17 +228,26 @@ input[type="search"]::-webkit-search-results-decoration,
box-shadow: none; box-shadow: none;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
transition: background-color .15s cubic-bezier(0.4,0,0.2,1), border-color .15s cubic-bezier(0.4,0,0.2,1); transition: background-color .15s cubic-bezier(0.4,0,0.2,1), border-color .15s cubic-bezier(0.4,0,0.2,1), color .15s ease, box-shadow .15s ease;
} }
.application-body .workspace-pills > a:hover { .application-body .workspace-pills > a:hover {
background: #fff; background: #f1f4fe;
border-color: #ececec; border-color: #dbe4ff;
color: #050841;
box-shadow: 0 1px 3px rgba(61, 93, 246, 0.08);
} }
.application-body .workspace-pills > a.active { .application-body .workspace-pills > a.active {
background: #DBE4FF; background: #DBE4FF;
border-color: #DBE4FF; border-color: #DBE4FF;
color: #111a49;
}
.application-body .workspace-pills > a.active:hover {
background: #cbd8ff;
border-color: #cbd8ff;
color: #050841;
} }
.application-body .workspace-pills > a small { .application-body .workspace-pills > a small {
@@ -246,6 +255,11 @@ input[type="search"]::-webkit-search-results-decoration,
color: #a5a9c1; color: #a5a9c1;
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
transition: color .15s ease;
}
.application-body .workspace-pills > a:hover small {
color: #8b93a7;
} }
.application-body .workspace-pills > a .workspace-pill-icon { .application-body .workspace-pills > a .workspace-pill-icon {
@@ -321,18 +335,26 @@ input[type="search"]::-webkit-search-results-decoration,
font-weight: 300; font-weight: 300;
cursor: pointer; cursor: pointer;
list-style: none; list-style: none;
transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease; transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease, border-color 0.15s ease;
} }
.application-body .workspace-filter-btn:hover { .application-body .workspace-filter-btn:hover {
background: rgba(5, 8, 65, 0.04); background: #f1f4fe;
border-color: #dbe4ff;
color: #3d5df6;
} }
.application-body .workspace-filter-btn.active { .application-body .workspace-filter-btn.active {
background: #edf2ff; background: #edf2ff;
color: #3d5df6; color: #3d5df6;
border-color: #dbe4ff; border-color: #dbe4ff;
font-weight: 400; font-weight: 500;
}
.application-body .workspace-filter-btn.active:hover {
background: #dbe4ff;
border-color: #c4d4ff;
color: #2b4cd6;
} }
.application-body .workspace-filter-menu-popover { .application-body .workspace-filter-menu-popover {
@@ -381,11 +403,16 @@ input[type="search"]::-webkit-search-results-decoration,
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
cursor: pointer; cursor: pointer;
transition: background-color 0.12s ease; transition: background-color 0.12s ease, color 0.12s ease;
} }
.application-body .filter-menu-item:hover { .application-body .filter-menu-item:hover {
background: #f8faff; background: #f1f4fe;
color: #3d5df6;
}
.application-body .filter-menu-item:hover .filter-item-plus {
color: #3d5df6;
} }
.application-body .filter-menu-item.active { .application-body .filter-menu-item.active {
@@ -418,6 +445,7 @@ input[type="search"]::-webkit-search-results-decoration,
width: 18px; width: 18px;
height: 18px; height: 18px;
color: #a5a9c1; color: #a5a9c1;
transition: color 0.12s ease;
} }
.application-body .filter-item-plus svg { .application-body .filter-item-plus svg {
@@ -440,6 +468,12 @@ input[type="search"]::-webkit-search-results-decoration,
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
padding: 4px 0; padding: 4px 0;
transition: color 0.15s ease;
}
.application-body .filter-clear-all-btn:hover:not(:disabled) {
color: #1e3bb8;
text-decoration: underline;
} }
.application-body .filter-clear-all-btn:disabled { .application-body .filter-clear-all-btn:disabled {
@@ -483,8 +517,14 @@ input[type="search"]::-webkit-search-results-decoration,
transition: all 0.15s ease; transition: all 0.15s ease;
} }
.application-body .filter-rule-chip:hover {
border-color: #2b4cd6;
box-shadow: 0 2px 6px rgba(61, 93, 246, 0.12);
}
.application-body .filter-rule-chip.open { .application-body .filter-rule-chip.open {
background: #edf2ff; background: #edf2ff;
border-color: #3d5df6;
box-shadow: 0 0 0 2px rgba(61, 93, 246, 0.18); box-shadow: 0 0 0 2px rgba(61, 93, 246, 0.18);
} }
@@ -501,6 +541,15 @@ input[type="search"]::-webkit-search-results-decoration,
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: background-color 0.12s ease;
}
.application-body .filter-rule-chip-main:hover {
background: #f4f7fe;
}
.application-body .filter-rule-chip.open .filter-rule-chip-main:hover {
background: #e2ebff;
} }
.application-body .filter-chip-icon { .application-body .filter-chip-icon {
@@ -545,11 +594,16 @@ input[type="search"]::-webkit-search-results-decoration,
background: transparent; background: transparent;
color: #3d5df6; color: #3d5df6;
cursor: pointer; cursor: pointer;
transition: background-color 0.12s ease; transition: background-color 0.12s ease, color 0.12s ease;
} }
.application-body .filter-rule-chip-close:hover { .application-body .filter-rule-chip-close:hover {
background: rgba(61, 93, 246, 0.08); background: #edf2ff;
color: #1e3bb8;
}
.application-body .filter-rule-chip.open .filter-rule-chip-close:hover {
background: #dbe4ff;
} }
.application-body .filter-rule-chip-close svg { .application-body .filter-rule-chip-close svg {
@@ -621,11 +675,12 @@ input[type="search"]::-webkit-search-results-decoration,
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
cursor: pointer; cursor: pointer;
transition: background-color 0.12s ease; transition: background-color 0.12s ease, color 0.12s ease;
} }
.application-body .filter-chip-option-label:hover { .application-body .filter-chip-option-label:hover {
background: #f8faff; background: #f1f4fe;
color: #3d5df6;
} }
.application-body .filter-chip-option-label input[type="checkbox"] { .application-body .filter-chip-option-label input[type="checkbox"] {