/* ========================================================================== VueComponent Default Theme This file defines all themeable CSS custom properties (variables) used across VueComponent components. To customize the theme, override any of these variables in your own CSS. Components use `var(--VAR, fallback)` so they still work even if this file is NOT loaded — the fallback values match the default appearance. ========================================================================== */ :root { /* -------------------------------------------------------------------- OBJECT – Shared form-control / object-level colours Used by inputs, containers, focus rings, disabled states, etc. -------------------------------------------------------------------- */ --OBJECT-DEFAULT-BACKGROUND-COLOUR: #ffffff; --OBJECT-DEFAULT-BORDER-COLOUR: #ccc; --OBJECT-DEFAULT-BORDER-HOVER-COLOUR: #888; --OBJECT-DEFAULT-BORDER-FOCUS-COLOUR: #007BFF; --OBJECT-DEFAULT-FOCUS-SHADOW-COLOUR: rgba(0, 123, 255, 0.25); --OBJECT-DEFAULT-HOVER-BORDER-COLOUR: rgba(0, 123, 255, 0.25); --OBJECT-DEFAULT-HOVER-BORDER-PULSE-COLOUR: rgba(0, 123, 255, 0.5); --OBJECT-DEFAULT-DISABLED-BACKGROUND-COLOUR: #eee; --OBJECT-DEFAULT-DISABLED-TEXT-COLOUR: #aaa; --OBJECT-DEFAULT-SELECTED-BACKGROUND-COLOUR: #f0f0f0; --OBJECT-DEFAULT-TEXT-COLOUR: #212529; /* -------------------------------------------------------------------- ACCENT – Primary accent colour used by focus rings, active tabs, slider thumbs, tag buttons, etc. -------------------------------------------------------------------- */ --ACCENT-COLOUR: #007bff; --ACCENT-HOVER-COLOUR: #0056b3; /* -------------------------------------------------------------------- BUTTON (BTN) -------------------------------------------------------------------- */ --BTN-DEFAULT-BACKGROUND-COLOUR: #e9ecef; --BTN-DEFAULT-TEXT-COLOUR: #212529; --BTN-DEFAULT-BORDER-COLOUR: #dadcdf; --BTN-DEFAULT-BACKGROUND-HOVER-COLOUR: #d6d9dc; --BTN-DEFAULT-BORDER-HOVER-COLOUR: #dae0e5; /* -------------------------------------------------------------------- CHECKBOX -------------------------------------------------------------------- */ --CHECKBOX-DEFAULT-BORDER-COLOUR: #ccc; --CHECKBOX-ACCENT-COLOUR: #007BFF; --CHECKBOX-DISABLED-BACKGROUND-COLOUR: #eee; --CHECKBOX-DISABLED-TEXT-COLOUR: #aaa; /* -------------------------------------------------------------------- TEXTBOX -------------------------------------------------------------------- */ --TEXTBOX-DEFAULT-BORDER-COLOUR: #ccc; --TEXTBOX-HOVER-BORDER-COLOUR: #888; --TEXTBOX-DISABLED-BACKGROUND-COLOUR: #eee; --TEXTBOX-DISABLED-TEXT-COLOUR: #aaa; /* -------------------------------------------------------------------- DROPDOWN (simple & autocomplete) -------------------------------------------------------------------- */ --DROPDOWN-DEFAULT-BORDER-COLOUR: #ccc; --DROPDOWN-HOVER-BORDER-COLOUR: #888; --DROPDOWN-DISABLED-BACKGROUND-COLOUR: #eee; --DROPDOWN-DISABLED-TEXT-COLOUR: #aaa; --DROPDOWN-SUGGESTION-BACKGROUND-COLOUR: #ffffff; --DROPDOWN-SUGGESTION-BORDER-COLOUR: #ccc; --DROPDOWN-ICON-COLOUR: #555555; /* -------------------------------------------------------------------- LISTBOX -------------------------------------------------------------------- */ --LISTBOX-DEFAULT-BORDER-COLOUR: #ccc; --LISTBOX-DEFAULT-BACKGROUND-COLOUR: #ffffff; --LISTBOX-ITEM-SELECTED-BACKGROUND-COLOUR: #f0f0f0; /* -------------------------------------------------------------------- SLIDER -------------------------------------------------------------------- */ --SLIDER-TRACK-BACKGROUND-COLOUR: #e9ecef; --SLIDER-TRACK-BORDER-COLOUR: #ced4da; --SLIDER-TRACK-HOVER-BACKGROUND-COLOUR: #dee2e6; --SLIDER-THUMB-BACKGROUND-COLOUR: #007bff; --SLIDER-THUMB-HOVER-BACKGROUND-COLOUR: #0056b3; /* -------------------------------------------------------------------- TAB -------------------------------------------------------------------- */ --TAB-DEFAULT-BACKGROUND-COLOUR: #f8f9fa; --TAB-DEFAULT-TEXT-COLOUR: #495057; --TAB-ACTIVE-BACKGROUND-COLOUR: #3b51ac; --TAB-ACTIVE-TEXT-COLOUR: #ffffff; --TAB-ACTIVE-BORDER-COLOUR: #2d3f85; --TAB-CONTENT-BORDER-COLOUR: #dee2e6; --TAB-CONTENT-BACKGROUND-COLOUR: #ffffff; /* -------------------------------------------------------------------- DIALOG -------------------------------------------------------------------- */ --DIALOG-DEFAULT-BACKGROUND-COLOUR: #ffffff; --DIALOG-DEFAULT-BOX-SHADOW-COLOUR: rgba(0, 0, 0, 0.25); --DIALOG-HEADER-TEXT-COLOUR: #212529; --DIALOG-HEADER-BORDER-COLOUR: #ddd; --DIALOG-MESSAGE-TEXT-COLOUR: #111; --DIALOG-BACKDROP-COLOUR: rgba(0, 0, 0, 0.5); /* -------------------------------------------------------------------- CARD -------------------------------------------------------------------- */ --CARD-BORDER-COLOUR: aliceblue; --CARD-BACKGROUND-COLOUR: #ffffff; --CARD-SHADOW-COLOUR: rgba(33, 40, 50, 0.15); --CARD-HOVER-SHADOW-COLOUR: rgba(0, 0, 0, 0.15); --CARD-TEXT-COLOUR: #666; --CARD-BUTTON-BACKGROUND-COLOUR: #3b51ac; --CARD-BUTTON-TEXT-COLOUR: #ffffff; --CARD-BUTTON-HOVER-BACKGROUND-COLOUR: #95a7e7; --CARD-TITLE-TEXT-COLOUR: #000000; /* -------------------------------------------------------------------- SPOILER -------------------------------------------------------------------- */ --SPOILER-BORDER-COLOUR: #ccc; --SPOILER-HEADER-BACKGROUND-COLOUR: linear-gradient(to bottom, #f5f5f5, #e0e0e0); --SPOILER-HEADER-BORDER-COLOUR: #ccc; --SPOILER-BUTTON-BACKGROUND-COLOUR: #007BFF; --SPOILER-BUTTON-TEXT-COLOUR: #ffffff; /* -------------------------------------------------------------------- NOTICE / ALERT (semantic colours) -------------------------------------------------------------------- */ --NOTICE-INFO-BORDER-COLOUR: #2196F3; --NOTICE-INFO-BACKGROUND-COLOUR: #E3F2FD; --NOTICE-INFO-TEXT-COLOUR: #0D47A1; --NOTICE-SUCCESS-BORDER-COLOUR: #4CAF50; --NOTICE-SUCCESS-BACKGROUND-COLOUR: #E8F5E9; --NOTICE-SUCCESS-TEXT-COLOUR: #1B5E20; --NOTICE-WARNING-BORDER-COLOUR: #FF9800; --NOTICE-WARNING-BACKGROUND-COLOUR: #FFF3E0; --NOTICE-WARNING-TEXT-COLOUR: #E65100; --NOTICE-ERROR-BORDER-COLOUR: #F44336; --NOTICE-ERROR-BACKGROUND-COLOUR: #FFEBEE; --NOTICE-ERROR-TEXT-COLOUR: #B71C1C; /* -------------------------------------------------------------------- TOAST -------------------------------------------------------------------- */ --TOAST-BACKGROUND-COLOUR: #E0E5E9; --TOAST-TEXT-COLOUR: #3C3C3C; --TOAST-BORDER-COLOUR: #3c3c3c33; --TOAST-SHADOW-COLOUR: rgba(88, 88, 88, 0.7); /* -------------------------------------------------------------------- TAG PICKER -------------------------------------------------------------------- */ --TAGS-CONTAINER-BORDER-COLOUR: #ced4da; --TAGS-CONTAINER-BACKGROUND-COLOUR: #f8f9fa; --TAG-BUTTON-BACKGROUND-COLOUR: #007bff; --TAG-BUTTON-TEXT-COLOUR: #ffffff; --TAG-REMOVE-BUTTON-COLOUR: #dc3545; /* -------------------------------------------------------------------- ACTIVE TABLE -------------------------------------------------------------------- */ --ACTIVE-TABLE-DEFAULT-BORDER-COLOUR: rgb(196, 196, 196); --ACTIVE-TABLE-DEFAULT-HEADER-BACKGROUND-COLOUR: rgb(223, 223, 223); --ACTIVE-TABLE-DEFAULT-HEADER-BACKGROUND-GRADIENT-COLOUR: rgb(243, 243, 243); --ACTIVE-TABLE-DEFAULT-HEADER-TEXT-COLOUR: rgb(49, 49, 49); --ACTIVE-TABLE-ROW-HOVER-BACKGROUND-COLOUR: #f5f5f5; --ACTIVE-TABLE-ROW-FOCUS-BACKGROUND-COLOUR: gold; --ACTIVE-TABLE-BUTTON-TEXT-COLOUR: #212529; --ACTIVE-TABLE-BUTTON-BORDER-COLOUR: #dadcdf; --ACTIVE-TABLE-BUTTON-BACKGROUND-HOVER-COLOUR: #d6d9dc; --ACTIVE-TABLE-BUTTON-BORDER-HOVER-COLOUR: #dae0e5; --ACTIVE-TABLE-TOOLTIP-BACKGROUND-COLOUR: #ffffff; --ACTIVE-TABLE-TOOLTIP-TEXT-COLOUR: #222; --ACTIVE-TABLE-TOOLTIP-SHADOW-COLOUR: rgba(60, 60, 60, 0.08); --ACTIVE-TABLE-TOOLTIP-SHADOW-SECONDARY-COLOUR: rgba(0, 0, 0, 0.06); /* -------------------------------------------------------------------- PROGRESS BAR -------------------------------------------------------------------- */ --PROGRESS-BAR-BACKGROUND-COLOUR: #e9ecef; --PROGRESS-BAR-BORDER-COLOUR: #dadcdf; --PROGRESS-BAR-SHADOW-COLOUR: rgba(0, 0, 0, 0.1); --PROGRESS-BAR-FILL-COLOUR: #28a745; --PROGRESS-BAR-FILL-GRADIENT-START: #28a745; --PROGRESS-BAR-FILL-GRADIENT-END: #8fc49c; /* -------------------------------------------------------------------- TOOLTIP -------------------------------------------------------------------- */ --TOOLTIP-BACKGROUND-COLOUR: #111827; --TOOLTIP-TEXT-COLOUR: #f9fafb; /* -------------------------------------------------------------------- KEYBOARD HINT -------------------------------------------------------------------- */ --KEYBOARD-HINT-BACKGROUND-COLOUR: #E9E9E9; --KEYBOARD-HINT-BACKGROUND-GRADIENT-COLOUR: #B8B8B8; --KEYBOARD-HINT-TEXT-COLOUR: #000000; --KEYBOARD-HINT-BORDER-COLOUR: #A2A2A2; --KEYBOARD-HINT-SHADOW-COLOUR: #000000; /* -------------------------------------------------------------------- FILE PICKER -------------------------------------------------------------------- */ --FILE-PICKER-DROPZONE-BORDER-COLOUR: #aaa; /* -------------------------------------------------------------------- CONTAINER – Shared focus ring for Focusable elements -------------------------------------------------------------------- */ --FOCUSABLE-FOCUS-BOX-SHADOW: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* -------------------------------------------------------------------- CAROUSEL -------------------------------------------------------------------- */ --CAROUSEL-BUTTON-BACKGROUND-COLOUR: #007BFF; --CAROUSEL-BUTTON-TEXT-COLOUR: #ffffff; --CAROUSEL-BUTTON-HOVER-BACKGROUND-COLOUR: #0056b3; --CAROUSEL-INDICATOR-BACKGROUND-COLOUR: #ccc; --CAROUSEL-INDICATOR-ACTIVE-BACKGROUND-COLOUR: #007BFF; /* -------------------------------------------------------------------- NOTIFICATION BADGE -------------------------------------------------------------------- */ --BADGE-BACKGROUND-COLOUR: #f24537; --BADGE-BACKGROUND-GRADIENT-COLOUR: #c62d1f; --BADGE-TEXT-COLOUR: #ffffff; --BADGE-BORDER-COLOUR: #d02718; --BADGE-SHADOW-COLOUR: #f5978e; --BADGE-TEXT-SHADOW-COLOUR: #810e05; /* -------------------------------------------------------------------- THROBBER -------------------------------------------------------------------- */ --THROBBER-BODY-BACKGROUND-COLOUR: #ffffff; --THROBBER-LEAF-BORDER-COLOUR: #31708f; --THROBBER-LEAF-BOX-SHADOW-COLOUR: #00000070; --THROBBER-LEAF-BACKGROUND-COLOUR: #ffffff; --THROBBER-ANIMATION-TICK-COLOUR: #31708f; --THROBBER-ANIMATION-BASE-COLOUR: transparent; /* -------------------------------------------------------------------- GRID VIEW -------------------------------------------------------------------- */ --GRID-ELEMENT-BACKGROUND-COLOUR: #ffffff; --GRID-ELEMENT-BORDER-COLOUR: #e0e0e0; --GRID-ELEMENT-SHADOW-COLOUR: rgba(0,0,0,0.08); --GRID-ELEMENT-FOCUS-SHADOW-COLOUR: rgba(0,0,0,0.16); --GRID-ELEMENT-ACTIVE-BACKGROUND-COLOUR: #f5f5f5; --GRID-ELEMENT-TITLE-TEXT-COLOUR: #222; --GRID-ELEMENT-DESCRIPTION-TEXT-COLOUR: #666; }