Experimenting with w3.css themes.

This commit is contained in:
2024-04-04 20:35:09 -04:00
parent 6ae61d5b81
commit 81d1228b92
14 changed files with 112 additions and 112 deletions

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>`