Skip to content

Commit 7671e22

Browse files
kkuramitsukkuramitsu
committed
adding style.css
1 parent 693721f commit 7671e22

File tree

1 file changed

+220
-0
lines changed

1 file changed

+220
-0
lines changed

‎atcoder/2025/style.css‎

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
/* フォント設定 */
2+
* {
3+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
4+
}
5+
6+
/* グラデーション背景 */
7+
.bg-gradient {
8+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
9+
min-height: 100vh;
10+
}
11+
12+
/* モダンカードデザイン */
13+
.modern-card {
14+
border: none;
15+
border-radius: 16px;
16+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
17+
backdrop-filter: blur(10px);
18+
background: rgba(255, 255, 255, 0.95);
19+
transition: transform 0.3s ease, box-shadow 0.3s ease;
20+
}
21+
22+
.modern-card:hover {
23+
transform: translateY(-4px);
24+
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
25+
}
26+
27+
/* 統計カード */
28+
.stat-card {
29+
border-left: 4px solid transparent;
30+
transition: all 0.3s ease;
31+
}
32+
33+
.stat-card:nth-child(1) { border-left-color: #ffc107; }
34+
.stat-card:nth-child(2) { border-left-color: #17a2b8; }
35+
.stat-card:nth-child(3) { border-left-color: #28a745; }
36+
.stat-card:nth-child(4) { border-left-color: #dc3545; }
37+
38+
/* モダンボタン */
39+
.modern-btn {
40+
border-radius: 12px;
41+
font-weight: 600;
42+
padding: 12px 24px;
43+
box-shadow: 0 4px 16px rgba(0, 123, 255, 0.3);
44+
transition: all 0.3s ease;
45+
}
46+
47+
.modern-btn:hover {
48+
transform: translateY(-2px);
49+
box-shadow: 0 8px 24px rgba(0, 123, 255, 0.4);
50+
}
51+
52+
/* モダンインプット */
53+
.modern-input {
54+
border-radius: 12px;
55+
border: 2px solid #e9ecef;
56+
padding: 12px 16px;
57+
transition: all 0.3s ease;
58+
}
59+
60+
.modern-input:focus {
61+
border-color: #007bff;
62+
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
63+
}
64+
65+
/* モダンテーブル */
66+
.modern-table {
67+
border-radius: 0 0 16px 16px;
68+
}
69+
70+
.modern-table td {
71+
padding: 16px;
72+
vertical-align: middle;
73+
border-color: rgba(0, 0, 0, 0.05);
74+
}
75+
76+
.modern-table tbody tr:hover {
77+
background-color: rgba(0, 123, 255, 0.05);
78+
transition: background-color 0.2s ease;
79+
}
80+
81+
/* ラベルデザイン */
82+
span.label-ac {
83+
display: inline-block;
84+
padding: 6px 12px;
85+
font-size: 12px;
86+
font-weight: 600;
87+
color: #fff;
88+
text-align: center;
89+
white-space: nowrap;
90+
border-radius: 20px;
91+
background: linear-gradient(45deg, #28a745, #20c997);
92+
box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
93+
margin: 2px;
94+
transition: all 0.3s ease;
95+
}
96+
97+
span.label-ac:hover {
98+
transform: scale(1.05);
99+
box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
100+
}
101+
102+
span.label-bonus-ac {
103+
display: inline-block;
104+
padding: 6px 12px;
105+
font-size: 12px;
106+
font-weight: 600;
107+
color: #fff;
108+
text-align: center;
109+
white-space: nowrap;
110+
border-radius: 20px;
111+
background: linear-gradient(45deg, #155724, #28a745);
112+
box-shadow: 0 2px 8px rgba(21, 87, 36, 0.4);
113+
margin: 2px;
114+
transition: all 0.3s ease;
115+
}
116+
117+
span.label-wa {
118+
display: inline-block;
119+
padding: 6px 12px;
120+
font-size: 12px;
121+
font-weight: 600;
122+
color: #fff;
123+
text-align: center;
124+
white-space: nowrap;
125+
border-radius: 20px;
126+
background: linear-gradient(45deg, #dc3545, #e74c3c);
127+
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
128+
margin: 2px;
129+
transition: all 0.3s ease;
130+
}
131+
132+
span.label-black {
133+
display: inline-block;
134+
padding: 6px 12px;
135+
font-size: 12px;
136+
font-weight: 600;
137+
color: #fff;
138+
text-align: center;
139+
white-space: nowrap;
140+
border-radius: 20px;
141+
background: linear-gradient(45deg, #000000, #333333);
142+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
143+
margin: 2px;
144+
transition: all 0.3s ease;
145+
}
146+
147+
span.label-non {
148+
display: inline-block;
149+
padding: 6px 12px;
150+
font-size: 12px;
151+
font-weight: 600;
152+
color: #6c757d;
153+
text-align: center;
154+
white-space: nowrap;
155+
border-radius: 20px;
156+
background: linear-gradient(45deg, #e9ecef, #f8f9fa);
157+
box-shadow: 0 2px 8px rgba(233, 236, 239, 0.3);
158+
margin: 2px;
159+
}
160+
161+
span.label-blank {
162+
display: inline-block;
163+
padding: 6px 12px;
164+
font-size: 12px;
165+
font-weight: 600;
166+
color: #adb5bd;
167+
text-align: center;
168+
white-space: nowrap;
169+
border-radius: 20px;
170+
background: #fff;
171+
border: 1px solid #dee2e6;
172+
margin: 2px;
173+
}
174+
175+
/* アニメーション */
176+
@keyframes fadeInUp {
177+
from {
178+
opacity: 0;
179+
transform: translateY(30px);
180+
}
181+
to {
182+
opacity: 1;
183+
transform: translateY(0);
184+
}
185+
}
186+
187+
.modern-card {
188+
animation: fadeInUp 0.6s ease-out;
189+
}
190+
191+
/* レスポンシブデザイン */
192+
@media (max-width: 768px) {
193+
.modern-card {
194+
margin-bottom: 16px;
195+
}
196+
197+
.modern-table td {
198+
padding: 12px 8px;
199+
font-size: 14px;
200+
}
201+
}
202+
203+
/* スクロールバーカスタマイズ */
204+
::-webkit-scrollbar {
205+
width: 8px;
206+
}
207+
208+
::-webkit-scrollbar-track {
209+
background: #f1f1f1;
210+
border-radius: 10px;
211+
}
212+
213+
::-webkit-scrollbar-thumb {
214+
background: linear-gradient(45deg, #667eea, #764ba2);
215+
border-radius: 10px;
216+
}
217+
218+
::-webkit-scrollbar-thumb:hover {
219+
background: linear-gradient(45deg, #5a6fd8, #6a4190);
220+
}

0 commit comments

Comments
 (0)