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

✨ eww: add new tiles to control-center, new notification popup, new styles for a lot of widgets

Browse Source
This commit is contained in:
retrozinndev
2025-01-07 16:26:20 -03:00
parent 435b222e03
commit c505ecf4cf
43 changed files with 802 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files
eww/styles/bar.scss
+70 -20
View File
@@ -18,6 +18,13 @@
& > * {
margin: 0 3px;
border-radius: 12px;
&.button {
margin: 0;
& > box {
margin: 0 3px;
}
}
}
& > *:first-child {
@@ -35,21 +42,27 @@
// Styles the literal script for workspace indicators
.workspaces {
padding: 2px 0px;
border-radius: 50%;
& button {
$padding-block: 5px;
border-radius: 16px;
margin: 0 2px;
padding: $padding-block 12px;
padding: 5px 12px;
background: lighten($color: $color1, $amount: 10);
&:not(.active):hover {
box-shadow: inset 0 0 0 50px rgba($color: $foreground, $alpha: .5);
}
&.active {
padding: $padding-block 22px;
padding-right: 22px;
padding-left: 22px;
background: $foreground;
}
&.special {
background: darken($color: $color3, $amount: 5);
}
}
}
@@ -99,17 +112,10 @@
margin-right: 8px;
}
}
& > box.separator {
margin: 8px 4px;
padding: 0 1px;
background: darken($color: $foreground, $amount: 20);
}
}
}
&.revealed {
background: darken($color: $color3, $amount: 25);
transition: 80ms linear;
.media > box {
@@ -118,12 +124,31 @@
}
.media-controls {
background: darken($color: $color3, $amount: 25);
padding: 3px;
background: darken($color: $color3, $amount: 10);
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
& button:last-child {
border-radius: inherit;
& button {
background: $color2;
margin: 0 1px;
border-radius: 2px;
&:hover {
background: lighten($color: $color2, $amount: 5);
}
&:first-child {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
margin-left: 0;
}
&:last-child {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
margin-right: 0;
}
}
}
}
@@ -135,7 +160,7 @@
}
.window {
padding: 0 4px;
padding: 0 6px;
& > .icon {
margin-right: 6px;
@@ -146,17 +171,18 @@
font-size: 9.8px;
font-family: monospace;
color: darken($color: $foreground, $amount: 20);
margin-top: -1px;
}
& > label.window-title {
font-size: 12px;
color: $foreground;
margin-top: -3px;
margin-top: -1px;
}
}
}
.network button {
.network-eventbox > box {
padding-left: 10px;
padding-right: 7px;
}
@@ -193,8 +219,18 @@
}
}
.clock button.cal-open {
background: darken($color: $color3, $amount: 10);
.clock {
& .cal-open > box {
background: darken($color: $color3, $amount: 10);
}
& .icon {
margin-right: 6px;
}
& label:not(.icon) {
margin-right: 3px;
}
}
.control-center-toggle {
@@ -217,3 +253,17 @@
background: darken($color: $color3, $amount: 10);
}
}
.hardware {
& > box {
margin: 0 5px;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
}
eww/styles/calendar.scss
+13 -6
View File
@@ -4,31 +4,38 @@
background: rgba($background, 0.6);
border-radius: 16px;
& > label.calendar-header {
font-size: 15px;
& > .time {
font-size: 42px;
font-weight: 700;
}
& > .date {
font-size: 12px;
font-weight: 600;
margin-bottom: 8px;
}
.month-calendar {
& > * {
background: lighten($color: $background, $amount: 2);
}
border-radius: 12px;
padding: 0 5px;
padding-top: 10px;
font-weight: 500;
& > .header {
background: unset;
border-radius: 6px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: solid .5px gray;
}
&:hover {
background: $color2;
}
// Selected day / Current day
&:selected {
background: darken($color: $color1, $amount: 20);
border: 1px solid $color2;
}
}
}
eww/styles/control-center.scss
+35 -16
View File
@@ -1,12 +1,11 @@
box.cc {
margin-top: 8px;
margin-bottom: 14px;
margin-left: 14px;
margin: 12px;
margin-right: 0;
background: rgba($background, .85);
border-top-left-radius: 24px;
border-bottom-left-radius: 24px;
padding: 18px;
box-shadow: 0 5 8px 1px black;
box-shadow: 0 3px 4px 1px $background;
}
.top-bar {
@@ -50,7 +49,7 @@ box.cc {
}
.cc-notifications {
& > .vertical-scroll {
&.scroll {
.notifications {
box.notification {
background: darken($color: $color1, $amount: 10);
@@ -70,6 +69,11 @@ box.cc {
}
font-weight: 600;
}
.close {
padding: 4px 8px;
border-radius: 9px;
}
}
& .content {
@@ -87,7 +91,7 @@ box.cc {
& .text {
& label {
font-family: "Cantarell", "Noto Sans CJK JP", "Noto Sans CJK KR";
font-family: "Cantarell", "Noto Sans", "Noto Sans CJK JP", "Noto Sans CJK KR";
}
& label.summary {
@@ -117,33 +121,36 @@ box.cc {
}
}
.toggles {
.tiles-grid {
margin-bottom: 10px;
& > .toggle-checkbox:first-child {
}
.tiles {
margin-bottom: 2px;
& > .tile-checkbox:first-child {
margin-left: 0;
}
& > .toggle-checkbox:last-child {
& > .tile-checkbox:last-child {
margin-right: 0;
}
& .toggle-checkbox {
& .tile-checkbox {
margin: 2px;
&:hover {
& > box {
background: darken($color: $color2, $amount: 15);
background: $color3;
}
&:checked > box {
background: $color3;
background: $color2;
}
}
&:checked {
& > box {
background: darken($color: $color3, $amount: 5);
background: $color2;
}
}
@@ -151,7 +158,7 @@ box.cc {
color: transparent;
}
& > .toggle {
& > .tile {
background: darken($color: $foreground, $amount: 65);
border-radius: 16px;
padding: 16px;
@@ -180,4 +187,16 @@ box.cc {
margin-right: 4px;
}
}
& .screen-rec {
.icon {
margin-right: 4px;
}
}
& .night-light {
.icon {
margin-right: 4px;
}
}
}
eww/styles/floating-notifications.scss
+29 -1
View File
@@ -1,5 +1,5 @@
.floating-notifications {
& > .floating-notification {
& > .notifications .floating-notification {
$background-color: darken($color: $color1, $amount: 40);
background: $background-color;
border-radius: 16px;
@@ -45,4 +45,32 @@
}
}
& > .bottom {
padding: 8px;
margin: 0 8px;
& .tip {
background: darken($color: $color1, $amount: 40);
border-radius: 12px;
padding: 8px 12px;
box-shadow: 0 0 0px 1px $background;
& > .icon {
margin-right: 4px;
font-size: 16px;
}
}
& > .right {
background: darken($color: $color1, $amount: 40);
border-radius: 12px;
box-shadow: 0 0 0px 1px $background;
& .icon {
margin-right: 4px;
font-size: 16px;
}
}
}
}
eww/styles/general.scss
+17 -3
View File
@@ -12,7 +12,6 @@ label {
}
box.button-row {
padding: 2px;
$bg-color: darken($color: $foreground, $amount: 25);
& > button {
@@ -169,7 +168,7 @@ tooltip {
background-repeat: no-repeat;
background-position: center 0;
margin-right: 12px;
border-radius: 11px;
border-radius: 12px;
}
& > box > .right {
@@ -210,8 +209,23 @@ tooltip {
}
&.album-bg {
box-shadow: inset 0 0 0 100px rgba($background, .55);
box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .5);
background-size: cover;
}
}
box.separator {
background: darken($color: $foreground, $amount: 20);
&.horizontal {
margin: 8px 4px;
padding: 0 1px;
}
&.vertical {
margin: 4px 10px;
padding: 0 1px;
}
}