html {
/*This would set the background of the html page to black.
This affects anything below and above the body content.
BUT - as our round corners are pre-rendered with a white background,
it does NOT even help to give the html element a black background -
this will appear below the net page content, but not be visible
around the rounded corners.
So we WON'T simply get "round corners" (with black outside)
that would let our page match seamlessly with the black border
of the iPad screen. So I won't use this at all. */
/* background-color: black; */
/*Das an dieser Stelle verhindert schon mal die Selektion von Teilen der HTML-Seite
z.B. des Konfigurations-Auswahlmenüs durch einen langen Touch auf dem iPad.
Das wirkt sich also auch auf body aus.
Es verhindert auch das Markieren im normalen Webbrowser mittels Maus oder Ctrl-A.
ABER es reicht am iPad NICHT bis in den canvas der anyqujs-app.js hinein;
den kann man nach Start des Programms immer noch selektieren.
DAS ist ein Fehler im iOS 15 Safari / WebKit Browser. Eigentlich sollte es reichen.
Nun habe ich einen Workaround programmiert, indem ich die TouchStart, TouchMove, TouchEnd, TouchCancel
selbst fast komplett wie in imgview-app.js auswerte und selbst für TouchStart bzw. TouchEnd
bei passenden Bedingungen identische Handler wie für MouseDown und MouseUp eingebaut habe.
Damit braucht es diese styles hier NICHT mehr, um eine Selektion des Canvas zu verhindern.
Man KANN es aber beim html belassen, um (vor allem versehentliche, durch die Benutzer)
Selektionen der Text-Elemente der umgebenden Website für das Konfigurations-Menü zu verhindern.
*/
/*Now, we disable the unwanted selection of the canvas by touching onto it and holding down a finger on the iPad.*/
/*
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
touch-action: none;
user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
outline: none;
*/
/* This is for the mobile webkit
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
*/
}
body {
/* padding: 0px; */
/* border: 0px; */
/*This makes the page content appear with 0 distance to the limits
of the browser viewport on waterfox - which looks somewhat pathetic
when using round corners and a white background...
On the iPad, the Safari browser heeds this, but the Web-Application
environment doesn't (even after clearing website data = the cache).
So I really won't use it. */
/* margin: 0px; */
/*The followign statements would suggest some page widths and heights.
They don't really work much better than or different from the default values.
So I won't use them. */
/* min-width: 99%; */
/* max-width: 100%; */
/* min-height: 100%; */
/*The default setting (yes) displays (and allows) scrollbars when they are needed.
Alternatives are: yes, no, hidden, auto */
/* overflow-x: yes;
overflow-y: yes; */
/*Now, we disable the unwanted selection of the canvas by touching onto it and holding down a finger on the iPad.*/
/*
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
touch-action: none;
user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
*/
}
/*This ensures that when we create multiple canvases from the imgv-app.js
then they will be all at the same position, i.e. overlay each other,
which is useful for blending an image drawn onto one canvas
into an image drawn onto another canvas using the canvas opacity / transparency */
canvas {
position: absolute;
/*border: 1px solid black;*/
/*
https://developer.apple.com/forums/thread/691021
After several hours, we find there is a (new) bug in iOS 15 that prevents css -webkit-touch-callout: none from working.
And the only workaround should be to use event.preventDefault() for the touchstart event.
If we do THIS, the normal clicking at answer fields can not be triggered by touch events any more.
Which confirms the judgement on iOS / Safari / WebKit once more.
*/
/*Now, we disable the unwanted selection of the canvas by touching onto it and holding down a finger on the iPad.*/
/*
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
touch-action: none;
user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
*/
}
table {
border-collapse: separate;
border-spacing: 0px;
/*height and width specs MUST be defined at the table level
for the page layout of www.ql-recorder.com which puts everything
into one large table.
If you put it into the body portion, that will make everything too big,
so scrollbars will definitely appear and the content will definitely
exceed the available viewport.*/
/*This is needed to keep the logo positioned in the top right separate
from the headline of the AnyQuest for Javascript configuration menu */
width: 100%;
/*This ensures that the frame around the page is always at least as high as the
available viewport. Please note: min-height does NOT work. */
/*However - this may y-strech table rows. And THAT will make the top and
bottom rows with the round corners grow ugly violet handles as soon as
the bitmaps for the corners are not sufficiently high any more to cover
the total height of the row :-( - which happens to be the exact moment
when the effect of this statement would kick in.
SO we can only use this when we also use (different) valign statements
in the definition of the first and last table rows making up our frame.
And even after doing so - the y-enlarging of the rows would also rip
apart the QL-Recorder logo made from 3 slices put into 3 lines in the
top left corner of the layout. So I would have to combine table fields
to keep the logo in one piece, and STILL the page geometry would change,
as the headline and footer line would become higher in comparison to
the other elements and anything written in them. :-(
So I won't use this option either.*/
/* height: 100%;*/
/* max-width: 100%; */
/* border-top: 0px; */
/* margin-bottom: 0px; */
/* border: 0px; */
/* margin: 0px; */
/* padding: 0px; */
}
a:link {
text-decoration: none;
color: #380078;
}
a:visited {
text-decoration: none;
color: #380078;
}
a:hover {
text-decoration: underline;
color: #380078;
}
a:active {
text-decoration: underline;
color: #380078;
}
/*Necessary (!) select style options can either be set here or in the *.html file via