matheuszarkov_gradient-text/styles.css

/* ── Default CSS vars ─────────────────────────────────────────────────────── */
body {
  --gh-gradient-angle: 45deg;

  --gh-normal-gradient-start: #85ff95;
  --gh-normal-gradient-end:   #bcff7d;
  --gh-normal-gradient: linear-gradient(var(--gh-gradient-angle), var(--gh-normal-gradient-start) 0%, var(--gh-normal-gradient-end) 100%);

  --gh-heading-gradient-start: #85ff95;
  --gh-heading-gradient-end:   #bcff7d;
  --gh-heading-gradient: linear-gradient(var(--gh-gradient-angle), var(--gh-heading-gradient-start) 0%, var(--gh-heading-gradient-end) 100%);

  --gh-bold-gradient-start: #85ff95;
  --gh-bold-gradient-end:   #bcff7d;
  --gh-bold-gradient: linear-gradient(var(--gh-gradient-angle), var(--gh-bold-gradient-start) 0%, var(--gh-bold-gradient-end) 100%);

  --gh-italic-gradient-start: #85ff95;
  --gh-italic-gradient-end:   #bcff7d;
  --gh-italic-gradient: linear-gradient(var(--gh-gradient-angle), var(--gh-italic-gradient-start) 0%, var(--gh-italic-gradient-end) 100%);

  --gh-wikilink-gradient-start: #85ff95;
  --gh-wikilink-gradient-end:   #bcff7d;
  --gh-wikilink-gradient: linear-gradient(var(--gh-gradient-angle), var(--gh-wikilink-gradient-start) 0%, var(--gh-wikilink-gradient-end) 100%);
  --gh-wikilink-underline-color: var(--gh-wikilink-gradient-start);

  --gh-external-gradient-start: #85ff95;
  --gh-external-gradient-end:   #bcff7d;
  --gh-external-gradient: linear-gradient(var(--gh-gradient-angle), var(--gh-external-gradient-start) 0%, var(--gh-external-gradient-end) 100%);
  --gh-external-underline-color: var(--gh-external-gradient-start);
}

/* ── Normal text gradient (opt-in, activated by gh-normal-enabled class) ─── */

