@aspiresys/visor 1.3.5 → 1.4.0

package/inspector/styles.css

@@ -1,458 +1,456 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.match-summary {
-  margin-top: 10px;
-}
-
-.match-metric {
-  text-align: center;
-
-  padding: 10px 0;
-}
-
-.match-metric:last-child {
-  border-bottom: none;
-}
-
-.metric-label {
-  display: block;
-
-  color: #888;
-
-  font-size: 0.75em;
-
-  text-transform: uppercase;
-
-  letter-spacing: 1px;
-
-  margin-bottom: 4px;
-}
-
-.metric-value {
-  display: block;
-
-  color: #00d4ff;
-
-  font-weight: 700;
-
-  font-size: 1.2em;
-
-  font-family: Consolas, monospace;
-}
-
-body {
-  background: linear-gradient(135deg, #0f0f0f 0%, #1a1a2e 100%);
-  color: #e0e0e0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-    sans-serif;
-  line-height: 1.6;
-  min-height: 100vh;
-}
-
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 12px;
-}
-
-/* HEADER */
-.header {
-  margin-bottom: 10px;
-  border-bottom: 1px solid #00d4ff;
-  padding-bottom: 6px;
-}
-
-.header h3 {
-  font-size: 16px;
-  color: #00d4ff;
-}
-
-.header h1 {
-  font-size: 2.5em;
-  background: linear-gradient(135deg, #00d4ff, #0099cc);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  margin-bottom: 8px;
-  font-weight: 700;
-}
-
-.header .subtitle {
-  color: #888;
-  font-size: 0.95em;
-  font-weight: 300;
-  letter-spacing: 0.5px;
-}
-
-/* SECTIONS */
-.section-title {
-  font-size: 1.2em;
-  color: #00d4ff;
-  margin-bottom: 2px;
-  margin-top: 0;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-/* CONTROLS SECTION */
-.controls-section {
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(0, 212, 255, 0.2);
-  border-radius: 12px;
-  padding: 10px;
-  margin-bottom: 15px;
-  backdrop-filter: blur(10px);
-}
-
-.toolbar {
-  display: flex;
-  gap: 6px;
-  margin-bottom: 8px;
-  align-items: center;
-}
-
-.btn {
-  padding: 4px 8px;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 12px;
-  font-weight: 500;
-  transition: all 0.3s ease;
-  display: flex;
-  align-items: center;
-  gap: 3px;
-  white-space: nowrap;
-}
-
-.btn-icon {
-  font-size: 1.1em;
-}
-
-.btn-primary {
-  background: linear-gradient(135deg, #00d4ff, #0099cc);
-  color: #000;
-  font-weight: 600;
-}
-
-.btn-primary:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 20px rgba(0, 212, 255, 0.4);
-}
-
-.btn-primary:active {
-  transform: translateY(0);
-}
-
-.btn-secondary {
-  background: rgba(100, 150, 180, 0.2);
-  color: #e0e0e0;
-  border: 1px solid rgba(0, 212, 255, 0.3);
-}
-
-.btn-secondary:hover {
-  background: rgba(100, 150, 180, 0.3);
-  border-color: rgba(0, 212, 255, 0.6);
-  transform: translateY(-2px);
-}
-
-.btn-accent {
-  background: rgba(76, 175, 80, 0.2);
-  color: #4caf50;
-  border: 1px solid rgba(76, 175, 80, 0.5);
-}
-
-.btn-accent:hover {
-  background: rgba(76, 175, 80, 0.3);
-  border-color: #4caf50;
-  transform: translateY(-2px);
-}
-
-/* CONTROLS GRID */
-.controls-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 20px;
-}
-
-.control-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.control-group label {
-  font-size: 0.8em;
-  color: #b0b0b0;
-  font-weight: 500;
-}
-
-.input-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-input[type="range"] {
-  background: rgba(37, 37, 38, 0.8);
-  color: #00d4ff;
-  width: 100px;
-  transition: all 0.3s ease;
-  height: 5px;
-}
-
-input[type="number"] {
-    color: rgb(0, 212, 255);
-    font-size: 0.8em;
-    width: 60px;
-    background: rgba(37, 37, 38, 0.8);
-    border-width: 1px;
-    border-style: solid;
-    border-color: rgba(0, 212, 255, 0.3);
-    border-image: initial;
-    padding: 5px 6px;
-    border-radius: 6px;
-    transition: all 0.3s ease;
-}
-
-input[type="range"]:focus, input[type="number"]:focus  {
-  outline: none;
-  border-color: #00d4ff;
-  box-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
-  background: rgba(37, 37, 38, 1);
-}
-
-.input-hint {
-  color: #666;
-  font-size: 0.85em;
-}
-
-/* CANVAS SECTION */
-.canvas-section {
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid rgba(0, 212, 255, 0.2);
-  border-radius: 12px;
-  padding: 10px;
-  margin-bottom: 10px;
-}
-
-.canvas {
-  border: 2px solid #00d4ff;
-  border-radius: 8px;
-  background: #0a0a0a;
-  display: block;
-  margin-top: 15px;
-  box-shadow: 0 0 20px rgba(0, 212, 255, 0.1);
-  width: stretch;
-}
-
-/* TEMPLATE SECTION */
-.template-section {
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid rgba(0, 212, 255, 0.2);
-  border-radius: 12px;
-  padding: 10px;
-  margin-bottom: 10px;
-  margin-top: 10px;
-}
-
-.template-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 20px;
-}
-
-.template-info {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.template-info p {
-  font-size: 0.95em;
-  color: #b0b0b0;
-}
-
-.template-status {
-  color: #4caf50;
-  font-size: small;
-}
-
-.template-preview {
-  border: 2px solid #00d4ff;
-  border-radius: 8px;
-  width: 130px;
-  max-width: 100%;
-  height: 130px;
-  max-height: 150px;
-  object-fit: contain;
-  background: #0a0a0a;
-  box-shadow: 0 0 20px rgba(0, 212, 255, 0.1);
-  display: none;
-  margin-top: 15px;
-  margin-bottom: 15px;
-  cursor: zoom-in;
-}
-
-.template-preview[src]:not([src=""]) {
-  display: block;
-}
-
-/* RESULTS SECTION */
-.results-section {
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid rgba(0, 212, 255, 0.2);
-  border-radius: 12px;
-  padding: 10px;
-}
-
-/* RESULTS GRID */
-.results-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
-  gap: 12px;
-}
-
-.result-card {
-  background: rgba(0, 212, 255, 0.08);
-  border: 1px solid rgba(0, 212, 255, 0.3);
-  border-radius: 8px;
-  padding: 4px;
-  min-height: 50px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  transition: all 0.3s ease;
-  text-align: center;
-}
-
-.result-card:hover {
-  background: rgba(0, 212, 255, 0.12);
-  border-color: rgba(0, 212, 255, 0.5);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.15);
-}
-
-.result-label {
-  color: #888;
-  font-size: 0.8em;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.result-value {
-  color: #00d4ff;
-  font-weight: 700;
-  font-size: 0.8em;
-  font-family: "Courier New", monospace;
-}
-
-#matchResult {
-  padding: 12px;
-  min-height: 157px;
-  max-height: 300px;
-  overflow-y: auto;
-  max-width: max-content;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(0, 212, 255, 0.2);
-  border-radius: 8px;
-  font-family: Consolas, monospace;
-  white-space: pre-line;
-  font-size: 0.8em;
-  border-color: rgb(76, 175, 79);
-}
-
-#matchResult:not(:empty) {
-  background: rgba(76, 175, 80, 0.1);
-  border-color: rgb(76, 175, 79);
-  color: #e0e0e0;
-}
-
-/* RESPONSIVE */
-@media (max-width: 768px) {
-  .container {
-    padding: 12px;
-  }
-
-  .header h1 {
-    font-size: 1.8em;
-  }
-
-  .toolbar {
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  .btn {
-    width: 100%;
-    justify-content: center;
-  }
-
-  .controls-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .template-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* SCROLLBAR STYLING */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: rgba(37, 37, 38, 0.5);
-  border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: rgba(0, 212, 255, 0.4);
-  border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 212, 255, 0.6);
-}
-
-.capture-layout {
-  display: grid;
-  grid-template-columns: 1fr 280px;
-  gap: 16px;
-}
-
-.capture-panel {
-  flex: 1;
-}
-
-.result-panel {
-  width: 250px;
-  flex-shrink: 0;
-}
-
-
-.image-modal {
-  display: none;
-  position: fixed;
-  inset: 0;
-  background:
-    rgba(0,0,0,0.8);
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-}
-
-.image-modal img {
-  max-width: 90vw;
-  max-height: 90vh;
-}
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.match-summary {
+    margin-top: 10px;
+}
+
+.match-metric {
+    text-align: center;
+
+    padding: 10px 0;
+}
+
+.match-metric:last-child {
+    border-bottom: none;
+}
+
+.metric-label {
+    display: block;
+
+    color: #888;
+
+    font-size: 0.75em;
+
+    text-transform: uppercase;
+
+    letter-spacing: 1px;
+
+    margin-bottom: 4px;
+}
+
+.metric-value {
+    display: block;
+
+    color: #00d4ff;
+
+    font-weight: 700;
+
+    font-size: 1.2em;
+
+    font-family: Consolas, monospace;
+}
+
+body {
+    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a2e 100%);
+    color: #e0e0e0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    line-height: 1.6;
+    min-height: 100vh;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 12px;
+}
+
+/* HEADER */
+.header {
+    margin-bottom: 10px;
+    border-bottom: 1px solid #00d4ff;
+    padding-bottom: 6px;
+}
+
+.header h3 {
+    font-size: 16px;
+    color: #00d4ff;
+}
+
+.header h1 {
+    font-size: 2.5em;
+    background: linear-gradient(135deg, #00d4ff, #0099cc);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 8px;
+    font-weight: 700;
+}
+
+.header .subtitle {
+    color: #888;
+    font-size: 0.95em;
+    font-weight: 300;
+    letter-spacing: 0.5px;
+}
+
+/* SECTIONS */
+.section-title {
+    font-size: 1.2em;
+    color: #00d4ff;
+    margin-bottom: 2px;
+    margin-top: 0;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+/* CONTROLS SECTION */
+.controls-section {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(0, 212, 255, 0.2);
+    border-radius: 12px;
+    padding: 10px;
+    margin-bottom: 15px;
+    backdrop-filter: blur(10px);
+}
+
+.toolbar {
+    display: flex;
+    gap: 6px;
+    margin-bottom: 8px;
+    align-items: center;
+}
+
+.btn {
+    padding: 4px 8px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    white-space: nowrap;
+}
+
+.btn-icon {
+    font-size: 1.1em;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #00d4ff, #0099cc);
+    color: #000;
+    font-weight: 600;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(0, 212, 255, 0.4);
+}
+
+.btn-primary:active {
+    transform: translateY(0);
+}
+
+.btn-secondary {
+    background: rgba(100, 150, 180, 0.2);
+    color: #e0e0e0;
+    border: 1px solid rgba(0, 212, 255, 0.3);
+}
+
+.btn-secondary:hover {
+    background: rgba(100, 150, 180, 0.3);
+    border-color: rgba(0, 212, 255, 0.6);
+    transform: translateY(-2px);
+}
+
+.btn-accent {
+    background: rgba(76, 175, 80, 0.2);
+    color: #4caf50;
+    border: 1px solid rgba(76, 175, 80, 0.5);
+}
+
+.btn-accent:hover {
+    background: rgba(76, 175, 80, 0.3);
+    border-color: #4caf50;
+    transform: translateY(-2px);
+}
+
+/* CONTROLS GRID */
+.controls-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+}
+
+.control-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.control-group label {
+    font-size: 0.8em;
+    color: #b0b0b0;
+    font-weight: 500;
+}
+
+.input-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+input[type='range'] {
+    background: rgba(37, 37, 38, 0.8);
+    color: #00d4ff;
+    width: 100px;
+    transition: all 0.3s ease;
+    height: 5px;
+}
+
+input[type='number'] {
+    color: rgb(0, 212, 255);
+    font-size: 0.8em;
+    width: 60px;
+    background: rgba(37, 37, 38, 0.8);
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(0, 212, 255, 0.3);
+    border-image: initial;
+    padding: 5px 6px;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+}
+
+input[type='range']:focus,
+input[type='number']:focus {
+    outline: none;
+    border-color: #00d4ff;
+    box-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
+    background: rgba(37, 37, 38, 1);
+}
+
+.input-hint {
+    color: #666;
+    font-size: 0.85em;
+}
+
+/* CANVAS SECTION */
+.canvas-section {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(0, 212, 255, 0.2);
+    border-radius: 12px;
+    padding: 10px;
+    margin-bottom: 10px;
+}
+
+.canvas {
+    border: 2px solid #00d4ff;
+    border-radius: 8px;
+    background: #0a0a0a;
+    display: block;
+    margin-top: 15px;
+    box-shadow: 0 0 20px rgba(0, 212, 255, 0.1);
+    width: stretch;
+}
+
+/* TEMPLATE SECTION */
+.template-section {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(0, 212, 255, 0.2);
+    border-radius: 12px;
+    padding: 10px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+}
+
+.template-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+}
+
+.template-info {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.template-info p {
+    font-size: 0.95em;
+    color: #b0b0b0;
+}
+
+.template-status {
+    color: #4caf50;
+    font-size: small;
+}
+
+.template-preview {
+    border: 2px solid #00d4ff;
+    border-radius: 8px;
+    width: 130px;
+    max-width: 100%;
+    height: 130px;
+    max-height: 150px;
+    object-fit: contain;
+    background: #0a0a0a;
+    box-shadow: 0 0 20px rgba(0, 212, 255, 0.1);
+    display: none;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    cursor: zoom-in;
+}
+
+.template-preview[src]:not([src='']) {
+    display: block;
+}
+
+/* RESULTS SECTION */
+.results-section {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(0, 212, 255, 0.2);
+    border-radius: 12px;
+    padding: 10px;
+}
+
+/* RESULTS GRID */
+.results-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+    gap: 12px;
+}
+
+.result-card {
+    background: rgba(0, 212, 255, 0.08);
+    border: 1px solid rgba(0, 212, 255, 0.3);
+    border-radius: 8px;
+    padding: 4px;
+    min-height: 50px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    transition: all 0.3s ease;
+    text-align: center;
+}
+
+.result-card:hover {
+    background: rgba(0, 212, 255, 0.12);
+    border-color: rgba(0, 212, 255, 0.5);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.15);
+}
+
+.result-label {
+    color: #888;
+    font-size: 0.8em;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.result-value {
+    color: #00d4ff;
+    font-weight: 700;
+    font-size: 0.8em;
+    font-family: 'Courier New', monospace;
+}
+
+#matchResult {
+    padding: 12px;
+    min-height: 157px;
+    max-height: 300px;
+    overflow-y: auto;
+    max-width: max-content;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(0, 212, 255, 0.2);
+    border-radius: 8px;
+    font-family: Consolas, monospace;
+    white-space: pre-line;
+    font-size: 0.8em;
+    border-color: rgb(76, 175, 79);
+}
+
+#matchResult:not(:empty) {
+    background: rgba(76, 175, 80, 0.1);
+    border-color: rgb(76, 175, 79);
+    color: #e0e0e0;
+}
+
+/* RESPONSIVE */
+@media (max-width: 768px) {
+    .container {
+        padding: 12px;
+    }
+
+    .header h1 {
+        font-size: 1.8em;
+    }
+
+    .toolbar {
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .btn {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .controls-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .template-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* SCROLLBAR STYLING */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(37, 37, 38, 0.5);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(0, 212, 255, 0.4);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 212, 255, 0.6);
+}
+
+.capture-layout {
+    display: grid;
+    grid-template-columns: 1fr 280px;
+    gap: 16px;
+}
+
+.capture-panel {
+    flex: 1;
+}
+
+.result-panel {
+    width: 250px;
+    flex-shrink: 0;
+}
+
+.image-modal {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.8);
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+.image-modal img {
+    max-width: 90vw;
+    max-height: 90vh;
+}