adm_tueit/TueIT_App
2
0
Fork 0
Code Issues 3 Pull Requests 3 Packages Projects Releases Wiki Activity

optimized layout

Browse Source
This commit is contained in:
jo.kuehner
2023-11-13 19:30:52 +01:00
parent ffff6f4467
commit fee9acfd6d
17 changed files with 463 additions and 506 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<!--<NuxtLayout :name="layout">--><NuxtLayout> <NuxtLayout>
<NuxtPage /> <NuxtPage />
</NuxtLayout> </NuxtLayout>
</template> </template>
@ -23,6 +23,7 @@
width: 100%; width: 100%;
margin: 0; margin: 0;
background-color: #212121; background-color: #212121;
font-size: 1rem;
} }

28
components/Dashboard.vue
View File

@ -33,18 +33,18 @@ export default {
justify-content: center; justify-content: center;
align-self: stretch; align-self: stretch;
width: 100%; width: 100%;
padding: 30px 50px 50px; padding: 1.875rem 3.125rem 3.125rem;
gap: 20px; gap: 1.25rem;
border-radius: 10px; border-radius: 0.625rem;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25); box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #2c2c2c; background-color: #2c2c2c;
} }
.heading { .heading {
color: #fff; color: #fff;
letter-spacing: 0.8px; letter-spacing: 5%;
text-decoration-line: underline; text-decoration-line: underline;
font: 400 16px/32px Overpass, sans-serif; font: 400 1rem/2rem Overpass, sans-serif;
} }
.shortcuts { .shortcuts {
@ -52,8 +52,8 @@ export default {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-content: center; align-content: center;
padding: 10px 40px; padding: 0.625rem 2.5rem;
gap: 40px; gap: 2.5rem;
} }
input { input {
@ -61,15 +61,15 @@ export default {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 240px; width: 15rem;
height: 64px; height: 4rem;
border-radius: 10px; border-radius: 0.625rem;
padding: 15px 20px; padding: 0.9375rem 1.25rem;
border: none; border: none;
color: #fff; color: #fff;
text-align: center; text-align: center;
letter-spacing: 0.7px; letter-spacing: 5%;
font: 400 14px/32px Overpass, sans-serif; font: 400 0.875rem/2rem Overpass, sans-serif;
background-color: #343434; background-color: #343434;
} }

82
components/LoginForm.vue
View File

@ -59,12 +59,12 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 500px; width: 31.25rem;
height: 500px; height: 31.25rem;
border-radius: 10px; border-radius: 0.625rem;
padding: 40px 30px; padding: 2.5rem 1.875rem;
gap: 30px; gap: 1.875rem;
border: 1px solid #000; border: 0.0625rem solid #000;
background-color: #2c2c2c; background-color: #2c2c2c;
} }
@ -74,19 +74,19 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 20px; gap: 1.25rem;
} }
.title-icon { .title-icon {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 50px; width: 3.125rem;
height: 50px; height: 3.125rem;
} }
.title-icon > img { .title-icon > img {
width: 50px; width: 3.125rem;
height: 50px; height: 3.125rem;
object-fit: contain; object-fit: contain;
object-position: center; object-position: center;
overflow: hidden; overflow: hidden;
@ -95,9 +95,9 @@ export default {
.title { .title {
margin: 0; margin: 0;
color: #fff; color: #fff;
letter-spacing: 1.6px; letter-spacing: 5%;
white-space: nowrap; white-space: nowrap;
font: 400 30px/30px Overpass, sans-serif; font: 400 1.875rem/1.875rem Overpass, sans-serif;
} }
@ -106,8 +106,8 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 10px 20px; padding: 0.625rem 1.25rem;
gap: 20px; gap: 1.25rem;
} }
.form-field { .form-field {
@ -115,10 +115,10 @@ export default {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
width: 400px; width: 25rem;
height: 80px; height: 5rem;
padding: 10px; padding: 0.625rem;
gap: 10px; gap: 0.625rem;
} }
label { label {
@ -126,8 +126,8 @@ export default {
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
width: fit-content; width: fit-content;
height: 30px; height: 1.875rem;
gap: 10px; gap: 0.625rem;
} }
.icon { .icon {
@ -135,8 +135,8 @@ export default {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 30px; width: 1.875rem;
height: 30px; height: 1.875rem;
} }
.icon > img { .icon > img {
@ -147,17 +147,17 @@ export default {
} }
#username-icon > img { #username-icon > img {
width: auto; width: auto;
height: 15px; height: 0.9375rem;
} }
#password-icon > img { #password-icon > img {
width: 15px; width: 0.9375rem;
height: auto; height: auto;
} }
.label { .label {
color: #fff; color: #fff;
letter-spacing: 0.3px; letter-spacing: 2%;
font: 400 15px/30px Overpass, sans-serif; font: 400 0.9375rem/1.875rem Overpass, sans-serif;
} }
.input-field { .input-field {
@ -167,10 +167,10 @@ export default {
justify-content: stretch; justify-content: stretch;
align-self: stretch; align-self: stretch;
width: 100%; width: 100%;
height: 30px; height: 1.875rem;
border-radius: 5px; border-radius: 0.3125rem;
padding: 3px 10px; padding: 0.1875rem 0.625rem;
box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.25) inset; box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
background-color: #212121; background-color: #212121;
} }
@ -180,9 +180,9 @@ export default {
background-color: #00000000; background-color: #00000000;
border: none; border: none;
color: #8e8e8e; color: #8e8e8e;
letter-spacing: 0.6px; letter-spacing: 5%;
white-space: nowrap; white-space: nowrap;
font: 100 12px/20px Overpass, sans-serif; font: 100 0.75rem/1.25rem Overpass, sans-serif;
} }
input[type=button] { input[type=button] {
width: fit-content; width: fit-content;
@ -190,23 +190,23 @@ export default {
background-color: #00000000; background-color: #00000000;
border: none; border: none;
color: #fff; color: #fff;
letter-spacing: 0.6px; letter-spacing: 5%;
white-space: nowrap; white-space: nowrap;
font: 300 12px/20px Overpass, sans-serif; font: 300 0.75rem/1.25rem Overpass, sans-serif;
} }
#login-button { #login-button {
width: 220px; width: 13.75rem;
height: 70px; height: 4.375rem;
padding: 10px; padding: 0.625rem;
border-radius: 10px; border-radius: 0.625rem;
align-self: center; align-self: center;
border: none; border: none;
background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%); background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
color: #fff; color: #fff;
letter-spacing: 0.4px; letter-spacing: 2%;
white-space: nowrap; white-space: nowrap;
font: 600 20px/30px Overpass, sans-serif; font: 600 1.25rem/1.875rem Overpass, sans-serif;
} }

