path: root/recipes/trello/darkmode.css

/*----------------------------------------------------------------------
Digital Dark Style by Michael Fabian 'Xaymar' Dirks <info@xaymar.com>.
----------------------------------------------------------------------*/

/* The Theme now has a public GitHub repository!
	Check it out: https://github.com/Xaymar/Trello-Digital-Dark */

/*
  Lightness increases by 5% each Layer. Text is always hsl(0,0%,95%).
  Highlights are done using colors (if the website uses them).
  
  Lightness List:
    0	5%	Background
	1	10%	1st Layer
	2	15%	2nd Layer
	...
*/

/** {
	background-color: transparent !important;
	color: inherit !important;
	border-color: inherit !important;
}*/
/* -- Layer 0 -- */
Layer-0,
/* Background */ body,
.body-light-board-background .board-header,
div.tabbed-pane-header,
div.tabbed-pane-nav,
div#trello-root {
  background: hsl(0, 0%, 5%) !important;
  color: hsl(0, 0%, 50%) !important;
  border-color: hsl(0, 0%, 0%) !important;
}

/* -- Layer 1 -- */
Layer-1,
/* Header */ div#header,
/* Add List */ div.js-add-list,
/* Add List */ div.js-add-list.is-idle span.placeholder,
/* List */ .list,
/* List > Header */ .list .list-header,
/* List > Header > Text */ .list .list-header .list-header-name,
/* Button: "Add a card" */ a.open-card-composer,
/* "Create new board." */ a.board-tile.mod-add,
/* Window Overlay */ div.window-overlay div.window .window-cover:not(.is-covered),
/* Board buttons */ a.boards-page-board-section-header-options-item,
/* Board buttons Text */ a.boards-page-board-section-header-options-item:hover span,
/* Create a new team... */ div.boards-page-board-section a.quiet-button ,
div.tabbed-pane-nav li.tabbed-pane-nav-item a.tabbed-pane-nav-item-button,
/* Profile - Tab Area */ div.tabbed-pane-main-col,
.tabbed-pane-header a.button-link,
form.js-profile-form input, form.js-profile-form textarea,
/* Board Menu */ div.board-menu, div.board-menu-tab-content,
/* Board Menu > Board Navigation Buttons */ div.board-menu a.board-menu-navigation-item-link,
/* Board Menu > Power-Ups > Counter */ div.board-menu a.board-menu-navigation-item-link span.js-enabled-power-up-count,
/* Board Menu > Activity */ div.board-menu a.js-open-activity,
/* Board Page > Tile */ .board-tile,
/* Home > Buttons */ li[class^="app-scripts-views-home-presentational-tab"] > a,
/* Home > Buttons */ li[class^="app-scripts-views-home-presentational-tab"] > button,
/* Home > Buttons */ div[class^="app-scripts-views-home-presentational-highlight"],
/* Home > Starred/Viewed/Links  */ .home-board-section-item:hover {
  background: hsl(0, 0%, 10%) !important;
  color: hsl(0, 0%, 60%) !important;
  border-color: hsl(0, 0%, 5%) !important;
}

