init

2025-10-27 15:12:00 +03:00
commit a198c703ef
47 changed files with 2141 additions and 0 deletions
--- a/src/assets/theme.css
+++ b/src/assets/theme.css
@@ -0,0 +1,208 @@
+/* custom-theme.css — кастомная тема PrimeVue v4 с теплой премиальной палитрой */
+
+:root {
+    /* Основные цвета */
+    --primary-color: #EFEFF3; /* mainGold */
+    --primary-color-text: #ffffff;
+
+    --primary-hover-color: #AA8F59; /* secondGold */
+    --primary-active-color: #8B744B; /* ещё темнее вариант для активного */
+
+    --secondary-color: #AA8F59;
+    --secondary-color-text: #ffffff;
+
+    /* Поверхности */
+    --surface-ground: #FBF9F6; /* system02 */
+    --surface-card: #ffffff; /* Белый, на фоне system02 */
+    --surface-overlay: #C7BCA8; /* system01 как подложка/оверлей */
+
+    /* Текст */
+    --text-color: #393838; /* darkBrown */
+    --text-color-secondary: #AA8F59; /* secondGold */
+    --text-color-muted: #C7BCA8; /* system01 */
+
+    /* Статусы */
+    --success-color: #36AC54;
+    --danger-color: #CC2A21;
+    --warning-color: #D99721;
+
+    /* Бордюры и тени */
+    --border-color: #C7BCA8;
+    --shadow-color: rgba(200, 173, 125, 0.3); /* мягкая тень mainGold */
+
+    /* PrimeVue-specific */
+    --button-text-color: var(--primary-color-text);
+    --button-bg-color: var(--primary-color);
+    --button-hover-bg-color: var(--primary-hover-color);
+    --button-active-bg-color: var(--primary-active-color);
+
+    --input-bg-color: var(--surface-ground);
+    --input-border-color: var(--secondary-color);
+    --input-focus-border-color: var(--primary-color);
+
+    --menu-bg-color: var(--surface-card);
+    --menu-item-hover-bg-color: var(--surface-overlay);
+    --menu-item-hover-color: var(--primary-color-text);
+}
+
+/* Кнопки */
+.p-button {
+    background-color: var(--button-bg-color) !important;
+    color: var(--button-text-color) !important;
+    border: none !important;
+    box-shadow: 0 2px 6px var(--shadow-color);
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+    padding: 8px 12px !important;
+    min-width: fit-content;
+    /*font-weight: 500;*/
+}
+
+.p-button:hover {
+    background-color: var(--button-hover-bg-color) !important;
+    box-shadow: 0 4px 10px var(--shadow-color);
+}
+
+.p-button:active {
+    background-color: var(--button-active-bg-color) !important;
+}
+
+.p-button-secondary {
+    background-color: var(--surface-ground) !important;
+    color: var(--button-active-bg-color) !important;
+    border: 1px solid var(--button-bg-color) !important;
+    /*font-size: 1rem !important;*/
+    padding: 8px 12px !important;
+    min-width: fit-content;
+}
+
+.p-button-secondary:hover {
+    background-color: var(--button-bg-color) !important;
+    box-shadow: 0 4px 10px var(--shadow-color);
+    color: var(--primary-color-text) !important;
+}
+.p-togglebutton {
+    background-color: var(--primary-color) !important;
+    border: none !important;
+}
+
+.p-togglebutton-content {
+
+    color: var(--primary-color) !important;
+    padding: 0.5rem 2rem !important;
+    /*background-color: var(--input-bg-color) !important;*/
+    /*border: 1px solid var(--button-bg-color) !important;*/
+    box-shadow: inset 0.3px   rgba(0, 0, 0, 0.5);;
+}
+.p-togglebutton-checked {
+    box-shadow:  1px   rgba(0, 0, 0, 0.5);;
+}
+.p-selectbutton {
+    border: 1px solid var(--button-bg-color) !important;
+}
+
+/* InputText */
+.p-inputtext, textarea {
+    width: 100% !important;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    /*justify-items: center;*/
+    font-weight: bold;
+    background-color: var(--primary-color) !important;
+    border: none !important;
+    box-shadow: none !important;
+    /*color: var(--text-color) !important;*/
+    /*padding: 0.5rem 0.75rem;*/
+    font-size: inherit !important;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+.p-inputnumber-input {
+
+}
+.p-inputgroupaddon {
+    background-color: var(--input-bg-color) !important;
+    border: 1px solid var(--button-bg-color) !important;
+    border-right: 0 !important  ;
+}
+.p-inputtext:focus, textarea:focus {
+    border-color: var(--input-focus-border-color) !important;
+    outline: none !important;
+    box-shadow: 0 0 8px var(--primary-color);
+}
+
+
+/* Select */
+.p-select {
+    background-color: var(--input-bg-color) !important;
+    border: 1px solid var(--button-bg-color) !important;
+    color: var(--text-color) !important;
+    /*padding: 0.5rem 0.75rem;*/
+    border-radius: 0.5rem;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.p-select:focus {
+    border-color: var(--input-focus-border-color) !important;
+    outline: none !important;
+    box-shadow: 0 0 8px var(--primary-color);
+}
+
+.p-select-option-selected {
+    background-color: var(--input-bg-color) !important;
+}
+
+.p-select-option-label {
+    color: #000 !important;
+}
+
+.p-panel-header {
+    border-radius: 1rem 1rem 1rem 1rem !important;
+}
+
+/* Общий фон */
+body {
+    width: 100% !important;
+    background-color: var(--surface-ground);
+    color: var(--text-color);
+    font-family: 'Inter', sans-serif;
+}
+
+/* Checkbox */
+.p-checkbox-checked .p-checkbox-box {
+    background: var(--button-bg-color) !important;
+    /*color: var(--button-text-color) !important;*/
+    border-color: var(--button-bg-color) !important;
+
+}
+
+/* Прочее */
+.p-card {
+    background-color: var(--surface-card) !important;
+    box-shadow: 0 2px 8px var(--shadow-color);
+    border-radius: 1rem;
+}
+
+.p-menu .p-menuitem:hover {
+    background-color: var(--menu-item-hover-bg-color) !important;
+    color: var(--menu-item-hover-color) !important;
+}
+
+/* Индикаторы статуса */
+.status-success {
+    color: var(--success-color);
+}
+
+.status-danger {
+    color: var(--danger-color);
+}
+
+.status-warning {
+    color: var(--warning-color);
+}
+div {
+    display: flex;
+}
+span, a, i {
+    color: var(--text-color) !important;
+    padding: 0 !important;
+}