TopBar transitions

webroot/style.css

@@ -87,9 +87,13 @@ button, input {
     transform: translateZ(0);
     will-change: transform;
     transform-origin: center center;
+
+    touch-action: manipulation;
+    -webkit-touch-callout: none;
 }
 input {
     padding-left: calc(var(--button-margin) * 2);
+    -webkit-touch-callout: default;
 }
 
 
@@ -143,9 +147,6 @@ indicator.active {
     pointer-events: none !important;
 }
 
-button:active, input:active {
-    transform: var(--press-scale);
-}
 roomcontent {
     display: flex;
     flex-direction: column;
@@ -348,13 +349,14 @@ herotitle {
         color: var(--text-color);
     }
 }
-button:active, input:active {
+button:active, button.is-pressed, input:active, input.is-pressed {
     background-color: rgba(255, 255, 255, 0.1);
+    transform: var(--press-scale); 
 }
-.submit-button:active {
+.submit-button:active, .submit-button.is-pressed {
     background-color: rgba(255, 255, 255, 0.5);
 }
-.add-action-button:active {
+.add-action-button:active, .add-action-button.is-pressed {
     background-color: rgba(255, 255, 255, 0.1);
     color: var(--text-color);
 }
@@ -372,8 +374,9 @@ blah, inherit, .inherit {
     all: inherit;
     padding: 0;
     margin: 0;
-    display: inline;
+    display: flex;
     opacity: 1;
+    border: none;
 }
 space{
     margin-left: 0.4rem;
@@ -428,9 +431,9 @@ space{
     color: var(--text-color);
     cursor: pointer;
 }
-.mobile-nav-btn:active {
+.mobile-nav-btn:active, .mobile-nav-btn.is-pressed {
     background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 0.8rem;
+    transform: var(--press-scale);
 }
 .mobile-nav-btn.right {
     margin-right: 0;