32
components/QuickAccess.vue
View File

@ -33,18 +33,18 @@ export default {
justify-content: center; justify-content: center;
align-self: stretch; align-self: stretch;
width: 100%; width: 100%;
padding: 30px 50px 50px; padding: 1.875rem 3.125rem 3.125rem;
gap: 20px; gap: 1.25rem;
border-radius: 10px; border-radius: 0.625rem;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25); box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #2c2c2c; background-color: #2c2c2c;
} }
.heading { .heading {
color: #fff; color: #fff;
letter-spacing: 0.8px; letter-spacing: 5%;
text-decoration-line: underline; text-decoration-line: underline;
font: 400 16px/32px Overpass, sans-serif; font: 400 1rem/2rem Overpass, sans-serif;
} }
.shortcuts { .shortcuts {
@ -52,8 +52,8 @@ export default {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-content: center; align-content: center;
padding: 10px 40px; padding: 0.625rem 2.5rem;
gap: 40px; gap: 2.5rem;
} }
input { input {
@ -61,21 +61,21 @@ export default {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 240px; width: 15rem;
height: 64px; height: 4rem;
border-radius: 10px; border-radius: 0.625rem;
padding: 15px 20px; padding: 0.9375rem 1.25rem;
border: none; border: none;
color: #fff; color: #fff;
text-align: center; text-align: center;
letter-spacing: 0.7px; letter-spacing: 5%;
font: 400 14px/32px Overpass, sans-serif; font: 400 0.875rem/2rem Overpass, sans-serif;
background-color: #343434; background-color: #343434;
} }
input#pins { input#pins {
border: 1px dashed #454545; border: 0.0625rem dashed #454545;
color: #8e8e8e; color: #8e8e8e;
font: 400 14px/32px Overpass, sans-serif; font: 400 0.875rem/2rem Overpass, sans-serif;
background-color: #34343400; background-color: #34343400;
} }

50
components/server/Client.vue
View File

