Thank you for your donation!


Cloudsmith graciously provides open-source package management and distribution for our project.


Don't show highlight rectangle on button press
#1
Not really a feature...
On mobile touch devices an ugly blue rectagle appears around every button you press.
Hiding it would make the web ui feel more like an app.


Attached Files Thumbnail(s)
   
Reply
#2
No issue on my end using IOS/Safari. Maybe it's the particular Browser that you are using.
Enjoy the Music!
moodeaudio.org | Mastodon Feed | GitHub
Reply
#3
Try adding the following CSS rules in moode.css immediately after the first body rule:

button, textarea, input, select, a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
:focus {
outline: none !important;
}

This stopped the blue rectangle appearing for me in Chrome for Android.
Pi-4B[1GB] with Allo DigiOne SPDIF

'This is the time. And this is the record of the time.'
Reply
#4
(01-18-2020, 04:59 PM)gbh_uk Wrote: Try adding the following CSS rules in moode.css immediately after the first body rule:

button, textarea, input, select, a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
 user-select: none;
}
:focus {
   outline: none !important;
}

This stopped the blue rectangle appearing for me in Chrome for Android.

Since nearly everything is either WebKit or Blink now you really only need:

.btn {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-webkit-touch-callout: none;
}

.btn:active {color:var(--textvariant);} /* this needs to be a separate rule */

You probably don’t need to worry about anything but buttons but either way use .btn because sometimes people used that class on non-button tags. The :focus was already handled in primordial bootstrap css, the :active shows the press as doing something but at least on iOS you need to do a bit more work to get that to work.
Reply
#5
I'll add to panels :-)

Code:
.btn {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-webkit-touch-callout: none;
}

.btn:active {color:var(--textvariant);} /* this needs to be a separate rule */
Enjoy the Music!
moodeaudio.org | Mastodon Feed | GitHub
Reply


Forum Jump: