Update player.html
Browse files- player.html +12 -1
player.html
CHANGED
|
@@ -67,6 +67,17 @@
|
|
| 67 |
.spinner { width: 40px; height: 40px; border: 4px solid #f0f0f0; border-top-color: #f97316; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 15px; }
|
| 68 |
@keyframes spin { to { transform: rotate(360deg); } }
|
| 69 |
.empty-state { text-align: center; padding: 40px; background: white; border-radius: 12px; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 70 |
</style>
|
| 71 |
</head>
|
| 72 |
<body>
|
|
@@ -255,4 +266,4 @@
|
|
| 255 |
loadPlayer();
|
| 256 |
</script>
|
| 257 |
</body>
|
| 258 |
-
</html>
|
|
|
|
| 67 |
.spinner { width: 40px; height: 40px; border: 4px solid #f0f0f0; border-top-color: #f97316; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 15px; }
|
| 68 |
@keyframes spin { to { transform: rotate(360deg); } }
|
| 69 |
.empty-state { text-align: center; padding: 40px; background: white; border-radius: 12px; }
|
| 70 |
+
|
| 71 |
+
@media (max-width: 600px) {
|
| 72 |
+
.period-stats { gap: 5px; }
|
| 73 |
+
.period-stat { padding: 8px 4px; }
|
| 74 |
+
.period-label { font-size: 10px; }
|
| 75 |
+
.period-mentions { font-size: 16px; }
|
| 76 |
+
.period-mentions-label { font-size: 8px; }
|
| 77 |
+
.period-rank { font-size: 9px; }
|
| 78 |
+
.player-name { font-size: 24px; }
|
| 79 |
+
.player-header { padding: 15px; }
|
| 80 |
+
}
|
| 81 |
</style>
|
| 82 |
</head>
|
| 83 |
<body>
|
|
|
|
| 266 |
loadPlayer();
|
| 267 |
</script>
|
| 268 |
</body>
|
| 269 |
+
</html>
|