diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/emoji_input/emoji_input.vue | 2 | ||||
| -rw-r--r-- | src/components/notifications/notifications.scss | 3 | ||||
| -rw-r--r-- | src/components/popper/popper.scss | 2 | ||||
| -rw-r--r-- | src/components/status/status.vue | 7 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 17 | ||||
| -rw-r--r-- | src/components/user_card/user_card.vue | 5 | ||||
| -rw-r--r-- | src/services/theme_data/pleromafe.js | 34 |
7 files changed, 70 insertions, 0 deletions
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index 94eae560..e9ac09c3 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -116,6 +116,8 @@ --faint: var(--popoverFaintText, $fallback--faint); --faintLink: var(--popoverFaintLink, $fallback--faint); --lightText: var(--popoverLightText, $fallback--lightText); + --postLink: var(--popoverPostLink, $fallback--link); + --postFaintLink: var(--popoverPostFaintLink, $fallback--link); --icon: var(--popoverIcon, $fallback--icon); } } diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 71876b14..ca762432 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -68,6 +68,9 @@ a { color: var(--faintLink); } + .status-content a { + color: var(--postFaintLink); + } } padding: 0; .media-body { diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss index 341416c1..8e2dcd55 100644 --- a/src/components/popper/popper.scss +++ b/src/components/popper/popper.scss @@ -15,6 +15,8 @@ --faint: var(--popoverFaintText, $fallback--faint); --faintLink: var(--popoverFaintLink, $fallback--faint); --lightText: var(--popoverLightText, $fallback--lightText); + --postLink: var(--popoverPostLink, $fallback--link); + --postFaintLink: var(--popoverPostFaintLink, $fallback--link); --icon: var(--popoverIcon, $fallback--icon); } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 1997e187..b1048832 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -451,6 +451,8 @@ $status-margin: 0.75em; --lightText: var(--selectedPostLightText, $fallback--light); --faint: var(--selectedPostFaintText, $fallback--faint); --faintLink: var(--selectedPostFaintLink, $fallback--faint); + --postLink: var(--selectedPostPostLink, $fallback--faint); + --postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint); --icon: var(--selectedPostIcon, $fallback--icon); } @@ -640,6 +642,11 @@ $status-margin: 0.75em; line-height: 1.4em; white-space: pre-wrap; + a { + color: $fallback--link; + color: var(--postLink, $fallback--link); + } + img, video { max-width: 100%; max-height: 400px; diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 6e38bd8e..0b3b0fbf 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -248,6 +248,23 @@ </button> </div> <div class="color-item"> + <h4>{{ $t('settings.style.advanced_colors.post') }}</h4> + <ColorInput + v-model="postLinkColorLocal" + name="postLinkColor" + :fallback="previewTheme.colors.accent" + :label="$t('settings.links')" + :show-optional-tickbox="typeof accentColorLocal !== 'undefined'" + /> + <ContrastRatio :contrast="previewContrast.bgPostLink" /> + <ColorInput + v-model="iconColorLocal" + name="iconColor" + :fallback="previewTheme.colors.accent" + :label="$t('settings.links')" + :show-optional-tickbox="typeof accentColorLocal !== 'undefined'" + /> + <ContrastRatio :contrast="previewContrast.bgIcon" /> <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4> <ColorInput v-model="alertErrorColorLocal" diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index e286ceea..72656435 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -299,6 +299,11 @@ &-bio { text-align: center; + a { + color: $fallback--link; + color: var(--postLink, $fallback--link); + } + img { object-fit: contain; vertical-align: middle; diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js index a40d08a6..74e6fc1c 100644 --- a/src/services/theme_data/pleromafe.js +++ b/src/services/theme_data/pleromafe.js @@ -107,6 +107,10 @@ export const SLOT_INHERITANCE = { depends: ['link'], opacity: 'faint' }, + postFaintLink: { + depends: ['postLink'], + opacity: 'faint' + }, cBlue: '#0000ff', cRed: '#FF0000', @@ -122,6 +126,11 @@ export const SLOT_INHERITANCE = { layer: 'highlight', textColor: true }, + highlightPostLink: { + depends: ['postLink'], + layer: 'highlight', + textColor: 'preserve' + }, highlightFaintText: { depends: ['faint'], layer: 'highlight', @@ -132,6 +141,11 @@ export const SLOT_INHERITANCE = { layer: 'highlight', textColor: 'preserve' }, + highlightPostFaintLink: { + depends: ['postFaintLink'], + layer: 'highlight', + textColor: 'preserve' + }, highlightText: { depends: ['text'], layer: 'highlight', @@ -156,6 +170,11 @@ export const SLOT_INHERITANCE = { layer: 'popover', textColor: true }, + popoverPostLink: { + depends: ['postLink'], + layer: 'popover', + textColor: 'preserve' + }, popoverFaintText: { depends: ['faint'], layer: 'popover', @@ -166,6 +185,11 @@ export const SLOT_INHERITANCE = { layer: 'popover', textColor: 'preserve' }, + popoverPostFaintLink: { + depends: ['postFaintLink'], + layer: 'popover', + textColor: 'preserve' + }, popoverText: { depends: ['text'], layer: 'popover', @@ -194,6 +218,12 @@ export const SLOT_INHERITANCE = { variant: 'selectedPost', textColor: true }, + selectedPostPostLink: { + depends: ['highlightPostLink'], + layer: 'highlight', + variant: 'selectedPost', + textColor: 'preserve' + }, selectedPostFaintLink: { depends: ['highlightFaintLink'], layer: 'highlight', @@ -300,6 +330,10 @@ export const SLOT_INHERITANCE = { color: (mod, text) => brightness(20 * mod, text).rgb }, + postLink: { + depends: ['link'] + }, + border: { depends: ['fg'], opacity: 'border', |
