First Public Release!
This commit is contained in:
AshiePleb
@@ -0,0 +1,346 @@
|
||||
/* HEVC Dashboard styling overrides */
|
||||
:root {
|
||||
--bg: #000000;
|
||||
--panel: rgba(17, 17, 17, 0.30);
|
||||
--panel-soft: rgba(10, 10, 10, 0.78);
|
||||
--border: rgba(39, 39, 42, 0.95);
|
||||
--border-strong: rgba(63, 63, 70, 0.95);
|
||||
--text: #f4f4f5;
|
||||
--muted: #71717a;
|
||||
--accent: #10b981;
|
||||
--danger: #fb7185;
|
||||
--shadow: none;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
color: var(--text);
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #2b2b31;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #40404a;
|
||||
}
|
||||
|
||||
.dashboard-shell {
|
||||
width: min(100%, 1640px);
|
||||
padding-left: clamp(12px, 1.6vw, 20px);
|
||||
padding-right: clamp(12px, 1.6vw, 20px);
|
||||
padding-top: clamp(10px, 1.2vw, 16px);
|
||||
padding-bottom: clamp(10px, 1.2vw, 16px);
|
||||
}
|
||||
|
||||
.surface {
|
||||
background: rgba(17, 17, 17, 0.30);
|
||||
border: 1px solid rgba(39, 39, 42, 0.80);
|
||||
box-shadow: none;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.surface-soft {
|
||||
background: rgba(12, 12, 12, 0.86);
|
||||
border-color: rgba(39, 39, 42, 0.75);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
min-height: 92px;
|
||||
}
|
||||
|
||||
.dashboard-panel,
|
||||
.dashboard-config {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dashboard-panel-head,
|
||||
.panel-head {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.dashboard-config-grid > * {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dashboard-chip,
|
||||
.dashboard-status {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.dashboard-shell input[type='text'],
|
||||
.dashboard-shell input[type='number'],
|
||||
.dashboard-shell select {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
background: #050505;
|
||||
border: 1px solid rgba(63, 63, 70, 0.95);
|
||||
color: #e5e7eb;
|
||||
border-radius: 12px;
|
||||
padding: 0.56rem 0.72rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.1rem;
|
||||
outline: none;
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
|
||||
}
|
||||
|
||||
.exclude-shell {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
background: #050505;
|
||||
border: 1px solid rgba(63, 63, 70, 0.95);
|
||||
color: #e5e7eb;
|
||||
border-radius: 12px;
|
||||
padding: 0.35rem 0.5rem;
|
||||
min-height: 36px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
align-items: center;
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
|
||||
}
|
||||
|
||||
.exclude-shell:focus-within {
|
||||
border-color: rgba(163, 163, 163, 0.95);
|
||||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.exclude-shell-input {
|
||||
min-height: 20px;
|
||||
padding: 0.15rem 0.1rem;
|
||||
}
|
||||
|
||||
.panel-button {
|
||||
width: 100%;
|
||||
min-height: 2.15rem;
|
||||
padding: 0.45rem 0.75rem;
|
||||
border-radius: 0.9rem;
|
||||
font-size: 0.65rem;
|
||||
line-height: 1rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
border: 1px solid rgba(63, 63, 70, 0.95);
|
||||
background: #050505;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.panel-button:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.panel-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.panel-button-small {
|
||||
width: auto;
|
||||
min-width: 3rem;
|
||||
padding-left: 0.7rem;
|
||||
padding-right: 0.7rem;
|
||||
}
|
||||
|
||||
.panel-button-primary {
|
||||
background: #f4f4f5;
|
||||
color: #000;
|
||||
border-color: #e4e4e7;
|
||||
}
|
||||
|
||||
.panel-button-success {
|
||||
background: #10b981;
|
||||
color: #fff;
|
||||
border-color: rgba(16, 185, 129, 0.75);
|
||||
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.18);
|
||||
}
|
||||
|
||||
.panel-button-neutral {
|
||||
background: #262626;
|
||||
color: #e5e7eb;
|
||||
border-color: rgba(63, 63, 70, 0.95);
|
||||
}
|
||||
|
||||
.panel-button-danger {
|
||||
background: rgba(127, 29, 29, 0.18);
|
||||
color: #fca5a5;
|
||||
border-color: rgba(127, 29, 29, 0.6);
|
||||
}
|
||||
|
||||
.panel-button-muted {
|
||||
background: #090909;
|
||||
color: #71717a;
|
||||
border-color: rgba(63, 63, 70, 0.9);
|
||||
}
|
||||
|
||||
.dashboard-shell input[type='text']::placeholder,
|
||||
.dashboard-shell input[type='number']::placeholder {
|
||||
color: rgba(148, 163, 184, 0.45);
|
||||
}
|
||||
|
||||
.dashboard-shell input[type='text']:focus,
|
||||
.dashboard-shell input[type='number']:focus,
|
||||
.dashboard-shell select:focus {
|
||||
border-color: rgba(163, 163, 163, 0.95);
|
||||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.dashboard-shell select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
background-image: none;
|
||||
padding-right: 2.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select-shell {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.select-shell::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0.5rem 0.78rem 0.5rem auto;
|
||||
width: 1.3rem;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(180deg, rgba(212, 212, 216, 0.84), rgba(212, 212, 216, 0.50));
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.select-shell select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.select-chevron {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-card {
|
||||
min-height: 72px;
|
||||
}
|
||||
|
||||
.toggle-copy {
|
||||
max-width: calc(100% - 3.1rem);
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
width: 2.55rem;
|
||||
height: 1.28rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toggle-switch::after {
|
||||
width: 0.95rem;
|
||||
height: 0.95rem;
|
||||
}
|
||||
|
||||
.dashboard-shell input[type='number'] {
|
||||
appearance: textfield;
|
||||
}
|
||||
|
||||
.dashboard-shell input[type='number']::-webkit-inner-spin-button,
|
||||
.dashboard-shell input[type='number']::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dashboard-shell button {
|
||||
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease, opacity 160ms ease;
|
||||
}
|
||||
|
||||
.dashboard-shell button:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.dashboard-shell button:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.is-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.recent-pane,
|
||||
.logs-pane {
|
||||
scrollbar-color: #2f2f38 transparent;
|
||||
}
|
||||
|
||||
.config-panel {
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.config-panel {
|
||||
max-height: calc(100vh - 17rem);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.logs-pane {
|
||||
height: 148px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1279px) {
|
||||
.dashboard-shell {
|
||||
width: min(100%, 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
.dashboard-shell {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.dashboard-shell input[type='text'],
|
||||
.dashboard-shell input[type='number'],
|
||||
.dashboard-shell select {
|
||||
border-radius: 12px;
|
||||
padding: 0.52rem 0.7rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.toggle-card {
|
||||
min-height: 72px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user