/* ═══════════════════════════════════════════════════════════════════════ 🧊 מערכת-העיצוב של Nagan (v3.0) — «Modern Dark / Cinema Mobile» ═══════════════════════════════════════════════════════════════════════ נגזר מ-`ui-ux-pro-max` (סגנון «Modern Dark», טיפוגרפיה Rubik). שלוש החלטות שמחזיקות את כל הקובץ: 1. **זכוכית, לא צבע.** כל חלונית/תפריט/התראה היא משטח שקוף-למחצה עם טשטוש-רקע. אין פאנלים צבעוניים — הצבע שמור ל**מצב** (פעיל/סכנה) בלבד. 2. **שחור אמיתי נפסל.** `#000` על OLED יוצר מריחה בגלילה; הבסיס הוא `#050506` עם גרדיאנט עדין. 3. **קצב אחד לתנועה.** אותו easing ואותו משך בכל מקום — אחרת האפליקציה מרגישה כאילו חוברה מחלקים. ⚠️ הפונט מאורח **מקומית** (`/static/fonts/`). ה-CSP הוא `default-src 'self'` ולכן `fonts.googleapis.com` נחסם — קישור ל-CDN היה נותן פונט-ברירת-מחדל בשקט. ═══════════════════════════════════════════════════════════════════════ */ @import url('/static/fonts/heebo.css'); :root { /* משטחים */ --bg-deep: #020203; --bg-base: #050506; --bg-elev: #0d0e12; --glass: rgba(255, 255, 255, .055); --glass-strong: rgba(20, 22, 30, .78); --hair: rgba(255, 255, 255, .09); --hair-soft: rgba(255, 255, 255, .055); /* טקסט — ניגוד נבדק מול var(--bg-base) */ --fg: #edeef2; /* 15.8:1 */ --fg-dim: #9aa1b0; /* 6.1:1 */ --fg-faint: #6b7385; /* 3.4:1 — תוויות בלבד, לא גוף-טקסט */ --accent: #22d3ee; --accent-soft: rgba(34, 211, 238, .18); --danger: #ff5a6b; --ok: #35d6a4; --r-sm: 12px; --r: 16px; --r-lg: 22px; --r-pill: 999px; --blur: blur(22px) saturate(1.5); --ease: cubic-bezier(.16, 1, .3, 1); --t: 220ms; --t-fast: 150ms; --shadow-1: 0 4px 18px rgba(0, 0, 0, .38); --shadow-2: 0 12px 40px rgba(0, 0, 0, .55); } html, body { font-family: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--fg); -webkit-font-smoothing: antialiased; letter-spacing: -.005em; } /* ⚠️⚠️ **הרקע מפוצל, לא בקיצור אחד.** `background:` מקוצר על `html, body` דרס את צבע-הבסיס שב-platform.css — בדיוק התיקון שהמלכודת המתועדת שם («כל שטח שמעבר נשאר לבן») דרשה. התוצאה: דף ארוך מהמסך — /arrange היה הראשון — הציג טקסט בהיר על לבן, כלומר כלום. הגרדיאנט נשאר על body; צבע-הבסיס האטום על html. */ html { background: #0a0b10; } body { background: linear-gradient(180deg, #0a0b10 0%, var(--bg-base) 55%, var(--bg-deep) 100%); background-attachment: fixed; min-height: 100dvh; } h1, h2, h3, b, strong { font-weight: 700; letter-spacing: -.018em; } .screen-title { font-weight: 700; letter-spacing: -.022em; } /* ---------------------------------------------------------------- זכוכית */ /* המחלקה שכל חלונית יורשת. `-webkit-` נשמר — ספארי עדיין דורש אותו. */ .glass { background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--hair); box-shadow: var(--shadow-2); } /* ⚠️ בלי תמיכת-טשטוש (דפדפן ישן) — מעמיקים את הרקע במקום להשאיר שקוף, אחרת הטקסט יושב על התוכן שמתחת ובלתי-קריא. */ @supports not (backdrop-filter: blur(1px)) { .glass, .sheet-body, .navbar, .bell-panel, .plat-toast, .menu-body, .st-menu, .sed-panel { background: rgba(12, 13, 18, .97) !important; } } /* ---------------------------------------------------------- סרגל תחתון צף */ /* בקשת-חיים: «מלבן מעוגל צף» ולא פס מקצה-לקצה. ⚠️ הוא **מרחף מעל התוכן**, ולכן `.page` חייב ריפוד-תחתון בגובהו — אחרת השורה האחרונה נחתכת (וזה בדיוק מה שהסתיר את שם-הפרופיל ברילס). */ .navbar { inset-inline: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: var(--r-pill); background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--hair); box-shadow: var(--shadow-2); padding-bottom: 0; overflow: hidden; } .navbar .nb { height: 54px; border-radius: var(--r-pill); } .navbar .nb.on { color: #fff; } .navbar .nb.on::before { content: ''; position: absolute; top: auto; bottom: 7px; inset-inline: 34%; height: 3px; border-radius: var(--r-pill); background: var(--accent); } .navbar .nb::after { /* משוב-לחיצה בלי הזזת-פריסה */ content: ''; position: absolute; inset: 6px; border-radius: var(--r-pill); background: transparent; transition: background var(--t-fast) var(--ease); } .navbar .nb:active::after { background: rgba(255, 255, 255, .07); } body.has-nav .page { padding-bottom: calc(54px + 26px + env(safe-area-inset-bottom, 0px)); } .fab { bottom: calc(54px + 26px + env(safe-area-inset-bottom, 0px)); } /* ------------------------------------------------------- חלוניות ותפריטים */ .sheet-body, .bell-panel, .menu-body, .sed-panel, .st-menu { background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--hair); box-shadow: var(--shadow-2); } .sheet-body { border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; } .sheet-scrim { background: rgba(0, 0, 0, .5); } /* 50% — הסף לקריאוּת-חזית */ .sheet-head { border-bottom: 1px solid var(--hair-soft); } /* גררת-סגירה — הרמז החזותי ש"אפשר למשוך למטה" */ .sheet-body::before { content: ''; display: block; width: 38px; height: 4px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .22); margin: 9px auto 2px; } /* תפריט-הקשר (3 נקודות) */ .menu { position: fixed; inset: 0; z-index: 88; } .menu[hidden] { display: none; } .menu-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); } .menu-body { position: absolute; inset-inline: 14px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: var(--r-lg); overflow: hidden; padding: 6px; animation: sheetUp var(--t) var(--ease); } .menu-it { display: flex; align-items: center; gap: 13px; width: 100%; padding: 14px 14px; border: 0; background: 0; cursor: pointer; color: var(--fg); font-size: .97rem; font-family: inherit; text-align: start; border-radius: var(--r-sm); transition: background var(--t-fast) var(--ease); } .menu-it:active { background: rgba(255, 255, 255, .07); } .menu-it .ic { width: 21px; height: 21px; color: var(--fg-dim); flex: none; } .menu-it.danger { color: var(--danger); } .menu-it.danger .ic { color: var(--danger); } .menu-sep { height: 1px; background: var(--hair-soft); margin: 5px 10px; } .menu-title { padding: 10px 14px 6px; font-size: .78rem; color: var(--fg-faint); } /* התראה צפה */ .plat-toast { background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--hair); border-radius: var(--r); box-shadow: var(--shadow-2); color: var(--fg); font-family: inherit; } /* כרטיסים */ .card, .sc-row, .reel-card { background: var(--glass); border: 1px solid var(--hair-soft); border-radius: var(--r); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* ----------------------------------------------------------- פקדים */ .nav-ic, .mini-btn, .cat-chip, .sed-chip, .cam-chip, .int-chip { font-family: inherit; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .nav-ic:active, .mini-btn:active, .cat-chip:active { transform: scale(.96); } .btn-primary { font-family: inherit; font-weight: 700; border-radius: var(--r); transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease); } .btn-primary:active { transform: scale(.975); filter: brightness(.94); } input, textarea, select, button { font-family: inherit; } input, textarea, select { font-size: 16px; } /* מתחת ל-16 iOS מזגזג-זום */ /* ⚠️ טבעת-מיקוד נשמרת — הסרתה שוברת ניווט-מקלדת ונגישות. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* ------------------------------------------------------------- תנועה */ .sheet-body, .menu-body { animation: sheetUp var(--t) var(--ease); } @keyframes sheetUp { from { transform: translateY(16px); opacity: 0 } to { transform: none; opacity: 1 } } /* ⚠️ חובה — משתמש שביקש פחות-תנועה מקבל ממשק סטטי, לא שבור. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ---------------------------------------------------------- שיתוף */ .shr-strip { display: flex; gap: 14px; overflow-x: auto; padding: 14px 14px 8px; scrollbar-width: none; } .shr-strip::-webkit-scrollbar { display: none; } .shr-p { flex: none; width: 68px; background: 0; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; } .shr-av { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; border: 1px solid var(--hair); } .shr-nm { font-size: .69rem; color: var(--fg-dim); max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shr-empty { padding: 16px 16px 6px; } .shr-acts { padding: 4px 8px calc(14px + env(safe-area-inset-bottom,0px)); } .menu-hint { margin-inline-start: auto; font-size: .78rem; color: var(--fg-faint); font-style: normal; } /* 🎬 רילס — שם-הפרופיל היה **מתחת לסרגל הצף** ונחתך (דיווח-חיים). המידע מורם מעל גובה הסרגל + מרווח. */ .reel-meta { bottom: calc(54px + 30px + env(safe-area-inset-bottom, 0px)); } .reel-side { bottom: calc(54px + 46px + env(safe-area-inset-bottom, 0px)); } .reel-stage { height: calc(100dvh - 118px); } .reel-who b { font-size: .95rem; } .reel-cap { font-size: .88rem; color: rgba(255,255,255,.94); } .reel-act { background: rgba(0,0,0,.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--hair-soft); } /* 📸 שורת-סטוריז וטבעות */ .st-ring { padding: 2px; } /* טבעת «סטורי שלא-נצפה» — גון אחד, בהירות מסתובבת. */ .st-new { background: conic-gradient(from 210deg, var(--accent), var(--accent-2), var(--accent)); } .st-seen { background: rgba(255,255,255,.16); } .st-av { border-color: var(--bg-base); } .st-nm { color: var(--fg-dim); } .st-tag { background: rgba(255,255,255,.86); color: #111; } /* ───────────────────────────────────────────────────────────────────── 🎬 פריסת-הרילס — תוקנה אחרי מדידה על המכשיר ───────────────────────────────────────────────────────────────────── הבאג: `.reel-side`/`.reel-meta` ממוקמים יחסית ל-`.reel-page`, לא למסך, ולכן היסט "בגובה הסרגל" **לא הרחיק אותם ממנו** — שניהם נמדדו מתחתיו, והמידע גם חפף לעמודת-הפעולות. (זה מה שהסתיר את שם-הפרופיל.) הפתרון: **העמוד עצמו נגמר מעל הסרגל**, ואז ההיסטים הפנימיים קטנים ומדידים. שתי הרצועות יושבות בצדדים נגדיים כדי שלא ייגעו. */ /* ⚠️ הגובה נקבע ב-JS (`fitStage`) מתוך מדידה אמיתית — ראה reels.js. כל ניסיון לחשב אותו מ-100dvh נכשל פעמיים, כי הבמה לא מתחילה בראש המסך. */ body.bleed .reel-stage { height: 60dvh; } /* הסרגל תופס 56 + 10 מרווח = 66. המרווח כאן 78/84 ⇒ שוליים של 12px+ גם כשה-viewport זז. זה מה שהחזיר את שם-הפרופיל למסך. */ .reel-side { bottom: 12px; inset-inline-end: 10px; gap: 12px; } .reel-meta { bottom: 14px; inset-inline-start: 14px; inset-inline-end: 74px; /* מפנה מקום לעמודת-הפעולות */ } .reel-who { gap: 9px; } .reel-who b { font-size: .96rem; font-weight: 700; } .reel-cap { margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.bleed .fab { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; border-radius: 17px; } /* ⚠️ בדף מלא-רוחב אין ריפוד-תחתון — הווידאו אמור לרוץ עד הקצה. */ body.bleed.has-nav .page { padding-bottom: 0; } /* 👤 שם-המפרסם ברילס — למעלה-ימין (בקשת-חיים). למטה הוא נבלע בסרגל הצף. */ .reel-top { position: absolute; top: 12px; inset-inline-start: 12px; inset-inline-end: 12px; z-index: 3; pointer-events: none; } .reel-top .reel-who { display: inline-flex; align-items: center; gap: 9px; margin: 0; background: rgba(0, 0, 0, .42); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--hair-soft); padding: 6px 13px 6px 7px; border-radius: var(--r-pill); } .reel-top .reel-who b { font-size: .9rem; } .reel-meta { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } /* ═══════════════════ ✏️ עורך-סטורי v3.1 ═══════════════════ */ .sed { position: fixed; inset: 0; z-index: 95; background: var(--bg-deep); } /* מסך-הפתיחה — נראה רק אם ביטלו את בורר-הגלריה שנפתח מיד */ .sed-pick { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; } .sed-big { display: flex; align-items: center; gap: 12px; width: min(100%, 320px); padding: 18px 22px; border-radius: var(--r-lg); cursor: pointer; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--hair); color: var(--fg); font-family: inherit; font-size: 1.02rem; font-weight: 600; } .sed-big .ic { width: 24px; height: 24px; } .sed-x { position: absolute; top: calc(14px + env(safe-area-inset-top,0px)); inset-inline-end: 14px; width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--glass); border: 1px solid var(--hair); color: var(--fg); cursor: pointer; display: grid; place-items: center; } .sed-stage { position: absolute; inset: 0; } .sed-canvas { position: absolute; inset: 0; overflow: hidden; touch-action: none; } .sed-bg { position: absolute; inset: 0; display: grid; place-items: center; } .sed-bg img, .sed-bg video { width: 100%; height: 100%; object-fit: contain; } .sed-layers { position: absolute; inset: 0; } /* כל שכבה — נגררת/מסתובבת/משנה-גודל דרך gesture.js */ .sed-lay { position: absolute; touch-action: none; user-select: none; cursor: grab; will-change: transform; } .sed-lay.grabbing { cursor: grabbing; } .sed-lay-text { user-select: text; outline: none; min-width: 24px; text-align: center; line-height: 1.25; padding: 2px 6px; white-space: pre-wrap; } .sed-lay.sel { box-shadow: 0 0 0 1.5px rgba(255,255,255,.5); border-radius: 8px; } .sed-stk { display: block; } /* סרגלים — כפתורים בלי מסגרת (בקשת-חיים) */ .sed-top { position: absolute; inset-inline: 0; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top,0px)) 12px 8px; } .sed-tools { display: flex; gap: 2px; } .sed-ic { width: 46px; height: 46px; border: 0; background: 0; cursor: pointer; color: #fff; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,.75)); } .sed-ic .ic { width: 23px; height: 23px; } .sed-ic .sed-lbl { font-size: .58rem; font-style: normal; opacity: .85; } .sed-ic.on { color: var(--accent); } .sed-ic:active { transform: scale(.9); } /* 📏 סלייד-גודל אנכי בצד */ .sed-size { position: absolute; inset-inline-start: 6px; top: 26%; bottom: 26%; z-index: 5; display: grid; place-items: center; } .sed-size input { writing-mode: vertical-lr; direction: rtl; width: 34px; height: 100%; accent-color: #fff; background: 0; } /* סרגל-טקסט */ .sed-txtbar { position: absolute; inset-inline: 0; z-index: 5; bottom: calc(84px + env(safe-area-inset-bottom,0px)); display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; padding: 0 10px; } .sed-cols { display: flex; gap: 6px; } .sed-col { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(255,255,255,.35); padding: 0; } .sed-col.on { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.22); } .sed-bottom { position: absolute; inset-inline: 0; z-index: 5; bottom: calc(16px + env(safe-area-inset-bottom,0px)); display: flex; justify-content: center; } .sed-post { display: inline-flex; align-items: center; gap: 9px; padding: 13px 26px; border-radius: var(--r-pill); border: 0; cursor: pointer; background: var(--accent); color: var(--on-accent); font-family: inherit; font-weight: 700; font-size: 1rem; box-shadow: var(--shadow-2); } .sed-post .ic { width: 19px; height: 19px; } .sed-panel { position: absolute; inset-inline: 0; bottom: 0; z-index: 6; max-height: 72vh; overflow-y: auto; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 12px 12px calc(16px + env(safe-area-inset-bottom,0px)); } .sed-form { display: flex; flex-direction: column; gap: 10px; } .sed-in { width: 100%; padding: 12px 14px; border-radius: var(--r-sm); font-size: 16px; border: 1px solid var(--hair); background: rgba(255,255,255,.05); color: var(--fg); } .sed-grid { display: grid; gap: 6px; } .sed-grid.emo { grid-template-columns: repeat(7, 1fr); } .sed-grid.stk { grid-template-columns: repeat(4, 1fr); } .sed-emo { font-size: 1.9rem; background: rgba(255,255,255,.05); border: 0; border-radius: var(--r-sm); padding: 8px 0; cursor: pointer; display: grid; place-items: center; } .sed-emo .sed-stk { width: 46px; height: 46px; } .sed-add { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px; border-radius: var(--r-sm); cursor: pointer; color: var(--fg-dim); background: rgba(255,255,255,.04); border: 1px dashed var(--hair); font-family: inherit; } .poll-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; } .poll-row .sed-ic { width: 38px; height: 38px; filter: none; color: var(--fg-dim); } /* 🗺️ בורר-מיקום */ .geo-search { display: flex; align-items: center; gap: 8px; padding: 0 4px; } .geo-search .ic { width: 20px; height: 20px; color: var(--fg-dim); flex: none; } .geo-map { position: relative; height: 150px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--hair); background: #1a1d26; } .geo-tiles { position: absolute; inset: -33.34%; } .geo-tiles img { position: absolute; width: 33.34%; height: 33.34%; } .geo-pin { position: absolute; inset-inline-start: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -85%); color: var(--danger); filter: drop-shadow(0 2px 5px rgba(0,0,0,.6)); } .geo-list { max-height: 34vh; overflow-y: auto; } .geo-it { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 10px; border: 0; background: 0; cursor: pointer; color: var(--fg); font-family: inherit; font-size: .93rem; text-align: start; border-radius: var(--r-sm); } .geo-it:active { background: rgba(255,255,255,.06); } .geo-it .ic { width: 19px; height: 19px; color: var(--danger); flex: none; } .geo-load { padding: 18px 12px; color: var(--fg-dim); font-size: .88rem; text-align: center; } /* מיקום בצופה — לחיץ, פותח ניווט */ .st-nav-btn { cursor: pointer; font-family: inherit; } /* מילוי-רקע לפי אחוזי-ההצבעה */ .st-poll-opt { position: relative; overflow: hidden; } .st-poll-opt::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: var(--pct, 0%); background: rgba(255,255,255,.16); transition: width var(--t) var(--ease); } .st-poll-opt > * { position: relative; } /* ═══════════════════════════════════════════════════════════════════════ 🧊 ניטרול-צבע (v3.3) — «כל החלוניות כמו הסרגל הצף» (בקשת-חיים) ═══════════════════════════════════════════════════════════════════════ הכלל: **משטח = זכוכית. צבע = מצב בלבד.** כפתורי-גרדיאנט סגול-תכלת נראו ילדותיים ולא מתיישבים עם סרגל-הזכוכית. כאן כל משטח-פעולה עובר לאותה שפה: שקוף-למחצה + טשטוש + קו-שיער. מה שנשאר צבעוני, בכוונה: • טבעת-סטורי-שלא-נצפה — מצב, ובלעדיה אין דרך לדעת מה חדש. • ❤️ לייק פעיל · אדום-סכנה · ירוק-הצלחה — משמעות, לא קישוט. • רקעי סטורי-טקסט ובוררי-הצבע — **תוכן** שהמשתמש בחר. ═══════════════════════════════════════════════════════════════════════ */ .btn-primary, .mini-join, .sed-post, .fab, .sed-big, .cam-shoot { background: var(--glass-strong) !important; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--hair) !important; color: var(--fg) !important; box-shadow: var(--shadow-1); } .btn-primary:active, .sed-post:active, .fab:active { filter: brightness(1.12); } /* ה-➕ — זכוכית, והסימן עצמו בהיר. הוא לא צריך גרדיאנט כדי להימצא. */ .fab { color: var(--fg) !important; } .fab .ic { width: 25px; height: 25px; } /* כפתור «סטורי חדש» — טבעת נייטרלית; הגרדיאנט שמור ללא-נצפה */ .st-add .st-plus { background: var(--hair) !important; } .st-add .st-av { background: var(--bg-elev) !important; color: var(--fg); } /* כרטיסי-הבית: פס-הצבע העליון הופך לקו-שיער אחיד */ .space-orch::before, .space-social::before, .space-learn::before { background: var(--hair) !important; } .space-card, .card { background: var(--glass) !important; } /* התראה שלא נקראה — סימון עדין, בלי משטח סגול */ .bell-item.unread { background: rgba(255, 255, 255, .05) !important; } .bell-item.unread::before { content: ''; position: absolute; inset-inline-start: 4px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--accent); } .bell-item { position: relative; } /* שם-המותג «נגן» — טקסט רגיל, בלי גרדיאנט. הצבע חי בסימן שלידו. */ .brand-name { background: none !important; color: var(--fg) !important; -webkit-text-fill-color: var(--fg); } /* גלולות-סינון · שדות · חלוניות-מצלמה — אותה זכוכית */ .cat-chip, .sed-chip, .int-chip, .cam-chip, .mini-btn, .nav-btn { background: rgba(255, 255, 255, .055) !important; border: 1px solid var(--hair) !important; color: var(--fg) !important; } .cat-chip.sel, .sed-chip.on, .int-chip.on, .cam-chip.on { background: rgba(255, 255, 255, .92) !important; color: #111 !important; border-color: transparent !important; font-weight: 700; } input, textarea, select { background: rgba(255, 255, 255, .045) !important; border: 1px solid var(--hair) !important; color: var(--fg) !important; } /* כפתור-ההקלטה — טבעת לבנה, נקודה אדומה (אדום = «מקליט», זה מצב) */ .cam-shoot { background: transparent !important; border: 4px solid rgba(255,255,255,.92) !important; } /* מד-התקדמות/הדגשות שהיו בגרדיאנט */ .navbar .nb.on::before { background: var(--fg) !important; } .st-poll-opt.on { background: rgba(255, 255, 255, .9) !important; color: #111 !important; } /* ───────────────────────────────────────────────────────────────────── 🎬 רילס מקצה-לקצה (v3.5, בקשת-חיים: «חייבים להיות מצד לצד של המסך») ───────────────────────────────────────────────────────────────────── מה חסם: `.page` נתן ריפוד אופקי של 8px, ולכל רילס היו פינות מעוגלות ומרווח-תחתון — כלומר הסרטון ישב בתוך "כרטיס" ולא מילא את המסך. ⚠️ `object-fit` עובר ל-`cover`: זה מה שהופך את זה למסך-מלא אמיתי. המחיר הוא חיתוך קל בסרטון שאינו 9:16 — וזו ההתנהגות המקובלת ברילס. */ body.bleed .page { padding: 0 !important; max-width: none; } body.bleed .reel-stage { border-radius: 0; margin: 0; } .reel-page { border-radius: 0; margin-bottom: 0; width: 100%; } .reel-vid { object-fit: cover; } /* הפקדים מקבלים שוליים משלהם, כי אין יותר ריפוד-עמוד שירחיק אותם מהקצה */ .reel-side { inset-inline-end: 12px; } .reel-meta { inset-inline-start: 16px; inset-inline-end: 76px; } .reel-top { inset-inline-start: 14px; inset-inline-end: 14px; } /* שורת-הסטוריז נשארת עם ריפוד — היא לא חלק מהסרטון */ body.bleed .story-row { padding-inline: 0; } .sed-title { font-size: 1.2rem; margin-bottom: 6px; } .sed-big { flex-direction: column; align-items: flex-start; gap: 3px; text-align: start; } .sed-big .ic { margin-bottom: 4px; } .sed-big i { font-style: normal; font-size: .78rem; font-weight: 400; color: var(--fg-dim); } /* ------------------------------------------------ 🗺️ מפה על כל המסך (v3.6) בקשת-חיים: «אני צריך אותה על כל החלון, היא נראית לא טוב כשזה בקטן». ⚠️ המפה **חייבת** את כל השטח: היא לא רשימה, אלא כלי-התמצאות — בגיליון של 150px אי-אפשר לזהות איפה אתה, וזו כל מטרתה. */ .sed-panel.full { inset: 0; max-height: none; border-radius: 0; padding: calc(8px + env(safe-area-inset-top,0px)) 10px calc(10px + env(safe-area-inset-bottom,0px)); display: flex; } .sed-panel.full .sed-form { height: 100%; width: 100%; min-height: 0; } .geo-top { display: flex; align-items: center; gap: 8px; } .geo-top .geo-search { flex: 1; } .sed-x { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%; background: rgba(255,255,255,.07); color: var(--fg); } .sed-x .ic { width: 20px; height: 20px; } .sed-panel.full .geo-map { flex: 1 1 auto; height: auto; min-height: 200px; } .sed-panel.full .geo-list { flex: none; max-height: 32vh; } /* --------------------------------------------- 🖼️ תמונת-פרופיל (v3.6) בקשת-חיים: «בעיגול של הסטורי של כל אחד תהיה תמונת-הפרופיל שלו». ⚠️ התמונה **מכסה** את האימוג'י ולא מחליפה אותו במבנה — מי שאין לו תמונה ממשיך לראות אימוג'י, ואין אף עיגול ריק. */ .avatar, .st-av { position: relative; overflow: hidden; } .avatar img.av-img, .st-av img.av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .av-edit { position: relative; display: inline-block; } .av-edit .av-cam { position: absolute; inset-inline-end: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--glass-strong); border: 1px solid var(--hair); color: var(--fg); } .av-edit .av-cam .ic { width: 14px; height: 14px; } /* ═══════════════════════════════ 📍 מסך-"הבא" · 🗺️ מפת-שיתופים (v3.7) ⚠️ הכל בזכוכית ובלי צבע-מלא — «חלוניות צבעוניות זה סטייל של כיתה א». הצבע היחיד שנשאר הוא צבע-האווטאר, כי הוא מזהה אדם. */ .meta-wrap { position: fixed; inset: 0; z-index: 90; display: flex; background: rgba(4,4,6,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .meta-sheet, .map-full { margin: auto; width: 100%; max-width: 560px; height: 100%; display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: calc(10px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px)); background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); } .meta-top { display: flex; align-items: center; gap: 10px; } .meta-top b { flex: 1; font-size: 1rem; } .meta-go { border: 1px solid var(--hair); border-radius: var(--r-pill); background: rgba(255,255,255,.08); color: var(--fg); padding: 8px 20px; font-weight: 700; } .meta-go:disabled { opacity: .55; } .meta-prev { width: 100%; max-height: 34vh; object-fit: contain; border-radius: var(--r); background: #000; flex: none; } .meta-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 12px; border: 1px solid var(--hair); border-radius: var(--r); background: rgba(255,255,255,.04); color: var(--fg); text-align: start; } .meta-row .ic { width: 20px; height: 20px; color: var(--fg-dim); flex: none; } .meta-val { flex: 1; } .meta-chips { display: flex; flex-wrap: wrap; gap: 6px; } .meta-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 6px 5px 10px; border: 1px solid var(--hair); border-radius: var(--r-pill); font-size: .84rem; } .meta-chip button { border: 0; background: none; color: var(--fg-dim); display: grid; place-items: center; padding: 0; } .meta-chip .ic { width: 13px; height: 13px; } .meta-sug, .tg-list { display: flex; flex-direction: column; overflow-y: auto; } .meta-sug { max-height: 30vh; border: 1px solid var(--hair); border-radius: var(--r); } .tg-list { flex: 1; min-height: 0; } .mn-it, .tg-it { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; background: none; color: var(--fg); text-align: start; width: 100%; } .mn-it + .mn-it, .tg-it + .tg-it { border-top: 1px solid var(--hair); } .mn-it:active, .tg-it:active { background: rgba(255,255,255,.06); } .tg-it span { flex: 1; display: flex; flex-direction: column; } .tg-it i, .mn-it i { font-style: normal; color: var(--fg-dim); font-size: .82rem; } .tg-it em { font-style: normal; font-size: .74rem; color: var(--fg-dim); border: 1px solid var(--hair); border-radius: var(--r-pill); padding: 2px 8px; } .map-canvas { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: var(--r); background: #10121a; touch-action: none; } .map-pins { position: absolute; inset: 0; } .map-pin { position: absolute; transform: translate(-50%,-50%); border: 0; padding: 0; background: none; } .map-pin .avatar { width: 38px; height: 38px; font-size: 1rem; border: 2px solid var(--fg); box-shadow: var(--shadow-2); } .map-pin i { position: absolute; inset-inline-end: -4px; top: -4px; font-style: normal; min-width: 18px; padding: 0 4px; border-radius: 9px; font-size: .68rem; line-height: 18px; background: var(--glass-strong); border: 1px solid var(--hair); } .map-top { display: flex; align-items: center; gap: 10px; } .map-seg { display: flex; flex: 1; gap: 4px; padding: 3px; border: 1px solid var(--hair); border-radius: var(--r-pill); } .map-seg button { flex: 1; border: 0; border-radius: var(--r-pill); padding: 8px; background: none; color: var(--fg-dim); font-size: .86rem; } .map-seg button.on { background: rgba(255,255,255,.1); color: var(--fg); font-weight: 600; } .map-gal { position: absolute; inset-inline: 0; bottom: 0; max-height: 52%; overflow-y: auto; z-index: 2; padding: 10px 12px calc(12px + env(safe-area-inset-bottom,0px)); border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-top: 1px solid var(--hair); } .gal-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .gal-top b { flex: 1; } .gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .gal-it { position: relative; display: block; aspect-ratio: 9/16; border-radius: 10px; overflow: hidden; background: #000; } .gal-it video { width: 100%; height: 100%; object-fit: cover; } .gal-it span { position: absolute; inset-inline: 0; bottom: 0; padding: 4px 6px; font-size: .7rem; background: linear-gradient(transparent, rgba(0,0,0,.75)); } .reel-place { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; border: 1px solid var(--hair); border-radius: var(--r-pill); padding: 4px 11px; background: rgba(255,255,255,.07); color: var(--fg); font-size: .82rem; } .reel-place .ic { width: 14px; height: 14px; } .reel-tags { margin-top: 4px; font-size: .82rem; } .reel-tags a { color: var(--accent); text-decoration: none; margin-inline-end: 6px; } /* ── מסך-בחירת-סטורי בפריסת-וואטסאפ (v3.7) */ .pick-top { display: flex; align-items: center; gap: 10px; } .pick-top .sed-title { flex: 1; font-size: 1.02rem; } .pick-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .pick-op { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border: 1px solid var(--hair); border-radius: var(--r); background: rgba(255,255,255,.05); color: var(--fg); font-size: .84rem; } .pick-op .ic { width: 22px; height: 22px; } /* ⚠️ `align-items`/`justify-content` **חייבים איפוס מפורש**: כלל קודם של `.sed-pick` (מסך-הבחירה הישן, שהיה שני כפתורים ממורכזים) קבע `center` — ובעמודת-flex זה מכווץ את הילדים לרוחב-התוכן, כך שרשת של 4 עמודות יצאה **108px** בתוך מסך של 1280. נמדד בדפדפן, לא נוחש. */ .sed-pick { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; align-items: stretch; justify-content: flex-start; padding: calc(10px + env(safe-area-inset-top,0px)) 14px calc(14px + env(safe-area-inset-bottom,0px)); } /* ── רשת-הגלריה במסך-בחירת-הסטורי (v3.8) — פריסת-וואטסאפ. ⚠️ הרשת קיימת גם בווב (עם אריח אחד) ולא רק בנייטיב: כך המעבר לנייטיב הוא **מילוי-תאים**, לא בנייה-מחדש של המסך. */ .pick-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; align-content: start; } .pick-cell { position: relative; aspect-ratio: 1; border: 0; padding: 0; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.05); color: var(--fg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: .72rem; } .pick-cell img { width: 100%; height: 100%; object-fit: cover; } .pick-cell .ic { width: 22px; height: 22px; color: var(--fg-dim); } .pick-cell em { position: absolute; inset-inline-end: 5px; bottom: 4px; font-style: normal; font-size: .68rem; text-shadow: 0 1px 3px #000; } .pick-cam { border: 1px solid var(--hair); } /* אריח-הווב תופס את כל השורה — הוא לא תמונה אלא הזמנה לפתוח את הבורר, והוא מוסר לגמרי ברגע שיש ספק-נייטיב. */ .pick-web { grid-column: 1 / -1; aspect-ratio: auto; padding: 26px 16px; gap: 7px; border: 1px dashed var(--hair); background: rgba(255,255,255,.03); text-align: center; } .pick-web .ic { width: 38px; height: 38px; } .pick-web i { font-style: normal; color: var(--fg-dim); font-size: .84rem; } /* ── 🏷️ הצעות-@תיוג בעורך-הסטורי (v4.0). ⚠️ מעל הקנבס וצמוד לתחתית — מקלדת-הטלפון תופסת חצי מסך, ורשימה שמופיעה באמצע נחתכת מתחתיה. */ .sed-sug { position: absolute; inset-inline: 12px; bottom: 92px; z-index: 8; max-height: 34vh; overflow-y: auto; border-radius: var(--r); border: 1px solid var(--hair); background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); } /* ── 👣 עוקבים · 👁️ צפיות ברילס (v4.1) */ .reel-follow { margin-inline-start: 8px; padding: 4px 13px; font-size: .78rem; border: 1px solid var(--hair); border-radius: var(--r-pill); background: rgba(255,255,255,.1); color: var(--fg); } .reel-follow.on { background: transparent; color: var(--fg-dim); } /* ⚠️ הצפיות הן `span` ולא כפתור — הן קריאה, לא פעולה. */ .reel-views { pointer-events: none; opacity: .8; } .meta-seg { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--hair); border-radius: var(--r-pill); } .meta-seg button { flex: 1; border: 0; border-radius: var(--r-pill); padding: 9px; background: none; color: var(--fg-dim); font-size: .86rem; } .meta-seg button.on { background: rgba(255,255,255,.1); color: var(--fg); font-weight: 600; } /* ── 🎵 פסקול ברילס (v4.2) */ .reel-sound { position: absolute; inset-inline-start: 12px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; max-width: 62%; padding: 6px 12px; border: 1px solid var(--hair); border-radius: var(--r-pill); background: var(--glass-strong); color: var(--fg); font-size: .78rem; } .reel-sound .ic { width: 14px; height: 14px; flex: none; } .reel-sound span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* הסאונד המתנגן בבורר — סימון ברור שזו השמעה ולא בחירה */ .snd-it.playing { background: rgba(255,255,255,.09); } .snd-it.playing b::after { content: ''; display: inline-block; width: .78em; height: .78em; margin-inline-start: .34em; vertical-align: -.04em; opacity: .7; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M8%205.5v13l11-6.5z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M8%205.5v13l11-6.5z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; } /* ═══════════════ 🎬 רילס במסך-מלא אמיתי (v4.4) בקשת-חיים: «הרילסים יהיו מסך שלם ואחד אחרי השני» + «מצד לצד». ⚠️ הכותרת ושורת-הסטוריז **מרחפות מעל** הרילס במקום לדחוף אותו למטה — אחרת הן גוזלות 153px והרילס מקבל 70% מהמסך. כך זה בכל האפליקציות שחיים השווה אליהן. */ body.reels-full { overflow: hidden; } body.reels-full .page { padding: 0 !important; max-width: none; } body.reels-full .topbar, body.reels-full header.app-head, body.reels-full .st-strip { position: fixed; inset-inline: 0; z-index: 20; background: linear-gradient(to bottom, rgba(5,5,6,.72), rgba(5,5,6,0)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 0; } body.reels-full .topbar, body.reels-full header.app-head { top: 0; } /* שורת-הסטוריז יושבת **מתחת** לכותרת, ושתיהן מרחפות */ body.reels-full .st-strip { top: calc(56px + env(safe-area-inset-top,0px)); } /* ⚠️ הכרטיס עצמו: גובה מלא ומקצה-לקצה. `object-fit: cover` כדי שווידאו אנכי ימלא בלי פסים שחורים. */ body.reels-full .reel-page { height: 100%; width: 100%; border-radius: 0; margin: 0; } body.reels-full .reel-vid, body.reels-full .reel-page video { width: 100%; height: 100%; object-fit: cover; } /* 📐📐 **מסך רחב = עמודה אנכית ממורכזת, לא מתיחה.** ⚠️ `object-fit: cover` נכון לטלפון: וידאו אנכי ממלא את המסך בלי פסים שחורים, וזו ההתנהגות המקובלת ברילס. אבל הוא מניח שהמסך עצמו אנכי. נמדד בטאבלט **לרוחב** (1280×800): מקור 9:16 בתוך תיבה של 1.60 ⇒ `cover` חותך כ-**65% מגובה הסרטון** ומשאיר פס אופקי צר. זה לא «חיתוך קל» — זה סרטון אחר. ⚠️ הפתרון הוא `aspect-ratio` ולא `@media`: הגובה נשאר 100%, הרוחב **נגזר** מיחס 9:16, ו-`max-width:100%` מחזיר מסך-מלא בדיוק במכשירים שצרים מ-9:16 (טלפון 412×915 = 0.45 ⇒ הרוחב הנגזר 515 נחסם ל-412 ⇒ **אין שינוי בטלפון**). מדיה-קווירי היה מחייב סף שרירותי ושובר בסיבוב-מסך. ⚠️ בונוס שנמדד: `.reel-side`/`.reel-meta` ממוקמים **יחסית ל-`.reel-page`**, ולכן הפקדים שהיו נדבקים לקצה השמאלי של מסך 1280px חוזרים לצמוד לסרטון עצמו. */ body.reels-full .reel-page { height: 100%; aspect-ratio: 9 / 16; width: auto; max-width: 100%; margin-inline: auto; background: #000; } /* הרקע מאחורי העמודה — כדי שהפסים לא ייראו כמו «דף שנגמר» */ body.reels-full .reel-feed, body.reels-full #reelFeed { background: #05060a; } /* הפקדים מתרחקים מהקצוות כדי לא להיבלע בסרגל הצף ובשורה העליונה */ /* ⚠️⚠️ המספרים כאן **נמדדו על המסך**, לא נוחשו: כותרת 56 + שורת-סטוריז 94 = **150** ⇒ כל מה שעליון חייב להתחיל מתחת ל-158. הפעם הקודמת שקבעתי 112 החזירה בדיוק את הבאג שחיים דיווח עליו — «ברילסים השם מוסתר». */ body.reels-full .reel-side { bottom: calc(96px + env(safe-area-inset-bottom,0px)); } body.reels-full .reel-meta { bottom: calc(92px + env(safe-area-inset-bottom,0px)); } body.reels-full .reel-top { top: calc(158px + env(safe-area-inset-top,0px)); } body.reels-full .reel-sound { bottom: calc(62px + env(safe-area-inset-bottom,0px)); } /* אפס שוליים סביב הכרטיס — «מצד לצד של המסך» (בקשת-חיים). */ body.reels-full .page, body.reels-full .reel-feed, body.reels-full #reelFeed { margin: 0 !important; padding: 0 !important; } /* ⚠️⚠️ **שוליים אופקיים אוטומטיים, לא אפס.** הכלל הזה נכתב כדי להצמיד את הכרטיס «מצד לצד של המסך» (בקשת-חיים), וזה נכון בטלפון — שם `max-width:100%` ממילא מותח אותו לכל הרוחב. אבל `margin: 0` דרס גם את `margin-inline: auto` של עמודת-9:16, והעמודה נצמדה **לקצה** במקום להתמרכז: בטאבלט לרוחב היא ישבה בימין הקיצוני עם 830px שחורים משמאל. נמדד בצילום. אפס אנכי נשמר; אופקי = auto. */ body.reels-full .reel-page { margin-block: 0 !important; margin-inline: auto !important; } /* ⚠️ 12px שנשארו למעלה: `.page` יורש ריפוד מהפריסה הכללית, וה-`!important` שלמעלה חל על margin/padding אבל לא על ההיסט של האב. אפס מוחלט. */ body.reels-full .reel-feed, body.reels-full #reelFeed, body.reels-full .reel-page { top: 0 !important; margin-top: 0 !important; } body.reels-full main, body.reels-full .wrap, body.reels-full .container { padding: 0 !important; margin: 0 !important; } /* ⚠️ ה-12px הגיעו מ-flow של `.page` (רווח/אח קודם), ולרדוף אחרי המקור זה שביר — מחר יתווסף אלמנט ונחזור לכאן. במקום: **מוציאים את הבמה מה-flow לגמרי**. `inset:0` על מיכל fixed הוא בהגדרה מסך-מלא, ואינו תלוי בשום דבר מעליו. */ body.reels-full .reel-stage { position: fixed !important; inset: 0 !important; height: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; z-index: 1; overflow-y: auto; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; } body.reels-full .reel-page { scroll-snap-align: start; } /* ── 👁️ «מי צפה» בכותרת-הסטורי (v4.5) */ .st-eye { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: auto; padding: 5px 11px; border: 1px solid var(--hair); border-radius: var(--r-pill); background: rgba(255,255,255,.1); color: var(--fg); font-size: .78rem; } .st-eye .ic { width: 15px; height: 15px; } .st-eye b { font-weight: 600; } /* ═══════════════ 🎼 ספריית-התווים המקצועית (v5.0) ⚠️ אפס פאנלים צבעוניים — הכל זכוכית ומסגרות-קו, לפי הכלל הקבוע. האייקונים יורשים `currentColor` ולכן אין בהם צבע משלהם. */ .sc-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; } .sc-filt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--hair); border-radius: var(--r-pill); background: rgba(255,255,255,.04); color: var(--fg-dim); font-size: .82rem; } .sc-filt.on { background: rgba(255,255,255,.11); color: var(--fg); font-weight: 600; } .sc-filt .ic { width: 14px; height: 14px; flex: none; } .sc-active { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .sc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 6px 5px 11px; border: 1px solid var(--hair); border-radius: var(--r-pill); font-size: .8rem; color: var(--fg); } .sc-chip button { border: 0; background: none; color: var(--fg-dim); display: grid; place-items: center; padding: 0; } .sc-chip .ic { width: 13px; height: 13px; } .sc-clear { color: var(--fg-dim); padding: 5px 12px; } .sc-list { display: flex; flex-direction: column; gap: 8px; } .sc-count { color: var(--fg-dim); font-size: .8rem; padding: 2px 2px 4px; } .sc-card { display: flex; flex-direction: column; gap: 8px; padding: 13px 14px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); text-align: start; width: 100%; } .sc-card-main { display: flex; align-items: flex-start; gap: 11px; color: var(--fg); text-decoration: none; } .sc-ic { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border: 1px solid var(--hair); border-radius: 11px; overflow: hidden; color: var(--fg-dim); } .sc-ic .ic { width: 20px; height: 20px; } .sc-ic img { width: 100%; height: 100%; object-fit: cover; } .sc-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .sc-txt b { display: flex; align-items: center; gap: 6px; font-size: .97rem; } .sc-txt small { color: var(--fg-dim); font-size: .8rem; } .sc-sub { font-style: normal; color: var(--fg-dim); font-size: .85rem; } /* תג «רשמי» — מסגרת-קו, לא כתם-צבע */ .sc-official { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border: 1px solid var(--hair); border-radius: 50%; background: rgba(255,255,255,.08); } .sc-official .ic { width: 11px; height: 11px; } .sc-facts, .sc-tags { display: flex; flex-wrap: wrap; gap: 5px; } .sc-facts span { padding: 3px 9px; border: 1px solid var(--hair); border-radius: var(--r-pill); font-size: .74rem; color: var(--fg-dim); } .sc-tags span { padding: 3px 9px; border-radius: var(--r-pill); background: rgba(255,255,255,.06); font-size: .74rem; color: var(--fg-dim); } .sc-artist-head { display: flex; align-items: center; gap: 9px; padding: 10px 2px; } .sc-artist-head .ic { width: 19px; height: 19px; color: var(--fg-dim); } .sc-artist-head b { flex: 1; font-size: 1.02rem; } .sc-artist { cursor: pointer; } .sc-newart { width: 100%; margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; } .sc-newart .ic { width: 16px; height: 16px; } /* טופס-ההעלאה */ .sc-upvocab { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .sc-uprow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .sc-uprow .fld { margin: 0; } #scFileBtn { display: inline-flex; align-items: center; gap: 7px; } #scFileBtn .ic { width: 15px; height: 15px; } @media (max-width: 560px) { .sc-uprow { grid-template-columns: 1fr 1fr; } .sc-filt { padding: 6px 11px; font-size: .78rem; } } /* ═══════════════════════════════════════════════════════════════════════ 🎨 שפת-עיצוב אחידה (v5.1) — בקשת-חיים «פונט רגיל ולא העגול · כפתורים עדינים כמו בתפריט · לא צבעוני מדי, גישה של צבע אחד». הכל נמדד לפני השינוי: הפונט היה Rubik (המעוגל), כפתור-התפריט היה משקל 400 / רדיוס 9 / זכוכית-עדינה, בעוד `cat-chip` היה **רקע לבן כמעט-מלא** במשקל 700, ועל המסך היו ארבעה צבעים רוויים שונים. ═══════════════════════════════════════════════════════════════════════ */ :root { /* ═══ צבע-הדגש של «נגן»: ציאן על פחם (נבחר 2026-08-25) ═══ הבסיס נשאר פחם-כמעט-שחור; הציאן הוא **הדגש היחיד**. ⚠️ למה דווקא ציאן ולא ליים/כתום/ירוק: אדום=שגיאה · צהוב=אזהרה · ירוק=הצלחה כבר תפוסים למטה כמשמעות. דגש שנופל על אחד מהם הופך כפתור-רגיל לבלתי-מובחן ממצב-מערכת, והמשתמש לא יודע אם «ירוק» אומר «לחץ» או «הצליח». ציאן פנוי — ולכן הוא קריא. ⚠️ ניגוד: #22d3ee על #22262f = 8.4:1 (AAA לטקסט-גדול, AA לרגיל). טקסט **על** הציאן חייב להיות כהה (#0b0d14), לא לבן — לבן על ציאן הוא 1.9:1 ובלתי-קריא. ראה `--on-accent`. */ --accent: #22d3ee; --accent-2: #67e8f9; --accent-soft: rgba(34, 211, 238, .18); --on-accent: #0b0d14; /* ⚠️ אלה נשארים **נבדלים** בכוונה: אדום-שגיאה וירוק-הצלחה נושאים משמעות, ומחיקתם הופכת הודעת-כשל להודעה רגילה. רק הרוויה יורדת. */ --danger: #d47e77; --ok: #7fae8d; } /* ── כפתורים: כולם בשפה של כפתור-התפריט (משקל 400-500, זכוכית עדינה, מסגרת-שיער). ⚠️ `!important` נדרש כי הבלוק הקודם בקובץ משתמש בו. */ .btn-primary, .mini-join, .sed-post, .sed-big, .cam-shoot, .mini-btn { font-weight: 500 !important; letter-spacing: -.006em; background: rgba(255, 255, 255, .055) !important; border: 1px solid var(--hair) !important; color: var(--fg) !important; box-shadow: none !important; } .btn-primary { border-radius: 12px !important; font-size: 15px !important; } .mini-btn, .mini-join { border-radius: 10px !important; } .btn-primary:active, .mini-btn:active, .mini-join:active { background: rgba(255, 255, 255, .1) !important; } /* ה-➕ נשאר עגול — הוא צורה, לא כפתור-טקסט */ .fab { background: var(--glass-strong) !important; border: 1px solid var(--hair) !important; box-shadow: var(--shadow-1) !important; } /* ── גלולות-טאב: הנבחרת הייתה לבנה-כמעט-מלאה ובלטה מכל השאר */ .cat-chip { font-weight: 400 !important; background: rgba(255, 255, 255, .04) !important; border: 1px solid var(--hair) !important; color: var(--fg-dim) !important; } .cat-chip.sel, .cat-chip.on { background: rgba(255, 255, 255, .11) !important; color: var(--fg) !important; font-weight: 600 !important; } /* ── כותרות: 700 היה כבד מדי לפונט ניטרלי */ h1, h2, h3, .page-title, .screen-title { font-weight: 600; letter-spacing: -.015em; } b, strong { font-weight: 600; } /* ── כוכבי-דירוג: ההבחנה היא **מילוי**, לא צבע. הזהב היה 24 מופעים על המסך והוא הצבע הרווי הבולט ביותר. */ .sc-st { color: var(--fg-faint) !important; } .sc-st.on { color: var(--fg) !important; } .sc-st.on.mine svg { fill: currentColor; } /* ── שלושת הצבעים הרוויים שנשארו, אחרי מדידה על המסך: תג-ההתראות (ורוד) · «סימון הכל כנקרא» (תכלת) · «יציאה» (אדום). ⚠️ התכלת לא סימנה שום דבר — היא הייתה קישוט. התג והיציאה כן נושאים משמעות, ולכן הם עוברים לאקצנט ולאדום-המעומעם ולא נמחקים. */ .bell-badge { background: var(--accent) !important; color: var(--bg-base) !important; font-weight: 600; } .bell-clear { color: var(--fg-dim) !important; border-color: var(--hair) !important; } .sh-it.out, .sh-it.out .ic, .sh-it.out span { color: var(--danger) !important; } .sh-it.adm { color: var(--fg-dim) !important; } /* ── 🎼 זהות חזותית ב-SVG (PLAT 5.5) בורר-האווטאר היה `