☰

UserScript.zone – Dark Redesign [Ath]

Complete redesign of UserScript.zone in dark colors. Aims to display all contents on a single screen at reslutions 1920×1080+. Configurable block size.

/* ==UserStyle==
@name           UserScript.zone – Dark Redesign [Ath]
@namespace      athari
@version        1.0.1
@description    Complete redesign of UserScript.zone in dark colors. Aims to display all contents on a single screen at reslutions 1920×1080+. Configurable block size.
@author         Athari (https://github.com/Athari)
@homepageURL    https://github.com/Athari/AthariUserCSS
@supportURL     https://github.com/Athari/AthariUserCSS/issues
@license        MIT
@preprocessor   default

@var            checkbox ath-max-desc-lines-enabled "Description: Limit height"    1
@var            range    ath-min-desc-lines         "Description: Min lines"       [4, 1, 12]
@var            range    ath-max-desc-lines         "Description: Max lines"       [4, 1, 12]
@var            select   ath-desc-hover             "Description: On hover"        ["scroll:Scroll*", "overlay:Overlay", "none:Do nothing"]
@var            number   ath-script-width           "Script block width"           [590, 300, 1000, 10, 'px']
==/UserStyle== */

@-moz-document domain("userscript.zone") {
  :root {
    color-scheme: dark;
  }

  body {
    display: flex;
    flex-flow: column;
    height: auto;
    min-height: 100vh;
    overflow: hidden scroll;
  }

  * {
    color: #ccc;
    font: 15px/1.3 Segoe UI, Lato, sans-serif;
  }

  .row.row {
    background: #111;
    border-color: #333 !important;
  }
  body:not(.howto) {
    .row {
      margin: 0;
      padding: 0;
    }
    [class^="col"] {
      display: contents;
      width: auto;
      min-height: 0;
      margin: 0;
      padding: 0;
    }
    table, tbody, tr {
      display: contents;
    }
    .container.small {
      width: 100%;
      max-width: none;
      margin: 55px 40px 10px 40px;
      padding: 0;
    }
  }

  a:not([data-weight]),
  .row.pagination input {
    color: #88f !important;
    text-decoration: none !important;
    &:hover {
      color: #ccf !important;
    }
  }
  a[data-weight] {
    letter-spacing: 1px;
    filter: brightness(1.2) drop-shadow(0 0 1px #fff8) drop-shadow(0 0 3px #000);
    -webkit-text-stroke: currentcolor 1px;
    text-decoration: none;
    transition: all;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
    transition-behavior: allow-discrete;
    transition-delay: 50ms;
    transform: scale(1);
    &:hover {
      transition-delay: 0ms;
      filter: brightness(2) drop-shadow(0 0 1px #fff8) drop-shadow(0 0 3px #000);
      transform: scale(1.3);
      z-index: 1;
    }
  }
  .highlight {
    border-radius: 4px;
    color: #bb0;
    font-weight: 500 !important;
  }

  .row.pagination {
    display: flex;
    flex-flow: row;
    justify-content: center;
    input {
      font-size: 1rem !important;
      margin: 0 4px;
      padding: 6px 14px;
      background: #222;
    }
    form.selected input {
      color: #fff !important;
      font-weight: bold !important;
    }
  }

  #search {
    width: 25em;
    padding: 2px 6px;
    box-shadow: none;
    background: #222;
    border: solid 1px #555;
    border-radius: 4px;
    transition-duration: 0s;
  }
  input[type=submit] {
    margin: 0;
  }

  .row.header:not(#\0) {
    position: fixed;
    inset: 0 0 auto 0;
    display: flex;
    flex-flow: row;
    gap: 20px;
    align-items: center;
    padding: 3px 40px;
    background: #0008;
    backdrop-filter: brightness(1.5) blur(8px);
    z-index: 100;
    table, tbody, tr, td, ul, li, div, .row {
      display: contents !important;
      visibility: visible !important;
    }
    > .name {
      filter: brightness(1.2) drop-shadow(1px 1px 1px #000) drop-shadow(0 0 3px #000);
      .logo {
        &:hover {
          filter: brightness(1.6) drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px #000);
        }
        -webkit-text-stroke: currentcolor 1px;
        span {
          font-size: 2rem;
          letter-spacing: 1px;
        }
        .chars + .chare {
          color: #088;
          margin: 0 3px 0 -3px;
        }
        .charc {
          color: #55f;
        }
        .chari {
          color: seagreen;
        }
        .charZ, .charo, .charn, .chare {
          color: #888;
        }
      }
      > span {
        color: #777;
      }
    }
    > .tools {
      display: contents;
      td.label {
        display: block !important;
        padding: 0;
        color: #999;
      }
      form {
        display: flex;
        flex-flow: row;
        gap: 5px;
        margin: 0 0 0 auto;
      }
      .entry.start label {
        margin-left: auto;
      }
      .entry.tools {
        label {
          display: none;
        }
      }
    }
  }

  .row:has(> .search_stats) {
    &, & > div {
      display: contents;
    }
    .search_stats {
      display: block;
      margin: 10px 0;
      font-size: 1rem;
    }
  }
  .trywithallurls {
    margin: 10px 0;
  }

  .row.script:not(.steps) {
    position: static;
    anchor-name: --ath-anchor-script;
    height: anchor-size(--ath-anchor-script height);
    display: inline grid !important;
    grid-template-areas:
      "origin   origin   origin   origin  "
      "name     name     name     name    "
      "desc     desc     desc     desc    "
      "action-1 action-2 action-3 action-4";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    align-items: baseline;
    width: var(--ath-script-width);
    margin: 0 10px 16px 0 !important;
    padding: 6px 12px;
    background: #222 !important;
    border: solid 1px #333 !important;
    border-radius: 10px;
    .row {
      display: contents;
    }
    .origins {
      grid-area: origin;
      display: flex;
      gap: 0.7ch;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      * {
        font-size: 0.9rem;
      }
      .origin {
        font-weight: 500;
        color: #999;
      }
      .origin_item_id {
        max-width: none;
        color: #999;
      }
    }
    .all_urls {
      grid-area: origin;
      margin: 0 0 0 auto;
      padding: 0;
    }
    .name {
      grid-area: name;
      margin: 4px 0;
      a {
        font-size: 1.1rem;
      }
    }
    .version {
      grid-area: name;
      margin: 0 0 0 auto;
      font-size: 1rem;
      color: #aaa;
    }
    .description {
      grid-area: desc;
      display: block;
      margin: 5px 0;
      color: #ccc;
      min-height: calc(1lh * var(--ath-min-desc-lines));
      @container style(--ath-max-desc-lines-enabled: 1) {
        max-height: calc(1lh * var(--ath-max-desc-lines));
        overflow: hidden;
        text-overflow: ellipsis;
        @supports (-webkit-line-clamp: 1) {
          display: --webkit-box;
          -webkit-line-clamp: var(--ath-max-desc-lines);
          line-clamp: var(--ath-max-desc-lines);
          -webkit-box-orient: vertical;
        }
        @container style(--ath-desc-hover: scroll) {
          scrollbar-gutter: stable;
          &:hover {
            overflow: hidden auto;
            @supports (-webkit-line-clamp: 1) {
              -webkit-line-clamp: none;
              line-clamp: none;
            }
          }
          &::-webkit-scrollbar-thumb {
            display: none;
          }
        }
        @container style(--ath-desc-hover: overlay) {
          scrollbar-gutter: stable;
          &:hover {
            overflow: visible;
            z-index: 100;
            @supports (-webkit-line-clamp: 1) {
              -webkit-line-clamp: none;
              line-clamp: none;
            }
            text-shadow: 0 0 1px #000,
              -1px -1px 0 #000, +0px -1px 0 #000, +1px -1px 0 #000,
              -1px +0px 0 #000, +0px +0px 0 #000, +1px +0px 0 #000,
              -1px +1px 0 #000, +0px +1px 0 #000, +1px +1px 0 #000;
            -webkit-text-stroke: 0.2px;
          }
        }
      }
    }
    .script_actions {
      .action {
        text-align: center;
        &.install {
          grid-area: action-4;
          margin: 0 0 0 auto;
          a {
            padding: 4px 16px;
            text-align: center;
            background: #444 !important;
            color: #ccc !important;
            border: solid 1px #555 !important;
            border-radius: 10px;
            &:hover {
              background: #666 !important;
              color: #fff !important;
              border: solid 1px #777 !important;
            }
          }
        }
        &.issues {
          grid-area: action-3;
          margin: 0 20px 0 0;
        }
        &.code {
          grid-area: action-2;
          margin: 0 20px 0 0;
        }
        &.report {
          grid-area: action-1;
          margin: 10px auto 10px 0;
          a {
            color: #f88 !important;
            font-size: 0;
            opacity: 0.5;
            &::after {
              content: "Report";
              font-size: 1rem;
            }
            &:hover {
              opacity: 1;
            }
          }
        }
      }
    }
  }

  .middle:has(.popular-searches) {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin: 20px;
    .row.popular-searches {
      justify-content: center;
      max-width: 900px;
      margin: 20px;
      padding: 15px 20px;
      background: #222;
      border: solid 1px #333;
      border-radius: 20px;
      h2 {
        font-size: 2rem;
        margin: 10px 0;
        font-weight: 500;
      }
      .cloud {
        gap: 0 10px;
        line-height: 1em;
        li {
          margin: 0;
        }
      }
    }
  }

  .row.navigation {
    position: static;
    margin: 55px 0 0 0;
    border-color: #0000 !important;
    * {
      background: #222 !important;
      color: #ccc !important;
      border-color: #0000 !important;
      &:hover {
        color: #fff !important;
      }
    }
    label {
      padding: 0;
    }
    .entries {
      width: auto;
      .tabs {
        display: flex;
        flex-flow: row;
        gap: 30px;
      }
    }
  }
  .subnav .tab-switch:checked + .tab-label * {
    font-weight: bold !important;
  }

  .row.footer:not(#\0) {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 0;
    margin: auto 0 0 0;
    padding: 10px;
    background: #000;
    [class^="col"] {
      display: contents;
    }
    .hidden {
      display: block !important;
    }
  }
}