Skip to content

Instantly share code, notes, and snippets.

@phrz
Created November 20, 2023 18:13
Show Gist options
  • Save phrz/ff3dc809d17c0dafd408ed6844490b72 to your computer and use it in GitHub Desktop.
Save phrz/ff3dc809d17c0dafd408ed6844490b72 to your computer and use it in GitHub Desktop.
QuickBooks Online Clean Userstyle
@-moz-document domain("app.qbo.intuit.com") {
/* ==UserStyle==
@name 4/17/2023, 6:33:24 PM
@namespace github.com/openstyles/stylus
@version 1.0.0
@description QuickBooks Online - Compact and Legible
@author phrz
==/UserStyle== */
/* hide unused sidebar items */
/* taxes, mileage, projects, capital, commerce */
/* (Cannot fix due to CSS change, omitted) */
/* FONTS */
@font-face {
font-family: "Avenir Next forINTUIT Var";
src: local("Helvetica Neue");
font-style: normal; font-weight: 275 900;
}
@font-face {
font-family: "Avenir Next forINTUIT";
src: local("Helvetica Neue Ultralight");
font-weight: 100;
}
@font-face {
font-family: "Avenir Next forINTUIT";
src: local("Helvetica Neue Thin");
font-weight: 200;
}
@font-face {
font-family: "Avenir Next forINTUIT";
src: local("Helvetica Neue Light");
font-weight: 300;
}
@font-face {
font-family: "Avenir Next forINTUIT";
src: local("Helvetica Neue");
font-weight: 400;
}
@font-face {
font-family: "Avenir Next forINTUIT";
src: local("Helvetica Neue Medium");
font-weight: 500 600;
}
@font-face {
font-family: "Avenir Next forINTUIT";
src: local("Helvetica Neue Bold");
font-weight: 700 900;
}
body {
color: #000;
}
/*==================================*/
/* Navbar */
/* + New button in sidebar */
div[class^="GlobalCreateButtonComponent__StyledGlobalCreateContainer"] {
padding: 0.5em;
}
[data-id="global_create_button"] {
border-radius: 0.25em;
min-width: auto;
padding: 0;
height: 2em;
}
/* no qbo icon */
div[class^="QBOLogoComponent__LogoNode"], a[data-id="appLogoNode"] {
display: none;
}
/* Hide <hr> */
#Navigation > hr {
display: none;
}
/* Hide NEW Get to know your menu! popup in navbar */
#Navigation > div[data-id="nav_phase2_card"] {
display: none;
}
/* Hide bookmarks header of navbar */
div[data-id="leftnav-section-header-bookmarks"] {
display: none;
}
/* Hide bookmarks section of navbar */
/*#Navigation > div[data-id="navigation-container"] > div > a[data-id^="bookmark-"] {
display: none;
}*/
/* Hide "Menu v" heading but not edit button */
div[data-id="leftnav-section-header-menu"] > button {
display: none;
}
/* Hide spacer */
div[class^="SharedNavSection__SectionSpacerFlex"] {
display: none;
}
/* Hide "menu settings" at end of navbar */
#L1-nav-items-holder {
display: none;
}
/* move sidebar to top */
div.main.flex-columns {
flex-direction: column;
}
[data-id="global_create_button"] {
width: auto;
padding: 0 0.5em 0 1em;
height: 1.8em;
font-size: 1em;
}
/* hide chevrons */
#Navigation > div[data-id="navigation-container"] > div > a > svg {
display: none;
}
/* sidebar on top */
.main > div[data-morpheus-pluginid="qbo-navigation-widgets-ui"] {
position: absolute;
top: 0;
width: 100%;
}
#Navigation {
width: 100%;
height: 2em !important;
}
/* remove spacing around [+ New] button in nav */
.left-nav-default, div[class^="GlobalCreateButtonComponent__StyledGlobalCreateContainer"] {
margin: 0;
padding: 0.05em 0;
}
/* make room for sidebar on top */
.body-container {
padding-top: 2em;
}
/* Horizontal nav items */
#Navigation {
flex-direction: row;
}
#Navigation > div[data-id="navigation-container"] {
display: flex;
overflow-x: scroll;
overflow-y: hidden;
scrollbar-width: none;
margin: 0;
}
#Navigation > div[data-id="navigation-container"] > div > a {
height: 2em;
padding: 0;
}
#Navigation > div[data-id="navigation-container"] > div > a > span {
height: 2em;
line-height: 2;
padding: 0 0.4em 0;
/* hide green "current page" highlight */
border-style: none !important;
border-color: transparent;
}
/* make > More button padding fit nav bar */
#Navigation button[class^="SharedNavMoreComponent__MoreButton-"] {
height: 2em;
padding: 0;
}
/* remove > More button right chevron */
#Navigation button[class^="SharedNavMoreComponent__MoreButton-"] > svg {
display: none;
}
/* fit pencil button to navbar */
div[data-id="leftnav-section-header-menu"] {
height: 2em;
}
/*==================================*/
/* HEADER BAR (light gray below nave) */
.tsaGlobalHeader.default > nav.headerNav {
height: 2.5em;
background: #eee;
}
.headerItem > .qbo-navigation-widgets-ui.companyName.label {
height: auto;
width: auto;
line-height: 2.5em;
}
/* Hide navbar reveal/hide button on mobile widths */
nav.headerNav > ul.container-left > li.headerItem > span.global-header-item > button.global-header-item-button {
display: none;
}
/* pad the left of the company name */
nav.headerNav > ul.global-header-container.container-left > li.headerItem > span.qbo-navigations-wdigets-ui.companyName.label {
padding-left: 1em;
}
/* decrease padding for top right header buttons and the notification icon (which is treated differently) */
.tsaGlobalHeader .headerNav ul.global-header-container li.headerItem, .tsaGlobalHeader .flyoutWrapper ul.global-header-container li.headerItem, .overflow .headerNav ul.global-header-container li.headerItem, .overflow .flyoutWrapper ul.global-header-container li.headerItem {
height: 2.5em;
padding: 0;
}
nav.headerNav > ul.global-header-container.container-right > li.headerItem > span.global-header-item > button.global-header-item-button, nav.headerNav > ul.global-header-container.container-right > li.headerItem > div[data-morpheus-pluginid="notification-tray-plugin"] {
padding: 0.35em !important;
}
/* SECONDARY NAV BELOW SECTION TITLE */
.tabbed-nav-container-default {
padding: 0;
}
/*==================================*/
/* HIDE ADS */
.marketing-ipd-tsa-widgets, div.PageMessage-info-1cf1158 {
display: none !important;
}
/* MAIN BODY AREA */
.integrations-datain-ui {
margin: 0 0.1em;
}
/*==================================*/
/* BANK FEED */
.integrations-datain-ui .banking-main-wrapper {
width: 100%;
}
.integrations-datain-ui .owner-mode-tabs > div {
padding: 0;
}
.idsTable--quickbooksTheme .idsTable__contentWrapper {
padding: 0;
}
.integrations-datain-ui .owner-mode-grid .acct-mode-table .idsTable .idsTable__row td.idsTable__cell {
padding: 0.1em 0.25em;
}
.idsTable__cell {
white-space: normal;
}
/* match label in bank feed */
.integrations-datain-ui button.a11y-button {
line-height: 1em;
height: auto;
}
/* zebra stripe bank feed */
.integrations-datain-ui .owner-mode-grid .acct-mode-table .idsTable .idsTable__row:hover {
background-color: rgba(0,0,0,0.03);
font-weight: bold;
outline: 3px solid hsl(200deg, 100%, 50%);
}
.integrations-datain-ui .owner-mode-grid .acct-mode-table .idsTable .idsTable__row:hover .a11y-button {
font-weight: bold;
}
.integrations-datain-ui .owner-mode-grid .acct-mode-table .idsTable .idsTable__row:nth-child(even) {
background-color: rgba(0,0,0,0.05);
}
.integrations-datain-ui .owner-mode-grid .acct-mode-table .idsTable .idsTable__row:nth-child(even):hover {
background-color: rgba(0,0,0,0.08);
}
/* remove space around account cards at top of bank feed */
.idsCarousel .idsCarouselContainer .slideAndArrowSection .slideSectionContainer {
margin: 0;
}
.integrations-datain-ui .accounts {
margin-bottom: 0;
}
/* remove useless chevron space underneath account cards */
.integrations-datain-ui .icon-container-chevron {
display: none;
}
/* hide "Video tutorials, Take a tour, Go to bank register" link bar in top right of bank feed */
.integrations-datain-ui .link-section {
display: none;
}
/* allow filter bar (date picker, search bar) to coexist on same row as page selector, print and export buttons atop bank feed */
.integrations-datain-ui .txn-filter-section {
display: inline-block;
}
.integrations-datain-ui .print-excel-icons {
padding: 0;
}
.integrations-datain-ui .print-excel-icons > button {
margin-top: 0 !important;
}
.integrations-datain-ui .owner-mode-grid .acct-mode-table .table-wrapper .idsTable__layoutHeader svg {
/* gear button (for some reason lives elsewhere in DOM tree despite being next to print and excel buttons in top right bank feed) */
margin-top: 3px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment