panels/statuses are looking really good now even with transparency

This commit is contained in:
Henry Jameson 2024-03-04 18:24:29 +02:00
parent a2f2a0e409
commit a190389f3c
12 changed files with 97 additions and 67 deletions

View File

@ -28,7 +28,10 @@
class="rightside-button" class="rightside-button"
/> />
</div> </div>
<div class="conversation-body panel-body"> <div
class="conversation-body"
:class="{ 'panel-body': isExpanded }"
>
<div <div
v-if="isTreeView" v-if="isTreeView"
class="thread-body" class="thread-body"
@ -78,7 +81,7 @@
:replies="getReplies(status.id)" :replies="getReplies(status.id)"
:in-profile="inProfile" :in-profile="inProfile"
:profile-user-id="profileUserId" :profile-user-id="profileUserId"
class="conversation-status status-fadein panel-body" class="conversation-status status-fadein"
:simple-tree="treeViewIsSimple" :simple-tree="treeViewIsSimple"
:toggle-thread-display="toggleThreadDisplay" :toggle-thread-display="toggleThreadDisplay"
@ -183,7 +186,7 @@
:replies="getReplies(status.id)" :replies="getReplies(status.id)"
:in-profile="inProfile" :in-profile="inProfile"
:profile-user-id="profileUserId" :profile-user-id="profileUserId"
class="conversation-status status-fadein panel-body" class="conversation-status status-fadein"
:toggle-thread-display="toggleThreadDisplay" :toggle-thread-display="toggleThreadDisplay"
:thread-display-status="threadDisplayStatus" :thread-display-status="threadDisplayStatus"
@ -284,7 +287,8 @@
} }
&.-expanded.status-fadein { &.-expanded.status-fadein {
margin: calc(var(--status-margin, $status-margin) / 2); background: var(--background);
padding: calc(var(--status-margin, $status-margin) / 2);
} }
} }
</style> </style>

View File

@ -5,6 +5,11 @@
word-wrap: break-word; word-wrap: break-word;
word-break: break-word; word-break: break-word;
&.Status {
/* stylelint-disable-next-line declaration-no-important */
background-color: transparent !important;
}
--emoji-size: 14px; --emoji-size: 14px;
&:hover { &:hover {

View File

@ -23,6 +23,7 @@ export default {
defaultRules: [ defaultRules: [
{ {
directives: { directives: {
backgroundNoCssColor: 'yes',
background: '--bg', background: '--bg',
roundness: 3, roundness: 3,
blur: '5px', blur: '5px',

View File

@ -15,6 +15,7 @@ export default {
{ {
component: 'PanelHeader', component: 'PanelHeader',
directives: { directives: {
backgroundNoCssColor: 'yes',
background: '--fg', background: '--fg',
shadow: [] shadow: []
} }

View File

@ -20,15 +20,13 @@ export default {
defaultRules: [ defaultRules: [
{ {
directives: { directives: {
background: '--bg', background: '--bg'
opacity: 0
} }
}, },
{ {
state: ['selected'], state: ['selected'],
directives: { directives: {
background: '--inheritedBackground, 10', background: '--inheritedBackground, 10'
opacity: 1
} }
} }
] ]

View File

@ -1,6 +1,10 @@
@import "../../variables"; @import "../../variables";
.Timeline { .Timeline {
.timeline-body {
background: none;
}
.alert-badge { .alert-badge {
font-size: 0.75em; font-size: 0.75em;
line-height: 1; line-height: 1;

View File

@ -21,14 +21,6 @@
position: relative; position: relative;
} }
.panel-body {
word-wrap: break-word;
border-bottom-right-radius: inherit;
border-bottom-left-radius: inherit;
// create new stacking context
position: relative;
}
.background-image { .background-image {
position: absolute; position: absolute;
top: 0; top: 0;

View File

@ -282,10 +282,7 @@
/> />
</div> </div>
</div> </div>
<div <div v-if="!hideBio">
v-if="!hideBio"
class="panel-body"
>
<div <div
v-if="!mergedConfig.hideUserStats && switcher" v-if="!mergedConfig.hideUserStats && switcher"
class="user-counts" class="user-counts"

View File

@ -22,8 +22,15 @@
<script src="./user_panel.js"></script> <script src="./user_panel.js"></script>
<style lang="scss"> <style lang="scss">
.user-panel .signed-in { .user-panel {
overflow: visible; .panel {
z-index: 10; background: var(--background);
backdrop-filter: var(--backdrop-filter);
}
.signed-in {
overflow: visible;
z-index: 10;
}
} }
</style> </style>

View File

@ -4,52 +4,54 @@
v-if="user" v-if="user"
class="user-profile panel panel-default" class="user-profile panel panel-default"
> >
<UserCard <div class="panel-body">
:user-id="userId" <UserCard
:switcher="true" :user-id="userId"
:selected="timeline.viewing" :switcher="true"
avatar-action="zoom" :selected="timeline.viewing"
rounded="top" avatar-action="zoom"
:has-note-editor="true" rounded="top"
/> :has-note-editor="true"
<span
v-if="!!user.birthday"
class="user-birthday"
>
<FAIcon
class="fa-old-padding"
icon="birthday-cake"
/> />
{{ $t('user_card.birthday', { birthday: formattedBirthday }) }} <span
</span> v-if="!!user.birthday"
<div class="user-birthday"
v-if="user.fields_html && user.fields_html.length > 0"
class="user-profile-fields"
>
<dl
v-for="(field, index) in user.fields_html"
:key="index"
class="user-profile-field"
> >
<dt <FAIcon
:title="user.fields_text[index].name" class="fa-old-padding"
class="user-profile-field-name" icon="birthday-cake"
/>
{{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
</span>
<div
v-if="user.fields_html && user.fields_html.length > 0"
class="user-profile-fields"
>
<dl
v-for="(field, index) in user.fields_html"
:key="index"
class="user-profile-field"
> >
<RichContent <dt
:html="field.name" :title="user.fields_text[index].name"
:emoji="user.emoji" class="user-profile-field-name"
/> >
</dt> <RichContent
<dd :html="field.name"
:title="user.fields_text[index].value" :emoji="user.emoji"
class="user-profile-field-value" />
> </dt>
<RichContent <dd
:html="field.value" :title="user.fields_text[index].value"
:emoji="user.emoji" class="user-profile-field-value"
/> >
</dd> <RichContent
</dl> :html="field.value"
:emoji="user.emoji"
/>
</dd>
</dl>
</div>
</div> </div>
<tab-switcher <tab-switcher
:active-tab="tab" :active-tab="tab"
@ -136,7 +138,7 @@
{{ $t('settings.profile_tab') }} {{ $t('settings.profile_tab') }}
</div> </div>
</div> </div>
<div class="panel-body"> <div>
<span v-if="error">{{ error }}</span> <span v-if="error">{{ error }}</span>
<FAIcon <FAIcon
v-else v-else
@ -160,6 +162,11 @@
// No sticky header on user profile // No sticky header on user profile
--currentPanelStack: 1; --currentPanelStack: 1;
.tab-switcher .tabs {
background: var(--__panel-background);
backdrop-filter: var(--__panel-backdrop-filter);
}
.user-birthday { .user-birthday {
margin: 0 0.75em 0.5em; margin: 0 0.75em 0.5em;
} }
@ -228,4 +235,5 @@
padding: 7em; padding: 7em;
} }
} }
</style> </style>

View File

@ -1,5 +1,8 @@
/* stylelint-disable no-descending-specificity */ /* stylelint-disable no-descending-specificity */
.panel { .panel {
--__panel-background: var(--background);
--__panel-backdrop-filter: var(--backdrop-filter);
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -28,6 +31,8 @@
.panel-body { .panel-body {
padding: var(--panel-body-padding, 0); padding: var(--panel-body-padding, 0);
background: var(--background);
backdrop-filter: var(--__panel-backdrop-filter);
&:empty::before { &:empty::before {
content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
@ -50,6 +55,7 @@
--__panel-heading-height: 3.2em; --__panel-heading-height: 3.2em;
--__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0)); --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
backdrop-filter: var(--__panel-backdrop-filter);
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
display: grid; display: grid;
@ -131,6 +137,9 @@
border-radius: var(--roundness) var(--roundness) 0 0; border-radius: var(--roundness) var(--roundness) 0 0;
border-width: 0 0 1px; border-width: 0 0 1px;
align-items: start; align-items: start;
background-image:
linear-gradient(to bottom, var(--background), var(--background)),
linear-gradient(to bottom, var(--__panel-background), var(--__panel-background));
&::after { &::after {
background-color: var(--background); background-color: var(--background);
@ -186,5 +195,6 @@
border-width: 1px 0 0; border-width: 1px 0 0;
border-style: solid; border-style: solid;
border-color: var(--border); border-color: var(--border);
background-color: var(--__panel-background);
} }
/* stylelint-enable no-descending-specificity */ /* stylelint-enable no-descending-specificity */

View File

@ -202,6 +202,9 @@ export const convertTheme2To3 = (data) => {
newRules.push({ ...rule, component: 'Tab' }) newRules.push({ ...rule, component: 'Tab' })
newRules.push({ ...rule, component: 'Tab', state: ['active'], directives: { opacity: 0 } }) newRules.push({ ...rule, component: 'Tab', state: ['active'], directives: { opacity: 0 } })
} }
if (rule.component === 'Panel') {
newRules.push({ ...rule, component: 'Post' })
}
}) })
return newRules return newRules
} }