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

✨ a lot of changes and new stuff! started using mako

Browse Source
This commit is contained in:
retrozinndev
2024-12-19 22:06:54 -03:00
parent ab899c2acb
commit e814cf996f
59 changed files with 837 additions and 542 deletions
Download Patch File Download Diff File Expand all files Collapse all files
eww/styles/bar.scss
+32 -13
View File
@@ -34,18 +34,20 @@
}
// Styles the literal script for workspace indicators
.workspaces {
.workspaces {
padding: 2px 0px;
border-radius: 10px;
border-radius: 50%;
& > button {
$padding-block: 5px;
border-radius: 16px;
margin: 0 2px;
padding: 5px 12px;
background: $color1;
padding: $padding-block 12px;
background: lighten($color: $color1, $amount: 10);
&.active {
padding: 5px 22px;
padding: $padding-block 22px;
background: $foreground;
}
}
@@ -66,7 +68,7 @@
margin: 0 6px;
& > * > * {
margin: 0 4px
margin: 0 6px;
}
}
@@ -76,7 +78,7 @@
& > .media {
border-radius: inherit;
background: darken($color: $color3, $amount: 15);
background: darken($color: $color3, $amount: 5);
& > label {
color: $foreground;
@@ -129,7 +131,7 @@
padding: 0 4px;
& > .icon {
margin: 0 4px;
margin-right: 6px;
}
& > box.info {
@@ -147,7 +149,12 @@
}
}
.network {
.network button {
padding-left: 10px;
padding-right: 7px;
}
.bluetooth button {
padding-left: 10px;
padding-right: 7px;
}
@@ -157,10 +164,14 @@
background: darken($color: $color2, $amount: 5);
}
& > box.audio {
& > .audio {
padding: 0 8px;
border-radius: 12px;
&.open {
background: darken($color: $color3, $amount: 10);
}
label {
font-weight: 600;
@@ -175,11 +186,19 @@
}
}
.control-center-toggle button {
.clock button.cal-open {
background: darken($color: $color3, $amount: 10);
}
.control-center-toggle {
padding-left: 12px;
padding-right: 10px;
padding-right: 14px;
label {
font-size: 12px;
}
&.open {
background: darken($color: $color3, $amount: 15);
background: darken($color: $color3, $amount: 10);
}
}
eww/styles/control-center.scss
+52 -43
View File
@@ -1,14 +1,16 @@
box.cc {
margin: 16px;
margin-top: 8px;
margin-bottom: 14px;
margin-left: 14px;
background: rgba($background, .85);
border-radius: 16px;
border: 2px solid darken($color: $color3, $amount: 20);
border-top-left-radius: 24px;
border-bottom-left-radius: 24px;
padding: 18px;
box-shadow: 0 5 8px 1px black;
}
.quickactions {
margin-bottom: 10px;
.top-bar {
margin-bottom: 15px;
& label {
&.hostname {
@@ -37,7 +39,7 @@ box.cc {
}
}
.control-center .mediaplayer {
.big-media {
padding: 16px;
margin: 6px 0;
border-radius: 18px;
@@ -70,7 +72,7 @@ box.cc {
}
}
& > .media-controls {
& > .controls {
padding: 0px;
& > button {
@@ -87,7 +89,7 @@ box.cc {
}
}
&.mediaplayer-album-bg {
&.album-bg {
box-shadow: inset 0 0 0 100px rgba($background, .6);
background-size: cover;
}
@@ -104,9 +106,9 @@ box.cc {
& > .top {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
background: darken($color: $color1, $amount: 5);
background: darken($color: $color1, $amount: 7);
border-bottom: .5px solid rgba(darken($color: $foreground, $amount: 15), .3);
padding: 2px 6px;
padding: 5px 6px;
& > .app-info {
& .app-icon {
@@ -117,12 +119,13 @@ box.cc {
}
& .content {
padding: 6px;
padding-top: 0;
padding: 8px;
padding-top: 0px;
& > .image {
border-radius: 16px;
margin-right: 6px;
margin-top: 6px;
background-size: cover;
background-repeat: no-repeat;
background-position: center 0;
@@ -160,46 +163,52 @@ box.cc {
}
}
.toggle-grid {
.grid-toggle .toggle {
margin: 0 6px;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
}
.grid-toggle {
.toggles {
&.active {
background: darken($color: $color1, $amount: 2);
margin-bottom: 10px;
& > .toggle-checkbox:first-child {
margin-left: 0;
}
& > .toggle {
padding: 8px;
border-radius: 18px;
& > .toggle-checkbox:last-child {
margin-right: 0;
}
label {
font-family: "Cantarell", "0xProto Nerd Font";
& .toggle-checkbox {
margin: 2px;
&:hover {
& > box {
background: darken($color: $color2, $amount: 15);
}
}
.icon {
margin-right: 6px;
font-size: 16px;
&:checked {
& > box {
background: darken($color: $color1, $amount: 12);
}
}
label.header {
font-weight: 700;
font-size: 12px;
& > *:not(box) {
color: transparent;
}
label.body {
font-size: 11px;
& > .toggle {
background: darken($color: $foreground, $amount: 65);
border-radius: 16px;
padding: 16px;
margin-left: -16px; // This covers the checkbox space, hiding the check thing
.icon {
font-size: 14px;
padding-right: 5px;
}
.label {
font-size: 12px;
font-weight: 600;
}
}
}
}
eww/styles/floating-notifications.scss
+48
View File
@@ -0,0 +1,48 @@
.floating-notifications {
& > .floating-notification {
$background-color: darken($color: $color1, $amount: 40);
background: $background-color;
border-radius: 16px;
margin: 14px;
box-shadow: 0 0 8px 2px rgba($background, .9);
& > .top {
border-top-left-radius: 15.4px;
border-top-right-radius: 15.4px;
padding: 6px 12px;
background: lighten($color: $background-color, $amount: 5);
border-bottom: .5px solid rgba($foreground, .2);
label {
font-family: "Noto Sans Mono", monospace;
font-size: 11px;
}
}
.content {
padding: 10px;
.image {
background-position: center;
background-size: cover;
margin-right: 6px;
border-radius: 12px;
}
.text-content {
label.summary {
font-size: 16px;
font-weight: 700;
}
label.body {
font-size: 13.3px;
}
padding-bottom: 2px;
}
}
}
}
eww/styles/general.scss
+17 -2
View File
@@ -1,3 +1,6 @@
$foreground: lighten($color: $foreground, $amount: 5);
* {
all: unset;
transition: 120ms linear;
@@ -33,14 +36,14 @@ box.button-row {
}
}
box.vertical-button-row {
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;
margin: 1px 0;
&:first-child {
border-top-left-radius: 8px;
@@ -130,3 +133,15 @@ trough highlight {
scale {
padding: 10px;
}
tooltip {
& box {
margin: 16px;
margin-top: 0;
border-radius: 12px;
border: 1px solid darken($color: $color1, $amount: 1);
background: $background;
padding: 6px 8px;
box-shadow: 0 3px 5px 1px rgba($color: #000000, $alpha: .8);
}
}
eww/styles/powermenu.scss
+16 -3
View File
@@ -7,13 +7,26 @@
}
& > button {
padding: 96px;
margin: 0 6px;
border-radius: 6px;
background: darken($color: $foreground, $amount: 35);
&:first-child {
border-top-left-radius: 24px;
border-bottom-left-radius: 24px;
}
&:last-child {
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
}
& label {
font-size: 98px;
}
}
& button:hover,
& button:focus {
background: darken($color: $color2, $amount: 20);
& button:hover {
background: $color1;
}
}
eww/styles/audio-popup.scss → eww/styles/volume-control.scss
+19 -36
View File
@@ -1,13 +1,27 @@
box.audio-popup {
background: rgba($background, .7);
.volume-control {
background: rgba($background, .8);
padding: 8px;
margin-right: 6px;
border-radius: 16px;
border: .5px solid rgba($foreground, .3);
trough {
background: rgba(lighten($color: $background, $amount: 8), .4);
border-radius: 6px;
}
trough highlight {
background: lighten($color: $color2, $amount: 40);
padding: 10px;
border-radius: inherit;
}
scale {
padding: 10px;
}
}
.audio-popup .separator {
.volume-control .separator {
border-top: .5px solid rgba(darken($color: $foreground, $amount: 25), .7);
margin-bottom: 8px;
margin-left: 6px;
@@ -15,40 +29,9 @@ box.audio-popup {
border-radius: 1px;
}
.audio-popup .output-slider {
.volume-control .slider {
label {
margin-left: 18px;
color: $background;
}
}
.audio-popup .source-slider {
label {
margin-left: 18px;
color: $background;
}
}
.audio-popup {
trough {
background: darken($color: $foreground, $amount: 25);
border-radius: 6px;
}
trough highlight {
background: $foreground;
padding: 10px;
border-radius: inherit;
}
slider:active highlight {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
scale {
padding: 10px;
}
}