MokoConsulting/MokoOnyx
1
0
Fork 0
Code Issues 10 Pull Requests 1 Releases 3 Wiki Activity

feat(css): extend hero-overlay effects to banner-overlay.custom-hero #7

Merged
jmiller merged 91 commits from dev into main 2026-04-26 17:46:49 +00:00
Conversation 0 Commits 91 Files Changed 3
+197 -28
3 changed files with 197 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+144
View File
@@ -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"
}
}
}
}
src/html/mod_custom/default.php
+2 -1
View File
@@ -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]
);
}
src/media/css/template.css
+51 -27
View File
@@ -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);