/* ===================================================================== 75-sp-tool-icons.css — Werkzeug-Icons der eInvoice-Familie ( seit 2.6.3 ) Setzt das Icon des jeweiligen Werkzeugs einheitlich in ein helles, eckiges Kästchen. Es wird kein Seiteninhalt geändert: Welches Icon erscheint, ergibt sich - bei Karten ( .spu-card, .sp-card ) aus dem Link in der Karte, - im Werkzeug-Raster ( Icon Grid mit spu-icongrid ) aus dem Titel, - bei den Bereichskarten der Startseite ( .eth-c ) aus dem Bereich. Die Icons liegen als SVG unter assets/img/tools/. Später stehende Regeln gewinnen, deshalb stehen allgemeine Begriffe ( viewer ) vor genauen ( hybrid-check ). Karten ohne passenden Begriff bleiben, wie sie sind. ===================================================================== */ /* Karten: Icon nach Link */ #top :is(.spu-card, .sp-card):has(a[href*="viewer"]) { --sp-ti: url("../img/tools/viewer.svg"); } #top :is(.spu-card, .sp-card):has(a[href*="validator"]) { --sp-ti: url("../img/tools/check.svg"); } #top :is(.spu-card, .sp-card):has(a[href*="explorer"]) { --sp-ti: url("../img/tools/magnifier.svg"); } #top :is(.spu-card, .sp-card):has(a[href*="bundle"]) { --sp-ti: url("../img/tools/bundle.svg"); } #top :is(.spu-card, .sp-card):has(a[href*="technical-details"]) { --sp-ti: url("../img/tools/code.svg"); } #top :is(.spu-card, .sp-card):has(a[href*="visualizer"]) { --sp-ti: url("../img/tools/eye.svg"); } #top :is(.spu-card, .sp-card):has(a[href*="extended-profiles"]) { --sp-ti: url("../img/tools/layers.svg"); } #top :is(.spu-card, .sp-card):has(a[href*="inbound-check"]) { --sp-ti: url("../img/tools/inbound.svg"); } #top :is(.spu-card, .sp-card):has(a[href*="identifier-check"]) { --sp-ti: url("../img/tools/hash.svg"); } #top :is(.spu-card, .sp-card):has(a[href*="hybrid-check"]) { --sp-ti: url("../img/tools/hybrid.svg"); } #top :is(.spu-card, .sp-card):has(a[href*="epc-qr"]) { --sp-ti: url("../img/tools/epc.svg"); } #top :is(.spu-card, .sp-card):has(a[href*="invoice-monitor"]) { --sp-ti: url("../img/tools/pulse.svg"); } #top :is(.spu-card, .sp-card):has(a[href*="editor"]) { --sp-ti: url("../img/tools/pencil.svg"); } #top :is(.spu-card, .sp-card):has(a[href*="mailer"]) { --sp-ti: url("../img/tools/mail.svg"); } #top :is(.spu-card, .sp-card):has(a[href*="exporter"]) { --sp-ti: url("../img/tools/export.svg"); } #top :is(.spu-card, .sp-card):has(a[href*="ksef"]) { --sp-ti: url("../img/tools/flag_pl.svg"); } #top :is(.spu-card, .sp-card):has(a[href*="fatturapa"]) { --sp-ti: url("../img/tools/flag_it.svg"); } #top :is(.spu-card, .sp-card):has(a[href*="scenario-studio"]) { --sp-ti: url("../img/tools/play.svg"); } #top :is(.spu-card, .sp-card):has(a[href*="invoice-approval"]) { --sp-ti: url("../img/tools/stamp.svg"); } #top :is(.spu-card, .sp-card):has(a[href*="viewer"], a[href*="validator"], a[href*="explorer"], a[href*="bundle"], a[href*="technical-details"], a[href*="visualizer"], a[href*="extended-profiles"], a[href*="inbound-check"], a[href*="identifier-check"], a[href*="hybrid-check"], a[href*="epc-qr"], a[href*="invoice-monitor"], a[href*="editor"], a[href*="mailer"], a[href*="exporter"], a[href*="ksef"], a[href*="fatturapa"], a[href*="scenario-studio"], a[href*="invoice-approval"])::before { content: ""; display: block; visibility: visible; overflow: visible; width: 72px; height: 72px; margin: 0 0 18px; background: #F3F4F6 var(--sp-ti) center / 52px 52px no-repeat; border: 1px solid var(--sp-rule, #D5D8DE); } /* Werkzeug-Raster ( Icon Grid ): Icon nach Titel */ #top .spu-icongrid .avia-icongrid-icon:has(+ header[aria-label*="viewer" i]) { --sp-ti: url("../img/tools/viewer.svg"); } #top .spu-icongrid .avia-icongrid-icon:has(+ header[aria-label*="validator" i]) { --sp-ti: url("../img/tools/check.svg"); } #top .spu-icongrid .avia-icongrid-icon:has(+ header[aria-label*="explorer" i]) { --sp-ti: url("../img/tools/magnifier.svg"); } #top .spu-icongrid .avia-icongrid-icon:has(+ header[aria-label*="bundle" i]) { --sp-ti: url("../img/tools/bundle.svg"); } #top .spu-icongrid .avia-icongrid-icon:has(+ header[aria-label*="technical details" i]) { --sp-ti: url("../img/tools/code.svg"); } #top .spu-icongrid .avia-icongrid-icon:has(+ header[aria-label*="visualizer" i]) { --sp-ti: url("../img/tools/eye.svg"); } #top .spu-icongrid .avia-icongrid-icon:has(+ header[aria-label*="extended profiles" i]) { --sp-ti: url("../img/tools/layers.svg"); } #top .spu-icongrid .avia-icongrid-icon:has(+ header[aria-label*="inbound check" i]) { --sp-ti: url("../img/tools/inbound.svg"); } #top .spu-icongrid .avia-icongrid-icon:has(+ header[aria-label*="identifier check" i]) { --sp-ti: url("../img/tools/hash.svg"); } #top .spu-icongrid .avia-icongrid-icon:has(+ header[aria-label*="hybrid check" i]) { --sp-ti: url("../img/tools/hybrid.svg"); } #top .spu-icongrid .avia-icongrid-icon:has(+ header[aria-label*="epc qr" i]) { --sp-ti: url("../img/tools/epc.svg"); } #top .spu-icongrid .avia-icongrid-icon:has(+ header[aria-label*="invoice monitor" i]) { --sp-ti: url("../img/tools/pulse.svg"); } #top .spu-icongrid .avia-icongrid-icon:has(+ header[aria-label*="editor" i]) { --sp-ti: url("../img/tools/pencil.svg"); } #top .spu-icongrid .avia-icongrid-icon:has(+ header[aria-label*="mailer" i]) { --sp-ti: url("../img/tools/mail.svg"); } #top .spu-icongrid .avia-icongrid-icon:has(+ header[aria-label*="exporter" i]) { --sp-ti: url("../img/tools/export.svg"); } #top .spu-icongrid .avia-icongrid-icon:has(+ header[aria-label*="ksef" i]) { --sp-ti: url("../img/tools/flag_pl.svg"); } #top .spu-icongrid .avia-icongrid-icon:has(+ header[aria-label*="fatturapa" i]) { --sp-ti: url("../img/tools/flag_it.svg"); } #top .spu-icongrid .avia-icongrid-icon:has(+ header[aria-label*="scenario studio" i]) { --sp-ti: url("../img/tools/play.svg"); } #top .spu-icongrid .avia-icongrid-icon:has(+ header[aria-label*="invoice approval" i]) { --sp-ti: url("../img/tools/stamp.svg"); } #top .spu-icongrid .avia-icongrid-icon:has(+ :is(header[aria-label*="viewer" i], header[aria-label*="validator" i], header[aria-label*="explorer" i], header[aria-label*="bundle" i], header[aria-label*="technical details" i], header[aria-label*="visualizer" i], header[aria-label*="extended profiles" i], header[aria-label*="inbound check" i], header[aria-label*="identifier check" i], header[aria-label*="hybrid check" i], header[aria-label*="epc qr" i], header[aria-label*="invoice monitor" i], header[aria-label*="editor" i], header[aria-label*="mailer" i], header[aria-label*="exporter" i], header[aria-label*="ksef" i], header[aria-label*="fatturapa" i], header[aria-label*="scenario studio" i], header[aria-label*="invoice approval" i])) { width: 72px; height: 72px; background: #F3F4F6 var(--sp-ti) center / 52px 52px no-repeat; border: 1px solid var(--sp-rule, #D5D8DE); } #top .spu-icongrid .avia-icongrid-icon:has(+ :is(header[aria-label*="viewer" i], header[aria-label*="validator" i], header[aria-label*="explorer" i], header[aria-label*="bundle" i], header[aria-label*="technical details" i], header[aria-label*="visualizer" i], header[aria-label*="extended profiles" i], header[aria-label*="inbound check" i], header[aria-label*="identifier check" i], header[aria-label*="hybrid check" i], header[aria-label*="epc qr" i], header[aria-label*="invoice monitor" i], header[aria-label*="editor" i], header[aria-label*="mailer" i], header[aria-label*="exporter" i], header[aria-label*="ksef" i], header[aria-label*="fatturapa" i], header[aria-label*="scenario studio" i], header[aria-label*="invoice approval" i])) .icongrid-char { display: none; } /* Bereichskarten der Startseite ( einvoiceTools.de ): Icon nach Bereich */ #top .eth-c:has(> :is(.eth-shot[href="/viewer/"], .eth-shot[href="/en/viewers/"])) { --sp-ti: url("../img/tools/viewer.svg"); } #top .eth-c:has(> :is(.eth-shot[href="/inbound/"], .eth-shot[href="/en/incoming/"])) { --sp-ti: url("../img/tools/inbound.svg"); } #top .eth-c:has(> :is(.eth-shot[href="/outbound/"], .eth-shot[href="/en/outgoing/"])) { --sp-ti: url("../img/tools/send.svg"); } #top .eth-c:has(> :is(.eth-shot[href="/validierung/"], .eth-shot[href="/en/validation/"])) { --sp-ti: url("../img/tools/check.svg"); } #top .eth-c:has(> :is(.eth-shot[href="/api/"], .eth-shot[href="/en/rest-api/"])) { --sp-ti: url("../img/tools/braces.svg"); } #top .eth-c:has(> :is(.eth-shot[href="/viewer/"], .eth-shot[href="/en/viewers/"], .eth-shot[href="/inbound/"], .eth-shot[href="/en/incoming/"], .eth-shot[href="/outbound/"], .eth-shot[href="/en/outgoing/"], .eth-shot[href="/validierung/"], .eth-shot[href="/en/validation/"], .eth-shot[href="/api/"], .eth-shot[href="/en/rest-api/"])) .eth-k > span { display: inline-block; width: 40px; height: 40px; background: #F3F4F6 var(--sp-ti) center / 30px 30px no-repeat; border: 1px solid var(--sp-rule, #D5D8DE); border-radius: 0; vertical-align: middle; } #top .eth-c:has(> :is(.eth-shot[href="/viewer/"], .eth-shot[href="/en/viewers/"], .eth-shot[href="/inbound/"], .eth-shot[href="/en/incoming/"], .eth-shot[href="/outbound/"], .eth-shot[href="/en/outgoing/"], .eth-shot[href="/validierung/"], .eth-shot[href="/en/validation/"], .eth-shot[href="/api/"], .eth-shot[href="/en/rest-api/"])) .eth-k > span svg { display: none; }