/* Copyright 2022 The Chromium Authors
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
/* #css_wrapper_metadata_start
* #type=style
* #import=chrome://resources/ash/common/cr_elements/cr_shared_style.css.js
* #import=chrome://resources/ash/common/cr_elements/cr_shared_vars.css.js
* #import=chrome://resources/ash/common/cr_elements/cros_color_overrides.css.js
* #include=cr-shared-style cros-color-overrides
* #css_wrapper_metadata_end */
:host {
/* Margin on hover for responsive layout adjusts based on padded-left minus
16px to align left. */
--active-status-hover-margin: calc(var(--padded-left) - 16px);
}
:host-context(body.jelly-enabled) .main-container {
display: flex;
flex-flow: column;
height: 100%;
}
:host-context(body.jelly-enabled) .margin-border {
margin-inline: 16px;
}
:host-context(body.jelly-enabled) .data-container {
background-color: var(--cros-sys-app_base);
border-radius: 16px 16px 0 0;
flex: 1 1 auto;
margin-inline: 16px;
padding-inline: 16px;
}
:host-context(body.jelly-enabled) .file-icon-blue {
--iron-icon-fill-color: var(--cros-sys-progress);
}
:host-context(body.jelly-enabled) .file-icon-gray {
--iron-icon-fill-color: var(--cros-sys-secondary);
}
:host-context(body.jelly-enabled) .file-icon-green {
--iron-icon-fill-color: var(--cros-sys-positive);
}
:host-context(body.jelly-enabled) .file-icon-red {
--iron-icon-fill-color: var(--cros-sys-error);
}
:host-context(body.jelly-enabled) .file-icon-yellow {
--iron-icon-fill-color: var(--cros-sys-warning);
}
:host-context(body.jelly-enabled) #activeStatusContainer:hover {
background-color: var(--cros-sys-hover_on_subtle);
}
:host-context(body.jelly-enabled) #headerContainer {
align-items: center;
border-bottom: none;
display: flex;
flex: 0 1 auto;
height: 64px;
margin: 8px 32px;
padding: 0;
}
/** TODO(b/293601228): Remove CSS rules for cr-button once the element is
replaced with cros-button which already handles this styling. **/
:host-context(body.jelly-enabled) cr-button {
--iron-icon-height: 20px;
--iron-icon-width: 20px;
border-radius: 18px;
gap: unset;
height: 36px;
padding: unset;
padding-inline: 16px;
margin: 0;
}
:host-context(body.jelly-enabled) cr-button:has(> iron-icon[
slot="prefix-icon"]) {
padding-inline: 12px 16px;
}
:host-context(body.jelly-enabled) cr-button > iron-icon[
slot="prefix-icon"] {
padding-inline: 0 8px;
}
:host-context(body.jelly-enabled) cr-button:has(> iron-icon[
slot="suffix-icon"]) {
padding-inline: 16px 12px;
}
:host-context(body.jelly-enabled) cr-button > iron-icon[slot="suffix-icon"] {
padding-inline: 8px 0;
}
.flex-center {
align-items: center;
display: flex;
}
.file-icon-blue {
--iron-icon-fill-color: var(--google-blue-600);
}
.file-icon-gray {
--iron-icon-fill-color: var(--google-grey-700);
}
.file-icon-green {
--iron-icon-fill-color: var(--google-green-600);
}
.file-icon-red {
--iron-icon-fill-color: var(--google-red-600);
}
.file-icon-yellow {
--iron-icon-fill-color: var(--google-yellow-600);
}
@media (prefers-color-scheme: dark) {
:host-context(body.jelly-enabled) .file-icon-blue {
--iron-icon-fill-color: var(--cros-sys-progress);
}
:host-context(body.jelly-enabled) .file-icon-gray {
--iron-icon-fill-color: var(--cros-sys-secondary);
}
:host-context(body.jelly-enabled) .file-icon-green {
--iron-icon-fill-color: var(--cros-sys-positive);
}
:host-context(body.jelly-enabled) .file-icon-red {
--iron-icon-fill-color: var(--cros-sys-error);
}
:host-context(body.jelly-enabled) .file-icon-yellow {
--iron-icon-fill-color: var(--cros-sys-warning);
}
.file-icon-blue {
--iron-icon-fill-color: var(--google-blue-300);
}
.file-icon-gray {
--iron-icon-fill-color: var(--google-grey-300);
}
.file-icon-green {
--iron-icon-fill-color: var(--google-green-300);
}
.file-icon-red {
--iron-icon-fill-color: var(--google-red-300);
}
.file-icon-yellow {
--iron-icon-fill-color: var(--google-yellow-300);
}
}
.overflow-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#activeStatusContainer:hover {
background-color: rgba(var(--google-blue-600-rgb), 0.06);
border-radius: 16px;
margin-inline-start: 16px;
padding-inline-start: 16px;
}
@media (min-width: 600px) and (max-width: 767px) {
:host {
--padded-left: 32px;
}
.date-column {
width: 56px;
}
.file-name-column {
width: 184px;
}
.file-name-header-column {
width: 224px;
}
:host-context(body:not(.jelly-enabled)) .margin-border {
margin-inline: 40px;
}
.padded-left {
margin-inline-start: var(--padded-left);
}
.printer-name-column {
width: 68px;
}
.status-column {
width: 124px;
}
#activeStatusContainer:hover {
margin-inline-start: var(--active-status-hover-margin);
}
}
@media (min-width: 768px) and (max-width: 959px) {
:host {
--padded-left: 40px;
}
.date-column {
width: 82px;
}
.file-name-column {
width: 224px;
}
.file-name-header-column {
width: 264px;
}
:host-context(body:not(.jelly-enabled)) .margin-border {
margin-inline: 40px;
}
.padded-left {
margin-inline-start: var(--padded-left);
}
.printer-name-column {
width: 88px;
}
.status-column {
width: 182px;
}
#activeStatusContainer:hover {
margin-inline-start: var(--active-status-hover-margin);
}
}
@media (min-width: 960px) and (max-width: 1279px) {
:host {
--padded-left: 48px;
}
.date-column {
width: 82px;
}
.file-name-column {
width: 280px;
}
.file-name-header-column {
width: 320px;
}
.margin-border {
margin-inline: 64px;
}
.padded-left {
margin-inline-start: var(--padded-left);
}
.printer-name-column {
width: 152px;
}
.status-column {
width: 182px;
}
#activeStatusContainer:hover {
margin-inline-start: var(--active-status-hover-margin);
}
}
@media (min-width: 1280px) {
:host {
--padded-left: 56px;
}
.date-column {
width: 144px;
}
.file-name-column {
width: 316px;
}
.file-name-header-column {
width: 356px;
}
:host-context(body:not(.jelly-enabled)) .margin-border {
margin-inline: 144px;
}
.padded-left {
margin-inline-start: var(--padded-left);
}
.printer-name-column {
width: 190px;
}
.status-column {
width: 182px;
}
#activeStatusContainer:hover {
margin-inline-start: var(--active-status-hover-margin);
}
}
Codebase Browser
chromium