@marioschmidt/design-system-components 1.0.70

package/dist/www/css/shared/colorprimitive.css

@@ -0,0 +1,139 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * 
+ * BILD Design System Tokens v1.0.70
+ * Generated by Style Dictionary v4.0.0
+ * 
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ * 
+ * Documentation: undefined
+ */
+
+:root,
+:host {
+  /* ============================================
+     BILD
+     ============================================ */
+
+  /* BILD - red */
+  --color-bild-red-50: #DD0000;
+  --color-bild-red-35: #AF0002;
+  --color-bild-red-53: #F52D2D;
+
+  /* BILD - purple */
+  --color-bild-purple-20: #551937;
+
+  /* BILD - alpha */
+  --alpha-red-50-a-80: rgba(221, 0, 0, 0.8);
+
+
+  /* ============================================
+     SHARED
+     ============================================ */
+
+  /* Shared - neutral */
+  --color-neutral-15: #232629;
+  --color-neutral-100: #FFFFFF;
+  --color-neutral-85: #CED4DA;
+  --color-neutral-35: #4B525A;
+  --color-neutral-25: #343C41;
+  --color-neutral-60: #8C9196;
+  --color-neutral-96: #F2F4F5;
+  --color-neutral-93: #E9ECEF;
+  --color-neutral-73: #AEB4B9;
+  --color-neutral-45: #666B70;
+  --color-neutral-10: #1C1C1C;
+  --color-neutral-20: #2C3138;
+  --color-neutral-0: #000000;
+
+  /* Shared - orange */
+  --color-orange-67: #FD8227;
+
+  /* Shared - green */
+  --color-green-70: #00C373;
+  --color-green-63: #00AF67;
+  --color-green-93: #CEF4E4;
+  --color-green-40: #006E3E;
+  --color-green-56: #18995C;
+
+  /* Shared - yellow */
+  --color-yellow-80: #FFBF00;
+
+  /* Shared - alpha */
+  --alpha-neutral-85-a-50: rgba(206, 212, 218, 0.5);
+  --alpha-green-93-a-50: rgba(206, 244, 228, 0.5);
+  --color-green-56-a-50: rgba(0, 155, 90, 0.5);
+  --alpha-black-20: rgba(0, 0, 0, 0.2);
+  --alpha-black-10: rgba(0, 0, 0, 0.1);
+  --alpha-black-60: rgba(0, 0, 0, 0.6);
+  --alpha-black-30: rgba(0, 0, 0, 0.3);
+  --alpha-black-70: rgba(0, 0, 0, 0.7);
+  --alpha-white-10: rgba(255, 255, 255, 0.1);
+  --alpha-white-20: rgba(255, 255, 255, 0.2);
+  --alpha-white-30: rgba(255, 255, 255, 0.3);
+  --alpha-white-60: rgba(255, 255, 255, 0.6);
+  --alpha-white-70: rgba(255, 255, 255, 0.7);
+  --alpha-white-35: rgba(255, 255, 255, 0.35);
+  --alpha-black-80: rgba(0, 0, 0, 0.8);
+  --alpha-white-80: rgba(255, 255, 255, 0.8);
+  --alpha-black-35: rgba(0, 0, 0, 0.35);
+  --alpha-black-0: rgba(0, 0, 0, 0);
+  --alpha-black-50: rgba(0, 0, 0, 0.5);
+  --alpha-black-5: rgba(0, 0, 0, 0.05);
+  --alpha-white-0: rgba(255, 255, 255, 0);
+
+
+  /* ============================================
+     PARTNER
+     ============================================ */
+
+  --color-partner-fitbook: #FF97B7;
+  --color-partner-petbook: #B9DB91;
+  --color-partner-myhome: #66CCCC;
+  --color-partner-travelbook: #8EF0ED;
+  --color-partner-techbook: #93E4FF;
+  --color-partner-kaufberater: #55476E;
+  --color-bz-red-50: #E3001B;
+  --color-aubi-red-50: #F00000;
+  --color-cobi-red-50: #DC231C;
+
+
+  /* ============================================
+     SPORTBILD
+     ============================================ */
+
+  /* SportBILD - blue */
+  --color-spobi-blue-98: #F7F9FD;
+  --color-spobi-blue-81: #BDCADB;
+  --color-spobi-blue-29: #174482;
+  --color-spobi-blue-16: #0A2750;
+  --color-spobi-blue-10: #081828;
+  --color-spobi-blue-38: #315998;
+
+  /* SportBILD - red */
+  --color-spobi-red-50: #E52528;
+
+  /* SportBILD - alpha */
+  --color-spobi-blue-16-a-0: rgba(10, 39, 80, 0);
+  --color-spobi-blue-16-a-70: rgba(10, 39, 80, 0.7);
+
+
+  /* ============================================
+     OPACITY
+     ============================================ */
+
+  --opacity-05: 0.05;
+  --opacity-10: 0.1;
+  --opacity-20: 0.2;
+  --opacity-40: 0.4;
+  --opacity-60: 0.6;
+  --opacity-80: 0.8;
+  --opacity-100: 1;
+  --opacity-90: 0.9;
+  --opacity-30: 0.3;
+  --opacity-50: 0.5;
+  --opacity-00: 0;
+  --opacity-70: 0.7;
+
+}

