style(panel): update button styles and duration format

- Increased padding and adjusted background colors for buttons
- Added hover and active states for better user interaction
- Formatted query duration to display milliseconds

Author: Spamercz

src/Diagnostics/Panel/panel.phtml

@@ -10,16 +10,44 @@ namespace Spameri\Elastic\Diagnostics\Panel;
 
 	#nette-debug .elasticSearchPanel-copy {
 		cursor: pointer;
-		padding: 2px 6px;
+		padding: 4px 10px;
 		font-size: 11px;
-		background: #eee;
-		border: 1px solid #ccc;
-		border-radius: 3px;
+		background: #f5f5f5;
+		border: 1px solid #bbb;
+		border-radius: 4px;
 		margin-left: 4px;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 	}
 
 	#nette-debug .elasticSearchPanel-copy:hover {
+		background: #e8e8e8;
+		border-color: #aaa;
+	}
+
+	#nette-debug .elasticSearchPanel-copy:active {
+		background: #ddd;
+		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+	}
+
+	#nette-debug .elasticSearchPanel .tracy-toggle .tracy-dump-object {
+		cursor: pointer;
+		display: inline-block;
+		padding: 4px 10px;
+		font-size: 11px;
+		background: #f5f5f5;
+		border: 1px solid #bbb;
+		border-radius: 4px;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+	}
+
+	#nette-debug .elasticSearchPanel .tracy-toggle .tracy-dump-object:hover {
+		background: #e8e8e8;
+		border-color: #aaa;
+	}
+
+	#nette-debug .elasticSearchPanel .tracy-toggle .tracy-dump-object:active {
 		background: #ddd;
+		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 	}
 </style>
 <h1>
@@ -42,7 +70,7 @@ namespace Spameri\Elastic\Diagnostics\Panel;
             <tr>
                 <td><?= $query['uri'] ?></td>
 
-                <td><?= $query['duration'] ?></td>
+                <td><?= sprintf('%0.1f', $query['duration']) ?> ms</td>
 
                 <td>
                     <span class="tracy-toggle tracy-collapsed">