aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/emoji_input/emoji_input.vue2
-rw-r--r--src/components/notifications/notifications.scss3
-rw-r--r--src/components/popper/popper.scss2
-rw-r--r--src/components/status/status.vue7
-rw-r--r--src/components/style_switcher/style_switcher.vue17
-rw-r--r--src/components/user_card/user_card.vue5
-rw-r--r--src/services/theme_data/pleromafe.js34
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',