More hyprland config / rearranging, adds some notes, adds gpg scdaemon.conf

ARCHNOTES.md

@@ -0,0 +1,19 @@
+# Arch Linux Notes
+
+## Web App (PWA)
+
+For the `webapp-install` script to work there needs to be a directory
+for the icons to be installed to. It can be done with the following command:
+
+```bash
+mkdir -p ~/.local/share/applications/icons
+```
+
+## Monitor Lid Events
+
+In order to monitor lid events, the user needs to be
+added to the `input` group.
+
+```bash
+sudo usermod -aG input $USER
+```

TODO.md

@@ -7,3 +7,8 @@
 - Update README to reflect ansible installation
 - Update ansible to do gpg installation.
 - Update ansible to include sketchybar.
+
+# Arch Todos
+
+- Separate scripts that are used for configurations / store them somewhere
+  aside from `~/.local/bin`

ghostty/config

@@ -2,6 +2,7 @@ theme = Catppuccin Mocha
 
 confirm-close-surface = false
 
+font-family = "Fira Code"
 font-size = 13
 font-thicken = false
 

gpg/scdaemon.conf

@@ -0,0 +1 @@
+disable-ccid

hypr/env.conf

@@ -18,6 +18,8 @@ env = ELECTRON_OZONE_PLATFORM_HINT,wayland
 env = OZONE_PLATFORM,wayland
 env = XDG_SESSION_TYPE,wayland
 
+env = GDK_SCALE=2
+
 # Allow better support for screen sharing (Google Meet, Discord, etc)
 env = XDG_CURRENT_DESKTOP,Hyprland
 env = XDG_SESSION_DESKTOP,Hyprland

hypr/hyprland.conf

@@ -6,6 +6,10 @@
 # Refer to the wiki for more information.
 # https://wiki.hyprland.org/Configuring/
 
+source = ~/.config/hypr/env.conf
+source = ~/.config/hypr/monitors.conf
+source = ~/.config/hypr/windows.conf
+source = ~/.config/hypr/keybinds.conf
 
 #################
 ### AUTOSTART ###
@@ -14,10 +18,10 @@
 # Autostart necessary processes (like notifications daemons, status bars, etc.)
 # Or execute your favorite apps at launch like this:
 
-exec-once = waybar & swaync & elephant & hyprpaper
+exec-once = hyprpaper
-
+exec-once = swaync
-source = ~/.config/hypr/windows.conf
+exec-once = elephant
-source = ~/.config/hypr/env.conf
+exec-once = waybar
 
 ###################
 ### PERMISSIONS ###
@@ -59,7 +63,7 @@ general {
     # Please see https://wiki.hyprland.org/Configuring/Tearing/ before you turn this on
     allow_tearing = false
 
-    layout = dwindle
+    layout = master
 }
 
 # https://wiki.hyprland.org/Configuring/Variables/#decoration
@@ -132,11 +136,14 @@ animations {
 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
+    force_split = 2 # always split to the right or bottom
 }
 
 # See https://wiki.hyprland.org/Configuring/Master-Layout/ for more
 master {
     new_status = master
+    mfact = 0.50 # Set master window to be 50%
+    orientation = right # set master to be on the right.
 }
 
 # https://wiki.hyprland.org/Configuring/Variables/#misc
@@ -182,7 +189,3 @@ device {
     name = epic-mouse-v1
     sensitivity = -0.5
 }
-
-source = ~/.config/hypr/windows.conf
-# Include the keybinds file.
-source = ~/.config/hypr/keybinds.conf

hypr/keybinds.conf

@@ -19,16 +19,6 @@ $fileBrowser = nautilus
 $menu = walker
 #$pwa = chromium --profile-directory=Default --enable-features=UseOzonePlatform --ozone-platform=wayland
 $pwa = ~/.local/bin/launch-webapp
-$launch = gtk-launch
-
-$btop = $terminal -e btop
-$config = $terminal -e ~/.local/share/scripts/tmux-sessionator ~/.config
-$email = $pwa "https://mail.proton.me" # proton mail
-$excalidraw = $pwa "https://draw.housh.dev"
-$gitea = $pwa "https://git.housh.dev"
-$neovim = $terminal -e nvim
-$protonPass = $pwa "https://pass.proton.me"
-$youtube = $pwa "https://youtube.com"
 
 # Example binds, see https://wiki.hyprland.org/Configuring/Binds/ for more
 