@ -72,20 +72,20 @@
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
padding: 20px 30px; padding: 1.25rem 1.875rem;
border-radius: 10px; border-radius: 0.625rem;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25); box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #2c2c2c; background-color: #2c2c2c;
} }
.client-name { .client-name {
align-self: stretch; align-self: stretch;
padding: 20px 0; padding: 1.25rem 0;
color: #fff; color: #fff;
letter-spacing: 0.8px; letter-spacing: 5%;
text-decoration-line: underline; text-decoration-line: underline;
font: italic 400 16px/187.5% Overpass, -apple-system, Roboto, Helvetica, font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
sans-serif; sans-serif;
} }
@ -95,12 +95,12 @@
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
width: 100%; width: 100%;
padding: 0 30px; padding: 0 1.875rem;
gap: 20px; gap: 1.25rem;
border-radius: 10px; border-radius: 0.625rem;
} }
.data-field#client-id { .data-field#client-id {
padding: 10px 30px; padding: 0.625rem 1.875rem;
} }
.data-field#street-name { .data-field#street-name {
width: 70%; width: 70%;
@ -111,20 +111,20 @@
.label { .label {
color: #fff; color: #fff;
letter-spacing: 0.7px; letter-spacing: 5%;
font: 400 14px/30px Overpass, sans-serif; font: 400 0.875rem/1.875rem Overpass, sans-serif;
} }
.data { .data {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
padding: 0 10px; padding: 0 0.625rem;
border-radius: 5px; border-radius: 0.3125rem;
box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.25) inset; box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
background-color: #212121; background-color: #212121;
color: #fff; color: #fff;
letter-spacing: 0.6px; letter-spacing: 5%;
font: 400 12px/250% Overpass, sans-serif; font: 400 0.75rem/250% Overpass, sans-serif;
} }
.data#notes { .data#notes {
align-self: stretch; align-self: stretch;
@ -136,7 +136,7 @@
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
align-self: stretch; align-self: stretch;
padding: 0 10px; padding: 0 0.625rem;
} }
.contact, .address { .contact, .address {
@ -146,14 +146,14 @@
justify-content: center; justify-content: center;
line-height: normal; line-height: normal;
width: 50%; width: 50%;
padding: 20px 10px; padding: 1.25rem 0.625rem;
border-radius: 5px; border-radius: 0.3125rem;
} }
.area-title { .area-title {
color: #fff; color: #fff;
letter-spacing: 0.7px; letter-spacing: 5%;
font: 400 14px/30px Overpass, sans-serif; font: 400 0.875rem/1.875rem Overpass, sans-serif;
} }
.street-address { .street-address {
@ -162,8 +162,8 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
align-self: stretch; align-self: stretch;
padding: 0 30px 0 0; padding: 0 1.875rem 0 0;
gap: 10px; gap: 0.625rem;
} }
.notes { .notes {
@ -172,7 +172,7 @@
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
align-self: stretch; align-self: stretch;
padding: 10px 30px 10px 20px; padding: 0.625rem 1.875rem 0.625rem 1.25rem;
} }

28
components/server/ClientQuickAccess.vue
View File

@ -34,18 +34,18 @@
justify-content: center; justify-content: center;
align-self: stretch; align-self: stretch;
width: 100%; width: 100%;
padding: 30px 30px 50px; padding: 1.875rem 1.875rem 3.125rem;
gap: 20px; gap: 1.25rem;
border-radius: 10px; border-radius: 0.625rem;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25); box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #2c2c2c; background-color: #2c2c2c;
} }
.heading { .heading {
color: #fff; color: #fff;
letter-spacing: 0.8px; letter-spacing: 5%;
text-decoration-line: underline; text-decoration-line: underline;
font: 400 16px/32px Overpass, sans-serif; font: 400 1rem/2rem Overpass, sans-serif;
} }
.shortcuts { .shortcuts {
@ -53,8 +53,8 @@
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-content: center; align-content: center;
padding: 10px 30px; padding: 0.625rem 1.875rem;
gap: 40px; gap: 2.5rem;
} }
input { input {
@ -62,15 +62,15 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 240px; width: 15rem;
height: 64px; height: 4rem;
border-radius: 10px; border-radius: 0.625rem;
padding: 15px 20px; padding: 0.9375rem 1.25rem;
border: none; border: none;
color: #fff; color: #fff;
text-align: center; text-align: center;
letter-spacing: 0.7px; letter-spacing: 5%;
font: 400 14px/32px Overpass, sans-serif; font: 400 0.875rem/2rem Overpass, sans-serif;
background-color: #343434; background-color: #343434;
} }

30
components/server/ClientTable.vue
View File

