profiler: use tab-style buttons for Profiles / Card snapshots
Rectangular top-rounded tabs with a bottom border, matching the app's top-level tab bar (incl. dark:bg-blue-500/dark:text-white active state, toggled by profilerListSwitch). SW cache v82 -> v83.
This commit is contained in:
+5
-3
@@ -813,9 +813,9 @@
|
|||||||
|
|
||||||
<div id="pysim-sub-profiler" class="hidden">
|
<div id="pysim-sub-profiler" class="hidden">
|
||||||
<div id="profiler-list">
|
<div id="profiler-list">
|
||||||
<div class="flex justify-center gap-2 mb-3">
|
<div class="flex gap-1 mb-3 border-b border-gray-300 dark:border-slate-600">
|
||||||
<button class="profiler-list-tab px-4 py-1.5 text-sm rounded-full bg-blue-600 text-white" data-list-tab="profiles" onclick="profilerListSwitch('profiles')" data-l10n="Profiles">Profiles</button>
|
<button class="profiler-list-tab px-4 py-1.5 text-sm rounded-t bg-blue-600 dark:bg-blue-500 text-white dark:text-white" data-list-tab="profiles" onclick="profilerListSwitch('profiles')" data-l10n="Profiles">Profiles</button>
|
||||||
<button class="profiler-list-tab px-4 py-1.5 text-sm rounded-full bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-slate-300 hover:bg-gray-300 dark:hover:bg-slate-600" data-list-tab="snapshots" onclick="profilerListSwitch('snapshots')" data-l10n="Card snapshots">Card snapshots</button>
|
<button class="profiler-list-tab px-4 py-1.5 text-sm rounded-t bg-gray-200 dark:bg-slate-700 hover:bg-gray-300 dark:hover:bg-slate-600 text-gray-700 dark:text-slate-300" data-list-tab="snapshots" onclick="profilerListSwitch('snapshots')" data-l10n="Card snapshots">Card snapshots</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="profiler-list-profiles">
|
<div id="profiler-list-profiles">
|
||||||
<div class="flex flex-wrap gap-2 mb-3">
|
<div class="flex flex-wrap gap-2 mb-3">
|
||||||
@@ -7142,7 +7142,9 @@ function profilerListSwitch(name) {
|
|||||||
document.querySelectorAll('.profiler-list-tab').forEach(btn => {
|
document.querySelectorAll('.profiler-list-tab').forEach(btn => {
|
||||||
const active = btn.dataset.listTab === name;
|
const active = btn.dataset.listTab === name;
|
||||||
btn.classList.toggle('bg-blue-600', active);
|
btn.classList.toggle('bg-blue-600', active);
|
||||||
|
btn.classList.toggle('dark:bg-blue-500', active);
|
||||||
btn.classList.toggle('text-white', active);
|
btn.classList.toggle('text-white', active);
|
||||||
|
btn.classList.toggle('dark:text-white', active);
|
||||||
btn.classList.toggle('bg-gray-200', !active);
|
btn.classList.toggle('bg-gray-200', !active);
|
||||||
btn.classList.toggle('dark:bg-slate-700', !active);
|
btn.classList.toggle('dark:bg-slate-700', !active);
|
||||||
btn.classList.toggle('text-gray-700', !active);
|
btn.classList.toggle('text-gray-700', !active);
|
||||||
|
|||||||
+1
-1
@@ -1,4 +1,4 @@
|
|||||||
const CACHE = 'otaman-v82';
|
const CACHE = 'otaman-v83';
|
||||||
const URLS = [
|
const URLS = [
|
||||||
'index.html',
|
'index.html',
|
||||||
'help.html',
|
'help.html',
|
||||||
|
|||||||
Reference in New Issue
Block a user