doc(): improve documentation

README.md

@@ -78,6 +78,25 @@ The items have also specific options:
 
 In order to use `fontawesome_icon`, make sure you've installed [Fontawesome](https://cdnjs.com/libraries/font-awesome) in your project.
 
+## Customize the panel
+
+You can change the style of the panel by modifying the CSS file. There are the main variables defined at the beginning of the file:
+
+```css
+:root {
+    --panel-background-color: #fff;
+    --panel-box-shadow: 0 0 4px rgba(204, 204, 204, 0.75);
+    --panel-width: 160px;
+    --panel-text-color: #404040;
+    --panel-hover-item-background-color: #f4f6fa;
+    --panel-hover-item-color: #385074;
+    --panel-icon-width: 13px;
+    --panel-separator-color: #dfe3eb;
+}
+```
+
+For further modifications, you'll need to modify the CSS properties. Be careful not to modify the file too much at the risk of compromising the proper functioning of the panel.
+
 ## Digital Accessibility
 
 Following the digital accessibility recommendations for this kind of panels, it is necessary to open or close the panel by clicking either the Enter or Space key. See <https://www.accede-web.com/en/guidelines/rich-interface-components/show-hide-panels/> for more information.

src/panel-style.css

@@ -9,6 +9,7 @@
     --panel-separator-color: #dfe3eb;
 }
 
+/* the pannel */
 .jspanel {
     box-sizing: border-box;
     position: absolute;
@@ -19,13 +20,15 @@
     width: var(--panel-width, 160px);
     min-height: 50px;
     height: auto;
-    visibility: visible;
+    visibility: visible; /* important */
 }
 
+/* Never change the visibility of the sign by yourself. */
 .jspanel.panel-hidden {
     visibility: hidden;
 }
 
+/* the list of items */
 .jspanel ul {
     list-style-type: none;
     margin: 0;
@@ -36,6 +39,7 @@
     align-items: center;
 }
 
+/* for each item */
 .jspanel li {
     width: 100%;
     height: 30px;
@@ -52,6 +56,7 @@
     color: var(--panel-hover-item-color, #385074);
 }
 
+/* the title of the item */
 .jspanel li span {
     pointer-events: none;
     -webkit-user-select: none;
@@ -64,6 +69,7 @@
 	overflow: hidden;
 }
 
+/* img is an `icon`, i is a `fontawesome_icon` */
 .jspanel li img,
 .jspanel li i {
     pointer-events: none;
@@ -74,11 +80,13 @@
     margin-right: 10px;
 }
 
+/* the icon */
 .jspanel li img {
     width: var(--panel-icon-width, 13px);
     height: auto;
 }
 
+/* for each separator */
 .jspanel .jspanel-separator {
     height: 1px;
     width: 80%;