Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save jbjhjm/a7b3c47421d0da2fd59a81c3e3fa83b4 to your computer and use it in GitHub Desktop.

Select an option

Save jbjhjm/a7b3c47421d0da2fd59a81c3e3fa83b4 to your computer and use it in GitHub Desktop.
Clickup 3.0 stylesheet to make it look more like 2.0 clean theme

clickup hack

Clickup 3.0 introduced a quite messy new theme. This CSS aims to restore the feel of "Clean" theme of Clickup 2.0. Only tested with Chrome and Dark Theme.

Features

  • restore old color theme instead of 3.0's desaturated colors
  • list view:
    • remove "noise" (unnecessary icons, labels, bubbles etc)
    • no more bold font
  • task view:
    • compact header section
    • wider description
    • double height of description that is visible without clicking it

How to install:

  • Install Chrome extension "User JavaScript and CSS"
  • Navigate to clickup app
  • open the extension's editor
  • paste the contents of styles.css into right editor column (CSS)
  • Save
  • Reload clickup

image image

// // list view fixes
.cu-task-row-main_list-view-v3 .cu-task-row-main__link-text-inner {
font-weight:400!important;
}
// warning: can cause trouble with drag n drop! must not be set to display none!
.cu-task-row.cu-task-row_list-view-v3 .cu-task-row__status {width: 0; margin: 0; opacity: 0;}
.cu-task-row-status.cu-task-row-status_list-view-v3 .cu-task-row-status__badge {height:calc(100% - 2px) !important;justify-content: center;flex:1; border-radius:0!important; margin: 1px 0!important; height: 100%;}
.cu-task-row.cu-task-row_list-view-v3 .cu-task-row__main {padding:4px 5px;}
.cu-task-row-status.cu-task-row-status_list-view-v3 .cu-task-row-status__toggle {align-items: stretch;justify-content: stretch;}
.cu-task-row-status.cu-task-row-status_list-view-v3 .cu-task-row-status__badge .status-badge {display:none!important;}
.cu-task-row-status.cu-task-row-status_list-view-v3 .cu-task-row-status__badge .cu-task-row-status__status-indicator {display:none!important;}
// align task inline actions to left, next to task title
.cu-task-row:not(.cu-task-row_auto-wrap) .cu-task-row-main.cu-task-row-main_list-view-v3 .cu-task-row-main__actions { margin-left:5px!important; }
// cleanup priorities column + reset colors to 2.0 standard
.cu-priorities-view.cu-priorities-view_list-view-v3 .cu-priorities-view__item-label {display:none}
.cu-priorities-view.cu-priorities-view_list-view-v3 .cu-priorities-view__item {justify-content:center}
// general theme color fixes
// general layout cleanup
cu-global-actions-bar .right-part cu-upgrade-toggle {display:none}
cu-global-actions-bar .right-part cu-quick-create-modal-toggle {display:none}
cu-global-actions-bar .right-part cu-upgrade-toggle {display:none}
cu-global-actions-bar .right-part cu-upgrade-toggle {display:none}
.location-header .right { opacity: .2;}
.location-header .right:hover { opacity: 1;}
cu-create-task-menu { --cu-background-primary: #2a7b77; }
.search-modal-toggle span + span {opacity:.25;}
// sidebar cleanup - convert messy list icon to simple colored dot
.cu-subcategory-row__list-button .cu-subcategory-row__icon {background:currentColor;width: 10px;
height: 10px;
border-radius: 6px; min-height: 0 !important;
}
// task view layout
cu-task-view { --cu-task-view-content-width: min(100% - 96px, 1220px)!important; }
cu-task-title { --cu-font-size-13:1.7rem; --cu-font-weight-bold:400; }
cu-task-view-header { --cu-grey1000:var(--custom-darkgrey); --cu-background-main:var(--custom-darkgrey);background:var(--custom-darkgrey); }
cu-task-view cu-task-title { margin-bottom:0!important; }
cu-task-view .cu-task-hero-section__row {display:flex!important;}
cu-task-view .cu-task-hero-section__row-label {display:none!important}
cu-task-view .cu-editor-wrapper {padding-top:0!important; margin-top:20px!important;}
cu-task-view .cu-status-button-badge__body {height:32px!important; };
cu-task-view cu-task-view-parent-task-link {position:absolute; right:20px;}
cu-task-view-body { --cu-background-main:#384047 }
.cu-editor-wrapper.cu-editor-wrapper_task-view-v3.cu-editor-wrapper_show-more .cu-editor {overflow:visible!important}
.cu-editor-wrapper.cu-editor-wrapper_task-view-v3 .cu-editor>.ql-editor { margin:0!important; border:1px solid var(--cu-border-low-contrast)!important; padding:10px;}
.cu-editor-wrapper_task-view-v4 .cu-editor .ql-editor:not(.ql-table-embed-cell):not(.ql-sync-block-text-block-wrapper .ql-editor) {--cu-task-view-editor-gutter-extend:10px!important}
// custom theme tweaks similar to 2.0 color theme
body.dark-theme, .dark-sidebar {
--custom-darkgrey: #2b343b!important;
--cu-priority-urgent: rgb(245, 0, 0)!important;
--cu-priority-high: rgb(248, 174, 0)!important;
--cu-priority-normal: rgb(111, 221, 255)!important;
--cu-priority-low: var(--cu-grey600)!important;
--cu-background-main: #2a3035!important;
--cu-border-default: #40474b!important;
--cu-teal200: rgb(23 78 66)!important;
--cu-teal300: #185b4f!important;
--cu-grey1100: #fafafa!important;
--cu-grey25: #161719!important;
--cu-border-high-contrast: #777!important;
--cu-border-low-contrast: #545659!important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment