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

✨ ags: add center-window and logout-menu windows and more

Browse Source
This commit is contained in:
retrozinndev
2025-02-12 13:39:38 -03:00
parent 36ee8c6ff5
commit be2731516e
28 changed files with 576 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ags/style/_bar.scss
+72 -67
View File
@@ -1,39 +1,31 @@
@use "sass:color";
@use "./wal";
@use "./mixins";
@use "./colors";
.bar-container {
@include mixins.reset-props;
@include mixins.default-styles;
padding: 6px;
padding-bottom: 0px;
& {
button {
padding: 6px 8px;
border-radius: 12px;
&:hover {
background: wal.$color1;
}
}
label {
font-size: 12px;
font-family: "Cantarell", "Noto Sans";
font-weight: 500;
}
label {
@include mixins.reset-props;
font-size: 12px;
font-weight: 500;
}
// Style widget groups
& > .bar-centerbox > * {
background: rgba($color: wal.$background, $alpha: .6);
background: colors.$bg-translucent;
padding: 5px;
border-radius: 18px;
// Style widgets
& > *,
& > * > button
& > * {
& > button,
& > eventbox,
& > box {
margin: 0 2px;
&:first-child {
@@ -43,22 +35,33 @@
&:last-child {
margin-right: 0;
}
& > button,
& > eventbox > box {
padding: 4px 8px;
border-radius: 12px;
}
& > button:hover,
& > eventbox:hover > box {
background: colors.$bg-primary;
}
}
}
.workspaces {
@include mixins.reset-props;
padding: 2px 2px;
& button {
all: unset;
border-radius: 16px;
transition: 80ms linear;
padding: 12px 12px;
background: wal.$color1;
background: colors.$bg-tertiary;
margin: 1px 2px;
&.focus {
background: wal.$foreground;
background: colors.$fg-primary;
padding: 12px 20px;
}
}
@@ -76,58 +79,47 @@
font-size: 9px;
font-family: monospace;
font-weight: 600;
color: color.adjust($color: wal.$foreground, $lightness: -11%);
margin-top: 1px;
color: colors.$fg-disabled;
margin-top: 0px;
}
& > .title {
font-size: 11.5px;
font-size: 12px;
font-weight: 500;
margin-top: -2px;
}
}
}
.logo button {
padding: 0 11px;
padding-right: 16px;
.media-eventbox {
& > .media {
border-radius: 12px;
background: colors.$bg-primary;
padding: 0 8px;
}
& label {
& .nf {
margin-right: 4px;
font-size: 14px;
}
}
.media-eventbox {
& > .media > box {
border-radius: 12px;
background: wal.$color1;
padding: 0 7px;
& .icon {
margin-right: 6px;
font-size: 14px;
}
}
&.reveal {
& .media > box {
transition: 50ms linear;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
& .media-controls {
& .media-controls {
transition: none;
padding-left: 6px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
transition: unset;
background: linear-gradient(to left, color.adjust($color: wal.$color1, $lightness: -15%) 45px, wal.$color1);
background: linear-gradient(to left, colors.$bg-primary 45px, colors.$bg-primary);
& > button {
margin: 0px 1px;
margin: 4px 1px;
border-radius: 4px;
label {
font-size: 8px;
}
&:hover {
background: wal.$color2;
background: colors.$bg-secondary;
}
&:first-child {
@@ -143,6 +135,13 @@
}
}
}
&.reveal {
& .media > box {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
}
@@ -170,26 +169,32 @@
}
.audio {
&:hover > box {
background: wal.$color1;
}
@include mixins.reset-props;
& .notification-bell {
padding-left: 10px;
padding-right: 4px;
&:hover > box {
background: colors.$bg-primary;
}
& > box {
padding: 0 9px;
padding: 0 8px;
border-radius: 12px;
}
& .sink .icon {
margin-right: 6px;
}
& > * > * {
margin: 0 2px;
}
& .source .icon {
margin-right: 4px;
& .nf {
margin: {
right: 3px;
left: 2px;
};
font-size: 12px;
}
& .bell {
margin: 0 4px;
}
}
}
}
ags/style/_center-window.scss
+40
View File
@@ -0,0 +1,40 @@
@use "sass:color";
@use "./wal";
@use "./functions" as funs; // Did you know that you can use the 'as' keyword? I just found out!
.center-window-container {
background: wal.$background;
border-radius: 18px;
padding: 12px;
& .left {
.top {
.time {
font-size: 22px;
font-weight: 800;
}
.date {
font-size: 14px;
font-weight: 500;
color: funs.toRGB(color.adjust($color: wal.$foreground, $lightness: -15%));
}
}
}
& .calendar-box {
padding: 5px;
& calendar {
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%));
}
}
}
}
}
ags/style/_colors.scss
+12
View File
@@ -0,0 +1,12 @@
@use "sass:color";
@use "./wal";
@use "./functions" as funs;
$bg-primary: funs.toRGB(color.adjust($color: wal.$color1, $lightness: -35%));
$bg-secondary: funs.toRGB(color.adjust($color: wal.$color1, $lightness: -16%));
$bg-tertiary: funs.toRGB(color.adjust($color: $bg-secondary, $lightness: 10%));
$bg-light: wal.$foreground;
$bg-translucent: funs.toRGB(color.change($color: $bg-primary, $alpha: 72%));
$fg-primary: wal.$foreground;
$fg-light: $bg-primary;
$fg-disabled: funs.toRGB(color.adjust($color: wal.$foreground, $lightness: -11%));
ags/style/_control-center.scss
+21 -7
View File
@@ -1,5 +1,6 @@
@use "sass:color";
@use "./wal";
@use "./functions" as funs;
.control-center-container {
background: rgba(wal.$background, .65);
@@ -29,7 +30,11 @@
& .button-row {
& button {
padding: 4px 6px;
padding: 7px;
margin: {
top: 2px;
bottom: 2px;
};
}
}
}
@@ -49,20 +54,29 @@
}
}
icon {
background-size: 48px;
.icon.nf {
margin-right: 8px;
font-size: 15px;
}
trough {
background: color.adjust($color: wal.$color1, $lightness: -20%);
min-height: .8em;
background: funs.toRGB(color.adjust($color: wal.$color1, $lightness: -20%));
border-radius: 8px;
}
trough highlight {
background: wal.$color1;
min-height: inherit;
border-radius: inherit;
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
}
trough slider {
min-width: 1.2em;
min-height: 1.2em;
border-radius: 50%;
margin: -3px 0;
background: wal.$foreground;
margin-left: -1px;
}
}
}
ags/style/_functions.scss
+14
View File
@@ -0,0 +1,14 @@
@use "sass:color";
/**
* GTK3 only supports sRGB color space, unfortunatly
*/
@function toRGB($color) {
@return rgba(
color.channel($color, "red"),
color.channel($color, "green"),
color.channel($color, "blue"),
color.alpha($color)
);
}
ags/style/_mixins.scss
+74 -1
View File
@@ -1,8 +1,81 @@
@use "sass:color";
@use "./wal";
@use "./colors";
@use "./functions" as funs;
@mixin reset-props {
all: unset;
transition: 120ms linear;
color: color.adjust($color: wal.$foreground, $lightness: -15%);
font-family: "Cantarell", "Noto Sans",
"Noto Sans CJK JP", "Noto Sans CJK KR",
"Noto Sans CJK HK", "Noto Sans CJK SC",
"Noto Sans CJK TC", sans-serif,
"Symbols Nerd Font Mono";
color: colors.$fg-primary;
}
@mixin default-styles {
.button-row {
& > button {
background: colors.$bg-secondary;
margin: 0 1px;
padding: 0 6px;
border-radius: 2px;
&:hover {
background: colors.$bg-tertiary;
}
&:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
&:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
}
}
label.nf,
button.nf label {
font-size: 12px;
font-family: "Symbols Nerd Font Mono", "Noto Sans Nerd Font Mono",
"0xProto Nerd Font Mono", "Fira Code Nerd Font Mono",
"Symbols Nerd Font", "Noto Sans Nerd Font", "Fira Code Nerd Font",
"Font Awesome";
}
& menu {
padding: 4px;
background: wal.$background;
border-radius: 14px;
& separator {
margin: 0 4px;
color: wal.$background;
}
& menuitem {
padding: 8px 16px;
border-radius: 10px;
font-size: 12px;
font-weight: 600;
&:hover {
background: wal.$color1;
}
}
}
& tooltip {
padding: 8px;
border-radius: 14px;
& label {
font-size: 14px;
color: colors.$fg-primary;
}
}
}
ags/style/_osd.scss
+3 -2
View File
@@ -1,8 +1,9 @@
@use "sass:color";
@use "./wal";
@use "./functions" as funs;
.osd {
background: color.change($color: wal.$background, $alpha: 65%);
background: funs.toRGB(color.change($color: wal.$background, $alpha: 65%));
padding: 14px 16px;
border-radius: 20px;
@@ -23,7 +24,7 @@
levelbar {
trough block {
border-radius: 2px;
background: color.adjust($color: wal.$color1, $lightness: -36%);
background: funs.toRGB(color.adjust($color: wal.$color1, $lightness: -36%));
&.empty {
border-radius: 2px;