Skip to content

Commit

Permalink
docs: improve example css
Browse files Browse the repository at this point in the history
  • Loading branch information
@JakeStanger
JakeStanger committed May 2, 2023
1 parent 2a155b9 commit 618b7ef
Showing 1 changed file with 101 additions and 143 deletions.
244 changes: 101 additions & 143 deletions examples/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,148 +1,123 @@
@define-color color_bg #2d2d2d;
@define-color color_bg_dark #1c1c1c;
@define-color color_border #424242;
@define-color color_border_active #6699cc;
@define-color color_text #ffffff;
@define-color color_urgent #8f0a0a;

/* -- base styles -- */

* {
/* `otf-font-awesome` is required to be installed for icons */
font-family: Noto Sans Nerd Font, sans-serif;
font-size: 16px;

border: none;
border-radius: 0;
}

#bar {
border-top: 1px solid #424242;
box, menubar {
background-color: @color_bg;
}

.background, .container {
background-color: #2d2d2d;
button {
color: @color_text;
background-color: @color_bg;
}

#workspaces .item {
color: white;
background-color: #2d2d2d;
border-radius: 0;
label {
color: @color_text;
}

#workspaces .item.focused {
box-shadow: inset 0 -3px;
background-color: #1c1c1c;
}

#workspaces *:not(.focused):hover {
box-shadow: inset 0 -3px;
button:hover {
background-color: @color_bg_dark;
}

#launcher .item {
border-radius: 0;
background-color: #2d2d2d;
margin-right: 4px;
#bar {
border-top: 1px solid @color_border;
}

#launcher .item:not(.focused):hover {
background-color: #1c1c1c;
.popup {
border: 1px solid @color_border;
padding: 1em;
}

#launcher .open {
border-bottom: 2px solid #6699cc;
}

#launcher .focused {
color: white;
background-color: #1c1c1c;
border-bottom: 4px solid #6699cc;
}
/* -- clipboard -- */

#launcher .urgent {
color: white;
background-color: #8f0a0a;
#clipboard {
margin-left: 5px;
font-size: 1.1em;
}

#popup-launcher .popup-item {
color: white;
background-color: #2d2d2d;
border-radius: 0;
#popup-clipboard .item {
padding-bottom: 0.3em;
border-bottom: 1px solid @color_border;
}

#popup-launcher .popup-item:hover {
background-color: #1c1c1c;
}

#popup-launcher .popup-item:not(:first-child) {
border-top: 1px solid white;
}
/* -- clock -- */

#clock {
color: white;
background-color: #2d2d2d;
font-weight: bold;
margin-left: 5px;
}

#clock:hover {
background-color: #1c1c1c;
#calendar-clock {
color: @color_text;
font-size: 2.5em;
padding-bottom: 0.1em;
}

#script {
padding-left: 10px;
color: white;
#popup-clock #calendar {
background-color: @color_bg;
color: @color_text;
}

#sysinfo {
margin-left: 10px;
color: white;
#popup-clock #calendar .header {
padding-top: 1em;
border-top: 1px solid @color_border;
font-size: 1.5em;
}

#sysinfo #item {
margin-left: 5px;
#popup-clock #calendar:selected {
background-color: @color_border_active;
}

#tray {
margin-left: 10px;
}

#tray .item {
background-color: #2d2d2d;
}
/* -- launcher -- */

#music {
background-color: #2d2d2d;
color: white;
#launcher .item {
margin-right: 4px;
}

.popup {
background-color: #2d2d2d;
border: 1px solid #424242;
#launcher .item:not(.focused):hover {
background-color: @color_bg_dark;
}

#popup-clock {
padding: 1em;
#launcher .open {
border-bottom: 2px solid @color_text;
}

#calendar-clock {
color: white;
font-size: 2.5em;
padding-bottom: 0.1em;
#launcher .focused {
border-bottom-color: @color_border_active;
}

#calendar {
background-color: #2d2d2d;
color: white;
#launcher .urgent {
border-bottom-color: @color_urgent;
}

#calendar .header {
padding-top: 1em;
border-top: 1px solid #424242;
font-size: 1.5em;
#popup-launcher {
padding: 0;
}

#calendar:selected {
background-color: #6699cc;
#popup-launcher .popup-item:not(:first-child) {
border-top: 1px solid @color_border;
}

#music:hover {
background-color: #1c1c1c;
}

#popup-music {
color: white;
padding: 1em;
/* -- music -- */

#music:hover * {
background-color: @color_bg_dark;
}

#popup-music #album-art {
Expand All @@ -153,88 +128,71 @@
font-size: 1.7em;
}

#popup-music #controls * {
border-radius: 0;
background-color: #2d2d2d;
color: white;
#popup-music #controls *:disabled {
color: @color_border;
}

#popup-music #controls *:disabled {
color: #424242;
#popup-music #volume scale slider {
border-radius: 100%;
}

/* volume icon */
#popup-music #volume > box:last-child label {
margin-left: 6px;
}

#focused {
color: white;

/* -- script -- */

#script {
padding-left: 10px;
}

.power-menu {

/* -- sys_info -- */

#sysinfo {
margin-left: 10px;
}

.power-menu #power-btn {
color: white;
background-color: #2d2d2d;
#sysinfo #item {
margin-left: 5px;
}

.power-menu #power-btn:hover {
background-color: #1c1c1c;
}

.popup-power-menu {
padding: 1em;
}
/* -- tray -- */

.popup-power-menu #header {
color: white;
font-size: 1.4em;
border-bottom: 1px solid white;
padding-bottom: 0.4em;
margin-bottom: 0.8em;
#tray {
margin-left: 10px;
}

.popup-power-menu .power-btn {
color: white;
background-color: #2d2d2d;
border: 1px solid white;
padding: 0.6em 1em;
}

.popup-power-menu .power-btn + .power-btn {
margin-left: 1em;
}
/* -- workspaces -- */

.popup-power-menu .power-btn:hover {
background-color: #1c1c1c;
#workspaces .item.focused {
box-shadow: inset 0 -3px;
background-color: @color_bg_dark;
}

#clipboard * {
font-size: 1.8em;
#workspaces .item:hover {
box-shadow: inset 0 -3px;
}

#popup-clipboard {
padding: 1em;
color: white;
}

#popup-clipboard .item {
border-bottom: 1px solid #424242;
}
/* -- custom: power menu -- */

#popup-clipboard .btn > *:nth-child(2) {
padding: 10px;
.popup-power-menu #header {
font-size: 1.4em;
padding-bottom: 0.4em;
margin-bottom: 0.6em;
border-bottom: 1px solid @color_border
}

#popup-clipboard .btn-remove {
background-color: #2d2d2d;
color: white;
font-size: 1.2em;
border-left: 1px solid #424242;
.popup-power-menu .power-btn {
border: 1px solid @color_border;
padding: 0.6em 1em;
}

#popup-clipboard .btn-remove:hover {
color: #fcc;
}
.popup-power-menu #buttons > *:nth-child(1) .power-btn {
margin-right: 1em;
}

0 comments on commit 618b7ef

Please sign in to comment.