Final polish: custom scrollbar, mobile menu, checkout forms, and alerts
This commit is contained in:
AI Assistant
64
NOVAChild/themes/my-nova/sass/_variables.scss
Normal file
64
NOVAChild/themes/my-nova/sass/_variables.scss
Normal file
@@ -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";
|
||||||
429
NOVAChild/themes/my-nova/sass/my-nova.scss
Normal file
429
NOVAChild/themes/my-nova/sass/my-nova.scss
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user