amiirkhl/my-protfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(projects): unify carousel navigation states

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-09-06 22:04:50 +03:30
parent 568716c976
commit ad5a7fc814
1 changed files with 19 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/ProjectsSection.module.css
View File

@@ -35,16 +35,12 @@
transform var(--motion-duration-fast) var(--motion-ease-out); transform var(--motion-duration-fast) var(--motion-ease-out);
} }
.navButtonPrevious { .navButtonPrevious,
.navButtonNext {
background: transparent; background: transparent;
color: var(--color-blue-600); color: var(--color-blue-600);
} }
.navButtonNext {
background: var(--color-blue-600);
color: var(--color-blue-white);
}
.navButton:focus-visible { .navButton:focus-visible {
outline: 3px solid var(--focus-ring); outline: 3px solid var(--focus-ring);
outline-offset: 3px; outline-offset: 3px;
@@ -55,12 +51,20 @@
opacity: 0.36; opacity: 0.36;
} }
[data-theme="dark"] .navButtonPrevious { [data-theme="dark"] .navButton {
border-color: var(--color-blue-white); border-color: var(--color-blue-white);
background: transparent;
color: var(--color-blue-white); color: var(--color-blue-white);
} }
[data-theme="dark"] .navButtonNext { .navButton:active:not(:disabled) {
border-color: var(--color-blue-700);
background: var(--color-blue-600);
color: var(--color-blue-white);
transform: scale(0.96);
}
[data-theme="dark"] .navButton:active:not(:disabled) {
border-color: var(--color-blue-white); border-color: var(--color-blue-white);
background: var(--color-blue-white); background: var(--color-blue-white);
color: var(--color-blue-950); color: var(--color-blue-950);
@@ -457,16 +461,10 @@
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
.navButton:hover:not(:disabled) { .navButton:hover:not(:disabled) {
transform: translateY(-1px);
}
.navButtonPrevious:hover:not(:disabled) {
background: var(--color-blue-200);
}
.navButtonNext:hover:not(:disabled) {
border-color: var(--color-blue-700); border-color: var(--color-blue-700);
background: var(--color-blue-700); background: var(--color-blue-600);
color: var(--color-blue-white);
transform: translateY(-1px);
} }
.card:hover { .card:hover {
@@ -488,11 +486,9 @@
color: var(--color-blue-100); color: var(--color-blue-100);
} }
[data-theme="dark"] .navButtonPrevious:hover:not(:disabled) { [data-theme="dark"] .navButton:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.12); border-color: var(--color-blue-white);
} background: var(--color-blue-white);
color: var(--color-blue-950);
[data-theme="dark"] .navButtonNext:hover:not(:disabled) {
background: var(--color-blue-200);
} }
} }