front_end/panels/security/ipProtectionView.css

/*
 * Copyright 2025 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

@scope to (devtools-widget > *) {
  :scope {
    width: 100%;
    box-shadow: none;
  }

  .overflow-auto {
    height: 100%;
  }

  .ip-protection {
    display: flex;
    flex-direction: column;
    padding: var(--sys-size-5) var(--sys-size-3) var(--sys-size-5) var(--sys-size-5);
    min-width: fit-content;
    min-height: fit-content;
    height: 100%;
  }

  .header {
    display: flex;
    flex-direction: column;
    gap: var(--sys-size-2);
    padding-left: var(--sys-size-5);
  }

  h1 {
    margin: 0;
    font: var(--sys-typescale-headline4);
  }

  .card-container {
    max-width: 100%;
  }

  .card {
    display: flex;
    flex-direction: column;
    padding: var(--sys-size-6) var(--sys-size-8);
    gap: var(--sys-size-6);

    &.enterprise-disabled {
      color: var(--sys-color-token-subtle);
    }
  }

  .card-header {
    display: flex;
    align-items: center;
  }

  .card-header > .lhs {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: var(--sys-size-9);

    & > devtools-icon {
      height: var(--sys-size-11);
      width: var(--sys-size-11);
    }
  }

  .text {
    display: flex;
    flex-direction: column;
    gap: var(--sys-size-2);
  }

  h2 {
    font: var(--sys-typescale-headline5);
    margin: 0;
  }

  .body {
    font: var(--sys-typescale-body4-regular);
  }

  .card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--sys-size-4);
    padding-bottom: var(--sys-size-4);
    padding-left: var(--sys-size-8);
  }

  h3 {
    font: var(--sys-typescale-body4-medium);
    margin: 0;
  }

  .main-text {
    color: var(--sys-color-on-surface);
  }

  .subtext {
    color: var(--sys-color-on-surface-subtle);
  }

  .empty-report {
    margin: var(--sys-size-5);
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    min-height: fit-content;
    min-width: fit-content;
  }

  devtools-data-grid {
    flex: auto;
  }

  .status-badge {
    display: flex;
    align-items: center;
  }

  .status-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .green-status-icon {
    color: var(--sys-color-green);
  }

  .red-status-icon {
    color: var(--sys-color-error);
  }
}