pico-pixel-player

← Back to log@ 6824e9f

improve layout on very small screens

AuthorKonata <konata@posteo.jp>
Date
Commit6824e9fbb76c51bdb03b455fba14eff901237f5f
Parentfa9937a
2 files changed, 12 insertions(+), 8 deletions(-)
▾Mwebclient/src/components/Dialog.css
+2-4@ 6824e9f@ master
@@ -1,12 +1,10 @@
dialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: auto;
border: none;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
width: 800px;
max-width: 90vw;
max-width: max(90vw, var(--min-width));
padding: 0;
::backdrop {
background-color: rgba(0, 0, 0, 0.5);
▾Mwebclient/src/style.css
+10-4@ 6824e9f@ master
@@ -26,6 +26,7 @@ select {
--color-c-highlight: oklch(from var(--color-c) 0.45 c h);
--color-d: oklch(0.67 0.1326 259.65);
--text-color: oklch(0.87 0 0);
--min-width: 350px;
}
button,
@@ -63,15 +64,21 @@ button:has(> svg) {
}
html {
min-width: 350px;
min-width: var(--min-width);
min-height: 600px;
background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='100' height='82' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23404e4fff'/><path d='M74.4-14.6l-24 41.1h48l-24-41.1zm0 82l-24 41.1h48l-24-41.1z' stroke-width='1' stroke='none' fill='%23a37c5cff'/><path d='M0 0l24 41.1L48 0H0zm-1.6 26.5l-24 41.1h48l-24-41.1zm100 0l-24 41.1h48l-24-41.1z' stroke-width='1' stroke='none' fill='%232c373aff'/><path d='M24 41.1l24 41.1 24-41.1H24z' stroke-width='1' stroke='none' fill='%23726f69ff'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}
html,
body,
#root,
.app-container {
height: 100%;
}
.app-container {
display: flex;
flex-direction: column;
height: 100vh;
max-width: 1200px;
margin: 0 auto;
background-color: var(--color-a);
@@ -109,9 +116,8 @@ html {
flex-grow: 1;
}
input {
background: none;
border: 1px solid var(--color-c);
padding: 0.25rem;
}
}