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

✨ eww: add new features and fix issues

Browse Source
This commit is contained in:
retrozinndev
2024-12-07 16:43:37 -03:00
parent adf8b7d9ba
commit e9258d04e4
26 changed files with 882 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files
eww/styles/audio-popup.scss
+28
View File
@@ -0,0 +1,28 @@
box.audio-popup {
background: rgba($background, .7);
padding: 8px;
margin-right: 6px;
border-radius: 16px;
border: .5px solid rgba($foreground, .3);
}
.separator {
box-shadow: 0 0 0 1px darken($color: $foreground, $amount: 25);
margin: 4px 0;
border-radius: 1px;
}
.output-slider {
label {
margin-left: 18px;
color: $background;
}
}
.source-slider {
label {
margin-left: 18px;
color: $background;
}
}
eww/styles/bar.scss
+78 -87
View File
@@ -1,6 +1,4 @@
$foreground: lighten($color: $foreground, $amount: 10);
.bar {
background: transparent;
padding: 4px;
@@ -29,60 +27,9 @@ $foreground: lighten($color: $foreground, $amount: 10);
& > *:last-child {
margin-right: 0;
}
}
button {
padding: 6px 10px;
border-radius: 12px;
background: none;
}
button:hover {
background: $color3;
}
button:active {
background: darken($color: $color3, $amount: 10);
}
button label {
color: $foreground;
}
menu {
background: $background;
border-radius: 14px;
padding: 2px;
& > menuitem {
padding: 8px 24px;
border-radius: 5px;
&:hover {
background: $color1;
}
&:first-child {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
&:last-child {
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
label {
font-weight: 600;
color: $foreground;
}
}
& > separator {
background: lighten($color: $background, $amount: 5);
margin: .5px 10px;
padding: 1px 0;
border-radius: 1px;
& > *:only-child {
margin: 0 0px;
}
}
@@ -131,29 +78,53 @@ menu {
.mediaplayer {
border-radius: 12px;
box-shadow: inset 0 0 0px 2px $color3;
padding: 0 4px;
padding-right: 0px;
& label.media-title,
& label.media-artist {
margin: 0 4px;
padding-right: 5px;
color: $foreground;
font-size: inherit;
& > .media {
border-radius: inherit;
background: darken($color: $color3, $amount: 15);
& > label {
color: $foreground;
font-size: inherit;
&.media-title {
margin-top: 6px;
margin-bottom: 6px;
border-right: .5px solid darken($color: $foreground, $amount: 20);
&:first-child {
margin-left: 8px;
}
&:last-child {
margin-right: 8px;
}
}
& > box.separator {
margin: 8px 4px;
padding: 0 1px;
background: darken($color: $foreground, $amount: 20);
}
}
&.revealed label.media-artist {
border-right: 2px solid $color3;
&.revealed {
background: darken($color: $color3, $amount: 25);
transition: 80ms linear;
.media {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.media-controls {
background: darken($color: $color3, $amount: 25);
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
& button:last-child {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
}
}
& button {
button {
padding: 0 7px;
border-radius: 0px;
}
@@ -161,26 +132,23 @@ menu {
.window {
padding: 0 4px;
padding-right: 6px;
& > .window-icon {
padding-right: 24px;
margin-right: 4px;
background-position: center;
background-size: 24px;
background-repeat: no-repeat;
& > .icon {
margin: 0 4px;
}
& > label.window-class {
font-size: 10px;
font-family: monospace;
color: darken($color: $foreground, $amount: 20);
}
& > box.info {
& > label.window-class {
font-size: 10px;
font-family: monospace;
color: darken($color: $foreground, $amount: 20);
}
& > label.window-title {
margin-top: -2px;
font-size: inherit;
color: $foreground;
& > label.window-title {
margin-top: -2px;
font-size: inherit;
color: $foreground;
}
}
}
@@ -189,6 +157,29 @@ menu {
padding-right: 7px;
}
.audio-eventbox {
&:hover box.audio {
background: darken($color: $color2, $amount: 5);
}
& > box.audio {
padding: 0 8px;
border-radius: 12px;
label {
font-weight: 600;
&:first-child {
margin-right: 2px;
}
&:last-child {
margin-left: 2px;
}
}
}
}
.notifications button {
padding-left: 12px;
padding-right: 10px;
eww/styles/control-center.scss
+146 -2
View File
@@ -1,9 +1,153 @@
// window.control-center {}
box.cc {
margin: 16px;
background: rgba($background, .85);
border-radius: 16px;
border: 2px solid darken($color: $color3, $amount: 20);
padding: 18px;
}
.quickactions {
margin-bottom: 10px;
& label {
&.hostname {
font-size: 13.3px;
font-weight: 700;
border-bottom: .5px solid rgba(darken($color: $foreground, $amount: 15), .5);
padding-bottom: 4px;
}
&.uptime {
font-size: 11.7px;
font-weight: 500;
}
}
.button-row {
margin: 7px 0;
}
}
.control-center .mediaplayer {
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;
}
}
& > .media-controls {
padding: 0px;
& > button {
padding: 4px 9px;
& > label {
font-size: 13.3px;
}
}
& > button.repeat {
padding-right: 11px;
}
}
}
&.mediaplayer-album-bg {
box-shadow: inset 0 0 0 100px rgba($background, .6);
background-size: cover;
}
}
.cc-notifications {
& > .vertical-scroll {
.notifications {
box.notification {
background: darken($color: $color1, $amount: 10);
border-radius: 16px;
margin: 4px 0;
& > .top {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
background: darken($color: $color1, $amount: 5);
border-bottom: .5px solid rgba(darken($color: $foreground, $amount: 15), .3);
padding: 2px 6px;
& > .app-info {
& .app-icon {
margin-right: 4px;
}
font-weight: 600;
}
}
& .content {
padding: 6px;
padding-top: 0;
& > .image {
border-radius: 16px;
margin-right: 6px;
background-size: cover;
background-repeat: no-repeat;
background-position: center 0;
}
& .text {
& label {
font-family: "Cantarell", "Noto Sans CJK JP", "Noto Sans CJK KR";
}
& label.summary {
font-weight: 600;
font-size: 18px;
margin-top: 6px;
}
& label.body {
font-size: 13.1px;
margin-bottom: 2px;
}
}
}
}
}
}
& .bottom {
margin-top: 4px;
&.button-row {
& button.do-not-disturb {
padding-right: 12px;
}
}
}
}
eww/styles/general.scss
+129
View File
@@ -0,0 +1,129 @@
* {
all: unset;
transition: 120ms linear;
font-size: 12px;
}
label {
color: lighten($foreground, 15)
}
box.button-row {
padding: 2px;
$bg-color: darken($color: $foreground, $amount: 25);
& > button {
background: rgba($bg-color, .7);
border-radius: 1px;
margin: 0 1px;
&:first-child {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
&:last-child {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
&:hover {
background: rgba($bg-color, 1);
}
}
}
box.vertical-button-row {
padding: 2px;
$bg-color: darken($color: $foreground, $amount: 25);
& > button {
background: rgba($bg-color, .7);
border-radius: 2px;
margin: 0 1px;
&:first-child {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
&:last-child {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
&:hover {
background: rgba($bg-color, 1);
}
}
}
button {
padding: 6px 10px;
border-radius: 12px;
background: none;
}
button:hover {
background: darken($color: $color2, $amount: 5);
}
button:active {
background: darken($color: $color3, $amount: 10);
}
button label {
color: $foreground;
}
menu {
background: $background;
border-radius: 14px;
padding: 3px;
& > menuitem {
padding: 8px 24px;
border-radius: 5px;
&:hover {
background: $color1;
}
&:first-child {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
&:last-child {
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
label {
font-weight: 600;
color: $foreground;
}
}
& > separator {
background: lighten($color: $background, $amount: 5);
margin: .5px 10px;
padding: 1px 0;
border-radius: 1px;
}
}
trough {
background: darken($color: $foreground, $amount: 25);
border-radius: 4px;
}
trough highlight {
background: $foreground;
padding: 10px;
border-radius: inherit;
}
scale {
padding: 10px;
}
eww/styles/powermenu.scss
+19
View File
@@ -0,0 +1,19 @@
.powermenu-container {
margin: 400px 100px;
& * {
outline: initial;
}
& > button {
padding: 96px;
& label {
font-size: 98px;
}
}
& button:hover,
& button:focus {
background: darken($color: $color2, $amount: 20);
}
}