@nextcloud/vue 9.9.0 → 9.10.0

package/dist/assets/{NcInputField-DpyFJ1xw.css → NcInputField.css}

@@ -9,7 +9,7 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-8e16cbb5] {
+.material-design-icon[data-v-feb04bef] {
   display: flex;
   align-self: center;
   justify-self: center;
@@ -28,7 +28,7 @@
  * Create a consistent border for an input element.
  * With Nextcloud 32+ there is no real border anymore but we use a box-shadow.
  */
-.input-field[data-v-8e16cbb5] {
+.input-field[data-v-feb04bef] {
   --input-border-color: var(--color-border-maxcontrast);
   --input-border-radius: var(--border-radius-element);
   --input-padding-start: var(--border-radius-element);
@@ -37,28 +37,28 @@
   width: 100%;
   margin-block-start: 6px;
 }
-.input-field--disabled[data-v-8e16cbb5] {
+.input-field--disabled[data-v-feb04bef] {
   opacity: 0.4;
   filter: saturate(0.4);
 }
-.input-field--label-outside[data-v-8e16cbb5] {
+.input-field--label-outside[data-v-feb04bef] {
   margin-block-start: 0;
 }
-.input-field--leading-icon[data-v-8e16cbb5] {
+.input-field--leading-icon[data-v-feb04bef] {
   --input-padding-start: calc(var(--default-clickable-area) - var(--default-grid-baseline));
 }
-.input-field--trailing-icon[data-v-8e16cbb5] {
+.input-field--trailing-icon[data-v-feb04bef] {
   --input-padding-end: calc(var(--default-clickable-area) - var(--default-grid-baseline));
 }
-.input-field--pill[data-v-8e16cbb5] {
+.input-field--pill[data-v-feb04bef] {
   --input-border-radius: var(--border-radius-pill);
 }
-.input-field__main-wrapper[data-v-8e16cbb5] {
+.input-field__main-wrapper[data-v-feb04bef] {
   height: var(--default-clickable-area);
   padding: var(--border-width-input-focused, 2px);
   position: relative;
 }
-.input-field__input[data-v-8e16cbb5] {
+.input-field__input[data-v-feb04bef] {
   --input-border-box-shadow-light: 0 -1px var(--input-border-color),
   	0 0 0 1px color-mix(in srgb, var(--input-border-color), 65% transparent);
   --input-border-box-shadow-dark: 0 1px var(--input-border-color),
@@ -68,30 +68,30 @@
   border-radius: var(--border-radius-element);
   box-shadow: var(--input-border-box-shadow);
 }
-.input-field__input[data-v-8e16cbb5]:hover:not([disabled]) {
+.input-field__input[data-v-feb04bef]:hover:not([disabled]) {
   box-shadow: 0 0 0 1px var(--input-border-color);
 }
 @media (prefers-color-scheme: dark) {
-.input-field__input .input-field__input[data-v-8e16cbb5] {
+.input-field__input .input-field__input[data-v-feb04bef] {
     --input-border-box-shadow: var(--input-border-box-shadow-dark);
 }
 }
-[data-theme-dark] .input-field__input[data-v-8e16cbb5] {
+[data-theme-dark] .input-field__input[data-v-feb04bef] {
   --input-border-box-shadow: var(--input-border-box-shadow-dark);
 }
-[data-theme-light] .input-field__input[data-v-8e16cbb5] {
+[data-theme-light] .input-field__input[data-v-feb04bef] {
   --input-border-box-shadow: var(--input-border-box-shadow-light);
 }
-.input-field--legacy .input-field__input[data-v-8e16cbb5] {
+.input-field--legacy .input-field__input[data-v-feb04bef] {
   box-shadow: 0 0 0 1px var(--input-border-color);
 }
-.input-field--legacy .input-field__input[data-v-8e16cbb5]:hover:not([disabled]) {
+.input-field--legacy .input-field__input[data-v-feb04bef]:hover:not([disabled]) {
   box-shadow: 0 0 0 2px var(--input-border-color);
 }
-.input-field__input[data-v-8e16cbb5]:focus-within:not([disabled]), .input-field__input[data-v-8e16cbb5]:active:not([disabled]) {
+.input-field__input[data-v-feb04bef]:focus-within:not([disabled]), .input-field__input[data-v-feb04bef]:active:not([disabled]) {
   box-shadow: 0 0 0 2px var(--input-border-color), 0 0 0 4px var(--color-main-background) !important;
 }
-.input-field__input[data-v-8e16cbb5] {
+.input-field__input[data-v-feb04bef] {
   background-color: var(--color-main-background);
   color: var(--color-main-text);
   border-radius: var(--input-border-radius);
@@ -107,34 +107,34 @@
   min-height: unset;
   width: 100%;
 }
-.input-field__input[data-v-8e16cbb5]::placeholder {
+.input-field__input[data-v-feb04bef]::placeholder {
   color: var(--color-text-maxcontrast);
 }
-.input-field__input[data-v-8e16cbb5]::-webkit-search-cancel-button {
+.input-field__input[data-v-feb04bef]::-webkit-search-cancel-button {
   display: none;
 }
-.input-field__input[data-v-8e16cbb5]::-webkit-search-decoration, .input-field__input[data-v-8e16cbb5]::-webkit-search-results-button, .input-field__input[data-v-8e16cbb5]::-webkit-search-results-decoration, .input-field__input[data-v-8e16cbb5]::-ms-clear {
+.input-field__input[data-v-feb04bef]::-webkit-search-decoration, .input-field__input[data-v-feb04bef]::-webkit-search-results-button, .input-field__input[data-v-feb04bef]::-webkit-search-results-decoration, .input-field__input[data-v-feb04bef]::-ms-clear {
   display: none;
 }
-.input-field__input[data-v-8e16cbb5]:active:not([disabled]), .input-field__input[data-v-8e16cbb5]:focus:not([disabled]) {
+.input-field__input[data-v-feb04bef]:active:not([disabled]), .input-field__input[data-v-feb04bef]:focus:not([disabled]) {
   --input-border-color: var(--color-main-text);
 }
-.input-field__input:focus + .input-field__label[data-v-8e16cbb5], .input-field__input:hover:not(:placeholder-shown) + .input-field__label[data-v-8e16cbb5] {
+.input-field__input:focus + .input-field__label[data-v-feb04bef], .input-field__input:hover:not(:placeholder-shown) + .input-field__label[data-v-feb04bef] {
   color: var(--color-main-text);
 }
-.input-field__input[data-v-8e16cbb5]:focus {
+.input-field__input[data-v-feb04bef]:focus {
   cursor: text;
 }
-.input-field__input[data-v-8e16cbb5]:disabled {
+.input-field__input[data-v-feb04bef]:disabled {
   cursor: default;
 }
-.input-field__input[data-v-8e16cbb5]:focus-visible {
+.input-field__input[data-v-feb04bef]:focus-visible {
   box-shadow: unset !important;
 }
-.input-field:not(.input-field--label-outside) .input-field__input[data-v-8e16cbb5]:not(:focus)::placeholder {
+.input-field:not(.input-field--label-outside) .input-field__input[data-v-feb04bef]:not(:focus)::placeholder {
   opacity: 0;
 }
-.input-field__label[data-v-8e16cbb5] {
+.input-field__label[data-v-feb04bef] {
   --input-label-font-size: var(--default-font-size);
   font-size: var(--input-label-font-size);
   position: absolute;
@@ -149,7 +149,7 @@
   pointer-events: none;
   transition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);
 }
-.input-field__input:focus + .input-field__label[data-v-8e16cbb5], .input-field__input:not(:placeholder-shown) + .input-field__label[data-v-8e16cbb5] {
+.input-field__input:focus + .input-field__label[data-v-feb04bef], .input-field__input:not(:placeholder-shown) + .input-field__label[data-v-feb04bef] {
   --input-label-font-size: 13px;
   line-height: 1.5;
   inset-block-start: calc(-1.5 * var(--input-label-font-size) / 2);
@@ -160,7 +160,7 @@
   margin-inline: calc(var(--input-padding-start) - var(--default-grid-baseline)) calc(var(--input-padding-end) - var(--default-grid-baseline));
   transition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);
 }
-.input-field__icon[data-v-8e16cbb5] {
+.input-field__icon[data-v-feb04bef] {
   position: absolute;
   height: var(--default-clickable-area);
   width: var(--default-clickable-area);
@@ -170,25 +170,25 @@
   opacity: 0.7;
   inset-block-end: 0;
 }
-.input-field__icon--leading[data-v-8e16cbb5] {
+.input-field__icon--leading[data-v-feb04bef] {
   inset-inline-start: 0px;
 }
-.input-field__icon--trailing[data-v-8e16cbb5] {
+.input-field__icon--trailing[data-v-feb04bef] {
   inset-inline-end: 0px;
 }
-.input-field__trailing-button[data-v-8e16cbb5] {
+.input-field__trailing-button[data-v-feb04bef] {
   --button-size: calc(var(--default-clickable-area) - 2 * var(--border-width-input-focused, 2px)) !important;
   --button-radius: calc(var(--input-border-radius) - var(--border-width-input-focused, 2px));
 }
-.input-field__trailing-button.button-vue[data-v-8e16cbb5] {
+.input-field__trailing-button.button-vue[data-v-feb04bef] {
   position: absolute;
   top: var(--border-width-input-focused, 2px);
   inset-inline-end: var(--border-width-input-focused, 2px);
 }
-.input-field__trailing-button.button-vue[data-v-8e16cbb5]:focus-visible {
+.input-field__trailing-button.button-vue[data-v-feb04bef]:focus-visible {
   box-shadow: none !important;
 }
-.input-field__helper-text-message[data-v-8e16cbb5] {
+.input-field__helper-text-message[data-v-feb04bef] {
   padding-block: 4px;
   padding-inline: var(--border-radius-element);
   display: flex;
@@ -196,25 +196,25 @@
   color: var(--color-text-maxcontrast);
   overflow-wrap: anywhere;
 }
-.input-field__helper-text-message__icon[data-v-8e16cbb5] {
+.input-field__helper-text-message__icon[data-v-feb04bef] {
   margin-inline-end: 8px;
 }
-.input-field--error .input-field__helper-text-message[data-v-8e16cbb5],
-.input-field--error .input-field__icon--trailing[data-v-8e16cbb5] {
+.input-field--error .input-field__helper-text-message[data-v-feb04bef],
+.input-field--error .input-field__icon--trailing[data-v-feb04bef] {
   color: var(--color-text-error, var(--color-error));
 }
-.input-field--error .input-field__input[data-v-8e16cbb5], .input-field__input[data-v-8e16cbb5]:user-invalid {
+.input-field--error .input-field__input[data-v-feb04bef], .input-field__input[data-v-feb04bef]:user-invalid {
   --input-border-color: var(--color-border-error, var(--color-error)) !important;
 }
-.input-field--error .input-field__input[data-v-8e16cbb5]:focus-visible, .input-field__input[data-v-8e16cbb5]:user-invalid:focus-visible {
+.input-field--error .input-field__input[data-v-feb04bef]:focus-visible, .input-field__input[data-v-feb04bef]:user-invalid:focus-visible {
   box-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
 }
-.input-field--success .input-field__input[data-v-8e16cbb5] {
+.input-field--success .input-field__input[data-v-feb04bef] {
   --input-border-color: var(--color-border-success, var(--color-success)) !important;
 }
-.input-field--success .input-field__input[data-v-8e16cbb5]:focus-visible {
+.input-field--success .input-field__input[data-v-feb04bef]:focus-visible {
   box-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
 }
-.input-field--success .input-field__helper-text-message__icon[data-v-8e16cbb5] {
+.input-field--success .input-field__helper-text-message__icon[data-v-feb04bef] {
   color: var(--color-border-success, var(--color-success));
 }

package/dist/assets/{NcKbd-DcC56WbC.css → NcKbd.css}

@@ -9,14 +9,14 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-._material-design-icon_ZhQq1 {
+._material-design-icon_MIgpl {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-._kbd_ixPyw {
+._kbd_fAhrp {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -31,6 +31,6 @@
   line-height: 1;
   white-space: nowrap;
 }
-._kbd_ixPyw + ._kbd_ixPyw {
+._kbd_fAhrp + ._kbd_fAhrp {
   margin-inline-start: calc(1 * var(--default-grid-baseline));
 }

package/dist/assets/NcPopover.css

@@ -0,0 +1,108 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+/**
+ * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+/*
+* Ensure proper alignment of the vue material icons
+*/
+._material-design-icon_1cKzS {
+  display: flex;
+  align-self: center;
+  justify-self: center;
+  align-items: center;
+  justify-content: center;
+}
+._ncPopover_qDh5Z.v-popper--theme-nc-popover-9, ._ncPopover_qDh5Z.v-popper--theme-nc-popover-9 * {
+  box-sizing: border-box;
+}
+._ncPopover_qDh5Z.v-popper--theme-nc-popover-9 .resize-observer {
+  position: absolute;
+  top: 0;
+  /* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: transparent;
+  pointer-events: none;
+  display: block;
+  overflow: hidden;
+  opacity: 0;
+}
+._ncPopover_qDh5Z.v-popper--theme-nc-popover-9 .resize-observer object {
+  display: block;
+  position: absolute;
+  top: 0;
+  /* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: -1;
+}
+._ncPopover_qDh5Z.v-popper--theme-nc-popover-9.v-popper__popper {
+  z-index: 100000;
+  top: 0;
+  /* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */
+  left: 0;
+  display: block !important;
+}
+._ncPopover_qDh5Z.v-popper--theme-nc-popover-9.v-popper__popper .v-popper__wrapper {
+  /*
+   * In theory, "filter: drop-shadow" would look better here with arrow shadow.
+   * In fact, in results in a blurry popover in Chromium on scaling.
+   * The hypothesis is that "filter" creates a new composition layer,
+   * and with GPU acceleration requires the previous layers content to be rasterized.
+   * In combination with translate3d from floating-vue, it makes Chromium to first render and rasterize the popover
+   * and then apply scaling, which results in a blurry popover.
+   */
+  box-shadow: 0 1px 10px var(--color-box-shadow);
+  border-radius: var(--border-radius-element);
+  transition: transform var(--animation-quick);
+}
+._ncPopover_qDh5Z.v-popper--theme-nc-popover-9.v-popper__popper .v-popper__inner {
+  padding: 0;
+  color: var(--color-main-text);
+  border-radius: var(--border-radius-element);
+  overflow: hidden;
+  background: var(--color-main-background);
+}
+._ncPopover_qDh5Z.v-popper--theme-nc-popover-9.v-popper__popper .v-popper__arrow-container {
+  display: none;
+}
+._ncPopover_qDh5Z.v-popper--theme-nc-popover-9.v-popper__popper[data-popper-placement^=top] .v-popper__wrapper {
+  transform-origin: bottom center;
+}
+._ncPopover_qDh5Z.v-popper--theme-nc-popover-9.v-popper__popper[data-popper-placement^=bottom] .v-popper__wrapper {
+  transform-origin: top center;
+}
+._ncPopover_qDh5Z.v-popper--theme-nc-popover-9.v-popper__popper[data-popper-placement^=right] .v-popper__wrapper {
+  /* stylelint-disable-next-line csstools/use-logical */ /* transform-origin has no logical keyword */
+  transform-origin: left center;
+}
+._ncPopover_qDh5Z.v-popper--theme-nc-popover-9.v-popper__popper[data-popper-placement^=left] .v-popper__wrapper {
+  /* stylelint-disable-next-line csstools/use-logical */ /* transform-origin has no logical keyword */
+  transform-origin: right center;
+}
+._ncPopover_qDh5Z.v-popper--theme-nc-popover-9.v-popper__popper[aria-hidden=true] {
+  visibility: hidden;
+  transition: opacity var(--animation-quick), visibility var(--animation-quick);
+  opacity: 0;
+}
+._ncPopover_qDh5Z.v-popper--theme-nc-popover-9.v-popper__popper[aria-hidden=true] .v-popper__wrapper {
+  transform: scale(0.96);
+}
+._ncPopover_qDh5Z.v-popper--theme-nc-popover-9.v-popper__popper[aria-hidden=false] {
+  visibility: visible;
+  transition: opacity var(--animation-quick);
+  opacity: 1;
+}
+._ncPopover_qDh5Z.v-popper--theme-nc-popover-9.v-popper__popper[aria-hidden=false] .v-popper__wrapper {
+  transform: scale(1);
+}

package/dist/assets/NcProfileHoverCard.css

@@ -0,0 +1,340 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+/**
+ * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+/*
+* Ensure proper alignment of the vue material icons
+*/
+.material-design-icon[data-v-dc040af1] {
+  display: flex;
+  align-self: center;
+  justify-self: center;
+  align-items: center;
+  justify-content: center;
+}
+.profile-hover-card[data-v-dc040af1] {
+  box-sizing: border-box;
+  position: relative;
+  width: 560px;
+  max-width: min(560px, 90vw);
+  min-height: 300px;
+  overflow: hidden;
+  color: var(--color-main-text);
+  background-color: var(--color-main-background);
+  border-radius: var(--border-radius-large);
+  display: flex;
+  flex-direction: column;
+}
+.profile-hover-card__header[data-v-dc040af1] {
+  display: flex;
+  flex-shrink: 0;
+  position: relative;
+  height: 127px;
+  background-color: var(--color-primary-element-light);
+}
+.profile-hover-card__header__edit[data-v-dc040af1] {
+  position: absolute;
+  inset-block-start: 8px;
+  inset-inline-end: 8px;
+  z-index: 1;
+}
+.profile-hover-card__header__container[data-v-dc040af1] {
+  align-self: flex-end;
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
+  width: 100%;
+  margin: 8px 0;
+  padding-inline: 16px;
+  box-sizing: border-box;
+}
+.profile-hover-card__header__container__placeholder[data-v-dc040af1] {
+  flex: 0 0 180px;
+  width: 180px;
+}
+.profile-hover-card__header__container__avatar[data-v-dc040af1] {
+  flex-shrink: 0;
+}
+.profile-hover-card__header__container__identity[data-v-dc040af1] {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-start;
+  gap: 4px;
+  min-width: 0;
+  flex: 1;
+  padding-inline: 0;
+}
+.profile-hover-card__header__container__displayname[data-v-dc040af1] {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+.profile-hover-card__header__container__displayname h2[data-v-dc040af1] {
+  font-size: 24px;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+.profile-hover-card__header__container__pronouns[data-v-dc040af1] {
+  font-size: 15px;
+  color: var(--color-text-maxcontrast);
+}
+.profile-hover-card__header__container__status[data-v-dc040af1] {
+  min-width: 0;
+}
+.profile-hover-card__header__container__status-content[data-v-dc040af1] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  overflow-wrap: anywhere;
+}
+.profile-hover-card__body[data-v-dc040af1] {
+  flex: 1;
+  min-height: 0;
+  background-color: var(--color-main-background);
+}
+.profile-hover-card__content[data-v-dc040af1] {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  padding-inline: 16px 16px;
+  box-sizing: border-box;
+}
+.profile-hover-card__sidebar[data-v-dc040af1] {
+  align-self: flex-start;
+  padding-top: 8px;
+  width: 180px;
+  min-width: 180px;
+  margin-block: -100px 0;
+  margin-inline: 0 12px;
+}
+.profile-hover-card__header[data-v-dc040af1] .avatar.avatardiv, .profile-hover-card__sidebar[data-v-dc040af1] .avatar.avatardiv {
+  text-align: center;
+  margin: auto;
+  display: block;
+  padding: 8px;
+}
+.profile-hover-card__header[data-v-dc040af1] .avatar.avatardiv .avatardiv__user-status, .profile-hover-card__sidebar[data-v-dc040af1] .avatar.avatardiv .avatardiv__user-status {
+  inset-inline-end: 10px;
+  bottom: 10px;
+  width: 26px;
+  height: 26px;
+  background-size: 22px;
+  border: none;
+  background-color: var(--color-main-background);
+  line-height: 26px;
+  font-size: 16px;
+}
+.profile-hover-card__blocks[data-v-dc040af1] {
+  margin: 12px 0 12px 0;
+  display: grid;
+  gap: 8px 0;
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  align-content: start;
+}
+.profile-hover-card__blocks p[data-v-dc040af1], .profile-hover-card__blocks h3[data-v-dc040af1] {
+  overflow-wrap: anywhere;
+}
+.profile-hover-card__blocks-details[data-v-dc040af1] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px 0;
+}
+.profile-hover-card__blocks-details .detail[data-v-dc040af1] {
+  display: inline-block;
+  color: var(--color-text-maxcontrast);
+  font-size: 14px;
+}
+.profile-hover-card__blocks-details .detail p .detail-icon[data-v-dc040af1] {
+  display: inline-block;
+  vertical-align: middle;
+}
+.profile-hover-card__blocks-headline[data-v-dc040af1] {
+  margin-inline: 0;
+  margin-block: 4px 0;
+  font-weight: bold;
+  font-size: 16px;
+}
+.profile-hover-card__blocks-biography[data-v-dc040af1] {
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  line-clamp: 4;
+  text-overflow: ellipsis;
+  overflow-wrap: anywhere;
+}
+.profile-hover-card__blocks-biography[data-v-dc040af1] p {
+  margin: 0;
+}
+.profile-hover-card__blocks-empty-info[data-v-dc040af1] {
+  margin: 0;
+  padding: 0;
+}
+.profile-hover-card__loading[data-v-dc040af1], .profile-hover-card__error[data-v-dc040af1] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 300px;
+  padding: 16px;
+  color: var(--color-text-maxcontrast);
+}
+.user-actions[data-v-dc040af1] {
+  display: flex;
+  flex-direction: column;
+  gap: 8px 0;
+  margin-top: 12px;
+  max-width: 180px;
+}
+.user-actions__loading[data-v-dc040af1] {
+  display: flex;
+  justify-content: center;
+  padding: 8px 0;
+}
+.user-actions__primary[data-v-dc040af1] {
+  margin: 0 auto;
+  width: 180px !important;
+}
+.user-actions__primary__icon[data-v-dc040af1] {
+  height: 20px;
+  width: 20px;
+  object-fit: contain;
+  filter: var(--primary-invert-if-dark);
+}
+.user-actions__primary__icon-class[data-v-dc040af1] {
+  display: block;
+  height: 20px;
+  width: 20px;
+  background-size: 20px;
+  background-repeat: no-repeat;
+  background-position: center;
+  filter: var(--primary-invert-if-dark);
+}
+.user-actions__other[data-v-dc040af1] {
+  display: flex;
+  justify-content: center;
+  gap: 0 4px;
+}
+.user-actions__other__icon[data-v-dc040af1] {
+  height: 20px;
+  width: 20px;
+  object-fit: contain;
+  filter: var(--background-invert-if-dark);
+  align-self: center;
+  margin: 8px;
+}
+.user-actions__other__icon-class[data-v-dc040af1] {
+  display: block;
+  height: 20px;
+  width: 20px;
+  margin: 8px;
+  background-size: 20px;
+  background-repeat: no-repeat;
+  background-position: center;
+  filter: var(--background-invert-if-dark);
+}
+@media only screen and (max-width: 512px) {
+.profile-hover-card[data-v-dc040af1] {
+    width: min(560px, 100vw - 24px);
+    max-width: calc(100vw - 24px);
+    height: auto;
+    min-height: 0;
+    max-height: min(80vh, 520px);
+    overflow: auto;
+}
+.profile-hover-card__header[data-v-dc040af1] {
+    height: auto;
+    min-height: 112px;
+}
+.profile-hover-card__header__container[data-v-dc040af1] {
+    align-self: flex-end;
+    align-items: flex-end;
+    gap: 16px;
+    margin: 12px auto;
+    padding-inline: 12px;
+}
+.profile-hover-card__header__container__avatar[data-v-dc040af1] {
+    align-self: flex-end;
+}
+.profile-hover-card__header__container__identity[data-v-dc040af1] {
+    gap: 6px;
+    padding-inline: 0;
+    justify-content: flex-end;
+}
+.profile-hover-card__header__container__displayname[data-v-dc040af1] {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+}
+.profile-hover-card__header__container__displayname h2[data-v-dc040af1] {
+    font-size: 20px;
+}
+.profile-hover-card__header__container__pronouns[data-v-dc040af1] {
+    font-size: 16px;
+}
+.profile-hover-card__header__container__pronoun-separator[data-v-dc040af1] {
+    display: none;
+}
+.profile-hover-card__header__container__status-content[data-v-dc040af1] {
+    font-size: 16px;
+}
+.profile-hover-card__content[data-v-dc040af1] {
+    display: block;
+    height: auto;
+    padding-inline: 12px;
+    padding-block-end: 12px;
+}
+.profile-hover-card__sidebar[data-v-dc040af1] {
+    margin: unset;
+    width: auto;
+    min-width: 0;
+    padding-top: 0;
+}
+.profile-hover-card__blocks[data-v-dc040af1] {
+    width: unset;
+    margin: 0;
+    padding: 8px 4px 12px;
+}
+.profile-hover-card__header[data-v-dc040af1] .avatar.avatardiv .avatardiv__user-status, .profile-hover-card__sidebar[data-v-dc040af1] .avatar.avatardiv .avatardiv__user-status {
+    inset-inline-end: 0;
+    bottom: 0;
+}
+.profile-hover-card__loading[data-v-dc040af1], .profile-hover-card__error[data-v-dc040af1] {
+    min-height: 200px;
+}
+.user-actions[data-v-dc040af1] {
+    width: unset;
+    max-width: none;
+    margin: 8px auto 0;
+    padding: 0 4px;
+}
+.user-actions__primary[data-v-dc040af1] {
+    width: 100% !important;
+    max-width: 220px;
+}
+.user-actions__other[data-v-dc040af1] {
+    flex-wrap: wrap;
+}
+}
+@media only screen and (max-width: 480px) {
+.profile-hover-card[data-v-dc040af1] {
+    width: calc(100vw - 16px);
+    max-width: calc(100vw - 16px);
+    border-radius: var(--border-radius);
+}
+.profile-hover-card__header__container[data-v-dc040af1] {
+    gap: 8px;
+    padding-inline: 8px;
+}
+}