You are here

Home » API reference » Devel 8.3

webprofiler_toolbar.css.twig in Devel 8.3

Same filename and directory in other branches
  1. 8 webprofiler/templates/Profiler/webprofiler_toolbar.css.twig
  2. 8.2 webprofiler/templates/Profiler/webprofiler_toolbar.css.twig
  3. 4.x webprofiler/templates/Profiler/webprofiler_toolbar.css.twig
.sf-minitoolbar {
display: none;

position: fixed;
bottom: 0;
right: 0;

padding: 5px 5px 0;

background-color: #f7f7f7;
background-image: -moz-linear-gradient(top, #e4e4e4, #ffffff);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e4e4e4), to(#ffffff));
background-image: -o-linear-gradient(top, #e4e4e4, #ffffff);
background: linear-gradient(top, #e4e4e4, #ffffff);

border-radius: 16px 0 0 0;

z-index: 6000000;
}

.sf-toolbarreset {
position: fixed;
background-color: #f7f7f7;
left: 0;
right: 0;
height: 38px;
margin: 0;
padding: 0 40px 0 0;
z-index: 6000000;
font: 11px Verdana, Arial, sans-serif;
text-align: left;
color: #2f2f2f;

background-image: -moz-linear-gradient(top, #e4e4e4, #ffffff);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e4e4e4), to(#ffffff));
background-image: -o-linear-gradient(top, #e4e4e4, #ffffff);
background: linear-gradient(top, #e4e4e4, #ffffff);

bottom: 0;
border-top: 1px solid #bbb;
}
.sf-toolbarreset abbr {
border-bottom: 1px dotted #000000;
}
.sf-toolbarreset span,
.sf-toolbarreset div {
font-size: 11px;
}
.sf-toolbarreset img {
width: auto;
display: inline;
}

.sf-toolbarreset .hide-button {
display: block;
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
cursor: pointer;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAMAAAAMCGV4AAAAllBMVEXDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PExMTPz8/Q0NDR0dHT09Pb29vc3Nzf39/h4eHi4uLj4+P6+vr7+/v8/Pz9/f3///+Nh2QuAAAAIXRSTlMABgwPGBswMzk8QktRV4SKjZOWmaKlq7TAxszb3urt+fy1vNEpAAAAiklEQVQIHUXBBxKCQBREwRFzDqjoGh+C2YV//8u5Sll2S0E/dof1tKdKM6GyqCto7PjZRJIS/mbSELgXOSd/BzpKIH1ZefVWpDDTHsi8mZVnwImPi5ndCLbaAZk3M58Bay0h9VbeSvMpjDUAHj4jL55AW1rxN5fU2PLjIgVRzNdxVFOlGzvnJi0Fb1XNGBHA9uQOAAAAAElFTkSuQmCC');
background-repeat: no-repeat;
background-position: 13px 11px;
}
.sf-toolbarreset a {
color: #000 !important;
border: none;
}

.sf-toolbar-block {
white-space: nowrap;
color: #2f2f2f;
display: block;
min-height: 28px;
border-right: 1px solid #e4e4e4;
padding: 0;
float: left;
cursor: default;
}

.sf-toolbar-block span {
display: inline-block;
}

.sf-toolbar-block .sf-toolbar-info-piece {
line-height: 19px;
margin-bottom: 5px;
}

.sf-toolbar-block .sf-toolbar-info-piece .sf-toolbar-status {
padding: 0px 5px;
border-radius: 5px;
margin-bottom: 0px;
vertical-align: top;
}

.sf-toolbar-block .sf-toolbar-info-piece:last-child {
margin-bottom: 0;
}

.sf-toolbar-block .sf-toolbar-info-piece a,
.sf-toolbar-block .sf-toolbar-info-piece abbr {
color: #2f2f2f;
}

.sf-toolbar-block .sf-toolbar-info-piece b {
display: inline-block;
width: 150px;
vertical-align: top;
}

.sf-toolbar-block .sf-toolbar-info-with-next-pointer:after {
content: ' :: ';
color: #999;
}

.sf-toolbar-block .sf-toolbar-info-with-delimiter {
border-right: 1px solid #999;
padding-right: 5px;
margin-right: 5px;
}

.sf-toolbar-block .sf-toolbar-info {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #bbb;
padding: 9px 0;
margin-left: -1px;

bottom: 38px;
border-bottom-width: 0;
border-bottom: 1px solid #bbb;
border-radius: 4px 4px 0 0;
}

.sf-toolbarreset > div:last-of-type .sf-toolbar-info {
right: -1px;
}

.sf-toolbar-block .sf-toolbar-info:empty {
visibility: hidden;
}

.sf-toolbar-block .sf-toolbar-status {
display: inline-block;
color: #fff;
background-color: #666;
padding: 3px 6px;
border-radius: 3px;
margin-bottom: 2px;
vertical-align: middle;
min-width: 6px;
min-height: 13px;
}

.sf-toolbar-block .sf-toolbar-status abbr {
color: #fff;
border-bottom: 1px dotted black;
}

.sf-toolbar-block .sf-toolbar-status-green {
background-color: #759e1a;
}

.sf-toolbar-block .sf-toolbar-status-red {
background-color: #a33;
}

.sf-toolbar-block .sf-toolbar-status-yellow {
background-color: #ffcc00;
color: #000;
}

.sf-toolbar-block .sf-toolbar-status-black {
background-color: #000;
}

.sf-toolbar-block .sf-toolbar-icon {
display: block;
}

.sf-toolbar-block .sf-toolbar-icon > a,
.sf-toolbar-block .sf-toolbar-icon > span {
display: block;
font-weight: normal;
text-decoration: none;
margin: 0;
padding: 5px 6px;
min-width: 20px;
text-align: center;
vertical-align: middle;
}

.sf-toolbar-block .sf-toolbar-icon > a,
.sf-toolbar-block .sf-toolbar-icon > a:link
.sf-toolbar-block .sf-toolbar-icon > a:hover {
color: black !important;
}

.sf-toolbar-block .sf-toolbar-icon > a[href]:after {
content: "";
}

.sf-toolbar-block .sf-toolbar-icon img {
border-width: 0;
vertical-align: middle;
}

.sf-toolbar-block .sf-toolbar-icon img + span {
margin-left: 0;
margin-top: 2px;
}

.sf-toolbar-block .sf-toolbar-icon .sf-toolbar-status {
border-radius: 12px;
border-bottom-left-radius: 0;
margin-top: 0;
}

.sf-toolbar-block .sf-toolbar-info-method {
cursor: hand;
}

.sf-toolbar-block .sf-toolbar-info-method[onclick=""] {
border-bottom: none;
cursor: inherit;
}

.sf-toolbar-info-php {}
.sf-toolbar-info-php-ext {}

.sf-toolbar-info-php-ext .sf-toolbar-status {
margin-left: 2px;
}

.sf-toolbar-info-php-ext .sf-toolbar-status:first-child {
margin-left: 0;
}

.sf-toolbar-block a .sf-toolbar-info-piece-additional,
.sf-toolbar-block a .sf-toolbar-info-piece-additional-detail {
display: inline-block;
}

.sf-toolbar-block a .sf-toolbar-info-piece-additional:empty,
.sf-toolbar-block a .sf-toolbar-info-piece-additional-detail:empty {
display: none;
}

.sf-toolbarreset:hover {
box-shadow: rgba(0, 0, 0, 0.3) 0 0 50px;
}

.sf-toolbar-block:hover {
box-shadow: rgba(0, 0, 0, 0.35) 0 0 5px;
border-right: none;
margin-right: 1px;
position: relative;
}

.sf-toolbar-block:hover .sf-toolbar-icon {
background-color: #fff;
border-top: 1px dotted #DDD;
position: relative;
margin-top: -1px;
z-index: 10002;
}

.sf-toolbar-block:hover .sf-toolbar-info {
display: block;
min-width: -webkit-calc(100% + 2px);
min-width: calc(100% + 2px);
z-index: 10001;
box-sizing: border-box;
padding: 9px;
line-height: 19px;
}

/***** Media query *****/
@media screen and (max-width: 779px) {
.sf-toolbar-block .sf-toolbar-icon > * > :first-child ~ * {
display: none;
}

.sf-toolbar-block .sf-toolbar-icon > * > .sf-toolbar-info-piece-additional,
.sf-toolbar-block .sf-toolbar-icon > * > .sf-toolbar-info-piece-additional-detail {
display: none !important;
}
}

@media screen and (max-width: 1179px) {
.sf-toolbar-block .sf-toolbar-icon > * > .sf-toolbar-info-piece-additional {
display: none;
}
}

@media screen and (max-width: 1439px) {
.sf-toolbar-block .sf-toolbar-icon > * > .sf-toolbar-info-piece-additional-detail {
display: none;
}
}

/***** Media query print: Do not print the Toolbar. *****/
@media print {
.sf-toolbar {
display: none;
visibility: hidden;
}
}
1 theme call to webprofiler_toolbar.css.twig
ToolbarController::toolbarAction in webprofiler/src/Controller/ToolbarController.php
Generates the toolbar.

File

webprofiler/templates/Profiler/webprofiler_toolbar.css.twig
View source 
  1. .sf-minitoolbar {

  2. display: none;

  3. 

  4. position: fixed;

  5. bottom: 0;

  6. right: 0;

  7. 

  8. padding: 5px 5px 0;

  9. 

  10. background-color: #f7f7f7;

  11. background-image: -moz-linear-gradient(top, #e4e4e4, #ffffff);

  12. background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e4e4e4), to(#ffffff));

  13. background-image: -o-linear-gradient(top, #e4e4e4, #ffffff);

  14. background: linear-gradient(top, #e4e4e4, #ffffff);

  15. 

  16. border-radius: 16px 0 0 0;

  17. 

  18. z-index: 6000000;

  19. }

  20. 

  21. .sf-toolbarreset {

  22. position: fixed;

  23. background-color: #f7f7f7;

  24. left: 0;

  25. right: 0;

  26. height: 38px;

  27. margin: 0;

  28. padding: 0 40px 0 0;

  29. z-index: 6000000;

  30. font: 11px Verdana, Arial, sans-serif;

  31. text-align: left;

  32. color: #2f2f2f;

  33. 

  34. background-image: -moz-linear-gradient(top, #e4e4e4, #ffffff);

  35. background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e4e4e4), to(#ffffff));

  36. background-image: -o-linear-gradient(top, #e4e4e4, #ffffff);

  37. background: linear-gradient(top, #e4e4e4, #ffffff);

  38. 

  39. bottom: 0;

  40. border-top: 1px solid #bbb;

  41. }

  42. .sf-toolbarreset abbr {

  43. border-bottom: 1px dotted #000000;

  44. }

  45. .sf-toolbarreset span,

  46. .sf-toolbarreset div {

  47. font-size: 11px;

  48. }

  49. .sf-toolbarreset img {

  50. width: auto;

  51. display: inline;

  52. }

  53. 

  54. .sf-toolbarreset .hide-button {

  55. display: block;

  56. position: absolute;

  57. top: 0;

  58. right: 0;

  59. width: 40px;

  60. height: 40px;

  61. cursor: pointer;

  62. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAMAAAAMCGV4AAAAllBMVEXDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PExMTPz8/Q0NDR0dHT09Pb29vc3Nzf39/h4eHi4uLj4+P6+vr7+/v8/Pz9/f3///+Nh2QuAAAAIXRSTlMABgwPGBswMzk8QktRV4SKjZOWmaKlq7TAxszb3urt+fy1vNEpAAAAiklEQVQIHUXBBxKCQBREwRFzDqjoGh+C2YV//8u5Sll2S0E/dof1tKdKM6GyqCto7PjZRJIS/mbSELgXOSd/BzpKIH1ZefVWpDDTHsi8mZVnwImPi5ndCLbaAZk3M58Bay0h9VbeSvMpjDUAHj4jL55AW1rxN5fU2PLjIgVRzNdxVFOlGzvnJi0Fb1XNGBHA9uQOAAAAAElFTkSuQmCC');

  63. background-repeat: no-repeat;

  64. background-position: 13px 11px;

  65. }

  66. .sf-toolbarreset a {

  67. color: #000 !important;

  68. border: none;

  69. }

  70. 

  71. .sf-toolbar-block {

  72. white-space: nowrap;

  73. color: #2f2f2f;

  74. display: block;

  75. min-height: 28px;

  76. border-right: 1px solid #e4e4e4;

  77. padding: 0;

  78. float: left;

  79. cursor: default;

  80. }

  81. 

  82. .sf-toolbar-block span {

  83. display: inline-block;

  84. }

  85. 

  86. .sf-toolbar-block .sf-toolbar-info-piece {

  87. line-height: 19px;

  88. margin-bottom: 5px;

  89. }

  90. 

  91. .sf-toolbar-block .sf-toolbar-info-piece .sf-toolbar-status {

  92. padding: 0px 5px;

  93. border-radius: 5px;

  94. margin-bottom: 0px;

  95. vertical-align: top;

  96. }

  97. 

  98. .sf-toolbar-block .sf-toolbar-info-piece:last-child {

  99. margin-bottom: 0;

  100. }

  101. 

  102. .sf-toolbar-block .sf-toolbar-info-piece a,

  103. .sf-toolbar-block .sf-toolbar-info-piece abbr {

  104. color: #2f2f2f;

  105. }

  106. 

  107. .sf-toolbar-block .sf-toolbar-info-piece b {

  108. display: inline-block;

  109. width: 150px;

  110. vertical-align: top;

  111. }

  112. 

  113. .sf-toolbar-block .sf-toolbar-info-with-next-pointer:after {

  114. content: ' :: ';

  115. color: #999;

  116. }

  117. 

  118. .sf-toolbar-block .sf-toolbar-info-with-delimiter {

  119. border-right: 1px solid #999;

  120. padding-right: 5px;

  121. margin-right: 5px;

  122. }

  123. 

  124. .sf-toolbar-block .sf-toolbar-info {

  125. display: none;

  126. position: absolute;

  127. background-color: #fff;

  128. border: 1px solid #bbb;

  129. padding: 9px 0;

  130. margin-left: -1px;

  131. 

  132. bottom: 38px;

  133. border-bottom-width: 0;

  134. border-bottom: 1px solid #bbb;

  135. border-radius: 4px 4px 0 0;

  136. }

  137. 

  138. .sf-toolbarreset > div:last-of-type .sf-toolbar-info {

  139. right: -1px;

  140. }

  141. 

  142. .sf-toolbar-block .sf-toolbar-info:empty {

  143. visibility: hidden;

  144. }

  145. 

  146. .sf-toolbar-block .sf-toolbar-status {

  147. display: inline-block;

  148. color: #fff;

  149. background-color: #666;

  150. padding: 3px 6px;

  151. border-radius: 3px;

  152. margin-bottom: 2px;

  153. vertical-align: middle;

  154. min-width: 6px;

  155. min-height: 13px;

  156. }

  157. 

  158. .sf-toolbar-block .sf-toolbar-status abbr {

  159. color: #fff;

  160. border-bottom: 1px dotted black;

  161. }

  162. 

  163. .sf-toolbar-block .sf-toolbar-status-green {

  164. background-color: #759e1a;

  165. }

  166. 

  167. .sf-toolbar-block .sf-toolbar-status-red {

  168. background-color: #a33;

  169. }

  170. 

  171. .sf-toolbar-block .sf-toolbar-status-yellow {

  172. background-color: #ffcc00;

  173. color: #000;

  174. }

  175. 

  176. .sf-toolbar-block .sf-toolbar-status-black {

  177. background-color: #000;

  178. }

  179. 

  180. .sf-toolbar-block .sf-toolbar-icon {

  181. display: block;

  182. }

  183. 

  184. .sf-toolbar-block .sf-toolbar-icon > a,

  185. .sf-toolbar-block .sf-toolbar-icon > span {

  186. display: block;

  187. font-weight: normal;

  188. text-decoration: none;

  189. margin: 0;

  190. padding: 5px 6px;

  191. min-width: 20px;

  192. text-align: center;

  193. vertical-align: middle;

  194. }

  195. 

  196. .sf-toolbar-block .sf-toolbar-icon > a,

  197. .sf-toolbar-block .sf-toolbar-icon > a:link

  198. .sf-toolbar-block .sf-toolbar-icon > a:hover {

  199. color: black !important;

  200. }

  201. 

  202. .sf-toolbar-block .sf-toolbar-icon > a[href]:after {

  203. content: "";

  204. }

  205. 

  206. .sf-toolbar-block .sf-toolbar-icon img {

  207. border-width: 0;

  208. vertical-align: middle;

  209. }

  210. 

  211. .sf-toolbar-block .sf-toolbar-icon img + span {

  212. margin-left: 0;

  213. margin-top: 2px;

  214. }

  215. 

  216. .sf-toolbar-block .sf-toolbar-icon .sf-toolbar-status {

  217. border-radius: 12px;

  218. border-bottom-left-radius: 0;

  219. margin-top: 0;

  220. }

  221. 

  222. .sf-toolbar-block .sf-toolbar-info-method {

  223. cursor: hand;

  224. }

  225. 

  226. .sf-toolbar-block .sf-toolbar-info-method[onclick=""] {

  227. border-bottom: none;

  228. cursor: inherit;

  229. }

  230. 

  231. .sf-toolbar-info-php {}

  232. .sf-toolbar-info-php-ext {}

  233. 

  234. .sf-toolbar-info-php-ext .sf-toolbar-status {

  235. margin-left: 2px;

  236. }

  237. 

  238. .sf-toolbar-info-php-ext .sf-toolbar-status:first-child {

  239. margin-left: 0;

  240. }

  241. 

  242. .sf-toolbar-block a .sf-toolbar-info-piece-additional,

  243. .sf-toolbar-block a .sf-toolbar-info-piece-additional-detail {

  244. display: inline-block;

  245. }

  246. 

  247. .sf-toolbar-block a .sf-toolbar-info-piece-additional:empty,

  248. .sf-toolbar-block a .sf-toolbar-info-piece-additional-detail:empty {

  249. display: none;

  250. }

  251. 

  252. .sf-toolbarreset:hover {

  253. box-shadow: rgba(0, 0, 0, 0.3) 0 0 50px;

  254. }

  255. 

  256. .sf-toolbar-block:hover {

  257. box-shadow: rgba(0, 0, 0, 0.35) 0 0 5px;

  258. border-right: none;

  259. margin-right: 1px;

  260. position: relative;

  261. }

  262. 

  263. .sf-toolbar-block:hover .sf-toolbar-icon {

  264. background-color: #fff;

  265. border-top: 1px dotted #DDD;

  266. position: relative;

  267. margin-top: -1px;

  268. z-index: 10002;

  269. }

  270. 

  271. .sf-toolbar-block:hover .sf-toolbar-info {

  272. display: block;

  273. min-width: -webkit-calc(100% + 2px);

  274. min-width: calc(100% + 2px);

  275. z-index: 10001;

  276. box-sizing: border-box;

  277. padding: 9px;

  278. line-height: 19px;

  279. }

  280. 

  281. /***** Media query *****/

  282. @media screen and (max-width: 779px) {

  283. .sf-toolbar-block .sf-toolbar-icon > * > :first-child ~ * {

  284. display: none;

  285. }

  286. 

  287. .sf-toolbar-block .sf-toolbar-icon > * > .sf-toolbar-info-piece-additional,

  288. .sf-toolbar-block .sf-toolbar-icon > * > .sf-toolbar-info-piece-additional-detail {

  289. display: none !important;

  290. }

  291. }

  292. 

  293. @media screen and (max-width: 1179px) {

  294. .sf-toolbar-block .sf-toolbar-icon > * > .sf-toolbar-info-piece-additional {

  295. display: none;

  296. }

  297. }

  298. 

  299. @media screen and (max-width: 1439px) {

  300. .sf-toolbar-block .sf-toolbar-icon > * > .sf-toolbar-info-piece-additional-detail {

  301. display: none;

  302. }

  303. }

  304. 

  305. /***** Media query print: Do not print the Toolbar. *****/

  306. @media print {

  307. .sf-toolbar {

  308. display: none;

  309. visibility: hidden;

  310. }

  311. }