mirror of
https://github.com/euzu/tuliprox.git
synced 2026-09-29 04:22:33 +02:00
559 lines
17 KiB
SCSS
559 lines
17 KiB
SCSS
@use './size';
|
|
|
|
:root {
|
|
--mobile-size: size.$mobile-breakpoint;
|
|
--dashboard-mobile-size: size.$dashboard-mobile-breakpoint;
|
|
--sidebar-width-expaned: 270px;
|
|
--sidebar-width-collapsed: 42px;
|
|
--max-view-width: size.$dashboard-mobile-breakpoint;
|
|
--max-table-cell-width: 240px;
|
|
--max-dialog-card-height: 300px;
|
|
--media-size-mobile: 600px;
|
|
--app-header-height: 56px;
|
|
--scrollbar-width: 8px;
|
|
--scrollbar-border-radius: 4px;
|
|
|
|
--gap-small: 0.3rem;
|
|
--gap-default: 0.5rem;
|
|
--gap-large: 1rem;
|
|
--gap-larger: 1.5rem;
|
|
|
|
--padding-micro: 0.2rem;
|
|
--padding-mini: 0.5rem;
|
|
--padding-small: 0.75rem;
|
|
--padding-default: 1rem;
|
|
--padding-large: 1.5rem;
|
|
--padding-larger: 2rem;
|
|
|
|
--margin-micro: 0.2rem;
|
|
--margin-mini: 0.5rem;
|
|
--margin-small: 0.75rem;
|
|
--margin-default: 1rem;
|
|
|
|
--epg-row-height: 4rem;
|
|
--epg-header-height: 2rem;
|
|
--epg-channels-width: 200px;
|
|
|
|
}
|
|
|
|
@media (max-width: size.$mobile-breakpoint) {
|
|
:root {
|
|
--gap-small: 0.2rem;
|
|
--gap-default: 0.3rem;
|
|
--gap-large: 0.5rem;
|
|
--gap-larger: 0.75rem;
|
|
|
|
--padding-micro: 0.2rem;
|
|
--padding-mini: 0.3rem;
|
|
--padding-small: 0.5rem;
|
|
--padding-default: 0.75rem;
|
|
--padding-large: 1rem;
|
|
--padding-larger: 1.25rem;
|
|
|
|
--margin-micro: 0.2rem;
|
|
--margin-mini: 0.3rem;
|
|
--margin-small: 0.5rem;
|
|
--margin-default: 0.75rem;
|
|
|
|
--epg-row-height: 3rem;
|
|
--epg-header-height: 1.5rem;
|
|
--epg-channels-width: 160px;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--primary-color: #124a9b;
|
|
--secondary-color: #f67070;
|
|
|
|
--action-item-background-color: #242427;
|
|
--action-item-color: #ffffff;
|
|
|
|
--text-color: #ffffff;
|
|
--modest-text-color: #A1A1AAFF;
|
|
--background-color: #09090B;
|
|
--input-background-color: var(--action-item-background-color);
|
|
--input-border-color: #454548;
|
|
--input-focus-border-color: #12499a;
|
|
--input-autofill-background-color: #323a48;
|
|
--button-background-color: var(--primary-color);
|
|
--border-color: #222224;
|
|
--menu-text-color: #e2e2e5;
|
|
--menu-icon-color: #707079;
|
|
--menu-item-hover-background-color: var(--action-item-background-color);
|
|
--menu-item-hover-color: var(--action-item-color);
|
|
--menu-text-active-color: var(--primary-color);
|
|
--menu-item-active-background-color: var(--menu-item-hover-background-color);
|
|
--icon-button-hover-color: #8f8f97;
|
|
--card-background-color: #18181b;
|
|
--card-color: var(--modest-text-color);
|
|
--sub-card-background-color: #27272a;
|
|
|
|
--text-button-background-color: var(--action-item-background-color);
|
|
--text-button-color: #ffffff;
|
|
--text-button-border-color: #2F2F31;
|
|
--text-button-hover-color: #ffffff;
|
|
--text-button-hover-background-color: #303032;
|
|
--text-button-primary-background-color: var(--primary-color);
|
|
--text-button-primary-color: #ffffff;
|
|
--text-button-primary-hover-background-color: #2f68be;
|
|
--text-button-primary-hover-color: #ffffff;
|
|
--text-button-secondary-background-color: #e53d3d;
|
|
--text-button-secondary-color: #ffffff;
|
|
--text-button-secondary-hover-background-color: #b02a2a;
|
|
--text-button-secondary-hover-color: #ffffff;
|
|
|
|
--text-button-active-background-color: #36c55a;
|
|
--text-button-active-color: #fdfdfd;
|
|
--text-button-active-hover-background-color: #2c9646;
|
|
--text-button-active-hover-color: #fdfdfd;
|
|
|
|
--toggle-switch-on-background-color: #36c55a;
|
|
--toggle-switch-off-background-color: #3f3f45;
|
|
--toggle-switch-toggle-color: #fdfdfd;
|
|
|
|
--table-header-background-color: #242427;
|
|
--table-card-background-color: #242427;
|
|
--table-alternate-background-color: #1b1b1e;
|
|
|
|
--discord-color: #5764f0;
|
|
--documentation-color: #2b944b;
|
|
--github-color: #ffffff;
|
|
|
|
--app-header-background-color: #18181b;
|
|
--app-header-color: #73d6fe;
|
|
|
|
--pulse-color-1: #837f80;
|
|
--pulse-color-2: #545454;
|
|
|
|
--tag-padding: 0.3rem 0.5rem;
|
|
--tag-border-radius: 0.5rem;
|
|
--tag-border-color: #3a3a3a;
|
|
--tag-color: #e0e0e0;
|
|
--tag-background-color: #2c2f36;
|
|
|
|
--tag-active-color: #49dc7f;
|
|
--tag-active-background-color: #1e2d25;
|
|
--tag-active-border-color: #2b6140;
|
|
|
|
--tag-inactive-color: #6f6f6f;
|
|
--tag-inactive-background-color: #3a3a3a;
|
|
--tag-inactive-border-color: #555;
|
|
|
|
--tag-alt-active-color: #d070e7;
|
|
--tag-alt-active-background-color: #311a38;
|
|
--tag-alt-active-border-color: #5d2f69;
|
|
|
|
--tag-status-expired-color: #efda8f;
|
|
--tag-status-expired-background-color: #393320;
|
|
--tag-status-expired-border-color: #b69e5c;
|
|
|
|
--tag-status-banned-color: #dd7573;
|
|
--tag-status-banned-background-color: #4c3434;
|
|
--tag-status-banned-border-color: #755252;
|
|
|
|
--tag-status-trial-color: #49dcdc;
|
|
--tag-status-trial-background-color: #1e252d;
|
|
--tag-status-trial-border-color: #2b4c61;
|
|
|
|
--tag-status-pending-color: #49dcdc;
|
|
--tag-status-pending-background-color: #1e252d;
|
|
--tag-status-pending-border-color: #2b4c61;
|
|
|
|
--popup-background-color: #313133; //#18181b;
|
|
--popup-shadow: 0 3px 8px #06070a;
|
|
--popup-border-color: #2f2f31;
|
|
--popup-color: #fff;
|
|
//--popup-hover-background-color: #5599f0;
|
|
//--popup-hover-color: #fff;
|
|
|
|
--attention-color: #f67070;
|
|
--warn-color: #b88e22;
|
|
--active-color: #34d399;
|
|
|
|
--output-xtream-color: #06b6d4;
|
|
--output-m3u-color: #10b981;
|
|
--output-hdhomerun-color: #6366f1;
|
|
--output-strm-color: #f43f5e;
|
|
|
|
--tag-live-background-color: #075b41;
|
|
--tag-live-border-color: #10b981;
|
|
--tag-video-background-color: #035b6e;
|
|
--tag-video-border-color: #06b6d4;
|
|
--tag-series-background-color: #3c3f9f;
|
|
--tag-series-border-color: #6366f1;
|
|
|
|
--toastr-success-color: #ffffff;
|
|
--toastr-success-background-color: #53a453;
|
|
--toastr-error-color: #ffffff;
|
|
--toastr-error-background-color: #bc362f;
|
|
--toastr-info-color: #ffffff;
|
|
--toastr-info-background-color: #2f95b3;
|
|
--toastr-warning-color: #ffffff;
|
|
--toastr-warning-background-color: #f69306;
|
|
|
|
--hint-color: #888888;
|
|
--label-color: #73d6fe;
|
|
|
|
--sidebar-toggle-color: #ffffff;
|
|
--sidebar-toggle-hover-color: #47495d;
|
|
--playlist-color: #aeb0b2;
|
|
--hover-border-color: #aaaab0;
|
|
--spinner-color: #ffffff66;
|
|
--spinner-highlight-color: #5599f0;
|
|
|
|
|
|
--tree-count-color: #7b7b7e;
|
|
--tree-hover-background-color: #004db4;
|
|
--tree-hover-color: white;
|
|
--tree-expander-hover-color: white;
|
|
--tool-button-background-color: #434343;
|
|
--tool-button-color: #fff;
|
|
--tool-button-hover-color: #ffffff;
|
|
--tool-button-hover-background-color: #0c8a13;
|
|
|
|
--toolbar-background-color: #282A36;
|
|
--toolbar-button-hover-color: #ffffff;
|
|
--toolbar-button-hover-background-color: #004db4;
|
|
|
|
--ok-color: #21e821;
|
|
|
|
--card-background-color-darker: #1c2026;
|
|
--card-border-color: #47495d;
|
|
|
|
--title-label-color: #6495b1;
|
|
|
|
--border-radius: 8px;
|
|
|
|
--icon-button-border-radius: 4px;
|
|
--icon-button-background-color: var(--button-background-color);
|
|
--icon-button-color: #ffffff;
|
|
--icon-button-hover-background-color: #0d6efd;
|
|
|
|
--icon-button-hover-border-color: #ced9fb;
|
|
|
|
--menu-button-color: #ffffff;
|
|
--menu-button-background-color: #20273344;
|
|
|
|
--menu-button-hover-color: #ffffff;
|
|
--menu-button-hover-background-color: #202733;
|
|
|
|
--menu-button-warn-hover-color: #dd7573;
|
|
--menu-button-warn-hover-background-color: #4c3434;
|
|
|
|
--scrollbar-track-color: #838383;
|
|
--scrollbar-handle-color: #505050;
|
|
|
|
--tabset-background-color: #44475a47; // #282A36;
|
|
--tabset-border-color: #535353;
|
|
--tab-background-color: #44475A;
|
|
--tab-hover-background-color: #2bb249;
|
|
--tab-hover-color: #fdfdfd;
|
|
--tab-active-background-color: #1a672c;
|
|
--tab-active-color: #fdfdfd;
|
|
--tab-active-border-color: #35934d;
|
|
|
|
--table-border-color: #44475a;
|
|
|
|
--checkbox-background-color: #44475A;
|
|
--checkbox-hover-background-color: #006fee;
|
|
--checkbox-checked-background-color: #006fee;
|
|
--checkbox-border-radius: 4px;
|
|
|
|
--option-active-background-color: #50FA7B;
|
|
--option-active-color: #000;
|
|
|
|
--shocase-card-background: #4b4b4b;
|
|
|
|
--breadcrumbs-background-color: #202733;
|
|
--breadcrumb-background-color: #4e545d;
|
|
--breadcrumb-color: #c4c4c4;
|
|
--breadcrumb-active-background-color: #4ad96e;
|
|
--breadcrumb-active-color: #000;
|
|
|
|
--menu-icon-color-update: #A3D8FF;
|
|
--menu-icon-color-user: #0ABAB5;
|
|
--menu-icon-color-api_server: #FF9D23;
|
|
--menu-icon-color-main_config: #FF2DF1;
|
|
--menu-icon-color-status: #F9E400;
|
|
|
|
--code-identifier-color: #569cd6;
|
|
--code-var-access-color: #9cdcfe;
|
|
--code-field-color: #bb8953;
|
|
--code-property-color: #9a652f;
|
|
--code-literal-color: #65a181;
|
|
--code-num-literal-color: #6796ba;
|
|
--code-built-in-function-color: #fac46c;
|
|
--code-reserved-color: #e98863;
|
|
--code-regex-color: #bb8953;
|
|
--code-enum-color: #65a181;
|
|
--code-range-color: #6796ba;
|
|
--code-op-color: #569cd6;
|
|
--code-comparison-background-color: #202429;
|
|
--code-comparison-color: #ffffff;
|
|
--code-bracket-1-color: #569CD6;
|
|
--code-bracket-2-color: #C586C0;
|
|
--code-bracket-3-color: #B5CEA8;
|
|
--code-editor-background-color: #1e1e1e;
|
|
--code-editor-color: #d4d4d4;
|
|
--code-any-match-color: #fa5f2d;
|
|
--code-null-literal-color: #fa5f2d;
|
|
|
|
--toolbar-bg-color: #161b25;
|
|
|
|
--epg-program-background-color: #1a222b; // #57317a; //#31597a;
|
|
--epg-program-color: #ffffff;
|
|
--epg-program-active-background-color: #263140;
|
|
--epg-program-active-color: #ffffff;
|
|
--epg-program-time-color: #707f99;
|
|
--epg-program-active-time-color: #778295;
|
|
}
|
|
|
|
body[data-theme="bright"] {
|
|
--primary-color: #2563eb;
|
|
--secondary-color: #f43f5e;
|
|
|
|
--action-item-background-color: #f3f4f6;
|
|
--action-item-color: #111827;
|
|
|
|
--text-color: #111827;
|
|
--modest-text-color: #6b7280;
|
|
--background-color: #f9fafb;
|
|
|
|
--input-background-color: var(--action-item-background-color);
|
|
--input-border-color: #d1d5db;
|
|
--input-focus-border-color: var(--primary-color);
|
|
--input-autofill-background-color: #f8fafc;
|
|
|
|
--button-background-color: var(--primary-color);
|
|
|
|
--border-color: #e5e7eb;
|
|
--menu-text-color: #374151;
|
|
--menu-icon-color: #9ca3af;
|
|
--menu-item-hover-background-color: #eef2ff;
|
|
--menu-item-hover-color: #111827;
|
|
--menu-text-active-color: var(--primary-color);
|
|
--menu-item-active-background-color: #e0e7ff;
|
|
|
|
--icon-button-hover-color: #374151;
|
|
|
|
--card-background-color: #ffffff;
|
|
--card-color: #374151;
|
|
--sub-card-background-color: #f8fafc;
|
|
|
|
--text-button-background-color: var(--action-item-background-color);
|
|
--text-button-color: #111827;
|
|
--text-button-border-color: #e5e7eb;
|
|
--text-button-hover-color: #111827;
|
|
--text-button-hover-background-color: #e5e7eb;
|
|
|
|
--text-button-primary-background-color: var(--primary-color);
|
|
--text-button-primary-color: #ffffff;
|
|
--text-button-primary-hover-background-color: #3b82f6;
|
|
--text-button-primary-hover-color: #ffffff;
|
|
|
|
--text-button-secondary-background-color: #ef4444;
|
|
--text-button-secondary-color: #ffffff;
|
|
--text-button-secondary-hover-background-color: #f43f5e;
|
|
--text-button-secondary-hover-color: #ffffff;
|
|
|
|
--text-button-active-background-color: #ecfdf5;
|
|
--text-button-active-color: #16a34a;
|
|
--text-button-active-hover-background-color: #ecfdf5;
|
|
--text-button-active-hover-color: #16a34a;
|
|
|
|
--toggle-switch-on-background-color: #22c55e;
|
|
--toggle-switch-off-background-color: #d1d5db;
|
|
--toggle-switch-toggle-color: #ffffff;
|
|
|
|
--table-header-background-color: #f3f4f6;
|
|
--table-card-background-color: #ffffff;
|
|
--table-alternate-background-color: #f8fafc;
|
|
|
|
--discord-color: #5865f2;
|
|
--documentation-color: #22c55e;
|
|
--github-color: #000000;
|
|
|
|
--app-header-background-color: #ffffff;
|
|
--app-header-color: var(--primary-color);
|
|
|
|
--pulse-color-1: #eef2ff;
|
|
--pulse-color-2: #e5e7eb;
|
|
|
|
--tag-padding: 0.3rem 0.5rem;
|
|
--tag-border-radius: 0.5rem;
|
|
--tag-border-color: #e5e7eb;
|
|
--tag-color: #374151;
|
|
--tag-background-color: #f3f4f6;
|
|
|
|
--tag-active-color: #16a34a;
|
|
--tag-active-background-color: #ecfdf5;
|
|
--tag-active-border-color: #86efac;
|
|
|
|
--tag-inactive-color: #9ca3af;
|
|
--tag-inactive-background-color: #f8fafc;
|
|
--tag-inactive-border-color: #e5e7eb;
|
|
|
|
--tag-alt-active-color: #7c3aed;
|
|
--tag-alt-active-background-color: #f3e8ff;
|
|
--tag-alt-active-border-color: #d6bbfb;
|
|
|
|
--tag-status-expired-color: #b88e22;
|
|
--tag-status-expired-background-color: #fffbeb;
|
|
--tag-status-expired-border-color: #f5d0a9;
|
|
|
|
--tag-status-banned-color: #ef4444;
|
|
--tag-status-banned-background-color: #fff1f2;
|
|
--tag-status-banned-border-color: #fecaca;
|
|
|
|
--tag-status-trial-color: #06b6d4;
|
|
--tag-status-trial-background-color: #ecfeff;
|
|
--tag-status-trial-border-color: #cffafe;
|
|
|
|
--tag-status-pending-color: #06b6d4;
|
|
--tag-status-pending-background-color: #ecfeff;
|
|
--tag-status-pending-border-color: #cffafe;
|
|
|
|
--popup-background-color: #ffffff;
|
|
--popup-shadow: 0 3px 8px rgba(14, 20, 30, 0.06);
|
|
--popup-border-color: #e5e7eb;
|
|
--popup-color: #0f172a;
|
|
|
|
--attention-color: #ef4444;
|
|
--warn-color: #f59e0b;
|
|
--active-color: #16a34a;
|
|
|
|
--output-xtream-color: #06b6d4;
|
|
--output-m3u-color: #10b981;
|
|
--output-hdhomerun-color: #6366f1;
|
|
--output-strm-color: #ef4444;
|
|
|
|
--tag-live-background-color: #dcfce7;
|
|
--tag-live-border-color: #10b981;
|
|
--tag-video-background-color: #ecfeff;
|
|
--tag-video-border-color: #06b6d4;
|
|
--tag-series-background-color: #eef2ff;
|
|
--tag-series-border-color: #6366f1;
|
|
|
|
--toastr-success-color: #ffffff;
|
|
--toastr-success-background-color: #16a34a;
|
|
--toastr-error-color: #ffffff;
|
|
--toastr-error-background-color: #ef4444;
|
|
--toastr-info-color: #ffffff;
|
|
--toastr-info-background-color: #3b82f6;
|
|
--toastr-warning-color: #ffffff;
|
|
--toastr-warning-background-color: #f59e0b;
|
|
|
|
--hint-color: #6b7280;
|
|
--label-color: var(--primary-color);
|
|
|
|
--sidebar-toggle-color: #111827;
|
|
--sidebar-toggle-hover-color: #3b82f6;
|
|
--playlist-color: #6b7280;
|
|
--hover-border-color: #cbd5e1;
|
|
--spinner-color: rgba(55, 65, 81, 0.4);
|
|
--spinner-highlight-color: #3b82f6;
|
|
|
|
--tree-count-color: #9ca3af;
|
|
--tree-hover-background-color: #e0f2fe;
|
|
--tree-hover-color: #0369a1;
|
|
--tree-expander-hover-color: #0369a1;
|
|
|
|
--tool-button-background-color: #f3f4f6;
|
|
--tool-button-color: #111827;
|
|
--tool-button-hover-color: #111827;
|
|
--tool-button-hover-background-color: #dbeafe;
|
|
|
|
--toolbar-background-color: #f3f4f6;
|
|
--toolbar-button-hover-color: #111827;
|
|
--toolbar-button-hover-background-color: #e0e7ff;
|
|
|
|
--ok-color: #16a34a;
|
|
|
|
--card-background-color-darker: #f3f6f9;
|
|
--card-border-color: #e5e7eb;
|
|
|
|
--title-label-color: #2563eb;
|
|
|
|
--border-radius: 8px;
|
|
|
|
--icon-button-border-radius: 4px;
|
|
--icon-button-background-color: var(--button-background-color);
|
|
--icon-button-color: #ffffff;
|
|
--icon-button-hover-background-color: #1d4ed8;
|
|
--icon-button-hover-border-color: #93c5fd;
|
|
|
|
--menu-button-color: #111827;
|
|
--menu-button-background-color: #ffffff;
|
|
--menu-button-hover-color: #111827;
|
|
--menu-button-hover-background-color: #e6f0ff;
|
|
|
|
--menu-button-warn-hover-color: #ef4444;
|
|
--menu-button-warn-hover-background-color: #fff1f2;
|
|
|
|
--scrollbar-track-color: #f3f4f6;
|
|
--scrollbar-handle-color: #cbd5e1;
|
|
|
|
--tabset-background-color: #f3f4f6;
|
|
--tabset-border-color: #e5e7eb;
|
|
--tab-background-color: #44475A;
|
|
--tab-hover-background-color: #2bb249;
|
|
--tab-hover-color: #fdfdfd;
|
|
--tab-active-background-color: #22c55e;
|
|
--tab-active-color: #fdfdfd;
|
|
--tab-active-border-color: #35934d;
|
|
|
|
--table-border-color: #e5e7eb;
|
|
|
|
--checkbox-background-color: #ffffff;
|
|
--checkbox-hover-background-color: var(--primary-color);
|
|
--checkbox-checked-background-color: var(--primary-color);
|
|
--checkbox-border-radius: 4px;
|
|
|
|
--option-active-background-color: var(--primary-color);
|
|
--option-active-color: #ffffff;
|
|
|
|
--shocase-card-background: #f3f4f6;
|
|
|
|
--breadcrumbs-background-color: #f3f4f6;
|
|
--breadcrumb-background-color: #e5e7eb;
|
|
--breadcrumb-color: #374151;
|
|
--breadcrumb-active-background-color: #dbeafe;
|
|
--breadcrumb-active-color: #1e3a8a;
|
|
|
|
--menu-icon-color-update: #93c5fd;
|
|
--menu-icon-color-user: #06b6d4;
|
|
--menu-icon-color-api_server: #ffb020;
|
|
--menu-icon-color-main_config: #e879f9;
|
|
--menu-icon-color-status: #f59e0b;
|
|
|
|
--code-identifier-color: #2563eb;
|
|
--code-var-access-color: #3b82f6;
|
|
--code-field-color: #b0753f;
|
|
--code-property-color: #9a652f;
|
|
--code-literal-color: #16a34a;
|
|
--code-num-literal-color: #2563eb;
|
|
--code-built-in-function-color: #d97706;
|
|
--code-reserved-color: #ef4444;
|
|
--code-regex-color: #b0753f;
|
|
--code-enum-color: #16a34a;
|
|
--code-range-color: #2563eb;
|
|
--code-op-color: #2563eb;
|
|
--code-comparison-background-color: #f8fafc;
|
|
--code-comparison-color: #0f172a;
|
|
--code-bracket-1-color: #2563eb;
|
|
--code-bracket-2-color: #7c3aed;
|
|
--code-bracket-3-color: #10b981;
|
|
--code-editor-background-color: #f8fafc;
|
|
--code-editor-color: #0f172a;
|
|
--code-any-match-color: #ef4444;
|
|
--code-null-literal-color: #ef4444;
|
|
|
|
--toolbar-bg-color: #ffffff;
|
|
|
|
--epg-program-background-color: #e5e7eb;
|
|
--epg-program-color: #111827;
|
|
--epg-program-active-background-color: #3b82f6;
|
|
--epg-program-active-color: #ffffff;
|
|
--epg-program-time-color: #6b7280;
|
|
--epg-program-active-time-color: #ffffff;
|
|
} |