blisstown/campfire
3
0
Fork 0
Code Issues 19 Pull requests Projects Releases Packages Wiki Activity Actions

rework of navigation UI

Browse source
This commit is contained in:
ari melody 2025-07-10 22:32:54 +01:00
parent 0a563e6121
commit c402f329a7
Signed by: ari
GPG key ID: CF99829C92678188
5 changed files with 20 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/lib/ui/Button.svelte
View file

@ -48,10 +48,9 @@
<style> <style>
button { button {
/* min-width: 64px; */
width: 100%; width: 100%;
height: 54px; height: fit-content;
padding: 16px; padding: .7em .8em;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -62,12 +61,10 @@
text-align: left; text-align: left;
border-radius: 8px; border-radius: 8px;
border-width: 2px; border: 2px solid var(--bg-700);
border-style: solid;
background-color: var(--bg-700); background-color: transparent;
color: var(--text); color: var(--text);
border-color: transparent;
transition-property: border-color, background-color, color; transition-property: border-color, background-color, color;
transition-timing-function: ease-out; transition-timing-function: ease-out;
@ -82,13 +79,11 @@
} }
button:hover { button:hover {
background-color: color-mix(in srgb, var(--bg-700), var(--accent) 10%); background-color: color-mix(in srgb, transparent, var(--bg-700) 50%);
border-color: color-mix(in srgb, var(--bg-700), var(--accent) 20%);
} }
button:active { button:active {
background-color: color-mix(in srgb, var(--bg-700), var(--bg-800) 50%); background-color: var(--bg-700);
border-color: color-mix(in srgb, var(--bg-700), var(--bg-800) 10%);
} }
button.active { button.active {
@ -127,7 +122,6 @@
} }
button.disabled { button.disabled {
background-color: var(--bg-700);
color: var(--text); color: var(--text);
opacity: .5; opacity: .5;
border-color: transparent; border-color: transparent;
@ -135,13 +129,15 @@
} }
button.disabled:hover { button.disabled:hover {
background-color: transparent;
} }
button.disabled:active { button.disabled:active {
background-color: transparent;
} }
.icon:not(:empty) { .icon:not(:empty) {
height: 150%; height: 1.8em;
margin-right: 8px; margin-right: 8px;
} }

11
src/lib/ui/Notification.svelte
View file

@ -141,18 +141,19 @@
<style> <style>
.notification { .notification {
display: block; display: block;
margin-bottom: 8px; border-top: 1px solid color-mix(in srgb, transparent, var(--text) 50%);
padding: 16px; padding: 16px;
border-radius: 8px;
background: var(--bg-800);
text-decoration: inherit; text-decoration: inherit;
color: inherit; color: inherit;
transition: background-color .1s; transition: background-color .1s;
cursor: pointer; cursor: pointer;
} }
.notification:first-of-type {
border-top: none;
}
.notification:hover { .notification:hover {
background-color: color-mix(in srgb, var(--bg-800), black 5%); background-color: color-mix(in srgb, var(--bg-800), transparent 50%);
} }
header { header {
@ -280,7 +281,7 @@
width: calc(100% - 16px); width: calc(100% - 16px);
margin-bottom: 10px; margin-bottom: 10px;
padding: 4px 8px; padding: 4px 8px;
--warn-bg: color-mix(in srgb, var(--bg-700), var(--accent) 1%); --warn-bg: color-mix(in srgb, transparent, var(--bg-700) 50%);
background: repeating-linear-gradient(-45deg, transparent, transparent 10px, var(--warn-bg) 10px, var(--warn-bg) 20px); background: repeating-linear-gradient(-45deg, transparent, transparent 10px, var(--warn-bg) 10px, var(--warn-bg) 20px);
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;

2
src/lib/ui/post/Body.svelte
View file

@ -60,7 +60,7 @@
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 10px;
padding: 4px 8px; padding: 4px 8px;
--warn-bg: color-mix(in srgb, var(--bg-700), var(--accent) 1%); --warn-bg: color-mix(in srgb, transparent, var(--bg-700) 50%);
background: repeating-linear-gradient(-45deg, transparent, transparent 10px, var(--warn-bg) 10px, var(--warn-bg) 20px); background: repeating-linear-gradient(-45deg, transparent, transparent 10px, var(--warn-bg) 10px, var(--warn-bg) 20px);
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;

6
src/lib/ui/post/Post.svelte
View file

@ -73,9 +73,6 @@
</div> </div>
<style> <style>
.post-container:first-of-type {
border-top: none;
}
.post-container { .post-container {
width: 732px; width: 732px;
max-width: 732px; max-width: 732px;
@ -83,6 +80,9 @@
flex-direction: column; flex-direction: column;
border-top: 1px solid color-mix(in srgb, transparent, var(--text) 25%); border-top: 1px solid color-mix(in srgb, transparent, var(--text) 25%);
} }
.post-container:first-of-type {
border-top: none;
}
.post { .post {
padding: 16px; padding: 16px;

1
src/routes/+page.svelte
View file

@ -61,6 +61,7 @@
margin-left: auto; margin-left: auto;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center;
gap: 8px; gap: 8px;
} }