Modernize explorer UI and add folder tree
This commit is contained in:
Mikei386
+266
-49
@@ -1,17 +1,19 @@
|
||||
.u-nav {
|
||||
--bg: #f4f6f8;
|
||||
--bg: #f1f4f7;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #eef2f5;
|
||||
--text: #18222d;
|
||||
--muted: #617182;
|
||||
--line: #cfd8e1;
|
||||
--surface-2: #f5f7f9;
|
||||
--surface-3: #e9eef3;
|
||||
--text: #17212b;
|
||||
--muted: #637282;
|
||||
--line: #d7dee5;
|
||||
--accent: #e86f2d;
|
||||
--accent-2: #287a65;
|
||||
--shadow: 0 18px 55px rgba(24, 34, 45, 0.22);
|
||||
--accent-soft: color-mix(in srgb, var(--accent) 12%, var(--surface));
|
||||
--shadow: 0 20px 60px rgba(24, 34, 45, 0.18), 0 3px 12px rgba(24, 34, 45, 0.08);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
display: grid;
|
||||
font: 12.5px/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font: 13px/1.4 Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
grid-template-rows: auto 1fr;
|
||||
min-height: calc(100vh - 170px);
|
||||
overflow: hidden;
|
||||
@@ -22,7 +24,8 @@
|
||||
.u-nav {
|
||||
--bg: #101418;
|
||||
--surface: #1b2229;
|
||||
--surface-2: #242e37;
|
||||
--surface-2: #222b33;
|
||||
--surface-3: #2b3741;
|
||||
--text: #eef3f7;
|
||||
--muted: #a3b0bd;
|
||||
--line: #36434f;
|
||||
@@ -39,16 +42,29 @@
|
||||
.u-nav button {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
min-height: 28px;
|
||||
padding: 0 8px;
|
||||
min-height: 32px;
|
||||
padding: 0 10px;
|
||||
transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease, transform 140ms ease;
|
||||
}
|
||||
|
||||
.u-nav button:hover {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.u-nav button:focus-visible,
|
||||
.u-nav input:focus-visible {
|
||||
outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.u-nav button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.u-nav button.primary {
|
||||
@@ -68,15 +84,15 @@
|
||||
.u-nav button.icon {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
flex: 0 0 26px;
|
||||
height: 26px;
|
||||
flex: 0 0 30px;
|
||||
height: 30px;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
max-width: 26px;
|
||||
min-height: 26px;
|
||||
min-width: 26px;
|
||||
max-width: 30px;
|
||||
min-height: 30px;
|
||||
min-width: 30px;
|
||||
padding: 0;
|
||||
width: 26px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.u-nav button.icon::before,
|
||||
@@ -103,12 +119,12 @@
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: space-between;
|
||||
padding: 9px 12px;
|
||||
padding: 11px 14px;
|
||||
}
|
||||
|
||||
.u-nav .topbar h1 {
|
||||
color: var(--text);
|
||||
font-size: 16px;
|
||||
font-size: 17px;
|
||||
line-height: 1;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
@@ -125,6 +141,12 @@
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.u-nav .toolbar > button:not(.icon) {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.u-nav .toolbar button.active {
|
||||
background: var(--surface-2);
|
||||
border-color: var(--accent);
|
||||
@@ -139,18 +161,19 @@
|
||||
.u-nav .window {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--shadow);
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
min-height: 240px;
|
||||
min-width: 280px;
|
||||
min-height: 280px;
|
||||
min-width: 340px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.u-nav .window.focused {
|
||||
border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
|
||||
box-shadow: 0 24px 70px rgba(24, 34, 45, 0.24), 0 4px 14px rgba(24, 34, 45, 0.1);
|
||||
}
|
||||
|
||||
.u-nav .window.maximized {
|
||||
@@ -165,12 +188,14 @@
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
grid-template-columns: 1fr auto;
|
||||
min-height: 34px;
|
||||
padding: 4px 6px 4px 10px;
|
||||
min-height: 40px;
|
||||
padding: 5px 7px 5px 12px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.u-nav .titlebar strong {
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -184,7 +209,14 @@
|
||||
.u-nav .window-body {
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
padding: 8px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.u-nav .window-body.explorer-body {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.u-nav .resize-handle {
|
||||
@@ -212,16 +244,20 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
margin-bottom: 8px;
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--line);
|
||||
flex-wrap: nowrap;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.u-nav .pathbar input:not(.upload-input) {
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
min-height: 28px;
|
||||
min-height: 32px;
|
||||
min-width: 180px;
|
||||
padding: 0 8px;
|
||||
flex: 1 1 220px;
|
||||
@@ -244,6 +280,159 @@
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.u-nav .pathbar > button.active {
|
||||
background: var(--accent-soft);
|
||||
border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.u-nav .explorer-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-nav .explorer-layout.with-tree {
|
||||
grid-template-columns: clamp(180px, 25%, 250px) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.u-nav .explorer-content {
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.u-nav .folder-tree {
|
||||
background: var(--surface-2);
|
||||
border-right: 1px solid var(--line);
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.u-nav .tree-heading {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--line);
|
||||
color: var(--muted);
|
||||
display: flex;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.04em;
|
||||
justify-content: space-between;
|
||||
min-height: 38px;
|
||||
padding: 4px 6px 4px 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.u-nav .tree-scroll {
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.u-nav .tree-row {
|
||||
align-items: center;
|
||||
border-radius: 7px;
|
||||
display: flex;
|
||||
min-height: 30px;
|
||||
padding-left: calc(var(--tree-level) * 15px);
|
||||
}
|
||||
|
||||
.u-nav .tree-row:hover {
|
||||
background: var(--surface-3);
|
||||
}
|
||||
|
||||
.u-nav .tree-row.active {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.u-nav .tree-caret,
|
||||
.u-nav .tree-label {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
min-height: 26px;
|
||||
}
|
||||
|
||||
.u-nav .tree-caret {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
flex: 0 0 24px;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.u-nav .tree-caret .ui-icon {
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
}
|
||||
|
||||
.u-nav .tree-caret:disabled {
|
||||
opacity: 0.22;
|
||||
}
|
||||
|
||||
.u-nav .tree-label {
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: 7px;
|
||||
justify-content: flex-start;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
padding: 0 5px 0 2px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.u-nav .tree-label:hover,
|
||||
.u-nav .tree-caret:hover {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.u-nav .tree-label.drop-candidate {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.u-nav .tree-label.drop-target {
|
||||
background: var(--accent-soft);
|
||||
box-shadow: inset 0 0 0 1px var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.u-nav .tree-label > span:last-child {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.u-nav .tree-folder {
|
||||
color: #d97722;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.u-nav .tree-folder .ui-icon {
|
||||
fill: color-mix(in srgb, #f5a24c 32%, transparent);
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
.u-nav .tree-spinner {
|
||||
animation: tree-spin 700ms linear infinite;
|
||||
border: 2px solid var(--line);
|
||||
border-radius: 999px;
|
||||
border-top-color: var(--accent);
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
@keyframes tree-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.u-nav .upload-input {
|
||||
display: none;
|
||||
}
|
||||
@@ -251,7 +440,11 @@
|
||||
.u-nav .drop-zone {
|
||||
border: 1px dashed transparent;
|
||||
border-radius: 8px;
|
||||
min-height: 150px;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.u-nav .explorer-message {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.u-nav .drop-zone.drag-over {
|
||||
@@ -297,12 +490,18 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.u-nav .file-table thead {
|
||||
position: sticky;
|
||||
top: -8px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.u-nav .file-table th,
|
||||
.u-nav .file-table td {
|
||||
background: var(--surface) !important;
|
||||
border-bottom: 1px solid var(--line);
|
||||
color: var(--text) !important;
|
||||
padding: 6px 6px;
|
||||
padding: 8px 9px;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -326,7 +525,7 @@
|
||||
.u-nav .file-row.dragging,
|
||||
.u-nav .file-row.drop-candidate,
|
||||
.u-nav .file-row.drop-target {
|
||||
background: var(--surface-2);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.u-nav .file-row:hover td,
|
||||
@@ -334,7 +533,7 @@
|
||||
.u-nav .file-row.dragging td,
|
||||
.u-nav .file-row.drop-candidate td,
|
||||
.u-nav .file-row.drop-target td {
|
||||
background: var(--surface-2) !important;
|
||||
background: var(--accent-soft) !important;
|
||||
}
|
||||
|
||||
.u-nav .file-row.drop-candidate td:first-child {
|
||||
@@ -357,29 +556,47 @@
|
||||
.u-nav .name-cell {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
gap: 9px;
|
||||
-webkit-user-drag: none;
|
||||
min-width: 130px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.u-nav .badge {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
color: var(--muted);
|
||||
.u-nav .entry-icon {
|
||||
align-items: center;
|
||||
color: #68798a;
|
||||
display: inline-flex;
|
||||
font-size: 11px;
|
||||
flex: 0 0 auto;
|
||||
justify-content: center;
|
||||
min-width: 50px;
|
||||
padding: 1px 7px;
|
||||
-webkit-user-drag: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.u-nav .entry-icon.directory {
|
||||
color: #d97722;
|
||||
}
|
||||
|
||||
.u-nav .entry-icon.directory .ui-icon {
|
||||
fill: color-mix(in srgb, #f5a24c 28%, transparent);
|
||||
}
|
||||
|
||||
.u-nav .entry-icon.symlink {
|
||||
color: var(--accent-2);
|
||||
}
|
||||
|
||||
.u-nav .entry-icon.large .ui-icon {
|
||||
height: 47px;
|
||||
stroke-width: 1.55;
|
||||
width: 47px;
|
||||
}
|
||||
|
||||
.u-nav .entry-icon.large.directory .ui-icon {
|
||||
height: 54px;
|
||||
width: 54px;
|
||||
}
|
||||
|
||||
.u-nav .icon-grid {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
|
||||
gap: 7px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
@@ -387,14 +604,14 @@
|
||||
align-items: center;
|
||||
background: var(--surface);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
border-radius: 10px;
|
||||
color: var(--text);
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
grid-template-rows: auto minmax(28px, auto) auto;
|
||||
justify-items: center;
|
||||
min-height: 108px;
|
||||
padding: 8px 6px;
|
||||
min-height: 120px;
|
||||
padding: 10px 7px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -404,7 +621,7 @@
|
||||
.u-nav .icon-item.dragging,
|
||||
.u-nav .icon-item.drop-candidate,
|
||||
.u-nav .icon-item.drop-target {
|
||||
background: var(--surface-2);
|
||||
background: var(--accent-soft);
|
||||
border-color: var(--line);
|
||||
}
|
||||
|
||||
@@ -503,7 +720,7 @@
|
||||
.u-nav .icon-name {
|
||||
color: var(--text);
|
||||
display: -webkit-box;
|
||||
font-size: 12px;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.25;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
Reference in New Issue
Block a user