chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css

/* Copyright (c) 2013 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 {
  height: 100%;
}

body {
  -webkit-app-region: drag;
  background-color: transparent;
  color: #999;
  font-size: 80%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Click events are not received in draggable area. Making all clickable areas
 * not draggable to receive click events.
 * TODO(bshe): Remove this when http://crbug.com/142275 fixed. */
.dialog-topbar #navstrip,
.overlay-container .page,
#author-website,
/* TODO(bshe): Once http://crbug.com/369651 fixed, use .image-picker instead of
 * #category-container. */
#category-container {
  -webkit-app-region: no-drag;
}

.dialog-container {
  background-color: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

.dialog-topbar {
  -webkit-box-align: center;
  display: block;
  height: 100%;
  overflow: visible;
  padding: unset;
  position: relative;
  width: 192px;
}

.dialog-topbar .spacer {
  -webkit-box-flex: 1;
}

#categories-list {
  -webkit-box-orient: horizontal;
  display: block;
  height: 100%;
  outline: none;
  pointer-events: none;
  width: 100%;
}

#categories-list > li {
  -webkit-box-align: center;
  border-top: unset;
  color: #777;
  display: -webkit-box;
  height: 31px;
  margin-top: 8px;
  overflow: hidden;
  pointer-events: auto;
  transition: border-top 130ms ease;
  user-select: none;
}

#categories-list:not([disabled]) > li:hover {
  border-top-color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

#categories-list > li[selected] {
  background-color: rgb(210, 227, 252);
  border-radius: 0 20px 20px 0;
  color: rgb(70, 78, 90);
  cursor: default;
}

#categories-list > li > div {
  color: rgb(95, 99, 104);
  font-family: 'Roboto';
  font-size: 12px;
  font-weight: 500;
  line-height: 34px;
  padding: 0 30px;
  position: relative;
  transition: all 500ms ease;
  width: 100%;
}

.ink {
  background: rgb(232, 240, 254);
  border-radius: 100%;
  position: absolute;
  transform: scale(0);
}

.ripple-category-list-item-animation {
  animation: ripple-category-list-item 500ms linear;
}

#categories-list > li[selected] > div {
  color: rgb(26, 115, 232);
}

#categories-list:focus > li[selected] {
  background-color: rgb(210, 227, 252);
}

.preview-animation #categories-list > li {
  pointer-events: none;
}

.close {
  background-position: center;
  background-repeat: no-repeat;
  height: 14px;
  padding: 10px;
  position: absolute;
  right: 0;
  top: 0;
  width: 14px;
}

.dialog-main {
  display: flex;
  flex: 1;
}

#category-container {
  flex: 1;
  overflow-y: hidden;
  position: relative;
}

.image-picker {
  display: block;
  /* Set font size to 0 to remove the extra vertical margin between two rows of
   * thumbnails.
   * TODO(bshe): Find the root cause of the margin. */
  font-size: 0;
  height: 100%;
  outline: none;
  overflow-y: auto;
}

.image-picker .spacer {
  display: block;
}

.image-picker > * {
  display: inline-block;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.image-picker [role=listitem] {
  background-color: rgb(241, 243, 244);
  border-radius: 4px;
  height: 160px;
  margin-bottom: 8px;
  margin-inline-end: 8px;
  outline: none;
  position: relative;
  width: 160px;
}

.image-picker .check {
  background-image: url(../images/ui/check.png);
  display: none;
  height: 32px;
  left: 38px;
  position: absolute;
  top: 18px;
  width: 32px;
  z-index: 2;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background: #aaa;
}

::-webkit-scrollbar-thumb:hover {
  background: #888;
}

.image-picker img {
  height: unset;
  position: absolute;
  width: unset;
}

.image-picker img:not(.slide-show) {
  animation: fade-in 250ms;
}

.image-picker[disabled]~.bottom-bar #online-wallpaper-attribute,
.image-picker[disabled] .check {
  visibility: hidden;
}

.image-picker[disabled] {
  -webkit-filter: grayscale(1);
}

#wallpaper-attribute {
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

.bottom-bar {
  display: none;
}

#online-wallpaper-attribute {
  display: -webkit-box;
}

#attribute-image {
  height: 34px;
  margin-inline-end: 10px;
  width: 54px;
}

#author-website {
  color: #999;
  overflow: hidden;
  white-space: nowrap;
  width: 240px;
}

/* [hidden] does display:none, but its priority is too low. */
[hidden],
body[custom] [visibleif]:not([visibleif~='custom']),
body:not([custom]) [visibleif~='custom'] {
  display: none !important;
}

body[surprise-me-disabled] [visibleif]:not([visibleif~='surprise-me-disabled']),
body:not([surprise-me-disabled]) [visibleif~='surprise-me-disabled'] {
  display: none !important;
}

