Skip to content

Commit

Permalink
added landscape support and updated readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@zzzeyez
zzzeyez committed Dec 20, 2020
1 parent 5886607 commit 37a6395
Show file tree
Hide file tree
Showing 5 changed files with 62 additions and 30 deletions.
26 changes: 21 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

# pecan

![Screenshot 3](/screenshots/1.jpg)
![Screenshot 1](/screenshots/1.jpg)

A bar for macOS. Reports — by default — the current workspace, cpu load, network bandwidth, date, battery percentage and time.

Expand All @@ -25,31 +25,47 @@ If Übersicht is running, then the bar should appear.

## Customization & Themes

If `wal` is installed then `pecan` will grab it's colors from that by default. To further edit the appearance you can edit a config at `~/.config/pecan.css` – the included `config.css` can be placed there to discover options.
To edit the appearance you can place a config at `~/.config/pecan.css` – the included `config.css` can be placed there to discover options.

```sh
mv "$HOME/Library/Application Support/Übersicht/widgets/pecan/config.css" "${HOME}/.config/pecan.css"
```

## Optional features

![Screenshot 2](/screenshots/2.jpg)

This is *pecan*'s default appearance with *ifstat*, *yabai*, [*xanthia*](https://github.com/zzzeyez/xanthia/) and [*landscape*](https://github.com/zzzeyez/landscape/) installed.

### Ifstat

Current download and upload speeds may be shown in the 2nd-to-left element via *Ifstat*. If *Ifstat* is not found, then the current WiFi network will be displayed instead. To install *Ifstat via* Homebrew:
*Ifstat* displays current upload and download speeds. Current download and upload speeds may be shown in the 2nd-to-left element via *Ifstat*. If *Ifstat* is not found, then the current WiFi network will be displayed instead. To install *Ifstat via* Homebrew:

```sh
brew install ifstat
```

### Yabai

