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