From fd742487b346c11443f8511ea133ec35c5046ee5 Mon Sep 17 00:00:00 2001 From: winston Date: Mon, 24 Apr 2023 20:57:49 +0200 Subject: [PATCH] feat: build with scss --- .github/release.yml | 20 +++ .github/workflows/release.yml | 22 +++ .gitignore | 1 + package-lock.json | 251 +++++++++++++++++++++++++++ package.json | 4 +- src/_theme.scss | 308 ++++++++++++++++++++++++++++++++++ src/bin/catppuccin.css | 17 -- src/frappe.css | 203 ---------------------- src/frappe.scss | 2 + src/latte.css | 203 ---------------------- src/latte.scss | 2 + src/macchiato.css | 203 ---------------------- src/macchiato.scss | 2 + src/mocha.css | 203 ---------------------- src/mocha.scss | 2 + src/palette/catppuccin.scss | 212 ----------------------- 16 files changed, 612 insertions(+), 1043 deletions(-) create mode 100644 .github/release.yml create mode 100644 .github/workflows/release.yml create mode 100644 package-lock.json create mode 100644 src/_theme.scss delete mode 100644 src/bin/catppuccin.css delete mode 100644 src/frappe.css create mode 100644 src/frappe.scss delete mode 100644 src/latte.css create mode 100644 src/latte.scss delete mode 100644 src/macchiato.css create mode 100644 src/macchiato.scss delete mode 100644 src/mocha.css create mode 100644 src/mocha.scss delete mode 100644 src/palette/catppuccin.scss diff --git a/.github/release.yml b/.github/release.yml new file mode 100644 index 0000000..5e7f46c --- /dev/null +++ b/.github/release.yml @@ -0,0 +1,20 @@ +name: Release +on: + push: + tags: + - "v*" + +jobs: + release: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + - run: npm ci + - run: npm run build + - name: Create tarball + run: tar czf catppuccin-swaync.tar.gz --directory=./dist . + - name: Add zips to release + uses: softprops/action-gh-release@v1 + with: + files: ./catppuccin-swaync.tar.gz diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml new file mode 100644 index 0000000..042d6c1 --- /dev/null +++ b/.github/workflows/release.yml @@ -0,0 +1,22 @@ +name: Release +on: + push: + tags: + - "v*" + +jobs: + release: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + - run: npm ci + - run: npm run build + - name: Create Release + uses: softprops/action-gh-release@v1 + with: + files: | + ./dist/latte.css + ./dist/frappe.css + ./dist/macchiato.css + ./dist/mocha.css diff --git a/.gitignore b/.gitignore index c2658d7..1eae0cf 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ +dist/ node_modules/ diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..8a4f6d5 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,251 @@ +{ + "name": "swaync", + "version": "0.1.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "swaync", + "version": "0.1.0", + "license": "MIT", + "devDependencies": { + "@catppuccin/palette": "^0.1.6", + "sass": "^1.58.3" + } + }, + "node_modules/@catppuccin/palette": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/@catppuccin/palette/-/palette-0.1.8.tgz", + "integrity": "sha512-41quIj08vgPMy8kQxQb0+VqxuTlo2xfNYGSgOuiJXNojWnGuhLxBc61jgu2jiZYGNXVqgVNGWwmWEUf6s32jiA==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/catppuccin" + }, + { + "type": "github", + "url": "https://github.com/sponsors/catppuccin" + } + ] + }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dev": true, + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dev": true, + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "dev": true, + "funding": [ + { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + ], + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dev": true, + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/immutable": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz", + "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==", + "dev": true + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, + "node_modules/sass": { + "version": "1.62.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.0.tgz", + "integrity": "sha512-Q4USplo4pLYgCi+XlipZCWUQz5pkg/ruSSgJ0WRDSb/+3z9tXUOkQ7QPYn4XrhZKYAK4HlpaQecRwKLJX6+DBg==", + "dev": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + } + } +} diff --git a/package.json b/package.json index 6dfcaad..fd58311 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,13 @@ { "name": "swaync", - "version": "0.1.0", + "version": "0.1.1", "description": "soothing pastel theme for swaync", "repository": { "type": "git", "url": "git+https://github.com/catppuccin/swaync.git" }, "scripts": { - "build": "sass -I node_modules --no-charset --no-source-map src/palette:src/bin/" + "build": "sass -I node_modules --no-charset --no-source-map src:dist" }, "author": "Catppuccin Org ", "license": "MIT", diff --git a/src/_theme.scss b/src/_theme.scss new file mode 100644 index 0000000..a84ecd1 --- /dev/null +++ b/src/_theme.scss @@ -0,0 +1,308 @@ +* { + all: unset; + font-size: 14px; + font-family: "Ubuntu Nerd Font"; + transition: 200ms; +} + +.floating-notifications.background .notification-row .notification-background { + box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px $surface0; + border-radius: 12.6px; + margin: 18px; + background-color: $base; + color: $text; + padding: 0; +} + +.floating-notifications.background + .notification-row + .notification-background + .notification { + padding: 7px; + border-radius: 12.6px; +} + +.floating-notifications.background + .notification-row + .notification-background + .notification.critical { + box-shadow: inset 0 0 7px 0 $red; +} + +.floating-notifications.background + .notification-row + .notification-background + .notification + .notification-content { + margin: 7px; +} + +.floating-notifications.background + .notification-row + .notification-background + .notification + .notification-content + .summary { + color: $text; +} + +.floating-notifications.background + .notification-row + .notification-background + .notification + .notification-content + .time { + color: $subtext0; +} + +.floating-notifications.background + .notification-row + .notification-background + .notification + .notification-content + .body { + color: $text; +} + +.floating-notifications.background + .notification-row + .notification-background + .notification + > *:last-child + > * { + min-height: 3.4em; +} + +.floating-notifications.background + .notification-row + .notification-background + .notification + > *:last-child + > * + .notification-action { + border-radius: 7px; + color: $text; + background-color: $surface0; + box-shadow: inset 0 0 0 1px $surface1; + margin: 7px; +} + +.floating-notifications.background + .notification-row + .notification-background + .notification + > *:last-child + > * + .notification-action:hover { + box-shadow: inset 0 0 0 1px $surface1; + background-color: $surface0; + color: $text; +} + +.floating-notifications.background + .notification-row + .notification-background + .notification + > *:last-child + > * + .notification-action:active { + box-shadow: inset 0 0 0 1px $surface1; + background-color: $sapphire; + color: $text; +} + +.floating-notifications.background + .notification-row + .notification-background + .close-button { + margin: 7px; + padding: 2px; + border-radius: 6.3px; + color: $base; + background-color: $red; +} + +.floating-notifications.background + .notification-row + .notification-background + .close-button:hover { + background-color: $maroon; + color: $base; +} + +.floating-notifications.background + .notification-row + .notification-background + .close-button:active { + background-color: $red; + color: $base; +} + +.control-center { + box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px $surface0; + border-radius: 12.6px; + margin: 18px; + background-color: $base; + color: $text; + padding: 14px; +} + +.control-center .widget-title { + color: $text; + font-size: 1.3em; +} + +.control-center .widget-title button { + border-radius: 7px; + color: $text; + background-color: $surface0; + box-shadow: inset 0 0 0 1px $surface1; + padding: 8px; +} + +.control-center .widget-title button:hover { + box-shadow: inset 0 0 0 1px $surface1; + background-color: $surface2; + color: $text; +} + +.control-center .widget-title button:active { + box-shadow: inset 0 0 0 1px $surface1; + background-color: $sapphire; + color: $base; +} + +.control-center .notification-row .notification-background { + border-radius: 7px; + color: $text; + background-color: $surface0; + box-shadow: inset 0 0 0 1px $surface1; + margin-top: 14px; +} + +.control-center .notification-row .notification-background .notification { + padding: 7px; + border-radius: 7px; +} + +.control-center + .notification-row + .notification-background + .notification.critical { + box-shadow: inset 0 0 7px 0 $red; +} + +.control-center + .notification-row + .notification-background + .notification + .notification-content { + margin: 7px; +} + +.control-center + .notification-row + .notification-background + .notification + .notification-content + .summary { + color: $text; +} + +.control-center + .notification-row + .notification-background + .notification + .notification-content + .time { + color: $subtext0; +} + +.control-center + .notification-row + .notification-background + .notification + .notification-content + .body { + color: $text; +} + +.control-center + .notification-row + .notification-background + .notification + > *:last-child + > * { + min-height: 3.4em; +} + +.control-center + .notification-row + .notification-background + .notification + > *:last-child + > * + .notification-action { + border-radius: 7px; + color: $text; + background-color: $crust; + box-shadow: inset 0 0 0 1px $surface1; + margin: 7px; +} + +.control-center + .notification-row + .notification-background + .notification + > *:last-child + > * + .notification-action:hover { + box-shadow: inset 0 0 0 1px $surface1; + background-color: $surface0; + color: $text; +} + +.control-center + .notification-row + .notification-background + .notification + > *:last-child + > * + .notification-action:active { + box-shadow: inset 0 0 0 1px $surface1; + background-color: $sapphire; + color: $text; +} + +.control-center .notification-row .notification-background .close-button { + margin: 7px; + padding: 2px; + border-radius: 6.3px; + color: $base; + background-color: $maroon; +} + +.control-center .notification-row .notification-background .close-button:hover { + background-color: $red; + color: $base; +} + +.control-center + .notification-row + .notification-background + .close-button:active { + background-color: $red; + color: $base; +} + +.control-center .notification-row .notification-background:hover { + box-shadow: inset 0 0 0 1px $surface1; + background-color: $overlay1; + color: $text; +} + +.control-center .notification-row .notification-background:active { + box-shadow: inset 0 0 0 1px $surface1; + background-color: $sapphire; + color: $text; +} diff --git a/src/bin/catppuccin.css b/src/bin/catppuccin.css deleted file mode 100644 index 8634390..0000000 --- a/src/bin/catppuccin.css +++ /dev/null @@ -1,17 +0,0 @@ -/* Error: Can't find stylesheet to import. - * , - * 1 | @use "@catppuccin/palette/scss/catppuccin" as catppuccin; - * | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - * ' - * src\palette\catppuccin.scss 1:1 root stylesheet */ - -body::before { - font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono", - "Droid Sans Mono", monospace, monospace; - white-space: pre; - display: block; - padding: 1em; - margin-bottom: 1em; - border-bottom: 2px solid black; - content: "Error: Can't find stylesheet to import.\a \2577 \a 1 \2502 @use \"@catppuccin/palette/scss/catppuccin\" as catppuccin;\a \2502 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\a \2575 \a src\\palette\\catppuccin.scss 1:1 root stylesheet"; -} diff --git a/src/frappe.css b/src/frappe.css deleted file mode 100644 index c835a22..0000000 --- a/src/frappe.css +++ /dev/null @@ -1,203 +0,0 @@ -* { - all: unset; - font-size: 14px; - font-family: 'Ubuntu Nerd Font'; - transition: 200ms; -} - -.floating-notifications.background .notification-row .notification-background { - box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px #414559; - border-radius: 12.6px; - margin: 18px; - background-color: #303446; - color: #c6d0f5; - padding: 0; -} - -.floating-notifications.background .notification-row .notification-background .notification { - padding: 7px; - border-radius: 12.6px; -} - -.floating-notifications.background .notification-row .notification-background .notification.critical { - box-shadow: inset 0 0 7px 0 rgba(243, 139, 168, 0.3); -} - -.floating-notifications.background .notification-row .notification-background .notification .notification-content { - margin: 7px; -} - -.floating-notifications.background .notification-row .notification-background .notification .notification-content .summary { - color: #c6d0f5; -} - -.floating-notifications.background .notification-row .notification-background .notification .notification-content .time { - color: #a5adce; -} - -.floating-notifications.background .notification-row .notification-background .notification .notification-content .body { - color: #c6d0f5; -} - -.floating-notifications.background .notification-row .notification-background .notification>*:last-child>* { - min-height: 3.4em; -} - -.floating-notifications.background .notification-row .notification-background .notification>*:last-child>* .notification-action { - border-radius: 7px; - color: #c6d0f5; - background-color: rgba(238, 238, 238, 0.08); - box-shadow: inset 0 0 0 1px #51576d; - margin: 7px; -} - -.floating-notifications.background .notification-row .notification-background .notification>*:last-child>* .notification-action:hover { - box-shadow: inset 0 0 0 1px #51576d; - background-color: #414559; - color: #c6d0f5; -} - -.floating-notifications.background .notification-row .notification-background .notification>*:last-child>* .notification-action:active { - box-shadow: inset 0 0 0 1px #51576d; - background-color: #85c1dc; - color: #c6d0f5; -} - -.floating-notifications.background .notification-row .notification-background .close-button { - margin: 7px; - padding: 2px; - border-radius: 6.3px; - color: #303446; - background-color: #e78284; -} - -.floating-notifications.background .notification-row .notification-background .close-button:hover { - background-color: #ea999c; - color: #303446; -} - -.floating-notifications.background .notification-row .notification-background .close-button:active { - background-color: #e78284; - color: #303446; -} - -.control-center { - box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px #414559; - border-radius: 12.6px; - margin: 18px; - background-color: #303446; - color: #c6d0f5; - padding: 14px; -} - -.control-center .widget-title { - color: #c6d0f5; - font-size: 1.3em; -} - -.control-center .widget-title button { - border-radius: 7px; - color: #c6d0f5; - background-color: rgba(238, 238, 238, 0.08); - box-shadow: inset 0 0 0 1px #51576d; - padding: 8px; -} - -.control-center .widget-title button:hover { - box-shadow: inset 0 0 0 1px #51576d; - background-color: #626880; - color: #c6d0f5; -} - -.control-center .widget-title button:active { - box-shadow: inset 0 0 0 1px #51576d; - background-color: #85c1dc; - color: #303446; -} - -.control-center .notification-row .notification-background { - border-radius: 7px; - color: #c6d0f5; - background-color: rgba(238, 238, 238, 0.08); - box-shadow: inset 0 0 0 1px #51576d; - margin-top: 14px; -} - -.control-center .notification-row .notification-background .notification { - padding: 7px; - border-radius: 7px; -} - -.control-center .notification-row .notification-background .notification.critical { - box-shadow: inset 0 0 7px 0 #e78284; -} - -.control-center .notification-row .notification-background .notification .notification-content { - margin: 7px; -} - -.control-center .notification-row .notification-background .notification .notification-content .summary { - color: #c6d0f5; -} - -.control-center .notification-row .notification-background .notification .notification-content .time { - color: rgba(238, 238, 238, 0.6); -} - -.control-center .notification-row .notification-background .notification .notification-content .body { - color: #c6d0f5; -} - -.control-center .notification-row .notification-background .notification>*:last-child>* { - min-height: 3.4em; -} - -.control-center .notification-row .notification-background .notification>*:last-child>* .notification-action { - border-radius: 7px; - color: #c6d0f5; - background-color: #232634; - box-shadow: inset 0 0 0 1px #51576d; - margin: 7px; -} - -.control-center .notification-row .notification-background .notification>*:last-child>* .notification-action:hover { - box-shadow: inset 0 0 0 1px #51576d; - background-color: #414559; - color: #c6d0f5; -} - -.control-center .notification-row .notification-background .notification>*:last-child>* .notification-action:active { - box-shadow: inset 0 0 0 1px #51576d; - background-color: #85c1dc; - color: #c6d0f5; -} - -.control-center .notification-row .notification-background .close-button { - margin: 7px; - padding: 2px; - border-radius: 6.3px; - color: #303446; - background-color: #ea999c; -} - -.control-center .notification-row .notification-background .close-button:hover { - background-color: #e78284; - color: #303446; -} - -.control-center .notification-row .notification-background .close-button:active { - background-color: #e78284; - color: #303446; -} - -.control-center .notification-row .notification-background:hover { - box-shadow: inset 0 0 0 1px #51576d; - background-color: #838ba7; - color: #c6d0f5; -} - -.control-center .notification-row .notification-background:active { - box-shadow: inset 0 0 0 1px #51576d; - background-color: #85c1dc; - color: #c6d0f5; -} diff --git a/src/frappe.scss b/src/frappe.scss new file mode 100644 index 0000000..72bbb05 --- /dev/null +++ b/src/frappe.scss @@ -0,0 +1,2 @@ +@use "@catppuccin/palette/scss/frappe" as *; +@import "theme"; diff --git a/src/latte.css b/src/latte.css deleted file mode 100644 index fd614fb..0000000 --- a/src/latte.css +++ /dev/null @@ -1,203 +0,0 @@ -* { - all: unset; - font-size: 14px; - font-family: 'Ubuntu Nerd Font'; - transition: 200ms; -} - -.floating-notifications.background .notification-row .notification-background { - box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px #ccd0da; - border-radius: 12.6px; - margin: 18px; - background-color: #eff1f5; - color: #4c4f69; - padding: 0; -} - -.floating-notifications.background .notification-row .notification-background .notification { - padding: 7px; - border-radius: 12.6px; -} - -.floating-notifications.background .notification-row .notification-background .notification.critical { - box-shadow: inset 0 0 7px 0 rgba(243, 139, 168, 0.3); -} - -.floating-notifications.background .notification-row .notification-background .notification .notification-content { - margin: 7px; -} - -.floating-notifications.background .notification-row .notification-background .notification .notification-content .summary { - color: #4c4f69; -} - -.floating-notifications.background .notification-row .notification-background .notification .notification-content .time { - color: #6c6f85; -} - -.floating-notifications.background .notification-row .notification-background .notification .notification-content .body { - color: #4c4f69; -} - -.floating-notifications.background .notification-row .notification-background .notification>*:last-child>* { - min-height: 3.4em; -} - -.floating-notifications.background .notification-row .notification-background .notification>*:last-child>* .notification-action { - border-radius: 7px; - color: #4c4f69; - background-color: rgba(238, 238, 238, 0.08); - box-shadow: inset 0 0 0 1px #bcc0cc; - margin: 7px; -} - -.floating-notifications.background .notification-row .notification-background .notification>*:last-child>* .notification-action:hover { - box-shadow: inset 0 0 0 1px #bcc0cc; - background-color: #ccd0da; - color: #4c4f69; -} - -.floating-notifications.background .notification-row .notification-background .notification>*:last-child>* .notification-action:active { - box-shadow: inset 0 0 0 1px #bcc0cc; - background-color: #85c1dc; - color: #4c4f69; -} - -.floating-notifications.background .notification-row .notification-background .close-button { - margin: 7px; - padding: 2px; - border-radius: 6.3px; - color: #eff1f5; - background-color: #d20f39; -} - -.floating-notifications.background .notification-row .notification-background .close-button:hover { - background-color: #e64553; - color: #eff1f5; -} - -.floating-notifications.background .notification-row .notification-background .close-button:active { - background-color: #d20f39; - color: #eff1f5; -} - -.control-center { - box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px #ccd0da; - border-radius: 12.6px; - margin: 18px; - background-color: #eff1f5; - color: #4c4f69; - padding: 14px; -} - -.control-center .widget-title { - color: #4c4f69; - font-size: 1.3em; -} - -.control-center .widget-title button { - border-radius: 7px; - color: #4c4f69; - background-color: rgba(238, 238, 238, 0.08); - box-shadow: inset 0 0 0 1px #bcc0cc; - padding: 8px; -} - -.control-center .widget-title button:hover { - box-shadow: inset 0 0 0 1px #bcc0cc; - background-color: #acb0be; - color: #4c4f69; -} - -.control-center .widget-title button:active { - box-shadow: inset 0 0 0 1px #bcc0cc; - background-color: #85c1dc; - color: #eff1f5; -} - -.control-center .notification-row .notification-background { - border-radius: 7px; - color: #4c4f69; - background-color: rgba(238, 238, 238, 0.08); - box-shadow: inset 0 0 0 1px #bcc0cc; - margin-top: 14px; -} - -.control-center .notification-row .notification-background .notification { - padding: 7px; - border-radius: 7px; -} - -.control-center .notification-row .notification-background .notification.critical { - box-shadow: inset 0 0 7px 0 #d20f39; -} - -.control-center .notification-row .notification-background .notification .notification-content { - margin: 7px; -} - -.control-center .notification-row .notification-background .notification .notification-content .summary { - color: #4c4f69; -} - -.control-center .notification-row .notification-background .notification .notification-content .time { - color: rgba(238, 238, 238, 0.6); -} - -.control-center .notification-row .notification-background .notification .notification-content .body { - color: #4c4f69; -} - -.control-center .notification-row .notification-background .notification>*:last-child>* { - min-height: 3.4em; -} - -.control-center .notification-row .notification-background .notification>*:last-child>* .notification-action { - border-radius: 7px; - color: #4c4f69; - background-color: #dce0e8; - box-shadow: inset 0 0 0 1px #bcc0cc; - margin: 7px; -} - -.control-center .notification-row .notification-background .notification>*:last-child>* .notification-action:hover { - box-shadow: inset 0 0 0 1px #bcc0cc; - background-color: #ccd0da; - color: #4c4f69; -} - -.control-center .notification-row .notification-background .notification>*:last-child>* .notification-action:active { - box-shadow: inset 0 0 0 1px #bcc0cc; - background-color: #85c1dc; - color: #4c4f69; -} - -.control-center .notification-row .notification-background .close-button { - margin: 7px; - padding: 2px; - border-radius: 6.3px; - color: #eff1f5; - background-color: #e64553; -} - -.control-center .notification-row .notification-background .close-button:hover { - background-color: #d20f39; - color: #eff1f5; -} - -.control-center .notification-row .notification-background .close-button:active { - background-color: #d20f39; - color: #eff1f5; -} - -.control-center .notification-row .notification-background:hover { - box-shadow: inset 0 0 0 1px #bcc0cc; - background-color: #8c8fa1; - color: #4c4f69; -} - -.control-center .notification-row .notification-background:active { - box-shadow: inset 0 0 0 1px #bcc0cc; - background-color: #85c1dc; - color: #4c4f69; -} diff --git a/src/latte.scss b/src/latte.scss new file mode 100644 index 0000000..e39059f --- /dev/null +++ b/src/latte.scss @@ -0,0 +1,2 @@ +@use "@catppuccin/palette/scss/latte" as *; +@import "theme"; diff --git a/src/macchiato.css b/src/macchiato.css deleted file mode 100644 index 7ae1b8b..0000000 --- a/src/macchiato.css +++ /dev/null @@ -1,203 +0,0 @@ -* { - all: unset; - font-size: 14px; - font-family: 'Ubuntu Nerd Font'; - transition: 200ms; -} - -.floating-notifications.background .notification-row .notification-background { - box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px #363a4f; - border-radius: 12.6px; - margin: 18px; - background-color: #24273a; - color: #cad3f5; - padding: 0; -} - -.floating-notifications.background .notification-row .notification-background .notification { - padding: 7px; - border-radius: 12.6px; -} - -.floating-notifications.background .notification-row .notification-background .notification.critical { - box-shadow: inset 0 0 7px 0 rgba(243, 139, 168, 0.3); -} - -.floating-notifications.background .notification-row .notification-background .notification .notification-content { - margin: 7px; -} - -.floating-notifications.background .notification-row .notification-background .notification .notification-content .summary { - color: #cad3f5; -} - -.floating-notifications.background .notification-row .notification-background .notification .notification-content .time { - color: #a5adcb; -} - -.floating-notifications.background .notification-row .notification-background .notification .notification-content .body { - color: #cad3f5; -} - -.floating-notifications.background .notification-row .notification-background .notification>*:last-child>* { - min-height: 3.4em; -} - -.floating-notifications.background .notification-row .notification-background .notification>*:last-child>* .notification-action { - border-radius: 7px; - color: #cad3f5; - background-color: rgba(238, 238, 238, 0.08); - box-shadow: inset 0 0 0 1px #494d64; - margin: 7px; -} - -.floating-notifications.background .notification-row .notification-background .notification>*:last-child>* .notification-action:hover { - box-shadow: inset 0 0 0 1px #494d64; - background-color: #363a4f; - color: #cad3f5; -} - -.floating-notifications.background .notification-row .notification-background .notification>*:last-child>* .notification-action:active { - box-shadow: inset 0 0 0 1px #494d64; - background-color: #7dc4e4; - color: #cad3f5; -} - -.floating-notifications.background .notification-row .notification-background .close-button { - margin: 7px; - padding: 2px; - border-radius: 6.3px; - color: #24273a; - background-color: #ed8796; -} - -.floating-notifications.background .notification-row .notification-background .close-button:hover { - background-color: #ee99a0; - color: #24273a; -} - -.floating-notifications.background .notification-row .notification-background .close-button:active { - background-color: #ed8796; - color: #24273a; -} - -.control-center { - box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px #363a4f; - border-radius: 12.6px; - margin: 18px; - background-color: #24273a; - color: #cad3f5; - padding: 14px; -} - -.control-center .widget-title { - color: #cad3f5; - font-size: 1.3em; -} - -.control-center .widget-title button { - border-radius: 7px; - color: #cad3f5; - background-color: rgba(238, 238, 238, 0.08); - box-shadow: inset 0 0 0 1px #494d64; - padding: 8px; -} - -.control-center .widget-title button:hover { - box-shadow: inset 0 0 0 1px #494d64; - background-color: #5b6078; - color: #cad3f5; -} - -.control-center .widget-title button:active { - box-shadow: inset 0 0 0 1px #494d64; - background-color: #7dc4e4; - color: #24273a; -} - -.control-center .notification-row .notification-background { - border-radius: 7px; - color: #cad3f5; - background-color: rgba(238, 238, 238, 0.08); - box-shadow: inset 0 0 0 1px #494d64; - margin-top: 14px; -} - -.control-center .notification-row .notification-background .notification { - padding: 7px; - border-radius: 7px; -} - -.control-center .notification-row .notification-background .notification.critical { - box-shadow: inset 0 0 7px 0 #ed8796; -} - -.control-center .notification-row .notification-background .notification .notification-content { - margin: 7px; -} - -.control-center .notification-row .notification-background .notification .notification-content .summary { - color: #cad3f5; -} - -.control-center .notification-row .notification-background .notification .notification-content .time { - color: rgba(238, 238, 238, 0.6); -} - -.control-center .notification-row .notification-background .notification .notification-content .body { - color: #cad3f5; -} - -.control-center .notification-row .notification-background .notification>*:last-child>* { - min-height: 3.4em; -} - -.control-center .notification-row .notification-background .notification>*:last-child>* .notification-action { - border-radius: 7px; - color: #cad3f5; - background-color: #181926; - box-shadow: inset 0 0 0 1px #494d64; - margin: 7px; -} - -.control-center .notification-row .notification-background .notification>*:last-child>* .notification-action:hover { - box-shadow: inset 0 0 0 1px #494d64; - background-color: #363a4f; - color: #cad3f5; -} - -.control-center .notification-row .notification-background .notification>*:last-child>* .notification-action:active { - box-shadow: inset 0 0 0 1px #494d64; - background-color: #7dc4e4; - color: #cad3f5; -} - -.control-center .notification-row .notification-background .close-button { - margin: 7px; - padding: 2px; - border-radius: 6.3px; - color: #24273a; - background-color: #ee99a0; -} - -.control-center .notification-row .notification-background .close-button:hover { - background-color: #ed8796; - color: #24273a; -} - -.control-center .notification-row .notification-background .close-button:active { - background-color: #ed8796; - color: #24273a; -} - -.control-center .notification-row .notification-background:hover { - box-shadow: inset 0 0 0 1px #494d64; - background-color: #8087a2; - color: #cad3f5; -} - -.control-center .notification-row .notification-background:active { - box-shadow: inset 0 0 0 1px #494d64; - background-color: #7dc4e4; - color: #cad3f5; -} diff --git a/src/macchiato.scss b/src/macchiato.scss new file mode 100644 index 0000000..396c0d3 --- /dev/null +++ b/src/macchiato.scss @@ -0,0 +1,2 @@ +@use "@catppuccin/palette/scss/macchiato" as *; +@import "theme"; diff --git a/src/mocha.css b/src/mocha.css deleted file mode 100644 index f6aabab..0000000 --- a/src/mocha.css +++ /dev/null @@ -1,203 +0,0 @@ -* { - all: unset; - font-size: 14px; - font-family: 'Ubuntu Nerd Font'; - transition: 200ms; -} - -.floating-notifications.background .notification-row .notification-background { - box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px #313244; - border-radius: 12.6px; - margin: 18px; - background-color: #1e1e2e; - color: #cdd6f4; - padding: 0; -} - -.floating-notifications.background .notification-row .notification-background .notification { - padding: 7px; - border-radius: 12.6px; -} - -.floating-notifications.background .notification-row .notification-background .notification.critical { - box-shadow: inset 0 0 7px 0 rgba(243, 139, 168, 0.3); -} - -.floating-notifications.background .notification-row .notification-background .notification .notification-content { - margin: 7px; -} - -.floating-notifications.background .notification-row .notification-background .notification .notification-content .summary { - color: #cdd6f4; -} - -.floating-notifications.background .notification-row .notification-background .notification .notification-content .time { - color: #a6adc8; -} - -.floating-notifications.background .notification-row .notification-background .notification .notification-content .body { - color: #cdd6f4; -} - -.floating-notifications.background .notification-row .notification-background .notification>*:last-child>* { - min-height: 3.4em; -} - -.floating-notifications.background .notification-row .notification-background .notification>*:last-child>* .notification-action { - border-radius: 7px; - color: #cdd6f4; - background-color: rgba(238, 238, 238, 0.08); - box-shadow: inset 0 0 0 1px #45475a; - margin: 7px; -} - -.floating-notifications.background .notification-row .notification-background .notification>*:last-child>* .notification-action:hover { - box-shadow: inset 0 0 0 1px #45475a; - background-color: #313244; - color: #cdd6f4; -} - -.floating-notifications.background .notification-row .notification-background .notification>*:last-child>* .notification-action:active { - box-shadow: inset 0 0 0 1px #45475a; - background-color: #74c7ec; - color: #cdd6f4; -} - -.floating-notifications.background .notification-row .notification-background .close-button { - margin: 7px; - padding: 2px; - border-radius: 6.3px; - color: #1e1e2e; - background-color: #f38ba8; -} - -.floating-notifications.background .notification-row .notification-background .close-button:hover { - background-color: #eba0ac; - color: #1e1e2e; -} - -.floating-notifications.background .notification-row .notification-background .close-button:active { - background-color: #f38ba8; - color: #1e1e2e; -} - -.control-center { - box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px #313244; - border-radius: 12.6px; - margin: 18px; - background-color: #1e1e2e; - color: #cdd6f4; - padding: 14px; -} - -.control-center .widget-title { - color: #cdd6f4; - font-size: 1.3em; -} - -.control-center .widget-title button { - border-radius: 7px; - color: #cdd6f4; - background-color: rgba(238, 238, 238, 0.08); - box-shadow: inset 0 0 0 1px #45475a; - padding: 8px; -} - -.control-center .widget-title button:hover { - box-shadow: inset 0 0 0 1px #45475a; - background-color: #585b70; - color: #cdd6f4; -} - -.control-center .widget-title button:active { - box-shadow: inset 0 0 0 1px #45475a; - background-color: #74c7ec; - color: #1e1e2e; -} - -.control-center .notification-row .notification-background { - border-radius: 7px; - color: #cdd6f4; - background-color: rgba(238, 238, 238, 0.08); - box-shadow: inset 0 0 0 1px #45475a; - margin-top: 14px; -} - -.control-center .notification-row .notification-background .notification { - padding: 7px; - border-radius: 7px; -} - -.control-center .notification-row .notification-background .notification.critical { - box-shadow: inset 0 0 7px 0 #f38ba8; -} - -.control-center .notification-row .notification-background .notification .notification-content { - margin: 7px; -} - -.control-center .notification-row .notification-background .notification .notification-content .summary { - color: #cdd6f4; -} - -.control-center .notification-row .notification-background .notification .notification-content .time { - color: rgba(238, 238, 238, 0.6); -} - -.control-center .notification-row .notification-background .notification .notification-content .body { - color: #cdd6f4; -} - -.control-center .notification-row .notification-background .notification>*:last-child>* { - min-height: 3.4em; -} - -.control-center .notification-row .notification-background .notification>*:last-child>* .notification-action { - border-radius: 7px; - color: #cdd6f4; - background-color: #11111b; - box-shadow: inset 0 0 0 1px #45475a; - margin: 7px; -} - -.control-center .notification-row .notification-background .notification>*:last-child>* .notification-action:hover { - box-shadow: inset 0 0 0 1px #45475a; - background-color: #313244; - color: #cdd6f4; -} - -.control-center .notification-row .notification-background .notification>*:last-child>* .notification-action:active { - box-shadow: inset 0 0 0 1px #45475a; - background-color: #74c7ec; - color: #cdd6f4; -} - -.control-center .notification-row .notification-background .close-button { - margin: 7px; - padding: 2px; - border-radius: 6.3px; - color: #1e1e2e; - background-color: #eba0ac; -} - -.control-center .notification-row .notification-background .close-button:hover { - background-color: #f38ba8; - color: #1e1e2e; -} - -.control-center .notification-row .notification-background .close-button:active { - background-color: #f38ba8; - color: #1e1e2e; -} - -.control-center .notification-row .notification-background:hover { - box-shadow: inset 0 0 0 1px #45475a; - background-color: #7f849c; - color: #cdd6f4; -} - -.control-center .notification-row .notification-background:active { - box-shadow: inset 0 0 0 1px #45475a; - background-color: #74c7ec; - color: #cdd6f4; -} diff --git a/src/mocha.scss b/src/mocha.scss new file mode 100644 index 0000000..1fe5d48 --- /dev/null +++ b/src/mocha.scss @@ -0,0 +1,2 @@ +@use "@catppuccin/palette/scss/mocha" as *; +@import "theme"; diff --git a/src/palette/catppuccin.scss b/src/palette/catppuccin.scss deleted file mode 100644 index 651082f..0000000 --- a/src/palette/catppuccin.scss +++ /dev/null @@ -1,212 +0,0 @@ -@use "@catppuccin/palette/scss/catppuccin" as catppuccin; - -@each $flavour, -$color in catppuccin.$palette { - .#{$flavour} { - * { - all: unset; - font-size: 14px; - font-family: 'Ubuntu Nerd Font'; - transition: 200ms; - } - - .floating-notifications.background .notification-row .notification-background { - box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), - inset 0 0 0 1px #{map-get($color, "surface0")}; - border-radius: 12.6px; - margin: 18px; - background-color: #{map-get($color, "base")}; - color: #{map-get($color, "text")}; - padding: 0; - } - - .floating-notifications.background .notification-row .notification-background .notification { - padding: 7px; - border-radius: 12.6px; - } - - .floating-notifications.background .notification-row .notification-background .notification.critical { - box-shadow: inset 0 0 7px 0 #{map-get($color, "red")}; - } - - .floating-notifications.background .notification-row .notification-background .notification .notification-content { - margin: 7px; - } - - .floating-notifications.background .notification-row .notification-background .notification .notification-content .summary { - color: #{map-get($color, "text")}; - } - - .floating-notifications.background .notification-row .notification-background .notification .notification-content .time { - color: #{map-get($color, "subtext0")}; - } - - .floating-notifications.background .notification-row .notification-background .notification .notification-content .body { - color: #{map-get($color, "text")}; - } - - .floating-notifications.background .notification-row .notification-background .notification>*:last-child>* { - min-height: 3.4em; - } - - .floating-notifications.background .notification-row .notification-background .notification>*:last-child>* .notification-action { - border-radius: 7px; - color: #{map-get($color, "text")}; - background-color: #{map-get($color, "Surface0")}; - box-shadow: inset 0 0 0 1px #{map-get($color, "surface1")}; - margin: 7px; - } - - .floating-notifications.background .notification-row .notification-background .notification>*:last-child>* .notification-action:hover { - box-shadow: inset 0 0 0 1px #{map-get($color, "surface1")}; - background-color: #{map-get($color, "surface0")}; - color: #{map-get($color, "text")}; - } - - .floating-notifications.background .notification-row .notification-background .notification>*:last-child>* .notification-action:active { - box-shadow: inset 0 0 0 1px #{map-get($color, "surface1")}; - background-color: #{map-get($color, "sapphire")}; - color: #{map-get($color, "text")}; - } - - .floating-notifications.background .notification-row .notification-background .close-button { - margin: 7px; - padding: 2px; - border-radius: 6.3px; - color: #{map-get($color, "base")}; - background-color: #{map-get($color, "red")}; - } - - .floating-notifications.background .notification-row .notification-background .close-button:hover { - background-color: #{map-get($color, "maroon")}; - color: #{map-get($color, "base")}; - } - - .floating-notifications.background .notification-row .notification-background .close-button:active { - background-color: #{map-get($color, "red")}; - color: #{map-get($color, "base")}; - } - - .control-center { - box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), - inset 0 0 0 1px #{map-get($color, "surface0")}; - border-radius: 12.6px; - margin: 18px; - background-color: #{map-get($color, "base")}; - color: #{map-get($color, "text")}; - padding: 14px; - } - - .control-center .widget-title { - color: #{map-get($color, "text")}; - font-size: 1.3em; - } - - .control-center .widget-title button { - border-radius: 7px; - color: #{map-get($color, "text")}; - background-color: #{map-get($color, "Surface0")}; - box-shadow: inset 0 0 0 1px #{map-get($color, "surface1")}; - padding: 8px; - } - - .control-center .widget-title button:hover { - box-shadow: inset 0 0 0 1px #{map-get($color, "surface1")}; - background-color: #{map-get($color, "surface2")}; - color: #{map-get($color, "text")}; - } - - .control-center .widget-title button:active { - box-shadow: inset 0 0 0 1px #{map-get($color, "surface1")}; - background-color: #{map-get($color, "sapphire")}; - color: #{map-get($color, "base")}; - } - - .control-center .notification-row .notification-background { - border-radius: 7px; - color: #{map-get($color, "text")}; - background-color: #{map-get($color, "Surface0")}; - box-shadow: inset 0 0 0 1px #{map-get($color, "surface1")}; - margin-top: 14px; - } - - .control-center .notification-row .notification-background .notification { - padding: 7px; - border-radius: 7px; - } - - .control-center .notification-row .notification-background .notification.critical { - box-shadow: inset 0 0 7px 0 #{map-get($color, "red")}; - } - - .control-center .notification-row .notification-background .notification .notification-content { - margin: 7px; - } - - .control-center .notification-row .notification-background .notification .notification-content .summary { - color: #{map-get($color, "text")}; - } - - .control-center .notification-row .notification-background .notification .notification-content .time { - color: #{map-get($color, "subtext0")}; - } - - .control-center .notification-row .notification-background .notification .notification-content .body { - color: #{map-get($color, "text")}; - } - - .control-center .notification-row .notification-background .notification>*:last-child>* { - min-height: 3.4em; - } - - .control-center .notification-row .notification-background .notification>*:last-child>* .notification-action { - border-radius: 7px; - color: #{map-get($color, "text")}; - background-color: #{map-get($color, "crust")}; - box-shadow: inset 0 0 0 1px #{map-get($color, "surface1")}; - margin: 7px; - } - - .control-center .notification-row .notification-background .notification>*:last-child>* .notification-action:hover { - box-shadow: inset 0 0 0 1px #{map-get($color, "surface1")}; - background-color: #{map-get($color, "surface0")}; - color: #{map-get($color, "text")}; - } - - .control-center .notification-row .notification-background .notification>*:last-child>* .notification-action:active { - box-shadow: inset 0 0 0 1px #{map-get($color, "surface1")}; - background-color: #{map-get($color, "sapphire")}; - color: #{map-get($color, "text")}; - } - - .control-center .notification-row .notification-background .close-button { - margin: 7px; - padding: 2px; - border-radius: 6.3px; - color: #{map-get($color, "base")}; - background-color: #{map-get($color, "maroon")}; - } - - .control-center .notification-row .notification-background .close-button:hover { - background-color: #{map-get($color, "red")}; - color: #{map-get($color, "base")}; - } - - .control-center .notification-row .notification-background .close-button:active { - background-color: #{map-get($color, "red")}; - color: #{map-get($color, "base")}; - } - - .control-center .notification-row .notification-background:hover { - box-shadow: inset 0 0 0 1px #{map-get($color, "surface1")}; - background-color: #{map-get($color, "overlay1")}; - color: #{map-get($color, "text")}; - } - - .control-center .notification-row .notification-background:active { - box-shadow: inset 0 0 0 1px #{map-get($color, "surface1")}; - background-color: #{map-get($color, "sapphire")}; - color: #{map-get($color, "text")}; - } - } -} \ No newline at end of file