Current workspace ID can be shown on the left element if [Yabai](https://github.com/koekeishiya/yabai) is installed, otherwise a power symbol will be shown instead. To install *Yabai*:
*Yabai* is a window manager. Current workspace ID can be shown on the left element if [*Yabai*](https://github.com/koekeishiya/yabai) is installed, otherwise a power symbol will be shown instead. To install *Yabai*:

```sh
brew install yabai
```

### xanthia

If *xanthia* is installed then it will now use *pecan*'s config. Install [xanthia](https://github.com/zzzeyez/xanthia/blob/master/README.md#Installation).
*xanthia* is a notification system. If *xanthia* is installed then it will display notifications on the left (useful for showing current song playing, chat notifications, etc.) *xanthia* will use *pecan*'s config at `~/.config/pecan.css`. Install [*xanthia*](https://github.com/zzzeyez/xanthia/blob/master/README.md#Installation).

### landscape

*landscape* is a workspace selector. If *landscape* is installed then it will display clickablle images of available workspaces on the left. *landscape* will use *pecan*'s config at `~/.config/pecan.css`. Install [*landscape*](https://github.com/zzzeyez/xanthia/blob/master/README.md#Installation).

### pywal

![Screenshot 3](/screenshots/3.jpg)

This is *pecan* with all optional features and [*pywal*](https://github.com/dylanaraps/pywal/tree/master/pywal) installed.

*Pywal* is a system colorscheme manager. If *Pywal* is installed then *pecan* will grab it's colors from that by default.

Binary file modified screenshots/1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added screenshots/2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added screenshots/3.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
66 changes: 41 additions & 25 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* pecan is a bar for Ubersicht */
/* written by daniel neemann (@zzzeyez) */
/* import colors */
@import url(pecan.css);
/*@import url(pecan.css);*/
@import url(colors.css);
:root {
/*this changes xanthia appearance
Expand All @@ -27,15 +27,27 @@
);
--default-background-xanthia: var(
--background-xanthia,
var(--color4, #869bc4)
var(--color4, #222)
);
--default-foreground-xanthia: var(
--foreground-xanthia,
var(--background, #f5ece3)
var(--background, #eee)
);
--default-border-radius-left-xanthia-image: 0px;
--default-border-radius-right-xanthia: 0px;
--default-shadow-xanthia: 0px 4px 10px 4px rgba(0, 0, 0, 0);
--default-shadow-xanthia: 0px 1px 1px 1px rgba(0, 0, 0, 0.18);

/*landscape*/
--default-height-landscape: calc(
var(--height, 36px) - var(--border, 3px) * 2
);
--default-margin-landscape: calc(
var(--padding-top, 10px) + var(--border, 3px)
);
--default-border-landscape: var(--border, 3px);
--default-border-radius-landscape: var(--border-radius-inner, 3px);
--default-shadow-landscape: 0px 1px 1px 1px rgba(0, 0, 0, 0.18);

}

/* get monitor width */
Expand All @@ -46,7 +58,7 @@

/* bar background */
.pecanbackground {
background-color: var(--background-base, var(--background, #f5ece3));
background-color: var(--background-base, NONE);
display: block;
position: absolute;
height: var(--height, 36px);
Expand All @@ -61,7 +73,7 @@
margin-left: var(--padding-left, 10px);
opacity: var(--opacity, 1);
z-index: -1;
box-shadow: var(--shadow, 0px 4px 10px 4px rgba(0, 0, 0, 0.15));
box-shadow: var(--shadow, 0px 4px 10px 4px rgba(0, 0, 0, 0.0));
border-top-left-radius: var(--border-radius, 4px);
border-top-right-radius: var(--border-radius, 4px);
border-bottom-right-radius: var(--border-radius, 4px);
Expand All @@ -88,10 +100,10 @@
/* workspace indicator -- far left */
.pecanworkspace {
font: var(--font-size, 12px) var(--font, Menlo);
color: var(--foreground-workspace, var(--background, #f5ece3));
color: var(--foreground-workspace, var(--background, #eee));
display: inline-block;
position: absolute;
background-color: var(--background-workspace, var(--color1, #de7171));
background-color: var(--background-workspace, var(--color1, #222));
opacity: var(--opacity-inner, 1);
top: var(--alignment-top, 0);
right: auto;
Expand All @@ -100,20 +112,22 @@
padding: 0 var(--text-padding, 1ch);
margin-top: calc(var(--padding-top, 10px) + var(--border, 3px));
margin-bottom: calc(var(--padding-top, 10px) + var(--border, 3px));
margin-left: calc(var(--padding-left, 10px) + var(--border, 3px));
margin-left: calc(
var(--padding-left, 10px) + var(--border, 3px) + var(--landscape-width-total, 0px)
);
line-height: calc(var(--height, 36px) - calc(var(--border, 3px) * 2));
border-top-left-radius: var(--border-radius-inner, 3px);
border-top-right-radius: var(--border-radius-inner, 3px);
border-bottom-right-radius: var(--border-radius-inner, 3px);
border-bottom-left-radius: var(--border-radius-inner, 3px);
box-shadow: var(--shadow-inner, 0px 1px 1px 1px rgba(0, 0, 0, 0));
box-shadow: var(--shadow-inner, 0px 1px 1px 1px rgba(0, 0, 0, 0.18));
}

/* load -- 2nd to the left */
.pecanload {
font: var(--font-size, 12px) var(--font, Menlo);
color: var(--foreground-load, var(--background, #f5ece3));
background-color: var(--background-load, var(--color2, #67c698));
color: var(--foreground-load, var(--background, #eee));
background-color: var(--background-load, var(--color2, #222));
opacity: var(--opacity-inner, 1);
position: absolute;
display: inline-block;
Expand All @@ -126,6 +140,7 @@
margin-top: calc(var(--border, 3px) + var(--padding-top, 10px));
margin-bottom: calc(var(--border, 3px) + var(--padding-top, 10px));
margin-left: calc(
var(--landscape-width-total, 0px) +
var(--padding-left, 10px) + calc(var(--text-padding, 1ch) * 2) + 1ch +
calc(var(--border, 3px) * 2)
);
Expand All @@ -134,7 +149,7 @@
border-top-right-radius: var(--border-radius-inner, 3px);
border-bottom-right-radius: var(--border-radius-inner, 3px);
border-bottom-left-radius: var(--border-radius-inner, 3px);
box-shadow: var(--shadow-inner, 0px 1px 1px 1px rgba(0, 0, 0, 0));
box-shadow: var(--shadow-inner, 0px 1px 1px 1px rgba(0, 0, 0, 0.18));
display: flex;
align-items: center;
justify-content: space-between;
Expand All @@ -155,9 +170,9 @@
/* network -- 3rd to left */
.pecannetwork {
font: var(--font-size, 12px) var(--font, Menlo);
background-color: var(--background-network, var(--color3, #ff9a73));
background-color: var(--background-network, var(--color3, #222));
opacity: var(--opacity-inner, 1);
color: var(--foreground-network, var(--background, #f5ece3));
color: var(--foreground-network, var(--background, #eee));
position: absolute;
display: inline-block;
top: var(--alignment-top, 0);
Expand All @@ -168,6 +183,7 @@
margin-top: calc(var(--border, 3px) + var(--padding-top, 10px));
margin-bottom: calc(var(--border, 3px) + var(--padding-top, 10px));
margin-left: calc(
var(--landscape-width-total, 0px) +
var(--padding-left, 10px) + calc(var(--text-padding, 1ch) * 4) + 1ch +
calc(var(--border, 3px) * 3) + 16ch
);
Expand All @@ -176,14 +192,14 @@
border-top-right-radius: var(--border-radius-inner, 3px);
border-bottom-right-radius: var(--border-radius-inner, 3px);
border-bottom-left-radius: var(--border-radius-inner, 3px);
box-shadow: var(--shadow-inner, 0px 1px 1px 1px rgba(0, 0, 0, 0));
box-shadow: var(--shadow-inner, 0px 1px 1px 1px rgba(0, 0, 0, 0.18));
}

/* date -- center */
.pecandate {
font: var(--font-size, 12px) var(--font, Menlo);
color: var(--foreground-date, var(--color7, #d8cfc7));
background-color: var(--background-date, var(--background, #f5ece3));
color: var(--foreground-date, var(--color7, #eee));
background-color: var(--background-date, var(--background, #222));
opacity: var(--opacity-inner, 1);
position: absolute;
display: inline-block;
Expand All @@ -200,16 +216,16 @@
border-top-right-radius: var(--border-radius-inner, 3px);
border-bottom-right-radius: var(--border-radius-inner, 3px);
border-bottom-left-radius: var(--border-radius-inner, 3px);
box-shadow: var(--shadow-inner, 0px 1px 1px 1px rgba(0, 0, 0, 0));
box-shadow: var(--shadow-inner, 0px 1px 1px 1px rgba(0, 0, 0, 0.18));
}

/* battery percentage -- 2nd to right */
.pecanbattery {
font: var(--font-size, 12px) var(--font, Menlo);
color: var(--foreground-battery, var(--background, #f5ece3));
color: var(--foreground-battery, var(--background, #eee));
display: inline-block;
position: absolute;
background-color: var(--background-battery, var(--color5, #849199));
background-color: var(--background-battery, var(--color5, #222));
opacity: var(--opacity-inner, 1);
padding: 0 var(--text-padding, 1ch);
top: var(--alignment-top, 0);
Expand All @@ -227,16 +243,16 @@
border-top-right-radius: var(--border-radius-inner, 3px);
border-bottom-right-radius: var(--border-radius-inner, 3px);
border-bottom-left-radius: var(--border-radius-inner, 3px);
box-shadow: var(--shadow-inner, 0px 1px 1px 1px rgba(0, 0, 0, 0));
box-shadow: var(--shadow-inner, 0px 1px 1px 1px rgba(0, 0, 0, 0.18));
}

/* clock -- far right */
.pecanclock {
font: var(--font-size, 12px) var(--font, Menlo);
color: var(--foreground-clock, var(--background, #f5ece3));
color: var(--foreground-clock, var(--background, #eee));
display: inline-block;
position: absolute;
background-color: var(--background-clock, var(--color6, #8cbed6));
background-color: var(--background-clock, var(--color6, #222));
opacity: var(--opacity-inner, 1);
padding: 0 var(--text-padding, 1ch);
margin: var(--border, 3px);
Expand All @@ -252,5 +268,5 @@
border-top-right-radius: var(--border-radius-inner, 3px);
border-bottom-right-radius: var(--border-radius-inner, 3px);
border-bottom-left-radius: var(--border-radius-inner, 3px);
box-shadow: var(--shadow-inner, 0px 1px 1px 1px rgba(0, 0, 0, 0));
box-shadow: var(--shadow-inner, 0px 1px 1px 1px rgba(0, 0, 0, 0.18));
}

0 comments on commit 37a6395

Please sign in to comment.