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 {