diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..72f9fd4 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,17 @@ +# Force LF line endings for all text files +* text=auto eol=lf + +# Explicitly mark binary files +*.png binary +*.jpg binary +*.jpeg binary +*.gif binary +*.ico binary +*.svg text eol=lf +*.woff binary +*.woff2 binary +*.ttf binary +*.eot binary +*.zip binary +*.gz binary +*.tar binary diff --git a/.github/workflows/auto-dev-issue.yml b/.github/workflows/auto-dev-issue.yml index ba7c14b..b0fe690 100644 --- a/.github/workflows/auto-dev-issue.yml +++ b/.github/workflows/auto-dev-issue.yml @@ -86,7 +86,7 @@ jobs: # Check for existing issue with same title prefix EXISTING=$(curl -sf -H "Authorization: token ${{ secrets.GA_TOKEN }}" "${{GITEA_URL:-https://git.mokoconsulting.tech}}/api/v1/repos/${{ github.repository }}/issues?state=open&per_page=10" 2>/dev/null \ - --jq ".[] | select(.title | startswith(\"${TITLE_PREFIX}(${VERSION})\")) | .number" 2>/dev/null | head -1) + | jq -r ".[] | select(.title | startswith(\"${TITLE_PREFIX}(${VERSION})\")) | .number" 2>/dev/null | head -1) if [ -n "$EXISTING" ]; then echo "ℹ️ Issue #${EXISTING} already exists for ${VERSION}" >> $GITHUB_STEP_SUMMARY @@ -164,7 +164,7 @@ jobs: IFS='|' read -r SUB_TITLE _ _ <<< "$SUB" SUB_FULL_TITLE="${TITLE_PREFIX}(${VERSION}): ${SUB_TITLE}" SUB_NUM=$(curl -sf -H "Authorization: token ${{ secrets.GA_TOKEN }}" "${{GITEA_URL:-https://git.mokoconsulting.tech}}/api/v1/repos/${{ github.repository }}/issues?state=open&per_page=20" 2>/dev/null \ - --jq ".[] | select(.title == \"${SUB_FULL_TITLE}\") | .number" 2>/dev/null | head -1) + | jq -r ".[] | select(.title == \"${SUB_FULL_TITLE}\") | .number" 2>/dev/null | head -1) if [ -n "$SUB_NUM" ]; then curl -sf -H "Authorization: token ${{ secrets.GA_TOKEN }}" "${{GITEA_URL:-https://git.mokoconsulting.tech}}/api/v1/repos/${{ github.repository }}/issues/${SUB_NUM}" 2>/dev/null -X PATCH \ -f body="$(curl -sf -H "Authorization: token ${{ secrets.GA_TOKEN }}" "${{GITEA_URL:-https://git.mokoconsulting.tech}}/api/v1/repos/${{ github.repository }}/issues/${SUB_NUM}" | jq -r '.body' 2>/dev/null) diff --git a/.github/workflows/auto-release.yml b/.github/workflows/auto-release.yml index 4eb0ee2..8933815 100644 --- a/.github/workflows/auto-release.yml +++ b/.github/workflows/auto-release.yml @@ -53,7 +53,7 @@ permissions: jobs: release: name: Build & Release Pipeline - runs-on: ubuntu-latest + runs-on: release if: >- github.event.pull_request.merged == true || github.event_name == 'workflow_dispatch' @@ -64,9 +64,12 @@ jobs: token: ${{ secrets.GA_TOKEN || github.token }} fetch-depth: 0 + - name: Set authenticated push URL + run: git remote set-url origin "https://jmiller:${{ secrets.GA_TOKEN }}@git.mokoconsulting.tech/${{ github.repository }}.git" + - name: Setup MokoStandards tools env: - GH_TOKEN: ${{ secrets.GA_TOKEN || github.token }} + GA_TOKEN: ${{ secrets.GA_TOKEN || github.token }} COMPOSER_AUTH: '{"github-oauth":{"github.com":"${{ secrets.GA_TOKEN || github.token }}"}}' run: | git clone --depth 1 --branch version/04 --quiet \ diff --git a/.github/workflows/branch-freeze.yml b/.github/workflows/branch-freeze.yml index dc334f2..45d7044 100644 --- a/.github/workflows/branch-freeze.yml +++ b/.github/workflows/branch-freeze.yml @@ -67,7 +67,7 @@ jobs: if [ "$ACTION" = "freeze" ]; then # Check if ruleset already exists EXISTING=$(curl -sf -H "Authorization: token ${{ secrets.GA_TOKEN }}" "${{GITEA_URL:-https://git.mokoconsulting.tech}}/api/v1/repos/${{ github.repository }}/rulesets" 2>/dev/null \ - --jq ".[] | select(.name == \"${RULESET_NAME}\") | .id" 2>/dev/null || true) + | jq -r ".[] | select(.name == \"${RULESET_NAME}\") | .id" 2>/dev/null || true) if [ -n "$EXISTING" ]; then echo "Branch \`${BRANCH}\` is already frozen (ruleset #${EXISTING})" >> $GITHUB_STEP_SUMMARY @@ -99,7 +99,7 @@ jobs: elif [ "$ACTION" = "unfreeze" ]; then # Find and delete the freeze ruleset RULESET_ID=$(curl -sf -H "Authorization: token ${{ secrets.GA_TOKEN }}" "${{GITEA_URL:-https://git.mokoconsulting.tech}}/api/v1/repos/${{ github.repository }}/rulesets" 2>/dev/null \ - --jq ".[] | select(.name == \"${RULESET_NAME}\") | .id" 2>/dev/null || true) + | jq -r ".[] | select(.name == \"${RULESET_NAME}\") | .id" 2>/dev/null || true) if [ -z "$RULESET_ID" ]; then echo "Branch \`${BRANCH}\` is not frozen (no ruleset found)" >> $GITHUB_STEP_SUMMARY diff --git a/.github/workflows/deploy-manual.yml b/.github/workflows/deploy-manual.yml index 9d8c732..9d39ca1 100644 --- a/.github/workflows/deploy-manual.yml +++ b/.github/workflows/deploy-manual.yml @@ -32,7 +32,7 @@ permissions: jobs: deploy: name: SFTP Deploy to Dev - runs-on: ubuntu-latest + runs-on: release steps: - name: Checkout repository diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 7c0dc93..0b0d51d 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -47,7 +47,7 @@ env: jobs: build: name: Build Release Package - runs-on: ubuntu-latest + runs-on: release steps: - name: Checkout repository @@ -139,8 +139,8 @@ jobs: TOKEN="${{ secrets.GA_TOKEN }}" API="${GITEA_URL}/api/v1/repos/${GITEA_ORG}/${GITEA_REPO}" - # Find and delete existing release by tag - RELEASE_ID=$(curl -sf -H "Authorization: token ${TOKEN}" \ + # Find and delete existing release by tag (may not exist — ignore 404) + RELEASE_ID=$(curl -s -H "Authorization: token ${TOKEN}" \ "${API}/releases/tags/${TAG}" 2>/dev/null | jq -r '.id // empty') if [ -n "$RELEASE_ID" ]; then @@ -258,7 +258,7 @@ jobs: --arg name "${EXT_ELEMENT} ${VERSION} ${STABILITY^} (mirror)" \ --arg body "Mirror of Gitea release. SHA-256: \`${SHA256}\`" \ --argjson pre "$IS_PRE" \ - '{tag_name: $tag, target_commitish: $target, name: $name, body: $body, prerelease: $pre}' + '{tag_name: $tag, target_commitish: $target, name: $name, body: $body, prerelease: $pre, draft: false}' )" | jq -r '.id') # Upload ZIP @@ -367,19 +367,57 @@ jobs: print(f"Updated {xml_tag} channel: version={version}, sha={sha256[:16]}..., date={date}") PYEOF - - name: "Commit updates.xml" + - name: "Commit updates.xml to current branch and main" run: | if git diff --quiet updates.xml 2>/dev/null; then echo "No changes to updates.xml" exit 0 fi + + STABILITY="${{ steps.meta.outputs.stability }}" + VERSION="${{ steps.meta.outputs.version }}" + CURRENT_BRANCH="${{ github.ref_name }}" + TOKEN="${{ secrets.GA_TOKEN }}" + TOKEN="${{ secrets.GA_TOKEN }}" + git config --local user.email "gitea-actions[bot]@mokoconsulting.tech" git config --local user.name "gitea-actions[bot]" git add updates.xml - git commit -m "chore: update ${STABILITY} SHA-256 for ${{ steps.meta.outputs.version }} [skip ci]" \ + git commit -m "chore: update ${STABILITY} SHA-256 for ${VERSION} [skip ci]" \ --author="gitea-actions[bot] " + + # Set push URL with GA_TOKEN for authenticated pushes (branch protection requires jmiller) + git remote set-url origin "https://jmiller:${{ secrets.GA_TOKEN }}@git.mokoconsulting.tech/${{ github.repository }}.git" + + # Push to current branch git push || true + # Also update updates.xml on main via Gitea API (git push blocked by branch protection) + if [ "$CURRENT_BRANCH" != "main" ]; then + GA_TOKEN="${{ secrets.GA_TOKEN }}" + API="${GITEA_URL}/api/v1/repos/${{ github.repository }}" + + # Get current file SHA on main (required for update) + FILE_SHA=$(curl -sf -H "Authorization: token ${GA_TOKEN}" \ + "${API}/contents/updates.xml?ref=main" | jq -r '.sha // empty') + + if [ -n "$FILE_SHA" ]; then + # Base64-encode the updates.xml content + CONTENT=$(base64 -w0 updates.xml) + + curl -sf -X PUT -H "Authorization: token ${GA_TOKEN}" \ + -H "Content-Type: application/json" \ + "${API}/contents/updates.xml" \ + -d "$(jq -n \ + --arg content "$CONTENT" \ + --arg sha "$FILE_SHA" \ + --arg msg "chore: update ${STABILITY} channel to ${VERSION} on main [skip ci]" \ + --arg branch "main" \ + '{content: $content, sha: $sha, message: $msg, branch: $branch}' + )" > /dev/null && echo "updates.xml synced to main via API" || echo "WARNING: failed to sync updates.xml to main" + fi + fi + - name: Summary run: | VERSION="${{ steps.meta.outputs.version }}" diff --git a/.github/workflows/repository-cleanup.yml b/.github/workflows/repository-cleanup.yml index 8a17a97..3c2270d 100644 --- a/.github/workflows/repository-cleanup.yml +++ b/.github/workflows/repository-cleanup.yml @@ -504,7 +504,7 @@ jobs: DELETED=0 curl -sf -H "Authorization: token ${{ secrets.GA_TOKEN }}" "${{GITEA_URL:-https://git.mokoconsulting.tech}}/api/v1/repos/${{ github.repository }}/issues?state=closed&since=1970-01-01T00:00:00Z&per_page=100&sort=updated&direction=asc" 2>/dev/null \ - --jq ".[] | select(.closed_at < \"${CUTOFF}\") | .number" 2>/dev/null | while read -r num; do + | jq -r ".[] | select(.closed_at < \"${CUTOFF}\") | .number" 2>/dev/null | while read -r num; do # Lock and close with "not_planned" to mark as cleaned up curl -sf -H "Authorization: token ${{ secrets.GA_TOKEN }}" "${{GITEA_URL:-https://git.mokoconsulting.tech}}/api/v1/repos/${{ github.repository }}/issues/${num}/lock" 2>/dev/null -X PUT -f lock_reason="resolved" --silent 2>/dev/null || true echo " Locked issue #${num}" >> $GITHUB_STEP_SUMMARY diff --git a/.github/workflows/update-server.yml b/.github/workflows/update-server.yml index cd98804..4f1c117 100644 --- a/.github/workflows/update-server.yml +++ b/.github/workflows/update-server.yml @@ -53,7 +53,7 @@ permissions: jobs: update-xml: name: Update updates.xml - runs-on: ubuntu-latest + runs-on: release if: >- github.event.pull_request.merged == true || github.event_name == 'workflow_dispatch' diff --git a/.gitignore b/.gitignore index 2efa088..6580c5c 100644 --- a/.gitignore +++ b/.gitignore @@ -198,5 +198,8 @@ venv/ *.coverage hypothesis/ -src/media/css/theme/dark.custom.css -src/media/css/theme/light.custom.css +# Custom theme palettes (site-specific, not version controlled) +src/media/css/theme/*.custom.css +src/media/css/theme/*.custom.min.css +src/templates/*.custom.css +templates/*.custom.css diff --git a/CHANGELOG.md b/CHANGELOG.md index 19339fb..22a17a8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,48 @@ All notable changes to the MokoCassiopeia Joomla template are documented in this The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [03.10.00] - 2026-04-18 — Bridge Release (MokoCassiopeia → MokoOnyx) + +### Important +- **Template Rename** — MokoCassiopeia is being renamed to **MokoOnyx**. This bridge release automatically migrates your template settings, menu assignments, and files to the new name. MokoCassiopeia can be safely uninstalled after this update. + +### Added +- **Offline page redesign** — Full-viewport background from Joomla offline_image or header background, glass card overlay, centered logo with glow, login accordion, copyright footer +- **CSS variable click-to-copy** — Text containing `--variable-name` patterns is wrapped in clickable chips that copy to clipboard with toast notification +- **Brand-aside 3-column layout** — Flex columns like top-a with card style +- **mod_stats table layout** — Converted from definition list to semantic table +- **Favicon multi-format support** — Now handles PNG, JPEG, GIF, WebP, BMP (not just PNG) +- **Theme variables** — `--theme-fab-bg`, `--theme-fab-color`, `--theme-fab-btn-bg`, `--theme-fab-border`, `--offline-card-bg` +- **Footer CSS variables** — Added to CSS Variables reference tab +- **Bridge migration script** — `helper/bridge.php` handles automatic MokoCassiopeia → MokoOnyx migration +- **Dedicated release runner** — Release workflows run on isolated `release` label runner +- **Runner fleet** — 3 CI + 1 release runner (12 concurrent jobs) + +### Changed +- **Gitea-primary CI/CD** — All workflows use Gitea API, GitHub is backup for stable/RC only +- **Theme switcher** — Larger, bordered, theme-aware colors (off-white on dark, primary on light) +- **Auto switch** — Red when off, green when on +- **A11y toolbar** — Theme-aware colors for dark mode visibility +- **Search button border** — Matches input border (`--input-border-color`) +- **Offline message** — 0=hidden, 1=custom message, 2=system language string +- **Light theme fonts** — Fixed trailing `)` syntax error, normalized quote style to match dark +- **`--accent-color-secondary`** — Unified to `#6fb3ff` across both themes +- **`--alert-color`** — Set to `#000` in light theme + +### Removed +- Brand showcase tab (redundant with theme preview) +- Position selectors for a11y/theme FAB (forced to bottom-right) +- Custom theme CSS from git tracking (site-specific, gitignored) + +### Fixed +- SHA-256 checksum format — Removed `sha256:` prefix (Joomla expects raw hex) +- Favicon path resolution — Strips `#joomlaImage://` fragment, tries multiple path candidates +- `REQUIRE_SIGNIN_VIEW` — Set to `false` for public release downloads +- Release workflow — Uses Gitea API to update `updates.xml` on main (bypasses branch protection) +- Language loading on offline page — `com_users` and core language files loaded explicitly + +--- + ## [Unreleased] - 2026-04-02 ### Added diff --git a/README.md b/README.md index 00684c6..751566d 100644 --- a/README.md +++ b/README.md @@ -9,11 +9,13 @@ INGROUP: MokoCassiopeia.Documentation REPO: https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia FILE: ./README.md - VERSION: 03.09.14 + VERSION: 03.10.07 BRIEF: Documentation for MokoCassiopeia template --> -# MokoCassiopeia Template +# MokoCassiopeia → MokoOnyx + +> **This template is being renamed to MokoOnyx.** Version 03.10.07 is the bridge release that automatically migrates your settings. After updating, MokoOnyx will be your active template and MokoCassiopeia can be safely uninstalled. **A Modern, Lightweight Joomla Template Based on Cassiopeia** diff --git a/composer.json b/composer.json index 8533f92..59cad58 100644 --- a/composer.json +++ b/composer.json @@ -1,6 +1,6 @@ { "name": "mokoconsulting/mokocassiopeia", - "description": "MokoCassiopeia \u2014 Joomla site template based on Cassiopeia", + "description": "MokoCassiopeia \u00e2\u20ac\u201d Joomla site template based on Cassiopeia", "type": "joomla-template", "license": "GPL-3.0-or-later", "authors": [ @@ -10,8 +10,8 @@ } ], "require": { - "mokoconsulting-tech/enterprise": "dev-version/04", - "php": ">=8.1" + "php": ">=8.1", + "ext-zip": "*" }, "require-dev": { "mokoconsulting-tech/enterprise": "^4.0" diff --git a/src/helper/bridge.php b/src/helper/bridge.php new file mode 100644 index 0000000..71d2546 --- /dev/null +++ b/src/helper/bridge.php @@ -0,0 +1,360 @@ + + * + * This file is part of a Moko Consulting project. + * + * SPDX-License-Identifier: GPL-3.0-or-later + */ + +/** + * Bridge migration helper — MokoCassiopeia → MokoOnyx + * + * Called from script.php during the v03.10.00 update. Copies the template + * to the new directory name, migrates database records, and sets MokoOnyx + * as the active site template. + */ + +defined('_JEXEC') or die; + +use Joomla\CMS\Factory; +use Joomla\CMS\Filesystem\File; +use Joomla\CMS\Filesystem\Folder; +use Joomla\CMS\Log\Log; + +class MokoBridgeMigration +{ + private const OLD_NAME = 'mokocassiopeia'; + private const NEW_NAME = 'mokoonyx'; + + private const OLD_DISPLAY = 'MokoCassiopeia'; + private const NEW_DISPLAY = 'MokoOnyx'; + + /** + * Run the full migration. + * + * @return bool True on success, false on failure. + */ + public static function run(): bool + { + $app = Factory::getApplication(); + $db = Factory::getDbo(); + + // 1. Copy template files + if (!self::copyTemplateFiles()) { + $app->enqueueMessage( + 'MokoOnyx migration: failed to copy template files. ' + . 'You can manually copy templates/mokocassiopeia to templates/mokoonyx.', + 'error' + ); + return false; + } + + // 2. Copy media files + if (!self::copyMediaFiles()) { + $app->enqueueMessage( + 'MokoOnyx migration: failed to copy media files. ' + . 'You can manually copy media/templates/site/mokocassiopeia to media/templates/site/mokoonyx.', + 'warning' + ); + } + + // 3. Rename internals in the new copy (templateDetails.xml, language files, etc.) + self::renameInternals(); + + // 4. Register the new template in the database + self::migrateDatabase($db); + + // 5. Notify the admin + $app->enqueueMessage( + 'MokoCassiopeia has been renamed to MokoOnyx.
' + . 'Your template settings have been migrated automatically. ' + . 'MokoOnyx is now your active site template. ' + . 'You can safely uninstall MokoCassiopeia from Extensions → Manage.', + 'success' + ); + + self::log('Bridge migration completed successfully.'); + return true; + } + + /** + * Copy template directory. + */ + private static function copyTemplateFiles(): bool + { + $src = JPATH_ROOT . '/templates/' . self::OLD_NAME; + $dst = JPATH_ROOT . '/templates/' . self::NEW_NAME; + + if (is_dir($dst)) { + self::log('MokoOnyx template directory already exists — skipping copy.'); + return true; + } + + if (!is_dir($src)) { + self::log('Source template directory not found: ' . $src, 'error'); + return false; + } + + return Folder::copy($src, $dst); + } + + /** + * Copy media directory. + */ + private static function copyMediaFiles(): bool + { + $src = JPATH_ROOT . '/media/templates/site/' . self::OLD_NAME; + $dst = JPATH_ROOT . '/media/templates/site/' . self::NEW_NAME; + + if (is_dir($dst)) { + self::log('MokoOnyx media directory already exists — skipping copy.'); + return true; + } + + if (!is_dir($src)) { + self::log('Source media directory not found: ' . $src, 'warning'); + return true; // Non-critical + } + + return Folder::copy($src, $dst); + } + + /** + * Rename internal references in the copied template. + */ + private static function renameInternals(): void + { + $base = JPATH_ROOT . '/templates/' . self::NEW_NAME; + $mediaBase = JPATH_ROOT . '/media/templates/site/' . self::NEW_NAME; + + // templateDetails.xml — name, element, update servers, paths + $manifest = $base . '/templateDetails.xml'; + if (is_file($manifest)) { + $content = file_get_contents($manifest); + $content = str_replace(self::OLD_DISPLAY, self::NEW_DISPLAY, $content); + $content = str_replace(self::OLD_NAME, self::NEW_NAME, $content); + // Update the update server URLs to point to MokoOnyx repo + $content = str_replace('MokoCassiopeia', 'MokoOnyx', $content); + file_put_contents($manifest, $content); + self::log('Updated templateDetails.xml for MokoOnyx.'); + } + + // joomla.asset.json + $assetFile = $base . '/joomla.asset.json'; + if (is_file($assetFile)) { + $content = file_get_contents($assetFile); + $content = str_replace(self::OLD_NAME, self::NEW_NAME, $content); + $content = str_replace(self::OLD_DISPLAY, self::NEW_DISPLAY, $content); + file_put_contents($assetFile, $content); + } + + // Language files + $langDirs = [ + $base . '/language/en-GB', + $base . '/language/en-US', + ]; + foreach ($langDirs as $langDir) { + if (!is_dir($langDir)) continue; + + foreach (glob($langDir . '/*mokocassiopeia*') as $file) { + $newFile = str_replace(self::OLD_NAME, self::NEW_NAME, $file); + if (is_file($file)) { + $content = file_get_contents($file); + $content = str_replace('MOKOCASSIOPEIA', 'MOKOONYX', $content); + $content = str_replace(self::OLD_DISPLAY, self::NEW_DISPLAY, $content); + $content = str_replace(self::OLD_NAME, self::NEW_NAME, $content); + file_put_contents($newFile, $content); + if ($newFile !== $file) { + File::delete($file); + } + } + } + } + + // script.php — class name + $scriptFile = $base . '/script.php'; + if (is_file($scriptFile)) { + $content = file_get_contents($scriptFile); + $content = str_replace('Tpl_MokocassiopeiaInstallerScript', 'Tpl_MokoonyxInstallerScript', $content); + $content = str_replace(self::OLD_DISPLAY, self::NEW_DISPLAY, $content); + $content = str_replace(self::OLD_NAME, self::NEW_NAME, $content); + // Remove the bridge migration call from the new template's script + $content = preg_replace( + '/\/\/ Bridge migration.*?MokoBridgeMigration::run\(\);/s', + '// Migration complete — this is MokoOnyx', + $content + ); + file_put_contents($scriptFile, $content); + } + + // Remove bridge helper from the new template (not needed) + $bridgeFile = $base . '/helper/bridge.php'; + if (is_file($bridgeFile)) { + File::delete($bridgeFile); + } + + self::log('Renamed internal references in MokoOnyx.'); + } + + /** + * Migrate database records: template_styles, menu assignments. + */ + private static function migrateDatabase(\Joomla\Database\DatabaseInterface $db): void + { + // Get existing MokoCassiopeia styles + $query = $db->getQuery(true) + ->select('*') + ->from('#__template_styles') + ->where($db->quoteName('template') . ' = ' . $db->quote(self::OLD_NAME)) + ->where($db->quoteName('client_id') . ' = 0'); + $oldStyles = $db->setQuery($query)->loadObjectList(); + + if (empty($oldStyles)) { + self::log('No MokoCassiopeia styles found in database.', 'warning'); + return; + } + + foreach ($oldStyles as $oldStyle) { + // Check if MokoOnyx style already exists + $query = $db->getQuery(true) + ->select('COUNT(*)') + ->from('#__template_styles') + ->where($db->quoteName('template') . ' = ' . $db->quote(self::NEW_NAME)) + ->where($db->quoteName('title') . ' = ' . $db->quote( + str_replace(self::OLD_DISPLAY, self::NEW_DISPLAY, $oldStyle->title) + )); + $exists = (int) $db->setQuery($query)->loadResult(); + + if ($exists > 0) { + continue; + } + + // Create new style with same params + $newStyle = clone $oldStyle; + unset($newStyle->id); + $newStyle->template = self::NEW_NAME; + $newStyle->title = str_replace(self::OLD_DISPLAY, self::NEW_DISPLAY, $oldStyle->title); + + // Update params: replace any mokocassiopeia paths + $params = $newStyle->params; + if (is_string($params)) { + $params = str_replace(self::OLD_NAME, self::NEW_NAME, $params); + $newStyle->params = $params; + } + + $db->insertObject('#__template_styles', $newStyle, 'id'); + $newId = $newStyle->id; + + // Copy menu assignments + $query = $db->getQuery(true) + ->select('menuid') + ->from('#__template_styles_menus') // Joomla 5 uses this table + ->where('template_style_id = ' . (int) $oldStyle->id); + + try { + $menuIds = $db->setQuery($query)->loadColumn(); + foreach ($menuIds as $menuId) { + $obj = (object) [ + 'template_style_id' => $newId, + 'menuid' => $menuId, + ]; + $db->insertObject('#__template_styles_menus', $obj); + } + } catch (\Exception $e) { + // Table may not exist in all Joomla versions + } + + // If this was the default style, make MokoOnyx the default + if ($oldStyle->home == 1) { + // Set MokoOnyx as default + $query = $db->getQuery(true) + ->update('#__template_styles') + ->set($db->quoteName('home') . ' = 1') + ->where('id = ' . (int) $newId); + $db->setQuery($query)->execute(); + + // Unset MokoCassiopeia as default + $query = $db->getQuery(true) + ->update('#__template_styles') + ->set($db->quoteName('home') . ' = 0') + ->where('id = ' . (int) $oldStyle->id); + $db->setQuery($query)->execute(); + + self::log('Set MokoOnyx as default site template.'); + } + } + + // Register the new template in the extensions table + self::registerExtension($db); + + self::log('Database migration completed. ' . count($oldStyles) . ' style(s) migrated.'); + } + + /** + * Register MokoOnyx in the extensions table so Joomla recognizes it. + */ + private static function registerExtension(\Joomla\Database\DatabaseInterface $db): void + { + // Check if already registered + $query = $db->getQuery(true) + ->select('extension_id') + ->from('#__extensions') + ->where($db->quoteName('element') . ' = ' . $db->quote(self::NEW_NAME)) + ->where($db->quoteName('type') . ' = ' . $db->quote('template')); + $existing = $db->setQuery($query)->loadResult(); + + if ($existing) { + self::log('MokoOnyx already registered in extensions table.'); + return; + } + + // Get the old extension record as a base + $query = $db->getQuery(true) + ->select('*') + ->from('#__extensions') + ->where($db->quoteName('element') . ' = ' . $db->quote(self::OLD_NAME)) + ->where($db->quoteName('type') . ' = ' . $db->quote('template')); + $oldExt = $db->setQuery($query)->loadObject(); + + if (!$oldExt) { + self::log('MokoCassiopeia extension record not found.', 'warning'); + return; + } + + $newExt = clone $oldExt; + unset($newExt->extension_id); + $newExt->element = self::NEW_NAME; + $newExt->name = self::NEW_NAME; + + // Update manifest_cache with new name + $cache = json_decode($newExt->manifest_cache, true); + if (is_array($cache)) { + $cache['name'] = self::NEW_DISPLAY; + $newExt->manifest_cache = json_encode($cache); + } + + $db->insertObject('#__extensions', $newExt, 'extension_id'); + self::log('Registered MokoOnyx in extensions table (ID: ' . $newExt->extension_id . ').'); + } + + /** + * Log a message. + */ + private static function log(string $message, string $priority = 'info'): void + { + $priorities = [ + 'info' => Log::INFO, + 'warning' => Log::WARNING, + 'error' => Log::ERROR, + ]; + + Log::addLogger( + ['text_file' => 'mokocassiopeia_bridge.log.php'], + Log::ALL, + ['mokocassiopeia_bridge'] + ); + + Log::add($message, $priorities[$priority] ?? Log::INFO, 'mokocassiopeia_bridge'); + } +} diff --git a/src/helper/favicon.php b/src/helper/favicon.php index 2567e86..78d6269 100644 --- a/src/helper/favicon.php +++ b/src/helper/favicon.php @@ -14,6 +14,8 @@ defined('_JEXEC') or die; +use Joomla\CMS\Log\Log; + class MokoFaviconHelper { /** @@ -39,7 +41,13 @@ class MokoFaviconHelper */ public static function generate(string $sourcePath, string $outputDir): bool { - if (!is_file($sourcePath) || !extension_loaded('gd')) { + if (!extension_loaded('gd')) { + Log::add('Favicon: GD extension not loaded', Log::WARNING, 'mokocassiopeia'); + return false; + } + + if (!is_file($sourcePath)) { + Log::add('Favicon: source file not found: ' . $sourcePath, Log::WARNING, 'mokocassiopeia'); return false; } @@ -55,8 +63,24 @@ class MokoFaviconHelper return true; } - $source = imagecreatefrompng($sourcePath); + // Detect image type and load accordingly + $imageInfo = @getimagesize($sourcePath); + if ($imageInfo === false) { + Log::add('Favicon: cannot read image info from ' . $sourcePath, Log::WARNING, 'mokocassiopeia'); + return false; + } + + $source = match ($imageInfo[2]) { + IMAGETYPE_PNG => @imagecreatefrompng($sourcePath), + IMAGETYPE_JPEG => @imagecreatefromjpeg($sourcePath), + IMAGETYPE_GIF => @imagecreatefromgif($sourcePath), + IMAGETYPE_WEBP => function_exists('imagecreatefromwebp') ? @imagecreatefromwebp($sourcePath) : false, + IMAGETYPE_BMP => function_exists('imagecreatefrombmp') ? @imagecreatefrombmp($sourcePath) : false, + default => false, + }; + if (!$source) { + Log::add('Favicon: unsupported image type (' . ($imageInfo['mime'] ?? 'unknown') . ') at ' . $sourcePath, Log::WARNING, 'mokocassiopeia'); return false; } @@ -162,7 +186,7 @@ class MokoFaviconHelper */ public static function getHeadTags(string $basePath): string { - $basePath = rtrim($basePath, '/'); + $basePath = htmlspecialchars(rtrim($basePath, '/'), ENT_QUOTES, 'UTF-8'); return '' . "\n" . '' . "\n" diff --git a/src/helper/minify.php b/src/helper/minify.php index 0ea066a..5189837 100644 --- a/src/helper/minify.php +++ b/src/helper/minify.php @@ -22,6 +22,9 @@ class MokoMinifyHelper */ private const CSS_FILES = [ 'css/template.css', + 'css/offline.css', + 'css/editor.css', + 'css/a11y-high-contrast.css', 'css/theme/light.standard.css', 'css/theme/dark.standard.css', 'css/theme/light.custom.css', diff --git a/src/html/mod_stats/default.php b/src/html/mod_stats/default.php index d6aa1fd..7b6fdcf 100644 --- a/src/html/mod_stats/default.php +++ b/src/html/mod_stats/default.php @@ -26,10 +26,14 @@ $headerClass = htmlspecialchars($params->get('header_class', ''), ENT_COMPAT, 'U showtitle) : ?> < class="mod-stats__title">title; ?>> -
- -
title; ?>
-
data; ?>
- -
+ + + + + + + + + +
title; ?>data; ?>
diff --git a/src/index.php b/src/index.php index 1198dca..aeb8946 100644 --- a/src/index.php +++ b/src/index.php @@ -41,7 +41,7 @@ $params_favicon_source = (string) $this->params->get('favicon_source', ''); $params_theme_enabled = $this->params->get('theme_enabled', 1); $params_theme_control_type = (string) $this->params->get('theme_control_type', 'radios'); $params_theme_fab_enabled = $this->params->get('theme_fab_enabled', 1); -$params_theme_fab_pos = $this->params->get('theme_fab_pos', 'br'); +$params_theme_fab_pos = 'br'; // Accessibility params $params_a11y_toolbar = $this->params->get('a11y_toolbar_enabled', 1); @@ -51,7 +51,7 @@ $params_a11y_contrast = $this->params->get('a11y_high_contrast', 1); $params_a11y_links = $this->params->get('a11y_highlight_links', 1); $params_a11y_font = $this->params->get('a11y_readable_font', 1); $params_a11y_animations = $this->params->get('a11y_pause_animations', 1); -$params_a11y_pos = (string) $this->params->get('a11y_toolbar_pos', 'tl'); +$params_a11y_pos = 'br'; // Detecting Active Variables $option = $input->getCmd('option', ''); @@ -71,7 +71,27 @@ $templatePath = 'media/templates/site/mokocassiopeia'; $faviconHeadTags = ''; if ($params_favicon_source) { require_once __DIR__ . '/helper/favicon.php'; - $faviconSourceAbs = JPATH_ROOT . '/' . ltrim($params_favicon_source, '/'); + // Joomla's media field returns paths like: + // 'images/logo.png' (images folder) + // 'media/templates/site/mokocassiopeia/images/logo.png' (template media) + // 'logo.png' (bare filename) + // Strip Joomla's #joomlaImage:// fragment from media field value + $faviconSourceRel = strtok(ltrim($params_favicon_source, '/'), '#'); + $faviconSourceAbs = JPATH_ROOT . '/' . $faviconSourceRel; + // Try common prefixes if not found + if (!is_file($faviconSourceAbs)) { + $candidates = [ + JPATH_ROOT . '/images/' . $faviconSourceRel, + JPATH_ROOT . '/media/templates/site/' . $this->template . '/' . $faviconSourceRel, + JPATH_ROOT . '/media/templates/site/' . $this->template . '/images/' . basename($faviconSourceRel), + ]; + foreach ($candidates as $candidate) { + if (is_file($candidate)) { + $faviconSourceAbs = $candidate; + break; + } + } + } $faviconOutputDir = JPATH_ROOT . '/images/favicons'; $faviconUrlBase = Uri::root(true) . '/images/favicons'; @@ -406,7 +426,7 @@ $wa->useScript('user.js'); // js/user.js countModules('brand-aside', true)) : ?>
- +
diff --git a/src/joomla.asset.json b/src/joomla.asset.json index 16a8f1a..ce39749 100644 --- a/src/joomla.asset.json +++ b/src/joomla.asset.json @@ -17,7 +17,7 @@ "defgroup": "Joomla.Template.Site", "ingroup": "MokoCassiopeia.Template.Assets", "path": "./media/templates/site/mokocassiopeia/joomla.asset.json", - "version": "03.09.14", + "version": "03.10.07", "brief": "Joomla asset registry for MokoCassiopeia" } }, @@ -34,6 +34,18 @@ "uri": "media/templates/site/mokocassiopeia/css/template.min.css", "attributes": {"media": "all"} }, + { + "name": "template.offline", + "type": "style", + "uri": "media/templates/site/mokocassiopeia/css/offline.css", + "attributes": {"media": "all"} + }, + { + "name": "template.offline.min", + "type": "style", + "uri": "media/templates/site/mokocassiopeia/css/offline.min.css", + "attributes": {"media": "all"} + }, { "name": "template.user", "type": "style", diff --git a/src/language/en-GB/tpl_mokocassiopeia.ini b/src/language/en-GB/tpl_mokocassiopeia.ini index 945950b..0116bc3 100644 --- a/src/language/en-GB/tpl_mokocassiopeia.ini +++ b/src/language/en-GB/tpl_mokocassiopeia.ini @@ -259,16 +259,14 @@ TPL_MOKOCASSIOPEIA_CSS_VARS_VM_DESC="Surfaces & text
+ + This file is part of a Moko Consulting project. + + SPDX-License-Identifier: GPL-3.0-or-later + */ + +/* === Offline Page — Full-viewport background with centered overlay card === */ + +.moko-offline-wrap { + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 2rem 1rem; + color: #fff; + font-family: var(--body-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); + /* Background: offline_image set inline, or fall back to header background */ + background-color: var(--color-primary, #112855); + background-image: var(--header-background-image, none); + background-position: var(--header-background-position, center); + background-attachment: var(--header-background-attachment, fixed); + background-repeat: no-repeat; + background-size: cover; +} + +/* Dark theme: overlay to darken the background */ +:root[data-bs-theme="dark"] .moko-offline-wrap { + position: relative; +} + +:root[data-bs-theme="dark"] .moko-offline-wrap::before { + content: ""; + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 0; +} + +/* === Centered Card Overlay === */ +.moko-offline-card { + width: 100%; + max-width: 720px; + background: var(--offline-card-bg, rgba(0, 0, 0, 0.6)); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border-radius: 0.875rem; + padding: 2.5rem 2rem; + text-align: center; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); +} + +@media (min-width: 768px) { + .moko-offline-card { + padding: 3rem; + } +} + +@media (max-width: 575.98px) { + .moko-offline-wrap { + padding: 1rem 0.75rem; + } + + .moko-offline-card { + padding: 2rem 1.25rem; + } +} + +/* === Logo header area === */ +.moko-offline-brand { + display: block; + text-align: center; + text-decoration: none; + color: #fff; + margin-bottom: 1.5rem; +} + +.moko-offline-brand:hover { + color: var(--accent-color-primary, #3f8ff0); +} + +.moko-offline-brand img { + max-width: 100%; + height: auto; +} + +.moko-offline-brand .site-title { + display: block; + font-size: 2rem; + font-weight: 700; + font-family: 'Osaka', var(--body-font-family, sans-serif); + color: var(--accent-color-secondary, #6fb3ff); +} + +.moko-offline-brand .brand-tagline { + display: block; + opacity: 0.7; + font-size: 0.9rem; + margin-top: 0.25rem; +} + +/* === Offline Message === */ +.moko-offline-message { + margin-bottom: 1.5rem; +} + +.moko-offline-message h1 { + font-size: 1.5rem; + font-weight: 700; + color: #fff; + margin-bottom: 0.5rem; + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); +} + +.moko-offline-message p { + color: rgba(255, 255, 255, 0.85); + line-height: 1.6; + margin: 0; +} + +/* === Offline Module Position === */ +.moko-offline-modules { + margin-bottom: 1.5rem; + text-align: left; +} + +/* === Copyright Footer === */ +.moko-offline-copyright { + font-size: 0.8rem; + color: rgba(255, 255, 255, 0.45); + margin-top: 1.5rem; + padding-top: 1rem; + border-top: 1px solid rgba(255, 255, 255, 0.1); +} + +.moko-offline-copyright a { + color: rgba(255, 255, 255, 0.6); + text-decoration: underline; +} + +.moko-offline-copyright a:hover { + color: #fff; +} + +/* === Login Accordion (translucent on overlay) === */ +.moko-offline-card .accordion { + text-align: left; +} + +.moko-offline-card .accordion-item { + background: transparent; + border-color: rgba(255, 255, 255, 0.15); +} + +.moko-offline-card .accordion-button { + background: transparent; + color: rgba(255, 255, 255, 0.8); + font-size: 0.9rem; + padding: 0.75rem 1rem; +} + +.moko-offline-card .accordion-button:not(.collapsed) { + background: rgba(255, 255, 255, 0.05); + color: #fff; + box-shadow: none; +} + +.moko-offline-card .accordion-button::after { + filter: invert(1) brightness(2); +} + +.moko-offline-card .accordion-body { + background: transparent; + padding: 1rem; +} + +/* === Form Controls (glass effect) === */ +.moko-offline-card .form-control { + background-color: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.2); + color: #fff; +} + +.moko-offline-card .form-control::placeholder { + color: rgba(255, 255, 255, 0.4); +} + +.moko-offline-card .form-control:focus { + background-color: rgba(255, 255, 255, 0.15); + border-color: var(--accent-color-primary, #3f8ff0); + color: #fff; + box-shadow: 0 0 0 0.25rem rgba(63, 143, 240, 0.25); +} + +.moko-offline-card .form-label { + color: rgba(255, 255, 255, 0.8); + font-size: 0.875rem; +} + +.moko-offline-card .form-check-label { + color: rgba(255, 255, 255, 0.7); +} + +.moko-offline-card .form-check-input { + background-color: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.3); +} + +.moko-offline-card .form-check-input:checked { + background-color: var(--accent-color-primary, #3f8ff0); + border-color: var(--accent-color-primary, #3f8ff0); +} + +/* === Button === */ +.moko-offline-card .btn-primary { + background-color: var(--color-primary, #112855); + border-color: rgba(255, 255, 255, 0.15); + color: #fff; +} + +.moko-offline-card .btn-primary:hover { + background-color: var(--accent-color-primary, #3f8ff0); + border-color: var(--accent-color-primary, #3f8ff0); +} + +/* === Links === */ +.moko-offline-card a { + color: var(--accent-color-primary, #3f8ff0); +} + +.moko-offline-card a:hover { + color: #fff; +} + +/* === Joomla system messages === */ +.moko-offline-messages { + width: 100%; + max-width: 720px; + margin-bottom: 1rem; +} + +/* === Skip Link === */ +.skip-link { + position: absolute; + left: -9999px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; +} + +.skip-link:focus { + position: static; + width: auto; + height: auto; + padding: 0.5rem 1rem; +} diff --git a/src/media/css/template.css b/src/media/css/template.css index 5b82fc3..b89fdfe 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -14233,6 +14233,28 @@ fieldset>* { margin-inline-start: auto; display: flex; align-items: center; + gap: 1em; +} + +.container-brand-aside>* { + flex: 1; + margin: 0.5em 0; +} + +@media (max-width: 991.98px) { + .header-brand-wrap { + flex-direction: column; + align-items: stretch; + } + + .container-brand-aside { + margin-inline-start: 0; + flex-direction: column; + } + + .container-brand-aside>* { + flex: 0 1 auto; + } } .container-header .navbar-brand { @@ -15771,7 +15793,13 @@ body.wrapper-fluid header>.grid-child { } footer .grid-child>div { - padding: var(--navbar-padding-y, 1rem) var(--navbar-padding-x, 1rem) 0; + padding: calc(var(--navbar-padding-y, 1rem) * 3) + calc(var(--navbar-padding-x, 1rem) * 1) + 0; +} + +.mod-footer { + border-top: 1px solid var(--border-gray, #b2bfcds); } header .grid-child .navbar-brand { @@ -17064,14 +17092,20 @@ form .form-select { display: flex; align-items: center; gap: .5rem; - padding: calc(var(--padding-x, 0.25rem) * 2) calc(var(--padding-y, 0.25rem) * 3) calc(var(--padding-x, 0.25rem) * 2) calc(var(--padding-y, 0.25rem) * 8); + padding: .5rem .75rem; border-radius: 999px; - border: none; - background: var(--muted-color, #6d757e); - box-shadow: var(--box-shadow, 0 .5rem 1rem #00000066); + border: 2px solid var(--theme-fab-border, rgba(255,255,255,.3)); + background: var(--theme-fab-bg, var(--color-primary, #112855)); + color: var(--theme-fab-color, #fff); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1); font: inherit; - color: #fff; font-weight: 600; + transition: transform .15s, box-shadow .15s; +} + +#mokoThemeFab:hover { + transform: scale(1.05); + box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15); } #mokoThemeFab.pos-br { @@ -17094,50 +17128,47 @@ form .form-select { top: 1rem; } -#mokoThemeFab .switch { - display: inline-flex; +/* Sun/Moon theme toggle button */ +.theme-icon-btn { + display: flex; align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border: none; + border-radius: 50%; + background: var(--theme-fab-btn-bg, rgba(255,255,255,.15)); + color: inherit; + font-size: 1.25rem; + cursor: pointer; + padding: 0; position: relative; - width: 44px; - height: 24px; - background: var(--secondary-color, #e6ebf1bf); - transition: background .2s, border-color .2s; - border-radius: var(--border-radius-xxl, 2rem); } -#mokoThemeFab .knob { +.theme-icon-btn .fa-sun, +.theme-icon-btn .fa-moon { position: absolute; - top: 2px; - left: 2px; - width: 20px; - height: 20px; - border-radius: var(--border-radius-xxl, 2rem); - background: var(--bs-body-bg, #fff); - box-shadow: var(--box-shadow, 0 .5rem 1rem #00000066); - transition: transform .2s ease; + transition: opacity .2s, transform .2s; } -#mokoThemeFab [role="switch"][aria-checked="true"] .knob { - transform: translateX(20px); +/* Light mode: show sun, hide moon */ +.theme-icon-btn.is-light .fa-sun { + opacity: 1; + transform: rotate(0deg); +} +.theme-icon-btn.is-light .fa-moon { + opacity: 0; + transform: rotate(-90deg); } -#mokoThemeFab [role="switch"][aria-checked="true"] .switch { - background: rgba(var(--secondary-color, #e6ebf1bf), .15); +/* Dark mode: show moon, hide sun */ +.theme-icon-btn.is-dark .fa-moon { + opacity: 1; + transform: rotate(0deg); } - -button#mokoThemeSwitch { - border: unset; - background-color: unset; -} - -#mokoThemeFab .label { - user-select: none; - font-size: .875rem; - color: #fff; -} - -#mokoThemeFab button { - color: #fff; +.theme-icon-btn.is-dark .fa-sun { + opacity: 0; + transform: rotate(90deg); } /* Auto toggle switch (on/off style) */ @@ -17164,14 +17195,14 @@ button#mokoThemeSwitch { height: 18px; border: none; border-radius: 999px; - background: var(--secondary-color, #6c757d); + background: var(--danger, #c23a31); cursor: pointer; padding: 0; transition: background .2s; } .auto-switch.on { - background: var(--link-color, #3565e5); + background: var(--success, #4aa664); } .auto-track { @@ -17207,6 +17238,15 @@ button#mokoThemeSwitch { } /* Inline a11y toggle inside theme FAB */ +/* Light mode: darker blue */ +:root[data-bs-theme="light"] .a11y-toggle-inline { + --a11y-btn-bg: #1565c0; +} +/* Dark mode: lighter blue */ +:root[data-bs-theme="dark"] .a11y-toggle-inline { + --a11y-btn-bg: #42a5f5; +} + .a11y-toggle-inline { display: flex; align-items: center; @@ -17214,25 +17254,16 @@ button#mokoThemeSwitch { width: 28px; height: 28px; border-radius: 50%; - border: 1.5px solid currentColor; - background: transparent; - color: inherit; + border: none; + background: var(--a11y-btn-bg, #1976d2); + color: #fff; font-size: 1rem; cursor: pointer; padding: 0; - transition: background .2s, color .2s; - opacity: .8; -} - -.a11y-toggle-inline:hover, -.a11y-toggle-inline:focus-visible { - opacity: 1; - background: rgba(255,255,255,.15); } .a11y-toggle-inline.active { - opacity: 1; - background: rgba(255,255,255,.25); + box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--a11y-btn-bg, #1976d2); } /* Floating a11y panel when inline */ @@ -17361,36 +17392,6 @@ body.site.error-page { text-decoration: none; } -#mokoThemeFab .knob { - position: absolute; - top: 2px; - left: 2px; - width: 20px; - height: 20px; - border-radius: var(--border-radius-xxl, 2rem); - background: var(--bs-body-bg, #fff); - box-shadow: var(--box-shadow, 0 .5rem 1rem #00000066); - transition: transform .2s ease; -} - -#mokoThemeFab [role="switch"][aria-checked="true"] .knob { - transform: translateX(20px); -} - -#mokoThemeFab [role="switch"][aria-checked="true"] .switch { - background: rgba(var(--secondary-color, #e6ebf1bf), .15); -} - -button#mokoThemeSwitch { - border: unset; - background-color: unset; -} - -#mokoThemeFab .label { - user-select: none; - font-size: .875rem; -} - #mokoThemeFab.debug-outline { outline: 2px dashed var(--pink, #ff8fc0); outline-offset: 2px; @@ -17499,12 +17500,13 @@ body[data-theme-fab-enabled="1"] #mokoA11yToolbar { /* Panel */ .a11y-panel { - background: var(--bs-body-bg, #fff); + background: var(--body-bg, var(--bs-body-bg, #fff)); border: 1px solid var(--border-color, #dee2e6); border-radius: var(--border-radius, .375rem); padding: .75rem; min-width: 200px; box-shadow: var(--box-shadow-lg, 0 1rem 3rem rgba(0,0,0,.175)); + color: var(--body-font-color, var(--body-color, #e6ebf1)); } .a11y-group { @@ -17540,8 +17542,8 @@ body[data-theme-fab-enabled="1"] #mokoA11yToolbar { height: 34px; border: 1px solid var(--border-color, #dee2e6); border-radius: var(--border-radius, .375rem); - background: var(--bs-body-bg, #fff); - color: var(--body-font-color, #444); + background: var(--secondary-bg, var(--bs-body-bg, #fff)); + color: var(--body-font-color, var(--body-color, #e6ebf1)); font-size: .875rem; cursor: pointer; transition: background .15s, border-color .15s; @@ -17559,7 +17561,7 @@ body[data-theme-fab-enabled="1"] #mokoA11yToolbar { font-weight: 600; min-width: 3ch; text-align: center; - color: var(--body-font-color, #444); + color: var(--body-font-color, var(--body-color, #e6ebf1)); } .a11y-btn-wide { @@ -18686,7 +18688,7 @@ nav[data-toggle=toc] .nav-link.active+ul{ flex: 0 0 auto; background-color: var(--color-primary, #112855); color: var(--mainmenu-nav-link-color, #fff); - border-color: var(--color-primary, #112855); + border: 1px solid var(--input-border-color, #3a4250); padding: 0.6rem 1rem; border-radius: 0 0.25rem 0.25rem 0; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; @@ -18695,7 +18697,7 @@ nav[data-toggle=toc] .nav-link.active+ul{ .mod-finder__search.input-group button:hover, .container-search button[type="submit"]:hover { background-color: var(--color-hover, gray); - border-color: var(--color-hover, gray); + border-color: var(--input-border-color, #3a4250); } .mod-finder__search.input-group button:focus, @@ -21664,6 +21666,33 @@ nav[data-toggle=toc] .nav-link.active+ul{ color: var(--gray-600, #48525d); } +/* === mod_stats === */ +.mod_stats__table { + width: 100%; + border-collapse: collapse; +} + +.mod_stats__table tr { + border-bottom: 1px solid var(--border-color, #2b323b); +} + +.mod_stats__table tr:last-child { + border-bottom: none; +} + +.mod_stats__label { + text-align: start; + font-weight: 600; + padding: 0.6rem 1rem 0.6rem 0; + color: var(--body-font-color, #e6ebf1); +} + +.mod_stats__data { + text-align: end; + padding: 0.6rem 0; + color: var(--gray-600, #48525d); +} + /* === Mobile Responsive Adjustments === */ @media (max-width: 575.98px) { .mod-kunena-login__input { diff --git a/src/media/css/theme/dark.custom.css b/src/media/css/theme/dark.custom.css deleted file mode 100644 index b04fd7e..0000000 --- a/src/media/css/theme/dark.custom.css +++ /dev/null @@ -1,1149 +0,0 @@ -@charset "UTF-8"; -/* Copyright (C) 2025 Moko Consulting - - This file is part of a Moko Consulting project. - - SPDX-License-Identifier: GPL-3.0-or-later - -/* ----------------------------------------------- - * DARK CUSTOM THEME — Deep Purple - * --------------------------------------------- */ - -:root[data-bs-theme='dark']{ -color-scheme: dark; - -/* ===== BRAND & THEME COLORS ===== */ ---color-primary: #4A0E4E; ---accent-color-primary: #9B59B6; ---accent-color-secondary: #6fb3ff; - -/* ===== NAVIGATION ===== */ ---mainmenu-nav-link-color: #fff; ---nav-text-color: gray; ---nav-bg-color: var(--color-primary); - -/* ===== LINKS ===== */ ---color-link: white; ---color-hover: gray; ---color-active: var(--mainmenu-nav-link-color); ---link-color: #8ab4f8; ---link-color-rgb: 138, 180, 248; ---link-decoration: underline; ---link-hover-color: #1ABC9C; ---link-hover-color-rgb: 195, 214, 255; ---link-active-color: var(--link-color); - -/* ===== NAVBAR ===== */ ---navbar-padding-x: 1rem; ---navbar-padding-y: 0.5rem; ---navbar-color: var(--nav-text-color); ---navbar-active-color: var(--mainmenu-nav-link-color); ---navbar-disabled-color: #6c757d; ---navbar-brand-padding-y: 0.3125rem; ---navbar-brand-margin-end: 1rem; ---navbar-brand-font-size: 1.25rem; ---navbar-brand-color: var(--nav-text-color); ---navbar-brand-active-color: var(--mainmenu-nav-link-color); ---navbar-nav-link-padding-x: 0.5rem; ---navbar-toggler-padding-y: 0.25rem; ---navbar-toggler-padding-x: 0.75rem; ---navbar-toggler-font-size: 1.25rem; ---navbar-toggler-border-color: rgba(255, 255, 255, 0.1); ---navbar-toggler-border-radius: 0.25rem; ---navbar-toggler-focus-width: 0.25rem; ---navbar-toggler-transition: box-shadow 0.15s ease-in-out; ---nav-link-padding-x: 1rem; ---nav-link-padding-y: 0.5rem; ---nav-link-font-weight: 400; ---nav-link-color: var(--nav-text-color); ---nav-link-active-color: var(--mainmenu-nav-link-color); ---nav-link-disabled-color: #6c757d; - -/* ===== TYPOGRAPHY & BODY ===== */ ---font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; ---font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; ---body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; ---body-font-size: 1rem; ---body-font-weight: 400; ---body-line-height: 1.5; ---body-color: #e6ebf1; ---body-color-rgb: 230, 235, 241; ---body-bg: #0e1318; ---body-bg-rgb: 14, 19, 24; ---heading-color: #f1f5f9; ---emphasis-color: #fff; ---emphasis-color-rgb: 255, 255, 255; ---secondary-color: #e6ebf1bf; ---secondary-color-rgb: 230, 235, 241; ---tertiary-color: #e6ebf180; ---tertiary-color-rgb: 230, 235, 241; ---muted-color: #6d757e; ---code-color: black; ---code-color-ink: var(--code-color, #e93f8e); ---code-bg-color: lightgreen; ---highlight-color: #111; ---highlight-bg: #ffe28a1a; - -/* ===== LAYOUT & SPACING ===== */ ---padding-x: 0.15rem; ---padding-y: 0.15rem; ---bg-opacity: 1; ---nav-toggle-size: 3rem; ---gradient: linear-gradient(180deg, #ffffff26, #fff0); ---secondary-bg: #151b22; ---secondary-bg-rgb: 21, 27, 34; ---tertiary-bg: #10151b; ---tertiary-bg-rgb: 16, 21, 27; ---hr-color: var(--border-color, #dfe3e7); ---border-color-soft: var(--border-color, #dfe3e7); ---kbd-bg: var(--secondary-bg, #eaedf0); ---kbd-ink: var(--body-bg, #fff); ---toc-bg: var(--secondary-bg, #eaedf0); ---toc-ink: var(--color-primary, #112855); ---selection-bg: var(--highlight-bg, #fbeea8); ---selection-ink: var(--body-color, #22262a); ---border: 5px; - -/* ===== BREAKPOINTS ===== */ ---bp-xs: 0; ---bp-sm: 576px; ---bp-md: 768px; ---bp-lg: 992px; ---bp-xl: 1200px; - -/* ===== BOOTSTRAP PALETTE ===== */ ---primary: #010156; ---secondary: #48525d; ---success: #4aa664; ---info: #4f7aa0; ---warning: #c77a00; ---danger: #c23a31; ---light: #1b2027; ---dark: #0f1318; ---primary-rgb: 1,1,86; ---secondary-rgb: 72,82,93; ---success-rgb: 74,166,100; ---info-rgb: 79,122,160; ---warning-rgb: 199,122,0; ---danger-rgb: 194,58,49; ---light-rgb: 27,32,39; ---dark-rgb: 15,19,24; ---primary-text-emphasis: #c7ccff; ---secondary-text-emphasis: #cfd6de; ---success-text-emphasis: #bde8c9; ---info-text-emphasis: #bcd6ee; ---warning-text-emphasis: #ffd9a6; ---danger-text-emphasis: #ffb7b2; ---light-text-emphasis: #d2d8df; ---dark-text-emphasis: #d2d8df; ---primary-bg-subtle: #0b1030; ---secondary-bg-subtle: #1e2430; ---success-bg-subtle: #0f2a1b; ---info-bg-subtle: #0d2232; ---warning-bg-subtle: #2a1e06; ---danger-bg-subtle: #2d1110; ---light-bg-subtle: #12161d; ---dark-bg-subtle: #1e2430; ---primary-border-subtle: #2b3a7a; ---secondary-border-subtle: #2b323b; ---success-border-subtle: #2b5b40; ---info-border-subtle: #254861; ---warning-border-subtle: #5a3c0e; ---danger-border-subtle: #5c2723; ---light-border-subtle: #222831; ---dark-border-subtle: #2b323b; - -/* ===== ALERT LINK COLORS ===== */ ---alert-primary-link-color: #b3c1ff; ---alert-secondary-link-color: #9fa6ad; ---alert-success-link-color: #a0e5b3; ---alert-info-link-color: #8eccf2; ---alert-warning-link-color: #ffe4a0; ---alert-danger-link-color: #ffa8a3; ---alert-light-link-color: #f0f4f8; ---alert-dark-link-color: #9fa6ad; - -/* ===== LIST GROUP ITEM COLORS ===== */ ---list-group-item-primary-color: #8ca3ff; ---list-group-item-primary-bg: #1a2550; ---list-group-item-primary-active-bg: #223066; ---list-group-item-secondary-color: #9fa6ad; ---list-group-item-secondary-bg: #2b323b; ---list-group-item-secondary-active-bg: #363d47; ---list-group-item-success-color: #a0e5b3; ---list-group-item-success-bg: #1e3d2d; ---list-group-item-success-active-bg: #275538; ---list-group-item-info-color: #8eccf2; ---list-group-item-info-bg: #1a3448; ---list-group-item-info-active-bg: #234459; ---list-group-item-warning-color: #ffe4a0; ---list-group-item-warning-bg: #4a3410; ---list-group-item-warning-active-bg: #5c4216; ---list-group-item-danger-color: #ffa8a3; ---list-group-item-danger-bg: #4a1e1c; ---list-group-item-danger-active-bg: #5c2823; ---list-group-item-light-color: #e9ecef; ---list-group-item-light-bg: #1e2430; ---list-group-item-light-active-bg: #282f3d; ---list-group-item-dark-color: #48525d; ---list-group-item-dark-bg: #0e1318; ---list-group-item-dark-active-bg: #161b22; - -/* ===== LINK UTILITY COLORS ===== */ ---link-primary-color: hsl(240, 98%, 50%); ---link-primary-hover-color: hsl(240, 98%, 45%); ---link-secondary-color: hsl(210, 15%, 70%); ---link-secondary-hover-color: hsl(210, 15%, 65%); ---link-success-color: hsl(120, 40%, 60%); ---link-success-hover-color: hsl(120, 40%, 55%); ---link-info-color: hsl(207, 60%, 65%); ---link-info-hover-color: hsl(207, 60%, 60%); ---link-warning-color: hsl(38, 100%, 65%); ---link-warning-hover-color: hsl(38, 100%, 60%); ---link-danger-color: hsl(3, 85%, 65%); ---link-danger-hover-color: hsl(3, 85%, 60%); ---link-light-color: hsl(210, 20%, 90%); ---link-light-hover-color: hsl(210, 20%, 85%); ---link-dark-color: hsl(210, 10%, 35%); ---link-dark-hover-color: hsl(210, 10%, 30%); - -/* ===== COMPONENT-SPECIFIC COLORS ===== */ ---mod-finder-link-hover: #5a6470; ---form-legend-color: #9fa6ad; ---border-gray: #3a4250; ---subhead-color: #9fa6ad; ---box-shadow-gray: #1a2027; ---btn-active-text-gray: #7a8490; ---indicator-success-bg: var(--success); ---item-list-color: #2a2f34; ---notification-badge-bg: var(--danger); ---content-bg-gray: #2b323b; ---taba-btn-green: #5a9c2f; ---taba-btn-blue: #3d75a8; ---taba-btn-red: #c43620; ---taba-btn-gray: #6a7080; ---taba-msg-bg: #1e2430; ---toc-link-color: #9fa6ad; ---toc-link-active-color: #91a4ff; ---choices-disabled-bg: #2b323b; ---choices-input-bg: var(--body-bg); ---choices-border-light: #48525d; ---choices-arrow-color: #9fa6ad; ---choices-inner-bg: #1a2027; ---choices-focused-border: #5472ff; ---choices-dropdown-bg: var(--body-bg); ---choices-item-bg: #1a5f75; ---choices-item-border: #1a748f; ---choices-item-hover-bg: #1a748f; ---choices-item-hover-border: #1a8aa8; ---choices-item-disabled-bg: #48525d; ---choices-item-disabled-border: #36404a; ---choices-item-highlighted: #2b323b; ---choices-input-inner-bg: #1a2027; - -/* ===== STANDARD COLORS ===== */ ---blue: #91a4ff; ---indigo: #b19cff; ---purple: #c0a5ff; ---pink: #ff8fc0; ---red: #ff7a73; ---orange: #ff9c4d; ---yellow: #ffd166; ---green: #78d694; ---teal: #76e3ff; ---cyan: #6fb7ff; ---black: #000; ---white: #fff; - -/* ===== GRAY SCALE ===== */ ---gray-100: #161a20; ---gray-200: #1b2027; ---gray-300: #222831; ---gray-400: #2b323b; ---gray-500: #36404a; ---gray-600: #48525d; ---gray-700: #5b6672; ---gray-800: #cfd6de; ---gray-900: #e6ebf1; ---white-rgb: 255, 255, 255; ---black-rgb: 0, 0, 0; - -/* ===== OPACITY UTILITIES ===== */ ---opacity-0: 0; ---opacity-5: 0.05; ---opacity-10: 0.1; ---opacity-15: 0.15; ---opacity-20: 0.2; ---opacity-25: 0.25; ---opacity-30: 0.3; ---opacity-50: 0.5; ---opacity-75: 0.75; ---opacity-100: 1; - -/* ===== COMMON SHADOW COLORS ===== */ ---shadow-color-light: rgba(var(--black-rgb), var(--opacity-30)); ---shadow-color-medium: rgba(var(--black-rgb), var(--opacity-50)); ---shadow-color-dark: rgba(var(--black-rgb), var(--opacity-75)); ---border-color-translucent: rgba(var(--white-rgb), var(--opacity-10)); ---highlight-translucent: rgba(var(--white-rgb), var(--opacity-5)); - -/* ===== HEADER BACKGROUND ===== */ ---header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); ---header-background-attachment: fixed; ---header-background-repeat: repeat; ---header-background-size: auto; - -/* ===== CONTAINER BACKGROUNDS ===== */ -/* Below Topbar Container */ ---container-below-topbar-bg-image: none; ---container-below-topbar-bg-color: transparent; ---container-below-topbar-bg-position: center; ---container-below-topbar-bg-attachment: fixed; ---container-below-topbar-bg-repeat: no-repeat; ---container-below-topbar-bg-size: cover; ---container-below-topbar-border: none; ---container-below-topbar-border-radius: 0; - -/* Top A Container */ ---container-top-a-bg-image: none; ---container-top-a-bg-color: transparent; ---container-top-a-bg-position: center; ---container-top-a-bg-attachment: fixed; ---container-top-a-bg-repeat: no-repeat; ---container-top-a-bg-size: cover; ---container-top-a-border: none; ---container-top-a-border-radius: 0; - -/* Top B Container */ ---container-top-b-bg-image: none; ---container-top-b-bg-color: transparent; ---container-top-b-bg-position: center; ---container-top-b-bg-attachment: fixed; ---container-top-b-bg-repeat: no-repeat; ---container-top-b-bg-size: cover; ---container-top-b-border: none; ---container-top-b-border-radius: 0; - -/* TOC Container */ ---container-toc-bg: var(--secondary-bg); ---container-toc-color: #dbe3ff; - -/* Sidebar Container */ ---container-sidebar-bg-image: none; ---container-sidebar-bg-color: transparent; ---container-sidebar-bg-position: center; ---container-sidebar-bg-attachment: scroll; ---container-sidebar-bg-repeat: repeat; ---container-sidebar-bg-size: auto; ---container-sidebar-border: none; ---container-sidebar-border-radius: 0; - -/* Bottom A Container */ ---container-bottom-a-bg-image: none; ---container-bottom-a-bg-color: transparent; ---container-bottom-a-bg-position: center; ---container-bottom-a-bg-attachment: fixed; ---container-bottom-a-bg-repeat: no-repeat; ---container-bottom-a-bg-size: cover; ---container-bottom-a-border: none; ---container-bottom-a-border-radius: 5px; - -/* Bottom B Container */ ---container-bottom-b-bg-image: none; ---container-bottom-b-bg-color: transparent; ---container-bottom-b-bg-position: center; ---container-bottom-b-bg-attachment: fixed; ---container-bottom-b-bg-repeat: no-repeat; ---container-bottom-b-bg-size: cover; ---container-bottom-b-border: none; ---container-bottom-b-border-radius: 0; - -/* ===== BORDERS ===== */ ---border-width: 1px; ---border-style: solid; ---border-color: #2b323b; ---border-color-translucent: #ffffff26; ---border-radius: .25rem; ---border-radius-sm: .2rem; ---border-radius-lg: .3rem; ---border-radius-xl: .3rem; ---border-radius-xxl: 2rem; ---border-radius-2xl: var(--border-radius-xxl); ---border-radius-pill: 50rem; - -/* ===== SHADOWS ===== */ ---box-shadow: 0 .5rem 1rem #00000066; ---box-shadow-sm: 0 .125rem .25rem #00000040; ---box-shadow-lg: 0 1rem 3rem #00000080; ---box-shadow-inset: inset 0 1px 2px #00000040; - -/* ===== FOCUS & FORMS ===== */ ---focus-ring-width: .25rem; ---focus-ring-opacity: .6; ---focus-ring-color: #5472ff66; ---input-color: #e6ebf1; ---input-bg: #1a2332; ---input-border-color: #3a4250; ---input-focus-border-color: #5472ff; ---input-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); ---input-placeholder-color: #8894aa; ---input-disabled-bg: #0f1318; ---input-disabled-border-color: #2b323b; ---input-file-button-active-bg: #2b3441; ---form-range-thumb-active-bg: #4a5766; ---form-valid-color: #78d694; ---form-valid-border-color: #78d694; ---form-invalid-color: #ff8e86; ---form-invalid-border-color: #ff8e86; - -/* ===== BUTTONS ===== */ ---btn-border-radius: var(--border-radius); ---btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3); - -/* ===== CARDS ===== */ ---card-spacer-y: 1rem; ---card-spacer-x: 1rem; ---card-title-spacer-y: 0.5rem; ---card-border-width: 1px; ---card-border-color: var(--border-color); ---card-border-radius: var(--border-radius); ---card-box-shadow: none; ---card-inner-border-radius: calc(var(--border-radius) - 1px); ---card-cap-padding-y: 0.5rem; ---card-cap-padding-x: 1rem; ---card-cap-bg: rgba(255, 255, 255, 0.03); ---card-cap-color: var(--body-color); ---card-height: auto; ---card-color: var(--body-color); ---card-bg: var(--secondary-bg); ---card-img-overlay-padding: 1rem; ---card-group-margin: 0.75rem; - -/* ===== VIRTUEMART (VM) ===== */ -/* VM Surfaces */ ---vm-surface: var(--secondary-bg); ---vm-surface-2: var(--tertiary-bg); ---vm-text: var(--body-color); ---vm-text-strong: #ffffff; ---vm-text-muted: var(--gray-700); ---vm-border: var(--border-color); ---vm-price-color: var(--success); - -/* VM Layout and Density */ ---vm-container-max-width: 1200px; ---vm-section-gap: 2rem; ---vm-block-radius: var(--border-radius); ---vm-block-shadow: var(--box-shadow-sm); - -/* VM Typography */ ---vm-category-title-size: 2rem; ---vm-subcategory-title-size: 1.5rem; ---vm-page-title-size: 1.75rem; ---vm-products-type-title-size: 1.25rem; ---vm-product-title-size: 1.125rem; ---vm-product-title-weight: 500; ---vm-products-type-title-weight: 600; ---vm-price-size: 1.5rem; ---vm-price-detail-size: 1.125rem; ---vm-price-desc-size: 0.875rem; - -/* VM Controls */ ---vm-input-radius: var(--border-radius); ---vm-input-shadow: var(--box-shadow-sm); ---vm-qty-width: 80px; ---vm-cart-dropdown-min-width: 300px; - -/* VM Alerts */ ---vm-alert-radius: var(--border-radius); ---vm-alert-shadow: var(--box-shadow-sm); ---vm-availability-bg: var(--success-bg-subtle); ---vm-availability-text: var(--success); - -/* VM Buttons */ ---vm-btn-padding-x: 1rem; ---vm-btn-padding-y: 0.5rem; ---vm-btn-radius: var(--border-radius); ---vm-btn-shadow: var(--box-shadow-sm); ---vm-btn-primary-bg: var(--primary); ---vm-btn-primary-text: #ffffff; ---vm-btn-primary-border: var(--primary); ---vm-btn-secondary-bg: var(--secondary); ---vm-btn-secondary-text: #ffffff; ---vm-btn-secondary-border: var(--secondary); - -/* VM Image Overlay Controls */ ---vm-image-overlay-gap-x: 0.5rem; ---vm-image-overlay-gap-y: 0.5rem; ---vm-image-overlay-raise: 0.25rem; ---vm-image-overlay-btn-size: 2.5rem; ---vm-image-overlay-btn-radius: 50%; ---vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.7); ---vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85); ---vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2); ---vm-image-overlay-btn-border-width: 1px; ---vm-image-overlay-btn-color: var(--body-color); ---vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); - -/* VM Vendor Menu */ ---vm-vendor-menu-bg: var(--secondary-bg); ---vm-vendor-menu-border: var(--border-color); ---vm-vendor-menu-radius: var(--border-radius); ---vm-vendor-menu-shadow: var(--box-shadow-sm); ---vm-vendor-menu-item-gap: 0.25rem; ---vm-vendor-menu-item-padding-x: 1rem; ---vm-vendor-menu-item-padding-y: 0.5rem; ---vm-vendor-menu-pill-radius: 50rem; ---vm-vendor-menu-link: var(--link-color); ---vm-vendor-menu-link-hover: var(--link-hover-color); ---vm-vendor-menu-link-active: var(--primary); ---vm-vendor-menu-hover-bg: var(--tertiary-bg); - -/* ===== GABLE ===== */ ---gab-blue: #4d9fff; ---gab-green: #5cb85c; ---gab-red: #ff6b6b; ---gab-orange: #ff9f5a; ---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-bg-position: center; ---hero-overlay-bg-size: cover; ---hero-overlay-padding: 1em; ---hero-overlay-text-align: center; ---hero-overlay-text-color: var(--body-color); - -/* ===== HERO VARIANTS ===== */ -/* Primary — deep navy, dark overlay */ ---hero-primary-bg-color: #0d1e3a; ---hero-primary-overlay: linear-gradient(rgba(13, 30, 58, .65), rgba(13, 30, 58, .65)); ---hero-primary-color: #f1f5f9; - -/* Secondary — darker navy, heavier overlay */ ---hero-secondary-bg-color: #080f1e; ---hero-secondary-overlay: linear-gradient(rgba(8, 15, 30, .80), rgba(8, 15, 30, .80)); ---hero-secondary-color: #f1f5f9; - -/* ===== HERO CARD (inner .hero element) ===== */ -/* Default card — uses primary variant values */ ---hero-card-bg: var(--hero-primary-bg-color); ---hero-card-color: white; ---hero-card-overlay: var(--hero-primary-overlay); ---hero-card-border-radius: .5rem; ---hero-card-padding-x: 2rem; ---hero-card-padding-y: 3rem; ---hero-card-max-width: 800px; - -/* Alternative card — uses secondary variant values */ ---hero-alt-card-bg: var(--hero-secondary-bg-color); ---hero-alt-card-color: var(--hero-secondary-color); ---hero-alt-card-overlay: var(--hero-secondary-overlay); ---hero-alt-card-border-radius: .5rem; ---hero-alt-card-padding-x: 2rem; ---hero-alt-card-padding-y: 3rem; ---hero-alt-card-max-width: 600px; - -/* ===== BLOCK COLORS (top-a / top-b / bottom-a / bottom-b) ===== */ ---block-color-1: var(--secondary-bg); ---block-text-1: var(--body-color); - ---block-color-2: var(--accent-color-primary); ---block-text-2: #fff; - ---block-color-3: rgba(238, 194, 52, .15); ---block-text-3: var(--body-color); - ---block-color-4: rgba(74, 166, 100, .15); ---block-text-4: var(--body-color); - -/* ===== BLOCK COLOR OVERRIDES ===== */ ---block-highlight-bg: var(--accent-color-primary); ---block-highlight-text: #fff; - ---block-cta-bg: var(--color-primary); ---block-cta-text: #f1f5f9; - ---block-alert-bg: var(--danger, #c23a31); ---block-alert-text: #fff; - -/* ===== OFFCANVAS ===== */ ---offcanvas-zindex: 1045; ---offcanvas-width: 400px; ---offcanvas-height: 30vh; ---offcanvas-padding-x: 1rem; ---offcanvas-padding-y: 1rem; ---offcanvas-color: var(--body-color); ---offcanvas-bg: var(--body-bg); ---offcanvas-border-width: 1px; ---offcanvas-border-color: var(--border-color-translucent); ---offcanvas-box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3); - -/* ===== ACCORDION ===== */ ---accordion-color: var(--body-color); ---accordion-bg: var(--body-bg); ---accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease; ---accordion-border-color: var(--border-color); ---accordion-border-width: 1px; ---accordion-border-radius: 0.25rem; ---accordion-inner-border-radius: calc(0.25rem - 1px); ---accordion-btn-padding-x: 1.25rem; ---accordion-btn-padding-y: 1rem; ---accordion-btn-color: var(--body-color); ---accordion-btn-bg: var(--accordion-bg); ---accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e6ebf1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-icon-width: 1.25rem; ---accordion-btn-icon-transform: rotate(-180deg); ---accordion-btn-icon-transition: transform 0.2s ease-in-out; ---accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ab4f8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-focus-border-color: var(--input-focus-border-color); ---accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); ---accordion-body-padding-x: 1.25rem; ---accordion-body-padding-y: 1rem; ---accordion-active-color: var(--link-color); ---accordion-active-bg: var(--secondary-bg); - -/* ===== BREADCRUMB ===== */ ---breadcrumb-padding-x: 0; ---breadcrumb-padding-y: 0; ---breadcrumb-margin-bottom: 1rem; ---breadcrumb-bg: ; ---breadcrumb-border-radius: ; ---breadcrumb-divider-color: var(--gray-600); ---breadcrumb-item-padding-x: 0.5rem; ---breadcrumb-item-active-color: var(--link-color); - -/* ===== PAGINATION ===== */ ---pagination-padding-x: 0.75rem; ---pagination-padding-y: 0.375rem; ---pagination-font-size: 1rem; ---pagination-color: var(--link-color); ---pagination-bg: var(--secondary-bg); ---pagination-border-width: 1px; ---pagination-border-color: var(--border-color); ---pagination-border-radius: 0.25rem; ---pagination-focus-color: var(--link-active-color); ---pagination-focus-bg: var(--tertiary-bg); ---pagination-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); ---pagination-active-color: var(--body-color); ---pagination-active-bg: hsl(240, 98%, 17%); ---pagination-active-border-color: hsl(240, 98%, 17%); ---pagination-disabled-color: var(--gray-600); ---pagination-disabled-bg: var(--secondary-bg); ---pagination-disabled-border-color: var(--border-color); - -/* ===== BADGE ===== */ ---badge-padding-x: 0.65em; ---badge-padding-y: 0.35em; ---badge-font-size: 0.75em; ---badge-font-weight: 700; ---badge-color: var(--body-color); ---badge-border-radius: 0.25rem; - -/* ===== ALERT ===== */ ---alert-bg: transparent; ---alert-padding-x: 1rem; ---alert-padding-y: 1rem; ---alert-margin-bottom: 1rem; ---alert-color: inherit; ---alert-border-color: transparent; ---alert-border: 1px solid var(--alert-border-color); ---alert-border-radius: 0.25rem; - -/* ===== PROGRESS ===== */ ---progress-height: 1rem; ---progress-font-size: 0.75rem; ---progress-bg: var(--secondary-bg); ---progress-border-radius: 0.25rem; ---progress-box-shadow: inset 0 1px 2px rgba(var(--black-rgb), 0.3); ---progress-bar-color: var(--body-color); ---progress-bar-bg: hsl(240, 98%, 40%); ---progress-bar-transition: width 0.6s ease; - -/* ===== LIST GROUP ===== */ ---list-group-color: var(--body-color); ---list-group-bg: var(--secondary-bg); ---list-group-border-color: rgba(var(--white-rgb), 0.125); ---list-group-border-width: 1px; ---list-group-border-radius: 0.25rem; ---list-group-item-padding-x: 1rem; ---list-group-item-padding-y: 0.5rem; ---list-group-action-color: var(--gray-800); ---list-group-action-active-color: var(--body-color); ---list-group-action-active-bg: var(--tertiary-bg); ---list-group-disabled-color: var(--gray-600); ---list-group-disabled-bg: var(--secondary-bg); ---list-group-active-color: var(--body-color); ---list-group-active-bg: hsl(240, 98%, 17%); ---list-group-active-border-color: hsl(240, 98%, 17%); - -/* ===== DROPDOWN ===== */ ---dropdown-zindex: 1000; ---dropdown-min-width: 10rem; ---dropdown-padding-x: 0; ---dropdown-padding-y: 0.5rem; ---dropdown-spacer: 0.125rem; ---dropdown-font-size: 1rem; ---dropdown-color: var(--body-color); ---dropdown-bg: var(--secondary-bg); ---dropdown-border-color: var(--border-color-translucent); ---dropdown-border-radius: 0.25rem; ---dropdown-border-width: 1px; ---dropdown-inner-border-radius: calc(0.25rem - 1px); ---dropdown-divider-bg: var(--border-color-translucent); ---dropdown-divider-margin-y: 0.5rem; ---dropdown-box-shadow: 0 0.5rem 1rem var(--shadow-color-medium); ---dropdown-link-color: var(--body-color); ---dropdown-link-active-color: var(--body-color); ---dropdown-link-active-bg: hsl(240, 98%, 17%); ---dropdown-link-disabled-color: var(--gray-600); ---dropdown-item-padding-x: 1rem; ---dropdown-item-padding-y: 0.25rem; ---dropdown-header-color: var(--gray-600); ---dropdown-header-padding-x: 1rem; ---dropdown-header-padding-y: 0.5rem; - -/* ===== TOAST ===== */ ---toast-zindex: 1090; ---toast-padding-x: 0.75rem; ---toast-padding-y: 0.5rem; ---toast-spacing: 1em; ---toast-max-width: 350px; ---toast-font-size: 0.875rem; ---toast-color: ; ---toast-bg: rgba(21, 27, 34, 0.9); ---toast-border-width: 1px; ---toast-border-color: var(--border-color-translucent); ---toast-border-radius: 0.25rem; ---toast-box-shadow: 0 0.5rem 1rem var(--shadow-color-medium); ---toast-header-color: var(--gray-600); ---toast-header-bg: rgba(21, 27, 34, 0.85); ---toast-header-border-color: rgba(var(--white-rgb), var(--opacity-10)); - -/* ===== MODAL ===== */ ---modal-zindex: 1050; ---modal-width: 500px; ---modal-padding: 1rem; ---modal-margin: 0.5rem; ---modal-color: ; ---modal-bg: var(--secondary-bg); ---modal-border-color: var(--border-color-translucent); ---modal-border-width: 1px; ---modal-border-radius: 0.3rem; ---modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3); ---modal-inner-border-radius: calc(0.3rem - 1px); ---modal-header-padding-x: 1rem; ---modal-header-padding-y: 1rem; ---modal-header-padding: 1rem 1rem; ---modal-header-border-color: var(--border-color); ---modal-header-border-width: 1px; ---modal-title-line-height: 1.5; ---modal-footer-gap: 0.5rem; ---modal-footer-bg: ; ---modal-footer-border-color: var(--border-color); ---modal-footer-border-width: 1px; - -/* ===== TOOLTIP ===== */ ---tooltip-zindex: 1070; ---tooltip-max-width: 200px; ---tooltip-padding-x: 0.5rem; ---tooltip-padding-y: 0.25rem; ---tooltip-margin: ; ---tooltip-font-size: 0.875rem; ---tooltip-color: var(--body-color); ---tooltip-bg: hsl(0, 0%, 0%); ---tooltip-border-radius: 0.25rem; ---tooltip-opacity: 0.9; ---tooltip-arrow-width: 0.8rem; ---tooltip-arrow-height: 0.4rem; - -/* ===== POPOVER ===== */ ---popover-zindex: 1060; ---popover-max-width: 276px; ---popover-font-size: 0.875rem; ---popover-bg: var(--secondary-bg); ---popover-border-width: 1px; ---popover-border-color: var(--border-color-translucent); ---popover-border-radius: 0.3rem; ---popover-inner-border-radius: calc(0.3rem - 1px); ---popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4); ---popover-header-padding-x: 1rem; ---popover-header-padding-y: 0.5rem; ---popover-header-font-size: 1rem; ---popover-header-color: ; ---popover-header-bg: var(--tertiary-bg); ---popover-body-padding-x: 1rem; ---popover-body-padding-y: 1rem; ---popover-body-color: var(--body-color); ---popover-arrow-width: 1rem; ---popover-arrow-height: 0.5rem; ---popover-arrow-border: var(--popover-border-color); - -/* ===== SPINNER ===== */ ---spinner-width: 2rem; ---spinner-height: 2rem; ---spinner-vertical-align: -0.125em; ---spinner-border-width: 0.25em; ---spinner-animation-speed: 0.75s; - -/* ===== NAV TABS ===== */ ---nav-tabs-border-width: 1px; ---nav-tabs-border-color: var(--border-color); ---nav-tabs-border-radius: 0.25rem; ---nav-tabs-link-active-color: var(--body-color); ---nav-tabs-link-active-bg: var(--secondary-bg); ---nav-tabs-link-active-border-color: var(--border-color) var(--border-color) var(--secondary-bg); - -/* ===== NAV PILLS ===== */ ---nav-pills-border-radius: 0.25rem; ---nav-pills-link-active-color: var(--body-color); ---nav-pills-link-active-bg: hsl(240, 98%, 17%); - -/* ===== TABLE ===== */ ---table-color: var(--body-color); ---table-bg: transparent; ---table-border-color: var(--border-color); ---table-accent-bg: transparent; ---table-striped-color: var(--body-color); ---table-striped-bg: rgba(var(--white-rgb), var(--opacity-5)); ---table-active-color: var(--body-color); ---table-active-bg: rgba(var(--white-rgb), 0.1); - -/* ===== FOOTER ===== */ ---footer-padding-top: 1rem; ---footer-padding-bottom: 80px; ---footer-grid-padding-y: 2.5rem; ---footer-grid-padding-x: 0.5em; - -/* ===== BACKDROP ===== */ ---backdrop-zindex: 1040; ---backdrop-bg: hsl(0, 0%, 0%); ---backdrop-opacity: 0.5; -} - -.btn { - --btn-padding-x: 1rem; - --btn-padding-y: 0.6rem; - --btn-font-family: inherit; - --btn-font-size: 1rem; - --btn-font-weight: 400; - --btn-line-height: 1.5; - --btn-color: var(--white); - --btn-bg: var(--body-bg); - --btn-border-width: 1px; - --btn-border-color: transparent; - --btn-border-radius: 0.25rem; - --btn-active-border-color: transparent; - --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); - --btn-disabled-opacity: 0.65; - --btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); - display: inline-block; - padding: var(--btn-padding-y) var(--btn-padding-x); - font-family: var(--btn-font-family); - font-size: var(--btn-font-size); - font-weight: var(--btn-font-weight); - line-height: var(--btn-line-height); - color: var(--btn-color); - text-align: center; - text-decoration: none; - vertical-align: middle; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border: var(--btn-border-width) solid var(--btn-border-color); - border-radius: var(--btn-border-radius); - background-color: var(--btn-bg); - -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; -} - -/* Buttons — inherit brand hues; ensure strong contrast on dark bg */ -.btn-primary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(240, 98%, 17%); - --btn-border-color: hsl(240, 98%, 17%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #010149; - --btn-hover-border-color: #010145; - --btn-focus-shadow-rgb: 84, 114, 255; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #010145; - --btn-active-border-color: #010141; -} - -.btn-secondary { - --btn-color: var(--nav-text-color); - --btn-bg: var(--nav-bg-color); - --btn-border-color: #3a4250; - --btn-hover-color: #fff; - --btn-hover-bg: #1b2a55; - --btn-hover-border-color: #162448; - --btn-focus-shadow-rgb: 84, 114, 255; - --btn-active-color: #fff; - --btn-active-bg: #162448; - --btn-active-border-color: #12203f; -} - -.btn-success { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(120, 35%, 45%); - --btn-border-color: hsl(120, 35%, 45%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(120, 35%, 40%); - --btn-hover-border-color: hsl(120, 35%, 38%); - --btn-focus-shadow-rgb: 96, 180, 96; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(120, 35%, 38%); - --btn-active-border-color: hsl(120, 35%, 36%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(120, 35%, 45%); - --btn-disabled-border-color: hsl(120, 35%, 45%); -} - -.btn-info { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(207, 55%, 55%); - --btn-border-color: hsl(207, 55%, 55%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(207, 55%, 50%); - --btn-hover-border-color: hsl(207, 55%, 48%); - --btn-focus-shadow-rgb: 100, 160, 210); - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(207, 55%, 48%); - --btn-active-border-color: hsl(207, 55%, 46%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(207, 55%, 55%); - --btn-disabled-border-color: hsl(207, 55%, 55%); -} - -.btn-warning { - --btn-color: hsl(0, 0%, 0%); - --btn-bg: hsl(38, 100%, 50%); - --btn-border-color: hsl(38, 100%, 50%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(38, 100%, 45%); - --btn-hover-border-color: hsl(38, 100%, 43%); - --btn-focus-shadow-rgb: 220, 170, 40; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(38, 100%, 43%); - --btn-active-border-color: hsl(38, 100%, 41%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 0%); - --btn-disabled-bg: hsl(38, 100%, 50%); - --btn-disabled-border-color: hsl(38, 100%, 50%); -} - -.btn-danger { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(3, 82%, 50%); - --btn-border-color: hsl(3, 82%, 50%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(3, 82%, 45%); - --btn-hover-border-color: hsl(3, 82%, 43%); - --btn-focus-shadow-rgb: 220, 80, 80; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(3, 82%, 43%); - --btn-active-border-color: hsl(3, 82%, 41%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(3, 82%, 50%); - --btn-disabled-border-color: hsl(3, 82%, 50%); -} - -.btn-light { - --btn-color: hsl(0, 0%, 0%); - --btn-bg: hsl(210, 17%, 85%); - --btn-border-color: hsl(210, 17%, 85%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(210, 17%, 80%); - --btn-hover-border-color: hsl(210, 17%, 78%); - --btn-focus-shadow-rgb: 200, 205, 210; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(210, 17%, 78%); - --btn-active-border-color: hsl(210, 17%, 76%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 0%); - --btn-disabled-bg: hsl(210, 17%, 85%); - --btn-disabled-border-color: hsl(210, 17%, 85%); -} - -.btn-dark { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(210, 10%, 20%); - --btn-border-color: hsl(210, 10%, 20%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(210, 10%, 18%); - --btn-hover-border-color: hsl(210, 10%, 16%); - --btn-focus-shadow-rgb: 60, 65, 70; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(210, 10%, 16%); - --btn-active-border-color: hsl(210, 10%, 14%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(210, 10%, 20%); - --btn-disabled-border-color: hsl(210, 10%, 20%); -} - -.btn-outline-primary { - --btn-color: hsl(240, 98%, 40%); - --btn-border-color: hsl(240, 98%, 40%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(240, 98%, 40%); - --btn-hover-border-color: hsl(240, 98%, 40%); - --btn-focus-shadow-rgb: 80, 80, 180; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(240, 98%, 40%); - --btn-active-border-color: hsl(240, 98%, 40%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(240, 98%, 40%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(240, 98%, 40%); - --gradient: none; -} - -.btn-outline-secondary { - --btn-color: hsl(210, 20%, 60%); - --btn-border-color: hsl(210, 20%, 60%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(210, 20%, 60%); - --btn-hover-border-color: hsl(210, 20%, 60%); - --btn-focus-shadow-rgb: 120, 140, 160; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(210, 20%, 60%); - --btn-active-border-color: hsl(210, 20%, 60%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 20%, 60%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 20%, 60%); - --gradient: none; -} - -.btn-outline-success { - --btn-color: hsl(120, 35%, 55%); - --btn-border-color: hsl(120, 35%, 55%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(120, 35%, 55%); - --btn-hover-border-color: hsl(120, 35%, 55%); - --btn-focus-shadow-rgb: 100, 190, 100; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(120, 35%, 55%); - --btn-active-border-color: hsl(120, 35%, 55%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(120, 35%, 55%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(120, 35%, 55%); - --gradient: none; -} - -.btn-outline-info { - --btn-color: hsl(207, 55%, 65%); - --btn-border-color: hsl(207, 55%, 65%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(207, 55%, 65%); - --btn-hover-border-color: hsl(207, 55%, 65%); - --btn-focus-shadow-rgb: 110, 170, 220; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(207, 55%, 65%); - --btn-active-border-color: hsl(207, 55%, 65%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(207, 55%, 65%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(207, 55%, 65%); - --gradient: none; -} - -.btn-outline-warning { - --btn-color: hsl(38, 100%, 60%); - --btn-border-color: hsl(38, 100%, 60%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(38, 100%, 60%); - --btn-hover-border-color: hsl(38, 100%, 60%); - --btn-focus-shadow-rgb: 240, 190, 70; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(38, 100%, 60%); - --btn-active-border-color: hsl(38, 100%, 60%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(38, 100%, 60%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(38, 100%, 60%); - --gradient: none; -} - -.btn-outline-danger { - --btn-color: hsl(3, 82%, 60%); - --btn-border-color: hsl(3, 82%, 60%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(3, 82%, 60%); - --btn-hover-border-color: hsl(3, 82%, 60%); - --btn-focus-shadow-rgb: 240, 100, 100; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(3, 82%, 60%); - --btn-active-border-color: hsl(3, 82%, 60%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(3, 82%, 60%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(3, 82%, 60%); - --gradient: none; -} - -/* Outline buttons on dark: keep readable borders */ -.btn-outline-light { - --btn-color: #e6ebf1; - --btn-border-color: #e6ebf1; - --btn-hover-color: #111; - --btn-hover-bg: #e6ebf1; - --btn-hover-border-color: #e6ebf1; - --btn-active-color: #111; - --btn-active-bg: #d7dce2; - --btn-active-border-color: #d7dce2; - --gradient: none; -} - -.btn-outline-dark { - --btn-color: hsl(210, 10%, 30%); - --btn-border-color: hsl(210, 10%, 30%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(210, 10%, 30%); - --btn-hover-border-color: hsl(210, 10%, 30%); - --btn-focus-shadow-rgb: 70, 75, 80; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(210, 10%, 30%); - --btn-active-border-color: hsl(210, 10%, 30%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 10%, 30%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 10%, 30%); - --gradient: none; -} - -/* Links as buttons */ -.btn-link { - --btn-font-weight: 400; - --btn-color: var(--color-link); - --btn-bg: transparent; - --btn-border-color: transparent; - --btn-hover-color: var(--link-hover-color); - --btn-hover-border-color: transparent; - --btn-active-color: var(--link-hover-color); - --btn-active-border-color: transparent; - --btn-disabled-color: #6d7781; - --btn-disabled-border-color: transparent; - --btn-box-shadow: none; - --btn-focus-shadow-rgb: 84, 114, 255; - text-decoration: underline; -} diff --git a/src/media/css/theme/dark.standard.css b/src/media/css/theme/dark.standard.css index 8f2a82d..8ccce6b 100644 --- a/src/media/css/theme/dark.standard.css +++ b/src/media/css/theme/dark.standard.css @@ -12,26 +12,144 @@ :root[data-bs-theme='dark']{ color-scheme: dark; + /* ===== BRAND & THEME COLORS ===== */ --color-primary: #112855; --accent-color-primary: #3f8ff0; --accent-color-secondary: #6fb3ff; + +/* ===== TYPOGRAPHY & BODY ===== */ +--font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; +--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +--body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; +--body-font-size: 1rem; +--body-font-weight: 400; +--body-line-height: 1.5; +--body-color: #e6ebf1; +--body-color-rgb: 230, 235, 241; +--body-bg: #0e1318; +--body-bg-rgb: 14, 19, 24; +--heading-color: #f1f5f9; +--emphasis-color: #fff; +--emphasis-color-rgb: 255, 255, 255; +--secondary-color: #e6ebf1bf; +--secondary-color-rgb: 230, 235, 241; +--tertiary-color: #e6ebf180; +--tertiary-color-rgb: 230, 235, 241; +--muted-color: #6d757e; +--code-color: black; +--code-color-ink: var(--code-color, #e93f8e); +--code-bg-color: lightgreen; +--highlight-color: #111; +--highlight-bg: #ffe28a1a; + + +/* ===== STANDARD COLORS ===== */ +--blue: #91a4ff; +--indigo: #b19cff; +--purple: #c0a5ff; +--pink: #ff8fc0; +--red: #ff7a73; +--orange: #ff9c4d; +--yellow: #ffd166; +--green: #78d694; +--teal: #76e3ff; +--cyan: #6fb7ff; +--black: #000; +--white: #fff; + + +/* ===== GRAY SCALE ===== */ +--gray-100: #161a20; +--gray-200: #1b2027; +--gray-300: #222831; +--gray-400: #2b323b; +--gray-500: #36404a; +--gray-600: #48525d; +--gray-700: #5b6672; +--gray-800: #cfd6de; +--gray-900: #e6ebf1; +--white-rgb: 255, 255, 255; +--black-rgb: 0, 0, 0; + + +/* ===== OPACITY UTILITIES ===== */ +--opacity-0: 0; +--opacity-5: 0.05; +--opacity-10: 0.1; +--opacity-15: 0.15; +--opacity-20: 0.2; +--opacity-25: 0.25; +--opacity-30: 0.3; +--opacity-50: 0.5; +--opacity-75: 0.75; +--opacity-100: 1; + + +/* ===== LAYOUT & SPACING ===== */ +--padding-x: 0.15rem; +--padding-y: 0.15rem; +--bg-opacity: 1; +--nav-toggle-size: 3rem; +--gradient: linear-gradient(180deg, #ffffff26, #fff0); +--secondary-bg: #151b22; +--secondary-bg-rgb: 21, 27, 34; +--tertiary-bg: #10151b; +--tertiary-bg-rgb: 16, 21, 27; +--hr-color: var(--border-color, #dfe3e7); +--border-color-soft: var(--border-color, #dfe3e7); +--kbd-bg: var(--secondary-bg, #eaedf0); +--kbd-ink: var(--body-bg, #fff); +--toc-bg: var(--secondary-bg, #eaedf0); +--toc-ink: var(--color-primary, #112855); +--selection-bg: var(--highlight-bg, #fbeea8); +--selection-ink: var(--body-color, #22262a); +--border: 5px; + + +/* ===== BREAKPOINTS ===== */ +--bp-xs: 0; +--bp-sm: 576px; +--bp-md: 768px; +--bp-lg: 992px; +--bp-xl: 1200px; + + +/* ===== BORDERS ===== */ +--border-width: 1px; +--border-style: solid; +--border-color: #2b323b; +--border-color-translucent: #ffffff26; +--border-radius: .25rem; +--border-radius-sm: .2rem; +--border-radius-lg: .3rem; +--border-radius-xl: .3rem; +--border-radius-xxl: 2rem; +--border-radius-2xl: var(--border-radius-xxl); +--border-radius-pill: 50rem; + + +/* ===== SHADOWS ===== */ +--box-shadow: 0 .5rem 1rem #00000066; +--box-shadow-sm: 0 .125rem .25rem #00000040; +--box-shadow-lg: 0 1rem 3rem #00000080; +--box-shadow-inset: inset 0 1px 2px #00000040; + + +/* ===== COMMON SHADOW COLORS ===== */ +--shadow-color-light: rgba(var(--black-rgb), var(--opacity-30)); +--shadow-color-medium: rgba(var(--black-rgb), var(--opacity-50)); +--shadow-color-dark: rgba(var(--black-rgb), var(--opacity-75)); +--border-color-translucent: rgba(var(--white-rgb), var(--opacity-10)); +--highlight-translucent: rgba(var(--white-rgb), var(--opacity-5)); + + /* ===== NAVIGATION ===== */ --mainmenu-nav-link-color: #fff; --nav-text-color: gray; --nav-bg-color: var(--color-primary); -/* ===== LINKS ===== */ ---color-link: white; ---color-hover: gray; ---color-active: var(--mainmenu-nav-link-color); ---link-color: #8ab4f8; ---link-color-rgb: 138, 180, 248; ---link-decoration: underline; ---link-hover-color: #c3d6ff; ---link-hover-color-rgb: 195, 214, 255; ---link-active-color: var(--link-color); /* ===== NAVBAR ===== */ --navbar-padding-x: 1rem; @@ -59,135 +177,18 @@ color-scheme: dark; --nav-link-active-color: var(--mainmenu-nav-link-color); --nav-link-disabled-color: #6c757d; -/* ===== TYPOGRAPHY & BODY ===== */ ---font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; ---font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; ---body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; ---body-font-size: 1rem; ---body-font-weight: 400; ---body-line-height: 1.5; ---body-color: #e6ebf1; ---body-color-rgb: 230, 235, 241; ---body-bg: #0e1318; ---body-bg-rgb: 14, 19, 24; ---heading-color: #f1f5f9; ---emphasis-color: #fff; ---emphasis-color-rgb: 255, 255, 255; ---secondary-color: #e6ebf1bf; ---secondary-color-rgb: 230, 235, 241; ---tertiary-color: #e6ebf180; ---tertiary-color-rgb: 230, 235, 241; ---muted-color: #6d757e; ---code-color: black; ---code-color-ink: var(--code-color, #e93f8e); ---code-bg-color: lightgreen; ---highlight-color: #111; ---highlight-bg: #ffe28a1a; -/* ===== LAYOUT & SPACING ===== */ ---padding-x: 0.15rem; ---padding-y: 0.15rem; ---bg-opacity: 1; ---nav-toggle-size: 3rem; ---gradient: linear-gradient(180deg, #ffffff26, #fff0); ---secondary-bg: #151b22; ---secondary-bg-rgb: 21, 27, 34; ---tertiary-bg: #10151b; ---tertiary-bg-rgb: 16, 21, 27; ---hr-color: var(--border-color, #dfe3e7); ---border-color-soft: var(--border-color, #dfe3e7); ---kbd-bg: var(--secondary-bg, #eaedf0); ---kbd-ink: var(--body-bg, #fff); ---toc-bg: var(--secondary-bg, #eaedf0); ---toc-ink: var(--color-primary, #112855); ---selection-bg: var(--highlight-bg, #fbeea8); ---selection-ink: var(--body-color, #22262a); ---border: 5px; +/* ===== LINKS ===== */ +--color-link: white; +--color-hover: gray; +--color-active: var(--mainmenu-nav-link-color); +--link-color: #8ab4f8; +--link-color-rgb: 138, 180, 248; +--link-decoration: underline; +--link-hover-color: #c3d6ff; +--link-hover-color-rgb: 195, 214, 255; +--link-active-color: var(--link-color); -/* ===== BREAKPOINTS ===== */ ---bp-xs: 0; ---bp-sm: 576px; ---bp-md: 768px; ---bp-lg: 992px; ---bp-xl: 1200px; - -/* ===== BOOTSTRAP PALETTE ===== */ ---primary: #010156; ---secondary: #48525d; ---success: #4aa664; ---info: #4f7aa0; ---warning: #c77a00; ---danger: #c23a31; ---light: #1b2027; ---dark: #0f1318; ---primary-rgb: 1,1,86; ---secondary-rgb: 72,82,93; ---success-rgb: 74,166,100; ---info-rgb: 79,122,160; ---warning-rgb: 199,122,0; ---danger-rgb: 194,58,49; ---light-rgb: 27,32,39; ---dark-rgb: 15,19,24; ---primary-text-emphasis: #c7ccff; ---secondary-text-emphasis: #cfd6de; ---success-text-emphasis: #bde8c9; ---info-text-emphasis: #bcd6ee; ---warning-text-emphasis: #ffd9a6; ---danger-text-emphasis: #ffb7b2; ---light-text-emphasis: #d2d8df; ---dark-text-emphasis: #d2d8df; ---primary-bg-subtle: #0b1030; ---secondary-bg-subtle: #1e2430; ---success-bg-subtle: #0f2a1b; ---info-bg-subtle: #0d2232; ---warning-bg-subtle: #2a1e06; ---danger-bg-subtle: #2d1110; ---light-bg-subtle: #12161d; ---dark-bg-subtle: #1e2430; ---primary-border-subtle: #2b3a7a; ---secondary-border-subtle: #2b323b; ---success-border-subtle: #2b5b40; ---info-border-subtle: #254861; ---warning-border-subtle: #5a3c0e; ---danger-border-subtle: #5c2723; ---light-border-subtle: #222831; ---dark-border-subtle: #2b323b; - -/* ===== ALERT LINK COLORS ===== */ ---alert-primary-link-color: #b3c1ff; ---alert-secondary-link-color: #9fa6ad; ---alert-success-link-color: #a0e5b3; ---alert-info-link-color: #8eccf2; ---alert-warning-link-color: #ffe4a0; ---alert-danger-link-color: #ffa8a3; ---alert-light-link-color: #f0f4f8; ---alert-dark-link-color: #9fa6ad; - -/* ===== LIST GROUP ITEM COLORS ===== */ ---list-group-item-primary-color: #8ca3ff; ---list-group-item-primary-bg: #1a2550; ---list-group-item-primary-active-bg: #223066; ---list-group-item-secondary-color: #9fa6ad; ---list-group-item-secondary-bg: #2b323b; ---list-group-item-secondary-active-bg: #363d47; ---list-group-item-success-color: #a0e5b3; ---list-group-item-success-bg: #1e3d2d; ---list-group-item-success-active-bg: #275538; ---list-group-item-info-color: #8eccf2; ---list-group-item-info-bg: #1a3448; ---list-group-item-info-active-bg: #234459; ---list-group-item-warning-color: #ffe4a0; ---list-group-item-warning-bg: #4a3410; ---list-group-item-warning-active-bg: #5c4216; ---list-group-item-danger-color: #ffa8a3; ---list-group-item-danger-bg: #4a1e1c; ---list-group-item-danger-active-bg: #5c2823; ---list-group-item-light-color: #e9ecef; ---list-group-item-light-bg: #1e2430; ---list-group-item-light-active-bg: #282f3d; ---list-group-item-dark-color: #48525d; ---list-group-item-dark-bg: #0e1318; ---list-group-item-dark-active-bg: #161b22; /* ===== LINK UTILITY COLORS ===== */ --link-primary-color: hsl(240, 98%, 50%); @@ -207,85 +208,6 @@ color-scheme: dark; --link-dark-color: hsl(210, 10%, 35%); --link-dark-hover-color: hsl(210, 10%, 30%); -/* ===== COMPONENT-SPECIFIC COLORS ===== */ ---mod-finder-link-hover: #5a6470; ---form-legend-color: #9fa6ad; ---border-gray: #3a4250; ---subhead-color: #9fa6ad; ---box-shadow-gray: #1a2027; ---btn-active-text-gray: #7a8490; ---indicator-success-bg: var(--success); ---item-list-color: #2a2f34; ---notification-badge-bg: var(--danger); ---content-bg-gray: #2b323b; ---taba-btn-green: #5a9c2f; ---taba-btn-blue: #3d75a8; ---taba-btn-red: #c43620; ---taba-btn-gray: #6a7080; ---taba-msg-bg: #1e2430; ---toc-link-color: #9fa6ad; ---toc-link-active-color: #91a4ff; ---choices-disabled-bg: #2b323b; ---choices-input-bg: var(--body-bg); ---choices-border-light: #48525d; ---choices-arrow-color: #9fa6ad; ---choices-inner-bg: #1a2027; ---choices-focused-border: #5472ff; ---choices-dropdown-bg: var(--body-bg); ---choices-item-bg: #1a5f75; ---choices-item-border: #1a748f; ---choices-item-hover-bg: #1a748f; ---choices-item-hover-border: #1a8aa8; ---choices-item-disabled-bg: #48525d; ---choices-item-disabled-border: #36404a; ---choices-item-highlighted: #2b323b; ---choices-input-inner-bg: #1a2027; - -/* ===== STANDARD COLORS ===== */ ---blue: #91a4ff; ---indigo: #b19cff; ---purple: #c0a5ff; ---pink: #ff8fc0; ---red: #ff7a73; ---orange: #ff9c4d; ---yellow: #ffd166; ---green: #78d694; ---teal: #76e3ff; ---cyan: #6fb7ff; ---black: #000; ---white: #fff; - -/* ===== GRAY SCALE ===== */ ---gray-100: #161a20; ---gray-200: #1b2027; ---gray-300: #222831; ---gray-400: #2b323b; ---gray-500: #36404a; ---gray-600: #48525d; ---gray-700: #5b6672; ---gray-800: #cfd6de; ---gray-900: #e6ebf1; ---white-rgb: 255, 255, 255; ---black-rgb: 0, 0, 0; - -/* ===== OPACITY UTILITIES ===== */ ---opacity-0: 0; ---opacity-5: 0.05; ---opacity-10: 0.1; ---opacity-15: 0.15; ---opacity-20: 0.2; ---opacity-25: 0.25; ---opacity-30: 0.3; ---opacity-50: 0.5; ---opacity-75: 0.75; ---opacity-100: 1; - -/* ===== COMMON SHADOW COLORS ===== */ ---shadow-color-light: rgba(var(--black-rgb), var(--opacity-30)); ---shadow-color-medium: rgba(var(--black-rgb), var(--opacity-50)); ---shadow-color-dark: rgba(var(--black-rgb), var(--opacity-75)); ---border-color-translucent: rgba(var(--white-rgb), var(--opacity-10)); ---highlight-translucent: rgba(var(--white-rgb), var(--opacity-5)); /* ===== HEADER BACKGROUND ===== */ --header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); @@ -293,6 +215,7 @@ color-scheme: dark; --header-background-repeat: repeat; --header-background-size: auto; + /* ===== CONTAINER BACKGROUNDS ===== */ /* Below Topbar Container */ --container-below-topbar-bg-image: none; @@ -358,24 +281,6 @@ color-scheme: dark; --container-bottom-b-border: none; --container-bottom-b-border-radius: 0; -/* ===== BORDERS ===== */ ---border-width: 1px; ---border-style: solid; ---border-color: #2b323b; ---border-color-translucent: #ffffff26; ---border-radius: .25rem; ---border-radius-sm: .2rem; ---border-radius-lg: .3rem; ---border-radius-xl: .3rem; ---border-radius-xxl: 2rem; ---border-radius-2xl: var(--border-radius-xxl); ---border-radius-pill: 50rem; - -/* ===== SHADOWS ===== */ ---box-shadow: 0 .5rem 1rem #00000066; ---box-shadow-sm: 0 .125rem .25rem #00000040; ---box-shadow-lg: 0 1rem 3rem #00000080; ---box-shadow-inset: inset 0 1px 2px #00000040; /* ===== FOCUS & FORMS ===== */ --focus-ring-width: .25rem; @@ -396,10 +301,85 @@ color-scheme: dark; --form-invalid-color: #ff8e86; --form-invalid-border-color: #ff8e86; + /* ===== BUTTONS ===== */ --btn-border-radius: var(--border-radius); --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3); + +/* ===== ACCORDION ===== */ +--accordion-color: var(--body-color); +--accordion-bg: var(--body-bg); +--accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease; +--accordion-border-color: var(--border-color); +--accordion-border-width: 1px; +--accordion-border-radius: 0.25rem; +--accordion-inner-border-radius: calc(0.25rem - 1px); +--accordion-btn-padding-x: 1.25rem; +--accordion-btn-padding-y: 1rem; +--accordion-btn-color: var(--body-color); +--accordion-btn-bg: var(--accordion-bg); +--accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e6ebf1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); +--accordion-btn-icon-width: 1.25rem; +--accordion-btn-icon-transform: rotate(-180deg); +--accordion-btn-icon-transition: transform 0.2s ease-in-out; +--accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ab4f8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); +--accordion-btn-focus-border-color: var(--input-focus-border-color); +--accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); +--accordion-body-padding-x: 1.25rem; +--accordion-body-padding-y: 1rem; +--accordion-active-color: var(--link-color); +--accordion-active-bg: var(--secondary-bg); + + +/* ===== ALERT ===== */ +--alert-bg: transparent; +--alert-padding-x: 1rem; +--alert-padding-y: 1rem; +--alert-margin-bottom: 1rem; +--alert-color: #000; +--alert-border-color: transparent; +--alert-border: 1px solid var(--alert-border-color); +--alert-border-radius: 0.25rem; + + +/* ===== ALERT LINK COLORS ===== */ +--alert-primary-link-color: #b3c1ff; +--alert-secondary-link-color: #9fa6ad; +--alert-success-link-color: #a0e5b3; +--alert-info-link-color: #8eccf2; +--alert-warning-link-color: #ffe4a0; +--alert-danger-link-color: #ffa8a3; +--alert-light-link-color: #f0f4f8; +--alert-dark-link-color: #9fa6ad; + + +/* ===== BACKDROP ===== */ +--backdrop-zindex: 1040; +--backdrop-bg: hsl(0, 0%, 0%); +--backdrop-opacity: 0.5; + + +/* ===== BADGE ===== */ +--badge-padding-x: 0.65em; +--badge-padding-y: 0.35em; +--badge-font-size: 0.75em; +--badge-font-weight: 700; +--badge-color: var(--body-color); +--badge-border-radius: 0.25rem; + + +/* ===== BREADCRUMB ===== */ +--breadcrumb-padding-x: 0; +--breadcrumb-padding-y: 0; +--breadcrumb-margin-bottom: 1rem; +--breadcrumb-bg: ; +--breadcrumb-border-radius: ; +--breadcrumb-divider-color: var(--gray-600); +--breadcrumb-item-padding-x: 0.5rem; +--breadcrumb-item-active-color: var(--link-color); + + /* ===== CARDS ===== */ --card-spacer-y: 1rem; --card-spacer-x: 1rem; @@ -419,6 +399,406 @@ color-scheme: dark; --card-img-overlay-padding: 1rem; --card-group-margin: 0.75rem; + +/* ===== DROPDOWN ===== */ +--dropdown-zindex: 1000; +--dropdown-min-width: 10rem; +--dropdown-padding-x: 0; +--dropdown-padding-y: 0.5rem; +--dropdown-spacer: 0.125rem; +--dropdown-font-size: 1rem; +--dropdown-color: var(--body-color); +--dropdown-bg: var(--secondary-bg); +--dropdown-border-color: var(--border-color-translucent); +--dropdown-border-radius: 0.25rem; +--dropdown-border-width: 1px; +--dropdown-inner-border-radius: calc(0.25rem - 1px); +--dropdown-divider-bg: var(--border-color-translucent); +--dropdown-divider-margin-y: 0.5rem; +--dropdown-box-shadow: 0 0.5rem 1rem var(--shadow-color-medium); +--dropdown-link-color: var(--body-color); +--dropdown-link-active-color: var(--body-color); +--dropdown-link-active-bg: hsl(240, 98%, 17%); +--dropdown-link-disabled-color: var(--gray-600); +--dropdown-item-padding-x: 1rem; +--dropdown-item-padding-y: 0.25rem; +--dropdown-header-color: var(--gray-600); +--dropdown-header-padding-x: 1rem; +--dropdown-header-padding-y: 0.5rem; + + +/* ===== LIST GROUP ===== */ +--list-group-color: var(--body-color); +--list-group-bg: var(--secondary-bg); +--list-group-border-color: rgba(var(--white-rgb), 0.125); +--list-group-border-width: 1px; +--list-group-border-radius: 0.25rem; +--list-group-item-padding-x: 1rem; +--list-group-item-padding-y: 0.5rem; +--list-group-action-color: var(--gray-800); +--list-group-action-active-color: var(--body-color); +--list-group-action-active-bg: var(--tertiary-bg); +--list-group-disabled-color: var(--gray-600); +--list-group-disabled-bg: var(--secondary-bg); +--list-group-active-color: var(--body-color); +--list-group-active-bg: hsl(240, 98%, 17%); +--list-group-active-border-color: hsl(240, 98%, 17%); + + +/* ===== LIST GROUP ITEM COLORS ===== */ +--list-group-item-primary-color: #8ca3ff; +--list-group-item-primary-bg: #1a2550; +--list-group-item-primary-active-bg: #223066; +--list-group-item-secondary-color: #9fa6ad; +--list-group-item-secondary-bg: #2b323b; +--list-group-item-secondary-active-bg: #363d47; +--list-group-item-success-color: #a0e5b3; +--list-group-item-success-bg: #1e3d2d; +--list-group-item-success-active-bg: #275538; +--list-group-item-info-color: #8eccf2; +--list-group-item-info-bg: #1a3448; +--list-group-item-info-active-bg: #234459; +--list-group-item-warning-color: #ffe4a0; +--list-group-item-warning-bg: #4a3410; +--list-group-item-warning-active-bg: #5c4216; +--list-group-item-danger-color: #ffa8a3; +--list-group-item-danger-bg: #4a1e1c; +--list-group-item-danger-active-bg: #5c2823; +--list-group-item-light-color: #e9ecef; +--list-group-item-light-bg: #1e2430; +--list-group-item-light-active-bg: #282f3d; +--list-group-item-dark-color: #48525d; +--list-group-item-dark-bg: #0e1318; +--list-group-item-dark-active-bg: #161b22; + + +/* ===== MODAL ===== */ +--modal-zindex: 1050; +--modal-width: 500px; +--modal-padding: 1rem; +--modal-margin: 0.5rem; +--modal-color: ; +--modal-bg: var(--secondary-bg); +--modal-border-color: var(--border-color-translucent); +--modal-border-width: 1px; +--modal-border-radius: 0.3rem; +--modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3); +--modal-inner-border-radius: calc(0.3rem - 1px); +--modal-header-padding-x: 1rem; +--modal-header-padding-y: 1rem; +--modal-header-padding: 1rem 1rem; +--modal-header-border-color: var(--border-color); +--modal-header-border-width: 1px; +--modal-title-line-height: 1.5; +--modal-footer-gap: 0.5rem; +--modal-footer-bg: ; +--modal-footer-border-color: var(--border-color); +--modal-footer-border-width: 1px; + + +/* ===== NAV TABS ===== */ +--nav-tabs-border-width: 1px; +--nav-tabs-border-color: var(--border-color); +--nav-tabs-border-radius: 0.25rem; +--nav-tabs-link-active-color: var(--body-color); +--nav-tabs-link-active-bg: var(--secondary-bg); +--nav-tabs-link-active-border-color: var(--border-color) var(--border-color) var(--secondary-bg); + + +/* ===== NAV PILLS ===== */ +--nav-pills-border-radius: 0.25rem; +--nav-pills-link-active-color: var(--body-color); +--nav-pills-link-active-bg: hsl(240, 98%, 17%); + + +/* ===== OFFCANVAS ===== */ +--offcanvas-zindex: 1045; +--offcanvas-width: 400px; +--offcanvas-height: 30vh; +--offcanvas-padding-x: 1rem; +--offcanvas-padding-y: 1rem; +--offcanvas-color: var(--body-color); +--offcanvas-bg: var(--body-bg); +--offcanvas-border-width: 1px; +--offcanvas-border-color: var(--border-color-translucent); +--offcanvas-box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3); + + +/* ===== PAGINATION ===== */ +--pagination-padding-x: 0.75rem; +--pagination-padding-y: 0.375rem; +--pagination-font-size: 1rem; +--pagination-color: var(--link-color); +--pagination-bg: var(--secondary-bg); +--pagination-border-width: 1px; +--pagination-border-color: var(--border-color); +--pagination-border-radius: 0.25rem; +--pagination-focus-color: var(--link-active-color); +--pagination-focus-bg: var(--tertiary-bg); +--pagination-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); +--pagination-active-color: var(--body-color); +--pagination-active-bg: hsl(240, 98%, 17%); +--pagination-active-border-color: hsl(240, 98%, 17%); +--pagination-disabled-color: var(--gray-600); +--pagination-disabled-bg: var(--secondary-bg); +--pagination-disabled-border-color: var(--border-color); + + +/* ===== POPOVER ===== */ +--popover-zindex: 1060; +--popover-max-width: 276px; +--popover-font-size: 0.875rem; +--popover-bg: var(--secondary-bg); +--popover-border-width: 1px; +--popover-border-color: var(--border-color-translucent); +--popover-border-radius: 0.3rem; +--popover-inner-border-radius: calc(0.3rem - 1px); +--popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4); +--popover-header-padding-x: 1rem; +--popover-header-padding-y: 0.5rem; +--popover-header-font-size: 1rem; +--popover-header-color: ; +--popover-header-bg: var(--tertiary-bg); +--popover-body-padding-x: 1rem; +--popover-body-padding-y: 1rem; +--popover-body-color: var(--body-color); +--popover-arrow-width: 1rem; +--popover-arrow-height: 0.5rem; +--popover-arrow-border: var(--popover-border-color); + + +/* ===== PROGRESS ===== */ +--progress-height: 1rem; +--progress-font-size: 0.75rem; +--progress-bg: var(--secondary-bg); +--progress-border-radius: 0.25rem; +--progress-box-shadow: inset 0 1px 2px rgba(var(--black-rgb), 0.3); +--progress-bar-color: var(--body-color); +--progress-bar-bg: hsl(240, 98%, 40%); +--progress-bar-transition: width 0.6s ease; + + +/* ===== SPINNER ===== */ +--spinner-width: 2rem; +--spinner-height: 2rem; +--spinner-vertical-align: -0.125em; +--spinner-border-width: 0.25em; +--spinner-animation-speed: 0.75s; + + +/* ===== TABLE ===== */ +--table-color: var(--body-color); +--table-bg: transparent; +--table-border-color: var(--border-color); +--table-accent-bg: transparent; +--table-striped-color: var(--body-color); +--table-striped-bg: rgba(var(--white-rgb), var(--opacity-5)); +--table-active-color: var(--body-color); +--table-active-bg: rgba(var(--white-rgb), 0.1); + + +/* ===== TOAST ===== */ +--toast-zindex: 1090; +--toast-padding-x: 0.75rem; +--toast-padding-y: 0.5rem; +--toast-spacing: 1em; +--toast-max-width: 350px; +--toast-font-size: 0.875rem; +--toast-color: ; +--toast-bg: rgba(21, 27, 34, 0.9); +--toast-border-width: 1px; +--toast-border-color: var(--border-color-translucent); +--toast-border-radius: 0.25rem; +--toast-box-shadow: 0 0.5rem 1rem var(--shadow-color-medium); +--toast-header-color: var(--gray-600); +--toast-header-bg: rgba(21, 27, 34, 0.85); +--toast-header-border-color: rgba(var(--white-rgb), var(--opacity-10)); + + +/* ===== TOOLTIP ===== */ +--tooltip-zindex: 1070; +--tooltip-max-width: 200px; +--tooltip-padding-x: 0.5rem; +--tooltip-padding-y: 0.25rem; +--tooltip-margin: ; +--tooltip-font-size: 0.875rem; +--tooltip-color: var(--body-color); +--tooltip-bg: hsl(0, 0%, 0%); +--tooltip-border-radius: 0.25rem; +--tooltip-opacity: 0.9; +--tooltip-arrow-width: 0.8rem; +--tooltip-arrow-height: 0.4rem; + + +/* ===== BOOTSTRAP PALETTE ===== */ +--primary: #010156; +--secondary: #48525d; +--success: #4aa664; +--info: #4f7aa0; +--warning: #c77a00; +--danger: #c23a31; +--light: #1b2027; +--dark: #0f1318; +--primary-rgb: 1,1,86; +--secondary-rgb: 72,82,93; +--success-rgb: 74,166,100; +--info-rgb: 79,122,160; +--warning-rgb: 199,122,0; +--danger-rgb: 194,58,49; +--light-rgb: 27,32,39; +--dark-rgb: 15,19,24; +--primary-text-emphasis: #c7ccff; +--secondary-text-emphasis: #cfd6de; +--success-text-emphasis: #bde8c9; +--info-text-emphasis: #bcd6ee; +--warning-text-emphasis: #ffd9a6; +--danger-text-emphasis: #ffb7b2; +--light-text-emphasis: #d2d8df; +--dark-text-emphasis: #d2d8df; +--primary-bg-subtle: #0b1030; +--secondary-bg-subtle: #1e2430; +--success-bg-subtle: #0f2a1b; +--info-bg-subtle: #0d2232; +--warning-bg-subtle: #2a1e06; +--danger-bg-subtle: #2d1110; +--light-bg-subtle: #12161d; +--dark-bg-subtle: #1e2430; +--primary-border-subtle: #2b3a7a; +--secondary-border-subtle: #2b323b; +--success-border-subtle: #2b5b40; +--info-border-subtle: #254861; +--warning-border-subtle: #5a3c0e; +--danger-border-subtle: #5c2723; +--light-border-subtle: #222831; +--dark-border-subtle: #2b323b; + + +/* ===== 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-bg-position: center; +--hero-overlay-bg-size: cover; +--hero-overlay-padding: 1em; +--hero-overlay-text-align: center; +--hero-overlay-text-color: var(--body-color); + + +/* ===== HERO VARIANTS ===== */ +/* Primary — deep navy, dark overlay */ +--hero-primary-bg-color: #0d1e3a; +--hero-primary-overlay: linear-gradient(rgba(13, 30, 58, .65), rgba(13, 30, 58, .65)); +--hero-primary-color: #f1f5f9; + +/* Secondary — darker navy, heavier overlay */ +--hero-secondary-bg-color: #080f1e; +--hero-secondary-overlay: linear-gradient(rgba(8, 15, 30, .80), rgba(8, 15, 30, .80)); +--hero-secondary-color: #f1f5f9; + + +/* ===== HERO CARD (inner .hero element) ===== */ +/* Default card — uses primary variant values */ +--hero-card-bg: var(--hero-primary-bg-color); +--hero-card-color: white; +--hero-card-overlay: var(--hero-primary-overlay); +--hero-card-border-radius: .5rem; +--hero-card-padding-x: 2rem; +--hero-card-padding-y: 3rem; +--hero-card-max-width: 800px; + +/* Alternative card — uses secondary variant values */ +--hero-alt-card-bg: var(--hero-secondary-bg-color); +--hero-alt-card-color: var(--hero-secondary-color); +--hero-alt-card-overlay: var(--hero-secondary-overlay); +--hero-alt-card-border-radius: .5rem; +--hero-alt-card-padding-x: 2rem; +--hero-alt-card-padding-y: 3rem; +--hero-alt-card-max-width: 600px; + + +/* ===== BLOCK COLORS (top-a / top-b / bottom-a / bottom-b) ===== */ +--block-color-1: var(--secondary-bg); +--block-text-1: var(--body-color); + +--block-color-2: var(--accent-color-primary); +--block-text-2: #fff; + +--block-color-3: rgba(238, 194, 52, .15); +--block-text-3: var(--body-color); + +--block-color-4: rgba(74, 166, 100, .15); +--block-text-4: var(--body-color); + + +/* ===== BLOCK COLOR OVERRIDES ===== */ +--block-highlight-bg: var(--accent-color-primary); +--block-highlight-text: #fff; + +--block-cta-bg: var(--color-primary); +--block-cta-text: #f1f5f9; + +--block-alert-bg: var(--danger, #c23a31); +--block-alert-text: #fff; + + +/* ===== FOOTER ===== */ +--footer-padding-top: 1rem; +--footer-padding-bottom: 80px; +--footer-grid-padding-y: 2.5rem; +--footer-grid-padding-x: 0.5em; + + +/* ===== THEME FAB ===== */ +--theme-fab-bg: #e6ebf1; +--theme-fab-color: #0e1318; +--theme-fab-btn-bg: transparent; +--theme-fab-border: rgba(0, 0, 0, 0.15); + + +/* ===== OFFLINE PAGE ===== */ +--offline-card-bg: rgba(0, 0, 0, 0.6); + + +/* ===== COMPONENT-SPECIFIC COLORS ===== */ +--mod-finder-link-hover: #5a6470; +--form-legend-color: #9fa6ad; +--border-gray: #3a4250; +--subhead-color: #9fa6ad; +--box-shadow-gray: #1a2027; +--btn-active-text-gray: #7a8490; +--indicator-success-bg: var(--success); +--item-list-color: #2a2f34; +--notification-badge-bg: var(--danger); +--content-bg-gray: #2b323b; +--taba-btn-green: #5a9c2f; +--taba-btn-blue: #3d75a8; +--taba-btn-red: #c43620; +--taba-btn-gray: #6a7080; +--taba-msg-bg: #1e2430; +--toc-link-color: #9fa6ad; +--toc-link-active-color: #91a4ff; +--choices-disabled-bg: #2b323b; +--choices-input-bg: var(--body-bg); +--choices-border-light: #48525d; +--choices-arrow-color: #9fa6ad; +--choices-inner-bg: #1a2027; +--choices-focused-border: #5472ff; +--choices-dropdown-bg: var(--body-bg); +--choices-item-bg: #1a5f75; +--choices-item-border: #1a748f; +--choices-item-hover-bg: #1a748f; +--choices-item-hover-border: #1a8aa8; +--choices-item-disabled-bg: #48525d; +--choices-item-disabled-border: #36404a; +--choices-item-highlighted: #2b323b; +--choices-input-inner-bg: #1a2027; + + /* ===== VIRTUEMART (VM) ===== */ /* VM Surfaces */ --vm-surface: var(--secondary-bg); @@ -498,6 +878,7 @@ color-scheme: dark; --vm-vendor-menu-link-active: var(--primary); --vm-vendor-menu-hover-bg: var(--tertiary-bg); + /* ===== GABLE ===== */ --gab-blue: #4d9fff; --gab-green: #5cb85c; @@ -507,326 +888,6 @@ color-scheme: dark; --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-bg-position: center; ---hero-overlay-bg-size: cover; ---hero-overlay-padding: 1em; ---hero-overlay-text-align: center; ---hero-overlay-text-color: var(--body-color); - -/* ===== HERO VARIANTS ===== */ -/* Primary — deep navy, dark overlay */ ---hero-primary-bg-color: #0d1e3a; ---hero-primary-overlay: linear-gradient(rgba(13, 30, 58, .65), rgba(13, 30, 58, .65)); ---hero-primary-color: #f1f5f9; - -/* Secondary — darker navy, heavier overlay */ ---hero-secondary-bg-color: #080f1e; ---hero-secondary-overlay: linear-gradient(rgba(8, 15, 30, .80), rgba(8, 15, 30, .80)); ---hero-secondary-color: #f1f5f9; - -/* ===== HERO CARD (inner .hero element) ===== */ -/* Default card — uses primary variant values */ ---hero-card-bg: var(--hero-primary-bg-color); ---hero-card-color: white; ---hero-card-overlay: var(--hero-primary-overlay); ---hero-card-border-radius: .5rem; ---hero-card-padding-x: 2rem; ---hero-card-padding-y: 3rem; ---hero-card-max-width: 800px; - -/* Alternative card — uses secondary variant values */ ---hero-alt-card-bg: var(--hero-secondary-bg-color); ---hero-alt-card-color: var(--hero-secondary-color); ---hero-alt-card-overlay: var(--hero-secondary-overlay); ---hero-alt-card-border-radius: .5rem; ---hero-alt-card-padding-x: 2rem; ---hero-alt-card-padding-y: 3rem; ---hero-alt-card-max-width: 600px; - -/* ===== BLOCK COLORS (top-a / top-b / bottom-a / bottom-b) ===== */ ---block-color-1: var(--secondary-bg); ---block-text-1: var(--body-color); - ---block-color-2: var(--accent-color-primary); ---block-text-2: #fff; - ---block-color-3: rgba(238, 194, 52, .15); ---block-text-3: var(--body-color); - ---block-color-4: rgba(74, 166, 100, .15); ---block-text-4: var(--body-color); - -/* ===== BLOCK COLOR OVERRIDES ===== */ ---block-highlight-bg: var(--accent-color-primary); ---block-highlight-text: #fff; - ---block-cta-bg: var(--color-primary); ---block-cta-text: #f1f5f9; - ---block-alert-bg: var(--danger, #c23a31); ---block-alert-text: #fff; - -/* ===== OFFCANVAS ===== */ ---offcanvas-zindex: 1045; ---offcanvas-width: 400px; ---offcanvas-height: 30vh; ---offcanvas-padding-x: 1rem; ---offcanvas-padding-y: 1rem; ---offcanvas-color: var(--body-color); ---offcanvas-bg: var(--body-bg); ---offcanvas-border-width: 1px; ---offcanvas-border-color: var(--border-color-translucent); ---offcanvas-box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3); - -/* ===== ACCORDION ===== */ ---accordion-color: var(--body-color); ---accordion-bg: var(--body-bg); ---accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease; ---accordion-border-color: var(--border-color); ---accordion-border-width: 1px; ---accordion-border-radius: 0.25rem; ---accordion-inner-border-radius: calc(0.25rem - 1px); ---accordion-btn-padding-x: 1.25rem; ---accordion-btn-padding-y: 1rem; ---accordion-btn-color: var(--body-color); ---accordion-btn-bg: var(--accordion-bg); ---accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e6ebf1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-icon-width: 1.25rem; ---accordion-btn-icon-transform: rotate(-180deg); ---accordion-btn-icon-transition: transform 0.2s ease-in-out; ---accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ab4f8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-focus-border-color: var(--input-focus-border-color); ---accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); ---accordion-body-padding-x: 1.25rem; ---accordion-body-padding-y: 1rem; ---accordion-active-color: var(--link-color); ---accordion-active-bg: var(--secondary-bg); - -/* ===== BREADCRUMB ===== */ ---breadcrumb-padding-x: 0; ---breadcrumb-padding-y: 0; ---breadcrumb-margin-bottom: 1rem; ---breadcrumb-bg: ; ---breadcrumb-border-radius: ; ---breadcrumb-divider-color: var(--gray-600); ---breadcrumb-item-padding-x: 0.5rem; ---breadcrumb-item-active-color: var(--link-color); - -/* ===== PAGINATION ===== */ ---pagination-padding-x: 0.75rem; ---pagination-padding-y: 0.375rem; ---pagination-font-size: 1rem; ---pagination-color: var(--link-color); ---pagination-bg: var(--secondary-bg); ---pagination-border-width: 1px; ---pagination-border-color: var(--border-color); ---pagination-border-radius: 0.25rem; ---pagination-focus-color: var(--link-active-color); ---pagination-focus-bg: var(--tertiary-bg); ---pagination-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); ---pagination-active-color: var(--body-color); ---pagination-active-bg: hsl(240, 98%, 17%); ---pagination-active-border-color: hsl(240, 98%, 17%); ---pagination-disabled-color: var(--gray-600); ---pagination-disabled-bg: var(--secondary-bg); ---pagination-disabled-border-color: var(--border-color); - -/* ===== BADGE ===== */ ---badge-padding-x: 0.65em; ---badge-padding-y: 0.35em; ---badge-font-size: 0.75em; ---badge-font-weight: 700; ---badge-color: var(--body-color); ---badge-border-radius: 0.25rem; - -/* ===== ALERT ===== */ ---alert-bg: transparent; ---alert-padding-x: 1rem; ---alert-padding-y: 1rem; ---alert-margin-bottom: 1rem; ---alert-color: inherit; ---alert-border-color: transparent; ---alert-border: 1px solid var(--alert-border-color); ---alert-border-radius: 0.25rem; - -/* ===== PROGRESS ===== */ ---progress-height: 1rem; ---progress-font-size: 0.75rem; ---progress-bg: var(--secondary-bg); ---progress-border-radius: 0.25rem; ---progress-box-shadow: inset 0 1px 2px rgba(var(--black-rgb), 0.3); ---progress-bar-color: var(--body-color); ---progress-bar-bg: hsl(240, 98%, 40%); ---progress-bar-transition: width 0.6s ease; - -/* ===== LIST GROUP ===== */ ---list-group-color: var(--body-color); ---list-group-bg: var(--secondary-bg); ---list-group-border-color: rgba(var(--white-rgb), 0.125); ---list-group-border-width: 1px; ---list-group-border-radius: 0.25rem; ---list-group-item-padding-x: 1rem; ---list-group-item-padding-y: 0.5rem; ---list-group-action-color: var(--gray-800); ---list-group-action-active-color: var(--body-color); ---list-group-action-active-bg: var(--tertiary-bg); ---list-group-disabled-color: var(--gray-600); ---list-group-disabled-bg: var(--secondary-bg); ---list-group-active-color: var(--body-color); ---list-group-active-bg: hsl(240, 98%, 17%); ---list-group-active-border-color: hsl(240, 98%, 17%); - -/* ===== DROPDOWN ===== */ ---dropdown-zindex: 1000; ---dropdown-min-width: 10rem; ---dropdown-padding-x: 0; ---dropdown-padding-y: 0.5rem; ---dropdown-spacer: 0.125rem; ---dropdown-font-size: 1rem; ---dropdown-color: var(--body-color); ---dropdown-bg: var(--secondary-bg); ---dropdown-border-color: var(--border-color-translucent); ---dropdown-border-radius: 0.25rem; ---dropdown-border-width: 1px; ---dropdown-inner-border-radius: calc(0.25rem - 1px); ---dropdown-divider-bg: var(--border-color-translucent); ---dropdown-divider-margin-y: 0.5rem; ---dropdown-box-shadow: 0 0.5rem 1rem var(--shadow-color-medium); ---dropdown-link-color: var(--body-color); ---dropdown-link-active-color: var(--body-color); ---dropdown-link-active-bg: hsl(240, 98%, 17%); ---dropdown-link-disabled-color: var(--gray-600); ---dropdown-item-padding-x: 1rem; ---dropdown-item-padding-y: 0.25rem; ---dropdown-header-color: var(--gray-600); ---dropdown-header-padding-x: 1rem; ---dropdown-header-padding-y: 0.5rem; - -/* ===== TOAST ===== */ ---toast-zindex: 1090; ---toast-padding-x: 0.75rem; ---toast-padding-y: 0.5rem; ---toast-spacing: 1em; ---toast-max-width: 350px; ---toast-font-size: 0.875rem; ---toast-color: ; ---toast-bg: rgba(21, 27, 34, 0.9); ---toast-border-width: 1px; ---toast-border-color: var(--border-color-translucent); ---toast-border-radius: 0.25rem; ---toast-box-shadow: 0 0.5rem 1rem var(--shadow-color-medium); ---toast-header-color: var(--gray-600); ---toast-header-bg: rgba(21, 27, 34, 0.85); ---toast-header-border-color: rgba(var(--white-rgb), var(--opacity-10)); - -/* ===== MODAL ===== */ ---modal-zindex: 1050; ---modal-width: 500px; ---modal-padding: 1rem; ---modal-margin: 0.5rem; ---modal-color: ; ---modal-bg: var(--secondary-bg); ---modal-border-color: var(--border-color-translucent); ---modal-border-width: 1px; ---modal-border-radius: 0.3rem; ---modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3); ---modal-inner-border-radius: calc(0.3rem - 1px); ---modal-header-padding-x: 1rem; ---modal-header-padding-y: 1rem; ---modal-header-padding: 1rem 1rem; ---modal-header-border-color: var(--border-color); ---modal-header-border-width: 1px; ---modal-title-line-height: 1.5; ---modal-footer-gap: 0.5rem; ---modal-footer-bg: ; ---modal-footer-border-color: var(--border-color); ---modal-footer-border-width: 1px; - -/* ===== TOOLTIP ===== */ ---tooltip-zindex: 1070; ---tooltip-max-width: 200px; ---tooltip-padding-x: 0.5rem; ---tooltip-padding-y: 0.25rem; ---tooltip-margin: ; ---tooltip-font-size: 0.875rem; ---tooltip-color: var(--body-color); ---tooltip-bg: hsl(0, 0%, 0%); ---tooltip-border-radius: 0.25rem; ---tooltip-opacity: 0.9; ---tooltip-arrow-width: 0.8rem; ---tooltip-arrow-height: 0.4rem; - -/* ===== POPOVER ===== */ ---popover-zindex: 1060; ---popover-max-width: 276px; ---popover-font-size: 0.875rem; ---popover-bg: var(--secondary-bg); ---popover-border-width: 1px; ---popover-border-color: var(--border-color-translucent); ---popover-border-radius: 0.3rem; ---popover-inner-border-radius: calc(0.3rem - 1px); ---popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4); ---popover-header-padding-x: 1rem; ---popover-header-padding-y: 0.5rem; ---popover-header-font-size: 1rem; ---popover-header-color: ; ---popover-header-bg: var(--tertiary-bg); ---popover-body-padding-x: 1rem; ---popover-body-padding-y: 1rem; ---popover-body-color: var(--body-color); ---popover-arrow-width: 1rem; ---popover-arrow-height: 0.5rem; ---popover-arrow-border: var(--popover-border-color); - -/* ===== SPINNER ===== */ ---spinner-width: 2rem; ---spinner-height: 2rem; ---spinner-vertical-align: -0.125em; ---spinner-border-width: 0.25em; ---spinner-animation-speed: 0.75s; - -/* ===== NAV TABS ===== */ ---nav-tabs-border-width: 1px; ---nav-tabs-border-color: var(--border-color); ---nav-tabs-border-radius: 0.25rem; ---nav-tabs-link-active-color: var(--body-color); ---nav-tabs-link-active-bg: var(--secondary-bg); ---nav-tabs-link-active-border-color: var(--border-color) var(--border-color) var(--secondary-bg); - -/* ===== NAV PILLS ===== */ ---nav-pills-border-radius: 0.25rem; ---nav-pills-link-active-color: var(--body-color); ---nav-pills-link-active-bg: hsl(240, 98%, 17%); - -/* ===== TABLE ===== */ ---table-color: var(--body-color); ---table-bg: transparent; ---table-border-color: var(--border-color); ---table-accent-bg: transparent; ---table-striped-color: var(--body-color); ---table-striped-bg: rgba(var(--white-rgb), var(--opacity-5)); ---table-active-color: var(--body-color); ---table-active-bg: rgba(var(--white-rgb), 0.1); - -/* ===== FOOTER ===== */ ---footer-padding-top: 1rem; ---footer-padding-bottom: 80px; ---footer-grid-padding-y: 2.5rem; ---footer-grid-padding-x: 0.5em; - -/* ===== BACKDROP ===== */ ---backdrop-zindex: 1040; ---backdrop-bg: hsl(0, 0%, 0%); ---backdrop-opacity: 0.5; } .btn { diff --git a/src/media/css/theme/light.custom.css b/src/media/css/theme/light.custom.css deleted file mode 100644 index a99b9db..0000000 --- a/src/media/css/theme/light.custom.css +++ /dev/null @@ -1,1158 +0,0 @@ -@charset "UTF-8"; -/* Copyright (C) 2025 Moko Consulting - - This file is part of a Moko Consulting project. - - SPDX-License-Identifier: GPL-3.0-or-later - -/* ----------------------------------------------- - * LIGHT CUSTOM THEME — Warm Earth - * --------------------------------------------- */ - -:root[data-bs-theme="light"] { -color-scheme: light; - -/* ===== BRAND & THEME COLORS ===== */ ---color-primary: #8B4513; ---accent-color-primary: #D2691E; ---accent-color-secondary: #CD853F; - -/* ===== NAVIGATION ===== */ ---mainmenu-nav-link-color: white; ---nav-text-color: white; ---nav-bg-color: #5C3317; - -/* ===== LINKS ===== */ ---color-link: #8B4513; ---color-hover: var(--accent-color-primary); ---link-color: #8B4513; ---link-color-rgb: 139, 69, 19; ---link-decoration: underline; ---link-hover-color: #D2691E; ---link-hover-color-rgb: 210, 105, 30; ---link-active-color: var(--link-color); - -/* ===== NAVBAR ===== */ ---navbar-padding-x: 1rem; ---navbar-padding-y: 0.5rem; ---navbar-color: var(--nav-text-color); ---navbar-active-color: var(--mainmenu-nav-link-color); ---navbar-disabled-color: #6c757d; ---navbar-brand-padding-y: 0.3125rem; ---navbar-brand-margin-end: 1rem; ---navbar-brand-font-size: 1.25rem; ---navbar-brand-color: var(--nav-text-color); ---navbar-brand-active-color: var(--mainmenu-nav-link-color); ---navbar-nav-link-padding-x: 0.5rem; ---navbar-toggler-padding-y: 0.25rem; ---navbar-toggler-padding-x: 0.75rem; ---navbar-toggler-font-size: 1.25rem; ---navbar-toggler-border-color: rgba(0, 0, 0, 0.1); ---navbar-toggler-border-radius: 0.25rem; ---navbar-toggler-focus-width: 0.25rem; ---navbar-toggler-transition: box-shadow 0.15s ease-in-out; ---nav-link-padding-x: 1rem; ---nav-link-padding-y: 0.5rem; ---nav-link-font-weight: 400; ---nav-link-color: var(--nav-text-color); ---nav-link-active-color: var(--mainmenu-nav-link-color); ---nav-link-disabled-color: #6c757d; - -/* ===== TYPOGRAPHY & BODY ===== */ ---font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; ---font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; ---body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); ---body-font-size: 1rem; ---body-font-weight: 400; ---body-line-height: 1.5; ---body-color: #22262a; ---body-color-rgb: 34, 38, 42; ---body-bg: #fff; ---body-bg-rgb: 255, 255, 255; ---heading-color: inherit; ---emphasis-color: #000; ---emphasis-color-rgb: 0, 0, 0; ---secondary-color: #22262abf; ---secondary-color-rgb: 34, 38, 42; ---tertiary-color: #22262a80; ---tertiary-color-rgb: 34, 38, 42; ---muted-color: #6d757e; ---code-color: black; ---code-color-ink: var(--code-color, #e93f8e); ---code-bg-color: lightgreen; ---highlight-color: #22262a; ---highlight-bg: #fbeea8; - -/* ===== LAYOUT & SPACING ===== */ ---padding-x: 0.15rem; ---padding-y: 0.15rem; ---bg-opacity: 1; ---nav-toggle-size: 3rem; ---gradient: linear-gradient(180deg, #ffffff26, #fff0); ---secondary-bg: #eaedf0; ---secondary-bg-rgb: 234, 237, 240; ---tertiary-bg: #f9fafb; ---tertiary-bg-rgb: 249, 250, 251; ---hr-color: var(--border-color, #dfe3e7); ---border-color-soft: var(--border-color, #dfe3e7); ---kbd-bg: var(--secondary-bg, #eaedf0); ---kbd-ink: var(--body-bg, #fff); ---toc-bg: var(--secondary-bg, #eaedf0); ---toc-ink: var(--color-primary, #112855); ---selection-bg: var(--highlight-bg, #fbeea8); ---selection-ink: var(--body-color, #22262a); ---border: 5px; - -/* ===== BREAKPOINTS ===== */ ---bp-xs: 0; ---bp-sm: 576px; ---bp-md: 768px; ---bp-lg: 992px; ---bp-xl: 1200px; - -/* ===== BOOTSTRAP PALETTE ===== */ ---primary: #010156; ---secondary: #6d757e; ---success: #448344; ---info: #30638d; ---warning: #ad6200; ---danger: #a51f18; ---light: #f9fafb; ---dark: #353b41; ---primary-rgb: 1, 1, 86; ---secondary-rgb: 109, 117, 126; ---success-rgb: 68, 131, 68; ---info-rgb: 48, 99, 141; ---warning-rgb: 173, 98, 0; ---danger-rgb: 165, 31, 24; ---light-rgb: 249, 250, 251; ---dark-rgb: 53, 59, 65; ---primary-text-emphasis: #002; ---secondary-text-emphasis: #2c2f32; ---success-text-emphasis: #1b351b; ---info-text-emphasis: #132838; ---warning-text-emphasis: #452700; ---danger-text-emphasis: #420c09; ---light-text-emphasis: #484f56; ---dark-text-emphasis: #484f56; ---primary-bg-subtle: #ccd; ---secondary-bg-subtle: #e2e3e5; ---success-bg-subtle: #dae6da; ---info-bg-subtle: #d6e0e8; ---warning-bg-subtle: #efe0cc; ---danger-bg-subtle: #edd2d1; ---light-bg-subtle: #fcfcfd; ---dark-bg-subtle: #ced4da; ---primary-border-subtle: #99b; ---secondary-border-subtle: #c5c8cb; ---success-border-subtle: #b4ceb4; ---info-border-subtle: #acc1d1; ---warning-border-subtle: #dec099; ---danger-border-subtle: #dba5a2; ---light-border-subtle: #eaedf0; ---dark-border-subtle: #adb5bd; - -/* ===== ALERT LINK COLORS ===== */ ---alert-primary-link-color: #01012a; ---alert-secondary-link-color: #34383d; ---alert-success-link-color: #213f21; ---alert-info-link-color: #172f44; ---alert-warning-link-color: #532f00; ---alert-danger-link-color: #4f0f0b; ---alert-light-link-color: #505050; ---alert-dark-link-color: #1a1c1f; - -/* ===== LIST GROUP ITEM COLORS ===== */ ---list-group-item-primary-color: #010134; ---list-group-item-primary-bg: #ccccdd; ---list-group-item-primary-active-bg: #b8b8c7; ---list-group-item-secondary-color: #41464c; ---list-group-item-secondary-bg: #e2e3e5; ---list-group-item-secondary-active-bg: #cbccce; ---list-group-item-success-color: #294f29; ---list-group-item-success-bg: #dae6da; ---list-group-item-success-active-bg: #c4cfc4; ---list-group-item-info-color: #1d3b55; ---list-group-item-info-bg: #d6e0e8; ---list-group-item-info-active-bg: #c1cad1; ---list-group-item-warning-color: #683b00; ---list-group-item-warning-bg: #efe0cc; ---list-group-item-warning-active-bg: #d7cab8; ---list-group-item-danger-color: #63130e; ---list-group-item-danger-bg: #edd2d1; ---list-group-item-danger-active-bg: #d5bdbc; ---list-group-item-light-color: #646464; ---list-group-item-light-bg: #fefefe; ---list-group-item-light-active-bg: #e5e5e5; ---list-group-item-dark-color: #202327; ---list-group-item-dark-bg: #d7d8d9; ---list-group-item-dark-active-bg: #c2c2c3; - -/* ===== LINK UTILITY COLORS ===== */ ---link-primary-color: hsl(240, 98%, 17%); ---link-primary-hover-color: #010145; ---link-secondary-color: hsl(210, 7%, 46%); ---link-secondary-hover-color: #575e65; ---link-success-color: hsl(120, 32%, 39%); ---link-success-hover-color: #366936; ---link-info-color: hsl(207, 49%, 37%); ---link-info-hover-color: #264f71; ---link-warning-color: hsl(34, 100%, 34%); ---link-warning-hover-color: #8a4e00; ---link-danger-color: hsl(3, 75%, 37%); ---link-danger-hover-color: #841913; ---link-light-color: hsl(210, 17%, 98%); ---link-light-hover-color: #fafbfc; ---link-dark-color: hsl(210, 10%, 23%); ---link-dark-hover-color: #2a2f34; - -/* ===== COMPONENT-SPECIFIC COLORS ===== */ ---mod-finder-link-hover: #e6e6e6; ---form-legend-color: #495057; ---border-gray: #b2bfcd; ---subhead-color: #495057; ---box-shadow-gray: #ddd; ---btn-active-text-gray: #A0A0A0; ---indicator-success-bg: var(--success); ---item-list-color: #F5F5F5; ---notification-badge-bg: var(--danger); ---content-bg-gray: #DDD; ---taba-btn-green: #7ac143; ---taba-btn-blue: #5091cd; ---taba-btn-red: #f44321; ---taba-btn-gray: #AAA; ---taba-msg-bg: #f5f5f5; ---toc-link-color: #767676; ---toc-link-active-color: #563d7c; ---choices-disabled-bg: #eaeaea; ---choices-input-bg: var(--white); ---choices-border-light: #ddd; ---choices-arrow-color: #333; ---choices-inner-bg: #f9f9f9; ---choices-focused-border: #b7b7b7; ---choices-dropdown-bg: var(--white); ---choices-item-bg: #00bcd4; ---choices-item-border: #00a5bb; ---choices-item-hover-bg: #00a5bb; ---choices-item-hover-border: #008fa1; ---choices-item-disabled-bg: #aaaaaa; ---choices-item-disabled-border: #919191; ---choices-item-highlighted: #f2f2f2; ---choices-input-inner-bg: #f9f9f9; - -/* ===== STANDARD COLORS ===== */ ---blue: #010156; ---indigo: #6812f3; ---purple: #6f42c2; ---pink: #e93f8e; ---red: #a51f18; ---orange: #fd7e17; ---yellow: #ad6200; ---green: #448344; ---teal: #5abfdd; ---cyan: #30638d; ---black: #000; ---white: #fff; - -/* ===== GRAY SCALE ===== */ ---gray-100: #f9fafb; ---gray-200: #eaedf0; ---gray-300: #dfe3e7; ---gray-400: #ced4da; ---gray-500: #adb5bd; ---gray-600: #6d757e; ---gray-700: #484f56; ---gray-800: #353b41; ---gray-900: #22262a; ---white-rgb: 255, 255, 255; ---black-rgb: 0, 0, 0; - -/* ===== OPACITY UTILITIES ===== */ ---opacity-0: 0; ---opacity-5: 0.05; ---opacity-10: 0.1; ---opacity-15: 0.15; ---opacity-20: 0.2; ---opacity-25: 0.25; ---opacity-30: 0.3; ---opacity-50: 0.5; ---opacity-75: 0.75; ---opacity-100: 1; - -/* ===== COMMON SHADOW COLORS ===== */ ---shadow-color-light: rgba(var(--black-rgb), var(--opacity-15)); ---shadow-color-medium: rgba(var(--black-rgb), var(--opacity-25)); ---shadow-color-dark: rgba(var(--black-rgb), var(--opacity-30)); ---border-color-translucent: rgba(var(--black-rgb), var(--opacity-10)); ---highlight-translucent: rgba(var(--white-rgb), var(--opacity-15)); - -/* ===== HEADER BACKGROUND ===== */ ---header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); ---header-background-attachment: fixed; ---header-background-repeat: repeat; ---header-background-size: auto; - -/* ===== CONTAINER BACKGROUNDS ===== */ -/* Below Topbar Container */ ---container-below-topbar-bg-image: none; ---container-below-topbar-bg-color: transparent; ---container-below-topbar-bg-position: auto; ---container-below-topbar-bg-attachment: fixed; ---container-below-topbar-bg-repeat: repeat; ---container-below-topbar-bg-size: auto; ---container-below-topbar-border: none; ---container-below-topbar-border-radius: 0; - -/* Top A Container */ ---container-top-a-bg-image: none; ---container-top-a-bg-color: transparent; ---container-top-a-bg-position: auto; ---container-top-a-bg-attachment: fixed; ---container-top-a-bg-repeat: repeat; ---container-top-a-bg-size: auto; ---container-top-a-border: none; ---container-top-a-border-radius: 0; - -/* Top B Container */ ---container-top-b-bg-image: none; ---container-top-b-bg-color: transparent; ---container-top-b-bg-position: auto; ---container-top-b-bg-attachment: fixed; ---container-top-b-bg-repeat: repeat; ---container-top-b-bg-size: auto; ---container-top-b-border: none; ---container-top-b-border-radius: 0; - -/* TOC Container */ ---container-toc-bg: var(--mainmenu-nav-link-color); ---container-toc-color: var(--color-primary); - -/* Sidebar Container */ ---container-sidebar-bg-image: none; ---container-sidebar-bg-color: transparent; ---container-sidebar-bg-position: auto; ---container-sidebar-bg-attachment: scroll; ---container-sidebar-bg-repeat: repeat; ---container-sidebar-bg-size: auto; ---container-sidebar-border: none; ---container-sidebar-border-radius: 0; - -/* Bottom A Container */ ---container-bottom-a-bg-image: none; ---container-bottom-a-bg-color: transparent; ---container-bottom-a-bg-position: auto; ---container-bottom-a-bg-attachment: fixed; ---container-bottom-a-bg-repeat: repeat; ---container-bottom-a-bg-size: auto; ---container-bottom-a-border: none; ---container-bottom-a-border-radius: 0; - -/* Bottom B Container */ ---container-bottom-b-bg-image: none; ---container-bottom-b-bg-color: transparent; ---container-bottom-b-bg-position: auto; ---container-bottom-b-bg-attachment: fixed; ---container-bottom-b-bg-repeat: repeat; ---container-bottom-b-bg-size: auto; ---container-bottom-b-border: none; ---container-bottom-b-border-radius: 0; - -/* ===== BORDERS ===== */ ---border-width: 1px; ---border-style: solid; ---border-color: #dfe3e7; ---border-color-translucent: #0000002d; ---border-radius: .25rem; ---border-radius-sm: .2rem; ---border-radius-lg: .3rem; ---border-radius-xl: .3rem; ---border-radius-xxl: 2rem; ---border-radius-2xl: var(--border-radius-xxl)*2; ---border-radius-pill: 50rem; - -/* ===== SHADOWS ===== */ ---box-shadow: 0 .5rem 1rem #00000026; ---box-shadow-sm: 0 .125rem .25rem #00000013; ---box-shadow-lg: 0 1rem 3rem #0000002d; ---box-shadow-inset: inset 0 1px 2px #00000013; - -/* ===== FOCUS & FORMS ===== */ ---focus-ring-width: .25rem; ---focus-ring-opacity: .25; ---focus-ring-color: #01015640; ---input-color: hsl(210, 11%, 15%); ---input-bg: hsl(210, 20%, 98%); ---input-border-color: hsl(210, 14%, 83%); ---input-focus-border-color: #8894aa; ---input-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); ---input-placeholder-color: hsl(210, 7%, 46%); ---input-disabled-bg: hsl(210, 16%, 93%); ---input-disabled-border-color: hsl(210, 14%, 83%); ---input-file-button-active-bg: #dee1e4; ---form-range-thumb-active-bg: #b8bfcc; ---form-valid-color: #448344; ---form-valid-border-color: #448344; ---form-invalid-color: #a51f18; ---form-invalid-border-color: #a51f18; - -/* ===== BUTTONS ===== */ ---btn-border-radius: var(--border-radius); ---btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); - -/* ===== CARDS ===== */ ---card-spacer-y: 1rem; ---card-spacer-x: 1rem; ---card-title-spacer-y: 0.5rem; ---card-border-width: 1px; ---card-border-color: var(--border-color); ---card-border-radius: var(--border-radius); ---card-box-shadow: none; ---card-inner-border-radius: calc(var(--border-radius) - 1px); ---card-cap-padding-y: 0.5rem; ---card-cap-padding-x: 1rem; ---card-cap-bg: rgba(0, 0, 0, 0.03); ---card-cap-color: var(--body-color); ---card-height: auto; ---card-color: var(--body-color); ---card-bg: var(--body-bg); ---card-img-overlay-padding: 1rem; ---card-group-margin: 0.75rem; - -/* ===== VIRTUEMART (VM) ===== */ -/* VM Surfaces */ ---vm-surface: #ffffff; ---vm-surface-2: #f8f9fa; ---vm-text: var(--body-color); ---vm-text-strong: #000000; ---vm-text-muted: #6c757d; ---vm-border: var(--border-color); ---vm-price-color: var(--success); - -/* VM Layout and Density */ ---vm-container-max-width: 1200px; ---vm-section-gap: 2rem; ---vm-block-radius: var(--border-radius); ---vm-block-shadow: var(--box-shadow-sm); - -/* VM Typography */ ---vm-category-title-size: 2rem; ---vm-subcategory-title-size: 1.5rem; ---vm-page-title-size: 1.75rem; ---vm-products-type-title-size: 1.25rem; ---vm-product-title-size: 1.125rem; ---vm-product-title-weight: 500; ---vm-products-type-title-weight: 600; ---vm-price-size: 1.5rem; ---vm-price-detail-size: 1.125rem; ---vm-price-desc-size: 0.875rem; - -/* VM Controls */ ---vm-input-radius: var(--border-radius); ---vm-input-shadow: var(--box-shadow-sm); ---vm-qty-width: 80px; ---vm-cart-dropdown-min-width: 300px; - -/* VM Alerts */ ---vm-alert-radius: var(--border-radius); ---vm-alert-shadow: var(--box-shadow-sm); ---vm-availability-bg: var(--success-bg-subtle); ---vm-availability-text: var(--success); - -/* VM Buttons */ ---vm-btn-padding-x: 1rem; ---vm-btn-padding-y: 0.5rem; ---vm-btn-radius: var(--border-radius); ---vm-btn-shadow: var(--box-shadow-sm); ---vm-btn-primary-bg: var(--primary); ---vm-btn-primary-text: #ffffff; ---vm-btn-primary-border: var(--primary); ---vm-btn-secondary-bg: var(--secondary); ---vm-btn-secondary-text: #ffffff; ---vm-btn-secondary-border: var(--secondary); - -/* VM Image Overlay Controls */ ---vm-image-overlay-gap-x: 0.5rem; ---vm-image-overlay-gap-y: 0.5rem; ---vm-image-overlay-raise: 0.25rem; ---vm-image-overlay-btn-size: 2.5rem; ---vm-image-overlay-btn-radius: 50%; ---vm-image-overlay-btn-bg: rgba(255, 255, 255, 0.9); ---vm-image-overlay-btn-bg-hover: rgba(255, 255, 255, 1); ---vm-image-overlay-btn-border-color: rgba(0, 0, 0, 0.1); ---vm-image-overlay-btn-border-width: 1px; ---vm-image-overlay-btn-color: var(--body-color); ---vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - -/* VM Vendor Menu */ ---vm-vendor-menu-bg: var(--body-bg); ---vm-vendor-menu-border: var(--border-color); ---vm-vendor-menu-radius: var(--border-radius); ---vm-vendor-menu-shadow: var(--box-shadow-sm); ---vm-vendor-menu-item-gap: 0.25rem; ---vm-vendor-menu-item-padding-x: 1rem; ---vm-vendor-menu-item-padding-y: 0.5rem; ---vm-vendor-menu-pill-radius: 50rem; ---vm-vendor-menu-link: var(--link-color); ---vm-vendor-menu-link-hover: var(--link-hover-color); ---vm-vendor-menu-link-active: var(--primary); ---vm-vendor-menu-hover-bg: var(--secondary-bg); - -/* ===== GABLE ===== */ ---gab-blue: #0066cc; ---gab-green: #28a745; ---gab-red: #dc3545; ---gab-orange: #fd7e14; ---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-bg-position: center; ---hero-overlay-bg-size: cover; ---hero-overlay-padding: 1em; ---hero-overlay-text-align: center; ---hero-overlay-text-color: var(--body-color); - -/* ===== HERO VARIANTS ===== */ -/* Primary — sky blue, light overlay */ ---hero-primary-bg-color: var(--color-primary); ---hero-primary-overlay: linear-gradient(rgba(163, 205, 226, .45), rgba(163, 205, 226, .45)); ---hero-primary-color: var(--color-primary); - -/* Secondary — navy, stronger overlay */ ---hero-secondary-bg-color: var(--color-primary); ---hero-secondary-overlay: linear-gradient(rgba(17, 40, 85, .75), rgba(17, 40, 85, .75)); ---hero-secondary-color: #f1f5f9; - -/* ===== HERO CARD (inner .hero element) ===== */ -/* Default card — uses primary variant values */ ---hero-card-bg: var(--hero-primary-bg-color); ---hero-card-color: white; ---hero-card-overlay: var(--hero-primary-overlay); ---hero-card-border-radius: .5rem; ---hero-card-padding-x: 2rem; ---hero-card-padding-y: 3rem; ---hero-card-max-width: 800px; - -/* Alternative card — uses secondary variant values */ ---hero-alt-card-bg: var(--hero-secondary-bg-color); ---hero-alt-card-color: var(--hero-secondary-color); ---hero-alt-card-overlay: var(--hero-secondary-overlay); ---hero-alt-card-border-radius: .5rem; ---hero-alt-card-padding-x: 2rem; ---hero-alt-card-padding-y: 3rem; ---hero-alt-card-max-width: 600px; - -/* ===== BLOCK COLORS (top-a / top-b / bottom-a / bottom-b) ===== */ ---block-color-1: var(--color-primary); ---block-text-1: var(--body-color); - ---block-color-2: var(--accent-color-primary); ---block-text-2: #fff; - ---block-color-3: var(--warning, #eec234); ---block-text-3: var(--body-color); - ---block-color-4: var(--success-bg-subtle, #eef7f0); ---block-text-4: var(--body-color); - -/* ===== BLOCK COLOR OVERRIDES ===== */ ---block-highlight-bg: var(--accent-color-primary); ---block-highlight-text: #fff; - ---block-cta-bg: var(--color-primary); ---block-cta-text: #fff; - ---block-alert-bg: var(--danger, #a51f18); ---block-alert-text: #fff; - -/* ===== OFFCANVAS ===== */ ---offcanvas-zindex: 1045; ---offcanvas-width: 400px; ---offcanvas-height: 30vh; ---offcanvas-padding-x: 1rem; ---offcanvas-padding-y: 1rem; ---offcanvas-color: var(--body-color); ---offcanvas-bg: var(--body-bg); ---offcanvas-border-width: 1px; ---offcanvas-border-color: var(--border-color-translucent); ---offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); - -/* ===== ACCORDION ===== */ ---accordion-color: hsl(210, 11%, 15%); ---accordion-bg: var(--body-bg); ---accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease; ---accordion-border-color: var(--border-color); ---accordion-border-width: 1px; ---accordion-border-radius: 0.25rem; ---accordion-inner-border-radius: calc(0.25rem - 1px); ---accordion-btn-padding-x: 1.25rem; ---accordion-btn-padding-y: 1rem; ---accordion-btn-color: hsl(210, 11%, 15%); ---accordion-btn-bg: var(--accordion-bg); ---accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='hsl%28210, 11%25, 15%25%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-icon-width: 1.25rem; ---accordion-btn-icon-transform: rotate(-180deg); ---accordion-btn-icon-transition: transform 0.2s ease-in-out; ---accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f244d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-focus-border-color: var(--input-focus-border-color); ---accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); ---accordion-body-padding-x: 1.25rem; ---accordion-body-padding-y: 1rem; ---accordion-active-color: #0f244d; ---accordion-active-bg: #e7eaee; - -/* ===== BREADCRUMB ===== */ ---breadcrumb-padding-x: 0; ---breadcrumb-padding-y: 0; ---breadcrumb-margin-bottom: 1rem; ---breadcrumb-bg: ; ---breadcrumb-border-radius: ; ---breadcrumb-divider-color: hsl(210, 7%, 46%); ---breadcrumb-item-padding-x: 0.5rem; ---breadcrumb-item-active-color: var(--link-color); - -/* ===== PAGINATION ===== */ ---pagination-padding-x: 0.75rem; ---pagination-padding-y: 0.375rem; ---pagination-font-size: 1rem; ---pagination-color: var(--link-color); ---pagination-bg: var(--body-bg); ---pagination-border-width: 1px; ---pagination-border-color: hsl(210, 14%, 89%); ---pagination-border-radius: 0.25rem; ---pagination-focus-color: var(--link-active-color); ---pagination-focus-bg: hsl(210, 16%, 93%); ---pagination-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); ---pagination-active-color: var(--body-bg); ---pagination-active-bg: hsl(240, 98%, 17%); ---pagination-active-border-color: hsl(240, 98%, 17%); ---pagination-disabled-color: hsl(210, 7%, 46%); ---pagination-disabled-bg: var(--body-bg); ---pagination-disabled-border-color: hsl(210, 14%, 89%); - -/* ===== BADGE ===== */ ---badge-padding-x: 0.65em; ---badge-padding-y: 0.35em; ---badge-font-size: 0.75em; ---badge-font-weight: 700; ---badge-color: var(--body-bg); ---badge-border-radius: 0.25rem; - -/* ===== ALERT ===== */ ---alert-bg: transparent; ---alert-padding-x: 1rem; ---alert-padding-y: 1rem; ---alert-margin-bottom: 1rem; ---alert-color: inherit; ---alert-border-color: transparent; ---alert-border: 1px solid var(--alert-border-color); ---alert-border-radius: 0.25rem; - -/* ===== PROGRESS ===== */ ---progress-height: 1rem; ---progress-font-size: 0.75rem; ---progress-bg: hsl(210, 16%, 93%); ---progress-border-radius: 0.25rem; ---progress-box-shadow: inset 0 1px 2px rgba(var(--black-rgb), 0.075); ---progress-bar-color: var(--body-bg); ---progress-bar-bg: hsl(240, 98%, 17%); ---progress-bar-transition: width 0.6s ease; - -/* ===== LIST GROUP ===== */ ---list-group-color: hsl(210, 11%, 15%); ---list-group-bg: var(--body-bg); ---list-group-border-color: rgba(var(--black-rgb), 0.125); ---list-group-border-width: 1px; ---list-group-border-radius: 0.25rem; ---list-group-item-padding-x: 1rem; ---list-group-item-padding-y: 0.5rem; ---list-group-action-color: hsl(210, 9%, 31%); ---list-group-action-active-color: hsl(210, 11%, 15%); ---list-group-action-active-bg: hsl(210, 16%, 93%); ---list-group-disabled-color: hsl(210, 7%, 46%); ---list-group-disabled-bg: var(--body-bg); ---list-group-active-color: var(--body-bg); ---list-group-active-bg: hsl(240, 98%, 17%); ---list-group-active-border-color: hsl(240, 98%, 17%); - -/* ===== DROPDOWN ===== */ ---dropdown-zindex: 1000; ---dropdown-min-width: 10rem; ---dropdown-padding-x: 0; ---dropdown-padding-y: 0.5rem; ---dropdown-spacer: 0.125rem; ---dropdown-font-size: 1rem; ---dropdown-color: hsl(210, 11%, 15%); ---dropdown-bg: var(--body-bg); ---dropdown-border-color: var(--border-color-translucent); ---dropdown-border-radius: 0.25rem; ---dropdown-border-width: 1px; ---dropdown-inner-border-radius: calc(0.25rem - 1px); ---dropdown-divider-bg: var(--border-color-translucent); ---dropdown-divider-margin-y: 0.5rem; ---dropdown-box-shadow: 0 0.5rem 1rem var(--shadow-color-light); ---dropdown-link-color: hsl(210, 11%, 15%); ---dropdown-link-active-color: var(--body-bg); ---dropdown-link-active-bg: hsl(240, 98%, 17%); ---dropdown-link-disabled-color: hsl(210, 11%, 71%); ---dropdown-item-padding-x: 1rem; ---dropdown-item-padding-y: 0.25rem; ---dropdown-header-color: hsl(210, 7%, 46%); ---dropdown-header-padding-x: 1rem; ---dropdown-header-padding-y: 0.5rem; - -/* ===== TOAST ===== */ ---toast-zindex: 1090; ---toast-padding-x: 0.75rem; ---toast-padding-y: 0.5rem; ---toast-spacing: 1em; ---toast-max-width: 350px; ---toast-font-size: 0.875rem; ---toast-color: ; ---toast-bg: rgba(255, 255, 255, 0.85); ---toast-border-width: 1px; ---toast-border-color: var(--border-color-translucent); ---toast-border-radius: 0.25rem; ---toast-box-shadow: 0 0.5rem 1rem var(--shadow-color-light); ---toast-header-color: hsl(210, 7%, 46%); ---toast-header-bg: rgba(var(--white-rgb), 0.85); ---toast-header-border-color: rgba(var(--black-rgb), var(--opacity-5)); - -/* ===== MODAL ===== */ ---modal-zindex: 1050; ---modal-width: 500px; ---modal-padding: 1rem; ---modal-margin: 0.5rem; ---modal-color: ; ---modal-bg: var(--body-bg); ---modal-border-color: var(--border-color-translucent); ---modal-border-width: 1px; ---modal-border-radius: 0.3rem; ---modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); ---modal-inner-border-radius: calc(0.3rem - 1px); ---modal-header-padding-x: 1rem; ---modal-header-padding-y: 1rem; ---modal-header-padding: 1rem 1rem; ---modal-header-border-color: var(--border-color); ---modal-header-border-width: 1px; ---modal-title-line-height: 1.5; ---modal-footer-gap: 0.5rem; ---modal-footer-bg: ; ---modal-footer-border-color: var(--border-color); ---modal-footer-border-width: 1px; - -/* ===== TOOLTIP ===== */ ---tooltip-zindex: 1070; ---tooltip-max-width: 200px; ---tooltip-padding-x: 0.5rem; ---tooltip-padding-y: 0.25rem; ---tooltip-margin: ; ---tooltip-font-size: 0.875rem; ---tooltip-color: var(--body-bg); ---tooltip-bg: hsl(0, 0%, 0%); ---tooltip-border-radius: 0.25rem; ---tooltip-opacity: 0.9; ---tooltip-arrow-width: 0.8rem; ---tooltip-arrow-height: 0.4rem; - -/* ===== POPOVER ===== */ ---popover-zindex: 1060; ---popover-max-width: 276px; ---popover-font-size: 0.875rem; ---popover-bg: var(--body-bg); ---popover-border-width: 1px; ---popover-border-color: var(--border-color-translucent); ---popover-border-radius: 0.3rem; ---popover-inner-border-radius: calc(0.3rem - 1px); ---popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); ---popover-header-padding-x: 1rem; ---popover-header-padding-y: 0.5rem; ---popover-header-font-size: 1rem; ---popover-header-color: ; ---popover-header-bg: #f0f0f0; ---popover-body-padding-x: 1rem; ---popover-body-padding-y: 1rem; ---popover-body-color: hsl(210, 11%, 15%); ---popover-arrow-width: 1rem; ---popover-arrow-height: 0.5rem; ---popover-arrow-border: var(--popover-border-color); - -/* ===== SPINNER ===== */ ---spinner-width: 2rem; ---spinner-height: 2rem; ---spinner-vertical-align: -0.125em; ---spinner-border-width: 0.25em; ---spinner-animation-speed: 0.75s; - -/* ===== NAV TABS ===== */ ---nav-tabs-border-width: 1px; ---nav-tabs-border-color: hsl(210, 14%, 89%); ---nav-tabs-border-radius: 0.25rem; ---nav-tabs-link-active-color: hsl(210, 9%, 31%); ---nav-tabs-link-active-bg: var(--body-bg); ---nav-tabs-link-active-border-color: hsl(210, 14%, 89%) hsl(210, 14%, 89%) var(--body-bg); - -/* ===== NAV PILLS ===== */ ---nav-pills-border-radius: 0.25rem; ---nav-pills-link-active-color: var(--body-bg); ---nav-pills-link-active-bg: hsl(240, 98%, 17%); - -/* ===== TABLE ===== */ ---table-color: var(--body-color); ---table-bg: transparent; ---table-border-color: var(--border-color); ---table-accent-bg: transparent; ---table-striped-color: var(--body-color); ---table-striped-bg: rgba(var(--black-rgb), var(--opacity-5)); ---table-active-color: var(--body-color); ---table-active-bg: rgba(var(--black-rgb), 0.075); - -/* ===== FOOTER ===== */ ---footer-padding-top: 1rem; ---footer-padding-bottom: 80px; ---footer-grid-padding-y: 2.5rem; ---footer-grid-padding-x: 0.5em; - -/* ===== BACKDROP ===== */ ---backdrop-zindex: 1040; ---backdrop-bg: hsl(0, 0%, 0%); ---backdrop-opacity: 0.5; -} - -.btn { ---btn-padding-x: 1rem; ---btn-padding-y: 0.6rem; ---btn-font-family: inherit; ---btn-font-size: 1rem; ---btn-font-weight: 400; ---btn-line-height: 1.5; ---btn-color: hsl(210, 11%, 15%); ---btn-bg: var(--body-bg); ---btn-border-width: 1px; ---btn-border-color: transparent; ---btn-border-radius: 0.25rem; ---btn-active-border-color: transparent; ---btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); ---btn-disabled-opacity: 0.65; ---btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); -display: inline-block; -padding: var(--btn-padding-y) var(--btn-padding-x); -font-family: var(--btn-font-family); -font-size: var(--btn-font-size); -font-weight: var(--btn-font-weight); -line-height: var(--btn-line-height); -color: var(--btn-color); -text-align: center; -text-decoration: none; -vertical-align: middle; -cursor: pointer; --webkit-user-select: none; --moz-user-select: none; --ms-user-select: none; -user-select: none; -border: var(--btn-border-width) solid var(--btn-border-color); -border-radius: var(--btn-border-radius); -background-color: var(--btn-bg); --webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; -transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; --o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; -} - -.btn-primary { ---btn-color: hsl(0, 0%, 100%); ---btn-bg: hsl(240, 98%, 17%); ---btn-border-color: hsl(240, 98%, 17%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #010149; ---btn-hover-border-color: #010145; ---btn-focus-shadow-rgb: 39, 39, 111; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #010145; ---btn-active-border-color: #010141; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(240, 98%, 17%); ---btn-disabled-border-color: hsl(240, 98%, 17%); -} - -.btn-secondary { ---btn-color: var(--body-bg); ---btn-bg: var(--nav-bg-color); ---btn-border-color: hsl(210, 7%, 46%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #5d636b; ---btn-hover-border-color: #575e65; ---btn-focus-shadow-rgb: gray; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #575e65; ---btn-active-border-color: #52585f; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(210, 7%, 46%); ---btn-disabled-border-color: hsl(210, 7%, 46%); -} - -.btn-success { ---btn-color: hsl(0, 0%, 100%); ---btn-bg: hsl(120, 32%, 39%); ---btn-border-color: hsl(120, 32%, 39%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #3a6f3a; ---btn-hover-border-color: #366936; ---btn-focus-shadow-rgb: 96, 150, 96; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #366936; ---btn-active-border-color: #336233; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(120, 32%, 39%); ---btn-disabled-border-color: hsl(120, 32%, 39%); -} - -.btn-info { ---btn-color: hsl(0, 0%, 100%); ---btn-bg: hsl(207, 49%, 37%); ---btn-border-color: hsl(207, 49%, 37%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #295478; ---btn-hover-border-color: #264f71; ---btn-focus-shadow-rgb: 79, 122, 158; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #264f71; ---btn-active-border-color: #244a6a; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(207, 49%, 37%); ---btn-disabled-border-color: hsl(207, 49%, 37%); -} - -.btn-warning { ---btn-color: hsl(0, 0%, 100%); ---btn-bg: hsl(34, 100%, 34%); ---btn-border-color: hsl(34, 100%, 34%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #935300; ---btn-hover-border-color: #8a4e00; ---btn-focus-shadow-rgb: 185, 122, 38; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #8a4e00; ---btn-active-border-color: #824a00; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(34, 100%, 34%); ---btn-disabled-border-color: hsl(34, 100%, 34%); -} - -.btn-danger { ---btn-color: hsl(0, 0%, 100%); ---btn-bg: hsl(3, 75%, 37%); ---btn-border-color: hsl(3, 75%, 37%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #8c1a14; ---btn-hover-border-color: #841913; ---btn-focus-shadow-rgb: 179, 65, 59; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #841913; ---btn-active-border-color: #7c1712; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(3, 75%, 37%); ---btn-disabled-border-color: hsl(3, 75%, 37%); -} - -.btn-light { ---btn-color: hsl(0, 0%, 0%); ---btn-bg: hsl(210, 17%, 98%); ---btn-border-color: hsl(210, 17%, 98%); ---btn-hover-color: hsl(0, 0%, 0%); ---btn-hover-bg: #d4d5d5; ---btn-hover-border-color: #c7c8c9; ---btn-focus-shadow-rgb: 212, 213, 213; ---btn-active-color: hsl(0, 0%, 0%); ---btn-active-bg: #c7c8c9; ---btn-active-border-color: #bbbcbc; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 0%); ---btn-disabled-bg: hsl(210, 17%, 98%); ---btn-disabled-border-color: hsl(210, 17%, 98%); -} - -.btn-dark { ---btn-color: hsl(0, 0%, 100%); ---btn-bg: hsl(210, 10%, 23%); ---btn-border-color: hsl(210, 10%, 23%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #53585e; ---btn-hover-border-color: #494f54; ---btn-focus-shadow-rgb: 83, 88, 94; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #5d6267; ---btn-active-border-color: #494f54; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(210, 10%, 23%); ---btn-disabled-border-color: hsl(210, 10%, 23%); -} - -.btn-outline-primary { ---btn-color: hsl(240, 98%, 17%); ---btn-border-color: hsl(240, 98%, 17%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(240, 98%, 17%); ---btn-hover-border-color: hsl(240, 98%, 17%); ---btn-focus-shadow-rgb: 1, 1, 86; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(240, 98%, 17%); ---btn-active-border-color: hsl(240, 98%, 17%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(240, 98%, 17%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(240, 98%, 17%); ---gradient: none; -} - -.btn-outline-secondary { ---btn-color: hsl(210, 7%, 46%); ---btn-border-color: hsl(210, 7%, 46%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(210, 7%, 46%); ---btn-hover-border-color: hsl(210, 7%, 46%); ---btn-focus-shadow-rgb: 109, 117, 126; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(210, 7%, 46%); ---btn-active-border-color: hsl(210, 7%, 46%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(210, 7%, 46%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(210, 7%, 46%); ---gradient: none; -} - -.btn-outline-success { ---btn-color: hsl(120, 32%, 39%); ---btn-border-color: hsl(120, 32%, 39%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(120, 32%, 39%); ---btn-hover-border-color: hsl(120, 32%, 39%); ---btn-focus-shadow-rgb: 68, 131, 68; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(120, 32%, 39%); ---btn-active-border-color: hsl(120, 32%, 39%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(120, 32%, 39%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(120, 32%, 39%); ---gradient: none; -} - -.btn-outline-info { ---btn-color: hsl(207, 49%, 37%); ---btn-border-color: hsl(207, 49%, 37%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(207, 49%, 37%); ---btn-hover-border-color: hsl(207, 49%, 37%); ---btn-focus-shadow-rgb: 48, 99, 141; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(207, 49%, 37%); ---btn-active-border-color: hsl(207, 49%, 37%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(207, 49%, 37%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(207, 49%, 37%); ---gradient: none; -} - -.btn-outline-warning { ---btn-color: hsl(34, 100%, 34%); ---btn-border-color: hsl(34, 100%, 34%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(34, 100%, 34%); ---btn-hover-border-color: hsl(34, 100%, 34%); ---btn-focus-shadow-rgb: 173, 98, 0; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(34, 100%, 34%); ---btn-active-border-color: hsl(34, 100%, 34%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(34, 100%, 34%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(34, 100%, 34%); ---gradient: none; -} - -.btn-outline-danger { ---btn-color: hsl(3, 75%, 37%); ---btn-border-color: hsl(3, 75%, 37%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(3, 75%, 37%); ---btn-hover-border-color: hsl(3, 75%, 37%); ---btn-focus-shadow-rgb: 165, 31, 24; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(3, 75%, 37%); ---btn-active-border-color: hsl(3, 75%, 37%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(3, 75%, 37%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(3, 75%, 37%); ---gradient: none; -} - -.btn-outline-light { ---btn-color: hsl(210, 17%, 98%); ---btn-border-color: hsl(210, 17%, 98%); ---btn-hover-color: hsl(0, 0%, 0%); ---btn-hover-bg: hsl(210, 17%, 98%); ---btn-hover-border-color: hsl(210, 17%, 98%); ---btn-focus-shadow-rgb: 249, 250, 251; ---btn-active-color: hsl(0, 0%, 0%); ---btn-active-bg: hsl(210, 17%, 98%); ---btn-active-border-color: hsl(210, 17%, 98%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(210, 17%, 98%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(210, 17%, 98%); ---gradient: none; -} - -.btn-outline-dark { ---btn-color: hsl(210, 10%, 23%); ---btn-border-color: hsl(210, 10%, 23%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(210, 10%, 23%); ---btn-hover-border-color: hsl(210, 10%, 23%); ---btn-focus-shadow-rgb: 53, 59, 65; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(210, 10%, 23%); ---btn-active-border-color: hsl(210, 10%, 23%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(210, 10%, 23%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(210, 10%, 23%); ---gradient: none; -} - -.btn-link { ---btn-font-weight: 400; ---btn-color: var(--link-color); ---btn-bg: transparent; ---btn-border-color: transparent; ---btn-hover-color: var(--link-hover-color); ---btn-hover-border-color: transparent; ---btn-active-color: var(--link-hover-color); ---btn-active-border-color: transparent; ---btn-disabled-color: hsl(210, 7%, 46%); ---btn-disabled-border-color: transparent; ---btn-box-shadow: none; ---btn-focus-shadow-rgb: 39, 39, 111; -text-decoration: underline; -} diff --git a/src/media/css/theme/light.standard.css b/src/media/css/theme/light.standard.css index 07a74c2..ae01b7b 100644 --- a/src/media/css/theme/light.standard.css +++ b/src/media/css/theme/light.standard.css @@ -12,25 +12,144 @@ :root[data-bs-theme="light"] { color-scheme: light; + /* ===== BRAND & THEME COLORS ===== */ --color-primary: #112855; --accent-color-primary: #3f8ff0; ---accent-color-secondary: #3f8ff0; +--accent-color-secondary: #6fb3ff; + + +/* ===== TYPOGRAPHY & BODY ===== */ +--font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; +--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +--body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; +--body-font-size: 1rem; +--body-font-weight: 400; +--body-line-height: 1.5; +--body-color: #22262a; +--body-color-rgb: 34, 38, 42; +--body-bg: #fff; +--body-bg-rgb: 255, 255, 255; +--heading-color: inherit; +--emphasis-color: #000; +--emphasis-color-rgb: 0, 0, 0; +--secondary-color: #22262abf; +--secondary-color-rgb: 34, 38, 42; +--tertiary-color: #22262a80; +--tertiary-color-rgb: 34, 38, 42; +--muted-color: #6d757e; +--code-color: black; +--code-color-ink: var(--code-color, #e93f8e); +--code-bg-color: lightgreen; +--highlight-color: #22262a; +--highlight-bg: #fbeea8; + + +/* ===== STANDARD COLORS ===== */ +--blue: #010156; +--indigo: #6812f3; +--purple: #6f42c2; +--pink: #e93f8e; +--red: #a51f18; +--orange: #fd7e17; +--yellow: #ad6200; +--green: #448344; +--teal: #5abfdd; +--cyan: #30638d; +--black: #000; +--white: #fff; + + +/* ===== GRAY SCALE ===== */ +--gray-100: #f9fafb; +--gray-200: #eaedf0; +--gray-300: #dfe3e7; +--gray-400: #ced4da; +--gray-500: #adb5bd; +--gray-600: #6d757e; +--gray-700: #484f56; +--gray-800: #353b41; +--gray-900: #22262a; +--white-rgb: 255, 255, 255; +--black-rgb: 0, 0, 0; + + +/* ===== OPACITY UTILITIES ===== */ +--opacity-0: 0; +--opacity-5: 0.05; +--opacity-10: 0.1; +--opacity-15: 0.15; +--opacity-20: 0.2; +--opacity-25: 0.25; +--opacity-30: 0.3; +--opacity-50: 0.5; +--opacity-75: 0.75; +--opacity-100: 1; + + +/* ===== LAYOUT & SPACING ===== */ +--padding-x: 0.15rem; +--padding-y: 0.15rem; +--bg-opacity: 1; +--nav-toggle-size: 3rem; +--gradient: linear-gradient(180deg, #ffffff26, #fff0); +--secondary-bg: #eaedf0; +--secondary-bg-rgb: 234, 237, 240; +--tertiary-bg: #f9fafb; +--tertiary-bg-rgb: 249, 250, 251; +--hr-color: var(--border-color, #dfe3e7); +--border-color-soft: var(--border-color, #dfe3e7); +--kbd-bg: var(--secondary-bg, #eaedf0); +--kbd-ink: var(--body-bg, #fff); +--toc-bg: var(--secondary-bg, #eaedf0); +--toc-ink: var(--color-primary, #112855); +--selection-bg: var(--highlight-bg, #fbeea8); +--selection-ink: var(--body-color, #22262a); +--border: 5px; + + +/* ===== BREAKPOINTS ===== */ +--bp-xs: 0; +--bp-sm: 576px; +--bp-md: 768px; +--bp-lg: 992px; +--bp-xl: 1200px; + + +/* ===== BORDERS ===== */ +--border-width: 1px; +--border-style: solid; +--border-color: #dfe3e7; +--border-color-translucent: #0000002d; +--border-radius: .25rem; +--border-radius-sm: .2rem; +--border-radius-lg: .3rem; +--border-radius-xl: .3rem; +--border-radius-xxl: 2rem; +--border-radius-2xl: var(--border-radius-xxl)*2; +--border-radius-pill: 50rem; + + +/* ===== SHADOWS ===== */ +--box-shadow: 0 .5rem 1rem #00000026; +--box-shadow-sm: 0 .125rem .25rem #00000013; +--box-shadow-lg: 0 1rem 3rem #0000002d; +--box-shadow-inset: inset 0 1px 2px #00000013; + + +/* ===== COMMON SHADOW COLORS ===== */ +--shadow-color-light: rgba(var(--black-rgb), var(--opacity-15)); +--shadow-color-medium: rgba(var(--black-rgb), var(--opacity-25)); +--shadow-color-dark: rgba(var(--black-rgb), var(--opacity-30)); +--border-color-translucent: rgba(var(--black-rgb), var(--opacity-10)); +--highlight-translucent: rgba(var(--white-rgb), var(--opacity-15)); + /* ===== NAVIGATION ===== */ --mainmenu-nav-link-color: white; --nav-text-color: white; --nav-bg-color: var(--color-link); -/* ===== LINKS ===== */ ---color-link: #224FAA; ---color-hover: var(--accent-color-primary); ---link-color: #224faa; ---link-color-rgb: 34, 79, 170; ---link-decoration: underline; ---link-hover-color: #424077; ---link-hover-color-rgb: 66, 64, 119; ---link-active-color: var(--link-color); /* ===== NAVBAR ===== */ --navbar-padding-x: 1rem; @@ -58,135 +177,17 @@ color-scheme: light; --nav-link-active-color: var(--mainmenu-nav-link-color); --nav-link-disabled-color: #6c757d; -/* ===== TYPOGRAPHY & BODY ===== */ ---font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; ---font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; ---body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); ---body-font-size: 1rem; ---body-font-weight: 400; ---body-line-height: 1.5; ---body-color: #22262a; ---body-color-rgb: 34, 38, 42; ---body-bg: #fff; ---body-bg-rgb: 255, 255, 255; ---heading-color: inherit; ---emphasis-color: #000; ---emphasis-color-rgb: 0, 0, 0; ---secondary-color: #22262abf; ---secondary-color-rgb: 34, 38, 42; ---tertiary-color: #22262a80; ---tertiary-color-rgb: 34, 38, 42; ---muted-color: #6d757e; ---code-color: black; ---code-color-ink: var(--code-color, #e93f8e); ---code-bg-color: lightgreen; ---highlight-color: #22262a; ---highlight-bg: #fbeea8; -/* ===== LAYOUT & SPACING ===== */ ---padding-x: 0.15rem; ---padding-y: 0.15rem; ---bg-opacity: 1; ---nav-toggle-size: 3rem; ---gradient: linear-gradient(180deg, #ffffff26, #fff0); ---secondary-bg: #eaedf0; ---secondary-bg-rgb: 234, 237, 240; ---tertiary-bg: #f9fafb; ---tertiary-bg-rgb: 249, 250, 251; ---hr-color: var(--border-color, #dfe3e7); ---border-color-soft: var(--border-color, #dfe3e7); ---kbd-bg: var(--secondary-bg, #eaedf0); ---kbd-ink: var(--body-bg, #fff); ---toc-bg: var(--secondary-bg, #eaedf0); ---toc-ink: var(--color-primary, #112855); ---selection-bg: var(--highlight-bg, #fbeea8); ---selection-ink: var(--body-color, #22262a); ---border: 5px; +/* ===== LINKS ===== */ +--color-link: #224FAA; +--color-hover: var(--accent-color-primary); +--link-color: #224faa; +--link-color-rgb: 34, 79, 170; +--link-decoration: underline; +--link-hover-color: #424077; +--link-hover-color-rgb: 66, 64, 119; +--link-active-color: var(--link-color); -/* ===== BREAKPOINTS ===== */ ---bp-xs: 0; ---bp-sm: 576px; ---bp-md: 768px; ---bp-lg: 992px; ---bp-xl: 1200px; - -/* ===== BOOTSTRAP PALETTE ===== */ ---primary: #010156; ---secondary: #6d757e; ---success: #448344; ---info: #30638d; ---warning: #ad6200; ---danger: #a51f18; ---light: #f9fafb; ---dark: #353b41; ---primary-rgb: 1, 1, 86; ---secondary-rgb: 109, 117, 126; ---success-rgb: 68, 131, 68; ---info-rgb: 48, 99, 141; ---warning-rgb: 173, 98, 0; ---danger-rgb: 165, 31, 24; ---light-rgb: 249, 250, 251; ---dark-rgb: 53, 59, 65; ---primary-text-emphasis: #002; ---secondary-text-emphasis: #2c2f32; ---success-text-emphasis: #1b351b; ---info-text-emphasis: #132838; ---warning-text-emphasis: #452700; ---danger-text-emphasis: #420c09; ---light-text-emphasis: #484f56; ---dark-text-emphasis: #484f56; ---primary-bg-subtle: #ccd; ---secondary-bg-subtle: #e2e3e5; ---success-bg-subtle: #dae6da; ---info-bg-subtle: #d6e0e8; ---warning-bg-subtle: #efe0cc; ---danger-bg-subtle: #edd2d1; ---light-bg-subtle: #fcfcfd; ---dark-bg-subtle: #ced4da; ---primary-border-subtle: #99b; ---secondary-border-subtle: #c5c8cb; ---success-border-subtle: #b4ceb4; ---info-border-subtle: #acc1d1; ---warning-border-subtle: #dec099; ---danger-border-subtle: #dba5a2; ---light-border-subtle: #eaedf0; ---dark-border-subtle: #adb5bd; - -/* ===== ALERT LINK COLORS ===== */ ---alert-primary-link-color: #01012a; ---alert-secondary-link-color: #34383d; ---alert-success-link-color: #213f21; ---alert-info-link-color: #172f44; ---alert-warning-link-color: #532f00; ---alert-danger-link-color: #4f0f0b; ---alert-light-link-color: #505050; ---alert-dark-link-color: #1a1c1f; - -/* ===== LIST GROUP ITEM COLORS ===== */ ---list-group-item-primary-color: #010134; ---list-group-item-primary-bg: #ccccdd; ---list-group-item-primary-active-bg: #b8b8c7; ---list-group-item-secondary-color: #41464c; ---list-group-item-secondary-bg: #e2e3e5; ---list-group-item-secondary-active-bg: #cbccce; ---list-group-item-success-color: #294f29; ---list-group-item-success-bg: #dae6da; ---list-group-item-success-active-bg: #c4cfc4; ---list-group-item-info-color: #1d3b55; ---list-group-item-info-bg: #d6e0e8; ---list-group-item-info-active-bg: #c1cad1; ---list-group-item-warning-color: #683b00; ---list-group-item-warning-bg: #efe0cc; ---list-group-item-warning-active-bg: #d7cab8; ---list-group-item-danger-color: #63130e; ---list-group-item-danger-bg: #edd2d1; ---list-group-item-danger-active-bg: #d5bdbc; ---list-group-item-light-color: #646464; ---list-group-item-light-bg: #fefefe; ---list-group-item-light-active-bg: #e5e5e5; ---list-group-item-dark-color: #202327; ---list-group-item-dark-bg: #d7d8d9; ---list-group-item-dark-active-bg: #c2c2c3; /* ===== LINK UTILITY COLORS ===== */ --link-primary-color: hsl(240, 98%, 17%); @@ -206,85 +207,6 @@ color-scheme: light; --link-dark-color: hsl(210, 10%, 23%); --link-dark-hover-color: #2a2f34; -/* ===== COMPONENT-SPECIFIC COLORS ===== */ ---mod-finder-link-hover: #e6e6e6; ---form-legend-color: #495057; ---border-gray: #b2bfcd; ---subhead-color: #495057; ---box-shadow-gray: #ddd; ---btn-active-text-gray: #A0A0A0; ---indicator-success-bg: var(--success); ---item-list-color: #F5F5F5; ---notification-badge-bg: var(--danger); ---content-bg-gray: #DDD; ---taba-btn-green: #7ac143; ---taba-btn-blue: #5091cd; ---taba-btn-red: #f44321; ---taba-btn-gray: #AAA; ---taba-msg-bg: #f5f5f5; ---toc-link-color: #767676; ---toc-link-active-color: #563d7c; ---choices-disabled-bg: #eaeaea; ---choices-input-bg: var(--white); ---choices-border-light: #ddd; ---choices-arrow-color: #333; ---choices-inner-bg: #f9f9f9; ---choices-focused-border: #b7b7b7; ---choices-dropdown-bg: var(--white); ---choices-item-bg: #00bcd4; ---choices-item-border: #00a5bb; ---choices-item-hover-bg: #00a5bb; ---choices-item-hover-border: #008fa1; ---choices-item-disabled-bg: #aaaaaa; ---choices-item-disabled-border: #919191; ---choices-item-highlighted: #f2f2f2; ---choices-input-inner-bg: #f9f9f9; - -/* ===== STANDARD COLORS ===== */ ---blue: #010156; ---indigo: #6812f3; ---purple: #6f42c2; ---pink: #e93f8e; ---red: #a51f18; ---orange: #fd7e17; ---yellow: #ad6200; ---green: #448344; ---teal: #5abfdd; ---cyan: #30638d; ---black: #000; ---white: #fff; - -/* ===== GRAY SCALE ===== */ ---gray-100: #f9fafb; ---gray-200: #eaedf0; ---gray-300: #dfe3e7; ---gray-400: #ced4da; ---gray-500: #adb5bd; ---gray-600: #6d757e; ---gray-700: #484f56; ---gray-800: #353b41; ---gray-900: #22262a; ---white-rgb: 255, 255, 255; ---black-rgb: 0, 0, 0; - -/* ===== OPACITY UTILITIES ===== */ ---opacity-0: 0; ---opacity-5: 0.05; ---opacity-10: 0.1; ---opacity-15: 0.15; ---opacity-20: 0.2; ---opacity-25: 0.25; ---opacity-30: 0.3; ---opacity-50: 0.5; ---opacity-75: 0.75; ---opacity-100: 1; - -/* ===== COMMON SHADOW COLORS ===== */ ---shadow-color-light: rgba(var(--black-rgb), var(--opacity-15)); ---shadow-color-medium: rgba(var(--black-rgb), var(--opacity-25)); ---shadow-color-dark: rgba(var(--black-rgb), var(--opacity-30)); ---border-color-translucent: rgba(var(--black-rgb), var(--opacity-10)); ---highlight-translucent: rgba(var(--white-rgb), var(--opacity-15)); /* ===== HEADER BACKGROUND ===== */ --header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); @@ -292,6 +214,7 @@ color-scheme: light; --header-background-repeat: repeat; --header-background-size: auto; + /* ===== CONTAINER BACKGROUNDS ===== */ /* Below Topbar Container */ --container-below-topbar-bg-image: none; @@ -357,24 +280,6 @@ color-scheme: light; --container-bottom-b-border: none; --container-bottom-b-border-radius: 0; -/* ===== BORDERS ===== */ ---border-width: 1px; ---border-style: solid; ---border-color: #dfe3e7; ---border-color-translucent: #0000002d; ---border-radius: .25rem; ---border-radius-sm: .2rem; ---border-radius-lg: .3rem; ---border-radius-xl: .3rem; ---border-radius-xxl: 2rem; ---border-radius-2xl: var(--border-radius-xxl)*2; ---border-radius-pill: 50rem; - -/* ===== SHADOWS ===== */ ---box-shadow: 0 .5rem 1rem #00000026; ---box-shadow-sm: 0 .125rem .25rem #00000013; ---box-shadow-lg: 0 1rem 3rem #0000002d; ---box-shadow-inset: inset 0 1px 2px #00000013; /* ===== FOCUS & FORMS ===== */ --focus-ring-width: .25rem; @@ -395,10 +300,85 @@ color-scheme: light; --form-invalid-color: #a51f18; --form-invalid-border-color: #a51f18; + /* ===== BUTTONS ===== */ --btn-border-radius: var(--border-radius); --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); + +/* ===== ACCORDION ===== */ +--accordion-color: hsl(210, 11%, 15%); +--accordion-bg: var(--body-bg); +--accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease; +--accordion-border-color: var(--border-color); +--accordion-border-width: 1px; +--accordion-border-radius: 0.25rem; +--accordion-inner-border-radius: calc(0.25rem - 1px); +--accordion-btn-padding-x: 1.25rem; +--accordion-btn-padding-y: 1rem; +--accordion-btn-color: hsl(210, 11%, 15%); +--accordion-btn-bg: var(--accordion-bg); +--accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='hsl%28210, 11%25, 15%25%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); +--accordion-btn-icon-width: 1.25rem; +--accordion-btn-icon-transform: rotate(-180deg); +--accordion-btn-icon-transition: transform 0.2s ease-in-out; +--accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f244d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); +--accordion-btn-focus-border-color: var(--input-focus-border-color); +--accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); +--accordion-body-padding-x: 1.25rem; +--accordion-body-padding-y: 1rem; +--accordion-active-color: #0f244d; +--accordion-active-bg: #e7eaee; + + +/* ===== ALERT ===== */ +--alert-bg: transparent; +--alert-padding-x: 1rem; +--alert-padding-y: 1rem; +--alert-margin-bottom: 1rem; +--alert-color: #000; +--alert-border-color: transparent; +--alert-border: 1px solid var(--alert-border-color); +--alert-border-radius: 0.25rem; + + +/* ===== ALERT LINK COLORS ===== */ +--alert-primary-link-color: #01012a; +--alert-secondary-link-color: #34383d; +--alert-success-link-color: #213f21; +--alert-info-link-color: #172f44; +--alert-warning-link-color: #532f00; +--alert-danger-link-color: #4f0f0b; +--alert-light-link-color: #505050; +--alert-dark-link-color: #1a1c1f; + + +/* ===== BACKDROP ===== */ +--backdrop-zindex: 1040; +--backdrop-bg: hsl(0, 0%, 0%); +--backdrop-opacity: 0.5; + + +/* ===== BADGE ===== */ +--badge-padding-x: 0.65em; +--badge-padding-y: 0.35em; +--badge-font-size: 0.75em; +--badge-font-weight: 700; +--badge-color: var(--body-bg); +--badge-border-radius: 0.25rem; + + +/* ===== BREADCRUMB ===== */ +--breadcrumb-padding-x: 0; +--breadcrumb-padding-y: 0; +--breadcrumb-margin-bottom: 1rem; +--breadcrumb-bg: ; +--breadcrumb-border-radius: ; +--breadcrumb-divider-color: hsl(210, 7%, 46%); +--breadcrumb-item-padding-x: 0.5rem; +--breadcrumb-item-active-color: var(--link-color); + + /* ===== CARDS ===== */ --card-spacer-y: 1rem; --card-spacer-x: 1rem; @@ -418,6 +398,406 @@ color-scheme: light; --card-img-overlay-padding: 1rem; --card-group-margin: 0.75rem; + +/* ===== DROPDOWN ===== */ +--dropdown-zindex: 1000; +--dropdown-min-width: 10rem; +--dropdown-padding-x: 0; +--dropdown-padding-y: 0.5rem; +--dropdown-spacer: 0.125rem; +--dropdown-font-size: 1rem; +--dropdown-color: hsl(210, 11%, 15%); +--dropdown-bg: var(--body-bg); +--dropdown-border-color: var(--border-color-translucent); +--dropdown-border-radius: 0.25rem; +--dropdown-border-width: 1px; +--dropdown-inner-border-radius: calc(0.25rem - 1px); +--dropdown-divider-bg: var(--border-color-translucent); +--dropdown-divider-margin-y: 0.5rem; +--dropdown-box-shadow: 0 0.5rem 1rem var(--shadow-color-light); +--dropdown-link-color: hsl(210, 11%, 15%); +--dropdown-link-active-color: var(--body-bg); +--dropdown-link-active-bg: hsl(240, 98%, 17%); +--dropdown-link-disabled-color: hsl(210, 11%, 71%); +--dropdown-item-padding-x: 1rem; +--dropdown-item-padding-y: 0.25rem; +--dropdown-header-color: hsl(210, 7%, 46%); +--dropdown-header-padding-x: 1rem; +--dropdown-header-padding-y: 0.5rem; + + +/* ===== LIST GROUP ===== */ +--list-group-color: hsl(210, 11%, 15%); +--list-group-bg: var(--body-bg); +--list-group-border-color: rgba(var(--black-rgb), 0.125); +--list-group-border-width: 1px; +--list-group-border-radius: 0.25rem; +--list-group-item-padding-x: 1rem; +--list-group-item-padding-y: 0.5rem; +--list-group-action-color: hsl(210, 9%, 31%); +--list-group-action-active-color: hsl(210, 11%, 15%); +--list-group-action-active-bg: hsl(210, 16%, 93%); +--list-group-disabled-color: hsl(210, 7%, 46%); +--list-group-disabled-bg: var(--body-bg); +--list-group-active-color: var(--body-bg); +--list-group-active-bg: hsl(240, 98%, 17%); +--list-group-active-border-color: hsl(240, 98%, 17%); + + +/* ===== LIST GROUP ITEM COLORS ===== */ +--list-group-item-primary-color: #010134; +--list-group-item-primary-bg: #ccccdd; +--list-group-item-primary-active-bg: #b8b8c7; +--list-group-item-secondary-color: #41464c; +--list-group-item-secondary-bg: #e2e3e5; +--list-group-item-secondary-active-bg: #cbccce; +--list-group-item-success-color: #294f29; +--list-group-item-success-bg: #dae6da; +--list-group-item-success-active-bg: #c4cfc4; +--list-group-item-info-color: #1d3b55; +--list-group-item-info-bg: #d6e0e8; +--list-group-item-info-active-bg: #c1cad1; +--list-group-item-warning-color: #683b00; +--list-group-item-warning-bg: #efe0cc; +--list-group-item-warning-active-bg: #d7cab8; +--list-group-item-danger-color: #63130e; +--list-group-item-danger-bg: #edd2d1; +--list-group-item-danger-active-bg: #d5bdbc; +--list-group-item-light-color: #646464; +--list-group-item-light-bg: #fefefe; +--list-group-item-light-active-bg: #e5e5e5; +--list-group-item-dark-color: #202327; +--list-group-item-dark-bg: #d7d8d9; +--list-group-item-dark-active-bg: #c2c2c3; + + +/* ===== MODAL ===== */ +--modal-zindex: 1050; +--modal-width: 500px; +--modal-padding: 1rem; +--modal-margin: 0.5rem; +--modal-color: ; +--modal-bg: var(--body-bg); +--modal-border-color: var(--border-color-translucent); +--modal-border-width: 1px; +--modal-border-radius: 0.3rem; +--modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); +--modal-inner-border-radius: calc(0.3rem - 1px); +--modal-header-padding-x: 1rem; +--modal-header-padding-y: 1rem; +--modal-header-padding: 1rem 1rem; +--modal-header-border-color: var(--border-color); +--modal-header-border-width: 1px; +--modal-title-line-height: 1.5; +--modal-footer-gap: 0.5rem; +--modal-footer-bg: ; +--modal-footer-border-color: var(--border-color); +--modal-footer-border-width: 1px; + + +/* ===== NAV TABS ===== */ +--nav-tabs-border-width: 1px; +--nav-tabs-border-color: hsl(210, 14%, 89%); +--nav-tabs-border-radius: 0.25rem; +--nav-tabs-link-active-color: hsl(210, 9%, 31%); +--nav-tabs-link-active-bg: var(--body-bg); +--nav-tabs-link-active-border-color: hsl(210, 14%, 89%) hsl(210, 14%, 89%) var(--body-bg); + + +/* ===== NAV PILLS ===== */ +--nav-pills-border-radius: 0.25rem; +--nav-pills-link-active-color: var(--body-bg); +--nav-pills-link-active-bg: hsl(240, 98%, 17%); + + +/* ===== OFFCANVAS ===== */ +--offcanvas-zindex: 1045; +--offcanvas-width: 400px; +--offcanvas-height: 30vh; +--offcanvas-padding-x: 1rem; +--offcanvas-padding-y: 1rem; +--offcanvas-color: var(--body-color); +--offcanvas-bg: var(--body-bg); +--offcanvas-border-width: 1px; +--offcanvas-border-color: var(--border-color-translucent); +--offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); + + +/* ===== PAGINATION ===== */ +--pagination-padding-x: 0.75rem; +--pagination-padding-y: 0.375rem; +--pagination-font-size: 1rem; +--pagination-color: var(--link-color); +--pagination-bg: var(--body-bg); +--pagination-border-width: 1px; +--pagination-border-color: hsl(210, 14%, 89%); +--pagination-border-radius: 0.25rem; +--pagination-focus-color: var(--link-active-color); +--pagination-focus-bg: hsl(210, 16%, 93%); +--pagination-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); +--pagination-active-color: var(--body-bg); +--pagination-active-bg: hsl(240, 98%, 17%); +--pagination-active-border-color: hsl(240, 98%, 17%); +--pagination-disabled-color: hsl(210, 7%, 46%); +--pagination-disabled-bg: var(--body-bg); +--pagination-disabled-border-color: hsl(210, 14%, 89%); + + +/* ===== POPOVER ===== */ +--popover-zindex: 1060; +--popover-max-width: 276px; +--popover-font-size: 0.875rem; +--popover-bg: var(--body-bg); +--popover-border-width: 1px; +--popover-border-color: var(--border-color-translucent); +--popover-border-radius: 0.3rem; +--popover-inner-border-radius: calc(0.3rem - 1px); +--popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); +--popover-header-padding-x: 1rem; +--popover-header-padding-y: 0.5rem; +--popover-header-font-size: 1rem; +--popover-header-color: ; +--popover-header-bg: #f0f0f0; +--popover-body-padding-x: 1rem; +--popover-body-padding-y: 1rem; +--popover-body-color: hsl(210, 11%, 15%); +--popover-arrow-width: 1rem; +--popover-arrow-height: 0.5rem; +--popover-arrow-border: var(--popover-border-color); + + +/* ===== PROGRESS ===== */ +--progress-height: 1rem; +--progress-font-size: 0.75rem; +--progress-bg: hsl(210, 16%, 93%); +--progress-border-radius: 0.25rem; +--progress-box-shadow: inset 0 1px 2px rgba(var(--black-rgb), 0.075); +--progress-bar-color: var(--body-bg); +--progress-bar-bg: hsl(240, 98%, 17%); +--progress-bar-transition: width 0.6s ease; + + +/* ===== SPINNER ===== */ +--spinner-width: 2rem; +--spinner-height: 2rem; +--spinner-vertical-align: -0.125em; +--spinner-border-width: 0.25em; +--spinner-animation-speed: 0.75s; + + +/* ===== TABLE ===== */ +--table-color: var(--body-color); +--table-bg: transparent; +--table-border-color: var(--border-color); +--table-accent-bg: transparent; +--table-striped-color: var(--body-color); +--table-striped-bg: rgba(var(--black-rgb), var(--opacity-5)); +--table-active-color: var(--body-color); +--table-active-bg: rgba(var(--black-rgb), 0.075); + + +/* ===== TOAST ===== */ +--toast-zindex: 1090; +--toast-padding-x: 0.75rem; +--toast-padding-y: 0.5rem; +--toast-spacing: 1em; +--toast-max-width: 350px; +--toast-font-size: 0.875rem; +--toast-color: ; +--toast-bg: rgba(255, 255, 255, 0.85); +--toast-border-width: 1px; +--toast-border-color: var(--border-color-translucent); +--toast-border-radius: 0.25rem; +--toast-box-shadow: 0 0.5rem 1rem var(--shadow-color-light); +--toast-header-color: hsl(210, 7%, 46%); +--toast-header-bg: rgba(var(--white-rgb), 0.85); +--toast-header-border-color: rgba(var(--black-rgb), var(--opacity-5)); + + +/* ===== TOOLTIP ===== */ +--tooltip-zindex: 1070; +--tooltip-max-width: 200px; +--tooltip-padding-x: 0.5rem; +--tooltip-padding-y: 0.25rem; +--tooltip-margin: ; +--tooltip-font-size: 0.875rem; +--tooltip-color: var(--body-bg); +--tooltip-bg: hsl(0, 0%, 0%); +--tooltip-border-radius: 0.25rem; +--tooltip-opacity: 0.9; +--tooltip-arrow-width: 0.8rem; +--tooltip-arrow-height: 0.4rem; + + +/* ===== BOOTSTRAP PALETTE ===== */ +--primary: #010156; +--secondary: #6d757e; +--success: #448344; +--info: #30638d; +--warning: #ad6200; +--danger: #a51f18; +--light: #f9fafb; +--dark: #353b41; +--primary-rgb: 1, 1, 86; +--secondary-rgb: 109, 117, 126; +--success-rgb: 68, 131, 68; +--info-rgb: 48, 99, 141; +--warning-rgb: 173, 98, 0; +--danger-rgb: 165, 31, 24; +--light-rgb: 249, 250, 251; +--dark-rgb: 53, 59, 65; +--primary-text-emphasis: #002; +--secondary-text-emphasis: #2c2f32; +--success-text-emphasis: #1b351b; +--info-text-emphasis: #132838; +--warning-text-emphasis: #452700; +--danger-text-emphasis: #420c09; +--light-text-emphasis: #484f56; +--dark-text-emphasis: #484f56; +--primary-bg-subtle: #ccd; +--secondary-bg-subtle: #e2e3e5; +--success-bg-subtle: #dae6da; +--info-bg-subtle: #d6e0e8; +--warning-bg-subtle: #efe0cc; +--danger-bg-subtle: #edd2d1; +--light-bg-subtle: #fcfcfd; +--dark-bg-subtle: #ced4da; +--primary-border-subtle: #99b; +--secondary-border-subtle: #c5c8cb; +--success-border-subtle: #b4ceb4; +--info-border-subtle: #acc1d1; +--warning-border-subtle: #dec099; +--danger-border-subtle: #dba5a2; +--light-border-subtle: #eaedf0; +--dark-border-subtle: #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-bg-position: center; +--hero-overlay-bg-size: cover; +--hero-overlay-padding: 1em; +--hero-overlay-text-align: center; +--hero-overlay-text-color: var(--body-color); + + +/* ===== HERO VARIANTS ===== */ +/* Primary — sky blue, light overlay */ +--hero-primary-bg-color: var(--color-primary); +--hero-primary-overlay: linear-gradient(rgba(163, 205, 226, .45), rgba(163, 205, 226, .45)); +--hero-primary-color: var(--color-primary); + +/* Secondary — navy, stronger overlay */ +--hero-secondary-bg-color: var(--color-primary); +--hero-secondary-overlay: linear-gradient(rgba(17, 40, 85, .75), rgba(17, 40, 85, .75)); +--hero-secondary-color: #f1f5f9; + + +/* ===== HERO CARD (inner .hero element) ===== */ +/* Default card — uses primary variant values */ +--hero-card-bg: var(--hero-primary-bg-color); +--hero-card-color: white; +--hero-card-overlay: var(--hero-primary-overlay); +--hero-card-border-radius: .5rem; +--hero-card-padding-x: 2rem; +--hero-card-padding-y: 3rem; +--hero-card-max-width: 800px; + +/* Alternative card — uses secondary variant values */ +--hero-alt-card-bg: var(--hero-secondary-bg-color); +--hero-alt-card-color: var(--hero-secondary-color); +--hero-alt-card-overlay: var(--hero-secondary-overlay); +--hero-alt-card-border-radius: .5rem; +--hero-alt-card-padding-x: 2rem; +--hero-alt-card-padding-y: 3rem; +--hero-alt-card-max-width: 600px; + + +/* ===== BLOCK COLORS (top-a / top-b / bottom-a / bottom-b) ===== */ +--block-color-1: var(--color-primary); +--block-text-1: var(--body-color); + +--block-color-2: var(--accent-color-primary); +--block-text-2: #fff; + +--block-color-3: var(--warning, #eec234); +--block-text-3: var(--body-color); + +--block-color-4: var(--success-bg-subtle, #eef7f0); +--block-text-4: var(--body-color); + + +/* ===== BLOCK COLOR OVERRIDES ===== */ +--block-highlight-bg: var(--accent-color-primary); +--block-highlight-text: #fff; + +--block-cta-bg: var(--color-primary); +--block-cta-text: #fff; + +--block-alert-bg: var(--danger, #a51f18); +--block-alert-text: #fff; + + +/* ===== FOOTER ===== */ +--footer-padding-top: 1rem; +--footer-padding-bottom: 80px; +--footer-grid-padding-y: 2.5rem; +--footer-grid-padding-x: 0.5em; + + +/* ===== THEME FAB ===== */ +--theme-fab-bg: var(--color-primary, #112855); +--theme-fab-color: #fff; +--theme-fab-btn-bg: rgba(255,255,255,.15); +--theme-fab-border: rgba(255, 255, 255, 0.3); + + +/* ===== OFFLINE PAGE ===== */ +--offline-card-bg: rgba(0, 0, 0, 0.55); + + +/* ===== COMPONENT-SPECIFIC COLORS ===== */ +--mod-finder-link-hover: #e6e6e6; +--form-legend-color: #495057; +--border-gray: #b2bfcd; +--subhead-color: #495057; +--box-shadow-gray: #ddd; +--btn-active-text-gray: #A0A0A0; +--indicator-success-bg: var(--success); +--item-list-color: #F5F5F5; +--notification-badge-bg: var(--danger); +--content-bg-gray: #DDD; +--taba-btn-green: #7ac143; +--taba-btn-blue: #5091cd; +--taba-btn-red: #f44321; +--taba-btn-gray: #AAA; +--taba-msg-bg: #f5f5f5; +--toc-link-color: #767676; +--toc-link-active-color: #563d7c; +--choices-disabled-bg: #eaeaea; +--choices-input-bg: var(--white); +--choices-border-light: #ddd; +--choices-arrow-color: #333; +--choices-inner-bg: #f9f9f9; +--choices-focused-border: #b7b7b7; +--choices-dropdown-bg: var(--white); +--choices-item-bg: #00bcd4; +--choices-item-border: #00a5bb; +--choices-item-hover-bg: #00a5bb; +--choices-item-hover-border: #008fa1; +--choices-item-disabled-bg: #aaaaaa; +--choices-item-disabled-border: #919191; +--choices-item-highlighted: #f2f2f2; +--choices-input-inner-bg: #f9f9f9; + + /* ===== VIRTUEMART (VM) ===== */ /* VM Surfaces */ --vm-surface: #ffffff; @@ -497,6 +877,7 @@ color-scheme: light; --vm-vendor-menu-link-active: var(--primary); --vm-vendor-menu-hover-bg: var(--secondary-bg); + /* ===== GABLE ===== */ --gab-blue: #0066cc; --gab-green: #28a745; @@ -506,326 +887,6 @@ color-scheme: light; --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-bg-position: center; ---hero-overlay-bg-size: cover; ---hero-overlay-padding: 1em; ---hero-overlay-text-align: center; ---hero-overlay-text-color: var(--body-color); - -/* ===== HERO VARIANTS ===== */ -/* Primary — sky blue, light overlay */ ---hero-primary-bg-color: var(--color-primary); ---hero-primary-overlay: linear-gradient(rgba(163, 205, 226, .45), rgba(163, 205, 226, .45)); ---hero-primary-color: var(--color-primary); - -/* Secondary — navy, stronger overlay */ ---hero-secondary-bg-color: var(--color-primary); ---hero-secondary-overlay: linear-gradient(rgba(17, 40, 85, .75), rgba(17, 40, 85, .75)); ---hero-secondary-color: #f1f5f9; - -/* ===== HERO CARD (inner .hero element) ===== */ -/* Default card — uses primary variant values */ ---hero-card-bg: var(--hero-primary-bg-color); ---hero-card-color: white; ---hero-card-overlay: var(--hero-primary-overlay); ---hero-card-border-radius: .5rem; ---hero-card-padding-x: 2rem; ---hero-card-padding-y: 3rem; ---hero-card-max-width: 800px; - -/* Alternative card — uses secondary variant values */ ---hero-alt-card-bg: var(--hero-secondary-bg-color); ---hero-alt-card-color: var(--hero-secondary-color); ---hero-alt-card-overlay: var(--hero-secondary-overlay); ---hero-alt-card-border-radius: .5rem; ---hero-alt-card-padding-x: 2rem; ---hero-alt-card-padding-y: 3rem; ---hero-alt-card-max-width: 600px; - -/* ===== BLOCK COLORS (top-a / top-b / bottom-a / bottom-b) ===== */ ---block-color-1: var(--color-primary); ---block-text-1: var(--body-color); - ---block-color-2: var(--accent-color-primary); ---block-text-2: #fff; - ---block-color-3: var(--warning, #eec234); ---block-text-3: var(--body-color); - ---block-color-4: var(--success-bg-subtle, #eef7f0); ---block-text-4: var(--body-color); - -/* ===== BLOCK COLOR OVERRIDES ===== */ ---block-highlight-bg: var(--accent-color-primary); ---block-highlight-text: #fff; - ---block-cta-bg: var(--color-primary); ---block-cta-text: #fff; - ---block-alert-bg: var(--danger, #a51f18); ---block-alert-text: #fff; - -/* ===== OFFCANVAS ===== */ ---offcanvas-zindex: 1045; ---offcanvas-width: 400px; ---offcanvas-height: 30vh; ---offcanvas-padding-x: 1rem; ---offcanvas-padding-y: 1rem; ---offcanvas-color: var(--body-color); ---offcanvas-bg: var(--body-bg); ---offcanvas-border-width: 1px; ---offcanvas-border-color: var(--border-color-translucent); ---offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); - -/* ===== ACCORDION ===== */ ---accordion-color: hsl(210, 11%, 15%); ---accordion-bg: var(--body-bg); ---accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease; ---accordion-border-color: var(--border-color); ---accordion-border-width: 1px; ---accordion-border-radius: 0.25rem; ---accordion-inner-border-radius: calc(0.25rem - 1px); ---accordion-btn-padding-x: 1.25rem; ---accordion-btn-padding-y: 1rem; ---accordion-btn-color: hsl(210, 11%, 15%); ---accordion-btn-bg: var(--accordion-bg); ---accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='hsl%28210, 11%25, 15%25%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-icon-width: 1.25rem; ---accordion-btn-icon-transform: rotate(-180deg); ---accordion-btn-icon-transition: transform 0.2s ease-in-out; ---accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f244d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-focus-border-color: var(--input-focus-border-color); ---accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); ---accordion-body-padding-x: 1.25rem; ---accordion-body-padding-y: 1rem; ---accordion-active-color: #0f244d; ---accordion-active-bg: #e7eaee; - -/* ===== BREADCRUMB ===== */ ---breadcrumb-padding-x: 0; ---breadcrumb-padding-y: 0; ---breadcrumb-margin-bottom: 1rem; ---breadcrumb-bg: ; ---breadcrumb-border-radius: ; ---breadcrumb-divider-color: hsl(210, 7%, 46%); ---breadcrumb-item-padding-x: 0.5rem; ---breadcrumb-item-active-color: var(--link-color); - -/* ===== PAGINATION ===== */ ---pagination-padding-x: 0.75rem; ---pagination-padding-y: 0.375rem; ---pagination-font-size: 1rem; ---pagination-color: var(--link-color); ---pagination-bg: var(--body-bg); ---pagination-border-width: 1px; ---pagination-border-color: hsl(210, 14%, 89%); ---pagination-border-radius: 0.25rem; ---pagination-focus-color: var(--link-active-color); ---pagination-focus-bg: hsl(210, 16%, 93%); ---pagination-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); ---pagination-active-color: var(--body-bg); ---pagination-active-bg: hsl(240, 98%, 17%); ---pagination-active-border-color: hsl(240, 98%, 17%); ---pagination-disabled-color: hsl(210, 7%, 46%); ---pagination-disabled-bg: var(--body-bg); ---pagination-disabled-border-color: hsl(210, 14%, 89%); - -/* ===== BADGE ===== */ ---badge-padding-x: 0.65em; ---badge-padding-y: 0.35em; ---badge-font-size: 0.75em; ---badge-font-weight: 700; ---badge-color: var(--body-bg); ---badge-border-radius: 0.25rem; - -/* ===== ALERT ===== */ ---alert-bg: transparent; ---alert-padding-x: 1rem; ---alert-padding-y: 1rem; ---alert-margin-bottom: 1rem; ---alert-color: inherit; ---alert-border-color: transparent; ---alert-border: 1px solid var(--alert-border-color); ---alert-border-radius: 0.25rem; - -/* ===== PROGRESS ===== */ ---progress-height: 1rem; ---progress-font-size: 0.75rem; ---progress-bg: hsl(210, 16%, 93%); ---progress-border-radius: 0.25rem; ---progress-box-shadow: inset 0 1px 2px rgba(var(--black-rgb), 0.075); ---progress-bar-color: var(--body-bg); ---progress-bar-bg: hsl(240, 98%, 17%); ---progress-bar-transition: width 0.6s ease; - -/* ===== LIST GROUP ===== */ ---list-group-color: hsl(210, 11%, 15%); ---list-group-bg: var(--body-bg); ---list-group-border-color: rgba(var(--black-rgb), 0.125); ---list-group-border-width: 1px; ---list-group-border-radius: 0.25rem; ---list-group-item-padding-x: 1rem; ---list-group-item-padding-y: 0.5rem; ---list-group-action-color: hsl(210, 9%, 31%); ---list-group-action-active-color: hsl(210, 11%, 15%); ---list-group-action-active-bg: hsl(210, 16%, 93%); ---list-group-disabled-color: hsl(210, 7%, 46%); ---list-group-disabled-bg: var(--body-bg); ---list-group-active-color: var(--body-bg); ---list-group-active-bg: hsl(240, 98%, 17%); ---list-group-active-border-color: hsl(240, 98%, 17%); - -/* ===== DROPDOWN ===== */ ---dropdown-zindex: 1000; ---dropdown-min-width: 10rem; ---dropdown-padding-x: 0; ---dropdown-padding-y: 0.5rem; ---dropdown-spacer: 0.125rem; ---dropdown-font-size: 1rem; ---dropdown-color: hsl(210, 11%, 15%); ---dropdown-bg: var(--body-bg); ---dropdown-border-color: var(--border-color-translucent); ---dropdown-border-radius: 0.25rem; ---dropdown-border-width: 1px; ---dropdown-inner-border-radius: calc(0.25rem - 1px); ---dropdown-divider-bg: var(--border-color-translucent); ---dropdown-divider-margin-y: 0.5rem; ---dropdown-box-shadow: 0 0.5rem 1rem var(--shadow-color-light); ---dropdown-link-color: hsl(210, 11%, 15%); ---dropdown-link-active-color: var(--body-bg); ---dropdown-link-active-bg: hsl(240, 98%, 17%); ---dropdown-link-disabled-color: hsl(210, 11%, 71%); ---dropdown-item-padding-x: 1rem; ---dropdown-item-padding-y: 0.25rem; ---dropdown-header-color: hsl(210, 7%, 46%); ---dropdown-header-padding-x: 1rem; ---dropdown-header-padding-y: 0.5rem; - -/* ===== TOAST ===== */ ---toast-zindex: 1090; ---toast-padding-x: 0.75rem; ---toast-padding-y: 0.5rem; ---toast-spacing: 1em; ---toast-max-width: 350px; ---toast-font-size: 0.875rem; ---toast-color: ; ---toast-bg: rgba(255, 255, 255, 0.85); ---toast-border-width: 1px; ---toast-border-color: var(--border-color-translucent); ---toast-border-radius: 0.25rem; ---toast-box-shadow: 0 0.5rem 1rem var(--shadow-color-light); ---toast-header-color: hsl(210, 7%, 46%); ---toast-header-bg: rgba(var(--white-rgb), 0.85); ---toast-header-border-color: rgba(var(--black-rgb), var(--opacity-5)); - -/* ===== MODAL ===== */ ---modal-zindex: 1050; ---modal-width: 500px; ---modal-padding: 1rem; ---modal-margin: 0.5rem; ---modal-color: ; ---modal-bg: var(--body-bg); ---modal-border-color: var(--border-color-translucent); ---modal-border-width: 1px; ---modal-border-radius: 0.3rem; ---modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); ---modal-inner-border-radius: calc(0.3rem - 1px); ---modal-header-padding-x: 1rem; ---modal-header-padding-y: 1rem; ---modal-header-padding: 1rem 1rem; ---modal-header-border-color: var(--border-color); ---modal-header-border-width: 1px; ---modal-title-line-height: 1.5; ---modal-footer-gap: 0.5rem; ---modal-footer-bg: ; ---modal-footer-border-color: var(--border-color); ---modal-footer-border-width: 1px; - -/* ===== TOOLTIP ===== */ ---tooltip-zindex: 1070; ---tooltip-max-width: 200px; ---tooltip-padding-x: 0.5rem; ---tooltip-padding-y: 0.25rem; ---tooltip-margin: ; ---tooltip-font-size: 0.875rem; ---tooltip-color: var(--body-bg); ---tooltip-bg: hsl(0, 0%, 0%); ---tooltip-border-radius: 0.25rem; ---tooltip-opacity: 0.9; ---tooltip-arrow-width: 0.8rem; ---tooltip-arrow-height: 0.4rem; - -/* ===== POPOVER ===== */ ---popover-zindex: 1060; ---popover-max-width: 276px; ---popover-font-size: 0.875rem; ---popover-bg: var(--body-bg); ---popover-border-width: 1px; ---popover-border-color: var(--border-color-translucent); ---popover-border-radius: 0.3rem; ---popover-inner-border-radius: calc(0.3rem - 1px); ---popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); ---popover-header-padding-x: 1rem; ---popover-header-padding-y: 0.5rem; ---popover-header-font-size: 1rem; ---popover-header-color: ; ---popover-header-bg: #f0f0f0; ---popover-body-padding-x: 1rem; ---popover-body-padding-y: 1rem; ---popover-body-color: hsl(210, 11%, 15%); ---popover-arrow-width: 1rem; ---popover-arrow-height: 0.5rem; ---popover-arrow-border: var(--popover-border-color); - -/* ===== SPINNER ===== */ ---spinner-width: 2rem; ---spinner-height: 2rem; ---spinner-vertical-align: -0.125em; ---spinner-border-width: 0.25em; ---spinner-animation-speed: 0.75s; - -/* ===== NAV TABS ===== */ ---nav-tabs-border-width: 1px; ---nav-tabs-border-color: hsl(210, 14%, 89%); ---nav-tabs-border-radius: 0.25rem; ---nav-tabs-link-active-color: hsl(210, 9%, 31%); ---nav-tabs-link-active-bg: var(--body-bg); ---nav-tabs-link-active-border-color: hsl(210, 14%, 89%) hsl(210, 14%, 89%) var(--body-bg); - -/* ===== NAV PILLS ===== */ ---nav-pills-border-radius: 0.25rem; ---nav-pills-link-active-color: var(--body-bg); ---nav-pills-link-active-bg: hsl(240, 98%, 17%); - -/* ===== TABLE ===== */ ---table-color: var(--body-color); ---table-bg: transparent; ---table-border-color: var(--border-color); ---table-accent-bg: transparent; ---table-striped-color: var(--body-color); ---table-striped-bg: rgba(var(--black-rgb), var(--opacity-5)); ---table-active-color: var(--body-color); ---table-active-bg: rgba(var(--black-rgb), 0.075); - -/* ===== FOOTER ===== */ ---footer-padding-top: 1rem; ---footer-padding-bottom: 80px; ---footer-grid-padding-y: 2.5rem; ---footer-grid-padding-x: 0.5em; - -/* ===== BACKDROP ===== */ ---backdrop-zindex: 1040; ---backdrop-bg: hsl(0, 0%, 0%); ---backdrop-opacity: 0.5; } .btn { diff --git a/src/media/images/bg.svg b/src/media/images/bg.svg index 6e73f8c..f49e1d9 100644 --- a/src/media/images/bg.svg +++ b/src/media/images/bg.svg @@ -4,6 +4,7 @@ diff --git a/src/media/js/template.js b/src/media/js/template.js index f1fb442..7d65301 100644 --- a/src/media/js/template.js +++ b/src/media/js/template.js @@ -62,30 +62,33 @@ wrap.id = 'mokoThemeFab'; wrap.className = posClassFromBody(); - // Light label - var lblL = doc.createElement('span'); - lblL.className = 'label'; - lblL.textContent = 'Light'; - - // Switch + // Sun/Moon toggle button var switchWrap = doc.createElement('button'); switchWrap.id = 'mokoThemeSwitch'; switchWrap.type = 'button'; - switchWrap.setAttribute('role', 'switch'); + switchWrap.className = 'theme-icon-btn'; switchWrap.setAttribute('aria-label', 'Toggle dark mode'); - switchWrap.setAttribute('aria-checked', 'false'); - var track = doc.createElement('span'); - track.className = 'switch'; - var knob = doc.createElement('span'); - knob.className = 'knob'; - track.appendChild(knob); - switchWrap.appendChild(track); + var sunIcon = doc.createElement('i'); + sunIcon.className = 'fa-solid fa-sun'; + sunIcon.setAttribute('aria-hidden', 'true'); - // Dark label - var lblD = doc.createElement('span'); - lblD.className = 'label'; - lblD.textContent = 'Dark'; + var moonIcon = doc.createElement('i'); + moonIcon.className = 'fa-solid fa-moon'; + moonIcon.setAttribute('aria-hidden', 'true'); + + switchWrap.appendChild(sunIcon); + switchWrap.appendChild(moonIcon); + + function updateThemeIcon(theme) { + if (theme === 'dark') { + switchWrap.classList.add('is-dark'); + switchWrap.classList.remove('is-light'); + } else { + switchWrap.classList.add('is-light'); + switchWrap.classList.remove('is-dark'); + } + } // Auto toggle (on/off switch style) var autoWrap = doc.createElement('div'); @@ -127,7 +130,7 @@ var current = (root.getAttribute('data-bs-theme') || 'light').toLowerCase(); var next = current === 'dark' ? 'light' : 'dark'; applyTheme(next); - switchWrap.setAttribute('aria-checked', next === 'dark' ? 'true' : 'false'); + updateThemeIcon(next); // Turn off auto when manually switching auto.classList.remove('on'); auto.setAttribute('aria-checked', 'false'); @@ -145,7 +148,7 @@ clearStored(); var sys = systemTheme(); applyTheme(sys); - switchWrap.setAttribute('aria-checked', sys === 'dark' ? 'true' : 'false'); + updateThemeIcon(sys); } }); @@ -154,7 +157,7 @@ if (!getStored()) { var sys = systemTheme(); applyTheme(sys); - switchWrap.setAttribute('aria-checked', sys === 'dark' ? 'true' : 'false'); + updateThemeIcon(sys); } }; if (typeof mql.addEventListener === 'function') mql.addEventListener('change', onMql); @@ -162,12 +165,10 @@ // Initial state var initial = getStored() || systemTheme(); - switchWrap.setAttribute('aria-checked', initial === 'dark' ? 'true' : 'false'); + updateThemeIcon(initial); // Mount - wrap.appendChild(lblL); wrap.appendChild(switchWrap); - wrap.appendChild(lblD); wrap.appendChild(autoWrap); wrap.appendChild(divider); wrap.appendChild(a11ySlot); @@ -292,7 +293,17 @@ toggle.className = "a11y-toggle"; toggle.setAttribute("aria-label", "Accessibility options"); toggle.setAttribute("aria-expanded", "false"); - toggle.appendChild(faIcon("fa-solid fa-universal-access")); + var a11yIcon = faIcon("fa-solid fa-universal-access"); + // Unicode fallback if FA7 glyph doesn't render (e.g. FA6/FA7 conflict) + setTimeout(function () { + var cs = win.getComputedStyle(a11yIcon, "::before"); + if (!cs.content || cs.content === "none" || cs.content === '""' || cs.content === '"" / ""') { + a11yIcon.className = ""; + a11yIcon.textContent = "\u267F"; + a11yIcon.style.fontSize = "1.1rem"; + } + }, 500); + toggle.appendChild(a11yIcon); // Panel var panel = doc.createElement("div"); @@ -630,6 +641,154 @@ }); } + // ======================================================================== + // CSS VARIABLE CLICK-TO-COPY + // ======================================================================== + + /** + * Inject toast + variable-chip styles once. + */ + function injectVarCopyStyles() { + if (doc.getElementById("moko-var-copy-styles")) return; + var style = doc.createElement("style"); + style.id = "moko-var-copy-styles"; + style.textContent = + ".moko-var-chip{cursor:pointer;font-family:var(--font-monospace,monospace);font-size:.875em;" + + "background:var(--secondary-bg,#151b22);color:var(--link-color,#8ab4f8);" + + "border:1px solid var(--border-color,#2b323b);border-radius:.25rem;padding:.1em .4em;" + + "transition:background .15s,border-color .15s;white-space:nowrap;display:inline}" + + ".moko-var-chip:hover{background:var(--color-primary,#112855);color:#fff;border-color:var(--color-primary,#112855)}" + + ".moko-toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:10000;" + + "background:var(--color-primary,#112855);color:#fff;padding:.6rem 1.25rem;" + + "border-radius:.375rem;font-size:.875rem;box-shadow:0 4px 12px rgba(0,0,0,.25);" + + "opacity:0;transition:opacity .2s;pointer-events:none}" + + ".moko-toast--show{opacity:1}"; + doc.head.appendChild(style); + } + + /** + * Show a brief "Copied to clipboard" toast. + * @param {string} text - The variable name that was copied + */ + function showCopyToast(text) { + var existing = doc.querySelector(".moko-toast"); + if (existing) existing.remove(); + + var toast = doc.createElement("div"); + toast.className = "moko-toast"; + toast.textContent = "Copied to clipboard: " + text; + doc.body.appendChild(toast); + + // Trigger reflow then show + void toast.offsetWidth; + toast.classList.add("moko-toast--show"); + + setTimeout(function () { + toast.classList.remove("moko-toast--show"); + setTimeout(function () { toast.remove(); }, 200); + }, 2000); + } + + /** + * Copy text to clipboard and show toast. + * @param {string} text + */ + function copyVariable(text) { + if (navigator.clipboard && navigator.clipboard.writeText) { + navigator.clipboard.writeText(text).then(function () { + showCopyToast(text); + }); + } else { + // Fallback for older browsers using deprecated API + var ta = doc.createElement("textarea"); + ta.value = text; + ta.style.cssText = "position:fixed;left:-9999px"; + doc.body.appendChild(ta); + ta.select(); + try { doc.execCommand("copy"); } catch (e) { /* noop */ } + ta.remove(); + showCopyToast(text); + } + } + + /** + * Scan text nodes for CSS variable patterns (--variable-name) and wrap + * each match in a clickable chip that copies the variable to clipboard. + */ + function initVarCopy() { + injectVarCopyStyles(); + + // Pattern: --[a-zA-Z] followed by word/hyphen chars + var varPattern = /--[a-zA-Z][\w-]*/g; + + // Elements to skip (inputs, scripts, styles, already-processed, code editors) + var SKIP_TAGS = { SCRIPT: 1, STYLE: 1, TEXTAREA: 1, INPUT: 1, SELECT: 1, NOSCRIPT: 1 }; + + var walker = doc.createTreeWalker( + doc.body, + NodeFilter.SHOW_TEXT, + { + acceptNode: function (node) { + if (SKIP_TAGS[node.parentNode.tagName]) return NodeFilter.FILTER_REJECT; + if (node.parentNode.classList && node.parentNode.classList.contains("moko-var-chip")) return NodeFilter.FILTER_REJECT; + if (!varPattern.test(node.nodeValue)) return NodeFilter.FILTER_REJECT; + varPattern.lastIndex = 0; + return NodeFilter.FILTER_ACCEPT; + } + } + ); + + var textNodes = []; + while (walker.nextNode()) textNodes.push(walker.currentNode); + + textNodes.forEach(function (node) { + var text = node.nodeValue; + var frag = doc.createDocumentFragment(); + var lastIndex = 0; + var match; + + varPattern.lastIndex = 0; + while ((match = varPattern.exec(text)) !== null) { + // Text before the match + if (match.index > lastIndex) { + frag.appendChild(doc.createTextNode(text.slice(lastIndex, match.index))); + } + + // Clickable chip + var chip = doc.createElement("span"); + chip.className = "moko-var-chip"; + chip.textContent = match[0]; + chip.setAttribute("role", "button"); + chip.setAttribute("tabindex", "0"); + chip.setAttribute("title", "Click to copy " + match[0]); + chip.addEventListener("click", (function (varName) { + return function (e) { + e.preventDefault(); + copyVariable(varName); + }; + })(match[0])); + chip.addEventListener("keydown", (function (varName) { + return function (e) { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + copyVariable(varName); + } + }; + })(match[0])); + frag.appendChild(chip); + + lastIndex = match.index + match[0].length; + } + + // Remaining text after last match + if (lastIndex < text.length) { + frag.appendChild(doc.createTextNode(text.slice(lastIndex))); + } + + node.parentNode.replaceChild(frag, node); + }); + } + /** * Run all template JS initializations */ @@ -656,6 +815,7 @@ initBackTop(); initSearchToggle(); initSidebarAccordion(); + initVarCopy(); } if (doc.readyState === "loading") { diff --git a/src/offline.php b/src/offline.php index 004dabb..1772b69 100644 --- a/src/offline.php +++ b/src/offline.php @@ -1,5 +1,5 @@ +/* Copyright (C) 2026 Moko Consulting This file is part of a Moko Consulting project. @@ -26,59 +26,90 @@ use Joomla\CMS\Uri\Uri; $app = Factory::getApplication(); $doc = Factory::getDocument(); +$wa = $doc->getWebAssetManager(); $params = $this->params ?: $app->getTemplate(true)->params; $direction = $this->direction ?: 'ltr'; +// Register the template's asset manifest (not auto-loaded in offline context) +$manifestPath = JPATH_ROOT . '/media/templates/site/' . $this->template . '/joomla.asset.json'; +if (is_file($manifestPath)) { + $wa->getRegistry()->addRegistryFile($manifestPath); +} + +// Load language files (not auto-loaded in offline context) +$lang = Factory::getLanguage(); +$lang->load('tpl_' . $this->template, JPATH_ROOT . '/templates/' . $this->template); +$lang->load('tpl_' . $this->template, JPATH_ROOT); +$lang->load('com_users', JPATH_ROOT); +$lang->load('com_users', JPATH_ROOT . '/components/com_users'); +$lang->load('', JPATH_ROOT); + /* ----------------------- - Load ONLY template.css + theme palettes (with min toggle) + Load assets via WebAssetManager (matches index.php pattern) ------------------------ */ -$useMin = !((int) $params->get('development_mode', 0) === 1); -$assetSuffix = $useMin ? '.min' : ''; -$base = rtrim(Uri::root(true), '/') . '/templates/' . $this->template . '/css/'; -$jsBase = rtrim(Uri::root(true), '/') . '/templates/' . $this->template . '/js/'; +$params_developmentmode = (bool) $params->get('developmentmode', false) || (bool) $app->get('debug', false); +$suffix = $params_developmentmode ? '' : '.min'; -$doc->addStyleSheet($base . 'template' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-template']); +// Core template CSS + offline overlay CSS +$wa->useStyle('template.base' . $suffix); +$wa->useStyle('template.offline' . $suffix); -/* Load theme palettes */ -$doc->addStyleSheet($base . 'theme/light.standard' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-light-standard']); -$doc->addStyleSheet($base . 'theme/dark.standard' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-dark-standard']); +// Osaka font +$wa->useStyle('template.font.osaka'); -/* Load custom palettes only if selected in template configuration AND files exist */ +// Font Awesome 7 Free +$wa->useStyle('vendor.fa7free.all' . $suffix); + +// Theme palettes +$wa->useStyle('template.light.standard' . $suffix); +$wa->useStyle('template.dark.standard' . $suffix); + +// Custom palettes (if selected and files exist) $params_LightColorName = (string) $params->get('colorLightName', 'standard'); $params_DarkColorName = (string) $params->get('colorDarkName', 'standard'); if ($params_LightColorName === 'custom' && file_exists(JPATH_ROOT . '/media/templates/site/mokocassiopeia/css/theme/light.custom.css')) { - $doc->addStyleSheet($base . 'theme/light.custom' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-light-custom']); + $wa->useStyle('template.light.custom' . $suffix); } if ($params_DarkColorName === 'custom' && file_exists(JPATH_ROOT . '/media/templates/site/mokocassiopeia/css/theme/dark.custom.css')) { - $doc->addStyleSheet($base . 'theme/dark.custom' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-dark-custom']); + $wa->useStyle('template.dark.custom' . $suffix); } -/* Load user assets last (after all other styles and scripts) */ -$doc->addStyleSheet($base . 'user' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-user']); +// User overrides (loaded last) +$wa->useStyle('template.user'); -/* Bootstrap CSS/JS for accordion behavior; safe to keep. */ -HTMLHelper::_('bootstrap.loadCss', true, $doc); +// Accessibility high-contrast stylesheet +$wa->useStyle('template.a11y-high-contrast'); + +// Template JS (theme switcher, a11y toolbar, var-copy, etc.) +if ($params_developmentmode) { + $wa->useScript('template.js'); +} else { + $wa->useScript('template.js.min'); +} +$wa->useScript('user.js'); + +// Bootstrap CSS + JS (accordion, responsive grid, utilities) +try { + $wa->useStyle('bootstrap.css'); +} catch (\Exception $e) { + // Fallback: load via HTMLHelper + HTMLHelper::_('bootstrap.loadCss', true, $doc); +} HTMLHelper::_('bootstrap.framework'); -/* Load template.js for theme switcher and other functionality */ -$doc->addScript($jsBase . 'template' . $assetSuffix . '.js', ['version' => 'auto', 'defer' => true], ['id' => 'moko-template-js']); - -/* Load user.js last for custom user scripts */ -$doc->addScript($jsBase . 'user' . $assetSuffix . '.js', ['version' => 'auto', 'defer' => true], ['id' => 'moko-user-js']); - /* ----------------------- - Title + Meta (Include Site Name in Page Titles) + Title + Meta ------------------------ */ $sitename = (string) $app->get('sitename'); $baseTitle = Text::_('JGLOBAL_OFFLINE') ?: 'Offline'; -$snSetting = (int) $app->get('sitename_pagetitles', 0); // 0=no, 1=before, 2=after +$snSetting = (int) $app->get('sitename_pagetitles', 0); if ($snSetting === 1) { - $doc->setTitle(Text::sprintf('JPAGETITLE', $sitename, $baseTitle)); // Site Name BEFORE + $doc->setTitle(Text::sprintf('JPAGETITLE', $sitename, $baseTitle)); } elseif ($snSetting === 2) { - $doc->setTitle(Text::sprintf('JPAGETITLE', $baseTitle, $sitename)); // Site Name AFTER + $doc->setTitle(Text::sprintf('JPAGETITLE', $baseTitle, $sitename)); } else { $doc->setTitle($baseTitle); } @@ -87,11 +118,21 @@ $doc->setMetaData('robots', 'noindex, nofollow'); /* ----------------------- Offline content from Global Config ------------------------ */ -$displayOfflineMessage = (int) $app->get('display_offline_message', 1); // 0|1|2 +$displayOfflineMessage = (int) $app->get('display_offline_message', 1); $offlineMessage = trim((string) $app->get('offline_message', '')); /* ----------------------- - Brand: logo from params OR siteTitle (matches index.php) + Offline image from Joomla Global Config (System > Global Configuration > Site > Offline Image) + Used as the full-viewport background image. +------------------------ */ +$offlineImage = trim((string) $app->get('offline_image', '')); +$bgStyle = ''; +if ($offlineImage !== '') { + $bgStyle = 'background-image: url(\'' . htmlspecialchars(Uri::root(false) . $offlineImage, ENT_QUOTES, 'UTF-8') . '\');'; +} + +/* ----------------------- + Brand: logo from template params OR siteTitle ------------------------ */ $brandHtml = ''; $logoFile = (string) $params->get('logoFile'); @@ -106,9 +147,8 @@ if ($logoFile !== '') { 0 ); } else { - // If no logo file, show the title (defaults to "MokoCassiopeia" if not set) $siteTitle = $params->get('siteTitle', 'MokoCassiopeia'); - $brandHtml = '' + $brandHtml = '' . htmlspecialchars($siteTitle, ENT_COMPAT, 'UTF-8') . ''; } @@ -116,8 +156,34 @@ if ($logoFile !== '') { $brandTagline = (string) ($params->get('brand_tagline') ?: $params->get('siteDescription') ?: ''); $showTagline = (int) $params->get('show_brand_tagline', 0); +// Favicon +$params_favicon_source = (string) $params->get('favicon_source', ''); +$faviconHeadTags = ''; +if ($params_favicon_source) { + require_once JPATH_ROOT . '/templates/' . $this->template . '/helper/favicon.php'; + $faviconSourceAbs = JPATH_ROOT . '/' . ltrim($params_favicon_source, '/'); + $faviconOutputDir = JPATH_ROOT . '/images/favicons'; + $faviconUrlBase = Uri::root(true) . '/images/favicons'; + + if (MokoFaviconHelper::generate($faviconSourceAbs, $faviconOutputDir)) { + $faviconHeadTags = MokoFaviconHelper::getHeadTags($faviconUrlBase); + } +} + // Theme params -$params_theme_enabled = (int) $params->get('theme_enabled', 1); +$params_theme_enabled = (int) $params->get('theme_enabled', 1); +$params_theme_fab_enabled = (int) $params->get('theme_fab_enabled', 1); +$params_theme_fab_pos = 'br'; + +// Accessibility params +$params_a11y_toolbar = (int) $params->get('a11y_toolbar_enabled', 1); +$params_a11y_resize = (int) $params->get('a11y_text_resize', 1); +$params_a11y_invert = (int) $params->get('a11y_color_inversion', 1); +$params_a11y_contrast = (int) $params->get('a11y_high_contrast', 1); +$params_a11y_links = (int) $params->get('a11y_highlight_links', 1); +$params_a11y_font = (int) $params->get('a11y_readable_font', 1); +$params_a11y_animations = (int) $params->get('a11y_pause_animations', 1); +$params_a11y_pos = 'br'; // Analytics params $params_googletagmanager = $params->get('googletagmanager', false); @@ -131,7 +197,7 @@ if (!empty($params_googlesitekey)) { } /* ----------------------- - Login routes & Users + Login routes ------------------------ */ $action = Route::_('index.php', true); $return = base64_encode(Uri::base()); @@ -152,10 +218,12 @@ if (class_exists('\Joomla\Component\Users\Site\Helper\RouteHelper')) { + + + - - +style=""> - - - - - - - -
-
+ +
+
- - + + - - countModules('offline-header')) : ?> -
- + + +
+

+
+ +
+

-
-
+ + countModules('offline')) : ?> +
+ +
+ -
-
- + +
+
+

+ +

+
+
+
+
+ -
- -
-

-

-
- -
-

-

- -

-
- +
+ + +
- - countModules('offline')) : ?> -
- -
- +
+ + +
- -
-
-

- -

-
-
- -
- +
+ + +
-
- - -
+
+ + +
-
- - -
+
+ +
-
- - -
+ + + + +
-
- - -
- -
- -
- - - - - -
- -
+ + + +
-
+ + +
+
©
+
+
+
- + + countModules('offline-footer')) : ?> +
+ +
+ + diff --git a/src/script.php b/src/script.php index 5af080c..793548a 100644 --- a/src/script.php +++ b/src/script.php @@ -97,7 +97,7 @@ class Tpl_MokocassiopeiaInstallerScript */ public function update(InstallerAdapter $parent): bool { - $this->logMessage('MokoCassiopeia template updated.'); + $this->logMessage('MokoCassiopeia template updated to v03.10.00 (bridge release).'); // Run CSS variable sync to inject any new variables into user's custom palettes. $synced = $this->syncCustomVariables($parent); @@ -113,6 +113,15 @@ class Tpl_MokocassiopeiaInstallerScript ); } + // Bridge migration: MokoCassiopeia → MokoOnyx + $bridgeScript = __DIR__ . '/helper/bridge.php'; + if (is_file($bridgeScript)) { + require_once $bridgeScript; + if (class_exists('MokoBridgeMigration')) { + MokoBridgeMigration::run(); + } + } + return true; } diff --git a/src/sync_custom_vars.php b/src/sync_custom_vars.php index 00e99fa..a7d3de3 100644 --- a/src/sync_custom_vars.php +++ b/src/sync_custom_vars.php @@ -34,11 +34,11 @@ final class MokoCssVarSync */ private const PALETTES = [ [ - 'starter' => 'templates/light.custom.css', + 'starter' => 'media/css/theme/light.standard.css', 'user' => 'media/templates/site/%s/css/theme/light.custom.css', ], [ - 'starter' => 'templates/dark.custom.css', + 'starter' => 'media/css/theme/dark.standard.css', 'user' => 'media/templates/site/%s/css/theme/dark.custom.css', ], ]; @@ -97,28 +97,24 @@ final class MokoCssVarSync private static function syncFile(string $starterPath, string $userPath): array { $starterVars = self::extractVarsWithContext($starterPath); - $userVars = self::extractVarNames($userPath); + $userVarsMap = self::extractVarsWithContext($userPath); + $userNames = self::extractVarNames($userPath); + // Find missing variables $missing = []; foreach ($starterVars as $name => $declaration) { - if (!isset($userVars[$name])) { + if (!isset($userNames[$name])) { $missing[$name] = $declaration; } } - if (empty($missing)) { - return ['added' => [], 'skipped' => []]; - } + // Rebuild the entire :root block in starter file order. + // User's custom values are preserved; missing vars get starter defaults. + $reordered = self::rebuildInStarterOrder($starterPath, $userVarsMap, $missing); - // Group missing variables by their section comment header. - $sections = self::groupBySection($missing, $starterPath); - - // Build the injection block. - $injection = self::buildInjectionBlock($sections); - - // Insert before the closing } of the :root rule. + // Replace the :root block in the user file with the reordered version. $userCss = file_get_contents($userPath); - $userCss = self::injectBeforeRootClose($userCss, $injection); + $userCss = self::replaceRootBlock($userCss, $reordered); // Write back (atomic: write to .tmp then rename). $tmpPath = $userPath . '.tmp'; @@ -128,6 +124,104 @@ final class MokoCssVarSync return ['added' => array_keys($missing), 'skipped' => []]; } + /** + * Rebuild all variables in the order they appear in the starter file. + * User values are preserved; missing vars use starter defaults. + * + * @param string $starterPath Path to starter file. + * @param array $userVars User's variable name => declaration. + * @param array $missing Missing variable name => starter declaration. + * @return string Complete CSS content for inside :root { }. + */ + private static function rebuildInStarterOrder(string $starterPath, array $userVars, array $missing): string + { + $lines = file($starterPath, FILE_IGNORE_NEW_LINES); + $output = []; + $inRoot = false; + $depth = 0; + + foreach ($lines as $line) { + // Track when we enter :root (brace may be on same line) + if (!$inRoot && preg_match('/:root/', $line)) { + $inRoot = true; + // If { is on this same line, don't skip it — just continue processing + if (strpos($line, '{') === false) { + continue; + } + // Fall through to process the rest of this line + } + + if (!$inRoot) { + continue; + } + + // Track braces (skip lines that are ONLY a brace) + $trimmed = trim($line); + if ($trimmed === '{') { + continue; + } + if ($trimmed === '}') { + break; // End of :root + } + + // Section comment headers — always include + if (preg_match('/\/\*\s*=+\s*.+?\s*=+\s*\*\//', $line)) { + $output[] = $line; + continue; + } + + // Regular comments — include + if (preg_match('/^\s*\/\*/', $line) || preg_match('/^\s*\*/', $line)) { + $output[] = $line; + continue; + } + + // Blank lines — include + if (trim($line) === '') { + $output[] = ''; + continue; + } + + // Variable declaration + if (preg_match('/^\s*(--[\w-]+)\s*:/', $line, $m)) { + $name = trim($m[1]); + if (isset($userVars[$name])) { + // Use the user's custom value + $output[] = $userVars[$name]; + } elseif (isset($missing[$name])) { + // New variable — use starter default + $output[] = $missing[$name]; + } + continue; + } + + // Other lines (e.g. color-scheme) — include as-is + $output[] = $line; + } + + return implode("\n", $output); + } + + /** + * Replace the content inside :root { ... } with new content. + */ + private static function replaceRootBlock(string $css, string $newContent): string + { + $rootStart = preg_match('/:root[^{]*\{/', $css, $m, PREG_OFFSET_CAPTURE); + if (!$rootStart) { + return $css; + } + + $openBrace = $m[0][1] + strlen($m[0][0]); + $closeBrace = self::findRootClosingBrace($css); + + if ($closeBrace === false) { + return $css; + } + + return substr($css, 0, $openBrace) . "\n" . $newContent . "\n" . substr($css, $closeBrace); + } + /** * Extract CSS custom property declarations with their full text (name: value). * Only extracts from the first :root block. @@ -181,29 +275,25 @@ final class MokoCssVarSync { $lines = file($starterPath, FILE_IGNORE_NEW_LINES); $section = 'Uncategorised'; - $map = []; // variable name => section + + // Walk the starter file in order — this preserves the original + // variable ordering so injected variables match the standard theme layout. + $sections = []; foreach ($lines as $line) { // Detect section comment headers like /* ===== HERO VARIANTS ===== */ if (preg_match('/\/\*\s*=+\s*(.+?)\s*=+\s*\*\//', $line, $m)) { $section = trim($m[1]); } - // Detect variable declaration + // Detect variable declaration — only include if it's missing from user file if (preg_match('/^\s*(--[\w-]+)\s*:/', $line, $m)) { $name = trim($m[1]); if (isset($missing[$name])) { - $map[$name] = $section; + $sections[$section][] = $missing[$name]; } } } - // Group by section - $sections = []; - foreach ($missing as $name => $declaration) { - $sec = $map[$name] ?? 'Uncategorised'; - $sections[$sec][] = $declaration; - } - return $sections; } diff --git a/src/templateDetails.xml b/src/templateDetails.xml index f928b11..0854a12 100644 --- a/src/templateDetails.xml +++ b/src/templateDetails.xml @@ -39,13 +39,13 @@ MokoCassiopeia - 03.09.14 + 03.10.07 script.php - 2026-04-14 + 2026-04-15 Jonathan Miller || Moko Consulting hello@mokoconsulting.tech (C)GNU General Public License Version 3 - 2026 Moko Consulting - Version 03.09.14 License Joomla PHP

MokoCassiopeia Template Description

MokoCassiopeia continues Joomla's tradition of space-themed default templates— building on the legacy of Solarflare (Joomla 1.0), Milkyway (Joomla 1.5), and Protostar (Joomla 3.0).

This template is a customized fork of the Cassiopeia template introduced in Joomla 4, preserving its modern, accessible, and mobile-first foundation while introducing new stylistic enhancements and structural refinements specifically tailored for use by Moko Consulting.

Custom Colour Themes

Starter palette files are included with the template. To create a custom colour scheme, copy templates/mokocassiopeia/templates/light.custom.css to media/templates/site/mokocassiopeia/css/theme/light.custom.css, or templates/mokocassiopeia/templates/dark.custom.css to media/templates/site/mokocassiopeia/css/theme/dark.custom.css. Customise the CSS variables to match your brand, then activate your palette in System → Site Templates → MokoCassiopeia → Theme tab by selecting "Custom" for the Light or Dark Mode Palette. A full variable reference is available in the CSS Variables tab in template options.

Custom CSS & JavaScript

For site-specific styles and scripts that should survive template updates, create the following files:

  • media/templates/site/mokocassiopeia/css/user.css — loaded on every page for custom CSS overrides.
  • media/templates/site/mokocassiopeia/js/user.js — loaded on every page for custom JavaScript.

These files are gitignored and will not be overwritten by template updates.

Code Attribution

This template is based on the original Cassiopeia template developed by the Joomla! Project and released under the GNU General Public License.

Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards.

It includes integration with Bootstrap TOC, an open-source table of contents generator by A. Feld, licensed under the MIT License.

All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable.

]]> + Version 03.10.07 License Joomla PHP

MokoCassiopeia Template Description

MokoCassiopeia continues Joomla's tradition of space-themed default templates— building on the legacy of Solarflare (Joomla 1.0), Milkyway (Joomla 1.5), and Protostar (Joomla 3.0).

This template is a customized fork of the Cassiopeia template introduced in Joomla 4, preserving its modern, accessible, and mobile-first foundation while introducing new stylistic enhancements and structural refinements specifically tailored for use by Moko Consulting.

Custom Colour Themes

Starter palette files are included with the template. To create a custom colour scheme, copy templates/mokocassiopeia/templates/light.custom.css to media/templates/site/mokocassiopeia/css/theme/light.custom.css, or templates/mokocassiopeia/templates/dark.custom.css to media/templates/site/mokocassiopeia/css/theme/dark.custom.css. Customise the CSS variables to match your brand, then activate your palette in System → Site Templates → MokoCassiopeia → Theme tab by selecting "Custom" for the Light or Dark Mode Palette. A full variable reference is available in the CSS Variables tab in template options.

Custom CSS & JavaScript

For site-specific styles and scripts that should survive template updates, create the following files:

  • media/templates/site/mokocassiopeia/css/user.css — loaded on every page for custom CSS overrides.
  • media/templates/site/mokocassiopeia/js/user.js — loaded on every page for custom JavaScript.

These files are gitignored and will not be overwritten by template updates.

Code Attribution

This template is based on the original Cassiopeia template developed by the Joomla! Project and released under the GNU General Public License.

Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards.

It includes integration with Bootstrap TOC, an open-source table of contents generator by A. Feld, licensed under the MIT License.

All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable.

]]> 1 component.php @@ -295,7 +295,8 @@ - + @@ -312,7 +313,8 @@ - + @@ -365,6 +367,7 @@ + @@ -372,12 +375,6 @@ - - -
- - -
diff --git a/src/templates/dark.custom.css b/src/templates/dark.custom.css deleted file mode 100644 index 689bfda..0000000 --- a/src/templates/dark.custom.css +++ /dev/null @@ -1,1151 +0,0 @@ -@charset "UTF-8"; -/* ----------------------------------------------- - * CUSTOM DARK THEME - * Merged from dark.standard.css with custom overrides. - * --------------------------------------------- */ - -:root[data-bs-theme='dark']{ - -color-scheme: dark; - -/* ===== BRAND & THEME COLORS ===== */ ---color-primary: #112855; ---accent-color-primary: #df4830; ---accent-color-secondary: #a3cde2; - -/* ===== NAVIGATION ===== */ ---mainmenu-nav-link-color: #f8fbfc; ---nav-text-color: #b8c3cb; ---nav-bg-color: var(--color-primary); - -/* ===== LINKS ===== */ ---color-link: #b4def8; ---color-hover: var(--accent-color-primary); ---color-active: var(--mainmenu-nav-link-color); ---link-color: #8ab4f8; ---link-color-rgb: 138, 180, 248; ---link-decoration: underline; ---link-hover-color: var(--accent-color-primary); ---link-hover-color-rgb: 223, 72, 48; ---link-active-color: var(--link-color); - -/* ===== NAVBAR ===== */ ---navbar-padding-x: 1rem; ---navbar-padding-y: 0.5rem; ---navbar-color: var(--nav-text-color); ---navbar-active-color: var(--mainmenu-nav-link-color); ---navbar-disabled-color: #6c757d; ---navbar-brand-padding-y: 0.3125rem; ---navbar-brand-margin-end: 1rem; ---navbar-brand-font-size: 1.25rem; ---navbar-brand-color: var(--nav-text-color); ---navbar-brand-active-color: var(--mainmenu-nav-link-color); ---navbar-nav-link-padding-x: 0.5rem; ---navbar-toggler-padding-y: 0.25rem; ---navbar-toggler-padding-x: 0.75rem; ---navbar-toggler-font-size: 1.25rem; ---navbar-toggler-border-color: rgba(255, 255, 255, 0.1); ---navbar-toggler-border-radius: 0.25rem; ---navbar-toggler-focus-width: 0.25rem; ---navbar-toggler-transition: box-shadow 0.15s ease-in-out; ---nav-link-padding-x: 1rem; ---nav-link-padding-y: 0.5rem; ---nav-link-font-weight: 400; ---nav-link-color: var(--nav-text-color); ---nav-link-active-color: var(--mainmenu-nav-link-color); ---nav-link-disabled-color: #6c757d; - -/* ===== TYPOGRAPHY & BODY ===== */ ---font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; ---font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; ---body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; ---body-font-size: 1rem; ---body-font-weight: 400; ---body-line-height: 1.5; ---body-color: #e6ebf1; ---body-color-rgb: 230, 235, 241; ---body-bg: #0e1318; ---body-bg-rgb: 14, 19, 24; ---heading-color: #f1f5f9; ---emphasis-color: #fff; ---emphasis-color-rgb: 255, 255, 255; ---secondary-color: #e6ebf1bf; ---secondary-color-rgb: 230, 235, 241; ---tertiary-color: #e6ebf180; ---tertiary-color-rgb: 230, 235, 241; ---muted-color: #6d757e; ---code-color: #ff7abd; ---code-color-ink: var(--code-color, #e93f8e); ---code-bg-color: lightgreen; ---highlight-color: #111; ---highlight-bg: #ffe28a1a; - -/* ===== LAYOUT & SPACING ===== */ ---padding-x: 0.15rem; ---padding-y: 0.15rem; ---bg-opacity: 1; ---nav-toggle-size: 3rem; ---gradient: linear-gradient(180deg, #ffffff26, #fff0); ---secondary-bg: #151b22; ---secondary-bg-rgb: 21, 27, 34; ---tertiary-bg: #10151b; ---tertiary-bg-rgb: 16, 21, 27; ---hr-color: var(--border-color, #dfe3e7); ---border-color-soft: var(--border-color, #dfe3e7); ---kbd-bg: var(--secondary-bg, #eaedf0); ---kbd-ink: var(--body-bg, #fff); ---toc-bg: var(--secondary-bg, #eaedf0); ---toc-ink: var(--color-primary, #112855); ---selection-bg: var(--highlight-bg, #fbeea8); ---selection-ink: var(--body-color, #22262a); ---border: 5px; - -/* ===== BREAKPOINTS ===== */ ---bp-xs: 0; ---bp-sm: 576px; ---bp-md: 768px; ---bp-lg: 992px; ---bp-xl: 1200px; - -/* ===== BOOTSTRAP PALETTE ===== */ ---primary: #010156; ---secondary: #48525d; ---success: #4aa664; ---info: #4f7aa0; ---warning: #c77a00; ---danger: #c23a31; ---light: #1b2027; ---dark: #0f1318; ---primary-rgb: 1,1,86; ---secondary-rgb: 72,82,93; ---success-rgb: 74,166,100; ---info-rgb: 79,122,160; ---warning-rgb: 199,122,0; ---danger-rgb: 194,58,49; ---light-rgb: 27,32,39; ---dark-rgb: 15,19,24; ---primary-text-emphasis: #c7ccff; ---secondary-text-emphasis: #cfd6de; ---success-text-emphasis: #bde8c9; ---info-text-emphasis: #bcd6ee; ---warning-text-emphasis: #ffd9a6; ---danger-text-emphasis: #ffb7b2; ---light-text-emphasis: #d2d8df; ---dark-text-emphasis: #d2d8df; ---primary-bg-subtle: #0b1030; ---secondary-bg-subtle: #1e2430; ---success-bg-subtle: #0f2a1b; ---info-bg-subtle: #0d2232; ---warning-bg-subtle: #2a1e06; ---danger-bg-subtle: #2d1110; ---light-bg-subtle: #12161d; ---dark-bg-subtle: #1e2430; ---primary-border-subtle: #2b3a7a; ---secondary-border-subtle: #2b323b; ---success-border-subtle: #2b5b40; ---info-border-subtle: #254861; ---warning-border-subtle: #5a3c0e; ---danger-border-subtle: #5c2723; ---light-border-subtle: #222831; ---dark-border-subtle: #2b323b; - -/* ===== ALERT LINK COLORS ===== */ ---alert-primary-link-color: #b3c1ff; ---alert-secondary-link-color: #9fa6ad; ---alert-success-link-color: #a0e5b3; ---alert-info-link-color: #8eccf2; ---alert-warning-link-color: #ffe4a0; ---alert-danger-link-color: #ffa8a3; ---alert-light-link-color: #f0f4f8; ---alert-dark-link-color: #9fa6ad; - -/* ===== LIST GROUP ITEM COLORS ===== */ ---list-group-item-primary-color: #8ca3ff; ---list-group-item-primary-bg: #1a2550; ---list-group-item-primary-active-bg: #223066; ---list-group-item-secondary-color: #9fa6ad; ---list-group-item-secondary-bg: #2b323b; ---list-group-item-secondary-active-bg: #363d47; ---list-group-item-success-color: #a0e5b3; ---list-group-item-success-bg: #1e3d2d; ---list-group-item-success-active-bg: #275538; ---list-group-item-info-color: #8eccf2; ---list-group-item-info-bg: #1a3448; ---list-group-item-info-active-bg: #234459; ---list-group-item-warning-color: #ffe4a0; ---list-group-item-warning-bg: #4a3410; ---list-group-item-warning-active-bg: #5c4216; ---list-group-item-danger-color: #ffa8a3; ---list-group-item-danger-bg: #4a1e1c; ---list-group-item-danger-active-bg: #5c2823; ---list-group-item-light-color: #e9ecef; ---list-group-item-light-bg: #1e2430; ---list-group-item-light-active-bg: #282f3d; ---list-group-item-dark-color: #48525d; ---list-group-item-dark-bg: #0e1318; ---list-group-item-dark-active-bg: #161b22; - -/* ===== LINK UTILITY COLORS ===== */ ---link-primary-color: hsl(240, 98%, 50%); ---link-primary-hover-color: hsl(240, 98%, 45%); ---link-secondary-color: hsl(210, 15%, 70%); ---link-secondary-hover-color: hsl(210, 15%, 65%); ---link-success-color: hsl(120, 40%, 60%); ---link-success-hover-color: hsl(120, 40%, 55%); ---link-info-color: hsl(207, 60%, 65%); ---link-info-hover-color: hsl(207, 60%, 60%); ---link-warning-color: hsl(38, 100%, 65%); ---link-warning-hover-color: hsl(38, 100%, 60%); ---link-danger-color: hsl(3, 85%, 65%); ---link-danger-hover-color: hsl(3, 85%, 60%); ---link-light-color: hsl(210, 20%, 90%); ---link-light-hover-color: hsl(210, 20%, 85%); ---link-dark-color: hsl(210, 10%, 35%); ---link-dark-hover-color: hsl(210, 10%, 30%); - -/* ===== COMPONENT-SPECIFIC COLORS ===== */ ---mod-finder-link-hover: #5a6470; ---form-legend-color: #9fa6ad; ---border-gray: #3a4250; ---subhead-color: #9fa6ad; ---box-shadow-gray: #1a2027; ---btn-active-text-gray: #7a8490; ---indicator-success-bg: var(--success); ---item-list-color: #2a2f34; ---notification-badge-bg: var(--danger); ---content-bg-gray: #2b323b; ---taba-btn-green: #5a9c2f; ---taba-btn-blue: #3d75a8; ---taba-btn-red: #c43620; ---taba-btn-gray: #6a7080; ---taba-msg-bg: #1e2430; ---toc-link-color: #9fa6ad; ---toc-link-active-color: #91a4ff; ---choices-disabled-bg: #2b323b; ---choices-input-bg: var(--body-bg); ---choices-border-light: #48525d; ---choices-arrow-color: #9fa6ad; ---choices-inner-bg: #1a2027; ---choices-focused-border: #5472ff; ---choices-dropdown-bg: var(--body-bg); ---choices-item-bg: #1a5f75; ---choices-item-border: #1a748f; ---choices-item-hover-bg: #1a748f; ---choices-item-hover-border: #1a8aa8; ---choices-item-disabled-bg: #48525d; ---choices-item-disabled-border: #36404a; ---choices-item-highlighted: #2b323b; ---choices-input-inner-bg: #1a2027; - -/* ===== STANDARD COLORS ===== */ ---blue: #91a4ff; ---indigo: #b19cff; ---purple: #c0a5ff; ---pink: #ff8fc0; ---red: #ff7a73; ---orange: #ff9c4d; ---yellow: #ffd166; ---green: #78d694; ---teal: #76e3ff; ---cyan: #6fb7ff; ---black: #000; ---white: #fff; - -/* ===== GRAY SCALE ===== */ ---gray-100: #161a20; ---gray-200: #1b2027; ---gray-300: #222831; ---gray-400: #2b323b; ---gray-500: #36404a; ---gray-600: #48525d; ---gray-700: #5b6672; ---gray-800: #cfd6de; ---gray-900: #e6ebf1; ---white-rgb: 255, 255, 255; ---black-rgb: 0, 0, 0; - -/* ===== OPACITY UTILITIES ===== */ ---opacity-0: 0; ---opacity-5: 0.05; ---opacity-10: 0.1; ---opacity-15: 0.15; ---opacity-20: 0.2; ---opacity-25: 0.25; ---opacity-30: 0.3; ---opacity-50: 0.5; ---opacity-75: 0.75; ---opacity-100: 1; - -/* ===== COMMON SHADOW COLORS ===== */ ---shadow-color-light: rgba(var(--black-rgb), var(--opacity-30)); ---shadow-color-medium: rgba(var(--black-rgb), var(--opacity-50)); ---shadow-color-dark: rgba(var(--black-rgb), var(--opacity-75)); ---border-color-translucent: rgba(var(--white-rgb), var(--opacity-10)); ---highlight-translucent: rgba(var(--white-rgb), var(--opacity-5)); - -/* ===== HEADER BACKGROUND ===== */ ---header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); ---header-background-attachment: fixed; ---header-background-repeat: repeat; ---header-background-size: auto; - -/* ===== CONTAINER BACKGROUNDS ===== */ -/* Below Topbar Container */ ---container-below-topbar-bg-image: none; ---container-below-topbar-bg-color: transparent; ---container-below-topbar-bg-position: center; ---container-below-topbar-bg-attachment: fixed; ---container-below-topbar-bg-repeat: no-repeat; ---container-below-topbar-bg-size: cover; ---container-below-topbar-border: none; ---container-below-topbar-border-radius: 0; - -/* Top A Container */ ---container-top-a-bg-image: none; ---container-top-a-bg-color: transparent; ---container-top-a-bg-position: center; ---container-top-a-bg-attachment: fixed; ---container-top-a-bg-repeat: no-repeat; ---container-top-a-bg-size: cover; ---container-top-a-border: none; ---container-top-a-border-radius: 0; - -/* Top B Container */ ---container-top-b-bg-image: none; ---container-top-b-bg-color: transparent; ---container-top-b-bg-position: center; ---container-top-b-bg-attachment: fixed; ---container-top-b-bg-repeat: no-repeat; ---container-top-b-bg-size: cover; ---container-top-b-border: none; ---container-top-b-border-radius: 0; - -/* TOC Container */ ---container-toc-bg: var(--secondary-bg); ---container-toc-color: #dbe3ff; - -/* Sidebar Container */ ---container-sidebar-bg-image: none; ---container-sidebar-bg-color: transparent; ---container-sidebar-bg-position: center; ---container-sidebar-bg-attachment: scroll; ---container-sidebar-bg-repeat: repeat; ---container-sidebar-bg-size: auto; ---container-sidebar-border: none; ---container-sidebar-border-radius: 0; - -/* Bottom A Container */ ---container-bottom-a-bg-image: none; ---container-bottom-a-bg-color: transparent; ---container-bottom-a-bg-position: center; ---container-bottom-a-bg-attachment: fixed; ---container-bottom-a-bg-repeat: no-repeat; ---container-bottom-a-bg-size: cover; ---container-bottom-a-border: none; ---container-bottom-a-border-radius: 5px; - -/* Bottom B Container */ ---container-bottom-b-bg-image: none; ---container-bottom-b-bg-color: transparent; ---container-bottom-b-bg-position: center; ---container-bottom-b-bg-attachment: fixed; ---container-bottom-b-bg-repeat: no-repeat; ---container-bottom-b-bg-size: cover; ---container-bottom-b-border: none; ---container-bottom-b-border-radius: 0; - -/* ===== BORDERS ===== */ ---border-width: 1px; ---border-style: solid; ---border-color: #2b323b; ---border-color-translucent: #ffffff26; ---border-radius: .25rem; ---border-radius-sm: .2rem; ---border-radius-lg: .3rem; ---border-radius-xl: .3rem; ---border-radius-xxl: 2rem; ---border-radius-2xl: var(--border-radius-xxl); ---border-radius-pill: 50rem; - -/* ===== SHADOWS ===== */ ---box-shadow: 0 .5rem 1rem #00000066; ---box-shadow-sm: 0 .125rem .25rem #00000040; ---box-shadow-lg: 0 1rem 3rem #00000080; ---box-shadow-inset: inset 0 1px 2px #00000040; - -/* ===== FOCUS & FORMS ===== */ ---focus-ring-width: .25rem; ---focus-ring-opacity: .6; ---focus-ring-color: #5472ff66; ---input-color: #e6ebf1; ---input-bg: #1a2332; ---input-border-color: #3a4250; ---input-focus-border-color: #5472ff; ---input-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); ---input-placeholder-color: #8894aa; ---input-disabled-bg: #0f1318; ---input-disabled-border-color: #2b323b; ---input-file-button-active-bg: #2b3441; ---form-range-thumb-active-bg: #4a5766; ---form-valid-color: #78d694; ---form-valid-border-color: #78d694; ---form-invalid-color: #ff8e86; ---form-invalid-border-color: #ff8e86; - -/* ===== BUTTONS ===== */ ---btn-border-radius: var(--border-radius); ---btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3); - -/* ===== CARDS ===== */ ---card-spacer-y: 1rem; ---card-spacer-x: 1rem; ---card-title-spacer-y: 0.5rem; ---card-border-width: 1px; ---card-border-color: var(--border-color); ---card-border-radius: var(--border-radius); ---card-box-shadow: none; ---card-inner-border-radius: calc(var(--border-radius) - 1px); ---card-cap-padding-y: 0.5rem; ---card-cap-padding-x: 1rem; ---card-cap-bg: rgba(255, 255, 255, 0.03); ---card-cap-color: var(--body-color); ---card-height: auto; ---card-color: var(--body-color); ---card-bg: var(--secondary-bg); ---card-img-overlay-padding: 1rem; ---card-group-margin: 0.75rem; - -/* ===== VIRTUEMART (VM) ===== */ -/* VM Surfaces */ ---vm-surface: var(--secondary-bg); ---vm-surface-2: var(--tertiary-bg); ---vm-text: var(--body-color); ---vm-text-strong: #ffffff; ---vm-text-muted: var(--gray-700); ---vm-border: var(--border-color); ---vm-price-color: var(--success); - -/* VM Layout and Density */ ---vm-container-max-width: 1200px; ---vm-section-gap: 2rem; ---vm-block-radius: var(--border-radius); ---vm-block-shadow: var(--box-shadow-sm); - -/* VM Typography */ ---vm-category-title-size: 2rem; ---vm-subcategory-title-size: 1.5rem; ---vm-page-title-size: 1.75rem; ---vm-products-type-title-size: 1.25rem; ---vm-product-title-size: 1.125rem; ---vm-product-title-weight: 500; ---vm-products-type-title-weight: 600; ---vm-price-size: 1.5rem; ---vm-price-detail-size: 1.125rem; ---vm-price-desc-size: 0.875rem; - -/* VM Controls */ ---vm-input-radius: var(--border-radius); ---vm-input-shadow: var(--box-shadow-sm); ---vm-qty-width: 80px; ---vm-cart-dropdown-min-width: 300px; - -/* VM Alerts */ ---vm-alert-radius: var(--border-radius); ---vm-alert-shadow: var(--box-shadow-sm); ---vm-availability-bg: var(--success-bg-subtle); ---vm-availability-text: var(--success); - -/* VM Buttons */ ---vm-btn-padding-x: 1rem; ---vm-btn-padding-y: 0.5rem; ---vm-btn-radius: var(--border-radius); ---vm-btn-shadow: var(--box-shadow-sm); ---vm-btn-primary-bg: var(--primary); ---vm-btn-primary-text: #ffffff; ---vm-btn-primary-border: var(--primary); ---vm-btn-secondary-bg: var(--secondary); ---vm-btn-secondary-text: #ffffff; ---vm-btn-secondary-border: var(--secondary); - -/* VM Image Overlay Controls */ ---vm-image-overlay-gap-x: 0.5rem; ---vm-image-overlay-gap-y: 0.5rem; ---vm-image-overlay-raise: 0.25rem; ---vm-image-overlay-btn-size: 2.5rem; ---vm-image-overlay-btn-radius: 50%; ---vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.7); ---vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85); ---vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2); ---vm-image-overlay-btn-border-width: 1px; ---vm-image-overlay-btn-color: var(--body-color); ---vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); - -/* VM Vendor Menu */ ---vm-vendor-menu-bg: var(--secondary-bg); ---vm-vendor-menu-border: var(--border-color); ---vm-vendor-menu-radius: var(--border-radius); ---vm-vendor-menu-shadow: var(--box-shadow-sm); ---vm-vendor-menu-item-gap: 0.25rem; ---vm-vendor-menu-item-padding-x: 1rem; ---vm-vendor-menu-item-padding-y: 0.5rem; ---vm-vendor-menu-pill-radius: 50rem; ---vm-vendor-menu-link: var(--link-color); ---vm-vendor-menu-link-hover: var(--link-hover-color); ---vm-vendor-menu-link-active: var(--primary); ---vm-vendor-menu-hover-bg: var(--tertiary-bg); - -/* ===== GABLE ===== */ ---gab-blue: #4d9fff; ---gab-green: #5cb85c; ---gab-red: #ff6b6b; ---gab-orange: #ff9f5a; ---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-bg-position: center; ---hero-overlay-bg-size: cover; ---hero-overlay-padding: 1em; ---hero-overlay-text-align: center; ---hero-overlay-text-color: var(--body-color); - -/* ===== HERO VARIANTS ===== */ -/* Primary — deep navy, dark overlay */ ---hero-primary-bg-color: #0d1e3a; ---hero-primary-overlay: linear-gradient(rgba(13, 30, 58, .65), rgba(13, 30, 58, .65)); ---hero-primary-color: #f1f5f9; - -/* Secondary — darker navy, heavier overlay */ ---hero-secondary-bg-color: #080f1e; ---hero-secondary-overlay: linear-gradient(rgba(8, 15, 30, .80), rgba(8, 15, 30, .80)); ---hero-secondary-color: #f1f5f9; - -/* ===== HERO CARD (inner .hero element) ===== */ -/* Default card — uses primary variant values */ ---hero-card-bg: var(--hero-primary-bg-color); ---hero-card-color: var(--hero-primary-color); ---hero-card-overlay: var(--hero-primary-overlay); ---hero-card-border-radius: .5rem; ---hero-card-padding-x: 2rem; ---hero-card-padding-y: 3rem; ---hero-card-max-width: 600px; - -/* Alternative card — uses secondary variant values */ ---hero-alt-card-bg: var(--hero-secondary-bg-color); ---hero-alt-card-color: var(--hero-secondary-color); ---hero-alt-card-overlay: var(--hero-secondary-overlay); ---hero-alt-card-border-radius: .5rem; ---hero-alt-card-padding-x: 2rem; ---hero-alt-card-padding-y: 3rem; ---hero-alt-card-max-width: 600px; - -/* ===== BLOCK COLORS (top-a / top-b / bottom-a / bottom-b) ===== */ ---block-color-1: var(--secondary-bg); ---block-text-1: var(--body-color); - ---block-color-2: var(--accent-color-primary); ---block-text-2: #fff; - ---block-color-3: rgba(238, 194, 52, .15); ---block-text-3: var(--body-color); - ---block-color-4: rgba(74, 166, 100, .15); ---block-text-4: var(--body-color); - -/* ===== BLOCK COLOR OVERRIDES ===== */ ---block-highlight-bg: var(--accent-color-primary); ---block-highlight-text: #fff; - ---block-cta-bg: var(--color-primary); ---block-cta-text: #f1f5f9; - ---block-alert-bg: var(--danger, #c23a31); ---block-alert-text: #fff; - -/* ===== OFFCANVAS ===== */ ---offcanvas-zindex: 1045; ---offcanvas-width: 400px; ---offcanvas-height: 30vh; ---offcanvas-padding-x: 1rem; ---offcanvas-padding-y: 1rem; ---offcanvas-color: var(--body-color); ---offcanvas-bg: var(--body-bg); ---offcanvas-border-width: 1px; ---offcanvas-border-color: var(--border-color-translucent); ---offcanvas-box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3); - -/* ===== ACCORDION ===== */ ---accordion-color: var(--body-color); ---accordion-bg: var(--body-bg); ---accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease; ---accordion-border-color: var(--border-color); ---accordion-border-width: 1px; ---accordion-border-radius: 0.25rem; ---accordion-inner-border-radius: calc(0.25rem - 1px); ---accordion-btn-padding-x: 1.25rem; ---accordion-btn-padding-y: 1rem; ---accordion-btn-color: var(--body-color); ---accordion-btn-bg: var(--accordion-bg); ---accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e6ebf1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-icon-width: 1.25rem; ---accordion-btn-icon-transform: rotate(-180deg); ---accordion-btn-icon-transition: transform 0.2s ease-in-out; ---accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ab4f8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-focus-border-color: var(--input-focus-border-color); ---accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); ---accordion-body-padding-x: 1.25rem; ---accordion-body-padding-y: 1rem; ---accordion-active-color: var(--link-color); ---accordion-active-bg: var(--secondary-bg); - -/* ===== BREADCRUMB ===== */ ---breadcrumb-padding-x: 0; ---breadcrumb-padding-y: 0; ---breadcrumb-margin-bottom: 1rem; ---breadcrumb-bg: ; ---breadcrumb-border-radius: ; ---breadcrumb-divider-color: var(--gray-600); ---breadcrumb-item-padding-x: 0.5rem; ---breadcrumb-item-active-color: var(--link-color); - -/* ===== PAGINATION ===== */ ---pagination-padding-x: 0.75rem; ---pagination-padding-y: 0.375rem; ---pagination-font-size: 1rem; ---pagination-color: var(--link-color); ---pagination-bg: var(--secondary-bg); ---pagination-border-width: 1px; ---pagination-border-color: var(--border-color); ---pagination-border-radius: 0.25rem; ---pagination-focus-color: var(--link-active-color); ---pagination-focus-bg: var(--tertiary-bg); ---pagination-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); ---pagination-active-color: var(--body-color); ---pagination-active-bg: hsl(240, 98%, 17%); ---pagination-active-border-color: hsl(240, 98%, 17%); ---pagination-disabled-color: var(--gray-600); ---pagination-disabled-bg: var(--secondary-bg); ---pagination-disabled-border-color: var(--border-color); - -/* ===== BADGE ===== */ ---badge-padding-x: 0.65em; ---badge-padding-y: 0.35em; ---badge-font-size: 0.75em; ---badge-font-weight: 700; ---badge-color: var(--body-color); ---badge-border-radius: 0.25rem; - -/* ===== ALERT ===== */ ---alert-bg: transparent; ---alert-padding-x: 1rem; ---alert-padding-y: 1rem; ---alert-margin-bottom: 1rem; ---alert-color: inherit; ---alert-border-color: transparent; ---alert-border: 1px solid var(--alert-border-color); ---alert-border-radius: 0.25rem; - -/* ===== PROGRESS ===== */ ---progress-height: 1rem; ---progress-font-size: 0.75rem; ---progress-bg: var(--secondary-bg); ---progress-border-radius: 0.25rem; ---progress-box-shadow: inset 0 1px 2px rgba(var(--black-rgb), 0.3); ---progress-bar-color: var(--body-color); ---progress-bar-bg: hsl(240, 98%, 40%); ---progress-bar-transition: width 0.6s ease; - -/* ===== LIST GROUP ===== */ ---list-group-color: var(--body-color); ---list-group-bg: var(--secondary-bg); ---list-group-border-color: rgba(var(--white-rgb), 0.125); ---list-group-border-width: 1px; ---list-group-border-radius: 0.25rem; ---list-group-item-padding-x: 1rem; ---list-group-item-padding-y: 0.5rem; ---list-group-action-color: var(--gray-800); ---list-group-action-active-color: var(--body-color); ---list-group-action-active-bg: var(--tertiary-bg); ---list-group-disabled-color: var(--gray-600); ---list-group-disabled-bg: var(--secondary-bg); ---list-group-active-color: var(--body-color); ---list-group-active-bg: hsl(240, 98%, 17%); ---list-group-active-border-color: hsl(240, 98%, 17%); - -/* ===== DROPDOWN ===== */ ---dropdown-zindex: 1000; ---dropdown-min-width: 10rem; ---dropdown-padding-x: 0; ---dropdown-padding-y: 0.5rem; ---dropdown-spacer: 0.125rem; ---dropdown-font-size: 1rem; ---dropdown-color: var(--body-color); ---dropdown-bg: var(--secondary-bg); ---dropdown-border-color: var(--border-color-translucent); ---dropdown-border-radius: 0.25rem; ---dropdown-border-width: 1px; ---dropdown-inner-border-radius: calc(0.25rem - 1px); ---dropdown-divider-bg: var(--border-color-translucent); ---dropdown-divider-margin-y: 0.5rem; ---dropdown-box-shadow: 0 0.5rem 1rem var(--shadow-color-medium); ---dropdown-link-color: var(--body-color); ---dropdown-link-active-color: var(--body-color); ---dropdown-link-active-bg: hsl(240, 98%, 17%); ---dropdown-link-disabled-color: var(--gray-600); ---dropdown-item-padding-x: 1rem; ---dropdown-item-padding-y: 0.25rem; ---dropdown-header-color: var(--gray-600); ---dropdown-header-padding-x: 1rem; ---dropdown-header-padding-y: 0.5rem; - -/* ===== TOAST ===== */ ---toast-zindex: 1090; ---toast-padding-x: 0.75rem; ---toast-padding-y: 0.5rem; ---toast-spacing: 1em; ---toast-max-width: 350px; ---toast-font-size: 0.875rem; ---toast-color: ; ---toast-bg: rgba(21, 27, 34, 0.9); ---toast-border-width: 1px; ---toast-border-color: var(--border-color-translucent); ---toast-border-radius: 0.25rem; ---toast-box-shadow: 0 0.5rem 1rem var(--shadow-color-medium); ---toast-header-color: var(--gray-600); ---toast-header-bg: rgba(21, 27, 34, 0.85); ---toast-header-border-color: rgba(var(--white-rgb), var(--opacity-10)); - -/* ===== MODAL ===== */ ---modal-zindex: 1050; ---modal-width: 500px; ---modal-padding: 1rem; ---modal-margin: 0.5rem; ---modal-color: ; ---modal-bg: var(--secondary-bg); ---modal-border-color: var(--border-color-translucent); ---modal-border-width: 1px; ---modal-border-radius: 0.3rem; ---modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3); ---modal-inner-border-radius: calc(0.3rem - 1px); ---modal-header-padding-x: 1rem; ---modal-header-padding-y: 1rem; ---modal-header-padding: 1rem 1rem; ---modal-header-border-color: var(--border-color); ---modal-header-border-width: 1px; ---modal-title-line-height: 1.5; ---modal-footer-gap: 0.5rem; ---modal-footer-bg: ; ---modal-footer-border-color: var(--border-color); ---modal-footer-border-width: 1px; - -/* ===== TOOLTIP ===== */ ---tooltip-zindex: 1070; ---tooltip-max-width: 200px; ---tooltip-padding-x: 0.5rem; ---tooltip-padding-y: 0.25rem; ---tooltip-margin: ; ---tooltip-font-size: 0.875rem; ---tooltip-color: var(--body-color); ---tooltip-bg: hsl(0, 0%, 0%); ---tooltip-border-radius: 0.25rem; ---tooltip-opacity: 0.9; ---tooltip-arrow-width: 0.8rem; ---tooltip-arrow-height: 0.4rem; - -/* ===== POPOVER ===== */ ---popover-zindex: 1060; ---popover-max-width: 276px; ---popover-font-size: 0.875rem; ---popover-bg: var(--secondary-bg); ---popover-border-width: 1px; ---popover-border-color: var(--border-color-translucent); ---popover-border-radius: 0.3rem; ---popover-inner-border-radius: calc(0.3rem - 1px); ---popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4); ---popover-header-padding-x: 1rem; ---popover-header-padding-y: 0.5rem; ---popover-header-font-size: 1rem; ---popover-header-color: ; ---popover-header-bg: var(--tertiary-bg); ---popover-body-padding-x: 1rem; ---popover-body-padding-y: 1rem; ---popover-body-color: var(--body-color); ---popover-arrow-width: 1rem; ---popover-arrow-height: 0.5rem; ---popover-arrow-border: var(--popover-border-color); - -/* ===== SPINNER ===== */ ---spinner-width: 2rem; ---spinner-height: 2rem; ---spinner-vertical-align: -0.125em; ---spinner-border-width: 0.25em; ---spinner-animation-speed: 0.75s; - -/* ===== NAV TABS ===== */ ---nav-tabs-border-width: 1px; ---nav-tabs-border-color: var(--border-color); ---nav-tabs-border-radius: 0.25rem; ---nav-tabs-link-active-color: var(--body-color); ---nav-tabs-link-active-bg: var(--secondary-bg); ---nav-tabs-link-active-border-color: var(--border-color) var(--border-color) var(--secondary-bg); - -/* ===== NAV PILLS ===== */ ---nav-pills-border-radius: 0.25rem; ---nav-pills-link-active-color: var(--body-color); ---nav-pills-link-active-bg: hsl(240, 98%, 17%); - -/* ===== TABLE ===== */ ---table-color: var(--body-color); ---table-bg: transparent; ---table-border-color: var(--border-color); ---table-accent-bg: transparent; ---table-striped-color: var(--body-color); ---table-striped-bg: rgba(var(--white-rgb), var(--opacity-5)); ---table-active-color: var(--body-color); ---table-active-bg: rgba(var(--white-rgb), 0.1); - -/* ===== FOOTER ===== */ ---footer-padding-top: 1rem; ---footer-padding-bottom: 80px; ---footer-grid-padding-y: 2.5rem; ---footer-grid-padding-x: 0.5em; - -/* ===== BACKDROP ===== */ ---backdrop-zindex: 1040; ---backdrop-bg: hsl(0, 0%, 0%); ---backdrop-opacity: 0.5; -} - -.btn { - --btn-padding-x: 1rem; - --btn-padding-y: 0.6rem; - --btn-font-family: inherit; - --btn-font-size: 1rem; - --btn-font-weight: 400; - --btn-line-height: 1.5; - --btn-color: var(--white); - --btn-bg: var(--body-bg); - --btn-border-width: 1px; - --btn-border-color: transparent; - --btn-border-radius: 0.25rem; - --btn-active-border-color: transparent; - --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); - --btn-disabled-opacity: 0.65; - --btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); - display: inline-block; - padding: var(--btn-padding-y) var(--btn-padding-x); - font-family: var(--btn-font-family); - font-size: var(--btn-font-size); - font-weight: var(--btn-font-weight); - line-height: var(--btn-line-height); - color: var(--btn-color); - text-align: center; - text-decoration: none; - vertical-align: middle; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border: var(--btn-border-width) solid var(--btn-border-color); - border-radius: var(--btn-border-radius); - background-color: var(--btn-bg); - -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; -} - -/* Buttons — inherit brand hues; ensure strong contrast on dark bg */ -.btn-primary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(240, 98%, 17%); - --btn-border-color: hsl(240, 98%, 17%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #010149; - --btn-hover-border-color: #010145; - --btn-focus-shadow-rgb: 84, 114, 255; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #010145; - --btn-active-border-color: #010141; -} - -.btn-secondary { - --btn-color: var(--nav-text-color); - --btn-bg: var(--nav-bg-color); - --btn-border-color: #3a4250; - --btn-hover-color: #fff; - --btn-hover-bg: #1b2a55; - --btn-hover-border-color: #162448; - --btn-focus-shadow-rgb: 84, 114, 255; - --btn-active-color: #fff; - --btn-active-bg: #162448; - --btn-active-border-color: #12203f; -} - -.btn-success { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(120, 35%, 45%); - --btn-border-color: hsl(120, 35%, 45%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(120, 35%, 40%); - --btn-hover-border-color: hsl(120, 35%, 38%); - --btn-focus-shadow-rgb: 96, 180, 96; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(120, 35%, 38%); - --btn-active-border-color: hsl(120, 35%, 36%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(120, 35%, 45%); - --btn-disabled-border-color: hsl(120, 35%, 45%); -} - -.btn-info { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(207, 55%, 55%); - --btn-border-color: hsl(207, 55%, 55%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(207, 55%, 50%); - --btn-hover-border-color: hsl(207, 55%, 48%); - --btn-focus-shadow-rgb: 100, 160, 210); - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(207, 55%, 48%); - --btn-active-border-color: hsl(207, 55%, 46%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(207, 55%, 55%); - --btn-disabled-border-color: hsl(207, 55%, 55%); -} - -.btn-warning { - --btn-color: hsl(0, 0%, 0%); - --btn-bg: hsl(38, 100%, 50%); - --btn-border-color: hsl(38, 100%, 50%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(38, 100%, 45%); - --btn-hover-border-color: hsl(38, 100%, 43%); - --btn-focus-shadow-rgb: 220, 170, 40; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(38, 100%, 43%); - --btn-active-border-color: hsl(38, 100%, 41%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 0%); - --btn-disabled-bg: hsl(38, 100%, 50%); - --btn-disabled-border-color: hsl(38, 100%, 50%); -} - -.btn-danger { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(3, 82%, 50%); - --btn-border-color: hsl(3, 82%, 50%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(3, 82%, 45%); - --btn-hover-border-color: hsl(3, 82%, 43%); - --btn-focus-shadow-rgb: 220, 80, 80; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(3, 82%, 43%); - --btn-active-border-color: hsl(3, 82%, 41%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(3, 82%, 50%); - --btn-disabled-border-color: hsl(3, 82%, 50%); -} - -.btn-light { - --btn-color: hsl(0, 0%, 0%); - --btn-bg: hsl(210, 17%, 85%); - --btn-border-color: hsl(210, 17%, 85%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(210, 17%, 80%); - --btn-hover-border-color: hsl(210, 17%, 78%); - --btn-focus-shadow-rgb: 200, 205, 210; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(210, 17%, 78%); - --btn-active-border-color: hsl(210, 17%, 76%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 0%); - --btn-disabled-bg: hsl(210, 17%, 85%); - --btn-disabled-border-color: hsl(210, 17%, 85%); -} - -.btn-dark { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(210, 10%, 20%); - --btn-border-color: hsl(210, 10%, 20%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(210, 10%, 18%); - --btn-hover-border-color: hsl(210, 10%, 16%); - --btn-focus-shadow-rgb: 60, 65, 70; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(210, 10%, 16%); - --btn-active-border-color: hsl(210, 10%, 14%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(210, 10%, 20%); - --btn-disabled-border-color: hsl(210, 10%, 20%); -} - -.btn-outline-primary { - --btn-color: hsl(240, 98%, 40%); - --btn-border-color: hsl(240, 98%, 40%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(240, 98%, 40%); - --btn-hover-border-color: hsl(240, 98%, 40%); - --btn-focus-shadow-rgb: 80, 80, 180; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(240, 98%, 40%); - --btn-active-border-color: hsl(240, 98%, 40%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(240, 98%, 40%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(240, 98%, 40%); - --gradient: none; -} - -.btn-outline-secondary { - --btn-color: hsl(210, 20%, 60%); - --btn-border-color: hsl(210, 20%, 60%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(210, 20%, 60%); - --btn-hover-border-color: hsl(210, 20%, 60%); - --btn-focus-shadow-rgb: 120, 140, 160; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(210, 20%, 60%); - --btn-active-border-color: hsl(210, 20%, 60%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 20%, 60%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 20%, 60%); - --gradient: none; -} - -.btn-outline-success { - --btn-color: hsl(120, 35%, 55%); - --btn-border-color: hsl(120, 35%, 55%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(120, 35%, 55%); - --btn-hover-border-color: hsl(120, 35%, 55%); - --btn-focus-shadow-rgb: 100, 190, 100; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(120, 35%, 55%); - --btn-active-border-color: hsl(120, 35%, 55%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(120, 35%, 55%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(120, 35%, 55%); - --gradient: none; -} - -.btn-outline-info { - --btn-color: hsl(207, 55%, 65%); - --btn-border-color: hsl(207, 55%, 65%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(207, 55%, 65%); - --btn-hover-border-color: hsl(207, 55%, 65%); - --btn-focus-shadow-rgb: 110, 170, 220; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(207, 55%, 65%); - --btn-active-border-color: hsl(207, 55%, 65%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(207, 55%, 65%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(207, 55%, 65%); - --gradient: none; -} - -.btn-outline-warning { - --btn-color: hsl(38, 100%, 60%); - --btn-border-color: hsl(38, 100%, 60%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(38, 100%, 60%); - --btn-hover-border-color: hsl(38, 100%, 60%); - --btn-focus-shadow-rgb: 240, 190, 70; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(38, 100%, 60%); - --btn-active-border-color: hsl(38, 100%, 60%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(38, 100%, 60%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(38, 100%, 60%); - --gradient: none; -} - -.btn-outline-danger { - --btn-color: hsl(3, 82%, 60%); - --btn-border-color: hsl(3, 82%, 60%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(3, 82%, 60%); - --btn-hover-border-color: hsl(3, 82%, 60%); - --btn-focus-shadow-rgb: 240, 100, 100; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(3, 82%, 60%); - --btn-active-border-color: hsl(3, 82%, 60%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(3, 82%, 60%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(3, 82%, 60%); - --gradient: none; -} - -/* Outline buttons on dark: keep readable borders */ -.btn-outline-light { - --btn-color: #e6ebf1; - --btn-border-color: #e6ebf1; - --btn-hover-color: #111; - --btn-hover-bg: #e6ebf1; - --btn-hover-border-color: #e6ebf1; - --btn-active-color: #111; - --btn-active-bg: #d7dce2; - --btn-active-border-color: #d7dce2; - --gradient: none; -} - -.btn-outline-dark { - --btn-color: hsl(210, 10%, 30%); - --btn-border-color: hsl(210, 10%, 30%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(210, 10%, 30%); - --btn-hover-border-color: hsl(210, 10%, 30%); - --btn-focus-shadow-rgb: 70, 75, 80; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(210, 10%, 30%); - --btn-active-border-color: hsl(210, 10%, 30%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 10%, 30%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 10%, 30%); - --gradient: none; -} - -/* Links as buttons */ -.btn-link { - --btn-font-weight: 400; - --btn-color: var(--color-link); - --btn-bg: transparent; - --btn-border-color: transparent; - --btn-hover-color: var(--link-hover-color); - --btn-hover-border-color: transparent; - --btn-active-color: var(--link-hover-color); - --btn-active-border-color: transparent; - --btn-disabled-color: #6d7781; - --btn-disabled-border-color: transparent; - --btn-box-shadow: none; - --btn-focus-shadow-rgb: 84, 114, 255; - text-decoration: underline; -} - -.navbar-brand img { - max-height: 100px; - width: auto; - height: auto; -} diff --git a/src/templates/light.custom.css b/src/templates/light.custom.css deleted file mode 100644 index d4b6d60..0000000 --- a/src/templates/light.custom.css +++ /dev/null @@ -1,1154 +0,0 @@ -@charset "UTF-8"; -/* ----------------------------------------------- - * CUSTOM LIGHT THEME - * Merged from light.standard.css with custom overrides. - * --------------------------------------------- */ - -:root[data-bs-theme="light"]{ - -color-scheme: light; - -/* ===== BRAND & THEME COLORS ===== */ ---color-primary: #a3cde2; ---accent-color-primary: #df4830; ---accent-color-secondary: #eec234; - -/* ===== NAVIGATION ===== */ ---mainmenu-nav-link-color: #f8fbfc; ---nav-text-color: #f8fbfc; ---nav-bg-color: #112855; - -/* ===== LINKS ===== */ ---color-link: #112855; ---color-hover: var(--accent-color-primary); ---link-color: #112855; ---link-color-rgb: 17, 40, 85; ---link-decoration: underline; ---link-hover-color: var(--accent-color-primary); ---link-hover-color-rgb: 223, 72, 48; ---link-active-color: var(--link-color); - -/* ===== NAVBAR ===== */ ---navbar-padding-x: 1rem; ---navbar-padding-y: 0.5rem; ---navbar-color: var(--nav-text-color); ---navbar-active-color: var(--mainmenu-nav-link-color); ---navbar-disabled-color: #6c757d; ---navbar-brand-padding-y: 0.3125rem; ---navbar-brand-margin-end: 1rem; ---navbar-brand-font-size: 1.25rem; ---navbar-brand-color: var(--nav-text-color); ---navbar-brand-active-color: var(--mainmenu-nav-link-color); ---navbar-nav-link-padding-x: 0.5rem; ---navbar-toggler-padding-y: 0.25rem; ---navbar-toggler-padding-x: 0.75rem; ---navbar-toggler-font-size: 1.25rem; ---navbar-toggler-border-color: rgba(0, 0, 0, 0.1); ---navbar-toggler-border-radius: 0.25rem; ---navbar-toggler-focus-width: 0.25rem; ---navbar-toggler-transition: box-shadow 0.15s ease-in-out; ---nav-link-padding-x: 1rem; ---nav-link-padding-y: 0.5rem; ---nav-link-font-weight: 400; ---nav-link-color: var(--nav-text-color); ---nav-link-active-color: var(--mainmenu-nav-link-color); ---nav-link-disabled-color: #6c757d; - -/* ===== TYPOGRAPHY & BODY ===== */ ---font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; ---font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; ---body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); ---body-font-size: 1rem; ---body-font-weight: 400; ---body-line-height: 1.5; ---body-color: #22262a; ---body-color-rgb: 34, 38, 42; ---body-bg: #fff; ---body-bg-rgb: 255, 255, 255; ---heading-color: inherit; ---emphasis-color: #000; ---emphasis-color-rgb: 0, 0, 0; ---secondary-color: #22262abf; ---secondary-color-rgb: 34, 38, 42; ---tertiary-color: #22262a80; ---tertiary-color-rgb: 34, 38, 42; ---muted-color: #6d757e; ---code-color: black; ---code-color-ink: var(--code-color, #e93f8e); ---code-bg-color: lightgreen; ---highlight-color: #22262a; ---highlight-bg: #fbeea8; - -/* ===== LAYOUT & SPACING ===== */ ---padding-x: 0.15rem; ---padding-y: 0.15rem; ---bg-opacity: 1; ---nav-toggle-size: 3rem; ---gradient: linear-gradient(180deg, #ffffff26, #fff0); ---secondary-bg: #eaedf0; ---secondary-bg-rgb: 234, 237, 240; ---tertiary-bg: #f9fafb; ---tertiary-bg-rgb: 249, 250, 251; ---hr-color: var(--border-color, #dfe3e7); ---border-color-soft: var(--border-color, #dfe3e7); ---kbd-bg: var(--secondary-bg, #eaedf0); ---kbd-ink: var(--body-bg, #fff); ---toc-bg: var(--secondary-bg, #eaedf0); ---toc-ink: var(--color-primary, #112855); ---selection-bg: var(--highlight-bg, #fbeea8); ---selection-ink: var(--body-color, #22262a); ---border: 5px; - -/* ===== BREAKPOINTS ===== */ ---bp-xs: 0; ---bp-sm: 576px; ---bp-md: 768px; ---bp-lg: 992px; ---bp-xl: 1200px; - -/* ===== BOOTSTRAP PALETTE ===== */ ---primary: #010156; ---secondary: #6d757e; ---success: #448344; ---info: #30638d; ---warning: #ad6200; ---danger: #a51f18; ---light: #f9fafb; ---dark: #353b41; ---primary-rgb: 1, 1, 86; ---secondary-rgb: 109, 117, 126; ---success-rgb: 68, 131, 68; ---info-rgb: 48, 99, 141; ---warning-rgb: 173, 98, 0; ---danger-rgb: 165, 31, 24; ---light-rgb: 249, 250, 251; ---dark-rgb: 53, 59, 65; ---primary-text-emphasis: #002; ---secondary-text-emphasis: #2c2f32; ---success-text-emphasis: #1b351b; ---info-text-emphasis: #132838; ---warning-text-emphasis: #452700; ---danger-text-emphasis: #420c09; ---light-text-emphasis: #484f56; ---dark-text-emphasis: #484f56; ---primary-bg-subtle: #ccd; ---secondary-bg-subtle: #e2e3e5; ---success-bg-subtle: #dae6da; ---info-bg-subtle: #d6e0e8; ---warning-bg-subtle: #efe0cc; ---danger-bg-subtle: #edd2d1; ---light-bg-subtle: #fcfcfd; ---dark-bg-subtle: #ced4da; ---primary-border-subtle: #99b; ---secondary-border-subtle: #c5c8cb; ---success-border-subtle: #b4ceb4; ---info-border-subtle: #acc1d1; ---warning-border-subtle: #dec099; ---danger-border-subtle: #dba5a2; ---light-border-subtle: #eaedf0; ---dark-border-subtle: #adb5bd; - -/* ===== ALERT LINK COLORS ===== */ ---alert-primary-link-color: #01012a; ---alert-secondary-link-color: #34383d; ---alert-success-link-color: #213f21; ---alert-info-link-color: #172f44; ---alert-warning-link-color: #532f00; ---alert-danger-link-color: #4f0f0b; ---alert-light-link-color: #505050; ---alert-dark-link-color: #1a1c1f; - -/* ===== LIST GROUP ITEM COLORS ===== */ ---list-group-item-primary-color: #010134; ---list-group-item-primary-bg: #ccccdd; ---list-group-item-primary-active-bg: #b8b8c7; ---list-group-item-secondary-color: #41464c; ---list-group-item-secondary-bg: #e2e3e5; ---list-group-item-secondary-active-bg: #cbccce; ---list-group-item-success-color: #294f29; ---list-group-item-success-bg: #dae6da; ---list-group-item-success-active-bg: #c4cfc4; ---list-group-item-info-color: #1d3b55; ---list-group-item-info-bg: #d6e0e8; ---list-group-item-info-active-bg: #c1cad1; ---list-group-item-warning-color: #683b00; ---list-group-item-warning-bg: #efe0cc; ---list-group-item-warning-active-bg: #d7cab8; ---list-group-item-danger-color: #63130e; ---list-group-item-danger-bg: #edd2d1; ---list-group-item-danger-active-bg: #d5bdbc; ---list-group-item-light-color: #646464; ---list-group-item-light-bg: #fefefe; ---list-group-item-light-active-bg: #e5e5e5; ---list-group-item-dark-color: #202327; ---list-group-item-dark-bg: #d7d8d9; ---list-group-item-dark-active-bg: #c2c2c3; - -/* ===== LINK UTILITY COLORS ===== */ ---link-primary-color: hsl(240, 98%, 17%); ---link-primary-hover-color: #010145; ---link-secondary-color: hsl(210, 7%, 46%); ---link-secondary-hover-color: #575e65; ---link-success-color: hsl(120, 32%, 39%); ---link-success-hover-color: #366936; ---link-info-color: hsl(207, 49%, 37%); ---link-info-hover-color: #264f71; ---link-warning-color: hsl(34, 100%, 34%); ---link-warning-hover-color: #8a4e00; ---link-danger-color: hsl(3, 75%, 37%); ---link-danger-hover-color: #841913; ---link-light-color: hsl(210, 17%, 98%); ---link-light-hover-color: #fafbfc; ---link-dark-color: hsl(210, 10%, 23%); ---link-dark-hover-color: #2a2f34; - -/* ===== COMPONENT-SPECIFIC COLORS ===== */ ---mod-finder-link-hover: #e6e6e6; ---form-legend-color: #495057; ---border-gray: #b2bfcd; ---subhead-color: #495057; ---box-shadow-gray: #ddd; ---btn-active-text-gray: #A0A0A0; ---indicator-success-bg: var(--success); ---item-list-color: #F5F5F5; ---notification-badge-bg: var(--danger); ---content-bg-gray: #DDD; ---taba-btn-green: #7ac143; ---taba-btn-blue: #5091cd; ---taba-btn-red: #f44321; ---taba-btn-gray: #AAA; ---taba-msg-bg: #f5f5f5; ---toc-link-color: #767676; ---toc-link-active-color: #563d7c; ---choices-disabled-bg: #eaeaea; ---choices-input-bg: var(--white); ---choices-border-light: #ddd; ---choices-arrow-color: #333; ---choices-inner-bg: #f9f9f9; ---choices-focused-border: #b7b7b7; ---choices-dropdown-bg: var(--white); ---choices-item-bg: #00bcd4; ---choices-item-border: #00a5bb; ---choices-item-hover-bg: #00a5bb; ---choices-item-hover-border: #008fa1; ---choices-item-disabled-bg: #aaaaaa; ---choices-item-disabled-border: #919191; ---choices-item-highlighted: #f2f2f2; ---choices-input-inner-bg: #f9f9f9; - -/* ===== STANDARD COLORS ===== */ ---blue: #010156; ---indigo: #6812f3; ---purple: #6f42c2; ---pink: #e93f8e; ---red: #a51f18; ---orange: #fd7e17; ---yellow: #ad6200; ---green: #448344; ---teal: #5abfdd; ---cyan: #30638d; ---black: #000; ---white: #fff; - -/* ===== GRAY SCALE ===== */ ---gray-100: #f9fafb; ---gray-200: #eaedf0; ---gray-300: #dfe3e7; ---gray-400: #ced4da; ---gray-500: #adb5bd; ---gray-600: #6d757e; ---gray-700: #484f56; ---gray-800: #353b41; ---gray-900: #22262a; ---white-rgb: 255, 255, 255; ---black-rgb: 0, 0, 0; - -/* ===== OPACITY UTILITIES ===== */ ---opacity-0: 0; ---opacity-5: 0.05; ---opacity-10: 0.1; ---opacity-15: 0.15; ---opacity-20: 0.2; ---opacity-25: 0.25; ---opacity-30: 0.3; ---opacity-50: 0.5; ---opacity-75: 0.75; ---opacity-100: 1; - -/* ===== COMMON SHADOW COLORS ===== */ ---shadow-color-light: rgba(var(--black-rgb), var(--opacity-15)); ---shadow-color-medium: rgba(var(--black-rgb), var(--opacity-25)); ---shadow-color-dark: rgba(var(--black-rgb), var(--opacity-30)); ---border-color-translucent: rgba(var(--black-rgb), var(--opacity-10)); ---highlight-translucent: rgba(var(--white-rgb), var(--opacity-15)); - -/* ===== HEADER BACKGROUND ===== */ ---header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); ---header-background-attachment: fixed; ---header-background-repeat: repeat; ---header-background-size: auto; - -/* ===== CONTAINER BACKGROUNDS ===== */ -/* Below Topbar Container */ ---container-below-topbar-bg-image: none; ---container-below-topbar-bg-color: transparent; ---container-below-topbar-bg-position: auto; ---container-below-topbar-bg-attachment: fixed; ---container-below-topbar-bg-repeat: repeat; ---container-below-topbar-bg-size: auto; ---container-below-topbar-border: none; ---container-below-topbar-border-radius: 0; - -/* Top A Container */ ---container-top-a-bg-image: none; ---container-top-a-bg-color: transparent; ---container-top-a-bg-position: auto; ---container-top-a-bg-attachment: fixed; ---container-top-a-bg-repeat: repeat; ---container-top-a-bg-size: auto; ---container-top-a-border: none; ---container-top-a-border-radius: 0; - -/* Top B Container */ ---container-top-b-bg-image: none; ---container-top-b-bg-color: transparent; ---container-top-b-bg-position: auto; ---container-top-b-bg-attachment: fixed; ---container-top-b-bg-repeat: repeat; ---container-top-b-bg-size: auto; ---container-top-b-border: none; ---container-top-b-border-radius: 0; - -/* TOC Container */ ---container-toc-bg: var(--mainmenu-nav-link-color); ---container-toc-color: var(--color-primary); - -/* Sidebar Container */ ---container-sidebar-bg-image: none; ---container-sidebar-bg-color: transparent; ---container-sidebar-bg-position: auto; ---container-sidebar-bg-attachment: scroll; ---container-sidebar-bg-repeat: repeat; ---container-sidebar-bg-size: auto; ---container-sidebar-border: none; ---container-sidebar-border-radius: 0; - -/* Bottom A Container */ ---container-bottom-a-bg-image: none; ---container-bottom-a-bg-color: transparent; ---container-bottom-a-bg-position: auto; ---container-bottom-a-bg-attachment: fixed; ---container-bottom-a-bg-repeat: repeat; ---container-bottom-a-bg-size: auto; ---container-bottom-a-border: none; ---container-bottom-a-border-radius: 0; - -/* Bottom B Container */ ---container-bottom-b-bg-image: none; ---container-bottom-b-bg-color: transparent; ---container-bottom-b-bg-position: auto; ---container-bottom-b-bg-attachment: fixed; ---container-bottom-b-bg-repeat: repeat; ---container-bottom-b-bg-size: auto; ---container-bottom-b-border: none; ---container-bottom-b-border-radius: 0; - -/* ===== BORDERS ===== */ ---border-width: 1px; ---border-style: solid; ---border-color: #dfe3e7; ---border-color-translucent: #0000002d; ---border-radius: .25rem; ---border-radius-sm: .2rem; ---border-radius-lg: .3rem; ---border-radius-xl: .3rem; ---border-radius-xxl: 2rem; ---border-radius-2xl: var(--border-radius-xxl)*2; ---border-radius-pill: 50rem; - -/* ===== SHADOWS ===== */ ---box-shadow: 0 .5rem 1rem #00000026; ---box-shadow-sm: 0 .125rem .25rem #00000013; ---box-shadow-lg: 0 1rem 3rem #0000002d; ---box-shadow-inset: inset 0 1px 2px #00000013; - -/* ===== FOCUS & FORMS ===== */ ---focus-ring-width: .25rem; ---focus-ring-opacity: .25; ---focus-ring-color: #01015640; ---input-color: hsl(210, 11%, 15%); ---input-bg: hsl(210, 20%, 98%); ---input-border-color: hsl(210, 14%, 83%); ---input-focus-border-color: #8894aa; ---input-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); ---input-placeholder-color: hsl(210, 7%, 46%); ---input-disabled-bg: hsl(210, 16%, 93%); ---input-disabled-border-color: hsl(210, 14%, 83%); ---input-file-button-active-bg: #dee1e4; ---form-range-thumb-active-bg: #b8bfcc; ---form-valid-color: #448344; ---form-valid-border-color: #448344; ---form-invalid-color: #a51f18; ---form-invalid-border-color: #a51f18; - -/* ===== BUTTONS ===== */ ---btn-border-radius: var(--border-radius); ---btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); - -/* ===== CARDS ===== */ ---card-spacer-y: 1rem; ---card-spacer-x: 1rem; ---card-title-spacer-y: 0.5rem; ---card-border-width: 1px; ---card-border-color: var(--border-color); ---card-border-radius: var(--border-radius); ---card-box-shadow: none; ---card-inner-border-radius: calc(var(--border-radius) - 1px); ---card-cap-padding-y: 0.5rem; ---card-cap-padding-x: 1rem; ---card-cap-bg: rgba(0, 0, 0, 0.03); ---card-cap-color: var(--body-color); ---card-height: auto; ---card-color: var(--body-color); ---card-bg: var(--body-bg); ---card-img-overlay-padding: 1rem; ---card-group-margin: 0.75rem; - -/* ===== VIRTUEMART (VM) ===== */ -/* VM Surfaces */ ---vm-surface: #ffffff; ---vm-surface-2: #f8f9fa; ---vm-text: var(--body-color); ---vm-text-strong: #000000; ---vm-text-muted: #6c757d; ---vm-border: var(--border-color); ---vm-price-color: var(--success); - -/* VM Layout and Density */ ---vm-container-max-width: 1200px; ---vm-section-gap: 2rem; ---vm-block-radius: var(--border-radius); ---vm-block-shadow: var(--box-shadow-sm); - -/* VM Typography */ ---vm-category-title-size: 2rem; ---vm-subcategory-title-size: 1.5rem; ---vm-page-title-size: 1.75rem; ---vm-products-type-title-size: 1.25rem; ---vm-product-title-size: 1.125rem; ---vm-product-title-weight: 500; ---vm-products-type-title-weight: 600; ---vm-price-size: 1.5rem; ---vm-price-detail-size: 1.125rem; ---vm-price-desc-size: 0.875rem; - -/* VM Controls */ ---vm-input-radius: var(--border-radius); ---vm-input-shadow: var(--box-shadow-sm); ---vm-qty-width: 80px; ---vm-cart-dropdown-min-width: 300px; - -/* VM Alerts */ ---vm-alert-radius: var(--border-radius); ---vm-alert-shadow: var(--box-shadow-sm); ---vm-availability-bg: var(--success-bg-subtle); ---vm-availability-text: var(--success); - -/* VM Buttons */ ---vm-btn-padding-x: 1rem; ---vm-btn-padding-y: 0.5rem; ---vm-btn-radius: var(--border-radius); ---vm-btn-shadow: var(--box-shadow-sm); ---vm-btn-primary-bg: var(--primary); ---vm-btn-primary-text: #ffffff; ---vm-btn-primary-border: var(--primary); ---vm-btn-secondary-bg: var(--secondary); ---vm-btn-secondary-text: #ffffff; ---vm-btn-secondary-border: var(--secondary); - -/* VM Image Overlay Controls */ ---vm-image-overlay-gap-x: 0.5rem; ---vm-image-overlay-gap-y: 0.5rem; ---vm-image-overlay-raise: 0.25rem; ---vm-image-overlay-btn-size: 2.5rem; ---vm-image-overlay-btn-radius: 50%; ---vm-image-overlay-btn-bg: rgba(255, 255, 255, 0.9); ---vm-image-overlay-btn-bg-hover: rgba(255, 255, 255, 1); ---vm-image-overlay-btn-border-color: rgba(0, 0, 0, 0.1); ---vm-image-overlay-btn-border-width: 1px; ---vm-image-overlay-btn-color: var(--body-color); ---vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - -/* VM Vendor Menu */ ---vm-vendor-menu-bg: var(--body-bg); ---vm-vendor-menu-border: var(--border-color); ---vm-vendor-menu-radius: var(--border-radius); ---vm-vendor-menu-shadow: var(--box-shadow-sm); ---vm-vendor-menu-item-gap: 0.25rem; ---vm-vendor-menu-item-padding-x: 1rem; ---vm-vendor-menu-item-padding-y: 0.5rem; ---vm-vendor-menu-pill-radius: 50rem; ---vm-vendor-menu-link: var(--link-color); ---vm-vendor-menu-link-hover: var(--link-hover-color); ---vm-vendor-menu-link-active: var(--primary); ---vm-vendor-menu-hover-bg: var(--secondary-bg); - -/* ===== GABLE ===== */ ---gab-blue: #0066cc; ---gab-green: #28a745; ---gab-red: #dc3545; ---gab-orange: #fd7e14; ---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-bg-position: center; ---hero-overlay-bg-size: cover; ---hero-overlay-padding: 1em; ---hero-overlay-text-align: center; ---hero-overlay-text-color: var(--body-color); - -/* ===== HERO VARIANTS ===== */ -/* Primary — sky blue, light overlay */ ---hero-primary-bg-color: var(--color-primary); ---hero-primary-overlay: linear-gradient(rgba(163, 205, 226, .45), rgba(163, 205, 226, .45)); ---hero-primary-color: #112855; - -/* Secondary — navy, stronger overlay */ ---hero-secondary-bg-color: #112855; ---hero-secondary-overlay: linear-gradient(rgba(17, 40, 85, .75), rgba(17, 40, 85, .75)); ---hero-secondary-color: #f1f5f9; - -/* ===== HERO CARD (inner .hero element) ===== */ -/* Default card — uses primary variant values */ ---hero-card-bg: var(--hero-primary-bg-color); ---hero-card-color: var(--hero-primary-color); ---hero-card-overlay: var(--hero-primary-overlay); ---hero-card-border-radius: .5rem; ---hero-card-padding-x: 2rem; ---hero-card-padding-y: 3rem; ---hero-card-max-width: 600px; - -/* Alternative card — uses secondary variant values */ ---hero-alt-card-bg: var(--hero-secondary-bg-color); ---hero-alt-card-color: var(--hero-secondary-color); ---hero-alt-card-overlay: var(--hero-secondary-overlay); ---hero-alt-card-border-radius: .5rem; ---hero-alt-card-padding-x: 2rem; ---hero-alt-card-padding-y: 3rem; ---hero-alt-card-max-width: 600px; - -/* ===== BLOCK COLORS (top-a / top-b / bottom-a / bottom-b) ===== */ ---block-color-1: var(--color-primary); ---block-text-1: #112855; - ---block-color-2: var(--accent-color-primary); ---block-text-2: #fff; - ---block-color-3: #eec234; ---block-text-3: #22262a; - ---block-color-4: #eef7f0; ---block-text-4: #22262a; - -/* ===== BLOCK COLOR OVERRIDES ===== */ ---block-highlight-bg: var(--accent-color-primary); ---block-highlight-text: #fff; - ---block-cta-bg: #112855; ---block-cta-text: #fff; - ---block-alert-bg: var(--accent-color-primary); ---block-alert-text: #fff; - -/* ===== OFFCANVAS ===== */ ---offcanvas-zindex: 1045; ---offcanvas-width: 400px; ---offcanvas-height: 30vh; ---offcanvas-padding-x: 1rem; ---offcanvas-padding-y: 1rem; ---offcanvas-color: var(--body-color); ---offcanvas-bg: var(--body-bg); ---offcanvas-border-width: 1px; ---offcanvas-border-color: var(--border-color-translucent); ---offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); - -/* ===== ACCORDION ===== */ ---accordion-color: hsl(210, 11%, 15%); ---accordion-bg: var(--body-bg); ---accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease; ---accordion-border-color: var(--border-color); ---accordion-border-width: 1px; ---accordion-border-radius: 0.25rem; ---accordion-inner-border-radius: calc(0.25rem - 1px); ---accordion-btn-padding-x: 1.25rem; ---accordion-btn-padding-y: 1rem; ---accordion-btn-color: hsl(210, 11%, 15%); ---accordion-btn-bg: var(--accordion-bg); ---accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='hsl%28210, 11%25, 15%25%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-icon-width: 1.25rem; ---accordion-btn-icon-transform: rotate(-180deg); ---accordion-btn-icon-transition: transform 0.2s ease-in-out; ---accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f244d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-focus-border-color: var(--input-focus-border-color); ---accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); ---accordion-body-padding-x: 1.25rem; ---accordion-body-padding-y: 1rem; ---accordion-active-color: #0f244d; ---accordion-active-bg: #e7eaee; - -/* ===== BREADCRUMB ===== */ ---breadcrumb-padding-x: 0; ---breadcrumb-padding-y: 0; ---breadcrumb-margin-bottom: 1rem; ---breadcrumb-bg: ; ---breadcrumb-border-radius: ; ---breadcrumb-divider-color: hsl(210, 7%, 46%); ---breadcrumb-item-padding-x: 0.5rem; ---breadcrumb-item-active-color: var(--link-color); - -/* ===== PAGINATION ===== */ ---pagination-padding-x: 0.75rem; ---pagination-padding-y: 0.375rem; ---pagination-font-size: 1rem; ---pagination-color: var(--link-color); ---pagination-bg: var(--body-bg); ---pagination-border-width: 1px; ---pagination-border-color: hsl(210, 14%, 89%); ---pagination-border-radius: 0.25rem; ---pagination-focus-color: var(--link-active-color); ---pagination-focus-bg: hsl(210, 16%, 93%); ---pagination-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); ---pagination-active-color: var(--body-bg); ---pagination-active-bg: hsl(240, 98%, 17%); ---pagination-active-border-color: hsl(240, 98%, 17%); ---pagination-disabled-color: hsl(210, 7%, 46%); ---pagination-disabled-bg: var(--body-bg); ---pagination-disabled-border-color: hsl(210, 14%, 89%); - -/* ===== BADGE ===== */ ---badge-padding-x: 0.65em; ---badge-padding-y: 0.35em; ---badge-font-size: 0.75em; ---badge-font-weight: 700; ---badge-color: var(--body-bg); ---badge-border-radius: 0.25rem; - -/* ===== ALERT ===== */ ---alert-bg: transparent; ---alert-padding-x: 1rem; ---alert-padding-y: 1rem; ---alert-margin-bottom: 1rem; ---alert-color: inherit; ---alert-border-color: transparent; ---alert-border: 1px solid var(--alert-border-color); ---alert-border-radius: 0.25rem; - -/* ===== PROGRESS ===== */ ---progress-height: 1rem; ---progress-font-size: 0.75rem; ---progress-bg: hsl(210, 16%, 93%); ---progress-border-radius: 0.25rem; ---progress-box-shadow: inset 0 1px 2px rgba(var(--black-rgb), 0.075); ---progress-bar-color: var(--body-bg); ---progress-bar-bg: hsl(240, 98%, 17%); ---progress-bar-transition: width 0.6s ease; - -/* ===== LIST GROUP ===== */ ---list-group-color: hsl(210, 11%, 15%); ---list-group-bg: var(--body-bg); ---list-group-border-color: rgba(var(--black-rgb), 0.125); ---list-group-border-width: 1px; ---list-group-border-radius: 0.25rem; ---list-group-item-padding-x: 1rem; ---list-group-item-padding-y: 0.5rem; ---list-group-action-color: hsl(210, 9%, 31%); ---list-group-action-active-color: hsl(210, 11%, 15%); ---list-group-action-active-bg: hsl(210, 16%, 93%); ---list-group-disabled-color: hsl(210, 7%, 46%); ---list-group-disabled-bg: var(--body-bg); ---list-group-active-color: var(--body-bg); ---list-group-active-bg: hsl(240, 98%, 17%); ---list-group-active-border-color: hsl(240, 98%, 17%); - -/* ===== DROPDOWN ===== */ ---dropdown-zindex: 1000; ---dropdown-min-width: 10rem; ---dropdown-padding-x: 0; ---dropdown-padding-y: 0.5rem; ---dropdown-spacer: 0.125rem; ---dropdown-font-size: 1rem; ---dropdown-color: hsl(210, 11%, 15%); ---dropdown-bg: var(--body-bg); ---dropdown-border-color: var(--border-color-translucent); ---dropdown-border-radius: 0.25rem; ---dropdown-border-width: 1px; ---dropdown-inner-border-radius: calc(0.25rem - 1px); ---dropdown-divider-bg: var(--border-color-translucent); ---dropdown-divider-margin-y: 0.5rem; ---dropdown-box-shadow: 0 0.5rem 1rem var(--shadow-color-light); ---dropdown-link-color: hsl(210, 11%, 15%); ---dropdown-link-active-color: var(--body-bg); ---dropdown-link-active-bg: hsl(240, 98%, 17%); ---dropdown-link-disabled-color: hsl(210, 11%, 71%); ---dropdown-item-padding-x: 1rem; ---dropdown-item-padding-y: 0.25rem; ---dropdown-header-color: hsl(210, 7%, 46%); ---dropdown-header-padding-x: 1rem; ---dropdown-header-padding-y: 0.5rem; - -/* ===== TOAST ===== */ ---toast-zindex: 1090; ---toast-padding-x: 0.75rem; ---toast-padding-y: 0.5rem; ---toast-spacing: 1em; ---toast-max-width: 350px; ---toast-font-size: 0.875rem; ---toast-color: ; ---toast-bg: rgba(255, 255, 255, 0.85); ---toast-border-width: 1px; ---toast-border-color: var(--border-color-translucent); ---toast-border-radius: 0.25rem; ---toast-box-shadow: 0 0.5rem 1rem var(--shadow-color-light); ---toast-header-color: hsl(210, 7%, 46%); ---toast-header-bg: rgba(var(--white-rgb), 0.85); ---toast-header-border-color: rgba(var(--black-rgb), var(--opacity-5)); - -/* ===== MODAL ===== */ ---modal-zindex: 1050; ---modal-width: 500px; ---modal-padding: 1rem; ---modal-margin: 0.5rem; ---modal-color: ; ---modal-bg: var(--body-bg); ---modal-border-color: var(--border-color-translucent); ---modal-border-width: 1px; ---modal-border-radius: 0.3rem; ---modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); ---modal-inner-border-radius: calc(0.3rem - 1px); ---modal-header-padding-x: 1rem; ---modal-header-padding-y: 1rem; ---modal-header-padding: 1rem 1rem; ---modal-header-border-color: var(--border-color); ---modal-header-border-width: 1px; ---modal-title-line-height: 1.5; ---modal-footer-gap: 0.5rem; ---modal-footer-bg: ; ---modal-footer-border-color: var(--border-color); ---modal-footer-border-width: 1px; - -/* ===== TOOLTIP ===== */ ---tooltip-zindex: 1070; ---tooltip-max-width: 200px; ---tooltip-padding-x: 0.5rem; ---tooltip-padding-y: 0.25rem; ---tooltip-margin: ; ---tooltip-font-size: 0.875rem; ---tooltip-color: var(--body-bg); ---tooltip-bg: hsl(0, 0%, 0%); ---tooltip-border-radius: 0.25rem; ---tooltip-opacity: 0.9; ---tooltip-arrow-width: 0.8rem; ---tooltip-arrow-height: 0.4rem; - -/* ===== POPOVER ===== */ ---popover-zindex: 1060; ---popover-max-width: 276px; ---popover-font-size: 0.875rem; ---popover-bg: var(--body-bg); ---popover-border-width: 1px; ---popover-border-color: var(--border-color-translucent); ---popover-border-radius: 0.3rem; ---popover-inner-border-radius: calc(0.3rem - 1px); ---popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); ---popover-header-padding-x: 1rem; ---popover-header-padding-y: 0.5rem; ---popover-header-font-size: 1rem; ---popover-header-color: ; ---popover-header-bg: #f0f0f0; ---popover-body-padding-x: 1rem; ---popover-body-padding-y: 1rem; ---popover-body-color: hsl(210, 11%, 15%); ---popover-arrow-width: 1rem; ---popover-arrow-height: 0.5rem; ---popover-arrow-border: var(--popover-border-color); - -/* ===== SPINNER ===== */ ---spinner-width: 2rem; ---spinner-height: 2rem; ---spinner-vertical-align: -0.125em; ---spinner-border-width: 0.25em; ---spinner-animation-speed: 0.75s; - -/* ===== NAV TABS ===== */ ---nav-tabs-border-width: 1px; ---nav-tabs-border-color: hsl(210, 14%, 89%); ---nav-tabs-border-radius: 0.25rem; ---nav-tabs-link-active-color: hsl(210, 9%, 31%); ---nav-tabs-link-active-bg: var(--body-bg); ---nav-tabs-link-active-border-color: hsl(210, 14%, 89%) hsl(210, 14%, 89%) var(--body-bg); - -/* ===== NAV PILLS ===== */ ---nav-pills-border-radius: 0.25rem; ---nav-pills-link-active-color: var(--body-bg); ---nav-pills-link-active-bg: hsl(240, 98%, 17%); - -/* ===== TABLE ===== */ ---table-color: var(--body-color); ---table-bg: transparent; ---table-border-color: var(--border-color); ---table-accent-bg: transparent; ---table-striped-color: var(--body-color); ---table-striped-bg: rgba(var(--black-rgb), var(--opacity-5)); ---table-active-color: var(--body-color); ---table-active-bg: rgba(var(--black-rgb), 0.075); - -/* ===== FOOTER ===== */ ---footer-padding-top: 1rem; ---footer-padding-bottom: 80px; ---footer-grid-padding-y: 2.5rem; ---footer-grid-padding-x: 0.5em; - -/* ===== BACKDROP ===== */ ---backdrop-zindex: 1040; ---backdrop-bg: hsl(0, 0%, 0%); ---backdrop-opacity: 0.5; -} - -.btn { ---btn-padding-x: 1rem; ---btn-padding-y: 0.6rem; ---btn-font-family: inherit; ---btn-font-size: 1rem; ---btn-font-weight: 400; ---btn-line-height: 1.5; ---btn-color: hsl(210, 11%, 15%); ---btn-bg: var(--body-bg); ---btn-border-width: 1px; ---btn-border-color: transparent; ---btn-border-radius: 0.25rem; ---btn-active-border-color: transparent; ---btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); ---btn-disabled-opacity: 0.65; ---btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); -display: inline-block; -padding: var(--btn-padding-y) var(--btn-padding-x); -font-family: var(--btn-font-family); -font-size: var(--btn-font-size); -font-weight: var(--btn-font-weight); -line-height: var(--btn-line-height); -color: var(--btn-color); -text-align: center; -text-decoration: none; -vertical-align: middle; -cursor: pointer; --webkit-user-select: none; --moz-user-select: none; --ms-user-select: none; -user-select: none; -border: var(--btn-border-width) solid var(--btn-border-color); -border-radius: var(--btn-border-radius); -background-color: var(--btn-bg); --webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; -transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; --o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; -} - -.btn-primary { ---btn-color: #fff; ---btn-bg: #112855; ---btn-border-color: #112855; ---btn-hover-color: #fff; ---btn-hover-bg: #0d1f42; ---btn-hover-border-color: #0a1a38; ---btn-focus-shadow-rgb: 17, 40, 85; ---btn-active-color: #fff; ---btn-active-bg: #0a1a38; ---btn-active-border-color: #08152e; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #fff; ---btn-disabled-bg: #112855; ---btn-disabled-border-color: #112855; -} - -.btn-secondary { ---btn-color: var(--body-bg); ---btn-bg: var(--nav-bg-color); ---btn-border-color: hsl(210, 7%, 46%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #5d636b; ---btn-hover-border-color: #575e65; ---btn-focus-shadow-rgb: gray; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #575e65; ---btn-active-border-color: #52585f; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(210, 7%, 46%); ---btn-disabled-border-color: hsl(210, 7%, 46%); -} - -.btn-success { ---btn-color: hsl(0, 0%, 100%); ---btn-bg: hsl(120, 32%, 39%); ---btn-border-color: hsl(120, 32%, 39%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #3a6f3a; ---btn-hover-border-color: #366936; ---btn-focus-shadow-rgb: 96, 150, 96; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #366936; ---btn-active-border-color: #336233; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(120, 32%, 39%); ---btn-disabled-border-color: hsl(120, 32%, 39%); -} - -.btn-info { ---btn-color: hsl(0, 0%, 100%); ---btn-bg: hsl(207, 49%, 37%); ---btn-border-color: hsl(207, 49%, 37%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #295478; ---btn-hover-border-color: #264f71; ---btn-focus-shadow-rgb: 79, 122, 158; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #264f71; ---btn-active-border-color: #244a6a; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(207, 49%, 37%); ---btn-disabled-border-color: hsl(207, 49%, 37%); -} - -.btn-warning { ---btn-color: hsl(0, 0%, 100%); ---btn-bg: hsl(34, 100%, 34%); ---btn-border-color: hsl(34, 100%, 34%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #935300; ---btn-hover-border-color: #8a4e00; ---btn-focus-shadow-rgb: 185, 122, 38; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #8a4e00; ---btn-active-border-color: #824a00; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(34, 100%, 34%); ---btn-disabled-border-color: hsl(34, 100%, 34%); -} - -.btn-danger { ---btn-color: #fff; ---btn-bg: #df4830; ---btn-border-color: #df4830; ---btn-hover-color: #fff; ---btn-hover-bg: #c03e28; ---btn-hover-border-color: #b53b26; ---btn-focus-shadow-rgb: 223, 72, 48; ---btn-active-color: #fff; ---btn-active-bg: #b53b26; ---btn-active-border-color: #aa3823; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #fff; ---btn-disabled-bg: #df4830; ---btn-disabled-border-color: #df4830; -} - -.btn-light { ---btn-color: hsl(0, 0%, 0%); ---btn-bg: hsl(210, 17%, 98%); ---btn-border-color: hsl(210, 17%, 98%); ---btn-hover-color: hsl(0, 0%, 0%); ---btn-hover-bg: #d4d5d5; ---btn-hover-border-color: #c7c8c9; ---btn-focus-shadow-rgb: 212, 213, 213; ---btn-active-color: hsl(0, 0%, 0%); ---btn-active-bg: #c7c8c9; ---btn-active-border-color: #bbbcbc; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 0%); ---btn-disabled-bg: hsl(210, 17%, 98%); ---btn-disabled-border-color: hsl(210, 17%, 98%); -} - -.btn-dark { ---btn-color: hsl(0, 0%, 100%); ---btn-bg: hsl(210, 10%, 23%); ---btn-border-color: hsl(210, 10%, 23%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #53585e; ---btn-hover-border-color: #494f54; ---btn-focus-shadow-rgb: 83, 88, 94; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #5d6267; ---btn-active-border-color: #494f54; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(210, 10%, 23%); ---btn-disabled-border-color: hsl(210, 10%, 23%); -} - -.btn-outline-primary { ---btn-color: #112855; ---btn-border-color: #112855; ---btn-hover-color: #fff; ---btn-hover-bg: #112855; ---btn-hover-border-color: #112855; ---btn-focus-shadow-rgb: 17, 40, 85; ---btn-active-color: #fff; ---btn-active-bg: #112855; ---btn-active-border-color: #112855; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #112855; ---btn-disabled-bg: transparent; ---btn-disabled-border-color: #112855; ---gradient: none; -} - -.btn-outline-secondary { ---btn-color: hsl(210, 7%, 46%); ---btn-border-color: hsl(210, 7%, 46%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(210, 7%, 46%); ---btn-hover-border-color: hsl(210, 7%, 46%); ---btn-focus-shadow-rgb: 109, 117, 126; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(210, 7%, 46%); ---btn-active-border-color: hsl(210, 7%, 46%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(210, 7%, 46%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(210, 7%, 46%); ---gradient: none; -} - -.btn-outline-success { ---btn-color: hsl(120, 32%, 39%); ---btn-border-color: hsl(120, 32%, 39%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(120, 32%, 39%); ---btn-hover-border-color: hsl(120, 32%, 39%); ---btn-focus-shadow-rgb: 68, 131, 68; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(120, 32%, 39%); ---btn-active-border-color: hsl(120, 32%, 39%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(120, 32%, 39%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(120, 32%, 39%); ---gradient: none; -} - -.btn-outline-info { ---btn-color: hsl(207, 49%, 37%); ---btn-border-color: hsl(207, 49%, 37%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(207, 49%, 37%); ---btn-hover-border-color: hsl(207, 49%, 37%); ---btn-focus-shadow-rgb: 48, 99, 141; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(207, 49%, 37%); ---btn-active-border-color: hsl(207, 49%, 37%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(207, 49%, 37%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(207, 49%, 37%); ---gradient: none; -} - -.btn-outline-warning { ---btn-color: hsl(34, 100%, 34%); ---btn-border-color: hsl(34, 100%, 34%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(34, 100%, 34%); ---btn-hover-border-color: hsl(34, 100%, 34%); ---btn-focus-shadow-rgb: 173, 98, 0; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(34, 100%, 34%); ---btn-active-border-color: hsl(34, 100%, 34%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(34, 100%, 34%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(34, 100%, 34%); ---gradient: none; -} - -.btn-outline-danger { ---btn-color: #df4830; ---btn-border-color: #df4830; ---btn-hover-color: #fff; ---btn-hover-bg: #df4830; ---btn-hover-border-color: #df4830; ---btn-focus-shadow-rgb: 223, 72, 48; ---btn-active-color: #fff; ---btn-active-bg: #df4830; ---btn-active-border-color: #df4830; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #df4830; ---btn-disabled-bg: transparent; ---btn-disabled-border-color: #df4830; ---gradient: none; -} - -.btn-outline-light { ---btn-color: hsl(210, 17%, 98%); ---btn-border-color: hsl(210, 17%, 98%); ---btn-hover-color: hsl(0, 0%, 0%); ---btn-hover-bg: hsl(210, 17%, 98%); ---btn-hover-border-color: hsl(210, 17%, 98%); ---btn-focus-shadow-rgb: 249, 250, 251; ---btn-active-color: hsl(0, 0%, 0%); ---btn-active-bg: hsl(210, 17%, 98%); ---btn-active-border-color: hsl(210, 17%, 98%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(210, 17%, 98%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(210, 17%, 98%); ---gradient: none; -} - -.btn-outline-dark { ---btn-color: hsl(210, 10%, 23%); ---btn-border-color: hsl(210, 10%, 23%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(210, 10%, 23%); ---btn-hover-border-color: hsl(210, 10%, 23%); ---btn-focus-shadow-rgb: 53, 59, 65; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(210, 10%, 23%); ---btn-active-border-color: hsl(210, 10%, 23%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(210, 10%, 23%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(210, 10%, 23%); ---gradient: none; -} - -.btn-link { ---btn-font-weight: 400; ---btn-color: var(--link-color); ---btn-bg: transparent; ---btn-border-color: transparent; ---btn-hover-color: var(--link-hover-color); ---btn-hover-border-color: transparent; ---btn-active-color: var(--link-hover-color); ---btn-active-border-color: transparent; ---btn-disabled-color: hsl(210, 7%, 46%); ---btn-disabled-border-color: transparent; ---btn-box-shadow: none; ---btn-focus-shadow-rgb: 39, 39, 111; -text-decoration: underline; -} diff --git a/templates/dark.custom.css b/templates/dark.custom.css deleted file mode 100644 index e8beac5..0000000 --- a/templates/dark.custom.css +++ /dev/null @@ -1,327 +0,0 @@ -@charset "UTF-8"; -/* Copyright (C) 2026 Moko Consulting - - This file is part of a Moko Consulting project. - - SPDX-License-Identifier: GPL-3.0-or-later - - - - # FILE INFORMATION - DEFGROUP: Joomla.Template.Site - INGROUP: MokoCassiopeia.Templates - PATH: ./templates/dark.custom.css - VERSION: 03.09.03 - BRIEF: Custom dark theme color template with Bootstrap button definitions - */ - -/* ----------------------------------------------- - * CUSTOM DARK THEME TEMPLATE - * - * Copy this file to: - * src/media/css/theme/dark.custom.css - * - * Then register it in src/joomla.asset.json under - * template.dark.custom asset. - * --------------------------------------------- */ - -:root[data-bs-theme='dark'] { - /* ===== BRAND COLORS (Customize these) ===== */ - --color-primary: #3399ff; - --accent-color-primary: #66b3ff; - --accent-color-secondary: #99ccff; - - /* ===== LINKS ===== */ - --link-color: #6bb3ff; - --link-hover-color: #99ccff; - - /* ===== BODY & TYPOGRAPHY ===== */ - --body-color: #e9ecef; - --body-bg: #0e1318; - - /* ===== BOOTSTRAP STATE COLORS ===== */ - --success: #5cb85c; - --info: #5bc0de; - --warning: #ffc107; - --danger: #d9534f; - - /* ===== NAVIGATION ===== */ - --nav-bg-color: var(--color-primary); - --nav-text-color: #ffffff; -} - -/* ===== BOOTSTRAP BUTTON VARIANTS ===== */ - -.btn-primary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: var(--color-primary); - --btn-border-color: var(--color-primary); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #2680e6; - --btn-hover-border-color: #1f73d9; - --btn-focus-shadow-rgb: 82, 168, 255; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #1f73d9; - --btn-active-border-color: #1a66cc; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: var(--color-primary); - --btn-disabled-border-color: var(--color-primary); -} - -.btn-secondary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: #6c757d; - --btn-border-color: #6c757d; - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #5c636a; - --btn-hover-border-color: #565e64; - --btn-focus-shadow-rgb: 130, 138, 145; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #565e64; - --btn-active-border-color: #51585e; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: #6c757d; - --btn-disabled-border-color: #6c757d; -} - -.btn-success { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: var(--success); - --btn-border-color: var(--success); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #4cae4c; - --btn-hover-border-color: #449d44; - --btn-focus-shadow-rgb: 113, 198, 113; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #449d44; - --btn-active-border-color: #398439; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: var(--success); - --btn-disabled-border-color: var(--success); -} - -.btn-info { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: var(--info); - --btn-border-color: var(--info); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #46b8da; - --btn-hover-border-color: #31b0d5; - --btn-focus-shadow-rgb: 116, 204, 233; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #31b0d5; - --btn-active-border-color: #269abc; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: var(--info); - --btn-disabled-border-color: var(--info); -} - -.btn-warning { - --btn-color: hsl(0, 0%, 0%); - --btn-bg: var(--warning); - --btn-border-color: var(--warning); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: #edb100; - --btn-hover-border-color: #d39e00; - --btn-focus-shadow-rgb: 222, 170, 12; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: #d39e00; - --btn-active-border-color: #c69500; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 0%); - --btn-disabled-bg: var(--warning); - --btn-disabled-border-color: var(--warning); -} - -.btn-danger { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: var(--danger); - --btn-border-color: var(--danger); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #d43f3a; - --btn-hover-border-color: #c9302c; - --btn-focus-shadow-rgb: 223, 109, 105; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #c9302c; - --btn-active-border-color: #ac2925; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: var(--danger); - --btn-disabled-border-color: var(--danger); -} - -.btn-light { - --btn-color: hsl(0, 0%, 0%); - --btn-bg: #e9ecef; - --btn-border-color: #e9ecef; - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: #d3d6d9; - --btn-hover-border-color: #c8cbcf; - --btn-focus-shadow-rgb: 204, 207, 210; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: #c8cbcf; - --btn-active-border-color: #bdc1c5; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 0%); - --btn-disabled-bg: #e9ecef; - --btn-disabled-border-color: #e9ecef; -} - -.btn-dark { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: #2c3136; - --btn-border-color: #2c3136; - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #1e2124; - --btn-hover-border-color: #191c1f; - --btn-focus-shadow-rgb: 70, 75, 80; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #191c1f; - --btn-active-border-color: #14161a; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: #2c3136; - --btn-disabled-border-color: #2c3136; -} - -/* ===== OUTLINE BUTTON VARIANTS ===== */ - -.btn-outline-primary { - --btn-color: var(--color-primary); - --btn-border-color: var(--color-primary); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: var(--color-primary); - --btn-hover-border-color: var(--color-primary); - --btn-focus-shadow-rgb: 82, 168, 255; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: var(--color-primary); - --btn-active-border-color: var(--color-primary); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: var(--color-primary); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: var(--color-primary); - --gradient: none; -} - -.btn-outline-secondary { - --btn-color: #8c959f; - --btn-border-color: #8c959f; - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: #8c959f; - --btn-hover-border-color: #8c959f; - --btn-focus-shadow-rgb: 150, 158, 167; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: #8c959f; - --btn-active-border-color: #8c959f; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: #8c959f; - --btn-disabled-bg: transparent; - --btn-disabled-border-color: #8c959f; - --gradient: none; -} - -.btn-outline-success { - --btn-color: var(--success); - --btn-border-color: var(--success); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: var(--success); - --btn-hover-border-color: var(--success); - --btn-focus-shadow-rgb: 113, 198, 113; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: var(--success); - --btn-active-border-color: var(--success); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: var(--success); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: var(--success); - --gradient: none; -} - -.btn-outline-info { - --btn-color: var(--info); - --btn-border-color: var(--info); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: var(--info); - --btn-hover-border-color: var(--info); - --btn-focus-shadow-rgb: 116, 204, 233; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: var(--info); - --btn-active-border-color: var(--info); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: var(--info); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: var(--info); - --gradient: none; -} - -.btn-outline-warning { - --btn-color: var(--warning); - --btn-border-color: var(--warning); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: var(--warning); - --btn-hover-border-color: var(--warning); - --btn-focus-shadow-rgb: 222, 170, 12; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: var(--warning); - --btn-active-border-color: var(--warning); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: var(--warning); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: var(--warning); - --gradient: none; -} - -.btn-outline-danger { - --btn-color: var(--danger); - --btn-border-color: var(--danger); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: var(--danger); - --btn-hover-border-color: var(--danger); - --btn-focus-shadow-rgb: 223, 109, 105; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: var(--danger); - --btn-active-border-color: var(--danger); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: var(--danger); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: var(--danger); - --gradient: none; -} - -.btn-outline-light { - --btn-color: #e9ecef; - --btn-border-color: #e9ecef; - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: #e9ecef; - --btn-hover-border-color: #e9ecef; - --btn-focus-shadow-rgb: 204, 207, 210; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: #e9ecef; - --btn-active-border-color: #e9ecef; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: #e9ecef; - --btn-disabled-bg: transparent; - --btn-disabled-border-color: #e9ecef; - --gradient: none; -} - -.btn-outline-dark { - --btn-color: #4a5057; - --btn-border-color: #4a5057; - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #4a5057; - --btn-hover-border-color: #4a5057; - --btn-focus-shadow-rgb: 90, 95, 100; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #4a5057; - --btn-active-border-color: #4a5057; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: #4a5057; - --btn-disabled-bg: transparent; - --btn-disabled-border-color: #4a5057; - --gradient: none; -} diff --git a/templates/light.custom.css b/templates/light.custom.css deleted file mode 100644 index 44bed61..0000000 --- a/templates/light.custom.css +++ /dev/null @@ -1,327 +0,0 @@ -@charset "UTF-8"; -/* Copyright (C) 2026 Moko Consulting - - This file is part of a Moko Consulting project. - - SPDX-License-Identifier: GPL-3.0-or-later - - - - # FILE INFORMATION - DEFGROUP: Joomla.Template.Site - INGROUP: MokoCassiopeia.Templates - PATH: ./templates/light.custom.css - VERSION: 03.09.03 - BRIEF: Custom light theme color template with Bootstrap button definitions - */ - -/* ----------------------------------------------- - * CUSTOM LIGHT THEME TEMPLATE - * - * Copy this file to: - * src/media/css/theme/light.custom.css - * - * Then register it in src/joomla.asset.json under - * template.light.custom asset. - * --------------------------------------------- */ - -:root[data-bs-theme="light"] { - /* ===== BRAND COLORS (Customize these) ===== */ - --color-primary: #0066cc; - --accent-color-primary: #3399ff; - --accent-color-secondary: #66b3ff; - - /* ===== LINKS ===== */ - --link-color: #0066cc; - --link-hover-color: #0052a3; - - /* ===== BODY & TYPOGRAPHY ===== */ - --body-color: #212529; - --body-bg: #ffffff; - - /* ===== BOOTSTRAP STATE COLORS ===== */ - --success: #28a745; - --info: #17a2b8; - --warning: #ffc107; - --danger: #dc3545; - - /* ===== NAVIGATION ===== */ - --nav-bg-color: var(--color-primary); - --nav-text-color: #ffffff; -} - -/* ===== BOOTSTRAP BUTTON VARIANTS ===== */ - -.btn-primary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: var(--color-primary); - --btn-border-color: var(--color-primary); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #0052a3; - --btn-hover-border-color: #004d99; - --btn-focus-shadow-rgb: 38, 128, 217; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #004d99; - --btn-active-border-color: #004788; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: var(--color-primary); - --btn-disabled-border-color: var(--color-primary); -} - -.btn-secondary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: #6c757d; - --btn-border-color: #6c757d; - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #5c636a; - --btn-hover-border-color: #565e64; - --btn-focus-shadow-rgb: 130, 138, 145; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #565e64; - --btn-active-border-color: #51585e; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: #6c757d; - --btn-disabled-border-color: #6c757d; -} - -.btn-success { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: var(--success); - --btn-border-color: var(--success); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #218838; - --btn-hover-border-color: #1e7e34; - --btn-focus-shadow-rgb: 72, 180, 97; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #1e7e34; - --btn-active-border-color: #1c7430; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: var(--success); - --btn-disabled-border-color: var(--success); -} - -.btn-info { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: var(--info); - --btn-border-color: var(--info); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #138496; - --btn-hover-border-color: #117a8b; - --btn-focus-shadow-rgb: 58, 176, 195; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #117a8b; - --btn-active-border-color: #10707f; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: var(--info); - --btn-disabled-border-color: var(--info); -} - -.btn-warning { - --btn-color: hsl(0, 0%, 0%); - --btn-bg: var(--warning); - --btn-border-color: var(--warning); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: #e0a800; - --btn-hover-border-color: #d39e00; - --btn-focus-shadow-rgb: 222, 170, 12; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: #d39e00; - --btn-active-border-color: #c69500; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 0%); - --btn-disabled-bg: var(--warning); - --btn-disabled-border-color: var(--warning); -} - -.btn-danger { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: var(--danger); - --btn-border-color: var(--danger); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #c82333; - --btn-hover-border-color: #bd2130; - --btn-focus-shadow-rgb: 225, 83, 97; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #bd2130; - --btn-active-border-color: #b21f2d; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: var(--danger); - --btn-disabled-border-color: var(--danger); -} - -.btn-light { - --btn-color: hsl(0, 0%, 0%); - --btn-bg: #f8f9fa; - --btn-border-color: #f8f9fa; - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: #e2e6ea; - --btn-hover-border-color: #dae0e5; - --btn-focus-shadow-rgb: 216, 217, 219; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: #dae0e5; - --btn-active-border-color: #d3d9df; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 0%); - --btn-disabled-bg: #f8f9fa; - --btn-disabled-border-color: #f8f9fa; -} - -.btn-dark { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: #343a40; - --btn-border-color: #343a40; - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #23272b; - --btn-hover-border-color: #1d2124; - --btn-focus-shadow-rgb: 82, 88, 93; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #1d2124; - --btn-active-border-color: #171a1d; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: #343a40; - --btn-disabled-border-color: #343a40; -} - -/* ===== OUTLINE BUTTON VARIANTS ===== */ - -.btn-outline-primary { - --btn-color: var(--color-primary); - --btn-border-color: var(--color-primary); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: var(--color-primary); - --btn-hover-border-color: var(--color-primary); - --btn-focus-shadow-rgb: 38, 128, 217; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: var(--color-primary); - --btn-active-border-color: var(--color-primary); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: var(--color-primary); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: var(--color-primary); - --gradient: none; -} - -.btn-outline-secondary { - --btn-color: #6c757d; - --btn-border-color: #6c757d; - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #6c757d; - --btn-hover-border-color: #6c757d; - --btn-focus-shadow-rgb: 130, 138, 145; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #6c757d; - --btn-active-border-color: #6c757d; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: #6c757d; - --btn-disabled-bg: transparent; - --btn-disabled-border-color: #6c757d; - --gradient: none; -} - -.btn-outline-success { - --btn-color: var(--success); - --btn-border-color: var(--success); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: var(--success); - --btn-hover-border-color: var(--success); - --btn-focus-shadow-rgb: 72, 180, 97; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: var(--success); - --btn-active-border-color: var(--success); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: var(--success); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: var(--success); - --gradient: none; -} - -.btn-outline-info { - --btn-color: var(--info); - --btn-border-color: var(--info); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: var(--info); - --btn-hover-border-color: var(--info); - --btn-focus-shadow-rgb: 58, 176, 195; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: var(--info); - --btn-active-border-color: var(--info); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: var(--info); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: var(--info); - --gradient: none; -} - -.btn-outline-warning { - --btn-color: var(--warning); - --btn-border-color: var(--warning); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: var(--warning); - --btn-hover-border-color: var(--warning); - --btn-focus-shadow-rgb: 222, 170, 12; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: var(--warning); - --btn-active-border-color: var(--warning); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: var(--warning); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: var(--warning); - --gradient: none; -} - -.btn-outline-danger { - --btn-color: var(--danger); - --btn-border-color: var(--danger); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: var(--danger); - --btn-hover-border-color: var(--danger); - --btn-focus-shadow-rgb: 225, 83, 97; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: var(--danger); - --btn-active-border-color: var(--danger); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: var(--danger); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: var(--danger); - --gradient: none; -} - -.btn-outline-light { - --btn-color: #f8f9fa; - --btn-border-color: #f8f9fa; - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: #f8f9fa; - --btn-hover-border-color: #f8f9fa; - --btn-focus-shadow-rgb: 216, 217, 219; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: #f8f9fa; - --btn-active-border-color: #f8f9fa; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: #f8f9fa; - --btn-disabled-bg: transparent; - --btn-disabled-border-color: #f8f9fa; - --gradient: none; -} - -.btn-outline-dark { - --btn-color: #343a40; - --btn-border-color: #343a40; - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #343a40; - --btn-hover-border-color: #343a40; - --btn-focus-shadow-rgb: 82, 88, 93; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #343a40; - --btn-active-border-color: #343a40; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: #343a40; - --btn-disabled-bg: transparent; - --btn-disabled-border-color: #343a40; - --gradient: none; -} diff --git a/update.xml b/update.xml index d67263e..1d28ab5 100644 --- a/update.xml +++ b/update.xml @@ -1,39 +1,39 @@ - - - - {{EXTENSION_NAME}} - MokoCassiopeia — Moko Consulting Joomla extension - {{EXTENSION_ELEMENT}} - {{EXTENSION_TYPE}} - {{VERSION}} - - - https://git.mokoconsulting.tech/mokoconsulting-tech/MokoCassiopeia/releases/download/v{{VERSION}}/{{EXTENSION_ELEMENT}}.zip - - - https://github.com/mokoconsulting-tech/MokoCassiopeia/releases/download/v{{VERSION}}/{{EXTENSION_ELEMENT}}.zip - - - - 8.1 - + + + + {{EXTENSION_NAME}} + MokoCassiopeia — Moko Consulting Joomla extension + {{EXTENSION_ELEMENT}} + {{EXTENSION_TYPE}} + {{VERSION}} + + + https://git.mokoconsulting.tech/mokoconsulting-tech/MokoCassiopeia/releases/download/v{{VERSION}}/{{EXTENSION_ELEMENT}}.zip + + + https://github.com/mokoconsulting-tech/MokoCassiopeia/releases/download/v{{VERSION}}/{{EXTENSION_ELEMENT}}.zip + + + + 8.1 + \ No newline at end of file diff --git a/updates.xml b/updates.xml index 846ae06..5ea39c5 100644 --- a/updates.xml +++ b/updates.xml @@ -1,7 +1,7 @@ @@ -13,11 +13,11 @@ mokocassiopeia template site - 03.10.06 + 03.10.07 2026-04-18 https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/tag/development - https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/v03/mokocassiopeia-03.10.06.zip + https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/v03/mokocassiopeia-03.10.07.zip 78aebde056dcba369945c851fe1914d5bede9f2cbabb26e87b8d6379d155502d development @@ -34,11 +34,11 @@ mokocassiopeia template site - 03.10.06 + 03.10.07 2026-04-18 https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/tag/alpha - https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/v03/mokocassiopeia-03.10.06.zip + https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/v03/mokocassiopeia-03.10.07.zip 78aebde056dcba369945c851fe1914d5bede9f2cbabb26e87b8d6379d155502d alpha @@ -55,11 +55,11 @@ mokocassiopeia template site - 03.10.06 + 03.10.07 2026-04-18 https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/tag/beta - https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/v03/mokocassiopeia-03.10.06.zip + https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/v03/mokocassiopeia-03.10.07.zip 78aebde056dcba369945c851fe1914d5bede9f2cbabb26e87b8d6379d155502d beta @@ -76,12 +76,12 @@ mokocassiopeia template site - 03.10.06 + 03.10.07 2026-04-18 https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/tag/release-candidate - https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/v03/mokocassiopeia-03.10.06.zip - https://github.com/mokoconsulting-tech/MokoCassiopeia/releases/download/v03/mokocassiopeia-03.10.06.zip + https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/v03/mokocassiopeia-03.10.07.zip + https://github.com/mokoconsulting-tech/MokoCassiopeia/releases/download/v03/mokocassiopeia-03.10.07.zip 78aebde056dcba369945c851fe1914d5bede9f2cbabb26e87b8d6379d155502d rc @@ -98,12 +98,12 @@ mokocassiopeia template site - 03.10.06 + 03.10.07 2026-04-18 https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/tag/v03 - https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/v03/mokocassiopeia-03.10.06.zip - https://github.com/mokoconsulting-tech/MokoCassiopeia/releases/download/v03/mokocassiopeia-03.10.06.zip + https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/v03/mokocassiopeia-03.10.07.zip + https://github.com/mokoconsulting-tech/MokoCassiopeia/releases/download/v03/mokocassiopeia-03.10.07.zip 78aebde056dcba369945c851fe1914d5bede9f2cbabb26e87b8d6379d155502d stable