Adjust styles

tut-cc · Oct 3, 2024 · 77c2b04 · 77c2b04
1 parent de93666
commit 77c2b04
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 19 deletions.
diff --git a/app/templates/components/order-session.html b/app/templates/components/order-session.html
@@ -13,7 +13,7 @@
               <button
                 hx-delete="/orders/{{ session_id }}/item/{{ uuid }}"
                 hx-target="#order-session"
-                class="font-bold text-red-600 bg-gray-200 px-2 rounded"
+                class="font-bold text-white bg-red-600 px-2 rounded"
               >X</button>
             </div>
           {% endif %}
@@ -22,18 +22,18 @@
     </ul>
   </div>
   {% if placement_status != "" %}
-    <div>{{ placement_status }}</div>
+    <div class="text-center text-2xl">{{ placement_status }}</div>
   {% endif %}
   <div class="flex flex-row p-2 items-center">
-    <div class="basis-1/4 text-right text-xl">{{ order_items | length }} 点</div>
-    <div class="basis-2/4 text-center text-xl">合計: {{ total_price }}</div>
+    <div class="basis-1/4 text-right lg:text-2xl">{{ order_items | length }} 点</div>
+    <div class="basis-2/4 text-center lg:text-2xl">合計: {{ total_price }}</div>
     {% if order_frozen == true %}
-      <button hx-post="/orders" class="basis-1/4 text-xl text-center px-2 rounded bg-gray-300">新規</button>
+      <button hx-post="/orders" class="basis-1/4 lg:text-xl text-center px-2 rounded bg-gray-300">新規</button>
     {% else %}
       <button
         hx-get="/orders/{{ session_id }}/confirm"
         hx-target="#order-confirm"
-        class="basis-1/4 text-xl text-center px-2 py-2 rounded bg-gray-300 disabled:cursor-not-allowed disabled:text-gray-700 disabled:bg-gray-100"
+        class="basis-1/4 lg:text-xl text-center text-white px-2 py-1 rounded bg-blue-600 disabled:cursor-not-allowed disabled:text-gray-700 disabled:bg-gray-100"
         {{ 'disabled' if order_items | length == 0 else '' }}
       >確定</button>
       <div id="order-confirm"></div>

diff --git a/app/templates/orders.html b/app/templates/orders.html
@@ -25,11 +25,10 @@
             <button class="text-center text-sm px-2 rounded bg-gray-300 hidden lg:inline-block" tabindex="0">
               <a href="/" tabindex="-1">ホームに戻る</a>
             </button>
-            <button class="text-xl text-center" tabindex="0">保留</button>
             <button
               hx-delete="/orders/{{ session_id }}"
               hx-target="#order-session"
-              class="text-xl text-center text-red-600 px-2 rounded bg-gray-300 hidden sm:inline-block"
+              class="text-xl text-center text-white px-2 rounded bg-red-600 hidden sm:inline-block"
               tabindex="0"
             >全消去</button>
           </div>

diff --git a/static/styles.css b/static/styles.css
@@ -898,11 +898,6 @@ video {
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
-.bg-gray-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-
 .bg-gray-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
@@ -1088,11 +1083,6 @@ video {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
-.text-red-600 {
-  --tw-text-opacity: 1;
-  color: rgb(220 38 38 / var(--tw-text-opacity));
-}
-
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1227,6 +1217,16 @@ video {
   .lg\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+
+  .lg\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  .lg\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
 }
 
 @media (min-width: 1280px) {