sam/pleroma-fe
sam/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fix styling on Safari

Browse source
This commit is contained in:
Tusooa Zhu 2022-01-19 21:18:02 -05:00 committed by HJ
parent 97951fccfd
commit 11672bc490
6 changed files with 57 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/_mixins.scss Normal file
View file

@ -0,0 +1,17 @@
@mixin unfocused-style {
@content;
&:focus:not(:focus-visible):not(:hover) {
@content;
}
}
@mixin focused-style {
&:hover, &:focus {
@content;
}
&:focus-visible {
@content;
}
}

10
src/components/extra_buttons/extra_buttons.vue
View file

@ -151,6 +151,7 @@
<style lang="scss">
@import '../../_variables.scss';
@import '../../_mixins.scss';
.ExtraButtons {
/* override of popover internal stuff */
@ -168,12 +169,13 @@
color: var(--text, $fallback--text);
}
.focus-marker,
&:focus:not(:focus-visible):not(:hover) .focus-marker {
visibility: hidden;
@include unfocused-style {
.focus-marker {
visibility: hidden;
}
}
&:hover, &:focus, &:focus-visible {
@include focused-style {
.focus-marker {
visibility: visible;
}

19
src/components/favorite_button/favorite_button.vue
View file

@ -53,6 +53,7 @@
<style lang="scss">
@import '../../_variables.scss';
@import '../../_mixins.scss';
.FavoriteButton {
display: flex;
@ -78,19 +79,21 @@
color: var(--cOrange, $fallback--cOrange);
}
.focus-marker,
&:focus:not(:focus-visible):not(:hover) .focus-marker {
visibility: hidden;
@include unfocused-style {
.focus-marker {
visibility: hidden;
}
.active-marker {
visibility: visible;
}
}
&:focus:not(:focus-visible):not(:hover) .active-marker {
visibility: visible;
}
&:hover, &:focus, &:focus-visible {
@include focused-style {
.focus-marker {
visibility: visible;
}
.active-marker {
visibility: hidden;
}

10
src/components/react_button/react_button.vue
View file

@ -74,6 +74,7 @@
<style lang="scss">
@import '../../_variables.scss';
@import '../../_mixins.scss';
.ReactButton {
.reaction-picker-filter {
@ -141,12 +142,13 @@
color: var(--text, $fallback--text);
}
.focus-marker,
&:focus:not(:focus-visible):not(:hover) .focus-marker {
visibility: hidden;
@include unfocused-style {
.focus-marker {
visibility: hidden;
}
}
&:hover, &:focus, &:focus-visible {
@include focused-style {
.focus-marker {
visibility: visible;
}

10
src/components/reply_button/reply_button.vue
View file

@ -46,6 +46,7 @@
<style lang="scss">
@import '../../_variables.scss';
@import '../../_mixins.scss';
.ReplyButton {
display: flex;
@ -67,12 +68,13 @@
color: var(--cBlue, $fallback--cBlue);
}
.focus-marker,
&:focus:not(:focus-visible):not(:hover) .focus-marker {
visibility: hidden;
@include unfocused-style {
.focus-marker {
visibility: hidden;
}
}
&:hover, &:focus, &:focus-visible {
@include focused-style {
.focus-marker {
visibility: visible;
}

19
src/components/retweet_button/retweet_button.vue
View file

@ -60,6 +60,7 @@
<style lang="scss">
@import '../../_variables.scss';
@import '../../_mixins.scss';
.RetweetButton {
display: flex;
@ -85,19 +86,21 @@
color: var(--cGreen, $fallback--cGreen);
}
.focus-marker,
&:focus:not(:focus-visible):not(:hover) .focus-marker {
visibility: hidden;
@include unfocused-style {
.focus-marker {
visibility: hidden;
}
.active-marker {
visibility: visible;
}
}
&:focus:not(:focus-visible):not(:hover) .active-marker {
visibility: visible;
}
&:hover, &:focus, &:focus-visible {
@include focused-style {
.focus-marker {
visibility: visible;
}
.active-marker {
visibility: hidden;
}