puniko/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Kenomo (see: #624) theme. Ability to define link color for post contents. Fixes

Browse source
This commit is contained in:
Henry Jameson 2020-01-28 01:29:20 +02:00
parent 18ca2a035b
commit 526b43eba6
8 changed files with 141 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/emoji_input/emoji_input.vue
View file

@ -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);
}
}

3
src/components/notifications/notifications.scss
View file

@ -68,6 +68,9 @@
a {
color: var(--faintLink);
}
.status-content a {
color: var(--postFaintLink);
}
}
padding: 0;
.media-body {

2
src/components/popper/popper.scss
View file

@ -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);
}

7
src/components/status/status.vue
View file

@ -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;

17
src/components/style_switcher/style_switcher.vue
View file

@ -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"

5
src/components/user_card/user_card.vue
View file

@ -299,6 +299,11 @@
&-bio {
text-align: center;
a {
color: $fallback--link;
color: var(--postLink, $fallback--link);
}
img {
object-fit: contain;
vertical-align: middle;

34
src/services/theme_data/pleromafe.js
View file

@ -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',

71
static/themes/kenomo.json Normal file
View file

@ -0,0 +1,71 @@
{
"_pleroma_theme_version": 2,
"name": "Kenomo",
"source": {
"themeEngineVersion": 3,
"fonts": {},
"shadows": {
"panel": [],
"topBar": [],
"button": [
{
"x": 0,
"y": 1,
"blur": 0,
"spread": 0,
"color": "#FFFFFF",
"alpha": 0.2,
"inset": true
},
{
"x": 0,
"y": -1,
"blur": 0,
"spread": 0,
"color": "#000000",
"alpha": 0.2,
"inset": true
}
],
"input": [
{
"x": 0,
"y": "0",
"blur": 0,
"spread": "1",
"color": "#576574",
"alpha": "1",
"inset": true
}
]
},
"opacity": {
"underlay": "1",
"border": "0"
},
"colors": {
"bg": "#ffffff",
"fg": "#f6f6f6",
"text": "#494949",
"underlay": "#ffffff",
"link": "#818181",
"accent": "#818181",
"cBlue": "#2e86de",
"cRed": "#c96248",
"cGreen": "#0fa00f",
"cOrange": "#aa7623",
"postLink": "#2e86de",
"border": "#ffffff",
"icon": "#8a8a8a",
"panel": "transparent",
"topBarText": "#4b4b4b",
"tab": "--btn,-30",
"btn": "#576574"
},
"radii": {
"panel": "0",
"avatar": "6",
"avatarAlt": "6"
}
}
}