☰

Reddit responsive + customizations

Reddit website is more suitable for wide screens.

Nainstalovat jako uživatelský styl?
Skript doporučený autorem

Mohlo by se vám také líbit Reddit Bigger Carousel.

Nainstalovat skript 
  1. /* ==UserStyle==
  2. @name           Reddit responsive + customizations
  3. @version        1.0.6
  4. @description    Reddit website is more suitable for wide screens.
  5. @author         BreatFR (https://breat.fr)
  6. @namespace      https://gitlab.com/breatfr
  7. @homepageURL    https://gitlab.com/breatfr/reddit
  8. @supportURL     https://discord.gg/Q8KSHzdBxs
  9. @license        AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
  10. @preprocessor   stylus
  11.  
  12. @var    text        fontsize        "Custom font size"      1.1rem
  13. @var    checkbox    hidemenu        "Hide menu"             0
  14. @var    checkbox    hidesidebar     "Hide sidebar"          0
  15. @var    select      previewtype     "Preview type" {
  16.     "Contain": "previewtypecontain",
  17.     "Contain big": "previewtypecontainbig",
  18.     "Cover": "previewtypecover"
  19. }
  20. @var    checkbox    widemode        "Wide mode"             1
  21. ==/UserStyle== */
  22.  
  23. /* === Credits ===
  24. Website         https://breat.fr
  25. facebook        https://www.facebook.com/breatfroff
  26. mastodon        https://mastodon.social/@breat_fr
  27. telegram        https://t.me/breatfr
  28. vk              https://vk.com/breatfroff
  29. X (twitter)     https://x.com/breatfroff
  30. === Credits === */
  31.  
  32. @-moz-document domain("reddit.com") {
  33.     /* Versions */
  34.     :root {
  35.         --themeversion: 'Theme v1.0.6 by BreatFR (https://breat.fr)';
  36.         --install1: ' usercssjs.breat.fr ';
  37.         --install2: ' gitlab.com/breatfr/reddit';
  38.         --support1: ' ko-fi.com/breatfr ';
  39.         --support2: ' paypal.me/breat \A';
  40.     }
  41.  
  42.     @media screen and (min-width: 900px) {
  43.         reddit-header-action-items::after {
  44.             background: linear-gradient(88.55deg, rgb(255, 69, 0) 22.43%, rgb(255, 255, 255) 92.28%);
  45.             background-clip: text;
  46.             -webkit-background-clip: text;
  47.             color: transparent;
  48.             content: var(--themeversion) ' Support me: ' url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_ko-fi.png") var(--support1) url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_paypal.png") var(--support2) 'Install: ' url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_breat.fr.png") var(--install1) url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_gitlab.png") var(--install2);
  49.             display: block;
  50.             font-size: 1.2rem;
  51.             left: 9%;
  52.             pointer-events: none;
  53.             position: fixed;
  54.             text-align: center;
  55.             top: 0;
  56.             width: 100%;
  57.             white-space: pre-line;
  58.         }
  59.         
  60.         reddit-header-action-items > header > nav > div:nth-of-type(2) > div > div {
  61.             left: 150px;
  62.             position: absolute;
  63.         }
  64.     }
  65.     
  66.     /* Custom font size */
  67.     div,
  68.     li,
  69.     p,
  70.     span,
  71.     textarea,
  72.     *::placeholder {
  73.         font-size: fontsize !important;
  74.     }
  75.     
  76.     if hidemenu {
  77.         #left-sidebar-container,
  78.         .left-sidebar {
  79.             display: none !important;
  80.             width: 0px !important;
  81.         }
  82.         
  83.         .m\\:col-start-2 {
  84.             grid-column: 1 / span 2 !important;
  85.         }
  86.     }
  87.         
  88.     if hidesidebar {
  89.         #subgrid-container > div {
  90.             gap: 0 !important;
  91.             grid-template-columns: auto 0 !important;
  92.         }
  93.         #subgrid-container > div > main {
  94.             max-width: 100% !important;
  95.             min-width: 100% !important;
  96.             width: 100% !important;
  97.         }
  98.         #subgrid-container > div > div  {
  99.             display: none !important;
  100.             width: 0 !important;
  101.         }
  102.     }
  103.     
  104.     if (previewtype=="previewtypecover") {
  105.         shreddit-aspect-ratio {
  106.             aspect-ratio: auto !important;
  107.             --max-height: 100% !important;
  108.         }
  109.  
  110.         gallery-carousel img,
  111.         gallery-carousel video,
  112.         shreddit-aspect-ratio img,
  113.         shreddit-aspect-ratio video {
  114.             object-fit: cover !important;
  115.         }
  116.     }
  117.     
  118.     if (previewtype=="previewtypecontain") {
  119.         gallery-carousel img,
  120.         shreddit-aspect-ratio img,
  121.         shreddit-aspect-ratio video {
  122.             object-fit: contain !important;
  123.         }
  124.     }
  125.     
  126.     if (previewtype=="previewtypecontainbig") {
  127.         shreddit-aspect-ratio {
  128.             aspect-ratio: auto !important;
  129.             --max-height: 100% !important;
  130.         }
  131.  
  132.         gallery-carousel img,
  133.         shreddit-aspect-ratio img,
  134.         shreddit-aspect-ratio video {
  135.             object-fit: contain !important;
  136.         }
  137.     }
  138.     
  139.     if widemode {
  140.         #subgrid-container {
  141.             box-sizing: border-box !important;
  142.             overflow-x: hidden !important;
  143.         }
  144.         #subgrid-container > div:nth-of-type(1) {
  145.             display: flex !important;
  146.             gap: 1em !important;
  147.             margin-right: 1em !important;
  148.             max-width: 100% !important;
  149.         }
  150.         #subgrid-container > div:nth-of-type(1) > main {
  151.             display: flex;
  152.             flex-direction: column;
  153.             max-width: calc(100% - 316px - 2em) !important;
  154.         }
  155.         shreddit-post-translator *:not([data-testid="subreddit-name"] *) {
  156.             width: 100% !important;
  157.         }
  158.         #subgrid-container > div:nth-of-type(2) {
  159.             max-width: 316px !important;
  160.             min-width: 316px !important;
  161.             width: 316px !important;
  162.         }
  163.         
  164.         .m\\:w-\\[1120px\\] {
  165.             max-width: 100% !important;
  166.             width: 100%;
  167.         }
  168.         .m\\:px-lg {
  169.             padding-left: 1rem;
  170.             padding-right: 1rem;
  171.         }
  172.     }    
  173. }