src/third_party/trace-viewer/third_party/tvcm/src/tvcm/ui/overlay.html

   1 <!--
   2 Copyright (c) 2013 The Chromium Authors. All rights reserved.
   3 Use of this source code is governed by a BSD-style license that can be
   4 found in the LICENSE file.
   5 -->
   6
   7 <template id="overlay-template">
   8   <style>
   9     overlay-mask {
  10       left: 0;
  11       padding: 8px;
  12       position: absolute;
  13       top: 0;
  14       z-index: 1000;
  15       font-family: sans-serif;
  16       -webkit-justify-content: center;
  17       background: rgba(0, 0, 0, 0.8);
  18       display: -webkit-flex;
  19       height: 100%;
  20       left: 0;
  21       position: fixed;
  22       top: 0;
  23       width: 100%;
  24     }
  25     overlay-mask:focus {
  26       outline: none;
  27     }
  28     overlay-vertical-centering-container {
  29       -webkit-justify-content: center;
  30       -webkit-flex-direction: column;
  31       display: -webkit-flex;
  32     }
  33     overlay-frame {
  34       z-index: 1100;
  35       background: rgb(255, 255, 255);
  36       border: 1px solid #ccc;
  37       margin: 75px;
  38       display: -webkit-flex;
  39       -webkit-flex-direction: column;
  40     }
  41     title-bar {
  42       -webkit-align-items: center;
  43       -webkit-flex-direction: row;
  44       border-bottom: 1px solid #ccc;
  45       background-color: #ddd;
  46       display: -webkit-flex;
  47       padding: 5px;
  48       -webkit-flex: 0 0 auto;
  49     }
  50     title {
  51       display: inline;
  52       font-weight: bold;
  53       -webkit-box-flex: 1;
  54       -webkit-flex: 1 1 auto;
  55     }
  56     close-button {
  57       -webkit-align-self: flex-end;
  58       border: 1px solid #eee;
  59       background-color: #999;
  60       font-size: 10pt;
  61       font-weight: bold;
  62       padding: 2px;
  63       text-align: center;
  64       width: 16px;
  65     }
  66     close-button:hover {
  67       background-color: #ddd;
  68       border-color: black;
  69       cursor: pointer;
  70     }
  71     overlay-content {
  72       display: -webkit-flex;
  73       -webkit-flex: 1 1 auto;
  74       -webkit-flex-direction: column;
  75       overflow-y: auto;
  76       padding: 10px;
  77       min-width: 300px;
  78     }
  79     button-bar {
  80       -webkit-flex-direction: row;
  81       border-top: 1px solid #ccc;
  82       display: -webkit-flex;
  83       padding:4px;
  84       -webkit-align-items: baseline;
  85       -webkit-flex: 0 0 auto;
  86     }
  87     button-bar > padding {
  88       -webkit-box-flex: 1;
  89       -webkit-flex: 1 1 auto;
  90     }
  91     button-bar > left-buttons,
  92     button-bar > right-buttons {
  93       display: -webkit-flex;
  94       -webkit-flex-direction: row;
  95     }
  96   </style>
  97
  98   <overlay-mask>
  99     <overlay-vertical-centering-container>
 100       <overlay-frame>
 101         <title-bar>
 102           <title></title>
 103           <close-button>&#x2715</close-button>
 104         </title-bar>
 105         <overlay-content>
 106           <content></content>
 107         </overlay-content>
 108         <button-bar>
 109           <left-buttons></left-buttons>
 110           <padding></padding>
 111           <right-buttons></right-buttons>
 112         </button-bar>
 113       </overlay-frame>
 114     </overlay-vertical-centering-container>
 115   </overlay-mask>
 116 </template>