From 27285ff5903cdef594b89d6173a8f85ec160a587 Mon Sep 17 00:00:00 2001 From: Anonymous Date: Wed, 12 Jan 2022 00:42:30 +0100 Subject: [PATCH] Improved Tags CSS --- main.meta.js | 2 +- main.user.js | 298 +++++++++++++++++++++++++++++++------------ src/EyeButton.svelte | 9 +- 3 files changed, 226 insertions(+), 83 deletions(-) diff --git a/main.meta.js b/main.meta.js index 81a00d5..360225d 100644 --- a/main.meta.js +++ b/main.meta.js @@ -1,7 +1,7 @@ // ==UserScript== // @name PNGExtraEmbed2 // @namespace https://coom.tech/ -// @version 0.117 +// @version 0.118 // @description uhh // @author You // @match https://boards.4channel.org/* diff --git a/main.user.js b/main.user.js index e09ee48..13a9a1d 100644 --- a/main.user.js +++ b/main.user.js @@ -1,7 +1,7 @@ // ==UserScript== // @name PNGExtraEmbed2 // @namespace https://coom.tech/ -// @version 0.117 +// @version 0.118 // @description uhh // @author You // @match https://boards.4channel.org/* @@ -11523,12 +11523,14 @@ var extract4 = async (b, fn) => { let result; let booru; + let tags = []; for (const e of Object.values(boorus)) { if (e.disabled) continue; result = await findFileFrom(e, fn.substring(0, 32)); if (result.length) { booru = e.name; + tags = result.flatMap((e2) => e2.tags); break; } } @@ -11537,6 +11539,7 @@ const prev = result[0].preview_url; const full = result[0].full_url; return { + tags, source: result[0].source, page: { title: booru, url: result[0].page }, filename: fn.substring(0, 33) + result[0].ext, @@ -15928,28 +15931,33 @@ // src/EyeButton.svelte init_esbuild_inject(); function add_css7(target) { - append_styles(target, "svelte-1xjvk14", ".clickable.svelte-1xjvk14{cursor:pointer;margin-left:2px;margin-right:2px}.clickable.svelte-1xjvk14:hover{text-shadow:0 0 4px palevioletred}.clickable.hasembed.svelte-1xjvk14{color:deeppink}.clickable.hasext.svelte-1xjvk14{color:goldenrod}.clickable.hasblack.svelte-1xjvk14{color:black}a.clickable.hasembed.svelte-1xjvk14{color:deeppink !important}a.clickable.hasext.svelte-1xjvk14{color:goldenrod !important}a.clickable.hasblack.svelte-1xjvk14{color:black !important}"); + append_styles(target, "svelte-y0x208", ".clickable.svelte-y0x208.svelte-y0x208.svelte-y0x208{cursor:pointer;margin-left:2px;margin-right:2px}.hasembed.svelte-y0x208.svelte-y0x208.svelte-y0x208{color:deeppink}.hasext.svelte-y0x208.svelte-y0x208.svelte-y0x208{color:goldenrod}.hasblack.svelte-y0x208.svelte-y0x208.svelte-y0x208{color:black}.hasblack-bg.svelte-y0x208.svelte-y0x208.svelte-y0x208{background-color:black}.clickable.svelte-y0x208.svelte-y0x208.svelte-y0x208:hover{text-shadow:0 0 4px palevioletred}a.clickable.hasembed.svelte-y0x208.svelte-y0x208.svelte-y0x208{color:deeppink !important}a.clickable.hasext.svelte-y0x208.svelte-y0x208.svelte-y0x208{color:goldenrod !important}a.clickable.hasblack.svelte-y0x208.svelte-y0x208.svelte-y0x208{color:black !important}details.tags.svelte-y0x208.svelte-y0x208.svelte-y0x208{display:inline-block;margin-right:2px}details.tags.svelte-y0x208>summary.svelte-y0x208.svelte-y0x208{cursor:pointer}details.tags.svelte-y0x208>ul.svelte-y0x208.svelte-y0x208{position:absolute;min-width:35px;list-style:none;margin-top:2px;padding:0;background-color:#00000044}details.tags.svelte-y0x208>ul.svelte-y0x208>li.svelte-y0x208{padding:2px 2px;margin-bottom:2px}"); } function get_each_context4(ctx, list, i) { const child_ctx = ctx.slice(); - child_ctx[11] = list[i]; + child_ctx[13] = list[i]; return child_ctx; } - function create_if_block_32(ctx) { + function get_each_context_12(ctx, list, i) { + const child_ctx = ctx.slice(); + child_ctx[16] = list[i]; + return child_ctx; + } + function create_if_block_42(ctx) { let span; let mounted; let dispose; return { c() { span = element("span"); - attr(span, "class", "fa clickable svelte-1xjvk14"); + attr(span, "class", "fa clickable svelte-y0x208"); toggle_class(span, "fa-eye", !ctx[3]); toggle_class(span, "fa-eye-slash", ctx[3]); }, m(target, anchor) { insert(target, span, anchor); if (!mounted) { - dispose = listen(span, "click", ctx[5]); + dispose = listen(span, "click", ctx[6]); mounted = true; } }, @@ -15969,7 +15977,7 @@ } }; } - function create_if_block_22(ctx) { + function create_if_block_32(ctx) { let a; let t; let a_href_value; @@ -15977,29 +15985,29 @@ c() { a = element("a"); t = text("Source"); - attr(a, "href", a_href_value = ctx[11].source); + attr(a, "href", a_href_value = ctx[13].source); attr(a, "target", "_blank"); - attr(a, "class", "clickable svelte-1xjvk14"); - toggle_class(a, "hasembed", ctx[11]?.embed_type === 1 /* MEDIA_EMBED */); - toggle_class(a, "hasext", ctx[11]?.embed_type === 0 /* THIRD_EYE */); - toggle_class(a, "hasblack", ctx[11]?.isBlacklisted === true); + attr(a, "class", "clickable svelte-y0x208"); + toggle_class(a, "hasembed", ctx[13]?.embed_type === 1 /* MEDIA_EMBED */); + toggle_class(a, "hasext", ctx[13]?.embed_type === 0 /* THIRD_EYE */); + toggle_class(a, "hasblack", ctx[13]?.isBlacklisted === true); }, m(target, anchor) { insert(target, a, anchor); append(a, t); }, p(ctx2, dirty) { - if (dirty & 1 && a_href_value !== (a_href_value = ctx2[11].source)) { + if (dirty & 1 && a_href_value !== (a_href_value = ctx2[13].source)) { attr(a, "href", a_href_value); } if (dirty & 1) { - toggle_class(a, "hasembed", ctx2[11]?.embed_type === 1 /* MEDIA_EMBED */); + toggle_class(a, "hasembed", ctx2[13]?.embed_type === 1 /* MEDIA_EMBED */); } if (dirty & 1) { - toggle_class(a, "hasext", ctx2[11]?.embed_type === 0 /* THIRD_EYE */); + toggle_class(a, "hasext", ctx2[13]?.embed_type === 0 /* THIRD_EYE */); } if (dirty & 1) { - toggle_class(a, "hasblack", ctx2[11]?.isBlacklisted === true); + toggle_class(a, "hasblack", ctx2[13]?.isBlacklisted === true); } }, d(detaching) { @@ -16008,40 +16016,40 @@ } }; } - function create_if_block_13(ctx) { + function create_if_block_22(ctx) { let a; - let t_value = ctx[11].page.title + ""; + let t_value = ctx[13].page.title + ""; let t; let a_href_value; return { c() { a = element("a"); t = text(t_value); - attr(a, "href", a_href_value = ctx[11].page.url); + attr(a, "href", a_href_value = ctx[13].page.url); attr(a, "target", "_blank"); - attr(a, "class", "clickable svelte-1xjvk14"); - toggle_class(a, "hasembed", ctx[11]?.embed_type === 1 /* MEDIA_EMBED */); - toggle_class(a, "hasext", ctx[11]?.embed_type === 0 /* THIRD_EYE */); - toggle_class(a, "hasblack", ctx[11]?.isBlacklisted === true); + attr(a, "class", "clickable svelte-y0x208"); + toggle_class(a, "hasembed", ctx[13]?.embed_type === 1 /* MEDIA_EMBED */); + toggle_class(a, "hasext", ctx[13]?.embed_type === 0 /* THIRD_EYE */); + toggle_class(a, "hasblack", ctx[13]?.isBlacklisted === true); }, m(target, anchor) { insert(target, a, anchor); append(a, t); }, p(ctx2, dirty) { - if (dirty & 1 && t_value !== (t_value = ctx2[11].page.title + "")) + if (dirty & 1 && t_value !== (t_value = ctx2[13].page.title + "")) set_data(t, t_value); - if (dirty & 1 && a_href_value !== (a_href_value = ctx2[11].page.url)) { + if (dirty & 1 && a_href_value !== (a_href_value = ctx2[13].page.url)) { attr(a, "href", a_href_value); } if (dirty & 1) { - toggle_class(a, "hasembed", ctx2[11]?.embed_type === 1 /* MEDIA_EMBED */); + toggle_class(a, "hasembed", ctx2[13]?.embed_type === 1 /* MEDIA_EMBED */); } if (dirty & 1) { - toggle_class(a, "hasext", ctx2[11]?.embed_type === 0 /* THIRD_EYE */); + toggle_class(a, "hasext", ctx2[13]?.embed_type === 0 /* THIRD_EYE */); } if (dirty & 1) { - toggle_class(a, "hasblack", ctx2[11]?.isBlacklisted === true); + toggle_class(a, "hasblack", ctx2[13]?.isBlacklisted === true); } }, d(detaching) { @@ -16050,6 +16058,106 @@ } }; } + function create_if_block_13(ctx) { + let details; + let summary; + let t1; + let ul; + let each_value_1 = ctx[13].tags; + let each_blocks = []; + for (let i = 0; i < each_value_1.length; i += 1) { + each_blocks[i] = create_each_block_12(get_each_context_12(ctx, each_value_1, i)); + } + return { + c() { + details = element("details"); + summary = element("summary"); + summary.textContent = "Tags"; + t1 = space(); + ul = element("ul"); + for (let i = 0; i < each_blocks.length; i += 1) { + each_blocks[i].c(); + } + attr(summary, "class", "svelte-y0x208"); + toggle_class(summary, "hasembed", ctx[13]?.embed_type === 1 /* MEDIA_EMBED */); + toggle_class(summary, "hasext", ctx[13]?.embed_type === 0 /* THIRD_EYE */); + toggle_class(summary, "hasblack", ctx[13]?.isBlacklisted === true); + attr(ul, "class", "svelte-y0x208"); + attr(details, "class", "tags svelte-y0x208"); + }, + m(target, anchor) { + insert(target, details, anchor); + append(details, summary); + append(details, t1); + append(details, ul); + for (let i = 0; i < each_blocks.length; i += 1) { + each_blocks[i].m(ul, null); + } + }, + p(ctx2, dirty) { + if (dirty & 1) { + toggle_class(summary, "hasembed", ctx2[13]?.embed_type === 1 /* MEDIA_EMBED */); + } + if (dirty & 1) { + toggle_class(summary, "hasext", ctx2[13]?.embed_type === 0 /* THIRD_EYE */); + } + if (dirty & 1) { + toggle_class(summary, "hasblack", ctx2[13]?.isBlacklisted === true); + } + if (dirty & 17) { + each_value_1 = ctx2[13].tags; + let i; + for (i = 0; i < each_value_1.length; i += 1) { + const child_ctx = get_each_context_12(ctx2, each_value_1, i); + if (each_blocks[i]) { + each_blocks[i].p(child_ctx, dirty); + } else { + each_blocks[i] = create_each_block_12(child_ctx); + each_blocks[i].c(); + each_blocks[i].m(ul, null); + } + } + for (; i < each_blocks.length; i += 1) { + each_blocks[i].d(1); + } + each_blocks.length = each_value_1.length; + } + }, + d(detaching) { + if (detaching) + detach(details); + destroy_each(each_blocks, detaching); + } + }; + } + function create_each_block_12(ctx) { + let li; + let t_value = ctx[16] + ""; + let t; + return { + c() { + li = element("li"); + t = text(t_value); + attr(li, "class", "svelte-y0x208"); + toggle_class(li, "hasblack-bg", ctx[4].has(ctx[16])); + }, + m(target, anchor) { + insert(target, li, anchor); + append(li, t); + }, + p(ctx2, dirty) { + if (dirty & 1 && t_value !== (t_value = ctx2[16] + "")) + set_data(t, t_value); + if (dirty & 17) { + toggle_class(li, "hasblack-bg", ctx2[4].has(ctx2[16])); + } + }, + d(detaching) { + if (detaching) + detach(li); + } + }; + } function create_if_block6(ctx) { let a; let mounted; @@ -16059,27 +16167,27 @@ a = element("a"); a.textContent = "[PEE contract]"; attr(a, "alt", "By clicking this you agree to stay hydrated"); - attr(a, "class", "clickable svelte-1xjvk14"); - toggle_class(a, "hasembed", ctx[11]?.embed_type === 1 /* MEDIA_EMBED */); - toggle_class(a, "hasext", ctx[11]?.embed_type === 0 /* THIRD_EYE */); - toggle_class(a, "hasblack", ctx[11]?.isBlacklisted === true); + attr(a, "class", "clickable svelte-y0x208"); + toggle_class(a, "hasembed", ctx[13]?.embed_type === 1 /* MEDIA_EMBED */); + toggle_class(a, "hasext", ctx[13]?.embed_type === 0 /* THIRD_EYE */); + toggle_class(a, "hasblack", ctx[13]?.isBlacklisted === true); }, m(target, anchor) { insert(target, a, anchor); if (!mounted) { - dispose = listen(a, "click", ctx[10]); + dispose = listen(a, "click", ctx[11]); mounted = true; } }, p(ctx2, dirty) { if (dirty & 1) { - toggle_class(a, "hasembed", ctx2[11]?.embed_type === 1 /* MEDIA_EMBED */); + toggle_class(a, "hasembed", ctx2[13]?.embed_type === 1 /* MEDIA_EMBED */); } if (dirty & 1) { - toggle_class(a, "hasext", ctx2[11]?.embed_type === 0 /* THIRD_EYE */); + toggle_class(a, "hasext", ctx2[13]?.embed_type === 0 /* THIRD_EYE */); } if (dirty & 1) { - toggle_class(a, "hasblack", ctx2[11]?.isBlacklisted === true); + toggle_class(a, "hasblack", ctx2[13]?.isBlacklisted === true); } }, d(detaching) { @@ -16096,15 +16204,17 @@ let t0; let t1; let t2; - let if_block2_anchor; + let t3; + let if_block3_anchor; let mounted; let dispose; function click_handler2() { - return ctx[9](ctx[11]); + return ctx[10](ctx[13]); } - let if_block0 = ctx[11].source && create_if_block_22(ctx); - let if_block1 = ctx[11].page && create_if_block_13(ctx); - let if_block2 = ctx[6] && ctx[2] && create_if_block6(ctx); + let if_block0 = ctx[13].source && create_if_block_32(ctx); + let if_block1 = ctx[13].page && create_if_block_22(ctx); + let if_block2 = ctx[13].tags && create_if_block_13(ctx); + let if_block3 = ctx[7] && ctx[2] && create_if_block6(ctx); return { c() { span = element("span"); @@ -16117,12 +16227,15 @@ t2 = space(); if (if_block2) if_block2.c(); - if_block2_anchor = empty(); - attr(span, "title", span_title_value = ctx[11].filename); - attr(span, "class", "fa fa-download clickable svelte-1xjvk14"); - toggle_class(span, "hasembed", ctx[11]?.embed_type === 1 /* MEDIA_EMBED */); - toggle_class(span, "hasext", ctx[11]?.embed_type === 0 /* THIRD_EYE */); - toggle_class(span, "hasblack", ctx[11]?.isBlacklisted === true); + t3 = space(); + if (if_block3) + if_block3.c(); + if_block3_anchor = empty(); + attr(span, "title", span_title_value = ctx[13].filename); + attr(span, "class", "fa fa-download clickable svelte-y0x208"); + toggle_class(span, "hasembed", ctx[13]?.embed_type === 1 /* MEDIA_EMBED */); + toggle_class(span, "hasext", ctx[13]?.embed_type === 0 /* THIRD_EYE */); + toggle_class(span, "hasblack", ctx[13]?.isBlacklisted === true); }, m(target, anchor) { insert(target, span, anchor); @@ -16135,7 +16248,10 @@ insert(target, t2, anchor); if (if_block2) if_block2.m(target, anchor); - insert(target, if_block2_anchor, anchor); + insert(target, t3, anchor); + if (if_block3) + if_block3.m(target, anchor); + insert(target, if_block3_anchor, anchor); if (!mounted) { dispose = listen(span, "click", click_handler2); mounted = true; @@ -16143,23 +16259,23 @@ }, p(new_ctx, dirty) { ctx = new_ctx; - if (dirty & 1 && span_title_value !== (span_title_value = ctx[11].filename)) { + if (dirty & 1 && span_title_value !== (span_title_value = ctx[13].filename)) { attr(span, "title", span_title_value); } if (dirty & 1) { - toggle_class(span, "hasembed", ctx[11]?.embed_type === 1 /* MEDIA_EMBED */); + toggle_class(span, "hasembed", ctx[13]?.embed_type === 1 /* MEDIA_EMBED */); } if (dirty & 1) { - toggle_class(span, "hasext", ctx[11]?.embed_type === 0 /* THIRD_EYE */); + toggle_class(span, "hasext", ctx[13]?.embed_type === 0 /* THIRD_EYE */); } if (dirty & 1) { - toggle_class(span, "hasblack", ctx[11]?.isBlacklisted === true); + toggle_class(span, "hasblack", ctx[13]?.isBlacklisted === true); } - if (ctx[11].source) { + if (ctx[13].source) { if (if_block0) { if_block0.p(ctx, dirty); } else { - if_block0 = create_if_block_22(ctx); + if_block0 = create_if_block_32(ctx); if_block0.c(); if_block0.m(t1.parentNode, t1); } @@ -16167,11 +16283,11 @@ if_block0.d(1); if_block0 = null; } - if (ctx[11].page) { + if (ctx[13].page) { if (if_block1) { if_block1.p(ctx, dirty); } else { - if_block1 = create_if_block_13(ctx); + if_block1 = create_if_block_22(ctx); if_block1.c(); if_block1.m(t2.parentNode, t2); } @@ -16179,18 +16295,30 @@ if_block1.d(1); if_block1 = null; } - if (ctx[6] && ctx[2]) { + if (ctx[13].tags) { if (if_block2) { if_block2.p(ctx, dirty); } else { - if_block2 = create_if_block6(ctx); + if_block2 = create_if_block_13(ctx); if_block2.c(); - if_block2.m(if_block2_anchor.parentNode, if_block2_anchor); + if_block2.m(t3.parentNode, t3); } } else if (if_block2) { if_block2.d(1); if_block2 = null; } + if (ctx[7] && ctx[2]) { + if (if_block3) { + if_block3.p(ctx, dirty); + } else { + if_block3 = create_if_block6(ctx); + if_block3.c(); + if_block3.m(if_block3_anchor.parentNode, if_block3_anchor); + } + } else if (if_block3) { + if_block3.d(1); + if_block3 = null; + } }, d(detaching) { if (detaching) @@ -16208,7 +16336,11 @@ if (if_block2) if_block2.d(detaching); if (detaching) - detach(if_block2_anchor); + detach(t3); + if (if_block3) + if_block3.d(detaching); + if (detaching) + detach(if_block3_anchor); mounted = false; dispose(); } @@ -16217,7 +16349,7 @@ function create_fragment8(ctx) { let t; let each_1_anchor; - let if_block = ctx[4].eye && create_if_block_32(ctx); + let if_block = ctx[5].eye && create_if_block_42(ctx); let each_value = ctx[0]; let each_blocks = []; for (let i = 0; i < each_value.length; i += 1) { @@ -16243,11 +16375,11 @@ insert(target, each_1_anchor, anchor); }, p(ctx2, [dirty]) { - if (ctx2[4].eye) { + if (ctx2[5].eye) { if (if_block) { if_block.p(ctx2, dirty); } else { - if_block = create_if_block_32(ctx2); + if_block = create_if_block_42(ctx2); if_block.c(); if_block.m(t.parentNode, t); } @@ -16255,7 +16387,7 @@ if_block.d(1); if_block = null; } - if (dirty & 199) { + if (dirty & 407) { each_value = ctx2[0]; let i; for (i = 0; i < each_value.length; i += 1) { @@ -16289,7 +16421,7 @@ } function instance8($$self, $$props, $$invalidate) { let $settings; - component_subscribe($$self, settings, ($$value) => $$invalidate(4, $settings = $$value)); + component_subscribe($$self, settings, ($$value) => $$invalidate(5, $settings = $$value)); let { id = "" } = $$props; let { files } = $$props; let { inst } = $$props; @@ -16315,13 +16447,18 @@ a.click(); window.URL.revokeObjectURL(url); } + let black2 = /* @__PURE__ */ new Set(); + settings.subscribe((s) => { + $$invalidate(4, black2 = new Set(s.blacklist)); + }); + let blackHits = files.filter((file) => file.tags?.some((e) => black2.has(e)) ?? false) ?? [""]; const click_handler2 = (file) => downloadFile(file); const click_handler_1 = (ev) => { inst.bepis(ev); }; $$self.$$set = ($$props2) => { if ("id" in $$props2) - $$invalidate(8, id = $$props2.id); + $$invalidate(9, id = $$props2.id); if ("files" in $$props2) $$invalidate(0, files = $$props2.files); if ("inst" in $$props2) @@ -16332,6 +16469,7 @@ inst, isVideo, visible, + black2, $settings, reveal, isNotChrome, @@ -16344,10 +16482,10 @@ var EyeButton = class extends SvelteComponent { constructor(options) { super(); - init(this, options, instance8, create_fragment8, safe_not_equal, { id: 8, files: 0, inst: 1 }, add_css7); + init(this, options, instance8, create_fragment8, safe_not_equal, { id: 9, files: 0, inst: 1 }, add_css7); } get id() { - return this.$$.ctx[8]; + return this.$$.ctx[9]; } set id(id) { this.$$set({ id }); @@ -16371,18 +16509,6 @@ var EyeButton_default = EyeButton; // src/main.ts - var EMBED_TYPES = /* @__PURE__ */ ((EMBED_TYPES2) => { - EMBED_TYPES2[EMBED_TYPES2["THIRD_EYE"] = 0] = "THIRD_EYE"; - EMBED_TYPES2[EMBED_TYPES2["MEDIA_EMBED"] = 1] = "MEDIA_EMBED"; - return EMBED_TYPES2; - })(EMBED_TYPES || {}); - var EMBED_STATUS = /* @__PURE__ */ ((EMBED_STATUS2) => { - EMBED_STATUS2[EMBED_STATUS2["SUCCESS"] = 0] = "SUCCESS"; - EMBED_STATUS2[EMBED_STATUS2["TE_BLACKLISTED"] = 1] = "TE_BLACKLISTED"; - EMBED_STATUS2[EMBED_STATUS2["PEE_UNDEFINED"] = 2] = "PEE_UNDEFINED"; - EMBED_STATUS2[EMBED_STATUS2["NONE"] = 3] = "NONE"; - return EMBED_STATUS2; - })(EMBED_STATUS || {}); var csettings; var processors = [thirdeye_default, png_default, webm_default, gif_default]; var cappState; @@ -16422,6 +16548,18 @@ } } } + var EMBED_TYPES = /* @__PURE__ */ ((EMBED_TYPES2) => { + EMBED_TYPES2[EMBED_TYPES2["THIRD_EYE"] = 0] = "THIRD_EYE"; + EMBED_TYPES2[EMBED_TYPES2["MEDIA_EMBED"] = 1] = "MEDIA_EMBED"; + return EMBED_TYPES2; + })(EMBED_TYPES || {}); + var EMBED_STATUS = /* @__PURE__ */ ((EMBED_STATUS2) => { + EMBED_STATUS2[EMBED_STATUS2["SUCCESS"] = 0] = "SUCCESS"; + EMBED_STATUS2[EMBED_STATUS2["TE_BLACKLISTED"] = 1] = "TE_BLACKLISTED"; + EMBED_STATUS2[EMBED_STATUS2["PEE_UNDEFINED"] = 2] = "PEE_UNDEFINED"; + EMBED_STATUS2[EMBED_STATUS2["NONE"] = 3] = "NONE"; + return EMBED_STATUS2; + })(EMBED_STATUS || {}); var processImage = async (src, fn, hex) => { return Promise.all(processors.filter((e) => e.match(fn)).map(async (proc) => { if (proc.skip) { diff --git a/src/EyeButton.svelte b/src/EyeButton.svelte index 378ba52..66e1f7f 100644 --- a/src/EyeButton.svelte +++ b/src/EyeButton.svelte @@ -158,8 +158,12 @@ import { EmbeddedFile, EMBED_TYPES } from './main'; details.tags { display: inline-block; + margin-right: 2px; + } + details.tags > summary { + cursor: pointer; } - .tags > ul { + details.tags > ul { position: absolute; min-width: 35px; @@ -168,8 +172,9 @@ import { EmbeddedFile, EMBED_TYPES } from './main'; padding: 0; background-color: #00000044; } - .tags > ul > li { + details.tags > ul > li { padding: 2px 2px; margin-bottom: 2px; } + \ No newline at end of file