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

1
src/components/Game.css
View file

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

2
src/components/Question.css
View file

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