Gadget-rainbowheaders.css

MediaWiki page

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* Headers for Pride Month - opt-in user gadget */
.theme-fandomdesktop-light {
    --grad-red:     #ff99cc;
    --grad-orange:  #ffcc66;
    --grad-yellow:  #ffffaa;
    --grad-green:   #99ffcc;
    --grad-blue:    #55bbff;
    --grad-purple:  #cc99ff;
}
.theme-fandomdesktop-dark {
    --grad-red:     #ff0066;
    --grad-orange:  #ff9933;
    --grad-yellow:  #ffff66;
    --grad-green:   #33cc66;
    --grad-blue:    #0099ff;
    --grad-purple:  #993399;
}

.page-content h2 { border-bottom-width: 2px; }
.page-content h3 { border-bottom-width: 1px; }
.page-content h4 { border-bottom-width: 1px; }
.page-content h5 { border-bottom-width: 1px; }
.page-content h6 { border-bottom-width: 1px; }
.page-content h7 { border-bottom-width: 1px; }
.page-content h8 { border-bottom-width: 1px; }

.page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6, .page-content h7, .page-content h8 { border-style: solid; border-color: transparent; }
   .page-content h2 { border-image: linear-gradient(to right, var(--grad-purple) 0%, var(--grad-red) 13%, var(--grad-orange) 26%, var(--grad-yellow) 39%, var(--grad-green) 52%, var(--grad-blue) 65%, var(--grad-purple) 78%, var(--theme-page-background-color) 100%) 1; }
    .page-content h3 { border-image: linear-gradient(to right, var(--grad-purple) 0%, var(--grad-red) 8%, var(--grad-orange) 16%, var(--grad-yellow) 24%, var(--grad-green) 32%, var(--grad-blue) 40%, var(--grad-purple) 48%, transparent 56%) 1; }
    .page-content h4 { border-image: linear-gradient(to right, var(--grad-purple) 0%, var(--grad-red) 8%, var(--grad-orange) 16%, var(--grad-yellow) 24%, var(--grad-green) 32%, var(--grad-blue) 40%, var(--grad-purple) 48%, transparent 56%) 1; }
    .page-content h5 { border-image: linear-gradient(to right, var(--grad-purple) 0%, var(--grad-red) 8%, var(--grad-orange) 16%, var(--grad-yellow) 24%, var(--grad-green) 32%, var(--grad-blue) 40%, var(--grad-purple) 48%, transparent 56%) 1; }
    .page-content h6 { border-image: linear-gradient(to right, var(--grad-purple) 0%, var(--grad-red) 8%, var(--grad-orange) 16%, var(--grad-yellow) 24%, var(--grad-green) 32%, var(--grad-blue) 40%, var(--grad-purple) 48%, transparent 56%) 1; }
    .page-content h7 { border-image: linear-gradient(to right, var(--grad-purple) 0%, var(--grad-red) 8%, var(--grad-orange) 16%, var(--grad-yellow) 24%, var(--grad-green) 32%, var(--grad-blue) 40%, var(--grad-purple) 48%, transparent 56%) 1; }
    .page-content h8 { border-image: linear-gradient(to right, var(--grad-purple) 0%, var(--grad-red) 8%, var(--grad-orange) 16%, var(--grad-yellow) 24%, var(--grad-green) 32%, var(--grad-blue) 40%, var(--grad-purple) 48%, transparent 56%) 1; }