443 lines
12 KiB
CSS
443 lines
12 KiB
CSS
/* @import url() FONT IMPORTS MUST ALWAYS BE AT THE VERY TOP OF THIS FILE, ABOVE THE TAILWIND IMPORTS — DO NOT DELETE THIS COMMENT */
|
|
|
|
/* CRITICAL: THE FOLLOWING TAILWIND IMPORTS MUST NEVER BE DELETED OR REORDERED — DO NOT DELETE THIS COMMENT */
|
|
@import 'tailwindcss/base';
|
|
@import 'tailwindcss/components';
|
|
@import 'tailwindcss/utilities';
|
|
|
|
/* END TAILWIND IMPORTS — ALL OTHER CSS MUST GO BELOW THIS LINE */
|
|
|
|
/* فونت سایت سلف‌هاست است (public/fonts) — هیچ وابستگی خارجی وجود ندارد.
|
|
Pinar فونت اصلی است (۵ وزن) و Vazirmatn به‌عنوان جایگزین پشتیبان می‌ماند.
|
|
نسخه انگلیسی از پشته فونت سیستمی لاتین استفاده می‌کند (Inter در صورت نصب بودن). */
|
|
@font-face {
|
|
font-family: 'Pinar';
|
|
src: url('/fonts/pinar/Pinar-Light.woff2') format('woff2'),
|
|
url('/fonts/pinar/Pinar-Light.ttf') format('truetype');
|
|
font-weight: 300;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Pinar';
|
|
src: url('/fonts/pinar/Pinar-Regular.woff2') format('woff2'),
|
|
url('/fonts/pinar/Pinar-Regular.ttf') format('truetype');
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Pinar';
|
|
src: url('/fonts/pinar/Pinar-Bold.woff2') format('woff2'),
|
|
url('/fonts/pinar/Pinar-Bold.ttf') format('truetype');
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Pinar';
|
|
src: url('/fonts/pinar/Pinar-ExtraBold.woff2') format('woff2'),
|
|
url('/fonts/pinar/Pinar-ExtraBold.ttf') format('truetype');
|
|
font-weight: 800;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Pinar';
|
|
src: url('/fonts/pinar/Pinar-Black.woff2') format('woff2'),
|
|
url('/fonts/pinar/Pinar-Black.ttf') format('truetype');
|
|
font-weight: 900;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Vazirmatn';
|
|
src: url('/fonts/Vazirmatn-Light.woff2') format('woff2');
|
|
font-weight: 300;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Vazirmatn';
|
|
src: url('/fonts/Vazirmatn-Regular.woff2') format('woff2');
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Vazirmatn';
|
|
src: url('/fonts/Vazirmatn-Bold.woff2') format('woff2');
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
}
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
body {
|
|
background-color: #27221c;
|
|
color: #f5f3ef;
|
|
font-family: 'Pinar', 'Vazirmatn', Tahoma, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
/* نسخه انگلیسی — فونت لاتین و تنوع‌سنجی (tracking) مناسب خط لاتین */
|
|
html[lang='en'] body {
|
|
font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
html[lang='en'] .article-body {
|
|
line-height: 1.8;
|
|
}
|
|
html[lang='en'] .article-body p {
|
|
margin-top: 1.25rem;
|
|
}
|
|
html[lang='en'] .article-body h2,
|
|
html[lang='en'] .article-body h3 {
|
|
line-height: 1.4;
|
|
}
|
|
::selection {
|
|
background-color: #d5874c;
|
|
color: #1e1a16;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
}
|
|
|
|
/* ---------- بدنه مقاله — رندر سند TipTap و ویرایشگر WYSIWYG ---------- */
|
|
.article-body {
|
|
line-height: 2.4;
|
|
word-wrap: break-word;
|
|
font-size: 14px; /* متن اصلی ۱۴ تنظیم شد */
|
|
}
|
|
.article-body p {
|
|
margin-top: 1.75rem;
|
|
color: rgba(245, 243, 239, 0.7);
|
|
}
|
|
.article-body > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
/* ---------- تایپوگرافی مقاله ----------
|
|
راست‌چین (فارسی): پایه ۱۴ / تیتر۱ ۱۸ / تیتر۲ ۱۶ / تیتر۳ ۱۴
|
|
چپ‌چین (انگلیسی): پایه ۱۲ / تیتر۱ ۱۶ / تیتر۲ ۱۴ / تیتر۳ ۱۲
|
|
جهت با data-dir روی پوسته ویرایشگر یا مقاله تعیین می‌شود. */
|
|
.article-body h1,
|
|
.article-body h2,
|
|
.article-body h3 {
|
|
color: #f5f3ef;
|
|
font-weight: 700;
|
|
margin-top: 3rem;
|
|
margin-bottom: 0.25rem;
|
|
line-height: 1.9;
|
|
/* فاصله از هدر چسبان هنگام پرش لنگرهای فهرست مطالب */
|
|
scroll-margin-top: 7rem;
|
|
}
|
|
.article-body h1 {
|
|
font-size: 18px;
|
|
}
|
|
.article-body h2 {
|
|
font-size: 16px;
|
|
padding-inline-start: 0.85rem;
|
|
border-inline-start: 3px solid #d5874c;
|
|
}
|
|
.article-body h3 {
|
|
font-size: 14px;
|
|
}
|
|
[data-dir='rtl'] .article-body {
|
|
direction: rtl;
|
|
text-align: right;
|
|
}
|
|
[data-dir='ltr'] .article-body {
|
|
direction: ltr;
|
|
text-align: left;
|
|
font-size: 12px;
|
|
}
|
|
[data-dir='ltr'] .article-body h1 {
|
|
font-size: 16px;
|
|
}
|
|
[data-dir='ltr'] .article-body h2 {
|
|
font-size: 14px;
|
|
}
|
|
[data-dir='ltr'] .article-body h3 {
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* ---------- تایپوگرافی دوزبانه (فارسی و لاتین در یک خط) ----------
|
|
متن لاتین همیشه ۲ پیکسل کوچک‌تر از متن فارسیِ همان بلوک است:
|
|
تیتر۱ ۱۸→۱۶، تیتر۲ ۱۶→۱۴، تیتر۳ و پاراگراف ۱۴→۱۲.
|
|
calc(1em - 2px) نسبت به اندازه همان بلوک حساب می‌شود، پس قاعده در همه سطح‌ها درست
|
|
می‌ماند و خط پایه هم جابه‌جا نمی‌شود (line-height نسبی است).
|
|
در مقاله انگلیسی (data-dir=ltr) پایه همان اندازه کوچک‌تر است و واژه‌های فارسی
|
|
۲ پیکسل بزرگ‌تر می‌شوند تا تفاضل همیشه ۲ پیکسل بماند. */
|
|
.article-body .latin,
|
|
.article-body .persian,
|
|
.article-body .english-text {
|
|
unicode-bidi: isolate;
|
|
}
|
|
|
|
.article-body .latin,
|
|
.article-body .english-text {
|
|
font-size: calc(1em - 2px);
|
|
}
|
|
|
|
.article-body .persian {
|
|
font-size: 1em;
|
|
}
|
|
|
|
[data-dir='ltr'] .article-body .latin,
|
|
[data-dir='ltr'] .article-body .english-text {
|
|
font-size: 1em;
|
|
}
|
|
|
|
[data-dir='ltr'] .article-body .persian {
|
|
font-size: calc(1em + 2px);
|
|
}
|
|
.article-body span[data-small="true"] {
|
|
font-size: 12px; /* مارک اختصاصی برای سایز ۱۲ - انگلیسی */
|
|
}
|
|
/* مارک «متن انگلیسی» ویرایشگر — چپ‌به‌راست و ۱۲ پیکسل بدون به‌هم‌زدن جهت متن فارسی */
|
|
.english-text {
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
/* اندازه از قواعد دوزبانه بالا می‌آید: ۲ پیکسل کوچک‌تر از متن فارسی همان بلوک */
|
|
}
|
|
.article-body ul,
|
|
.article-body ol {
|
|
margin-top: 1.5rem;
|
|
padding-inline-start: 1.5rem;
|
|
}
|
|
.article-body ul {
|
|
list-style: disc;
|
|
}
|
|
.article-body ol {
|
|
list-style: decimal;
|
|
}
|
|
.article-body li {
|
|
margin-top: 0.6rem;
|
|
color: rgba(245, 243, 239, 0.7);
|
|
}
|
|
.article-body li p {
|
|
margin-top: 0;
|
|
display: inline;
|
|
}
|
|
.article-body blockquote {
|
|
margin-top: 2rem;
|
|
border-inline-start: 3px solid #d5874c;
|
|
background: rgba(30, 26, 22, 0.5);
|
|
padding: 1rem 1.25rem;
|
|
font-style: normal;
|
|
color: rgba(245, 243, 239, 0.85);
|
|
}
|
|
.article-body blockquote p {
|
|
margin-top: 0;
|
|
color: inherit;
|
|
}
|
|
.article-body a {
|
|
color: #d5874c;
|
|
text-decoration: underline;
|
|
text-underline-offset: 4px;
|
|
}
|
|
.article-body img {
|
|
width: 100%;
|
|
margin-top: 2rem;
|
|
border: 1px solid rgba(245, 243, 239, 0.1);
|
|
object-fit: cover;
|
|
}
|
|
/* ---------- تصویر کپشن‌دار: <figure><img><figcaption> ---------- */
|
|
.article-body figure {
|
|
margin-top: 2rem;
|
|
}
|
|
.article-body figure img {
|
|
margin-top: 0;
|
|
}
|
|
.article-body figcaption {
|
|
margin-top: 0.7rem;
|
|
color: rgba(245, 243, 239, 0.5);
|
|
font-size: 0.85em;
|
|
line-height: 1.9;
|
|
text-align: center;
|
|
}
|
|
/* ویرایشگر: کپشن ورودی و دکمه حذف زیر تصویر */
|
|
[data-wysiwyg] .article-figure-node {
|
|
margin: 1.25rem 0;
|
|
}
|
|
[data-wysiwyg] .article-figure__caption {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-top: 0.6rem;
|
|
text-align: right;
|
|
}
|
|
[data-wysiwyg] .article-figure-node.is-selected .article-figure {
|
|
outline: 1px dashed rgba(213, 135, 76, 0.8);
|
|
outline-offset: 3px;
|
|
}
|
|
.article-body strong {
|
|
color: #f5f3ef;
|
|
font-weight: 700;
|
|
}
|
|
.article-body hr {
|
|
margin-top: 2.5rem;
|
|
border: 0;
|
|
height: 1px;
|
|
background: rgba(245, 243, 239, 0.12);
|
|
}
|
|
.article-body code {
|
|
background: rgba(30, 26, 22, 0.7);
|
|
padding: 0.15rem 0.45rem;
|
|
font-size: 0.85em;
|
|
}
|
|
.article-body pre {
|
|
background: rgba(30, 26, 22, 0.7);
|
|
padding: 1rem 1.25rem;
|
|
margin-top: 1.5rem;
|
|
overflow-x: auto;
|
|
direction: ltr;
|
|
text-align: left;
|
|
}
|
|
.article-body pre code {
|
|
background: transparent;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ---------- تقویم شمسی (react-multi-date-picker) — تم تیره با لهجه مسی ---------- */
|
|
.aramesh-datepicker.rmdp-wrapper {
|
|
width: max-content;
|
|
border: 1px solid rgba(245, 243, 239, 0.12);
|
|
border-radius: 0;
|
|
background-color: #1e1a16;
|
|
color: #f5f3ef;
|
|
box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.75);
|
|
}
|
|
.aramesh-datepicker .rmdp-calendar {
|
|
padding: 8px;
|
|
}
|
|
.aramesh-datepicker .rmdp-header-values {
|
|
color: #d5874c;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
.aramesh-datepicker .rmdp-arrow {
|
|
border-color: #d5874c;
|
|
}
|
|
.aramesh-datepicker .rmdp-arrow-container {
|
|
box-shadow: none;
|
|
}
|
|
.aramesh-datepicker .rmdp-arrow-container:hover {
|
|
background-color: rgba(213, 135, 76, 0.2);
|
|
box-shadow: none;
|
|
}
|
|
.aramesh-datepicker .rmdp-week-day {
|
|
color: rgba(245, 243, 239, 0.45);
|
|
font-size: 11px;
|
|
font-weight: 400;
|
|
}
|
|
.aramesh-datepicker .rmdp-day {
|
|
color: rgba(245, 243, 239, 0.85);
|
|
}
|
|
.aramesh-datepicker .rmdp-day span {
|
|
border-radius: 0;
|
|
}
|
|
.aramesh-datepicker .rmdp-day:hover:not(.rmdp-disabled):not(.rmdp-selected) span {
|
|
background-color: rgba(213, 135, 76, 0.16);
|
|
color: #d5874c;
|
|
}
|
|
.aramesh-datepicker .rmdp-day.rmdp-selected span:not(.highlight) {
|
|
background-color: #d5874c;
|
|
color: #1e1a16;
|
|
font-weight: 700;
|
|
box-shadow: none;
|
|
}
|
|
.aramesh-datepicker .rmdp-day.rmdp-today span {
|
|
background-color: rgba(213, 135, 76, 0.25);
|
|
color: #f5f3ef;
|
|
}
|
|
.aramesh-datepicker .rmdp-day.rmdp-deactive {
|
|
color: rgba(245, 243, 239, 0.22);
|
|
}
|
|
.aramesh-datepicker .rmdp-day.rmdp-disabled {
|
|
color: rgba(245, 243, 239, 0.12);
|
|
}
|
|
.aramesh-datepicker .rmdp-month-picker,
|
|
.aramesh-datepicker .rmdp-year-picker {
|
|
background-color: #1e1a16;
|
|
border-radius: 0;
|
|
}
|
|
.aramesh-datepicker .rmdp-panel {
|
|
background-color: #1e1a16;
|
|
}
|
|
.aramesh-datepicker .rmdp-panel-body li {
|
|
background-color: rgba(213, 135, 76, 0.15);
|
|
color: #f5f3ef;
|
|
box-shadow: none;
|
|
}
|
|
.aramesh-datepicker .rmdp-action-button {
|
|
color: #d5874c;
|
|
}
|
|
|
|
/* ---------- نقشه مپ‌لیبر — کنترل‌ها و پاپ‌آپ هم‌رنگ تم تیره ---------- */
|
|
.lux-map-popup .maplibregl-popup-content {
|
|
background: transparent;
|
|
padding: 0;
|
|
border-radius: 1rem;
|
|
box-shadow: none;
|
|
}
|
|
/* دم پاپ‌آپ — هم‌رنگ کارت شیشه‌ای */
|
|
.lux-map-popup .maplibregl-popup-tip {
|
|
border-top-color: #1e1a16;
|
|
}
|
|
.maplibregl-ctrl-group {
|
|
overflow: hidden;
|
|
border: 1px solid rgba(245, 243, 239, 0.14);
|
|
border-radius: 0.75rem !important;
|
|
background: rgba(30, 26, 22, 0.85) !important;
|
|
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
.maplibregl-ctrl-group button {
|
|
width: 34px;
|
|
height: 34px;
|
|
background-color: transparent !important;
|
|
}
|
|
.maplibregl-ctrl-group button:hover {
|
|
background-color: rgba(213, 135, 76, 0.16) !important;
|
|
}
|
|
.maplibregl-ctrl-group button + button {
|
|
border-top: 1px solid rgba(245, 243, 239, 0.12) !important;
|
|
}
|
|
/* آیکون‌های پیش‌فرض کنترل‌ها تیره‌اند — با اینورتر روشن می‌شوند */
|
|
.maplibregl-ctrl-group button .maplibregl-ctrl-icon {
|
|
filter: invert(0.92);
|
|
}
|
|
.maplibregl-ctrl-attrib.maplibregl-compact {
|
|
border-radius: 0.75rem;
|
|
background: rgba(30, 26, 22, 0.85);
|
|
color: rgba(245, 243, 239, 0.55);
|
|
font-size: 10px;
|
|
}
|
|
.maplibregl-ctrl-attrib a {
|
|
color: rgba(213, 135, 76, 0.9);
|
|
}
|
|
.maplibregl-ctrl-attrib-button {
|
|
filter: invert(0.92);
|
|
}
|
|
.maplibregl-ctrl-scale {
|
|
border-color: rgba(245, 243, 239, 0.35);
|
|
border-radius: 2px;
|
|
background: rgba(30, 26, 22, 0.7);
|
|
color: rgba(245, 243, 239, 0.6);
|
|
font-size: 10px;
|
|
}
|
|
|
|
/* ---------- ورود نرم کارت پاپ‌آپ و حالت تمام‌صفحه ---------- */
|
|
@keyframes luxPopupIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(6px) scale(0.98);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
@keyframes luxFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
} |