NetCarShow Modern by macx

/* ==UserStyle==
@name         NetCarShow Modern
@version      v0.1.3
@namespace    github.com/macx
@description  Modern look for NetCarShow.com
@author       macx
@license      MIT
@homepageURL  https://github.com/macx/netcarshow-modern
@supportURL   https://github.com/macx/netcarshow-modern/issues

==/UserStyle== */

@-moz-document domain("netcarshow.com") {
  /* netcarshow.com*/

  :root {
    --spacing: 1.25rem;
    --spacing--small: 0.9375rem;
    --spacing--xsmall: 0.625rem;

    --content-spacing: 1.5rem;
    --radius: 0.5rem;

    --transition: 120ms ease-in;

    --clr-bg: #000;
    --clr-text: #fff;
    --clr-text--light: rgba(255, 255, 255, 0.8);
    --clr-line: rgba(255, 255, 255, 0.2);
  }

  * {
    box-sizing: border-box;
  }

  body {
    font-family: 'Roboto';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .adW {
    display: none;
  }

  /*
  ┌──────────────────────────────────┐
    FRONT / ARTICLE PAGE
  └──────────────────────────────────┘
  */

  #cc {
    display: grid;
    grid-template-columns: 0.5fr 1.5fr;
    grid-template-rows: 100px 1fr minmax(0, 1fr);
    gap: 20px 20px;
    grid-template-areas:
      'header header'
      'news library'
      'footer footer';

    width: unset;
    padding: var(--spacing);
  }

  .exT {
    display: none;
  }

  /* Header */
  .tL {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    grid-area: header;
  }

  .tL > a {
    display: block;
    margin-bottom: var(--spacing--small);
  }

  .Lx {
    grid-area: news;
    margin: 0;
  }

  .Ll,
  article {
    width: auto;
    grid-area: library;
    border: 0;
  }

  .bP,
  .bU {
    display: block;
    float: none;
    width: auto;
    min-width: unset;
    border: 0;
  }

  .bU {
    position: sticky;
    top: var(--spacing);
    left: 0;
    background-color: transparent;
  }

  .bP img {
    display: block;
    width: 100%;
    height: auto;
  }

  .mT {
    width: auto;
    border: 0;
  }

  .Ls,
  .mD,
  .mT,
  .mTm {
    width: auto;
  }

  /* Search, Description */
  .Ls,
  .mT {
    grid-area: footer;
  }

  /*
  ┌──────────────────────────────────┐
    SIDEBAR / NEW CARS
  └──────────────────────────────────┘
  */

  .Tbc,
  .Tbm {
    text-align: left;
  }

  .ulst {
    margin: 0;
  }

  .ulst li {
    margin-bottom: var(--spacing--xsmall);
  }

  .ulst .s {
    display: block;
    color: var(--clr-text--light);
  }

  /*
  ┌──────────────────────────────────┐
    PAGINATION
  └──────────────────────────────────┘
  */

  .mTm {
    display: flex;
    justify-content: center;
    background-color: transparent;
    gap: 0.5em;
    color: inherit;
    border: 0;
    margin: var(--spacing) 0;
  }

  .navPG {
    display: flex;
    justify-content: center;
    background-color: transparent;
    color: transparent;
  }

  .mTm a:link,
  .mTm a:visited {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--clr-text);
    border: 1px solid var(--clr-text--light);
    border-radius: 50%;
    margin: 0 0.2em;
    transition: all var(--transition);
  }

  .mTm strong {
    margin: 0 -0.2em;
  }

  .mTm strong a:link,
  .mTm strong a:visited,
  .mTm a:hover {
    background-color: var(--clr-text);
    color: var(--clr-bg);
  }

  .mTm a.navNP {
    position: relative;
    color: transparent;
  }

  .mTm a.navNP::before {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    color: var(--clr-text);
    transition: all var(--transition);
  }

  .mTm a.navNP:first-child::before {
    content: '<';
  }

  .mTm a.navNP:last-child::before {
    content: '>';
  }

  .mTm a.navNP:hover::before {
    color: var(--clr-bg);
  }
  /*
  ┌──────────────────────────────────┐
    IMAGE PICKER
  └──────────────────────────────────┘
  */

  #thpg1 {
    max-width: 500px;
    margin: 0 auto;
  }

  .Pi {
    border: 0;
    font-size: 0.8rem;
    font-weight: normal;
  }

  .Pi a {
    font-weight: 400;
  }

  .tss {
    display: flex;
    justify-content: center;
    line-height: 1;
    padding: 0.3em;
    top: unset;
    bottom: -100px;
    width: 100%;
    transition: all var(--transition);
  }

  .Pi:hover .tss {
    bottom: 0;
  }

  /*
  ┌──────────────────────────────────┐
    HEADER
  └──────────────────────────────────┘
  */

  .pL {
    margin-left: 0;
  }

  .pL a {
    display: block;
  }

  .pL img {
    display: block;
    width: auto;
    height: 15px;
  }

  .bT,
  .mSh,
  .navM,
  .navMc,
  .photoHD,
  .tT {
    position: fixed;
  }

  #hA,
  #hB,
  #hC,
  #hD,
  #hE {
    transition: none;
  }

  /*
  ┌──────────────────────────────────┐
    IMAGE STAGE
  └──────────────────────────────────┘
  */

  a.navL,
  a.navR {
    position: fixed;
    width: 4rem;
    height: 4rem;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid var(--clr-line);
    border-radius: var(--radius);
    padding: 0 !important;
    color: transparent;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
    transition: background-color var(--transition);
  }

  a.navL {
    left: var(--content-spacing);
  }

  a.navR {
    right: var(--content-spacing);
  }

  .navL::before,
  .navR::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    content: '';
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.3));
  }

  .navL::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24' fill='%23FFF'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z'/%3E%3C/svg%3E");
  }

  .navR::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24' fill='%23FFF'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z'/%3E%3C/svg%3E");
  }

  .navL:hover,
  .navR:hover {
    background-color: rgba(0, 0, 0, 0.7);
  }

  /*
  ┌──────────────────────────────────┐
    IMAGE TITLE
  └──────────────────────────────────┘
  */

  .ssH1280 {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--content-spacing);
    background-color: #000;
  }

  .bT {
    width: auto;
    left: 50%;
    transform: translateX(-50%);
    border-top: 1px solid var(--clr-line) !important;
    border-radius: var(--radius) var(--radius) 0 0;
  }

  .tT {
    top: unset;
    bottom: 0;
    left: 0;
    width: auto;
    border-radius: 0 var(--radius) 0 0;
    border-top: 1px solid var(--clr-line) !important;
  }

  .mD {
    font-size: 1rem;
    line-height: 1.3;
    padding: 0;
    font-family: inherit;
    text-align: left;
    border: 0;
  }

  .mD h2 {
    font-size: 2.2rem;
    text-align: left;
  }

  .mD p {
    width: auto;
  }

  @media (min-height: 610px) and (min-width: 1152px) {
    #ccW .adHW,
    #ccW .adW {
      display: none;
    }

    #ccW .cc1600 {
      max-width: 100%;
    }

    #ccW .D1280,
    #ccW .D1600 {
      max-width: unset;
    }

    #ccW .cc1280 {
      width: auto;
    }

    #ccW .I1024,
    #ccW .I1280,
    #ccW .I1600,
    #ccW .I800,
    #ccW .bT,
    #ccW .tT {
      border: 0;
    }

    #ccW .ssH1024,
    #ccW .ssH1280,
    #ccW .ssH1600,
    #ccW .ssH800 {
      display: block;
    }

    #ccW .ssH1280 {
      display: flex;
      align-items: center;
    }

    #ccW .cc1280 .pL {
      margin-left: 0;
    }

    #ccW .photoHD {
      width: 100%;
      max-width: unset;
    }

    .navL,
    .navR {
      top: 50%;
      transform: translateY(-50%);
    }

    .photoHD {
      max-width: unset !important;
      max-height: unset !important;
    }

    .mD {
      font-size: 1.25rem;
      line-height: 1.3;
      padding: 0;
    }
  }
}