/* -- Layer 2 -- */
Layer-2,
/* Header Buttons */ a.header-btn, .body-light-board-background .board-header-btn, ._3jgu2AdlURonAV,
/* Add List */ div.js-add-list:not(.is-idle) input.list-name-input,
/* List Card */ .list .list-card,
/* List Card Title */ .list .list-card .list-card-title,
/* Button: "..." */ a.list-header-menu-icon ,
/* Button: "Add a card"  */ a.open-card-composer:hover ,
/* Window Overlay */ div.window-overlay div.window,
/* Header Search */ input.header-search-input ,
/* Boards */ .boards-drawer ,
/* "Create new board." */ a.board-tile.mod-add:hover,
/* Board buttons */ a.boards-page-board-section-header-options-item:hover,
a.boards-page-board-section-header-options-item:hover span,
/* Create a new team... */ div.boards-page-board-section a.quiet-button:hover,
div.tabbed-pane-nav li.tabbed-pane-nav-item a.tabbed-pane-nav-item-button:hover , 
a.board-tile.mod-add,
.window-module .js-search,
.setting-item .helper,
div.tabbed-pane-main-col div.action-comment,
div.tabbed-pane-main-col p.gutter,
div.tabbed-pane-main-col div.member-login,
div.tabbed-pane-main-col input.js-add-email,
div.tabbed-pane-main-col input.js-log-out-other,
div.tabbed-pane-main-col input.js-revoke,
div.tabbed-pane-main-col a.big-link,
/* Profile - Cards - Card */ .tabbed-pane-main-col .js-cards-content .list-card,
/* Organization - Members - Find Members */ .tabbed-pane-main-col .org-members-page-layout .org-members-page-layout-sidebar input,
/* Organization - Members - Add Members Button */ .tabbed-pane-main-col .org-members-page-layout .button-link,
/* Organization - Settings - Business Class */ .tabbed-pane-main-col .org-bc-settings,
/* Organization - Business Class - Input */ .tabbed-pane-main-col .credit-card-form input,  .tabbed-pane-main-col .credit-card-form .iframe-input,
form.js-profile-form input:hover, form.js-profile-form textarea:hover,
/* Board Menu > Member */ div.board-menu div.member,
/* Board Menu > Add Member Button */ div.board-menu a.button-link,
/* Board Menu > Board Navigation Buttons */ div.board-menu a.board-menu-navigation-item-link:hover,
/* Board Menu > Power-Ups > Counter */ div.board-menu a.board-menu-navigation-item-link:hover span.js-enabled-power-up-count,
/* Board Menu > Activity */ div.board-menu a.js-open-activity:hover,
/* Board Menu > Activity Entry */ div.board-menu div.js-menu-action-list div.phenom,
/* Window - Title */ .window .window-title textarea,
/* Window - Description */ .window .description-content,
/* Board Page > Tile */ .board-tile:hover,
/* Home > Buttons */ li[class^="app-scripts-views-home-presentational-tab"] > a:hover,
/* Home > Buttons */ li[class^="app-scripts-views-home-presentational-tab"] > a:active,
/* Home > Buttons */ li[class^="app-scripts-views-home-presentational-tab"] > button:hover,
/* Home > Buttons */ li[class^="app-scripts-views-home-presentational-tab"] > button:active,
/* Home > Highlights > Issue */ div[class^="app-scripts-views-home-presentational-highlight"] > ul > li > div,
/* Home > Highlights > Issue */ div[class^="app-scripts-views-home-presentational-highlight"] > ul > li .canonical-card a.canonical-stretch,
/* Home > Highlights > Comment */ div[class^="app-scripts-views-home-presentational-highlight"] > ul > li .canonical-comment > div {
  background: hsl(0, 0%, 15%) !important;
  color: hsl(0, 0%, 70%) !important;
  border-color: hsl(0, 0%, 10%) !important;
}

/* List Card */
.list .list-card,
/* Highlight Area - Entries */ .member-boards-view .canonical-card a.canonical-stretch {
  box-shadow: 0 1px 0 #111 !important;
}

