From e860fb2971aab8dc209532d48a1f0228990f8e9a Mon Sep 17 00:00:00 2001 From: duanzhijiang Date: Thu, 24 Nov 2022 15:06:11 +0800 Subject: [PATCH] =?UTF-8?q?TASH:=20#122795=20=E4=BC=98=E5=8C=96=E9=94=81?= =?UTF-8?q?=E5=B1=8F=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/base/auto-px-style.ts | 16 ++- src/components/digicipher/digicipher-style.ts | 73 +++++----- src/components/digicipher/digicipher.ts | 135 ++++++++++++------ .../pattern-view/pattern-view-style.ts | 24 +--- src/components/pattern-view/pattern-view.ts | 35 +++-- src/test/panels/digicipher/digicipher.ts | 7 +- src/test/panels/pattern-view/pattern-view.ts | 6 +- 7 files changed, 170 insertions(+), 126 deletions(-) diff --git a/src/components/base/auto-px-style.ts b/src/components/base/auto-px-style.ts index ab05f35..c27cd90 100644 --- a/src/components/base/auto-px-style.ts +++ b/src/components/base/auto-px-style.ts @@ -41,6 +41,7 @@ export const autoPxStyle: CSSResult = css` --auto-45px: calc(44.8px / var(--hostDevicePixelRatio)); --auto-46px: calc(46px / var(--hostDevicePixelRatio)); --auto-46_67px: calc(46.67px / var(--hostDevicePixelRatio)); + --auto-47px: calc(47px / var(--hostDevicePixelRatio)); --auto-48px: calc(48px / var(--hostDevicePixelRatio)); --auto-50px: calc(50px / var(--hostDevicePixelRatio)); --auto-52px: calc(52px / var(--hostDevicePixelRatio)); @@ -64,8 +65,10 @@ export const autoPxStyle: CSSResult = css` --auto-82px: calc(80px / var(--hostDevicePixelRatio)); --auto-85px: calc(85px / var(--hostDevicePixelRatio)); --auto-88px: calc(88px / var(--hostDevicePixelRatio)); + --auto-90px: calc(90px / var(--hostDevicePixelRatio)); --auto-92px: calc(92px / var(--hostDevicePixelRatio)); --auto-96px: calc(96px / var(--hostDevicePixelRatio)); + --auto-100px: calc(100px / var(--hostDevicePixelRatio)); --auto-108px: calc(108px / var(--hostDevicePixelRatio)); --auto-105px: calc(105px / var(--hostDevicePixelRatio)); --auto-112px: calc(112px / var(--hostDevicePixelRatio)); @@ -77,6 +80,7 @@ export const autoPxStyle: CSSResult = css` --auto-140px: calc(140px / var(--hostDevicePixelRatio)); --auto-152px: calc(152px / var(--hostDevicePixelRatio)); --auto-160px: calc(160px / var(--hostDevicePixelRatio)); + --auto-164px: calc(164px / var(--hostDevicePixelRatio)); --auto-166px: calc(166px / var(--hostDevicePixelRatio)); --auto-176px: calc(176px / var(--hostDevicePixelRatio)); --auto-183px: calc(183px / var(--hostDevicePixelRatio)); @@ -88,7 +92,7 @@ export const autoPxStyle: CSSResult = css` --auto-206px: calc(206px / var(--hostDevicePixelRatio)); --auto-208px: calc(208px / var(--hostDevicePixelRatio)); --auto-222px: calc(222px / var(--hostDevicePixelRatio)); - --auto-250px: calc(250px / var(--hostDevicePixelRatio)); + --auto-254px: calc(254px / var(--hostDevicePixelRatio)); --auto-260px: calc(260px / var(--hostDevicePixelRatio)); --auto-275px: calc(275px / var(--hostDevicePixelRatio)); --auto-286px: calc(286px / var(--hostDevicePixelRatio)); @@ -101,6 +105,7 @@ export const autoPxStyle: CSSResult = css` --auto-340px: calc(340px / var(--hostDevicePixelRatio)); --auto-368px: calc(368px / var(--hostDevicePixelRatio)); --auto-370px: calc(370px / var(--hostDevicePixelRatio)); + --auto-374px: calc(374px / var(--hostDevicePixelRatio)); --auto-382px: calc(382px / var(--hostDevicePixelRatio)); --auto-388px: calc(388px / var(--hostDevicePixelRatio)); --auto-396px: calc(396px / var(--hostDevicePixelRatio)); @@ -112,18 +117,25 @@ export const autoPxStyle: CSSResult = css` --auto-448px: calc(448px / var(--hostDevicePixelRatio)); --auto-464px: calc(464px / var(--hostDevicePixelRatio)); --auto-472px: calc(472px / var(--hostDevicePixelRatio)); + --auto-482px: calc(482px / var(--hostDevicePixelRatio)); --auto-484px: calc(484px / var(--hostDevicePixelRatio)); --auto-500px: calc(500px / var(--hostDevicePixelRatio)); + --auto-506px: calc(506px / var(--hostDevicePixelRatio)); --auto-514px: calc(514px / var(--hostDevicePixelRatio)); --auto-520px: calc(520px / var(--hostDevicePixelRatio)); --auto-524px: calc(520px / var(--hostDevicePixelRatio)); --auto-534px: calc(534px / var(--hostDevicePixelRatio)); --auto-543px: calc(543px / var(--hostDevicePixelRatio)); - --auto-607px: calc(607px / var(--hostDevicePixelRatio)); + --auto-596px: calc(596px / var(--hostDevicePixelRatio)); + --auto-598px: calc(598px / var(--hostDevicePixelRatio)); + --auto-606px: calc(606px / var(--hostDevicePixelRatio)); --auto-620px: calc(620px / var(--hostDevicePixelRatio)); --auto-640px: calc(640px / var(--hostDevicePixelRatio)); + --auto-699px: calc(699px / var(--hostDevicePixelRatio)); + --auto-766px: calc(766px / var(--hostDevicePixelRatio)); --auto-736px: calc(736px / var(--hostDevicePixelRatio)); --auto-781px: calc(781px / var(--hostDevicePixelRatio)); + --auto-813px: calc(813px / var(--hostDevicePixelRatio)); --auto-815px: calc(815px / var(--hostDevicePixelRatio)); --auto-1040px: calc(1040px / var(--hostDevicePixelRatio)); --auto-1592px: calc(1592px / var(--hostDevicePixelRatio)); diff --git a/src/components/digicipher/digicipher-style.ts b/src/components/digicipher/digicipher-style.ts index e44b0c1..fb02c6b 100644 --- a/src/components/digicipher/digicipher-style.ts +++ b/src/components/digicipher/digicipher-style.ts @@ -12,39 +12,36 @@ export const sharedStyles: CSSResult = css` .cancel, .delete { font-family: 'OPPOSans'; - margin-top: 0; + font-size: var(--auto-40px); color: #292929; } + #slideUp { + /* position: relative; + top: var(--auto-596px); */ + display: flex; + flex-direction: column; + } span { position: relative; width: var(--auto-24px); - margin-right: var(--auto-40px); + margin: 0 var(--auto-20px); height: var(--auto-24px); border-radius: 50%; display: inline-block; background: #f4f4f4; opacity: 0.3; } - #sSix { - margin: 0; - } #parent { - position: relative; - height: var(--auto-500px); - width: var(--auto-500px); - left: 50%; - top: 53%; - transform: translate(-50%, -50%); + margin: auto; } .grid { - position: absolute; display: grid; grid-template-areas: '1 2 3 ' '4 5 6' '7 8 9'; gap: var(--auto-40px); } p { - position: absolute; + margin: 0; font-family: 'OPPOSans'; font-size: var(--auto-40px); font-style: normal; @@ -52,11 +49,6 @@ export const sharedStyles: CSSResult = css` color: #292929; } - #zero { - position: absolute; - left: 36%; - top: 109%; - } button { position: relative; width: var(--auto-140px); @@ -83,52 +75,55 @@ export const sharedStyles: CSSResult = css` opacity: 0; animation: flash 0.3s; } - + .setting::before { + background: rgba(0, 0, 0, 0.4); + } .block::before { display: block; } - - #slideUp { - position: relative; - height: 100%; + .cancelAndDelete { + margin-top: var(--auto-48px); + display: flex; + justify-content: space-between; width: 100%; } #textcenter { - text-align: center; - font-size: var(--auto-40px); display: flex; justify-content: center; } .topText { height: var(--auto-53px); line-height: var(--auto-53px); - top: 31%; } .spanContainer { - position: absolute; - left: 50%; - transform: translateX(-50%); - top: 36.7%; + width: 100%; + display: flex; + justify-content: center; + margin: var(--auto-50px) 0 var(--auto-90px) 0; } .cancel, .delete { - position: absolute; - font-family: 'OPPOSans'; - font-style: normal; - font-weight: 400; - color: #292929; - width: var(--auto-72px); + position: relative; + margin-top: 10%; height: var(--auto-47px); line-height: var(--auto-47px); + } + .bottomText { font-size: var(--auto-36px); - top: 118.5%; + font-style: normal; + font-weight: 400; + color: red; + line-height: var(--auto-36px); + margin-top: var(--auto-254px); + width: 100%; + text-align: center; } .cancel { - left: 8%; + left: 7%; } .delete { - left: 78.5%; + right: 7%; } .cancel:hover, .delete:hover { diff --git a/src/components/digicipher/digicipher.ts b/src/components/digicipher/digicipher.ts index b12b0fb..99e9c9f 100644 --- a/src/components/digicipher/digicipher.ts +++ b/src/components/digicipher/digicipher.ts @@ -21,9 +21,12 @@ export class StarLockNumber extends StarBaseElement { @query('.delete') _delete!: HTMLParagraphElement @query('.cancel') cancel!: HTMLParagraphElement @query('.topText') topText!: HTMLParagraphElement + @query('p') text!: HTMLParagraphElement @query('.screen') screen!: HTMLDivElement - - @property({type: String}) mode = 'default' + @query('.bottomText') bottomText!: HTMLParagraphElement + @property({type: Boolean}) saveMode = false + @property({type: String}) verifyError = '' + @property({type: Number}) verifyErrorCounter = 1 @property({type: String}) cancelNote = '取消' @property({type: String}) deleteNote = '删除' @property({type: Boolean}) confirm = false @@ -34,7 +37,7 @@ export class StarLockNumber extends StarBaseElement { @property({type: Number}) second = 120 @property({type: Number}) _number = 0 @property({type: Number}) clickNumber = 0 - @property({type: String}) changeText = '输入' + @property({type: String}) changeText = '' @property({type: String}) color = '' @property({type: String}) opacity = '' @property({type: String}) guess = '' @@ -44,16 +47,22 @@ export class StarLockNumber extends StarBaseElement { protected firstUpdated( _changedProperties: PropertyValueMap | Map ): void { - switch (this.mode) { - case 'create': - this.changeText = '新建密码' - break - case 'verify': - case 'comfirm': - this.changeText = '输入密码' - break - case 'default': - this.changeText = '星光麒麟密码组件' + if (this.saveMode) { + this.changeText = '请输入数字锁屏密码' + /* this.slideUp.style.setProperty('top', 'var(--auto-370px)') */ + this.spanContainer.style.setProperty( + 'margin', + 'var(--auto-80px) 0 var(--auto-100px) 0' + ) + this.text.style.setProperty('font-size', 'var(--auto-32px)') + this.bottomText.style.setProperty('margin-top', 'var(--auto-100px)') + } else { + this.changeText = '输入密码' + } + for (let i = 0; i < 6; i++) { + this.saveMode + ? this.changeBgColor('#000000', i, 0.1) + : this.changeBgColor('#F4F4F4', i, 0.4) } this.spanContainer.style.visibility = `visible` this.parent.style.visibility = `visible` @@ -82,7 +91,6 @@ export class StarLockNumber extends StarBaseElement { @touchstart=${this.touchStart} @touchend=${this.touchEnd} > -
@@ -94,8 +102,12 @@ export class StarLockNumber extends StarBaseElement {
-

${this.cancelNote}

-

${this.deleteNote}

+
+

${this.cancelNote}

+ +

${this.deleteNote}

+
+

${this.verifyError}

` @@ -107,7 +119,7 @@ export class StarLockNumber extends StarBaseElement { this.second = 120 this.tried = 0 } - console.log(this.second) + /* console.log(this.second) */ }, 1000) } handleEvent(event: CustomEvent) { @@ -117,13 +129,15 @@ export class StarLockNumber extends StarBaseElement { this.clicks = 0 this.spanContainer.style.visibility = `hidden` this.parent.style.visibility = `hidden` - this.changeText = '保存成功' + this.changeText = '创建密码成功' break case 'digicipher-passcode-verify-success': this.guess = '' this.clicks = 0 for (let i = 0; i < 6; i++) { - this.changeBgColor('#F4F4F4', i, 0.4) + this.saveMode + ? this.changeBgColor('#000000', i, 0.1) + : this.changeBgColor('#F4F4F4', i, 0.4) } break case 'digicipher-passcode-verify-error': @@ -146,7 +160,9 @@ export class StarLockNumber extends StarBaseElement { } //清空密码且删除抖动反馈 for (let i = 0; i < 6; i++) { - this.changeBgColor('#F4F4F4', i, 0.4) + this.saveMode + ? this.changeBgColor('#000000', i, 0.1) + : this.changeBgColor('#F4F4F4', i, 0.4) } this.guess = '' this.clicks = 0 @@ -155,15 +171,12 @@ export class StarLockNumber extends StarBaseElement { this.guess = '' this.clicks = 0 for (let i = 0; i < 6; i++) { - this.changeBgColor('#F4F4F4', i, 0.4) - } - if (this.mode == 'create') { - this.changeText = '新建密码' - this.spanContainer.style.visibility = `visible` - this.parent.style.visibility = `visible` - } else { - this.changeText = '输入密码' + this.saveMode + ? this.changeBgColor('#000000', i, 0.1) + : this.changeBgColor('#F4F4F4', i, 0.4) } + this.spanContainer.style.visibility = `visible` + this.parent.style.visibility = `visible` break } } @@ -178,19 +191,27 @@ export class StarLockNumber extends StarBaseElement { this.changeNumberBgColor() if (this.clicks < 5) { //圆点变化 - this.changeBgColor('#F4F4F4', this.clicks, 1) + this.saveMode + ? this.changeBgColor('#000000', this.clicks, 1) + : this.changeBgColor('#F4F4F4', this.clicks, 1) this.clicks += 1 this.guess += (e.target as HTMLElement).dataset.num + // console.log('###this.guess', this.guess) } else if (this.clicks == 5) { + this.guess += (e.target as HTMLElement).dataset.num // console.log('guess', this.guess) - this.changeBgColor('#F4F4F4', this.clicks, 1) - if (this.mode == 'create') { + for (let i = 0; i < 6; i++) { + this.saveMode + ? this.changeBgColor('#000000', i, 0.1) + : this.changeBgColor('#F4F4F4', i, 0.4) + } + if (this.saveMode) { if (!this.confirm) { this.changePasswd() } else { this.confirmPasswd() } - } else if (this.mode == 'verify') { + } else { this.dispatchPasswd() } } @@ -198,14 +219,18 @@ export class StarLockNumber extends StarBaseElement { if (this.clicks == 0) { } else { this.clicks -= 1 - this.changeBgColor('#F4F4F4', this.clicks, 0.4) this.guess = this.guess.slice(0, -1) + this.saveMode + ? this.changeBgColor('#000000', this.clicks, 0.1) + : this.changeBgColor('#F4F4F4', this.clicks, 0.4) } } else if ((e.target as Element).className === 'cancel') { //点击取消，返回锁屏 this.makeZero() for (let i = 0; i < 6; i++) { - this.changeBgColor('#F4F4F4', i, 0.4) + this.saveMode + ? this.changeBgColor('#000000', i, 0.1) + : this.changeBgColor('#F4F4F4', i, 0.4) } this.guess = '' this.clicks = 0 @@ -231,10 +256,18 @@ export class StarLockNumber extends StarBaseElement { this.span[_number].style.opacity = String(opacity) } removeNumberBgColor() { - this.buttons[this.clickNumber].classList.remove('block') + if (this.clickNumber == 0) this.clickNumber = 10 + this.buttons[this.clickNumber - 1].classList.remove('block') + if (this.saveMode) { + this.buttons[this.clickNumber - 1].classList.remove('setting') + } } changeNumberBgColor() { - this.buttons[this.clickNumber].classList.add('block') + if (this.clickNumber == 0) this.clickNumber = 10 + this.buttons[this.clickNumber - 1].classList.add('block') + if (this.saveMode) { + this.buttons[this.clickNumber - 1].classList.add('setting') + } } makeZero() { //抖动、滑动属性清零 @@ -247,9 +280,14 @@ export class StarLockNumber extends StarBaseElement { //发送密码 dispatchPasswd() { this.passwd = this.guess - // console.log('passwd', this.passwd) + // console.log('send passwd', this.passwd) this.guess = '' this.clicks = 0 + for (let i = 0; i < 6; i++) { + this.saveMode + ? this.changeBgColor('#000000', i, 0.1) + : this.changeBgColor('#F4F4F4', i, 0.4) + } this.dispatchEvent( new CustomEvent('star-digicipher-passwd', { detail: { @@ -266,26 +304,28 @@ export class StarLockNumber extends StarBaseElement { // console.log('更改密码', this.savewd) this.clicks = 0 for (let i = 0; i < 6; i++) { - this.changeBgColor('#F4F4F4', i, 0.4) + this.saveMode + ? this.changeBgColor('#000000', i, 0.1) + : this.changeBgColor('#F4F4F4', i, 0.4) } this.guess = '' - this.confirm = true - this.changeText = '确认密码' + this.changeText = '验证新密码' + this.verifyError = '' } //确认密码 confirmPasswd() { if (this.savewd.toString() == this.guess.toString()) { - // if (1) { this.passwd = this.savewd this.savewd = '' for (let i = 0; i < 6; i++) { - this.changeBgColor('#F4F4F4', i, 0.4) + this.saveMode + ? this.changeBgColor('#000000', i, 0.1) + : this.changeBgColor('#F4F4F4', i, 0.4) } this.guess = '' this.clicks = 0 - this.changeText = '新建密码' - // console.log('确认密码', this.passwd) + this.changeText = '创建密码成功' this.dispatchEvent( new CustomEvent('star-digicipher-passcode-create', { detail: { @@ -297,13 +337,16 @@ export class StarLockNumber extends StarBaseElement { ) } else { for (let i = 0; i < 6; i++) { - this.changeBgColor('#F4F4F4', i, 0.4) + this.saveMode + ? this.changeBgColor('#000000', i, 0.1) + : this.changeBgColor('#F4F4F4', i, 0.4) } this.guess = '' this.clicks = 0 this.savewd = '' this.confirm = false - this.changeText = '更改密码' + this.changeText = '请输入锁屏密码' + this.verifyError = '密码不匹配，请重新设置' } } } diff --git a/src/components/pattern-view/pattern-view-style.ts b/src/components/pattern-view/pattern-view-style.ts index ee9e093..be910cf 100644 --- a/src/components/pattern-view/pattern-view-style.ts +++ b/src/components/pattern-view/pattern-view-style.ts @@ -1,8 +1,5 @@ import {css, CSSResult} from 'lit' export const sharedStyles: CSSResult = css` - /* :host { - --top-dir: 40%; - } */ canvas { display: block; margin: 0 auto; @@ -11,10 +8,12 @@ export const sharedStyles: CSSResult = css` margin: 0px; padding: 0px; width: 100%; - height: 100%; + display: flex; + flex-direction: column; + position: relative; } p { - position: absolute; + margin: 0; line-height: var(--auto-53px); font-size: var(--auto-40px); height: var(--auto-53px); @@ -22,25 +21,16 @@ export const sharedStyles: CSSResult = css` font-style: normal; font-weight: 400; color: #292929; - font-family: 'OPPOSans'; - color: #292929; - left: 50%; - transform: translateX(-50%); - margin-top: 0; text-align: center; } - #canvasdown { - position: relative; - top: var(--auto-781px); - } .textTop { - top: 31%; + margin-bottom: var(--auto-164px); } .cancel { - bottom: 23.5%; + margin-top: var(--auto-164px); } .errorinfo { - top: 66%; color: #ec4949; + font-size: var(--auto-32px); } ` diff --git a/src/components/pattern-view/pattern-view.ts b/src/components/pattern-view/pattern-view.ts index 97db583..2418e9a 100644 --- a/src/components/pattern-view/pattern-view.ts +++ b/src/components/pattern-view/pattern-view.ts @@ -16,9 +16,12 @@ export class StarPatternView extends StarBaseElement { return [sharedStyles] } @query('canvas') canvas!: HTMLCanvasElement - @query('.textTop') saveP!: HTMLParagraphElement + @query('.textTop') textTop!: HTMLParagraphElement @query('#canvasdown') canvasdown!: HTMLDivElement - @property({attribute: false}) cxt!: CanvasRenderingContext2D + @query('p') text!: HTMLParagraphElement + @query('.errorinfo') errorinfo!: any + @property({attribute: false}) + cxt!: CanvasRenderingContext2D @property({type: Boolean}) get getRed() { return this._getRed @@ -49,16 +52,6 @@ export class StarPatternView extends StarBaseElement { @property({type: String}) changeText = '' @property({type: String}) cancel = '取消' @property({type: String}) lessfourinfo = '' - /* @property({type: String}) - get topDir() { - return this._topDir - } - set topDir(value: string) { - this.style.setProperty('--top-dir', value) - this._topDir = value - this.top = parseInt(this._topDir) - } */ - render() { if (!this.saveMode) { return html` @@ -100,8 +93,9 @@ export class StarPatternView extends StarBaseElement { ): void { //settings中，图形密码上下的文字以及图形密码的位置都有所变化 if (this.saveMode) { - this.canvasdown.style.setProperty('top', 'var(--auto-543px)') - this.saveP.style.setProperty('top', 'var(--auto-411px)') + this.textTop.style.setProperty('margin-bottom', 'var(--auto-100px)') + this.text.style.setProperty('font-size', 'var(--auto-32px)') + this.errorinfo.style.setProperty('margin-top', 'var(--auto-100px)') } //canvas的高度和宽度都是 this.canvas.width = this.canvasWidth @@ -121,10 +115,11 @@ export class StarPatternView extends StarBaseElement { handleEvent(event: CustomEvent) { switch (event.type) { case 'passcode-create-success': + this.canvas.style.visibility = `hidden` this.changeText = '密码设置成功' break case 'pattern-passcode-verify-success': - console.log('图案正确') + // console.log('图案正确') this.getRed = false this.changeText = '绘制图案' break @@ -190,7 +185,7 @@ export class StarPatternView extends StarBaseElement { } touchEnd(_e: TouchEvent) { if (this.saveMode && this.passwd.length < 4) { - // this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight) + this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight) this.getRed = true this.lessfourinfo = '至少连接四个点' } else { @@ -252,12 +247,14 @@ export class StarPatternView extends StarBaseElement { //大圆 this.cxt.beginPath() this.cxt.arc(Point.X, Point.Y, this.R, 0, Math.PI * 2, true) - this.cxt.fillStyle = 'rgb(244,244,244,0.2)' + this.cxt.fillStyle = this.saveMode + ? 'rgba(0,0,0,0.04)' + : 'rgba(244,244,244,0.2)' this.cxt.fill() this.cxt.closePath() //小圆 this.cxt.beginPath() - this.cxt.fillStyle = 'rgb(51,51,51,0.2)' + this.cxt.fillStyle = 'rgba(51,51,51,0.2)' this.cxt.arc(Point.X, Point.Y, (36 / 140) * this.R, 0, Math.PI * 2, true) this.cxt.fill() this.cxt.closePath() @@ -321,7 +318,7 @@ export class StarPatternView extends StarBaseElement { } changePasswd() { this.savewd = this.passwd - console.log('请确认密码', this.savewd.toString()) + // console.log('请确认密码', this.savewd.toString()) this.confirm = true this.changeText = '请确认图案' diff --git a/src/test/panels/digicipher/digicipher.ts b/src/test/panels/digicipher/digicipher.ts index 9f59e98..e49a508 100644 --- a/src/test/panels/digicipher/digicipher.ts +++ b/src/test/panels/digicipher/digicipher.ts @@ -18,12 +18,15 @@ export class PanelDigicipher extends LitElement { height: 100%; background-color: black; } + #digicipher { + position: relative; + top: var(--auto-596px); + } ` render() { return html`
-
- +
` } diff --git a/src/test/panels/pattern-view/pattern-view.ts b/src/test/panels/pattern-view/pattern-view.ts index d281027..bc9bc7d 100644 --- a/src/test/panels/pattern-view/pattern-view.ts +++ b/src/test/panels/pattern-view/pattern-view.ts @@ -11,13 +11,17 @@ export class PanelPatternView extends LitElement { width: 100%; background-color: rgb(191, 198, 219); } + #pattern { + position: relative; + top: var(--auto-598px); + } ` render() { return html`
- +
`