package/dist/www/css/shared/fontprimitive.css

@@ -0,0 +1,84 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * 
+ * BILD Design System Tokens v1.0.70
+ * Generated by Style Dictionary v4.0.0
+ * 
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ * 
+ * Documentation: undefined
+ */
+
+:root,
+:host {
+  /* ============================================
+     FONTFAMILY
+     ============================================ */
+
+  /* FontFamily - BILD */
+  --font-family-gotham-xnarrow: Gotham XNarrow;
+  --font-family-gotham-cond: Gotham Condensed;
+  --font-family-gotham: Gotham;
+
+  /* FontFamily - Advertorial */
+  --font-family-lucida-grande: Lucida Grande;
+
+  /* FontFamily - SportBILD */
+  --font-family-antenna-extra-cond: AntennaExtraCond;
+  --font-family-antenna-cond: AntennaCond;
+  --font-family-inter: Inter;
+
+
+  /* ============================================
+     FONTWEIGHT
+     ============================================ */
+
+  --font-weight-bold: 700;
+  --font-weight-extra-black: 900;
+  --font-weight-book: 400;
+  --font-weight-ultra: 1000;
+  --font-weight-black: 800;
+  --font-weight-book-350: 350;
+  --font-weight-semi-bold: 600;
+  --font-weight-thin: 100;
+  --font-weight-light: 300;
+  --font-weight-extra-light: 200;
+  --font-weight-medium: 500;
+
+
+  /* ============================================
+     LETTERSPACING
+     ============================================ */
+
+  --letter-space-neg-0-p-25: -0.25px;
+  --letter-space-0: 0px;
+  --letter-space-1: 1px;
+  --letter-space-0-p-5: 0.5px;
+  --letter-space-0-p-25: 0.25px;
+  --letter-space-neg-0-p-5: -0.5px;
+  --letter-space-2: 2px;
+  --letter-space-neg-1: -1px;
+  --letter-space-neg-2: -2px;
+  --letter-space-3: 3px;
+  --letter-space-neg-3: -3px;
+
+
+  /* ============================================
+     FONTWEIGHTSTRING
+     ============================================ */
+
+  --st-font-weight-ultra: 1000;
+  --st-font-weight-extra-black: 900;
+  --st-font-weight-black: 800;
+  --st-font-weight-bold: 700;
+  --st-font-weight-semi-bold: 600;
+  --st-font-weight-medium: 500;
+  --st-font-weight-st-book: 400;
+  --st-font-weight-book-350: 350;
+  --st-font-weight-extra-light: 200;
+  --st-font-weight-thin: 100;
+  --st-font-weight-bold-italic: 700;
+  --st-font-weight-black-italic: 900;
+
+}

package/dist/www/css/shared/primitives.css

@@ -0,0 +1,314 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * SHARED Design System Tokens v1.0.70
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Bundle: Primitives (Base values: space, size, colors, fonts)
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ *
+ * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
+ */
+
+/* === COLORPRIMITIVE === */
+
+:root,
+:host {
+  /* ============================================
+     BILD
+     ============================================ */
+
+  /* BILD - red */
+  --color-bild-red-50: #DD0000;
+  --color-bild-red-35: #AF0002;
+  --color-bild-red-53: #F52D2D;
+
+  /* BILD - purple */
+  --color-bild-purple-20: #551937;
+
+  /* BILD - alpha */
+  --alpha-red-50-a-80: rgba(221, 0, 0, 0.8);
+
+
+  /* ============================================
+     SHARED
+     ============================================ */
+
+  /* Shared - neutral */
+  --color-neutral-15: #232629;
+  --color-neutral-100: #FFFFFF;
+  --color-neutral-85: #CED4DA;
+  --color-neutral-35: #4B525A;
+  --color-neutral-25: #343C41;
+  --color-neutral-60: #8C9196;
+  --color-neutral-96: #F2F4F5;
+  --color-neutral-93: #E9ECEF;
+  --color-neutral-73: #AEB4B9;
+  --color-neutral-45: #666B70;
+  --color-neutral-10: #1C1C1C;
+  --color-neutral-20: #2C3138;
+  --color-neutral-0: #000000;
+
+  /* Shared - orange */
+  --color-orange-67: #FD8227;
+
+  /* Shared - green */
+  --color-green-70: #00C373;
+  --color-green-63: #00AF67;
+  --color-green-93: #CEF4E4;
+  --color-green-40: #006E3E;
+  --color-green-56: #18995C;
+
+  /* Shared - yellow */
+  --color-yellow-80: #FFBF00;
+
+  /* Shared - alpha */
+  --alpha-neutral-85-a-50: rgba(206, 212, 218, 0.5);
+  --alpha-green-93-a-50: rgba(206, 244, 228, 0.5);
+  --color-green-56-a-50: rgba(0, 155, 90, 0.5);
+  --alpha-black-20: rgba(0, 0, 0, 0.2);
+  --alpha-black-10: rgba(0, 0, 0, 0.1);
+  --alpha-black-60: rgba(0, 0, 0, 0.6);
+  --alpha-black-30: rgba(0, 0, 0, 0.3);
+  --alpha-black-70: rgba(0, 0, 0, 0.7);
+  --alpha-white-10: rgba(255, 255, 255, 0.1);
+  --alpha-white-20: rgba(255, 255, 255, 0.2);
+  --alpha-white-30: rgba(255, 255, 255, 0.3);
+  --alpha-white-60: rgba(255, 255, 255, 0.6);
+  --alpha-white-70: rgba(255, 255, 255, 0.7);
+  --alpha-white-35: rgba(255, 255, 255, 0.35);
+  --alpha-black-80: rgba(0, 0, 0, 0.8);
+  --alpha-white-80: rgba(255, 255, 255, 0.8);
+  --alpha-black-35: rgba(0, 0, 0, 0.35);
+  --alpha-black-0: rgba(0, 0, 0, 0);
+  --alpha-black-50: rgba(0, 0, 0, 0.5);
+  --alpha-black-5: rgba(0, 0, 0, 0.05);
+  --alpha-white-0: rgba(255, 255, 255, 0);
+
+
+  /* ============================================
+     PARTNER
+     ============================================ */
+
+  --color-partner-fitbook: #FF97B7;
+  --color-partner-petbook: #B9DB91;
+  --color-partner-myhome: #66CCCC;
+  --color-partner-travelbook: #8EF0ED;
+  --color-partner-techbook: #93E4FF;
+  --color-partner-kaufberater: #55476E;
+  --color-bz-red-50: #E3001B;
+  --color-aubi-red-50: #F00000;
+  --color-cobi-red-50: #DC231C;
+
+
+  /* ============================================
+     SPORTBILD
+     ============================================ */
+
+  /* SportBILD - blue */
+  --color-spobi-blue-98: #F7F9FD;
+  --color-spobi-blue-81: #BDCADB;
+  --color-spobi-blue-29: #174482;
+  --color-spobi-blue-16: #0A2750;
+  --color-spobi-blue-10: #081828;
+  --color-spobi-blue-38: #315998;
+
+  /* SportBILD - red */
+  --color-spobi-red-50: #E52528;
+
+  /* SportBILD - alpha */
+  --color-spobi-blue-16-a-0: rgba(10, 39, 80, 0);
+  --color-spobi-blue-16-a-70: rgba(10, 39, 80, 0.7);
+
+
+  /* ============================================
+     OPACITY
+     ============================================ */
+
+  --opacity-05: 0.05;
+  --opacity-10: 0.1;
+  --opacity-20: 0.2;
+  --opacity-40: 0.4;
+  --opacity-60: 0.6;
+  --opacity-80: 0.8;
+  --opacity-100: 1;
+  --opacity-90: 0.9;
+  --opacity-30: 0.3;
+  --opacity-50: 0.5;
+  --opacity-00: 0;
+  --opacity-70: 0.7;
+
+}
+
+/* === FONTPRIMITIVE === */
+
+:root,
+:host {
+  /* ============================================
+     FONTFAMILY
+     ============================================ */
+
+  /* FontFamily - BILD */
+  --font-family-gotham-xnarrow: Gotham XNarrow;
+  --font-family-gotham-cond: Gotham Condensed;
+  --font-family-gotham: Gotham;
+
+  /* FontFamily - Advertorial */
+  --font-family-lucida-grande: Lucida Grande;
+
+  /* FontFamily - SportBILD */
+  --font-family-antenna-extra-cond: AntennaExtraCond;
+  --font-family-antenna-cond: AntennaCond;
+  --font-family-inter: Inter;
+
+
+  /* ============================================
+     FONTWEIGHT
+     ============================================ */
+
+  --font-weight-bold: 700;
+  --font-weight-extra-black: 900;
+  --font-weight-book: 400;
+  --font-weight-ultra: 1000;
+  --font-weight-black: 800;
+  --font-weight-book-350: 350;
+  --font-weight-semi-bold: 600;
+  --font-weight-thin: 100;
+  --font-weight-light: 300;
+  --font-weight-extra-light: 200;
+  --font-weight-medium: 500;
+
+
+  /* ============================================
+     LETTERSPACING
+     ============================================ */
+
+  --letter-space-neg-0-p-25: -0.25px;
+  --letter-space-0: 0px;
+  --letter-space-1: 1px;
+  --letter-space-0-p-5: 0.5px;
+  --letter-space-0-p-25: 0.25px;
+  --letter-space-neg-0-p-5: -0.5px;
+  --letter-space-2: 2px;
+  --letter-space-neg-1: -1px;
+  --letter-space-neg-2: -2px;
+  --letter-space-3: 3px;
+  --letter-space-neg-3: -3px;
+
+
+  /* ============================================
+     FONTWEIGHTSTRING
+     ============================================ */
+
+  --st-font-weight-ultra: 1000;
+  --st-font-weight-extra-black: 900;
+  --st-font-weight-black: 800;
+  --st-font-weight-bold: 700;
+  --st-font-weight-semi-bold: 600;
+  --st-font-weight-medium: 500;
+  --st-font-weight-st-book: 400;
+  --st-font-weight-book-350: 350;
+  --st-font-weight-extra-light: 200;
+  --st-font-weight-thin: 100;
+  --st-font-weight-bold-italic: 700;
+  --st-font-weight-black-italic: 900;
+
+}
+
+/* === SIZEPRIMITIVE === */
+
+:root,
+:host {
+  /* ============================================
+     OTHER
+     ============================================ */
+
+  --size-6-x: 48px;
+  --size-3-x: 24px;
+  --size-1-x: 8px;
+  --size-0-p-25-x: 2px;
+  --size-0-p-5-x: 4px;
+  --size-2-x: 16px;
+  --size-4-p-5-x: 36px;
+  --size-5-x: 40px;
+  --size-3-p-5-x: 28px;
+  --size-2-p-5-x: 20px;
+  --size-12-p-5-x: 100px;
+  --size-2-p-75-x: 22px;
+  --size-3-p-25-x: 26px;
+  --size-4-x: 32px;
+  --size-3-p-75-x: 30px;
+  --size-2-p-25-x: 18px;
+  --size-7-x: 56px;
+  --size-1-p-5-x: 12px;
+  --size-0-p-75-x: 6px;
+  --size-22-p-5-x: 180px;
+  --size-40-x: 320px;
+  --size-8-x: 64px;
+  --size-11-p-5-x: 92px;
+  --size-1-p-75-x: 14px;
+  --size-5-p-25-x: 42px;
+  --size-1-p-25-x: 10px;
+  --size-80-x: 640px;
+  --size-17-p-5-x: 140px;
+  --size-20-x: 160px;
+  --size-128-x: 1024px;
+  --size-124-x: 992px;
+  --size-12-x: 96px;
+  --size-35-x: 280px;
+  --size-15-x: 120px;
+  --size-16-p-25: 130px;
+  --size-87-p-5-x: 700px;
+  --size-10-x: 80px;
+  --size-30-x: 240px;
+  --size-25-x: 200px;
+  --size-168-x: 1344px;
+  --size-60-x: 480px;
+  --size-9-x: 72px;
+  --size-27-p-5-x: 220px;
+  --size-50-x: 400px;
+  --size-116-p-25-x: 930px;
+  --size-18-p-5-x: 148px;
+  --size-100-x: 800px;
+  --size-0-x: 0px;
+  --size-0-p-125-x: 1px;
+
+}
+
+/* === SPACEPRIMITIVE === */
+
+:root,
+:host {
+  /* ============================================
+     OTHER
+     ============================================ */
+
+  --space-1-x: 8px;
+  --space-0-p-5-x: 4px;
+  --space-0-p-25-x: 2px;
+  --space-2-x: 16px;
+  --space-1-p-5-x: 12px;
+  --space-4-x: 32px;
+  --space-3-x: 24px;
+  --space-6-x: 48px;
+  --space-8-x: 64px;
+  --space-9-x: 72px;
+  --space-5-x: 40px;
+  --space-0-x: 0px;
+  --space-10-x: 80px;
+  --space-20-x: 160px;
+  --space-2-p-5-x: 20px;
+  --space-neg-0-p-25-x: -2px;
+  --space-0-p-75-x: 6px;
+  --space-1-p-25-x: 10px;
+  --space-2-p-75-x: 22px;
+  --space-4-p-5-x: 36px;
+  --space-7-p-5-x: 60px;
+  --space-12-x: 96px;
+  --space-1-p-75-x: 14px;
+  --space-8-p-5-x: 68px;
+  --space-3-p-5-x: 28px;
+
+}

