Pecan Style

style.scss

/* pecan is a bar for Ubersicht */
/* written by daniel neemann (@zzzeyez) */

/* import colors */
@import "/Users/zzzeyez/.cache/wal/colors.scss";

:root {

/* background colors */
	--pecan-bg: #{$color0};
	--pecan-bg-pecanworkspace: #{$color0};
	--pecan-bg-pecannetwork: var(--pecan-bg-pecanworkspace);
	--pecan-bg-pecandate: var(--pecan-bg-pecanworkspace);
	--pecan-bg-pecanbattery: var(--pecan-bg-pecanworkspace);
	--pecan-bg-pecanclock: var(--pecan-bg-pecanworkspace);
	--pecan-xanthia-bg: var(--pecan-bg-pecanworkspace);
	--pecan-xanthia-image-bg: var(--pecan-bg-pecanworkspace);
	
/* foreground colors */
	--pecan-fg-pecanworkspace: #{$color7};
	--pecan-fg-pecannetwork: var(--pecan-fg-pecanworkspace);
	--pecan-fg-pecandate: var(--pecan-fg-pecanworkspace);
	--pecan-fg-pecanbattery: var(--pecan-fg-pecanworkspace);
	--pecan-fg-pecanclock: var(--pecan-fg-pecanworkspace);
	--pecan-xanthia-fg: var(--pecan-fg-pecanworkspace);
	
/* size */
	--pecan-height: 30px;
	/* no variables accepted for chunk */
	--pecan-chunkwm-bar: 35px;
	--pecan-chunkwm-gaps: 5px;
	--pecan-xanthia-max-width: none;
	--pecan-xanthia-max-height: none;
	--pecan-xanthia-min-width: none;
	--pecan-xanthia-min-height: calc(var(--pecan-height) - calc(var(--pecan-border) * 2));
	/* --pecan-xanthia-image-size: calc(var(--pecan-height) - calc(var(--pecan-border) * 2)); */
	--pecan-xanthia-image-size: 0px;
	--pecan-chunkwm-bar: 20px;

/* opacity */
	--pecan-opacity: 1; /* this value affects --pecan-border */
	--pecan-opacity-inner: 1;
	--pecan-opacity-center: 0;
	--pecan-xanthia-opacity: 1;
	--pecan-xanthia-image-opacity: 1;	
			
/* alignment */
	--pecan-alignment-top: 0;
	--pecan-alignment-right: 0;
	--pecan-alignment-bottom: auto;
	--pecan-alignment-left: 0;
	--pecan-xanthia-alignment-top: 0;
	--pecan-xanthia-alignment-right: 0;
	--pecan-xanthia-alignment-bottom: auto;
	--pecan-xanthia-alignment-left: auto;
	--pecan-xanthia-image-alignment-top: 0;
	--pecan-xanthia-image-alignment-right: 0;
	--pecan-xanthia-image-alignment-bottom: auto;
	--pecan-xanthia-image-alignment-left: auto;
	
/* padding */
	--pecan-padding-left: 5px;
	--pecan-padding-right: var(--pecan-padding-left);
	--pecan-padding-v: var(--pecan-padding-left);
	--pecan-xanthia-padding-h: calc(var(--pecan-xanthia-image-size) + var(--pecan-xanthia-image-padding-h)); 
	--pecan-xanthia-padding-v: calc(var(--pecan-border) + var(--pecan-padding-v));
	--pecan-xanthia-image-padding-v: var(--pecan-xanthia-padding-v);
	--pecan-xanthia-image-padding-h: calc(var(--pecan-padding-right) + calc(var(--pecan-text-padding) * 4) + 14ch + calc(3 * var(--pecan-border)));

/* shadow */
	--pecan-shadow: 0px 4px 10px 4px rgba(0,0,0,0.0);
	--pecan-shadow-inner: 0px 1px 1px 1px rgba(0,0,0,0.0);
	--pecan-xanthia-shadow: var(--pecan-shadow-inner);
	--pecan-xanthia-image-shadow: var(--pecan-shadow-inner);
	
/* border */
	--pecan-border: 3px;
	--pecan-border-radius: 6px;
	--pecan-border-radius-inner: 3px;
	--pecan-xanthia-border-radius-left: var(--pecan-border-radius-inner);
	--pecan-xanthia-border-radius-right: 0px;
	--pecan-xanthia-image-border-radius-left: 0px;
	--pecan-xanthia-image-border-radius-right: var(--pecan-border-radius-inner);
	--pecan-xanthia-image-border: none;
	
/* typography */
	--pecan-font: SF Mono, scientifica, Menlo, Monospace;
	--pecan-font-size: 11px;
	--pecan-font-style: regular;
	--pecan-line-height: calc(var(--pecan-height) - calc(var(--pecan-border) * 2));
	--pecan-text-padding: 2ch;
	--webkit-font-smoothing: none;
	--pecan-xanthia-font: var(--pecan-font);
	--pecan-xanthia-font-size: var(--pecan-font-size);
	--pecan-xanthia-font-style: var(--pecan-font-style);
	--pecan-xanthia-line-height: var(--pecan-xanthia-min-height);
	--pecan-xanthia-text-padding: var(--pecan-text-padding);

/* fade (to disable, set as "auto") */
	--pecan-xanthia-time-visible: auto;
	--pecan-xanthia-image-time-visible: auto;
}

