Fix several CSS compatibility issues in Safari (#841)

* Fix button margin default for Safari compatibility

* Add Safari vendor prefixes that are somehow still necessary

* Add workaround for Safari not rendering text selection

* Replace <h3> and <p> placeholder labels in floating menus with <TextLabel>

* Replace <span> elements with <TextLabel> and set its cursor for Safari
This commit is contained in:
Keavon Chambers
2022-11-06 00:50:45 -07:00
committed by GitHub
parent 265f11a751
commit 9e5626ced6
25 changed files with 92 additions and 69 deletions
@@ -300,6 +300,7 @@
.preset-color {
border: none;
margin: 0;
padding: 0;
border-radius: 2px;
width: calc(48px + (48px + 4px) / 2);
@@ -51,6 +51,7 @@
margin: -4px 0;
.details.text-label {
-webkit-user-select: text; // Required as of Safari 15.0 (Graphite's minimum version) through the latest release
user-select: text;
white-space: pre-wrap;
max-width: 400px;
@@ -31,7 +31,7 @@
<link v-if="entry.font" rel="stylesheet" :href="entry.font?.toString()" />
<span class="entry-label" :style="{ fontFamily: `${!entry.font ? 'inherit' : entry.value}` }">{{ entry.label }}</span>
<TextLabel class="entry-label" :style="{ fontFamily: `${!entry.font ? 'inherit' : entry.value}` }">{{ entry.label }}</TextLabel>
<UserInputLabel v-if="entry.shortcut?.keys.length" :keysWithLabelsGroups="[entry.shortcut.keys]" :requiresLock="entry.shortcutRequiresLock" />
@@ -171,6 +171,7 @@ import LayoutCol from "@/components/layout/LayoutCol.vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
import Separator from "@/components/widgets/labels/Separator.vue";
import TextLabel from "@/components/widgets/labels/TextLabel.vue";
import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -350,6 +351,7 @@ const MenuList = defineComponent({
LayoutCol,
LayoutRow,
Separator,
TextLabel,
UserInputLabel,
},
});