hamedandClaude Opus 5
51c21938eb
components/appointment/ had every colour hard-coded, so the flow rendered identically in either theme even after the wiring was fixed. It now reads from CSS custom properties. These are not new colours. The :root values are byte-for-byte the hex codes that were already in the components — twenty-one files, mapped one to one — so light mode is unchanged. The dark values are derived from those same colours: surfaces and borders darkened, text inverted, and the two brand colours (the indigo and the orange) lightened rather than replaced, because both lose contrast against a dark surface at their original values. Verified in a headless browser with prefers-color-scheme forced dark: data-theme lands on <html> and --ap-surface resolves to #1b1b20 rather than white. Six one-off colours remain hard-coded — a success green, an error red and similar — each used exactly once and none of them a surface. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
1033 lines
21 KiB
CSS
1033 lines
21 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Font Vazir */
|
|
|
|
@font-face {
|
|
font-family: vazir;
|
|
src: url(/fonts/vazir/Vazirmatn-RD-FD-Thin.ttf);
|
|
font-weight: 100;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: vazir;
|
|
src: url(/fonts/vazir/Vazirmatn-RD-FD-ExtraLight.ttf);
|
|
font-weight: 200;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: vazir;
|
|
src: url(/fonts/vazir/Vazirmatn-RD-FD-Light.ttf);
|
|
font-weight: 300;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: vazir;
|
|
src: url(/fonts/vazir/Vazirmatn-RD-FD-Regular.ttf);
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: vazir;
|
|
src: url(/fonts/vazir/Vazirmatn-RD-FD-Medium.ttf);
|
|
font-weight: 500;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: vazir;
|
|
src: url(/fonts/vazir/Vazirmatn-RD-FD-SemiBold.ttf);
|
|
font-weight: 600;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: vazir;
|
|
src: url(/fonts/vazir/Vazirmatn-RD-FD-Bold.ttf);
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: vazir;
|
|
src: url(/fonts/vazir/Vazirmatn-RD-FD-ExtraBold.ttf);
|
|
font-weight: 800;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: vazir;
|
|
src: url(/fonts/vazir/Vazirmatn-RD-FD-Black.ttf);
|
|
font-weight: 900;
|
|
font-display: swap;
|
|
}
|
|
|
|
body {
|
|
font-family: vazir;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: #fafafa;
|
|
}
|
|
|
|
|
|
/* ── توکنهای جریان رزرو ──────────────────────────────────────────────────
|
|
*
|
|
* جریان رزرو رنگهایش را hard-code داشت، پس در دارکمود دقیقاً همان سفید میماند.
|
|
* اینها **رنگ تازه نیستند**: مقادیر روشن عیناً همان چیزی است که تا امروز بود، و
|
|
* نسخهٔ تیره از همانها مشتق شده. طراحی تازهای اینجا اختراع نشده.
|
|
*/
|
|
:root {
|
|
--ap-surface: #ffffff;
|
|
--ap-surface-2: #fafafa;
|
|
--ap-surface-3: #f5f5f5;
|
|
--ap-border: #efefef;
|
|
--ap-border-2: #d7d7d7;
|
|
--ap-heading: #2f2f2f;
|
|
--ap-text: #3b3b3b;
|
|
--ap-text-2: #616161;
|
|
--ap-text-3: #7a7a7a;
|
|
--ap-text-4: #9b9b9b;
|
|
--ap-muted: #525252;
|
|
--ap-primary: #5559ce;
|
|
--ap-accent: #f17732;
|
|
--ap-accent-strong: #b4541f;
|
|
--ap-danger: #e0383b;
|
|
--ap-danger-bg: #fdeeee;
|
|
--ap-danger-border: #f3c0c1;
|
|
--ap-warning: #f4b740;
|
|
--ap-warning-bg: #fff8e8;
|
|
--ap-warning-text: #8a6100;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--ap-surface: #1b1b20;
|
|
--ap-surface-2: #232329;
|
|
--ap-surface-3: #2a2a31;
|
|
--ap-border: #2e2e36;
|
|
--ap-border-2: #3a3a44;
|
|
--ap-heading: #f0f0f2;
|
|
--ap-text: #e8e8ea;
|
|
--ap-text-2: #b8b8be;
|
|
--ap-text-3: #98989f;
|
|
--ap-text-4: #82828a;
|
|
--ap-muted: #c9c9cf;
|
|
/* بنفش و نارنجی روی زمینهٔ تیره کمکنتراستاند؛ کمی روشنتر شدهاند نه عوض. */
|
|
--ap-primary: #8a8de6;
|
|
--ap-accent: #ff9152;
|
|
--ap-accent-strong: #ffb184;
|
|
--ap-danger: #ff6b6e;
|
|
--ap-danger-bg: #3a1f20;
|
|
--ap-danger-border: #5a2e30;
|
|
--ap-warning: #ffca5c;
|
|
--ap-warning-bg: #33290f;
|
|
--ap-warning-text: #ffd98a;
|
|
}
|
|
|
|
/* transition-colors only on theme-sensitive elements, not every DOM node */
|
|
.dark,
|
|
[data-theme] {
|
|
@apply transition-colors duration-500;
|
|
}
|
|
|
|
/* Scroll */
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 7px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
height: 50px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #c1c1c1;
|
|
height: 50px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
|
|
.auto-complete-selector .MuiInputBase-root svg path {
|
|
stroke: #525252 !important;
|
|
}
|
|
|
|
.dark .auto-complete-selector .MuiInputBase-root svg path {
|
|
stroke: #a1a1a1 !important;
|
|
}
|
|
|
|
.bg-border-t-gradient-sign {
|
|
background: linear-gradient(90deg, #e5e5e5 0%, #bababa 48.5%, #e5e5e5 100%);
|
|
}
|
|
|
|
.bg-banner-home {
|
|
position: relative;
|
|
}
|
|
|
|
.bg-banner-footer {
|
|
background: url(../public/assets/images/banner-footer.png);
|
|
}
|
|
|
|
.bg-banner-about {
|
|
background: url(../public/assets/images/banner-about.png);
|
|
}
|
|
|
|
.bg-head-dashboard {
|
|
background: url(../public/assets/images/bg-head-dashboard.png);
|
|
}
|
|
|
|
.bg-banner-home::after,
|
|
.bg-banner-stroke::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 40%;
|
|
background: url(../public/assets/images/banner-register.png);
|
|
background-size: cover !important;
|
|
background-repeat: no-repeat !important;
|
|
background-position: center !important;
|
|
z-index: -10;
|
|
}
|
|
|
|
.bg-banner-register {
|
|
background: url(../public/assets/images/banner-register.png);
|
|
}
|
|
|
|
.animate-open {
|
|
animation: openx;
|
|
animation-duration: 2s;
|
|
}
|
|
|
|
.hover-mode-item-speciality:hover p:first-child {
|
|
color: #fafafa;
|
|
}
|
|
|
|
.hover-mode-item-speciality:hover p:last-child {
|
|
color: #efefef;
|
|
}
|
|
|
|
.cover-head-blogs {
|
|
background: linear-gradient(180deg,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(0, 0, 0, 0.07) 31.47%,
|
|
rgba(0, 0, 0, 0.31) 59.72%,
|
|
rgba(0, 0, 0, 0.7) 89.39%);
|
|
border-radius: 16px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cover-head-blogs img {
|
|
width: 100%;
|
|
}
|
|
|
|
.cover-head-blogs p {
|
|
position: absolute;
|
|
bottom: 32px;
|
|
color: #fafafa;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.MuiFormControl-root .MuiInputBase-root .MuiInputBase-input {
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
@keyframes openx {
|
|
0% {
|
|
width: 0;
|
|
}
|
|
|
|
100% {
|
|
width: 85%;
|
|
}
|
|
}
|
|
|
|
.padding-responsive {
|
|
max-width: 1440px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
}
|
|
|
|
.hover-rotate-icon:hover svg {
|
|
transform: rotateY(360deg);
|
|
transition: 0.5s all;
|
|
}
|
|
|
|
.bg-head-menu {
|
|
background: url(../public/assets/images/bg-head-menu.png);
|
|
}
|
|
|
|
.w-full-icon svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.hover-sidebar:hover .text-sidebar {
|
|
opacity: 100;
|
|
}
|
|
|
|
.hover-sidebar:hover .logo-sidebar {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.hover-sidebar .logout-btn {
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.res-field-account .MuiInputBase-input.MuiOutlinedInput-input {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.MuiModal-root .sm-modal:nth-child(3) {
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
}
|
|
|
|
/* Hidden Scroll */
|
|
|
|
.MuiPaper-root,
|
|
.MuiTableContainer-root {
|
|
box-shadow: 0px 0px 18px 0px rgba(187, 187, 187, 0.25) !important;
|
|
border-radius: 4px !important;
|
|
border: 1px solid var(--colors-gray-50, #efefef) !important;
|
|
background: var(--colors-white, #fff) !important;
|
|
}
|
|
|
|
.hidden-scroll::-webkit-scrollbar-thumb,
|
|
.MuiTabs-scroller::-webkit-scrollbar-thumb,
|
|
.MuiTableContainer-root::-webkit-scrollbar-thumb {
|
|
background: transparent;
|
|
}
|
|
|
|
.hidden-scroll::-webkit-scrollbar,
|
|
.MuiTabs-scroller::-webkit-scrollbar,
|
|
.MuiTableContainer-root::-webkit-scrollbar {
|
|
height: 0;
|
|
}
|
|
|
|
.comment-list::-webkit-scrollbar {
|
|
height: 10px;
|
|
}
|
|
|
|
.opacity-page {
|
|
animation: loadPageOpacity;
|
|
animation-duration: 1s;
|
|
}
|
|
|
|
.retry-icon svg {
|
|
animation: rotate 1s;
|
|
}
|
|
|
|
.table-shadow-none {
|
|
box-shadow: none !important;
|
|
border-radius: 12px !important;
|
|
}
|
|
|
|
.table-rounded-8 .table-shadow-none {
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.w-full-content .content-text-panel {
|
|
width: 100%;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from {
|
|
rotate: 90;
|
|
}
|
|
|
|
to {
|
|
rotate: -360deg;
|
|
}
|
|
}
|
|
|
|
@keyframes loadPageOpacity {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.padding-responsive {
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.padding-responsive {
|
|
padding-left: 52px;
|
|
padding-right: 52px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.padding-responsive {
|
|
padding-left: 80px;
|
|
padding-right: 80px;
|
|
}
|
|
|
|
.MuiFormControl-root .MuiInputBase-root .MuiInputBase-input {
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
.MuiModal-root .MuiBox-root {
|
|
max-height: calc(100vh - 48px) !important;
|
|
overflow: auto !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.padding-responsive {
|
|
padding-left: 108px;
|
|
padding-right: 108px;
|
|
}
|
|
|
|
.MuiFormControl-root .MuiInputBase-root .MuiInputBase-input {
|
|
font-size: 16px !important;
|
|
}
|
|
}
|
|
|
|
/* Date Picker Style */
|
|
|
|
.custom-datepicker .panel-jalaali,
|
|
.custom-datepicker .panel-jalaali .panel-header-inner,
|
|
.custom-datepicker .panel-jalaali .day-label-bar,
|
|
.custom-datepicker .panel-jalaali .days-body {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.custom-datepicker .panel-jalaali .day-label-bar-inner-rtl {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: repeat(7, minmax(14.28%, 38px));
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.custom-datepicker .panel-jalaali .day-label-bar-inner-rtl .day-label-item {
|
|
width: 100%;
|
|
}
|
|
|
|
.custom-datepicker .panel-jalaali .days-body {
|
|
grid-template-columns: repeat(7, minmax(14.28%, 38px));
|
|
}
|
|
|
|
.panel-elevation {
|
|
box-shadow: none !important;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
.icon-keyboard_double_arrow_right,
|
|
.icon-keyboard_double_arrow_left {
|
|
color: transparent !important;
|
|
}
|
|
|
|
.icon-keyboard_double_arrow_right::before,
|
|
.icon-keyboard_double_arrow_left::before {
|
|
background: url(../public/assets/icons/double-right.svg);
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.icon-chevron-right::before,
|
|
.icon-chevron-left::before {
|
|
content: "" !important;
|
|
background: url(../public/assets/icons/arrow-right.svg);
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.icon-chevron-left::before,
|
|
.icon-keyboard_double_arrow_left::before {
|
|
rotate: 180deg;
|
|
}
|
|
|
|
.icon-left-datepicker {
|
|
rotate: 180deg;
|
|
}
|
|
|
|
.panel-jalaali * {
|
|
transition: 0.1s ease !important;
|
|
}
|
|
|
|
.panel-date-holder-item span {
|
|
font-size: 18px !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
.panel-date-holder-item span:hover {
|
|
color: #ff8848 !important;
|
|
}
|
|
|
|
.year-item-selected,
|
|
.month-item-selected {
|
|
background: #ff8848 !important;
|
|
border-radius: 3px !important;
|
|
}
|
|
|
|
.panel-header-rtl {
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
.day-label-bar-inner-rtl div {
|
|
color: #6c757d !important;
|
|
}
|
|
|
|
.panel-jalaali .days-body .not-current {
|
|
display: none !important;
|
|
}
|
|
|
|
.active-today .day-item-outer .today {
|
|
background: #5559ce !important;
|
|
}
|
|
|
|
.active-today .panel-jalaali .day-item-outer .today .day-span-text {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.panel-jalaali .days-body .day.hovered span {
|
|
color: #343a40 !important;
|
|
}
|
|
|
|
.panel-jalaali .days-body .day.weekend-day span {
|
|
color: #b71232 !important;
|
|
}
|
|
|
|
.panel-jalaali .today,
|
|
.panel-jalaali .highlight {
|
|
border-radius: 50% !important;
|
|
}
|
|
|
|
.panel-jalaali .today {
|
|
border: 1px solid #ff8848 !important;
|
|
}
|
|
|
|
.panel-jalaali .highlight {
|
|
background: #ff975d !important;
|
|
}
|
|
|
|
.panel-jalaali .highlight {
|
|
background: #5559ce !important;
|
|
}
|
|
|
|
.panel-jalaali .panel-footer-wrapper,
|
|
.panel-jalaali .panel-footer-rtl {
|
|
display: none !important;
|
|
}
|
|
|
|
.day.hovered.today {
|
|
border: 1px solid #f79463;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.day-label-bar-inner-rtl {
|
|
background: #fff !important;
|
|
}
|
|
|
|
.day-item-outer .day-item-chain .day {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.panel-jalaali .today {
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
.radio-mui * {
|
|
transition: 0.1s ease !important;
|
|
}
|
|
|
|
.dark .MuiTableContainer-root {
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.dark .MuiPagination-root .MuiPagination-ul .MuiButtonBase-root,
|
|
.dark .MuiPagination-root .MuiPagination-ul .MuiPaginationItem-root {
|
|
color: #a1a1a1 !important;
|
|
}
|
|
|
|
.dark .MuiTableContainer-root {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.dark .MuiSvgIcon-root {
|
|
color: #a1a1a1 !important;
|
|
}
|
|
|
|
.dark .Mui-checked .MuiSvgIcon-root {
|
|
fill: #5559ce !important;
|
|
}
|
|
|
|
.dark .table-profile-page .MuiTableContainer-root {
|
|
border-bottom: 1px solid #343645 !important;
|
|
}
|
|
|
|
.table-profile-page .MuiTableContainer-root {
|
|
border-bottom: 1px solid #dbdbdb !important;
|
|
}
|
|
|
|
.dark .table-profile-page .MuiTableContainer-root {
|
|
border-bottom: 1px solid #343645 !important;
|
|
}
|
|
|
|
.dark .table-profile-page .MuiTableRow-root th {
|
|
border: 1px solid #343645 !important;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
|
|
.day-label-bar-inner-rtl,
|
|
.panel-jalaali,
|
|
.panel-header-rtl,
|
|
.days-body {
|
|
background: #fff !important;
|
|
}
|
|
}
|
|
|
|
/* Dark Style */
|
|
|
|
.dark tbody .MuiTableCell-root {
|
|
background: #222433;
|
|
border-color: #343645 !important;
|
|
}
|
|
|
|
.dark .MuiInputBase-root .MuiOutlinedInput-notchedOutline:hover,
|
|
.dark .MuiInputBase-root .MuiOutlinedInput-notchedOutline {
|
|
border-color: #35343d !important;
|
|
}
|
|
|
|
.dark .Mui-focused .MuiOutlinedInput-notchedOutline {
|
|
border-color: #5559ce !important;
|
|
}
|
|
|
|
.dark .MuiList-root {
|
|
background: #1f1d2b !important;
|
|
color: #a1a1a1 !important;
|
|
}
|
|
|
|
.dark .MuiOutlinedInput-notchedOutline {
|
|
border-color: #343645 !important;
|
|
}
|
|
|
|
.dark .MuiList-root.MuiList-padding.MuiMultiSectionDigitalClockSection-root::-webkit-scrollbar-track {
|
|
background: #1f1d2b;
|
|
height: 50px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.dark .MuiList-root.MuiList-padding.MuiMultiSectionDigitalClockSection-root::-webkit-scrollbar-thumb {
|
|
background: #222433;
|
|
height: 50px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.dark .custom-switch .MuiSwitch-track {
|
|
border: 1px solid #343645 !important;
|
|
}
|
|
|
|
.dark .custom-switch .MuiSwitch-thumb::before {
|
|
background: #d7d8ed;
|
|
}
|
|
|
|
/* End Of Dark Style */
|
|
|
|
/* Dark Date Picker */
|
|
|
|
.dark .panel-elevation,
|
|
.dark .panel-header-rtl,
|
|
.dark .day-label-bar-inner-rtl,
|
|
.dark .days-body {
|
|
background: #222433 !important;
|
|
transition: 0.5s ease-in !important;
|
|
}
|
|
|
|
.dark .icon-chevron-right::before,
|
|
.dark .icon-chevron-left::before {
|
|
background: url(../public/assets/icons/arrow-right-light.svg) !important;
|
|
}
|
|
|
|
.dark .panel-jalaali .days-body .day.hovered:not(.weekend-day) span {
|
|
color: #a1a1a1 !important;
|
|
}
|
|
|
|
.dark .panel-jalaali .days-body .day.hovered.today:not(.weekend-day) span {
|
|
color: #d7d8ed !important;
|
|
}
|
|
|
|
.dark .MuiPaper-root {
|
|
box-shadow: 0px 4px 25px 10px #1f1d2b !important;
|
|
background: #222433 !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.dark .panel-header-item-text,
|
|
.dark .panel-header-year-picker span {
|
|
color: #a1a1a1 !important;
|
|
}
|
|
|
|
.dark .panel-date-holder-item span:hover {
|
|
color: #c7cef4 !important;
|
|
}
|
|
|
|
.dark .panel-jalaali .hovered:not(.disabled):hover {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.dark .panel-jalaali .days-body .day.hovered:not(.weekend-day) span:hover {
|
|
color: #c7cef4 !important;
|
|
}
|
|
|
|
.dark .panel-jalaali .year-item,
|
|
.dark .panel-jalaali .month-item {
|
|
color: #a1a1a1;
|
|
}
|
|
|
|
.dark .panel-jalaali .year-item:hover,
|
|
.dark .panel-jalaali .month-item:hover {
|
|
background: rgba(199, 206, 244, 0.1) !important;
|
|
}
|
|
|
|
.dark .panel-jalaali .year-item-selected,
|
|
.dark .panel-jalaali .month-item-selected {
|
|
background: #5559ce !important;
|
|
color: #fafafa;
|
|
}
|
|
|
|
.MuiPaper-root .MuiList-root .MuiListSubheader-root {
|
|
background: #5559ce;
|
|
}
|
|
|
|
.panel-jalaali {
|
|
width: 464px !important;
|
|
}
|
|
|
|
.sm-datepicker .panel-jalaali {
|
|
width: 300px !important;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.panel-jalaali {
|
|
width: 300px !important;
|
|
}
|
|
}
|
|
|
|
.day-label-bar,
|
|
.panel-header-inner,
|
|
.days-body {
|
|
max-width: 100% !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.years-body-rtl,
|
|
.months-body-rtl {
|
|
min-width: 100%;
|
|
grid-template-columns: repeat(3, minmax(33.33%, 100px)) !important;
|
|
}
|
|
|
|
.days-body {
|
|
width: 100%;
|
|
grid-template-columns: repeat(7, minmax(14.28%, 38px)) !important;
|
|
}
|
|
|
|
/* End Of Dark Date Picker */
|
|
|
|
/* End Date Picker Style */
|
|
|
|
.dark-active-icon svg path {
|
|
stroke: #5559ce !important;
|
|
fill: #5559ce !important;
|
|
}
|
|
|
|
.dark-deactive-icon svg path {
|
|
stroke: #a1a1a1 !important;
|
|
fill: #a1a1a1 !important;
|
|
}
|
|
|
|
.dark .MuiOutlinedInput-notchedOutline {
|
|
border-color: #343645 !important;
|
|
}
|
|
|
|
.dark .Mui-disabled,
|
|
.dark .MuiInputBase-input {
|
|
transition: 0.3s all;
|
|
-webkit-text-fill-color: #a1a1a1 !important;
|
|
}
|
|
|
|
.dark .Mui-disabled {
|
|
-webkit-text-fill-color: rgba(161, 161, 161, 0.6) !important;
|
|
}
|
|
|
|
.dark .MuiTabs-scroller,
|
|
.dark .MuiTabs-flexContainer {
|
|
border-bottom-color: #343645 !important;
|
|
}
|
|
|
|
.dark .MuiTabs-root .MuiButtonBase-root {
|
|
font-weight: 400 !important;
|
|
color: #a1a1a1 !important;
|
|
}
|
|
|
|
.dark .field-date-picker svg path {
|
|
fill: #a1a1a1;
|
|
}
|
|
|
|
.jalali-dashboard .panel-elevation,
|
|
.jalali-dashboard .panel-header-rtl,
|
|
.jalali-dashboard .day-label-bar-inner-rtl,
|
|
.jalali-dashboard .days-body {
|
|
background: transparent !important;
|
|
transition: 0.5s ease-in !important;
|
|
}
|
|
|
|
.dark .jalali-dashboard .panel-elevation,
|
|
.dark .jalali-dashboard .panel-header-rtl,
|
|
.dark .jalali-dashboard .day-label-bar-inner-rtl,
|
|
.dark .jalali-dashboard .days-body {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.dark .jalali-dashboard .day-label-item {
|
|
color: #A1A1A1 !important;
|
|
}
|
|
|
|
.dark .jalali-dashboard .days-body .day:not(.weekend-day) span {
|
|
color: #A1A1A1 !important;
|
|
}
|
|
|
|
.dark .jalali-dashboard .days-body .day.today:not(.weekend-day) {
|
|
background: #5559CE !important;
|
|
}
|
|
|
|
.dark .jalali-dashboard .days-body .day.today:not(.weekend-day) span {
|
|
color: #fafafa !important;
|
|
}
|
|
|
|
.dark .jalali-dashboard .days-body .day.weekend-day span {
|
|
color: #FF5450 !important;
|
|
}
|
|
|
|
/* Toastify */
|
|
|
|
.Toastify__toast {
|
|
padding: 12px 40px 12px 12px !important;
|
|
font-family: vazir !important;
|
|
}
|
|
|
|
.Toastify__toast .Toastify__toast-body {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.Toastify__toast--success {
|
|
background: #d1e7dd !important;
|
|
border: 1px solid #badbcc !important;
|
|
color: #0f5132 !important;
|
|
}
|
|
|
|
.Toastify__toast--success .Toastify__toast-icon svg path {
|
|
fill: #0f5132 !important;
|
|
}
|
|
|
|
.Toastify__toast--warning {
|
|
background: #fff5d4 !important;
|
|
border: 1px solid #ffecb5 !important;
|
|
color: #664d03 !important;
|
|
}
|
|
|
|
.Toastify__toast--warning .Toastify__toast-icon svg path {
|
|
fill: #664d03 !important;
|
|
}
|
|
|
|
.Toastify__toast--error {
|
|
background: #f9dcdf !important;
|
|
border: 1px solid #f5c2c7 !important;
|
|
color: #842029 !important;
|
|
}
|
|
|
|
.Toastify__toast--error .Toastify__toast-icon svg path {
|
|
fill: #842029 !important;
|
|
}
|
|
|
|
.Toastify__toast--info {
|
|
background: #d5f5fc !important;
|
|
border: 1px solid #b6effb !important;
|
|
color: #055160 !important;
|
|
}
|
|
|
|
.Toastify__toast--info .Toastify__toast-icon svg path {
|
|
fill: #055160 !important;
|
|
}
|
|
|
|
.Toastify__toast-container .Toastify__toast-icon {
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 16px;
|
|
}
|
|
|
|
/* End Of Toastify */
|
|
|
|
.text-item-head-white:hover .item-head {
|
|
color: #d7d8ed;
|
|
}
|
|
|
|
.bg-poster {
|
|
background-image: url(../public/assets/images/poster.png);
|
|
width: 100%;
|
|
height: 100%;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
.bg-stroke-circle {
|
|
background-image: url(../public/assets/images/stroke-circle.png);
|
|
background-size: cover;
|
|
}
|
|
|
|
.MuiButton-loading .MuiButton-loadingIndicator {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
.spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
/* date picker appointment */
|
|
|
|
.datePickerApt .first .panel-header-wrapper .center:first-child .iconItem:first-child,
|
|
.datePickerApt .first .panel-header-wrapper .center:last-child .iconItem:last-child,
|
|
.datePickerApt .second .panel-header-wrapper .center:first-child .iconItem:first-child,
|
|
.datePickerApt .second .panel-header-wrapper .center:last-child .iconItem:last-child {
|
|
display: none;
|
|
}
|
|
|
|
.datePickerApt #nextIconF,
|
|
.datePickerApt #prevIconS {
|
|
display: flex;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
|
|
.datePickerApt #nextIconF,
|
|
.datePickerApt #prevIconS {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
|
|
.datePickerApt #nextIconF,
|
|
.datePickerApt #prevIconS {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1280px) {
|
|
|
|
.datePickerApt #nextIconF,
|
|
.datePickerApt #prevIconS {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* end of date picker appointment */
|
|
|
|
.hover-item-clinic:hover h3 {
|
|
color: #f17732;
|
|
}
|
|
/* ── محتوای مقاله (خروجی CKEditor پنل ادمین) ──────────────────────────────
|
|
sanitizeHtml عمداً class و style را حذف میکند، پس استایل جدول/لیست/تیتر
|
|
باید از اینجا بیاید وگرنه محتوا لخت و بدون ساختار دیده میشود. */
|
|
.blog-content h2,
|
|
.blog-content h3,
|
|
.blog-content h4,
|
|
.blog-content h5 {
|
|
color: #3b3b3b;
|
|
font-weight: 700;
|
|
margin: 24px 0 12px;
|
|
line-height: 1.8;
|
|
}
|
|
.blog-content h2 { font-size: 20px; }
|
|
.blog-content h3 { font-size: 18px; }
|
|
.blog-content h4,
|
|
.blog-content h5 { font-size: 16px; }
|
|
.blog-content p { margin-bottom: 12px; }
|
|
.blog-content ul,
|
|
.blog-content ol {
|
|
margin: 12px 0;
|
|
padding-right: 22px;
|
|
}
|
|
.blog-content ul { list-style: disc; }
|
|
.blog-content ol { list-style: decimal; }
|
|
.blog-content li { margin-bottom: 6px; }
|
|
.blog-content a {
|
|
color: #5559ce;
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
}
|
|
.blog-content blockquote {
|
|
margin: 16px 0;
|
|
padding: 12px 16px;
|
|
border-right: 3px solid #f17732;
|
|
background: #fafafa;
|
|
border-radius: 8px;
|
|
color: #3b3b3b;
|
|
}
|
|
.blog-content figure { margin: 16px 0; }
|
|
.blog-content figcaption {
|
|
margin-top: 8px;
|
|
color: #9b9b9b;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
}
|
|
.blog-content img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
}
|
|
/* جدول روی موبایل نباید صفحه را افقی اسکرول کند. */
|
|
.blog-content figure.table,
|
|
.blog-content .table-wrapper {
|
|
overflow-x: auto;
|
|
}
|
|
.blog-content table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 16px 0;
|
|
font-size: 14px;
|
|
}
|
|
.blog-content :is(th, td) {
|
|
border: 1px solid #e5e5e5;
|
|
padding: 8px 12px;
|
|
text-align: right;
|
|
}
|
|
.blog-content th {
|
|
background: #f5f5f5;
|
|
font-weight: 700;
|
|
color: #3b3b3b;
|
|
}
|