Skip to content

info ​

new css variables ​

🌐 Global Container Level ​

css
--ca-widget-info-container-min-height
--ca-widget-info-container-bg /* background color */
--ca-widget-info-container-color /* text color */
--ca-widget-info-container-border-radius
--ca-widget-info-container-margin
--ca-widget-info-container-padding

🧱 Grid / Layout Area ​

css
--ca-widget-info-area-padding
--ca-widget-info-area-gap
--ca-widget-info-area-bg /* background color */
--ca-widget-info-area-box-shadow
--ca-widget-info-master-grid-size
--ca-widget-info-grid-size

πŸ“¦ Box inside Grid ​

css
--ca-widget-info-box-bg /* background color */
--ca-widget-info-box-padding
--ca-widget-info-box-gap
--ca-widget-info-box-border-radius

πŸ”  Heading (h4) inside Box ​

css
--ca-widget-info-box-h4-margin
--ca-widget-info-box-h4-font-size
--ca-widget-info-box-h4-line-height
--ca-widget-info-box-h4-font-weight
--ca-widget-info-box-h4-color /* text color */

πŸ“Š Table + Cells ​

css
--ca-widget-info-box-td-text-align
--ca-widget-info-box-td-font-size
--ca-widget-info-box-td-line-height
--ca-widget-info-box-td-padding
--ca-widget-info-box-td-first-child-color /* text color */
--ca-widget-info-box-td-first-child-font-weight

πŸ”² Inner Box Flex (button wrapper) ​

css
--ca-widget-info-box-div-justify-content

🧡 Button text version ​

--ca-widget-info-box-button-text-padding
--ca-widget-info-box-button-text-font-style
--ca-widget-info-box-button-text-font-weight

🧼 Button simple version ​

css
--ca-widget-info-box-button-simple-border-radius
--ca-widget-info-box-button-simple-padding
--ca-widget-info-box-button-simple-size /* button width and height */
--ca-widget-info-box-button-simple-bg /* background color */
--ca-widget-info-box-button-simple-border-width
--ca-widget-info-box-button-simple-svg-size /* icon size inside button */

🟦 Table Row Styling ​

css
--ca-widget-info-box-odd-bg  /* background color for odd rows */
--ca-widget-info-box-even-bg /* background color for even rows */

old css variables ​

css
:root{
    --ca-info-area-bg: transparent;
    --ca-info-area-color: var(--ca-stone-7);
    --ca-info-area-h4-color: var(--ca-info-area-color, var(--ca-stone-7));
    --ca-info-area-table-odd-bg: rgb(248 250 252);
    --ca-info-area-table-even-bg: rgb(226 232 240);
}