Add border at the bottom of view-changing buttons

to make those distinguishable from other highlighted buttons.

The border at the bottom makes it look like a stack of buttons
that will be put into position when tapping the view-changing buttons.

Part-of: <https://gitlab.gnome.org/World/Phosh/squeekboard/-/merge_requests/635>

data/keyboards/de.yaml

@@ -2,6 +2,7 @@
 outlines:
     default:     { width: 35.33, height: 52 }
     altline:     { width: 52.67, height: 52 }
+    change-view: { width: 52.67, height: 52 }
     wide:        { width: 62,    height: 52 }
     spaceline:   { width: 89.3,  height: 52 }
     special:     { width: 35.33, height: 52 }
@@ -39,7 +40,7 @@ buttons:
             locking:
                 lock_view: "upper"
                 unlock_view: "base"
-        outline: "altline"
+        outline: "change-view"
         icon: "key-shift"
     BackSpace:
         outline: "altline"
@@ -52,24 +53,24 @@ buttons:
     show_numbers:
         action:
             set_view: "numbers"
-        outline: "altline"
+        outline: "change-view"
         label: "123"
     show_letters:
         action:
             set_view: "base"
-        outline: "altline"
+        outline: "change-view"
         label: "ABC"
     show_symbols:
         action:
             set_view: "symbols"
-        outline: "altline"
+        outline: "change-view"
         label: "*/="
     show_eschars:
         action:
             locking:
                 lock_view: "eschars"
                 unlock_view: "base"
-        outline: "altline"
+        outline: "change-view"
         label: "Ää"
     space:
         outline: "spaceline"

data/keyboards/de_wide.yaml

@@ -5,6 +5,7 @@ outlines:
     thin:        { width: 30,   height: 42 }
     narrow:      { width: 40.5, height: 42 }
     altline:     { width: 81,   height: 42 }
+    change-view: { width: 81,   height: 42 }
     wide:        { width: 108,  height: 42 }
     spaceline:   { width: 156,  height: 42 }
     special:     { width: 48,   height: 42 }
@@ -42,7 +43,7 @@ buttons:
             locking:
                 lock_view: "upper"
                 unlock_view: "base"
-        outline: "altline"
+        outline: "change-view"
         icon: "key-shift"
     BackSpace:
         outline: "altline"
@@ -55,24 +56,24 @@ buttons:
     show_numbers:
         action:
             set_view: "numbers"
-        outline: "altline"
+        outline: "change-view"
         label: "123"
     show_letters:
         action:
             set_view: "base"
-        outline: "altline"
+        outline: "change-view"
         label: "ABC"
     show_symbols:
         action:
             set_view: "symbols"
-        outline: "altline"
+        outline: "change-view"
         label: "*/="
     show_eschars:
         action:
             locking:
                 lock_view: "eschars"
                 unlock_view: "base"
-        outline: "altline"
+        outline: "change-view"
         label: "Ää"
     space:
         outline: "spaceline"

data/keyboards/us.yaml

@@ -2,6 +2,8 @@
 outlines:
     default:       { width: 35.33, height: 52 }
     altline:       { width: 52.67, height: 52 }
+    change-view:   { width: 52.67, height: 52 }
+    change-view-2: { width: 62,    height: 52 }
     wide:          { width: 62,    height: 52 }
     spaceline:     { width: 141.3, height: 52 }
     special:       { width: 44,    height: 52 }
@@ -34,12 +36,12 @@ buttons:
             locking:
                 lock_view: "upper"
                 unlock_view: "base"
-        outline: "altline"
+        outline: "change-view"
         icon: "key-shift"
     BackSpace:
         outline: "altline"
         icon: "edit-clear-symbolic"
-        action: erase
+        action: "erase"
     preferences:
         action: "show_prefs"
         outline: "special"
@@ -47,22 +49,22 @@ buttons:
     show_numbers:
         action:
             set_view: "numbers"
