feat: initialize aivideo project
This commit is contained in:
402
frontend-web/src/app/globals.css
Normal file
402
frontend-web/src/app/globals.css
Normal file
@@ -0,0 +1,402 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--bg: #f7f2e8;
|
||||
--surface: rgba(255, 255, 255, 0.78);
|
||||
--surface-strong: #fffdf9;
|
||||
--ink: #132238;
|
||||
--muted: #5f6977;
|
||||
--line: rgba(19, 34, 56, 0.12);
|
||||
--accent: #e66a2c;
|
||||
--accent-deep: #a43e13;
|
||||
--olive: #35524a;
|
||||
--success: #198754;
|
||||
--warn: #c27a11;
|
||||
--danger: #b63d3d;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
font-family: var(--font-body), sans-serif;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(230, 106, 44, 0.18), transparent 28%),
|
||||
radial-gradient(circle at bottom left, rgba(53, 82, 74, 0.22), transparent 30%),
|
||||
linear-gradient(180deg, #fbf6ee 0%, #f2ecdf 100%);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.fullscreen-shell {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.auth-grid {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr 0.8fr;
|
||||
}
|
||||
|
||||
.auth-hero {
|
||||
padding: 56px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
width: min(460px, calc(100vw - 32px));
|
||||
margin: auto;
|
||||
padding: 32px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 28px;
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
box-shadow: 0 28px 80px rgba(19, 34, 56, 0.1);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-deep);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.headline {
|
||||
margin: 10px 0 14px;
|
||||
font-size: clamp(36px, 5vw, 70px);
|
||||
line-height: 0.96;
|
||||
font-family: var(--font-display), sans-serif;
|
||||
}
|
||||
|
||||
.subcopy {
|
||||
max-width: 560px;
|
||||
line-height: 1.6;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.form-stack {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.field-label input,
|
||||
.field-label select,
|
||||
.field-label textarea {
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid rgba(19, 34, 56, 0.16);
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.field-label textarea {
|
||||
min-height: 120px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.primary-button,
|
||||
.ghost-button,
|
||||
.danger-button {
|
||||
border: 0;
|
||||
border-radius: 16px;
|
||||
padding: 14px 18px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
background: linear-gradient(135deg, var(--accent) 0%, #f48f39 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ghost-button {
|
||||
background: rgba(19, 34, 56, 0.06);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.danger-button {
|
||||
background: rgba(182, 61, 61, 0.12);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.shell-grid {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr;
|
||||
}
|
||||
|
||||
.shell-sidebar {
|
||||
padding: 24px;
|
||||
border-right: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.54);
|
||||
backdrop-filter: blur(14px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.brand-block h1 {
|
||||
margin: 8px 0 10px;
|
||||
font-size: 34px;
|
||||
font-family: var(--font-display), sans-serif;
|
||||
}
|
||||
|
||||
.brand-kicker,
|
||||
.header-kicker {
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-deep);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 16px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: linear-gradient(135deg, rgba(230, 106, 44, 0.12), rgba(53, 82, 74, 0.12));
|
||||
color: var(--ink);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.profile-card,
|
||||
.panel,
|
||||
.stat-card,
|
||||
.pulse-card {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 24px;
|
||||
background: var(--surface);
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: 0 18px 60px rgba(19, 34, 56, 0.08);
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
padding: 18px;
|
||||
margin-top: auto;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.profile-meta {
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.shell-main {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.shell-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.shell-header h2 {
|
||||
margin: 6px 0 0;
|
||||
font-size: 34px;
|
||||
font-family: var(--font-display), sans-serif;
|
||||
}
|
||||
|
||||
.header-chip {
|
||||
padding: 10px 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.76);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.shell-content {
|
||||
margin-top: 20px;
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.panel,
|
||||
.stat-card {
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.panel-grid,
|
||||
.stats-grid,
|
||||
.two-col-grid {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.panel-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
}
|
||||
|
||||
.two-col-grid {
|
||||
grid-template-columns: 1.05fr 0.95fr;
|
||||
}
|
||||
|
||||
.panel h3,
|
||||
.stat-card h3 {
|
||||
margin: 0 0 14px;
|
||||
font-size: 20px;
|
||||
font-family: var(--font-display), sans-serif;
|
||||
}
|
||||
|
||||
.stat-card .value {
|
||||
font-size: 34px;
|
||||
font-family: var(--font-display), sans-serif;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.row,
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.list-grid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
padding: 16px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
}
|
||||
|
||||
.list-item strong {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.mini-grid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tone-soft {
|
||||
background: rgba(19, 34, 56, 0.08);
|
||||
}
|
||||
|
||||
.tone-success {
|
||||
background: rgba(25, 135, 84, 0.12);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.tone-warn {
|
||||
background: rgba(194, 122, 17, 0.12);
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.tone-danger {
|
||||
background: rgba(182, 61, 61, 0.12);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.tone-ghost {
|
||||
background: rgba(95, 105, 119, 0.12);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.media-preview {
|
||||
width: 100%;
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--line);
|
||||
background: #111827;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
border-radius: 18px;
|
||||
background: #101623;
|
||||
color: #d7e1ff;
|
||||
overflow: auto;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.auth-grid,
|
||||
.shell-grid,
|
||||
.two-col-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.shell-sidebar {
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user