Some box-shadow improvements in cyberpunk theme

src/shared/styles/messages.scss

@@ -32,7 +32,7 @@
         &.date-separator,
         &.separator {
             height: 2em;
-            margin: 0;
+            margin: 0.5em 0 0 0;
             position: relative;
             text-align: center;
             z-index: 0;

src/shared/styles/themes/cyberpunk.scss

@@ -318,6 +318,15 @@
     --list-item-action-hover-color: var(--cyan);
     --list-group-item-bg-color: var(--comment);
 
+    #controlbox {
+        .flyout {
+            box-shadow:
+                0 0 1rem 0rem rgba(234, 57, 184, 0.5) inset,
+                0 0 2rem 0rem rgba(234, 57, 184, 0.2) inset,
+                0 0 4rem 2rem rgba(234, 57, 184, 0.1) inset !important;
+        }
+    }
+
     .modal-header {
         .btn-close {
             background-color: var(--header-color);
@@ -327,71 +336,64 @@
     .message .separator-text {
         border-radius: 50px;
         box-shadow:
-            0 0 1px rgba(255, 193, 7, 0.9),
-            0 0 1px rgba(255, 193, 7, 0.4),
-            0 0 1rem rgba(255, 193, 7, 0.3),
-            0 0 1rem rgba(255, 193, 7, 0.1) !important;
+            0 0 0.25rem rgba(60, 242, 129, 0.8),
+            0 0 1rem rgba(60, 242, 129, 0.2),
+            0 0 4rem rgba(60, 242, 129, 0.1) !important;
     }
 
     .card {
         box-shadow:
-            inset 0 0 1px rgba(234, 57, 184, 0.9),
-            inset 0 0 2px rgba(234, 57, 184, 0.4),
-            inset 0 0 1rem rgba(234, 57, 184, 0.3),
-            inset 0 0 2rem rgba(234, 57, 184, 0.1) !important;
+            inset 0 0 0.5rem rgba(234, 57, 184, 0.8),
+            inset 0 0 1rem rgba(234, 57, 184, 0.4),
+            inset 0 0 2rem rgba(234, 57, 184, 0.3),
+            inset 0 0 4rem rgba(234, 57, 184, 0.1) !important;
     }
 
     .chat-toolbar {
         box-shadow:
-            inset 0 0 1px rgba(60, 242, 129, 0.9),
-            inset 0 0 2px rgba(60, 242, 129, 0.4),
-            inset 0 0 1rem rgba(60, 242, 129, 0.3),
-            inset 0 0 2rem rgba(60, 242, 129, 0.1),
-            0 0 1px rgba(60, 242, 129, 0.9),
-            0 0 2px rgba(60, 242, 129, 0.4),
-            0 0 1rem rgba(60, 242, 129, 0.3),
-            0 0 2rem rgba(60, 242, 129, 0.1) !important;
+            0 0 0.5rem rgba(60, 242, 129, 0.4),
+            0 0 2rem rgba(60, 242, 129, 0.2),
+            0 0 4rem rgba(60, 242, 129, 0.1) !important;
     }
 
     .chat-head-chatbox {
         box-shadow:
-            inset 0 0 1px rgba(60, 242, 129, 0.9),
-            inset 0 0 2px rgba(60, 242, 129, 0.4),
-            inset 0 0 1rem rgba(60, 242, 129, 0.3),
-            inset 0 0 2rem rgba(60, 242, 129, 0.1),
-            0 0 1px rgba(60, 242, 129, 0.9),
-            0 0 2px rgba(60, 242, 129, 0.4),
-            0 0 1rem rgba(60, 242, 129, 0.3),
-            0 0 2rem rgba(60, 242, 129, 0.1) !important;
+            0 0 1rem 0rem rgba(60, 242, 129, 0.5) inset,
+            0 0 2rem 0rem rgba(60, 242, 129, 0.4) inset,
+            0 0 4rem 2rem rgba(60, 242, 129, 0.2) inset,
+            0 0 1rem 0rem rgba(60, 242, 129, 0.4),
+            0 0 2rem 0rem rgba(60, 242, 129, 0.2),
+            0 0 4rem 0rem rgba(60, 242, 129, 0.1) !important;
     }
 
     .chatroom {
+        .message .separator-text {
+            border-radius: 50px;
+            box-shadow:
+                0 0 0.25rem rgba(255, 193, 7, 0.8),
+                0 0 1rem rgba(255, 193, 7, 0.2),
+                0 0 4rem rgba(255, 193, 7, 0.1) !important;
+        }
+
         .chat-head-chatroom {
             box-shadow:
-                inset 0 0 1px rgba(255, 193, 7, 0.9),
-                inset 0 0 2px rgba(255, 193, 7, 0.4),
-                inset 0 0 1rem rgba(255, 193, 7, 0.3),
-                inset 0 0 2rem rgba(255, 193, 7, 0.1),
-                0 0 1px rgba(255, 193, 7, 0.9),
-                0 0 2px rgba(255, 193, 7, 0.4),
-                0 0 1rem rgba(255, 193, 7, 0.3),
-                0 0 2rem rgba(255, 193, 7, 0.1) !important;
+                0 0 1rem 0rem rgba(255, 193, 7, 0.5) inset,
+                0 0 2rem 0rem rgba(255, 193, 7, 0.4) inset,
+                0 0 4rem 2rem rgba(255, 193, 7, 0.2) inset,
+                0 0 1rem 0rem rgba(255, 193, 7, 0.4),
+                0 0 2rem 0rem rgba(255, 193, 7, 0.2),
+                0 0 4rem 0rem rgba(255, 193, 7, 0.1) !important;
         }
 
         converse-muc-sidebar {
-            box-shadow:
-                inset 0 0 1px rgba(255, 193, 7, 0.9),
-                inset 0 0 2px rgba(255, 193, 7, 0.4),
-                inset 0 0 1rem rgba(255, 193, 7, 0.3),
-                inset 0 0 2rem rgba(255, 193, 7, 0.1) !important;
+            box-shadow: 0 0 1rem 1rem rgba(255, 193, 7, 0.1) inset !important;
         }
 
         .chat-toolbar {
             box-shadow:
-                0 0 1px rgba(255, 193, 7, 0.9),
-                0 0 2px rgba(255, 193, 7, 0.4),
-                0 0 1rem rgba(255, 193, 7, 0.3),
-                0 0 2rem rgba(255, 193, 7, 0.1) !important;
+                0 0 0.5rem rgba(255, 193, 7, 0.4),
+                0 0 2rem rgba(255, 193, 7, 0.2),
+                0 0 4rem rgba(255, 193, 7, 0.1) !important;
         }
     }
 }