From 72a0d726d4d98d74f272de5287b09fcbf5337db0 Mon Sep 17 00:00:00 2001 From: wurou Date: Thu, 27 Oct 2022 16:30:47 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4css,=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E9=80=9A=E7=9F=A5=E7=9B=B8=E5=85=B3bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../brightness-slider/brightness-slider.ts | 61 +- .../drop-down-menu/drop-down-menu.ts | 99 +- src/components/header-bar/header-bar.ts | 168 +-- .../icon-control-bar-group.ts | 57 +- .../icon-control-bar/icon-control-bar.ts | 315 ++---- src/components/icon-control-bar/iconstyle.ts | 170 +++ .../notification-group/notification-group.ts | 74 +- src/components/notification/notification.ts | 767 ++------------ .../notification/notificationstyle.ts | 964 ++++++++++++++++++ 9 files changed, 1417 insertions(+), 1258 deletions(-) create mode 100644 src/components/icon-control-bar/iconstyle.ts create mode 100644 src/components/notification/notificationstyle.ts diff --git a/src/components/brightness-slider/brightness-slider.ts b/src/components/brightness-slider/brightness-slider.ts index 20a8472..4d31614 100644 --- a/src/components/brightness-slider/brightness-slider.ts +++ b/src/components/brightness-slider/brightness-slider.ts @@ -89,6 +89,7 @@ export class BrightnessSlider extends LitElement { left: 0px; right: 0px; background: var(--background-lm); + border-radius: 1.3vw; } .progress { @@ -98,9 +99,15 @@ export class BrightnessSlider extends LitElement { left: 0px; right: 0px; background: var(--progress-background-lm); + border-radius: 1.3vw; } .sliderBar::before { + width: 4vw; + height: 4vw; + left: 2.4vw; + top: 2.4vw; + font-size: 4vw; position: absolute; content: attr(data-icon); font-family: gaia-icons; @@ -110,60 +117,6 @@ export class BrightnessSlider extends LitElement { color: var(--icon-color-lm); z-index: 1; } - - @media screen and (min-width: 300px) { - .sliderBar { - border-radius: 5px; - } - - .progress { - border-radius: 5px; - } - - .sliderBar::before { - width: 16px; - height: 16px; - left: 10px; - top: 10px; - font-size: 16px; - } - } - - @media screen and (min-width: 600px) { - .sliderBar { - border-radius: 8px; - } - - .progress { - border-radius: 8px; - } - - .sliderBar::before { - width: 24px; - height: 24px; - left: 14px; - top: 14px; - font-size: 24px; - } - } - - @media screen and (min-width: 900px) { - .sliderBar { - border-radius: 16px; - } - - .progress { - border-radius: 16px; - } - - .sliderBar::before { - width: 48px; - height: 48px; - left: 29px; - top: 29px; - font-size: 48px; - } - } ` handleEvent(event: TouchEvent) { diff --git a/src/components/drop-down-menu/drop-down-menu.ts b/src/components/drop-down-menu/drop-down-menu.ts index 208e897..06f7dbf 100644 --- a/src/components/drop-down-menu/drop-down-menu.ts +++ b/src/components/drop-down-menu/drop-down-menu.ts @@ -95,90 +95,31 @@ export class DropDownMenu extends LitElement { align-items: center; } - @media screen and (min-width: 300px) { - header-bar[type='only-time'] { - dispaly: flex; - width: 170px; - height: 17px; - } - - header-bar[type='date-time'] { - dispaly: flex; - width: 286px; - height: 21px; - } - - .all-quick-icons { - width: 100%; - height: calc(100% - 31px); - position: relative; - // top: 40px; - top: 2.4%; - } - - .others { - display: flex; - flex-direction: column; - position: absolute; - top: 33.3px; - } + header-bar[type='only-time'] { + dispaly: flex; + width: 42.7vw; + height: 4.3vw; + height: 2.7vh; } - @media screen and (min-width: 600px) { - header-bar[type='only-time'] { - dispaly: flex; - width: 256px; - height: 26px; - } - - header-bar[type='date-time'] { - dispaly: flex; - width: 430px; - height: 32px; - } - - .all-quick-icons { - width: 100%; - height: calc(100% - 46px); - position: relative; - // top: 20px; - top: 2.4%; - } - - .others { - display: flex; - flex-direction: column; - position: absolute; - top: 50px; - } + header-bar[type='date-time'] { + dispaly: flex; + width: 71.7vw; + height: 3.3vh; } - @media screen and (min-width: 900px) { - header-bar[type='only-time'] { - dispaly: flex; - width: 512px; - height: 52px; - } + .all-quick-icons { + width: 100%; + height: calc(100% - 31px); + position: relative; + top: 2.4%; + } - header-bar[type='date-time'] { - dispaly: flex; - width: 860px; - height: 64px; - } - - .all-quick-icons { - width: 100%; - height: calc(100% - 92px); - position: relative; - top: 2.4%; - } - - .others { - display: flex; - flex-direction: column; - position: absolute; - top: 100px; - } + .others { + display: flex; + flex-direction: column; + position: absolute; + top: 5.2vh; } ` } diff --git a/src/components/header-bar/header-bar.ts b/src/components/header-bar/header-bar.ts index 02bc92f..bbd4ce4 100644 --- a/src/components/header-bar/header-bar.ts +++ b/src/components/header-bar/header-bar.ts @@ -30,8 +30,8 @@ export class HeaderBar extends LitElement { return html`
-
-
+
+
@@ -121,127 +121,43 @@ export class HeaderBar extends LitElement { color: var(--time-date-date-color-dm); } - @media screen and (min-width: 300px) { - .time-outer > #time { - height: 17px; - line-height: 17px; - font-size: 17px; - } - - .time-icons { - display: flex; - width: 45px; - position: relative; - right: 1px; - } - - .time-icons > ::slotted(:last-child) { - position: relative; - left: 13px; - } - - .time-date { - line-height: 21px; - left: 3px; - } - - .time-date > #time { - font-size: 21px; - } - - #date { - height: 11px; - line-height: 11px; - left: 7px; - font-size: 9px; - } - - .time-date-icons { - position: relative; - right: 4px; - } + .time-outer > #time { + height: 2.7vh; + line-height: 2.7vh; + font-size: 2.7vh; } - @media screen and (min-width: 600px) { - .time-outer > #time { - height: 26px; - line-height: 26px; - font-size: 26px; - } - - .time-icons { - display: flex; - width: 68px; - position: relative; - right: 2px; - } - - .time-icons > ::slotted(:last-child) { - position: relative; - left: 20px; - } - - .time-date { - line-height: 32px; - left: 5px; - } - - .time-date > #time { - font-size: 32px; - } - - #date { - height: 17px; - line-height: 17px; - left: 11px; - font-size: 13px; - } - - .time-date-icons { - position: relative; - right: 5.5px; - } + .time-icons { + display: flex; + width: 11.3vw; + position: relative; + right: 0.3vw; } - @media screen and (min-width: 900px) { - .time-outer > #time { - height: 52px; - line-height: 52px; - font-size: 52px; - } + .time-icons > ::slotted(:last-child) { + position: relative; + left: 3.3vw; + } - .time-icons { - display: flex; - width: 136px; - position: relative; - right: 4px; - } + .time-date { + line-height: 3.3vh; + left: 0.8vw; + } - .time-icons > ::slotted(:last-child) { - position: relative; - left: 40px; - } + .time-date > #time { + font-size: 5.3vw; + } - .time-date { - line-height: 64px; - left: 10px; - } + #date { + height: 1.8vh; + line-height: 1.8vh; + left: 1.8vw; + font-size: 2.2vw; + } - .time-date > #time { - font-size: 64px; - } - - #date { - height: 34px; - line-height: 34px; - left: 22px; - font-size: 26px; - } - - .time-date-icons { - position: relative; - right: 11px; - } + .time-date-icons { + position: relative; + right: 0.9vw; } ` @@ -348,6 +264,28 @@ export class HeaderBar extends LitElement { return d } } + + handleEvent(event: Event) { + switch (event.target) { + case this.time: + this.dispatchEvent( + new CustomEvent('header-bar-time-click', { + bubbles: true, + composed: true, + }) + ) + break + + case this.date: + this.dispatchEvent( + new CustomEvent('header-bar-date-click', { + bubbles: true, + composed: true, + }) + ) + break + } + } } declare global { diff --git a/src/components/icon-control-bar-group/icon-control-bar-group.ts b/src/components/icon-control-bar-group/icon-control-bar-group.ts index 541ed33..00c9888 100644 --- a/src/components/icon-control-bar-group/icon-control-bar-group.ts +++ b/src/components/icon-control-bar-group/icon-control-bar-group.ts @@ -71,6 +71,7 @@ export class IconControlBarGroup extends LitElement { background: var(--background-lm); mix-blend-mode: normal; opacity: var(--opacity-lm); + border-radius: 1.3vw; } .icon-with-state { @@ -96,10 +97,16 @@ export class IconControlBarGroup extends LitElement { .icon-only > div > ::slotted(*) { width: 25%; - height: 30px; display: flex; align-items: center; justify-content: center; + height: 2.5vw; + border-left: 0.17vw solid var(--line-border-lm); + border-radius: 0.17vw; + } + + :host([deep-mode]) .icon-only > div > ::slotted(*) { + border-left: 0.17vw solid var(--line-border-dm); } .icon-only > div > ::slotted(:first-child) { @@ -109,54 +116,6 @@ export class IconControlBarGroup extends LitElement { :host([deep-mode]) { background: var(--background-dm); } - - @media screen and (min-width: 300px) { - :host { - border-radius: 5px; - } - - .icon-only > div > ::slotted(*) { - height: 10px; - border-left: 1px solid var(--line-border-lm); - border-radius: 1px; - } - - :host([deep-mode]) .icon-only > div > ::slotted(*) { - border-left: 1px solid var(--line-border-dm); - } - } - - @media screen and (min-width: 600px) { - :host { - border-radius: 8px; - } - - .icon-only > div > ::slotted(*) { - height: 15px; - border-left: 1px solid var(--line-border-lm); - border-radius: 1px; - } - - :host([deep-mode]) .icon-only > div > ::slotted(*) { - border-left: 1px solid var(--line-border-dm); - } - } - - @media screen and (min-width: 900px) { - :host { - border-radius: 16px; - } - - .icon-only > div > ::slotted(*) { - height: 30px; - border-left: 2px solid var(--line-border-lm); - border-radius: 2px; - } - - :host([deep-mode]) .icon-only > div > ::slotted(*) { - border-left: 2px solid var(--line-border-dm); - } - } ` } diff --git a/src/components/icon-control-bar/icon-control-bar.ts b/src/components/icon-control-bar/icon-control-bar.ts index 9dc4775..0b1d5f7 100644 --- a/src/components/icon-control-bar/icon-control-bar.ts +++ b/src/components/icon-control-bar/icon-control-bar.ts @@ -1,4 +1,10 @@ -import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit' +import { + html, + LitElement, + HTMLTemplateResult, + nothing, + CSSResultArray, +} from 'lit' import { customElement, property, @@ -6,6 +12,7 @@ import { query, state, } from 'lit/decorators.js' +import {sharedStyles} from './iconstyle.js' export enum IconControlBarType { BASE = 'base', @@ -21,12 +28,15 @@ export class IconControlBar extends LitElement { @property({type: String}) settingsKey = '' @property({type: Boolean}) bgchange = false @property({type: String}) id = '' + @property({type: String}) name = '' @property({type: Boolean}) active = false @property({type: Boolean}) longPress = false + @property({type: Boolean}) isNameShown = false @state({}) timer!: NodeJS.Timeout @query('.more-info-icon') moreInfoIcon!: HTMLDivElement @query('.icon-button') iconBtn!: HTMLDivElement + @query('.icon-name') iconName!: HTMLDivElement getbase(): HTMLTemplateResult | typeof nothing { if (!this.icon) { @@ -34,40 +44,55 @@ export class IconControlBar extends LitElement { return nothing } + // if (!this.name) { + // console.error('【icon-control-bar】缺少 name 参数') + // return nothing + // } + const iconstyle = html` ` + const iconNamestyle = this.isNameShown ? 'icon-name-shown' : 'icon-name' return html` -
- ${iconstyle} +
+
+ ${iconstyle} +
+
+ ${this.name} +
` } @@ -97,26 +122,30 @@ export class IconControlBar extends LitElement { const iconstyle = html` ` @@ -283,6 +312,14 @@ export class IconControlBar extends LitElement { } } + iconNameShown() { + this.iconName.setAttribute('shown', '') + } + + iconNameHidden() { + this.iconName.removeAttribute('shown') + } + addClass(className: string[]) { this.iconBtn.classList.add(...className) } @@ -295,195 +332,9 @@ export class IconControlBar extends LitElement { return this.iconBtn.classList } - static styles = css` - :host { - --background-active: #1d98f5; - --background-lm: rgba(255, 255, 255, 0.35); - --background-dm: rgba(0, 0, 0, 0.15); - --text-color-lm: #4d4d4d; - --text-color-dm: #d1d1d1; - --text-color-active: #ffffff; - } - - .active { - background-color: var(--background-active) !important; - color: var(--text-color-active) !important; - transform: scale(0.9); - } - - .with-border { - width: 100%; - height: 100%; - display: flex; - align-items: center; - background: var(--background-lm); - } - - .active::before, - .active > .more-info-icon::after { - color: var(--text-color-active) !important; - } - - .icon-button::before, - .more-info-icon::after { - text-align: center; - vertical-align: middle; - content: attr(data-icon); - font-family: gaia-icons; - font-style: normal; - text-rendering: optimizelegibility; - font-weight: 500; - color: var(--text-color-lm); - } - - .more-info-icon { - display: flex; - align-items: center; - } - - .icon-base { - justify-content: center; - } - - p { - position: relative; - left: 13.1%; - color: var(--text-color-lm); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-family: OPPOSans; - font-style: normal; - mix-blend-mode: normal; - } - - .active > p { - color: var(--text-color-active); - } - - :host([deep-mode]) .with-border { - background: var(--background-dm); - } - - :host([deep-mode]) p, - :host([deep-mode]) .icon-button::before, - :host([deep-mode]) .more-info-icon::after { - color: var(--text-color-dm); - } - - .icon-with-state::before { - position: relative; - left: 9.2%; - } - - @media screen and (min-width: 300px) { - .with-border { - border-radius: 5px; - } - - .icon-button::before { - width: 16px; - height: 16px; - line-height: 16px; - font-size: 16px; - } - - .more-info-icon { - width: 5px; - height: 5px; - position: relative; - left: 19px; - } - - .more-info-icon::after { - width: 5px; - height: 5px; - line-height: 5px; - font-size: 5px; - } - - p { - width: 33px; - height: 7px; - font-size: 7px; - line-height: 7px; - } - } - - @media screen and (min-width: 600px) { - .with-border { - border-radius: 8px; - } - - .icon-button::before { - width: 24px; - height: 24px; - line-height: 24px; - font-size: 24px; - } - - .more-info-icon { - width: 8px; - height: 8px; - position: relative; - left: 29px; - } - - .more-info-icon::after { - width: 8px; - height: 8px; - line-height: 8px; - font-size: 8px; - } - - p { - width: 50px; - height: 10px; - font-size: 10.5px; - line-height: 10px; - } - } - - @media screen and (min-width: 900px) { - .with-border { - border-radius: 16px; - } - - .icon-button::before { - width: 48px; - height: 48px; - line-height: 48px; - font-size: 48px; - } - - .icon-with-state::before { - position: relative; - left: 22px; - } - - .more-info-icon { - width: 16px; - height: 16px; - position: relative; - left: 58px; - } - - .more-info-icon::after { - width: 16px; - height: 16px; - line-height: 16px; - font-size: 16px; - } - - p { - width: 100px; - height: 20px; - left: 34px; - font-size: 21px; - line-height: 20px; - } - } - ` + public static override get styles(): CSSResultArray { + return [sharedStyles] + } } declare global { diff --git a/src/components/icon-control-bar/iconstyle.ts b/src/components/icon-control-bar/iconstyle.ts new file mode 100644 index 0000000..7c71589 --- /dev/null +++ b/src/components/icon-control-bar/iconstyle.ts @@ -0,0 +1,170 @@ +import {css, CSSResult} from 'lit' + +export const sharedStyles: CSSResult = css` + :host { + --background-active: #1d98f5; + --background-lm: rgba(255, 255, 255, 0.35); + --background-dm: rgba(0, 0, 0, 0.15); + --text-color-lm: #4d4d4d; + --text-color-dm: #d1d1d1; + --text-color-active: #ffffff; + } + + .active { + background-color: var(--background-active) !important; + color: var(--text-color-active) !important; + transform: scale(0.9); + } + + .with-border { + // width: 100%; + // height: 100%; + display: flex; + align-items: center; + background: var(--background-lm); + border-radius: 1.3vw; + } + + .icon-with-state { + width: 100%; + height: 100%; + } + + .active::before, + .active > .more-info-icon::after { + color: var(--text-color-active) !important; + } + + .icon-button::before, + .more-info-icon::after { + text-align: center; + vertical-align: middle; + content: attr(data-icon); + font-family: gaia-icons; + font-style: normal; + text-rendering: optimizelegibility; + font-weight: 500; + color: var(--text-color-lm); + } + + .more-info-icon { + display: flex; + align-items: center; + width: 1.3vw; + height: 1.3vw; + position: relative; + left: 4.8vw; + } + + .more-info-icon::after { + width: 1.3vw; + height: 1.3vw; + line-height: 1.3vw; + font-size: 1.3vw; + } + + .icon-base { + justify-content: center; + } + + p { + position: relative; + left: 13.1%; + color: var(--text-color-lm); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-family: OPPOSans; + font-style: normal; + mix-blend-mode: normal; + width: 8.3vw; + height: 1vh; + font-size: 1.75vw; + line-height: 1.7vw; + } + + .icon-name-shown, + .icon-name { + // font-size: 7px; + // height: 16px; + + // font-size: 20px; + // height: 48px; + + font-size: 1.7vw; + height: 4vw; + } + + .inner { + width: 8.67vw; + } + + .active > p { + color: var(--text-color-active); + } + + :host([deep-mode]) .with-border { + background: var(--background-dm); + } + + :host([deep-mode]) p, + :host([deep-mode]) .icon-button::before, + :host([deep-mode]) .more-info-icon::after, + :host([dark-mode]) .icon-name { + color: var(--text-color-dm); + } + + .icon-with-state::before { + position: relative; + left: 9.2%; + } + + .icon-name { + width: 100%; + font-family: 'OPPOSans'; + font-style: normal; + font-weight: 400; + font-size: 7px; + color: var(--text-color-lm); + display: none; + } + + .icon-name-shown > span, + .icon-name > span { + position: relative; + top: 45.8%; + } + + .icon-name[shown] { + display: flex; + justify-content: center; + } + + .icon-name-shown { + display: flex; + justify-content: center; + width: 100%; + font-family: 'OPPOSans'; + font-style: normal; + font-weight: 400; + font-size: 7px; + color: var(--text-color-lm); + } + + .icon-button::before { + // width: 48px; + // height: 48px; + // line-height: 48px; + // font-size: 48px; + + // width: 16px; + // height: 16px; + // line-height: 16px; + // font-size: 16px; + + width: 4vw; + height: 4vw; + line-height: 4vw; + font-size: 4vw; + } +` diff --git a/src/components/notification-group/notification-group.ts b/src/components/notification-group/notification-group.ts index 24fac88..597fc05 100644 --- a/src/components/notification-group/notification-group.ts +++ b/src/components/notification-group/notification-group.ts @@ -34,24 +34,26 @@ export class StarNotificationGroup extends LitElement { let id = (event as any).detail.id ;(this.slotElements as StarNotification[]).forEach( (el: StarNotification) => { - if (this.getAttribute('show') == 'false') { - if (el.id == id) { - // 删除某个notification-group - this.dispatchEvent( - new CustomEvent('notification-group-delete', { - detail: { - group: this, - id: id, - }, - bubbles: true, - composed: true, - }) - ) - } - } else { - if (el.id == id) { - // 删除单条notification - this.removeChild(el) + if (el.noclear != true) { + if (this.getAttribute('show') == 'false') { + if (el.id == id) { + // 删除某个notification-group + this.dispatchEvent( + new CustomEvent('notification-group-delete', { + detail: { + group: this, + id: id, + }, + bubbles: true, + composed: true, + }) + ) + } + } else { + if (el.id == id) { + // 删除单条notification + this.removeChild(el) + } } } } @@ -167,34 +169,10 @@ export class StarNotificationGroup extends LitElement { } static styles = css` - @media screen and (min-width: 300px) { - :host { - width: 286px; - // height: 50px; - display: block; - margin: 5px 56px 0; - border-radius: 7px; - } - } - - @media screen and (min-width: 600px) { - :host { - width: 430px; - // height: 76px; - display: block; - margin: 8px 85px 0; - border-radius: 10px; - } - } - - @media screen and (min-width: 900px) { - :host { - width: 860px; - // height: 152px; - display: block; - margin: 16px 170px 0; - border-radius: 20px; - } + :host { + display: block; + margin-top: 0.83vh; + border-radius: 1.7vw; } :host([show='false']) ::slotted(*) { @@ -208,6 +186,10 @@ export class StarNotificationGroup extends LitElement { :host([show='true']) ::slotted(*) { display: block; } + + :host([show='true']) ::slotted(:not(:last-child)) { + border-bottom: 0.08vw solid rgba(0, 0, 0, 0.09); + } ` } diff --git a/src/components/notification/notification.ts b/src/components/notification/notification.ts index 8bea928..ff784df 100644 --- a/src/components/notification/notification.ts +++ b/src/components/notification/notification.ts @@ -1,4 +1,10 @@ -import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit' +import { + html, + LitElement, + HTMLTemplateResult, + nothing, + CSSResultArray, +} from 'lit' import { customElement, property, @@ -6,6 +12,7 @@ import { query, state, } from 'lit/decorators.js' +import {sharedStyles} from './notificationstyle.js' // ONE ： 单条通知，notification-group展开时第一条notification类型 // MORE ： notification-group中除第一条以外的notification类型 // MORE_FIRST: notification-group折叠时第一条notification类型 @@ -42,6 +49,7 @@ export class StarNotification extends LitElement { @property({type: String}) text = '' @property({type: String}) localtext = '' @property({type: String}) originTimestamp = '' + @property({type: Boolean}) obsoleteAPI = false // 仅more-notifiactions-first有 @property({type: String}) secondTitle = '' @@ -107,15 +115,15 @@ export class StarNotification extends LitElement { return nothing } - if (!this.text) { - console.error('【star-notification】缺少 text 参数') - return nothing - } + // if (!this.text) { + // console.error('【star-notification】缺少 text 参数') + // return nothing + // } - if (!this.manifesturl) { - console.error('【star-notification】缺少 manifesturl 参数') - return nothing - } + // if (!this.manifesturl) { + // console.error('【star-notification】缺少 manifesturl 参数') + // return nothing + // } this.timestamp ? new Date(this.timestamp) : new Date() const arrowShow = @@ -129,6 +137,17 @@ export class StarNotification extends LitElement { ` : nothing + const deleteShow = this.noclear + ? html` + + ` + : nothing + // "more-notifiactions"用于notification-group中的第二条及以后的notification, // 中间位置notification没有圆角(radiusType为"")，最底部的radiusType为bottom-border-radius. const otherClass = @@ -144,7 +163,7 @@ export class StarNotification extends LitElement { tabindex="0" data-notification-id=${this.id} data-no-clear=${this.noclear} - data-obsolete-a-p-i="false" + data-obsolete-a-p-i=${this.obsoleteAPI} data-type=${this.type} data-manifest-u-r-l=${this.manifesturl} @touchstart=${this} @@ -168,6 +187,7 @@ export class StarNotification extends LitElement {
+ ${deleteShow}
` @@ -180,7 +200,7 @@ export class StarNotification extends LitElement { tabindex="0" data-notification-id=${this.id} data-no-clear=${this.noclear} - data-obsolete-a-p-i="false" + data-obsolete-a-p-i=${this.obsoleteAPI} data-type=${this.type} data-manifest-u-r-l=${this.manifesturl} @touchstart=${this} @@ -214,12 +234,12 @@ export class StarNotification extends LitElement { return nothing } - if (!this.text) { - console.error( - '【star-notification】【more-notification-first】缺少 text 参数' - ) - return nothing - } + // if (!this.text) { + // console.error( + // '【star-notification】【more-notification-first】缺少 text 参数' + // ) + // return nothing + // } if (!this.secondTitle) { console.error( @@ -248,6 +268,16 @@ export class StarNotification extends LitElement { // } this.timestamp ? new Date(this.timestamp) : new Date() + const deleteShow = this.noclear + ? html` + + ` + : nothing return html`
+ ${deleteShow}
` @@ -347,16 +378,18 @@ export class StarNotification extends LitElement { this.btnShown = false } - this.dispatchEvent( - new CustomEvent('notification-delete', { - detail: { - id: this.id, - notification: this, - }, - bubbles: true, - composed: true, - }) - ) + if (!this.noclear) { + this.dispatchEvent( + new CustomEvent('notification-delete', { + detail: { + id: this.id, + notification: this, + }, + bubbles: true, + composed: true, + }) + ) + } return } @@ -367,9 +400,11 @@ export class StarNotification extends LitElement { 'transitionend', function tranEnd() { self.notification.removeEventListener('transitionend', tranEnd) - deleteBtn.style.visibility = 'visible' + if (!self.noclear) { + deleteBtn.style.visibility = 'visible' + deleteBtn.style.opacity = '1' + } settingsBtn.style.visibility = 'visible' - deleteBtn.style.opacity = '1' settingsBtn.style.opacity = '1' self.btnShown = true } @@ -393,7 +428,9 @@ export class StarNotification extends LitElement { this.notification.style.transform = 'translateX(' + 0 + 'px)' let tranEnd = () => { this.notification.removeEventListener('transitionend', tranEnd) - deleteBtn.style.visibility = 'hidden' + if (!this.noclear) { + deleteBtn.style.visibility = 'hidden' + } settingsBtn.style.visibility = 'hidden' this.btnShown = false } @@ -406,22 +443,25 @@ export class StarNotification extends LitElement { event.stopPropagation() let self = this let target = event.target as HTMLElement + this.notification.style.transform = '' switch (target.dataset.icon) { case 'delete': target.setAttribute('clicked', 'true') target.addEventListener('transitionend', function tranEnd() { target.removeEventListener('transitionend', tranEnd) target.removeAttribute('clicked') - self.dispatchEvent( - new CustomEvent('notification-delete', { - detail: { - id: self.id, - notification: self, - }, - bubbles: true, - composed: true, - }) - ) + if (self.noclear != true) { + self.dispatchEvent( + new CustomEvent('notification-delete', { + detail: { + id: self.id, + notification: self, + }, + bubbles: true, + composed: true, + }) + ) + } }) break case 'settings': @@ -466,648 +506,9 @@ export class StarNotification extends LitElement { } } - static styles = css` - :host { - --notification-background-lm: rgba(255, 255, 255, 0.55); - --notification-background-dm: rgba(0, 0, 0, 0.25); - --notification-background-active: rgba(255, 255, 255, 0.75); - --border-lm: rgba(0, 0, 0, 0.09); - --border-dm: rgba(0, 0, 0, 0.09); - --button-background-color-lm: rgba(255, 255, 255, 0.68); - --button-background-color-dm: rgba(0, 0, 0, 0.3); - - left: 0px; - top: 0px; - position: relative; - display: block; - // width: 860px; - } - - .notification { - background: var(--notification-background-lm); - transition: transform 0.6s; - } - - .notification[clicked] { - transition: transform 0.1s; - transform: scale(0.9); - background: var(--notification-background-active); - } - - .notification > div.title-container { - display: flex; - position: absolute; - color: #404040; - opacity: 0.65; - } - - .notification > div.title-container .title { - white-space: nowrap; - text-overflow: ellipsis; - flex: none; - order: 0; - flex-grow: 0; - font-weight: 600; - } - - .notification > div.title-container .timestamp { - flex: initial; - position: absolute; - text-align: right; - mix-blend-mode: normal; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .notification div { - pointer-events: none; - } - - .notification > div.detail { - display: flex; - position: absolute; - } - - .notification > div.detail .detail-content { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - font-family: 'OPPOSans'; - font-style: normal; - font-weight: 400; - color: #404040; - mix-blend-mode: normal; - opacity: 0.65; - } - - .notification > div.detail .arrow-up { - position: absolute; - top: 0px; - text-align: center; - vertical-align: middle; - display: none; - background: rgba(0, 0, 0, 0.06); - } - - .notification > div.detail .arrow-up::after { - font-family: 'gaia-icons'; - content: attr(data-icon); - font-style: normal; - text-rendering: optimizeLegibility; - font-weight: 500; - } - - .one, - .more { - display: flex; - justify-content: space-between; - width: 100%; - height: 100%; - overflow: hidden; - } - - .btn-tool { - display: flex; - align-items: center; - position: absolute; - height: inherit; - visibility: hidden; - } - - .btn-tool > div:last-child { - visibility: hidden; - } - - .btn-tool > div { - display: flex; - align-items: center; - justify-content: center; - background: var(--button-background-color-lm); - border-radius: 50%; - opacity: 0.6; - transition: transform 0.1s; - } - - .btn-tool > div[clicked] { - transform: scale(0.9); - } - - .btn-tool > div::after { - text-align: center; - vertical-align: middle; - content: attr(data-icon); - font-family: gaia-icons; - font-style: normal; - text-rendering: optimizelegibility; - font-weight: 500; - color: #4d4d4d; - } - - .container { - display: flex; - position: absolute; - font-family: 'OPPOSans'; - font-style: normal; - font-weight: 400; - } - - .container .title { - height: 28px; - line-height: 28px; - font-size: 28px; - color: #404040; - flex: none; - order: 0; - flex-grow: 0; - } - - .container .detail-content { - position: relative; - color: #404040; - mix-blend-mode: normal; - opacity: 0.65; - flex: none; - order: 1; - flex-grow: 0; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - max-width: 40%; - } - - .one-container { - color: #404040; - } - - .one-container .timestamp { - position: absolute; - text-align: right; - mix-blend-mode: normal; - opacity: 0.65; - } - - .another-container .notificaiton-counts { - position: absolute; - text-align: center; - vertical-align: middle; - color: #000000; - background: rgba(0, 0, 0, 0.06); - } - - :host([dark-mode]) .notification { - background: var(--notification-background-dm); - } - - :host([dark-mode]) .btn-tool > div { - background: var(--button-background-color-dm); - } - - :host([dark-mode]) .btn-tool > div::after { - color: #f4f4f4; - } - - @media screen and (min-width: 300px) { - :host([notificationType='one-notification']) { - margin: 5px 0 0 0; - } - - .notification { - height: 50px; - width: 286px; - } - - .top-border-radius { - border-top-left-radius: 6px; - border-top-right-radius: 6px; - } - - .bottom-border-radius { - border-bottom-left-radius: 6px; - border-bottom-right-radius: 6px; - } - - .border-radius { - border-radius: 6px; - } - - .notification > img { - width: 16px; - height: 16px; - pointer-events: none; - margin: 9px 3px 26px 9px; - } - - .notification > div.title-container { - width: calc(100% - 28px); - left: 28px; - top: 23.7%; - } - - .notification > div.title-container .title { - height: 9px; - line-height: 9px; - font-size: 9px; - } - - .notification > div.title-container .timestamp { - height: 10px; - right: 10px; - top: -1px; - font-size: 8px; - line-height: 10px; - } - - .notification > div.detail { - width: calc(100% - 28px); - left: 28px; - top: 55.3%; - } - - .notification > div.detail .detail-content { - width: 246px; - height: 11px; - font-size: 8px; - line-height: 11px; - } - - .notification > div.detail .arrow-up { - width: 18px; - height: 11px; - right: 9px; - bottom: 10px; - line-height: 11px; - border-radius: 63px; - } - - .notification > div.detail .arrow-up::after { - font-size: 12px; - } - - .btn-tool { - right: 6px; - } - - .btn-tool > div:first-child { - margin-right: 15px; - visibility: hidden; - } - - .btn-tool > div { - width: 26px; - height: 26px; - } - - .btn-tool > div::after { - width: 10px; - height: 10px; - line-height: 10px; - font-size: 10px; - } - - .container { - width: calc(100% - 28px); - left: 28px; - } - - .one-container { - top: 12px; - } - - .another-container { - top: 29px; - } - - .container .title { - height: 9px; - line-height: 9px; - font-size: 9px; - } - - .container .detail-content { - height: 11px; - line-height: 11px; - left: 8px; - top: -1px; - font-size: 9px; - } - - .one-container .timestamp { - height: 11px; - right: 11px; - top: -1px; - font-size: 8px; - line-height: 11px; - } - - .another-container .notificaiton-counts { - width: 18px; - height: 11px; - right: 8px; - bottom: 10px; - top: -1px; - line-height: 11px; - font-size: 7px; - border-radius: 63px; - } - } - - @media screen and (min-width: 600px) { - :host([notificationType='one-notification']) { - margin: 8px 0 0 0; - } - - .notification { - height: 76px; - width: 430px; - } - - .top-border-radius { - border-top-left-radius: 10px; - border-top-right-radius: 10px; - } - - .bottom-border-radius { - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; - } - - .border-radius { - border-radius: 10px; - } - - .notification > img { - width: 24px; - height: 24px; - pointer-events: none; - margin: 13px 5px 39px 13px; - } - - .notification > div.title-container { - width: calc(100% - 42px); - left: 42px; - top: 18px; - top: 23.7%; - } - - .notification > div.title-container .title { - height: 14px; - line-height: 14px; - font-size: 14px; - } - - .notification > div.title-container .timestamp { - height: 16px; - right: 16px; - top: -2px; - font-size: 12px; - line-height: 16px; - } - - .notification > div.detail { - width: calc(100% - 42px); - left: 42px; - top: 42px; - top: 55.3%; - } - - .notification > div.detail .detail-content { - width: 370px; - height: 17px; - font-size: 13px; - line-height: 17px; - } - - .notification > div.detail .arrow-up { - width: 28px; - height: 17px; - right: 13px; - bottom: 15px; - line-height: 17px; - border-radius: 94.5px; - } - - .notification > div.detail .arrow-up::after { - font-size: 17.5px; - } - - .btn-tool { - right: 9px; - } - - .btn-tool > div:first-child { - margin-right: 22px; - visibility: hidden; - } - - .btn-tool > div { - width: 40px; - height: 40px; - } - - .btn-tool > div::after { - width: 16px; - height: 16px; - line-height: 16px; - font-size: 16px; - } - - .container { - width: calc(100% - 42px); - left: 42px; - } - - .one-container { - top: 18px; - } - - .another-container { - top: 44.5px; - } - - .container .title { - height: 14px; - line-height: 14px; - font-size: 14px; - } - - .container .detail-content { - height: 17px; - line-height: 17px; - left: 12px; - top: -1.5px; - font-size: 13px; - } - - .one-container .timestamp { - height: 17px; - right: 17px; - top: -2px; - font-size: 12px; - line-height: 16px; - } - - .another-container .notificaiton-counts { - width: 28px; - height: 17px; - right: 13px; - bottom: 15px; - top: -0.5px; - line-height: 17px; - font-size: 10px; - border-radius: 94.5px; - } - } - - @media screen and (min-width: 900px) { - :host([notificationType='one-notification']) { - margin: 16px 0 0 0; - } - - .notification { - height: 152px; - width: 860px; - } - - .top-border-radius { - border-top-left-radius: 20px; - border-top-right-radius: 20px; - } - - .bottom-border-radius { - border-bottom-left-radius: 20px; - border-bottom-right-radius: 20px; - } - - .border-radius { - border-radius: 20px; - } - - .notification > img { - width: 48px; - height: 48px; - pointer-events: none; - margin: 26px 10px 78px 26px; - } - - .notification > div.title-container { - width: calc(100% - 84px); - left: 84px; - - top: 36px; - top: 23.7%; - } - - .notification > div.title-container .title { - height: 28px; - line-height: 28px; - font-size: 28px; - } - - .notification > div.title-container .timestamp { - height: 32px; - right: 32px; - top: -4px; - font-size: 24px; - line-height: 32px; - } - - .notification > div.detail { - width: calc(100% - 84px); - left: 84px; - top: 84px; - - top: 55.3%; - } - - .notification > div.detail .detail-content { - width: 740px; - height: 34px; - font-size: 26px; - line-height: 34px; - } - - .notification > div.detail .arrow-up { - width: 56px; - height: 34px; - right: 26px; - bottom: 30px; - line-height: 34px; - border-radius: 189px; - } - - .notification > div.detail .arrow-up::after { - font-size: 35px; - } - - .btn-tool { - right: 18px; - } - - .btn-tool > div:first-child { - margin-right: 44px; - visibility: hidden; - } - - .btn-tool > div { - width: 80px; - height: 80px; - } - - .btn-tool > div::after { - width: 32px; - height: 32px; - line-height: 32px; - font-size: 32px; - } - - .container { - width: calc(100% - 84px); - left: 84px; - } - - .one-container { - top: 36px; - } - - .another-container { - top: 89px; - } - - .container .title { - height: 28px; - line-height: 28px; - font-size: 28px; - } - - .container .detail-content { - height: 34px; - line-height: 34px; - left: 24px; - top: -3px; - font-size: 26px; - } - - .one-container .timestamp { - height: 34px; - right: 34px; - top: -4px; - font-size: 24px; - line-height: 32px; - } - - .another-container .notificaiton-counts { - width: 56px; - height: 34px; - right: 26px; - bottom: 30px; - top: -1px; - line-height: 34px; - font-size: 20px; - border-radius: 189px; - } - } - ` + public static override get styles(): CSSResultArray { + return [sharedStyles] + } } declare global { diff --git a/src/components/notification/notificationstyle.ts b/src/components/notification/notificationstyle.ts new file mode 100644 index 0000000..10c0b29 --- /dev/null +++ b/src/components/notification/notificationstyle.ts @@ -0,0 +1,964 @@ +import {css, CSSResult} from 'lit' + +export const sharedStyles: CSSResult = css` + :host { + --notification-background-lm: rgba(255, 255, 255, 0.55); + --notification-background-dm: rgba(0, 0, 0, 0.25); + --notification-background-active: rgba(255, 255, 255, 0.75); + --button-background-color-lm: rgba(247, 247, 247, 0.78); + --button-background-color-dm: rgba(64, 64, 64, 0.75); + --button-color-lm: #4d4d4d; + --button-color-dm: #f4f4f4; + --notification-counts-background-lm: rgba(0, 0, 0, 0.06); + --notification-counts-background-dm: rgba(255, 255, 255, 0.08); + --notification-counts-lm: #000000; + --notification-counts-dm: #ffffff; + --arrow-background-lm: rgba(0, 0, 0, 0.06); + --title-color-lm: #404040; + --title-color-dm: #f0f0f0; + --single-text-color-lm: #404040; + --single-text-color-dm: #e0e0e0; + --more-text-color-lm: rgba(64, 64, 64, 0.65); + --more-text-color-dm: rgba(224, 224, 224, 1); + + width: 71.7vw; + height: 7.9vh; + display: block; + position: relative; + left: 0; + top: 0; + } + + :host([notificationType='one-notification']) { + // margin: 5px 0 0 0; + + // margin: 16px 0 0 0; + margin: 0.8vh 0 0 0; + } + + .notification { + background: var(--notification-background-lm); + transition: transform 0.6s; + height: inherit; + width: inherit; + } + + .notification[clicked] { + transition: transform 0.1s; + transform: scale(0.95); + background: var(--notification-background-active); + } + + .notification div { + pointer-events: none; + } + + .top-border-radius { + // border-top-left-radius: 20px; + // border-top-right-radius: 20px; + + // border-top-left-radius: 6px; + // border-top-right-radius: 6px; + + border-top-left-radius: 1.7vw; + border-top-right-radius: 1.7vw; + } + + .bottom-border-radius { + // border-bottom-left-radius: 20px; + // border-bottom-right-radius: 20px; + + // border-bottom-left-radius: 6px; + // border-bottom-right-radius: 6px; + + border-bottom-left-radius: 1.7vw; + border-bottom-right-radius: 1.7vw; + } + + .border-radius { + // border-radius: 20px; + + // border-radius: 6px; + + border-radius: 1.7vw; + } + + .notification > img { + // width: 48px; + // height: 48px; + // pointer-events: none; + // margin: 26px 10px 78px 26px; + + // width: 16px; + // height: 16px; + // pointer-events: none; + // margin: 9px 3px 26px 9px; + + width: 4vw; + height: 4vw; + position: absolute; + top: 17.1%; + left: 3%; + pointer-events: none; + } + + .notification > div.title-container { + display: flex; + position: absolute; + + // width: calc(100% - 28px); + // left: 28px; + // top: 23.7%; + + // width: calc(100% - 84px); + // left: 84px; + // top: 36px; + // top: 23.7%; + font-family: 'OPPOSans'; + font-style: normal; + width: 90.2%; + height: 18.4%; + left: 9.8%; + top: 23.7%; + } + + .notification > div.title-container .title { + white-space: nowrap; + text-overflow: ellipsis; + flex: none; + order: 0; + flex-grow: 0; + font-weight: 400; + color: var(--title-color-lm); + + // height: 28px; + // line-height: 28px; + // font-size: 28px; + + // height: 9px; + // line-height: 9px; + // font-size: 9px; + + line-height: 1; + font-size: 2.3vw; + } + + .notification > div.title-container .timestamp { + flex: initial; + position: absolute; + + font-weight: 400; + + text-align: right; + mix-blend-mode: normal; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + opacity: 0.65; + color: var(--title-color-lm); + + // height: 32px; + // right: 32px; + // top: -4px; + // font-size: 24px; + // line-height: 32px; + + // height: 10px; + // right: 10px; + // top: -1px; + // font-size: 8px; + // line-height: 10px; + + right: 10.67px; + top: -1.33px; + font-size: 2vw; + line-height: 1; + right: 3.7%; + top: -2.6%; + top: -0.2vh; + right: 2.6vw; + } + + .notification > div.detail { + display: flex; + position: absolute; + + // width: calc(100% - 84px); + // left: 84px; + // top: 84px; + + // top: 55.3%; + + // width: calc(100% - 28px); + // left: 28px; + // top: 55.3%; + + width: 90.2%; + left: 9.8%; + top: 55.3%; + } + + .notification > div.detail .detail-content { + height: 22.4%; + line-height: 1; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-family: 'OPPOSans'; + font-style: normal; + // font-weight: 300; + font-weight: 400; + color: var(--single-text-color-lm); + mix-blend-mode: normal; + opacity: 0.65; + font-size: 2.2vw; + + // width: 246px; + // height: 11px; + // font-size: 8px; + // line-height: 11px; + + // width: 740px; + // height: 34px; + // font-size: 26px; + // line-height: 34px; + } + + .notification > div.detail .arrow-up { + position: absolute; + top: 0px; + text-align: center; + vertical-align: middle; + display: none; + background: var(--arrow-background-lm); + + // width: 56px; + // height: 34px; + // right: 26px; + // bottom: 30px; + // line-height: 34px; + // border-radius: 189px; + + // width: 18px; + // height: 11px; + // right: 9px; + // bottom: 10px; + // line-height: 11px; + // border-radius: 63px; + + height: 1.8vh; + width: 4.7vw; + right: 3%; + bottom: 19.7%; + border-radius: 15.75vw; + + text-align: center; + vertical-align: middle; + line-height: 1; + } + + .notification > div.detail .arrow-up::after { + font-family: 'gaia-icons'; + content: attr(data-icon); + font-style: normal; + text-rendering: optimizeLegibility; + font-weight: 500; + font-size: 1.33vw; + + // font-size: 35px; + // font-size: 12px; + + width: 1.33vw; + height: 1.33vw; + } + + .one, + .more { + display: flex; + justify-content: space-between; + width: 100%; + height: 100%; + overflow: hidden; + } + + .btn-tool { + display: flex; + align-items: center; + position: absolute; + height: inherit; + visibility: hidden; + + // right: 18px; + + // right: 6px; + + right: 2.1%; + } + + .btn-tool > div { + display: flex; + align-items: center; + justify-content: center; + background: var(--button-background-color-lm); + border-radius: 50%; + opacity: 0.6; + transition: transform 0.1s; + + // width: 80px; + // height: 80px; + + // width: 26px; + // height: 26px; + + width: 6.7vw; + height: 6.7vw; + } + + .btn-tool > div:first-child { + // margin-right: 15px; + // visibility: hidden; + + // margin-right: 44px; + // visibility: hidden; + + margin-right: 5.1%; + margin-right: 3.7vw; + visibility: hidden; + } + + .btn-tool > div:last-child { + visibility: hidden; + } + + .btn-tool > div[clicked] { + transform: scale(0.9); + } + + .btn-tool > div::after { + text-align: center; + vertical-align: middle; + content: attr(data-icon); + font-family: gaia-icons; + font-style: normal; + text-rendering: optimizelegibility; + font-weight: 500; + color: var(--button-color-lm); + + // width: 32px; + // height: 32px; + // line-height: 32px; + // font-size: 32px; + + // width: 10px; + // height: 10px; + // line-height: 10px; + // font-size: 10px; + + width: 40%; + height: 40%; + font-size: 2.7vw; + } + + .container { + display: flex; + position: absolute; + font-family: 'OPPOSans'; + font-style: normal; + font-weight: 400; + // width: calc(100% - 28px); + // left: 28px; + + // width: calc(100% - 84px); + // left: 84px; + + width: 90.2%; + left: 9.8%; + } + + .container .title { + color: var(--title-color-lm); + flex: none; + order: 0; + flex-grow: 0; + + // height: 28px; + // line-height: 28px; + // font-size: 28px; + + // height: 9.3px; + // line-height: 9.3px; + // font-size: 9.3px; + + height: 18.4%; + line-height: 1; + font-size: 1.45vh; + font-size: 2.3vw; + } + + .container .detail-content { + position: relative; + color: var(--more-text-color-lm); + mix-blend-mode: normal; + opacity: 0.65; + flex: none; + order: 1; + flex-grow: 0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + max-width: 40%; + + // height: 34px; + // line-height: 34px; + // left: 24px; + // top: -3px; + // font-size: 26px; + + // height: 11px; + // line-height: 11px; + // left: 8px; + // top: -1px; + // font-size: 9px; + + left: 0.93%; + top: -3px; + top: -2%; + top: -0.16vh; + font-size: 1.35vh; + } + + .one-container { + // top: 36px; + // top: 12px; + top: 23.7%; + } + + .another-container { + // top: 89px; + // top: 29px; + top: 58.5%; + } + + .one-container .timestamp { + position: absolute; + text-align: right; + mix-blend-mode: normal; + opacity: 0.65; + color: var(--single-text-color-lm); + + // height: 34px; + // right: 34px; + // top: -4px; + // font-size: 24px; + // line-height: 32px; + + // height: 11px; + // right: 11px; + // top: -1px; + // font-size: 8px; + // line-height: 11px; + + height: 1.8vh; + right: 4%; + top: -0.2vh; + line-height: 1.7vh; + font-size: 2vw; + } + + .another-container .notificaiton-counts { + position: absolute; + text-align: center; + vertical-align: middle; + color: var(--notification-counts-lm); + background: var(--notification-counts-background-lm); + opacity: 0.55; + + // width: 56px; + // height: 34px; + // right: 26px; + // bottom: 30px; + // top: -1px; + // line-height: 34px; + // font-size: 20px; + // border-radius: 189px; + + // width: 18px; + // height: 11px; + // right: 8px; + // bottom: 10px; + // top: -1px; + // line-height: 11px; + // font-size: 7px; + // border-radius: 63px; + + width: 4.7vw; + height: 1.8vh; + right: 3%; + bottom: 19.7%; + border-radius: 15.75vw; + top: -0.08vw; + font-size: 1.7vw; + line-height: 1.8vh; + vertical-align: middle; + } + + :host([dark-mode]) .notification { + background: var(--notification-background-dm); + } + + :host([dark-mode]) .btn-tool > div { + background: var(--button-background-color-dm); + } + + :host([dark-mode]) .btn-tool > div::after { + color: var(--button-color-dm); + } + + :host([dark-mode]) .another-container .notificaiton-counts { + color: var(--notification-counts-dm); + background: var(--notification-counts-background-dm); + } + + :host([dark-mode]) .container .title, + :host([dark-mode]) .notification > div.title-container .title { + color: var(--title-color-dm); + } + + :host([dark-mode]) .notification > div.title-container .timestamp { + color: var(--single-text-color-dm); + } + + :host([dark-mode]) .notification > div.detail .detail-content { + color: var(--single-text-color-dm); + } + + :host([dark-mode]) .container .detail-content { + color: var(--more-text-color-dm); + } + + :host([dark-mode]) .one-container .timestamp { + color: var(--single-text-color-dm); + } + + // @media screen and (min-width: 300px) { + // // :host([notificationType='one-notification']) { + // // margin: 5px 0 0 0; + // // } + + // // .notification { + // // height: 50px; + // // width: 286px; + // // } + + // // .top-border-radius { + // // border-top-left-radius: 6px; + // // border-top-right-radius: 6px; + // // } + + // // .bottom-border-radius { + // // border-bottom-left-radius: 6px; + // // border-bottom-right-radius: 6px; + // // } + + // // .border-radius { + // // border-radius: 6px; + // // } + + // // .notification > img { + // // width: 16px; + // // height: 16px; + // // pointer-events: none; + // // margin: 9px 3px 26px 9px; + // // } + + // // .notification > div.title-container { + // // width: calc(100% - 28px); + // // left: 28px; + // // top: 23.7%; + // // } + + // .notification > div.title-container .title { + // // height: 9px; + // // line-height: 9px; + // // font-size: 9px; + // } + + // // .notification > div.title-container .timestamp { + // // height: 10px; + // // right: 10px; + // // top: -1px; + // // font-size: 8px; + // // line-height: 10px; + // // } + + // // .notification > div.detail { + // // width: calc(100% - 28px); + // // left: 28px; + // // top: 55.3%; + // // } + + // // .notification > div.detail .detail-content { + // // // width: 246px; + // // // height: 11px; + // // // font-size: 8px; + // // // line-height: 11px; + // // } + + // // .notification > div.detail .arrow-up { + // // // width: 18px; + // // // height: 11px; + // // // right: 9px; + // // // bottom: 10px; + // // // line-height: 11px; + // // // border-radius: 63px; + // // } + + // // .notification > div.detail .arrow-up::after { + // // font-size: 12px; + // // } + + // // .btn-tool { + // // right: 6px; + // // } + + // // .btn-tool > div:first-child { + // // margin-right: 15px; + // // visibility: hidden; + // // } + + // // .btn-tool > div { + // // width: 26px; + // // height: 26px; + // // } + + // // .btn-tool > div::after { + // // width: 10px; + // // height: 10px; + // // line-height: 10px; + // // font-size: 10px; + // // } + + // // .container .detail-content { + // // height: 11px; + // // line-height: 11px; + // // left: 8px; + // // top: -1px; + // // font-size: 9px; + // // } + + // // .one-container .timestamp { + // // height: 11px; + // // right: 11px; + // // top: -1px; + // // font-size: 8px; + // // line-height: 11px; + // // } + + // // .another-container .notificaiton-counts { + // // width: 18px; + // // height: 11px; + // // right: 8px; + // // bottom: 10px; + // // top: -1px; + // // line-height: 11px; + // // font-size: 7px; + // // border-radius: 63px; + // // } + // } + + // @media screen and (min-width: 600px) { + // // :host([notificationType='one-notification']) { + // // margin: 8px 0 0 0; + // // } + + // // .notification { + // // height: 76px; + // // width: 430px; + // // } + + // // .top-border-radius { + // // border-top-left-radius: 10px; + // // border-top-right-radius: 10px; + // // } + + // // .bottom-border-radius { + // // border-bottom-left-radius: 10px; + // // border-bottom-right-radius: 10px; + // // } + + // // .border-radius { + // // border-radius: 10px; + // // } + + // // .notification > img { + // // width: 24px; + // // height: 24px; + // // pointer-events: none; + // // margin: 13px 5px 39px 13px; + // // } + + // // .notification > div.title-container { + // // width: calc(100% - 42px); + // // left: 42px; + // // top: 18px; + // // top: 23.7%; + // // } + + // // .notification > div.title-container .title { + // // height: 14px; + // // line-height: 14px; + // // font-size: 14px; + // // } + + // // .notification > div.title-container .timestamp { + // // height: 16px; + // // right: 16px; + // // top: -2px; + // // font-size: 12px; + // // line-height: 16px; + // // } + + // // .notification > div.detail { + // // width: calc(100% - 42px); + // // left: 42px; + // // top: 42px; + // // top: 55.3%; + // // } + + // // .notification > div.detail .detail-content { + // // width: 370px; + // // height: 17px; + // // font-size: 13px; + // // line-height: 17px; + // // } + + // // .notification > div.detail .arrow-up { + // // width: 28px; + // // height: 17px; + // // right: 13px; + // // bottom: 15px; + // // line-height: 17px; + // // border-radius: 94.5px; + // // } + + // // .notification > div.detail .arrow-up::after { + // // font-size: 17.5px; + // // } + + // // .btn-tool { + // // right: 9px; + // // } + + // // .btn-tool > div:first-child { + // // margin-right: 22px; + // // visibility: hidden; + // // } + + // // .btn-tool > div { + // // width: 40px; + // // height: 40px; + // // } + + // // .btn-tool > div::after { + // // width: 16px; + // // height: 16px; + // // line-height: 16px; + // // font-size: 16px; + // // } + + // // .container { + // // width: calc(100% - 42px); + // // left: 42px; + // // } + + // // .one-container { + // // top: 18px; + // // } + + // // .another-container { + // // top: 44.5px; + // // } + + // // .container .title { + // // height: 14px; + // // line-height: 14px; + // // font-size: 14px; + // // } + + // // .container .detail-content { + // // height: 17px; + // // line-height: 17px; + // // left: 12px; + // // top: -1.5px; + // // font-size: 13px; + // // } + + // // .one-container .timestamp { + // // height: 17px; + // // right: 17px; + // // top: -2px; + // // font-size: 12px; + // // line-height: 16px; + // // } + + // // .another-container .notificaiton-counts { + // // width: 28px; + // // height: 17px; + // // right: 13px; + // // bottom: 15px; + // // top: -0.5px; + // // line-height: 17px; + // // font-size: 10px; + // // border-radius: 94.5px; + // // } + // } + + // @media screen and (min-width: 900px) { + // // :host([notificationType='one-notification']) { + // // margin: 16px 0 0 0; + // // } + + // // .notification { + // // height: 152px; + // // width: 860px; + // // } + + // // .top-border-radius { + // // border-top-left-radius: 20px; + // // border-top-right-radius: 20px; + // // } + + // // .bottom-border-radius { + // // border-bottom-left-radius: 20px; + // // border-bottom-right-radius: 20px; + // // } + + // // .border-radius { + // // border-radius: 20px; + // // } + + // // .notification > img { + // // width: 48px; + // // height: 48px; + // // pointer-events: none; + // // margin: 26px 10px 78px 26px; + // // } + + // // .notification > div.title-container { + // // width: calc(100% - 84px); + // // left: 84px; + + // // top: 36px; + // // top: 23.7%; + // // } + + // // .notification > div.title-container .title { + // // height: 28px; + // // line-height: 28px; + // // font-size: 28px; + // // } + + // // .notification > div.title-container .timestamp { + // // height: 32px; + // // right: 32px; + // // top: -4px; + // // font-size: 24px; + // // line-height: 32px; + // // } + + // // .notification > div.detail { + // // width: calc(100% - 84px); + // // left: 84px; + // // top: 84px; + + // // top: 55.3%; + // // } + + // // .notification > div.detail .detail-content { + // // width: 740px; + // // height: 34px; + // // font-size: 26px; + // // line-height: 34px; + // // } + + // // .notification > div.detail .arrow-up { + // // width: 56px; + // // height: 34px; + // // right: 26px; + // // bottom: 30px; + // // line-height: 34px; + // // border-radius: 189px; + // // } + + // // .notification > div.detail .arrow-up::after { + // // font-size: 35px; + // // } + + // // .btn-tool { + // // right: 18px; + // // } + + // // .btn-tool > div:first-child { + // // margin-right: 44px; + // // visibility: hidden; + // // } + + // // .btn-tool > div { + // // width: 80px; + // // height: 80px; + // // } + + // // .btn-tool > div::after { + // // width: 32px; + // // height: 32px; + // // line-height: 32px; + // // font-size: 32px; + // // } + + // // .container { + // // width: calc(100% - 84px); + // // left: 84px; + // // } + + // // .one-container { + // // top: 36px; + // // } + + // // .another-container { + // // top: 89px; + // // } + + // // .container .title { + // // height: 28px; + // // line-height: 28px; + // // font-size: 28px; + // // } + + // // .container .detail-content { + // // height: 34px; + // // line-height: 34px; + // // left: 24px; + // // top: -3px; + // // font-size: 26px; + // // } + + // // .one-container .timestamp { + // // height: 34px; + // // right: 34px; + // // top: -4px; + // // font-size: 24px; + // // line-height: 32px; + // // } + + // // .another-container .notificaiton-counts { + // // width: 56px; + // // height: 34px; + // // right: 26px; + // // bottom: 30px; + // // top: -1px; + // // line-height: 34px; + // // font-size: 20px; + // // border-radius: 189px; + // // } + // } +`