Repository navigation
Expand file tree
/
Copy pathstyle.css
More file actions
40 lines (29 loc) · 2.75 KB
/
Copy pathstyle.css
File metadata and controls
40 lines (29 loc) · 2.75 KB
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
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #0d1117, #161b22, #21262d); padding: 1rem; }
.container { width: 100%; max-width: 420px; }
.search-box { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
#usernameInput { flex: 1; padding: 0.85rem 1rem; border: 2px solid #30363d; border-radius: 12px; background: #161b22; color: #e6edf3; font-size: 0.95rem; font-family: inherit; transition: border-color 0.25s ease; }
#usernameInput:focus { outline: none; border-color: #58a6ff; }
#searchBtn { padding: 0.85rem 1.5rem; border: none; border-radius: 12px; background: #238636; color: #fff; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.25s ease; }
#searchBtn:hover { background: #2ea043; transform: translateY(-1px); }
#searchBtn i { margin-right: 0.25rem; }
.card { background: #161b22; border: 1px solid #30363d; border-radius: 20px; overflow: hidden; animation: slideUp 0.5s ease; }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.card-header { height: 100px; background: linear-gradient(135deg, #58a6ff, #bc8cff, #f778ba); }
.card-body { padding: 1.5rem; }
.card-body .avatar { width: 90px; height: 90px; border-radius: 50%; border: 4px solid #161b22; margin-top: -45px; overflow: hidden; display: inline-block; }
.card-body .avatar img { width: 100%; height: 100%; object-fit: cover; }
.card-body h2 { font-size: 1.3rem; color: #e6edf3; margin-top: 0.5rem; }
.card-body .login { color: #7d8590; font-size: 0.9rem; margin-bottom: 0.75rem; }
.card-body .bio { color: #c9d1d9; font-size: 0.85rem; line-height: 1.5; margin-bottom: 1rem; }
.card-stats { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.card-stats .stat { flex: 1; background: #21262d; border-radius: 10px; padding: 0.75rem; text-align: center; }
.card-stats .stat-value { font-size: 1.1rem; font-weight: 800; color: #e6edf3; }
.card-stats .stat-label { font-size: 0.7rem; color: #7d8590; margin-top: 2px; }
.card-info { font-size: 0.85rem; color: #7d8590; margin-bottom: 1rem; }
.card-info p { margin-bottom: 0.35rem; display: flex; align-items: center; gap: 0.5rem; }
.card-info p i { width: 16px; }
.card-link { display: block; text-align: center; padding: 0.75rem; border-radius: 12px; background: #238636; color: #fff; text-decoration: none; font-weight: 700; font-size: 0.9rem; transition: all 0.25s ease; }
.card-link:hover { background: #2ea043; transform: translateY(-2px); }
.error { text-align: center; color: #f85149; font-weight: 600; padding: 1rem; }
@media (max-width: 400px) { .card-stats { flex-direction: column; gap: 0.35rem; } }