<ellipse-data-cricket></ellipse-data-cricket>

HTML custom element

CSS Selector Name Default Description
.ellipse-data-loading no CSS class implementation This class is applied to the <ellipse-data-cricket> widget tag while the widget contents are loading. A client could, by implementing it suitably, use it to hide the widget or help display a spinner over the widget during loading.
.ellipse-data-load-error no CSS class implementation This class is applied to the <ellipse-data-cricket> widget tag if the widget fails to load. A client could, by implementing it suitably, use it to hide the widget or display an error message to the user if the widget fails to load.
[disabled] 'opacity: 0.5' is applied This class is applied to the <ellipse-data-cricket> widget tag if the widget is disabled (using the disabled attribute). A client could target this CSS to alter the default appearance if the widget becomes disabled (eg. more/less opacity, or something different). Note that it is not possible to modify the disabled behaviour using this, just how the widget looks when disabled.
.ellipse-data-status-forthcoming no CSS class implementation This class is applied to the <ellipse-data-cricket> widget tag for type=winviz, while the match for the widget is forthcoming. A client could, by implementing it suitably with the other related status specifiers, use it to show the widget only for while the match is live.
.ellipse-data-status-live no CSS class implementation This class is applied to the <ellipse-data-cricket> widget tag for type=winviz, while the match for the widget is live. A client could, by implementing it suitably with the other related status specifiers, use it to show the widget only for while the match is live.
.ellipse-data-status-complete no CSS class implementation This class is applied to the <ellipse-data-cricket> widget tag for type=winviz, when the match for the widget is complete. A client could, by implementing it suitably with the other related status specifiers, use it to show the widget only for while the match is live.

