diff --git a/package-lock.json b/package-lock.json index 4eb8ca6..0c07ff7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,6 @@ "name": "web-eid-webextension", "version": "2.4.0-rc1", "license": "MIT", - "dependencies": { - "bootstrap": "^5.3.3" - }, "devDependencies": { "@rollup/plugin-alias": "^5.1.1", "@rollup/plugin-node-resolve": "^16.0.0", @@ -1339,17 +1336,6 @@ "node": ">=14" } }, - "node_modules/@popperjs/core": { - "version": "2.11.8", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", - "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", - "license": "MIT", - "peer": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/popperjs" - } - }, "node_modules/@rollup/plugin-alias": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-5.1.1.tgz", @@ -2550,25 +2536,6 @@ ], "license": "MIT" }, - "node_modules/bootstrap": { - "version": "5.3.3", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz", - "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/twbs" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/bootstrap" - } - ], - "license": "MIT", - "peerDependencies": { - "@popperjs/core": "^2.11.8" - } - }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/package.json b/package.json index a8c0677..f7ed3c2 100644 --- a/package.json +++ b/package.json @@ -37,8 +37,5 @@ "typescript": "^5.7.2", "typescript-eslint": "^8.19.1", "webextension-polyfill": "^0.12.0" - }, - "dependencies": { - "bootstrap": "^5.3.3" } } diff --git a/scripts/build.mjs b/scripts/build.mjs index f558be1..d2953b5 100644 --- a/scripts/build.mjs +++ b/scripts/build.mjs @@ -115,7 +115,6 @@ const targets = { ); await cp("./static/_locales", "./dist/firefox/_locales"); await cp("./static/views", "./dist/firefox/views"); - await cp("./node_modules/bootstrap/dist/css/bootstrap.min.css", "./dist/firefox/views/bootstrap.min.css"); rem( "Setting up the Firefox manifest" diff --git a/static/views/installed.css b/static/views/installed.css new file mode 100644 index 0000000..ca714e8 --- /dev/null +++ b/static/views/installed.css @@ -0,0 +1,114 @@ +:root { + --color-background: #FFF; + --color-primary: #0D6EFD; + --color-secondary: #6C757D; + --color-modal-border: #0000002D; + --color-modal-separator: #DEE2E6; + --color-text: #212529; + --color-btn-text: #FFF; + + font-family: + system-ui, + -apple-system, + "Segoe UI", + Roboto, + "Helvetica Neue", + "Noto Sans", + "Liberation Sans", + Arial, + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol", + "Noto Color Emoji"; + + color: var(--color-text); + + margin: 0; + height: 100vh; + display: flex; + justify-content: safe center; + align-items: safe center; + height: 100vh; +} + +a { + color: var(--color-primary); +} + +ul { + margin-top: 0; + margin-bottom: 1rem; + padding-left: 2rem; +} + +.modal { + display: flex; + box-sizing: border-box; + max-width: 500px; + flex-direction: column; + height: fit-content; + border-radius: 7px; + border: 1px solid var(--color-modal-border); + background-color: var(--color-background); + + > * { + padding: 1rem; + } + + .title { + display: flex; + align-items: center; + box-sizing: border-box; + height: 62px; + font-size: 1.25rem; + font-weight: 500; + margin: 0; + } + + .content { + line-height: 1.5; + border-top: 1px solid var(--color-modal-separator); + border-bottom: 1px solid var(--color-modal-separator); + } + + .footer { + display: flex; + justify-content: end; + gap: 0.5rem; + flex-wrap: wrap; + + button { + cursor: pointer; + box-sizing: border-box; + min-height: 38px; + padding: 0.375rem 0.75rem; + color: var(--color-btn-text); + font-size: 1rem; + background: var(--btn-bg); + border: 1px solid var(--btn-bg); + border-radius: 6px; + outline: 4px solid transparent; + transition: outline 0.25 ease-in; + + &.btn-primary { + --btn-bg: var(--color-primary); + } + + &.btn-secondary { + --btn-bg: var(--color-secondary); + } + + &:hover, + &:active, + &:focus { + background: color-mix(in srgb, var(--btn-bg), black 10%); + border-color: color-mix(in srgb, var(--btn-bg), black 12%); + } + + &:focus-visible { + outline-color: color-mix(in srgb, var(--btn-bg), white 50%); + } + } + } +} diff --git a/static/views/installed.html b/static/views/installed.html index 0362de6..21206cf 100644 --- a/static/views/installed.html +++ b/static/views/installed.html @@ -1,34 +1,30 @@ - + Web-eID Privacy - + -