Compare commits

..
1 Commits
Author SHA1 Message Date
cedricandClaude Opus 5.5 0bfea7cd93 UI: replace Lucide icons with Papicons
Swap the inline SVG icons of the web UI (top bar, view mode, time range,
export, close, empty state, back to top, settings tabs, save, delete,
lock) for their Papicons equivalents (MIT, Association Papillon).
Papicons are filled shapes: they carry class "pi", which sets
fill: currentColor and no stroke, so the stroked Lucide icons that stay
(zoom out, Docker badge) are unaffected. Add THIRD_PARTY_NOTICES.md with
the Papicons MIT notice and a pointer from both READMEs.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
2026-11-01 20:03:15 +01:00
7 changed files with 80 additions and 30 deletions

No files matched your search

+5
View File
@@ -729,3 +729,8 @@ Pour mettre à jour l'une d'elles :
Avec Docker Desktop (macOS/Windows), l'IP source vue par le conteneur pour les paquets UDP est Avec Docker Desktop (macOS/Windows), l'IP source vue par le conteneur pour les paquets UDP est
la passerelle Docker. Le champ `host` vient toujours de l'en-tête syslog, qui porte normalement la passerelle Docker. Le champ `host` vient toujours de l'en-tête syslog, qui porte normalement
le vrai nom de l'émetteur. le vrai nom de l'émetteur.
## Composants tiers
Les icônes de l'interface viennent de [Papicons](https://github.com/PapillonApp/papicons) (MIT) et, pour quelques-unes,
de [Lucide](https://lucide.dev) (ISC). Licences et notices : [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md).
+5
View File
@@ -671,3 +671,8 @@ To update one of them:
With Docker Desktop (macOS/Windows), the source IP seen by the container for UDP packets is With Docker Desktop (macOS/Windows), the source IP seen by the container for UDP packets is
the Docker gateway. The `host` field still comes from the syslog header, which normally the Docker gateway. The `host` field still comes from the syslog header, which normally
carries the sender's real name. carries the sender's real name.
## Third-party assets
UI icons come from [Papicons](https://github.com/PapillonApp/papicons) (MIT) and, for a few of them,
[Lucide](https://lucide.dev) (ISC). Licenses and notices: [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md).
+39
View File
@@ -0,0 +1,39 @@
# Third-party notices
## Papicons
Most UI icons (inline SVG with `class="pi"` in `web/index.html`, `web/login.html` and
`web/app.js`) come from Papicons: https://github.com/PapillonApp/papicons
```
MIT License
Copyright (c) 2025 Association Papillon
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```
## Lucide
The few icons Papicons has no equivalent for (zoom out in the time range bar, Docker source
badge) come from Lucide (ISC license): https://github.com/lucide-icons/lucide/blob/main/LICENSE
## Fonts
The bundled fonts are covered by the license files next to them in `web/fonts/`.
+3 -3
View File
@@ -2357,7 +2357,7 @@ function fileRowHTML(s) {
<select class="field" data-f="format">${FILE_FORMATS.map((f) => `<option value="${f}"${s.format === f ? ' selected' : ''}>${esc(t('fmt_' + f))}</option>`).join('')}</select> <select class="field" data-f="format">${FILE_FORMATS.map((f) => `<option value="${f}"${s.format === f ? ' selected' : ''}>${esc(t('fmt_' + f))}</option>`).join('')}</select>
<input type="text" data-f="host" value="${esc(s.host)}" placeholder="${esc(filesState?.defaultHost || t('fileHost'))}" aria-label="${esc(t('fileHost'))}" title="${esc(t('fileHost'))}" spellcheck="false"> <input type="text" data-f="host" value="${esc(s.host)}" placeholder="${esc(filesState?.defaultHost || t('fileHost'))}" aria-label="${esc(t('fileHost'))}" title="${esc(t('fileHost'))}" spellcheck="false">
<button class="icon-btn danger" type="button" data-del title="${esc(t('del'))}" aria-label="${esc(t('del'))}"> <button class="icon-btn danger" type="button" data-del title="${esc(t('del'))}" aria-label="${esc(t('del'))}">
<svg viewBox="0 0 24 24"><path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3"/></svg> <svg class="pi" viewBox="0 0 24 24"><path d="M14.876 10.2891C17.2815 10.2054 18.4841 10.1634 19.1094 10.876C19.7347 11.5886 19.5423 12.7465 19.1562 15.0625L18.835 16.9863C18.4359 19.3808 18.2367 20.5781 17.3975 21.2891C16.5582 22 15.3444 22 12.917 22H11.082C8.65486 22 7.44074 22 6.60156 21.2891C5.76256 20.5781 5.5631 19.3805 5.16406 16.9863L4.84375 15.0625C4.45778 12.7467 4.26459 11.5886 4.88965 10.876C5.51497 10.1633 6.71833 10.2054 9.12402 10.2891C10.0581 10.3216 11.0413 10.3428 12 10.3428C12.9587 10.3428 13.9418 10.3216 14.876 10.2891ZM8.5 12C7.94775 12 7.50001 12.4477 7.5 13V19C7.5 19.5523 7.94774 20 8.5 20C9.05215 19.9998 9.5 19.5522 9.5 19V13C9.49999 12.4478 9.05215 12.0002 8.5 12ZM12 12C11.4477 12 11 12.4477 11 13V19C11 19.5523 11.4477 20 12 20C12.5522 19.9998 13 19.5522 13 19V13C13 12.4478 12.5521 12.0002 12 12ZM15.5 12C14.9477 12 14.5 12.4477 14.5 13V19C14.5 19.5523 14.9477 20 15.5 20C16.0522 19.9998 16.5 19.5522 16.5 19V13C16.5 12.4478 16.0521 12.0002 15.5 12ZM12 2C13.2752 2 14.271 2.27648 14.9707 2.85449C15.6924 3.45088 15.9479 4.2418 15.9922 4.93652C16.0162 5.31286 15.9793 5.67654 15.9189 6H18.6494C19.3953 6.00014 19.9999 6.60474 20 7.35059C20 8.01305 19.5206 8.57368 18.8623 8.64746C17.5465 8.79493 15.1509 9 12 9C8.8491 9 6.4535 8.79493 5.1377 8.64746C4.47935 8.57368 4 8.01305 4 7.35059C4.00014 6.60474 4.60474 6.00014 5.35059 6H8.08105C8.02072 5.67654 7.98384 5.31286 8.00781 4.93652C8.05208 4.2418 8.30763 3.45088 9.0293 2.85449C9.729 2.27648 10.7248 2 12 2ZM12 4C10.9822 4 10.5121 4.22356 10.3037 4.39551C10.1178 4.54906 10.0234 4.75842 10.0039 5.06348C9.9847 5.36497 10.0475 5.70063 10.1367 6H13.8633C13.9525 5.70063 14.0153 5.36497 13.9961 5.06348C13.9766 4.75842 13.8822 4.54906 13.6963 4.39551C13.4879 4.22356 13.0178 4 12 4Z" /></svg>
</button> </button>
<input type="text" data-f="regex" class="mono fr-regex" value="${esc(s.regex)}" placeholder="${esc(t('fileRegex'))}" aria-label="${esc(t('fmt_regex'))}" spellcheck="false"${s.format === 'regex' ? '' : ' hidden'}> <input type="text" data-f="regex" class="mono fr-regex" value="${esc(s.regex)}" placeholder="${esc(t('fileRegex'))}" aria-label="${esc(t('fmt_regex'))}" spellcheck="false"${s.format === 'regex' ? '' : ' hidden'}>
<p class="fr-status docker-status ${cls}">${esc(text)}</p> <p class="fr-status docker-status ${cls}">${esc(text)}</p>
@@ -2448,7 +2448,7 @@ $('#addFile').addEventListener('click', () => {
let dockerState = null; let dockerState = null;
const dockerView = { showStopped: store.get('dockerShowStopped', '0') === '1', filter: '' }; const dockerView = { showStopped: store.get('dockerShowStopped', '0') === '1', filter: '' };
const LOCK_ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>'; const LOCK_ICON = '<svg class="pi" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.3242 3.86597C15.6401 4.03712 17.8282 6.8295 17.96 10.2146C17.9802 10.7348 17.9905 11.2945 17.9951 11.8943C18.6507 11.9382 19.1124 12.0357 19.5 12.2595C19.9559 12.5228 20.3344 12.9013 20.5977 13.3572C20.9996 14.0533 21 14.9879 21 16.8572C21 18.7264 20.9996 19.661 20.5977 20.3572C20.3344 20.8131 19.9559 21.1916 19.5 21.4548C18.8038 21.8568 17.8692 21.8572 16 21.8572H8C6.13077 21.8572 5.19615 21.8568 4.5 21.4548C4.04408 21.1916 3.66561 20.8131 3.40234 20.3572C3.00042 19.661 3 18.7264 3 16.8572C3 14.9879 3.00042 14.0533 3.40234 13.3572C3.66561 12.9013 4.04408 12.5228 4.5 12.2595C4.88741 12.0358 5.34881 11.9383 6.00391 11.8943C6.00568 11.6703 6.00663 11.4519 6.01074 11.239L6.04004 10.2146C6.17609 6.72035 8.5031 3.85718 12 3.85718L12.3242 3.86597ZM12 6.85718C10.5026 6.85718 9.12777 8.02866 9.03809 10.3308C9.01972 10.8024 9.00974 11.311 9.00488 11.8572H14.9951C14.9903 11.311 14.9803 10.8024 14.9619 10.3308C14.8722 8.02866 13.4974 6.85718 12 6.85718Z"/></svg>';
async function loadDocker() { async function loadDocker() {
try { dockerState = await api('/api/docker'); } catch (e) { dockerState = { enabled: true, connected: false, error: e.message }; } try { dockerState = await api('/api/docker'); } catch (e) { dockerState = { enabled: true, connected: false, error: e.message }; }
@@ -2872,7 +2872,7 @@ function tagRowHTML(tag) {
${opt('enabled', t('optActive'), t('optActiveTitle'))} ${opt('enabled', t('optActive'), t('optActiveTitle'))}
</div> </div>
<button class="icon-btn danger" type="button" data-del title="${esc(t('del'))}" aria-label="${esc(t('del'))}"> <button class="icon-btn danger" type="button" data-del title="${esc(t('del'))}" aria-label="${esc(t('del'))}">
<svg viewBox="0 0 24 24"><path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3"/></svg> <svg class="pi" viewBox="0 0 24 24"><path d="M14.876 10.2891C17.2815 10.2054 18.4841 10.1634 19.1094 10.876C19.7347 11.5886 19.5423 12.7465 19.1562 15.0625L18.835 16.9863C18.4359 19.3808 18.2367 20.5781 17.3975 21.2891C16.5582 22 15.3444 22 12.917 22H11.082C8.65486 22 7.44074 22 6.60156 21.2891C5.76256 20.5781 5.5631 19.3805 5.16406 16.9863L4.84375 15.0625C4.45778 12.7467 4.26459 11.5886 4.88965 10.876C5.51497 10.1633 6.71833 10.2054 9.12402 10.2891C10.0581 10.3216 11.0413 10.3428 12 10.3428C12.9587 10.3428 13.9418 10.3216 14.876 10.2891ZM8.5 12C7.94775 12 7.50001 12.4477 7.5 13V19C7.5 19.5523 7.94774 20 8.5 20C9.05215 19.9998 9.5 19.5522 9.5 19V13C9.49999 12.4478 9.05215 12.0002 8.5 12ZM12 12C11.4477 12 11 12.4477 11 13V19C11 19.5523 11.4477 20 12 20C12.5522 19.9998 13 19.5522 13 19V13C13 12.4478 12.5521 12.0002 12 12ZM15.5 12C14.9477 12 14.5 12.4477 14.5 13V19C14.5 19.5523 14.9477 20 15.5 20C16.0522 19.9998 16.5 19.5522 16.5 19V13C16.5 12.4478 16.0521 12.0002 15.5 12ZM12 2C13.2752 2 14.271 2.27648 14.9707 2.85449C15.6924 3.45088 15.9479 4.2418 15.9922 4.93652C16.0162 5.31286 15.9793 5.67654 15.9189 6H18.6494C19.3953 6.00014 19.9999 6.60474 20 7.35059C20 8.01305 19.5206 8.57368 18.8623 8.64746C17.5465 8.79493 15.1509 9 12 9C8.8491 9 6.4535 8.79493 5.1377 8.64746C4.47935 8.57368 4 8.01305 4 7.35059C4.00014 6.60474 4.60474 6.00014 5.35059 6H8.08105C8.02072 5.67654 7.98384 5.31286 8.00781 4.93652C8.05208 4.2418 8.30763 3.45088 9.0293 2.85449C9.729 2.27648 10.7248 2 12 2ZM12 4C10.9822 4 10.5121 4.22356 10.3037 4.39551C10.1178 4.54906 10.0234 4.75842 10.0039 5.06348C9.9847 5.36497 10.0475 5.70063 10.1367 6H13.8633C13.9525 5.70063 14.0153 5.36497 13.9961 5.06348C13.9766 4.75842 13.8822 4.54906 13.6963 4.39551C13.4879 4.22356 13.0178 4 12 4Z" /></svg>
</button> </button>
<div class="err"></div> <div class="err"></div>
</div>`; </div>`;
+25 -25
View File
@@ -24,7 +24,7 @@
</div> </div>
<div class="search"> <div class="search">
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg> <svg class="pi ico" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 3C13.866 3 17 6.13401 17 10C17 11.591 16.4674 13.0568 15.5732 14.2324L19.6514 17.7803C20.9315 18.8943 20.1433 21 18.4463 21C17.8908 20.9999 17.3649 20.7481 17.0166 20.3154L13.5625 16.0244C12.5186 16.643 11.3013 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3ZM10 6C7.79086 6 6 7.79086 6 10C6 12.2091 7.79086 14 10 14C12.2091 14 14 12.2091 14 10C14 7.79086 12.2091 6 10 6Z"/></svg>
<input id="q" type="search" autocomplete="off" spellcheck="false" data-i18n-aria="searchAria"> <input id="q" type="search" autocomplete="off" spellcheck="false" data-i18n-aria="searchAria">
<button id="mode" class="chip" type="button" data-i18n-title="modeTitle">Simple</button> <button id="mode" class="chip" type="button" data-i18n-title="modeTitle">Simple</button>
</div> </div>
@@ -34,17 +34,17 @@
<span class="dot"></span><span class="lbl" data-i18n="live">Live</span> <span class="dot"></span><span class="lbl" data-i18n="live">Live</span>
</button> </button>
<button id="settingsBtn" class="icon-btn" type="button" data-i18n-title="settings" data-i18n-aria="settings"> <button id="settingsBtn" class="icon-btn" type="button" data-i18n-title="settings" data-i18n-aria="settings">
<!-- Gear icon (Lucide "settings", ISC license) --> <!-- Papicons "gears" (MIT license, see THIRD_PARTY_NOTICES.md) -->
<svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg> <svg class="pi" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.9995 3C12.5927 3.00002 13.3086 3.20228 13.8921 3.41211C14.5527 3.64979 14.8812 4.36002 14.7143 5.04199L14.5307 5.78809C14.4327 6.18858 14.6447 6.59689 15.0014 6.80371C15.3585 7.01063 15.8146 6.98753 16.1128 6.70215L16.6684 6.1709C17.1756 5.68518 17.9554 5.61392 18.4917 6.06738C18.9651 6.46772 19.4979 6.98637 19.7944 7.5C20.091 8.01372 20.2733 8.7346 20.3833 9.34473C20.5078 10.0358 20.0565 10.6757 19.3823 10.8721L18.643 11.0869C18.2471 11.2022 18.0005 11.5876 18.0005 12C18.0005 12.4123 18.2463 12.7975 18.6421 12.9131L19.3833 13.1289C20.0571 13.3255 20.5077 13.9644 20.3833 14.6553C20.2733 15.2654 20.0909 15.9863 19.7944 16.5C19.4979 17.0136 18.965 17.5323 18.4917 17.9326C17.9555 18.386 17.1756 18.3156 16.6684 17.8301L16.1128 17.2979C15.8148 17.0124 15.3587 16.9888 15.0014 17.1953C14.6445 17.4017 14.4325 17.8105 14.5307 18.2109L14.7143 18.958C14.8813 19.6401 14.5528 20.3512 13.8921 20.5889C13.3087 20.7987 12.5926 21 11.9995 21C11.4065 20.9999 10.6911 20.7986 10.1079 20.5889C9.4471 20.3512 9.11864 19.6401 9.28562 18.958L9.46824 18.21C9.56604 17.8097 9.3543 17.4015 8.99754 17.1953C8.64021 16.989 8.18412 17.0124 7.88621 17.2979L7.33152 17.8301C6.82436 18.3157 6.04449 18.3859 5.50828 17.9326C5.03495 17.5323 4.50211 17.0136 4.20555 16.5C3.90903 15.9863 3.7257 15.2654 3.6157 14.6553C3.49135 13.9644 3.94281 13.3254 4.61668 13.1289L5.35594 12.9131C5.7518 12.7976 6.00041 12.4124 6.00047 12C6.00048 11.5876 5.75186 11.2022 5.35594 11.0869L4.61668 10.8721C3.94264 10.6756 3.49219 10.0357 3.61668 9.34473C3.72668 8.73456 3.90897 8.01373 4.20555 7.5C4.50212 6.98632 5.03487 6.46774 5.50828 6.06738C6.04452 5.61392 6.82432 5.68518 7.33152 6.1709L7.88621 6.70215C8.18437 6.98742 8.64039 7.01053 8.99754 6.80371C9.35438 6.59702 9.56625 6.18865 9.46824 5.78809L9.28562 5.04199C9.1187 4.35995 9.44713 3.64975 10.1079 3.41211C10.6912 3.20234 11.4064 3.00008 11.9995 3ZM12.0005 9C10.3436 9 9.00047 10.3431 9.00047 12C9.00047 13.6569 10.3436 15 12.0005 15C13.6571 14.9997 15.0005 13.6567 15.0005 12C15.0005 10.3433 13.6571 9.00026 12.0005 9Z"/></svg>
</button> </button>
<button id="themeBtn" class="icon-btn" type="button" data-i18n-title="theme" data-i18n-aria="theme"> <button id="themeBtn" class="icon-btn" type="button" data-i18n-title="theme" data-i18n-aria="theme">
<svg class="sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg> <svg class="pi sun" viewBox="0 0 24 24"><path d="M15 12.8572C15 14.514 13.6569 15.8572 12 15.8572C10.3431 15.8572 9 14.514 9 12.8572C9 11.2003 10.3431 9.85718 12 9.85718C13.6569 9.85718 15 11.2003 15 12.8572Z"/><path d="M11.9994 9.85732C13.6563 9.85732 14.9994 11.2005 14.9994 12.8573C14.9993 14.514 13.6562 15.8573 11.9994 15.8573C10.3429 15.8571 8.99959 14.5139 8.99943 12.8573C8.99943 11.2006 10.3428 9.85754 11.9994 9.85732Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.224 2.71279C13.1976 2.82269 13.8745 3.93342 15.2279 6.1542C17.808 5.82774 19.0985 5.66373 19.7914 6.35635C19.8975 6.46241 19.9909 6.58086 20.0707 6.70791C20.5916 7.53758 20.1456 8.75872 19.2533 11.2011C21.1171 13.0146 22.0492 13.9219 21.9399 14.8954C21.9231 15.0444 21.8898 15.1914 21.8403 15.3329C21.5165 16.2576 20.283 16.6707 17.8168 17.496C17.561 20.084 17.4324 21.3779 16.6029 21.8993C16.4762 21.979 16.3409 22.0442 16.1996 22.0937C15.2748 22.4171 14.1824 21.7104 11.9994 20.2968C9.81658 21.7103 8.72506 22.4171 7.80021 22.0937C7.65874 22.0441 7.52282 21.9791 7.39592 21.8993C6.56669 21.3778 6.43883 20.0837 6.18303 17.496C3.71676 16.6707 2.48338 16.2576 2.15959 15.3329C2.11005 15.1914 2.07674 15.0444 2.05998 14.8954C1.95064 13.9218 2.88271 13.0146 4.7465 11.2011C3.8542 8.75861 3.40816 7.53759 3.92912 6.70791C4.00891 6.58086 4.10231 6.46241 4.20842 6.35635C4.9014 5.66383 6.19193 5.82775 8.77189 6.1542C10.1253 3.93342 10.8022 2.82269 11.7758 2.71279C11.9247 2.696 12.0751 2.69599 12.224 2.71279ZM11.9994 7.85732C9.23819 7.85754 6.99943 10.096 6.99943 12.8573C6.99959 15.6185 9.23829 17.8571 11.9994 17.8573C14.7608 17.8573 16.9993 15.6186 16.9994 12.8573C16.9994 10.0959 14.7609 7.85732 11.9994 7.85732Z"/></svg>
<svg class="moon" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg> <svg class="pi moon" viewBox="0 0 24 24"><path d="M11 3.85718C11.7891 3.85718 12.0004 5.04248 11.4641 5.62132C10.5555 6.60206 10 7.91462 10 9.35718C10 12.3947 12.4624 14.8572 15.5 14.8572C16.9423 14.8572 18.2542 14.3018 19.2346 13.3934C19.8136 12.8568 20.9996 13.0677 21 13.8572C21.0027 18.8277 16.9706 21.8572 12 21.8572C7.02944 21.8572 3 17.8277 3 12.8572C3 7.88661 6.02944 3.85718 11 3.85718Z"/></svg>
</button> </button>
<span id="whoami" class="whoami" hidden><span class="who-name"></span><span class="who-badge"></span></span> <span id="whoami" class="whoami" hidden><span class="who-name"></span><span class="who-badge"></span></span>
<a id="logoutBtn" class="icon-btn" href="/auth/logout" hidden data-i18n-title="logout" data-i18n-aria="logout"> <a id="logoutBtn" class="icon-btn" href="/auth/logout" hidden data-i18n-title="logout" data-i18n-aria="logout">
<!-- Log out icon (Lucide "log-out", ISC license) --> <!-- Papicons "logout" (MIT license) -->
<svg viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/></svg> <svg class="pi" viewBox="0 0 24 24"><path d="M7.5 3C8.77204 3 9.7815 3.14324 10.5449 3.32129C11.7792 3.60916 12.5491 4.68832 12.6953 5.94727C12.7404 6.33543 12.7854 6.78351 12.8262 7.29297C12.891 8.10446 12.1921 8.76206 11.3828 8.67383C11.2557 8.65998 11.128 8.64666 11.001 8.63281C10.1171 8.53511 9.26865 8.80021 8.64355 9.42676C8.0185 10.0502 7.66803 10.9842 7.66797 11.9658C7.66803 12.9475 8.0185 13.8815 8.64355 14.5049C9.26864 15.1314 10.1171 15.3965 11.001 15.2988C11.128 15.285 11.2557 15.2717 11.3828 15.2578C12.1939 15.1694 12.8945 15.8263 12.8311 16.6396C12.789 17.177 12.7423 17.6476 12.6953 18.0527C12.5491 19.3117 11.7792 20.3908 10.5449 20.6787C9.7815 20.8568 8.77204 21 7.5 21C6.22796 21 5.2185 20.8568 4.45508 20.6787C3.22079 20.3908 2.45087 19.3117 2.30469 18.0527C2.15229 16.7401 2 14.7432 2 12C2 9.25683 2.15229 7.25991 2.30469 5.94727C2.45087 4.68832 3.22079 3.60916 4.45508 3.32129C5.2185 3.14324 6.22795 3 7.5 3ZM15.8955 7.38379C16.286 6.99352 16.9191 6.99349 17.3096 7.38379L21.083 11.1572C21.473 11.5477 21.4732 12.1809 21.083 12.5713L17.3096 16.3438C16.919 16.734 16.2859 16.7342 15.8955 16.3438C15.5052 15.9533 15.5053 15.3202 15.8955 14.9297L17.8242 13.001C15.677 13.0946 13.5289 13.1886 11.3818 13.2822C11.2547 13.2878 11.1272 13.2933 11 13.2988C10.6465 13.3144 10.3066 13.1877 10.0566 12.9375C9.80697 12.6878 9.66705 12.3347 9.66699 11.9658C9.66704 11.5968 9.80779 11.2439 10.0576 10.9941C10.3076 10.7441 10.6466 10.6173 11 10.6328C11.1272 10.6384 11.2547 10.6439 11.3818 10.6494C13.5999 10.7461 15.819 10.8418 18.0371 10.9385L15.8955 8.79785C15.5052 8.40741 15.5053 7.77428 15.8955 7.38379Z"/></svg>
</a> </a>
</div> </div>
<div class="progress" aria-hidden="true"></div> <div class="progress" aria-hidden="true"></div>
@@ -53,25 +53,25 @@
<section class="filters"> <section class="filters">
<div id="viewMode" class="seg view-mode" role="radiogroup" data-i18n-aria="viewAria"> <div id="viewMode" class="seg view-mode" role="radiogroup" data-i18n-aria="viewAria">
<button type="button" role="radio" data-view="stream" data-i18n-title="viewStreamTitle"> <button type="button" role="radio" data-view="stream" data-i18n-title="viewStreamTitle">
<!-- Lucide "radio" (ISC license) --> <!-- Papicons "play" (MIT license) -->
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/><path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5"/><circle cx="12" cy="12" r="2"/><path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5"/><path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"/></svg> <svg class="pi" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 14.7702V9.22986C6 5.65215 6 3.86329 7.12572 3.31615C8.25145 2.769 9.65806 3.8742 12.4713 6.08459L14.9962 8.06842C17.3011 9.87942 18.4535 10.7849 18.4535 12C18.4535 13.2151 17.3011 14.1206 14.9962 15.9316L12.4713 17.9154C9.65806 20.1258 8.25145 21.231 7.12572 20.6839C6 20.1367 6 18.3479 6 14.7702Z"/></svg>
<span data-i18n="viewStream">Stream</span> <span data-i18n="viewStream">Stream</span>
</button> </button>
<button type="button" role="radio" data-view="period" data-i18n-title="viewPeriodTitle"> <button type="button" role="radio" data-view="period" data-i18n-title="viewPeriodTitle">
<!-- Lucide "calendar-range" (ISC license) --> <!-- Papicons "calendar" (MIT license) -->
<svg viewBox="0 0 24 24" aria-hidden="true"><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M16 2v4M3 10h18M8 2v4M17 14h-6M13 18H7M7 14h.01M17 18h.01"/></svg> <svg class="pi" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6.125C3 4.39911 4.39911 3 6.125 3H17.875C19.6009 3 21 4.39911 21 6.125C21 7.16053 20.1605 8 19.125 8H4.875C3.83947 8 3 7.16053 3 6.125Z"/><path d="M18.1738 10.0049C19.6939 10.0931 20.9069 11.3061 20.9951 12.8262C20.9979 12.8742 20.9965 12.9274 20.9971 13H17C14.7909 13 13 14.7909 13 17V20.9893C12.6268 20.9985 12.1964 21 11.6865 21H9.28613C7.15368 21 6.08721 20.9996 5.26465 20.6035C4.44822 20.2103 3.78966 19.5518 3.39648 18.7354C3.00036 17.9128 3 16.8463 3 14.7139C3 13.1148 2.99981 12.3151 3.29688 11.6982C3.59175 11.0859 4.08592 10.5918 4.69824 10.2969C5.31511 9.99981 6.1148 10 7.71387 10H17.7793C17.9843 10 18.0872 9.99986 18.1738 10.0049Z"/><path d="M17 15H20.6396C20.4588 15.3973 20.2137 15.7662 19.9092 16.0889C19.8695 16.1309 19.8269 16.1731 19.7422 16.2578L17.3428 18.6572C16.2546 19.7454 15.677 20.318 15 20.6357V17C15 15.9643 15.7872 15.113 16.7959 15.0107L17 15Z"/></svg>
<span data-i18n="viewPeriod">Time range</span> <span data-i18n="viewPeriod">Time range</span>
</button> </button>
</div> </div>
<div id="period" class="period" hidden> <div id="period" class="period" hidden>
<button id="perPrev" class="btn tool" type="button" data-i18n-title="perPrev" data-i18n-aria="perPrev"> <button id="perPrev" class="btn tool" type="button" data-i18n-title="perPrev" data-i18n-aria="perPrev">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg> <svg class="pi" viewBox="0 0 24 24" aria-hidden="true"><path d="M12.8037 4.43946C13.3895 3.85368 14.339 3.85367 14.9248 4.43946C15.5105 5.02525 15.5106 5.97481 14.9248 6.56055L9.6211 11.8643L14.9248 17.167C15.5105 17.7527 15.5104 18.7023 14.9248 19.2881C14.339 19.8739 13.3895 19.8739 12.8037 19.2881L6.43946 12.9248C5.85368 12.339 5.85368 11.3885 6.43946 10.8027L12.8037 4.43946Z"/></svg>
</button> </button>
<input id="perFrom" type="datetime-local" data-i18n-title="perFrom" data-i18n-aria="perFrom"> <input id="perFrom" type="datetime-local" data-i18n-title="perFrom" data-i18n-aria="perFrom">
<span class="muted" aria-hidden="true">→</span> <span class="muted" aria-hidden="true">→</span>
<input id="perTo" type="datetime-local" data-i18n-title="perTo" data-i18n-aria="perTo"> <input id="perTo" type="datetime-local" data-i18n-title="perTo" data-i18n-aria="perTo">
<button id="perNext" class="btn tool" type="button" data-i18n-title="perNext" data-i18n-aria="perNext"> <button id="perNext" class="btn tool" type="button" data-i18n-title="perNext" data-i18n-aria="perNext">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg> <svg class="pi" viewBox="0 0 24 24" aria-hidden="true"><path d="M10.5605 4.43946C9.97469 3.85368 9.02517 3.85367 8.43938 4.43946C7.85372 5.02525 7.85365 5.97481 8.43938 6.56055L13.7431 11.8643L8.43938 17.167C7.85366 17.7527 7.8538 18.7023 8.43938 19.2881C9.02517 19.8739 9.97469 19.8739 10.5605 19.2881L16.9247 12.9248C17.5105 12.339 17.5105 11.3885 16.9247 10.8027L10.5605 4.43946Z"/></svg>
</button> </button>
<button id="perOut" class="btn tool" type="button" data-i18n-title="perOut" data-i18n-aria="perOut"> <button id="perOut" class="btn tool" type="button" data-i18n-title="perOut" data-i18n-aria="perOut">
<!-- Lucide "zoom-out" (ISC license) --> <!-- Lucide "zoom-out" (ISC license) -->
@@ -112,7 +112,7 @@
<span id="count" class="muted"></span> <span id="count" class="muted"></span>
<div class="export"> <div class="export">
<button id="exportBtn" class="btn tool" type="button" aria-haspopup="menu" aria-expanded="false"> <button id="exportBtn" class="btn tool" type="button" aria-haspopup="menu" aria-expanded="false">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v12M7 10l5 5 5-5M4 17v3h16v-3"/></svg> <svg class="pi" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.0002 12.0001C21.0002 13.4832 20.9277 14.7482 20.8215 15.8048C20.5477 18.5277 18.5287 20.5475 15.8058 20.8214C14.7491 20.9277 13.4835 21.0001 12.0002 21.0001C10.5171 21.0001 9.25211 20.9276 8.1955 20.8214C5.47245 20.5476 3.45266 18.5279 3.17889 15.8048C3.07268 14.7482 3.00019 13.4832 3.00018 12.0001C3.00018 10.5168 3.07265 9.25118 3.17889 8.19446C3.45277 5.47156 5.47254 3.45259 8.1955 3.17883C9.25211 3.07262 10.5171 3.00013 12.0002 3.00012C13.4835 3.00012 14.7491 3.07259 15.8058 3.17883C18.5286 3.45273 20.5476 5.47169 20.8215 8.19446C20.9277 9.25118 21.0002 10.5168 21.0002 12.0001ZM16.8781 12.8282C17.2686 12.4377 17.2686 11.8047 16.8781 11.4142C16.4875 11.0242 15.8544 11.0239 15.4641 11.4142L13.0978 13.7814C13.1877 12.0389 13.2765 10.2953 13.3664 8.55286C13.3719 8.44571 13.3775 8.33773 13.383 8.23059C13.4013 7.87733 13.2776 7.53707 13.0275 7.28723C12.7778 7.0377 12.4217 6.89661 12.05 6.89661C11.6782 6.8968 11.322 7.03739 11.0724 7.28723C10.8224 7.53705 10.6988 7.87736 10.717 8.23059C10.7225 8.33771 10.7281 8.44574 10.7336 8.55286C10.8203 10.2344 10.9076 11.9171 10.9943 13.5988L8.80878 11.4142C8.41822 11.0241 7.78508 11.0238 7.39471 11.4142C7.00435 11.8045 7.00467 12.4377 7.39471 12.8282L11.4289 16.8634C11.8194 17.2539 12.4534 17.2539 12.8439 16.8634L16.8781 12.8282Z"/></svg>
<span class="lbl" data-i18n="export">Export</span> <span class="lbl" data-i18n="export">Export</span>
</button> </button>
<div id="exportMenu" class="menu" role="menu" hidden> <div id="exportMenu" class="menu" role="menu" hidden>
@@ -132,7 +132,7 @@
<div id="authWarn" class="auth-warn" role="status" hidden> <div id="authWarn" class="auth-warn" role="status" hidden>
<span data-i18n="authOff"></span> <span data-i18n="authOff"></span>
<button id="authWarnClose" class="icon-btn" type="button" data-i18n-aria="close"> <button id="authWarnClose" class="icon-btn" type="button" data-i18n-aria="close">
<svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></svg> <svg class="pi" viewBox="0 0 24 24"><path d="M17.958 3.95801C18.4881 3.95763 19.0166 4.18846 19.4141 4.58594C19.8115 4.98342 20.0424 5.51194 20.042 6.04199C20.0423 6.57267 19.8115 7.06147 19.4141 7.41406C19.3082 7.50811 19.2025 7.60225 19.0967 7.69629C17.4824 9.13092 15.8673 10.5653 14.2529 12C15.8673 13.4347 17.4824 14.8691 19.0967 16.3037C19.2025 16.3978 19.3082 16.4919 19.4141 16.5859C19.8115 16.9385 20.0423 17.4273 20.042 17.958C20.0424 18.4881 19.8115 19.0166 19.4141 19.4141C19.0166 19.8115 18.4881 20.0424 17.958 20.042C17.4273 20.0423 16.9385 19.8115 16.5859 19.4141C16.4919 19.3082 16.3978 19.2025 16.3037 19.0967C14.8691 17.4824 13.4347 15.8673 12 14.2529C10.5653 15.8673 9.13092 17.4824 7.69629 19.0967C7.60225 19.2025 7.50811 19.3082 7.41406 19.4141C7.06147 19.8115 6.57267 20.0423 6.04199 20.042C5.51194 20.0424 4.98342 19.8115 4.58594 19.4141C4.18846 19.0166 3.95763 18.4881 3.95801 17.958C3.95773 17.4273 4.18854 16.9385 4.58594 16.5859C4.69176 16.4919 4.7975 16.3978 4.90332 16.3037C6.51743 14.8692 8.13186 13.4345 9.74609 12C8.13186 10.5655 6.51743 9.13076 4.90332 7.69629C4.7975 7.60225 4.69176 7.50811 4.58594 7.41406C4.18854 7.06147 3.95773 6.57267 3.95801 6.04199C3.95763 5.51194 4.18846 4.98342 4.58594 4.58594C4.98342 4.18846 5.51194 3.95763 6.04199 3.95801C6.57267 3.95773 7.06147 4.18854 7.41406 4.58594C7.50811 4.69176 7.60225 4.7975 7.69629 4.90332C9.13076 6.51743 10.5655 8.13186 12 9.74609C13.4345 8.13186 14.8692 6.51743 16.3037 4.90332C16.3978 4.7975 16.4919 4.69176 16.5859 4.58594C16.9385 4.18854 17.4273 3.95773 17.958 3.95801Z"/></svg>
</button> </button>
</div> </div>
<div id="error" class="error-banner" hidden></div> <div id="error" class="error-banner" hidden></div>
@@ -152,7 +152,7 @@
<main id="list" class="list"></main> <main id="list" class="list"></main>
</div> </div>
<div id="empty" class="empty" hidden> <div id="empty" class="empty" hidden>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16M4 12h10M4 18h7"/></svg> <svg class="pi" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3C13.483 3.00001 14.7481 3.07251 15.8047 3.17871C18.5276 3.45246 20.5473 5.47153 20.8213 8.19434C20.9275 9.25103 21 10.5167 21 12C21 13.483 20.9275 14.7481 20.8213 15.8047C20.5475 18.5277 18.5277 20.5475 15.8047 20.8213C14.7481 20.9275 13.483 21 12 21C10.5168 21 9.251 20.9275 8.19434 20.8213C5.47156 20.5473 3.45246 18.5276 3.17871 15.8047C3.0725 14.7481 3 13.483 3 12C3 10.5167 3.07248 9.25103 3.17871 8.19434C3.45264 5.4717 5.47172 3.45267 8.19434 3.17871C9.251 3.07248 10.5168 3.00001 12 3ZM11.5 15C10.1892 15 9.21877 15.0253 8.5625 15.0518C7.86067 15.0801 7 15.2977 7 16C7 16.7023 7.86067 16.9199 8.5625 16.9482C9.21877 16.9747 10.1892 17 11.5 17C12.8108 17 13.7812 16.9747 14.4375 16.9482C15.1393 16.9199 16 16.7023 16 16C16 15.2977 15.1393 15.0801 14.4375 15.0518C13.7812 15.0253 12.8108 15 11.5 15ZM10.5 11C9.59007 11 8.89128 11.0199 8.38867 11.043C7.73172 11.0732 7 11.3424 7 12C7 12.6576 7.73172 12.9268 8.38867 12.957C8.89128 12.9801 9.59007 13 10.5 13C11.4099 13 12.1087 12.9801 12.6113 12.957C13.2683 12.9268 14 12.6576 14 12C14 11.3424 13.2683 11.0732 12.6113 11.043C12.1087 11.0199 11.4099 11 10.5 11ZM12 7C10.4872 7 9.38276 7.02718 8.65332 7.05469C7.92733 7.08208 7 7.27351 7 8C7 8.72649 7.92733 8.91792 8.65332 8.94531C9.38276 8.97282 10.4872 9 12 9C13.5128 9 14.6172 8.97282 15.3467 8.94531C16.0727 8.91792 17 8.72649 17 8C17 7.27351 16.0727 7.08208 15.3467 7.05469C14.6172 7.02718 13.5128 7 12 7Z"/></svg>
<p><strong data-i18n="emptyTitle">No matching logs.</strong></p> <p><strong data-i18n="emptyTitle">No matching logs.</strong></p>
<p class="muted" data-i18n="emptyHint">Widen the time range or send syslog messages to port 514 (UDP or TCP).</p> <p class="muted" data-i18n="emptyHint">Widen the time range or send syslog messages to port 514 (UDP or TCP).</p>
</div> </div>
@@ -161,7 +161,7 @@
<span id="conn" class="conn"></span> <span id="conn" class="conn"></span>
<span id="stats" class="muted"></span> <span id="stats" class="muted"></span>
<button id="toTop" class="icon-btn to-top" type="button" data-i18n-title="toTop" data-i18n-aria="toTop" hidden> <button id="toTop" class="icon-btn to-top" type="button" data-i18n-title="toTop" data-i18n-aria="toTop" hidden>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg> <svg class="pi" viewBox="0 0 24 24" aria-hidden="true"><path d="M19.4243 10.6673C20.01 11.2531 20.01 12.2026 19.4243 12.7884C18.8385 13.3741 17.8889 13.3741 17.3032 12.7884L13.4252 8.90949C13.5632 11.7245 13.7002 14.5399 13.8383 17.3548C13.8466 17.5243 13.8554 17.6941 13.8637 17.8636C13.8901 18.394 13.7021 18.9036 13.3266 19.2786C12.952 19.6535 12.4203 19.8636 11.8637 19.8636C11.3072 19.8635 10.7754 19.6534 10.4008 19.2786C10.0254 18.9036 9.83733 18.3939 9.8637 17.8636C9.87202 17.6941 9.88078 17.5243 9.88909 17.3548C10.0225 14.6352 10.1562 11.9153 10.2895 9.19563L6.69671 12.7884C6.11099 13.3741 5.16142 13.374 4.57562 12.7884C3.98983 12.2026 3.98983 11.2531 4.57562 10.6673L10.9389 4.30305C11.5247 3.71726 12.4752 3.71726 13.061 4.30305L19.4243 10.6673Z"/></svg>
</button> </button>
</footer> </footer>
@@ -170,7 +170,7 @@
<header> <header>
<h2 id="settingsTitle" data-i18n="settings">Settings</h2> <h2 id="settingsTitle" data-i18n="settings">Settings</h2>
<button id="closeSettings" class="icon-btn" type="button" data-i18n-aria="close"> <button id="closeSettings" class="icon-btn" type="button" data-i18n-aria="close">
<svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></svg> <svg class="pi" viewBox="0 0 24 24"><path d="M17.958 3.95801C18.4881 3.95763 19.0166 4.18846 19.4141 4.58594C19.8115 4.98342 20.0424 5.51194 20.042 6.04199C20.0423 6.57267 19.8115 7.06147 19.4141 7.41406C19.3082 7.50811 19.2025 7.60225 19.0967 7.69629C17.4824 9.13092 15.8673 10.5653 14.2529 12C15.8673 13.4347 17.4824 14.8691 19.0967 16.3037C19.2025 16.3978 19.3082 16.4919 19.4141 16.5859C19.8115 16.9385 20.0423 17.4273 20.042 17.958C20.0424 18.4881 19.8115 19.0166 19.4141 19.4141C19.0166 19.8115 18.4881 20.0424 17.958 20.042C17.4273 20.0423 16.9385 19.8115 16.5859 19.4141C16.4919 19.3082 16.3978 19.2025 16.3037 19.0967C14.8691 17.4824 13.4347 15.8673 12 14.2529C10.5653 15.8673 9.13092 17.4824 7.69629 19.0967C7.60225 19.2025 7.50811 19.3082 7.41406 19.4141C7.06147 19.8115 6.57267 20.0423 6.04199 20.042C5.51194 20.0424 4.98342 19.8115 4.58594 19.4141C4.18846 19.0166 3.95763 18.4881 3.95801 17.958C3.95773 17.4273 4.18854 16.9385 4.58594 16.5859C4.69176 16.4919 4.7975 16.3978 4.90332 16.3037C6.51743 14.8692 8.13186 13.4345 9.74609 12C8.13186 10.5655 6.51743 9.13076 4.90332 7.69629C4.7975 7.60225 4.69176 7.50811 4.58594 7.41406C4.18854 7.06147 3.95773 6.57267 3.95801 6.04199C3.95763 5.51194 4.18846 4.98342 4.58594 4.58594C4.98342 4.18846 5.51194 3.95763 6.04199 3.95801C6.57267 3.95773 7.06147 4.18854 7.41406 4.58594C7.50811 4.69176 7.60225 4.7975 7.69629 4.90332C9.13076 6.51743 10.5655 8.13186 12 9.74609C13.4345 8.13186 14.8692 6.51743 16.3037 4.90332C16.3978 4.7975 16.4919 4.69176 16.5859 4.58594C16.9385 4.18854 17.4273 3.95773 17.958 3.95801Z"/></svg>
</button> </button>
</header> </header>
@@ -178,33 +178,33 @@
<div class="set-side"> <div class="set-side">
<nav id="setNav" class="set-nav" role="tablist" aria-orientation="vertical"> <nav id="setNav" class="set-nav" role="tablist" aria-orientation="vertical">
<button type="button" role="tab" data-tab="locale"> <button type="button" role="tab" data-tab="locale">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg> <svg class="pi" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM4.73926 9C4.6407 9 4.55559 9.06709 4.52056 9.15921C4.18489 10.0421 4 10.9994 4 12C4 16.4183 7.58172 20 12 20C12.5088 20 13 19.6719 13 19.1631C12.9998 18.149 12.1772 17.3271 11.1631 17.3271H8.82617C8.24987 17.3271 7.78223 16.8595 7.78223 16.2832C7.78238 15.707 8.24997 15.2402 8.82617 15.2402H8.86914C9.46936 15.2402 9.9559 14.7535 9.95605 14.1533V13.6436C9.95605 12.7619 9.24192 12.0471 8.36035 12.0469H8.00195C7.16056 12.0469 6.47852 11.3648 6.47852 10.5234C6.47849 9.68216 5.79632 9.00016 4.95508 9H4.73926ZM12.5176 7.22559C12.1868 7.54639 12 7.98745 12 8.44824C12 9.38888 12.7625 10.1513 13.7031 10.1514H15.5762C16.9149 10.1516 18 11.2374 18 12.5762V13.5C18 13.7937 18.0844 14.0672 18.2303 14.2981C18.687 15.021 19.6577 14.4662 19.8323 13.629C19.942 13.1032 20 12.5584 20 12C20 9.1841 18.5448 6.7087 16.3457 5.28326C15.667 4.84332 14.7905 5.02052 14.2099 5.58373L12.5176 7.22559Z"/></svg>
<span data-i18n="tabLocale">Localization</span> <span data-i18n="tabLocale">Localization</span>
</button> </button>
<button type="button" role="tab" data-tab="filters"> <button type="button" role="tab" data-tab="filters">
<svg viewBox="0 0 24 24"><path d="M3 12V4a1 1 0 0 1 1-1h8l9 9-9 9z"/><circle cx="8" cy="8" r="1.5"/></svg> <svg class="pi" viewBox="0 0 24 24"><path d="M12 16.7647C12.548 16.7647 15.4122 18.8669 17.0571 20.1092C17.6198 20.5343 18.404 20.2599 18.5179 19.5639C18.7378 18.2207 19 15.9104 19 12.5294C19 10.7935 18.9309 9.3398 18.8339 8.15435C18.6173 5.50766 16.8501 3.35738 14.2069 3.10193C13.5553 3.03896 12.8206 3 12 3C11.1794 3 10.4447 3.03896 9.79312 3.10193C7.14989 3.35738 5.38274 5.50766 5.16613 8.15435C5.06911 9.3398 5 10.7935 5 12.5294C5 15.9104 5.26216 18.2207 5.48208 19.5639C5.59602 20.2599 6.38016 20.5343 6.94294 20.1092C8.58775 18.8669 11.452 16.7647 12 16.7647Z"/></svg>
<span data-i18n="tabFilters">Patterns</span> <span data-i18n="tabFilters">Patterns</span>
</button> </button>
<button type="button" role="tab" data-tab="sources"> <button type="button" role="tab" data-tab="sources">
<svg viewBox="0 0 24 24"><path d="M21 8 12 3 3 8v8l9 5 9-5z"/><path d="m3 8 9 5 9-5M12 13v8"/></svg> <svg class="pi" viewBox="0 0 24 24"><path d="M18.2951 12C19.7572 12 20.4886 12.0001 20.9132 12.373C21.1023 12.5392 21.247 12.7507 21.3331 12.9873C21.5261 13.5183 21.2604 14.1996 20.7296 15.5615C20.0195 17.3837 19.6643 18.2954 19.005 18.915C18.7039 19.198 18.3604 19.4325 17.9874 19.6104C17.1707 19.9998 16.1923 20 14.2365 20H9.83216C7.88742 20 6.91479 20.0001 6.10462 19.6182C5.68919 19.4222 5.31062 19.1555 4.98548 18.8311C4.35134 18.1983 4.02084 17.2832 3.36146 15.4531C2.89275 14.1522 2.65852 13.5012 2.83997 12.9941C2.93109 12.7397 3.0895 12.5147 3.29798 12.3428C3.71355 12.0002 4.40527 12 5.78822 12H18.2951Z"/><path d="M8.70033 4C9.18415 4 9.42625 4.00031 9.64661 4.05078C10.0597 4.14544 10.4322 4.36852 10.7101 4.68848C10.8584 4.8592 10.9725 5.07288 11.2003 5.5C11.428 5.92693 11.5414 6.14083 11.6896 6.31152C11.9674 6.63143 12.3401 6.85454 12.7531 6.94922C12.9735 6.99971 13.2162 7 13.7003 7H17.0001C18.6569 7.00011 20.0001 8.34321 20.0001 10H4.00013V8.57129C4.00013 7.10682 4.00001 6.37442 4.25013 5.80078C4.55276 5.10714 5.10631 4.55267 5.79994 4.25C6.37366 3.99969 7.1065 4 8.57142 4H8.70033Z"/></svg>
<span data-i18n="tabSources">Log sources</span> <span data-i18n="tabSources">Log sources</span>
</button> </button>
<button type="button" role="tab" data-tab="interface"> <button type="button" role="tab" data-tab="interface">
<svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8M12 16v4"/></svg> <svg class="pi" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.2432 3.85718C17.3475 3.85745 22.5648 8.07142 20.5615 12.8572C19.1729 16.1744 14.1433 14.7708 12.7051 16.3572C11.0115 18.2256 15.4772 21.8572 9.93164 21.8572C5.10708 21.857 3 17.8276 3 12.8572C3 7.88661 7.13857 3.85718 12.2432 3.85718ZM8 13.8572C6.89543 13.8572 6 14.7526 6 15.8572C6 16.9617 6.89543 17.8572 8 17.8572C9.10457 17.8572 10 16.9617 10 15.8572C10 14.7526 9.10457 13.8572 8 13.8572ZM9 7.85718C7.89543 7.85718 7 8.75261 7 9.85718C7 10.9617 7.89543 11.8572 9 11.8572C10.1046 11.8572 11 10.9617 11 9.85718C11 8.75261 10.1046 7.85718 9 7.85718ZM15 6.85718C13.8954 6.85718 13 7.75261 13 8.85718C13 9.96175 13.8954 10.8572 15 10.8572C16.1046 10.8572 17 9.96175 17 8.85718C17 7.75261 16.1046 6.85718 15 6.85718Z"/></svg>
<span data-i18n="tabInterface">Appearance</span> <span data-i18n="tabInterface">Appearance</span>
</button> </button>
<button type="button" role="tab" data-tab="data"> <button type="button" role="tab" data-tab="data">
<svg viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3"/></svg> <svg class="pi" viewBox="0 0 24 24"><path d="M12.9346 9.07617C16.1274 8.97649 17.7241 8.92669 18.3164 9.44434C18.3817 9.50143 18.4048 9.52447 18.4639 9.58789C18.9997 10.1637 19 11.5073 19 14.1934C19 16.8343 18.9998 18.155 18.2256 19.0117C18.1579 19.0866 18.0866 19.1579 18.0117 19.2256C17.155 19.9998 15.8343 20 13.1934 20H10.8066C8.16574 20 6.84497 19.9998 5.98828 19.2256C5.91344 19.1579 5.84206 19.0866 5.77441 19.0117C5.00023 18.155 5 16.8343 5 14.1934C5 11.5073 5.00025 10.1637 5.53613 9.58789C5.59516 9.52447 5.61826 9.50143 5.68359 9.44434C6.27589 8.92669 7.8726 8.97649 11.0654 9.07617C11.3654 9.08554 11.6769 9.09082 12 9.09082C12.3231 9.09082 12.6346 9.08554 12.9346 9.07617ZM12 12C11.2869 12 10.725 12.0166 10.3047 12.0371C9.66842 12.0682 9 12.363 9 13C9 13.637 9.66842 13.9318 10.3047 13.9629C10.725 13.9834 11.2869 14 12 14C12.7131 14 13.275 13.9834 13.6953 13.9629C14.3316 13.9318 15 13.637 15 13C15 12.363 14.3316 12.0682 13.6953 12.0371C13.275 12.0166 12.7131 12 12 12ZM18.6494 4C19.3953 4.00014 19.9999 4.60474 20 5.35059C20 6.01305 19.5206 6.57368 18.8623 6.64746C17.5465 6.79493 15.1509 7 12 7C8.8491 7 6.4535 6.79493 5.1377 6.64746C4.47935 6.57368 4 6.01305 4 5.35059C4.00014 4.60474 4.60474 4.00014 5.35059 4H18.6494Z"/></svg>
<span data-i18n="tabData">Database</span> <span data-i18n="tabData">Database</span>
</button> </button>
<button type="button" role="tab" data-tab="api"> <button type="button" role="tab" data-tab="api">
<svg viewBox="0 0 24 24"><circle cx="7.5" cy="15.5" r="4.5"/><path d="m10.7 12.3 9.3-9.3M16 7l3 3M18 5l2 2"/></svg> <svg class="pi" viewBox="0 0 24 24"><path d="M7.89844 4.00888C8.41797 3.90461 8.98572 4.02996 9.45801 4.34482C9.93011 4.65974 10.2637 5.13577 10.3672 5.65537C10.4715 6.17558 10.3378 6.6978 10.0127 7.11826C9.93916 7.21355 9.86552 7.3091 9.79199 7.40439C8.60774 8.93905 7.42354 10.4742 6.23926 12.0089C7.42347 13.5434 8.60781 15.0788 9.79199 16.6134C9.86545 16.7086 9.93924 16.8043 10.0127 16.8995C10.3376 17.32 10.4716 17.8422 10.3672 18.3624C10.2636 18.882 9.93018 19.3581 9.45801 19.6729C8.9858 19.9877 8.41788 20.1131 7.89844 20.0089C7.37808 19.9052 6.94777 19.5799 6.68457 19.1183C6.62496 19.0138 6.5645 18.9092 6.50488 18.8048C5.42979 16.9218 4.35439 15.0374 3.2793 13.1544C3.21976 13.0501 3.16012 12.9452 3.10059 12.8409C2.99425 12.6543 2.93402 12.4428 2.91895 12.2257V11.7901C2.9341 11.5735 2.99449 11.3632 3.10059 11.1769C3.16018 11.0725 3.21971 10.9678 3.2793 10.8634C4.35444 8.98025 5.42974 7.09611 6.50488 5.21298C6.56456 5.10847 6.6249 5.00402 6.68457 4.89951C6.94774 4.43754 7.37788 4.1126 7.89844 4.00888Z"/><path d="M13.9395 4.34482C14.4118 4.02991 14.9794 3.90451 15.499 4.00888C16.0195 4.11266 16.4498 4.43761 16.7129 4.89951C16.7725 5.0039 16.833 5.10859 16.8926 5.21298C17.9677 7.09599 19.0431 8.98037 20.1182 10.8634C20.1777 10.9676 20.2374 11.0726 20.2969 11.1769C20.4381 11.4251 20.4979 11.7166 20.4785 12.0079C20.4981 12.2997 20.4385 12.5923 20.2969 12.8409C20.2373 12.9452 20.1777 13.0501 20.1182 13.1544C19.0431 15.0374 17.9677 16.9217 16.8926 18.8048C16.833 18.9092 16.7725 19.0138 16.7129 19.1183C16.4497 19.5799 16.0193 19.9052 15.499 20.0089C14.9796 20.1132 14.4117 19.9876 13.9395 19.6729C13.4673 19.3582 13.1339 18.8819 13.0303 18.3624C12.9258 17.8421 13.0598 17.3201 13.3848 16.8995C13.4583 16.8043 13.532 16.7086 13.6055 16.6134C14.7897 15.0788 15.974 13.5435 17.1582 12.0089C15.9739 10.4743 14.7897 8.93902 13.6055 7.40439C13.532 7.3092 13.4582 7.21345 13.3848 7.11826C13.0597 6.69783 12.9261 6.17556 13.0303 5.65537C13.1338 5.13567 13.4672 4.65974 13.9395 4.34482Z"/></svg>
<span data-i18n="tabApi">API</span> <span data-i18n="tabApi">API</span>
</button> </button>
</nav> </nav>
<div id="setActions" class="set-actions"> <div id="setActions" class="set-actions">
<button id="setSave" class="btn save" type="button" disabled> <button id="setSave" class="btn save" type="button" disabled>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5 10 17l9-10"/></svg> <svg class="pi" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.9531 3.99225C19.48 3.9335 20.0214 4.09638 20.4492 4.43854C20.8769 4.78081 21.1545 5.27298 21.2129 5.79987C21.2716 6.32695 21.1064 6.84596 20.7617 7.24908C20.5953 7.44382 20.4282 7.63931 20.2617 7.83405C17.2647 11.3402 14.2675 14.8465 11.2705 18.3526C11.1041 18.5473 10.937 18.7428 10.7705 18.9376C10.52 19.23 10.1569 19.4123 9.76758 19.4493C9.50945 19.4735 9.25416 19.4313 9.02344 19.3311C8.84537 19.272 8.67957 19.1816 8.53906 19.0606C8.45329 18.9866 8.36702 18.9129 8.28125 18.8389C6.73535 17.5051 5.18946 16.1708 3.64356 14.837C3.55775 14.7629 3.47155 14.6884 3.38574 14.6143C2.98278 14.2673 2.74666 13.7828 2.74707 13.252C2.7467 12.7223 2.98292 12.1892 3.38574 11.7862C3.78869 11.3833 4.32181 11.1482 4.85156 11.1485C5.38243 11.148 5.86681 11.3832 6.21387 11.7862C6.28792 11.872 6.36247 11.9582 6.43652 12.044C7.4622 13.2328 8.48806 14.4216 9.51367 15.6104C12.0681 12.1955 14.6234 8.78117 17.1777 5.36627C17.3311 5.16129 17.4844 4.95602 17.6377 4.75104C17.9553 4.32607 18.426 4.05079 18.9531 3.99225Z"/></svg>
<span data-i18n="saveSettings">Save</span> <span data-i18n="saveSettings">Save</span>
</button> </button>
<button id="setCancel" class="btn ghost" type="button" disabled data-i18n="cancelSettings">Cancel</button> <button id="setCancel" class="btn ghost" type="button" disabled data-i18n="cancelSettings">Cancel</button>
+2 -2
View File
@@ -23,8 +23,8 @@
<button type="button" role="radio" data-lang="en">EN</button> <button type="button" role="radio" data-lang="en">EN</button>
</div> </div>
<button id="themeBtn" class="icon-btn" type="button" data-i18n-title="theme" data-i18n-aria="theme"> <button id="themeBtn" class="icon-btn" type="button" data-i18n-title="theme" data-i18n-aria="theme">
<svg class="sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg> <svg class="pi sun" viewBox="0 0 24 24"><path d="M15 12.8572C15 14.514 13.6569 15.8572 12 15.8572C10.3431 15.8572 9 14.514 9 12.8572C9 11.2003 10.3431 9.85718 12 9.85718C13.6569 9.85718 15 11.2003 15 12.8572Z"/><path d="M11.9994 9.85732C13.6563 9.85732 14.9994 11.2005 14.9994 12.8573C14.9993 14.514 13.6562 15.8573 11.9994 15.8573C10.3429 15.8571 8.99959 14.5139 8.99943 12.8573C8.99943 11.2006 10.3428 9.85754 11.9994 9.85732Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.224 2.71279C13.1976 2.82269 13.8745 3.93342 15.2279 6.1542C17.808 5.82774 19.0985 5.66373 19.7914 6.35635C19.8975 6.46241 19.9909 6.58086 20.0707 6.70791C20.5916 7.53758 20.1456 8.75872 19.2533 11.2011C21.1171 13.0146 22.0492 13.9219 21.9399 14.8954C21.9231 15.0444 21.8898 15.1914 21.8403 15.3329C21.5165 16.2576 20.283 16.6707 17.8168 17.496C17.561 20.084 17.4324 21.3779 16.6029 21.8993C16.4762 21.979 16.3409 22.0442 16.1996 22.0937C15.2748 22.4171 14.1824 21.7104 11.9994 20.2968C9.81658 21.7103 8.72506 22.4171 7.80021 22.0937C7.65874 22.0441 7.52282 21.9791 7.39592 21.8993C6.56669 21.3778 6.43883 20.0837 6.18303 17.496C3.71676 16.6707 2.48338 16.2576 2.15959 15.3329C2.11005 15.1914 2.07674 15.0444 2.05998 14.8954C1.95064 13.9218 2.88271 13.0146 4.7465 11.2011C3.8542 8.75861 3.40816 7.53759 3.92912 6.70791C4.00891 6.58086 4.10231 6.46241 4.20842 6.35635C4.9014 5.66383 6.19193 5.82775 8.77189 6.1542C10.1253 3.93342 10.8022 2.82269 11.7758 2.71279C11.9247 2.696 12.0751 2.69599 12.224 2.71279ZM11.9994 7.85732C9.23819 7.85754 6.99943 10.096 6.99943 12.8573C6.99959 15.6185 9.23829 17.8571 11.9994 17.8573C14.7608 17.8573 16.9993 15.6186 16.9994 12.8573C16.9994 10.0959 14.7609 7.85732 11.9994 7.85732Z"/></svg>
<svg class="moon" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg> <svg class="pi moon" viewBox="0 0 24 24"><path d="M11 3.85718C11.7891 3.85718 12.0004 5.04248 11.4641 5.62132C10.5555 6.60206 10 7.91462 10 9.35718C10 12.3947 12.4624 14.8572 15.5 14.8572C16.9423 14.8572 18.2542 14.3018 19.2346 13.3934C19.8136 12.8568 20.9996 13.0677 21 13.8572C21.0027 18.8277 16.9706 21.8572 12 21.8572C7.02944 21.8572 3 17.8277 3 12.8572C3 7.88661 6.02944 3.85718 11 3.85718Z"/></svg>
</button> </button>
</div> </div>
+1
View File
@@ -158,6 +158,7 @@ body {
button, input, select { font: inherit; color: inherit; } button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; } button { cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.pi { fill: currentColor; stroke: none; } /* Papicons: filled shapes, no outline */
.muted { color: var(--muted); } .muted { color: var(--muted); }
.small { font-size: 12.5px; } .small { font-size: 12.5px; }
[hidden] { display: none !important; } [hidden] { display: none !important; }