.progress-bar {
  background-color: rgba(255, 255, 255, 0.7);
  bottom: 0;
  height: 4px;
  position: absolute;
  width: 100%;
}

.image-picker-offline .progress-bar {
  display: none;
}

.progress-track {
  background-color: rgb(66, 129, 244);
  border-radius: 4px;
  height: 100%;
  transition: width 1ms linear;
  width: 0;
}

.overlay-container {
  -webkit-box-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  background-color: rgba(25, 25, 25, 0.25);
  bottom: 0;
  display: -webkit-box;
  left: 0;
  overflow: auto;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 4;
}

.overlay-container .page {
  -webkit-box-orient: vertical;
  background: rgb(255, 255, 255);
  border-radius: 3px;
  box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
  color: #333;
  display: -webkit-box;
  padding: 20px;
  position: relative;
  width: 302px;
}

#error-container {
  z-index: 5;
}

.overlay-container .close {
  background-image: url(../images/ui/close-overlay.png);
}

.overlay-container .close:hover {
  background-image: url(../images/ui/close-overlay-hover.png);
}

#wallpaper-selection-container #content div {
  margin: 20px 0 5px 0;
}

#wallpaper-selection-container #warning span {
  line-height: 17px;
}

#wallpaper-selection-container select {
  height: 30px;
}

#wallpaper-selection-container input[type='file']::-webkit-file-upload-button {
  height: 30px;
}

#wallpaper-selection-container .remember-icon {
  content: url(../images/ui/remember.png);
}

#dialog-header {
  display: flex;
  height: 40px;
}

.dialog-body {
  display: flex;
  height: 100%;
  min-height: 0;
}

.image-picker [role=listitem].first-row {
  margin-top: 132px;
}

.image-picker [role=listitem][selected] {
  background-color: rgba(26, 115, 232, 0.08);
}

.image-picker [role=listitem]:not([selected]):focus {
  border: 2px solid rgba(26, 115, 232, 0.4);
  box-sizing: border-box;
}

.image-picker [role=listitem][selected]:not(.daily-refresh-item) img {
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(32, 33, 36, 0.17);
  transform: scale(0.8);
  transition: transform 240ms;
}

.image-picker [role=listitem][selected] .check {
  background-image: url(../images/ui/selected_wallpaper_checkmark.svg);
  background-repeat: no-repeat;
  display: block;
  left: 128px;
  top: 8px;
}

.image-picker [role=listitem][selected] .check:focus {
  outline: none;
}

.image-picker::-webkit-scrollbar-thumb {
  background: #888;
  display: none;
}

.image-picker.show-scroll-bar::-webkit-scrollbar-thumb {
  display: block;
}

#dialog-header > div {
  -webkit-app-region: no-drag;
  display: block;
  height: 24px;
  position: absolute;
  top: 4px;
  width: 24px;
}

#minimize-button {
  background-image: url(../images/ui/button_minimize.png);
  right: 52px;
}

#close-button {
  background-image: url(../images/ui/button_close.png);
  right: 12px;
}

#top-header {
  -webkit-app-region: no-drag;
  background-color: #fff;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.24), 0 0 24px rgba(0, 0, 0, 0.12);
  display: flex;
  height: 48px;
  position: absolute;
  top: 0;
  visibility: hidden;  /* Need this for correct positioning. */
  width: 698px;
}

.preview-mode:not(.wallpaper-set-successfully) #top-header {
  visibility: visible;
}

.top-header-contents {
  display: none;
  font-family: 'Roboto';
  font-size: 13px;
  font-weight: 500;
}

:not(.no-images) .top-header-contents {
  display: flex;
}

.top-header-contents > div:not(.divider) {
  padding-top: 16px;
}

.top-header-contents #cancel-preview-wallpaper {
  background-image: url(../images/ui/left_arrow.svg);
  background-repeat: no-repeat;
  background-size: 20px 20px;
  height: 4px;
  margin-inline-start: 16px;
  margin-top: 13px;
  padding-inline-start: 32px;
}

.top-header-contents #cancel-preview-wallpaper:focus {
  outline-color: rgba(26, 115, 232, 0.4);
}

.top-header-contents #image-title {
  color: rgb(32, 33, 36);
  max-width: 148px;
  overflow: hidden;
  padding-inline-end: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-header-contents .divider {
  border-inline-start: 1px solid rgb(232, 234, 237);
  height: 34px;
  margin-top: 8px;
}

.top-header-contents #wallpaper-description {
  color: rgb(128, 134, 139);
  max-width: 312px;
  overflow: hidden;
  padding-inline-start: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-wallpaper .top-header-contents #wallpaper-description {
  max-width: 196px;
}

.custom-wallpaper .top-header-contents #wallpaper-description {
  color: rgb(32, 33, 36);
}

