+
+ul.messages {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ padding: 10px;
+ list-style: none;
+}
+
+/*
+DEBUG = 10
+INFO = 20
+SUCCESS = 25
+WARNING = 30
+ERROR = 40
+*/
+
+ul.messages li {
+ color: midnightblue;
+ padding: 12px 20px;
+ margin-bottom: 10px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ transition: opacity 0.5s ease;
+ opacity: 1;
+ cursor: pointer;
+ user-select: none; /* Prevents text highlighting on quick clicks */
+}
+
+ul.messages li.debug {
+ background-color: lightcyan;
+}
+
+ul.messages li.info {
+ background-color: lightblue;
+}
+
+ul.messages li.success {
+ background-color: lightgreen;
+}
+
+ul.messages li.warning {
+ background-color: orange;
+}
+
+ul.messages li.error {
+ background-color: lightcoral;
+}
+
+ul.messages li.fade-out {
+ transition-delay: 0.5s;
+ opacity: 0;
+ pointer-events: none; /* Prevents double-clicks during the fade */
+}