Authorwickerman123
LicenseNo License
Categoryapp.smartsheet.com
Created
Updated
Size8.1 kB
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
This style is intended to make the default light them in Smartsheet Free a bit less like pouring bleach in your eyes.
I've never done CSS before so some contextual colouring may be lost and some things might be inverted that probably shouldn't be, my bad.
/* ==UserStyle==
@name app.smartsheet.com - 15/01/2023, 00:11:29
@namespace github.com/openstyles/stylus
@version 1.0.0
@description A new userstyle
@author Me
==/UserStyle== */
@-moz-document domain("app.smartsheet.com") {
:root {
--DarkGrey: #121212;
--MidGrey: #2b2b2b;
--LightGrey: #404040;
--Black: #000;
--White: #fff
}
/* ----------------------------------------------------------------------------------- */
/* Smartsheet Header */
.clsSmartsheetBranding.clsSmartsheetLogo .clsDesktopHeader.clsLodestarDesktopHeader {
background-color: var(--DarkGrey) !important;
border-bottom-color: var(--MidGrey) !important;
}
/* Search Bar */
.clsLodestarDesktopLogo,
.clsSearch {
filter: invert(90%) saturate(0%) brightness(130%);
}
/* Hide the "Limited Access" warning */
.clsMessageBar {
display: none;
}
/* Menu Bar */
.enableMenusLodestarStyles .menuBar {
/* background-color: rgb(49, 49, 49); */
background-color: var(--MidGrey) !important;
}
/* ----------------------- Toolbar Start ------------------------- */
.toolbar {
background-color: var(--MidGrey) !important;
}
/* Toolbar Overflow */
.enableGridLodestarStyles .toolbar,
.enableGridLodestarStyles .toolbarOverflowContent {
background-color: var(--MidGrey);
filter: drop-shadow(8px 8px 4px #000000c2);
}
/* Toolbar Overflow | Button | Hovered */
.enableGridLodestarStyles .toolbar .toolbarSection .toolbarButton.button:not(.filterMenuButton):hover:enabled,
.enableGridLodestarStyles .toolbarOverflowContent .toolbarSection .toolbarButton.button:not(.filterMenuButton):hover:enabled,
.enableGridLodestarStyles .toolbar .toolbarSection .toolbarButton.button:not(.filterMenuButton).pressed:enabled.flyoutButton {
background-color: #436793;
}
/* Toolbar Overflow | Buttons */
.enableGridLodestarStyles .toolbar .toolbarSection .toolbarButton.button:not(.filterMenuButton),
.enableGridLodestarStyles .toolbarOverflowContent .toolbarSection .toolbarButton.button:not(.filterMenuButton) {
background-color: var(--DarkGrey);
fill: var(--White);
color: var(--White);
}
.enableGridLodestarStyles .toolbar .toolbarSection .comboButton,
.enableGridLodestarStyles .toolbarOverflowContent .toolbarSection .comboButton {
background-color: var(--LightGrey) !important;
fill: var(--White) !important;
color: var(--White) !important;
}
/* ----------------------- Toolbar End ------------------------- */
/* Sheet Name */
.titleDiv {
color: var(--White);
}
/* Menu Bar Buttons */
.enableMenusLodestarStyles .menuBar .button.toolbarButton {
background-color: var(--DarkGrey) !important;
}
/* Toolbar Buttons */
.enableGridLodestarStyles .toolbar .toolbarSection .toolbarButton.button:not(.filterMenuButton):not(.comboPrimaryButton):not(.comboArrowButton) {
/* filter: invert(93%) brightness(120%) contrast(1.1) saturate(0%); */
background-color: var(--DarkGrey);
fill: var(--White);
color: var(--White);
}
/* ----------------------- Filter Button Start ------------------------- */
/* Filter Button | Filter Applied */
.enableGridLodestarStyles .toolbar .toolbarSection .filterButtonContainer.activeFilter .button,
.enableGridLodestarStyles .toolbarOverflowContent .toolbarSection .filterButtonContainer.activeFilter .button {
background-color: hsl(213, 37%, 42%)
}
/* Filter Button | Hovered Color */
.toolbar .filterButtonContainer:not(.disabled):hover .filterToggle .button:hover,
.toolbar .filterButtonContainer:not(.disabled):active .filterToggle .button:hover,
.toolbar .filterButtonContainer:not(.disabled).pressed .filterToggle .button:hover,
.toolbarOverflowContent .filterButtonContainer:not(.disabled):hover .filterToggle .button:hover,
.toolbarOverflowContent .filterButtonContainer:not(.disabled):active .filterToggle .button:hover,
.toolbarOverflowContent .filterButtonContainer:not(.disabled).pressed .filterToggle .button:hover {
background: #0e122f !important;
}
/* Filter Button | No Filter Applied */
.enableGridLodestarStyles .toolbar .toolbarSection .filterButtonContainer,
.enableGridLodestarStyles .toolbarOverflowContent .toolbarSection .filterButtonContainer,
.enableGridLodestarStyles .toolbar .toolbarSection .filterButtonContainer .button.primaryHover:not(.focusedWithMouse):not(.pressed) {
background-color: var(--MidGrey);
}
/* Filter Button | Not Pressed */
.enableGridLodestarStyles .toolbar .toolbarSection .filterButtonContainer,
.enableGridLodestarStyles .toolbarOverflowContent .toolbarSection .filterButtonContainer,
.enableGridLodestarStyles .toolbar .toolbarSection .filterButtonContainer .button.primaryHover:not(.focusedWithMouse):not(.pressed) {
background-color: var(--LightGrey) !important;
}
/* Filter Button | Not Pressed | Hovered */
.enableGridLodestarStyles .toolbar .toolbarSection .filterButtonContainer .button.secondaryHover:not(.focusedWithMouse):not(.pressed),
.enableGridLodestarStyles .toolbarOverflowContent .toolbarSection .filterButtonContainer .button.primaryHover:not(.focusedWithMouse):not(.pressed),
.enableGridLodestarStyles .toolbarOverflowContent .toolbarSection .filterButtonContainer .button.secondaryHover:not(.focusedWithMouse):not(.pressed) {
background-color: var(--LightGrey);
}
/* Filter Button Caret */
.enableGridLodestarStyles .toolbar .toolbarSection .filterButtonContainer .filterMenuButton.withToggle svg,
.enableGridLodestarStyles .toolbarOverflowContent .toolbarSection .filterButtonContainer .filterMenuButton.withToggle svg {
filter: brightness(200%);
}
/* Filter Button Content */
.enableGridLodestarStyles .toolbar .toolbarSection .filterButtonContainer .button,
.enableGridLodestarStyles .toolbarOverflowContent .toolbarSection .filterButtonContainer .button {
/*Icon Color */
fill: var(--White);
/* Text Color */
color: var(--White);
}
/* ----------------------- Filter Button End ---------------------------- */
/* Button Content */
.button {
color: var(--White);
}
.enableMenusLodestarStyles .menu {
background-color: var(--DarkGrey) !important;
filter: drop-shadow(8px 8px 4px #000000c2);
color: var(--White);
}
/* ----------------------- Grid Stuff Start ----------------------------- */
/* Grid Heading */
.gridHeading {
background-color: var(--LightGrey) !important;
}
/* Grid Color */
.clsNR1,
.clsNR2,
.clsNR3,
.clsTD2,
.gridCell {
background-color: var(--MidGrey) !important;
}
.gridPrimaryCell .gridCellContent.gridFormatPadding,
.gridCellContent {
filter: invert(100%) hue-rotate(180deg) brightness(200%);
}
.enableGridLodestarStyles .gridMoat,
.clsNR1 {
background-color: var(--LightGrey) !important;
}
.clsMC,
.enableGridLodestarStyles .clsDesktopResizeButtonsBackground {
background-color: var(--LightGrey);
}
.clsGMO {
background-color: var(--LightGrey) !important;
}
/* ----------------------- Grid Stuff End ------------------------------ */
/* Right Side Panel */
.reactHost .rightRail.lodestarRightRail {
background-color: var(--DarkGrey) !important;
}
/* Text Colors */
.enableGridLodestarStyles .clsNR2,
.columnHeaderText {
color: var(--White);
}
.columnHeaderText {
filter: drop-shadow(4px 2px 2px #000000b3) !important;
}
}