-
-
Save waylaidwanderer/36e96abad981ef18110871aa4abad153 to your computer and use it in GitHub Desktop.
[Stylus] Basecamp 3 - Dark mode
This file contains hidden or 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
| body { | |
| background: #191919; | |
| color: #d2d2d2; | |
| } | |
| h1 { | |
| color: #d2d2d2; | |
| } | |
| .nav__bar { | |
| border-bottom: 1px solid #ffffff1c; | |
| } | |
| .nav__bar, | |
| .nav__main { | |
| background: #212121; | |
| color: #d2d2d2; | |
| } | |
| .unread-badge { | |
| filter: invert(1); | |
| color: black; | |
| } | |
| .nav__link--me .avatar, | |
| .nav__link--accounts { | |
| filter: inherit; | |
| } | |
| .card { | |
| background: #101010; | |
| color: #d2d2d2; | |
| border: 1px solid rgba(0, 0, 0, 0.2); | |
| } | |
| .date_divider span, | |
| .latest-activity span, | |
| .latest-activity__project-headline span, | |
| .project-index__header span { | |
| background: none; | |
| color: #d2d2d2; | |
| } | |
| .panel.filterable-projects { | |
| background: none; | |
| } | |
| .panel--project { | |
| background: rgba(255, 255, 255, 0.04); | |
| box-shadow: none; | |
| color: #d2d2d2; | |
| } | |
| .chat-line__bubble { | |
| background: rgba(255, 255, 255, 0.1); | |
| color: #d2d2d2; | |
| } | |
| time { | |
| color: #d2d2d2; | |
| } | |
| .chat-line--me .chat-line__bubble { | |
| background: #0e0e0e; | |
| } | |
| .btn { | |
| background-color: black; | |
| color: #d2d2d2; | |
| border: black; | |
| } | |
| .project-avatars__edit:after { | |
| box-shadow: none; | |
| } | |
| .recording-breadcrumbs { | |
| background: #272727; | |
| box-shadow: none; | |
| } | |
| .chat, | |
| .chat__header, | |
| .panel { | |
| background: #212121; | |
| box-shadow: none; | |
| border: 1px solid #383838; | |
| } | |
| .chat, | |
| .chat__header { | |
| border: none; | |
| } | |
| .chat-line--mention .chat-line__bubble { | |
| background: #46403d; | |
| } | |
| .person-title { | |
| color: rgb(109, 109, 109); | |
| } | |
| .panel.flush--ends { | |
| background: none; | |
| border: none; | |
| } | |
| .thread__subscriptions { | |
| border-top: 1px solid #353535; | |
| } | |
| .chat__header-block, | |
| .decorated { | |
| color: #d2d2d2; | |
| } | |
| .chat a { | |
| color: #8aa8cd; | |
| } | |
| .input { | |
| background: #323232; | |
| border-color: #1b1b1b; | |
| color: #d2d2d2; | |
| } | |
| .chat__emoji-button, | |
| .chat__attach-button { | |
| filter: brightness(1000); | |
| } | |
| .recordable { | |
| background: none; | |
| color: #d2d2d2; | |
| } | |
| trix-toolbar { | |
| background: none; | |
| } | |
| trix-toolbar .trix-button { | |
| filter: invert(1) | |
| } | |
| .push_half--bottom { | |
| color: #d2d2d2; | |
| } | |
| .nav-menu__sheet { | |
| background: #131313; | |
| } | |
| .nav-menu.expanded:after { | |
| border-bottom-color: #131313; | |
| } | |
| .thread-entry { | |
| background-color: #171717; | |
| } | |
| .thread-entry__avatar { | |
| box-shadow: 0 0 0 5px #222222; | |
| } | |
| .thread-entry__time { | |
| color: #d2d2d2; | |
| } | |
| .prompt { | |
| color: #d2d2d2; | |
| display: block; | |
| width: 100%; | |
| background: #1f1f1f; | |
| border: 1px solid #313131; | |
| } | |
| .trix-contained-input { | |
| background: #212121; | |
| border-color: #333333; | |
| } | |
| .sticky-trix-toolbar { | |
| border-bottom-color: #3a3a3a; | |
| } | |
| trix-editor { | |
| background: #060606; | |
| color: #d2d2d2; | |
| } | |
| .break > span { | |
| background: none; | |
| } | |
| .break:before { | |
| display: none; | |
| } | |
| .thread__subscriptions .thread-entry { | |
| background: none; | |
| } | |
| .message__date a, | |
| .message__date .link_button { | |
| color: #d2d2d2; | |
| text-decoration: none; | |
| } | |
| .card--app .card__description { | |
| text-shadow: none; | |
| } | |
| .latest-activity:before { | |
| border-left: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .report-menu__item--selected { | |
| background: #4e4e4e; | |
| } | |
| .help-button__icon { | |
| display: none; | |
| } | |
| .boost { | |
| background: #0e0e0e; | |
| color: #d2d2d2; | |
| border: 1px solid #ffffff1c; | |
| } | |
| .message .boosts, | |
| .document .boosts, | |
| .recordable .boosts, | |
| .boosts-report .boosts { | |
| background: none; | |
| } | |
| .boost-form.expanded .input--boost { | |
| background: none; | |
| } | |
| .message__attribution { | |
| border-color: #3c3c3c; | |
| } | |
| .chat-line__avatar .avatar { | |
| background: none; | |
| box-shadow: 0 0 0 4px #1a1a1a; | |
| } | |
| .card--app .card__header, | |
| .messages-table--for-card { | |
| border-color: #2d2d2d; | |
| } | |
| .sheet { | |
| background: #151515; | |
| } | |
| .sheet--shadowed { | |
| box-shadow: none; | |
| } | |
| .panel--profile { | |
| background: none; | |
| } | |
| bc-suggestion-select bc-suggestion-option { | |
| background: #252525; | |
| } | |
| .emoji-picker__modal { | |
| background: #131313; | |
| } | |
| .emoji-picker__toggle:after, | |
| .emoji-picker__toggle:before { | |
| display: none; | |
| } | |
| .chat__typing-status { | |
| background: none; | |
| color: #d2d2d2; | |
| } | |
| .search__exclude-chat { | |
| background: #403c12; | |
| } | |
| .search-result--selected { | |
| background: #2b3661; | |
| } | |
| .notice--for-recording { | |
| background: #171717; | |
| } | |
| .push_half--top { | |
| box-shadow: none; | |
| } | |
| .options-menu__content { | |
| background: #191919; | |
| color: #d2d2d2; | |
| } | |
| .options-menu__expansion-toggle::after { | |
| display: none; | |
| } | |
| .recording-color--white { | |
| background: transparent !important; | |
| } | |
| .todolist-group__header .break::after { | |
| background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #212121 100%); | |
| } | |
| .latest-activity__full-width .activity-item { | |
| background: #212121; | |
| } | |
| .expanded .options-menu__expansion-toggle:before { | |
| display: none; | |
| } | |
| .todo.selected { | |
| background-color: #151515; | |
| } | |
| .todo-edit-menu { | |
| background: #191919; | |
| border: 1px solid #2b2b2b; | |
| } | |
| .action-menu:before, | |
| .action-menu:after { | |
| display: none; | |
| } | |
| .action-list + .action-list { | |
| border-top: 1px solid #313131; | |
| } | |
| pre { | |
| background: rgba(255, 255, 255, 0.03); | |
| } | |
| .schedule-day__mini-date { | |
| filter: invert(1); | |
| } | |
| .miniaturize-cards .card--folder, | |
| .card-grid--miniaturized .card--folder { | |
| background-color: #191919; | |
| } | |
| .card__content > footer { | |
| background: linear-gradient(rgba(255, 255, 255, 0), #101010 30%); | |
| } | |
| blockquote { | |
| border-left: 3px solid #fff; | |
| } | |
| .todolist-group__header .break::after { | |
| background: none; | |
| } | |
| .todolist-group__color { | |
| color: #313131; | |
| } | |
| .todo__drag-handle, | |
| .todolist__drag-handle { | |
| filter: invert(1); | |
| } | |
| .back-to-top__button { | |
| filter: invert(1); | |
| color: gray; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment