This commit is contained in:
2026-05-01 16:51:08 +07:00
parent fe01a55dcb
commit 88dec45d4c
4 changed files with 175 additions and 472 deletions

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; }