panels/statuses are looking really good now even with transparency

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>

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 {

src/components/panel.style.js

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

src/components/panel_header.style.js

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

src/components/status/post.style.js

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

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;

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;

src/components/user_card/user_card.vue

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

src/components/user_panel/user_panel.vue

@@ -22,8 +22,15 @@
 <script src="./user_panel.js"></script>
 
 <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>

src/components/user_profile/user_profile.vue

@@ -4,52 +4,54 @@
       v-if="user"
       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>
       <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>

src/panel.scss

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

src/services/theme_data/theme2_to_theme3.js

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