FolderView3 custom CSS improvements

urblack-theme/02-vars.dashboard.css

@@ -26,6 +26,9 @@
   --container-logo-saturation: 1; /* Initial color depth for container icons - 0 is fully-desaturated (grayscale), 1 is default saturation */
   --container-logo-saturation-hov: 2; /* 1 is 100% or default color depth - Values above 1 will saturate beyond default colors, Example: 4 = 400% */
 
+  /* Override FV3 inset fill to match classic expanded header grey */
+  --fv3-inset-fill: var(--cscheme-foreline4);
+
   /****** EXPANDED FOLDER STYLES ******/
   --exfold-header-brdr-c: var(--cscheme-foreline4); /* Border color for the header */
   --exfold-header-bg-c: var(--cscheme-foreline4); /* Background color for the header */

urblack-theme/02-vars.docker-vm.css

@@ -16,8 +16,9 @@
   --fv3-row-alt-bg: var(--row-even-bg-c);
 
   /* Folder Name/Logo Area */
-  --fv3-folder-name-width: 180px;
-  --folderbox-width: var(--fv3-folder-name-width); /* May need to be increased if --folder-name-text-size is too big */
+  --fv3-folder-name-min-width: 180px;
+  --fv3-folder-name-max-width: none;
+  --folderbox-width: var(--fv3-folder-name-min-width); /* May need to be increased if --folder-name-text-size is too big */
   --folderbox-height: calc(var(--folder-logo-size) + (var(--folderbox-padding-topbottom) * 2) + (var(--folderbox-brdr-width-topbottom) * 2));
   --folderbox-padding-topbottom: 7px;
   --folderbox-padding-leftright: 7px;
@@ -35,7 +36,7 @@
   --folder-name-text-weight: bold;
   --folder-startstop-text-size: 1.2rem; /* 0 to hide */
   --folder-startstop-text-mrgleft: 7px; /* 0 to hide */
-  
+
   --folder-button-size-hov: 1.08; /* Changes button size on hover - Used in transform/scale rule - 1 is 100%, 1.2 is 120%, 2 is 200%, etc. */
   --folder-button-size-act: 0.98; /* Changes button size on activation (when pressed) - Used in transform/scale rule - 1 is 100%, 1.2 is 120%, 2 is 200%, etc. */
   --folder-button-background: linear-gradient(90deg, var(--cscheme-foreline1-dark) 0, var(--cscheme-foreline1)) 0 0 no-repeat, linear-gradient(90deg, var(--cscheme-foreline1-dark) 0, var(--cscheme-foreline1)) 0 100% no-repeat, linear-gradient(0deg, var(--cscheme-foreline1-dark) 0, var(--cscheme-foreline1-dark)) 0 100% no-repeat, linear-gradient(0deg, var(--cscheme-foreline1) 0, var(--cscheme-foreline1)) 100% 100% no-repeat;

urblack-theme/03-vars-icons.dashboard.css

@@ -1,5 +1,5 @@
 /*************************************************/
-/* VARIABLES FOR ICONS ON THE DASHBOARD - 
+/* VARIABLES FOR ICONS ON THE DASHBOARD -
 Change these settings to your preference */
 /*************************************************/
 /* See https://fontawesome.com/icons for icons.
@@ -38,7 +38,7 @@ like https://htmlcolorcodes.com/color-picker/ */
   --folder-stopped-icon-c: var(--cscheme-interface-alert); /* Normal stopped icon - default is red */
   --folder-autostart-full-icon-c: var(--cscheme-interface-passed2); /* Indicate ALL autostart containers within the folder are started */
   --folder-autostart-partial-icon-c: var(--cscheme-interface-warn2); /* Indicates SOME autostart containers within the folder are started */
-  --folder-autostart-off-icon-c: var(--cscheme-interface-alert2); /* Indicates NO autostart containers within the folder are started */  
+  --folder-autostart-off-icon-c: var(--cscheme-interface-alert2); /* Indicates NO autostart containers within the folder are started */
 
   --container-spin-started-icon-c: var(--cscheme-interface-passed); /* Spin icon temporarily shown when a container is changing from started to stopped */
   --container-spin-stopped-icon-c: var(--cscheme-interface-alert); /* Spin icon temporarily shown when a container is changing from stopped to started */

