MMD
2747f9d4bb
The PM panel (PmPanelPage -> iframe /pm/) needs the project-management platform served at /pm/ on the ERP domain. Source: org repo Aramesh/PM, branch feature/project-management-platform. Update via: git subtree pull --prefix=pm aramesh-pm feature/project-management-platform --squash
91 lines
3.3 KiB
CSS
91 lines
3.3 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--font-sans: "Vazirmatn", "Tahoma", ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
html {
|
|
font-family: "Vazirmatn", "Tahoma", ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-slate-200);
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
/* اسلایدر پیشرفت کمی بلندتر برای لمس راحت */
|
|
input[type="range"] {
|
|
height: 1.75rem;
|
|
}
|
|
|
|
/* ---- اسلایدر زوم گانت (عمودی) ------------------------------------------
|
|
قاعدهٔ بالا height همهٔ اسلایدرها را ۱.۷۵rem می‌کند و اسلایدر عمودی را به یک
|
|
نوار خیلی کوتاه تبدیل می‌کند؛ پس ارتفاع و ریل اینجا صریح تعیین می‌شود.
|
|
|
|
نکتهٔ وسط‌چینی دستگیره: در اسلایدر عمودی، محور «عرض» برای دستگیره همان
|
|
محور بلوکی است. پس برای این‌که دایره روی ریل وسط بنشیند باید هم عرض ریل و
|
|
هم ضخامت دستگیره صریح تعیین شوند و دستگیره با margin در محور بلوکی
|
|
وسط‌چین شود. اگر این‌ها را به مرورگر بسپاریم، دستگیره یک‌طرف ریل می‌افتد. */
|
|
input[type="range"].zoom-range {
|
|
--zoom-track: 0.5rem; /* عرض ریل */
|
|
--zoom-thumb: 1.375rem; /* قطر دایره */
|
|
--zoom-shift: calc((var(--zoom-thumb) - var(--zoom-track)) / 2);
|
|
|
|
height: 8rem;
|
|
width: var(--zoom-thumb); /* جا برای دایره؛ ریل باریک‌تر است */
|
|
writing-mode: vertical-lr;
|
|
direction: rtl;
|
|
accent-color: var(--color-sky-600);
|
|
background: transparent;
|
|
/* خود عنصر نباید روی محور بلوکی padding داشته باشد تا جمع عرض‌ها دقیق بماند */
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
/* ریل: دقیقاً وسط عرض عنصر */
|
|
input[type="range"].zoom-range::-webkit-slider-runnable-track {
|
|
width: var(--zoom-track);
|
|
margin-inline: auto;
|
|
border-radius: 9999px;
|
|
background: var(--color-slate-200);
|
|
}
|
|
|
|
/* دستگیره: وسط‌چین روی ریل. مرورگر دستگیره را نسبت به لبهٔ ریل می‌چسباند،
|
|
پس به اندازهٔ نصف اختلاف، به سمت داخل کشیده می‌شود. */
|
|
input[type="range"].zoom-range::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
box-sizing: border-box;
|
|
width: var(--zoom-thumb);
|
|
height: var(--zoom-thumb);
|
|
margin-block-start: calc(var(--zoom-shift) * 1);
|
|
margin-inline-start: calc(var(--zoom-shift) * 1);
|
|
border-radius: 9999px;
|
|
background: var(--color-sky-600);
|
|
border: 3px solid #fff;
|
|
box-shadow: 0 1px 4px rgb(15 23 42 / 0.35);
|
|
cursor: grab;
|
|
}
|
|
|
|
input[type="range"].zoom-range::-webkit-slider-thumb:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
input[type="range"].zoom-range::-moz-range-track {
|
|
width: var(--zoom-track);
|
|
border-radius: 9999px;
|
|
background: var(--color-slate-200);
|
|
}
|
|
|
|
input[type="range"].zoom-range::-moz-range-thumb {
|
|
box-sizing: border-box;
|
|
width: var(--zoom-thumb);
|
|
height: var(--zoom-thumb);
|
|
margin-inline-start: calc(var(--zoom-shift) * -1);
|
|
border-radius: 9999px;
|
|
background: var(--color-sky-600);
|
|
border: 3px solid #fff;
|
|
box-shadow: 0 1px 4px rgb(15 23 42 / 0.35);
|
|
cursor: grab;
|
|
}
|