better-home.css

/* ==UserStyle==
@name           better-home
@namespace      nekometer.com.com/esnya/better-home
@version        1.0.0
@description    Better Home
@license        MIT License
@author         esnya
@preprocessor   stylus
@var  number  ld-lines "Location Desc Lines"          2
@var  number  lf-lines  "Location Firends Lines"      2
@var  number  lcol-xl "Location Columns Extra Large"  4
@var  number  lcol-lg "Location Columns Large"        3
@var  number  lcol-md "Location Columns Medium"       2
@var  number  lcol-sm "Location Columns Small"        2
@var  number  lcol-xs "Location Columns Extra Small"  1
@var  number  fcol-xl "Friends Columns Extra Large"   4
@var  number  fcol-lg "Friends Columns Large"         3
@var  number  fcol-md "Friends Columns Medium"        2
@var  number  fcol-sm "Friends Columns Small"         2
@var  number  fcol-xs "Friends Columns Extra Small"   1
==/UserStyle== */
@-moz-document url-prefix("https://vrchat.com/home") {
  body * {
    scrollbar-width: thin;

    &::-webkit-scrollbar {
      width: 5px;
      height: 5px;
      background-color: #555555;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #cccccc;
    }
  }

  .img-thumbnail {
    width: 100% !important;
    height: auto !important;
    border: none;
    background: none;
    padding: 0;
    margin: 0 !important;
    border-radius: 0;
  }

  .locations {
    display: flex;
    flex-wrap: wrap;
    justify-content: stretch;
    margin: 0 !important;

    & > div {
      margin: 0 !important;
      overflow: hidden;

      flex: 0 0 (100/lcol-xl)%;
      @media screen and (max-width: 1904px) {
        flex: 0 0 (100/lcol-lg)%;
      }
      @media screen and (max-width: 1264px) {
        flex: 0 0 (100/lcol-md)%;
      }
      @media screen and (max-width: 960px) {
        flex: 0 0 (100/lcol-sm)%;
      }
      @media screen and (max-width: 600px) {
        flex: 0 0 (100/lcol-xs)%;
      }

      & > div {
        height: 100%;
        padding: .5em;
      }
    }
  }

  .location-card {
    &.size-large {
      height: 100%;
      padding: 0 !important;
      margin: 0 !important;

      & > div {
        display: flex;
        flex-direction: column;

        & > div:nth-child(3) {
          flex: 0 0 (ld-lines * 1.5)em;
          overflow-y: auto;
          padding: 0 1em;
          margin-bottom: 0.5em;
          
          & > p {
            margin-bottom: 0;
          }
        }
      }

      .location-title {
        flex: 0 0 2em;
        vertical-align: bottom;
        margin: 0.5em 0.5em;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
      }

      .location-users {
        margin: 0 !important;
        margin-bottom: 0.25em !important;
        max-height: (lf-lines * 3.25) em;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0 .5em;

        & > .row {
          flex-direction: column;
        }
      }
    }

    &.size-normal {
      border: none;
      margin: 0;
      padding: 0;
      img {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        margin-bottom: 0;
        margin-top: -50%;
      }

      .location-title {
        position: relative;
        bottom: 2.5em;
        padding: 0.5em;
        background-color: rgba(0, 0, 0, 0.2);
        opacity: 0.6;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100px;
        box-sizing: border-box;
        height: 2.5em;
        margin-bottom: -10em;
        font-size: x-small;
      }
    }
  }

  .usercard {
    &.size-wide {
      height: 3em;
      padding: 0;
      margin-bottom: 0.25em;

      & > .row {
        margin: 0;
        flex-wrap: nowrap;
        display: flex;
        justify-content: flex-start;
        height: 100%;
        align-items: center;

        & > * {
          flex: 0 0 auto;
          height: 100%;
        }
      }

      .user-img {
        box-sizing: content-box;
        height: 100% !important;
        width: auto;
        border-top-left-radius: .25rem;
        border-bottom-left-radius: .25rem;
        margin: -2px !important;
      }

      .user-info {
        margin: 0;
        margin-left: 0.5em;
        flex: 1 1 0;
        white-space: nowrap;
        display: flex;
        overflow-x: auto;
        align-items: center;
        max-width: initial;

        & > * {
          margin: 0;
          margin-right: 0.5em;
        }
      }
    }
    
    &.size-undefined {
      padding: 0;
      margin: 0;
    
      .row {
        margin: 0;
        
        .user-img {
          border: none !important;
          border-top-left-radius: 0.125rem;
          border-top-right-radius: 0.125rem;
        }
        
        .user-info {
          width: 100%;
          height: 0;
          position: relative;
          max-width: initial;
          white-space: nowrap;
          margin-bottom: 1.6em;
          
          & > :nth-child(1) {
            position: absolute;
            height: 1.75em;
            padding: 0.25em;
            width: 100%;
            bottom: 0;
            margin: 0;
            overflow-x: auto;
            overflow-y: hidden;
            background-color: rgba(0, 0, 0, 0.25);
            opacity: 0.75;
          }
          
          & > .offlineOrOnlineOrWhatever {
            width: 100%;
            position: absolute;
            bottom: 4.5em;
            text-align: right;
            right: 0.5em;
            font-size: small;
          }

          & > .statusDescription {
            height: 2em;
            width: 100%;
            position: absolute;
            top: 0;
            padding: 0 0.5em;
            overflow-x: auto;
            overflow-y: hidden;
          }
        }
      }


      & > div:nth-child(2) {
        margin-bottom: 0;
      }
    }
  }

  .friend-container {
    & > div:nth-child(3) {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      align-content: stretch;
      & > * {
        overflow: hidden;


        flex: 0 0 (100/fcol-xl)%;
        @media screen and (max-width: 1904px) {
          flex: 0 0 (100/fcol-lg)%;
        }
        @media screen and (max-width: 1264px) {
          flex: 0 0 (100/fcol-md)%;
        }
        @media screen and (max-width: 960px) {
          flex: 0 0 (100/fcol-sm)%;
        }
        @media screen and (max-width: 600px) {
          flex: 0 0 (100/fcol-xs)%;
        }

        & > * {
          height: 100%;
          padding: 0.01em 0.1em;
          & > * {
            height: 100%;
          }
        }
      }
    }
  }

  .clearfix {
    display: none;
  }

  // Private World
  .img-thumbnail:not(.user-img):not(.location-img) {
    display: none;
  }
}