Feedly - Full width cards view by erimus-koo

/* ==UserStyle==
@name         Feedly - Full width cards view
@version      20220904
@namespace    userstyles.world/user/erimus-koo
@description  Enhance the cards view in Feedly, and etc.
@author       erimus-koo
@license      No License
@preprocessor   less
==/UserStyle== */
@-moz-document domain("feedly.com") {

  * {
    box-sizing: border-box;
  }

  :root {
    --header-h: 4rem;
  }

  /* 整体宽度 */
  .fx .container {
    max-width: 9999px;
  }

  /* header bar -------------------- */
  /* 解除宽度限制 */
  #headerBarFX header, #headerBarFX .row {
    max-width: 9999px;
  }

  /* 主面板外框聚焦的蓝色 */
  #feedlyFrame:focus-visible {
    outline: none
  }

  /* ========== Card ========== */
  /* frame */
  div:has(>.entry.cards) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
  }

  /* Mark All as Read */
  .StreamPage.presentation-cards>button {
    grid-column: 1 / -1;
  }

  .StreamPage.presentation-cards>button+div {
    grid-column: 1 / -1;
  }


  .entry.cards {
    margin: 0;
  }

  /* Card Size */
  .StreamPage.presentation-cards>article {
    margin: 0!important;
    border: 1px solid #0000;
    clear: none!important;
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 0;
  }

  .CardLayout, .SelectedEntryScroller>div {
    margin: 0;
    width: 100%;
    padding: 0;

    /* force img frame in card ratio 1:1 */
    .EntryVisual, &>div:first-child {
      aspect-ratio: 1/1;
      height: auto;

      /* card image */
      .EntryVisual__visual, &>div[style*="background-image"] {
        top: 0;
        aspect-ratio: 1/1;
        height: auto;
        border-radius: .5em;
        background-color: #8882;
      }

      /* card hover dark mask */
      &>div:last-child {
        background: none!important;
      }
    }
  }

  /*   文章标题 */
  /* 已读 */
  .entry.cards.entry--read .EntryTitleLink {
    color: #8888;
  }

  /* 未读 */
  .entry.cards .EntryTitleLink {
    color: #F69;
    &:hover {
      color: #F69;
      background: #8882;
    }
  }

  /* text */
  .fx .entry.u5 .content {
    height: 80px;
    line-height: 20px;
    margin: 5px 0 0;
  }

  .fx .entry.u5 .entry__title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }

  /* ellipsis source */
  .fx .entry .metadata * {
    color: transparent;
  }

  .fx .entry .metadata .source {
    display: inline-block;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(128, 128, 128, .5)
  }

  .fx .entry .metadata .authors {
    width: 0;
    white-space: nowrap;
    overflow: hidden;
    padding-left: 10px;
    margin-left: -5px
  }

  .fx .entry .metadata .ago {
    display: none;
  }

  .fx .entry.u5 .summary {
    display: none
  }

  /* full artical */
  .board.presentation-100 {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  .entryholder {
    padding-bottom: 0;
  }

  .entryholder .fx-button.secondary {
    display: none;
  }

  #mainArea, #feedlyPart0.area {
    padding-bottom: 0!important;
  }

  /* movein page view */
  /* container */
  .headerInfo+.floatingEntryScroller {
    top: 50px;
  }

  /* title */
  .u100Entry {
    margin-top: 1em;
  }

  .u100Entry .title {
    margin-top: 0;
  }

  .tagsHolder {
    margin: 0;
  }

  /* image */
  .slideEntryContent img {
    margin-top: 1em!important;
  }

  /* full article view */
  .list-entries .shareBarHolder {
    margin: 1em 0;
  }

  .list-entries .headerInfo.headerInfo-article {
    margin-top: 0.5em;
    height: 40px!important;
  }

  .list-entries .shareBarHolder i, .list-entries .shareBarHolder .fx.tag-button {
    zoom: 0.8;
  }

  .list-entries img {
    margin-top: 1em!important;
  }

  /* 底部滚动空间 */
  .feedlyPageFX__bottom-padding {
    height: 50vh;
  }

  /* ===== remove AD. ===== */
  .EntryList__chunk>div.entry.u5 {
    display: none!important;
  }

  .entry.cards:has(.SponsorPrompt__sponsored) {
    display: none;
  }
}