/* WebTUI Main Stylesheet with Multiple Catppuccin Themes */ /* * THEME USAGE GUIDE: * * To switch themes, change the data-webtui-theme attribute in your HTML: * * Dark Themes: * - data-webtui-theme="catppuccin-mocha" (Default - Deep dark blue/purple) * - data-webtui-theme="catppuccin-macchiato" (Medium dark - Cooler tones) * - data-webtui-theme="catppuccin-frappe" (Soft dark - Warmer tones) * * Light Theme: * - data-webtui-theme="catppuccin-latte" (Light - Soft pastel colors) * * Example: */ /* Base Styles - Fallback for no theme */ :root { --background0: #fff; --background1: #ddd; --background2: #bbb; --background3: #999; --foreground0: #000; --foreground1: #444; --foreground2: #888; --font-size: 16px; --line-height: 1.3; --font-weight-bold: 700; --font-weight-normal: 400; --font-family: 'Fira Mono', monospace; --box-border-color: var(--foreground0); --table-border-color: var(--box-border-color); --separator-color: var(--box-border-color); --separator-background: transparent; /* Catppuccin Palette - All themes use these base colors */ --rosewater: #f5e0dc; --flamingo: #f2cdcd; --pink: #f5c2e7; --mauve: #cba6f7; --red: #f38ba8; --maroon: #eba0ac; --peach: #fab387; --yellow: #f9e2af; --green: #a6e3a1; --teal: #94e2d5; --sky: #89dceb; --sapphire: #74c7ec; --blue: #89b4fa; --lavender: #b4befe; /* Catppuccin Mocha Colors (Dark) */ --text-mocha: #cdd6f4; --subtext1-mocha: #bac2de; --subtext0-mocha: #a6adc8; --overlay2-mocha: #9399b2; --overlay1-mocha: #7f849c; --overlay0-mocha: #6c7086; --surface2-mocha: #585b70; --surface1-mocha: #45475a; --surface0-mocha: #313244; --base-mocha: #1e1e2e; --mantle-mocha: #181825; --crust-mocha: #11111b; /* Catppuccin Macchiato Colors (Dark) */ --text-macchiato: #cad3f5; --subtext1-macchiato: #b8c0e0; --subtext0-macchiato: #a5adcb; --overlay2-macchiato: #939ab7; --overlay1-macchiato: #8087a2; --overlay0-macchiato: #6e738d; --surface2-macchiato: #5b6078; --surface1-macchiato: #494d64; --surface0-macchiato: #363a4f; --base-macchiato: #24273a; --mantle-macchiato: #1e2030; --crust-macchiato: #181926; /* Catppuccin Frappe Colors (Dark) */ --text-frappe: #c6d0f5; --subtext1-frappe: #b5bfe2; --subtext0-frappe: #a5adce; --overlay2-frappe: #949cbb; --overlay1-frappe: #838ba7; --overlay0-frappe: #737994; --surface2-frappe: #626880; --surface1-frappe: #51576d; --surface0-frappe: #414559; --base-frappe: #303446; --mantle-frappe: #292c3c; --crust-frappe: #232634; /* Catppuccin Latte Colors (Light) */ --text-latte: #4c4f69; --subtext1-latte: #5c5f77; --subtext0-latte: #6c6f85; --overlay2-latte: #7c7f93; --overlay1-latte: #8c8fa1; --overlay0-latte: #9ca0b0; --surface2-latte: #acb0be; --surface1-latte: #bcc0cc; --surface0-latte: #ccd0da; --base-latte: #eff1f5; --mantle-latte: #e6e9ef; --crust-latte: #dce0e8; } /* CATPPUCIN MOCHA THEME - Deep Dark Blue/Purple */ [data-webtui-theme='catppuccin-mocha'] { --background0: var(--base-mocha); --background1: var(--surface0-mocha); --background2: var(--surface1-mocha); --background3: var(--surface2-mocha); --foreground0: var(--text-mocha); --foreground1: var(--subtext1-mocha); --foreground2: var(--overlay2-mocha); } /* CATPPUCIN MACCHIATO THEME - Medium Dark Cooler Tones */ [data-webtui-theme='catppuccin-macchiato'] { --background0: var(--base-macchiato); --background1: var(--surface0-macchiato); --background2: var(--surface1-macchiato); --background3: var(--surface2-macchiato); --foreground0: var(--text-macchiato); --foreground1: var(--subtext1-macchiato); --foreground2: var(--overlay2-macchiato); } /* CATPPUCIN FRAPPE THEME - Soft Dark Warmer Tones */ [data-webtui-theme='catppuccin-frappe'] { --background0: var(--base-frappe); --background1: var(--surface0-frappe); --background2: var(--surface1-frappe); --background3: var(--surface2-frappe); --foreground0: var(--text-frappe); --foreground1: var(--subtext1-frappe); --foreground2: var(--overlay2-frappe); } /* CATPPUCIN LATTE THEME - Light Pastel Colors */ [data-webtui-theme='catppuccin-latte'] { --background0: var(--base-latte); --background1: var(--surface0-latte); --background2: var(--surface1-latte); --background3: var(--surface2-latte); --foreground0: var(--text-latte); --foreground1: var(--subtext1-latte); --foreground2: var(--overlay2-latte); } body, html { background-color: var(--background0); color: var(--foreground0); font-family: var(--font-family); font-size: var(--font-size); font-weight: var(--font-weight-normal); line-height: var(--line-height); font-variant-ligatures: common-ligatures; margin: 0; padding: 0; } * { box-sizing: border-box; margin: 0; padding: 0; outline: none; } /* Typography with proper color differentiation */ h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-bold); line-height: 1.2; margin: 1.5rem 0 1rem 0; color: var(--foreground0); } h1 { font-size: 2rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; } h5 { font-size: 1.1rem; } h6 { font-size: 1rem; } p { margin: 0 0 1rem 0; line-height: var(--line-height); text-align: justify; color: var(--foreground0); } /* LINK STYLING - This is the key fix for color differentiation */ a { color: var(--blue); /* Catppuccin blue for links */ text-decoration: none; } a:hover { color: var(--sky); /* Catppuccin sky blue for hover */ text-decoration: underline; } a:visited { color: var(--mauve); /* Catppuccin mauve for visited */ } a.active { color: var(--red); /* Catppuccin red for active */ } strong { font-weight: var(--font-weight-bold); color: var(--foreground0); } em { font-style: italic; color: var(--foreground0); } small { font-size: 0.875em; color: var(--foreground1); } mark { background-color: var(--background2); color: var(--foreground0); padding: 0.125rem 0.25rem; } code { font-family: var(--font-family); font-size: 0.875em; background-color: var(--background1); color: var(--foreground0); padding: 0.125rem 0.25rem; border: 1px solid var(--box-border-color); border-radius: 2px; } pre { font-family: var(--font-family); font-size: 0.875em; background-color: var(--background1); color: var(--foreground0); padding: 1rem; border: 1px solid var(--box-border-color); overflow-x: auto; margin: 1rem 0; border-radius: 4px; } pre code { background-color: transparent; border: none; padding: 0; font-size: inherit; color: inherit; } blockquote { margin: 1.5rem 0; padding: 0.5rem 1rem; border-left: 4px solid var(--box-border-color); background-color: var(--background1); border-radius: 0 4px 4px 0; color: var(--foreground0); } blockquote p:last-child { margin-bottom: 0; } ul, ol { margin: 1rem 0; padding-left: 2rem; color: var(--foreground0); } li { margin-bottom: 0.25rem; color: var(--foreground0); } li > ul, li > ol { margin: 0; } dl { margin: 1rem 0; color: var(--foreground0); } dt { font-weight: var(--font-weight-bold); color: var(--foreground0); } dd { margin-left: 1rem; color: var(--foreground0); } /* Navbar with theme colors */ .navbar { display: flex; justify-content: center; margin-top: 16px; padding-top: 32px; margin: 0 auto; overflow: hidden; background-color: var(--background0); padding: 1rem 0; } .navbar a { float: left; font-weight: bold; background-color: var(--background1); text-align: center; padding: 10px 16px; font-size: 102%; border: 1px solid var(--foreground1); text-decoration: none; color: var(--blue); /* Blue links in navbar */ margin: 0 4px; border-radius: 4px; transition: all 0.2s ease; } .navbar a.active { background-color: var(--background2); color: var(--red); /* Red for active navbar items */ border-color: var(--foreground0); } .navbar a:hover { background-color: var(--background3); color: var(--sky); /* Sky blue for navbar hover */ border-color: var(--foreground2); } /* Custom Layout Elements */ article { padding-bottom: 10px; } .heading-container { display: flex; justify-content: space-between; align-items: center; } .break, .small-break { flex: 1; } .break::after { content: ""; display: inline-block; position: relative; width: 80%; top: 35%; left: 10%; border-top: 3px solid var(--foreground0); } .small-break::after { content: ""; display: inline-block; position: relative; width: 80%; top: 35%; left: 10%; border-top: 3px solid var(--foreground1); } .link-icon { position: relative; top: 20%; margin-left: 10px; height: 20px; } .stack { background-color: var(--background2); border-radius: 10px; padding: 1rem; margin: 1rem 0; } .date { padding-left: 10px; color: var(--foreground1); font-size: 0.9em; } details { margin-top: 10px; margin-bottom: 10px; padding: 10px; background-color: var(--background1); border-radius: 4px; border: 1px solid var(--box-border-color); color: var(--foreground0); } details summary { cursor: pointer; font-weight: var(--font-weight-bold); padding: 0.5rem; background-color: var(--background2); border-radius: 4px; color: var(--foreground0); } details summary:hover { background-color: var(--background3); } /* Header styling */ header { text-align: center; position: relative; margin: 2rem 0; } header::after { content: ""; display: block; width: 100%; height: 2px; background-color: var(--foreground1); position: absolute; bottom: -10px; left: 0; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; border: 1px solid var(--box-border-color); background-color: var(--background1); color: var(--foreground0); font-family: var(--font-family); font-size: var(--font-size); line-height: var(--line-height); text-decoration: none; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; border-radius: 4px; } .btn:hover { background-color: var(--background2); border-color: var(--foreground1); } .btn:active { background-color: var(--background3); border-color: var(--foreground2); } .btn:focus { outline: 2px solid var(--foreground0); outline-offset: 2px; } /* Badges */ .badge { display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: var(--font-weight-bold); line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border: 1px solid var(--box-border-color); background-color: var(--background1); color: var(--foreground0); border-radius: 4px; } .badge:empty { display: none; } /* Separators */ .separator { height: 1px; background-color: var(--separator-color); margin: 1rem 0; border: none; } .separator-dashed { background-color: var(--separator-background); border-top: 1px dashed var(--separator-color); } .separator-dotted { background-color: var(--separator-background); border-top: 1px dotted var(--separator-color); } /* Box utilities */ .box { border: 1px solid var(--box-border-color); background-color: var(--background1); padding: 1rem; margin: 1rem 0; border-radius: 4px; } .box-header { border-bottom: 1px solid var(--box-border-color); padding-bottom: 0.5rem; margin-bottom: 0.5rem; font-weight: var(--font-weight-bold); color: var(--foreground0); } .box-footer { border-top: 1px solid var(--box-border-color); padding-top: 0.5rem; margin-top: 0.5rem; color: var(--foreground0); } .box-content { padding: 0.5rem 0; color: var(--foreground0); } /* Custom styles to match your existing layout */ body { margin: auto; padding-left: 24px; padding-right: 24px; max-width: 86ch; }