-        outline: "wide"
+        outline: "change-view-2"
         label: "123"
     show_numbers_from_symbols:
         action:
             set_view: "numbers"
-        outline: "altline"
+        outline: "change-view"
         label: "123"
     show_letters:
         action:
             set_view: "base"
-        outline: "wide"
+        outline: "change-view-2"
         label: "ABC"
     show_symbols:
         action:
             set_view: "symbols"
-        outline: "altline"
+        outline: "change-view"
         label: "*/="
     .:
         outline: "special"

data/keyboards/us_wide.yaml

@@ -2,6 +2,8 @@
 outlines:
     default:       { width: 54,  height: 42 }
     altline:       { width: 81,  height: 42 }
+    change-view:   { width: 81,  height: 42 }
+    change-view-2: { width: 108, height: 42 }
     wide:          { width: 108, height: 42 }
     spaceline:     { width: 216, height: 42 }
     special:       { width: 54,  height: 42 }
@@ -34,7 +36,7 @@ buttons:
             locking:
                 lock_view: "upper"
                 unlock_view: "base"
-        outline: "altline"
+        outline: "change-view"
         icon: "key-shift"
     BackSpace:
         outline: "altline"
@@ -47,22 +49,22 @@ buttons:
     show_numbers:
         action:
             set_view: "numbers"
-        outline: "wide"
+        outline: "change-view-2"
         label: "123"
     show_numbers_from_symbols:
         action:
             set_view: "numbers"
-        outline: "altline"
+        outline: "change-view"
         label: "123"
     show_letters:
         action:
             set_view: "base"
-        outline: "wide"
+        outline: "change-view-2"
         label: "ABC"
     show_symbols:
         action:
             set_view: "symbols"
-        outline: "altline"
+        outline: "change-view"
         label: "*/="
     .:
         outline: "special"

data/style-Adwaita:dark.css

@@ -13,6 +13,36 @@ sq_button:active {
     background: #747077;
 }
 
+sq_button.emoji-group {
+    background: #3f3e41;
+    border-bottom: 0.4999px;
+    border-style: solid;
+    border-color: alpha(white, 0.25);
+}
+
+sq_button.emoji-group:active {
+    background: #747077;
+    border-bottom: 0.4999px;
+    border-style: solid;
+    border-color: alpha(white, 0.5);
+}
+
+sq_button.change-view,
+sq_button.change-view-2 {
+    background: #2b292f;
+    border-bottom: 0.4999px;
+    border-style: solid;
+    border-color: alpha(white, 0.25);
+}
+
+sq_button.change-view:active,
+sq_button.change-view-2:active {
+    background: #747077;
+    border-bottom: 0.4999px;
+    border-style: solid;
+    border-color: alpha(white, 0.5);
+}
+
 sq_button.altline,
 sq_button.special,
 sq_button.wide {

data/style.css

@@ -14,6 +14,36 @@ sq_button:active {
     background: alpha(@theme_fg_color, 0.11);
 }
 
+sq_button.emoji-group {
+    background: alpha(@theme_fg_color, 0.105);
+    border-bottom: 0.4999px;
+    border-style: solid;
+    border-color: alpha(@theme_fg_color, 0.25);
+}
+
+sq_button.emoji-group:active {
+    background: alpha(@theme_fg_color, 0.16);
+    border-bottom: 0.4999px;
+    border-style: solid;
+    border-color: alpha(@theme_fg_color, 0.275);
+}
+
+sq_button.change-view,
+sq_button.change-view-2 {
+    background: alpha(@theme_fg_color, 0.15);
+    border-bottom: 0.4999px;
+    border-style: solid;
+    border-color: alpha(@theme_fg_color, 0.25);
+}
+
+sq_button.change-view:active,
+sq_button.change-view-2:active {
+    background: alpha(@theme_fg_color, 0.2);
+    border-bottom: 0.4999px;
+    border-style: solid;
+    border-color: alpha(@theme_fg_color, 0.275);
+}
+
 sq_button.altline,
 sq_button.special,
 sq_button.wide {