Folders

Picolab · Mar 20, 2024 · 61d0fb6 · 61d0fb6
1 parent 282f4aa
commit 61d0fb6
Showing 1 changed file with 63 additions and 33 deletions.
diff --git a/samples/pod.css b/samples/pod.css
@@ -1,5 +1,15 @@
+body, html {
+    margin: 0em 0 0 1em;
+    font-family: Arial, sans-serif;
+    background-color: #f0f4f8;
+}
+
+h2 {
+    color: #333;
+    margin-bottom: 40px;
+}
+
 button {
-    width: 5em;
     padding: 10px;
     border: none;
     border-radius: 4px;
@@ -8,24 +18,22 @@ button {
     cursor: pointer;
 }
 
+button:hover {
+    background-color: #0056b3;
+}
+
 .detach-button {
-    width: 10em;
+    width: 9em;
     position: fixed;
-    top: 10px;
-    right: 10px;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 4px;
+    top: 1em;
+    right: 1em;
 }
 
 .attach-button {
-    width: 10em;
+    width: 9em;
     position: fixed;
-    top: 10px;
-    right: 10px;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 4px;
+    top: 1em;
+    right: 1em;
     display: none;
 }
 
@@ -34,16 +42,13 @@ button {
 }
 
 .toggle-button {
-    padding: 8px 20px;
-    background-color: #0056b3;
-    color: white;
-    border: none;
-    border-radius: 4px;
+    background-color: #007bff;
     cursor: pointer;
 }
 
 .toggle-button.active {
-    background-color: #007bff;
+    background-color: #0056b3;
+    cursor: default;
 }
 
 .modal {
@@ -73,18 +78,6 @@ button {
     text-align: center;
 }
 
-body, html {
-    height: 100%;
-    margin: 0;
-    font-family: Arial, sans-serif;
-    background-color: #f0f4f8;
-}
-
-h2 {
-    color: #333;
-    margin-bottom: 40px;
-}
-
 .input-group {
     position: relative;
     margin-bottom: 20px;
@@ -112,8 +105,45 @@ label {
     color: #007bff;
 }
 
-button:hover {
-    background-color: #0056b3;
+.navbar {
+    margin-bottom: 1em;
 }
 
+.control-panel {
+    margin: .25em 0 .25em 0;
+}
 
+.folders-container {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: .5em;
+}
+
+.folder {
+    margin: 0 0 0 2em;
+}
+
+.folder img {
+    display: block;
+    width: auto; 
+    height: auto; 
+    margin: 0 2em 0 0;
+}
+
+.folder-header {
+    cursor: pointer;
+}
+
+.folder-content {
+    display: none;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    flex-shrink: 0; 
+    align-items: flex-start;
+    margin: 0 0 0 2em;
+}
+
+.folder-content.show {
+    display: flex;
+}