first commit
This commit is contained in:
+188
@@ -0,0 +1,188 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* فونتِ دانا — همان فونتِ اپلیکیشن. basePath=/panel پس مسیرِ public با /panel آغاز میشود. */
|
||||
@font-face {
|
||||
font-family: "Dana";
|
||||
src: url("/panel/fonts/dana_regular.ttf") format("truetype");
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Dana";
|
||||
src: url("/panel/fonts/dana_medium.ttf") format("truetype");
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Dana";
|
||||
src: url("/panel/fonts/dana_bold.ttf") format("truetype");
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg: #0e2347;
|
||||
--bg-dark: #081428;
|
||||
--panel: #17345c;
|
||||
--panel-2: #0c2848;
|
||||
--gold: #e9b949;
|
||||
--gold-dark: #b8860b;
|
||||
--line: #1e5fa8;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
background: var(--bg-dark);
|
||||
color: #e8eef7;
|
||||
font-family: "Dana", -apple-system, "Segoe UI", Tahoma, sans-serif;
|
||||
}
|
||||
|
||||
/* اسکرولبار تیره */
|
||||
::-webkit-scrollbar {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #1e3a63;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: linear-gradient(160deg, var(--panel), var(--panel-2));
|
||||
border: 1px solid #1e3a63;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.btn {
|
||||
border-radius: 10px;
|
||||
padding: 8px 14px;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: filter 0.15s;
|
||||
}
|
||||
.btn:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
.btn-gold {
|
||||
background: linear-gradient(180deg, var(--gold), var(--gold-dark));
|
||||
color: #04101f;
|
||||
}
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
border: 1px solid var(--line);
|
||||
color: #cfe0f5;
|
||||
}
|
||||
.btn-danger {
|
||||
background: #7f1d1d;
|
||||
color: #fecaca;
|
||||
}
|
||||
.inp {
|
||||
background: #0b1c39;
|
||||
border: 1px solid #1e3a63;
|
||||
border-radius: 8px;
|
||||
padding: 7px 10px;
|
||||
font-size: 13px;
|
||||
color: #e8eef7;
|
||||
width: 100%;
|
||||
}
|
||||
.inp:focus {
|
||||
outline: none;
|
||||
border-color: var(--gold);
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding: 8px 10px;
|
||||
text-align: right;
|
||||
border-bottom: 1px solid #16305a;
|
||||
white-space: nowrap;
|
||||
}
|
||||
th {
|
||||
color: #8ab4e8;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* نشانکها — تنهای وضعیت/نوع */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 1.6;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.badge::before {
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
flex: none;
|
||||
}
|
||||
.badge-gold { background: rgba(233, 185, 73, 0.14); color: #e9b949; }
|
||||
.badge-blue { background: rgba(97, 165, 255, 0.14); color: #7bb3ff; }
|
||||
.badge-purple{ background: rgba(168, 130, 255, 0.14); color: #bda6ff; }
|
||||
.badge-green { background: rgba(74, 222, 128, 0.12); color: #6ee7a0; }
|
||||
.badge-red { background: rgba(248, 113, 113, 0.12); color: #fca5a5; }
|
||||
.badge-gray { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; }
|
||||
|
||||
/* اسکلتِ لودینگ */
|
||||
.skeleton {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #163a63;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.skeleton::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: translateX(-100%);
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
|
||||
animation: shimmer 1.4s infinite;
|
||||
}
|
||||
@keyframes shimmer {
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
/* حلقهی فوکوسِ طلایی برای دسترسیپذیری */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--gold);
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* نوار ابزارِ فیلترها — در موبایل جستجو تمامعرض میشود */
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
.toolbar .inp,
|
||||
.toolbar select {
|
||||
width: auto;
|
||||
min-width: 130px;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
.toolbar .inp,
|
||||
.toolbar select,
|
||||
.toolbar button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user