Modernize application layout
This commit is contained in:
+125
-110
@@ -2,8 +2,8 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="ZGUI.css">
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||
<script src="TrimSPweb.js"></script>
|
||||
<script>
|
||||
// Electron exposes CommonJS module support; plain browsers do not.
|
||||
@@ -16,92 +16,99 @@
|
||||
</script>
|
||||
<script src="TrimSPlib.js"></script>
|
||||
<script src="myplots.js"></script>
|
||||
<!script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
|
||||
<title>TRIMSP-NL Workbench</title>
|
||||
</head>
|
||||
<body onresize="resizePl()" onload="adjust_table();adjust_scans();">
|
||||
<table style="width: 100%;">
|
||||
<tr><td>
|
||||
<div class="col-full">
|
||||
<div class="tab">
|
||||
<button class="tablinks" onclick="openTab(event,'Layers')" id="btnLayers">Layers</button>
|
||||
<button class="tablinks" onclick="openTab(event,'Scans')" id="btnScans">Scans</button>
|
||||
<button class="tablinks" onclick="openTab(event,'Plots')" id="btnPlots">Plots</button>
|
||||
<button class="tablinks" onclick="openTab(event,'Other')" id="btnOther">Other Parameters</button>
|
||||
<main class="app-shell">
|
||||
<section class="app-card">
|
||||
<nav class="tab" aria-label="Simulation workspace">
|
||||
<button type="button" class="tablinks" onclick="openTab(event,'Layers')" id="btnLayers">Layers</button>
|
||||
<button type="button" class="tablinks" onclick="openTab(event,'Scans')" id="btnScans">Scan</button>
|
||||
<button type="button" class="tablinks" onclick="openTab(event,'Plots')" id="btnPlots">Results</button>
|
||||
<button type="button" class="tablinks" onclick="openTab(event,'Other')" id="btnOther">Advanced</button>
|
||||
</nav>
|
||||
<div class="main-action-bar" role="toolbar" aria-label="Simulation actions">
|
||||
<div class="action-bar-title">
|
||||
<img class="app-brand-icon" src="icon.png" alt="" aria-hidden="true">
|
||||
<div>
|
||||
<span class="action-bar-eyebrow">TRIMSP-NL Workbench</span>
|
||||
<strong>Low-energy implantation simulation</strong>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="run-action" id="runSimulationButton" onclick="startSim();">Run simulation</button>
|
||||
</div>
|
||||
<div id="Layers" class="tabcontent">
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td style="vertical-align: top;">
|
||||
<table cellpadding="5">
|
||||
<tr id="FileRow">
|
||||
<td><label>File name prefix:</label></td>
|
||||
<td>
|
||||
<input name="fileNamePrefix" id="fileNamePrefix" type="text" style="width:70%" value="SrTiO3"/>
|
||||
<input name="trimPath" id="trimPath" type="hidden"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="FolderRow">
|
||||
<td><label>Save folder:</label></td>
|
||||
<td>
|
||||
<input type="text" disabled style="width:70%" id="workPath" name="workPath" title="Use Browse to select the save folder" />
|
||||
<input type="button" value="Browse"
|
||||
id="browseFolde" onclick="browseForFolder();">
|
||||
<input type="file" id="folderPicker" style="display:none" webkitdirectory directory>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>Number of Layers:</label></td>
|
||||
<td><input name="numLayer" id="numLayer" type="number" size="3" step="1" min="1" max="100" value="1" onchange="adjust_table()"></td>
|
||||
</tr>
|
||||
<tr><td colspan="2">
|
||||
<table id="LTable" border="2" cellpadding="10">
|
||||
<tr><td><b>Layer #</b></td><td><b>Composition</b></td><td><b>Density [g/cm<sup>3</sup>]</b></td><td><b>Thickness [Å]</b></td></tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
<div class="output-settings">
|
||||
<label class="compact-field output-prefix" id="FileRow" for="fileNamePrefix">
|
||||
<span>File prefix</span>
|
||||
<input name="fileNamePrefix" id="fileNamePrefix" type="text" value="SrTiO3">
|
||||
<input name="trimPath" id="trimPath" type="hidden">
|
||||
</label>
|
||||
<div class="compact-field output-folder" id="FolderRow">
|
||||
<label for="workPath">Save folder</label>
|
||||
<div class="field-with-action">
|
||||
<input type="text" disabled id="workPath" name="workPath" title="Use Browse to select the save folder">
|
||||
<input type="button" value="Browse" id="browseFolde" onclick="browseForFolder();">
|
||||
<input type="file" id="folderPicker" hidden webkitdirectory directory>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layers-workspace">
|
||||
<section class="settings-panel target-panel" aria-labelledby="targetPanelTitle">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<span class="section-eyebrow">Target</span>
|
||||
<h2 id="targetPanelTitle">Layer stack</h2>
|
||||
</div>
|
||||
<label class="layer-count" for="numLayer">
|
||||
<span>Layers</span>
|
||||
<input name="numLayer" id="numLayer" type="number" step="1" min="1" max="100" value="1" onchange="adjust_table()">
|
||||
</label>
|
||||
</div>
|
||||
<div class="layer-table-wrap">
|
||||
<table id="LTable">
|
||||
<tr><td><b>Layer</b></td><td><b>Composition</b></td><td><b>Density [g/cm<sup>3</sup>]</b></td><td><b>Thickness [Å]</b></td></tr>
|
||||
</table>
|
||||
</td>
|
||||
<td style="vertical-align: top;">
|
||||
<table cellpadding="5">
|
||||
<tr><td collspan="2"><b>Projectile parameters</b></td></tr>
|
||||
<tr><td>Projectile</td>
|
||||
<td><select name="ProjType" id="ProjType" onchange="ProjSmartDefaults()" onload="ProjSmartDefaults()">
|
||||
<option selected="selected" value="muon">muon</option>
|
||||
<option value="Li-8">Li-8</option>
|
||||
<option value="Be-11">Be-11</option>
|
||||
<option value="B-12">B-12</option>
|
||||
<option value="Mg-31">Mg-31</option>
|
||||
<option value="H">H</option>
|
||||
<option value="He">He</option>
|
||||
<option value="Ar">Ar</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr><td>Number of projectiles</td>
|
||||
<td><input name="numberProj" id="numberProj" type="text" size="7" value="1000" onchange="//ProjNumberLimit()"></td>
|
||||
</tr>
|
||||
<tr><td>Starting depth [Å]</td><td><input name="z0" id="z0" type="text" size="7" value="0"></td></tr>
|
||||
<tr><td>Depth increment [Å]</td><td><input name="dz" id="dz" type="text" size="7" value="20"></td></tr>
|
||||
<tr><td>Energy [eV]</td><td><input name="valEnergy" id="valEnergy" type="text" size="7" value="2000"></td></tr>
|
||||
<tr><td>Energy sigma [eV]</td><td><input name="sigEnergy" id="sigEnergy" type="text" size="7" value="450"></td></tr>
|
||||
<tr><td>Angle [deg]</td><td><input name="valAngle" id="valAngle" type="text" size="7" value="0"></td></tr>
|
||||
<tr><td>Angle sigma [deg]</td><td><input name="sigAngle" id="sigAngle" type="text" size="7" value="15"></td></tr>
|
||||
<tr>
|
||||
<td>RNG / Seed</td>
|
||||
<td>
|
||||
<select name="rngType" id="rngType">
|
||||
<option value="pcg32" selected="selected">PCG32</option>
|
||||
<option value="ranlux">RANLUX</option>
|
||||
<option value="xoshiro">xoshiro256**</option>
|
||||
</select>
|
||||
<input name="ranSeed" id="ranSeed" type="text" size="7" value="78741">
|
||||
</td>
|
||||
</tr>
|
||||
<tr><td><button onclick="startSim();">Start</button></td><td></td></tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<section class="settings-panel projectile-panel" aria-labelledby="projectilePanelTitle">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<span class="section-eyebrow">Beam</span>
|
||||
<h2 id="projectilePanelTitle">Projectile</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="projectile-grid">
|
||||
<label class="settings-field" for="ProjType"><span>Projectile</span>
|
||||
<select name="ProjType" id="ProjType" onchange="ProjSmartDefaults()">
|
||||
<option selected="selected" value="muon">muon</option>
|
||||
<option value="Li-8">Li-8</option>
|
||||
<option value="Be-11">Be-11</option>
|
||||
<option value="B-12">B-12</option>
|
||||
<option value="Mg-31">Mg-31</option>
|
||||
<option value="H">H</option>
|
||||
<option value="He">He</option>
|
||||
<option value="Ar">Ar</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="settings-field" for="numberProj"><span>Projectiles</span><input name="numberProj" id="numberProj" type="text" value="1000"></label>
|
||||
<label class="settings-field" for="valEnergy"><span>Energy [eV]</span><input name="valEnergy" id="valEnergy" type="text" value="2000"></label>
|
||||
<label class="settings-field" for="sigEnergy"><span>Energy sigma [eV]</span><input name="sigEnergy" id="sigEnergy" type="text" value="450"></label>
|
||||
<label class="settings-field" for="valAngle"><span>Angle [deg]</span><input name="valAngle" id="valAngle" type="text" value="0"></label>
|
||||
<label class="settings-field" for="sigAngle"><span>Angle sigma [deg]</span><input name="sigAngle" id="sigAngle" type="text" value="15"></label>
|
||||
<label class="settings-field" for="z0"><span>Starting depth [Å]</span><input name="z0" id="z0" type="text" value="0"></label>
|
||||
<label class="settings-field" for="dz"><span>Depth increment [Å]</span><input name="dz" id="dz" type="text" value="20"></label>
|
||||
<label class="settings-field" for="rngType"><span>RNG</span>
|
||||
<select name="rngType" id="rngType">
|
||||
<option value="pcg32" selected="selected">PCG32</option>
|
||||
<option value="ranlux">RANLUX</option>
|
||||
<option value="xoshiro">xoshiro256**</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="settings-field" for="ranSeed"><span>Seed</span><input name="ranSeed" id="ranSeed" type="text" value="78741"></label>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div id="Scans" class="tabcontent">
|
||||
<input type="checkbox" name="scanSeq" id="scanSeq" onChange="adjust_scans();"> Enable scan on
|
||||
@@ -158,7 +165,15 @@
|
||||
</table>
|
||||
</div>
|
||||
<div id="Other" class="tabcontent">
|
||||
<table cellpadding="5">
|
||||
<div class="advanced-layout">
|
||||
<section class="settings-panel advanced-parameters" aria-labelledby="advancedParametersTitle">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<span class="section-eyebrow">Transport model</span>
|
||||
<h2 id="advancedParametersTitle">Advanced parameters</h2>
|
||||
</div>
|
||||
</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td class="tooltip">
|
||||
EF
|
||||
@@ -373,29 +388,33 @@
|
||||
<input name="parIRL" id="parIRL" type="number" step="1" min="0" max="1" value="0">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
For further details see:<br>
|
||||
W. Eckstein, <i>Computer Simulation of Ion-Solid Interactions</i>,<br>
|
||||
Springer Series in Materials Science, Vol. 10 (Springer-Verlag, Berlin, 1991).<br>
|
||||
<a href="https://doi.org/10.1007/978-3-642-73513-4">
|
||||
https://doi.org/10.1007/978-3-642-73513-4
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
If you use this software in published work, please cite the relevant
|
||||
TRIM.SP references and the TRIMSP-NL Workbench paper.
|
||||
</p>
|
||||
<p>
|
||||
Source repository:
|
||||
<a href="https://gitea.psi.ch/LMU/TRIMSP">
|
||||
gitea.psi.ch/LMU/TRIMSP
|
||||
</a>
|
||||
</p>
|
||||
</table>
|
||||
</section>
|
||||
<aside class="reference-panel" aria-labelledby="referencePanelTitle">
|
||||
<span class="section-eyebrow">Documentation</span>
|
||||
<h2 id="referencePanelTitle">Reference & citation</h2>
|
||||
<p>
|
||||
For model details, see W. Eckstein,
|
||||
<i>Computer Simulation of Ion-Solid Interactions</i>, Springer Series
|
||||
in Materials Science, Vol. 10 (Springer-Verlag, Berlin, 1991).
|
||||
</p>
|
||||
<a class="reference-link" href="https://doi.org/10.1007/978-3-642-73513-4">
|
||||
doi.org/10.1007/978-3-642-73513-4
|
||||
</a>
|
||||
<p>
|
||||
If you use this software in published work, please cite the relevant
|
||||
TRIM.SP references and the TRIMSP-NL Workbench paper.
|
||||
</p>
|
||||
<div class="reference-divider"></div>
|
||||
<span class="reference-label">Source repository</span>
|
||||
<a class="reference-link" href="https://gitea.psi.ch/LMU/TRIMSP">
|
||||
gitea.psi.ch/LMU/TRIMSP
|
||||
</a>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td></tr>
|
||||
</table>
|
||||
</section>
|
||||
</main>
|
||||
<div id="statusBar" class="status-bar">
|
||||
<span class="status-item"><strong>Folder:</strong> <span id="statusWorkPath">-</span></span>
|
||||
<span class="status-item"><strong>Backend:</strong> <span id="statusBackend">-</span></span>
|
||||
@@ -429,12 +448,8 @@
|
||||
if (webOrApp) {
|
||||
console.log('this script is not running in Node.js');
|
||||
// Run as a web app
|
||||
//let row = document.getElementById("FileRow");
|
||||
//row.parentNode.removeChild(row);
|
||||
//row = document.getElementById("FolderRow");
|
||||
//row.parentNode.removeChild(row);
|
||||
document.getElementById("FileRow").style.visibility = "hidden";;
|
||||
document.getElementById("FolderRow").style.visibility = "hidden";;
|
||||
document.getElementById("FileRow").hidden = true;
|
||||
document.getElementById("FolderRow").hidden = true;
|
||||
} else {
|
||||
console.log('this script is running in Node.js');
|
||||
// Run as standalone app
|
||||
|
||||
@@ -2,371 +2,613 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--trim-bg: #e9eef0;
|
||||
--trim-panel: #fffdf8;
|
||||
--trim-panel-soft: #f3f6f4;
|
||||
--trim-ink: #1d2b32;
|
||||
--trim-muted: #617077;
|
||||
--trim-deep: #173943;
|
||||
--trim-accent: #bd5f37;
|
||||
--trim-accent-hover: #9f4827;
|
||||
--trim-border: #c8d3d5;
|
||||
--trim-focus: #2d7888;
|
||||
--trim-status-height: 38px;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:
|
||||
radial-gradient(circle at 8% 5%, rgba(189, 95, 55, 0.16), transparent 28rem),
|
||||
linear-gradient(145deg, #f5f1e9 0%, var(--trim-bg) 58%, #dce6e7 100%);
|
||||
color: var(--trim-ink);
|
||||
font-family: "Trebuchet MS", "Lucida Sans", Geneva, sans-serif;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 8px 10px calc(var(--trim-status-height) + 8px);
|
||||
}
|
||||
|
||||
td {
|
||||
white-space: wrap;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.guitable {
|
||||
background-color: #DDDDDD;
|
||||
border: 1px solid #000000;
|
||||
/* border-collapse: collapse; */
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
border-spacing: 0px;
|
||||
padding: 5px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.guitable tr:last-child td:first-child {
|
||||
border-bottom-left-radius: 12px;
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
select {
|
||||
background: #fff;
|
||||
border: 1px solid #aebdc0;
|
||||
border-radius: 5px;
|
||||
color: var(--trim-ink);
|
||||
min-height: 29px;
|
||||
padding: 3px 7px;
|
||||
}
|
||||
|
||||
.guitable tr:last-child td:last-child {
|
||||
border-bottom-right-radius: 12px;
|
||||
input[type="text"]:focus,
|
||||
input[type="number"]:focus,
|
||||
select:focus,
|
||||
button:focus-visible,
|
||||
input[type="button"]:focus-visible {
|
||||
border-color: var(--trim-focus);
|
||||
box-shadow: 0 0 0 3px rgba(45, 120, 136, 0.17);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.guitable tr:first-child td:first-child {
|
||||
border-top-left-radius: 12px;
|
||||
input:disabled {
|
||||
background: #e8edef;
|
||||
color: #59676d;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.guitable tr:first-child td:last-child {
|
||||
border-top-right-radius: 12px;
|
||||
button,
|
||||
input[type="button"] {
|
||||
background: #fff;
|
||||
border: 1px solid #8da5aa;
|
||||
border-radius: 5px;
|
||||
color: var(--trim-deep);
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
padding: 6px 11px;
|
||||
}
|
||||
|
||||
.guitable tr:nth-child(odd) {
|
||||
background-color: #DDDDDD;
|
||||
button:hover,
|
||||
input[type="button"]:hover {
|
||||
background: #eaf1f1;
|
||||
}
|
||||
|
||||
.guitable tr:nth-child(even) {
|
||||
background-color: #DDDDDD;
|
||||
}
|
||||
|
||||
/* For mobile phones: */
|
||||
[class*="col-"] {
|
||||
.app-shell {
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
max-width: 1240px;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 700px) {
|
||||
.app-card {
|
||||
background: linear-gradient(180deg, var(--trim-panel) 0%, #fafbf8 100%);
|
||||
border: 1px solid rgba(97, 112, 119, 0.3);
|
||||
border-radius: 13px;
|
||||
box-shadow: 0 18px 45px rgba(29, 43, 50, 0.17);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* For tablets: */
|
||||
.col-s-1 {
|
||||
width: 50%;
|
||||
background-color: #DDDDDD;
|
||||
.tab {
|
||||
background: var(--trim-deep);
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
gap: 3px;
|
||||
overflow-x: auto;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
.tab button {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
color: #dce8e9;
|
||||
font-size: 0.93rem;
|
||||
padding: 6px 11px;
|
||||
transition: background 0.16s ease, color 0.16s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tab button:hover {
|
||||
background: rgba(255, 255, 255, 0.13);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tab button.active {
|
||||
background: var(--trim-panel);
|
||||
color: var(--trim-deep);
|
||||
}
|
||||
|
||||
.main-action-bar {
|
||||
align-items: center;
|
||||
background: var(--trim-panel-soft);
|
||||
border-bottom: 1px solid var(--trim-border);
|
||||
box-shadow: 0 5px 15px rgba(29, 43, 50, 0.07);
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
gap: 16px;
|
||||
justify-content: space-between;
|
||||
padding: 7px 12px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.action-bar-title {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.app-brand-icon {
|
||||
border-radius: 7px;
|
||||
flex: 0 0 auto;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.action-bar-title strong {
|
||||
color: var(--trim-deep);
|
||||
display: block;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.action-bar-eyebrow {
|
||||
color: var(--trim-muted);
|
||||
display: block;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.run-action {
|
||||
background: var(--trim-accent);
|
||||
border-color: var(--trim-accent);
|
||||
color: #fff;
|
||||
flex: 0 0 auto;
|
||||
min-width: 145px;
|
||||
padding: 8px 14px;
|
||||
}
|
||||
|
||||
.run-action:hover {
|
||||
background: var(--trim-accent-hover);
|
||||
}
|
||||
|
||||
.tabcontent {
|
||||
background: var(--trim-panel);
|
||||
border: 0;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
padding: 10px 12px 14px;
|
||||
}
|
||||
|
||||
/* Compact configuration panels keep the default window free of scrollbars. */
|
||||
.output-settings {
|
||||
align-items: end;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: minmax(180px, 0.8fr) minmax(320px, 1.8fr);
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.compact-field,
|
||||
.settings-field {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.compact-field > span,
|
||||
.compact-field > label,
|
||||
.settings-field > span {
|
||||
color: var(--trim-muted);
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.compact-field > input,
|
||||
.settings-field > input,
|
||||
.settings-field > select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.field-with-action {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.field-with-action input[type="text"] {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.layers-workspace {
|
||||
align-items: start;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
|
||||
}
|
||||
|
||||
.settings-panel,
|
||||
.reference-panel {
|
||||
background: #fff;
|
||||
border: 1px solid var(--trim-border);
|
||||
border-radius: 9px;
|
||||
min-width: 0;
|
||||
padding: 9px 10px;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.section-heading h2,
|
||||
.reference-panel h2 {
|
||||
color: var(--trim-deep);
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.section-eyebrow {
|
||||
color: var(--trim-accent);
|
||||
display: block;
|
||||
font-size: 0.67rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.layer-count {
|
||||
align-items: center;
|
||||
color: var(--trim-muted);
|
||||
display: flex;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.layer-count input {
|
||||
width: 58px;
|
||||
}
|
||||
|
||||
.layer-table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.projectile-grid {
|
||||
display: grid;
|
||||
gap: 6px 9px;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
#Plots > table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#LTable {
|
||||
border: 0;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#LTable td {
|
||||
border-bottom: 1px solid var(--trim-border);
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
padding: 5px 6px;
|
||||
}
|
||||
|
||||
#LTable tr:first-child td {
|
||||
background: #e7eeed;
|
||||
color: var(--trim-deep);
|
||||
font-size: 0.84rem;
|
||||
}
|
||||
|
||||
#LTable tr:not(:first-child):hover td {
|
||||
background: #f5f8f5;
|
||||
}
|
||||
|
||||
#ScansControls,
|
||||
#ScansLine,
|
||||
#ScansTable {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
#ScansControls table,
|
||||
#ScansTable {
|
||||
background: var(--trim-panel-soft);
|
||||
border: 1px solid var(--trim-border);
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#ScansControls td,
|
||||
#ScansTable td {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
#Plots > table td {
|
||||
padding: 8px;
|
||||
vertical-align: top;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.advanced-layout {
|
||||
align-items: start;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: minmax(560px, 2.2fr) minmax(240px, 0.8fr);
|
||||
}
|
||||
|
||||
.advanced-parameters > table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 5px 2px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.advanced-parameters {
|
||||
padding: 7px 9px;
|
||||
}
|
||||
|
||||
.advanced-parameters .section-heading {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.advanced-parameters > table td {
|
||||
padding: 2px 3px;
|
||||
}
|
||||
|
||||
.advanced-parameters > table td:nth-child(odd) {
|
||||
color: var(--trim-deep);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.advanced-parameters input {
|
||||
min-height: 27px;
|
||||
max-width: 94px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.reference-panel {
|
||||
background:
|
||||
linear-gradient(145deg, rgba(189, 95, 55, 0.08), transparent 55%),
|
||||
var(--trim-panel-soft);
|
||||
color: #46565d;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.32;
|
||||
padding: 8px 9px;
|
||||
}
|
||||
|
||||
.reference-panel p {
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.reference-link {
|
||||
color: #1f6675;
|
||||
display: block;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.reference-divider {
|
||||
border-top: 1px solid var(--trim-border);
|
||||
margin: 7px 0 6px;
|
||||
}
|
||||
|
||||
.reference-label {
|
||||
color: var(--trim-deep);
|
||||
display: block;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 3px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
cursor: help;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
background: #142d35;
|
||||
border-radius: 7px;
|
||||
box-shadow: 0 8px 24px rgba(17, 34, 40, 0.25);
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
left: 0;
|
||||
line-height: 1.35;
|
||||
padding: 9px 11px;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
top: calc(100% + 5px);
|
||||
display: none;
|
||||
width: 330px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext,
|
||||
.tooltip:focus-within .tooltiptext {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.transient-warning {
|
||||
background: #fff1c9;
|
||||
border: 1px solid #c79824;
|
||||
border-radius: 7px;
|
||||
box-shadow: 0 7px 20px rgba(29, 43, 50, 0.17);
|
||||
color: #523c08;
|
||||
line-height: 1.35;
|
||||
max-width: 380px;
|
||||
opacity: 0;
|
||||
padding: 9px 12px;
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
transition: opacity 0.2s ease;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.transient-warning.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.estimated-density {
|
||||
background: #fff1c9 !important;
|
||||
border-color: #c79824 !important;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
align-items: center;
|
||||
background: #edf2f2;
|
||||
border-top: 1px solid #aebec1;
|
||||
bottom: 0;
|
||||
box-shadow: 0 -3px 12px rgba(29, 43, 50, 0.1);
|
||||
color: var(--trim-ink);
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
font-size: 0.82rem;
|
||||
gap: 14px;
|
||||
left: 0;
|
||||
min-height: var(--trim-status-height);
|
||||
padding: 5px 12px;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: 900;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-item strong {
|
||||
color: var(--trim-deep);
|
||||
}
|
||||
|
||||
.status-progress {
|
||||
flex: 1 1 220px;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.status-progress-track {
|
||||
background: #d3dcde;
|
||||
border: 1px solid #aebec1;
|
||||
border-radius: 999px;
|
||||
height: 18px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.status-progress-fill {
|
||||
background: linear-gradient(90deg, #2d7888, #45a0a6);
|
||||
color: #fff;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
height: 100%;
|
||||
line-height: 16px;
|
||||
padding: 0 4px;
|
||||
text-align: center;
|
||||
transition: width 0.2s ease;
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 760px) {
|
||||
body {
|
||||
padding: 0 0 var(--trim-status-height);
|
||||
}
|
||||
|
||||
.col-s-2 {
|
||||
width: 50%;
|
||||
background-color: #DDDDDD;
|
||||
.app-card {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.col-s-full {
|
||||
width: 100%;
|
||||
background-color: #F2F2F2;
|
||||
.main-action-bar {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
[class*="col-"] {
|
||||
width: 100%;
|
||||
.run-action {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 990px) {
|
||||
|
||||
/* For desktop: */
|
||||
.col-1 {
|
||||
width: 50%;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
width: 50%;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
|
||||
.col-full {
|
||||
width: 100%;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
.output-settings,
|
||||
.layers-workspace,
|
||||
.projectile-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
[class*="col-"] {
|
||||
float: left;
|
||||
padding: 5px;
|
||||
border: none;
|
||||
.advanced-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.row::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
.advanced-parameters {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.transient-warning {
|
||||
position: fixed;
|
||||
max-width: 360px;
|
||||
padding: 10px 14px;
|
||||
background-color: #fff4cc;
|
||||
border: 1px solid #c5a100;
|
||||
border-radius: 8px;
|
||||
color: #4d3b00;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.35;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.25s ease;
|
||||
z-index: 1000;
|
||||
#Plots > table,
|
||||
#Plots > table > tbody,
|
||||
#Plots > table > tbody > tr,
|
||||
#Plots > table > tbody > tr > td {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.transient-warning.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.estimated-density {
|
||||
background-color: #fff4cc;
|
||||
border: 1px solid #c5a100;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 16px;
|
||||
align-items: center;
|
||||
padding: 8px 14px;
|
||||
background-color: #eef2f5;
|
||||
border-top: 1px solid #b8c3cc;
|
||||
color: #23313d;
|
||||
font-size: 0.88rem;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
|
||||
z-index: 900;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
min-width: 180px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-item strong {
|
||||
color: #10202c;
|
||||
.status-item:nth-child(-n+3) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.status-progress {
|
||||
flex: 1 1 260px;
|
||||
min-width: 220px;
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 761px) and (max-width: 900px) {
|
||||
.advanced-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.status-progress-track {
|
||||
width: 100%;
|
||||
height: 22px;
|
||||
background-color: #d7dee5;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #b8c3cc;
|
||||
.reference-panel {
|
||||
display: grid;
|
||||
gap: 8px 14px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.status-progress-fill {
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background-color: #2e8b57;
|
||||
color: black;
|
||||
padding-left: 3px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
transition: width 0.2s ease;
|
||||
.reference-panel .section-eyebrow,
|
||||
.reference-panel h2,
|
||||
.reference-divider {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.group_name {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
font-size: 105%;
|
||||
font-weight: bold;
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
/* text-align: center; */
|
||||
}
|
||||
|
||||
.yellow_td {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
background-color: yellow;
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gray_td {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
background-color: gray;
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nocol_td {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Style the tab */
|
||||
.tab {
|
||||
overflow: hidden;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Style the buttons that are used to open the tab content */
|
||||
.tab button {
|
||||
background-color: inherit;
|
||||
float: left;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
padding: 14px 16px;
|
||||
transition: 0.3s;
|
||||
font-size: 105%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Change background color of buttons on hover */
|
||||
.tab button:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
/* Create an active/current tablink class */
|
||||
.tab button.active {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
/* Style the tab content */
|
||||
.tabcontent {
|
||||
display: none;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
/* Go from zero to full opacity */
|
||||
@keyframes fadeEffect {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Chrome, Safari, Opera */
|
||||
@-webkit-keyframes example {
|
||||
0% {
|
||||
background-color: red;
|
||||
left: 20px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
25% {
|
||||
background-color: orange;
|
||||
left: 25px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-color: green;
|
||||
left: 30px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
75% {
|
||||
background-color: orange;
|
||||
left: 25px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: red;
|
||||
left: 20px;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Standard syntax */
|
||||
@keyframes example {
|
||||
0% {
|
||||
background-color: red;
|
||||
left: 20px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
25% {
|
||||
background-color: orange;
|
||||
left: 25px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-color: green;
|
||||
left: 30px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
75% {
|
||||
background-color: orange;
|
||||
left: 25px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: red;
|
||||
left: 20px;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
#myBar {
|
||||
width: 10%;
|
||||
height: 30px;
|
||||
background-color: #4CAF50;
|
||||
text-align: center;
|
||||
/* To center it horizontally (if you want) */
|
||||
line-height: 30px;
|
||||
/* To center it vertically */
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Tooltip container */
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
/* border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
|
||||
}
|
||||
|
||||
/* Tooltip text */
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 320px;
|
||||
background-color: black;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
padding: 5px;
|
||||
border-radius: 6px;
|
||||
|
||||
/* Position the tooltip text - see examples below! */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Show the tooltip text when you mouse over the tooltip container */
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user