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

ags: finish center-window widget with big-media and calendar

Browse Source
This commit is contained in:
retrozinndev
2025-02-16 19:29:03 -03:00
parent 1e6b3bcbe3
commit 23d3b271b4
19 changed files with 394 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ags/style/_bar.scss
+17 -3
View File
@@ -91,6 +91,10 @@
}
}
.clock.open > button {
background-color: colors.$bg-primary;
}
.media-eventbox {
& > .media {
border-radius: 12px;
@@ -98,6 +102,10 @@
padding: 0 8px;
}
&:hover > .media {
box-shadow: inset 0 0 0 300px rgba(colors.$fg-primary, .2);
}
& .nf {
margin-right: 4px;
font-size: 14px;
@@ -105,10 +113,9 @@
& .media-controls {
transition: none;
padding-left: 6px;
padding: 0 6px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
background: linear-gradient(to left, colors.$bg-primary 45px, colors.$bg-primary);
& > button {
margin: 4px 1px;
@@ -124,6 +131,12 @@
& .media > box {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
padding: 0 6px;
}
& .media {
padding-left: 0;
padding-right: 0;
}
}
}
@@ -154,7 +167,8 @@
.audio {
@include mixins.reset-props;
&:hover > box {
&:hover > box,
&.open > box {
background: colors.$bg-primary;
}
ags/style/_center-window.scss
+90 -42
View File
@@ -8,70 +8,118 @@
border-radius: 18px;
padding: 12px;
& .left {
& > .top {
padding-bottom: 10px;
& .big-media {
padding: 6px;
& .time {
font-size: 28px;
font-weight: 800;
& > box > .image {
background-size: cover;
background-position: center center;
border-radius: 10px;
}
& > .info {
padding: {
top: 4px;
bottom: 6px;
};
& .title {
font-size: 16px;
font-weight: 700;
}
& .date {
& .artist {
font-size: 14px;
font-weight: 500;
font-weight: 600;
color: colors.$fg-disabled;
}
}
& .big-media {
padding: 6px 16px;
& slider {
background: transparent;
min-height: .6em;
}
& > box > .image {
background-size: cover;
background-position: center center;
border-radius: 10px;
}
& trough {
border-radius: 4px;
min-height: .6em;
}
& > .info {
padding: {
top: 4px;
bottom: 6px;
};
& trough highlight {
border-radius: 4px;
min-height: .6em;
}
& .title {
font-size: 16px;
font-weight: 700;
}
& .artist {
font-size: 14px;
font-weight: 600;
color: colors.$fg-disabled;
& .bottom {
& .controls {
margin-top: 5px;
& button {
padding: 7px;
& label {
font-size: 10px;
}
}
}
& > .controls {
padding: 8px 0;
& .elapsed,
& .length {
font-size: 12px;
color: colors.$fg-disabled;
}
}
}
& .right {
& .calendar-box {
padding: 5px;
& calendar {
& .left .top {
padding-bottom: 10px;
& .time {
font-size: 28px;
font-weight: 800;
}
& .date {
font-size: 14px;
font-weight: 500;
color: colors.$fg-disabled;
}
}
& .calendar-box {
& calendar {
$border-radius: 10px;
font-weight: 600;
padding-bottom: 2px;
&.view {
background: colors.$bg-primary;
border-radius: $border-radius;
}
&.header {
background: colors.$bg-secondary;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
padding: 4px;
}
&.button {
transition: 80ms linear;
border-radius: 6px;
padding: 2px;
&.view {
background: funs.toRGB(color.adjust($color: wal.$color1, $lightness: -35%));
& header {
background: funs.toRGB(color.adjust($color: wal.$background, $lightness: -20%));
}
&:hover {
background-color: colors.$bg-tertiary;
}
}
&:selected {
background: colors.$bg-secondary;
border-radius: 6px;
}
&.highlight {
background: transparent;
box-shadow: 0 2px 0 -1px rgba(colors.$bg-secondary, .5);
}
}
}
}
ags/style/_float-notifications.scss
+41
View File
@@ -0,0 +1,41 @@
@use "./colors";
.floating-notifications-container {
padding: {
right: 6px;
top: 6px;
};
& > .notification {
background: colors.$bg-primary;
border-radius: 16px;
padding: 12px;
margin: 6px 0;
& > .top {
& .app-name {
font-size: 12px;
color: colors.$fg-disabled;
}
}
& .content {
& .image {
$size: 78px;
min-width: $size;
min-height: $size;
background-size: cover;
background-position: center 0;
margin: 6px;
}
}
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
}
ags/style/_mixins.scss
-10
View File
@@ -69,16 +69,6 @@
}
}
& tooltip {
padding: 8px;
border-radius: 14px;
& label {
font-size: 14px;
color: colors.$fg-primary;
}
}
& trough {
background: funs.toRGB(color.adjust($color: wal.$color1, $lightness: -20%));
border-radius: 8px;
ags/style/_wal.scss
+20 -20
View File
@@ -1,26 +1,26 @@
// SCSS Variables
// Generated by 'wal'
$wallpaper: "/home/joaov/wallpapers/Miku, Rin and Luka Chibi.jpg";
$wallpaper: "/home/joaov/wallpapers/Miku Bush.jpg";
// Special
$background: #3d2217;
$foreground: #cec7c5;
$cursor: #cec7c5;
$background: #0f1b06;
$foreground: #c3c6c0;
$cursor: #c3c6c0;
// Colors
$color0: #3d2217;
$color1: #b38678;
$color2: #a4998a;
$color3: #b39e8a;
$color4: #a5a09b;
$color5: #aea299;
$color6: #b4aea2;
$color7: #a39c99;
$color8: #7f6f68;
$color9: #EFB3A1;
$color10: #DBCCB9;
$color11: #EFD3B9;
$color12: #DDD6CF;
$color13: #E8D8CD;
$color14: #F1E8D9;
$color15: #cec7c5;
$color0: #0f1b06;
$color1: #4e7278;
$color2: #5b7b94;
$color3: #71807c;
$color4: #7b9882;
$color5: #a3a881;
$color6: #778591;
$color7: #93988d;
$color8: #626d59;
$color9: #6898A1;
$color10: #7AA5C6;
$color11: #97ABA6;
$color12: #A5CBAE;
$color13: #DAE0AC;
$color14: #9FB2C2;
$color15: #c3c6c0;