Anon/yandere_fe
1
0
Fork 0
Code Issues Pull Requests Packages 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;
}
}

8
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 {
@include unfocused-style {
.focus-marker {
visibility: hidden;
}
}
&:hover, &:focus, &:focus-visible {
@include focused-style {
.focus-marker {
visibility: visible;
}

11
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 {
@include unfocused-style {
.focus-marker {
visibility: hidden;
}
&:focus:not(:focus-visible):not(:hover) .active-marker {
.active-marker {
visibility: visible;
}
}
&:hover, &:focus, &:focus-visible {
@include focused-style {
.focus-marker {
visibility: visible;
}
.active-marker {
visibility: hidden;
}

8
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 {
@include unfocused-style {
.focus-marker {
visibility: hidden;
}
}
&:hover, &:focus, &:focus-visible {
@include focused-style {
.focus-marker {
visibility: visible;
}

8
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 {
@include unfocused-style {
.focus-marker {
visibility: hidden;
}
}
&:hover, &:focus, &:focus-visible {
@include focused-style {
.focus-marker {
visibility: visible;
}

11
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 {
@include unfocused-style {
.focus-marker {
visibility: hidden;
}
&:focus:not(:focus-visible):not(:hover) .active-marker {
.active-marker {
visibility: visible;
}
}
&:hover, &:focus, &:focus-visible {
@include focused-style {
.focus-marker {
visibility: visible;
}
.active-marker {
visibility: hidden;
}