From 6304e6ff9523576a1f1928923e0c2cbd3a0d5573 Mon Sep 17 00:00:00 2001 From: Thomas Forgione Date: Sat, 5 Apr 2025 19:24:35 +0200 Subject: [PATCH] Hyprland --- hypr/hyprland.conf | 301 +++++++++++++++++++++++++++++++++++++++++++ hypr/hyprpaper.conf | 2 + hypr/waybar.jsonc | 220 +++++++++++++++++++++++++++++++ waybar/config | 107 +++++++++++++++ waybar/macchiato.css | 26 ++++ waybar/style.css | 146 +++++++++++++++++++++ 6 files changed, 802 insertions(+) create mode 100644 hypr/hyprland.conf create mode 100644 hypr/hyprpaper.conf create mode 100644 hypr/waybar.jsonc create mode 100644 waybar/config create mode 100644 waybar/macchiato.css create mode 100644 waybar/style.css diff --git a/hypr/hyprland.conf b/hypr/hyprland.conf new file mode 100644 index 0000000..b4ea34c --- /dev/null +++ b/hypr/hyprland.conf @@ -0,0 +1,301 @@ +# This is an example Hyprland config file. +# Refer to the wiki for more information. +# https://wiki.hyprland.org/Configuring/ + +# Please note not all available settings / options are set here. +# For a full list, see the wiki + +# You can split this configuration into multiple files +# Create your files separately and then link them to this file like this: +# source = ~/.config/hypr/myColors.conf + + +################ +### MONITORS ### +################ + +# See https://wiki.hyprland.org/Configuring/Monitors/ +monitor=,preferred,auto,1 + + +################### +### MY PROGRAMS ### +################### + +# See https://wiki.hyprland.org/Configuring/Keywords/ + +# Set programs that you use +$terminal = alacritty +$fileManager = dolphin +$menu = wofi --show drun + + +################# +### AUTOSTART ### +################# + +# Autostart necessary processes (like notifications daemons, status bars, etc.) +# Or execute your favorite apps at launch like this: + +# exec-once = $terminal +exec-once = waybar & +exec-once = hyprpaper & +exec-once = nm-applet & +exec-once = flameshot & +exec-once = blueberry-tray & +exec-once = nextcloud --background & +exec-once = numlockx on + + +############################# +### ENVIRONMENT VARIABLES ### +############################# + +# See https://wiki.hyprland.org/Configuring/Environment-variables/ + +env = XCURSOR_SIZE,18 +env = HYPRCURSOR_SIZE,18 + + +##################### +### LOOK AND FEEL ### +##################### + +# Refer to https://wiki.hyprland.org/Configuring/Variables/ + +# https://wiki.hyprland.org/Configuring/Variables/#general +general { + gaps_in = 0 + gaps_out = 0 + + border_size = 1 + + # https://wiki.hyprland.org/Configuring/Variables/#variable-types for info about colors + col.active_border = rgba(ffffff55) + col.inactive_border = rgba(ffffff22) + + # Set to true enable resizing windows by clicking and dragging on borders and gaps + resize_on_border = false + + # Please see https://wiki.hyprland.org/Configuring/Tearing/ before you turn this on + allow_tearing = false + + layout = dwindle +} + +# https://wiki.hyprland.org/Configuring/Variables/#decoration +decoration { + rounding = 0 + rounding_power = 2 + + # Change transparency of focused and unfocused windows + active_opacity = 1.0 + inactive_opacity = 1.0 + + shadow { + enabled = false + range = 4 + render_power = 3 + color = rgba(1a1a1aee) + } + + # https://wiki.hyprland.org/Configuring/Variables/#blur + blur { + enabled = true + size = 3 + passes = 1 + + vibrancy = 0.1696 + } +} + +# https://wiki.hyprland.org/Configuring/Variables/#animations +animations { + enabled = yes, please :) + + # Default animations, see https://wiki.hyprland.org/Configuring/Animations/ for more + + bezier = easeOutQuint,0.23,1,0.32,1 + bezier = easeInOutCubic,0.65,0.05,0.36,1 + bezier = linear,0,0,1,1 + bezier = almostLinear,0.5,0.5,0.75,1.0 + bezier = quick,0.15,0,0.1,1 + + animation = global, 1, 10, default + animation = border, 1, 5.39, easeOutQuint + animation = windows, 1, 4.79, easeOutQuint + animation = windowsIn, 1, 4.1, easeOutQuint, popin 87% + animation = windowsOut, 1, 1.49, linear, popin 87% + animation = fadeIn, 1, 1.73, almostLinear + animation = fadeOut, 1, 1.46, almostLinear + animation = fade, 1, 3.03, quick + animation = layers, 1, 3.81, easeOutQuint + animation = layersIn, 1, 4, easeOutQuint, fade + animation = layersOut, 1, 1.5, linear, fade + animation = fadeLayersIn, 1, 1.79, almostLinear + animation = fadeLayersOut, 1, 1.39, almostLinear + animation = workspaces, 1, 1.94, almostLinear, fade + animation = workspacesIn, 1, 1.21, almostLinear, fade + animation = workspacesOut, 1, 1.94, almostLinear, fade +} + +# Ref https://wiki.hyprland.org/Configuring/Workspace-Rules/ +# "Smart gaps" / "No gaps when only" +# uncomment all if you wish to use that. +# workspace = w[tv1], gapsout:0, gapsin:0 +# workspace = f[1], gapsout:0, gapsin:0 +# windowrule = bordersize 0, floating:0, onworkspace:w[tv1] +# windowrule = rounding 0, floating:0, onworkspace:w[tv1] +# windowrule = bordersize 0, floating:0, onworkspace:f[1] +# windowrule = rounding 0, floating:0, onworkspace:f[1] + +# See https://wiki.hyprland.org/Configuring/Dwindle-Layout/ for more +dwindle { + pseudotile = true # Master switch for pseudotiling. Enabling is bound to mainMod + P in the keybinds section below + preserve_split = true # You probably want this +} + +# See https://wiki.hyprland.org/Configuring/Master-Layout/ for more +master { + new_status = master +} + +# https://wiki.hyprland.org/Configuring/Variables/#misc +misc { + force_default_wallpaper = -1 # Set to 0 or 1 to disable the anime mascot wallpapers + disable_hyprland_logo = false # If true disables the random hyprland logo / anime girl background. :( +} + + +############# +### INPUT ### +############# + +# https://wiki.hyprland.org/Configuring/Variables/#input +input { + kb_layout = fr + kb_variant = + kb_model = + kb_options = + kb_rules = + + follow_mouse = 1 + + sensitivity = 0 # -1.0 - 1.0, 0 means no modification. + + touchpad { + natural_scroll = false + } +} + +# https://wiki.hyprland.org/Configuring/Variables/#gestures +gestures { + workspace_swipe = false +} + +# Example per-device config +# See https://wiki.hyprland.org/Configuring/Keywords/#per-device-input-configs for more +device { + name = epic-mouse-v1 + sensitivity = -0.5 +} + + +################### +### KEYBINDINGS ### +################### + +# See https://wiki.hyprland.org/Configuring/Keywords/ +$mainMod = SUPER # Sets "Windows" key as main modifier + +# Example binds, see https://wiki.hyprland.org/Configuring/Binds/ for more +bind = $mainMod, return, exec, $terminal +bind = $mainMod SHIFT, E, exec, /home/thomas/.config/dotfiles/bin/clone-terminal +bind = $mainMod, A, exec, firefox +bind = $mainMod SHIFT, C, killactive, +bind = $mainMod SHIFT, Q, exec, hyprctl dispatch exit +bind = $mainMod, M, exit, +bind = $mainMod, E, exec, $fileManager +bind = $mainMod, V, togglefloating, +bind = $mainMod, R, exec, $menu +bind = $mainMod, P, pseudo, # dwindle +bind = $mainMod, J, togglesplit, # dwindle + +# Move focus with mainMod + arrow keys +# bind = $mainMod, left, movefocus, l +# bind = $mainMod, right, movefocus, r +# bind = $mainMod, up, movefocus, u +# bind = $mainMod, down, movefocus, d + +bind = $mainMod, left, workspace, e-1 +bind = $mainMod, right, workspace, e+1 + +# Switch workspaces with mainMod + [0-9] +bind = $mainMod, code:10, workspace, 1 +bind = $mainMod, code:11, workspace, 2 +bind = $mainMod, code:12, workspace, 3 +bind = $mainMod, code:13, workspace, 4 +bind = $mainMod, code:14, workspace, 5 +bind = $mainMod, code:15, workspace, 6 +bind = $mainMod, code:16, workspace, 7 +bind = $mainMod, code:17, workspace, 8 +bind = $mainMod, code:18, workspace, 9 +bind = $mainMod, code:19, workspace, 10 + +# Move active window to a workspace with mainMod + SHIFT + [0-9] +bind = $mainMod SHIFT, code:10, movetoworkspace, 1 +bind = $mainMod SHIFT, code:11, movetoworkspace, 2 +bind = $mainMod SHIFT, code:12, movetoworkspace, 3 +bind = $mainMod SHIFT, code:13, movetoworkspace, 4 +bind = $mainMod SHIFT, code:14, movetoworkspace, 5 +bind = $mainMod SHIFT, code:15, movetoworkspace, 6 +bind = $mainMod SHIFT, code:16, movetoworkspace, 7 +bind = $mainMod SHIFT, code:17, movetoworkspace, 8 +bind = $mainMod SHIFT, code:18, movetoworkspace, 9 +bind = $mainMod SHIFT, code:19, movetoworkspace, 10 + +# Example special workspace (scratchpad) +bind = $mainMod, S, togglespecialworkspace, magic +bind = $mainMod SHIFT, S, movetoworkspace, special:magic + +# Scroll through existing workspaces with mainMod + scroll +bind = $mainMod, mouse_down, workspace, e+1 +bind = $mainMod, mouse_up, workspace, e-1 + +# Move/resize windows with mainMod + LMB/RMB and dragging +bindm = $mainMod, mouse:272, movewindow +bindm = $mainMod, mouse:273, resizewindow + +# Laptop multimedia keys for volume and LCD brightness +bindel = ,XF86AudioRaiseVolume, exec, wpctl set-volume -l 1 @DEFAULT_AUDIO_SINK@ 5%+ +bindel = ,XF86AudioLowerVolume, exec, wpctl set-volume @DEFAULT_AUDIO_SINK@ 5%- +bindel = ,XF86AudioMute, exec, wpctl set-mute @DEFAULT_AUDIO_SINK@ toggle +bindel = ,XF86AudioMicMute, exec, wpctl set-mute @DEFAULT_AUDIO_SOURCE@ toggle +bindel = ,XF86MonBrightnessUp, exec, brightnessctl s 10%+ +bindel = ,XF86MonBrightnessDown, exec, brightnessctl s 10%- + +# Requires playerctl +bindl = , XF86AudioNext, exec, playerctl next +bindl = , XF86AudioPause, exec, playerctl play-pause +bindl = , XF86AudioPlay, exec, playerctl play-pause +bindl = , XF86AudioPrev, exec, playerctl previous + +############################## +### WINDOWS AND WORKSPACES ### +############################## + +# See https://wiki.hyprland.org/Configuring/Window-Rules/ for more +# See https://wiki.hyprland.org/Configuring/Workspace-Rules/ for workspace rules + +# Example windowrule +# windowrule = float,class:^(kitty)$,title:^(kitty)$ + +# Ignore maximize requests from apps. You'll probably like this. +windowrule = suppressevent maximize, class:.* + +# Fix some dragging issues with XWayland +windowrule = nofocus,class:^$,title:^$,xwayland:1,floating:1,fullscreen:0,pinned:0 + +# Nvidia config +env = LIBVA_DRIVER_NAME,nvidia +env = __GLX_VENDOR_LIBRARY_NAME,nvidia diff --git a/hypr/hyprpaper.conf b/hypr/hyprpaper.conf new file mode 100644 index 0000000..22a23b0 --- /dev/null +++ b/hypr/hyprpaper.conf @@ -0,0 +1,2 @@ +preload = /home/thomas/.config/awesome/Wallpapers/cobra-kai-1.png +wallpaper = , /home/thomas/.config/awesome/Wallpapers/cobra-kai-1.png diff --git a/hypr/waybar.jsonc b/hypr/waybar.jsonc new file mode 100644 index 0000000..f7fab79 --- /dev/null +++ b/hypr/waybar.jsonc @@ -0,0 +1,220 @@ +// -*- mode: jsonc -*- +{ + // "layer": "top", // Waybar at top layer + // "position": "bottom", // Waybar position (top|bottom|left|right) + "height": 30, // Waybar height (to be removed for auto height) + // "width": 1280, // Waybar width + "spacing": 4, // Gaps between modules (4px) + // Choose the order of the modules + "modules-left": [ + "sway/workspaces", + "sway/mode", + "sway/scratchpad", + "custom/media" + ], + "modules-center": [ + "sway/window" + ], + "modules-right": [ + "mpd", + "idle_inhibitor", + "pulseaudio", + "network", + "power-profiles-daemon", + "cpu", + "memory", + "temperature", + "backlight", + "keyboard-state", + "sway/language", + "battery", + "battery#bat2", + "clock", + "tray", + "custom/power" + ], + // Modules configuration + // "sway/workspaces": { + // "disable-scroll": true, + // "all-outputs": true, + // "warp-on-scroll": false, + // "format": "{name}: {icon}", + // "format-icons": { + // "1": "", + // "2": "", + // "3": "", + // "4": "", + // "5": "", + // "urgent": "", + // "focused": "", + // "default": "" + // } + // }, + "keyboard-state": { + "numlock": true, + "capslock": true, + "format": "{name} {icon}", + "format-icons": { + "locked": "", + "unlocked": "" + } + }, + "sway/mode": { + "format": "{}" + }, + "sway/scratchpad": { + "format": "{icon} {count}", + "show-empty": false, + "format-icons": ["", ""], + "tooltip": true, + "tooltip-format": "{app}: {title}" + }, + "mpd": { + "format": "{stateIcon} {consumeIcon}{randomIcon}{repeatIcon}{singleIcon}{artist} - {album} - {title} ({elapsedTime:%M:%S}/{totalTime:%M:%S}) ⸨{songPosition}|{queueLength}⸩ {volume}% ", + "format-disconnected": "Disconnected ", + "format-stopped": "{consumeIcon}{randomIcon}{repeatIcon}{singleIcon}Stopped ", + "unknown-tag": "N/A", + "interval": 5, + "consume-icons": { + "on": " " + }, + "random-icons": { + "off": " ", + "on": " " + }, + "repeat-icons": { + "on": " " + }, + "single-icons": { + "on": "1 " + }, + "state-icons": { + "paused": "", + "playing": "" + }, + "tooltip-format": "MPD (connected)", + "tooltip-format-disconnected": "MPD (disconnected)" + }, + "idle_inhibitor": { + "format": "{icon}", + "format-icons": { + "activated": "", + "deactivated": "" + } + }, + "tray": { + // "icon-size": 21, + "spacing": 10, + // "icons": { + // "blueman": "bluetooth", + // "TelegramDesktop": "$HOME/.local/share/icons/hicolor/16x16/apps/telegram.png" + // } + }, + "clock": { + // "timezone": "America/New_York", + "tooltip-format": "{:%Y %B}\n{calendar}", + "format-alt": "{:%Y-%m-%d}" + }, + "cpu": { + "format": "{usage}% ", + "tooltip": false + }, + "memory": { + "format": "{}% " + }, + "temperature": { + // "thermal-zone": 2, + // "hwmon-path": "/sys/class/hwmon/hwmon2/temp1_input", + "critical-threshold": 80, + // "format-critical": "{temperatureC}°C {icon}", + "format": "{temperatureC}°C {icon}", + "format-icons": ["", "", ""] + }, + "backlight": { + // "device": "acpi_video1", + "format": "{percent}% {icon}", + "format-icons": ["", "", "", "", "", "", "", "", ""] + }, + "battery": { + "states": { + // "good": 95, + "warning": 30, + "critical": 15 + }, + "format": "{capacity}% {icon}", + "format-full": "{capacity}% {icon}", + "format-charging": "{capacity}% ", + "format-plugged": "{capacity}% ", + "format-alt": "{time} {icon}", + // "format-good": "", // An empty format will hide the module + // "format-full": "", + "format-icons": ["", "", "", "", ""] + }, + "battery#bat2": { + "bat": "BAT2" + }, + "power-profiles-daemon": { + "format": "{icon}", + "tooltip-format": "Power profile: {profile}\nDriver: {driver}", + "tooltip": true, + "format-icons": { + "default": "", + "performance": "", + "balanced": "", + "power-saver": "" + } + }, + "network": { + // "interface": "wlp2*", // (Optional) To force the use of this interface + "format-wifi": "{essid} ({signalStrength}%) ", + "format-ethernet": "{ipaddr}/{cidr} ", + "tooltip-format": "{ifname} via {gwaddr} ", + "format-linked": "{ifname} (No IP) ", + "format-disconnected": "Disconnected ⚠", + "format-alt": "{ifname}: {ipaddr}/{cidr}" + }, + "pulseaudio": { + // "scroll-step": 1, // %, can be a float + "format": "{volume}% {icon} {format_source}", + "format-bluetooth": "{volume}% {icon} {format_source}", + "format-bluetooth-muted": " {icon} {format_source}", + "format-muted": " {format_source}", + "format-source": "{volume}% ", + "format-source-muted": "", + "format-icons": { + "headphone": "", + "hands-free": "", + "headset": "", + "phone": "", + "portable": "", + "car": "", + "default": ["", "", ""] + }, + "on-click": "pavucontrol" + }, + "custom/media": { + "format": "{icon} {text}", + "return-type": "json", + "max-length": 40, + "format-icons": { + "spotify": "", + "default": "🎜" + }, + "escape": true, + "exec": "$HOME/.config/waybar/mediaplayer.py 2> /dev/null" // Script in resources folder + // "exec": "$HOME/.config/waybar/mediaplayer.py --player spotify 2> /dev/null" // Filter player based on name + }, + "custom/power": { + "format" : "⏻ ", + "tooltip": false, + "menu": "on-click", + "menu-file": "$HOME/.config/waybar/power_menu.xml", // Menu file in resources folder + "menu-actions": { + "shutdown": "shutdown", + "reboot": "reboot", + "suspend": "systemctl suspend", + "hibernate": "systemctl hibernate" + } + } +} + diff --git a/waybar/config b/waybar/config new file mode 100644 index 0000000..44acc28 --- /dev/null +++ b/waybar/config @@ -0,0 +1,107 @@ +{ + "margin-top" : 0, + "margin-left": 0, + "margin-right": 0, + "height" : 10, + "modules-left": [ + ], + "modules-center": [ + "hyprland/workspaces", + ], + "modules-right": [ + "tray", + "battery", + "clock", + ], + "hyprland/window": { + "format": "{}", + "max-length": 35, + "rewrite": { + "": "Harsh" + }, + "separate-outputs": true, + }, + "hyprland/workspaces": { + "format": "{icon}", + "on-click": "activate", + "format-icons": { + "active": " ", + }, + "sort-by-number": true, + "persistent-workspaces": { + "*": 10, // 10 workspaces by default on every monitor + }, + }, + "clock": { + "format": "{:%d/%m/%Y %H:%M}", + "tooltip-format": "{:%Y %B}\n{calendar}", + "format-alt": "{}", + "interval": 1 + }, + "battery": { + "states": { + "warning": 30, + "critical": 15 + }, + "format": "{capacity}% {icon}", + "format-full": "{icon} {capacity}%", + "format-charging": " {capacity}%", + "format-plugged": " {capacity}%", + "format-alt": "{time} {icon}", + "format-icons": ["", "", "", "", ""] + }, + "pulseaudio#1": { + "format": "{volume}% {icon}", + "format-bluetooth": "{volume}% {icon} {format_source}", + "format-bluetooth-muted": " {icon} {format_source}", + "format-muted": "", + "format-icons": { + "headphone": "", + "hands-free": "", + "headset": "", + "phone": "", + "portable": "", + "car": "", + "default": ["", "", ""] + }, + "on-click-right": "pavucontrol", + "on-click": "wpctl set-mute @DEFAULT_AUDIO_SINK@ toggle", + "on-scroll-up": "wpctl set-volume @DEFAULT_AUDIO_SINK@ 5%+", + "on-scroll-down": "wpctl set-volume @DEFAULT_AUDIO_SINK@ 5%-" + }, + "pulseaudio#2": { + "format": "{format_source}", + "format-bluetooth": "{volume}% {icon}", + "format-muted": "{format_source}", + "format-source": "{volume}% ", + "format-source-muted": "", + "format-icons": { + "headphones": "", + "handsfree": "", + "headset": "", + "phone": "", + "portable": "", + "car": "", + "default": [ + "", + "", + "" + ] + }, + "on-click-right": "pavucontrol", + "on-click": "wpctl set-mute @DEFAULT_AUDIO_SOURCE@ toggle", + "on-scroll-up": "wpctl set-volume @DEFAULT_AUDIO_SOURCE@ 5%+", + "on-scroll-down": "wpctl set-volume @DEFAULT_AUDIO_SOURCE@ 5%-" + }, + "idle_inhibitor": { + "format": "{icon}", + "format-icons": { + "activated": "", + "deactivated": "" + } + }, + "tray": { + "icon-size": 15, + "spacing": 10 + } +} diff --git a/waybar/macchiato.css b/waybar/macchiato.css new file mode 100644 index 0000000..112ee32 --- /dev/null +++ b/waybar/macchiato.css @@ -0,0 +1,26 @@ +@define-color rosewater #f4dbd6; +@define-color flamingo #f0c6c6; +@define-color pink #f5bde6; +@define-color mauve #c6a0f6; +@define-color red #ed8796; +@define-color maroon #ee99a0; +@define-color peach #f5a97f; +@define-color yellow #eed49f; +@define-color green #a6da95; +@define-color teal #8bd5ca; +@define-color sky #91d7e3; +@define-color sapphire #7dc4e4; +@define-color blue #8aadf4; +@define-color lavender #b7bdf8; +@define-color text #cad3f5; +@define-color subtext1 #b8c0e0; +@define-color subtext0 #a5adcb; +@define-color overlay2 #939ab7; +@define-color overlay1 #8087a2; +@define-color overlay0 #6e738d; +@define-color surface2 #5b6078; +@define-color surface1 #494d64; +@define-color surface0 #363a4f; +@define-color base #24273a; +@define-color mantle #1e2030; +@define-color crust #181926; diff --git a/waybar/style.css b/waybar/style.css new file mode 100644 index 0000000..a3b1175 --- /dev/null +++ b/waybar/style.css @@ -0,0 +1,146 @@ +@import "macchiato.css"; + +window { + position: absolute; +} + +* { + font-family: "JetBrainsMono Nerd Font", Roboto, Helvetica, Arial, sans-serif; + font-size: 16px; +} + +window#waybar { + background-color: rgba(0, 0, 0, 0); + border-radius: 13px; + transition-property: background-color; + transition-duration: .5s; +} + +button { + /* Use box-shadow instead of border so the text isn't offset */ + box-shadow: inset 0 -3px transparent; + /* Avoid rounded borders under each button name */ + border: none; + border-radius: 0; +} + +/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ +button:hover { + background: inherit; + box-shadow: inset 0 -3px #ffffff; +} + +#workspaces button { + padding: 0 5px; + background-color: transparent; + color: #ffffff; +} + +#workspaces button.empty { + color: #777777; +} + +#workspaces button.active { + color: #ffffff; +} + +#workspaces button:hover { + background: rgba(0, 0, 0, 0.2); +} + +#workspaces button.focused { + background-color: @lavender; + box-shadow: inset 0 -3px #ffffff; +} + +#workspaces button.urgent { + background-color: #eb4d4b; +} + +#mode { + background-color: #64727D; + box-shadow: inset 0 -3px #ffffff; +} + +#clock, +#battery, +#cpu, +#memory, +#temperature, +#network, +#pulseaudio, +#idle_inhibitor { + padding: 0 10px; +} + +#pulseaudio { + color: @maroon; +} + +#network { + color: @yellow; +} + +#temperature { + color: @sky; +} + +#battery { + color: @green; +} + +#clock { + color: @flamingo; +} + +#window { + color: @rosewater; +} + +#idle_inhibitor { + color: @teal; +} + +.modules-right, +.modules-center { + background-color: @base; + border-radius: 15px; +} + +.modules-right { + padding: 0 10px; +} + +.modules-left { + padding: 0 20px; +} + +.modules-center { + padding: 0 10px; +} + +#battery.charging, +#battery.plugged { + color: @sapphire; +} + +@keyframes blink { + to { + color: #000000; + } +} + +/* Using steps() instead of linear as a timing function to limit cpu usage */ +#battery.critical:not(.charging) { + background-color: #f53c3c; + color: #ffffff; + animation-name: blink; + animation-duration: 0.5s; + animation-timing-function: steps(12); + animation-iteration-count: infinite; + animation-direction: alternate; +} + +label:focus { + background-color: #000000; +}