diff --git a/static/css/notes2.css b/static/css/notes2.css index e02b90e..206c04b 100644 --- a/static/css/notes2.css +++ b/static/css/notes2.css @@ -4,12 +4,22 @@ --content-width: 900px; --thumbnail-width: 300px; --thumbnail-height: 100px; + + /* + --colorize: invert(10%) sepia(61%) saturate(5017%) hue-rotate(323deg) brightness(90%) contrast(109%); + */ + --colorize: invert(59%) sepia(71%) saturate(3270%) hue-rotate(327deg) brightness(100%) contrast(99%); + } html { background-color: #fff; } +.colorize { + filter: var(--colorize); +} + #notes2 { min-height: 100vh; @@ -21,7 +31,7 @@ html { "tree hum content content ding" "tree hum blank blank ding" ; - grid-template-columns: min-content minmax(16px, 1fr) minmax(min-content, calc(900px - 120px)) 120px minmax(16px, 1fr); + grid-template-columns: min-content minmax(16px, 1fr) minmax(min-content, calc(900px - 156px)) 156px minmax(16px, 1fr); grid-template-rows: min-content min-content 48px 1fr; diff --git a/static/images/icon_history.svg b/static/images/icon_history.svg new file mode 100644 index 0000000..af13eb9 --- /dev/null +++ b/static/images/icon_history.svg @@ -0,0 +1,49 @@ + + + + + + + + history + + + diff --git a/static/images/icon_markdown.svg b/static/images/icon_markdown.svg index f8d0aae..e926ea4 100644 --- a/static/images/icon_markdown.svg +++ b/static/images/icon_markdown.svg @@ -9,8 +9,8 @@ role="img" version="1.1" id="svg1" - sodipodi:docname="markdown.svg" - inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)" + sodipodi:docname="icon_markdown.svg" + inkscape:version="1.4.2 (ebf0e94, 2025-05-08)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" @@ -33,10 +33,10 @@ inkscape:zoom="0.70710678" inkscape:cx="453.96255" inkscape:cy="60.811183" - inkscape:window-width="2190" - inkscape:window-height="1401" - inkscape:window-x="1463" - inkscape:window-y="0" + inkscape:window-width="1916" + inkscape:window-height="1161" + inkscape:window-x="0" + inkscape:window-y="18" inkscape:window-maximized="1" inkscape:current-layer="svg1" /> + style="stroke-width:15.2119;fill:#000000;fill-opacity:1" /> <metadata id="metadata1"> <rdf:RDF> diff --git a/static/images/icon_refresh.svg b/static/images/icon_refresh.svg index a6aa907..870ff06 100644 --- a/static/images/icon_refresh.svg +++ b/static/images/icon_refresh.svg @@ -25,11 +25,11 @@ inkscape:document-units="mm" inkscape:zoom="23.548693" inkscape:cx="6.9218279" - inkscape:cy="12.5697" + inkscape:cy="12.612165" inkscape:window-width="1916" inkscape:window-height="1161" inkscape:window-x="0" - inkscape:window-y="0" + inkscape:window-y="18" inkscape:window-maximized="1" inkscape:current-layer="layer1" showgrid="false" /> @@ -45,6 +45,6 @@ <path d="m 104.775,150.01875 a 1.5875,1.5875 0 0 1 -1.5875,-1.5875 c 0,-0.26458 0.0661,-0.52123 0.18521,-0.74083 l -0.38629,-0.3863 c -0.20638,0.32544 -0.32809,0.71173 -0.32809,1.12713 a 2.1166667,2.1166667 0 0 0 2.11667,2.11667 v 0.79375 l 1.05833,-1.05834 -1.05833,-1.05833 m 0,-2.91042 v -0.79375 l -1.05833,1.05834 1.05833,1.05833 v -0.79375 a 1.5875,1.5875 0 0 1 1.5875,1.5875 c 0,0.26458 -0.0661,0.52123 -0.18521,0.74083 l 0.38629,0.38629 c 0.20638,-0.32543 0.32809,-0.71172 0.32809,-1.12712 a 2.1166667,2.1166667 0 0 0 -2.11667,-2.11667 z" id="path1" - style="stroke-width:0.264583;fill:#fe5f55;fill-opacity:1" /> + style="stroke-width:0.264583;fill:#000000;fill-opacity:1" /> </g> </svg> diff --git a/static/images/icon_save.svg b/static/images/icon_save.svg index 0846a73..6aa44b7 100644 --- a/static/images/icon_save.svg +++ b/static/images/icon_save.svg @@ -7,7 +7,7 @@ viewBox="0 0 4.7624998 4.7624998" version="1.1" id="svg1" - inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)" + inkscape:version="1.4.2 (ebf0e94, 2025-05-08)" sodipodi:docname="icon_save.svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" @@ -24,12 +24,12 @@ inkscape:deskcolor="#d1d1d1" inkscape:document-units="mm" inkscape:zoom="5.6568542" - inkscape:cx="41.454135" - inkscape:cy="-3.8890873" - inkscape:window-width="1093" - inkscape:window-height="1401" - inkscape:window-x="2560" - inkscape:window-y="0" + inkscape:cx="41.365747" + inkscape:cy="-3.7123106" + inkscape:window-width="1916" + inkscape:window-height="1161" + inkscape:window-x="0" + inkscape:window-y="18" inkscape:window-maximized="1" inkscape:current-layer="layer1" /> <defs @@ -44,6 +44,6 @@ <path d="m 43.65625,209.81458 h -2.645833 v -1.05833 h 2.645833 m -0.79375,3.70417 a 0.79375,0.79375 0 0 1 -0.79375,-0.79375 0.79375,0.79375 0 0 1 0.79375,-0.79375 0.79375,0.79375 0 0 1 0.79375,0.79375 0.79375,0.79375 0 0 1 -0.79375,0.79375 m 1.322917,-4.23334 h -3.175 c -0.293688,0 -0.529167,0.23813 -0.529167,0.52917 v 3.70417 a 0.52916667,0.52916667 0 0 0 0.529167,0.52916 h 3.704166 a 0.52916667,0.52916667 0 0 0 0.529167,-0.52916 v -3.175 z" id="path1" - style="stroke-width:0.264583;fill:#fe5f55;fill-opacity:1" /> + style="stroke-width:0.264583;fill:#000000;fill-opacity:1" /> </g> </svg> diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs index d3f3a6e..fecfa0c 100644 --- a/static/js/page_node.mjs +++ b/static/js/page_node.mjs @@ -9,7 +9,7 @@ export class N2PageNodeUI extends CustomHTMLElement { <style> .el-functions { display: grid; - grid-template-columns: 1fr min-content min-content; + grid-template-columns: 1fr repeat(3, min-content); grid-gap: 8px; align-items: center; justify-items: end; @@ -25,9 +25,10 @@ export class N2PageNodeUI extends CustomHTMLElement { <div data-el="node-markdown" tabindex=1></div> <div data-el="functions"> - <img data-el="icon-markdown"> <img data-el="icon-save" src="/images/${_VERSION}/icon_save_disabled.svg"> - <img data-el="icon-table-format" src="/images/${_VERSION}/icon_table.svg"> + <img data-el="icon-markdown"> + <img data-el="icon-table-format" class="colorize" src="/images/${_VERSION}/icon_table.svg"> + <img data-el="icon-history" class="colorize" src="/images/${_VERSION}/icon_history.svg"> </div> ` }// }}} @@ -49,12 +50,14 @@ export class N2PageNodeUI extends CustomHTMLElement { _mbus.subscribe('NODE_MODIFIED', () => { document.querySelector('#crumbs .crumbs')?.classList.add('node-modified') this.elIconSave.src = `/images/${_VERSION}/icon_save.svg` + this.elIconSave.classList.add('colorize') this.renderName() }) _mbus.subscribe('NODE_UNMODIFIED', () => { document.querySelector('#crumbs .crumbs')?.classList.remove('node-modified') this.elIconSave.src = `/images/${_VERSION}/icon_save_disabled.svg` + this.elIconSave.classList.remove('colorize') }) _mbus.subscribe('MARKDOWN_TOGGLE', () => this.showMarkdown(!this.showMarkdown())) @@ -123,10 +126,12 @@ export class N2PageNodeUI extends CustomHTMLElement { case true: this.elNodeMarkdown.innerHTML = this.marked.parse(this.elNodeContent.value) this.elIconMarkdown.src = `/images/${_VERSION}/icon_markdown.svg` + this.elIconMarkdown.classList.add('colorize') this.classList.add('show-markdown') break case false: this.elIconMarkdown.src = `/images/${_VERSION}/icon_markdown_hollow.svg` + this.elIconMarkdown.classList.remove('colorize') this.classList.remove('show-markdown') break case null: diff --git a/static/js/tree.mjs b/static/js/tree.mjs index 408e281..3bbf2df 100644 --- a/static/js/tree.mjs +++ b/static/js/tree.mjs @@ -12,8 +12,8 @@ export class N2Tree extends CustomHTMLElement { <img data-el="search" class='search' src="/images/${_VERSION}/icon_search.svg" style="height: 22px" /> </div> <div class="icons"> - <img data-el="sync" class='sync' src="/images/${_VERSION}/icon_refresh.svg" /> - <img data-el="settings" class='settings' src="/images/${_VERSION}/icon_settings.svg" /> + <img data-el="sync" class='sync colorize' src="/images/${_VERSION}/icon_refresh.svg" /> + <img data-el="settings" class='settings colorize' src="/images/${_VERSION}/icon_settings.svg" /> </div> <div data-el="treenodes"></div> ` @@ -50,10 +50,10 @@ export class N2Tree extends CustomHTMLElement { this.populateFirstLevel() /* XXX - set color */ - let color = new Color(255, 96, 80) + let color = new Color(0x80, 0x00, 0x33) let solver = new Solver(color) let result = solver.solve() - this.elSettings.style.filter = result.filter + // console.log(result.filter) }// }}} render() {// {{{ if (this.rendered)