☰

Imgur - Minimal Design for non-Imgurians

Removes all the unnecessary stuff, for people that's not interested about Imgur culture.

当前为 2022-06-29 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name         Imgur - Minimal Design for non-Imgurians
  3. @description  Removes all the unnecessary stuff, for people that's not interested about Imgur culture.
  4. @author       krisu (https://github.com/krisu5)
  5. @namespace    github.com/krisu5/userstyles
  6. @homepageURL  https://github.com/krisu5/userstyles/tree/master/Imgur%20-%20Minimal%20and%20Anti-Social%20for%20non-Imgurians
  7. @supportURL   https://github.com/krisu5/userstyles/issues
  8. @version      1.2.7
  9. @license      unlicense
  10. @preprocessor default
  11. ==/UserStyle== */
  12.  
  13. @-moz-document url("https://imgur.com/"), url-prefix("https://imgur.com/upload") {
  14. /* -----------------------------------------------
  15.    _____               _                          
  16.   |  ___|             | |                         
  17.   | |_ _ __ ___  _ __ | |_ _ __   __ _  __ _  ___ 
  18.   |  _| '__/ _ \| '_ \| __| '_ \ / _` |/ _` |/ _ \
  19.   | | | | | (_) | | | | |_| |_) | (_| | (_| |  __/
  20.   \_| |_|  \___/|_| |_|\__| .__/ \__,_|\__, |\___|
  21.                           | |           __/ |     
  22.                           |_|          |___/
  23.   ------------------------------------------------ */
  24.  
  25. .InteractiveBackground, .Message.welcome, .TrendingTags, .CoverChangeGallery,
  26. .NewCover.isFixed, .PopUpClose, .Button.upload img, [class*="Emerald"]:not(.EmeraldButton), .SnowFlakesBg,
  27. [class^="UploadSpinner"]
  28. { display: none !important; }
  29.  
  30. body, html { overflow-y: hidden !important; }
  31.  
  32. .Button.upload {
  33.     position: fixed !important;
  34.     margin: 0 !important;
  35.     top: 50% !important;
  36.     left: 50% !important;
  37.     transform: translate(-50%, -50%) !important;
  38.     width: 60vw !important;
  39.     height: 23vw !important;
  40.     border-radius: 25px !important;
  41.     display: flex !important;
  42.     justify-content: center !important;
  43.     align-items: center !important;
  44. }
  45.  
  46. .Button.upload:hover:before { border-radius: 25px !important; }
  47.  
  48. .Button.upload:after { font-size: clamp(2rem, 5vw, 7rem) !important; }
  49.  
  50. .NewCover { background: transparent !important; }
  51. }
  52.  
  53. @-moz-document domain("imgur.com") {
  54. /* --------------------------------
  55.    _____       _ _                 
  56.   |  __ \     | | |                
  57.   | |  \/ __ _| | | ___ _ __ _   _ 
  58.   | | __ / _` | | |/ _ \ '__| | | |
  59.   | |_\ \ (_| | | |  __/ |  | |_| |
  60.    \____/\__,_|_|_|\___|_|   \__, |
  61.                               __/ |
  62.                              |___/
  63.    & Everything else
  64.   --------------------------------- */
  65.  
  66. /* ================================
  67.    ======= NEW DESIGN (2020) ======
  68.    ================================ */
  69.  
  70. .CommentsList, .Footer, .Gallery-Sidebar, .NavbarNotifications, .Searchbar, .Navigation-Container,
  71. [class*="share-btn"]:not(.share-btn-other):not(.share-btn-download), .CoverPostMeta.Display,
  72. .Gallery-EngagementBarContainer, .ButtonBackToTop, .Gallery-Content--tags, .TagManager.PostOptions-section,
  73. .TagSuggestion-container, .toast2, [class*="bottomad"], [class*="BottomAd"], .Footer-whitelist,
  74. .BottomRecirc, .btn-wall--no, .BannerTop3, .UploadSpinner-contentWrapper, .Page404-contentWrapper
  75. { display: none !important; }
  76.  
  77. body:not([class=""]) {
  78.     background-color: #27292d;
  79.     overflow: auto;
  80. }
  81.  
  82. /* --------------------------------------------------------
  83.    Change the Ukraine colors of the logo to original colors
  84.    -------------------------------------------------------- */
  85.     
  86. /* NOTE: I wholeheartedly support Ukraine, but that Imgur logo is tacky and ugly. This is not political stance. */
  87.  
  88. .Navbar-logo :not([fill="#FFF"]),
  89. .Navbar-logo :not([fill="#FFFFFF"]),
  90. .Navbar-logo :not([fill="#1BB76E"])
  91. { fill: #fff; }
  92.     
  93. /* v--- Letter "i" dot's color ---v */
  94. .Navbar-logo [fill="#005BBB"]:last-child { fill: #1BB76E; }
  95.  
  96. /* v--- Last three blue colored paths on top ---v */
  97. .Navbar-logo [fill="#FFD500"]:nth-child(-n+6) { transform: translateY(-1px); }
  98.  
  99. /* -------------------------------------------------------- */
  100.  
  101. .Button.upload { font-size: 0; }
  102.  
  103. .Button.upload:after {
  104.     content: "Upload";
  105.     font-size: 15px;
  106. }
  107.  
  108. .Button.upload img {
  109.     margin-right: 9px;
  110.     margin-top: -7px;
  111. }
  112.  
  113. .NewCover.GalleryCover.isFixed, .NewCover.isFixed .GoUp {
  114.     visibility: hidden !important;
  115.     transition: inherit !important;
  116.     box-shadow: none !important;
  117. }
  118.  
  119. .Navbar-signin {
  120.     background: #5c940d;
  121.     padding: 9px 20px;
  122.     border-radius: 3px;
  123.     box-shadow: 0 6px 10px 0 rgba(27,28,30,.31);
  124.     text-shadow: none !important;
  125. }
  126.  
  127. .Navbar-signup {
  128.     padding-left: 20px;
  129.     padding-right: 20px;
  130.     min-width: inherit !important;
  131. }
  132.  
  133. .EmeraldButton {
  134.     font-size: 0 !important;
  135.     padding-left: 16px !important;
  136.     padding-right: 16px !important;
  137. }
  138.  
  139. .EmeraldButton:after {
  140.     content: "Support Imgur!";
  141.     font-size: 15px !important;
  142. }
  143.  
  144. .ProfileNavbar-loggedIn .EmeraldButton { margin-right: 25px !important; }
  145.  
  146. .btn-wall--yes {
  147.     display: block !important;
  148.     width: 100% !important;
  149.     height: auto !important;
  150.     padding: 20px 0 22px !important;
  151.     font-size: 28px !important;
  152.     margin: 0 auto !important;
  153. }
  154.  
  155. .Page404Cover-logo {
  156.     position: absolute !important;
  157.     top: 25vh !important;
  158.     margin-top: 0 !important;
  159.     margin-bottom: 0 !important;
  160. }
  161.     
  162. /* ------------------------------
  163.    Download button always visible
  164.    ------------------------------ */
  165.    
  166. .Gallery-Options .Dropdown-title,
  167. .Gallery-OptionsMenu button[type="button"]:first-child
  168. { display: none !important; }
  169.  
  170. .Gallery-OptionsMenu .Dropdown-menu {
  171.     display: inherit !important;
  172.     visibility: hidden !important;
  173. }
  174.  
  175. .Gallery-OptionsMenu .Dropdown-list {
  176.     margin: -51px 0 0 -158px !important;
  177.     padding: 17px 0 !important;
  178. }
  179.  
  180. .Gallery-OptionsMenu button:not([class=""]) {
  181.     width: auto !important;
  182.     border-radius: 5px !important;
  183.     color: #b4b9c2 !important;
  184.     visibility: visible !important;
  185. }
  186.  
  187. .Gallery-OptionsMenu button:hover {
  188.     background: #1bb76e !important;
  189.     color: #fff !important;
  190. }
  191.  
  192. .Gallery-OptionsMenu button:hover .icon [fill] { fill: #fff !important; }
  193.  
  194. /* -------------------------
  195.    Image / video size tweaks
  196.    ------------------------- */
  197.  
  198. /* ------- NOT MODAL ------- */
  199.  
  200. .Gallery-ContentWrapper .Gallery-Content--media video:not(.fullscreen) { max-height: 70vh !important; }
  201.  
  202. /* -------- IN MODAL ------- */
  203.  
  204. .ImageViewer > .Dialog-wrapper > div[style^="height:"] {
  205.     width: auto !important;
  206.     height: auto !important;
  207. }
  208.  
  209. .ImageViewerContent img {
  210.     max-height: 99.5vh !important;
  211.     max-width: 99vw !important;
  212.     min-height: inherit !important;
  213.     border: 5px solid #fff !important;
  214.     border-radius: 6px !important;
  215. }
  216.  
  217. .ImageViewer {
  218.     border: 0 !important;
  219.     border-radius: 0 !important;
  220. }
  221.  
  222. /* ------------------------- */
  223.  
  224. .Gallery-ContentWrapper .Gallery-Content--media { background-color: rgba(0,0,0,0.4) !important; }
  225.  
  226. .Gallery-Content--descr {
  227.     background: rgba(0,0,0,.3) !important;
  228.     padding: 20px !important;
  229.     border-radius: 10px !important;
  230. }
  231.  
  232. .loadMore {
  233.     padding: 0 0 3px 0 !important;
  234.     margin-bottom: 25px !important;
  235. }
  236.  
  237. .loadMore svg { margin-top: 3px !important; }
  238.  
  239. .UploadPost .ImageDescription { padding: 0 24px 24px !important; }
  240.  
  241.  
  242. /* ================================
  243.    ========== OLD DESIGN ==========
  244.    ================================ */
  245.  
  246. .Open-Save-To-Folder-Button, #cta-container, #comments-container, .left #recommendations,
  247. .next-prev, #side-gallery, .search-container, #notification-container, .post-action *,
  248. .side-footer-links, .divider, [class^="post-options-tag"]
  249. { display: none !important; }
  250.  
  251. #topbar .account { left: -175px !important; }
  252.  
  253. .post-pad {
  254.     transform: translateX(22.5%) !important;
  255.     margin-bottom: 20px !important;
  256. }
  257.  
  258. .upload-global-post .post-pad { transform: inherit !important; }
  259.  
  260. ul.post-options-extra { margin-top: 20px !important; }
  261.  
  262. .post-action {
  263.     padding: 0 !important;
  264.     min-height: 15px !important;
  265. }
  266. }
  267.  
  268. @-moz-document url-prefix("https://zip.imgur.com/") { * { color: #fff !important; } }