mirrors/btclock-webui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Only use necessary icons

Browse Source
This commit is contained in:
Djuri Baars 2024-09-03 01:18:20 +02:00
parent ad9e35a268
commit 1dd3a7f834
4 changed files with 35 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/icons/EyeIcon.svelte Normal file
View File

@ -0,0 +1,13 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-eye"
viewBox="0 0 16 16"
>
<path
d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z"
/>
<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 530 B

18
src/icons/EyeSlashIcon.svelte Normal file
View File

@ -0,0 +1,18 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-eye-slash"
viewBox="0 0 16 16"
>
<path
d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z"
/>
<path
d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829"
/>
<path
d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 814 B

6
src/lib/style/app.scss
View File

@ -7,12 +7,6 @@
@import '@fontsource/oswald/latin-400.css';
@import './satsymbol';
$bootstrap-icons-font: 'bootstrap-icons' !default;
$bootstrap-icons-font-dir: 'bootstrap-icons/font//fonts' !default;
$bootstrap-icons-font-file: '#{$bootstrap-icons-font-dir}/#{$bootstrap-icons-font}' !default;
@import 'bootstrap-icons/font/bootstrap-icons.scss';
$color-mode-type: media-query;
$font-family-base: 'Ubuntu';
$font-size-base: 0.9rem;

6
src/routes/Settings.svelte
View File

@ -14,13 +14,14 @@
Col,
Form,
FormText,
Icon,
Input,
InputGroup,
InputGroupText,
Label,
Row
} from 'sveltestrap';
import EyeIcon from '../icons/EyeIcon.svelte';
import EyeSlashIcon from '../icons/EyeSlashIcon.svelte';
export let settings;
@ -504,7 +505,8 @@
type="button"
on:click={() => (showPassword = !showPassword)}
color={showPassword ? 'success' : 'danger'}
><Icon name={showPassword ? 'eye-slash' : 'eye'}></Icon></Button
>{#if !showPassword}<EyeIcon></EyeIcon>{:else}<EyeSlashIcon
></EyeSlashIcon>{/if}</Button
>
</InputGroup>
<FormText>{$_('section.settings.httpAuthText')}</FormText>