package/dist/www/css/shared/sizeprimitive.css

@@ -0,0 +1,69 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * 
+ * BILD Design System Tokens v1.0.70
+ * Generated by Style Dictionary v4.0.0
+ * 
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ * 
+ * Documentation: undefined
+ */
+
+:root,
+:host {
+  /* ============================================
+     OTHER
+     ============================================ */
+
+  --size-6-x: 48px;
+  --size-3-x: 24px;
+  --size-1-x: 8px;
+  --size-0-p-25-x: 2px;
+  --size-0-p-5-x: 4px;
+  --size-2-x: 16px;
+  --size-4-p-5-x: 36px;
+  --size-5-x: 40px;
+  --size-3-p-5-x: 28px;
+  --size-2-p-5-x: 20px;
+  --size-12-p-5-x: 100px;
+  --size-2-p-75-x: 22px;
+  --size-3-p-25-x: 26px;
+  --size-4-x: 32px;
+  --size-3-p-75-x: 30px;
+  --size-2-p-25-x: 18px;
+  --size-7-x: 56px;
+  --size-1-p-5-x: 12px;
+  --size-0-p-75-x: 6px;
+  --size-22-p-5-x: 180px;
+  --size-40-x: 320px;
+  --size-8-x: 64px;
+  --size-11-p-5-x: 92px;
+  --size-1-p-75-x: 14px;
+  --size-5-p-25-x: 42px;
+  --size-1-p-25-x: 10px;
+  --size-80-x: 640px;
+  --size-17-p-5-x: 140px;
+  --size-20-x: 160px;
+  --size-128-x: 1024px;
+  --size-124-x: 992px;
+  --size-12-x: 96px;
+  --size-35-x: 280px;
+  --size-15-x: 120px;
+  --size-16-p-25: 130px;
+  --size-87-p-5-x: 700px;
+  --size-10-x: 80px;
+  --size-30-x: 240px;
+  --size-25-x: 200px;
+  --size-168-x: 1344px;
+  --size-60-x: 480px;
+  --size-9-x: 72px;
+  --size-27-p-5-x: 220px;
+  --size-50-x: 400px;
+  --size-116-p-25-x: 930px;
+  --size-18-p-5-x: 148px;
+  --size-100-x: 800px;
+  --size-0-x: 0px;
+  --size-0-p-125-x: 1px;
+
+}

