/* 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(--color-green-300); --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-button-rounded{ background-color: white !important; } .p-button-rounded:hover{ background-color: lightgray !important; } .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); }