@@ -38,17 +28,17 @@ bind = $mainMod, Return, exec, $terminal
 bind = $mainMod, A, exec, $pwa "https://chatgpt.com"
 bind = $mainMod, B, exec, $browser
 bind = $mainMod SHIFT, B, exec, $browser --private-window
-bind = $mainMod, C, exec, $config
+bind = $mainMod, C, exec, $terminal -e ~/.local/share/scripts/tmux-sessionator ~/.config
-bind = $mainMod, D, exec, $excalidraw
 bind = $mainMod SHIFT, D, exec, ~/.local/bin/toggle-desktop
-bind = $mainMod, E, exec, $email
+bind = $mainMod, E, exec, $pwa "https://mail.proton.me"
+bind = $mainMod SHIFT, E, exec, uwsm app -- thunderbird
 bind = $mainMod, F, exec, $fileManager
-bind = $mainMod, K, exec, $launch Komodo
+#bind = $mainMod, K, exec, $launch Komodo
 bind = $mainMod SHIFT, F, exec, $fileBrowser
-bind = $mainMod, G, exec, $gitea
+bind = $mainMod, G, exec, $pwa "https://git.housh.dev"
-bind = $mainMod, N, exec, $neovim 
+bind = $mainMod, N, exec, $terminal -e nvim 
-bind = $mainMod, P, exec, $protonPass
+bind = $mainMod, P, exec, $pwa "https://pass.proton.me"
-bind = $mainMod, Y, exec, $youtube
+bind = $mainMod, Y, exec, $pwa "https://youtube.com"
 
 bind = $mainMod, W, killactive,
 # TODO:  change modifier key.
@@ -60,11 +50,13 @@ bind = $mainMod, V, togglefloating
 #bind = $mainMod, J, togglesplit, # dwindle
 #
 # Screenshots
-bind = $mainMod SHIFT ALT, 3, exec, hyprshot -m window -o ~/Pictures
 bind = $mainMod SHIFT ALT, 4, exec, hyprshot -m region -o ~/Pictures
+bind = $mainMod SHIFT ALT, 3, exec, hyprshot -m window -o ~/Pictures
 
-bind = CTRL, F, exec, hyprctl dispatch togglefloating \
+bind = CTRL, F, exec, ~/.local/bin/window-toggle-floating
-  && hyprctl dispatch centerwindow
+
+# hyprctl dispatch togglefloating \
+#   && hyprctl dispatch centerwindow
 
 # Move focus with mainMod + arrow keys
 bind = $mainMod, H, movefocus, l
@@ -77,6 +69,16 @@ bind = $mainMod SHIFT, L, movewindow, r
 bind = $mainMod SHIFT, K, movewindow, u
 bind = $mainMod SHIFT, J, movewindow, d
 
+# FIX: Changes size of window, this works a different depending on if
+# the window is on the right or left of the screen.
+#
+# Resize horizontally
+bind = $mainMod, EQUAL, resizeactive, 20 0
+bind = $mainMod, MINUS, resizeactive, -20 0
+# Resize vertically
+bind = $mainMod SHIFT, EQUAL, resizeactive, 0 20
+bind = $mainMod SHIFT, MINUS, resizeactive, 0 -20
+
 # Switch workspaces with mainMod + [0-9]
 bind = $mainMod, 1, workspace, 1
 bind = $mainMod, 2, workspace, 2

hypr/monitors.conf

@@ -4,6 +4,6 @@
 
 # See https://wiki.hyprland.org/Configuring/Monitors/
 monitor= ,preferred,auto,auto
-monitor = HDMI-A-1, 3440x1440@59.97, 0x0, 1
+monitor = HDMI-A-1, preferred, 0x0, 1.666667
 
 

hypr/windows.conf

@@ -13,8 +13,11 @@ windowrule = center,class:^(float)$,title:^(Install Web App)$
 # Ignore maximize requests from apps. You'll probably like this.
 windowrule = suppressevent maximize, class:.*
 
+
 # Just a dash of opacity by default.
 windowrule = opacity 0.97 0.92, class:.*
+# No opacity on youtube.
+windowrule = opacity 1.0, class:.*youtube.com.*
 
 # Fix some dragging issues with XWayland
 windowrule = nofocus,class:^$,title:^$,xwayland:1,floating:1,fullscreen:0,pinned:0

nvim/lazynvim/lua/plugins/lsp.lua

