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

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: fixnit 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') | no next file with comments »
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 --md-loading-message-color: #6e6e6e;
35 /* This is --google-blue-700, rewritten as a native custom property for speed. 36 /* This is --google-blue-700, rewritten as a native custom property for speed.
36 */ 37 */
37 --md-toolbar-color: rgb(51, 103, 214); 38 --md-toolbar-color: rgb(51, 103, 214);
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">
(...skipping 1844 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 188 matching lines...) Expand 10 before | Expand all | Expand 10 after
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));;
2107 --first-card-padding-top: 24px; 2108 --first-card-padding-top: 24px;
2109 --history-item-time-color: #646464;
2110 --interactive-color: var(--google-blue-500);
2108 --item-height: 44px; 2111 --item-height: 44px;
2109 --primary-text-color: #333; 2112 --link-color: var(--google-blue-700);
2110 --secondary-text-color: #757575; 2113 --primary-text-color: var(--paper-grey-800);
2114 --secondary-text-color: var(--paper-grey-600);
2115 --separator-color: rgba(0, 0, 0, 0.08);
2111 --side-bar-width: 256px; 2116 --side-bar-width: 256px;
2117 --sidebar-footer-text-color: #6e6e6e;
2118 --sidebar-unselected-color: #5a5a5a;
2112 --toolbar-grouped-height: 101px; 2119 --toolbar-grouped-height: 101px;
2113 --toolbar-height: 56px; 2120 --toolbar-height: 56px;
2114 } 2121 }
2115 2122
2116 </style> 2123 </style>
2117 <dom-module id="shared-style" assetpath="chrome://history/" css-build="shadow"> 2124 <dom-module id="shared-style" assetpath="chrome://history/" css-build="shadow">
2118 <template> 2125 <template>
2119 <style scope="shared-style">[hidden] { 2126 <style scope="shared-style">[hidden] {
2120 display: none !important; 2127 display: none !important;
2121 } 2128 }
2122 2129
2130 a {
2131 color: var(--link-color);
2132 }
2133
2123 .card-title { 2134 .card-title {
2124 align-items: center; 2135 align-items: center;
2125 border-bottom: 1px solid var(--card-border-color); 2136 border-bottom: 1px solid var(--card-border-color);
2126 border-radius: 2px 2px 0 0; 2137 border-radius: 2px 2px 0 0;
2127 color: var(--primary-text-color);
2128 display: flex; 2138 display: flex;
2129 font-size: 14px; 2139 font-size: 14px;
2130 font-weight: 500; 2140 font-weight: 500;
2131 height: 48px; 2141 height: 48px;
2132 line-height: 48px; 2142 line-height: 48px;
2133 overflow: hidden; 2143 overflow: hidden;
2134 padding: 0 20px; 2144 padding: 0 20px;
2135 text-overflow: ellipsis; 2145 text-overflow: ellipsis;
2136 white-space: nowrap; 2146 white-space: nowrap;
2137 } 2147 }
2138 2148
2139 .centered-message { 2149 .centered-message {
2140 align-items: center; 2150 align-items: center;
2141 color: #b4b4b4; 2151 color: var(--md-loading-message-color);
2142 display: flex; 2152 display: flex;
2143 flex: 1; 2153 flex: 1;
2144 font-size: 14px; 2154 font-size: 14px;
2145 font-weight: 500; 2155 font-weight: 500;
2146 height: 100%; 2156 height: 100%;
2147 justify-content: center; 2157 justify-content: center;
2148 } 2158 }
2149 2159
2150 .menu-item { 2160 .menu-item {
2151 -webkit-user-select: none; 2161 -webkit-user-select: none;
(...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after
2201 </template> 2211 </template>
2202 </dom-module> 2212 </dom-module>
2203 2213
2204 2214
2205 <dom-module id="history-toolbar" assetpath="chrome://history/" css-build="shadow "> 2215 <dom-module id="history-toolbar" assetpath="chrome://history/" css-build="shadow ">
2206 <template> 2216 <template>
2207 <style scope="history-toolbar">[hidden] { 2217 <style scope="history-toolbar">[hidden] {
2208 display: none !important; 2218 display: none !important;
2209 } 2219 }
2210 2220
2221 a {
2222 color: var(--link-color);
2223 }
2224
2211 .card-title { 2225 .card-title {
2212 align-items: center; 2226 align-items: center;
2213 border-bottom: 1px solid var(--card-border-color); 2227 border-bottom: 1px solid var(--card-border-color);
2214 border-radius: 2px 2px 0 0; 2228 border-radius: 2px 2px 0 0;
2215 color: var(--primary-text-color);
2216 display: flex; 2229 display: flex;
2217 font-size: 14px; 2230 font-size: 14px;
2218 font-weight: 500; 2231 font-weight: 500;
2219 height: 48px; 2232 height: 48px;
2220 line-height: 48px; 2233 line-height: 48px;
2221 overflow: hidden; 2234 overflow: hidden;
2222 padding: 0 20px; 2235 padding: 0 20px;
2223 text-overflow: ellipsis; 2236 text-overflow: ellipsis;
2224 white-space: nowrap; 2237 white-space: nowrap;
2225 } 2238 }
2226 2239
2227 .centered-message { 2240 .centered-message {
2228 align-items: center; 2241 align-items: center;
2229 color: #b4b4b4; 2242 color: var(--md-loading-message-color);
2230 display: flex; 2243 display: flex;
2231 flex: 1; 2244 flex: 1;
2232 font-size: 14px; 2245 font-size: 14px;
2233 font-weight: 500; 2246 font-weight: 500;
2234 height: 100%; 2247 height: 100%;
2235 justify-content: center; 2248 justify-content: center;
2236 } 2249 }
2237 2250
2238 .menu-item { 2251 .menu-item {
2239 -webkit-user-select: none; 2252 -webkit-user-select: none;
(...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after
2292 width: 100%; 2305 width: 100%;
2293 } 2306 }
2294 2307
2295 cr-toolbar, #overlay-buttons, #overlay-wrapper, #toolbar-container { 2308 cr-toolbar, #overlay-buttons, #overlay-wrapper, #toolbar-container {
2296 align-items: center; 2309 align-items: center;
2297 display: flex; 2310 display: flex;
2298 width: 100%; 2311 width: 100%;
2299 } 2312 }
2300 2313
2301 :host([items-selected_]) { 2314 :host([items-selected_]) {
2302 background: rgb(68, 136, 255); 2315 background: var(--interactive-color);
2303 } 2316 }
2304 2317
2305 #toolbar-container { 2318 #toolbar-container {
2306 height: var(--toolbar-height); 2319 height: var(--toolbar-height);
2307 } 2320 }
2308 2321
2309 cr-toolbar { 2322 cr-toolbar {
2310 --cr-toolbar-field-end-padding: 0; 2323 --cr-toolbar-field-end-padding: 0;
2311 --cr-toolbar-field-margin: var(--side-bar-width); 2324 --cr-toolbar-field-margin: var(--side-bar-width);
2312 --cr-toolbar-right-content-wide_-_position: absolute; --cr-toolbar-righ t-content-wide_-_right: 0; --cr-toolbar-right-content-wide_-_left: initial;; 2325 --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
2341 } 2354 }
2342 2355
2343 iron-dropdown { 2356 iron-dropdown {
2344 margin-top: 28px; 2357 margin-top: 28px;
2345 } 2358 }
2346 2359
2347 .dropdown-content { 2360 .dropdown-content {
2348 box-shadow: var(--shadow-elevation-2dp_-_box-shadow); 2361 box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
2349 background-color: white; 2362 background-color: white;
2350 border-radius: 2px; 2363 border-radius: 2px;
2351 color: var(--paper-grey-800); 2364 color: var(--primary-text-color);
2352 overflow: hidden; 2365 overflow: hidden;
2353 padding: 12px 20px; 2366 padding: 12px 20px;
2354 } 2367 }
2355 2368
2356 :host(:not([has-drawer])) #overlay-wrapper { 2369 :host(:not([has-drawer])) #overlay-wrapper {
2357 -webkit-margin-start: var(--side-bar-width); 2370 -webkit-margin-start: var(--side-bar-width);
2358 } 2371 }
2359 2372
2360 #overlay-buttons { 2373 #overlay-buttons {
2361 margin: 0 auto; 2374 margin: 0 auto;
(...skipping 328 matching lines...) Expand 10 before | Expand all | Expand 10 after
2690 <dom-module id="history-searched-label" assetpath="chrome://history/" css-build= "shadow"> 2703 <dom-module id="history-searched-label" assetpath="chrome://history/" css-build= "shadow">
2691 </dom-module> 2704 </dom-module>
2692 2705
2693 2706
2694 <dom-module id="history-item" assetpath="chrome://history/" css-build="shadow"> 2707 <dom-module id="history-item" assetpath="chrome://history/" css-build="shadow">
2695 <template> 2708 <template>
2696 <style scope="history-item">[hidden] { 2709 <style scope="history-item">[hidden] {
2697 display: none !important; 2710 display: none !important;
2698 } 2711 }
2699 2712
2713 a {
2714 color: var(--link-color);
2715 }
2716
2700 .card-title { 2717 .card-title {
2701 align-items: center; 2718 align-items: center;
2702 border-bottom: 1px solid var(--card-border-color); 2719 border-bottom: 1px solid var(--card-border-color);
2703 border-radius: 2px 2px 0 0; 2720 border-radius: 2px 2px 0 0;
2704 color: var(--primary-text-color);
2705 display: flex; 2721 display: flex;
2706 font-size: 14px; 2722 font-size: 14px;
2707 font-weight: 500; 2723 font-weight: 500;
2708 height: 48px; 2724 height: 48px;
2709 line-height: 48px; 2725 line-height: 48px;
2710 overflow: hidden; 2726 overflow: hidden;
2711 padding: 0 20px; 2727 padding: 0 20px;
2712 text-overflow: ellipsis; 2728 text-overflow: ellipsis;
2713 white-space: nowrap; 2729 white-space: nowrap;
2714 } 2730 }
2715 2731
2716 .centered-message { 2732 .centered-message {
2717 align-items: center; 2733 align-items: center;
2718 color: #b4b4b4; 2734 color: var(--md-loading-message-color);
2719 display: flex; 2735 display: flex;
2720 flex: 1; 2736 flex: 1;
2721 font-size: 14px; 2737 font-size: 14px;
2722 font-weight: 500; 2738 font-weight: 500;
2723 height: 100%; 2739 height: 100%;
2724 justify-content: center; 2740 justify-content: center;
2725 } 2741 }
2726 2742
2727 .menu-item { 2743 .menu-item {
2728 -webkit-user-select: none; 2744 -webkit-user-select: none;
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after
2768 2784
2769 button.more-vert-button div { 2785 button.more-vert-button div {
2770 border: 2px solid var(--secondary-text-color); 2786 border: 2px solid var(--secondary-text-color);
2771 border-radius: 2px; 2787 border-radius: 2px;
2772 margin: 1px 10px; 2788 margin: 1px 10px;
2773 pointer-events: none; 2789 pointer-events: none;
2774 transform: scale(0.8); 2790 transform: scale(0.8);
2775 } 2791 }
2776 2792
2777 :host { 2793 :host {
2778 --checked-color: rgb(68, 136, 255); 2794 display: block;
2779 display: block;
2780 outline: none; 2795 outline: none;
2781 pointer-events: none; 2796 pointer-events: none;
2782 } 2797 }
2783 2798
2784 button { 2799 button {
2785 background: none; 2800 background: none;
2786 border: none; 2801 border: none;
2787 outline: none; 2802 outline: none;
2788 padding: 0; 2803 padding: 0;
2789 } 2804 }
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after
2832 } 2847 }
2833 2848
2834 #checkbox { 2849 #checkbox {
2835 -webkit-margin-end: 6px; 2850 -webkit-margin-end: 6px;
2836 -webkit-margin-start: 10px; 2851 -webkit-margin-start: 10px;
2837 height: 40px; 2852 height: 40px;
2838 width: 40px; 2853 width: 40px;
2839 } 2854 }
2840 2855
2841 :host([selected]) #checkbox { 2856 :host([selected]) #checkbox {
2842 color: var(--checked-color); 2857 color: var(--interactive-color);
2843 } 2858 }
2844 2859
2845 #checkmark { 2860 #checkmark {
2846 border: 2px solid var(--secondary-text-color); 2861 border: 2px solid var(--secondary-text-color);
2847 border-radius: 2px; 2862 border-radius: 2px;
2848 height: 12px; 2863 height: 12px;
2849 margin: 12px; 2864 margin: 12px;
2850 width: 12px; 2865 width: 12px;
2851 } 2866 }
2852 2867
2853 #checkmark::after { 2868 #checkmark::after {
2854 border-color: inherit; 2869 border-color: inherit;
2855 border-style: solid; 2870 border-style: solid;
2856 border-width: 0 2px 2px 0; 2871 border-width: 0 2px 2px 0;
2857 content: ''; 2872 content: '';
2858 display: block; 2873 display: block;
2859 height: 70%; 2874 height: 70%;
2860 transform: scale(0) rotate(45deg); 2875 transform: scale(0) rotate(45deg);
2861 transform-origin: 97% 86%; 2876 transform-origin: 97% 86%;
2862 width: 36%; 2877 width: 36%;
2863 } 2878 }
2864 2879
2865 :host-context([dir='rtl']) #checkmark::after { 2880 :host-context([dir='rtl']) #checkmark::after {
2866 transform-origin: 50% 14%; 2881 transform-origin: 50% 14%;
2867 } 2882 }
2868 2883
2869 :host([selected]) #checkmark { 2884 :host([selected]) #checkmark {
2870 background: var(--checked-color); 2885 background: var(--interactive-color);
2871 border-color: var(--checked-color); 2886 border-color: var(--interactive-color);
2872 } 2887 }
2873 2888
2874 :host([selected]) #checkmark::after { 2889 :host([selected]) #checkmark::after {
2875 border-color: white; 2890 border-color: white;
2876 transform: scale(1) rotate(45deg); 2891 transform: scale(1) rotate(45deg);
2877 2892
2878 transition: transform 140ms ease-out; 2893 transition: transform 140ms ease-out;
2879 } 2894 }
2880 2895
2881 #time-accessed { 2896 #time-accessed {
2882 color: #646464; 2897 color: var(--history-item-time-color);
2883 min-width: 96px; 2898 min-width: 96px;
2884 } 2899 }
2885 2900
2886 #domain { 2901 #domain {
2887 -webkit-margin-start: 16px; 2902 -webkit-margin-start: 16px;
2888 color: var(--secondary-text-color); 2903 color: var(--secondary-text-color);
2889 flex-shrink: 0; 2904 flex-shrink: 0;
2890 } 2905 }
2891 2906
2892 #menu-button { 2907 #menu-button {
2893 -webkit-margin-end: 12px; 2908 -webkit-margin-end: 12px;
2894 } 2909 }
2895 2910
2896 #star-container { 2911 #star-container {
2897 -webkit-margin-end: 4px; 2912 -webkit-margin-end: 4px;
2898 -webkit-margin-start: 12px; 2913 -webkit-margin-start: 12px;
2899 width: 32px; 2914 width: 32px;
2900 } 2915 }
2901 2916
2902 #bookmark-star { 2917 #bookmark-star {
2903 color: var(--checked-color); 2918 color: var(--interactive-color);
2904 height: 32px; 2919 height: 32px;
2905 width: 32px; 2920 width: 32px;
2906 } 2921 }
2907 2922
2908 #bookmark-star iron-icon { 2923 #bookmark-star iron-icon {
2909 height: 16px; 2924 height: 16px;
2910 width: 16px; 2925 width: 16px;
2911 } 2926 }
2912 2927
2913 #time-gap-separator { 2928 #time-gap-separator {
(...skipping 86 matching lines...) Expand 10 before | Expand all | Expand 10 after
3000 <div id="time-gap-separator" hidden="[[!hasTimeGap]]"></div> 3015 <div id="time-gap-separator" hidden="[[!hasTimeGap]]"></div>
3001 </div> 3016 </div>
3002 </template> 3017 </template>
3003 </dom-module> 3018 </dom-module>
3004 <dom-module id="history-list" assetpath="chrome://history/" css-build="shadow"> 3019 <dom-module id="history-list" assetpath="chrome://history/" css-build="shadow">
3005 <template> 3020 <template>
3006 <style scope="history-list">[hidden] { 3021 <style scope="history-list">[hidden] {
3007 display: none !important; 3022 display: none !important;
3008 } 3023 }
3009 3024
3025 a {
3026 color: var(--link-color);
3027 }
3028
3010 .card-title { 3029 .card-title {
3011 align-items: center; 3030 align-items: center;
3012 border-bottom: 1px solid var(--card-border-color); 3031 border-bottom: 1px solid var(--card-border-color);
3013 border-radius: 2px 2px 0 0; 3032 border-radius: 2px 2px 0 0;
3014 color: var(--primary-text-color);
3015 display: flex; 3033 display: flex;
3016 font-size: 14px; 3034 font-size: 14px;
3017 font-weight: 500; 3035 font-weight: 500;
3018 height: 48px; 3036 height: 48px;
3019 line-height: 48px; 3037 line-height: 48px;
3020 overflow: hidden; 3038 overflow: hidden;
3021 padding: 0 20px; 3039 padding: 0 20px;
3022 text-overflow: ellipsis; 3040 text-overflow: ellipsis;
3023 white-space: nowrap; 3041 white-space: nowrap;
3024 } 3042 }
3025 3043
3026 .centered-message { 3044 .centered-message {
3027 align-items: center; 3045 align-items: center;
3028 color: #b4b4b4; 3046 color: var(--md-loading-message-color);
3029 display: flex; 3047 display: flex;
3030 flex: 1; 3048 flex: 1;
3031 font-size: 14px; 3049 font-size: 14px;
3032 font-weight: 500; 3050 font-weight: 500;
3033 height: 100%; 3051 height: 100%;
3034 justify-content: center; 3052 justify-content: center;
3035 } 3053 }
3036 3054
3037 .menu-item { 3055 .menu-item {
3038 -webkit-user-select: none; 3056 -webkit-user-select: none;
(...skipping 71 matching lines...) Expand 10 before | Expand all | Expand 10 after
3110 </template> 3128 </template>
3111 </dom-module> 3129 </dom-module>
3112 3130
3113 3131
3114 <dom-module id="history-list-container" assetpath="chrome://history/" css-build= "shadow"> 3132 <dom-module id="history-list-container" assetpath="chrome://history/" css-build= "shadow">
3115 <template> 3133 <template>
3116 <style scope="history-list-container">[hidden] { 3134 <style scope="history-list-container">[hidden] {
3117 display: none !important; 3135 display: none !important;
3118 } 3136 }
3119 3137
3138 a {
3139 color: var(--link-color);
3140 }
3141
3120 .card-title { 3142 .card-title {
3121 align-items: center; 3143 align-items: center;
3122 border-bottom: 1px solid var(--card-border-color); 3144 border-bottom: 1px solid var(--card-border-color);
3123 border-radius: 2px 2px 0 0; 3145 border-radius: 2px 2px 0 0;
3124 color: var(--primary-text-color);
3125 display: flex; 3146 display: flex;
3126 font-size: 14px; 3147 font-size: 14px;
3127 font-weight: 500; 3148 font-weight: 500;
3128 height: 48px; 3149 height: 48px;
3129 line-height: 48px; 3150 line-height: 48px;
3130 overflow: hidden; 3151 overflow: hidden;
3131 padding: 0 20px; 3152 padding: 0 20px;
3132 text-overflow: ellipsis; 3153 text-overflow: ellipsis;
3133 white-space: nowrap; 3154 white-space: nowrap;
3134 } 3155 }
3135 3156
3136 .centered-message { 3157 .centered-message {
3137 align-items: center; 3158 align-items: center;
3138 color: #b4b4b4; 3159 color: var(--md-loading-message-color);
3139 display: flex; 3160 display: flex;
3140 flex: 1; 3161 flex: 1;
3141 font-size: 14px; 3162 font-size: 14px;
3142 font-weight: 500; 3163 font-weight: 500;
3143 height: 100%; 3164 height: 100%;
3144 justify-content: center; 3165 justify-content: center;
3145 } 3166 }
3146 3167
3147 .menu-item { 3168 .menu-item {
3148 -webkit-user-select: none; 3169 -webkit-user-select: none;
(...skipping 243 matching lines...) Expand 10 before | Expand all | Expand 10 after
3392 --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;; 3413 --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;;
3393 } 3414 }
3394 3415
3395 </style> 3416 </style>
3396 <dom-module id="history-side-bar" assetpath="chrome://history/" css-build="shado w"> 3417 <dom-module id="history-side-bar" assetpath="chrome://history/" css-build="shado w">
3397 <template> 3418 <template>
3398 <style scope="history-side-bar">[hidden] { 3419 <style scope="history-side-bar">[hidden] {
3399 display: none !important; 3420 display: none !important;
3400 } 3421 }
3401 3422
3423 a {
3424 color: var(--link-color);
3425 }
3426
3402 .card-title { 3427 .card-title {
3403 align-items: center; 3428 align-items: center;
3404 border-bottom: 1px solid var(--card-border-color); 3429 border-bottom: 1px solid var(--card-border-color);
3405 border-radius: 2px 2px 0 0; 3430 border-radius: 2px 2px 0 0;
3406 color: var(--primary-text-color);
3407 display: flex; 3431 display: flex;
3408 font-size: 14px; 3432 font-size: 14px;
3409 font-weight: 500; 3433 font-weight: 500;
3410 height: 48px; 3434 height: 48px;
3411 line-height: 48px; 3435 line-height: 48px;
3412 overflow: hidden; 3436 overflow: hidden;
3413 padding: 0 20px; 3437 padding: 0 20px;
3414 text-overflow: ellipsis; 3438 text-overflow: ellipsis;
3415 white-space: nowrap; 3439 white-space: nowrap;
3416 } 3440 }
3417 3441
3418 .centered-message { 3442 .centered-message {
3419 align-items: center; 3443 align-items: center;
3420 color: #b4b4b4; 3444 color: var(--md-loading-message-color);
3421 display: flex; 3445 display: flex;
3422 flex: 1; 3446 flex: 1;
3423 font-size: 14px; 3447 font-size: 14px;
3424 font-weight: 500; 3448 font-weight: 500;
3425 height: 100%; 3449 height: 100%;
3426 justify-content: center; 3450 justify-content: center;
3427 } 3451 }
3428 3452
3429 .menu-item { 3453 .menu-item {
3430 -webkit-user-select: none; 3454 -webkit-user-select: none;
(...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after
3482 overflow-x: hidden; 3506 overflow-x: hidden;
3483 overflow-y: auto; 3507 overflow-y: auto;
3484 width: var(--side-bar-width); 3508 width: var(--side-bar-width);
3485 } 3509 }
3486 3510
3487 :host([drawer]) { 3511 :host([drawer]) {
3488 height: calc(100% - var(--toolbar-height)); 3512 height: calc(100% - var(--toolbar-height));
3489 } 3513 }
3490 3514
3491 div.separator { 3515 div.separator {
3492 background-color: rgba(0, 0, 0, 0.08); 3516 background-color: var(--separator-color);
3493 flex-shrink: 0; 3517 flex-shrink: 0;
3494 height: 1px; 3518 height: 1px;
3495 margin: 8px 0; 3519 margin: 8px 0;
3496 } 3520 }
3497 3521
3498 #clear-browsing-data { 3522 #clear-browsing-data {
3499 justify-content: space-between; 3523 justify-content: space-between;
3500 } 3524 }
3501 3525
3502 #clear-browsing-data iron-icon { 3526 #clear-browsing-data iron-icon {
3503 -webkit-margin-end: 20px; 3527 -webkit-margin-end: 20px;
3504 color: var(--paper-grey-400); 3528 color: var(--paper-grey-400);
3505 height: 20px; 3529 height: 20px;
3506 margin-bottom: 10px; 3530 margin-bottom: 10px;
3507 margin-top: 10px; 3531 margin-top: 10px;
3508 width: 20px; 3532 width: 20px;
3509 } 3533 }
3510 3534
3511 iron-selector { 3535 iron-selector {
3512 -webkit-user-select: none; 3536 -webkit-user-select: none;
3513 background-color: transparent; 3537 background-color: transparent;
3514 color: #5a5a5a; 3538 color: var(--sidebar-unselected-color);
3515 display: flex; 3539 display: flex;
3516 flex: 1; 3540 flex: 1;
3517 flex-direction: column; 3541 flex-direction: column;
3518 padding-top: 8px; 3542 padding-top: 8px;
3519 } 3543 }
3520 3544
3521 iron-selector > a { 3545 iron-selector > a {
3522 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); 3546 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);
3523 3547
3524 -webkit-margin-end: 4px; 3548 -webkit-margin-end: 4px;
3525 -webkit-padding-start: 24px; 3549 -webkit-padding-start: 24px;
3526 align-items: center; 3550 align-items: center;
3527 box-sizing: border-box; 3551 box-sizing: border-box;
3528 color: inherit; 3552 color: inherit;
3529 cursor: pointer; 3553 cursor: pointer;
3530 display: flex; 3554 display: flex;
3531 font-size: 14px; 3555 font-size: 14px;
3532 font-weight: 500; 3556 font-weight: 500;
3533 min-height: 48px; 3557 min-height: 48px;
3534 position: relative; 3558 position: relative;
3535 text-decoration: none; 3559 text-decoration: none;
3536 } 3560 }
3537 3561
3538 iron-selector > a.iron-selected { 3562 iron-selector > a.iron-selected {
3539 color: var(--google-blue-500); 3563 color: var(--link-color);
3540 } 3564 }
3541 3565
3542 #spacer { 3566 #spacer {
3543 flex: 1; 3567 flex: 1;
3544 } 3568 }
3545 3569
3546 #footer { 3570 #footer {
3547 color: var(--paper-grey-600); 3571 color: var(--sidebar-footer-text-color);
3548 width: var(--side-bar-width); 3572 width: var(--side-bar-width);
3549 } 3573 }
3550 3574
3551 #footer-text { 3575 #footer-text {
3552 -webkit-padding-end: 16px; 3576 -webkit-padding-end: 16px;
3553 -webkit-padding-start: 24px; 3577 -webkit-padding-start: 24px;
3554 line-height: 20px; 3578 line-height: 20px;
3555 margin: 24px 0; 3579 margin: 24px 0;
3556 } 3580 }
3557 3581
3558 #footer a { 3582 #footer a {
3559 color: var(--google-blue-700); 3583 text-decoration: none;
3560 text-decoration: none;
3561 } 3584 }
3562 3585
3563 </style> 3586 </style>
3564 3587
3565 <iron-selector id="menu" selected="{{selectedPage}}" selectable=".page-item" attr-for-selected="path" fallback-selection="history" on-iron-activate="onSelec torActivate_"> 3588 <iron-selector id="menu" selected="{{selectedPage}}" selectable=".page-item" attr-for-selected="path" fallback-selection="history" on-iron-activate="onSelec torActivate_">
3566 <a href="/" class="page-item" path="history" on-click="onItemClick_"> 3589 <a href="/" class="page-item" path="history" on-click="onItemClick_">
3567 $i18n{historyMenuItem} 3590 $i18n{historyMenuItem}
3568 <paper-ripple></paper-ripple> 3591 <paper-ripple></paper-ripple>
3569 </a> 3592 </a>
3570 <a href="/syncedTabs" class="page-item" path="syncedTabs" on-click="onItem Click_"> 3593 <a href="/syncedTabs" class="page-item" path="syncedTabs" on-click="onItem Click_">
(...skipping 13 matching lines...) Expand all
3584 </div> 3607 </div>
3585 </iron-selector> 3608 </iron-selector>
3586 </template> 3609 </template>
3587 </dom-module> 3610 </dom-module>
3588 </div><dom-module id="history-app" css-build="shadow"> 3611 </div><dom-module id="history-app" css-build="shadow">
3589 <template> 3612 <template>
3590 <style scope="history-app">[hidden] { 3613 <style scope="history-app">[hidden] {
3591 display: none !important; 3614 display: none !important;
3592 } 3615 }
3593 3616
3617 a {
3618 color: var(--link-color);
3619 }
3620
3594 .card-title { 3621 .card-title {
3595 align-items: center; 3622 align-items: center;
3596 border-bottom: 1px solid var(--card-border-color); 3623 border-bottom: 1px solid var(--card-border-color);
3597 border-radius: 2px 2px 0 0; 3624 border-radius: 2px 2px 0 0;
3598 color: var(--primary-text-color);
3599 display: flex; 3625 display: flex;
3600 font-size: 14px; 3626 font-size: 14px;
3601 font-weight: 500; 3627 font-weight: 500;
3602 height: 48px; 3628 height: 48px;
3603 line-height: 48px; 3629 line-height: 48px;
3604 overflow: hidden; 3630 overflow: hidden;
3605 padding: 0 20px; 3631 padding: 0 20px;
3606 text-overflow: ellipsis; 3632 text-overflow: ellipsis;
3607 white-space: nowrap; 3633 white-space: nowrap;
3608 } 3634 }
3609 3635
3610 .centered-message { 3636 .centered-message {
3611 align-items: center; 3637 align-items: center;
3612 color: #b4b4b4; 3638 color: var(--md-loading-message-color);
3613 display: flex; 3639 display: flex;
3614 flex: 1; 3640 flex: 1;
3615 font-size: 14px; 3641 font-size: 14px;
3616 font-weight: 500; 3642 font-weight: 500;
3617 height: 100%; 3643 height: 100%;
3618 justify-content: center; 3644 justify-content: center;
3619 } 3645 }
3620 3646
3621 .menu-item { 3647 .menu-item {
3622 -webkit-user-select: none; 3648 -webkit-user-select: none;
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after
3662 3688
3663 button.more-vert-button div { 3689 button.more-vert-button div {
3664 border: 2px solid var(--secondary-text-color); 3690 border: 2px solid var(--secondary-text-color);
3665 border-radius: 2px; 3691 border-radius: 2px;
3666 margin: 1px 10px; 3692 margin: 1px 10px;
3667 pointer-events: none; 3693 pointer-events: none;
3668 transform: scale(0.8); 3694 transform: scale(0.8);
3669 } 3695 }
3670 3696
3671 :host { 3697 :host {
3672 display: block; 3698 color: var(--primary-text-color);
3699 display: block;
3673 height: 100%; 3700 height: 100%;
3674 overflow: hidden; 3701 overflow: hidden;
3675 z-index: 0; 3702 z-index: 0;
3676 } 3703 }
3677 3704
3678 history-toolbar { 3705 history-toolbar {
3679 background: var(--md-toolbar-color); 3706 background: var(--md-toolbar-color);
3680 z-index: 2; 3707 z-index: 2;
3681 } 3708 }
3682 3709
(...skipping 22 matching lines...) Expand all
3705 #drawer:unresolved { 3732 #drawer:unresolved {
3706 display: none; 3733 display: none;
3707 } 3734 }
3708 3735
3709 #drawer { 3736 #drawer {
3710 z-index: 3; 3737 z-index: 3;
3711 } 3738 }
3712 3739
3713 #drawer-header { 3740 #drawer-header {
3714 align-items: center; 3741 align-items: center;
3715 border-bottom: 1px solid rgba(0, 0, 0, 0.08); 3742 border-bottom: 1px solid var(--separator-color);
3716 box-sizing: border-box; 3743 box-sizing: border-box;
3717 display: flex; 3744 display: flex;
3718 height: var(--toolbar-height); 3745 height: var(--toolbar-height);
3719 } 3746 }
3720 3747
3721 h1 { 3748 h1 {
3722 -webkit-padding-start: 24px; 3749 -webkit-padding-start: 24px;
3723 color: rgb(66, 66, 66); 3750 color: var(--primary-text-color);
3724 font-size: 123%; 3751 font-size: 123%;
3725 font-weight: 400; 3752 font-weight: 400;
3726 } 3753 }
3727 3754
3728 #drop-shadow { 3755 #drop-shadow {
3729 box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.4); 3756 box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.4);
3730 height: 6px; 3757 height: 6px;
3731 left: 0; 3758 left: 0;
3732 opacity: 0; 3759 opacity: 0;
3733 pointer-events: none; 3760 pointer-events: none;
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after
3771 <history-side-bar id="drawer-side-bar" selected-page="{{selectedPage_}}" show-footer="[[showSidebarFooter]]" drawer=""> 3798 <history-side-bar id="drawer-side-bar" selected-page="{{selectedPage_}}" show-footer="[[showSidebarFooter]]" drawer="">
3772 </history-side-bar> 3799 </history-side-bar>
3773 </app-drawer> 3800 </app-drawer>
3774 </template> 3801 </template>
3775 3802
3776 <iron-media-query query="(max-width: 1023px)" query-matches="{{hasDrawer_}}" > 3803 <iron-media-query query="(max-width: 1023px)" query-matches="{{hasDrawer_}}" >
3777 </iron-media-query> 3804 </iron-media-query>
3778 </template> 3805 </template>
3779 </dom-module> 3806 </dom-module>
3780 <script src="app.crisper.js"></script></body></html> 3807 <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') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698