my humble bar on sway #864

mthsrnn · 2025-02-06T21:09:35Z

mthsrnn
Feb 6, 2025

Posting here because, alongside the wiki, this discussion has helped me to figure a lot of things out; so maybe it can be of help for someone else :)
Also, I had much more fun configuring and using this in comparison to other bars - corn is particularly amazing! Thanks (and congratulations) to all devs involved.
(using the "lastest" version, i.e pulled from gh and compiled from source)

main monitor:

monitor 2:

(the lyrics thingy on monitor 2 is done with playerctl-lyrics configured to run in background)

config.corn

  let {
   $music = {
     type = "music"
     player_type = "mpris"
     format = "󰝚 {title} / {artist}"
     truncate.mode = "end" 
     truncate.max_length = 20
     show_status_icon = false
     icons.play = ""
     icons.pause = "󰏥"
     icons.prev = "󰙣"
     icons.next = "󰙡"
     icons.volume = "󰕾"
   }

 $volume = {
     name = "som"
     type = "volume"
     format = "{icon} {percentage}%"
     max_volume = 100
     icons.volume_high = "󰕾"
     icons.volume_medium = "󰖀"
     icons.volume_low = "󰕿"
     icons.muted = "󰝟"
 }

 $focused = { 
   name = "foco"
   type = "focused"
   show_icon = false
   icon_size = 0
   truncate.mode = "end" 
   truncate.max_length = 20 
 }

 $clock = {
   type = "clock"
   format = "%a, %d %b %H:%M"
 }

 $battery = {
   type = "upower"
   icon_size = 14
   format = "{percentage}%"
 }

 $system = {
   type = "sys_info"
   name = "system"
   interval.memory = 30
   interval.cpu = 1
   interval.temps = 5

   format = [
     " {cpu_percent}%"
     " {temp_c:k10temp-Tctl}°C"
     " {memory_percent}%"
   ]
 }
 
 $tray = {
   type = "tray"
   direction = "h"
   icon_size = 14
 }

 $workspaces = {
   type = "workspaces"
   all_monitos = true
   favorites = ["1" "2" "3" "4" "5" "6" "7" "8" "9" "10"]
   sort = "name"
   // name_map.1 = "󰧞"
   // name_map.2 = "󰧞"
   // name_map.3 = "󰧞"
   // name_map.4 = "󰧞"
   // name_map.5 = "󰧞"
   // name_map.6 = "󰧞"
   // name_map.7 = "󰧞"
   // name_map.8 = "󰧞"
   // name_map.9 = "󰧞"
   // name_map.0 = "󰧞"
 }


 $network = {
     type = "network_manager"
     icon_size = 14
   }
 
 $swaymode = {
       type = "sway_mode"
       truncate = "start"
   }

 $notifications = {
     type = "notifications"
     show_count = true
     icons.closed_none = "󰂜"
     icons.closed_some = "󰂜"
     icons.closed_dnd = "󰪓"
     icons.open_none = "󰂚"
     icons.open_some = "󰂚"
     icons.open_dnd = "󰂠"
   }

 $lyrics = {
       type = "script"
       name = "lyrics"
       mode = "poll"
       interval = 1000
       cmd = "cat /home/renan/.currentlyrics"
   }

 $left = [ $workspaces $focused $music $swaymode ]
 $center = [ $clock ]
 $right = [ $tray $network $volume $battery $system $notifications ]

}

in {
   monitors.eDP-1 = {
       position = "top"
       height = 30
       icon_theme = "oomox-srcery-mthsrnn"
       start = $left
       center = $center
       end = $right
   }

   monitors.HDMI-A-1 = {
       position = "bottom"
       height = 30
       center = [ $lyrics ]
   }
}

style.css

NOTE: srcery_css.css file is taken from srcery colors gtk

@import 'srcery_css.css';

* {
    font-family: IosevkaTermNerdFontPropo;
    font-size: 16;
    box-shadow: none;
    border: none;
    border-radius: 0px;
    border-image: none;
    background-image: none;
    outline: none;
    text-shadow: none;
    margin: 0;
    padding: 0;
}

button {
    box-shadow: none;
    border: none;
    background: none;
    outline: none;
    text-shadow: none;
}

.background {
    background-color: rgba(0,0,0,0);
}

scale slider {
  margin: -4px;
  min-width: 12px;
  min-height: 12px;
}

@keyframes blinker {
  50% {
    color: @srcery-red;
  }
}

#bar {
    /* background-color: @srcery-black; */
    /* box-shadow: inset 0 4 0 0 @srcery-xgray2; */
    min-height: 1.93em;
}

/* base */
.tray,
.notifications,
.button,
.widget,
.upower,
.clock,
.workspaces,
.system,
#lyrics,
#foco,
#wifi,
#system {
    margin-left: 4px;
    transition: all 0.5s;
    transition-timing-function: ease;

}

