Refine design with modern UI elements and typography
This commit is contained in:
AI Assistant
@@ -22,105 +22,231 @@
|
||||
// Hier können alle Style-Angaben notiert werden, die nur Auswirkungen auf dieses Theme haben
|
||||
// ------------------- Beginn eigenes CSS ----------------------------
|
||||
|
||||
#footer {
|
||||
.form-control {
|
||||
background-color: #FFFFFF;
|
||||
color: #000000;
|
||||
&::placeholder {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
.label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) {
|
||||
label {
|
||||
background: $footer-bg-color;
|
||||
color: $footer-color;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: $footer-color;
|
||||
&:hover:not(.btn) {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
.productlist-filter-headline {
|
||||
color: $footer-color;
|
||||
}
|
||||
.newsletter-footer-heading {
|
||||
color: $footer-color;
|
||||
$link-color: #FFFFFF !default;
|
||||
}
|
||||
// --- Globale Anpassungen ---
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
// --- Header & Navigation (Modern & Glassmorphism) ---
|
||||
header {
|
||||
background-image: url(https://stoffhaus-hanke.de/media/image/storage/opc/header/headerfinal.png);
|
||||
background-image: url('https://stoffhaus-hanke.de/media/image/storage/opc/header/headerfinal.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: relative;
|
||||
}
|
||||
|
||||
header .nav-link {
|
||||
background-color: #FFFFFF;
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
opacity: 0.8;
|
||||
border-radius: 15px 15px 15px 15px;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
// Ein sanftes Overlay, damit der Header-Text besser lesbar ist, falls das Bild unruhig ist
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: linear-gradient(to bottom, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.4) 100%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
> * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#header-top-bar{
|
||||
background-color: #2E3740;
|
||||
}
|
||||
|
||||
#header-top-bar .ara-topinfo{
|
||||
font-weight: bold;
|
||||
a {color: #FFFFFF;}
|
||||
#header-top-bar {
|
||||
background-color: $footer-bg-color;
|
||||
color: $white;
|
||||
padding: 8px 0;
|
||||
|
||||
.ara-topinfo {
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
|
||||
li {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
transition: $transition-base;
|
||||
&:hover { color: $secondary; }
|
||||
}
|
||||
|
||||
i { margin-right: 6px; }
|
||||
}
|
||||
}
|
||||
|
||||
#shop-logo {
|
||||
border-radius: 15px 15px 15px 15px;
|
||||
background-color: #FFFFFF;
|
||||
opacity: 0.8;
|
||||
border-radius: $border-radius-lg;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px); // Glassmorphism Effekt
|
||||
padding: 10px;
|
||||
box-shadow: $box-shadow-sm;
|
||||
transition: $transition-base;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
header .nav-link {
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(8px);
|
||||
color: $header-color;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: 30px; // Pillen-Form für moderne Navigation
|
||||
padding: 8px 16px !important;
|
||||
margin: 0 4px;
|
||||
transition: $transition-base;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
|
||||
|
||||
&:hover, &.active {
|
||||
background-color: $white;
|
||||
color: $primary;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $box-shadow-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.secure-checkout-topbar {
|
||||
border-radius: 15px 15px 15px 15px;
|
||||
background-color: #FFFFFF;
|
||||
opacity: 0.8;
|
||||
border-radius: $border-radius-lg;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: $box-shadow-sm;
|
||||
}
|
||||
|
||||
.ara-topinfo {margin:5px auto 5px auto; text-decoration: none;}
|
||||
.ara-topinfo li {margin-right:10px; text-decoration: none; display:inline;color: #FFFFFF;}
|
||||
.ara-topinfo i {margin-right:3px;color: #FFFFFF;}
|
||||
|
||||
#article_buyfield .choose_quantity .submit,
|
||||
button[name="inWarenkorb"] {
|
||||
border-color: #000000;
|
||||
color: #FFFFFF !important;
|
||||
background-color: #2c8d2e !important;
|
||||
// --- Buttons ---
|
||||
.btn {
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.3px;
|
||||
border-radius: 30px; // Moderne abgerundete Buttons
|
||||
transition: $transition-base;
|
||||
|
||||
&.btn-primary,
|
||||
#article_buyfield .choose_quantity .submit,
|
||||
button[name="inWarenkorb"] {
|
||||
background-color: $primary !important;
|
||||
border-color: $primary !important;
|
||||
color: $white !important;
|
||||
box-shadow: 0 4px 12px rgba($primary, 0.3);
|
||||
|
||||
&:hover {
|
||||
background-color: darken($primary, 8%) !important;
|
||||
border-color: darken($primary, 8%) !important;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba($primary, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- Produktboxen (Modernes Card-Design) ---
|
||||
.productbox {
|
||||
border: none;
|
||||
border-radius: $border-radius-lg;
|
||||
background: $white;
|
||||
box-shadow: $box-shadow-sm;
|
||||
transition: $transition-base;
|
||||
overflow: hidden;
|
||||
margin-bottom: 30px;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
.productbox-title {
|
||||
font-family: $headings-font-family;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-weight: 600;
|
||||
color: $primary;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
// --- Footer ---
|
||||
#footer {
|
||||
background-color: $footer-bg-color;
|
||||
color: $footer-color;
|
||||
padding-top: 60px;
|
||||
|
||||
.form-control {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: $white;
|
||||
border-radius: 30px;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
border-color: $secondary;
|
||||
box-shadow: 0 0 0 0.2rem rgba($secondary, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
.label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) {
|
||||
label {
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
transition: $transition-base;
|
||||
&:hover:not(.btn) {
|
||||
color: $secondary; // Warmer Hover-Effekt im Footer
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.productlist-filter-headline,
|
||||
.newsletter-footer-heading,
|
||||
.h3, h3 {
|
||||
color: $white;
|
||||
font-family: $headings-font-family;
|
||||
}
|
||||
}
|
||||
|
||||
// --- Layout Wrapper ---
|
||||
@media screen and (min-width: 1200px) {
|
||||
#main-wrapper {
|
||||
background-image: url(https://stoffhaus-hanke.de/media/image/storage/opc/header/stoffballen.png);
|
||||
background-image: url('https://stoffhaus-hanke.de/media/image/storage/opc/header/stoffballen.png');
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
#content {
|
||||
width: 1200px;
|
||||
margin: auto;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 15px 15px 15px 15px;
|
||||
border: 10px solid white;
|
||||
max-width: 1200px;
|
||||
margin: 40px auto;
|
||||
background-color: rgba(255, 255, 255, 0.97); // Leicht transparent für Eleganz
|
||||
border-radius: $border-radius-lg;
|
||||
box-shadow: $box-shadow;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.breadcrumb-wrapper {
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
width: 1200px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 15px 15px 15px 15px;
|
||||
border: 10px solid white;
|
||||
max-width: 1200px;
|
||||
margin: 20px auto;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
border-radius: $border-radius-lg;
|
||||
box-shadow: $box-shadow-sm;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user