Merge remote-tracking branch 'origin/master' into feature-component-button
This commit is contained in:
wangchangqi
commit
900f230762
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,8 +30,8 @@ export class HeaderBar extends LitElement {
|
|||
return html`
|
||||
<div class="time-date-outer">
|
||||
<div class="time-date">
|
||||
<div id="time"></div>
|
||||
<div id="date"></div>
|
||||
<div id="time" @click=${this}></div>
|
||||
<div id="date" @click=${this}></div>
|
||||
</div>
|
||||
<div class="time-date-icons">
|
||||
<slot></slot>
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
<style>
|
||||
@media screen and (min-width: 300px) {
|
||||
:host {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
.icon-button {
|
||||
width: 8.67vw;
|
||||
height: 8.67vw;
|
||||
}
|
||||
// @media screen and (min-width: 300px) {
|
||||
// .icon-button {
|
||||
// width: 34px;
|
||||
// height: 34px;
|
||||
// }
|
||||
// }
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
:host {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
}
|
||||
// @media screen and (min-width: 600px) {
|
||||
// .icon-button {
|
||||
// width: 52px;
|
||||
// height: 52px;
|
||||
// }
|
||||
// }
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
:host {
|
||||
width: 104px;
|
||||
height: 104px;
|
||||
}
|
||||
}
|
||||
// @media screen and (min-width: 900px) {
|
||||
// .icon-button {
|
||||
// width: 104px;
|
||||
// height: 104px;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
`
|
||||
|
||||
const iconNamestyle = this.isNameShown ? 'icon-name-shown' : 'icon-name'
|
||||
return html`
|
||||
<div
|
||||
class="icon-button icon-base with-border"
|
||||
data-icon=${this.icon}
|
||||
@click=${this}
|
||||
@touchstart=${this}
|
||||
@touchend=${this}
|
||||
>
|
||||
${iconstyle}
|
||||
<div class="inner">
|
||||
<div
|
||||
class="icon-button icon-base with-border"
|
||||
data-icon=${this.icon}
|
||||
@click=${this}
|
||||
@touchstart=${this}
|
||||
@touchend=${this}
|
||||
>
|
||||
${iconstyle}
|
||||
</div>
|
||||
<div class=${iconNamestyle}>
|
||||
<span>${this.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
|
@ -97,26 +122,30 @@ export class IconControlBar extends LitElement {
|
|||
|
||||
const iconstyle = html`
|
||||
<style>
|
||||
@media screen and (min-width: 300px) {
|
||||
:host {
|
||||
width: 80px;
|
||||
height: 36px;
|
||||
}
|
||||
:host {
|
||||
width: 20vw;
|
||||
height: 9vw;
|
||||
}
|
||||
// @media screen and (min-width: 300px) {
|
||||
// :host {
|
||||
// width: 80px;
|
||||
// height: 36px;
|
||||
// }
|
||||
// }
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
:host {
|
||||
width: 120px;
|
||||
height: 54px;
|
||||
}
|
||||
}
|
||||
// @media screen and (min-width: 600px) {
|
||||
// :host {
|
||||
// width: 120px;
|
||||
// height: 54px;
|
||||
// }
|
||||
// }
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
:host {
|
||||
width: 240px;
|
||||
height: 108px;
|
||||
}
|
||||
}
|
||||
// @media screen and (min-width: 900px) {
|
||||
// :host {
|
||||
// width: 240px;
|
||||
// height: 108px;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
`
|
||||
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
`
|
||||
|
|
@ -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);
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
<style>
|
||||
[data-icon='delete'] {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
`
|
||||
: 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 {
|
|||
<div class="btn-tool">
|
||||
<div data-icon="delete" @click=${this}></div>
|
||||
<div data-icon="settings" @click=${this}></div>
|
||||
${deleteShow}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
|
@ -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`
|
||||
<style>
|
||||
[data-icon='delete'] {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
`
|
||||
: nothing
|
||||
return html`
|
||||
<div class="more">
|
||||
<div
|
||||
|
|
@ -256,7 +286,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}
|
||||
|
|
@ -281,6 +311,7 @@ export class StarNotification extends LitElement {
|
|||
<div class="btn-tool">
|
||||
<div data-icon="delete" @click=${this}></div>
|
||||
<div data-icon="settings" @click=${this}></div>
|
||||
${deleteShow}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
// // }
|
||||
// }
|
||||
`
|
||||
Loading…
Reference in New Issue