MokoConsulting/MokoCassiopeia
1
1
Fork 0
Code Issues 4 Pull Requests Actions Packages Releases 1 Activity

03.09.01 — mod_custom hero override, palette starter files, updated descriptions #84

Merged
jmiller-moko merged 17 commits from dev/03.09.01 into main 2026-03-24 21:48:07 +00:00
Conversation 0 Commits 17 Files Changed 23 +48 -17
9 changed files with 48 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 57b4c3240e - Show all commits

3
src/language/en-GB/tpl_mokocassiopeia.ini
View File

@@ -145,6 +145,9 @@ TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_LIST_DESC="<strong>Alert link colours</strong>
TPL_MOKOCASSIOPEIA_CSS_VARS_COLORS_LABEL="Standard Colours, Grays &amp; Opacity"
TPL_MOKOCASSIOPEIA_CSS_VARS_COLORS_DESC="<strong>Named colours</strong><br><code>--blue</code>, <code>--indigo</code>, <code>--purple</code>, <code>--pink</code>, <code>--red</code>, <code>--orange</code>, <code>--yellow</code>, <code>--green</code>, <code>--teal</code>, <code>--cyan</code>, <code>--black</code>, <code>--white</code><br><br><strong>Gray scale</strong><br><code>--gray-100</code> through <code>--gray-900</code> plus <code>--white-rgb</code> and <code>--black-rgb</code><br><br><strong>Opacity utilities</strong><br><code>--opacity-0</code>, <code>--opacity-5</code>, <code>--opacity-10</code>, <code>--opacity-15</code>, <code>--opacity-20</code>, <code>--opacity-25</code>, <code>--opacity-30</code>, <code>--opacity-50</code>, <code>--opacity-75</code>, <code>--opacity-100</code>"
TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_LABEL="Hero / Banner Overlay"
TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_DESC="Applied to the <code>.custom-hero</code> / <code>.banner-overlay</code> layout. Set on <code>:root[data-bs-theme]</code> so light and dark values are independent.<br><code>--hero-height</code> — Banner height (default: <code>70vh</code>)<br><code>--hero-color</code> — Base text colour<br><code>--hero-bg-repeat</code> — Background repeat (default: <code>no-repeat</code>)<br><code>--hero-bg-attachment</code> — Background attachment (default: <code>fixed</code>)<br><code>--hero-bg-position</code> — Background position (default: <code>top center</code>)<br><code>--hero-bg-size</code> — Background size (default: <code>cover</code>)<br><code>--hero-border-bottom</code> — Bottom border (default: <code>solid var(--accent-color-secondary)</code>)<br><code>--hero-overlay-bg</code> — Overlay tint colour (light default: <code>hsla(0,0%,0%,0.1)</code> / dark default: <code>hsla(0,0%,0%,0.3)</code>)<br><code>--hero-overlay-padding</code> — Overlay inner padding (default: <code>1em</code>)<br><code>--hero-overlay-text-align</code> — Overlay text alignment (default: <code>center</code>)<br><code>--hero-overlay-text-color</code> — Overlay text colour"
TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_LABEL="Header Background"
TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_DESC="Controls the background of the topbar/header area.<br><code>--header-background-image</code> — CSS <code>background-image</code> value (default: built-in SVG pattern)<br><code>--header-background-attachment</code> — <code>fixed</code> or <code>scroll</code><br><code>--header-background-repeat</code> — e.g. <code>repeat</code>, <code>no-repeat</code><br><code>--header-background-size</code> — e.g. <code>auto</code>, <code>cover</code>, <code>contain</code>"

3
src/language/en-US/tpl_mokocassiopeia.ini
View File

@@ -145,6 +145,9 @@ TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_LIST_DESC="<strong>Alert link colors</strong>
TPL_MOKOCASSIOPEIA_CSS_VARS_COLORS_LABEL="Standard Colors, Grays &amp; Opacity"
TPL_MOKOCASSIOPEIA_CSS_VARS_COLORS_DESC="<strong>Named colors</strong><br><code>--blue</code>, <code>--indigo</code>, <code>--purple</code>, <code>--pink</code>, <code>--red</code>, <code>--orange</code>, <code>--yellow</code>, <code>--green</code>, <code>--teal</code>, <code>--cyan</code>, <code>--black</code>, <code>--white</code><br><br><strong>Gray scale</strong><br><code>--gray-100</code> through <code>--gray-900</code> plus <code>--white-rgb</code> and <code>--black-rgb</code><br><br><strong>Opacity utilities</strong><br><code>--opacity-0</code>, <code>--opacity-5</code>, <code>--opacity-10</code>, <code>--opacity-15</code>, <code>--opacity-20</code>, <code>--opacity-25</code>, <code>--opacity-30</code>, <code>--opacity-50</code>, <code>--opacity-75</code>, <code>--opacity-100</code>"
TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_LABEL="Hero / Banner Overlay"
TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_DESC="Applied to the <code>.custom-hero</code> / <code>.banner-overlay</code> layout. Set on <code>:root[data-bs-theme]</code> so light and dark values are independent.<br><code>--hero-height</code> — Banner height (default: <code>70vh</code>)<br><code>--hero-color</code> — Base text color<br><code>--hero-bg-repeat</code> — Background repeat (default: <code>no-repeat</code>)<br><code>--hero-bg-attachment</code> — Background attachment (default: <code>fixed</code>)<br><code>--hero-bg-position</code> — Background position (default: <code>top center</code>)<br><code>--hero-bg-size</code> — Background size (default: <code>cover</code>)<br><code>--hero-border-bottom</code> — Bottom border (default: <code>solid var(--accent-color-secondary)</code>)<br><code>--hero-overlay-bg</code> — Overlay tint color (light default: <code>hsla(0,0%,0%,0.1)</code> / dark default: <code>hsla(0,0%,0%,0.3)</code>)<br><code>--hero-overlay-padding</code> — Overlay inner padding (default: <code>1em</code>)<br><code>--hero-overlay-text-align</code> — Overlay text alignment (default: <code>center</code>)<br><code>--hero-overlay-text-color</code> — Overlay text color"
TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_LABEL="Header Background"
TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_DESC="Controls the background of the topbar/header area.<br><code>--header-background-image</code> — CSS <code>background-image</code> value (default: built-in SVG pattern)<br><code>--header-background-attachment</code> — <code>fixed</code> or <code>scroll</code><br><code>--header-background-repeat</code> — e.g. <code>repeat</code>, <code>no-repeat</code><br><code>--header-background-size</code> — e.g. <code>auto</code>, <code>cover</code>, <code>contain</code>"

