LCARStrek/browser/devtools/timeline.css

   1 /* vim:set ts=2 sw=2 sts=2 et: */
   2 /* This Source Code Form is subject to the terms of the Mozilla Public
   3  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
   4  * You can obtain one at http://mozilla.org/MPL/2.0/. */
   5
   6 #record-button {
   7   list-style-image: url("profiler-stopwatch.svg");
   8 }
   9
  10 #record-button[checked] {
  11   list-style-image: url("profiler-stopwatch-checked.svg");
  12 }
  13
  14 #record-button:not([checked]) ~ #record-label {
  15   visibility: hidden;
  16 }
  17
  18 .notice-container {
  19   font-size: 120%;
  20   padding-bottom: 35vh;
  21 }
  22
  23 .notice-container {
  24   background: #A09090; /* Toolbars */
  25   color: #000000; /* Light foreground text */
  26 }
  27
  28 #empty-notice button,
  29 #recording-notice button {
  30   min-width: 30px;
  31   min-height: 28px;
  32   margin: 0;
  33   list-style-image: url("profiler-stopwatch.svg");
  34 }
  35
  36 #empty-notice button[checked],
  37 #recording-notice button[checked] {
  38   list-style-image: url("profiler-stopwatch-checked.svg");
  39 }
  40
  41 #empty-notice button .button-text,
  42 #recording-notice button .button-text {
  43   display: none;
  44 }
  45
  46 #timeline-pane {
  47   border-top: 1px solid #9C9CFF;
  48 }
  49
  50 .waterfall-list-contents {
  51   /* Hack: force hardware acceleration */
  52   transform: translateZ(1px);
  53   overflow-x: hidden;
  54   overflow-y: auto;
  55 }
  56
  57 .waterfall-header-contents {
  58   overflow-x: hidden;
  59 }
  60
  61 .waterfall-background-ticks {
  62   /* Background created on a <canvas> in js. */
  63   /* @see browser/devtools/timeline/widgets/waterfall.js */
  64   background-image: -moz-element(#waterfall-background);
  65   background-repeat: repeat-y;
  66   background-position: -1px center;
  67 }
  68
  69 .waterfall-marker-container[is-spacer] {
  70   pointer-events: none;
  71 }
  72
  73 .theme-dark .waterfall-marker-container:not([is-spacer]):nth-child(2n) {
  74   background-color: rgba(255,255,255,0.03);
  75 }
  76
  77 .theme-light .waterfall-marker-container:not([is-spacer]):nth-child(2n) {
  78   background-color: rgba(128,128,128,0.03);
  79 }
  80
  81 .theme-dark .waterfall-marker-container:hover {
  82   background-color: rgba(255,255,255,0.1) !important;
  83 }
  84
  85 .theme-light .waterfall-marker-container:hover {
  86   background-color: rgba(128,128,128,0.1) !important;
  87 }
  88
  89 .waterfall-marker-item {
  90   overflow: hidden;
  91 }
  92
  93 .waterfall-sidebar {
  94   -moz-border-end: 1px solid;
  95 }
  96
  97 .waterfall-sidebar {
  98   -moz-border-end-color: #9C9CFF;
  99 }
 100
 101 .waterfall-marker-container:hover > .waterfall-sidebar {
 102   background-color: transparent;
 103 }
 104
 105 .waterfall-header-name {
 106   padding: 4px;
 107 }
 108
 109 .waterfall-header-tick {
 110   width: 100px;
 111   font-size: 9px;
 112   transform-origin: left center;
 113 }
 114
 115 .waterfall-header-tick {
 116   color: #FF9F00;
 117 }
 118
 119 .waterfall-header-tick:not(:first-child) {
 120   -moz-margin-start: -100px !important; /* Don't affect layout. */
 121 }
 122
 123 .waterfall-marker-bullet {
 124   width: 8px;
 125   height: 8px;
 126   -moz-margin-start: 8px;
 127   -moz-margin-end: 6px;
 128   border: 1px solid;
 129   border-radius: 1px;
 130 }
 131
 132 .waterfall-marker-name {
 133   font-size: 95%;
 134   padding-bottom: 1px !important;
 135 }
 136
 137 .waterfall-marker-bar {
 138   height: 9px;
 139   border: 1px solid;
 140   border-radius: 1px;
 141   transform-origin: left center;
 142 }
 143
 144 .waterfall-marker-container.selected > .waterfall-sidebar,
 145 .waterfall-marker-container.selected > .waterfall-marker-item {
 146   background-color: #008484; /* Select Highlight Blue */
 147   color: #FFCF00; /* Light foreground text */
 148 }
 149
 150 .waterfall-marker-container.selected .waterfall-marker-bullet,
 151 .waterfall-marker-container.selected .waterfall-marker-bar {
 152   border-color: initial!important;
 153 }
 154
 155 #timeline-waterfall-details {
 156   -moz-padding-start: 8px;
 157   -moz-padding-end: 8px;
 158   padding-top: 8vh;
 159   overflow: auto;
 160 }
 161
 162 .marker-details-bullet {
 163   width: 8px;
 164   height: 8px;
 165   margin: 0 8px;
 166   border: 1px solid;
 167   border-radius: 1px;
 168 }
 169
 170 .marker-details-start,
 171 .marker-details-end,
 172 .marker-details-duration {
 173   padding-top: 3px;
 174 }
 175
 176 .marker-details-labelname {
 177   -moz-padding-end: 4px;
 178 }
 179
 180 .marker-details-type {
 181   font-size: 1.2em;
 182   font-weight: bold;
 183 }
 184
 185 .marker-details-duration {
 186   font-weight: bold;
 187 }