Last active
June 1, 2023 02:49
-
-
Save katagaki/1da75e73e3b323ae2a1ed02094264e50 to your computer and use it in GitHub Desktop.
Better ClickUp dark mode, with other UI tweaks.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ==UserStyle== | |
@name ClickUp Dark Better | |
@match https://app.clickup.com/* | |
==/UserStyle== */ | |
body { | |
--cu-background-main: black!important; | |
--cu-background-subtle: black!important; | |
--cu-background-on-main: black!important; | |
--cu-background-menu: #111!important; | |
--cu-background-modal: #111!important; | |
--cu-background-menu-opaque: #222!important; | |
--cu-alert-banner-background: #222!important; | |
--cu-alert-banner-background-subtle: #222!important; | |
--cu-background-main-hover-strong: #333!important; | |
--dashboard-table-background-color: black!important; | |
} | |
body.dark-theme, | |
.dark-theme, | |
.dark-theme .cu-loader-mind, | |
.dark-theme .cu-task-row__main, | |
.dark-theme .cu-task-row__container, | |
.dark-theme .cu-simple-bar__container, | |
.dark-theme .cu-simple-bar__body, | |
.dark-theme .cu2-project-list-bar__title, | |
.dark-theme .cu2-project-list-bar__scrollable, | |
.dark-theme .nav-category__header, | |
.dark-theme .cu2-project-list-bar-item__container, | |
.dark-theme .cu-simple-bar__row *, | |
.dark-theme .cu-simple-bar__body .cu-sidebar-favorites__header_active, | |
.dark-theme .cu-sidebar-favorites__list, | |
.dark-theme .task-container__header-wrapper, | |
.dark-theme .task__header, | |
.dark-theme .task-column.task-column_main, | |
.dark-theme .task-column.task-column_activity, | |
.dark-theme .task-mobile-tabs, | |
.dark-theme .task-name-block .task-name, | |
.dark-theme .cu-dashboard-board__group-header-container, | |
.dark-theme .cu-dashboard-board__content-container, | |
.dark-theme .cu-notifications__header_v6, | |
.dark-theme .cu-notifications, | |
.dark-theme .cu-home-header, | |
.dark-theme .cu-home-page__section-column_tasks, | |
.dark-theme .cu-home-page__section-column_calendar, | |
.dark-theme .cu-home-tabs, | |
.dark-theme .cu-inbox-list__header, | |
.dark-theme .cu-notification-item.comment, | |
.dark-theme .cu-task-relationship-type__title, | |
.dark-theme .task-mover__toggle, | |
.dark-sidebar, | |
.dark-theme .cu-mention-selector__footer, | |
.dark-theme .cu-dashboard-doc-container__topbar, | |
.dark-theme .gantt_task_row, | |
.dark-theme .gantt_task_row.odd, | |
.dark-theme .gantt_task_scale, | |
.dark-theme .gantt_data_area, | |
.dark-theme .gantt_grid_scale, | |
.dark-theme .gantt_grid, | |
.dark-theme .gantt_grid_data .gantt_row { | |
background-color: black!important; | |
background: black!important; | |
} | |
.dark-theme .cu-task-relationship-type__columns-container { | |
background: black!important; | |
} | |
.dark-theme .task-name-block, | |
.dark-theme .cu-editor-wrapper .cu-editor, | |
.dark-theme .cu-task-editor__show-more, | |
.dark-theme .cu-task-custom-fields__row_unset, | |
.dark-theme .breadcrumbs, | |
.dark-theme .cu-comment__toolbar, | |
.dark-theme .cu-edit-task-custom-field-value, | |
textarea, | |
.dark-theme .cu-dashboard-doc-title__text, | |
.dark-theme .cu-dashboard-doc-title .cu-editable__input, | |
.dark-theme .cu-notification__group-title-container, | |
.dark-theme .cu-notification__toggle-block_group { | |
background: unset!important; | |
} | |
.cu-task-row-new__container-body, | |
.dark-theme .cu-task-relationships-table-tasks-lazy__type, | |
.dark-theme .attachment-tile__inner, | |
.dark-theme .breadcrumbs-position__input, | |
.dark-theme .task-history-attachment__body .cu-attachment-preview__container, | |
.dark-theme .cu-rich-editor-toolbar.ql-toolbar, | |
.dark-theme .cu-task-relationships-table-tasks-lazy__tasks-list .cu-task-list:not(.cu-task-list_list-view-v3) .cu-task-list-header, | |
.dark-theme .cu-task-relationships-table-tasks-lazy__tasks-list .cu-task-list:not(.cu-task-list_list-view-v3) .cu-task-list-header__item_main, | |
.cu-task-relationships-table-tasks-lazy__tasks-list .cu-task-list:not(.cu-task-list_list-view-v3) .cu-task-list-header-settings, | |
.dark-theme .cu-comment__lip_empty, | |
.dark-theme .cu-comment__lip_reply-expanded.cu-comment__lip_no-reactions, | |
.dark-theme .cu-user-mention-list__virtual-viewport, | |
.dark-theme .cu-custom-field-dropdown-labels__menu-search-main, | |
.dark-theme .cu-custom-field-dropdown-labels__menu-search, | |
.dark-theme .cu-select__dropdown-menu-custom-search .cu-select__search, | |
.dark-theme .cu-select__dropdown-menu-options, | |
.dark-theme .command-popover-wrapper .command-popover-inner, | |
.dark-theme .cu-slash-command-value-list__item_separator, | |
.dark-theme .cu-dashboard-doc-quick-menu__container, | |
.dark-theme .cu-dashboard-doc-right-sidebar-content, | |
.dark-theme .cu-dashboard-doc-right-sidebar-tabs, | |
.dark-theme .task-minimize, | |
.dark-theme .task-close { | |
background: #222!important; | |
} | |
.dark-theme .task-container__header-wrapper, | |
.task-column.task-column_main, | |
.task-column.task-column_activity, | |
.task-mobile-tabs { | |
border-radius: unset!important; | |
} | |
.task-container { | |
padding: unset!important; | |
} | |
.dark-theme .cu-simple-bar__divider-placeholder { | |
height: 1px!important; | |
} | |
.dark-theme .cu-simple-bar__item:hover, | |
.dark-theme .cu-search-button_simple-layout, | |
.dark-theme .cu-simple-bar__body .cu-sidebar-favorites__header:hover, | |
.dark-theme .cu-simple-bar__body .nav-category__header:hover:before, | |
.dark-theme .cu-simple-bar__body .cu-nav-section:hover:not(.cu-nav-section_dragging):not(.cu-nav-section_editing):before, | |
.dark-theme .cu-simple-bar .cu2-project-list-bar-item__container:hover:before, | |
.dark-theme .cu-slash-command-list-item_active { | |
background-color: #333!important; | |
} | |
.cu-simple-bar__search { | |
margin-top: 8px!important; | |
} | |
.dark-theme .cu-notification__header, | |
.dark-theme .cu-notification__body, | |
.dark-theme .cu-notification__reply-toggle_hidden, | |
.dark-theme .cu-notification-delta-mention, | |
.dark-theme .cu-notification__group, | |
.dark-theme .cu-edit-widget, | |
.dark-theme .task_subtask, | |
.dark-theme .cu-dashboard-doc-container__right-sidebar-container, | |
.dark-theme .cu-dashboard-doc-page__comments .comments-container, | |
.dark-theme .cu-comment__deleted, | |
.dark-theme .cu-dashboard-doc-sidebar__container { | |
background: #111!important; | |
} | |
.dark-theme .cu-dashboard-doc-page__comments .cu-comment__lip, | |
.dark-theme .cu-dashboard-doc-page__comments .comment-bar, | |
.dark-theme .cu-dashboard-doc-page__comments .comment-bar__editor .ql-editor, | |
.dark-theme .cu-dashboard-doc-page__comments .cu-comment__text-edit .ql-editor, | |
.dark-theme .cu-dashboard-doc-page__comments .cu-comment__toolbar { | |
background-color: #111!important; | |
} | |
.cu-notifications__inner { | |
padding: 8px 65px 8px 8px!important; | |
max-width: unset!important; | |
} | |
.dark-theme .cu-comment__body, | |
.dark-theme .cu-notification__reply .comments-container, | |
.dark-theme .comment-bar { | |
background: #161616!important; | |
} | |
.dark-theme .comment-bar__editor .ql-editor { | |
background: unset!important; | |
} | |
.cu-notification__main-comment { | |
padding: unset!important; | |
} | |
.cu-comment__aside { | |
min-width: unset!important; | |
visibility: hidden; | |
} | |
app-root, | |
.dark-theme .cu-task-custom-fields__row-type-icon, | |
.dark-theme .cu-task-custom-fields__row-type-name { | |
color: white!important; | |
} | |
.cu-tray-bar__body { | |
right: 60px!important; | |
bottom: 0px!important; | |
min-width: calc(100vw - 60px)!important; | |
max-width: calc(100vw - 60px)!important; | |
border-radius: 0px!important; | |
background-color: #222!important; | |
border-color: #222!important; | |
} | |
.cu-loader-mind, | |
.loading-placeholder, | |
.task-backdrop, | |
.dark-theme .cu-tray-bar__list:before, | |
.dark-theme .cu-tray-bar__list:after, | |
.dark-theme .cu-comment__toolbar:before, | |
.dark-theme .cu-comment-bar:before, | |
.dark-theme .task__toolbar_last:before, | |
.dark-theme .cu-slash-command-value-list__item_separator:after, | |
.dark-theme .cu-slash-command-value-list__body:after, | |
.dark-theme .cu-notification .cu-notifications-comment .cu-comment__body-container_truncated .cu-comment__text:after { | |
visibility: hidden!important; | |
} | |
.dark-theme .task-column_main .task-column__footer.cu-hidden-print.ng-tns-c601-306.ng-star-inserted { | |
visibility: hidden!important; | |
height: 0px; | |
} | |
.cu-float-button { | |
right: 0px!important; | |
bottom: 0px!important; | |
background-color: var(--theme-main-color)!important; | |
} | |
.cu-float-button_simple, | |
.cu-float-button__toggle-simple-container-create-task:before { | |
border-radius: 0px!important; | |
border: unset!important; | |
transition: unset!important; | |
transform: unset!important; | |
} | |
.cu-create-task-draft-lazy:not(.cu-create-task-draft-lazy_embed) { | |
right: 0px!important; | |
bottom: 38px!important; | |
box-shadow: unset!important; | |
} | |
.cu-simple-bar__container { | |
height: calc(100vh - 37px)!important; | |
} | |
.dark-theme .cu-tray-item:not(.cu-tray-item_v3):not(.cu-tray-item_in-dropdown) { | |
background-color: #333!important; | |
} | |
.cu-float-button_simple .cu-float-button__toggle-simple-container-create-task { | |
border-radius: 0px!important; | |
} | |
.cu-dashboard-table__body:not(.cu-dashboard-table__body_v3) { | |
padding: unset!important; | |
} | |
.task-history__scroll-view { | |
padding: 0 16px!important; | |
} | |
.task-container__header-wrapper { | |
min-height: 30px!important; | |
} | |
.task-minimize, | |
.task-close { | |
height: 30px!important; | |
border-radius: 0px!important; | |
} | |
.task-minimize { | |
width: 48px!important; | |
right: 56px!important; | |
} | |
.task-close { | |
width: 48px!important; | |
right: 0px!important; | |
} | |
.task-minimize__icon { | |
right: 0px!important; | |
bottom: 0px!important; | |
} | |
.task__header { | |
min-height: unset!important; | |
} | |
.task__toolbar { | |
padding: 8px!important | |
} | |
.task-name-block { | |
padding: 8px!important; | |
margin: unset!important; | |
position: unset!important; | |
} | |
.task-name-container { | |
padding: unset!important; | |
margin: unset!important; | |
width: 100%!important; | |
} | |
.cu-task-custom-fields__container { | |
padding: 0px!important; | |
margin: 8px!important; | |
} | |
.ng-tns-c399-281.cu-editor-wrapper.cu-editor_task-view.cu-editor-wrapper_hover.cu-editor-wrapper_show-more.cu-editor-wrapper_active { | |
padding: 8px!important; | |
margin: unset!important; | |
} | |
.task-todo, | |
.task__checklist { | |
padding: 8px!important; | |
} | |
.cu-task-relationships { | |
margin: 8px!important; | |
} | |
.cu-attachments__header { | |
margin: unset!important; | |
padding: 8px!important; | |
} | |
.cu-attachments-tiles-list { | |
padding: 8px!important; | |
} | |
.cu-uploader.cu-uploader_compact { | |
padding: unset!important; | |
} | |
.task-container { | |
top: 0px!important; | |
left: 0px!important; | |
width: 100%!important; | |
height: calc(100% - 38px)!important; | |
max-width: unset!important; | |
border-radius: unset!important; | |
} | |
.cu-grid-layout__gridster.ng-tns-c1064-134.scrollVertical.ng-star-inserted { | |
padding: 16px!important; | |
} | |
.cu-grid-layout-item__toolbar-row { | |
padding: 8px 8px 4px 0!important; | |
} | |
.dark-theme .task-container .cu-task-custom-fields__container .cu-task-custom-fields__container-inner { | |
background: unset!important; | |
background-color: unset!important; | |
} | |
.dark-theme .cu-dashboard-doc-container__content(not:.cu-modal__body) { | |
padding-bottom: 38px!important; | |
} | |
.cu-grid-layout-item:hover .cu-grid-layout-item__toolbar-buttons .cu-grid-layout-item__toolbar-refreshed-timestamp, | |
.cu-dashboard-doc-page__comments .comments-container .cu-comment__aside { | |
visibility: hidden; | |
width: 0px!important; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment