diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..903815e --- /dev/null +++ b/package-lock.json @@ -0,0 +1,144 @@ +{ + "name": "mokoonyx-build", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "mokoonyx-build", + "devDependencies": { + "clean-css": "^5.3.3", + "terser": "^5.39.0" + } + }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.3.13", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", + "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.0", + "@jridgewell/trace-mapping": "^0.3.24" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", + "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/source-map": { + "version": "0.3.11", + "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz", + "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.25" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.5.5", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz", + "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==", + "dev": true, + "license": "MIT" + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.31", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz", + "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, + "node_modules/acorn": { + "version": "8.16.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz", + "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==", + "dev": true, + "license": "MIT", + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/buffer-from": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", + "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/clean-css": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz", + "integrity": "sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==", + "dev": true, + "license": "MIT", + "dependencies": { + "source-map": "~0.6.0" + }, + "engines": { + "node": ">= 10.0" + } + }, + "node_modules/commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/source-map-support": { + "version": "0.5.21", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", + "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==", + "dev": true, + "license": "MIT", + "dependencies": { + "buffer-from": "^1.0.0", + "source-map": "^0.6.0" + } + }, + "node_modules/terser": { + "version": "5.46.2", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.46.2.tgz", + "integrity": "sha512-uxfo9fPcSgLDYob/w1FuL0c99MWiJDnv+5qXSQc5+Ki5NjVNsYi66INnMFBjf6uFz6OnX12piJQPF4IpjJTNTw==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "@jridgewell/source-map": "^0.3.3", + "acorn": "^8.15.0", + "commander": "^2.20.0", + "source-map-support": "~0.5.20" + }, + "bin": { + "terser": "bin/terser" + }, + "engines": { + "node": ">=10" + } + } + } +} diff --git a/src/html/mod_custom/default.php b/src/html/mod_custom/default.php index 5e03a50..501c3b4 100644 --- a/src/html/mod_custom/default.php +++ b/src/html/mod_custom/default.php @@ -25,8 +25,9 @@ $headerClass = htmlspecialchars($params->get('header_class', ''), ENT_COMPAT, 'U if ($params->get('backgroundimage')) { /** @var Joomla\CMS\WebAsset\WebAssetManager $wa */ $wa = $app->getDocument()->getWebAssetManager(); + $bgUrl = Uri::root(true) . '/' . HTMLHelper::_('cleanImageURL', $params->get('backgroundimage'))->url; $wa->addInlineStyle( - '#' . $modId . '{background-image: url("' . Uri::root(true) . '/' . HTMLHelper::_('cleanImageURL', $params->get('backgroundimage'))->url . '");}', + '#' . $modId . '{--hero-bg-image: url("' . $bgUrl . '"); background-image: var(--hero-bg-image);}', ['name' => $modId] ); } diff --git a/src/media/css/template.css b/src/media/css/template.css index 0fb22b4..e521506 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -101,26 +101,34 @@ form { width: 280px; } -.drawer-toggle-left{ +button.drawer-toggle-left, +.drawer-toggle-left.btn { position: fixed; top: 50%; left: 0px; z-index: 1050; - background-color: var(--nav-bg-color); - color: var(--nav-text-color, gray); + background-color: var(--accent-color, var(--color-primary, #2a69b8)) !important; + color: var(--accent-color-text, #fff) !important; + border-color: var(--accent-color, var(--color-primary, #2a69b8)) !important; padding-left: .5rem; padding-right: .5rem; + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; } -.drawer-toggle-right{ +button.drawer-toggle-right, +.drawer-toggle-right.btn { position: fixed; top: 50%; right: 0px; z-index: 1050; - background-color: var(--nav-bg-color); - color: var(--nav-text-color, gray); + background-color: var(--accent-color, var(--color-primary, #2a69b8)) !important; + color: var(--accent-color-text, #fff) !important; + border-color: var(--accent-color, var(--color-primary, #2a69b8)) !important; padding-left: .5rem; padding-right: .5rem; + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; } hr { @@ -13623,12 +13631,14 @@ a.navbar-brand { .btn-primary { background-color: var(--color-primary, #112855); border-color: var(--color-primary, #112855); + color: #000; } .btn-primary:active, .btn-primary:focus { background-color: var(--color-active); border-color: var(--color-active); + color: #000; } .btn-group { @@ -13925,13 +13935,22 @@ meter { } } -/* ── HERO CARD BASE ── */ +/* ── HERO WRAPPER (module wrapper, full-width centering container) ── */ .hero { display: flex; - justify-content: center; - align-items: center; + justify-content: var(--hero-justify, center); + align-items: var(--hero-align, center); width: 100%; - min-height: var(--banner-min-height, 60vh); + min-height: var(--hero-min-height, 75vh); + background-image: var(--hero-bg-image, none); + background-repeat: var(--hero-bg-repeat, no-repeat); + background-attachment: var(--hero-bg-attachment, fixed); + background-position: var(--hero-bg-position, center); + background-size: var(--hero-bg-size, cover); +} + +/* ── HERO CARD BASE (the .card inside the hero wrapper) ── */ +.hero .card { max-width: var(--hero-card-max-width, 600px); padding: var(--hero-card-padding-y, 3rem) var(--hero-card-padding-x, 2rem); background-color: var(--hero-card-bg, var(--hero-primary-bg-color, #0d1e3a)); @@ -13940,23 +13959,21 @@ meter { background-position: center; color: var(--hero-card-color, var(--hero-primary-color, #f1f5f9)); border-radius: var(--hero-card-border-radius, .5rem); -} - -.hero .card { + text-align: var(--hero-card-text-align, center); margin-left: auto; margin-right: auto; - text-align: center; + border: none; } -/* ── PRIMARY VARIANT (uses default card vars) ── */ -.hero#primary { +/* ── PRIMARY VARIANT ── */ +.hero#primary .card { background-color: var(--hero-card-bg, #0d1e3a); background-image: var(--hero-card-overlay, none); color: var(--hero-card-color, #f1f5f9); } /* ── SECONDARY / ALTERNATIVE VARIANT ── */ -.hero#secondary { +.hero#secondary .card { max-width: var(--hero-alt-card-max-width, 600px); padding: var(--hero-alt-card-padding-y, 3rem) var(--hero-alt-card-padding-x, 2rem); background-color: var(--hero-alt-card-bg, #080f1e); @@ -13978,14 +13995,14 @@ meter { background-image: none; } .hero { - max-width: 100%; - width: 100%; min-height: 100vh; min-height: 100dvh; - border-radius: 0; - display: flex; flex-direction: column; - justify-content: center; + } + .hero .card { + max-width: 100%; + width: 100%; + border-radius: 0; } } @@ -14805,14 +14822,16 @@ iframe { } /* HERO CONTAINER */ -.hero-overlay { +.hero-overlay, +.banner-overlay.custom-hero { position: relative; overflow: hidden; isolation: isolate; } /* BACKGROUND IMAGE LAYER (inherits from parent hero section) */ -.hero-overlay::before { +.hero-overlay::before, +.banner-overlay.custom-hero::before { content: ""; position: absolute; inset: 0; @@ -14826,7 +14845,8 @@ iframe { } /* CENTER SOFTENING LAYER */ -.hero-overlay::after { +.hero-overlay::after, +.banner-overlay.custom-hero::after { content: ""; position: absolute; inset: 0; @@ -14852,7 +14872,8 @@ iframe { } /* TEXT OVERLAY PANEL */ -.hero-overlay .overlay { +.hero-overlay .overlay, +.banner-overlay.custom-hero .overlay { position: relative; z-index: 0; @@ -16971,11 +16992,14 @@ body:not(.has-sidebar-right) .site-grid .container-component { } .btn-primary { + --bs-btn-color: #000; --bs-btn-bg: #333; --bs-btn-border-color: #333; + --bs-btn-hover-color: #000; --bs-btn-hover-bg: #555; --bs-btn-hover-border-color: #555; --bs-btn-focus-shadow-rgb: 49, 132, 253; + --bs-btn-active-color: #000; --bs-btn-active-bg: #555; --bs-btn-active-border-color: #555; --bs-btn-disabled-bg: #A0A0A0; @@ -18961,7 +18985,7 @@ nav[data-toggle=toc] .nav-link.active+ul{ /* ===== BOOTSTRAP & JOOMLA BUTTONS ===== */ .btn-primary { - --btn-color: white; + --btn-color: #000; --btn-bg: var(--color-primary, #112855); --btn-border-color: var(--color-primary, #112855); --btn-hover-bg: color-mix(in srgb, var(--color-primary, #112855) 85%, black);