29 lines
2.2 KiB
CSS
29 lines
2.2 KiB
CSS
/* Tabs Page Specific Styles */
|
|
.tp-underline { transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
|
|
.tp-underline::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2.5px; border-radius:2px 2px 0 0; background:transparent; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); }
|
|
.tp-underline.active::after { background:#6366f1; }
|
|
.tp-underline:hover::after { background:#a5b4fc; }
|
|
.tp-pill { transition:all 0.25s cubic-bezier(0.4,0,0.2,1); }
|
|
.tp-pill.active { background:#6366f1; color:white; box-shadow:0 2px 8px rgba(99,102,241,0.35); }
|
|
.tp-pill:not(.active):hover { background:#eef2ff; color:#4f46e5; }
|
|
.tp-vertical { transition:all 0.25s cubic-bezier(0.4,0,0.2,1); }
|
|
.tp-vertical.active { background:#eef2ff; color:#4f46e5; }
|
|
.tp-vertical:not(.active):hover { background:#f9fafb; color:#4f46e5; }
|
|
.tp-card { transition:all 0.25s cubic-bezier(0.4,0,0.2,1); }
|
|
.tp-card.active { background:#eef2ff; border-color:#6366f1; }
|
|
.tp-card:not(.active):hover { background:#f9fafb; border-color:#e5e7eb; }
|
|
.tp-content { animation:tpFadeIn 0.25s ease-out; }
|
|
@keyframes tpFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
|
|
.tp-fade { animation:tpAnimFade 0.5s ease-out both; }
|
|
@keyframes tpAnimFade { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
|
|
.tp-delay-1 { animation-delay:0.1s; }
|
|
.tp-delay-2 { animation-delay:0.2s; }
|
|
.tp-delay-3 { animation-delay:0.3s; }
|
|
.tp-delay-4 { animation-delay:0.4s; }
|
|
.tp-delay-5 { animation-delay:0.5s; }
|
|
.tp-skeleton { background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%); background-size:200% 100%; animation:tpShimmer 1.5s infinite; border-radius:6px; }
|
|
.dark .tp-skeleton { background:linear-gradient(90deg,rgba(255,255,255,0.06) 25%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0.06) 75%); background-size:200% 100%; }
|
|
@keyframes tpShimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
|
|
.tp-panel-enter { animation:tpPanelSlideIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards; }
|
|
@keyframes tpPanelSlideIn { from { opacity:0; transform:translateY(12px) scale(0.98); } to { opacity:1; transform:translateY(0) scale(1); } }
|