rahzel/stoffhaus-hanke-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine design with modern UI elements and typography

Browse Source
This commit is contained in:
AI Assistant
2026-04-03 16:28:18 +00:00
parent 4e88dbae2f
commit 5603eebdaf
2 changed files with 230 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
NOVAChild/themes/my-nova/sass/_variables.scss
View File

@@ -9,20 +9,41 @@
// Hier können alle Variablen notiert werden, die nur Auswirkungen auf dieses Theme haben
// -------------------Beginn eigene Variablen----------------------------------
$footer-color: #FFFFFF !default;
$footer-bg-color: #2E3740 !default;
$header-color: #000000 !default;
$header-bg-color: #FFFFFF !default;
$copyright-bg-color: #2E3740 !default;
//$headings-color: #FFFFFF !default;
// --- Typografie (Modern & Elegant für ein Stoffgeschäft) ---
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');
$font-family-sans-serif: 'Inter', sans-serif !default;
$headings-font-family: 'Playfair Display', serif !default;
$headings-font-weight: 600 !default;
// --- Farben ---
$primary: #2c8d2e !default; // Das gewünschte Grün für Kauf-Buttons
$secondary: #d4a373 !default; // Ein warmer, erdiger Ton (passt zu Stoffen/Holz)
$body-bg: #f9f8f6 !default; // Ein sehr sanftes Creme/Beige als Hintergrund ("Leinwand")
$body-color: #333333 !default;
$footer-color: #FFFFFF !default;
$footer-bg-color: #2E3740 !default;
$header-color: #000000 !default;
$header-bg-color: #FFFFFF !default;
$copyright-bg-color: #1a2026 !default; // Etwas dunkler als der Footer für Tiefe
$white: #ffffff !default;
$black: #000000 !default;
$transition-base-duration: .8s !default;
$transition-base-timing: ease !default;
// --- UI Elemente (Rundungen & Schatten für einen modernen Look) ---
$enable-shadows: true !default;
$border-radius: 12px !default;
$border-radius-lg: 15px !default;
$border-radius-sm: 8px !default;
$box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !default;
$box-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.04) !default;
// --- Animationen ---
$transition-base-duration: 0.3s !default;
$transition-base-timing: ease-in-out !default;
$transition-base: all $transition-base-duration $transition-base-timing !default;
$transition-fade: opacity .35s linear !default;
$transition-fade: opacity .3s linear !default;
// -------------------Ende eigene Variablen----------------------------------

268
NOVAChild/themes/my-nova/sass/my-nova.scss
View File

@@ -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;
}
position: relative;
header .nav-link {
background-color: #FFFFFF;
color: #000000;
font-size: 16px;
font-weight: bold;
opacity: 0.8;
border-radius: 15px 15px 15px 15px;
// 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;
}
&:hover {
opacity: 1;
> * {
position: relative;
z-index: 1;
}
}
#header-top-bar{
background-color: #2E3740;
}
#header-top-bar {
background-color: $footer-bg-color;
color: $white;
padding: 8px 0;
#header-top-bar .ara-topinfo{
font-weight: bold;
a {color: #FFFFFF;}
.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;}
// --- Buttons ---
.btn {
font-weight: 500;
letter-spacing: 0.3px;
border-radius: 30px; // Moderne abgerundete Buttons
transition: $transition-base;
#article_buyfield .choose_quantity .submit,
button[name="inWarenkorb"] {
border-color: #000000;
color: #FFFFFF !important;
background-color: #2c8d2e !important;
&.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;
}
}