Files
tinyUSB/examples/device/webusb_serial/website/style.css
2025-07-29 16:22:02 +02:00

297 lines
4.6 KiB
CSS

* {
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;
}