Compare commits
17 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 jmiller
|
df395fc82b
|
||
|
jmiller
|
9d141411bd | ||
|
jmiller
|
e519677fcd
|
||
|
jmiller
|
e0c6451fac
|
||
|
jmiller
|
ada552aebf | ||
|
jmiller
|
5d2ec281b7
|
||
|
jmiller
|
2a99ded829 | ||
|
jmiller
|
ec65fac21f
|
||
|
jmiller
|
e9b46f2e51 | ||
|
jmiller
|
0f31f54e2b
|
||
|
jmiller
|
2e86f25977 | ||
|
jmiller
|
fefe9d157c | ||
|
jmiller
|
113e1bfb5e | ||
|
jmiller
|
90923a5ca1 | ||
|
jmiller
|
c71bb0c9af
|
||
|
jmiller
|
dee280a98d | ||
|
jmiller
|
7174fd0007 |
@@ -27,8 +27,8 @@ body:
|
||||
- type: input
|
||||
id: gitea-ver
|
||||
attributes:
|
||||
label: Gitea Version
|
||||
description: Gitea version (or commit reference) of your instance
|
||||
label: MokoGIT Version
|
||||
description: MokoGIT version (or commit reference) of your instance
|
||||
validations:
|
||||
required: true
|
||||
- type: dropdown
|
||||
|
||||
+14
@@ -108,6 +108,7 @@ prime/
|
||||
|
||||
# Ignore AI/LLM instruction files
|
||||
/.claude/
|
||||
.gemini/
|
||||
/.cursorrules
|
||||
/.cursor/
|
||||
/.goosehints
|
||||
@@ -130,3 +131,16 @@ Makefile.local
|
||||
|
||||
# Local clone of the MCP server (separate repo, not a submodule of this project)
|
||||
/mcp-mokogit-api/
|
||||
|
||||
# ============================================================
|
||||
# AI client instructions (not version controlled)
|
||||
# ============================================================
|
||||
/GEMINI.md
|
||||
/MOKOAI.md
|
||||
.mokoai/
|
||||
|
||||
# ============================================================
|
||||
# Local wiki clone (not version controlled)
|
||||
# ============================================================
|
||||
wiki/
|
||||
docs/
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
incomplete details will be handled as an invalid report.
|
||||
-->
|
||||
|
||||
- Gitea version (or commit ref):
|
||||
- MokoGIT version (or commit ref):
|
||||
- Git version:
|
||||
- Operating system:
|
||||
<!-- Please include information on whether you built gitea yourself, used one of our downloads or are using some other package -->
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
# Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
|
||||
#
|
||||
# SPDX-License-Identifier: GPL-3.0-or-later
|
||||
#
|
||||
# FILE INFORMATION
|
||||
# DEFGROUP: MokoGIT.Workflow
|
||||
# INGROUP: MokoGIT
|
||||
# REPO: https://git.mokoconsulting.tech/MokoConsulting/MokoGIT
|
||||
# PATH: /.mokogit/workflows/sync-mokoonyx-theme.yml
|
||||
# VERSION: 01.00.00
|
||||
# BRIEF: Import MokoOnyx template CSS + standard light/dark themes into the web UI
|
||||
# theme layer on every push to dev/main (and on demand). MokoGIT-specific
|
||||
# (only this repo has a web UI to theme), so it is NOT a Template-* concern.
|
||||
|
||||
name: "MokoGIT: Sync MokoOnyx Theme"
|
||||
|
||||
on:
|
||||
workflow_dispatch:
|
||||
push:
|
||||
branches:
|
||||
- dev
|
||||
- main
|
||||
|
||||
concurrency:
|
||||
group: mokoonyx-theme-sync-${{ github.ref_name }}
|
||||
cancel-in-progress: false
|
||||
|
||||
jobs:
|
||||
sync:
|
||||
name: Vendor MokoOnyx theme CSS
|
||||
runs-on: ubuntu-latest
|
||||
# [skip ci] on the sync commit prevents this job from re-triggering itself.
|
||||
if: ${{ !contains(github.event.head_commit.message, '[skip ci]') }}
|
||||
steps:
|
||||
- name: Checkout MokoGIT (pushed branch, with push token)
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
ref: ${{ github.ref_name }}
|
||||
token: ${{ secrets.MOKOGIT_TOKEN }}
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Clone MokoOnyx (source of truth for the site design)
|
||||
env:
|
||||
MOKOGIT_TOKEN: ${{ secrets.MOKOGIT_TOKEN }}
|
||||
run: |
|
||||
MOKOGIT_URL="${{ vars.GITEA_URL || 'https://git.mokoconsulting.tech' }}"
|
||||
ORG="${{ vars.GITEA_ORG || github.repository_owner }}"
|
||||
git clone --depth 1 "${MOKOGIT_URL}/${ORG}/MokoOnyx.git" /tmp/mokoonyx
|
||||
|
||||
- name: Vendor template CSS + standard/custom themes
|
||||
run: |
|
||||
set -euo pipefail
|
||||
DEST="web_src/css/vendor/mokoonyx"
|
||||
SRC="/tmp/mokoonyx/source"
|
||||
mkdir -p "$DEST"
|
||||
# Raw, verbatim vendored assets (provenance kept; template.css is the full
|
||||
# Bootstrap bundle — vendored for reference, NOT bundled into the UI).
|
||||
cp "$SRC/media/css/template.css" "$DEST/template.css"
|
||||
cp "$SRC/media/css/theme/light.standard.css" "$DEST/light.standard.css"
|
||||
cp "$SRC/media/css/theme/dark.standard.css" "$DEST/dark.standard.css"
|
||||
cp "$SRC/templates/light.custom.css" "$DEST/light.custom.css"
|
||||
cp "$SRC/templates/dark.custom.css" "$DEST/dark.custom.css"
|
||||
|
||||
- name: Extract tokens-only, re-scoped to :root (safe to @import)
|
||||
run: |
|
||||
set -euo pipefail
|
||||
DEST="web_src/css/vendor/mokoonyx"
|
||||
# MokoOnyx custom.css mixes :root[data-bs-theme="X"] token blocks with
|
||||
# Bootstrap component classes (.btn*, etc). We extract ONLY the token block
|
||||
# and rewrite the Bootstrap data-bs-theme selector to :root so the tokens
|
||||
# apply inside the (single) active Gitea theme file — and no Bootstrap
|
||||
# component classes leak in to collide with Fomantic UI.
|
||||
for t in light dark; do
|
||||
awk -v t="$t" '
|
||||
/:root\[data-bs-theme=/ {print "/* Auto-extracted from vendor/mokoonyx/"t".custom.css :root[data-bs-theme] — re-scoped to :root. DO NOT hand-edit. */"; print ":root {"; f=1; next}
|
||||
f && /^\}/ {print "}"; f=0; next}
|
||||
f {print}
|
||||
' "$DEST/$t.custom.css" > "$DEST/$t.tokens.css"
|
||||
done
|
||||
|
||||
- name: Commit if changed
|
||||
env:
|
||||
MOKOGIT_TOKEN: ${{ secrets.MOKOGIT_TOKEN }}
|
||||
run: |
|
||||
set -euo pipefail
|
||||
git config user.name "git-actions[bot]"
|
||||
git config user.email "git-actions[bot]@mokoconsulting.tech"
|
||||
git add web_src/css/vendor/mokoonyx
|
||||
if git diff --cached --quiet; then
|
||||
echo "MokoOnyx theme CSS already up to date — nothing to commit."
|
||||
exit 0
|
||||
fi
|
||||
git commit -m "chore(theme): sync MokoOnyx theme CSS [skip ci]
|
||||
|
||||
Authored-by: Moko Consulting"
|
||||
git push origin "HEAD:${{ github.ref_name }}"
|
||||
+3
-3
@@ -112,7 +112,7 @@ func createPIDFile(pidPath string) {
|
||||
}
|
||||
|
||||
func showWebStartupMessage(msg string) {
|
||||
log.Info("Gitea version: %s%s", setting.AppVer, setting.AppBuiltWith)
|
||||
log.Info("MokoGIT version: %s%s", setting.AppVer, setting.AppBuiltWith)
|
||||
log.Info("* RunMode: %s", setting.RunMode)
|
||||
log.Info("* AppPath: %s", setting.AppPath)
|
||||
log.Info("* WorkPath: %s", setting.AppWorkPath)
|
||||
@@ -258,9 +258,9 @@ func runWeb(ctx context.Context, cmd *cli.Command) error {
|
||||
defer cancel()
|
||||
|
||||
if os.Getppid() > 1 && len(os.Getenv("LISTEN_FDS")) > 0 {
|
||||
log.Info("Restarting Gitea on PID: %d from parent PID: %d", os.Getpid(), os.Getppid())
|
||||
log.Info("Restarting MokoGIT on PID: %d from parent PID: %d", os.Getpid(), os.Getppid())
|
||||
} else {
|
||||
log.Info("Starting Gitea on PID: %d", os.Getpid())
|
||||
log.Info("Starting MokoGIT on PID: %d", os.Getpid())
|
||||
}
|
||||
|
||||
// Set pid file setting
|
||||
|
||||
@@ -1346,8 +1346,8 @@ LEVEL = Info
|
||||
;; Whether the email of the user should be shown in the Explore Users page
|
||||
;SHOW_USER_EMAIL = true
|
||||
;;
|
||||
;; Set the default theme for the Gitea install
|
||||
;DEFAULT_THEME = gitea-auto
|
||||
;; Set the default theme for the MokoGIT install
|
||||
;DEFAULT_THEME = mokogit-auto
|
||||
;;
|
||||
;; All available themes. Allow users select personalized themes regardless of the value of `DEFAULT_THEME`.
|
||||
;; Leave it empty to allow users to select any theme from "{CustomPath}/public/assets/css/theme-*.css"
|
||||
|
||||
@@ -447,6 +447,7 @@ func prepareMigrationTasks() []*migration {
|
||||
newMigration(367, "Add user allowlists to org protected branch", v1_27.AddUserAllowlistsToOrgProtectedBranch),
|
||||
newMigration(368, "Drop org from repo manifest (derived from org profile)", v1_27.DropOrgFromRepoManifest),
|
||||
newMigration(369, "Rename mokogitea-actions system user to mokogit-actions", v1_27.RenameActionsUserToMokoGit),
|
||||
newMigration(370, "Remap saved gitea-* user themes to mokogit-*", v1_27.RemapGiteaThemesToMokogit),
|
||||
}
|
||||
return preparedMigrations
|
||||
}
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
// Copyright 2026 Moko Consulting <hello@mokoconsulting.tech>
|
||||
// SPDX-License-Identifier: GPL-3.0-or-later
|
||||
|
||||
package v1_27
|
||||
|
||||
import "xorm.io/xorm"
|
||||
|
||||
// RemapGiteaThemesToMokogit rewrites each user's saved theme from the retired
|
||||
// upstream "gitea-*" theme names to their "mokogit-*" equivalents, part of the
|
||||
// MokoGitea -> MokoGIT rebrand. The branding rebrand deleted theme-gitea-*.css,
|
||||
// so any user still pointing at a gitea-* theme would load a now-missing
|
||||
// stylesheet (a blank/unstyled page). Each user's light/dark/auto preference is
|
||||
// preserved; the colorblind variants (which MokoGIT does not ship) collapse to
|
||||
// the matching base scheme. Idempotent: rows already on a mokogit-* value are
|
||||
// left untouched by the WHERE clause on the old name.
|
||||
func RemapGiteaThemesToMokogit(x *xorm.Engine) error {
|
||||
sess := x.NewSession()
|
||||
defer sess.Close()
|
||||
if err := sess.Begin(); err != nil {
|
||||
return err
|
||||
}
|
||||
remap := []struct{ old, new string }{
|
||||
{"gitea-auto", "mokogit-auto"},
|
||||
{"gitea-auto-colorblind", "mokogit-auto"},
|
||||
{"gitea-light", "mokogit-light"},
|
||||
{"gitea-light-colorblind", "mokogit-light"},
|
||||
{"gitea-dark", "mokogit-dark"},
|
||||
{"gitea-dark-colorblind", "mokogit-dark"},
|
||||
}
|
||||
for _, m := range remap {
|
||||
if _, err := sess.Exec("UPDATE `user` SET `theme` = ? WHERE `theme` = ?", m.new, m.old); err != nil {
|
||||
return err
|
||||
}
|
||||
}
|
||||
return sess.Commit()
|
||||
}
|
||||
@@ -50,7 +50,7 @@ func (g *Manager) start() {
|
||||
|
||||
g.isChild = len(os.Getenv(listenFDsEnv)) > 0 && os.Getppid() > 1
|
||||
|
||||
g.notify(statusMsg("Starting Gitea"))
|
||||
g.notify(statusMsg("Starting MokoGIT"))
|
||||
g.notify(pidMsg())
|
||||
go g.handleSignals(g.managerCtx)
|
||||
|
||||
|
||||
@@ -15,18 +15,29 @@ import (
|
||||
|
||||
const (
|
||||
EnvConfigKeyPrefixGitea = "GITEA__"
|
||||
EnvConfigKeySuffixFile = "__FILE"
|
||||
// EnvConfigKeyPrefixMokoGit is the MokoGIT-branded env override prefix. It is
|
||||
// accepted alongside the upstream GITEA__ prefix so config keeps working whether
|
||||
// the deployment sets GITEA__* or MOKOGIT__* (coordinated rebrand transition).
|
||||
EnvConfigKeyPrefixMokoGit = "MOKOGIT__"
|
||||
EnvConfigKeySuffixFile = "__FILE"
|
||||
)
|
||||
|
||||
// envConfigKeyPrefixes lists the accepted env-override prefixes. A given env var
|
||||
// starts with exactly one of them, so the order does not affect precedence.
|
||||
var envConfigKeyPrefixes = []string{EnvConfigKeyPrefixMokoGit, EnvConfigKeyPrefixGitea}
|
||||
|
||||
const escapeRegexpString = "_0[xX](([0-9a-fA-F][0-9a-fA-F])+)_"
|
||||
|
||||
var escapeRegex = regexp.MustCompile(escapeRegexpString)
|
||||
|
||||
func CollectEnvConfigKeys() (keys []string) {
|
||||
for _, env := range os.Environ() {
|
||||
if strings.HasPrefix(env, EnvConfigKeyPrefixGitea) {
|
||||
k, _, _ := strings.Cut(env, "=")
|
||||
keys = append(keys, k)
|
||||
for _, prefix := range envConfigKeyPrefixes {
|
||||
if strings.HasPrefix(env, prefix) {
|
||||
k, _, _ := strings.Cut(env, "=")
|
||||
keys = append(keys, k)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
return keys
|
||||
@@ -116,10 +127,17 @@ func EnvironmentToConfig(cfg ConfigProvider, envs []string) (changed bool) {
|
||||
continue
|
||||
}
|
||||
|
||||
// parse the environment variable to config section name and key name
|
||||
// parse the environment variable to config section name and key name,
|
||||
// accepting either the MOKOGIT__ or upstream GITEA__ override prefix.
|
||||
envKey := before
|
||||
envValue := after
|
||||
ok, sectionName, keyName, useFileValue := decodeEnvironmentKey(EnvConfigKeyPrefixGitea, EnvConfigKeySuffixFile, envKey)
|
||||
var sectionName, keyName string
|
||||
var useFileValue bool
|
||||
for _, prefix := range envConfigKeyPrefixes {
|
||||
if ok, sectionName, keyName, useFileValue = decodeEnvironmentKey(prefix, EnvConfigKeySuffixFile, envKey); ok {
|
||||
break
|
||||
}
|
||||
}
|
||||
if !ok {
|
||||
continue
|
||||
}
|
||||
|
||||
@@ -97,6 +97,11 @@ key = old
|
||||
changed = EnvironmentToConfig(cfg, []string{"GITEA__sec__key=new"})
|
||||
assert.False(t, changed)
|
||||
|
||||
// the MOKOGIT__ prefix is accepted alongside GITEA__ (rebrand transition)
|
||||
changed = EnvironmentToConfig(cfg, []string{"MOKOGIT__sec__key=mokogit-new"})
|
||||
assert.True(t, changed)
|
||||
assert.Equal(t, "mokogit-new", cfg.Section("sec").Key("key").String())
|
||||
|
||||
tmpFile := t.TempDir() + "/the-file"
|
||||
_ = os.WriteFile(tmpFile, []byte("value-from-file"), 0o644)
|
||||
changed = EnvironmentToConfig(cfg, []string{"GITEA__sec__key__FILE=" + tmpFile})
|
||||
|
||||
@@ -230,9 +230,9 @@ func mustNotRunAsRoot(rootSec ConfigSection) {
|
||||
|
||||
if !allowRunAsRoot {
|
||||
// Special thanks to VLC which inspired the wording of this messaging.
|
||||
log.Fatal("Gitea is not supposed to be run as root. If you need to use privileged TCP ports please instead use `setcap` and the `cap_net_bind_service` permission.")
|
||||
log.Fatal("MokoGIT is not supposed to be run as root. If you need to use privileged TCP ports please instead use `setcap` and the `cap_net_bind_service` permission.")
|
||||
}
|
||||
log.Warn("You are running Gitea using the root user, and have purposely chosen to skip built-in protections around this. You have been warned against this.")
|
||||
log.Warn("You are running MokoGIT using the root user, and have purposely chosen to skip built-in protections around this. You have been warned against this.")
|
||||
}
|
||||
|
||||
// HasInstallLock checks the install-lock in ConfigProvider directly, because sometimes the config file is not loaded into setting variables yet.
|
||||
|
||||
+2
-2
@@ -617,7 +617,7 @@
|
||||
"__github/workflows__": "folder-gh-workflows",
|
||||
"gitea/workflows": "folder-gitea-workflows",
|
||||
".gitea/workflows": "folder-gitea-workflows",
|
||||
".mokogitea/workflows": "folder-gitea-workflows",
|
||||
".mokogit/workflows": "folder-gitea-workflows",
|
||||
"_gitea/workflows": "folder-gitea-workflows",
|
||||
"-gitea/workflows": "folder-gitea-workflows",
|
||||
"__gitea/workflows__": "folder-gitea-workflows",
|
||||
@@ -5238,7 +5238,7 @@
|
||||
"__github/workflows__": "folder-gh-workflows-open",
|
||||
"gitea/workflows": "folder-gitea-workflows-open",
|
||||
".gitea/workflows": "folder-gitea-workflows-open",
|
||||
".mokogitea/workflows": "folder-gitea-workflows-open",
|
||||
".mokogit/workflows": "folder-gitea-workflows-open",
|
||||
"_gitea/workflows": "folder-gitea-workflows-open",
|
||||
"-gitea/workflows": "folder-gitea-workflows-open",
|
||||
"__gitea/workflows__": "folder-gitea-workflows-open",
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 96 KiB |
@@ -250,7 +250,7 @@ func prepareDBConsistencyChecks() []consistencyCheck {
|
||||
func checkDBConsistency(ctx context.Context, logger log.Logger, autofix bool) error {
|
||||
// make sure DB version is uptodate
|
||||
if err := db.InitEngineWithMigration(ctx, migrations.EnsureUpToDate); err != nil {
|
||||
logger.Critical("Model version on the database does not match the current Gitea version. Model consistency will not be checked until the database is upgraded")
|
||||
logger.Critical("Model version on the database does not match the current MokoGIT version. Model consistency will not be checked until the database is upgraded")
|
||||
return err
|
||||
}
|
||||
consistencyChecks := prepareDBConsistencyChecks()
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
name: gitea
|
||||
summary: Gitea - A painless self-hosted Git service
|
||||
summary: MokoGIT - A painless self-hosted Git service
|
||||
description: |
|
||||
The goal of this project is to make the easiest, fastest, and most painless
|
||||
way of setting up a self-hosted Git service. With Go, this can be done with
|
||||
|
||||
@@ -85,3 +85,30 @@ footer.page-footer {
|
||||
.markup a:not(.btn):not([class^="ui "]) {
|
||||
text-decoration-thickness: from-font;
|
||||
}
|
||||
|
||||
/* ---- Login / auth screens: MokoGIT branded backdrop ----
|
||||
* Gitea reuses the "signin" body class across the whole auth family: the sign-in,
|
||||
* sign-up, 2FA (twofa / scratch), OpenID, WebAuthn, and change-password pages all
|
||||
* render <div class="page-content user signin ...">; link-account uses "link-account".
|
||||
* Targeting those two classes brands every login/auth screen consistently.
|
||||
* We paint the MokoGIT brand header background (vendored at public/assets/img/header-background.svg,
|
||||
* served at /assets/img/) behind the centered form via :has() on <body> — no template
|
||||
* markup is touched, so this survives upstream merges. The form is then lifted onto a
|
||||
* clean surface so it stays legible over the pattern in both light and dark themes.
|
||||
* The surface targets `.ui.page.grid > .column` (not `.middle`) so it also covers the
|
||||
* WebAuthn prompt, whose grid omits the `middle` class. */
|
||||
body:has(.page-content.user.signin),
|
||||
body:has(.page-content.user.link-account) {
|
||||
background-image: url("/assets/img/header-background.svg");
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.page-content.user.signin .ui.page.grid > .column,
|
||||
.page-content.user.link-account .ui.page.grid > .column {
|
||||
padding: 1.5rem 1.75rem;
|
||||
background: var(--color-body);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--mokogit-shadow-lg);
|
||||
}
|
||||
|
||||
@@ -310,6 +310,20 @@ gitea-theme-meta-info {
|
||||
--color-syntax-traceback: #ff8686;
|
||||
--color-syntax-matching-bracket-bg: #00918a48;
|
||||
--color-syntax-nonmatching-bracket-bg: #cc484848;
|
||||
/* ===== MokoOnyx surface separation (navy-tinted elevation) =====
|
||||
Establish a clear 3-step elevation so panels separate from the page:
|
||||
page (darkest) -> box body -> box header/secondary (lightest). All tones
|
||||
are navy-tinted (blue channel raised) to stay cohesive with the #112855
|
||||
brand nav, mirroring mokoconsulting.tech's dark surface hierarchy. */
|
||||
--color-body: #0b1017; /* page: deepest navy-black */
|
||||
--color-box-body: #121a24; /* cards/boxes: lifted, navy-tinted */
|
||||
--color-box-header: #17212e; /* box headers: lightest surface */
|
||||
--color-box-body-highlight: #17212e;
|
||||
--color-secondary-bg: #17212e;
|
||||
--color-card: #141d28;
|
||||
--color-menu: #141d28;
|
||||
--color-button: #141d28;
|
||||
--color-light-border: #ffffff24; /* more visible panel edges on dark */
|
||||
accent-color: var(--color-accent);
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@@ -310,6 +310,18 @@ gitea-theme-meta-info {
|
||||
--color-syntax-traceback: #c00000;
|
||||
--color-syntax-matching-bracket-bg: #00b5ad38;
|
||||
--color-syntax-nonmatching-bracket-bg: #db282838;
|
||||
/* ===== MokoOnyx surface separation (mokoconsulting.tech gray scale) =====
|
||||
Give the page a soft gray base so white cards/boxes visibly lift off it,
|
||||
with a defined gray-300 border tone for clear panel edges. Mirrors the
|
||||
surface hierarchy of mokoconsulting.tech (MokoOnyx --gray-100/200/300). */
|
||||
--color-body: #f0f3f6; /* page: soft gray (was #fff, blended into cards) */
|
||||
--color-box-body: #ffffff; /* cards/boxes: white, now lift off the gray page */
|
||||
--color-box-header: #e9edf1; /* box headers: gray-200 tone */
|
||||
--color-secondary-bg: #e7ebef; /* MokoOnyx gray-200 */
|
||||
--color-card: #ffffff;
|
||||
--color-menu: #ffffff;
|
||||
--color-button: #ffffff;
|
||||
--color-light-border: #0000172e; /* stronger gray-300 border definition */
|
||||
accent-color: var(--color-accent);
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
+53
@@ -0,0 +1,53 @@
|
||||
<!--
|
||||
Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
|
||||
SPDX-License-Identifier: GPL-3.0-or-later
|
||||
-->
|
||||
|
||||
# Vendored MokoOnyx theme CSS
|
||||
|
||||
These files are **auto-synced** from [`MokoConsulting/MokoOnyx`](https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx)
|
||||
(the Joomla template that drives mokoconsulting.tech) by
|
||||
`.mokogit/workflows/sync-mokoonyx-theme.yml` on every push to `dev`/`main`
|
||||
(and via `workflow_dispatch`). **Do not hand-edit** — changes are overwritten on
|
||||
the next sync. Edit the source in the MokoOnyx repo instead.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Source in MokoOnyx | Purpose |
|
||||
|---|---|---|
|
||||
| `template.css` | `source/media/css/template.css` | Full Bootstrap 5 template bundle. Vendored for **reference only** — NOT bundled into the UI (its component classes would collide with Fomantic UI). |
|
||||
| `light.standard.css` / `dark.standard.css` | `source/media/css/theme/{light,dark}.standard.css` | The standard light/dark Bootstrap theme sheets (tokens + components). Reference. |
|
||||
| `light.custom.css` / `dark.custom.css` | `source/templates/{light,dark}.custom.css` | The editable site token overrides (tokens + components). Reference / source for the extract below. |
|
||||
| `light.tokens.css` / `dark.tokens.css` | *(generated)* | **Tokens only**, extracted from the `custom.css` `:root[data-bs-theme]` block and re-scoped to `:root`. Bootstrap component classes are stripped, so these are **safe to `@import`** into a Gitea theme without colliding with Fomantic. |
|
||||
|
||||
## Adopting the tokens in the web UI (token/variable parity)
|
||||
|
||||
MokoGIT uses Fomantic UI + Tailwind; MokoOnyx is Bootstrap 5. We take **token
|
||||
parity**: import MokoOnyx's design tokens and map them onto Gitea's `--color-*`
|
||||
variables, keeping Gitea's markup (so it survives upstream merges). To wire a
|
||||
theme, add to the **top** of `web_src/css/themes/theme-mokogit-light.css`
|
||||
(and `theme-mokogit-dark.css` with the dark tokens):
|
||||
|
||||
```css
|
||||
@import "../vendor/mokoonyx/light.tokens.css"; /* brings MokoOnyx vars into :root */
|
||||
```
|
||||
|
||||
then map the ones that matter onto Gitea vars (fallbacks keep the current values
|
||||
if a token is ever missing):
|
||||
|
||||
```css
|
||||
:root {
|
||||
--color-primary: var(--accent-color-primary, #010156); /* review: primary vs accent */
|
||||
--color-body: var(--body-bg, #ffffff);
|
||||
--color-text: var(--body-color, #24292f);
|
||||
--fonts-proportional: var(--font-sans-serif, -apple-system, "Segoe UI", Roboto);
|
||||
--fonts-monospace: var(--font-monospace, ui-monospace, monospace);
|
||||
}
|
||||
```
|
||||
|
||||
> The exact color mapping (which MokoOnyx var drives which Gitea `--color-*`)
|
||||
> should be **tuned visually** on `dev` across light/dark/auto — that step is
|
||||
> intentionally left out of the sync so an automated import can never silently
|
||||
> recolor the UI. The `auto` theme inherits this automatically because
|
||||
> `theme-mokogit-auto.css` `@import`s the light/dark files under
|
||||
> `(prefers-color-scheme)`.
|
||||
+1211
File diff suppressed because it is too large
Load Diff
+1211
File diff suppressed because it is too large
Load Diff
+882
@@ -0,0 +1,882 @@
|
||||
/* Auto-extracted from vendor/mokoonyx/dark.custom.css :root[data-bs-theme] — re-scoped to :root. DO NOT hand-edit. */
|
||||
:root {
|
||||
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);
|
||||
|
||||
|
||||
/* ===== 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;
|
||||
|
||||
|
||||
/* ===== 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);
|
||||
|
||||
|
||||
/* ===== 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%);
|
||||
|
||||
|
||||
/* ===== HEADER BACKGROUND ===== */
|
||||
--header-background-color: #1a1f2b;
|
||||
--header-background-image: url('../../../../../../media/templates/site/mokoonyx/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;
|
||||
|
||||
|
||||
/* ===== 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);
|
||||
|
||||
|
||||
/* ===== 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;
|
||||
--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;
|
||||
|
||||
|
||||
/* ===== 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);
|
||||
--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;
|
||||
|
||||
}
|
||||
+1220
File diff suppressed because it is too large
Load Diff
+1220
File diff suppressed because it is too large
Load Diff
+881
@@ -0,0 +1,881 @@
|
||||
/* Auto-extracted from vendor/mokoonyx/light.custom.css :root[data-bs-theme] — re-scoped to :root. DO NOT hand-edit. */
|
||||
:root {
|
||||
color-scheme: light;
|
||||
|
||||
|
||||
/* ===== 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: #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);
|
||||
|
||||
|
||||
/* ===== 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;
|
||||
|
||||
|
||||
/* ===== 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);
|
||||
|
||||
|
||||
/* ===== 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;
|
||||
|
||||
|
||||
/* ===== HEADER BACKGROUND ===== */
|
||||
--header-background-color: #adadad;
|
||||
--header-background-image: url('../../../../../../media/templates/site/mokoonyx/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;
|
||||
|
||||
|
||||
/* ===== 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);
|
||||
|
||||
|
||||
/* ===== 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;
|
||||
--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;
|
||||
|
||||
|
||||
/* ===== 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;
|
||||
--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;
|
||||
|
||||
}
|
||||
+23778
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user