Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(230)

Unified Diff: chrome/browser/resources/md_history/app.vulcanized.html

Issue 2549133003: [MD History] Color tweaks. (Closed)
Patch Set: address comments Created 4 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: chrome/browser/resources/md_history/app.vulcanized.html
diff --git a/chrome/browser/resources/md_history/app.vulcanized.html b/chrome/browser/resources/md_history/app.vulcanized.html
index ed67f297b52dea6c59860a15156e50655c16e31f..30e4bb7cd8e4fb1da6c8657515963994a70378a8 100644
--- a/chrome/browser/resources/md_history/app.vulcanized.html
+++ b/chrome/browser/resources/md_history/app.vulcanized.html
@@ -31,10 +31,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
:root {
/* This is a custom, Chrome-specific color that does not have a --paper or
* --google equivalent. */
- --md-background-color: rgb(241, 241, 241);
+ --md-background-color: #f1f1f1;
/* This is --google-blue-700, rewritten as a native custom property for speed.
*/
--md-toolbar-color: rgb(51, 103, 214);
+ --md-loading-message-color: #6e6e6e;
}
</style>
@@ -1896,7 +1897,7 @@ input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-s
}
:host(:not([narrow]):not([showing-search])) #icon, :host(:not([narrow])) #prompt {
- opacity: 0.6;
+ opacity: 0.7;
}
:host([narrow]:not([showing-search])) #searchTerm {
@@ -2104,11 +2105,19 @@ h1 {
--card-padding-between: 16px;
--card-padding-side: 24px;
--card-sizing_-_margin: 0 auto; --card-sizing_-_max-width: var(--card-max-width); --card-sizing_-_min-width: var(--card-min-width); --card-sizing_-_padding: 0 var(--card-padding-side); --card-sizing_-_width: calc(100% - 2 * var(--card-padding-side));;
+ --drawer-header-color: var(--paper-grey-800);
--first-card-padding-top: 24px;
+ --history-item-time-color: #646464;
+ --interactive-color: var(--google-blue-500);
--item-height: 44px;
+ --link-color: var(--google-blue-700);
--primary-text-color: #333;
- --secondary-text-color: #757575;
+ --secondary-text-color: var(--paper-grey-600);
+ --separator-color: rgba(0, 0, 0, 0.08);
--side-bar-width: 256px;
+ --sidebar-footer-text-color: #6e6e6e;
+ --sidebar-unselected-color: #5a5a5a;
+ --synced-devices-notice-color: var(--paper-grey-800);
--toolbar-grouped-height: 101px;
--toolbar-height: 56px;
}
@@ -2120,11 +2129,14 @@ h1 {
display: none !important;
}
+a {
+ color: var(--link-color);
+}
+
.card-title {
align-items: center;
border-bottom: 1px solid var(--card-border-color);
border-radius: 2px 2px 0 0;
- color: var(--primary-text-color);
display: flex;
font-size: 14px;
font-weight: 500;
@@ -2138,7 +2150,7 @@ h1 {
.centered-message {
align-items: center;
- color: #b4b4b4;
+ color: var(--md-loading-message-color);
display: flex;
flex: 1;
font-size: 14px;
@@ -2209,11 +2221,14 @@ button.more-vert-button div {
display: none !important;
}
+a {
+ color: var(--link-color);
+}
+
.card-title {
align-items: center;
border-bottom: 1px solid var(--card-border-color);
border-radius: 2px 2px 0 0;
- color: var(--primary-text-color);
display: flex;
font-size: 14px;
font-weight: 500;
@@ -2227,7 +2242,7 @@ button.more-vert-button div {
.centered-message {
align-items: center;
- color: #b4b4b4;
+ color: var(--md-loading-message-color);
display: flex;
flex: 1;
font-size: 14px;
@@ -2301,7 +2316,7 @@ cr-toolbar, #overlay-buttons, #overlay-wrapper, #toolbar-container {
}
:host([items-selected_]) {
- background: rgb(68, 136, 255);
+ background: var(--interactive-color);
}
#toolbar-container {
@@ -2350,7 +2365,7 @@ iron-dropdown {
box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
background-color: white;
border-radius: 2px;
- color: var(--paper-grey-800);
+ color: var(--synced-devices-notice-color);
overflow: hidden;
padding: 12px 20px;
}
@@ -2494,6 +2509,8 @@ paper-tabs {
<style is="custom-style" css-build="shadow">html {
--cr-actionable_-_cursor: pointer;;
--cr-focused-item-color: var(--google-grey-300);
+
+ --cr-icon-padding: 8px;
--cr-selectable-focus_-_background-color: var(--cr-focused-item-color); --cr-selectable-focus_-_outline: none;
--cr-separator-line: 1px solid rgba(0, 0, 0, 0.06);
--paper-checkbox-ink-size: 40px;
@@ -2692,11 +2709,14 @@ paper-tabs {
display: none !important;
}
+a {
+ color: var(--link-color);
+}
+
.card-title {
align-items: center;
border-bottom: 1px solid var(--card-border-color);
border-radius: 2px 2px 0 0;
- color: var(--primary-text-color);
display: flex;
font-size: 14px;
font-weight: 500;
@@ -2710,7 +2730,7 @@ paper-tabs {
.centered-message {
align-items: center;
- color: #b4b4b4;
+ color: var(--md-loading-message-color);
display: flex;
flex: 1;
font-size: 14px;
@@ -2771,7 +2791,7 @@ button.more-vert-button div {
}
:host {
- --checked-color: rgb(68, 136, 255);
+ --checked-color: var(--interactive-color);
display: block;
outline: none;
pointer-events: none;
@@ -2875,7 +2895,7 @@ button {
}
#time-accessed {
- color: #646464;
+ color: var(--history-item-time-color);
min-width: 96px;
}
@@ -3003,11 +3023,14 @@ button {
display: none !important;
}
+a {
+ color: var(--link-color);
+}
+
.card-title {
align-items: center;
border-bottom: 1px solid var(--card-border-color);
border-radius: 2px 2px 0 0;
- color: var(--primary-text-color);
display: flex;
font-size: 14px;
font-weight: 500;
@@ -3021,7 +3044,7 @@ button {
.centered-message {
align-items: center;
- color: #b4b4b4;
+ color: var(--md-loading-message-color);
display: flex;
flex: 1;
font-size: 14px;
@@ -3114,11 +3137,14 @@ iron-list {
display: none !important;
}
+a {
+ color: var(--link-color);
+}
+
.card-title {
align-items: center;
border-bottom: 1px solid var(--card-border-color);
border-radius: 2px 2px 0 0;
- color: var(--primary-text-color);
display: flex;
font-size: 14px;
font-weight: 500;
@@ -3132,7 +3158,7 @@ iron-list {
.centered-message {
align-items: center;
- color: #b4b4b4;
+ color: var(--md-loading-message-color);
display: flex;
flex: 1;
font-size: 14px;
@@ -3396,11 +3422,14 @@ dialog .body {
display: none !important;
}
+a {
+ color: var(--link-color);
+}
+
.card-title {
align-items: center;
border-bottom: 1px solid var(--card-border-color);
border-radius: 2px 2px 0 0;
- color: var(--primary-text-color);
display: flex;
font-size: 14px;
font-weight: 500;
@@ -3414,7 +3443,7 @@ dialog .body {
.centered-message {
align-items: center;
- color: #b4b4b4;
+ color: var(--md-loading-message-color);
display: flex;
flex: 1;
font-size: 14px;
@@ -3487,7 +3516,7 @@ button.more-vert-button div {
}
div.separator {
- background-color: rgba(0, 0, 0, 0.08);
+ background-color: var(--separator-color);
flex-shrink: 0;
height: 1px;
margin: 8px 0;
@@ -3509,7 +3538,7 @@ div.separator {
iron-selector {
-webkit-user-select: none;
background-color: transparent;
- color: #5a5a5a;
+ color: var(--sidebar-unselected-color);
display: flex;
flex: 1;
flex-direction: column;
@@ -3534,7 +3563,7 @@ iron-selector > a {
}
iron-selector > a.iron-selected {
- color: var(--google-blue-500);
+ color: var(--link-color);
}
#spacer {
@@ -3542,7 +3571,7 @@ iron-selector > a.iron-selected {
}
#footer {
- color: var(--paper-grey-600);
+ color: var(--sidebar-footer-text-color);
width: var(--side-bar-width);
}
@@ -3554,8 +3583,7 @@ iron-selector > a.iron-selected {
}
#footer a {
- color: var(--google-blue-700);
- text-decoration: none;
+ text-decoration: none;
}
</style>
@@ -3589,11 +3617,14 @@ iron-selector > a.iron-selected {
display: none !important;
}
+a {
+ color: var(--link-color);
+}
+
.card-title {
align-items: center;
border-bottom: 1px solid var(--card-border-color);
border-radius: 2px 2px 0 0;
- color: var(--primary-text-color);
display: flex;
font-size: 14px;
font-weight: 500;
@@ -3607,7 +3638,7 @@ iron-selector > a.iron-selected {
.centered-message {
align-items: center;
- color: #b4b4b4;
+ color: var(--md-loading-message-color);
display: flex;
flex: 1;
font-size: 14px;
@@ -3668,7 +3699,8 @@ button.more-vert-button div {
}
:host {
- display: block;
+ color: var(--primary-text-color);
+ display: block;
height: 100%;
overflow: hidden;
z-index: 0;
@@ -3711,7 +3743,7 @@ history-toolbar {
#drawer-header {
align-items: center;
- border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+ border-bottom: 1px solid var(--separator-color);
box-sizing: border-box;
display: flex;
height: var(--toolbar-height);
@@ -3719,7 +3751,7 @@ history-toolbar {
h1 {
-webkit-padding-start: 24px;
- color: rgb(66, 66, 66);
+ color: var(--drawer-header-color);
font-size: 123%;
font-weight: 400;
}

Powered by Google App Engine
This is Rietveld 408576698