Added workspaces, window titles, volume, bluetooth, systray and date/time modules to the panel
This commit is contained in:
Jas Singh
361
style.css
Normal file
361
style.css
Normal file
@@ -0,0 +1,361 @@
|
||||
* {
|
||||
all: unset;
|
||||
font-family: "JetBrains Mono Nerd Font";
|
||||
}
|
||||
|
||||
menu {
|
||||
margin: 6px;
|
||||
padding: 6px;
|
||||
background-color: #0e0e1e;
|
||||
background-clip: border-box;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #1e1e2e;
|
||||
}
|
||||
menu menuitem {
|
||||
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
min-height: 20px;
|
||||
min-width: 40px;
|
||||
padding: 4px 8px;
|
||||
color: #FFFFFF;
|
||||
font: initial;
|
||||
text-shadow: none;
|
||||
border-radius: 6px;
|
||||
}
|
||||
menu menuitem:hover, menu menuitem:active {
|
||||
background-color: #1e1e2e;
|
||||
}
|
||||
menu menuitem:disabled {
|
||||
color: #1e1e2e;
|
||||
}
|
||||
menu menuitem arrow {
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
|
||||
margin-left: 8px;
|
||||
}
|
||||
menu separator {
|
||||
min-height: 1px;
|
||||
margin: 4px 0;
|
||||
background-color: #1e1e2e;
|
||||
}
|
||||
|
||||
menu > arrow {
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
padding: 4px;
|
||||
color: #1e1e2e;
|
||||
}
|
||||
|
||||
menu > arrow.top {
|
||||
margin-top: 0;
|
||||
border-radius: 6px;
|
||||
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
|
||||
}
|
||||
|
||||
menu > arrow.bottom {
|
||||
margin-top: 8px;
|
||||
margin-bottom: -12px;
|
||||
border-radius: 6px;
|
||||
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
|
||||
}
|
||||
|
||||
check,
|
||||
radio {
|
||||
min-height: 15px;
|
||||
min-width: 15px;
|
||||
margin: 4px;
|
||||
padding: 0;
|
||||
color: transparent;
|
||||
background-color: #1e1e2e;
|
||||
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
radio {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
check {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
check:hover,
|
||||
radio:hover {
|
||||
box-shadow: 0 0 0 4px rgba(14, 14, 30, 0.2);
|
||||
background-color: #0e0e1e;
|
||||
}
|
||||
|
||||
check:active,
|
||||
radio:active {
|
||||
box-shadow: 0 0 0 4px rgba(14, 14, 30, 0.2);
|
||||
background-color: #0e0e1e;
|
||||
}
|
||||
|
||||
check:checked, check:indeterminate,
|
||||
radio:checked,
|
||||
radio:indeterminate {
|
||||
color: #0e0e1e;
|
||||
background-color: #9278b6;
|
||||
}
|
||||
|
||||
check:checked:hover, check:indeterminate:hover,
|
||||
radio:checked:hover,
|
||||
radio:indeterminate:hover {
|
||||
box-shadow: 0 0 0 4px rgba(146, 120, 182, 0.2);
|
||||
background-color: #9278b6;
|
||||
}
|
||||
|
||||
check:checked:active, check:indeterminate:active,
|
||||
radio:checked:active,
|
||||
radio:indeterminate:active {
|
||||
box-shadow: 0 0 0 4px rgba(146, 120, 182, 0.2);
|
||||
background-color: #9278b6;
|
||||
}
|
||||
|
||||
switch {
|
||||
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
margin: 4px 0;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
background-color: #1e1e2e;
|
||||
background-clip: padding-box;
|
||||
font-size: 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
switch:checked {
|
||||
background-color: #9278b6;
|
||||
}
|
||||
|
||||
switch:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
switch slider {
|
||||
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
min-width: 18px;
|
||||
min-height: 18px;
|
||||
margin: 3px;
|
||||
border-radius: 9999px;
|
||||
outline: none;
|
||||
background-color: #CDD6F4;
|
||||
border: none;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
scale {
|
||||
min-height: 2px;
|
||||
min-width: 2px;
|
||||
}
|
||||
|
||||
scale.horizontal {
|
||||
padding: 17px 12px;
|
||||
}
|
||||
|
||||
scale.vertical {
|
||||
padding: 12px 17px;
|
||||
}
|
||||
|
||||
scale slider {
|
||||
min-height: 18px;
|
||||
min-width: 18px;
|
||||
margin: -8px;
|
||||
}
|
||||
|
||||
scale trough {
|
||||
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
outline: none;
|
||||
background-color: #1e1e2e;
|
||||
}
|
||||
|
||||
scale highlight {
|
||||
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
background-color: #9278b6;
|
||||
}
|
||||
|
||||
scale highlight:disabled {
|
||||
background-color: #1e1e2e;
|
||||
}
|
||||
|
||||
scale fill {
|
||||
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
scale fill:disabled {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
scale slider {
|
||||
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
border-radius: 9999px;
|
||||
color: #9278b6;
|
||||
background-color: #0e0e1e;
|
||||
box-shadow: inset 0 0 0 2px #9278b6;
|
||||
}
|
||||
|
||||
scale slider:hover {
|
||||
box-shadow: inset 0 0 0 2px #9278b6, 0 0 0 8px rgba(146, 120, 182, 0.1);
|
||||
}
|
||||
|
||||
scale slider:active {
|
||||
box-shadow: inset 0 0 0 4px #9278b6, 0 0 0 8px rgba(146, 120, 182, 0.1);
|
||||
}
|
||||
|
||||
tooltip {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
tooltip.background {
|
||||
background-color: #0e0e1e;
|
||||
color: #CDD6F4;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
separator {
|
||||
min-width: 1px;
|
||||
min-height: 1px;
|
||||
background-color: #1e1e2e;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
-gtk-icon-transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
spinner {
|
||||
background: none;
|
||||
opacity: 0;
|
||||
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
|
||||
}
|
||||
|
||||
spinner:checked {
|
||||
opacity: 1;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.audio-volume-box .audio-volume-label {
|
||||
min-width: 3rem;
|
||||
}
|
||||
|
||||
.mixer-item {
|
||||
margin: 5px 0px;
|
||||
}
|
||||
.mixer-item .mixer-item-volume {
|
||||
margin: 0px 8px;
|
||||
}
|
||||
.mixer-item .mixer-item-title {
|
||||
margin: 0px 8px;
|
||||
}
|
||||
.mixer-item .mixer-item-slider {
|
||||
margin: 8px;
|
||||
}
|
||||
.mixer-item image {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.bar-volume_icon {
|
||||
font-size: 17px;
|
||||
color: #fab387;
|
||||
}
|
||||
|
||||
.bar-volume_percentage {
|
||||
color: #fab387;
|
||||
}
|
||||
|
||||
.bar-bt_icon {
|
||||
font-size: 17px;
|
||||
color: #89dceb;
|
||||
}
|
||||
|
||||
.bar-bt_label {
|
||||
color: #89dceb;
|
||||
}
|
||||
|
||||
.clock {
|
||||
color: #f5c2e7;
|
||||
}
|
||||
|
||||
.workspaces label {
|
||||
font-size: 0px;
|
||||
min-width: 12px;
|
||||
min-height: 12px;
|
||||
border-radius: 6.6px;
|
||||
margin: 0px 3.5px;
|
||||
transition: 150ms;
|
||||
background-color: #b4befe;
|
||||
}
|
||||
.workspaces label.occupied {
|
||||
background-color: #eba0ac;
|
||||
min-width: 12px;
|
||||
min-height: 12px;
|
||||
}
|
||||
.workspaces label.active {
|
||||
background-color: #89dceb;
|
||||
min-width: 30px;
|
||||
min-height: 12px;
|
||||
}
|
||||
|
||||
.workspaces label:not(:first-child) {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.window_title {
|
||||
color: #f9e2af;
|
||||
}
|
||||
|
||||
.systray button:not(:first-child) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.systray-menu {
|
||||
background: #181825;
|
||||
}
|
||||
|
||||
.systray-menu label {
|
||||
font-weight: bold;
|
||||
color: #b4befe;
|
||||
}
|
||||
|
||||
.systray-menu separator {
|
||||
background-color: #45475a;
|
||||
}
|
||||
|
||||
.systray-menu check:not(:checked) {
|
||||
background-color: #313244;
|
||||
border: 1px solid #b4befe;
|
||||
}
|
||||
|
||||
.systray-menu check:checked {
|
||||
background-color: #b4befe;
|
||||
}
|
||||
|
||||
.bar {
|
||||
background: #181825;
|
||||
}
|
||||
|
||||
.bar * {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bar_item_box_visible {
|
||||
background: #313244;
|
||||
border-radius: 8px;
|
||||
padding: 1px 12px;
|
||||
margin: 6px 3px;
|
||||
}
|
||||
|
||||
.bar_item_box_hidden {
|
||||
background: none;
|
||||
border-radius: 0px;
|
||||
padding: 0px 0px 0px 0px;
|
||||
margin: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.box-left {
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.box-right {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
Reference in New Issue
Block a user