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

Side by Side Diff: chrome/browser/resources/md_history/app.vulcanized.html

Issue 2549133003: [MD History] Color tweaks. (Closed)
Patch Set: 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
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: #666;
2107 --first-card-padding-top: 24px; 2109 --first-card-padding-top: 24px;
2110 --history-item-time-color: #646464;
2108 --item-height: 44px; 2111 --item-height: 44px;
2109 --primary-text-color: #333; 2112 --primary-text-color: #333;
2110 --secondary-text-color: #757575; 2113 --secondary-text-color: #757575;
2114 --separator-color: rgba(0, 0, 0, 0.08);
2111 --side-bar-width: 256px; 2115 --side-bar-width: 256px;
2116 --sidebar-footer-link-color: var(--google-blue-700);
2117 --sidebar-footer-text-color: #6e6e6e;
2118 --sidebar-selected-color: var(--google-blue-700);
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;
2123 --toolbar-selected-color: rgb(68, 136, 255);
2114 } 2124 }
2115 2125
2116 </style> 2126 </style>
2117 <dom-module id="shared-style" assetpath="chrome://history/" css-build="shadow"> 2127 <dom-module id="shared-style" assetpath="chrome://history/" css-build="shadow">
2118 <template> 2128 <template>
2119 <style scope="shared-style">[hidden] { 2129 <style scope="shared-style">[hidden] {
2120 display: none !important; 2130 display: none !important;
2121 } 2131 }
2122 2132
2123 .card-title { 2133 .card-title {
2124 align-items: center; 2134 align-items: center;
2125 border-bottom: 1px solid var(--card-border-color); 2135 border-bottom: 1px solid var(--card-border-color);
2126 border-radius: 2px 2px 0 0; 2136 border-radius: 2px 2px 0 0;
2127 color: var(--primary-text-color); 2137 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 68 matching lines...) Expand 10 before | Expand all | Expand 10 after
2220 height: 48px; 2230 height: 48px;
2221 line-height: 48px; 2231 line-height: 48px;
2222 overflow: hidden; 2232 overflow: hidden;
2223 padding: 0 20px; 2233 padding: 0 20px;
2224 text-overflow: ellipsis; 2234 text-overflow: ellipsis;
2225 white-space: nowrap; 2235 white-space: nowrap;
2226 } 2236 }
2227 2237
2228 .centered-message { 2238 .centered-message {
2229 align-items: center; 2239 align-items: center;
2230 color: #b4b4b4; 2240 color: var(--md-loading-message-color);
2231 display: flex; 2241 display: flex;
2232 flex: 1; 2242 flex: 1;
2233 font-size: 14px; 2243 font-size: 14px;
2234 font-weight: 500; 2244 font-weight: 500;
2235 height: 100%; 2245 height: 100%;
2236 justify-content: center; 2246 justify-content: center;
2237 } 2247 }
2238 2248
2239 .menu-item { 2249 .menu-item {
2240 -webkit-user-select: none; 2250 -webkit-user-select: none;
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after
2294 width: 100%; 2304 width: 100%;
2295 } 2305 }
2296 2306
2297 cr-toolbar, #overlay-buttons, #overlay-wrapper, #toolbar-container { 2307 cr-toolbar, #overlay-buttons, #overlay-wrapper, #toolbar-container {
2298 align-items: center; 2308 align-items: center;
2299 display: flex; 2309 display: flex;
2300 width: 100%; 2310 width: 100%;
2301 } 2311 }
2302 2312
2303 :host([items-selected_]) { 2313 :host([items-selected_]) {
2304 background: rgb(68, 136, 255); 2314 background: var(--toolbar-selected-color);
2305 } 2315 }
2306 2316
2307 #toolbar-container { 2317 #toolbar-container {
2308 height: var(--toolbar-height); 2318 height: var(--toolbar-height);
2309 } 2319 }
2310 2320
2311 cr-toolbar { 2321 cr-toolbar {
2312 --cr-toolbar-field-end-padding: 0; 2322 --cr-toolbar-field-end-padding: 0;
2313 --cr-toolbar-field-margin: var(--side-bar-width); 2323 --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;; 2324 --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 } 2353 }
2344 2354
2345 iron-dropdown { 2355 iron-dropdown {
2346 margin-top: 28px; 2356 margin-top: 28px;
2347 } 2357 }
2348 2358
2349 .dropdown-content { 2359 .dropdown-content {
2350 box-shadow: var(--shadow-elevation-2dp_-_box-shadow); 2360 box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
2351 background-color: white; 2361 background-color: white;
2352 border-radius: 2px; 2362 border-radius: 2px;
2353 color: var(--paper-grey-800); 2363 color: var(--synced-devices-notice-color);
2354 overflow: hidden; 2364 overflow: hidden;
2355 padding: 12px 20px; 2365 padding: 12px 20px;
2356 } 2366 }
2357 2367
2358 :host(:not([has-drawer])) #overlay-wrapper { 2368 :host(:not([has-drawer])) #overlay-wrapper {
2359 -webkit-margin-start: var(--side-bar-width); 2369 -webkit-margin-start: var(--side-bar-width);
2360 } 2370 }
2361 2371
2362 #overlay-buttons { 2372 #overlay-buttons {
2363 margin: 0 auto; 2373 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> 2497 <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> 2498 </div>
2489 </div> 2499 </div>
2490 </template> 2500 </template>
2491 </template> 2501 </template>
2492 </dom-module> 2502 </dom-module>
2493 2503
2494 <style is="custom-style" css-build="shadow">html { 2504 <style is="custom-style" css-build="shadow">html {
2495 --cr-actionable_-_cursor: pointer;; 2505 --cr-actionable_-_cursor: pointer;;
2496 --cr-focused-item-color: var(--google-grey-300); 2506 --cr-focused-item-color: var(--google-grey-300);
2507
2508 --cr-icon-padding: 8px;
2497 --cr-selectable-focus_-_background-color: var(--cr-focused-item-color); --c r-selectable-focus_-_outline: none; 2509 --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); 2510 --cr-separator-line: 1px solid rgba(0, 0, 0, 0.06);
2499 --paper-checkbox-ink-size: 40px; 2511 --paper-checkbox-ink-size: 40px;
2500 } 2512 }
2501 2513
2502 </style> 2514 </style>
2503 2515
2504 <dom-module id="cr-shared-style" assetpath="chrome://resources/cr_elements/" css -build="shadow"> 2516 <dom-module id="cr-shared-style" assetpath="chrome://resources/cr_elements/" css -build="shadow">
2505 <template> 2517 <template>
2506 <style scope="cr-shared-style">paper-spinner { 2518 <style scope="cr-shared-style">paper-spinner {
(...skipping 196 matching lines...) Expand 10 before | Expand all | Expand 10 after
2703 height: 48px; 2715 height: 48px;
2704 line-height: 48px; 2716 line-height: 48px;
2705 overflow: hidden; 2717 overflow: hidden;
2706 padding: 0 20px; 2718 padding: 0 20px;
2707 text-overflow: ellipsis; 2719 text-overflow: ellipsis;
2708 white-space: nowrap; 2720 white-space: nowrap;
2709 } 2721 }
2710 2722
2711 .centered-message { 2723 .centered-message {
2712 align-items: center; 2724 align-items: center;
2713 color: #b4b4b4; 2725 color: var(--md-loading-message-color);
2714 display: flex; 2726 display: flex;
2715 flex: 1; 2727 flex: 1;
2716 font-size: 14px; 2728 font-size: 14px;
2717 font-weight: 500; 2729 font-weight: 500;
2718 height: 100%; 2730 height: 100%;
2719 justify-content: center; 2731 justify-content: center;
2720 } 2732 }
2721 2733
2722 .menu-item { 2734 .menu-item {
2723 -webkit-user-select: none; 2735 -webkit-user-select: none;
(...skipping 144 matching lines...) Expand 10 before | Expand all | Expand 10 after
2868 } 2880 }
2869 2881
2870 :host([selected]) #checkmark::after { 2882 :host([selected]) #checkmark::after {
2871 border-color: white; 2883 border-color: white;
2872 transform: scale(1) rotate(45deg); 2884 transform: scale(1) rotate(45deg);
2873 2885
2874 transition: transform 140ms ease-out; 2886 transition: transform 140ms ease-out;
2875 } 2887 }
2876 2888
2877 #time-accessed { 2889 #time-accessed {
2878 color: #646464; 2890 color: var(--history-item-time-color);
2879 min-width: 96px; 2891 min-width: 96px;
2880 } 2892 }
2881 2893
2882 #domain { 2894 #domain {
2883 -webkit-margin-start: 16px; 2895 -webkit-margin-start: 16px;
2884 color: var(--secondary-text-color); 2896 color: var(--secondary-text-color);
2885 flex-shrink: 0; 2897 flex-shrink: 0;
2886 } 2898 }
2887 2899
2888 #menu-button { 2900 #menu-button {
(...skipping 125 matching lines...) Expand 10 before | Expand all | Expand 10 after
3014 height: 48px; 3026 height: 48px;
3015 line-height: 48px; 3027 line-height: 48px;
3016 overflow: hidden; 3028 overflow: hidden;
3017 padding: 0 20px; 3029 padding: 0 20px;
3018 text-overflow: ellipsis; 3030 text-overflow: ellipsis;
3019 white-space: nowrap; 3031 white-space: nowrap;
3020 } 3032 }
3021 3033
3022 .centered-message { 3034 .centered-message {
3023 align-items: center; 3035 align-items: center;
3024 color: #b4b4b4; 3036 color: var(--md-loading-message-color);
3025 display: flex; 3037 display: flex;
3026 flex: 1; 3038 flex: 1;
3027 font-size: 14px; 3039 font-size: 14px;
3028 font-weight: 500; 3040 font-weight: 500;
3029 height: 100%; 3041 height: 100%;
3030 justify-content: center; 3042 justify-content: center;
3031 } 3043 }
3032 3044
3033 .menu-item { 3045 .menu-item {
3034 -webkit-user-select: none; 3046 -webkit-user-select: none;
(...skipping 90 matching lines...) Expand 10 before | Expand all | Expand 10 after
3125 height: 48px; 3137 height: 48px;
3126 line-height: 48px; 3138 line-height: 48px;
3127 overflow: hidden; 3139 overflow: hidden;
3128 padding: 0 20px; 3140 padding: 0 20px;
3129 text-overflow: ellipsis; 3141 text-overflow: ellipsis;
3130 white-space: nowrap; 3142 white-space: nowrap;
3131 } 3143 }
3132 3144
3133 .centered-message { 3145 .centered-message {
3134 align-items: center; 3146 align-items: center;
3135 color: #b4b4b4; 3147 color: var(--md-loading-message-color);
3136 display: flex; 3148 display: flex;
3137 flex: 1; 3149 flex: 1;
3138 font-size: 14px; 3150 font-size: 14px;
3139 font-weight: 500; 3151 font-weight: 500;
3140 height: 100%; 3152 height: 100%;
3141 justify-content: center; 3153 justify-content: center;
3142 } 3154 }
3143 3155
3144 .menu-item { 3156 .menu-item {
3145 -webkit-user-select: none; 3157 -webkit-user-select: none;
(...skipping 261 matching lines...) Expand 10 before | Expand all | Expand 10 after
3407 height: 48px; 3419 height: 48px;
3408 line-height: 48px; 3420 line-height: 48px;
3409 overflow: hidden; 3421 overflow: hidden;
3410 padding: 0 20px; 3422 padding: 0 20px;
3411 text-overflow: ellipsis; 3423 text-overflow: ellipsis;
3412 white-space: nowrap; 3424 white-space: nowrap;
3413 } 3425 }
3414 3426
3415 .centered-message { 3427 .centered-message {
3416 align-items: center; 3428 align-items: center;
3417 color: #b4b4b4; 3429 color: var(--md-loading-message-color);
3418 display: flex; 3430 display: flex;
3419 flex: 1; 3431 flex: 1;
3420 font-size: 14px; 3432 font-size: 14px;
3421 font-weight: 500; 3433 font-weight: 500;
3422 height: 100%; 3434 height: 100%;
3423 justify-content: center; 3435 justify-content: center;
3424 } 3436 }
3425 3437
3426 .menu-item { 3438 .menu-item {
3427 -webkit-user-select: none; 3439 -webkit-user-select: none;
(...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after
3480 overflow-x: hidden; 3492 overflow-x: hidden;
3481 overflow-y: auto; 3493 overflow-y: auto;
3482 width: var(--side-bar-width); 3494 width: var(--side-bar-width);
3483 } 3495 }
3484 3496
3485 :host([drawer]) { 3497 :host([drawer]) {
3486 height: calc(100% - var(--toolbar-height)); 3498 height: calc(100% - var(--toolbar-height));
3487 } 3499 }
3488 3500
3489 div.separator { 3501 div.separator {
3490 background-color: rgba(0, 0, 0, 0.08); 3502 background-color: var(--separator-color);
3491 flex-shrink: 0; 3503 flex-shrink: 0;
3492 height: 1px; 3504 height: 1px;
3493 margin: 8px 0; 3505 margin: 8px 0;
3494 } 3506 }
3495 3507
3496 #clear-browsing-data { 3508 #clear-browsing-data {
3497 justify-content: space-between; 3509 justify-content: space-between;
3498 } 3510 }
3499 3511
3500 #clear-browsing-data iron-icon { 3512 #clear-browsing-data iron-icon {
3501 -webkit-margin-end: 20px; 3513 -webkit-margin-end: 20px;
3502 color: var(--paper-grey-400); 3514 color: var(--paper-grey-400);
3503 height: 20px; 3515 height: 20px;
3504 margin-bottom: 10px; 3516 margin-bottom: 10px;
3505 margin-top: 10px; 3517 margin-top: 10px;
3506 width: 20px; 3518 width: 20px;
3507 } 3519 }
3508 3520
3509 iron-selector { 3521 iron-selector {
3510 -webkit-user-select: none; 3522 -webkit-user-select: none;
3511 background-color: transparent; 3523 background-color: transparent;
3512 color: #5a5a5a; 3524 color: var(--sidebar-unselected-color);
3513 display: flex; 3525 display: flex;
3514 flex: 1; 3526 flex: 1;
3515 flex-direction: column; 3527 flex-direction: column;
3516 padding-top: 8px; 3528 padding-top: 8px;
3517 } 3529 }
3518 3530
3519 iron-selector > a { 3531 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); 3532 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 3533
3522 -webkit-margin-end: 4px; 3534 -webkit-margin-end: 4px;
3523 -webkit-padding-start: 24px; 3535 -webkit-padding-start: 24px;
3524 align-items: center; 3536 align-items: center;
3525 box-sizing: border-box; 3537 box-sizing: border-box;
3526 color: inherit; 3538 color: inherit;
3527 cursor: pointer; 3539 cursor: pointer;
3528 display: flex; 3540 display: flex;
3529 font-size: 14px; 3541 font-size: 14px;
3530 font-weight: 500; 3542 font-weight: 500;
3531 min-height: 48px; 3543 min-height: 48px;
3532 position: relative; 3544 position: relative;
3533 text-decoration: none; 3545 text-decoration: none;
3534 } 3546 }
3535 3547
3536 iron-selector > a.iron-selected { 3548 iron-selector > a.iron-selected {
3537 color: var(--google-blue-500); 3549 color: var(--sidebar-selected-color);
3538 } 3550 }
3539 3551
3540 #spacer { 3552 #spacer {
3541 flex: 1; 3553 flex: 1;
3542 } 3554 }
3543 3555
3544 #footer { 3556 #footer {
3545 color: var(--paper-grey-600); 3557 color: var(--sidebar-footer-text-color);
3546 width: var(--side-bar-width); 3558 width: var(--side-bar-width);
3547 } 3559 }
3548 3560
3549 #footer-text { 3561 #footer-text {
3550 -webkit-padding-end: 16px; 3562 -webkit-padding-end: 16px;
3551 -webkit-padding-start: 24px; 3563 -webkit-padding-start: 24px;
3552 line-height: 20px; 3564 line-height: 20px;
3553 margin: 24px 0; 3565 margin: 24px 0;
3554 } 3566 }
3555 3567
3556 #footer a { 3568 #footer a {
3557 color: var(--google-blue-700); 3569 color: var(--sidebar-footer-link-color);
3558 text-decoration: none; 3570 text-decoration: none;
3559 } 3571 }
3560 3572
3561 </style> 3573 </style>
3562 3574
3563 <iron-selector id="menu" selected="{{selectedPage}}" selectable=".page-item" attr-for-selected="path" fallback-selection="history" on-iron-activate="onSelec torActivate_"> 3575 <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_"> 3576 <a href="/" class="page-item" path="history" on-click="onItemClick_">
3565 $i18n{historyMenuItem} 3577 $i18n{historyMenuItem}
3566 <paper-ripple></paper-ripple> 3578 <paper-ripple></paper-ripple>
3567 </a> 3579 </a>
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after
3600 height: 48px; 3612 height: 48px;
3601 line-height: 48px; 3613 line-height: 48px;
3602 overflow: hidden; 3614 overflow: hidden;
3603 padding: 0 20px; 3615 padding: 0 20px;
3604 text-overflow: ellipsis; 3616 text-overflow: ellipsis;
3605 white-space: nowrap; 3617 white-space: nowrap;
3606 } 3618 }
3607 3619
3608 .centered-message { 3620 .centered-message {
3609 align-items: center; 3621 align-items: center;
3610 color: #b4b4b4; 3622 color: var(--md-loading-message-color);
3611 display: flex; 3623 display: flex;
3612 flex: 1; 3624 flex: 1;
3613 font-size: 14px; 3625 font-size: 14px;
3614 font-weight: 500; 3626 font-weight: 500;
3615 height: 100%; 3627 height: 100%;
3616 justify-content: center; 3628 justify-content: center;
3617 } 3629 }
3618 3630
3619 .menu-item { 3631 .menu-item {
3620 -webkit-user-select: none; 3632 -webkit-user-select: none;
(...skipping 83 matching lines...) Expand 10 before | Expand all | Expand 10 after
3704 #drawer:unresolved { 3716 #drawer:unresolved {
3705 display: none; 3717 display: none;
3706 } 3718 }
3707 3719
3708 #drawer { 3720 #drawer {
3709 z-index: 3; 3721 z-index: 3;
3710 } 3722 }
3711 3723
3712 #drawer-header { 3724 #drawer-header {
3713 align-items: center; 3725 align-items: center;
3714 border-bottom: 1px solid rgba(0, 0, 0, 0.08); 3726 border-bottom: 1px solid var(--separator-color);
3715 box-sizing: border-box; 3727 box-sizing: border-box;
3716 display: flex; 3728 display: flex;
3717 height: var(--toolbar-height); 3729 height: var(--toolbar-height);
3718 } 3730 }
3719 3731
3720 h1 { 3732 h1 {
3721 -webkit-padding-start: 24px; 3733 -webkit-padding-start: 24px;
3722 color: rgb(66, 66, 66); 3734 color: var(--drawer-header-color);
3723 font-size: 123%; 3735 font-size: 123%;
3724 font-weight: 400; 3736 font-weight: 400;
3725 } 3737 }
3726 3738
3727 #drop-shadow { 3739 #drop-shadow {
3728 box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.4); 3740 box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.4);
3729 height: 6px; 3741 height: 6px;
3730 left: 0; 3742 left: 0;
3731 opacity: 0; 3743 opacity: 0;
3732 pointer-events: none; 3744 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=""> 3782 <history-side-bar id="drawer-side-bar" selected-page="{{selectedPage_}}" show-footer="[[showSidebarFooter]]" drawer="">
3771 </history-side-bar> 3783 </history-side-bar>
3772 </app-drawer> 3784 </app-drawer>
3773 </template> 3785 </template>
3774 3786
3775 <iron-media-query query="(max-width: 1023px)" query-matches="{{hasDrawer_}}" > 3787 <iron-media-query query="(max-width: 1023px)" query-matches="{{hasDrawer_}}" >
3776 </iron-media-query> 3788 </iron-media-query>
3777 </template> 3789 </template>
3778 </dom-module> 3790 </dom-module>
3779 <script src="app.crisper.js"></script></body></html> 3791 <script src="app.crisper.js"></script></body></html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698