@@ -22,7 +22,6 @@ return {
         "dockerfile",
         "editorconfig",
         "ini",
-        "json",
         "jq",
         "latex",
         "make",
@@ -54,10 +53,10 @@ return {
                 library = vim.api.nvim_get_runtime_file("", true),
               },
               telemetry = {
-                enable = false
+                enable = false,
-              }
+              },
             },
-          }
+          },
         },
         marksman = {},
         sourcekit = {},
@@ -74,9 +73,9 @@ return {
         end,
         sourcekit = function(_, opts)
           opts.cmd = {
-            vim.trim(vim.fn.system("xcrun -f sourcekit-lsp")) or nil
+            vim.trim(vim.fn.system("xcrun -f sourcekit-lsp")) or nil,
           }
-        end
+        end,
       },
     },
   },

scripts/arch/lid.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+INTERNAL="eDP-1"           # or eDP-1, check with `hyprctl monitors`
+DEVICE="/dev/input/event0" # replace with your lid event device
+
+evtest --grab "$DEVICE" |
+  while read -r line; do
+    if echo "$line" | grep -q "SW_LID.*value 1"; then
+      hyprctl keyword monitor "$INTERNAL,disable"
+    elif echo "$line" | grep -q "SW_LID.*value 0"; then
+      hyprctl keyword monitor "$INTERNAL,preferred,auto,auto"
+    fi
+  done

scripts/arch/window-toggle-floating

@@ -0,0 +1,24 @@
+#!/bin/bash
+#
+# Float's a window, setting it's height and width and centering.
+
+# The percentage of the screen size for the floating window.
+WIDTH_PERCENT=80
+HEIGHT_PERCENT=80
+
+floating=$(hyprctl activewindow -j | jq '.floating')
+
+if [ "$floating" = "true" ]; then
+  hyprctl dispatch togglefloating
+else
+  monitor=$(hyprctl monitors -j | jq '.[] | select(.focused == true)')
+  mw=$(echo "$monitor" | jq '.width')
+  mh=$(echo "$monitor" | jq '.height')
+
+  neww=$((mw * $WIDTH_PERCENT / 100))
+  newh=$((mh * $HEIGHT_PERCENT / 100))
+
+  hyprctl dispatch togglefloating \
+    && hyprctl dispatch resizeactive exact $neww $newh \
+    && hyprctl dispatch centerwindow 
+fi

systemd/user/default.target.wants/hypr-lid.service

@@ -0,0 +1 @@
+/home/michael/.config/systemd/user/hypr-lid.service

systemd/user/hypr-lid.service

@@ -0,0 +1,11 @@
+[Unit]
+Description=Hyprland lid handler using evdev
+After=graphical.target
+
+[Service]
+ExecStart=%h/.local/bin/lid.sh
+Restart=always
+
+[Install]
+WantedBy=default.target
+

waybar/config.jsonc

@@ -0,0 +1,219 @@
+// -*- 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": "<span style=\"italic\">{}</span>"
+    },
+    "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": "<span color=\"#f53c3c\"></span> ",
+            "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": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
+        "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"
+		}
+    }
+}

waybar/style.css

