first commit

xterminal/demo/styles.css

@@ -0,0 +1,86 @@
+@import "../theme/index.css";
+
+:root {
+    --tc-toolbar-height: calc(48px + env(safe-area-inset-bottom));
+}
+
+*, *::after, *::before {
+    box-sizing: border-box;
+}
+html, body {
+    padding: 0;
+    margin: 0;
+    height: 100%;
+}
+#demo-shell {
+    height: 100vh;
+    height: 100dvh;
+    display: flex;
+    flex-direction: column;
+}
+
+#app {
+    flex: 1 1 0;
+    min-height: 0;
+}
+
+.tc-touch-tools {
+    display: none;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: var(--tc-bottom-inset, 0px);
+    height: var(--tc-toolbar-height);
+    z-index: 50;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 4px;
+    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    /* Transparent frosty look */
+    background: rgba(30,30,30, 0.6);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-top: 1px solid rgba(80,80,80, 0.4);
+    touch-action: manipulation;
+    user-select: none;
+}
+
+.tc-touch-tools.is-hidden {
+    display: none !important;
+}
+
+.tc-touch-tools::-webkit-scrollbar {
+    display: none;
+}
+
+.tc-key-btn {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px;
+    height: 36px;
+    padding: 0 10px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 6px;
+    background: rgba(50, 50, 50, 0.8);
+    color: #e5e5e5;
+    font-size: 14px;
+    font-family: inherit;
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.tc-key-btn:active {
+    background: rgba(100, 100, 100, 0.8);
+}
+
+@media (pointer: coarse) {
+    .tc-touch-tools:not(.is-hidden) {
+        display: flex;
+    }
+}