/* ===== Style block 1: parent ===== */ :root{ --ink:#fff; --ink-dim:#c8c8d0; --bg:#0b0b0f; --line:#ffffff18; --accent:#7c3aed; --nav:#121219; } html,body{ height:100% } body{ font-family: Heebo, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans"; background:var(--bg); color:var(--ink); margin:0; } /* Topbar */ .topbar{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 1rem; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#0e0e14,#0a0a10); position:sticky; top:0; z-index:40; } .brand{ display:flex; align-items:center; gap:.6rem; font-weight:900; letter-spacing:.3px; } .brand .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px #7c3aed88; } .userbox{ display:flex; align-items:center; gap:.6rem; position:relative; } .avatar{ width:30px; height:30px; border-radius:9999px; background:#ffffff10; display:inline-flex; align-items:center; justify-content:center; font-weight:800; } .menu-btn{ padding:.35rem .6rem; border:1px solid var(--line); border-radius:.5rem; background:#ffffff0a; color:var(--ink); cursor:pointer } .menu-btn:hover{ background:#ffffff18 } .menu{ position:absolute; top:120%; inset-inline-end:0; min-width:220px; background:#0e0e15; border:1px solid var(--line); border-radius:.7rem; padding:.3rem; display:none; box-shadow:0 8px 28px #0007; z-index:50; } .menu.open{ display:block } .menu a, .menu button{ width:100%; text-align:right; background:transparent; border:0; color:var(--ink); padding:.6rem .7rem; border-radius:.55rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; } .menu a:hover, .menu button:hover{ background:#ffffff0f } /* Layout: Admin nav + main content */ .layout{ display:grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 58px); } .admin-nav{ background:var(--nav); border-inline-end:1px solid var(--line); padding:.6rem; position:sticky; top:58px; align-self:start; height: calc(100vh - 58px); overflow:auto; } .nav-title{ font-weight:900; letter-spacing:.3px; opacity:.9; margin:.3rem .4rem .5rem; } .nav-group{ display:flex; flex-direction:column; gap:4px; } .nav-btn{ display:flex; align-items:center; gap:.55rem; padding:.5rem .6rem; border-radius:.55rem; border:1px solid transparent; color:#e9e9f2; background:transparent; text-align:right; cursor:pointer; } .nav-btn:hover{ background:#ffffff10; border-color:#ffffff18; } .nav-btn.active{ background:#2b2b35; border-color:#ffffff24; box-shadow:0 0 0 1px #7c3aed55 inset; } .nav-btn i{ width:18px; text-align:center; opacity:.9; } .nav-sep{ height:1px; background:var(--line); margin:.5rem 0; border:0; } /* Main content (toolbar + editor + footer) */ .content{ display:flex; flex-direction:column; min-width:0; } .toolbar{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; padding:1rem; border-bottom:1px solid var(--line); } .input{ padding:.55rem .7rem; background:#ffffff10; color:var(--ink); border:1px solid var(--line); border-radius:.55rem; min-width:220px } .btn{ padding:.55rem .8rem; border-radius:.55rem; border:1px solid var(--line); background:#ffffff0e; color:var(--ink); cursor:pointer; font-weight:600; display:inline-flex; gap:.45rem; align-items:center; } .btn:hover{ background:#ffffff16 } .btn-okay{ background:#10b98122; border-color:#10b98166 } .btn-okay:hover{ background:#10b98133 } .status{ opacity:.7; font-size:.9rem; margin-inline-start:.5rem } /* ======================================= */ /* ====== תיקון גובה קנבס במובייל (V2) ====== */ /* ======================================= */ #gjs { flex: 1 !important; min-height: 200px !important; /* שינוי לרקע לבן/אפור בהיר מאוד כדי לדמות דפדפן רגיל */ background: #ffffff; } .footbar{ display:flex; align-items:center; justify-content:space-between; padding:.6rem 1rem; border-top:1px solid var(--line); color:var(--ink-dim); } .hidden{ display:none !important } /* Side action toolbar (right in canvas area) */ /* סרגל אייקונים בתחתית ימין, בשורה אופקית */ .kr-actions{ position: fixed; inset-inline-end: 12px; bottom: 12px; top: auto !important; /* לבטל עיגון ל-TOP */ z-index: 1500; /* מעל הפאנלים הימניים */ display: flex; flex-direction: row; /* שורה במקום טור */ gap: .45rem; } body.blocks-open .kr-actions{ bottom: calc(var(--dyn-blocks-h, 0px) + 12px); } .kr-actions .act{ width:42px; height:42px; border-radius:12px; background:#16161d; border:1px solid #ffffff22; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 18px #0007; } .kr-actions .act:hover{ background:#1e1e27; border-color:#ffffff44 } .kr-actions .act[disabled]{ opacity:.45; cursor:not-allowed; filter:grayscale(1) } .kr-tooltip{ position:absolute; inset-inline-end:54px; background:#0f0f15; border:1px solid #ffffff22; color:#fff; padding:.25rem .5rem; border-radius:.4rem; font-size:.78rem; white-space:nowrap; pointer-events:none; transform:translateY(-50%); display:none; } .kr-actions .act:hover .kr-tooltip{ display:block } /* GrapesJS panel tweaks */ .gjs-pn-views .gjs-pn-btn{ background:#14141b; border:1px solid #ffffff22; color:#fff; border-radius:.55rem; padding:6px 9px; margin-inline:2px; } .gjs-pn-views .gjs-pn-btn.gjs-pn-active{ background:#1e1e27; border-color:#7c3aed88; box-shadow:0 0 0 1px #7c3aed55 inset } /* Block cards */ .gjs-blocks-cs { padding: 8px } .gjs-block { background:#1b1b23; border:1px solid #ffffff22; border-radius:12px; padding:10px } .gjs-block:hover { background:#21212b; border-color:#ffffff44 } .gjs-block-label { margin:0 } .bm-card{display:flex;flex-direction:column;align-items:center;gap:.45rem; text-align:center} .bm-ico{width:28px;height:28px;display:block;color:#e9e9f2} .bm-title{font-weight:800;font-size:.9rem;color:#f7f7ff} .bm-sub{font-size:.72rem;opacity:.65} /* Widgets in canvas */ .kr-gallery{display:grid;gap:12px} .kr-gallery img{width:100%;height:100%;object-fit:cover;border-radius:14px;border:1px solid #ffffff22;display:block} .kr-gallery--1{grid-template-columns:1fr} .kr-gallery--2{grid-template-columns:repeat(2,minmax(0,1fr))} .kr-gallery--3{grid-template-columns:repeat(3,minmax(0,1fr))} .kr-gallery--4{grid-template-columns:repeat(4,minmax(0,1fr))} .kr-faq-item{border:1px solid #ffffff22;border-radius:14px;background:#ffffff0a} .kr-faq-item summary{cursor:pointer;padding:12px 14px;font-weight:800;list-style:none} .kr-faq-item[open] summary{background:#ffffff10;border-bottom:1px solid #ffffff14;border-radius:14px 14px 0 0} .kr-hr{border:0;height:1px;background:linear-gradient(90deg,transparent,#ffffff55,transparent)} .kr-hr--dashed{height:0;border-top:2px dashed #ffffff66;background:none} .kr-wa-btn{display:inline-flex;align-items:center;gap:8px;padding:.7rem 1.1rem;border-radius:9999px;font-weight:800;background:#22c55e;color:#06210f;border:1px solid #1a9d49} /* Pages Panel (drawer) */ .drawer{ position:fixed; inset:0; display:none; z-index:60; } .drawer.open{ display:block; } .drawer .mask{ position:absolute; inset:0; background:#0008; } .drawer .box{ position:absolute; inset-inline-start:0; top:0; bottom:0; width:min(860px, 92vw); background:#0f1016; border-inline-end:1px solid var(--line); display:flex; flex-direction:column; } .drawer header{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--line); } .drawer .content{ padding:12px; overflow:auto; } .table{ width:100%; border-collapse:separate; border-spacing:0; } .table th,.table td{ padding:8px 10px; border-bottom:1px solid #ffffff14; text-align:right; vertical-align:middle; } .chip{ font-size:.78rem; padding:.2rem .45rem; border-radius:9999px; border:1px solid #ffffff24; background:#ffffff12; } .muted{ opacity:.7 } .text-sm{ font-size:.9rem } .text-xs{ font-size:.8rem } .danger{ color:#f87171 } .w-full{ width:100% } /* Meta modal */ .modal{ position:fixed; inset:0; display:none; z-index:70; } .modal.open{ display:block; } .modal .mask{ position:absolute; inset:0; background:#0008; } .modal .box{ position:absolute; inset:0; margin:auto; background:#12131b; width:min(720px, 92vw); border:1px solid var(--line); border-radius:14px; padding:14px; } .grid{ display:grid; gap:10px } .grid-2{ grid-template-columns:1fr 1fr } .field{ display:flex; flex-direction:column; gap:6px } .row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap } .mt-1{ margin-top:.25rem } .mt-2{ margin-top:.5rem } .mt-3{ margin-top:.75rem } /* === COI-like compact pages list === */ .pages-compact .table td, .pages-compact .table th { padding:8px 10px; border-bottom:1px solid #ffffff12; } .pages-compact .table thead th { font-weight:700; font-size:.88rem; color:#aab0c0; background:#0f1016; } .pages-compact .w-1 { width:52px; text-align:center; } .pages-compact .data-space { width:12px; } .icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:6px; border:1px solid transparent; background:transparent; cursor:pointer; } .icon-btn:hover{ background:#ffffff12; border-color:#ffffff22; } .icon-btn i{ font-size:15px; opacity:.9; } .icon-btn.danger{ color:#f87171; } .icon-home{ color:#ffe08a; } .main-link{ color:#e9e9f2; text-decoration:none; font-weight:600; } .main-link:hover{ text-decoration:underline; } /* Custom Context Menu Styles */ .context-menu { display: none; position: fixed; z-index: 1000; width: 180px; background-color: #1a1b22; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); padding: 5px; } .context-menu ul { list-style: none; padding: 0; margin: 0; } .context-menu ul li { padding: 8px 12px; cursor: pointer; border-radius: 6px; display: flex; align-items: center; gap: 8px; font-size: 14px; } .context-menu ul li:hover { background-color: rgba(255, 255, 255, 0.1); } .context-menu ul li.danger:hover { background-color: rgba(248, 113, 113, 0.2); color: #f87171; } .context-menu .context-menu-divider { height: 1px; background-color: rgba(255, 255, 255, 0.1); margin: 4px 0; border: none; } /* Custom styles for the impressive plan modal */ .glass-swal { border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 14px !important; color: #fff !important; } .swal-html-container-custom { margin: 0 !important; padding: 0 !important; } .plan-details-container { direction: rtl; text-align: right; padding: 1rem; } .plan-header { display: flex; align-items: center; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .plan-icon { font-size: 2rem; color: var(--accent, #7c3aed); } .plan-title { font-size: 0.9rem; color: #aab0c0; } .plan-name { font-size: 1.25rem; font-weight: 800; } .plan-section { margin-top: 1.2rem; } .plan-section-title { font-weight: 600; margin-bottom: 0.5rem; color: #d1d5db; } .progress-bar-container { width: 100%; height: 8px; background-color: rgba(255, 255, 255, 0.1); border-radius: 999px; overflow: hidden; } .progress-bar { height: 100%; background-color: var(--accent, #7c3aed); border-radius: 999px; transition: width 0.5s ease-out; } .plan-usage-text { display: flex; justify-content: space-between; font-size: 0.85rem; margin-top: 0.5rem; color: #aab0c0; } #themeSelector { color: #000; /* מלל שחור */ background: #fff; /* רקע לבן */ } #themeSelector option { color: #000; /* גם כל האופציות יהיו עם מלל שחור */ } #siteSelector { color:#fff; background:#111; } /* מצב סגור */ #siteSelector option { color:#000; background:#fff; } /* פריטים פתוחים */ @media (max-width: 1100px) { .map-inline-tools { width: 100%; margin-top: 8px; } .map-inline-tools .input { flex: 1; min-width: 180px; } } .pac-container{z-index:999999; direction:rtl;} /* ========================================================= */ /* ====== The Full and Final Responsive Code (Gemini Final) ====== */ /* ========================================================= */ /* ### Specific rules for mobile (phones) ### */ @media (max-width: 768px) { /* --- 1. General page layout arrangement --- */ .layout { display: flex; flex-direction: column; } #mobileNavToggle { display: inline-flex !important; } .topbar .brand > div { display: none; } .admin-nav { display: none; position: static !important; height: auto; border-bottom: 1px solid var(--line); } .admin-nav.mobile-nav-open { display: block; } .toolbar .btn, .toolbar .input { padding: .4rem .6rem; font-size: 0.9rem; } /* --- 2. GrapesJS editor internal arrangement --- */ .gjs-editor { display: flex !important; flex-direction: column !important; gap: 8px; /* Adds space between all editor parts */ } .gjs-cv-canvas { order: 1; flex-grow: 1; border: 1px solid var(--line); /* Adds a border around the canvas */ border-radius: 8px; } .gjs-pn-panels { order: 2; border: 1px solid var(--line); border-radius: 8px; background: var(--nav); /* Adds a background to the panels section */ } .gjs-pn-views-container { order: 3; position: static !important; width: 100% !important; border: 1px solid var(--line); border-radius: 8px; background: var(--nav); /* Adds a background to the blocks/styles section */ } .gjs-blocks-cs { max-height: 40vh; overflow-y: auto; } } /* תפריט ניהול מעל הקנבס */ @media (max-width:768px){ .admin-nav{ position: fixed; /* במקום static */ top: 58px; /* גובה הטופבר שלך */ inset-inline: 0; /* ימינה/שמאלה */ height: calc(100vh - 58px); z-index: 1200; /* מעל הכל */ display: none; /* ברירת מחדל סגור */ overflow: auto; } .admin-nav.mobile-nav-open{ display:block; } /* הקנבס וכל חלקיו יישארו מתחת */ #gjs, .gjs-editor, .gjs-cv-canvas, .gjs-pn-panels, .gjs-pn-views-container{ position: relative; z-index: 1; } /* דריסת dropdown/topbar אם צריך */ .topbar .menu{ z-index: 1300; } } /* כשפותחים תפריט – חוסמים קליקים על הקנבס ומסתירים כפתורי צפים */ body.menu-open .gjs-cv-canvas iframe{ pointer-events:none; } body.menu-open .kr-actions{ display:none; } :root{ --topbar-h:58px; --dyn-blocks-h:0px; } /* מסדרים פריסה: טופ-בר קבוע, מתחתיו אזור עבודה תופס כל המסך */ @media (max-width:768px){ .topbar{ position: sticky; top: var(--topbar-h); /* יישב מתחת לטופ-בר שלך */ z-index: 1300; background: linear-gradient(180deg,#0e0e14,#0a0a10); } /* אזור העבודה (העטוף של GrapesJS) */ .workspace{ /* עטוף ל-#gjs או הקונטיינר של העורך */ position: fixed; inset: var(--topbar-h) 0 0 0; /* top,right,bottom,left */ height: calc(100dvh - var(--topbar-h)); /* vh אמיתי במובייל */ z-index: 1; /* מתחת לתפריטים */ overflow: hidden; /* שלא יברח גלילה */ display: flex; flex-direction: column; min-height: 0; /* חשוב כדי לאפשר לילדים לתפוס 100% */ } /* קנבס וגובה מלא – מפנה את גובה הטופ־בר + הטולבר */ #gjs, .gjs-editor, .gjs-cv-canvas, .gjs-cv-canvas__frames, .gjs-frame{ height: calc(100dvh - var(--topbar-h) - var(--toolbar-h)) !important; min-height: 0 !important; } .gjs-cv-canvas iframe{ display:block; height:100% !important; width:100%; } /* התפריט הצדדי/דרואר מעל הקנבס תמיד */ .admin-nav{ position:fixed; inset: var(--topbar-h) 0 auto 0; z-index:1400; } .topbar .menu, .dropdown{ z-index:1500; } } /* כשפותחים את התפריט – נטרול קליקים על הקנבס שלא “ידקור” אותו */ body.menu-open .gjs-cv-canvas iframe{ pointer-events:none; } :root{ --topbar-h:58px; } /* === מובייל: תוכן קבוע מתחת לטופ-בר, קנבס בגובה מלא === */ @media (max-width:768px){ /* התפריט צדדי תמיד מעל */ .admin-nav{ position:fixed; inset:var(--topbar-h) 0 auto 0; height:calc(100dvh - var(--topbar-h)); z-index:1400; overflow:auto; display:none; } .admin-nav.mobile-nav-open{ display:block; } .topbar{ position:sticky; top:0; z-index:1500; height:var(--topbar-h); } /* הופכים את אזור התוכן ל-workspace */ .content{ position:fixed; inset:var(--topbar-h) 0 0 0; /* יושב מתחת לטופבר */ height:calc(100dvh - var(--topbar-h)); /* גובה מסך אמיתי במובייל */ display:flex; flex-direction:column; min-height:0; overflow:hidden; z-index:1; /* מתחת לתפריט */ } .toolbar, .footbar{ flex:0 0 auto; } /* אם אין לך עטיפה, זה תופס את #gjs ישירות מתוך .content */ .content > #gjs, .gjs-editor{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; } /* שרשרת הגבהים עד ה-iframe */ #gjs, .gjs-cv-canvas, .gjs-cv-canvas__frames, .gjs-frame{ height:100% !important; min-height:0 !important; flex:1 1 auto; } .gjs-cv-canvas iframe{ display:block; width:100%; height:100% !important; } /* בזמן פתיחת תפריט – ביטול קליקים בקנבס כדי שלא "ידקור" */ body.menu-open .gjs-cv-canvas iframe{ pointer-events:none; } body.menu-open .kr-actions{ display:none; } /* ודא שהפאנלים עצמם לא תופסים זינדקס גבוה מהמותר */ .gjs-pn-panels, .gjs-pn-views-container{ position:relative; z-index:1; } } @media (max-width:768px){ .gjs-pn-buttons{ position: fixed !important; inset-inline-start: 10px; inset-inline-end: auto !important; bottom: 12px; z-index: 1500; display: flex; gap: 8px; flex-direction: row; /* או column לטור אנכי */ } } @media (max-width:768px){ :root{ --topbar-h:100px; --blocks-h:320px; } /* הפאנל התחתון מקובע למסך */ .gjs-pn-views-container{ position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 1400; /* מעל הקנבס, מתחת לתפריטים אחרים */ max-height: var(--blocks-h); overflow: auto; background: var(--nav,#0f1016); border-top: 1px solid var(--line,#ffffff18); } /* כשבלוקים פתוחים – מפנים מקום לקנבס */ body.blocks-open .content, body.blocks-open .workspace{ padding-bottom: var(--blocks-h); } body.blocks-open #gjs, body.blocks-open .gjs-editor, body.blocks-open .gjs-cv-canvas, body.blocks-open .gjs-cv-canvas__frames, body.blocks-open .gjs-frame{ height: calc(100dvh - var(--topbar-h) - var(--blocks-h)) !important; min-height: 0 !important; } } @media (max-width:768px){ :root{ --topbar-h:58px; --blocks-h: clamp(220px, 42dvh, 380px); /* שליטה בגובה */ --blocks-gap: 10px; /* הרווח מהתחתית */ } .gjs-pn-views-container{ position: fixed !important; left: 10px; right: 10px; /* קצת מרווחים מהצדדים (לא חובה) */ bottom: calc(env(safe-area-inset-bottom, 0px) + var(--blocks-gap)); max-height: var(--blocks-h); overflow:auto; background: var(--nav,#0f1016); border: 1px solid var(--line,#ffffff18); border-radius: 12px; /* נראה כמו “מגירה” צפה */ z-index: 1400; } /* מפנים מקום לקנבס כשפתוח */ body.blocks-open .content, body.blocks-open .workspace{ padding-bottom: calc(var(--blocks-h) + var(--blocks-gap) + env(safe-area-inset-bottom, 0px)); } body.blocks-open #gjs, body.blocks-open .gjs-editor, body.blocks-open .gjs-cv-canvas, body.blocks-open .gjs-cv-canvas__frames, body.blocks-open .gjs-frame{ height: calc(100dvh - var(--topbar-h) - var(--blocks-h) - var(--blocks-gap)) !important; min-height: 0 !important; } } @media (max-width:768px){ :root{ --topbar-h:58px; --blocks-h: clamp(220px, 42dvh, 380px); /* שליטה בגובה הפאנל */ --blocks-gap: 10px; /* רווח מהתחתית */ } /* הפאנל "צף" למטה */ .gjs-pn-views-container{ position: fixed !important; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom,0px) + var(--blocks-gap)); max-height: var(--blocks-h); overflow:auto; border:1px solid var(--line,#ffffff18); border-radius:12px; background: var(--nav,#0f1016); z-index: 1400; } /* מפנים מקום לקנבס כשהבלוקים פתוחים */ body.blocks-open .content, body.blocks-open .workspace{ padding-bottom: calc(var(--blocks-h) + var(--blocks-gap) + env(safe-area-inset-bottom,0px)); } body.blocks-open #gjs, body.blocks-open .gjs-editor, body.blocks-open .gjs-cv-canvas, body.blocks-open .gjs-cv-canvas__frames, body.blocks-open .gjs-frame{ height: calc(100dvh - var(--topbar-h) - var(--blocks-h) - var(--blocks-gap)) !important; min-height: 0 !important; } } /* קבועי פריסה */ :root{ --topbar-h:58px; --dyn-blocks-h:0px; } /* הקנבס חייב לחשב את הגובה מהמוביל: מסך פחות טופבר ופחות פאנל בלוקים */ @media (max-width:768px){ /* הקנבס עצמו וכל השרשרת עד ה-iframe */ #gjs, .gjs-editor, .gjs-cv-canvas, .gjs-cv-canvas__frames, .gjs-frame{ height: calc(100dvh - var(--topbar-h) - var(--dyn-blocks-h)) !important; min-height: 0 !important; } .gjs-cv-canvas iframe{ height:100% !important; width:100%; display:block; } /* פאנל הבלוקים קבוע בתחתית */ .gjs-pn-views-container{ position: fixed !important; left: 0; right: 0; bottom: 0; max-height: var(--dyn-blocks-h); /* נשלט דינמית */ overflow: auto; background: var(--nav,#0f1016); border-top: 1px solid var(--line,#ffffff18); z-index: 1200; /* מתחת לתפריטים עליונים */ } /* בזמן פתיחה – הגוף מפנה מקום (גם אם אין לך .content/.workspace) */ body.blocks-open{ padding-bottom: var(--dyn-blocks-h); } body.blocks-open .gjs-cv-canvas iframe{ pointer-events:none; } /* שלא “ידקור” את הפאנל */ } @media (max-width: 768px) { /* הופך כל פריט תמונה לעמודה גמישה */ .gjs-am-asset { display: flex; flex-direction: column; align-items: center; /* ממקם את התמונה והטקסט במרכז */ } /* מוודא שהתמונה תופסת את מלוא הרוחב */ .gjs-am-preview-cont { width: 100%; max-width: none; } /* מסדר את הטקסט שיופיע מתחת */ .gjs-am-meta { width: 100%; text-align: center; /* ממקם את הטקסט במרכז */ font-size: 10px; /* מקטין מעט את הטקסט */ padding-top: 4px; /* מוסיף רווח קטן מהתמונה */ white-space: nowrap; /* מונע מהטקסט להישבר לשתי שורות */ overflow: hidden; /* חותך טקסט ארוך שלא נכנס */ text-overflow: ellipsis; /* מוסיף '...' בסוף טקסט חתוך */ } } /* צבע לבן לעיפרון */ .icon-btn i.fa-edit { color: #fff; } /* צבע לבן גם במעבר עכבר (אם יש רקע כהה) */ .icon-btn:hover i.fa-edit { color: #f1f1f1; } /* אופציונלי: צבע שונה לאייקון של פח המחיקה */ .icon-btn.danger i.fa-trash { color: #ff4d4d; } .icon-btn.danger:hover i.fa-trash { color: #ff9999; } .modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 9999; } .modal.open { display: flex; } .modal .mask { position: absolute; inset: 0; background: #0008; } .modal .box { position: relative; background: #111; color: #fff; padding: 20px; border-radius: 12px; border: 1px solid #333; width: min(90vw, 600px); } /* ============================================= */ /* START: תיקון צבע טקסט בתיבת קוד מונה גולשים */ /* ============================================= */ #visitorCounterCode { color: #e5e7eb; /* צבע טקסט לבן-אפרפר לקריאות נוחה */ } /* ============================================= */ /* END: סוף התיקון */ /* ============================================= */ .nav-btn i.fa-gear { color: white !important; } .icon-btn i.fa-gear { color: white; } /* ============================================= */ /* START: תיקון Z-index למנהל נכסים */ /* ============================================= */ .gjs-am-dialog { z-index: 10000 !important; /* ערך גבוה יותר מה-z-index של המודאל */ } /* ודא שהמודאל של המוצר לא גבוה מדי (אם כי 10000 אמור להספיק) */ .modal#productModal { z-index: 70; /* נשאר כפי שהיה אצלך */ } /* ============================================= */ /* END: סוף התיקון */ /* ============================================= */ /* ידיות תמיד מעל */ .gjs-resizer, .gjs-badge { z-index: 100000; } /* בזמן בחירה – iframe לא תופס קליקים */ .gjs-selected iframe { pointer-events: none; } .gjs-resizer, .gjs-badge { z-index: 100000; } .gjs-selected iframe { pointer-events: none; } /* ========================================================== */ /* START: עיצוב מותאם אישית לכפתור 'Images' במנהל העיצוב */ /* ========================================================== */ /* בחירת הכפתור הספציפי לפי ה-ID שלו */ #gjs-sm-images { background-color: rgba(124, 58, 237, 0.2); /* רקע סגלגל עדין מה-accent */ border: 1px solid var(--accent) !important; /* גבול בולט בצבע accent */ color: #f0f0f0 !important; /* צבע טקסט בהיר */ font-weight: 600; border-radius: 6px; padding: 6px 10px; margin-top: 5px; width: 100%; /* שיתפוס את כל הרוחב ויהיה ברור */ text-align: right; /* יישור הטקסט לימין (במקום ברירת מחדל למרכז) */ transition: background-color 0.2s; } /* הוספת אייקון 'תמונה' לפני הטקסט */ #gjs-sm-images::before { font-family: "Font Awesome 6 Free"; /* שימוש בפונט אייקון שכבר טעון */ content: "\f03e"; /* הקוד של האייקון 'fa-image' */ font-weight: 900; /* נדרש עבור fa-solid */ margin-inline-end: 8px; /* רווח בין האייקון לטקסט */ } /* אפקט Hover למראה נקי */ #gjs-sm-images:hover { background-color: rgba(124, 58, 237, 0.4); color: #ffffff !important; } /* ========================================================== */ /* END: סוף עיצוב כפתור 'Images' */ /* ========================================================== */ /* ממוקד רק ללחצני המכשירים */ .toolbar .gjs-pn-buttons { display: inline-flex; gap: 6px; /* רווח קטן בין כפתורים */ } .toolbar .gjs-pn-buttons .gjs-pn-btn { padding: 4px 8px; /* קטן יותר */ font-size: 12px; /* טקסט קטן יותר */ line-height: 1.1; height: 28px; /* גובה קבוע */ border-radius: 6px; /* פינות עדינות */ } @media (max-width: 900px){ .toolbar .gjs-pn-buttons .gjs-pn-btn{ padding: 3px 6px; font-size: 11px; height: 26px; } } /* סרגל פעולה צף (דסקטופ בלבד) */ @media (min-width: 1024px){ .fab-bar{ position: fixed; inset-inline: clamp(12px, 2vw, 32px); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); z-index: 1600; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 10px 12px; background: rgba(14,14,20,.82); backdrop-filter: blur(8px); border: 1px solid #ffffff22; border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.45); direction: rtl; } /* כשפאנל הבלוקים פתוח – מרימים קצת שלא יתחבא */ body.blocks-open .fab-bar{ bottom: calc(var(--dyn-blocks-h, 0px) + 12px); } /* מסתירים את הכפתורים המקוריים בטולבר בדסקטופ (נשאיר את כתובת המפה) */ .toolbar .btn[data-float], .toolbar select[data-float], .toolbar .gjs-pn-buttons[data-float]{ display: none !important; } } /* מצב דסקטופ: קיפול תפריט הניהול */ @media (min-width: 1024px){ /* פריסה: עמודת ניווט מצטמצמת */ body.nav-collapsed .layout{ grid-template-columns: 64px 1fr; } /* ה־aside עצמו */ body.nav-collapsed .admin-nav{ width: 64px; padding: 8px 6px; overflow: visible; /* כדי שטולטיפים/תפריטים יצאו החוצה אם צריך */ } /* כותרות וקישוטים נעלמים */ body.nav-collapsed .admin-nav .nav-title, body.nav-collapsed .admin-nav .nav-sep{ display: none !important; } /* כפתורי הניווט – מציגים אייקון בלבד */ body.nav-collapsed .admin-nav .nav-btn{ justify-content: center; gap: 0; padding: 10px 8px; font-size: 0; /* מסתיר טקסט הכפתור */ border-radius: 10px; } body.nav-collapsed .admin-nav .nav-btn i{ font-size: 18px; /* מציג את האייקון רגיל */ } /* דואגים שהקנבס לא יזוז מוזר */ body.nav-collapsed .content{ min-width: 0; } } #adminNavCollapseBtn{ display:inline-flex; align-items:center; gap:.4rem; } #adminNavCollapseBtn i{ font-size:1rem; } .label-desktop{ display:none; } @media (min-width:1024px){ #adminNavCollapseBtn{ display:inline-flex; } .label-desktop{ display:inline; } } @media (max-width:1023px){ #adminNavCollapseBtn{ display:none; } /* במובייל יש לך כבר #mobileNavToggle */ } button.kr-del { color: #e53935; /* אדום עז */ transition: color 0.2s ease; } button.kr-del:hover { color: #ff5252; /* אדום בהיר בהובר */ } button.kr-del i.fa-trash { color: #e53935; /* אדום עז */ transition: color 0.25s ease, transform 0.2s ease; } button.kr-del:hover i.fa-trash { color: #ff5252; /* אדום בהיר */ transform: scale(1.2); /* אפקט קל בהובר */ } .advanced-gallery .swiper { min-height: 320px; } .advanced-gallery .swiper-slide { display:flex; align-items:center; justify-content:center; } /* ============================================= */ /* START: שדרוג נראות חיצי גלריה מתקדמת */ /* ============================================= */ .advanced-gallery .swiper-button-next, .advanced-gallery .swiper-button-prev { color: white !important; /* 1. צבע לבן ברור */ text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); /* 2. צל שחור עם 70% שקיפות */ } /* ============================================= */ /* END: סוף שדרוג נראות חיצים */ /* ============================================= */ /* רק כשהקומפוננטה של הגלריה מסומנת בעורך – תן לקליק לעבור ל-GrapesJS */ .k-advanced-gallery.gjs-selected .swiper { pointer-events: none; } /* מסתיר במובייל בלבד */ @media (max-width: 768px) { .hidden-mobile { display: none !important; } } /* ========================================================== START: === הוסף את ה-CSS הזה === ========================================================== */ /* מיקומי פינות לקומפוננטות ממוקמות */ .pos-fixed { position: fixed; } .pos-tl { top: 16px; left: 16px; } .pos-tr { top: 16px; right: 16px; } .pos-bl { bottom: 20px; left: 16px; } .pos-br { bottom: 20px; right: 16px; } /* ========================================================== END: === סוף ה-CSS === ========================================================== */ .hidden-mobile{display:block} @media(max-width:640px){.hidden-mobile{display:none!important}} /* הגדרות אלו מסתירות את האלמנט רק כאשר העורך נמצא במצב תצוגת מובייל (פחות מ-768px) */ .gjs-device-m .hidden-mobile { display: none !important; } .k-lightbox-slider .swiper-button-next, .k-lightbox-slider .swiper-button-prev { color: #fff !important; text-shadow: 0 2px 5px rgba(0,0,0,.7); } /* שורת ה-AI: שליטה במבנה וברספונסיביות */ .swal-ai-row{ display:flex; align-items:center; gap:.5rem; direction: rtl; text-align: right; } /* גורם לשדה להתרחב, אבל גם להתכווץ כשצריך (מפתח קריטי: min-width:0) */ #swal-ai-prompt{ flex: 1 1 auto; min-width: 0; max-width: 100%; /* שיפור קריאות */ line-height: 1.25; } /* מונע מהכפתור להימעך, שומר אותו קומפקטי */ #swal-ai-btn{ flex: 0 0 auto; white-space: nowrap; padding: .75rem 1rem; } /* placeholder פחות “צעקני” */ #swal-ai-prompt::placeholder{ opacity: .75; font-size: .9rem; } /* מסכים צרים: מעבירים לערימה ומותחים מלא */ @media (max-width: 640px){ .swal-ai-row{ flex-direction: column; align-items: stretch; } #swal-ai-btn{ width: 100%; } } /* לוודא שהמודאל עצמו לא נשבר ברוחב קטן */ .swal2-popup.glass-swal{ width: min(800px, 95vw) !important; box-sizing: border-box; } /* ============================================= */ /* START: Honda Product Card Styles */ /* ============================================= */ .product-card { border: 1px solid #ffffff22; border-radius: 14px; background: #111218; overflow: hidden; text-align: center; box-shadow: 0 6px 18px #0007; transition: transform 0.3s ease, box-shadow 0.3s ease; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 12px 28px #000a; } .product-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; } .product-info { padding: 1rem; } .product-title { font-size: 1.1rem; font-weight: 800; margin: 0.5rem 0 0.2rem; /* ודא שהטקסט לבן (כי הרקע שחור) */ color: #ffffff; } .product-price { color: var(--accent, #7c3aed); /* משתמש בצבע הראשי שלך */ font-weight: 700; margin: 0.2rem 0 0.8rem; } .product-btn { display: inline-block; background: var(--accent, #7c3aed); /* משתמש בצבע הראשי שלך */ color: #fff; padding: 0.6rem 1.2rem; border-radius: 9999px; font-weight: 700; text-decoration: none; transition: background 0.3s; } .product-btn:hover { filter: brightness(1.15); } /* העיצוב של הרשת */ .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; } /* ============================================= */ /* END: Honda Product Card Styles */ /* ============================================= */ .k-product-slider { position: relative; } .k-product-slider .swiper { width:100%; } .k-product-slider .swiper-slide { display:flex; } .k-product-slide { width:100%; } .k-product-slide .product-card{ width:100%; } .k-product-slider .swiper-button-next, .k-product-slider .swiper-button-prev{ color:#fff !important; text-shadow:0 2px 5px rgba(0,0,0,.7); } /* טקסט שחור ב־DROPDOWN של דף הורה */ #pageMetaModal select, #pageMetaModal select.input, #pmParentPage { color: #000 !important; background-color: #fff !important; } /* ========================================================== */ /* FIX: ווידוא שמנהל הנכסים של GrapesJS תמיד מעל המודאלים שלך */ /* ========================================================== */ .gjs-mdl-dialog, .gjs-am-dialog, .gjs-am-container { z-index: 2147483647 !important; /* המספר הכי גבוה האפשרי ב-CSS */ } .gjs-mdl-backdrop, .gjs-am-overlay { z-index: 2147483646 !important; /* אחד פחות מהדיאלוג */ } /* ========================================================== */ /* FIX: תיקון קריטי ל-Z-Index של מנהל הנכסים */ /* מבטיח שחלון התמונות יופיע מעל כל הפופ-אפים האחרים */ /* ========================================================== */ /* ========================================================== */ /* FIX: עיצוב פנימי של ספריית התמונות (גלילה תקינה + כפתור מוקטן) */ /* ========================================================== */ /* 1. מודאל מרכזי ורקע */ .gjs-mdl-container, .gjs-am-container { z-index: 2147483647 !important; } .gjs-mdl-backdrop, .gjs-am-overlay { z-index: 2147483646 !important; background-color: rgba(0,0,0,0.85) !important; backdrop-filter: blur(4px); } .gjs-mdl-dialog { z-index: 2147483647 !important; width: 90vw !important; max-width: 1400px !important; height: 85vh !important; margin: 5vh auto !important; border-radius: 16px !important; box-shadow: 0 25px 50px rgba(0,0,0,0.8) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; background: #1a1b22 !important; } /* 2. שרשרת הגובה - מכריח את כל המעטפות להעביר את הגובה עד למטה */ .gjs-mdl-content { flex: 1 1 0% !important; display: flex !important; flex-direction: column !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; min-height: 0 !important; width: 100% !important; } .gjs-am-manager { flex: 1 1 0% !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; min-height: 0 !important; width: 100% !important; } /* 3. סרגל ה-Unsplash (תמיד עליון) */ .kr-am-toolbar { flex: 0 0 auto !important; position: relative !important; z-index: 50 !important; margin: 15px 15px 0 15px !important; } /* 4. כפתור העלאת קבצים מהמחשב - הוקטן והוגבל במדויק! */ /* החלפת הטקסט המקורי באנגלית בטקסט בעברית */ /* 5. עוטף התמונות הראשי (נמתח עד הסוף כדי להעלים את השטח האפור) */ .gjs-am-assets-wrap { float: none !important; position: relative !important; width: 100% !important; flex: 1 1 0% !important; /* תופס את שאר הגובה! */ display: flex !important; flex-direction: column !important; overflow: hidden !important; min-height: 0 !important; z-index: 10 !important; } /* שורת הוספת תמונה מלינק (שורה מובנית של GrapesJS) */ .gjs-am-assets-header { flex: 0 0 auto !important; padding: 10px 15px !important; border-bottom: 1px solid #333 !important; background: #1a1b22 !important; } /* 6. אזור הגלילה של התמונות - מאפשר גלילה עד הסוף */ .gjs-am-assets-cont { flex: 1 1 0% !important; overflow-y: auto !important; /* מוסיף פס גלילה חכם */ padding: 20px !important; background: #0f1015 !important; width: 100% !important; display: block !important; } /* 7. רשת התמונות (CSS Grid) - מארגן בקוביות מסודרות */ .gjs-am-assets { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 20px !important; width: 100% !important; height: auto !important; } /* 8. כרטיסייה של תמונה בודדת */ .gjs-am-asset { width: 100% !important; height: 180px !important; margin: 0 !important; border-radius: 8px !important; background: #2a2a35 !important; border: 1px solid #444 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; position: relative !important; transition: transform 0.2s, border-color 0.2s !important; } .gjs-am-asset:hover { transform: translateY(-3px) !important; border-color: #7c3aed !important; } /* 9. התמונה עצמה בתוך הכרטיסייה */ .gjs-am-preview-cont { flex: 1 !important; width: 100% !important; background: #000 !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; } .gjs-am-preview-cont img { max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; } /* 10. שם התמונה שמופיע מתחתיה */ .gjs-am-meta { height: 30px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 11px !important; color: #aab0c0 !important; padding: 0 10px !important; box-sizing: border-box !important; } .gjs-am-name { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; width: 100% !important; text-align: center !important; } /* התאמת מיקום לתוויות שיצרנו (ALT ומידות) */ .kr-asset-info-badge { bottom: 42px !important; } /* ========================================================== */ /* FIX: תיקון שכבות לחלונות קופצים בתוך עורך הפוסטים */ /* ========================================================== */ /* מוודא שחלונות הדיאלוג של TinyMCE (כמו הוספת לינק/תמונה) יהיו מעל המודאל */ .tox-tinymce-aux { z-index: 100000 !important; /* ערך גבוה מאוד */ } /* מוודא שחלונות התראה (SweetAlert2) יהיו מעל המודאל */ .swal2-container { z-index: 100001 !important; /* ערך גבוה יותר מה-TinyMCE */ } /* מוודא שרשימות נפתחות בתוך המודאל לא יוסתרו */ .tox .tox-dialog-wrap { mix-blend-mode: normal !important; } /* אפקט הובר לשורות שהמירו - ירוק קצת יותר חזק */ tr.converted-row:hover { background: rgba(16, 185, 129, 0.25) !important; } /* יישור מרכזי לכל הטבלה - כותרות ותוכן */ table th, table td { text-align: center !important; /* מיישר את הטקסט/אייקונים למרכז האופקי */ vertical-align: middle !important; /* מיישר את התוכן למרכז האנכי של השורה */ } /* אופציונלי: אם את רוצה שהעמודה הראשונה (תאריך/שעה) תישאר מיושרת לימין */ table th:first-child, table td:first-child { text-align: right !important; } /* ========================================================= */ /* FIX: תיקון קריטי ל-Z-INDEX של חלון עריכת הליד */ /* ========================================================= */ #leadEditModalAdmin { /* המספר הגבוה ביותר האפשרי ב-CSS כדי להבטיח שזה מעל הכל */ z-index: 2147483647 !important; position: fixed !important; inset: 0 !important; } /* וידוא שהרקע הכהה של המודאל גם כן מעל הכל (אבל מתחת לתוכן המודאל) */ #leadEditModalAdmin .mask { z-index: 2147483646 !important; /* אחד פחות מהמודאל עצמו */ background: rgba(0, 0, 0, 0.8) !important; backdrop-filter: blur(4px); } /* וידוא שהקופסה עצמה ממורכזת ונראית */ #leadEditModalAdmin .box { position: relative; z-index: 2147483647 !important; background: #1a1b22; border: 1px solid #444; box-shadow: 0 20px 60px rgba(0,0,0,0.9); } /* ודא שהמודאל מקבל פלקס כשהוא פתוח */ #leadEditModalAdmin.open { display: flex !important; opacity: 1 !important; visibility: visible !important; } /* חיזוק נוסף למיקום */ #leadEditModalAdmin { top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; } /* הופך את כותרות הטבלה ללחיצות ומסמן את כיוון המיון */ .sortable-th { cursor: pointer; user-select: none; transition: background-color 0.2s; } .sortable-th:hover { background-color: rgba(255, 255, 255, 0.1); } .sortable-th i.fa-sort, .sortable-th i.fa-sort-up, .sortable-th i.fa-sort-down { margin-right: 5px; font-size: 0.8em; opacity: 0.5; } .sortable-th.active-sort i { opacity: 1; color: #7c3aed; /* הצבע הסגול של המערכת שלך */ } /* מתיחת עורך הקוד למקסימום גובה בתוך הפופ-אפ */ .fullscreen-code-modal { height: 95vh !important; display: flex !important; flex-direction: column !important; } .fullscreen-code-modal .swal2-html-container { flex-grow: 1 !important; } .code-editor-fullscreen { height: 100% !important; box-shadow: inset 0 0 10px rgba(0,255,0,0.1) !important; } #tab-design { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-content: start; } #tab-design h3 { grid-column: span 2; } /* כותרות יתפסו שורה שלמה */ /* פריסת רשת ללשונית כללי ופרטי קשר */ #tab-general { display: grid; grid-template-columns: 1fr 1fr; /* חלוקה לשני טורים שווים */ gap: 15px 20px; /* רווח בין שדות */ align-content: start; } /* אלמנטים שחייבים לתפוס שורה שלמה (2 טורים) */ #tab-general h3, #tab-general hr, #tab-general .setting-card, #tab-general .nav-sep { grid-column: span 2; } /* התאמת שדות טקסט בודדים לטור אחד */ #tab-general .field { grid-column: span 1; } /* במידה ויש שדה שאתה רוצה שיישאר רחב במיוחד (כמו שם האתר) */ #tab-general .field.mb-4:first-of-type { grid-column: span 2; } /* הסתרת סרגל עריכת הטקסט הצף כדי למנוע כפילות */ .gjs-rte-actionbar { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ========================================================== PREMIUM SETTINGS MODAL — clean, structured, premium UI ========================================================== */ #siteSettingsModal .mask{ background: radial-gradient(circle at top right, rgba(124,58,237,.16), transparent 35%), radial-gradient(circle at top left, rgba(14,165,233,.12), transparent 30%), rgba(2,6,23,.78); backdrop-filter: blur(8px); } #siteSettingsModal .box{ width:min(1380px, 96vw) !important; height:min(90vh, 920px) !important; max-height:calc(100vh - 28px) !important; padding:0 !important; margin:14px auto !important; border-radius:24px !important; border:1px solid rgba(255,255,255,.12) !important; background:linear-gradient(180deg, rgba(11,16,28,.98), rgba(8,11,20,.99)) !important; box-shadow:0 30px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05) !important; overflow:hidden !important; } #siteSettingsModal .modal-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; background:linear-gradient(180deg, rgba(18,24,39,.92), rgba(10,14,24,.82)); border-bottom:1px solid rgba(255,255,255,.09); position:sticky; top:0; z-index:5; backdrop-filter: blur(12px); } #siteSettingsModal .settings-title-wrap{ min-width:0; display:flex; flex-direction:column; gap:4px; } #siteSettingsModal .modal-header .nav-title{ display:flex; align-items:center; gap:10px; margin:0 !important; font-size:1.22rem !important; font-weight:900; color:#f8fafc; } #siteSettingsModal .modal-header .nav-title::before{ content:"\f013"; font-family:"Font Awesome 6 Free"; font-weight:900; width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; color:#ede9fe; background:linear-gradient(135deg, rgba(124,58,237,.34), rgba(14,165,233,.18)); border:1px solid rgba(255,255,255,.08); box-shadow:0 10px 24px rgba(124,58,237,.18); } #siteSettingsModal .settings-title-sub{ color:#94a3b8; font-size:.86rem; line-height:1.35; } #siteSettingsModal .modal-header .row{ gap:10px !important; } #siteSettingsModal .modal-header .btn{ height:44px; border-radius:14px; border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.05); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); } #siteSettingsModal #btnSaveAllSettings{ padding-inline:16px; font-weight:800; background:linear-gradient(135deg, rgba(16,185,129,.24), rgba(124,58,237,.24)); border-color:rgba(16,185,129,.38); } #siteSettingsModal .settings-layout{ display:grid !important; grid-template-columns:280px minmax(0,1fr); min-height:0; height:100%; overflow:hidden !important; } #siteSettingsModal .settings-sidebar{ padding:18px; display:flex; flex-direction:column; gap:10px; background: linear-gradient(180deg, rgba(15,23,42,.9), rgba(11,18,32,.88)), linear-gradient(180deg, rgba(124,58,237,.06), transparent 40%); border-inline-end:1px solid rgba(255,255,255,.07); overflow:auto; } #siteSettingsModal .settings-tab-btn{ width:100%; text-align:right; padding:14px 16px; border-radius:18px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); color:#e5e7eb; font-weight:800; cursor:pointer; transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; position:relative; display:flex; align-items:center; gap:10px; } #siteSettingsModal .settings-tab-btn i{ width:18px; text-align:center; color:#c4b5fd; } #siteSettingsModal .settings-tab-btn::after{ content:attr(data-count); margin-inline-start:auto; min-width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:rgba(255,255,255,.06); color:#cbd5e1; font-size:.78rem; border:1px solid rgba(255,255,255,.07); } #siteSettingsModal .settings-tab-btn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); } #siteSettingsModal .settings-tab-btn.active{ background:linear-gradient(135deg, rgba(124,58,237,.22), rgba(59,130,246,.13)); border-color:rgba(124,58,237,.45); box-shadow:0 10px 24px rgba(124,58,237,.18), inset 0 1px 0 rgba(255,255,255,.05); color:#fff; } #siteSettingsModal .settings-tab-btn.active::after, #siteSettingsModal .settings-tab-btn.has-search-hit::after{ background:rgba(124,58,237,.24); color:#f5f3ff; border-color:rgba(124,58,237,.3); } #siteSettingsModal .settings-content{ padding:22px !important; overflow:auto !important; background: radial-gradient(circle at top left, rgba(124,58,237,.06), transparent 30%), linear-gradient(180deg, rgba(2,6,23,.56), rgba(2,6,23,.22)); } #siteSettingsModal .tab-pane{ display:none; animation:krSettingsFade .18s ease; } #siteSettingsModal .tab-pane.active{ display:block !important; } @keyframes krSettingsFade{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } } #siteSettingsModal #tab-code, #siteSettingsModal #tab-seo{ display:grid; gap:16px; align-content:start; } #siteSettingsModal #tab-code.active, #siteSettingsModal #tab-seo.active{ display:grid !important; } #siteSettingsModal #tab-general, #siteSettingsModal #tab-design{ gap:16px 18px !important; } #siteSettingsModal #tab-design h3, #siteSettingsModal #tab-design h5, #siteSettingsModal #tab-design hr, #siteSettingsModal #tab-design .field.mb-4{ grid-column:1 / -1; } #siteSettingsModal .settings-section-title{ position:relative; margin:4px 0 0 !important; padding-inline-start:16px; font-size:1.05rem !important; color:#f8fafc !important; } #siteSettingsModal .settings-section-title::before{ content:""; position:absolute; inset-inline-start:0; top:4px; bottom:4px; width:4px; border-radius:999px; background:linear-gradient(180deg, #8b5cf6, #06b6d4); box-shadow:0 0 18px rgba(139,92,246,.35); } #siteSettingsModal .nav-sep{ border:0; height:1px; margin:4px 0 8px !important; background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); } #siteSettingsModal .setting-card{ position:relative; border-radius:20px; padding:18px; border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.16); overflow:hidden; } #siteSettingsModal .setting-card::before{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 55%); } #siteSettingsModal .setting-card:hover{ border-color:rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 14px 34px rgba(0,0,0,.22); } #siteSettingsModal .field{ min-width:0; } #siteSettingsModal .label{ color:#f8fafc; font-weight:800; font-size:.94rem; letter-spacing:.01em; } #siteSettingsModal .muted, #siteSettingsModal .text-xs.muted, #siteSettingsModal .text-sm.muted{ color:#94a3b8 !important; opacity:1; } #siteSettingsModal .input, #siteSettingsModal select.input, #siteSettingsModal textarea.input{ min-width:0 !important; width:100%; background:rgba(15,23,42,.78); color:#fff; border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:.78rem .92rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.03); } #siteSettingsModal textarea.input{ min-height:96px; resize:vertical; } #siteSettingsModal .input:focus, #siteSettingsModal select.input:focus, #siteSettingsModal textarea.input:focus{ outline:none; border-color:rgba(139,92,246,.6); box-shadow:0 0 0 3px rgba(139,92,246,.14), inset 0 1px 0 rgba(255,255,255,.03); } #siteSettingsModal input[type="checkbox"]{ width:18px; height:18px; accent-color:#8b5cf6; } #siteSettingsModal input[type="range"]{ accent-color:#8b5cf6; } #siteSettingsModal .row{ gap:10px; } #siteSettingsModal .grid.grid-2{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; } #siteSettingsModal #redirectsList{ border-radius:14px !important; background:rgba(2,6,23,.7) !important; } #siteSettingsModal .settings-search-wrap{ display:flex; align-items:center; gap:10px; min-width:260px; padding:0 12px; height:44px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); } #siteSettingsModal .settings-search-wrap i{ color:#a78bfa; flex:0 0 auto; } #siteSettingsModal .settings-search-input{ min-width:0; width:260px; border:0 !important; background:transparent !important; box-shadow:none !important; padding:0 !important; height:auto; } #siteSettingsModal .settings-hidden-by-search{ display:none !important; } #siteSettingsModal .has-search-hit{ border-color:rgba(14,165,233,.35); } #siteSettingsModal .tab-pane:not(.settings-pane-has-results) .settings-hidden-by-search{ display:none !important; } #siteSettingsModal .btn{ border-radius:14px; } #siteSettingsModal .w-full{ width:100%; } #siteSettingsModal .p-4{ padding:18px !important; } #siteSettingsModal .pt-5{ padding-top:18px !important; } #siteSettingsModal .mt-6{ margin-top:8px !important; } @media (max-width: 1180px){ #siteSettingsModal .settings-layout{ grid-template-columns:1fr; } #siteSettingsModal .settings-sidebar{ flex-direction:row; flex-wrap:wrap; align-items:stretch; border-inline-end:0; border-bottom:1px solid rgba(255,255,255,.07); } #siteSettingsModal .settings-tab-btn{ width:calc(50% - 5px); } } @media (max-width: 780px){ #siteSettingsModal .box{ width:min(100vw, 100vw) !important; height:100dvh !important; max-height:100dvh !important; margin:0 !important; border-radius:0 !important; } #siteSettingsModal .modal-header{ padding:14px; align-items:flex-start; flex-direction:column; } #siteSettingsModal .modal-header .row{ width:100%; flex-wrap:wrap; } #siteSettingsModal .settings-search-wrap{ order:3; width:100%; min-width:0; } #siteSettingsModal .settings-search-input{ width:100%; } #siteSettingsModal .settings-sidebar{ padding:12px; gap:8px; } #siteSettingsModal .settings-tab-btn{ width:100%; } #siteSettingsModal .settings-content{ padding:14px !important; } #siteSettingsModal .grid.grid-2, #siteSettingsModal #tab-general, #siteSettingsModal #tab-design{ grid-template-columns:1fr !important; } #siteSettingsModal #tab-general h3, #siteSettingsModal #tab-general hr, #siteSettingsModal #tab-general .setting-card, #siteSettingsModal #tab-general .nav-sep, #siteSettingsModal #tab-design h3, #siteSettingsModal #tab-design h5, #siteSettingsModal #tab-design hr, #siteSettingsModal #tab-design .field.mb-4{ grid-column:1 / -1 !important; } } /* ===== Style block 2: parent ===== */ .available-items-list, .current-menu-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; } .available-items-list li, .current-menu-list li { background: #1a1b22; padding: 8px 10px; border-radius: 6px; border: 1px solid #333; cursor: grab; display: flex; justify-content: space-between; align-items: center; } .current-menu-list li .remove-item-btn { cursor: pointer; color: #f87171; background: none; border: none; font-size: 1.1em; } .placeholder { justify-content: center !important; color: var(--muted); cursor: default !important; } .sortable-ghost { background: #2a2a33 !important; opacity: 0.7; } /* עיצוב בזמן גרירה */ /* ===== Style block 3: parent