WebUI Dark Mode: add 1px white border to bottom of toolbars
R=dpapad@chromium.org
BUG=939270
Change-Id: Ibe12a10f04e29f83b354cf820af8b4d12b568602
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1524865
Auto-Submit: Dan Beam <dbeam@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Dan Beam <dbeam@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#640964}
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1529684
Reviewed-by: Dan Beam <dbeam@chromium.org>
Cr-Commit-Position: refs/branch-heads/3729@{#257}
Cr-Branched-From: d4a8972e30b604f090aeda5dfff68386ae656267-refs/heads/master@{#638880}diff --git a/chrome/browser/resources/app_management/app.html b/chrome/browser/resources/app_management/app.html
index 1cc85b41..ddda32b 100644
--- a/chrome/browser/resources/app_management/app.html
+++ b/chrome/browser/resources/app_management/app.html
@@ -19,24 +19,19 @@
<dom-module id="app-management-app">
<template>
<style include="app-management-shared-css">
- :host {
- display: flex;
- flex-direction: column;
- font-size: var(--app-management-font-size);
- height: 100%;
- line-height: var(--app-management-line-height);
- overflow: hidden;
- }
+ :host {
+ display: flex;
+ flex-direction: column;
+ font-size: var(--app-management-font-size);
+ height: 100%;
+ line-height: var(--app-management-line-height);
+ overflow: hidden;
+ }
- cr-toolbar {
- background: var(--md-toolbar-color);
- min-height: var(--toolbar-height);
- }
-
- #main-container {
- overflow: auto;
- padding: 0 40px;
- }
+ #main-container {
+ overflow: auto;
+ padding: 0 40px;
+ }
</style>
<cr-toolbar
page-name="$i18n{title}"
diff --git a/chrome/browser/resources/app_management/shared_vars.html b/chrome/browser/resources/app_management/shared_vars.html
index 1d62aba..860c609 100644
--- a/chrome/browser/resources/app_management/shared_vars.html
+++ b/chrome/browser/resources/app_management/shared_vars.html
@@ -20,7 +20,6 @@
--primary-text-color: rgba(0, 0, 0, 0.87);
--secondary-font-weight: 400;
--secondary-text-color: rgba(0, 0, 0, 0.54);
- --toolbar-height: 56px;
}
</style>
</custom-style>
diff --git a/chrome/browser/resources/bookmarks/bookmarks.html b/chrome/browser/resources/bookmarks/bookmarks.html
index 6b7581da..b91e6202 100644
--- a/chrome/browser/resources/bookmarks/bookmarks.html
+++ b/chrome/browser/resources/bookmarks/bookmarks.html
@@ -19,8 +19,13 @@
overflow: hidden;
}
- html.loading {
- border-top: 56px solid var(--md-toolbar-color);
+ html.loading::before {
+ background-color: var(--md-toolbar-color);
+ border-bottom: var(--md-toolbar-border);
+ box-sizing: border-box;
+ content: '';
+ display: block;
+ height: var(--md-toolbar-height);
}
</style>
</head>
diff --git a/chrome/browser/resources/bookmarks/toolbar.html b/chrome/browser/resources/bookmarks/toolbar.html
index 715f1e9..d6579e9 100644
--- a/chrome/browser/resources/bookmarks/toolbar.html
+++ b/chrome/browser/resources/bookmarks/toolbar.html
@@ -11,7 +11,6 @@
<template>
<style include="shared-style">
:host {
- background: var(--md-toolbar-color);
position: relative;
}
diff --git a/chrome/browser/resources/downloads/downloads.html b/chrome/browser/resources/downloads/downloads.html
index 2397587..dcb81ef 100644
--- a/chrome/browser/resources/downloads/downloads.html
+++ b/chrome/browser/resources/downloads/downloads.html
@@ -12,8 +12,13 @@
touch-action: manipulation;
}
- html.loading {
- border-top: 56px solid var(--md-toolbar-color);
+ html.loading::before {
+ background-color: var(--md-toolbar-color);
+ border-bottom: var(--md-toolbar-border);
+ box-sizing: border-box;
+ content: '';
+ display: block;
+ height: var(--md-toolbar-height);
}
html:not(.loading),
diff --git a/chrome/browser/resources/downloads/toolbar.html b/chrome/browser/resources/downloads/toolbar.html
index f9b804f..80fc546 100644
--- a/chrome/browser/resources/downloads/toolbar.html
+++ b/chrome/browser/resources/downloads/toolbar.html
@@ -19,7 +19,6 @@
<style include="cr-hidden-style">
:host {
align-items: center;
- background: var(--md-toolbar-color);
display: flex;
min-height: 56px;
}
diff --git a/chrome/browser/resources/history/app.html b/chrome/browser/resources/history/app.html
index 8579929..736edaf 100644
--- a/chrome/browser/resources/history/app.html
+++ b/chrome/browser/resources/history/app.html
@@ -28,10 +28,6 @@
overflow: hidden;
}
- history-toolbar {
- background: var(--md-toolbar-color);
- }
-
/* Sizing this with flex causes slow load performance, see
* crbug.com/618153. TODO(dbeam): is this still an issue? */
#main-container {
diff --git a/chrome/browser/resources/history/history.html b/chrome/browser/resources/history/history.html
index ae99c88..18214b51 100644
--- a/chrome/browser/resources/history/history.html
+++ b/chrome/browser/resources/history/history.html
@@ -55,8 +55,10 @@
#loading-toolbar {
align-items: center;
background: var(--md-toolbar-color);
+ border-bottom: var(--md-toolbar-border);
+ box-sizing: border-box;
color: #fff;
- height: 56px;
+ height: var(--md-toolbar-height);
letter-spacing: .25px;
padding-inline-start: 24px;
}
diff --git a/chrome/browser/resources/management/management.html b/chrome/browser/resources/management/management.html
index 6cc5c99..8bcb853 100644
--- a/chrome/browser/resources/management/management.html
+++ b/chrome/browser/resources/management/management.html
@@ -10,14 +10,18 @@
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
<style>
html {
- --toolbar-height: 56px;
background: var(--md-background-color);
height: 100%;
overflow: hidden;
}
- html.loading {
- border-top: var(--toolbar-height) solid var(--md-toolbar-color);
+ html.loading::before {
+ background-color: var(--md-toolbar-color);
+ border-bottom: var(--md-toolbar-border);
+ box-sizing: border-box;
+ content: '';
+ display: block;
+ height: var(--md-toolbar-height);
}
body {
diff --git a/chrome/browser/resources/management/management_ui.html b/chrome/browser/resources/management/management_ui.html
index e3ec1d4..8e20e48 100644
--- a/chrome/browser/resources/management/management_ui.html
+++ b/chrome/browser/resources/management/management_ui.html
@@ -26,7 +26,6 @@
}
cr-toolbar {
- background-color: var(--md-toolbar-color);
flex-shrink: 0;
}
diff --git a/chrome/browser/resources/md_extensions/extensions.html b/chrome/browser/resources/md_extensions/extensions.html
index 42461d4e4..088cee5c 100644
--- a/chrome/browser/resources/md_extensions/extensions.html
+++ b/chrome/browser/resources/md_extensions/extensions.html
@@ -24,7 +24,7 @@
html.loading::before {
background: var(--md-toolbar-color);
- height: 56px;
+ height: var(--md-toolbar-height);
}
/* Mimics the developer mode toolbar until the real one loads. Note:
@@ -39,9 +39,9 @@
background: none;
}
- html[dark].loading.in-dev-mode::before,
+ html[dark].loading::before,
html[dark].loading.in-dev-mode body::before {
- border-bottom: 1px solid rgba(255, 255, 255, .1);
+ border-bottom: var(--md-toolbar-border);
}
html,
diff --git a/chrome/browser/resources/md_extensions/toolbar.html b/chrome/browser/resources/md_extensions/toolbar.html
index 5e3eec9f..6f3b663 100644
--- a/chrome/browser/resources/md_extensions/toolbar.html
+++ b/chrome/browser/resources/md_extensions/toolbar.html
@@ -27,17 +27,6 @@
--padding-top-bottom: 10px;
}
- cr-toolbar {
- background: var(--md-toolbar-color);
- border-bottom: var(--border-bottom-height) solid transparent;
- box-sizing: border-box;
- transition: border-bottom-color var(--drawer-transition);
- }
-
- :host-context([dark]):host([in-dev-mode]) cr-toolbar {
- border-bottom-color: var(--cr-separator-color);
- }
-
/* This toggle needs special styling because it's on blue background. */
:host-context(html:not([dark])) cr-toolbar cr-toggle {
--cr-toggle-checked-bar-color: var(--google-grey-refresh-100);
diff --git a/chrome/browser/resources/settings/settings.html b/chrome/browser/resources/settings/settings.html
index 60fc7482..c99aed2 100644
--- a/chrome/browser/resources/settings/settings.html
+++ b/chrome/browser/resources/settings/settings.html
@@ -16,8 +16,13 @@
touch-action: manipulation;
}
- html.loading {
- border-top: 56px solid var(--md-toolbar-color);
+ html.loading::before {
+ background-color: var(--md-toolbar-color);
+ border-bottom: var(--md-toolbar-border);
+ box-sizing: border-box;
+ content: '';
+ display: block;
+ height: var(--md-toolbar-height);
}
</style>
</head>
diff --git a/chrome/browser/resources/settings/settings_ui/settings_ui.html b/chrome/browser/resources/settings/settings_ui/settings_ui.html
index 519cbc5..372b651 100644
--- a/chrome/browser/resources/settings/settings_ui/settings_ui.html
+++ b/chrome/browser/resources/settings/settings_ui/settings_ui.html
@@ -38,7 +38,6 @@
cr-toolbar {
@apply --layout-center;
- background-color: var(--md-toolbar-color);
min-height: 56px;
z-index: 2;
}
diff --git a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html
index 5b8ba4f..3b4cff4c 100644
--- a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html
+++ b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html
@@ -14,13 +14,16 @@
--cr-toolbar-height: 56px;
--paper-icon-button-ink-color: white;
align-items: center;
- /* TODO(dbeam): default background-color instead of external styling. */
+ background-color: var(--google-blue-700);
color: #fff;
display: flex;
height: var(--cr-toolbar-height);
}
:host-context([dark]) {
+ background-color: rgba(255, 255, 255, .04);
+ border-bottom: var(--cr-separator-line);
+ box-sizing: border-box;
color: var(--cr-secondary-text-color);
}
diff --git a/ui/webui/resources/css/md_colors.css b/ui/webui/resources/css/md_colors.css
index 28a2dc1..9750520 100644
--- a/ui/webui/resources/css/md_colors.css
+++ b/ui/webui/resources/css/md_colors.css
@@ -9,10 +9,13 @@
--md-loading-message-color: #6e6e6e;
/* --google-blue-700, rewritten as a native custom property for speed. */
--md-toolbar-color: rgb(51, 103, 214);
+ --md-toolbar-height: 56px;
}
html[dark] {
--md-background-color: rgb(32, 33, 36); /* --google-grey-900 */
--md-loading-message-color: #9AA0A6; /* --google-grey-refresh-500 */
+ /* --cr-separator-line */
+ --md-toolbar-border: 1px solid rgba(255, 255, 255, .1);
--md-toolbar-color: rgba(255, 255, 255, .04);
}
