- self.set_content_warning(undefined)} checked="checked"> + self.set_content_warning(undefined)} checked="checked"> CW
${draft.content_warning}
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> diff --git a/apps/ssb/tf-id-picker.js b/apps/ssb/tf-id-picker.js index d179f4c7..b9a8adf9 100644 --- a/apps/ssb/tf-id-picker.js +++ b/apps/ssb/tf-id-picker.js @@ -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" > diff --git a/apps/ssb/tf-message.js b/apps/ssb/tf-message.js index 4be9ec85..890dc53c 100644 --- a/apps/ssb/tf-message.js +++ b/apps/ssb/tf-message.js @@ -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> diff --git a/apps/ssb/tf-profile.js b/apps/ssb/tf-profile.js index 762baa9c..4a490440 100644 --- a/apps/ssb/tf-profile.js +++ b/apps/ssb/tf-profile.js @@ -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} + (this.editing = Object.assign({}, this.editing, {description: event.srcElement.value}))}>${this.editing.description}
- + Load More
${this.new_messages_text()} diff --git a/apps/ssb/tf-tab-query.js b/apps/ssb/tf-tab-query.js index 3f0a5a15..179750bd 100644 --- a/apps/ssb/tf-tab-query.js +++ b/apps/ssb/tf-tab-query.js @@ -110,14 +110,14 @@ class TfTabQueryElement extends LitElement { ${this.query} self.search(self.renderRoot.getElementById('search').value)} > diff --git a/apps/ssb/tf-tab-search.js b/apps/ssb/tf-tab-search.js index b36bc823..ec5588f9 100644 --- a/apps/ssb/tf-tab-search.js +++ b/apps/ssb/tf-tab-search.js @@ -78,8 +78,8 @@ class TfTabSearchElement extends LitElement { let self = this; return html` - - self.search(self.renderRoot.getElementById('search').value)}>Search + + self.search(self.renderRoot.getElementById('search').value)}>Search `; diff --git a/core/style.css b/core/style.css index da3f635a..fbc5853a 100644 --- a/core/style.css +++ b/core/style.css @@ -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; }