Skip to content

Commit b9adc30

Browse files
itsmartashubitsmartashub
authored
Merge pull request #12 from itsmartashub/scss/shared-main-separation
Separate shared utilities and main styles for better modularity
2 parents 01d05e0 + 53c9acb commit b9adc30

10 files changed

Lines changed: 130 additions & 121 deletions

File tree

‎components/ThemeManager.vue‎

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,7 @@ const THEME_OPTIONS = [
7474
</script>
7575

7676
<style scoped lang="scss">
77-
// Performance variables - computed once, reused everywhere
78-
$transition-standard: 0.3s ease;
79-
$transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
77+
$trans: 0.3s ease;
8078
$border-accent: 1px solid hsla(var(--accent-hsl) / 0.2);
8179
$blur-backdrop: blur(1rem);
8280
@@ -99,7 +97,7 @@ $blur-backdrop: blur(1rem);
9997
background-image: var(--c-bg-gradient);
10098
backdrop-filter: $blur-backdrop;
10199
cursor: pointer;
102-
transition: transform $transition-standard, background $transition-standard, color $transition-standard;
100+
transition: transform $trans, background $trans, color $trans;
103101
width: var(--roller-size);
104102
height: var(--roller-size);
105103
@@ -128,7 +126,7 @@ $blur-backdrop: blur(1rem);
128126
opacity: 0;
129127
pointer-events: none;
130128
clip-path: polygon(0 0, 100% 0, 100% 0, 0% 0);
131-
transition: opacity $transition-standard, clip-path $transition-standard;
129+
transition: opacity $trans, clip-path $trans;
132130
133131
button {
134132
position: relative;
@@ -141,7 +139,7 @@ $blur-backdrop: blur(1rem);
141139
border-radius: 50vw;
142140
cursor: pointer;
143141
transform: scale(0);
144-
transition: transform $transition-bounce, color $transition-standard;
142+
transition: transform 0.3s $easeInOutBack, color $trans;
145143
146144
// Tooltip optimization
147145
&::after {
@@ -159,7 +157,7 @@ $blur-backdrop: blur(1rem);
159157
border-radius: 50vw;
160158
opacity: 0;
161159
transform: translate(-50%, 0%) scale(0);
162-
transition: opacity $transition-standard, transform $transition-standard;
160+
transition: opacity $trans, transform $trans;
163161
z-index: 2;
164162
pointer-events: none;
165163
}
@@ -192,18 +190,4 @@ $blur-backdrop: blur(1rem);
192190
}
193191
}
194192
}
195-
196-
// Transition component optimization
197-
.slideX {
198-
&-enter-active,
199-
&-leave-active {
200-
transition: transform $transition-standard, opacity $transition-standard;
201-
}
202-
203-
&-enter-from,
204-
&-leave-to {
205-
transform: translateX(100%);
206-
opacity: 0;
207-
}
208-
}
209193
</style>

‎entrypoints/content.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
// import '@/styles/index.scss'
2+
import '../styles/index.scss'
23
import { createApp } from 'vue'
4+
35
import ThemeManager from '@/components/ThemeManager.vue'
46
import { useThemeManager } from '@/composables/useThemeManager'
57

