feat: release OpsXShell 2.1.0 native Tauri edition
This commit is contained in:
Logan.Li committed
1 parent
e9a0d21758
commit
a3dba0c6ed
311 files changed
+31748
-14897
No files matched your search
+364
-10
@@ -2,6 +2,36 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* ── Bundled Nerd Font (Powerline / Oh-My-Zsh / p10k glyphs) ── */
|
||||
@font-face {
|
||||
font-family: 'MesloLGS NF';
|
||||
src: url('/fonts/MesloLGS NF Regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'MesloLGS NF';
|
||||
src: url('/fonts/MesloLGS NF Bold.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'MesloLGS NF';
|
||||
src: url('/fonts/MesloLGS NF Italic.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'MesloLGS NF';
|
||||
src: url('/fonts/MesloLGS NF Bold Italic.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
* OpsXShell v1.4.0 — Professional Theme System
|
||||
*
|
||||
@@ -39,13 +69,18 @@
|
||||
--color-content-tertiary: #94a3b8;
|
||||
--color-content-inverse: #0f172a;
|
||||
|
||||
/* Border */
|
||||
--color-border: #1e293b;
|
||||
--color-border-subtle: #1e293b;
|
||||
--color-border-default: #334155;
|
||||
--color-border-strong: #475569;
|
||||
/* Border — soft hairlines (not bright slate blocks) */
|
||||
--color-border: rgba(148, 163, 184, 0.08);
|
||||
--color-border-subtle: rgba(148, 163, 184, 0.06);
|
||||
--color-border-default: rgba(148, 163, 184, 0.10);
|
||||
--color-border-strong: rgba(148, 163, 184, 0.16);
|
||||
--color-border-focus: #3b82f6;
|
||||
|
||||
/* Legacy border-dark-* remaps (components still use dark-600/700 borders) */
|
||||
--hairline-soft: rgba(148, 163, 184, 0.06);
|
||||
--hairline: rgba(148, 163, 184, 0.10);
|
||||
--hairline-strong: rgba(148, 163, 184, 0.16);
|
||||
|
||||
/* Accent */
|
||||
--color-accent-blue: #3b82f6;
|
||||
--color-accent-blue-hover: #60a5fa;
|
||||
@@ -84,6 +119,79 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Light theme hairlines (useTheme also sets these via tokens) */
|
||||
[data-theme='light'] {
|
||||
--color-border: rgba(15, 23, 42, 0.06);
|
||||
--color-border-subtle: rgba(15, 23, 42, 0.04);
|
||||
--color-border-default: rgba(15, 23, 42, 0.08);
|
||||
--color-border-strong: rgba(15, 23, 42, 0.12);
|
||||
--hairline-soft: rgba(15, 23, 42, 0.05);
|
||||
--hairline: rgba(15, 23, 42, 0.08);
|
||||
--hairline-strong: rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
/*
|
||||
* Soften legacy Tailwind border-dark-* / divide-dark-* classes.
|
||||
* Surface colors (bg-dark-*) stay unchanged — only border-color is remapped.
|
||||
*/
|
||||
@layer utilities {
|
||||
.border-dark-900,
|
||||
.border-dark-800 {
|
||||
border-color: var(--hairline-soft) !important;
|
||||
}
|
||||
.border-dark-700 {
|
||||
border-color: var(--hairline) !important;
|
||||
}
|
||||
.border-dark-600 {
|
||||
border-color: var(--hairline-strong) !important;
|
||||
}
|
||||
|
||||
.border-dark-700\/20,
|
||||
.border-dark-700\/30,
|
||||
.border-dark-600\/30,
|
||||
.border-dark-800\/40,
|
||||
.border-dark-800\/50 {
|
||||
border-color: var(--hairline-soft) !important;
|
||||
}
|
||||
.border-dark-700\/35,
|
||||
.border-dark-700\/40,
|
||||
.border-dark-700\/45,
|
||||
.border-dark-700\/50,
|
||||
.border-dark-700\/60,
|
||||
.border-dark-700\/70,
|
||||
.border-dark-600\/40,
|
||||
.border-dark-600\/50,
|
||||
.border-dark-600\/60 {
|
||||
border-color: var(--hairline) !important;
|
||||
}
|
||||
.border-dark-600\/70,
|
||||
.border-dark-600\/80,
|
||||
.border-dark-500 {
|
||||
border-color: var(--hairline-strong) !important;
|
||||
}
|
||||
|
||||
/* SFTP / list row separators — even softer */
|
||||
.border-b.border-dark-700\/20,
|
||||
.border-t.border-dark-700\/20 {
|
||||
border-color: var(--hairline-soft) !important;
|
||||
}
|
||||
|
||||
.divide-dark-700\/20 > :not([hidden]) ~ :not([hidden]),
|
||||
.divide-dark-700\/30 > :not([hidden]) ~ :not([hidden]),
|
||||
.divide-dark-700\/35 > :not([hidden]) ~ :not([hidden]),
|
||||
.divide-dark-700\/40 > :not([hidden]) ~ :not([hidden]),
|
||||
.divide-dark-700\/50 > :not([hidden]) ~ :not([hidden]),
|
||||
.divide-dark-600 > :not([hidden]) ~ :not([hidden]),
|
||||
.divide-dark-700 > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: var(--hairline-soft) !important;
|
||||
}
|
||||
|
||||
.ring-dark-700,
|
||||
.ring-dark-600 {
|
||||
--tw-ring-color: var(--hairline) !important;
|
||||
}
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
@@ -100,13 +208,34 @@ html, body {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Window chrome utilities */
|
||||
.drag {
|
||||
/* Window chrome utilities
|
||||
* Tauri: drag region must be large enough to move the window.
|
||||
* Interactive controls inside drag areas MUST set no-drag.
|
||||
*/
|
||||
.drag,
|
||||
.titlebar-drag {
|
||||
-webkit-app-region: drag;
|
||||
app-region: drag;
|
||||
}
|
||||
|
||||
.no-drag {
|
||||
.no-drag,
|
||||
.titlebar-no-drag {
|
||||
-webkit-app-region: no-drag;
|
||||
app-region: no-drag;
|
||||
}
|
||||
|
||||
/* Buttons/inputs inside drag regions stay clickable */
|
||||
.titlebar-drag button,
|
||||
.titlebar-drag a,
|
||||
.titlebar-drag input,
|
||||
.titlebar-drag select,
|
||||
.titlebar-drag textarea,
|
||||
.titlebar-drag [role='button'],
|
||||
.drag button,
|
||||
.drag a,
|
||||
.drag input {
|
||||
-webkit-app-region: no-drag;
|
||||
app-region: no-drag;
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
@@ -228,10 +357,235 @@ a:focus:not(:focus-visible) {
|
||||
|
||||
/* Button press feedback */
|
||||
button:active:not(:disabled) {
|
||||
transform: scale(0.97);
|
||||
transform: scale(0.98);
|
||||
}
|
||||
button {
|
||||
transition: all 0.15s ease;
|
||||
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
|
||||
}
|
||||
|
||||
/* ── Form controls (use plain CSS: CSS-var colors don't support /opacity in @apply) ── */
|
||||
.ui-label {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 0.375rem;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
.ui-input,
|
||||
.ui-input-sm,
|
||||
.ui-select,
|
||||
.ui-textarea,
|
||||
.ui-select-pill {
|
||||
width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
background-color: var(--color-surface-base);
|
||||
border: 1px solid var(--color-border-default);
|
||||
color: var(--color-content-primary);
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.ui-input,
|
||||
.ui-select,
|
||||
.ui-textarea {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.ui-input-sm {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.ui-input::placeholder,
|
||||
.ui-input-sm::placeholder,
|
||||
.ui-textarea::placeholder {
|
||||
color: var(--color-placeholder);
|
||||
}
|
||||
|
||||
.ui-input:focus,
|
||||
.ui-input-sm:focus,
|
||||
.ui-select:focus,
|
||||
.ui-textarea:focus,
|
||||
.ui-select-pill:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-accent-blue);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
|
||||
}
|
||||
|
||||
.ui-input:disabled,
|
||||
.ui-input-sm:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.ui-select {
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.ui-textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
|
||||
line-height: 1.625;
|
||||
}
|
||||
|
||||
.ui-section {
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid var(--color-border-default);
|
||||
background-color: var(--color-surface-raised);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.ui-section-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
|
||||
.ui-divider {
|
||||
border-top: 1px solid var(--color-border-default);
|
||||
}
|
||||
|
||||
.ui-icon-box {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
background-color: rgba(59, 130, 246, 0.12);
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
color: var(--color-accent-blue);
|
||||
}
|
||||
|
||||
.ui-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
background-color: var(--color-surface-overlay);
|
||||
color: var(--color-text-muted);
|
||||
border: 1px solid var(--color-border-default);
|
||||
}
|
||||
|
||||
.ui-nav-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.625rem 0.75rem;
|
||||
border-radius: 0.75rem;
|
||||
text-align: left;
|
||||
transition: background-color 0.15s ease, color 0.15s ease;
|
||||
color: var(--color-text-muted);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.ui-nav-item:hover {
|
||||
background-color: var(--color-surface-overlay);
|
||||
color: var(--color-content-primary);
|
||||
}
|
||||
|
||||
.ui-nav-item-active {
|
||||
background-color: rgba(59, 130, 246, 0.12);
|
||||
color: var(--color-content-primary);
|
||||
border-color: rgba(59, 130, 246, 0.25);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.launcher-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid var(--color-border-default);
|
||||
background: var(--color-surface-raised);
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
color: var(--color-content-primary);
|
||||
}
|
||||
|
||||
.launcher-card:hover,
|
||||
.launcher-row:hover {
|
||||
border-color: rgba(59, 130, 246, 0.45);
|
||||
background: var(--color-surface-overlay);
|
||||
}
|
||||
|
||||
.launcher-card span,
|
||||
.launcher-row span {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.launcher-card strong,
|
||||
.launcher-row strong {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-content-primary);
|
||||
}
|
||||
|
||||
.launcher-card small,
|
||||
.launcher-row small {
|
||||
margin-top: 0.125rem;
|
||||
font-size: 0.625rem;
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
|
||||
.launcher-row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
border-radius: 0.625rem;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.625rem 0.75rem;
|
||||
color: var(--color-content-primary);
|
||||
}
|
||||
|
||||
.launcher-badge {
|
||||
display: inline-flex !important;
|
||||
flex-direction: row !important;
|
||||
flex-shrink: 0;
|
||||
border-radius: 0.375rem;
|
||||
background: var(--color-surface-overlay);
|
||||
padding: 0.125rem 0.375rem;
|
||||
font-size: 0.625rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Pill select — compact control on the right */
|
||||
.ui-select-pill {
|
||||
width: auto;
|
||||
max-width: 200px;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
padding: 0.375rem 2rem 0.375rem 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
border-radius: 0.75rem;
|
||||
background-color: var(--color-surface-base);
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.6rem center;
|
||||
}
|
||||
|
||||
/* Drawer enter from right */
|
||||
@keyframes slideInRightDrawer {
|
||||
from { transform: translateX(100%); opacity: 0.6; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
.animate-slide-in-right {
|
||||
animation: slideInRightDrawer 0.22s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
/* Skeleton shimmer */
|
||||
|
||||
Reference in new issue
Block a user