lixen/chess
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.8.1 web ui responsive style improved

Browse Source
This commit is contained in:
Lixen Wraith
2025-11-19 08:43:12 -05:00
parent ef60cfaac5
commit 0a85cc88bb
2 changed files with 35 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
internal/server/webserver/chess-client-web/style.css
View File

@ -73,13 +73,13 @@ body {
main {
display: grid;
grid-template-columns: 1fr 340px;
gap: 2rem;
grid-template-columns: 1fr clamp(280px, 17.71vw, 340px);
gap: clamp(1rem, 2vw, 2rem);
flex: 1;
min-height: 0;
overflow: hidden;
height: 100%;
max-width: 980px;
max-width: clamp(800px, 51vw, 980px);
margin: 0 auto;
align-items: center;
}
@ -88,7 +88,7 @@ main {
display: flex;
align-items: center;
justify-content: center;
min-width: 440px;
min-width: clamp(360px, 22.92vw, 440px);
overflow: visible;
height: 100%;
}
@ -97,16 +97,16 @@ main {
display: flex;
align-items: center;
justify-content: center;
width: 440px;
height: 440px;
padding: 20px;
width: clamp(360px, 22.92vw, 440px);
height: clamp(360px, 22.92vw, 440px);
padding: clamp(16px, 1.04vw, 20px);
position: relative;
}
.board-wrapper {
position: relative;
width: 400px;
height: 400px;
width: clamp(328px, 20.83vw, 400px);
height: clamp(328px, 20.83vw, 400px);
margin: 0;
}
@ -269,13 +269,13 @@ main {
.info-panel {
background: var(--host-bg);
border-radius: 8px;
padding: 1rem;
padding: clamp(0.75rem, 0.83vw, 1rem);
display: flex;
flex-direction: column;
gap: 1rem;
gap: clamp(0.75rem, 0.83vw, 1rem);
overflow: hidden;
width: 340px;
height: 440px;
width: clamp(280px, 17.71vw, 340px);
height: clamp(360px, 22.92vw, 440px);
align-self: center;
}
@ -651,9 +651,9 @@ input[type="range"]::-webkit-slider-thumb {
}
.board-container {
width: 440px;
height: 440px;
padding: 20px;
width: clamp(360px, 45vw, 440px);
height: clamp(360px, 45vw, 440px);
padding: clamp(16px, 2.04vw, 20px);
display: flex;
align-items: center;
justify-content: center;
@ -662,8 +662,8 @@ input[type="range"]::-webkit-slider-thumb {
}
.board-wrapper {
width: 400px;
height: 400px;
width: clamp(328px, 41vw, 400px);
height: clamp(328px, 41vw, 400px);
position: relative;
margin: 0;
}
@ -689,13 +689,13 @@ input[type="range"]::-webkit-slider-thumb {
}
.info-panel {
width: 440px;
height: 200px;
width: clamp(360px, 45vw, 440px);
height: clamp(180px, 20.4vw, 200px);
display: grid;
grid-template-columns: 180px 1fr;
grid-template-columns: clamp(150px, 18.4vw, 180px) 1fr;
grid-template-rows: min-content min-content 1fr;
gap: 0.5rem 1rem;
padding: 1rem;
padding: clamp(0.75rem, 1.02vw, 1rem);
align-self: center;
overflow: hidden;
flex-shrink: 0;
@ -763,12 +763,12 @@ input[type="range"]::-webkit-slider-thumb {
body {
overflow-y: auto;
overflow-x: auto;
min-width: 530px;
min-width: clamp(440px, 100vw, 530px);
}
.outer-container {
width: 530px;
min-width: 530px;
width: clamp(440px, 100vw, 530px);
min-width: clamp(440px, 100vw, 530px);
padding: 8px;
min-height: 100vh;
height: auto;
@ -779,8 +779,8 @@ input[type="range"]::-webkit-slider-thumb {
}
.container {
width: 514px;
min-width: 514px;
width: calc(100% - 16px);
min-width: clamp(424px, calc(100vw - 16px), 514px);
border-radius: 12px;
min-height: calc(100vh - 16px);
height: auto;
@ -794,7 +794,7 @@ input[type="range"]::-webkit-slider-thumb {
.board-container,
.info-panel {
width: 440px;
min-width: 440px;
width: clamp(360px, 83vw, 440px);
min-width: clamp(360px, 83vw, 440px);
}
}