:root { /* primary colors */ --primary-color: #45454f; --primary-color-hover: #45454fcc; /* secondary colors */ --secondary-color: #45454f; --secondary-color-hover: #45454fcc; /* aditional colors */ --tertiary-color: #696969; --neutral-color-black: #464145; --white: #ffffff; } /* ------------------ LOGIN PAGE ------------------ */ /* LOGIN buttons */ a.um_button.btn_idp, #signup_form #insert_user, .credentials_content form input[type="submit"], .um_login_button { background-color: var(--primary-color); color: #3a94c6; } /* LOGIN buttons (HOVER) */ a.um_button.btn_idp:hover, #signup_form #insert_user:hover, .credentials_content form input[type="submit"]:hover, .um_login_button:hover { background-color: var(--primary-color-hover); color: #91a8c4; } /* LOST PASSWORD */ .credentials_content a[class^="lostpassword_link"], #signup_form > p.signin_now > a { color: var(--secondary-color); color: #3a94c6; } /* LOST PASSWORD (HOVER) */ .credentials_content a[class^="lostpassword_link"]:hover { color: var(--secondary-color-hover) !important; color: #91a8c4; } /* REQUEST AN ACCOUNT */ .join_button { color: var(--secondary-color) !important; color: #3a94c6; } /* REQUEST AN ACCOUNT (HOVER) */ .req_account_container .join_button:hover { color: var(--secondary-color-hover) !important; color: #91a8c4; } /* ------------------ DASHBOARD ------------------ */ /* Hero Image CTA button */ .dashboard-hero .btn--minimal { color: #f2f2f2; background: #3a94c6; } /* Hero Image CTA button (HOVER) */ .dashboard-hero .btn--minimal:hover { color: #f2f2f2; background: #91a8c4; } /* Quick Links Widget text */ .dashboard-quicklinks__links ol li a, .dashboard-quicklinks__links ol li::before { color: #3a94c6; } /* View my Channel Manager Widget button */ .dashboard-minimal .btn--minimal--blue { margin: 10px; border-radius: 3px; background: #3a94c6 !important; color: #fff; } /* View my Channel Manager Widget button (HOVER) */ .dashboard-minimal .btn--minimal--blue:hover { color: #fff; background: #91a8c4 !important; } /*-------------DASHBOARD BUTTONS-------------*/ /* Dashboard Buttons - Icons */ .dashboard-btn__content span { color: #3a94c6; } /* Dashboard Buttons - Arrows */ .dashboard-btn__content__arrow svg { stroke: #3a94c6; } /*--Dashboard Buttons - Title color (right of icon)--*/ .dashboard-btn__content__category { color: #3a94c6; } /* Dashboard Buttons - background color (HOVER) */ .dashboard-btn:hover { background: #6e83b1; } /*-- DB Button Text Hover --*/ .dashboard-btn:hover .dashboard-btn__content span, .dashboard-btn:hover .dashboard-btn__content__arrow svg, .dashboard-btn:hover .dashboard-btn__content__category, .dashboard-btn:hover .dashboard-btn__content__text, .dashboard-btn:hover .dashboard-btn__content h4 { color: #f2f2f2; stroke: #f2f2f2; } /*---------------------- New and Popular Widget ----------------------*/ /* New and Popular Widget - Text */ .dashboard-popular-new__tab-content ul li::before, .dashboard-popular-new__tab-content ul a .dashboard-popular-new__tab-content__pane__link p, .dashboard-popular-new__tab-content ul a .dashboard-popular-new__tab-content__pane__views p { color: #272e40; } /* New and Popular Widget - Active Header */ .dashboard-popular-new__tab-row a.active { background: #6e83b1; } /* New and Popular Widget - Inactive Header */ .dashboard-popular-new__tab-row a { background: #6e83b1; } /* ----------------------Calendar Widget ----------------------*/ .dashboard-calendar__title a { color: var(--primary-color); } .dashboard-calendar__event__details .category { color: var(--primary-color); } /*----------------------Pinned Content----------------------*/ .dashboard-minimal .empty_asset_content h3 { color: var(--primary-color); } /*--Header initials avatar bckground color--*/ .avatar_small svg rect { fill: #272e40; } .empty_asset_content h3 { color: var(--primary-color); } .cta-button-slider__buttons li button { background-color: var(--primary-color); } /*--View Event button and Update button--*/ .btn, .btn:link, .btn:visited, .ab_settings input[type="submit"] { background-image: none !important; padding: 10px 20px; background-color: var(--primary-color); } /*--View Event button and Update button (HOVER)--*/ .btn:hover, .btn:active, .ab_settings input[type="submit"]:hover, .ab_settings input[type="submit"]:active { background-color: var(--secondary-color-hover) !important; } /*--Event +playbook button (BG) color--*/ .btn.dark, .btn.dark:link, .btn.dark:visited { background-color: var(--primary-color); } /*--Event +playbook button (text HOVER) color--*/ .btn.dark:hover, .btn.dark:active { color: #f2f2f2; } /*--Deal header icon text color--*/ .ab_header_btns span.btn_title { color: #272e40; } /*--Deal header icon color--*/ .ab_header_btns span[class^="icon-"] { background-color: #3a94c6; } /*--Deal header icon color (HOVER)--*/ .ab_header_btns a:hover span[class^="icon-"] { background-color: #3a94c6; } /*--Header tab selection color--*/ .tab_nav.horizontal li.active a { border-bottom-color: var(--primary-color); } /*--Event title color (HOVER)--*/ a:hover .asset_content h3 { color: var(--primary-color) !important; } /*--S&E filter button text color--*/ #filter_results form input[type="submit"], .post-type-knowledge-base #searchsubmit { background-color: var(--primary-color) !important; color: #fff; } /*--S&E filter button text color--*/ #filter_results form input[type="submit"]:hover, .post-type-knowledge-base #searchsubmit:hover { background-color: var(--primary-color-hover) !important; color: #fff; } /*--Default dropdown menu link color--*/ .user_content a:link, .user_content a:visited, a.logout_link span[class^="icon-"] { color: #4d4d4f; } /*--Default dropdown menu icon color--*/ .user_content a span[class^="icon-"] { color: #3a94c6; } /*--Dropdown link color (HOVER)--*/ .user_content a:hover, a.logout_link:hover { color: #3a94c6; } /*--Drop down menu icon color (HOVER)--*/ .user_content a:hover span[class^="icon-"], a.logout_link:hover span[class^="icon-"] { color: #272e40; } /*--Bell header icon color--*/ #ab_notifications > a > span { color: #6a65ad; } /*--Team CoLab header icon color--*/ #ab_colab > a > span { color: #3a94c6; } #ab_notifications > a:hover > span, #ab_colab > a:hover > span { opacity: 0.7; } /*--(/Learn) course percentage text color--*/ .asset a:link, .asset a:visited { color: var(--primary-color); } .asset .progress span { background: var(--primary-color); } /*--System settings active selection color--*/ .content_nav ul li.active a:before { background-color: var(--primary-color); } /*--Pipeline total value color--*/ .pipeline_summary .flex.pipeline_total { background-color: #272e40; } /*--Pipeline (Deal details) milestone text--*/ .coach_overview__label { color: var(--primary-color); } /*--Pipeline (Deal details) milestone outer circle--*/ .status_check.complete .check_holder { border-color: var(--primary-color); } /*--Pipeline (Deal details) milestone inner circle--*/ .status_bar.complete, .status_check.complete .check_holder span[class^="icon-"] { background-color: var(--primary-color); } /*--Pipeline (Deal details) deal info title--*/ .coach_sidebar_title { color: var(--primary-color); } .coach_team_avatar:hover { border-color: var(--primary-color); } #body_block > section > div.main_content.wrapper > form > a:hover { color: var(--primary-color-blue); } .profile_settings #ab_colab { color: var(--primary-color); } /*--Pinned Icon color--*/ span.icon-pin.pinned { color: var(--primary-color); } /* Show me How Widget */ #walkme-player > div > div.walkme-question-mark.walkme-override.walkme-css-reset, .u-userLauncherColor:not([disabled]) { background-color: #6e83b1 !important; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter