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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side 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 unified diff | Download patch
« no previous file with comments | « chrome/browser/resources/md_history/app.html ('k') | chrome/browser/resources/md_history/grouped_list.html » ('j') | chrome/browser/resources/md_history/history_item.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <html><head><!-- 1 <html><head><!--
2 @license 2 @license
3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also 7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --><!-- 9 --><!--
10 @license 10 @license
(...skipping 13 matching lines...) Expand all
24 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 24 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
25 --><meta charset="UTF-8"><link rel="import" href="chrome://resources/html/polyme r.html"> 25 --><meta charset="UTF-8"><link rel="import" href="chrome://resources/html/polyme r.html">
26 <style> 26 <style>
27 /* Copyright 2016 The Chromium Authors. All rights reserved. 27 /* Copyright 2016 The Chromium Authors. All rights reserved.
28 * Use of this source code is governed by a BSD-style license that can be 28 * Use of this source code is governed by a BSD-style license that can be
29 * found in the LICENSE file. */ 29 * found in the LICENSE file. */
30 30
31 :root { 31 :root {
32 /* This is a custom, Chrome-specific color that does not have a --paper or 32 /* This is a custom, Chrome-specific color that does not have a --paper or
33 * --google equivalent. */ 33 * --google equivalent. */
34 --md-background-color: rgb(241, 241, 241); 34 --md-background-color: #f1f1f1;
35 /* This is --google-blue-700, rewritten as a native custom property for speed. 35 /* This is --google-blue-700, rewritten as a native custom property for speed.
36 */ 36 */
37 --md-toolbar-color: rgb(51, 103, 214); 37 --md-toolbar-color: rgb(51, 103, 214);
38 --md-loading-message-color: #6e6e6e;
38 } 39 }
39 40
40 </style> 41 </style>
41 42
42 43
43 44
44 </head><body><div hidden="" by-vulcanize=""><dom-module id="iron-pages" assetpat h="chrome://resources/polymer/v1_0/iron-pages/" css-build="shadow"> 45 </head><body><div hidden="" by-vulcanize=""><dom-module id="iron-pages" assetpat h="chrome://resources/polymer/v1_0/iron-pages/" css-build="shadow">
45 46
46 <template> 47 <template>
47 <style scope="iron-pages">:host { 48 <style scope="iron-pages">:host {
(...skipping 1841 matching lines...) Expand 10 before | Expand all | Expand 10 after
1889 1890
1890 :host(:not([narrow])) { 1891 :host(:not([narrow])) {
1891 -webkit-padding-end: 0; 1892 -webkit-padding-end: 0;
1892 background: rgba(0, 0, 0, 0.22); 1893 background: rgba(0, 0, 0, 0.22);
1893 border-radius: 2px; 1894 border-radius: 2px;
1894 cursor: text; 1895 cursor: text;
1895 width: var(--cr-toolbar-field-width); 1896 width: var(--cr-toolbar-field-width);
1896 } 1897 }
1897 1898
1898 :host(:not([narrow]):not([showing-search])) #icon, :host(:not([narrow])) #prompt { 1899 :host(:not([narrow]):not([showing-search])) #icon, :host(:not([narrow])) #prompt {
1899 opacity: 0.6; 1900 opacity: 0.7;
1900 } 1901 }
1901 1902
1902 :host([narrow]:not([showing-search])) #searchTerm { 1903 :host([narrow]:not([showing-search])) #searchTerm {
1903 display: none; 1904 display: none;
1904 } 1905 }
1905 1906
1906 :host([showing-search][spinner-active]) #icon { 1907 :host([showing-search][spinner-active]) #icon {
1907 opacity: 0; 1908 opacity: 0;
1908 } 1909 }
1909 1910
(...skipping 187 matching lines...) Expand 10 before | Expand all | Expand 10 after
2097 </svg> 2098 </svg>
2098 </iron-iconset-svg> 2099 </iron-iconset-svg>
2099 <style is="custom-style" css-build="shadow">html { 2100 <style is="custom-style" css-build="shadow">html {
2100 --card-border-color: rgba(0, 0, 0, 0.14); 2101 --card-border-color: rgba(0, 0, 0, 0.14);
2101 --card-first-last-item-padding: 8px; 2102 --card-first-last-item-padding: 8px;
2102 --card-max-width: 960px; 2103 --card-max-width: 960px;
2103 --card-min-width: 550px; 2104 --card-min-width: 550px;
2104 --card-padding-between: 16px; 2105 --card-padding-between: 16px;
2105 --card-padding-side: 24px; 2106 --card-padding-side: 24px;
2106 --card-sizing_-_margin: 0 auto; --card-sizing_-_max-width: var(--card-max- width); --card-sizing_-_min-width: var(--card-min-width); --card-sizing_-_paddi ng: 0 var(--card-padding-side); --card-sizing_-_width: calc(100% - 2 * var(--c ard-padding-side));; 2107 --card-sizing_-_margin: 0 auto; --card-sizing_-_max-width: var(--card-max- width); --card-sizing_-_min-width: var(--card-min-width); --card-sizing_-_paddi ng: 0 var(--card-padding-side); --card-sizing_-_width: calc(100% - 2 * var(--c ard-padding-side));;
2108 --drawer-header-color: var(--paper-grey-800);
2107 --first-card-padding-top: 24px; 2109 --first-card-padding-top: 24px;
2110 --history-item-time-color: #646464;
2111 --interactive-color: var(--google-blue-500);
2108 --item-height: 44px; 2112 --item-height: 44px;
2113 --link-color: var(--google-blue-700);
2109 --primary-text-color: #333; 2114 --primary-text-color: #333;
2110 --secondary-text-color: #757575; 2115 --secondary-text-color: var(--paper-grey-600);
2116 --separator-color: rgba(0, 0, 0, 0.08);
2111 --side-bar-width: 256px; 2117 --side-bar-width: 256px;
2118 --sidebar-footer-text-color: #6e6e6e;
2119 --sidebar-unselected-color: #5a5a5a;
2120 --synced-devices-notice-color: var(--paper-grey-800);
2112 --toolbar-grouped-height: 101px; 2121 --toolbar-grouped-height: 101px;
2113 --toolbar-height: 56px; 2122 --toolbar-height: 56px;
2114 } 2123 }
2115 2124
2116 </style> 2125 </style>
2117 <dom-module id="shared-style" assetpath="chrome://history/" css-build="shadow"> 2126 <dom-module id="shared-style" assetpath="chrome://history/" css-build="shadow">
2118 <template> 2127 <template>
2119 <style scope="shared-style">[hidden] { 2128 <style scope="shared-style">[hidden] {
2120 display: none !important; 2129 display: none !important;
2121 } 2130 }
2122 2131
2132 a {
2133 color: var(--link-color);
2134 }
2135
2123 .card-title { 2136 .card-title {
2124 align-items: center; 2137 align-items: center;
2125 border-bottom: 1px solid var(--card-border-color); 2138 border-bottom: 1px solid var(--card-border-color);
2126 border-radius: 2px 2px 0 0; 2139 border-radius: 2px 2px 0 0;
2127 color: var(--primary-text-color);
2128 display: flex; 2140 display: flex;
2129 font-size: 14px; 2141 font-size: 14px;
2130 font-weight: 500; 2142 font-weight: 500;
2131 height: 48px; 2143 height: 48px;
2132 line-height: 48px; 2144 line-height: 48px;
2133 overflow: hidden; 2145 overflow: hidden;
2134 padding: 0 20px; 2146 padding: 0 20px;
2135 text-overflow: ellipsis; 2147 text-overflow: ellipsis;
2136 white-space: nowrap; 2148 white-space: nowrap;
2137 } 2149 }
2138 2150
2139 .centered-message { 2151 .centered-message {
2140 align-items: center; 2152 align-items: center;
2141 color: #b4b4b4; 2153 color: var(--md-loading-message-color);
2142 display: flex; 2154 display: flex;
2143 flex: 1; 2155 flex: 1;
2144 font-size: 14px; 2156 font-size: 14px;
2145 font-weight: 500; 2157 font-weight: 500;
2146 height: 100%; 2158 height: 100%;
2147 justify-content: center; 2159 justify-content: center;
2148 } 2160 }
2149 2161
2150 .menu-item { 2162 .menu-item {
2151 -webkit-user-select: none; 2163 -webkit-user-select: none;
(...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after
2202 </template> 2214 </template>
2203 </dom-module> 2215 </dom-module>
2204 2216
2205 2217
2206 <dom-module id="history-toolbar" assetpath="chrome://history/" css-build="shadow "> 2218 <dom-module id="history-toolbar" assetpath="chrome://history/" css-build="shadow ">
2207 <template> 2219 <template>
2208 <style scope="history-toolbar">[hidden] { 2220 <style scope="history-toolbar">[hidden] {
2209 display: none !important; 2221 display: none !important;
2210 } 2222 }
2211 2223
2224 a {
2225 color: var(--link-color);
2226 }
2227
2212 .card-title { 2228 .card-title {
2213 align-items: center; 2229 align-items: center;
2214 border-bottom: 1px solid var(--card-border-color); 2230 border-bottom: 1px solid var(--card-border-color);
2215 border-radius: 2px 2px 0 0; 2231 border-radius: 2px 2px 0 0;
2216 color: var(--primary-text-color);
2217 display: flex; 2232 display: flex;
2218 font-size: 14px; 2233 font-size: 14px;
2219 font-weight: 500; 2234 font-weight: 500;
2220 height: 48px; 2235 height: 48px;
2221 line-height: 48px; 2236 line-height: 48px;
2222 overflow: hidden; 2237 overflow: hidden;
2223 padding: 0 20px; 2238 padding: 0 20px;
2224 text-overflow: ellipsis; 2239 text-overflow: ellipsis;
2225 white-space: nowrap; 2240 white-space: nowrap;
2226 } 2241 }
2227 2242
2228 .centered-message { 2243 .centered-message {
2229 align-items: center; 2244 align-items: center;
2230 color: #b4b4b4; 2245 color: var(--md-loading-message-color);
2231 display: flex; 2246 display: flex;
2232 flex: 1; 2247 flex: 1;
2233 font-size: 14px; 2248 font-size: 14px;
2234 font-weight: 500; 2249 font-weight: 500;
2235 height: 100%; 2250 height: 100%;
2236 justify-content: center; 2251 justify-content: center;
2237 } 2252 }
2238 2253
2239 .menu-item { 2254 .menu-item {
2240 -webkit-user-select: none; 2255 -webkit-user-select: none;
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after
2294 width: 100%; 2309 width: 100%;
2295 } 2310 }
2296 2311
2297 cr-toolbar, #overlay-buttons, #overlay-wrapper, #toolbar-container { 2312 cr-toolbar, #overlay-buttons, #overlay-wrapper, #toolbar-container {
2298 align-items: center; 2313 align-items: center;
2299 display: flex; 2314 display: flex;
2300 width: 100%; 2315 width: 100%;
2301 } 2316 }
2302 2317
2303 :host([items-selected_]) { 2318 :host([items-selected_]) {
2304 background: rgb(68, 136, 255); 2319 background: var(--interactive-color);
2305 } 2320 }
2306 2321
2307 #toolbar-container { 2322 #toolbar-container {
2308 height: var(--toolbar-height); 2323 height: var(--toolbar-height);
2309 } 2324 }
2310 2325
2311 cr-toolbar { 2326 cr-toolbar {
2312 --cr-toolbar-field-end-padding: 0; 2327 --cr-toolbar-field-end-padding: 0;
2313 --cr-toolbar-field-margin: var(--side-bar-width); 2328 --cr-toolbar-field-margin: var(--side-bar-width);
2314 --cr-toolbar-right-content-wide_-_position: absolute; --cr-toolbar-righ t-content-wide_-_right: 0; --cr-toolbar-right-content-wide_-_left: initial;; 2329 --cr-toolbar-right-content-wide_-_position: absolute; --cr-toolbar-righ t-content-wide_-_right: 0; --cr-toolbar-right-content-wide_-_left: initial;;
(...skipping 28 matching lines...) Expand all
2343 } 2358 }
2344 2359
2345 iron-dropdown { 2360 iron-dropdown {
2346 margin-top: 28px; 2361 margin-top: 28px;
2347 } 2362 }
2348 2363
2349 .dropdown-content { 2364 .dropdown-content {
2350 box-shadow: var(--shadow-elevation-2dp_-_box-shadow); 2365 box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
2351 background-color: white; 2366 background-color: white;
2352 border-radius: 2px; 2367 border-radius: 2px;
2353 color: var(--paper-grey-800); 2368 color: var(--synced-devices-notice-color);
2354 overflow: hidden; 2369 overflow: hidden;
2355 padding: 12px 20px; 2370 padding: 12px 20px;
2356 } 2371 }
2357 2372
2358 :host(:not([has-drawer])) #overlay-wrapper { 2373 :host(:not([has-drawer])) #overlay-wrapper {
2359 -webkit-margin-start: var(--side-bar-width); 2374 -webkit-margin-start: var(--side-bar-width);
2360 } 2375 }
2361 2376
2362 #overlay-buttons { 2377 #overlay-buttons {
2363 margin: 0 auto; 2378 margin: 0 auto;
(...skipping 123 matching lines...) Expand 10 before | Expand all | Expand 10 after
2487 <paper-icon-button id="next-button" icon="cr:chevron-right" alt="$i18n {rangeNext}" title="$i18n{rangeNext}" class="rtl-reversible" on-tap="onNextTap_" disabled="[[isToday_(groupedOffset)]]"></paper-icon-button> 2502 <paper-icon-button id="next-button" icon="cr:chevron-right" alt="$i18n {rangeNext}" title="$i18n{rangeNext}" class="rtl-reversible" on-tap="onNextTap_" disabled="[[isToday_(groupedOffset)]]"></paper-icon-button>
2488 </div> 2503 </div>
2489 </div> 2504 </div>
2490 </template> 2505 </template>
2491 </template> 2506 </template>
2492 </dom-module> 2507 </dom-module>
2493 2508
2494 <style is="custom-style" css-build="shadow">html { 2509 <style is="custom-style" css-build="shadow">html {
2495 --cr-actionable_-_cursor: pointer;; 2510 --cr-actionable_-_cursor: pointer;;
2496 --cr-focused-item-color: var(--google-grey-300); 2511 --cr-focused-item-color: var(--google-grey-300);
2512
2513 --cr-icon-padding: 8px;
2497 --cr-selectable-focus_-_background-color: var(--cr-focused-item-color); --c r-selectable-focus_-_outline: none; 2514 --cr-selectable-focus_-_background-color: var(--cr-focused-item-color); --c r-selectable-focus_-_outline: none;
2498 --cr-separator-line: 1px solid rgba(0, 0, 0, 0.06); 2515 --cr-separator-line: 1px solid rgba(0, 0, 0, 0.06);
2499 --paper-checkbox-ink-size: 40px; 2516 --paper-checkbox-ink-size: 40px;
2500 } 2517 }
2501 2518
2502 </style> 2519 </style>
2503 2520
2504 <dom-module id="cr-shared-style" assetpath="chrome://resources/cr_elements/" css -build="shadow"> 2521 <dom-module id="cr-shared-style" assetpath="chrome://resources/cr_elements/" css -build="shadow">
2505 <template> 2522 <template>
2506 <style scope="cr-shared-style">paper-spinner { 2523 <style scope="cr-shared-style">paper-spinner {
(...skipping 178 matching lines...) Expand 10 before | Expand all | Expand 10 after
2685 <dom-module id="history-searched-label" assetpath="chrome://history/" css-build= "shadow"> 2702 <dom-module id="history-searched-label" assetpath="chrome://history/" css-build= "shadow">
2686 </dom-module> 2703 </dom-module>
2687 2704
2688 2705
2689 <dom-module id="history-item" assetpath="chrome://history/" css-build="shadow"> 2706 <dom-module id="history-item" assetpath="chrome://history/" css-build="shadow">
2690 <template> 2707 <template>
2691 <style scope="history-item">[hidden] { 2708 <style scope="history-item">[hidden] {
2692 display: none !important; 2709 display: none !important;
2693 } 2710 }
2694 2711
2712 a {
2713 color: var(--link-color);
2714 }
2715
2695 .card-title { 2716 .card-title {
2696 align-items: center; 2717 align-items: center;
2697 border-bottom: 1px solid var(--card-border-color); 2718 border-bottom: 1px solid var(--card-border-color);
2698 border-radius: 2px 2px 0 0; 2719 border-radius: 2px 2px 0 0;
2699 color: var(--primary-text-color);
2700 display: flex; 2720 display: flex;
2701 font-size: 14px; 2721 font-size: 14px;
2702 font-weight: 500; 2722 font-weight: 500;
2703 height: 48px; 2723 height: 48px;
2704 line-height: 48px; 2724 line-height: 48px;
2705 overflow: hidden; 2725 overflow: hidden;
2706 padding: 0 20px; 2726 padding: 0 20px;
2707 text-overflow: ellipsis; 2727 text-overflow: ellipsis;
2708 white-space: nowrap; 2728 white-space: nowrap;
2709 } 2729 }
2710 2730
2711 .centered-message { 2731 .centered-message {
2712 align-items: center; 2732 align-items: center;
2713 color: #b4b4b4; 2733 color: var(--md-loading-message-color);
2714 display: flex; 2734 display: flex;
2715 flex: 1; 2735 flex: 1;
2716 font-size: 14px; 2736 font-size: 14px;
2717 font-weight: 500; 2737 font-weight: 500;
2718 height: 100%; 2738 height: 100%;
2719 justify-content: center; 2739 justify-content: center;
2720 } 2740 }
2721 2741
2722 .menu-item { 2742 .menu-item {
2723 -webkit-user-select: none; 2743 -webkit-user-select: none;
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after
2764 2784
2765 button.more-vert-button div { 2785 button.more-vert-button div {
2766 border: 2px solid var(--secondary-text-color); 2786 border: 2px solid var(--secondary-text-color);
2767 border-radius: 2px; 2787 border-radius: 2px;
2768 margin: 1px 10px; 2788 margin: 1px 10px;
2769 pointer-events: none; 2789 pointer-events: none;
2770 transform: scale(0.8); 2790 transform: scale(0.8);
2771 } 2791 }
2772 2792
2773 :host { 2793 :host {
2774 --checked-color: rgb(68, 136, 255); 2794 --checked-color: var(--interactive-color);
2775 display: block; 2795 display: block;
2776 outline: none; 2796 outline: none;
2777 pointer-events: none; 2797 pointer-events: none;
2778 } 2798 }
2779 2799
2780 button { 2800 button {
2781 background: none; 2801 background: none;
2782 border: none; 2802 border: none;
2783 outline: none; 2803 outline: none;
2784 padding: 0; 2804 padding: 0;
(...skipping 83 matching lines...) Expand 10 before | Expand all | Expand 10 after
2868 } 2888 }
2869 2889
2870 :host([selected]) #checkmark::after { 2890 :host([selected]) #checkmark::after {
2871 border-color: white; 2891 border-color: white;
2872 transform: scale(1) rotate(45deg); 2892 transform: scale(1) rotate(45deg);
2873 2893
2874 transition: transform 140ms ease-out; 2894 transition: transform 140ms ease-out;
2875 } 2895 }
2876 2896
2877 #time-accessed { 2897 #time-accessed {
2878 color: #646464; 2898 color: var(--history-item-time-color);
2879 min-width: 96px; 2899 min-width: 96px;
2880 } 2900 }
2881 2901
2882 #domain { 2902 #domain {
2883 -webkit-margin-start: 16px; 2903 -webkit-margin-start: 16px;
2884 color: var(--secondary-text-color); 2904 color: var(--secondary-text-color);
2885 flex-shrink: 0; 2905 flex-shrink: 0;
2886 } 2906 }
2887 2907
2888 #menu-button { 2908 #menu-button {
(...skipping 107 matching lines...) Expand 10 before | Expand all | Expand 10 after
2996 <div id="time-gap-separator" hidden="[[!hasTimeGap]]"></div> 3016 <div id="time-gap-separator" hidden="[[!hasTimeGap]]"></div>
2997 </div> 3017 </div>
2998 </template> 3018 </template>
2999 </dom-module> 3019 </dom-module>
3000 <dom-module id="history-list" assetpath="chrome://history/" css-build="shadow"> 3020 <dom-module id="history-list" assetpath="chrome://history/" css-build="shadow">
3001 <template> 3021 <template>
3002 <style scope="history-list">[hidden] { 3022 <style scope="history-list">[hidden] {
3003 display: none !important; 3023 display: none !important;
3004 } 3024 }
3005 3025
3026 a {
3027 color: var(--link-color);
3028 }
3029
3006 .card-title { 3030 .card-title {
3007 align-items: center; 3031 align-items: center;
3008 border-bottom: 1px solid var(--card-border-color); 3032 border-bottom: 1px solid var(--card-border-color);
3009 border-radius: 2px 2px 0 0; 3033 border-radius: 2px 2px 0 0;
3010 color: var(--primary-text-color);
3011 display: flex; 3034 display: flex;
3012 font-size: 14px; 3035 font-size: 14px;
3013 font-weight: 500; 3036 font-weight: 500;
3014 height: 48px; 3037 height: 48px;
3015 line-height: 48px; 3038 line-height: 48px;
3016 overflow: hidden; 3039 overflow: hidden;
3017 padding: 0 20px; 3040 padding: 0 20px;
3018 text-overflow: ellipsis; 3041 text-overflow: ellipsis;
3019 white-space: nowrap; 3042 white-space: nowrap;
3020 } 3043 }
3021 3044
3022 .centered-message { 3045 .centered-message {
3023 align-items: center; 3046 align-items: center;
3024 color: #b4b4b4; 3047 color: var(--md-loading-message-color);
3025 display: flex; 3048 display: flex;
3026 flex: 1; 3049 flex: 1;
3027 font-size: 14px; 3050 font-size: 14px;
3028 font-weight: 500; 3051 font-weight: 500;
3029 height: 100%; 3052 height: 100%;
3030 justify-content: center; 3053 justify-content: center;
3031 } 3054 }
3032 3055
3033 .menu-item { 3056 .menu-item {
3034 -webkit-user-select: none; 3057 -webkit-user-select: none;
(...skipping 72 matching lines...) Expand 10 before | Expand all | Expand 10 after
3107 </template> 3130 </template>
3108 </dom-module> 3131 </dom-module>
3109 3132
3110 3133
3111 <dom-module id="history-list-container" assetpath="chrome://history/" css-build= "shadow"> 3134 <dom-module id="history-list-container" assetpath="chrome://history/" css-build= "shadow">
3112 <template> 3135 <template>
3113 <style scope="history-list-container">[hidden] { 3136 <style scope="history-list-container">[hidden] {
3114 display: none !important; 3137 display: none !important;
3115 } 3138 }
3116 3139
3140 a {
3141 color: var(--link-color);
3142 }
3143
3117 .card-title { 3144 .card-title {
3118 align-items: center; 3145 align-items: center;
3119 border-bottom: 1px solid var(--card-border-color); 3146 border-bottom: 1px solid var(--card-border-color);
3120 border-radius: 2px 2px 0 0; 3147 border-radius: 2px 2px 0 0;
3121 color: var(--primary-text-color);
3122 display: flex; 3148 display: flex;
3123 font-size: 14px; 3149 font-size: 14px;
3124 font-weight: 500; 3150 font-weight: 500;
3125 height: 48px; 3151 height: 48px;
3126 line-height: 48px; 3152 line-height: 48px;
3127 overflow: hidden; 3153 overflow: hidden;
3128 padding: 0 20px; 3154 padding: 0 20px;
3129 text-overflow: ellipsis; 3155 text-overflow: ellipsis;
3130 white-space: nowrap; 3156 white-space: nowrap;
3131 } 3157 }
3132 3158
3133 .centered-message { 3159 .centered-message {
3134 align-items: center; 3160 align-items: center;
3135 color: #b4b4b4; 3161 color: var(--md-loading-message-color);
3136 display: flex; 3162 display: flex;
3137 flex: 1; 3163 flex: 1;
3138 font-size: 14px; 3164 font-size: 14px;
3139 font-weight: 500; 3165 font-weight: 500;
3140 height: 100%; 3166 height: 100%;
3141 justify-content: center; 3167 justify-content: center;
3142 } 3168 }
3143 3169
3144 .menu-item { 3170 .menu-item {
3145 -webkit-user-select: none; 3171 -webkit-user-select: none;
(...skipping 243 matching lines...) Expand 10 before | Expand all | Expand 10 after
3389 --paper-font-code1_-_font-family: var(--paper-font-common-code_-_font-famil y); --paper-font-code1_-_-webkit-font-smoothing: var(--paper-font-common-code_- _-webkit-font-smoothing); --paper-font-code1_-_font-size: 14px; --paper-font-co de1_-_font-weight: 500; --paper-font-code1_-_line-height: 20px;; 3415 --paper-font-code1_-_font-family: var(--paper-font-common-code_-_font-famil y); --paper-font-code1_-_-webkit-font-smoothing: var(--paper-font-common-code_- _-webkit-font-smoothing); --paper-font-code1_-_font-size: 14px; --paper-font-co de1_-_font-weight: 500; --paper-font-code1_-_line-height: 20px;;
3390 } 3416 }
3391 3417
3392 </style> 3418 </style>
3393 <dom-module id="history-side-bar" assetpath="chrome://history/" css-build="shado w"> 3419 <dom-module id="history-side-bar" assetpath="chrome://history/" css-build="shado w">
3394 <template> 3420 <template>
3395 <style scope="history-side-bar">[hidden] { 3421 <style scope="history-side-bar">[hidden] {
3396 display: none !important; 3422 display: none !important;
3397 } 3423 }
3398 3424
3425 a {
3426 color: var(--link-color);
3427 }
3428
3399 .card-title { 3429 .card-title {
3400 align-items: center; 3430 align-items: center;
3401 border-bottom: 1px solid var(--card-border-color); 3431 border-bottom: 1px solid var(--card-border-color);
3402 border-radius: 2px 2px 0 0; 3432 border-radius: 2px 2px 0 0;
3403 color: var(--primary-text-color);
3404 display: flex; 3433 display: flex;
3405 font-size: 14px; 3434 font-size: 14px;
3406 font-weight: 500; 3435 font-weight: 500;
3407 height: 48px; 3436 height: 48px;
3408 line-height: 48px; 3437 line-height: 48px;
3409 overflow: hidden; 3438 overflow: hidden;
3410 padding: 0 20px; 3439 padding: 0 20px;
3411 text-overflow: ellipsis; 3440 text-overflow: ellipsis;
3412 white-space: nowrap; 3441 white-space: nowrap;
3413 } 3442 }
3414 3443
3415 .centered-message { 3444 .centered-message {
3416 align-items: center; 3445 align-items: center;
3417 color: #b4b4b4; 3446 color: var(--md-loading-message-color);
3418 display: flex; 3447 display: flex;
3419 flex: 1; 3448 flex: 1;
3420 font-size: 14px; 3449 font-size: 14px;
3421 font-weight: 500; 3450 font-weight: 500;
3422 height: 100%; 3451 height: 100%;
3423 justify-content: center; 3452 justify-content: center;
3424 } 3453 }
3425 3454
3426 .menu-item { 3455 .menu-item {
3427 -webkit-user-select: none; 3456 -webkit-user-select: none;
(...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after
3480 overflow-x: hidden; 3509 overflow-x: hidden;
3481 overflow-y: auto; 3510 overflow-y: auto;
3482 width: var(--side-bar-width); 3511 width: var(--side-bar-width);
3483 } 3512 }
3484 3513
3485 :host([drawer]) { 3514 :host([drawer]) {
3486 height: calc(100% - var(--toolbar-height)); 3515 height: calc(100% - var(--toolbar-height));
3487 } 3516 }
3488 3517
3489 div.separator { 3518 div.separator {
3490 background-color: rgba(0, 0, 0, 0.08); 3519 background-color: var(--separator-color);
3491 flex-shrink: 0; 3520 flex-shrink: 0;
3492 height: 1px; 3521 height: 1px;
3493 margin: 8px 0; 3522 margin: 8px 0;
3494 } 3523 }
3495 3524
3496 #clear-browsing-data { 3525 #clear-browsing-data {
3497 justify-content: space-between; 3526 justify-content: space-between;
3498 } 3527 }
3499 3528
3500 #clear-browsing-data iron-icon { 3529 #clear-browsing-data iron-icon {
3501 -webkit-margin-end: 20px; 3530 -webkit-margin-end: 20px;
3502 color: var(--paper-grey-400); 3531 color: var(--paper-grey-400);
3503 height: 20px; 3532 height: 20px;
3504 margin-bottom: 10px; 3533 margin-bottom: 10px;
3505 margin-top: 10px; 3534 margin-top: 10px;
3506 width: 20px; 3535 width: 20px;
3507 } 3536 }
3508 3537
3509 iron-selector { 3538 iron-selector {
3510 -webkit-user-select: none; 3539 -webkit-user-select: none;
3511 background-color: transparent; 3540 background-color: transparent;
3512 color: #5a5a5a; 3541 color: var(--sidebar-unselected-color);
3513 display: flex; 3542 display: flex;
3514 flex: 1; 3543 flex: 1;
3515 flex-direction: column; 3544 flex-direction: column;
3516 padding-top: 8px; 3545 padding-top: 8px;
3517 } 3546 }
3518 3547
3519 iron-selector > a { 3548 iron-selector > a {
3520 font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font- subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line -height: var(--paper-font-subhead_-_line-height); 3549 font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font- subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line -height: var(--paper-font-subhead_-_line-height);
3521 3550
3522 -webkit-margin-end: 4px; 3551 -webkit-margin-end: 4px;
3523 -webkit-padding-start: 24px; 3552 -webkit-padding-start: 24px;
3524 align-items: center; 3553 align-items: center;
3525 box-sizing: border-box; 3554 box-sizing: border-box;
3526 color: inherit; 3555 color: inherit;
3527 cursor: pointer; 3556 cursor: pointer;
3528 display: flex; 3557 display: flex;
3529 font-size: 14px; 3558 font-size: 14px;
3530 font-weight: 500; 3559 font-weight: 500;
3531 min-height: 48px; 3560 min-height: 48px;
3532 position: relative; 3561 position: relative;
3533 text-decoration: none; 3562 text-decoration: none;
3534 } 3563 }
3535 3564
3536 iron-selector > a.iron-selected { 3565 iron-selector > a.iron-selected {
3537 color: var(--google-blue-500); 3566 color: var(--link-color);
3538 } 3567 }
3539 3568
3540 #spacer { 3569 #spacer {
3541 flex: 1; 3570 flex: 1;
3542 } 3571 }
3543 3572
3544 #footer { 3573 #footer {
3545 color: var(--paper-grey-600); 3574 color: var(--sidebar-footer-text-color);
3546 width: var(--side-bar-width); 3575 width: var(--side-bar-width);
3547 } 3576 }
3548 3577
3549 #footer-text { 3578 #footer-text {
3550 -webkit-padding-end: 16px; 3579 -webkit-padding-end: 16px;
3551 -webkit-padding-start: 24px; 3580 -webkit-padding-start: 24px;
3552 line-height: 20px; 3581 line-height: 20px;
3553 margin: 24px 0; 3582 margin: 24px 0;
3554 } 3583 }
3555 3584
3556 #footer a { 3585 #footer a {
3557 color: var(--google-blue-700); 3586 text-decoration: none;
3558 text-decoration: none;
3559 } 3587 }
3560 3588
3561 </style> 3589 </style>
3562 3590
3563 <iron-selector id="menu" selected="{{selectedPage}}" selectable=".page-item" attr-for-selected="path" fallback-selection="history" on-iron-activate="onSelec torActivate_"> 3591 <iron-selector id="menu" selected="{{selectedPage}}" selectable=".page-item" attr-for-selected="path" fallback-selection="history" on-iron-activate="onSelec torActivate_">
3564 <a href="/" class="page-item" path="history" on-click="onItemClick_"> 3592 <a href="/" class="page-item" path="history" on-click="onItemClick_">
3565 $i18n{historyMenuItem} 3593 $i18n{historyMenuItem}
3566 <paper-ripple></paper-ripple> 3594 <paper-ripple></paper-ripple>
3567 </a> 3595 </a>
3568 <a href="/syncedTabs" class="page-item" path="syncedTabs" on-click="onItem Click_"> 3596 <a href="/syncedTabs" class="page-item" path="syncedTabs" on-click="onItem Click_">
(...skipping 13 matching lines...) Expand all
3582 </div> 3610 </div>
3583 </iron-selector> 3611 </iron-selector>
3584 </template> 3612 </template>
3585 </dom-module> 3613 </dom-module>
3586 </div><dom-module id="history-app" css-build="shadow"> 3614 </div><dom-module id="history-app" css-build="shadow">
3587 <template> 3615 <template>
3588 <style scope="history-app">[hidden] { 3616 <style scope="history-app">[hidden] {
3589 display: none !important; 3617 display: none !important;
3590 } 3618 }
3591 3619
3620 a {
3621 color: var(--link-color);
3622 }
3623
3592 .card-title { 3624 .card-title {
3593 align-items: center; 3625 align-items: center;
3594 border-bottom: 1px solid var(--card-border-color); 3626 border-bottom: 1px solid var(--card-border-color);
3595 border-radius: 2px 2px 0 0; 3627 border-radius: 2px 2px 0 0;
3596 color: var(--primary-text-color);
3597 display: flex; 3628 display: flex;
3598 font-size: 14px; 3629 font-size: 14px;
3599 font-weight: 500; 3630 font-weight: 500;
3600 height: 48px; 3631 height: 48px;
3601 line-height: 48px; 3632 line-height: 48px;
3602 overflow: hidden; 3633 overflow: hidden;
3603 padding: 0 20px; 3634 padding: 0 20px;
3604 text-overflow: ellipsis; 3635 text-overflow: ellipsis;
3605 white-space: nowrap; 3636 white-space: nowrap;
3606 } 3637 }
3607 3638
3608 .centered-message { 3639 .centered-message {
3609 align-items: center; 3640 align-items: center;
3610 color: #b4b4b4; 3641 color: var(--md-loading-message-color);
3611 display: flex; 3642 display: flex;
3612 flex: 1; 3643 flex: 1;
3613 font-size: 14px; 3644 font-size: 14px;
3614 font-weight: 500; 3645 font-weight: 500;
3615 height: 100%; 3646 height: 100%;
3616 justify-content: center; 3647 justify-content: center;
3617 } 3648 }
3618 3649
3619 .menu-item { 3650 .menu-item {
3620 -webkit-user-select: none; 3651 -webkit-user-select: none;
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after
3661 3692
3662 button.more-vert-button div { 3693 button.more-vert-button div {
3663 border: 2px solid var(--secondary-text-color); 3694 border: 2px solid var(--secondary-text-color);
3664 border-radius: 2px; 3695 border-radius: 2px;
3665 margin: 1px 10px; 3696 margin: 1px 10px;
3666 pointer-events: none; 3697 pointer-events: none;
3667 transform: scale(0.8); 3698 transform: scale(0.8);
3668 } 3699 }
3669 3700
3670 :host { 3701 :host {
3671 display: block; 3702 color: var(--primary-text-color);
3703 display: block;
3672 height: 100%; 3704 height: 100%;
3673 overflow: hidden; 3705 overflow: hidden;
3674 z-index: 0; 3706 z-index: 0;
3675 } 3707 }
3676 3708
3677 history-toolbar { 3709 history-toolbar {
3678 background: var(--md-toolbar-color); 3710 background: var(--md-toolbar-color);
3679 z-index: 2; 3711 z-index: 2;
3680 } 3712 }
3681 3713
(...skipping 22 matching lines...) Expand all
3704 #drawer:unresolved { 3736 #drawer:unresolved {
3705 display: none; 3737 display: none;
3706 } 3738 }
3707 3739
3708 #drawer { 3740 #drawer {
3709 z-index: 3; 3741 z-index: 3;
3710 } 3742 }
3711 3743
3712 #drawer-header { 3744 #drawer-header {
3713 align-items: center; 3745 align-items: center;
3714 border-bottom: 1px solid rgba(0, 0, 0, 0.08); 3746 border-bottom: 1px solid var(--separator-color);
3715 box-sizing: border-box; 3747 box-sizing: border-box;
3716 display: flex; 3748 display: flex;
3717 height: var(--toolbar-height); 3749 height: var(--toolbar-height);
3718 } 3750 }
3719 3751
3720 h1 { 3752 h1 {
3721 -webkit-padding-start: 24px; 3753 -webkit-padding-start: 24px;
3722 color: rgb(66, 66, 66); 3754 color: var(--drawer-header-color);
3723 font-size: 123%; 3755 font-size: 123%;
3724 font-weight: 400; 3756 font-weight: 400;
3725 } 3757 }
3726 3758
3727 #drop-shadow { 3759 #drop-shadow {
3728 box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.4); 3760 box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.4);
3729 height: 6px; 3761 height: 6px;
3730 left: 0; 3762 left: 0;
3731 opacity: 0; 3763 opacity: 0;
3732 pointer-events: none; 3764 pointer-events: none;
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after
3770 <history-side-bar id="drawer-side-bar" selected-page="{{selectedPage_}}" show-footer="[[showSidebarFooter]]" drawer=""> 3802 <history-side-bar id="drawer-side-bar" selected-page="{{selectedPage_}}" show-footer="[[showSidebarFooter]]" drawer="">
3771 </history-side-bar> 3803 </history-side-bar>
3772 </app-drawer> 3804 </app-drawer>
3773 </template> 3805 </template>
3774 3806
3775 <iron-media-query query="(max-width: 1023px)" query-matches="{{hasDrawer_}}" > 3807 <iron-media-query query="(max-width: 1023px)" query-matches="{{hasDrawer_}}" >
3776 </iron-media-query> 3808 </iron-media-query>
3777 </template> 3809 </template>
3778 </dom-module> 3810 </dom-module>
3779 <script src="app.crisper.js"></script></body></html> 3811 <script src="app.crisper.js"></script></body></html>
OLDNEW
« no previous file with comments | « chrome/browser/resources/md_history/app.html ('k') | chrome/browser/resources/md_history/grouped_list.html » ('j') | chrome/browser/resources/md_history/history_item.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698