Port PenguinMod's library UI.

Snail-IDE · Aug 24, 2024 · 1f68025 · 1f68025
1 parent 530bd31
commit 1f68025
Show file tree

Hide file tree

Showing 7 changed files with 589 additions and 108 deletions.
diff --git a/src/components/library/library.css b/src/components/library/library.css
@@ -1,7 +1,62 @@
 @import "../../css/units.css";
 @import "../../css/colors.css";
 
+.library-content-wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    height: calc(100% - ($library-header-height));
+}
+.library-filter-bar {
+    width: 342px;
+    height: calc(100%);
+    padding: 6px;
+    margin-left: 4px;
+    border-radius: 8px;
+    background: white;
+    overflow: auto;
+    border: 2px solid $ui-black-transparent;
+}
+[theme="dark"] .library-filter-bar {
+    background: $ui-primary;
+}
+
+.library-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-left: 6px;
+}
+.library-item-count {
+    opacity: 0.5;
+    margin-block: 0;
+    margin-left: 4px;
+}
+[theme="dark"] .library-header {
+    color: white;
+}
+[dir="rtl"] .library-header {
+    margin-left: initial;
+    margin-right: 6px;
+}
+[dir="rtl"] .library-item-count {
+    margin-left: initial;
+    margin-right: 4px;
+}
+
+.library-tag-count {
+    margin-right: 2.5%;
+    text-align: right;
+}
+[dir="rtl"] .library-tag-count {
+    margin-right: initial;
+    margin-left: 2.5%;
+    text-align: left;
+}
+
 .library-scroll-grid {
+    width: calc(100% - 346px);
     display: flex;
     justify-content: flex-start;
     align-content: flex-start;
@@ -12,7 +67,7 @@
     overflow-y: auto;
     height: auto;
     padding: 0.5rem;
-    height: calc(100% - $library-header-height);
+    height: calc(100%);
 }
 
 .library-scroll-grid.withFilterBar {
@@ -31,7 +86,7 @@
 }
 
 .filter-bar-item {
-    margin-right: .75rem;
+    border: 1px solid $ui-black-transparent;
 }
 
 .filter {
@@ -48,9 +103,40 @@
     width: 18.75rem;
 }
 
+.tag-checkbox-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+[theme="dark"] .tag-checkbox-wrapper {
+    color: white;
+}
+
+[theme="dark"] .white-text-in-dark-mode {
+    color: white;
+}
+
+.library-filter-collapse {
+    width: 35px;
+    height: 40px;
+    transform: scaleX(-0.65);
+    background: transparent;
+    border: 0;
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTVweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSItNC41IC02IDEwIDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA1MC4yICg1NTA0NykgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+cG9seWdvbi1leHBhbmQ8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0icG9seWdvbi1leHBhbmQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik0zLDZjMCwwLjM2NjM5IC0wLjEzNzQsMC43MzExNiAtMC40MTM4LDEuMDExNjNsLTMuODQzOTksMy45MDIyMmMtMC41NTEyLDAuNTU5MzEgLTEuNDQyNjksMC41NTkzMSAtMS45OTU0OSwwYy0wLjU1MTIsLTAuNTU3NjkgLTAuNTUxMiwtOS4yNzAwMSAwLC05LjgyNzdjMC41NTEyLC0wLjU1OTMxIDEuNDQ0MjksLTAuNTU5MzEgMS45OTU0OSwwbDMuODQzOTksMy45MDA2YzAuMjc2NCwwLjI4MDQ3IDAuNDEzOCwwLjY0NTI0IDAuNDEzOCwxLjAxMzI1IiBpZD0iZXhwYW5kIiBmaWxsPSIjNTc1RTc1Ij48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPgo=');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+}
+[theme="dark"] .library-filter-collapse {
+    filter: brightness(50);
+}
+
 .divider {
-    transform: scaleY(1.39);
-    height: $library-filter-bar-height;
+    width: 100%;
+    border: 0;
+    border-bottom: 1px dashed $ui-black-transparent;
+    margin: 6px 0;
 }
 
 .tag-wrapper {