src/chrome/browser/resources/print_preview/print_preview.css

   1 /* Copyright (c) 2012 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 html {
   6   height: 100%;
   7   overflow: hidden;
   8 }
   9
  10 body {
  11   display: -webkit-box;
  12   height: 100%;
  13   margin: 0;
  14 }
  15
  16 /* Header */
  17
  18 header {
  19   -webkit-padding-end: 19px;
  20   -webkit-padding-start: 20px;
  21   background-color: #F6F6F6;
  22   border-bottom: 1px solid #d2d2d2;
  23 }
  24
  25 #print-preview #navbar-container {
  26   -webkit-border-end: 1px solid #c8c8c8;
  27   -webkit-box-orient: vertical;
  28   -webkit-user-select: none;
  29   background-color: white;
  30   display: -webkit-box;
  31   position: relative;
  32   width: 310px;
  33   z-index: 2;
  34 }
  35
  36 #navbar-content-title {
  37   color: black;
  38   font-size: 15px;
  39   font-weight: normal;
  40   margin: 0;
  41   padding-bottom: 6px;
  42   padding-top: 16px;
  43 }
  44
  45 #navbar-scroll-container {
  46   -webkit-box-flex: 1;
  47   background: #fbfbfb;
  48   border-top: 1px solid #f3f3f3;
  49   overflow-y: auto;
  50   padding-top: 2px;
  51 }
  52
  53 /* Settings */
  54
  55 .two-column {
  56   display: table-row;
  57 }
  58
  59 .right-column {
  60   -webkit-padding-end: 20px;
  61   display: table-cell;
  62   width: 99%;
  63 }
  64
  65 .right-column .checkbox,
  66 .right-column .radio {
  67   margin: 0;
  68 }
  69
  70 .right-column .checkbox label,
  71 .right-column .radio label {
  72   padding-bottom: 5px;
  73   padding-top: 10px;
  74 }
  75
  76 .right-column .radio input[type='radio'] {
  77   height: 13px;
  78   width: 13px;
  79 }
  80
  81 .left-column {
  82   -webkit-padding-end: 20px;
  83   -webkit-padding-start: 20px;
  84   display: table-cell;
  85   min-width: 70px;
  86   vertical-align: middle;
  87 }
  88
  89 .left-column h1 {
  90   color: #646464;
  91   font-size: 12px;
  92   margin-bottom: 0;
  93   margin-top: 0;
  94 }
  95
  96 .two-column.visible .left-column,
  97 .two-column.visible .right-column {
  98   padding-bottom: 5px;
  99   padding-top: 5px;
 100 }
 101
 102 .two-column:not(.visible) .left-column,
 103 .two-column:not(.visible) .right-column {
 104   -webkit-transition: padding-bottom 150ms, padding-top 150ms;
 105   padding-bottom: 0;
 106   padding-top: 0;
 107 }
 108
 109 .two-column:not(.visible) select {
 110   border-top-width: 0;
 111   margin-top: 0;
 112   padding-top: 0;
 113 }
 114
 115 p {
 116   -webkit-line-box-contain: block;
 117   margin: 0;
 118   margin-bottom: 10px;
 119 }
 120
 121 h1 {
 122   color: #808080;
 123   font-weight: 300;
 124 }
 125
 126 #print-preview .navbar-link {
 127   margin: 8px 20px;
 128 }
 129
 130 #print-preview .navbar-link.disabled {
 131   color: rgba(0, 0, 0, .5);
 132   cursor: default;
 133   pointer-events: none;
 134 }
 135
 136 button.loading {
 137   cursor: progress;
 138 }
 139
 140 #print-preview button.default {
 141   font-weight: bold;
 142 }
 143
 144 #print-preview button.default:not(:focus):not(:disabled) {
 145   border-color: #808080;
 146 }
 147
 148 span.hint {
 149   -webkit-transition: color 200ms;
 150   background: white;
 151   display: block;
 152   font-size: 0.9em;
 153   font-weight: bold;
 154   height: 0;
 155   line-height: 10px;
 156   margin: 0;
 157   overflow: hidden;
 158 }
 159
 160 span.hint.visible {
 161   -webkit-animation-duration: 200ms;
 162   -webkit-animation-fill-mode: forwards;
 163   -webkit-user-select: text;
 164   color: rgb(140, 20, 20);
 165   height: auto;
 166   margin-bottom: -5px;
 167   margin-top: 5px;
 168   padding-bottom: 5px;
 169 }
 170
 171 span.hint.closing {
 172   -webkit-transition: margin 150ms, height 150ms, opacity 150ms;
 173   background: transparent;
 174   height: 0 !important;
 175   margin: 0;
 176   opacity: 0;
 177 }
 178
 179 .collapsible {
 180   height: 0;
 181   position: relative;
 182 }
 183
 184 .collapsible.visible {
 185   -webkit-animation-duration: 200ms;
 186   -webkit-animation-fill-mode: forwards;
 187   height: auto;
 188 }
 189
 190 .collapsible.closing {
 191   -webkit-transition: margin 150ms, height 150ms, opacity 150ms;
 192   height: 0 !important;
 193   opacity: 0;
 194   overflow: hidden;
 195 }
 196
 197 .collapsible.closing > * {
 198   position: absolute;
 199 }
 200
 201 select {
 202   width: 100%;
 203 }
 204
 205 label {
 206   -webkit-user-select: none;
 207 }
 208
 209 .hidden-section {
 210   background: white;
 211   position: relative;
 212 }
 213
 214 .extra {
 215   background: white;
 216   height: 0;
 217   opacity: 0;
 218   padding-top: 0;
 219   position: absolute;
 220   visibility: hidden;
 221 }
 222
 223 .visible .extra {
 224   -webkit-animation-duration: 200ms;
 225   -webkit-animation-fill-mode: forwards;
 226   height: auto;
 227   opacity: 1;
 228   overflow: hidden;
 229   padding-bottom: 0;
 230   position: static;
 231   visibility: visible;
 232 }
 233
 234 .closing .extra {
 235   -webkit-transition: padding-top 100ms, height 100ms, opacity 200ms,
 236       background 300ms;
 237   height: 0 !important;
 238   opacity: 0;
 239   overflow: hidden;
 240   padding-top: 0;
 241   position: static;
 242   visibility: visible;
 243 }
 244
 245 /* Individual settings sections  */
 246
 247 /* TODO(estade): this should be in a shared location but I'm afraid of the
 248  * damage it could do. */
 249 [hidden] {
 250   display: none !important;
 251 }
 252
 253 @-webkit-keyframes dancing-dots-jump {
 254   0% { top: 0; }
 255   55% { top: 0; }
 256   60% { top: -10px; }
 257   80% { top: 3px; }
 258   90% { top: -2px; }
 259   95% { top: 1px; }
 260   100% { top: 0; }
 261 }
 262
 263 span.jumping-dots > span {
 264   -webkit-animation: dancing-dots-jump 1800ms infinite;
 265   padding: 1px;
 266   position: relative;
 267 }
 268
 269 span.jumping-dots > span:nth-child(2) {
 270   -webkit-animation-delay: 100ms;
 271 }
 272
 273 span.jumping-dots > span:nth-child(3) {
 274   -webkit-animation-delay: 300ms;
 275 }
 276
 277 #print-header .button-strip {
 278   -webkit-box-orient: horizontal;
 279   -webkit-box-pack: end;
 280   display: -webkit-box;
 281 }
 282
 283 #print-header .button-strip button {
 284   -webkit-margin-start: 9px;
 285   display: block;
 286 }
 287
 288 #link-container {
 289   -webkit-box-orient: vertical;
 290   display: -webkit-box;
 291   margin: 7px 0;
 292 }
 293
 294 #link-container > div {
 295   display: flex;
 296 }
 297
 298 #link-container > div > .throbber {
 299   margin: 8px;
 300   min-height: 16px;
 301   min-width: 16px;
 302 }
 303
 304 #main-container {
 305   -webkit-border-start: 1px solid #dcdcdc;
 306   -webkit-box-flex: 1;
 307   -webkit-box-orient: vertical;
 308   display: -webkit-box;
 309   height: 100%;
 310   position: relative;
 311 }
 312
 313 html:not(.focus-outline-visible)
 314 :enabled:focus:-webkit-any(input[type='checkbox'],
 315                            input[type='radio'],
 316                            button) {
 317   /* Cancel border-color for :focus specified in widgets.css. */
 318   border-color: rgba(0,0,0,0.25);
 319 }
 320
 321 html:not(.focus-outline-visible) [is='action-link']:focus {
 322   outline: none;
 323 }