diff --git a/ags/style/_apps-window.scss b/ags/style/_apps-window.scss index b4caafb..b737b06 100644 --- a/ags/style/_apps-window.scss +++ b/ags/style/_apps-window.scss @@ -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 { diff --git a/ags/style/_bar.scss b/ags/style/_bar.scss index 2610138..c679e47 100644 --- a/ags/style/_bar.scss +++ b/ags/style/_bar.scss @@ -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 { diff --git a/ags/style/_center-window.scss b/ags/style/_center-window.scss index aed536e..aae7768 100644 --- a/ags/style/_center-window.scss +++ b/ags/style/_center-window.scss @@ -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; } } } diff --git a/ags/style/_control-center.scss b/ags/style/_control-center.scss index f454ebe..f593121 100644 --- a/ags/style/_control-center.scss +++ b/ags/style/_control-center.scss @@ -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; + } + } + } +} diff --git a/ags/style/_logout-menu.scss b/ags/style/_logout-menu.scss index 8d57aae..baa67f9 100644 --- a/ags/style/_logout-menu.scss +++ b/ags/style/_logout-menu.scss @@ -20,8 +20,8 @@ margin: 0 150px; & > button { - & icon { - font-size: 128px; + & image { + -gtk-icon-size: 128px; } &:focus { diff --git a/ags/style/_wal.scss b/ags/style/_wal.scss index 0c75ac5..6733936 100644 --- a/ags/style/_wal.scss +++ b/ags/style/_wal.scss @@ -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;