Files
dps-webshop/01-frontend/src/pages/pages.css

145 lines
3.2 KiB
CSS

.no-page-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
text-align: center;
background: linear-gradient(135deg, #ece9e6, #ffffff);
color: #333;
gap: 2%;
}
.no-page-title {
font-size: 8rem;
font-weight: bold;
color: primary; /* Material-UI Primary Color */
margin-bottom: 16px;
}
.no-page-subtitle {
font-size: 1.5rem;
margin-bottom: 8px;
color: #555;
}
.no-page-description {
font-size: 1rem;
margin-bottom: 24px;
color: #777;
}
.no-page-button {
font-size: 1rem;
padding: 12px 24px;
background-color: primary;
color: white;
border-radius: 8px;
transition: background-color 0.3s ease;
}
.no-page-button:hover {
background-color: primary;
}
.cardgrid {
display: grid;
gap: 24px;
width: 90%;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
padding: 16px;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
}
.page-background {
background: linear-gradient(135deg, #ece9e6, #ffffff);
height: calc(100vh - 3rem); /* Damit der Hintergrund die gesamte Seite abdeckt */
min-height: 600px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
overflow: auto;
padding: 20px 0; /* Abstand oben und unten */
box-sizing: border-box; /* Stellt sicher, dass Padding in die Höhe einbezogen wird */
width: 100%; /* Damit der Hintergrund die gesamte Breite abdeckt */
}
.impressum-container {
display: flex;
flex-direction: column;
align-items: flex-start; /* Elemente links ausrichten */
justify-content: flex-start;
padding: 20px;
text-align: left;
background: linear-gradient(135deg, #ece9e6, #ffffff);
color: primary;
min-height: 100vh;
margin: 0; /* Entferne zentrierende Margins */
width: 100%; /* Container nimmt die gesamte Breite ein */
box-sizing: border-box; /* Padding wird in die Breite einbezogen */
}
.impressum-title {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 16px;
color: #1976d2;
}
.impressum-content {
font-size: 1rem;
line-height: 1.6;
color: #555;
}
.contact-divider {
background-color: #555; /* Farbe für den Divider */
height: 2px;
}
.contact-divider-box {
width: 100%;
margin: 25px 0; /* Abstand hinzufügen */
}
.product-page-background {
background: linear-gradient(135deg, #ece9e6, #ffffff);
height: 100%;
min-height: 600px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 20px 0; /* Abstand oben und unten */
box-sizing: border-box; /* Stellt sicher, dass Padding in die Höhe einbezogen wird */
}
.home-page-background {
display: flex;
align-items: stretch;
width: 100%;
overflow: auto !important;
scroll-behavior: smooth;
height: calc(100vh - 3rem); /* Damit der Hintergrund die gesamte Seite abdeckt */
min-height: 600px;
/* padding: 20px 0 40px 0; /* Abstand oben und unten */
box-sizing: border-box;
color: black;
}
.filter-container {
width: 17%;
display: grid;
margin: 20px -20px 20px 20px;
place-self: start;
}
.loader-container {
width: 100%;
display: flex;
justify-content: center;
margin-top: 24px;
}