Merge pull request #137 in YR/star-web-components from add-dark-mode to master
* commit '670c5f43a903c9ba7a4c6b569ba33f419466e280': 通知、控制栏图标等组件添加深色模式
This commit is contained in:
汪昌棋
commit
d65caaf53f
|
|
@ -88,7 +88,6 @@ export class BrightnessSlider extends LitElement {
|
|||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
background: var(--background-lm);
|
||||
border-radius: 1.3vw;
|
||||
}
|
||||
|
||||
|
|
@ -98,7 +97,6 @@ export class BrightnessSlider extends LitElement {
|
|||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
background: var(--progress-background-lm);
|
||||
border-radius: 1.3vw;
|
||||
}
|
||||
|
||||
|
|
@ -114,8 +112,36 @@ export class BrightnessSlider extends LitElement {
|
|||
font-style: normal;
|
||||
text-rendering: optimizelegibility;
|
||||
font-weight: 500;
|
||||
color: var(--icon-color-lm);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.sliderBar {
|
||||
background: var(--background-lm);
|
||||
}
|
||||
|
||||
.progress {
|
||||
background: var(--progress-background-lm);
|
||||
}
|
||||
|
||||
.sliderBar::before {
|
||||
color: var(--icon-color-lm);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.sliderBar {
|
||||
background: var(--background-dm);
|
||||
}
|
||||
|
||||
.progress {
|
||||
background: var(--progress-background-dm);
|
||||
}
|
||||
|
||||
.sliderBar::before {
|
||||
color: var(--icon-color-dm);
|
||||
z-index: auto;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ export class DropDownMenu extends LitElement {
|
|||
|
||||
.all-quick-icons {
|
||||
width: 100%;
|
||||
height: calc(100% - 31px);
|
||||
height: 97.6%;
|
||||
position: relative;
|
||||
top: 2.4%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,7 +76,6 @@ export class HeaderBar extends LitElement {
|
|||
font-family: OPPOSans;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
color: var(--only-time-color-lm);
|
||||
}
|
||||
|
||||
.time-icons > ::slotted(*) {
|
||||
|
|
@ -102,25 +101,12 @@ export class HeaderBar extends LitElement {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.time-date > #time {
|
||||
color: var(--time-date-time-color-lm);
|
||||
}
|
||||
|
||||
#date {
|
||||
position: relative;
|
||||
opacity: 0.6;
|
||||
color: var(--time-date-date-color-lm);
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
|
||||
.host([deep-mode]) .time-outer > #time {
|
||||
color: var(--only-time-color-dm);
|
||||
}
|
||||
|
||||
.host([deep-mode]) #date {
|
||||
color: var(--time-date-date-color-dm);
|
||||
}
|
||||
|
||||
.time-outer > #time {
|
||||
height: 2.7vh;
|
||||
line-height: 2.7vh;
|
||||
|
|
@ -159,6 +145,34 @@ export class HeaderBar extends LitElement {
|
|||
position: relative;
|
||||
right: 0.9vw;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.time-outer > #time {
|
||||
color: var(--only-time-color-lm);
|
||||
}
|
||||
|
||||
.time-date > #time {
|
||||
color: var(--time-date-time-color-lm);
|
||||
}
|
||||
|
||||
#date {
|
||||
color: var(--time-date-date-color-lm);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.time-outer > #time {
|
||||
color: var(--only-time-color-dm);
|
||||
}
|
||||
|
||||
.time-date > #time {
|
||||
color: var(--time-date-time-color-dm);
|
||||
}
|
||||
|
||||
#date {
|
||||
color: var(--time-date-date-color-dm);
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
firstUpdated() {
|
||||
|
|
|
|||
|
|
@ -60,7 +60,8 @@ export class IconControlBarGroup extends LitElement {
|
|||
static styles = css`
|
||||
:host {
|
||||
--background-lm: #ffffff;
|
||||
--background-dm: #000000;
|
||||
// --background-dm: #000000;
|
||||
--background-dm: rgba(0, 0, 0, 0.15);
|
||||
--opacity-lm: 0.75;
|
||||
--opacity-dm: 0.25;
|
||||
--line-border-lm: rgba(0, 0, 0, 0.07);
|
||||
|
|
@ -68,9 +69,8 @@ export class IconControlBarGroup extends LitElement {
|
|||
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
background: var(--background-lm);
|
||||
mix-blend-mode: normal;
|
||||
opacity: var(--opacity-lm);
|
||||
// opacity: var(--opacity-lm);
|
||||
border-radius: 1.3vw;
|
||||
}
|
||||
|
||||
|
|
@ -101,20 +101,32 @@ export class IconControlBarGroup extends LitElement {
|
|||
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);
|
||||
@media (prefers-color-scheme: light) {
|
||||
:host {
|
||||
background: var(--background-lm);
|
||||
opacity: var(--opacity-lm);
|
||||
}
|
||||
|
||||
.icon-only > div > ::slotted(*) {
|
||||
border-left: 0.17vw solid var(--line-border-lm);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-only > div > ::slotted(:first-child) {
|
||||
border-left-style: none;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.icon-only > div > ::slotted(*) {
|
||||
border-left: 0.17vw solid var(--line-border-dm);
|
||||
}
|
||||
|
||||
:host([deep-mode]) {
|
||||
background: var(--background-dm);
|
||||
.icon-only > div > ::slotted(:first-child) {
|
||||
border-left-style: none;
|
||||
}
|
||||
|
||||
:host {
|
||||
background: var(--background-dm);
|
||||
}
|
||||
}
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@ export const sharedStyles: CSSResult = css`
|
|||
// height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--background-lm);
|
||||
border-radius: 1.3vw;
|
||||
}
|
||||
|
||||
|
|
@ -44,7 +43,6 @@ export const sharedStyles: CSSResult = css`
|
|||
font-style: normal;
|
||||
text-rendering: optimizelegibility;
|
||||
font-weight: 500;
|
||||
color: var(--text-color-lm);
|
||||
}
|
||||
|
||||
.more-info-icon {
|
||||
|
|
@ -70,7 +68,6 @@ export const sharedStyles: CSSResult = css`
|
|||
p {
|
||||
position: relative;
|
||||
left: 13.1%;
|
||||
color: var(--text-color-lm);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -85,9 +82,6 @@ export const sharedStyles: CSSResult = css`
|
|||
|
||||
.icon-name-shown,
|
||||
.icon-name {
|
||||
// font-size: 7px;
|
||||
// height: 16px;
|
||||
|
||||
// font-size: 20px;
|
||||
// height: 48px;
|
||||
|
||||
|
|
@ -103,17 +97,6 @@ export const sharedStyles: CSSResult = css`
|
|||
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%;
|
||||
|
|
@ -124,8 +107,7 @@ export const sharedStyles: CSSResult = css`
|
|||
font-family: 'OPPOSans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 7px;
|
||||
color: var(--text-color-lm);
|
||||
font-size: 1.75vw;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -147,8 +129,7 @@ export const sharedStyles: CSSResult = css`
|
|||
font-family: 'OPPOSans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 7px;
|
||||
color: var(--text-color-lm);
|
||||
font-size: 1.75vw;
|
||||
}
|
||||
|
||||
.icon-button::before {
|
||||
|
|
@ -157,14 +138,51 @@ export const sharedStyles: CSSResult = css`
|
|||
// 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;
|
||||
}
|
||||
|
||||
:host([disabled='true']) {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.with-border {
|
||||
background: var(--background-lm);
|
||||
}
|
||||
|
||||
.icon-button::before,
|
||||
.more-info-icon::after {
|
||||
color: var(--text-color-lm);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--text-color-lm);
|
||||
}
|
||||
|
||||
.icon-name {
|
||||
color: var(--text-color-lm);
|
||||
}
|
||||
|
||||
.icon-name-shown {
|
||||
color: var(--text-color-lm);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.with-border {
|
||||
background: var(--background-dm);
|
||||
}
|
||||
|
||||
p,
|
||||
.icon-button::before,
|
||||
.more-info-icon::after,
|
||||
.icon-name,
|
||||
.icon-name-shown {
|
||||
color: var(--text-color-dm);
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ export const sharedStyles: CSSResult = css`
|
|||
--notification-counts-lm: #000000;
|
||||
--notification-counts-dm: #ffffff;
|
||||
--arrow-background-lm: rgba(0, 0, 0, 0.06);
|
||||
--arrow-background-dm: rgba(255, 255, 255, 0.08);
|
||||
--title-color-lm: #404040;
|
||||
--title-color-dm: #f0f0f0;
|
||||
--single-text-color-lm: #404040;
|
||||
|
|
@ -37,7 +38,6 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
|
||||
.notification {
|
||||
background: var(--notification-background-lm);
|
||||
transition: transform 0.6s;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
|
|
@ -57,9 +57,6 @@ export const sharedStyles: CSSResult = css`
|
|||
// 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;
|
||||
}
|
||||
|
|
@ -68,9 +65,6 @@ export const sharedStyles: CSSResult = css`
|
|||
// 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;
|
||||
}
|
||||
|
|
@ -78,8 +72,6 @@ export const sharedStyles: CSSResult = css`
|
|||
.border-radius {
|
||||
// border-radius: 20px;
|
||||
|
||||
// border-radius: 6px;
|
||||
|
||||
border-radius: 1.7vw;
|
||||
}
|
||||
|
||||
|
|
@ -89,11 +81,6 @@ export const sharedStyles: CSSResult = css`
|
|||
// 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;
|
||||
|
|
@ -110,10 +97,6 @@ export const sharedStyles: CSSResult = css`
|
|||
// 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%;
|
||||
|
|
@ -129,16 +112,11 @@ export const sharedStyles: CSSResult = css`
|
|||
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;
|
||||
}
|
||||
|
|
@ -155,7 +133,6 @@ export const sharedStyles: CSSResult = css`
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
opacity: 0.65;
|
||||
color: var(--title-color-lm);
|
||||
|
||||
// height: 32px;
|
||||
// right: 32px;
|
||||
|
|
@ -163,12 +140,6 @@ export const sharedStyles: CSSResult = css`
|
|||
// 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;
|
||||
|
|
@ -187,12 +158,6 @@ export const sharedStyles: CSSResult = css`
|
|||
// 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%;
|
||||
|
|
@ -208,7 +173,6 @@ export const sharedStyles: CSSResult = css`
|
|||
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;
|
||||
|
|
@ -217,11 +181,6 @@ export const sharedStyles: CSSResult = css`
|
|||
// height: 11px;
|
||||
// font-size: 8px;
|
||||
// line-height: 11px;
|
||||
|
||||
// width: 740px;
|
||||
// height: 34px;
|
||||
// font-size: 26px;
|
||||
// line-height: 34px;
|
||||
}
|
||||
|
||||
.notification > div.detail .arrow-up {
|
||||
|
|
@ -230,7 +189,6 @@ export const sharedStyles: CSSResult = css`
|
|||
text-align: center;
|
||||
vertical-align: middle;
|
||||
display: none;
|
||||
background: var(--arrow-background-lm);
|
||||
|
||||
// width: 56px;
|
||||
// height: 34px;
|
||||
|
|
@ -239,13 +197,6 @@ export const sharedStyles: CSSResult = css`
|
|||
// 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%;
|
||||
|
|
@ -299,7 +250,6 @@ export const sharedStyles: CSSResult = css`
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--button-background-color-lm);
|
||||
border-radius: 50%;
|
||||
opacity: 0.6;
|
||||
transition: transform 0.1s;
|
||||
|
|
@ -307,9 +257,6 @@ export const sharedStyles: CSSResult = css`
|
|||
// width: 80px;
|
||||
// height: 80px;
|
||||
|
||||
// width: 26px;
|
||||
// height: 26px;
|
||||
|
||||
width: 6.7vw;
|
||||
height: 6.7vw;
|
||||
}
|
||||
|
|
@ -342,18 +289,12 @@ export const sharedStyles: CSSResult = css`
|
|||
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;
|
||||
|
|
@ -368,15 +309,11 @@ export const sharedStyles: CSSResult = css`
|
|||
// 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;
|
||||
|
|
@ -385,10 +322,6 @@ export const sharedStyles: CSSResult = css`
|
|||
// 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;
|
||||
|
|
@ -397,7 +330,6 @@ export const sharedStyles: CSSResult = css`
|
|||
|
||||
.container .detail-content {
|
||||
position: relative;
|
||||
color: var(--more-text-color-lm);
|
||||
mix-blend-mode: normal;
|
||||
opacity: 0.65;
|
||||
flex: none;
|
||||
|
|
@ -414,12 +346,6 @@ export const sharedStyles: CSSResult = css`
|
|||
// top: -3px;
|
||||
// font-size: 26px;
|
||||
|
||||
// height: 11px;
|
||||
// line-height: 11px;
|
||||
// left: 8px;
|
||||
// top: -1px;
|
||||
// font-size: 9px;
|
||||
|
||||
left: 0.93%;
|
||||
top: -3px;
|
||||
top: -2%;
|
||||
|
|
@ -444,7 +370,6 @@ export const sharedStyles: CSSResult = css`
|
|||
text-align: right;
|
||||
mix-blend-mode: normal;
|
||||
opacity: 0.65;
|
||||
color: var(--single-text-color-lm);
|
||||
|
||||
// height: 34px;
|
||||
// right: 34px;
|
||||
|
|
@ -469,8 +394,6 @@ export const sharedStyles: CSSResult = css`
|
|||
position: absolute;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
color: var(--notification-counts-lm);
|
||||
background: var(--notification-counts-background-lm);
|
||||
opacity: 0.55;
|
||||
|
||||
// width: 56px;
|
||||
|
|
@ -502,463 +425,94 @@ export const sharedStyles: CSSResult = css`
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
:host([dark-mode]) .notification {
|
||||
background: var(--notification-background-dm);
|
||||
@media (prefers-color-scheme: light) {
|
||||
.notification {
|
||||
background: var(--notification-background-lm);
|
||||
}
|
||||
|
||||
.notification > div.title-container .title {
|
||||
color: var(--title-color-lm);
|
||||
}
|
||||
|
||||
.notification > div.title-container .timestamp {
|
||||
color: var(--title-color-lm);
|
||||
}
|
||||
|
||||
.notification > div.detail .detail-content {
|
||||
color: var(--single-text-color-lm);
|
||||
}
|
||||
|
||||
.notification > div.detail .arrow-up {
|
||||
background: var(--arrow-background-lm);
|
||||
}
|
||||
|
||||
.btn-tool > div {
|
||||
background: var(--button-background-color-lm);
|
||||
}
|
||||
|
||||
.btn-tool > div::after {
|
||||
color: var(--button-color-lm);
|
||||
}
|
||||
|
||||
.container .title {
|
||||
color: var(--title-color-lm);
|
||||
}
|
||||
|
||||
.container .detail-content {
|
||||
color: var(--more-text-color-lm);
|
||||
}
|
||||
|
||||
.one-container .timestamp {
|
||||
color: var(--single-text-color-lm);
|
||||
}
|
||||
|
||||
.another-container .notificaiton-counts {
|
||||
color: var(--notification-counts-lm);
|
||||
background: var(--notification-counts-background-lm);
|
||||
}
|
||||
}
|
||||
|
||||
:host([dark-mode]) .btn-tool > div {
|
||||
background: var(--button-background-color-dm);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.notification {
|
||||
background: var(--notification-background-dm);
|
||||
}
|
||||
|
||||
.notification > div.detail .arrow-up {
|
||||
background: var(--arrow-background-dm);
|
||||
}
|
||||
|
||||
.btn-tool > div {
|
||||
background: var(--button-background-color-dm);
|
||||
}
|
||||
|
||||
.btn-tool > div::after {
|
||||
color: var(--button-color-dm);
|
||||
}
|
||||
|
||||
.another-container .notificaiton-counts {
|
||||
color: var(--notification-counts-dm);
|
||||
background: var(--notification-counts-background-dm);
|
||||
}
|
||||
|
||||
.container .title,
|
||||
.notification > div.title-container .title {
|
||||
color: var(--title-color-dm);
|
||||
}
|
||||
|
||||
.notification > div.title-container .timestamp {
|
||||
color: var(--single-text-color-dm);
|
||||
}
|
||||
|
||||
.notification > div.detail .detail-content {
|
||||
color: var(--single-text-color-dm);
|
||||
}
|
||||
|
||||
.container .detail-content {
|
||||
color: var(--more-text-color-dm);
|
||||
}
|
||||
|
||||
.one-container .timestamp {
|
||||
color: var(--single-text-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