visual-design/theme-chalk/v-gradient-card.css

A Component Library for Vue 3

@charset "UTF-8";.vi-gradient-card{position:relative;width:200px;height:100px;border-radius:10px}.vi-gradient-card .default{--bg:linear-gradient(180deg, rgba(52, 101, 117, 0.1) 0%, #1a283b 100%);--border:linear-gradient(270deg, #455364, #aec9e9, #455364);border:1px solid transparent;background-image:var(--bg),var(--border);background-origin:border-box;background-clip:content-box,border-box;box-shadow:0 0 12px rgba(0,0,0,.12)}.vi-gradient-card .a{background:#aec9e9;z-index:1}.vi-gradient-card .a::after{content:"";position:absolute;z-index:-1;width:calc(100% - 2px);height:calc(100% - 2px);left:50%;top:50%;border-radius:10px;transform:translate(-50%,-50%)}.vi-gradient-card .mask{--border-radius:10px;--border-width:1px;--border-color:linear-gradient(
    270deg,
    rgba(69, 83, 100, 1),
    rgba(126, 145, 169, 1),
    rgba(69, 83, 100, 1)
  );position:relative;color:#fff;border-radius:var(--border-radius);background:rgba(38,70,93,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.vi-gradient-card .semicircle{border-radius:10px;box-shadow:4px 2px 4px 0 rgba(0,0,0,.2);overflow:hidden}.vi-gradient-card .clip-path{border:4px solid;-o-border-image:linear-gradient(270deg,#18f77f,#17ffff) 1 1;border-image:linear-gradient(270deg,#18f77f,#17ffff) 1 1;-webkit-clip-path:inset(0 round 10px);clip-path:inset(0 round 10px)}.vi-gradient-card .ground-glass{box-shadow:0 0 12px rgba(0,0,0,.12);background:rgba(255,255,255,.25);box-shadow:0 8px 32px 0 rgba(31,38,135,.37);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:10px;border:1px solid rgba(255,255,255,.18)}.vi-gradient-card .conic-gradient{display:grid;font-weight:600;--conic-gradient-color1:#ff2770;--conic-gradient-color2:#45f3ff}.vi-gradient-card .conic-gradient::before{content:"";position:absolute;width:100%;height:100%;background:repeating-conic-gradient(from var(--a),var(--conic-gradient-color1) 0,var(--conic-gradient-color1) 5%,transparent 0,transparent 40%,var(--conic-gradient-color1) 50%);animation:animateAngle 4s linear infinite;border-radius:inherit;z-index:-1}.vi-gradient-card .conic-gradient::after{content:"";position:absolute;inset:4px;background:#7e91a9;border-radius:10px;border:8px solid #455364;z-index:-1}@property --a{inherits:false;initial-value:0deg}100%{--a:360deg}