Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.css

   1 /*
   2  * Copyright (C) 2014 Apple Inc. All rights reserved.
   3  *
   4  * Redistribution and use in source and binary forms, with or without
   5  * modification, are permitted provided that the following conditions
   6  * are met:
   7  * 1. Redistributions of source code must retain the above copyright
   8  *    notice, this list of conditions and the following disclaimer.
   9  * 2. Redistributions in binary form must reproduce the above copyright
  10  *    notice, this list of conditions and the following disclaimer in the
  11  *    documentation and/or other materials provided with the distribution.
  12  *
  13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
  14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
  15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
  17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
  18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
  19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
  20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
  21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
  22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
  23  * THE POSSIBILITY OF SUCH DAMAGE.
  24  */
  25
  26 .timeline-record-bar {
  27     position: absolute;
  28     height: 12px;
  29 }
  30
  31 .timeline-record-bar > .segment {
  32     position: absolute;
  33     height: 100%;
  34     background-color: rgb(225, 225, 225);
  35     border: 1px solid rgb(200, 200, 200);
  36     border-radius: 3px;
  37     min-width: 4px;
  38     z-index: 1;
  39 }
  40
  41 .timeline-record-bar:not(.has-inactive-segment) > .segment {
  42     left: 0;
  43     width: 100%;
  44 }
  45
  46 .timeline-record-bar > .segment.inactive {
  47     z-index: 0;
  48 }
  49
  50 .timeline-record-bar > .segment.inactive,
  51 .timeline-record-bar.unfinished > .segment {
  52     border-top-right-radius: 0 !important;
  53     border-bottom-right-radius: 0 !important;
  54     border-right: none;
  55 }
  56
  57 .timeline-record-bar.has-inactive-segment > .segment:not(.inactive) {
  58     border-top-left-radius: 0 !important;
  59     border-bottom-left-radius: 0 !important;
  60 }
  61
  62 :matches(:focus, .force-focus) .selected .timeline-record-bar > .segment {
  63     background-color: white !important;
  64     border: none !important;
  65 }
  66
  67 :matches(:focus, .force-focus) .selected .timeline-record-bar > .segment.inactive {
  68     background-color: rgb(196, 215, 242) !important;
  69 }
  70
  71 :matches(:focus, .force-focus) .selected .timeline-record-bar.has-inactive-segment > .segment:not(.inactive) {
  72     border-left: 1px solid rgba(56, 121, 217, 0.7) !important;
  73 }
  74
  75 .timeline-record-bar.timeline-record-type-network > .segment {
  76     background-color: rgb(120, 176, 225);
  77     border-color: rgb(61, 147, 200);
  78 }
  79
  80 .timeline-record-bar.timeline-record-type-network > .segment.inactive {
  81     background-color: rgb(167, 204, 237);
  82     border-color: rgb(127, 185, 220);
  83 }
  84
  85 .timeline-record-bar.timeline-record-type-layout > .segment {
  86     background-color: rgb(234, 153, 153);
  87     border-color: rgb(212, 108, 108);
  88 }
  89
  90
  91 .timeline-record-bar.timeline-record-type-layout.layout-timeline-record-paint > .segment,
  92 .timeline-record-bar.timeline-record-type-layout.layout-timeline-record-composite > .segment {
  93     background-color: rgb(176, 204, 105);
  94     border-color: rgb(152, 188, 77);
  95 }
  96
  97 .timeline-record-bar.timeline-record-type-script > .segment {
  98     background-color: rgb(190, 148, 233);
  99     border-color: rgb(153, 113, 185);
 100 }