style emoji chooser

.config/ags/config.js

@@ -64,7 +64,7 @@ export default {
 };
 
 // Stuff that don't need to be toggled. And they're async so ugh...
-// Bar().catch(print); // Use this to debug the bar
+// Bar().catch(print); // Use this to debug the bar. Single monitor only.
 forMonitors(Bar);
 forMonitors(BarCornerTopleft);
-forMonitors(BarCornerTopright);
+forMonitors(BarCornerTopright);

.config/ags/scss/_common.scss

@@ -40,14 +40,14 @@ menu {
     animation-iteration-count: 1;
 }
 
-menubar > menuitem {
+menubar>menuitem {
     border-radius: 0.545rem;
     -gtk-outline-radius: 0.545rem;
     min-width: 13.636rem;
     min-height: 2.727rem;
 }
 
-menu > menuitem {
+menu>menuitem {
     padding: 0.4em 1.5rem;
     background: transparent;
     transition: 0.2s ease background;
@@ -55,11 +55,12 @@ menu > menuitem {
     -gtk-outline-radius: 0.545rem;
 }
 
-menu > menuitem:hover,
-menu > menuitem:focus {
+menu>menuitem:hover,
+menu>menuitem:focus {
     background-color: mix($surfaceVariant, $onSurfaceVariant, 90%);
 }
-menu > menuitem:active {
+
+menu>menuitem:active {
     background-color: mix($surfaceVariant, $onSurfaceVariant, 80%);
 }
 
@@ -93,6 +94,33 @@ tooltip {
     border: 1px solid $onSurfaceVariant;
 }
 
+/////////////////////////////////////////
+// Emoji Chooser structure
+// popover
+// ├── box.emoji-searchbar
+// │   ╰── entry.search
+// ╰── box.emoji-toolbar
+//     ├── button.image-button.emoji-section
+//     ├── ...
+//     ╰── button.image-button.emoji-section
+
+popover {
+    @include elevation-border-softer;
+    padding: 0.681rem;
+    background: $surfaceVariant;
+    color: $onSurfaceVariant;
+    border-radius: 1.159rem;
+    -gtk-outline-radius: 1.159rem;
+
+    animation-name: appear;
+    animation-duration: 40ms;
+    animation-timing-function: ease-out;
+    animation-iteration-count: 1;
+}
+
+
+/////////////////////////////////////////
+
 .configtoggle-box {
     padding: 0.205rem 0.341rem;
     border: 0.136rem solid transparent;
@@ -145,17 +173,17 @@ tooltip {
     border: 0.068rem solid $outline;
 }
 
-.segment-container > *:first-child {
+.segment-container>*:first-child {
     border-top-left-radius: 9999px;
     border-bottom-left-radius: 9999px;
 }
 
-.segment-container > * {
+.segment-container>* {
     border-right: 0.068rem solid $outline;
     padding: 0.341rem 0.682rem;
 }
 
-.segment-container > *:last-child {
+.segment-container>*:last-child {
     border-right: 0rem solid transparent;
     border-top-right-radius: 9999px;
     border-bottom-right-radius: 9999px;
@@ -203,4 +231,4 @@ tooltip {
 
 .gap-h-15 {
     min-width: 1.023rem;
-}
+}

.config/ags/scss/main.scss

@@ -1,8 +1,8 @@
 // Reset
-* {
-    all: unset;
-}
-// *:not(tooltip) { all: unset; }
+// * {
+//     all: unset;
+// }
+*:not(popover) { all: unset; }
 
 // Colors
 @import './material'; // Material colors