about css variables

[XxRiKxX]

I wanted a sort of glowing effect on hover. I did this

#memory {
    color: @color4;
    background-color: #1f2530;
    border-radius: 7.5px;
    transition: box-shadow 0.3s ease-out;
}

#memory:hover {
    box-shadow: 0 0 10px @color4;
}

didn't worked. the @Color4 is from pywal file.
Also is it possible to get a continuous distribution of color through out a module? LIke, from @color1 in the right to @Color2 in the left? I want to use those variables and not actual colors. I really don't know anything about css and stuff. Thanks and any help is appreciated :)

[fabricio-fn]

/* Defining variables */
:root {
--highlight-color: #3498db;
}

/* Using variables in properties */
a {
color: var(--highlight-color);
}

/* Modifying the variable value in a specific selector */
.specific-element {
--highlight-color: #e74c3c;
}

[fabricio-fn]

using in separate files

/* global.css */
:root {
--background-color: #e74c3c;
}

/* file1.css */
@import 'global.css';

body {
background-color: var(--background-color);
}

/* file2.css */
@import 'global.css';

p {
color: var(--background-color);
}

[tjex]

I was getting errors about root being an incorrect sudo class. Completely baffled me as I'm not a first timer with css. Using @define however, does work.

See here: #159

[tjex]

[2024-11-05 18:45:52.884] [info] Using configuration file /home/tjex/.config/waybar/config
[2024-11-05 18:45:52.886] [info] Using CSS file /home/tjex/.config/waybar/style.css
[2024-11-05 18:45:52.887] [error] style.css:1:1Invalid name of pseudo-class

:root {
    --primary: #5a728e;
    --quart: #bf8585;
    --tertiary: #bc9f76;
}

* {
  /* `otf-font-awesome` is required to be installed for icons */
    font-family: FiraCode Nerd Font, FontAwesome, Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
}

window#waybar {
    background-color: #121417;
    color: #ffffff;
}