신규 추가 작업 중

app/assets/stylesheets/application.tailwind.css

@@ -9,14 +9,18 @@
     --color-warning: rgb(255, 202, 40);
     --color-accept: rgb(121, 134, 203);
     --color-danger: rgb(239, 83, 80);
-    --color-table-border: rgb(130, 144, 158);
+    --color-table-border: rgb(181, 188, 199);
+    --color-table-background: rgb(226, 228, 234);
 
     /* theme */
     --color-logo-color: rgb(21, 128, 120);
-    --color-base-background: rgb(39, 44, 56);
-    --color-base-secondary: rgb(55, 61, 71);
-    --color-base-text: rgb(255, 255, 255);
-    --color-base-border: rgb(77, 84, 102);
+    --color-base-primary: rgb(44, 137, 255);
+    --color-base-background: rgb(242, 244, 248);
+    --color-base-sidebar: rgb(235, 238, 244);
+    --color-base-content: rgb(253, 253, 253);
+    --color-base-third: rgb(201, 208, 210);
+    --color-base-text: rgb(39, 41, 49);
+    --color-base-border: rgb(223, 226, 234);
 
     --base-font-size: 0.85rem;
     --text-xs: calc(var(--base-font-size) * 0.75);
@@ -53,7 +57,7 @@
     }
 
     hr {
-        @apply border-table-border
+        @apply border-base-border
     }
 
     .background-pattern {
@@ -89,7 +93,7 @@
     }
 
     .select-style {
-        @apply block w-full px-2 py-1.5 border border-default-slate/50 rounded-xs text-base-background appearance-none
+        @apply block w-full px-2 py-1.5 border border-default-slate/50 rounded-xs appearance-none
     }
 
     .select-style option {
@@ -109,7 +113,7 @@
         @apply w-14 h-8 bg-danger rounded-full peer-checked:bg-notice transition-all duration-300
     }
 
-    .toggle_btn {
+    .btn-toggle-round {
         @apply absolute left-1 top-1 w-6 h-6 bg-white rounded-full transition-all duration-300 peer-checked:translate-x-full shadow-sm
     }
 }
@@ -121,11 +125,11 @@
 
     .side-bar {
         /*@apply w-[16rem] pl-4 text-lg font-bold divide-y divide-base-border;*/
-        @apply w-[16rem] pl-4 pr-4 lg:pr-0 text-lg font-bold;
+        @apply w-[16rem] p-4 text-lg font-bold;
     }
 
     .content {
-        @apply lg:rounded-lg bg-base-secondary;
+        @apply lg:rounded-lg bg-base-content p-0 lg:p-4
     }
 
     .page-title {
@@ -148,21 +152,25 @@
         @apply inline-flex items-center rounded-xs px-2.5 py-1.5 text-sm font-semibold hover:opacity-75 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-white
     }
 
+    .btn-toggle-text {
+        @apply bg-logo-color rounded-lg text-white text-center
+    }
+
     /*Menu*/
     .menu-group {
-        @apply flex flex-row py-2 px-4 my-4 gap-x-4 justify-between items-center w-full
+        @apply flex flex-row py-1 px-4 my-2 gap-x-4 justify-between items-center w-full
     }
 
     .menu-group-active {
-        @apply bg-base-secondary text-white rounded-md;
+        @apply bg-base-primary rounded-full text-base-content;
     }
 
-    .menu-group:hover {
-        @apply bg-base-secondary text-white transition-colors rounded-md;
-    }
+    /*.menu-group:hover {*/
+    /*    @apply bg-base-primary/30 transition-colors rounded-full;*/
+    /*}*/
 
     .menu-group-icon {
-        @apply py-1 text-sm font-medium justify-center
+        @apply flex py-1 justify-center items-center
     }
 
     .menu-group-name {
@@ -179,7 +187,7 @@
 
     /*Dashboard*/
     .dashboard-group {
-        @apply rounded-md bg-base-background h-32 p-4 flex flex-col justify-between cursor-pointer
+        @apply rounded-md bg-base-background min-h-32 p-4 flex flex-col justify-between cursor-pointer
     }
 
     /*Pagy*/
@@ -217,15 +225,31 @@
 
     /*Base Table*/
     .base-table {
-        @apply min-w-full whitespace-nowrap border border-table-border
+        @apply min-w-full whitespace-nowrap
     }
 
     .base-table th {
-        @apply bg-base-background px-2 py-2 text-left font-bold lg:table-cell
+        @apply px-2 py-3 text-left font-bold lg:table-cell
+    }
+
+    .base-table tr {
+        @apply divide-x divide-base-border
     }
 
     .base-table td {
-        @apply border-t border-table-border px-2 py-1 lg:table-cell whitespace-nowrap
+        @apply border-t border-base-border px-2 py-1 lg:table-cell whitespace-nowrap
+    }
+
+    /*Base List*/
+    .base-list {
+        @apply overflow-y-auto divide-y divide-base-border lg:border lg:border-base-border lg:rounded-lg
+    }
+    .base-list ul {
+        @apply divide-y divide-base-border lg:rounded-b-lg
+    }
+
+    .base-list li{
+        @apply flex justify-between items-center px-4 py-2 space-x-4
     }
 }
 
@@ -272,9 +296,8 @@
 
 /*Fonts*/
 @font-face {
-    font-family: 'GongGothicMedium';
-    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff');
-    font-weight: normal;
+    font-family: "Chakra_Petch", sans-serif;
+    font-weight: 300;
     font-style: normal;
 }