diff options
Diffstat (limited to 'public')
-rw-r--r-- | public/common/columbia.css | 19 | ||||
-rw-r--r-- | public/common/play.css | 66 |
2 files changed, 45 insertions, 40 deletions
diff --git a/public/common/columbia.css b/public/common/columbia.css index 78bb61c..eba9b5b 100644 --- a/public/common/columbia.css +++ b/public/common/columbia.css @@ -3,8 +3,8 @@ #battle { position: absolute; min-width: 450px; - left: 10px; - top: 55px; + left: 12px; + top: 56px; z-index: 50; box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5); background-color: white; @@ -40,13 +40,8 @@ display: flex; flex-wrap: wrap; justify-content: center; - padding: 15px; - gap: 5px -} - -#FR, #ER { - padding: 10px 15px; - min-height: 10px; + padding: 12px; + gap: 4px } #FR .battle_menu_list, #ER .battle_menu_list { @@ -65,7 +60,7 @@ display: none; width: 20px; height: 20px; - border-radius: 5px; + border-radius: 4px; padding: 3px; } @@ -73,7 +68,7 @@ display: flex; flex-wrap: wrap; justify-content: center; - margin-top: 5px; + margin-top: 4px; min-height: 26px; } @@ -95,7 +90,7 @@ /* MOBILE PHONE LAYOUT */ -@media (max-width: 500px) { +@media (max-width: 640px) { #battle { position: static; grid-column: 1; diff --git a/public/common/play.css b/public/common/play.css index c19ea6c..661d0f7 100644 --- a/public/common/play.css +++ b/public/common/play.css @@ -77,7 +77,7 @@ header { align-items: center; border-bottom: 1px solid black; background-color: gainsboro; - padding-right: 10px; + padding-right: 8px; } #toolbar { @@ -106,7 +106,7 @@ aside { display: grid; overflow: clip; grid-template-rows: auto minmax(0, 1fr); - width: 210px; + width: 212px; border-left: 1px solid black; } @@ -144,6 +144,7 @@ aside { footer { position: fixed; + pointer-events: none; z-index: 500; bottom: 0; background-color: white; @@ -161,8 +162,8 @@ footer { } .menu_title img { display: block; - height: 35px; - padding: 5px; + height: 36px; + padding: 4px; } .menu:hover .menu_title { background-color: black; @@ -174,7 +175,7 @@ footer { .menu_popup { display: none; position: absolute; - min-width: 20ex; + min-width: 160px; white-space: nowrap; border: 1px solid black; background-color: white; @@ -187,7 +188,7 @@ footer { border-top: 1px solid black; } .menu_item { - padding: 5px 10px; + padding: 4px 8px; } .menu_item:hover { background-color: black; @@ -204,8 +205,8 @@ footer { } .icon_button img { display: block; - height: 35px; - padding: 5px; + height: 36px; + padding: 4px; } .icon_button:hover { background-color: black; @@ -219,17 +220,17 @@ header #actions { display: flex; flex-wrap: wrap; justify-content: end; - gap: 10px; - padding-left: 10px; - margin: 5px 0; + gap: 8px; + padding-left: 8px; + margin: 4px 0; } header .replay { display: flex; flex-wrap: wrap; justify-content: end; - padding-left: 10px; - margin: 5px 0; + padding-left: 8px; + margin: 4px 0; } header .replay button { @@ -255,8 +256,8 @@ header .replay button { border-bottom: 1px solid black; padding-top: 3px; padding-bottom: 3px; - padding-left: 5px; - padding-right: 5px; + padding-left: 4px; + padding-right: 4px; } .role_user { @@ -301,13 +302,13 @@ header .replay button { #chat_window { position: absolute; - left: 10px; - top: 55px; - width: 40rem; + left: 12px; + top: 56px; + width: 640px; z-index: 500; border: 1px solid black; background-color: white; - box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5); + box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.5); visibility: hidden; } @@ -320,7 +321,7 @@ header .replay button { cursor: move; background-color: gainsboro; border-bottom: 1px solid black; - padding: 5px 10px; + padding: 4px 8px; } #chat_x { @@ -328,7 +329,7 @@ header .replay button { cursor: pointer; float: right; padding: 0px 2px; - margin: 5px 5px; + margin: 4px 4px; } #chat_x:hover { @@ -340,7 +341,7 @@ header .replay button { font-size: 16px; line-height: 24px; height: 216px; - padding: 0px 5px; + padding: 0px 4px; overflow-y: scroll; } @@ -360,13 +361,13 @@ header .replay button { width: 100%; outline: none; border: none; - padding: 5px; - font-size: 1rem; + padding: 4px; + font-size: 16px; } /* MOBILE PHONE LAYOUT */ -@media (max-width: 500px) { +@media (max-width: 640px) { body { width: 100%; height: auto; @@ -375,9 +376,18 @@ header .replay button { overflow-x: clip; overflow-y: auto; } - footer { width: 100%; background-color: rgba(255,255,255,0.5) } - header { display: block; } - #prompt { padding-left: 10px; display: block; white-space: normal; } + footer { + width: 100%; + background-color: rgba(255,255,255,0.9); + } + header { + display: block; + } + #prompt { + padding-left: 8px; + display: block; + white-space: normal; + } #chat_window { position: static; |