ash/webui/print_management/resources/print_management_shared.css

/* 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/cr_elements/cr_shared_style.css.js
 * #import=chrome://resources/cr_elements/cr_shared_vars.css.js
 * #import=chrome://resources/cr_elements/chromeos/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-top: 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;
  padding: 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;
  }

  :host-context(body.jelly-enabled) #headerContainer {
    margin-inline: 20px;
  }

  :host-context(body.jelly-enabled) .data-container {
    padding: 0 20px;
  }

  .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;
  }

  :host-context(body.jelly-enabled) #headerContainer {
    margin-inline: 20px;
  }

  :host-context(body.jelly-enabled) .data-container {
    padding: 0 20px;
  }

  .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;
  }

  :host-context(body.jelly-enabled) #headerContainer {
    margin-inline: 32px;
  }

  :host-context(body.jelly-enabled) .data-container {
    padding: 0 32px;
  }

  .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;
  }

  :host-context(body.jelly-enabled) #headerContainer {
    margin-inline: 72px;
  }

  :host-context(body.jelly-enabled) .data-container {
    padding: 0 72px;
  }

  .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);
  }
}