nyanogang/nyanoblog
2
1
Fork 0
Code Issues Pull requests Projects 1 Releases Packages Wiki Activity

web: rework text box shadows (again)

Browse source
This commit is contained in:
anna 2022-12-16 02:15:57 +01:00
parent 3df29a3cf3
commit 51ffb6fe71
Signed by: fef
GPG key ID: EC22E476DC2D3D84
2 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/web/components/input-field.ts
View file

@ -54,8 +54,8 @@ export default class InputField extends LitElement {
input:focus-visible { input:focus-visible {
outline: 0; outline: 0;
box-shadow: box-shadow:
inset 0 1px 1px 0 var(--accent-highlight-color), inset 0 0 2px 1px var(--accent-highlight-color),
0 0 2px 0 var(--accent-highlight-color); 0 0 4px 0 var(--accent-highlight-color);
} }
`); `);
} }

9
src/web/features/compose-form.ts
View file

@ -36,12 +36,14 @@ export default class ComposeForm extends LitElement {
maxlength="${maxNoteChars - this.content.length}" maxlength="${maxNoteChars - this.content.length}"
@input=${() => this.summary = this.summaryInput.value} @input=${() => this.summary = this.summaryInput.value}
></input-field> ></input-field>
<textarea <textarea
id="content" id="content"
placeholder="${msg("Say something nice")}" placeholder="${msg("Say something nice")}"
@input=${() => this.content = this.contentInput.value} @input=${() => this.content = this.contentInput.value}
maxlength="${maxNoteChars - this.summary.length}" maxlength="${maxNoteChars - this.summary.length}"
></textarea> ></textarea>
<div id="bar"> <div id="bar">
<div id="actions"> <div id="actions">
<icon-button icon="paperclip" label="${msg("Add attachment")}"></icon-button> <icon-button icon="paperclip" label="${msg("Add attachment")}"></icon-button>
@ -49,6 +51,7 @@ export default class ComposeForm extends LitElement {
<icon-button icon="emoji-laughing" label="${msg("Insert emogi")}"></icon-button> <icon-button icon="emoji-laughing" label="${msg("Insert emogi")}"></icon-button>
<icon-button icon="${this.getGlobeIconName()}" label="${msg("Note visibility")}"></icon-button> <icon-button icon="${this.getGlobeIconName()}" label="${msg("Note visibility")}"></icon-button>
</div> </div>
<div <div
id="remaining-chars" id="remaining-chars"
class="${this.getRemainingCharsClass()}" class="${this.getRemainingCharsClass()}"
@ -106,8 +109,8 @@ export default class ComposeForm extends LitElement {
textarea:focus-visible { textarea:focus-visible {
outline: 0; outline: 0;
box-shadow: box-shadow:
inset 0 1px 1px 0 var(--accent-highlight-color), inset 0 0 2px 1px var(--accent-highlight-color),
0 0 2px 0 var(--accent-highlight-color); 0 0 4px 0 var(--accent-highlight-color);
} }
#bar { #bar {
@ -120,7 +123,7 @@ export default class ComposeForm extends LitElement {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 8px 0; padding: 8px 0 0;
} }
#actions > * { #actions > * {