@regulaforensics/vp-frontend-face-components 6.5.1629-nightly → 6.5.1631-nightly

package/README.md

@@ -256,6 +256,109 @@ component.settings = {
 
 ```
 
+### CSS Parts
+To customize the appearance, use the part attribute and define the desired CSS properties. (Note: The specificity of the ::part styles is greater than that of the styles set via settings). Examples:
+
+```css
+
+/** general component overlay */
+face-liveness {
+    background-color: #e6e6e6;
+}
+
+/** web component container */
+face-liveness::part(wc-container) {
+    box-shadow: none;
+    border-radius: 0;
+}
+
+/** instruction screen */
+face-liveness::part(onboarding-screen-title) {
+    text-decoration: underline;
+}
+face-liveness::part(onboarding-screen-subtitle) {
+    text-decoration: underline;
+}
+face-liveness::part(onboarding-screen-start-button) {
+    background-color: #7c7c7c;
+}
+face-liveness::part(onboarding-screen-start-button):hover {
+    background-color: #bd7dff;
+}
+face-liveness::part(onboarding-screen-start-button) {
+    color: #000;
+}
+face-liveness::part(onboarding-screen-start-button):hover {
+    color: #000;
+}
+
+/** instruction screen icons */
+/** you can set any image from url */
+face-liveness::part(onboarding-screen-illumination) {
+    background: #000;
+}
+face-liveness::part(onboarding-screen-accessories) {
+    background: #000;
+}
+face-liveness::part(onboarding-screen-camera-level) {
+    background: #000;
+}
+
+/** camera mode svg's */
+face-liveness::part(camera-screen-sector-target) {
+    border-left-color: #000;
+}
+face-liveness::part(camera-screen-stroke-normal) {
+    stroke: #000;
+}
+face-liveness::part(camera-screen-sector-active) {
+    stroke: #000;
+}
+
+/** message plate */
+face-liveness::part(camera-screen-front-hint-label) {
+    background: #000;
+    color: yellow;
+}
+
+/** spinner */
+face-liveness::part(processing-screen-progress)::before {
+    border-top-color: #000;
+}
+/** success image */
+face-liveness::part(success-screen-image) {
+    background: #000;
+}
+
+/** retry screen */
+face-liveness::part(retry-screen-environment-text) {
+    text-decoration: underline;
+}
+face-liveness::part(retry-screen-environment-image) {
+    background: rgb(88, 82, 82);
+}
+face-liveness::part(retry-screen-person-text) {
+    text-decoration: underline;
+}
+face-liveness::part(retry-screen-person-image) {
+    background: rgb(88, 82, 82);
+}
+/** retry button */
+face-liveness::part(retry-screen-retry-button) {
+    background: rgb(88, 82, 82);
+}
+face-liveness::part(retry-screen-title-text) {
+    color: rgb(88, 82, 82);
+    text-decoration: underline;
+}
+face-liveness::part(retry-screen-subtitle-text) {
+    color: rgb(88, 82, 82);
+    text-decoration: underline;
+}
+```
+
+For more details about ::part() CSS pseudo-elements, see the article at [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).
+
 
 ## Events