chrome/browser/resources/sync_internals/about.css

   1 /* Copyright 2013 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 #about-info {
   7   -webkit-column-width: 350px;
   8 }
   9
  10 #about-info > div {
  11   -webkit-column-break-inside: avoid;
  12   width: 350px;
  13 }
  14
  15 #about-info h2 {
  16   color: rgb(74, 142, 230);
  17   font-size: 100%;
  18   margin-bottom: 0;
  19 }
  20
  21 #about-info .err {
  22   color: red;
  23 }
  24
  25 #about-info .section {
  26   display: inline-block;
  27   margin-left: auto;
  28   margin-right: auto;
  29 }
  30
  31 .about-details {
  32   width: 100%;
  33 }
  34
  35 .about-details tr:nth-child(odd) {
  36   background: rgb(239, 243, 255);
  37 }
  38
  39 #typeInfo .error {
  40  background: rgb(255, 204, 204);
  41 }
  42
  43 #typeInfo .warning {
  44  background: rgb(255, 255, 204);
  45 }
  46
  47 #typeInfo .disabled {
  48  background: rgb(224, 224, 224);
  49 }
  50
  51 #typeInfo .ok {
  52  background: rgb(204, 255, 204);
  53 }
  54
  55 @-webkit-keyframes highlight1 {
  56   0% {
  57     background: rgb(255, 255, 0);
  58   }
  59   100% {
  60     background: #fff;
  61   }
  62 }
  63
  64 @-webkit-keyframes highlight2 {
  65   0% {
  66     background: rgb(155, 158, 166);
  67   }
  68   100% {
  69     background: rgb(239, 243, 255);
  70   }
  71 }
  72
  73 .about-details [highlighted] {
  74   -webkit-animation-duration: 3s;
  75   -webkit-animation-name: highlight1;
  76   -webkit-animation-timing-function: linear;
  77 }
  78
  79 .about-details [highlighted]:nth-child(odd) {
  80   -webkit-animation-duration: 3s;
  81   -webkit-animation-name: highlight2;
  82   -webkit-animation-timing-function: linear;
  83 }
  84
  85 .about-details .uninitialized {
  86   color: #7f7f7f;
  87 }
  88
  89 #status {
  90   margin-left: auto;
  91   margin-right: auto;
  92   text-align: center;
  93   width: 300px;
  94 }
  95
  96 #dump-status {
  97   margin: 2px;
  98 }
  99
 100 #import-status {
 101   margin: 2px;
 102 }
 103
 104 #traffic-event-container {
 105   border: 1px solid;
 106   height: 500px;
 107   max-width: 500px;
 108   overflow-y: auto;
 109 }
 110
 111 .traffic-event-entry {
 112   border: 2px outset;
 113   padding: 0.5em;
 114 }
 115
 116 .traffic-event-entry:hover {
 117   background-color: #eee;
 118 }
 119
 120 .traffic-event-entry .time {
 121   color: #222;
 122   font-family: sans-serif;
 123 }
 124
 125 .traffic-event-entry .type {
 126   font-family: sans-serif;
 127   font-weight: bold;
 128   margin: 0.5em;
 129   white-space: nowrap;
 130 }
 131
 132 .traffic-event-entry .details {
 133   margin: 0.5em;
 134   overflow-x: auto;
 135 }
 136
 137 .traffic-event-entry .proto {
 138   display: none;
 139 }
 140
 141 .traffic-event-entry-expanded .proto {
 142   background-color: #fff;
 143   border: 1px solid #222;
 144   display: block;
 145   max-height: 300px;
 146   overflow-x: auto;
 147   overflow-y: auto;
 148 }