diff --git a/.memo/hyprland-ricing b/.memo/hyprland-ricing index 22b93b7..d3340c5 100644 --- a/.memo/hyprland-ricing +++ b/.memo/hyprland-ricing @@ -57,7 +57,7 @@ activate-linux # :/ polkit-gnome # polkit authentication agent # fonts & themes -maplemonol-nf-cn +maplemono-nf-cn ttf-font-awesome meslo font # I installed it manually spicetify # spotify tweaks diff --git a/.scripts/smb-mount.sh b/.scripts/smb-mount.sh new file mode 100755 index 0000000..dfd46d7 --- /dev/null +++ b/.scripts/smb-mount.sh @@ -0,0 +1,21 @@ +#!/bin/sh + +[ -z $SMB_CREDENTIALS ] && SMB_CREDENTIALS="$HOME/.smbcredentials" +[ ! -f $SMB_CREDENTIALS ] && exit 1 + +[ -z $SMB_HOST ] && SMB_HOST="10.8.0.1" +[ -z $SMB_DIR ] && SMB_DIR="share" +[ -z $SMB_MOUNT_POINT ] && SMB_MOUNT_POINT="/mnt/smb" +[ -z $SMB_UID ] && SMB_UID=$(id -u) +[ -z $SMB_GID ] && SMB_GID=$(id -g) + +[ ! -d "$SMB_MOUNT_POINT" ] && sudo mkdir -p "$SMB_MOUNT_POINT" + +sudo mount -t cifs //$SMB_HOST/$SMB_DIR "$SMB_MOUNT_POINT" -o credentials=$SMB_CREDENTIALS,uid=$SMB_UID,gid=$SMB_GID + +if [ $? -eq 0 ]; then + echo "Mounted $SMB_HOST/$SMB_DIR at $SMB_MOUNT_POINT" +else + echo "Failed to mount $SMB_HOST/$SMB_DIR at $SMB_MOUNT_POINT" + exit 1 +fi diff --git a/README.md b/README.md index 9ad0e84..c982993 100644 --- a/README.md +++ b/README.md @@ -4,17 +4,17 @@ ## Setup Overview -- **OS**: Archlinux -- **WM**: Hyprland -- **Bar**: Waybar -- **Shell**: Fish -- **Prompt**: Oh My Posh -- **Terminal**: Kitty & Ghostty (floating) -- **Colorscheme**: Catppuccin-mocha(-blue) -- **App Launcher**: Rofi -- **Logout Screen**: Wlogout -- **Desktop Widgets**: Eww -- **Notification Daemon**: Mako +- **OS**: Archlinux +- **WM**: Hyprland +- **Bar**: Waybar +- **Shell**: Fish +- **Prompt**: Oh My Posh +- **Terminal**: Kitty & Ghostty (floating) +- **Colorscheme**: Catppuccin-mocha(-blue) +- **App Launcher**: Rofi +- **Logout Screen**: Wlogout +- **Desktop Widgets**: Eww +- **Notification Daemon**: Mako ## Hyprland & most of Hypr\* ecosystem @@ -22,9 +22,9 @@ Based on [end-4/dots-hyprland](https://github.com/end-4/dots-hyprland) but witho ## Eww -- `main`, main dashboard, modified from [syndrizzle/hotfiles](https://github.com/syndrizzle/hotfiles/tree/bspwm) without notification center. -- `lyrics`, scrolling lyrics player, dependents on api from [akashrchandran/spotify-lyrics-api](https://github.com/akashrchandran/spotify-lyrics-api) and [a small program](https://github.com/Uyanide/spotify-lyrics) from myself (which also happens to be my frist Golang program :D). -- `lyrics-single`, similar to `lyrics`, but only with a single line and can be easily embeded into the status bar. +- `main`, main dashboard, modified from [syndrizzle/hotfiles](https://github.com/syndrizzle/hotfiles/tree/bspwm) without notification center. +- `lyrics`, scrolling lyrics player, dependents on api from [akashrchandran/spotify-lyrics-api](https://github.com/akashrchandran/spotify-lyrics-api) and [a small program](https://github.com/Uyanide/spotify-lyrics) from myself (which also happens to be my frist Golang program :D). +- `lyrics-single`, similar to `lyrics`, but only with a single line and can be easily embeded into the status bar. ## Rofi @@ -42,8 +42,8 @@ Gathered from internet, based on I don't know who (such config files had including: -- MesloLGM Nerd Font (& Mono) -- Maple Mono Normal CN -- Font Awesome 6 Free -- Noto Sans -- ... +- MesloLGM Nerd Font (& Mono) +- Maple Mono NF CN +- Font Awesome 6 Free +- Noto Sans +- ... diff --git a/alacritty/alacritty.toml b/alacritty/alacritty.toml index 3c80388..bbcddba 100644 --- a/alacritty/alacritty.toml +++ b/alacritty/alacritty.toml @@ -54,19 +54,19 @@ draw_bold_text_with_bright_colors = true size = 12 [font.normal] -family = "Meslo LGM Nerd Font" +family = "Maple Mono NF CN" style = "Regular" [font.bold] -family = "Meslo LGM Nerd Font" +family = "Maple Mono NF CN" style = "Bold" [font.italic] -family = "Meslo LGM Nerd Font" +family = "Maple Mono NF CN" style = "Italic" [font.bold_italic] -family = "Meslo LGM Nerd Font" +family = "Maple Mono NF CN" style = "Bold Italic" [selection] diff --git a/eww/Lyrics/eww.scss b/eww/Lyrics/eww.scss index 9689511..dea0b8f 100644 --- a/eww/Lyrics/eww.scss +++ b/eww/Lyrics/eww.scss @@ -1,97 +1,97 @@ * { - all: unset; - transition: 200ms ease-out; + all: unset; + transition: 200ms ease-out; } .lyrics-window { - background-color: $bg; - border-radius: 16px; - border: 2px solid $blue; + background-color: $bg; + border-radius: 16px; + border: 2px solid $blue; } .lyrics-window-single { - background-color: rgba(30, 30, 46, 0.6); - border-radius: 14px; - border: 2px solid $blue; + background-color: rgba(30, 30, 46, 0.6); + border-radius: 14px; + border: 2px solid $blue; } .lyrics-box { - margin: 20px 10px 0 20px; - min-width: 500px; - min-height: 70px; - background-color: $gray-alt; - border-radius: 15px; - padding: 10px; - box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5); + margin: 20px 10px 0 20px; + min-width: 500px; + min-height: 70px; + background-color: $gray-alt; + border-radius: 15px; + padding: 10px; + box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5); } .lyrics-box-single { - margin: 5px 0px 5px 10px; - min-width: 740px; + margin: 5px 0px 5px 10px; + min-width: 740px; } .lyrics-text { - color: $fg; - font-size: 15px; - font-family: 'Maple Mono Normal NF CN', 'Maple Mono CN', monospace; + color: $fg; + font-size: 15px; + font-family: 'Maple Mono NF CN', 'Maple Mono CN', monospace; } .lyrics-text-single { - color: $fg; - font-size: 15px; - font-family: 'Maple Mono Normal NF CN', 'Maple Mono CN', monospace; - min-height: 29px; + color: $fg; + font-size: 15px; + font-family: 'Maple Mono NF CN', 'Maple Mono CN', monospace; + min-height: 29px; } .control-box { - margin: 20px 10px 0 0; - padding: 6px; - min-height: 90px; + margin: 20px 10px 0 0; + padding: 6px; + min-height: 90px; } .offset-minus, .offset-reset, .offset-plus, .offset-clear { - padding: 0px 6px; - margin: 0px 4px 0px 4px; - font-family: 'MesloLGM Nerd Font Mono'; - font-size: 25px; - min-width: 16px; + padding: 0px 6px; + margin: 0px 4px 0px 4px; + font-family: 'MesloLGM Nerd Font Mono'; + font-size: 25px; + min-width: 16px; } .offset-minus-single, .offset-plus-single, .offset-reset-single, .info-single { - padding: 0px 6px; - margin: 0; - font-family: 'MesloLGM Nerd Font Mono'; - font-size: 20px; - min-width: 16px; + padding: 0px 6px; + margin: 0; + font-family: 'MesloLGM Nerd Font Mono'; + font-size: 20px; + min-width: 16px; } .offset-minus, .offset-minus-single { - color: $blue; + color: $blue; } .offset-plus, .offset-plus-single { - color: $yellow; + color: $yellow; } .offset-reset, .offset-reset-single { - color: $green; + color: $green; } .offset-clear { - color: $red; + color: $red; } .info-single { - color: $cyan; + color: $cyan; } .offset-minus:hover, @@ -106,69 +106,69 @@ .player-prev:hover, .player-next:hover, .player-pp:hover { - color: $fg; + color: $fg; } .player-music-slider-box { - padding: 12px; - margin: 10px 0 20px 20px; - border-radius: 15px; - background-color: $gray-alt; - box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5); - min-height: 16px; + padding: 12px; + margin: 10px 0 20px 20px; + border-radius: 15px; + background-color: $gray-alt; + box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5); + min-height: 16px; } .player-music-slider trough { - background-color: $gray; + background-color: $gray; } .player-music-slider highlight { - background-color: $blue; - padding: 3px; + background-color: $blue; + padding: 3px; } .player-music-slider { - min-width: 200px; + min-width: 200px; } .player-controls-box { - margin: 10px 0 20px 20px; + margin: 10px 0 20px 20px; } .player-pp, .player-next, .player-prev, .lyrics-info { - padding: 0px 6px; - margin: 0px 4px 0px 4px; - font-family: 'MesloLGM Nerd Font Mono'; - font-size: 25px; - min-width: 16px; - color: $fg-alt; + padding: 0px 6px; + margin: 0px 4px 0px 4px; + font-family: 'MesloLGM Nerd Font Mono'; + font-size: 25px; + min-width: 16px; + color: $fg-alt; } .lyrics-info { - color: $cyan; + color: $cyan; } .offset-box { - padding: 11px; - margin: 10px 20px 20px 10px; - border-radius: 15px; - // background-color: $gray-alt; - // box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5); + padding: 11px; + margin: 10px 20px 20px 10px; + border-radius: 15px; + // background-color: $gray-alt; + // box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5); } .offset-label { - color: $fg-alt; - font-size: 15px; - font-family: 'Maple Mono Normal NF CN', 'Maple Mono CN', monospace; - margin-right: 10px; + color: $fg-alt; + font-size: 15px; + font-family: 'Maple Mono NF CN', 'Maple Mono CN', monospace; + margin-right: 10px; } .offset-value { - color: $fg; - font-size: 15px; - font-family: 'Maple Mono Normal NF CN', 'Maple Mono CN', monospace; - margin-right: 10px; + color: $fg; + font-size: 15px; + font-family: 'Maple Mono NF CN', 'Maple Mono CN', monospace; + margin-right: 10px; } diff --git a/ghostty/config b/ghostty/config index 45da5ee..317e83a 100644 --- a/ghostty/config +++ b/ghostty/config @@ -12,7 +12,7 @@ command = exec fish confirm-close-surface = false -font-family = Maple Mono Normal NF CN +font-family = Maple Mono NF CN font-size = 12 cursor-style = bar diff --git a/hypr/hyprland/execs.conf b/hypr/hyprland/execs.conf index 39f09ab..cc1a88b 100755 --- a/hypr/hyprland/execs.conf +++ b/hypr/hyprland/execs.conf @@ -33,3 +33,6 @@ exec-once = hyprctl plugin load "/usr/lib/libhyprexpo.so" # dock # exec-once = nwg-dock-hyprland -d -i 32 -c "fuzzel" -ico "$HOME/.config/nwg-dock-hyprland/archlinux.png" + +# Logitech Mouse +exec-once = solaar -w hide diff --git a/hypr/hyprlock.conf b/hypr/hyprlock.conf index 12571c3..39ee126 100755 --- a/hypr/hyprlock.conf +++ b/hypr/hyprlock.conf @@ -4,12 +4,16 @@ # $entry_color = rgba(B8CACBFF) $text_color = rgba(FFFFFFFF) $entry_background_color = rgba(33333360) -$entry_border_color = rgba(3B3B3B100) +$entry_border_color = rgba(3B3B3B64) $entry_color = rgba(FFFFFFFF) $font_family = Rubik Light $font_family_clock = Rubik Light $font_material_symbols = Material Symbols Rounded +# workaround: https://github.com/hyprwm/hyprlock/issues/825 +animation = fade, 0 +# another wierd bug that only happens in hybrid mode :/ + background { # color = rgba(041011FF) # color = rgba(000000FF) diff --git a/kitty/kitty.conf b/kitty/kitty.conf index 6ce132b..98be906 100755 --- a/kitty/kitty.conf +++ b/kitty/kitty.conf @@ -23,7 +23,7 @@ window_padding_width 10 background_opacity 0.75 background_blur 16 -font_family Maple Mono Normal NF CN +font_family Maple Mono NF CN font_size 12 tab_bat_style powerline diff --git a/rofi/config.rasi b/rofi/config.rasi index fe5ceaf..e62e9d0 100644 --- a/rofi/config.rasi +++ b/rofi/config.rasi @@ -1,6 +1,6 @@ /*****----- ALL -----*****/ * { - font: "Maple Mono Normal NF CN Semibold 10"; + font: "Maple Mono NF CN Semibold 10"; base: #1e1e2e; mantle: #181825; text: #cdd6f4; diff --git a/waybar/style.css b/waybar/style.css index 6e996db..4927393 100644 --- a/waybar/style.css +++ b/waybar/style.css @@ -1,102 +1,102 @@ @import 'mocha.css'; * { - font-family: 'Font Awesome 6 Free', 'Maple Mono Normal NF CN ExtraLight', 'Noto Sans', Arial, sans-serif; - font-size: 12px; - font-weight: 900; - margin: 0; - padding: 0; - transition-property: background-color; - transition-duration: 0.5s; + font-family: 'Font Awesome 6 Free', 'Maple Mono NF CN ExtraLight', 'Noto Sans', Arial, sans-serif; + font-size: 12px; + font-weight: 900; + margin: 0; + padding: 0; + transition-property: background-color; + transition-duration: 0.5s; } /* Reset all styles */ * { - border: none; - border-radius: 3px; - min-height: 0; - margin: 2px 1px 2px 1px; + border: none; + border-radius: 3px; + min-height: 0; + margin: 2px 1px 2px 1px; } /* The whole bar */ #waybar { - background-color: transparent; - color: #ffffff; - transition-property: background-color; - transition-duration: 0.5s; - border-radius: 0px; - margin: 0px; + background-color: transparent; + color: #ffffff; + transition-property: background-color; + transition-duration: 0.5s; + border-radius: 0px; + margin: 0px; } window#waybar.hidden { - opacity: 0.2; + opacity: 0.2; } tooltip { - background: @base; - border: 2px solid @overlay0; + background: @base; + border: 2px solid @overlay0; } #custom-workspacenew, #workspaces button { - padding: 3px 5px; /* Adjusted padding to reduce height */ - margin: 3px 5px; /* Reduced margin slightly */ - border-radius: 6px; - color: @foreground; - background-color: alpha(@base, 0); - transition: all 0.3s ease-in-out; - font-size: 13px; /* Slightly smaller font size */ + padding: 3px 5px; /* Adjusted padding to reduce height */ + margin: 3px 5px; /* Reduced margin slightly */ + border-radius: 6px; + color: @foreground; + background-color: alpha(@base, 0); + transition: all 0.3s ease-in-out; + font-size: 13px; /* Slightly smaller font size */ } #workspaces button:hover { - background: @surface0; + background: @surface0; } #workspaces button.active { - color: @foreground; - background: @blue; + color: @foreground; + background: @blue; } #workspaces button.urgent { - background-color: @red; + background-color: @red; } #workspaceactions { - background-color: alpha(@base, 0.6); - border-radius: 14px; - padding: 3px 6px; /* Adjusted padding to reduce height */ - border: 2px solid @blue; + background-color: alpha(@base, 0.6); + border-radius: 14px; + padding: 3px 6px; /* Adjusted padding to reduce height */ + border: 2px solid @blue; } #workspaces { - padding: 0px; - margin: 0px; + padding: 0px; + margin: 0px; } #custom-workspacenew:hover { - background-color: alpha(@blue, 0.3); + background-color: alpha(@blue, 0.3); } #custom-workspacespecial:hover { - background-color: alpha(@blue, 0.3); + background-color: alpha(@blue, 0.3); } #window { - background-color: alpha(@base, 0.6); - font-size: 15px; /* Slightly smaller font size */ - font-weight: 800; - color: @subtext1; - border-radius: 14px; - padding: 3px 6px; /* Reduced padding */ - margin: 2px; - opacity: 1; + background-color: alpha(@base, 0.6); + font-size: 15px; /* Slightly smaller font size */ + font-weight: 800; + color: @subtext1; + border-radius: 14px; + padding: 3px 6px; /* Reduced padding */ + margin: 2px; + opacity: 1; } #custom-mediaplayer { - background-color: alpha(@base, 0.6); - border-radius: 14px; - padding: 3px 12px; - color: @lavender; + background-color: alpha(@base, 0.6); + border-radius: 14px; + padding: 3px 12px; + color: @lavender; } #clock, @@ -128,276 +128,276 @@ tooltip { #custom-weather.showyIcyDay, #custom-weather.snowyIcyNight, #custom-weather.default { - background-color: alpha(@base, 0.6); - border-radius: 14px; - padding: 6px; /* Adjusted padding */ + background-color: alpha(@base, 0.6); + border-radius: 14px; + padding: 6px; /* Adjusted padding */ } #monitors { - background-color: alpha(@base, 0.6); - border-radius: 14px; - padding: 6px; + background-color: alpha(@base, 0.6); + border-radius: 14px; + padding: 6px; } #network.speed { - background: transparent; - color: @lavender; - padding: 0; + background: transparent; + color: @lavender; + padding: 0; } #temperature { - background: transparent; - color: @maroon; - padding: 0px; + background: transparent; + color: @maroon; + padding: 0px; } #memory { - color: @peach; - background: transparent; - padding: 0px; + color: @peach; + background: transparent; + padding: 0px; } #cpu { - color: @yellow; - background: transparent; - padding: 0px; + color: @yellow; + background: transparent; + padding: 0px; } #battery { - background: transparent; - color: #c0caf5; - padding: 0; + background: transparent; + color: #c0caf5; + padding: 0; } #battery.charging, #battery.full, #battery.plugged { - color: @green; + color: @green; } #backlight { - background: transparent; - color: @teal; - padding: 0; + background: transparent; + color: @teal; + padding: 0; } #wireplumber { - background: transparent; - color: @sapphire; - padding: 0; + background: transparent; + color: @sapphire; + padding: 0; } #custom-screenshot_t { - background-color: alpha(@base, 0.6); - border-radius: 14px; - padding: 6px; + background-color: alpha(@base, 0.6); + border-radius: 14px; + padding: 6px; } #custom-spotify { - background-color: alpha(@base, 0.6); - border-radius: 14px; - padding: 3px 12px; + background-color: alpha(@base, 0.6); + border-radius: 14px; + padding: 3px 12px; } #tray { - background-color: alpha(@base, 0.6); - border-radius: 14px; - padding: 6px; /* Adjusted padding */ - border: 2px solid @blue; + background-color: alpha(@base, 0.6); + border-radius: 14px; + padding: 6px; /* Adjusted padding */ + border: 2px solid @blue; } #custom-power { - background-color: alpha(@base, 0.6); - border-radius: 14px; - padding: 6px; - border: 3px solid @maroon; + background-color: alpha(@base, 0.6); + border-radius: 14px; + padding: 6px; + border: 3px solid @maroon; } #custom-power:hover { - background-color: alpha(@maroon, 0.3); + background-color: alpha(@maroon, 0.3); } #custom-rofi { - background-color: alpha(@base, 0.6); - border-radius: 14px; - padding: 6px; - border: 3px solid @teal; + background-color: alpha(@base, 0.6); + border-radius: 14px; + padding: 6px; + border: 3px solid @teal; } #custom-rofi:hover { - background-color: alpha(@teal, 0.3); + background-color: alpha(@teal, 0.3); } #custom-caffeine { - background-color: alpha(@base, 0.6); - border-radius: 14px; - padding: 6px; - border: 3px solid @yellow; + background-color: alpha(@base, 0.6); + border-radius: 14px; + padding: 6px; + border: 3px solid @yellow; } #custom-caffeine:hover { - background-color: alpha(@yellow, 0.3); + background-color: alpha(@yellow, 0.3); } #custom-caffeine.active { - border: 3px solid @peach; + border: 3px solid @peach; } #custom-storage { - background-color: alpha(@base, 0.6); - border-radius: 14px; - padding: 6px; + background-color: alpha(@base, 0.6); + border-radius: 14px; + padding: 6px; } #custom-launcher { - background-color: #1b242b; - color: #6a92d7; - border-radius: 7.5px; - padding: 3px 6px; /* Adjusted padding */ + background-color: #1b242b; + color: #6a92d7; + border-radius: 7.5px; + padding: 3px 6px; /* Adjusted padding */ } #custom-weather.severe { - color: #eb937d; + color: #eb937d; } #custom-weather.sunnyDay { - color: #c2ca76; + color: #c2ca76; } #custom-weather.clearNight { - color: #cad3f5; + color: #cad3f5; } #custom-weather.cloudyFoggyDay, #custom-weather.cloudyFoggyNight { - color: #c2ddda; + color: #c2ddda; } #custom-weather.rainyDay, #custom-weather.rainyNight { - color: #5aaca5; + color: #5aaca5; } #custom-weather.showyIcyDay, #custom-weather.snowyIcyNight { - color: #d6e7e5; + color: #d6e7e5; } #custom-weather.default { - color: #dbd9d8; + color: #dbd9d8; } /* If workspaces is the leftmost module, omit left margin */ .modules-left > widget:first-child > #workspaces { - margin-left: 0; + margin-left: 0; } /* If workspaces is the rightmost module, omit right margin */ .modules-right > widget:last-child > #workspaces { - margin-right: 0; + margin-right: 0; } #pulseaudio { - color: #7d9bba; + color: #7d9bba; } #clock { - color: #c8d2e0; - border: 2px solid @blue; + color: #c8d2e0; + border: 2px solid @blue; } @keyframes blink { - to { - background-color: rgba(30, 34, 42, 0.5); - color: #abb2bf; - } + to { + background-color: rgba(30, 34, 42, 0.5); + color: #abb2bf; + } } #battery.critical:not(.charging) { - color: @red; - animation-name: blink; - animation-duration: 0.5s; - animation-timing-function: linear; - animation-iteration-count: infinite; - animation-direction: alternate; + color: @red; + animation-name: blink; + animation-duration: 0.5s; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; } label:focus { - background-color: #000000; + background-color: #000000; } #disk { - background-color: #964b00; + background-color: #964b00; } #bluetooth { - color: @sapphire; + color: @sapphire; } #bluetooth.disconnected { - color: @red; + color: @red; } #network.disconnected { - color: @red; + color: @red; } #custom-media { - background-color: #66cc99; - color: #2a5c45; - min-width: 100px; + background-color: #66cc99; + color: #2a5c45; + min-width: 100px; } #custom-media.custom-spotify { - background-color: #66cc99; + background-color: #66cc99; } #custom-media.custom-vlc { - background-color: #ffa000; + background-color: #ffa000; } #temperature.critical { - background-color: #eb4d4b; + background-color: #eb4d4b; } #tray > .passive { - -gtk-icon-effect: dim; + -gtk-icon-effect: dim; } #tray > .needs-attention { - -gtk-icon-effect: highlight; - background-color: #eb4d4b; + -gtk-icon-effect: highlight; + background-color: #eb4d4b; } #idle_inhibitor { - background-color: #2d3436; + background-color: #2d3436; } #idle_inhibitor.activated { - background-color: #ecf0f1; - color: #2d3436; + background-color: #ecf0f1; + color: #2d3436; } #language { - background: #00b093; - color: #740864; - padding: 0 0px; - margin: 0 5px; - min-width: 16px; + background: #00b093; + color: #740864; + padding: 0 0px; + margin: 0 5px; + min-width: 16px; } #keyboard-state { - background: #97e1ad; - color: #000000; - padding: 0 0px; - margin: 0 5px; - min-width: 16px; + background: #97e1ad; + color: #000000; + padding: 0 0px; + margin: 0 5px; + min-width: 16px; } #keyboard-state > label { - padding: 0 0px; + padding: 0 0px; } #keyboard-state > label.locked { - background: rgba(0, 0, 0, 0.2); + background: rgba(0, 0, 0, 0.2); }