initial commit

src/timelines/toot.module.css

@@ -0,0 +1,209 @@
+.toot {
+  --card-pad: 16px;
+  --card-gut: 16px;
+  --toot-avatar-size: 40px;
+  margin-block: 0;
+
+  &.toot {
+    /* fix composition ordering: I think the css module processor should aware the overriding and behaves, but no */
+    transition: margin-block 125ms var(--tutu-anim-curve-std),
+      height 225ms var(--tutu-anim-curve-std),
+      var(--tutu-transition-shadow);
+    border-radius: 0;
+  }
+
+  &>.toot {
+    box-shadow: none;
+  }
+
+  time {
+    color: var(--tutu-color-secondary-text-on-surface);
+  }
+
+  & :global(.custom-emoji) {
+    height: 1em;
+    object-fit: contain;
+  }
+
+  &.expanded {
+    margin-block: 20px;
+    box-shadow: var(--tutu-shadow-e9);
+  }
+}
+
+.tootAuthorGrp {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 8px;
+
+  > :not(:first-child) {
+    flex-grow: 1;
+  }
+}
+
+.tootAuthorNameGrp {
+  display: grid;
+  grid-template-columns: 1fr auto;
+
+  >* {
+    color: var(--tutu-color-secondary-text-on-surface);
+  }
+
+  >:last-child {
+    grid-column: 1 /3;
+  }
+
+  > time {
+    text-align: end;
+  }
+
+  &:hover {
+    .tootAuthorNamePrimary {
+      text-decoration: underline;
+    }
+  }
+}
+
+.tootAuthorNamePrimary {
+  color: revert;
+}
+
+.tootAvatar {
+  width: calc(var(--toot-avatar-size, 40px) - 1px);
+  aspect-ratio: 1/1;
+  object-fit: contain;
+  border-radius: 50% 50%;
+  overflow: hidden;
+  border: 1px solid var(--tutu-color-surface);
+  background-color: var(--tutu-color-surface-d);
+}
+
+.tootContent {
+  composes: cardNoPad from '../material/cards.module.css';
+  margin-left: calc(var(--card-pad, 0) + var(--toot-avatar-size, 0) + 8px);
+  margin-right: var(--card-pad, 0);
+  line-height: 1.5;
+
+  & a {
+    color: var(--tutu-color-primary-d);
+  }
+
+  & :global(a[target="_blank"]) {
+    > :global(.invisible) {
+      display: none;
+    }
+
+    > :global(.ellipsis) {
+      &::after {
+        display: inline;
+        content: "...";
+      }
+    }
+  }
+}
+
+.compact {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 8px;
+  row-gap: 0;
+  padding-block: var(--card-gut, 16px);
+  padding-inline: var(--card-pad, 16px);
+
+  > :first-child {
+    grid-row: 1/3;
+  }
+
+  > :last-child {
+    grid-column: 2 /3;
+  }
+}
+
+.compactAuthorGroup {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 8px;
+
+  > .compactAuthorUsername {
+    color: var(--tutu-color-secondary-text-on-surface);
+    flex-grow: 1;
+  }
+
+  > time {
+    color: var(--tutu-color-secondary-text-on-surface);
+  }
+}
+
+.compactTootContent {
+  composes: tootContent;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.tootRetootGrp {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.tootAttachmentGrp {
+  composes: cardNoPad from '../material/cards.module.css';
+  margin-top: 1em;
+  margin-left: calc(var(--card-pad, 0) + var(--toot-avatar-size, 0) + 8px);
+  margin-right: var(--card-pad, 0);
+  display: grid;
+  gap: 4px;
+
+  >:where(img) {
+    max-height: 35vh;
+    min-height: 40px;
+    object-fit: none;
+    width: 100%;
+    background-color: var(--tutu-color-surface-d);
+    border-radius: 2px;
+  }
+}
+
+.tootBottomActionGrp {
+  composes: cardGutSkip from '../material/cards.module.css';
+  padding-block: calc((var(--card-gut) - 10px) / 2);
+
+  animation: 225ms var(--tutu-anim-curve-std) tootBottomExpanding;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-evenly;
+
+  > button{
+    color: var(--tutu-color-on-surface);
+    padding: 10px 8px;
+
+    > svg {
+      font-size: 20px;
+    }
+  }
+}
+
+.tootActionWithCount {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tootAction {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@keyframes tootBottomExpanding {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}