/* * 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 Support

Community Forums

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

Recent Discussions

Congratulate our newest Community Coach, @marcel_luthi! 🎉
Huge congrats to @marcel_luthi who climbed the ranks and hit Coach status in the Community Forums! 👏 This is a great accomplishment that not only signifies Domo expertise but generosity giving back to the Community. @marcel_luthi is located in El Salvador, making him one of two international Coaches. This year alone,…
How to create calculated items in pivot table dashboard
Hi All, I am new to Domo application. Please help me on the below query. In excel, in pivot table we can create new row with the help of Calculated item. Is it possible in Domo in Similar way or any formula. Attached Excel file for your reference. If anyone help me with screenshots, I will be more happy. Thank you so much.
Calculated item in Domo
How to create calculated item in Domo same like excel pivot
Custom / Manual Sort Order
Is it possible to have a custom sort order on a chart when none of my attributes provides the sort order I want? Or alternatively, I know I could force the custom sort order I want with an alias in a beast mode, but then could I change the bar labels to what they were originally?
UTF-8 Arrows in HTML Table Beastmode not working
Hi guys, Im trying to create a html table with up/down arrow using beast mode. I referenced this post and tried the following code but I cant get the arrows to show up in the table, shown below so my question is: does domo html not support UTF-8 arrows anymore? is there any work around or did I do anything wrong? Thank you!
Forecast chart template: color for actual line
We would like to have the capability to change the color of the "actual line" (line with a prediction range) in the forecast template.
Fixed Function Problem
Hello, I have an issue that I'm working through in which I want to essentially group by two columns and find the average rank in that grouping. I then want to filter this rank to be less than 3 and count the total rows from this. All in a beastmode. The SQL behind this looks like the following: SELECT Count(*) from (SELECT…
Domo Twitter Advanced Connector is down
Hi! Our twitter advanced connector is down and we got this error message below. Does anyone know how to fix it? Thank you so much! "Domo is ready, but Twitter returned You currently have access to a subset of Twitter API v2 endpoints and limited v1.1 endpoints (e.g. media post, oauth) only. If you need access to this…
Dimensions
As Business User, I would like to manage custom dimensions on my lookup tables while also having them update automatically when new masters are created.
Dashboard Option: Do Not Auto-run Cards
Can you please add a way to avoid auto-loading all the cards on a dashboard? It could be a dashboard property. Users have Overview and Shared pages that will not load. They log support tickets. The pages have too many cards. Cards are not filtered enough. Mega tables take time to load all the data on page load vs HTML…
Adding Variance to a card
Hello! I am struggling to find a solution for an issue I am having. Basically we are creating a table that shows a list of metrics with their Actual Value and Budgeted Value, and I want to add the variance. I have the data formatted in two different ways. The screenshot below shows what the data looks like. If I use the…

Welcome!

It looks like you're new here. Members get access to exclusive content, events and more. Sign in or register to get started.

Like technical product deep dives?

Event Recordings

Quick Links

Popular Tags

Community

Help

University

Developer

Cookie Preferences Privacy & Cookie Policy Patents