.workspaces {
    background-color: transparent;
    margin-left: 0px;
}

/*  -------- WORKSPACES ---------  */
.workspaces .item {
    box-shadow: inset 0 4 0 0 @srcery-bright-green;
    transition: all 0.5s;
    transition-timing-function: ease;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 5px;
    background-color: @srcery-black;
    border-radius: 0 0 .4em .4em;
}

.workspaces .item:not(:nth-child(1)){
    margin-left: 4px;
}

.workspaces .item.focused:hover,
.workspaces .item.focused {
    font-weight: bold;
    box-shadow: inset 0 35 0 0 @srcery-bright-green;
    color: @srcery-black;
}

.workspaces .item.inactive {
    background-color: @srcery-hard-black;
    box-shadow: inset 0 4 0 0 @srcery-xgray2;
    color: @srcery-xgray2;
}
.workspaces .item.inactive:hover {
    box-shadow: inset 0 6 0 0 @srcery-xgray5;
    color: @srcery-xgray5;
}

.workspaces .item.urgent,
.workspaces .item focused urgent.
.workspaces .item.urgent:hover{
    animation: blinker 1s linear infinite;
}

.workspaces .item:hover{
    box-shadow: inset 0 6 0 0 @srcery-bright-green;
}

/*  -------- MUSIC ---------  */

.music{
    background-color: @srcery-black;
    border-radius: 0 0 .4em .4em;
    box-shadow: inset 0 4 0 0 @srcery-cyan;
    padding-left: 4px;
    padding-right:4px;
    padding-top: 5px;
}

.music label{
    font-size: 16;
}

.music:hover{
    color: @srcery-black;
    box-shadow: inset 0 35 0 0 @srcery-cyan;
}

.popup-music {
    background-color: @srcery-black;
    box-shadow: inset 0px 4px 0px 0px @srcery-cyan;
    margin-top: 3px;
    padding: 20px 20px 20px 20px;
    border-radius: 0 0 .5em .5em;
}

.popup-music .title .icon-box .text-icon,
.popup-music .artist .icon-box .text-icon,
.popup-music .volume .icon,
.popup-music .album .icon-box .text-icon {
    font-family: JetBrainsMono NFP;
    color: @srcery-cyan;
} 

.popup-music .controls {
    margin-left: 17px;
}
.popup-music .controls label {
    font-family: JetBrainsMono NFP;
    padding-right: 16px;
    color: @srcery-cyan;
}

.popup-music .controls *:disabled {
    color: @srcery-white;
}

.popup-music .title .icon-box .text-icon,
.popup-music .artist .icon-box .text-icon,
.popup-music .album .icon-box .text-icon {
    min-width: 20px;
} 

.popup-music .volume label  {
    margin-right: 18px;
}

.popup-music .progress scale trough,
.popup-music .volume scale trough {
    background-color: @srcery-bright-black;
}

.popup-music .progress scale trough highlight,
.popup-music .volume scale trough highlight{
    background-color: @srcery-cyan;
}

.popup-music .volume .slider slider,
.popup-music .progress .slider slider {
    background-color: @srcery-white;
    border-radius: 100%;
}

.popup-music .progress .label,
.popup-music .volume text {
    color: @srcery-bright-black;
}

/*  -------- FOCUSED ---------  */
#foco .label{
    background-color: @srcery-black;
    box-shadow: inset 0px 4px 0px 0px @srcery-blue;
    padding-left: 4px;
    padding-right:4px;
    padding-top: 5px;
    border-radius: 0 0 .4em .4em;
}

/*  -------- SWAYMODE ---------  */
.sway_mode {
    color: @srcery-magenta;
    padding-left: 4px;
    padding-right:4px;
    padding-top: 6px;
}

/*  -------- NETWORK ---------  */
.network_manager {
    background-color: @srcery-black;
    box-shadow: inset 0px 4px 0px 0px @srcery-magenta;
    padding-left: 4px;
    padding-right:4px;
    padding-top: 5px;
    border-radius: 0 0 .4em .4em;
}

/*  -------- VOLUME ---------  */
#som {
    background-color: @srcery-black;
    border-radius: 0 0 .4em .4em;
    box-shadow: inset 0px 4px 0px 0px @srcery-red;
    padding-left: 4px;
    padding-right:4px;
    padding-top: 5px;
}

#som:hover {
    color: @srcery-black;
    box-shadow: inset 0px 32px 0px 0px @srcery-red;
}
.popup-volume{
    border-radius: 0 0 .4em .4em;
    background-color: @srcery-black;
    box-shadow: inset 0px 4px 0px 0px @srcery-red;
    margin-top: 3px;
    padding: 20px 20px 20px 20px;
}

