style(next): restyle menu item group headings

Author: adoriandoran

src/public/stylesheets/theme-next-dark.css

@@ -88,6 +88,7 @@
     --menu-item-keyboard-shortcut-color: #ffffff8f;
     --menu-item-arrow-color: #ffffffa3;
     --menu-item-delimiter-color: #ffffff1c;
+    --menu-item-group-header-color: #ffffff91;
 
     --modal-background-color: #333;
     --modal-backdrop-color: #444;

src/public/stylesheets/theme-next-light.css

@@ -82,6 +82,7 @@
     --menu-item-keyboard-shortcut-color: #666666a8;
     --menu-item-arrow-color: #00000080;
     --menu-item-delimiter-color: #00000030;
+    --menu-item-group-header-color: #00000061;
 
     --modal-background-color: white;
     --modal-backdrop-color: black;

src/public/stylesheets/theme-next/shell.css

@@ -1082,6 +1082,29 @@ html body .dropdown-item[disabled] {
     color: var(--menu-item-arrow-color) !important;
 }
 
+/* Menu item group heading */
+
+/* The heading body */
+.dropdown-menu h6 {
+    position: relative;
+    background: transparent;
+    padding: 1em 8px 14px 8px;
+    text-transform: uppercase;
+    font-size: .8em;
+    letter-spacing: 1pt;
+    color: var(--menu-item-group-header-color) !important;
+}
+
+/* The delimiter line */
+.dropdown-menu h6::before {
+    content: "";
+    position: absolute;
+    bottom: 8px;
+    left: calc(0px - var(--menu-padding-size));
+    right: calc(0px - var(--menu-padding-size));
+    border-top: 1px solid var(--menu-item-delimiter-color);
+}
+
 /* Static menus (used as a list, such as on the note revisions dialog) */
 body.desktop .dropdown-menu.static {
     box-shadow: unset;