Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: skin/devtools-panel.css

Issue 5646124035604480: Issue 154 - Added UI for devtools panel on Chrome (Closed)
Patch Set: Rebased and adapted for API changes Created March 12, 2015, 4:08 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« ext/content.js ('K') | « messageResponder.js ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 *
2 {
3 font-family: 'Lucida Grande', 'Segoe UI', Ubuntu, Tahoma, Arial, sans-serif;
4 font-size: 11px;
5 box-sizing: border-box;
6 }
7
8 html
9 {
10 height: 100%;
11 overflow: hidden;
12 }
13
14 body
15 {
16 margin: 0;
17 color: #303942;
18 display: flex;
19 height: 100%;
20 flex-direction: column;
21 }
22
23 table
24 {
25 table-layout: fixed;
26 width: 100%;
27 border-collapse: collapse;
28 }
29
30 table *
31 {
32 overflow: hidden;
33 text-overflow: ellipsis;
34 }
35
36 td
37 {
38 padding: 3px;
39 white-space: nowrap;
40 border-left: 1px solid #cdcdcd;
41 }
42
43 td:first-child
44 {
45 border-left-style: none;
46 }
47
48 col:nth-child(2)
49 {
50 width: 115px;
51 }
52
53 col:nth-child(3)
54 {
55 width: 50%;
56 }
57
58 header
59 {
60 overflow-y: scroll;
61 border-bottom: 1px solid #cdcdcd;
62 flex-shrink: 0;
63 }
64
65 /*
66 * We have to add a scrollbar to the header to have the columns there aligned
67 * with the table below. But we don't want the scrollbar to be visible there.
68 */
69 header::-webkit-scrollbar
70 {
71 visibility: hidden;
72 }
73
74 #items
75 {
76 overflow-y: scroll;
77 flex-grow: 1;
78 }
79
80 #items table
81 {
82 line-height: 17px;
83
84 /* This background image gives every other row a gray background.
85 * This is simlar to "tr:nth-child(odd) background-color: #eee;".
86 * However, we can't do it that way, since some rows might be hidden.
87 */
88 background-image: url(data:image/gif;base64,R0lGODdhAQBQAIABAO7u7v///ywAAAAAAQ BQAAACC4SPqcsYD6OctMYCADs=);
89 background-repeat: repeat;
90 }
91
92 #items tr
93 {
94 height: 40px;
95 }
96
97 #items tr[data-state=blocked]
98 {
99 color: red;
100 }
101
102 #items tr[data-state=whitelisted]
103 {
104 color: green;
105 }
106
107 #items[data-filter-state=blocked] tr:not([data-state=blocked]),
108 #items[data-filter-state=whitelisted] tr:not([data-state=whitelisted]),
109 #items[data-filter-type=SUBDOCUMENT] tr:not([data-type=SUBDOCUMENT]),
110 #items[data-filter-type=IMAGE] tr:not([data-type=IMAGE]),
111 #items[data-filter-type=STYLESHEET] tr:not([data-type=STYLESHEET]),
112 #items[data-filter-type=SCRIPT] tr:not([data-type=SCRIPT]),
113 #items[data-filter-type=OBJECT] tr:not([data-type=OBJECT]),
114 #items[data-filter-type=XMLHTTPREQUEST] tr:not([data-type=XMLHTTPREQUEST]),
115 #items[data-filter-type=POPUP] tr:not([data-type=POPUP]),
116 #items[data-filter-type=ELEMHIDE] tr:not([data-type=ELEMHIDE]),
117 #items[data-filter-type=OTHER] tr:not([data-type=OTHER])
118 {
119 display: none;
120 }
121
122 .changed, .unnamed
123 {
124 font-style: italic
125 }
126
127 .request-wrapper, .filter-wrapper
128 {
129 display: flex;
130 height: 100%;
131 flex-direction: column;
132 }
133
134 tr:not(:hover) .action
135 {
136 display: none;
137 }
138
139 .url
140 {
141 width: 100%;
142 }
143
144 .resourceLink
145 {
146 cursor: pointer;
147 }
148
149 .resourceLink:hover {
150 text-decoration: underline;
151 }
152
153 .action-wrapper
154 {
155 display: flex;
156 width: 100%;
157 }
158
159 .action
160 {
161 background: #555;
162 color: white;
163 font-style: normal;
164 border-radius: 7px;
165 padding: 2px 6px;
166 margin: auto;
167 margin-left: 5px;
168 cursor: pointer;
169 flex-shrink: 0;
170 }
171
172 .filter-wrapper, .filter, .origin, .domain
173 {
174 flex-grow: 1;
175 }
176
177 .domain, .origin,
178 .changed .request-wrapper,
179 .changed .filter-wrapper,
180 .changed .type
181 {
182 opacity: 0.6;
183 }
184
185 footer
186 {
187 width: 100%;
188 height: 23px;
189 margin-bottom: -23px;
190 padding: 4px 3px;
191 border-top: 1px solid #cdcdcd;
192 flex-shrink: 0;
193 }
194
195 .has-changes + footer
196 {
197 margin-bottom: 0;
198 transition: margin-bottom 0.5s;
199 }
200
201 #reload
202 {
203 color: blue;
204 text-decoration: underline;
205 cursor: pointer;
206 }
OLDNEW
« ext/content.js ('K') | « messageResponder.js ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld