first commit
This commit is contained in:
+1296
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { PrimeReactProvider } from 'primereact/api';
|
||||
import 'primereact/resources/themes/lara-dark-teal/theme.css';
|
||||
import 'primereact/resources/primereact.min.css';
|
||||
import 'primeicons/primeicons.css';
|
||||
import 'primeflex/primeflex.css';
|
||||
import App from './App';
|
||||
import './styles.css';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<PrimeReactProvider value={{ ripple: true, inputStyle: 'filled' }}>
|
||||
<App />
|
||||
</PrimeReactProvider>
|
||||
</React.StrictMode>
|
||||
);
|
||||
+502
@@ -0,0 +1,502 @@
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
min-height: 100vh;
|
||||
padding-bottom: 5rem;
|
||||
background:
|
||||
radial-gradient(1200px 420px at 25% -8%, color-mix(in srgb, var(--primary-color) 25%, transparent), transparent 60%),
|
||||
linear-gradient(180deg, #08132a 0%, #071125 45%, #071022 100%);
|
||||
}
|
||||
|
||||
.app-topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
background: color-mix(in srgb, var(--surface-ground) 90%, black 10%);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.app-topbar-inner {
|
||||
max-width: 1120px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 0.8rem 1rem;
|
||||
}
|
||||
|
||||
.app-brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
.app-brand-title {
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.app-brand-subtitle {
|
||||
font-size: 0.62rem;
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
.app-main {
|
||||
max-width: 1120px;
|
||||
margin: 1rem auto;
|
||||
padding: 0 1rem 1.5rem;
|
||||
}
|
||||
|
||||
.app-content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-areas:
|
||||
"search"
|
||||
"selection"
|
||||
"results";
|
||||
gap: 1rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.search-card {
|
||||
grid-area: search;
|
||||
}
|
||||
|
||||
.selection-panel {
|
||||
grid-area: selection;
|
||||
}
|
||||
|
||||
.results-card {
|
||||
grid-area: results;
|
||||
}
|
||||
|
||||
@media (min-width: 1260px) {
|
||||
.app-shell {
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
width: 100%;
|
||||
flex: 1 1 auto;
|
||||
height: calc(100vh - 3.4rem);
|
||||
min-height: 0;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-content-grid {
|
||||
height: 100%;
|
||||
grid-template-columns: minmax(0, 1fr) 23.5rem;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
grid-template-areas:
|
||||
"results search"
|
||||
"results selection";
|
||||
}
|
||||
|
||||
.results-card {
|
||||
height: 100%;
|
||||
max-height: calc(100dvh - 8.5rem);
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.results-card .p-card-body {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.results-card .p-card-content {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.results-card .p-dataview {
|
||||
height: 100%;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.results-card .p-dataview-content {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow-y: auto !important;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.results-card .p-paginator {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.app-bottom-nav {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 30;
|
||||
padding: 0.6rem 0.85rem max(0.6rem, env(safe-area-inset-bottom));
|
||||
border-top: 1px solid var(--surface-border);
|
||||
background: color-mix(in srgb, var(--surface-ground) 92%, black 8%);
|
||||
}
|
||||
|
||||
.app-bottom-nav-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.app-bottom-nav .p-button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.app-bottom-nav .p-button.active {
|
||||
background: color-mix(in srgb, var(--primary-color) 20%, transparent);
|
||||
color: var(--primary-color-text);
|
||||
}
|
||||
|
||||
.mobile-sheet-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 45;
|
||||
background: rgba(5, 10, 18, 0.68);
|
||||
display: grid;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.mobile-sheet-card {
|
||||
max-height: 82vh;
|
||||
overflow-y: auto;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border: 1px solid var(--surface-border);
|
||||
background: color-mix(in srgb, var(--surface-ground) 92%, black 8%);
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.mobile-sheet-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.mobile-sheet-content {
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.mobile-panel-card {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.result-row {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
background: color-mix(in srgb, var(--surface-card) 92%, black 8%);
|
||||
}
|
||||
|
||||
.result-label {
|
||||
display: inline-block;
|
||||
font-size: 0.64rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color-secondary);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.result-grid {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.result-table-head,
|
||||
.result-table-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 4.2rem 6.4rem 4.6rem 2.8rem;
|
||||
column-gap: 0.6rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.result-table-row {
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.result-controls-group {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 0.74rem;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.result-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.result-muted {
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
.result-columns {
|
||||
margin: 0 0 0.35rem;
|
||||
padding: 0.45rem 0.75rem;
|
||||
background: color-mix(in srgb, var(--surface-card) 78%, black 22%);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 0.45rem;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.selection-row {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
background: color-mix(in srgb, var(--surface-card) 95%, black 5%);
|
||||
}
|
||||
|
||||
.selection-header {
|
||||
padding: 0.6rem 0.75rem 0.35rem;
|
||||
}
|
||||
|
||||
.selection-meta {
|
||||
margin-top: 0.1rem;
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.selection-controls {
|
||||
margin: 0;
|
||||
padding: 0.2rem 0.75rem 0.6rem;
|
||||
border-top: 1px solid color-mix(in srgb, var(--surface-border) 70%, transparent);
|
||||
}
|
||||
|
||||
.quality-compact {
|
||||
width: 5.4rem;
|
||||
min-width: 5.4rem;
|
||||
}
|
||||
|
||||
.quality-compact .p-dropdown-label {
|
||||
padding-right: 1.8rem;
|
||||
}
|
||||
|
||||
.quality-compact-main .p-dropdown-label {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.panel-card {
|
||||
border: 1px solid var(--surface-border);
|
||||
box-shadow: 0 10px 28px color-mix(in srgb, black 22%, transparent);
|
||||
}
|
||||
|
||||
.panel-card .p-card-title {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.76rem;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.panel-card .p-card-body {
|
||||
padding: 0.85rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.panel-card .p-card-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.search-panel .p-card-body {
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.app-shell .p-inputtext,
|
||||
.app-shell .p-dropdown,
|
||||
.app-shell .p-multiselect,
|
||||
.app-shell .p-button,
|
||||
.app-shell .p-tag,
|
||||
.app-shell .p-checkbox-label {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.app-shell .p-dropdown-label,
|
||||
.app-shell .p-multiselect-label {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.app-shell,
|
||||
.app-shell .text-sm,
|
||||
.app-shell .text-xs,
|
||||
.app-shell .text-600 {
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.app-shell .p-component,
|
||||
.app-shell .p-tag .p-tag-value,
|
||||
.app-shell .p-dropdown-panel .p-dropdown-items .p-dropdown-item,
|
||||
.app-shell .p-multiselect-panel .p-multiselect-items .p-multiselect-item,
|
||||
.app-shell .p-multiselect-token,
|
||||
.app-shell .p-button .p-button-label,
|
||||
.app-shell .p-inputtext,
|
||||
.app-shell .p-checkbox + label,
|
||||
.app-shell .p-checkbox-label,
|
||||
.app-shell .p-dropdown .p-dropdown-label,
|
||||
.app-shell .p-multiselect .p-multiselect-label {
|
||||
font-size: 0.68rem !important;
|
||||
}
|
||||
|
||||
.app-shell .p-tag {
|
||||
padding: 0.2rem 0.4rem;
|
||||
}
|
||||
|
||||
.app-shell .p-inputtext,
|
||||
.app-shell .p-dropdown .p-dropdown-label,
|
||||
.app-shell .p-multiselect .p-multiselect-label {
|
||||
padding-top: 0.42rem;
|
||||
padding-bottom: 0.42rem;
|
||||
}
|
||||
|
||||
.app-shell .p-dataview-content > .grid {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.app-shell .p-dataview-content > .grid > .col-12 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.app-shell .p-paginator {
|
||||
padding: 0.65rem 0 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.app-shell .p-paginator .p-dropdown {
|
||||
min-width: 5rem;
|
||||
height: 2.2rem;
|
||||
}
|
||||
|
||||
.app-shell .p-paginator .p-dropdown .p-dropdown-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.app-shell .p-paginator .p-dropdown .p-dropdown-trigger {
|
||||
width: 2rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.app-bottom-nav {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.app-brand-subtitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
padding: 0 0.75rem 1.5rem;
|
||||
}
|
||||
|
||||
.app-content-grid {
|
||||
grid-template-areas: "results";
|
||||
}
|
||||
|
||||
.panel-card .p-card-body {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.mobile-sheet-card .panel-card .p-card-body {
|
||||
padding: 0.7rem;
|
||||
}
|
||||
|
||||
.result-table-head {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.result-table-row {
|
||||
grid-template-columns: minmax(0, 40%) minmax(0, 60%);
|
||||
grid-template-areas: "title controls";
|
||||
row-gap: 0;
|
||||
column-gap: 0.7rem;
|
||||
align-items: center;
|
||||
padding: 0.55rem 0.6rem;
|
||||
}
|
||||
|
||||
.result-col-title {
|
||||
grid-area: title;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.result-controls-group {
|
||||
grid-area: controls;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
justify-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.result-col-video,
|
||||
.result-col-ut,
|
||||
.result-col-action {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.result-col-quality {
|
||||
width: 100%;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.result-tags {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.32rem;
|
||||
justify-content: stretch;
|
||||
align-content: start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.quality-compact {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 4.9rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user