From 9cdaeeb3362da6f477155a8d2045954fd01d113c Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Mon, 9 Jun 2025 19:19:12 +0200
Subject: [PATCH 1/3] refactor(scss): properly separate shared and main SCSS
files
- Organize shared SCSS (variables, mixins, functions, extends, etc.) into Vite's `additionalData` for global availability
- Import the main `index.scss` directly into `content.js` for better modularity
- Improve the structure and maintainability of SCSS files by clearly separating shared utilities from component-specific styles
Changes summary:
Properly separated shared SCSS into Vite's `additionalData` and imported the main `index.scss` into `content.js`, enhancing modularity and maintainability of the styling architecture.
---
entrypoints/content.js | 3 +-
styles/{shared => abstract}/_anims.scss | 0
styles/{shared => abstract}/_easing.scss | 0
styles/abstract/_extends.scss | 64 +++++++++++++++++++++++-
styles/abstract/_index.scss | 9 ++++
styles/index.scss | 27 ++++------
styles/shared.scss | 11 ++++
styles/shared/_extends.scss | 61 ----------------------
wxt.config.js | 2 +-
9 files changed, 96 insertions(+), 81 deletions(-)
rename styles/{shared => abstract}/_anims.scss (100%)
rename styles/{shared => abstract}/_easing.scss (100%)
create mode 100644 styles/abstract/_index.scss
create mode 100644 styles/shared.scss
delete mode 100644 styles/shared/_extends.scss
diff --git a/entrypoints/content.js b/entrypoints/content.js
index 9d015c8..6d6966b 100644
--- a/entrypoints/content.js
+++ b/entrypoints/content.js
@@ -1,11 +1,12 @@
// import '@/styles/index.scss'
+import '../styles/index.scss'
import { createApp } from 'vue'
+
import ThemeManager from '@/components/ThemeManager.vue'
import { useThemeManager } from '@/composables/useThemeManager'
export default defineContentScript({
matches: ['*://chat.deepseek.com/*'],
- css: ['src/styles/index.scss'], // 👈 Use the same index.scss for content scripts
async main(ctx) {
// Force theme initialization before the UI mounts.
diff --git a/styles/shared/_anims.scss b/styles/abstract/_anims.scss
similarity index 100%
rename from styles/shared/_anims.scss
rename to styles/abstract/_anims.scss
diff --git a/styles/shared/_easing.scss b/styles/abstract/_easing.scss
similarity index 100%
rename from styles/shared/_easing.scss
rename to styles/abstract/_easing.scss
diff --git a/styles/abstract/_extends.scss b/styles/abstract/_extends.scss
index ed53213..6d43882 100644
--- a/styles/abstract/_extends.scss
+++ b/styles/abstract/_extends.scss
@@ -49,4 +49,66 @@
line-height: 1 !important;
padding: 0.32rem 0.6rem !important;
backdrop-filter: blur(5px);
-}
\ No newline at end of file
+}
+
+%link_default {
+ position: relative;
+ text-decoration: none;
+ color: var(--c-accent) !important;
+ // display: inline-block;
+ transition: opacity 0.3s ease;
+
+ /* Style for the ::after pseudo-element (initially hidden) */
+ &::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 1.5px;
+ bottom: -4px;
+ left: 0;
+ // right: 0; /* Set right to cover the entire link */
+ background-color: currentColor;
+ border-radius: 20px;
+ transition: transform 0.3s $easeOutCubic;
+ }
+}
+
+%link_hover_underlined {
+ @extend %link_default;
+
+ /* Style for the ::after pseudo-element (initially hidden) */
+ &::after {
+ transform: scaleX(1);
+ transform-origin: bottom left;
+ }
+
+ &:hover::after {
+ transform: scaleX(0);
+ transform-origin: bottom right;
+ }
+}
+
+%link_hover_underless {
+ @extend %link_default;
+
+ &::after {
+ transform: scaleX(0);
+ transform-origin: bottom right;
+ }
+
+ &:hover::after {
+ transform: scaleX(1);
+ transform-origin: bottom left;
+ }
+}
+
+// %center_grid {
+// display: grid;
+// place-items: center;
+// }
+
+// %center_flex {
+// display: flex;
+// justify-content: center;
+// align-items: center;
+// }
\ No newline at end of file
diff --git a/styles/abstract/_index.scss b/styles/abstract/_index.scss
new file mode 100644
index 0000000..44b76d1
--- /dev/null
+++ b/styles/abstract/_index.scss
@@ -0,0 +1,9 @@
+@import 'abstract/_bp';
+@import 'abstract/_ds';
+@import 'abstract/_root';
+@import 'abstract/_light';
+@import 'abstract/_dark';
+@import 'abstract/_easing';
+@import 'abstract/_anims';
+@import 'abstract/_extends';
+@import 'abstract/_mixins';
\ No newline at end of file
diff --git a/styles/index.scss b/styles/index.scss
index aea62f6..6868613 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -1,14 +1,12 @@
-@import 'abstract/_bp';
-@import 'abstract/_ds';
-@import 'abstract/_root';
-// @import 'abstract/_vars';
-@import 'abstract/_light';
-@import 'abstract/_dark';
-@import 'shared/_easing';
-@import 'shared/_anims';
-@import 'shared/_extends';
-@import 'abstract/_extends';
-@import 'abstract/_mixins';
+// @import 'abstract/_bp';
+// @import 'abstract/_ds';
+// @import 'abstract/_root';
+// @import 'abstract/_light';
+// @import 'abstract/_dark';
+// @import 'abstract/_easing';
+// @import 'abstract/_anims';
+// @import 'abstract/_extends';
+// @import 'abstract/_mixins';
// @import 'dev/_mixins';
@@ -36,9 +34,4 @@
@import 'elements/_right--sticky';
@import 'elements/_right--textarea';
-@import 'deepstyled/index';
-
-/* DS */
-@import 'abstract/_light.scss';
-@import 'abstract/_dark.scss';
-@import 'abstract/_ds.scss';
\ No newline at end of file
+@import 'deepstyled/index';
\ No newline at end of file
diff --git a/styles/shared.scss b/styles/shared.scss
new file mode 100644
index 0000000..7897eeb
--- /dev/null
+++ b/styles/shared.scss
@@ -0,0 +1,11 @@
+@import 'abstract/_bp';
+@import 'abstract/_ds';
+@import 'abstract/_root';
+@import 'abstract/_light';
+@import 'abstract/_dark';
+@import 'abstract/_easing';
+@import 'abstract/_anims';
+@import 'abstract/_extends';
+@import 'abstract/_mixins';
+
+@import 'dev/_mixins';
\ No newline at end of file
diff --git a/styles/shared/_extends.scss b/styles/shared/_extends.scss
deleted file mode 100644
index b3c22a1..0000000
--- a/styles/shared/_extends.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-%link_default {
- position: relative;
- text-decoration: none;
- color: var(--c-accent) !important;
- // display: inline-block;
- transition: opacity 0.3s ease;
-
- /* Style for the ::after pseudo-element (initially hidden) */
- &::after {
- content: '';
- position: absolute;
- width: 100%;
- height: 1.5px;
- bottom: -4px;
- left: 0;
- // right: 0; /* Set right to cover the entire link */
- background-color: currentColor;
- border-radius: 20px;
- transition: transform 0.3s $easeOutCubic;
- }
-}
-
-%link_hover_underlined {
- @extend %link_default;
-
- /* Style for the ::after pseudo-element (initially hidden) */
- &::after {
- transform: scaleX(1);
- transform-origin: bottom left;
- }
-
- &:hover::after {
- transform: scaleX(0);
- transform-origin: bottom right;
- }
-}
-
-%link_hover_underless {
- @extend %link_default;
-
- &::after {
- transform: scaleX(0);
- transform-origin: bottom right;
- }
-
- &:hover::after {
- transform: scaleX(1);
- transform-origin: bottom left;
- }
-}
-
-%center_grid {
- display: grid;
- place-items: center;
-}
-
-%center_flex {
- display: flex;
- justify-content: center;
- align-items: center;
-}
\ No newline at end of file
diff --git a/wxt.config.js b/wxt.config.js
index 4675103..d96fb01 100644
--- a/wxt.config.js
+++ b/wxt.config.js
@@ -16,7 +16,7 @@ export default defineConfig({
api: 'modern-compiler',
quietDeps: true,
silenceDeprecations: ['import'],
- additionalData: `@import "@/styles/index.scss";`, // 👈 Auto-import SCSS
+ additionalData: `@import "@/styles/shared.scss";`, // 👈 Auto-import SCSS
},
},
},
From c7818442699a79af024d1e88d1219b5af4c1cf45 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Mon, 9 Jun 2025 19:44:45 +0200
Subject: [PATCH 2/3] refactor(scss): remove unused animations and refine
remaining styles
- Remove unused SCSS related to animations to declutter the codebase
- Refactor remaining animation-related SCSS for better readability and maintainability
- Ensure the changes do not impact existing functionality or visual consistency
Changes summary:
Removed unused animation-related SCSS and refactored the remaining styles, improving the cleanliness and maintainability of the codebase.
---
components/ThemeManager.vue | 18 +---------------
styles/abstract/_anims.scss | 42 +++++++++++++++++++++----------------
2 files changed, 25 insertions(+), 35 deletions(-)
diff --git a/components/ThemeManager.vue b/components/ThemeManager.vue
index 8eb2b7b..38549ed 100644
--- a/components/ThemeManager.vue
+++ b/components/ThemeManager.vue
@@ -74,9 +74,7 @@ const THEME_OPTIONS = [
diff --git a/styles/abstract/_anims.scss b/styles/abstract/_anims.scss
index 2443968..873f929 100644
--- a/styles/abstract/_anims.scss
+++ b/styles/abstract/_anims.scss
@@ -27,10 +27,10 @@ $animations: (
"to": (opacity: 1)),
fadeOut: ("from": (opacity: 1),
"to": (opacity: 0)),
- slideInLeft: ("from": (transform: translateX(-100%)),
- "to": (transform: translateX(0))),
slideInRight: ("from": (transform: translateX(100%)),
"to": (transform: translateX(0))),
+ /* slideInLeft: ("from": (transform: translateX(-100%)),
+ "to": (transform: translateX(0))),
slideInTop: ("from": (transform: translateY(-100%)),
"to": (transform: translateY(0))),
slideInBottom: ("from": (transform: translateY(100%)),
@@ -86,7 +86,7 @@ $animations: (
rollIn: ("from": (opacity: 0, transform: translate3d(-100%, 0, 0) rotate(-120deg)),
"to": (opacity: 1, transform: translate3d(0, 0, 0))),
rollOut: ("from": (opacity: 1),
- "to": (opacity: 0, transform: translate3d(100%, 0, 0) rotate(120deg)))
+ "to": (opacity: 0, transform: translate3d(100%, 0, 0) rotate(120deg))) */
);
// Loop Through Animations and Generate Classes
@@ -109,23 +109,29 @@ $animations: (
/* VUE ANIMS */
-.fade-enter-active,
-.fade-leave-active {
- transition: opacity 0.2s ease;
-}
+.fade {
-.fade-enter-from,
-.fade-leave-to {
- opacity: 0;
-}
+ &-enter-active,
+ &-leave-active {
+ transition: opacity 0.2s ease;
+ }
-.slideX-enter-active,
-.slideX-leave-active {
- transition: translate 0.2s ease-in-out, opacity 0.2s ease;
+ &-enter-from,
+ &-leave-to {
+ opacity: 0;
+ }
}
-.slideX-enter-from,
-.slideX-leave-to {
- translate: 5rem 0;
- opacity: 0;
+.slideX {
+
+ &-enter-active,
+ &-leave-active {
+ transition: transform 0.3s ease, opacity 0.3s ease;
+ }
+
+ &-enter-from,
+ &-leave-to {
+ transform: translateX(100%);
+ opacity: 0;
+ }
}
\ No newline at end of file
From 53c9acbdbade2a41af7649c344ef1d359db826b2 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Mon, 9 Jun 2025 20:52:16 +0200
Subject: [PATCH 3/3] refactor(transitions): rename and move to shared default
transition
---
components/ThemeManager.vue | 10 +++++-----
styles/abstract/_easing.scss | 6 +++++-
2 files changed, 10 insertions(+), 6 deletions(-)
diff --git a/components/ThemeManager.vue b/components/ThemeManager.vue
index 38549ed..a892265 100644
--- a/components/ThemeManager.vue
+++ b/components/ThemeManager.vue
@@ -74,7 +74,7 @@ const THEME_OPTIONS = [