custom_ui/frontend/src/style.css

100 lines
2.1 KiB
CSS

:root {
/* Theme tokens with sensible defaults (will be overwritten by runtime theme switcher) */
--theme-primary: #0f7ac7;
--theme-primary-strong: #0c639f;
--theme-secondary: #2ca66f;
--theme-accent: #8fd9a8;
--theme-gradient-start: #0c639f;
--theme-gradient-end: #1390e0;
--theme-secondary-gradient-start: #2c9b64;
--theme-secondary-gradient-end: #38c487;
--theme-surface: #f4f9ff;
--theme-surface-alt: #e8f4ef;
--theme-border: #cfe5f7;
--theme-hover: #dcedf9;
--theme-text: #0f172a;
--theme-text-muted: #475569;
--theme-text-dark: #0b1220;
--theme-text-light: #ffffff;
/* Backwards-compatible vars used across components */
--primary-color: var(--theme-primary);
--primary-600: var(--theme-primary-strong);
--surface-card: var(--theme-surface);
--surface-border: var(--theme-border);
--surface-hover: var(--theme-hover);
--text-color: var(--theme-text);
--primary-text-color: #ffffff;
--secondary-background-color: var(--theme-secondary);
}
/* Fix PrimeVue overlay z-index conflicts with Vuetify modals */
/* Vuetify dialogs typically use z-index 2400+, so PrimeVue overlays need to be higher */
.p-component-overlay {
z-index: 2500 !important;
}
.p-select-overlay,
.p-autocomplete-overlay,
.p-dropdown-overlay {
z-index: 2500 !important;
}
.page-turn-button {
border-radius: 5px;
border: none;
}
.page-num-button {
border: none;
background-color: Transparent;
}
.interaction-button {
border: none;
border-radius: 5px;
/*background-color: mediumseagreen;*/
color: white;
background-color: rgb(69, 112, 101);
}
.interaction-button:hover {
background-color: rgb(82, 132, 119);
}
#client-content {
display: flex;
flex-direction: column;
width: 95%;
justify-content: center;
}
#filter-container {
display: flex;
flex-direction: row;
gap: 5px 5px;
}
#paging-controls {
display: flex;
justify-content: flex-end;
gap: 5px;
}
/* Vuetify Switch and Checkbox Styling */
.v-switch {
align-self: center;
transform: scale(0.85);
transform-origin: center;
}
.v-switch .v-switch__thumb {
pointer-events: auto !important; /* Make thumb clickable */
}
.v-checkbox {
align-self: center;
transform: scale(0.75);
transform-origin: center;
}