From 843774e69533b639afd5b1565cfec8e61ba2b110 Mon Sep 17 00:00:00 2001 From: Ali <010109ali@gmail.com> Date: Mon, 13 Apr 2026 09:22:23 +0000 Subject: [PATCH] icons --- jey_theme/public/css/shared.css | 8 + jey_theme/public/css/theme_chrome.css | 605 ++---------------- .../html/erpnext_chrome_menu_v2(15).html | 166 ----- jey_theme/public/js/jey_theme.js | 192 +++++- 4 files changed, 241 insertions(+), 730 deletions(-) delete mode 100644 jey_theme/public/html/erpnext_chrome_menu_v2(15).html diff --git a/jey_theme/public/css/shared.css b/jey_theme/public/css/shared.css index b9ee3cb..accab87 100644 --- a/jey_theme/public/css/shared.css +++ b/jey_theme/public/css/shared.css @@ -590,3 +590,11 @@ input.list-header-checkbox:checked::after { background-repeat: no-repeat; background-position: center; } + +/* ========================================================================== + Hide "Getting Started" onboarding panels + ========================================================================== */ + +.user-onboarding { + display: none !important; +} diff --git a/jey_theme/public/css/theme_chrome.css b/jey_theme/public/css/theme_chrome.css index 1fc6cc8..0e4f6b2 100644 --- a/jey_theme/public/css/theme_chrome.css +++ b/jey_theme/public/css/theme_chrome.css @@ -286,19 +286,20 @@ ========================================================================== */ [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; + background: linear-gradient(160deg, #b8b8b8 0%, #f0f0f0 12%, #c0c0c0 28%, #f4f4f4 42%, #b8b8b8 58%, #ededed 72%, #aaa 88%, #ddd 100%) !important; + border-right: 1px solid #888 !important; box-shadow: - inset -1px 0 0 rgba(255,255,255,0.4), - 2px 0 6px rgba(0,0,0,0.08) !important; + inset -1px 0 0 rgba(255,255,255,0.6), + inset 0 1px 0 rgba(255,255,255,0.7), + inset 0 -1px 0 rgba(0,0,0,0.1), + 2px 0 8px rgba(0,0,0,0.12) !important; +} + +[data-jey-theme="chrome"] .body-sidebar-container .body-sidebar, +[data-jey-theme="chrome"] .body-sidebar-container .body-sidebar-top, +[data-jey-theme="chrome"] .body-sidebar-container .body-sidebar-bottom, +[data-jey-theme="chrome"] .body-sidebar-container .body-sidebar-cards { + background: transparent !important; } [data-jey-theme="chrome"] .body-sidebar .standard-sidebar-item .item-anchor:hover { @@ -321,6 +322,38 @@ } +/* ========================================================================== + Context Menu — Themed icons + ========================================================================== */ + +[data-jey-theme="chrome"] .frappe-menu .menu-item-icon .jey-icon { + width: 20px !important; + height: 20px !important; + stroke: #555 !important; + fill: none !important; + stroke-width: 1.8 !important; + stroke-linecap: round !important; + stroke-linejoin: round !important; + filter: drop-shadow(0 1px 0 rgba(255,255,255,0.4)) !important; +} + + +/* ========================================================================== + Sidebar Header — Themed icon + ========================================================================== */ + +[data-jey-theme="chrome"] .sidebar-header .header-logo .jey-icon { + width: 22px !important; + height: 22px !important; + stroke: #555 !important; + fill: none !important; + stroke-width: 1.8 !important; + stroke-linecap: round !important; + stroke-linejoin: round !important; + filter: drop-shadow(0 1px 0 rgba(255,255,255,0.4)) !important; +} + + /* ========================================================================== Primary Buttons — Polished Chrome with Shine ========================================================================== */ @@ -823,554 +856,6 @@ } -/* ========================================================================== - List Row Activity Area — timestamps, comments, likes - ========================================================================== */ - -[data-jey-theme="chrome"] .list-row-activity { - color: #777 !important; -} - -[data-jey-theme="chrome"] .list-row-activity .modified, -[data-jey-theme="chrome"] .list-row-activity .frappe-timestamp { - color: #888 !important; - text-shadow: 0 1px 0 rgba(255,255,255,0.4); -} - -[data-jey-theme="chrome"] .list-row-activity .comment-count { - color: #777 !important; -} - -[data-jey-theme="chrome"] .list-row-activity .es-icon, -[data-jey-theme="chrome"] .list-row-activity .icon { - color: #999 !important; - transition: color 0.2s ease, transform 0.2s ease; -} - -[data-jey-theme="chrome"] .list-row-activity .comment-count:hover .es-icon { - color: #555 !important; - transform: scale(1.15); -} - -/* Like button */ -[data-jey-theme="chrome"] .like-action { - transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); -} - -[data-jey-theme="chrome"] .like-action:hover { - transform: scale(1.3); -} - -[data-jey-theme="chrome"] .like-action .like-icon { - color: #aaa !important; - transition: color 0.2s ease; -} - -[data-jey-theme="chrome"] .like-action:hover .like-icon { - color: #c44 !important; -} - -[data-jey-theme="chrome"] .like-action.liked .like-icon { - color: #c44 !important; - filter: drop-shadow(0 0 3px rgba(204,68,68,0.3)); -} - - -/* ========================================================================== - Indicator Pills — Metallic colored variants - ========================================================================== */ - -[data-jey-theme="chrome"] .indicator-pill { - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.4), - 1px 1px 2px rgba(0,0,0,0.1), - -1px -1px 1px rgba(255,255,255,0.2) !important; - transition: transform 0.2s ease, box-shadow 0.2s ease; - border: 1px solid rgba(0,0,0,0.08) !important; -} - -[data-jey-theme="chrome"] .indicator-pill:hover { - transform: translateY(-1px); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.5), - 2px 2px 4px rgba(0,0,0,0.12), - -1px -1px 2px rgba(255,255,255,0.25) !important; -} - -[data-jey-theme="chrome"] .indicator-pill.blue { - background: linear-gradient(45deg, #6090c0 5%, #8ec0f0 30%, #7ab0e0 60%, #8ec0f0 90%) !important; - color: #fff !important; - border-color: #5080b0 !important; - text-shadow: 0 -1px 0 rgba(0,0,0,0.15); -} - -[data-jey-theme="chrome"] .indicator-pill.green { - background: linear-gradient(45deg, #3a8a5a 5%, #5cc080 30%, #48a868 60%, #5cc080 90%) !important; - color: #fff !important; - border-color: #2f7a4a !important; - text-shadow: 0 -1px 0 rgba(0,0,0,0.15); -} - -[data-jey-theme="chrome"] .indicator-pill.red { - background: linear-gradient(45deg, #b84040 5%, #e07070 30%, #cc5555 60%, #e07070 90%) !important; - color: #fff !important; - border-color: #a03030 !important; - text-shadow: 0 -1px 0 rgba(0,0,0,0.15); -} - -[data-jey-theme="chrome"] .indicator-pill.orange { - background: linear-gradient(45deg, #c07030 5%, #e8a060 30%, #d88848 60%, #e8a060 90%) !important; - color: #fff !important; - border-color: #a86028 !important; - text-shadow: 0 -1px 0 rgba(0,0,0,0.15); -} - -[data-jey-theme="chrome"] .indicator-pill.yellow { - background: linear-gradient(45deg, #b89820 5%, #e0c850 30%, #cca830 60%, #e0c850 90%) !important; - color: #444 !important; - border-color: #a08818 !important; -} - -[data-jey-theme="chrome"] .indicator-pill.gray { - background: linear-gradient(45deg, #999 5%, #c0c0c0 30%, #aaa 60%, #c0c0c0 90%) !important; - color: #fff !important; - border-color: #888 !important; -} - -[data-jey-theme="chrome"] .indicator-pill.purple { - background: linear-gradient(45deg, #7050a0 5%, #a080d0 30%, #8868b8 60%, #a080d0 90%) !important; - color: #fff !important; - border-color: #6040a0 !important; - text-shadow: 0 -1px 0 rgba(0,0,0,0.15); -} - -[data-jey-theme="chrome"] .indicator-pill.cyan { - background: linear-gradient(45deg, #2090a0 5%, #50c0d0 30%, #38a8b8 60%, #50c0d0 90%) !important; - color: #fff !important; - border-color: #1880a0 !important; - text-shadow: 0 -1px 0 rgba(0,0,0,0.15); -} - -[data-jey-theme="chrome"] .indicator-pill.pink { - background: linear-gradient(45deg, #c05088 5%, #e888b8 30%, #d068a0 60%, #e888b8 90%) !important; - color: #fff !important; - border-color: #b04080 !important; - text-shadow: 0 -1px 0 rgba(0,0,0,0.15); -} - - -/* ========================================================================== - SVG Icons — Chrome Tinting - ========================================================================== */ - -[data-jey-theme="chrome"] .icon, -[data-jey-theme="chrome"] .es-icon { - color: #777 !important; - transition: color 0.2s ease, transform 0.2s ease, filter 0.2s ease; -} - -[data-jey-theme="chrome"] .navbar .icon, -[data-jey-theme="chrome"] .navbar .es-icon { - color: #666 !important; - filter: drop-shadow(0 1px 0 rgba(255,255,255,0.4)); -} - - -/* ========================================================================== - Tag Pills - ========================================================================== */ - -[data-jey-theme="chrome"] .tag-pill { - background: linear-gradient(45deg, #bbb, #d8d8d8, #c0c0c0) !important; - border: 1px solid #999 !important; - color: #444 !important; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.4), - 1px 1px 1px rgba(0,0,0,0.08); - transition: transform 0.2s ease, box-shadow 0.2s ease; -} - -[data-jey-theme="chrome"] .tag-pill:hover { - transform: translateY(-1px); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.5), - 2px 2px 3px rgba(0,0,0,0.1); -} - - -/* ========================================================================== - Filter Area — Chrome styled - ========================================================================== */ - -[data-jey-theme="chrome"] .filter-popover { - background: linear-gradient(45deg, #c0c0c0 3%, #e5e5e5 12%, #d0d0d0 30%, #eaeaea 50%, #d0d0d0 70%, #e5e5e5 88%, #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"] .filter-box { - border-bottom: 1px solid #b0b0b0 !important; -} - -[data-jey-theme="chrome"] .filter-box .filter-field .form-control { - background: linear-gradient(180deg, #c8c8c8 0%, #d5d5d5 100%) !important; -} - -[data-jey-theme="chrome"] .remove-filter { - color: #999 !important; - transition: color 0.2s ease, transform 0.2s ease; -} - -[data-jey-theme="chrome"] .remove-filter:hover { - color: #c44 !important; - transform: scale(1.2); -} - -[data-jey-theme="chrome"] .active-tag-bar .btn { - background: linear-gradient(45deg, #bbb, #ddd, #c0c0c0) !important; - border: 1px solid #999 !important; - color: #444 !important; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.5), - 1px 1px 2px rgba(0,0,0,0.08); -} - - -/* ========================================================================== - List Sidebar — Chrome Styled - ========================================================================== */ - -[data-jey-theme="chrome"] .list-sidebar .list-sidebar-button { - color: #555 !important; - text-shadow: 0 1px 0 rgba(255,255,255,0.4); - transition: color 0.2s ease, transform 0.2s ease; -} - -[data-jey-theme="chrome"] .list-sidebar .list-sidebar-button:hover { - color: #333 !important; - transform: translateX(3px); -} - -[data-jey-theme="chrome"] .list-sidebar .filter-pill { - background: linear-gradient(45deg, #bbb, #ddd, #c0c0c0) !important; - border: 1px solid #999 !important; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.4), - 1px 1px 1px rgba(0,0,0,0.06); -} - -[data-jey-theme="chrome"] .list-sidebar .list-link { - color: #555 !important; - transition: all 0.2s ease; -} - -[data-jey-theme="chrome"] .list-sidebar .list-link:hover { - color: #333 !important; - background: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, transparent 100%) !important; - padding-left: 4px; -} - - -/* ========================================================================== - Filter/Sort Selector Button Groups - ========================================================================== */ - -[data-jey-theme="chrome"] .filter-selector .btn, -[data-jey-theme="chrome"] .sort-selector .btn { - background: linear-gradient(45deg, #bbb 5%, #e0e0e0 15%, #ccc 40%, #ddd 60%, #ccc 85%, #bbb 95%) !important; - border: 1px solid #999 !important; - color: #444 !important; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.5), - inset 0 -1px 0 rgba(0,0,0,0.05), - 1px 1px 2px rgba(0,0,0,0.08) !important; - text-shadow: 0 1px 0 rgba(255,255,255,0.4); - transition: all 0.2s ease; -} - -[data-jey-theme="chrome"] .filter-selector .btn:hover, -[data-jey-theme="chrome"] .sort-selector .btn:hover { - background: linear-gradient(45deg, #c0c0c0 5%, #e8e8e8 15%, #d4d4d4 40%, #e5e5e5 60%, #d4d4d4 85%, #c0c0c0 95%) !important; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.6), - 2px 2px 4px rgba(0,0,0,0.1) !important; -} - -[data-jey-theme="chrome"] .filter-label { - background: linear-gradient(45deg, #888, #aaa, #888) !important; - color: #f0f0f0 !important; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); -} - -[data-jey-theme="chrome"] .btn-group { - box-shadow: 1px 1px 3px rgba(0,0,0,0.08), -1px -1px 2px rgba(255,255,255,0.3); - border-radius: var(--border-radius) !important; -} - -[data-jey-theme="chrome"] .btn-paging { - background: linear-gradient(45deg, #bbb, #ddd, #c0c0c0, #ddd, #bbb) !important; - border: 1px solid #999 !important; - color: #444 !important; -} - - -/* ========================================================================== - ANIMATIONS - ========================================================================== */ - -/* --- Shine sweep keyframe --- */ -@keyframes jey-shine-sweep { - 0% { left: -30%; } - 100% { left: 130%; } -} - -/* --- Metal press (button click) --- */ -@keyframes jey-metal-press { - 0% { transform: scale(1); } - 40% { transform: scale(0.95); } - 100% { transform: scale(1); } -} - -/* --- Slide down reveal --- */ -@keyframes jey-slide-down { - from { - opacity: 0; - transform: translateY(-10px) scaleY(0.95); - } - to { - opacity: 1; - transform: translateY(0) scaleY(1); - } -} - -/* --- Slide up reveal --- */ -@keyframes jey-slide-up { - from { - opacity: 0; - transform: translateY(8px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* --- Fade in scale --- */ -@keyframes jey-fade-scale { - from { - opacity: 0; - transform: scale(0.92); - } - to { - opacity: 1; - transform: scale(1); - } -} - -/* --- Metal glint (subtle highlight flash) --- */ -@keyframes jey-glint { - 0% { opacity: 0; left: -20%; } - 50% { opacity: 1; } - 100% { opacity: 0; left: 120%; } -} - - -/* --- Dropdown menus: slide down --- */ -[data-jey-theme="chrome"] .dropdown-menu.show { - animation: jey-slide-down 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; - transform-origin: top center; -} - -/* --- Filter popover: slide down --- */ -[data-jey-theme="chrome"] .filter-popover { - animation: jey-slide-down 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards; - transform-origin: top center; -} - -/* --- Modals: scale in --- */ -[data-jey-theme="chrome"] .modal.show .modal-dialog { - animation: jey-fade-scale 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards; -} - -/* --- Popovers: scale in --- */ -[data-jey-theme="chrome"] .popover.show { - animation: jey-fade-scale 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; -} - -/* --- Toasts: slide up --- */ -[data-jey-theme="chrome"] .desk-alert { - animation: jey-slide-up 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards; -} - -/* --- All buttons: smooth transitions + metal press on click --- */ -[data-jey-theme="chrome"] .btn { - transition: all 0.2s ease, transform 0.15s ease; -} - -[data-jey-theme="chrome"] .btn:active { - animation: jey-metal-press 0.15s ease forwards; -} - -/* --- Default/Secondary buttons: shine sweep on hover --- */ -[data-jey-theme="chrome"] .btn-default, -[data-jey-theme="chrome"] .btn-secondary { - position: relative; - overflow: hidden; -} - -[data-jey-theme="chrome"] .btn-default::before, -[data-jey-theme="chrome"] .btn-secondary::before { - content: ""; - position: absolute; - top: 0; left: -30%; width: 20%; height: 100%; - background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); - transform: skewX(-15deg); - pointer-events: none; - transition: none; -} - -[data-jey-theme="chrome"] .btn-default:hover::before, -[data-jey-theme="chrome"] .btn-secondary:hover::before { - animation: jey-shine-sweep 0.5s ease forwards; -} - -/* --- Sidebar items: smooth slide hover --- */ -[data-jey-theme="chrome"] .body-sidebar .standard-sidebar-item .item-anchor { - transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1); -} - -[data-jey-theme="chrome"] .body-sidebar .standard-sidebar-item .item-anchor:hover { - padding-left: 4px; -} - -/* --- Navbar links: lift on hover --- */ -[data-jey-theme="chrome"] .navbar .navbar-nav .nav-link { - transition: all 0.2s ease; -} - -[data-jey-theme="chrome"] .navbar .navbar-nav .nav-link:hover { - transform: translateY(-1px); -} - -/* --- List rows: metallic glint on hover --- */ -[data-jey-theme="chrome"] .list-row-container { - position: relative; - overflow: hidden; - transition: background 0.2s ease; -} - -[data-jey-theme="chrome"] .list-row-container::before { - content: ""; - position: absolute; - top: 0; left: -20%; width: 15%; height: 100%; - background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); - transform: skewX(-15deg); - pointer-events: none; - opacity: 0; - transition: none; -} - -[data-jey-theme="chrome"] .list-row-container:hover::before { - animation: jey-glint 0.6s ease forwards; -} - -/* --- Grid rows: hover transition --- */ -[data-jey-theme="chrome"] .rows .grid-row { - transition: background 0.2s ease; -} - -/* --- Form sections: smooth collapse/expand --- */ -[data-jey-theme="chrome"] .section-body { - transition: max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1), - opacity 0.25s ease; -} - -/* --- Form tabs: smooth underline slide --- */ -[data-jey-theme="chrome"] .form-tabs .nav-link { - transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important; - position: relative; -} - -/* --- Awesomebar dropdown: slide down --- */ -[data-jey-theme="chrome"] .awesomplete > ul { - animation: jey-slide-down 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; - background: linear-gradient(45deg, #c0c0c0 3%, #e5e5e5 12%, #d0d0d0 30%, #eaeaea 50%, #d0d0d0 70%, #e5e5e5 88%, #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"] .awesomplete > ul > li:hover, -[data-jey-theme="chrome"] .awesomplete > ul > li[aria-selected="true"] { - background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 100%) !important; -} - -/* --- Card hover: lift + enhanced shadow --- */ -[data-jey-theme="chrome"] .frappe-card { - transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), - box-shadow 0.25s ease; -} - -/* --- Indicator pills: bounce on appear --- */ -[data-jey-theme="chrome"] .indicator-pill { - animation: jey-slide-up 0.2s ease forwards; -} - -/* --- Comment box: fade in --- */ -[data-jey-theme="chrome"] .comment-box { - transition: box-shadow 0.2s ease; -} - -[data-jey-theme="chrome"] .comment-box:focus-within { - box-shadow: - 2px 2px 6px 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; -} - -/* --- Page container fade in on route change --- */ -[data-jey-theme="chrome"] .page-container[data-page-container] { - animation: jey-fade-scale 0.2s ease forwards; -} - -/* --- Link item in widget cards: slide right on hover --- */ -[data-jey-theme="chrome"] .links-widget-box .link-item { - transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), - background 0.2s ease, - box-shadow 0.2s ease; -} - -[data-jey-theme="chrome"] .links-widget-box .link-item:hover { - box-shadow: inset 3px 0 0 #999; -} - -/* --- Sidebar section labels: subtle slide --- */ -[data-jey-theme="chrome"] .sidebar-section { - transition: background 0.2s ease; -} - -/* --- Number widget value: count up glow --- */ -[data-jey-theme="chrome"] .number-widget-box .widget-title { - color: #555 !important; - text-shadow: 0 1px 0 rgba(255,255,255,0.5); -} - -[data-jey-theme="chrome"] .number-widget-box .number { - color: #333 !important; - text-shadow: 0 1px 0 rgba(255,255,255,0.5); - transition: transform 0.2s ease; -} - -[data-jey-theme="chrome"] .number-widget-box:hover .number { - transform: scale(1.05); -} - - /* ========================================================================== Print — Reset ========================================================================== */ diff --git a/jey_theme/public/html/erpnext_chrome_menu_v2(15).html b/jey_theme/public/html/erpnext_chrome_menu_v2(15).html deleted file mode 100644 index e7bc1c0..0000000 --- a/jey_theme/public/html/erpnext_chrome_menu_v2(15).html +++ /dev/null @@ -1,166 +0,0 @@ - - - -