nix-config/modules/wm/ironbar/config/style.css

171 lines
3.2 KiB
CSS

:root {
--color-dark-primary: #0f0b15;
--color-dark-secondary: #1d202f;
--color-white: #fff;
--color-white-muted: #807c9f;
--color-active: #d369af;
--color-urgent: #ff6a7a;
--color-muted: #331531;
--margin-lg: 1em;
--margin-sm: 0.5em;
}
* {
border-image: none;
border-radius: 0;
box-shadow: none;
font-family: VictorMono Nerd Font;
font-weight: 600;
color: var(--color-white);
background-color: var(--color-dark-primary);
border: none;
background-image: none;
}
*:hover {
background-image: none;
outline: 0;
border: none;
}
.background {
opacity: 0.94;
}
.background, .container {
background-color: var(--color-dark-primary);
}
#bar, popover, popover contents, calendar {
background-color: var(--color-dark-primary);
}
popover, popover contents, calendar {
background-color: var(--color-dark-primary);
}
.widget {
background-color: var(--color-dark-primary);
outline: 0;
-gtk-icon-filter: none;
}
#end {
margin-right: var(--margin-sm);
}
.sysinfo {
margin-right: var(--margin-sm);
background-color: var(--color-muted);
padding: 0 12px;
}
.sysinfo .item {
background-color: var(--color-muted);
color: var(--color-active);
padding: 0 4px;
margin: 0;
}
.clock {
font-weight: bold;
}
.popup-clock .calendar-clock {
font-size: 2.0em;
}
.popup-clock .calendar .today {
background-color: var(--color-active);
}
.popup-clock .calendar .day-number:selected {
background-color: var(--color-muted);
border: none;
outline: 0;
}
.workspaces {
background-color: var(--color-dark-primary);
}
.workspaces .item{
background-color: var(--color-dark-primary);
color: var(--color-white);
}
.workspaces .item label{
margin-left: 4px;
margin-right: 10px;
}
.workspaces .item:hover{
background-color: var(--color-active);
color: var(--color-white);
}
.workspaces .item:hover label{
background-color: var(--color-active);
color: var(--color-dark-primary);
}
.workspaces .item.visible label{
color: var(--color-dark-primary);
background-color: var(--color-active);
}
.workspaces .item.visible{
background-color: var(--color-dark-primary);
color: var(--color-muted);
}
.workspaces .item.focused {
background-color: var(--color-active);
color: var(--color-muted);
}
.workspaces .item.urgent {
background-color: var(--color-urgent);
}
.notifications .button {
margin: 2px 2px 0 0;
padding: 0 8px;
}
.notifications .count {
background-color: var(--color-active);
border-radius: 100%;
margin-top: 4px;
margin-left: 6px;
padding: 0 5px;
font-size: 12px;
}
.popup-volume .device-box .slider trough slider {
background-color: var(--color-white);
border-radius: 100%;
}
.popup-volume .device-box .slider trough highlight {
border: 4px solid var(--color-active);
}
.popup-volume .apps-box .app-box .slider trough slider {
background-color: var(--color-white);
border-radius: 100%;
}
.popup-volume .apps-box .app-box .slider trough highlight {
border: 4px solid var(--color-active);
}
#bar #start .label:first-child {
color: var(--color-white-muted);
margin-left: var(--margin-lg);
}
.focused {
margin-top: 1px;
}