src/third_party/trace-viewer/trace_viewer/tracing/timeline_view.css

   1 /* Copyright (c) 2013 The Chromium Authors. All rights reserved.
   2  * Use of this source code is governed by a BSD-style license that can be
   3  * found in the LICENSE file.
   4  */
   5
   6 x-timeline-view {
   7   -webkit-flex-direction: column;
   8   cursor: default;
   9   display: -webkit-flex;
  10   font-family: sans-serif;
  11   padding: 0;
  12 }
  13
  14 x-timeline-view > .control > .title {
  15   font-size: 14px;
  16   height: 22px;
  17   padding-left: 2px;
  18   padding-right: 8px;
  19   padding-top: 2px;
  20 }
  21
  22 x-timeline-view > .control {
  23   -webkit-flex: 0 0 auto;
  24   background-color: #e6e6e6;
  25   background-image: -webkit-gradient(linear,
  26                                      0 0,
  27                                      0 100%,
  28                                      from(#E5E5E5),
  29                                      to(#D1D1D1));
  30   border-bottom: 1px solid #8e8e8e;
  31   display: -webkit-flex;
  32   padding-top: 1px;
  33 }
  34
  35 x-timeline-view > .control > #right-controls {
  36   margin-left: auto;
  37 }
  38
  39 x-timeline-view > .control > .controls {
  40   display: -webkit-flex;
  41 }
  42
  43 x-timeline-view > .control > span {
  44   padding-left: 5px;
  45   padding-right: 10px;
  46 }
  47
  48 x-timeline-view > .control > .controls button,
  49 x-timeline-view > .control > .controls label {
  50   font-size: 14px;
  51   height: 22px;
  52   margin: 1px 2px 1px 2px;
  53 }
  54
  55 x-timeline-view > .control > .spacer {
  56   -webkit-flex: 1 1 auto;
  57 }
  58
  59 x-timeline-view > middle-container {
  60   -webkit-flex: 1 1 auto;
  61   -webkit-flex-direction: row;
  62   border-bottom: 1px solid #8e8e8e;
  63   display: -webkit-flex;
  64   min-height: 0;
  65 }
  66
  67 x-timeline-view > middle-container > track-view-container {
  68   -webkit-flex: 1 1 auto;
  69   display: -webkit-flex;
  70   min-height: 0;
  71   min-width: 0;
  72 }
  73
  74 x-timeline-view > middle-container > track-view-container > * {
  75   -webkit-flex: 1 1 auto;
  76 }
  77
  78 x-timeline-view > middle-container > x-timeline-view-side-panel-container {
  79   -webkit-flex: 0 0 auto;
  80 }
  81
  82 x-timeline-view > x-drag-handle {
  83   -webkit-flex: 0 0 auto;
  84 }
  85
  86 x-timeline-view > .analysis-view {
  87   display: -webkit-flex;
  88   padding-left: 2px;
  89   padding-right: 2px;
  90 }
  91 x-timeline-view > .analysis-view:not(.tall-mode) {
  92   height: 250px;
  93 }
  94 x-timeline-view > .analysis-view.tall-mode {
  95   height: 500px;
  96 }
  97
  98 x-timeline-view .selection {
  99   margin: 2px;
 100 }
 101
 102 x-timeline-view .selection ul {
 103   margin: 0;
 104 }
 105
 106 .button {
 107   background-color: #f8f8f8;
 108   border: 1px solid rgba(0, 0, 0, 0.5);
 109   color: rgba(0,0,0,0.8);
 110   font-size: 14px;
 111   height: 22px;
 112   margin: 1px;
 113   min-width: 23px;
 114   text-align: center;
 115 }
 116
 117 .button:hover {
 118   background-color: rgba(255, 255, 255, 1.0);
 119   border: 1px solid rgba(0, 0, 0, 0.8);
 120   box-shadow: 0 0 .05em rgba(0, 0, 0, 0.4);
 121   color: rgba(0, 0, 0, 1);
 122 }
 123
 124 .view-info-button {
 125   padding-left: 4px;
 126   padding-right: 4px;
 127   width: auto;
 128 }
 129
 130 .view-info-button:hover {
 131   border: solid 1px;
 132 }
 133
 134 .metadata-dialog-text {
 135   font-family: monospace;
 136   overflow: auto;
 137   white-space: pre;
 138 }
 139
 140 .view-help-text {
 141   -webkit-flex: 1 1 auto;
 142   -webkit-flex-direction: row;
 143   display: -webkit-flex;
 144   width: 700px;
 145 }
 146 .view-help-text .column {
 147   width: 50%;
 148 }
 149 .view-help-text h2 {
 150   font-size: 1.2em;
 151   margin: 0;
 152   margin-top: 5px;
 153   text-align: center;
 154 }
 155 .view-help-text h3 {
 156   margin: 0;
 157   margin-left: 126px;
 158   margin-top: 10px;
 159 }
 160 .view-help-text .pair {
 161   -webkit-flex: 1 1 auto;
 162   -webkit-flex-direction: row;
 163   display: -webkit-flex;
 164 }
 165 .view-help-text .command {
 166   font-family: monospace;
 167   margin-right: 5px;
 168   text-align: right;
 169   width: 150px;
 170 }
 171 .view-help-text .action {
 172   font-size: 0.9em;
 173   text-align: left;
 174   width: 200px;
 175 }
 176 .view-help-text .mouse-mode-icon {
 177   border: 1px solid #888;
 178   border-radius: 3px;
 179   box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
 180   display: inline-block;
 181   height: 26px;
 182   margin-right: 1px;
 183   position: relative;
 184   top: 4px;
 185   width: 27px;
 186   zoom: 0.75;
 187 }
 188 .view-help-text .mouse-mode-icon.pan-mode {
 189   background-position: -1px -11px;
 190 }
 191 .view-help-text .mouse-mode-icon.select-mode {
 192   background-position: -1px -41px;
 193 }
 194 .view-help-text .mouse-mode-icon.zoom-mode {
 195   background-position: -1px -71px;
 196 }
 197 .view-help-text .mouse-mode-icon.timing-mode {
 198   background-position: -1px -101px;
 199 }