Per-skärm-inställningar med skärmväljare, kant-i-kant-marginaler

- outputs{} är nu generiska JSON-överridar: vilket configfält som helst
  kan sättas per skärm och deep-mergas över den globala configen
  (Config::for_output). Docka, autohide, dodge, beteende, hotspots och
  CSS (scopat på window.o-<connector>) läser skärmens effektiva config.
- Settings har skärmväljare överst: klickbar förhandsgranskning av
  skärmarna + deras barer, 'Alla skärmar' (standard) eller enskild
  skärm. Bara ändrade fält sparas som override (json-diff);
  återställ-knapp tar bort skärmens överridar. * = har egna.
- Marginaler: skuggutrymmet läggs inte längre på förankrade sidor så
  0 = kant i kant; minusvärden tillåts (A ner till -64, B/C -256).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/style.rs

@@ -1,12 +1,22 @@
 // Config → CSS. All theming (färger, transparens, skuggor, accent,
 // storlekar, animationer) genereras här och laddas i en CssProvider som
-// byts ut vid live-omladdning.
+// byts ut vid live-omladdning. Skärmar med per-skärm-överridar får egna
+// CSS-block scopade på dockfönstrets output-klass (o-<connector>).
 
 use gtk4 as gtk;
 use gtk4::gdk;
 
 use crate::config::{Config, IndicatorStyle};
 
+/// CSS-klass för en viss skärms dockfönster.
+pub fn output_class(connector: &str) -> String {
+    let safe: String = connector
+        .chars()
+        .map(|c| if c.is_ascii_alphanumeric() { c } else { '-' })
+        .collect();
+    format!("o-{safe}")
+}
+
 /// "#rrggbb" + alpha → "rgba(r, g, b, a)". Trasig färg → grå.
 fn rgba(hex: &str, alpha: f64) -> String {
     let h = hex.trim_start_matches('#');
@@ -22,7 +32,9 @@ fn rgba(hex: &str, alpha: f64) -> String {
     format!("rgba({r}, {g}, {b}, {alpha:.3})")
 }
 
-pub fn build_css(cfg: &Config) -> String {
+/// De utseende-styrda reglerna, med valfritt selektor-prefix
+/// ("" globalt, "window.o-DP-1 " för en enskild skärm).
+fn css_body(cfg: &Config, p: &str) -> String {
     let a = &cfg.appearance;
     let bg = rgba(&a.background, a.opacity);
     let border = rgba(&a.border.color, a.border.opacity);
@@ -52,18 +64,7 @@ pub fn build_css(cfg: &Config) -> String {
 
     format!(
         r#"
-window.waydock,
-window.waydock-sensor,
-window.waydock-hotspot {{
-    background: transparent;
-}}
-
-window.waydock-sensor box,
-window.waydock-hotspot box {{
-    background-color: rgba(0, 0, 0, 0.004);
-}}
-
-.dock-panel {{
+{p}.dock-panel {{
     background-color: {bg};
     border-radius: {radius}px;
     border: {bwidth}px solid {border};
@@ -71,7 +72,7 @@ window.waydock-hotspot box {{
     {shadow}
 }}
 
-.dock-item {{
+{p}.dock-item {{
     background: transparent;
     border: none;
     border-radius: {item_radius}px;
@@ -82,33 +83,28 @@ window.waydock-hotspot box {{
     {transition}
 }}
 
-.dock-item:hover {{
+{p}.dock-item:hover {{
     background-color: {accent_soft};
 }}
 
-.dock-item:hover image {{
+{p}.dock-item:hover image {{
     {hover_zoom}
 }}
 
-.dock-item image {{
+{p}.dock-item image {{
     {transition}
 }}
 
-.dock-item.urgent {{
+{p}.dock-item.urgent {{
     background-color: {accent_soft};
     animation: waydock-pulse 900ms ease-in-out infinite alternate;
 }}
 
-@keyframes waydock-pulse {{
-    from {{ background-color: transparent; }}
-    to   {{ background-color: {accent_soft}; }}
-}}
-
-.indicator-box {{
+{p}.indicator-box {{
     min-height: {ind_h}px;
 }}
 
-.indicator {{
+{p}.indicator {{
     background-color: {accent};
     border-radius: {ind_radius}px;
     min-width: {ind_w}px;
@@ -116,11 +112,11 @@ window.waydock-hotspot box {{
     margin: 0 1px;
 }}
 
-.indicator.inactive {{
+{p}.indicator.inactive {{
     background-color: {accent_dim};
 }}
 
-.group-badge {{
+{p}.group-badge {{
     background-color: {accent};
     color: #ffffff;
     border-radius: 8px;
@@ -131,24 +127,25 @@ window.waydock-hotspot box {{
     padding: 0 2px;
 }}
 
-popover.waydock-menu contents {{
+{p}popover.waydock-menu contents {{
     background-color: {menu_bg};
     border-radius: 10px;
     border: 1px solid {border};
 }}
 
-popover.waydock-menu modelbutton,
-popover.waydock-menu button.flat {{
+{p}popover.waydock-menu modelbutton,
+{p}popover.waydock-menu button.flat {{
     color: #eeeeee;
     border-radius: 6px;
     padding: 6px 10px;
 }}
 
-popover.waydock-menu modelbutton:hover,
-popover.waydock-menu button.flat:hover {{
+{p}popover.waydock-menu modelbutton:hover,
+{p}popover.waydock-menu button.flat:hover {{
     background-color: {accent_soft};
 }}
 "#,
+        p = p,
         bg = bg,
         radius = a.corner_radius,
         bwidth = a.border.width,
@@ -170,6 +167,35 @@ popover.waydock-menu button.flat:hover {{
     )
 }
 
+pub fn build_css(cfg: &Config) -> String {
+    let mut css = String::from(
+        r#"
+window.waydock,
+window.waydock-sensor,
+window.waydock-hotspot {
+    background: transparent;
+}
+
+window.waydock-sensor box,
+window.waydock-hotspot box {
+    background-color: rgba(0, 0, 0, 0.004);
+}
+
+/* utan "to" animeras tillbaka till regelns egen bakgrund (accenten) */
+@keyframes waydock-pulse {
+    from { background-color: transparent; }
+}
+"#,
+    );
+    css += &css_body(cfg, "");
+    // skärmar med överridar får egna, mer specifika block
+    for name in cfg.outputs.keys() {
+        let eff = cfg.for_output(name);
+        css += &css_body(&eff, &format!("window.{} ", output_class(name)));
+    }
+    css
+}
+
 /// Ladda (eller byt ut) den globala CSS-providern.
 pub fn apply(cfg: &Config, previous: Option<&gtk::CssProvider>) -> gtk::CssProvider {
     let display = gdk::Display::default().expect("ingen display");