dotfiles/eww/eww.scss

$transparent: #0000;
$background-alt: #373B41;
//$background: rgba(#AA282A, 0.3);
$background: rgba($background-alt, 0.82);
$foreground: #C5C8C6;
$primary: #F0C674;
$secondary: #8ABEB7;
$alert: #A54242;
$disabled: #707880;


* {
	all: unset; //Unsets everything so you can style everything from scratch
	font-family: "JetBrains Mono NFP", "MesloLGS NF", "FontAwesome";
	font-size: 14px;
}

window, tooltip {
	background: $background;
	color: $foreground;
	border-radius: 8px;
	margin: 3px 3px 0 3px;
	border: 1px solid #707880;
}


.bar {
	padding: 0 6px 0 0px;
}

.sep {
	color: $disabled;
	margin: 0 3px;
}

.no-left-pad {
	margin-left: 0px;
}

.space {
	margin-left: 4px;
}

.workspaces {
	margin-top: 1px;
}

.workspaces {
	* {
		padding: 0 3px;
	}

	.current {
		background-color: rgba($color: #FFF, $alpha: 0.1);
		border-bottom: 2px solid $primary;
	}

	.first {
		border-radius: 8px 0 0 8px;
		// FIXME: Not being represented in UI for some reason
		padding: 0 2px 0 4px;
	}
}

.audio-info {
	color: $primary;
}

.label_circle .value {
	background-color: $disabled;
	.label {
		color: $primary;
		margin: 0 7px;
		font-size: 13px;
	}
}

.label_value .label {
	color: $primary;
	margin-right: 4px;
}

.label_value .muted {
	color: $disabled;
}

.label-time {
	color: $primary;
}

.power {
	* {
		margin: 0 1px;
	}

	.lock {
		color: #007FFF;
	}

	.sleep {
		color: #00FF7F;
	}

	.hibernate {
		color: #7FFF00;
	}

	.reboot {
		color: #FF7F00;
	}

	.shutdown {
		color: #F00;
	}

	.control {
		color: $primary;
	}
}

.disabled {
	color: $disabled;
}

.primary {
	color: $primary;
}

.alert {
	color: $alert;
}

calendar:selected {
	color: $primary;
}