ui: embedded labels (fieldset/legend) for the phone simulator and SCP81 containers
- Phone simulator: STK menu, STATUS and Polling, TERMINAL PROFILE and SET UP EVENT LIST become fieldsets with legends; 'Fetched proactive commands:' gains a bordered container - SCP81 listener: the HTTP OTA listener label moves into the legend (the live state span stays next to it), Script results (R-APDUs) and HTTP OTA log become fieldsets (the log's Clear button moves to the body top-right) - Options (applied at Start) stays a details/summary but its summary is styled as an embedded label (page-background patch over the top border, native triangle kept) so it expands/collapses from the legend - html.test.js: card-fieldset test no longer assumes exactly two fieldsets; new guard test for the legends and the Options summary - Tailwind rebuild of style.css; SW cache simple-v192 (version stays 2.4.0)
This commit is contained in:
+253
-15
@@ -554,40 +554,68 @@ video {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.\!container {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.\!container {
|
||||
max-width: 640px !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.\!container {
|
||||
max-width: 768px !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 768px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.\!container {
|
||||
max-width: 1024px !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1024px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.\!container {
|
||||
max-width: 1280px !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
.\!container {
|
||||
max-width: 1536px !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1536px;
|
||||
}
|
||||
}
|
||||
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.static {
|
||||
position: static;
|
||||
}
|
||||
@@ -612,6 +640,10 @@ video {
|
||||
inset: 0px;
|
||||
}
|
||||
|
||||
.-top-2 {
|
||||
top: -0.5rem;
|
||||
}
|
||||
|
||||
.bottom-full {
|
||||
bottom: 100%;
|
||||
}
|
||||
@@ -636,6 +668,11 @@ video {
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.mx-3 {
|
||||
margin-left: 0.75rem;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.mx-4 {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
@@ -646,12 +683,16 @@ video {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.25rem;
|
||||
.-mb-1 {
|
||||
margin-bottom: -0.25rem;
|
||||
}
|
||||
|
||||
.mb-1\.5 {
|
||||
margin-bottom: 0.375rem;
|
||||
.mb-0\.5 {
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.mb-10 {
|
||||
@@ -674,10 +715,18 @@ video {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.ml-0\.5 {
|
||||
margin-left: 0.125rem;
|
||||
}
|
||||
|
||||
.ml-1 {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.ml-10 {
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
|
||||
.ml-2 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
@@ -722,6 +771,10 @@ video {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.mt-5 {
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
@@ -742,6 +795,10 @@ video {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.contents {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
@@ -750,6 +807,10 @@ video {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.h-4 {
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
@@ -758,6 +819,22 @@ video {
|
||||
max-height: 8rem;
|
||||
}
|
||||
|
||||
.max-h-56 {
|
||||
max-height: 14rem;
|
||||
}
|
||||
|
||||
.max-h-\[35vh\] {
|
||||
max-height: 35vh;
|
||||
}
|
||||
|
||||
.max-h-\[45vh\] {
|
||||
max-height: 45vh;
|
||||
}
|
||||
|
||||
.max-h-\[55vh\] {
|
||||
max-height: 55vh;
|
||||
}
|
||||
|
||||
.max-h-\[60vh\] {
|
||||
max-height: 60vh;
|
||||
}
|
||||
@@ -790,6 +867,10 @@ video {
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
.w-14 {
|
||||
width: 3.5rem;
|
||||
}
|
||||
|
||||
.w-16 {
|
||||
width: 4rem;
|
||||
}
|
||||
@@ -802,6 +883,14 @@ video {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.w-32 {
|
||||
width: 8rem;
|
||||
}
|
||||
|
||||
.w-36 {
|
||||
width: 9rem;
|
||||
}
|
||||
|
||||
.w-4 {
|
||||
width: 1rem;
|
||||
}
|
||||
@@ -818,6 +907,14 @@ video {
|
||||
width: 1.25rem;
|
||||
}
|
||||
|
||||
.w-52 {
|
||||
width: 13rem;
|
||||
}
|
||||
|
||||
.w-56 {
|
||||
width: 14rem;
|
||||
}
|
||||
|
||||
.w-6 {
|
||||
width: 1.5rem;
|
||||
}
|
||||
@@ -830,6 +927,11 @@ video {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.w-fit {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -838,6 +940,14 @@ video {
|
||||
min-width: 0px;
|
||||
}
|
||||
|
||||
.min-w-\[180px\] {
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.max-w-3xl {
|
||||
max-width: 48rem;
|
||||
}
|
||||
|
||||
.max-w-7xl {
|
||||
max-width: 80rem;
|
||||
}
|
||||
@@ -870,6 +980,16 @@ video {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -884,6 +1004,10 @@ video {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.resize {
|
||||
resize: both;
|
||||
}
|
||||
|
||||
.list-inside {
|
||||
list-style-position: inside;
|
||||
}
|
||||
@@ -904,6 +1028,14 @@ video {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-cols-4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -916,6 +1048,10 @@ video {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
@@ -956,8 +1092,9 @@ video {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-6 {
|
||||
gap: 1.5rem;
|
||||
.gap-x-2 {
|
||||
-moz-column-gap: 0.5rem;
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-x-3 {
|
||||
@@ -970,10 +1107,18 @@ video {
|
||||
column-gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-y-0\.5 {
|
||||
row-gap: 0.125rem;
|
||||
}
|
||||
|
||||
.gap-y-1 {
|
||||
row-gap: 0.25rem;
|
||||
}
|
||||
|
||||
.gap-y-1\.5 {
|
||||
row-gap: 0.375rem;
|
||||
}
|
||||
|
||||
.gap-y-2 {
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
@@ -1057,6 +1202,10 @@ video {
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.border-2 {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.border-b {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
@@ -1077,6 +1226,16 @@ video {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.border-blue-400 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.border-blue-500 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.border-gray-100 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
|
||||
@@ -1092,6 +1251,20 @@ video {
|
||||
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.border-green-400 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.border-purple-400 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(192 132 252 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.border-t-transparent {
|
||||
border-top-color: transparent;
|
||||
}
|
||||
|
||||
.bg-black\/50 {
|
||||
background-color: rgb(0 0 0 / 0.5);
|
||||
}
|
||||
@@ -1126,6 +1299,11 @@ video {
|
||||
background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-gray-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-gray-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
|
||||
@@ -1155,11 +1333,20 @@ video {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.bg-violet-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(124 58 237 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.p-1\.5 {
|
||||
padding: 0.375rem;
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
@@ -1251,10 +1438,18 @@ video {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.pb-0\.5 {
|
||||
padding-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.pb-1 {
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.pb-3 {
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.pl-2 {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
@@ -1325,8 +1520,8 @@ video {
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
@@ -1357,6 +1552,11 @@ video {
|
||||
line-height: 1.375;
|
||||
}
|
||||
|
||||
.text-amber-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-amber-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(217 119 6 / var(--tw-text-opacity, 1));
|
||||
@@ -1447,6 +1647,11 @@ video {
|
||||
color: rgb(203 213 225 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-slate-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(148 163 184 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-white {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
@@ -1466,6 +1671,10 @@ video {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.opacity-40 {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.opacity-50 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
@@ -1509,6 +1718,11 @@ video {
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:bg-gray-600:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:bg-gray-700:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
|
||||
@@ -1519,16 +1733,31 @@ video {
|
||||
background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:bg-red-700:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:bg-slate-700:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:bg-violet-700:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(109 40 217 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:text-gray-600:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:text-red-500:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(239 68 68 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:text-red-600:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(220 38 38 / var(--tw-text-opacity, 1));
|
||||
@@ -1551,10 +1780,6 @@ video {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.disabled\:opacity-50:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.dark\:border-slate-600:is(.dark *) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
|
||||
@@ -1569,6 +1794,11 @@ video {
|
||||
border-color: rgb(51 65 85 / 0.5);
|
||||
}
|
||||
|
||||
.dark\:border-slate-800:is(.dark *) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:bg-blue-500:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
|
||||
@@ -1593,6 +1823,11 @@ video {
|
||||
background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:text-amber-400:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(251 191 36 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:text-blue-400:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(96 165 250 / var(--tw-text-opacity, 1));
|
||||
@@ -1658,6 +1893,11 @@ video {
|
||||
color: rgb(250 204 21 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:text-yellow-500:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(234 179 8 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:invert:is(.dark *) {
|
||||
--tw-invert: invert(100%);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
@@ -1685,9 +1925,7 @@ video {
|
||||
.dark\:hover\:text-slate-300:hover:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(203 213 225 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
/* ===== Theme contrast adjustments ===== */
|
||||
}/* ===== Theme contrast adjustments ===== */
|
||||
|
||||
/* Light theme: darken softer (muted) text one step for higher contrast */
|
||||
.text-gray-400 {
|
||||
|
||||
Reference in New Issue
Block a user