urblack-theme/03-vars-icons.docker-vm.css

@@ -1,5 +1,5 @@
 /*************************************************/
-/* VARIABLES FOR ICONS IN DOCKER TABLE - 
+/* VARIABLES FOR ICONS IN DOCKER TABLE -
 Change these settings to your preference */
 /*************************************************/
 /* See https://fontawesome.com/icons for icons.
@@ -67,4 +67,4 @@ like https://htmlcolorcodes.com/color-picker/ */
   --container-logs-icon: "\f0c9";
   --container-logs-icon-c: var(--cscheme-tool-link);
   --container-logs-iconhover-c: var(--cscheme-tool-linkhov);
-}
+}

urblack-theme/04-dash.dashboard.css

@@ -57,77 +57,87 @@
 }
 
 /* Add a padding left to the entire docker and vm icon area
-- this compensates for the expanded folder header */
-#docker_view tr:nth-child(2) td,
-#vm_view tr:nth-child(2) td {
+- this compensates for the expanded folder header (classic only) */
+#docker_view tr:nth-child(2) td.fv3-layout-classic,
+#vm_view tr:nth-child(2) td.fv3-layout-classic {
   padding-left: 20px;
   padding-bottom: 10px;
 }
 
-/* Expand the clickable area of folders and containers
-to the full width of the wrapper */
-#docker_view .hand,
-#vm_view .hand {
+/* Expand the clickable area of folders and containers (classic only) */
+.fv3-layout-classic .hand {
   position: absolute;
   z-index: 50;
-  display: inline-block;
+  display: flex !important;
+  align-items: center !important;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   padding: 0;
 }
 
-/* Set a height on the name/text area of
-the folders and containers to the same height of the icon */
-#docker_view .inner,
-#vm_view .inner {
+/* Set a min-height on the name/text area of
+the folders and containers to the same height of the icon (classic only) */
+.fv3-layout-classic .inner {
   display: inline-block;
-  height: var(--container-logo-size);
+  min-height: var(--container-logo-size);
   margin-left: calc(var(--container-logo-size) + 6px);
 }
 
-/* Compressed folder wrapper and docker container wrapper styles */
+/* Compressed folder wrapper and docker container wrapper styles (classic only) */
+#docker_view .fv3-layout-classic .outer,
+#vm_view .fv3-layout-classic .outer {
+  position: relative;
+}
+
+/* Transparent background and vertical icon centering for all dashboard tiles */
 #docker_view .outer,
 #vm_view .outer {
-  position: relative; /* Needed for absolute positioning of child elements */
-  display: inline-block;
   background-color: transparent;
+  display: inline-flex !important;
+  align-items: center !important;
+}
+
+/* Restore block display for expanded folder headers (all layouts) */
+.folder-showcase-outer[expanded="true"] .outer.folder-docker,
+.folder-showcase-outer[expanded="true"] .outer.folder-vm {
+  display: block !important;
 }
 
 
 /*************************************************/
 /* EXPANDED FOLDER WRAPPER STYLES */
 /*************************************************/
 
