ui/src/assets/widgets/virtual_table.scss

// Copyright (C) 2024 The Android Open Source Project
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

@use "sass:math";
@import "theme";

// Adding these to a new layer makes other rules take precedence
@layer widgets {
  .pf-vtable {
    overflow: auto;
    font-family: $pf-font;
    position: relative;
    background: white; // Performance tweak - see b/335451611

    .pf-vtable-content {
      display: inline-flex;
      flex-direction: column;
      min-width: 100%;

      .pf-vtable-header {
        font-weight: bold;
        position: sticky;
        top: 0;
        z-index: 1;
        background: white;
        white-space: nowrap;
        padding-inline: 4px;

        // A shadow improves distinction between header and content
        box-shadow: #0001 0px 0px 8px;
      }

      .pf-vtable-data {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 8px;
        display: inline-block;
      }

      .pf-vtable-slider {
        overflow: hidden;

        // Necessary trig because we have a 45deg stripes
        $pattern-density: 1px * math.sqrt(2);
        $pattern-col: #ddd;
        overflow: hidden;

        background: repeating-linear-gradient(
          -45deg,
          $pattern-col,
          $pattern-col $pattern-density,
          white $pattern-density,
          white $pattern-density * 2
        );

        .pf-vtable-puck {
          .pf-vtable-row {
            white-space: nowrap;
            padding-inline: 4px;

            &:nth-child(odd) {
              background-color: hsl(214, 22%, 95%);
            }

            &:nth-child(even) {
              background-color: white;
            }

            &:hover {
              background-color: $table-hover-color;
            }
          }
        }
      }
    }
  }
}