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: auto;
  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 .two-column h1 {
  82   -webkit-padding-end: 20px;
  83   -webkit-padding-start: 20px;
  84   color: #646464;
  85   display: table-cell;
  86   font-size: 12px;
  87   min-width: 70px;
  88 }
  89
  90 .two-column.visible h1,
  91 .two-column.visible .right-column {
  92   border-bottom: 1px solid #e9e9e9;
  93   padding-bottom: 7px;
  94   padding-top: 7px;
  95 }
  96
  97 .two-column:not(.visible) select {
  98   border-top-width: 0;
  99   margin-top: 0;
 100   padding-top: 0;
 101 }
 102
 103 p {
 104   -webkit-line-box-contain: block;
 105   margin: 0;
 106   margin-bottom: 10px;
 107 }
 108
 109 h1 {
 110   color: #808080;
 111   font-weight: 300;
 112 }
 113
 114 #print-preview .navbar-link {
 115   -webkit-margin-start: 20px;
 116   height: 32px;
 117   outline: 0;
 118   padding: 0;
 119   text-align: start;
 120   text-decoration: none;
 121 }
 122
 123 #print-preview .navbar-link:hover:not(:disabled) {
 124   text-decoration: underline;
 125 }
 126
 127 #print-preview .navbar-link:disabled {
 128   color: rgba(0, 0, 0, .5);
 129   cursor: default;
 130   text-shadow: none;
 131 }
 132
 133 button.loading {
 134   cursor: progress;
 135 }
 136
 137 #print-preview button.default {
 138   font-weight: bold;
 139 }
 140
 141 #print-preview button.default:not(:focus):not(:disabled) {
 142   border-color: #808080;
 143 }
 144
 145 span.hint {
 146   -webkit-transition: color 200ms;
 147   background: white;
 148   display: block;
 149   font-size: 0.9em;
 150   font-weight: bold;
 151   height: 0;
 152   line-height: 10px;
 153   margin: 0;
 154   overflow: hidden;
 155 }
 156
 157 span.hint.visible {
 158   -webkit-animation-duration: 200ms;
 159   -webkit-animation-fill-mode: forwards;
 160   -webkit-user-select: text;
 161   color: rgb(140, 20, 20);
 162   height: auto;
 163   margin-bottom: -5px;
 164   margin-top: 5px;
 165   padding-bottom: 5px;
 166 }
 167
 168 span.hint.closing {
 169   -webkit-transition: margin 150ms, height 150ms, opacity 150ms;
 170   background: transparent;
 171   height: 0 !important;
 172   margin: 0;
 173   opacity: 0;
 174 }
 175
 176 .collapsible {
 177   height: 0;
 178 }
 179
 180 .collapsible.visible {
 181   -webkit-animation-duration: 200ms;
 182   -webkit-animation-fill-mode: forwards;
 183   height: auto;
 184 }
 185
 186 .collapsible.closing {
 187   -webkit-transition: margin 150ms, height 150ms, opacity 150ms;
 188   height: 0 !important;
 189   opacity: 0;
 190   overflow: hidden;
 191 }
 192
 193 select {
 194   width: 100%;
 195 }
 196
 197 label {
 198   -webkit-user-select: none;
 199 }
 200
 201 .hidden-section {
 202   background: white;
 203   position: relative;
 204 }
 205
 206 .extra {
 207   background: white;
 208   height: 0;
 209   opacity: 0;
 210   padding-top: 0;
 211   position: absolute;
 212   visibility: hidden;
 213 }
 214
 215 .visible .extra {
 216   -webkit-animation-duration: 200ms;
 217   -webkit-animation-fill-mode: forwards;
 218   height: auto;
 219   opacity: 1;
 220   overflow: hidden;
 221   padding-bottom: 0;
 222   position: static;
 223   visibility: visible;
 224 }
 225
 226 .closing .extra {
 227   -webkit-transition: padding-top 100ms, height 100ms, opacity 200ms,
 228       background 300ms;
 229   height: 0 !important;
 230   opacity: 0;
 231   overflow: hidden;
 232   padding-top: 0;
 233   position: static;
 234   visibility: visible;
 235 }
 236
 237 /* Individual settings sections  */
 238
 239 /* TODO(estade): this should be in a shared location but I'm afraid of the
 240  * damage it could do. */
 241 [hidden] {
 242   display: none !important;
 243 }
 244
 245 @-webkit-keyframes dancing-dots-jump {
 246   0% { top: 0; }
 247   55% { top: 0; }
 248   60% { top: -10px; }
 249   80% { top: 3px; }
 250   90% { top: -2px; }
 251   95% { top: 1px; }
 252   100% { top: 0; }
 253 }
 254
 255 span.jumping-dots > span {
 256   -webkit-animation: dancing-dots-jump 1800ms infinite;
 257   padding: 1px;
 258   position: relative;
 259 }
 260
 261 span.jumping-dots > span:nth-child(2) {
 262   -webkit-animation-delay: 100ms;
 263 }
 264
 265 span.jumping-dots > span:nth-child(3) {
 266   -webkit-animation-delay: 300ms;
 267 }
 268
 269 /* TODO(estade): unfork this code. */
 270 #print-header .button-strip {
 271 <if expr="not pp_ifdef('toolkit_views')">
 272   -webkit-box-direction: reverse;
 273 </if>
 274   -webkit-box-orient: horizontal;
 275   -webkit-box-pack: end;
 276   display: -webkit-box;
 277 }
 278
 279 #print-header .button-strip button {
 280   -webkit-margin-start: 9px;
 281   display: block;
 282 }
 283
 284 #link-container {
 285   -webkit-box-orient: vertical;
 286   display: -webkit-box;
 287   margin: 7px 0;
 288 }
 289
 290 #main-container {
 291   -webkit-border-start: 1px solid #dcdcdc;
 292   -webkit-box-flex: 1;
 293   -webkit-box-orient: vertical;
 294   display: -webkit-box;
 295   height: 100%;
 296   position: relative;
 297 }
 298
 299 html:not(.focus-outline-visible)
 300 :enabled:focus:-webkit-any(input[type='checkbox'],
 301                            input[type='radio'],
 302                            button):not(.link-button) {
 303   /* Cancel border-color for :focus specified in widgets.css. */
 304   border-color: rgba(0,0,0,0.25);
 305 }
 306
 307 html:not(.focus-outline-visible) button:focus.link-button {
 308   outline: none;
 309 }