diff options
Diffstat (limited to 'apps/settings/src')
7 files changed, 39 insertions, 12 deletions
diff --git a/apps/settings/src/components/PersonalInfo/BiographySection/Biography.vue b/apps/settings/src/components/PersonalInfo/BiographySection/Biography.vue index 29a4e1bcb16..64f9640d9f2 100644 --- a/apps/settings/src/components/PersonalInfo/BiographySection/Biography.vue +++ b/apps/settings/src/components/PersonalInfo/BiographySection/Biography.vue @@ -137,7 +137,9 @@ export default { font-family: var(--font-face); cursor: text; - &:hover { + &:hover, + &:focus, + &:active { border-color: var(--color-primary-element) !important; outline: none !important; } diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue index 3cf380842a1..383b8a608ff 100644 --- a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue +++ b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue @@ -388,7 +388,9 @@ export default { .email__actions { opacity: 0.4 !important; - &:hover { + &:hover, + &:focus, + &:active { opacity: 0.8 !important; } diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue index f680a6a9b65..b1ff57130b1 100644 --- a/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue @@ -88,7 +88,9 @@ a { margin-right: 8px; } - &:hover { + &:hover, + &:focus, + &:active { opacity: 0.8; background-color: rgba(127, 127, 127, .25); } diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue index 43fcc85619a..01454311765 100644 --- a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue @@ -105,10 +105,17 @@ export default { font-weight: bold; box-shadow: 0 2px 9px var(--color-box-shadow); - &:hover { + &:hover, + &:focus, + &:active { box-shadow: 0 2px 12px var(--color-box-shadow); } + &:focus-visible { + outline: var(--color-main-text) solid 1px; + outline-offset: 3px; + } + &.disabled { filter: grayscale(1); opacity: 0.5; diff --git a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue index 8d9e69a483a..d13b26b2d92 100644 --- a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue @@ -32,7 +32,11 @@ {{ t('settings', 'The more restrictive setting of either visibility or scope is respected on your Profile. For example, if visibility is set to "Show to everyone" and scope is set to "Private", "Private" is respected.') }} </em> - <div class="visibility-dropdowns"> + <div + class="visibility-dropdowns" + :style="{ + gridTemplateRows: `repeat(${rows}, 44px)`, + }"> <VisibilityDropdown v-for="param in visibilityParams" :key="param.id" :param-id="param.id" @@ -89,6 +93,10 @@ export default { disabled() { return !this.profileEnabled }, + + rows() { + return Math.ceil(this.visibilityParams.length / 2) + }, }, mounted() { @@ -137,7 +145,6 @@ section { .visibility-dropdowns { display: grid; - grid-template-rows: repeat(auto-fit, 44px); gap: 10px 40px; } @@ -146,7 +153,6 @@ section { .visibility-dropdowns { grid-auto-flow: column; - height: 320px; } } diff --git a/apps/settings/src/components/PersonalInfo/shared/AddButton.vue b/apps/settings/src/components/PersonalInfo/shared/AddButton.vue index 1fe7a532419..56cbb2ba515 100644 --- a/apps/settings/src/components/PersonalInfo/shared/AddButton.vue +++ b/apps/settings/src/components/PersonalInfo/shared/AddButton.vue @@ -61,13 +61,19 @@ export default { } } - &:hover { + &:hover, + &:focus, + &:active { background-color: rgba(127, 127, 127, .15); } - &:enabled:hover { - background-color: rgba(127, 127, 127, .25); - opacity: 0.8 !important; + &:enabled { + &:hover, + &:focus, + &:active { + background-color: rgba(127, 127, 127, .25); + opacity: 0.8 !important; + } } } </style> diff --git a/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue b/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue index 010cb325e4b..6d5dc0f2529 100644 --- a/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue +++ b/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue @@ -185,7 +185,9 @@ export default { .federation-actions--additional { opacity: 0.4 !important; - &:hover { + &:hover, + &:focus, + &:active { opacity: 0.8 !important; } } |