Added trello darkmode (#719)

2 files changed, 495 insertions, 1 deletions

diff --git a/recipes/trello/darkmode.css b/recipes/trello/darkmode.css
new file mode 100644
index 0000000..36b484e
--- /dev/null
+++ b/recipes/trello/darkmode.css
@@ -0,0 +1,494 @@
+/*----------------------------------------------------------------------
+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;
+}
diff --git a/recipes/trello/package.json b/recipes/trello/package.json
index b3dce40..30aaae8 100644
--- a/recipes/trello/package.json
+++ b/recipes/trello/package.json
@@ -1,7 +1,7 @@
 {
   "id": "trello",
   "name": "Trello",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "license": "MIT",
   "config": {
     "serviceURL": "https://trello.com/"