/* * These styles apply ONLY to the header and footer assets. This is Vanilla's default CSS */ * { padding: 0; margin: 0; box-sizing: border-box; } .footer { background: #f5f5f6; color: #555a62; font-size: 14px; line-height: 1.5; padding: 18px 0; } .footer-wrap { padding-left: 18px; padding-right: 18px; max-width: 1236px; margin: 0 auto; } .footer a { color: #0291db; } .footer a:hover { color: #0276b3; } .footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: -3px; } .footer-col { padding: 0 3px; } .footer-col-copyRight { justify-content: flex-start; } .footer-col-logo { justify-content: flex-end; } .footer-col-copyRight, .footer-col-logo { flex: 1; display: flex; } .logo { width: 124px; height: 27px; opacity: 0.6; } @media screen and (max-width: 768px) { .footer-row { display: block; } .footer-col { width: 100%; text-align: center; margin: 6px 0; } .footer-col:first-child { margin-top: 0; } .footer-col:last-child { margin-bottom: 0; } .footer-col-copyRight, .footer-col-logo { justify-content: center; } .logo { margin: 0 auto; } } /*# START ALL DOMO CENTRAL CSS */ /*# sourceMappingURL=styles.css.map */ /** * References: * https://www.hongkiat.com/blog/css-only-accordion/ */ /* Normalize */ .DCN * { box-sizing: border-box; font-family: "Open Sans"; margin: 0; padding: 0; text-decoration: none; } /* Variables */ .DCN { --color-brand: #99ccee; --color-primary-200: #e7f2fe; --color-primary-300: #cbe6fc; --color-primary-400: var(--color-brand); --color-neutral-500: #888888; --color-neutral-600: #555555; --color-neutral-800: #222222; --color-neutral-900: #111111; --shade-black-5: rgba(0, 0, 0, 0.05); --shade-black-10: rgba(0, 0, 0, 0.1); --shade-black-15: rgba(0, 0, 0, 0.15); --shade-black-70: rgba(0, 0, 0, 0.7); --shade-black-90: rgba(0, 0, 0, 0.9); --shade-white-100: rgba(255, 255, 255, 1); --shade-brand-10: rgba(153, 204, 238, 0.1); --space-1: 8px; --space-half: calc(var(--space-1) / 2); --space-1-half: calc(var(--space-1) + var(--space-half)); --space-2: calc(var(--space-1) * 2); --space-3: calc(var(--space-1) * 3); --space-4: calc(var(--space-1) * 4); --space-5: calc(var(--space-1) * 5); --space-6: calc(var(--space-1) * 6); --space-7: calc(var(--space-1) * 7); --space-8: calc(var(--space-1) * 8); --size-1: 8px; --size-half: calc(var(--size-1) / 2); --size-1-half: calc(var(--size-1) + var(--size-half)); --size-2: calc(var(--size-1) * 2); --size-3: calc(var(--size-1) * 3); --size-4: calc(var(--size-1) * 4); --size-5: calc(var(--size-1) * 5); --size-6: calc(var(--size-1) * 6); --size-7: calc(var(--size-1) * 7); --size-11: calc(var(--size-1) * 11); --header-height-mobile: 60px; --header-height-desktop: var(--size-11); --container-lg: 1100px; --radius-sm: var(--space-half); --font-size-12: 12px; --font-size-14: 14px; --font-size-16: 16px; --font-weight-regular: 400; --font-weight-semibold: 600; --line-height-lg: 1.5; --letter-spacing-lg: 0.15px; --letter-spacing-xl: 0.25px; --letter-spacing-xxl: 0.4px; } /**** HEADER ****/ .DCN__header { background: var(--shade-white-100); border-bottom: 1px solid var(--shade-black-15); box-sizing: border-box; height: var(--header-height-mobile); left: 0; padding: 0 var(--space-2); position: fixed; top: 0; white-space: nowrap; width: 100%; z-index: 9999; } .DCN__header__container { align-items: center; display: flex; height: 100%; justify-content: space-between; margin-left: auto; margin-right: auto; max-width: var(--container-lg); } /* Logo */ .DCN__header__logo { height: 40px; width: 106px; } /* Hamburger & Content */ #DCN__hamburger__checkbox { display: none; } .DCN__hamburger { cursor: pointer; height: 40px; position: relative; width: 40px; } .DCN__hamburger:before, .DCN__hamburger:after { background-color: var(--color-neutral-900); border-radius: 1px; bottom: 0; content: ""; display: block; height: 2px; left: 0; margin: auto; position: absolute; right: 0; top: 0; transform: translateY(-4px) rotate(0deg); transition: transform 0s ease 0s; width: 60%; } .DCN__hamburger:after { transform: translateY(4px) rotate(0deg); } #DCN__hamburger__checkbox:checked + .DCN__hamburger:before { transform: translateY(0px) rotate(45deg); } #DCN__hamburger__checkbox:checked + .DCN__hamburger:after { transform: translateY(0px) rotate(-45deg); } #DCN__hamburger__checkbox:checked ~ .DCN__header__content { display: block; } .DCN__header__content { background-color: var(--shade-white-100); display: none; height: calc(100% - var(--header-height-mobile)); left: 0; overflow-y: scroll; position: fixed; top: var(--header-height-mobile); width: 100%; } /* Navigation */ .DCN__header__navigation { position: relative; } .DCN__header__navigation__link { position: relative; } .DCN__header__navigation__link + .DCN__header__navigation__link { margin-top: 1px; } .DCN__header__navigation__link__label { align-items: center; background-color: var(--color-primary-300); color: var(--color-neutral-900); cursor: default; display: flex; font-size: var(--font-size-16); font-weight: var(--font-weight-semibold); height: var(--size-7); justify-content: space-between; letter-spacing: var(--letter-spacing-lg); line-height: var(--line-height-lg); padding: 0 var(--space-3); } .DCN__header__navigation__link__label__icon { flex: 0 0 20px; } /* Menu */ .DCN__header__menu__checkbox { cursor: pointer; display: block; height: var(--size-7); left: 0; opacity: 0; position: absolute; top: 0; width: 100%; z-index: 1; } .DCN__header__menu__checkbox:checked ~ .DCN__header__navigation__link__label .DCN__header__navigation__link__label__icon { transform: rotate(180deg); } .DCN__header__menu__checkbox:checked ~ .DCN__header__menu__wrapper { display: block; } .DCN__header__menu__wrapper { border-top: 1px solid var(--shade-white-100); display: none; position: relative; } .DCN__header__menu { background-color: var(--color-primary-200); padding: var(--space-1) 0; } .DCN__header__menu__category { display: none; } .DCN__header__menu__link { display: block; padding: var(--space-1-half) var(--space-3); white-space: normal; } .DCN__header__menu__link__label { color: var(--color-neutral-600); display: block; font-size: var(--font-size-14); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-xl); line-height: var(--line-height-lg); } .DCN__header__menu__link__description { display: none; } /* Spacer */ .DCN__header__spacer { flex: 1 1 100%; } /* DCN__header__ctas & Search */ .DCN__header__ctas__container { align-items: center; display: flex; flex-direction: column-reverse; margin: 0 auto; max-width: 450px; padding: var(--space-3); } .DCN__header__ctas { align-items: center; display: flex; justify-content: space-around; margin-top: var(--space-3); width: 100%; } .DCN__header__ctas__cta { align-items: center; color: var(--shade-black-70); display: flex; font-size: var(--font-size-14); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-xl); line-height: var(--line-height-lg); padding: 2px var(--space-1); } .DCN__header__ctas__divider { background-color: var(--shade-black-10); flex: 0 0 1px; height: var(--size-3); width: 1px; } @media (hover: hover) { .DCN__header__ctas__cta:hover { color: var(--shade-black-90); } } .DCN__header__search__field { /** @author pkelly@higherlogic.com This has to be hidden because we use an identical on injected into the DOM **/ visibility: hidden; align-items: center; background-color: var(--shade-black-5); border-radius: var(--radius-sm); display: flex; height: var(--size-4); margin-top: var(--space-1); padding-left: var(--space-1); width: 100%; } @media (hover: hover) { .DCN__header__search__field:hover { background-color: var(--shade-black-10); } } .DCN__header__search__field:focus-within { background-color: var(--shade-black-5) !important; } .DCN__header__search__field:focus-within .DCN__header__search__field__icon { color: var(--color-primary-400); } .DCN__header__search__field__icon { color: var(--shade-black-70); flex: 0 0 20px; } .DCN__header__search__field__input { background-color: transparent; border: none; color: var(--color-neutral-800); flex: 1 1 100%; font-family: inherit; font-size: var(--font-size-14); font-weight: var(--font-weight-normal); height: 100%; letter-spacing: var(--letter-spacing-xl); outline: none; padding: 0 var(--space-half); } /** DESKTOP (HEADER) **/ @media only screen and (min-width: 960px) { .DCN__header { height: var(--header-height-desktop); } /* Logo */ .DCN__header__logo { height: 56px; width: 148px; } /* Hamburger & Content */ #DCN__hamburger__checkbox, .DCN__hamburger { display: none; } .DCN__header__content { align-items: center; display: flex !important; flex: 1 1 100%; height: 100%; justify-content: space-between; overflow-y: visible; position: relative; top: 0; } /* Navigation */ .DCN__header__navigation { align-items: center; display: flex; height: 100%; margin-left: var(--space-4); } .DCN__header__navigation__link { height: 100%; margin-top: 0px !important; position: static; } .DCN__header__navigation__link__label { align-items: center; background-color: transparent; color: var(--color-neutral-600); display: flex; font-weight: var(--font-weight-regular); height: 100%; justify-content: center; padding: 0 var(--space-2); width: 120px; } .DCN__header__navigation__link__label__icon { display: none; } .DCN__header__navigation__link.self-menu { position: relative; } @media (hover: hover) { .DCN__header__navigation__link:hover .DCN__header__navigation__link__label { background-color: var(--shade-brand-10); box-shadow: inset 0px -4px 0px var(--color-brand); } .DCN__header__navigation__link:hover .DCN__header__menu__wrapper { display: block !important; } } /* Menu */ .DCN__header__menu__checkbox { display: none; } .DCN__header__menu__wrapper { border-top: none; display: none !important; left: 0px; padding-top: var(--space-half); position: absolute; top: calc(var(--header-height-desktop) - 1px); } .DCN__header__menu { border-radius: var(--radius-sm); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15); padding: 0; } .DCN__header__menu__overview { border-bottom: 1px solid var(--shade-black-15); padding: var(--space-1); } .DCN__header__menu__columns { display: flex; padding: var(--space-1); } .DCN__header__menu__column { flex: 1 1 50%; min-width: 350px; } .DCN__header__menu__category { color: var(--color-neutral-500); display: block; font-size: var(--font-size-12); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-xxl); line-height: var(--line-height-lg); padding: var(--space-2); padding-top: var(--space-1); text-transform: uppercase; } .DCN__header__menu__link { border-radius: var(--radius-sm); padding: var(--space-2); } .DCN__header__menu__link__label { color: var(--color-neutral-900); } .DCN__header__menu__link__description { color: var(--color-neutral-600); display: block; font-size: var(--font-size-14); font-weight: var(--font-weight-regular); letter-spacing: var(--letter-spacing-xl); line-height: var(--line-height-lg); } @media (hover: hover) { .DCN__header__menu__link:hover { background-color: var(--shade-black-5); } } /* Ctas & Search */ .DCN__header__ctas__container { flex-direction: column; padding: 0px; } .DCN__header__ctas { margin-top: 0px; } .DCN__header__search__field { margin-top: var(--space-1); } } /**** FOOTER ****/ .DCN__footer { background-color: var(--color-neutral-800); padding-top: var(--space-5); } .DCN__footer__container { margin-left: auto; margin-right: auto; max-width: var(--container-lg); } .DCN__footer__logo { display: block; height: 56px; margin-left: var(--space-2); width: 148px; } .DCN__footer__menu__checkbox { display: none; } .DCN__footer__menu__checkbox:checked ~ .DCN__footer__menu { display: block; } .DCN__footer__menu__checkbox:checked + .DCN__footer__menu__label .DCN__footer__menu__label__icon { transform: rotate(180deg); } .DCN__footer__columns { margin-top: var(--space-5); padding: 0 var(--space-2); } .DCN__footer__column + .DCN__footer__column { border-top: 1px solid var(--color-neutral-600); } .DCN__footer__menu__label { align-items: center; color: var(--shade-white-100); cursor: pointer; display: flex; font-size: var(--font-size-16); height: var(--size-6); letter-spacing: var(--letter-spacing-lg); justify-content: space-between; } .DCN__footer__menu__label__icon { flex: 0 0 20px; margin-right: var(--space-1); } .DCN__footer__menu { display: none; padding-bottom: var(--space-2); } .DCN__footer__menu__link { color: var(--color-neutral-500); display: block; font-size: var(--font-size-16); font-weight: var(--font-weight-regular); line-height: var(--size-4); padding-left: var(--space-1); } @media (hover: hover) { .DCN__footer__menu__link:hover { color: var(--color-brand); text-decoration: underline; } } .DCN__subfooter { background-color: var(--color-neutral-900); margin-top: var(--space-5); padding: var(--space-6) 0px; text-align: center; } .DCN__subfooter__socials__social { color: var(--shade-white-100); margin: 0 var(--space-1-half); } .DCN__subfooter__copyright { margin-top: var(--space-4); } .DCN__subfooter__copyright, .DCN__subfooter__privacies__privacy { color: var(--color-neutral-600); font-size: 12px; font-weight: var(--font-weight-regular); } .DCN__subfooter__privacies { align-items: center; display: flex; justify-content: center; margin-top: var(--space-half); } .DCN__subfooter__privacies__divider { background-color: var(--color-neutral-600); display: block; flex: 0 0 1px; height: var(--size-1-half); margin: 0 var(--space-1); width: 1px; } @media (hover: hover) { .DCN__subfooter__socials__social:hover { color: var(--color-brand); } .DCN__subfooter__privacies__privacy:hover { color: var(--shade-white-100); text-decoration: underline; } } /** DESKTOP (FOOTER) **/ @media only screen and (min-width: 960px) { .DCN__footer { padding-top: var(--space-8); } .DCN__footer__logo { margin: 0 auto; } .DCN__footer__columns { display: flex; justify-content: space-around; margin-top: var(--space-8); } .DCN__footer__column { border-top: none !important; } .DCN__footer__menu { display: block !important; } .DCN__footer__menu__label { cursor: default; font-weight: var(--font-weight-semibold); height: auto; letter-spacing: var(--letter-spacing-xxl); padding-bottom: var(--space-2); text-transform: uppercase; } .DCN__footer__menu__label__icon { display: none; } .DCN__footer__menu { padding-bottom: 0px; } .DCN__footer__menu__link { padding-left: 0px; } .DCN__subfooter { margin-top: var(--space-8); } } /*# END ALL DOMO CENTRAL CSS */

Domo.com Log In Support

Community Forums

Discover best practices and find answers to your questions with advice from fellow Domo users.

Sign in and unlock FULL access to the Community Forums

Ask Domo questions, post product feedback ideas, and connect with fellow users.

Connectors
Connectors, Custom Connectors, Writeback
Charting
Ask Charting questions and get answers from Domo peers
APIs & Domo Developer
Ask APIs and Developer.domo.com questions and get answers from Domo peers
Ideas Exchange
Submit & vote on new features you would like to see implemented in the Domo Product.

View All

🔥 Most Recent

Beast mode calculation
I want to create a beast mode calculation which should be something like this Value for current month this year - value for current month last year / Value for current month last year How can i do this?
Private Embed Page in Salesforce Without Redirect
I need to privately embed a page from Domo into a Visualforce page. I used the example code repo linked in the developer documentation. When I preview the Visualforce page, it successfully renders the page but only after redirecting to a public.domo.com page. When I attempt to add that Visualforce page to an Experience…
Domo Search API?
Hi All, I'm working on a dynamic landing page and I am trying to make a 'universal search' within a Domo brick where users can type in whatever they are looking for and return back cards/dashboards that are relevant to their area of the business. I realize Domo already has a search, but I want to build off of that same…
Requesting ability to schedule on a quarterly, semi annual, annual basis
Currently I am only able to schedule reports on a monthly basis at the most. I have a couple reports that need to be scheduled on a quarterly basis (or more). Can we make that a feature?
Making your DDX HTML Brick transparent
Greetings :wave: Hoping someone will be able to solve a mystery for me. I have been playing with the HTML brick and am stuck on how to make the background of the card transparent. I used the card interface but even when set to transparent it remains white which I suppose in makes sense. I tried using CSS to have the…
Faceted Bar Chart Labels
I'm using a Faceted Bar Chart to show a conversion metric for sales. It's probably my favorite chart I've used so far and really scratches an itch my end users have had. It's pretty basic, it has a sum of opportunities, a sum of sales, and the resulting conversion. My issue that I'm having is the label on the right side of…
FOR WHILE loops in dataflows
Related to: https://dojo.domo.com/main/discussion/52378/is-it-possible-to-use-while-do-loops-in-mysql-in-domo-dataflows There is no way to implement SQL Recursive Queries in Domo: https://www.sqlservertutorial.net/sql-server-basics/sql-server-recursive-cte/ Instead you have to guess the max depth and build as many JOINs…
How can I have only default filters to be visible on the filter views panel?
The selected slicers from the above page should not reflect in the filter views on top. I only want cohort and subscription filters to be displayed. Is there a workaround for this?
I want to create a 3*2 (6 lines) for percentiles by their engagement status.
I want to create a line chart with dates on X axis and 6 lines on Y axis. Is this possible with existing dataset?
Persistant filtering of data per Dashboard
I am exporting a number of Dashboards that I am embedding into various pages of client websites. Each dashboard runs off of the same data set with a column that identifies the clientId. At present I am duplicating Many dashboards with cards and editing each card to filter the data with the clientId. What I would prefer is…

🙋 Someone needs Help

Private Embed Page in Salesforce Without Redirect
I need to privately embed a page from Domo into a Visualforce page. I used the example code repo linked in the developer documentation. When I preview the Visualforce page, it successfully renders the page but only after redirecting to a public.domo.com page. When I attempt to add that Visualforce page to an Experience…