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