jare2473/studentportalen-prototyping
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

eriks-booking-variant #6

Merged
jare2473 merged 13 commits from eriks-booking-variant into main 2025-09-22 11:16:13 +02:00
Conversation 0 Commits 13 Files Changed 29 +37 -16
1 changed files with 37 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 32098cbacd - Show all commits

53
my-app/src/components/ui/Card.module.css
View File

@@ -3,11 +3,12 @@
flex-direction: column;
gap: 1.2rem;
background: var(--bg-primary);
border: 1px solid #E3E3E3;
border: 1px solid #E0E0E0;
overflow: hidden;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(104, 104, 104, 0.15);
/*box-shadow: 0 2px 8px rgba(104, 104, 104, 0.15);*/
box-shadow: 0 0 #0000, 0 0 #0000, 0px 4px 12px 0px rgba(0,0,0,0.12);
text-decoration: none;
color: var(--text-primary);
/*aspect-ratio: 1 / 1;*/
@@ -17,8 +18,8 @@
@media (hover: hover) {
.card:hover {
border-color: #D5D5D6;
box-shadow: 0 4px 16px rgba(104, 104, 104, 0.25);
border-color: #CECECE;
box-shadow: 0 0 #0000, 0 0 #0000, 0px 12px 20px 0px rgba(10,18,36,0.10);
transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
}
@@ -33,20 +34,24 @@
.actionButton:hover {
background: #F5F5F5;
border-color: #D7D7D7;
border-color: #CECECE;
}
.card:active .image {
filter: grayscale(1);
}
.card:active .imageContainer::after {
opacity: 1;
}
}
.card:active {
background-color: #FBFBFB;
.card:active,
.card:focus {
/*background-color: #FBFBFB;*/
}
.card:active .image {
filter: grayscale(1);
}
.card:active .imageContainer::after {
opacity: 1;
}
.card:focus-visible {
outline: 2px solid var(--color-primary);
@@ -127,10 +132,16 @@
height: fit-content;
}
.actionButton:focus {
.actionButton:focus{
background-color: #E8E8E8;
}
.actionButton:active {
background: #F5F5F5;
border-color: #D7D7D7;
border-color: #CECECE;
}
.actionButton:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
@@ -143,6 +154,7 @@
.card {
background: #151516;
border: 1px solid #2f2e2d;
box-shadow: none;
}
.header {
@@ -158,12 +170,17 @@
border-color: #444341;
}
.actionButton:active {
background: #202022;
border-color: #696763;
}
@media (hover: hover) {
.card:hover {
border-color: #4a4a4a;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
background-color: rgb(23, 23, 25);
/*box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);*/
/*background-color: rgb(23, 23, 25);*/
transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@@ -171,5 +188,9 @@
background: #202022;
border-color: #696763;
}
.actionButton:focus {
background-color: #262628;
}
}
}