docs: wip styling of options

docs/overrides/options.html

@@ -1,14 +1,6 @@
 {% extends "base.html" %} {% block extrahead %}
 <style>
-  .md-main__inner {
-    max-width: 100% !important;
-  }
-  .md-content {
-    max-width: 100% !important;
-  }
-  .md-main__inner {
-    margin-top: 0 !important;
-  }
+
 </style>
 {% endblock %} {% block site_nav %}{% endblock %} {% block content %} {{
 page.content }} {% endblock %}

docs/site/options.md

@@ -2,5 +2,86 @@
 template: options.html
 ---
 
+<script>
 
-<iframe src="/options-page/" height="1000" width="100%"></iframe>
+const variables = [
+    '--md-default-bg-color', 
+    '--md-default-fg-color',
+    '--md-default-fg-color--light',
+    '--md-default-fg-color--lightest'
+];
+
+let colorScheme = 'default';
+
+const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'data-md-color-scheme') {
+            colorScheme = mutation.target.getAttribute('data-md-color-scheme');
+            console.log('color scheme changed', colorScheme);
+        }
+    });
+});
+
+observer.observe(document.body, { 
+    attributes: true,
+    attributeFilter: ['data-md-color-scheme']
+});
+
+function syncCSSVariables() {
+    const iframe = document.getElementById('options-frame');
+    console.log('syncing css variables', iframe); 
+
+    const iframeDoc = iframe.contentWindow.document;
+    const iframeRoot = iframeDoc.documentElement;
+    
+    const targetElement = document.querySelector(`[data-md-color-scheme="${colorScheme}"]`);
+    const parentStyles = getComputedStyle(targetElement);
+        
+    console.log('parent styles', parentStyles);
+
+    variables.forEach(varName => {
+        const value = parentStyles.getPropertyValue(varName);
+        if (value.trim()) {
+            console.log('setting', varName, value);
+            iframeRoot.style.setProperty(varName, value.trim());
+        }
+    });
+
+    // add our custom styling
+    addCustomCSS(iframe);
+}
+
+
+function addCustomCSS(iframe) {
+    const iframeDoc = iframe.contentWindow.document;
+
+    const cssLink = iframeDoc.createElement('link');
+    cssLink.id = "clan-css";
+    cssLink.rel = "stylesheet";
+    cssLink.type = "text/css";
+    cssLink.href = "/static/options.css";
+
+    iframeDoc.head.appendChild(cssLink); 
+}
+
+function onIFrameLoad() {
+    const iframe = document.getElementById('options-frame');
+
+    // initial sync of css variables
+    syncCSSVariables(iframe);
+
+    // listen for theme changes
+    const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const lightModeQuery = window.matchMedia('(prefers-color-scheme: light)');
+    
+    darkModeQuery.addEventListener('change', syncCSSVariables);
+    lightModeQuery.addEventListener('change', syncCSSVariables);
+
+    
+}
+
+</script>
+
+<iframe id="options-frame" src="/options-page/" onload="onIFrameLoad()" height="1000" width="100%"></iframe>
+
+[asciinema-player](static/asciinema-player)

docs/site/static/extra.css

@@ -20,3 +20,7 @@
 .md-nav__item.md-nav__item--section > label > span {
   color: var(--md-typeset-a-color);
 }
+
+iframe {
+  border: none;
+}

docs/site/static/options.css

@@ -0,0 +1,42 @@
+@font-face {
+    font-family: "Roboto";
+    src: url(./Roboto-Regular.ttf) format("truetype");
+}
+
+@font-face {
+    font-family: "Fira Code";
+    src: url(./FiraCode-VF.ttf) format("truetype");
+}
+
+:root {
+    --f-family: "Roboto";
+    --f-family-mono: "Fira Code";
+
+    --c-page: var(--md-default-bg-color);
+    --c-card: transparent;
+}
+
+header h1 {
+    color: var(--md-default-fg-color--light);
+}
+
+div.card {
+    border: .05rem solid var(--md-default-fg-color--lightest) !important;
+}
+
+
+form {
+    label {
+        gap: 1rem;
+
+        input {
+            background-color: #00000042 !important;
+
+            &:hover {
+                background-color: #ffffff1f !important;
+            }
+        }
+    }
+}
+
+