.daily-wallpaper .top-header-contents #wallpaper-description {
  max-width: 226px;
}

.top-header-contents .more-options {
  display: flex;
  position: absolute;
  right: 8px;
}

html[dir='rtl'] .top-header-contents .more-options {
  padding-inline-start: 96px;
  position: unset;
}

.top-header-contents .more-options > div,
#current-wallpaper-more-options > div {
  border: 1px solid rgb(218, 220, 224);
  border-radius: 16px;
}

.top-header-contents .more-options > div:focus,
#current-wallpaper-more-options > div:focus {
  border: 2px solid rgba(26, 115, 232, 0.4);
  box-sizing: border-box;
  outline: none;
}

.top-header-contents .more-options > div {
  background-color: #fff;
  color: rgb(26, 115, 232);
  display: none;
  margin-top: -8px;
  padding: 8px 24px;
}

.top-header-contents .icon {
  background-repeat: no-repeat;
  padding-inline-end: 8px;
  width: 16px;
}

.top-header-contents .more-options .center-button,
.top-header-contents .more-options .center-cropped-button {
  background-color: #fff;
  color: rgb(128, 134, 139);
  padding-inline-start: 28px;
  z-index: 0;
}

.top-header-contents .more-options .center-button.disabled,
.top-header-contents .more-options .center-cropped-button.disabled {
  background-color: rgb(232, 240, 254);
  color: rgb(26, 115, 232);
  pointer-events: none;
  z-index: 1;
}

.top-header-contents .more-options .center-button {
  padding-inline-end: 36px;
}

.top-header-contents .more-options .center-cropped-button {
  margin-inline-start: -24px;
}

.top-header-contents .center-button .icon,
#current-wallpaper-more-options #center .icon {
  background-image: url(../images/ui/center_layout.svg);
}

.top-header-contents .center-button.disabled .icon,
#current-wallpaper-more-options #center.disabled .icon {
  background-image: url(../images/ui/center_layout_disabled.svg);
}

.top-header-contents .center-cropped-button .icon,
#current-wallpaper-more-options #center-cropped .icon {
  background-image: url(../images/ui/center_cropped_layout.svg);
}

.top-header-contents .center-cropped-button.disabled .icon,
#current-wallpaper-more-options #center-cropped.disabled .icon {
  background-image: url(../images/ui/center_cropped_layout_disabled.svg);
}

.top-header-contents #confirm-preview-wallpaper {
  margin-inline-start: 96px;
}

.daily-wallpaper .top-header-contents #confirm-preview-wallpaper {
  margin-inline-start: 8px;
}

.top-header-contents #refresh-wallpaper {
  margin-inline-start: 16px;
}

.preview-mode.custom-wallpaper .more-options .custom-option,
.preview-mode.daily-wallpaper .more-options .daily-option,
.preview-mode:not(.custom-wallpaper):not(.daily-option) .more-options :not(.custom-option):not(.daily-option) {
  display: flex;
}

.wallpaper-set-successfully .dialog-container,
.preview-mode .dialog-container,
.custom-wallpaper .top-header-contents #image-title,
.custom-wallpaper .top-header-contents .divider {
  display: none;
}

.preview-mode .more-options .preview-option {
  display: flex;
}

#preview-canvas {
  display: none;
}

.preview-mode:not(.wallpaper-set-successfully) #preview-canvas {
  -webkit-app-region: no-drag;
  display: block;
  height: 100%;
  width: 100%;
}

#no-images-message {
  display: block;
  position: absolute;
  visibility: hidden;  /* Need this for correct positioning. */
}

.no-images #no-images-message {
  visibility: visible;
}

.no-images #no-images-message .icon {
  background-image: url(../images/ui/no_images_illustration.png);
  background-repeat: no-repeat;
  height: 96px;
  width: 96px;
}

.no-images #no-images-message .text {
   padding-top: 15px;
}

.slide-show {
  transition: opacity 1000ms;
}

.daily-refresh-banner {
  background-color: rgba(228, 228, 228, 0.9);
  bottom: 0;
  height: 40px;
  position: absolute;
  width: 100%;
}

.daily-refresh-slider {
  background-color: rgba(128, 134, 139, 0.4);
  border-radius: 6px;
  height: 12px;
  left: 116px;
  pointer-events: auto;
  position: absolute;
  top: 15px;
  transition: 400ms;
  width: 30px;
}

.daily-refresh-slider:focus {
  outline: none;
}

.image-picker-offline .daily-refresh-slider,
.daily-refresh-disabled .daily-refresh-slider {
  pointer-events: none;
}

.image-picker-offline img.slide-show,
.daily-refresh-disabled img.slide-show {
  -webkit-filter: grayscale(1);
}

.image-picker-offline img:not([offline]) {
  opacity: 0.5;
}

