From 3db6938caa719aaa38b52edecf42740ef62b0c3c Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Wed, 10 Jan 2024 18:11:48 -0500
Subject: begin redesign of tree module.

---
 style.css | 204 +++++++++++++++++++++++++++++++++++---------------------------
 1 file changed, 115 insertions(+), 89 deletions(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index 680a5f83..4f285c68 100644
--- a/style.css
+++ b/style.css
@@ -863,7 +863,7 @@ footer {
     margin-bottom: 1em;
 }
 
-.extra-network-cards{
+.extra-network-pane{
     height: calc(100vh - 24rem);
     overflow: clip scroll;
     resize: vertical;
@@ -908,53 +908,75 @@ footer {
     width: auto;
 }
 
-.extra-network-cards .nocards{
+.extra-network-pane .nocards{
     margin: 1.25em 0.5em 0.5em 0.5em;
 }
 
-.extra-network-cards .nocards h1{
+.extra-network-pane .nocards h1{
     font-size: 1.5em;
     margin-bottom: 1em;
 }
 
-.extra-network-cards .nocards li{
+.extra-network-pane .nocards li{
     margin-left: 0.5em;
 }
 
+.extra-network-pane :is(.card, .card-minimal) .button-row{
+    display: inline-flex;
+    visibility: hidden;
+    color: white;
+}
 
-.extra-network-cards .card .button-row{
-    display: none;
+.extra-network-pane .card .button-row {
     position: absolute;
-    color: white;
     right: 0;
-    z-index: 1
+    z-index: 1;
 }
-.extra-network-cards .card:hover .button-row{
-    display: flex;
+
+.extra-network-pane .card-minimal .button-row {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    align-items: center;
 }
 
-.extra-network-cards .card .card-button{
+.extra-network-pane :is(.card:hover, .card-minimal:hover) .button-row{
+    visibility: visible;
+}
+
+.extra-network-pane .card-button{
     color: white;
 }
 
-.extra-network-cards .card .metadata-button:before{
+.extra-network-pane .copy-path-button:before {
+    content: "⎘";
+}
+
+.extra-network-pane .metadata-button:before{
     content: "🛈";
 }
 
-.extra-network-cards .card .edit-button:before{
+.extra-network-pane .edit-button:before{
     content: "🛠";
 }
 
-.extra-network-cards .card .card-button {
+.extra-network-pane .card-button {
+    width: 1.5em;
     text-shadow: 2px 2px 3px black;
+    color: white;
     padding: 0.25em 0.1em;
-    font-size: 200%;
-    width: 1.5em;
 }
-.extra-network-cards .card .card-button:hover{
+
+.extra-network-pane .card-button:hover{
     color: red;
 }
 
+.extra-network-pane .card .card-button {
+    font-size: 2rem;
+}
+
+.extra-network-pane .card-minimal .card-button {
+    font-size: 1rem;
+}
 
 .standalone-card-preview.card .preview{
     position: absolute;
@@ -963,7 +985,7 @@ footer {
     height:100%;
 }
 
-.extra-network-cards .card, .standalone-card-preview.card{
+.extra-network-pane .card, .standalone-card-preview.card{
     display: inline-block;
     margin: 0.5rem;
     width: 16rem;
@@ -980,15 +1002,15 @@ footer {
     background-image: url('./file=html/card-no-preview.png')
 }
 
-.extra-network-cards .card:hover{
+.extra-network-pane .card:hover{
     box-shadow: 0 0 2px 0.3em rgba(0, 128, 255, 0.35);
 }
 
-.extra-network-cards .card .actions .additional{
+.extra-network-pane .card .actions .additional{
     display: none;
 }
 
-.extra-network-cards .card .actions{
+.extra-network-pane .card .actions{
     position: absolute;
     bottom: 0;
     left: 0;
@@ -999,45 +1021,45 @@ footer {
     text-shadow: 0 0 0.2em black;
 }
 
-.extra-network-cards .card .actions *{
+.extra-network-pane .card .actions *{
     color: white;
 }
 
-.extra-network-cards .card .actions .name{
+.extra-network-pane .card .actions .name{
     font-size: 1.7em;
     font-weight: bold;
     line-break: anywhere;
 }
 
-.extra-network-cards .card .actions .description {
+.extra-network-pane .card .actions .description {
     display: block;
     max-height: 3em;
     white-space: pre-wrap;
     line-height: 1.1;
 }
 
-.extra-network-cards .card .actions .description:hover {
+.extra-network-pane .card .actions .description:hover {
     max-height: none;
 }
 
-.extra-network-cards .card .actions:hover .additional{
+.extra-network-pane .card .actions:hover .additional{
     display: block;
 }
 
-.extra-network-cards .card ul{
+.extra-network-pane .card ul{
     margin: 0.25em 0 0.75em 0.25em;
     cursor: unset;
 }
 
-.extra-network-cards .card ul a{
+.extra-network-pane .card ul a{
     cursor: pointer;
 }
 
-.extra-network-cards .card ul a:hover{
+.extra-network-pane .card ul a:hover{
     color: red;
 }
 
-.extra-network-cards .card .preview{
+.extra-network-pane .card .preview{
     position: absolute;
     object-fit: cover;
     width: 100%;
@@ -1158,94 +1180,98 @@ body.resizing .resize-handle {
     border-left: 1px dashed var(--border-color-primary);
 }
 
-.extra-network-cards .card .copy-path-button:before {
-    content: "⎘";
-}
-
-.extra-network-cards .card-minimal .button-column {
+.extra-network-pane .card-minimal {
     display: inline-flex;
-    visibility: hidden;
-    color: white;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    align-items: center;
+    flex-grow: 1;
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: bold;
+    line-break: anywhere;
 }
 
-.extra-network-cards .card-minimal:hover .button-column {
-    visibility: visible;
+/* Pushes buttons to right */
+.extra-network-pane .card-minimal .name {
+    flex-grow: 1;
 }
 
-.extra-network-cards .card-minimal .copy-path-button:before {
-    content: "⎘";
+.file-item,
+.folder-item,
+.folder-item-summary {
+    padding-left: 0.05rem;
+    cursor: pointer;
+    user-select: none;
+    font-size: 1rem;
 }
 
-.extra-network-cards .card-minimal .metadata-button:before{
-    content: "🛈";
+.extra-network-pane .extra-network-tree .folder-item-summary:hover,
+.extra-network-pane .extra-network-tree .file-item:hover {
+    -webkit-transition: all 0.1s ease-in-out;
+	transition: all 0.1s ease-in-out;
+    background-color: var(--neutral-200);
 }
 
-.extra-network-cards .card-minimal .edit-button:before{
-    content: "🛠";
+.dark .extra-network-pane .extra-network-tree .folder-item-summary:hover,
+.dark .extra-network-pane .extra-network-tree .file-item:hover {
+    -webkit-transition: all 0.05s ease-in-out;
+	transition: all 0.05s ease-in-out;
+    background-color: var(--neutral-800);
 }
 
-.extra-network-cards .card-minimal .card-button {
-    color: white;
-    text-shadow: 2px 2px 3px black;
-    font-size: 1rem;
-    width: 1.5rem;
+/* prevents clicking/collapsing of details tags when disabled attribute is used*/
+.extra-network-pane .extra-network-tree details[disabled] summary {
+    pointer-events: none;
+    user-select: none;
 }
 
-.extra-network-cards .card-minimal .card-button:hover {
-    color: red;
+.extra-network-pane .extra-network-tree details.folder-item > summary {
+    list-style-type: '📁';
+    text-overflow: ellipsis;
 }
 
-.extra-network-cards .card-minimal {
-    display: inline-flex;
-    position: relative;
-    overflow: hidden;
-    cursor: pointer;
-    font-size: 1rem;
-    font-weight: bold;
-    line-break: anywhere;
+.extra-network-pane .extra-network-tree details.folder-item[open] > summary {
+    list-style-type: '📂';
+    text-overflow: ellipsis;
 }
 
-.file-item {
-    list-style-type: '📄';
+.extra-network-pane .extra-network tree ul.folder-container {
+    list-style: none;
+    font-size: 1rem;
+    text-overflow: ellipsis;
 }
 
-/* prevents clicking/collapsing of details tags when disabled attribute is used*/
-details[disabled] summary {
-    pointer-events: none;
-    user-select: none;
+.extra-network-pane .extra-network-tree li.file-item {
+    display: flex;
+    position: relative;
+    align-items: center;
 }
 
-details.folder-item > summary {
-    list-style-type: '📁';
+.extra-network-pane .extra-network-tree li.file-item::before {
+    content: '📄';
+    font-size: 0.85rem;
+    vertical-align: middle;
 }
 
-details.folder-item[open] > summary {
-    list-style-type: '📂';
+.extra-network-pane {
+    display: flex;
 }
 
-.file-item,
-.folder-item,
-.folder-item-summary {
+.extra-network-pane .extra-network-subdirs {
     display: block;
+}
+.extra-network-pane .extra-network-tree {
     font-size: 1rem;
-    padding: 0.05rem;
-    cursor: pointer;
-    user-select: none;
+    width: 25%;
 }
-
-.folder-item-summary:hover,
-.file-item:hover {
-    -webkit-transition: all 0.1s ease-in-out;
-	transition: all 0.1s ease-in-out;
-    background-color: var(--neutral-200);
+.extra-network-pane .extra-network-cards {
+    flex-grow: 1;
 }
 
-.dark .folder-item-summary:hover,
-.dark .file-item:hover {
-    -webkit-transition: all 0.05s ease-in-out;
-	transition: all 0.05s ease-in-out;
+.dark .extra-network-tree .folder-item-summary.selected{
     background-color: var(--neutral-800);
 }
+
+.extra-network-tree .folder-item-summary.selected {
+    background-color: var(--neutral-200);
+}
-- 
cgit v1.2.1