Experimenting with w3.css themes.
This commit is contained in:
parent
6ae61d5b81
commit
81d1228b92
@ -1,5 +1,5 @@
|
||||
{
|
||||
"type": "tildefriends-app",
|
||||
"emoji": "🐌",
|
||||
"previous": "&W6OyIT7eLYsiAZ6BHEAsvF+OJXlVgFs1MH1eLf+EhkQ=.sha256"
|
||||
"previous": "&W98iW3aUxCvTQovPohAd500SpJyOEwsVPDe4hoHaVMg=.sha256"
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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"
|
||||
>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>`
|
||||
|
||||
@ -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];
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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()}
|
||||
|
||||
@ -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)}
|
||||
>
|
||||
|
||||
@ -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>
|
||||
`;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user