pathief, 4 months ago (edited 4 months ago)

My system: https://lemmy.world/pictrs/image/38e0e5ed-6df9-46c0-a3d2-b026ff7dd691.png

My waybar dotfiles. You can create/edit these files with whatever text editor you like, you don’t need the terminal. Please note that for some reason Lemmy screws up the “&” when pasting code… Please replace all “&” with “&”.

~/.config/waybar/config (note: remove custom/gpu-util if you don’t have a nvidia video card, or change the command to whatever is the AMD equivalent)

<span style="color:#323232;">{
</span><span style="color:#323232;">    </span><span style="font-weight:bold;color:#183691;">"layer"</span><span style="color:#323232;">: "top",
</span><span style="color:#323232;">    </span><span style="font-weight:bold;color:#183691;">"position"</span><span style="color:#323232;">: "top",
</span><span style="color:#323232;">    </span><span style="font-weight:bold;color:#183691;">"modules-left"</span><span style="color:#323232;">: [
</span><span style="color:#323232;">        "hyprland/workspaces"
</span><span style="color:#323232;">    ],
</span><span style="color:#323232;">    </span><span style="font-weight:bold;color:#183691;">"modules-center"</span><span style="color:#323232;">: [
</span><span style="color:#323232;">        "hyprland/window"
</span><span style="color:#323232;">    ],
</span><span style="color:#323232;">    </span><span style="font-weight:bold;color:#183691;">"modules-right"</span><span style="color:#323232;">: [
</span><span style="color:#323232;">        "cpu",
</span><span style="color:#323232;">        "custom/gpu-util",
</span><span style="color:#323232;">        "network#wifi",
</span><span style="color:#323232;">        "pulseaudio",
</span><span style="color:#323232;">        "clock",
</span><span style="color:#323232;">        "tray",
</span><span style="color:#323232;">        "custom/notification"
</span><span style="color:#323232;">    ],
</span><span style="color:#323232;">    </span><span style="font-weight:bold;color:#183691;">"hyprland/workspaces"</span><span style="color:#323232;">: {
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"format"</span><span style="color:#323232;">: "{id}",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"on-click"</span><span style="color:#323232;">: "activate",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"sort-by"</span><span style="color:#323232;">: "number",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"persistent-workspaces"</span><span style="color:#323232;">: {
</span><span style="color:#323232;">            </span><span style="font-weight:bold;color:#183691;">"*"</span><span style="color:#323232;">: </span><span style="color:#0086b3;">3
</span><span style="color:#323232;">        },
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"all-outputs"</span><span style="color:#323232;">: </span><span style="color:#0086b3;">false
</span><span style="color:#323232;">    },
</span><span style="color:#323232;">    </span><span style="font-weight:bold;color:#183691;">"clock"</span><span style="color:#323232;">: {
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"format"</span><span style="color:#323232;">: "{:<span></span> %I:%M %p, %a %d}",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"format-alt"</span><span style="color:#323232;">: "{:📅 %B %d, %Y}",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"actions"</span><span style="color:#323232;">: {
</span><span style="color:#323232;">            </span><span style="font-weight:bold;color:#183691;">"on-click"</span><span style="color:#323232;">: "mode"
</span><span style="color:#323232;">        },
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"tooltip"</span><span style="color:#323232;">: </span><span style="color:#0086b3;">false
</span><span style="color:#323232;">    },
</span><span style="color:#323232;">    </span><span style="font-weight:bold;color:#183691;">"cpu"</span><span style="color:#323232;">: {
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"interval"</span><span style="color:#323232;">: </span><span style="color:#0086b3;">5</span><span style="color:#323232;">,
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"format"</span><span style="color:#323232;">: "<span>󰍛</span> {usage:2}%",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"tooltip"</span><span style="color:#323232;">: </span><span style="color:#0086b3;">false
</span><span style="color:#323232;">    },
</span><span style="color:#323232;">    </span><span style="font-weight:bold;color:#183691;">"custom/gpu-util"</span><span style="color:#323232;">: {
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"exec"</span><span style="color:#323232;">: "echo $(nvidia-smi --query-gpu=utilization.gpu --format=csv,noheader,nounits)",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"format"</span><span style="color:#323232;">: "<span>󰘚</span> {}%",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"interval"</span><span style="color:#323232;">: </span><span style="color:#0086b3;">5</span><span style="color:#323232;">,
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"tooltip"</span><span style="color:#323232;">: </span><span style="color:#0086b3;">false
</span><span style="color:#323232;">    },
</span><span style="color:#323232;">    </span><span style="font-weight:bold;color:#183691;">"network#wifi"</span><span style="color:#323232;">: {
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"interval"</span><span style="color:#323232;">: </span><span style="color:#0086b3;">1</span><span style="color:#323232;">,
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"interface"</span><span style="color:#323232;">: "wlan0",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"format-icons"</span><span style="color:#323232;">: [
</span><span style="color:#323232;">            "󰤯",
</span><span style="color:#323232;">            "󰤟",
</span><span style="color:#323232;">            "󰤢",
</span><span style="color:#323232;">            "󰤥",
</span><span style="color:#323232;">            "󰤨"
</span><span style="color:#323232;">        ],
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"format-wifi"</span><span style="color:#323232;">: "<span>{icon}</span> {signalStrength}%",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"format-ethernet"</span><span style="color:#323232;">: "󰈀",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"format-disconnected"</span><span style="color:#323232;">: "<span>󰤮 </span>",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"tooltip"</span><span style="color:#323232;">: </span><span style="color:#0086b3;">true</span><span style="color:#323232;">,
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"tooltip-format-wifi"</span><span style="color:#323232;">: "<span>{icon}</span> {essid} ({signalStrength}%)"
</span><span style="color:#323232;">    },
</span><span style="color:#323232;">    </span><span style="font-weight:bold;color:#183691;">"tray"</span><span style="color:#323232;">: {
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"spacing"</span><span style="color:#323232;">: </span><span style="color:#0086b3;">12
</span><span style="color:#323232;">    },
</span><span style="color:#323232;">    </span><span style="font-weight:bold;color:#183691;">"pulseaudio"</span><span style="color:#323232;">: {
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"format"</span><span style="color:#323232;">: "<span>{icon}</span> {volume}%  {format_source}",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"format-bluetooth"</span><span style="color:#323232;">: "<span>{icon}</span> {volume}%  {format_source}",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"format-bluetooth-muted"</span><span style="color:#323232;">: "<span>󰖁</span>  {format_source}",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"format-muted"</span><span style="color:#323232;">: "<span>󰖁</span>  {format_source}",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"format-source"</span><span style="color:#323232;">: "<span></span> {volume}%",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"format-source-muted"</span><span style="color:#323232;">: "<span></span>",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"format-icons"</span><span style="color:#323232;">: {
</span><span style="color:#323232;">            </span><span style="font-weight:bold;color:#183691;">"headphone"</span><span style="color:#323232;">: "",
</span><span style="color:#323232;">            </span><span style="font-weight:bold;color:#183691;">"phone"</span><span style="color:#323232;">: "",
</span><span style="color:#323232;">            </span><span style="font-weight:bold;color:#183691;">"portable"</span><span style="color:#323232;">: "",
</span><span style="color:#323232;">            </span><span style="font-weight:bold;color:#183691;">"default"</span><span style="color:#323232;">: [
</span><span style="color:#323232;">                "",
</span><span style="color:#323232;">                "",
</span><span style="color:#323232;">                ""
</span><span style="color:#323232;">            ]
</span><span style="color:#323232;">        },
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"on-click"</span><span style="color:#323232;">: "pavucontrol",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"input"</span><span style="color:#323232;">: </span><span style="color:#0086b3;">true
</span><span style="color:#323232;">    },
</span><span style="color:#323232;">    </span><span style="font-weight:bold;color:#183691;">"custom/notification"</span><span style="color:#323232;">: {
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"tooltip"</span><span style="color:#323232;">: </span><span style="color:#0086b3;">false</span><span style="color:#323232;">,
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"format"</span><span style="color:#323232;">: "{icon} {}",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"format-icons"</span><span style="color:#323232;">: {
</span><span style="color:#323232;">            </span><span style="font-weight:bold;color:#183691;">"notification"</span><span style="color:#323232;">: "<span></span><span><sup></sup></span>",
</span><span style="color:#323232;">            </span><span style="font-weight:bold;color:#183691;">"none"</span><span style="color:#323232;">: "",
</span><span style="color:#323232;">            </span><span style="font-weight:bold;color:#183691;">"dnd-notification"</span><span style="color:#323232;">: "<span></span><span><sup></sup></span>",
</span><span style="color:#323232;">            </span><span style="font-weight:bold;color:#183691;">"dnd-none"</span><span style="color:#323232;">: "",
</span><span style="color:#323232;">            </span><span style="font-weight:bold;color:#183691;">"inhibited-notification"</span><span style="color:#323232;">: "<span></span><span><sup></sup></span>",
</span><span style="color:#323232;">            </span><span style="font-weight:bold;color:#183691;">"inhibited-none"</span><span style="color:#323232;">: "",
</span><span style="color:#323232;">            </span><span style="font-weight:bold;color:#183691;">"dnd-inhibited-notification"</span><span style="color:#323232;">: "<span></span><span><sup></sup></span>",
</span><span style="color:#323232;">            </span><span style="font-weight:bold;color:#183691;">"dnd-inhibited-none"</span><span style="color:#323232;">: ""
</span><span style="color:#323232;">        },
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"return-type"</span><span style="color:#323232;">: "json",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"exec-if"</span><span style="color:#323232;">: "which swaync-client",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"exec"</span><span style="color:#323232;">: "swaync-client -swb",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"on-click"</span><span style="color:#323232;">: "sleep 0.1 &amp;&amp; swaync-client -t -sw",
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"escape"</span><span style="color:#323232;">: </span><span style="color:#0086b3;">true
</span><span style="color:#323232;">    },
</span><span style="color:#323232;">    </span><span style="font-weight:bold;color:#183691;">"hyprland/window"</span><span style="color:#323232;">: {
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"separate-outputs"</span><span style="color:#323232;">: </span><span style="color:#0086b3;">true</span><span style="color:#323232;">,
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#183691;">"max-length"</span><span style="color:#323232;">: </span><span style="color:#0086b3;">100
</span><span style="color:#323232;">    }
</span><span style="color:#323232;">}
</span>

