[FilesRefresh] Update colors/styles for change default dialog
Demo: http://screen/B7KiTAXHhngHeKi.png
Bug: b:242938596
Change-Id: I412ce2bdd5955689e9eb7fa29750ccf553011eae
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4402285
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Commit-Queue: Wenbo Jie <wenbojie@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1128991}
diff --git a/ui/file_manager/file_manager/BUILD.gn b/ui/file_manager/file_manager/BUILD.gn
index d2596f1c..d68315c 100644
--- a/ui/file_manager/file_manager/BUILD.gn
+++ b/ui/file_manager/file_manager/BUILD.gn
@@ -41,6 +41,7 @@
"foreground/css/combobutton.css",
"foreground/css/combobutton_gm3.css",
"foreground/css/common.css",
+ "foreground/css/common_gm3.css",
"foreground/css/file_manager.css",
"foreground/css/file_manager_gm3.css",
"foreground/css/file_types.css",
diff --git a/ui/file_manager/file_manager/foreground/css/common_gm3.css b/ui/file_manager/file_manager/foreground/css/common_gm3.css
new file mode 100644
index 0000000..ab1c0ba
--- /dev/null
+++ b/ui/file_manager/file_manager/foreground/css/common_gm3.css
@@ -0,0 +1,428 @@
+/* Copyright 2023 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+/* Special attribute to hide elements. */
+[hidden] {
+ display: none !important;
+}
+
+cr-button {
+ --active-bg: none; /* prevent dark-mode activation color */
+ box-shadow: none;
+}
+
+/* "chrome-menu" class overrides some standard menu.css styles, to make custom
+ menus in FileBrowser look like native ChromeOS menus. */
+
+cr-menu.chrome-menu {
+ background-color: var(--cros-bg-color-elevation-2);
+ border-radius: 4px;
+ box-shadow: var(--cros-elevation-2-shadow);
+ color: var(--cros-menu-label-color);
+ outline: none;
+ overflow: hidden;
+ padding: 8px 0;
+ transition: opacity 200ms ease-in;
+ z-index: 600; /* Must be below the overlay pane (1000). */
+}
+
+cr-menu.chrome-menu[hidden] {
+ display: block !important; /* Overrides default [hidden] for animation. */
+ opacity: 0;
+ pointer-events: none;
+ visibility: hidden;
+}
+
+cr-menu.chrome-menu.hide-delayed[hidden] {
+ transition-delay: 120ms;
+ transition-property: opacity, visibility;
+}
+
+cr-menu.chrome-menu > :not(hr) {
+ background-position: right 10px center;
+ background-repeat: no-repeat;
+ line-height: 32px;
+ outline: none;
+ padding: 0 8px;
+}
+
+html[dir='rtl'] cr-menu.chrome-menu > :not(hr) {
+ background-position: left 10px center;
+}
+
+cr-menu.chrome-menu > cr-menu-item[disabled] {
+ color: var(--cros-text-color-disabled);
+ pointer-events: none;
+}
+
+cr-menu.chrome-menu > cr-menu-item#volume-space-info[disabled] {
+ color: inherit;
+ pointer-events: none;
+}
+
+cr-menu.chrome-menu > cr-menu-item[disabled] > .icon.start {
+ opacity: 0.20;
+}
+
+cr-menu.chrome-menu > hr {
+ background: var(--cros-separator-color);
+ height: 1px;
+ margin: 4px 0;
+}
+
+cr-menu.chrome-menu > hr:first-child {
+ display: none;
+}
+
+cr-menu.chrome-menu > cr-menu-item[checked]::after {
+ -webkit-mask-image: url(../images/common/ic_selected.svg);
+ -webkit-mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ background-color: var(--cros-icon-color-prominent);
+ content: '';
+ float: right;
+ height: 32px;
+ width: 20px;
+}
+
+html[dir='rtl'] cr-menu.chrome-menu > cr-menu-item[checked]::after {
+ float: left;
+}
+
+cr-menu.chrome-menu > [checked]::before {
+ display: none;
+}
+
+/* Style for <button>s to have similar style with Polymer's <paper-button>. */
+.imitate-paper-button {
+ background: transparent;
+ border: 0;
+ border-image: none;
+ border-radius: 3px;
+ box-sizing: border-box;
+ color: inherit;
+ cursor: pointer;
+ display: inline-block;
+ font: inherit;
+ height: auto;
+ margin: 0 0.29em;
+ min-width: 5.14em;
+ outline: none;
+ overflow: hidden;
+ padding: 0.6em 0.57em;
+ position: relative;
+ text-align: center;
+ text-transform: uppercase;
+ user-select: none;
+ z-index: 0;
+}
+
+.cr-dialog-container .cr-dialog-buttons > button {
+ background-color: var(--cros-button-background-color-secondary);
+ border: 0;
+ border-radius: 4px;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ font-size: 13px;
+ font-weight: 500;
+ height: var(--cr-button-height);
+ margin: 0;
+ margin-inline-start: 8px;
+ min-height: 32px;
+ min-width: 5.14em;
+ outline: none;
+ padding: 8px 16px;
+ position: relative;
+ text-align: center;
+ user-select: none;
+ z-index: 0;
+}
+
+.cr-dialog-container .cr-dialog-buttons > button.cr-dialog-ok,
+.cr-dialog-container .cr-dialog-buttons > button.cr-dialog-ok:hover {
+ background-color: var(--cros-button-background-color-primary);
+ color: var(--cros-button-label-color-primary);
+ order: 1;
+}
+
+.cr-dialog-container .cr-dialog-buttons > button.cr-dialog-ok:hover {
+ background: var(--cros-button-background-color-primary-hover-preblended);
+}
+
+.cr-dialog-container .cr-dialog-buttons > button.cr-dialog-ok:active {
+ box-shadow: 0 1px 2px var(--cros-button-active-shadow-color-key-primary),
+ 0 1px 3px var(--cros-button-active-shadow-color-ambient-primary);
+}
+
+.cr-dialog-container .cr-dialog-buttons > button.cr-dialog-ok[disabled],
+.cr-dialog-container .cr-dialog-buttons > button.cr-dialog-ok[disabled]:hover {
+ background-color:
+ var(--cros-button-background-color-primary-disabled);
+ color: var(--cros-button-label-color-primary-disabled);
+}
+
+.cr-dialog-container .cr-dialog-buttons > button.cr-dialog-cancel {
+ border: 1px solid var(--cros-button-stroke-color-secondary);
+ color: var(--cros-button-label-color-secondary);
+ order: 0;
+}
+
+.cr-dialog-container .cr-dialog-buttons > button.cr-dialog-cancel:hover {
+ background: var(--cros-button-background-color-secondary-hover);
+}
+
+.cr-dialog-container .cr-dialog-buttons > button.cr-dialog-cancel:active {
+ box-shadow: 0 1px 2px var(--cros-button-active-shadow-color-key-secondary),
+ 0 1px 3px var(--cros-button-active-shadow-color-ambient-secondary);
+}
+
+.cr-dialog-container .cr-dialog-buttons > button.cr-dialog-cancel[disabled],
+.cr-dialog-container .cr-dialog-buttons > button.cr-dialog-cancel[disabled]:hover {
+ border: 1px solid var(--cros-button-stroke-color-secondary-disabled);
+ color: var(--cros-button-label-color-secondary-disabled);
+}
+
+:root.focus-outline-visible .cr-dialog-container .cr-dialog-buttons > button:not(:active):focus,
+:host-context(:root.focus-outline-visible) .cr-dialog-container .cr-dialog-buttons > button:not(:active):focus {
+ outline: 2px solid var(--cros-focus-ring-color);
+ outline-offset: 2px;
+}
+
+/* Some files confirm dialogs need to focus their 'Cancel' button by default,
+ rather than the 'OK' button. The dialog buttons should have focus rings in
+ this case (regardless of mouse, pointer, keyboard interaction). */
+.cr-dialog-container .cr-dialog-frame.files-confirm-dialog-cancel-default .cr-dialog-buttons > button:not(:active):focus {
+ outline: 2px solid var(--cros-focus-ring-color);
+ outline-offset: 2px;
+}
+
+.buttonbar button {
+ margin-inline-start: 12px;
+}
+
+.progress-bar {
+ background-color: var(--cros-slider-track-color-inactive);
+ border-radius: 3px;
+ height: 6px;
+}
+
+.progress-track {
+ background-color: var(--cros-icon-color-primary);
+ border-radius: 3px;
+ height: 6px;
+ min-width: 6px;
+}
+
+.menu-warning {
+ color: var(--cros-textfield-label-color-error);
+ font-size: 11px;
+ line-height: 16px;
+ margin-top: 6px;
+}
+
+/* Entry names (File names, Folder names, Volume names, ...). */
+/* Their base bidi direction should be ltr even in RTL languages. */
+html[dir='rtl'] .entry-name {
+ direction: ltr;
+ text-align: right; /* csschecker-disable-line left-right */
+ unicode-bidi: embed;
+}
+
+/* Pop-up dialogs. */
+.cr-dialog-container.shown {
+ background-color: var(--cros-sys-scrim);
+}
+
+.cr-dialog-container {
+ display: flex;
+ height: 100%;
+ left: 0;
+ overflow: auto;
+ position: absolute;
+ top: 0;
+ user-select: none;
+ width: 100%;
+ z-index: 9999;
+}
+
+.cr-dialog-container .cr-dialog-frame {
+ background-color: var(--cros-sys-dialog_container);
+ border-radius: 20px;
+ box-shadow: var(--cros-elevation-3-shadow);
+ color: var(--cros-sys-on_surface_variant);
+ cursor: default;
+ display: flex;
+ flex-direction: column;
+ margin: auto;
+ /* Narrower when viewport is too narrow. */
+ max-width: min(512px - 32px - 32px, 75vw);
+ min-width: calc(320px - 32px - 32px);
+ padding: 32px;
+ padding-bottom: 28px;
+ position: relative;
+}
+
+.cr-dialog-container .cr-dialog-frame:focus {
+ outline: none;
+}
+
+@keyframes pulse {
+ 0% {
+ transform: scale(1);
+ }
+ 40% {
+ transform: scale(1.02);
+ }
+ 60% {
+ transform: scale(1.02);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+
+.cr-dialog-container.pulse {
+ animation-duration: 180ms;
+ animation-iteration-count: 1;
+ animation-name: pulse;
+ animation-timing-function: ease-in-out;
+}
+
+.cr-dialog-container.shown > .cr-dialog-frame {
+ opacity: 1;
+}
+
+.cr-dialog-container .cr-dialog-frame {
+ opacity: 0;
+ transition: opacity 100ms;
+}
+
+.cr-dialog-container .cr-dialog-title {
+ color: var(--cros-sys-on_surface);
+ display: block;
+ font-size: 16px;
+ font-weight: 500;
+ margin-bottom: 16px;
+}
+
+.cr-dialog-container .cr-dialog-text {
+ font-size: 14px;
+}
+
+.cr-dialog-container .cr-dialog-text,
+.cr-dialog-container .cr-dialog-title {
+ overflow-wrap: break-word;
+}
+
+.cr-dialog-container .cr-dialog-text {
+ color: var(--cros-sys-on_surface_variant);
+}
+
+.cr-dialog-container .no-title .cr-dialog-text {
+ color: var(--cros-text-color-primary);
+}
+
+.cr-dialog-container .cr-dialog-buttons {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ padding-top: 32px;
+}
+
+.cr-dialog-container .cr-dialog-close {
+ display: none;
+}
+
+.cr-dialog-container #suggest-app-dialog .cr-dialog-close,
+.cr-dialog-container #default-task-dialog .cr-dialog-close {
+ -webkit-mask-image: url(../images/common/ic_close.svg);
+ -webkit-mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ background-color: var(--cros-sys-on_surface);
+ cursor: pointer;
+ display: inline-block;
+ height: 32px;
+ position: absolute;
+ right: 16px;
+ top: 16px;
+ width: 32px;
+}
+
+:root[dir='rtl'] .cr-dialog-container .cr-dialog-close,
+:host-context(:root[dir='rtl']) .cr-dialog-container .cr-dialog-close {
+ left: 6px;
+ right: unset !important;
+}
+
+/* Modal <dialog> container for Pop-up dialogs. */
+#files-app-modal-dialog {
+ background-color: transparent;
+ border: none;
+ height: 100%;
+ margin: 0;
+ max-height: initial;
+ max-width: initial;
+ outline: none;
+ overflow: hidden;
+ padding: 0;
+ width: 100%;
+}
+
+/* Minor tweak of vertical position for texts which need to be vertically
+ * aligned with corresponding file-type icons. */
+.tree-row > .label,
+.table-row-cell .filename-label,
+.table-row-cell .size,
+.table-row-cell .type,
+.table-row-cell .date,
+.thumbnail-bottom .filename-label,
+.autocomplete-suggestions > li > .detail-text {
+ padding-top: 1px;
+}
+
+@media (-webkit-min-device-pixel-ratio: 1.5) {
+ .tree-row > .label,
+ .table-row-cell .filename-label,
+ .table-row-cell .size,
+ .table-row-cell .type,
+ .table-row-cell .date,
+ .thumbnail-bottom .filename-label,
+ .autocomplete-suggestions > li > .detail-text {
+ /* In HiDPI display, 13pt Roboto font is drawn upper than normal display,
+ * so add extra padding on top of it. */
+ padding-top: 3px;
+ }
+}
+
+/* Common typography styles for ChromeOS. */
+.headline2 {
+ color: var(--cros-text-color-primary);
+ font-family: Roboto;
+ font-size: 15px;
+ font-weight: 500;
+ line-height: 22px;
+}
+
+.button2 {
+ color: var(--cros-text-color-primary);
+ font-family: Roboto;
+ font-size: 13px;
+ font-weight: 500;
+ line-height: 20px;
+}
+
+.body2-primary {
+ color: var(--cros-text-color-primary);
+ font-family: Roboto;
+ font-size: 13px;
+ line-height: 20px;
+}
+
+.annotation1-primary {
+ color: var(--cros-text-color-primary);
+ font-family: Roboto;
+ font-size: 12px;
+ line-height: 18px;
+}
diff --git a/ui/file_manager/file_manager/foreground/css/file_manager_gm3.css b/ui/file_manager/file_manager/foreground/css/file_manager_gm3.css
index 74eb323..65871f93 100644
--- a/ui/file_manager/file_manager/foreground/css/file_manager_gm3.css
+++ b/ui/file_manager/file_manager/foreground/css/file_manager_gm3.css
@@ -445,7 +445,7 @@
margin: 0 8px;
padding-bottom: 0;
padding-inline: 16px;
- padding-top: 2px;
+ padding-top: 0;
}
.dialog-header #tasks[multiple] {
@@ -1418,15 +1418,15 @@
bar when it's not needed. Max height is set to fit 8 items before showing
scroll bar. */
body.files-ng #default-tasks-list {
- border-top: solid 1px var(--cros-separator-color);
height: 240px;
- margin: 16px -16px;
- margin-bottom: 12px;
- padding-top: 8px;
+ margin-bottom: 32px;
+ margin-top: 20px;
+ padding-inline: 32px;
}
#default-task-dialog.bottom-shadow::after {
- background: linear-gradient(transparent 0, var(--cros-bg-color) 100%);
+ background:
+ linear-gradient(transparent 0, var(--cros-sys-base_elevated) 100%);
bottom: 24px;
content: '';
height: 40px;
@@ -1436,13 +1436,6 @@
width: 100%
}
-@media (prefers-color-scheme: dark) {
- #default-task-dialog.bottom-shadow::after {
- background: linear-gradient(transparent 0,
- var(--cros-bg-color-elevation-2) 100%);
- }
-}
-
#default-tasks-list li {
height: 40px;
line-height: 40px;
@@ -1482,7 +1475,8 @@
body.files-ng #default-tasks-list:focus > li[selected],
body.files-ng #default-tasks-list > li[selected] {
- background-color: var(--cros-highlight-color);
+ background-color: var(--cros-sys-primary_container);
+ color: var(--cros-sys-on_primary_container);
outline: none;
}
@@ -1490,7 +1484,7 @@
-webkit-mask-image: url(../images/common/ic_selected.svg);
-webkit-mask-position: right;
-webkit-mask-repeat: no-repeat;
- background-color: var(--cros-icon-color-selection);
+ background-color: var(--cros-sys-on_primary_container);
content: ' ';
height: 40px;
position: absolute;
@@ -2157,10 +2151,27 @@
flex: none;
}
-.cr-dialog-container.files-ng #default-task-dialog {
+/* Default task dialog has its own background color for title and text
+ section. */
+.cr-dialog-container #default-task-dialog {
+ /* Override the default padding so we can have background color for different
+ sections in the dialog. */
+ padding: 0;
width: 352px;
}
+.cr-dialog-container #default-task-dialog .cr-dialog-title {
+ background-color: var(--cros-sys-surface1);
+ border-radius: 20px 20px 0 0;
+ margin-bottom: 0;
+ padding: 32px 32px 16px;
+}
+
+.cr-dialog-container #default-task-dialog .cr-dialog-text {
+ background-color: var(--cros-sys-surface1);
+ padding: 0 32px 20px;
+}
+
.install-linux-package-details-frame {
border: 1px solid var(--cros-separator-color);
display: block;
