diff --git a/manifest.json b/manifest.json index f61bc04..0a8c657 100644 --- a/manifest.json +++ b/manifest.json @@ -47,6 +47,9 @@ ], "js": [ "src/content/tags-editor.ts" + ], + "css": [ + "src/styles/content/tags-editor.scss" ] }, { diff --git a/src/lib/components/TagsListBlock.ts b/src/lib/components/TagsListBlock.ts index 01e9a78..d63edd5 100644 --- a/src/lib/components/TagsListBlock.ts +++ b/src/lib/components/TagsListBlock.ts @@ -134,6 +134,7 @@ export class TagsListBlock extends BaseComponent { heading.style.display = 'none'; heading.style.order = `var(${TagsListBlock.#orderCssVariableForGroup(group.id)}, 0)`; heading.style.flexBasis = '100%'; + heading.classList.add('tag-category-headline'); // We're inserting heading to the top just to make sure that heading is always in front of the tags related to // this category. diff --git a/src/styles/booru-vars.scss b/src/styles/booru-vars.scss index 1db638d..462d9c5 100644 --- a/src/styles/booru-vars.scss +++ b/src/styles/booru-vars.scss @@ -1,6 +1,9 @@ $background-color: var(--background-color); $media-border: var(--media-border); $media-box-color: var(--media-box-color); +$padding-small: var(--padding-small); +$padding-normal: var(--padding-normal); +$padding-large: var(--padding-large); // These variables are defined dynamically based on the category of the tag $resolved-tag-background: var(--tag-background); diff --git a/src/styles/content/tags-editor.scss b/src/styles/content/tags-editor.scss new file mode 100644 index 0000000..07a79a9 --- /dev/null +++ b/src/styles/content/tags-editor.scss @@ -0,0 +1,23 @@ +@use '$styles/booru-vars'; +@use '$styles/environment'; + +h2.tag-category-headline { + // Basic margin top and bottom values gathered from Chrome. + $base-margin-top: .83em; + $base-margin-bottom: .62em; + + // Tag List element was updated to use flex & gaps. This should be applied to Furbooru later, once updates will be + // applied from the base Philomena version. + @if environment.$current-site == 'derpibooru' { + margin: { + top: calc(#{$base-margin-top} - #{booru-vars.$padding-small}); + bottom: calc(#{$base-margin-bottom} - #{booru-vars.$padding-small}); + } + } + @else { + margin: { + top: $base-margin-top; + bottom: $base-margin-bottom; + } + } +}