@ -40,16 +40,16 @@
justify-content: center; justify-content: center;
align-self: stretch; align-self: stretch;
width: 100%; width: 100%;
padding: 20px 30px; padding: 1.25rem 1.875rem;
gap: 20px; gap: 1.25rem;
border-radius: 10px; border-radius: 0.625rem;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25); box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #2c2c2c; background-color: #2c2c2c;
} }
.data-table { .data-table {
width: 100%; width: 100%;
padding: 0 10px; padding: 0 0.625rem;
table-layout: fixed; table-layout: fixed;
border-collapse: collapse; border-collapse: collapse;
} }
@ -57,29 +57,29 @@
.table-row { .table-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 50px; height: 3.125rem;
padding: 10px; padding: 0.625rem;
gap: 10px; gap: 0.625rem;
border-top: 1px solid #000000; border-top: 0.0625rem solid #000000;
} }
#table-head { #table-head {
border-top: none; border-top: none;
border-bottom: 1px solid #000000; border-bottom: 0.0625rem solid #000000;
} }
th, td { th, td {
height: 30px; height: 1.875rem;
padding: 0; padding: 0;
color: #ffffff; color: #ffffff;
letter-spacing: 0.7px; letter-spacing: 5%;
font: 400 14px/30px Overpass, sans-serif; font: 400 0.875rem/1.875rem Overpass, sans-serif;
} }
th { th {
font: 700 14px/30px Overpass, sans-serif; font: 700 0.875rem/1.875rem Overpass, sans-serif;
} }
.ID { .ID {
width: 40%; width: 40%;
border-right: 1px solid #000000; border-right: 0.0625rem solid #000000;
} }
.Name { .Name {
width: 60%; width: 60%;

6
documentation/Datenbankmodell_tueitApp.drawio
View File

@ -112,13 +112,13 @@
<mxCell id="DauqCNUrC7Z9yIe88X-r-57" value="CPU" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1"> <mxCell id="DauqCNUrC7Z9yIe88X-r-57" value="CPU" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
<mxGeometry y="480" width="140" height="30" as="geometry" /> <mxGeometry y="480" width="140" height="30" as="geometry" />
</mxCell> </mxCell>
<mxCell id="DauqCNUrC7Z9yIe88X-r-58" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;div class=&quot;clearfix&quot;&gt; &lt;label style=&quot;padding-right: 0px;&quot; class=&quot;control-label&quot;&gt;RAM&lt;/label&gt; &lt;/div&gt;&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1"> <mxCell id="DauqCNUrC7Z9yIe88X-r-58" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;div class=&quot;clearfix&quot;&gt; &lt;label style=&quot;padding-right: 0rem;&quot; class=&quot;control-label&quot;&gt;RAM&lt;/label&gt; &lt;/div&gt;&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
<mxGeometry y="510" width="140" height="30" as="geometry" /> <mxGeometry y="510" width="140" height="30" as="geometry" />
</mxCell> </mxCell>
<mxCell id="DauqCNUrC7Z9yIe88X-r-59" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;label style=&quot;padding-right: 0px;&quot; class=&quot;control-label&quot;&gt;storageConfiguration&lt;/label&gt; &lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1"> <mxCell id="DauqCNUrC7Z9yIe88X-r-59" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;label style=&quot;padding-right: 0rem;&quot; class=&quot;control-label&quot;&gt;storageConfiguration&lt;/label&gt; &lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
<mxGeometry y="540" width="140" height="30" as="geometry" /> <mxGeometry y="540" width="140" height="30" as="geometry" />
</mxCell> </mxCell>
<mxCell id="WukdXvazNq34soQIU5Al-5" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;label style=&quot;padding-right: 0px;&quot; class=&quot;control-label&quot;&gt;miscellaneous&lt;/label&gt;&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1"> <mxCell id="WukdXvazNq34soQIU5Al-5" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;label style=&quot;padding-right: 0rem;&quot; class=&quot;control-label&quot;&gt;miscellaneous&lt;/label&gt;&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
<mxGeometry y="570" width="140" height="30" as="geometry" /> <mxGeometry y="570" width="140" height="30" as="geometry" />
</mxCell> </mxCell>
<mxCell id="qbUp6gtjYndA0fy5zK6_-3" value="softwareBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1"> <mxCell id="qbUp6gtjYndA0fy5zK6_-3" value="softwareBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">

38
layouts/Actionbar.vue
View File

@ -83,14 +83,16 @@ export default {
.actionbar { .actionbar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: sticky;
top: 5rem;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
width: fit-content; width: fit-content;
height: fit-content; height: fit-content;
border-radius: 10px; border-radius: 0.625rem;
padding: 30px 10px; padding: 1.875rem 0.625rem;
gap: 20px; gap: 1.25rem;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25); box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #2c2c2c; background-color: #2c2c2c;
} }
@ -101,8 +103,8 @@ export default {
align-items: stretch; align-items: stretch;
justify-content: center; justify-content: center;
align-self: stretch; align-self: stretch;
padding: 20px 0; padding: 1.25rem 0;
gap: 20px; gap: 1.25rem;
} }
@ -111,8 +113,8 @@ export default {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
height: 30px; height: 1.875rem;
border-radius: 10px; border-radius: 0.625rem;
border: none; border: none;
background-color: #2c2c2c; background-color: #2c2c2c;
transition-duration: 0.5s; transition-duration: 0.5s;
@ -127,13 +129,13 @@ export default {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 30px; width: 1.875rem;
height: 30px; height: 1.875rem;
} }
#indicator-icon { #indicator-icon {
width: 30px; width: 1.875rem;
height: 30px; height: 1.875rem;
border-radius: 5px; border-radius: 0.3125rem;
background-color: #2c2c2c; background-color: #2c2c2c;
transition-duration: 0.5s; transition-duration: 0.5s;
} }
@ -142,24 +144,24 @@ export default {
} }
.icon > img { .icon > img {
width: 14px; width: 0.875rem;
height: 14px; height: 0.875rem;
filter: invert(100%); filter: invert(100%);
object-fit: contain; object-fit: contain;
object-position: center; object-position: center;
overflow: hidden; overflow: hidden;
} }
#indicator-icon > img { #indicator-icon > img {
height: 20px; height: 1.25rem;
} }
.label { .label {
color: #fff; color: #fff;
letter-spacing: 0.7px; letter-spacing: 5%;
align-self: center; align-self: center;
white-space: nowrap; white-space: nowrap;
font: 400 14px/20px Overpass, sans-serif; font: 400 0.875rem/1.25rem Overpass, sans-serif;
} }

