icons
This commit is contained in:
parent
96638dd26f
commit
843774e695
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
========================================================================== */
|
||||
|
|
|
|||
|
|
@ -1,166 +0,0 @@
|
|||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
|
||||
|
||||
.mod-grid {
|
||||
max-width: 920px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 2rem 2.5rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 2.8rem 1.2rem;
|
||||
justify-items: center;
|
||||
background: #fff;
|
||||
border-radius: 18px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mod-grid::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,255,255,0.5) 0%, transparent 70%); pointer-events: none; z-index: 1; }
|
||||
@media (max-width: 700px) { .mod-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 1rem; padding: 2rem 1rem; } }
|
||||
|
||||
.title-block { grid-column: 1 / -1; position: relative; z-index: 2; text-align: center; margin-bottom: 0.6rem; padding: 0.8rem 0 1rem; user-select: none; }
|
||||
.title-groove { display: inline-block; padding: 0 2rem; position: relative; }
|
||||
.title-groove::before, .title-groove::after { content: ''; position: absolute; top: 50%; width: 60px; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent); }
|
||||
.title-groove::before { right: 100%; margin-right: 4px; }
|
||||
.title-groove::after { left: 100%; margin-left: 4px; }
|
||||
.title-text { font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1; position: relative; display: inline-block; color: #b0b0b0; background: linear-gradient(180deg, #c8c8c8 0%, #b0b0b0 25%, #d5d5d5 48%, #aaa 52%, #bbb 75%, #a8a8a8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 -1px 0 rgba(255,255,255,0.5)); animation: title-shimmer 6s ease-in-out infinite; }
|
||||
.title-shadow { position: absolute; top: 2px; left: 0; right: 0; font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1; color: rgba(0,0,0,0.1); z-index: -1; pointer-events: none; }
|
||||
.title-highlight { position: absolute; top: 0; left: 0; right: 0; font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1; background: linear-gradient(105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.5) 45%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.5) 55%, transparent 65%, transparent 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: title-sweep 5s ease-in-out infinite; pointer-events: none; }
|
||||
@keyframes title-sweep { 0%, 15% { background-position: 130% center; } 50%, 65% { background-position: -30% center; } 100% { background-position: 130% center; } }
|
||||
@keyframes title-shimmer { 0%, 100% { filter: drop-shadow(0 -1px 0 rgba(255,255,255,0.5)) brightness(1); } 50% { filter: drop-shadow(0 -1px 0 rgba(255,255,255,0.5)) brightness(1.05); } }
|
||||
.title-sub { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 0.35em; text-transform: uppercase; color: #bbb; text-shadow: none; margin-top: 6px; }
|
||||
|
||||
.mod-item { display: flex; flex-direction: column; align-items: center; gap: 14px; cursor: pointer; transition: transform 0.2s ease; position: relative; z-index: 2; }
|
||||
.mod-item:hover { transform: translateY(-2px); }
|
||||
.mod-item:hover .btn-shadow { transform: scale(1.05); opacity: 0.22; }
|
||||
.mod-item:active { transform: scale(0.97); }
|
||||
|
||||
.btn-wrap { position: relative; width: 76px; height: 80px; display: flex; align-items: flex-start; justify-content: center; }
|
||||
.btn-shadow { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 62px; height: 10px; background: radial-gradient(ellipse, rgba(0,0,0,0.25) 0%, transparent 70%); border-radius: 50%; opacity: 0.3; transition: all 0.2s ease; z-index: 0; }
|
||||
.btn-seat { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle, rgba(0,0,0,0.04) 60%, transparent 72%); box-shadow: inset 0 2px 5px rgba(0,0,0,0.08), inset 0 -1px 2px rgba(255,255,255,0.5); z-index: 1; }
|
||||
|
||||
.chrome-outer { width: 72px; height: 72px; border-radius: 50%; position: relative; z-index: 2; background: radial-gradient(ellipse at 35% 20%, rgba(255,255,255,0.7) 0%, transparent 55%), linear-gradient(180deg, #e0e0e0 0%, #b8b8b8 100%); box-shadow: 0 4px 10px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.1), inset 0 1px 1px rgba(255,255,255,0.7); transition: box-shadow 0.3s ease; }
|
||||
.mod-item:hover .chrome-outer { box-shadow: 0 6px 16px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.12), 0 0 14px rgba(255,255,255,0.2), inset 0 1px 1px rgba(255,255,255,0.7); }
|
||||
|
||||
.chrome-ring-outer { position: absolute; inset: 2px; border-radius: 50%; background: conic-gradient(from 140deg, #a0a0a0 0deg, #f2f2f2 40deg, #777 80deg, #e5e5e5 120deg, #959595 170deg, #ededed 210deg, #808080 260deg, #d8d8d8 310deg, #a0a0a0 360deg); box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); overflow: hidden; }
|
||||
.ring-glow { position: absolute; inset: -10px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, transparent 140deg, rgba(255,255,255,0.55) 165deg, rgba(255,255,255,0.8) 180deg, rgba(255,255,255,0.55) 195deg, transparent 220deg, transparent 360deg); animation: rotate-glow 8s linear infinite; pointer-events: none; }
|
||||
@keyframes rotate-glow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
||||
|
||||
.chrome-gap { position: absolute; inset: 5px; border-radius: 50%; background: linear-gradient(180deg, #888 0%, #aaa 50%, #999 100%); box-shadow: inset 0 1px 3px rgba(0,0,0,0.35), inset 0 -1px 1px rgba(255,255,255,0.2); }
|
||||
.chrome-ring-inner { position: absolute; inset: 6px; border-radius: 50%; background: conic-gradient(from 200deg, #b0b0b0 0deg, #eee 30deg, #999 70deg, #ddd 110deg, #aaa 160deg, #f0f0f0 200deg, #909090 250deg, #ccc 300deg, #b0b0b0 360deg); box-shadow: inset 0 1px 1px rgba(0,0,0,0.15); }
|
||||
|
||||
.chrome-face { position: absolute; inset: 9px; border-radius: 50%; overflow: hidden; background: linear-gradient(168deg, #f4f4f4 0%, #e0e0e0 45%, #d4d4d4 100%); box-shadow: inset 0 3px 7px rgba(255,255,255,0.7), inset 0 -3px 6px rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: center; }
|
||||
.face-glow { position: absolute; inset: 0; border-radius: 50%; animation: face-light 8s ease-in-out infinite; pointer-events: none; z-index: 1; }
|
||||
@keyframes face-light { 0% { background: radial-gradient(circle at 25% 20%, rgba(255,255,255,0.5) 0%, transparent 55%); } 25% { background: radial-gradient(circle at 75% 25%, rgba(255,255,255,0.5) 0%, transparent 55%); } 50% { background: radial-gradient(circle at 70% 75%, rgba(255,255,255,0.35) 0%, transparent 55%); } 75% { background: radial-gradient(circle at 25% 70%, rgba(255,255,255,0.35) 0%, transparent 55%); } 100% { background: radial-gradient(circle at 25% 20%, rgba(255,255,255,0.5) 0%, transparent 55%); } }
|
||||
.face-reflection { position: absolute; top: 15%; left: 10%; width: 80%; height: 30%; background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.15) 60%, transparent 100%); border-radius: 50%; pointer-events: none; z-index: 1; animation: refl-drift 10s ease-in-out infinite; }
|
||||
@keyframes refl-drift { 0%, 100% { top: 12%; opacity: 0.7; } 50% { top: 18%; opacity: 0.5; } }
|
||||
|
||||
.chrome-face svg { width: 24px; height: 24px; stroke: #505050; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 rgba(255,255,255,0.5)); position: relative; z-index: 2; }
|
||||
|
||||
.mod-label { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.03em; color: #666; text-align: center; line-height: 1.3; max-width: 90px; transition: color 0.2s; }
|
||||
.mod-item:hover .mod-label { color: #333; }
|
||||
|
||||
.tooltip { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%) translateY(100%); background: rgba(50,50,50,0.92); color: #e0e0e0; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 400; padding: 6px 10px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 20; }
|
||||
.tooltip::before { content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid rgba(50,50,50,0.92); }
|
||||
.mod-item:hover .tooltip { opacity: 1; transform: translateX(-50%) translateY(calc(100% + 4px)); }
|
||||
|
||||
.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; } 30% { transform: translateY(-2px) rotate(0.8deg); opacity: 1; } 70% { transform: translateY(0.5px) rotate(-0.4deg); opacity: 0.9; } }
|
||||
.ico-org { animation: ico-org 6s ease-in-out infinite; transform-origin: center bottom; }
|
||||
@keyframes ico-org { 0%,100% { transform: scaleY(1) scaleX(1); } 25% { transform: scaleY(1.03) scaleX(0.99); } 50% { transform: scaleY(1.05) scaleX(0.98); } 75% { transform: scaleY(1.02) scaleX(1); } }
|
||||
.ico-acc .acc-btn { animation: ico-press 3s ease-in-out infinite; }
|
||||
@keyframes ico-press { 0%,25%,100% { opacity: 0.5; stroke-width: 2.5; } 12% { opacity: 1; stroke-width: 3.2; } }
|
||||
.ico-assets { animation: ico-safe 6s ease-in-out infinite; transform-origin: center; }
|
||||
.ico-assets .lock-dot { animation: ico-blink 5s ease-in-out infinite; }
|
||||
@keyframes ico-safe { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-0.6px); } 60% { transform: translateY(0.3px); } }
|
||||
@keyframes ico-blink { 0%,35%,65%,100% { opacity: 1; } 50% { opacity: 0.15; } }
|
||||
.ico-buying { animation: ico-cart 6s ease-in-out infinite; transform-origin: 12px 21px; }
|
||||
@keyframes ico-cart { 0%,100% { transform: translateX(0) rotate(0deg); } 20% { transform: translateX(1.5px) rotate(0.8deg); } 50% { transform: translateX(-0.5px) rotate(-0.3deg); } 80% { transform: translateX(0.8px) rotate(0.4deg); } }
|
||||
.ico-mfg .gear1 { animation: ico-spin 9s linear infinite; transform-origin: 9px 12px; }
|
||||
.ico-mfg .gear2 { animation: ico-spin-r 7s linear infinite; transform-origin: 17px 8px; }
|
||||
@keyframes ico-spin { to { transform: rotate(360deg); } }
|
||||
@keyframes ico-spin-r { to { transform: rotate(-360deg); } }
|
||||
.ico-proj .col1 { animation: ico-g1 5s ease-in-out infinite; transform-origin: 5.5px 21px; }
|
||||
.ico-proj .col2 { animation: ico-g2 5s ease-in-out infinite 0.5s; transform-origin: 12.5px 15px; }
|
||||
.ico-proj .col3 { animation: ico-g3 5s ease-in-out infinite 1s; transform-origin: 19.5px 18px; }
|
||||
@keyframes ico-g1 { 0%,100% { transform: scaleY(1); opacity: 0.75; } 50% { transform: scaleY(0.85); opacity: 1; } }
|
||||
@keyframes ico-g2 { 0%,100% { transform: scaleY(1); opacity: 0.75; } 50% { transform: scaleY(1.15); opacity: 1; } }
|
||||
@keyframes ico-g3 { 0%,100% { transform: scaleY(1); opacity: 0.75; } 50% { transform: scaleY(0.88); opacity: 1; } }
|
||||
.ico-quality { animation: ico-shield 6s ease-in-out infinite; transform-origin: 12px 14px; }
|
||||
@keyframes ico-shield { 0%,100% { transform: rotate(0deg) scale(1); } 15% { transform: rotate(1.5deg) scale(1.03); } 35% { transform: rotate(-0.5deg) scale(1.01); } 55% { transform: rotate(-1.5deg) scale(1.03); } 75% { transform: rotate(0.5deg) scale(1.01); } }
|
||||
.ico-selling { animation: ico-sell 4s ease-in-out infinite; transform-origin: center; }
|
||||
.ico-selling .arrow-head { animation: ico-up 4s ease-in-out infinite; }
|
||||
@keyframes ico-sell { 0%,100% { opacity: 0.8; } 50% { opacity: 1; } }
|
||||
@keyframes ico-up { 0%,100% { transform: translate(0,0); } 30% { transform: translate(1px, -1.5px); } 60% { transform: translate(2px, -2.5px); } }
|
||||
.ico-stock { animation: ico-bob 5s ease-in-out infinite; transform-origin: center; }
|
||||
@keyframes ico-bob { 0%,100% { transform: rotate(0deg) translateY(0); } 20% { transform: rotate(2deg) translateY(-0.7px); } 50% { transform: rotate(-1deg) translateY(0.3px); } 80% { transform: rotate(1.5deg) translateY(-0.4px); } }
|
||||
.ico-sub .person-l { animation: ico-rl 6s ease-in-out infinite; transform-origin: 8px 12px; }
|
||||
.ico-sub .person-r { animation: ico-rr 6s ease-in-out infinite; transform-origin: 16px 12px; }
|
||||
@keyframes ico-rl { 0%,100% { transform: translateX(0) rotate(0deg); } 30% { transform: translateX(1px) rotate(1deg); } 60% { transform: translateX(1.5px) rotate(0.5deg); } }
|
||||
@keyframes ico-rr { 0%,100% { transform: translateX(0) rotate(0deg); } 30% { transform: translateX(-1px) rotate(-1deg); } 60% { transform: translateX(-1.5px) rotate(-0.5deg); } }
|
||||
.ico-settings { animation: ico-gear-main 12s linear infinite; transform-origin: center; }
|
||||
@keyframes ico-gear-main { to { transform: rotate(360deg); } }
|
||||
.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; } }
|
||||
@keyframes ico-ph { 0%,100% { opacity: 0.4; stroke-width: 1.8; } 50% { opacity: 1; stroke-width: 2.4; } }
|
||||
</style>
|
||||
|
||||
<div class="mod-grid">
|
||||
|
||||
<div class="title-block">
|
||||
<div class="title-groove">
|
||||
<div class="title-shadow">JEY ERP</div>
|
||||
<div class="title-text">JEY ERP</div>
|
||||
<div class="title-highlight">JEY ERP</div>
|
||||
</div>
|
||||
<div class="title-sub">Enterprise resource planning</div>
|
||||
</div>
|
||||
|
||||
<div class="mod-item" onclick="sendPrompt('Open Framework settings')"><div class="btn-wrap"><div class="btn-shadow"></div><div class="btn-seat"></div><div class="chrome-outer"><div class="chrome-ring-outer"><div class="ring-glow"></div></div><div class="chrome-gap"></div><div class="chrome-ring-inner"></div><div class="chrome-face"><div class="face-glow"></div><div class="face-reflection"></div><svg viewBox="0 0 24 24" class="ico-framework"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg></div></div></div><span class="mod-label">Framework</span><div class="tooltip">Core modules & doctypes</div></div>
|
||||
|
||||
<div class="mod-item" onclick="sendPrompt('Open Organization settings')"><div class="btn-wrap"><div class="btn-shadow"></div><div class="btn-seat"></div><div class="chrome-outer"><div class="chrome-ring-outer"><div class="ring-glow"></div></div><div class="chrome-gap"></div><div class="chrome-ring-inner"></div><div class="chrome-face"><div class="face-glow"></div><div class="face-reflection"></div><svg viewBox="0 0 24 24" class="ico-org"><rect x="4" y="2" width="16" height="20" rx="1"/><line x1="9" y1="6" x2="9" y2="6.01"/><line x1="15" y1="6" x2="15" y2="6.01"/><line x1="9" y1="10" x2="9" y2="10.01"/><line x1="15" y1="10" x2="15" y2="10.01"/><line x1="9" y1="14" x2="9" y2="14.01"/><line x1="15" y1="14" x2="15" y2="14.01"/><path d="M10 22v-4h4v4"/></svg></div></div></div><span class="mod-label">Organization</span><div class="tooltip">Company, branches, departments</div></div>
|
||||
|
||||
<div class="mod-item" onclick="sendPrompt('Open Accounting settings')"><div class="btn-wrap"><div class="btn-shadow"></div><div class="btn-seat"></div><div class="chrome-outer"><div class="chrome-ring-outer"><div class="ring-glow"></div></div><div class="chrome-gap"></div><div class="chrome-ring-inner"></div><div class="chrome-face"><div class="face-glow"></div><div class="face-reflection"></div><svg viewBox="0 0 24 24" class="ico-acc"><rect x="4" y="2" width="16" height="20" rx="2"/><rect x="7" y="5" width="10" height="4" rx="1"/><line class="acc-btn" x1="7" y1="13" x2="7" y2="13.01" stroke-width="2.5"/><line x1="12" y1="13" x2="12" y2="13.01" stroke-width="2.5"/><line class="acc-btn" x1="17" y1="13" x2="17" y2="13.01" stroke-width="2.5" style="animation-delay:0.4s"/><line x1="7" y1="17" x2="7" y2="17.01" stroke-width="2.5"/><line class="acc-btn" x1="12" y1="17" x2="12" y2="17.01" stroke-width="2.5" style="animation-delay:0.8s"/><line x1="17" y1="17" x2="17" y2="17.01" stroke-width="2.5"/></svg></div></div></div><span class="mod-label">Accounting</span><div class="tooltip">GL, invoices, ƏDV, reports</div></div>
|
||||
|
||||
<div class="mod-item" onclick="sendPrompt('Open Assets settings')"><div class="btn-wrap"><div class="btn-shadow"></div><div class="btn-seat"></div><div class="chrome-outer"><div class="chrome-ring-outer"><div class="ring-glow"></div></div><div class="chrome-gap"></div><div class="chrome-ring-inner"></div><div class="chrome-face"><div class="face-glow"></div><div class="face-reflection"></div><svg viewBox="0 0 24 24" class="ico-assets"><rect x="3" y="5" width="18" height="15" rx="2"/><line x1="3" y1="10" x2="21" y2="10"/><circle class="lock-dot" cx="12" cy="15" r="2"/><line x1="12" y1="13" x2="12" y2="10"/><line x1="7" y1="5" x2="7" y2="2"/><line x1="17" y1="5" x2="17" y2="2"/></svg></div></div></div><span class="mod-label">Assets</span><div class="tooltip">Fixed assets & depreciation</div></div>
|
||||
|
||||
<div class="mod-item" onclick="sendPrompt('Open Buying settings')"><div class="btn-wrap"><div class="btn-shadow"></div><div class="btn-seat"></div><div class="chrome-outer"><div class="chrome-ring-outer"><div class="ring-glow"></div></div><div class="chrome-gap"></div><div class="chrome-ring-inner"></div><div class="chrome-face"><div class="face-glow"></div><div class="face-reflection"></div><svg viewBox="0 0 24 24" class="ico-buying"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"/></svg></div></div></div><span class="mod-label">Buying</span><div class="tooltip">Purchase orders & suppliers</div></div>
|
||||
|
||||
<div class="mod-item" onclick="sendPrompt('Open Manufacturing settings')"><div class="btn-wrap"><div class="btn-shadow"></div><div class="btn-seat"></div><div class="chrome-outer"><div class="chrome-ring-outer"><div class="ring-glow"></div></div><div class="chrome-gap"></div><div class="chrome-ring-inner"></div><div class="chrome-face"><div class="face-glow"></div><div class="face-reflection"></div><svg viewBox="0 0 24 24" class="ico-mfg"><g class="gear1"><circle cx="9" cy="12" r="3"/><path d="M9 9V4.5"/><path d="M6.5 10.5L3 8"/><path d="M6.5 13.5L3 16"/><path d="M9 15v4.5"/><path d="M11.5 10.5L15 8"/><path d="M11.5 13.5L15 16"/></g><g class="gear2"><circle cx="17" cy="8" r="2.5"/><path d="M17 5.5V3"/><path d="M19.2 7L21 5.5"/><path d="M19.2 9L21 10.5"/><path d="M14.8 7L13 5.5"/><path d="M14.8 9L13 10.5"/></g></svg></div></div></div><span class="mod-label">Manufacturing</span><div class="tooltip">BOM, work orders, routing</div></div>
|
||||
|
||||
<div class="mod-item" onclick="sendPrompt('Open Projects settings')"><div class="btn-wrap"><div class="btn-shadow"></div><div class="btn-seat"></div><div class="chrome-outer"><div class="chrome-ring-outer"><div class="ring-glow"></div></div><div class="chrome-gap"></div><div class="chrome-ring-inner"></div><div class="chrome-face"><div class="face-glow"></div><div class="face-reflection"></div><svg viewBox="0 0 24 24" class="ico-proj"><rect class="col1" x="3" y="3" width="5" height="18" rx="1"/><rect class="col2" x="10" y="3" width="5" height="12" rx="1"/><rect class="col3" x="17" y="3" width="5" height="15" rx="1"/></svg></div></div></div><span class="mod-label">Projects</span><div class="tooltip">Tasks, timesheets, Gantt</div></div>
|
||||
|
||||
<div class="mod-item" onclick="sendPrompt('Open Quality settings')"><div class="btn-wrap"><div class="btn-shadow"></div><div class="btn-seat"></div><div class="chrome-outer"><div class="chrome-ring-outer"><div class="ring-glow"></div></div><div class="chrome-gap"></div><div class="chrome-ring-inner"></div><div class="chrome-face"><div class="face-glow"></div><div class="face-reflection"></div><svg viewBox="0 0 24 24" class="ico-quality"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></svg></div></div></div><span class="mod-label">Quality</span><div class="tooltip">Inspections & procedures</div></div>
|
||||
|
||||
<div class="mod-item" onclick="sendPrompt('Open Selling settings')"><div class="btn-wrap"><div class="btn-shadow"></div><div class="btn-seat"></div><div class="chrome-outer"><div class="chrome-ring-outer"><div class="ring-glow"></div></div><div class="chrome-gap"></div><div class="chrome-ring-inner"></div><div class="chrome-face"><div class="face-glow"></div><div class="face-reflection"></div><svg viewBox="0 0 24 24" class="ico-selling"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline class="arrow-head" points="16 7 22 7 22 13"/></svg></div></div></div><span class="mod-label">Selling</span><div class="tooltip">Quotations, sales orders</div></div>
|
||||
|
||||
<div class="mod-item" onclick="sendPrompt('Open Stock settings')"><div class="btn-wrap"><div class="btn-shadow"></div><div class="btn-seat"></div><div class="chrome-outer"><div class="chrome-ring-outer"><div class="ring-glow"></div></div><div class="chrome-gap"></div><div class="chrome-ring-inner"></div><div class="chrome-face"><div class="face-glow"></div><div class="face-reflection"></div><svg viewBox="0 0 24 24" class="ico-stock"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg></div></div></div><span class="mod-label">Stock</span><div class="tooltip">Warehouse, inventory, delivery</div></div>
|
||||
|
||||
<div class="mod-item" onclick="sendPrompt('Open Subcontracting settings')"><div class="btn-wrap"><div class="btn-shadow"></div><div class="btn-seat"></div><div class="chrome-outer"><div class="chrome-ring-outer"><div class="ring-glow"></div></div><div class="chrome-gap"></div><div class="chrome-ring-inner"></div><div class="chrome-face"><div class="face-glow"></div><div class="face-reflection"></div><svg viewBox="0 0 24 24" class="ico-sub"><g class="person-l"><circle cx="8" cy="7" r="3"/><path d="M7 11H4a2 2 0 00-2 2v1"/><path d="M11 18l-3-3 2-2 3 3"/></g><g class="person-r"><circle cx="16" cy="7" r="3"/><path d="M17 11h3a2 2 0 012 2v1"/><path d="M13 18l3-3-2-2-3 3"/></g></svg></div></div></div><span class="mod-label">Subcontracting</span><div class="tooltip">Outsourced operations</div></div>
|
||||
|
||||
<div class="mod-item" onclick="sendPrompt('Open ERP Settings')"><div class="btn-wrap"><div class="btn-shadow"></div><div class="btn-seat"></div><div class="chrome-outer"><div class="chrome-ring-outer"><div class="ring-glow"></div></div><div class="chrome-gap"></div><div class="chrome-ring-inner"></div><div class="chrome-face"><div class="face-glow"></div><div class="face-reflection"></div><svg viewBox="0 0 24 24" class="ico-settings"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.32 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg></div></div></div><span class="mod-label">ERP Settings</span><div class="tooltip">Global configuration</div></div>
|
||||
|
||||
<div class="mod-item" onclick="sendPrompt('Open HR settings')"><div class="btn-wrap"><div class="btn-shadow"></div><div class="btn-seat"></div><div class="chrome-outer"><div class="chrome-ring-outer"><div class="ring-glow"></div></div><div class="chrome-gap"></div><div class="chrome-ring-inner"></div><div class="chrome-face"><div class="face-glow"></div><div class="face-reflection"></div><svg viewBox="0 0 24 24" class="ico-hr"><path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line class="plus-v" x1="20" y1="8" x2="20" y2="14"/><line class="plus-h" x1="23" y1="11" x2="17" y2="11"/></svg></div></div></div><span class="mod-label">HR</span><div class="tooltip">Payroll, leaves, attendance</div></div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll('.ring-glow').forEach((el, i) => { el.style.animationDelay = (i * -0.6) + 's'; });
|
||||
document.querySelectorAll('.face-glow').forEach((el, i) => { el.style.animationDelay = (i * -0.6) + 's'; });
|
||||
document.querySelectorAll('.face-reflection').forEach((el, i) => { el.style.animationDelay = (i * -0.8) + 's'; });
|
||||
|
||||
const actx = new (window.AudioContext || window.webkitAudioContext)();
|
||||
function clickSound() {
|
||||
const o = actx.createOscillator(); const g = actx.createGain();
|
||||
o.connect(g); g.connect(actx.destination);
|
||||
o.frequency.setValueAtTime(3200, actx.currentTime);
|
||||
o.frequency.exponentialRampToValueAtTime(800, actx.currentTime + 0.04);
|
||||
g.gain.setValueAtTime(0.12, actx.currentTime);
|
||||
g.gain.exponentialRampToValueAtTime(0.001, actx.currentTime + 0.06);
|
||||
o.start(actx.currentTime); o.stop(actx.currentTime + 0.06);
|
||||
}
|
||||
document.querySelectorAll('.mod-item').forEach(el => {
|
||||
el.addEventListener('mousedown', () => { if (actx.state === 'suspended') actx.resume(); clickSound(); });
|
||||
});
|
||||
</script>
|
||||
|
|
@ -190,6 +190,16 @@
|
|||
return icons._fallback || THEME_ICONS.chrome._fallback;
|
||||
}
|
||||
|
||||
/** Returns true only if key has an explicit entry (not _fallback). */
|
||||
function hasIconDef(key) {
|
||||
if (!key) return false;
|
||||
var theme = currentTheme();
|
||||
var icons = THEME_ICONS[theme] || THEME_ICONS.chrome;
|
||||
if (icons[key] && key !== "_fallback") return true;
|
||||
if (THEME_ICONS.chrome[key] && key !== "_fallback") return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
function makeSvg(icon) {
|
||||
var paths = typeof icon === "string" ? icon : icon.paths;
|
||||
var cls = (typeof icon === "object" && icon.cls) ? icon.cls : "";
|
||||
|
|
@ -267,6 +277,54 @@
|
|||
});
|
||||
}
|
||||
|
||||
/* ==================================================================
|
||||
Context menu icon replacement
|
||||
Replaces default ERPNext icons in .frappe-menu dropdowns with
|
||||
the current theme's SVG icons (same as desktop).
|
||||
================================================================== */
|
||||
|
||||
function processContextMenuIcons() {
|
||||
document.querySelectorAll(".frappe-menu .dropdown-menu-item").forEach(function (item) {
|
||||
var iconDiv = item.querySelector(".menu-item-icon");
|
||||
if (!iconDiv || iconDiv.querySelector(".jey-icon")) return;
|
||||
|
||||
// Skip chevron icons (the second .menu-item-icon with margin-left:auto)
|
||||
if (iconDiv.style.marginLeft === "auto") return;
|
||||
|
||||
var titleEl = item.querySelector(".menu-item-title");
|
||||
if (!titleEl) return;
|
||||
|
||||
var key = titleEl.textContent.trim().toLowerCase();
|
||||
// Only replace if there's a real icon in THEME_ICONS (skip unknown items)
|
||||
if (!hasIconDef(key)) return;
|
||||
|
||||
iconDiv.innerHTML = "";
|
||||
iconDiv.appendChild(makeSvg(getIconDef(key)));
|
||||
});
|
||||
}
|
||||
|
||||
/* ==================================================================
|
||||
Sidebar header icon replacement
|
||||
Replaces <img> / alphabet SVGs inside .sidebar-header with
|
||||
the current theme's SVG icon.
|
||||
================================================================== */
|
||||
|
||||
function processSidebarIcons() {
|
||||
document.querySelectorAll(".sidebar-header").forEach(function (header) {
|
||||
var logo = header.querySelector(".header-logo");
|
||||
if (!logo || logo.querySelector(".jey-icon")) return;
|
||||
|
||||
var titleEl = header.querySelector(".header-title");
|
||||
if (!titleEl) return;
|
||||
|
||||
var key = titleEl.textContent.trim().toLowerCase();
|
||||
if (!hasIconDef(key)) return;
|
||||
|
||||
logo.innerHTML = "";
|
||||
logo.appendChild(makeSvg(getIconDef(key)));
|
||||
});
|
||||
}
|
||||
|
||||
/* ==================================================================
|
||||
Rebuild all icons (called on theme switch)
|
||||
================================================================== */
|
||||
|
|
@ -281,7 +339,16 @@
|
|||
// Restore original children visibility (they stay hidden,
|
||||
// wrapIcon will re-hide them anyway, but we need the class removed)
|
||||
});
|
||||
// Reset context menu / sidebar icons so they rebuild with new theme SVGs
|
||||
document.querySelectorAll(".frappe-menu .menu-item-icon .jey-icon").forEach(function (svg) {
|
||||
svg.remove();
|
||||
});
|
||||
document.querySelectorAll(".sidebar-header .header-logo .jey-icon").forEach(function (svg) {
|
||||
svg.remove();
|
||||
});
|
||||
processIcons();
|
||||
processContextMenuIcons();
|
||||
processSidebarIcons();
|
||||
}
|
||||
|
||||
// Expose for theme switcher
|
||||
|
|
@ -291,16 +358,18 @@
|
|||
Boot
|
||||
================================================================== */
|
||||
|
||||
$(document).on("page-change", processIcons);
|
||||
function processAll() { processIcons(); processContextMenuIcons(); processSidebarIcons(); }
|
||||
|
||||
$(document).on("page-change", processAll);
|
||||
|
||||
var attempts = 0;
|
||||
var poll = setInterval(function () {
|
||||
processIcons();
|
||||
processAll();
|
||||
attempts++;
|
||||
if (attempts > 30) clearInterval(poll);
|
||||
}, 300);
|
||||
|
||||
var observer = new MutationObserver(processIcons);
|
||||
var observer = new MutationObserver(processAll);
|
||||
observer.observe(document.body, { childList: true, subtree: true });
|
||||
})();
|
||||
|
||||
|
|
@ -842,7 +911,11 @@
|
|||
"es-line-filter":
|
||||
'<g class="es-line-filter">' +
|
||||
'<path d="M1.5 2.5h13L10 8v3.5H6V8L1.5 2.5z"/>' +
|
||||
'</g>'
|
||||
'</g>',
|
||||
|
||||
/* icon-home — simple house silhouette */
|
||||
"icon-home":
|
||||
'<path d="M12 1L0 12h4v10h7v-7h2v7h7V12h4z"/>'
|
||||
};
|
||||
|
||||
var totalIcons = Object.keys(SPRITE_OVERRIDES).length;
|
||||
|
|
@ -875,3 +948,114 @@
|
|||
tryOverride();
|
||||
}
|
||||
})();
|
||||
|
||||
/* ==========================================================================
|
||||
Rebrand: ERPNext → Jey ERP, Frappe → Framework (visible text only)
|
||||
========================================================================== */
|
||||
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
var SKIP_TAGS = { SCRIPT: 1, STYLE: 1, NOSCRIPT: 1, IFRAME: 1, CANVAS: 1 };
|
||||
|
||||
/* Case-aware replacements: tries to preserve the surrounding case style */
|
||||
function rebrandText(str) {
|
||||
// ERPNext variants
|
||||
str = str.replace(/ERPNext/g, "Jey ERP");
|
||||
str = str.replace(/erpnext/gi, function (m) {
|
||||
if (m === "ERPNEXT") return "JEY ERP";
|
||||
return "Jey ERP";
|
||||
});
|
||||
// Frappe variants (but not inside URLs or identifiers)
|
||||
str = str.replace(/Frapp[eé]/g, "Jey ERP");
|
||||
str = str.replace(/frapp[eé]/gi, function (m) {
|
||||
if (m.toUpperCase() === m) return "JEY ERP";
|
||||
return "Jey ERP";
|
||||
});
|
||||
return str;
|
||||
}
|
||||
|
||||
function needsRebrand(str) {
|
||||
return /erpnext|frapp[eé]/i.test(str);
|
||||
}
|
||||
|
||||
/* Walk text nodes inside an element */
|
||||
function walkTextNodes(root) {
|
||||
var walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, false);
|
||||
var node;
|
||||
while ((node = walker.nextNode())) {
|
||||
if (SKIP_TAGS[node.parentNode.tagName]) continue;
|
||||
var text = node.nodeValue;
|
||||
if (needsRebrand(text)) {
|
||||
node.nodeValue = rebrandText(text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Rebrand visible attributes: placeholder, title, alt */
|
||||
function walkAttributes(root) {
|
||||
var els = root.querySelectorAll("[placeholder], [title], [alt]");
|
||||
for (var i = 0; i < els.length; i++) {
|
||||
var el = els[i];
|
||||
["placeholder", "title", "alt"].forEach(function (attr) {
|
||||
var val = el.getAttribute(attr);
|
||||
if (val && needsRebrand(val)) {
|
||||
el.setAttribute(attr, rebrandText(val));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/* Rebrand the page title */
|
||||
function rebrandTitle() {
|
||||
if (needsRebrand(document.title)) {
|
||||
document.title = rebrandText(document.title);
|
||||
}
|
||||
}
|
||||
|
||||
function processNode(root) {
|
||||
walkTextNodes(root);
|
||||
walkAttributes(root);
|
||||
rebrandTitle();
|
||||
}
|
||||
|
||||
/* Initial pass */
|
||||
function init() {
|
||||
processNode(document.body);
|
||||
rebrandTitle();
|
||||
|
||||
/* Watch for dynamically added content */
|
||||
var observer = new MutationObserver(function (mutations) {
|
||||
for (var i = 0; i < mutations.length; i++) {
|
||||
var m = mutations[i];
|
||||
for (var j = 0; j < m.addedNodes.length; j++) {
|
||||
var node = m.addedNodes[j];
|
||||
if (node.nodeType === 1 && !SKIP_TAGS[node.tagName]) {
|
||||
processNode(node);
|
||||
} else if (node.nodeType === 3 && !SKIP_TAGS[node.parentNode.tagName] && needsRebrand(node.nodeValue)) {
|
||||
node.nodeValue = rebrandText(node.nodeValue);
|
||||
}
|
||||
}
|
||||
/* Handle direct text changes (e.g. frappe sets .textContent) */
|
||||
if (m.type === "characterData" && m.target.nodeType === 3) {
|
||||
if (!SKIP_TAGS[m.target.parentNode.tagName] && needsRebrand(m.target.nodeValue)) {
|
||||
m.target.nodeValue = rebrandText(m.target.nodeValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
rebrandTitle();
|
||||
});
|
||||
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true
|
||||
});
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in New Issue