I'm making changes to Atum.
I'm changing the colours and I'm using user.css. I've placed it in:
/media/templates/administrator/atum/css/user.css
I initially tried using :root and giving each variable a HEX value which worked.
I then decided it would be more efficient to assign the original variables with a new variable. That way if I wanted to I could restyle things in the future with a more descriptive way of knowing what each colour does.
When I try to reassign the variable such as:
--header-logo-bg: var(--blue--400);
I lose all colours.
So then I thought I would try to localise the rule by targeting body instead.
body { /* Square Balloon Brand Colours */ --blue--900: #2d3945; --blue--800: #233a5a; --blue--700: #54667f; --blue--600: #046b8d; --blue--400: #00aeff --blue--200: #c3e7f3; --pink--200: #fee0dd; --pink--500: #f04c5e; --pink--600: #d51d4f; --yellow--800: #ee5d23; --yellow--700: #f9a41e; --yellow--400: #f5df99; --yellow--300: #f5e7c4; --header-logo-bg: var(--blue--400); --header-bg: var(--blue--400); --sidebarwrapper-bg: var(--blue--400); --main-nav-mm-active-bg: var(--blue--900); --template-sidebar-bg: var(--blue--400); --btn-primary-bg: var(--blue--400); --btn-secondary-border: var(--blue--200: #c3e7f3); --btn-secondary-color: #fff; --btn-secondary-bg: var(--blue--400); --btn-secondary-border: var(--blue--900); --header-item-content-bg: var(--blue--900); --header-item-content-jversion-color: var(--blue--900); -main-nav-ul-bg: var(--blue--900); } This also does not work. However if I just use the colour hex's instead of the variables it works fine.
What could I be doing wrong?
