diff --git a/CLAUDE.md b/CLAUDE.md
index aa88c12..aacb70d 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -54,5 +54,4 @@ Themes can change **everything** — not just icons:
- Theme-specific CSS must be wrapped in `[data-jey-theme="themename"]` selector.
- Shared CSS (checkboxes, animations) lives in `shared.css` without theme selectors.
-- Frappe uses `[data-theme="dark"]` on `` for dark mode — use for shared dark overrides only.
- CSS-only changes: clear browser cache. JS changes: `bench build --app jey_theme`.
diff --git a/jey_theme/public/css/shared.css b/jey_theme/public/css/shared.css
index 7a28590..b9ee3cb 100644
--- a/jey_theme/public/css/shared.css
+++ b/jey_theme/public/css/shared.css
@@ -69,30 +69,6 @@ input[type="checkbox"].disabled-selected {
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
@@ -169,16 +145,6 @@ input.list-header-checkbox:checked::after {
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 {
align-items: center !important;
@@ -190,6 +156,49 @@ input.list-header-checkbox:checked::after {
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
========================================================================== */
@@ -252,6 +261,7 @@ input.list-header-checkbox:checked::after {
white-space: nowrap;
}
+
/* ==========================================================================
Desktop Icons — Shared base (all themes)
========================================================================== */
@@ -286,6 +296,7 @@ input.list-header-checkbox:checked::after {
Icon Animations — Shared (all themes)
========================================================================== */
+/* Framework — gentle float */
.ico-framework { animation: ico-float 5s ease-in-out infinite; transform-origin: center; }
@keyframes ico-float {
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; }
@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-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; } }
@@ -425,3 +437,156 @@ input.list-header-checkbox:checked::after {
font-size: var(--text-sm);
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;
+}
diff --git a/jey_theme/public/css/theme_chrome.css b/jey_theme/public/css/theme_chrome.css
index e48a56f..5b6e7ac 100644
--- a/jey_theme/public/css/theme_chrome.css
+++ b/jey_theme/public/css/theme_chrome.css
@@ -83,3 +83,764 @@
filter: drop-shadow(0 1px 0 rgba(255,255,255,0.5)) !important;
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;
+ }
+}
diff --git a/jey_theme/public/js/jey_theme.js b/jey_theme/public/js/jey_theme.js
index 7347d4c..aa978c8 100644
--- a/jey_theme/public/js/jey_theme.js
+++ b/jey_theme/public/js/jey_theme.js
@@ -109,6 +109,29 @@
subscription: { paths: '' },
crm: { paths: '' },
support: { paths: '' },
+ /* --- Framework sub-modules --- */
+ automation: { paths: '' },
+ build: { paths: '' },
+ data: { paths: '' },
+ email: { paths: '' },
+ integrations: { paths: '' },
+ printing: { paths: '' },
+ system: { paths: '' },
+ users: { paths: '' },
+ website: { paths: '' },
+ /* --- HRMS sub-modules --- */
+ attendance: { paths: '' },
+ "shift & attendance": { paths: '' },
+ "shift & attendance": { paths: '' },
+ leaves: { paths: '' },
+ payroll: { paths: '' },
+ people: { paths: '' },
+ recruitment: { paths: '' },
+ performance: { paths: '' },
+ expenses: { paths: '' },
+ tenure: { paths: '' },
+ "tax & benefits": { paths: '' },
+ "tax & benefits": { paths: '' },
_fallback: ''
},
@@ -787,3 +810,68 @@
var dragObserver = new MutationObserver(scheduleDrag);
dragObserver.observe(document.body, { childList: true, subtree: true });
})();
+
+/* ==========================================================================
+ List View — Override SVG sprite icons
+ Replaces content in Frappe's SVG sprite sheets so every
+