/* Copyright 2021 The Chromium Authors
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
body:is(:not(.scan), :not(.streaming), .doc-mode-reviewing) #scan-modes-group {
display: none;
}
/* The container of scan box for layout and positioning. */
.barcode-scan-box {
--border-distance: 8px;
--border-width: 4px;
--inner-border-radius: 16px;
opacity: 0;
/* Use padding-top instead of height to make a responsive square, since the
* percentage in padding-top is relative to the width of the containing
* block. */
padding-top: calc(100% / 2);
transition: all var(--exit-easing) var(--moderate1-duration);
visibility: hidden;
width: calc(100% / 2);
}
body.scan.enable-scan-barcode #shutters-group {
display: none;
}
body.enable-scan-barcode .barcode-scan-box {
opacity: 1;
padding-top: calc(100% / 3);
transition: all var(--enter-easing) var(--moderate1-duration);
visibility: visible;
width: calc(100% / 3);
}
/* The inner scan box with a translucent overlay. */
.barcode-scan-box::before {
--offset: calc(var(--border-width) + var(--border-distance));
border-radius: var(--inner-border-radius);
bottom: var(--offset);
box-shadow: 0 0 0 9999px var(--cros-sys-scrim2);
content: '';
left: var(--offset);
position: absolute;
right: var(--offset);
top: var(--offset);
z-index: -1; /* This need to be lower than the corner borders */
}
/* The corner borders of the scan box. */
.barcode-scan-box::after {
-webkit-mask: url(/images/barcode_scan_box_border_mask.svg);
border: var(--border-width) solid var(--cros-sys-illo-color3);
border-radius: calc(var(--inner-border-radius) + var(--border-distance));
box-sizing: border-box;
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
/* TODO(b/172879638): Tune the position and layout after we finalized the
* responsive window design. */
.barcode-chip-container {
--chip-max-width: 420px;
--min-scanbox-distance: 40px;
--text-line-height: 24px;
--text-padding-vertical: 6px;
--chip-height: calc(var(--text-line-height) +
2 * var(--text-padding-vertical));
--expand-button-size: var(--chip-height);
/* Avoid collision with scan-box and preview-box */
--top: max(8px, min(10%, 33.33% - var(--chip-height) -
var(--min-scanbox-distance)));
left: 50%;
max-width: min(80%, var(--chip-max-width));
opacity: 1;
pointer-events: auto;
position: absolute;
top: var(--top);
transform: translateX(-50%);
transition: opacity var(--fast2-duration) linear,
top var(--fast2-duration) var(--standard-easing);
z-index: 50;
}
.barcode-chip-container.invisible {
opacity: 0;
top: calc(var(--top) + 2px);
transition: opacity var(--fast2-duration) linear,
top var(--fast2-duration) var(--standard-easing),
visibility 0s var(--fast2-duration);
}
.barcode-chip-button {
align-items: center;
background: var(--cros-sys-base_elevated);
border-radius: 16px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
display: flex;
font: var(--cros-body-2-font);
gap: 10px;
height: var(--chip-height);
justify-content: center;
max-width: 100%;
padding: 8px 16px;
}
.barcode-chip-button > svg-wrapper {
color: var(--cros-sys-primary);
margin-inline-end: 10px;
}
.barcode-chip-button-content {
color: var(--cros-sys-primary);
line-height: var(--text-line-height);
overflow: hidden;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
.barcode-copy-button:hover {
/* Use linear-gradient to apply multiple background colors. */
background: linear-gradient(
0deg,
var(--cros-sys-hover_on_subtle),
var(--cros-sys-hover_on_subtle)
), var(--cros-sys-base_elevated);
}
.barcode-copy-button {
background: var(--cros-sys-base_elevated);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.2);
cursor: pointer;
height: var(--chip-height);
inset-inline-start: calc(100% + 8px);
position: absolute;
top: 0;
width: var(--chip-height);
z-index: 50;
}
.barcode-copy-button svg-wrapper {
color: var(--cros-sys-primary);
}
.barcode-chip-text {
align-items: flex-start;
background: var(--cros-sys-base_elevated);
border-radius: 20px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
display: flex;
font: var(--cros-body-2-font);
padding-inline: 8px;
}
#barcode-chip-text-content {
color: var(--cros-sys-on_surface);
line-height: var(--text-line-height);
max-width: 100%;
overflow: hidden;
padding: var(--text-padding-vertical) 8px;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
.expanded #barcode-chip-text-content {
/* TODO(b/172879638): Make this responsive */
max-height: calc(var(--text-line-height) * 10);
overflow: auto;
overflow-wrap: break-word;
white-space: pre-wrap;
/* Keep the same width as before to avoid text jumping. */
width: var(--chip-max-width);
}
#barcode-chip-text-expand {
border-radius: 50%;
flex-shrink: 0;
height: var(--expand-button-size);
width: var(--expand-button-size);
.up-icon {
display: none;
}
}
#barcode-chip-text-expand > svg-wrapper {
color: var(--cros-sys-primary);
}
#barcode-chip-text-expand:hover {
/* Use linear-gradient to apply multiple background colors. */
background: linear-gradient(
0deg,
var(--cros-sys-hover_on_subtle),
var(--cros-sys-hover_on_subtle)
), var(--cros-sys-base_elevated);
}
.expanded #barcode-chip-text-expand {
.up-icon {
display: block;
}
.down-icon {
display: none;
}
}
#preview-document-corner-overlay {
--corner-border-width: 6px;
--corner-border-length: 16px;
bottom: 0;
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
}
#preview-document-corner-overlay:not(.show-corner-indicator) :is(.line, .corner) {
display: none;
}
#preview-document-corner-overlay .corner-container {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
#preview-document-corner-overlay :is(.corner, .line) {
position: absolute;
transition-duration: var(--moderate2-duration);
transition-timing-function: var(--enter-easing);
}
#preview-document-corner-overlay .line {
transform-origin: center left;
transition-property: transform, display;
}
#preview-document-corner-overlay .corner div {
background: var(--cros-sys-illo-color3);
}
#preview-document-corner-overlay .corner {
height: calc(var(--corner-border-length) * 2);
transform: translate(-50%, -50%);
transition-property: left, top, display;
width: calc(var(--corner-border-length) * 2);
}
#preview-document-corner-overlay .corner .dot {
border-radius: 50%;
height: var(--corner-border-width);
left: calc(50% - calc(var(--corner-border-width) / 2));
position: absolute;
top: calc(50% - calc(var(--corner-border-width) / 2));
width: var(--corner-border-width);
}
#preview-document-corner-overlay .corner .line {
height: var(--corner-border-width);
left: 50%;
top: calc(50% - calc(var(--corner-border-width) / 2));
width: var(--corner-border-length);
}
#preview-document-corner-overlay .side.line {
background: var(--cros-sys-illo-color3);
height: 1px;
width: 1px;
}
#preview-document-corner-overlay .no-document-toast {
background: var(--cros-sys-base_elevated);
border-radius: var(--border-radius-rounded-with-short-side);
color: var(--cros-sys-on_surface);
display: inline-block;
font: var(--cros-body-2-font);
left: 50%;
padding: 8px 16px;
position: absolute;
text-align: center;
top: 22px;
transform: translateX(-50%);
transition: visibility var(--fast1-duration) ease-in;
white-space: nowrap;
}
body.doc-mode-reviewing :is(#back-to-review-document, #document-page-count) {
visibility: visible;
}
#back-to-review-document {
visibility: hidden;
}
#document-page-count {
align-items: center;
color: var(--cros-sys-on_surface);
display: flex;
font: var(--cros-body-2-font);
justify-content: center;
visibility: hidden;
}
#view-document-review {
--buttons-container-height: calc(var(--bottom-line) * 2);
--preview-area-padding-inline-end: 32px;
--preview-area-padding-inline-start: 32px;
display: flex;
}
#view-document-review:has(.page:nth-child(2)) {
--preview-area-padding-inline-start: 8px;
}
#view-document-review .document-pages {
background: var(--cros-sys-base_elevated);
counter-reset: page-count;
overflow: auto;
padding: 16px;
}
#view-document-review:not(:has(.page:nth-child(2))) .document-pages {
display: none;
}
#view-document-review .page {
border-radius: 8px;
display: flex;
gap: 4px;
outline-offset: 0;
padding: 20px 20px 20px 0;
}
#view-document-review .page.active {
background: var(--cros-sys-highlight_shape);
}
#view-document-review .delete-container {
align-items: center;
display: flex;
justify-content: center;
position: relative;
width: 48px;
}
#view-document-review .delete-container::before {
align-self: flex-start;
color: var(--cros-sys-on_surface);
content: counter(page-count);
counter-increment: page-count;
font: var(--cros-body-2-font);
position: absolute;
}
#view-document-review .delete {
border-radius: 12px;
visibility: hidden;
}
#view-document-review .page.active .delete {
visibility: unset;
}
#view-document-review .thumbnail-container {
align-items: center;
display: flex;
justify-content: center;
max-height: 90px;
min-height: 60px;
width: 60px;
}
#view-document-review .thumbnail {
border-radius: 6px;
max-height: 100%;
max-width: 100%;
}
#view-document-review .document-preview {
display: flex;
flex: 1;
flex-direction: column;
/* Default min-width of flex items is auto. */
min-width: 0;
padding-inline-end: var(--preview-area-padding-inline-end);
padding-inline-start: var(--preview-area-padding-inline-start);
padding-top: 8px;
position: relative;
}
#view-document-review .preview-area {
background: var(--cros-sys-app_base_shaded);
border-radius: 12px;
flex: 1;
/* Default min-height of column direction flex items is auto. */
min-height: 0;
}
#view-document-review .buttons-container {
height: var(--buttons-container-height);
position: relative;
}
#view-document-review .button-group.left {
inset-inline-start: 0;
}
#view-document-review .button-group.right {
inset-inline-end: 0;
}
#view-document-review .icon-button {
height: 32px;
width: 32px;
}
.document-preview-mode {
display: none;
}
.document-preview-mode.show {
display: contents;
}
.document-preview-mode .separator {
background-color: var(--cros-sys-separator);
height: 32px;
width: 1px;
}
.document-preview-mode .image {
max-height: 100%;
max-width: 100%;
}
.document-preview-mode .preview-area {
align-items: center;
display: flex;
justify-content: center;
}
#view-document-review:has(.page:nth-child(2)) .document-preview-mode button[i18n-text=label_save_photo_document] {
display: none;
}
.document-preview-mode button[i18n-label=add_new_page_button] {
display: none;
}
.document-preview-mode button[i18n-label=label_share] {
display: none;
}
.document-preview-mode button[i18n-label=fix_page_button] {
display: none;
}
.document-preview-mode .menu-item-content {
display: flex;
gap: 16px;
}
.document-preview-mode .menu-item-icon {
margin: 0;
}
.document-fix-mode {
display: none;
}
.document-fix-mode.show {
display: contents;
}
.document-fix-mode .image-container {
position: relative;
touch-action: none;
transform-origin: left top;
}
.document-fix-mode .image-container .image {
height: 100%;
position: absolute;
width: 100%;
}
.document-fix-mode .crop-area-container {
height: 100%;
pointer-events: none;
position: absolute;
touch-action: none;
width: 100%;
}
.document-fix-mode .crop-area {
/* TODO(pihsun): Change this after the new token is added. */
fill: color-mix(in srgb, var(--cros-sys-illo-color3) 8%, transparent);
stroke: var(--cros-sys-illo-color3);
stroke-width: 2px;
}
.document-fix-mode .dot {
--icon-size: 12px;
--focus-size: 32px;
border-radius: 50%;
height: 48px;
position: absolute;
touch-action: none;
transform: translate(-50%, -50%);
width: 48px;
}
.document-fix-mode .dot:focus-visible {
outline: none;
}
.document-fix-mode .dot::before,
.document-fix-mode .dot::after {
border-radius: 50%;
content: '';
height: var(--icon-size);
left: 50%;
pointer-events: none;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: var(--icon-size);
}
.document-fix-mode .dot::before {
background: var(--cros-sys-illo-color3);
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}
.document-fix-mode .dot::after {
/* TODO(pihsun): Change this after the new token is added. */
background: color-mix(in srgb, var(--cros-sys-illo-color3) 8%, transparent);
border: 2px solid var(--cros-sys-illo-color3);
box-sizing: border-box;
}
.document-fix-mode .dot.dragging::after,
body.keyboard-navigation .document-fix-mode .dot:focus::after {
height: var(--focus-size);
transition-duration: var(--fast1-duration);
transition-property: width, height;
width: var(--focus-size);
}
.document-fix-mode .review-crop-rotation-button-group {
bottom: 0;
left: 50%;
position: absolute;
top: calc(100% - calc(var(--bottom-line) * 2));
transform: translateX(-50%);
}
@media (min-width: 680px) {
#view-document-review .thumbnail-container {
max-height: 120px;
min-height: 96px;
width: 120px;
}
#view-document-review :is(
button[i18n-label=label_share],
button[i18n-label=fix_page_button],
button[i18n-label=add_new_page_button]
) {
display: block;
}
.document-preview-mode #doc-scan-menu-button {
display: none;
}
}
Codebase Browser
chromium