/* Reading view: paragraphs, list items, table cells, blockquotes */
body.gh-normal-enabled .markdown-rendered p,
body.gh-normal-enabled .markdown-rendered li,
body.gh-normal-enabled .markdown-rendered blockquote p,
body.gh-normal-enabled .markdown-rendered td,
body.gh-normal-enabled .markdown-rendered th {
  background-image: var(--gh-normal-gradient);
  background-size: 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Editor (CM6 live preview / source) — exclude headers and code blocks */
body.gh-normal-enabled .markdown-source-view.mod-cm6 .cm-line:not(.cm-header):not(.HyperMD-header-1):not(.HyperMD-header-2):not(.HyperMD-header-3):not(.HyperMD-header-4):not(.HyperMD-header-5):not(.HyperMD-header-6):not(.HyperMD-codeblock):not(.cm-hmd-codeblock) {
  background-image: var(--gh-normal-gradient);
  background-size: 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Restore inline code inside gradient paragraphs so it stays readable */
body.gh-normal-enabled .markdown-rendered p code,
body.gh-normal-enabled .markdown-rendered li code,
body.gh-normal-enabled .markdown-rendered blockquote code,
body.gh-normal-enabled .markdown-rendered td code,
body.gh-normal-enabled .markdown-rendered th code {
  background-image: none;
  -webkit-text-fill-color: var(--code-normal, var(--text-normal));
}

/* ── Gradient rules ───────────────────────────────────────────────────────── */

.cm-strong,
.markdown-rendered strong {
  background-image: var(--gh-bold-gradient);
  background-size: 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.cm-em,
.markdown-rendered em {
  background-image: var(--gh-italic-gradient);
  background-size: 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.markdown-rendered .internal-link,
.markdown-rendered .internal-link.is-unresolved,
.markdown-rendered a.internal-link.is-unresolved,
.markdown-source-view.mod-cm6 .cm-hmd-internal-link,
.markdown-source-view.mod-cm6 .cm-hmd-internal-link.is-unresolved,
.cm-s-obsidian span.cm-hmd-internal-link,
.cm-s-obsidian span.cm-hmd-internal-link.is-unresolved {
  background-image: var(--gh-wikilink-gradient);
  background-size: 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-decoration-color: var(--gh-wikilink-underline-color);
}

.markdown-rendered .external-link,
.cm-s-obsidian span.cm-link,
.cm-s-obsidian span.cm-url {
  background-image: var(--gh-external-gradient);
  background-size: 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-decoration-color: var(--gh-external-underline-color);
}

.cm-header,
h1, .markdown-rendered h1, .HyperMD-header-1, .HyperMD-list-line .cm-header-1,
h2, .markdown-rendered h2, .HyperMD-header-2, .HyperMD-list-line .cm-header-2,
h3, .markdown-rendered h3, .HyperMD-header-3, .HyperMD-list-line .cm-header-3,
h4, .markdown-rendered h4, .HyperMD-header-4, .HyperMD-list-line .cm-header-4,
h5, .markdown-rendered h5, .HyperMD-header-5, .HyperMD-list-line .cm-header-5,
h6, .markdown-rendered h6, .HyperMD-header-6, .HyperMD-list-line .cm-header-6 {
  background-image: var(--gh-heading-gradient);
  background-size: 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ── Disable all gradients ────────────────────────────────────────────────── */

body.gh-all-gradient-disabled .cm-header,
body.gh-all-gradient-disabled .cm-header-1,
body.gh-all-gradient-disabled .cm-header-2,
body.gh-all-gradient-disabled .cm-header-3,
body.gh-all-gradient-disabled .cm-header-4,
body.gh-all-gradient-disabled .cm-header-5,
body.gh-all-gradient-disabled .cm-header-6,
body.gh-all-gradient-disabled h1, body.gh-all-gradient-disabled .markdown-rendered h1,
body.gh-all-gradient-disabled h2, body.gh-all-gradient-disabled .markdown-rendered h2,
body.gh-all-gradient-disabled h3, body.gh-all-gradient-disabled .markdown-rendered h3,
body.gh-all-gradient-disabled h4, body.gh-all-gradient-disabled .markdown-rendered h4,
body.gh-all-gradient-disabled h5, body.gh-all-gradient-disabled .markdown-rendered h5,
body.gh-all-gradient-disabled h6, body.gh-all-gradient-disabled .markdown-rendered h6,
body.gh-all-gradient-disabled .HyperMD-header-1, body.gh-all-gradient-disabled .HyperMD-list-line .cm-header-1,
body.gh-all-gradient-disabled .HyperMD-header-2, body.gh-all-gradient-disabled .HyperMD-list-line .cm-header-2,
body.gh-all-gradient-disabled .HyperMD-header-3, body.gh-all-gradient-disabled .HyperMD-list-line .cm-header-3,
body.gh-all-gradient-disabled .HyperMD-header-4, body.gh-all-gradient-disabled .HyperMD-list-line .cm-header-4,
body.gh-all-gradient-disabled .HyperMD-header-5, body.gh-all-gradient-disabled .HyperMD-list-line .cm-header-5,
body.gh-all-gradient-disabled .HyperMD-header-6, body.gh-all-gradient-disabled .HyperMD-list-line .cm-header-6 {
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--heading-color, var(--text-normal, inherit)) !important;
  -webkit-text-fill-color: var(--heading-color, var(--text-normal, inherit)) !important;
}

body.gh-all-gradient-disabled .cm-strong,
body.gh-all-gradient-disabled .markdown-rendered strong {
  background-image: none !important;
  color: var(--bold-color, var(--text-normal, inherit)) !important;
  -webkit-text-fill-color: var(--bold-color, var(--text-normal, inherit)) !important;
}

body.gh-all-gradient-disabled .cm-em,
body.gh-all-gradient-disabled .markdown-rendered em {
  background-image: none !important;
  color: var(--italic-color, var(--text-normal, inherit)) !important;
  -webkit-text-fill-color: var(--italic-color, var(--text-normal, inherit)) !important;
}

body.gh-all-gradient-disabled .markdown-rendered .internal-link,
body.gh-all-gradient-disabled .markdown-source-view.mod-cm6 .cm-hmd-internal-link,
body.gh-all-gradient-disabled .cm-s-obsidian span.cm-hmd-internal-link {
  background-image: none !important;
  color: var(--link-color, var(--text-accent, inherit)) !important;
  -webkit-text-fill-color: var(--link-color, var(--text-accent, inherit)) !important;
  text-decoration-color: currentColor !important;
}

body.gh-all-gradient-disabled .markdown-rendered .external-link,
body.gh-all-gradient-disabled .cm-s-obsidian span.cm-link,
body.gh-all-gradient-disabled .cm-s-obsidian span.cm-url {
  background-image: none !important;
  color: var(--link-external-color, var(--text-accent, inherit)) !important;
  -webkit-text-fill-color: var(--link-external-color, var(--text-accent, inherit)) !important;
  text-decoration-color: currentColor !important;
}

body.gh-all-gradient-disabled .markdown-rendered p,
body.gh-all-gradient-disabled .markdown-rendered li,
body.gh-all-gradient-disabled .markdown-rendered blockquote p,
body.gh-all-gradient-disabled .markdown-rendered td,
body.gh-all-gradient-disabled .markdown-rendered th,
body.gh-all-gradient-disabled .markdown-source-view.mod-cm6 .cm-line {
  background-image: none !important;
  color: var(--text-normal, inherit) !important;
  -webkit-text-fill-color: var(--text-normal, inherit) !important;
}

body.gh-all-gradient-disabled .gh-setting-preview {
  background-image: none !important;
  color: var(--text-normal, inherit) !important;
  -webkit-text-fill-color: var(--text-normal, inherit) !important;
}

/* ── Per-group disable (when dropdown is set to "None") ───────────────────── */

body.gh-heading-disabled .cm-header,
body.gh-heading-disabled .cm-header-1,
body.gh-heading-disabled .cm-header-2,
body.gh-heading-disabled .cm-header-3,
body.gh-heading-disabled .cm-header-4,
body.gh-heading-disabled .cm-header-5,
body.gh-heading-disabled .cm-header-6,
body.gh-heading-disabled h1, body.gh-heading-disabled .markdown-rendered h1,
body.gh-heading-disabled h2, body.gh-heading-disabled .markdown-rendered h2,
body.gh-heading-disabled h3, body.gh-heading-disabled .markdown-rendered h3,
body.gh-heading-disabled h4, body.gh-heading-disabled .markdown-rendered h4,
body.gh-heading-disabled h5, body.gh-heading-disabled .markdown-rendered h5,
body.gh-heading-disabled h6, body.gh-heading-disabled .markdown-rendered h6,
body.gh-heading-disabled .HyperMD-header-1, body.gh-heading-disabled .HyperMD-list-line .cm-header-1,
body.gh-heading-disabled .HyperMD-header-2, body.gh-heading-disabled .HyperMD-list-line .cm-header-2,
body.gh-heading-disabled .HyperMD-header-3, body.gh-heading-disabled .HyperMD-list-line .cm-header-3,
body.gh-heading-disabled .HyperMD-header-4, body.gh-heading-disabled .HyperMD-list-line .cm-header-4,
body.gh-heading-disabled .HyperMD-header-5, body.gh-heading-disabled .HyperMD-list-line .cm-header-5,
body.gh-heading-disabled .HyperMD-header-6, body.gh-heading-disabled .HyperMD-list-line .cm-header-6 {
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--heading-color, var(--text-normal, inherit)) !important;
  -webkit-text-fill-color: var(--heading-color, var(--text-normal, inherit)) !important;
}

body.gh-bold-disabled .cm-strong,
body.gh-bold-disabled .markdown-rendered strong {
  background-image: none !important;
  color: var(--bold-color, var(--text-normal, inherit)) !important;
  -webkit-text-fill-color: var(--bold-color, var(--text-normal, inherit)) !important;
}

body.gh-italic-disabled .cm-em,
body.gh-italic-disabled .markdown-rendered em {
  background-image: none !important;
  color: var(--italic-color, var(--text-normal, inherit)) !important;
  -webkit-text-fill-color: var(--italic-color, var(--text-normal, inherit)) !important;
}

body.gh-wikilink-disabled .markdown-rendered .internal-link,
body.gh-wikilink-disabled .markdown-source-view.mod-cm6 .cm-hmd-internal-link,
body.gh-wikilink-disabled .cm-s-obsidian span.cm-hmd-internal-link {
  background-image: none !important;
  color: var(--link-color, var(--text-accent, inherit)) !important;
  -webkit-text-fill-color: var(--link-color, var(--text-accent, inherit)) !important;
  text-decoration-color: currentColor !important;
}

body.gh-external-disabled .markdown-rendered .external-link,
body.gh-external-disabled .cm-s-obsidian span.cm-link,
body.gh-external-disabled .cm-s-obsidian span.cm-url {
  background-image: none !important;
  color: var(--link-external-color, var(--text-accent, inherit)) !important;
  -webkit-text-fill-color: var(--link-external-color, var(--text-accent, inherit)) !important;
  text-decoration-color: currentColor !important;
}

/* ── Preset classes: normal text ──────────────────────────────────────────── */

body.gh-normal-green-snake    { --gh-normal-gradient-start: #85ff95; --gh-normal-gradient-end: #bcff7d; }
body.gh-normal-midnight-green { --gh-normal-gradient-start: #98e053; --gh-normal-gradient-end: #5cd7e7; }
body.gh-normal-inferno        { --gh-normal-gradient-start: #ff8037; --gh-normal-gradient-end: #fa3737; }
body.gh-normal-underwater     { --gh-normal-gradient-start: #2dbcff; --gh-normal-gradient-end: #7be7d5; }
body.gh-normal-mystic-purple  { --gh-normal-gradient-start: #37afff; --gh-normal-gradient-end: #ce63ff; }

/* ── Preset classes: heading ──────────────────────────────────────────────── */

body.gh-heading-green-snake    { --gh-heading-gradient-start: #85ff95; --gh-heading-gradient-end: #bcff7d; }
body.gh-heading-midnight-green { --gh-heading-gradient-start: #98e053; --gh-heading-gradient-end: #5cd7e7; }
body.gh-heading-inferno        { --gh-heading-gradient-start: #ff8037; --gh-heading-gradient-end: #fa3737; }
body.gh-heading-underwater     { --gh-heading-gradient-start: #2dbcff; --gh-heading-gradient-end: #7be7d5; }
body.gh-heading-mystic-purple  { --gh-heading-gradient-start: #37afff; --gh-heading-gradient-end: #ce63ff; }

/* ── Preset classes: bold ─────────────────────────────────────────────────── */

body.gh-bold-green-snake    { --gh-bold-gradient-start: #85ff95; --gh-bold-gradient-end: #bcff7d; }
body.gh-bold-midnight-green { --gh-bold-gradient-start: #98e053; --gh-bold-gradient-end: #5cd7e7; }
body.gh-bold-inferno        { --gh-bold-gradient-start: #ff8037; --gh-bold-gradient-end: #fa3737; }
body.gh-bold-underwater     { --gh-bold-gradient-start: #2dbcff; --gh-bold-gradient-end: #7be7d5; }
body.gh-bold-mystic-purple  { --gh-bold-gradient-start: #37afff; --gh-bold-gradient-end: #ce63ff; }

/* ── Preset classes: italic ───────────────────────────────────────────────── */

body.gh-italic-green-snake    { --gh-italic-gradient-start: #85ff95; --gh-italic-gradient-end: #bcff7d; }
body.gh-italic-midnight-green { --gh-italic-gradient-start: #98e053; --gh-italic-gradient-end: #5cd7e7; }
body.gh-italic-inferno        { --gh-italic-gradient-start: #ff8037; --gh-italic-gradient-end: #fa3737; }
body.gh-italic-underwater     { --gh-italic-gradient-start: #2dbcff; --gh-italic-gradient-end: #7be7d5; }
body.gh-italic-mystic-purple  { --gh-italic-gradient-start: #37afff; --gh-italic-gradient-end: #ce63ff; }

/* ── Preset classes: wikilink ─────────────────────────────────────────────── */

body.gh-wikilink-green-snake    { --gh-wikilink-gradient-start: #85ff95; --gh-wikilink-gradient-end: #bcff7d; --gh-wikilink-underline-color: #85ff95; }
body.gh-wikilink-midnight-green { --gh-wikilink-gradient-start: #98e053; --gh-wikilink-gradient-end: #5cd7e7; --gh-wikilink-underline-color: #98e053; }
body.gh-wikilink-inferno        { --gh-wikilink-gradient-start: #ff8037; --gh-wikilink-gradient-end: #fa3737; --gh-wikilink-underline-color: #ff8037; }
body.gh-wikilink-underwater     { --gh-wikilink-gradient-start: #2dbcff; --gh-wikilink-gradient-end: #7be7d5; --gh-wikilink-underline-color: #2dbcff; }
body.gh-wikilink-mystic-purple  { --gh-wikilink-gradient-start: #37afff; --gh-wikilink-gradient-end: #ce63ff; --gh-wikilink-underline-color: #37afff; }

/* ── Preset classes: external ─────────────────────────────────────────────── */

body.gh-external-green-snake    { --gh-external-gradient-start: #85ff95; --gh-external-gradient-end: #bcff7d; --gh-external-underline-color: #85ff95; }
body.gh-external-midnight-green { --gh-external-gradient-start: #98e053; --gh-external-gradient-end: #5cd7e7; --gh-external-underline-color: #98e053; }
body.gh-external-inferno        { --gh-external-gradient-start: #ff8037; --gh-external-gradient-end: #fa3737; --gh-external-underline-color: #ff8037; }
body.gh-external-underwater     { --gh-external-gradient-start: #2dbcff; --gh-external-gradient-end: #7be7d5; --gh-external-underline-color: #2dbcff; }
body.gh-external-mystic-purple  { --gh-external-gradient-start: #37afff; --gh-external-gradient-end: #ce63ff; --gh-external-underline-color: #37afff; }

/* ── Settings preview labels ──────────────────────────────────────────────── */

.gh-setting-preview {
  margin-left: 12px;
  font-weight: 600;
  white-space: nowrap;
  background-size: 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.gh-preview-heading  { background-image: var(--gh-heading-gradient); }
.gh-preview-normal   { background-image: var(--gh-normal-gradient); }
.gh-preview-bold     { background-image: var(--gh-bold-gradient); font-weight: 800; }
.gh-preview-italic   { background-image: var(--gh-italic-gradient); font-style: italic; }
.gh-preview-wikilink {
  background-image: var(--gh-wikilink-gradient);
  text-decoration: underline;
  text-decoration-color: var(--gh-wikilink-underline-color);
  text-underline-offset: 0.15em;
}
.gh-preview-external {
  background-image: var(--gh-external-gradient);
  text-decoration: underline;
  text-decoration-color: var(--gh-external-underline-color);
  text-underline-offset: 0.15em;
}

/* ── Color dots (custom mode) ─────────────────────────────────────────────── */

.gh-color-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
}

.gh-color-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s, border-color 0.1s;
  box-sizing: border-box;
}

.gh-color-dot:hover {
  transform: scale(1.15);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Checkered pattern for "no color" (middle dot when empty) */
.gh-dot-empty {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #888 25%, transparent 25%),
    linear-gradient(-45deg, #888 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #888 75%),
    linear-gradient(-45deg, transparent 75%, #888 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  opacity: 0.55;
}

.gh-dot-empty:hover {
  opacity: 0.85;
}

.gh-reset-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.1s, border-color 0.1s, transform 0.15s;
}

.gh-reset-btn:hover {
  color: var(--text-normal);
  border-color: rgba(255, 255, 255, 0.5);
  transform: rotate(-30deg);
}

/* ── Color picker modal ───────────────────────────────────────────────────── */

.gh-color-picker-modal {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

.gh-color-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 8px;
  user-select: none;
}

.gh-sv-canvas {
  display: block;
  border-radius: 6px;
  cursor: crosshair;
}

.gh-hue-canvas {
  display: block;
  border-radius: 4px;
  cursor: crosshair;
}

.gh-cp-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gh-cp-preview {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.gh-cp-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-monospace);
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-secondary);
  color: var(--text-normal);
}

.gh-cp-mode-group {
  display: flex;
  gap: 3px;
}

.gh-cp-mode-btn {
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-secondary);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.gh-cp-mode-btn:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

.gh-cp-mode-btn.active {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}

.gh-cp-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gh-cp-actions {
  display: flex;
  gap: 6px;
}

.gh-cp-save {
  padding: 5px 14px;
  border-radius: 4px;
  border: none;
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.1s;
}

.gh-cp-save:hover { opacity: 0.85; }

.gh-cp-cancel {
  padding: 5px 14px;
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-secondary);
  color: var(--text-normal);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.1s;
}

.gh-cp-cancel:hover { background: var(--background-modifier-hover); }