pankan
/
jobs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

warning fixes

This commit is contained in:
Kiran Surendran Pankan 2025-04-02 15:49:25 +05:30
parent e4235df3dd
commit 68a7bd526f
3 changed files with 38 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/assets/scss/main.scss
View File

@ -1,13 +1,13 @@
@import './variables.scss'; @use './variables.scss' as vars;
// Reset and base styles // Reset and base styles
:root { :root {
// Global transition for theme switching // Global transition for theme switching
--theme-transition-duration: 0.3s; --theme-transition-duration: 0.3s;
--theme-transition-timing: ease; --theme-transition-timing: ease;
font-family: $font-family; font-family: vars.$font-family;
line-height: $line-height; line-height: vars.$line-height;
font-weight: $font-weight-normal; font-weight: vars.$font-weight-normal;
font-synthesis: none; font-synthesis: none;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
@ -18,16 +18,16 @@
// Default dark theme // Default dark theme
:root, .dark-mode { :root, .dark-mode {
color-scheme: dark; color-scheme: dark;
color: $text-color-dark; color: vars.$text-color-dark;
background-color: $bg-color-dark; background-color: vars.$bg-color-dark;
// CSS variables for theming // CSS variables for theming
--primary-color: #{$primary-color}; --primary-color: #{vars.$primary-color};
--primary-hover-color: #{$primary-hover-color}; --primary-hover-color: #{vars.$primary-hover-color};
--text-color: #{$text-color-dark}; --text-color: #{vars.$text-color-dark};
--text-color-secondary: #bbb; --text-color-secondary: #bbb;
--text-color-tertiary: #999; --text-color-tertiary: #999;
--bg-color: #{$bg-color-dark}; --bg-color: #{vars.$bg-color-dark};
--sidebar-bg: #1e1e1e; --sidebar-bg: #1e1e1e;
--sidebar-border: #333; --sidebar-border: #333;
--card-bg: #2a2a2a; --card-bg: #2a2a2a;
@ -37,12 +37,12 @@
} }
a { a {
font-weight: $font-weight-medium; font-weight: vars.$font-weight-medium;
color: $primary-color; color: vars.$primary-color;
text-decoration: inherit; text-decoration: inherit;
&:hover { &:hover {
color: $primary-hover-color; color: vars.$primary-hover-color;
} }
} }
@ -64,19 +64,19 @@ button {
border: 1px solid transparent; border: 1px solid transparent;
padding: 0.6em 1.2em; padding: 0.6em 1.2em;
font-size: 1em; font-size: 1em;
font-weight: $font-weight-medium; font-weight: vars.$font-weight-medium;
font-family: inherit; font-family: inherit;
background-color: $button-bg-dark; background-color: vars.$button-bg-dark;
cursor: pointer; cursor: pointer;
transition: border-color 0.25s; transition: border-color 0.25s;
&:hover { &:hover {
border-color: $primary-color; border-color: vars.$primary-color;
} }
} }
#app { #app {
max-width: $max-content-width; max-width: vars.$max-content-width;
margin: 0 auto; margin: 0 auto;
padding: 1rem; padding: 1rem;
} }
@ -84,16 +84,16 @@ button {
// Light mode theme // Light mode theme
.light-mode { .light-mode {
color-scheme: light; color-scheme: light;
color: $text-color-light; color: vars.$text-color-light;
background-color: $bg-color-light; background-color: vars.$bg-color-light;
// Update CSS variables for light mode // Update CSS variables for light mode
--primary-color: #{$primary-color}; --primary-color: #{vars.$primary-color};
--primary-hover-color: #{$primary-hover-color}; --primary-hover-color: #{vars.$primary-hover-color};
--text-color: #{$text-color-light}; --text-color: #{vars.$text-color-light};
--text-color-secondary: #555; --text-color-secondary: #555;
--text-color-tertiary: #777; --text-color-tertiary: #777;
--bg-color: #{$bg-color-light}; --bg-color: #{vars.$bg-color-light};
--sidebar-bg: #fff; --sidebar-bg: #fff;
--sidebar-border: #eee; --sidebar-border: #eee;
--card-bg: #fff; --card-bg: #fff;
@ -102,23 +102,23 @@ button {
--primary-color-light: rgba(52, 152, 219, 0.1); --primary-color-light: rgba(52, 152, 219, 0.1);
button { button {
background-color: $button-bg-light; background-color: vars.$button-bg-light;
} }
} }
// // System preference override // // System preference override
// @media (prefers-color-scheme: light) { // @media (prefers-color-scheme: light) {
// :root:not(.dark-mode):not(.light-mode) { // :root:not(.dark-mode):not(.light-mode) {
// color: $text-color-light; // color: vars.$text-color-light;
// background-color: $bg-color-light; // background-color: vars.$bg-color-light;
// // Update CSS variables for light mode // // Update CSS variables for light mode
// --primary-color: #{$primary-color}; // --primary-color: #{vars.$primary-color};
// --primary-hover-color: #{$primary-hover-color}; // --primary-hover-color: #{vars.$primary-hover-color};
// --text-color: #{$text-color-light}; // --text-color: #{vars.$text-color-light};
// --text-color-secondary: #555; // --text-color-secondary: #555;
// --text-color-tertiary: #777; // --text-color-tertiary: #777;
// --bg-color: #{$bg-color-light}; // --bg-color: #{vars.$bg-color-light};
// --sidebar-bg: #fff; // --sidebar-bg: #fff;
// --sidebar-border: #eee; // --sidebar-border: #eee;
// --card-bg: #fff; // --card-bg: #fff;
@ -128,7 +128,7 @@ button {
// } // }
// :root:not(.dark-mode):not(.light-mode) button { // :root:not(.dark-mode):not(.light-mode) button {
// background-color: $button-bg-light; // background-color: vars.$button-bg-light;
// } // }
// } // }
.breadcrumb { .breadcrumb {

6
src/components/JobDetail.vue
View File

@ -932,6 +932,8 @@ onMounted(() => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@use 'sass:color';
.job-detail-container { .job-detail-container {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
@ -967,7 +969,7 @@ onMounted(() => {
font-weight: 500; font-weight: 500;
&:hover { &:hover {
background-color: darken(#3498db, 10%); background-color: color.adjust(#3498db, $lightness: -10%);
} }
} }
} }
@ -1158,7 +1160,7 @@ onMounted(() => {
transition: all 0.2s; transition: all 0.2s;
&:hover { &:hover {
background-color: var(--primary-hover-color, #2980b9); background-color: color.adjust(#3498db, $lightness: -10%);
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} }

4
src/components/Profile.vue
View File

@ -393,6 +393,8 @@ const totalExperience = computed(() => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@use 'sass:color';
/* Global transition properties for smoother theme switching */ /* Global transition properties for smoother theme switching */
.profile-container * { .profile-container * {
transition: color var(--theme-transition-duration) var(--theme-transition-timing), transition: color var(--theme-transition-duration) var(--theme-transition-timing),
@ -540,7 +542,7 @@ const totalExperience = computed(() => {
border: none; border: none;
&:hover { &:hover {
background-color: darken(#3498db, 10%); background-color: color.adjust(#3498db, $lightness: -10%);
} }
} }