diff --git a/src/components/brightness-slider/brightness-slider.ts b/src/components/brightness-slider/brightness-slider.ts
index 4959fcb..ff7ed85 100644
--- a/src/components/brightness-slider/brightness-slider.ts
+++ b/src/components/brightness-slider/brightness-slider.ts
@@ -1,7 +1,15 @@
-import {html, css, LitElement, HTMLTemplateResult} from 'lit'
-import {customElement, property, query} from 'lit/decorators.js'
+import {
+ html,
+ CSSResultArray,
+ HTMLTemplateResult,
+ customElement,
+ property,
+ query,
+ StarBaseElement,
+} from '@star-web-components/base'
+import {sharedStyles} from './style.js'
@customElement('brightness-slider')
-export class BrightnessSlider extends LitElement {
+export class BrightnessSlider extends StarBaseElement {
@query('.progress') progress!: HTMLDivElement
@query('.sliderBar') sliderBar!: HTMLDivElement
@property({type: String}) id = ''
@@ -75,82 +83,9 @@ export class BrightnessSlider extends LitElement {
`
}
- static styles = css`
- :host {
- width: inherit;
- height: inherit;
- dislay: block;
- --cover-length: 3.78px;
- --background-lm: rgba(255, 255, 255, 0.5);
- --background-dm: rgba(0, 0, 0, 0.15);
- --icon-color-lm: #4d4d4d;
- --icon-color-dm: #d1d1d1;
- --progress-background-lm: rgba(255, 255, 255, 0.8);
- --progress-background-dm: rgba(255, 255, 255, 0.7);
- }
-
- .sliderBar {
- width: inherit;
- height: inherit;
- position: absolute;
- left: 0px;
- right: 0px;
- border-radius: 1.3vw;
- }
-
- .progress {
- width: var(--cover-length);
- height: 100%;
- position: absolute;
- left: 0px;
- right: 0px;
- 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;
- font-style: normal;
- text-rendering: optimizelegibility;
- font-weight: 500;
- }
-
- @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;
- }
- }
- `
+ static override get styles(): CSSResultArray {
+ return [sharedStyles]
+ }
handleEvent(event: TouchEvent) {
switch (event.type) {
diff --git a/src/components/brightness-slider/style.ts b/src/components/brightness-slider/style.ts
new file mode 100644
index 0000000..440e166
--- /dev/null
+++ b/src/components/brightness-slider/style.ts
@@ -0,0 +1,79 @@
+import {css, CSSResult} from 'lit'
+
+export const sharedStyles: CSSResult = css`
+ :host {
+ width: inherit;
+ height: inherit;
+ dislay: block;
+ --cover-length: 3.78px;
+ --background-lm: rgba(255, 255, 255, 0.5);
+ --background-dm: rgba(0, 0, 0, 0.15);
+ --icon-color-lm: #4d4d4d;
+ --icon-color-dm: #d1d1d1;
+ --progress-background-lm: rgba(255, 255, 255, 0.8);
+ --progress-background-dm: rgba(255, 255, 255, 0.7);
+ }
+
+ .sliderBar {
+ width: inherit;
+ height: inherit;
+ position: absolute;
+ left: 0px;
+ right: 0px;
+ border-radius: var(--auto-16px);
+ }
+
+ .progress {
+ width: var(--cover-length);
+ height: 100%;
+ position: absolute;
+ left: 0px;
+ right: 0px;
+ border-radius: var(--auto-16px);
+ }
+
+ .sliderBar::before {
+ width: var(--auto-48px);
+ height: var(--auto-48px);
+ left: calc(29px / var(--hostDevicePixelRatio));
+ top: calc(29px / var(--hostDevicePixelRatio));
+ font-size: var(--auto-48px);
+
+ position: absolute;
+ content: attr(data-icon);
+ font-family: gaia-icons;
+ font-style: normal;
+ text-rendering: optimizelegibility;
+ font-weight: 500;
+ }
+
+ @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;
+ }
+ }
+`
diff --git a/src/components/drop-down-menu/drop-down-menu.ts b/src/components/drop-down-menu/drop-down-menu.ts
index 0b8c5db..437467e 100644
--- a/src/components/drop-down-menu/drop-down-menu.ts
+++ b/src/components/drop-down-menu/drop-down-menu.ts
@@ -1,21 +1,25 @@
-import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
import {
+ html,
+ CSSResultArray,
+ HTMLTemplateResult,
+ nothing,
customElement,
property,
query,
queryAssignedElements,
-} from 'lit/decorators.js'
-import {HeaderBar, HeaderBarType} from '../header-bar/header-bar.js'
-import {IconControlBarType} from '../icon-control-bar/icon-control-bar.js'
-import '../icon-control-bar/icon-control-bar.js'
-import '../header-bar/header-bar.js'
+ StarBaseElement,
+} from '@star-web-components/base'
+import {sharedStyles} from './style.js'
+import {HeaderBar, HeaderBarType} from '@star-web-components/header-bar'
+import {IconControlBarType} from '@star-web-components/icon-control-bar'
+
export enum DropDownMenuType {
HEADER_WITH_TIME = 'header-with-time',
HEADER_WITH_DATE_TIME = 'header-with-date-time',
}
@customElement('drop-down-menu')
-export class DropDownMenu extends LitElement {
+export class DropDownMenu extends StarBaseElement {
@property({type: DropDownMenuType}) type = ''
@queryAssignedElements({flatten: true}) slotElements!: HTMLSlotElement[]
@query('header-bar') headerBar!: HeaderBar
@@ -75,54 +79,9 @@ export class DropDownMenu extends LitElement {
this.headerBar.autoUpdateDateTime()
}
- static styles = css`
- :host {
- width: inherit;
- height: inherit;
- }
-
- :host([open]) {
- transform: translateY(0);
- transition: transform 300ms ease, visibility 300ms;
- will-change: transform;
- visibility: visible;
- }
-
- .inner {
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- }
-
- header-bar[type='only-time'] {
- dispaly: flex;
- width: 42.7vw;
- height: 4.3vw;
- height: 2.7vh;
- }
-
- header-bar[type='date-time'] {
- dispaly: flex;
- width: 71.7vw;
- height: 3.3vh;
- }
-
- .all-quick-icons {
- width: 100%;
- height: 97.6%;
- position: relative;
- top: 2.4%;
- }
-
- .others {
- display: flex;
- flex-direction: column;
- position: absolute;
- top: 5.2vh;
- }
- `
+ static override get styles(): CSSResultArray {
+ return [sharedStyles]
+ }
}
declare global {
diff --git a/src/components/drop-down-menu/style.ts b/src/components/drop-down-menu/style.ts
new file mode 100644
index 0000000..a17b50b
--- /dev/null
+++ b/src/components/drop-down-menu/style.ts
@@ -0,0 +1,49 @@
+import {css, CSSResult} from 'lit'
+
+export const sharedStyles: CSSResult = css`
+ :host {
+ width: inherit;
+ height: inherit;
+ }
+
+ :host([open]) {
+ transform: translateY(0);
+ transition: transform 300ms ease, visibility 300ms;
+ will-change: transform;
+ visibility: visible;
+ }
+
+ .inner {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ header-bar[type='only-time'] {
+ dispaly: flex;
+ width: calc(512px / var(--hostDevicePixelRatio));
+ height: var(--auto-52px);
+ }
+
+ header-bar[type='date-time'] {
+ dispaly: flex;
+ width: calc(860px / var(--hostDevicePixelRatio));
+ height: var(--auto-64px);
+ }
+
+ .all-quick-icons {
+ width: 100%;
+ height: 97.6%;
+ position: relative;
+ top: 2.4%;
+ }
+
+ .others {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ top: var(--auto-100px);
+ }
+`
diff --git a/src/components/header-bar/header-bar.ts b/src/components/header-bar/header-bar.ts
index d476d9d..9b0be42 100644
--- a/src/components/header-bar/header-bar.ts
+++ b/src/components/header-bar/header-bar.ts
@@ -1,13 +1,22 @@
-import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
-import {customElement, property, query, state} from 'lit/decorators.js'
-
+import {
+ html,
+ CSSResultArray,
+ HTMLTemplateResult,
+ nothing,
+ customElement,
+ property,
+ query,
+ state,
+ StarBaseElement,
+} from '@star-web-components/base'
+import {sharedStyles} from './style.js'
export enum HeaderBarType {
ONLY_TIME = 'only-time',
DATE_TIME = 'date-time',
}
@customElement('header-bar')
-export class HeaderBar extends LitElement {
+export class HeaderBar extends StarBaseElement {
@state() updateTimeTimeout!: number
@state() updateDateTimeout!: number
@property({type: HeaderBarType}) type = ''
@@ -52,128 +61,9 @@ export class HeaderBar extends LitElement {
}
}
- static styles = css`
- :host {
- --only-time-color-lm: #292929;
- --only-time-color-dm: #f0f0f0;
- --time-date-time-color-lm: #404040;
- --time-date-date-color-lm: #000000;
- --time-date-time-color-dm: #e0e0e0;
- --time-date-date-color-dm: #e0e0e0;
- width: inherit;
- height: inherit;
- }
-
- .time-outer {
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
-
- .time-outer > #time {
- font-family: OPPOSans;
- font-style: normal;
- font-weight: 400;
- }
-
- .time-icons > ::slotted(*) {
- display: flex;
- }
-
- .time-date-outer {
- width: 100%;
- height: 100%;
- display: flex;
- align-items: end;
- }
-
- .time-date {
- height: 100%;
- width: 100%;
- display: flex;
- align-items: end;
- vertical-align: middle;
- font-family: 'OPPOSans';
- font-style: normal;
- font-weight: 400;
- position: relative;
- }
-
- #date {
- position: relative;
- opacity: 0.6;
- mix-blend-mode: normal;
- }
-
- .time-outer > #time {
- height: 2.7vh;
- line-height: 2.7vh;
- font-size: 2.7vh;
- }
-
- .time-icons {
- display: flex;
- width: 11.3vw;
- position: relative;
- right: 0.3vw;
- }
-
- .time-icons > ::slotted(:last-child) {
- position: relative;
- left: 3.3vw;
- }
-
- .time-date {
- line-height: 3.3vh;
- left: 0.8vw;
- }
-
- .time-date > #time {
- font-size: 5.3vw;
- }
-
- #date {
- height: 1.8vh;
- line-height: 1.8vh;
- left: 1.8vw;
- font-size: 2.2vw;
- }
-
- .time-date-icons {
- 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);
- }
- }
- `
+ static override get styles(): CSSResultArray {
+ return [sharedStyles]
+ }
firstUpdated() {
this.autoUpdateDateTime()
diff --git a/src/components/header-bar/style.ts b/src/components/header-bar/style.ts
new file mode 100644
index 0000000..9d82e6e
--- /dev/null
+++ b/src/components/header-bar/style.ts
@@ -0,0 +1,124 @@
+import {css, CSSResult} from 'lit'
+
+export const sharedStyles: CSSResult = css`
+ :host {
+ --only-time-color-lm: #292929;
+ --only-time-color-dm: #f0f0f0;
+ --time-date-time-color-lm: #404040;
+ --time-date-date-color-lm: #000000;
+ --time-date-time-color-dm: #e0e0e0;
+ --time-date-date-color-dm: #e0e0e0;
+ width: inherit;
+ height: inherit;
+ }
+
+ .time-outer {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .time-outer > #time {
+ font-family: OPPOSans;
+ font-style: normal;
+ font-weight: 400;
+ }
+
+ .time-icons > ::slotted(*) {
+ display: flex;
+ }
+
+ .time-date-outer {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: end;
+ }
+
+ .time-date {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ align-items: end;
+ vertical-align: middle;
+ font-family: 'OPPOSans';
+ font-style: normal;
+ font-weight: 400;
+ position: relative;
+ }
+
+ #date {
+ position: relative;
+ opacity: 0.6;
+ mix-blend-mode: normal;
+ }
+
+ .time-outer > #time {
+ height: var(--auto-52px);
+ line-height: var(--auto-52px);
+ font-size: var(--auto-52px);
+ }
+
+ .time-icons {
+ display: flex;
+ position: relative;
+ width: calc(136px / var(--hostDevicePixelRatio));
+ right: var(--auto-4px);
+ }
+
+ .time-icons > ::slotted(:last-child) {
+ position: relative;
+ left: var(--auto-40px);
+ }
+
+ .time-date {
+ line-height: var(--auto-64px);
+ left: var(--auto-10px);
+ }
+
+ .time-date > #time {
+ font-size: var(--auto-64px);
+ }
+
+ #date {
+ height: var(--auto-34px);
+ line-height: var(--auto-34px);
+ left: var(--auto-22px);
+ font-size: var(--auto-26px);
+ }
+
+ .time-date-icons {
+ position: relative;
+ right: var(--auto-11px);
+ }
+
+ @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);
+ }
+ }
+`
diff --git a/src/components/icon-control-bar-group/icon-control-bar-group.ts b/src/components/icon-control-bar-group/icon-control-bar-group.ts
index dd03364..54a7221 100644
--- a/src/components/icon-control-bar-group/icon-control-bar-group.ts
+++ b/src/components/icon-control-bar-group/icon-control-bar-group.ts
@@ -1,13 +1,21 @@
-import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
-import {customElement, property, queryAssignedElements} from 'lit/decorators.js'
-
+import {
+ html,
+ CSSResultArray,
+ HTMLTemplateResult,
+ nothing,
+ customElement,
+ property,
+ queryAssignedElements,
+ StarBaseElement,
+} from '@star-web-components/base'
+import {sharedStyles} from './style.js'
export enum IconControlBarGroupType {
BASE = 'base',
WITH_STATE = 'with-state',
}
@customElement('icon-control-bar-group')
-export class IconControlBarGroup extends LitElement {
+export class IconControlBarGroup extends StarBaseElement {
@property({type: IconControlBarGroupType}) type = ''
@property({type: Number}) count = 2
@queryAssignedElements({flatten: true}) slotElements!: HTMLSlotElement[]
@@ -57,78 +65,9 @@ export class IconControlBarGroup extends LitElement {
}
}
- static styles = css`
- :host {
- --background-lm: #ffffff;
- // --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);
- --line-border-dm: rgba(255, 255, 255, 0.07);
-
- width: inherit;
- height: inherit;
- mix-blend-mode: normal;
- // opacity: var(--opacity-lm);
- border-radius: 1.3vw;
- }
-
- .icon-with-state {
- width: 100%;
- display: flex;
- align-items: center;
- // justify-content: space-around;
- justify-content: space-between;
- }
-
- .icon-only {
- width: inherit;
- height: inherit;
- background: inherit;
- border-radius: inherit;
- }
-
- .icon-only > div {
- display: flex;
- align-items: center;
- height: 100%;
- }
-
- .icon-only > div > ::slotted(*) {
- width: 25%;
- display: flex;
- align-items: center;
- justify-content: center;
- height: 2.5vw;
- border-radius: 0.17vw;
- }
-
- @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);
- }
- }
-
- @media (prefers-color-scheme: dark) {
- .icon-only > div > ::slotted(*) {
- border-left: 0.17vw solid var(--line-border-dm);
- }
-
- .icon-only > div > ::slotted(:first-child) {
- border-left-style: none;
- }
-
- :host {
- background: var(--background-dm);
- }
- }
- `
+ static override get styles(): CSSResultArray {
+ return [sharedStyles]
+ }
}
declare global {
diff --git a/src/components/icon-control-bar-group/style.ts b/src/components/icon-control-bar-group/style.ts
new file mode 100644
index 0000000..26c0009
--- /dev/null
+++ b/src/components/icon-control-bar-group/style.ts
@@ -0,0 +1,74 @@
+import {css, CSSResult} from 'lit'
+
+export const sharedStyles: CSSResult = css`
+ :host {
+ --background-lm: #ffffff;
+ // --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);
+ --line-border-dm: rgba(255, 255, 255, 0.07);
+
+ width: inherit;
+ height: inherit;
+ mix-blend-mode: normal;
+ // opacity: var(--opacity-lm);
+ border-radius: var(--auto-16px);
+ }
+
+ .icon-with-state {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ // justify-content: space-around;
+ justify-content: space-between;
+ }
+
+ .icon-only {
+ width: inherit;
+ height: inherit;
+ background: inherit;
+ border-radius: inherit;
+ }
+
+ .icon-only > div {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ }
+
+ .icon-only > div > ::slotted(*) {
+ width: 25%;
+ height: var(--auto-30px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: var(--auto-2px);
+ }
+
+ @media (prefers-color-scheme: light) {
+ :host {
+ background: var(--background-lm);
+ opacity: var(--opacity-lm);
+ }
+
+ .icon-only > div > ::slotted(*) {
+ border-left: var(--auto-2px) solid var(--line-border-lm);
+ }
+ }
+
+ @media (prefers-color-scheme: dark) {
+ .icon-only > div > ::slotted(*) {
+ border-left: var(--auto-2px) solid var(--line-border-dm);
+ }
+
+ .icon-only > div > ::slotted(:first-child) {
+ border-left-style: none;
+ }
+
+ :host {
+ background: var(--background-dm);
+ }
+ }
+`
diff --git a/src/components/icon-control-bar/icon-control-bar.ts b/src/components/icon-control-bar/icon-control-bar.ts
index 64b8530..7215e4d 100644
--- a/src/components/icon-control-bar/icon-control-bar.ts
+++ b/src/components/icon-control-bar/icon-control-bar.ts
@@ -1,27 +1,25 @@
import {
html,
- LitElement,
HTMLTemplateResult,
nothing,
CSSResultArray,
-} from 'lit'
-import {
customElement,
property,
eventOptions,
query,
state,
-} from 'lit/decorators.js'
+ StarBaseElement,
+} from '@star-web-components/base'
import {sharedStyles} from './iconstyle.js'
-
export enum IconControlBarType {
BASE = 'base',
BASE_WITHOUT_BORDER = 'base-without-border',
WITH_STATE = 'with-state',
+ GROUP_WITHOUT_BORDER = 'group-without-border',
}
@customElement('icon-control-bar')
-export class IconControlBar extends LitElement {
+export class IconControlBar extends StarBaseElement {
@property({type: IconControlBarType}) type = ''
@property({type: String}) icon = ''
@property({type: String}) stateDesc = ''
@@ -50,35 +48,6 @@ export class IconControlBar extends LitElement {
// return nothing
// }
- const iconstyle = html`
-
- `
-
const iconNamestyle = this.isNameShown ? 'icon-name-shown' : 'icon-name'
return html`
@@ -88,9 +57,7 @@ export class IconControlBar extends LitElement {
@click=${this}
@touchstart=${this}
@touchend=${this}
- >
- ${iconstyle}
-
+ >
${this.name}
@@ -121,35 +88,6 @@ export class IconControlBar extends LitElement {
return nothing
}
- const iconstyle = html`
-
- `
-
return html`
- ${iconstyle}
`
}
+ getGroupWithOutBorder(): HTMLTemplateResult | typeof nothing {
+ if (!this.icon) {
+ console.error('【icon-control-bar】缺少 icon 参数')
+ return nothing
+ }
+
+ return html`
+
+ `
+ }
+
@eventOptions({passive: false})
handleEvent(event: Event) {
switch (event.type) {
@@ -202,6 +156,7 @@ export class IconControlBar extends LitElement {
isActive = target.classList.contains('active')
this.activeOrInactive(isActive, target)
+ this.fireEvent(isActive)
}
// if (this.type == IconControlBarType.WITH_STATE) {
@@ -214,7 +169,17 @@ export class IconControlBar extends LitElement {
// this.moreInfoIcon.dataset.icon = "";
// }
// }
+ if (this.type == IconControlBarType.GROUP_WITHOUT_BORDER) {
+ this.iconBtn.classList.add('actived')
+ let timeoutId = window.setTimeout(() => {
+ clearTimeout(timeoutId)
+ this.iconBtn.classList.remove('actived')
+ this.fireEvent()
+ }, 200)
+ }
+ }
+ fireEvent(isActive?: boolean) {
this.dispatchEvent(
new CustomEvent('icon-control-bar-click', {
detail: {
@@ -307,6 +272,8 @@ export class IconControlBar extends LitElement {
return this.getbaseWithOutBorder()
case IconControlBarType.WITH_STATE:
return this.getwithstate()
+ case IconControlBarType.GROUP_WITHOUT_BORDER:
+ return this.getGroupWithOutBorder()
default:
console.error('unhandled 【icon-control-bar】 type')
return nothing
@@ -333,7 +300,7 @@ export class IconControlBar extends LitElement {
return this.iconBtn.classList
}
- public static override get styles(): CSSResultArray {
+ static override get styles(): CSSResultArray {
return [sharedStyles]
}
}
diff --git a/src/components/icon-control-bar/iconstyle.ts b/src/components/icon-control-bar/iconstyle.ts
index 8543095..f6c2288 100644
--- a/src/components/icon-control-bar/iconstyle.ts
+++ b/src/components/icon-control-bar/iconstyle.ts
@@ -10,6 +10,21 @@ export const sharedStyles: CSSResult = css`
--text-color-active: #ffffff;
}
+ .icon-with-state {
+ width: calc(240px / var(--hostDevicePixelRatio));
+ height: var(--auto-108px);
+ }
+
+ .icon-base.with-border {
+ width: var(--auto-104px);
+ height: var(--auto-104px);
+ }
+
+ .icon-base.group-without-border {
+ height: calc(110px / var(--hostDevicePixelRatio));
+ width: calc(126px / var(--hostDevicePixelRatio));
+ }
+
.active {
background-color: var(--background-active) !important;
color: var(--text-color-active) !important;
@@ -39,12 +54,8 @@ export const sharedStyles: CSSResult = css`
// height: 100%;
display: flex;
align-items: center;
- border-radius: 1.3vw;
- }
-
- .icon-with-state {
- width: 100%;
- height: 100%;
+ border-radius: var(--auto-16px);
+ justify-content: space-between;
}
.active::before,
@@ -63,20 +74,25 @@ export const sharedStyles: CSSResult = css`
font-weight: 500;
}
+ .icon-button.icon-base.group-without-border::before {
+ position: relative;
+ left: calc(50% - var(--auto-24px));
+ top: calc(50% - var(--auto-24px));
+ }
+
.more-info-icon {
display: flex;
align-items: center;
- width: 1.3vw;
- height: 1.3vw;
- position: relative;
- left: 4.8vw;
+ width: var(--auto-16px);
+ height: var(--auto-16px);
+ padding-inline-end: var(--auto-18px);
}
.more-info-icon::after {
- width: 1.3vw;
- height: 1.3vw;
- line-height: 1.3vw;
- font-size: 1.3vw;
+ width: var(--auto-16px);
+ height: var(--auto-16px);
+ line-height: var(--auto-16px);
+ font-size: var(--auto-16px);
}
.icon-base {
@@ -92,23 +108,18 @@ export const sharedStyles: CSSResult = css`
font-family: OPPOSans;
font-style: normal;
mix-blend-mode: normal;
- width: 8.3vw;
- // height: 1vh;
- font-size: 1.75vw;
- // line-height: 1.7vw;
+ width: var(--auto-100px);
+ font-size: calc(21px / var(--hostDevicePixelRatio));
}
.icon-name-shown,
.icon-name {
- // font-size: 20px;
- // height: 48px;
-
- font-size: 1.7vw;
- height: 4vw;
+ font-size: var(--auto-20px);
+ height: var(--auto-48px);
}
.inner {
- width: 8.67vw;
+ width: var(--auto-104px);
}
.active > p {
@@ -125,7 +136,7 @@ export const sharedStyles: CSSResult = css`
font-family: 'OPPOSans';
font-style: normal;
font-weight: 400;
- font-size: 1.75vw;
+ font-size: calc(21px / var(--hostDevicePixelRatio));
display: none;
}
@@ -147,19 +158,14 @@ export const sharedStyles: CSSResult = css`
font-family: 'OPPOSans';
font-style: normal;
font-weight: 400;
- font-size: 1.75vw;
+ font-size: calc(21px / var(--hostDevicePixelRatio));
}
.icon-button::before {
- // width: 48px;
- // height: 48px;
- // line-height: 48px;
- // font-size: 48px;
-
- width: 4vw;
- height: 4vw;
- line-height: 4vw;
- font-size: 4vw;
+ width: var(--auto-48px);
+ height: var(--auto-48px);
+ line-height: var(--auto-48px);
+ font-size: var(--auto-48px);
}
:host([disabled='true']) {
@@ -188,6 +194,11 @@ export const sharedStyles: CSSResult = css`
.icon-name-shown {
color: var(--text-color-lm);
}
+
+ .icon-base.group-without-border.actived {
+ background: rgba(255, 255, 255, 1) !important;
+ border-radius: var(--auto-16px);
+ }
}
@media (prefers-color-scheme: dark) {
@@ -202,5 +213,10 @@ export const sharedStyles: CSSResult = css`
.icon-name-shown {
color: var(--text-color-dm);
}
+
+ .icon-base.group-without-border.actived {
+ background: rgba(0, 0, 0, 0.13) !important;
+ border-radius: var(--auto-16px);
+ }
}
`