aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/conversation/conversation.vue12
-rw-r--r--src/components/notification/notification.scss5
-rw-r--r--src/components/panel.style.js1
-rw-r--r--src/components/panel_header.style.js1
-rw-r--r--src/components/status/post.style.js6
-rw-r--r--src/components/timeline/timeline.scss4
-rw-r--r--src/components/user_card/user_card.scss8
-rw-r--r--src/components/user_card/user_card.vue5
-rw-r--r--src/components/user_panel/user_panel.vue13
-rw-r--r--src/components/user_profile/user_profile.vue96
10 files changed, 84 insertions, 67 deletions
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 64aa1351..d3ebf791 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -28,7 +28,10 @@
class="rightside-button"
/>
</div>
- <div class="conversation-body panel-body">
+ <div
+ class="conversation-body"
+ :class="{ 'panel-body': isExpanded }"
+ >
<div
v-if="isTreeView"
class="thread-body"
@@ -78,7 +81,7 @@
:replies="getReplies(status.id)"
:in-profile="inProfile"
:profile-user-id="profileUserId"
- class="conversation-status status-fadein panel-body"
+ class="conversation-status status-fadein"
:simple-tree="treeViewIsSimple"
:toggle-thread-display="toggleThreadDisplay"
@@ -183,7 +186,7 @@
:replies="getReplies(status.id)"
:in-profile="inProfile"
:profile-user-id="profileUserId"
- class="conversation-status status-fadein panel-body"
+ class="conversation-status status-fadein"
:toggle-thread-display="toggleThreadDisplay"
:thread-display-status="threadDisplayStatus"
@@ -284,7 +287,8 @@
}
&.-expanded.status-fadein {
- margin: calc(var(--status-margin, $status-margin) / 2);
+ background: var(--background);
+ padding: calc(var(--status-margin, $status-margin) / 2);
}
}
</style>
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index ad05a2f3..2dbced09 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -5,6 +5,11 @@
word-wrap: break-word;
word-break: break-word;
+ &.Status {
+ /* stylelint-disable-next-line declaration-no-important */
+ background-color: transparent !important;
+ }
+
--emoji-size: 14px;
&:hover {
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index d7459549..ad16c18f 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -23,6 +23,7 @@ export default {
defaultRules: [
{
directives: {
+ backgroundNoCssColor: 'yes',
background: '--bg',
roundness: 3,
blur: '5px',
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
index 56879fba..32464bc5 100644
--- a/src/components/panel_header.style.js
+++ b/src/components/panel_header.style.js
@@ -15,6 +15,7 @@ export default {
{
component: 'PanelHeader',
directives: {
+ backgroundNoCssColor: 'yes',
background: '--fg',
shadow: []
}
diff --git a/src/components/status/post.style.js b/src/components/status/post.style.js
index 673f72e0..8dce527e 100644
--- a/src/components/status/post.style.js
+++ b/src/components/status/post.style.js
@@ -20,15 +20,13 @@ export default {
defaultRules: [
{
directives: {
- background: '--bg',
- opacity: 0
+ background: '--bg'
}
},
{
state: ['selected'],
directives: {
- background: '--inheritedBackground, 10',
- opacity: 1
+ background: '--inheritedBackground, 10'
}
}
]
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 7f886dc3..fccf28f4 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -1,6 +1,10 @@
@import "../../variables";
.Timeline {
+ .timeline-body {
+ background: none;
+ }
+
.alert-badge {
font-size: 0.75em;
line-height: 1;
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 6dba3499..bf0ed5c2 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -21,14 +21,6 @@
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 {
position: absolute;
top: 0;
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 0f627f62..70c4f67d 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -282,10 +282,7 @@
/>
</div>
</div>
- <div
- v-if="!hideBio"
- class="panel-body"
- >
+ <div v-if="!hideBio">
<div
v-if="!mergedConfig.hideUserStats && switcher"
class="user-counts"
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 95ec97af..9323b65e 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -22,8 +22,15 @@
<script src="./user_panel.js"></script>
<style lang="scss">
-.user-panel .signed-in {
- overflow: visible;
- z-index: 10;
+.user-panel {
+ .panel {
+ background: var(--background);
+ backdrop-filter: var(--backdrop-filter);
+ }
+
+ .signed-in {
+ overflow: visible;
+ z-index: 10;
+ }
}
</style>
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 011f32da..2d8b33e7 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -4,52 +4,54 @@
v-if="user"
class="user-profile panel panel-default"
>
- <UserCard
- :user-id="userId"
- :switcher="true"
- :selected="timeline.viewing"
- avatar-action="zoom"
- rounded="top"
- :has-note-editor="true"
- />
- <span
- v-if="!!user.birthday"
- class="user-birthday"
- >
- <FAIcon
- class="fa-old-padding"
- icon="birthday-cake"
+ <div class="panel-body">
+ <UserCard
+ :user-id="userId"
+ :switcher="true"
+ :selected="timeline.viewing"
+ avatar-action="zoom"
+ rounded="top"
+ :has-note-editor="true"
/>
- {{ $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"
+ <span
+ v-if="!!user.birthday"
+ class="user-birthday"
>
- <dt
- :title="user.fields_text[index].name"
- class="user-profile-field-name"
- >
- <RichContent
- :html="field.name"
- :emoji="user.emoji"
- />
- </dt>
- <dd
- :title="user.fields_text[index].value"
- class="user-profile-field-value"
+ <FAIcon
+ class="fa-old-padding"
+ 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
- :html="field.value"
- :emoji="user.emoji"
- />
- </dd>
- </dl>
+ <dt
+ :title="user.fields_text[index].name"
+ class="user-profile-field-name"
+ >
+ <RichContent
+ :html="field.name"
+ :emoji="user.emoji"
+ />
+ </dt>
+ <dd
+ :title="user.fields_text[index].value"
+ class="user-profile-field-value"
+ >
+ <RichContent
+ :html="field.value"
+ :emoji="user.emoji"
+ />
+ </dd>
+ </dl>
+ </div>
</div>
<tab-switcher
:active-tab="tab"
@@ -136,7 +138,7 @@
{{ $t('settings.profile_tab') }}
</div>
</div>
- <div class="panel-body">
+ <div>
<span v-if="error">{{ error }}</span>
<FAIcon
v-else
@@ -160,6 +162,11 @@
// No sticky header on user profile
--currentPanelStack: 1;
+ .tab-switcher .tabs {
+ background: var(--__panel-background);
+ backdrop-filter: var(--__panel-backdrop-filter);
+ }
+
.user-birthday {
margin: 0 0.75em 0.5em;
}
@@ -228,4 +235,5 @@
padding: 7em;
}
}
+
</style>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-28 22:22:41 +0000