Custom Property Name Default Description
--ed-common-root-element-font-size 1rem Root element font size. Fundamental relative unit of font size. For optimal display of the widget, leave at or close to 16px.
--ed-common-font-family 'Open Sans', sans-serif Font family which will be used for a text element unless any more specific font family custom property is applied for that particular text element. (For more details refer to the 'Font Loading' sub-section within the 'Getting Started' section.)
--ed-common-background-color #fff Background color for the widget.
--ed-common-border-radius calc(0.375 * var(--ed-common-root-element-font-size)) Border radius which will be used for an appropriate element unless any more specific border radius custom property is applied for that particular element.
--ed-common-home-innings-1 #558eff Color used to represent innings 1 for the home team.
--ed-common-home-innings-2 #073899 Color used to represent innings 2 for the home team.
--ed-common-away-innings-1 #610acc Color used to represent innings 1 for the away team.
--ed-common-away-innings-2 #af6dff Color used to represent innings 2 for the away team.
--ed-innings-edit-button-border-color #ebebed Border color of the user selectable innings button (eg. Manhattan)
--ed-innings-edit-button-hover-border-color var(--ed-innings-edit-button-border-color) Hover border color of the user selectable innings button (eg. Manhattan)
--ed-innings-edit-button-selected-border-color var(--ed-innings-edit-button-border-color) Selected color of the user selectable innings button (eg. Manhattan)
--ed-innings-edit-button-selected-hover-border-color var(--ed-innings-edit-button-border-color) Selected hover border color of the user selectable innings button (eg. Manhattan)
--ed-innings-view-label-background-color transparent Background color of the user innings label (eg. Manhattan Worm)
--ed-innings-view-label-border-color transparent Border color of the user innings label (eg. Manhattan Worm)
--ed-tabs-filter-button-color #0c5dff Color of the button which toggles the filter panel.
--ed-tabs-filter-button-background-color #e7efff Background color of the button which toggles the filter panel.
--ed-tabs-filter-button-border-color transparent Border color of the button which toggles the filter panel.
--ed-tabs-filter-button-hover-color var(--ed-tabs-filter-button-color) Hover color of the button which toggles the filter panel.
--ed-tabs-filter-button-hover-background-color #cedfff Hover background color of the button which toggles the filter panel.
--ed-tabs-filter-button-hover-border-color var(--ed-tabs-filter-button-border-color) Hover border color of the button which toggles the filter panel.
--ed-tabs-filter-button-active-color var(--ed-tabs-filter-button-color) Active color of the button which toggles the filter panel.
--ed-tabs-filter-button-active-background-color #9ebeff Active background color of the button which toggles the filter panel.
--ed-tabs-filter-button-active-border-color var(--ed-tabs-filter-button-border-color) Active border color of the button which toggles the filter panel.
--ed-buttons-color #0c5dff Color of the unselected buttons in a button group.
--ed-buttons-background-color #f8f8f8 Background color of the unselected buttons in a button group.
--ed-buttons-hover-color var(--ed-buttons-color) Hover color of the unselected buttons in a button group.
--ed-buttons-hover-background-color #e7efff Hover background color of the unselected buttons in a button group.
--ed-buttons-selected-color #fff Color of the selected buttons in a button group.
--ed-buttons-selected-background-color var(--ed-buttons-color) Background color of the selected buttons in a button group.
--ed-buttons-selected-hover-color var(--ed-buttons-selected-color) Hover color of the selected buttons in a button group.
--ed-buttons-selected-hover-background-color var(--ed-buttons-selected-background-color) Hover background color of the selected buttons in a button group.
--ed-buttons-border-color #ebebed Border color of the button group outer container.
--ed-buttons-border-radius calc(1.5 * var(--ed-common-root-element-font-size)) Border radius of the button group outer container.
--ed-chart-text-color #686b7a Color of the text elements used in the Chart component (eg. Manhattan).
--ed-chart-line-color #ebebed Color of the line elements used in the Chart component (eg. Manhattan).
--ed-chart-font-family var(--ed-common-font-family) Font family of the text elements in the Chart component (eg. Manhattan).
--ed-chart-font-weight var(--ed-common-font-weight) Font weight of the text elements in the Chart component (eg. Manhattan).
--ed-chart-font-style normal Font style of the text elements in the Chart component (eg. Manhattan).
--ed-chart-font-size calc(0.75 * var(--ed-common-root-element-font-size)) Font size of the text elements in the Chart component (eg. Manhattan).
--ed-checklist-checkmark-background-color #0c5dff Background color of checklist component's checkmark.
--ed-checklist-list-style-type none List style type of checklist component.
--ed-checklist-border-color #fff Border color of checklist component.
--ed-checklist-hover-border-color #c3c4ca Hover border color of checklist component.
--ed-checklist-active-border-color #0c5dff Active border color of checklist component.
--ed-checklist-selected-border-color #ebebed Selected border color of checklist component.
--ed-checklist-selected-hover-border-color var(--ed-checklist-hover-border-color) Selected hover border color of checklist component.
--ed-checklist-selected-active-border-color var(--ed-checklist-active-border-color) Selected active border color of checklist component.
--ed-field-background-color transparent Background color of field component (eg. Wagonwheel).
--ed-field-border-radius var(--ed-common-border-radius) Border radius of field component (eg. Wagonwheel).
--ed-field-zone-key-border-radius var(--ed-common-border-radius) Border radius of the zone key elements (eg. Wagonwheel).
--ed-filter-color #555 Color of the text in the filters.
--ed-filter-title-font-family var(--ed-common-font-family) Font family of the text in the filters.
--ed-filter-title-font-weight 700 Font weight of the text in the filters.
--ed-filter-title-font-style normal Font style of the text in the filters.
--ed-filter-title-text-transform none text-transform specifier applied to the filter title.
--ed-filter-title-letter-spacing normal letter-spacing specifier applied to the filter title.
--ed-filter-background-color #f8f8f8 Background color of the filter component.
--ed-filter-border-color var(--ed-filter-background-color) Border color of the filter component.
--ed-filter-hover-background-color transparent Hover background color of the filter component.
--ed-filter-hover-border-color #c3c4ca Hover border color of the filter component.
--ed-filter-opened-color var(--ed-filter-color) Color of the text in the filter when the filter is opened.
--ed-filter-opened-title-font-family var(--ed-filter-title-font-family) Font family of the text in the filter when the filter is opened.
--ed-filter-opened-title-font-weight var(--ed-filter-title-font-weight) Font weight of the text in the filter when the filter is opened.
--ed-filter-opened-title-font-style var(--ed-filter-title-font-style) Font style of the text in the filter when the filter is opened.
--ed-filter-opened-background-color transparent Background color of the filter component when the filter is opened.
--ed-filter-opened-border-color var(--ed-filter-border-color) Border color of the filter component when the filter is opened.
--ed-filter-opened-hover-background-color transparent Hover background color of the filter component when the filter is opened.
--ed-filter-opened-hover-border-color var(--ed-filter-hover-border-color) Hover border color of the filter component when the filter is opened.
--ed-footer-title-color #040921 Color of the title in the footer.
--ed-footer-title-font-family var(--ed-common-font-family) Font family of the title in the footer.
--ed-footer-title-font-weight 700 Font weight of the title in the footer.
--ed-footer-title-font-style normal Font style of the title in the footer.
--ed-footer-title-font-size calc(0.875 * var(--ed-common-root-element-font-size)) Font size of the title in the footer.
--ed-footer-suffix-color var(--ed-footer-title-color) Color of the suffix in the footer.
--ed-footer-suffix-font-family var(--ed-common-font-family) Font family of the title in the footer.
--ed-footer-suffix-font-weight 400 Font weight of the title in the footer.
--ed-footer-suffix-font-style normal Font style of the title in the footer.
--ed-footer-suffix-font-size calc(0.875 * var(--ed-common-root-element-font-size)) Font size of the title in the footer.
--ed-footer-border calc(0.075 * var(--ed-common-root-element-font-size)) solid #ebebed Border at the top of the footer.
--ed-header-title-color #040921 Color of the title in the header.
--ed-header-title-font-family var(--ed-common-font-family) Font family of the title in the header.
--ed-header-title-font-weight 700 Font weight of the title in the header.
--ed-header-title-font-style normal Font style of the title in the header.
--ed-header-title-font-size calc(0.875 * var(--ed-common-root-element-font-size)) Font size of the title in the header.
--ed-header-suffix-color var(--ed-header-title-color) Color of the suffix in the header.
--ed-header-suffix-font-family var(--ed-common-font-family) Font family of the suffix in the header.
--ed-header-suffix-font-weight 400 Font weight of the suffix in the header.
--ed-header-suffix-font-style normal Font style of the suffix in the header.
--ed-header-suffix-font-size calc(0.875 * var(--ed-common-root-element-font-size)) Font size of the suffix in the header.
--ed-header-border calc(0.075 * var(--ed-common-root-element-font-size)) solid #ebebed Border at the bottom of the header.
--ed-key-button-border-color #ebebed Border color of the unselected buttons in the key (eg. runs selector key).
--ed-key-button-hover-border-color #c3c4ca Hover border color of the unselected buttons in the key (eg. runs selector key).
--ed-key-button-selected-border-color #ebebed Border color of the selected buttons in the key (eg. runs selector key).
--ed-key-button-selected-hover-border-color #c3c4ca Hover border color of the selected buttons in the key (eg. runs selector key).
--ed-range-color #0c5dff Color of selected part of the range in the dual range selector component (eg. overs selector).
--ed-range-background-color #d4dfff Color of non-selected part of the range in the dual range selector component (eg. overs selector).
--ed-range-input-border-color #afb0b8 Border color of the input boxes in the dual range selector component (eg. overs selector).
--ed-select-background-color #fff Background color of the select dropdown (eg. grid metric selector).
--ed-select-border-color #ebebed Border color of the select dropdown (eg. grid metric selector).
--ed-select-hover-border-color var(--ed-select-border-color) Hover border color of the select dropdown (eg. grid metric selector).
--ed-slider-background-color #ebebed Background color of the slider component (eg. Manhattan).
--ed-slider-thumb-background-color #648dff Background color of the slider component thumb (eg. Manhattan).
--ed-slider-thumb-background-hover-color #0c5dff Hover background color of the slider component thumb (eg. Manhattan).
--ed-slider-border-radius calc(1 * var(--ed-common-root-element-font-size)) Border radius of the slider component (eg. Manhattan).
--ed-slider-thumb-border-radius var(--ed-slider-border-radius) Border radius of the slider component thumb (eg. Manhattan).
--ed-winviz-bar-graphic-height 20px Height of the WinViz bar layout bar graphic.
--ed-winviz-bar-team-graphic initial Set to 'none' to hide the team graphics on the WinViz bar layout.
--ed-winviz-bar-team-graphic-padding 10px The padding above and to the side of the team graphic.
--ed-winviz-bar-team-graphic-dimension 64px The height and width of the (square) team graphic.
--ed-winviz-bar-team-name-color var(--ed-common-text-color-dark) Team name color on the WinViz bar layout.
--ed-winviz-bar-team-name-font-family var(--ed-common-font-family) Team name font family on the WinViz bar layout.
--ed-winviz-bar-team-name-font-size calc(1 * var(--ed-common-root-element-font-size)) Team name font size on the WinViz bar layout.
--ed-winviz-bar-team-name-font-weight 400 Team name font weight on the WinViz bar layout.
--ed-winviz-bar-percent-color var(--ed-common-text-color-dark) Bar percent color on the WinViz bar layout.
--ed-winviz-bar-percent-font-family var(--ed-common-font-family) Bar percent font family on the WinViz bar layout.
--ed-winviz-bar-percent-font-size calc(1.875 * var(--ed-common-root-element-font-size)) Bar percent font size on the WinViz bar layout.
--ed-winviz-bar-percent-font-weight 700 Bar percent font weight on the WinViz bar layout.
--ed-winviz-bar-draw-color var(--ed-common-text-color-dark) Bar draw color on the WinViz bar layout.
--ed-winviz-bar-draw-font-family var(--ed-common-font-family) Bar draw font family on the WinViz bar layout.
--ed-winviz-bar-draw-font-size calc(0.875 * var(--ed-common-root-element-font-size)) Bar draw font size on the WinViz bar layout.
--ed-winviz-bar-draw-font-weight 400 Bar draw font weight on the WinViz bar layout.
--ed-winviz-bar-draw-percent-font-weight 700 Bar draw percent font weight on the WinViz bar layout.
--ed-winviz-donut-label-color var(--ed-common-text-color-dark) Text label color on the WinViz donut layout.
--ed-winviz-donut-label-font-family var(--ed-common-font-family) Text label font family on the WinViz donut layout.
--ed-winviz-donut-label-font-size calc(0.875 * var(--ed-common-root-element-font-size)) Text label font size on the WinViz donut layout.
--ed-winviz-donut-label-font-weight 400 Text label font weight on the WinViz donut layout.
--ed-winviz-donut-percent-font-weight 700 Text label percent font weight on the WinViz donut layout.
--ed-scorecard-partnership-runs-player-1 #0c5dff Color of the bar representing the runs scored by the first player in each partnership on the Scorecard Partnerships tab. Should be specified using a six-digit hex code prefixed with a # (eg. #0c5dff).
--ed-scorecard-partnership-extras #ffaf21 Color of the bar representing the extras during in each partnership on the Scorecard Partnerships tab. Should be specified using a six-digit hex code prefixed with a # (eg. #ffaf21).
--ed-scorecard-partnership-runs-player-2 #86aeff Color of the bar representing the runs scored by the second player in each partnership on the Scorecard Partnerships tab. Should be specified using a six-digit hex code prefixed with a # (eg. #86aeff).
--ed-match-strip-nav-button-horizontal-padding 30px Horizontal padding of the navigation buttons in the match strip. (Note that these buttons will not show on mobile devices.)
--ed-match-strip-match-box-min-width 300px Minimum width of the match boxes in the match strip. Note that any text content which does not fit within this width will be truncated with an ellipsis.
--ed-match-strip-match-box-max-width 300px Maximum width of the match boxes in the match strip.
--ed-match-strip-match-box-border-radius calc(0.5 * var(--ed-common-root-element-font-size)) Border radius of the match boxes in the match strip.
--ed-match-strip-result-box-border-radius calc(0.25 * var(--ed-common-root-element-font-size)) Border radius of the result boxes (within the match boxes) in the match strip.
--ed-match-strip-border-color #ebebed Border color used within match boxes in the match strip.
--ed-match-strip-arrow-icon-color #afb0b8 Color of the arrow icons on the navigation buttons in the match strip. (Note that navigation buttons will not show on mobile devices.)
--ed-match-strip-arrow-icon-hover-color #404456 Hover color of the arrow icons on the navigation buttons in the match strip. (Note that navigation buttons will not show on mobile devices.)
--ed-match-strip-arrow-icon-active-color #040921 Active color of the arrow icons on the navigation buttons in the match strip. (Note that navigation buttons will not show on mobile devices.)
--ed-match-strip-nav-button-background-color #fff Background color of the navigation buttons in the match strip. (Note that navigation buttons will not show on mobile devices.)
--ed-match-strip-matches-box-background-color #f8f8f8 Background color of the match boxes container in the match strip. (Note that this area will not show when match-box-display is set to 'terraced'.)
--ed-match-strip-match-box-background-color #fff Background color of the match boxes in the match strip.
--ed-match-strip-result-box-background-color #f5f5f6 Background color of the result boxes (within the match boxes) in the match strip.
--ed-match-strip-top-bar-date-color #040921 Color of the date text in the top bar of the match boxes in the match strip.
--ed-match-strip-result-box-text-color #040921 Color of the text in the result boxes (within the match boxes) in the match strip.
--ed-match-strip-team-info-color #040921 Color of the team info text in the match boxes in the match strip. (Includes the team names and scores.)
--ed-match-strip-match-time-location-color #686b7a Color of the match time and location text at the bottom of the match boxes in the match strip.
--ed-match-strip-match-context-color #686b7a Color of the match context text at the bottom of the match boxes in the match strip. (Includes the match title and competition name.)
--ed-match-strip-match-button-background-color transparent Background color of the match buttons in the match strip.
--ed-match-strip-match-button-text-color #0c5dff Color of the text in the match buttons in the match strip.
--ed-match-strip-match-button-border-color #0c5dff Border color of the match buttons in the match strip.
--ed-match-strip-match-button-border-radius calc(0.25 * var(--ed-common-root-element-font-size)) Border radius of the match buttons in the match strip.
--ed-match-strip-match-button-hover-background-color #e7efff Hover background color of the match buttons in the match strip.
--ed-match-strip-match-button-hover-text-color #0a4acc Hover color of the text in the match buttons in the match strip.
--ed-match-strip-match-button-active-background-color #cedfff Active background color of the match buttons in the match strip.
--ed-match-strip-match-button-active-text-color #0a4acc Active color of the text in the match buttons in the match strip.
--ed-match-strip-team-image-placeholder -CricViz provided fallback image- This should be a 'url()' data url. This data url might be a base64 encoded SVG or PNG image. The image should be square, and will be rendered at 24px by 24px. It should extend to the edges where appropriate, as padding will be provided exterior to the image. This image will be used as a fallback for the team images in the match strip in cases where the team image is not provided by the feed or fails to load properly.
--ed-mvp-player-image-placeholder -CricViz provided fallback image- This should be a 'url()' data url. This data url might be a base64 PNG image. The image should be square, and will be rendered at up to 224px by 224px. It should extend to the edges where appropriate, as padding will be provided exterior to the image. This image will be used as a fallback for the player images in the most valuable player widget in cases where the team image is not provided by the feed or fails to load properly.
--ed-mvp-team-image-placeholder -CricViz provided fallback image- This should be a 'url()' data url. This data url might be a base64 encoded SVG or PNG image. The image should be square, and will be rendered at up to 90px by 90px. It should extend to the edges where appropriate, as padding will be provided exterior to the image. This image will be used as a fallback for the team images in the most valuable player widget in cases where the team image is not provided by the feed or fails to load properly.
--ed-mvp-leader-background-color transparent Background color of the leader in the mvp widget.
--ed-mvp-leader-player-name-text-color #040921 Color of the text for the player name in the mvp leader.
--ed-mvp-leader-team-name-text-color #686b7a Color of the text for the team name in the mvp leader.
--ed-mvp-leader-circle-background-color transparent Background color of the leader circle (visible when player-images attribute is set to 'leader-circle') in the mvp widget.
--ed-mvp-leader-circle-border-color #ebebed Border color of the leader circle (visible when player-images attribute is set to 'leader-circle') in the mvp widget.
--ed-mvp-leader-number-text-color #fff Color of the numeric '1' text in the mvp leader.
--ed-mvp-leader-number-box-background-color #007db8 Background color of the numeric '1' in the mvp leader.
--ed-mvp-leader-category-title-text-color #040921 Color of the category title text in the mvp leader.
--ed-mvp-leader-category-value-text-color #040921 Color of the category value text in the mvp leader.
--ed-mvp-leader-category-border-color #ebebed Border color of the category boxes in the mvp leader.
--ed-mvp-leader-category-background-color #f8f8f8 Background color of the category boxes in the mvp leader.
--ed-mvp-info-icon-primary-color #0c5dff Primary color of the info icon in the mvp leader.
--ed-mvp-info-icon-secondary-color #e7efff Secondary color of the info icon in the mvp leader.
--ed-mvp-info-icon-pulse (not set) Overrides animation of the info icon in the mvp leader. Set to 'none' to disable the pulsing effect on the header/footer info icon. (Only supports disabling via 'none'.)