UPdate

Assets/UI/Global.uss

@@ -1,7 +1,7 @@
 /* Global Styles for Hallucinate UI */
 
 /* ============================================================
-   DESIGN TOKENS
+   DESIGN TOKENS & UNITY THEME OVERRIDES
    ============================================================ */
 :root {
     --primary-color: #ffffff;
@@ -14,6 +14,12 @@
     --radius-md: 12px;
     --radius-lg: 24px;
     --radius-pill: 999px;
+
+    /* ÉP UNITY DÙNG MÀU CỦA GAME CHO CÁC THÀNH PHẦN NỘI BỘ (DROPDOWN POPUP) */
+    --unity-colors-surface-background: #0a0a0a;
+    --unity-colors-surface-border: #00ffcc;
+    --unity-colors-surface-text: #ffffff;
+    --unity-colors-highlight-background: rgba(0, 255, 204, 0.2);
 }
 
 /* ============================================================
@@ -143,18 +149,19 @@
 /* ============================================================
    DROPDOWN & FIELDS (THE BIG FIX)
    ============================================================ */
-.unity-dropdown-field {
+DropdownField, .unity-dropdown-field {
     margin-bottom: 12px;
+    transition: 200ms;
 }
 
-.unity-dropdown-field__label {
+DropdownField .unity-dropdown-field__label {
     width: 35%;
     color: #aaaaaa;
     font-size: 14px;
     -unity-font-style: bold;
 }
 
-.unity-dropdown-field__input {
+DropdownField .unity-base-field__input {
     background-color: rgba(255, 255, 255, 0.05);
     border-radius: 10px;
     border-width: 1px;
@@ -165,50 +172,150 @@
     transition: 200ms;
 }
 
-.unity-dropdown-field__input:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+DropdownField:hover .unity-base-field__input {
+    background-color: rgba(255, 255, 255, 0.08);
     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 */
+/* Cần selector cực kỳ mạnh và ghi đè toàn bộ phân cấp */
+
+/* Container chính của Popup - Lớp phủ toàn màn hình */
 .unity-base-dropdown {
+    background-color: rgba(0, 0, 0, 0) !important; /* Phải để trong suốt để không tràn màn hình */
+    border-width: 0 !important;
+}
+
+/* Phần nền nội bộ của cái menu box thực tế */
+.unity-base-dropdown__container-inner {
     background-color: #0a0a0a !important;
     border-width: 2px !important;
     border-color: #00ffcc !important;
     border-radius: 12px !important;
     margin-top: 10px !important;
+    padding: 5px !important;
 }
 
-/* Đè phân cấp nội bộ của Popup */
-.unity-base-dropdown__container-inner {
-    background-color: #0a0a0a !important;
-    border-width: 0 !important;
-}
-
+/* Từng dòng Item */
 .unity-base-dropdown__item {
     padding: 12px 15px !important;
     background-color: transparent !important;
     color: #eeeeee !important;
 }
 
+/* Chữ trong Item */
+.unity-base-dropdown__label {
+    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;
 }
 
+.unity-base-dropdown__item:hover .unity-base-dropdown__label {
+    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;
 }
 
+/* ============================================================
+   SMART SIDEBAR (OSU STYLE OVERLAY)
+   ============================================================ */
+.sidebar-tabs-container {
+    background-color: rgba(5, 5, 5, 0.95);
+    padding-top: 60px;
+    flex-shrink: 0;
+    border-right-width: 1px;
+    border-right-color: rgba(0, 255, 204, 0.1);
+    transition: width 0.3s ease-out-quad;
+    overflow: hidden;
+    height: 100%;
+}
+
+.sidebar-collapsed {
+    width: 80px;
+}
+
+.sidebar-expanded {
+    width: 240px;
+    position: absolute;
+    z-index: 100;
+    border-right-color: #00ffcc;
+    border-right-width: 2px;
+}
+
+.sidebar-tab {
+    height: 60px;
+    background-color: transparent;
+    border-width: 0;
+    padding: 0;
+    flex-direction: row;
+    align-items: center;
+    border-left-width: 4px;
+    border-left-color: transparent;
+    margin: 2px 0;
+}
+
+.tab-icon-box {
+    width: 80px;
+    height: 60px;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.tab-icon {
+    width: 32px;
+    height: 32px;
+    background-color: #ffffff; /* Placeholder color */
+    -unity-background-image-tint-color: #ffffff;
+}
+
+.active-tab .tab-icon {
+    -unity-background-image-tint-color: #00ffcc;
+    background-color: #00ffcc;
+}
+
+.tab-label {
+    font-size: 16px;
+    -unity-font-style: bold;
+    color: #888888;
+    margin-left: 10px;
+    white-space: nowrap;
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.sidebar-expanded .tab-label {
+    opacity: 1;
+    color: #ffffff;
+}
+
+/* ICON-ONLY BACK BUTTON */
+.btn-icon-only {
+    width: 44px;
+    height: 44px;
+    border-radius: 22px;
+    padding: 0;
+    justify-content: center;
+    align-items: center;
+}
+
+.btn-icon-only .tab-icon {
+    width: 24px;
+    height: 24px;
+}
+
 /* ============================================================
    PANELS
    ============================================================ */