ui-modules/app-inspector/app/components/config-sensor-table/config-sensor-table.style.less

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you 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.
 */
.config-sensor-grid {
  display: grid;
  grid-template-columns: minmax(max-content,35%) minmax(50%,100%);
  max-width: 100%;
  .grid-row.no-content {
    grid-column-end: span 2;
  }
}


.grid-bordered {
  grid-gap: 1px;
  > * {
    box-shadow: 0 0 0 1px @card-border-color;
    padding: 6px 8px;
  }
  > .grid-header {
    box-shadow: 0 0 0 1px darken(@card-border-color, 10%);
    background: @primary-10;
    vertical-align: bottom;
    font-weight: bold;
    padding: 8px 8px;
  }
  .grid-even {
    background: @primary-5;
  }

  .grid-editable:not(.edit-disabled):after {
    content: '\f040';
    opacity: 0.3;
    width: 1.1em;
    color: @primary-50;
    text-shadow: none;
  }

  .grid-editable {
    border: none;
    display: flex;
    justify-content: space-between;
    width: 100%;
    //padding: 8px;

    &:hover {
      background: fade(@primary-50, 10%);

      &:after {
        opacity: 1.0;
      }
    }
  }
}


.config-sensor-table {
  table {
//    table-layout: fixed;
  }
}
.config-value {
 > .content-row {
  display: flex;
  margin-top: -3px;
  margin-bottom: -3px;
  > .content {
    flex: 1 1 auto;
    max-height: 120pt;
    overflow: auto;
    align-self: center;
  }
  > .extras {
    flex: 0 0 auto;
    margin-left: 0.5ex;
    margin-right: -0.6ex;
    button {
      // don't make a huge button, it just makes the table too sparse
      margin-bottom: 0;
      margin-top: 0;
      padding: 3px 6px;
    }
  }

  .copy-btn {
    visibility: hidden;
  }
  .warning-icon {
    position: relative;
    bottom: -2px;
  }

  &:hover .copy-btn {
    visibility: visible !important;
  }
  .literal-lines, .multiline-code {
    white-space: pre;
  }
  .multiline-code {
    .monospace();
  }
 }
 .editable-click, a.editable-click {
   color: inherit;
 }
 .editable-empty, .editable-empty:hover, .editable-empty:focus, a.editable-empty, a.editable-empty:hover, a.editable-empty:focus {
   color: @gray-light;
 }
 .editable-wrap {
   display: flex;
   flex: 1 0 auto;
   .editable-controls {
     display: flex;
     flex: 1 0 auto;
     margin-right: 1ex;
     input {
       height: inherit;
       flex: 1 0 auto;
       padding: 2px 6px;
     }
     .btn {
       padding: 2px 6px;
     }
   }
 }
}

.sensitive-field {
  > .content {
    transition: none;
    text-shadow: rgba(0, 0, 0, 0.95) 10px 0px 10px;
    position: relative;
    left: -10px;
  }
  &.sensitive-field-show {
    > .content {
      transition: text-shadow 800ms ease-in-out;
      text-shadow: rgba(0, 0, 0, 0.95) 10px 0px 0px;
    }
  }
}