Skip to content

Commit b6a9c3b

Browse files
lonnieezelllonnieezell
committed
Toolbar tweaks. Have it remember the state on page refresh
1 parent 5e34d59 commit b6a9c3b

2 files changed

Lines changed: 178 additions & 122 deletions

File tree

‎system/Debug/Toolbar/View/toolbar.css‎

Lines changed: 101 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,32 @@
1-
body {
2-
/*
3-
Make room for the debug bar.
4-
This height should be good.
5-
Tried JS but wasn't having any luck
6-
setting it to the true height.
7-
Don't think this will interfere with
8-
the vast majority of sites out there
9-
but there is a possibility, so we'll
10-
have to keep an eye out.
11-
*/
12-
padding-top: 30pt;
13-
}
141
#debug-icon{
152
position: fixed;
163
top: 0px;
174
left: 0px;
18-
max-width: 34px;
19-
max-height: 34px;
5+
width: 30px;
6+
height: 30px;
207
background: #fff;
218
border-bottom: 1px solid #ddd;
229
border-radius: 20%;
2310
margin: 5px;
2411
z-index: 10000;
25-
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
26-
clear: both;;
12+
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
13+
clear: both;
2714
}
2815

2916
#debug-icon a svg{
30-
margin: 1px;
31-
max-width:32px;
32-
max-height: 32px;
17+
margin: 1px ;
18+
max-width:26px ;
19+
max-height: 26px ;
3320
}
34-
#debug-bar a:active, #debug-bar a:link,#debug-bar a:visited, {
21+
#debug-bar a:active, #debug-bar a:link,#debug-bar a:visited {
3522
color: #dd4814;
3623
}
3724
#debug-bar {
38-
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
39-
font-size: 12pt;
40-
line-height: 1.5;
41-
background: #fff;
42-
border-bottom: 1px solid #ddd;
25+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif ;
26+
font-size: 14px ;
27+
line-height: 1.5 ;
28+
background: #fff ;
29+
border-bottom: 1px solid #ddd ;
4330
margin: 0;
4431
position: fixed;
4532
top: 0;
@@ -49,174 +36,174 @@ body {
4936
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
5037
overflow: hidden;
5138
overflow-y: auto;
52-
max-height: 62%;
39+
max-height: 62% ;
5340
}
5441
#debug-bar h1,
5542
#debug-bar h2,
5643
#debug-bar h3{
57-
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
58-
color: #666;
44+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif ;
45+
color: #666 ;
5946
}
6047
#debug-bar p {
61-
font-size: 10pt;
62-
margin: 0 0 10pt 20pt;
63-
padding: 0;
48+
font-size: 12px ;
49+
margin: 0 0 10px 20px ;
50+
padding: 0 ;
6451
}
6552
#debug-bar a {
6653
text-decoration: none;
6754
}
6855
#debug-bar a:hover {
6956
text-decoration: underline;
70-
text-decoration-color: #4e4a4a !important;
57+
text-decoration-color: #4e4a4a ;
7158
}
7259
#debug-bar .muted,
7360
#debug-bar .muted td {
74-
color: #bbb !important;
61+
color: #bbb ;
7562
}
7663
#debug-bar .toolbar {
77-
display: block;
78-
position: relative;
79-
overflow: hidden;
80-
overflow-y: auto;
81-
white-space: nowrap;
64+
display: block ;
65+
position: relative ;
66+
overflow: hidden ;
67+
overflow-y: auto ;
68+
white-space: nowrap ;
8269
border-bottom: 1px solid #eee;
83-
padding: 3px 20px;
84-
text-align: right;
70+
padding: 3px 20px ;
71+
text-align: right ;
8572
}
8673
#debug-bar h1 {
87-
font-size: 13pt;
88-
font-weight: 300;
89-
margin: 0 2em 0 0;
90-
padding: 0;
91-
text-align: left;
92-
display: inline-block;
93-
float: left;
74+
font-size: 16px ;
75+
font-weight: 300 ;
76+
margin: 0 2em 0 0 ;
77+
padding: 0 ;
78+
text-align: left ;
79+
display: inline-block ;
80+
float: left ;
9481
}
9582
#debug-bar h2 {
96-
font-size: 1.1rem;
97-
font-weight: 200;
98-
margin: 0;
99-
padding: 0;
83+
font-size: 16px ;
84+
font-weight: 300 ;
85+
margin: 0 ;
86+
padding: 0 ;
10087
}
10188
#debug-bar h2 span {
102-
font-size: 80%;
89+
font-size: 13px ;
10390
}
10491
#debug-bar h3 {
105-
text-transform: uppercase;
106-
font-size: 0.8rem;
107-
font-weight: 200;
108-
margin-left: 10pt;
92+
text-transform: uppercase ;
93+
font-size: 11px ;
94+
font-weight: 200 ;
95+
margin-left: 10pt ;
10996
}
11097
#debug-bar span {
111-
display: inline-block;
112-
font-size: 10pt;
113-
padding: .3em 1em .3em;
114-
line-height: 1.0;
115-
vertical-align: baseline;
98+
display: inline-block ;
99+
font-size: 12px ;
100+
padding: .3em 1em .3em ;
101+
line-height: 1.0 ;
102+
vertical-align: baseline ;
116103
}
117104
#debug-bar table strong {
118-
font-weight: 500;
119-
color: rgba(0,0,0,0.3);
105+
font-weight: 500 ;
106+
color: rgba(0,0,0,0.3) ;
120107
}
121108
#debug-bar .ci-label {
122-
border-radius: 0.25em;
123-
text-shadow: none;
124-
background-color: #eee;
125-
border: 1px solid #ddd;
126-
margin-left: 0.4em;
109+
border-radius: 0.25em ;
110+
text-shadow: none ;
111+
background-color: #eee ;
112+
border: 1px solid #ddd ;
113+
margin-left: 0.4em ;
127114
}
128115
#debug-bar .ci-label a {
129-
display: block;
130-
width: 100%;
131-
height: 100%;
132-
color: inherit;
133-
text-decoration: none;
116+
display: block ;
117+
width: 100% ;
118+
height: 100% ;
119+
color: inherit ;
120+
text-decoration: none ;
134121
}
135122
#debug-bar .ci-label a:hover {
136-
text-decoration: underline;
123+
text-decoration: underline ;
137124
}
138125
#debug-bar .ci-label.active {
139-
font-weight: 400;
140-
background-color: #ccc;
141-
border-color: #bbb;
142-
padding: .3em 0.9em .3em;
126+
font-weight: 400 ;
127+
background-color: #ccc ;
128+
border-color: #bbb ;
129+
padding: .3em 0.9em .3em ;
143130
}
144131
#debug-bar .tab {
145132
display: none;
146-
background: inherit;
133+
background: inherit ;
147134
padding: 1em 2em;
148135
}
149136

