/* * رادیو روستا — استایل اصلی (نسخه ۱.۱.۱) * طراحی: محمد - آذین صنعت رایانه * رنگ‌ها از «تنظیمات قالب ← رنگ‌بندی» به صورت متغیر CSS تزریق می‌شوند. */ /* ============ ۱. پایه ============ */ :root { --rr-primary: #1D6B3A; --rr-primary2: #2F8F4E; --rr-accent: #F2BE22; --rr-bg: #F4F7EF; --rr-surface: #FFFFFF; --rr-text: #16261B; --rr-muted: #66776B; --rr-player: #0F3A22; --rr-line: color-mix(in srgb, var(--rr-text) 10%, transparent); --rr-soft: color-mix(in srgb, var(--rr-primary) 8%, var(--rr-surface)); --rr-accent-soft: color-mix(in srgb, var(--rr-accent) 22%, var(--rr-surface)); --rr-radius: 16px; --rr-radius-sm: 10px; --rr-shadow: 0 1px 2px rgba(16, 38, 27, .06), 0 8px 24px -12px rgba(16, 38, 27, .18); --rr-shadow-lg: 0 24px 60px -20px rgba(10, 40, 22, .35); --rr-wrap: 1240px; --rr-bar-h: 76px; --rr-logo-h: 44px; --rr-ease: cubic-bezier(.2, .8, .2, 1); --rr-font: 'YekanBakh', Tahoma, 'Segoe UI', sans-serif; } @supports not (color: color-mix(in srgb, red, blue)) { :root { --rr-line: rgba(22, 38, 27, .1); --rr-soft: #EEF4EA; --rr-accent-soft: #FCF1CC; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--rr-font); font-size: 15px; line-height: 1.85; color: var(--rr-text); background: var(--rr-bg); direction: rtl; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } html, body { overflow-x: clip; max-width: 100%; } @supports not (overflow: clip) { html, body { overflow-x: hidden; } } body.rr-has-queue { padding-bottom: var(--rr-bar-h); } body.rr-modal-open { overflow: hidden; } img, svg, video, canvas { max-width: 100%; } img { height: auto; } a { color: var(--rr-primary); text-decoration: none; transition: color .2s; } a:hover { color: var(--rr-primary2); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } h1, h2, h3, h4 { line-height: 1.45; margin: 0 0 .6em; font-weight: 900; } p { margin: 0 0 1em; } .ltr { direction: ltr; text-align: left; } .rr-muted { color: var(--rr-muted); } .rr-center { text-align: center; } .rr-danger { color: #C0392B !important; } .rr-err-text { color: #C0392B; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .rr-wrap { width: min(100% - 32px, var(--rr-wrap)); margin-inline: auto; } .rr-main { min-height: 60vh; } .rr-page { padding-block: 32px 48px; } .rr-narrow { max-width: 820px; } .rr-skip { position: absolute; top: -60px; right: 12px; z-index: 999; background: var(--rr-accent); color: var(--rr-text); padding: 8px 16px; border-radius: 8px; font-weight: 700; } .rr-skip:focus { top: 12px; } :focus-visible { outline: 3px solid var(--rr-accent); outline-offset: 2px; border-radius: 6px; } ::selection { background: var(--rr-accent); color: var(--rr-text); } [hidden] { display: none !important; } .rr-i { display: inline-block; vertical-align: middle; flex: none; } /* ============ ۲. دکمه‌ها و فرم‌ها ============ */ .rr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid transparent; font-weight: 700; font-size: 14px; line-height: 1.4; white-space: nowrap; background: var(--rr-soft); color: var(--rr-primary); transition: transform .15s var(--rr-ease), background .2s, box-shadow .2s, color .2s; } .rr-btn:hover { transform: translateY(-1px); } .rr-btn:active { transform: translateY(0) scale(.98); } .rr-btn:disabled, .rr-btn.is-busy { opacity: .6; pointer-events: none; } .rr-btn.is-busy::after { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: rr-spin .7s linear infinite; } .rr-btn-primary { background: var(--rr-primary); color: #fff; box-shadow: 0 6px 16px -8px var(--rr-primary); } .rr-btn-primary:hover { background: var(--rr-primary2); color: #fff; } .rr-btn-accent { background: var(--rr-accent); color: #1f2a12; box-shadow: 0 6px 16px -8px var(--rr-accent); } .rr-btn-accent:hover { color: #1f2a12; filter: brightness(1.05); } .rr-btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .35); } .rr-btn-ghost:hover { background: rgba(255, 255, 255, .22); color: #fff; } .rr-btn-soft { background: var(--rr-soft); color: var(--rr-primary); border-color: var(--rr-line); } .rr-btn-soft:hover { background: var(--rr-surface); color: var(--rr-primary); border-color: var(--rr-primary2); } .rr-btn-soft.is-on { background: var(--rr-primary); color: #fff; } .rr-btn-lg { padding: 13px 24px; font-size: 15px; } .rr-btn-block { width: 100%; } .rr-link { background: none; border: 0; padding: 0; color: var(--rr-primary); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; } .rr-link:hover { color: var(--rr-primary2); text-decoration: underline; text-underline-offset: 4px; } .rr-icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; position: relative; border: 0; border-radius: 50%; background: transparent; color: inherit; transition: background .2s, color .2s, transform .15s; } .rr-icon-btn:hover { background: var(--rr-soft); color: var(--rr-primary); } .rr-icon-btn.is-on { color: var(--rr-accent); } .rr-fl { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; font-size: 13px; font-weight: 700; color: var(--rr-text); } .rr-fl > span small { font-weight: 400; color: var(--rr-muted); } .rr-fl input, .rr-fl select, .rr-fl textarea, .rr-inline-form input[type=text], .rr-pl-new input[type=text] { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--rr-line); background: var(--rr-surface); font-size: 15px; font-weight: 400; transition: border-color .2s, box-shadow .2s; } .rr-fl textarea { resize: vertical; min-height: 110px; line-height: 1.9; } .rr-fl input:focus, .rr-fl select:focus, .rr-fl textarea:focus, .rr-inline-form input:focus, .rr-pl-new input:focus { outline: 0; border-color: var(--rr-primary2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rr-primary2) 18%, transparent); } .rr-fl input:disabled { background: var(--rr-soft); color: var(--rr-muted); } .rr-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; } .rr-check input { width: 18px; height: 18px; accent-color: var(--rr-primary); } .rr-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } .rr-form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rr-form-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .rr-form-msg, .rr-auth-msg { margin-top: 12px; font-size: 14px; font-weight: 700; min-height: 1px; } .rr-form-msg.is-ok, .rr-auth-msg.is-ok { color: var(--rr-primary2); } .rr-form-msg.is-err, .rr-auth-msg.is-err { color: #C0392B; } .rr-fieldset { border: 1.5px dashed var(--rr-line); border-radius: var(--rr-radius); padding: 14px 16px 0; margin: 4px 0 18px; } .rr-fieldset legend { padding: 0 8px; font-weight: 900; font-size: 14px; } .rr-fieldset legend small { font-weight: 400; color: var(--rr-muted); } .rr-pass-wrap { position: relative; } .rr-pass-eye { position: absolute; left: 8px; bottom: 7px; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--rr-muted); display: grid; place-items: center; } .rr-pass-eye.is-on { color: var(--rr-primary); background: var(--rr-soft); } .rr-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--rr-soft); color: var(--rr-muted); } .rr-badge.ok, .rr-badge.st-answered { background: #E3F4E8; color: #1D6B3A; } .rr-badge.warn, .rr-badge.st-open, .rr-badge.st-customer { background: #FCF1CC; color: #8A6300; } .rr-badge.err { background: #FBE3E0; color: #A93226; } .rr-badge.st-closed { background: #ECEFEC; color: #6C7A70; } .rr-pill { font-style: normal; margin-inline-start: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--rr-accent); color: #1f2a12; font-size: 12px; font-weight: 900; display: inline-grid; place-items: center; } .rr-chips { display: flex; flex-wrap: wrap; gap: 8px; } .rr-chip { display: inline-block; padding: 4px 14px; border-radius: 999px; background: var(--rr-accent-soft); color: var(--rr-text); font-size: 13px; font-weight: 700; } .rr-chip:hover { background: var(--rr-accent); color: var(--rr-text); } .rr-box { background: var(--rr-surface); border-radius: var(--rr-radius); box-shadow: var(--rr-shadow); padding: 22px; margin-bottom: 20px; } .rr-box > h2 { font-size: 17px; display: flex; align-items: center; gap: 8px; } .rr-box > h2::before { content: ''; width: 6px; height: 18px; border-radius: 3px; background: var(--rr-accent); } .rr-empty-box { text-align: center; padding: 48px 20px; background: var(--rr-surface); border-radius: var(--rr-radius); box-shadow: var(--rr-shadow); color: var(--rr-muted); } .rr-empty-box .rr-i { color: var(--rr-primary2); opacity: .7; margin-bottom: 8px; } .rr-note { padding: 12px 16px; border-radius: 12px; background: var(--rr-soft); font-size: 14px; margin-bottom: 16px; } .rr-note-err { background: #FBE3E0; color: #7B241C; } .rr-callout { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--rr-radius); background: linear-gradient(120deg, var(--rr-accent-soft), var(--rr-surface)); border: 1.5px solid color-mix(in srgb, var(--rr-accent) 50%, transparent); margin-bottom: 20px; } .rr-callout > .rr-i { color: var(--rr-primary); } .rr-callout div { flex: 1; } .rr-callout p { margin: 0; color: var(--rr-muted); font-size: 14px; } @keyframes rr-spin { to { transform: rotate(360deg); } } @keyframes rr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes rr-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } } /* ============ ۳. نوار بالا و هدر ============ */ .rr-topbar { background: var(--rr-player); color: rgba(255, 255, 255, .85); font-size: 13px; } .rr-topbar .rr-wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 36px; } .rr-topbar-links { display: flex; gap: 18px; } .rr-topbar a { color: rgba(255, 255, 255, .85); } .rr-topbar a:hover { color: var(--rr-accent); } .rr-header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--rr-surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--rr-line); } .admin-bar .rr-header { top: 32px; } .rr-header-in { display: flex; align-items: center; gap: 14px; min-height: 72px; } .rr-burger { display: none; } .rr-brand { display: flex; align-items: center; gap: 10px; color: var(--rr-text); flex: none; } .rr-brand:hover { color: var(--rr-text); } .rr-logo { height: var(--rr-logo-h); width: auto; } .rr-brand-text { display: flex; flex-direction: column; line-height: 1.25; } .rr-brand-text strong { font-size: 19px; font-weight: 900; color: var(--rr-primary); } .rr-brand-text small { font-size: 11px; color: var(--rr-muted); } .rr-brand-light .rr-brand-text strong { color: #fff; } .rr-nav { flex: 1; min-width: 0; } .rr-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; flex-wrap: wrap; } .rr-menu > li { position: relative; } .rr-menu a { display: block; padding: 8px 14px; border-radius: 999px; color: var(--rr-text); font-weight: 700; font-size: 14px; } .rr-menu a:hover, .rr-menu .current-menu-item > a, .rr-menu .current_page_item > a { background: var(--rr-soft); color: var(--rr-primary); } .rr-menu .sub-menu { list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; right: 0; min-width: 200px; background: var(--rr-surface); border-radius: 14px; box-shadow: var(--rr-shadow-lg); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .2s var(--rr-ease); z-index: 5; } .rr-menu li:hover > .sub-menu, .rr-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .rr-menu .sub-menu a { border-radius: 10px; } .rr-search { position: relative; display: flex; align-items: center; width: min(360px, 32vw); background: var(--rr-soft); border: 1.5px solid transparent; border-radius: 999px; transition: border-color .2s, background .2s, box-shadow .2s; } .rr-search:focus-within { background: var(--rr-surface); border-color: var(--rr-primary2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rr-primary2) 15%, transparent); } .rr-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 16px; font-size: 14px; outline: 0; } .rr-search input::-webkit-search-cancel-button { display: none; } .rr-search-btn { flex: none; margin: 4px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--rr-primary); color: #fff; display: grid; place-items: center; transition: background .2s, transform .15s; } .rr-search-btn:hover { background: var(--rr-primary2); transform: scale(1.05); } .rr-search-toggle { display: none; } .rr-search-page { width: 100%; max-width: 560px; margin-top: 12px; background: var(--rr-surface); box-shadow: var(--rr-shadow); } .rr-suggest { position: absolute; top: calc(100% + 8px); right: 0; left: 0; z-index: 70; background: var(--rr-surface); border-radius: 16px; box-shadow: var(--rr-shadow-lg); padding: 6px; max-height: 420px; overflow: auto; } .rr-sg-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 12px; color: var(--rr-text); } .rr-sg-item:hover, .rr-sg-item.is-sel { background: var(--rr-soft); color: var(--rr-text); } .rr-sg-item img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; } .rr-sg-item span { display: flex; flex-direction: column; min-width: 0; line-height: 1.5; flex: 1; } .rr-sg-item strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rr-sg-item small { font-size: 12px; color: var(--rr-muted); } .rr-sg-item em { font-style: normal; font-weight: 900; font-size: 20px; color: var(--rr-primary); width: 32px; text-align: center; } .rr-sg-all { display: block; text-align: center; padding: 8px; font-weight: 700; font-size: 13px; border-top: 1px solid var(--rr-line); margin-top: 4px; } .rr-sg-load, .rr-sg-none { padding: 14px; text-align: center; color: var(--rr-muted); font-size: 13px; } .rr-actions { display: flex; align-items: center; gap: 6px; flex: none; } .rr-bell, .rr-user { position: relative; } .rr-bell-count { position: absolute; top: 3px; left: 3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #E74C3C; color: #fff; font-size: 11px; font-weight: 900; display: grid; place-items: center; line-height: 1; box-shadow: 0 0 0 2px var(--rr-surface); } #rr-bell-btn.has-new .rr-i { animation: rr-ring 2.4s ease-in-out infinite; transform-origin: 50% 10%; } @keyframes rr-ring { 0%, 86%, 100% { transform: rotate(0); } 88% { transform: rotate(14deg); } 92% { transform: rotate(-12deg); } 96% { transform: rotate(6deg); } } .rr-user-btn { border: 2px solid transparent; background: none; padding: 0; border-radius: 50%; display: block; transition: border-color .2s; } .rr-user-btn:hover, .rr-user-btn[aria-expanded=true] { border-color: var(--rr-accent); } .rr-avatar { border-radius: 50%; object-fit: cover; display: block; } .rr-avatar.is-letter { display: grid; place-items: center; color: #fff; font-weight: 900; line-height: 1; } .rr-drop { position: absolute; top: calc(100% + 10px); left: 0; z-index: 80; width: 300px; background: var(--rr-surface); border-radius: 18px; box-shadow: var(--rr-shadow-lg); padding: 8px; animation: rr-drop .18s var(--rr-ease); } @keyframes rr-drop { from { opacity: 0; transform: translateY(-6px); } } .rr-bell-drop { width: 360px; } .rr-drop-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px 10px; border-bottom: 1px solid var(--rr-line); margin-bottom: 4px; } .rr-bell-list { max-height: 380px; overflow: auto; } .rr-drop-empty { padding: 24px 12px; text-align: center; color: var(--rr-muted); font-size: 13px; } .rr-drop-foot { display: block; text-align: center; padding: 10px; font-weight: 700; font-size: 13px; border-top: 1px solid var(--rr-line); margin-top: 4px; } .rr-notif { display: flex; gap: 10px; padding: 10px; border-radius: 12px; color: var(--rr-text); font-size: 13px; line-height: 1.7; position: relative; } .rr-notif:hover { background: var(--rr-soft); color: var(--rr-text); } .rr-notif.is-unread { background: color-mix(in srgb, var(--rr-accent) 12%, transparent); } .rr-notif.is-unread::after { content: ''; position: absolute; left: 10px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--rr-accent); } .rr-notif-ic { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--rr-soft); color: var(--rr-primary); display: grid; place-items: center; } .rr-notif-txt { flex: 1; display: flex; flex-direction: column; padding-left: 12px; } .rr-notif-txt small { color: var(--rr-muted); font-size: 11px; } .rr-user-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; border-bottom: 1px solid var(--rr-line); margin-bottom: 4px; } .rr-user-card div { display: flex; flex-direction: column; line-height: 1.5; min-width: 0; } .rr-user-card small { color: var(--rr-muted); font-size: 12px; } .rr-user-drop > a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--rr-text); font-size: 14px; font-weight: 700; } .rr-user-drop > a:hover { background: var(--rr-soft); color: var(--rr-primary); } .rr-user-drop > a .rr-i { color: var(--rr-primary2); } .rr-drop-danger, .rr-drop-danger .rr-i { color: #C0392B !important; } .rr-nav-overlay { position: fixed; inset: 0; background: rgba(8, 24, 14, .45); z-index: 58; } /* نوار باریک بارگذاری صفحه در حالت پخش پیوسته */ body.rr-pjax-loading::before { content: ''; position: fixed; top: 0; right: 0; height: 3px; z-index: 999; background: var(--rr-accent); animation: rr-load 1s ease-out forwards; } @keyframes rr-load { from { width: 0; } to { width: 85%; } } /* ============ ۴. صفحه اول: هیرو و رادیوی موج‌یاب ============ */ .rr-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(800px 380px at 12% 110%, color-mix(in srgb, var(--rr-accent) 38%, transparent), transparent 70%), radial-gradient(600px 300px at 95% -20%, color-mix(in srgb, var(--rr-primary2) 80%, transparent), transparent 70%), linear-gradient(135deg, var(--rr-player), var(--rr-primary)); } .rr-hero::before { /* بافت خطوط موج */ content: ''; position: absolute; inset: 0; opacity: .09; pointer-events: none; background-image: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 7px); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); } .rr-hero-in { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 40px; padding-block: 56px 64px; } .rr-hero-text h1 { font-size: clamp(28px, 4.2vw, 46px); line-height: 1.35; margin-bottom: 14px; text-wrap: balance; } .rr-hero-text p { font-size: 17px; opacity: .88; max-width: 52ch; } .rr-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; } .rr-dial { justify-self: center; width: min(420px, 100%); background: linear-gradient(160deg, #2a2418, #151208); border-radius: 26px; padding: 20px 20px 16px; box-shadow: var(--rr-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .08); transform: rotate(-2deg); } .rr-dial-face { position: relative; height: 120px; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #FFF6D6, #F3DE95); box-shadow: inset 0 2px 10px rgba(0, 0, 0, .35); } .rr-dial-scale { position: absolute; inset: 14px 18px auto; display: flex; justify-content: space-between; align-items: flex-start; height: 34px; direction: ltr; } .rr-dial-scale i { width: 1.5px; height: 12px; background: #3a2e12; opacity: .6; } .rr-dial-scale i.is-mid { height: 18px; } .rr-dial-scale i.is-major { height: 28px; opacity: 1; width: 2px; } .rr-dial-nums { position: absolute; inset: 52px 10px auto; display: flex; justify-content: space-between; direction: ltr; font-weight: 900; font-size: 15px; color: #3a2e12; } .rr-dial-needle { position: absolute; top: 6px; bottom: 6px; left: 30%; width: 3px; border-radius: 2px; background: #D62C1A; box-shadow: 0 0 10px rgba(214, 44, 26, .7); transition: left 1.2s var(--rr-ease); } body.rr-playing .rr-dial-needle { animation: rr-tune 9s ease-in-out infinite alternate; } @keyframes rr-tune { 0% { left: 18%; } 30% { left: 46%; } 55% { left: 41%; } 80% { left: 72%; } 100% { left: 64%; } } .rr-dial-label { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: #F3DE95; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; } .rr-dial-label #rr-dial-now { overflow: hidden; text-overflow: ellipsis; } .rr-onair { width: 12px; height: 12px; border-radius: 50%; background: #5a4a24; flex: none; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); } body.rr-playing .rr-onair { background: #FF4A36; box-shadow: 0 0 12px #FF4A36; animation: rr-pulse 1.4s infinite; } .rr-home { padding-block: 36px 48px; } .rr-row { margin-bottom: 40px; } .rr-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .rr-row-head h2 { font-size: 22px; margin: 0; display: flex; align-items: center; gap: 10px; } .rr-row-head h2::before { content: ''; width: 10px; height: 26px; border-radius: 4px; background: linear-gradient(var(--rr-accent) 0 50%, var(--rr-primary2) 50%); } .rr-row-tools { display: flex; align-items: center; gap: 16px; } /* ============ ۵. کارت فایل صوتی و پلیر کوچک ============ */ .rr-grid-cards { --cols: 4; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 20px; } .rr-card { background: var(--rr-surface); border-radius: var(--rr-radius); box-shadow: var(--rr-shadow); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s var(--rr-ease), box-shadow .25s; } .rr-card:hover { transform: translateY(-4px); box-shadow: var(--rr-shadow-lg); } .rr-card.is-current { box-shadow: 0 0 0 2.5px var(--rr-accent), var(--rr-shadow-lg); } .rr-card-cover { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--rr-soft); } .rr-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--rr-ease); } .rr-card:hover .rr-card-cover img { transform: scale(1.05); } .rr-card-dur { position: absolute; bottom: 8px; left: 8px; background: rgba(10, 30, 18, .78); color: #fff; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; backdrop-filter: blur(4px); } .rr-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; } .rr-card-title { font-size: 15px; font-weight: 700; margin: 0 0 2px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .rr-card-title a { color: var(--rr-text); } .rr-card-title a:hover { color: var(--rr-primary); } .rr-card-sub { font-size: 12.5px; color: var(--rr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 10px; } .rr-mini { display: flex; align-items: center; gap: 8px; margin-top: auto; direction: ltr; } .rr-mini-play { width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%; background: var(--rr-primary); color: #fff; display: grid; place-items: center; transition: transform .15s, background .2s; box-shadow: 0 4px 10px -4px var(--rr-primary); } .rr-mini-play:hover { transform: scale(1.08); background: var(--rr-primary2); } .rr-mini-play .rr-i { margin-inline-start: 2px; } .rr-mini-line { flex: 1; height: 6px; border-radius: 3px; background: var(--rr-soft); position: relative; overflow: hidden; cursor: pointer; } .rr-mini-fill { position: absolute; inset-block: 0; left: 0; width: 0; background: linear-gradient(90deg, var(--rr-primary2), var(--rr-accent)); border-radius: 3px; transition: width .25s linear; } .rr-mini-add { width: 32px; height: 32px; flex: none; border: 1.5px solid var(--rr-line); border-radius: 50%; background: var(--rr-surface); color: var(--rr-primary); display: grid; place-items: center; transition: .2s; } .rr-mini-add:hover { background: var(--rr-accent); border-color: var(--rr-accent); color: #1f2a12; transform: rotate(90deg); } .rr-mini-add[data-rr-pl]:hover { transform: none; } .rr-mini-add.is-added { background: var(--rr-soft); color: var(--rr-primary2); border-color: var(--rr-primary2); } .rr-mini-add.is-busy { animation: rr-pulse .8s infinite; } .rr-mini-time { font-size: 13px; color: var(--rr-muted); white-space: nowrap; min-width: 70px; text-align: right; } .rr-mini-lg { max-width: 520px; margin-block: 14px 18px; } .rr-mini-lg .rr-mini-play { width: 52px; height: 52px; } .rr-mini-lg .rr-mini-line { height: 8px; } /* نمایش آیکون پخش/مکث */ .rr-ic-pause, .rr-ic-mute { display: none; } .is-playing > .rr-ic-play, .is-playing .rr-ic-play { display: none; } .is-playing > .rr-ic-pause, .is-playing .rr-ic-pause { display: inline-flex; } .is-muted .rr-ic-vol { display: none; } .is-muted .rr-ic-mute { display: inline-flex; } .rr-ic-play, .rr-ic-pause, .rr-ic-vol, .rr-ic-mute { display: inline-flex; } .rr-ic-pause, .rr-ic-mute { display: none; } .is-playing .rr-ic-pause, .is-muted .rr-ic-mute { display: inline-flex; } .is-playing .rr-ic-play, .is-muted .rr-ic-vol { display: none; } .is-loading.is-playing .rr-ic-pause, [data-rr-act=toggle].is-loading .rr-ic-play { animation: rr-pulse .9s infinite; } /* ============ ۶. صفحه تک فایل ============ */ .rr-single { position: relative; } .rr-single-bg { position: absolute; inset: 0 0 auto; height: 420px; background-size: cover; background-position: center; filter: blur(50px) saturate(1.3); opacity: .45; transform: scale(1.2); pointer-events: none; } .rr-single-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 30%, var(--rr-bg)); } .rr-single-top { position: relative; display: grid; grid-template-columns: 320px 1fr; gap: 36px; align-items: end; padding-block: 44px 28px; } .rr-single-cover { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--rr-shadow-lg); aspect-ratio: 1; } .rr-single-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .rr-big-play { position: absolute; bottom: 16px; left: 16px; width: 70px; height: 70px; border-radius: 50%; border: 0; background: var(--rr-accent); color: #1f2a12; display: grid; place-items: center; box-shadow: 0 10px 26px -6px rgba(0, 0, 0, .45); transition: transform .2s var(--rr-ease); } .rr-big-play:hover { transform: scale(1.08); } .rr-single-head h1 { font-size: clamp(24px, 3.4vw, 38px); margin: 10px 0 4px; } .rr-single-artist { font-size: 17px; color: var(--rr-muted); margin: 0; } .rr-single-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .rr-votes { display: inline-flex; background: var(--rr-surface); border-radius: 999px; box-shadow: var(--rr-shadow); overflow: hidden; } .rr-vote { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 9px 16px; font-weight: 700; color: var(--rr-muted); transition: .2s; } .rr-vote + .rr-vote { border-inline-start: 1px solid var(--rr-line); } .rr-vote:hover { color: var(--rr-primary); background: var(--rr-soft); } .rr-vote.is-on { color: var(--rr-primary); } .rr-vote.is-on[data-vote="-1"] { color: #C0392B; } .rr-vote.is-on .rr-i { fill: color-mix(in srgb, currentColor 20%, transparent); } .rr-vote.is-pop .rr-i { animation: rr-pop .45s var(--rr-ease); } @keyframes rr-pop { 40% { transform: scale(1.45) rotate(-12deg); } } .rr-single-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; padding-bottom: 48px; } .rr-content { font-size: 16px; line-height: 2.05; overflow-wrap: anywhere; } .rr-content img { border-radius: 12px; } .rr-content blockquote { margin: 1em 0; padding: 10px 18px; border-inline-start: 4px solid var(--rr-accent); background: var(--rr-soft); border-radius: 8px; } .rr-info dl { margin: 0; } .rr-info dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--rr-line); font-size: 14px; } .rr-info dl > div:last-child { border-bottom: 0; } .rr-info dt { color: var(--rr-muted); } .rr-info dd { margin: 0; font-weight: 700; text-align: left; } .rr-channel-mini-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--rr-text); } .rr-channel-mini-head span { display: flex; flex-direction: column; line-height: 1.5; } .rr-channel-mini-head small { color: var(--rr-muted); } /* فهرست‌های فشرده (مشابه‌ها، اخیراً شنیده‌شده) */ .rr-list { list-style: none; margin: 0; padding: 0; } .rr-list-item { display: flex; align-items: center; gap: 10px; padding: 7px; border-radius: 12px; transition: background .2s; } .rr-list-item:hover, .rr-list-item.is-current { background: var(--rr-soft); } .rr-list-item > a { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.55; color: var(--rr-text); } .rr-list-item strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rr-list-item small { font-size: 12px; color: var(--rr-muted); } .rr-list-play { position: relative; width: 50px; height: 50px; flex: none; border: 0; padding: 0; border-radius: 10px; overflow: hidden; background: var(--rr-soft); } .rr-list-play img { width: 100%; height: 100%; object-fit: cover; display: block; } .rr-list-play > span { position: absolute; inset: 0; display: grid !important; place-items: center; background: rgba(10, 30, 18, .5); color: #fff; opacity: 0; transition: opacity .2s; } .rr-list-play:hover > span.rr-ic-play, .rr-list-play.is-current > span.rr-ic-play { opacity: 1; } .rr-list-play > .rr-ic-pause { display: none !important; } .rr-list-play.is-playing > .rr-ic-play { display: none !important; } .rr-list-play.is-playing > .rr-ic-pause { display: grid !important; opacity: 1; } /* ============ ۷. نظرات ============ */ .rr-comments h2 { font-size: 18px; } .rr-comment-list, .rr-comment-list .children { list-style: none; margin: 0; padding: 0; } .rr-comment-list .children { padding-inline-start: 28px; border-inline-start: 2px solid var(--rr-line); margin-inline-start: 18px; } .rr-comment-list .comment-body { padding: 14px 0; border-bottom: 1px solid var(--rr-line); } .rr-comment-list .comment-author { display: flex; align-items: center; gap: 10px; font-weight: 700; } .rr-comment-list .comment-author img { border-radius: 50%; } .rr-comment-list .says { display: none; } .rr-comment-list .comment-metadata { font-size: 12px; margin: 2px 50px 6px 0; } .rr-comment-list .comment-metadata a { color: var(--rr-muted); } .rr-comment-list .comment-content { padding-inline-start: 50px; } .rr-comment-list .reply { padding-inline-start: 50px; font-size: 13px; font-weight: 700; } .rr-comment-list .comment-awaiting-moderation { font-size: 12px; color: #8A6300; } .comment-respond { margin-top: 20px; } .comment-reply-title { font-size: 16px; } .comment-form textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--rr-line); background: var(--rr-surface); min-height: 110px; } .comment-form textarea:focus { outline: 0; border-color: var(--rr-primary2); } .rr-login-note { padding: 14px; border-radius: 12px; background: var(--rr-soft); } /* ============ ۸. کانال ============ */ .rr-channel-hero { position: relative; background: linear-gradient(135deg, var(--rr-player), var(--rr-primary2)) center / cover no-repeat; color: #fff; } .rr-channel-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 24, 14, .85), rgba(8, 24, 14, .25)); } .rr-channel-in { position: relative; display: flex; align-items: flex-end; gap: 22px; padding-block: 90px 28px; flex-wrap: wrap; } .rr-channel-avatar { width: 112px; height: 112px; border: 4px solid var(--rr-accent); box-shadow: var(--rr-shadow-lg); } .rr-channel-info { flex: 1; min-width: 220px; } .rr-channel-info h1 { margin: 0 0 4px; font-size: clamp(24px, 3vw, 34px); } .rr-channel-stats { display: flex; gap: 16px; opacity: .88; margin: 0 0 6px; font-size: 14px; } .rr-channel-bio { opacity: .85; font-size: 14px; max-width: 70ch; margin: 0; } .rr-channel-cta { display: flex; gap: 10px; flex-wrap: wrap; } .rr-page-head { margin-bottom: 24px; } .rr-page-head h1 { font-size: clamp(22px, 3vw, 30px); } /* صفحه‌بندی */ .rr-pagination, .navigation.pagination { margin-top: 32px; } .nav-links, .rr-pager { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; } .nav-links .page-numbers, .rr-pager a { min-width: 40px; height: 40px; padding: 0 12px; display: grid; place-items: center; border-radius: 12px; background: var(--rr-surface); box-shadow: var(--rr-shadow); color: var(--rr-text); font-weight: 700; } .nav-links .page-numbers.current, .rr-pager a.is-active { background: var(--rr-primary); color: #fff; } .rr-404 .rr-404-num { font-size: 96px; font-weight: 900; line-height: 1; color: var(--rr-primary); letter-spacing: 6px; } .rr-posts { display: grid; gap: 16px; } /* ============ ۹. فوتر ============ */ .rr-footer { position: relative; background: var(--rr-player); color: rgba(255, 255, 255, .78); margin-top: 40px; font-size: 14px; } .rr-footer-wave { position: absolute; top: -28px; right: 0; left: 0; height: 30px; background: var(--rr-player); -webkit-mask: radial-gradient(28px 30px at 50% 0, transparent 97%, #000) 0 0 / 56px 30px repeat-x; mask: radial-gradient(28px 30px at 50% 0, transparent 97%, #000) 0 0 / 56px 30px repeat-x; transform: scaleY(-1); } .rr-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-block: 48px 28px; } .rr-footer h3 { color: #fff; font-size: 15px; margin-bottom: 14px; } .rr-footer h3::after { content: ''; display: block; width: 32px; height: 3px; border-radius: 2px; background: var(--rr-accent); margin-top: 8px; } .rr-footer ul { list-style: none; margin: 0; padding: 0; } .rr-footer li { margin-bottom: 8px; } .rr-footer a { color: rgba(255, 255, 255, .78); } .rr-footer a:hover { color: var(--rr-accent); } .rr-footer-about p { margin-top: 14px; line-height: 2; } .rr-social { display: flex; flex-wrap: wrap; gap: 8px; } .rr-social a { padding: 4px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 13px; } .rr-social a:hover { background: var(--rr-accent); color: #1f2a12; } .rr-footer-menu { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; padding: 14px 0; margin: 0; border-top: 1px solid rgba(255, 255, 255, .08); } .rr-footer-bottom { background: rgba(0, 0, 0, .18); padding: 14px 0; font-size: 13px; } .rr-footer-bottom .rr-wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .rr-credit { color: var(--rr-accent); } /* ============ ۱۰. نوار پلیر پایین ============ */ .rr-bar { position: fixed; bottom: 0; right: 0; left: 0; z-index: 55; height: var(--rr-bar-h); background: var(--rr-player); color: #fff; box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .45); animation: rr-up .35s var(--rr-ease); padding-bottom: env(safe-area-inset-bottom); } @keyframes rr-up { from { transform: translateY(100%); } } .rr-bar-progress { position: absolute; top: -3px; right: 0; left: 0; height: 6px; cursor: pointer; background: rgba(255, 255, 255, .12); touch-action: none; } .rr-bar-progress:hover { height: 8px; top: -4px; } .rr-bar-buf, .rr-bar-fill { position: absolute; inset-block: 0; left: 0; width: 0; pointer-events: none; } /* پیشرفت از چپ به راست */ .rr-bar-buf { background: rgba(255, 255, 255, .18); } .rr-bar-fill { background: linear-gradient(90deg, var(--rr-primary2), var(--rr-accent)); } .rr-bar-fill::after { content: ''; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--rr-accent); opacity: 0; transition: opacity .2s; } .rr-bar-progress:hover .rr-bar-fill::after { opacity: 1; } .rr-bar-in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; height: 100%; } .rr-bar-track { display: flex; align-items: center; gap: 12px; min-width: 0; color: #fff; } .rr-bar-track:hover { color: var(--rr-accent); } .rr-bar-cover { width: 50px; height: 50px; border-radius: 10px; object-fit: cover; flex: none; } .rr-bar.is-playing .rr-bar-cover { box-shadow: 0 0 0 2px var(--rr-accent); } .rr-bar-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.5; } .rr-bar-meta strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rr-bar-meta small { font-size: 12px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rr-bar-ctrl { display: flex; align-items: center; gap: 4px; direction: ltr; } .rr-bar .rr-icon-btn { color: rgba(255, 255, 255, .85); } .rr-bar .rr-icon-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; } .rr-bar .rr-icon-btn.is-on, .rr-wmp-btn.is-on { color: var(--rr-accent); } .rr-rep-one { display: none; position: absolute; bottom: 5px; left: 7px; font-size: 10px; font-weight: 900; color: var(--rr-accent); } .is-one .rr-rep-one { display: block; } .rr-play-btn { width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--rr-accent); color: #1f2a12; display: grid; place-items: center; margin-inline: 6px; transition: transform .15s; } .rr-play-btn:hover { transform: scale(1.07); } .rr-bar-side { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .rr-bar-time { font-size: 12px; opacity: .8; white-space: nowrap; direction: ltr; } .rr-bar-viz { width: 120px; height: 32px; } .rr-vol { display: flex; align-items: center; direction: ltr; } .rr-vol input { width: 90px; accent-color: var(--rr-accent); } .rr-queue-count { position: absolute; top: 2px; left: 2px; font-size: 10px; font-weight: 900; background: var(--rr-accent); color: #1f2a12; border-radius: 8px; min-width: 16px; line-height: 16px; padding: 0 3px; } .rr-queue-count:empty { display: none; } /* صف پخش کشویی */ .rr-queue { position: fixed; left: 16px; bottom: calc(var(--rr-bar-h) + 12px); z-index: 56; width: min(400px, calc(100vw - 32px)); max-height: min(560px, 70vh); display: flex; flex-direction: column; background: var(--rr-surface); border-radius: 20px; box-shadow: var(--rr-shadow-lg); animation: rr-drop .2s var(--rr-ease); } .rr-queue-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--rr-line); } .rr-queue-head > div { display: flex; align-items: center; gap: 10px; } .rr-queue-list { list-style: none; margin: 0; padding: 6px; overflow: auto; } .rr-q-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; transition: background .15s; } .rr-q-item:hover { background: var(--rr-soft); } .rr-q-item.is-current { background: color-mix(in srgb, var(--rr-accent) 18%, transparent); } .rr-q-item.is-drag { opacity: .4; } .rr-q-item.is-over { box-shadow: inset 0 3px 0 var(--rr-primary2); } .rr-q-drag { cursor: grab; color: var(--rr-muted); font-size: 14px; letter-spacing: -3px; user-select: none; } .rr-q-num { width: 26px; text-align: center; font-size: 13px; color: var(--rr-muted); flex: none; } .rr-q-play { width: 42px; height: 42px; flex: none; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--rr-soft); } .rr-q-play img { width: 100%; height: 100%; object-fit: cover; display: block; } .rr-q-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; cursor: pointer; } .rr-q-meta strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rr-q-meta small { font-size: 12px; color: var(--rr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rr-q-item.is-current .rr-q-meta strong { color: var(--rr-primary); } .rr-q-dur { font-size: 12px; color: var(--rr-muted); } .rr-q-del { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--rr-muted); font-size: 18px; line-height: 1; opacity: .5; } .rr-q-item:hover .rr-q-del { opacity: 1; } .rr-q-del:hover { background: #FBE3E0; color: #C0392B; } .rr-q-empty { padding: 30px; text-align: center; color: var(--rr-muted); font-size: 14px; } .rr-eq-mini { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; } .rr-eq-mini i { width: 3px; height: 100%; background: var(--rr-primary2); border-radius: 1px; animation: rr-eq .8s ease-in-out infinite; transform-origin: bottom; } .rr-eq-mini i:nth-child(2) { animation-delay: -.3s; } .rr-eq-mini i:nth-child(3) { animation-delay: -.55s; } /* ============ ۱۱. پنجره پلی‌لیست و پیام‌ها ============ */ .rr-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(8, 24, 14, .55); backdrop-filter: blur(4px); animation: rr-fade .2s; } @keyframes rr-fade { from { opacity: 0; } } .rr-modal-box { width: min(440px, 100%); max-height: 86vh; display: flex; flex-direction: column; background: var(--rr-surface); border-radius: 22px; box-shadow: var(--rr-shadow-lg); animation: rr-drop .25s var(--rr-ease); overflow: hidden; } .rr-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--rr-line); } .rr-pl-pick { overflow: auto; padding: 8px; flex: 1; } .rr-pl-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; text-align: right; transition: background .15s; } .rr-pl-opt:hover { background: var(--rr-soft); } .rr-pl-opt img, .rr-pl-opt-ic { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex: none; } .rr-pl-opt-ic { display: grid; place-items: center; background: var(--rr-soft); color: var(--rr-primary); font-size: 20px; } .rr-pl-opt span { flex: 1; display: flex; flex-direction: column; line-height: 1.5; min-width: 0; } .rr-pl-opt small { color: var(--rr-muted); font-size: 12px; } .rr-pl-opt em { font-style: normal; font-weight: 900; color: var(--rr-primary); font-size: 14px; } .rr-pl-opt.is-in em { color: var(--rr-primary2); font-size: 12px; } .rr-pl-opt.is-busy { opacity: .5; } .rr-pl-new { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--rr-line); background: var(--rr-soft); } .rr-pl-new input[type=text] { flex: 1 1 100%; } .rr-pl-new .rr-btn { margin-inline-start: auto; } .rr-toasts { position: fixed; bottom: calc(var(--rr-bar-h) + 16px); right: 50%; transform: translateX(50%); z-index: 120; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); } .rr-toast { background: #16261B; color: #fff; padding: 10px 20px; border-radius: 999px; font-size: 14px; font-weight: 700; box-shadow: var(--rr-shadow-lg); opacity: 0; transform: translateY(10px); transition: .3s var(--rr-ease); text-align: center; } .rr-toast.is-in { opacity: 1; transform: none; } .rr-toast.is-ok { background: var(--rr-primary); } .rr-toast.is-err { background: #A93226; } /* ============ ۱۲. ورود و عضویت ============ */ .rr-auth { display: grid; grid-template-columns: 1fr 1fr; width: min(100% - 32px, 1040px); margin: 40px auto 56px; background: var(--rr-surface); border-radius: 28px; overflow: hidden; box-shadow: var(--rr-shadow-lg); } .rr-auth-art { position: relative; overflow: hidden; color: #fff; padding: 40px; display: flex; align-items: flex-end; background: radial-gradient(420px 300px at 20% 100%, color-mix(in srgb, var(--rr-accent) 45%, transparent), transparent 70%), linear-gradient(150deg, var(--rr-primary), var(--rr-player)); } .rr-auth-waves { position: absolute; top: 34%; right: 8%; left: 8%; height: 120px; display: flex; align-items: center; justify-content: space-between; gap: 6px; opacity: .55; } .rr-auth-waves i { flex: 1; height: 100%; border-radius: 6px; background: linear-gradient(var(--rr-accent), rgba(255, 255, 255, .3)); animation: rr-eq 1.6s ease-in-out infinite; transform-origin: center; } .rr-auth-waves i:nth-child(3n) { animation-delay: -.4s; } .rr-auth-waves i:nth-child(3n+1) { animation-delay: -.9s; } .rr-auth-waves i:nth-child(4n) { animation-duration: 1.2s; } .rr-auth-waves i:nth-child(5n) { animation-delay: -1.3s; } .rr-auth-art-text { position: relative; } .rr-auth-logo { height: 56px; width: auto; margin-bottom: 10px; } .rr-auth-art h2 { font-size: 28px; margin-bottom: 6px; } .rr-auth-art p { opacity: .85; } .rr-auth-perks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; font-weight: 700; } .rr-auth-perks li { display: flex; align-items: center; gap: 10px; } .rr-auth-perks .rr-i { color: var(--rr-accent); } .rr-auth-box { padding: 40px; } .rr-auth-title { font-size: 22px; } .rr-auth-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 22px; background: var(--rr-soft); border-radius: 14px; } .rr-auth-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px; border: 0; border-radius: 10px; background: transparent; font-weight: 700; font-size: 13.5px; color: var(--rr-muted); transition: .2s; } .rr-auth-tab.is-active { background: var(--rr-surface); color: var(--rr-primary); box-shadow: var(--rr-shadow); } .rr-auth-hint { color: var(--rr-muted); font-size: 14px; } .rr-auth-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .rr-otp-input { letter-spacing: 12px; text-align: center !important; font-size: 22px !important; font-weight: 900 !important; } .rr-resend { text-align: center; font-size: 13px; color: var(--rr-muted); margin-top: 12px; } .rr-reg-code { display: flex; align-items: flex-end; gap: 10px; } .rr-reg-code .rr-fl { flex: 1; } .rr-reg-code .rr-btn { margin-bottom: 16px; height: 50px; min-width: 96px; } .rr-auth-foot { margin: 22px 0 0; text-align: center; font-size: 12px; color: var(--rr-muted); } /* ============ ۱۳. پنل کاربری ============ */ .rr-panel { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-width: 0; gap: 24px; padding-block: 32px 48px; align-items: start; } .rr-panel-side { position: sticky; top: 96px; background: var(--rr-surface); border-radius: var(--rr-radius); box-shadow: var(--rr-shadow); padding: 16px; } .rr-panel-me { display: flex; align-items: center; gap: 12px; padding: 4px 4px 16px; border-bottom: 1px solid var(--rr-line); margin-bottom: 8px; } .rr-panel-me div { display: flex; flex-direction: column; line-height: 1.5; min-width: 0; } .rr-panel-me small { color: var(--rr-muted); font-size: 12px; } .rr-panel-nav { display: flex; flex-direction: column; gap: 2px; } .rr-panel-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--rr-text); font-weight: 700; font-size: 14px; } .rr-panel-nav a .rr-i { color: var(--rr-muted); } .rr-panel-nav a:hover { background: var(--rr-soft); color: var(--rr-primary); } .rr-panel-nav a.is-active { background: var(--rr-primary); color: #fff; } .rr-panel-nav a.is-active .rr-i { color: var(--rr-accent); } .rr-panel-logout { margin-top: 8px; border-top: 1px solid var(--rr-line); border-radius: 0 0 12px 12px !important; color: #C0392B !important; } .rr-panel-main { min-width: 0; } .rr-panel-head h1 { font-size: 24px; } .rr-panel-main > .rr-form, .rr-new-ticket, .rr-panel-main > .rr-inline-form { background: var(--rr-surface); border-radius: var(--rr-radius); box-shadow: var(--rr-shadow); padding: 22px; margin-bottom: 20px; } .rr-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; } .rr-stat { background: var(--rr-surface); border-radius: var(--rr-radius); box-shadow: var(--rr-shadow); padding: 16px; display: flex; flex-direction: column; gap: 2px; position: relative; overflow: hidden; } .rr-stat .rr-i { color: var(--rr-primary2); margin-bottom: 4px; } .rr-stat strong { font-size: 24px; font-weight: 900; line-height: 1.3; } .rr-stat span { color: var(--rr-muted); font-size: 13px; } .rr-stat::after { content: ''; position: absolute; left: -20px; bottom: -20px; width: 70px; height: 70px; border-radius: 50%; background: var(--rr-accent-soft); } .rr-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; } .rr-quick a { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--rr-surface); border: 1.5px solid var(--rr-line); font-weight: 700; color: var(--rr-text); font-size: 14px; transition: .2s; } .rr-quick a:hover { border-color: var(--rr-accent); background: var(--rr-accent-soft); color: var(--rr-text); } .rr-quick .rr-i { color: var(--rr-primary); } .rr-channel-edit { position: relative; margin-bottom: 64px; } .rr-channel-cover-pick { display: flex; align-items: flex-end; justify-content: flex-start; height: 180px; border-radius: var(--rr-radius); background: linear-gradient(135deg, var(--rr-player), var(--rr-primary2)) center / cover no-repeat; cursor: pointer; padding: 12px; position: relative; overflow: hidden; } .rr-channel-cover-pick span, .rr-cover-pick span { display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, .55); color: #fff; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; backdrop-filter: blur(4px); } .rr-channel-cover-pick input, .rr-channel-avatar-pick input, .rr-cover-pick input, .rr-drop-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .rr-channel-avatar-pick { position: absolute; bottom: -54px; right: 24px; border-radius: 50%; cursor: pointer; } .rr-channel-avatar-pick .rr-avatar-prev { width: 110px !important; height: 110px !important; border: 4px solid var(--rr-surface); box-shadow: var(--rr-shadow); border-radius: 50%; object-fit: cover; } .rr-channel-avatar-pick span { position: absolute; bottom: 6px; left: 6px; width: 30px; height: 30px; border-radius: 50%; background: var(--rr-accent); color: #1f2a12; display: grid; place-items: center; pointer-events: none; } .rr-upload-top { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; margin-bottom: 20px; } .rr-cover-pick { position: relative; aspect-ratio: 1; border-radius: var(--rr-radius); overflow: hidden; background: var(--rr-soft); cursor: pointer; display: block; } .rr-cover-pick img { width: 100%; height: 100%; object-fit: cover; display: block; } .rr-cover-pick span { position: absolute; bottom: 10px; right: 10px; } .rr-drop-zone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 24px; border: 2.5px dashed color-mix(in srgb, var(--rr-primary2) 45%, transparent); border-radius: var(--rr-radius); background: var(--rr-soft); color: var(--rr-muted); transition: .2s; cursor: pointer; } .rr-drop-zone .rr-i { color: var(--rr-primary2); } .rr-drop-zone strong { color: var(--rr-text); } .rr-drop-zone.is-over { border-color: var(--rr-accent); background: var(--rr-accent-soft); transform: scale(1.01); } .rr-drop-zone.has-file { border-style: solid; border-color: var(--rr-primary2); } .rr-drop-zone.has-err { border-color: #C0392B; } .rr-drop-zone.has-err .rr-drop-file { color: #C0392B; } .rr-drop-file { font-weight: 700; color: var(--rr-primary); direction: auto; } .rr-drop-zone.is-static { cursor: default; border-style: solid; } .rr-desc-count { font-weight: 400; color: #C0392B; } .rr-desc-count.is-ok { color: var(--rr-primary2); } .rr-progress { margin: 8px 0 12px; } .rr-progress-bar { direction: ltr; height: 10px; border-radius: 5px; background: var(--rr-soft); overflow: hidden; } .rr-progress-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--rr-primary2), var(--rr-accent)); border-radius: 5px; transition: width .3s; } .rr-progress-txt { color: var(--rr-muted); } .rr-table { background: var(--rr-surface); border-radius: var(--rr-radius); box-shadow: var(--rr-shadow); overflow: hidden; } .rr-tr { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--rr-line); color: var(--rr-text); } .rr-tr:last-child { border-bottom: 0; } a.rr-tr:hover { background: var(--rr-soft); color: var(--rr-text); } .rr-tr.is-current { background: color-mix(in srgb, var(--rr-accent) 10%, transparent); } .rr-td-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.6; } .rr-td-main strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rr-td-main small { color: var(--rr-muted); font-size: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .rr-td-stats { display: flex; gap: 14px; color: var(--rr-muted); font-size: 13px; } .rr-td-stats span { display: inline-flex; align-items: center; gap: 4px; } .rr-td-act { display: flex; gap: 2px; } .rr-td-id { color: var(--rr-muted); font-weight: 700; min-width: 40px; } .rr-pager { margin-top: 20px; } .rr-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .rr-inline-form input[type=text] { flex: 1; min-width: 200px; } .rr-inline-form .rr-form-msg { flex-basis: 100%; margin: 0; } .rr-pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; } .rr-pl-card { display: flex; flex-direction: column; gap: 2px; color: var(--rr-text); } .rr-pl-open { position: relative; display: block; border-radius: var(--rr-radius); overflow: hidden; box-shadow: var(--rr-shadow); margin-bottom: 8px; } .rr-plcover { aspect-ratio: 1; background: var(--rr-soft); display: grid; place-items: center; color: var(--rr-primary2); border-radius: var(--rr-radius); overflow: hidden; } .rr-plcover img { width: 100%; height: 100%; object-fit: cover; display: block; } .rr-plcover.is-four { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .rr-plcover.is-liked { background: linear-gradient(135deg, var(--rr-accent), #E57A2B); color: #fff; box-shadow: var(--rr-shadow); margin-bottom: 8px; } .rr-pl-play { position: absolute; bottom: 10px; left: 10px; width: 46px; height: 46px; border-radius: 50%; background: var(--rr-accent); color: #1f2a12; display: grid; place-items: center; opacity: 0; transform: translateY(8px); transition: .25s var(--rr-ease); box-shadow: var(--rr-shadow-lg); } .rr-pl-card:hover .rr-pl-play { opacity: 1; transform: none; } .rr-pl-card strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rr-pl-card small { color: var(--rr-muted); font-size: 12px; } .rr-pl-tools { display: flex; gap: 0; margin-top: 4px; } .rr-pl-tools .rr-icon-btn { width: 34px; height: 34px; } .rr-pl-liked { color: var(--rr-text); } .rr-ticket-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 18px; } .rr-ticket-head h2 { margin: 0; font-size: 20px; } .rr-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; } .rr-msg { max-width: 82%; padding: 12px 16px; border-radius: 18px; box-shadow: var(--rr-shadow); } .rr-msg.is-me { align-self: flex-start; background: var(--rr-surface); border-top-right-radius: 4px; } .rr-msg.is-admin { align-self: flex-end; background: color-mix(in srgb, var(--rr-primary) 10%, var(--rr-surface)); border-top-left-radius: 4px; } .rr-msg-who { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; margin-bottom: 4px; color: var(--rr-primary); } .rr-msg-who small { color: var(--rr-muted); font-weight: 400; } .rr-msg-text { line-height: 2; overflow-wrap: anywhere; } .rr-new-ticket summary { cursor: pointer; font-weight: 900; display: flex; align-items: center; gap: 8px; list-style: none; } .rr-new-ticket summary::-webkit-details-marker { display: none; } .rr-new-ticket[open] summary { margin-bottom: 16px; } .rr-back { margin-bottom: 8px; } .rr-notif-page { list-style: none; margin: 0; padding: 0; background: var(--rr-surface); border-radius: var(--rr-radius); box-shadow: var(--rr-shadow); overflow: hidden; } .rr-notif-page li a { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--rr-line); color: var(--rr-text); } .rr-notif-page li:last-child a { border-bottom: 0; } .rr-notif-page li a:hover { background: var(--rr-soft); } .rr-notif-page li.is-unread a { background: color-mix(in srgb, var(--rr-accent) 12%, transparent); font-weight: 700; } /* ============ ۱۴. پلیر بزرگ (سبک ویندوز مدیا پلیر) ============ */ .rr-wmp-page { padding-block: 28px 40px; } .rr-wmp { --w-bg: color-mix(in srgb, var(--rr-player) 92%, #000); --w-glass: rgba(255, 255, 255, .06); --w-line: rgba(255, 255, 255, .1); color: #EAF3EC; background: linear-gradient(180deg, color-mix(in srgb, var(--rr-player) 85%, #fff 4%), var(--w-bg)); border-radius: 22px; overflow: hidden; box-shadow: var(--rr-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .08); } .rr-wmp-titlebar { display: flex; align-items: center; gap: 14px; padding: 10px 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02)); border-bottom: 1px solid var(--w-line); font-size: 13px; } .rr-wmp-dots { display: flex; gap: 6px; } .rr-wmp-dots i { width: 12px; height: 12px; border-radius: 50%; background: #E74C3C; } .rr-wmp-dots i:nth-child(2) { background: var(--rr-accent); } .rr-wmp-dots i:nth-child(3) { background: var(--rr-primary2); } .rr-wmp-name { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rr-wmp-name .rr-i { color: var(--rr-accent); } .rr-wmp-by { opacity: .65; white-space: nowrap; } .rr-wmp-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; min-height: 560px; } .rr-wmp-stage { padding: 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; } .rr-wmp-screen { position: relative; height: 340px; border-radius: 18px; overflow: hidden; background: #06170D; box-shadow: inset 0 0 0 1px var(--w-line), inset 0 20px 60px rgba(0, 0, 0, .5); display: grid; place-items: center; } .rr-wmp-bgcover { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(40px) saturate(1.4); opacity: .35; transition: background-image .6s; } .rr-wmp-cover-wrap { position: relative; z-index: 2; width: 190px; height: 190px; margin-bottom: 70px; } .rr-wmp-cover { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .8); } .rr-wmp-disc { position: absolute; top: 8px; left: -46px; width: 174px; height: 174px; border-radius: 50%; background: repeating-radial-gradient(circle, #111 0 2px, #1c1c1c 2px 4px); box-shadow: 0 10px 30px rgba(0, 0, 0, .6); transition: left .6s var(--rr-ease); } .rr-wmp-disc::after { content: ''; position: absolute; inset: 38%; border-radius: 50%; background: var(--rr-accent); box-shadow: 0 0 0 6px #0a0a0a; } .rr-wmp.is-playing .rr-wmp-disc { left: -80px; animation: rr-spin 3.5s linear infinite; } .rr-wmp-viz { position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; height: 150px; } .rr-wmp-vizmodes { position: absolute; z-index: 3; top: 10px; right: 10px; display: flex; gap: 2px; background: rgba(0, 0, 0, .35); padding: 3px; border-radius: 10px; backdrop-filter: blur(6px); } .rr-wmp-vizmodes button { border: 0; background: transparent; color: rgba(255, 255, 255, .7); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 8px; } .rr-wmp-vizmodes button.is-active { background: var(--rr-accent); color: #1f2a12; } .rr-wmp-simnote { position: absolute; z-index: 3; top: 12px; left: 12px; font-size: 11px; background: rgba(0, 0, 0, .4); padding: 2px 10px; border-radius: 999px; opacity: .75; } .rr-wmp-now { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .rr-wmp-now h1 { font-size: 22px; margin: 0; line-height: 1.5; } .rr-wmp-now p { margin: 0; opacity: .7; } .rr-wmp-now-act { display: flex; gap: 2px; } .rr-wmp .rr-icon-btn { color: rgba(255, 255, 255, .8); } .rr-wmp .rr-icon-btn:hover { background: var(--w-glass); color: #fff; } #rr-p-like.is-on { color: #FF6B6B; } #rr-p-like.is-on .rr-i { fill: currentColor; } .rr-wmp-seek { direction: ltr; display: flex; align-items: center; gap: 12px; font-size: 13px; font-variant-numeric: tabular-nums; } .rr-wmp-seek input { flex: 1; } .rr-wmp input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--rr-accent) var(--p, 0%), rgba(255, 255, 255, .15) var(--p, 0%)); cursor: pointer; } .rr-wmp input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--rr-accent) 45%, transparent); } .rr-wmp input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; } .rr-wmp-ctrl { direction: ltr; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } .rr-wmp-btn { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--w-line); background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03)); color: #EAF3EC; display: grid; place-items: center; transition: .2s; } .rr-wmp-btn:hover { background: rgba(255, 255, 255, .18); } .rr-stop-ic { width: 14px; height: 14px; border-radius: 3px; background: currentColor; } .rr-wmp-play { width: 76px; height: 76px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); color: #1f2a12; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #FFE68A, var(--rr-accent) 55%, #C79610); box-shadow: 0 10px 30px -8px var(--rr-accent), inset 0 2px 0 rgba(255, 255, 255, .5); transition: transform .15s; } .rr-wmp-play:hover { transform: scale(1.06); } .rr-wmp-vol { display: flex; align-items: center; gap: 6px; margin-left: 10px; } .rr-wmp-vol input { width: 110px; } .rr-wmp-extras { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .rr-wmp-mini-sel, .rr-wmp-mini-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--w-glass); border: 1px solid var(--w-line); color: #EAF3EC; font-size: 13px; } .rr-wmp-mini-sel select { background: transparent; border: 0; color: inherit; font-size: 13px; outline: 0; } .rr-wmp-mini-sel select option { color: #16261B; } .rr-wmp-mini-btn[aria-expanded=true] { background: var(--rr-accent); color: #1f2a12; } .rr-wmp-eq { background: rgba(0, 0, 0, .22); border: 1px solid var(--w-line); border-radius: 16px; padding: 14px; } .rr-wmp-eq-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; } .rr-wmp-eq-head select { background: var(--w-glass); color: #fff; border: 1px solid var(--w-line); border-radius: 8px; padding: 4px 8px; } .rr-wmp-eq-head select option { color: #16261B; } .rr-eq-note { font-size: 12px; color: #FFD479 !important; } .rr-wmp-eq-bands { display: flex; justify-content: space-around; gap: 8px; direction: ltr; } .rr-wmp-eq-bands label { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; opacity: .85; } .rr-wmp-eq-bands input { writing-mode: vertical-lr; direction: rtl; width: 6px !important; height: 110px; background: rgba(255, 255, 255, .15) !important; } .rr-wmp-list { border-inline-start: 1px solid var(--w-line); background: rgba(0, 0, 0, .18); display: flex; flex-direction: column; min-height: 0; max-height: 780px; } .rr-wmp-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--w-line); } .rr-wmp-list-head strong { display: flex; align-items: center; gap: 6px; } .rr-wmp-list-head small { opacity: .6; font-weight: 400; } .rr-wmp-list-head > div { display: flex; gap: 12px; } .rr-wmp .rr-link { color: var(--rr-accent); } .rr-wmp-add { position: relative; display: flex; align-items: center; gap: 8px; margin: 12px 12px 4px; padding: 0 12px; border-radius: 12px; background: var(--w-glass); border: 1px solid var(--w-line); } .rr-wmp-add input { flex: 1; border: 0; background: transparent; color: #fff; padding: 10px 0; outline: 0; font-size: 13.5px; } .rr-wmp-add input::placeholder { color: rgba(255, 255, 255, .5); } .rr-wmp-add:focus-within { border-color: var(--rr-accent); } .rr-wmp-add-res { color: var(--rr-text); } .rr-wmp-tracks { list-style: none; margin: 0; padding: 6px 8px 12px; overflow: auto; flex: 1; } .rr-wmp-tracks .rr-q-item:hover { background: var(--w-glass); } .rr-wmp-tracks .rr-q-item.is-current { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rr-accent) 22%, transparent)); } .rr-wmp-tracks .rr-q-meta small, .rr-wmp-tracks .rr-q-dur, .rr-wmp-tracks .rr-q-num, .rr-wmp-tracks .rr-q-drag { color: rgba(255, 255, 255, .55); } .rr-wmp-tracks .rr-q-item.is-current .rr-q-meta strong { color: var(--rr-accent); } .rr-wmp-tracks .rr-eq-mini i { background: var(--rr-accent); } .rr-wmp-tracks .rr-q-del { color: rgba(255, 255, 255, .6); } .rr-wmp-empty { padding: 30px 20px; text-align: center; opacity: .7; font-size: 14px; } .rr-wmp-desc { padding: 10px 16px; font-size: 13px; opacity: .7; border-top: 1px solid var(--w-line); margin: 0; } .rr-wmp-status { display: flex; justify-content: space-between; gap: 12px; padding: 7px 18px; font-size: 12px; background: rgba(0, 0, 0, .3); border-top: 1px solid var(--w-line); opacity: .85; } .rr-wmp-status #rr-p-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rr-wmp-modes { display: flex; gap: 12px; color: var(--rr-accent); white-space: nowrap; } .rr-wmp.is-loading .rr-wmp-play { animation: rr-pulse 1s infinite; } /* ============ ۱۵. واکنش‌گرا ============ */ @media (max-width: 1100px) { .rr-grid-cards { --cols: 3 !important; } .rr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rr-footer-grid { grid-template-columns: 1fr 1fr; } .rr-wmp-body { grid-template-columns: minmax(0, 1fr) 320px; } } @media (max-width: 960px) { .rr-burger { display: inline-grid; } .rr-nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(300px, 84vw); background: var(--rr-surface); padding: 76px 14px 20px; overflow-y: auto; transform: translateX(105%); visibility: hidden; transition: transform .3s var(--rr-ease), visibility 0s .3s; box-shadow: var(--rr-shadow-lg); } .rr-nav-open .rr-nav { transform: none; visibility: visible; transition: transform .3s var(--rr-ease); } .rr-menu { flex-direction: column; } .rr-menu a { border-radius: 12px; padding: 11px 14px; } .rr-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0 12px 0 0; min-width: 0; } .rr-burger { position: relative; z-index: 62; } .rr-brand { margin-inline-end: auto; min-width: 0; } .rr-search { display: none; } .rr-search-toggle { display: inline-grid; } .rr-search-open .rr-search { display: flex; position: absolute; top: 100%; right: 16px; left: 16px; width: auto; background: var(--rr-surface); box-shadow: var(--rr-shadow-lg); margin-top: 8px; } .rr-header-in { position: relative; } .rr-upload-btn span { display: none; } .rr-upload-btn { padding: 10px; } .rr-hero-in { grid-template-columns: 1fr; padding-block: 40px 48px; gap: 28px; } .rr-dial { transform: none; } .rr-single-top { grid-template-columns: 220px 1fr; gap: 22px; } .rr-single-grid { grid-template-columns: 1fr; } .rr-panel { grid-template-columns: minmax(0, 1fr); } .rr-panel-side { display: none; } .rr-panel-me { display: none; } .rr-panel-nav { flex-direction: row; overflow-x: auto; gap: 4px; scrollbar-width: none; } .rr-panel-nav::-webkit-scrollbar { display: none; } .rr-panel-nav a { flex: none; white-space: nowrap; padding: 8px 12px; } .rr-panel-logout { margin: 0; border: 0; border-radius: 12px !important; } .rr-quick { grid-template-columns: 1fr 1fr; } .rr-auth { grid-template-columns: 1fr; } .rr-auth-art { min-height: 200px; padding: 28px; } .rr-auth-perks { display: none; } .rr-wmp-body { grid-template-columns: 1fr; } .rr-wmp-list { border-inline-start: 0; border-top: 1px solid var(--w-line); max-height: 520px; } .rr-bar-in { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; } .rr-bar-side { display: contents; } .rr-bar-side > :not([data-rr-act=queue]) { display: none; } .rr-bar-ctrl { order: 2; } [data-rr-act=queue] { order: 3; } } @media (max-width: 720px) { body { font-size: 14.5px; } .rr-hide-sm { display: none !important; } .rr-grid-cards { --cols: 2 !important; gap: 12px; } .rr-grid-cards.rr-scroll-sm { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; } .rr-grid-cards.rr-scroll-sm::-webkit-scrollbar { display: none; } .rr-grid-cards.rr-scroll-sm > .rr-card { flex: 0 0 62%; scroll-snap-align: start; } .rr-card-body { padding: 10px; } .rr-mini { gap: 6px; } .rr-mini-add[data-rr-pl] { display: none; } .rr-scroll-sm .rr-mini-add[data-rr-pl] { display: grid; } .rr-single-top { grid-template-columns: 1fr; padding-top: 24px; } .rr-single-cover { width: min(280px, 80%); margin-inline: auto; } .rr-single-head { text-align: center; } .rr-single-head .rr-chips, .rr-single-actions { justify-content: center; } .rr-mini-lg { margin-inline: auto; } .rr-form-grid, .rr-form-grid-4 { grid-template-columns: 1fr; } .rr-upload-top { grid-template-columns: 1fr; } .rr-cover-pick { width: 180px; margin-inline: auto; } .rr-stats { grid-template-columns: 1fr 1fr; } .rr-td-stats { display: none; } .rr-footer-grid { grid-template-columns: 1fr; gap: 24px; } .rr-topbar-text { display: none; } .rr-drop, .rr-bell-drop { position: fixed; top: 76px; right: 12px; left: 12px; width: auto; } .rr-auth { margin-top: 16px; border-radius: 20px; } .rr-auth-box { padding: 24px 18px; } .rr-auth-tab { font-size: 12.5px; } .rr-auth-tab .rr-i { display: none; } .rr-wmp-page { padding-top: 12px; } .rr-wmp-page .rr-wrap { width: calc(100% - 16px); } .rr-wmp-stage { padding: 14px; } .rr-wmp-screen { height: 270px; } .rr-wmp-cover-wrap { width: 150px; height: 150px; margin-bottom: 60px; } .rr-wmp-disc { width: 136px; height: 136px; } .rr-wmp.is-playing .rr-wmp-disc { left: -60px; } .rr-wmp-vol { width: 100%; justify-content: center; margin: 4px 0 0; } .rr-wmp-btn { width: 42px; height: 42px; } .rr-wmp-play { width: 66px; height: 66px; } .rr-wmp-by { display: none; } .rr-msg { max-width: 94%; } .rr-queue { left: 8px; right: 8px; width: auto; } .rr-channel-in { padding-top: 60px; } .rr-toasts { bottom: calc(var(--rr-bar-h) + 10px); } } @media (max-width: 420px) { .rr-grid-cards:not(.rr-scroll-sm) { gap: 10px; } .rr-card-title { font-size: 14px; } .rr-mini-play { width: 34px; height: 34px; } .rr-bar-cover { width: 42px; height: 42px; } .rr-play-btn { width: 44px; height: 44px; } .rr-brand-text small { display: none; } } /* ============ ۱۶. کاهش حرکت و چاپ ============ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } @media print { .rr-header, .rr-topbar, .rr-footer, .rr-bar, .rr-queue, .rr-toasts { display: none !important; } body { background: #fff; padding: 0; } } /* ============ ۱۷. ویدیو (۱.۱.۲) ============ */ .rr-card-type { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: rgba(214, 44, 26, .92); color: #fff; font-size: 12px; font-weight: 700; } .rr-video-stage { position: relative; z-index: 2; padding-top: 28px; } .rr-video { position: relative; aspect-ratio: 16 / 9; max-height: 76vh; margin-inline: auto; background: #000; border-radius: 22px; overflow: hidden; box-shadow: var(--rr-shadow-lg); } .rr-video video { width: 100%; height: 100%; display: block; background: #000; } .rr-video-start { position: absolute; inset: 0; border: 0; padding: 0; background: #06140b; cursor: pointer; display: grid; place-items: center; overflow: hidden; } .rr-video-bg { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); max-width: none; object-fit: cover; filter: blur(34px) brightness(.55) saturate(1.3); } .rr-video-poster { position: relative; height: 78%; width: auto; aspect-ratio: 1; object-fit: cover; border-radius: 18px; box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .8); } .rr-video-btn { position: absolute; width: 86px; height: 86px; border-radius: 50%; background: var(--rr-accent); color: #1f2a12; display: grid; place-items: center; box-shadow: 0 0 0 10px color-mix(in srgb, var(--rr-accent) 30%, transparent), 0 14px 30px rgba(0, 0, 0, .5); transition: transform .2s var(--rr-ease); } .rr-video-btn .rr-i { margin-left: 5px; } .rr-video-start:hover .rr-video-btn { transform: scale(1.08); } .rr-video.is-loading .rr-video-btn { animation: rr-pulse .9s infinite; } .rr-single-top.is-video { grid-template-columns: 1fr; padding-top: 22px; } .rr-single-top.is-video .rr-single-cover { display: none; } .rr-audio-only { margin-block: 12px 16px; } /* ============ ۱۸. صفحه ارسال فایل (۱.۱.۲) ============ */ .rr-up-hero { color: #fff; background: radial-gradient(500px 220px at 8% 120%, color-mix(in srgb, var(--rr-accent) 40%, transparent), transparent 70%), linear-gradient(135deg, var(--rr-player), var(--rr-primary)); } .rr-up-hero-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 34px 70px; flex-wrap: wrap; } .rr-up-hero h1 { font-size: clamp(22px, 3.2vw, 34px); margin: 0 0 4px; } .rr-up-hero p { margin: 0; opacity: .85; } .rr-steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; } .rr-steps li { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-weight: 700; font-size: 14px; opacity: .7; transition: .3s; } .rr-steps li span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); font-size: 13px; } .rr-steps li.is-active { opacity: 1; background: #fff; color: var(--rr-primary); } .rr-steps li.is-active span { background: var(--rr-accent); color: #1f2a12; } .rr-steps li.is-done { opacity: 1; } .rr-steps li.is-done span { background: var(--rr-primary2); color: #fff; font-size: 0; } .rr-steps li.is-done span::before { content: '✓'; font-size: 14px; } .rr-up { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; margin-top: -44px; padding-bottom: 48px; } .rr-up-note { margin-top: 16px; } .rr-up-gate { position: relative; margin: -40px auto 48px; max-width: 560px; text-align: center; background: var(--rr-surface); border-radius: 22px; box-shadow: var(--rr-shadow-lg); padding: 40px 24px; } .rr-up-gate > .rr-i { color: var(--rr-primary2); } .rr-up-gate .rr-hero-cta { justify-content: center; } .rr-up-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .rr-up-card { background: var(--rr-surface); border-radius: 20px; box-shadow: var(--rr-shadow); padding: 22px; } .rr-up-card > h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin-bottom: 16px; } .rr-up-num { width: 30px; height: 30px; border-radius: 10px; background: var(--rr-accent); color: #1f2a12; display: grid; place-items: center; font-size: 15px; } .rr-up-channel { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px 0; border-radius: 14px; background: var(--rr-accent-soft); margin-bottom: 16px; } .rr-up-channel > .rr-i { color: var(--rr-primary); margin-top: 28px; } .rr-up-channel .rr-fl { flex: 1; } .rr-up-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 34px 18px; border-radius: 18px; border: 2.5px dashed color-mix(in srgb, var(--rr-primary2) 45%, transparent); background: repeating-linear-gradient(135deg, var(--rr-soft) 0 14px, color-mix(in srgb, var(--rr-soft) 60%, var(--rr-surface)) 14px 28px); cursor: pointer; transition: .2s; } .rr-up-drop:hover { border-color: var(--rr-primary2); } .rr-up-drop.is-over { border-color: var(--rr-accent); background: var(--rr-accent-soft); transform: scale(1.01); } .rr-up-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .rr-up-drop-ic { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: var(--rr-primary); color: #fff; box-shadow: 0 12px 24px -10px var(--rr-primary); animation: rr-float 3s ease-in-out infinite; } @keyframes rr-float { 50% { transform: translateY(-6px); } } .rr-up-drop strong { font-size: 17px; } .rr-up-drop-or { color: var(--rr-muted); font-size: 13px; } .rr-up-drop .rr-btn { pointer-events: none; } .rr-up-types { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 6px; font-size: 12.5px; color: var(--rr-muted); } .rr-up-types > span { display: inline-flex; align-items: center; gap: 5px; } .rr-up-file { border: 1.5px solid var(--rr-line); border-radius: 16px; overflow: hidden; } .rr-up-file-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--rr-soft); } .rr-up-file-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--rr-surface); font-size: 22px; flex: none; color: var(--rr-primary); } .rr-up-file-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.6; } .rr-up-file-meta strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: auto; } .rr-up-file-meta small { color: var(--rr-muted); } .rr-up-preview { padding: 12px; } .rr-up-preview:empty { display: none; } .rr-up-preview audio { width: 100%; } .rr-up-preview video { width: 100%; max-height: 360px; border-radius: 12px; background: #000; display: block; } .rr-up-info { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; margin-bottom: 4px; } .rr-up-coverbox { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .rr-up-cover { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 16px; overflow: hidden; cursor: pointer; background: var(--rr-soft); box-shadow: var(--rr-shadow); } .rr-up-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; } .rr-up-cover:hover img { transform: scale(1.05); } .rr-up-cover input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; z-index: 2; } .rr-up-cover-lbl { position: absolute; bottom: 8px; right: 8px; left: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px; border-radius: 10px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-weight: 700; backdrop-filter: blur(4px); } .rr-up-coverbox small { font-size: 11.5px; line-height: 1.7; } .rr-up-fields { min-width: 0; } .rr-up-fields select { width: 100%; } .rr-up-more { border: 1.5px dashed var(--rr-line); border-radius: 16px; padding: 12px 16px 0; } .rr-up-more summary { cursor: pointer; font-weight: 900; display: flex; align-items: center; gap: 8px; list-style: none; padding-bottom: 12px; flex-wrap: wrap; } .rr-up-more summary::-webkit-details-marker { display: none; } .rr-up-more summary small { font-weight: 400; color: var(--rr-muted); font-size: 12px; } .rr-up-rights { align-items: flex-start; line-height: 1.9; margin-bottom: 12px; } .rr-up-rights input { margin-top: 5px; } .rr-up-mod { display: flex; align-items: center; gap: 6px; font-size: 13px; } .rr-up-progress { margin: 6px 0 14px; padding: 14px; border-radius: 14px; background: var(--rr-soft); } .rr-up-progress-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 13px; color: var(--rr-muted); } .rr-up-progress-top strong { font-size: 22px; color: var(--rr-primary); } .rr-up-bar { direction: ltr; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--rr-primary) 12%, var(--rr-surface)); overflow: hidden; } .rr-up-bar span { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--rr-primary2), var(--rr-accent)); transition: width .3s; position: relative; } .rr-up-bar span::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .22) 0 10px, transparent 10px 20px); animation: rr-stripes .8s linear infinite; } @keyframes rr-stripes { to { background-position: 28px 0; } } .rr-up-progress small { display: block; margin-top: 6px; color: var(--rr-muted); } .rr-up.is-sending .rr-up-card[data-step="1"], .rr-up.is-sending .rr-up-card[data-step="2"] { opacity: .55; pointer-events: none; } .rr-up-done { text-align: center; padding: 40px 22px; } .rr-up-done-ic { width: 84px; height: 84px; margin: 0 auto 12px; border-radius: 50%; background: var(--rr-primary); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 12px color-mix(in srgb, var(--rr-primary2) 18%, transparent); animation: rr-pop .6s var(--rr-ease); } .rr-up-done .rr-hero-cta { justify-content: center; } .rr-up-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; } .rr-up-live { background: var(--rr-surface); border-radius: 20px; box-shadow: var(--rr-shadow); padding: 14px; } .rr-up-live > small { display: block; margin-bottom: 8px; } .rr-up-card-prev { box-shadow: none; border: 1px solid var(--rr-line); } .rr-up-card-prev:hover { transform: none; } .rr-up-check { list-style: none; margin: 0; padding: 14px 16px; background: var(--rr-surface); border-radius: 20px; box-shadow: var(--rr-shadow); } .rr-up-check li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; color: var(--rr-muted); } .rr-up-check li::before { content: ''; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--rr-line); flex: none; transition: .2s; } .rr-up-check li.is-ok { color: var(--rr-text); font-weight: 700; } .rr-up-check li.is-ok::before { content: '✓'; border-color: var(--rr-primary2); background: var(--rr-primary2); color: #fff; font-size: 12px; display: grid; place-items: center; } .rr-up-tip { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.9; color: var(--rr-muted); margin: 0; padding: 0 6px; } .rr-up-tip .rr-i { flex: none; margin-top: 4px; color: var(--rr-primary2); } @media (max-width: 960px) { .rr-up { grid-template-columns: 1fr; } .rr-up-side { position: static; order: -1; flex-direction: row; flex-wrap: wrap; } .rr-up-live { display: none; } .rr-up-check { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 12px 14px; } .rr-up-check li { font-size: 12.5px; padding: 2px 0; } .rr-up-check li::before { width: 16px; height: 16px; } .rr-up-tip { display: none; } } @media (max-width: 720px) { .rr-up-hero-in { padding-block: 22px 60px; gap: 14px; } .rr-steps { width: 100%; justify-content: space-between; gap: 4px; } .rr-steps li { flex: 1; justify-content: center; padding: 5px 6px; font-size: 12.5px; } .rr-up { margin-top: -40px; gap: 14px; } .rr-up-card { padding: 16px; border-radius: 18px; } .rr-up-info { grid-template-columns: 1fr; } .rr-up-coverbox { width: 160px; margin-inline: auto; } .rr-up-drop { padding: 24px 12px; } .rr-up-drop-ic { width: 60px; height: 60px; } .rr-up-channel { flex-direction: column; gap: 0; } .rr-up-channel > .rr-i { display: none; } .rr-up .rr-form-foot .rr-btn { flex: 1; } .rr-video-stage { padding-top: 12px; width: 100%; } .rr-video { border-radius: 0; max-height: none; } .rr-video-btn { width: 66px; height: 66px; } .rr-card-type { font-size: 11px; padding: 1px 8px; } } @media (max-width: 520px) { .rr-bar-ctrl [data-rr-act=shuffle], .rr-bar-ctrl [data-rr-act=repeat] { display: none; } .rr-bar .rr-icon-btn { width: 36px; height: 36px; } } /* ============ ۱۹. نسخه ۱.۱.۳: موبایل مثل اپ ============ */ .rr-vh { position: absolute !important; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .rr-btn-sm { padding: 6px 12px; font-size: 12.5px; } body.rr-on-player .rr-bar, body.rr-on-player .rr-queue { display: none !important; } body.rr-on-player.rr-has-queue { padding-bottom: 0; } /* پنل: سربرگ موبایل و کاشی‌های منو */ .rr-panel-mhead, .rr-panel-tiles { display: none; } .rr-profile-photo { display: flex; align-items: center; gap: 18px; } .rr-avatar-pick { position: relative; flex: none; border-radius: 50%; cursor: pointer; } .rr-avatar-pick .rr-avatar-prev { width: 96px !important; height: 96px !important; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--rr-surface), 0 0 0 6px var(--rr-accent); font-size: 38px !important; } .rr-avatar-pick input, .rr-channel-cover-pick input, .rr-channel-avatar-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; } .rr-avatar-cam { position: absolute; bottom: 0; left: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--rr-primary); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--rr-surface); pointer-events: none; } .rr-profile-photo-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .rr-profile-photo-txt small { line-height: 1.8; } .rr-profile-photo-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .rr-profile-photo-btns label { position: relative; overflow: hidden; cursor: pointer; } [data-rr-img].is-busy { opacity: .6; pointer-events: none; animation: rr-pulse 1s infinite; } .rr-channel-cover-pick.has-img { background-size: cover !important; background-position: center !important; } .rr-crop-hint { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: -40px 0 20px; padding-inline-start: 150px; min-height: 26px; } /* پنجره برش */ .rr-crop-box { width: min(560px, 100%); } .rr-crop-stage { position: relative; height: min(56vh, 420px); background: #0b1a11; overflow: hidden; touch-action: none; cursor: grab; user-select: none; } .rr-crop-stage:active { cursor: grabbing; } .rr-crop-stage img { position: absolute; left: 50%; top: 50%; max-width: none !important; transform-origin: center; pointer-events: none; } .rr-crop-frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); outline: 2px solid #fff; pointer-events: none; } .rr-crop-frame.is-round { border-radius: 50%; } .rr-crop-frame::before, .rr-crop-frame::after { content: ''; position: absolute; inset: 0; border: 1px dashed rgba(255, 255, 255, .35); border-width: 0 1px; left: 33.3%; right: 33.3%; } .rr-crop-frame::after { border-width: 1px 0; left: 0; right: 0; top: 33.3%; bottom: 33.3%; } .rr-crop-frame.is-round::before, .rr-crop-frame.is-round::after { display: none; } .rr-crop-tools { display: flex; align-items: center; gap: 10px; padding: 12px 18px 0; direction: ltr; font-weight: 900; color: var(--rr-muted); } .rr-crop-tools input { flex: 1; accent-color: var(--rr-primary); } .rr-crop-help { margin: 6px 18px 0; font-size: 12px; color: var(--rr-muted); } .rr-crop-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px 18px; } /* نوار پایین موبایل (مثل اپ) */ .rr-bnav { display: none; } .rr-splash { display: none; } .rr-install-bar { display: none; } @media (max-width: 960px) { .rr-panel-mhead { display: flex; align-items: center; gap: 12px; background: var(--rr-surface); border-radius: 18px; box-shadow: var(--rr-shadow); padding: 12px 14px; margin-bottom: 14px; } .rr-panel-mhead .rr-avatar { width: 48px !important; height: 48px !important; border-radius: 50%; object-fit: cover; flex: none; } .rr-panel-mhead-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; } .rr-panel-mhead-txt strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rr-panel-mhead-txt small { color: var(--rr-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rr-panel-back { width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--rr-soft); color: var(--rr-primary); display: grid; place-items: center; } .rr-panel-head h1 { font-size: 20px; margin-bottom: 12px; } .rr-panel-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; } .rr-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 6px; min-height: 92px; border-radius: 18px; background: var(--rr-surface); box-shadow: var(--rr-shadow); color: var(--rr-text); font-size: 12.5px; font-weight: 700; text-align: center; line-height: 1.5; } .rr-tile:active { transform: scale(.97); } .rr-tile-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--rr-soft); color: var(--rr-primary); } .rr-tile.is-accent .rr-tile-ic { background: var(--rr-accent); color: #1f2a12; } .rr-tile.is-danger { color: #C0392B; } .rr-tile.is-danger .rr-tile-ic { background: #FBE3E0; color: #C0392B; } .rr-tile .rr-pill { position: absolute; top: 8px; left: 8px; margin: 0; } .rr-quick { display: none; } .rr-panel { padding-top: 16px; gap: 0; } } @media (max-width: 720px) { :root { --rr-bnav-h: 64px; } /* هدر جمع‌وجور */ .rr-topbar { display: none; } .rr-header-in { min-height: 60px; gap: 8px; } .rr-logo { height: 36px; } .rr-brand-text strong { font-size: 17px; } .rr-upload-btn, .rr-actions .rr-user { display: none; } .admin-bar .rr-header { top: 0; } .rr-drop, .rr-bell-drop { top: 66px; } .rr-bnav { display: flex; position: fixed; right: 0; left: 0; bottom: 0; z-index: 57; height: calc(var(--rr-bnav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: color-mix(in srgb, var(--rr-surface) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--rr-line); box-shadow: 0 -6px 20px -12px rgba(0, 0, 0, .25); } .rr-bnav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--rr-muted); font-size: 11px; font-weight: 700; position: relative; } .rr-bnav a.is-active { color: var(--rr-primary); } .rr-bnav a.is-active::before { content: ''; position: absolute; top: 0; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--rr-accent); } .rr-bnav .rr-avatar { width: 24px !important; height: 24px !important; border-radius: 50%; object-fit: cover; font-size: 11px !important; } .rr-bnav a.is-active .rr-avatar { box-shadow: 0 0 0 2px var(--rr-accent); } .rr-bnav-up-ic { width: 46px; height: 46px; margin-top: -22px; border-radius: 16px; display: grid; place-items: center; background: var(--rr-accent); color: #1f2a12; box-shadow: 0 8px 18px -6px var(--rr-accent), 0 0 0 4px var(--rr-bg); transition: transform .2s; } .rr-bnav-up:active .rr-bnav-up-ic { transform: scale(.92); } .rr-bnav-up.is-active::before { display: none; } body { padding-bottom: calc(var(--rr-bnav-h) + env(safe-area-inset-bottom)); } body.rr-has-queue { padding-bottom: calc(var(--rr-bnav-h) + var(--rr-bar-h) + env(safe-area-inset-bottom)); } body.rr-on-player.rr-has-queue { padding-bottom: calc(var(--rr-bnav-h) + env(safe-area-inset-bottom)); } .rr-bar { bottom: calc(var(--rr-bnav-h) + env(safe-area-inset-bottom)); padding-bottom: 0; height: 64px; border-radius: 16px 16px 0 0; } :root { --rr-bar-h: 64px; } .rr-bar-in { width: calc(100% - 20px); } .rr-bar-cover { width: 44px; height: 44px; } .rr-play-btn { width: 44px; height: 44px; margin-inline: 2px; } .rr-queue { bottom: calc(var(--rr-bnav-h) + var(--rr-bar-h) + 10px + env(safe-area-inset-bottom)); max-height: 60vh; } .rr-toasts { bottom: calc(var(--rr-bnav-h) + var(--rr-bar-h) + 14px + env(safe-area-inset-bottom)); } .rr-footer { margin-top: 24px; } .rr-footer-grid { padding-block: 30px 18px; gap: 18px; } .rr-footer-grid > div:not(:first-child) { display: none; } .rr-footer-bottom .rr-wrap { flex-direction: column; align-items: center; text-align: center; gap: 4px; } /* پنل روی گوشی */ .rr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .rr-stat { padding: 10px 8px; border-radius: 14px; align-items: center; text-align: center; } .rr-stat .rr-i { width: 18px; height: 18px; margin: 0; } .rr-stat strong { font-size: 18px; } .rr-stat span { font-size: 11px; } .rr-stat::after { display: none; } .rr-stat:nth-child(n+4) { display: none; } .rr-box, .rr-panel-main > .rr-form, .rr-new-ticket, .rr-panel-main > .rr-inline-form { padding: 16px; border-radius: 18px; } .rr-callout { flex-direction: column; text-align: center; gap: 8px; } .rr-profile-photo { flex-direction: column; text-align: center; } .rr-profile-photo-btns { justify-content: center; } .rr-channel-edit { margin-bottom: 70px; } .rr-channel-cover-pick { height: 120px; } .rr-channel-avatar-pick { right: 50%; transform: translateX(50%); bottom: -56px; } .rr-crop-hint { margin: -54px 0 16px; padding: 0; justify-content: center; text-align: center; min-height: 0; padding-top: 48px; } .rr-tr { padding: 10px 12px; gap: 10px; } .rr-pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .rr-pl-play { opacity: 1; transform: none; width: 38px; height: 38px; } .rr-inline-form input[type=text] { min-width: 0; flex-basis: 100%; } .rr-inline-form .rr-btn { flex: 1; } /* پنجره‌ها روی موبایل از پایین باز می‌شوند */ .rr-modal { align-items: end; padding: 0; } .rr-modal-box { width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); } .rr-crop-stage { height: 52vh; } /* نوار نصب اپ */ .rr-install-bar { display: flex; position: fixed; right: 10px; left: 10px; top: 10px; z-index: 90; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: var(--rr-player); color: #fff; box-shadow: var(--rr-shadow-lg); animation: rr-drop .3s var(--rr-ease); } .rr-install-bar[hidden] { display: none; } .rr-install-bar img { width: 44px; height: 44px; border-radius: 12px; } .rr-install-bar div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; } .rr-install-bar small { opacity: .8; font-size: 11.5px; } .rr-install-bar .rr-icon-btn { color: #fff; width: 32px; height: 32px; } } .rr-install-steps { margin: 0; padding: 18px 40px 24px 22px; line-height: 2.2; } .rr-ios-share { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--rr-soft); color: #0a84ff; font-size: 14px; } /* صفحه شروع اپ */ .rr-splash.is-on { display: flex; position: fixed; inset: 0; z-index: 1000; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: #fff; transition: opacity .5s; } .rr-splash.is-out { opacity: 0; pointer-events: none; } .rr-splash-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rr-splash-ic { width: 120px; height: 120px; border-radius: 30px; animation: rr-float 2s ease-in-out infinite; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .5); } .rr-splash strong { font-size: 22px; font-weight: 900; } /* حالت اپ نصب‌شده */ .rr-standalone .rr-header { padding-top: env(safe-area-inset-top); } .rr-standalone .rr-topbar { display: none; } .rr-standalone body { -webkit-tap-highlight-color: transparent; } .rr-standalone .rr-bnav a, .rr-standalone .rr-tile, .rr-standalone .rr-btn { -webkit-user-select: none; user-select: none; } @media (max-width: 720px) { body.rr-has-queue:not(.rr-on-player) .rr-bnav-up-ic { margin-top: 0; width: 42px; height: 34px; border-radius: 12px; box-shadow: none; } } /* ============ ۲۰. کانال‌ها (۱.۱.۴) ============ */ .rr-btn-icon { padding: 10px; width: 42px; height: 42px; } .rr-chip.is-active { background: var(--rr-primary); color: #fff; } .rr-channel-hero { min-height: 260px; display: flex; align-items: flex-end; background-size: cover; background-position: center; } .rr-channel-hero > .rr-wrap { width: min(100% - 32px, var(--rr-wrap)); } .rr-channel-avatar { width: 120px !important; height: 120px !important; object-fit: cover; font-size: 46px !important; } .rr-channel-stats strong { font-weight: 900; color: var(--rr-accent); margin-inline-end: 3px; } .rr-channel-stats { flex-wrap: wrap; row-gap: 2px; } .rr-socials { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .rr-soc { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 13px; font-weight: 700; backdrop-filter: blur(6px); transition: background .2s, transform .15s; } .rr-soc:hover { color: #fff; transform: translateY(-2px); } .rr-soc-instagram:hover { background: linear-gradient(45deg, #f9a825, #e91e63, #7b1fa2); } .rr-soc-telegram:hover { background: #229ED9; } .rr-soc-whatsapp:hover { background: #25D366; } .rr-soc-bale:hover { background: #3AAE8A; } .rr-soc-website:hover { background: var(--rr-accent); color: #1f2a12; } .rr-tabs-bar { display: flex; gap: 6px; margin-bottom: 22px; padding: 5px; background: var(--rr-surface); border-radius: 16px; box-shadow: var(--rr-shadow); overflow-x: auto; scrollbar-width: none; } .rr-tabs-bar::-webkit-scrollbar { display: none; } .rr-tabs-bar button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border: 0; border-radius: 12px; background: transparent; font-weight: 700; color: var(--rr-muted); white-space: nowrap; } .rr-tabs-bar button small { background: var(--rr-soft); border-radius: 999px; padding: 0 8px; font-size: 12px; } .rr-tabs-bar button.is-active { background: var(--rr-primary); color: #fff; } .rr-tabs-bar button.is-active small { background: rgba(255, 255, 255, .2); } .rr-about-list { margin: 16px 0 0; } .rr-about-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--rr-line); font-size: 14px; } .rr-about-list dt { color: var(--rr-muted); flex: none; } .rr-about-list dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rr-pl-open { position: relative; } .rr-pl-open > a { display: block; } .rr-pl-card button.rr-pl-play { border: 0; cursor: pointer; } .rr-pl-title { color: var(--rr-text); } /* لینک کانال در پنل */ .rr-ch-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 18px; border-radius: 14px; background: var(--rr-accent-soft); border: 1.5px solid color-mix(in srgb, var(--rr-accent) 55%, transparent); flex-wrap: wrap; } .rr-ch-link-ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--rr-surface); color: var(--rr-primary); } .rr-ch-link-txt { flex: 1; min-width: 180px; display: flex; flex-direction: column; } .rr-ch-link-txt small { font-size: 12px; color: var(--rr-muted); font-weight: 700; } .rr-ch-link-txt input { border: 0; background: transparent; padding: 2px 0; font-size: 14px; font-weight: 700; color: var(--rr-primary); outline: 0; width: 100%; } .rr-fl-ic > span { display: inline-flex; align-items: center; gap: 6px; } .rr-fl-ic > span .rr-i { color: var(--rr-primary2); } /* فهرست کانال‌ها */ .rr-chl-hero { color: #fff; text-align: center; background: radial-gradient(520px 240px at 50% 130%, color-mix(in srgb, var(--rr-accent) 40%, transparent), transparent 70%), linear-gradient(135deg, var(--rr-player), var(--rr-primary)); padding: 40px 0 46px; } .rr-chl-hero h1 { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(24px, 3.4vw, 36px); margin-bottom: 6px; } .rr-chl-hero h1 .rr-i { color: var(--rr-accent); } .rr-chl-hero p { opacity: .85; max-width: 60ch; margin: 0 auto 20px; } .rr-chl-search { display: flex; align-items: center; gap: 8px; max-width: 560px; margin: 0 auto; padding: 6px 16px 6px 6px; background: var(--rr-surface); border-radius: 999px; color: var(--rr-muted); box-shadow: var(--rr-shadow-lg); } .rr-chl-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--rr-text); padding: 8px 0; } .rr-chl-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } .rr-ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; } .rr-ch-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--rr-surface); border-radius: 20px; box-shadow: var(--rr-shadow); overflow: hidden; padding: 0 16px 16px; transition: transform .25s var(--rr-ease), box-shadow .25s; } .rr-ch-card:hover { transform: translateY(-4px); box-shadow: var(--rr-shadow-lg); } .rr-ch-cover { display: block; align-self: stretch; margin: 0 -16px; height: 86px; background: linear-gradient(135deg, var(--rr-primary2), var(--rr-player)) center / cover no-repeat; } .rr-ch-av { margin-top: -40px; border-radius: 50%; box-shadow: 0 0 0 4px var(--rr-surface); } .rr-ch-av .rr-avatar { width: 76px !important; height: 76px !important; object-fit: cover; font-size: 30px !important; } .rr-ch-name { font-size: 16px; margin: 8px 0 2px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rr-ch-name a { color: var(--rr-text); } .rr-ch-name a:hover { color: var(--rr-primary); } .rr-ch-stats { display: flex; gap: 12px; font-size: 12.5px; color: var(--rr-muted); margin: 0 0 6px; } .rr-ch-bio { font-size: 12.5px; color: var(--rr-muted); line-height: 1.8; margin: 0 0 10px; } .rr-ch-act { display: flex; gap: 6px; margin-top: auto; flex-wrap: wrap; justify-content: center; } .rr-btn.is-on[data-rr-follow] { background: var(--rr-soft); color: var(--rr-primary); border-color: var(--rr-primary2); } .rr-channel-hero .rr-btn.is-on[data-rr-follow] { background: rgba(255, 255, 255, .18); color: #fff; } @media (max-width: 720px) { .rr-channel-in { flex-direction: column; align-items: center; text-align: center; padding-block: 70px 22px; gap: 10px; } .rr-channel-stats { justify-content: center; } .rr-socials { justify-content: center; } .rr-soc span { display: none; } .rr-soc { width: 38px; height: 38px; padding: 0; justify-content: center; } .rr-channel-cta { justify-content: center; } .rr-channel-cta .rr-btn { padding: 9px 14px; font-size: 13px; } .rr-ch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .rr-ch-card { padding: 0 10px 12px; border-radius: 16px; } .rr-ch-cover { margin: 0 -10px; height: 64px; } .rr-ch-av { margin-top: -32px; } .rr-ch-av .rr-avatar { width: 62px !important; height: 62px !important; } .rr-ch-name { font-size: 14px; } .rr-ch-stats { gap: 8px; font-size: 11.5px; flex-wrap: wrap; justify-content: center; } .rr-ch-bio { display: none; } .rr-ch-act .rr-btn { flex: 1; padding: 7px 8px; font-size: 12px; } .rr-ch-act .rr-btn + .rr-btn { display: none; } .rr-chl-hero { padding: 26px 0 30px; } .rr-chl-search { margin-inline: 4px; } .rr-chl-search .rr-btn { padding: 8px 14px; } .rr-ch-link { gap: 8px; } .rr-ch-link .rr-btn { flex: 1; } .rr-about-list > div { flex-direction: column; gap: 2px; } } /* ============ ۲۱. منوی اصلی: یک خط + دکمه «بیشتر» (۱.۱.۵) ============ */ @media (min-width: 961px) { .rr-nav { overflow: visible; } .rr-nav .rr-menu { flex-wrap: nowrap; white-space: nowrap; } .rr-menu > li > a { padding-inline: 12px; } .rr-menu > .menu-item-has-children > a::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-inline-start: 7px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: translateY(-3px) rotate(45deg); opacity: .6; } .rr-menu-more > .sub-menu { right: auto; left: 0; } .rr-menu-more > button { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border: 0; border-radius: 999px; background: transparent; font-weight: 700; font-size: 14px; color: var(--rr-text); } .rr-menu-more > button:hover, .rr-menu-more:focus-within > button { background: var(--rr-soft); color: var(--rr-primary); } .rr-menu-more .sub-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0 12px 0 0; min-width: 0; } } @media (min-width: 961px) and (max-width: 1180px) { .rr-menu > li > a { padding-inline: 9px; font-size: 13.5px; } .rr-search { width: min(280px, 26vw); } } /* ============ ۲۲. لوگو و دکمه‌های منو (۱.۱.۶) ============ */ .rr-logo { max-width: 240px; object-fit: contain; } .rr-brand-text strong { font-size: 21px; line-height: 1.3; } .rr-brand-text small { font-size: 11.5px; margin-top: 1px; } .rr-brand-light .rr-brand-text strong { font-size: 22px; } /* منو: دکمه‌های مستطیلی با گوشه کم‌گرد */ .rr-menu { gap: 6px; align-items: center; } .rr-menu > li > a, .rr-menu-more > button { display: inline-flex; align-items: center; gap: 4px; padding: 8px 15px; border-radius: 9px; border: 1.5px solid var(--rr-line); background: var(--rr-surface); color: var(--rr-text); font-weight: 700; font-size: 14px; line-height: 1.5; transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .15s; } .rr-menu > li > a:hover, .rr-menu > li:focus-within > a, .rr-menu-more > button:hover, .rr-menu-more:focus-within > button { background: var(--rr-soft); color: var(--rr-primary); border-color: color-mix(in srgb, var(--rr-primary2) 45%, transparent); transform: translateY(-1px); box-shadow: 0 4px 10px -6px color-mix(in srgb, var(--rr-primary) 60%, transparent); } .rr-menu > .current-menu-item > a, .rr-menu > .current_page_item > a, .rr-menu > .current-menu-ancestor > a { background: var(--rr-primary); color: #fff; border-color: var(--rr-primary); box-shadow: 0 5px 12px -6px var(--rr-primary); } .rr-menu .sub-menu { border-radius: 12px; padding: 6px; } .rr-menu .sub-menu a { border-radius: 8px; padding: 8px 12px; border: 0; background: transparent; } .rr-menu .sub-menu a:hover, .rr-menu .sub-menu .current-menu-item > a { background: var(--rr-soft); color: var(--rr-primary); } @media (min-width: 961px) and (max-width: 1180px) { .rr-menu { gap: 4px; } .rr-menu > li > a, .rr-menu-more > button { padding: 7px 11px; font-size: 13.5px; } } @media (max-width: 960px) { .rr-menu { align-items: stretch; gap: 6px; } .rr-menu > li > a { display: flex; border-radius: 10px; padding: 11px 14px; } .rr-menu > li > a:hover { transform: none; } .rr-brand-text strong { font-size: 18px; } } @media (max-width: 420px) { .rr-brand-text small { display: none; } .rr-logo { max-width: 150px; } } /* ============ ۲۳. نسخه ۱.۱.۷ ============ */ /* فاصله منو از لوگو (دسکتاپ) */ @media (min-width: 961px) { .rr-header-in { gap: 18px; } .rr-nav { margin-inline-start: 26px; } } /* منوی کشویی موبایل تمام‌قد: افکت شیشه‌ای هدر در موبایل حذف شد چون جعبه منو را کوچک می‌کرد */ @media (max-width: 960px) { .rr-header { background: var(--rr-surface); backdrop-filter: none; -webkit-backdrop-filter: none; } .rr-nav { top: 0; bottom: 0; height: 100vh; height: 100dvh; max-height: none; padding-top: 80px; padding-bottom: calc(90px + env(safe-area-inset-bottom)); z-index: 70; } .rr-nav .rr-menu { flex-wrap: nowrap; } .admin-bar .rr-nav { padding-top: 110px; } .rr-burger { z-index: 75; } .rr-nav-open .rr-burger { background: var(--rr-soft); color: var(--rr-primary); } .rr-nav::before { content: 'منو'; position: absolute; top: 24px; right: 70px; font-weight: 900; font-size: 18px; color: var(--rr-primary); } } /* نام انگلیسی کانال */ .rr-slug-field > span { font-weight: 700; font-size: 13px; } .rr-slug-box { display: flex; align-items: stretch; border: 1.5px solid var(--rr-line); border-radius: 12px; overflow: hidden; background: var(--rr-surface); transition: border-color .2s, box-shadow .2s; } .rr-slug-box:focus-within { border-color: var(--rr-primary2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rr-primary2) 18%, transparent); } .rr-slug-pre { display: flex; align-items: center; padding: 0 12px; background: var(--rr-soft); color: var(--rr-muted); font-size: 13.5px; white-space: nowrap; border-right: 1.5px solid var(--rr-line); max-width: 55%; overflow: hidden; text-overflow: ellipsis; } .rr-slug-box input { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; padding: 12px; font-size: 15px; font-weight: 700; color: var(--rr-primary); background: transparent; outline: 0; } .rr-slug-msg { font-size: 12.5px; color: var(--rr-muted); font-weight: 400; } .rr-slug-msg.is-ok { color: var(--rr-primary2); font-weight: 700; } .rr-slug-msg.is-err { color: #C0392B; font-weight: 700; } @media (max-width: 720px) { .rr-slug-pre { font-size: 12px; padding: 0 8px; max-width: 58%; } } /* ۱.۲.۰ — دکمه ذخیره کنار نام انگلیسی کانال */ .rr-slug-save { flex: none; display: inline-flex; align-items: center; gap: 5px; margin: 5px; padding: 0 14px; border: 0; border-radius: 9px; background: var(--rr-primary); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; } .rr-slug-save:hover { background: var(--rr-primary2); } .rr-slug-save[hidden] { display: none; } .rr-ch-link-txt input { direction: ltr; text-align: left; text-overflow: ellipsis; } /* ============ ۲۴. نسخه ۱.۲.۲: کارت‌های کوچک‌تر، ارسال‌کننده، تیک تأیید ============ */ .rr-grid-cards { gap: 16px; } .rr-card { container-type: inline-size; border-radius: 14px; } .rr-card-body { padding: 10px 11px 12px; } .rr-card-title { font-size: 14px; } .rr-card-sub { font-size: 12px; margin-bottom: 8px; } /* کارت‌های باریک (۵ تا ۸ در ردیف) جمع‌وجورتر می‌شوند */ @container (max-width: 215px) { .rr-card-body { padding: 8px 9px 10px; } .rr-card-title { font-size: 13.5px; } .rr-card-sub { font-size: 11.5px; margin-bottom: 7px; } .rr-mini { gap: 5px; } .rr-mini-play { width: 32px; height: 32px; } .rr-mini-play svg { width: 14px; height: 14px; } .rr-mini-add { width: 26px; height: 26px; } .rr-mini-add svg { width: 15px; height: 15px; } .rr-mini-line { height: 5px; } .rr-card-dur { font-size: 11px; padding: 0 7px; bottom: 6px; left: 6px; } .rr-card-type { font-size: 10.5px; padding: 1px 7px; top: 6px; right: 6px; } } @container (max-width: 170px) { .rr-mini-add[data-rr-pl] { display: none; } .rr-card-by-name { max-width: 64px; } } /* نام و عکس ارسال‌کننده: پایین سمت راست کاور */ .rr-card-by { position: absolute; right: 7px; bottom: 7px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 64px); padding: 2px 8px 2px 3px; border-radius: 999px; background: rgba(8, 24, 14, .62); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1.6; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); transition: background .2s, transform .15s; } .rr-card-by:hover { background: var(--rr-primary); color: #fff; transform: translateY(-1px); } .rr-card-by-av { width: 20px !important; height: 20px !important; border-radius: 50%; object-fit: cover; flex: none; font-size: 10px !important; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8); } .rr-card-by-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rr-card-by .rr-badge-v { margin: 0; flex: none; } /* تیک آبی و طلایی */ .rr-badge-v { display: inline-flex; vertical-align: -3px; margin-inline-start: 5px; line-height: 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .15)); } .rr-badge-v svg { display: block; } .rr-channel-info h1 .rr-badge-v { vertical-align: -2px; margin-inline-start: 8px; } .rr-ch-name .rr-badge-v { vertical-align: -3px; } .rr-ch-name { display: flex; align-items: center; justify-content: center; } .rr-ch-name a { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* دکمه «نمایش همه» سطرها */ .rr-more-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 9px; border: 1.5px solid var(--rr-line); background: var(--rr-surface); color: var(--rr-primary); font-weight: 700; font-size: 13px; transition: .2s; } .rr-more-btn:hover { background: var(--rr-primary); color: #fff; border-color: var(--rr-primary); } .rr-more-btn .rr-i { transform: scaleX(-1); } /* تعداد ستون‌ها در اندازه‌های مختلف صفحه */ @media (max-width: 1100px) { .rr-grid-cards.rr-cols-6, .rr-grid-cards.rr-cols-7, .rr-grid-cards.rr-cols-8 { --cols: 5 !important; } .rr-grid-cards.rr-cols-5 { --cols: 4 !important; } .rr-grid-cards.rr-cols-4 { --cols: 4 !important; } } @media (max-width: 900px) { .rr-grid-cards[class*="rr-cols-"] { --cols: 4 !important; } .rr-grid-cards.rr-cols-3 { --cols: 3 !important; } } @media (max-width: 720px) { .rr-grid-cards[class*="rr-cols-"] { --cols: 3 !important; gap: 10px; } .rr-grid-cards.rr-scroll-sm > .rr-card { flex: 0 0 40%; } } @media (max-width: 520px) { .rr-grid-cards[class*="rr-cols-"] { --cols: 2 !important; } .rr-grid-cards.rr-scroll-sm > .rr-card { flex: 0 0 44%; } } /* ============ ۲۵. نسخه ۱.۲.۳ ============ */ .rr-footer-wave { display: none !important; } .rr-footer { margin-top: 48px; } .rr-eq-mobile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 13px; font-weight: 700; cursor: pointer; } .rr-eq-mobile input { width: 17px; height: 17px; accent-color: var(--rr-accent); } .rr-eq-mobile small { flex-basis: 100%; font-weight: 400; opacity: .7; font-size: 11.5px; } .rr-up-rights a { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; } /* ============ ۲۶. چند دامنه و آمار همکاری (۱.۲.۴) ============ */ .rr-powered a { color: var(--rr-accent); font-weight: 700; } .rr-partner-box h2 a { color: var(--rr-primary); } .rr-partner-days .rr-tr { display: grid; grid-template-columns: 1.2fr 1fr 1fr .8fr; gap: 10px; font-size: 13.5px; } .rr-partner-days .rr-th { font-weight: 900; background: var(--rr-soft); } .rr-partner-days .rr-tr > span { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; } .rr-pbar { display: inline-block; height: 8px; min-width: 3px; max-width: 70%; border-radius: 4px; background: var(--rr-primary2); opacity: .75; } .rr-pbar.is-p { background: var(--rr-accent); } @media (max-width: 720px) { .rr-partner-days .rr-tr { grid-template-columns: 1.3fr 1fr 1fr .7fr; font-size: 12px; gap: 6px; } .rr-partner-box .rr-stat:nth-child(n+4) { display: flex; } .rr-partner-box .rr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }