Olivier/colorshell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ eww: add floating media popup on bar media click

Browse Source
This commit is contained in:
retrozinndev
2024-12-20 15:46:04 -03:00
parent b0d61250e8
commit 5bc04e4dff
13 changed files with 224 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
eww/styles/bar.scss
+40 -25
View File
@@ -65,38 +65,46 @@
}
.systray {
margin: 0 6px;
all: unset;
& > * > * {
margin: 0 6px;
}
}
.mediaplayer {
border-radius: 12px;
& > .media {
border-radius: inherit;
background: darken($color: $color3, $amount: 5);
& > label {
color: $foreground;
font-size: inherit;
&:first-child {
margin-left: 8px;
}
&:last-child {
margin-right: 8px;
&:hover {
& > box {
box-shadow: inset 0 0 0 50px rgba($color: $foreground, $alpha: .1);
}
}
& > box {
border-radius: inherit;
background: darken($color: $color3, $amount: 5);
& > box.separator {
margin: 8px 4px;
padding: 0 1px;
background: darken($color: $foreground, $amount: 20);
& > label {
color: $foreground;
font-size: inherit;
&:first-child {
margin-left: 8px;
}
&:last-child {
margin-right: 8px;
}
}
& > box.separator {
margin: 8px 4px;
padding: 0 1px;
background: darken($color: $foreground, $amount: 20);
}
}
}
@@ -104,7 +112,7 @@
background: darken($color: $color3, $amount: 25);
transition: 80ms linear;
.media {
.media > box {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
@@ -115,8 +123,7 @@
border-bottom-right-radius: 12px;
& button:last-child {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
border-radius: inherit;
}
}
}
@@ -191,11 +198,19 @@
}
.control-center-toggle {
padding-left: 12px;
padding-right: 14px;
border-radius: 12px;
&:hover {
background: darken($color: $color2, $amount: 10);
}
label {
font-size: 12px;
& > box {
padding-left: 12px;
padding-right: 14px;
label {
font-size: 12px;
}
}
&.open {
eww/styles/control-center.scss
+1 -57
View File
@@ -39,62 +39,6 @@ box.cc {
}
}
.big-media {
padding: 16px;
margin: 6px 0;
border-radius: 18px;
& > .album-image {
background-size: 100%;
background-repeat: no-repeat;
background-position: center 0;
margin-right: 12px;
border-radius: 11px;
}
& > .right {
& > .media-info {
label {
font-family: "Cantarell", "Noto Sans CJK JP";
}
& label.title {
font-weight: 700;
font-size: 16px;
margin-bottom: 6px;
}
& label.artist {
font-weight: 600;
font-size: 12px;
margin-bottom: 12px;
}
}
& > .controls {
padding: 0px;
& > button {
padding: 4px 9px;
& > label {
font-size: 13.3px;
}
}
& > button.repeat {
padding-right: 11px;
}
}
}
&.album-bg {
box-shadow: inset 0 0 0 100px rgba($background, .6);
background-size: cover;
}
}
.cc-notifications {
& > .vertical-scroll {
.notifications {
@@ -186,7 +130,7 @@ box.cc {
&:checked {
& > box {
background: darken($color: $color1, $amount: 12);
background: darken($color: $color3, $amount: 12);
}
}
eww/styles/general.scss
+57
View File
@@ -145,3 +145,60 @@ tooltip {
box-shadow: 0 3px 5px 1px rgba($color: #000000, $alpha: .8);
}
}
.big-media {
padding: 16px;
margin: 6px 0;
border-radius: 18px;
& > box > .album-image {
background-size: 100%;
background-repeat: no-repeat;
background-position: center 0;
margin-right: 12px;
border-radius: 11px;
}
& > box > .right {
& > .media-info {
label {
font-family: "Cantarell", "Noto Sans CJK JP";
}
& label.title {
font-weight: 700;
font-size: 16px;
margin-bottom: 6px;
}
& label.artist {
font-weight: 600;
font-size: 12px;
margin-bottom: 12px;
}
}
& > .controls {
padding: 0px;
& > button {
padding: 4px 9px;
& > label {
font-size: 13.3px;
}
}
& > button.repeat {
padding-right: 11px;
}
}
}
&.album-bg {
box-shadow: inset 0 0 0 100px rgba($background, .55);
background-size: cover;
}
}