From 35b9990bcfd1b59c26965a43bb0ac1c7a4378142 Mon Sep 17 00:00:00 2001 From: "info@data-pro.nu" Date: Thu, 9 Apr 2026 13:23:31 +0200 Subject: [PATCH] Regenerated --- Droidnix/README.html | 701 +++++++++----------- Droidnix/README.org | 2 +- Droidnix/generated/.config/waybar/style.css | 165 +++++ 3 files changed, 494 insertions(+), 374 deletions(-) create mode 100644 Droidnix/generated/.config/waybar/style.css diff --git a/Droidnix/README.html b/Droidnix/README.html index bc39077ee..14a12e921 100644 --- a/Droidnix/README.html +++ b/Droidnix/README.html @@ -3,7 +3,7 @@ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - + Droidnix: A Dendritic NixOS + Home Manager Configuration NixOS Configuration Structure @@ -204,123 +204,119 @@

Table of Contents

-
-

Shortcuts

-
+
+

Shortcuts

+

Introduction The Assets Folder @@ -336,26 +332,26 @@

Introduction   intro

-
-

What is Droidnix

-
+
+

What is Droidnix

+

Droidnix is a modular, declarative NixOS + Home Manager configuration system. It allows users to choose between Hyprland and Mangowc as their window manager, with shared and WM-specific configurations managed via Emacs Org and Nix Flakes. The project is designed for reproducibility, maintainability, and cross-machine compatibility.

-
-

Installed components:

-
+
+

Installed components:

+
    -
  • Core
  • -
  • Hyprland
  • -
  • Mangowc
  • +
  • Core
  • +
  • Hyprland
  • +
  • Mangowc
-
-

Goals, project Structure, import hierarchy

-
+
+

Goals, project Structure, import hierarchy

+

This project uses a modular NixOS configuration with Hyprland and MangoWC support, designed for literate programming and cross-device reusability. The Droidnix repository is organized into two main parts: @@ -368,9 +364,9 @@ The Droidnix repository is organized into two main parts:

-
-

Root Level

-
+
+

Root Level

+
  • flake.nix is the entry point and imports:
      @@ -381,16 +377,16 @@ The Droidnix repository is organized into two main parts:
-
-

Generated Structure

-
+
+

Generated Structure

+

The generated/ directory contains all generated configurations, divided into three main groups: system, hyprland, and mangowc.

-
-

First Setup

-
+
+

First Setup

+
  1. Clone this repository.
  2. Run the setup script: ./setup_droid.
  3. @@ -420,9 +416,9 @@ The .assets/ folder contains all static files, such as configs, scr This section contains the Org blocks for tangling Nix code into the generated folders.

-
-

flake.nix

-
+
+

flake.nix

+

The Nix flake definition for Droidnix.

@@ -491,9 +487,9 @@ The Nix flake definition for Droidnix.
-
-

generated/hosts/traveldroid/host.nix

-
+
+

generated/hosts/traveldroid/host.nix

+
{ lib, config, pkgs, flakeRoot, import-tree, home-manager, ... }:
 
@@ -551,9 +547,9 @@ in
 
-
-

generated/hosts/traveldroid/hardware-configuration.nix

-
+
+

generated/hosts/traveldroid/hardware-configuration.nix

+
  1. Boot into NixOS Live ISO or your installed system.
  2. Open a terminal.
  3. @@ -611,9 +607,9 @@ in
-
-

generated/hosts/traveldroid/boot.nix

-
+
+

generated/hosts/traveldroid/boot.nix

+
{ config, pkgs, lib, flakeRoot, ... }:
 
@@ -660,17 +656,17 @@ in
 
-
-

Following are the imported modules

+
+

Following are the imported modules

-
-

generated/traveldroid/modules/apps

-
+
+

generated/traveldroid/modules/apps

+
-
-

generated/modules/traveldroid/apps/2_b_installed.nix

-
+
+

generated/modules/traveldroid/apps/2_b_installed.nix

+

This installs a list of apps

