scove/BABA_YAGA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
scove
2026-05-01 16:51:08 +07:00
parent fe01a55dcb
commit 88dec45d4c
4 changed files with 175 additions and 472 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
Assets/UI/Global.uss
View File

@@ -67,7 +67,6 @@
font-size: 18px;
color: #eeeeee;
-unity-font-style: normal;
/* Giúp chữ mượt hơn */
-unity-text-outline-width: 0.1px;
-unity-text-outline-color: rgba(255, 255, 255, 0.1);
}
@@ -136,8 +135,6 @@
.button-spring:active {
scale: 0.92 0.92;
background-color: rgba(255, 255, 255, 0.3);
transition-duration: 50ms;
}
.btn-settings { background-color: #7B6EE8; }
@@ -147,11 +144,10 @@
.btn-exit { background-color: #666666; }
/* ============================================================
DROPDOWN & FIELDS (THE BIG FIX)
DROPDOWN & FIELDS
============================================================ */
DropdownField, .unity-dropdown-field {
margin-bottom: 12px;
transition: 200ms;
}
DropdownField .unity-dropdown-field__label {
@@ -169,7 +165,6 @@ DropdownField .unity-base-field__input {
padding: 10px 15px;
flex-grow: 1;
color: #00ffcc;
transition: 200ms;
}
DropdownField:hover .unity-base-field__input {
@@ -177,16 +172,11 @@ DropdownField:hover .unity-base-field__input {
border-color: #00ffcc;
}
/* NHẮM VÀO CÁI MENU XỔ XUỐNG (POPUP) */
/* 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 */
background-color: rgba(0, 0, 0, 0) !important;
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;
@@ -196,7 +186,6 @@ DropdownField:hover .unity-base-field__input {
padding: 5px !important;
}
/* Từng dòng Item */
.unity-base-dropdown__item {
padding: 12px 15px !important;
background-color: transparent !important;
@@ -208,7 +197,7 @@ DropdownField:hover .unity-base-field__input {
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;
@@ -218,7 +207,7 @@ DropdownField:hover .unity-base-field__input {
color: #00ffcc !important;
}
/* Item được chọn */
.unity-base-dropdown__item--selected {
background-color: rgba(0, 255, 204, 0.1) !important;
color: #00ffcc !important;
@@ -229,17 +218,19 @@ DropdownField:hover .unity-base-field__input {
}
/* ============================================================
SMART SIDEBAR (OSU STYLE OVERLAY)
SMART SIDEBAR (STABLE OVERLAY SYSTEM)
============================================================ */
.sidebar-tabs-container {
background-color: rgba(5, 5, 5, 0.95);
background-color: rgba(15, 15, 15, 0.98);
padding-top: 60px;
flex-shrink: 0;
border-right-width: 1px;
border-right-width: 2px;
border-right-color: rgba(0, 255, 204, 0.1);
transition: width 0.3s ease-out-quad;
overflow: hidden;
height: 100%;
position: absolute; /* Phải là absolute để lướt đè */
left: 0;
top: 0;
z-index: 100;
}
.sidebar-collapsed {
@@ -247,11 +238,7 @@ DropdownField:hover .unity-base-field__input {
}
.sidebar-expanded {
width: 240px;
position: absolute;
z-index: 100;
border-right-color: #00ffcc;
border-right-width: 2px;
}
.sidebar-tab {
@@ -263,7 +250,11 @@ DropdownField:hover .unity-base-field__input {
align-items: center;
border-left-width: 4px;
border-left-color: transparent;
margin: 2px 0;
}
.active-tab {
background-color: rgba(0, 255, 204, 0.08);
border-left-color: #00ffcc;
}
.tab-icon-box {
@@ -277,13 +268,12 @@ DropdownField:hover .unity-base-field__input {
.tab-icon {
width: 32px;
height: 32px;
background-color: #ffffff; /* Placeholder color */
background-color: #ffffff;
-unity-background-image-tint-color: #ffffff;
}
.active-tab .tab-icon {
-unity-background-image-tint-color: #00ffcc;
background-color: #00ffcc;
}
.tab-label {
@@ -293,7 +283,7 @@ DropdownField:hover .unity-base-field__input {
margin-left: 10px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.2s;
transition: opacity 0.3s ease-out-quad;
}
.sidebar-expanded .tab-label {
@@ -301,29 +291,18 @@ DropdownField:hover .unity-base-field__input {
color: #ffffff;
}
/* ICON-ONLY BACK BUTTON */
.btn-icon-only {
width: 44px;
height: 44px;
border-radius: 22px;
padding: 0;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
border-radius: 25px;
margin: 15px auto;
background-color: rgba(255, 255, 255, 0.1);
}
.btn-icon-only .tab-icon {
width: 24px;
height: 24px;
}
/* ============================================================
PANELS
============================================================ */
.panel-glass {
background-color: var(--color-surface);
border-radius: 20px;
border-width: 1px;
border-color: rgba(255, 255, 255, 0.1);
.settings-details-column {
margin-left: 80px; /* CHỖ CHỪA CHO ICON */
flex-grow: 1;
padding: 40px;
}
.input-field {
@@ -362,74 +341,10 @@ DropdownField:hover .unity-base-field__input {
.border-accent { border-color: #00ffcc; }
/* ============================================================
SETTINGS & REBINDING
PANELS & OTHERS
============================================================ */
.sidebar-tab {
height: 54px;
background-color: transparent;
border-width: 0;
color: #888888;
-unity-font-style: bold;
font-size: 16px;
border-left-width: 4px;
border-left-color: transparent;
padding-left: 24px;
border-radius: 0;
margin: 2px 0;
-unity-text-align: middle-left;
}
.sidebar-tab:hover {
color: #ffffff;
background-color: rgba(255, 255, 255, 0.03);
}
.active-tab {
color: #00ffcc;
border-left-color: #00ffcc;
background-color: rgba(0, 255, 204, 0.08);
}
.rebind-row {
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background-color: rgba(255, 255, 255, 0.02);
border-radius: 10px;
margin-bottom: 6px;
}
.rebind-label {
font-size: 14px;
color: #cccccc;
}
.rebind-button {
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.1);
color: #00ffcc;
font-size: 13px;
-unity-font-style: bold;
}
.rebind-button:hover {
background-color: rgba(255, 255, 255, 0.15);
border-color: #00ffcc;
}
.setting-section-header {
margin-top: 24px;
margin-bottom: 12px;
font-size: 13px;
color: #666666;
-unity-font-style: bold;
border-bottom-width: 1px;
border-bottom-color: rgba(255, 255, 255, 0.05);
padding-bottom: 6px;
letter-spacing: 1px;
}
.panel-glass { background-color: var(--color-surface); border-radius: 20px; }
.rebind-row { flex-direction: row; justify-content: space-between; align-items: center; padding: 12px 16px; background-color: rgba(255, 255, 255, 0.02); border-radius: 10px; margin-bottom: 6px; }
.rebind-label { font-size: 14px; color: #cccccc; }
.rebind-button { 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.1); color: #00ffcc; font-size: 13px; -unity-font-style: bold; }
.setting-section-header { margin-top: 24px; margin-bottom: 12px; font-size: 13px; color: #666666; -unity-font-style: bold; border-bottom-width: 1px; border-bottom-color: rgba(255, 255, 255, 0.05); padding-bottom: 6px; letter-spacing: 1px; }

34
Assets/UI/Settings.uxml
View File

@@ -1,20 +1,34 @@
<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; 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: 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" />
<ui:Button name="ControlTab" text="CONTROL" class="sidebar-tab" />
<ui:VisualElement name="Sidebar" picking-mode="Position" class="panel-glass border-accent" style="width: 40%; height: 100%; flex-direction: row; padding: 0; border-radius: 0 30px 30px 0; border-right-width: 3px; border-left-width: 0; border-top-width: 0; border-bottom-width: 0; min-width: 500px;">
<!-- Tabs Column (The Smart Sidebar) -->
<ui:VisualElement name="TabsColumn" class="sidebar-tabs-container sidebar-collapsed">
<ui:Button name="GeneralTab" class="sidebar-tab active-tab">
<ui:VisualElement class="tab-icon-box"><ui:VisualElement class="tab-icon" /></ui:VisualElement>
<ui:Label text="GENERAL" class="tab-label" />
</ui:Button>
<ui:Button name="VideoTab" class="sidebar-tab">
<ui:VisualElement class="tab-icon-box"><ui:VisualElement class="tab-icon" /></ui:VisualElement>
<ui:Label text="VIDEO" class="tab-label" />
</ui:Button>
<ui:Button name="SoundTab" class="sidebar-tab">
<ui:VisualElement class="tab-icon-box"><ui:VisualElement class="tab-icon" /></ui:VisualElement>
<ui:Label text="SOUND" class="tab-label" />
</ui:Button>
<ui:Button name="ControlTab" class="sidebar-tab">
<ui:VisualElement class="tab-icon-box"><ui:VisualElement class="tab-icon" /></ui:VisualElement>
<ui:Label text="CONTROL" class="tab-label" />
</ui:Button>
<ui:VisualElement style="flex-grow: 1;" />
<ui:Button name="CloseSettingsBtn" text="BACK" class="button-spring btn-exit" style="margin: 20px;" />
<ui:Button name="CloseSettingsBtn" class="button-spring btn-icon-only" style="margin: 20px;">
<ui:VisualElement class="tab-icon" style="background-image: none;" />
</ui:Button>
</ui:VisualElement>
<!-- Details -->
<ui:VisualElement name="DetailsColumn" style="flex-grow: 1; padding: 40px; min-width: 320px; width: auto;">
<!-- Details Column -->
<ui:VisualElement name="DetailsColumn" class="settings-details-column" style="min-width: 320px;">
<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 -->