Problem with using custom.css

[ilisei]

Describe the bug
Hi, I wanted to display a card with a colored gradient through an external custom.css file. I followed the instructions, took the file custom.css.sample. Renamed it and used the default values to test it. i.e. add a class value for the card and put the description from custom.css in it.

Expected behavior

1. If I specify class: “green”, with the default custom.css file, the card does not change color. That is, the changes are not applied. (first screen)
   After that I decided to check other options.
2. If I change the name of the class from body #app .card.green to body .cardi or body #app .cardi after specifying in config.yml the value class: “cardi” then the property is applied but it is placed under the squat. (second screen)
   After I decided to check if this idea works at all.
3. if I change the class name from body #app .card.green to body .card then the changes are applied to all cards. (third screen)
   So far I have an opinion that the values for the default theme override the class values that I specify for specific elements.

Screenshots

Configuration
config.yml

---
# Homepage configuration
# See https://fontawesome.com/v5/search for icons options

title: "Speed Links"
subtitle: "Office"
logo: "logo.png"
# icon: "fas fa-skull-crossbones" # Optional icon

#header: true
#footer: '<p>Created with <span class="has-text-danger">❤</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a> & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>' # set false if you want to hide it.
footer: ''
columns: "6"
defaults:
  layout: columns

stylesheet:
  - "assets/custom.css"

# Optional theme customization
theme: default
colors:
  light:
    highlight-primary: "#3367d6"
    highlight-secondary: "#4285f4"
    highlight-hover: "#5a95f5"
    background: "#f5f5f5"
    card-background: "#ffffff"
    text: "#363636"
    text-header: "#ffffff"
    text-title: "#303030"
    text-subtitle: "#424242"
    card-shadow: rgba(0, 0, 0, 0.1)
    link: "#3273dc"
    link-hover: "#363636"
  dark:
    highlight-primary: "#3367d6"
    highlight-secondary: "#4285f4"
    highlight-hover: "#5a95f5"
    background: "#131313"
    card-background: "#2b2b2b"
    text: "#eaeaea"
    text-header: "#ffffff"
    text-title: "#fafafa"
    text-subtitle: "#f5f5f5"
    card-shadow: rgba(0, 0, 0, 0.4)
    link: "#3273dc"
    link-hover: "#ffdd57"

# Optional message
message:
#  #url: https://b4bz.io
  style: "is-dark" # See https://bulma.io/documentation/components/message/#colors for styling options.
  title: "Marks"
#  icon: "fa fa-note-sticky"
#  logo: "assets/icons/png/note-sticky-solid.svg"
  content: ""

# Optional navbar
# links: [] # Allows for navbar (dark mode, layout, and search) without any links
links:
  - name: "Home"
    url: "#home"
  # this will link to a second homer page that will load config from additional-page.yml and keep default config values as in config.yml file
  # see url field and assets/additional-page.yml.dist used in this example:
  #- name: "another page!"
  #  icon: "fas fa-file-alt"
  #  url: "#additional-page" 

# Services
# First level array represent a group.
# Leave only a "items" key if not using group (group name, icon & tagstyle are optional, section separation will not be displayed).
services:
  - name: "Network"
#    icon: "fas fa-skull-crossbones"
    logo: "assets/icons/png/network-wired-solid.svg"
    items:
  - name: "Hosts"
#    icon: "fas fa-server"
    logo: "assets/icons/png/server-solid.svg"
    items:
      - name: "pxve01"
        url: "https://localhost:8007/"
        class: "green"
  - name: "Mail"
#    icon: "fas fa-desktop"
    logo: "assets/icons/png/envelopes-bulk-solid.svg"
    items:
  - name: "WEB Services"
#    icon: "fas fa-cloud"
    logo: "assets/icons/png/cloud-solid.svg"
    items:
  - name: "File Share"
#    icon: "fas fa-share"
    logo: "assets/icons/png/share-nodes-solid.svg"
    items:
  - name: "Hardware"
#    icon: "fas fa-microchip"
    logo: "assets/icons/png/microchip-solid.svg"
    items:

custom.css

@charset "UTF-8";

/* Custom card colors */
/* Use with `class:` property of services in config.yml */
body #app .card.green {
  background-image: linear-gradient(to bottom right, red, yellow);
/*  background-color: #006600; */
/*  color: #00ff00; */
}

[ilisei]

I found a solution to my problem, not sure if it's the right one. But it worked for me. It turns out that I declare a new class .green and remove the .card class from it. Then I add a gradient.
.green { .card { background-image: linear-gradient(rgb(0, 143, 210), rgb(31, 91, 155)); } }