@@ -778,9 +774,9 @@ in {
-
-

generated/assets/2_b_installed.conf

-
+
+

generated/assets/2_b_installed.conf

+

This is a list of additional apps to install

@@ -833,9 +829,9 @@ com.todoist.Todoist
-
-

generated/modules/traveldroid/apps/flameshot.nix

-
+
+

generated/modules/traveldroid/apps/flameshot.nix

+

This is top file of this level which contains just an import statement for all relevant files and/or the subfolder in this folder

@@ -874,9 +870,9 @@ in
-
-

generated/modules/traveldroid/apps/kitty.nix

-
+
+

generated/modules/traveldroid/apps/kitty.nix

+

This file sets up Kitty terminal

@@ -934,9 +930,9 @@ in
-
-

generated/modules/traveldroid/apps/starship.nix

-
+
+

generated/modules/traveldroid/apps/starship.nix

+

This file sets up starship prompt

@@ -975,9 +971,9 @@ in
-
-

.config/starship.toml

-
+
+

.config/starship.toml

+

These are config files for .config

@@ -1266,9 +1262,9 @@ crust = "#181926"
-
-

generated/modules/traveldroid/apps/thunar.nix

-
+
+

generated/modules/traveldroid/apps/thunar.nix

+

This is top file of this level which contains just an import statement for all relevant files and/or the subfolder in this folder

@@ -1309,9 +1305,9 @@ in
-
-

generated/modules/traveldroid/apps/wofi.nix

-
+
+

generated/modules/traveldroid/apps/wofi.nix

+

This is the install for Wofi, the launcher

@@ -1344,9 +1340,9 @@ in
-
-

.config/wofi/config

-
+
+

.config/wofi/config

+

These are config files for .config/wofi

@@ -1393,9 +1389,9 @@ prompt = >
-
-

.config/wofi/style.css

-
+
+

.config/wofi/style.css

+

These are config files for .config/wofi

@@ -1475,9 +1471,9 @@ These are config files for .config/wofi
-
-

generated/modules/traveldroid/apps/zenbrowser.nix

-
+
+

generated/modules/traveldroid/apps/zenbrowser.nix

+

This installs zen browser

@@ -1497,9 +1493,9 @@ in
-
-

generated/modules/traveldroid/apps/zsh.nix

-
+
+

generated/modules/traveldroid/apps/zsh.nix

+

This sets up the zsh in the terminal

@@ -1562,9 +1558,9 @@ in
-
-

=generated/.config/zsh/.zshrc

-
+
+

=generated/.config/zsh/.zshrc

+

This sets up the zsh in the terminal

@@ -1585,9 +1581,9 @@ fi
-
-

generated/modules/traveldroid/apps/emacs/emacs.nix

-
+
+

generated/modules/traveldroid/apps/emacs/emacs.nix

+

This installs emacs

@@ -1683,9 +1679,9 @@ in
-
-

generated/.config/emacs/early-init.el

-
+
+

generated/.config/emacs/early-init.el

+

This contaions emacs

@@ -1786,9 +1782,9 @@ package-archive-priorities '(("gnu" . 99)
-
-

generated/.config/emacs/init.el

-
+
+

generated/.config/emacs/init.el

+

This contaions emacs

@@ -2199,13 +2195,13 @@ the top of the file."
-
-

generated/modules/traveldroid/desktop

-
+
+

generated/modules/traveldroid/desktop

+
-
-

generated/modules/traveldroid/desktop/fonts.nix

-
+
+

generated/modules/traveldroid/desktop/fonts.nix

+

This file installs and configures fonts

@@ -2223,9 +2219,9 @@ This file installs and configures fonts
-
-

generated/modules/traveldroid/desktop/gtk.nix

-
+
+

generated/modules/traveldroid/desktop/gtk.nix

+

Setting up GTK

@@ -2251,9 +2247,9 @@ in
-
-

generated/modules/traveldroid/desktop/hyprland.nix

-
+
+

generated/modules/traveldroid/desktop/hyprland.nix

+

Setting up Hyprland

@@ -2300,9 +2296,9 @@ in
-
-

.config/hypr/animations.conf

-
+
+

.config/hypr/animations.conf

+

These are config files for .config/hypr

@@ -2323,9 +2319,9 @@ animations {
-
-

.config/hypr/behaviour.conf

-
+
+

.config/hypr/behaviour.conf

+

These are config files for .config/hypr

@@ -2339,9 +2335,9 @@ These are config files for .config/hypr
-
-

.config/hypr/bindings.conf

-
+
+

.config/hypr/bindings.conf

+

These are config files for .config/hypr

@@ -2509,9 +2505,9 @@ bind = , workspace, exec, ~/.config/hypr/scripts/set-workspace-wallpaper.sh
-
-

.config/hypr/exec-once.conf

-
+
+

.config/hypr/exec-once.conf

+

These are config files for .config/hypr

@@ -2530,9 +2526,9 @@ exec-once = nextcloud --background
-
-

.config/hypr/hypridle.conf

-
+
+

.config/hypr/hypridle.conf

+

These are config files for .config/hypr

@@ -2557,9 +2553,9 @@ listener {
-
-

.config/hypr/hyprland.conf

-
+
+

.config/hypr/hyprland.conf

+

These are config files for .config/hypr

@@ -2605,9 +2601,9 @@ misc {
-
-

.config/hypr/hyprlock.conf

-
+
+

.config/hypr/hyprlock.conf

+

These are config files for .config/hypr

@@ -2648,9 +2644,9 @@ label {
-
-

.config/hypr/layer-rules.conf

-
+
+

.config/hypr/layer-rules.conf

+

These are config files for .config/hypr

@@ -2665,9 +2661,9 @@ layerrule = blur on, ignore_alpha 1, match:namespace swaync-notification-window
-
-

.config/hypr/layout.conf

-
+
+

.config/hypr/layout.conf

+

These are config files for .config/hypr

@@ -2677,9 +2673,9 @@ These are config files for .config/hypr
-
-

.config/hypr/monitor-rules.conf

-
+
+

.config/hypr/monitor-rules.conf

+

These are config files for .config/hypr

@@ -2690,9 +2686,9 @@ monitor=DP-1,3840x1080@144,1920x0,1
-
-

.config/hypr/scripts/layout-selector.sh

-
+
+

.config/hypr/scripts/layout-selector.sh

+

These are config files for .config/hypr/scripts

@@ -2735,9 +2731,9 @@ hyprctl dispatch oSD "Layout: $LAYOUT_NAME" 2000
-
-

.config/hypr/theming.css

-
+
+

.config/hypr/theming.css

+

These are config files for .config/hypr

@@ -2786,9 +2782,9 @@ decoration {
-
-

.config/hypr/window-rules.conf

-
+
+

.config/hypr/window-rules.conf

+

These are config files for .config/hypr

@@ -2826,9 +2822,9 @@ windowrule {
-
-

.config/hypr/workspace-rules.conf

-
+
+

.config/hypr/workspace-rules.conf

+

These are config files for .config/hypr

@@ -2854,9 +2850,9 @@ workspace = 10
-
-

generated/modules/traveldroid/desktop/wallpaper.nix

-
+
+

generated/modules/traveldroid/desktop/wallpaper.nix

+

Setting up wallpaper engine + wallpaper gui

@@ -2955,9 +2951,9 @@ in
-
-

generated/modules/traveldroid/desktop/stylix.nix

-
+
+

generated/modules/traveldroid/desktop/stylix.nix

+
{ lib, config, pkgs, flakeRoot, stylix, ... }:
 
@@ -3044,9 +3040,9 @@ in
 
-
-

.config/stylix/stylix.conf

-
+
+

.config/stylix/stylix.conf

+

These are config files for .config/stylix

@@ -3083,9 +3079,9 @@ icons = {
-
-

.config/stylix/palette.json

-
+
+

.config/stylix/palette.json

+

These are config files for .config/stylix

@@ -3115,9 +3111,9 @@ These are config files for .config/stylix
-
-

.config/stylix/palette.html

-
+
+

.config/stylix/palette.html

+

These are config files for .config/stylix

@@ -3195,9 +3191,9 @@ These are config files for .config/stylix
-
-

generated/modules/traveldroid/desktop/waybar.nix

-
+
+

generated/modules/traveldroid/desktop/waybar.nix

+

This file installs and configures waybar

@@ -3263,9 +3259,9 @@ in
-
-

.config/waybar/config

-
+
+

.config/waybar/config

+

These are config files for waybar

@@ -3473,25 +3469,17 @@ These are config files for waybar
-
-

.config/waybar/style.css

-
+
+

.config/waybar/style.css

+

This file contains all css for waybar -#+BEGINSRC css :tangle generated/.config/waybar/style.css :noweb yes :mkdirp yes :eval never -@import url("file:///home/henrov/.config/shared/colors.css");

+
+
@import url("file:///home/henrov/.config/shared/colors.css");
 
-

-* — Global — * -

-
-
-
-
-

{

-
-

+/* --- Global --- */ + * { font-family: Aporetic Sans Mono, Iosevka Nerd Font, @@ -3501,18 +3489,14 @@ This file contains all css for waybar sans-serif; font-size: 13px; } -

-

window#waybar { background-color: transparent; color: @text; } -

-

-* ----------------------------------------------------–— * -* MODULES CENTER BASE * +/* --------------------------------------------------------- */ +/* MODULES CENTER BASE */ .modules-center > widget { min-width: 80px; color: @text; @@ -3524,16 +3508,12 @@ window#waybar { border: 2px solid transparent; transition: all 0.2s ease; } -

-

.modules-center > box + box { margin-left: 5px; } -

-

-* — Group anchors default visible — * +/* --- Group anchors default visible --- */ #custom-hardware-anchor, #custom-connections-anchor { min-width: 80px; @@ -3542,10 +3522,8 @@ window#waybar { opacity: 1; transition: opacity 0.2s ease, min-width 0.2s ease, padding 0.2s ease; } -

-

-* — Hide anchors on hover of the group — * +/* --- Hide anchors on hover of the group --- */ #hardware:hover #custom-hardware-anchor, #connections:hover #custom-connections-anchor { opacity: 0; @@ -3553,17 +3531,13 @@ window#waybar { padding: 0; margin: 0; } -

-

#hardware:hover, #connections:hover { min-width: 80px; } -

-

-* MODULES * +/* MODULES */ .modules-left > widget, .modules-center > widget, .modules-right > widget { @@ -3576,17 +3550,13 @@ window#waybar { linear-gradient(45deg, @blue, @green) border-box; border: 2px solid transparent; } -

-

.modules-left > box + box, .modules-center > box + box, .modules-right > box + box { margin-left: 5px; } -

-

.modules-left > widget label, .modules-left > label , .modules-center > widget label, @@ -3596,11 +3566,9 @@ window#waybar { padding: 0px 5px; transition: padding 0.2s ease; } -

-

-* ----------------------------------------------------–— * -* SLIDERS / SPECIAL MODULES * +/* --------------------------------------------------------- */ +/* SLIDERS / SPECIAL MODULES */ #pulseaudio-slider { padding: 0; margin: 0; @@ -3626,57 +3594,43 @@ window#waybar { background: linear-gradient(45deg, @blue, @green); border: 2px solid transparent; } -

-

-* ----------------------------------------------------–— * -* STATES / SPECIALS * -#idleinhibitor.activated { +/* --------------------------------------------------------- */ +/* STATES / SPECIALS */ +#idle_inhibitor.activated { background: linear-gradient(45deg, @blue, @green); border: 2px solid transparent; color: @base; } -

-

#battery.charging { color: @green; } -

-

#battery.warning:not(.charging) { color: white; animation: blink 0.5s linear infinite alternate; } -

-

@keyframes blink { to { background-color: #ffffff; color: black; } } -

-

#network.disconnected { background-color: @red; } -

-

#temperature.critical { background-color: @red; } -

-

-* ----------------------------------------------------–— * -* GLOBAL MODULE SPACING * +/* --------------------------------------------------------- */ +/* GLOBAL MODULE SPACING */ #clock, -#idleinhibitor, +#idle_inhibitor, #battery, #cpu, #memory, @@ -3687,12 +3641,13 @@ window#waybar { margin: 0 5px; padding: 0 10px; } -#+ENDSRC -

+
-
-

.config/waybar/scripts/bluetooth-status.sh

-
+
+
+
+

.config/waybar/scripts/bluetooth-status.sh

+

These are config files for waybar

@@ -3718,9 +3673,9 @@ printf '{"text": "%s", "tooltip": "%s"}\n' "$icon" "$tooltip"
-
-

.config/waybar/scripts/hypr-workspaces.sh

-
+
+

.config/waybar/scripts/hypr-workspaces.sh

+

These are config files for waybar

@@ -3750,9 +3705,9 @@ jq -c -n \
-
-

.config/waybar/scripts/hypr-workspacesmenu.sh

-
+
+

.config/waybar/scripts/hypr-workspacesmenu.sh

+

These are config files for waybar

@@ -3769,9 +3724,9 @@ hyprctl dispatch focuswindow address:$addr
-
-

.config/waypaper/config.ini

-
+
+

.config/waypaper/config.ini

+

These are config files for waypaper

@@ -3808,9 +3763,9 @@ keybindings = ~/.config/waypaper/keybindings.ini
-
-

generated/modules/traveldroid/desktop/wayland.nix

-
+
+

generated/modules/traveldroid/desktop/wayland.nix

+
{ lib, config, pkgs, ... }:
 
@@ -3840,9 +3795,9 @@ keybindings = ~/.config/waypaper/keybindings.ini
 
-
-

generated/modules/traveldroid/desktop/xdg.nix

-
+
+

generated/modules/traveldroid/desktop/xdg.nix

+

This sets the XDG implementation

@@ -3896,13 +3851,13 @@ in
-
-

generated/modules/traveldroid/system

-
+
+

generated/modules/traveldroid/system

+
-
-

generated/modules/traveldroid/system/audio.nix

-
+
+

generated/modules/traveldroid/system/audio.nix

+
{ lib, config, pkgs, ... }:
 
@@ -3920,9 +3875,9 @@ in
 
-
-

generated/modules/traveldroid/system/base-colors.nix

-
+
+

generated/modules/traveldroid/system/base-colors.nix

+
{ config, pkgs, flakeRoot, ... }:
 let
@@ -3944,9 +3899,9 @@ in
 
-
-

generated/modules/traveldroid/system/bluetooth.nix

-
+
+

generated/modules/traveldroid/system/bluetooth.nix

+
{ lib, config, pkgs, home-manager, ... }:
 
@@ -3967,9 +3922,9 @@ in
 
-
-

generated/modules/traveldroid/system/dbus.nix

-
+
+

generated/modules/traveldroid/system/dbus.nix

+

This sets the dbus implementation

@@ -3996,9 +3951,9 @@ This sets the dbus implementation
-
-

generated/modules/traveldroid/system/gnome-keyring.nix

-
+
+

generated/modules/traveldroid/system/gnome-keyring.nix

+

This sets the dbus implementation

@@ -4046,9 +4001,9 @@ This sets the dbus implementation
-
-

generated/modules/traveldroid/system/login-tuigreet.nix

-
+
+

generated/modules/traveldroid/system/login-tuigreet.nix

+

This sets up tuigreeter which is not fancy but imo fits the aesthetic I am aiming for

@@ -4102,9 +4057,9 @@ in
-
-

generated/modules/traveldroid/system/networking.nix

-
+
+

generated/modules/traveldroid/system/networking.nix

+

This sets the networking.

@@ -4167,9 +4122,9 @@ This sets the networking.
-
-

generated/modules/traveldroid/system/nix.nix

-
+
+

generated/modules/traveldroid/system/nix.nix

+
{ lib, config, ... }:
 
@@ -4185,9 +4140,9 @@ This sets the networking.
 
-
-

generated/modules/traveldroid/system/printing.nix

-
+
+

generated/modules/traveldroid/system/printing.nix

+

This sets the dbus implementation

@@ -4212,13 +4167,13 @@ This sets the dbus implementation
-
-

generated/users

-
+
+

generated/users

+
-
-

generated/users/henrov.nix

-
+
+

generated/users/henrov.nix

+

This is the default user, just search and replace henrov another name if you want to change

@@ -4276,9 +4231,9 @@ in

These are all the prepared config files

-
-

.config/waypaper/config.ini

-
+
+

.config/waypaper/config.ini

+

These are config files for .config/waypaper

@@ -4315,9 +4270,9 @@ keybindings = ~/.config/waypaper/keybindings.ini
-
-

.config/zed/settings.json

-
+
+

.config/zed/settings.json

+

These are config files for .config/zed

@@ -4353,9 +4308,9 @@ These are config files for .config/zed
-
-

~/.config/shared/colors.css

-
+
+

~/.config/shared/colors.css

+

These are config files for .config/wofi

@@ -4399,7 +4354,7 @@ These are config files for .config/wofi

Author: Henro Veijer

-

Created: 2026-04-09 do 13:21

+

Created: 2026-04-09 do 13:23

Validate

diff --git a/Droidnix/README.org b/Droidnix/README.org index 82c0073e0..3fef88fee 100644 --- a/Droidnix/README.org +++ b/Droidnix/README.org @@ -2860,7 +2860,7 @@ This file contains all css for waybar @import url("file:///home/henrov/.config/shared/colors.css"); /* --- Global --- */ -* { + * { font-family: Aporetic Sans Mono, Iosevka Nerd Font, diff --git a/Droidnix/generated/.config/waybar/style.css b/Droidnix/generated/.config/waybar/style.css new file mode 100644 index 000000000..466446cdf --- /dev/null +++ b/Droidnix/generated/.config/waybar/style.css @@ -0,0 +1,165 @@ +@import url("file:///home/henrov/.config/shared/colors.css"); + +/* --- Global --- */ + * { + font-family: + Aporetic Sans Mono, + Iosevka Nerd Font, + Roboto, + Helvetica, + Arial, + sans-serif; + font-size: 13px; +} + +window#waybar { + background-color: transparent; + color: @text; +} + +/* --------------------------------------------------------- */ +/* MODULES CENTER BASE */ +.modules-center > widget { + min-width: 80px; + color: @text; + font-weight: bold; + border-radius: 30px; + background: + linear-gradient(@base-alpha, @base-alpha) padding-box, + linear-gradient(45deg, @blue, @green) border-box; + border: 2px solid transparent; + transition: all 0.2s ease; +} + +.modules-center > box + box { + margin-left: 5px; +} + +/* --- Group anchors default visible --- */ +#custom-hardware-anchor, +#custom-connections-anchor { + min-width: 80px; + padding: 0 5px; + margin: 0 2px; + opacity: 1; + transition: opacity 0.2s ease, min-width 0.2s ease, padding 0.2s ease; +} + +/* --- Hide anchors on hover of the group --- */ +#hardware:hover #custom-hardware-anchor, +#connections:hover #custom-connections-anchor { + opacity: 0; + min-width: 0; + padding: 0; + margin: 0; +} + +#hardware:hover, +#connections:hover { + min-width: 80px; +} + +/* MODULES */ +.modules-left > widget, +.modules-center > widget, +.modules-right > widget { + min-width: 80px; + color: @text; + font-weight: bold; + border-radius: 30px; + background: + linear-gradient(@base-alpha, @base-alpha) padding-box, + linear-gradient(45deg, @blue, @green) border-box; + border: 2px solid transparent; +} + +.modules-left > box + box, +.modules-center > box + box, +.modules-right > box + box { + margin-left: 5px; +} + +.modules-left > widget label, +.modules-left > label , +.modules-center > widget label, +.modules-center > label, +.modules-right > widget label, +.modules-right > label { + padding: 0px 5px; + transition: padding 0.2s ease; +} + +/* --------------------------------------------------------- */ +/* SLIDERS / SPECIAL MODULES */ +#pulseaudio-slider { + padding: 0; + margin: 0; +} +#pulseaudio-slider slider { + min-height: 0px; + min-width: 0px; + opacity: 0; + border-radius: 30px; + background: linear-gradient(45deg, @blue, @green); + border: none; + box-shadow: none; +} +#pulseaudio-slider trough { + min-height: 10px; + min-width: 80px; + border-radius: 30px; + background: transparent; +} +#pulseaudio-slider highlight { + min-width: 10px; + border-radius: 30px; + background: linear-gradient(45deg, @blue, @green); + border: 2px solid transparent; +} + +/* --------------------------------------------------------- */ +/* STATES / SPECIALS */ +#idle_inhibitor.activated { + background: linear-gradient(45deg, @blue, @green); + border: 2px solid transparent; + color: @base; +} + +#battery.charging { + color: @green; +} + +#battery.warning:not(.charging) { + color: white; + animation: blink 0.5s linear infinite alternate; +} + +@keyframes blink { + to { + background-color: #ffffff; + color: black; + } +} + +#network.disconnected { + background-color: @red; +} + +#temperature.critical { + background-color: @red; +} + +/* --------------------------------------------------------- */ +/* GLOBAL MODULE SPACING */ +#clock, +#idle_inhibitor, +#battery, +#cpu, +#memory, +#temperature, +#network, +#pulseaudio, +#tray { + margin: 0 5px; + padding: 0 10px; +}