summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--public/common/columbia.css19
-rw-r--r--public/common/play.css66
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;