diff --git a/ags/style.scss b/ags/style.scss index b4e0fe4..0ddcc92 100644 --- a/ags/style.scss +++ b/ags/style.scss @@ -2,6 +2,7 @@ @use "./style/wal"; @use "./style/mixins"; +@use "./style/functions"; @use "./style/colors"; @use "./style/bar"; @@ -17,15 +18,11 @@ * { @include mixins.reset-props; - /*&:selected { + /*&:focus { box-shadow: inset 0 0 0 2px colors.$fg-primary; }*/ } -window * { - @include mixins.default-styles; -} - entry { background: colors.$bg-primary; padding: 10px 9px; @@ -40,19 +37,23 @@ entry { } } -.ask-popup-box, .entry-popup-box { +.custom-dialog-container { background: colors.$bg-translucent; padding: 18px; border-radius: 24px; & .title { - font-size: 20px; + font-size: 21px; font-weight: 700; + margin-bottom: 10px; } - & .buttons { - margin-top: 20px; + & .text { + font-size: 16px; + font-weight: 400; + } + & .options { & button { background: colors.$bg-primary; border-radius: 12px; @@ -74,8 +75,14 @@ entry { } } - &.entry-popup-box entry.password { - font-size: 16px; + &.entry-popup-box entry { + margin-bottom: 10px; + + &.password { + font-size: 14px; + font-family: "Adwaita Mono", "Cantarell Mono", "Noto Sans Mono", monospace; + font-weight: 400; + } } } @@ -206,6 +213,66 @@ menu { } } +.button-row { + & > button { + background: colors.$bg-secondary; + margin: 0 1px; + padding: 4px 6px; + border-radius: 2px; + + &:hover { + background: colors.$bg-tertiary; + } + + &:first-child { + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + margin-left: 0; + } + + &:last-child { + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; + margin-right: 0; + } + } +} + +selection { + background: colors.$bg-tertiary; +} + +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"; +} + +trough { + background: functions.toRGB(color.adjust($color: wal.$color1, $lightness: -20%)); + border-radius: 8px; + margin: 2px 0; +} + +trough highlight { + background: wal.$color1; + min-height: .9em; + border-top-left-radius: inherit; + border-bottom-left-radius: inherit; +} + +trough slider { + border-radius: 50%; + margin: -2px 0; + background: wal.$foreground; + margin-left: -1px; + min-width: 1.2em; + min-height: 1.2em; +} + scrollbar trough { @include mixins.reset-props; diff --git a/ags/style/_bar.scss b/ags/style/_bar.scss index 69c9e48..c315568 100644 --- a/ags/style/_bar.scss +++ b/ags/style/_bar.scss @@ -4,7 +4,6 @@ .bar-container { @include mixins.reset-props; - @include mixins.default-styles; padding: 6px; padding-bottom: 0px; @@ -18,7 +17,7 @@ // Style widget groups & > .bar-centerbox > * { - background: colors.$bg-translucent; + background: rgba(colors.$bg-translucent, .6); padding: 5px; border-radius: 18px; @@ -54,8 +53,6 @@ padding: 1px 1px; & button { - @include mixins.reset-props; - border-radius: 16px; transition: 80ms linear; min-width: 12px; diff --git a/ags/style/_colors.scss b/ags/style/_colors.scss index c81590f..47febd8 100644 --- a/ags/style/_colors.scss +++ b/ags/style/_colors.scss @@ -1,13 +1,13 @@ @use "sass:color"; @use "./wal"; -@use "./functions" as funs; +@use "./functions"; -$bg-primary: funs.toRGB(color.adjust($color: wal.$color1, $lightness: -34%)); -$bg-secondary: funs.toRGB(color.adjust($color: wal.$color1, $lightness: -16%)); -$bg-tertiary: funs.toRGB(color.adjust($color: $bg-secondary, $lightness: 10%)); +$bg-primary: functions.toRGB(color.adjust($color: wal.$color1, $lightness: -34%)); +$bg-secondary: functions.toRGB(color.adjust($color: wal.$color1, $lightness: -16%)); +$bg-tertiary: functions.toRGB(color.adjust($color: $bg-secondary, $lightness: 10%)); $bg-light: wal.$foreground; -$bg-translucent: funs.toRGB(color.change($color: $bg-primary, $alpha: 75%)); -$bg-translucent-secondary: funs.toRGB(color.change($color: $bg-translucent, $alpha: 78%)); +$bg-translucent: functions.toRGB(color.change($color: $bg-primary, $alpha: 75%)); +$bg-translucent-secondary: functions.toRGB(color.change($color: $bg-translucent, $alpha: 78%)); $fg-primary: wal.$foreground; $fg-light: $bg-primary; -$fg-disabled: funs.toRGB(color.adjust($color: wal.$foreground, $lightness: -11%)); +$fg-disabled: functions.toRGB(color.adjust($color: wal.$foreground, $lightness: -11%)); diff --git a/ags/style/_control-center.scss b/ags/style/_control-center.scss index c4d15e0..8628eb7 100644 --- a/ags/style/_control-center.scss +++ b/ags/style/_control-center.scss @@ -6,7 +6,6 @@ .control-center-container { @include mixins.reset-props; - @include mixins.default-styles; background: colors.$bg-translucent; border-radius: 24px; @@ -104,24 +103,33 @@ box.history { @include mixins.reset-props; & > flowbox { - & > flowboxchild .tile-eventbox { - &:hover:not(.toggled) > .tile { + & > flowboxchild .tile { + $radius: 16px; + + &:not(.toggled) > .toggle-button { + @include mixins.hover-shadow; + } + + &.toggled .toggle-button:hover, + &.toggled button.more:hover { + background: colors.$bg-tertiary; + } + + &.toggled > .toggle-button, + &.toggled > button.more { background: colors.$bg-secondary; } - &.toggled:hover > .tile { - box-shadow: inset 0 0 0 100px rgba($color: colors.$fg-primary, $alpha: .2); + &.has-more > .toggle-button { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } - &.toggled > .tile { - background: colors.$bg-secondary; - } - - & > .tile { + & > .toggle-button { background: colors.$bg-primary; - border-radius: 16px; + border-radius: $radius; - & > .content { + & .content { padding: 8px; & > .icon { @@ -141,68 +149,79 @@ box.history { } } } + } + + & > button.more { + border-top-right-radius: $radius; + border-bottom-right-radius: $radius; - & > .more { - border-top-right-radius: inherit; - border-bottom-right-radius: inherit; - - & label { - font-size: 16px; - } - - &:hover { - box-shadow: inset 0 0 0 100px rgba($color: colors.$fg-disabled, $alpha: .4); - } + & label { + font-size: 16px; } } } } } -.pages > .page { - background: colors.$bg-secondary; - padding: 14px; - border-radius: 24px; +.tile-pages { + transition: 120ms linear; - & .header { - margin-bottom: 12px; + & > .page { + background: colors.$bg-secondary; + padding: 14px; + border-radius: 24px; - & > .title:first-child { - font-size: 20px; - font-weight: 600; + & .header { + margin-bottom: 12px; + + & .top > .title { + font-size: 20px; + font-weight: 600; + } + + & > .description { + font-size: 12px; + font-weight: 500; + color: colors.$fg-disabled; + } + + & button label { + font-size: 14px; + } } - & > .description { - font-size: 12px; - font-weight: 500; - color: colors.$fg-disabled; - } - - & button label { + & .sub-header { font-size: 14px; + font-weight: 500; + margin-bottom: 6px; + } + + & button { + @include mixins.hover-shadow; + + padding: 6px; + border-radius: 12px; + } + + & .extra-buttons { + margin-left: 2px; + & > button { + border-radius: 12px; + } + } + + &.bluetooth { + button.connected { + background: colors.$bg-tertiary; + } + + &.paired { + margin-bottom: 20px; + } } } - & .sub-header { - font-size: 14px; - font-weight: 500; - margin-bottom: 6px; - } - - & button { - @include mixins.hover-shadow; - - padding: 6px; - border-radius: 12px; - } - - &.bluetooth { - button.connected { - background: colors.$bg-tertiary; - } - - &.paired { - margin-bottom: 20px; - } + &.revealed { + padding-top: 12px; } } diff --git a/ags/style/_mixins.scss b/ags/style/_mixins.scss index ba540f0..1944f5c 100644 --- a/ags/style/_mixins.scss +++ b/ags/style/_mixins.scss @@ -19,65 +19,3 @@ box-shadow: inset 0 0 0 500px rgba(colors.$fg-primary, .1); } } - -@mixin default-styles { - .button-row { - & > button { - background: colors.$bg-secondary; - margin: 0 1px; - padding: 4px 6px; - border-radius: 2px; - - &:hover { - background: colors.$bg-tertiary; - } - - &:first-child { - border-top-left-radius: 10px; - border-bottom-left-radius: 10px; - margin-left: 0; - } - - &:last-child { - border-top-right-radius: 10px; - border-bottom-right-radius: 10px; - margin-right: 0; - } - } - } - - selection { - background: colors.$bg-tertiary; - } - - 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"; - } - - & trough { - background: funs.toRGB(color.adjust($color: wal.$color1, $lightness: -20%)); - border-radius: 8px; - margin: 2px 0; - } - - & trough highlight { - background: wal.$color1; - min-height: .9em; - border-top-left-radius: inherit; - border-bottom-left-radius: inherit; - } - - & trough slider { - border-radius: 50%; - margin: -2px 0; - background: wal.$foreground; - margin-left: -1px; - min-width: 1.2em; - min-height: 1.2em; - } -} diff --git a/ags/style/_wal.scss b/ags/style/_wal.scss index ed26fcb..131d836 100644 --- a/ags/style/_wal.scss +++ b/ags/style/_wal.scss @@ -1,26 +1,26 @@ // SCSS Variables // Generated by 'wal' -$wallpaper: "/home/joaov/wallpapers/Frieren Underwater.jpg"; +$wallpaper: "/home/joaov/wallpapers/Gumi Street Bike.jpg"; // Special -$background: #0a1d30; -$foreground: #c1c6cb; -$cursor: #c1c6cb; +$background: #0d101f; +$foreground: #c2c3c7; +$cursor: #c2c3c7; // Colors -$color0: #0a1d30; -$color1: #13A9D8; -$color2: #4EAED3; -$color3: #2AC9EB; -$color4: #97A0AB; -$color5: #D1B8B5; -$color6: #9CB6CD; -$color7: #93989d; -$color8: #606b76; -$color9: #6eadc0; -$color10: #8abacd; -$color11: #84bdca; -$color12: #9cb2d4; -$color13: #e3c2bf; -$color14: #afc8dd; -$color15: #c1c6cb; +$color0: #0d101f; +$color1: #586C8C; +$color2: #649D93; +$color3: #60AFB7; +$color4: #96ABA0; +$color5: #A3CCA4; +$color6: #CFD8B4; +$color7: #90929b; +$color8: #5c6071; +$color9: #698abf; +$color10: #79c5b9; +$color11: #85c4ca; +$color12: #9bd4b4; +$color13: #b3deb3; +$color14: #dde4c2; +$color15: #c2c3c7;