lib.itmens/common/static/scss/_common.scss

.tldr {
  overflow: hidden;
  text-overflow: " ... [点击展开]";
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
}

.tldr-2 {
  overflow: hidden;
  text-overflow: " ... [点击展开]";
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.longlist {
  max-height: 60vh;
  overflow-y: scroll;
}

.hidden {
  display: none;
}

.invisible {
  visibility: hidden;
}

.folded {
  max-height: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.2s ease;
}

.folded.unfold {
  max-height: max-content;
  transform: scaleY(1);
}

a:not(:hover) {
  text-decoration: none;
}


body {
  --pico-block-spacing-vertical: var(--pico-block-spacing-horizontal);
}

article.item-card {
  padding: calc(var(--pico-block-spacing-horizontal));
  margin-bottom: calc(var(--pico-block-spacing-vertical) / 2);

  header,
  footer {
    padding: calc(var(--pico-block-spacing-horizontal) / 2);
  }

  section {
    margin-bottom: calc(var(--pico-spacing) / 1);
  }
}

article.item-card.external h5 {
  font-style: italic;
}

details {
  margin: 0;
}

.invalid {
  color: var(--pico-del-color);
}

.valid {
  color: var(--pico-ins-color);
}

.empty {
  font-style: italic;
  font-size: 80%;
  color: var(--pico-muted-color);
}

.deleting {
  background: repeating-linear-gradient(
    135deg,
    var(--pico-muted-border-color),
    var(--pico-muted-border-color) 10px,
    var(--pico-background-color) 10px,
    var(--pico-background-color) 20px
  );
}

.hint {
  color: var(--pico-muted-color);
  opacity: 0.5;
}

.oneline {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.handler {
  color: var(--pico-muted-color);
  word-break: break-all;
  opacity: 0.5;
}

.loading {
  color: var(--pico-muted-color);
  opacity: 0.5;
}

.shelf {
  .action {
    float: unset;
    position: absolute;
    right: 0;
  }
}

.post {
  span.invisible {
    display: none;
  }

  span.ellipsis:after {
    content: "…";
  }
}

.action {
  width: max-content;
  float: right;

  &.inline {
    float: none;
  }

  >span {
    padding-left: calc(var(--pico-spacing)/2);
  }

  a {
    cursor: pointer;
    text-decoration: none;
  }

  a.hidden {
    display: none;
  }

  a.disabled,
  .timestamp {
    cursor: unset;
    color: var(--pico-muted-color);
    opacity: 0.5;
  }

  a:not(:hover) {
    color: var(--pico-muted-color);
    opacity: 0.5;
  }

  a.activated:not(:hover) {
    color: var(--pico-primary);
    opacity: 1;
  }

  .tag-list a:not(:hover) {
    color: white;
  }
}

.hide-action {
  .action {
    display: none !important;
  }
}

small.title_deco {
  color: var(--pico-muted-color);
  opacity: 0.5;
}

form img {
  max-height: 20vh;
}

.avatar {
  display: inline-block;

  img {
    max-width: unset;
    border-radius: 50%;
    height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2 - var(--pico-border-width) * 2);
    width: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2 - var(--pico-border-width) * 2);
    border: 2px solid var(--pico-form-element-background-color);
    border-radius: 50%;
    transition: linear 0.25s;
  }
}

.avatar a img:hover {
  transition: ease-out 0.2s;
  border: 2px solid var(--pico-primary);
  -webkit-transition: ease-out 0.2s;
}

.multi-fields {
  >span:not(:first-child):before {
    content: "/";
    margin: 0 0.5em;
  }
}

.pagination {
  text-align: center;
  width: 100%;
  margin-top: 1em;
  a {
    margin: 0 0.3em;
  }
  .s, .prev, .next {
    font-size: 1.4em;
  }
  .prev {
    margin-right: 0.5em;
  }
  .next {
    margin-left: 0.5em;
  }
  .current {
    font-weight: bold;
    font-size: 1.1em;
    color: var(--pico-secondary);
  }
}