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-04-28 22:35:03 +07:00
parent 645f89b352
commit 29888fadfa
18 changed files with 1122 additions and 5800 deletions
Download Patch File Download Diff File Expand all files Collapse all files

323
Assets/UI/Global.uss
View File

@@ -1,17 +1,20 @@
/* Global Styles for Hallucinate UI */
/* osu!lazer-inspired — extends existing rules, nothing removed */
/* osu!lazer-inspired — refined for Bitcount fonts */
/* ============================================================
DESIGN TOKENS
============================================================ */
:root {
/* --- Giữ nguyên biến cũ --- */
/* Fonts - Using SDF assets for crisp rendering */
--font-heading: resource("Fonts/BitcountGridDouble-VariableFont_CRSV,ELSH,ELXP,slnt,wght SDF");
--font-body: resource("Fonts/BitcountSingleInk-VariableFont_CRSV,ELSH,ELXP,SZP1,SZP2,XPN1,XPN2,YPN1,YPN2,slnt,wght SDF");
/* Colors */
--primary-color: #ffffff;
--accent-color: #00ffcc;
--background-blur: rgba(0, 0, 0, 0.5);
--font-main: resource("Fonts/Ancient Medium SDF");
/* --- Spacing system (base 4px) --- */
--background-blur: rgba(0, 0, 0, 0.7);
/* Spacing system */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
@@ -19,27 +22,29 @@
--space-6: 24px;
--space-8: 32px;
/* --- Color system --- */
--color-surface: rgba(0, 0, 0, 0.65);
--color-surface-light: rgba(255, 255, 255, 0.06);
--color-border: rgba(255, 255, 255, 0.12);
--color-border-hover: rgba(255, 255, 255, 0.28);
/* Surface & Borders */
--color-surface: rgba(10, 10, 10, 0.85);
--color-surface-light: rgba(255, 255, 255, 0.08);
--color-border: rgba(255, 255, 255, 0.15);
--color-border-hover: rgba(0, 255, 204, 0.5);
/* Palette — mỗi nút 1 màu (giống osu) */
--color-btn-settings: #7B6EE8; /* tím */
/* Palette — osu! inspired colors */
--color-btn-settings: #7B6EE8; /* purple */
--color-btn-join: #4DC8A0; /* teal */
--color-btn-create: #E8834D; /* cam */
--color-btn-profile: #E84D8A; /* hồng */
--color-btn-exit: #888888; /* xám trung tính */
--color-btn-create: #E8834D; /* orange */
--color-btn-profile: #E84D8A; /* pink */
--color-btn-exit: #666666; /* gray */
--color-btn-cancel: #FF4444; /* red */
/* Text */
--color-text-primary: rgba(255, 255, 255, 0.95);
--color-text-secondary: rgba(255, 255, 255, 0.55);
--color-text-secondary: rgba(255, 255, 255, 0.6);
--color-text-accent: #00ffcc;
/* --- Border radius --- */
/* Border radius */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-pill: 999px;
}
@@ -51,56 +56,87 @@
height: 100%;
position: absolute;
background-color: transparent;
-unity-font-definition: var(--font-body);
}
/* ============================================================
BUTTON — SPRING (giữ nguyên, chỉ thêm visual)
TYPOGRAPHY
============================================================ */
.text-heading {
font-size: 32px;
-unity-font-style: bold;
color: var(--color-text-primary);
-unity-font-definition: var(--font-heading);
margin-bottom: var(--space-4);
letter-spacing: 2px;
}
.text-subheading {
font-size: 24px;
-unity-font-style: bold;
color: var(--color-text-accent);
-unity-font-definition: var(--font-heading);
margin-bottom: var(--space-3);
}
.text-label {
font-size: 14px;
color: var(--color-text-secondary);
-unity-font-definition: var(--font-body);
-unity-font-style: bold;
text-transform: uppercase;
}
.text-body {
font-size: 16px;
color: var(--color-text-primary);
-unity-font-definition: var(--font-body);
}
.text-accent {
color: var(--color-text-accent);
}
/* ============================================================
BUTTON — SPRING
============================================================ */
.button-spring {
/* --- Giữ nguyên animation cũ --- */
transition-duration: 0.1s;
transition-timing-function: ease-out-back;
/* --- Thêm visual --- */
height: 48px;
padding-left: var(--space-4);
padding-right: var(--space-4);
padding-left: var(--space-6);
padding-right: var(--space-6);
border-radius: var(--radius-md);
border-width: 0;
-unity-font-definition: resource("Fonts/Ancient Medium SDF");
font-size: 15px;
color: var(--color-text-primary);
-unity-font-definition: var(--font-body);
-unity-font-style: bold;
font-size: 16px;
color: white;
background-color: var(--color-surface-light);
transition-property: scale, background-color, border-color;
transition-duration: 0.1s;
transition-timing-function: ease-out-back;
cursor: link;
/* Màu mặc định — bị override bởi modifier class bên dưới */
background-color: rgba(255, 255, 255, 0.1);
align-items: center;
justify-content: center;
}
.button-spring:hover {
scale: 1.05;
background-color: rgba(255, 255, 255, 0.18);
background-color: rgba(255, 255, 255, 0.15);
border-width: 1px;
border-color: var(--color-border-hover);
}
.button-spring:active {
scale: 0.9;
scale: 0.95;
}
/* Per-button accent colors (gán thêm class vào UXML) */
/* Per-button accent colors */
.btn-settings { background-color: var(--color-btn-settings); }
.btn-settings:hover { background-color: #9080F0; }
.btn-join { background-color: var(--color-btn-join); }
.btn-join:hover { background-color: #60DEB8; }
.btn-create { background-color: var(--color-btn-create); }
.btn-create:hover { background-color: #F09A68; }
.btn-profile { background-color: var(--color-btn-profile); }
.btn-profile:hover { background-color: #F060A0; }
.btn-exit { background-color: var(--color-btn-exit); }
.btn-exit:hover { background-color: #AAAAAA; }
.btn-cancel { background-color: var(--color-btn-cancel); }
/* ============================================================
RIBBON — dải băng main menu
@@ -110,23 +146,17 @@
align-items: center;
justify-content: center;
background-color: var(--color-surface);
padding-top: var(--space-2);
padding-bottom: var(--space-2);
padding-left: var(--space-6);
padding-right: var(--space-6);
border-radius: var(--radius-lg);
border-width: 1px;
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-pill);
border-width: 2px;
border-color: var(--color-border);
/* gap giữa các button */
/* Unity UIToolkit không có gap trực tiếp, dùng margin trên button */
}
/* Spacing giữa các nút trong ribbon */
.ribbon .button-spring {
margin-left: var(--space-2);
margin-right: var(--space-2);
min-width: 96px;
min-width: 110px;
height: 54px;
}
/* ============================================================
@@ -137,91 +167,81 @@
height: 200px;
align-self: center;
justify-content: center;
/* Thêm visual */
border-radius: var(--radius-pill);
border-width: 2px;
border-width: 4px;
border-color: var(--color-border-hover);
background-color: rgba(255, 255, 255, 0.08);
background-color: white;
overflow: hidden;
}
.logo-text {
-unity-font-definition: var(--font-heading);
font-size: 40px;
color: black;
-unity-font-style: bold;
}
/* ============================================================
SURFACE / PANEL — dùng cho Lobby, Profile, Settings
SURFACE / PANEL
============================================================ */
.panel-glass {
background-color: var(--color-surface);
border-radius: var(--radius-lg);
border-width: 1px;
border-width: 2px;
border-color: var(--color-border);
padding: var(--space-6);
padding: var(--space-8);
}
.panel-glass--right {
/* Right pane trong Lobby / Profile */
width: 40%;
height: 100%;
border-radius: 0;
border-top-left-radius: var(--radius-lg);
border-bottom-left-radius: var(--radius-lg);
}
/* ============================================================
TYPOGRAPHY
============================================================ */
.text-heading {
font-size: 28px;
-unity-font-style: bold;
color: var(--color-text-primary);
-unity-font-definition: resource("Fonts/Ancient Medium SDF");
}
.text-label {
font-size: 13px;
color: var(--color-text-secondary);
-unity-font-definition: resource("Fonts/Ancient Medium SDF");
}
.text-body {
font-size: 15px;
color: var(--color-text-primary);
-unity-font-definition: resource("Fonts/Ancient Medium SDF");
border-left-width: 3px;
border-left-color: var(--color-text-accent);
}
/* ============================================================
INPUT FIELD
============================================================ */
.input-field {
height: 44px;
height: 48px;
border-radius: var(--radius-md);
border-width: 1px;
border-color: var(--color-border);
background-color: var(--color-surface-light);
color: var(--color-text-primary);
font-size: 14px;
padding-left: var(--space-3);
padding-right: var(--space-3);
-unity-font-definition: var(--font-body);
font-size: 16px;
padding-left: var(--space-4);
margin-bottom: var(--space-4);
}
.input-field:focus {
border-color: var(--color-border-hover);
background-color: rgba(255, 255, 255, 0.1);
border-color: var(--color-text-accent);
background-color: rgba(255, 255, 255, 0.12);
}
.unity-base-text-field__input {
background-color: transparent;
border-width: 0;
}
/* ============================================================
SIDEBAR (Settings)
============================================================ */
.sidebar-tab {
height: 48px;
padding-left: var(--space-4);
height: 52px;
padding-left: var(--space-6);
border-radius: var(--radius-sm);
background-color: transparent;
border-width: 0;
color: var(--color-text-secondary);
font-size: 14px;
font-size: 16px;
-unity-text-align: middle-left;
margin-bottom: var(--space-1);
transition-duration: 0.1s;
margin-bottom: var(--space-2);
-unity-font-definition: var(--font-body);
}
.sidebar-tab:hover {
@@ -231,9 +251,9 @@
.sidebar-tab.active-tab {
background-color: rgba(123, 110, 232, 0.2);
color: var(--color-text-primary);
border-left-color: var(--color-btn-settings);
border-left-width: 3px;
color: var(--color-text-accent);
border-left-color: var(--color-text-accent);
border-left-width: 4px;
border-radius: 0;
border-top-right-radius: var(--radius-sm);
border-bottom-right-radius: var(--radius-sm);
@@ -242,88 +262,65 @@
/* ============================================================
HUD
============================================================ */
.hud-root {
width: 100%;
height: 100%;
position: absolute;
picking-mode: ignore;
}
.hud-bar {
height: 24px;
border-radius: var(--radius-pill);
border-width: 1px;
border-width: 2px;
border-color: var(--color-border);
background-color: rgba(0, 0, 0, 0.4);
background-color: rgba(0, 0, 0, 0.6);
overflow: hidden;
}
.hud-slot {
width: 56px;
height: 56px;
border-radius: var(--radius-md);
border-width: 1px;
border-color: var(--color-border);
background-color: var(--color-surface);
overflow: hidden;
.unity-progress-bar__container {
height: 100%;
min-height: 100%;
}
.hud-slot--active {
width: 72px;
height: 72px;
border-color: var(--color-border-hover);
border-width: 2px;
}
.hud-text-debug {
font-size: 12px;
color: var(--color-text-secondary);
-unity-font-definition: resource("Fonts/Ancient Medium SDF");
}
/* ============================================================
READY BUTTON (Lounge)
============================================================ */
.btn-ready {
height: 56px;
min-width: 160px;
border-radius: var(--radius-md);
border-width: 2px;
border-color: var(--color-btn-join);
background-color: transparent;
color: var(--color-btn-join);
font-size: 16px;
-unity-font-style: bold;
transition-duration: 0.15s;
}
.btn-ready.is-ready {
background-color: var(--color-btn-join);
color: rgba(0, 0, 0, 0.85);
}
/* ============================================================
SCROLL VIEW
============================================================ */
.scroll-list {
.unity-progress-bar__background {
background-color: transparent;
border-width: 0;
}
.unity-progress-bar__progress {
border-radius: var(--radius-pill);
}
#HealthBar .unity-progress-bar__progress { background-color: #ff4444; }
#StaminaBar .unity-progress-bar__progress { background-color: #44ff44; }
.hud-slot {
width: 64px;
height: 64px;
border-radius: var(--radius-md);
border-width: 2px;
border-color: var(--color-border);
background-color: var(--color-surface);
margin-right: var(--space-2);
}
.hud-slot--active {
width: 80px;
height: 80px;
border-color: var(--color-text-accent);
border-width: 3px;
}
/* ============================================================
ROOM ITEM
============================================================ */
.room-item {
height: 56px;
margin-bottom: var(--space-2);
height: 80px;
margin-bottom: var(--space-3);
border-radius: var(--radius-md);
background-color: var(--color-surface-light);
border-width: 1px;
border-color: var(--color-border);
padding-left: var(--space-4);
padding-right: var(--space-4);
padding: 0 var(--space-4);
flex-direction: row;
align-items: center;
transition-duration: 0.1s;
}
.room-item:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: var(--color-border-hover);
background-color: rgba(255, 255, 255, 0.12);
border-color: var(--color-text-accent);
}