☰

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.

  1. /* ==UserStyle==
  2. @name           UserScript.zone – Dark Redesign [Ath]
  3. @namespace      athari
  4. @version        1.0.1
  5. @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.
  6. @author         Athari (https://github.com/Athari)
  7. @homepageURL    https://github.com/Athari/AthariUserCSS
  8. @supportURL     https://github.com/Athari/AthariUserCSS/issues
  9. @license        MIT
  10. @preprocessor   default
  11.  
  12. @var            checkbox ath-max-desc-lines-enabled "Description: Limit height"    1
  13. @var            range    ath-min-desc-lines         "Description: Min lines"       [4, 1, 12]
  14. @var            range    ath-max-desc-lines         "Description: Max lines"       [4, 1, 12]
  15. @var            select   ath-desc-hover             "Description: On hover"        ["scroll:Scroll*", "overlay:Overlay", "none:Do nothing"]
  16. @var            number   ath-script-width           "Script block width"           [590, 300, 1000, 10, 'px']
  17. ==/UserStyle== */
  18.  
  19. @-moz-document domain("userscript.zone") {
  20.   :root {
  21.     color-scheme: dark;
  22.   }
  23.  
  24.   body {
  25.     display: flex;
  26.     flex-flow: column;
  27.     height: auto;
  28.     min-height: 100vh;
  29.     overflow: hidden scroll;
  30.   }
  31.  
  32.   * {
  33.     color: #ccc;
  34.     font: 15px/1.3 Segoe UI, Lato, sans-serif;
  35.   }
  36.  
  37.   .row.row {
  38.     background: #111;
  39.     border-color: #333 !important;
  40.   }
  41.   body:not(.howto) {
  42.     .row {
  43.       margin: 0;
  44.       padding: 0;
  45.     }
  46.     [class^="col"] {
  47.       display: contents;
  48.       width: auto;
  49.       min-height: 0;
  50.       margin: 0;
  51.       padding: 0;
  52.     }
  53.     table, tbody, tr {
  54.       display: contents;
  55.     }
  56.     .container.small {
  57.       width: 100%;
  58.       max-width: none;
  59.       margin: 55px 40px 10px 40px;
  60.       padding: 0;
  61.     }
  62.   }
  63.  
  64.   a:not([data-weight]),
  65.   .row.pagination input {
  66.     color: #88f !important;
  67.     text-decoration: none !important;
  68.     &:hover {
  69.       color: #ccf !important;
  70.     }
  71.   }
  72.   a[data-weight] {
  73.     letter-spacing: 1px;
  74.     filter: brightness(1.2) drop-shadow(0 0 1px #fff8) drop-shadow(0 0 3px #000);
  75.     -webkit-text-stroke: currentcolor 1px;
  76.     text-decoration: none;
  77.     transition: all;
  78.     transition-duration: 200ms;
  79.     transition-timing-function: ease-out;
  80.     transition-behavior: allow-discrete;
  81.     transition-delay: 50ms;
  82.     transform: scale(1);
  83.     &:hover {
  84.       transition-delay: 0ms;
  85.       filter: brightness(2) drop-shadow(0 0 1px #fff8) drop-shadow(0 0 3px #000);
  86.       transform: scale(1.3);
  87.       z-index: 1;
  88.     }
  89.   }
  90.   .highlight {
  91.     border-radius: 4px;
  92.     color: #bb0;
  93.     font-weight: 500 !important;
  94.   }
  95.  
  96.   .row.pagination {
  97.     display: flex;
  98.     flex-flow: row;
  99.     justify-content: center;
  100.     input {
  101.       font-size: 1rem !important;
  102.       margin: 0 4px;
  103.       padding: 6px 14px;
  104.       background: #222;
  105.     }
  106.     form.selected input {
  107.       color: #fff !important;
  108.       font-weight: bold !important;
  109.     }
  110.   }
  111.  
  112.   #search {
  113.     width: 25em;
  114.     padding: 2px 6px;
  115.     box-shadow: none;
  116.     background: #222;
  117.     border: solid 1px #555;
  118.     border-radius: 4px;
  119.     transition-duration: 0s;
  120.   }
  121.   input[type=submit] {
  122.     margin: 0;
  123.   }
  124.  
  125.   .row.header:not(#\0) {
  126.     position: fixed;
  127.     inset: 0 0 auto 0;
  128.     display: flex;
  129.     flex-flow: row;
  130.     gap: 20px;
  131.     align-items: center;
  132.     padding: 3px 40px;
  133.     background: #0008;
  134.     backdrop-filter: brightness(1.5) blur(8px);
  135.     z-index: 100;
  136.     table, tbody, tr, td, ul, li, div, .row {
  137.       display: contents !important;
  138.       visibility: visible !important;
  139.     }
  140.     > .name {
  141.       filter: brightness(1.2) drop-shadow(1px 1px 1px #000) drop-shadow(0 0 3px #000);
  142.       .logo {
  143.         &:hover {
  144.           filter: brightness(1.6) drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px #000);
  145.         }
  146.         -webkit-text-stroke: currentcolor 1px;
  147.         span {
  148.           font-size: 2rem;
  149.           letter-spacing: 1px;
  150.         }
  151.         .chars + .chare {
  152.           color: #088;
  153.           margin: 0 3px 0 -3px;
  154.         }
  155.         .charc {
  156.           color: #55f;
  157.         }
  158.         .chari {
  159.           color: seagreen;
  160.         }
  161.         .charZ, .charo, .charn, .chare {
  162.           color: #888;
  163.         }
  164.       }
  165.       > span {
  166.         color: #777;
  167.       }
  168.     }
  169.     > .tools {
  170.       display: contents;
  171.       td.label {
  172.         display: block !important;
  173.         padding: 0;
  174.         color: #999;
  175.       }
  176.       form {
  177.         display: flex;
  178.         flex-flow: row;
  179.         gap: 5px;
  180.         margin: 0 0 0 auto;
  181.       }
  182.       .entry.start label {
  183.         margin-left: auto;
  184.       }
  185.       .entry.tools {
  186.         label {
  187.           display: none;
  188.         }
  189.       }
  190.     }
  191.   }
  192.  
  193.   .row:has(> .search_stats) {
  194.     &, & > div {
  195.       display: contents;
  196.     }
  197.     .search_stats {
  198.       display: block;
  199.       margin: 10px 0;
  200.       font-size: 1rem;
  201.     }
  202.   }
  203.   .trywithallurls {
  204.     margin: 10px 0;
  205.   }
  206.  
  207.   .row.script:not(.steps) {
  208.     position: static;
  209.     anchor-name: --ath-anchor-script;
  210.     height: anchor-size(--ath-anchor-script height);
  211.     display: inline grid !important;
  212.     grid-template-areas:
  213.       "origin   origin   origin   origin  "
  214.       "name     name     name     name    "
  215.       "desc     desc     desc     desc    "
  216.       "action-1 action-2 action-3 action-4";
  217.     grid-template-columns: 1fr 1fr 1fr 1fr;
  218.     grid-template-rows: auto;
  219.     align-items: baseline;
  220.     width: var(--ath-script-width);
  221.     margin: 0 10px 16px 0 !important;
  222.     padding: 6px 12px;
  223.     background: #222 !important;
  224.     border: solid 1px #333 !important;
  225.     border-radius: 10px;
  226.     .row {
  227.       display: contents;
  228.     }
  229.     .origins {
  230.       grid-area: origin;
  231.       display: flex;
  232.       gap: 0.7ch;
  233.       white-space: nowrap;
  234.       overflow: hidden;
  235.       text-overflow: ellipsis;
  236.       * {
  237.         font-size: 0.9rem;
  238.       }
  239.       .origin {
  240.         font-weight: 500;
  241.         color: #999;
  242.       }
  243.       .origin_item_id {
  244.         max-width: none;
  245.         color: #999;
  246.       }
  247.     }
  248.     .all_urls {
  249.       grid-area: origin;
  250.       margin: 0 0 0 auto;
  251.       padding: 0;
  252.     }
  253.     .name {
  254.       grid-area: name;
  255.       margin: 4px 0;
  256.       a {
  257.         font-size: 1.1rem;
  258.       }
  259.     }
  260.     .version {
  261.       grid-area: name;
  262.       margin: 0 0 0 auto;
  263.       font-size: 1rem;
  264.       color: #aaa;
  265.     }
  266.     .description {
  267.       grid-area: desc;
  268.       display: block;
  269.       margin: 5px 0;
  270.       color: #ccc;
  271.       min-height: calc(1lh * var(--ath-min-desc-lines));
  272.       @container style(--ath-max-desc-lines-enabled: 1) {
  273.         max-height: calc(1lh * var(--ath-max-desc-lines));
  274.         overflow: hidden;
  275.         text-overflow: ellipsis;
  276.         @supports (-webkit-line-clamp: 1) {
  277.           display: --webkit-box;
  278.           -webkit-line-clamp: var(--ath-max-desc-lines);
  279.           line-clamp: var(--ath-max-desc-lines);
  280.           -webkit-box-orient: vertical;
  281.         }
  282.         @container style(--ath-desc-hover: scroll) {
  283.           scrollbar-gutter: stable;
  284.           &:hover {
  285.             overflow: hidden auto;
  286.             @supports (-webkit-line-clamp: 1) {
  287.               -webkit-line-clamp: none;
  288.               line-clamp: none;
  289.             }
  290.           }
  291.           &::-webkit-scrollbar-thumb {
  292.             display: none;
  293.           }
  294.         }
  295.         @container style(--ath-desc-hover: overlay) {
  296.           scrollbar-gutter: stable;
  297.           &:hover {
  298.             overflow: visible;
  299.             z-index: 100;
  300.             @supports (-webkit-line-clamp: 1) {
  301.               -webkit-line-clamp: none;
  302.               line-clamp: none;
  303.             }
  304.             text-shadow: 0 0 1px #000,
  305.               -1px -1px 0 #000, +0px -1px 0 #000, +1px -1px 0 #000,
  306.               -1px +0px 0 #000, +0px +0px 0 #000, +1px +0px 0 #000,
  307.               -1px +1px 0 #000, +0px +1px 0 #000, +1px +1px 0 #000;
  308.             -webkit-text-stroke: 0.2px;
  309.           }
  310.         }
  311.       }
  312.     }
  313.     .script_actions {
  314.       .action {
  315.         text-align: center;
  316.         &.install {
  317.           grid-area: action-4;
  318.           margin: 0 0 0 auto;
  319.           a {
  320.             padding: 4px 16px;
  321.             text-align: center;
  322.             background: #444 !important;
  323.             color: #ccc !important;
  324.             border: solid 1px #555 !important;
  325.             border-radius: 10px;
  326.             &:hover {
  327.               background: #666 !important;
  328.               color: #fff !important;
  329.               border: solid 1px #777 !important;
  330.             }
  331.           }
  332.         }
  333.         &.issues {
  334.           grid-area: action-3;
  335.           margin: 0 20px 0 0;
  336.         }
  337.         &.code {
  338.           grid-area: action-2;
  339.           margin: 0 20px 0 0;
  340.         }
  341.         &.report {
  342.           grid-area: action-1;
  343.           margin: 10px auto 10px 0;
  344.           a {
  345.             color: #f88 !important;
  346.             font-size: 0;
  347.             opacity: 0.5;
  348.             &::after {
  349.               content: "Report";
  350.               font-size: 1rem;
  351.             }
  352.             &:hover {
  353.               opacity: 1;
  354.             }
  355.           }
  356.         }
  357.       }
  358.     }
  359.   }
  360.  
  361.   .middle:has(.popular-searches) {
  362.     display: flex;
  363.     flex-flow: column;
  364.     align-items: center;
  365.     margin: 20px;
  366.     .row.popular-searches {
  367.       justify-content: center;
  368.       max-width: 900px;
  369.       margin: 20px;
  370.       padding: 15px 20px;
  371.       background: #222;
  372.       border: solid 1px #333;
  373.       border-radius: 20px;
  374.       h2 {
  375.         font-size: 2rem;
  376.         margin: 10px 0;
  377.         font-weight: 500;
  378.       }
  379.       .cloud {
  380.         gap: 0 10px;
  381.         line-height: 1em;
  382.         li {
  383.           margin: 0;
  384.         }
  385.       }
  386.     }
  387.   }
  388.  
  389.   .row.navigation {
  390.     position: static;
  391.     margin: 55px 0 0 0;
  392.     border-color: #0000 !important;
  393.     * {
  394.       background: #222 !important;
  395.       color: #ccc !important;
  396.       border-color: #0000 !important;
  397.       &:hover {
  398.         color: #fff !important;
  399.       }
  400.     }
  401.     label {
  402.       padding: 0;
  403.     }
  404.     .entries {
  405.       width: auto;
  406.       .tabs {
  407.         display: flex;
  408.         flex-flow: row;
  409.         gap: 30px;
  410.       }
  411.     }
  412.   }
  413.   .subnav .tab-switch:checked + .tab-label * {
  414.     font-weight: bold !important;
  415.   }
  416.  
  417.   .row.footer:not(#\0) {
  418.     display: flex;
  419.     flex-flow: row;
  420.     align-items: center;
  421.     justify-content: center;
  422.     gap: 20px;
  423.     min-height: 0;
  424.     margin: auto 0 0 0;
  425.     padding: 10px;
  426.     background: #000;
  427.     [class^="col"] {
  428.       display: contents;
  429.     }
  430.     .hidden {
  431.       display: block !important;
  432.     }
  433.   }
  434. }