stylus_basecamp_darkmode

stylus_basecamp_darkmode.css

/* Work in progress.
   A Basecamp 3 dark theme for Stylus
   (https://addons.mozilla.org/en-US/firefox/addon/styl-us/)
   based on https://userstyles.org/styles/177262/basecamp-insomnia */
:root {
    --bg-md: #2f2f2f;
    --bg-md-2: #454545;
    --bg-lt: #1c1c1e;
    --bg-dk: #232527;
    --bg-primary: #272727;
    --text-md: #b1b1b1;
    --text-lt: #ccc;
    --text-dk: #111;
    --text-primary: #26c6a3;
    --bg-client-show: #fbca07;
    --text-client-show: #283c46;
    --highlight-color:#ff005d;
}

body {
    color: var(--text-md);
    background-color: var(--bg-dk);
}

/* LINKS and HIGHLIGHTED THEME TEXT */
/*
a{
   color:  var(--text-primary)  !important;
}
*/
.decorated,
.autolinked,
.chat-line--integration .chat-line__body a,
.formatted_content a:not(.unstyled):not(.attachment__toolbar):not([contenteditable=false]):not([data-trix-attachment]),
.formatted_content a .mentionable-person,
.recordable--todoset .todolist__permalink,
.ui-datepicker-today a,
.project-index__header,
.project-index__description,
.latest-activity__project,
.calendar-grid__items,
.todo__note,
.todo__assignee,
.todo__date,
.boosts-report__date > span,
.boosts-report__date > span,
.txt--uncolor,
.project-list__group-header {
    color: var(--text-primary) !important;
}
/* LIGHT BG, LIGHT TEXT, DARK BORDER */
.btn,
.search__reset,
.report-menu__item--selected,
.input,
.nav-menu__sheet,
.message .boosts,
.document .boosts,
.recordable .boosts,
.boosts-report .boosts,
.boost,
.todos-form__date,
.btn--arrow-top-icon,
bc-autocomplete:not([multiple]) .autocompletableFDSFSD {
    color: var(--text-lt) !important;
    background-color: var(--bg-lt) !important;
    border-color: var(--bg-dk) !important;
}
/* MEDIUM BG, MEDIUM TEXT, DARK BORDER */
.modal-sheet ,
.card,
.options-menu__content,
.input--select,
bc-autocomplete .autocompletable,
.btn__keyboard-shortcut,
.panel--perma,
.panel--project,
.prompt,
.recordable,
.report-menu__item:hover:not(.report-menu__item--selected),
.card__link,
.boosts-report__card,
.chat__header--profile,
.recording-breadcrumbs,
.chat__header,
.chat-line__bubble,
.messages-table td {
    background-color: var(--bg-md) !important;
    color: var(--text-md) !important;
    border-color: var(--bg-dk) !important;
}

.chat-line--me .chat-line__bubble {
    background: var(--bg-lt) !important;
}
.chat-line__bubble {
     background: var(--bg-md-2) !important;
}

/* LIGHT BG COLOR */
.checkbox__button,
.options-menu__action:hover,
.tabs__tab--activ {
    background-color: var(--bg-lt) !important;
}
/* MEDIUM BG COLOR */
.miniaturize-cards .card--folder,
.card-grid--miniaturized .card--folder,
.card__content,
.boosts-report__date > span,
.search-result--selected,
.break > span,
.reading--show-actions,
.reading__actions,
.thread-entry--no-background,
.list--tableview li,
.nav__recent:hover,
.nav__my-stuff:hover,
.reading:hover,
.sheet {
    background-color: var(--bg-md) !important;
}

/* SLIGHTLY DARKER VARIATION OF MEDIUM BG COLOR */
.card::before,
.thread-entry,
.sheet--flat {
    background-color: var(--bg-md-2);
}
/* DARK BG COLOR */
.nav__main,
.ui-datepicker,
.ui-datepicker-header,
.break--on-background > span,
.custom-radio__button {
    background-color: var(--bg-dk) !important;
}

/* THEME COLOR BG */
.action-sheet__content,
trix-editor .attachment__toolbar {
    background-color: var(--bg-primary) !important;
}

/* LIGHT TEXT COLOR */
.tabs__tab:hover,
.tabs__tab--active,
.calendar-grid__month,
.calendar-grid__weekday,
.todo .todo__unassigned-unscheduled,
.copy-to-clipboard--for-search-result .copy-to-clipboard__button,
.options-menu__action:hover,
.tabs__tab--activ,
.nav__recent:hover,
.nav__my-stuff:hover,
.reading:hover {
    color: var(--text-lt) !important;
}

/* MEDIUM TEXT COLOR */
.reading__metadata,
.attachment--preview .attachment__caption,
.attachment:not(.attachment--preview) .attachment__caption > .attachment__size,
.attachment:not(.attachment--preview) .attachment__caption .attachment__attributes,
.floating-placeholder__label,
.recordable--todo .todo__header .checkbox__text,
.card__content > footer,
.scheduled-event__metadata,
.metadata-color,
.txt--very-subtle,
.txt--subtle,
.chat-line__timestamp,
.todo-progress__ratio,
.thread-entry__time {
    color: var(--text-md) !important;
}

/* DARK TEXT COLOR */
.message__date a,
.message__date .link_button {
    color: var(--text-dk);
}

/* BORDERS */
table,
.todo-ledger__column,
.todo-ledger__header,
.card--app .card__header,
.messages-table--for-card,
.latest-activity::before,
.tabs,
.tabs__tab,
.calendar-grid__cell,
.calendar-grids,
.schedule-day,
.schedule__load-more,
.thread__subscriptions,
.list-picker-item + .list-picker-item,
.checkbox__button,
.schedule-card__agenda-view .schedule-month,
.recordable__archived-children,
.todos-form,
.schedule-month,
.questionnaire__question,
.card-inbox__forward,
.perma__header,
.list--tableview .list__action,
.notice--yellow,
.options-menu__action + .options-menu__title,
.message__attribution,
.tabs__tab:hover:not(.tabs__tab--active),
.custom-radio__button {
    border-color: var(--bg-dk) !important;
}

