Andrew Zambazos
f0d2926872
Add comprehensive READMEs for Bigscreen and Desktop modes, and relocate the Tauri frontend prototype into a new Bigscreen/ subdirectory. This moves package.json/package-lock, src, src-tauri, assets, views, styles and related files into Bigscreen/ to separate the controller-first shell from top-level docs. Update the root README.md to reframe the project as "NebulaOS", describe Bigscreen/Desktop modes, the vision, tech stack and development notes. This reorganizes the repo layout for clearer mode separation and documentation.
348 lines
7.7 KiB
CSS
348 lines
7.7 KiB
CSS
.lock-view {
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: radial-gradient(circle at 55% 48%, rgba(79, 216, 255, 0.1), transparent 62%);
|
|
}
|
|
|
|
.lock-layout {
|
|
width: min(1240px, 96vw);
|
|
min-height: min(720px, 82vh);
|
|
display: grid;
|
|
grid-template-columns: minmax(320px, 1fr) minmax(360px, 520px);
|
|
gap: clamp(24px, 4vw, 58px);
|
|
background:
|
|
linear-gradient(165deg, rgba(56, 82, 128, 0.18), rgba(19, 30, 56, 0.74)),
|
|
radial-gradient(circle at 65% 35%, rgba(79, 216, 255, 0.08), transparent 52%),
|
|
rgba(13, 18, 31, 0.78);
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
box-shadow:
|
|
0 24px 62px rgba(0, 0, 0, 0.38),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.12);
|
|
backdrop-filter: blur(14px);
|
|
padding: clamp(28px, 4vw, 48px);
|
|
}
|
|
|
|
.lock-view.is-success .lock-layout {
|
|
box-shadow:
|
|
0 0 0 1px rgba(79, 216, 255, 0.3),
|
|
0 24px 62px rgba(0, 0, 0, 0.38),
|
|
0 0 48px rgba(79, 216, 255, 0.24);
|
|
}
|
|
|
|
.lock-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: var(--nebula-spacing-lg);
|
|
}
|
|
|
|
.lock-user {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.lock-avatar {
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 999px;
|
|
border: 2px solid rgba(79, 216, 255, 0.44);
|
|
background:
|
|
radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.85), transparent 45%),
|
|
linear-gradient(145deg, rgba(112, 189, 255, 0.66), rgba(66, 78, 142, 0.8));
|
|
}
|
|
|
|
.lock-username {
|
|
margin: 0;
|
|
font-weight: 640;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.lock-title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.lock-title {
|
|
margin: 0;
|
|
font-size: clamp(36px, 5vw, 52px);
|
|
font-weight: 540;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.lock-controller-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 34px;
|
|
height: 34px;
|
|
padding: 0 10px;
|
|
border-radius: 999px;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: var(--nebula-color-text);
|
|
box-shadow: 0 0 18px rgba(79, 216, 255, 0.16);
|
|
}
|
|
|
|
.lock-controller-badge--xbox {
|
|
border-color: rgba(107, 190, 70, 0.55);
|
|
background: rgba(107, 190, 70, 0.18);
|
|
}
|
|
|
|
.lock-controller-badge--playstation {
|
|
border-color: rgba(70, 130, 220, 0.55);
|
|
background: rgba(70, 130, 220, 0.18);
|
|
}
|
|
|
|
.lock-controller-badge--switch {
|
|
border-color: rgba(230, 70, 70, 0.55);
|
|
background: rgba(230, 70, 70, 0.16);
|
|
}
|
|
|
|
.lock-glyph {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 28px;
|
|
height: 28px;
|
|
margin: 0 4px;
|
|
padding: 0 8px;
|
|
border-radius: var(--nebula-radius-sm);
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
vertical-align: middle;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
color: var(--nebula-color-text);
|
|
}
|
|
|
|
.lock-glyph-menu {
|
|
border-color: rgba(79, 216, 255, 0.45);
|
|
box-shadow: 0 0 14px rgba(79, 216, 255, 0.22);
|
|
}
|
|
|
|
.lock-status .lock-glyph-menu {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.lock-copy {
|
|
margin: 0;
|
|
color: var(--nebula-color-muted);
|
|
font-size: 20px;
|
|
line-height: 1.45;
|
|
max-width: 540px;
|
|
}
|
|
|
|
.lock-user-setup {
|
|
display: grid;
|
|
gap: 12px;
|
|
max-width: 420px;
|
|
}
|
|
|
|
.lock-field {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.lock-field span {
|
|
font-size: 13px;
|
|
color: var(--nebula-color-muted);
|
|
}
|
|
|
|
.lock-field input {
|
|
height: 44px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
background: rgba(9, 15, 30, 0.65);
|
|
color: var(--nebula-color-text);
|
|
padding: 0 12px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.lock-field input:focus {
|
|
outline: none;
|
|
border-color: rgba(79, 216, 255, 0.72);
|
|
box-shadow: 0 0 0 2px rgba(79, 216, 255, 0.2);
|
|
}
|
|
|
|
.lock-create-user {
|
|
height: 46px;
|
|
border: 1px solid rgba(79, 216, 255, 0.4);
|
|
border-radius: 12px;
|
|
background: linear-gradient(160deg, rgba(51, 87, 135, 0.55), rgba(18, 33, 58, 0.8));
|
|
color: var(--nebula-color-text);
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.lock-create-user.is-focused {
|
|
box-shadow:
|
|
0 0 0 2px rgba(79, 216, 255, 0.55),
|
|
0 0 24px rgba(79, 216, 255, 0.3);
|
|
}
|
|
|
|
.lock-dots {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: clamp(14px, 1.6vw, 22px);
|
|
min-height: 30px;
|
|
transition: transform var(--nebula-duration-fast) var(--nebula-ease-console);
|
|
}
|
|
|
|
.lock-dot {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 999px;
|
|
border: 2px solid rgba(191, 206, 230, 0.38);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
opacity: 0.75;
|
|
transform: scale(0.92);
|
|
transition:
|
|
transform var(--nebula-duration-fast) var(--nebula-ease-console),
|
|
border-color var(--nebula-duration-fast) var(--nebula-ease-console),
|
|
background-color var(--nebula-duration-fast) var(--nebula-ease-console),
|
|
box-shadow var(--nebula-duration-fast) var(--nebula-ease-console);
|
|
}
|
|
|
|
.lock-dot.active {
|
|
border-color: rgba(79, 216, 255, 0.72);
|
|
box-shadow: 0 0 16px rgba(79, 216, 255, 0.34);
|
|
}
|
|
|
|
.lock-dot.filled {
|
|
background: rgba(215, 230, 255, 0.9);
|
|
border-color: rgba(215, 230, 255, 0.95);
|
|
transform: scale(1);
|
|
animation: dotFill var(--nebula-duration-fast) var(--nebula-ease-console);
|
|
}
|
|
|
|
.lock-dots.is-success .lock-dot.filled {
|
|
border-color: rgba(79, 216, 255, 0.95);
|
|
background: rgba(79, 216, 255, 0.9);
|
|
box-shadow: 0 0 20px rgba(79, 216, 255, 0.58);
|
|
}
|
|
|
|
.lock-dots.is-error .lock-dot {
|
|
border-color: color-mix(in srgb, var(--nebula-color-danger) 72%, rgba(255, 255, 255, 0.3));
|
|
box-shadow: 0 0 20px color-mix(in srgb, var(--nebula-color-danger) 38%, transparent);
|
|
}
|
|
|
|
.lock-dots.is-shaking {
|
|
animation: dotsShake 420ms var(--nebula-ease-console);
|
|
}
|
|
|
|
.lock-status {
|
|
margin: 0;
|
|
min-height: 24px;
|
|
font-size: 16px;
|
|
color: var(--nebula-color-muted);
|
|
}
|
|
|
|
.lock-status.is-danger {
|
|
color: var(--nebula-color-danger);
|
|
}
|
|
|
|
.lock-right {
|
|
align-self: center;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(96px, 1fr));
|
|
gap: clamp(10px, 1.4vw, 18px);
|
|
justify-items: center;
|
|
background: rgba(15, 24, 45, 0.6);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.lock-num {
|
|
width: clamp(82px, 7.3vw, 112px);
|
|
height: clamp(82px, 7.3vw, 112px);
|
|
border: none;
|
|
border-radius: 18px;
|
|
font-size: clamp(42px, 3.8vw, 68px);
|
|
font-weight: 330;
|
|
line-height: 1;
|
|
color: color-mix(in srgb, var(--nebula-color-text) 95%, rgba(215, 230, 255, 0.94));
|
|
background:
|
|
radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.12), transparent 55%),
|
|
linear-gradient(162deg, rgba(61, 90, 140, 0.18), rgba(15, 23, 43, 0.6));
|
|
box-shadow:
|
|
0 10px 22px rgba(0, 0, 0, 0.24),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
|
transition:
|
|
transform var(--nebula-duration-nav) var(--nebula-ease-console),
|
|
box-shadow var(--nebula-duration-nav) var(--nebula-ease-console),
|
|
border-color var(--nebula-duration-nav) var(--nebula-ease-console);
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.lock-num.is-zero {
|
|
grid-column: 2;
|
|
}
|
|
|
|
.lock-num.is-focused {
|
|
transform: scale(1.1);
|
|
box-shadow:
|
|
0 0 0 2px rgba(79, 216, 255, 0.5),
|
|
0 0 28px rgba(79, 216, 255, 0.36),
|
|
0 12px 30px rgba(0, 0, 0, 0.28);
|
|
}
|
|
|
|
.lock-map {
|
|
font-size: 13px;
|
|
font-weight: 650;
|
|
letter-spacing: 0.02em;
|
|
color: color-mix(in srgb, var(--nebula-color-muted) 80%, #fff);
|
|
transform: translateY(-8px);
|
|
}
|
|
|
|
.lock-num.is-focused .lock-map {
|
|
color: color-mix(in srgb, var(--nebula-color-accent) 85%, #fff);
|
|
}
|
|
|
|
@keyframes dotFill {
|
|
0% {
|
|
opacity: 0.35;
|
|
transform: scale(0.62);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes dotsShake {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
20% {
|
|
transform: translateX(-9px);
|
|
}
|
|
|
|
40% {
|
|
transform: translateX(8px);
|
|
}
|
|
|
|
60% {
|
|
transform: translateX(-6px);
|
|
}
|
|
|
|
80% {
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|