💥 fix: correctly use centerbox with gtkbuilder types, fix styles
also re-added some windows to the windows list(they were causing issues before)
This commit is contained in:
retrozinndev
+62
-120
@@ -25,27 +25,11 @@
|
||||
border-radius: $radius;
|
||||
padding: 0 $padding;
|
||||
|
||||
& > eventbox {
|
||||
&:hover {
|
||||
& > box {
|
||||
background: $color-hover;
|
||||
}
|
||||
}
|
||||
& > box {
|
||||
border-radius: calc($radius - $padding);
|
||||
margin: $padding 0;
|
||||
}
|
||||
|
||||
& > box {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
& > button,
|
||||
& > box > button {
|
||||
& > box:not(.workspaces-row):not(.tray):not(.focused-client),
|
||||
& > button {
|
||||
border-radius: calc($radius - $padding);
|
||||
margin: $padding 0;
|
||||
padding: 0 9px;
|
||||
padding: 0 8px;
|
||||
|
||||
&:hover {
|
||||
background: $color-hover;
|
||||
@@ -56,23 +40,21 @@
|
||||
.workspaces-row {
|
||||
padding: 4px;
|
||||
|
||||
& eventbox > box > eventbox {
|
||||
& > box {
|
||||
margin: 3px 0;
|
||||
border-radius: 16px;
|
||||
transition: 80ms linear;
|
||||
min-width: 16px;
|
||||
padding: 0 6px;
|
||||
background: colors.$bg-tertiary;
|
||||
& .workspace {
|
||||
margin: 3px 0;
|
||||
border-radius: 16px;
|
||||
transition: 80ms linear;
|
||||
min-width: 16px;
|
||||
padding: 0 6px;
|
||||
background: colors.$bg-tertiary;
|
||||
|
||||
& label.id {
|
||||
font-weight: 600;
|
||||
margin-right: 4px;
|
||||
opacity: 0;
|
||||
}
|
||||
& label.id {
|
||||
font-weight: 600;
|
||||
margin-right: 4px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.focus > box {
|
||||
&.focus {
|
||||
background: colors.$fg-primary;
|
||||
min-width: 32px;
|
||||
|
||||
@@ -90,20 +72,8 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover > box {
|
||||
box-shadow: inset 0 0 0 100px rgba($color: colors.$fg-primary, $alpha: .2);
|
||||
}
|
||||
}
|
||||
|
||||
&.special-workspaces {
|
||||
& > eventbox {
|
||||
& box {
|
||||
background: wal.$color4;
|
||||
}
|
||||
|
||||
&:hover > box {
|
||||
background: functions.toRGB(color.adjust(wal.$color4, $lightness: -6%));
|
||||
}
|
||||
&:hover:not(.last-client-icon):not(.focus) {
|
||||
box-shadow: inset 0 0 0 14px rgba($color: colors.$fg-primary, $alpha: .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -111,12 +81,13 @@
|
||||
.focused-client {
|
||||
padding: 0 6px;
|
||||
|
||||
& > .icon {
|
||||
& image {
|
||||
margin-right: 6px;
|
||||
-gtk-icon-size: 18px;
|
||||
}
|
||||
|
||||
& > .text-content {
|
||||
& > .class {
|
||||
& .text-content {
|
||||
& .class {
|
||||
font-size: 9px;
|
||||
font-family: monospace;
|
||||
font-weight: 600;
|
||||
@@ -124,7 +95,7 @@
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
& > .title {
|
||||
& .title {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-top: -2px;
|
||||
@@ -136,42 +107,32 @@
|
||||
background-color: colors.$bg-primary;
|
||||
}
|
||||
|
||||
.media-eventbox {
|
||||
& > .media {
|
||||
background: colors.$bg-primary;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.media {
|
||||
background: colors.$bg-primary;
|
||||
padding: 0 2px;
|
||||
|
||||
&:hover > .media {
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 300px rgba(colors.$fg-primary, .2);
|
||||
}
|
||||
|
||||
& icon {
|
||||
font-size: 14px;
|
||||
& image {
|
||||
-gtk-icon-size: 14px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
& .media-controls {
|
||||
transition: none;
|
||||
margin-left: 6px;
|
||||
border-top-right-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
transition: none;
|
||||
margin-left: 6px;
|
||||
border-top-right-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
|
||||
& > button {
|
||||
margin: 4px 1px;
|
||||
& > button {
|
||||
margin: 4px 1px;
|
||||
|
||||
& icon {
|
||||
font-size: 10px;
|
||||
}
|
||||
& icon {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.reveal {
|
||||
& .media > box {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -179,71 +140,52 @@
|
||||
padding: 0 6px;
|
||||
|
||||
& .item {
|
||||
&:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
margin: 0 6px;
|
||||
padding: 0;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
all: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
@include mixins.reset-props;
|
||||
|
||||
&:hover > box,
|
||||
&.open > box {
|
||||
&.open {
|
||||
background: colors.$bg-primary;
|
||||
}
|
||||
|
||||
& > box {
|
||||
padding: 0 8px;
|
||||
& image {
|
||||
-gtk-icon-size: 14px;
|
||||
}
|
||||
|
||||
& icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
& revealer > box {
|
||||
background: rgba($color: colors.$bg-tertiary, $alpha: .7);
|
||||
border-radius: 12px;
|
||||
margin: 4px 0;
|
||||
margin-left: 5px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
& revealer > eventbox > box {
|
||||
background: rgba($color: colors.$bg-tertiary, $alpha: .7);
|
||||
border-radius: 12px;
|
||||
margin: 4px 0;
|
||||
margin-left: 5px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
& .status-icons {
|
||||
padding-left: 4px;
|
||||
|
||||
& .status-icons {
|
||||
padding-left: 4px;
|
||||
|
||||
& icon.notification-count {
|
||||
font-size: 6px;
|
||||
margin-top: -14px;
|
||||
}
|
||||
& icon.notification-count {
|
||||
font-size: 6px;
|
||||
margin-top: -14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.apps {
|
||||
& > box {
|
||||
min-width: 22px;
|
||||
& > icon {
|
||||
transition: 120ms linear;
|
||||
font-size: 14px;
|
||||
}
|
||||
min-width: 18px;
|
||||
& image {
|
||||
transition: 120ms linear;
|
||||
-gtk-icon-size: 14px;
|
||||
}
|
||||
&.open > box {
|
||||
|
||||
&.open {
|
||||
background: colors.$bg-primary;
|
||||
}
|
||||
|
||||
&:hover icon {
|
||||
-gtk-icon-transform: scale(1.144);
|
||||
&:hover image {
|
||||
-gtk-icon-transform: scale(1.01);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+9
-11
@@ -1,17 +1,15 @@
|
||||
@use "sass:color";
|
||||
@use "./wal";
|
||||
@use "./functions" as funs;
|
||||
|
||||
@use "colors";
|
||||
|
||||
.osd {
|
||||
background: funs.toRGB(color.change($color: wal.$background, $alpha: 65%));
|
||||
padding: 16px;
|
||||
background: rgba(colors.$bg-translucent-secondary, .6);
|
||||
padding: 14px 14px;
|
||||
border-radius: 24px;
|
||||
min-width: 180px;
|
||||
|
||||
.icon {
|
||||
margin-right: 10px;
|
||||
font-size: 24px;
|
||||
-gtk-icon-size: 24px;
|
||||
}
|
||||
|
||||
.volume {
|
||||
@@ -25,16 +23,16 @@
|
||||
|
||||
levelbar {
|
||||
trough block {
|
||||
border-radius: 2px;
|
||||
background: funs.toRGB(color.adjust($color: wal.$color1, $lightness: -36%));
|
||||
border-radius: 3px;
|
||||
background: colors.$bg-primary;
|
||||
|
||||
&.empty {
|
||||
border-radius: 2px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&.filled {
|
||||
padding: 3px 0;
|
||||
background: wal.$color1;
|
||||
min-height: 8px;
|
||||
background: colors.$bg-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user