InfoCards.C4FibqtJ.css 2.3 KB

1
  1. .custom-line[data-v-0ecc4fa9]{height:1px;background-color:#ccc;width:100%;margin:10px 0}.info-title[data-v-0ecc4fa9]{font-size:20px;font-weight:600;margin-bottom:18px;color:#2c3e50;position:relative}.info-title[data-v-0ecc4fa9]:after{content:"";position:absolute;bottom:-8px;left:0;width:50px;height:3px;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:2px}.info-cards[data-v-0ecc4fa9]{background:#fff;height:330px;border-radius:20px;padding:20px}.card-grid[data-v-0ecc4fa9]{padding:30px;display:flex;flex-wrap:wrap;gap:15px}.card[data-v-0ecc4fa9]{width:calc(20% - 12px);align-items:center;text-align:center;padding:10px;cursor:pointer;border:none!important}.card-icon[data-v-0ecc4fa9]{width:40px;height:40px;margin-bottom:8px}.card-value[data-v-0ecc4fa9]{font-size:20px;font-weight:700;color:#67c23a}.card-label[data-v-0ecc4fa9]{font-size:14px;color:#666;margin-top:4px}.stats-grid[data-v-0ecc4fa9]{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px;height:200px;align-content:start}.stat-card[data-v-0ecc4fa9]{background:#fff;border-radius:10px;padding:16px;display:flex;align-items:center;box-shadow:0 4px 12px #00000014;transition:all .3s ease;cursor:pointer;transform:translateY(15px);position:relative;overflow:hidden}.stat-card[data-v-0ecc4fa9]:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--card-color);transition:width .3s ease}.stat-card[data-v-0ecc4fa9]:hover:before{width:100%;opacity:.1}.stat-card[data-v-0ecc4fa9]:hover{box-shadow:0 15px 35px #00000026}.stat-card.blue[data-v-0ecc4fa9]{--card-color: #3498db}.stat-card.red[data-v-0ecc4fa9]{--card-color: #e74c3c}.stat-card.green[data-v-0ecc4fa9]{--card-color: #2ecc71}.stat-card.yellow[data-v-0ecc4fa9]{--card-color: #f39c12}.stat-card.gray[data-v-0ecc4fa9]{--card-color: #95a5a6}.stat-card.purple[data-v-0ecc4fa9]{--card-color: #9b59b6}.stat-card.teal[data-v-0ecc4fa9]{--card-color: #1abc9c}.stat-icon[data-v-0ecc4fa9]{width:42px;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:12px;color:#fff}.stat-content[data-v-0ecc4fa9]{display:flex;flex-direction:column}.stat-number[data-v-0ecc4fa9]{font-size:20px;font-weight:700;color:#2c3e50;line-height:1}.stat-label[data-v-0ecc4fa9]{font-size:12px;color:#7f8c8d;margin-top:5px}