diff --git a/src/scripts/tweaks.json b/src/scripts/tweaks.json index 7c77d0615..0b4b281a3 100644 --- a/src/scripts/tweaks.json +++ b/src/scripts/tweaks.json @@ -14,6 +14,11 @@ "label": "Use a slim layout for filtered posts", "default": false }, + "checkmark_stack": { + "type": "checkbox", + "label": "Use a slim layout for \"important internet checkmarks\"", + "default": false + }, "highlight_contributed_content": { "type": "checkbox", "label": "Highlight contributed content on reblogs", diff --git a/src/scripts/tweaks/checkmark_stack.js b/src/scripts/tweaks/checkmark_stack.js new file mode 100644 index 000000000..f75c9d4ac --- /dev/null +++ b/src/scripts/tweaks/checkmark_stack.js @@ -0,0 +1,52 @@ +import { keyToCss } from '../../util/css_map.js'; +import { buildStyle } from '../../util/interface.js'; +import { pageModifications } from '../../util/mutations.js'; + +let styleElementMax = 0; +const styleElement = buildStyle(); + +const updateStyleElement = count => { + if (count > styleElementMax) { + styleElementMax = count; + + styleElement.textContent = ` + ${keyToCss('blueCheckmarksContainer')}, ${keyToCss('blueCheckmarkContainer')} { + transition: margin 0.5s ease; + } + + *:not(:hover) > ${keyToCss('blueCheckmarksContainer')} ${keyToCss('blueCheckmarkContainer')} { + margin-right: -10px; + } + + *:not(:hover) > ${keyToCss('blueCheckmarksContainer')} { + margin-right: 10px; + } + + ${keyToCss('blueCheckmarkContainer')} > :is(svg, img) { + filter: drop-shadow(1px 0px 2px rgb(0 0 0 / 0.5)); + } + + ${keyToCss('blueCheckmarksContainer')} { + isolation: isolate; + } + + ` + [...Array(styleElementMax).keys()].map(i => i + 1).map(i => ` + ${keyToCss('blueCheckmarkContainer')}:nth-last-child(${i}) { + z-index: ${i}; + } + `).join(''); + } +}; + +const processBlueCheckmarksContainer = blueCheckmarksContainers => + updateStyleElement(Math.max(...blueCheckmarksContainers.map(el => el.children.length))); + +export const main = async () => { + document.head.append(styleElement); + pageModifications.register(keyToCss('blueCheckmarksContainer'), processBlueCheckmarksContainer); +}; + +export const clean = async () => { + pageModifications.unregister(processBlueCheckmarksContainer); + styleElement.remove(); +};