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