Files
gniza4linux/tui/gniza.tcss
shuki c6b5c38cf6 Fix button overflow on mobile: allow horizontal scrolling
Replace overflow:hidden with overflow-x:auto on button rows so
buttons can be scrolled to on narrow screens instead of being
clipped off-screen.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-07 06:26:49 +02:00

518 lines
7.0 KiB
Plaintext

/* gniza TUI theme */
Screen {
background: $surface;
}
#screen-title {
text-style: bold;
color: #00cc00;
padding: 1 0;
text-align: center;
}
/* Main menu */
#main-layout {
width: 100%;
height: 1fr;
align: center middle;
}
#logo {
width: auto;
min-width: 40;
height: auto;
padding: 1 3;
content-align: center middle;
}
#menu-list {
width: 1fr;
max-width: 40;
min-width: 25;
height: auto;
max-height: 22;
margin: 1 2 0 2;
}
.screen-with-docs {
height: 1fr;
}
/* Data tables */
DataTable {
height: auto;
min-height: 5;
max-height: 16;
margin: 1 0;
}
/* Form screens */
#target-edit,
#remote-edit,
#schedule-edit,
#settings-screen,
#schedule-screen,
#backup-screen,
#restore-screen,
#retention-screen,
#snapshots-screen,
#targets-screen,
#remotes-screen,
#running-tasks-screen,
#logs-screen {
padding: 1 2;
overflow-y: auto;
}
Input {
margin: 0 0 1 0;
}
Select {
margin: 0 0 1 0;
}
#settings-screen Input,
#settings-screen Select {
margin: 0;
}
#settings-screen Static {
margin: 1 0 0 0;
}
#settings-screen #screen-title {
margin: 0;
}
.settings-section {
height: auto;
padding: 1 2;
margin: 0 0 1 0;
}
#section-general {
border: round #6e54c9;
border-title-color: #ffffff;
border-title-background: #6e54c9;
}
#section-email {
border: round #00cc00;
border-title-color: #ffffff;
border-title-background: #00cc00;
}
#section-ssh {
border: round #e5c07b;
border-title-color: #1e1e2e;
border-title-background: #e5c07b;
}
#section-web {
border: round #61afef;
border-title-color: #ffffff;
border-title-background: #61afef;
}
.settings-section Static {
margin: 0;
}
.settings-section Input,
.settings-section Select {
margin: 0 0 1 0;
}
SelectionList {
height: auto;
max-height: 8;
margin: 0 0 1 0;
}
/* MySQL restore toggle */
#restore-mysql-row {
height: 3;
align: left middle;
margin: 0 0 1 0;
}
#restore-mysql-row Static {
width: auto;
height: 3;
content-align: left middle;
}
#restore-mysql-row Switch {
height: 3;
margin: 0 1;
}
/* Browse row */
#restore-dest-row,
#te-folders-row {
height: auto;
margin: 0 0 1 0;
}
#restore-dest-row Input,
#te-folders-row Input {
width: 1fr;
}
#restore-dest-row Button,
#te-folders-row Button {
width: auto;
min-width: 12;
margin: 0 0 0 1;
}
/* Button rows */
#backup-buttons,
#restore-buttons,
#ret-buttons,
#targets-buttons,
#remotes-buttons,
#rt-buttons,
#log-pager-buttons,
#logs-buttons,
#snapshots-buttons,
#sched-buttons,
#sched-edit-buttons,
#te-buttons,
#re-buttons,
#set-buttons {
height: auto;
margin: 1 0;
overflow-x: auto;
overflow-y: hidden;
}
#backup-buttons Button,
#restore-buttons Button,
#ret-buttons Button,
#targets-buttons Button,
#remotes-buttons Button,
#rt-buttons Button,
#log-pager-buttons Button,
#logs-buttons Button,
#snapshots-buttons Button,
#sched-buttons Button,
#sched-edit-buttons Button,
#te-buttons Button,
#re-buttons Button,
#set-buttons Button {
margin: 0 1 0 0;
min-width: 10;
}
#log-page-info {
width: auto;
padding: 0 1;
content-align: center middle;
}
/* Dialogs */
#confirm-dialog {
width: 80%;
max-width: 60;
height: auto;
padding: 2;
background: $panel;
border: thick $accent;
}
#cd-title {
text-style: bold;
color: #00cc00;
margin: 0 0 1 0;
}
#cd-message {
margin: 0 0 1 0;
}
#cd-buttons {
height: auto;
align: center middle;
}
#cd-buttons Button {
margin: 0 1 0 0;
}
/* Help modal */
HelpModal {
align: center middle;
}
#help-modal {
width: 90%;
max-width: 70;
height: 80%;
padding: 1 2;
background: $panel;
border: thick $accent;
}
#help-modal #help-close {
margin: 1 0 0 0;
width: auto;
}
/* Folder picker */
#folder-picker {
width: 90%;
max-width: 70;
height: 80%;
max-height: 35;
padding: 1;
background: $panel;
border: thick $accent;
}
#fp-title {
text-style: bold;
color: #00cc00;
margin: 0 0 1 0;
}
#fp-search-row {
height: auto;
margin: 0 0 1 0;
}
#fp-search-row Input {
width: 1fr;
}
#fp-search-row Button {
width: auto;
min-width: 6;
margin: 0 0 0 1;
}
#fp-tree, #fp-remote-tree {
height: 1fr;
}
#fp-new-row {
height: auto;
margin: 1 0 0 0;
}
#fp-new-row Input {
width: 1fr;
}
#fp-new-row Button {
width: auto;
min-width: 16;
margin: 0 0 0 1;
}
#fp-buttons {
height: auto;
margin: 1 0 0 0;
}
#fp-buttons Button {
margin: 0 1 0 0;
}
/* Operation log */
#op-log {
width: 90%;
max-width: 120;
height: 80%;
padding: 1;
background: $panel;
border: thick $accent;
}
#ol-title {
text-style: bold;
color: #00cc00;
margin: 0 0 1 0;
}
#ol-footer {
height: auto;
margin: 1 0 0 0;
}
#ol-spinner {
width: auto;
min-width: 20;
height: 3;
margin: 0 0 0 1;
content-align: left middle;
color: #00cc00;
}
#ol-log {
height: 1fr;
border: round $accent;
}
#ol-close {
margin: 0;
}
/* Snapshot browser */
#snapshot-browser {
width: 90%;
max-width: 120;
height: 80%;
padding: 1;
background: $panel;
border: thick $accent;
}
#sb-title {
text-style: bold;
color: #00cc00;
margin: 0 0 1 0;
}
#sb-tree {
height: 1fr;
border: round $accent;
}
#sb-buttons {
height: auto;
margin: 1 0 0 0;
}
#sb-buttons Button {
margin: 0 1 0 0;
}
/* Log viewer */
#log-viewer,
#rt-log-viewer {
height: 1fr;
min-height: 8;
border: round $accent;
margin: 1 0;
}
/* Progress bar */
#rt-progress {
margin: 0 0;
}
#rt-progress-label {
height: 1;
color: #00cc00;
}
/* Wizard */
#wizard {
width: 90%;
max-width: 60;
padding: 2;
}
#wizard Button {
width: 100%;
margin: 0 0 1 0;
}
#wizard-welcome {
margin: 0 0 1 0;
}
/* Switch row */
#te-switch-row {
height: auto;
align: left middle;
margin: 0 0 1 0;
}
Switch {
margin: 0 1;
}
.sched-switch-row {
height: 3;
align: left middle;
margin: 0;
}
.sched-switch-label {
width: 1fr;
height: 3;
content-align: left middle;
}
.section-label {
text-style: bold;
color: #00cc00;
margin: 1 0 0 0;
}
/* Base path browse row */
#re-base-row {
height: auto;
margin: 0 0 1 0;
}
#re-base-row Input {
width: 1fr;
}
#re-base-row Button {
width: auto;
min-width: 12;
margin: 0 0 0 1;
}
/* SSH key browse row */
#re-key-row {
height: auto;
margin: 0 0 1 0;
}
#re-key-row Input {
width: 1fr;
}
#re-key-row Button {
width: auto;
min-width: 12;
margin: 0 0 0 1;
}
/* File picker */
#file-picker {
width: 90%;
max-width: 70;
height: 80%;
max-height: 30;
padding: 1;
background: $panel;
border: thick $accent;
}
#fip-title {
text-style: bold;
color: #00cc00;
margin: 0 0 1 0;
}
#fip-tree {
height: 1fr;
}
#fip-buttons {
height: auto;
margin: 1 0 0 0;
}
#fip-buttons Button {
margin: 0 1 0 0;
}