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

💄 chore(style): fix some styles, update others to work on gtk4

Browse Source 
the inset box-shadow on hover technique doesn't work anymore 😭
This commit is contained in:
retrozinndev
2025-07-23 20:36:30 -03:00
parent 6b667f5d5b
commit 9a7857e89c
6 changed files with 106 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ags/style/_apps-window.scss
+7 -5
View File
@@ -1,7 +1,5 @@
@use "sass:color";
@use "./mixins";
@use "./colors";
@use "./functions";
.apps-window-container {
$radius: 48px;
@@ -10,12 +8,16 @@
background: colors.$bg-translucent;
border-radius: $radius $radius 0 0;
& > entry {
& entry {
background: rgba(colors.$bg-primary, .4);
margin-bottom: 32px;
min-width: 450px;
padding: 14px;
border-radius: 18px;
&:focus-within {
box-shadow: inset 0 0 0 2px colors.$bg-tertiary;
}
}
& flowbox {
@@ -26,8 +28,8 @@
padding: 8px;
border-radius: 24px;
& icon {
font-size: 64px;
& image {
-gtk-icon-size: 64px;
}
& label {
ags/style/_bar.scss
+3 -2
View File
@@ -59,6 +59,7 @@
min-width: 32px;
& label.id {
opacity: 0;
color: colors.$fg-light;
margin-right: 0;
}
@@ -103,8 +104,8 @@
}
}
.clock.open > button {
background-color: colors.$bg-primary;
.clock.open {
background: colors.$bg-primary;
}
.media {
ags/style/_center-window.scss
+35 -41
View File
@@ -7,18 +7,16 @@
background: colors.$bg-translucent;
border-radius: 24px;
padding: 12px;
box-shadow: 0 0 6px colors.$bg-translucent;
& .big-media {
padding: 6px;
& > box > .image {
margin-top: 9px;
& .image {
background-size: cover;
background-position: center center;
border-radius: 10px;
}
& > .info {
& .info {
padding: {
top: 4px;
bottom: 6px;
@@ -37,7 +35,8 @@
}
& slider {
background: transparent;
all: unset;
opacity: 0;
min-height: .6em;
}
@@ -54,8 +53,10 @@
& .bottom {
& .controls {
margin-top: 9px;
& button {
padding: 7px;
& label {
font-size: 9px;
}
@@ -85,46 +86,39 @@
}
}
& .calendar-box {
& calendar {
$border-radius: 14px;
font-weight: 600;
padding-bottom: 2px;
& calendar.view {
$border-radius: 14px;
font-weight: 600;
background: colors.$bg-primary;
border-radius: $border-radius;
&.view {
background: colors.$bg-primary;
border-radius: $border-radius;
& header {
background: colors.$bg-secondary;
padding: 6px;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
}
& grid {
margin: 4px;
label.day-number {
min-height: 22px;
}
}
&.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;
&:hover {
background-color: colors.$bg-tertiary;
}
}
&.button {
transition: 80ms linear;
border-radius: 6px;
&: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);
}
&:focus {
outline: 1px white;
}
& label:selected {
background: colors.$bg-secondary;
border-radius: 6px;
}
}
}
ags/style/_control-center.scss
+39 -45
View File
@@ -10,7 +10,6 @@
background: colors.$bg-translucent;
border-radius: 28px;
padding: 20px;
box-shadow: 0 0 6px 1px colors.$bg-translucent;
& > * {
margin: 9px 0;
@@ -35,8 +34,8 @@
font-weight: 600;
}
& > box:not(.button-row) icon {
font-size: 12px;
& > box:not(.button-row) image {
-gtk-icon-size: 12px;
color: colors.$fg-disabled;
margin-right: 3px;
}
@@ -168,59 +167,23 @@
}
}
box.history {
background: colors.$bg-translucent;
box-shadow: 0 0 6px 1px colors.$bg-translucent;
border-radius: 24px;
padding: 18px;
transition: 120ms linear;
&.hide {
opacity: 0;
}
& .notifications {
& .notification {
background: colors.$bg-translucent-primary;
padding: 3px;
}
}
& > .button-row {
margin-top: 12px;
& button {
padding: 6px;
&:focus {
box-shadow: inset 0 0 0 1px colors.$fg-primary;
}
& icon {
font-size: 16px;
}
& label {
font-size: 12px;
font-weight: 600;
}
}
}
}
.tiles-container {
@include mixins.reset-props;
& > flowbox {
& > flowboxchild .tile {
$radius: 16px;
$radius: 18px;
&:not(.toggled) > .toggle-button,
&:not(.toggled) > button.more {
@include mixins.hover-shadow;
background: colors.$bg-primary;
}
&:not(.toggled) > .toggle-button:hover,
&:not(.toggled) > button.more:hover {
background: color.scale($color: colors.$bg-primary, $lightness: 10%);
}
&.toggled .toggle-button:hover,
&.toggled button.more:hover {
background: colors.$bg-tertiary;
@@ -287,3 +250,34 @@ box.history {
padding-top: 12px;
}
}
box.notif-history {
background: colors.$bg-translucent;
border-radius: 24px;
padding: 18px;
transition: 120ms linear;
&.hide {
opacity: 0;
}
& .notifications {
& .notification {
background: colors.$bg-translucent-primary;
padding: 3px;
}
}
& .button-row {
margin-top: 12px;
& button {
padding: 7px;
& label {
font-size: 12px;
font-weight: 600;
}
}
}
}
ags/style/_logout-menu.scss
+2 -2
View File
@@ -20,8 +20,8 @@
margin: 0 150px;
& > button {
& icon {
font-size: 128px;
& image {
-gtk-icon-size: 128px;
}
&:focus {
ags/style/_wal.scss
+20 -20
View File
@@ -1,26 +1,26 @@
// SCSS Variables
// Generated by 'wal'
$wallpaper: "/home/joaov/wallpapers/Gumi Forest Sunlight.jpg";
$wallpaper: "/home/joaov/wallpapers/Anna Yanami Makeine Blue Sky.jpg";
// Special
$background: #2a2825;
$foreground: #c9c9c8;
$cursor: #c9c9c8;
$background: #2d3643;
$foreground: #caccd0;
$cursor: #caccd0;
// Colors
$color0: #2a2825;
$color1: #6a6a3b;
$color2: #7b7b48;
$color3: #908a45;
$color4: #7e876d;
$color5: #8a9680;
$color6: #a5a679;
$color7: #a29f98;
$color8: #7d7667;
$color9: #8E8E4F;
$color10: #A5A560;
$color11: #C0B85C;
$color12: #A9B592;
$color13: #B9C8AB;
$color14: #DDDEA2;
$color15: #c9c9c8;
$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;