webfussel/propapier
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: new design (wip)

Browse source 
New design as WIP, swipe controls
This commit is contained in:
Fiona Lena Urban 2025-05-10 11:24:46 +02:00
parent 3200c29c2f
commit 192b031140
4 changed files with 7 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/assets/styles/footer.css
View file

@ -1,5 +1,5 @@
.Footer { .Footer {
background: var(--color-main-darkest); background: var(--color-darkest);
padding: 1rem; padding: 1rem;
& h4 { & h4 {

3
app/assets/styles/header.css
View file

@ -3,7 +3,8 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: var(--padding-default); padding: var(--padding-default);
background-color: var(--color-lightest); background-color: rgba(255 255 255 / .8);
backdrop-filter: blur(10px);
box-shadow: var(--box-shadow-z2); box-shadow: var(--box-shadow-z2);
color: var(--color-darkest); color: var(--color-darkest);
position: sticky; position: sticky;

6
app/assets/styles/priceCard.css
View file

@ -71,7 +71,7 @@
& > span:nth-child(1) { & > span:nth-child(1) {
font-weight: bold; font-weight: bold;
max-width: 150px; max-width: 210px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -80,7 +80,7 @@
& > span:nth-child(2)::before { & > span:nth-child(2)::before {
content: '•'; content: '•';
margin-right: .5rem; margin-right: .5rem;
opacity: .5; color: var(--color-middle);
} }
} }
@ -105,7 +105,7 @@
& > .pro { & > .pro {
font-size: .6rem; font-size: .6rem;
font-weight: bold; font-weight: bold;
opacity: .7; color: var(--color-middle);
} }
} }
} }

2
app/assets/styles/toolbar.css
View file

@ -1,7 +1,7 @@
.Toolbar { .Toolbar {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
background: var(--color-gradient-main-dark); background: var(--color-main-darkest);
position: sticky; position: sticky;
bottom: 0; bottom: 0;
box-shadow: var(--box-shadow-upper); box-shadow: var(--box-shadow-upper);