374 lines
8.5 KiB
SCSS
374 lines
8.5 KiB
SCSS
// /src/assets/styles/main.scss
|
|
|
|
@use '@fontsource/vazirmatn/400.css' as *;
|
|
@use '@fontsource/vazirmatn/500.css' as *;
|
|
@use '@fontsource/vazirmatn/700.css' as *;
|
|
|
|
@use './light-theme' as *;
|
|
@use './dark-theme' as *;
|
|
@use './rtl-overrides' as *;
|
|
|
|
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html, body {
|
|
font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
font-size: var(--app-font-size, 14px);
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
min-height: 100vh;
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
a {
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
&:hover {
|
|
color: var(--primary-color-hover);
|
|
}
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--text-muted);
|
|
border-radius: 3px;
|
|
&:hover {
|
|
background: var(--text-secondary);
|
|
}
|
|
}
|
|
|
|
/* ==========================================
|
|
Global Border Polish (Removing Harsh Outlines)
|
|
========================================== */
|
|
.border-color,
|
|
.border-1,
|
|
.border-top-1,
|
|
.border-bottom-1,
|
|
.border-left-1,
|
|
.border-right-1 {
|
|
border-color: var(--border-color) !important;
|
|
}
|
|
|
|
.surface-card,
|
|
.p-component,
|
|
.p-card,
|
|
.p-panel,
|
|
.p-datatable,
|
|
.p-datatable-header,
|
|
.p-datatable-thead > tr > th,
|
|
.p-datatable-tbody > tr > td,
|
|
.p-paginator,
|
|
.p-dialog,
|
|
.p-sidebar,
|
|
.p-menu,
|
|
.p-select,
|
|
.p-inputtext,
|
|
.p-button {
|
|
border-color: var(--border-color) !important;
|
|
}
|
|
|
|
/* ==========================================
|
|
Vue Persian Datetime Picker Styling & Theme
|
|
Theme & coloring rebuilt from scratch using CSS variables
|
|
========================================== */
|
|
.vpd-wrapper {
|
|
font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif !important;
|
|
|
|
.vpd-container {
|
|
border-radius: 16px !important;
|
|
overflow: hidden !important;
|
|
box-shadow: var(--shadow-lg) !important;
|
|
border: 1px solid var(--border-color) !important;
|
|
background-color: var(--surface-card) !important;
|
|
}
|
|
|
|
.vpd-header {
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover) 100%) !important;
|
|
color: #ffffff !important;
|
|
|
|
.vpd-year-label,
|
|
.vpd-year-label span {
|
|
color: rgba(255, 255, 255, 0.85) !important;
|
|
}
|
|
|
|
.vpd-date,
|
|
.vpd-date span {
|
|
color: #ffffff !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
}
|
|
|
|
.vpd-content {
|
|
background-color: var(--surface-card) !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.vpd-controls {
|
|
color: var(--text-primary) !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: space-between !important;
|
|
direction: rtl !important;
|
|
padding: 6px 10px;
|
|
|
|
.vpd-prev {
|
|
order: 1 !important;
|
|
|
|
svg {
|
|
transform: rotate(180deg) !important;
|
|
}
|
|
}
|
|
|
|
.vpd-month-label {
|
|
order: 2 !important;
|
|
flex: 1 !important;
|
|
text-align: center !important;
|
|
}
|
|
|
|
.vpd-next {
|
|
order: 3 !important;
|
|
|
|
svg {
|
|
transform: rotate(0deg) !important;
|
|
}
|
|
}
|
|
|
|
.vpd-next,
|
|
.vpd-prev,
|
|
button {
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
width: 32px !important;
|
|
height: 32px !important;
|
|
border-radius: 8px !important;
|
|
background-color: var(--surface-ground) !important;
|
|
border: 1px solid var(--border-color) !important;
|
|
color: var(--text-primary) !important;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
|
|
svg {
|
|
width: 14px !important;
|
|
height: 14px !important;
|
|
fill: var(--text-primary) !important;
|
|
|
|
path {
|
|
fill: var(--text-primary) !important;
|
|
}
|
|
}
|
|
|
|
&:hover:not([disabled="true"]) {
|
|
background-color: var(--primary-color) !important;
|
|
border-color: var(--primary-color) !important;
|
|
color: #ffffff !important;
|
|
|
|
svg,
|
|
svg path {
|
|
fill: #ffffff !important;
|
|
}
|
|
}
|
|
|
|
&[disabled="true"] {
|
|
opacity: 0.3 !important;
|
|
cursor: not-allowed !important;
|
|
}
|
|
}
|
|
|
|
.vpd-month-label {
|
|
span {
|
|
color: var(--text-primary) !important;
|
|
font-weight: 600 !important;
|
|
padding: 4px 10px !important;
|
|
border-radius: 6px !important;
|
|
border: 1px solid var(--border-color) !important;
|
|
background-color: var(--surface-ground) !important;
|
|
|
|
&:hover {
|
|
background-color: var(--surface-hover) !important;
|
|
border-color: var(--primary-color) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.vpd-up-arrow-btn,
|
|
.vpd-down-arrow-btn {
|
|
svg,
|
|
svg path {
|
|
fill: var(--text-primary) !important;
|
|
}
|
|
&:hover {
|
|
svg,
|
|
svg path {
|
|
fill: var(--primary-color) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.vpd-week {
|
|
.vpd-weekday {
|
|
color: var(--text-muted) !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
}
|
|
|
|
.vpd-days {
|
|
.vpd-day {
|
|
color: var(--text-primary) !important;
|
|
|
|
.vpd-day-text {
|
|
color: var(--text-primary) !important;
|
|
font-weight: 500;
|
|
}
|
|
|
|
&:not([disabled="true"]):hover:not(.vpd-selected):not(.vpd-empty) {
|
|
.vpd-day-effect {
|
|
background-color: var(--surface-hover) !important;
|
|
opacity: 0.9 !important;
|
|
}
|
|
}
|
|
|
|
&.vpd-selected {
|
|
.vpd-day-effect {
|
|
background-color: var(--primary-color) !important;
|
|
opacity: 1 !important;
|
|
}
|
|
.vpd-day-text {
|
|
color: #ffffff !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
}
|
|
|
|
&.vpd-range-first,
|
|
&.vpd-range-last,
|
|
&.vpd-range-between,
|
|
&.vpd-range-hover {
|
|
.vpd-day-effect {
|
|
background-color: var(--primary-color-light) !important;
|
|
opacity: 1 !important;
|
|
}
|
|
.vpd-day-text {
|
|
color: var(--primary-color) !important;
|
|
}
|
|
}
|
|
|
|
&[disabled="true"] {
|
|
.vpd-day-text {
|
|
color: var(--text-muted) !important;
|
|
opacity: 0.4 !important;
|
|
}
|
|
}
|
|
|
|
&.vpd-empty {
|
|
background: transparent !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.vpd-actions {
|
|
border-top: 1px solid var(--border-color) !important;
|
|
background-color: var(--surface-card) !important;
|
|
|
|
button {
|
|
color: var(--primary-color) !important;
|
|
font-weight: 700 !important;
|
|
font-family: inherit !important;
|
|
border-radius: 8px !important;
|
|
transition: background-color 0.15s ease, color 0.15s ease;
|
|
|
|
&:hover {
|
|
background-color: var(--primary-color-light) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.vpd-addon-list {
|
|
background-color: var(--surface-card) !important;
|
|
border-color: var(--border-color) !important;
|
|
|
|
.vpd-addon-list-item {
|
|
color: var(--text-secondary) !important;
|
|
background-color: transparent !important;
|
|
|
|
&:hover {
|
|
background-color: var(--surface-hover) !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
&.vpd-selected {
|
|
background-color: var(--primary-color-light) !important;
|
|
color: var(--primary-color) !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
&[disabled="true"] {
|
|
color: var(--text-muted) !important;
|
|
opacity: 0.4 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.vpd-close-addon {
|
|
color: var(--text-primary) !important;
|
|
background-color: var(--surface-hover) !important;
|
|
}
|
|
}
|
|
|
|
/* ==========================================
|
|
Global High-Contrast Hover & Selection States
|
|
========================================== */
|
|
.p-datatable-tbody > tr {
|
|
transition: background-color 0.15s ease;
|
|
&:hover {
|
|
background-color: var(--surface-hover) !important;
|
|
}
|
|
}
|
|
|
|
.p-select-option,
|
|
.p-dropdown-item {
|
|
transition: all 0.15s ease;
|
|
&:hover {
|
|
background-color: var(--primary-color-light) !important;
|
|
color: var(--primary-color) !important;
|
|
}
|
|
&.p-select-option-selected,
|
|
&.p-highlight {
|
|
background-color: var(--primary-color) !important;
|
|
color: #ffffff !important;
|
|
}
|
|
}
|
|
|
|
/* ==========================================
|
|
Responsive Tabs & TabList Horizontal Scroll
|
|
========================================== */
|
|
.p-tablist {
|
|
max-width: 100% !important;
|
|
overflow-x: auto !important;
|
|
-webkit-overflow-scrolling: touch !important;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.p-tablist-tab-list {
|
|
flex-wrap: nowrap !important;
|
|
white-space: nowrap !important;
|
|
min-width: max-content !important;
|
|
}
|
|
|
|
|