68
export default defineContentScript({
79
matches: ['*://chat.deepseek.com/*'],
8-
css: ['src/styles/index.scss'], // 👈 Use the same index.scss for content scripts
910

1011
async main(ctx) {
1112
// Force theme initialization before the UI mounts.

styles/shared/_anims.scss renamed to styles/abstract/_anims.scss

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ $animations: (
2727
"to": (opacity: 1)),
2828
fadeOut: ("from": (opacity: 1),
2929
"to": (opacity: 0)),
30-
slideInLeft: ("from": (transform: translateX(-100%)),
31-
"to": (transform: translateX(0))),
3230
slideInRight: ("from": (transform: translateX(100%)),
3331
"to": (transform: translateX(0))),
32+
/* slideInLeft: ("from": (transform: translateX(-100%)),
33+
"to": (transform: translateX(0))),
3434
slideInTop: ("from": (transform: translateY(-100%)),
3535
"to": (transform: translateY(0))),
3636
slideInBottom: ("from": (transform: translateY(100%)),
@@ -86,7 +86,7 @@ $animations: (
8686
rollIn: ("from": (opacity: 0, transform: translate3d(-100%, 0, 0) rotate(-120deg)),
8787
"to": (opacity: 1, transform: translate3d(0, 0, 0))),
8888
rollOut: ("from": (opacity: 1),
89-
"to": (opacity: 0, transform: translate3d(100%, 0, 0) rotate(120deg)))
89+
"to": (opacity: 0, transform: translate3d(100%, 0, 0) rotate(120deg))) */
9090
);
9191

9292
// Loop Through Animations and Generate Classes
@@ -109,23 +109,29 @@ $animations: (
109109

110110

111111
/* VUE ANIMS */
112-
.fade-enter-active,
113-
.fade-leave-active {
114-
transition: opacity 0.2s ease;
115-
}
112+
.fade {
116113

117-
.fade-enter-from,
118-
.fade-leave-to {
119-
opacity: 0;
120-
}
114+
&-enter-active,
115+
&-leave-active {
116+
transition: opacity 0.2s ease;
117+
}
121118

122-
.slideX-enter-active,
123-
.slideX-leave-active {
124-
transition: translate 0.2s ease-in-out, opacity 0.2s ease;
119+
&-enter-from,
120+
&-leave-to {
121+
opacity: 0;
122+
}
125123
}
126124

127-
.slideX-enter-from,
128-
.slideX-leave-to {
129-
translate: 5rem 0;
130-
opacity: 0;
125+
.slideX {
126+
127+
&-enter-active,
128+
&-leave-active {
129+
transition: transform 0.3s ease, opacity 0.3s ease;
130+
}
131+
132+
&-enter-from,
133+
&-leave-to {
134+
transform: translateX(100%);
135+
opacity: 0;
136+
}
131137
}

styles/shared/_easing.scss renamed to styles/abstract/_easing.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,8 @@ $easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86);
3636
/* Back */
3737
$easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
3838
$easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
39-
$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
39+
$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
40+
41+
42+
/* TRANSITIONS */
43+
$trans: 0.25s ease;

‎styles/abstract/_extends.scss‎

Lines changed: 63 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,66 @@
4949
line-height: 1 !important;
5050
padding: 0.32rem 0.6rem !important;
5151
backdrop-filter: blur(5px);
52-
}
52+
}
53+
54+
%link_default {
55+
position: relative;
56+
text-decoration: none;
57+
color: var(--c-accent) !important;
58+
// display: inline-block;
59+
transition: opacity 0.3s ease;
60+
61+
/* Style for the ::after pseudo-element (initially hidden) */
62+
&::after {
63+
content: '';
64+
position: absolute;
65+
width: 100%;
66+
height: 1.5px;
67+
bottom: -4px;
68+
left: 0;
69+
// right: 0; /* Set right to cover the entire link */
70+
background-color: currentColor;
71+
border-radius: 20px;
72+
transition: transform 0.3s $easeOutCubic;
73+
}
74+
}
75+
76+
%link_hover_underlined {
77+
@extend %link_default;
78+
79+
/* Style for the ::after pseudo-element (initially hidden) */
80+
&::after {
81+
transform: scaleX(1);
82+
transform-origin: bottom left;
83+
}
84+
85+
&:hover::after {
86+
transform: scaleX(0);
87+
transform-origin: bottom right;
88+
}
89+
}
90+
91+
%link_hover_underless {
92+
@extend %link_default;
93+
94+
&::after {
95+
transform: scaleX(0);
96+
transform-origin: bottom right;
97+
}
98+
99+
&:hover::after {
100+
transform: scaleX(1);
101+
transform-origin: bottom left;
102+
}
103+
}
104+
105+
// %center_grid {
106+
// display: grid;
107+
// place-items: center;
108+
// }
109+
110+
// %center_flex {
111+
// display: flex;
112+
// justify-content: center;
113+
// align-items: center;
114+
// }

‎styles/abstract/_index.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@import 'abstract/_bp';
2+
@import 'abstract/_ds';
3+
@import 'abstract/_root';
4+
@import 'abstract/_light';
5+
@import 'abstract/_dark';
6+
@import 'abstract/_easing';
7+
@import 'abstract/_anims';
8+
@import 'abstract/_extends';
9+
@import 'abstract/_mixins';

‎styles/index.scss‎

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
@import 'abstract/_bp';
2-
@import 'abstract/_ds';
3-
@import 'abstract/_root';
4-
// @import 'abstract/_vars';
5-
@import 'abstract/_light';
6-
@import 'abstract/_dark';
7-
@import 'shared/_easing';
8-
@import 'shared/_anims';
9-
@import 'shared/_extends';
10-
@import 'abstract/_extends';
11-
@import 'abstract/_mixins';
1+
// @import 'abstract/_bp';
2+
// @import 'abstract/_ds';
3+
// @import 'abstract/_root';
4+
// @import 'abstract/_light';
5+
// @import 'abstract/_dark';
6+
// @import 'abstract/_easing';
7+
// @import 'abstract/_anims';
8+
// @import 'abstract/_extends';
9+
// @import 'abstract/_mixins';
1210

1311
// @import 'dev/_mixins';
1412

@@ -36,9 +34,4 @@
3634
@import 'elements/_right--sticky';
3735
@import 'elements/_right--textarea';
3836

39-
@import 'deepstyled/index';
40-
41-
/* DS */
42-
@import 'abstract/_light.scss';
43-
@import 'abstract/_dark.scss';
44-
@import 'abstract/_ds.scss';
37+
@import 'deepstyled/index';

‎styles/shared.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@import 'abstract/_bp';
2+
@import 'abstract/_ds';
3+
@import 'abstract/_root';
4+
@import 'abstract/_light';
5+
@import 'abstract/_dark';
6+
@import 'abstract/_easing';
7+
@import 'abstract/_anims';
8+
@import 'abstract/_extends';
9+
@import 'abstract/_mixins';
10+
11+
@import 'dev/_mixins';

‎styles/shared/_extends.scss‎

Lines changed: 0 additions & 61 deletions
This file was deleted.

‎wxt.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default defineConfig({
1616
api: 'modern-compiler',
1717
quietDeps: true,
1818
silenceDeprecations: ['import'],
19-
additionalData: `@import "@/styles/index.scss";`, // 👈 Auto-import SCSS
19+
additionalData: `@import "@/styles/shared.scss";`, // 👈 Auto-import SCSS
2020
},
2121
},
2222
},

0 commit comments

Comments
 (0)