feat: chip stagger animation, IB green color theme
This commit is contained in:
+53
-1
@@ -48,6 +48,52 @@
|
||||
box-shadow: 0 8px 18px rgba(24, 124, 72, .35);
|
||||
}
|
||||
|
||||
/* IB colour overrides */
|
||||
body.scope-ib .chip.active {
|
||||
background: linear-gradient(140deg, #1a7a47, #27a362);
|
||||
box-shadow: 0 6px 16px rgba(27,122,71,.28);
|
||||
}
|
||||
body.scope-ib .tag {
|
||||
background: linear-gradient(135deg, #edfaf3, #d8f5e7);
|
||||
color: #165c35;
|
||||
border-color: #b3e8cc;
|
||||
}
|
||||
body.scope-ib .tag:hover,
|
||||
body.scope-ib a.tag:hover {
|
||||
background: linear-gradient(135deg, #d6f5e5, #c0edda);
|
||||
box-shadow: 0 4px 8px rgba(22,92,53,.12);
|
||||
}
|
||||
body.scope-ib .count-badge {
|
||||
color: #1d8d54;
|
||||
background: #e2f7ed;
|
||||
border-color: #b8e8cc;
|
||||
}
|
||||
body.scope-ib .row-card::before {
|
||||
background: linear-gradient(90deg, #27a362 0%, #7dd9a8 60%, transparent 100%);
|
||||
}
|
||||
body.scope-ib .active-filter {
|
||||
border-color: #b8e8cc;
|
||||
background: linear-gradient(145deg, #f2fbf6, #e2f7ed);
|
||||
color: #165c35;
|
||||
}
|
||||
body.scope-ib .active-filter .remove {
|
||||
background: #c8edda;
|
||||
color: #1a6b40;
|
||||
}
|
||||
body.scope-ib .active-filter .remove:hover { background: #a8e0c0; }
|
||||
body.scope-ib .card h2::before {
|
||||
background: linear-gradient(180deg, #27a362, #1a7a47);
|
||||
}
|
||||
body.scope-ib .vtt-link.mont,
|
||||
body.scope-ib .vib-link.mont {
|
||||
background: linear-gradient(135deg, #1a7a47, #27a362);
|
||||
}
|
||||
body.scope-ib .vib-logo-text { color: #27a362; }
|
||||
body.scope-ib .vendor-info-bar {
|
||||
background: linear-gradient(135deg, #edfaf3 0%, #d8f5e7 100%);
|
||||
border-color: #b3e8cc;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: min(1400px, calc(100% - 32px));
|
||||
margin: 18px auto 28px;
|
||||
@@ -267,6 +313,11 @@
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
@keyframes chipIn {
|
||||
from { opacity: 0; transform: translateY(6px) scale(.96); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
|
||||
.chip {
|
||||
border: 1px solid #ccdbf7;
|
||||
border-radius: 999px;
|
||||
@@ -276,7 +327,8 @@
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: .18s ease;
|
||||
transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s ease;
|
||||
animation: chipIn .22s ease both;
|
||||
}
|
||||
|
||||
.chip:hover {
|
||||
|
||||
Reference in New Issue
Block a user