Update

2026-05-01 15:08:59 +07:00
parent d1bc825fbe
commit d6d88a5b0e
284 changed files with 6784 additions and 540 deletions
--- a/Assets/UI/Global.uss
+++ b/Assets/UI/Global.uss
@@ -6,13 +6,14 @@
 :root {
    --primary-color: #ffffff;
    --accent-color: #00ffcc;
-    --color-surface: rgba(10, 10, 10, 0.85);
+    --color-surface: rgba(10, 10, 10, 0.95);
+    --color-surface-opaque: #0a0a0a;
    --color-text-primary: #ffffff;
    --color-text-secondary: #aaaaaa;
    --color-text-accent: #00ffcc;
    --radius-md: 12px;
+    --radius-lg: 24px;
    --radius-pill: 999px;
-    --space-4: 16px;
 }

 /* ============================================================
@@ -24,7 +25,6 @@
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    color: #ffffff;
-    /* Fallback to TTF if SDF fails */
    -unity-font: url("../Fonts/BitcountSingleInk-VariableFont_CRSV,ELSH,ELXP,SZP1,SZP2,XPN1,XPN2,YPN1,YPN2,slnt,wght.ttf");
    -unity-font-definition: url("../Fonts/BitcountSingleInk-VariableFont_CRSV,ELSH,ELXP,SZP1,SZP2,XPN1,XPN2,YPN1,YPN2,slnt,wght SDF.asset");
 }
@@ -77,7 +77,6 @@
    padding-right: 12px;
 }

-/* Ẩn background của thanh cuộn */
 .unity-scroller {
    background-color: transparent;
    width: 6px;
@@ -88,25 +87,21 @@
    border-width: 0;
 }

-/* Thanh dragger mặc định: Rất mỏng và mờ */
 .unity-base-slider__dragger {
    background-color: rgba(0, 255, 204, 0.3);
    border-radius: 3px;
    width: 3px;
    left: 1.5px;
    border-width: 0;
-    transition-property: width, background-color, left;
-    transition-duration: 0.2s;
+    transition: 200ms;
 }

-/* Khi di chuột vào vùng scroller: Phình to ra */
 .unity-scroller:hover .unity-base-slider__dragger {
    background-color: rgba(0, 255, 204, 0.8);
    width: 6px;
    left: 0;
 }

-/* Ẩn các nút mũi tên lên xuống của scrollbar cho đẹp */
 .unity-scroller__low-button, .unity-scroller__high-button {
    display: none;
 }
@@ -123,24 +118,20 @@
    font-size: 16px;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
-    /* Transition mượt cho mọi thuộc tính */
-    transition-property: scale, background-color, translate;
-    transition-duration: 0.15s;
-    transition-timing-function: ease-out-back;
+    transition: 150ms;
    align-items: center;
    justify-content: center;
 }

 .button-spring:hover {
-    scale: 1.05;
+    scale: 1.05 1.05;
    background-color: rgba(255, 255, 255, 0.2);
 }

