mirror of
https://github.com/OpenBB-finance/OpenBB.git
synced 2026-10-29 13:32:08 +00:00
6460b23709
* configure the updater and some fix some macos tahoe css errors * enclosure for title_bar_style on Window build * those should have been added to the commit * test update to 0.6.0 * allow unused mut * update version in tauri.conf * fix versioned release draft * fix windows beforeBundle script * force app restart on update * fix release build * fix latest tag files * latest tag title * try testing for windows ARM * improve build workflow cleanup for cache * actually use the windows-11-arm runner * copy and bundle openssl items directly from runner * we actually need those files as placeholders for linters and unit tests * no need to rebuild assets when converting draft to published * fix verbosity * fix windows openssl dir * converting draft release to published should not run the build workflows * converting draft release to published should not run the build workflows * separate release draft build from publish * release dekstop dispatch * release dekstop dispatch * fix dylibs * undo fix_dylib change and attempt to handle restart on update * move restart exit code up * bump version to test updater restarting * windows updater signature * positional argument..? * arg is --password * try this for mac updater * add message to updater to inform users to start the app manually after update * add toast message for first API run * get windows to open the window after updating..? * cargo clippy * update package locks for vite * fix css thing * version bump for another test * bump for v 1 --------- Co-authored-by: deeleeramone <>
581 lines
14 KiB
CSS
Vendored
581 lines
14 KiB
CSS
Vendored
@import "@openbb/ui-pro/dist/style.css";
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
|
|
* {
|
|
scrollbar-width: auto;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #eaeaea;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-track {
|
|
background: #46464f;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #a2a2a2;
|
|
border-radius: 6px;
|
|
height: 2rem;
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb {
|
|
background: #6d6e74;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: #7f7e7e;
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb:hover {
|
|
background-color: #8d8e94;
|
|
}
|
|
|
|
:root {
|
|
--bg-primary: #ffffff;
|
|
--bg-secondary: #f7f7f9;
|
|
--bg-tertiary: #efeff2;
|
|
--bg-accent: rgb(0, 136, 204, 0.3);
|
|
--bg-toast: rgba(212, 229, 252, 1);
|
|
|
|
--text-primary: #151518;
|
|
--text-primary-inverse: #ffffff;
|
|
--text-secondary: #2c2c32;
|
|
--text-tertiary: #6f6d80;
|
|
--text-muted: rgba(21, 21, 24, 0.35);
|
|
|
|
--ghost-icon: rgba(0, 0, 0, 1);
|
|
--ghost-icon-hover: rgba(0, 0, 0, 0.75);
|
|
--text-accent: #007acc;
|
|
|
|
--border-color: rgba(215, 215, 222, 1);
|
|
--border-outline: #c6c6cc;
|
|
--accent-color: #f0f0f3;
|
|
--border-accent: #c6c6cc;
|
|
--border-modal: rgba(70, 70, 79, 0);
|
|
--button-primary-bg: rgba(0, 136, 204, 1);
|
|
--button-primary-text: #ffffff;
|
|
--button-primary-border: rgba(0, 0, 0, 0.75);
|
|
--button-secondary-border: rgba(215, 215, 222, 1);
|
|
--button-secondary-bg: #f3f3f6;
|
|
--button-neutral-bg: #e3e5e9;
|
|
--button-neutral-bg-hover: rgb(187, 194, 238, 0.25);
|
|
|
|
--tooltip-border: rgba(0, 0, 0, 0.2);
|
|
--tooltip-background: rgba(255, 255, 255, 0.97);
|
|
--info-icon: rgba(138, 138, 144, 1);
|
|
--tab-border-active: #007acc;
|
|
--tag-bg: rgba(90, 89, 97, 0.3);
|
|
--info-icon: rgba(138, 138, 144, 1);
|
|
}
|
|
|
|
.dark {
|
|
--bg-primary: #212124;
|
|
--bg-secondary: rgba(21, 21, 24, 1);
|
|
--bg-tertiary: rgba(31, 30, 35, 1);
|
|
--bg-quartary: rgba(36, 36, 42, 1);
|
|
--bg-accent: rgb(0, 136, 204, 0.3);
|
|
--text-primary: #ffffff;
|
|
--text-primary-inverse: #151518;
|
|
--text-secondary: #EBEBED;
|
|
--text-tertiary: #9793b0;
|
|
--text-muted: rgba(138, 138, 144, 1);
|
|
--ghost-icon: rgba(255, 255, 255, 1);
|
|
--ghost-icon-hover: rgba(255, 255, 255, 0.75);
|
|
--text-accent: rgb(51, 187, 255);
|
|
--border-color: rgba(70, 70, 79, 1);
|
|
--border-outline: rgba(70, 70, 79, 0.5);
|
|
--border-accent: rgba(70, 70, 79, 0.799);
|
|
--border-modal: rgba(70, 70, 79, 0);
|
|
--accent-color: #46464F;
|
|
--button-primary-bg: #e2e2e2;
|
|
--button-primary-text: rgb(21, 21, 21, 1);
|
|
--button-primary-border: rgba(22, 22, 22, 0.799);
|
|
--button-secondary-border: rgba(70, 70, 79, 0.5);
|
|
--button-secondary-bg: rgba(54, 54, 63, 1);
|
|
--button-secondary-hover: rgba(42, 42, 48, 1);
|
|
--button-neutral-bg: rgb(0, 136, 204, 1);
|
|
--button-neutral-bg-hover: rgb(36, 68, 100, 1);
|
|
--tooltip-border: rgba(255, 255, 255, 0.2);
|
|
--tooltip-background: rgba(42, 42, 49, 1);
|
|
--tab-border-active: rgb(51, 187, 255);
|
|
--tag-bg: rgba(90, 89, 97, 0.3);
|
|
--dropdown-bg: rgba(36, 36, 42, 1);
|
|
--info-icon: rgba(138, 138, 144, 1);
|
|
--bg-toast: rgba(212, 229, 252, 1);
|
|
}
|
|
|
|
.info-icon {
|
|
background-color: none;
|
|
color: var(--info-icon);
|
|
border: 1.2px solid var(--info-icon);
|
|
}
|
|
|
|
.bg-theme-tag {
|
|
background-color: var(--tag-bg);
|
|
}
|
|
|
|
.bg-theme-toast {
|
|
background-color: var(--bg-toast);
|
|
}
|
|
|
|
.button-toast,
|
|
.button-toast:focus,
|
|
.button-toast:focus-visible,
|
|
.dark .button-toast,
|
|
.dark .button-toast:focus,
|
|
.dark .button-toast:focus-visible {
|
|
background-color: rgb(0, 136, 204, 1);
|
|
color: #ffffff;
|
|
padding: 8px;
|
|
border-radius: 0.375rem;
|
|
|
|
}
|
|
|
|
.button-toast:hover,
|
|
.dark .button-toast:hover {
|
|
background-color: rgb(0, 136, 204, 0.85);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.toast-container, .dark .toast-container {
|
|
background-color: var(--bg-toast);
|
|
border-radius: 0.5rem;
|
|
color: var(--text-primary-inverse);
|
|
padding-top: 10px;
|
|
padding-bottom: 20px;
|
|
padding-left: 20px;
|
|
padding-right: 0;
|
|
font-weight: medium;
|
|
box-shadow: 0 10px 12px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.toast-info-icon {
|
|
color: var(--button-neutral-bg);
|
|
width: 25px;
|
|
height: 25px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* UTILITY CLASSES */
|
|
.text-theme-accent {
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.tab-border-active {
|
|
border-bottom: 2px solid var(--tab-border-active);
|
|
}
|
|
|
|
.tab-border-active:focus, .tab-border-active:focus-visible {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.bg-theme-accent {
|
|
background-color: var(--bg-accent);
|
|
}
|
|
|
|
.bg-theme-quartary {
|
|
background-color: var(--bg-quartary);
|
|
}
|
|
|
|
.bg-theme-neutral {
|
|
background-color: var(--button-neutral-bg);
|
|
}
|
|
|
|
.dark .button-bg-accent, .button-bg-accent {
|
|
background-color: var(--text-accent);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.button-outline {
|
|
@apply border border-theme-outline rounded-sm;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.button-outline:hover,
|
|
.button-outline:focus,
|
|
.button-outline:focus-visible,
|
|
.button-outline:active {
|
|
background-color: var(--button-secondary-hover);
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.dark .button-outline:hover,
|
|
.dark .button-outline:focus,
|
|
.dark .button-outline:focus-visible,
|
|
.dark .button-outline:active,
|
|
.button-outline:focus,
|
|
.button-outline:focus-visible {
|
|
background-color: var(--button-secondary-hover);
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Theme utility classes */
|
|
.bg-theme-primary { background-color: var(--bg-primary); }
|
|
.bg-theme-secondary { background-color: var(--bg-secondary); }
|
|
.bg-theme-tertiary { background-color: var(--bg-tertiary); }
|
|
.text-theme-primary { color: var(--text-primary); }
|
|
.text-theme-secondary { color: var(--text-secondary); }
|
|
.text-theme-tertiary { color: var(--text-tertiary); }
|
|
.text-theme-muted { color: var(--text-muted); }
|
|
.text-theme-accent { color: var(--text-accent); }
|
|
.border-theme { border-color: var(--border-color); }
|
|
.border-theme-outline { border-color: var(--border-outline); }
|
|
.border-theme-accent { border-color: var(--border-accent); }
|
|
.border-theme-modal { border-color: var(--border-modal); }
|
|
.border-theme-radio { border-color: var(--text-accent); }
|
|
/* Tooltip */
|
|
.tooltip-theme, .dark .tooltip-theme{
|
|
@apply shadow-lg;
|
|
background-color: var(--tooltip-background);
|
|
color: var(--text-primary);
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 0.125rem;
|
|
border: 0.25px solid var(--tooltip-border);
|
|
line-height: 1.25; /* 20px */
|
|
margin-top: 0.5rem;
|
|
margin-left: 1rem;
|
|
margin-right: 1.5rem;
|
|
margin-bottom: 0.5rem;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* Base button styles */
|
|
.button-base {
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 0.375rem;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Stop button */
|
|
.button-stop {
|
|
background-color: #ff0000c6;
|
|
color: var(--text-primary);
|
|
border: 1px solid transparent;
|
|
outline: none;
|
|
}
|
|
|
|
.dark .button-stop {
|
|
background-color: #ff0000c6;
|
|
color: var(--text-primary);
|
|
border: 1px solid transparent;
|
|
outline: none;
|
|
}
|
|
|
|
.dark .button-stop:hover, .dark .button-stop:focus, .dark .button-stop:focus-visible {
|
|
background-color: #ff0000a1;
|
|
box-shadow: none !important
|
|
}
|
|
|
|
body:not(.dark) .button-stop:hover,
|
|
body:not(.dark) .button-stop:focus,
|
|
body:not(.dark) .button-stop:focus-visible {
|
|
background-color: #ff0000 !important;
|
|
box-shadow: none !important;
|
|
outline: none;
|
|
}
|
|
|
|
/* Primary button - theme */
|
|
.button-primary,
|
|
.dark .button-primary {
|
|
color: var(--button-primary-text);
|
|
background-color: var(--button-primary-bg);
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.button-primary:disabled, .dark .button-primary:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
outline: none;
|
|
}
|
|
|
|
/* Secondary button */
|
|
|
|
.button-secondary, .dark .button-secondary {
|
|
border: none;
|
|
background-color: var(--button-secondary-bg);
|
|
color: var(--text-secondary);
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
|
|
.button-secondary:hover,
|
|
.button-secondary:focus,
|
|
.button-secondary:focus-visible,
|
|
.dark .button-secondary:hover,
|
|
.dark .button-secondary:focus,
|
|
.dark .button-secondary:focus-visible {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
background-color: var(--button-secondary-hover);
|
|
}
|
|
|
|
.button-secondary:disabled {
|
|
border-color: var(--text-muted);
|
|
color: var(--text-muted);
|
|
cursor: not-allowed;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Neutral button */
|
|
.button-neutral, .dark .button-neutral {
|
|
background-color: var(--button-neutral-bg);
|
|
color: var(--text-primary);
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.button-neutral:hover,
|
|
.button-neutral:focus,
|
|
.button-neutral:focus-visible,
|
|
.dark .button-neutral:hover,
|
|
.dark .button-neutral:focus,
|
|
.dark .button-neutral:focus-visible {
|
|
background-color: var(--button-neutral-bg-hover);
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Danger button style */
|
|
.button-danger {
|
|
background-color: #ef4444;
|
|
color: var(--text-primary);
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.button-danger:hover {
|
|
background-color: #dc2626;
|
|
outline: none;
|
|
}
|
|
|
|
.button-danger:active, .button-danger:focus, .button-danger:focus-visible {
|
|
background-color: #b91c1c;
|
|
outline: none;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.button-danger:disabled {
|
|
background-color: #fca5a5;
|
|
cursor: not-allowed;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Ghost button style */
|
|
.button-ghost, .dark .button-ghost {
|
|
background-color: transparent;
|
|
color: var(--ghost-icon);
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.button-ghost:focus, .button-ghost:focus-visible {
|
|
color: var(--ghost-icon-hover);
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.button-ghost:hover, .dark .button-ghost:hover, .text-hover{
|
|
color: var(--ghost-icon-hover);
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Small size buttons */
|
|
.button-sm {
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Alert styles */
|
|
.alert-success {
|
|
@apply mt-4 p-4 rounded-md;
|
|
background-color: rgba(209, 250, 229, 1);
|
|
border: 1px solid #10b981;
|
|
color: #065f46;
|
|
}
|
|
|
|
.dark .alert-success {
|
|
background-color: rgba(6, 95, 70, 0.3);
|
|
border-color: #059669;
|
|
color: #6ee7b7;
|
|
}
|
|
|
|
/* ============================================
|
|
FORM ELEMENTS
|
|
============================================ */
|
|
input[type="text"], input[type="password"], .dark input[type="text"], .dark input[type="password"], .dark textarea {
|
|
@apply border border-theme rounded-md;
|
|
background-color: var(--bg-theme-primary);
|
|
color: var(--text-primary);
|
|
padding: 0.5rem;
|
|
font-size: 0.875rem; /* 14px */
|
|
line-height: 0.25; /* 20px */
|
|
outline: var(--border-color);
|
|
}
|
|
|
|
/* Focus state for text form entry */
|
|
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
|
|
border-color: var(--accent-color);
|
|
outline: none;
|
|
}
|
|
|
|
/* Disabled state for text form entry */
|
|
input[type="text"]:disabled, textarea:disabled {
|
|
background-color: var(--bg-tertiary);
|
|
color: var(--text-muted);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
input[type="number"] + div button:focus,
|
|
input[type="number"] + div button:focus-visible {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Directory input styles */
|
|
.directory-input {
|
|
@apply border border-theme rounded-md;
|
|
background-color: var(--bg-theme-primary);
|
|
color: var(--text-primary);
|
|
padding: 0.5rem;
|
|
font-size: 0.875rem; /* 14px */
|
|
line-height: 0.25; /* 20px */
|
|
outline: var(--border-color);
|
|
}
|
|
|
|
/* Focus state for input fields */
|
|
.directory-input:focus {
|
|
border-color: var(--border-accent); /* Highlight border on focus */
|
|
outline: none; /* Remove default outline */
|
|
}
|
|
|
|
/* Disabled state for input fields */
|
|
.directory-input:disabled {
|
|
background-color: var(--bg-tertiary, #e5e7eb); /* Muted background for disabled state */
|
|
color: var(--text-muted, #9ca3af); /* Muted text color */
|
|
cursor: not-allowed; /* Show not-allowed cursor */
|
|
}
|
|
|
|
.checkbox, .checkbox-theme {
|
|
appearance: none;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border: 1px solid var(--border-accent);
|
|
border-radius: 0.15rem;
|
|
background-color: transparent; /* transparent when not checked */
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.checkbox:checked, .checkbox-theme:checked {
|
|
background-color: var(--button-neutral-bg);
|
|
border-color: var(--button-neutral-bg)
|
|
}
|
|
|
|
.checkbox-theme:focus, .checkbox:focus {
|
|
outline: none;
|
|
border: 1px solid var(--text-primary);
|
|
}
|
|
|
|
.checkbox:checked::after,
|
|
.checkbox-theme:checked::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 0.35rem;
|
|
height: 0.65rem;
|
|
border-right: 2px solid var(--text-primary);
|
|
border-bottom: 2px solid var(--text-primary);
|
|
transform: translate(-50%, -60%) rotate(45deg);
|
|
}
|
|
|
|
.checkbox.indeterminate, .checkbox-theme.indeterminate {
|
|
background-color: var(--button-neutral-bg);
|
|
border-color: var(--button-neutral-bg);
|
|
}
|
|
|
|
.checkbox.indeterminate::after,
|
|
.checkbox-theme.indeterminate::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 0.5rem;
|
|
height: 2px;
|
|
background-color: var(--text-primary);
|
|
transform: translate(-50%, -50%);
|
|
border: none;
|
|
}
|
|
/* ============================================
|
|
START/STOP BUTTON
|
|
============================================ */
|
|
.button-startstop {
|
|
@apply flex items-center justify-center px-2 py-1 rounded text-theme-primary button-secondary;
|
|
}
|
|
|
|
.button-startstop.running {
|
|
background-color: #ff4444;
|
|
}
|
|
|
|
.button-startstop.stopped, .dark .button-startstop.stopped {
|
|
background-color: var(--button-secondary-bg);
|
|
}
|
|
|
|
.button-startstop.stopped:hover, .dark .button-startstop.stopped:hover {
|
|
background-color: #1dc523;
|
|
outline: none;
|
|
}
|
|
|
|
.dark .button-startstop.running {
|
|
@apply bg-red-600 hover:bg-red-700 text-theme-primary;
|
|
}
|
|
|
|
.dark .button-startstop.processing {
|
|
@apply opacity-50 cursor-not-allowed;
|
|
}
|
|
|
|
.button-startstop:focus.focus-visible {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Hide spinner buttons on number inputs */
|
|
input[type=number]::-webkit-inner-spin-button,
|
|
input[type=number]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
.ext-actions {
|
|
opacity: 0;
|
|
transition: opacity 0ms;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ext-row:hover .ext-actions {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
} |