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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/browser/resources/md_downloads/vulcanized.html

Issue 1899043003: MD Downloads/History: unify page and toolbar background colors (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: the colors, duke, the colors! Created 4 years, 8 months 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_downloads/toolbar.css ('k') | chrome/browser/resources/md_history/history.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 <!DOCTYPE html><html i18n-values="dir:textdirection;lang:language"><head><!-- 1 <!DOCTYPE html><html i18n-values="dir:textdirection;lang:language"><head><!--
2 @license 2 @license
3 Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2016 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
11 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 11 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
12 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 12 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
13 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 13 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
14 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 14 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
15 Code distributed by Google as part of the polymer project is also 15 Code distributed by Google as part of the polymer project is also
16 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 16 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
17 --> 17 -->
18 <meta charset="utf-8"> 18 <meta charset="utf-8">
19 <title i18n-content="title"></title> 19 <title i18n-content="title"></title>
20 <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> 20 <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
21 <style> 21 <style>
22 :root {
23 /* These are custom, Chrome-specific colors that don't have --paper or
24 * --google equivalents. Blame bettes@. http://crbug.com/598451 */
25 --md-background-color: rgb(236, 239, 241);
26 --md-toolbar-color: rgb(52, 73, 94);
27 }
28
29 </style>
30 <style>
22 html { 31 html {
23 background: rgb(236, 239, 241); 32 background: var(--md-background-color);
24 } 33 }
25 34
26 html, 35 html,
27 body { 36 body {
28 height: 100%; 37 height: 100%;
29 } 38 }
30 39
31 body { 40 body {
32 display: flex; 41 display: flex;
33 margin: 0; 42 margin: 0;
34 } 43 }
35 </style> 44 </style>
36 </head> 45 </head>
37 <body><div hidden="" by-vulcanize=""><script src="chrome://resources/js/load_tim e_data.js"></script> 46 <body><div hidden="" by-vulcanize=""><script src="chrome://resources/js/load_tim e_data.js"></script>
38 <script src="chrome://downloads/strings.js"></script> 47 <script src="chrome://downloads/strings.js"></script>
39
40
41 <dom-module id="iron-list" assetpath="chrome://resources/polymer/v1_0/iron-list/ "> 48 <dom-module id="iron-list" assetpath="chrome://resources/polymer/v1_0/iron-list/ ">
42 <template> 49 <template>
43 <style> 50 <style>
44 :host { 51 :host {
45 display: block; 52 display: block;
46 position: relative; 53 position: relative;
47 } 54 }
48 55
49 @media only screen and (-webkit-max-device-pixel-ratio: 1) { 56 @media only screen and (-webkit-max-device-pixel-ratio: 1) {
50 :host { 57 :host {
(...skipping 369 matching lines...) Expand 10 before | Expand all | Expand 10 after
420 --layout-fixed-left: { 427 --layout-fixed-left: {
421 position: fixed; 428 position: fixed;
422 top: 0; 429 top: 0;
423 bottom: 0; 430 bottom: 0;
424 left: 0; 431 left: 0;
425 }; 432 };
426 433
427 } 434 }
428 435
429 </style> 436 </style>
437
438
430 <dom-module id="iron-icon" assetpath="chrome://resources/polymer/v1_0/iron-icon/ "> 439 <dom-module id="iron-icon" assetpath="chrome://resources/polymer/v1_0/iron-icon/ ">
431 440
432 <style> 441 <style>
433 :host { 442 :host {
434 @apply(--layout-inline); 443 @apply(--layout-inline);
435 @apply(--layout-center-center); 444 @apply(--layout-center-center);
436 position: relative; 445 position: relative;
437 446
438 vertical-align: middle; 447 vertical-align: middle;
439 448
(...skipping 470 matching lines...) Expand 10 before | Expand all | Expand 10 after
910 :host([elevation="4"]) { 919 :host([elevation="4"]) {
911 @apply(--shadow-elevation-8dp); 920 @apply(--shadow-elevation-8dp);
912 } 921 }
913 922
914 :host([elevation="5"]) { 923 :host([elevation="5"]) {
915 @apply(--shadow-elevation-16dp); 924 @apply(--shadow-elevation-16dp);
916 } 925 }
917 </style> 926 </style>
918 </template> 927 </template>
919 </dom-module> 928 </dom-module>
929
930
920 <dom-module id="paper-material" assetpath="chrome://resources/polymer/v1_0/paper -material/"> 931 <dom-module id="paper-material" assetpath="chrome://resources/polymer/v1_0/paper -material/">
921 <template> 932 <template>
922 <style include="paper-material-shared-styles"></style> 933 <style include="paper-material-shared-styles"></style>
923 <style> 934 <style>
924 :host([animated]) { 935 :host([animated]) {
925 @apply(--shadow-transition); 936 @apply(--shadow-transition);
926 } 937 }
927 </style> 938 </style>
928 939
929 <content></content> 940 <content></content>
(...skipping 371 matching lines...) Expand 10 before | Expand all | Expand 10 after
1301 1312
1302 /* opacity for light text on a dark background */ 1313 /* opacity for light text on a dark background */
1303 --light-divider-opacity: 0.12; 1314 --light-divider-opacity: 0.12;
1304 --light-disabled-opacity: 0.3; /* or hint text or icon */ 1315 --light-disabled-opacity: 0.3; /* or hint text or icon */
1305 --light-secondary-opacity: 0.7; 1316 --light-secondary-opacity: 0.7;
1306 --light-primary-opacity: 1.0; 1317 --light-primary-opacity: 1.0;
1307 1318
1308 } 1319 }
1309 1320
1310 </style> 1321 </style>
1322
1323
1311 <dom-module id="paper-progress" assetpath="chrome://resources/polymer/v1_0/paper -progress/"> 1324 <dom-module id="paper-progress" assetpath="chrome://resources/polymer/v1_0/paper -progress/">
1312 <template> 1325 <template>
1313 <style> 1326 <style>
1314 :host { 1327 :host {
1315 display: block; 1328 display: block;
1316 width: 200px; 1329 width: 200px;
1317 position: relative; 1330 position: relative;
1318 overflow: hidden; 1331 overflow: hidden;
1319 } 1332 }
1320 1333
(...skipping 493 matching lines...) Expand 10 before | Expand all | Expand 10 after
1814 <div id="incognito" i18n-values="title:inIncognito" hidden="[[!data.otr]]" ></div> 1827 <div id="incognito" i18n-values="title:inIncognito" hidden="[[!data.otr]]" ></div>
1815 </div> 1828 </div>
1816 1829
1817 </template> 1830 </template>
1818 1831
1819 1832
1820 1833
1821 </dom-module> 1834 </dom-module>
1822 1835
1823 1836
1824
1825
1826 <style is="custom-style"> 1837 <style is="custom-style">
1827 1838
1828 :root { 1839 :root {
1829 /* 1840 /*
1830 * You can use these generic variables in your elements for easy theming. 1841 * You can use these generic variables in your elements for easy theming.
1831 * For example, if all your elements use `--primary-text-color` as its main 1842 * For example, if all your elements use `--primary-text-color` as its main
1832 * color, then switching from a light to a dark theme is just a matter of 1843 * color, then switching from a light to a dark theme is just a matter of
1833 * changing the value of `--primary-text-color` in your application. 1844 * changing the value of `--primary-text-color` in your application.
1834 */ 1845 */
1835 --primary-text-color: var(--light-theme-text-color); 1846 --primary-text-color: var(--light-theme-text-color);
(...skipping 94 matching lines...) Expand 10 before | Expand all | Expand 10 after
1930 background: currentColor; 1941 background: currentColor;
1931 content: ''; 1942 content: '';
1932 opacity: var(--dark-divider-opacity); 1943 opacity: var(--dark-divider-opacity);
1933 pointer-events: none; 1944 pointer-events: none;
1934 1945
1935 @apply(--paper-item-focused-before); 1946 @apply(--paper-item-focused-before);
1936 } 1947 }
1937 </style> 1948 </style>
1938 </template> 1949 </template>
1939 </dom-module> 1950 </dom-module>
1940 </llink><dom-module id="paper-item" assetpath="chrome://resources/polymer/v1_0/p aper-item/"> 1951 </llink>
1952
1953 <dom-module id="paper-item" assetpath="chrome://resources/polymer/v1_0/paper-ite m/">
1941 <template> 1954 <template>
1942 <style include="paper-item-shared-styles"></style> 1955 <style include="paper-item-shared-styles"></style>
1943 <style> 1956 <style>
1944 :host { 1957 :host {
1945 @apply(--layout-horizontal); 1958 @apply(--layout-horizontal);
1946 @apply(--layout-center); 1959 @apply(--layout-center);
1947 @apply(--paper-font-subhead); 1960 @apply(--paper-font-subhead);
1948 1961
1949 @apply(--paper-item); 1962 @apply(--paper-item);
1950 } 1963 }
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after
1984 1997
1985 @apply(--paper-menu-focused-item-after); 1998 @apply(--paper-menu-focused-item-after);
1986 } 1999 }
1987 2000
1988 .selectable-content > ::content > *[colored]:focus:after { 2001 .selectable-content > ::content > *[colored]:focus:after {
1989 opacity: 0.26; 2002 opacity: 0.26;
1990 } 2003 }
1991 </style> 2004 </style>
1992 </template> 2005 </template>
1993 </dom-module> 2006 </dom-module>
2007
2008
1994 <dom-module id="paper-menu" assetpath="chrome://resources/polymer/v1_0/paper-men u/"> 2009 <dom-module id="paper-menu" assetpath="chrome://resources/polymer/v1_0/paper-men u/">
1995 <template> 2010 <template>
1996 <style include="paper-menu-shared-styles"></style> 2011 <style include="paper-menu-shared-styles"></style>
1997 <style> 2012 <style>
1998 :host { 2013 :host {
1999 display: block; 2014 display: block;
2000 padding: 8px 0; 2015 padding: 8px 0;
2001 2016
2002 background: var(--paper-menu-background-color, --primary-background-colo r); 2017 background: var(--paper-menu-background-color, --primary-background-colo r);
2003 color: var(--paper-menu-color, --primary-text-color); 2018 color: var(--paper-menu-color, --primary-text-color);
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after
2039 2054
2040 </style> 2055 </style>
2041 2056
2042 <template> 2057 <template>
2043 <content></content> 2058 <content></content>
2044 </template> 2059 </template>
2045 2060
2046 </dom-module> 2061 </dom-module>
2047 2062
2048 <script src="chrome://resources/polymer/v1_0/web-animations-js/web-animations-ne xt-lite.min.js"></script> 2063 <script src="chrome://resources/polymer/v1_0/web-animations-js/web-animations-ne xt-lite.min.js"></script>
2064
2065
2049 <dom-module id="iron-dropdown" assetpath="chrome://resources/polymer/v1_0/iron-d ropdown/"> 2066 <dom-module id="iron-dropdown" assetpath="chrome://resources/polymer/v1_0/iron-d ropdown/">
2050 <style> 2067 <style>
2051 :host { 2068 :host {
2052 position: fixed; 2069 position: fixed;
2053 } 2070 }
2054 2071
2055 #contentWrapper ::content > * { 2072 #contentWrapper ::content > * {
2056 overflow: auto; 2073 overflow: auto;
2057 } 2074 }
2058 2075
(...skipping 126 matching lines...) Expand 10 before | Expand all | Expand 10 after
2185 position: fixed; 2202 position: fixed;
2186 clip: rect(0px,0px,0px,0px); 2203 clip: rect(0px,0px,0px,0px);
2187 } 2204 }
2188 </style> 2205 </style>
2189 2206
2190 <template> 2207 <template>
2191 <div aria-live$="[[mode]]">[[_text]]</div> 2208 <div aria-live$="[[mode]]">[[_text]]</div>
2192 </template> 2209 </template>
2193 2210
2194 </dom-module> 2211 </dom-module>
2212 <style>
2213 /* Copyright 2015 The Chromium Authors. All rights reserved.
2214 * Use of this source code is governed by a BSD-style license that can be
2215 * found in the LICENSE file. */
2216
2217 @font-face {
2218 font-family: 'Roboto';
2219 font-style: normal;
2220 font-weight: 300;
2221 src: local('Roboto Light'), local('Roboto-Light'),
2222 url("chrome://resources/roboto/roboto-light.woff2") format('woff2');
2223 }
2224
2225 @font-face {
2226 font-family: 'Roboto';
2227 font-style: normal;
2228 font-weight: 400;
2229 src: local('Roboto'), local('Roboto-Regular'),
2230 url("chrome://resources/roboto/roboto-regular.woff2") format('woff2');
2231 }
2232
2233 @font-face {
2234 font-family: 'Roboto';
2235 font-style: normal;
2236 font-weight: 500;
2237 src: local('Roboto Medium'), local('Roboto-Medium'),
2238 url("chrome://resources/roboto/roboto-medium.woff2") format('woff2');
2239 }
2240
2241 </style>
2195 <style is="custom-style"> 2242 <style is="custom-style">
2196 2243
2197 :root { 2244 :root {
2198 2245
2199 /* Shared Styles */ 2246 /* Shared Styles */
2200 --paper-font-common-base: { 2247 --paper-font-common-base: {
2201 font-family: 'Roboto', 'Noto', sans-serif; 2248 font-family: 'Roboto', 'Noto', sans-serif;
2202 -webkit-font-smoothing: antialiased; 2249 -webkit-font-smoothing: antialiased;
2203 }; 2250 };
2204 2251
(...skipping 136 matching lines...) Expand 10 before | Expand all | Expand 10 after
2341 @apply(--paper-font-common-code); 2388 @apply(--paper-font-common-code);
2342 2389
2343 font-size: 14px; 2390 font-size: 14px;
2344 font-weight: 500; 2391 font-weight: 500;
2345 line-height: 20px; 2392 line-height: 20px;
2346 }; 2393 };
2347 2394
2348 } 2395 }
2349 2396
2350 </style> 2397 </style>
2351 <style>
2352 /* Copyright 2015 The Chromium Authors. All rights reserved.
2353 * Use of this source code is governed by a BSD-style license that can be
2354 * found in the LICENSE file. */
2355 2398
2356 @font-face {
2357 font-family: 'Roboto';
2358 font-style: normal;
2359 font-weight: 300;
2360 src: local('Roboto Light'), local('Roboto-Light'),
2361 url("chrome://resources/roboto/roboto-light.woff2") format('woff2');
2362 }
2363 2399
2364 @font-face {
2365 font-family: 'Roboto';
2366 font-style: normal;
2367 font-weight: 400;
2368 src: local('Roboto'), local('Roboto-Regular'),
2369 url("chrome://resources/roboto/roboto-regular.woff2") format('woff2');
2370 }
2371
2372 @font-face {
2373 font-family: 'Roboto';
2374 font-style: normal;
2375 font-weight: 500;
2376 src: local('Roboto Medium'), local('Roboto-Medium'),
2377 url("chrome://resources/roboto/roboto-medium.woff2") format('woff2');
2378 }
2379
2380 </style>
2381 <dom-module id="paper-input-container" assetpath="chrome://resources/polymer/v1_ 0/paper-input/"> 2400 <dom-module id="paper-input-container" assetpath="chrome://resources/polymer/v1_ 0/paper-input/">
2382 <template> 2401 <template>
2383 <style> 2402 <style>
2384 :host { 2403 :host {
2385 display: block; 2404 display: block;
2386 padding: 8px 0; 2405 padding: 8px 0;
2387 2406
2388 @apply(--paper-input-container); 2407 @apply(--paper-input-container);
2389 } 2408 }
2390 2409
(...skipping 307 matching lines...) Expand 10 before | Expand all | Expand 10 after
2698 2717
2699 </dom-module> 2718 </dom-module>
2700 <dom-module id="downloads-toolbar" assetpath="chrome://downloads/"> 2719 <dom-module id="downloads-toolbar" assetpath="chrome://downloads/">
2701 <template><style> 2720 <template><style>
2702 /* Copyright 2015 The Chromium Authors. All rights reserved. 2721 /* Copyright 2015 The Chromium Authors. All rights reserved.
2703 * Use of this source code is governed by a BSD-style license that can be 2722 * Use of this source code is governed by a BSD-style license that can be
2704 * found in the LICENSE file. */ 2723 * found in the LICENSE file. */
2705 2724
2706 :host { 2725 :host {
2707 align-items: center; 2726 align-items: center;
2708 background: rgb(52, 73, 94); 2727 background: var(--md-toolbar-color);
2709 color: white; 2728 color: white;
2710 content-sizing: padding-box; 2729 content-sizing: padding-box;
2711 display: flex; 2730 display: flex;
2712 min-height: 56px; 2731 min-height: 56px;
2713 } 2732 }
2714 2733
2715 #title h1 { 2734 #title h1 {
2716 -webkit-margin-end: 0; 2735 -webkit-margin-end: 0;
2717 -webkit-margin-start: 24px; 2736 -webkit-margin-start: 24px;
2718 font-size: 123.1%; 2737 font-size: 123.1%;
(...skipping 191 matching lines...) Expand 10 before | Expand all | Expand 10 after
2910 display: none !important; 2929 display: none !important;
2911 } 2930 }
2912 2931
2913 paper-button { 2932 paper-button {
2914 font-weight: 500; 2933 font-weight: 500;
2915 margin: 0; 2934 margin: 0;
2916 min-width: auto; 2935 min-width: auto;
2917 } 2936 }
2918 2937
2919 </style> 2938 </style>
2939 <style>
2940 :root {
2941 /* These are custom, Chrome-specific colors that don't have --paper or
2942 * --google equivalents. Blame bettes@. http://crbug.com/598451 */
2943 --md-background-color: rgb(236, 239, 241);
2944 --md-toolbar-color: rgb(52, 73, 94);
2945 }
2946
2947 </style>
2948 <style>
2949 #toolbar {
2950 background: var(--md-toolbar-color);
2951 }
2952 </style>
2920 <downloads-toolbar id="toolbar"></downloads-toolbar> 2953 <downloads-toolbar id="toolbar"></downloads-toolbar>
2921 <iron-list id="downloads-list" items="{{items_}}" hidden="[[!hasDownloads_]] "> 2954 <iron-list id="downloads-list" items="{{items_}}" hidden="[[!hasDownloads_]] ">
2922 <template> 2955 <template>
2923 <downloads-item data="[[item]]" hide-date="[[item.hideDate]]"> 2956 <downloads-item data="[[item]]" hide-date="[[item.hideDate]]">
2924 </downloads-item> 2957 </downloads-item>
2925 </template> 2958 </template>
2926 </iron-list> 2959 </iron-list>
2927 <div id="no-downloads" hidden="[[hasDownloads_]]"> 2960 <div id="no-downloads" hidden="[[hasDownloads_]]">
2928 <div> 2961 <div>
2929 <div class="illustration"></div> 2962 <div class="illustration"></div>
(...skipping 11 matching lines...) Expand all
2941 <command id="undo-command" shortcut="Meta-U+005A"></command> 2974 <command id="undo-command" shortcut="Meta-U+005A"></command>
2942 <command id="find-command" shortcut="Meta-U+0046"></command> 2975 <command id="find-command" shortcut="Meta-U+0046"></command>
2943 </if> 2976 </if>
2944 <if expr="not is_macosx"> 2977 <if expr="not is_macosx">
2945 <command id="undo-command" shortcut="Ctrl-U+005A"></command> 2978 <command id="undo-command" shortcut="Ctrl-U+005A"></command>
2946 <command id="find-command" shortcut="Ctrl-U+0046"></command> 2979 <command id="find-command" shortcut="Ctrl-U+0046"></command>
2947 </if> 2980 </if>
2948 <link rel="import" href="chrome://resources/html/polymer.html"> 2981 <link rel="import" href="chrome://resources/html/polymer.html">
2949 2982
2950 <script src="crisper.js"></script></body></html> 2983 <script src="crisper.js"></script></body></html>
OLDNEW
« no previous file with comments | « chrome/browser/resources/md_downloads/toolbar.css ('k') | chrome/browser/resources/md_history/history.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698