Styling part one

css/tuivision.css

@@ -0,0 +1,208 @@
+/* TurboVision-inspired integration layer for TuiCSS.
+ * Keep changes template-owned (do not edit _vendor/tuicss).
+ */
+
+/* Base look */
+body.luxtools-tv {
+    min-height: 100vh;
+    color: #fff;
+    text-align: left;
+    padding-top: 34px; /* space for fixed top bar */
+}
+
+/* DokuWiki default template tends to assume dark-on-light; override minimal bits */
+body.luxtools-tv .dokuwiki {
+    color: inherit;
+}
+
+body.luxtools-tv a {
+    color: rgb(0, 255, 255);
+}
+
+/* Keep the existing centered/max-width layout */
+body.luxtools-tv #dokuwiki__site {
+    background: transparent;
+}
+
+/* --- Top bar --- */
+#dokuwiki__header {
+    margin: 0;
+}
+
+#luxtools__topbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 100;
+}
+
+#luxtools__topbar .luxtools__topbar-inner {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+#luxtools__topbar .luxtools__brand a {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    color: black;
+}
+
+#luxtools__topbar .luxtools__logo {
+    width: 18px;
+    height: 18px;
+    image-rendering: pixelated;
+}
+
+#luxtools__topbar .luxtools__title {
+    font-weight: bold;
+}
+
+#luxtools__topbar .luxtools__search {
+    margin-left: auto;
+    display: flex;
+    justify-content: flex-end;
+}
+
+/* Make the core search form look like TuiCSS input */
+#luxtools__topbar form.search {
+    margin: 0;
+}
+
+/* Trace should be inline in the bar (not centered, not blocky) */
+#luxtools__topbar .luxtools__trace {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 45vw;
+    color: black;
+}
+
+#luxtools__topbar .luxtools__trace .breadcrumbs {
+    display: inline;
+    margin: 0;
+}
+
+#luxtools__topbar .luxtools__trace a {
+    color: black;
+}
+
+#luxtools__topbar form.search input[type="text"],
+#luxtools__topbar form.search input#qsearch__in {
+    background-color: rgb(0, 0, 0);
+    color: white;
+    outline: 0;
+    border: none;
+    border-radius: 0;
+    padding: 2px 6px;
+    width: 100%;
+    max-width: 26em;
+}
+
+#luxtools__topbar form.search input[type="text"]:focus,
+#luxtools__topbar form.search input#qsearch__in:focus {
+    background-color: rgb(255, 255, 0);
+    color: black;
+}
+
+#luxtools__topbar form.search button,
+#luxtools__topbar form.search input[type="submit"] {
+    display: none;
+}
+
+#luxtools__topbar .luxtools__menus {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+/* Be resilient against generic "nav ul li { display:block }" rules */
+#luxtools__topbar ul,
+#luxtools__topbar li {
+    list-style: none;
+}
+
+#luxtools__topbar .luxtools__menus > li {
+    display: inline-block !important;
+}
+
+/* Keep dropdown menu vertical */
+#luxtools__topbar .tui-dropdown-content ul {
+    display: block;
+}
+
+#luxtools__topbar .tui-dropdown-content ul li {
+    display: block !important;
+}
+
+#luxtools__topbar .luxtools__menu {
+    user-select: none;
+}
+
+/* (trace styling moved above) */
+
+#luxtools__topbar .luxtools__dropdown-title {
+    margin: 6px;
+}
+
+/* --- Fieldsets around sidebar and page --- */
+.luxtools__sidebar-fieldset,
+.luxtools__page-fieldset {
+    margin: 0;
+}
+
+.luxtools__page-fieldset {
+    margin-bottom: 0;
+}
+
+/* Avoid double spacing from DokuWiki pads */
+#dokuwiki__content > .pad {
+    padding-top: 0;
+}
+
+/* --- Status bar --- */
+#dokuwiki__pagetools {
+    border: none;
+    background-color: rgb(168, 168, 168);
+}
+
+#dokuwiki__pagetools ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+#dokuwiki__pagetools ul li {
+    display: inline-flex !important;
+    margin: 0 0 0 10px;
+    padding: 2px 3px;
+}
+
+#dokuwiki__pagetools ul li a {
+    color: black;
+    text-decoration: none;
+    border-bottom: none;
+}
+
+#dokuwiki__pagetools ul li:active,
+#dokuwiki__pagetools ul li:hover {
+    background-color: rgb(0, 0, 168);
+}
+
+#dokuwiki__pagetools ul li:active a,
+#dokuwiki__pagetools ul li:hover a {
+    color: white;
+}
+
+.luxtools__hotkey {
+    margin-right: 4px;
+}