github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/LogLine.scss (about)

     1  // We're using CSS here because thousands of `LogLine` in a view can really slow rendering.
     2  // (styled-components wraps each React component with another, adding non-trivial overhead.)
     3  @import "constants";
     4  
     5  :root {
     6    // to enable easy programmatic control of font scaling, the LogPaneRoot defines
     7    // the absolute font size, and then scaling is controlled via a CSS variable, which
     8    // is attached at the root so that it can be trivially manipulated via JS
     9    // WARNING: this is relied upon by LogsFontSize component!
    10    --log-font-scale: 100%;
    11  }
    12  
    13  .LogLine {
    14    display: flex;
    15    position: relative;
    16    font-size: var(--log-font-scale);
    17  
    18    &.is-highlighted {
    19      background-color: rgba($color-blue, $translucent);
    20    }
    21  
    22    &.is-buildEvent-init {
    23      background-color: $color-gray-30;
    24      text-align: right;
    25      padding-right: $spacing-unit;
    26      border-top: 1px solid rgba($color-gray-50, $translucent);
    27      border-bottom: 1px solid $color-blue-dark;
    28      
    29      &.is-sticky {
    30        position: sticky;
    31        top: 0;
    32        z-index: 1;
    33      }
    34    }
    35    &.is-buildEvent-fallback {
    36      background-color: $color-gray-darker;
    37    }
    38  
    39    &.is-startOfAlert {
    40      margin-top: $spacing-unit * 1.5;
    41    }
    42    &.is-endOfAlert {
    43      padding-bottom: $spacing-unit * 0.5;
    44      margin-bottom: $spacing-unit * 0.5;
    45      border-bottom: 1px solid $color-gray-darker;
    46    }
    47  }
    48  
    49  .LogLine:not(.is-buildEvent) + .LogLine.is-buildEvent {
    50    margin-top: 8px;
    51  }
    52  .LogLine.is-buildEvent + .LogLine:not(.is-buildEvent) > .LogLine-content,
    53  .LogLine.is-buildEvent + .LogLine:not(.is-buildEvent) > .logLinePrefix {
    54    padding-top: 8px;
    55  }
    56  
    57  // Make spacing around "header" text more generous for legibility
    58  // We avoid padding on the parent .LogLine, lest we squish .logLinePrefix
    59  .LogLine.is-buildEvent-init .LogLine-content {
    60    padding-top: 4px;
    61    padding-bottom: 4px;
    62  }
    63  .LogLine:not(.is-buildEvent-fallback) + .LogLine.is-buildEvent-fallback .LogLine-content {
    64    padding-top: 8px;
    65  }
    66  .LogLine.is-buildEvent-fallback .LogLine-content {
    67    padding-bottom: 8px;
    68  }
    69  .LogLine.is-buildEvent-fallback + .LogLine.is-buildEvent-fallback .LogLine-content {
    70    margin-top: -8px;
    71  }
    72  
    73  .LogLine-alertNav {
    74    position: absolute;
    75    display: block;
    76    color: $color-gray-lightest;
    77    position: absolute;
    78    top: $spacing-unit * -1;
    79    left: $spacing-unit * 0.5;
    80    cursor: pointer;
    81    background: transparent;
    82    border: 1px solid transparent;
    83    border-radius: 4px;
    84    transition: color 300ms ease, border-color 300ms ease;
    85    padding: 4px $spacing-unit * 0.25;
    86    
    87    &:hover {
    88      color: $color-blue;
    89      border-color: $color-blue;
    90    }
    91  }
    92  
    93  .logLinePrefix {
    94    user-select: none;
    95    width: $tabnav-width;
    96    box-sizing: border-box;
    97    background-color: $color-gray-darker;
    98    color: $color-gray-lightest;
    99    padding-left: $spacing-unit * 0.5;
   100    padding-right: $spacing-unit * 0.5;
   101    text-align: right;
   102    flex-shrink: 0;
   103    
   104    // Truncate long text:
   105    text-overflow: ellipsis;
   106    overflow: hidden;
   107    white-space: nowrap;
   108  
   109    .LogLine.is-contextChange > & {
   110      // Border shouldn't add height:
   111      margin-top: -$logLine-separator-height;
   112      border-top: $logLine-separator-height solid $color-gray-30;
   113    }
   114    .LogLine.is-buildEvent-init > & {
   115      visibility: hidden;
   116    }
   117  }
   118  
   119  
   120  .LogLine-content {
   121    white-space: pre-wrap;
   122    padding-left: $spacing-unit * 0.6;
   123    flex: 1;
   124    border-left: $logLine-separator-height solid $color-gray-30;
   125    overflow-wrap: anywhere;
   126  
   127    // A left border draws your eye to notable log lines
   128    // Placed right of the prefix, so it's always just next to the log text
   129    .LogLine.is-warning & {
   130      border-left: $logLine-gutter-width solid $color-yellow;
   131    }
   132    .LogLine.is-error & {
   133      border-left: $logLine-gutter-width solid $color-red;
   134    }
   135    .LogLine.is-buildEvent-fallback & {
   136      border-left: $logLine-gutter-width solid $color-blue-dark;
   137    }
   138  }