/* -- Layer 3 -- */
Layer-3,
/* Header Button */ a.header-btn:hover,
/* Header Search */ input.header-search-input:hover,
/* List Card */ .list .list-card:hover ,
/* List Card Title */ .list .list-card:hover .list-card-title,
/* Button: "..." */ a.list-header-menu-icon:hover,
/* Button: (pencil) */ span.list-card-operation,
/* Pop Overs */ div.pop-over,
/* Window Overlay: Button Links */ div.window a.button-link,
/* Board Search */ .boards-drawer input.js-search-boards,
.boards-drawer .quiet-button,
a.board-tile.mod-add:hover,
div.tabbed-pane-main-col input.js-add-email:hover,
div.tabbed-pane-main-col input.js-log-out-other:hover,
div.tabbed-pane-main-col input.js-revoke:hover,
div.tabbed-pane-main-col a.big-link:hover,
/* Organization - Members - Find Members */ .tabbed-pane-main-col .org-members-page-layout .org-members-page-layout-sidebar input:hover,
/* Organization - Members - Add Members Button */ .tabbed-pane-main-col .org-members-page-layout .button-link:hover,
/* Organization - Business Class - Input */ .tabbed-pane-main-col .credit-card-form input:hover, .tabbed-pane-main-col .credit-card-form .iframe-input:hover,
.checklist-item:hover,
.window .action-comment,
.window .button-link,
.window .card-detail-badge,
.window .card-detail-item-add-button,
.window .comment-box,
.window .confirm,
.window .checklist-new-item-text,
.window .checklist-item-checkbox,
.window .checklist-progress-bar,
.window .js-format-help,
.window .js-search:hover,
.window .quiet-button:hover,
.windows .js-new-checklist-item-button,
textarea.checklist-new-item-text::placeholder,
.js-checkitem-input,
.phenom,
.list .list-card .badge.is-voted,
/* Board Menu > Add Member Button */ div.board-menu a.button-link:hover,
/* Phenom Entry > Comment */ div.board-menu div.js-menu-action-list div.phenom div.current-comment, 
/* Window - Title */ .window .window-title textarea,
/* Window - Description */ .window .description-content .edit textarea,
/* Window - Checklist Item - Textarea */ div.window-overlay div.checklist-item-details.editing > div > textarea,
/* Card - Inline Code */ .window .card-detail-item code,
/* Card - Embedded Code */ .window .card-detail-item pre,
/* Card - Quote */ .window .card-detail-item blockquote,
/* Home > Highlights > Issue */ div[class^="app-scripts-views-home-presentational-highlight"] > ul > li .canonical-card a.canonical-stretch:hover,
/* Home > Highlights > Comment > Overflow */ div[class^="app-scripts-views-home-presentational-highlight"] > ul > li .canonical-comment > div > div > .canonical-overflow-button,
/* Home > Highlights > Comment > Reply */ div[class^="app-scripts-views-home-presentational-highlight"] > ul > li .canonical-comment > div > div > .canonical-comment-icon-button {
  background: hsl(0, 0%, 20%) !important;
  color: hsl(0, 0%, 80%) !important;
  border-color: hsl(0, 0%, 15%) !important;
}

/* -- Layer 4 -- */
Layer-4,
span.list-card-operation:hover /* Button: (pencil) */,
div.window .button-link:hover /* Window Overlay: Button Links */,
.boards-drawer input.js-search-boards:hover /* Board Search */,
.boards-drawer .sidebar-section-header-toggle-icon:hover,
.boards-drawer a.quiet-button:hover,
.boards-drawer-header,
a.js-new-tip:hover, a.js-tip:hover, .meta-link-list-item-link:hover,
.mod-notifications div.action-comment,
.window .button-link:hover,
.window .comment-box a:hover,
.window .confirm:hover,
.window .card-detail-window .attachment-thumbnail:hover,
.window .card-detail-item-add-button:hover,
.window .dark-hover:hover .icon-sm,
.window .js-format-help:hover,
.phenom.mod-unread,
/* Card - Comment - Card Link */ .phenom .comment-container a.known-service-link,
/* Card - Description - Card Link */ .window .card-detail-item a.known-service-link,
.list .list-card:hover .badge.is-voted,
/* Card - Inline Code */ .window .comment-container code,
/* Card - Embedded Code */ .window .comment-container pre,
/* Card - Quote */ .window .comment-container blockquote,
/* Home > Highlights > Comment > Overflow */ div[class^="app-scripts-views-home-presentational-highlight"] > ul > li .canonical-comment > div > div > .canonical-overflow-button:hover,
/* Home > Highlights > Comment > Reply*/ div[class^="app-scripts-views-home-presentational-highlight"] > ul > li .canonical-comment > div > div > .canonical-comment-icon-button:hover {
  background: hsl(0, 0%, 25%) !important;
  color: hsl(0, 0%, 90%) !important;
  border-color: hsl(0, 0%, 15%) !important;
}