@@ -0,0 +1,327 @@
+* {
+    /* `otf-font-awesome` is required to be installed for icons */
+    font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif;
+    font-size: 13px;
+}
+
+window#waybar {
+    background-color: rgba(43, 48, 59, 0.5);
+    border-bottom: 3px solid rgba(100, 114, 125, 0.5);
+    color: #ffffff;
+    transition-property: background-color;
+    transition-duration: .5s;
+}
+
+window#waybar.hidden {
+    opacity: 0.2;
+}
+
+/*
+window#waybar.empty {
+    background-color: transparent;
+}
+window#waybar.solo {
+    background-color: #FFFFFF;
+}
+*/
+
+window#waybar.termite {
+    background-color: #3F3F3F;
+}
+
+window#waybar.chromium {
+    background-color: #000000;
+    border: none;
+}
+
+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;
+}
+
+/* you can set a style on hover for any module like this */
+#pulseaudio:hover {
+    background-color: #a37800;
+}
+
+#workspaces button {
+    padding: 0 5px;
+    background-color: transparent;
+    color: #ffffff;
+}
+
+#workspaces button:hover {
+    background: rgba(0, 0, 0, 0.2);
+}
+
+#workspaces button.focused {
+    background-color: #64727D;
+    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,
+#disk,
+#temperature,
+#backlight,
+#network,
+#pulseaudio,
+#wireplumber,
+#custom-media,
+#tray,
+#mode,
+#idle_inhibitor,
+#scratchpad,
+#power-profiles-daemon,
+#mpd {
+    padding: 0 10px;
+    color: #ffffff;
+}
+
+#window,
+#workspaces {
+    margin: 0 4px;
+}
+
+/* If workspaces is the leftmost module, omit left margin */
+.modules-left > widget:first-child > #workspaces {
+    margin-left: 0;
+}
+
+/* If workspaces is the rightmost module, omit right margin */
+.modules-right > widget:last-child > #workspaces {
+    margin-right: 0;
+}
+
+#clock {
+    background-color: #64727D;
+}
+
+#battery {
+    background-color: #ffffff;
+    color: #000000;
+}
+
+#battery.charging, #battery.plugged {
+    color: #ffffff;
+    background-color: #26A65B;
+}
+
+@keyframes blink {
+    to {
+        background-color: #ffffff;
+        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;
+}
+
+#power-profiles-daemon {
+    padding-right: 15px;
+}
+
+#power-profiles-daemon.performance {
+    background-color: #f53c3c;
+    color: #ffffff;
+}
+
+#power-profiles-daemon.balanced {
+    background-color: #2980b9;
+    color: #ffffff;
+}
+
+#power-profiles-daemon.power-saver {
+    background-color: #2ecc71;
+    color: #000000;
+}
+
+label:focus {
+    background-color: #000000;
+}
+
+#cpu {
+    background-color: #2ecc71;
+    color: #000000;
+}
+
+#memory {
+    background-color: #9b59b6;
+}
+
+#disk {
+    background-color: #964B00;
+}
+
+#backlight {
+    background-color: #90b1b1;
+}
+
+#network {
+    background-color: #2980b9;
+}
+
+#network.disconnected {
+    background-color: #f53c3c;
+}
+
+#pulseaudio {
+    background-color: #f1c40f;
+    color: #000000;
+}
+
+#pulseaudio.muted {
+    background-color: #90b1b1;
+    color: #2a5c45;
+}
+
+#wireplumber {
+    background-color: #fff0f5;
+    color: #000000;
+}
+
+#wireplumber.muted {
+    background-color: #f53c3c;
+}
+
+#custom-media {
+    background-color: #66cc99;
+    color: #2a5c45;
+    min-width: 100px;
+}
+
+#custom-media.custom-spotify {
+    background-color: #66cc99;
+}
+
+#custom-media.custom-vlc {
+    background-color: #ffa000;
+}
+
+#temperature {
+    background-color: #f0932b;
+}
+
+#temperature.critical {
+    background-color: #eb4d4b;
+}
+
+#tray {
+    background-color: #2980b9;
+}
+
+#tray > .passive {
+    -gtk-icon-effect: dim;
+}
+
+#tray > .needs-attention {
+    -gtk-icon-effect: highlight;
+    background-color: #eb4d4b;
+}
+
+#idle_inhibitor {
+    background-color: #2d3436;
+}
+
+#idle_inhibitor.activated {
+    background-color: #ecf0f1;
+    color: #2d3436;
+}
+
+#mpd {
+    background-color: #66cc99;
+    color: #2a5c45;
+}
+
+#mpd.disconnected {
+    background-color: #f53c3c;
+}
+
+#mpd.stopped {
+    background-color: #90b1b1;
+}
+
+#mpd.paused {
+    background-color: #51a37a;
+}
+
+#language {
+    background: #00b093;
+    color: #740864;
+    padding: 0 5px;
+    margin: 0 5px;
+    min-width: 16px;
+}
+
+#keyboard-state {
+    background: #97e1ad;
+    color: #000000;
+    padding: 0 0px;
+    margin: 0 5px;
+    min-width: 16px;
+}
+
+#keyboard-state > label {
+    padding: 0 5px;
+}
+
+#keyboard-state > label.locked {
+    background: rgba(0, 0, 0, 0.2);
+}
+
+#scratchpad {
+    background: rgba(0, 0, 0, 0.2);
+}
+
+#scratchpad.empty {
+	background-color: transparent;
+}
+
+#privacy {
+    padding: 0;
+}
+
+#privacy-item {
+    padding: 0 5px;
+    color: white;
+}
+
+#privacy-item.screenshare {
+    background-color: #cf5700;
+}
+
+#privacy-item.audio-in {
+    background-color: #1ca000;
+}
+
+#privacy-item.audio-out {
+    background-color: #0069d4;
+}