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

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/sources/navigatorTree.css

Issue 2580163002: DevTools: migrate navigator icons to UI.Icon (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
OLDNEW
1 /* 1 /*
2 * Copyright (C) 2006, 2007, 2008 Apple Inc. All rights reserved. 2 * Copyright (C) 2006, 2007, 2008 Apple Inc. All rights reserved.
3 * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org> 3 * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
4 * 4 *
5 * Redistribution and use in source and binary forms, with or without 5 * Redistribution and use in source and binary forms, with or without
6 * modification, are permitted provided that the following conditions 6 * modification, are permitted provided that the following conditions
7 * are met: 7 * are met:
8 * 8 *
9 * 1. Redistributions of source code must retain the above copyright 9 * 1. Redistributions of source code must retain the above copyright
10 * notice, this list of conditions and the following disclaimer. 10 * notice, this list of conditions and the following disclaimer.
(...skipping 10 matching lines...) Expand all
21 * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY 21 * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
22 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 22 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
23 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 23 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
24 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 24 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
25 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 25 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
26 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF 26 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
27 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 27 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
28 */ 28 */
29 29
30 .icon { 30 .icon {
31 -webkit-mask-image: url(Images/toolbarButtonGlyphs.png); 31 margin: -3px -7px -3px -7px;
32 -webkit-mask-size: 352px 168px;
33 width: 32px;
34 height: 24px;
35 margin: -3px -3px -3px -7px;
36 } 32 }
37 33
38 @media (-webkit-min-device-pixel-ratio: 1.1) {
39 .icon {
40 -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png);
41 }
42 } /* media */
43
44 .navigator-file-tree-item .icon { 34 .navigator-file-tree-item .icon {
45 -webkit-mask-position: -224px -72px;
46 background: linear-gradient(45deg, hsl(0, 0%, 50%), hsl(0, 0%, 70%)); 35 background: linear-gradient(45deg, hsl(0, 0%, 50%), hsl(0, 0%, 70%));
47 } 36 }
48 37
49 .navigator-fs-tree-item:not(.has-mapped-files), 38 .navigator-fs-tree-item:not(.has-mapped-files),
50 .navigator-fs-folder-tree-item:not(.has-mapped-files) { 39 .navigator-fs-folder-tree-item:not(.has-mapped-files) {
51 filter: grayscale(50%); 40 filter: grayscale(50%);
52 opacity: 0.5; 41 opacity: 0.5;
53 } 42 }
54 43
55 :focus .navigator-file-tree-item.selected .icon {
56 background: white !important;
57 }
58
59 :focus .navigator-folder-tree-item.selected .icon {
60 background: white !important;
61 }
62
63 .tree-outline li { 44 .tree-outline li {
64 min-height: 20px; 45 min-height: 20px;
65 } 46 }
66 47
67 .tree-outline li:hover:not(.selected) .selection { 48 .tree-outline li:hover:not(.selected) .selection {
68 display: block; 49 display: block;
69 background-color: rgba(56, 121, 217, 0.1); 50 background-color: rgba(56, 121, 217, 0.1);
70 } 51 }
71 52
72 .navigator-folder-tree-item .icon { 53 .navigator-folder-tree-item .icon {
73 -webkit-mask-position: -64px -120px;
74 background-color: #555; 54 background-color: #555;
75 } 55 }
76 56
77 .navigator-domain-tree-item .icon {
78 -webkit-mask-position: -160px -144px;
79 }
80
81 .navigator-frame-tree-item .icon {
82 -webkit-mask-position: -256px -144px;
83 }
84
85 .navigator-sm-folder-tree-item .icon, 57 .navigator-sm-folder-tree-item .icon,
86 .navigator-fs-tree-item .icon, 58 .navigator-fs-tree-item .icon,
87 .navigator-fs-folder-tree-item .icon { 59 .navigator-fs-folder-tree-item .icon {
88 background: linear-gradient(45deg, hsl(28, 75%, 50%), hsl(28, 75%, 70%)); 60 background: linear-gradient(45deg, hsl(28, 75%, 50%), hsl(28, 75%, 70%));
89 } 61 }
90 62
91 .navigator-nw-folder-tree-item .icon { 63 .navigator-nw-folder-tree-item .icon {
92 background: linear-gradient(45deg, hsl(210, 82%, 65%), hsl(210, 82%, 80%)); 64 background: linear-gradient(45deg, hsl(210, 82%, 65%), hsl(210, 82%, 80%));
93 } 65 }
94 66
95 .navigator-worker-tree-item .icon {
96 -webkit-mask-position: -320px -144px;
97 }
98
99 .navigator-sm-script-tree-item .icon, 67 .navigator-sm-script-tree-item .icon,
100 .navigator-script-tree-item .icon, 68 .navigator-script-tree-item .icon,
101 .navigator-snippet-tree-item .icon { 69 .navigator-snippet-tree-item .icon {
102 background: linear-gradient(45deg, hsl(48, 70%, 50%), hsl(48, 70%, 70%)); 70 background: linear-gradient(45deg, hsl(48, 70%, 50%), hsl(48, 70%, 70%));
103 } 71 }
104 72
105 .navigator-snippet-tree-item .icon {
106 -webkit-mask-position: -224px -96px;
107 }
108
109 .navigator-sm-stylesheet-tree-item .icon, 73 .navigator-sm-stylesheet-tree-item .icon,
110 .navigator-stylesheet-tree-item .icon { 74 .navigator-stylesheet-tree-item .icon {
111 background: linear-gradient(45deg, hsl(256, 50%, 50%), hsl(256, 50%, 70%)); 75 background: linear-gradient(45deg, hsl(256, 50%, 50%), hsl(256, 50%, 70%));
112 } 76 }
113 77
114 .navigator-image-tree-item .icon, 78 .navigator-image-tree-item .icon,
115 .navigator-font-tree-item .icon { 79 .navigator-font-tree-item .icon {
116 background: linear-gradient(45deg, hsl(109, 33%, 50%), hsl(109, 33%, 70%)); 80 background: linear-gradient(45deg, hsl(109, 33%, 50%), hsl(109, 33%, 70%));
117 } 81 }
118 82
119 .navigator-sm-folder-tree-item .tree-element-title, 83 .navigator-sm-folder-tree-item .tree-element-title,
120 .navigator-sm-script-tree-item .tree-element-title, 84 .navigator-sm-script-tree-item .tree-element-title,
121 .navigator-sm-stylesheet-tree-item .tree-element-title { 85 .navigator-sm-stylesheet-tree-item .tree-element-title {
122 font-style: italic; 86 font-style: italic;
123 } 87 }
124 88
125 :host{ 89 :host{
126 overflow-y: auto; 90 overflow-y: auto;
127 } 91 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698