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