diff --git a/package-lock.json b/package-lock.json index 7e55ec1..676a868 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,16 +12,17 @@ "@georapbox/capture-photo-element": "~5.0.0", "@georapbox/files-dropzone-element": "~2.0.1", "@georapbox/modal-element": "~1.8.0", + "@georapbox/theme-toggle-element": "~4.0.2", "@georapbox/web-share-element": "~3.1.1", "bootstrap": "~5.3.3", "emoji-picker-element": "~1.22.8", "insert-text-at-cursor": "~0.3.0" }, "devDependencies": { - "@eslint/js": "~9.12.0", + "@eslint/js": "~9.13.0", "@parcel/packager-raw-url": "~2.12.0", "@parcel/transformer-webmanifest": "~2.12.0", - "eslint": "~9.12.0", + "eslint": "~9.13.0", "gh-pages": "~6.2.0", "globals": "~15.11.0", "npm-run-all": "~4.1.5", @@ -1911,9 +1912,9 @@ } }, "node_modules/@eslint/core": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.6.0.tgz", - "integrity": "sha512-8I2Q8ykA4J0x0o7cg67FPVnehcqWTBehu/lmY+bolPFHGjh49YzGBMXTvpqVgEbBdvNCSxj6iFgiIyHzf03lzg==", + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.7.0.tgz", + "integrity": "sha512-xp5Jirz5DyPYlPiKat8jaq0EmYvDXKKpzTbxXMpT9eqlRJkRKIz9AGMdlvYjih+im+QlhWrpvVjl8IPC/lHlUw==", "dev": true, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" @@ -1955,9 +1956,9 @@ } }, "node_modules/@eslint/js": { - "version": "9.12.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.12.0.tgz", - "integrity": "sha512-eohesHH8WFRUprDNyEREgqP6beG6htMeUYeCpkEgBCieCMme5r9zFWjzAJp//9S+Kub4rqE+jXe9Cp1a7IYIIA==", + "version": "9.13.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.13.0.tgz", + "integrity": "sha512-IFLyoY4d72Z5y/6o/BazFBezupzI/taV8sGumxTAVw3lXG9A6md1Dc34T9s1FoD/an9pJH8RHbAxsaEbBed9lA==", "dev": true, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" @@ -1999,6 +2000,11 @@ "resolved": "https://registry.npmjs.org/@georapbox/modal-element/-/modal-element-1.8.0.tgz", "integrity": "sha512-o1eauKDvpkVl0CLv4y8smYDl780ZUDI/C1Md6HhoNZOxhRzzhfUAB0yT3yeAJjmBMzmyj1GR01MqP4ySE7ywtQ==" }, + "node_modules/@georapbox/theme-toggle-element": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/@georapbox/theme-toggle-element/-/theme-toggle-element-4.0.2.tgz", + "integrity": "sha512-XCz9ah/FzXDm5K1FbR0fj6+kA8C4HD62V9CjzYZiYOVtiAY+aPRF48YPJhTlVbTnQbNbQtZOLc1CKCywELvKxQ==" + }, "node_modules/@georapbox/web-share-element": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/@georapbox/web-share-element/-/web-share-element-3.1.1.tgz", @@ -6121,17 +6127,17 @@ } }, "node_modules/eslint": { - "version": "9.12.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.12.0.tgz", - "integrity": "sha512-UVIOlTEWxwIopRL1wgSQYdnVDcEvs2wyaO6DGo5mXqe3r16IoCNWkR29iHhyaP4cICWjbgbmFUGAhh0GJRuGZw==", + "version": "9.13.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.13.0.tgz", + "integrity": "sha512-EYZK6SX6zjFHST/HRytOdA/zE72Cq/bfw45LSyuwrdvcclb/gqV8RRQxywOBEWO2+WDpva6UZa4CcDeJKzUCFA==", "dev": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.11.0", "@eslint/config-array": "^0.18.0", - "@eslint/core": "^0.6.0", + "@eslint/core": "^0.7.0", "@eslint/eslintrc": "^3.1.0", - "@eslint/js": "9.12.0", + "@eslint/js": "9.13.0", "@eslint/plugin-kit": "^0.2.0", "@humanfs/node": "^0.16.5", "@humanwhocodes/module-importer": "^1.0.1", @@ -12674,9 +12680,9 @@ } }, "@eslint/core": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.6.0.tgz", - "integrity": "sha512-8I2Q8ykA4J0x0o7cg67FPVnehcqWTBehu/lmY+bolPFHGjh49YzGBMXTvpqVgEbBdvNCSxj6iFgiIyHzf03lzg==", + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.7.0.tgz", + "integrity": "sha512-xp5Jirz5DyPYlPiKat8jaq0EmYvDXKKpzTbxXMpT9eqlRJkRKIz9AGMdlvYjih+im+QlhWrpvVjl8IPC/lHlUw==", "dev": true }, "@eslint/eslintrc": { @@ -12705,9 +12711,9 @@ } }, "@eslint/js": { - "version": "9.12.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.12.0.tgz", - "integrity": "sha512-eohesHH8WFRUprDNyEREgqP6beG6htMeUYeCpkEgBCieCMme5r9zFWjzAJp//9S+Kub4rqE+jXe9Cp1a7IYIIA==", + "version": "9.13.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.13.0.tgz", + "integrity": "sha512-IFLyoY4d72Z5y/6o/BazFBezupzI/taV8sGumxTAVw3lXG9A6md1Dc34T9s1FoD/an9pJH8RHbAxsaEbBed9lA==", "dev": true }, "@eslint/object-schema": { @@ -12740,6 +12746,11 @@ "resolved": "https://registry.npmjs.org/@georapbox/modal-element/-/modal-element-1.8.0.tgz", "integrity": "sha512-o1eauKDvpkVl0CLv4y8smYDl780ZUDI/C1Md6HhoNZOxhRzzhfUAB0yT3yeAJjmBMzmyj1GR01MqP4ySE7ywtQ==" }, + "@georapbox/theme-toggle-element": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/@georapbox/theme-toggle-element/-/theme-toggle-element-4.0.2.tgz", + "integrity": "sha512-XCz9ah/FzXDm5K1FbR0fj6+kA8C4HD62V9CjzYZiYOVtiAY+aPRF48YPJhTlVbTnQbNbQtZOLc1CKCywELvKxQ==" + }, "@georapbox/web-share-element": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/@georapbox/web-share-element/-/web-share-element-3.1.1.tgz", @@ -15435,17 +15446,17 @@ "dev": true }, "eslint": { - "version": "9.12.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.12.0.tgz", - "integrity": "sha512-UVIOlTEWxwIopRL1wgSQYdnVDcEvs2wyaO6DGo5mXqe3r16IoCNWkR29iHhyaP4cICWjbgbmFUGAhh0GJRuGZw==", + "version": "9.13.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.13.0.tgz", + "integrity": "sha512-EYZK6SX6zjFHST/HRytOdA/zE72Cq/bfw45LSyuwrdvcclb/gqV8RRQxywOBEWO2+WDpva6UZa4CcDeJKzUCFA==", "dev": true, "requires": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.11.0", "@eslint/config-array": "^0.18.0", - "@eslint/core": "^0.6.0", + "@eslint/core": "^0.7.0", "@eslint/eslintrc": "^3.1.0", - "@eslint/js": "9.12.0", + "@eslint/js": "9.13.0", "@eslint/plugin-kit": "^0.2.0", "@humanfs/node": "^0.16.5", "@humanwhocodes/module-importer": "^1.0.1", diff --git a/package.json b/package.json index 1fcf7da..c8ad2ff 100644 --- a/package.json +++ b/package.json @@ -21,23 +21,24 @@ "author": "George Raptis ", "license": "MIT", "devDependencies": { + "@eslint/js": "~9.13.0", "@parcel/packager-raw-url": "~2.12.0", "@parcel/transformer-webmanifest": "~2.12.0", + "eslint": "~9.13.0", "gh-pages": "~6.2.0", + "globals": "~15.11.0", "npm-run-all": "~4.1.5", "parcel": "~2.12.0", + "prettier": "~3.3.3", "rimraf": "~6.0.1", - "workbox-cli": "~7.1.0", - "@eslint/js": "~9.12.0", - "eslint": "~9.12.0", - "globals": "~15.11.0", - "prettier": "~3.3.3" + "workbox-cli": "~7.1.0" }, "browserslist": "> 0.5%, last 2 versions, not dead", "dependencies": { "@georapbox/capture-photo-element": "~5.0.0", "@georapbox/files-dropzone-element": "~2.0.1", "@georapbox/modal-element": "~1.8.0", + "@georapbox/theme-toggle-element": "~4.0.2", "@georapbox/web-share-element": "~3.1.1", "bootstrap": "~5.3.3", "emoji-picker-element": "~1.22.8", diff --git a/src/assets/icons/add-image-dark.svg b/src/assets/icons/add-image-dark.svg new file mode 100644 index 0000000..7690b2b --- /dev/null +++ b/src/assets/icons/add-image-dark.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/assets/icons/add-image.svg b/src/assets/icons/add-image-light.svg similarity index 100% rename from src/assets/icons/add-image.svg rename to src/assets/icons/add-image-light.svg diff --git a/src/assets/icons/aperture.svg b/src/assets/icons/aperture.svg deleted file mode 100644 index 89a8b18..0000000 --- a/src/assets/icons/aperture.svg +++ /dev/null @@ -1,12 +0,0 @@ - - ionicons-v5-a - - - - - - - - - - diff --git a/src/assets/icons/camera-reverse.svg b/src/assets/icons/camera-reverse.svg deleted file mode 100644 index c166594..0000000 --- a/src/assets/icons/camera-reverse.svg +++ /dev/null @@ -1,4 +0,0 @@ - - ionicons-v5-e - - diff --git a/src/assets/icons/duplicate-dark.svg b/src/assets/icons/duplicate-dark.svg new file mode 100644 index 0000000..618eed9 --- /dev/null +++ b/src/assets/icons/duplicate-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/duplicate.svg b/src/assets/icons/duplicate-light.svg similarity index 100% rename from src/assets/icons/duplicate.svg rename to src/assets/icons/duplicate-light.svg diff --git a/src/css/main.css b/src/css/main.css index f463814..110882a 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -1,5 +1,4 @@ :root { - --body-bg-color: #eae9e9; --body-color: #212529; --move-btn-width: 60px; --move-btn-height: 34px; @@ -16,7 +15,6 @@ body { overflow-x: hidden; - background-color: var(--body-bg-color); } [hidden] { @@ -143,6 +141,20 @@ details summary:focus-visible { padding: 1rem; text-align: center; text-wrap: balance; + background-color: var(--bs-tertiary-bg); + color: var(--bs-body-color); +} + +.instructions__image { + width: 60px; + height: 60px; + background-size: 100%; + background-repeat: no-repeat; + background-image: url(../assets/icons/add-image-light.svg); +} + +:root[data-bs-theme="dark"] .instructions__image { + content: url(../assets/icons/add-image-dark.svg); } .errors-container { @@ -179,10 +191,14 @@ button[data-button="delete-text-box"] { } button[data-button="duplicate-text-box"] { - background-image: url(../assets/icons/duplicate.svg); + background-image: url(../assets/icons/duplicate-light.svg); background-size: 70%; } +:root[data-bs-theme="dark"] button[data-button="duplicate-text-box"] { + background-image: url(../assets/icons/duplicate-dark.svg); +} + button[data-button="delete-text-box"] { background-image: url(../assets/icons/trash.svg); margin-inline-start: 0.25rem; @@ -308,8 +324,11 @@ capture-photo[loading] [slot="actions"] { modal-element { --me-width: fit-content; --me-border-radius: var(--bs-border-radius); - --me-border-width: 0; + --me-border-width: 1px; + --me-border-color: var(--bs-border-color); --me-box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.30); + --me-backdrop-background: rgba(0, 0, 0, 0.7); + --me-backdrop-filter: blur(2px); } #videoModal { @@ -335,11 +354,11 @@ modal-element::part(base):focus-visible { modal-element [slot="header"] { margin: 0; - color: var(--body-color); + color: var(--bs-body-color); } modal-element::part(close) { - color: var(--body-color); + color: var(--bs-body-color); border-radius: var(--bs-border-radius); transition: box-shadow 0.15s ease-in-out; } @@ -376,6 +395,10 @@ modal-element [slot="footer"] { } @media screen and (min-width: 768px) { + .meme-column { + border-inline-end: 1px solid var(--bs-border-color); + } + .dropzone { position: sticky; top: 0.25rem; @@ -404,14 +427,14 @@ modal-element [slot="footer"] { /* Emoji picker */ .emoji-picker-details { margin-bottom: 0.5rem; - background-color: var(--bs-gray-200); + background-color: var(--bs-body-bg); border-radius: var(--bs-border-radius); + border: 1px solid var(--bs-border-color); } .emoji-picker-details > summary { padding: 0.5rem 1rem; - background-color: var(--bs-gray-300); - border: 1px solid var(--bs-gray-300); + background-color: var(--bs-body-bg); border-radius: var(--bs-border-radius); cursor: pointer; } @@ -423,7 +446,7 @@ modal-element [slot="footer"] { emoji-picker { --border-color: var(--bs-border-color); - --background: #ffffff; + --background: var(--bs-bg); --input-border-color: var(--bs-border-color); --input-border-radius: var(--bs-border-radius); --input-padding: 0.375rem 0.75rem; @@ -431,13 +454,32 @@ emoji-picker { --outline-size: 4px; --indicator-color: var(--bs-primary); --button-hover-background: var(--bs-gray-300); + --input-font-color: var(--bs-body-color); width: 100%; height: 255px; - border: 0; padding: 0 0.5rem 0.5rem 0.5rem; } +/* Theme toggle */ +theme-toggle { + position: absolute; + top: 0.5rem; + right: 0.5rem; +} + +theme-toggle::part(base) { + padding: 0.5rem; + border-radius: var(--bs-border-radius); + font-size: 1.1429rem; + transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} + +theme-toggle::part(base):focus-visible { + outline: 0; + box-shadow: var(--focus-ring); +} + /* Utils */ .text-underline { diff --git a/src/index.html b/src/index.html index 7b74855..5bd709f 100644 --- a/src/index.html +++ b/src/index.html @@ -4,22 +4,25 @@ - + Meme Generator - - + + + - + + +
@@ -30,17 +33,19 @@
- +

Meme Generator

-

+

- Source code on Github + + Source code on Github +

-
-
+
+
@@ -51,7 +56,7 @@

Meme Generator

- +

Drag & Drop an image here or click to select an image from your device.

All uploaded images are processed locally in your browser. No data is sent to any server.

@@ -60,11 +65,11 @@

Meme Generator

-
+
Image selection options -
+
@@ -217,8 +222,8 @@

Meme Generator

-