From ffb5b206dd0da35674a1d760ccafcc6857f87b25 Mon Sep 17 00:00:00 2001 From: Amphiluke Date: Tue, 28 Nov 2023 19:13:07 +0700 Subject: [PATCH] Fix icon colouring in iOS --- package-lock.json | 4 ++-- package.json | 2 +- src/assets/branches.svg | 2 +- src/assets/icons.svg | 2 +- src/components/PanelAttributes.vue | 4 +++- src/components/PanelCollections.vue | 6 ++++-- src/components/PanelSettings.vue | 4 +++- src/components/ThePopover.vue | 10 +++++++++- src/components/TheSidebar.vue | 4 +++- src/styles/interface.module.css | 16 +++++++++++----- 10 files changed, 38 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9ec2373..d5ac7ab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "lindsvg-pwa", - "version": "2.0.1", + "version": "2.0.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "lindsvg-pwa", - "version": "2.0.1", + "version": "2.0.2", "dependencies": { "@vueuse/core": "^10.6.1", "lindsvg": "^1.3.2", diff --git a/package.json b/package.json index b0dbdee..746589b 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "lindsvg-pwa", "private": true, - "version": "2.0.1", + "version": "2.0.2", "type": "module", "scripts": { "lint": "eslint \"src/**/*.{mjs,vue}\"", diff --git a/src/assets/branches.svg b/src/assets/branches.svg index 8fa0dfc..f51015a 100644 --- a/src/assets/branches.svg +++ b/src/assets/branches.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/icons.svg b/src/assets/icons.svg index 54a31a1..598c48b 100644 --- a/src/assets/icons.svg +++ b/src/assets/icons.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/PanelAttributes.vue b/src/components/PanelAttributes.vue index 4ed6ca7..cb961ea 100644 --- a/src/components/PanelAttributes.vue +++ b/src/components/PanelAttributes.vue @@ -296,10 +296,12 @@ function plot() { position: relative; &::before { - background: url(../assets/icons.svg) -150px 0 no-repeat; + background-color: var(--color-accent); content: ""; height: 25px; left: 50%; + -webkit-mask: url(../assets/icons.svg) -150px 0 no-repeat; + mask: url(../assets/icons.svg) -150px 0 no-repeat; opacity: 0.5; position: absolute; top: 50%; diff --git a/src/components/PanelCollections.vue b/src/components/PanelCollections.vue index 8889f89..4f94eb2 100644 --- a/src/components/PanelCollections.vue +++ b/src/components/PanelCollections.vue @@ -134,10 +134,12 @@ function deleteLSystem(lid) { display: flex; &::after { - background: url(../assets/icons.svg) -125px 0 no-repeat; + background-color: var(--color-accent); content: ""; flex-shrink: 0; height: 25px; + -webkit-mask: url(../assets/icons.svg) -125px 0 no-repeat; + mask: url(../assets/icons.svg) -125px 0 no-repeat; width: 25px; } @@ -147,7 +149,7 @@ function deleteLSystem(lid) { } .filterField { - appearance: textfield; /* fixes border-radius issue in Safari */ + -webkit-appearance: none; /* fixes border-radius issue in Safari */ box-sizing: border-box; flex-grow: 1; min-width: 0; diff --git a/src/components/PanelSettings.vue b/src/components/PanelSettings.vue index b41745d..c51dd38 100644 --- a/src/components/PanelSettings.vue +++ b/src/components/PanelSettings.vue @@ -219,10 +219,12 @@ function plot() { position: relative; &::before { - background: url(../assets/icons.svg) -100px 0 no-repeat; + background-color: var(--color-accent); content: ""; height: 25px; left: 20px; + -webkit-mask: url(../assets/icons.svg) -100px 0 no-repeat; + mask: url(../assets/icons.svg) -100px 0 no-repeat; pointer-events: none; position: absolute; top: 50%; diff --git a/src/components/ThePopover.vue b/src/components/ThePopover.vue index d64935c..109164b 100644 --- a/src/components/ThePopover.vue +++ b/src/components/ThePopover.vue @@ -37,13 +37,21 @@ let {popover} = storeToRefs(useInterfaceStore()); box-shadow: 0 0 3px 0 var(--color-surface-shadow); box-sizing: border-box; display: grid; - gap: 20px; + gap: 5px 20px; grid-template-columns: 1fr auto auto; max-width: 500px; padding: 5px 20px; right: 15px; position: fixed; width: calc(100% - 30px - var(--size-sidebar-button)); + + @media (max-width: 450px) { + grid-template-columns: 1fr auto; + + & :first-child { + grid-row: 1 / 3; + } + } } .button { diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue index 17d6376..d484de1 100644 --- a/src/components/TheSidebar.vue +++ b/src/components/TheSidebar.vue @@ -48,9 +48,11 @@ let interfaceStore = useInterfaceStore(); } .collapse { - background: url(../assets/icons.svg) -175px 0 no-repeat; + background-color: var(--color-accent); border: none; height: 25px; + -webkit-mask: url(../assets/icons.svg) -175px 0 no-repeat; + mask: url(../assets/icons.svg) -175px 0 no-repeat; padding: 0; position: absolute; right: 10px; diff --git a/src/styles/interface.module.css b/src/styles/interface.module.css index 018c84c..05d638c 100644 --- a/src/styles/interface.module.css +++ b/src/styles/interface.module.css @@ -68,28 +68,34 @@ width: 32px; &::before { - background: url(../assets/icons.svg) -100% -100% no-repeat; + background-color: var(--color-accent); content: ""; height: 25px; + -webkit-mask: url(../assets/icons.svg) -100% -100% no-repeat; + mask: url(../assets/icons.svg) -100% -100% no-repeat; width: 25px; } } .iconButtonView::before { - background-position: 0 0; + -webkit-mask-position: 0 0; + mask-position: 0 0; } .iconButtonConfig::before { - background-position: -25px 0; + -webkit-mask-position: -25px 0; + mask-position: -25px 0; } .iconButtonErase::before, .iconButtonAdd::before { - background-position: -50px 0; + -webkit-mask-position: -50px 0; + mask-position: -50px 0; } .iconButtonDelete::before { - background-position: -75px 0; + -webkit-mask-position: -75px 0; + mask-position: -75px 0; } @keyframes add-breath {