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

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 {