257
layouts/Navigationbar.vue
View File

@ -1,60 +1,60 @@
<template> <template>
<aside :class="[darkMode ? 'navbar-dark' : 'navbar-light', isExpanded ? 'is-expanded' : 'is-not-expanded']" > <aside :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']" >
<div class="toggle"> <div class="toggle">
<div v-if="isExpanded" :class="{ 'darkStylesIcon': darkMode, 'lightStylesIcon': !darkMode }" id="back-icon"> <div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode' ]" id="back-icon">
<img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy" src="../icons/Back-Icon.svg" /> <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]"
loading="lazy" src="../icons/Back-Icon.svg" />
</div> </div>
<div :class="{ 'darkStylesIcon': darkMode, 'lightStylesIcon': !darkMode }" id="indicator-icon" @click="toggleSidebar"> <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode' ]" id="indicator-icon" @click="toggleSidebar">
<img :style="[darkMode ? darkStylesImg : lightStylesImg ]" <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]"
loading="lazy" loading="lazy" src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
</div> </div>
</div> </div>
<div class="menus"> <div class="menus">
<nav :class="{ 'dark-home-menu': darkMode, 'light-home-menu': !darkMode }" id="home-menu"> <nav id="home-menu" :class="[ darkMode ? 'menu-darkmode' : 'menu-lightmode' ]">
<button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="home-button"> <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="home-button">
<div class="icon" id="home-icon"> <div class="icon" id="home-icon">
<img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy" <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]"
src="../icons/navbar-icons/Home-Icon.svg" /> loading="lazy" src="../icons/navbar-icons/Home-Icon.svg" />
</div> </div>
<pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Home</pre> <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Home</pre>
</button> </button>
</nav> </nav>
<nav id="site-menu"> <nav id="site-menu">
<button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="checklists-button"> <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="checklists-button">
<div class="icon" id="checklists-icon"> <div class="icon" id="checklists-icon">
<img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy" <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]"
src="../icons/navbar-icons/Checklists-Icon.svg" /> loading="lazy" src="../icons/navbar-icons/Checklists-Icon.svg" />
</div> </div>
<pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Checklists</pre> <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Checklists</pre>
</button> </button>
<button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="assets-button"> <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="assets-button">
<div class="icon" id="assets-icon"> <div class="icon" id="assets-icon">
<img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy" <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]"
src="../icons/navbar-icons/Assets-Icon.svg" /> loading="lazy" src="../icons/navbar-icons/Assets-Icon.svg" />
</div> </div>
<pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Config Items</pre> <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Config Items</pre>
</button> </button>
<button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="solutions-button"> <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="solutions-button">
<div class="icon" id="solutions-icon"> <div class="icon" id="solutions-icon">
<img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy" <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]"
src="../icons/navbar-icons/Solutions-Icon.svg" /> loading="lazy" src="../icons/navbar-icons/Solutions-Icon.svg" />
</div> </div>
<pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Solutions</pre> <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Solutions</pre>
</button> </button>
<button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="accounting-button"> <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="accounting-button">
<div class="icon" id="accounting-icon"> <div class="icon" id="accounting-icon">
<img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy" <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]"
src="../icons/navbar-icons/Accounting-Icon.svg" /> loading="lazy" src="../icons/navbar-icons/Accounting-Icon.svg" />
</div> </div>
<pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Accounting</pre> <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Accounting</pre>
</button> </button>
<button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="clients-button"> <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="clients-button">
<div class="icon" id="clients-icon"> <div class="icon" id="clients-icon">
<img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy" <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]"
src="../icons/navbar-icons/Clients-Icon.svg" /> loading="lazy" src="../icons/navbar-icons/Clients-Icon.svg" />
</div> </div>
<pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Clients</pre> <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Clients</pre>
</button> </button>
</nav> </nav>
</div> </div>
@ -71,18 +71,6 @@ export default {
return { return {
darkMode: true, darkMode: true,
isExpanded: true, isExpanded: true,
darkStylesImg: {
filter: 'invert(100%)',
},
lightStylesImg: {
filter: 'none',
},
darkStylesLabel: {
color: '#fff',
},
lightStylesLabel: {
color: '#000',
},
}; };
}, },
methods: { methods: {
@ -102,58 +90,44 @@ export default {
} }
aside { aside {
transition: 0.2s ease-out;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: calc(2.5rem + 2.5rem); position: sticky;
overflow: hidden; top: 5rem;
width: 3.125rem;
transition: 0.5s ease-in-out;
} }
aside.is-expanded { aside.is-expanded {
width: 238px; width: 12.5rem;
transition: 0.5s ease-out;
} }
.is-expanded .label { .is-expanded .label {
opacity: 1; opacity: 1;
transition: 0.5s ease-out; transition: 0.5s ease-in-out;
} }
.is-not-expanded #indicator-icon {
.is-not-expanded .darkStylesIcon {
transform: rotate(180deg); transform: rotate(180deg);
transition: 0.5s ease-out; transition: 0.5s ease-in-out;
}
.is-not-expanded .lightStylesIcon {
transform: rotate(180deg);
transition: 0.5s ease-out;
} }
.navbar-dark { .navbar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: fit-content;
border-radius: 0.625rem;
align-items: stretch; align-items: stretch;
justify-content: center; justify-content: center;
height: fit-content; gap: 0.625rem;
border-radius: 10px; padding: 0.9375rem;
gap: 10px;
padding: 15px;
margin: 0; margin: 0;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
background-color: #2c2c2c;
} }
.navbar-darkmode {
.navbar-light { box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
display: flex; background-color: #2C2C2C;
flex-direction: column; }
justify-content: center; .navbar-lightmode {
height: fit-content; box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
border-radius: 10px;
gap: 10px;
padding: 15px;
margin: 0;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
background-color: #FFFFFF; background-color: #FFFFFF;
} }
@ -161,142 +135,113 @@ aside.is-expanded {
.toggle { .toggle {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 2.5rem;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 40px;
} }
.menus { .menus {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
transition: 0.2s ease-out;
justify-content: flex; justify-content: flex;
padding: 20px 0; padding: 1.25rem 0;
gap: 30px; gap: 1.875rem;
transition: 0.5s ease-in-out;
} }
nav { nav {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding-top: 0.8rem; padding: 0.9375rem 0;
padding-bottom: 0.8rem; gap: 1.875rem;
gap: 30px;
} }
.menu-darkmode {
border-bottom: 0.0625rem solid #8E8E8E;
}
.menu-lightmode {
border-bottom: 0.0625rem solid #BABABA;
}
button { button {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-self: stretch;
height: 2.1875rem;
border-radius: 0.3125rem;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
align-self: stretch; gap: 0.3125rem;
height: 35px;
border-radius: 5px;
gap: 5px;
border: none; border: none;
background-color: #2c2c2c; transition: 0.5s ease-in-out;
transition-duration: 0.5s;
} }
.button-darkmode {
.dark-menu { background-color: #2C2C2C;
background-color: #2c2c2c;
} }
.button-lightmode {
.light-menu {
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.button-darkmode:hover,
.dark-menu:hover { .indicator-darkmode:hover,
.back-darkmode:hover {
background-color: #444444; background-color: #444444;
} }
.light-menu:hover { .button-lightmode:hover,
.indicator-lightmode:hover,
.back-lightmode:hover {
background-color: #ACACAC; background-color: #ACACAC;
} }
.icon { .icon {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 2.1875rem;
height: 2.1875rem;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 35px; transition: 0.2s ease-in-out;
height: 35px;
transition: 0.2s ease-out;
} }
#back-icon, #indicator-icon {
.lightStylesIcon { width: 2.5rem;
display: flex; height: 2.5rem;
flex-direction: row; border-radius: 0.3125rem;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
transition: 0.2s ease-out;
}
.darkStylesIcon {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
transition: 0.2s ease-out;
}
#back-icon {
width: 40px;
height: 40px;
border-radius: 5px;
transition-duration: 0.5s; transition-duration: 0.5s;
transition: 0.2s ease-out; transition: 0.2s ease-out;
} }
#indicator-icon {
width: 40px;
height: 40px;
border-radius: 5px;
transition-duration: 0.5s;
transition: transform 0.3s;
}
.lightStylesIcon:hover { img {
background-color: #ACACAC; width: 1.25rem;
} height: 1.25rem;
.darkStylesIcon:hover {
background-color: #444444;
}
.icon>img,
.lightStylesIcon>img,
.darkStylesIcon>img {
width: 20px;
height: 20px;
object-fit: contain; object-fit: contain;
object-position: center; object-position: center;
overflow: hidden; overflow: hidden;
transition: 0.2s ease-out; transition: 0.2s ease-out;
} }
.img-darkmode {
.dark-home-menu { filter: invert(100%);
border-bottom: 1px solid #8e8e8e;
}
.light-home-menu {
border-bottom: 1px solid #BABABA;
} }
.label { .label {
letter-spacing: 0.7px; letter-spacing: 5%;
align-self: center; align-self: center;
white-space: nowrap; white-space: nowrap;
margin: auto 0; margin: auto 0;
font: 600 14px/20px Overpass, sans-serif; font: 600 0.875rem/1.25rem Overpass, sans-serif;
opacity: 0; opacity: 0;
transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out;
} }
.label-darkmode {
color: #FFFFFF;
}
.label-lightmode {
color: #000000;
}
</style> </style>

