hz

components/espressif__tinyusb/examples/device/webusb_serial/website/style.css

@@ -0,0 +1,296 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Reset default margins and make html, body full height */
+html,
+body {
+  height: 100%;
+  font-family: sans-serif;
+  background: #f5f5f5;
+  color: #333;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+/* Header row styling */
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5em 1em;
+  gap: 1em;
+  flex-shrink: 0;
+}
+
+h1,
+h2 {
+  margin: 0;
+}
+
+.app-title {
+  flex-grow: 1;
+}
+
+.btn-theme {
+  background-color: #6b6b6b;
+  color: #fff;
+}
+
+.github-link {
+  font-weight: 600;
+}
+
+/* Main is flex column */
+main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+}
+
+/* Controls top row in main*/
+.controls-section,
+.status-section {
+  padding: 1rem;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+/* Container for the two columns */
+.io-container {
+  display: flex;
+  flex: 1;
+  /* fill remaining vertical space */
+  width: 100%;
+  overflow: hidden;
+}
+
+/* Both columns flex equally and full height */
+.column {
+  flex: 1;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.heading-with-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.command-history-entry {
+  all: unset;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  background: none;
+  border: none;
+  border-bottom: 1px solid #ccc;
+  /* light gray line */
+  padding: 0.5rem 1rem;
+  margin: 0;
+  text-align: left;
+  cursor: pointer;
+}
+
+.command-history-entry:hover {
+  background-color: #f0f0f0;
+}
+
+.monospaced {
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 1rem;
+  color: #333;
+}
+
+.scrollbox-wrapper {
+  position: relative;
+  padding: 0.5rem;
+  flex: 1;
+
+  display: block;
+  overflow: hidden;
+}
+
+.scrollbox {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow-y: auto;
+  overflow-x: auto;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  background-color: #fff;
+  border-radius: 0.5rem;
+  white-space: nowrap;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.send-container {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+
+.send-mode-command {
+  background-color: lightgray;
+  /* light-gray */
+}
+
+.send-mode-instant {
+  background-color: blue;
+}
+
+.btn {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  border: none;
+  border-radius: 0.3rem;
+  cursor: pointer;
+}
+
+.good {
+  background-color: #2ecc71;
+  /* green */
+  color: #fff;
+}
+
+.danger {
+  background-color: #e74c3c;
+  /* red */
+  color: #fff;
+}
+
+.input {
+  width: 100%;
+  padding: 12px 16px;
+  font-size: 1rem;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  border: 2px solid #ddd;
+  border-radius: 8px;
+  background-color: #fafafa;
+  color: #333;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.input::placeholder {
+  color: #aaa;
+  font-style: italic;
+}
+
+.input:focus {
+  border-color: #0078d7;
+  box-shadow: 0 0 6px rgba(0, 120, 215, 0.5);
+  background-color: #fff;
+}
+
+.resizer {
+  width: 5px;
+  background-color: #ccc;
+  cursor: col-resize;
+  height: 100%;
+}
+
+/*
+================================
+Togglable Dark Mode
+================================
+*/
+/* This class will be added to the body element by JavaScript */
+body.dark-mode {
+  /* Invert base background and text colors */
+  background: #1e1e1e;
+  color: #d4d4d4;
+}
+
+body.dark-mode input[type="checkbox"] {
+  border-color: #888;
+  accent-color: #2e2e2e;
+  opacity: 0.8;
+}
+
+body.dark-mode .btn-theme {
+  background-color: #b0b0b0;
+  color: #000;
+}
+
+body.dark-mode .github-link {
+  color: #58a6ff;
+}
+
+body.dark-mode .resizer {
+  background-color: #444;
+}
+
+body.dark-mode .input {
+  background-color: #3c3c3c;
+  color: #f0f0f0;
+  border: 2px solid #555;
+}
+
+body.dark-mode .input::placeholder {
+  color: #888;
+}
+
+body.dark-mode .input:focus {
+  background-color: #2a2d2e;
+  border-color: #0078d7;
+}
+
+body.dark-mode .scrollbox {
+  background-color: #252526;
+  scrollbar-color: #555 #2e2e2e;
+  border: 1px solid #444;
+}
+
+body.dark-mode .monospaced {
+  color: #d4d4d4;
+}
+
+body.dark-mode .command-history-entry {
+  border-bottom: 1px solid #444;
+}
+
+body.dark-mode .command-history-entry:hover {
+  background-color: #3c3c3c;
+}
+
+body.dark-mode .send-mode-command {
+  background-color: #555;
+  color: #f5f5f5;
+}
+
+body.dark-mode select {
+  background-color: #3c3c3c;
+  color: #f0f0f0;
+  border: 2px solid #555;
+}
+
+body.dark-mode select:focus {
+  background-color: #2a2d2e;
+  border-color: #0078d7;
+  outline: none;
+}
+
+body.dark-mode option {
+  background-color: #3c3c3c;
+  color: #f0f0f0;
+}