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