Trello - EasyArabic by AmerSoft

@name Trello - EasyArabic
@version 1.0
@namespace url-prefix("https://trello.com/b"), url-prefix("https://trello.com/c") 
@-moz-document url-prefix("https://trello.com/b"), url-prefix("https://trello.com/c") {
/*===========================================================
=					Trello - Easy Arabic					=
=============================================================

  @author: Amer Bakeer
  @date: 25 Oct 2017

*/
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* For Arabic:
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* Make checklist, text areas display mixed Arabic & English text correctly: */
.checklist-item-details .checklist-item-row .checklist-item-text-and-controls {
    display: inline-flex;
    flex-flow: row-reverse;
}

.checklist-item-row,
textarea.js-checkitem-input,
textarea.js-description-draft,
textarea.card-back-description,
textarea.checklist-new-item-text,
textarea.js-new-checklist-item-input,
.checklist-item-details-text {
    direction: rtl;
    text-align: initial !important;
    unicode-bidi: plaintext;
}
.action-comment p {
    direction: rtl;
    unicode-bidi: plaintext;
}

/* For Comments: */
.action-comment {
    width: 100%;
}
/* For Lists inside Comments: */
.markeddown ul > li {
    margin: 8px 20px;
}
.adgMarkdown .markdown ol,
.adgMarkdown .markdown ul,
.adgMarkdown .markeddown ol,
.adgMarkdown .markeddown ul {
    padding: 0px 24px;
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* Plugin Name: Next Step for Trello
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.aj-next-step {
    font-family: inherit !important;
    font-weight: normal !important;
    direction: rtl;
    text-align: start;
    unicode-bidi: plaintext;
}
.aj-next-step .checklist-item-checkbox {
    border-radius: 0;
    width: 11px !important;
    height: 11px !important;
    top: -4px !important;
    left: -5px !important;
    opacity: 1;
}
.aj-next-step > .aj-checkbox-tick::before {
    font-weight: bold;
    opacity: 1;
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* This will make the list bg always black:
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.list,
.body-custom-board-background #header,
.body-board-view #header {
    background: rgba(0, 0, 0, 0.75);
}
.list-header textarea {
    color: #fff;
}
.list-header textarea:focus {
    color: #000;
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* Plus icon for Add a new list:
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.list-wrapper.mod-add.is-idle {
    width: 40px !important;
}
.list-wrapper.mod-add .placeholder {
    overflow: hidden;
    height: 26px;
    padding: 0;
    margin: 2px;
}
.list-wrapper.mod-add .placeholder:before {
    content: "+";
    font-size: 30px;
    display: block;
    height: 100%;
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* VARIOUS Things:
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* Colors & Themes :
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* ⚪⚪ LIGHT THEME: ⚪⚪ ⚪⚪ ⚪⚪ ⚪⚪ ⚪⚪ ⚪⚪ ⚪⚪ ⚪⚪ ⚪⚪ ⚪⚪ ⚪⚪  */
html[data-color-mode='light'] .aj-next-step,
html[data-color-mode='light'] .aj-next-step > .aj-checkbox-tick::before,
html[data-color-mode='light'] .checklist-item-row,
html[data-color-mode='light'] textarea.js-checkitem-input,
html[data-color-mode='light'] textarea.js-description-draft,
html[data-color-mode='light'] textarea.card-back-description,
html[data-color-mode='light'] textarea.checklist-new-item-text,
html[data-color-mode='light'] textarea.js-new-checklist-item-input,
html[data-color-mode='light'] .checklist-item-details-text,
html[data-color-mode='light'] .checklist-progress-percentage {
    color: #000 !important;
}
html[data-color-mode='light'] .aj-next-step > .aj-checkbox {
    box-shadow: rgb(0 0 0) 0px 0px 0px 1px inset;
}
/* ⚪⚪ DARK THEME: ⚪⚪ ⚪⚪ ⚪⚪ ⚪⚪ ⚪⚪ ⚪⚪ ⚪⚪ ⚪⚪ ⚪⚪ ⚪⚪ ⚪⚪  */
html[data-color-mode='dark'] .aj-next-step,
html[data-color-mode='dark'] .aj-next-step > .aj-checkbox-tick::before,
html[data-color-mode='dark'] .checklist-item-row,
html[data-color-mode='dark'] textarea.js-checkitem-input,
html[data-color-mode='dark'] textarea.js-description-draft,
html[data-color-mode='dark'] textarea.card-back-description,
html[data-color-mode='dark'] textarea.checklist-new-item-text,
html[data-color-mode='dark'] textarea.js-new-checklist-item-input,
html[data-color-mode='dark'] .checklist-item-details-text,
html[data-color-mode='dark'] .checklist-progress-percentage {
    color: #fff !important;
}
html[data-color-mode='dark'] .aj-next-step > .aj-checkbox {
    box-shadow: rgb(255 255 255) 0px 0px 0px 1px inset;
}
/* html[data-color-mode='dark'] {
    --tr-background-list: #101204;
    --tr-icon-star: #e2b203;
} */
}