.daily-refresh-slider::before {
  background-color: #fff;
  border-radius: 50%;
  content: '';
  height: 16px;
  left: -2px;
  position: absolute;
  top: -2px;
  transition: 400ms;
  width: 16px;
}

.daily-refresh-item.checked .daily-refresh-slider  {
  background-color: rgb(26, 115, 232, 0.6);
}

.daily-refresh-item.checked .daily-refresh-slider::before {
  background-color: rgb(26, 115, 232);
  transform: translateX(16px);
}

.daily-refresh-item .daily-refresh-slider .ripple-circle {
  background: #000;
  border-radius: 50%;
  height: 36px;
  left: -12px;
  opacity: 0.18;
  position: absolute;
  top: -12px;
  transform: scale(0);
  width: 36px;
}

.daily-refresh-item.checked .daily-refresh-slider .ripple-circle {
  background-color: rgb(30, 144, 255);
  left: 4px;
}

.daily-refresh-item.ripple-animation .daily-refresh-slider .ripple-circle {
  animation: ripple 240ms;
  animation-delay: 120ms;
}

.daily-refresh-item:not(.ripple-animation) .daily-refresh-slider:focus .ripple-circle {
  transform: scale(1);
}

.daily-refresh-label {
  color: rgb(26, 115, 232);
  font-family: 'Roboto';
  font-size: 13px;
  font-weight: 500;
  left: 18px;
  position: absolute;
  top: 13px;
}

#current-wallpaper-info-bar {
  background-color: #fff;
  border-bottom: 1px solid rgb(218, 220, 224);
  display: flex;
  flex-direction: row;
  font-family: 'Roboto';
  font-weight: 500;
  height: 100px;
  padding-bottom: 16px;
  position: absolute;
  visibility: hidden;  /* Need this for correct positioning. */
}

:not(.preview-mode) #current-wallpaper-info-bar.show-info-bar {
  visibility: visible;
}

.preview-animation {
  animation: fade-in 800ms;
  animation-direction: reverse;
}

#current-wallpaper-image {
  border-radius: 4px;
  height: 100px;
  margin-inline-end: 16px;
  width: 100px;
}

#currently-set-message {
  color: rgb(128, 134, 139);
  font-size: 13px;
}

#current-wallpaper-title {
  color: rgb(32, 33, 36);
  font-size: 14px;
  padding-top: 9px;
}

#current-wallpaper-description {
  color: rgb(32, 33, 36);
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  padding-top: 14px;
}

#current-wallpaper-description.small-font {
  font-size: 11px;
  padding-top: 4px;
}

#current-wallpaper-more-info {
  overflow: hidden;
  text-overflow: ellipsis;
}

#current-wallpaper-more-options {
  color: rgb(26, 115, 232);
  display: flex;
  flex-direction: column;
  font-size: 12px;
  position: absolute;
  right: 0;
}

html[dir='rtl'] #current-wallpaper-more-options {
  right: 420px;
}

#current-wallpaper-more-options > div {
  display: flex;
  padding: 8px 0;
}

#current-wallpaper-more-options #center,
#current-wallpaper-more-options #center-cropped {
  color: rgb(128, 134, 139);
}

#current-wallpaper-more-options #center.disabled,
#current-wallpaper-more-options #center-cropped.disabled {
  color: rgb(26, 115, 232);
  pointer-events: none;
}

#current-wallpaper-more-options .text {
  padding-top: 1px;
}

#current-wallpaper-more-options .icon {
  background-repeat: no-repeat;
  height: 16px;
  padding-inline-end: 8px;
  width: 16px;
}

#current-wallpaper-more-options #refresh .icon {
  background-image: url(../images/ui/current_wallpaper_refresh.svg);
}

#current-wallpaper-more-options #explore .icon {
  background-image: url(../images/ui/current_wallpaper_explore.svg);
}

#message-container {
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 16px;
  bottom: 12px;
  color: #fff;
  display: block;
  padding: 8px 28px;
  position: absolute;
  visibility: hidden;  /* Need this for correct positioning. */
  z-index: 4;
}

#preview-spinner,
#current-wallpaper-spinner {
  background: url(chrome://resources/images/throbber_medium.svg) no-repeat;
  position: absolute;
}

#preview-spinner {
  height: 32px;
  width: 32px;
}

#current-wallpaper-spinner {
  height: 24px;
  left: 38px;
  top: 38px;
  width: 24px;
}

@keyframes fade-in {
  from { filter: blur(15px);
         opacity: 0;
       }
  to { filter: none;
       opacity: 1;
     }
}

@keyframes ripple {
  0%, 100% { transform: scale(0);
           }
  90% { opacity: 0.06;
        transform: scale(1);
      }
}

@keyframes ripple-category-list-item {
  100% { opacity: 0;
         transform: scale(2.5);
       }
}