ensureStyles function ✓ 100.0%

Last updated: 2026-03-04T23:21:38.399Z

Metrics

LOC: 121 Complexity: 2 Params: 0 Coverage: 100.0% (4/4 lines, 0x executed)

Signature

ensureStyles(): : void

Architecture violations

View all

  • [warning] max-lines: 'ensureStyles' has 121 lines (max 80)

Source Code

function ensureStyles(): void {
  if (document.getElementById(STYLE_ID)) return;

  const style = document.createElement("style");
  style.id = STYLE_ID;
  style.textContent = `
    #${CONTAINER_ID} {
      position: fixed;
      bottom: 16px;
      right: 16px;
      z-index: 2147483646;
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      font-size: 12px;
      color: #e2e8f0;
      background: #1e1b4b;
      border: 1px solid rgba(99, 102, 241, 0.4);
      border-radius: 10px;
      padding: 10px 14px;
      min-width: 260px;
      max-width: 360px;
      max-height: 320px;
      overflow-y: auto;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
      transition: opacity 0.3s ease, transform 0.3s ease;
      opacity: 0;
      transform: translateY(12px);
    }
    #${CONTAINER_ID}.fa-progress-visible {
      opacity: 1;
      transform: translateY(0);
    }
    #${CONTAINER_ID} .fa-progress-header {
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 700;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #a5b4fc;
      margin-bottom: 8px;
      padding-bottom: 6px;
      border-bottom: 1px solid rgba(99, 102, 241, 0.2);
    }
    #${CONTAINER_ID} .fa-progress-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 3px 0;
      font-size: 11px;
      line-height: 1.3;
      transition: opacity 0.2s ease;
    }
    #${CONTAINER_ID} .fa-progress-item .fa-progress-icon {
      flex-shrink: 0;
      width: 16px;
      text-align: center;
      font-size: 10px;
    }
    #${CONTAINER_ID} .fa-progress-item .fa-progress-label {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 180px;
    }
    #${CONTAINER_ID} .fa-progress-item .fa-progress-badge {
      flex-shrink: 0;
      font-size: 9px;
      font-weight: 600;
      padding: 1px 5px;
      border-radius: 3px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    #${CONTAINER_ID} .fa-progress-item.detecting .fa-progress-badge {
      background: rgba(99, 102, 241, 0.3);
      color: #a5b4fc;
    }
    #${CONTAINER_ID} .fa-progress-item.detected .fa-progress-badge {
      background: rgba(34, 197, 94, 0.3);
      color: #86efac;
    }
    #${CONTAINER_ID} .fa-progress-item.filling .fa-progress-badge {
      background: rgba(234, 179, 8, 0.3);
      color: #fde047;
    }
    #${CONTAINER_ID} .fa-progress-item.filled .fa-progress-badge {
      background: rgba(34, 197, 94, 0.3);
      color: #86efac;
    }
    #${CONTAINER_ID} .fa-progress-item.error .fa-progress-badge {
      background: rgba(239, 68, 68, 0.3);
      color: #fca5a5;
    }
    #${CONTAINER_ID} .fa-progress-summary {
      margin-top: 8px;
      padding-top: 6px;
      border-top: 1px solid rgba(99, 102, 241, 0.2);
      font-weight: 600;
      font-size: 11px;
      color: #86efac;
    }
    @keyframes fa-spin {
      to { transform: rotate(360deg); }
    }
    #${CONTAINER_ID} .fa-spinner {
      display: inline-block;
      width: 10px;
      height: 10px;
      border: 2px solid rgba(165, 180, 252, 0.3);
      border-top-color: #a5b4fc;
      border-radius: 50%;
      animation: fa-spin 0.6s linear infinite;
    }
    #${CONTAINER_ID} .fa-spinner.ai {
      border-top-color: #fbbf24;
    }
  `;
  document.head.appendChild(style);
}

No outgoing dependencies.

Impact (Incoming)

graph LR ensureStyles["ensureStyles"] showDetectionBadge["showDetectionBadge"] createProgressNotification["createProgressNotification"] showDetectionBadge -->|calls| ensureStyles createProgressNotification -->|calls| ensureStyles style ensureStyles fill:#dbeafe,stroke:#2563eb,stroke-width:2px click ensureStyles "9133434bbe64c3e3.html" click showDetectionBadge "d8265190c1104e79.html" click createProgressNotification "2f3f7f6d24a2f425.html"