moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add roundness, fix inputs

This commit is contained in:
Henry Jameson 2024-02-13 02:09:43 +02:00
parent 17b25ef0e0
commit bcc5084409
33 changed files with 150 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/App.scss
View File

@ -355,8 +355,7 @@ nav {
user-select: none; user-select: none;
color: var(--text); color: var(--text);
border: none; border: none;
border-radius: $fallback--btnRadius; border-radius: var(--roundness);
border-radius: var(--btnRadius, $fallback--btnRadius);
cursor: pointer; cursor: pointer;
box-shadow: var(--shadow); box-shadow: var(--shadow);
font-size: 1em; font-size: 1em;
@ -380,6 +379,16 @@ nav {
font-family: inherit; font-family: inherit;
cursor: pointer; cursor: pointer;
color: inherit; color: inherit;
&:first-child {
border-top-right-radius: var(--roundness);
border-top-left-radius: var(--roundness);
}
&:last-child {
border-bottom-right-radius: var(--roundness);
border-bottom-left-radius: var(--roundness);
}
} }
.button-unstyled { .button-unstyled {
@ -423,8 +432,7 @@ textarea {
--_padding: 0.5em; --_padding: 0.5em;
border: none; border: none;
border-radius: $fallback--inputRadius; border-radius: var(--roundness);
border-radius: var(--inputRadius, $fallback--inputRadius);
box-shadow: var(--shadow); box-shadow: var(--shadow);
font-family: sans-serif; font-family: sans-serif;
font-family: var(--inputFont, sans-serif); font-family: var(--inputFont, sans-serif);
@ -511,8 +519,7 @@ textarea {
transition: color 200ms; transition: color 200ms;
width: 1.1em; width: 1.1em;
height: 1.1em; height: 1.1em;
border-radius: $fallback--checkboxRadius; border-radius: var(--roundness);
border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
box-shadow: 0 0 2px black inset; box-shadow: 0 0 2px black inset;
box-shadow: var(--inputShadow); box-shadow: var(--inputShadow);
margin-right: 0.5em; margin-right: 0.5em;
@ -562,7 +569,7 @@ option {
li { li {
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--inputRadius); border-radius: var(--roundness);
padding: 0.5em; padding: 0.5em;
margin: 0.25em; margin: 0.25em;
} }
@ -634,8 +641,7 @@ option {
.alert { .alert {
margin: 0 0.35em; margin: 0 0.35em;
padding: 0 0.25em; padding: 0 0.25em;
border-radius: $fallback--tooltipRadius; border-radius: var(--roundness);
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
&.error { &.error {
background-color: $fallback--alertError; background-color: $fallback--alertError;
@ -682,8 +688,7 @@ option {
padding: 0.5em; padding: 0.5em;
border: 1px solid $fallback--faint; border: 1px solid $fallback--faint;
border: 1px solid var(--faint, $fallback--faint); border: 1px solid var(--faint, $fallback--faint);
border-radius: $fallback--inputRadius; border-radius: var(--roundness);
border-radius: var(--inputRadius, $fallback--inputRadius);
} }
.notice-dismissible { .notice-dismissible {

10
src/components/autosuggest/autosuggest.vue
View File

@ -1,3 +1,4 @@
<!-- FIXME THIS NEEDS TO BE REFACTORED TO USE POPOVER -->
<template> <template>
<div <div
v-click-outside="onClickOutside" v-click-outside="onClickOutside"
@ -11,7 +12,7 @@
> >
<div <div
v-if="resultsVisible && filtered.length > 0" v-if="resultsVisible && filtered.length > 0"
class="autosuggest-results" class="panel autosuggest-results"
> >
<slot <slot
v-for="item in filtered" v-for="item in filtered"
@ -45,13 +46,12 @@
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-color: $fallback--border; border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border);
border-radius: $fallback--inputRadius; border-radius: var(--roundness);
border-radius: var(--inputRadius, $fallback--inputRadius);
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
box-shadow: 1px 1px 4px rgb(0 0 0 / 60%); box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
box-shadow: var(--panelShadow); box-shadow: var(--shadow);
overflow-y: auto; overflow-y: auto;
z-index: 1; z-index: 1;
} }

6
src/components/avatar.style.js
View File

@ -1,11 +1,13 @@
export default { export default {
name: 'Avatar', name: 'Avatar',
selector: '.Avatar', selector: '.Avatar',
variants: {
compact: '.-compact'
},
defaultRules: [ defaultRules: [
{ {
directives: { directives: {
background: '--bg', roundness: 3,
opacity: 0,
shadow: [{ shadow: [{
x: 0, x: 0,
y: 1, y: 1,

3
src/components/button.style.js
View File

@ -64,7 +64,8 @@ export default {
// like within it // like within it
directives: { directives: {
background: '--fg', background: '--fg',
shadow: [buttonOuterShadow, ...buttonInsetFakeBorders] shadow: [buttonOuterShadow, ...buttonInsetFakeBorders],
roundness: 3
} }
}, },
{ {

4
src/components/button_unstyled.style.js
View File

@ -15,9 +15,7 @@ export default {
defaultRules: [ defaultRules: [
{ {
directives: { directives: {
background: '--fg', shadow: []
shadow: [],
opacity: 0
} }
}, },
{ {

5
src/components/chat/chat.scss
View File

@ -18,8 +18,9 @@
overflow: visible; overflow: visible;
min-height: calc(100vh - var(--navbar-height)); min-height: calc(100vh - var(--navbar-height));
margin: 0; margin: 0;
border-radius: 10px 10px 0 0; border-radius: var(--roundness);
border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
&::after { &::after {
border-radius: 0; border-radius: 0;

19
src/components/emoji_input/emoji_input.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div <div
ref="root" ref="root"
class="emoji-input" class="input emoji-input"
:class="{ 'with-picker': !hideEmojiButton }" :class="{ 'with-picker': !hideEmojiButton }"
> >
<slot <slot
@ -68,9 +68,9 @@
v-for="(suggestion, index) in suggestions" v-for="(suggestion, index) in suggestions"
:id="suggestionItemId(index)" :id="suggestionItemId(index)"
:key="index" :key="index"
class="autocomplete-item" class="menu-item autocomplete-item"
role="option" role="option"
:class="{ highlighted: index === highlighted }" :class="{ active: index === highlighted }"
:aria-label="autoCompleteItemLabel(suggestion)" :aria-label="autoCompleteItemLabel(suggestion)"
:aria-selected="index === highlighted" :aria-selected="index === highlighted"
@click.stop.prevent="onClick($event, suggestion)" @click.stop.prevent="onClick($event, suggestion)"
@ -145,7 +145,9 @@
textarea { textarea {
flex: 1 0 auto; flex: 1 0 auto;
color: inherit; color: inherit;
padding: 0;
background: none; background: none;
box-shadow: none;
border: none; border: none;
outline: none; outline: none;
} }
@ -186,7 +188,6 @@
display: flex; display: flex;
cursor: pointer; cursor: pointer;
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
border-bottom: 1px solid rgb(0 0 0 / 40%);
height: 32px; height: 32px;
.image { .image {
@ -219,16 +220,6 @@
line-height: 9px; line-height: 9px;
} }
} }
&.highlighted {
background-color: $fallback--fg;
background-color: var(--selectedMenuPopover, $fallback--fg);
color: var(--selectedMenuPopoverText, $fallback--text);
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
}
} }
} }
</style> </style>

1
src/components/input.style.js
View File

@ -34,6 +34,7 @@ export default {
{ {
directives: { directives: {
background: '--fg, -5', background: '--fg, -5',
roundness: 3,
shadow: [{ shadow: [{
x: 0, x: 0,
y: 0, y: 0,

6
src/components/link-preview/link-preview.vue
View File

@ -51,8 +51,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
border-radius: $fallback--attachmentRadius; border-radius: var(--roundness);
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
} }
} }
@ -86,8 +85,7 @@
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-radius: $fallback--attachmentRadius; border-radius: var(--roundness);
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
border-color: $fallback--border; border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
} }

9
src/components/menu_item.style.js
View File

@ -9,7 +9,7 @@ export default {
], ],
states: { states: {
hover: ':hover', hover: ':hover',
active: 'active' active: '.active'
}, },
defaultRules: [ defaultRules: [
{ {
@ -25,6 +25,13 @@ export default {
opacity: 1 opacity: 1
} }
}, },
{
state: ['active'],
directives: {
background: '$mod(--bg, 5)',
opacity: 1
}
},
{ {
component: 'Text', component: 'Text',
variant: 'normal', variant: 'normal',

4
src/components/mobile_nav/mobile_nav.vue
View File

@ -20,7 +20,7 @@
/> />
<div <div
v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount" v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
class="alert-dot" class="badge alert-dot"
/> />
</button> </button>
<NavigationPins class="pins" /> <NavigationPins class="pins" />
@ -37,7 +37,7 @@
/> />
<div <div
v-if="unseenNotificationsCount" v-if="unseenNotificationsCount"
class="alert-dot" class="badge alert-dot"
/> />
</button> </button>
</div> </div>

14
src/components/moderation_tools/moderation_tools.vue
View File

@ -54,7 +54,7 @@
@click="toggleTag(tags.FORCE_NSFW)" @click="toggleTag(tags.FORCE_NSFW)"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }" :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
/> />
{{ $t('user_card.admin_menu.force_nsfw') }} {{ $t('user_card.admin_menu.force_nsfw') }}
@ -64,7 +64,7 @@
@click="toggleTag(tags.STRIP_MEDIA)" @click="toggleTag(tags.STRIP_MEDIA)"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }" :class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
/> />
{{ $t('user_card.admin_menu.strip_media') }} {{ $t('user_card.admin_menu.strip_media') }}
@ -74,7 +74,7 @@
@click="toggleTag(tags.FORCE_UNLISTED)" @click="toggleTag(tags.FORCE_UNLISTED)"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }" :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
/> />
{{ $t('user_card.admin_menu.force_unlisted') }} {{ $t('user_card.admin_menu.force_unlisted') }}
@ -84,7 +84,7 @@
@click="toggleTag(tags.SANDBOX)" @click="toggleTag(tags.SANDBOX)"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }" :class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
/> />
{{ $t('user_card.admin_menu.sandbox') }} {{ $t('user_card.admin_menu.sandbox') }}
@ -95,7 +95,7 @@
@click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)" @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }" :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
/> />
{{ $t('user_card.admin_menu.disable_remote_subscription') }} {{ $t('user_card.admin_menu.disable_remote_subscription') }}
@ -106,7 +106,7 @@
@click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)" @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }" :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
/> />
{{ $t('user_card.admin_menu.disable_any_subscription') }} {{ $t('user_card.admin_menu.disable_any_subscription') }}
@ -117,7 +117,7 @@
@click="toggleTag(tags.QUARANTINE)" @click="toggleTag(tags.QUARANTINE)"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }" :class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
/> />
{{ $t('user_card.admin_menu.quarantine') }} {{ $t('user_card.admin_menu.quarantine') }}

12
src/components/nav_panel/nav_panel.vue
View File

@ -126,17 +126,13 @@
> li { > li {
&:first-child.menu-item { &:first-child.menu-item {
border-top-right-radius: $fallback--panelRadius; border-top-right-radius: var(--roundness);
border-top-right-radius: var(--panelRadius, $fallback--panelRadius); border-top-left-radius: var(--roundness);
border-top-left-radius: $fallback--panelRadius;
border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
} }
&:last-child.menu-item { &:last-child.menu-item {
border-bottom-right-radius: $fallback--panelRadius; border-bottom-right-radius: var(--roundness);
border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius); border-bottom-left-radius: var(--roundness);
border-bottom-left-radius: $fallback--panelRadius;
border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
} }
} }

2
src/components/navigation/navigation_pins.vue
View File

@ -19,7 +19,7 @@
>{{ item.iconLetter }}</span> >{{ item.iconLetter }}</span>
<div <div
v-if="item.badgeGetter && getters[item.badgeGetter]" v-if="item.badgeGetter && getters[item.badgeGetter]"
class="alert-dot" class="badge alert-dot"
/> />
</router-link> </router-link>
</span> </span>

14
src/components/notifications/notification_filters.vue
View File

@ -12,7 +12,7 @@
@click="toggleNotificationFilter('likes')" @click="toggleNotificationFilter('likes')"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.likes }" :class="{ 'menu-checkbox-checked': filters.likes }"
/>{{ $t('settings.notification_visibility_likes') }} />{{ $t('settings.notification_visibility_likes') }}
</button> </button>
@ -21,7 +21,7 @@
@click="toggleNotificationFilter('repeats')" @click="toggleNotificationFilter('repeats')"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.repeats }" :class="{ 'menu-checkbox-checked': filters.repeats }"
/>{{ $t('settings.notification_visibility_repeats') }} />{{ $t('settings.notification_visibility_repeats') }}
</button> </button>
@ -30,7 +30,7 @@
@click="toggleNotificationFilter('follows')" @click="toggleNotificationFilter('follows')"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.follows }" :class="{ 'menu-checkbox-checked': filters.follows }"
/>{{ $t('settings.notification_visibility_follows') }} />{{ $t('settings.notification_visibility_follows') }}
</button> </button>
@ -39,7 +39,7 @@
@click="toggleNotificationFilter('mentions')" @click="toggleNotificationFilter('mentions')"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.mentions }" :class="{ 'menu-checkbox-checked': filters.mentions }"
/>{{ $t('settings.notification_visibility_mentions') }} />{{ $t('settings.notification_visibility_mentions') }}
</button> </button>
@ -48,7 +48,7 @@
@click="toggleNotificationFilter('emojiReactions')" @click="toggleNotificationFilter('emojiReactions')"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.emojiReactions }" :class="{ 'menu-checkbox-checked': filters.emojiReactions }"
/>{{ $t('settings.notification_visibility_emoji_reactions') }} />{{ $t('settings.notification_visibility_emoji_reactions') }}
</button> </button>
@ -57,7 +57,7 @@
@click="toggleNotificationFilter('moves')" @click="toggleNotificationFilter('moves')"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.moves }" :class="{ 'menu-checkbox-checked': filters.moves }"
/>{{ $t('settings.notification_visibility_moves') }} />{{ $t('settings.notification_visibility_moves') }}
</button> </button>
@ -66,7 +66,7 @@
@click="toggleNotificationFilter('polls')" @click="toggleNotificationFilter('polls')"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.polls }" :class="{ 'menu-checkbox-checked': filters.polls }"
/>{{ $t('settings.notification_visibility_polls') }} />{{ $t('settings.notification_visibility_polls') }}
</button> </button>

1
src/components/panel.style.js
View File

@ -17,6 +17,7 @@ export default {
{ {
directives: { directives: {
background: '--bg', background: '--bg',
roundness: 3,
shadow: [{ shadow: [{
x: 1, x: 1,
y: 1, y: 1,

1
src/components/popover.style.js
View File

@ -9,6 +9,7 @@ export default {
'Text', 'Text',
'Link', 'Link',
'Icon', 'Icon',
'Border',
'Button', 'Button',
'ButtonUnstyled', 'ButtonUnstyled',
'Input', 'Input',

15
src/components/popover/popover.vue
View File

@ -69,13 +69,15 @@
pointer-events: none; pointer-events: none;
} }
border-radius: $fallback--btnRadius; border-radius: var(--roundness);
border-radius: var(--btnRadius, $fallback--btnRadius); border-color: var(--border);
border-style: solid;
border-width: 1px;
} }
.dropdown-menu { .dropdown-menu {
display: block; display: block;
padding: 0.5rem 0; padding: 0;
font-size: 1em; font-size: 1em;
text-align: left; text-align: left;
list-style: none; list-style: none;
@ -108,8 +110,6 @@
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
--btnText: var(--popoverText, $fallback--text);
&-icon { &-icon {
svg { svg {
width: 22px; width: 22px;
@ -134,10 +134,7 @@
line-height: 22px; line-height: 22px;
text-align: center; text-align: center;
border-radius: 0; border-radius: 0;
background-color: $fallback--fg; box-shadow: var(--shadow);
background-color: var(--input, $fallback--fg);
box-shadow: 0 0 2px black inset;
box-shadow: var(--inputShadow);
margin-right: 0.75em; margin-right: 0.75em;
&.menu-checkbox-checked::after { &.menu-checkbox-checked::after {

12
src/components/quick_filter_settings/quick_filter_settings.vue
View File

@ -22,7 +22,7 @@
@click="replyVisibilityAll = true" @click="replyVisibilityAll = true"
> >
<span <span
class="menu-checkbox -radio" class="input menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': replyVisibilityAll }" :class="{ 'menu-checkbox-checked': replyVisibilityAll }"
:aria-hidden="true" :aria-hidden="true"
/>{{ $t('settings.reply_visibility_all') }} />{{ $t('settings.reply_visibility_all') }}
@ -35,7 +35,7 @@
@click="replyVisibilityFollowing = true" @click="replyVisibilityFollowing = true"
> >
<span <span
class="menu-checkbox -radio" class="input menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': replyVisibilityFollowing }" :class="{ 'menu-checkbox-checked': replyVisibilityFollowing }"
:aria-hidden="true" :aria-hidden="true"
/>{{ $t('settings.reply_visibility_following_short') }} />{{ $t('settings.reply_visibility_following_short') }}
@ -48,7 +48,7 @@
@click="replyVisibilitySelf = true" @click="replyVisibilitySelf = true"
> >
<span <span
class="menu-checkbox -radio" class="input menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': replyVisibilitySelf }" :class="{ 'menu-checkbox-checked': replyVisibilitySelf }"
:aria-hidden="true" :aria-hidden="true"
/>{{ $t('settings.reply_visibility_self_short') }} />{{ $t('settings.reply_visibility_self_short') }}
@ -66,7 +66,7 @@
@click="muteBotStatuses = !muteBotStatuses" @click="muteBotStatuses = !muteBotStatuses"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': muteBotStatuses }" :class="{ 'menu-checkbox-checked': muteBotStatuses }"
:aria-hidden="true" :aria-hidden="true"
/>{{ $t('settings.mute_bot_posts') }} />{{ $t('settings.mute_bot_posts') }}
@ -78,7 +78,7 @@
@click="hideMedia = !hideMedia" @click="hideMedia = !hideMedia"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hideMedia }" :class="{ 'menu-checkbox-checked': hideMedia }"
:aria-hidden="true" :aria-hidden="true"
/>{{ $t('settings.hide_media_previews') }} />{{ $t('settings.hide_media_previews') }}
@ -90,7 +90,7 @@
@click="hideMutedPosts = !hideMutedPosts" @click="hideMutedPosts = !hideMutedPosts"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hideMutedPosts }" :class="{ 'menu-checkbox-checked': hideMutedPosts }"
:aria-hidden="true" :aria-hidden="true"
/>{{ $t('settings.hide_all_muted_posts') }} />{{ $t('settings.hide_all_muted_posts') }}

10
src/components/quick_view_settings/quick_view_settings.vue
View File

@ -18,7 +18,7 @@
@click="conversationDisplay = 'tree'" @click="conversationDisplay = 'tree'"
> >
<span <span
class="menu-checkbox -radio" class="input menu-checkbox -radio"
:aria-hidden="true" :aria-hidden="true"
:class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }" :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
/><FAIcon /><FAIcon
@ -33,7 +33,7 @@
@click="conversationDisplay = 'linear'" @click="conversationDisplay = 'linear'"
> >
<span <span
class="menu-checkbox -radio" class="input menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }" :class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
:aria-hidden="true" :aria-hidden="true"
/><FAIcon /><FAIcon
@ -53,7 +53,7 @@
@click="showUserAvatars = !showUserAvatars" @click="showUserAvatars = !showUserAvatars"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': showUserAvatars }" :class="{ 'menu-checkbox-checked': showUserAvatars }"
:aria-hidden="true" :aria-hidden="true"
/>{{ $t('settings.mention_link_show_avatar_quick') }} />{{ $t('settings.mention_link_show_avatar_quick') }}
@ -66,7 +66,7 @@
@click="autoUpdate = !autoUpdate" @click="autoUpdate = !autoUpdate"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': autoUpdate }" :class="{ 'menu-checkbox-checked': autoUpdate }"
:aria-hidden="true" :aria-hidden="true"
/>{{ $t('settings.auto_update') }} />{{ $t('settings.auto_update') }}
@ -79,7 +79,7 @@
@click="collapseWithSubjects = !collapseWithSubjects" @click="collapseWithSubjects = !collapseWithSubjects"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': collapseWithSubjects }" :class="{ 'menu-checkbox-checked': collapseWithSubjects }"
:aria-hidden="true" :aria-hidden="true"
/>{{ $t('settings.collapse_subject') }} />{{ $t('settings.collapse_subject') }}

8
src/components/root.style.js
View File

@ -6,13 +6,5 @@ export default {
'Modals', 'Modals',
'Popover', 'Popover',
'TopBar' 'TopBar'
],
defaultRules: [
{
directives: {
background: '--bg',
opacity: 0
}
}
] ]
} }

3
src/components/settings_modal/tabs/profile_tab.scss
View File

@ -43,8 +43,7 @@
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: $fallback--avatarRadius; border-radius: var(--roundness);
border-radius: var(--avatarRadius, $fallback--avatarRadius);
} }
.reset-button { .reset-button {

6
src/components/shadow_control/shadow_control.vue
View File

@ -293,16 +293,14 @@
linear-gradient(-45deg, transparent 75%, #666 75%); linear-gradient(-45deg, transparent 75%, #666 75%);
background-size: 20px 20px; background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0; background-position: 0 0, 0 10px, 10px -10px, -10px 0;
border-radius: $fallback--inputRadius; border-radius: var(--roundness);
border-radius: var(--inputRadius, $fallback--inputRadius);
.preview-block { .preview-block {
width: 33%; width: 33%;
height: 33%; height: 33%;
background-color: $fallback--bg; background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg); background-color: var(--bg, $fallback--bg);
border-radius: $fallback--panelRadius; border-radius: var(--roundness);
border-radius: var(--panelRadius, $fallback--panelRadius);
} }
} }
} }

3
src/components/shout_panel/shout_panel.vue
View File

@ -128,8 +128,7 @@
img { img {
height: 24px; height: 24px;
width: 24px; width: 24px;
border-radius: $fallback--avatarRadius; border-radius: var(--roundness);
border-radius: var(--avatarRadius, $fallback--avatarRadius);
margin-right: 0.5em; margin-right: 0.5em;
margin-top: 0.25em; margin-top: 0.25em;
} }

5
src/components/status/status.scss
View File

@ -247,7 +247,7 @@
} }
.repeater-avatar { .repeater-avatar {
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); border-radius: var(--roundness);
margin-left: 28px; margin-left: 28px;
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -363,7 +363,6 @@
.avatar-row { .avatar-row {
flex: 1; flex: 1;
overflow: hidden;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
@ -421,7 +420,7 @@
.quoted-status { .quoted-status {
margin-top: 0.5em; margin-top: 0.5em;
border: 1px solid var(--border, $fallback--border); border: 1px solid var(--border, $fallback--border);
border-radius: var(--attachmentRadius, $fallback--attachmentRadius); border-radius: var(--roundness);
&.-unavailable-prompt { &.-unavailable-prompt {
padding: 0.5em; padding: 0.5em;

5
src/components/status_popover/status_popover.vue
View File

@ -47,12 +47,9 @@
font-size: 1rem; font-size: 1rem;
min-width: 15em; min-width: 15em;
max-width: 95%; max-width: 95%;
border-color: $fallback--border; border-color: var(--border);
border-color: var(--border, $fallback--border);
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
/* TODO cleanup this */ /* TODO cleanup this */
.Status.Status { .Status.Status {

5
src/components/timeline/timeline.scss
View File

@ -10,22 +10,19 @@
top: calc(50% - 4px); top: calc(50% - 4px);
margin-left: 6px; margin-left: 6px;
margin-top: -6px; margin-top: -6px;
background-color: var(--badgeNeutral);
} }
.alert-badge { .alert-badge {
font-size: 0.75em; font-size: 0.75em;
line-height: 1; line-height: 1;
text-align: right; text-align: right;
border-radius: var(--tooltipRadius); border-radius: var(--roundness);
position: absolute; position: absolute;
left: calc(50% - 0.5em); left: calc(50% - 0.5em);
top: calc(50% - 0.4em); top: calc(50% - 0.4em);
padding: 0.2em; padding: 0.2em;
margin-left: 0.7em; margin-left: 0.7em;
margin-top: -1em; margin-top: -1em;
background-color: var(--badgeNeutral);
color: var(--badgeNeutralText);
} }
.loadmore-button { .loadmore-button {

14
src/components/user_avatar/user_avatar.vue
View File

@ -43,16 +43,14 @@
&.-compact { &.-compact {
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: $fallback--avatarAltRadius; border-radius: var(--roundness);
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
} }
.avatar { .avatar {
width: 100%; width: 100%;
height: 100%; height: 100%;
box-shadow: var(--_avatarShadowBox); box-shadow: var(--_avatarShadowBox);
border-radius: $fallback--avatarRadius; border-radius: var(--roundness);
border-radius: var(--avatarRadius, $fallback--avatarRadius);
&.-better-shadow { &.-better-shadow {
box-shadow: var(--_avatarShadowInset); box-shadow: var(--_avatarShadowInset);
@ -64,13 +62,11 @@
} }
&.-compact { &.-compact {
border-radius: $fallback--avatarAltRadius; border-radius: var(--roundness);
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
} }
&.-placeholder { &.-placeholder {
background-color: $fallback--fg; background-color: var(--background);
background-color: var(--fg, $fallback--fg);
} }
} }
@ -87,7 +83,7 @@
padding: 0.2em; padding: 0.2em;
background: rgb(127 127 127 / 50%); background: rgb(127 127 127 / 50%);
color: #fff; color: #fff;
border-radius: var(--tooltipRadius); border-radius: var(--roundness);
} }
} }
</style> </style>

3
src/components/user_card/user_card.scss
View File

@ -153,8 +153,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: $fallback--avatarRadius; border-radius: var(--roundness);
border-radius: var(--avatarRadius, $fallback--avatarRadius);
opacity: 0; opacity: 0;
transition: opacity 0.2s ease; transition: opacity 0.2s ease;

2
src/components/user_list_menu/user_list_menu.vue
View File

@ -14,7 +14,7 @@
@click="toggleList(list.id)" @click="toggleList(list.id)"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': list.inList }" :class="{ 'menu-checkbox-checked': list.inList }"
/> />
{{ list.title }} {{ list.title }}

17
src/panel.scss
View File

@ -10,8 +10,7 @@
&::after, &::after,
& { & {
border-radius: $fallback--panelRadius; border-radius: var(--roundness);
border-radius: var(--panelRadius, $fallback--panelRadius);
} }
&::after { &::after {
@ -77,8 +76,7 @@
&.-stub { &.-stub {
&, &,
&::after { &::after {
border-radius: $fallback--panelRadius; border-radius: var(--roundness);
border-radius: var(--panelRadius, $fallback--panelRadius);
} }
} }
@ -126,16 +124,15 @@
// TODO Should refactor panels into separate component and utilize slots // TODO Should refactor panels into separate component and utilize slots
.panel-heading { .panel-heading {
border-radius: $fallback--panelRadius $fallback--panelRadius 0 0; border-radius: var(--roundness) var(--roundness) 0 0;
border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
border-width: 0 0 1px; border-width: 0 0 1px;
align-items: start; align-items: start;
&::after { &::after {
background-color: var(--background); background-color: var(--background);
z-index: -2; z-index: -2;
border-radius: $fallback--panelRadius $fallback--panelRadius 0 0; border-bottom-left-radius: 0;
border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0; border-bottom-right-radius: 0;
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
@ -179,8 +176,8 @@
} }
.panel-footer { .panel-footer {
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius; border-top-left-radius: 0;
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); border-top-right-radius: 0;
align-items: center; align-items: center;
border-width: 1px 0 0; border-width: 1px 0 0;
border-style: solid; border-style: solid;

2
src/services/style_setter/style_setter.js
View File

@ -24,7 +24,7 @@ export const applyTheme = (input) => {
const styleSheet = styleEl.sheet const styleSheet = styleEl.sheet
styleSheet.toString() styleSheet.toString()
styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max') // styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')
// styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max') // styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
// styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max') // styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max') styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')

52
src/services/theme_data/theme_data_3.service.js
View File

@ -484,9 +484,20 @@ export const init = (extraRuleset, palette) => {
}) })
} else { } else {
computed[selector] = computed[selector] || {} computed[selector] = computed[selector] || {}
let addRuleNeeded = false
// TODO: DEFAULT TEXT COLOR
const lowerLevelComputedBackground = computed[lowerLevelSelector]?.background || convert('#FFFFFF').rgb
if (
computedDirectives.shadow != null ||
computedDirectives.roundness != null
) {
addRuleNeeded = true
}
// TODO make background non-mandatory
if (computedDirectives.background) { if (computedDirectives.background) {
addRuleNeeded = true
let inheritRule = null let inheritRule = null
const variantRules = ruleset.filter(findRules({ component: component.name, variant: combination.variant, parent })) const variantRules = ruleset.filter(findRules({ component: component.name, variant: combination.variant, parent }))
const lastVariantRule = variantRules[variantRules.length - 1] const lastVariantRule = variantRules[variantRules.length - 1]
@ -501,9 +512,6 @@ export const init = (extraRuleset, palette) => {
const inheritSelector = ruleToSelector({ ...inheritRule, parent }, true) const inheritSelector = ruleToSelector({ ...inheritRule, parent }, true)
const inheritedBackground = computed[inheritSelector].background const inheritedBackground = computed[inheritSelector].background
// TODO: DEFAULT TEXT COLOR
const lowerLevelComputedBackground = computed[lowerLevelSelector]?.background || convert('#FFFFFF').rgb
dynamicVars.inheritedBackground = inheritedBackground dynamicVars.inheritedBackground = inheritedBackground
const rgb = convert(findColor(computedDirectives.background, dynamicVars)).rgb const rgb = convert(findColor(computedDirectives.background, dynamicVars)).rgb
@ -520,16 +528,25 @@ export const init = (extraRuleset, palette) => {
} }
stacked[selector] = blend stacked[selector] = blend
computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 } computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 }
addRule({
selector,
component: component.name,
...combination,
parent,
directives: computedDirectives
})
} }
} }
if (!stacked[selector]) {
computedDirectives.background = 'transparent'
computedDirectives.opacity = 0
stacked[selector] = lowerLevelComputedBackground
computed[selector].background = { ...lowerLevelComputedBackground, a: 0 }
}
if (addRuleNeeded) {
addRule({
selector,
component: component.name,
...combination,
parent,
directives: computedDirectives
})
}
} }
innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination })) innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
@ -566,6 +583,11 @@ export const init = (extraRuleset, palette) => {
if (rule.component !== 'Root') { if (rule.component !== 'Root') {
directives = Object.entries(rule.directives).map(([k, v]) => { directives = Object.entries(rule.directives).map(([k, v]) => {
switch (k) { switch (k) {
case 'roundness': {
return ' ' + [
'--roundness: ' + v + 'px'
].join(';\n ')
}
case 'shadow': { case 'shadow': {
return ' ' + [ return ' ' + [
'--shadow: ' + getCssShadow(v), '--shadow: ' + getCssShadow(v),
@ -574,6 +596,12 @@ export const init = (extraRuleset, palette) => {
].join(';\n ') ].join(';\n ')
} }
case 'background': { case 'background': {
if (v === 'transparent') {
return [
'background-color: ' + v,
' --background: ' + v
].join(';\n')
}
const color = cssColorString(computed[ruleToSelector(rule, true)].background, rule.directives.opacity) const color = cssColorString(computed[ruleToSelector(rule, true)].background, rule.directives.opacity)
return [ return [
'background-color: ' + color, 'background-color: ' + color,