33
layouts/PageHeader.vue
View File

@ -30,43 +30,48 @@ export default {
header { header {
display: flex; display: flex;
flex-direction: row;
position: sticky;
top: 0;
width: 100%;
height: 4.375rem;
align-self: stretch;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
align-self: stretch; padding: 0.625rem 1.25rem;
background-color: #2c2c2c; background-color: #2c2c2c;
height: 60px;
padding: 10px 20px;
} }
#header-logo { #header-logo {
object-fit: contain; object-fit: contain;
object-position: center; object-position: center;
width: 80px; width: 5rem;
height: 40px; height: 2.5rem;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
} }
.profile { .profile {
align-items: flex-end;
display: flex; display: flex;
gap: 10px; flex-direction: row;
padding: 0 10px; align-items: flex-end;
gap: 0.625rem;
padding: 0 0.625rem;
} }
.username { .username {
color: #fff;
text-align: right;
letter-spacing: 0.8px;
align-self: center; align-self: center;
margin: auto 0; margin: auto 0;
font: 200 14px Overpass, sans-serif; color: #fff;
text-align: right;
font: 200 0.875rem Overpass, sans-serif;
letter-spacing: 5%;
} }
.picture { .picture {
display: flex; display: flex;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%; border-radius: 50%;
width: 40px;
height: 40px;
background-color: #fff; background-color: #fff;
} }

