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:07:06 +02:00
parent 259adf53f6
commit 7af148058e
15 changed files with 354 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

25
app/assets/styles/button.css
View file

@ -1,7 +1,7 @@
.Button {
--padding: .2rem;
--background: var(--color-main);
--color: var(--color-white);
--background: var(--color-gradient-main-dark);
--color: var(--color-lightest);
--background-hover: var(--color-main-dark);
position: relative;
@ -16,20 +16,27 @@
background: var(--background);
color: var(--color);
&.transparent {
--background: transparent;
box-shadow: none;
padding: .5em 1.5em;
border-radius: var(--radius-default);
}
&.raised {
box-shadow: var(--box-shadow-z2);
padding: .5em 1.5em;
border-radius: var(--radius-default);
&.danger {
--background: var(--color-red);
--color: var(--color-white);
--background: var(--color-gradient-error);
--color: var(--color-lightest);
}
}
&.text {
--background: transparent;
--color: var(--color-black);
--color: var(--color-darkest);
padding: .5em 1.5em;
border-radius: var(--radius-default);
@ -38,11 +45,11 @@
}
&.white {
--color: var(--color-white);
--color: var(--color-lightest);
}
&.danger {
--color: var(--color-red);
--color: var(--color-error);
&:hover {
--background: rgba(255, 0, 0, 0.1);
@ -71,9 +78,9 @@
}
&.cta.white {
--background: var(--color-white);
--background: var(--color-lightest);
--color: var(--color-main);
--background-hover: var(--color-grey);
--background-hover: var(--color-light);
}
&.icon-button {

12
app/assets/styles/buttonGroup.css
View file

@ -1,9 +1,13 @@
.ButtonGroup {
display: flex;
background: var(--color-main);
border-radius: var(--radius-default);
overflow: hidden;
box-shadow: var(--box-shadow-z2);
& button {
--color: var(--color-white-transparent);
--background: var(--color-main);
--color: var(--color-light);
--background: var(--color-main-darkest);
all: unset;
display: flex;
align-items: center;
@ -17,8 +21,8 @@
transition: var(--transition-default);
&.active {
--color: var(--color-white);
--background: var(--color-main-dark);
--color: var(--color-darkest);
--background: var(--color-gradient-main);
}
&:first-child {

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

@ -1,9 +1,9 @@
.Footer {
background: var(--color-main-dark);
background: var(--color-main-darkest);
padding: 1rem;
& h4 {
color: var(--color-white);
color: var(--color-lightest);
text-align: center;
margin-bottom: 1rem;
}
@ -12,7 +12,7 @@
display: flex;
gap: 1rem;
justify-content: space-between;
color: var(--color-white-transparent);
color: var(--color-light);
}
& .socials {
@ -33,7 +33,7 @@
gap: 1rem;
& a {
color: var(--color-white);
color: var(--color-lightest);
text-decoration: none;
}
}

12
app/assets/styles/formInput.css
View file

@ -1,12 +1,12 @@
.Input {
&.error {
& .input-wrapper {
border-color: var(--color-red);
border-color: var(--color-error);
outline-width: 2px;
}
& span {
color: var(--color-red);
color: var(--color-error);
}
}
@ -17,11 +17,11 @@
& .input-wrapper {
position: relative;
flex: 25% 1 0;
border: 2px solid var(--color-blue);
border: 2px solid var(--color-main-dark);
border-radius: var(--radius-default);
overflow: hidden;
transition: var(--transition-default);
outline: 0 solid var(--color-white);
outline: 0 solid var(--color-lightest);
& label {
position: absolute;
@ -35,7 +35,7 @@
all: unset;
width: calc(100% - 1rem);
padding: 1.3rem .5rem .5rem .5rem;
background: var(--color-white);
background: var(--color-lightest);
&[type="number"] {
text-align: right;
@ -45,7 +45,7 @@
& input:focus,
& input:not(:placeholder-shown) {
& + label {
color: var(--color-main);
color: var(--color-main-dark);
}
}
}

48
app/assets/styles/general.css
View file

@ -1,29 +1,50 @@
:root {
--padding-default: 1rem;
--padding-small: .5rem;
--radius-default: 5px;
--radius-default: 3px;
--transition-default: 150ms;
--color-white: white;
--color-white-transparent: rgba(255, 255, 255, 0.67);
--color-red: #cc0001;
--color-blue-light: #61a7fd;
--color-blue: #2e86de;
--color-blue-dark: #1b4b7f;
--color-grey: #c7c7c7;
--color-black: #333;
--color-success: #328104;
--color-error: #A20606;
--color-blue-light: #0DDCE7;
--color-blue: #05B0FF;
--color-blue-dark: #0266F2;
--color-blue-darkest: #013174;
--color-darkest: #292929;
--color-dark: #404040;
--color-middle: #707070;
--color-light: #E0E0E6;
--color-lightest: #FAFAFF;
--color-green-light: #05FFC5;
--color-green: #02F276;
--color-green-dark: #09DC33;
--color-green-darkest: #07B029;
--color-green-darkest-most: #157C2A;
--color-orange: #DE9C2F;
--color-main: var(--color-blue);
--color-main-light: var(--color-blue-light);
--color-main-dark: var(--color-blue-dark);
--color-main-darkest: var(--color-blue-darkest);
--color-accent: var(--color-orange);
--color-accent: var(--color-green);
--color-accent-light: var(--color-green-light);
--color-accent-dark: var(--color-green-dark);
--color-accent-darkest: var(--color-green-darkest);
--color-gradient-main: linear-gradient(to bottom right, var(--color-main), var(--color-main-light));
--color-gradient-main-dark: linear-gradient(to bottom right, var(--color-main-darkest), var(--color-main-dark));
--color-gradient-accent: linear-gradient(to bottom right, var(--color-accent), var(--color-accent-light));
--color-gradient-accent-dark: linear-gradient(to bottom right, var(--color-accent-darkest), var(--color-accent-dark));
--color-gradient-error: linear-gradient(to bottom right, #B00707, #DC0909);
--color-gradient-error-reverse: linear-gradient(to top left, #B00707, #DC0909);
--box-shadow-upper: 0 -3px 6px rgba(0,0,0,0.16), 0 -3px 6px rgba(0,0,0,0.23);
--box-shadow-z2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
--box-shadow-inset: inset 0 3px 6px rgba(0,0,0,0.16), inset 0 3px 6px rgba(0,0,0,0.23);
}
* {
@ -79,7 +100,6 @@ body {
.card {
overflow: hidden;
border-radius: var(--radius-default);
border: 1px solid var(--color-main);
box-shadow: var(--box-shadow-z2);
}
@ -108,7 +128,7 @@ body {
}
.text-white {
color: var(--color-white);
color: var(--color-lightest);
}
.bg-main {
@ -136,7 +156,7 @@ body {
}
.bg-white {
background: var(--color-white);
background: var(--color-lightest);
}
.padding {

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

@ -3,16 +3,18 @@
align-items: center;
justify-content: space-between;
padding: var(--padding-default);
background-color: var(--color-white);
background-color: var(--color-lightest);
box-shadow: var(--box-shadow-z2);
color: var(--color-darkest);
position: sticky;
top: 0;
z-index: 1;
& strong {
font-size: 2em;
& span {
color: var(--color-main);
color: var(--color-main-dark);
}
}
@ -38,7 +40,7 @@
top: 0;
height: 100dvh;
transition: 150ms ease-in-out;
background: var(--color-white);
background: var(--color-lightest);
font-size: 2em;
align-items: end;
z-index: 100;

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

@ -1,72 +1,108 @@
.PriceCard {
position: relative;
overflow: hidden;
width: 100%;
transition: 150ms;
opacity: 1;
color: var(--color-white);
gap: 1rem;
padding: 1rem;
color: var(--color-main-dark);
background: black;
&.deleting {
max-height: 0;
opacity: 0;
}
& > header {
.bottom {
position: absolute;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
& .icon {
font-size: 1rem;
cursor: pointer;
}
}
& .name-price {
display: flex;
gap: .5rem;
& > span:nth-child(1) {
font-weight: bold;
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
& > span:nth-child(2)::before {
content: '•';
margin-right: .5rem;
opacity: .5;
}
}
& .wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
gap: 1rem;
justify-content: space-between;
height: 100%;
& > .info {
flex-grow: 0;
& > * {
flex-grow: 1;
color: var(--color-lightest);
font-size: 2rem;
display: flex;
align-items: center;
gap: .25rem;
& > .icon {
font-size: 2rem;
padding: .2rem;
& .icon {
filter: drop-shadow(1px 3px 1px rgb(0 0 0 / 0.4));
}
}
& > .price {
display: flex;
align-items: center;
gap: .5rem;
& .bg-edit {
background: var(--color-gradient-main-dark);
padding: 2rem;
text-align: left;
}
& .bg-delete {
background: var(--color-gradient-error-reverse);
padding: 2rem;
text-align: right;
justify-content: flex-end;
}
}
.top {
position: relative;
background: var(--color-lightest);
z-index: 2;
gap: 1rem;
padding: 1rem;
border-radius: var(--radius-default);
& > header {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--color-darkest);
& .icon {
font-size: 1rem;
cursor: pointer;
}
}
& > .pro {
font-size: .6rem;
& .name-price {
display: flex;
gap: .5rem;
& > span:nth-child(1) {
font-weight: bold;
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
& > span:nth-child(2)::before {
content: '•';
margin-right: .5rem;
opacity: .5;
}
}
& .wrapper {
display: flex;
flex-direction: row;
width: 100%;
gap: 1rem;
justify-content: space-between;
& > .info {
flex-grow: 0;
align-items: center;
gap: .25rem;
& > .price {
display: flex;
align-items: center;
gap: .5rem;
}
& > .pro {
font-size: .6rem;
font-weight: bold;
opacity: .7;
}
}
}
}

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

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