160 lines
3.3 KiB
Plaintext
160 lines
3.3 KiB
Plaintext
/* --- Global Design System --- */
|
|
|
|
:root {
|
|
--primary-color: #3B5998;
|
|
--primary-hover: #4C70BA;
|
|
--danger-color: #ff4d4d;
|
|
--panel-bg: rgba(45, 45, 45, 0.8);
|
|
--frosted-bg: rgba(255, 255, 255, 0.1);
|
|
--border-color: #4A4A4A;
|
|
--text-color: #E0E0E0;
|
|
--glass-blur: 15px;
|
|
}
|
|
|
|
/* Layout Containers */
|
|
.screen-root {
|
|
flex-grow: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(20, 20, 20, 0.95);
|
|
padding: 0;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
transition-property: opacity, scale;
|
|
transition-duration: 0.3s;
|
|
transition-timing-function: ease-in-out;
|
|
opacity: 1;
|
|
scale: 1;
|
|
}
|
|
|
|
.screen-root.hidden {
|
|
opacity: 0;
|
|
scale: 0.95;
|
|
display: none;
|
|
}
|
|
|
|
/* Diagonal Split-Screen Container */
|
|
.diagonal-container {
|
|
flex-grow: 1;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.left-pane {
|
|
width: 60%;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.right-pane-wrapper {
|
|
width: 45%; /* Slightly larger to account for the skew overlap */
|
|
margin-left: -5%;
|
|
transform: skewX(-15deg);
|
|
background-color: var(--frosted-bg);
|
|
border-left-width: 4px;
|
|
border-left-color: white;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.right-pane-content {
|
|
flex-grow: 1;
|
|
transform: skewX(15deg); /* Counter-skew content */
|
|
padding: 60px 40px;
|
|
background-color: rgba(0, 0, 0, 0.4); /* Darken for readability */
|
|
}
|
|
|
|
/* Modal Overlay Backdrop */
|
|
.modal-backdrop {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 100px;
|
|
}
|
|
|
|
.modal-panel {
|
|
background-color: var(--panel-bg);
|
|
border-width: 2px;
|
|
border-color: var(--border-color);
|
|
border-radius: 20px;
|
|
padding: 30px;
|
|
min-width: 600px;
|
|
min-height: 400px;
|
|
}
|
|
|
|
/* Osu-Style Slanted Button */
|
|
.slanted-button {
|
|
background-color: var(--primary-color);
|
|
padding: 0;
|
|
margin: 8px;
|
|
border-radius: 0;
|
|
border-width: 0;
|
|
transform: skewX(-20deg);
|
|
transition-duration: 0.1s;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.slanted-button-inner {
|
|
flex-grow: 1;
|
|
padding: 12px 30px;
|
|
transform: skewX(20deg); /* Counter-skew text */
|
|
-unity-text-align: middle-center;
|
|
color: white;
|
|
font-size: 20px;
|
|
-unity-font-style: bold;
|
|
}
|
|
|
|
/* Cursorless Focus System */
|
|
.slanted-button.hover {
|
|
background-color: var(--primary-hover);
|
|
scale: 1.15;
|
|
rotate: -2deg;
|
|
border-width: 2px;
|
|
border-color: white;
|
|
transition-duration: 0.15s;
|
|
}
|
|
|
|
.slanted-button.hover .slanted-button-inner {
|
|
color: #FFD700; /* Golden text on hover */
|
|
}
|
|
|
|
/* HUD Components */
|
|
.hud-bar-container {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.hud-bar-fill {
|
|
height: 100%;
|
|
transition-property: width;
|
|
transition-duration: 0.2s;
|
|
}
|
|
|
|
/* Typography */
|
|
.header-text {
|
|
font-size: 64px;
|
|
color: var(--text-color);
|
|
-unity-font-style: bold;
|
|
margin-bottom: 30px;
|
|
-unity-text-align: middle-center;
|
|
}
|
|
|
|
.tab-button {
|
|
flex-grow: 1;
|
|
background-color: rgba(60, 60, 60, 0.5);
|
|
padding: 15px;
|
|
color: #888;
|
|
margin-right: 5px;
|
|
border-radius: 10px 10px 0 0;
|
|
}
|
|
|
|
.tab-button.active-tab {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
}
|