/* get monitor width */
.screen {
	width: 100vw;
	height: 100vh;
}

/* bar background */
.pecanbackground {
	background-color: var(--pecan-bg);
	display: block;
	position: absolute;
  	height: var(--pecan-height);
	top: var(--pecan-alignment-top);
	right: var(--pecan-alignment-right);
	bottom: var(--pecan-alignment-bottom);
	left: var(--pecan-alignment-left);
	margin-top: var(--pecan-padding-v);
	margin-right: var(--pecan-padding-right);
	margin-bottom: var(--pecan-padding-v);
	margin-left: var(--pecan-padding-left);
	opacity: var(--pecan-opacity);
	z-index: -1;
	box-shadow: var(--pecan-shadow);
	border-top-left-radius: var(--pecan-border-radius);
	border-top-right-radius: var(--pecan-border-radius);
	border-bottom-right-radius: var(--pecan-border-radius);
	border-bottom-left-radius: var(--pecan-border-radius);
}

/* invisible container to align center element */
.pecanholder {
	background-color: none;
	display: inline-block;
	position: absolute;
  	height: var(--pecan-height);
	top: var(--pecan-alignment-top);
	right: var(--pecan-alignment-right);
	bottom: var(--pecan-alignment-bottom);
	left: var(--pecan-alignment-left);
	margin-top: var(--pecan-padding-v);
	margin-right: var(--pecan-padding-right);
	margin-bottom: var(--pecan-padding-v);
	margin-left: var(--pecan-padding-left);
}

/* workspace indicator -- far left */
.pecanworkspace {
	font: var(--pecan-font-size) var(--pecan-font);
	font-style: var(--pecan-font-style);
	color: var(--pecan-fg-pecanworkspace);
	display: inline-block;
	position: absolute;
	background-color: var(--pecan-bg-pecanworkspace);
	opacity: var(--pecan-opacity-inner);
	top: var(--pecan-alignment-top);
	right: auto;
	bottom: var(--pecan-alignment-bottom);
	left: 0px;
	padding: 0 var(--pecan-text-padding);
	margin-top: calc(var(--pecan-padding-v) + var(--pecan-border));
	margin-bottom: calc(var(--pecan-padding-v) + var(--pecan-border));
	margin-left: calc(var(--pecan-padding-left) + var(--pecan-border));
	line-height: var(--pecan-line-height);
	border-top-left-radius: var(--pecan-border-radius-inner);
	border-top-right-radius: var(--pecan-border-radius-inner);
	border-bottom-right-radius: var(--pecan-border-radius-inner);
	border-bottom-left-radius: var(--pecan-border-radius-inner);
	box-shadow: var(--pecan-shadow-inner);
}

