From 937341f7e39fe9e3829780cb2b1ccfb3cc9cf51b Mon Sep 17 00:00:00 2001 From: katsuhisa yuasa Date: Sun, 22 Sep 2024 17:33:39 +0900 Subject: [PATCH] use elements to display svg icons Its colors are adjusted using CSS filter. https://codepen.io/sosuke/pen/Pjoqqp --- source/index.html | 37 +++++++++--------------------- source/sidebar-icon-connection.svg | 4 ++++ source/sidebar-icon-node.svg | 3 +++ source/sidebar-icon-weight.svg | 11 +++++++++ source/view.js | 6 ++--- 5 files changed, 32 insertions(+), 29 deletions(-) create mode 100644 source/sidebar-icon-connection.svg create mode 100644 source/sidebar-icon-node.svg create mode 100644 source/sidebar-icon-weight.svg diff --git a/source/index.html b/source/index.html index a8bea97219..ccbead5492 100644 --- a/source/index.html +++ b/source/index.html @@ -232,14 +232,15 @@ .sidebar-find-query { width: 100vw; background: none; font-family: inherit; font-size: 13px; padding: 8px 8px 8px 8px; border: 0; outline: 0; } .sidebar-find-toggle { margin-left: auto; margin-right: 2px; width: 16px; height: 16px; cursor: pointer; } .sidebar-find-toggle input[type="checkbox"] { display: none; } -.sidebar-find-toggle input[type="checkbox"]:not(:checked) + svg { fill: #ccc; stroke: #ccc; } -.sidebar-find-toggle input[type="checkbox"]:checked + svg { fill: #555; stroke: #555; } -.sidebar-find-toggle-icon { stroke: #555; fill: #555; width: 16px; height: 16px; } +.sidebar-find-toggle input[type="checkbox"]:not(:checked) + img { /* #ccc */ filter: invert(89%) sepia(2%) saturate(1448%) hue-rotate(193deg) brightness(122%) contrast(60%); } +.sidebar-find-toggle input[type="checkbox"]:checked + img { /* #555 */ filter: invert(33%) sepia(0%) saturate(0%) hue-rotate(167deg) brightness(94%) contrast(86%); } .sidebar-find-content { flex-grow: 1; padding: 0px 20px 20px 20px; padding-right: 20px; overflow-y: auto; list-style-type: none; overflow-y: auto; margin: 0; } -.sidebar-find-content li { color: #666; height: 22px; padding: 0 12px 0 12px; outline: 0; white-space: nowrap; border-radius: 3px; user-select: none; -webkit-user-select: none; -moz-user-select: none; } +.sidebar-find-content li { color: #666; height: 22px; padding: 0 12px 0 12px; outline: 0; white-space: nowrap; border-radius: 3px; user-select: none; -webkit-user-select: none; -moz-user-select: none; display: flex; align-items: center; } .sidebar-find-content li:hover { background: #e5e5e5; color: #000; } -.sidebar-find-content li>span { font-size: 13px; line-height: 22px; padding-left: 2px; pointer-events: none; } -.sidebar-find-content-icon { stroke: #555; fill: #555; float: left; width: 16px; height: 16px; margin: 3px; } +.sidebar-find-content-icon { + /* #555 */ filter: invert(28%) sepia(0%) saturate(0%) hue-rotate(167deg) brightness(100%) contrast(75%); + float: left; width: 16px; height: 16px; margin: 3px; contain: strict; pointer-events: none; + } .sidebar-documentation { flex-grow: 1; padding: 0px 20px 20px 20px; overflow-y: auto; font-size: 13px; line-height: 1.5; margin: 0; } .sidebar-documentation h1 { font-weight: bold; font-size: 13px; line-height: 1.25; border-bottom: 1px solid #e8e8e8; padding-bottom: 0.3em; margin-top: 0; margin-bottom: 16px; } .sidebar-documentation h2 { font-weight: bold; font-size: 13px; line-height: 1.25; margin-top: 20px; margin-bottom: 16px; text-transform: uppercase; border: 0; } @@ -273,11 +274,11 @@ .sidebar-documentation code { background-color: #1e1e1e; } .sidebar-documentation pre { background-color: #1e1e1e; } .sidebar-find-search { background: #383838; color: #dfdfdf; border-color: #424242; } - .sidebar-find-toggle input[type="checkbox"]:not(:checked) + svg { fill: #555; stroke: #555; } - .sidebar-find-toggle input[type="checkbox"]:checked + svg { fill: #aaa; stroke: #aaa; } + .sidebar-find-toggle input[type="checkbox"]:not(:checked) + img { /* #555 */ filter: invert(33%) sepia(0%) saturate(0%) hue-rotate(167deg) brightness(94%) contrast(86%); } + .sidebar-find-toggle input[type="checkbox"]:checked + img { /* #aaa */ filter: invert(72%) sepia(0%) saturate(17%) hue-rotate(142deg) brightness(94%) contrast(92%); } .sidebar-find-content li { color: #aaaaaa; } .sidebar-find-content li:hover { background: #383838; color: #dfdfdf; } - .sidebar-find-content-icon { stroke: #888888; fill: #888888; } + .sidebar-find-content-icon { /* #888 */ filter: invert(51%) sepia(71%) saturate(0%) hue-rotate(166deg) brightness(92%) contrast(90%); } .sidebar-item-value-expander { color: #888; } .sidebar-item-value-expander:hover { color: #e5e5e5; } .sidebar-item-value-button { color: #888; } @@ -299,23 +300,7 @@

×
- -
  1. - -
  2. - - -
  3. - - - - - - - - - -
+
diff --git a/source/sidebar-icon-connection.svg b/source/sidebar-icon-connection.svg new file mode 100644 index 0000000000..d69e14c234 --- /dev/null +++ b/source/sidebar-icon-connection.svg @@ -0,0 +1,4 @@ + + + + diff --git a/source/sidebar-icon-node.svg b/source/sidebar-icon-node.svg new file mode 100644 index 0000000000..a74954089d --- /dev/null +++ b/source/sidebar-icon-node.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/sidebar-icon-weight.svg b/source/sidebar-icon-weight.svg new file mode 100644 index 0000000000..889b61f05a --- /dev/null +++ b/source/sidebar-icon-weight.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/source/view.js b/source/view.js index d1f42a1cec..6411de7477 100644 --- a/source/view.js +++ b/source/view.js @@ -3051,7 +3051,7 @@ view.ValueView = class extends view.Expander { const element = this.createElement('div', 'sidebar-item-value-button'); element.classList.add('sidebar-item-value-button-tool'); element.setAttribute('title', 'Show Tensor'); - element.innerHTML = ``; + element.innerHTML = ``; element.addEventListener('pointerenter', () => this.emit('focus', this._value)); element.addEventListener('pointerleave', () => this.emit('blur', this._value)); element.style.cursor = 'pointer'; @@ -3202,7 +3202,7 @@ view.TensorView = class extends view.Expander { this.enable(); this._button = this.createElement('div', 'sidebar-item-value-button'); this._button.setAttribute('style', 'float: left;'); - this._button.innerHTML = ``; + this._button.innerHTML = ``; this._button.addEventListener('click', () => this.toggle()); this.control(this._button); const line = this.createElement('div', 'sidebar-item-value-line'); @@ -3897,7 +3897,7 @@ view.FindSidebar = class extends view.Control { _add(value, content, icon) { const element = this._lis[icon].cloneNode(true); - element.lastChild.innerHTML = content; + element.lastChild.nodeValue = content; this._table.set(element, value); this._content.appendChild(element); }