/* -- Layer 5 -- */
Layer-5,
.phenom.mod-unread:hover,
/* Card - Comment - Card Link */ .phenom .comment-container a.known-service-link:hover,
/* Card - Description - Card Link */ .window .card-detail-item a.known-service-link:hover {
  background: hsl(0, 0%, 30%) !important;
  color: hsl(0, 0%, 90%) !important;
  border-color: hsl(0, 0%, 20%) !important;
}

/* -- Unlayered Elements -- */
a /* Links */,
.header-search-icon {
  color: hsl(0, 0%, 75%) !important;
}

a:hover /* Links */,
.header-search-icon:hover, 
.header-search-icon-dark.header-search-icon:hover,
.card-composer .list-card-composer-textarea,
.window .card-detail-edit .field,
.window .comment-box .comment-box-input {
  color: hsl(0, 0%, 95%) !important;
  background: transparent !important;
}

.button-link {
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.5) !important;
}

.compact-board-tile-fade {
  background: rgba(0, 0, 0, 0.88) !important;
}

div.tabbed-pane-nav {
  border-color: hsl(0, 0%, 5%) !important;
}

div.tabbed-pane-main-col *,
div.mod-notifications .phenom {
  border-color: hsl(0, 0%, 25%) !important;
}

div.tabbed-pane-main-col input.js-add-email,
div.tabbed-pane-main-col input.js-log-out-other,
div.tabbed-pane-main-col input.js-revoke,
form.js-profile-form input.js-submit-profile,
form.js-profile-form input.js-cancel-edit-profile,
.window .confirm {
  box-shadow: none !important;
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
  border-color: transparent;
  color: inherit;
}

.window .comment-box .comment-box-input:focus {
  background: transparent !important;
}

/* Horizontal Bars */
hr {
  background: hsl(0, 0%, 5%) !important;
}

/* Phenom Entry */
div.phenom {
  margin-left: 0px;
  margin-bottom: 2px;
  padding: 10px 5px 8px 38px;
}
/* Phenom Entry > Member */
div.phenom div.phenom-creator {
  left: 5px;
}
/* Phenom Entry > Member */
div.phenom.mod-other-type div.phenom-creator {
  left: 12px;
}

/* List Card Details (Sticker) */
.list-card .list-card-details,
/* List Card Details (Sticker) */ .list-card.is-stickered .list-card-details,
/* List Card Details (Sticker) */ .list-card.active-card.is-stickered .list-card-details,
/* Card Attachment */ .attachment-thumbnail.ui-sortable-helper, .attachment-thumbnail:hover .attachment-thumbnail-details {
  background: none;
}

/* List > Header > Text */
.list .list-header .list-header-name:not(.is-editing) {
  border-color: transparent !important;
}

/* Card (Popover) - Expand Description */
.window .card-detail-window .card-detail-item .description-content-fade-button {
  background: linear-gradient(
    180deg,
    hsla(0, 0%, 15%, 0),
    hsla(0, 0%, 15%, 0) 370px,
    hsla(0, 0%, 15%, 1) 400px
  );
}
.window
  .card-detail-window
  .card-detail-item
  .description-content-fade-button
  .description-content-fade-button-text {
  background: transparent !important;
  color: hsl(0, 0%, 70%) !important;
}
.window
  .card-detail-window
  .card-detail-item
  .description-content-fade-button
  .description-content-fade-button-text:hover {
  background: transparent !important;
  color: hsl(0, 0%, 80%) !important;
}

/* Card - Quote */
.window .card-detail-item blockquote {
  border-left: 5px rgba(0, 0, 0, 0.5) solid !important;
}

.window .comment-container .action-comment {
  box-shadow: none !important;
}

