Initial commit: admin dashboard for GameNo.
Vue 3 + Vite dashboard with PrimeVue, i18n, and API integration for institution management.
This commit is contained in:
@@ -0,0 +1,272 @@
|
||||
// /src/assets/styles/main.scss
|
||||
|
||||
@import '@fontsource/vazirmatn/400.css';
|
||||
@import '@fontsource/vazirmatn/500.css';
|
||||
@import '@fontsource/vazirmatn/700.css';
|
||||
|
||||
@import './light-theme.scss';
|
||||
@import './dark-theme.scss';
|
||||
@import './rtl-overrides.scss';
|
||||
|
||||
* {
|
||||
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: 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;
|
||||
|
||||
button, span, i, svg, .vpd-month-label {
|
||||
color: var(--text-primary) !important;
|
||||
fill: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--surface-hover) !important;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.vpd-month-label span {
|
||||
border-color: var(--border-color) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--surface-hover) !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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user