package/dist/www/css/shared/spaceprimitive.css

@@ -0,0 +1,45 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * 
+ * BILD Design System Tokens v1.0.70
+ * Generated by Style Dictionary v4.0.0
+ * 
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ * 
+ * Documentation: undefined
+ */
+
+:root,
+:host {
+  /* ============================================
+     OTHER
+     ============================================ */
+
+  --space-1-x: 8px;
+  --space-0-p-5-x: 4px;
+  --space-0-p-25-x: 2px;
+  --space-2-x: 16px;
+  --space-1-p-5-x: 12px;
+  --space-4-x: 32px;
+  --space-3-x: 24px;
+  --space-6-x: 48px;
+  --space-8-x: 64px;
+  --space-9-x: 72px;
+  --space-5-x: 40px;
+  --space-0-x: 0px;
+  --space-10-x: 80px;
+  --space-20-x: 160px;
+  --space-2-p-5-x: 20px;
+  --space-neg-0-p-25-x: -2px;
+  --space-0-p-75-x: 6px;
+  --space-1-p-25-x: 10px;
+  --space-2-p-75-x: 22px;
+  --space-4-p-5-x: 36px;
+  --space-7-p-5-x: 60px;
+  --space-12-x: 96px;
+  --space-1-p-75-x: 14px;
+  --space-8-p-5-x: 68px;
+  --space-3-p-5-x: 28px;
+
+}

