☰

Reddit responsive + customizations

Reddit website is more suitable for wide screens.

Instalar como estilo de usuario¿?
Script recomendado por el autor

Puede que también te guste Reddit Bigger Carousel.

Instalar este script 
  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. }