cory/tildefriends
4
5
Fork 1
Code Issues 29 Pull Requests 1 Actions Releases 26 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",
"emoji": "🐌",
"previous": "&W6OyIT7eLYsiAZ6BHEAsvF+OJXlVgFs1MH1eLf+EhkQ=.sha256"
"previous": "&W98iW3aUxCvTQovPohAd500SpJyOEwsVPDe4hoHaVMg=.sha256"
}

6
apps/ssb/index.html
View File

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

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

@ -205,7 +205,7 @@ class TfElement extends LitElement {
@change=${this._handle_whoami_changed}
></tf-id-picker>
<button
class="w3-button w3-dark-grey w3-border"
class="w3-button w3-theme-d1 w3-border"
style="flex: 0 0 auto"
@click=${this.create_identity}
id="create_identity"
@ -352,15 +352,15 @@ class TfElement extends LitElement {
};
let tabs = html`
<div class="w3-bar w3-black">
<div class="w3-bar w3-theme-l1 min-height: 100%">
${Object.entries(k_tabs).map(
([k, v]) => html`
<button
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
? 'w3-red'
: 'w3-black'}"
? 'w3-theme-l2'
: 'w3-theme-l1'}"
@click=${() => self.set_tab(v)}
>
${k}
@ -375,11 +375,13 @@ class TfElement extends LitElement {
: html`<div>Select or create an identity.</div>`
: this.render_tab();
return html`
${this.render_id_picker()} ${tabs}
${this.tags.map(
(x) => html`<tf-tag tag=${x.tag} count=${x.count}></tf-tag>`
)}
${contents}
<div style="padding: 8px" class="w3-theme-dark">
${this.render_id_picker()} ${tabs}
${this.tags.map(
(x) => html`<tf-tag tag=${x.tag} count=${x.count}></tf-tag>`
)}
${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">
<div style="align-self: center; margin: 0.5em">
<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
title="Remove ${mention.name} mention"
@click=${() => self.remove_mention(mention.link)}
>
@ -410,16 +410,16 @@ class TfComposeElement extends LitElement {
if (this.apps) {
return html`
<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(
(app) => html`<option value=${app}>${app}</option>`
)}
</select>
<button class="w3-button w3-dark-grey" @click=${attach_selected_app}>
<button class="w3-button w3-theme-d1" @click=${attach_selected_app}>
Attach
</button>
<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${() => (this.apps = null)}
>
Cancel
@ -435,12 +435,12 @@ class TfComposeElement extends LitElement {
self.apps = await tfrpc.rpc.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
</button>`;
} else {
return html`<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${() => (this.apps = null)}
>
Discard App
@ -462,15 +462,15 @@ class TfComposeElement extends LitElement {
return html`
<div class="w3-container w3-padding">
<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>
</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>
`;
} else {
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>
`;
}
@ -500,14 +500,14 @@ class TfComposeElement extends LitElement {
<div style="display: flex; flex-direction: row; width: 100%">
<label for="encrypt_to">🔐 To:</label>
<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>
<ul>
${draft.encrypt_to.map(
(x) => html`
<li>
<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>`
)}
</ul>
@ -526,7 +526,7 @@ class TfComposeElement extends LitElement {
let draft = self.get_draft();
let content_warning =
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>
</div>`
: undefined;
@ -534,14 +534,14 @@ class TfComposeElement extends LitElement {
draft.encrypt_to !== undefined
? undefined
: html`<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${() => this.set_encrypt([])}
>
🔐
</button>`;
let result = html`
<div
class="w3-card-4 w3-blue-grey w3-padding"
class="w3-card-4 w3-theme-d4 w3-padding"
style="box-sizing: border-box"
>
${this.render_encrypt()}
@ -549,7 +549,7 @@ class TfComposeElement extends LitElement {
<div style="flex: 1 0 50%">
<p>
<textarea
class="w3-input w3-dark-grey w3-border"
class="w3-input w3-theme-d1 w3-border"
style="resize: vertical"
placeholder="Write a post here."
id="edit"
@ -568,17 +568,17 @@ class TfComposeElement extends LitElement {
${Object.values(draft.mentions || {}).map((x) => self.render_mention(x))}
${this.render_attach_app()} ${this.render_content_warning()}
<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
id="submit"
@click=${this.submit}
>
Submit
</button>
<button class="w3-button w3-dark-grey" @click=${this.attach}>
<button class="w3-button w3-theme-d1" @click=${this.attach}>
Attach
</button>
${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
</button>
</div>

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

@ -34,7 +34,7 @@ class TfIdentityPickerElement extends LitElement {
render() {
return html`
<select
class="w3-select w3-dark-grey w3-padding w3-border"
class="w3-select w3-theme-d1 w3-padding w3-border"
@change=${this.changed}
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;
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>

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

@ -215,49 +215,49 @@ class TfProfileElement extends LitElement {
let server_follow;
if (this.server_follows_me === true) {
server_follow = html`<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${() => this.server_follow_me(false)}
>
Server, Stop Following Me
</button>`;
} else if (this.server_follows_me === false) {
server_follow = html`<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${() => this.server_follow_me(true)}
>
Server, Follow Me
</button>`;
}
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
</button>
<button class="w3-button w3-dark-grey" @click=${this.discard_edits}>
<button class="w3-button w3-theme-d1" @click=${this.discard_edits}>
Discard
</button>
${server_follow}
`;
} 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
</button>`;
}
}
if (this.id !== this.whoami && this.following !== undefined) {
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
</button>`
: html`<button class="w3-button w3-dark-grey" @click=${this.follow}>
: html`<button class="w3-button w3-theme-d1" @click=${this.follow}>
Follow
</button>`;
}
if (this.id !== this.whoami && this.blocking !== undefined) {
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
</button>`
: html`<button class="w3-button w3-dark-grey" @click=${this.block}>
: html`<button class="w3-button w3-theme-d1" @click=${this.block}>
Block
</button>`;
}
@ -267,16 +267,16 @@ class TfProfileElement extends LitElement {
<div class="w3-container">
<div>
<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><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>
<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>
<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>`

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

@ -1,17 +1,6 @@
import {css} from './lit-all.min.js';
const tf = css`
a:link {
color: #bbf;
}
a:visited {
color: #ddd;
}
a:hover {
color: #ddf;
}
img {
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`
<li>
<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${() => self._tunnel(connection.tunnel.id, connection.pubkey)}
>
Connect
@ -75,7 +75,7 @@ class TfTabConnectionsElement extends LitElement {
return html`
<li>
<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${() => tfrpc.rpc.connect(connection)}
>
Connect
@ -94,7 +94,7 @@ class TfTabConnectionsElement extends LitElement {
render_connection(connection) {
return html`
<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${() => tfrpc.rpc.closeConnection(connection.id)}
>
Close
@ -117,9 +117,9 @@ class TfTabConnectionsElement extends LitElement {
return html`
<div class="w3-container">
<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
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${() =>
tfrpc.rpc.connect(self.renderRoot.getElementById('code').value)}
>
@ -143,13 +143,13 @@ class TfTabConnectionsElement extends LitElement {
(x) => html`
<li>
<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${() => self.forget_stored_connection(x)}
>
Forget
</button>
<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${() => tfrpc.rpc.connect(x)}
>
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('#%')) {
more = html`
<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
</button>
</p>

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

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

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

@ -110,14 +110,14 @@ class TfTabQueryElement extends LitElement {
<textarea
id="search"
rows="8"
class="w3-input w3-dark-grey"
class="w3-input w3-theme-d1"
style="flex: 1; resize: vertical"
@keydown=${this.search_keydown}
>
${this.query}</textarea
>
<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${(event) =>
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;
return html`
<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>
<button class="w3-button w3-dark-grey" @click=${(event) => self.search(self.renderRoot.getElementById('search').value)}>Search</button>
<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-theme-d1" @click=${(event) => self.search(self.renderRoot.getElementById('search').value)}>Search</button>
</div>
<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;
}
a:link {
color: #268bd2;
}
a:visited {
color: #6c71c4;
}
a:hover {
color: #859900;
}
a:active {
color: #2aa198;
}
#logo {
vertical-align: middle;
}