Rule34 Pretty Griddy (Slick Dracula++) by binury

/* ==UserStyle==
@name           Slick Dracula for Rule34
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A simple userstyle based on the Dracula color scheme, with only slight changes to pretty up the standard look.
@author         ChaCha
@author         Toes
==/UserStyle== */
@-moz-document domain("rule34.xxx") {
  body {
    background-color: #282A37;
    color: #F8F8F2;
  }

  #header {
    background-color: #21222C;
    margin-bottom: 0px !important
  }

  #site-title {
    background-image: none;
  }



  div#header ul#subnavbar {
    background-color: #21222C;
    border-top: 1px solid #44475A;
    border-bottom: 1px solid #44475A;
  }

  a {
    color: #949FBE !important;
  }

  a:hover,
  li.current-page a {
    color: #F8F8F2 !important;
  }

  li.current-page {
    background-image: none !important;
    background-color: #44475A;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #F8F8F2 !important;
  }

  .tag-type-copyright a,
  div.awesomplete .tag-type-copyright {
    color: #BD93F9 !important;
  }
  .tag-type-character a,
  div.awesomplete .tag-type-character {
    color: #50FA7B !important;
  }
  .tag-type-artist a,
  div.awesomplete .tag-type-artist {
    color: #FF79C6 !important;
  }
  .tag-type-general a,
  div.awesomplete .tag-type-general {
    color: #8BE9FD !important;
  }

  span.tag-count {
    color: #F8F8F2;
  }

  @keyframes imagefocus {
    from {
      opacity: 60%;
    }
    to {
      opacity: 100%;
    }
  }



  .manual-page-chooser > input[type="text"],
  .manual-page-chooser > input[type="submit"],
  .pagination a {
    background-color: #282A37;
    border: 1px solid #6272A4;
    height: 22px;
    color: #6272A4;
  }

  div#paginator a:hover {
    background-color: #BD93F9 !important;
  }

  .sidebar div img {
    /* banish lil girl... */
    display: none;
  }

  .status-notice {
    background-color: #282A37 !important;
    border-color: #6272A4 !important;
    margin-left: 0px !important;
    border-radius: 5px;
    border-width: 1px !important;
  }

  div.awesomplete ul {
    background: #44475A !important;
  }

  div.awesomplete input:focus {
    background: #F1FA8C;
    outline: none;
  }

  tr.tableheader {
    background: #6272A4 !important;
  }

  tr.even:hover {
    background: #21222C !important;
  }

  div.sidebar {
    transition:
      opacity 475ms cubic-bezier(0.85, 0, 0.15, 1) 150ms;
    padding: 0.1rem 0.5rem;
    min-width: 180px;
    max-width: unset !important;
    opacity: 0.125;

    &:focus,
    &:focus-within,
    &:hover {
      transition:
        opacity 275ms cubic-bezier(0, 0.55, 0.45, 1) 10ms;
      opacity: 1;
    }

    .tag-search > h5 {
      display: none;
    }
  }

  .content {
    margin: auto;
    max-width: 90vw;
    image-rendering: crisp-edges; /* prefer thumbnails less-blury */
    
    .image-list {
      display: grid;
      place-items: center;
      justify-content: center;
      max-width: 80vw;
      grid-gap: 1px;
      grid-template-columns: repeat(auto-fill, minmax(200px, 250px));

      gap: 2rem;
      column-gap: 1.5rem;
      
      .webm-thumb {
        border: none !important;
      }

      .thumb {
        scale: 1;
        width: unset !important;
        filter: grayscale(10%) saturate(85%);
          transition:
            scale 150ms cubic-bezier(0.68, -0.6, 0.32, 1.6) 30ms,
            filter 100ms linear;

        a {
          /* (unsetting)  */
          display: contents;
          width: auto;
          height: auto;
        }

        &:hover,
        &:focus,
        &:focus-within {
          cursor: pointer;
          scale: 1.35;
          filter:
            grayscale(0)
            saturate(1)
            drop-shadow(1px 2px 3px hsla(220, 3%, 30%, .3))
            drop-shadow(2px 4px 6px hsla(220, 1%, 39%, .3))
            drop-shadow(4px 8px 12px hsla(220, 1%, 38%, .3));
          /* TODO ; just a quickfix/patch for overlap */
          z-index: 2;
        transition:
          scale 250ms cubic-bezier(0.68, -0.6, 0.32, 1.6) 200ms,
          filter 100ms linear;
        }
      }

      img.preview {
        height: 100%;
        width: 100%;
        border-radius: 0.25rem;
        transition: 0.3s;
        overflow: hidden;
        object-fit: contain;
        /*
          my guesstimation of some possible aesthetic (portrait framing) ideal:
          slightly toward bottomside, and partially to the right ?
          (depends on author framing of content but maybe there is a trend)
        */
        object-position: 30% 15%;

        &:hover,
        &:focus,
        &:focus-within {
          border-radius: 0.5rem;
        }
      }
    }
  }



  #content {
    padding: unset !important;
  }
}