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 "sass:color";
@use "./mixins";
@use "./colors"; @use "./colors";
@use "./functions";
.apps-window-container { .apps-window-container {
$radius: 48px; $radius: 48px;
@@ -10,12 +8,16 @@
background: colors.$bg-translucent; background: colors.$bg-translucent;
border-radius: $radius $radius 0 0; border-radius: $radius $radius 0 0;
& > entry { & entry {
background: rgba(colors.$bg-primary, .4); background: rgba(colors.$bg-primary, .4);
margin-bottom: 32px; margin-bottom: 32px;
min-width: 450px; min-width: 450px;
padding: 14px; padding: 14px;
border-radius: 18px; border-radius: 18px;
&:focus-within {
box-shadow: inset 0 0 0 2px colors.$bg-tertiary;
}
} }
& flowbox { & flowbox {
@@ -26,8 +28,8 @@
padding: 8px; padding: 8px;
border-radius: 24px; border-radius: 24px;
& icon { & image {
font-size: 64px; -gtk-icon-size: 64px;
} }
& label { & label {
ags/style/_bar.scss
+3 -2
View File
@@ -59,6 +59,7 @@
min-width: 32px; min-width: 32px;
& label.id { & label.id {
opacity: 0;
color: colors.$fg-light; color: colors.$fg-light;
margin-right: 0; margin-right: 0;
} }
@@ -103,8 +104,8 @@
} }
} }
.clock.open > button { .clock.open {
background-color: colors.$bg-primary; background: colors.$bg-primary;
} }
.media { .media {
ags/style/_center-window.scss
+35 -41
View File
@@ -7,18 +7,16 @@
background: colors.$bg-translucent; background: colors.$bg-translucent;
border-radius: 24px; border-radius: 24px;
padding: 12px; padding: 12px;
box-shadow: 0 0 6px colors.$bg-translucent;
& .big-media { & .big-media {
padding: 6px; margin-top: 9px;
& .image {
& > box > .image {
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
border-radius: 10px; border-radius: 10px;
} }
& > .info { & .info {
padding: { padding: {
top: 4px; top: 4px;
bottom: 6px; bottom: 6px;
@@ -37,7 +35,8 @@
} }
& slider { & slider {
background: transparent; all: unset;
opacity: 0;
min-height: .6em; min-height: .6em;
} }
@@ -54,8 +53,10 @@
& .bottom { & .bottom {
& .controls { & .controls {
margin-top: 9px; margin-top: 9px;
& button { & button {
padding: 7px; padding: 7px;
& label { & label {
font-size: 9px; font-size: 9px;
} }
@@ -85,46 +86,39 @@
} }
} }
& .calendar-box { & calendar.view {
& calendar { $border-radius: 14px;
$border-radius: 14px; font-weight: 600;
font-weight: 600; background: colors.$bg-primary;
padding-bottom: 2px; border-radius: $border-radius;
&.view { & header {
background: colors.$bg-primary; background: colors.$bg-secondary;
border-radius: $border-radius; padding: 6px;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
}
& grid {
margin: 4px;
label.day-number {
min-height: 22px;
} }
}
&.header { & button {
background: colors.$bg-secondary; transition: 80ms linear;
border-top-left-radius: $border-radius; border-radius: 6px;
border-top-right-radius: $border-radius;
padding: 4px; &:hover {
background-color: colors.$bg-tertiary;
} }
}
&.button { & label:selected {
transition: 80ms linear; background: colors.$bg-secondary;
border-radius: 6px; 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;
}
} }
} }
} }
ags/style/_control-center.scss
+39 -45
View File
@@ -10,7 +10,6 @@
background: colors.$bg-translucent; background: colors.$bg-translucent;
border-radius: 28px; border-radius: 28px;
padding: 20px; padding: 20px;
box-shadow: 0 0 6px 1px colors.$bg-translucent;
& > * { & > * {
margin: 9px 0; margin: 9px 0;
@@ -35,8 +34,8 @@
font-weight: 600; font-weight: 600;
} }
& > box:not(.button-row) icon { & > box:not(.button-row) image {
font-size: 12px; -gtk-icon-size: 12px;
color: colors.$fg-disabled; color: colors.$fg-disabled;
margin-right: 3px; 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 { .tiles-container {
@include mixins.reset-props; @include mixins.reset-props;
& > flowbox { & > flowbox {
& > flowboxchild .tile { & > flowboxchild .tile {
$radius: 16px; $radius: 18px;
&:not(.toggled) > .toggle-button, &:not(.toggled) > .toggle-button,
&:not(.toggled) > button.more { &:not(.toggled) > button.more {
@include mixins.hover-shadow;
background: colors.$bg-primary; 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 .toggle-button:hover,
&.toggled button.more:hover { &.toggled button.more:hover {
background: colors.$bg-tertiary; background: colors.$bg-tertiary;
@@ -287,3 +250,34 @@ box.history {
padding-top: 12px; 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; margin: 0 150px;
& > button { & > button {
& icon { & image {
font-size: 128px; -gtk-icon-size: 128px;
} }
&:focus { &:focus {
ags/style/_wal.scss
+20 -20
View File
@@ -1,26 +1,26 @@
// SCSS Variables // SCSS Variables
// Generated by 'wal' // Generated by 'wal'
$wallpaper: "/home/joaov/wallpapers/Gumi Forest Sunlight.jpg"; $wallpaper: "/home/joaov/wallpapers/Anna Yanami Makeine Blue Sky.jpg";
// Special // Special
$background: #2a2825; $background: #2d3643;
$foreground: #c9c9c8; $foreground: #caccd0;
$cursor: #c9c9c8; $cursor: #caccd0;
// Colors // Colors
$color0: #2a2825; $color0: #2d3643;
$color1: #6a6a3b; $color1: #738AA7;
$color2: #7b7b48; $color2: #3784E4;
$color3: #908a45; $color3: #5A99EA;
$color4: #7e876d; $color4: #B8A9A4;
$color5: #8a9680; $color5: #8CB9EB;
$color6: #a5a679; $color6: #A2C8EF;
$color7: #a29f98; $color7: #a0a4a9;
$color8: #7d7667; $color8: #707b89;
$color9: #8E8E4F; $color9: #87a5cb;
$color10: #A5A560; $color10: #87a5cb;
$color11: #C0B85C; $color11: #9db5d4;
$color12: #A9B592; $color12: #dab6a8;
$color13: #B9C8AB; $color13: #b7cae0;
$color14: #DDDEA2; $color14: #c5d5e6;
$color15: #c9c9c8; $color15: #caccd0;