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

✨ feat(center-window/big-media): add player select button

Browse Source
This commit is contained in:
retrozinndev
2025-07-25 19:08:03 -03:00
parent d4c1fcf327
commit 3b59243cdc
7 changed files with 260 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ags/style/_bar.scss
+29 -10
View File
@@ -1,8 +1,18 @@
@use "sass:color";
@use "./mixins";
@use "./colors";
@use "./wal";
@use "./functions";
$radius: 18px;
$padding: 4px;
$color-hover: colors.$bg-primary;
@mixin button-reactivity {
&:active {
box-shadow: 0 0 0 2px $color-hover;
}
}
.bar-container {
padding: 6px;
@@ -17,16 +27,14 @@
// Style widget groups
& > .bar-centerbox > * {
$radius: 18px !global;
$padding: 4px !global;
$color-hover: colors.$bg-primary;
background: rgba(colors.$bg-translucent, .6);
border-radius: $radius;
padding: 0 $padding;
& > box:not(.workspaces-row):not(.tray):not(.focused-client):not(.media),
& > button {
@include button-reactivity;
border-radius: calc($radius - $padding);
margin: $padding 0;
padding: 0 8px;
@@ -48,6 +56,10 @@
padding: 0 6px;
background: colors.$bg-tertiary;
&:active {
border-radius: 10px;
}
& label.id {
font-weight: 600;
margin-right: 4px;
@@ -110,15 +122,13 @@
.media {
$spacing: 5px;
$hover-color: color.scale($color: colors.$bg-primary, $lightness: 15%);
background: colors.$bg-primary;
border-radius: calc($radius - $padding);
margin: $padding 0;
padding: 0 calc($padding + 3px);
&:hover {
background: color.scale($color: colors.$bg-primary, $lightness: 15%);
}
& image.player-icon {
-gtk-icon-size: 14px;
margin-right: $spacing;
@@ -135,6 +145,15 @@
-gtk-icon-size: 10px;
}
}
&:hover {
background: $hover-color;
}
&:active {
box-shadow: 0 0 0 2px $hover-color;
}
}
.tray {
ags/style/_center-window.scss
+39
View File
@@ -1,6 +1,7 @@
@use "sass:color";
@use "./wal";
@use "./colors";
@use "./mixins";
.popup-window.center-window .center-window-container {
@@ -34,6 +35,44 @@
}
}
& .player-select {
@include mixins.button-reactive-secondary;
border-radius: 14px;
& revealer label {
margin-left: 4px;
}
margin-right: 2px;
margin-bottom: 2px;
image.arrow {
-gtk-icon-size: 12px;
margin-left: 6px;
margin-top: 1px;
}
}
& popover contents {
background: colors.$bg-primary;
border-radius: 16px;
padding: 4px;
& button {
padding: 6px;
border-radius: 12px;
& image {
margin-right: 4px;
}
&:hover {
background: colors.$bg-secondary;
}
}
}
& slider {
all: unset;
opacity: 0;
ags/style/_control-center.scss
+21 -6
View File
@@ -63,14 +63,16 @@
}
button {
@include mixins.hover-shadow2;
padding: 4px;
border-radius: 16px;
icon {
font-size: 14px;
}
&:hover {
background: rgba(colors.$fg-primary, .2);
}
}
& .page .content {
@@ -125,8 +127,6 @@
}
& button {
@include mixins.hover-shadow;
padding: 6px;
border-radius: 12px;
@@ -143,6 +143,10 @@
& icon {
font-size: 16px;
}
&:hover {
background: rgba(colors.$fg-primary, .1);
}
}
& .bottom-buttons button {
@@ -194,14 +198,19 @@
background: colors.$bg-secondary;
}
&.has-more > .toggle-button {
&.has-more > .toggle-button,
&.has-more > button.toggle-button:active {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
& > .toggle-button {
& > button.toggle-button {
border-radius: $radius;
&:active {
border-radius: calc($radius - 4px);
}
& .content {
padding: 8px;
@@ -228,6 +237,11 @@
border-top-right-radius: $radius;
border-bottom-right-radius: $radius;
&:active {
border-top-right-radius: calc($radius - 4px);
border-bottom-right-radius: calc($radius - 4px);
}
& label {
font-size: 16px;
}
@@ -272,6 +286,7 @@ box.notif-history {
margin-top: 12px;
& button {
@include mixins.button-reactive-secondary;
padding: 7px;
& label {
ags/style/_mixins.scss
+19 -11
View File
@@ -1,7 +1,5 @@
@use "sass:color";
@use "./wal";
@use "./colors";
@use "./functions" as funs;
@mixin reset-props {
all: unset;
@@ -14,20 +12,30 @@
color: colors.$fg-primary;
}
@mixin hover-shadow {
@mixin button-reactive-primary {
background: colors.$bg-primary;
border-radius: 14px;
padding: 6px;
&:hover {
box-shadow: inset 0 0 0 500px rgba(colors.$fg-primary, .1);
background: colors.$bg-secondary;
}
&:active {
border-radius: 10px;
}
}
@mixin hover-shadow2 {
&:hover {
box-shadow: inset 0 0 0 500px rgba(colors.$fg-primary, .2);
}
}
@mixin button-reactive-secondary {
background: colors.$bg-secondary;
border-radius: 12px;
padding: 6px;
@mixin hover-shadow3 {
&:hover {
box-shadow: inset 0 0 0 500px rgba(colors.$fg-primary, .3);
background: colors.$bg-tertiary;
}
&:active {
border-radius: 9px;
}
}
ags/style/_wal.scss
+20 -20
View File
@@ -1,26 +1,26 @@
// SCSS Variables
// Generated by 'wal'
$wallpaper: "/home/joaov/wallpapers/Anna Yanami Makeine Blue Sky.jpg";
$wallpaper: "/home/joaov/wallpapers/Frieren Battleground.jpg";
// Special
$background: #2d3643;
$foreground: #caccd0;
$cursor: #caccd0;
$background: #181515;
$foreground: #c5c4c4;
$cursor: #c5c4c4;
// Colors
$color0: #2d3643;
$color1: #738AA7;
$color2: #3784E4;
$color3: #5A99EA;
$color4: #B8A9A4;
$color5: #8CB9EB;
$color6: #A2C8EF;
$color7: #a0a4a9;
$color8: #707b89;
$color9: #87a5cb;
$color10: #87a5cb;
$color11: #9db5d4;
$color12: #dab6a8;
$color13: #b7cae0;
$color14: #c5d5e6;
$color15: #caccd0;
$color0: #181515;
$color1: #975969;
$color2: #7f6960;
$color3: #7f697f;
$color4: #a57e83;
$color5: #878193;
$color6: #9d8793;
$color7: #9b9090;
$color8: #715c5c;
$color9: #CA778C;
$color10: #AA8C81;
$color11: #AA8CAA;
$color12: #DCA8AF;
$color13: #B4ADC5;
$color14: #D2B5C5;
$color15: #c5c4c4;