/* network -- 2nd to left */
.pecannetwork {
	font: var(--pecan-font-size) var(--pecan-font);
	font-style: var(--pecan-font-style);
	background-color: var(--pecan-bg-pecannetwork);
	opacity: var(--pecan-opacity-inner);
	color: var(--pecan-fg-pecannetwork);
	position: absolute;
	display: inline-block;
	top: var(--pecan-alignment-top);
	right: auto;
	bottom: var(--pecan-alignment-bottom);
	left: 0px;
	padding: 0 var(--pecan-text-padding);
	margin-top: calc(var(--pecan-border) + var(--pecan-padding-v));
	margin-bottom: calc(var(--pecan-border) + var(--pecan-padding-v));
	margin-left: calc(var(--pecan-padding-left) + calc(var(--pecan-text-padding) * 2) + 1ch + calc(var(--pecan-border) * 2));
	line-height:  var(--pecan-line-height);
	border-top-left-radius: var(--pecan-border-radius-inner);
	border-top-right-radius: var(--pecan-border-radius-inner);
	border-bottom-right-radius: var(--pecan-border-radius-inner);
	border-bottom-left-radius: var(--pecan-border-radius-inner);
	box-shadow: var(--pecan-shadow-inner);
}

/* date -- center */
.pecandate {
	font: var(--pecan-font-size) var(--pecan-font);
	font-style: var(--pecan-font-style);
	color: var(--pecan-fg-pecandate);
	background-color: var(--pecan-bg-pecandate);
	opacity: var(--pecan-opacity-center);
	position: absolute;
	display: inline-block;
	padding: 0 var(--pecan-text-padding);
	width: auto;
	top: var(--pecan-alignment-top);
	bottom: var(--pecan-alignment-bottom);
	left: 50%;
	transform: translate(-50%);
	margin: calc(var(--pecan-padding-v) + var(--pecan-border));
	line-height: var(--pecan-line-height);
	text-align: center;
	border-top-left-radius: var(--pecan-border-radius-inner);
	border-top-right-radius: var(--pecan-border-radius-inner);
	border-bottom-right-radius: var(--pecan-border-radius-inner);
	border-bottom-left-radius: var(--pecan-border-radius-inner);
	box-shadow: var(--pecan-shadow-inner);
}

/* battery percentage -- 4th to left */
.pecanbattery {
	font: var(--pecan-font-size) var(--pecan-font);
	font-style: var(--pecan-font-style);
	color: var(--pecan-fg-pecanbattery);
 	display: inline-block;
	position: absolute;
	background-color: var(--pecan-bg-pecanbattery);
	opacity: var(--pecan-opacity-inner);
	padding: 0 var(--pecan-text-padding);
	top: var(--pecan-alignment-top);
	right: 0px;
	bottom: var(--pecan-alignment-bottom);
	left: auto;
	margin-top: calc(var(--pecan-padding-v) + var(--pecan-border));
	margin-right: calc(var(--pecan-padding-right) + calc(var(--pecan-text-padding) * 2) + 9ch + calc(var(--pecan-border) * 2));
	margin-bottom: calc(var(--pecan-padding-v) + var(--pecan-border));
	line-height:  var(--pecan-line-height);
	border-top-left-radius: var(--pecan-border-radius-inner);
	border-top-right-radius: var(--pecan-border-radius-inner);
	border-bottom-right-radius: var(--pecan-border-radius-inner);
	border-bottom-left-radius: var(--pecan-border-radius-inner);
	box-shadow: var(--pecan-shadow-inner);
}

/* clock -- 5th to left */
.pecanclock {
	font: var(--pecan-font-size) var(--pecan-font);
	font-style: var(--pecan-font-style);
	color: var(--pecan-fg-pecanclock);
 	display: inline-block;
	position: absolute;
	background-color: var(--pecan-bg-pecanclock);
	opacity: var(--pecan-opacity-inner);
	padding: 0 var(--pecan-text-padding);
	margin: var(--pecan-border);
	top: var(--pecan-alignment-top);
	right: 0px;
	bottom: var(--pecan-alignment-bottom);
	left: auto;
	margin-top: calc(var(--pecan-padding-v) + var(--pecan-border));
	margin-right: calc(var(--pecan-border) + var(--pecan-padding-right));
	margin-bottom: calc(var(--pecan-padding-v) + var(--pecan-border));
	line-height:   var(--pecan-line-height);
	border-top-left-radius: var(--pecan-border-radius-inner);
	border-top-right-radius: var(--pecan-border-radius-inner);
	border-bottom-right-radius: var(--pecan-border-radius-inner);
	border-bottom-left-radius: var(--pecan-border-radius-inner);
	box-shadow: var(--pecan-shadow-inner);
}