☰

Greasy Fork is available in English.

Small Thumbnails + Visible Titles

Are thumbnails too large? Too close together? Would you rather always see titles? Gotcha.

  1. /* ==UserStyle==
  2. @name         Small Thumbnails + Visible Titles
  3. @version      6.0.1
  4. @description  Are thumbnails too large? Too close together? Would you rather always see titles? Gotcha.
  5. @author       Valognir (https://www.deviantart.com/Valognir)
  6. @namespace    https://greatest.deepsurf.us/en/scripts/404194-small-thumbnails-visible-titles
  7.  
  8. ==/UserStyle== */
  9. @-moz-document domain("deviantart.com") {
  10.     div[data-testid="thumb"] {
  11.         & > img {
  12.             scale: 70%;
  13.             margin-top: -50px;
  14.         }
  15.     }
  16.  
  17.  
  18.     [data-testid="content_row"] a[aria-label$=", visual art"] + div,
  19.     [data-testid="content_row"] a[aria-label$=", film"] + div {
  20.         & > div > div:last-child > div {
  21.             content-visibility: visible;
  22.             opacity: 1;
  23.         }
  24.  
  25.         & > div:first-child {
  26.             opacity: 0;
  27.         }
  28.     }
  29.     
  30.     [data-testid="content_row"] a[aria-label$=", visual art"] + div > div:nth-child(3),
  31.     [data-testid="content_row"] a[aria-label$=", film"] + div > div:nth-child(3) {
  32.         & > div:last-child {
  33.             left: 10px;
  34.             right: 10px;
  35.             bottom: 5px;
  36.             & > div > a {
  37.                 margin-bottom: -8px;
  38.                 text-shadow: 0 0 3px var(--gray9);
  39.             }
  40.         }
  41.     }
  42.  
  43.     .light-green [data-testid="content_row"] a[aria-label$=", visual art"] + div > div:nth-child(3),
  44.     .light-green [data-testid="content_row"] a[aria-label$=", film"] + div > div:nth-child(3) {
  45.         & > div:last-child {
  46.             & > div > a {
  47.                 text-shadow: 0 0 3px var(--khaki2);
  48.             }
  49.             h2,
  50.             a,
  51.             button,
  52.             button[aria-label="Award Badge"] > span {
  53.                 color: var(--khaki9);
  54.                 &:hover {
  55.                     color: var(--g-brand);
  56.                 }
  57.             }
  58.         }
  59.     }
  60.  
  61.     .theme-light [data-testid="content_row"] a[aria-label$=", visual art"] + div > div:nth-child(3),
  62.     .theme-light [data-testid="content_row"] a[aria-label$=", film"] + div > div:nth-child(3) {
  63.         & > div:last-child {
  64.             & > div > a {
  65.                 text-shadow: 0 0 3px var(--gray1);
  66.             }
  67.             h2,
  68.             a,
  69.             button,
  70.             button[aria-label="Award Badge"] > span {
  71.                 color: var(--gray9);
  72.                 &:hover {
  73.                     color: var(--g-brand);
  74.                 }
  75.             }
  76.         }
  77.     }
  78. }