-/* Override layout defaults: allow full folder names without truncation */
-.fv3-folder-appname {
-  max-width: 100% !important;
+/* Allow full folder names on expanded folders (classic only — other layouts use FV3 truncation) */
+.fv3-layout-classic .folder-showcase-outer[expanded="true"] .fv3-folder-appname {
+  max-width: none;
+  overflow: visible;
+  white-space: nowrap;
 }
 
-/* Expanded folder outer wrapper styles */
-#docker_view .folder-showcase-outer[expanded="true"],
-#vm_view .folder-showcase-outer[expanded="true"] {
+/* Expanded folder outer wrapper styles (classic layout only — other layouts keep FV3 structure) */
+#docker_view .fv3-layout-classic .folder-showcase-outer[expanded="true"],
+#vm_view .fv3-layout-classic .folder-showcase-outer[expanded="true"],
+.fv3-layout-classic .folder-showcase-outer[expanded="true"] {
   float: left;
   display: block;
-  margin-left: -10px; /* Overcome 20px container padding-left by giving
-                      expanded folder a negative left margin */
-  width: calc(100% + 10px); /* Add 10px to the width to overcome negative margin */
+  margin-left: -10px;
+  width: calc(100% + 10px);
   border-radius: 10px;
   border-width: 1px;
   border-style: solid;
   border-color: var(--exfold-drawer-brdr-c);
   background-color: var(--exfold-drawer-bg-c);
 }
 
-#docker_view .folder-showcase-outer[expanded="true"]:not(:last-child),
-#vm_view .folder-showcase-outer[expanded="true"]:not(:last-child) {
-  margin-bottom: 20px; /* Only apply 20px margin if it's NOT the last element */
+.fv3-layout-classic .folder-showcase-outer[expanded="true"]:not(:last-child) {
+  margin-bottom: 20px;
 }
 
 /* Child docker container icons wrapper "drawer" styles */
-#docker_view .folder-showcase-outer[expanded="true"] .folder-showcase,
-#vm_view .folder-showcase-outer[expanded="true"] .folder-showcase {
+.fv3-layout-classic .folder-showcase-outer[expanded="true"] .folder-showcase {
   float: left;
   display: block;
   padding: 0 20px;
@@ -174,16 +184,16 @@ the green arrow or red square shows on containers */
 /* EXPANDED FOLDER HEADER STYLES */
 /*************************************************/
 
-/* Add padding to the clickable area - builds on compressed styles */
-#docker_view .folder-showcase-outer[expanded="true"] .hand.folder-hand-docker,
-#vm_view .folder-showcase-outer[expanded="true"] .hand.folder-hand-vm {
+/* Add padding to the clickable area - classic layout only */
+#docker_view .fv3-layout-classic .folder-showcase-outer[expanded="true"] .hand.folder-hand-docker,
+#vm_view .fv3-layout-classic .folder-showcase-outer[expanded="true"] .hand.folder-hand-vm {
   padding: 8px;
 }
 
-/* Expanded folder wrapper/header styles */
-#docker_view .folder-showcase-outer[expanded="true"] .outer.folder-docker,
-#vm_view .folder-showcase-outer[expanded="true"] .outer.folder-vm {
-  display: block;
+/* Expanded folder wrapper/header styles (classic layout only) */
+#docker_view .fv3-layout-classic .folder-showcase-outer[expanded="true"] .outer.folder-docker,
+#vm_view .fv3-layout-classic .folder-showcase-outer[expanded="true"] .outer.folder-vm {
+  display: block !important;
   float: none;
   padding: 8px;
   border: 1px solid var(--exfold-header-brdr-c);
@@ -215,6 +225,11 @@ height of the icon - builds on compressed styles */
 #docker_view .folder-showcase-outer[expanded="true"] .inner.folder-inner-docker,
 #vm_view .folder-showcase-outer[expanded="true"] .inner.folder-inner-vm {
   height: var(--exfold-logo-size);
+}
+
+/* Classic layout: offset text for absolutely-positioned icon */
+#docker_view .fv3-layout-classic .folder-showcase-outer[expanded="true"] .inner.folder-inner-docker,
+#vm_view .fv3-layout-classic .folder-showcase-outer[expanded="true"] .inner.folder-inner-vm {
   margin-left: calc(var(--exfold-logo-size) + 7px);
 }
 
@@ -239,9 +254,9 @@ height of the icon - builds on compressed styles */
   color: var(--exfold-contname-text-c);
 }
 
-/* Down arrow icon */
-#docker_view .folder-showcase-outer[expanded="true"] .folder-docker::after,
-#vm_view .folder-showcase-outer[expanded="true"] .folder-vm::after {
+/* Down arrow icon (classic layout only, hidden when collapse toggle is active) */
+.fv3-layout-classic .folder-showcase-outer[expanded="true"] .folder-docker::after,
+.fv3-layout-classic .folder-showcase-outer[expanded="true"] .folder-vm::after {
   position: absolute;
   content: "\f0d7";
   display: block;
@@ -250,4 +265,6 @@ height of the icon - builds on compressed styles */
   right: 1rem;
   bottom: 0;
 }
