chore(wiki): the button class is now optional for input elements

This commit is contained in:
Tasia Iso 2024-02-22 22:34:11 +01:00
parent 1d5cdf9607
commit e361c3f975
4 changed files with 28 additions and 23 deletions

View File

@ -68,7 +68,7 @@ class TfCollectionElement extends LitElement {
return html`
<link rel="stylesheet" href="tildefriends.css"/>
<span class="inline-flex-row">
<select class="button" @change=${this.on_selected} id="select" value=${this.selected_id}>
<select @change=${this.on_selected} id="select" value=${this.selected_id}>
<option value="" ?selected=${this.selected_id === ''} disabled hidden>(select ${this.category})</option>
${Object.values(this.collection ?? {}).sort((x, y) => x.name.localeCompare(y.name)).map(x => html`<option value=${x.id} ?selected=${this.selected_id === x.id}>${x.name}</option>`)}
</select>

View File

@ -27,7 +27,7 @@ class TfIdentityPickerElement extends LitElement {
render() {
return html`
<link rel="stylesheet" href="tildefriends.css"/>
<select @change=${this.changed} class="button" style="max-width: 100%">
<select @change=${this.changed} style="max-width: 100%">
${(this.ids ?? []).map(id => html`<option ?selected=${id == this.selected} value=${id}>${id}</option>`)}
</select>
`;

View File

@ -262,12 +262,13 @@ class TfWikiDocElement extends LitElement {
<div ?hidden=${!this.value?.private} style="color: #800">🔒 document is private</div>
<div class="flex-column" ${this.value?.private ? 'border-top: 4px solid #800' : ''}">
<textarea
rows="25"
?hidden=${!this.is_editing}
id="editor-text-area"
@input=${this.on_edit}
@paste=${this.paste}
.value=${this.blob ?? ''}></textarea>
<div style="flex: 1 1">
<div style="flex: 1 1; margin-top: 16px">
<div ?hidden=${!this.is_editing} class="box">
Summary
<img ?hidden=${!thumbnail_ref} style="max-width: 128px; max-height: 128px; float: right" src="/${thumbnail_ref}/view">

View File

@ -17,7 +17,11 @@ body {
font-family: sans-serif;
}
button, .button {
button,
.button,
input[type=button],
input[type=submit],
select {
border: none;
border-radius: 8px;
padding: 8px 12px;
@ -25,30 +29,30 @@ button, .button {
text-decoration: none;
display: inline-block;
margin: 4px;
}
button:hover, .button:hover {
filter: brightness(0.75);
}
&.red {
background-color: #bd1e24;
color: white;
}
button.red, .button.red {
background-color: #bd1e24;
color: white;
}
&.green {
background-color: #18922d;
color: white;
}
button.green, .button.green {
background-color: #18922d;
color: white;
}
&.blue {
background-color: #0067a7;
color: white;
}
button.blue, .button.blue {
background-color: #0067a7;
color: white;
}
&.yellow {
background-color: #ee9600;
color: black;
}
button.yellow, .button.yellow {
background-color: #ee9600;
color: black;
&:hover {
filter: brightness(0.75);
}
}
a:link {