package/dist/www/css/sportbild/components/_dsysdoc.css

@@ -0,0 +1,43 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * SPORTBILD Design System Tokens v1.0.70
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Sportbild | Bundle: _DSysDoc Component Tokens
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ *
+ * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
+ */
+
+/* === COLOR TOKENS (LIGHT MODE) === */
+
+[data-color-brand="sportbild"][data-theme="light"],
+:host([data-color-brand="sportbild"][data-theme="light"]) {
+  /* ============================================
+     OTHER
+     ============================================ */
+
+  --dsys-docs-label-text-surface-color-primary-primitive-name: BILD100;
+  --dsys-docs-label-text-color-mode: (Light Mode);
+  --ds-doc-spacing-item-bg-color: rgba(221, 0, 0, 0.1);
+  --ds-doc-spacing-item-border-color: rgba(221, 0, 0, 0.5);
+
+}
+
+/* === COLOR TOKENS (DARK MODE) === */
+
+[data-color-brand="sportbild"][data-theme="dark"],
+:host([data-color-brand="sportbild"][data-theme="dark"]) {
+  /* ============================================
+     OTHER
+     ============================================ */
+
+  --dsys-docs-label-text-surface-color-primary-primitive-name: BILD010;
+  --dsys-docs-label-text-color-mode: (Dark Mode);
+  --ds-doc-spacing-item-bg-color: rgba(255, 255, 255, 0.2);
+  --ds-doc-spacing-item-border-color: rgba(255, 255, 255, 0.8);
+
+}