monorail
/
Archipelago
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adjustments to player-settings.css for better UI on small view-widths. (#2019) 

Also removes "portrait" media query as it forces this display method for large monitors.
This commit is contained in:
Zach Parks 2023-08-12 22:06:28 -05:00 committed by GitHub
parent 7a494d637b
commit 3a4b157363
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
WebHostLib/static/styles/player-settings.css
View File

@ -5,7 +5,8 @@ html{
} }
#player-settings{ #player-settings{
max-width: 1000px; box-sizing: border-box;
max-width: 1024px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, 0.15);
@ -163,6 +164,11 @@ html{
background-color: #ffef00; /* Same as .interactive in globalStyles.css */ background-color: #ffef00; /* Same as .interactive in globalStyles.css */
} }
#player-settings table .randomize-button[data-tooltip]::after {
left: unset;
right: 0;
}
#player-settings table label{ #player-settings table label{
display: block; display: block;
min-width: 200px; min-width: 200px;
@ -177,18 +183,31 @@ html{
vertical-align: top; vertical-align: top;
} }
@media all and (max-width: 1000px), all and (orientation: portrait){ @media all and (max-width: 1024px) {
#player-settings {
border-radius: 0;
}
#player-settings #game-options{ #player-settings #game-options{
justify-content: flex-start; justify-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
} }
#player-settings .left, #player-settings .right{ #player-settings .left,
flex-grow: unset; #player-settings .right {
margin: 0;
}
#game-options table {
margin-bottom: 0;
} }
#game-options table label{ #game-options table label{
display: block; display: block;
min-width: 200px; min-width: 200px;
} }
#game-options table tr td {
width: 50%;
}
} }