/* ----- ----- ----- ----- ----- ----- ----- ----- ----- -----
   Card Labels
   ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
.card-label-red {
  background-color: hsl(0, 100%, 20%) !important;
}
.card-label-orange {
  background-color: hsl(30, 100%, 20%) !important;
}
.card-label-yellow {
  background-color: hsl(60, 100%, 20%) !important;
}
.card-label-lime {
  background-color: hsl(90, 100%, 20%) !important;
}
.card-label-green {
  background-color: hsl(120, 100%, 20%) !important;
}
.card-label-sky {
  background-color: hsl(180, 100%, 20%) !important;
}
.card-label-blue {
  /* Deep Blue has poor visibility in browsers, especially next to grays. */
  /*background-color: hsl(240, 100%, 20%) !important;*/
  background-color: hsl(220, 100%, 30%) !important;
}
.card-label-purple {
  background-color: hsl(270, 100%, 20%) !important;
}
.card-label-purple {
  background-color: hsl(300, 100%, 20%) !important;
}
.card-label-pink {
  background-color: hsl(330, 100%, 20%) !important;
}
.card-label-black {
  background-color: hsl(0, 0%, 0%) !important;
}
.card-label-null {
  background-color: hsl(0, 0%, 30%) !important;
}

/* ----- ----- ----- ----- ----- ----- ----- ----- ----- -----
   Card Aging
   ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
.aging-regular.aging-level-0 {
  opacity: 1;
}
.aging-regular.aging-level-1 {
  opacity: 0.9;
}
.aging-regular.aging-level-2 {
  opacity: 0.8;
}
.aging-regular.aging-level-3 {
  opacity: 0.7;
}

.aging-pirate.aging-level-0 {
  background-image: none !important;
  box-shadow: none;
  opacity: 1;
}
.aging-pirate.aging-level-0.is-stickered .list-card-details,
.aging-pirate.aging-level-0 .list-card-details {
  background-image: none !important;
  background-color: transparent;
}

.aging-pirate.aging-level-1 {
  background-image: none !important;
  box-shadow: none;
  opacity: 0.9;
}
.aging-pirate.aging-level-1.is-stickered .list-card-details,
.aging-pirate.aging-level-1 .list-card-details {
  background-image: none !important;
  background-color: transparent;
}

.aging-pirate.aging-level-2 {
  background-image: none !important;
  box-shadow: none;
  opacity: 0.8;
}
.aging-pirate.aging-level-2.is-stickered .list-card-details,
.aging-pirate.aging-level-2 .list-card-details {
  background-image: none !important;
  background-color: transparent;
}

.aging-pirate.aging-level-3 {
  background-image: none !important;
  box-shadow: none;
  opacity: 0.7;
}
.aging-pirate.aging-level-3.is-stickered .list-card-details,
.aging-pirate.aging-level-3 .list-card-details {
  background-image: none !important;
  background-color: transparent;
}

/* ----- ----- ----- ----- ----- ----- ----- ----- ----- -----
   Home Area
   ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
.member-boards-view {
  background-color: transparent !important;
}

/* Home > Highlights > Issue */
div[class^="app-scripts-views-home-presentational-highlight"] > ul > li .canonical-card a.canonical-stretch > div,
/* Home > Highlights > Comment */ div[class^="app-scripts-views-home-presentational-highlight"] > ul > li .canonical-comment > div > div,
/* Home > Highlights > Comment */ div[class^="app-scripts-views-home-presentational-highlight"] > ul > li .canonical-comment > div > div > div > div {
  background-color: transparent !important;
  color: inherit !important;
}

/* Home > Starred/Viewed/Links  */
.home-board-link span > span {
  color: hsl(0, 0%, 60%) !important;
}

/* ----- ----- ----- ----- ----- ----- ----- ----- ----- -----
   Webkit-only here (Chrome, Opera, Steam)
   ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
::-webkit-scrollbar {
  background: transparent !important;
  height: 12px !important;
  width: 12px !important;
}
::-webkit-scrollbar-button {
  display: none !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-track:horizontal {
  margin-left: 4px !important;
  margin-right: 4px !important;
}
::-webkit-scrollbar-track:vertical {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}
::-webkit-scrollbar-track-piece {
  background: #050505 !important;
  border-radius: 0px !important;
}
::-webkit-scrollbar-thumb {
  background: #222222 !important;
  border-radius: 16px;
}
::-webkit-scrollbar-thumb:hover {
  box-shadow: inset 0 0 6px #777;
}