Fix stylization for firefox

This commit is contained in:
cnlohr
2024-10-28 20:08:03 -07:00
parent ac768babae
commit 710a07d913
3 changed files with 26 additions and 28 deletions
+5 -14
View File
@@ -26,22 +26,12 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
src: url('AudioLinkMono-Bold.ttf') format('truetype')
}
@property --dark {
syntax: "<color>";
inherits: true;
initial-value: #111;
}
@property --light {
syntax: "<color>";
inherits: true;
initial-value: white;
}
:root {
color-scheme: dark;
--gl: radial-gradient(circle 1px at 0px 0px, var(--light) 1px, transparent 0);
--gd: radial-gradient(circle 1px at 0px 0px, var(--dark) 1px, transparent 0);
--dark: #111;
--light: #eee;
--bg-0: var(--dark);
--bg-1: var(--gl) 0px 0px / 4px 4px, var(--dark);
--bg-2: var(--gl) 0px 0px / 4px 4px, var(--gl) 2px 2px / 4px 4px, var(--dark);
@@ -166,7 +156,7 @@ input::-webkit-inner-spin-button {
input[type=number] {
background: var(--bg-0);
outline: 0;
/*text-indent: 12px;*/
-moz-appearance:textfield; /* Firefox */
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 1.1rem;
@@ -191,6 +181,7 @@ textarea,input:not([type='number']) {
outline: 0;
border-radius: .8rem;
padding: .5rem;
padding-bottom:.3rem;
text-shadow: var(--l-shadow);
border: 1px var(--light) solid;
animation: dark-to-light 200ms ease-out forwards;
@@ -203,7 +194,7 @@ textarea,input:not([type='number']) {
}
}
button, input[type=submit] {
button,input[type=submit] {
background: var(--bg-0);
border: 0;
outline: 0;
+20 -13
View File
@@ -13,10 +13,20 @@ var darkmode = true;
function DrawSpan( rowspan, colspan, freq, target, docolor, extrastr = "" )
{
var fdist = Math.abs( freq - target );
fdist = Math.pow( fdist, 0.5 ) * 500;
// if( fdist > 255 ) fdist = 255;
fdist = Math.pow( fdist, 0.5 ) * 300;
if( fdist > 511 ) fdist = 511;
let ret = "<TD COLSPAN=" + colspan + ' ROWSPAN' + rowspan + ' ';
if( docolor ) ret += 'STYLE="color:black;background-color:rgba(' + fdist + ',' + (511-fdist) + ',0,0.2)";';
let bg = 8 - fdist / 60;
if( bg < 0) bg = 0; if( bg > 8 ) bg = 8;
if( docolor ) ret += 'STYLE="color:var(--' + ((bg >= 3 ) ? 'dark' : 'light' ) + ');' +
'text-shadow: 1px 1px 2px ' + ((bg < 3 ) ? '#000' : '#fff' ) + ',' +
'-1px 1px 2px ' + ((bg < 3 ) ? '#000' : '#fff' ) + ',' +
'1px -1px 2px ' + ((bg < 3 ) ? '#000' : '#fff' ) + ',' +
'-1px -1px 2px ' + ((bg < 3 ) ? '#000' : '#fff' ) + ';' +
'background:var(--bg-' + bg.toFixed(0) + ');"';
//background-color:rgba(' + fdist + ',' + (511-fdist) + ',0,0.2)";';
ret += '>' + extrastr + freq.toFixed(6) + "</TD>";
return ret;
}
@@ -222,7 +232,7 @@ function computeTable()
else if( goertzels )
{
contents +=
"<TABLE BORDER=1>" +
"<TABLE>" +
"<TR><TD>Goertzel</TD></TR>" +
"<TR><TD>Goertzel (Inverse)</TD></TR>" +
"</TABLE><TEXTAREA ROWS=8 COLS=80 ID=goertzeloutput></TEXTAREA>" +
@@ -410,7 +420,6 @@ function computeTable()
contents += "</TABLE>";
}
document.getElementById( "TABLE" ).innerHTML = contents;
}
@@ -457,10 +466,9 @@ function onLoad()
</SCRIPT>
</HEAD>
<BODY onLoad="onLoad()">
<TABLE WIDTH=100%>
<TR>
<TD COLSPAN=3>
<TD COLSPAN=2>
<p>Tool for computing tuning to specific frequencies by use of direct ADC reading at specific timer-controlled rate to "tune" to specific frequencies either by quadrature or differential.</p>
</TD>
<TD ROWSPAN=2 VALIGN=TOP HEIGHT=200 WIDTH=100% ID=LiveGraphContainer>
@@ -484,7 +492,6 @@ function onLoad()
</TABLE>
</TD>
<TD VALIGN=TOP ROWSPAN=2>
Live Control:<br>
<TABLE><TR>
<TD><INPUT TYPE=SUBMIT onClick="reqConnect()" VALUE="Open Device" ID=connectButton>
@@ -499,17 +506,17 @@ Live Control:<br>
</TR>
<tr>
<td>
</td><td>
<div id=GeneralData></DIV>
<input type=checkbox ID=toggle_adc_buffer onchange='toggleBuffer(this)'>ADC Buffer Enable
<BR>Pow2 Attenuation:
<input id=g_attenuation_pow2 onwheel='attenuationpow2wheel(event, this)' size=3 type=number style="width:3em" value=3><br>
</td>
</tr>
<tr><td>
<DIV STYLE="position:relative">
<DIV style="margin:0px;top:0px;position:absolute" ID=TABLE></DIV>
</DIV>
</td></tr>
</TABLE>
<DIV ID=TABLE></DIV>
</BODY>
</HTML>
+1 -1
View File
@@ -370,7 +370,7 @@ async function sendLoop()
(kBsecAvg).toFixed(2) + " kB/s<br>" +
(xActionSecAvg).toFixed(2) + "x/s<br>";
document.getElementById( "GeneralData" ).innerHTML =
"<TABLE WIDTH=100%><TR><TD width=25%>Count: " + goodCount + " / " + badCount + "</td>" +
"<TABLE WIDTH=100% border=1><TR><TD width=25%>Count: " + goodCount + " / " + badCount + "</td>" +
"<td width=20%>Inten: " + ((Math.log( lastIntensity * lastIntensity )/Math.log(10)) * 10-120).toFixed(2) + "db (" + lastIntensity + ")</td>" +
"<td width=20%>ADCs: " + (lastadc>>16).toFixed(0) + " / " + (lastadc&0xffff).toFixed(0) + "</td>" +
"<td width=20%>Remote clock: <INPUT TYPE=SUBMIT VALUE=" + (remote_clock_mhz/1000000.0).toFixed(6) + ` ONMOUSEDOWN="document.getElementById('crystalmhz').value = ${remote_clock_mhz/1000000.0};">MHz ` + "</TD>" +