Cleans up spacing and removes extraneous elements for a cleaner and more functional UI on small screens.
Intuit QuickBooks Online for Small Screens by whi7ed3vil
Details
Authorwhi7ed3vil
LicenseNo License
Categoryapp.qbo.intuit.com
Created
Updated
Size12 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Intuit QuickBooks Online for Small Screens
@namespace github.com/openstyles/stylus
@version 1.0.4
@description Styles to tweak spacing and appearance of QuickBooks Online UI
for improved whitespace use and productivity on smaller screens.
@author Jonathan C. Nilson
==/UserStyle== */
@-moz-document domain("app.qbo.intuit.com") {
/*
Left navigation compression
TODO: Rework. Style elements have recently changed which invalidates the original, simpler method.
NEW STRUCTURE:
div[data-morpheus-widget^="qbo-navigation-widgets-ui"][data-morpheus-pluginid="qbo-navigation-widgets-ui"]
> nav[class^="LeftNavRework__LeftNavRoot"][data-id="navigation"]
> div[class^="LeftNavRework__LeftNavWidgets"]
> div[class^="QBOLogoComponent__LogoNode"]
> a[class^="QBOLogoComponent__LogoLink"]
> div[class^="QBOLogoComponent__LogoWrapper"]
> svg.qbo-ball-logo
> svg.qbo-logo-wordmark
> div[class^="GlobalCreateButtonComponent__StyledGlobalCreateContainer"]
> button[class^="GlobalCreateButtonComponent__StyledGlobalCreateButton"][data-id="global_create_button"]
> span[class^="GlobalCreateButtonComponent__StyledPlus"]
> span[class^="GlobalCreateButtonComponent__StyledNew"]
> div[class^="LeftNavRework__NavListContainer"][data-id="navigation-container"]
> div
> a[class^="NavItemRework__NavAnchor"][data-id="label"]
> span[class^="NavItemRework__NavLabel"]
*/
/* Shrink bar width */
div[data-morpheus-widget^="qbo-navigation-widgets-ui"]
> nav[class^="LeftNavRework__LeftNavRoot"]
{
width: 125px;
}
/* Shrink logo - needs work */
div[data-morpheus-widget^="qbo-navigation-widgets-ui"]
> nav[class^="LeftNavRework__LeftNavRoot"]
> div[class^="LeftNavRework__LeftNavWidgets"]
> div[class^="QBOLogoComponent__LogoNode"]
{
transform: scale(0.66) !important;
width: 60px;
}
div[data-morpheus-widget^="qbo-navigation-widgets-ui"]
> nav[class^="LeftNavRework__LeftNavRoot"]
> div[class^="LeftNavRework__LeftNavWidgets"]
> div[class^="QBOLogoComponent__LogoNode"]
> a[class^="QBOLogoComponent__LogoLink"]
{
margin: 0px !important;
padding: 0px !important;
line-height: 0px;
height: 30px;
}
/* Shrink NEW button */
div[data-morpheus-widget^="qbo-navigation-widgets-ui"]
> nav[class^="LeftNavRework__LeftNavRoot"][data-id="navigation"]
> div[class^="LeftNavRework__LeftNavWidgets"]
> div[class^="GlobalCreateButtonComponent__StyledGlobalCreateContainer"]
{
top: 33px;
padding-top: 0px;
padding-bottom: 10px;
}
div[data-morpheus-widget^="qbo-navigation-widgets-ui"]
> nav[class^="LeftNavRework__LeftNavRoot"][data-id="navigation"]
> div[class^="LeftNavRework__LeftNavWidgets"]
> div[class^="GlobalCreateButtonComponent__StyledGlobalCreateContainer"]
> button[class^="GlobalCreateButtonComponent__StyledGlobalCreateButton"]
{
min-width: 75px;
height: 24px;
line-height: 22px;
}
/* Shrink menu items - needs work */
-div[data-morpheus-widget^="qbo-navigation-widgets-ui"]
> nav[class^="LeftNavRework__LeftNavRoot"]
> div[class^="LeftNavRework__NavListContainer"]
> div
> a[class^="NavItemRework__NavAnchor"]
{
padding-left: 4px !important;
}
div[data-morpheus-widget^="qbo-navigation-widgets-ui"]
> nav[class^="LeftNavRework__LeftNavRoot"]
> div[class^="LeftNavRework__NavListContainer"]
> div
> a[class^="NavItemRework__NavAnchor"]
> span[class^="NavItemRework__NavLabel"]
{
width: 100px !important;
}
div[data-morpheus-widget^="qbo-navigation-widgets-ui"]
> nav[class^="LeftNavRework__LeftNavRoot"]
> div[class^="LeftNavRework__NavListContainer"]
> div:has( > a[class^="NavItemRework__NavAnchor"] )
{
height: 20px;
line-height: 20px;
font-size: 75%;
}
/* Tweak "Customers & Leads" title for improved clarity of display */
div[class^="LeftNavRework__NavListContainer"]
> div
> a[class^="NavItemRework__NavAnchor"][data-id="customers-leads"]
> span[class^="NavItemRework__NavLabel"]
{
text-indent: -106px;
}
div[class^="LeftNavRework__NavListContainer"]
> div
> a[class^="NavItemRework__NavAnchor"][data-id="customers-leads"]
> span[class^="NavItemRework__NavLabel"]:after
{
content: ' Customers'; /* Note: These are Unicode non-breaking spaces (" "), not regular spaces (" ")! Otherwise this wouldn't work. */
}
/*
General page whitespace compression
*/
div[class^="TabNav"]
{
padding-top: 0px !important;
}
ul.tabbed-nav-container-default
{
padding-top: 0px !important;
}
div.header
{
margin-top: 12px !important;
}
div.lists > div.stage
{
padding-top: 4px;
height: 64px;
}
div.account-card-accountant
{
margin-top: 0px !important;
}
div.icon-container-chevron
{
float: right;
}
div.link-section > button
{
margin-top: 13px !important;
}
div.owner-mode-tabs > div
{
padding: 0px !important;
}
div.page-widget-container > div
{
padding-top: 0px !important;
}
div.grid-header-container
{
padding-top: 0px !important;
}
_div.grid-header-container
{
/* WIP to compress the header cards proportionally */
_transform: scale(0.66);
_margin: 0 auto calc(-150px * (1 - 0.66));
_display: inline-block !important;
_position: relative;
_width: 100%;
_height: fit-content !important;
}
div.receipt-grid-body
{
padding: 0px !important;
}
/*
Remove marketing widgets that waste space and
Squelch dashboard tiles with marketing info
*/
div.marketing-ipd-tsa-widgets,
div.time-tracking.tile-container,
div.capital-dashboard.tile-container,
div.ipd-info,
div.react-grid-item:has( div.capital-dashboard-tile-container ),
div.react-grid-item:has( div.marketing-ipd-tsa-widgets ),
div.large-section div[class^="PaymentsOverviewChargebacksBanner"]
{
display: none;
}
/*
Remove guide widgets that have no purpose
*/
section.payments-ipd-ui,
div.payments-ipd-ui,
div.paylink-overview,
div.explore-products-container,
div.ipd-tips-card-container
{
display: none;
}
/*
Wrap pagination to filter line
*/
div.txn-search-box-longer
{
width: 300px !important;
}
div.txn-filter-section
{
display: inline-block;
}
div.print-excel-icons
{
padding-bottom: 0px !important;
}
/*
Adjust height of table rows and font size
*/
tbody > tr.idsTable__headerRow > th.idsTable__headerCell > div.idsTable__batchCell > label,
tbody > tr.idsTable__row > td.idsTable__cell > div.idsTable__batchCell > label,
tbody > tr.idsTable__headerRow > th.idsTable__headerCell div.idsTable__batchCell > label,
tbody > tr.idsTable__row > td.idsTable__cell div.idsTable__batchCell > label
{
margin-top: 5px;
margin-bottom: 5px;
-height: 20px;
}
tbody > tr.idsTable__headerRow > th.idsTable__headerCell,
tbody > tr.idsTable__headerRow > th.idsTable__headerCell > span.idsTable__contentWrapper,
tbody > tr.idsTable__row > td.idsTable__cell,
tbody > tr.idsTable__row > td.idsTable__cell div.idsTable__innerCell
{
padding-top: 0px !important;
padding-bottom: 0px !important;
}
tbody > tr.idsTable__row > td.idsTable__cell,
tbody > tr.idsTable__row > td.idsTable__cell div.idsTable__innerCell
{
font-size: 12px !important;
}
tbody > tr.idsTable__row > td.idsTable__cell > div.idsTable__innerCell > div.receipt-image
{
padding-top: 0px;
padding-bottom: 0px;
margin-top: -3px;
-margin-bottom: 3px;
}
tbody > tr.idsTable__row > td.idsTable__cell > div.idsTable__innerCell > div.receipt-image i.receipt-icon
{
-margin-top: -2px;
}
div.receipt-grid-created-by,
div.receipt-grid-general,
div.receipt-grid-general > a,
div.receipt-grid-amount,
div.category-name-column > button,
div.gridActions > button
{
font-size: 12px !important;
}
div.receipt-grid-general > a[role*="button"]
{
font-weight: 600;
}
/*
Manage QuickFill dialog spacing
*/
div.txn-header-section
{
padding-top: 10px !important;
}
div.step-detail-text
{
padding-left: 20px;
font-style: italic;
opacity: 50%;
font-size: 75%
}
div.form-element
{
margin-top: 0px !important;
}
div[class^="Quickfill-quickfillContainer"],
div.qbdsDatePicker,
div[class^="DatePicker-qbdsDatePickerContainer"],
div.idsTSTextField,
div[class^="TextField-TextFieldWrapper"],
div.idsTSTextarea,
div[class^="txp-capability-receiptBillableLine"]
{
margin-top: 2px;
margin-bottom: 2px;
...