/* Project Medusa – fünfter Oberflächenstil «Windows»: wie eine Anwendung unter Windows 11. Greift nur bei . Die Farben und Masse stammen aus den Themeressourcen von WinUI selbst (microsoft-ui-xaml, controls/dev/CommonStyles): TextFillColor…, ControlFillColor…, SolidBackgroundFillColor…, ControlCornerRadius 4 und OverlayCornerRadius 8. Fluent 2 heisst hier: eckiger als der Mac, Knöpfe mit hellem Grund und feinem Rand, der unten eine Spur dunkler ist, Akzentlinie unter dem tippenden Feld, Auswahl mit der Pille links, doppelter Fokusrahmen, Acryl für Menüs. Hell und dunkel über light-dark(). */ :root[data-stil="win"]{ /* Graustufen aus SolidBackgroundFillColor… und den Textdeckkräften (E4/9E/72 auf Weiss) */ --g25: light-dark(#ffffff, #2c2c2c); /* LayerFillColorAlt · SolidBackgroundFillColorQuarternary */ --g50: light-dark(#fbfbfb, #292929); /* ControlFillColorDefault verrechnet */ --g75: light-dark(#f3f3f3, #202020); /* SolidBackgroundFillColorBase – die Mica-Fläche */ --g100: light-dark(#f0f0f0, #2e2e2e); --g200: light-dark(#e4e4e4, #363636); /* DividerStrokeColorDefault verrechnet */ --g300: light-dark(#d6d6d6, #404040); /* ControlStrokeColorSecondary */ --g400: light-dark(#c4c4c4, #4a4a4a); --g500: light-dark(#a8a8a8, #5c5c5c); --g600: light-dark(#8a8a8a, #9a9a9a); /* TextFillColorTertiary */ --g700: light-dark(#5d5d5d, #c5c5c5); /* TextFillColorSecondary */ --g800: light-dark(#1b1b1b, #ffffff); /* TextFillColorPrimary */ --g900: light-dark(#000000, #ffffff); /* Akzent: das Standardblau von Windows 11. Hell nimmt WinUI SystemAccentColorDark1, dunkel SystemAccentColorLight2 – darum steht auf dem hellblauen Knopf schwarze Schrift. */ --akz: light-dark(#0067c0, #4cc2ff); --akz-hover: light-dark(#0078d4, #60cdff); --akz-auf: light-dark(#ffffff, #000000); /* TextOnAccentFillColorPrimary */ --akz-weich: light-dark(#e7f2fb, #10344a); --akz-tx: light-dark(#003e92, #99ebff); /* AccentTextFillColorPrimary */ --akz-linie: light-dark(#a3cdf0, #2c5f7d); --auswahl: light-dark(#0067c0, #4cc2ff); --gut: light-dark(#0f7b0f, #6ccb5f); /* SystemFillColorSuccess */ --gut-weich: light-dark(#dff6dd, #112f11); --warn: light-dark(#9d5d00, #fce100); /* SystemFillColorCaution */ --warn-weich: light-dark(#fff4ce, #352f00); --schlecht: light-dark(#c42b1c, #ff99a4); /* SystemFillColorCritical */ --schlecht-weich: light-dark(#fde7e9, #442726); /* Segoe UI Variable kommt vom System; anderswo die jeweilige Systemschrift */ --f-ui:"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",system-ui,-apple-system,sans-serif; --f-mono:"Cascadia Mono","Cascadia Code",Consolas,ui-monospace,monospace; --t-mini:12px; --t-klein:12px; --t-basis:14px; --t-gross:20px; --t-h2:28px; --a1:2px; --a2:6px; --a3:10px; --a4:14px; --a5:20px; --a6:28px; --a7:40px; --a8:56px; --a9:80px; /* ControlCornerRadius 4, OverlayCornerRadius 8 – beides aus CornerRadius_themeresources.xaml */ --r-klein:4px; --r:4px; --r-gross:8px; --r-pille:999px; --kopf-h:48px; --steuer-h:44px; --links-b:260px; --rechts-b:292px; --ui:14px; --h:32px; /* Doppelter Fokusrahmen: innen hell, aussen dunkel (FocusStrokeColorInner/Outer) */ --fokus-innen: light-dark(#ffffff, #000000); --fokus-aussen:light-dark(#1b1b1b, #ffffff); --ring:0 0 0 1px var(--fokus-innen), 0 0 0 3px var(--fokus-aussen); --ring-farbe:var(--fokus-aussen); --schwebe:0 8px 16px light-dark(rgba(0,0,0,.14), rgba(0,0,0,.52)), 0 0 0 1px light-dark(rgba(0,0,0,.06), rgba(0,0,0,.2)); --schatten-schwebe:var(--schwebe); --tempo:150ms; --kurve:cubic-bezier(0,0,0,1); /* Acryl für Menüs und schwebende Flächen; der Rand oben hell, unten dunkler wie in WinUI */ --acryl: light-dark(rgba(252,252,252,.85), rgba(44,44,44,.88)); --acryl-rand:light-dark(rgba(0,0,0,.06), rgba(255,255,255,.09)); --unschaerfe:saturate(130%) blur(40px); --kante:light-dark(rgba(0,0,0,.16), rgba(255,255,255,.08)); /* untere Kante der Kontrollen */ } :root[data-stil="win"] body{line-height:1.43;-webkit-font-smoothing:antialiased} :root[data-stil="win"] body.editor h1, :root[data-stil="win"] body.editor h2, :root[data-stil="win"] body.editor h3{font-weight:600;letter-spacing:0} :root[data-stil="win"] :focus-visible{outline:0;box-shadow:var(--ring)} :root[data-stil="win"] html{scrollbar-width:thin;scrollbar-color:var(--g500) transparent} /* ── Flächen: Mica trägt das Fenster, die Paletten liegen als heller Layer darauf ── */ :root[data-stil="win"] .kopf, :root[data-stil="win"] .steuerleiste{background:var(--g75);border-bottom:1px solid var(--g200)} :root[data-stil="win"] .dock{background:var(--g25)} :root[data-stil="win"] .dock--links{border-right:1px solid var(--g200)} :root[data-stil="win"] .dock--rechts{border-left:1px solid var(--g200)} :root[data-stil="win"] .flaeche{background:light-dark(#e6e6e6,#171717)} :root[data-stil="win"] .kopf__logo{height:32px;border-radius:var(--r-klein)} :root[data-stil="win"] .kopf__logo:hover, :root[data-stil="win"] .kopf__logo[aria-expanded="true"]{background:var(--g100)} :root[data-stil="win"] .menuleiste__knopf{height:28px;padding:0 10px;border-radius:var(--r-klein);font-size:14px} :root[data-stil="win"] .menuleiste__knopf:hover{background:var(--g100)} :root[data-stil="win"] .menuleiste__knopf[aria-expanded="true"]{background:var(--g200)} :root[data-stil="win"] .kopf__titel input{font-size:14px;font-weight:600!important;height:30px;border-radius:var(--r-klein)} /* Menüs und Popover: Acryl, Radius 8, Zeilen mit Rundung und Pille bei Auswahl */ :root[data-stil="win"] .menue, :root[data-stil="win"] .schwebe{background:var(--acryl);backdrop-filter:var(--unschaerfe); -webkit-backdrop-filter:var(--unschaerfe);border:1px solid var(--acryl-rand); border-radius:var(--r-gross);padding:4px;box-shadow:var(--schwebe)} :root[data-stil="win"] .menue__eintrag{min-height:32px;font-size:14px;border-radius:var(--r-klein);padding:0 11px} :root[data-stil="win"] .menue__eintrag:hover:not(:disabled), :root[data-stil="win"] .menue__eintrag:focus-visible{background:var(--g100);color:var(--tx);box-shadow:none} :root[data-stil="win"] .menue__taste{font-size:12px;color:var(--tx-3)} /* ── Knöpfe: heller Grund, feiner Rand, unten eine Spur dunkler ──────────────── */ :root[data-stil="win"] .knopf{height:var(--h);min-width:80px;padding:0 12px;font-size:14px;font-weight:400; border-radius:var(--r-klein);background:var(--akz);color:var(--akz-auf); border:1px solid transparent;box-shadow:inset 0 -1px 0 var(--kante)} :root[data-stil="win"] .knopf:hover{background:var(--akz-hover)} :root[data-stil="win"] .knopf:active{transform:none;filter:brightness(.94);box-shadow:none} :root[data-stil="win"] .knopf--stumm{background:var(--g50);color:var(--g800);border-color:var(--g300)} :root[data-stil="win"] .knopf--stumm:hover{background:var(--g100)} :root[data-stil="win"] .knopf--stumm[aria-pressed="true"]{background:var(--akz);color:var(--akz-auf);border-color:transparent} :root[data-stil="win"] .knopf--gefahr{background:var(--schlecht);color:#fff} :root[data-stil="win"] .knopf:disabled{background:var(--g100);color:var(--g500);border-color:var(--g200);box-shadow:none} :root[data-stil="win"] .knopf--klein, :root[data-stil="win"] .kopfknopf, :root[data-stil="win"] .pruefknopf{height:30px;border-radius:var(--r-klein);font-size:14px} :root[data-stil="win"] .kopfknopf:hover{background:var(--g100)} :root[data-stil="win"] .symknopf{border-radius:var(--r-klein)} :root[data-stil="win"] .symknopf:hover{background:var(--g100)} :root[data-stil="win"] .symknopf[aria-pressed="true"]{background:var(--akz);color:var(--akz-auf)} /* ── Felder: heller Grund, beim Tippen weiss mit Akzentlinie unten ───────────── */ :root[data-stil="win"] .zahl, :root[data-stil="win"] .textfeld, :root[data-stil="win"] .auswahlfeld, :root[data-stil="win"] .farbwahl{background-color:var(--g50)!important;border:1px solid var(--g300)!important; border-bottom-color:var(--kante)!important;border-radius:var(--r-klein)!important; font-size:14px!important;box-shadow:none!important} :root[data-stil="win"] .zahl:hover, :root[data-stil="win"] .textfeld:hover, :root[data-stil="win"] .auswahlfeld:hover, :root[data-stil="win"] .farbwahl:hover{background-color:var(--g100)!important} :root[data-stil="win"] .zahl:focus-within, :root[data-stil="win"] .textfeld:focus, :root[data-stil="win"] .auswahlfeld:focus{background-color:light-dark(#fff,#1f1f1f)!important; border-bottom-width:2px!important;border-bottom-color:var(--akz)!important;box-shadow:none!important} :root[data-stil="win"] .zahl__label{font-size:12px;color:var(--tx-3);padding-left:8px} :root[data-stil="win"] .zahl__einheit{padding-right:8px;font-size:12px} :root[data-stil="win"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=image]):not([type=submit]):not([type=button]):not([type=reset]), :root[data-stil="win"] textarea{height:var(--h);font-size:14px;background:var(--g50); border:1px solid var(--g300);border-bottom-color:var(--kante);border-radius:var(--r-klein);padding:0 11px} :root[data-stil="win"] textarea{height:auto;padding:6px 11px} :root[data-stil="win"] input:focus, :root[data-stil="win"] textarea:focus{background:light-dark(#fff,#1f1f1f); border-bottom-width:2px;border-bottom-color:var(--akz);box-shadow:none} :root[data-stil="win"] select{height:var(--h);font-size:14px;border:1px solid var(--g300); border-bottom-color:var(--kante);border-radius:var(--r-klein);background-color:var(--g50);padding:0 30px 0 11px; background-image:url('data:image/svg+xml;utf8,'); background-position:right 10px center;background-size:12px 8px;background-repeat:no-repeat} :root[data-stil="win"] select:hover{background-color:var(--g100)} :root[data-stil="win"] input[type=checkbox]{accent-color:var(--akz);width:20px;height:20px;border-radius:var(--r-klein)} :root[data-stil="win"] input[type=radio]{accent-color:var(--akz);width:20px;height:20px} /* Regler: runder Griff mit Ring, Spur in der Akzentfarbe */ :root[data-stil="win"] input[type=range]{height:20px; background:linear-gradient(to right,var(--akz) 0 var(--pct,50%),var(--g400) var(--pct,50%) 100%) 0 8px/100% 4px no-repeat} :root[data-stil="win"] input[type=range]::-webkit-slider-thumb{width:20px;height:20px;border-radius:50%; background:var(--akz);border:4px solid light-dark(#fff,#2c2c2c);box-shadow:0 0 0 1px var(--g400)} :root[data-stil="win"] input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%; background:var(--akz);border:4px solid light-dark(#fff,#2c2c2c);box-shadow:0 0 0 1px var(--g400)} /* ── Paletten, Listen, Reiter: Auswahl mit der Pille links ───────────────────── */ :root[data-stil="win"] .abschnittfeld{padding:var(--a3) var(--a3) var(--a4);border-bottom:1px solid var(--g200)} :root[data-stil="win"] .abschnittfeld__kopf h3{font-size:14px;font-weight:600;color:var(--tx)} :root[data-stil="win"] .listenkopf h3{font-size:14px;font-weight:600} :root[data-stil="win"] .feldlabel, :root[data-stil="win"] .steuerlabel{font-size:12px;color:var(--tx-2)} :root[data-stil="win"] .leistenreiter{height:40px;gap:4px;padding:0 8px;border-bottom:1px solid var(--g200)} :root[data-stil="win"] .leistenreiter button{font-size:14px;padding:0 10px;color:var(--tx-2);border-radius:var(--r-klein)} :root[data-stil="win"] .leistenreiter button[aria-selected="true"]{color:var(--tx);font-weight:600} :root[data-stil="win"] .leistenreiter button[aria-selected="true"]::after{left:50%;right:auto;transform:translateX(-50%); width:16px;height:3px;border-radius:2px;background:var(--akz);bottom:2px} :root[data-stil="win"] .eintrag, :root[data-stil="win"] .format, :root[data-stil="win"] .objekt, :root[data-stil="win"] .farbliste button{font-size:14px;border-radius:var(--r-klein);position:relative} :root[data-stil="win"] .eintrag[aria-current="true"], :root[data-stil="win"] .objekt[aria-selected="true"], :root[data-stil="win"] .format[aria-pressed="true"]{background:var(--g100);color:var(--tx)} :root[data-stil="win"] .eintrag[aria-current="true"]::before, :root[data-stil="win"] .objekt[aria-selected="true"]::before, :root[data-stil="win"] .format[aria-pressed="true"]::before{content:"";position:absolute;left:1px;top:50%; width:3px;height:16px;margin-top:-8px;border-radius:2px;background:var(--akz)} :root[data-stil="win"] .segmentleiste{background:transparent;border:0;border-radius:var(--r-klein);padding:0;gap:4px} :root[data-stil="win"] .segmentleiste button{height:30px;border-radius:var(--r-klein);font-size:14px; background:var(--g50);border:1px solid var(--g300);color:var(--tx)} :root[data-stil="win"] .segmentleiste button[aria-pressed="true"], :root[data-stil="win"] .segmentleiste button[aria-selected="true"]{background:var(--akz);color:var(--akz-auf);border-color:transparent} :root[data-stil="win"] .einstellungen__reiter button{font-size:14px;border-radius:var(--r-klein);padding:7px 11px;position:relative} :root[data-stil="win"] .einstellungen__reiter button[aria-selected="true"]{background:var(--g100);font-weight:600} :root[data-stil="win"] .einstellungen__reiter button[aria-selected="true"]::before{content:"";position:absolute;left:0;top:50%; width:3px;height:16px;margin-top:-8px;border-radius:2px;background:var(--akz)} /* ── Werkzeugleiste, schwebende Paletten, Dialoge ────────────────────────────── */ :root[data-stil="win"] .werkzeugleiste-schwebend{padding:4px;border:1px solid var(--acryl-rand);border-radius:var(--r-gross); background:var(--acryl);backdrop-filter:var(--unschaerfe);-webkit-backdrop-filter:var(--unschaerfe);box-shadow:var(--schwebe)} :root[data-stil="win"] .werkzeugleiste-schwebend[data-seite="links"]{border-radius:0;box-shadow:none;border-width:0 1px 0 0} :root[data-stil="win"] .wz{width:32px;height:32px;border-radius:var(--r-klein);color:var(--tx-2)} :root[data-stil="win"] .wz:hover{background:var(--g100);color:var(--tx)} :root[data-stil="win"] .wz[aria-pressed="true"]{background:var(--akz);color:var(--akz-auf);box-shadow:none} :root[data-stil="win"] .palette--schwebend{border:1px solid var(--acryl-rand);border-radius:var(--r-gross); background:var(--acryl);backdrop-filter:var(--unschaerfe);-webkit-backdrop-filter:var(--unschaerfe);box-shadow:var(--schwebe)} /* Dialog: Radius 8, Fuss als eigene Leiste – wie ein ContentDialog */ :root[data-stil="win"] dialog.fenster{border:1px solid var(--acryl-rand);border-radius:var(--r-gross); background:var(--g25);box-shadow:0 32px 64px rgba(0,0,0,.28)} :root[data-stil="win"] dialog.fenster::backdrop{background:rgba(0,0,0,.3)} :root[data-stil="win"] .fenster__kopf{padding:16px 24px 0} :root[data-stil="win"] .fenster__titel{font-size:20px;font-weight:600} :root[data-stil="win"] .fenster__koerper{padding:12px 24px;font-size:14px} :root[data-stil="win"] .fenster__fuss{padding:20px 24px;gap:8px;margin-top:8px; background:var(--g75);border-top:1px solid var(--g200);border-radius:0 0 var(--r-gross) var(--r-gross)} :root[data-stil="win"] .fenster__fuss .knopf{flex:1 1 0;min-width:0} :root[data-stil="win"] .schliessen{width:32px;height:32px;border-radius:var(--r-klein);font-size:16px} :root[data-stil="win"] .meldung{background:var(--g25);color:var(--tx);border:1px solid var(--g200); border-radius:var(--r-gross);box-shadow:var(--schwebe)} :root[data-stil="win"] .meldung .klein, :root[data-stil="win"] .meldung .leise{color:var(--tx-2)} /* Weniger Transparenz: Acryl wird deckend, wie es die Windows-Einstellung «Transparenzeffekte» tut */ @media (prefers-reduced-transparency: reduce){ :root[data-stil="win"]{--acryl:var(--g25); --unschaerfe:none} }