michael/Unraid-Navigator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compact U-Navigator UI

Browse Source
This commit is contained in:
Mikei386
2026-07-04 09:51:02 +02:00
parent 9a1d54ca88
commit cb4aee30cc
5 changed files with 120 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/styles.css
+117 -117
View File
@@ -11,7 +11,7 @@
background: var(--bg);
color: var(--text);
display: grid;
font: 14px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font: 12.5px/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
grid-template-rows: auto 1fr;
min-height: calc(100vh - 170px);
overflow: hidden;
@@ -43,8 +43,8 @@
color: var(--text);
cursor: pointer;
font: inherit;
min-height: 32px;
padding: 0 10px;
min-height: 28px;
padding: 0 8px;
}
.u-nav button:hover {
@@ -68,11 +68,11 @@
.u-nav button.icon {
align-items: center;
display: inline-flex;
height: 30px;
height: 26px;
justify-content: center;
min-height: 30px;
min-height: 26px;
padding: 0;
width: 24px;
width: 22px;
}
.u-nav .topbar {
@@ -80,14 +80,14 @@
background: var(--surface);
border-bottom: 1px solid var(--line);
display: flex;
gap: 16px;
gap: 12px;
justify-content: space-between;
padding: 12px 16px;
padding: 9px 12px;
}
.u-nav .topbar h1 {
color: var(--text);
font-size: 18px;
font-size: 16px;
line-height: 1;
margin: 0 0 4px;
}
@@ -101,7 +101,7 @@
.u-nav .toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
gap: 6px;
}
.u-nav .toolbar button.active {
@@ -122,8 +122,8 @@
box-shadow: var(--shadow);
display: grid;
grid-template-rows: auto 1fr;
min-height: 280px;
min-width: 320px;
min-height: 240px;
min-width: 280px;
overflow: hidden;
position: absolute;
}
@@ -142,10 +142,10 @@
border-bottom: 1px solid var(--line);
cursor: move;
display: grid;
gap: 8px;
gap: 6px;
grid-template-columns: 1fr auto;
min-height: 40px;
padding: 5px 8px 5px 12px;
min-height: 34px;
padding: 4px 6px 4px 10px;
user-select: none;
}
@@ -157,13 +157,13 @@
.u-nav .window-actions {
display: flex;
gap: 6px;
gap: 5px;
}
.u-nav .window-body {
min-height: 0;
overflow: auto;
padding: 10px;
padding: 8px;
}
.u-nav .resize-handle {
@@ -190,8 +190,8 @@
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 10px;
gap: 4px;
margin-bottom: 8px;
}
.u-nav .pathbar input:not(.upload-input) {
@@ -200,15 +200,15 @@
border-radius: 6px;
color: var(--text);
font: inherit;
min-height: 32px;
min-height: 28px;
min-width: 180px;
padding: 0 9px;
padding: 0 8px;
flex: 1 1 220px;
}
.u-nav .pathbar .up-button {
flex: 0 0 24px;
font-size: 18px;
font-size: 15px;
line-height: 1;
}
@@ -224,7 +224,7 @@
.u-nav .drop-zone {
border: 1px dashed transparent;
border-radius: 8px;
min-height: 180px;
min-height: 150px;
}
.u-nav .drop-zone.drag-over {
@@ -275,7 +275,7 @@
background: var(--surface) !important;
border-bottom: 1px solid var(--line);
color: var(--text) !important;
padding: 8px 7px;
padding: 6px 6px;
text-align: left;
vertical-align: middle;
}
@@ -283,7 +283,7 @@
.u-nav .file-table th {
background: var(--surface-2) !important;
color: var(--muted);
font-size: 12px;
font-size: 11px;
font-weight: 600;
}
@@ -330,9 +330,9 @@
.u-nav .name-cell {
align-items: center;
display: flex;
gap: 8px;
gap: 6px;
-webkit-user-drag: none;
min-width: 150px;
min-width: 130px;
user-select: none;
}
@@ -341,19 +341,19 @@
border-radius: 999px;
color: var(--muted);
display: inline-flex;
font-size: 12px;
font-size: 11px;
justify-content: center;
min-width: 58px;
padding: 2px 8px;
min-width: 50px;
padding: 1px 7px;
-webkit-user-drag: none;
user-select: none;
}
.u-nav .icon-grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
padding: 4px;
gap: 8px;
grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
padding: 2px;
}
.u-nav .icon-item {
@@ -363,11 +363,11 @@
border-radius: 8px;
color: var(--text);
display: grid;
gap: 6px;
grid-template-rows: auto minmax(32px, auto) auto;
gap: 5px;
grid-template-rows: auto minmax(28px, auto) auto;
justify-items: center;
min-height: 126px;
padding: 10px 8px;
min-height: 108px;
padding: 8px 6px;
text-align: center;
width: 100%;
}
@@ -393,9 +393,9 @@
.u-nav .file-icon {
display: block;
height: 52px;
height: 46px;
position: relative;
width: 64px;
width: 56px;
}
.u-nav .file-icon.directory {
@@ -403,8 +403,8 @@
border: 1px solid color-mix(in srgb, var(--accent) 78%, #5b2b12);
border-radius: 7px 7px 6px 6px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 5px 12px rgba(24, 34, 45, 0.14);
height: 40px;
margin-top: 10px;
height: 34px;
margin-top: 8px;
}
.u-nav .file-icon.directory::before {
@@ -413,11 +413,11 @@
border-bottom: 0;
border-radius: 6px 6px 0 0;
content: "";
height: 12px;
height: 10px;
left: 5px;
position: absolute;
top: -9px;
width: 27px;
top: -8px;
width: 24px;
}
.u-nav .file-icon.directory::after {
@@ -438,8 +438,8 @@
border: 1px solid var(--line);
border-radius: 6px;
box-shadow: 0 5px 12px rgba(24, 34, 45, 0.12);
height: 50px;
width: 42px;
height: 44px;
width: 36px;
}
.u-nav .file-icon.file::before,
@@ -450,33 +450,33 @@
border-bottom: 1px solid var(--line);
border-radius: 0 5px 0 4px;
content: "";
height: 13px;
height: 11px;
position: absolute;
right: -1px;
top: -1px;
width: 13px;
width: 11px;
}
.u-nav .file-icon.file::after,
.u-nav .file-icon.symlink::after,
.u-nav .file-icon.other::after {
background:
linear-gradient(var(--muted), var(--muted)) 0 0 / 22px 2px no-repeat,
linear-gradient(var(--muted), var(--muted)) 0 9px / 26px 2px no-repeat,
linear-gradient(var(--muted), var(--muted)) 0 18px / 18px 2px no-repeat;
linear-gradient(var(--muted), var(--muted)) 0 0 / 18px 2px no-repeat,
linear-gradient(var(--muted), var(--muted)) 0 8px / 22px 2px no-repeat,
linear-gradient(var(--muted), var(--muted)) 0 16px / 15px 2px no-repeat;
content: "";
height: 22px;
left: 8px;
height: 20px;
left: 7px;
opacity: 0.58;
position: absolute;
top: 18px;
width: 26px;
top: 16px;
width: 22px;
}
.u-nav .icon-name {
color: var(--text);
display: -webkit-box;
font-size: 13px;
font-size: 12px;
line-height: 1.25;
max-width: 100%;
overflow: hidden;
@@ -487,7 +487,7 @@
.u-nav .icon-meta {
color: var(--muted);
font-size: 12px;
font-size: 11px;
}
.u-nav .context-menu {
@@ -496,8 +496,8 @@
border-radius: 8px;
box-shadow: var(--shadow);
display: grid;
min-width: 190px;
padding: 6px;
min-width: 170px;
padding: 5px;
position: absolute;
z-index: 100000;
}
@@ -520,7 +520,7 @@
display: flex;
inset: 0;
justify-content: center;
padding: 18px;
padding: 14px;
position: absolute;
z-index: 100020;
}
@@ -532,11 +532,11 @@
box-shadow: var(--shadow);
color: var(--text);
display: grid;
max-height: min(640px, 100%);
max-height: min(580px, 100%);
max-width: 100%;
min-width: min(420px, 100%);
min-width: min(380px, 100%);
overflow: hidden;
width: 460px;
width: 420px;
}
.u-nav .permissions-modal header,
@@ -544,9 +544,9 @@
align-items: center;
background: var(--surface-2);
display: flex;
gap: 8px;
gap: 6px;
justify-content: space-between;
padding: 8px 10px 8px 12px;
padding: 6px 8px 6px 10px;
}
.u-nav .permissions-modal header {
@@ -560,9 +560,9 @@
.u-nav .modal-body {
display: grid;
gap: 9px;
gap: 7px;
overflow: auto;
padding: 12px;
padding: 10px;
}
.u-nav .permissions-modal input[type="text"],
@@ -572,8 +572,8 @@
border-radius: 6px;
color: var(--text);
font: inherit;
min-height: 32px;
padding: 0 9px;
min-height: 28px;
padding: 0 8px;
width: 100%;
}
@@ -582,7 +582,7 @@
}
.u-nav .conflict-modal {
width: 520px;
width: 460px;
}
.u-nav .conflict-details {
@@ -590,10 +590,10 @@
border: 1px solid var(--line);
border-radius: 6px;
display: grid;
gap: 8px 12px;
gap: 6px 10px;
grid-template-columns: auto minmax(0, 1fr);
margin: 0;
padding: 10px;
padding: 8px;
}
.u-nav .conflict-details dt {
@@ -609,14 +609,14 @@
.u-nav .check-row {
align-items: center;
display: flex;
gap: 9px;
gap: 7px;
}
.u-nav .check-row input {
accent-color: var(--accent);
height: 18px;
height: 16px;
margin: 0;
width: 18px;
width: 16px;
}
.u-nav .check-row.disabled {
@@ -628,10 +628,10 @@
border: 1px solid var(--line);
border-radius: 6px;
display: grid;
gap: 8px;
gap: 6px;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 0;
padding: 10px;
padding: 8px;
}
.u-nav .permission-scope legend {
@@ -644,21 +644,21 @@
.u-nav .permission-scope label {
align-items: center;
display: flex;
gap: 6px;
gap: 5px;
white-space: nowrap;
}
.u-nav .permission-scope input {
accent-color: var(--accent);
height: 17px;
height: 15px;
margin: 0;
width: 17px;
width: 15px;
}
.u-nav .field-row {
align-items: center;
display: grid;
gap: 8px;
gap: 6px;
grid-template-columns: max-content minmax(0, 1fr);
}
@@ -673,9 +673,9 @@
box-shadow: var(--shadow);
display: grid;
grid-template-rows: auto minmax(0, 1fr);
max-height: min(520px, calc(100% - 78px));
min-height: 220px;
min-width: 320px;
max-height: min(480px, calc(100% - 68px));
min-height: 190px;
min-width: 280px;
overflow: hidden;
position: absolute;
transform-origin: top right;
@@ -697,14 +697,14 @@
border-bottom: 1px solid var(--line);
display: flex;
justify-content: space-between;
min-height: 40px;
padding: 5px 8px 5px 12px;
min-height: 34px;
padding: 4px 6px 4px 10px;
}
.u-nav .transfer-panel-body {
min-height: 0;
overflow: auto;
padding: 10px;
padding: 8px;
}
.u-nav .settings-panel {
@@ -713,11 +713,11 @@
border: 1px solid var(--line);
border-radius: 8px;
box-shadow: var(--shadow);
min-width: 320px;
min-width: 280px;
overflow: hidden;
position: absolute;
transform-origin: top right;
width: min(380px, calc(100% - 32px));
width: min(340px, calc(100% - 32px));
z-index: 10010;
}
@@ -727,23 +727,23 @@
border-bottom: 1px solid var(--line);
display: flex;
justify-content: space-between;
min-height: 40px;
padding: 5px 8px 5px 12px;
min-height: 34px;
padding: 4px 6px 4px 10px;
}
.u-nav .settings-panel-body {
display: grid;
gap: 2px;
padding: 8px;
padding: 6px;
}
.u-nav .setting-row {
align-items: center;
border-radius: 6px;
display: grid;
gap: 14px;
gap: 8px;
grid-template-columns: 1fr auto;
padding: 10px;
padding: 8px;
}
.u-nav .setting-row:hover {
@@ -758,8 +758,8 @@
.u-nav .setting-row input {
accent-color: var(--accent);
height: 18px;
width: 18px;
height: 16px;
width: 16px;
}
@keyframes transfer-slide-down {
@@ -794,9 +794,9 @@
.u-nav .debug-log {
border-top: 1px solid var(--line);
display: grid;
gap: 8px;
margin-top: 14px;
padding-top: 12px;
gap: 6px;
margin-top: 10px;
padding-top: 10px;
}
.u-nav .debug-log header {
@@ -809,20 +809,20 @@
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 8px;
padding: 7px;
}
.u-nav .debug-entry time {
color: var(--muted);
display: block;
font-size: 12px;
font-size: 11px;
}
.u-nav .debug-entry pre {
color: var(--text);
font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
margin: 6px 0 0;
max-height: 140px;
font: 11px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
margin: 5px 0 0;
max-height: 120px;
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
@@ -831,7 +831,7 @@
.u-nav .job {
border: 1px solid var(--line);
border-radius: 8px;
padding: 10px;
padding: 8px;
}
.u-nav .job .muted {
@@ -845,8 +845,8 @@
.u-nav .progress {
background: var(--surface-2);
border-radius: 999px;
height: 8px;
margin-top: 8px;
height: 6px;
margin-top: 6px;
overflow: hidden;
}
@@ -858,7 +858,7 @@
.u-nav .properties dl {
display: grid;
gap: 8px 14px;
gap: 6px 12px;
grid-template-columns: max-content 1fr;
margin: 0;
}
@@ -874,7 +874,7 @@
.u-nav .preview-body {
display: grid;
gap: 10px;
gap: 8px;
grid-template-rows: auto minmax(0, 1fr);
}
@@ -883,9 +883,9 @@
border-bottom: 1px solid var(--line);
color: var(--muted);
display: grid;
gap: 10px;
gap: 8px;
grid-template-columns: auto minmax(0, 1fr) auto;
padding-bottom: 8px;
padding-bottom: 6px;
}
.u-nav .preview-nav {
@@ -911,11 +911,11 @@
border: 1px solid var(--line);
border-radius: 6px;
color: var(--text);
font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
margin: 0;
min-height: 0;
overflow: auto;
padding: 10px;
padding: 8px;
white-space: pre;
}
@@ -931,7 +931,7 @@
border: 1px solid var(--line);
border-radius: 6px;
overflow: auto;
padding: 12px;
padding: 10px;
}
.u-nav .preview-rendered h1,
@@ -946,7 +946,7 @@
background: var(--surface-2);
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
padding: 1px 4px;
padding: 1px 3px;
}
.u-nav .preview-table-wrap {
@@ -963,7 +963,7 @@
.u-nav .preview-table td {
border-bottom: 1px solid var(--line);
border-right: 1px solid var(--line);
padding: 6px 8px;
padding: 5px 7px;
white-space: nowrap;
}
@@ -975,7 +975,7 @@
display: flex;
justify-content: center;
overflow: auto;
padding: 10px;
padding: 8px;
}
.u-nav .preview-media img,