4
layouts/default.vue
View File

@ -36,8 +36,8 @@ export default {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
gap: 10px; padding: 0.625rem;
padding: 10px; gap: 0.625rem;
background-color: #212121; background-color: #212121;
} }

4
layouts/empty.vue
View File

@ -30,8 +30,8 @@
main { main {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 10px; gap: 0.625rem;
padding: 10px 25px 10px 10px; padding: 0.625rem 1.5625rem 0.625rem 0.625rem;
background-color: #212121; background-color: #212121;
} }

117
pages/clients.vue
View File

@ -11,13 +11,13 @@
</template> </template>
<script setup> <script setup>
definePageMeta({ definePageMeta({
layout: 'default' layout: 'default'
}) })
</script> </script>
<script> <script>
import ClientTable from "../components/server/ClientTable.vue"; import ClientTable from "../components/server/ClientTable.vue";
import Client from "../components/server/Client.vue"; import Client from "../components/server/Client.vue";
import ClientQuickAccess from "../components/server/ClientQuickAccess.vue"; import ClientQuickAccess from "../components/server/ClientQuickAccess.vue";
@ -25,60 +25,61 @@
import ClientEmployee from "../components/server/ClientEmployee.vue"; import ClientEmployee from "../components/server/ClientEmployee.vue";
export default { export default {
name: "ClientsPage", name: "ClientsPage",
components: { components: {
ClientTable, ClientTable,
Client, Client,
ClientQuickAccess, ClientQuickAccess,
ClientEmployees, ClientEmployees,
ClientEmployee, ClientEmployee,
} }
}
</script>
<style scoped>
* {
box-sizing: border-box;
}
#content {
display: flex;
flex-direction: column;
float: left;
justify-content: stretch;
align-items: stretch;
width: 100%;
flex-grow: 1;
gap: 0.625rem;
padding: 0 1.25rem;
} }
</script> #content-header {
display: flex;
flex-direction: row;
justify-content: center;
<style scoped> align-items: center;
width: 100%;
height: 3.125rem;
}
#page-name {
color: #fff;
letter-spacing: 5%;
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
}
#content-body {
display: flex;
flex-direction: column;
width: 100%;
gap: 1.25rem;
margin-bottom: 0.625rem;
border-radius: 0.625rem;
}
* { </style>
box-sizing: border-box;
}
#content {
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
flex-grow: 1;
gap: 10px;
padding: 0 20px;
}
#content-header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 50px;
}
#page-name {
color: #fff;
letter-spacing: 1.2px;
font: 400 24px/125% Overpass, -apple-system, Roboto, Helvetica,
sans-serif;
}
#content-body {
display: flex;
flex-direction: column;
width: 100%;
gap: 20px;
margin-bottom: 10px;
border-radius: 10px;
}
</style>

105
pages/home.vue
View File