~/.config/waybar/style.css

<span style="font-style:italic;color:#969896;">/**
</span><span style="font-style:italic;color:#969896;"> * Global Colors
</span><span style="font-style:italic;color:#969896;"> */
</span><span style="color:#323232;">@</span><span style="color:#63a35c;">define-color</span><span style="color:#323232;"> bg #434C5E;
</span><span style="color:#323232;">@</span><span style="color:#63a35c;">define-color</span><span style="color:#323232;"> bg_lighter #546484;
</span><span style="color:#323232;">@</span><span style="color:#63a35c;">define-color</span><span style="color:#323232;"> fg #</span><span style="color:#795da3;">D8DEE9</span><span style="color:#323232;">;
</span><span style="color:#323232;">@</span><span style="color:#63a35c;">define-color</span><span style="color:#323232;"> red_warn #</span><span style="color:#795da3;">BF616A</span><span style="color:#323232;">;
</span><span style="color:#323232;">
</span><span style="color:#323232;">
</span><span style="font-style:italic;color:#969896;">/**
</span><span style="font-style:italic;color:#969896;"> * Global style
</span><span style="font-style:italic;color:#969896;"> */
</span><span style="color:#63a35c;">* </span><span style="color:#323232;">{
</span><span style="color:#323232;">	</span><span style="color:#0086b3;">font-size</span><span style="color:#323232;">: </span><span style="color:#0086b3;">14</span><span style="font-weight:bold;color:#a71d5d;">px</span><span style="color:#323232;">;
</span><span style="color:#323232;">	</span><span style="color:#0086b3;">font-family</span><span style="color:#323232;">: </span><span style="color:#183691;">JetBrains Mono Nerd Font</span><span style="color:#323232;">, </span><span style="color:#183691;">Font Awesome</span><span style="color:#323232;">, sans-serif;
</span><span style="color:#323232;">    </span><span style="color:#0086b3;">font-weight</span><span style="color:#323232;">: bold;
</span><span style="color:#323232;">    </span><span style="color:#0086b3;">border-radius</span><span style="color:#323232;">: </span><span style="color:#0086b3;">5</span><span style="font-weight:bold;color:#a71d5d;">px</span><span style="color:#323232;">;
</span><span style="color:#323232;">    </span><span style="color:#0086b3;">color</span><span style="color:#323232;">: @fg;
</span><span style="color:#323232;">    </span><span style="color:#0086b3;">border</span><span style="color:#323232;">: </span><span style="color:#0086b3;">0</span><span style="font-weight:bold;color:#a71d5d;">px</span><span style="color:#323232;">;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">
</span><span style="font-style:italic;color:#969896;">/**
</span><span style="font-style:italic;color:#969896;"> *  Bar
</span><span style="font-style:italic;color:#969896;"> */
</span><span style="color:#323232;">#</span><span style="color:#795da3;">waybar </span><span style="color:#323232;">{
</span><span style="color:#323232;">	</span><span style="color:#0086b3;">background-color</span><span style="color:#323232;">: rgba(</span><span style="color:#0086b3;">46</span><span style="color:#323232;">, </span><span style="color:#0086b3;">52</span><span style="color:#323232;">, </span><span style="color:#0086b3;">64</span><span style="color:#323232;">, </span><span style="color:#0086b3;">0.6</span><span style="color:#323232;">);
</span><span style="color:#323232;">    </span><span style="color:#0086b3;">border-radius</span><span style="color:#323232;">: </span><span style="color:#0086b3;">0</span><span style="color:#323232;">;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="font-style:italic;color:#969896;">/**
</span><span style="font-style:italic;color:#969896;"> * Default module styles
</span><span style="font-style:italic;color:#969896;"> */
</span><span style="color:#323232;">#</span><span style="color:#795da3;">window</span><span style="color:#323232;">,
</span><span style="color:#323232;">#</span><span style="color:#795da3;">custom-packages</span><span style="color:#323232;">,
</span><span style="color:#323232;">#</span><span style="color:#795da3;">memory</span><span style="color:#323232;">,
</span><span style="color:#323232;">#</span><span style="color:#795da3;">clock</span><span style="color:#323232;">,
</span><span style="color:#323232;">#</span><span style="color:#795da3;">custom-gpu-util</span><span style="color:#323232;">,
</span><span style="color:#323232;">#</span><span style="color:#795da3;">cpu</span><span style="color:#323232;">,
</span><span style="color:#323232;">#</span><span style="color:#795da3;">gpu-util
</span><span style="color:#323232;">#</span><span style="color:#795da3;">disk</span><span style="color:#323232;">,
</span><span style="color:#323232;">#</span><span style="color:#795da3;">battery</span><span style="color:#323232;">,
</span><span style="color:#323232;">#</span><span style="color:#795da3;">network</span><span style="color:#323232;">,
</span><span style="color:#323232;">#</span><span style="color:#795da3;">tray</span><span style="color:#323232;">,
</span><span style="color:#323232;">#</span><span style="color:#795da3;">pulseaudio</span><span style="color:#323232;">,
</span><span style="color:#323232;">#</span><span style="color:#795da3;">custom-notification </span><span style="color:#323232;">{
</span><span style="color:#323232;">    </span><span style="color:#0086b3;">background</span><span style="color:#323232;">: @bg;
</span><span style="color:#323232;">    </span><span style="color:#0086b3;">margin</span><span style="color:#323232;">: </span><span style="color:#0086b3;">5</span><span style="font-weight:bold;color:#a71d5d;">px</span><span style="color:#323232;">;
</span><span style="color:#323232;">    </span><span style="color:#0086b3;">padding</span><span style="color:#323232;">: </span><span style="color:#0086b3;">2</span><span style="font-weight:bold;color:#a71d5d;">px </span><span style="color:#0086b3;">10</span><span style="font-weight:bold;color:#a71d5d;">px</span><span style="color:#323232;">;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">
</span><span style="font-style:italic;color:#969896;">/**
</span><span style="font-style:italic;color:#969896;"> * WORKSPACES module specific style
</span><span style="font-style:italic;color:#969896;"> */
</span><span style="color:#323232;">#</span><span style="color:#795da3;">workspaces </span><span style="color:#323232;">{
</span><span style="color:#323232;">	</span><span style="color:#0086b3;">background</span><span style="color:#323232;">: @bg;
</span><span style="color:#323232;">    </span><span style="color:#0086b3;">margin</span><span style="color:#323232;">: </span><span style="color:#0086b3;">5</span><span style="font-weight:bold;color:#a71d5d;">px </span><span style="color:#0086b3;">3</span><span style="font-weight:bold;color:#a71d5d;">px </span><span style="color:#0086b3;">5</span><span style="font-weight:bold;color:#a71d5d;">px </span><span style="color:#0086b3;">12</span><span style="font-weight:bold;color:#a71d5d;">px</span><span style="color:#323232;">;
</span><span style="color:#323232;">    </span><span style="color:#0086b3;">padding</span><span style="color:#323232;">: </span><span style="color:#0086b3;">0</span><span style="font-weight:bold;color:#a71d5d;">px </span><span style="color:#0086b3;">2</span><span style="font-weight:bold;color:#a71d5d;">px</span><span style="color:#323232;">;
</span><span style="color:#323232;">    </span><span style="color:#0086b3;">font-style</span><span style="color:#323232;">: normal;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">#</span><span style="color:#795da3;">workspaces </span><span style="color:#63a35c;">button </span><span style="color:#323232;">{
</span><span style="color:#323232;">    </span><span style="color:#0086b3;">padding</span><span style="color:#323232;">: </span><span style="color:#0086b3;">0</span><span style="font-weight:bold;color:#a71d5d;">px </span><span style="color:#0086b3;">8</span><span style="font-weight:bold;color:#a71d5d;">px</span><span style="color:#323232;">;
</span><span style="color:#323232;">    </span><span style="color:#0086b3;">margin</span><span style="color:#323232;">: </span><span style="color:#0086b3;">4</span><span style="font-weight:bold;color:#a71d5d;">px</span><span style="color:#323232;">;
</span><span style="color:#323232;">    </span><span style="color:#0086b3;">background-color</span><span style="color:#323232;">: @bg_lighter;
</span><span style="color:#323232;">    </span><span style="color:#0086b3;">opacity</span><span style="color:#323232;">: </span><span style="color:#0086b3;">0.7</span><span style="color:#323232;">;
</span><span style="color:#323232;">    </span><span style="color:#0086b3;">transition</span><span style="color:#323232;">: all </span><span style="color:#0086b3;">0.3</span><span style="font-weight:bold;color:#a71d5d;">s </span><span style="color:#323232;">ease-in-out;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">#</span><span style="color:#795da3;">workspaces </span><span style="color:#63a35c;">button</span><span style="color:#323232;">.</span><span style="color:#795da3;">active </span><span style="color:#323232;">{
</span><span style="color:#323232;">    </span><span style="color:#0086b3;">background</span><span style="color:#323232;">: @red_warn;
</span><span style="color:#323232;">    </span><span style="color:#0086b3;">min-width</span><span style="color:#323232;">: </span><span style="color:#0086b3;">40</span><span style="font-weight:bold;color:#a71d5d;">px</span><span style="color:#323232;">;
</span><span style="color:#323232;">    </span><span style="color:#0086b3;">transition</span><span style="color:#323232;">: all </span><span style="color:#0086b3;">0.3</span><span style="font-weight:bold;color:#a71d5d;">s </span><span style="color:#323232;">ease-in-out;
</span><span style="color:#323232;">    </span><span style="color:#0086b3;">opacity</span><span style="color:#323232;">: </span><span style="color:#0086b3;">1.0</span><span style="color:#323232;">;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">#</span><span style="color:#795da3;">workspaces </span><span style="color:#63a35c;">button</span><span style="color:#323232;">:hover {
</span><span style="color:#323232;">    </span><span style="color:#0086b3;">background</span><span style="color:#323232;">: @red_warn;
</span><span style="color:#323232;">    </span><span style="color:#0086b3;">opacity</span><span style="color:#323232;">: </span><span style="color:#0086b3;">1.0</span><span style="color:#323232;">;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">
</span><span style="font-style:italic;color:#969896;">/**
</span><span style="font-style:italic;color:#969896;"> * Tooltip style
</span><span style="font-style:italic;color:#969896;"> */
</span><span style="color:#323232;">tooltip {
</span><span style="color:#323232;">  </span><span style="color:#0086b3;">background</span><span style="color:#323232;">: @bg;
</span><span style="color:#323232;">  </span><span style="color:#0086b3;">border</span><span style="color:#323232;">: </span><span style="color:#0086b3;">1</span><span style="font-weight:bold;color:#a71d5d;">px </span><span style="color:#323232;">solid @bg_lighter;
</span><span style="color:#323232;">  </span><span style="color:#0086b3;">opacity</span><span style="color:#323232;">: </span><span style="color:#0086b3;">0.9</span><span style="color:#323232;">;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">tooltip </span><span style="color:#63a35c;">label </span><span style="color:#323232;">{
</span><span style="color:#323232;">  </span><span style="color:#0086b3;">color</span><span style="color:#323232;">: @fg;
</span><span style="color:#323232;">}
</span>