diff --git a/website/web/static/tree.css b/website/web/static/tree.css
index feea8382..be899341 100644
--- a/website/web/static/tree.css
+++ b/website/web/static/tree.css
@@ -28,6 +28,23 @@
scroll-margin: 50px;
}
+#help {
+ text-align: center;
+ border-style: solid;
+ border-color: blue;
+ border-radius: 25px;
+ text-decoration: none;
+ height: 50px;
+ width: 50px;
+ background-color: blue;
+ color: white;
+}
+
+#help:hover {
+ background-color: white;
+ color: blue;
+}
+
/* Generic parts of menus */
hr {
display: block;
@@ -88,9 +105,7 @@ hr {
top: 5px;
background: white;
border: 2px solid;
- padding-top: 5px;
- padding-right: 5px;
- padding-left: 5px;
+ padding: 5px;
}
#menu_container_horizontal {
@@ -98,9 +113,7 @@ hr {
top: 5px;
left: 5px;
left: 217px;
- padding-top: 5px;
- padding-right: 5px;
- padding-left: 5px;
+ padding: 5px;
}
#menu_container_horizontal .container {
@@ -121,6 +134,75 @@ hr {
background: #fff;
}
+
+/* NEW: Dropdown Menu */
+/* Dropdown Button */
+.dropbtn {
+ background-color: #3498db;
+ color: white;
+ font-size: 16px;
+ border: none;
+ cursor: pointer;
+ width: 180px;
+ text-align: center;
+}
+
+/* Dropdown button on hover & focus */
+.dropbtn:hover, .dropbtn:focus {
+ background-color: #2980b9;
+}
+
+/* The container
- needed to position the dropdown content */
+.dropdown {
+ position: relative;
+ display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: #f9f9f9;
+ width: 180px;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+}
+
+.dropdown-content.show {
+ display: block;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {background-color: #f1f1f1;}
+
+/* Show the dropdown menu on hover */
+#capture-menu:hover #capture-menu-content {
+ display: block;
+}
+#actions-menu:hover #actions-menu-content {
+ display: block;
+}
+#tools-menu:hover #tools-menu-content {
+ display: block;
+}
+#admin-menu:hover #admin-menu-content {
+ display: block;
+}
+
+/* Change the background color of the dropdown button when the dropdown content is shown */
+.dropdown:hover .dropbtn {
+ background-color: #2980b9;
+}
+
+
/* legend */
#legend_container {
position: fixed;
diff --git a/website/web/templates/tree.html b/website/web/templates/tree.html
index 52e49198..d66323ed 100644
--- a/website/web/templates/tree.html
+++ b/website/web/templates/tree.html
@@ -258,35 +258,99 @@
-
-
@@ -306,212 +370,108 @@
-
-
-
-
- Legend
-
-
-
-
-
-
-
-
 }})
Unencrypted requests
-
-
-
 }})
Empty responses
-
-
-
-
 }})
Cookie received
-
-
-
-
 }})
Cookie read
-
-
-
-
 }})
Redirect
-
-
-
-
 }})
iFrame
-
-
-
-
 }})
Javascript
-
-
-
-
 }})
Font
-
-
-
-
 }})
HTML
-
-
-
-
 }})
JSON
-
-
-
-
 }})
CSS
-
-
-
-
 }})
EXE
-
-
-
-
 }})
Image
-
-
-
-
 }})
Video
-
-
-
-
 }})
Unknown content
-
-
-
-
 }})
Downloaded file
-
-
-
-
-
-
-
-
-