EasyWa/style.css at main · Fahad-BA/EasyWa · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');

:root{
  --bg:#0b1020;
  --fg:#e5e7eb;
  --muted:#94a3b8;
  --card:#111631;
  --accent:#22c55e;
  --border:#1f2937;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  height:100%;
  background:var(--bg);
  color:var(--fg);
  font-family:"Cairo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Arabic",Arial;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:grid;
  place-items:center; /* يوسّط كل شيء عمودي وأفقي */
}

/* الحاوية الرئيسية */
#app{
  width:100%;
  max-width:460px;
  padding:1rem;
}

/* الكارد */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1.25rem;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
}

/* العناوين */
h1,h2,h3{
  margin-bottom:1rem;
  font-weight:700;
  text-align:center;
}

/* اللابل والمدخلات */
.label{display:block;margin:.3rem 0 .4rem;font-weight:600}
.input,.btn{
  width:100%;
  padding:.9rem;
  border-radius:.75rem;
  border:1px solid #334155;
  background:#0b1020;
  color:var(--fg);
  transition:border-color .15s ease, box-shadow .15s ease, transform .02s ease;
}
.input{margin-bottom:.7rem}
.input:focus{
  outline:0;
  border-color:var(--accent);
  box-shadow:0 0 0 .2rem color-mix(in oklab, var(--accent) 25%, transparent);
}

/* الأزرار */
.btn{
  cursor:pointer;
  background:var(--accent);
  color:#0b1020;
  border:0;
  font-weight:700;
  letter-spacing:.2px;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{
  outline:0;
  box-shadow:0 0 0 .2rem color-mix(in oklab, var(--accent) 35%, transparent);
}

/* نصوص مساعدة */
.hint{display:block;margin:.15rem 0 .7rem;color:var(--muted);font-size:.9rem;text-align:center}
.muted{opacity:.75;text-align:center}