diff --git a/src/main/java/widoco/Constants.java b/src/main/java/widoco/Constants.java index 10fcd0c..c569c1d 100644 --- a/src/main/java/widoco/Constants.java +++ b/src/main/java/widoco/Constants.java @@ -732,16 +732,11 @@ public static String getIndexDocument(String resourcesFolderName, Configuration String document = OPENING; /* Style selection */ if (c.isUseW3CStyle()) { - document += " \n" + - " \n" + " \n" + " \n"; + document += getW3CStyleDoc(resourcesFolderName); } else { - document += " \n" - + " \n"; + document += htmlStyleSheet(resourcesFolderName+"/yeti.css","screen") + +htmlStyleSheet(resourcesFolderName+"/site.css","screen"); } // add a favicon (rdf logo) document += ""; @@ -862,7 +857,25 @@ public static String getIndexDocument(String resourcesFolderName, Configuration return document; } - + + private static String htmlStyleSheet(String resource,String media) { + return "\n"; + } + + private static String getW3CStyleDoc(String rsrcFolder){ + return htmlStyleSheet(rsrcFolder+"/primer.css","screen") + + htmlStyleSheet(rsrcFolder+"/rec.css","screen") + + htmlStyleSheet(rsrcFolder+"/extra.css","screen") + + htmlStyleSheet(rsrcFolder+"/owl.css","screen") + + htmlStyleSheet(rsrcFolder+"/dark.css","(prefers-color-scheme: dark)") + + htmlStyleSheet(rsrcFolder+"/light.css","(prefers-color-scheme: light)") + + htmlStyleSheet(rsrcFolder+"/slider.css","screen") + + "\n" + + "" + +"
\n" + +"\t\n" + +"
\n"; + } /** * Function that includes all the sections as part of the index document. * This makes the documentation more difficult to edit, but simpler for production @@ -884,14 +897,11 @@ public static String getUnifiedIndexDocument(String resourcesFolderName, Configu String document = OPENING; /* Style selection */ if (c.isUseW3CStyle()) { - document += " " + " " + " " + " "; + document += getW3CStyleDoc(resourcesFolderName); + } else { - document += " " - + " "; + document += htmlStyleSheet(resourcesFolderName+"/yeti.css","screen") + +htmlStyleSheet(resourcesFolderName+"/site.css","screen"); } // add a title to the document if (c.getMainOntology().getTitle() != null && !"".equals(c.getMainOntology().getTitle())) diff --git a/src/main/java/widoco/CreateResources.java b/src/main/java/widoco/CreateResources.java index 9cfc641..ecb3492 100644 --- a/src/main/java/widoco/CreateResources.java +++ b/src/main/java/widoco/CreateResources.java @@ -477,6 +477,18 @@ private static void createFolderStructure(String s, Configuration c, Properties new File(resources.getAbsolutePath() + File.separator + "extra.css")); WidocoUtils.copyLocalResource("/lode/owl.css", new File(resources.getAbsolutePath() + File.separator + "owl.css")); + WidocoUtils.copyLocalResource("/darkmode/dark.css", + new File(resources.getAbsolutePath() + File.separator + "dark.css")); + WidocoUtils.copyLocalResource("/darkmode/light.css", + new File(resources.getAbsolutePath() + File.separator + "light.css")); + WidocoUtils.copyLocalResource("/darkmode/slider.css", + new File(resources.getAbsolutePath() + File.separator + "slider.css")); + WidocoUtils.copyLocalResource("/darkmode/dark-mode-toggle.mjs", + new File(resources.getAbsolutePath() + File.separator + "dark-mode-toggle.mjs")); + WidocoUtils.copyLocalResource("/darkmode/sun.svg", + new File(resources.getAbsolutePath() + File.separator + "sun.svg")); + WidocoUtils.copyLocalResource("/darkmode/moon.svg", + new File(resources.getAbsolutePath() + File.separator + "moon.svg")); } else { WidocoUtils.copyLocalResource("/lode/bootstrap-yeti.css", new File(resources.getAbsolutePath() + File.separator + "yeti.css")); diff --git a/src/main/resources/darkmode/dark-mode-toggle.mjs b/src/main/resources/darkmode/dark-mode-toggle.mjs new file mode 100644 index 0000000..e6fda59 --- /dev/null +++ b/src/main/resources/darkmode/dark-mode-toggle.mjs @@ -0,0 +1,372 @@ +/** + * Copyright 2019 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +// @license © 2019 Google LLC. Licensed under the Apache License, Version 2.0. +const doc = document; +let store = {}; +try { + store = localStorage; +} catch (err) { + // Do nothing. The user probably blocks cookies. +} +const PREFERS_COLOR_SCHEME = 'prefers-color-scheme'; +const MEDIA = 'media'; +const LIGHT = 'light'; +const DARK = 'dark'; +const MQ_DARK = `(${PREFERS_COLOR_SCHEME}:${DARK})`; +const MQ_LIGHT = `(${PREFERS_COLOR_SCHEME}:${LIGHT})`; +const LINK_REL_STYLESHEET = 'link[rel=stylesheet]'; +const REMEMBER = 'remember'; +const LEGEND = 'legend'; +const TOGGLE = 'toggle'; +const SWITCH = 'switch'; +const APPEARANCE = 'appearance'; +const PERMANENT = 'permanent'; +const MODE = 'mode'; +const COLOR_SCHEME_CHANGE = 'colorschemechange'; +const PERMANENT_COLOR_SCHEME = 'permanentcolorscheme'; +const ALL = 'all'; +const NOT_ALL = 'not all'; +const NAME = 'dark-mode-toggle'; +const DEFAULT_URL = 'https://googlechromelabs.github.io/dark-mode-toggle/demo/'; + +// See https://html.spec.whatwg.org/multipage/common-dom-interfaces.html ↵ +// #reflecting-content-attributes-in-idl-attributes. +const installStringReflection = (obj, attrName, propName = attrName) => { + Object.defineProperty(obj, propName, { + enumerable: true, + get() { + const value = this.getAttribute(attrName); + return value === null ? '' : value; + }, + set(v) { + this.setAttribute(attrName, v); + }, + }); +}; + +const installBoolReflection = (obj, attrName, propName = attrName) => { + Object.defineProperty(obj, propName, { + enumerable: true, + get() { + return this.hasAttribute(attrName); + }, + set(v) { + if (v) { + this.setAttribute(attrName, ''); + } else { + this.removeAttribute(attrName); + } + }, + }); +}; + +const template = doc.createElement('template'); +// ⚠️ Note: this is a minified version of `src/template-contents.tpl`. +// Compress the CSS with https://cssminifier.com/, then paste it here. +// eslint-disable-next-line max-len +template.innerHTML = `
`; + +export class DarkModeToggle extends HTMLElement { + static get observedAttributes() { + return [MODE, APPEARANCE, PERMANENT, LEGEND, LIGHT, DARK, REMEMBER]; + } + + constructor() { + super(); + + installStringReflection(this, MODE); + installStringReflection(this, APPEARANCE); + installStringReflection(this, LEGEND); + installStringReflection(this, LIGHT); + installStringReflection(this, DARK); + installStringReflection(this, REMEMBER); + + installBoolReflection(this, PERMANENT); + + this._darkCSS = null; + this._lightCSS = null; + + doc.addEventListener(COLOR_SCHEME_CHANGE, (event) => { + this.mode = event.detail.colorScheme; + this._updateRadios(); + this._updateCheckbox(); + }); + + doc.addEventListener(PERMANENT_COLOR_SCHEME, (event) => { + this.permanent = event.detail.permanent; + this._permanentCheckbox.checked = this.permanent; + }); + + this._initializeDOM(); + } + + _initializeDOM() { + const shadowRoot = this.attachShadow({mode: 'open'}); + shadowRoot.append(template.content.cloneNode(true)); + + // We need to support `media="(prefers-color-scheme: dark)"` (with space) + // and `media="(prefers-color-scheme:dark)"` (without space) + this._darkCSS = doc.querySelectorAll( + `${LINK_REL_STYLESHEET}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${DARK}"]`, + ); + this._lightCSS = doc.querySelectorAll( + `${LINK_REL_STYLESHEET}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${LIGHT}"]`, + ); + + // Get DOM references. + this._lightRadio = shadowRoot.querySelector('[part=lightRadio]'); + this._lightLabel = shadowRoot.querySelector('[part=lightLabel]'); + this._darkRadio = shadowRoot.querySelector('[part=darkRadio]'); + this._darkLabel = shadowRoot.querySelector('[part=darkLabel]'); + this._darkCheckbox = shadowRoot.querySelector('[part=toggleCheckbox]'); + this._checkboxLabel = shadowRoot.querySelector('[part=toggleLabel]'); + this._legendLabel = shadowRoot.querySelector('legend'); + this._permanentAside = shadowRoot.querySelector('aside'); + this._permanentCheckbox = shadowRoot.querySelector( + '[part=permanentCheckbox]', + ); + this._permanentLabel = shadowRoot.querySelector('[part=permanentLabel]'); + } + + connectedCallback() { + // Does the browser support native `prefers-color-scheme`? + const hasNativePrefersColorScheme = matchMedia(MQ_DARK).media !== NOT_ALL; + // Listen to `prefers-color-scheme` changes. + if (hasNativePrefersColorScheme) { + matchMedia(MQ_DARK).addListener(({matches}) => { + if (this.permanent) { + return; + } + this.mode = matches ? DARK : LIGHT; + this._dispatchEvent(COLOR_SCHEME_CHANGE, {colorScheme: this.mode}); + }); + } + // Set initial state, giving preference to a remembered value, then the + // native value (if supported), and eventually defaulting to a light + // experience. + let rememberedValue = false; + try { + rememberedValue = store.getItem(NAME); + } catch (err) { + // Do nothing. The user probably blocks cookies. + } + if (rememberedValue && [DARK, LIGHT].includes(rememberedValue)) { + this.mode = rememberedValue; + this._permanentCheckbox.checked = true; + this.permanent = true; + } else if (hasNativePrefersColorScheme) { + this.mode = matchMedia(MQ_LIGHT).matches ? LIGHT : DARK; + } + if (!this.mode) { + this.mode = LIGHT; + } + if (this.permanent && !rememberedValue) { + try { + store.setItem(NAME, this.mode); + } catch (err) { + // Do nothing. The user probably blocks cookies. + } + } + + // Default to toggle appearance. + if (!this.appearance) { + this.appearance = TOGGLE; + } + + // Update the appearance to either of toggle or switch. + this._updateAppearance(); + + // Update the radios + this._updateRadios(); + + // Make the checkbox reflect the state of the radios + this._updateCheckbox(); + + // Synchronize the behavior of the radio and the checkbox. + [this._lightRadio, this._darkRadio].forEach((input) => { + input.addEventListener('change', () => { + this.mode = this._lightRadio.checked ? LIGHT : DARK; + this._updateCheckbox(); + this._dispatchEvent(COLOR_SCHEME_CHANGE, {colorScheme: this.mode}); + }); + }); + this._darkCheckbox.addEventListener('change', () => { + this.mode = this._darkCheckbox.checked ? DARK : LIGHT; + this._updateRadios(); + this._dispatchEvent(COLOR_SCHEME_CHANGE, {colorScheme: this.mode}); + }); + + // Make remembering the last mode optional + this._permanentCheckbox.addEventListener('change', () => { + this.permanent = this._permanentCheckbox.checked; + this._dispatchEvent(PERMANENT_COLOR_SCHEME, { + permanent: this.permanent, + }); + }); + + // Finally update the mode and let the world know what's going on + this._updateMode(); + this._dispatchEvent(COLOR_SCHEME_CHANGE, {colorScheme: this.mode}); + this._dispatchEvent(PERMANENT_COLOR_SCHEME, { + permanent: this.permanent, + }); + } + + attributeChangedCallback(name, oldValue, newValue) { + if (name === MODE) { + if (![LIGHT, DARK].includes(newValue)) { + throw new RangeError(`Allowed values: "${LIGHT}" and "${DARK}".`); + } + // Only show the dialog programmatically on devices not capable of hover + // and only if there is a label + if (matchMedia('(hover:none)').matches && this.remember) { + this._showPermanentAside(); + } + if (this.permanent) { + try { + store.setItem(NAME, this.mode); + } catch (err) { + // Do nothing. The user probably blocks cookies. + } + } + this._updateRadios(); + this._updateCheckbox(); + this._updateMode(); + } else if (name === APPEARANCE) { + if (![TOGGLE, SWITCH].includes(newValue)) { + throw new RangeError(`Allowed values: "${TOGGLE}" and "${SWITCH}".`); + } + this._updateAppearance(); + } else if (name === PERMANENT) { + if (this.permanent) { + if (this.mode) { + try { + store.setItem(NAME, this.mode); + } catch (err) { + // Do nothing. The user probably blocks cookies. + } + } + } else { + try { + store.removeItem(NAME); + } catch (err) { + // Do nothing. The user probably blocks cookies. + } + } + this._permanentCheckbox.checked = this.permanent; + } else if (name === LEGEND) { + this._legendLabel.textContent = newValue; + } else if (name === REMEMBER) { + this._permanentLabel.textContent = newValue; + } else if (name === LIGHT) { + this._lightLabel.textContent = newValue; + if (this.mode === LIGHT) { + this._checkboxLabel.textContent = newValue; + } + } else if (name === DARK) { + this._darkLabel.textContent = newValue; + if (this.mode === DARK) { + this._checkboxLabel.textContent = newValue; + } + } + } + + _dispatchEvent(type, value) { + this.dispatchEvent( + new CustomEvent(type, { + bubbles: true, + composed: true, + detail: value, + }), + ); + } + + _updateAppearance() { + // Hide or show the light-related affordances dependent on the appearance, + // which can be "switch" or "toggle". + const appearAsToggle = this.appearance === TOGGLE; + this._lightRadio.hidden = appearAsToggle; + this._lightLabel.hidden = appearAsToggle; + this._darkRadio.hidden = appearAsToggle; + this._darkLabel.hidden = appearAsToggle; + this._darkCheckbox.hidden = !appearAsToggle; + this._checkboxLabel.hidden = !appearAsToggle; + } + + _updateRadios() { + if (this.mode === LIGHT) { + this._lightRadio.checked = true; + } else { + this._darkRadio.checked = true; + } + } + + _updateCheckbox() { + if (this.mode === LIGHT) { + this._checkboxLabel.style.setProperty( + `--${NAME}-checkbox-icon`, + `var(--${NAME}-light-icon,url("${DEFAULT_URL}moon.png"))`, + ); + this._checkboxLabel.textContent = this.light; + if (!this.light) { + this._checkboxLabel.ariaLabel = DARK; + } + this._darkCheckbox.checked = false; + } else { + this._checkboxLabel.style.setProperty( + `--${NAME}-checkbox-icon`, + `var(--${NAME}-dark-icon,url("${DEFAULT_URL}sun.png"))`, + ); + this._checkboxLabel.textContent = this.dark; + if (!this.dark) { + this._checkboxLabel.ariaLabel = LIGHT; + } + this._darkCheckbox.checked = true; + } + } + + _updateMode() { + if (this.mode === LIGHT) { + this._lightCSS.forEach((link) => { + link.media = ALL; + link.disabled = false; + }); + this._darkCSS.forEach((link) => { + link.media = NOT_ALL; + link.disabled = true; + }); + } else { + this._darkCSS.forEach((link) => { + link.media = ALL; + link.disabled = false; + }); + this._lightCSS.forEach((link) => { + link.media = NOT_ALL; + link.disabled = true; + }); + } + } + + _showPermanentAside() { + this._permanentAside.style.visibility = 'visible'; + setTimeout(() => { + this._permanentAside.style.visibility = 'hidden'; + }, 3000); + } +} + +customElements.define(NAME, DarkModeToggle); diff --git a/src/main/resources/darkmode/dark.css b/src/main/resources/darkmode/dark.css new file mode 100644 index 0000000..3a9bba6 --- /dev/null +++ b/src/main/resources/darkmode/dark.css @@ -0,0 +1,25 @@ +:root { + color-scheme: dark; + --bg-status-box: rgb(0, 90, 156); + --background-color: #3e3e42; + --border: white; + --htag-text: #83E9F0; + --bg-backlink: #6e6e67; + --text-backlink: white; + --text-color: rgb(240 240 240); + --shadow-color: rgb(240 240 240 / 50%); + --accent-color: rgb(0 0 240 / 50%); + --owl-bg-pre: rgb(15 15 15); + --link: #DDC1F2; + --link-visited: #BD7DEE; + --link-active: blue; + --href-hover: gray; + --bg-hlist: #67676E; + --bg-description: #535358; + --literal:#49C00D; + --type-ap: #EB4A4A; + --type-op: #75E1FC; + --type-dp: #75FA32; + --type-ni: #f3cdcd; +} + diff --git a/src/main/resources/darkmode/light.css b/src/main/resources/darkmode/light.css new file mode 100644 index 0000000..f4a5495 --- /dev/null +++ b/src/main/resources/darkmode/light.css @@ -0,0 +1,24 @@ +:root { + color-scheme: light; + --bg-status-box: rgb(0, 90, 156); + --background-color: white; + --border: navy; + --htag-text: #005A9C; + --bg-backlink: #F4FFFF; + --text-backlink: black; + --text-color: rgb(15 15 15); + --shadow-color: rgb(15 15 15 / 50%); + --accent-color: rgb(240 0 0 / 50%); + --owl-bg: #F9F9F9; + --link: #00c; + --link-visited: #609; + --link-active: #c00; + --href-hover: #ffa; + --bg-hlist: #F4FFFF; + --bg-description:rgb(242, 243, 244); + --literal:green; + --type-ap: maroon; + --type-op: navy; + --type-dp: green; + --type-ni: brown; +} diff --git a/src/main/resources/darkmode/moon.svg b/src/main/resources/darkmode/moon.svg new file mode 100644 index 0000000..fad89a4 --- /dev/null +++ b/src/main/resources/darkmode/moon.svg @@ -0,0 +1,7 @@ + + + + moon + + + diff --git a/src/main/resources/darkmode/slider.css b/src/main/resources/darkmode/slider.css new file mode 100644 index 0000000..a6aa55c --- /dev/null +++ b/src/main/resources/darkmode/slider.css @@ -0,0 +1,78 @@ +.darkmode { + position: fixed; + left: 0px; + bottom: 0px; +} + +dark-mode-toggle.slider::part(toggleLabel) { + display: inline-block; + position: relative; + height: calc(var(--dark-mode-toggle-icon-size, 1rem) * 2); + width: calc(var(--dark-mode-toggle-icon-size, 1rem) * 3.5); + background-color: #b7bbbd; + border-radius: var(--dark-mode-toggle-icon-size, 1rem); + transition: 0.4s; +} + +dark-mode-toggle.slider[mode="dark"]::part(toggleLabel) { + background-color: #4e5255; +} + +dark-mode-toggle.slider::part(toggleLabel)::before { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: calc(var(--dark-mode-toggle-icon-size, 1rem) * 0.25); + left: calc(var(--dark-mode-toggle-icon-size, 1rem) * 0.25); + height: calc(var(--dark-mode-toggle-icon-size, 1rem) * 1.5); + width: calc(var(--dark-mode-toggle-icon-size, 1rem) * 1.5); + border-radius: 100%; + box-shadow: 0 0.15em 0.3em rgb(0 0 0 / 15%), 0 0.2em 0.5em rgb(0 0 0 / 30%); + background-color: #fff; + color: #333; + transition: 0.4s; + content: ""; + background-position: center; + background-size: var(--dark-mode-toggle-icon-size, 1rem); + background-image: var(--dark-mode-toggle-light-icon, url("sun.svg")); + box-sizing: border-box; +} + +dark-mode-toggle.slider[mode="dark"]::part(toggleLabel)::before { + left: calc(100% - var(--dark-mode-toggle-icon-size, 1rem) * 1.75); + border-color: #000; + background-color: #ccc; + color: #000; + background-size: var(--dark-mode-toggle-icon-size, 1rem); + background-image: var(--dark-mode-toggle-dark-icon, url("moon.svg")); + filter: var(--dark-mode-toggle-icon-filter, invert(100%)); + box-shadow: 0 0.5px hsl(0deg 0% 100% / 16%); +} + +dark-mode-toggle.slider::part(toggleLabel)::after { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: calc(var(--dark-mode-toggle-icon-size, 1rem) * 0.25); + left: calc(100% - var(--dark-mode-toggle-icon-size, 1rem) * 1.75); + height: calc(var(--dark-mode-toggle-icon-size, 1rem) * 1.5); + width: calc(var(--dark-mode-toggle-icon-size, 1rem) * 1.5); + border-radius: 100%; + color: #333; + content: ""; + background-position: center; + background-size: var(--dark-mode-toggle-icon-size, 1rem); + background-image: var(--dark-mode-toggle-dark-icon, url("moon.svg")); + background-repeat: no-repeat; + box-sizing: border-box; + opacity: 0.5; +} + +dark-mode-toggle.slider[mode="dark"]::part(toggleLabel)::after { + left: calc(var(--dark-mode-toggle-icon-size, 1rem) * 0.25); + background-image: var(--dark-mode-toggle-light-icon, url("sun.svg")); + filter: var(--dark-mode-toggle-icon-filter, invert(100%)); +} + diff --git a/src/main/resources/darkmode/sun.svg b/src/main/resources/darkmode/sun.svg new file mode 100644 index 0000000..0b18941 --- /dev/null +++ b/src/main/resources/darkmode/sun.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/main/resources/lode/extra.css b/src/main/resources/lode/extra.css index 16689d3..2cc7356 100644 --- a/src/main/resources/lode/extra.css +++ b/src/main/resources/lode/extra.css @@ -3,13 +3,13 @@ body { } h1 { - line-height: 110%; + line-height: 110%; } .hlist { - border: 1px solid navy; + border: 1px solid var(--border); padding:5px; - background-color: #F4FFFF; + background-color: var(--bg-hlist); } .hlist li { @@ -21,7 +21,7 @@ h1 { } .entity { - border: 1px solid navy; + border: 1px solid var(--border); margin:5px 0px 5px 0px; padding: 5px; } @@ -33,22 +33,27 @@ h1 { .type-op { cursor:help; - color:navy; + color:var(--type-op); } .type-dp { cursor:help; - color:green; + color:var(--type-dp); +} + +.type-ep { + cursor:help; + color:mediumpurple; } .type-ap { cursor:help; - color:maroon; + color:var(--type-ap); } .type-ni { cursor:help; - color:brown; + color:var(--type-ni); } .logic { @@ -59,7 +64,7 @@ h1 { h3 { margin-top: 3px; padding-bottom: 5px; - border-bottom: 1px solid navy; + border-bottom: 1px solid var(--border); } h2 { @@ -77,13 +82,13 @@ dt { .description { border-top: 1px dashed gray; border-bottom: 1px dashed gray; - background-color: rgb(242, 243, 244); + background-color: var(--bg-description); margin-top:5px; padding-bottom:5px; } .description dl { - background-color: rgb(242, 243, 244); + background-color: var(--bg-description); } .description ul { @@ -98,7 +103,8 @@ dt { color:black; padding: 2px; border: 1px dotted navy; - background-color: #F4FFFF; + background-color: var(--bg-backlink); + color: var(--text-backlink); } .imageblock { @@ -119,6 +125,6 @@ dt { } .literal { - color:green; + color:var(--literal); font-style:italic; } \ No newline at end of file diff --git a/src/main/resources/lode/lodeprimer.css b/src/main/resources/lode/lodeprimer.css index 3136dac..5a73ae3 100644 --- a/src/main/resources/lode/lodeprimer.css +++ b/src/main/resources/lode/lodeprimer.css @@ -84,7 +84,7 @@ div.fssyntax pre, div.rdfxml pre, div.owlxml pre, div.turtle pre, div.manchester /* The actual status box */ .status div { display: block; - background: rgb(0, 90, 156); + background: var(--bg-status-box); color: white; width: 24em; padding-top: 0.3em; diff --git a/src/main/resources/lode/owl.css b/src/main/resources/lode/owl.css index 9c00876..8a7bf08 100644 --- a/src/main/resources/lode/owl.css +++ b/src/main/resources/lode/owl.css @@ -211,7 +211,7 @@ table.canonicalparsing td.two { /* override mediawiki's beautiful DL styling... */ dl { - background: white; + background: var(--background-color); width: 100%; border: none; margin-top: 0; @@ -240,9 +240,9 @@ color: red /* just copying from wiki, so it stays through TR. Currently affects Primer, at least */ pre { - background-color:#F9F9F9; + background-color: var(--owl-bg); border:1px dashed #2F6FAB; - color:black; + color:var(--text-color); line-height:1.1em; padding:1em; } \ No newline at end of file diff --git a/src/main/resources/lode/rec.css b/src/main/resources/lode/rec.css index d8a1ff2..dd541eb 100644 --- a/src/main/resources/lode/rec.css +++ b/src/main/resources/lode/rec.css @@ -11,16 +11,16 @@ body { padding: 2em 1em 2em 70px; margin: 0; font-family: sans-serif; - color: black; - background: white; + color: var(--text-color); + background: var(--background-color); background-position: top left; background-attachment: fixed; background-repeat: no-repeat; counter-reset:section; } -:link { color: #00C; background: transparent } -:visited { color: #609; background: transparent } -a:active { color: #C00; background: transparent } +:link { color: var(--link); background: transparent } +:visited { color: var(--link-visited); background: transparent } +a:active { color: var(--link-active); background: transparent } a:link img, a:visited img { border-style: none } /* no border on img links */ @@ -41,7 +41,7 @@ h3.list:before{counter-increment:subsection;content: counter(section) "." counte h3.list{margin-top: 20px; border-bottom: 0px; } /* background should be transparent, but WebTV has a bug */ -h1, h2, h3 { color: #005A9C; background: white } +h1, h2, h3 { color: var(--htag-text); background: var(--background-color) } h1 { font: 170% sans-serif } h2 { font: 140% sans-serif } h3 { font: 120% sans-serif } @@ -59,7 +59,7 @@ p.copyright { font-size: small } p.copyright small { font-size: small } @media screen { /* hide from IE3 */ -a[href]:hover { background: #ffa } +a[href]:hover { background: var(--href-hover) } } pre { margin-left: 2em }