-/*************************************************/
+.fv3-layout-classic .folder-showcase-outer[expanded="true"] .fv3-expanded-tab::after {
+  content: none;
+}

urblack-theme/04-table.docker.css

@@ -69,11 +69,14 @@
 /* FOLDER NAME AREA */
 /*************************************************/
 .folder .folder-name {
-  width: var(--folderbox-width);
+  min-width: var(--fv3-folder-name-min-width);
+  max-width: var(--fv3-folder-name-max-width);
 }
 /* Prevent folder icon from being clipped when scaled on hover */
 td.folder-name .folder-outer {
   overflow: visible;
+  white-space: nowrap;
+  width: auto;
 }
 /* Wrapper around folder icon, name, and toggle */
 .folder .folder-name-sub {
@@ -85,12 +88,12 @@ td.folder-name .folder-outer {
   height: var(--folderbox-height);
   display: flex;
   align-items: center;
+  overflow: hidden;
 }
-.folder .folder-outer {
-  display: block;
-  height: var(--folder-logo-size);
+.outer.folder-outer {
+  display: inline-flex !important;
+  align-items: center !important;
   margin-bottom: 0;
-  width: calc(var(--folderbox-width) - 25px);
 }
 /* Folder image */
 .folder-outer img.img {
@@ -116,6 +119,7 @@ td.folder-name .folder-outer {
 /* Folder toggle open button */
 button.folder-dropdown {
   float: none;
+  margin-left: auto;
   color: var(--folder-button-text-c);
   border: none;
   background: var(--folder-button-background);
@@ -165,10 +169,21 @@ button.folder-dropdown:active {
 /* Vertical lines between containers - if enabled */
 .folder-preview .folder-preview-divider {
   float: none;
-  height: var(--container-logo-size);
-  margin: var(--container-logo-mrgtopbottom) 5px var(--container-logo-mrgtopbottom) 10px;
+  height: 70%;
+  margin: 0 5px 0 10px;
+  align-self: center;
   border: 1px solid var(--folderpreview-brdr-c) !important;
 }
+.folder-preview.fv3-overflow-scroll .folder-preview-divider:not(:last-child) {
+  height: auto;
+  align-self: stretch;
+  margin-top: var(--container-logo-mrgtopbottom);
+}
+.folder-preview.fv3-overflow-expand .folder-preview-divider:not(:last-child) {
+  height: var(--container-logo-size);
+  margin-top: var(--container-logo-mrgtopbottom);
+  align-self: flex-start;
+}
 
 /*************************************************/
 /* CONTAINER IN PREVIEW ROW */
@@ -208,6 +223,42 @@ button.folder-dropdown:active {
   margin-left: var(--container-startstop-text-mrgleft);
 }
 
+/*************************************************/
+/* EXPANDED / SCROLL PREVIEW MODES */
+/*************************************************/
+.folder .folder-preview.fv3-overflow-expand {
+  height: auto;
+  min-height: var(--folderpreview-height);
+  max-height: none;
+  padding-bottom: var(--container-logo-mrgtopbottom);
+}
+.folder:has(.folder-preview.fv3-overflow-expand) .folder-name-sub {
+  height: 100%;
+}
+.folder .folder-preview.fv3-overflow-scroll {
+  flex-wrap: nowrap;
+  overflow-x: scroll;
+  overflow-y: hidden;
+}
+.folder-preview.fv3-overflow-scroll .folder-preview-wrapper {
+  flex-shrink: 0;
+}
+.folder-preview.fv3-overflow-scroll::-webkit-scrollbar {
+  height: 6px;
+  background: transparent;
+}
+.folder-preview.fv3-overflow-scroll::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 3px;
+}
+.folder-preview.fv3-overflow-scroll:hover::-webkit-scrollbar-thumb {
+  background: rgba(255, 140, 47, 0.5);
+}
+.folder .folder-preview.expanded {
+  height: auto;
+  max-height: none;
+}
+
 /****** Give more space for containers *******/
 /* Autostart column */
 #docker_containers th.nine {