diff --git a/ui/src/components/cards/DashboardCard.less b/ui/src/components/cards/DashboardCard.less index 4e3b0ed..ea0c778 100644 --- a/ui/src/components/cards/DashboardCard.less +++ b/ui/src/components/cards/DashboardCard.less @@ -2,30 +2,29 @@ width: 100%; height: 140px; margin-bottom: 16px; - transition: transform 0.2s, box-shadow 0.2s; + transition: transform 0.2s; background-color: rgba(36, 36, 36, 0.9); backdrop-filter: blur(8px); border: 1px solid var(--semi-color-border); + --pulse-color: rgba(255, 255, 255, 0.1); + position: relative; + z-index: 1; + overflow: visible; - &:hover { - transform: translateY(-4px); - background-color: rgba(36, 36, 36, 1); - - &.blue { - box-shadow: 0 8px 24px -5px var(--semi-color-primary); - } - &.orange { - box-shadow: 0 8px 24px -5px var(--semi-color-warning); - } - &.green { - box-shadow: 0 8px 24px -5px var(--semi-color-success); - } - &.purple { - box-shadow: 0 8px 24px -5px var(--semi-color-info); - } - &.gray { - box-shadow: 0 8px 24px -5px rgba(255, 255, 255, 0.4); - } + &::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: inherit; + box-shadow: 0 4px 25px -2px var(--pulse-color); + opacity: 0; + animation: pulse 5s infinite ease-in-out; + pointer-events: none; + z-index: -1; + will-change: opacity; } &__icon { @@ -46,22 +45,36 @@ } &.blue { - box-shadow: 0 4px 20px -5px var(--semi-color-primary); + --pulse-color: var(--semi-color-primary); + box-shadow: 0 4px 20px -5px var(--pulse-color); } &.orange { - box-shadow: 0 4px 20px -5px var(--semi-color-warning); + --pulse-color: var(--semi-color-warning); + box-shadow: 0 4px 20px -5px var(--pulse-color); } &.green { - box-shadow: 0 4px 20px -5px var(--semi-color-success); + --pulse-color: var(--semi-color-success); + box-shadow: 0 4px 20px -5px var(--pulse-color); } &.purple { - box-shadow: 0 4px 20px -5px var(--semi-color-info); + --pulse-color: var(--semi-color-info); + box-shadow: 0 4px 20px -5px var(--pulse-color); } &.gray { - box-shadow: 0 4px 20px -5px rgba(255, 255, 255, 0.2); + --pulse-color: rgba(255, 255, 255, 0.2); + box-shadow: 0 4px 20px -5px var(--pulse-color); + } +} + +@keyframes pulse { + 0%, 100% { + opacity: 0.1; + } + 50% { + opacity: 0.5; } } \ No newline at end of file