diff --git a/app/app.vue b/app/app.vue index 86f6369..a738821 100755 --- a/app/app.vue +++ b/app/app.vue @@ -1,7 +1,11 @@ + \ No newline at end of file diff --git a/app/assets/styles/fonts.css b/app/assets/styles/fonts.css deleted file mode 100755 index e4a4fec..0000000 --- a/app/assets/styles/fonts.css +++ /dev/null @@ -1,24 +0,0 @@ -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 400; - font-stretch: 100%; - font-display: swap; - src: url('/fonts/opensans.woff2') format('woff2'); -} - -@font-face { - font-family: 'Roboto Condensed'; - font-style: normal; - font-weight: 300; - font-display: swap; - src: url('/fonts/roboto_con_reg.woff2') format('woff2'); -} - -@font-face { - font-family: 'Roboto Condensed'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('/fonts/roboto_con_bold.woff2') format('woff2'); -} diff --git a/app/assets/styles/form/input.css b/app/assets/styles/form/input.css deleted file mode 100755 index 3d9c8a0..0000000 --- a/app/assets/styles/form/input.css +++ /dev/null @@ -1,52 +0,0 @@ -.Input { - &.error { - & .input-wrapper { - border-color: var(--color-error); - outline-width: 2px; - } - - & span { - color: var(--color-error); - } - } - - & span { - font-size: .65em; - } - - & .input-wrapper { - position: relative; - flex: 25% 1 0; - border: 2px solid var(--color-main-dark); - border-radius: var(--radius-default); - overflow: hidden; - transition: var(--transition-default); - outline: 0 solid var(--color-lightest); - - & label { - position: absolute; - font-size: .8em; - top: .3rem; - left: .5rem; - transition: var(--transition-default); - } - - & input { - all: unset; - width: calc(100% - 1rem); - padding: 1.3rem .5rem .5rem .5rem; - background: var(--color-lightest); - - &[type="number"] { - text-align: right; - } - } - - & input:focus, - & input:not(:placeholder-shown) { - & + label { - color: var(--color-main-dark); - } - } - } -} \ No newline at end of file diff --git a/app/assets/styles/form/textfield.css b/app/assets/styles/form/textfield.css new file mode 100755 index 0000000..c46fd55 --- /dev/null +++ b/app/assets/styles/form/textfield.css @@ -0,0 +1,66 @@ +.TextField { + --border-color: var(--color-light); + --label-color: var(--color-middle); + --label-position-top: 0.4em; + --label-font-size: 1rem; + --icon-color: var(--color-main-dark); + --message-color: var(--color-middle); + + position: relative; + flex: 25% 1 0; + + &:focus-within { + --border-color: var(--color-main-dark); + } + + &:focus-within, + &:has(input:not(:placeholder-shown)) { + --icon-color: var(--color-main-dark); + --label-color: var(--color-main-dark); + --label-position-top: -11px; + --label-font-size: 0.8rem; + } + + &.error { + --label-color: var(--color-error); + --icon-color: var(--color-error); + --border-color: var(--color-error); + --message-color: var(--color-error); + } + + & .wrapper { + display: flex; + align-items: center; + padding: 0.1rem 0.5rem; + border: 1px solid var(--border-color); + border-radius: var(--radius-default); + } + + & label { + position: absolute; + background: var(--color-lightest); + padding: 0.2rem; + left: 1.8rem; + color: var(--label-color); + top: var(--label-position-top); + font-size: var(--label-font-size); + transition: var(--transition-default); + } + + & .icon { + color: var(--icon-color); + } + + & input { + all: unset; + padding: 0.5rem; + font-size: 1rem; + width: 100%; + flex: 25% 1 0; + } + + & span { + color: var(--message-color); + font-size: 0.6rem; + } +} diff --git a/app/assets/styles/general.css b/app/assets/styles/general.css index 5c77913..f752aa8 100755 --- a/app/assets/styles/general.css +++ b/app/assets/styles/general.css @@ -1,181 +1,208 @@ :root { - --padding-default: 1rem; - --padding-small: .5rem; - --radius-default: 3px; - --transition-default: 150ms; + --padding-default: 1rem; + --padding-small: 0.5rem; + --radius-default: 3px; + --transition-default: 150ms; - --color-success: #328104; - --color-error: #A20606; - --color-blue-light: #0DDCE7; - --color-blue: #05B0FF; - --color-blue-dark: #0266F2; - --color-blue-darkest: #013174; + --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-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-green-light: #05ffc5; + --color-green: #02f276; + --color-green-dark: #09dc33; + --color-green-darkest: #07b029; + --color-green-darkest-most: #157c2a; + --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-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-green); + --color-accent-light: var(--color-green-light); + --color-accent-dark: var(--color-green-dark); + --color-accent-darkest: var(--color-green-darkest); - --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); + --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); } * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } html, body { - height: 100%; - overflow-x: hidden; - font-family: sans-serif; - background: var(--color-main-darkest); + height: 100%; + overflow-x: hidden; + font-family: sans-serif; + background: var(--color-main-darkest); } .dot { - --size: 10px; - width: var(--size); - height: var(--size); - top: 5px; - right: 25%; - border-radius: 50%; - background-color: var(--color-accent); - display: inline-block; - margin-right: 0.5rem; - position: absolute; - box-shadow: var(--box-shadow-z2); - scale: 0; - transition: var(--transition-default); + --size: 10px; + width: var(--size); + height: var(--size); + top: 5px; + right: 25%; + border-radius: 50%; + background-color: var(--color-accent); + display: inline-block; + margin-right: 0.5rem; + position: absolute; + box-shadow: var(--box-shadow-z2); + scale: 0; + transition: var(--transition-default); - &.visible { - scale: 1; - animation: pulse 1s infinite; - } + &.visible { + scale: 1; + animation: pulse 1s infinite; + } } @keyframes pulse { - 0% { - transform: scale(0.95); - box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); - } - 70% { - transform: scale(1); - box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); - } + 0% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); + } + 70% { + transform: scale(1); + box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); + } - 100% { - transform: scale(0.95); - box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); - } + 100% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); + } } .card { - overflow: hidden; - border-radius: var(--radius-default); - box-shadow: var(--box-shadow-z2); + overflow: hidden; + border-radius: var(--radius-default); + box-shadow: var(--box-shadow-z2); } .flex-col { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .flex-row { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } .text-white { - color: var(--color-lightest); + color: var(--color-lightest); } .bg-main { - background-color: var(--color-main); + background-color: var(--color-main); } .bg-main-hover:hover { - background-color: var(--color-main); + background-color: var(--color-main); } .bg-main-dark { - background-color: var(--color-main-dark); + background-color: var(--color-main-dark); } .bg-main-dark-hover:hover { - background-color: var(--color-main-dark); + background-color: var(--color-main-dark); } .gap-default { - gap: 1rem; + gap: 1rem; } .bg-blue { - background: var(--color-blue); + background: var(--color-blue); } .bg-white { - background: var(--color-lightest); + background: var(--color-lightest); } .padding { - gap: 1rem; - padding: var(--padding-default); + gap: 1rem; + padding: var(--padding-default); } .padding-small { - gap: 1rem; - padding: var(--padding-small); + gap: 1rem; + padding: var(--padding-small); +} + +.roboto-condensed { + font-family: "Roboto Condensed", sans-serif; +} + +.roboto { + font-family: "Roboto", sans-serif; +} + +.open-sans { + font-family: "Open Sans", sans-serif; +} + +.grow { + flex-grow: 1; + height: 10px; } dialog { - top: 50%; - left: 50%; - width: 100vw; - transform: translate(-50%, -50%); - border: none; - border-radius: var(--radius-default); + top: 50%; + left: 50%; + width: 100vw; + transform: translate(-50%, -50%); + border: none; + border-radius: var(--radius-default); + background: var(--color-lightest); + font-size: 1rem; - font-size: 1rem; + & > .wrapper { + display: flex; + flex-direction: column; + gap: 1rem; + } - & header { - justify-content: space-between; - align-items: center; - } + & header { + justify-content: space-between; + align-items: center; + padding: 1rem 1rem 0; + } - & footer { - justify-content: space-between; - } + main { + padding: 0 1rem; + } - &::backdrop { - background: rgba(0, 0, 0, 0.5); - } -} \ No newline at end of file + & footer { + justify-content: space-between; + padding: 0 1rem 1rem; + } + + &::backdrop { + background: rgba(0, 0, 0, 0.5); + } +} diff --git a/app/assets/styles/header.css b/app/assets/styles/header.css index 43b0c3f..da5d3a5 100755 --- a/app/assets/styles/header.css +++ b/app/assets/styles/header.css @@ -16,7 +16,6 @@ display: flex; align-items: center; justify-content: space-between; - font-family: 'Roboto', sans-serif; font-weight: bold; & a { diff --git a/app/assets/styles/page.css b/app/assets/styles/page.css index eb9426d..a9aaedf 100644 --- a/app/assets/styles/page.css +++ b/app/assets/styles/page.css @@ -1,3 +1,18 @@ +.page-wrapper { + display: flex; + flex-direction: column; + height: 100vh; + + & .page { + flex-grow: 1; + + & .nuxt-page-wrapper { + height: 100%; + justify-content: space-between; + } + } +} + .filter-bar { background: var(--color-lightest); display: flex; @@ -25,16 +40,24 @@ z-index: 100; & p { - font-family: 'Roboto Condensed', sans-serif; - font-weight: lighter; + font-weight: 100; color: var(--color-lightest); } } .content { - min-height: 100dvh; border-top-left-radius: 15px; border-top-right-radius: 15px; overflow: hidden; background: var(--color-lightest); + height: 100%; +} + +.info-text { + padding: 0 1rem; + text-align: center; + width: 100%; + top: 40%; + transform: translateY(-50%); + position: absolute; } \ No newline at end of file diff --git a/app/assets/styles/priceCard.css b/app/assets/styles/priceCard.css index a922b25..b108971 100755 --- a/app/assets/styles/priceCard.css +++ b/app/assets/styles/priceCard.css @@ -3,7 +3,6 @@ width: 100%; color: var(--color-darkest); border-bottom: 1px solid var(--color-light); - font-family: 'Roboto', sans-serif; .bottom { position: absolute; @@ -79,10 +78,6 @@ margin-right: .5rem; color: var(--color-middle); } - - & > span:nth-child(2) { - font-family: 'Roboto Condensed', sans-serif; - } } & .wrapper { @@ -91,7 +86,6 @@ width: 100%; gap: 1rem; justify-content: space-between; - font-family: 'Roboto Condensed', sans-serif; & > .info { flex-grow: 0; @@ -110,7 +104,7 @@ } & > .pro { - font-size: .5rem; + font-size: .6rem; color: var(--color-middle); font-weight: lighter; } diff --git a/app/components/Pp/DeleteDialog.vue b/app/components/Pp/DeleteDialog.vue index dd24927..b6101ed 100644 --- a/app/components/Pp/DeleteDialog.vue +++ b/app/components/Pp/DeleteDialog.vue @@ -3,22 +3,22 @@ ref="dialog" closedby="any" > -
-
+ +
Wirklich löschen?
-
+

Bist du dir sicher, dass du diesen Eintrag löschen möchtest?

-