diff --git a/piggy/static/css/themes/desert.css b/piggy/static/css/themes/desert.css new file mode 100644 index 0000000..bc4c1ec --- /dev/null +++ b/piggy/static/css/themes/desert.css @@ -0,0 +1,135 @@ +/* METADATA +id: 9 +name: Desert +description: A theme inspired by the warm sands and muted tones of the desert. +*/ + +[data-theme="desert"] { + /* General colors */ + --piggy-main: #f4e7d3; /* Sandy beige background */ + --piggy-light: #5f4b32; /* Dark brown for text */ + --piggy-neutral: #a67c52; /* Medium brown */ + --piggy-dark: #3e2a14; /* Dark brown for contrast */ + + --piggy-text-main: var(--piggy-dark); + --piggy-text-light: var(--piggy-light); + --piggy-text-neutral: var(--piggy-neutral); + --piggy-text-dark: var(--piggy-dark); + + --piggy-shadow-text: rgba(94, 75, 50, 0.4); /* Subtle brown shadows */ + --piggy-shadow-box: rgba(94, 75, 50, 0.3); + --piggy-shadow-glow: rgba(166, 124, 82, 0.3); /* Warm glow */ + + /* Card colors */ + --piggy-card-start: rgba(244, 231, 211, 0.8); /* Light sand gradient start */ + --piggy-card-end: rgba(229, 204, 175, 0.8); /* Slightly darker gradient end */ + --piggy-card-border: #a67c52; /* Medium brown border */ + --piggy-text-card: var(--piggy-text-dark); + + --piggy-extra-card-start: rgba(230, 200, 160, 0.8); /* Extra card start */ + --piggy-extra-card-end: rgba(210, 180, 140, 0.8); /* Extra card end */ + --piggy-extra-card-border: var(--piggy-card-border); + --piggy-text-extra-card: var(--piggy-text-dark); + + --piggy-resource-card-start: rgba(220, 190, 150, 0.8); /* Resource card start */ + --piggy-resource-card-end: rgba(200, 170, 130, 0.8); /* Resource card end */ + --piggy-resource-card-border: var(--piggy-card-border); + --piggy-text-resource-card: var(--piggy-text-dark); + + --piggy-card-border-width: 1px; + + /* Navbar */ + --piggy-navbar-start: #d2b48c; /* Tan */ + --piggy-navbar-end: #c2a678; /* Gradient effect */ + --piggy-text-navbar: var(--piggy-text-dark); + + /* Buttons */ + --piggy-button: #a67c52; /* Medium brown */ + --piggy-button-hover: #8c6239; /* Darker on hover */ + --piggy-button-active: #5f4b32; /* Darkest when active */ + --piggy-text-button: #ffffff; + + /* Thumbnails */ + --piggy-thumbnail-overlay: rgba(94, 75, 50, 0.5); /* Subtle overlay */ + --piggy-text-thumbnail: var(--piggy-main); + + /* Text and links */ + --piggy-text-tag: #a67c52; + --piggy-text-description: var(--piggy-text-dark); + --piggy-text-title: var(--piggy-text-dark); + --piggy-text-breadcrumb: var(--piggy-text-dark); + --piggy-text-breadcrumb-hover: #8c6239; + + --piggy-menu: var(--piggy-main); + --piggy-menu-text: var(--piggy-text-dark); + + --piggy-tooltip: #e0c090; + --piggy-tooltip-text: var(--piggy-text-dark); + + --piggy-text-hyperlink: #1a8ce3; + --piggy-text-hyperlink-hover: #798b99; + } + + [data-theme="desert"] .level-count-container { + color: var(--piggy-dark); + background-color: var(--piggy-main); + } + + [data-theme="desert"] .tag-box { + color: var(--piggy-dark); + } + + [data-theme="desert"] #theme-select option { + color: var(--piggy-main); + } + + /******************************\ + |* MARKDOWN OVERRIDES *| + \******************************/ + + [data-theme="desert"] .md-content .admonition-title { + font-size: 0.8rem !important; + } + + [data-theme="desert"] .md-content code:not(.md-code__content) { + background-color: #e8d4b0; /* Light sand color */ + color: #5f4b32; /* Dark brown text */ + } + + [data-theme="desert"] .md-content .md-code__content { + filter: invert() hue-rotate(10deg) contrast(1.45); + } + + [data-theme="desert"] .md-content table { + border: 1px solid #a67c52 !important; + } + + [data-theme="desert"] .md-content th { + background-color: #d2b48c; /* Tan */ + color: var(--piggy-text-dark); + } + + [data-theme="desert"] .md-content tr:nth-child(odd) td { + background-color: rgba(244, 231, 211, 0.8); /* Light sand */ + } + + [data-theme="desert"] .md-content tr:nth-child(even) td { + background-color: rgba(229, 204, 175, 0.8); /* Slightly darker sand */ + } + + [data-theme="desert"] .md-content details, + [data-theme="desert"] .md-content .tip, + [data-theme="desert"] .md-content .admonition { + background-color: #f0e0c0; + color: var(--piggy-text-dark); + } + + [data-theme="desert"] .md-content .tabbed-labels::before { + border-color: #a67c52; + background-color: rgba(166, 124, 82, 0.2) !important; + } + + [data-theme="desert"] .md-content .tabbed-set { + background: #f4e7d3; + } + \ No newline at end of file diff --git a/piggy/static/css/themes/high-contrast.css b/piggy/static/css/themes/high-contrast.css index 60e31fc..732c195 100644 --- a/piggy/static/css/themes/high-contrast.css +++ b/piggy/static/css/themes/high-contrast.css @@ -112,8 +112,6 @@ description: High contrast theme for maximum visibility. margin-bottom: 5px; color: #fff; background-color: #000; - top: 7px; - left: 11px; } [data-theme="high-contrast"] #settings-menu { diff --git a/piggy/static/css/themes/matrix.css b/piggy/static/css/themes/matrix.css index 1fef6e4..f346d47 100644 --- a/piggy/static/css/themes/matrix.css +++ b/piggy/static/css/themes/matrix.css @@ -39,8 +39,8 @@ description: A theme inspired by the green hues of "The Matrix" movies. --piggy-card-border-width: 1px; /* Piggy elements */ - --piggy-navbar-start: #000000; /* Navbar start */ - --piggy-navbar-end: #000000; /* Navbar end */ + --piggy-navbar-start: #001900; /* Navbar start */ + --piggy-navbar-end: #001100; /* Navbar end */ --piggy-text-navbar: var(--piggy-light); --piggy-button: #004400; /* Dark green button */ @@ -63,8 +63,8 @@ description: A theme inspired by the green hues of "The Matrix" movies. --piggy-tooltip: #001100; --piggy-tooltip-text: #00ff00; - --piggy-text-hyperlink: #00ff00; - --piggy-text-hyperlink-hover: #00ff00; + --piggy-text-hyperlink: #00ffff; + --piggy-text-hyperlink-hover: #99ffff; } /******************************\ diff --git a/piggy/static/css/themes/ocean.css b/piggy/static/css/themes/ocean.css index 329b28a..7a56b84 100644 --- a/piggy/static/css/themes/ocean.css +++ b/piggy/static/css/themes/ocean.css @@ -66,8 +66,8 @@ description: A theme inspired by the serene blues and teals of the ocean. --piggy-tooltip: #003b4d; --piggy-tooltip-text: #ffffff; - --piggy-text-hyperlink: #88c0d0; - --piggy-text-hyperlink-hover: #a1d9e6; + --piggy-text-hyperlink: #4172b2; + --piggy-text-hyperlink-hover: #83c1d9; } /******************************\ diff --git a/piggybank b/piggybank index df3e8ff..046569c 160000 --- a/piggybank +++ b/piggybank @@ -1 +1 @@ -Subproject commit df3e8fff9892d7d54ee285104b70fd76b026750b +Subproject commit 046569c309d668f778a1f5bc5fce6eb6c9b15df0