Modernize application layout

This commit is contained in:
2026-08-27 17:25:33 +02:00
parent 19b9eacf53
commit 65aeddd0ef
2 changed files with 692 additions and 435 deletions
+125 -110
View File
@@ -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 &amp; 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
+567 -325
View File
@@ -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;
}
}
}