Change background color indicator to underline

common.py

@@ -34,14 +34,20 @@ def __init__(self, icon=True, text=True):
         self.set_direction(Gtk.ArrowType.UP)
         self.get_style_context().add_class('module')
         self.default_styles = self.get_style_context().list_classes()
+        self.con = box('v')
+        self.indicator = box('h', style='indicator')
         self.box = box('h', spacing=5)
+        self.con.pack_start(self.box, 1, 1, 0)
+        self.con.add(self.indicator)
+        self.con.show_all()
+
         if icon:
             self.icon = Gtk.Label()
             self.box.pack_start(self.icon, 0, 0, 0)
         if text:
             self.text = Gtk.Label()
             self.box.pack_end(self.text, 1, 1, 0)
-        self.add(self.box)
+        self.add(self.con)
         self.add_events(Gdk.EventMask.SCROLL_MASK)
         self.add_events(Gdk.EventMask.SMOOTH_SCROLL_MASK)
 

module.py

@@ -117,7 +117,8 @@ def get_output():
 
         if output['text'] != module.cache.text:
             if output['text']:
-                module.set_label(output['text'])
+                module.text.set_label(output['text'])
+                module.text.set_visible(True)
                 module.set_visible(True)
             else:
                 module.set_visible(False)
@@ -153,12 +154,14 @@ def get_output():
                 datetime.now() -
                 datetime.fromtimestamp(output['timestamp'])
             ).seconds > module_config['interval'] * 2:
-                output['class'] = 'gray'
+                c.add_style(module, 'gray')
+            else:
+                module.reset_style()
 
         # Set class
-        module.reset_style()
+        module.indicator.reset_style()
         if 'class' in list(output):
-            c.add_style(module, output['class'])
+            c.add_style(module.indicator, output['class'])
 
         return True
     if get_output():

style.css

@@ -6,6 +6,7 @@
 @define-color blue  #8fa1be;
 @define-color green #a3be8c;
 @define-color orange #d08770;
+@define-color yellow #ebcb8b;
 
 /* bar */
 window {
@@ -60,9 +61,10 @@ button { color: inherit; }
 }
 
 /* colorize modules */
-.green { background: alpha(@green, 0.2); color: @white; border: 1px solid @gray; }
-.red { background: alpha(@red, 0.2); color: @white; border: 1px solid @gray; }
-.orange { background: alpha(@orange, 0.2); color: @white; border: 1px solid @gray; }
+.green { background: @green; }
+.red { background: @red;}
+.orange { background: @orange;}
+.yellow { background: @yellow;}
 .gray { color: @light_gray; }
 
 /* colorize text */
@@ -72,6 +74,12 @@ button { color: inherit; }
 .orange-fg { color: @orange; }
 
 
+.indicator {
+	margin-top: -1px;
+	border-radius: 2px;
+}
+
+
 /* Override default rules */
 tooltip {
 	font-family: "Iosevka Custom"