Task7.1P/index.css at main · MohamedWasim2004/Task7.1P · 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
:root{
  --blue:#307BFF;
  --blue-600:#2563eb;
  --border:#d9e1f2;
  --text:#1f2937;
  --muted:#6b7280;
  --card-bg:#ffffff;
  --bg:#f8fafc;
}

*{ box-sizing:border-box; }
html,body,#root{ height:100%; }
body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

/* Top nav */
.nav{
  position:sticky; top:0; z-index:10;
  height:56px; display:flex; align-items:center; gap:16px;
  padding:0 20px;
  background:#fff; border-bottom:1px solid #eef2ff;
}
.brand{
  font-weight:700; letter-spacing:.4px;
  background:#111827; color:#fff; padding:6px 10px; border-radius:4px;
}
.search{ flex:1; display:flex; align-items:center; }
.search input{
  width:100%; height:34px; border:1px solid var(--border);
  border-radius:4px; padding:0 10px; outline:none;
}
.navlinks{ display:flex; gap:14px; }
.navlinks a{
  text-decoration:none; color:#374151; padding:6px 10px; border-radius:4px;
}
.navlinks a.active, .navlinks a:hover{ background:#eef2ff; }

/* Page layout */
.center{
  max-width:980px; margin:48px auto; padding:0 20px;
  display:flex; gap:36px; align-items:flex-start; justify-content:center;
  flex-wrap:wrap;
}

/* Auth cards */
.card{
  width:440px; max-width:100%;
  background:var(--card-bg);
  border:1.5px solid #BFD1FF;  /* light blue like mock */
  border-radius:10px; padding:28px 28px 24px;
  box-shadow:0 1px 0 rgba(17,24,39,.02);
}

.card h2{
  text-align:center; color:var(--blue); font-weight:600; margin:0 0 18px;
}

.field{ margin-bottom:14px; }
.label{
  display:block; font-size:14px; color:#374151; margin:0 0 6px;
}
.input{
  width:100%; height:36px; border:1px solid var(--border);
  border-radius:4px; padding:0 10px; outline:none; background:#fff;
}
.input:focus{ border-color:#b1c5ff; box-shadow:0 0 0 3px rgba(48,123,255,.15); }

.btn{
  width:100%; height:40px; border:none; border-radius:6px;
  background:var(--blue); color:#fff; font-weight:600; cursor:pointer;
}
.btn:hover{ background:var(--blue-600); }

.helper{
  margin-top:10px; font-size:14px; color:var(--muted);
}
.helper a{ color:var(--blue); text-decoration:none; }

.error{
  margin:8px 0 0; color:#d11; font-size:14px;
}

/* Tiny link button like “Sign up” chip in mock */
.linkchip{
  display:inline-block; border:1px solid #BFD1FF; color:var(--blue);
  background:#fff; padding:4px 8px; border-radius:6px; font-size:14px; text-decoration:none;
}
.linkchip:hover{ background:#eef5ff; }
/* STATUS PAGE */
.status-wrap{ max-width:980px; margin:32px auto; padding:0 20px; }
.status-wrap h1{
  text-align:center; color:#2563eb; font-weight:600; margin:0 0 22px;
}
.status-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px; margin-bottom:18px;
}
.status-card{
  display:flex; align-items:center; gap:14px; padding:18px;
  border:1.5px solid #BFD1FF; border-radius:10px; background:#fff;
}
.status-card.ok{ box-shadow:0 0 0 3px rgba(34,197,94,.12) inset; }
.status-card.bad{ box-shadow:0 0 0 3px rgba(239,68,68,.12) inset; }
.status-card .badge{ font-size:28px; }
.status-card .title{ font-weight:600; }
.status-card .state{ color:#10b981; }
.status-card.bad .state{ color:#ef4444; }

.status-actions{ display:flex; gap:10px; justify-content:center; margin:14px 0 22px; }
.btn{
  height:40px; padding:0 16px; border:none; border-radius:6px; cursor:pointer;
  background:#307BFF; color:#fff; font-weight:600;
}
.btn.secondary{ background:#111827; color:#fff; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

.status-instructions{
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:18px;
}
.status-instructions h3{ margin:0 0 8px; }
.status-instructions ol{ margin:0; padding-left:22px; }
.status-instructions a{ color:#2563eb; text-decoration:none; }