diff options
| author | Fuwn <[email protected]> | 2024-01-04 08:06:45 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-01-04 08:06:45 -0800 |
| commit | 48ffcbd431ea9d12a73a55c233a4fd3834575d5e (patch) | |
| tree | e1ff446bcdd1ecc4aad35c5d6a33fc264bdd3945 /src | |
| parent | feat(css): different check style (diff) | |
| download | due.moe-48ffcbd431ea9d12a73a55c233a4fd3834575d5e.tar.xz due.moe-48ffcbd431ea9d12a73a55c233a4fd3834575d5e.zip | |
feat(settings): cool button style
Diffstat (limited to 'src')
| -rw-r--r-- | src/app.css | 37 | ||||
| -rw-r--r-- | src/routes/settings/+page.svelte | 8 |
2 files changed, 41 insertions, 4 deletions
diff --git a/src/app.css b/src/app.css index 9d54f143..1eae8061 100644 --- a/src/app.css +++ b/src/app.css @@ -23,10 +23,19 @@ select { place-content: center; } +input[type='text'], +input[type='number'], +input[type='date'], +input[type='time'], +button { + padding: 0.25em 0.5em; +} + select { transform: translateY(0em); margin-top: 0.25em; margin-bottom: 0.25em; + padding: 0.25em 0.5em; } input[type='checkbox'] { @@ -48,3 +57,31 @@ input[type='checkbox']:checked:before { left: 50%; transform: translate(-50%, -50%); } + +input[type='checkbox']:active { + transform: scale(0.975); + transition: transform 0.15s ease-in-out; +} + +input[type='checkbox']:hover { + background-color: var(--base0A); +} + +button { + cursor: pointer; + position: relative; + background-color: var(--base0B); + color: var(--base00); + border: none; + border-radius: 4px; + transition: background-color 0.15s ease-in-out; +} + +button:hover { + background-color: var(--base0A); +} + +button:active { + transform: scale(0.975); + transition: transform 0.15s ease-in-out; +} diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte index 3d8aee18..f61b236b 100644 --- a/src/routes/settings/+page.svelte +++ b/src/routes/settings/+page.svelte @@ -34,8 +34,7 @@ Please log in to modify settings. {:else} <Category title="RSS Feeds" id="feeds"> - <a - href={'#'} + <button on:click={() => navigator.clipboard.writeText( `https://${ @@ -45,8 +44,9 @@ }` )} > - Click to copy AniList notifications RSS feed URL and token - </a> + Copy to clipboard + </button> + Your AniList notifications RSS feed URL <SettingHint lineBreak>Do not share this link with <b>anyone</b>!</SettingHint> </Category> <Category title="Display"><Display /></Category> |