cinnabarflower/sto-k-odnomu
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui fixes

Browse source
This commit is contained in:
Dmitry 2025-12-31 21:05:29 +03:00
parent ae52913209
commit be00cc009d
3 changed files with 17 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/App.css
View file

@ -25,9 +25,10 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
margin-bottom: clamp(5px, 1vh, 15px); margin-bottom: clamp(3px, 0.5vh, 8px);
flex-shrink: 0; flex-shrink: 0;
gap: clamp(10px, 2vw, 20px); gap: clamp(8px, 1.5vw, 15px);
padding: clamp(3px, 0.5vh, 5px) 0;
} }
.app-control-buttons { .app-control-buttons {
@ -37,8 +38,8 @@
} }
.control-button { .control-button {
width: clamp(35px, 5vw, 45px); width: clamp(30px, 4vw, 40px);
height: clamp(35px, 5vw, 45px); height: clamp(30px, 4vw, 40px);
border-radius: 50%; border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.3); border: 2px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
@ -47,7 +48,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: clamp(1.2rem, 2.5vw, 1.5rem); font-size: clamp(1rem, 2vw, 1.3rem);
transition: all 0.3s ease; transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
padding: 0; padding: 0;
@ -81,7 +82,7 @@
.app-title { .app-title {
text-align: center; text-align: center;
font-size: clamp(2rem, 5vw, 4rem); font-size: clamp(1.5rem, 4vw, 3rem);
font-weight: bold; font-weight: bold;
text-shadow: text-shadow:
0 0 10px rgba(255, 215, 0, 0.8), 0 0 10px rgba(255, 215, 0, 0.8),
@ -90,6 +91,7 @@
animation: glow 2s ease-in-out infinite alternate; animation: glow 2s ease-in-out infinite alternate;
flex: 1; flex: 1;
margin: 0; margin: 0;
line-height: 1.2;
} }
@keyframes glow { @keyframes glow {
@ -115,7 +117,7 @@
.title-to { .title-to {
color: #ff6b6b; color: #ff6b6b;
font-size: clamp(1.5rem, 3.5vw, 3rem); font-size: clamp(1.2rem, 3vw, 2.5rem);
} }
.question-counter-wrapper { .question-counter-wrapper {
@ -129,10 +131,10 @@
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 2px solid rgba(255, 215, 0, 0.3); border: 2px solid rgba(255, 215, 0, 0.3);
border-radius: 20px; border-radius: 15px;
padding: clamp(5px, 1vh, 8px) clamp(12px, 2vw, 18px); padding: clamp(4px, 0.8vh, 6px) clamp(10px, 1.5vw, 15px);
color: #ffd700; color: #ffd700;
font-size: clamp(0.9rem, 2vw, 1.2rem); font-size: clamp(0.8rem, 1.8vw, 1rem);
font-weight: bold; font-weight: bold;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
@ -142,9 +144,9 @@
background: rgba(255, 107, 107, 0.2); background: rgba(255, 107, 107, 0.2);
color: #ff6b6b; color: #ff6b6b;
border: 2px solid rgba(255, 107, 107, 0.5); border: 2px solid rgba(255, 107, 107, 0.5);
border-radius: 15px; border-radius: 12px;
padding: clamp(5px, 1vh, 8px) clamp(12px, 2vw, 18px); padding: clamp(4px, 0.8vh, 6px) clamp(10px, 1.5vw, 15px);
font-size: clamp(0.8rem, 1.5vw, 1rem); font-size: clamp(0.75rem, 1.3vw, 0.9rem);
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;

1
src/components/Game.css
View file

@ -11,6 +11,7 @@
} }
.game-header { .game-header {
margin-top: clamp(5px, 1vh, 10px);
margin-bottom: clamp(5px, 1vh, 15px); margin-bottom: clamp(5px, 1vh, 15px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;

2
src/components/Question.css
View file

@ -120,7 +120,7 @@
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr);
gap: clamp(10px, 2vw, 20px); gap: clamp(6px, 1.2vw, 12px);
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow: hidden; overflow: hidden;