.custom-radio__input:checked + .custom-radio__button {
    border-color: var(--text-primary) !important;
}

/* REMOVE SHADOWS */
.panel--perma,
.panel--project,
.project-avatars__edit::after,
.tabs__tab--active,
.card--torn,
.recording-breadcrumbs,
.ui-datepicker,
.sheet--shadowed {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.card--app .card__description {
    text-shadow: none !important;
}

/* RICH TEXT EDITOR */
trix-toolbar,
.trix-contained-input,
trix-toolbar .trix-dialog.trix-active.trix-dialog--link .trix-dialog__link-fields input[type=url],
trix-toolbar .trix-dialog.trix-active.trix-dialog--link .trix-dialog__link-fields input[type=button]:last-of-type {
    color: var(--text-light) !important;
    background-color: var(--bg-dk);
    border-color: var(--bg-md);
}

.trix-contained-input a {
    color: var(--text-light) !important;
}

.trix-contained-input .attachment--preview .attachment__caption {
    color: #6d6d6d !important;
}

trix-toolbar .trix-dialog.trix-active {
    background-color: var(--bg-md);
}

trix-toolbar .trix-dialog.trix-active.trix-dialog--link .trix-dialog__link-fields input[type=button],
trix-toolbar .trix-button.trix-button--icon.trix-active {
    background-color: var(--bg-primary);
    border-color: var(--bg-md);
}

.formatted_content pre {
    background-color: rgba(255, 255, 255, 0.035);
}

.sticky-trix-toolbar {
    border-color: var(--bg-lt);
}


/* INPUT PLACEHOLDER TEXT */
::-webkit-input-placeholder {
    color: var(--text-md) !important;
}

:-ms-input-placeholder {
    color: var(--text-md) !important;
}

::-moz-placeholder {
    color: var(--text-md) !important;
}

::-ms-input-placeholder {
    color: var(--text-md) !important;
}

::placeholder {
    color: var(--text-md) !important;
}

/* CSS ARROW PSEUDO ELEMENT and OTHER */
hr,
.expanded .options-menu__expansion-toggle::after {
    border-bottom-color: var(--bg-md) !important;
}

.expanded .options-menu__expansion-toggle::before {
    border-bottom-color: var(--bg-dk) !important;
}

.break::before {
    border-bottom-color: var(--bg-lt) !important;
}

.break--on-background::before {
    border-bottom-color: var(--bg-lt) !important;
}

.nav-menu.expanded::after {
    border-bottom-color: var(--bg-lt) !important;
}

/* OTHER EFFECTS */
.card__content > footer {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(30%, var(--bg-md))) !important;
    background: -o-linear-gradient(rgba(255, 255, 255, 0), var(--bg-md) 30%) !important;
    background: linear-gradient(rgba(255, 255, 255, 0), var(--bg-md) 30%) !important;
}

.calendar-grids__nav {
    opacity: 0.75 !important;
}

.help-button__icon {
    -webkit-filter: invert(1) !important;
    filter: invert(1) !important;
    background-color: var(--highlight-color) !important;
}



.boosts-report__date,
.card--torn::before,
.card--torn::after {
    background: none !important;
}

.thread-entry__avatar,
.chat-line__avatar .avatar {
    -webkit-box-shadow: 0 0 0 1px var(--bg-md), 0 0 0 5px var(--bg-md) !important;
    box-shadow: 0 0 0 1px var(--bg-md), 0 0 0 5px var(--bg-md) !important;
}

.notice--yellow {
    background-color: #54524a !important;
}

.options-menu__content,
trix-toolbar .trix-dialog.trix-active {
    -webkit-box-shadow: 0 0 4px black, 0 5px 20px black;
    box-shadow: 0 0 4px black, 0 5px 20px black;
}
.btn.btn--client-show {
    background-color: var(--bg-client-show) !important;
    color: var(--text-client-show) !important;
}
.todolist-group__header .break::after {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, transparent 100%)
}

.action-sheet__expansion-toggle {
    border-color: var(--bg-client-show) !important;
}
.client-visibility-flag{
     color: var(--text-dk) !important;
}

/* LOGO */
/*
.nav__link--accounts {
   filter: invert(50%)
}

.nav__link{
    color: var(--text-primary);
}
*/
/*tasks*/
.todo__drag-handle, .estimate_block, .hill-chart__renderer{
   background-color: var(--bg-client-show); 
    color: var(--text-dk) !important; 
    fill: var(--text-dk) !important; 
}
.estimate_block{
    color: var(--text-dk) !important;
 }

/* TRACKEDHQ */
#button_bar{
    background-color: #2b2b2b !important;
}
#viewing_board .board-card {
    background-color: #2b2b2b;
    color: #ddd;
}
#viewing_board .add_new_todo_show_form_container{
    background-color: #232527;
    color: #ddd;
}
#viewing_board #button_bar {
    background-color: black!important;
}
#viewing_board .column-content {
    scrollbar-width: none;
}
#viewing_board .list_name {
    color: white;
}
#viewing_board .estimate {
    color: var(--bg-client-show);
    border-color: var(--bg-client-show);
}
#viewing_board .add_new_todo_show_form {
    color: #232527;
}
.tracked_card {
    background: var(--bg-md);
}
.tracked_container_text {
    color: var(--text-md);
}
.panel.panel--project div.break center span {
    background-color: black !important;
    color: var(--text-lt);
}