chrome/browser/resources/components.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 body {
   6   margin: 10px;
   7   min-width: 47em;
   8 }
   9
  10 a {
  11   color: blue;
  12   font-size: 103%;
  13 }
  14
  15 #header {
  16   -webkit-padding-start: 0;
  17   background: url(../../../ui/webui/resources/images/extension.svg)
  18       left center / 48px no-repeat;
  19   box-sizing: border-box;
  20   margin-bottom: 1.05em;
  21   overflow: hidden;
  22   position: relative;
  23 }
  24
  25 html[dir=rtl] #header {
  26   background-position-x: right;
  27 }
  28
  29 #header h1 {
  30   -webkit-padding-start: 51px;
  31   line-height: 48px;
  32 }
  33
  34 h1 {
  35   font-size: 156%;
  36   font-weight: bold;
  37   margin: 0;
  38   padding: 0;
  39 }
  40
  41 #disabled-container {
  42   font-size: 120%;
  43   padding-bottom: 1.5em;
  44 }
  45
  46 #disabled-header {
  47   color: red;
  48   font-weight: bold;
  49 }
  50
  51 .content {
  52   margin-top: 5px;
  53 }
  54
  55 .section-header {
  56   -webkit-padding-start: 5px;
  57   background: rgb(235, 239, 249);
  58   border-top: 1px solid rgb(181, 199, 222);
  59   font-size: 99%;
  60   padding-bottom: 2px;
  61   padding-top: 3px;
  62   width: 100%;
  63 }
  64
  65 .section-header > table tr td:first-child {
  66   width: 100%;
  67 }
  68
  69 .section-header > table tr {
  70   vertical-align: center;
  71 }
  72
  73 .section-header > table {
  74   width: 100%;
  75   border-collapse:collapse
  76 }
  77
  78 .section-header-title {
  79   font-weight: bold;
  80 }
  81
  82 .vbox-container {
  83   -webkit-box-orient: vertical;
  84   display: -webkit-box;
  85 }
  86
  87 .wbox {
  88   -webkit-box-align: stretch;
  89   -webkit-box-flex: 1;
  90   display: -webkit-box;
  91 }
  92
  93 #top {
  94   -webkit-padding-end: 5px;
  95 }
  96
  97 .show-in-tmi-mode {
  98   overflow: hidden;
  99 }
 100
 101 body.hide-tmi-mode-initial .show-in-tmi-mode {
 102   height: 0 !important;
 103   opacity: 0;
 104 }
 105
 106 body.hide-tmi-mode .show-in-tmi-mode {
 107   -webkit-transition: all 100ms ease-out;
 108   height: 0 !important;
 109   opacity: 0;
 110 }
 111
 112 body.show-tmi-mode-initial .show-in-tmi-mode {
 113   opacity: 1;
 114 }
 115
 116 body.show-tmi-mode .show-in-tmi-mode {
 117   -webkit-transition: all 100ms ease-in;
 118   opacity: 1;
 119 }
 120
 121 .wbox-tmi-mode {
 122   -webkit-box-align: stretch;
 123   -webkit-box-flex: 1;
 124 }
 125
 126 .tmi-mode-image {
 127   margin-top: 2px;
 128   padding-left: 5px;
 129   padding-right: 5px;
 130 }
 131
 132 .tmi-mode-link {
 133   margin-right: 3px;
 134   white-space: nowrap;
 135 }
 136
 137 .tmi-mode-link a {
 138   font-size: 97%;
 139 }
 140
 141 .tmi-mode {
 142   -webkit-padding-start: 10px;
 143   background: rgb(244, 246, 252);
 144   border-bottom: 1px solid rgb(237, 239, 245);
 145   font-size: 89%;
 146   padding-bottom: 0.8em;
 147   padding-top: 0.8em;
 148   width: 100%;
 149 }
 150
 151 .component-disabled {
 152   background-color: #f0f0f0;
 153   color: #a0a0a0;
 154 }
 155
 156 .component > tr > td {
 157   padding-bottom: 4px;
 158   padding-top: 5px;
 159   vertical-align: top;
 160 }
 161
 162 .component > table {
 163   width: 100%;
 164   border-collapse:collapse
 165 }
 166
 167 .plugin-file {
 168   padding-bottom: 5px;
 169   padding-top: 5px;
 170 }
 171
 172 .component {
 173   border-bottom: 1px solid #cdcdcd;
 174 }
 175
 176 .critical {
 177   color: red;
 178 }
 179
 180 /* Indent the text related to each plug-in. */
 181 .component-text {
 182   -webkit-padding-start: 5px;
 183 }
 184
 185 .component-name {
 186   font-weight: bold;
 187 }
 188
 189 .no-components {
 190   font-size: 1.2em;
 191   margin: 6em 0 0;
 192   text-align: center;
 193 }
 194
 195 /* Use tables for layout, so eliminate extra spacing. */
 196 .plugin-details table {
 197   -webkit-border-horizontal-spacing: 0;
 198   -webkit-border-vertical-spacing: 0;
 199 }
 200
 201 .plugin-details {
 202   -webkit-padding-start: 1em;
 203 }
 204
 205 /* Separate the inital line, Description, Location, and MIME Types lines. */
 206 .plugin-details > div {
 207   padding-top: 0.1em
 208 }
 209
 210 /* Align rows of tables along the top. */
 211 .plugin-details tr {
 212   vertical-align: top;
 213 }
 214
 215 /* Separate columns by 1em for the most part. */
 216 .plugin-details td+td {
 217   -webkit-padding-start: 1em;
 218 }
 219
 220 /* Make the MIME Types tables smaller. */
 221 .plugin-details .mime-types {
 222   font-size: 95%;
 223 }
 224
 225 /* Separate the header from the contents in each MIME Types table. */
 226 .plugin-details .mime-types .header td {
 227   border-bottom: 1px solid black;
 228   padding-bottom: 0.1em;
 229 }
 230
 231 /* Separate the columns for tables used for horizontal listings only a bit. */
 232 .hlisting td+td {
 233   -webkit-padding-start: 0.4em;
 234 }
 235
 236 /* Match the indentation of .plugin-text. */
 237 .component-actions {
 238   -webkit-padding-start: 5px;
 239   margin-bottom: 0.2em;
 240   margin-top: 0.2em;
 241 }
 242
 243 .always-allow {
 244   -webkit-margin-start: 30px;
 245 }
 246
 247 button {
 248   font-size: 104%;
 249 }