@ -18,63 +18,64 @@
}) })
</script> </script>
<script> <script>
import Navigationbar from "../layouts/Navigationbar.vue"; import Navigationbar from "../layouts/Navigationbar.vue";
import Dashboard from "../components/Dashboard.vue"; import Dashboard from "../components/Dashboard.vue";
import QuickAccess from "../components/QuickAccess.vue"; import QuickAccess from "../components/QuickAccess.vue";
export default { export default {
name: "HomePage", name: "HomePage",
components: { components: {
Navigationbar, Navigationbar,
Dashboard, Dashboard,
QuickAccess, QuickAccess,
} }
}
</script>
<style>
* {
box-sizing: border-box;
} }
</script> #content {
display: flex;
flex-direction: column;
float: left;
<style> justify-content: stretch;
align-items: stretch;
width: 100%;
flex-grow: 1;
gap: 0.625rem;
padding: 0 1.25rem;
}
* { #content-header {
box-sizing: border-box; display: flex;
} flex-direction: row;
justify-content: center;
#content { align-items: center;
display: flex; width: 100%;
flex-direction: column; height: 3.125rem;
justify-content: stretch; }
align-items: stretch; #page-name {
flex-grow: 1; color: #fff;
gap: 10px; letter-spacing: 5%;
padding: 0 20px; font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
} }
#content-header { #content-body {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: center; width: 100%;
align-items: center; gap: 1.25rem;
width: 100%; margin-bottom: 0.625rem;
height: 50px; border-radius: 0.625rem;
} }
#page-name {
color: #fff;
letter-spacing: 1.2px;
font: 400 24px/125% Overpass, -apple-system, Roboto, Helvetica,
sans-serif;
}
#content-body { </style>
display: flex;
flex-direction: column;
width: 100%;
gap: 20px;
margin-bottom: 10px;
border-radius: 10px;
}
</style>

126
pages/index.vue
View File

@ -10,72 +10,74 @@
</template> </template>
<script setup> <script setup>
definePageMeta({ definePageMeta({
layout: 'default' layout: 'default'
}) })
</script> </script>
<script> <script>
export default { export default {
name: "Testpage", name: "Testpage",
components: { components: {
} }
}
</script>
<style scoped>
* {
box-sizing: border-box;
}
#content {
display: flex;
flex-direction: column;
float: left;
justify-content: stretch;
align-items: stretch;
width: 100%;
flex-grow: 1;
gap: 0.625rem;
padding: 0 1.25rem;
} }
</script> #content-header {
display: flex;
flex-direction: row;
justify-content: center;
<style scoped> align-items: center;
width: 100%;
height: 3.125rem;
}
#page-name {
color: #fff;
letter-spacing: 5%;
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
sans-serif;
}
#content-body {
display: flex;
flex-direction: column;
width: 100%;
gap: 1.25rem;
margin-bottom: 0.625rem;
border-radius: 0.625rem;
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #2C2C2C;
}
#stuff {
display: flex;
flex-direction: column;
width: 100%;
gap: 1.25rem;
padding: 1.25rem 1.875rem;
}
* { </style>
box-sizing: border-box;
}
#content {
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
flex-grow: 1;
gap: 10px;
padding: 0 20px;
}
#content-header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 50px;
}
#page-name {
color: #fff;
letter-spacing: 1.2px;
font: italic 400 24px/125% Overpass, -apple-system, Roboto, Helvetica,
sans-serif;
}
#content-body {
display: flex;
flex-direction: column;
width: 100%;
gap: 20px;
margin-bottom: 10px;
border-radius: 10px;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
background-color: #2c2c2c;
}
#stuff {
display: flex;
flex-direction: column;
width: 100%;
gap: 20px;
padding: 20px 30px;
}
</style>

26
pages/login.vue
View File

@ -40,27 +40,27 @@ export default {
#content { #content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; float: left;
justify-content: center; justify-content: stretch;
align-items: stretch;
width: 100%; width: 100%;
height: 100%; flex-grow: 1;
gap: 10px; gap: 0.625rem;
padding: 0 20px; padding: 0 1.25rem;
} }
#content-header { #content-header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center;
justify-content: center; justify-content: center;
align-items: center;
width: 100%; width: 100%;
height: 50px; height: 3.125rem;
} }
#page-name { #page-name {
color: #fff; color: #fff;
letter-spacing: 1.2px; letter-spacing: 5%;
font: italic 400 24px/125% Overpass, -apple-system, Roboto, Helvetica, font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
sans-serif;
} }
#content-body { #content-body {
@ -70,9 +70,9 @@ export default {
justify-content: flex-start; justify-content: flex-start;
width: fit-content; width: fit-content;
height: fit-content; height: fit-content;
gap: 20px; gap: 1.25rem;
margin-bottom: 10px; margin-bottom: 0.625rem;
border-radius: 10px; border-radius: 0.625rem;
} }