diff --git a/assets/components/entities/entity.vue b/assets/components/entities/entity.vue index 43f59cb3..c9e82322 100644 --- a/assets/components/entities/entity.vue +++ b/assets/components/entities/entity.vue @@ -50,30 +50,53 @@
- -
+
+
-
- +
+ +
- +
+
+ +
+ + + +
@@ -179,13 +229,17 @@ export default { object-position: 100% 50%; } +.children-container { + background: var(--profile); +} + .children { display: flex; box-sizing: border-box; - overflow-x: auto; padding: 1rem; border-bottom: solid 1px var(--darken-hint); - background: var(--profile); + overflow-x: auto; + scroll-behavior: smooth; scrollbar-width: none; .tile { @@ -209,18 +263,69 @@ export default { } .expand { - background: var(--profile); - .icon { - fill: var(--lighten-weak); + fill: var(--lighten); } &:hover { - background: var(--darken-strong); + background: var(--lighten-hint); .icon { - fill: var(--lighten-weak); + fill: var(--text-light); } } } + +.scroll-container { + position: relative; + padding: 0 1rem 0 0; + + &.expanded { + padding: 0; + + .scroll { + display: none; + } + } +} + +.scroll { + height: 100%; + display: flex; + align-items: center; + box-sizing: border-box; + position: absolute; + top: 0; + bottom: 0; + + &.unscrolled, + &.scrolled { + display: none; + } + + .icon { + fill: var(--lighten); + } + + &:hover { + display: flex; + cursor: pointer; + + .icon { + fill: var(--text-light); + } + } +} + +.scroll-left { + left: 0; + padding: 1rem 2rem 1rem 1rem; + background: linear-gradient(to right, var(--profile) 50%, transparent); +} + +.scroll-right { + right: 0; + padding: 1rem 1rem 1rem 2rem; + background: linear-gradient(to left, var(--profile) 50%, transparent); +} diff --git a/assets/components/sidebar/sidebar.vue b/assets/components/sidebar/sidebar.vue index 05128139..7a614424 100644 --- a/assets/components/sidebar/sidebar.vue +++ b/assets/components/sidebar/sidebar.vue @@ -11,7 +11,7 @@ /> @@ -29,7 +29,7 @@ diff --git a/assets/components/tags/tags.vue b/assets/components/tags/tags.vue index bb210534..fa753f0f 100644 --- a/assets/components/tags/tags.vue +++ b/assets/components/tags/tags.vue @@ -23,7 +23,7 @@