-/* Hiệu ứng nảy lò xo khi nhấn */
 .button-spring:active {
-    scale: 0.92;
+    scale: 0.92 0.92;
    background-color: rgba(255, 255, 255, 0.3);
-    transition-duration: 0.05s;
+    transition-duration: 50ms;
 }

 .btn-settings { background-color: #7B6EE8; }
@@ -150,22 +141,82 @@
 .btn-exit     { background-color: #666666; }

 /* ============================================================
-   UTILITY
+   DROPDOWN & FIELDS (THE BIG FIX)
+   ============================================================ */
+.unity-dropdown-field {
+    margin-bottom: 12px;
+}
+
+.unity-dropdown-field__label {
+    width: 35%;
+    color: #aaaaaa;
+    font-size: 14px;
+    -unity-font-style: bold;
+}
+
+.unity-dropdown-field__input {
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: 10px;
+    border-width: 1px;
+    border-color: rgba(255, 255, 255, 0.1);
+    padding: 10px 15px;
+    flex-grow: 1;
+    color: #00ffcc;
+    transition: 200ms;
+}
+
+.unity-dropdown-field__input:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: #00ffcc;
+}
+
+/* NHẮM VÀO CÁI MENU XỔ XUỐNG (POPUP) */
+/* Cần selector cực kỳ mạnh để đè style mặc định của Unity */
+.unity-base-dropdown {
+    background-color: #0a0a0a !important;
+    border-width: 2px !important;
+    border-color: #00ffcc !important;
+    border-radius: 12px !important;
+    margin-top: 10px !important;
+}
+
+/* Đè phân cấp nội bộ của Popup */
+.unity-base-dropdown__container-inner {
+    background-color: #0a0a0a !important;
+    border-width: 0 !important;
+}
+
+.unity-base-dropdown__item {
+    padding: 12px 15px !important;
+    background-color: transparent !important;
+    color: #eeeeee !important;
+}
+
+/* Đè hiệu ứng hover mặc định */
+.unity-base-dropdown__item:hover {
+    background-color: rgba(0, 255, 204, 0.15) !important;
+    color: #00ffcc !important;
+}
+
+/* Item được chọn */
+.unity-base-dropdown__item--selected {
+    background-color: rgba(0, 255, 204, 0.1) !important;
+    color: #00ffcc !important;
+    -unity-font-style: bold;
+}
+
+.unity-base-dropdown__checkmark {
+    -unity-background-image-tint-color: #00ffcc !important;
+}
+
+/* ============================================================
+   PANELS
   ============================================================ */
 .panel-glass {
    background-color: var(--color-surface);
    border-radius: 20px;
-    border-width: 2px;
-    border-color: rgba(255, 255, 255, 0.15);
-}
-
-.panel-glass--right {
-    width: 40%;
-    height: 100%;
-    border-top-left-radius: 20px;
-    border-bottom-left-radius: 20px;
-    border-left-width: 3px;
-    border-left-color: #00ffcc;
+    border-width: 1px;
+    border-color: rgba(255, 255, 255, 0.1);
 }

 .input-field {
@@ -184,8 +235,6 @@
    border-width: 0;
 }

-.radius-pill { border-radius: 999px; }
-
 .ribbon {
    flex-direction: row;
    height: 120px;
@@ -203,38 +252,35 @@
    translate: 0 -50%;
 }

-.bg-dark-50 { background-color: rgba(0, 0, 0, 0.5); }
-.border-default { border-color: rgba(255, 255, 255, 0.15); }
 .border-accent { border-color: #00ffcc; }
-.text-color-accent { color: #00ffcc; }

 /* ============================================================
   SETTINGS & REBINDING
   ============================================================ */
 .sidebar-tab {
-    height: 50px;
+    height: 54px;
    background-color: transparent;
    border-width: 0;
-    color: #aaaaaa;
+    color: #888888;
    -unity-font-style: bold;
    font-size: 16px;
    border-left-width: 4px;
    border-left-color: transparent;
-    padding-left: 20px;
+    padding-left: 24px;
    border-radius: 0;
-    margin: 5px 0;
+    margin: 2px 0;
    -unity-text-align: middle-left;
 }

 .sidebar-tab:hover {
    color: #ffffff;
-    background-color: rgba(255, 255, 255, 0.05);
+    background-color: rgba(255, 255, 255, 0.03);
 }

 .active-tab {
    color: #00ffcc;
    border-left-color: #00ffcc;
-    background-color: rgba(0, 255, 204, 0.1);
+    background-color: rgba(0, 255, 204, 0.08);
 }

 .rebind-row {
@@ -242,40 +288,41 @@
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
-    background-color: rgba(255, 255, 255, 0.03);
-    border-radius: 8px;
-    margin-bottom: 4px;
+    background-color: rgba(255, 255, 255, 0.02);
+    border-radius: 10px;
+    margin-bottom: 6px;
 }

 .rebind-label {
    font-size: 14px;
-    color: #dddddd;
+    color: #cccccc;
 }

 .rebind-button {
-    width: 120px;
-    height: 32px;
-    background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 6px;
+    width: 140px;
+    height: 36px;
+    background-color: rgba(255, 255, 255, 0.08);
+    border-radius: 8px;
    border-width: 1px;
-    border-color: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.1);
    color: #00ffcc;
-    font-size: 12px;
+    font-size: 13px;
    -unity-font-style: bold;
 }

 .rebind-button:hover {
-    background-color: rgba(255, 255, 255, 0.2);
+    background-color: rgba(255, 255, 255, 0.15);
+    border-color: #00ffcc;
 }

 .setting-section-header {
    margin-top: 24px;
-    margin-bottom: 8px;
-    font-size: 12px;
-    color: #888888;
+    margin-bottom: 12px;
+    font-size: 13px;
+    color: #666666;
    -unity-font-style: bold;
    border-bottom-width: 1px;
-    border-bottom-color: rgba(255, 255, 255, 0.1);
-    padding-bottom: 4px;
+    border-bottom-color: rgba(255, 255, 255, 0.05);
+    padding-bottom: 6px;
+    letter-spacing: 1px;
 }
-
--- a/Assets/UI/MainPanelSettings.asset
+++ b/Assets/UI/MainPanelSettings.asset
@@ -21,7 +21,7 @@ MonoBehaviour:
  m_ScaleMode: 1
  m_ReferenceSpritePixelsPerUnit: 100
  m_PixelsPerUnit: 100
-  m_Scale: 1.6899998
+  m_Scale: 1
  m_ReferenceDpi: 96
  m_FallbackDpi: 96
  m_ReferenceResolution: {x: 1200, y: 800}
--- a/Assets/UI/Settings.uxml
+++ b/Assets/UI/Settings.uxml
@@ -1,9 +1,9 @@
 <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    <Style src="project:/Assets/UI/Global.uss" />
-    <ui:VisualElement name="SettingsRoot" class="screen-root" picking-mode="Position" style="background-color: rgba(0, 0, 0, 0.7); justify-content: flex-start;">
-        <ui:VisualElement name="Sidebar" picking-mode="Position" class="panel-glass border-accent" style="width: 500px; height: 100%; flex-direction: row; padding: 0; border-radius: 0; border-right-width: 2px;">
+    <ui:VisualElement name="SettingsRoot" class="screen-root" picking-mode="Position" style="background-color: rgba(0, 0, 0, 0.7); justify-content: flex-start; align-items: stretch;">
+        <ui:VisualElement name="Sidebar" picking-mode="Position" class="panel-glass border-accent" style="min-width: 500px; width: 40%; height: 100%; flex-direction: row; padding: 0; border-radius: 0 30px 30px 0; overflow: hidden; border-right-width: 3px; border-left-width: 0; border-top-width: 0; border-bottom-width: 0;">
            <!-- Tabs -->
-            <ui:VisualElement name="TabsColumn" style="width: 35%; background-color: rgba(0, 0, 0, 0.3); padding-top: 60px;">
+            <ui:VisualElement name="TabsColumn" style="width: 180px; background-color: rgba(0, 0, 0, 0.4); padding-top: 60px; flex-shrink: 0; border-right-width: 1px; border-right-color: rgba(255, 255, 255, 0.05);">
                <ui:Button name="GeneralTab" text="GENERAL" class="sidebar-tab active-tab" />
                <ui:Button name="VideoTab" text="VIDEO" class="sidebar-tab" />
                <ui:Button name="SoundTab" text="SOUND" class="sidebar-tab" />
@@ -14,7 +14,7 @@
            </ui:VisualElement>

            <!-- Details -->
-            <ui:VisualElement name="DetailsColumn" style="width: 65%; padding: 40px;">
+            <ui:VisualElement name="DetailsColumn" style="flex-grow: 1; padding: 40px; min-width: 320px; width: auto;">
                <ui:Label name="TabTitle" text="GENERAL" class="text-heading" />
                <ui:ScrollView name="SettingsContent" class="scroll-list" style="flex-grow: 1;">
                    <!-- Content will be injected here -->