OneBot: Leantime 改造版源码（BOM/Univer 表格/AI 接管/品牌替换等）
This commit is contained in:
wangruiguo
612
public/theme/minimal/css/dark.css
Normal file
612
public/theme/minimal/css/dark.css
Normal file
@@ -0,0 +1,612 @@
|
||||
:root {
|
||||
|
||||
--accent1: hsla(198, 100%, 32%, 1);
|
||||
--accent1-hsl: 199, 100%, 20%;
|
||||
--accent1-hover: #404040;
|
||||
--accent1-color: #fff;
|
||||
--focus-ring-color: rgba(102, 179, 255, 0.7);
|
||||
|
||||
--accent2: hsla(168, 100%, 33%, 1);
|
||||
--accent2-hsl: 168, 100%, 33%;
|
||||
--accent2-hover: #404040;
|
||||
--accent2-color: #fff;
|
||||
|
||||
--nav-link-color: #fff;
|
||||
--header-nav-link-color: #fff;
|
||||
|
||||
--tab-background: #404040;
|
||||
--tab-color: var(--accent1);
|
||||
--tab-active-background: #404040;
|
||||
--tab-active-color: #fff;
|
||||
|
||||
--primary-content-bg-opacity: 0.4;
|
||||
|
||||
--main-titles-color: #fff;
|
||||
|
||||
--primary-background: #404040;
|
||||
--secondary-background: #292929;
|
||||
|
||||
--layered-background: #1f1f1f;
|
||||
--light-layered-background:#404040;
|
||||
|
||||
--primary-font-color: #fff;
|
||||
--secondary-font-color: #fff;
|
||||
|
||||
--neutral: #141414;
|
||||
--solid-neutral:#292929;
|
||||
--neutral-background: #727272;
|
||||
|
||||
--col-title-bg: #141414;
|
||||
--col-content-bg: #1f1f1f;
|
||||
--col-hover-bg: #404040;
|
||||
--col-row-striped:#404040;
|
||||
|
||||
--primary-color: var(--accent1);
|
||||
--secondary-color: var(--accent2);
|
||||
|
||||
--main-bg: var(--primary-background);
|
||||
--left-panel-bg: transparent;
|
||||
--content-bg: var(--secondary-background);
|
||||
|
||||
--glass-blur: blur( 4px );
|
||||
--glass-background:var(--secondary-background);
|
||||
--glass-border: 1px solid rgba(0,0,0,0.3);
|
||||
|
||||
--main-action-bg: var(--accent1);
|
||||
--main-action-color: var(--accent1-color);
|
||||
--main-action-hover-bg: var(--accent1-hover);
|
||||
--main-action-hover-color: var(--accent1-color);
|
||||
|
||||
--secondary-action-bg: var(--primary-background);
|
||||
--secondary-action-color: var(--primary-font-color);
|
||||
--secondary-action-hover-bg: var(--accent2-hover);
|
||||
--secondary-action-hover-color: var(--accent2-color);
|
||||
|
||||
--main-menu-link-bg: var(--secondary-background);
|
||||
--main-menu-link-color: var(--primary-font-color);
|
||||
|
||||
--main-menu-link-hover-bg: #1f1f1f;
|
||||
--main-menu-link-hover-color: #ffffff;
|
||||
|
||||
--main-menu-overlayed-link-hover-bg: rgba(1, 1, 1, 0.4);
|
||||
|
||||
--main-menu-link-active-bg: var(--primary-background);
|
||||
--main-menu-link-active-color: var(--primary-color);
|
||||
|
||||
--main-menu-border-color: var(--neutral);
|
||||
|
||||
--project-selector-bg: var(--secondary-background);
|
||||
--project-selector-color: var(--primary-font-color);
|
||||
--project-selector-hover-bg: var(--primary-background);
|
||||
--project-selector-hover-color: var(--primary-font-color);
|
||||
|
||||
--dropdown-link-bg: var(--secondary-background);
|
||||
--dropdown-link-color: var(--primary-font-color);
|
||||
--dropdown-link-hover-bg: var(--tab-active-background);
|
||||
--dropdown-link-hover-color: var(--primary-font-color);
|
||||
|
||||
--input-background: var(--secondary-background);
|
||||
|
||||
--header-action-hover-color: var(--neutral);
|
||||
--header-bg-color: var(--primary-color);
|
||||
--header-gradient: #111111;
|
||||
--element-gradient:linear-gradient(135deg, var(--accent1) 20%,var(--accent2) 100%);
|
||||
|
||||
--primary-font-family: 'Roboto', 'Helvetica Neue', Helvetica, sans-serif;
|
||||
|
||||
--font-size-xs: 10px;
|
||||
--font-size-s: 12px;
|
||||
--base-font-size: 14px;
|
||||
--font-size-m: var(--base-font-size);
|
||||
--font-size-l: 16px;
|
||||
--font-size-xl: 18px;
|
||||
--font-size-xxl: 22px;
|
||||
--font-size-xxxl: 26px;
|
||||
|
||||
--main-border-color: #585858;
|
||||
--min-shadow: 0px 1px 1px rgba(0 0 0 / 20%), 0px 0px 1px rgba(0 0 0 / 5%);
|
||||
--regular-shadow: 0px 2px 6px rgba(0 0 0 / 20%), 0px 0px 0px rgba(0 0 0 / 20%);
|
||||
--large-shadow: 0px 0px 8px 0 rgba(0 0 0 / 30%);
|
||||
--box-radius-large:20px;
|
||||
--box-radius: 10px;
|
||||
--box-radius-small:5px;
|
||||
--element-radius: 15px;
|
||||
--input-radius: 15px;
|
||||
--input-shadow: 0px 1px 2px rgba(0, 0, 0, 0.075);
|
||||
--input-padding: 4px 10px;
|
||||
|
||||
--kanban-col-bg: transparent;
|
||||
--kanban-col-title-bg: var(--col-title-bg);
|
||||
--kanban-col-title-color:var(--primary-font-color);
|
||||
--kanban-card-bg: var(--layered-background);
|
||||
--kanban-card-hover: var(--col-title-bg);
|
||||
|
||||
--accordion-header-bg: var(--secondary-action-bg);
|
||||
--accordion-header-radius: 5px;
|
||||
|
||||
--interactive-icon-color: #aaa;
|
||||
|
||||
--dark-red:#D61B0A;
|
||||
--dark-red-text-color:#fff;
|
||||
|
||||
--red: #F76C5E;
|
||||
--red-text-color: #000;
|
||||
|
||||
--green: #32965D;
|
||||
--green-text-color: #fff;
|
||||
|
||||
--dark-green: #1F5C39;
|
||||
--dark-green-text-color:#fff;
|
||||
|
||||
--yellow: #FDB833;
|
||||
--yellow-text-color: #000;
|
||||
|
||||
--blue: #1B75BB;
|
||||
--blue-text-color: #fff;
|
||||
|
||||
--dark-blue:#124F7D;
|
||||
--dark-blue-text-color: #fff;
|
||||
|
||||
--darker-blue:#082236;
|
||||
--darker-blue-text-color: #fff;
|
||||
|
||||
--purple:#5F0F40;
|
||||
--purple-text-color:#fff;
|
||||
|
||||
--pink: #F26CA7;
|
||||
--pink-text-color:#000;
|
||||
|
||||
--brown: #4C212A;
|
||||
--brown-text-color: #fff;
|
||||
|
||||
--grey: #b0b0b0;
|
||||
--grey-text-color:#000;
|
||||
|
||||
--dark-grey: #707070;
|
||||
--dark-grey-text-color: #fff;
|
||||
|
||||
--fc-page-bg-color: var(--secondary-background);
|
||||
--fc-border-color: var(--main-border-color);
|
||||
|
||||
--zlayer-1: 1; /*Background*/
|
||||
--zlayer-2: 5; /* Maincontentinnnter */
|
||||
--zlayer-3: 10; /* Element contentinner */
|
||||
--zlayer-4: 15; /* over element contentinnter (headlines, status) */
|
||||
--zlayer-5: 20; /* Highest layer on content inner (Filters) */
|
||||
--zlayer-6: 25; /* modal */
|
||||
--zlayer-7: 30; /* modal dropdowns*/
|
||||
--zlayer-8: 35; /* modal dialogs */
|
||||
--zlayer-9: 40; /* modal modals*/
|
||||
|
||||
--transparencyLayer: rgba(0,0,0,1);
|
||||
|
||||
/* Feedback Colors (Dark Mode) */
|
||||
--feedback-success-bg: rgba(76, 175, 80, 0.12);
|
||||
--feedback-success-color: #66bb6a;
|
||||
--feedback-success-border: #4caf50;
|
||||
--feedback-warning-bg: rgba(255, 152, 0, 0.12);
|
||||
--feedback-warning-color: #ffb74d;
|
||||
--feedback-warning-border: #ff9800;
|
||||
--feedback-info-bg: rgba(33, 150, 243, 0.12);
|
||||
--feedback-info-color: #64b5f6;
|
||||
--feedback-info-border: #2196f3;
|
||||
--feedback-error-bg: rgba(244, 67, 54, 0.12);
|
||||
--feedback-error-color: #ef5350;
|
||||
--feedback-error-border: #f44336;
|
||||
|
||||
/* ═══ DESIGN SYSTEM v2 — SEMANTIC ALIASES ═══ */
|
||||
|
||||
--accent3: #CADE1B;
|
||||
--accent3-text: #A8B516;
|
||||
--accent3-color: #000;
|
||||
--accent4: #F61067;
|
||||
--accent4-soft: #C84D7C;
|
||||
--accent4-color: #fff;
|
||||
|
||||
--accent1-light: rgba(0,71,102,0.06);
|
||||
--accent2-light: rgba(0,184,147,0.08);
|
||||
--accent3-light: rgba(202,222,27,0.10);
|
||||
--accent4-light: rgba(246,16,103,0.06);
|
||||
|
||||
--color-text-primary: var(--color-text-default);
|
||||
--color-text-secondary: var(--secondary-font-color);
|
||||
--color-text-muted: var(--interactive-icon-color);
|
||||
--color-text-disabled: var(--solid-neutral);
|
||||
--color-text-on-accent: var(--accent1-color);
|
||||
|
||||
--color-bg-page: var(--color-surface-page);
|
||||
--color-bg-card: var(--color-surface-card);
|
||||
--color-bg-elevated: var(--layered-background);
|
||||
--color-bg-muted: var(--color-surface-inset);
|
||||
--color-bg-hover: var(--col-hover-bg);
|
||||
--color-bg-input: var(--input-background);
|
||||
|
||||
--color-border-default: var(--main-border-color);
|
||||
--color-border-light: var(--neutral);
|
||||
--color-border-hover: var(--main-border-color);
|
||||
|
||||
--shadow-xs: var(--input-shadow);
|
||||
--shadow-sm: var(--shadow-s);
|
||||
--shadow-md: var(--shadow-m);
|
||||
--shadow-lg: var(--shadow-l);
|
||||
--shadow-xl: 0 14px 48px rgba(0,0,0,0.5);
|
||||
|
||||
--radius-xs: 4px;
|
||||
--radius-sm: var(--box-radius-small);
|
||||
--radius: var(--element-radius);
|
||||
--radius-lg: var(--box-radius);
|
||||
--radius-pill: 20px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
--text-xs: var(--font-size-xs);
|
||||
--text-sm: var(--font-size-s);
|
||||
--text-base: var(--base-font-size);
|
||||
--text-md: var(--font-size-m);
|
||||
--text-lg: var(--font-size-l);
|
||||
--text-xl: var(--font-size-xl);
|
||||
--text-2xl: var(--font-size-xxl);
|
||||
--text-3xl: var(--font-size-xxxl);
|
||||
|
||||
--font-weight-light: 300;
|
||||
--font-weight-body: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-heading: 650;
|
||||
--font-weight-bold: 700;
|
||||
--font-weight-display: 800;
|
||||
|
||||
--line-height-tight: 1;
|
||||
--line-height-snug: 1.3;
|
||||
--line-height-normal: 1.5;
|
||||
--line-height-relaxed: 1.6;
|
||||
--line-height-loose: 1.75;
|
||||
|
||||
--font-size-display-sm: 28px;
|
||||
--font-size-display-md: 36px;
|
||||
--font-size-display-lg: 40px;
|
||||
--font-size-display-xl: 120px;
|
||||
|
||||
--duration-fast: 0.1s;
|
||||
--duration-normal: 0.15s;
|
||||
--duration-moderate: 0.2s;
|
||||
--duration-slow: 0.3s;
|
||||
|
||||
--opacity-faint: 0.2;
|
||||
--opacity-disabled: 0.5;
|
||||
--opacity-muted: 0.6;
|
||||
--opacity-subdued: 0.7;
|
||||
--opacity-subtle: 0.85;
|
||||
|
||||
--glass-bg: var(--glass-background);
|
||||
--glass-inset: none;
|
||||
--glass-bg-subtle: var(--color-bg-card);
|
||||
--glass-blur-subtle: none;
|
||||
|
||||
--emboss-track: rgba(255,255,255,0.08);
|
||||
--emboss-highlight: rgba(255,255,255,0.08);
|
||||
|
||||
/* ═══ DESIGN SYSTEM v3 — BASE (PRIMITIVE) TOKENS ═══ */
|
||||
|
||||
--lt-color-blue-300: #66b3ff;
|
||||
--lt-color-blue-400: #3b82f6;
|
||||
--lt-color-blue-500: var(--accent1);
|
||||
--lt-color-green-500: var(--accent2);
|
||||
--lt-color-lime-500: var(--accent3);
|
||||
--lt-color-magenta-500: var(--accent4);
|
||||
--lt-color-red-500: #F76C5E;
|
||||
--lt-color-yellow-500: #FDB833;
|
||||
--lt-color-gray-50: #292929;
|
||||
--lt-color-gray-100: #727272;
|
||||
--lt-color-gray-200: #585858;
|
||||
--lt-color-gray-500: #aaaaaa;
|
||||
--lt-color-gray-800: #ffffff;
|
||||
|
||||
--lt-spacing-1: 0.25rem;
|
||||
--lt-spacing-2: 0.5rem;
|
||||
--lt-spacing-4: 1rem;
|
||||
--lt-spacing-6: 1.5rem;
|
||||
--lt-spacing-8: 2rem;
|
||||
--lt-spacing-12: 3rem;
|
||||
|
||||
/* ═══ DESIGN SYSTEM v3 — FUNCTIONAL TOKENS ═══ */
|
||||
|
||||
--color-brand-primary: var(--lt-color-blue-500);
|
||||
--color-brand-secondary: var(--lt-color-green-500);
|
||||
|
||||
--color-surface-page: #404040;
|
||||
--color-surface-card: #292929;
|
||||
--color-surface-inset: #727272;
|
||||
--color-surface-overlay: rgba(0, 0, 0, 0.7);
|
||||
|
||||
--color-text-default: var(--lt-color-gray-800);
|
||||
--color-text-link: var(--lt-color-blue-300);
|
||||
--color-text-on-emphasis: #ffffff;
|
||||
|
||||
--color-state-danger: var(--lt-color-red-500);
|
||||
--color-state-warning: var(--lt-color-yellow-500);
|
||||
--color-state-success: var(--lt-color-green-500);
|
||||
--color-state-info: var(--lt-color-blue-400);
|
||||
|
||||
--color-focus-ring: var(--lt-color-blue-300);
|
||||
|
||||
--text-s: 0.875rem;
|
||||
--text-m: 1rem;
|
||||
--text-l: 1.25rem;
|
||||
--font-family-base: var(--primary-font-family);
|
||||
--font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
|
||||
--font-weight-normal: var(--font-weight-body);
|
||||
|
||||
--radius-s: 0.25rem;
|
||||
--radius-m: 0.5rem;
|
||||
--radius-l: 1rem;
|
||||
|
||||
--shadow-s: 0px 1px 1px rgba(0 0 0 / 20%), 0px 0px 1px rgba(0 0 0 / 5%);
|
||||
--shadow-m: 0px 2px 6px rgba(0 0 0 / 20%), 0px 0px 0px rgba(0 0 0 / 20%);
|
||||
--shadow-l: 0px 0px 8px 0 rgba(0 0 0 / 30%);
|
||||
|
||||
--z-dropdown: 1000;
|
||||
--z-sticky: 1100;
|
||||
--z-modal: 1300;
|
||||
--z-toast: 1400;
|
||||
|
||||
/* ═══ DESIGN SYSTEM v3 — COMPONENT TOKENS ═══ */
|
||||
|
||||
--btn-bg: var(--color-brand-primary);
|
||||
--btn-color: var(--color-text-on-emphasis);
|
||||
--btn-radius: var(--radius-m);
|
||||
|
||||
--card-bg: var(--color-surface-card);
|
||||
--card-border: var(--color-border-default);
|
||||
--card-radius: var(--radius-m);
|
||||
--card-shadow: var(--shadow-s);
|
||||
|
||||
--input-bg: var(--color-bg-input);
|
||||
--input-border: var(--color-border-default);
|
||||
--input-text: var(--color-text-default);
|
||||
|
||||
--modal-bg: var(--color-surface-card);
|
||||
--modal-overlay: var(--color-surface-overlay);
|
||||
--modal-radius: var(--radius-l);
|
||||
--modal-shadow: var(--shadow-l);
|
||||
|
||||
--badge-radius: var(--radius-full);
|
||||
|
||||
--dropdown-bg: var(--color-surface-card);
|
||||
--dropdown-border: var(--color-border-default);
|
||||
--dropdown-shadow: var(--shadow-m);
|
||||
|
||||
}
|
||||
|
||||
.mainwrapper .header {
|
||||
background-color:var(--header-bg-color);
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
|
||||
}
|
||||
|
||||
.rightpanel::before {
|
||||
opacity:0.9;
|
||||
}
|
||||
|
||||
.header .headmenu > li > a {
|
||||
text-shadow:none;
|
||||
}
|
||||
|
||||
.nyroModalCont .tab-primary.ui-tabs .ui-tabs-nav li,
|
||||
.maincontentinner .tab-primary.ui-tabs .ui-tabs-nav li{
|
||||
border-color:var(--neutral)
|
||||
}
|
||||
|
||||
|
||||
.chzn-container .chzn-drop{
|
||||
border-color:var(--neutral) !important;
|
||||
}
|
||||
|
||||
.chzn-container .chzn-drop,
|
||||
.progress{
|
||||
background: var(--secondary-background) !important;
|
||||
}
|
||||
|
||||
body .chzn-container-single .chzn-single {
|
||||
color:var(--primary-font-color);
|
||||
background-color: var(--secondary-background);
|
||||
border: 1px solid var(--main-border-color);
|
||||
}
|
||||
|
||||
body .chzn-container-active .chzn-single-with-drop {
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
}
|
||||
|
||||
.ticketDropdown ul::after {
|
||||
border-bottom: 7px solid var(--secondary-background);
|
||||
}
|
||||
|
||||
.maincontentinner .table th, .maincontentinner .table.table-bordered th, .maincontentinner .table tr.dtrg-group td {
|
||||
border-color:var(--neutral);
|
||||
}
|
||||
|
||||
.ui-datepicker-calendar td {
|
||||
background:var(--secondary-background) !important;
|
||||
}
|
||||
|
||||
.ui-datepicker-calendar td {
|
||||
border-left: 1px solid var(--neutral) !important;
|
||||
border-top: 1px solid var(--neutral) !important;
|
||||
|
||||
}
|
||||
|
||||
.ui-datepicker-calendar td a {
|
||||
color:var(--primary-font-color) !important;
|
||||
}
|
||||
|
||||
.ui-datepicker-calendar td a:hover {
|
||||
background:var(--primary-background) !important;
|
||||
}
|
||||
|
||||
.ui-datepicker-calendar thead th,
|
||||
.ui-datepicker-calendar{
|
||||
background:var(--col-title-bg) !important;
|
||||
color:var(--primary-font-color) !important;
|
||||
}
|
||||
|
||||
.ui-datepicker-calendar thead th {
|
||||
border-color:var(--neutral) !important;
|
||||
}
|
||||
|
||||
body .gantt .grid-header {
|
||||
fill: var(--col-title-bg) !important;
|
||||
stroke: var(--neutral);
|
||||
stroke-width: 1.4;
|
||||
}
|
||||
|
||||
body .gantt .grid-row {
|
||||
fill: var(--col-content-bg);
|
||||
}
|
||||
|
||||
body .gantt .grid-row:nth-child(even) {
|
||||
fill: var(--col-hover-bg);
|
||||
}
|
||||
|
||||
|
||||
body .gantt .row-line {
|
||||
stroke: var(--neutral);
|
||||
}
|
||||
|
||||
body .gantt .lower-text {
|
||||
color:var(--primary-font-color) !important;
|
||||
fill: var(--primary-font-color);
|
||||
}
|
||||
|
||||
body .gantt .tick {
|
||||
stroke: var(--primary-font-color) !important;
|
||||
stroke-width: 0.2;
|
||||
}
|
||||
|
||||
body .gantt #details .details-container {
|
||||
background: var(--primary-background);
|
||||
display: inline-block;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
body .gantt #details .details-container p {
|
||||
color:var(--primary-font-color);
|
||||
}
|
||||
|
||||
body .gantt .bar-label.big {
|
||||
color:var(--primary-font-color);
|
||||
fill: var(--primary-font-color);
|
||||
}
|
||||
|
||||
body .fc-widget-header,
|
||||
body .fc-widget-content {
|
||||
border-color:var(--neutral);
|
||||
}
|
||||
|
||||
body .fc-content {
|
||||
background:var(--col-content-bg);
|
||||
}
|
||||
|
||||
body .fc-state-highlight {
|
||||
background:var(--col-hover-bg);
|
||||
}
|
||||
|
||||
body .fc-state-down,
|
||||
body .fc-state-active,
|
||||
body .fc-state-default,
|
||||
body .fc-header .fc-button-prev,
|
||||
body .fc-header .fc-button-next,
|
||||
body .fc-header .fc-button-today
|
||||
{
|
||||
background:var(--accent2);
|
||||
color:var(--accent2-color);
|
||||
}
|
||||
|
||||
body .fc-state-active {
|
||||
background:var(--accent2-hover);
|
||||
}
|
||||
|
||||
body .modal {
|
||||
background:var(--secondary-background);
|
||||
border: 1px solid var(--neutral);
|
||||
}
|
||||
|
||||
body .modal-header {
|
||||
border-color:var(--neutral);
|
||||
}
|
||||
|
||||
body .modal-footer {
|
||||
background:var(--secondary-background);
|
||||
border-color:var(--neutral);
|
||||
box-shadow:none;
|
||||
}
|
||||
|
||||
body .regpanelinner .pageheader .pagetitle h1,
|
||||
body .regpanelinner .pageheader .pageicon {
|
||||
color:var(--primary-font-color);
|
||||
}
|
||||
|
||||
body input[disabled],
|
||||
body select[disabled],
|
||||
body textarea[disabled],
|
||||
body input[readonly],
|
||||
body select[readonly],
|
||||
body textarea[readonly] {
|
||||
cursor: not-allowed;
|
||||
background-color: var(--secondary-background);
|
||||
}
|
||||
|
||||
body .userloggedinfo .dropdown-menu::after {
|
||||
border-bottom: 6px solid var(--secondary-background);
|
||||
}
|
||||
|
||||
body .ticketDropdown ul::after {
|
||||
border-bottom: 7px solid var(--secondary-background);
|
||||
}
|
||||
|
||||
.ss-main .ss-single-selected, .ss-content {
|
||||
background-color: var(--secondary-background) !important;
|
||||
color:var(--primary-font-color) !important;
|
||||
border: 1px solid var(--main-border-color) !important;
|
||||
}
|
||||
|
||||
.ss-content .ss-list .ss-option.ss-disabled {
|
||||
background-color: var(--secondary-background) !important;
|
||||
color:darkgrey !important;
|
||||
}
|
||||
|
||||
.ss-content .ss-search input::placeholder, .ss-content .ss-search input {
|
||||
background-color: var(--primary-background) !important;
|
||||
color:var(--primary-font-color) !important;
|
||||
}
|
||||
|
||||
.ss-content .ss-search input::placeholder, .ss-content .ss-search input {
|
||||
border: 1px solid var(--main-border-color) !important;
|
||||
}
|
||||
|
||||
.ss-option:hover {
|
||||
color: white;
|
||||
background-color: var(--accent1) !important;
|
||||
}
|
||||
.popover-content,
|
||||
.iconpicker-popover.popover,
|
||||
.iconpicker .iconpicker-items{
|
||||
background:var(--dropdown-link-bg);
|
||||
}
|
||||
|
||||
.iconpicker .iconpicker-item:hover:not(.iconpicker-selected) {
|
||||
background:var(--dropdown-link-hover-bg);
|
||||
}
|
||||
|
||||
.articleBody table {
|
||||
|
||||
}
|
||||
|
||||
.articleBody table td {
|
||||
border:1px solid var(--neutral);
|
||||
}
|
||||
|
||||
.row .regLeft {
|
||||
background:var(--accent1);
|
||||
}
|
||||
|
||||
|
||||
1
public/theme/minimal/css/index.html
Normal file
1
public/theme/minimal/css/index.html
Normal file
@@ -0,0 +1 @@
|
||||
<html><body></body></html>
|
||||
413
public/theme/minimal/css/light.css
Normal file
413
public/theme/minimal/css/light.css
Normal file
@@ -0,0 +1,413 @@
|
||||
:root {
|
||||
|
||||
--accent1: hsla(199, 100%, 20%, 1);
|
||||
--accent1-hsl: 199, 100%, 20%;
|
||||
--accent1-hover: #333;
|
||||
--accent1-color:#fff;
|
||||
--focus-ring-color: rgba(0, 70, 102, 0.6);
|
||||
|
||||
--accent2: hsla(168, 100%, 33%, 1);
|
||||
--accent2-hsl: 168, 100%, 33%;
|
||||
--accent2-hover: #333;
|
||||
--accent2-color:#fff;
|
||||
|
||||
--nav-link-color: #222;
|
||||
--header-nav-link-color: #fff;
|
||||
|
||||
--tab-background: rgba(230, 230, 230, 1);
|
||||
--tab-color: var(--accent1);
|
||||
--tab-active-background: rgba(230, 230, 230, 1);
|
||||
--tab-active-color: #333;
|
||||
|
||||
--primary-content-bg-opacity: 0.3;
|
||||
|
||||
--main-titles-color: #333;
|
||||
|
||||
--primary-background: rgba(255, 255, 255, 1);
|
||||
--secondary-background: #fff;
|
||||
|
||||
--layered-background: rgba(240, 240, 240, 0.6);
|
||||
--light-layered-background: #ccc;
|
||||
|
||||
--primary-font-color: #333;
|
||||
--secondary-font-color: #000;
|
||||
|
||||
--neutral:#f5f6f7;
|
||||
--solid-neutral:rgba(200, 200, 200, 1);
|
||||
--neutral-background: #f5f6f7;
|
||||
|
||||
--col-title-bg: #f5f6f7;
|
||||
--col-content-bg: rgba(255,255,255, 0.8);
|
||||
--col-hover-bg: rgba(199, 199, 209, 0.5);
|
||||
--col-row-striped:rgba(255,255,255,0.3);
|
||||
|
||||
--primary-color: var(--accent1);
|
||||
--secondary-color: var(--accent2);
|
||||
|
||||
--main-bg: #f9fafb;
|
||||
--left-panel-bg: transparent;
|
||||
--content-bg: var(--secondary-background);
|
||||
|
||||
--glass-blur: blur( 4px );
|
||||
--glass-background: rgba(255,255,255,1);
|
||||
--glass-border: 1px solid rgba(255,255,255,1);
|
||||
|
||||
--main-action-bg: var(--accent1);
|
||||
--main-action-color: var(--accent1-color);
|
||||
--main-action-hover-bg: var(--accent1-hover);
|
||||
--main-action-hover-color: var(--accent1-color);
|
||||
|
||||
--secondary-action-bg: #f5f6f7;
|
||||
--secondary-action-color: var(--primary-font-color);
|
||||
--secondary-action-hover-bg: var(--accent2-hover);
|
||||
--secondary-action-hover-color: var(--accent2-color);
|
||||
|
||||
--main-menu-link-bg: var(--secondary-background);
|
||||
--main-menu-link-color: var(--primary-font-color);
|
||||
|
||||
--main-menu-link-hover-bg: rgba(250, 250, 250, 0.8);
|
||||
--main-menu-link-hover-color: var(--accent1);
|
||||
|
||||
--main-menu-overlayed-link-hover-bg: rgba(255, 255, 255, 0.4);
|
||||
|
||||
--main-menu-link-active-bg: rgba(220, 220, 220, 0.8);
|
||||
--main-menu-link-active-color: var(--accent1);
|
||||
|
||||
--main-menu-border-color:var(--neutral);
|
||||
|
||||
--project-selector-bg: var(--secondary-background);
|
||||
--project-selector-color: var(--primary-font-color);
|
||||
--project-selector-hover-bg: var(--primary-background);
|
||||
--project-selector-hover-color: var(--primary-font-color);
|
||||
|
||||
--dropdown-link-bg:var(--secondary-background);
|
||||
--dropdown-link-color: var(--primary-font-color);
|
||||
--dropdown-link-hover-bg: var(--tab-active-background);
|
||||
--dropdown-link-hover-color: var(--primary-font-color);
|
||||
|
||||
--input-background: #fff;
|
||||
|
||||
--header-action-hover-color:var(--neutral);
|
||||
--header-bg-color:var(--accent1);
|
||||
--header-gradient:#f9fafb;
|
||||
--element-gradient:linear-gradient(135deg, var(--accent1) 20%,var(--accent2) 100%);
|
||||
|
||||
--primary-font-family: 'Roboto', 'Helvetica Neue', Helvetica, sans-serif;
|
||||
|
||||
--font-size-xs: 10px;
|
||||
--font-size-s: 12px;
|
||||
--base-font-size: 14px;
|
||||
--font-size-m: var(--base-font-size);
|
||||
--font-size-l: 16px;
|
||||
--font-size-xl: 18px;
|
||||
--font-size-xxl: 20px;
|
||||
--font-size-xxxl: 24px;
|
||||
|
||||
--main-border-color:rgba(240,240,240, 0.9);
|
||||
--main-border-color-hover:rgba(200,200,200, 0.9);
|
||||
--min-shadow: 0px 1px 2px rgba(0 0 0 / 5%), 0px 1px 1px 1px rgba(0 0 0 / 2%);
|
||||
--regular-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%), 0px 1px 1px 1px rgba(0 0 0 / 5%);
|
||||
--large-shadow: 0px 0px 10px 0px rgba(220,220,220, 0.5), 0px 2px 2px 1px rgba(220,220,220, 0.5);
|
||||
--box-radius-large:20px;
|
||||
--box-radius: 10px;
|
||||
--box-radius-small:5px;
|
||||
--element-radius: 15px;
|
||||
--input-radius: 15px;
|
||||
--input-shadow: 0px 1px 2px rgba(0, 0, 0, 0.075);
|
||||
--input-padding: 4px 10px;
|
||||
|
||||
--kanban-col-bg: transparent;
|
||||
--kanban-col-title-bg: var(--col-title-bg);
|
||||
--kanban-col-title-color:var(--primary-font-color);
|
||||
--kanban-card-bg: #fff;
|
||||
--kanban-card-hover: rgba(240, 240, 240, 0.6);
|
||||
|
||||
|
||||
--accordion-header-bg: var(--secondary-action-bg);
|
||||
--accordion-header-radius: 5px;
|
||||
|
||||
--interactive-icon-color: #777;
|
||||
|
||||
--dark-red:#821219;
|
||||
--dark-red-text-color:#fff;
|
||||
|
||||
--red: #BB1B25;
|
||||
--red-text-color: #fff;
|
||||
|
||||
--green: #75BB1B;
|
||||
--green-text-color: #fff;
|
||||
|
||||
--dark-green: #4B7811;
|
||||
--dark-green-text-color:#fff;
|
||||
|
||||
--yellow: #fdab3d;
|
||||
--yellow-text-color: #000;
|
||||
|
||||
--blue: #1B75BB;
|
||||
--blue-text-color: #fff;
|
||||
|
||||
--dark-blue:#124F7D;
|
||||
--dark-blue-text-color: #fff;
|
||||
|
||||
--darker-blue:#082236;
|
||||
--darker-blue-text-color: #fff;
|
||||
|
||||
--purple:#5F0F40;
|
||||
--purple-text-color:#fff;
|
||||
|
||||
--magenta:#bb1b75;
|
||||
--purple-text-color:#fff;
|
||||
|
||||
--pink: #F26CA7;
|
||||
--pink-text-color:#000;
|
||||
|
||||
--brown: #BB611B;
|
||||
--brown-text-color: #fff;
|
||||
|
||||
--grey: #aaaaaa;
|
||||
--grey-text-color:#000;
|
||||
|
||||
--dark-grey: #4c4c4c;
|
||||
--dark-grey-text-color: #fff;
|
||||
|
||||
--teal: #1bbbb1;
|
||||
--teal-text-color: #fff;
|
||||
|
||||
--zlayer-1: 1; /*Background*/
|
||||
--zlayer-2: 5; /* Maincontentinnnter */
|
||||
--zlayer-3: 10; /* Element contentinner */
|
||||
--zlayer-4: 15; /* over element contentinnter (headlines, status) */
|
||||
--zlayer-5: 20; /* Highest layer on content inner (Filters) */
|
||||
--zlayer-6: 25; /* modal */
|
||||
--zlayer-7: 30; /* modal dropdowns*/
|
||||
--zlayer-8: 35; /* modal dialogs */
|
||||
--zlayer-9: 40; /* modal modals*/
|
||||
|
||||
--transparencyLayer: transparent;
|
||||
|
||||
/* Feedback Colors */
|
||||
--feedback-success-bg: #e8f5e9;
|
||||
--feedback-success-color: var(--green);
|
||||
--feedback-success-border: #4caf50;
|
||||
--feedback-warning-bg: #fff3e0;
|
||||
--feedback-warning-color: #856404;
|
||||
--feedback-warning-border: #ff9800;
|
||||
--feedback-info-bg: #e3f2fd;
|
||||
--feedback-info-color: var(--blue);
|
||||
--feedback-info-border: #2196f3;
|
||||
--feedback-error-bg: #ffebee;
|
||||
--feedback-error-color: #c62828;
|
||||
--feedback-error-border: #f44336;
|
||||
|
||||
/* ═══ DESIGN SYSTEM v2 — SEMANTIC ALIASES ═══ */
|
||||
|
||||
--accent3: #CADE1B;
|
||||
--accent3-text: #A8B516;
|
||||
--accent3-color: #000;
|
||||
--accent4: #F61067;
|
||||
--accent4-soft: #C84D7C;
|
||||
--accent4-color: #fff;
|
||||
|
||||
--accent1-light: rgba(0,71,102,0.06);
|
||||
--accent2-light: rgba(0,184,147,0.08);
|
||||
--accent3-light: rgba(202,222,27,0.10);
|
||||
--accent4-light: rgba(246,16,103,0.06);
|
||||
|
||||
--color-text-primary: var(--color-text-default);
|
||||
--color-text-secondary: var(--secondary-font-color);
|
||||
--color-text-muted: var(--interactive-icon-color);
|
||||
--color-text-disabled: var(--solid-neutral);
|
||||
--color-text-on-accent: var(--accent1-color);
|
||||
|
||||
--color-bg-page: var(--color-surface-page);
|
||||
--color-bg-card: var(--color-surface-card);
|
||||
--color-bg-elevated: var(--layered-background);
|
||||
--color-bg-muted: var(--color-surface-inset);
|
||||
--color-bg-hover: var(--col-hover-bg);
|
||||
--color-bg-input: var(--input-background);
|
||||
|
||||
--color-border-default: var(--main-border-color);
|
||||
--color-border-light: var(--neutral);
|
||||
--color-border-hover: var(--main-border-color-hover);
|
||||
|
||||
--shadow-xs: var(--input-shadow);
|
||||
--shadow-sm: var(--shadow-s);
|
||||
--shadow-md: var(--shadow-m);
|
||||
--shadow-lg: var(--shadow-l);
|
||||
--shadow-xl: 0 14px 48px rgba(0,0,0,0.13);
|
||||
|
||||
--radius-xs: 4px;
|
||||
--radius-sm: var(--box-radius-small);
|
||||
--radius: var(--element-radius);
|
||||
--radius-lg: var(--box-radius);
|
||||
--radius-pill: 20px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
--text-xs: var(--font-size-xs);
|
||||
--text-sm: var(--font-size-s);
|
||||
--text-base: var(--base-font-size);
|
||||
--text-md: var(--font-size-m);
|
||||
--text-lg: var(--font-size-l);
|
||||
--text-xl: var(--font-size-xl);
|
||||
--text-2xl: var(--font-size-xxl);
|
||||
--text-3xl: var(--font-size-xxxl);
|
||||
|
||||
--font-weight-light: 300;
|
||||
--font-weight-body: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-heading: 650;
|
||||
--font-weight-bold: 700;
|
||||
--font-weight-display: 800;
|
||||
|
||||
--line-height-tight: 1;
|
||||
--line-height-snug: 1.3;
|
||||
--line-height-normal: 1.5;
|
||||
--line-height-relaxed: 1.6;
|
||||
--line-height-loose: 1.75;
|
||||
|
||||
--font-size-display-sm: 28px;
|
||||
--font-size-display-md: 36px;
|
||||
--font-size-display-lg: 40px;
|
||||
--font-size-display-xl: 120px;
|
||||
|
||||
--duration-fast: 0.1s;
|
||||
--duration-normal: 0.15s;
|
||||
--duration-moderate: 0.2s;
|
||||
--duration-slow: 0.3s;
|
||||
|
||||
--opacity-faint: 0.2;
|
||||
--opacity-disabled: 0.5;
|
||||
--opacity-muted: 0.6;
|
||||
--opacity-subdued: 0.7;
|
||||
--opacity-subtle: 0.85;
|
||||
|
||||
--glass-bg: var(--glass-background);
|
||||
--glass-inset: inset 0 1px 0 rgba(255,255,255,0.1);
|
||||
--glass-bg-subtle: var(--color-bg-card);
|
||||
--glass-blur-subtle: none;
|
||||
|
||||
--emboss-track: rgba(0,0,0,0.04);
|
||||
--emboss-highlight: rgba(255,255,255,0.15);
|
||||
|
||||
/* ═══ DESIGN SYSTEM v3 — BASE (PRIMITIVE) TOKENS ═══ */
|
||||
|
||||
--lt-color-blue-300: #66b3ff;
|
||||
--lt-color-blue-400: #1976d2;
|
||||
--lt-color-blue-500: var(--accent1);
|
||||
--lt-color-green-500: var(--accent2);
|
||||
--lt-color-lime-500: var(--accent3);
|
||||
--lt-color-magenta-500: var(--accent4);
|
||||
--lt-color-red-500: #BB1B25;
|
||||
--lt-color-yellow-500: #fdab3d;
|
||||
--lt-color-gray-50: #ffffff;
|
||||
--lt-color-gray-100: #f5f6f7;
|
||||
--lt-color-gray-200: rgba(240, 240, 240, 0.9);
|
||||
--lt-color-gray-500: #777777;
|
||||
--lt-color-gray-800: #333333;
|
||||
|
||||
--lt-spacing-1: 0.25rem;
|
||||
--lt-spacing-2: 0.5rem;
|
||||
--lt-spacing-4: 1rem;
|
||||
--lt-spacing-6: 1.5rem;
|
||||
--lt-spacing-8: 2rem;
|
||||
--lt-spacing-12: 3rem;
|
||||
|
||||
/* ═══ DESIGN SYSTEM v3 — FUNCTIONAL TOKENS ═══ */
|
||||
|
||||
--color-brand-primary: var(--lt-color-blue-500);
|
||||
--color-brand-secondary: var(--lt-color-green-500);
|
||||
|
||||
--color-surface-page: rgba(255, 255, 255, 1);
|
||||
--color-surface-card: #fff;
|
||||
--color-surface-inset: #f5f6f7;
|
||||
--color-surface-overlay: rgba(0, 0, 0, 0.5);
|
||||
|
||||
--color-text-default: var(--lt-color-gray-800);
|
||||
--color-text-link: var(--color-brand-primary);
|
||||
--color-text-on-emphasis: #ffffff;
|
||||
|
||||
--color-state-danger: var(--lt-color-red-500);
|
||||
--color-state-warning: var(--lt-color-yellow-500);
|
||||
--color-state-success: var(--lt-color-green-500);
|
||||
--color-state-info: var(--lt-color-blue-400);
|
||||
|
||||
--color-focus-ring: var(--lt-color-blue-300);
|
||||
|
||||
--text-s: 0.875rem;
|
||||
--text-m: 1rem;
|
||||
--text-l: 1.25rem;
|
||||
--font-family-base: var(--primary-font-family);
|
||||
--font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
|
||||
--font-weight-normal: var(--font-weight-body);
|
||||
|
||||
--radius-s: 0.25rem;
|
||||
--radius-m: 0.5rem;
|
||||
--radius-l: 1rem;
|
||||
|
||||
--shadow-s: 0px 1px 2px rgba(0 0 0 / 5%), 0px 1px 1px 1px rgba(0 0 0 / 2%);
|
||||
--shadow-m: 0px 0px 2px 0px rgba(0 0 0 / 20%), 0px 1px 1px 1px rgba(0 0 0 / 5%);
|
||||
--shadow-l: 0px 0px 10px 0px rgba(220,220,220, 0.5), 0px 2px 2px 1px rgba(220,220,220, 0.5);
|
||||
|
||||
--z-dropdown: 1000;
|
||||
--z-sticky: 1100;
|
||||
--z-modal: 1300;
|
||||
--z-toast: 1400;
|
||||
|
||||
/* ═══ DESIGN SYSTEM v3 — COMPONENT TOKENS ═══ */
|
||||
|
||||
--btn-bg: var(--color-brand-primary);
|
||||
--btn-color: var(--color-text-on-emphasis);
|
||||
--btn-radius: var(--radius-m);
|
||||
|
||||
--card-bg: var(--color-surface-card);
|
||||
--card-border: var(--color-border-default);
|
||||
--card-radius: var(--radius-m);
|
||||
--card-shadow: var(--shadow-s);
|
||||
|
||||
--input-bg: var(--color-bg-input);
|
||||
--input-border: var(--color-border-default);
|
||||
--input-text: var(--color-text-default);
|
||||
|
||||
--modal-bg: var(--color-surface-card);
|
||||
--modal-overlay: var(--color-surface-overlay);
|
||||
--modal-radius: var(--radius-l);
|
||||
--modal-shadow: var(--shadow-l);
|
||||
|
||||
--badge-radius: var(--radius-full);
|
||||
|
||||
--dropdown-bg: var(--color-surface-card);
|
||||
--dropdown-border: var(--color-border-default);
|
||||
--dropdown-shadow: var(--shadow-m);
|
||||
|
||||
}
|
||||
|
||||
/* Main default overrides */
|
||||
|
||||
.mainwrapper .header {
|
||||
background:var(--header-bg-color);
|
||||
|
||||
}
|
||||
|
||||
.mainwrapper .rightpanel:before {
|
||||
opacity: .25;
|
||||
}
|
||||
|
||||
.leftmenu .nav-tabs.nav-stacked .dropdown ul li a,
|
||||
.pagetitle {
|
||||
text-shadow:1px 1px 3px rgba(255,255,255,0.9);
|
||||
}
|
||||
|
||||
.pagetitle {
|
||||
text-shadow: 1px 1px 3px #fff;
|
||||
}
|
||||
|
||||
|
||||
.ss-option:hover {
|
||||
color: white;
|
||||
background-color: var(--accent1) !important;
|
||||
}
|
||||
|
||||
.row .regLeft {
|
||||
background:var(--accent1);
|
||||
}
|
||||
Reference in New Issue
Block a user