Vote-System/style.css at main · WateryMarker/Vote-System · 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
:root{
  --bg:#0b1727;--card:#101f33;--accent:#22c55e;
  --accent-2:#38bdf8;--muted:#94a3b8;--text:#ffffff;
  --warn:#fbbf24;--danger:#ef4444;
}
*{box-sizing:border-box}
body{
  margin:0;font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", Arial;
  background:
    radial-gradient(1200px 600px at 15% -10%,rgba(34,197,94,.15),transparent 60%),
    radial-gradient(900px 500px at 85% 10%,rgba(56,189,248,.15),transparent 60%),
    linear-gradient(180deg,#0b1727,#0b1727);
  color:var(--text)
}
header{text-align:center;padding:32px 16px;position:relative}
.badge{
  display:inline-flex;gap:8px;align-items:center;background:rgba(56,189,248,.12);
  border:1px solid rgba(56,189,248,.35);padding:6px 12px;border-radius:999px;font-size:13px
}
.title{font-size:clamp(24px,4vw,44px);margin:14px auto 8px;font-weight:800}
.subtitle{color:var(--muted)}
.top-right{position:fixed; top:12px; right:12px; z-index:1000}

.container{max-width:1100px;margin:0 auto;padding:0 16px 80px}
.panel{
  background:rgba(16,31,51,.9);border:1px solid rgba(148,163,184,.18);
  border-radius:20px;padding:18px;margin-bottom:16px
}
.card{
  background:rgba(15,23,42,.8);border:1px solid rgba(148,163,184,.15);
  border-radius:18px;padding:16px;margin-bottom:12px
}

.row{display:flex;gap:10px;align-items:center}
.row.wrap{flex-wrap:wrap}
input,select,button{font:inherit;color:var(--text)}
input,select{
  background:#0f1a2a;border:1px solid rgba(148,163,184,.25);
  border-radius:12px;padding:10px 12px;min-width:160px
}
button{border:none;border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer}

.btn-sky{background:linear-gradient(180deg,#38bdf8,#0ea5e9);color:#062033}
.btn-yellow {background: linear-gradient(180deg, #fbbf24, #f59e0b); color:#2b1a00;}
.btn-orange {background: linear-gradient(180deg, #f97316, #ea580c); color:#2b0a00;}
.btn-blue   {background: linear-gradient(180deg, #38bdf8, #0ea5e9); color:#062033;}
.btn-ghost{background:transparent;border:1px solid rgba(148,163,184,.25)}
.btn-danger{background:linear-gradient(180deg,#ef4444,#dc2626)}

.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.item{
  background:rgba(16,31,51,.9);border:1px solid rgba(148,163,184,.15);
  border-radius:16px;padding:14px;position:relative
}
.num{font-weight:900;font-size:20px;color:#86efac}
.name{color:#dbeafe}
.votes{font-size:28px;font-weight:900;margin:6px 0}
.controls{display:flex;gap:8px;flex-wrap:wrap}
.top1{border:2px solid gold}.top2{border:2px solid silver}.top3{border:2px solid #cd7f32}

.hint{color:var(--muted); font-size:13px; margin-top:8px}

a.btn {
  display:inline-block;
  padding:10px 16px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  transition:all .2s ease;
}
a.btn-sky {
  background:linear-gradient(180deg,#38bdf8,#0ea5e9);
  color:#062033;
}
a.btn-sky:hover { filter:brightness(1.05); }

a.btn-ghost {
  background:transparent;
  border:1px solid rgba(148,163,184,.35);
  color:#e6f3ff;
}
a.btn-ghost:hover { background:rgba(148,163,184,.08); }

/* ปุ่ม staff panel */
.staff-btn{
    position:absolute;
    right:16px;
    top:16px;
    background:linear-gradient(180deg,#38bdf8,#0ea5e9);
    color:#062033;
    font-weight:700;
    padding:8px 16px;
    border-radius:12px;
    border:none;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(0,0,0,.3);
    text-decoration:none;
    font-size:15px; /* ขนาดปกติ desktop */
  }
  .staff-btn:hover{filter:brightness(1.05)}

  /* 📱 ปรับสำหรับมือถือ */
  @media (max-width:640px){
    .staff-btn{
      padding:6px 10px;
      font-size:12px;
      border-radius:8px;
      right:10px;
      top:10px;
    }
  }