cory/tildefriends
4
5
Fork 1
Code Issues 33 Pull Requests 1 Actions Releases 27 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/ssb.json
View File

@ -1,5 +1,5 @@
{ {
"type": "tildefriends-app", "type": "tildefriends-app",
"emoji": "🐌", "emoji": "🐌",
"previous": "&W6OyIT7eLYsiAZ6BHEAsvF+OJXlVgFs1MH1eLf+EhkQ=.sha256" "previous": "&W98iW3aUxCvTQovPohAd500SpJyOEwsVPDe4hoHaVMg=.sha256"
} }

6
apps/ssb/index.html
View File

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html style="color: #fff"> <html>
<head> <head>
<title>Tilde Friends</title> <title>Tilde Friends</title>
<base target="_top" /> <base target="_top" />
@ -10,8 +10,8 @@
} }
</style> </style>
</head> </head>
<body style="background-color: #223a5e"> <body style="margin: 0; padding: 0; background: #000">
<tf-app class="w3-deep-purple" /> <tf-app/>
<script> <script>
window.litDisableBundleWarning = true; window.litDisableBundleWarning = true;
</script> </script>

22
apps/ssb/tf-app.js
View File

@ -205,7 +205,7 @@ class TfElement extends LitElement {
@change=${this._handle_whoami_changed} @change=${this._handle_whoami_changed}
></tf-id-picker> ></tf-id-picker>
<button <button
class="w3-button w3-dark-grey w3-border" class="w3-button w3-theme-d1 w3-border"
style="flex: 0 0 auto" style="flex: 0 0 auto"
@click=${this.create_identity} @click=${this.create_identity}
id="create_identity" id="create_identity"
@ -352,15 +352,15 @@ class TfElement extends LitElement {
}; };
let tabs = html` let tabs = html`
<div class="w3-bar w3-black"> <div class="w3-bar w3-theme-l1 min-height: 100%">
${Object.entries(k_tabs).map( ${Object.entries(k_tabs).map(
([k, v]) => html` ([k, v]) => html`
<button <button
title=${v} title=${v}
class="w3-bar-item w3-padding-large w3-hover-gray tab ${self.tab == class="w3-bar-item w3-padding-large w3-hover-theme tab ${self.tab ==
v v
? 'w3-red' ? 'w3-theme-l2'
: 'w3-black'}" : 'w3-theme-l1'}"
@click=${() => self.set_tab(v)} @click=${() => self.set_tab(v)}
> >
${k} ${k}
@ -375,11 +375,13 @@ class TfElement extends LitElement {
: html`<div>Select or create an identity.</div>` : html`<div>Select or create an identity.</div>`
: this.render_tab(); : this.render_tab();
return html` return html`
${this.render_id_picker()} ${tabs} <div style="padding: 8px" class="w3-theme-dark">
${this.tags.map( ${this.render_id_picker()} ${tabs}
(x) => html`<tf-tag tag=${x.tag} count=${x.count}></tf-tag>` ${this.tags.map(
)} (x) => html`<tf-tag tag=${x.tag} count=${x.count}></tf-tag>`
${contents} )}
${contents}
</div>
`; `;
} }
} }

36
apps/ssb/tf-compose.js
View File

@ -356,7 +356,7 @@ class TfComposeElement extends LitElement {
return html` <div style="display: flex; flex-direction: row"> return html` <div style="display: flex; flex-direction: row">
<div style="align-self: center; margin: 0.5em"> <div style="align-self: center; margin: 0.5em">
<button <button
class="w3-button w3-dark-grey" class="w3-button w3-theme-d1"
title="Remove ${mention.name} mention" title="Remove ${mention.name} mention"
@click=${() => self.remove_mention(mention.link)} @click=${() => self.remove_mention(mention.link)}
> >
@ -410,16 +410,16 @@ class TfComposeElement extends LitElement {
if (this.apps) { if (this.apps) {
return html` return html`
<div class="w3-card-4 w3-margin w3-padding"> <div class="w3-card-4 w3-margin w3-padding">
<select id="select" class="w3-select w3-dark-grey"> <select id="select" class="w3-select w3-theme-d1">
${Object.keys(self.apps).map( ${Object.keys(self.apps).map(
(app) => html`<option value=${app}>${app}</option>` (app) => html`<option value=${app}>${app}</option>`
)} )}
</select> </select>
<button class="w3-button w3-dark-grey" @click=${attach_selected_app}> <button class="w3-button w3-theme-d1" @click=${attach_selected_app}>
Attach Attach
</button> </button>
<button <button
class="w3-button w3-dark-grey" class="w3-button w3-theme-d1"
@click=${() => (this.apps = null)} @click=${() => (this.apps = null)}
> >
Cancel Cancel
@ -435,12 +435,12 @@ class TfComposeElement extends LitElement {
self.apps = await tfrpc.rpc.apps(); self.apps = await tfrpc.rpc.apps();
} }
if (!this.apps) { if (!this.apps) {
return html`<button class="w3-button w3-dark-grey" @click=${attach_app}> return html`<button class="w3-button w3-theme-d1" @click=${attach_app}>
Attach App Attach App
</button>`; </button>`;
} else { } else {
return html`<button return html`<button
class="w3-button w3-dark-grey" class="w3-button w3-theme-d1"
@click=${() => (this.apps = null)} @click=${() => (this.apps = null)}
> >
Discard App Discard App
@ -462,15 +462,15 @@ class TfComposeElement extends LitElement {
return html` return html`
<div class="w3-container w3-padding"> <div class="w3-container w3-padding">
<p> <p>
<input type="checkbox" class="w3-check w3-dark-grey" id="cw" @change=${() => self.set_content_warning(undefined)} checked="checked"></input> <input type="checkbox" class="w3-check w3-theme-d1" id="cw" @change=${() => self.set_content_warning(undefined)} checked="checked"></input>
<label for="cw">CW</label> <label for="cw">CW</label>
</p> </p>
<input type="text" class="w3-input w3-border w3-dark-grey" id="content_warning" placeholder="Enter a content warning here." @input=${this.input} @change=${this.change} value=${draft.content_warning}></input> <input type="text" class="w3-input w3-border w3-theme-d1" id="content_warning" placeholder="Enter a content warning here." @input=${this.input} @change=${this.change} value=${draft.content_warning}></input>
</div> </div>
`; `;
} else { } else {
return html` return html`
<input type="checkbox" class="w3-check w3-dark-grey" id="cw" @change=${() => self.set_content_warning('')}></input> <input type="checkbox" class="w3-check w3-theme-d1" id="cw" @change=${() => self.set_content_warning('')}></input>
<label for="cw">CW</label> <label for="cw">CW</label>
`; `;
} }
@ -500,14 +500,14 @@ class TfComposeElement extends LitElement {
<div style="display: flex; flex-direction: row; width: 100%"> <div style="display: flex; flex-direction: row; width: 100%">
<label for="encrypt_to">🔐 To:</label> <label for="encrypt_to">🔐 To:</label>
<input type="text" id="encrypt_to" style="display: flex; flex: 1 1" @input=${this.update_encrypt}></input> <input type="text" id="encrypt_to" style="display: flex; flex: 1 1" @input=${this.update_encrypt}></input>
<button class="w3-button w3-dark-grey" @click=${() => this.set_encrypt(undefined)}>🚮</button> <button class="w3-button w3-theme-d1" @click=${() => this.set_encrypt(undefined)}>🚮</button>
</div> </div>
<ul> <ul>
${draft.encrypt_to.map( ${draft.encrypt_to.map(
(x) => html` (x) => html`
<li> <li>
<tf-user id=${x} .users=${this.users}></tf-user> <tf-user id=${x} .users=${this.users}></tf-user>
<input type="button" class="w3-button w3-dark-grey" value="🚮" @click=${() => this.set_encrypt(draft.encrypt_to.filter((id) => id != x))}></input> <input type="button" class="w3-button w3-theme-d1" value="🚮" @click=${() => this.set_encrypt(draft.encrypt_to.filter((id) => id != x))}></input>
</li>` </li>`
)} )}
</ul> </ul>
@ -526,7 +526,7 @@ class TfComposeElement extends LitElement {
let draft = self.get_draft(); let draft = self.get_draft();
let content_warning = let content_warning =
draft.content_warning !== undefined draft.content_warning !== undefined
? html`<div class="w3-panel w3-round-xlarge w3-blue"> ? html`<div class="w3-panel w3-round-xlarge w3-theme-d2">
<p id="content_warning_preview">${draft.content_warning}</p> <p id="content_warning_preview">${draft.content_warning}</p>
</div>` </div>`
: undefined; : undefined;
@ -534,14 +534,14 @@ class TfComposeElement extends LitElement {
draft.encrypt_to !== undefined draft.encrypt_to !== undefined
? undefined ? undefined
: html`<button : html`<button
class="w3-button w3-dark-grey" class="w3-button w3-theme-d1"
@click=${() => this.set_encrypt([])} @click=${() => this.set_encrypt([])}
> >
🔐 🔐
</button>`; </button>`;
let result = html` let result = html`
<div <div
class="w3-card-4 w3-blue-grey w3-padding" class="w3-card-4 w3-theme-d4 w3-padding"
style="box-sizing: border-box" style="box-sizing: border-box"
> >
${this.render_encrypt()} ${this.render_encrypt()}
@ -549,7 +549,7 @@ class TfComposeElement extends LitElement {
<div style="flex: 1 0 50%"> <div style="flex: 1 0 50%">
<p> <p>
<textarea <textarea
class="w3-input w3-dark-grey w3-border" class="w3-input w3-theme-d1 w3-border"
style="resize: vertical" style="resize: vertical"
placeholder="Write a post here." placeholder="Write a post here."
id="edit" id="edit"
@ -568,17 +568,17 @@ class TfComposeElement extends LitElement {
${Object.values(draft.mentions || {}).map((x) => self.render_mention(x))} ${Object.values(draft.mentions || {}).map((x) => self.render_mention(x))}
${this.render_attach_app()} ${this.render_content_warning()} ${this.render_attach_app()} ${this.render_content_warning()}
<button <button
class="w3-button w3-dark-grey" class="w3-button w3-theme-d1"
id="submit" id="submit"
@click=${this.submit} @click=${this.submit}
> >
Submit Submit
</button> </button>
<button class="w3-button w3-dark-grey" @click=${this.attach}> <button class="w3-button w3-theme-d1" @click=${this.attach}>
Attach Attach
</button> </button>
${this.render_attach_app_button()} ${encrypt} ${this.render_attach_app_button()} ${encrypt}
<button class="w3-button w3-dark-grey" @click=${this.discard}> <button class="w3-button w3-theme-d1" @click=${this.discard}>
Discard Discard
</button> </button>
</div> </div>

2
apps/ssb/tf-id-picker.js
View File

@ -34,7 +34,7 @@ class TfIdentityPickerElement extends LitElement {
render() { render() {
return html` return html`
<select <select
class="w3-select w3-dark-grey w3-padding w3-border" class="w3-select w3-theme-d1 w3-padding w3-border"
@change=${this.changed} @change=${this.changed}
style="max-width: 100%; overflow: hidden" style="max-width: 100%; overflow: hidden"
> >

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

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

26
apps/ssb/tf-profile.js
View File

@ -215,49 +215,49 @@ class TfProfileElement extends LitElement {
let server_follow; let server_follow;
if (this.server_follows_me === true) { if (this.server_follows_me === true) {
server_follow = html`<button server_follow = html`<button
class="w3-button w3-dark-grey" class="w3-button w3-theme-d1"
@click=${() => this.server_follow_me(false)} @click=${() => this.server_follow_me(false)}
> >
Server, Stop Following Me Server, Stop Following Me
</button>`; </button>`;
} else if (this.server_follows_me === false) { } else if (this.server_follows_me === false) {
server_follow = html`<button server_follow = html`<button
class="w3-button w3-dark-grey" class="w3-button w3-theme-d1"
@click=${() => this.server_follow_me(true)} @click=${() => this.server_follow_me(true)}
> >
Server, Follow Me Server, Follow Me
</button>`; </button>`;
} }
edit = html` edit = html`
<button class="w3-button w3-dark-grey" @click=${this.save_edits}> <button class="w3-button w3-theme-d1" @click=${this.save_edits}>
Save Profile Save Profile
</button> </button>
<button class="w3-button w3-dark-grey" @click=${this.discard_edits}> <button class="w3-button w3-theme-d1" @click=${this.discard_edits}>
Discard Discard
</button> </button>
${server_follow} ${server_follow}
`; `;
} else { } else {
edit = html`<button class="w3-button w3-dark-grey" @click=${this.edit}> edit = html`<button class="w3-button w3-theme-d1" @click=${this.edit}>
Edit Profile Edit Profile
</button>`; </button>`;
} }
} }
if (this.id !== this.whoami && this.following !== undefined) { if (this.id !== this.whoami && this.following !== undefined) {
follow = this.following follow = this.following
? html`<button class="w3-button w3-dark-grey" @click=${this.unfollow}> ? html`<button class="w3-button w3-theme-d1" @click=${this.unfollow}>
Unfollow Unfollow
</button>` </button>`
: html`<button class="w3-button w3-dark-grey" @click=${this.follow}> : html`<button class="w3-button w3-theme-d1" @click=${this.follow}>
Follow Follow
</button>`; </button>`;
} }
if (this.id !== this.whoami && this.blocking !== undefined) { if (this.id !== this.whoami && this.blocking !== undefined) {
block = this.blocking block = this.blocking
? html`<button class="w3-button w3-dark-grey" @click=${this.unblock}> ? html`<button class="w3-button w3-theme-d1" @click=${this.unblock}>
Unblock Unblock
</button>` </button>`
: html`<button class="w3-button w3-dark-grey" @click=${this.block}> : html`<button class="w3-button w3-theme-d1" @click=${this.block}>
Block Block
</button>`; </button>`;
} }
@ -267,16 +267,16 @@ class TfProfileElement extends LitElement {
<div class="w3-container"> <div class="w3-container">
<div> <div>
<label for="name">Name:</label> <label for="name">Name:</label>
<input class="w3-input w3-dark-grey" type="text" id="name" value=${this.editing.name} @input=${(event) => (this.editing = Object.assign({}, this.editing, {name: event.srcElement.value}))}></input> <input class="w3-input w3-theme-d1" type="text" id="name" value=${this.editing.name} @input=${(event) => (this.editing = Object.assign({}, this.editing, {name: event.srcElement.value}))}></input>
</div> </div>
<div><label for="description">Description:</label></div> <div><label for="description">Description:</label></div>
<textarea class="w3-input w3-dark-grey" style="resize: vertical" rows="8" id="description" @input=${(event) => (this.editing = Object.assign({}, this.editing, {description: event.srcElement.value}))}>${this.editing.description}</textarea> <textarea class="w3-input w3-theme-d1" style="resize: vertical" rows="8" id="description" @input=${(event) => (this.editing = Object.assign({}, this.editing, {description: event.srcElement.value}))}>${this.editing.description}</textarea>
<div> <div>
<label for="public_web_hosting">Public Web Hosting:</label> <label for="public_web_hosting">Public Web Hosting:</label>
<input class="w3-check w3-dark-grey" type="checkbox" id="public_web_hosting" ?checked=${this.editing.publicWebHosting} @input=${(event) => (self.editing = Object.assign({}, self.editing, {publicWebHosting: event.srcElement.checked}))}></input> <input class="w3-check w3-theme-d1" type="checkbox" id="public_web_hosting" ?checked=${this.editing.publicWebHosting} @input=${(event) => (self.editing = Object.assign({}, self.editing, {publicWebHosting: event.srcElement.checked}))}></input>
</div> </div>
<div> <div>
<button class="w3-button w3-dark-grey" @click=${this.attach_image}>Attach Image</button> <button class="w3-button w3-theme-d1" @click=${this.attach_image}>Attach Image</button>
</div> </div>
</div> </div>
</div>` </div>`

38
apps/ssb/tf-styles.js
View File

@ -1,17 +1,6 @@
import {css} from './lit-all.min.js'; import {css} from './lit-all.min.js';
const tf = css` const tf = css`
a:link {
color: #bbf;
}
a:visited {
color: #ddd;
}
a:hover {
color: #ddf;
}
img { img {
max-width: min(640px, 100%); max-width: min(640px, 100%);
@ -1692,4 +1681,29 @@ const w3 = css`
} }
`; `;
export let styles = [tf, w3]; const w3_2016_snorkel_blue = css`
.w3-theme-l5 {color:#000 !important; background-color:#e9f5ff !important}
.w3-theme-l4 {color:#000 !important; background-color:#b5dffd !important}
.w3-theme-l3 {color:#000 !important; background-color:#6bc0fc !important}
.w3-theme-l2 {color:#fff !important; background-color:#21a0fa !important}
.w3-theme-l1 {color:#fff !important; background-color:#0479cc !important}
.w3-theme-d1 {color:#fff !important; background-color:#024575 !important}
.w3-theme-d2 {color:#fff !important; background-color:#023e68 !important}
.w3-theme-d3 {color:#fff !important; background-color:#02365b !important}
.w3-theme-d4 {color:#fff !important; background-color:#022e4e !important}
.w3-theme-d5 {color:#fff !important; background-color:#012641 !important}
.w3-theme-light {color:#000 !important; background-color:#e9f5ff !important}
.w3-theme-dark {color:#fff !important; background-color:#012641 !important}
.w3-theme-action {color:#fff !important; background-color:#012641 !important}
.w3-theme {color:#fff !important; background-color:#034f84 !important}
.w3-text-theme {color:#034f84 !important}
.w3-border-theme {border-color:#034f84 !important}
.w3-hover-theme:hover {color:#fff !important; background-color:#034f84 !important}
.w3-hover-text-theme:hover {color:#034f84 !important}
.w3-hover-border-theme:hover {border-color:#034f84 !important}
`;
export let styles = [tf, w3, w3_2016_snorkel_blue];

14
apps/ssb/tf-tab-connections.js
View File

@ -61,7 +61,7 @@ class TfTabConnectionsElement extends LitElement {
return html` return html`
<li> <li>
<button <button
class="w3-button w3-dark-grey" class="w3-button w3-theme-d1"
@click=${() => self._tunnel(connection.tunnel.id, connection.pubkey)} @click=${() => self._tunnel(connection.tunnel.id, connection.pubkey)}
> >
Connect Connect
@ -75,7 +75,7 @@ class TfTabConnectionsElement extends LitElement {
return html` return html`
<li> <li>
<button <button
class="w3-button w3-dark-grey" class="w3-button w3-theme-d1"
@click=${() => tfrpc.rpc.connect(connection)} @click=${() => tfrpc.rpc.connect(connection)}
> >
Connect Connect
@ -94,7 +94,7 @@ class TfTabConnectionsElement extends LitElement {
render_connection(connection) { render_connection(connection) {
return html` return html`
<button <button
class="w3-button w3-dark-grey" class="w3-button w3-theme-d1"
@click=${() => tfrpc.rpc.closeConnection(connection.id)} @click=${() => tfrpc.rpc.closeConnection(connection.id)}
> >
Close Close
@ -117,9 +117,9 @@ class TfTabConnectionsElement extends LitElement {
return html` return html`
<div class="w3-container"> <div class="w3-container">
<h2>New Connection</h2> <h2>New Connection</h2>
<textarea class="w3-input w3-dark-grey" id="code"></textarea> <textarea class="w3-input w3-theme-d1" id="code"></textarea>
<button <button
class="w3-button w3-dark-grey" class="w3-button w3-theme-d1"
@click=${() => @click=${() =>
tfrpc.rpc.connect(self.renderRoot.getElementById('code').value)} tfrpc.rpc.connect(self.renderRoot.getElementById('code').value)}
> >
@ -143,13 +143,13 @@ class TfTabConnectionsElement extends LitElement {
(x) => html` (x) => html`
<li> <li>
<button <button
class="w3-button w3-dark-grey" class="w3-button w3-theme-d1"
@click=${() => self.forget_stored_connection(x)} @click=${() => self.forget_stored_connection(x)}
> >
Forget Forget
</button> </button>
<button <button
class="w3-button w3-dark-grey" class="w3-button w3-theme-d1"
@click=${() => tfrpc.rpc.connect(x)} @click=${() => tfrpc.rpc.connect(x)}
> >
Connect Connect

2
apps/ssb/tf-tab-news-feed.js
View File

@ -187,7 +187,7 @@ class TfTabNewsFeedElement extends LitElement {
if (!this.hash.startsWith('#@') && !this.hash.startsWith('#%')) { if (!this.hash.startsWith('#@') && !this.hash.startsWith('#%')) {
more = html` more = html`
<p> <p>
<button class="w3-button w3-dark-grey" @click=${this.load_more}> <button class="w3-button w3-theme-d1" @click=${this.load_more}>
Load More Load More
</button> </button>
</p> </p>

2
apps/ssb/tf-tab-news.js
View File

@ -119,7 +119,7 @@ class TfTabNewsElement extends LitElement {
return html` return html`
<p class="w3-bar"> <p class="w3-bar">
<button <button
class="w3-bar-item w3-button w3-dark-grey" class="w3-bar-item w3-button w3-theme-d1"
@click=${this.show_more} @click=${this.show_more}
> >
${this.new_messages_text()} ${this.new_messages_text()}

4
apps/ssb/tf-tab-query.js
View File

@ -110,14 +110,14 @@ class TfTabQueryElement extends LitElement {
<textarea <textarea
id="search" id="search"
rows="8" rows="8"
class="w3-input w3-dark-grey" class="w3-input w3-theme-d1"
style="flex: 1; resize: vertical" style="flex: 1; resize: vertical"
@keydown=${this.search_keydown} @keydown=${this.search_keydown}
> >
${this.query}</textarea ${this.query}</textarea
> >
<button <button
class="w3-button w3-dark-grey" class="w3-button w3-theme-d1"
@click=${(event) => @click=${(event) =>
self.search(self.renderRoot.getElementById('search').value)} self.search(self.renderRoot.getElementById('search').value)}
> >

4
apps/ssb/tf-tab-search.js
View File

@ -78,8 +78,8 @@ class TfTabSearchElement extends LitElement {
let self = this; let self = this;
return html` return html`
<div style="display: flex; flex-direction: row; gap: 4px"> <div style="display: flex; flex-direction: row; gap: 4px">
<input type="text" class="w3-input w3-dark-grey" id="search" value=${this.query} style="flex: 1" @keydown=${this.search_keydown}></input> <input type="text" class="w3-input w3-theme-d1" id="search" value=${this.query} style="flex: 1" @keydown=${this.search_keydown}></input>
<button class="w3-button w3-dark-grey" @click=${(event) => self.search(self.renderRoot.getElementById('search').value)}>Search</button> <button class="w3-button w3-theme-d1" @click=${(event) => self.search(self.renderRoot.getElementById('search').value)}>Search</button>
</div> </div>
<tf-news id="news" whoami=${this.whoami} .messages=${this.messages} .users=${this.users} .expanded=${this.expanded} @tf-expand=${this.on_expand}></tf-news> <tf-news id="news" whoami=${this.whoami} .messages=${this.messages} .users=${this.users} .expanded=${this.expanded} @tf-expand=${this.on_expand}></tf-news>
`; `;

16
core/style.css
View File

@ -15,22 +15,6 @@ body {
margin: 0; margin: 0;
} }
a:link {
color: #268bd2;
}
a:visited {
color: #6c71c4;
}
a:hover {
color: #859900;
}
a:active {
color: #2aa198;
}
#logo { #logo {
vertical-align: middle; vertical-align: middle;
} }