Skip to content

Instantly share code, notes, and snippets.

@tsibley
Created October 21, 2024 22:41
Show Gist options
  • Save tsibley/e6737592fe7e2384ce15cf844ff0074a to your computer and use it in GitHub Desktop.
Save tsibley/e6737592fe7e2384ce15cf844ff0074a to your computer and use it in GitHub Desktop.
/* Color values from RTD's Doc Diff addon's CSS */
.doc-diff-added { --bgcolor: rgb(171, 242, 188) }
.doc-diff-removed { --bgcolor: rgba(255, 129, 130, 0.4) }
/* Doesn't work in Firefox 131… not sure why… *//*
.doc-diff-removed {
--bgcolor: color(
from rgba(255, 129, 130, 0.4)
srgb
calc(((1 - alpha) * 255) + (alpha * r))
calc(((1 - alpha) * 255) + (alpha * g))
calc(((1 - alpha) * 255) + (alpha * b))
/ 1
)
}
*/
.doc-diff-removed {
/* Hard code mixing rgba(255, 129, 130, 0.4) into white with no alpha. */
--bgcolor: rgb(
calc(((1 - 0.4) * 255) + (0.4 * 255))
calc(((1 - 0.4) * 255) + (0.4 * 129))
calc(((1 - 0.4) * 255) + (0.4 * 130))
);
}
/* Add a 2px box "shadow" on all sides to mimic a 2px outline that sits
* _behind_ other content instead of in front.
*/
.doc-diff-added, .doc-diff-removed {
box-shadow:
-2px -2px var(--bgcolor), /* NW */
2px -2px var(--bgcolor), /* NE */
2px 2px var(--bgcolor), /* SE */
-2px 2px var(--bgcolor); /* SW */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment