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   -moz-border-end-color: #9C9CFF;
  97 }
  98
  99 .waterfall-marker-container:hover > .waterfall-sidebar {
 100   background-color: transparent;
 101 }
 102
 103 .waterfall-header-name {
 104   padding: 4px;
 105 }
 106
 107 .waterfall-header-tick {
 108   width: 100px;
 109   font-size: 9px;
 110   transform-origin: left center;
 111 }
 112
 113 .waterfall-header-tick {
 114   color: #FF9F00;
 115 }
 116
 117 .waterfall-header-tick:not(:first-child) {
 118   -moz-margin-start: -100px !important; /* Don't affect layout. */
 119 }
 120
 121 .waterfall-marker-bullet {
 122   width: 8px;
 123   height: 8px;
 124   -moz-margin-start: 8px;
 125   -moz-margin-end: 6px;
 126   border: 1px solid;
 127   border-radius: 1px;
 128 }
 129
 130 .waterfall-marker-name {
 131   font-size: 95%;
 132   padding-bottom: 1px !important;
 133 }
 134
 135 .waterfall-marker-bar {
 136   height: 9px;
 137   border: 1px solid;
 138   border-radius: 1px;
 139   transform-origin: left center;
 140 }
 141
 142 .waterfall-marker-container.selected > .waterfall-sidebar,
 143 .waterfall-marker-container.selected > .waterfall-marker-item {
 144   background-color: #008484; /* Select Highlight Blue */
 145   color: #FFCF00; /* Light foreground text */
 146 }
 147
 148 .waterfall-marker-container.selected .waterfall-marker-bullet,
 149 .waterfall-marker-container.selected .waterfall-marker-bar {
 150   border-color: initial!important;
 151 }
 152
 153 #timeline-waterfall-details {
 154   -moz-padding-start: 8px;
 155   -moz-padding-end: 8px;
 156   padding-top: 8vh;
 157   overflow: auto;
 158 }
 159
 160 .marker-details-bullet {
 161   width: 8px;
 162   height: 8px;
 163   margin: 0 8px;
 164   border: 1px solid;
 165   border-radius: 1px;
 166 }
 167
 168 .marker-details-start,
 169 .marker-details-end,
 170 .marker-details-duration {
 171   padding-top: 3px;
 172 }
 173
 174 .marker-details-labelname {
 175   -moz-padding-end: 4px;
 176 }
 177
 178 .marker-details-type {
 179   font-size: 1.2em;
 180   font-weight: bold;
 181 }
 182
 183 .marker-details-duration {
 184   font-weight: bold;
 185 }