26
src/media/css/template.css
View File

@@ -14085,14 +14085,13 @@ meter {
}
.container-banner .banner-overlay {
height: 70vh;
color: var(--body-color);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top, center;
background-size: cover;
border-bottom: solid var(--accent-color-secondary);
height: var(--hero-height, 70vh);
color: var(--hero-color, var(--body-color));
background-repeat: var(--hero-bg-repeat, no-repeat);
background-attachment: var(--hero-bg-attachment, fixed);
background-position: var(--hero-bg-position, top center);
background-size: var(--hero-bg-size, cover);
border-bottom: var(--hero-border-bottom, solid var(--accent-color-secondary));
}
.container-banner .banner-overlay .overlay {
@@ -14110,9 +14109,10 @@ meter {
-ms-flex-pack: center;
justify-content: center;
height: 100%;
padding: 1em;
text-align: center;
background-color: hsla(0, 0%, 0%, 0.5);
padding: var(--hero-overlay-padding, 1em);
text-align: var(--hero-overlay-text-align, center);
color: var(--hero-overlay-text-color, var(--body-color));
background-color: var(--hero-overlay-bg, hsla(0, 0%, 0%, 0.5));
}
.container-banner .banner-overlay .overlay .text-thin {
@@ -14782,8 +14782,6 @@ iframe {
);
}
.container-topbar {
color: var(--body-color);
background-color: var(--color-primary);
@@ -14796,7 +14794,7 @@ iframe {
.container-banner {
display: block;
margin: 0 0 2rem;
margin: 0;
}
.container-top-a,

2
src/media/css/template.min.css vendored
View File

File diff suppressed because one or more lines are too long

13
src/media/css/theme/dark.standard.css
View File

@@ -520,6 +520,19 @@ color-scheme: dark;
--gab-gray1: #868e96;
--gab-gray2: #adb5bd;
--gab-gray3: #ced4da;
/* ===== HERO / BANNER OVERLAY ===== */
--hero-height: 70vh;
--hero-color: var(--body-color);
--hero-bg-repeat: no-repeat;
--hero-bg-attachment: fixed;
--hero-bg-position: top center;
--hero-bg-size: cover;
--hero-border-bottom: solid var(--accent-color-secondary);
--hero-overlay-bg: hsla(0, 0%, 0%, 0.3);
--hero-overlay-padding: 1em;
--hero-overlay-text-align: center;
--hero-overlay-text-color: var(--body-color);
}
.btn {

2
src/media/css/theme/dark.standard.min.css vendored
View File

File diff suppressed because one or more lines are too long

13
src/media/css/theme/light.standard.css
View File

@@ -519,6 +519,19 @@ color-scheme: light;
--gab-gray1: #495057;
--gab-gray2: #6c757d;
--gab-gray3: #adb5bd;
/* ===== HERO / BANNER OVERLAY ===== */
--hero-height: 70vh;
--hero-color: var(--body-color);
--hero-bg-repeat: no-repeat;
--hero-bg-attachment: fixed;
--hero-bg-position: top center;
--hero-bg-size: cover;
--hero-border-bottom: solid var(--accent-color-secondary);
--hero-overlay-bg: hsla(0, 0%, 0%, 0.1);
--hero-overlay-padding: 1em;
--hero-overlay-text-align: center;
--hero-overlay-text-color: var(--body-color);
}
.btn {

2
src/media/css/theme/light.standard.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
src/templateDetails.xml
View File

@@ -263,6 +263,7 @@
<field name="css_vars_bootstrap_states" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_BS_STATES_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_BS_STATES_DESC" class="alert alert-light" />
<field name="css_vars_alert_list" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_LIST_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_LIST_DESC" class="alert alert-light" />
<field name="css_vars_colors" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_COLORS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_COLORS_DESC" class="alert alert-light" />
<field name="css_vars_hero" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_DESC" class="alert alert-light" />
<field name="css_vars_header" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_DESC" class="alert alert-light" />
<field name="css_vars_containers" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_CONTAINERS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_CONTAINERS_DESC" class="alert alert-light" />
<field name="css_vars_borders" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_BORDERS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_BORDERS_DESC" class="alert alert-light" />