.popup-volume .device-box scale trough,
.popup-volume .apps-box scale trough
{
    background-color: @srcery-bright-black;
}

.popup-volume .device-box scale trough highlight,
.popup-volume .apps-box scale trough highlight
{
    background-color: @srcery-red;
}

.popup-volume .device-box .slider slider,
.popup-volume .apps-box .slider slider {
    background-color: @srcery-white;
    border-radius: 100%;
}

.popup-volume .device-box button label,
.popup-volume .apps-box button label{
    color: @srcery-red;
}
/*  -------- BATTERY ---------  */
.upower {
    background-color: @srcery-black;
    border-radius: 0 0 .4em .4em;
    box-shadow: inset 0px 4px 0px 0px @srcery-orange;
    padding-left: 4px;
    padding-right:4px;
    padding-top: 5px;
}

.upower:hover {
    color: @srcery-black;
    box-shadow: inset 0px 32px 0px 0px @srcery-orange;
}

.popup-upower {
    border-radius: 0 0 .4em .4em;
    background-color: @srcery-black;
    box-shadow: inset 0px 4px 0px 0px @srcery-orange;
    margin-top: 3px;
    padding: 20px 20px 20px 20px;
}

/*  -------- SYSINFO ---------  */
.sysinfo .item{
    border-radius: 0 0 .4em .4em;
    background-color: @srcery-black;
    padding-left:4px;
    padding-right:4px;
    padding-top: 5px;
}

.sysinfo .item:not(:nth-child(1)){
    margin-left: -6px;
}

.sysinfo .item:nth-child(1) {
    box-shadow: inset 0px 4px 0px 0px @srcery-yellow;
}

.sysinfo .item:nth-child(2) {
    box-shadow: inset 0px 4px 0px 0px @srcery-green;
}

.sysinfo .item:nth-child(3) {
    box-shadow: inset 0px 4px 0px 0px @srcery-cyan;
}



/*  -------- NOTIFICATIONS ---------  */
.notifications button  {
    margin-left: 4px;
    font-family: IosevkaTermNerdFontMono;
    background-color: @srcery-black;
    padding-top: 5px;
    box-shadow: inset 0px 4px 0px 0px @srcery-blue;
    border-radius: 0 0 .4em .4em;
}

.notifications button:hover  {
    box-shadow: inset 0px 40px 0px 0px @srcery-blue;
}

.notifications .count {
    font-family: IosevkaTermNerdFontMono;
	font-size: .6rem;
    box-shadow: none;
	background-color: @srcery-red;
	color: @srcery-bright-white;
    margin-top:6px;
    padding-left: 4;
    padding-right: 4;
    padding-top: 0;
    padding-bottom: 0;
	border-radius: 100%;
	opacity: 1;
}

/*  -------- CLOCK ---------  */
.clock {
    padding-left:4px;
    padding-right:4px;
    padding-top: 5px;
    border-radius: 0 0 .4em .4em;
    background-color: @srcery-black;
    box-shadow: inset 0px 4px 0px 0px @srcery-white;
}

.clock:hover {
    box-shadow: inset 0px 35px 0px 0px @srcery-white;
    color: @srcery-black;
}

.popup-clock .calendar-clock {
	color: @srcery-white;
	font-size: 2.2em;
	margin-top: 3px;
	margin-bottom: 7px;
    padding: 0px 2em 0px 2em;
	border-radius: 7px;
	background-color: @srcery-black;
}

.popup-clock .calendar {
    transition: all 0.3s;
	background-color: @srcery-black;
	color: @srcery-bright-white;
    border-radius: .4em;
}

.popup-clock .calendar .header {
    padding-top: 1em;
}

.popup-clock .calendar:selected {
    background-image: -gtk-gradient (linear,
                                       left bottom,
       left bottom,
       from (#519F50),
       to (#98BC37));
    color: @srcery-black;
}

/*  -------- TRAY ---------  */

.tray {
    padding-top: 5px;
}

.tray .item {
    padding-left:4px;
    padding-right:4px;
}

/*  -------- LYRICS ---------  */

#lyrics {
    padding-bottom: 5px;
    min-width: 5em;
    font-family: IosevkaTermNerdFontPropo;
    font-style: italic;
    font-weight: 500;
    font-size: 14pt;
    text-shadow: @srcery-hard-black 4px 1px 2px;
    color: @srcery-bright-yellow;

}

JakeStanger · 2025-02-06T21:48:50Z

JakeStanger
Feb 6, 2025
Maintainer

Thanks for sharing and for the kind words :)

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

my humble bar on sway #864

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

my humble bar on sway #864

Uh oh!

mthsrnn Feb 6, 2025

Replies: 1 comment

Uh oh!

JakeStanger Feb 6, 2025 Maintainer

mthsrnn
Feb 6, 2025

JakeStanger
Feb 6, 2025
Maintainer