Search code examples
gtk

GtkScale slider's background-color property does not work properly

I have made a ui file using Glade.
It contains a GtkWindow, a GtkScale and a GtkAdjustment:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.38.2 -->
<interface>
  <requires lib="gtk+" version="3.24"/>
  <!-- interface-css-provider-path ui.css -->
  <object class="GtkAdjustment" id="adj">
    <property name="upper">100</property>
    <property name="step-increment">1</property>
    <property name="page-increment">10</property>
  </object>
  <object class="GtkWindow">
    <property name="width-request">500</property>
    <property name="height-request">200</property>
    <property name="can-focus">False</property>
    <child>
      <object class="GtkScale">
        <property name="visible">True</property>
        <property name="can-focus">True</property>
        <property name="adjustment">adj</property>
        <property name="round-digits">1</property>
        <property name="draw-value">False</property>
      </object>
    </child>
  </object>
</interface>

I have some CSS to change the appearance of the GtkScale:

trough {
    background-color: #99b0c4;
    min-height: 20px;
    border-radius: 10px;
}

highlight{
    background-color: #4e90cd;
    min-height: 20px;
    border-radius: 10px;
}

slider {
    background: #09b32e;
    min-height: 30px;
    min-width: 30px;
    background-color: #f9b32e;
}

I was playing around with the background of the slider. I want it to be the color #f9b32e, but somehow it will not change to this color unless I set background to be something.

When I preview the code above, I get this:
enter image description here

But whenever I remove the line background: #09b32e; this is the preview:

enter image description here

The same goes for the property background-image. If I preview this without background but with background-image and background-color, it works as expected (background-color takes effect). Except there will be an image on the slider...

Is there something I am doing wrong, when I try to use background-color without any other background-properties?

Solution

  • I noticed that using background as the background color (instead of background-color) works as expected.
    I don't know why background-color does not work, but at least I get the behaviour I wanted.