go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/milo/frontend/static/buildbot/css/default.css (about)

     1  /* Copyright 2020 The LUCI Authors.
     2  **
     3  ** Licensed under the Apache License, Version 2.0 (the "License");
     4  ** you may not use this file except in compliance with the License.
     5  ** You may obtain a copy of the License at
     6  **
     7  **      http://www.apache.org/licenses/LICENSE-2.0
     8  **
     9  ** Unless required by applicable law or agreed to in writing, software
    10  ** distributed under the License is distributed on an "AS IS" BASIS,
    11  ** WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    12  ** See the License for the specific language governing permissions and
    13  ** limitations under the License.
    14   */
    15  
    16   body.interface {
    17    margin: 0px;
    18    font-family: Verdana, sans-serif;
    19    font-size: 10px;
    20    background-color: #fff;
    21    color: #333;
    22  }
    23  
    24  #main {
    25    margin-left: 30px;
    26    margin-right: 30px;
    27    margin-top: 20px;
    28    margin-bottom: 50px;
    29    padding: 0;
    30  }
    31  
    32  header {
    33    display: flex;
    34    justify-content: space-between;
    35  }
    36  
    37  footer {
    38    clear: both;
    39  }
    40  
    41  .clear {
    42    clear: both;
    43    margin: 0;
    44  }
    45  
    46  .prelude {
    47    float: left;
    48  }
    49  
    50  .main {
    51    float: left;
    52  }
    53  
    54  .epiloge {
    55    clear: both;
    56  }
    57  
    58  .lucy-logo {
    59    width: 4em;
    60    float: left;
    61    margin-right: 10px;
    62  }
    63  
    64  .auth {
    65    position:absolute;
    66    top:5px;
    67    right:40px;
    68  }
    69  
    70  .alert {
    71    color: #c30000;
    72    background-color: #f2dcdc;
    73    padding: 5px 5px 5px 25px;
    74    margin-bottom: 20px;
    75    border-top:1px solid #ccc;
    76    border-bottom:1px solid #ccc;
    77    border-color: #c30000;
    78    font-size: 20px;
    79  }
    80  a:link,a:visited,a:active {
    81    color: #444;
    82  }
    83  
    84  table {
    85    border-spacing: 1px 1px;
    86  }
    87  
    88  table td {
    89    padding: 3px 4px 3px 4px;
    90    text-align: center;
    91  }
    92  
    93  .Project {
    94    min-width: 6em;
    95  }
    96  
    97  .LastBuild,.Activity {
    98    padding: 0 0 0 4px;
    99  }
   100  
   101  .LastBuild,.Activity,.Builder,.BuildStep {
   102    min-width: 5em;
   103  }
   104  
   105  /* Chromium Specific styles */
   106  div.BuildResultInfo {
   107    color: #444;
   108  }
   109  
   110  div.Announcement {
   111    margin-bottom: 1em;
   112  }
   113  
   114  div.Announcement>a:hover {
   115    color: black;
   116  }
   117  
   118  div.Announcement>div.Notice {
   119    background-color: #afdaff;
   120    padding: 0.5em;
   121    font-size: 16px;
   122    text-align: center;
   123  }
   124  
   125  div.Announcement>div.Open {
   126    border: 3px solid #8fdf5f;
   127    padding: 0.5em;
   128    font-size: 16px;
   129    text-align: center;
   130  }
   131  
   132  div.Announcement>div.Closed {
   133    border: 5px solid #e98080;
   134    padding: 0.5em;
   135    font-size: 24px;
   136    font-weight: bold;
   137    text-align: center;
   138  }
   139  
   140  .BuildProperties td.middle {
   141    max-width: 250px;
   142    text-overflow: ellipsis;
   143    overflow: hidden;
   144  }
   145  
   146  td.Time {
   147    color: #000;
   148    border-bottom: 1px solid #aaa;
   149    background-color: #eee;
   150  }
   151  
   152  td.Activity,td.Change,td.Builder {
   153    color: #333333;
   154    background-color: #CCCCCC;
   155  }
   156  
   157  td.Change {
   158    border-radius: 5px;
   159    -webkit-border-radius: 5px;
   160    -moz-border-radius: 5px;
   161  }
   162  
   163  td.Event {
   164    color: #777;
   165    background-color: #ddd;
   166    border-radius: 5px;
   167    -webkit-border-radius: 5px;
   168    -moz-border-radius: 5px;
   169  }
   170  
   171  td.Activity {
   172    border-top-left-radius: 10px;
   173    -webkit-border-top-left-radius: 10px;
   174    -moz-border-radius-topleft: 10px;
   175    min-height: 20px;
   176    padding: 2px 0 2px 0;
   177  }
   178  
   179  td.idle,td.waiting,td.offline,td.building {
   180    border-top-left-radius: 0px;
   181    -webkit-border-top-left-radius: 0px;
   182    -moz-border-radius-topleft: 0px;
   183  }
   184  
   185  .LastBuild {
   186    border-top-left-radius: 5px;
   187    -webkit-border-top-left-radius: 5px;
   188    -moz-border-radius-topleft: 5px;
   189    border-top-right-radius: 5px;
   190    -webkit-border-top-right-radius: 5px;
   191    -moz-border-radius-topright: 5px;
   192  }
   193  
   194  /* Console view styles */
   195  td.DevStatus > table {
   196    table-layout: fixed;
   197  }
   198  
   199  td.DevRev {
   200    padding: 4px 8px 4px 8px;
   201    color: #333333;
   202    border-top-left-radius: 5px;
   203    -webkit-border-top-left-radius: 5px;
   204    -moz-border-radius-topleft: 5px;
   205    background-color: #eee;
   206    width: 1%;
   207  }
   208  
   209  td.DevRevCollapse {
   210    border-bottom-left-radius: 5px;
   211    -webkit-border-bottom-left-radius: 5px;
   212    -moz-border-radius-bottomleft: 5px;
   213  }
   214  
   215  td.DevName {
   216    padding: 4px 8px 4px 8px;
   217    color: #333333;
   218    background-color: #eee;
   219    width: 1%;
   220    text-align: left;
   221  }
   222  
   223  td.DevStatus {
   224    padding: 4px 4px 4px 4px;
   225    color: #333333;
   226    background-color: #eee;
   227  }
   228  
   229  td.first {
   230    border-top-left-radius: 5px;
   231    -webkit-border-top-left-radius: 5px;
   232    -moz-border-radius-topleft: 5px;
   233  }
   234  
   235  td.last {
   236    border-top-right-radius: 5px;
   237    -webkit-border-top-right-radius: 5px;
   238    -moz-border-radius-topright: 5px;
   239  }
   240  
   241  td.DevStatusCategory {
   242    border-radius: 5px;
   243    -webkit-border-radius: 5px;
   244    -moz-border-radius: 5px;
   245    border-width: 1px;
   246    border-style: solid;
   247  }
   248  
   249  td.DevStatusCollapse {
   250    border-bottom-right-radius: 5px;
   251    -webkit-border-bottom-right-radius: 5px;
   252    -moz-border-radius-bottomright: 5px;
   253  }
   254  
   255  td.DevDetails {
   256    font-weight: normal;
   257    padding: 8px 8px 8px 8px;
   258    color: #333333;
   259    background-color: #eee;
   260    text-align: left;
   261  }
   262  
   263  td.DevDetails li a {
   264    padding-right: 5px;
   265  }
   266  
   267  td.DevComment {
   268    font-weight: normal;
   269    padding: 8px 8px 8px 8px;
   270    color: #333333;
   271    background-color: #eee;
   272    text-align: left;
   273  }
   274  
   275  td.DevBottom {
   276    border-bottom-right-radius: 5px;
   277    -webkit-border-bottom-right-radius: 5px;
   278    -moz-border-radius-bottomright: 5px;
   279    border-bottom-left-radius: 5px;
   280    -webkit-border-bottom-left-radius: 5px;
   281    -moz-border-radius-bottomleft: 5px;
   282  }
   283  
   284  td.Alt {
   285    background-color: #ddd;
   286  }
   287  
   288  tr:nth-child(even) {
   289    background-color: #ddd;
   290  }
   291  
   292  li.sublink:nth-child(odd) {
   293    background-color: #eee;
   294  }
   295  
   296  .graph {
   297    width: 200px;
   298    text-align: left;
   299  }
   300  
   301  .bar {
   302    display: inline-block;
   303    height: 10px;
   304    border: 1px solid black;
   305  }
   306  
   307  .idle {
   308    background-color: #8d4;
   309  }
   310  
   311  .busy {
   312    background-color: #fd3;
   313  }
   314  
   315  .quarantined {
   316    background-color: #66c;
   317  }
   318  
   319  .offline {
   320    background-color: #c6c;
   321  }
   322  
   323  .account-picture {
   324    border-radius: 6px;
   325    width: 25px;
   326    height: 25px;
   327    vertical-align: middle;
   328  }
   329  
   330  .legend {
   331    border-radius: 5px !important;
   332    -webkit-border-radius: 5px !important;
   333    -moz-border-radius: 5px !important;
   334    width: 100px;
   335    max-width: 100px;
   336    text-align: center;
   337    padding: 2px 2px 2px 2px;
   338    height: 14px;
   339    white-space: nowrap;
   340  }
   341  
   342  .DevStatusBox {
   343    text-align: center;
   344    height: 20px;
   345    padding: 0 2px;
   346    line-height: 0;
   347    white-space: nowrap;
   348  }
   349  
   350  .DevStatusBox a {
   351    opacity: 0.85;
   352    border-width: 1px;
   353    border-style: solid;
   354    border-radius: 4px;
   355    -webkit-border-radius: 4px;
   356    -moz-border-radius: 4px;
   357    display: block;
   358    width: 90%;
   359    height: 20px;
   360    line-height: 20px;
   361    margin-left: auto;
   362    margin-right: auto;
   363  }
   364  
   365  .DevStatusBox a.notinbuilder {
   366    border-style: none;
   367  }
   368  
   369  a.noround {
   370    border-radius: 0px;
   371    -webkit-border-radius: 0px;
   372    -moz-border-radius: 0px;
   373    position: relative;
   374    margin-top: -8px;
   375    margin-bottom: -8px;
   376    height: 36px;
   377    border-top-width: 0;
   378    border-bottom-width: 0;
   379  }
   380  
   381  a.begin {
   382    border-top-width: 1px;
   383    position: relative;
   384    margin-top: 0px;
   385    margin-bottom: -7px;
   386    height: 27px;
   387    border-top-left-radius: 4px;
   388    -webkit-border-top-left-radius: 4px;
   389    -moz-border-radius-topleft: 4px;
   390    border-top-right-radius: 4px;
   391    -webkit-border-top-right-radius: 4px;
   392    -moz-border-radius-topright: 4px;
   393  }
   394  
   395  a.end {
   396    border-bottom-width: 1px;
   397    position: relative;
   398    margin-top: -7px;
   399    margin-bottom: 0px;
   400    height: 27px;
   401    border-bottom-left-radius: 4px;
   402    -webkit-border-bottom-left-radius: 4px;
   403    -moz-border-radius-bottomleft: 4px;
   404    border-bottom-right-radius: 4px;
   405    -webkit-border-bottom-right-radius: 4px;
   406    -moz-border-radius-bottomright: 4px;
   407  }
   408  
   409  .center_align {
   410    text-align: center;
   411  }
   412  
   413  .right_align {
   414    text-align: right;
   415  }
   416  
   417  .left_align {
   418    text-align: left;
   419  }
   420  
   421  div.BuildWaterfall {
   422    border-radius: 7px;
   423    -webkit-border-radius: 7px;
   424    -moz-border-radius: 7px;
   425    position: absolute;
   426    left: 0px;
   427    top: 0px;
   428    background-color: #FFFFFF;
   429    padding: 4px 4px 4px 4px;
   430    float: left;
   431    display: none;
   432    border-width: 1px;
   433    border-style: solid;
   434  }
   435  
   436  .main-status {
   437    font-weight: bold;
   438  }
   439  
   440  /* LastBuild, BuildStep states */
   441  .success, .status-Success, .status-Idle, .tree-status-open, .status.SUCCESS {
   442    color: #000;
   443    background-color: #8d4;
   444    border-color: #4F8530;
   445  }
   446  
   447  .failure, .status-Failure, .tree-status-closed, .status.FAILURE {
   448    color: #000;
   449    background-color: #e88;
   450    border-color: #A77272;
   451    border-style: solid;
   452  }
   453  
   454  .status-Canceled, .status.CANCELED {
   455    color: #000;
   456    background-color: #8ef;
   457    border-color: #00d8fc;
   458    border-style: solid;
   459  }
   460  
   461  
   462  .failure-again {
   463    color: #000;
   464    background-color: #eA9;
   465    border-color: #A77272;
   466    border-style: solid;
   467  }
   468  
   469  .status-InfraFailure, .status.INFRA_FAILURE {
   470    color: #FFFFFF;
   471    background-color: #c6c;
   472    border-color: #ACA0B3;
   473  }
   474  
   475  .expired, .status-Expired {
   476    color: #FFFFFF;
   477    background-color: #ac39ac;
   478    border-color: #ACA0B3;
   479  }
   480  
   481  .warning, .status-Warning {
   482    color: #FFFFFF;
   483    background-color: #fa3;
   484    border-color: #C29D46;
   485  }
   486  
   487  .skipped {
   488    color: #000;
   489    background: #AADDEE;
   490    border-color: #AADDEE;
   491  }
   492  
   493  .exception, .retry, .status-Exception, .status-Offline, .tree-status-maintenance {
   494    color: #FFFFFF;
   495    background-color: #c6c;
   496    border-color: #ACA0B3;
   497  }
   498  
   499  .status-Quarantined {
   500    color: #FFFFFF;
   501    background-color: #66c;
   502    border-color: #66A0B3;
   503  }
   504  
   505  .start, .status-NotRun, .status.SCHEDULED {
   506    color: #000;
   507    background-color: #ccc;
   508    border-color: #ccc;
   509  }
   510  
   511  .running, .waiting, td.building, .status-Running, .status-Busy, .tree-status-throttled, .status.STARTED {
   512    color: #000;
   513    background-color: #fd3;
   514    border-color: #C5C56D;
   515  }
   516  
   517  .paused {
   518    color: #FFFFFF;
   519    background-color: #8080FF;
   520    border-color: #dddddd;
   521  }
   522  
   523  .offline,td.offline,.pending{
   524    color: #FFFFFF;
   525    background-color: #777777;
   526    border-color: #dddddd;
   527  }
   528  
   529  
   530  .start {
   531    border-bottom-left-radius: 10px;
   532    -webkit-border-bottom-left-radius: 10px;
   533    -moz-border-radius-bottomleft: 10px;
   534    border-bottom-right-radius: 10px;
   535    -webkit-border-bottom-right-radius: 10px;
   536    -moz-border-radius-bottomright: 10px;
   537  }
   538  
   539  .notstarted {
   540    border-width: 1px;
   541    border-style: solid;
   542    border-color: #aaa;
   543    background-color: #fff;
   544  }
   545  
   546  .closed {
   547    background-color: #ff0000;
   548  }
   549  
   550  .closed .large {
   551    font-size: 1.5em;
   552    font-weight: bolder;
   553  }
   554  
   555  td.Project a:hover,td.start a:hover {
   556    color: #000;
   557  }
   558  
   559  .mini-box {
   560    text-align: center;
   561    height: 20px;
   562    padding: 0 2px;
   563    line-height: 0;
   564    white-space: nowrap;
   565  }
   566  
   567  .mini-box a {
   568    border-radius: 0;
   569    -webkit-border-radius: 0;
   570    -moz-border-radius: 0;
   571    display: block;
   572    width: 100%;
   573    height: 20px;
   574    line-height: 20px;
   575    margin-top: -30px;
   576  }
   577  
   578  .mini-closed {
   579    -box-sizing: border-box;
   580    -webkit-box-sizing: border-box;
   581    border: 4px solid red;
   582  }
   583  
   584  /* grid styles */
   585  table.Grid {
   586    border-collapse: collapse;
   587  }
   588  
   589  table.Grid tr td {
   590    padding: 0.2em;
   591    margin: 0px;
   592    text-align: center;
   593  }
   594  
   595  table.Grid tr td.title {
   596    font-size: 90%;
   597    border-right: 1px gray solid;
   598    border-bottom: 1px gray solid;
   599  }
   600  
   601  table.Grid tr td.sourcestamp {
   602    font-size: 90%;
   603  }
   604  
   605  table.Grid tr td.builder {
   606    text-align: right;
   607    font-size: 90%;
   608  }
   609  
   610  table.Grid tr td.build {
   611    border: 1px gray solid;
   612  }
   613  
   614  /* column container */
   615  div.column {
   616    margin: 0 2em 2em 0;
   617    float: left;
   618  }
   619  
   620  /* info tables */
   621  table.info {
   622    border-spacing: 1px;
   623  }
   624  
   625  table.info td {
   626    padding: 0.1em 1em 0.1em 1em;
   627    text-align: center;
   628  }
   629  
   630  table.info th {
   631    padding: 0.2em 1.5em 0.2em 1.5em;
   632    text-align: center;
   633  }
   634  
   635  table.info .left {
   636    text-align: left
   637  }
   638  
   639  td.value {
   640    font-weight: bold;
   641  }
   642  
   643  table.info td .reason {
   644    display:block;
   645    font-weight: bold;
   646  }
   647  
   648  .alt {
   649    background-color: #f6f6f6;
   650  }
   651  
   652  ul.alternating li:nth-child(even) {
   653    background-color: #ddd;
   654  }
   655  
   656  li {
   657    padding: 0.1em 1em 0.1em 1em;
   658  }
   659  
   660  li.substeps > ol {
   661    padding-left: 2em;
   662  }
   663  
   664  li.collapsed ol {
   665    display: none;
   666  }
   667  
   668  li.substeps.collapsed > div.result > b:before {
   669    content: "\25B6";
   670    padding-right: 4px;
   671  }
   672  
   673  li.substeps > div.result > b:before {
   674    content: "\25BC";
   675    padding-right: 4px;
   676  }
   677  
   678  .file {
   679    font-weight: bold;
   680  }
   681  
   682  .result, .errors {
   683    padding: 0.3em 1em 0.3em 1em;
   684  }
   685  
   686  .result li {
   687    padding-left: 0;
   688    padding-right: 0;
   689  }
   690  
   691  .result li p {
   692    margin-top: 0.5em;
   693    margin-bottom: 0.5em;
   694  }
   695  
   696  .ui-tooltip {
   697      white-space: pre-line;
   698      font-size: medium;
   699  }
   700  
   701  /* log view */
   702  .log * {
   703    vlink: #800080;
   704    font-family: "Courier New", courier, monotype, monospace;
   705    font-size: 1.5em;
   706  }
   707  
   708  span.duration {
   709    text-align: right;
   710    float: right;
   711    display: inline-block;
   712  }
   713  
   714  span.stdout {
   715    color: black;
   716  }
   717  
   718  span.stderr {
   719    color: red;
   720  }
   721  
   722  span.header {
   723    color: blue;
   724  }
   725  span.ansi30 {
   726    color: black;
   727  }
   728  span.ansi31 {
   729    color: red;
   730  }
   731  span.ansi32 {
   732    color: green;
   733  }
   734  span.ansi33 {
   735    color: orange;
   736  }
   737  span.ansi34 {
   738    color: yellow;
   739  }
   740  span.ansi35 {
   741    color: purple;
   742  }
   743  span.ansi36 {
   744    color: blue;
   745  }
   746  span.ansi37 {
   747    color: white;
   748  }
   749  span.hidden {
   750    display: none;
   751  }
   752  
   753  /* revision & email */
   754  .revision .full {
   755    display: none;
   756  }
   757  
   758  .user .email {
   759    display: none;
   760  }
   761  
   762  pre {
   763    white-space: pre-wrap;
   764  }
   765  
   766  /* change comments (use regular colors here) */
   767  pre.comments>a:link,pre.comments>a:visited {
   768    color: blue;
   769  }
   770  
   771  pre.comments>a:active {
   772    color: purple;
   773  }
   774  
   775  .project-favicon-text {
   776    width: 150px;
   777    height: 125px;
   778    text-align: center;
   779    font-size: 50pt;
   780    padding-top: 25px;
   781  }
   782  
   783  .project a:link {
   784    text-decoration: none;
   785  }
   786  
   787  .project a:visited {
   788    text-decoration: none;
   789  }
   790  
   791  .project a:hover {
   792    text-decoration: none;
   793  }
   794  
   795  .project a:active {
   796    text-decoration: none;
   797  }
   798  
   799  .project img {
   800    max-width: 140px;
   801    height: 140px;
   802    padding: 5px;
   803    margin-left: auto;
   804    margin-right: auto;
   805    border-radius: 20px;
   806    display: block;
   807  }
   808  
   809  .project:hover {
   810    background: #cce;
   811  }
   812  
   813  .project {
   814    font-size: 10pt;
   815    width: 150px;
   816    height: 200px;
   817    background-color: gray;
   818    margin: 10px;
   819    float: left;
   820    padding: .5em;
   821    background: #ddd;
   822    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .2);
   823    border-radius: 30px 30px 30px 30px;
   824  }
   825  
   826  .project-label {
   827    margin-top: 10px;
   828    text-align: center;
   829  }
   830  
   831  .project-console-item img {
   832    width: 20px;
   833    height: 20px;
   834  }
   835  
   836  .project {
   837    font-size: 10pt;
   838  }
   839  
   840  form.command_forcebuild {
   841    border-top: 1px solid black;
   842    padding: .5em;
   843    margin: .5em;
   844  }
   845  
   846  form.command_forcebuild > .row {
   847    border-top: 1px dotted gray;
   848    padding: .5em 0;
   849  }
   850  
   851  form.command_forcebuild .force-textarea > .label {
   852    display: block;
   853  }
   854  
   855  form.command_forcebuild .force-nested > .label {
   856    font-weight: bold;
   857    display: list-item;
   858  }
   859  
   860  form.command_forcebuild .force-any .force-text {
   861    display: inline;
   862  }
   863  
   864  .summary-markdown h1 {
   865    font-size: 1rem;
   866  }
   867  
   868  .summary-markdown h2 {
   869    font-size: 0.9rem;
   870  }
   871  
   872  .summary-markdown h3 {
   873    font-size: 0.8rem;
   874  }
   875  
   876  .summary-markdown h4 {
   877    font-size: 0.7rem;
   878  }
   879  
   880  .summary-markdown h5 {
   881    font-size: 0.6rem;
   882  }
   883  
   884  .summary-markdown h6 {
   885    font-size: 0.5rem;
   886  }
   887  
   888  div.step-text:first-child {
   889      display: inline;
   890  }
   891  
   892  .non-green li.green {
   893    display: none;
   894  }
   895  
   896  .hide-debug-logs li.debug-log {
   897    display: none;
   898  }
   899  
   900  .critical-NO {
   901    opacity: 0.5;
   902  }
   903  
   904  .canary-warning {
   905    margin: 5px 0;
   906    color: #bb0808;
   907  }
   908  
   909  #opt-in-banner>div {
   910    background-color: #feb;
   911    text-align: center;
   912    padding: 3px;
   913    color: #333;
   914    font-weight: bold;
   915    font-size: 12px;
   916  }
   917  
   918  #opt-in-link {
   919    position: relative;
   920    z-index: 2;
   921  }
   922  
   923  #feedback-bar {
   924    position: absolute;
   925    transition-property: top;
   926    transition-duration: 0.5s;
   927    transition-timing-function: ease;
   928    animation: 0.5s ease-out dropdown;
   929    z-index: 1;
   930    top: 0px;
   931    width: 100%;
   932  }
   933  
   934  #feedback-bar.show {
   935    top: 20px;
   936  }