full chrome metallic theme for entire app
Extended chrome theme from desktop icons only to the full ERPNext UI: navbar, sidebar, buttons, inputs, forms, lists, tables, modals, dropdowns, tabs, timeline, scrollbars. Uses 45° multi-stop reflective gradients, beveled shadows, conic-gradient accents, and polished metal body background. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
37c4ccce88
commit
513522efb8
|
|
@ -54,5 +54,4 @@ Themes can change **everything** — not just icons:
|
||||||
|
|
||||||
- Theme-specific CSS must be wrapped in `[data-jey-theme="themename"]` selector.
|
- Theme-specific CSS must be wrapped in `[data-jey-theme="themename"]` selector.
|
||||||
- Shared CSS (checkboxes, animations) lives in `shared.css` without theme selectors.
|
- Shared CSS (checkboxes, animations) lives in `shared.css` without theme selectors.
|
||||||
- Frappe uses `[data-theme="dark"]` on `<html>` for dark mode — use for shared dark overrides only.
|
|
||||||
- CSS-only changes: clear browser cache. JS changes: `bench build --app jey_theme`.
|
- CSS-only changes: clear browser cache. JS changes: `bench build --app jey_theme`.
|
||||||
|
|
|
||||||
|
|
@ -69,30 +69,6 @@ input[type="checkbox"].disabled-selected {
|
||||||
cursor: not-allowed !important;
|
cursor: not-allowed !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="dark"] input[type="checkbox"] {
|
|
||||||
background-color: var(--gray-700, #383838) !important;
|
|
||||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme="dark"] input[type="checkbox"]::after {
|
|
||||||
background-color: var(--gray-300, #c0c6cc) !important;
|
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme="dark"] input[type="checkbox"]:checked,
|
|
||||||
[data-theme="dark"] input[type="checkbox"].disabled-selected {
|
|
||||||
background-color: #2da44e !important;
|
|
||||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme="dark"] input[type="checkbox"]:checked::after,
|
|
||||||
[data-theme="dark"] input[type="checkbox"].disabled-selected::after {
|
|
||||||
background-color: #fff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme="dark"] input[type="checkbox"]:focus {
|
|
||||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(45, 164, 78, 0.35) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
/* ==========================================================================
|
||||||
Table Grid — restore Frappe default checkboxes
|
Table Grid — restore Frappe default checkboxes
|
||||||
|
|
@ -169,16 +145,6 @@ input.list-header-checkbox:checked::after {
|
||||||
transform: translateX(12px) !important;
|
transform: translateX(12px) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="dark"] input.list-row-checkbox::after,
|
|
||||||
[data-theme="dark"] input.list-header-checkbox::after {
|
|
||||||
background-color: var(--gray-300, #c0c6cc) !important;
|
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme="dark"] input.list-row-checkbox:checked::after,
|
|
||||||
[data-theme="dark"] input.list-header-checkbox:checked::after {
|
|
||||||
background-color: #fff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frappe-control[data-fieldtype="Check"] .checkbox label {
|
.frappe-control[data-fieldtype="Check"] .checkbox label {
|
||||||
align-items: center !important;
|
align-items: center !important;
|
||||||
|
|
@ -190,6 +156,49 @@ input.list-header-checkbox:checked::after {
|
||||||
align-items: center !important;
|
align-items: center !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
List View — swap filter and sort order
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.filter-section {
|
||||||
|
display: flex !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-section .sort-selector {
|
||||||
|
order: -1 !important;
|
||||||
|
margin-right: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Table Horizontal Scrollbar — thicker & easier to grab
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/* Force scrollbar always visible & push it below table content */
|
||||||
|
.form-grid {
|
||||||
|
overflow-x: scroll !important;
|
||||||
|
padding-bottom: 12px !important;
|
||||||
|
scrollbar-width: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-grid::-webkit-scrollbar {
|
||||||
|
height: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-grid::-webkit-scrollbar-track {
|
||||||
|
background: var(--gray-100, #f5f5f5) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-grid::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--gray-400, #c0c6cc) !important;
|
||||||
|
border-radius: 5px !important;
|
||||||
|
border: 2px solid var(--gray-100, #f5f5f5) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-grid::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--gray-500, #98a2ab) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* ==========================================================================
|
/* ==========================================================================
|
||||||
Grid Column Resize Handles
|
Grid Column Resize Handles
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
@ -252,6 +261,7 @@ input.list-header-checkbox:checked::after {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* ==========================================================================
|
/* ==========================================================================
|
||||||
Desktop Icons — Shared base (all themes)
|
Desktop Icons — Shared base (all themes)
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
@ -286,6 +296,7 @@ input.list-header-checkbox:checked::after {
|
||||||
Icon Animations — Shared (all themes)
|
Icon Animations — Shared (all themes)
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
|
/* Framework — gentle float */
|
||||||
.ico-framework { animation: ico-float 5s ease-in-out infinite; transform-origin: center; }
|
.ico-framework { animation: ico-float 5s ease-in-out infinite; transform-origin: center; }
|
||||||
@keyframes ico-float {
|
@keyframes ico-float {
|
||||||
0%,100% { transform: translateY(0) rotate(0deg); opacity: 0.85; }
|
0%,100% { transform: translateY(0) rotate(0deg); opacity: 0.85; }
|
||||||
|
|
@ -343,6 +354,7 @@ input.list-header-checkbox:checked::after {
|
||||||
.ico-settings { animation: ico-gear-main 12s linear infinite; transform-origin: center; }
|
.ico-settings { animation: ico-gear-main 12s linear infinite; transform-origin: center; }
|
||||||
@keyframes ico-gear-main { to { transform: rotate(360deg); } }
|
@keyframes ico-gear-main { to { transform: rotate(360deg); } }
|
||||||
|
|
||||||
|
/* HR — plus sign pulsing */
|
||||||
.ico-hr .plus-v { animation: ico-pv 4s ease-in-out infinite; transform-origin: center; }
|
.ico-hr .plus-v { animation: ico-pv 4s ease-in-out infinite; transform-origin: center; }
|
||||||
.ico-hr .plus-h { animation: ico-ph 4s ease-in-out infinite 0.3s; transform-origin: center; }
|
.ico-hr .plus-h { animation: ico-ph 4s ease-in-out infinite 0.3s; transform-origin: center; }
|
||||||
@keyframes ico-pv { 0%,100% { opacity: 0.4; stroke-width: 1.8; } 50% { opacity: 1; stroke-width: 2.4; } }
|
@keyframes ico-pv { 0%,100% { opacity: 0.4; stroke-width: 1.8; } 50% { opacity: 1; stroke-width: 2.4; } }
|
||||||
|
|
@ -425,3 +437,156 @@ input.list-header-checkbox:checked::after {
|
||||||
font-size: var(--text-sm);
|
font-size: var(--text-sm);
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Module Widget Cards — Entrance & Hover Animations
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/* --- Animation variant #2 (final): Slide-up entrance + Accent Bar hover --- */
|
||||||
|
|
||||||
|
/* Entrance: fade-in slide-up (from variant #1) */
|
||||||
|
.ce-block .links-widget-box,
|
||||||
|
.ce-block .number-widget-box {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(24px) scale(0.97);
|
||||||
|
animation: jey-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
||||||
|
border-radius: var(--border-radius-lg, 12px);
|
||||||
|
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
|
||||||
|
box-shadow 0.35s ease;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stagger delays */
|
||||||
|
.ce-block:nth-child(1) .links-widget-box,
|
||||||
|
.ce-block:nth-child(1) .number-widget-box { animation-delay: 0.00s; }
|
||||||
|
.ce-block:nth-child(2) .links-widget-box,
|
||||||
|
.ce-block:nth-child(2) .number-widget-box { animation-delay: 0.06s; }
|
||||||
|
.ce-block:nth-child(3) .links-widget-box,
|
||||||
|
.ce-block:nth-child(3) .number-widget-box { animation-delay: 0.12s; }
|
||||||
|
.ce-block:nth-child(4) .links-widget-box,
|
||||||
|
.ce-block:nth-child(4) .number-widget-box { animation-delay: 0.18s; }
|
||||||
|
.ce-block:nth-child(5) .links-widget-box,
|
||||||
|
.ce-block:nth-child(5) .number-widget-box { animation-delay: 0.24s; }
|
||||||
|
.ce-block:nth-child(6) .links-widget-box,
|
||||||
|
.ce-block:nth-child(6) .number-widget-box { animation-delay: 0.30s; }
|
||||||
|
.ce-block:nth-child(7) .links-widget-box,
|
||||||
|
.ce-block:nth-child(7) .number-widget-box { animation-delay: 0.36s; }
|
||||||
|
.ce-block:nth-child(8) .links-widget-box,
|
||||||
|
.ce-block:nth-child(8) .number-widget-box { animation-delay: 0.42s; }
|
||||||
|
.ce-block:nth-child(9) .links-widget-box,
|
||||||
|
.ce-block:nth-child(9) .number-widget-box { animation-delay: 0.48s; }
|
||||||
|
.ce-block:nth-child(10) .links-widget-box,
|
||||||
|
.ce-block:nth-child(10) .number-widget-box { animation-delay: 0.54s; }
|
||||||
|
.ce-block:nth-child(11) .links-widget-box,
|
||||||
|
.ce-block:nth-child(11) .number-widget-box { animation-delay: 0.60s; }
|
||||||
|
.ce-block:nth-child(12) .links-widget-box,
|
||||||
|
.ce-block:nth-child(12) .number-widget-box { animation-delay: 0.66s; }
|
||||||
|
|
||||||
|
@keyframes jey-card-in {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(24px) scale(0.97);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hover: soft bottom accent line + lift */
|
||||||
|
.ce-block .links-widget-box::after,
|
||||||
|
.ce-block .number-widget-box::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 10%;
|
||||||
|
right: 10%;
|
||||||
|
height: 2.5px;
|
||||||
|
border-radius: 2px 2px 0 0;
|
||||||
|
background: var(--primary, #2490ef);
|
||||||
|
transform: scaleX(0);
|
||||||
|
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-block .links-widget-box:hover::after,
|
||||||
|
.ce-block .number-widget-box:hover::after {
|
||||||
|
transform: scaleX(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce-block .links-widget-box:hover,
|
||||||
|
.ce-block .number-widget-box:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08),
|
||||||
|
0 2px 6px rgba(0, 0, 0, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Link items: colored left accent bar slides in */
|
||||||
|
.links-widget-box .link-item {
|
||||||
|
position: relative;
|
||||||
|
transition: background 0.25s ease, transform 0.25s ease;
|
||||||
|
border-radius: var(--border-radius, 8px);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links-widget-box .link-item:hover {
|
||||||
|
transform: translateX(6px);
|
||||||
|
background: var(--subtle-fg, rgba(0, 0, 0, 0.02));
|
||||||
|
}
|
||||||
|
|
||||||
|
.links-widget-box .link-item .es-icon {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Select Field — Custom chevron icon
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.select-icon svg {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-icon {
|
||||||
|
top: 0 !important;
|
||||||
|
bottom: 0 !important;
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-icon::after {
|
||||||
|
content: "" !important;
|
||||||
|
display: block;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636e72' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Empty State — Custom folder icon
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.msg-box .icon-xl {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.msg-box .mb-4 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.msg-box .mb-4::after {
|
||||||
|
content: "" !important;
|
||||||
|
display: block;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b8c0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -83,3 +83,764 @@
|
||||||
filter: drop-shadow(0 1px 0 rgba(255,255,255,0.5)) !important;
|
filter: drop-shadow(0 1px 0 rgba(255,255,255,0.5)) !important;
|
||||||
position: relative; z-index: 2;
|
position: relative; z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
FULL APP CHROME THEME
|
||||||
|
Real metallic chrome with 45° multi-stop reflective gradients,
|
||||||
|
brushed metal textures, beveled edges, and conic-gradient accents.
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/* --- Shine sweep animation for interactive elements --- */
|
||||||
|
@keyframes jey-chrome-shine {
|
||||||
|
0% { transform: translateX(-100%) skewX(-15deg); }
|
||||||
|
100% { transform: translateX(200%) skewX(-15deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
CSS Variable Overrides
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] {
|
||||||
|
/* --- Surfaces --- */
|
||||||
|
--bg-color: #d8d8d8;
|
||||||
|
--fg-color: #e8e8e8;
|
||||||
|
--card-bg: #e0e0e0;
|
||||||
|
--subtle-accent: #d4d4d4;
|
||||||
|
--subtle-fg: #d0d0d0;
|
||||||
|
--fg-hover-color: #ccc;
|
||||||
|
--highlight-color: #d4d4d4;
|
||||||
|
--navbar-bg: #d0d0d0;
|
||||||
|
--modal-bg: #ddd;
|
||||||
|
--toast-bg: #ddd;
|
||||||
|
--popover-bg: #e0e0e0;
|
||||||
|
--control-bg: #d5d5d5;
|
||||||
|
--control-bg-on-gray: #ccc;
|
||||||
|
--awesomebar-focus-bg: #e8e8e8;
|
||||||
|
--disabled-control-bg: #d0d0d0;
|
||||||
|
--skeleton-bg: #c8c8c8;
|
||||||
|
--surface-menu-bar: #d4d4d4;
|
||||||
|
--surface-white: #e0e0e0;
|
||||||
|
--surface-gray-1: #d8d8d8;
|
||||||
|
--surface-gray-2: #d0d0d0;
|
||||||
|
--surface-gray-3: #c8c8c8;
|
||||||
|
--surface-gray-4: #bbb;
|
||||||
|
--surface-modal: #ddd;
|
||||||
|
--placeholder-color: #ccc;
|
||||||
|
|
||||||
|
/* --- Sidebar --- */
|
||||||
|
--sidebar-hover-color: #c8c8c8;
|
||||||
|
--sidebar-active-color: #d8d8d8;
|
||||||
|
--sidebar-border-color: #aaa;
|
||||||
|
--divider-color: #b0b0b0;
|
||||||
|
|
||||||
|
/* --- Text --- */
|
||||||
|
--heading-color: #333;
|
||||||
|
--text-color: #404040;
|
||||||
|
--text-neutral: #333;
|
||||||
|
--text-muted: #666;
|
||||||
|
--text-light: #888;
|
||||||
|
--text-dark: #f0f0f0;
|
||||||
|
--disabled-text-color: #888;
|
||||||
|
--ink-gray-7: #555;
|
||||||
|
--ink-gray-8: #404040;
|
||||||
|
--ink-gray-9: #333;
|
||||||
|
|
||||||
|
/* --- Borders --- */
|
||||||
|
--border-color: #aaa;
|
||||||
|
--dark-border-color: #999;
|
||||||
|
--table-border-color: #aaa;
|
||||||
|
--btn-group-border-color: #999;
|
||||||
|
--outline-gray-1: #b0b0b0;
|
||||||
|
--outline-gray-2: #999;
|
||||||
|
--outline-gray-modals: #aaa;
|
||||||
|
|
||||||
|
/* --- Primary / Buttons --- */
|
||||||
|
--primary: #555;
|
||||||
|
--brand-color: #555;
|
||||||
|
--btn-primary: #777;
|
||||||
|
--btn-default-bg: #ccc;
|
||||||
|
--btn-default-hover-bg: #bbb;
|
||||||
|
--btn-ghost-hover-bg: #c0c0c0;
|
||||||
|
--border-primary: #777;
|
||||||
|
|
||||||
|
/* --- Shadows (beveled metallic) --- */
|
||||||
|
--shadow-xs: 1px 1px 2px rgba(0,0,0,0.15), -1px -1px 1px rgba(255,255,255,0.5);
|
||||||
|
--shadow-sm: 1px 1px 3px rgba(0,0,0,0.18), -1px -1px 2px rgba(255,255,255,0.45);
|
||||||
|
--shadow-base: 2px 2px 4px rgba(0,0,0,0.15), -1px -1px 2px rgba(255,255,255,0.4);
|
||||||
|
--shadow-md: 2px 2px 6px rgba(0,0,0,0.18), -1px -1px 3px rgba(255,255,255,0.35);
|
||||||
|
--shadow-lg: 3px 3px 10px rgba(0,0,0,0.15), -2px -2px 5px rgba(255,255,255,0.3);
|
||||||
|
--shadow-xl: 4px 4px 16px rgba(0,0,0,0.18), -2px -2px 6px rgba(255,255,255,0.25);
|
||||||
|
--shadow-2xl: 6px 6px 24px rgba(0,0,0,0.2), -3px -3px 8px rgba(255,255,255,0.2);
|
||||||
|
--shadow-inset: inset 0px -1px 0px #999;
|
||||||
|
--btn-shadow: 1px 1px 2px rgba(0,0,0,0.15), -1px -1px 1px rgba(255,255,255,0.4);
|
||||||
|
--card-shadow: 2px 2px 6px rgba(0,0,0,0.12), -1px -1px 3px rgba(255,255,255,0.4);
|
||||||
|
--modal-shadow: 6px 6px 30px rgba(0,0,0,0.3), -3px -3px 10px rgba(255,255,255,0.15);
|
||||||
|
--awesomebar-shadow: 3px 3px 12px rgba(0,0,0,0.15), -2px -2px 6px rgba(255,255,255,0.3);
|
||||||
|
|
||||||
|
/* --- Focus rings --- */
|
||||||
|
--focus-default: 0 0 0 2px rgba(150,150,150,0.5);
|
||||||
|
|
||||||
|
/* --- Scrollbar --- */
|
||||||
|
--scrollbar-thumb-color: #999;
|
||||||
|
--scrollbar-track-color: #c8c8c8;
|
||||||
|
|
||||||
|
/* --- Checkbox / Switch --- */
|
||||||
|
--switch-bg: #aaa;
|
||||||
|
--checkbox-color: #555;
|
||||||
|
--checkbox-gradient: linear-gradient(180deg, #777 0%, #666 100%);
|
||||||
|
|
||||||
|
/* --- Timeline --- */
|
||||||
|
--timeline-badge-color: #555;
|
||||||
|
--timeline-badge-bg: #ccc;
|
||||||
|
|
||||||
|
/* --- Date picker --- */
|
||||||
|
--date-active-bg: #777;
|
||||||
|
--date-active-text: #f0f0f0;
|
||||||
|
--date-range-bg: #ccc;
|
||||||
|
|
||||||
|
/* --- Progress / Misc --- */
|
||||||
|
--progress-bar-bg: #777;
|
||||||
|
--code-block-bg: #444;
|
||||||
|
--code-block-text: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Body — Brushed Metal Background
|
||||||
|
3 layered repeating-gradients at different lengths = realistic grain
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] body {
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse at 25% 15%, rgba(255,255,255,0.45) 0%, transparent 50%),
|
||||||
|
radial-gradient(ellipse at 80% 80%, rgba(255,255,255,0.2) 0%, transparent 45%),
|
||||||
|
radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.03) 0%, transparent 70%),
|
||||||
|
linear-gradient(168deg, #d8d8d8 0%, #c4c4c4 40%, #b8b8b8 70%, #c8c8c8 100%) !important;
|
||||||
|
background-attachment: fixed !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .page-container {
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Navbar — Reflective Chrome Bar
|
||||||
|
45° multi-stop gradient simulating polished metal reflection
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .navbar {
|
||||||
|
background:
|
||||||
|
linear-gradient(45deg, #aaa 2%, #ddd 8%, #bbb 18%, #e8e8e8 30%, #ccc 45%, #eee 55%, #bbb 68%, #ddd 80%, #aaa 95%) !important;
|
||||||
|
border-bottom: 1px solid #888 !important;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 0 rgba(255,255,255,0.7),
|
||||||
|
inset 0 -1px 0 rgba(0,0,0,0.08),
|
||||||
|
0 2px 4px rgba(0,0,0,0.15) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .navbar .navbar-nav .nav-link {
|
||||||
|
color: #444 !important;
|
||||||
|
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .navbar .navbar-nav .nav-link:hover {
|
||||||
|
color: #222 !important;
|
||||||
|
background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.1) 100%) !important;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Awesomebar — Sunken Metal Slot
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .search-bar input {
|
||||||
|
background: linear-gradient(180deg, #c0c0c0 0%, #d0d0d0 100%) !important;
|
||||||
|
border: 1px solid #999 !important;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 2px 4px rgba(0,0,0,0.15),
|
||||||
|
inset 0 0 0 1px rgba(0,0,0,0.05),
|
||||||
|
0 1px 0 rgba(255,255,255,0.5) !important;
|
||||||
|
color: #333 !important;
|
||||||
|
border-radius: 6px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .search-bar input:focus {
|
||||||
|
background: linear-gradient(180deg, #d5d5d5 0%, #e0e0e0 100%) !important;
|
||||||
|
border-color: #888 !important;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 3px rgba(0,0,0,0.1),
|
||||||
|
0 0 0 2px rgba(150,150,150,0.3),
|
||||||
|
0 1px 0 rgba(255,255,255,0.4) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .search-bar .search-icon {
|
||||||
|
color: #777 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Sidebar — Brushed Metal Panel
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .body-sidebar-container {
|
||||||
|
background:
|
||||||
|
repeating-linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(255,255,255,0) 0px,
|
||||||
|
rgba(255,255,255,0.03) 1px,
|
||||||
|
rgba(0,0,0,0.02) 2px,
|
||||||
|
rgba(255,255,255,0) 3px
|
||||||
|
),
|
||||||
|
linear-gradient(180deg, #d8d8d8 0%, #c8c8c8 50%, #d0d0d0 100%) !important;
|
||||||
|
border-right: 1px solid #999 !important;
|
||||||
|
box-shadow:
|
||||||
|
inset -1px 0 0 rgba(255,255,255,0.4),
|
||||||
|
2px 0 6px rgba(0,0,0,0.08) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .body-sidebar .standard-sidebar-item .item-anchor:hover {
|
||||||
|
background: linear-gradient(90deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 100%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .body-sidebar .standard-sidebar-item.active-sidebar .item-anchor {
|
||||||
|
background: linear-gradient(45deg, #bbb 5%, #ddd 30%, #ccc 60%, #ddd 90%) !important;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 0 rgba(255,255,255,0.6),
|
||||||
|
inset 0 -1px 0 rgba(0,0,0,0.08),
|
||||||
|
1px 1px 2px rgba(0,0,0,0.1),
|
||||||
|
-1px -1px 1px rgba(255,255,255,0.3) !important;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .body-sidebar .sidebar-item-icon {
|
||||||
|
color: #666 !important;
|
||||||
|
filter: drop-shadow(0 1px 0 rgba(255,255,255,0.5));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Primary Buttons — Polished Chrome with Shine
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .btn-primary {
|
||||||
|
background: linear-gradient(45deg, #666 5%, #aaa 10%, #888 30%, #999 50%, #888 70%, #aaa 85%, #666 95%) !important;
|
||||||
|
color: #f0f0f0 !important;
|
||||||
|
border: 1px solid #555 !important;
|
||||||
|
box-shadow:
|
||||||
|
2px 2px 4px rgba(0,0,0,0.2),
|
||||||
|
-1px -1px 2px rgba(255,255,255,0.15),
|
||||||
|
inset 0 1px 0 rgba(255,255,255,0.3),
|
||||||
|
inset 0 -1px 0 rgba(0,0,0,0.15) !important;
|
||||||
|
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .btn-primary::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0; left: -50%; width: 30%; height: 100%;
|
||||||
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
|
||||||
|
transform: skewX(-15deg);
|
||||||
|
transition: left 0.4s ease;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .btn-primary:hover::before {
|
||||||
|
left: 120%;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .btn-primary:hover {
|
||||||
|
background: linear-gradient(45deg, #777 5%, #bbb 10%, #999 30%, #aaa 50%, #999 70%, #bbb 85%, #777 95%) !important;
|
||||||
|
box-shadow:
|
||||||
|
2px 2px 6px rgba(0,0,0,0.25),
|
||||||
|
-1px -1px 3px rgba(255,255,255,0.2),
|
||||||
|
inset 0 1px 0 rgba(255,255,255,0.35),
|
||||||
|
inset 0 -1px 0 rgba(0,0,0,0.15) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .btn-primary:active {
|
||||||
|
background: linear-gradient(45deg, #555 5%, #888 10%, #777 30%, #888 50%, #777 70%, #888 85%, #555 95%) !important;
|
||||||
|
box-shadow:
|
||||||
|
inset 2px 2px 4px rgba(0,0,0,0.25),
|
||||||
|
inset -1px -1px 2px rgba(255,255,255,0.1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Default/Secondary Buttons — Brushed Metal
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .btn-default,
|
||||||
|
[data-jey-theme="chrome"] .btn-secondary {
|
||||||
|
background: linear-gradient(45deg, #bbb 5%, #eee 10%, #ccc 30%, #e0e0e0 50%, #ccc 70%, #eee 85%, #bbb 95%) !important;
|
||||||
|
border: 1px solid #999 !important;
|
||||||
|
color: #444 !important;
|
||||||
|
box-shadow:
|
||||||
|
1px 1px 3px rgba(0,0,0,0.12),
|
||||||
|
-1px -1px 2px rgba(255,255,255,0.4),
|
||||||
|
inset 0 1px 0 rgba(255,255,255,0.6),
|
||||||
|
inset 0 -1px 0 rgba(0,0,0,0.06) !important;
|
||||||
|
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .btn-default:hover,
|
||||||
|
[data-jey-theme="chrome"] .btn-secondary:hover {
|
||||||
|
background: linear-gradient(45deg, #c0c0c0 5%, #f2f2f2 10%, #d4d4d4 30%, #e8e8e8 50%, #d4d4d4 70%, #f2f2f2 85%, #c0c0c0 95%) !important;
|
||||||
|
border-color: #888 !important;
|
||||||
|
box-shadow:
|
||||||
|
2px 2px 4px rgba(0,0,0,0.15),
|
||||||
|
-1px -1px 2px rgba(255,255,255,0.4),
|
||||||
|
inset 0 1px 0 rgba(255,255,255,0.7),
|
||||||
|
inset 0 -1px 0 rgba(0,0,0,0.06) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .btn-default:active,
|
||||||
|
[data-jey-theme="chrome"] .btn-secondary:active {
|
||||||
|
background: linear-gradient(45deg, #aaa 5%, #d8d8d8 10%, #bbb 30%, #ccc 50%, #bbb 70%, #d8d8d8 85%, #aaa 95%) !important;
|
||||||
|
box-shadow:
|
||||||
|
inset 2px 2px 3px rgba(0,0,0,0.15),
|
||||||
|
inset -1px -1px 2px rgba(255,255,255,0.2) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Danger */
|
||||||
|
[data-jey-theme="chrome"] .btn-danger {
|
||||||
|
background: linear-gradient(45deg, #b33 5%, #e88 10%, #c55 30%, #d77 50%, #c55 70%, #e88 85%, #b33 95%) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
border: 1px solid #944 !important;
|
||||||
|
box-shadow:
|
||||||
|
2px 2px 4px rgba(0,0,0,0.2),
|
||||||
|
-1px -1px 2px rgba(255,255,255,0.1),
|
||||||
|
inset 0 1px 0 rgba(255,255,255,0.25) !important;
|
||||||
|
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .btn-danger:hover {
|
||||||
|
background: linear-gradient(45deg, #c44 5%, #f99 10%, #d66 30%, #e88 50%, #d66 70%, #f99 85%, #c44 95%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ghost */
|
||||||
|
[data-jey-theme="chrome"] .btn-ghost:hover {
|
||||||
|
background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 100%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Input Fields — Sunken Metal Inset
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .form-control {
|
||||||
|
background: linear-gradient(180deg, #c8c8c8 0%, #d5d5d5 100%) !important;
|
||||||
|
border: 1px solid #999 !important;
|
||||||
|
box-shadow:
|
||||||
|
inset 2px 2px 4px rgba(0,0,0,0.12),
|
||||||
|
inset -1px -1px 2px rgba(255,255,255,0.2),
|
||||||
|
0 1px 0 rgba(255,255,255,0.5) !important;
|
||||||
|
color: #333 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .form-control:focus {
|
||||||
|
background: linear-gradient(180deg, #d5d5d5 0%, #e0e0e0 100%) !important;
|
||||||
|
border-color: #777 !important;
|
||||||
|
box-shadow:
|
||||||
|
inset 1px 1px 3px rgba(0,0,0,0.08),
|
||||||
|
0 0 0 2px rgba(120,120,120,0.25),
|
||||||
|
0 1px 0 rgba(255,255,255,0.4) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .form-control:disabled,
|
||||||
|
[data-jey-theme="chrome"] .form-control[disabled] {
|
||||||
|
background: #c8c8c8 !important;
|
||||||
|
color: #888 !important;
|
||||||
|
box-shadow: inset 1px 1px 2px rgba(0,0,0,0.06) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .frappe-control .control-label,
|
||||||
|
[data-jey-theme="chrome"] .frappe-control label {
|
||||||
|
color: #444 !important;
|
||||||
|
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] select.form-control,
|
||||||
|
[data-jey-theme="chrome"] select.input-with-feedback {
|
||||||
|
background: linear-gradient(180deg, #c8c8c8 0%, #d5d5d5 100%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Forms / Cards — Raised Metal Panels
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .form-page {
|
||||||
|
background:
|
||||||
|
linear-gradient(45deg, #ccc 3%, #e8e8e8 10%, #d5d5d5 25%, #eee 45%, #d8d8d8 60%, #e8e8e8 80%, #ccc 97%) !important;
|
||||||
|
border: 1px solid #aaa !important;
|
||||||
|
box-shadow:
|
||||||
|
3px 3px 8px rgba(0,0,0,0.12),
|
||||||
|
-2px -2px 4px rgba(255,255,255,0.4),
|
||||||
|
inset 0 1px 0 rgba(255,255,255,0.7),
|
||||||
|
inset 0 -1px 0 rgba(0,0,0,0.05) !important;
|
||||||
|
border-radius: var(--border-radius-lg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .form-section .section-head {
|
||||||
|
color: #444 !important;
|
||||||
|
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
|
||||||
|
border-bottom: 1px solid #b0b0b0 !important;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .frappe-card {
|
||||||
|
background: linear-gradient(45deg, #c8c8c8 3%, #e5e5e5 12%, #d4d4d4 30%, #eaeaea 50%, #d4d4d4 70%, #e5e5e5 88%, #c8c8c8 97%) !important;
|
||||||
|
border: 1px solid #aaa !important;
|
||||||
|
box-shadow:
|
||||||
|
2px 2px 6px rgba(0,0,0,0.1),
|
||||||
|
-1px -1px 3px rgba(255,255,255,0.4),
|
||||||
|
inset 0 1px 0 rgba(255,255,255,0.6) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Form sidebar */
|
||||||
|
[data-jey-theme="chrome"] .form-sidebar {
|
||||||
|
border-left: 1px solid #aaa !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .form-sidebar .sidebar-section {
|
||||||
|
border-bottom: 1px solid #b0b0b0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Modals / Dialogs — Chrome Frame with Conic-Gradient Border
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .modal-content {
|
||||||
|
background: linear-gradient(45deg, #ccc 3%, #e8e8e8 12%, #d5d5d5 30%, #eee 50%, #d5d5d5 70%, #e8e8e8 88%, #ccc 97%) !important;
|
||||||
|
border: 2px solid transparent !important;
|
||||||
|
border-image: conic-gradient(from 140deg, #a0a0a0 0deg, #e8e8e8 40deg, #888 80deg, #ddd 120deg, #a0a0a0 170deg, #eee 210deg, #999 260deg, #d0d0d0 310deg, #a0a0a0 360deg) 1 !important;
|
||||||
|
box-shadow:
|
||||||
|
6px 6px 24px rgba(0,0,0,0.25),
|
||||||
|
-3px -3px 8px rgba(255,255,255,0.15),
|
||||||
|
inset 0 1px 0 rgba(255,255,255,0.6) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .modal-header {
|
||||||
|
background: linear-gradient(45deg, #b0b0b0 5%, #ddd 12%, #c0c0c0 30%, #e5e5e5 50%, #c0c0c0 70%, #ddd 88%, #b0b0b0 95%) !important;
|
||||||
|
border-bottom: 1px solid #999 !important;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 0 rgba(255,255,255,0.6),
|
||||||
|
inset 0 -1px 0 rgba(0,0,0,0.06) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .modal-header .modal-title {
|
||||||
|
color: #333 !important;
|
||||||
|
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .modal-footer {
|
||||||
|
background: linear-gradient(45deg, #b8b8b8 5%, #d8d8d8 20%, #c0c0c0 50%, #d8d8d8 80%, #b8b8b8 95%) !important;
|
||||||
|
border-top: 1px solid #999 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .modal-backdrop {
|
||||||
|
background-color: rgba(40,40,40,0.55) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Page Head — Chrome Title Bar
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .page-head {
|
||||||
|
background: linear-gradient(45deg, #b8b8b8 3%, #e0e0e0 10%, #c8c8c8 25%, #eaeaea 45%, #ccc 60%, #e0e0e0 80%, #b8b8b8 97%) !important;
|
||||||
|
border-bottom: 1px solid #999 !important;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 0 rgba(255,255,255,0.6),
|
||||||
|
inset 0 -1px 0 rgba(0,0,0,0.06),
|
||||||
|
0 2px 4px rgba(0,0,0,0.08) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .page-head .title-text {
|
||||||
|
color: #333 !important;
|
||||||
|
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
List View — Metal Table
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .list-row-head {
|
||||||
|
background: linear-gradient(45deg, #aaa 3%, #d8d8d8 10%, #bbb 25%, #e0e0e0 45%, #bbb 60%, #d8d8d8 80%, #aaa 97%) !important;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 0 rgba(255,255,255,0.6),
|
||||||
|
inset 0 -1px 0 rgba(0,0,0,0.06) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .list-row-container .list-row {
|
||||||
|
border-bottom: 1px solid #b8b8b8 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .list-row-container:hover {
|
||||||
|
background: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 100%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .result .list-row-container .level-left .list-row--col .level-left .ellipsis {
|
||||||
|
color: #404040 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* List sidebar */
|
||||||
|
[data-jey-theme="chrome"] .layout-side-section {
|
||||||
|
border-right: 1px solid #aaa !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Tables / Grids — Metallic Header & Rows
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .frappe-control[data-fieldtype="Table"] .form-grid {
|
||||||
|
border: 1px solid #999 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .grid-heading-row {
|
||||||
|
background: linear-gradient(45deg, #aaa 3%, #d5d5d5 10%, #bbb 30%, #ddd 50%, #bbb 70%, #d5d5d5 90%, #aaa 97%) !important;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 0 rgba(255,255,255,0.6),
|
||||||
|
inset 0 -1px 0 rgba(0,0,0,0.06) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .grid-heading-row .static-area {
|
||||||
|
color: #444 !important;
|
||||||
|
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .rows .grid-row:hover {
|
||||||
|
background: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 100%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .rows .grid-row {
|
||||||
|
border-bottom: 1px solid #b8b8b8 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .grid-footer {
|
||||||
|
background: linear-gradient(45deg, #b0b0b0 5%, #d0d0d0 20%, #bbb 50%, #d0d0d0 80%, #b0b0b0 95%) !important;
|
||||||
|
border-top: 1px solid #999 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Tabs — Metallic Tab Strip
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .form-tabs .nav-link {
|
||||||
|
color: #666 !important;
|
||||||
|
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .form-tabs .nav-link:hover {
|
||||||
|
color: #444 !important;
|
||||||
|
background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 100%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .form-tabs .nav-link.active {
|
||||||
|
color: #333 !important;
|
||||||
|
border-bottom: 2px solid #777 !important;
|
||||||
|
background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 100%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Dropdowns — Chrome Panel
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .dropdown-menu {
|
||||||
|
background: linear-gradient(45deg, #c0c0c0 3%, #e5e5e5 10%, #d0d0d0 30%, #eaeaea 50%, #d0d0d0 70%, #e5e5e5 90%, #c0c0c0 97%) !important;
|
||||||
|
border: 1px solid #999 !important;
|
||||||
|
box-shadow:
|
||||||
|
4px 4px 12px rgba(0,0,0,0.18),
|
||||||
|
-2px -2px 4px rgba(255,255,255,0.15),
|
||||||
|
inset 0 1px 0 rgba(255,255,255,0.6) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .dropdown-item {
|
||||||
|
color: #444 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .dropdown-item:hover,
|
||||||
|
[data-jey-theme="chrome"] .dropdown-item:focus {
|
||||||
|
background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 100%) !important;
|
||||||
|
color: #222 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .dropdown-divider {
|
||||||
|
border-top-color: #aaa !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Alerts / Toasts
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .desk-alert {
|
||||||
|
background: linear-gradient(45deg, #c0c0c0 5%, #e5e5e5 15%, #d0d0d0 40%, #e8e8e8 60%, #d0d0d0 85%, #c0c0c0 95%) !important;
|
||||||
|
border: 1px solid #999 !important;
|
||||||
|
box-shadow:
|
||||||
|
3px 3px 8px rgba(0,0,0,0.12),
|
||||||
|
-1px -1px 3px rgba(255,255,255,0.3),
|
||||||
|
inset 0 1px 0 rgba(255,255,255,0.5) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Breadcrumbs
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .breadcrumb-container a {
|
||||||
|
color: #666 !important;
|
||||||
|
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .breadcrumb-container a:hover {
|
||||||
|
color: #333 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Timeline
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .new-timeline::before {
|
||||||
|
border-left-color: #aaa !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .timeline-dot {
|
||||||
|
background: linear-gradient(45deg, #bbb, #ddd, #bbb) !important;
|
||||||
|
border: 1px solid #999 !important;
|
||||||
|
box-shadow: 1px 1px 2px rgba(0,0,0,0.1), -1px -1px 1px rgba(255,255,255,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .comment-box {
|
||||||
|
background: linear-gradient(45deg, #c8c8c8 5%, #e5e5e5 20%, #d5d5d5 50%, #e5e5e5 80%, #c8c8c8 95%) !important;
|
||||||
|
border: 1px solid #aaa !important;
|
||||||
|
box-shadow: 1px 1px 3px rgba(0,0,0,0.08), -1px -1px 2px rgba(255,255,255,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Badges / Indicators
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .indicator-pill {
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 0 rgba(255,255,255,0.3),
|
||||||
|
1px 1px 1px rgba(0,0,0,0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Popovers
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .popover {
|
||||||
|
background: linear-gradient(45deg, #c0c0c0 3%, #e5e5e5 10%, #d0d0d0 30%, #eaeaea 50%, #d0d0d0 70%, #e5e5e5 90%, #c0c0c0 97%) !important;
|
||||||
|
border: 1px solid #999 !important;
|
||||||
|
box-shadow:
|
||||||
|
4px 4px 12px rgba(0,0,0,0.15),
|
||||||
|
-2px -2px 4px rgba(255,255,255,0.2),
|
||||||
|
inset 0 1px 0 rgba(255,255,255,0.5) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .popover .popover-body {
|
||||||
|
color: #404040 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Module Widget Cards — Chrome Panels with Conic Border Accent
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .ce-block .links-widget-box,
|
||||||
|
[data-jey-theme="chrome"] .ce-block .number-widget-box {
|
||||||
|
background: linear-gradient(45deg, #c0c0c0 3%, #e5e5e5 12%, #d0d0d0 30%, #eaeaea 50%, #d0d0d0 70%, #e5e5e5 88%, #c0c0c0 97%) !important;
|
||||||
|
border: 1px solid #aaa !important;
|
||||||
|
box-shadow:
|
||||||
|
2px 2px 6px rgba(0,0,0,0.1),
|
||||||
|
-1px -1px 3px rgba(255,255,255,0.35),
|
||||||
|
inset 0 1px 0 rgba(255,255,255,0.6) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .ce-block .links-widget-box::after,
|
||||||
|
[data-jey-theme="chrome"] .ce-block .number-widget-box::after {
|
||||||
|
background: conic-gradient(from 140deg, #a0a0a0, #e0e0e0, #888, #d0d0d0, #a0a0a0) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] .ce-block .links-widget-box:hover,
|
||||||
|
[data-jey-theme="chrome"] .ce-block .number-widget-box:hover {
|
||||||
|
box-shadow:
|
||||||
|
3px 3px 10px rgba(0,0,0,0.14),
|
||||||
|
-2px -2px 5px rgba(255,255,255,0.3),
|
||||||
|
inset 0 1px 0 rgba(255,255,255,0.7) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Scrollbars — Metal Cylinder
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] ::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] ::-webkit-scrollbar-track {
|
||||||
|
background: linear-gradient(90deg, #c0c0c0, #d0d0d0, #c0c0c0);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] ::-webkit-scrollbar-thumb {
|
||||||
|
background: linear-gradient(90deg, #888, #bbb, #999, #bbb, #888);
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] ::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: linear-gradient(90deg, #777, #aaa, #888, #aaa, #777);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Link Colors
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] a {
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-jey-theme="chrome"] a:hover {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Print — Reset
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
[data-jey-theme="chrome"] body,
|
||||||
|
[data-jey-theme="chrome"] .page-container,
|
||||||
|
[data-jey-theme="chrome"] .form-page,
|
||||||
|
[data-jey-theme="chrome"] .frappe-card,
|
||||||
|
[data-jey-theme="chrome"] .modal-content,
|
||||||
|
[data-jey-theme="chrome"] .navbar {
|
||||||
|
background: white !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
border-color: #ddd !important;
|
||||||
|
text-shadow: none !important;
|
||||||
|
}
|
||||||
|
[data-jey-theme="chrome"] .btn-primary {
|
||||||
|
background: #333 !important;
|
||||||
|
text-shadow: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -109,6 +109,29 @@
|
||||||
subscription: { paths: '<rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/><polyline points="7 10 10 13 17 7"/>' },
|
subscription: { paths: '<rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/><polyline points="7 10 10 13 17 7"/>' },
|
||||||
crm: { paths: '<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/>' },
|
crm: { paths: '<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/>' },
|
||||||
support: { paths: '<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>' },
|
support: { paths: '<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>' },
|
||||||
|
/* --- Framework sub-modules --- */
|
||||||
|
automation: { paths: '<polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/>' },
|
||||||
|
build: { paths: '<path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/>' },
|
||||||
|
data: { paths: '<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>' },
|
||||||
|
email: { paths: '<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22 6 12 13 2 6"/>' },
|
||||||
|
integrations: { paths: '<circle cx="12" cy="12" r="3"/><circle cx="19" cy="5" r="2"/><circle cx="5" cy="5" r="2"/><circle cx="19" cy="19" r="2"/><circle cx="5" cy="19" r="2"/><line x1="14.5" y1="9.5" x2="17.5" y2="6.5"/><line x1="9.5" y1="9.5" x2="6.5" y2="6.5"/><line x1="14.5" y1="14.5" x2="17.5" y2="17.5"/><line x1="9.5" y1="14.5" x2="6.5" y2="17.5"/>' },
|
||||||
|
printing: { paths: '<polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"/><rect x="6" y="14" width="12" height="8"/>' },
|
||||||
|
system: { paths: '<rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/><line x1="6" y1="8" x2="10" y2="8"/><line x1="6" y1="11" x2="14" y2="11"/>' },
|
||||||
|
users: { paths: '<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/>' },
|
||||||
|
website: { paths: '<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/>' },
|
||||||
|
/* --- HRMS sub-modules --- */
|
||||||
|
attendance: { paths: '<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><polyline points="9 16 11 18 15 14"/>' },
|
||||||
|
"shift & attendance": { paths: '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>' },
|
||||||
|
"shift & attendance": { paths: '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>' },
|
||||||
|
leaves: { paths: '<path d="M6 3v18"/><path d="M6 8c6-2 10 2 16 0"/><path d="M6 15c6-2 10 2 16 0"/>' },
|
||||||
|
payroll: { paths: '<rect x="2" y="4" width="20" height="16" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/><line x1="12" y1="4" x2="12" y2="20"/><line x1="6" y1="7" x2="6" y2="7.01" stroke-width="2"/><line x1="6" y1="14" x2="9" y2="14"/><line x1="6" y1="17" x2="8" y2="17"/><line x1="15" y1="14" x2="18" y2="14"/><line x1="15" y1="17" x2="19" y2="17"/>' },
|
||||||
|
people: { paths: '<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/>' },
|
||||||
|
recruitment: { paths: '<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><path d="M11 8v6"/><path d="M8 11h6"/>' },
|
||||||
|
performance: { paths: '<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>' },
|
||||||
|
expenses: { paths: '<line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/>' },
|
||||||
|
tenure: { paths: '<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="8" y1="14" x2="8" y2="14.01" stroke-width="2"/><line x1="12" y1="14" x2="12" y2="14.01" stroke-width="2"/><line x1="16" y1="14" x2="16" y2="14.01" stroke-width="2"/><line x1="8" y1="18" x2="8" y2="18.01" stroke-width="2"/>' },
|
||||||
|
"tax & benefits": { paths: '<path d="M4 2h16a2 2 0 012 2v16a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2z"/><path d="M16 8l-8 8"/><circle cx="9" cy="9" r="1.5"/><circle cx="15" cy="15" r="1.5"/>' },
|
||||||
|
"tax & benefits": { paths: '<path d="M4 2h16a2 2 0 012 2v16a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2z"/><path d="M16 8l-8 8"/><circle cx="9" cy="9" r="1.5"/><circle cx="15" cy="15" r="1.5"/>' },
|
||||||
_fallback: '<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/>'
|
_fallback: '<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/>'
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -787,3 +810,68 @@
|
||||||
var dragObserver = new MutationObserver(scheduleDrag);
|
var dragObserver = new MutationObserver(scheduleDrag);
|
||||||
dragObserver.observe(document.body, { childList: true, subtree: true });
|
dragObserver.observe(document.body, { childList: true, subtree: true });
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
List View — Override SVG sprite icons
|
||||||
|
Replaces <symbol> content in Frappe's SVG sprite sheets so every
|
||||||
|
<use href="#icon-..."> picks up the new artwork automatically.
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
(function () {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var SPRITE_OVERRIDES = {
|
||||||
|
/* icon-list (Lucide, 24×24, stroke) — 2×2 grid of squares */
|
||||||
|
"icon-list":
|
||||||
|
'<rect x="3" y="3" width="8" height="8" rx="1.5"/>' +
|
||||||
|
'<rect x="13" y="3" width="8" height="8" rx="1.5"/>' +
|
||||||
|
'<rect x="3" y="13" width="8" height="8" rx="1.5"/>' +
|
||||||
|
'<rect x="13" y="13" width="8" height="8" rx="1.5"/>',
|
||||||
|
|
||||||
|
/* icon-sort-descending (Timeless, 16×16, stroke) — vertical bar chart tall→short */
|
||||||
|
"icon-sort-descending":
|
||||||
|
'<path d="M3 13V3M6.33 13V5.5M9.67 13V8M13 13V10.5" ' +
|
||||||
|
'stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>',
|
||||||
|
|
||||||
|
/* icon-sort-ascending (Timeless, 16×16, stroke) — vertical bar chart short→tall */
|
||||||
|
"icon-sort-ascending":
|
||||||
|
'<path d="M3 13V10.5M6.33 13V8M9.67 13V5.5M13 13V3" ' +
|
||||||
|
'stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>',
|
||||||
|
|
||||||
|
/* es-line-filter (Espresso, 16×16, fill) — solid funnel shape */
|
||||||
|
"es-line-filter":
|
||||||
|
'<g class="es-line-filter">' +
|
||||||
|
'<path d="M1.5 2.5h13L10 8v3.5H6V8L1.5 2.5z"/>' +
|
||||||
|
'</g>'
|
||||||
|
};
|
||||||
|
|
||||||
|
var totalIcons = Object.keys(SPRITE_OVERRIDES).length;
|
||||||
|
|
||||||
|
function overrideSprites() {
|
||||||
|
var replaced = 0;
|
||||||
|
for (var id in SPRITE_OVERRIDES) {
|
||||||
|
var symbol = document.getElementById(id);
|
||||||
|
if (symbol && symbol.tagName.toLowerCase() === "symbol") {
|
||||||
|
symbol.innerHTML = SPRITE_OVERRIDES[id];
|
||||||
|
replaced++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return replaced;
|
||||||
|
}
|
||||||
|
|
||||||
|
function tryOverride() {
|
||||||
|
if (overrideSprites() >= totalIcons) return;
|
||||||
|
var attempts = 0;
|
||||||
|
var timer = setInterval(function () {
|
||||||
|
if (overrideSprites() >= totalIcons || ++attempts > 20) {
|
||||||
|
clearInterval(timer);
|
||||||
|
}
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.readyState === "loading") {
|
||||||
|
document.addEventListener("DOMContentLoaded", tryOverride);
|
||||||
|
} else {
|
||||||
|
tryOverride();
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue