cory/tildefriends
5
6
Fork 2
Code Issues 39 Pull Requests Actions Releases 33 Wiki Activity

Experimenting with w3.css themes.

Browse Source
This commit is contained in:
Cory McWilliams
2024-04-04 20:35:09 -04:00
parent 6ae61d5b81
commit 81d1228b92
14 changed files with 112 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
apps/ssb/tf-message.js
View File

@ -240,7 +240,7 @@ ${JSON.stringify(mention, null, 2)}</pre
let self = this;
return html`
<fieldset
style="background-color: rgba(0, 0, 0, 0.1); padding: 0.5em; border: 1px solid black"
style="backdrop-filter: brightness(1.2); padding: 0.5em; border: 1px solid black"
>
<legend>Mentions</legend>
${mentions.map((x) => self.render_mention(x))}
@ -282,14 +282,14 @@ ${JSON.stringify(mention, null, 2)}</pre
if (this.message.child_messages?.length) {
if (!this.expanded[this.message.id]) {
return html`<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${() => self.set_expanded(true)}
>
+ ${this.total_child_messages(this.message) + ' More'}
</button>`;
} else {
return html`<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${() => self.set_expanded(false)}
>
Collapse</button
@ -337,14 +337,14 @@ ${JSON.stringify(mention, null, 2)}</pre
case 'raw':
if (content?.type == 'post' || content?.type == 'blog') {
raw_button = html`<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${() => (self.format = 'md')}
>
Markdown
</button>`;
} else {
raw_button = html`<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${() => (self.format = 'message')}
>
Message
@ -353,7 +353,7 @@ ${JSON.stringify(mention, null, 2)}</pre
break;
case 'md':
raw_button = html`<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${() => (self.format = 'message')}
>
Message
@ -361,7 +361,7 @@ ${JSON.stringify(mention, null, 2)}</pre
break;
case 'decrypted':
raw_button = html`<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${() => (self.format = 'raw')}
>
Raw
@ -370,14 +370,14 @@ ${JSON.stringify(mention, null, 2)}</pre
default:
if (this.message.decrypted) {
raw_button = html`<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${() => (self.format = 'decrypted')}
>
Decrypted
</button>`;
} else {
raw_button = html`<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${() => (self.format = 'raw')}
>
Raw
@ -390,7 +390,7 @@ ${JSON.stringify(mention, null, 2)}</pre
return html`
<div
class="w3-card-4"
style="background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; display: inline-block; overflow-wrap: anywhere"
style="backdrop-filter: brightness(1.2); margin-top: 8px; padding: 16px; display: inline-block; overflow-wrap: anywhere"
>
<tf-user id=${self.message.author} .users=${self.users}></tf-user>
<span style="padding-right: 8px"
@ -406,7 +406,7 @@ ${JSON.stringify(mention, null, 2)}</pre
if (this.message?.type === 'contact_group') {
return html` <div
class="w3-card-4"
style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; overflow-wrap: anywhere"
style="border: 1px solid black; backdrop-filter: brightness(1.2); margin-top: 8px; padding: 16px; overflow-wrap: anywhere"
>
${this.message.messages.map(
(x) =>
@ -422,7 +422,7 @@ ${JSON.stringify(mention, null, 2)}</pre
} else if (this.message.placeholder) {
return html` <div
class="w3-card-4"
style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; overflow-wrap: anywhere"
style="border: 1px solid black; backdrop-filter: brightness(1.2); margin-top: 8px; padding: 16px; overflow-wrap: anywhere"
>
<a target="_top" href=${'#' + this.message.id}>${this.message.id}</a>
(placeholder)
@ -503,7 +503,7 @@ ${JSON.stringify(mention, null, 2)}</pre
`
: html`
<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${this.show_reply}
>
Reply
@ -534,7 +534,7 @@ ${JSON.stringify(content, null, 2)}</pre
}
let content_warning = html`
<div
class="w3-panel w3-round-xlarge w3-blue"
class="w3-panel w3-round-xlarge w3-theme-l4"
style="cursor: pointer"
@click=${(x) => this.toggle_expanded(':cw')}
>
@ -555,8 +555,8 @@ ${JSON.stringify(content, null, 2)}</pre
? html`<span style="align-self: center">🔓</span>`
: undefined;
let style_background = this.message?.decrypted
? 'rgba(255, 0, 0, 0.2)'
: 'rgba(255, 255, 255, 0.1)';
? 'background-color: rgba(255, 0, 0, 0.2)'
: 'backdrop-filter: brightness(1.2)';
return html`
<style>
code {
@ -574,7 +574,7 @@ ${JSON.stringify(content, null, 2)}</pre
</style>
<div
class="w3-card-4"
style="border: 1px solid black; background-color: ${style_background}; margin-top: 8px; padding: 16px"
style="border: 1px solid black; ${style_background}; margin-top: 8px; padding: 16px"
>
<div style="display: flex; flex-direction: row">
<tf-user id=${this.message.author} .users=${this.users}></tf-user>
@ -589,7 +589,7 @@ ${JSON.stringify(content, null, 2)}</pre
${payload} ${this.render_votes()}
<p>
${reply}
<button class="w3-button w3-dark-grey" @click=${this.react}>
<button class="w3-button w3-theme-d1" @click=${this.react}>
React
</button>
</p>
@ -601,8 +601,8 @@ ${JSON.stringify(content, null, 2)}</pre
? html`<span style="align-self: center">🔓</span>`
: undefined;
let style_background = this.message?.decrypted
? 'rgba(255, 0, 0, 0.2)'
: 'rgba(255, 255, 255, 0.1)';
? 'background: rgba(255, 0, 0, 0.2)'
: 'backdrop-filter: brightness(1.2)';
return html`
<style>
code {
@ -620,7 +620,7 @@ ${JSON.stringify(content, null, 2)}</pre
</style>
<div
class="w3-card-4"
style="border: 1px solid black; background-color: ${style_background}; margin-top: 8px; padding: 16px"
style="border: 1px solid black; ${style_background}; margin-top: 8px; padding: 16px"
>
<div style="display: flex; flex-direction: row">
<tf-user id=${this.message.author} .users=${this.users}></tf-user>
@ -634,7 +634,7 @@ ${JSON.stringify(content, null, 2)}</pre
</div>
${content.text} ${this.render_votes()}
<p>
<button class="w3-button w3-dark-grey" @click=${this.react}>
<button class="w3-button w3-theme-d1" @click=${this.react}>
React
</button>
</p>
@ -691,7 +691,7 @@ ${JSON.stringify(content, null, 2)}</pre
`
: html`
<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${this.show_reply}
>
Reply
@ -714,7 +714,7 @@ ${JSON.stringify(content, null, 2)}</pre
</style>
<div
class="w3-card-4"
style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px"
style="border: 1px solid black; backdrop-filter: brightness(1.2); margin-top: 8px; padding: 16px"
>
<div style="display: flex; flex-direction: row">
<tf-user id=${this.message.author} .users=${this.users}></tf-user>
@ -730,7 +730,7 @@ ${JSON.stringify(content, null, 2)}</pre
${this.render_mentions()}
<div>
${reply}
<button class="w3-button w3-dark-grey" @click=${this.react}>
<button class="w3-button w3-theme-d1" @click=${this.react}>
React
</button>
</div>