/* ========================================================================== LiveHub Skins Jede Regel in dieser Datei haengt an html[data-skin]. Der Standard-Skin setzt dieses Attribut nicht, deshalb greift hier nichts und das gewohnte LiveHub-Design bleibt Pixel fuer Pixel unveraendert. app.css wird nicht angefasst. Ein Skin malt nur: Farben, Flaechen, Verlaeufe, Rahmenfarben, Schatten, Schrift. Groessen, Abstaende, Grid- und Flex-Regeln bleiben, wo sie sind - sonst waere das muehsam vermessene Responsive-Verhalten dahin. Wo ein Rahmen massiv wirken soll, uebernimmt das ein inset-Schatten statt einer breiteren border: der kostet keinen Platz und verschiebt nichts. Aufbau: 1. Token-Saetze je Skin (nur Variablen) 2. Gemeinsame Komponentenschicht (liest die Tokens) 3. Skin-eigenes Chrome (Fensterrahmen, Ornamente, Glas) ========================================================================== */ /* ========================================================================== 1. TOKEN-SAETZE ========================================================================== */ /* -------------------------------------------------------------------------- Standard: dieselbe Handschrift wie bisher, aber sauber durchgezeichnet. Flaechen bekommen einen Verlauf und eine Lichtkante statt einer flachen Fuellung, Knoepfe eine Woelbung, der Hintergrund ein feines Rauschen gegen die Streifen in den grossen Verlaeufen. -------------------------------------------------------------------------- */ html[data-skin="standard"]{ color-scheme:dark; --sk-font:Inter,system-ui,-apple-system,'Segoe UI',sans-serif; --sk-font-head:Inter,system-ui,sans-serif; --sk-font-ui:Inter,system-ui,sans-serif; --sk-head-transform:none; --sk-head-letter:normal; --sk-head-weight:850; --sk-bg:#040912; --sk-bg-img: url(/assets/skins/standard/noise.svg), radial-gradient(120% 70% at 50% -12%,rgba(38,110,190,.34),transparent 58%), radial-gradient(90% 60% at 92% 4%,rgba(140,86,255,.16),transparent 62%), linear-gradient(180deg,#071223,#040912 62%,#02060d); --sk-panel:#081527; --sk-panel-img:linear-gradient(180deg,rgba(16,33,55,.94),rgba(6,16,29,.96)); --sk-panel-2:rgba(4,11,21,.72); --sk-panel-3:rgba(40,86,140,.22); --sk-shell-img:linear-gradient(180deg,rgba(8,18,32,.6),rgba(3,8,16,.72)); --sk-line:rgba(103,181,255,.24); --sk-line-strong:rgba(169,112,255,.72); --sk-radius:14px; --sk-radius-sm:9px; --sk-shadow:0 18px 46px rgba(0,0,0,.5); --sk-shadow-in:inset 0 1px 0 rgba(160,205,255,.14); --sk-text:#e9f1fb; --sk-text-dim:#8ba4bd; --sk-text-strong:#ffffff; --sk-link:#79c6ff; --sk-accent:#a970ff; --sk-accent-img:linear-gradient(180deg,#c39bff,#a970ff 52%,#8b4df2); --sk-accent-text:#0d0720; --sk-btn-img:linear-gradient(180deg,#c39bff,#a970ff 54%,#8f52f5); --sk-btn-hover-img:linear-gradient(180deg,#d1b0ff,#b581ff 54%,#9a63ff); --sk-btn-active-img:linear-gradient(180deg,#8f52f5,#a970ff 60%,#b98cff); --sk-btn-line:rgba(198,166,255,.5); --sk-btn-hover-line:rgba(214,190,255,.75); --sk-btn-text:#0d0720; --sk-btn-radius:10px; --sk-btn-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 2px 10px rgba(120,60,220,.32); --sk-tab-img:linear-gradient(180deg,rgba(18,42,70,.95),rgba(8,22,40,.96)); --sk-tab-hover-img:linear-gradient(180deg,rgba(26,58,94,.96),rgba(12,30,52,.97)); --sk-tab-line:rgba(78,140,205,.45); --sk-tab-hover-line:rgba(140,190,255,.6); --sk-tab-text:#e7f1fd; --sk-tab-shadow:inset 0 1px 0 rgba(160,205,255,.16); --sk-tab-hover-shadow:inset 0 1px 0 rgba(160,205,255,.24),0 3px 12px rgba(0,0,0,.36); --sk-btn-hover-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 16px rgba(140,80,240,.44); --sk-input-bg:rgba(4,13,24,.92); --sk-input-line:rgba(70,130,190,.5); --sk-input-text:#eef5ff; --sk-input-radius:9px; --sk-input-shadow:inset 0 2px 6px rgba(0,0,0,.45); --sk-focus:0 0 0 3px rgba(169,112,255,.28); --sk-scroll-thumb:rgba(90,140,200,.55); --sk-scroll-track:rgba(6,16,29,.7); --sk-blur:none; --sk-glass:linear-gradient(180deg,rgba(20,42,68,.9),rgba(9,21,37,.92)); --sk-band:linear-gradient(180deg,rgba(18,38,62,.92),rgba(8,19,33,.94)); --sk-list-bg:linear-gradient(180deg,rgba(5,13,24,.7),rgba(3,9,17,.78)); --sk-title-img:linear-gradient(180deg,rgba(22,46,76,.94),rgba(9,20,35,.96)); --sk-title-text:#eaf3ff; --sk-corner:linear-gradient(transparent,transparent); --sk-noise:url(/assets/skins/standard/noise.svg); --sk-notice-bg:linear-gradient(180deg,rgba(20,42,68,.96),rgba(10,24,40,.97)); --sk-ring:0 0 0 0 transparent; --sk-frame:none; --sk-parchment:linear-gradient(180deg,#1a2c44,#0e1c2e); --sk-parchment-text:#dceaf8; } /* Ein weicher Lichtbogen ueber dem Kopfbereich, wie eine Lampe ueber dem Fenster. Er liegt im Hintergrund und faengt nichts ab. */ html[data-skin="standard"] .shell{ background: url(/assets/skins/standard/sheen.svg) top center/100% 220px no-repeat, var(--sk-shell-img); } html[data-skin="standard"] .shell>header{ background:var(--sk-title-img); border-color:var(--sk-line); box-shadow:inset 0 1px 0 rgba(160,205,255,.18),0 10px 30px rgba(0,0,0,.4); } /* Die Lichtkante sitzt als Kantenbild oben auf den grossen Flaechen. */ html[data-skin="standard"] .card, html[data-skin="standard"] .panel, html[data-skin="standard"] .chat-stage, html[data-skin="standard"] .player-panel, html[data-skin="standard"] .channelbar, html[data-skin="standard"] .pro-card, html[data-skin="standard"] .mobile-options-card{ border-image:url(/assets/skins/standard/edge.svg) 1 0 0 0 / 1px 0 0 0 / 0 stretch; } html[data-skin="standard"] .tab.active{ background:var(--sk-accent-img); border-color:rgba(200,163,255,.8); box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 14px rgba(140,80,240,.4); } html[data-skin="standard"] .lh-set-navbtn.is-active{ background:var(--sk-accent-img); border-color:rgba(200,163,255,.8); color:var(--sk-accent-text); } html[data-skin="standard"] .message-list{background:var(--sk-list-bg)} /* -------------------------------------------------------------------------- Windows 7 / Aero: helles Fensterinneres, Glasrahmen, blaue Verlaeufe. -------------------------------------------------------------------------- */ html[data-skin="win7"]{ color-scheme:light; --sk-font:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; --sk-font-head:'Segoe UI',Tahoma,sans-serif; --sk-font-ui:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; --sk-head-transform:none; --sk-head-letter:normal; --sk-head-weight:600; --sk-bg:#1c4a76; --sk-bg-img:linear-gradient(180deg,#0f3357 0%,#1d5c92 34%,#3f8fc4 68%,#7fc0e4 100%); --sk-panel:#f2f7fd; --sk-panel-img:linear-gradient(180deg,rgba(255,255,255,.97),rgba(228,240,251,.95)); --sk-panel-2:rgba(255,255,255,.82); --sk-panel-3:rgba(214,231,247,.7); --sk-shell-img:linear-gradient(180deg,rgba(228,241,252,.92),rgba(198,224,247,.92)); --sk-line:rgba(126,168,208,.85); --sk-line-strong:rgba(58,116,170,.95); --sk-radius:8px; --sk-radius-sm:4px; --sk-shadow:0 12px 30px rgba(5,30,56,.32); --sk-shadow-in:inset 0 1px 0 rgba(255,255,255,.9); --sk-text:#132433; --sk-text-dim:#4d6779; --sk-text-strong:#08131e; --sk-link:#0a56a8; --sk-accent:#2f8fd4; --sk-accent-img:linear-gradient(180deg,#79c8f4,#2f8fd4 48%,#1f6fae 52%,#2a86c9); --sk-accent-text:#ffffff; --sk-btn-img:linear-gradient(180deg,#fdfeff 0%,#eef7fe 45%,#d9ecfb 46%,#c6e0f6 100%); --sk-btn-hover-img:linear-gradient(180deg,#ffffff 0%,#f0faff 45%,#cfeafd 46%,#b3ddfb 100%); --sk-btn-active-img:linear-gradient(180deg,#bcd9ef 0%,#a9cde9 45%,#c2def4 46%,#d6ebfa 100%); --sk-btn-line:#7ba7cf; --sk-btn-text:#12222f; --sk-btn-radius:4px; --sk-btn-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 1px 2px rgba(9,42,74,.2); --sk-btn-hover-shadow:inset 0 0 0 1px rgba(255,255,255,.95),0 0 7px rgba(110,197,255,.85),0 1px 2px rgba(9,42,74,.2); --sk-input-bg:#ffffff; --sk-input-line:#7f9db9; --sk-input-text:#101f2c; --sk-input-radius:3px; --sk-input-shadow:inset 0 1px 2px rgba(20,54,86,.22); --sk-focus:0 0 0 3px rgba(90,180,240,.45); --sk-scroll-thumb:#a7cbe8; --sk-scroll-track:#e2eefa; --sk-blur:blur(16px) saturate(1.5); --sk-glass:linear-gradient(180deg,rgba(255,255,255,.62),rgba(196,225,248,.46)); --sk-title-text:#0d2436; --sk-corner:linear-gradient(transparent,transparent); --sk-noise:linear-gradient(transparent,transparent); --sk-notice-bg:linear-gradient(180deg,#ffffff,#e6f2fd); --sk-ring:0 0 0 0 transparent; } /* -------------------------------------------------------------------------- Windows XP / Luna: beige Flaechen, tiefblaue Titelleisten, 3D-Kanten. -------------------------------------------------------------------------- */ html[data-skin="winxp"]{ color-scheme:light; --sk-font:Tahoma,'Segoe UI',Verdana,Geneva,sans-serif; --sk-font-head:Tahoma,'Trebuchet MS',sans-serif; --sk-font-ui:Tahoma,'Segoe UI',Verdana,Geneva,sans-serif; --sk-head-transform:none; --sk-head-letter:normal; --sk-head-weight:700; --sk-bg:#376ab0; --sk-bg-img:linear-gradient(180deg,#4a8ada 0%,#84b8e8 44%,#63a352 74%,#3d7a34 100%); --sk-panel:#ece9d8; --sk-panel-img:linear-gradient(180deg,#ffffff,#f8f7f1); --sk-panel-2:#ffffff; --sk-panel-3:#e0dcc8; --sk-shell-img:linear-gradient(180deg,#ece9d8,#ded9c6); --sk-line:#9c9484; --sk-line-strong:#0831d9; --sk-radius:0px; --sk-radius-sm:3px; --sk-shadow:0 8px 22px rgba(0,20,60,.34); --sk-shadow-in:inset 0 1px 0 #ffffff; --sk-text:#000000; --sk-text-dim:#4f4c41; --sk-text-strong:#000000; --sk-link:#0000c8; --sk-accent:#0a5bd3; --sk-accent-img:linear-gradient(180deg,#3d8bf2,#0a5bd3 52%,#0846b0); --sk-accent-text:#ffffff; --sk-btn-img:linear-gradient(180deg,#ffffff 0%,#f4f2e9 46%,#e7e3d3 47%,#d5d0bc 100%); --sk-btn-hover-img:linear-gradient(180deg,#ffffff 0%,#fdf8dd 46%,#f6ecc0 47%,#e8dca8 100%); --sk-btn-active-img:linear-gradient(180deg,#c9c4b0 0%,#ddd8c6 54%,#eceadc 100%); --sk-btn-line:#003c74; --sk-btn-text:#000000; --sk-btn-radius:3px; --sk-btn-shadow:inset 0 0 0 1px #ffffff,inset 0 -1px 0 rgba(0,0,0,.08); --sk-btn-hover-shadow:inset 0 0 0 1px #ffffff,0 0 0 1px rgba(255,180,40,.55); --sk-input-bg:#ffffff; --sk-input-line:#7f9db9; --sk-input-text:#000000; --sk-input-radius:0px; --sk-input-shadow:inset 1px 1px 0 rgba(0,0,0,.22),inset -1px -1px 0 rgba(255,255,255,.9); --sk-focus:0 0 0 2px rgba(255,190,60,.6); --sk-scroll-thumb:#c9d7ec; --sk-scroll-track:#eceada; --sk-blur:none; --sk-glass:linear-gradient(180deg,#f6f4ec,#e3dfcc); --sk-title-img:linear-gradient(180deg,#1268e8 0%,#3d93f5 9%,#0f5fdd 20%,#0a51cf 82%,#1a6ae8 100%); --sk-title-text:#ffffff; --sk-corner:linear-gradient(transparent,transparent); --sk-noise:linear-gradient(transparent,transparent); --sk-notice-bg:linear-gradient(180deg,#ffffe1,#f4f0c8); --sk-ring:0 0 0 0 transparent; } /* -------------------------------------------------------------------------- Fantasy MMO: dunkler Stein, Bronze- und Goldfassungen, Pergament. Eigene Umsetzung, keine fremden Grafiken. -------------------------------------------------------------------------- */ html[data-skin="horde"]{ color-scheme:dark; --sk-font:'Palatino Linotype','Book Antiqua',Palatino,Georgia,'Times New Roman',serif; --sk-font-head:'Palatino Linotype','Book Antiqua',Georgia,serif; --sk-font-ui:'Segoe UI',system-ui,'Helvetica Neue',sans-serif; --sk-head-transform:uppercase; --sk-head-letter:.07em; --sk-head-weight:700; --sk-bg:#0a0706; --sk-bg-img:radial-gradient(120% 80% at 50% -10%,rgba(143,32,25,.26),transparent 60%),linear-gradient(180deg,#191312,#0c0908 58%,#050403); --sk-panel:#191413; --sk-panel-img:linear-gradient(180deg,rgba(44,36,33,.97),rgba(20,16,15,.98)); --sk-panel-2:rgba(11,9,8,.74); --sk-panel-3:rgba(70,44,38,.42); --sk-shell-img:linear-gradient(180deg,#1a1413,#090706); --sk-line:#6b2f26; --sk-line-strong:#b83024; --sk-frame:url(/assets/skins/wow-horde/frame.svg); --sk-frame-slice:32; --sk-frame-w:16px; --sk-frame-out:11px; --sk-divider:url(/assets/skins/wow-horde/divider.svg); --sk-corner-tl:url(/assets/skins/wow-horde/corner-tl.svg); --sk-corner-tr:url(/assets/skins/wow-horde/corner-tr.svg); --sk-corner-br:url(/assets/skins/wow-horde/corner-br.svg); --sk-corner-bl:url(/assets/skins/wow-horde/corner-bl.svg); --sk-radius:4px; --sk-radius-sm:3px; --sk-shadow:0 14px 38px rgba(0,0,0,.7); --sk-shadow-in:inset 0 0 0 1px rgba(200,160,90,.28),inset 0 0 34px rgba(0,0,0,.55); --sk-text:#ded2c6; --sk-text-dim:#9c8b81; --sk-text-strong:#f0c9a8; --sk-link:#e07a54; --sk-accent:#8f2019; --sk-accent-img:linear-gradient(180deg,#c8433a,#8f2019 46%,#5c120e 54%,#7a1c15); --sk-accent-text:#fbe6de; --sk-btn-img:linear-gradient(180deg,#4c4441 0%,#332c2a 46%,#1d1817 54%,#2c2624 100%); --sk-btn-hover-img:linear-gradient(180deg,#6a3830,#4a2a25 48%,#2c1a17 54%,#3d2420); --sk-btn-active-img:linear-gradient(180deg,#1d1817,#332c2a 60%,#4c4441); --sk-btn-line:#7b3a30; --sk-btn-text:#e8dcd2; --sk-btn-radius:3px; --sk-btn-shadow:inset 0 0 0 1px rgba(200,160,90,.32),inset 0 1px 0 rgba(255,220,150,.16),0 2px 6px rgba(0,0,0,.55); --sk-btn-hover-shadow:inset 0 0 0 1px rgba(255,205,120,.6),0 0 10px rgba(200,150,60,.35),0 2px 6px rgba(0,0,0,.55); --sk-input-bg:rgba(8,6,4,.86); --sk-input-line:#6f5527; --sk-input-text:#f0e4c8; --sk-input-radius:3px; --sk-input-shadow:inset 0 2px 6px rgba(0,0,0,.75); --sk-focus:0 0 0 2px rgba(200,160,90,.45); --sk-scroll-thumb:#7b3a30; --sk-scroll-track:#171211; --sk-blur:none; --sk-glass:linear-gradient(180deg,rgba(58,46,28,.95),rgba(22,17,11,.96)); --sk-title-img:linear-gradient(180deg,#4a2420,#2a1512 58%,#170f0e); --sk-title-text:#f0c9a8; --sk-orn:rgba(184,48,36,.8); --sk-parchment:linear-gradient(180deg,#e6d6b4,#cdb98c); --sk-parchment-text:#3a2a12; --sk-hint-text:#3a2a12; --sk-noise:url(/assets/skins/wow-horde/texture.svg); --sk-band:linear-gradient(180deg,#4a2f2a,#2b1b18 62%,#170f0e); --sk-list-bg:linear-gradient(180deg,rgba(26,20,19,.96),rgba(14,11,10,.98)); --sk-notice-bg:linear-gradient(180deg,#3d201c,#221110); --sk-ring:0 0 0 1px #0b0807,0 0 0 3px rgba(150,54,44,.95),0 0 0 4px #0b0807; } /* -------------------------------------------------------------------------- Allianz: heller Stein, blauer Stahl, Gold. Eigener Satz Grafiken. -------------------------------------------------------------------------- */ html[data-skin="alliance"]{ color-scheme:dark; --sk-font:'Palatino Linotype','Book Antiqua',Palatino,Georgia,'Times New Roman',serif; --sk-font-head:'Palatino Linotype','Book Antiqua',Georgia,serif; --sk-font-ui:'Segoe UI',system-ui,'Helvetica Neue',sans-serif; --sk-head-transform:uppercase; --sk-head-letter:.08em; --sk-head-weight:700; --sk-bg:#0a101c; --sk-bg-img:radial-gradient(120% 80% at 50% -10%,rgba(63,111,174,.3),transparent 62%),linear-gradient(180deg,#132039,#0a1120 58%,#050810); --sk-panel:#16203a; --sk-panel-img:linear-gradient(180deg,rgba(38,54,88,.96),rgba(16,23,40,.98)); --sk-panel-2:rgba(9,14,26,.74); --sk-panel-3:rgba(58,84,130,.36); --sk-shell-img:linear-gradient(180deg,#121c33,#080d18); --sk-line:#3c5a86; --sk-line-strong:#c9a24a; --sk-radius:3px; --sk-radius-sm:2px; --sk-shadow:0 14px 38px rgba(0,0,0,.68); --sk-shadow-in:inset 0 0 0 1px rgba(201,162,74,.24),inset 0 0 34px rgba(0,0,0,.5); --sk-text:#dae5f4; --sk-text-dim:#94a8c4; --sk-text-strong:#f0d68f; --sk-link:#ffd982; --sk-accent:#c9a24a; --sk-accent-img:linear-gradient(180deg,#f2dda2,#c9a24a 46%,#8a6a24 54%,#a68436); --sk-accent-text:#14203a; --sk-btn-img:linear-gradient(180deg,#3d5a7f 0%,#2b3d5e 46%,#18243c 54%,#26364f 100%); --sk-btn-hover-img:linear-gradient(180deg,#4d6f9e,#36527d 48%,#22334f 54%,#2f4666); --sk-btn-active-img:linear-gradient(180deg,#18243c,#2b3d5e 60%,#3d5a7f); --sk-btn-line:#4f74a6; --sk-btn-text:#e6effb; --sk-btn-radius:2px; --sk-btn-shadow:inset 0 0 0 1px rgba(201,162,74,.26),inset 0 1px 0 rgba(220,236,255,.16),0 2px 6px rgba(0,0,0,.5); --sk-btn-hover-shadow:inset 0 0 0 1px rgba(242,221,162,.55),0 0 10px rgba(201,162,74,.3),0 2px 6px rgba(0,0,0,.5); --sk-input-bg:rgba(6,10,19,.88); --sk-input-line:#3c5a86; --sk-input-text:#e8f1fd; --sk-input-radius:2px; --sk-input-shadow:inset 0 2px 6px rgba(0,0,0,.7); --sk-focus:0 0 0 2px rgba(201,162,74,.45); --sk-scroll-thumb:#4f74a6; --sk-scroll-track:#101a2e; --sk-blur:none; --sk-glass:linear-gradient(180deg,rgba(44,62,99,.95),rgba(15,22,38,.96)); --sk-title-img:linear-gradient(180deg,#2d456e,#1a2a47 60%,#101a2b); --sk-title-text:#f0d68f; --sk-orn:rgba(201,162,74,.85); --sk-parchment:linear-gradient(180deg,#f0e6cd,#d9c9a4); --sk-parchment-text:#2a2312; --sk-noise:url(/assets/skins/wow-alliance/texture.svg); --sk-notice-bg:linear-gradient(180deg,#20304f,#0f1728); --sk-ring:0 0 0 1px #080d18,0 0 0 3px rgba(201,162,74,.85),0 0 0 4px #080d18; --sk-frame:url(/assets/skins/wow-alliance/frame.svg); --sk-frame-slice:32; --sk-frame-w:16px; --sk-frame-out:11px; --sk-divider:url(/assets/skins/wow-alliance/divider.svg); --sk-corner-tl:url(/assets/skins/wow-alliance/corner-tl.svg); --sk-corner-tr:url(/assets/skins/wow-alliance/corner-tr.svg); --sk-corner-br:url(/assets/skins/wow-alliance/corner-br.svg); --sk-corner-bl:url(/assets/skins/wow-alliance/corner-bl.svg); --sk-band:linear-gradient(180deg,#33507d,#1d3050 62%,#101a2b); --sk-list-bg:linear-gradient(180deg,rgba(19,28,48,.96),rgba(9,14,25,.98)); } /* -------------------------------------------------------------------------- Dark-Fantasy-ARPG: fast schwarzer Stein, Messing, Leder, Ornamentik. Eigene Umsetzung, keine fremden Grafiken. -------------------------------------------------------------------------- */ html[data-skin="poe"]{ color-scheme:dark; --sk-font:Georgia,'Palatino Linotype','Times New Roman',serif; --sk-font-head:'Trajan Pro','Palatino Linotype',Georgia,serif; --sk-font-ui:'Segoe UI',system-ui,'Helvetica Neue',sans-serif; --sk-head-transform:uppercase; --sk-head-letter:.13em; --sk-head-weight:700; --sk-bg:#070605; --sk-bg-img:radial-gradient(130% 90% at 50% -20%,rgba(96,70,34,.24),transparent 58%),radial-gradient(100% 70% at 50% 120%,rgba(90,26,20,.2),transparent 62%),linear-gradient(180deg,#0d0b09,#060504); --sk-panel:#100e0b; --sk-panel-img:linear-gradient(180deg,rgba(28,24,19,.97),rgba(12,10,8,.99)); --sk-panel-2:rgba(6,5,4,.78); --sk-panel-3:rgba(52,40,24,.34); --sk-shell-img:linear-gradient(180deg,#14110d,#060504); --sk-line:#4e3c20; --sk-line-strong:#a9803f; --sk-radius:0px; --sk-radius-sm:0px; --sk-shadow:0 18px 46px rgba(0,0,0,.82); --sk-shadow-in:inset 0 0 0 1px rgba(169,128,63,.34),inset 0 0 46px rgba(0,0,0,.72); --sk-text:#c7bfad; --sk-text-dim:#877f6f; --sk-text-strong:#e4d7ba; --sk-link:#c9a227; --sk-accent:#a9803f; --sk-accent-img:linear-gradient(180deg,#d4a758,#a9803f 46%,#6d4f22 54%,#8a6631); --sk-accent-text:#0c0906; --sk-btn-img:linear-gradient(180deg,#2b2419 0%,#1d1811 48%,#131009 52%,#211b12 100%); --sk-btn-hover-img:linear-gradient(180deg,#3b3122,#282017 48%,#1a150e 52%,#2c2418); --sk-btn-active-img:linear-gradient(180deg,#131009,#211b12 60%,#2b2419); --sk-btn-line:#6d5326; --sk-btn-text:#ddd0b4; --sk-btn-radius:0px; --sk-btn-shadow:inset 0 0 0 1px rgba(169,128,63,.28),inset 0 1px 0 rgba(220,180,110,.12),0 2px 8px rgba(0,0,0,.7); --sk-btn-hover-shadow:inset 0 0 0 1px rgba(212,167,88,.62),0 0 12px rgba(169,128,63,.3),0 2px 8px rgba(0,0,0,.7); --sk-input-bg:rgba(4,3,2,.9); --sk-input-line:#4e3c20; --sk-input-text:#e2d6b8; --sk-input-radius:0px; --sk-input-shadow:inset 0 2px 8px rgba(0,0,0,.85); --sk-focus:0 0 0 2px rgba(169,128,63,.5); --sk-scroll-thumb:#6d5326; --sk-scroll-track:#0d0b09; --sk-blur:none; --sk-glass:linear-gradient(180deg,rgba(34,28,20,.96),rgba(10,8,6,.98)); --sk-title-img:linear-gradient(180deg,#2e2618,#171208 62%,#0b0906); --sk-title-text:#d9c79b; --sk-orn:rgba(169,128,63,.85); --sk-parchment:linear-gradient(180deg,#2a2318,#191309); --sk-parchment-text:#d8c9a6; --sk-noise:url(/assets/skins/poe2/texture.svg); --sk-notice-bg:linear-gradient(180deg,#2a2116,#140f09); --sk-frame:url(/assets/skins/poe2/frame.svg); --sk-divider:url(/assets/skins/poe2/divider.svg); --sk-corner-tl:url(/assets/skins/poe2/corner-tl.svg); --sk-corner-tr:url(/assets/skins/poe2/corner-tr.svg); --sk-corner-br:url(/assets/skins/poe2/corner-br.svg); --sk-corner-bl:url(/assets/skins/poe2/corner-bl.svg); --sk-band:linear-gradient(180deg,#2b2418,#17130c 62%,#0c0a07); --sk-list-bg:linear-gradient(180deg,rgba(17,14,11,.97),rgba(8,7,5,.99)); --sk-ring:0 0 0 1px #060504,0 0 0 3px rgba(146,110,52,.95),0 0 0 4px #060504; } /* Vier gleiche L-Winkel in den Ecken. Als Hintergrundebene statt als Pseudo-Element: so braucht kein Element position:relative und nichts im bestehenden Layout verschiebt sich. */ html[data-skin="horde"],html[data-skin="alliance"],html[data-skin="poe"]{ --sk-corner: var(--sk-corner-tl) 6px 6px/26px 26px no-repeat, var(--sk-corner-tr) calc(100% - 6px) 6px/26px 26px no-repeat, var(--sk-corner-bl) 6px calc(100% - 6px)/26px 26px no-repeat, var(--sk-corner-br) calc(100% - 6px) calc(100% - 6px)/26px 26px no-repeat; } /* ========================================================================== 2. GEMEINSAME KOMPONENTENSCHICHT Gilt fuer jeden gesetzten Skin und liest ausschliesslich Tokens. ========================================================================== */ html[data-skin]{background:var(--sk-bg);color:var(--sk-text);font-family:var(--sk-font)} html[data-skin] body{ background:var(--sk-bg-img),var(--sk-bg); color:var(--sk-text); font-family:var(--sk-font); } html[data-skin] h1,html[data-skin] h2,html[data-skin] h3, html[data-skin] .lh-set-title,html[data-skin] .lh-group-title, html[data-skin] .settings-kicker,html[data-skin] .chat-empty-title{ color:var(--sk-text-strong); font-family:var(--sk-font-head); font-weight:var(--sk-head-weight); letter-spacing:var(--sk-head-letter); text-transform:var(--sk-head-transform); } html[data-skin] p,html[data-skin] .muted,html[data-skin] small, html[data-skin] .settings-hinweis,html[data-skin] .tts-hint, html[data-skin] .chat-empty,html[data-skin] .emote-state, html[data-skin] .emote-permission,html[data-skin] dd{color:var(--sk-text-dim)} html[data-skin] a{color:var(--sk-link)} html[data-skin] .chat-text a,html[data-skin] .reply a, html[data-skin] .automod-text a,html[data-skin] .message-actions-copy a{color:var(--sk-link)} /* --- Flaechen: Karten, Panels, Fenster ---------------------------------- */ html[data-skin] .card, html[data-skin] .panel, html[data-skin] .channelbar, html[data-skin] .player-panel, html[data-skin] .chat-stage, html[data-skin] .creator-mode-panel, html[data-skin] .control-room-panel, html[data-skin] .follow-panel, html[data-skin] .channel-manager-card, html[data-skin] .collab-menu, html[data-skin] .chat-switcher, html[data-skin] .mention-picker, html[data-skin] .emote-picker, html[data-skin] .pro-card, html[data-skin] .mobile-options-card, html[data-skin] .confirm-card, html[data-skin] .message-actions-card, html[data-skin] .clip-modal-card, html[data-skin] .mobile-channel-card, html[data-skin] .mobile-live-ops-card, html[data-skin] .mobile-live-ops-sheet, html[data-skin] .account-delete-card, html[data-skin] .twitch-session-card, html[data-skin] .obs-bridge-card, html[data-skin] .app-boot-card, html[data-skin] .chat-assets-loader-card, html[data-skin] .alert-settings-panel, html[data-skin] .alert-sound-library-panel, html[data-skin] .install-banner, html[data-skin] .offline-banner{ background:var(--sk-corner),var(--sk-noise),var(--sk-panel-img),var(--sk-panel); border-color:var(--sk-line); border-radius:var(--sk-radius); box-shadow:var(--sk-shadow-in),var(--sk-shadow); color:var(--sk-text); } /* Verschachtelte Flaechen bleiben ruhiger: keine Ecken, flacherer Schatten. */ html[data-skin] .tts-block, html[data-skin] .lh-group, html[data-skin] .settings-section, html[data-skin] .stream-stats-tile, html[data-skin] .admin-stat, html[data-skin] .admin-member, html[data-skin] .message-user-history, html[data-skin] .message-actions-copy, html[data-skin] .message-actions-pin, html[data-skin] .automod-text, html[data-skin] .pro-plan, html[data-skin] .role-highlight, html[data-skin] .permission-row, html[data-skin] .alert-event-card, html[data-skin] .alert-sound-item, html[data-skin] .clip-card, html[data-skin] .follow-row, html[data-skin] .channel-manager-row, html[data-skin] .hl-rule, html[data-skin] .collab-row, html[data-skin] .chat-switcher-row, html[data-skin] .account-plan-overview, html[data-skin] .subscription-details, html[data-skin] .obs-scene-list, html[data-skin] .obs-stream-row, html[data-skin] .creator-alert-history, html[data-skin] .creator-event-feed, html[data-skin] .highlight-center-row, html[data-skin] .pwa-install-hint, html[data-skin] .role-summary, html[data-skin] .role-highlights, html[data-skin] .chat-font-preview, html[data-skin] .chat-font-settings, html[data-skin] .platform-link, html[data-skin] .plan-primary-actions, html[data-skin] .settings-drilldown{ background:var(--sk-panel-2); border-color:var(--sk-line); border-radius:var(--sk-radius-sm); color:var(--sk-text); } /* Kopf- und Fussleisten innerhalb der Fenster. */ html[data-skin] .chat-head, html[data-skin] .player-panel-head, html[data-skin] .lh-set-head, html[data-skin] .lh-set-foot, html[data-skin] .channel-manager-head, html[data-skin] .collab-menu-head, html[data-skin] .emote-picker-head, html[data-skin] .message-actions-head, html[data-skin] .clip-modal-head, html[data-skin] .mobile-live-ops-head, html[data-skin] .control-room-panel-head, html[data-skin] .creator-mode-head, html[data-skin] .stream-stats-head{ background:var(--sk-band,var(--sk-glass)); border-color:var(--sk-line); color:var(--sk-text-strong); } html[data-skin] .chat-head, html[data-skin] .player-panel-head{font-family:var(--sk-font-ui)} html[data-skin] .chat-head strong, html[data-skin] .player-title-channel, html[data-skin] .emote-picker-head strong, html[data-skin] .message-actions-head h2{color:var(--sk-text-strong)} html[data-skin] .chat-compose{ background:var(--sk-band,var(--sk-glass)); border-color:var(--sk-line); } /* Modal-Hintergruende */ html[data-skin] .pro-modal, html[data-skin] .mobile-options-modal, html[data-skin] .confirm-modal, html[data-skin] .message-actions-modal, html[data-skin] .clip-modal, html[data-skin] .mobile-channel-modal, html[data-skin] .mobile-live-ops-modal, html[data-skin] .twitch-session-modal, html[data-skin] .app-boot-overlay, html[data-skin] .chat-assets-loader, html[data-skin] .follow-picker{background-color:rgba(4,7,12,.72)} /* --- Knoepfe ------------------------------------------------------------ Ausgenommen bleiben die durchsichtig schwebenden Knoepfe und die, deren Farbe eine Bedeutung traegt (zulassen, ablehnen, loeschen, Kick-Gruen). Die bekommen weiter unten nur das Chrome des Skins, nicht seine Farbe. Die Ausnahmen stehen in :where(). Ohne das zaehlt jedes einzelne :not() in die Spezifitaet - fuenfundzwanzig Ausnahmen machten diese Regel staerker als jede spaetere und uebersteuerten sie alle, zuletzt das Zahnrad in der Titelleiste. :where() zaehlt null. */ html[data-skin] button:not(:where(.tab,.tab-remove,.delete-button,.message-actions-button,.chat-user,.emote-option,.lh-set-navbtn,.lh-set-back,.install-banner-dismiss,.mobile-options-close,.message-actions-close,.clip-modal-close,.mobile-channel-close,.mobile-live-ops-close,.chat-back,.player-viewers-toggle,.follow-toggle,.channel-scroll-left,.channel-scroll-right,.highlight-center-remove,.hl-rule-remove,.tts-key-toggle,.automod-allow,.automod-deny,.confirm-danger,.message-action-delete,.message-action-unpin,.withdraw-action,.account-delete-action,.button-kick,.kick-connect-button,.channel-activate,.chat-switcher-row,.channel-suggestion,.follow-row,.collab-row,.admin-member,.highlight-center-row,.channel-manager-row,.hl-word-remove,.clip-card,.hype-spitze)), html[data-skin] .button:not(.button-kick){ background:var(--sk-btn-img); border:1px solid var(--sk-btn-line); border-radius:var(--sk-btn-radius); box-shadow:var(--sk-btn-shadow); color:var(--sk-btn-text); font-family:var(--sk-font); text-shadow:none; } html[data-skin] button:not(:where(.tab,.tab-remove,.delete-button,.message-actions-button,.chat-user,.emote-option,.lh-set-navbtn,.lh-set-back,.install-banner-dismiss,.mobile-options-close,.message-actions-close,.clip-modal-close,.mobile-channel-close,.mobile-live-ops-close,.chat-back,.player-viewers-toggle,.follow-toggle,.channel-scroll-left,.channel-scroll-right,.highlight-center-remove,.hl-rule-remove,.tts-key-toggle,.automod-allow,.automod-deny,.confirm-danger,.message-action-delete,.message-action-unpin,.withdraw-action,.account-delete-action,.button-kick,.kick-connect-button,.channel-activate,.chat-switcher-row,.channel-suggestion,.follow-row,.collab-row,.admin-member,.highlight-center-row,.channel-manager-row,.hl-word-remove,.clip-card,.hype-spitze)):hover, html[data-skin] .button:not(:where(.button-kick)):hover{ background:var(--sk-btn-hover-img); border-color:var(--sk-btn-hover-line,var(--sk-btn-line)); box-shadow:var(--sk-btn-hover-shadow); color:var(--sk-btn-text); } html[data-skin] button:not(:where(.tab,.tab-remove,.delete-button,.message-actions-button,.chat-user,.emote-option,.lh-set-navbtn,.lh-set-back,.install-banner-dismiss,.mobile-options-close,.message-actions-close,.clip-modal-close,.mobile-channel-close,.mobile-live-ops-close,.chat-back,.player-viewers-toggle,.follow-toggle,.channel-scroll-left,.channel-scroll-right,.highlight-center-remove,.hl-rule-remove,.tts-key-toggle,.automod-allow,.automod-deny,.confirm-danger,.message-action-delete,.message-action-unpin,.withdraw-action,.account-delete-action,.button-kick,.kick-connect-button,.channel-activate,.chat-switcher-row,.channel-suggestion,.follow-row,.collab-row,.admin-member,.highlight-center-row,.channel-manager-row,.hl-word-remove,.clip-card,.hype-spitze)):active{background:var(--sk-btn-active-img)} html[data-skin] button:disabled{opacity:.5} html[data-skin] button:focus-visible, html[data-skin] .button:focus-visible, html[data-skin] input:focus, html[data-skin] textarea:focus, html[data-skin] select:focus, html[data-skin] .rich-composer:focus{outline:none;box-shadow:var(--sk-focus)} /* Farbige Knoepfe behalten ihre Bedeutung und bekommen nur die Fassung. */ html[data-skin] .automod-allow, html[data-skin] .automod-deny, html[data-skin] .confirm-danger, html[data-skin] .message-action-delete, html[data-skin] .message-action-unpin, html[data-skin] .withdraw-action, html[data-skin] .account-delete-action, html[data-skin] .button-kick, html[data-skin] .kick-connect-button, html[data-skin] .channel-activate{ border-radius:var(--sk-btn-radius); box-shadow:var(--sk-btn-shadow); font-family:var(--sk-font); } /* Durchsichtige Knoepfe bleiben durchsichtig, nur die Schrift folgt dem Skin. */ html[data-skin] .tab-remove, html[data-skin] .delete-button, html[data-skin] .message-actions-button, html[data-skin] .install-banner-dismiss, html[data-skin] .mobile-options-close, html[data-skin] .message-actions-close, html[data-skin] .clip-modal-close, html[data-skin] .mobile-channel-close, html[data-skin] .mobile-live-ops-close, html[data-skin] .lh-set-back, html[data-skin] .emote-picker-head button, html[data-skin] .reply-preview button, html[data-skin] .highlight-center-remove, html[data-skin] .hl-rule-remove{ background:transparent; border:0; box-shadow:none; font-family:var(--sk-font); } /* Der Rueckweg schwebt ueber dem Chat und muss sich davon abheben. */ html[data-skin] .chat-back{ background:var(--sk-accent-img),var(--sk-accent); border:1px solid var(--sk-line-strong); color:var(--sk-accent-text); box-shadow:0 10px 28px rgba(0,0,0,.55); } html[data-skin] .chat-back:hover{filter:brightness(1.12)} /* Zweitrangige Knoepfe: gleiche Fassung, ruhigere Flaeche. */ html[data-skin] button.secondary,html[data-skin] .secondary{ background:var(--sk-panel-3); border:1px solid var(--sk-line); color:var(--sk-text); } html[data-skin] button.secondary:hover,html[data-skin] .secondary:hover{ background:var(--sk-btn-hover-img); color:var(--sk-btn-text); } /* --- Eingaben ------------------------------------------------------------ */ html[data-skin] input, html[data-skin] textarea, html[data-skin] select, html[data-skin] .rich-composer, html[data-skin] .emote-search, html[data-skin] .follow-search, html[data-skin] .message-actions-pin select{ background:var(--sk-input-bg); border:1px solid var(--sk-input-line); border-radius:var(--sk-input-radius); box-shadow:var(--sk-input-shadow); color:var(--sk-input-text); font-family:var(--sk-font); } html[data-skin] .rich-composer:empty::before, html[data-skin] input::placeholder, html[data-skin] textarea::placeholder{color:var(--sk-text-dim)} /* Gemessen auf 375 Pixel Breite: in Tahoma und Georgia passt "Nachricht schreiben ..." nicht mehr in eine Zeile. Der Platzhalter brach um, das Eingabefeld wuchs von 47 auf 70 Pixel und nahm dem Chat 23 Pixel Hoehe. Eine Zeile bleibt eine Zeile. */ html[data-skin] .rich-composer:empty::before{white-space:nowrap} /* --- Kanalleiste --------------------------------------------------------- */ html[data-skin] .tab{ background:var(--sk-tab-img,var(--sk-btn-img)); border:1px solid var(--sk-tab-line,var(--sk-btn-line)); border-radius:var(--sk-btn-radius); box-shadow:var(--sk-tab-shadow,var(--sk-btn-shadow)); color:var(--sk-tab-text,var(--sk-btn-text)); font-family:var(--sk-font-ui,var(--sk-font)); } html[data-skin] .tab:hover{ background:var(--sk-tab-hover-img,var(--sk-btn-hover-img)); border-color:var(--sk-tab-hover-line,var(--sk-btn-hover-line,var(--sk-btn-line))); box-shadow:var(--sk-tab-hover-shadow,var(--sk-btn-hover-shadow)); } html[data-skin] .tab.active{ background:var(--sk-accent-img),var(--sk-accent); border-color:var(--sk-line-strong); color:var(--sk-accent-text); } html[data-skin] .tab.active strong,html[data-skin] .tab.active span{color:var(--sk-accent-text)} html[data-skin] .tab>span{color:var(--sk-text-dim)} html[data-skin] .tab-remove{color:var(--sk-text-dim)} /* --- Chat ---------------------------------------------------------------- */ html[data-skin] .message-list{background:var(--sk-panel-2);scrollbar-color:var(--sk-scroll-thumb) transparent} html[data-skin] .chat-text{color:var(--sk-text)} html[data-skin] .chat-time{color:var(--sk-text-dim)} html[data-skin] .chat-message{border-radius:var(--sk-radius-sm)} html[data-skin] .chat-message:hover{background:var(--sk-panel-3)} html[data-skin] .chat-message.mentioned{background:var(--sk-panel-3);border-left-color:var(--sk-accent)} html[data-skin] .chat-badge{background:var(--sk-panel-3);border-radius:var(--sk-radius-sm);color:var(--sk-text)} html[data-skin] .reply{border-left-color:var(--sk-line);color:var(--sk-text-dim)} html[data-skin] .reply-preview{background:var(--sk-panel-2);border-color:var(--sk-line);border-left-color:var(--sk-accent);color:var(--sk-text-dim)} html[data-skin] .notice-message{background:var(--sk-panel-3);border-radius:var(--sk-radius-sm);color:var(--sk-text)} html[data-skin] .chat-status{color:var(--sk-text-dim)} html[data-skin] .chat-empty-copy,html[data-skin] .chat-empty-inner{color:var(--sk-text-dim)} /* --- Emote-Auswahl ------------------------------------------------------- */ html[data-skin] .emote-option{ background:var(--sk-panel-2); border:1px solid var(--sk-line); border-radius:var(--sk-radius-sm); color:var(--sk-text); } html[data-skin] .emote-option:hover{background:var(--sk-panel-3)} html[data-skin] .emote-tabs button{background:var(--sk-panel-3);border-color:var(--sk-line);color:var(--sk-text-dim)} html[data-skin] .emote-tabs button.active{background:var(--sk-accent-img),var(--sk-accent);border-color:var(--sk-line-strong);color:var(--sk-accent-text)} html[data-skin] .emote-group h3{color:var(--sk-text-strong)} html[data-skin] .emote-toggle{ background:var(--sk-tab-img,var(--sk-btn-img)); border:1px solid var(--sk-tab-line,var(--sk-btn-line)); border-radius:var(--sk-btn-radius); color:var(--sk-tab-text,var(--sk-btn-text)); } /* --- Einstellungen ------------------------------------------------------- */ html[data-skin] .lh-set{background:transparent;color:var(--sk-text)} html[data-skin] .lh-set-nav{background:var(--sk-panel-2);border-color:var(--sk-line)} html[data-skin] .lh-set-navbtn{ background:transparent; border:1px solid transparent; border-radius:var(--sk-radius-sm); color:var(--sk-text); font-family:var(--sk-font); } html[data-skin] .lh-set-navbtn:hover{background:var(--sk-panel-3)} html[data-skin] .lh-set-navbtn.is-active{ background:var(--sk-accent-img),var(--sk-accent); border-color:var(--sk-line-strong); color:var(--sk-accent-text); } html[data-skin] .lh-set-chev,html[data-skin] .lh-set-ico{color:inherit} html[data-skin] .settings-accordion summary{color:var(--sk-text-strong)} /* --- Meldungen und Banderolen -------------------------------------------- */ html[data-skin] #notice{ background:var(--sk-notice-bg); border-color:var(--sk-line); border-radius:var(--sk-radius); color:var(--sk-text); } html[data-skin] .install-banner-text strong{color:var(--sk-text-strong)} html[data-skin] .install-banner-text span{color:var(--sk-text-dim)} html[data-skin] .install-banner-go{background:var(--sk-btn-img);border:1px solid var(--sk-btn-line);color:var(--sk-btn-text)} /* Die Huelle traegt die Fensterflaeche; die Panels darin setzen sich mit einer eigenen Toenung ab. */ html[data-skin] .shell{background:var(--sk-noise),var(--sk-shell-img)} html[data-skin] #tab-count{ background:var(--sk-panel-3); border-color:var(--sk-line); color:var(--sk-text); } /* Der Aktiv-Zaehler traegt dasselbe Orange wie das Pulsieren der Chats. Auf beiger oder weisser Flaeche ist das nicht mehr lesbar (gemessen 1,3), dort steht ein dunkleres Orange. */ html[data-skin="win7"] #channel-active-counter, html[data-skin="winxp"] #channel-active-counter{ background:rgba(72,38,4,.94)!important; border-color:rgba(255,176,80,.75)!important; } /* Die eingebettete Clip-Karte bringt keine eigene Flaeche mit; auf hellem Grund stand ihr weisser Titel sonst auf Weiss. */ html[data-skin] .clip-card-title{color:var(--sk-text)} html[data-skin] .clip-card-meta{color:var(--sk-text-dim)} html[data-skin] .notice-message strong, html[data-skin] .chat-subscription-notification-copy strong{color:var(--sk-text)} html[data-skin="win7"] .first-message-label, html[data-skin="winxp"] .first-message-label{color:#96129f} /* Der Hinweis auf eine neue Version bringt eigene dunkle Farben mit und waere im hellen Skin sonst Text auf gleichfarbigem Grund. */ html[data-skin] .pwa-update{ background:var(--sk-panel-img),var(--sk-panel); border-color:var(--sk-line); color:var(--sk-text); } html[data-skin] .pwa-update strong, html[data-skin] .pwa-update span, html[data-skin] .pwa-update p{color:var(--sk-text)} /* Sekundaerer Text. Die Farben im Original sind fuer dunkle Flaechen gewaehlt; auf einem hellen Skin waeren sie nicht mehr lesbar. Diese Liste ist nicht geraten, sondern aus den berechneten Farben aller Elemente im laufenden Programm eingesammelt. */ html[data-skin] .pro-field, html[data-skin] .tts-key-row, html[data-skin] .alert-settings-check, html[data-skin] .alert-event-enabled, html[data-skin] .creator-setup-status, html[data-skin] .message-user-details, html[data-skin] .platform-link-action, html[data-skin] .channel-activity-bar, html[data-skin] .player-viewers, html[data-skin] .chat-font-preview, html[data-skin] .channel-offline-info, html[data-skin] .chat-restriction-info, html[data-skin] .settings-scope-hint, html[data-skin] .follow-meta, html[data-skin] .collab-meta, html[data-skin] .stream-stats-label, html[data-skin] .admin-member-meta, html[data-skin] .mobile-live-ops-note, html[data-skin] .obs-scene-label, html[data-skin] .logout-note, html[data-skin] .subscription-details summary, html[data-skin] .subscription-details dl, html[data-skin] .account-plan-overview>span, html[data-skin] .platform-link-detail, html[data-skin] .role-highlight, html[data-skin] output{color:var(--sk-text-dim)} /* Aufklapp-Ueberschriften: vorher blieb hier je nach Stelle mal die helle, mal die dunkle Farbe aus app.css stehen. */ html[data-skin] details>summary{color:var(--sk-text)} /* Hervorgehobener Text auf den Flaechen des Skins. */ html[data-skin] .lh-set-back, html[data-skin] .mobile-options-close, html[data-skin] .message-actions-close, html[data-skin] .chat-back, html[data-skin] .alert-settings-title, html[data-skin] .message-user-profile strong, html[data-skin] #settings-plan-name, html[data-skin] #settings-role, html[data-skin] .lh-set-panel h4, html[data-skin] .lh-set-panel label, html[data-skin] .mobile-options-card h4, html[data-skin] .mobile-options-card label{color:var(--sk-text)} /* Zustandsfarben tragen eine Bedeutung und bleiben gruen beziehungsweise rot, werden auf hellem Grund aber so weit abgedunkelt, dass man sie liest. */ html[data-skin="win7"] .ok, html[data-skin="winxp"] .ok, html[data-skin="win7"] .platform-state, html[data-skin="winxp"] .platform-state, html[data-skin="win7"] .chat-status.online, html[data-skin="winxp"] .chat-status.online, html[data-skin="win7"] #settings-plan-state, html[data-skin="winxp"] #settings-plan-state, html[data-skin="win7"] .permission-row b, html[data-skin="winxp"] .permission-row b, html[data-skin="win7"] .platform-link[data-connected="true"] .platform-state, html[data-skin="winxp"] .platform-link[data-connected="true"] .platform-state{color:#136546} html[data-skin="win7"] .permission-row.unavailable b, html[data-skin="winxp"] .permission-row.unavailable b{color:#8a5560} html[data-skin="win7"] .error, html[data-skin="winxp"] .error{color:#9d1a25} html[data-skin="win7"] .pro-feature-badge, html[data-skin="winxp"] .pro-feature-badge{background:rgba(105,60,165,.18);color:#4a1d86} /* Der Abmelden-Knopf wird in app.css ueber die Kombination aus Fusszeile und ID gefaerbt und blieb deshalb rot auf rot. Er bleibt rot - das ist seine Bedeutung -, wird auf heller Flaeche aber lesbar. */ html[data-skin="win7"] .lh-set-foot #logout, html[data-skin="winxp"] .lh-set-foot #logout{ background:rgba(176,42,62,.12); border:1px solid rgba(150,32,52,.5); color:#8c1d2e; } /* app.css setzt die Farbe dieses Hinweisfelds mit !important. Ohne dasselbe Gewicht bliebe dort helles Blau auf heller Flaeche stehen. Es ist die einzige Stelle in dieser Datei, die das braucht. */ html[data-skin] .pwa-install-hint, html[data-skin] .pwa-install-hint strong{color:var(--sk-hint-text,var(--sk-text))!important} /* --- Bildlaufleisten ----------------------------------------------------- */ html[data-skin] *{scrollbar-color:var(--sk-scroll-thumb) var(--sk-scroll-track)} html[data-skin] ::-webkit-scrollbar{width:12px;height:12px} html[data-skin] ::-webkit-scrollbar-track{background:var(--sk-scroll-track)} html[data-skin] ::-webkit-scrollbar-thumb{ background:var(--sk-btn-img); border:1px solid var(--sk-btn-line); border-radius:var(--sk-btn-radius); } html[data-skin] ::-webkit-scrollbar-thumb:hover{background:var(--sk-btn-hover-img)} /* --- Kanalfarben auf hellen Skins --------------------------------------- Twitch- und Kick-Farben sind fuer dunkle Hintergruende gewaehlt. Auf einer hellen Flaeche waeren Gelb oder Hellgruen nicht mehr lesbar. Ein Filter dunkelt genau diese eingefaerbten Namen ab, ohne dass die Farbe selbst irgendwo im Code geaendert werden muss. */ html[data-skin="win7"] .chat-user, html[data-skin="winxp"] .chat-user, html[data-skin="win7"] .tab strong, html[data-skin="winxp"] .tab strong, html[data-skin="win7"] .chat-head strong, html[data-skin="winxp"] .chat-head strong, html[data-skin="win7"] .player-title-channel, html[data-skin="winxp"] .player-title-channel, html[data-skin="win7"] .chat-switcher-row strong, html[data-skin="winxp"] .chat-switcher-row strong{filter:brightness(.5) saturate(1.6)} html[data-skin="win7"] .tab.active strong, html[data-skin="winxp"] .tab.active strong{filter:none} /* Bemalte Namen aus 7TV tragen ihre Farbe im Hintergrund, nicht im Text - ein Filter wuerde sie zerstoeren. */ html[data-skin] .chat-user.seventv-paint{filter:none} /* ========================================================================== 3. SKIN-EIGENES CHROME ========================================================================== */ /* --- Windows 7: Glasrahmen ----------------------------------------------- */ html[data-skin="win7"] .shell>header{ background:var(--sk-glass); backdrop-filter:var(--sk-blur); -webkit-backdrop-filter:var(--sk-blur); border-color:rgba(255,255,255,.55); border-radius:var(--sk-radius) var(--sk-radius) 0 0; box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.4),0 6px 18px rgba(6,32,58,.3); color:var(--sk-title-text); } html[data-skin="win7"] .brand{color:#0c3457;text-shadow:0 1px 2px rgba(255,255,255,.85)} html[data-skin="win7"] .brand-beta{color:#0c4a7c} html[data-skin="win7"] .pro-modal, html[data-skin="win7"] .mobile-options-modal, html[data-skin="win7"] .confirm-modal{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} html[data-skin="win7"] .tab.active{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 9px rgba(90,190,250,.75)} /* --- Windows XP: Titelleiste und Fensterkante ---------------------------- */ html[data-skin="winxp"] .shell>header{ background:var(--sk-title-img); border:1px solid #0831d9; border-radius:7px 7px 0 0; box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 3px 10px rgba(0,20,60,.4); color:var(--sk-title-text); } html[data-skin="winxp"] .brand{color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,.55)} html[data-skin="winxp"] .brand-beta{color:#ffe27a} /* Der klassische Reiter sitzt auf der Flaeche auf. */ html[data-skin="winxp"] .tab{border-radius:4px 4px 0 0} html[data-skin="winxp"] .tab.active{ background:linear-gradient(180deg,#ffffff,#f6f3e6 42%,#ece9d8); border-bottom-color:#ece9d8; color:#000; } html[data-skin="winxp"] .tab.active strong, html[data-skin="winxp"] .tab.active span, html[data-skin="winxp"] .tab.active .tab-name{color:#000} html[data-skin="winxp"] .lh-set-navbtn.is-active{background:var(--sk-title-img);color:#fff} /* --- Fantasy MMO: Fassungen und Pergament -------------------------------- */ html[data-skin="horde"] .shell>header{ background:var(--sk-title-img); border-color:var(--sk-line-strong); box-shadow:inset 0 0 0 1px rgba(200,160,90,.4),inset 0 0 30px rgba(0,0,0,.6),0 8px 26px rgba(0,0,0,.6); } html[data-skin="horde"] .brand{color:#ffd894;text-shadow:0 2px 3px rgba(0,0,0,.85)} html[data-skin="horde"] .brand-beta{color:#c8a05a} /* Die Fassung liegt aussen. Innen liegende Rahmen verschwinden hinter den Kindelementen: Nachrichtenliste, Kopfzeile und Eingabe fuellen ihre Flaeche vollstaendig und werden nach dem inset-Schatten gemalt. Ein aeusserer Ring kostet keinen Platz und bleibt sichtbar. */ html[data-skin="horde"] .card, html[data-skin="horde"] .panel, html[data-skin="horde"] .channelbar, html[data-skin="horde"] .chat-stage, html[data-skin="horde"] .player-panel, html[data-skin="horde"] .emote-picker, html[data-skin="horde"] .confirm-card, html[data-skin="horde"] .pro-card, html[data-skin="horde"] .mobile-options-card{ box-shadow: inset 0 0 0 1px rgba(214,176,104,.5), inset 0 0 40px rgba(0,0,0,.62), var(--sk-ring), 0 14px 38px rgba(0,0,0,.72); } /* Kopfzeilen und Eingabe als geschlagenes Metall, die Liste als Stein. */ html[data-skin="horde"] .chat-head, html[data-skin="horde"] .player-panel-head, html[data-skin="horde"] .chat-compose{ background:linear-gradient(180deg,#4a3b23,#2b2214 62%,#1b1509); border-color:rgba(200,160,90,.55); box-shadow:inset 0 1px 0 rgba(255,214,150,.18); } html[data-skin="horde"] .message-list{ background:var(--sk-noise),linear-gradient(180deg,rgba(26,21,15,.96),rgba(15,12,9,.98)); } html[data-skin="horde"] .chat-head strong, html[data-skin="horde"] .player-title-channel{text-shadow:0 1px 3px rgba(0,0,0,.9)} /* Pergament fuer kurze Hinweise, so wie Tooltips im Genre. */ html[data-skin="horde"] #notice, html[data-skin="horde"] .notice-message, html[data-skin="horde"] .pwa-install-hint{ background:var(--sk-parchment); border-color:#8a6a30; color:var(--sk-parchment-text); } html[data-skin="horde"] .pwa-install-hint strong{color:#2a1c07} html[data-skin="horde"] .chat-user{text-shadow:0 1px 2px rgba(0,0,0,.8)} /* --- Dark-Fantasy-ARPG: massive Fassungen, Messing, Vignette ------------- */ html[data-skin="poe"] .shell>header{ background:var(--sk-title-img); border-color:var(--sk-line-strong); box-shadow:inset 0 0 0 1px rgba(169,128,63,.45),inset 0 0 40px rgba(0,0,0,.8),0 10px 30px rgba(0,0,0,.75); } html[data-skin="poe"] .brand{color:#d9c79b;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 2px 4px rgba(0,0,0,.9)} html[data-skin="poe"] .brand-beta{color:#a9803f} html[data-skin="poe"] .card, html[data-skin="poe"] .panel, html[data-skin="poe"] .channelbar, html[data-skin="poe"] .chat-stage, html[data-skin="poe"] .player-panel, html[data-skin="poe"] .emote-picker, html[data-skin="poe"] .pro-card, html[data-skin="poe"] .mobile-options-card, html[data-skin="poe"] .confirm-card, html[data-skin="poe"] .message-actions-card{ box-shadow: inset 0 0 0 1px rgba(196,150,74,.45), inset 0 0 60px rgba(0,0,0,.82), var(--sk-ring), 0 18px 46px rgba(0,0,0,.85); } html[data-skin="poe"] .chat-head, html[data-skin="poe"] .player-panel-head, html[data-skin="poe"] .chat-compose{ background:linear-gradient(180deg,#2b2418,#17130c 62%,#0c0a07); border-color:rgba(169,128,63,.5); box-shadow:inset 0 1px 0 rgba(212,167,88,.16); } html[data-skin="poe"] .message-list{ background:var(--sk-noise),linear-gradient(180deg,rgba(17,14,11,.97),rgba(8,7,5,.99)); } html[data-skin="poe"] .chat-head strong, html[data-skin="poe"] .player-title-channel{text-shadow:0 1px 3px rgba(0,0,0,.95)} html[data-skin="poe"] .chat-head, html[data-skin="poe"] .player-panel-head{ border-bottom:1px solid rgba(169,128,63,.45); box-shadow:inset 0 -1px 0 rgba(0,0,0,.9); } html[data-skin="poe"] .tab.active{ box-shadow:inset 0 0 0 1px rgba(212,167,88,.7),inset 0 0 18px rgba(0,0,0,.6); text-shadow:0 1px 2px rgba(0,0,0,.9); } html[data-skin="poe"] #notice{border-color:#6d5326;color:#e0d2ae} html[data-skin="poe"] #notice.error{background:linear-gradient(180deg,#3a1512,#1d0b09);border-color:#8f2b24;color:#f0c3bd} html[data-skin="poe"] .chat-user{text-shadow:0 1px 2px rgba(0,0,0,.9)} /* --- Fensterkante nur im breiten Layout --------------------------------- Auf schmalen Geraeten fuellt die Huelle die ganze Hoehe; ein Rahmen dort wuerde Platz kosten, den der Chat braucht. */ @media(min-width:1000px) and (orientation:landscape){ html[data-skin="win7"] .shell{ border-radius:var(--sk-radius); box-shadow:0 0 0 1px rgba(255,255,255,.35),0 24px 60px rgba(4,22,42,.55); } html[data-skin="winxp"] .shell{box-shadow:0 0 0 3px #0831d9,0 18px 44px rgba(0,20,60,.5)} html[data-skin="horde"] .shell{box-shadow:0 0 0 2px #7a5f2c,0 0 0 5px #0b0906,0 24px 60px rgba(0,0,0,.75)} html[data-skin="poe"] .shell{box-shadow:0 0 0 2px #6d5326,0 0 0 6px #060504,0 26px 66px rgba(0,0,0,.85)} } @media(max-width:999px),(orientation:portrait){ html[data-skin="horde"]{--sk-ring:0 0 0 1px #0b0906,0 0 0 2px rgba(178,138,64,.9)} html[data-skin="poe"]{--sk-ring:0 0 0 1px #060504,0 0 0 2px rgba(146,110,52,.9)} } /* --- Bewegungsarme Darstellung ------------------------------------------- */ @media(prefers-reduced-motion:reduce){ html[data-skin] .tab,html[data-skin] button{transition:none} } /* ========================================================================== 5. GRAFISCHES CHROME Die Rahmen sind echte Bilder im 9-Schnitt. Sie liegen ueber border-image-outset groesstenteils ausserhalb der Flaeche: so tragen sie keinen Platz ab und verdecken keinen Inhalt. border-image-width ist von border-width unabhaengig, das Layout bleibt also unberuehrt. ========================================================================== */ html[data-skin="horde"] .card, html[data-skin="horde"] .panel, html[data-skin="horde"] .channelbar, html[data-skin="horde"] .chat-stage, html[data-skin="horde"] .player-panel, html[data-skin="horde"] .emote-picker, html[data-skin="horde"] .pro-card, html[data-skin="horde"] .mobile-options-card, html[data-skin="horde"] .confirm-card, html[data-skin="horde"] .message-actions-card, html[data-skin="alliance"] .card, html[data-skin="alliance"] .panel, html[data-skin="alliance"] .channelbar, html[data-skin="alliance"] .chat-stage, html[data-skin="alliance"] .player-panel, html[data-skin="alliance"] .emote-picker, html[data-skin="alliance"] .pro-card, html[data-skin="alliance"] .mobile-options-card, html[data-skin="alliance"] .confirm-card, html[data-skin="alliance"] .message-actions-card, html[data-skin="poe"] .card, html[data-skin="poe"] .panel, html[data-skin="poe"] .channelbar, html[data-skin="poe"] .chat-stage, html[data-skin="poe"] .player-panel, html[data-skin="poe"] .emote-picker, html[data-skin="poe"] .pro-card, html[data-skin="poe"] .mobile-options-card, html[data-skin="poe"] .confirm-card, html[data-skin="poe"] .message-actions-card{ border-image:var(--sk-frame) var(--sk-frame-slice,22) / var(--sk-frame-w,11px) / var(--sk-frame-out,7px) stretch; } /* Die Trennlinie unter den Kopfzeilen ist ein Ornament, keine Linie. */ html[data-skin="horde"] .chat-head, html[data-skin="horde"] .player-panel-head, html[data-skin="horde"] .chat-compose, html[data-skin="alliance"] .chat-head, html[data-skin="alliance"] .player-panel-head, html[data-skin="alliance"] .chat-compose, html[data-skin="poe"] .chat-head, html[data-skin="poe"] .player-panel-head, html[data-skin="poe"] .chat-compose{ background:var(--sk-band); border-bottom:1px solid transparent; border-image:var(--sk-divider) 0 0 16 0 / 0 0 9px 0 stretch; } html[data-skin="horde"] .message-list, html[data-skin="alliance"] .message-list, html[data-skin="poe"] .message-list{ background:var(--sk-noise),var(--sk-list-bg); } html[data-skin="horde"] .chat-head strong, html[data-skin="horde"] .player-title-channel, html[data-skin="horde"] .chat-user, html[data-skin="alliance"] .chat-head strong, html[data-skin="alliance"] .player-title-channel, html[data-skin="alliance"] .chat-user, html[data-skin="poe"] .chat-head strong, html[data-skin="poe"] .player-title-channel, html[data-skin="poe"] .chat-user{ text-shadow:0 1px 3px rgba(0,0,0,.9); } /* --- Windows 7: echte Aero-Grafiken aus 7.css (MIT) ---------------------- */ html[data-skin="win7"] ::-webkit-scrollbar-thumb:vertical{ background:url(/assets/skins/windows7/scroll-thumb-y.png) no-repeat center/100% 100%; border:0; } html[data-skin="win7"] ::-webkit-scrollbar-thumb:horizontal{ background:url(/assets/skins/windows7/scroll-thumb-x.png) no-repeat center/100% 100%; border:0; } html[data-skin="win7"] ::-webkit-scrollbar-button:vertical:start{ display:block;height:17px; background:url(/assets/skins/windows7/scroll-up.svg) no-repeat center; } html[data-skin="win7"] ::-webkit-scrollbar-button:vertical:end{ display:block;height:17px; background:url(/assets/skins/windows7/scroll-down.svg) no-repeat center; } html[data-skin="win7"] select{ background-image:url(/assets/skins/windows7/select-arrow.svg); background-repeat:no-repeat; background-position:right 7px center; } /* --- Windows XP: echte Luna-Grafiken aus XP.css (MIT) -------------------- */ html[data-skin="winxp"] ::-webkit-scrollbar-track:vertical{ background:url(/assets/skins/windowsxp/scroll-track-y.svg) repeat-y center/100% auto; } html[data-skin="winxp"] ::-webkit-scrollbar-track:horizontal{ background:url(/assets/skins/windowsxp/scroll-track-x.svg) repeat-x center/auto 100%; } html[data-skin="winxp"] ::-webkit-scrollbar-thumb:vertical{ background:url(/assets/skins/windowsxp/scroll-thumb-y.svg) no-repeat center/100% 100%; border:0; } html[data-skin="winxp"] ::-webkit-scrollbar-thumb:horizontal{ background:url(/assets/skins/windowsxp/scroll-thumb-x.svg) no-repeat center/100% 100%; border:0; } html[data-skin="winxp"] ::-webkit-scrollbar-button:vertical:start{ display:block;height:17px; background:url(/assets/skins/windowsxp/scroll-up.svg) no-repeat center/100% 100%; } html[data-skin="winxp"] ::-webkit-scrollbar-button:vertical:end{ display:block;height:17px; background:url(/assets/skins/windowsxp/scroll-down.svg) no-repeat center/100% 100%; } html[data-skin="winxp"] select{ background:url(/assets/skins/windowsxp/select.svg) no-repeat center/100% 100%; border:0; } html[data-skin="winxp"] select:hover{ background-image:url(/assets/skins/windowsxp/select-hover.svg); } /* Der Gruppenrahmen ist im Original eine Grafik, keine Linie. */ /* ========================================================================== 6. WINDOWS: ECHTE AERO- UND LUNA-WERTE Farben, Verlaeufe und Kanten sind woertlich aus 7.css und XP.css uebernommen (MIT, siehe skins/CREDITS.md). Der Fensterrahmen entsteht aus inset-Schatten, nicht aus breiteren Rahmen: er kostet damit keinen Platz. ========================================================================== */ /* --- Windows 7 / Aero ---------------------------------------------------- */ html[data-skin="win7"]{ --sk-panel:#f0f0f0; --sk-panel-img:linear-gradient(#f0f0f0,#f0f0f0); --sk-panel-2:#ffffff; --sk-panel-3:#e8eef5; --sk-shell-img:linear-gradient(#f0f0f0,#f0f0f0); --sk-line:rgba(0,0,0,.35); --sk-line-strong:#3c7fb1; --sk-radius:3px; --sk-radius-sm:3px; --sk-shadow:0 0 0 1px rgba(255,255,255,.6); --sk-shadow-in:inset 0 0 0 1px rgba(255,255,255,.8); --sk-text:#000000; --sk-text-dim:#4a5560; --sk-text-strong:#000000; --sk-link:#0b52a1; /* Die drei Knopfverlaeufe von Aero: Ruhe, Schweben, Druck. */ --sk-btn-img:linear-gradient(#f2f2f2 45%,#ebebeb 45%,#cfcfcf); --sk-btn-hover-img:linear-gradient(#eaf6fd 45%,#bee6fd 0,#a7d9f5); --sk-btn-active-img:linear-gradient(#e5f4fc,#c4e5f6 30% 50%,#98d1ef 50%,#68b3db); --sk-btn-line:#8e8f8f; --sk-btn-hover-line:#3c7fb1; --sk-btn-text:#000000; --sk-btn-radius:3px; --sk-btn-shadow:inset 0 0 0 1px rgba(255,255,255,.8); --sk-btn-hover-shadow:inset 0 0 0 1px rgba(255,255,255,.8); --sk-input-bg:#ffffff; --sk-input-line:#abadb3; --sk-input-radius:2px; --sk-input-shadow:inset 0 1px 2px rgba(0,0,0,.1); --sk-focus:0 0 0 2px #98d1ef; --sk-accent:#3c7fb1; --sk-accent-img:linear-gradient(#eaf6fd 45%,#bee6fd 0,#a7d9f5); --sk-accent-text:#0b2437; --sk-scroll-thumb:#c2d4e6; --sk-scroll-track:#f0f0f0; --sk-glass:linear-gradient(to right,rgba(255,255,255,.4),rgba(0,0,0,.1),rgba(255,255,255,.2)),#4580c4; --sk-band:linear-gradient(180deg,#ffffff,#eaf0f7); --sk-notice-bg:linear-gradient(#ffffff,#e9f2fb); } /* Das Fenster: dunkle Kante aussen, heller Grat innen, weicher Schlagschatten. */ html[data-skin="win7"] .shell{ border-radius:6px; box-shadow:0 0 0 1px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.65),0 2px 14px 2px rgba(0,0,0,.35); } /* Die Titelleiste traegt das Aero-Glas: zwei Lichtkeile ueber dem Blau. */ html[data-skin="win7"] .shell>header{ background: linear-gradient(135deg,rgba(255,255,255,.33) 70px,transparent 100px), linear-gradient(225deg,rgba(255,255,255,.33) 70px,transparent 100px), linear-gradient(to right,rgba(255,255,255,.4),rgba(0,0,0,.1),rgba(255,255,255,.2)), #4580c4; backdrop-filter:blur(12px) saturate(1.3); -webkit-backdrop-filter:blur(12px) saturate(1.3); border:1px solid rgba(0,0,0,.55); border-radius:6px 6px 0 0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.6); color:#ffffff; } html[data-skin="win7"] .brand{color:#ffffff;text-shadow:0 1px 2px rgba(0,0,0,.45)} html[data-skin="win7"] .brand-beta{color:#dbeaff} /* Verschachtelte Flaechen sind Gruppenrahmen. */ html[data-skin="win7"] .tts-block, html[data-skin="win7"] .lh-group, html[data-skin="win7"] .pro-plan, html[data-skin="win7"] .account-plan-overview, html[data-skin="win7"] .stream-stats-tile, html[data-skin="win7"] .admin-stat{ background:#ffffff; border:1px solid #cdd7db; border-radius:3px; box-shadow:inset 0 0 0 1px #ffffff; } html[data-skin="win7"] .tab.active{ background:linear-gradient(#e5f4fc,#c4e5f6 30% 50%,#98d1ef 50%,#68b3db); border-color:#6d91ab; color:#0b2437; box-shadow:inset 0 0 0 1px rgba(255,255,255,.8); } html[data-skin="win7"] .tab.active strong, html[data-skin="win7"] .tab.active span, html[data-skin="win7"] .tab.active .tab-name{color:#0b2437} html[data-skin="win7"] .lh-set-navbtn.is-active{ background:linear-gradient(#e5f4fc,#c4e5f6 30% 50%,#98d1ef 50%,#68b3db); border-color:#6d91ab; color:#0b2437; } /* --- Windows XP / Luna --------------------------------------------------- */ html[data-skin="winxp"]{ --sk-panel:#ece9d8; --sk-panel-img:linear-gradient(#ece9d8,#ece9d8); --sk-panel-2:#ffffff; --sk-panel-3:#dedacb; --sk-shell-img:linear-gradient(#ece9d8,#ece9d8); --sk-line:#aca899; --sk-line-strong:#0831d9; --sk-radius:0px; --sk-radius-sm:4px; --sk-shadow:0 1px 3px rgba(0,0,0,.18); --sk-shadow-in:inset 1px 1px 0 #ffffff,inset -1px -1px 0 #b3ad99; --sk-text:#000000; --sk-text-dim:#4b4b42; --sk-text-strong:#000000; --sk-link:#0000c8; /* Luna-Knopf: heller Verlauf, blaue Kante, oranges Leuchten beim Schweben. */ --sk-btn-img:linear-gradient(180deg,#ffffff,#ecebe5 86%,#d8d0c4); --sk-btn-hover-img:linear-gradient(180deg,#ffffff,#ecebe5 86%,#d8d0c4); --sk-btn-active-img:linear-gradient(180deg,#cdcac3,#e3e3db 8%,#e5e5de 94%,#f2f2f1); --sk-btn-line:#003c74; --sk-btn-hover-line:#003c74; --sk-btn-text:#000000; --sk-btn-radius:3px; --sk-btn-shadow:none; --sk-btn-hover-shadow:inset -1px 1px #fff0cf,inset 1px 2px #fdd889,inset -2px 2px #fbc761,inset 2px -2px #e5a01a; --sk-input-bg:#ffffff; --sk-input-line:#7f9db9; --sk-input-radius:0px; --sk-input-shadow:inset 1px 1px 1px rgba(0,0,0,.09); --sk-focus:inset -1px 1px #cee7ff,inset 1px 2px #98b8ea,inset -2px 2px #bcd4f6,inset 2px -2px #89ade4; --sk-accent:#0a5bd3; --sk-accent-img:linear-gradient(180deg,#3d93f5,#0a51cf 52%,#0846b0); --sk-accent-text:#ffffff; --sk-scroll-thumb:#c9d7ec; --sk-scroll-track:#eceada; --sk-glass:linear-gradient(180deg,#f6f4ec,#e3dfcc); --sk-band:linear-gradient(180deg,#f8f6ef,#e6e2d1); --sk-notice-bg:linear-gradient(180deg,#ffffe1,#f4f0c8); } /* Der blaue Fensterrahmen von Luna entsteht aus sechs inset-Schatten. */ html[data-skin="winxp"] .shell{ border-radius:8px 8px 0 0; box-shadow: inset -1px -1px #00138c,inset 1px 1px #0831d9, inset -2px -2px #001ea0,inset 2px 2px #166aee, inset -3px -3px #003bda,inset 3px 3px #0855dd, 0 3px 12px rgba(0,20,60,.4); } html[data-skin="winxp"] .shell>header{ background:linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7); border:0; border-top:1px solid #0831d9; border-left:1px solid #0831d9; border-right:1px solid #001ea0; border-radius:8px 8px 0 0; box-shadow:none; color:#ffffff; font-family:'Trebuchet MS',Tahoma,sans-serif; } html[data-skin="winxp"] .brand{color:#ffffff;text-shadow:1px 1px 1px rgba(0,0,0,.5)} html[data-skin="winxp"] .brand-beta{color:#ffe27a} /* Gruppenrahmen: weisse Flaeche, feine Kante, blaue Ueberschrift. */ html[data-skin="winxp"] .tts-block, html[data-skin="winxp"] .lh-group, html[data-skin="winxp"] .pro-plan, html[data-skin="winxp"] .account-plan-overview, html[data-skin="winxp"] .stream-stats-tile, html[data-skin="winxp"] .admin-stat, html[data-skin="winxp"] .message-user-history{ background:#ffffff; border:1px solid #d0d0bf; border-radius:4px; box-shadow:none; } html[data-skin="winxp"] .lh-group-title, html[data-skin="winxp"] .settings-accordion summary{color:#0046d5} html[data-skin="winxp"] .tab.active{ background:linear-gradient(180deg,#ffffff,#f6f3e6 42%,#ece9d8); border-color:#003c74; border-bottom-color:#ece9d8; color:#000000; box-shadow:none; } html[data-skin="winxp"] .lh-set-navbtn.is-active{ background:linear-gradient(180deg,#3d93f5,#0a51cf 52%,#0846b0); border-color:#003c74; color:#ffffff; } /* Der Gruppenrahmen aus XP.css als Kantenbild, nicht als gedehnte Flaeche. */ html[data-skin="winxp"] .subscription-details, html[data-skin="winxp"] .permission-row, html[data-skin="winxp"] .alert-event-card{ background:#ffffff; border-image:url(/assets/skins/windowsxp/groupbox.svg) 2 / 2px / 0 stretch; } /* --- Windows 7: Aero-Glas ------------------------------------------------ */ html[data-skin="win7"]{--sk-kopf:76px} @media(max-width:999px),(orientation:portrait){html[data-skin="win7"]{--sk-kopf:49px}} html[data-skin="win7"] .shell{ background:linear-gradient(180deg, transparent 0 var(--sk-kopf,52px), rgba(238,246,253,.72) var(--sk-kopf,52px), rgba(198,224,248,.66)); } html[data-skin="win7"] .shell>header{ background: linear-gradient(180deg,rgba(255,255,255,.5) 0,rgba(255,255,255,.2) 47%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.16) 100%), linear-gradient(135deg,rgba(255,255,255,.4) 60px,transparent 105px), linear-gradient(225deg,rgba(255,255,255,.4) 60px,transparent 105px), linear-gradient(to right,rgba(255,255,255,.26),rgba(0,0,0,.16),rgba(255,255,255,.18)), rgba(44,104,178,.82); backdrop-filter:blur(22px) saturate(2.1) brightness(1.08); -webkit-backdrop-filter:blur(22px) saturate(2.1) brightness(1.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), inset 0 1px 0 rgba(255,255,255,.9), 0 0 18px rgba(120,190,255,.45); } /* Schwebende Flaechen sind in Aero ebenfalls Glas. */ html[data-skin="win7"] .pro-card, html[data-skin="win7"] .mobile-options-card, html[data-skin="win7"] .confirm-card, html[data-skin="win7"] .message-actions-card, html[data-skin="win7"] .emote-picker, html[data-skin="win7"] .chat-switcher, html[data-skin="win7"] .collab-menu, html[data-skin="win7"] .mention-picker, html[data-skin="win7"] .install-banner, html[data-skin="win7"] #notice{ background:linear-gradient(180deg,rgba(252,253,255,.9),rgba(226,239,251,.86)); backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5); box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 10px 34px rgba(6,32,58,.34); } /* Der Ring um das Fenster: dunkle Kante, heller Grat, blauer Schein. */ html[data-skin="win7"] .shell{ box-shadow: 0 0 0 1px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.7), 0 0 22px 2px rgba(90,170,240,.34), 0 6px 20px 2px rgba(0,0,0,.3); } /* ========================================================================== 7. NACHZUEGLER Diese Stellen behielten ihre dunklen Flaechen aus app.css. Gefunden nicht durch Hinsehen, sondern indem alle Elemente in den Einstellungen auf eine dunkle Flaeche bei hellem Skin geprueft wurden. ========================================================================== */ /* Die Schliessen-Knoepfe haengen an IDs. Eine ID schlaegt jede Klassenregel, deshalb blieben sie dunkelblau stehen - auch im hellen Skin. */ html[data-skin] #mobile-options-close, html[data-skin] #message-actions-close, html[data-skin] #clip-modal-close, html[data-skin] #mobile-channel-close, html[data-skin] #mobile-live-ops-close, html[data-skin] #confirm-cancel, html[data-skin] #account-delete-close, html[data-skin] #kick-connect-close{ background:var(--sk-tab-img,var(--sk-btn-img))!important; border:1px solid var(--sk-tab-line,var(--sk-btn-line)); border-radius:var(--sk-btn-radius); color:var(--sk-tab-text,var(--sk-btn-text))!important; } html[data-skin] #mobile-options-close:hover, html[data-skin] #message-actions-close:hover, html[data-skin] #clip-modal-close:hover, html[data-skin] #mobile-channel-close:hover, html[data-skin] #mobile-live-ops-close:hover{ background:var(--sk-tab-hover-img,var(--sk-btn-hover-img)); border-color:var(--sk-tab-hover-line,var(--sk-btn-line)); } /* Vorschlaege beim Hinzufuegen eines Channels sind Listenzeilen, keine Hauptknoepfe. In Vollviolett war weder der Name noch die Plattform lesbar. */ html[data-skin] .channel-suggestion, html[data-skin] .follow-row, html[data-skin] .chat-switcher-row, html[data-skin] .collab-row, html[data-skin] .admin-member, html[data-skin] .mobile-options-list a, html[data-skin] .highlight-center-row{ background:var(--sk-tab-img,var(--sk-btn-img)); border:1px solid var(--sk-tab-line,var(--sk-btn-line)); color:var(--sk-tab-text,var(--sk-btn-text)); } /* Auch die Reiter in der Kanalleiste tragen den Plattformstreifen. Bisher gab es ihn nur in der Verwaltung und beim Hinzufuegen; auf der Hauptseite war nicht zu sehen, welcher Kanal von Kick kommt. */ /* Auf dem ausgewaehlten Reiter liegt die Akzentfarbe direkt neben dem Plattformstreifen - Violett auf Violett. Ein zwei Pixel schmaler Spalt in der Flaechenfarbe trennt beide sichtbar voneinander. */ html[data-skin] .channelbar .tab[data-platform="twitch"]{ border-left:5px solid #a970ff; box-shadow:inset 2px 0 0 var(--sk-panel),var(--sk-tab-shadow,var(--sk-btn-shadow)); } html[data-skin] .channelbar .tab[data-platform="kick"]{ border-left:5px solid #53fc18; box-shadow:inset 2px 0 0 var(--sk-panel),var(--sk-tab-shadow,var(--sk-btn-shadow)); } /* Text in den uebrigen Modalen, der noch die hellen Farben aus app.css trug. Gefunden, nachdem die Pruefung auch Verlaufsflaechen mitrechnet - vorher hatte sie genau diese Stellen uebersprungen. */ html[data-skin] .account-delete-confirm, html[data-skin] .account-delete-list, html[data-skin] .account-delete-billing, html[data-skin] .account-delete-section, html[data-skin] .follow-label, html[data-skin] .follow-kick-note, html[data-skin] .follow-empty, html[data-skin] .follow-info, html[data-skin] .mobile-channel-hint, html[data-skin] .twitch-session-steps, html[data-skin] .chat-assets-loader strong, html[data-skin] .chat-assets-loader span, html[data-skin] .app-boot-card strong, html[data-skin] .app-boot-card span{color:var(--sk-text)} /* Beide setzt app.css mit !important; ohne dasselbe Gewicht blieben sie dunkelblau mit heller Schrift auf heller Flaeche stehen. */ html[data-skin] .twitch-session-cancel, html[data-skin] .withdraw-action{ background:var(--sk-tab-img,var(--sk-btn-img))!important; border:1px solid var(--sk-tab-line,var(--sk-btn-line)); color:var(--sk-tab-text,var(--sk-btn-text))!important; } /* Der Hinweis zu Kick traegt seine Bedeutung im gruenen Streifen, nicht in einer dunkelgruenen Flaeche - auf hellem Grund war sie unlesbar. */ html[data-skin] .follow-label, html[data-skin] .follow-kick-note{ background:var(--sk-panel-2); border-color:var(--sk-line); } html[data-skin] .follow-kick-note{border-left:4px solid #53fc18} /* Die Plakette in der Bereichsliste traegt bei der Horde ein dunkles Rot; darauf braucht das Zeichen mehr Helligkeit. */ html[data-skin="horde"] .lh-set-ico{color:#ffe9df} /* Der gruene Kick-Knopf hatte die Linkfarbe geerbt: Hellblau auf Gruen. */ html[data-skin] .kick-connect-button, html[data-skin] .button-kick{color:#ffffff;text-shadow:0 1px 2px rgba(0,0,0,.45)} /* Text in der Nachrichten-Karte kam noch aus app.css. */ html[data-skin] .message-actions-card strong, html[data-skin] .message-actions-card label, html[data-skin] .message-actions-card label span, html[data-skin] .message-user-history>strong{color:var(--sk-text)} /* Der farbige Streifen links sagt, zu welcher Plattform die Zeile gehoert. Meine Kurzschrift fuer den Rahmen hatte ihn ueberschrieben. Er kommt zurueck und breiter als vorher, damit man ihn auf einen Blick sieht. */ html[data-skin] .channel-suggestion[data-platform="twitch"], html[data-skin] .channel-manager-row[data-platform="twitch"], html[data-skin] .follow-row[data-platform="twitch"]{border-left:4px solid #a970ff} html[data-skin] .channel-suggestion[data-platform="kick"], html[data-skin] .channel-manager-row[data-platform="kick"], html[data-skin] .follow-row[data-platform="kick"]{border-left:4px solid #53fc18} /* Die laufende Zeile im Chat-Auswahlmenue. Meine Regel fuer die Listenzeilen hatte ihre Hervorhebung mit ueberschrieben; zurueck kommt sie in der Flaeche der uebrigen Zeilen, markiert durch einen Akzentbalken. Die volle Akzentflaeche ging nicht: der Kanalname traegt eine Inline-Farbe, die sich ohne !important nicht anpassen laesst - auf hellem Violett war er weg. */ html[data-skin] .chat-switcher-row.is-current{ background:var(--sk-tab-hover-img,var(--sk-btn-hover-img)); border-color:var(--sk-line-strong); box-shadow:inset 4px 0 0 var(--sk-accent); } html[data-skin] .chat-switcher-row.is-current span, html[data-skin] .chat-switcher-row.is-current small{color:var(--sk-text)} html[data-skin] .channel-suggestion:hover, html[data-skin] .follow-row:hover, html[data-skin] .chat-switcher-row:hover, html[data-skin] .mobile-options-list a:hover{ background:var(--sk-tab-hover-img,var(--sk-btn-hover-img)); border-color:var(--sk-tab-hover-line,var(--sk-btn-line)); } /* Die Zeichen in der Titelleiste sind keine Knoepfe mit Flaeche. Vorher bekamen sie die dunkle Schrift der Hauptknoepfe - auf dunkler Leiste also fast unsichtbar - und trugen den blauen Rahmen aus app.css. Jetzt sind sie schlicht: Zeichen in der Farbe der Leiste, Rahmen erst beim Zeigen. */ html[data-skin] .shell>header button, html[data-skin] .shell>header a, html[data-skin] .shell>header .discord-support, html[data-skin] .shell>header .mobile-options-button{ background:transparent; border:1px solid transparent; border-radius:9px; box-shadow:none; color:var(--sk-title-text,var(--sk-text)); } html[data-skin] .shell>header button:hover, html[data-skin] .shell>header a:hover, html[data-skin] .shell>header .discord-support:hover, html[data-skin] .shell>header .mobile-options-button:hover{ background:rgba(255,255,255,.14); border-color:var(--sk-line); color:var(--sk-title-text,var(--sk-text)); } html[data-skin] .shell>header .brand{background:none;border:0} /* Weitere Flaechen, die noch aus app.css kamen. */ html[data-skin] .active-channel-summary, html[data-skin] .alert-source-settings, html[data-skin] .livehub-changelog-body, html[data-skin] .livehub-version-block, html[data-skin] .plan-primary-actions>a, html[data-skin] .withdraw-action{ background:var(--sk-panel-2); border-color:var(--sk-line); color:var(--sk-text); } html[data-skin] .plan-primary-actions>a{color:var(--sk-link)} html[data-skin] .platform-link[data-connected="true"] .platform-link-action, html[data-skin] .platform-link[data-platform="twitch"] .platform-link-action, html[data-skin] .platform-link[data-platform="kick"] .platform-link-action{color:var(--sk-link)} html[data-skin] .active-channel-summary span, html[data-skin] .alert-template-vars b, html[data-skin] .tts-hint b, html[data-skin] .creator-setup-status{color:var(--sk-text)} html[data-skin] .role-summary span, html[data-skin] .chat-switcher-row span, html[data-skin] .chat-switcher-row small, html[data-skin] .channel-suggestion span, html[data-skin] .follow-row span{color:var(--sk-text-dim)} /* app.css setzt diese Farbe mit !important; ohne dasselbe Gewicht bliebe helles Blau auf heller Flaeche stehen. */ html[data-skin] .creator-setup-status{color:var(--sk-text-dim)!important} html[data-skin] .withdraw-action{ background:var(--sk-tab-img,var(--sk-btn-img)); border:1px solid var(--sk-tab-line,var(--sk-btn-line)); color:var(--sk-tab-text,var(--sk-btn-text)); } /* Das Zeichen in der Bereichsliste ist eine farbige Plakette; sie soll die Akzentfarbe des Skins tragen, nicht das Violett des Standards. */ html[data-skin] .lh-set-ico{ background:var(--sk-accent); color:var(--sk-accent-text); } /* Fettschrift in den Einstellungen behielt stellenweise die helle Farbe. */ html[data-skin] .mobile-options-card strong, html[data-skin] .mobile-options-card h4, html[data-skin] .mobile-options-card h3{color:var(--sk-text)} html[data-skin] .mobile-options-card .chat-user, html[data-skin] .mobile-options-card .tab strong{color:inherit} /* ========================================================================== 4. SKIN-AUSWAHL IN DEN EINSTELLUNGEN Die Auswahl selbst ist Teil der App und muss in jedem Skin funktionieren - deshalb steht sie ausserhalb der html[data-skin]-Bindung. Sie erbt Farben aus den vorhandenen Klassen und bringt nur ihr eigenes Raster mit. ========================================================================== */ .skin-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:9px;margin-top:8px} .skin-option{ display:grid; grid-template-rows:auto auto auto; gap:6px; padding:9px; border:1px solid #22527d; border-radius:10px; background:#0d2843; color:#dceaf7; text-align:left; cursor:pointer; } .skin-option:hover{border-color:#4aa3ff} .skin-option[aria-pressed="true"]{border-color:#a970ff;box-shadow:0 0 0 2px rgba(169,112,255,.35)} .skin-option strong{font-size:.86rem} .skin-option small{color:#9fbcd6;font-size:.72rem;line-height:1.35} /* Kleine Vorschau aus denselben Verlaeufen wie der Skin selbst. */ .skin-swatch{display:grid;grid-template-rows:11px 1fr;height:46px;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:6px} .skin-swatch i{display:block} .skin-swatch-standard i:first-child{background:linear-gradient(180deg,#0e2a45,#071827)} .skin-swatch-standard i:last-child{background:radial-gradient(circle at 50% -30%,#123966,transparent 70%),#040912} .skin-swatch-win7 i:first-child{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(196,225,248,.7))} .skin-swatch-win7 i:last-child{background:linear-gradient(180deg,#f6fbff,#cfe4f7)} .skin-swatch-winxp i:first-child{background:linear-gradient(180deg,#3d93f5,#0a51cf)} .skin-swatch-winxp i:last-child{background:linear-gradient(180deg,#f8f6ef,#e3dfcc)} .skin-swatch-horde i:first-child{background:linear-gradient(180deg,#4a2420,#170f0e)} .skin-swatch-horde i:last-child{background:linear-gradient(180deg,#2c2422,#090706)} .skin-swatch-alliance i:first-child{background:linear-gradient(180deg,#2d456e,#101a2b)} .skin-swatch-alliance i:last-child{background:linear-gradient(180deg,#1d2b48,#080d18)} .skin-swatch-poe i:first-child{background:linear-gradient(180deg,#2e2618,#0b0906)} .skin-swatch-poe i:last-child{background:linear-gradient(180deg,#1c1813,#060504)} /* Pro-Fenster: die Aufzaehlung folgt der Schriftfarbe des Skins statt einer festen hellen Farbe. */ html[data-skin] .pro-plan ul{color:var(--sk-text-dim)} /* Clip- und TikTok-Karten: Hover ueber den Rand statt ueber die Flaeche, sonst bricht auf hellen Skins das Paar aus Flaeche und Schriftfarbe auseinander. */ html[data-skin] .clip-card:hover,html[data-skin] .clip-card:focus-visible{background:var(--sk-panel-2);border-color:var(--sk-focus,var(--sk-line));box-shadow:inset 0 0 0 1px var(--sk-focus,var(--sk-line))}