diff options
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_font.scss | 21 | ||||
| -rw-r--r-- | scss/_lib.scss | 29 | ||||
| -rw-r--r-- | scss/bar.scss | 103 | ||||
| -rw-r--r-- | scss/scheme/_mocha.scss | 26 | ||||
| -rw-r--r-- | scss/widgets.scss | 120 |
5 files changed, 299 insertions, 0 deletions
diff --git a/scss/_font.scss b/scss/_font.scss new file mode 100644 index 0000000..405a850 --- /dev/null +++ b/scss/_font.scss @@ -0,0 +1,21 @@ +@mixin title { + font-family: "Gabarito", "Poppins", "Readex Pro", "Lexend", sans-serif; +} + +@mixin main { + font-family: "Rubik", "Geist", "AR One Sans", "Reddit Sans", "Inter", "Roboto", "Ubuntu", "Noto Sans", sans-serif; +} + +@mixin icon { + font-family: "Material Symbols Rounded", "MaterialSymbolsRounded", "Material Symbols Outlined", + "Material Symbols Sharp"; +} + +@mixin mono { + font-family: "JetBrains Mono NF", "JetBrains Mono Nerd Font", "JetBrains Mono NL", "SpaceMono NF", + "SpaceMono Nerd Font", monospace; +} + +@mixin reading { + font-family: "Readex Pro", "Lexend", "Noto Sans", sans-serif; +} diff --git a/scss/_lib.scss b/scss/_lib.scss new file mode 100644 index 0000000..19a2867 --- /dev/null +++ b/scss/_lib.scss @@ -0,0 +1,29 @@ +$scale: 0.068rem; +@function s($value: 1) { + @return $value * $scale; +} + +@mixin rounded($all, $tl: $all, $tr: $all, $br: $all, $bl: $all) { + border-radius: s($tl) s($tr) s($br) s($bl); + -gtk-outline-radius: s($tl) s($tr) s($br) s($bl); +} + +@mixin border($colour, $width: 1, $style: solid) { + border: s($width) $style $colour; +} + +@mixin spacing($val: 5, $vertical: false) { + $dir: if($vertical, bottom, right); + + & > * { + margin-#{$dir}: s($val); + + &:last-child { + margin-#{$dir}: 0; + } + } +} + +@mixin element-decel { + transition: 200ms cubic-bezier(0, 0.55, 0.45, 1); +} diff --git a/scss/bar.scss b/scss/bar.scss new file mode 100644 index 0000000..618944a --- /dev/null +++ b/scss/bar.scss @@ -0,0 +1,103 @@ +@use "sass:color"; +@use "lib"; +@use "scheme"; +@use "font"; + +.bar { + @include lib.rounded(10, $tl: 0, $tr: 0); + @include lib.border(color.change(scheme.$rosewater, $alpha: 0.7), 2); + @include lib.spacing(10); + @include font.mono; + + border-top: none; + background-color: scheme.$base; + padding: lib.s(8) lib.s(20); + font-size: lib.s(14); + + & > * { + @include lib.spacing(10); + } + + .module { + @include lib.rounded(5); + @include lib.spacing; + + padding: lib.s(3) lib.s(8); + background-color: scheme.$surface0; + } + + label.icon { + @include font.icon; + + font-size: lib.s(18); + } + + .os-icon { + @include lib.border(scheme.$yellow); + + color: scheme.$yellow; + font-size: lib.s(14); + padding-right: lib.s(12); + } + + .active-window { + color: scheme.$pink; + } + + .media-playing { + @include lib.spacing(8); + + color: scheme.$lavender; + + icon { + font-size: lib.s(16); + } + } + + .workspaces { + @include lib.border(scheme.$maroon); + + padding: lib.s(3) lib.s(18); + + & > * { + @include lib.rounded(2); + @include lib.element-decel; + + min-width: lib.s(20); + min-height: lib.s(4); + background-color: scheme.$surface1; + + &.occupied { + background-color: scheme.$sky; + } + + &.focused { + min-width: lib.s(30); + background-color: scheme.$mauve; + } + } + } + + .tray { + @include lib.spacing(10); + + font-size: lib.s(15); + } + + .notifications { + color: scheme.$mauve; + } + + .date-time { + color: scheme.$peach; + } + + .power { + @include lib.border(scheme.$red); + @include font.icon; + + color: scheme.$red; + font-weight: bold; + font-size: lib.s(16); + } +} diff --git a/scss/scheme/_mocha.scss b/scss/scheme/_mocha.scss new file mode 100644 index 0000000..728949d --- /dev/null +++ b/scss/scheme/_mocha.scss @@ -0,0 +1,26 @@ +$rosewater: #f5e0dc; +$flamingo: #f2cdcd; +$pink: #f5c2e7; +$mauve: #cba6f7; +$red: #f38ba8; +$maroon: #eba0ac; +$peach: #fab387; +$yellow: #f9e2af; +$green: #a6e3a1; +$teal: #94e2d5; +$sky: #89dceb; +$sapphire: #74c7ec; +$blue: #89b4fa; +$lavender: #b4befe; +$text: #cdd6f4; +$subtext1: #bac2de; +$subtext0: #a6adc8; +$overlay2: #9399b2; +$overlay1: #7f849c; +$overlay0: #6c7086; +$surface2: #585b70; +$surface1: #45475a; +$surface0: #313244; +$base: #1e1e2e; +$mantle: #181825; +$crust: #11111b; diff --git a/scss/widgets.scss b/scss/widgets.scss new file mode 100644 index 0000000..0e11f46 --- /dev/null +++ b/scss/widgets.scss @@ -0,0 +1,120 @@ +@use "sass:color"; +@use "scheme"; +@use "lib"; +@use "font"; + +@keyframes appear { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +@mixin -appear($duration: 100ms) { + animation-name: appear; + animation-duration: $duration; + animation-timing-function: ease-out; + animation-iteration-count: 1; +} + +menu { + @include -appear; + @include lib.rounded(5); + @include lib.border(color.change(scheme.$blue, $alpha: 0.7), 2); + @include font.main; + + padding: lib.s(10); + background-color: scheme.$surface0; + color: scheme.$text; + + & > menuitem { + @include lib.rounded(8); + + padding: lib.s(8) lib.s(16); + background: transparent; + transition: 0.2s ease background-color; + + &:hover, + &:focus { + background-color: scheme.$surface1; + } + + &:active { + background-color: scheme.$surface2; + } + + &:disabled { + color: scheme.$subtext0; + } + + & > arrow { + @include lib.rounded(1000); + + min-width: lib.s(5); + min-height: lib.s(5); + background-color: scheme.$blue; + + &.right { + margin-left: lib.s(12); + } + + &.left { + margin-right: lib.s(12); + } + } + } + + & > separator { + @include lib.rounded(1); + + background-color: scheme.$blue; + min-width: lib.s(0.5); + min-height: lib.s(0.5); + margin: lib.s(8) 0; + } +} + +tooltip, +.tooltip { + @include lib.rounded(5); + @include lib.border(color.change(scheme.$teal, $alpha: 0.7)); + @include font.reading; + + background-color: scheme.$surface0; + color: scheme.$text; + padding: lib.s(4) lib.s(8); +} + +tooltip { + @include -appear(200ms); +} + +scrollbar { + trough { + @include lib.rounded(1000); + + min-width: lib.s(12); + background-color: transparent; + } + + slider { + @include lib.rounded(1000); + @include lib.element-decel; + + min-width: lib.s(6); + min-height: lib.s(30); + background-color: color.change(scheme.$overlay0, $alpha: 0.3); + + &:hover, + &:focus { + background-color: color.change(scheme.$overlay0, $alpha: 0.4); + } + + &:active { + background-color: color.change(scheme.$overlay1, $alpha: 0.5); + } + } +} |