150137
#debug-bar table {
151-
margin: 0 0 10pt 20pt;
152-
font-size: 10pt;
153-
border-collapse:collapse;
154-
width: 100%;
138+
margin: 0 0 10px 20px ;
139+
font-size: 13px ;
140+
border-collapse:collapse ;
141+
width: 100% ;
155142
}
156143
#debug-bar td,
157144
#debug-bar th {
158-
display: table-cell;
159-
text-align: left;
145+
display: table-cell ;
146+
text-align: left ;
160147
}
161148
#debug-bar tr {
162-
border: none;
149+
border: none ;
163150
}
164151
#debug-bar td {
165-
border: none;
166-
padding: 2pt 10pt 2pt 5pt;
167-
margin: 0;
152+
border: none ;
153+
padding: 2px 10px 2px 5px;
154+
margin: 0 ;
168155

169156
}
170157
#debug-bar th {
171-
padding-bottom: 0.7em;
158+
padding-bottom: 0.7em ;
172159
}
173160
#debug-bar tr td:first-child {
174-
width: 20%;
161+
width: 20% ;
175162
}
176163
#debug-bar tr td:first-child.narrow {
177-
width: 7em;
164+
width: 7em ;
178165
}
179166
#debug-bar tr:hover {
180-
background-color: #f3f3f3;
167+
background-color: #f3f3f3 ;
181168
}
182169
#debug-bar table.timeline {
183-
width: 100%;
184-
margin-left: 0;
170+
width: 100% ;
171+
margin-left: 0 ;
185172
}
186173
#debug-bar table.timeline th {
187-
font-size: 0.7em;
188-
font-weight: 200;
189-
text-align: left;
190-
padding-bottom: 1em;
174+
font-size: 0.7em ;
175+
font-weight: 200 ;
176+
text-align: left ;
177+
padding-bottom: 1em ;
191178
}
192179
#debug-bar table.timeline td,
193180
#debug-bar table.timeline th {
194-
border-left: 1px solid #ddd;
181+
border-left: 1px solid #ddd ;
195182
padding: 0 1em;
196183
position: relative;
197184
}
198185
#debug-bar table.timeline tr td:first-child,
199186
#debug-bar table.timeline tr th:first-child {
200-
border-left: 0;
201-
padding-left: 0;
187+
border-left: 0 ;
188+
padding-left: 0 ;
202189
}
203190
#debug-bar table.timeline td {
204-
padding: 5px !important;
191+
padding: 5px;
205192
}
206193
#debug-bar table.timeline .timer {
207-
position: absolute;
208-
display: inline-block;
209-
padding: 3px;
210-
bottom: 9px;
211-
border-radius: 3px;
212-
background-color: #999;
194+
position: absolute ;
195+
display: inline-block ;
196+
padding: 3px ;
197+
bottom: 9px ;
198+
border-radius: 3px ;
199+
background-color: #999 ;
213200
}
214201
#debug-bar .route-params,
215202
#debug-bar .route-params-item {
216-
vertical-align: top;
203+
vertical-align: top ;
217204
}
218205
#debug-bar .route-params-item td:first-child {
219-
padding-left: 1em;
220-
text-align: right;
221-
font-style: italic;
206+
padding-left: 1em ;
207+
text-align: right ;
208+
font-style: italic ;
222209
}

0 commit comments

Comments
 (0)