diff --git a/changedetectionio/static/styles/diff.css b/changedetectionio/static/styles/diff.css index b1a07c20..4f264198 100644 --- a/changedetectionio/static/styles/diff.css +++ b/changedetectionio/static/styles/diff.css @@ -68,7 +68,7 @@ --color-last-checked: #bbb; --color-text-footer: #444; --color-border-watch-table-cell: #eee; - --color-text-watch-tag-list: #e70069; + --color-text-watch-tag-list: rgba(231, 0, 105, 0.4); --color-background-new-watch-form: rgba(0, 0, 0, 0.05); --color-background-new-watch-input: var(--color-white); --color-text-new-watch-input: var(--color-text); @@ -111,7 +111,7 @@ html[data-darkmode="true"] { --color-background-input: var(--color-grey-350); --color-text-input-description: var(--color-grey-600); --color-text-input-placeholder: var(--color-grey-600); - --color-text-watch-tag-list: #fa3e92; + --color-text-watch-tag-list: rgba(250, 62, 146, 0.4); --color-background-code: var(--color-grey-200); --color-background-tab: rgba(0, 0, 0, 0.2); --color-background-tab-hover: rgba(0, 0, 0, 0.5); diff --git a/changedetectionio/static/styles/scss/parts/_variables.scss b/changedetectionio/static/styles/scss/parts/_variables.scss index e9e9ccdf..aca4ed55 100644 --- a/changedetectionio/static/styles/scss/parts/_variables.scss +++ b/changedetectionio/static/styles/scss/parts/_variables.scss @@ -75,7 +75,7 @@ --color-text-footer: #444; --color-border-watch-table-cell: #eee; - --color-text-watch-tag-list: #e70069; + --color-text-watch-tag-list: rgba(231, 0, 105, 0.4); --color-background-new-watch-form: rgba(0, 0, 0, 0.05); --color-background-new-watch-input: var(--color-white); --color-text-new-watch-input: var(--color-text); @@ -127,7 +127,7 @@ html[data-darkmode="true"] { --color-background-input: var(--color-grey-350); --color-text-input-description: var(--color-grey-600); --color-text-input-placeholder: var(--color-grey-600); - --color-text-watch-tag-list: #fa3e92; + --color-text-watch-tag-list: rgba(250, 62, 146, 0.4); --color-background-code: var(--color-grey-200); --color-background-tab: rgba(0, 0, 0, 0.2); diff --git a/changedetectionio/static/styles/scss/styles.scss b/changedetectionio/static/styles/scss/styles.scss index aa5e7aa5..3f37ebd8 100644 --- a/changedetectionio/static/styles/scss/styles.scss +++ b/changedetectionio/static/styles/scss/styles.scss @@ -187,8 +187,11 @@ code { } .watch-tag-list { - color: var(--color-text-watch-tag-list); + color: var(--color-white); white-space: nowrap; + background: var(--color-text-watch-tag-list); + border-radius: 5px; + padding: 2px 5px; } .box { diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css index ae37c680..939745b3 100644 --- a/changedetectionio/static/styles/styles.css +++ b/changedetectionio/static/styles/styles.css @@ -284,7 +284,7 @@ ul#requests-extra_browsers { --color-last-checked: #bbb; --color-text-footer: #444; --color-border-watch-table-cell: #eee; - --color-text-watch-tag-list: #e70069; + --color-text-watch-tag-list: rgba(231, 0, 105, 0.4); --color-background-new-watch-form: rgba(0, 0, 0, 0.05); --color-background-new-watch-input: var(--color-white); --color-text-new-watch-input: var(--color-text); @@ -327,7 +327,7 @@ html[data-darkmode="true"] { --color-background-input: var(--color-grey-350); --color-text-input-description: var(--color-grey-600); --color-text-input-placeholder: var(--color-grey-600); - --color-text-watch-tag-list: #fa3e92; + --color-text-watch-tag-list: rgba(250, 62, 146, 0.4); --color-background-code: var(--color-grey-200); --color-background-tab: rgba(0, 0, 0, 0.2); --color-background-tab-hover: rgba(0, 0, 0, 0.5); @@ -532,8 +532,11 @@ code { margin: 0 3px 0 5px; } .watch-tag-list { - color: var(--color-text-watch-tag-list); - white-space: nowrap; } + color: var(--color-white); + white-space: nowrap; + background: var(--color-text-watch-tag-list); + border-radius: 5px; + padding: 2px 5px; } .box { max-width: 80%;