Print Preview component extension

chrome/browser/resources/shared/css/chrome.css

+/*
+Copyright (c) 2010 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file.
+*/
+html, body {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  cursor: default;
+  overflow: hidden;
+}
+
+list { 
+  display: block;
+  overflow-x: hidden;
+  overflow-y: visible; /* let the container do the scrolling */
+}
+
+list > * {
+  text-decoration: none;
+  padding: 0 3px;
+  color: hsl(0, 0%, 70%);
+}
+
+list > * > * {
+  -webkit-box-sizing: border-box;
+  -webkit-padding-start: 20px;
+  background: 0 50% no-repeat;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: pre; /* Don't collapse whitespace */
+}
+
+list > * > .label {
+  -webkit-transition: all .15s;
+  cursor: pointer;
+  color: black;
+  display: inline-block; /* We need to use inline-block here due to RTL. */
+}
+
+list > :hover > .label {
+  text-decoration: underline;
+  color: blue;
+}
+
+list > * > .url {
+  padding: 3px;
+  -webkit-padding-start: 15px;
+  display: none;
+}
+
+list > :hover > .url,
+list > [selected] > .url {
+  display: inline;
+}
+
+html[dir=rtl] list .label {
+  background-position: 100% 50%;
+}
+
+list > .folder > .label {
+  background-image: url("chrome://resources/images/folder_closed.png");
+}
+
+/* We need to ensure that even empty labels take up space */
+list > * > .label:empty:after,
+list > * > .url:empty:after {
+  content: " ";
+  white-space: pre;
+}
+
+list > .folder > .url:empty:after {
+  content: "";
+}
+
+/*
+/* Edit mode
+*/
+
+list .label input,
+list .url input {
+  /* Do not inherit the line-height */
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  margin: -2px 4px -2px -4px;
+  padding: 1px 3px 1px 1px;
+  outline: none;
+  text-decoration: none;
+}
+
+html[dir=rtl] list .label input,
+html[dir=rtl] list .url input {
+  margin: -2px -4px -2px 4px;
+  padding: 1px 1px 1px 3px;
+}
+
+list > [editing] {
+  overflow: visible;
+}
+
+list [editing] .label,
+list [editing] .url,
+list [editing] > * {
+  overflow: visible;
+  display: inline;
+}
+
+list [editing] .url {
+  -webkit-padding-start: 5px;
+}
+
+list .url form {
+  display: inline;
+}
+
+.main {
+  display: -webkit-box;
+}
+
+.main > * {
+  height: 100%;
+}
+
+html[dir=rtl] #tree-container {
+  padding: 5px 10px 5px 5px;
+}
+
+#tree {
+  min-width: 100%;
+  overflow: visible; /* let the container do the scrolling */
+  display: inline-block;
+}
+
+#list {
+  -webkit-box-flex: 1;
+  -webkit-box-sizing: border-box;
+  padding: 5px;
+}
+
+.splitter {
+  width: 5px;
+  background-color: #ebeff9;
+  cursor: e-resize;
+}
+
+html[os=mac] .splitter {
+  cursor: col-resize;
+}
+
+.logo {
+  -webkit-appearance: none;
+  border: 0;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  margin: 10px;
+  float: left;
+}
+
+html[dir=rtl] #tree-container {
+  left: auto;
+  right: 0;
+}
+
+html[dir=rtl] #list {
+  left: 0;
+  right: 200px;
+}
+
+.header form {
+  float: left;
+  margin: 14px 2px;
+  margin-bottom: 0;
+}
+
+.header {
+  min-width: 400px;
+}
+
+html[dir=rtl] .logo,
+html[dir=rtl] .header > div,
+html[dir=rtl] .header form {
+  float: right;
+}
+
+#drop-overlay {
+  position: absolute;
+  display: none;
+  pointer-events: none;
+  border: 1px solid hsl(214, 91%, 85%);;
+  border-radius: 3px;
+  -webkit-box-sizing: border-box;
+  background-color: hsla(214, 91%, 85%, .5);
+  overflow: hidden;
+  z-index: -1;
+}
+
+#drop-overlay.line {
+  border: 3px solid black;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+  background-color: black;
+  background-clip: padding-box;
+  height: 8px;
+  border-radius: 0;
+  z-index: 10;
+}
+
+.summary {
+  background-color: #ebeff9;
+  border-top: 1px solid #9cc2ef;
+  padding: 5px 10px;
+  clear: both;
+  white-space: nowrap;
+}
+
+.summary > * {
+  font-size: 100%;
+  display: inline-block;
+  margin: 0;
+}
+
+.summary button.menu {
+  -webkit-appearance: none;
+  background: transparent;
+  border: 0;
+  font: inherit;
+  padding: 0;
+  background: -webkit-canvas(drop-down-arrow) 100% 50% no-repeat;
+  padding-right: 11px;
+  -webkit-margin-start: 10px;
+}
+
+html[dir=rtl] .summary button.menu {
+  background-position: 0% 50%;
+  padding-right: 0;
+  padding-left: 11px;
+}
+
+.hbox {
+  display: -webkit-box;
+  -webkit-box-orient:horizontal;
+}
+
+
+.hbox .left {
+   text-align:left;
+   -webkit-box-pack:start;
+   -webkit-inline-box-align:start;
+ }
+ 
+.hbox.start, .vbox.start {
+  -webkit-box-pack:start;
+}
+
+.hbox.end, .vbox.end {
+  -webkit-box-pack:end;
+}
+
+.hbox.center, .vbox.center{
+        -webkit-box-pack: center;
+}
+
+ 
+.hbox .right {
+  text-align:right;
+  -webkit-box-pack:end;
+  -webkit-box-align:end;
+}
+ 
+.vbox {
+  display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-box-align: stretch;
+}
+
+.flex0 {
+  -webkit-box-flex:0;
+}
+
+.flex1 {
+  -webkit-box-flex:1;
+}
+