Your look: Icons, Auto, Line or Solid, with a live sample (#70)

OP OpenVibers committed 12 days ago · e8ad459a23 · 3 files, +13 −1

Plan L56 (the owner, 2026-11-01: 'the user can choose between solid and line icons… icon settings on openvibe.design…
across the network'). openvibe.design/look has the choice beside light or dark, text size and motion; it is the display
setting 'icons' (openvibe-shared 4.71.0), saved to the account (Network #476) and painted on every site. The sample
under it is ordinary page icons, small and large, so Auto's switch from solid to line shows as it changes.

Changes

ddiff --git a/public/css/design.css b/public/css/design.css
iindex 827e1b1..0f049d3 100644
---- a/public/css/design.css
++++ b/public/css/design.css
@@@ -571,3 +571,9 @@ html.ar-fit .ar-shot--desktop .ar-shot-frame, html.ar-fit .ar-shot--desktop::bef
  @supports selector(:has(*)) { @media (max-width: 640px) {
    .pick .sc-scene-text > h2 { display: none; }
  } }
++
++/* The icons sample under the Icons choice: small and large, so Auto's switch shows (plan L56). */
++.lk-icons{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:4px 0 14px;padding:10px 14px;border-radius:12px;background:var(--bg-tertiary,rgba(255,255,255,.04));color:var(--text-primary,#e6edf7)}
++.lk-icons>span{display:inline-flex;gap:12px;font-size:15px}
++.lk-icons .lk-icons-big{font-size:26px;gap:16px}
++.lk-icons small{flex-basis:100%;color:var(--text-muted,#8a96a8);font-size:12.5px}
ddiff --git a/public/js/look.js b/public/js/look.js
iindex 2db23ab..a26b3b2 100644
---- a/public/js/look.js
++++ b/public/js/look.js
@@@ -39,6 +39,7 @@
          check('scheme', L.scheme.get());
          check('text', d.text);
          check('motion', d.motion);
++        check('icons', d.icons || 'auto');
          const s = root.querySelector('input[name="seasonal"]');
          if (s) s.checked = d.seasonal !== 'off';
          for (const k of Object.keys(COMFORT)) { const c = root.querySelector(`input[name="${k}"]`); if (c) c.checked = d[k] === COMFORT[k][0]; }
@@@ -48,7 +49,7 @@
          if (!i || !i.name) return;
          if (i.name === 'scheme') L.scheme.set(i.value);
          else if (i.name === 'seasonal') L.display.set({ seasonal: i.checked ? 'on' : 'off' });
--        else if (i.name === 'text' || i.name === 'motion') L.display.set({ [i.name]: i.value });
++        else if (i.name === 'text' || i.name === 'motion' || i.name === 'icons') L.display.set({ [i.name]: i.value });
          else if (COMFORT[i.name]) L.display.set({ [i.name]: COMFORT[i.name][i.checked ? 0 : 1] });
          showTheme();
          showSettings();
ddiff --git a/server/views/look.js b/server/views/look.js
iindex 8fdd476..c9b2ea7 100644
---- a/server/views/look.js
++++ b/server/views/look.js
@@@ -27,6 +27,11 @@ function lookPage({ themes = [], me = {} } = {}) {
          body: kit.seg({ name: 'scheme', label: 'Light or dark', options: [['light', 'Light'], ['dark', 'Dark'], ['auto', 'Match my device']], value: 'auto' })
              + kit.seg({ name: 'text', label: 'Text size', options: [['100', 'Standard'], ['112', 'Larger'], ['125', 'Largest']], value: '100' })
              + kit.seg({ name: 'motion', label: 'Motion', options: [['auto', 'Full'], ['reduced', 'Reduced']], value: 'auto' })
++            // Icons (openvibe-shared 4.71.0, plan L56; the owner, 2026-11-01: "a setting to prefer a certain icon type…
++            // configurable for users in most cases"): the sample under it is ordinary page markup, drawn by ov-glyphs.js, so
++            // it changes as the choice does.
++            + kit.seg({ name: 'icons', label: 'Icons', options: [['auto', 'Auto'], ['line', 'Line'], ['solid', 'Solid']], value: 'auto' })
++            + `<p class="lk-icons" aria-label="A sample of the icons"><span>${['fa-house', 'fa-tower-broadcast', 'fa-comments', 'fa-bell', 'fa-heart', 'fa-user'].map((n) => `<i class="fa-solid ${n}" aria-hidden="true"></i>`).join('')}</span><span class="lk-icons-big">${['fa-house', 'fa-tower-broadcast', 'fa-comments', 'fa-bell'].map((n) => `<i class="fa-solid ${n}" aria-hidden="true"></i>`).join('')}</span><small>Auto: line, solid when small and for the tab you are on.</small></p>`
              + kit.switchRow({ name: 'seasonal', label: 'The season\'s themes', hint: 'Halloween and winter stand in for the default theme while they last', on: true }),
      });
      // Comfort (openvibe-shared 4.45.0): how any theme reads for this person. The sample under the switches is ordinary page

diff --git a/public/css/design.css b/public/css/design.css

index 827e1b1..0f049d3 100644

--- a/public/css/design.css

+++ b/public/css/design.css

@@ -571,3 +571,9 @@ html.ar-fit .ar-shot--desktop .ar-shot-frame, html.ar-fit .ar-shot--desktop::bef

@supports selector(:has(*)) { @media (max-width: 640px) {

.pick .sc-scene-text > h2 { display: none; }

} }

+/* The icons sample under the Icons choice: small and large, so Auto's switch shows (plan L56). */

+.lk-icons{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:4px 0 14px;padding:10px 14px;border-radius:12px;background:var(--bg-tertiary,rgba(255,255,255,.04));color:var(--text-primary,#e6edf7)}

+.lk-icons>span{display:inline-flex;gap:12px;font-size:15px}

+.lk-icons .lk-icons-big{font-size:26px;gap:16px}

+.lk-icons small{flex-basis:100%;color:var(--text-muted,#8a96a8);font-size:12.5px}

diff --git a/public/js/look.js b/public/js/look.js

index 2db23ab..a26b3b2 100644

--- a/public/js/look.js

+++ b/public/js/look.js

@@ -39,6 +39,7 @@

check('scheme', L.scheme.get());

check('text', d.text);

check('motion', d.motion);

+ check('icons', d.icons || 'auto');

const s = root.querySelector('input[name="seasonal"]');

if (s) s.checked = d.seasonal !== 'off';

for (const k of Object.keys(COMFORT)) { const c = root.querySelector(`input[name="${k}"]`); if (c) c.checked = d[k] === COMFORT[k][0]; }

@@ -48,7 +49,7 @@

if (!i || !i.name) return;

if (i.name === 'scheme') L.scheme.set(i.value);

else if (i.name === 'seasonal') L.display.set({ seasonal: i.checked ? 'on' : 'off' });

- else if (i.name === 'text' || i.name === 'motion') L.display.set({ [i.name]: i.value });

+ else if (i.name === 'text' || i.name === 'motion' || i.name === 'icons') L.display.set({ [i.name]: i.value });

else if (COMFORT[i.name]) L.display.set({ [i.name]: COMFORT[i.name][i.checked ? 0 : 1] });

showTheme();

showSettings();

diff --git a/server/views/look.js b/server/views/look.js

index 8fdd476..c9b2ea7 100644

--- a/server/views/look.js

+++ b/server/views/look.js

@@ -27,6 +27,11 @@ function lookPage({ themes = [], me = {} } = {}) {

body: kit.seg({ name: 'scheme', label: 'Light or dark', options: [['light', 'Light'], ['dark', 'Dark'], ['auto', 'Match my device']], value: 'auto' })

+ kit.seg({ name: 'text', label: 'Text size', options: [['100', 'Standard'], ['112', 'Larger'], ['125', 'Largest']], value: '100' })

+ kit.seg({ name: 'motion', label: 'Motion', options: [['auto', 'Full'], ['reduced', 'Reduced']], value: 'auto' })

+ // Icons (openvibe-shared 4.71.0, plan L56; the owner, 2026-11-01: "a setting to prefer a certain icon type…

+ // configurable for users in most cases"): the sample under it is ordinary page markup, drawn by ov-glyphs.js, so

+ // it changes as the choice does.

+ + kit.seg({ name: 'icons', label: 'Icons', options: [['auto', 'Auto'], ['line', 'Line'], ['solid', 'Solid']], value: 'auto' })

+ + `${['fa-house', 'fa-tower-broadcast', 'fa-comments', 'fa-bell', 'fa-heart', 'fa-user'].map((n) => ``).join('')}${['fa-house', 'fa-tower-broadcast', 'fa-comments', 'fa-bell'].map((n) => ``).join('')}Auto: line, solid when small and for the tab you are on.`

+ kit.switchRow({ name: 'seasonal', label: 'The season\'s themes', hint: 'Halloween and winter stand in for the default theme while they last', on: true }),

});

// Comfort (openvibe-shared 4.45.0): how any theme reads for this person. The sample under the switches is ordinary page