chrome/browser/resources/chromeos/provided_file_systems.css

   1 /* Copyright 2014 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 body {
   7   background-color: rgba(0, 0, 0, 0.05);
   8   font-size: 14px;
   9   margin: 20px;
  10 }
  11
  12 #fileSystems,
  13 #requestEvents,
  14 #requestTimeline {
  15   background-color: white;
  16   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  17   margin-bottom: 20px;
  18 }
  19
  20 #fileSystems table,
  21 #requestEvents table {
  22   border-collapse: collapse;
  23   width: 100%;
  24 }
  25
  26 #fileSystems th,
  27 #requestEvents th {
  28   height: 30px;
  29 }
  30
  31 #fileSystems .message {
  32   border-top: 1px solid #eee;
  33 }
  34
  35 #fileSystems td {
  36   border-top: 1px solid #eee;
  37   height: 40px;
  38   line-height: 24px;
  39   text-align: center;
  40 }
  41
  42 #fileSystems td .icon {
  43   display: inline-block;
  44   height: 24px;
  45   vertical-align: middle;
  46   width: 24px;
  47 }
  48
  49 #fileSystems tbody tr {
  50   cursor: pointer;
  51 }
  52
  53 #fileSystems tbody tr:active td {
  54   background-color: #eee;
  55 }
  56
  57 #requestEvents {
  58   font-size: 12px;
  59 }
  60
  61 #requestEvents td {
  62   padding: 8px;
  63   text-align: center;
  64   vertical-align: top;
  65 }
  66
  67 #requestEvents td {
  68   border-top: 1px solid #eee;
  69 }
  70
  71 #requestEvents td span {
  72   border-radius: 5px;
  73   padding: 3px;
  74 }
  75
  76 #requestTimeline {
  77   min-height: 30px;
  78   position: relative;
  79   width: 100%;
  80 }
  81
  82 #requestTimeline .request-timeline-scroller {
  83   overflow-x: auto;
  84   overflow-y: hidden;
  85   width: 100%;
  86 }
  87
  88 #requestTimeline .request-timeline-padding {
  89   margin: 20px 10px;
  90   position: relative;
  91 }
  92
  93 #requestTimeline .request-timeline-request {
  94   border: none;
  95   border-radius: 4px;
  96   height: 8px;
  97   margin: 3px 0;
  98   min-width: 1px;
  99   padding: 0;
 100   position: absolute;
 101   text-align: start;
 102 }
 103
 104 #requestTimeline .request-timeline-request.selected {
 105   box-shadow: 0 0 3px 1px deepskyblue;
 106 }
 107
 108 #requestTimeline .request-timeline-request-overhead {
 109   background-image: -webkit-canvas(dashedPattern);
 110   border-radius: 4px;
 111   height: 100%;
 112   width: 50%;
 113 }
 114
 115 #requestTimeline .request-timeline-request-value-size {
 116   background-color: ivory;
 117   box-shadow: 0 1px 1px 0 silver;
 118   color: black;
 119   display: inline-block;
 120   font-size: 10px;
 121   padding: 2px;
 122   position: relative;
 123   top: -30px;
 124   z-index: 2;
 125 }
 126
 127 #requestTimeline .request-timeline-toolbar {
 128   display: flex;
 129   justify-content: flex-end;
 130   left: 0;
 131   opacity: 0.75;
 132   padding: 5px;
 133   pointer-events: none;
 134   position: absolute;
 135   right: 0;
 136   z-index: 3;
 137 }
 138
 139 #requestTimeline .request-timeline-toolbar button {
 140   background-color: #aaa;
 141   border: none;
 142   border-radius: 100%;
 143   color: white;
 144   min-height: 20px;
 145   min-width: 20px;
 146   pointer-events: auto;
 147 }
 148
 149 #requestTimeline [data-request-type='REQUEST_UNMOUNT'],
 150 #requestEvents [data-request-type='REQUEST_UNMOUNT'] span {
 151   background-color: cadetblue;
 152   color: white;
 153 }
 154
 155 #requestTimeline [data-request-type='GET_METADATA'],
 156 #requestEvents [data-request-type='GET_METADATA'] span {
 157   background-color: orange;
 158   color: white;
 159 }
 160
 161 #requestTimeline [data-request-type='READ_DIRECTORY'],
 162 #requestEvents [data-request-type='READ_DIRECTORY'] span {
 163   background-color: hotpink;
 164   color: white;
 165 }
 166
 167 #requestTimeline [data-request-type='OPEN_FILE'],
 168 #requestEvents [data-request-type='OPEN_FILE'] span {
 169   background-color: darkturquoise;
 170   color: white;
 171 }
 172
 173 #requestTimeline [data-request-type='CLOSE_FILE'],
 174 #requestEvents [data-request-type='CLOSE_FILE'] span {
 175   background-color: mediumspringgreen;
 176 }
 177
 178 #requestTimeline [data-request-type='READ_FILE'],
 179 #requestEvents [data-request-type='READ_FILE'] span {
 180   background-color: royalblue;
 181   color: white;
 182 }
 183
 184 #requestTimeline [data-state='rejected'],
 185 #requestEvents [data-error]:not([data-error='']) span {
 186   background-color: tomato;
 187   color: white;
 188 }