100 lines
3.1 KiB
CSS
100 lines
3.1 KiB
CSS
/* Canvas API specific theme overrides */
|
|
[data-system="canvas"] {
|
|
/* Override all teal colors with #e70022 (red) */
|
|
--canvas-primary: #e70022;
|
|
--canvas-primary-light: #ff1a3d;
|
|
--canvas-primary-dark: #cc001f;
|
|
--canvas-button-text: #f3f4f6; /* light gray for button text */
|
|
}
|
|
|
|
/* Override teal colors in Canvas API system */
|
|
[data-system="canvas"] .p-button {
|
|
background-color: var(--canvas-primary) !important;
|
|
border-color: var(--canvas-primary) !important;
|
|
color: var(--canvas-button-text) !important;
|
|
}
|
|
|
|
[data-system="canvas"] .p-button:hover {
|
|
background-color: var(--canvas-primary-dark) !important;
|
|
border-color: var(--canvas-primary-dark) !important;
|
|
color: var(--canvas-button-text) !important;
|
|
}
|
|
|
|
[data-system="canvas"] .p-button:hover:not(.p-disabled) {
|
|
background-color: var(--canvas-primary-dark) !important;
|
|
border-color: var(--canvas-primary-dark) !important;
|
|
}
|
|
|
|
[data-system="canvas"] .p-button.p-button-outlined {
|
|
color: var(--canvas-primary) !important;
|
|
border-color: var(--canvas-primary) !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
[data-system="canvas"] .p-button.p-button-outlined:hover {
|
|
background-color: var(--canvas-primary) !important;
|
|
color: var(--canvas-button-text) !important;
|
|
}
|
|
|
|
/* Override teal in tabview */
|
|
[data-system="canvas"] .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
|
|
color: var(--canvas-primary) !important;
|
|
border-color: var(--canvas-primary) !important;
|
|
}
|
|
|
|
[data-system="canvas"] .p-tabview .p-tabview-nav li .p-tabview-nav-link:hover {
|
|
color: var(--canvas-primary) !important;
|
|
}
|
|
|
|
/* Override teal in dropdowns */
|
|
[data-system="canvas"] .p-dropdown:not(.p-disabled).p-focus {
|
|
border-color: var(--canvas-primary) !important;
|
|
box-shadow: 0 0 0 1px var(--canvas-primary) !important;
|
|
}
|
|
|
|
[data-system="canvas"] .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
|
|
background-color: var(--canvas-primary) !important;
|
|
}
|
|
|
|
/* Override teal in checkboxes */
|
|
[data-system="canvas"] .p-checkbox .p-checkbox-box.p-highlight {
|
|
background-color: var(--canvas-primary) !important;
|
|
border-color: var(--canvas-primary) !important;
|
|
}
|
|
|
|
/* Override teal in links */
|
|
[data-system="canvas"] .link-style {
|
|
color: var(--canvas-primary) !important;
|
|
}
|
|
|
|
[data-system="canvas"] .link-style:hover {
|
|
color: var(--canvas-primary-dark) !important;
|
|
}
|
|
|
|
/* Override teal in borders */
|
|
[data-system="canvas"] .border-teal-500 {
|
|
border-color: var(--canvas-primary) !important;
|
|
}
|
|
|
|
/* Override teal in text */
|
|
[data-system="canvas"] .text-teal-500,
|
|
[data-system="canvas"] .text-teal-600,
|
|
[data-system="canvas"] .text-teal-700 {
|
|
color: var(--canvas-primary) !important;
|
|
}
|
|
|
|
/* Override teal in backgrounds */
|
|
[data-system="canvas"] .bg-teal-500,
|
|
[data-system="canvas"] .bg-teal-600,
|
|
[data-system="canvas"] .bg-teal-700 {
|
|
background-color: var(--canvas-primary) !important;
|
|
}
|
|
|
|
/* Override teal in focus states */
|
|
[data-system="canvas"] .focus\:border-teal-500:focus {
|
|
border-color: var(--canvas-primary) !important;
|
|
}
|
|
|
|
[data-system="canvas"] .focus\:ring-teal-500:focus {
|
|
--tw-ring-color: var(--canvas-primary) !important;
|
|
} |