github.com/pf-qiu/concourse/v6@v6.7.3-0.20201207032516-1f455d73275f/web/assets/css/dashboard.less (about)

     1  // dashboard.less
     2  
     3  @banner-height: 14px;
     4  @footer-padding: 27px;
     5  @name-padding: 25px;
     6  
     7  .dashboard {
     8    .pipeline-grid {
     9      float: none;
    10      display: flex;
    11      padding: 40px*@scale 72px*@scale;
    12    }
    13  
    14    .pipeline-grid > * {
    15      align-items: initial;
    16    }
    17  
    18    .parallel-grid {
    19      display: flex;
    20      flex-direction: column;
    21      flex-grow: 1;
    22    }
    23  
    24    .serial-grid {
    25      display: flex;
    26      flex-direction: row;
    27      flex-grow: 1;
    28    }
    29  
    30    .node {
    31      flex-grow: 1;
    32      margin: (4px * @scale);
    33      font-size: 0;
    34      display: flex;
    35  
    36      a {
    37        flex-grow: 1;
    38        padding: 0;
    39        margin: 0;
    40      }
    41    }
    42  
    43    .dashboard-team-group {
    44      overflow: hidden;
    45    }
    46  
    47    .dashboard-team-pipelines {
    48      .pipeline-wrapper {
    49        display: flex;
    50      }
    51  
    52      .drop-area {
    53        z-index: -1;
    54  
    55        &.active {
    56          z-index: 2;
    57        }
    58      }
    59    }
    60  
    61    .dashboard-team-header {
    62      background: @grey80;
    63      z-index: 2;
    64      opacity: 0.9;
    65      padding-top: (35px * @scale);
    66      padding-bottom: (35px * @scale);
    67      padding-left: ((50px + @name-padding) * @scale);
    68      width: 100%;
    69    }
    70  
    71    .dashboard-team-name {
    72      font-size: (36px * @scale);
    73      padding-right: 0.5rem;
    74    }
    75  
    76    .card {
    77      .card-header {
    78        position: relative;
    79  
    80        .dashboard-resource-error {
    81          position: absolute;
    82          top: 0;
    83          right: 0;
    84          width: 0;
    85          height: 0;
    86          border-top: 60px*@scale solid @base09;
    87          border-left: 60px*@scale solid transparent;
    88        }
    89      }
    90    }
    91  }
    92  
    93  .dashboard-pipeline-icon {
    94    display: inline-block;
    95    vertical-align: middle;
    96    background-size: contain;
    97    min-width: 40px * @scale;
    98    height: 40px * @scale;
    99    background-repeat: no-repeat;
   100  }
   101  
   102  #search-input-field {
   103    &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
   104      color: @grey30
   105    }
   106  
   107    &::-moz-placeholder { /* Mozilla Firefox 19+ */
   108      color: @grey30;
   109      opacity: 1;
   110    }
   111  
   112    &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   113      color: @grey30;
   114      opacity: 1;
   115    }
   116  
   117    &:-ms-input-placeholder { /* Internet Explorer 10-11 */
   118      color: @grey30;
   119    }
   120  }
   121  
   122  [data-tooltip] {
   123    position: relative;
   124  }
   125  
   126  [data-tooltip]::before,
   127  [data-tooltip]::after {
   128    display: none;
   129    top: ~"calc(50% - 15px)";
   130    pointer-events: none;
   131  }
   132  
   133  [data-tooltip]::before {
   134    position: absolute;
   135    left: 100%;
   136    padding: 12px*@scale 30px*@scale 12px*@scale 12px*@scale;
   137    background-color: black;
   138    content: attr(data-tooltip);
   139    font-size: 26px * @scale;
   140    white-space: nowrap;
   141  
   142    .dashboard-pipeline-header& {
   143      top: -45px;
   144      left: -10px;
   145      font-size: (3em * @scale);
   146      letter-spacing: (0.2em * @scale);
   147      padding: (@name-padding * @scale);
   148    }
   149  }
   150  
   151  [data-tooltip]::after {
   152    position: absolute;
   153    left: ~"calc(100% - 15px)";
   154    width: 0;
   155    border-right: 30px*@scale solid black;
   156    border-top: 30px*@scale solid transparent;
   157    border-bottom: 30px*@scale solid transparent;
   158    content: " ";
   159    font-size: 0;
   160    line-height: 0;
   161  
   162    .dashboard-pipeline-header& {
   163      top: 0;
   164      left: 2px;
   165      border-top: 30px*@scale solid black;
   166      border-left: 30px*@scale solid transparent;
   167      border-right: 30px*@scale solid transparent;
   168    }
   169  }
   170  
   171  [data-tooltip]:hover::before,
   172  [data-tooltip]:hover::after {
   173    display: unset;
   174    z-index: 1;
   175  }