Made file grid look more like snc.

Author: 5cript

nui-file-explorer/source/nui-file-explorer/CMakeLists.txt

@@ -23,6 +23,8 @@ set_source_files_properties(
 
 target_link_libraries(
     nui-file-explorer
+    PUBLIC
+        script-nui-components
     PRIVATE
         nui-frontend
         utility
@@ -38,15 +40,15 @@ target_include_directories(
 
 if (NUI_FILE_EXPLORER_MEMORY64)
     if (WIN32)
-        target_compile_options(nui-file-explorer PRIVATE 
+        target_compile_options(nui-file-explorer PRIVATE
             -sMEMORY64=1
         )
-        target_link_options(nui-file-explorer PRIVATE 
+        target_link_options(nui-file-explorer PRIVATE
             -sMEMORY64=1
         )
     else()
         # No support for WASM64 in webkit
-        target_link_options(nui-file-explorer PRIVATE 
+        target_link_options(nui-file-explorer PRIVATE
             -sWASM_BIGINT=1
         )
     endif()

nui-file-explorer/styles/dropdown_menu.css

@@ -1,5 +1,6 @@
 .nui-file-grid-head-dropdown-text {
     padding: 10px 20px;
+    font-size: var(--nui-file-grid-dropdown-content-font-size);
 }
 
 .nui-file-grid-head-dropdown {

static/styles/main.css

@@ -52,10 +52,36 @@
     --color-fields: var(--color);
     --border-color-fields: #505050;
     --foreground-border-color: #505050;
+    /* font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; */
+    --darker-background: color-mix(in srgb, var(--background-color) 80%, black 20%);
 
     /* Switch */
     --script-nui-components-switch-color-inactive: #8e8e8e;
     --script-nui-components-switch-thumb-color: var(--color-fields);
+
+    --nui-file-grid-background-color: var(--background-color);
+    --nui-file-grid-item-highlight: rgba(255, 255, 255, 0.3);
+    --nui-file-grid-border-color: var(--border-color-fields);
+    --nui-file-grid-filter-background: var(--darker-background);
+    --nui-file-grid-filter-color: var(--color);
+    --nui-file-grid-border-radius: 0px;
+    --nui-file-grid-arrow-color: var(--color);
+    --nui-file-grid-head-font-size: var(--font-size);
+    --nui-file-grid-button-background: var(--background-color);
+    --nui-file-grid-border-width: 1px;
+    --nui-file-grid-dropdown-background: var(--darker-background);
+    --nui-file-grid-dropdown-content-background: var(--darker-background);
+    --nui-file-grid-dropdown-color: var(--color);
+    --nui-file-grid-dropdown-item-color: var(--color);
+    --nui-file-grid-dropdown-content-font-size: var(--font-size);
+    --nui-file-grid-context-menu-background: var(--background-color);
+    --nui-file-grid-table-header-background: var(--background-color);
+    --nui-file-grid-table-header-color: var(--color);
+    --nui-file-grid-table-cell-background: var(--background-color);
+    --nui-file-grid-table-cell-color: var(--color);
+    --nui-file-grid-context-menu-item-hover-background: var(--background-color);
+    --nui-file-grid-context-menu-item-hover-color: var(--color);
+    --nui-file-grid-table-sort-highlight: var(--color);
 }
 
 :root[data-theme="light"] {
@@ -84,33 +110,6 @@ body {
     margin: 0;
     background-color: var(--background-color);
     color: var(--color);
-    /* font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; */
-    --darker-background: color-mix(in srgb, var(--background-color) 80%, black 20%);
-
-    --nui-file-grid-background-color: var(--background-color);
-    --nui-file-grid-item-highlight: rgba(255, 255, 255, 0.3);
-    --nui-file-grid-border-color: var(--border-color-fields);
-    --nui-file-grid-filter-background:
-        color-mix(in srgb, var(--background-color) 80%, white 20%);
-    --nui-file-grid-filter-color: var(--color);
-    --nui-file-grid-border-radius: 8px;
-    --nui-file-grid-arrow-color: var(--color);
-    --nui-file-grid-head-font-size: var(--font-size);
-    --nui-file-grid-button-background: var(--background-color);
-    --nui-file-grid-border-width: 1px;
-    --nui-file-grid-dropdown-background: var(--background-color);
-    --nui-file-grid-dropdown-content-background: var(--background-color);
-    --nui-file-grid-dropdown-color: var(--color);
-    --nui-file-grid-dropdown-item-color: var(--color);
-    --nui-file-grid-dropdown-content-font-size: var(--font-size);
-    --nui-file-grid-context-menu-background: var(--background-color);
-    --nui-file-grid-table-header-background: var(--background-color);
-    --nui-file-grid-table-header-color: var(--color);
-    --nui-file-grid-table-cell-background: var(--background-color);
-    --nui-file-grid-table-cell-color: var(--color);
-    --nui-file-grid-context-menu-item-hover-background: var(--background-color);
-    --nui-file-grid-context-menu-item-hover-color: var(--color);
-    --nui-file-grid-table-sort-highlight: var(--color);
 
     --opq-card: #0b1220;
     --opq-muted: #98a2b3;