From fd7164a0982bcdac30c59a7e341672eaf2c01dd3 Mon Sep 17 00:00:00 2001 From: AI Assistant Date: Sat, 11 Apr 2026 04:33:17 +0000 Subject: [PATCH] Final polish: custom scrollbar, mobile menu, checkout forms, and alerts --- NOVAChild/themes/my-nova/sass/_variables.scss | 64 +++ NOVAChild/themes/my-nova/sass/my-nova.scss | 429 ++++++++++++++++++ 2 files changed, 493 insertions(+) create mode 100644 NOVAChild/themes/my-nova/sass/_variables.scss create mode 100644 NOVAChild/themes/my-nova/sass/my-nova.scss diff --git a/NOVAChild/themes/my-nova/sass/_variables.scss b/NOVAChild/themes/my-nova/sass/_variables.scss new file mode 100644 index 0000000..cd8241f --- /dev/null +++ b/NOVAChild/themes/my-nova/sass/_variables.scss @@ -0,0 +1,64 @@ +// +// Platz für eigene Variablen in SCSS-Notation +// +// Alle Änderungen hier müssen anschließend mit einem SCSS-Compiler +// (z.B. dem JTL-Theme-Editor Plugin) nach my-nova.css kompiliert werden +// -------------------------------------------------- + +// my-nova Theme +// Hier können alle Variablen notiert werden, die nur Auswirkungen auf dieses Theme haben +// -------------------Beginn eigene Variablen---------------------------------- + +// --- 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; + +// --- 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; + +// --- Forms & Inputs --- +$input-border-radius: $border-radius-sm !default; +$input-bg: $white !default; +$input-border-color: #e0e0e0 !default; +$input-focus-border-color: $secondary !default; +$input-focus-box-shadow: 0 0 0 0.2rem rgba($secondary, 0.25) !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 .3s linear !default; + +// -------------------Ende eigene Variablen---------------------------------- + +// Lädt Theme-Variablen, hier aus dem "clear" +// @import '../../../../NOVA/themes/blackline/sass/variables'; +@import '../../../../NOVA/themes/clear/sass/variables'; +// @import '../../../../NOVA/themes/midnight/sass/variables'; + +// passt die Pfade an +$nova-theme-path: "../../../NOVA/themes"; +$fa-font-path: "../../../NOVA/themes/base/fontawesome/webfonts"; \ No newline at end of file diff --git a/NOVAChild/themes/my-nova/sass/my-nova.scss b/NOVAChild/themes/my-nova/sass/my-nova.scss new file mode 100644 index 0000000..47bacd6 --- /dev/null +++ b/NOVAChild/themes/my-nova/sass/my-nova.scss @@ -0,0 +1,429 @@ +// +// Platz für eigene Style Angaben in SCSS-Notation +// +// Alle Änderungen hier müssen anschließend mit einem SCSS-Compiler +// (z.B. dem JTL-Theme-Editor Plugin) nach my-nova.css kompiliert werden +// -------------------------------------------------- + +// Lädt Core-Funktionen +@import '../../../../NOVA/themes/base/sass/functions'; + +// Lädt "my-nova"-Variablen. Hier können Variablen aus Bootstrap und dem NOVA-Theme überschrieben werden. +@import "variables"; + +// Lädt Style Angaben des Themes, hier "clear". +@import '../../../../NOVA/themes/clear/sass/allstyles'; +// Für die anderen Themes müssen neben der "allstyles" des Themes auch die jeweiligen Regeln aus der "theme.scss" +// (z.B. für blackline aus der blackline.scss) übernommen werden. +// @import '../../../../NOVA/themes/blackline/sass/allstyles'; +// @import '../../../../NOVA/themes/midnight/sass/allstyles'; + +// my-nova Theme +// Hier können alle Style-Angaben notiert werden, die nur Auswirkungen auf dieses Theme haben +// ------------------- Beginn eigenes CSS ---------------------------- + +// --- 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-size: cover; + background-position: center; + background-repeat: no-repeat; + position: relative; + + // 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; + } +} + +// Sticky Header Verfeinerung (falls im Backend aktiviert) +#header-wrapper.is-sticky { + background-color: rgba(255, 255, 255, 0.95) !important; + backdrop-filter: blur(10px); + box-shadow: $box-shadow-sm; + transition: all 0.3s ease; +} + +#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: $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; + } +} + +// Mega-Menu (Dropdowns) Animation & Styling +.dropdown-menu { + border: none; + border-radius: $border-radius; + box-shadow: $box-shadow; + padding: 20px; + animation: fade-in-up 0.3s ease; +} + +@keyframes fade-in-up { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } +} + +.secure-checkout-topbar { + border-radius: $border-radius-lg; + background-color: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(10px); + box-shadow: $box-shadow-sm; +} + +// --- Suchleiste (Prominent & Einladend) --- +#search-form { + .form-control { + border-radius: 30px 0 0 30px; + border: 1px solid #e0e0e0; + padding: 10px 20px; + background-color: #f9f8f6; + transition: all 0.3s ease; + &:focus { + background-color: #ffffff; + border-color: $secondary; + box-shadow: 0 0 0 3px rgba($secondary, 0.2); + } + } + .btn-search { + border-radius: 0 30px 30px 0; + background: $primary; + color: $white; + border: 1px solid $primary; + transition: $transition-base; + &:hover { + background: darken($primary, 8%); + border-color: darken($primary, 8%); + } + } +} + +// --- 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 mit Fokus auf Texturen) --- +.productbox { + border: none; + border-radius: $border-radius-lg; + background: $white; + box-shadow: $box-shadow-sm; + transition: $transition-base; + overflow: hidden; + margin-bottom: 30px; + + // Image Zoom Effekt für Stoffe + .productbox-image { + overflow: hidden; + border-radius: $border-radius-lg $border-radius-lg 0 0; + img { + transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); + } + } + + &:hover { + transform: translateY(-5px); + box-shadow: $box-shadow; + + .productbox-image img { + transform: scale(1.08); // Sanfter Zoom auf die Stoffstruktur + } + } + + .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; + } + + // Elegante Ribbons (Sale, Neu) + .ribbon { + border-radius: 20px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 0.75rem; + padding: 4px 12px; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); + &.ribbon-sale { background-color: #e74c3c; color: white; } + &.ribbon-new { background-color: $secondary; color: white; } + } +} + +// --- Artikeldetailseite (PDP - Product Detail Page) --- +.product-detail { + // Kaufbox (Sticky auf Desktop für bessere Conversion) + @media (min-width: 992px) { + #buy-form { + position: sticky; + top: 120px; // Abstand zum (sticky) Header + padding: 25px; + background: #ffffff; + border-radius: $border-radius-lg; + box-shadow: $box-shadow-sm; + border: 1px solid rgba(0,0,0,0.03); + } + } + + // Großer, auffälliger Warenkorb-Button + #add-to-cart button { + width: 100%; + padding: 15px; + font-size: 1.1rem; + text-transform: uppercase; + letter-spacing: 1px; + } + + // Preis-Darstellung + .price_wrapper { + .price { + font-size: 2.2rem; + font-weight: 700; + color: $primary; + } + } +} + +// --- 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-attachment: fixed; + background-size: cover; + background-position: center; + } + + #content { + 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 { + 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; + } +} + +// --- Custom Scrollbar (Webkit) --- +::-webkit-scrollbar { + width: 10px; +} +::-webkit-scrollbar-track { + background: $body-bg; +} +::-webkit-scrollbar-thumb { + background: rgba($primary, 0.5); + border-radius: 10px; +} +::-webkit-scrollbar-thumb:hover { + background: $primary; +} + +// --- Mobile Menu Toggle --- +.navbar-toggler { + border: none; + background: transparent; + &:focus { + outline: none; + box-shadow: none; + } + .icon-bar { + background-color: $header-color; + height: 2px; + border-radius: 1px; + transition: $transition-base; + } +} + +// --- Forms & Checkout (Trust & Clarity) --- +.form-control { + border-radius: $border-radius-sm; + border: 1px solid #e0e0e0; + padding: 12px 15px; + transition: $transition-base; + &:focus { + border-color: $secondary; + box-shadow: 0 0 0 3px rgba($secondary, 0.15); + } +} + +.checkout-wrapper, .checkout-container { + background: $white; + border-radius: $border-radius-lg; + box-shadow: $box-shadow-sm; + padding: 30px; + margin-bottom: 30px; +} + +// --- Alerts & Notifications --- +.alert { + border: none; + border-radius: $border-radius-sm; + box-shadow: $box-shadow-sm; + &.alert-success { + background-color: rgba($primary, 0.1); + color: darken($primary, 10%); + border-left: 4px solid $primary; + } + &.alert-info { + background-color: rgba($secondary, 0.1); + color: darken($secondary, 20%); + border-left: 4px solid $secondary; + } +} \ No newline at end of file