merge with master

.devcontainer/Dockerfile

@@ -5,12 +5,12 @@ LABEL maintainer="sgr"
 # - gyp does not yet work with Ubuntu 22.04 ubuntu:rolling,
 #   so changing to 21.10. https://github.com/wekan/wekan/issues/4488
 
-ENV BUILD_DEPS="gnupg gosu libarchive-tools wget curl bzip2 g++ build-essential python git ca-certificates iproute2"
+ENV BUILD_DEPS="gnupg gosu libarchive-tools wget curl bzip2 g++ build-essential python3 git ca-certificates iproute2"
 ENV DEBIAN_FRONTEND=noninteractive
 
 ENV \
     DEBUG=false \
-    NODE_VERSION=v14.19.1 \
+    NODE_VERSION=v14.19.3 \
     METEOR_RELEASE=1.10.2 \
     USE_EDGE=false \
     METEOR_EDGE=1.5-beta.17 \
@@ -224,12 +224,6 @@ RUN set -o xtrace \
 
 USER wekan
 
-RUN \
-    set -o xtrace && \
-    sed -i 's/api\.versionsFrom/\/\/api.versionsFrom/' /home/wekan/app/packages/meteor-useraccounts-core/package.js && \
-    cd /home/wekan/.meteor && \
-    /home/wekan/.meteor/meteor -- help;
-
 RUN \
     set -o xtrace && \
     # Build app

.devcontainer/docker-compose.yml

@@ -3,7 +3,7 @@ version: '3.7'
 services:
 
   wekandb-dev:
-    image: mongo:4.4
+    image: mongo:5.0
     container_name: wekan-dev-db
     restart: unless-stopped
     command: mongod --oplogSize 128
@@ -42,7 +42,7 @@ services:
       - ../client:/home/wekan/app/client
       - ../models:/home/wekan/app/models
       - ../config:/home/wekan/app/config
-      - ../i18n:/home/wekan/app/i18n
+      - ../imports:/home/wekan/app/imports
       - ../server:/home/wekan/app/server
       - ../public:/home/wekan/app/public
 

.future-snap/broken-snapcraft.yaml

@@ -81,7 +81,7 @@ parts:
     wekan:
         source: .
         plugin: nodejs
-        node-engine: 14.19.1
+        node-engine: 14.19.3
         node-packages:
             - node-gyp
             - node-pre-gyp

.future-snap/snapcraft.yaml

@@ -1,5 +1,5 @@
 name: wekan
-version: '6.10'
+version: '6.21'
 base: core20
 summary: Open Source kanban
 description: |
@@ -20,6 +20,12 @@ architectures:
   - build-on: arm64
     run-on: arm64
 
+  - build-on: ppc64el
+    run-on: ppc64el
+
+  - build-on: s390x
+    run-on: s390x
+
 plugs:
   mongodb-plug:
     interface: content
@@ -73,8 +79,10 @@ parts:
     mongodb:
         plugin: dump
         source:
-          - on amd64: https://repo.mongodb.org/apt/ubuntu/dists/focal/mongodb-org/4.4/multiverse/binary-amd64/mongodb-org-server_4.4.12_amd64.deb
-          - on arm64: https://repo.mongodb.org/apt/ubuntu/dists/focal/mongodb-org/4.4/multiverse/binary-arm64/mongodb-org-server_4.4.12_arm64.deb
+          - on amd64: https://repo.mongodb.org/apt/ubuntu/dists/focal/mongodb-org/4.4/multiverse/binary-amd64/mongodb-org-server_4.4.13_amd64.deb
+          - on arm64: https://repo.mongodb.org/apt/ubuntu/dists/focal/mongodb-org/4.4/multiverse/binary-arm64/mongodb-org-server_4.4.13_arm64.deb
+          - on ppc64el: https://repo.mongodb.org/apt/ubuntu/dists/focal/mongodb-org/4.4/multiverse/binary-ppc64el/mongodb-org-server_4.4.13_ppc64el.deb
+          - on s390x: https://repo.mongodb.org/apt/ubuntu/dists/focal/mongodb-org/4.4/multiverse/binary-s390x/mongodb-org-server_4.4.13_s390x.deb
         stage-packages:
             - libssl1.1
             - libcurl3-dev
@@ -90,19 +98,22 @@ parts:
             - $mongo
 
     wekan:
-        plugin: npm
+        #plugin: npm
+        plugin: dump
         source:
-        # TODO: Fix URLs to some allowed GitHub releases URL.
+        # Fixed URLs to some allowed GitHub releases URL.
         # Non-GitHub build server file urls are not allowed at 2022-03-02 and later.
-          - on amd64: https://wekan.github.io/wekan-latest-x64.zip
-          - on arm64: https://wekan.github.io/raspi3/wekan-latest-arm64.zip
-        npm-node-version: 14.19.0
+          - on amd64: https://github.com/wekan/wekan/releases/download/v6.20/wekan-6.20-amd64.zip
+          - on arm64: https://github.com/wekan/wekan/releases/download/v6.20/wekan-6.20-arm64.zip
+          - on ppc64el: https://github.com/wekan/wekan/releases/download/v6.20/wekan-6.20-ppc64el.zip
+          - on s390x: https://github.com/wekan/wekan/releases/download/v6.20/wekan-6.20-s390x.zip
+#        npm-node-version: 14.19.1
 #        node-packages:
 #            - node-gyp
 #            - node-pre-gyp
 #            - fibers
-        build-packages:
-          - npm
+#        build-packages:
+#          - npm
 #            - build-essential
 #            - ca-certificates
 #            - apt-utils
@@ -114,7 +125,7 @@ parts:
 #            - execstack
 #            - nodejs
 #            - npm
-          - p7zip-full
+#          - p7zip-full
 #        stage-packages:
 #            - libfontconfig1
         override-build: |
@@ -151,3 +162,22 @@ parts:
           README.txt: CADDY_README.txt
         stage:
           - -init
+
+    caddy2:
+        plugin: dump
+        source:
+        # Fixed URLs to some allowed GitHub releases URL.
+        # Non-GitHub build server file urls are not allowed at 2022-03-02 and later.
+          - on amd64: https://github.com/wekan/wekan/releases/download/v6.20/caddy-v2-amd64.zip
+          - on arm64: https://github.com/wekan/wekan/releases/download/v6.20/caddy-v2-arm64.zip
+          - on ppc64el: https://github.com/wekan/wekan/releases/download/v6.20/caddy-v2-ppc64el.zip
+          - on s390x: https://github.com/wekan/wekan/releases/download/v6.20/caddy-v2-s390x.zip
+        source-type: zip
+        organize:
+          caddy: bin/caddy
+          CHANGES.txt: CADDY_CHANGES.txt
+          EULA.txt: CADDY_EULA.txt
+          LICENSES.txt: CADDY_LICENSES.txt
+          README.txt: CADDY_README.txt
+        stage:
+          - -init

.github/dependabot.yml

@@ -0,0 +1,6 @@
+version: 2
+updates:
+- package-ecosystem: "github-actions"
+  directory: "/"
+  schedule:
+      interval: "weekly"

.github/workflows/codeql-analysis.yml

@@ -9,8 +9,15 @@ on:
   schedule:
     - cron: '0 16 * * 3'
 
+permissions:
+  contents: read
+
 jobs:
   analyze:
+    permissions:
+      actions: read  # for github/codeql-action/init to get workflow details
+      contents: read  # for actions/checkout to fetch code
+      security-events: write  # for github/codeql-action/autobuild to send a status report
     name: Analyze
     runs-on: ubuntu-latest
 
@@ -25,7 +32,7 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v2
+      uses: actions/checkout@v3
       with:
         # We must fetch at least the immediate parents so that if this is
         # a pull request then we can checkout the head.
@@ -38,14 +45,14 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
+      uses: github/codeql-action/init@v2
       with:
         languages: ${{ matrix.language }}
 
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+      uses: github/codeql-action/autobuild@v2
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -59,4 +66,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      uses: github/codeql-action/analyze@v2

.github/workflows/depsreview.yaml

@@ -0,0 +1,14 @@
+name: 'Dependency Review'
+on: [pull_request]
+
+permissions:
+  contents: read
+
+jobs:
+  dependency-review:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 'Checkout Repository'
+        uses: actions/checkout@v3
+      - name: 'Dependency Review'
+        uses: actions/dependency-review-action@v2

.github/workflows/docker-publish.yml

@@ -32,13 +32,13 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       # Login against a Docker registry except on PR
       # https://github.com/docker/login-action
       - name: Log into registry ${{ env.REGISTRY }}
         if: github.event_name != 'pull_request'
-        uses: docker/login-action@28218f9b04b4f3f62068d7b6ce6ca5b26e35336c
+        uses: docker/login-action@49ed152c8eca782a232dede0303416e8f356c37b
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
@@ -48,14 +48,14 @@ jobs:
       # https://github.com/docker/metadata-action
       - name: Extract Docker metadata
         id: meta
-        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
+        uses: docker/metadata-action@69f6fc9d46f2f8bf0d5491e4aabe0bb8c6a4678a
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
 
       # Build and push Docker image with Buildx (don't push on PR)
       # https://github.com/docker/build-push-action
       - name: Build and push Docker image
-        uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
+        uses: docker/build-push-action@e551b19e49efd4e98792db7592c17c09b89db8d8
         with:
           context: .
           push: ${{ github.event_name != 'pull_request' }}

.github/workflows/dockerimage.yml

@@ -5,6 +5,9 @@ on:
     branches:
       - master
 
+permissions:
+  contents: read
+
 jobs:
 
   build:
@@ -12,6 +15,6 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v1
+    - uses: actions/checkout@v3
     - name: Build the Docker image
       run: docker build . --file Dockerfile --tag wekan:$(date +%s)

.github/workflows/release.yml

@@ -5,12 +5,17 @@ on:
     branches:
       - master
 
+permissions:
+  contents: read
+
 jobs:
   release:
+    permissions:
+      contents: write  # for helm/chart-releaser-action to push chart release and create a release
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
 
@@ -20,6 +25,6 @@ jobs:
           git config user.email "$GITHUB_ACTOR@users.noreply.github.com"
 
       - name: Run chart-releaser
-        uses: helm/chart-releaser-action@v1.1.0
+        uses: helm/chart-releaser-action@v1.4.0
         env:
           CR_TOKEN: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/test_suite.yml

@@ -15,7 +15,7 @@ jobs:
 #    runs-on: ubuntu-latest
 #    steps:
 #    - name: checkout
-#      uses: actions/checkout@v2
+#      uses: actions/checkout@v3
 #
 #    - name: setup node
 #      uses: actions/setup-node@v1
@@ -39,7 +39,7 @@ jobs:
 #    needs: [lintcode]
 #    steps:
 #    - name: checkout
-#      uses: actions/checkout@v2
+#      uses: actions/checkout@v3
 #
 #    - name: setup node
 #      uses: actions/setup-node@v1
@@ -62,7 +62,7 @@ jobs:
 #    needs: [lintcode,lintstyle]
 #    steps:
 #    - name: checkout
-#      uses: actions/checkout@v2
+#      uses: actions/checkout@v3
 #
 #    - name: setup node
 #      uses: actions/setup-node@v1
@@ -87,12 +87,12 @@ jobs:
 
       # CHECKOUTS
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       # CACHING
       - name: Install Meteor
         id: cache-meteor-install
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ~/.meteor
           key: v1-meteor-${{ hashFiles('.meteor/versions') }}
@@ -101,7 +101,7 @@ jobs:
 
       - name: Cache NPM dependencies
         id: cache-meteor-npm
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ~/.npm
           key: v1-npm-${{ hashFiles('package-lock.json') }}
@@ -110,7 +110,7 @@ jobs:
 
       - name: Cache Meteor build
         id: cache-meteor-build
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             .meteor/local/resolver-result-cache.json
@@ -133,7 +133,7 @@ jobs:
         run: sh ./test-wekan.sh -cv
 
       - name: Upload coverage
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         with:
           name: coverage-folder
           path: .coverage/
@@ -144,17 +144,17 @@ jobs:
     needs: [tests]
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Download coverage
-        uses: actions/download-artifact@v2
+        uses: actions/download-artifact@v3
         with:
           name: coverage-folder
           path: .coverage/
 
 
       - name: Coverage Report
-        uses: VeryGoodOpenSource/very_good_coverage@v1.1.1
+        uses: VeryGoodOpenSource/very_good_coverage@v1.2.1
         with:
           path: ".coverage/lcov.info"
           min_coverage: 1 # TODO add tests and increase to 95!

.meteor/packages

@@ -3,12 +3,11 @@
 # 'meteor add' and 'meteor remove' will edit this file for you,
 # but you can also edit it by hand.
 
-meteor-base@1.4.0
+meteor-base@1.5.1
 
 # Build system
-ecmascript@0.15.1
-standard-minifier-css@1.7.2
-standard-minifier-js@2.6.0
+ecmascript@0.16.2
+standard-minifier-js@2.8.0
 mquandalle:jade
 coffeescript@2.4.1!
 
@@ -21,18 +20,21 @@ cfs:standard-packages
 cottz:publish-relations
 dburles:collection-helpers
 idmontie:migrations
-matb33:collection-hooks
 matteodem:easy-search
-mongo@1.11.0
+mongo@1.15.0
 mquandalle:collection-mutations
 
 # Account system
-kenton:accounts-sandstorm
-service-configuration@1.0.11
-useraccounts:unstyled
+accounts-password@2.3.1
+useraccounts:core
 useraccounts:flow-routing
+useraccounts:unstyled
+simple:rest-accounts-password
 wekan-ldap
 wekan-accounts-cas
+wekan-accounts-sandstorm
+wekan-accounts-lockout
+wekan-oidc
 wekan-accounts-oidc
 
 # Utilities
@@ -43,7 +45,6 @@ reactive-dict@1.3.0
 session@1.2.0
 tracker@1.2.0
 underscore@1.0.10
-3stack:presence
 arillo:flow-router-helpers
 audit-argument-checks@1.0.7
 kadira:blaze-layout
@@ -51,39 +52,28 @@ kadira:dochead
 mquandalle:autofocus
 ongoworks:speakingurl
 raix:handlebar-helpers
-tap:i18n
-http@1.4.2
+http@2.0.0! # force new http package
 
 # UI components
 blaze
+ostrio:i18n
 reactive-var@1.0.11
 fortawesome:fontawesome
 mousetrap:mousetrap
 mquandalle:jquery-textcomplete
 mquandalle:mousetrap-bindglobal
-peerlibrary:blaze-components@=0.15.1
+peerlibrary:blaze-components
 templates:tabs
 meteor-autosize
-simple:json-routes
 rajit:bootstrap3-datepicker
 shell-server@0.5.0
-simple:rest-accounts-password
-useraccounts:core
-email@2.0.0
-horka:swipebox
-dynamic-import@0.6.0
-
-accounts-password@1.6.2
+email@2.2.1
+dynamic-import@0.7.2
 cfs:gridfs
 rzymek:fullcalendar
-momentjs:moment@2.22.2
-mquandalle:moment
 msavin:usercache
 # Keep stylus in 1.1.0, because building v2 takes extra 52 minutes.
-coagmano:stylus@1.1.0!
 meteorhacks:subs-manager
-meteorhacks:picker
-lamhieu:unblock
 meteorhacks:aggregate@1.3.0
 wekan-markdown
 konecty:mongo-counter
@@ -91,8 +81,6 @@ percolate:synced-cron
 cfs:filesystem
 ostrio:cookies
 ostrio:files@2.0.1
-tmeasday:check-npm-versions
-steffo:meteor-accounts-saml
 rajit:bootstrap3-datepicker-fi
 rajit:bootstrap3-datepicker-ar
 rajit:bootstrap3-datepicker-bg
@@ -141,10 +129,15 @@ rajit:bootstrap3-datepicker-uk
 rajit:bootstrap3-datepicker-vi
 rajit:bootstrap3-datepicker-zh-cn
 rajit:bootstrap3-datepicker-zh-tw
-staringatlights:fast-render
-spacebars
 easylogic:summernote
 pascoual:pdfkit
-wekan-accounts-lockout
 lmieulet:meteor-coverage
-meteortesting:mocha
+meteortesting:mocha@2.0.3
+aldeed:simple-schema
+matb33:collection-hooks
+simple:json-routes
+kadira:flow-router
+spacebars
+service-configuration@1.3.0
+communitypackages:picker
+minifier-css

.meteor/release

@@ -1 +1 @@
-METEOR@2.2
+METEOR@2.7.3

.meteor/versions

@@ -1,26 +1,25 @@
-3stack:presence@1.1.2
-accounts-base@1.9.0
-accounts-oauth@1.2.0
-accounts-password@1.7.1
+accounts-base@2.2.3
+accounts-oauth@1.4.1
+accounts-password@2.3.1
 aldeed:collection2@2.10.0
 aldeed:collection2-core@1.2.0
 aldeed:schema-deny@1.1.0
 aldeed:schema-index@1.1.1
 aldeed:simple-schema@1.5.4
-allow-deny@1.1.0
+allow-deny@1.1.1
 arillo:flow-router-helpers@0.5.2
 audit-argument-checks@1.0.7
-autoupdate@1.7.0
-babel-compiler@7.6.1
-babel-runtime@1.5.0
+autoupdate@1.8.0
+babel-compiler@7.9.0
+babel-runtime@1.5.1
 base64@1.0.12
 binary-heap@1.0.11
-blaze@2.5.0
-blaze-tools@1.1.2
+blaze@2.6.0
+blaze-tools@1.1.3
 boilerplate-generator@1.7.1
 caching-compiler@1.2.2
-caching-html-compiler@1.2.0
-callback-hook@1.3.0
+caching-html-compiler@1.2.1
+callback-hook@1.4.0
 cfs:access-point@0.1.49
 cfs:base-package@0.0.30
 cfs:collection@0.5.5
@@ -40,37 +39,35 @@ cfs:tempstore@0.1.6
 cfs:upload-http@0.0.20
 cfs:worker@0.1.5
 check@1.3.1
-chuangbo:cookie@1.1.0
-coagmano:stylus@1.1.0
 coffeescript@2.4.1
 coffeescript-compiler@2.4.1
+communitypackages:picker@1.1.0
 cottz:publish-relations@2.0.8
 dburles:collection-helpers@1.1.0
 ddp@1.4.0
-ddp-client@2.4.1
+ddp-client@2.5.0
 ddp-common@1.4.0
-ddp-rate-limiter@1.0.9
-ddp-server@2.3.3
+ddp-rate-limiter@1.1.0
+ddp-server@2.5.0
 deps@1.0.12
 diff-sequence@1.1.1
-dynamic-import@0.6.0
+dynamic-import@0.7.2
 easylogic:summernote@0.8.8
-ecmascript@0.15.1
-ecmascript-runtime@0.7.0
-ecmascript-runtime-client@0.11.1
-ecmascript-runtime-server@0.10.1
-ejson@1.1.1
-email@2.0.0
+ecmascript@0.16.2
+ecmascript-runtime@0.8.0
+ecmascript-runtime-client@0.12.1
+ecmascript-runtime-server@0.11.0
+ejson@1.1.2
+email@2.2.1
 es5-shim@4.8.0
 fastclick@1.0.13
 fetch@0.1.1
 fortawesome:fontawesome@4.7.0
 geojson-utils@1.0.10
-horka:swipebox@1.0.2
 hot-code-push@1.0.4
-html-tools@1.1.2
+html-tools@1.1.3
 htmljs@1.1.1
-http@1.4.4
+http@2.0.0
 id-map@1.1.1
 idmontie:migrations@1.0.3
 inter-process-messaging@0.1.1
@@ -78,41 +75,37 @@ jquery@1.11.11
 kadira:blaze-layout@2.3.0
 kadira:dochead@1.5.0
 kadira:flow-router@2.12.1
-kenton:accounts-sandstorm@0.7.0
 konecty:mongo-counter@0.0.5_3
-lamhieu:meteorx@2.1.1
-lamhieu:unblock@1.0.0
-launch-screen@1.2.1
+launch-screen@1.3.0
 livedata@1.0.18
-lmieulet:meteor-coverage@3.2.0
+lmieulet:meteor-coverage@1.1.4
 localstorage@1.2.0
-logging@1.2.0
-matb33:collection-hooks@0.9.1
+logging@1.3.1
+matb33:collection-hooks@1.1.2
 matteodem:easy-search@1.6.4
 mdg:validation-error@0.5.1
-meteor@1.9.3
+meteor@1.10.0
 meteor-autosize@5.0.1
-meteor-base@1.4.0
+meteor-base@1.5.1
 meteor-platform@1.2.6
 meteorhacks:aggregate@1.3.0
 meteorhacks:collection-utils@1.2.0
 meteorhacks:picker@1.0.3
 meteorhacks:subs-manager@1.6.4
-meteorspark:util@0.2.0
-meteortesting:browser-tests@1.3.4
-meteortesting:mocha@2.0.1
+meteortesting:browser-tests@1.3.5
+meteortesting:mocha@2.0.3
 meteortesting:mocha-core@8.0.1
-minifier-css@1.5.4
-minifier-js@2.6.0
+minifier-css@1.6.0
+minifier-js@2.7.4
 minifiers@1.1.8-faster-rebuild.0
-minimongo@1.6.2
+minimongo@1.8.0
 mobile-status-bar@1.1.0
-modern-browsers@0.1.5
-modules@0.16.0
-modules-runtime@0.12.0
-momentjs:moment@2.29.1
-mongo@1.11.1
-mongo-decimal@0.1.2
+modern-browsers@0.1.8
+modules@0.18.0
+modules-runtime@0.13.0
+momentjs:moment@2.29.3
+mongo@1.15.0
+mongo-decimal@0.1.3
 mongo-dev-server@1.1.0
 mongo-id@1.0.8
 mongo-livedata@1.0.12
@@ -122,26 +115,27 @@ mquandalle:collection-mutations@0.1.0
 mquandalle:jade@0.4.9
 mquandalle:jade-compiler@0.4.5
 mquandalle:jquery-textcomplete@0.8.0_1
-mquandalle:moment@1.0.1
 mquandalle:mousetrap-bindglobal@0.0.1
 msavin:usercache@1.8.0
-npm-bcrypt@0.9.4
-npm-mongo@3.9.0
-oauth@1.3.2
-oauth2@1.3.0
-observe-sequence@1.0.16
+npm-mongo@4.3.1
+oauth@2.1.2
+oauth2@1.3.1
+observe-sequence@1.0.20
 ongoworks:speakingurl@1.1.0
 ordered-dict@1.1.0
-ostrio:cookies@2.7.0
-ostrio:files@2.0.1
+ostrio:cookies@2.7.2
+ostrio:cstorage@4.0.1
+ostrio:files@2.2.1
+ostrio:i18n@3.2.0
 pascoual:pdfkit@1.0.7
 peerlibrary:assert@0.3.0
-peerlibrary:base-component@0.16.0
-peerlibrary:blaze-components@0.15.1
+peerlibrary:base-component@0.17.1
+peerlibrary:blaze-components@0.23.0
 peerlibrary:computed-field@0.10.0
+peerlibrary:data-lookup@0.3.0
 peerlibrary:reactive-field@0.6.0
 percolate:synced-cron@1.3.2
-promise@0.11.2
+promise@0.12.0
 raix:eventemitter@0.1.3
 raix:handlebar-helpers@0.2.5
 rajit:bootstrap3-datepicker@1.7.1_1
@@ -195,54 +189,45 @@ rajit:bootstrap3-datepicker-zh-cn@1.7.1
 rajit:bootstrap3-datepicker-zh-tw@1.7.1
 random@1.2.0
 rate-limit@1.0.9
-react-fast-refresh@0.1.1
+react-fast-refresh@0.2.3
 reactive-dict@1.3.0
 reactive-var@1.0.11
 reload@1.3.1
 retry@1.1.0
-routepolicy@1.1.0
+routepolicy@1.1.1
 rzymek:fullcalendar@3.8.0
-server-render@0.3.1
-service-configuration@1.0.11
+service-configuration@1.3.0
 session@1.2.0
 sha@1.0.9
 shell-server@0.5.0
-simple:authenticate-user-by-token@1.0.1
-simple:json-routes@2.1.0
-simple:rest-accounts-password@1.1.2
-simple:rest-bearer-token-parser@1.0.1
-simple:rest-json-error-handler@1.0.1
-socket-stream-client@0.3.3
-softwarerero:accounts-t9n@1.3.11
-spacebars@1.2.0
-spacebars-compiler@1.2.1
-srp@1.1.0
-standard-minifier-css@1.7.2
-standard-minifier-js@2.6.0
-staringatlights:fast-render@3.3.0
-staringatlights:inject-data@2.3.0
-steffo:meteor-accounts-saml@0.0.18
-tap:i18n@1.8.2
+simple:authenticate-user-by-token@1.2.1
+simple:json-routes@2.3.1
+simple:rest-accounts-password@1.2.1
+simple:rest-bearer-token-parser@1.1.1
+simple:rest-json-error-handler@1.1.1
+socket-stream-client@0.5.0
+spacebars@1.3.0
+spacebars-compiler@1.3.1
+standard-minifier-js@2.8.0
 templates:tabs@2.3.0
-templating@1.4.0
+templating@1.4.1
 templating-compiler@1.4.1
-templating-runtime@1.4.0
-templating-tools@1.2.0
-tmeasday:check-npm-versions@1.0.2
+templating-runtime@1.5.0
+templating-tools@1.2.2
 tracker@1.2.0
 twbs:bootstrap@3.3.6
-typescript@4.2.2
 ui@1.0.13
 underscore@1.0.10
 url@1.3.2
-useraccounts:core@1.14.2
-useraccounts:flow-routing@1.14.2
+useraccounts:core@1.16.2
+useraccounts:flow-routing@1.15.0
 useraccounts:unstyled@1.14.2
-webapp@1.10.1
+webapp@1.13.1
 webapp-hashing@1.1.0
 wekan-accounts-cas@0.1.0
 wekan-accounts-lockout@1.0.0
 wekan-accounts-oidc@1.0.10
+wekan-accounts-sandstorm@0.8.0
 wekan-ldap@0.0.2
 wekan-markdown@1.0.9
 wekan-oidc@1.0.12

.travis.yml

@@ -3,7 +3,7 @@ sudo: required
 
 env:
   TRAVIS_DOCKER_COMPOSE_VERSION: 1.24.0
-  TRAVIS_NODE_VERSION: 14.19.1
+  TRAVIS_NODE_VERSION: 14.19.3
   TRAVIS_NPM_VERSION: latest
 
 before_install:

.tx/config

@@ -39,10 +39,10 @@ host = https://www.transifex.com
 # tap:i18n requires us to use `-` separator in the language identifiers whereas
 # Transifex uses a `_` separator, without an option to customize it on one side
 # or the other, so we need to do a Manual mapping.
-lang_map = ar_EG:ar-EG, bg_BG:bg, cs_CZ:cs-CZ, cy_GB:cy-GB, de_AT:de-AT, de_CH:de-CH, en_BR:en-BR, en_DE:en-DE, en_IT:en-IT, en_GB:en-GB, et_EE:et-EE, es_AR:es-AR, en@ysv:en-YS, es_CL:es-CL, es_419:es-LA, es_PE:es-PE, es_MX:es-MX, es_TX:es-TX, es_PY:es-PY, el_GR:el-GR, fa_IR:fa-IR, fi_FI:fi, fr_FR:fr-FR, fr_CH:fr-CH, fy_NL:fy-NL, gl_ES:gl-ES, gu_IN:gu-IN, he_IL:he-IL, hi_IN:hi-IN, hu_HU:hu, id_ID:id, mn_MN:mn, ms_MY:ms-MY, nl_NL:nl-NL, ko_KR:ko-KR, lv_LV:lv, pl_PL:pl-PL, pt_BR:pt-BR, ro_RO:ro, ru_UA:ru-UA, sl_SI:sl, uk_UA:uk-UA, uz@Arab:uz-AR, uz@Latn:uz-LA, uz_UZ:uz-UZ, vec:ve-CC, vep:ve-PP, vls:vl-SS, war:wa-RR, vi_VN:vi-VN, zh_CN:zh-CN, zh_TW:zh-TW, zh_Hans:zh-Hans, zh_HK:zh-HK, zu_ZA:zu-ZA
+lang_map = ar_DZ:ar-DZ, ar_EG:ar-EG, az_AZ:az-AZ, az@latin:az-LA, bg_BG:bg, cs_CZ:cs-CZ, cy_GB:cy-GB, de_AT:de-AT, de_CH:de-CH, en_BR:en-BR, en_DE:en-DE, en_IT:en-IT, en_GB:en-GB, et_EE:et-EE, ast_ES:ast-ES, es_AR:es-AR, en@ysv:en-YS, es_CL:es-CL, es_419:es-LA, es_PE:es-PE, es_MX:es-MX, es_TX:es-TX, es_PY:es-PY, el_GR:el-GR, fa_IR:fa-IR, ja_JP:ja, fi_FI:fi, fr_FR:fr-FR, fr_CH:fr-CH, fy_NL:fy-NL, gl_ES:gl-ES, gu_IN:gu-IN, he_IL:he-IL, hi_IN:hi-IN, hu_HU:hu, id_ID:id, mn_MN:mn, ms_MY:ms-MY, nl_NL:nl-NL, ko_KR:ko-KR, lv_LV:lv, pl_PL:pl-PL, pt_BR:pt-BR, ro_RO:ro, ru_UA:ru-UA, sl_SI:sl, uk_UA:uk-UA, uz@Arab:uz-AR, uz@Latn:uz-LA, uz_UZ:uz-UZ, vec:ve-CC, vep:ve-PP, vls:vl-SS, war:wa-RR, vi_VN:vi-VN, zh_CN:zh-CN, zh_TW:zh-TW, zh_Hans:zh-Hans, zh_HK:zh-HK, zu_ZA:zu-ZA
 
 [wekan.application]
-file_filter = i18n/<lang>.i18n.json
+file_filter = imports/i18n/data/<lang>.i18n.json
 source_lang = en
 type = KEYVALUEJSON
 

.vscode/launch.json

@@ -17,6 +17,23 @@
           "outputCapture": "std",
           "port": 9229,
           "timeout": 60000
+      },
+      {
+          "type": "node",
+          "request": "launch",
+          "name": "Test: Node",
+          "runtimeExecutable": "meteor",
+          "runtimeArgs": [
+            "test",
+            "--inspect-brk=9229",
+            "--port=4040",
+            "--exclude-archs=web.browser.legacy,web.cordova",
+            "--driver-package=meteortesting:mocha",
+            "--settings=settings.json"
+          ],
+          "outputCapture": "std",
+          "port": 9229,
+          "timeout": 60000
       }
   ],
   "compounds": [

CHANGELOG.md

@@ -1,5 +1,211 @@
 [Mac ChangeLog](https://github.com/wekan/wekan/wiki/Mac)
 
+# Upcoming WeKan ® release
+
+This release adds the following features:
+
+- [Resizeable size of list width and height. Size is not saved yet. In Progress](https://github.com/wekan/wekan/commit/01d0dd3b1dd0a3c9764e7c9d31eab739db2d3ad8).
+  Thanks to NLBlackEagle and xet7.
+- [00checkStartup, on error give more details on current user which run's wekan](https://github.com/wekan/wekan/pull/4581).
+  Thanks to mfilser.
+
+and adds the following updates:
+
+- [Docker base image to Ubuntu 22.04](https://github.com/wekan/wekan/commit/6b4ffa69c64f0186a8b1b3ac175b633ac7c24263).
+  Thanks to Ubuntu developers.
+- Updated ostrio:files.
+  [Part 1](https://github.com/wekan/wekan/commit/0d67a86f2c9c1c9696d8507c60e53d47a226a6ad),
+  [Part 1](https://github.com/wekan/wekan/commit/c3bfcb78e9047a84d43041bebcec56718eaa140b).
+  Thanks to developers of dependencies.
+- [Updated dependencies](https://github.com/wekan/wekan/commit/ae09f0f0083a96c2211fdc02e60b4ff6a2f413ca).
+  Thanks to developers of dependencies.
+
+and adds the following translations:
+
+- [Added translation Asturia (Spain)](https://github.com/wekan/wekan/commit/12615fef5d44cf611b3f1d9fc0a7be3e98b8c042).
+  Thanks to translators.
+- [Added translations: Arabic (Algeria) (ar_DZ), Azerbaijani (az),  Azerbaijani (Azerbaijan) (az_AZ), Azerbaijani (Latin) (az@latin)](https://github.com/wekan/wekan/commit/99b2fdbf99f26ee9df2e1ff906db2d740210f902).
+  Thanks to translators.
+
+and fixes the following bugs:
+
+- [Do not show archived lists on All Boards](https://github.com/wekan/wekan/pull/4573).
+  Thanks to  helioguardabaxo.
+- [Fix div max-width on My Cards table view](https://github.com/wekan/wekan/pull/4574).
+  Thanks to  helioguardabaxo.
+- [Fixed one Typo in CSS Style Sheet](https://github.com/wekan/wekan/pull/4577).
+  Thanks to JonasPfeiferb1.
+- [Comment out unused CSS](https://github.com/wekan/wekan/commit/724d1386f6943ad87b8e32f5544cc84ae211904c).
+  Thanks to xet7.
+- [Move/Copy card closes now the popup if done](https://github.com/wekan/wekan/pull/4582).
+  Thanks to mfilser.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
+
+# v6.28 2022-06-08 WeKan ® release
+
+This release adds the following updates:
+
+- [Upgraded to Meteor 2.7.3](https://github.com/wekan/wekan/commit/43b2d714043e053874e3c1101ae6e464d2e61b7e).
+  Thanks to Meteor developers.
+
+and adds the following translations:
+
+- [Added translations: Moroccan Arabic (ary) and Standard Moroccan Tamazight (zgh)](https://github.com/wekan/wekan/commit/5af4f54f4c702f9cc4df60a27ac234421e41575d).
+  Thanks to translators.
+- [Try to detect Japanese (Japan) better](https://github.com/wekan/wekan/commit/e25050316f6f018f68b03bef6fccbdaea7248461).
+  Thanks to takenoko14 at Transifex and xet7.
+
+and fixes the following bugs:
+
+- [Removed lightbox that caused bugs like Maximum stack size exceeded. TODO later: Add a new way to open attachment image bigger](https://github.com/wekan/wekan/commit/dfea3d0e735f1665a14f7e534e352e0e00871a02).
+  Thanks to xet7.
+- [Move and copy card set sorting](https://github.com/wekan/wekan/pull/4557).
+  Thanks to mfilser.
+- [Updated dependencies. Try to fix Binary release on releases.wekan.team lacks the CSS](https://github.com/wekan/wekan/commit/937797356ceeb99bf66eb826e13fc55f266c8739).
+  Thanks to znerol, mrcancer91, BabyFnord and xet7.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
+
+# v6.27 2022-05-28 WeKan ® release
+
+This release adds the following updates:
+
+- [Upgraded to Meteor 2.7.3-beta.0](https://github.com/wekan/wekan/commit/25e50e3908a52a7bac61f8b939ad7c78cbd79060).
+  Thanks to Meteor developers.
+
+and fixes the following bugs:
+
+- [Fix opening card scrolls to wrong position when many swimlanes and card at bottom of board](https://github.com/wekan/wekan/commit/adcc33ed7fe686d46a85da6c11ea448d29e94ca7).
+  Thanks to xet7.
+- [Removed wekan-accounts-sandstorm .test-app directory, that could not be git cloned on Windows](https://github.com/wekan/wekan/commit/4f44c5bf872e369cd89ea0e8791482cc925294d3).
+  Thanks to xet7.
+- Try to fix Snap.
+  [Part 1](https://github.com/wekan/wekan/commit/3b419848d1b7a7f421db3662d860dcea1ea6af1c),
+  [Part 2](https://github.com/wekan/wekan/commit/e50d69cfb78e5f0150e96cc90337255ccbd59e76),
+  [Part 3](https://github.com/wekan/wekan/commit/ea66eca60ddbf7127c9fbed9ab41df52542ad279),
+  [Part 4](https://github.com/wekan/wekan/commit/9ca26d22d0c2c9bee792e50ff203a5c18c9d556b),
+  [Part 5](https://github.com/wekan/wekan/commit/fac1ba5952f763d257b04a934e3407f9b1d1d37a),
+  [Part 6](https://github.com/wekan/wekan/commit/f2815a90393418dea88aa49ee74c6af91fafe96d),
+  [Part 7](https://github.com/wekan/wekan/commit/2587e2f00ae27742893e48e98845a3139e3f3a02),
+  [Part 8](https://github.com/wekan/wekan/commit/693a49f85200adcf81f5cf0ea56c7dd795757988).
+  Thanks to xet7.
+- [WeKan Gantt GPLv2: Try to fix Gantt, by adding translations, but is not visible yet](https://github.com/wekan/wekan-gantt-gpl/commit/a08c01c76eaaf2884890a39c97d1f72da222fba1).
+  Thanks to xet7.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
+
+# v6.26 2022-05-21 WeKan ® release
+
+This release adds the following updates:
+
+- [Updated to Node.js v14.19.3](https://github.com/wekan/wekan/commit/6c8563d02f0865989d8db39dd84757a1a534b49b).
+  Thanks to Node.js developers.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
+
+# v6.25 2022-05-21 WeKan ® release
+
+This release adds the following new features:
+
+- [Attachment rename](https://github.com/wekan/wekan/pulls/4521).
+  Thanks to mfilser.
+
+and fixes the following bugs:
+
+- [Fix Bullets in label selection popup. Related to import nib css reset](https://github.com/wekan/wekan/commit/985c2cdbfdb38eb43852f3aa257859bbd3f817b9).
+  Thanks to AuspeXeu, mfilser and xet7.
+- [Fix images not showing correctly, by updating packages like jquery,
+  removing handlebars, changing image attachment view big image popup
+  from swipebox to lightbox, and changing import nib related code](https://github.com/wekan/wekan/commit/990477e9c6b33072b27bebf387bd6e6d9ef62074).
+  Thanks to xet7.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
+
+# v6.24 2022-05-18 WeKan ® release
+
+This release fixes the following bugs:
+
+- [Fix redirects needs to be done in sync](https://github.com/wekan/wekan/commit/3ed1fc3e6bdf90ecdc3593468d68a29807ed52b5).
+  Thanks to nebulade and xet7.
+- [Added missing 'import nib' stylesheet reset that removes extra li bullet points](https://github.com/wekan/wekan/commit/8964a18e765699e2a5060a72c3ca66d27e1c2ffd).
+  Thanks to mfilser and xet7.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
+
+# v6.23 2022-05-17 WeKan ® release
+
+This release adds the following updates:
+
+- [Merged branch upgrade-meteor 2.7.2 to master](https://github.com/wekan/wekan/commit/7e43a6f4fb6ac3346729d3bb091e2019591fb323).
+  Thanks to xet7.
+- [Upgrade to Meteor 2.7.2](https://github.com/wekan/wekan/commit/963a4711dbad325a1618abf2f76541d94570ca89).
+  Thanks to Meteor developers.
+- [When developing with Meteor on macOS, get current IP address](https://github.com/wekan/wekan/commit/a73a4c1e5b1971ff32643fb39a37e285a240a77a).
+  Thanks to xet7.
+- [Updated meteor-upgrade branch to Node.js v14.19.2](https://github.com/wekan/wekan/commit/907013228d00f1190933bf7fc402957b1a973131).
+  Thanks to Node.js developers.
+- [Added back to meteor-upgrade branch packages WeKan lockout, ldap, oidc, cas](https://github.com/wekan/wekan/commit/00768b4392109dec62a4dcf44dbceb295990d785).
+  Thanks to xet7.
+- [Added fixes to meteor-upgrade branch Sandstorm accounts](https://github.com/wekan/wekan/pulls/4500).
+  Thanks to mfilser.
+- [Added backup to meteor-upgrade branch Sandstorm Accounts](https://github.com/wekan/wekan/commit/f260b7ba889c39a2db4a5f3057439a9b78dd7cf1).
+  Thanks to xet7.
+- [Improvements to future WeKan Snap core20. Does not work yet. In Progress](https://github.com/wekan/wekan/commit/38d26fa7e32c705a0cad34c199e1190c5226b968).
+  Thanks to xet7.
+- [Updated MongoDB 5 rawCollection deprecated update to updateMany (or updateOne)](https://github.com/wekan/wekan/commit/a196a5ed63cba2b812b9e825172f3a97d9756daa).
+  Thanks to xet7.
+- [Added --trace-warnings to start-wekan.sh](https://github.com/wekan/wekan/commit/50ce0ce442d804bf1d9eacacba3b493761ca6773).
+  Thanks to xet7.
+- [Meteor-upgrade: Fix language auto-detection](https://github.com/wekan/wekan/commit/8f43b74bbca78fa03162985fc7b2192782549c1f).
+  Thanks to imajus.
+- [Meteor-upgrade: Fix broken useraccounts UI i18n](https://github.com/wekan/wekan/commit/566527dfad9b11d730c84f7b62bac9c4d60518bd).
+  Thanks to imajus.
+- [Meteor-upgrade: Rename isoCode to tag (cause they are IETF tags actually)](https://github.com/wekan/wekan/commit/c858e0b7965847587c5e16b775c4cd44cbefbee0).
+  Thanks to imajus.
+- [Meteor-upgrade: Add missing language names](https://github.com/wekan/wekan/commit/f40b0d495db12824e46a60d9676e94464cc9897a).
+  Thanks to imajus.
+- [Added 30 new languages, now about 105 total](https://github.com/wekan/wekan/commit/28317c7cf3fea7f1c7cf0860ccebb7322000d132).
+  Thanks to translators and xet7.
+- [Use MongoDB 5 at docker-compose.yml](https://github.com/wekan/wekan/commit/77d72ae20acf3c96d7e864bf0fd8a159f9456823).
+  Thanks to MongoDB.
+
+and fixes the following bugs:
+
+- [Fix Copy Board](https://github.com/wekan/wekan/pulls/4496).
+  Thanks to mfilser.
+- [Fix FileStoreStrategy, moveToStorage, wrong variable in error handling](https://github.com/wekan/wekan/commit/58d760a615834f989633efcd5e1577265219af19).
+  Thanks to mfilser.
+- [Multi-File Storage code was missing after merge](https://github.com/wekan/wekan/commit/3fad014e919be29fc85af754f89b708888d8a98e).
+  Thanks to mfilser.
+- Card Details dates in user language format.
+  [Part 1](https://github.com/wekan/wekan/commit/d1714abc6a13783600c68526c259967886dbe80d),
+  [Part 2](https://github.com/wekan/wekan/commit/2e5ec0308f2ac8059af6219693177e294197776a),
+  [Part 3](https://github.com/wekan/wekan/commit/441b3e9c0a50b21da2c875946ff1059a14ce04e4).
+  Thanks to mfilser.
+- [Converted Stylus to CSS. Removed Stylus. This change removed many error messages](https://github.com/wekan/wekan/commit/072778b9aaefd7fcaa7519b1ce1cafc1704d646d).
+  Thanks to xet7.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
+
+# v6.22 2022-05-09 WeKan ® release
+
+- [Updated to Node.js v14.19.2](https://github.com/wekan/wekan/commit/bfef7844ba15a28bce63a577ed499ed899aaff79).
+  Thanks to Node.js developers.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
+
+# v6.21 2022-04-28 WeKan ® release
+
+This release fixes the following bugs:
+
+- [Fix themes](https://github.com/wekan/wekan/pull/4490).
+  Thanks to TheExo.
+- [Try to fix Snap by adding cypress and jest for cypress-image-snapshot and jest-image-snapshot](https://github.com/wekan/wekan/commit/7dd5fa4ac40f0fe63168b9a2ef4a0940bfc9d80b).
+  Thanks to xet7.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
+
 # v6.20 2022-04-25 WeKan ® release
 
 This release fixes the following bugs:

Dockerfile

@@ -1,4 +1,4 @@
-FROM ubuntu:21.10
+FROM ubuntu:22.04
 LABEL maintainer="wekan"
 
 # 2022-04-25:
@@ -16,7 +16,7 @@ ARG DEBIAN_FRONTEND=noninteractive
 
 ENV BUILD_DEPS="apt-utils libarchive-tools gnupg gosu wget curl bzip2 g++ build-essential git ca-certificates python3" \
     DEBUG=false \
-    NODE_VERSION=v14.19.1 \
+    NODE_VERSION=v14.19.3 \
     METEOR_RELEASE=1.10.2 \
     USE_EDGE=false \
     METEOR_EDGE=1.5-beta.17 \

Dockerfile.arm64v8

@@ -4,7 +4,7 @@ FROM amd64/alpine:3.7 AS builder
 ENV QEMU_VERSION=v4.2.0-6 \
     QEMU_ARCHITECTURE=aarch64 \
     NODE_ARCHITECTURE=linux-arm64 \
-    NODE_VERSION=v14.19.1 \
+    NODE_VERSION=v14.19.3 \
     WEKAN_VERSION=latest  \
     WEKAN_ARCHITECTURE=arm64 \
     NODE_OPTIONS="--max_old_space_size=4096"
@@ -49,7 +49,7 @@ LABEL maintainer="wekan"
 # Set the environment variables (defaults where required)
 ENV QEMU_ARCHITECTURE=aarch64 \
     NODE_ARCHITECTURE=linux-arm64 \
-    NODE_VERSION=v14.19.1 \
+    NODE_VERSION=v14.19.3 \
     NODE_ENV=production \
     NPM_VERSION=latest \
     WITH_API=true \

README.md

@@ -17,9 +17,9 @@
 ## [Translate WeKan ® at Transifex](https://transifex.com/wekan/wekan)
 
 Translations to non-English languages are accepted only at [Transifex](https://transifex.com/wekan/wekan) using webbrowser.
-New English strings of new features can be added as PRs to edge branch file wekan/i18n/en.i18n.json .
+New English strings of new features can be added as PRs to master branch file wekan/imports/i18n/data/en.i18n.json .
 
-## [Wekan feature requests and bugs](https://github.com/wekan/wekan/issues)
+## [WeKan ® feature requests and bugs](https://github.com/wekan/wekan/issues)
 
 Please add most of your questions as GitHub issue: [WeKan ® Feature Requests and Bugs](https://github.com/wekan/wekan/issues).
 It's better than at chat where details get lost when chat scrolls up.
@@ -28,7 +28,7 @@ It's better than at chat where details get lost when chat scrolls up.
 
 [Discussions][discussions] - WeKan Community GitHub Discussions, that are not [Feature Requests and Bugs](https://github.com/wekan/wekan/issues).
 
-[Wekan IRC FAQ](https://github.com/wekan/wekan/wiki/IRC-FAQ)
+[WeKan IRC FAQ](https://github.com/wekan/wekan/wiki/IRC-FAQ)
 
 ## Docker: Please only use Docker release tags
 
@@ -56,8 +56,8 @@ install Wekan on your own computer or server. In fact we encourage you to do
 that by providing one-click installation on various platforms.
 
 - WeKan ® is used in [most countries of the world](https://snapcraft.io/wekan).
-- Wekan largest user has 22k users using Wekan in their company.
-- Wekan has been [translated](https://transifex.com/wekan/wekan) to about 105 languages.
+- WeKan ® largest user has 22k users using WeKan ® in their company.
+- WeKan ® has been [translated](https://transifex.com/wekan/wekan) to about 105 languages.
 - [Features][features]: WeKan ® has real-time user interface.
 - [Platforms][platforms]: WeKan ® supports many platforms.
   WeKan ® is critical part of new platforms Wekan is currently being integrated to.

Stackerfile.yml

@@ -1,5 +1,5 @@
 appId: wekan-public/apps/77b94f60-dec9-0136-304e-16ff53095928
-appVersion: "v6.21.0"
+appVersion: "v6.28.0"
 files:
   userUploads:
     - README.md

client/components/activities/activities.css

@@ -0,0 +1,101 @@
+.activity-title {
+  margin: 0 0.5em 0.8em;
+  display: flex;
+  justify-content: space-between;
+}
+.reactions-popup .add-comment-reaction {
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 5px;
+  font-size: 22px;
+  text-align: center;
+  line-height: 30px;
+  width: 40px;
+}
+.reactions-popup .add-comment-reaction:hover {
+  background-color: #b0c4de;
+}
+.activities {
+  clear: both;
+}
+.activities .activity {
+  margin: 0.5px 0;
+  padding: 6px 0;
+  display: flex;
+}
+.activities .activity .member {
+  width: 32px;
+  height: 32px;
+}
+.activities .activity .activity-member {
+  font-weight: 700;
+}
+.activities .activity .activity-desc {
+  word-wrap: break-word;
+  overflow: hidden;
+  flex: 1;
+  align-self: center;
+  margin: 0;
+  margin-left: 3px;
+  overflow: hidden;
+  word-break: break-word;
+}
+.activities .activity .activity-desc .activity-comment {
+  display: block;
+  border-radius: 3px;
+  background: #fff;
+  text-decoration: none;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  margin-top: 5px;
+  padding: 5px;
+}
+.activities .activity .activity-desc .reactions {
+  display: flex;
+  margin-top: 5px;
+  gap: 5px;
+}
+.activities .activity .activity-desc .reactions .open-comment-reaction-popup {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  height: 24px;
+}
+.activities .activity .activity-desc .reactions .open-comment-reaction-popup i.fa.fa-smile-o {
+  font-size: 17px;
+  font-weight: 500;
+  margin-left: 2px;
+}
+.activities .activity .activity-desc .reactions .open-comment-reaction-popup i.fa.fa-plus {
+  font-size: 8px;
+  margin-top: -7px;
+  margin-left: 1px;
+}
+.activities .activity .activity-desc .reactions .reaction {
+  cursor: pointer;
+  border: 1px solid #808080;
+  border-radius: 15px;
+  display: flex;
+  padding: 2px 5px;
+}
+.activities .activity .activity-desc .reactions .reaction.selected {
+  background-color: #b0c4de;
+}
+.activities .activity .activity-desc .reactions .reaction:hover {
+  background-color: #b0c4de;
+}
+.activities .activity .activity-desc .reactions .reaction .reaction-count {
+  font-size: 12px;
+}
+.activities .activity .activity-desc .activity-checklist {
+  display: block;
+  border-radius: 3px;
+  background: #fff;
+  text-decoration: none;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  margin-top: 5px;
+  padding: 5px;
+}
+.activities .activity .activity-desc .activity-meta {
+  font-size: 0.8em;
+  color: #999;
+}

client/components/activities/activities.jade

@@ -42,7 +42,7 @@ template(name="addReactionPopup")
       span.add-comment-reaction(data-codepoint="#{codepoint}") !{codepoint}
 
 template(name="activity")
-  .activity
+  .activity(data-id=activity._id)
     +userAvatar(userId=activity.user._id)
     p.activity-desc
       span.activity-member
@@ -152,10 +152,10 @@ template(name="activity")
                 +editOrDeleteComment
 
         if($eq activity.activityType 'deleteComment')
-          | {{{_ 'activity-deleteComment' currentData.commentId}}}.
+          | {{{_ 'activity-deleteComment' activity.commentId}}}.
 
         if($eq activity.activityType 'editComment')
-          | {{{_ 'activity-editComment' currentData.commentId}}}.
+          | {{{_ 'activity-editComment' activity.commentId}}}.
       else
         //- if we are not in card mode we only display a summary of the comment
         if($eq activity.activityType 'addComment')

client/components/activities/activities.js

@@ -1,4 +1,5 @@
 import DOMPurify from 'dompurify';
+import { TAPi18n } from '/imports/i18n';
 
 const activitiesPerPage = 500;
 

client/components/activities/activities.styl

@@ -1,105 +0,0 @@
-@import 'nib'
-
-.activity-title
-  margin: 0 0.5em 0.8em
-  display: flex
-  justify-content:space-between
-
-.reactions-popup
-  .add-comment-reaction
-    display: inline-block
-    cursor: pointer
-    border-radius: 5px
-    font-size: 22px
-    text-align: center
-    line-height: 30px
-    width: 40px
-
-    &:hover {
-      background-color: #b0c4de
-    }
-
-.activities
-  clear: both
-
-  .activity
-    margin: 0.5px 0
-    padding: 6px 0;
-    display: flex
-
-    .member
-      width: 32px
-      height: @width
-
-    .activity-member
-      font-weight: 700
-
-    .activity-desc
-      word-wrap: break-word
-      overflow: hidden
-      flex: 1
-      align-self: center
-      margin: 0
-      margin-left: 3px
-      overflow: hidden;
-      word-break: break-word;
-
-      .activity-comment
-        display: block
-        border-radius: 3px
-        background: white
-        text-decoration: none
-        box-shadow: 0 1px 2px rgba(0,0,0,.2)
-        margin-top: 5px
-        padding: 5px
-
-      .reactions
-        display: flex
-        margin-top: 5px
-        gap: 5px
-
-        .open-comment-reaction-popup
-          display: flex
-          align-items: center
-          text-decoration: none
-          height: 24px;
-
-          i.fa.fa-smile-o
-            font-size: 17px
-            font-weight: 500
-            margin-left: 2px
-
-          i.fa.fa-plus
-            font-size: 8px;
-            margin-top: -7px;
-            margin-left: 1px;
-
-        .reaction
-          cursor: pointer
-          border: 1px solid grey
-          border-radius: 15px
-          display: flex
-          padding: 2px 5px
-
-          &.selected {
-            background-color: #b0c4de
-          }
-
-          &:hover {
-            background-color: #b0c4de
-          }
-
-          .reaction-count
-            font-size: 12px
-
-      .activity-checklist
-        display: block
-        border-radius: 3px
-        background: white
-        text-decoration: none
-        box-shadow: 0 1px 2px rgba(0,0,0,.2)
-        margin-top: 5px
-        padding: 5px
-      .activity-meta
-        font-size: 0.8em
-        color: darken(white, 40%)

client/components/activities/comments.css

@@ -0,0 +1,65 @@
+.new-comment {
+  position: relative;
+  margin: 0 0 20px 38px;
+}
+.new-comment .member {
+  opacity: 0.7;
+  position: absolute;
+  top: 1px;
+  left: -38px;
+}
+.new-comment.is-open .member {
+  opacity: 1;
+}
+.new-comment.is-open .helper {
+  display: inline-block;
+}
+.new-comment.is-open textarea {
+  min-height: 100px;
+  color: #4d4d4d;
+  cursor: auto;
+  overflow: hidden;
+  word-wrap: break-word;
+}
+.new-comment .too-long {
+  margin-top: 8px;
+}
+.new-comment textarea {
+  background-color: #fff;
+  border: 0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.23);
+  height: 36px;
+  margin: 4px 4px 6px 0;
+  padding: 9px 11px;
+  width: 100%;
+}
+.new-comment textarea:hover,
+.new-comment textarea:is-open {
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.33);
+  border: 0;
+  cursor: pointer;
+}
+.new-comment textarea:is-open {
+  cursor: auto;
+}
+.comment-item {
+  background-color: #fff;
+  border: 0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.23);
+  color: #8c8c8c;
+  height: 36px;
+  margin: 4px 4px 6px 0;
+  width: 92%;
+}
+.comment-item:hover {
+  background: #e0e0e0;
+}
+.comment-item.add-comment {
+  display: flex;
+  margin: 5px;
+}
+.comment-item.add-comment a {
+  display: block;
+  margin: auto;
+}

client/components/activities/comments.styl

@@ -1,67 +0,0 @@
-@import 'nib'
-
-.new-comment
-  position: relative
-  margin: 0 0 20px 38px
-
-  .member
-    opacity: .7
-    position: absolute
-    top: 1px
-    left: -38px
-
-  &.is-open
-    .member
-      opacity: 1
-
-    .helper
-      display: inline-block
-
-    textarea
-      min-height: 100px
-      color: #4d4d4d
-      cursor: auto
-      overflow: hidden
-      word-wrap: break-word
-
-  .too-long
-    margin-top: 8px
-
-  textarea
-    background-color: #fff
-    border: 0
-    box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
-    height: 36px
-    margin: 4px 4px 6px 0
-    padding: 9px 11px
-    width: 100%
-
-    &:hover,
-    &:is-open
-      background-color: #fff
-      box-shadow: 0 1px 3px rgba(0, 0, 0, .33)
-      border: 0
-      cursor: pointer
-
-    &:is-open
-      cursor: auto
-
-.comment-item
-  background-color: #fff
-  border: 0
-  box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
-  color: #8c8c8c
-  height: 36px
-  margin: 4px 4px 6px 0
-  width: 92%
-
-  &:hover
-    background: darken(white, 12%)
-
-  &.add-comment
-    display: flex
-    margin: 5px
-
-    a
-      display: block
-      margin: auto

client/components/boards/boardArchive.jade

@@ -14,6 +14,7 @@ template(name="archivedBoards")
             i.fa.fa-undo
             | {{_ 'restore-board'}}
           = title
+        span {{ moment archivedAt 'LLL' }}
     else
       li.no-items-message {{_ 'no-archived-boards'}}
 

client/components/boards/boardBody.css

@@ -0,0 +1,169 @@
+.board-wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+.board-wrapper .board-canvas {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  transition: margin 0.1s;
+  overflow-y: auto;
+}
+.board-wrapper .board-canvas.is-sibling-sidebar-open {
+  margin-right: 248px;
+}
+.board-wrapper .board-canvas .board-overlay {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  top: -100px;
+  right: -400px;
+  background: #000;
+  opacity: 0.33;
+  animation: fadeIn 0.2s;
+  z-index: 16;
+}
+.board-wrapper .board-canvas.is-dragging-active .open-minicard-composer,
+.board-wrapper .board-canvas.is-dragging-active .minicard-wrapper.is-checked {
+  display: none;
+}
+@media screen and (max-width: 800px) {
+  .board-wrapper .board-canvas .swimlane {
+    border-bottom: 1px solid #ccc;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0 0px 0px 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}
+.calendar-event-green {
+  background: #3cb500 !important;
+  border-color: #2a8000;
+  color: #fff !important;
+}
+.calendar-event-yellow {
+  background: #fad900 !important;
+  border-color: #c7ac00;
+  color: #000 !important;
+}
+.calendar-event-orange {
+  background: #ff9f19 !important;
+  border-color: #cc7c14;
+  color: #000 !important;
+}
+.calendar-event-red {
+  background: #eb4646 !important;
+  border-color: #b83737;
+  color: #fff !important;
+}
+.calendar-event-purple {
+  background: #a632db !important;
+  border-color: #7d26a6;
+  color: #fff !important;
+}
+.calendar-event-blue {
+  background: #0079bf !important;
+  border-color: #005a8a;
+  color: #fff !important;
+}
+.calendar-event-pink {
+  background: #ff78cb !important;
+  border-color: #cc62a3;
+  color: #000 !important;
+}
+.calendar-event-sky {
+  background: #00c2e0 !important;
+  border-color: #0094ab;
+  color: #fff !important;
+}
+.calendar-event-black {
+  background: #4d4d4d !important;
+  border-color: #1a1a1a;
+  color: #fff !important;
+}
+.calendar-event-lime {
+  background: #51e898 !important;
+  border-color: #3eb375;
+  color: #000 !important;
+}
+.calendar-event-silver {
+  background: #c0c0c0 !important;
+  border-color: #8c8c8c;
+  color: #000 !important;
+}
+.calendar-event-peachpuff {
+  background: #ffdab9 !important;
+  border-color: #ccaf95;
+  color: #000 !important;
+}
+.calendar-event-crimson {
+  background: #dc143c !important;
+  border-color: #a8112f;
+  color: #fff !important;
+}
+.calendar-event-plum {
+  background: #dda0dd !important;
+  border-color: #a87ba8;
+  color: #000 !important;
+}
+.calendar-event-darkgreen {
+  background: #006400 !important;
+  border-color: #003000;
+  color: #fff !important;
+}
+.calendar-event-slateblue {
+  background: #6a5acd !important;
+  border-color: #4f4399;
+  color: #fff !important;
+}
+.calendar-event-magenta {
+  background: #f0f !important;
+  border-color: #c0c;
+  color: #fff !important;
+}
+.calendar-event-gold {
+  background: #ffd700 !important;
+  border-color: #ca0;
+  color: #000 !important;
+}
+.calendar-event-navy {
+  background: #000080 !important;
+  border-color: #003;
+  color: #fff !important;
+}
+.calendar-event-gray {
+  background: #808080 !important;
+  border-color: #333;
+  color: #fff !important;
+}
+.calendar-event-saddlebrown {
+  background: #8b4513 !important;
+  border-color: #572b0c;
+  color: #fff !important;
+}
+.calendar-event-paleturquoise {
+  background: #afeeee !important;
+  border-color: #8ababa;
+  color: #000 !important;
+}
+.calendar-event-mistyrose {
+  background: #ffe4e1 !important;
+  border-color: #ccb8b6;
+  color: #000 !important;
+}
+.calendar-event-indigo {
+  background: #4b0082 !important;
+  border-color: #2b004d;
+  color: #fff !important;
+}

client/components/boards/boardBody.js

@@ -1,3 +1,5 @@
+import { TAPi18n } from '/imports/i18n';
+
 const subManager = new SubsManager();
 const { calculateIndex } = Utils;
 const swimlaneWhileSortingHeight = 150;
@@ -267,9 +269,10 @@ BlazeComponent.extendComponent({
 
   openNewListForm() {
     if (this.isViewSwimlanes()) {
-      this.childComponents('swimlane')[0]
-        .childComponents('addListAndSwimlaneForm')[0]
-        .open();
+      // The form had been removed in 416b17062e57f215206e93a85b02ef9eb1ab4902
+      // this.childComponents('swimlane')[0]
+      //   .childComponents('addListAndSwimlaneForm')[0]
+      //   .open();
     } else if (this.isViewLists()) {
       this.childComponents('listsGroup')[0]
         .childComponents('addListForm')[0]

client/components/boards/boardBody.styl

@@ -1,133 +0,0 @@
-@import 'nib'
-
-position()
-  if arguments[0] == cover || arguments[0] == fixed-cover
-    if arguments[0] == cover
-      position: absolute
-    else
-      position: fixed
-    left: 0
-    right: 0
-    top: 0
-    bottom: 0
-  else
-    position: arguments
-
-.board-wrapper
-  position: cover
-  overflow-x: hidden
-  overflow-y: hidden
-
-  .board-canvas
-    position: cover
-    transition: margin .1s
-    overflow-y: auto
-
-    &.is-sibling-sidebar-open
-      margin-right: 248px
-
-    .board-overlay
-      position: fixed-cover
-      top: -100px
-      right: -400px
-      background: black
-      opacity: 0.33
-      animation: fadeIn 0.2s
-      z-index: 16
-
-    &.is-dragging-active
-      .open-minicard-composer,
-      .minicard-wrapper.is-checked
-        display: none
-
-@media screen and (max-width: 800px)
-  .board-wrapper
-
-    .board-canvas
-
-      .swimlane
-        border-bottom: 1px solid #CCC
-        display: flex
-        flex-direction: column
-        margin: 0
-        padding: 0 0px 0px 0
-        overflow-x: hidden
-        overflow-y: auto
-
-calendar-event-color(background, borderColor, color...)
-  background: background !important
-  border-color: borderColor
-  if color
-    color: color !important //overwrite text for better visibility
-
-.calendar-event-green
-  calendar-event-color(#3cb500, #2a8000, #ffffff) //White text for better visibility
-
-.calendar-event-yellow
-  calendar-event-color(#fad900, #c7ac00, #000) //Black text for better visibility
-
-.calendar-event-orange
-  calendar-event-color(#ff9f19, #cc7c14, #000) //Black text for better visibility
-
-.calendar-event-red
-  calendar-event-color(#eb4646, #b83737, #ffffff) //White text for better visibility
-
-.calendar-event-purple
-  calendar-event-color(#a632db, #7d26a6, #ffffff) //White text for better visibility
-
-.calendar-event-blue
-  calendar-event-color(#0079bf, #005a8a, #ffffff) //White text for better visibility
-
-.calendar-event-pink
-  calendar-event-color(#ff78cb, #cc62a3, #000) //Black text for better visibility
-
-.calendar-event-sky
-  calendar-event-color(#00c2e0, #0094ab, #ffffff) //White text for better visibility
-
-.calendar-event-black
-  calendar-event-color(#4d4d4d, #1a1a1a, #ffffff) //White text for better visibility
-
-.calendar-event-lime
-  calendar-event-color(#51e898, #3eb375, #000) //Black text for better visibility
-
-.calendar-event-silver
-  calendar-event-color(#c0c0c0, #8c8c8c, #000) //Black text for better visibility
-
-.calendar-event-peachpuff
-  calendar-event-color(#ffdab9, #ccaf95, #000) //Black text for better visibility
-
-.calendar-event-crimson
-  calendar-event-color(#dc143c, #a8112f, #ffffff) //White text for better visibility
-
-.calendar-event-plum
-  calendar-event-color(#dda0dd, #a87ba8, #000) //Black text for better visibility
-
-.calendar-event-darkgreen
-  calendar-event-color(#006400, #003000, #ffffff) //White text for better visibility
-
-.calendar-event-slateblue
-  calendar-event-color(#6a5acd, #4f4399, #ffffff) //White text for better visibility
-
-.calendar-event-magenta
-  calendar-event-color(#ff00ff, #cc00cc, #ffffff) //White text for better visibility
-
-.calendar-event-gold
-  calendar-event-color(#ffd700, #ccaa00, #000) //Black text for better visibility
-
-.calendar-event-navy
-  calendar-event-color(#000080, #000033, #ffffff) //White text for better visibility
-
-.calendar-event-gray
-  calendar-event-color(#808080, #333333, #ffffff) //White text for better visibility
-
-.calendar-event-saddlebrown
-  calendar-event-color(#8b4513, #572b0c, #ffffff) //White text for better visibility
-
-.calendar-event-paleturquoise
-  calendar-event-color(#afeeee, #8ababa, #000) //Black text for better visibility
-
-.calendar-event-mistyrose
-  calendar-event-color(#ffe4e1, #ccb8b6, #000) //Black text for better visibility
-
-.calendar-event-indigo
-  calendar-event-color(#4b0082, #2b004d, #ffffff) //White text for better visibility

client/components/boards/boardColors.css

@@ -0,0 +1,2176 @@
+.board-color-nephritis#header,
+.board-color-nephritis.sk-spinner div,
+.board-backgrounds-list .board-color-nephritis.background-box,
+.board-list .board-color-nephritis a {
+  background-color: #27ae60;
+}
+.board-color-nephritis .is-selected .minicard {
+  border-left: 3px solid #27ae60;
+}
+.board-color-nephritis .minicard {
+  border-radius: 7px;
+  padding: 10px 10px 4px 10px;
+  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15);
+}
+.board-color-nephritis button[type=submit].primary,
+.board-color-nephritis input[type=submit].primary,
+.board-color-nephritis .sidebar .sidebar-content .sidebar-btn {
+  background-color: #1f8b4d;
+  border-radius: 7px;
+}
+.board-color-nephritis.pop-over .pop-over-list li a:not(.disabled):hover,
+.board-color-nephritis .sidebar .sidebar-content .sidebar-btn:hover,
+.board-color-nephritis .sidebar-list li a:hover {
+  background-color: #2cc66d;
+}
+.board-color-nephritis#header ul li.current,
+.board-color-nephritis#header-quick-access ul li.current {
+  border-bottom: 2px solid #2cc66d;
+}
+.board-color-nephritis#header-quick-access {
+  background: #239d56;
+  color: #fff;
+}
+.board-color-nephritis#header #header-main-bar .board-header-btn.emphasis {
+  background: #ae2775;
+}
+.board-color-nephritis#header #header-main-bar .board-header-btn.emphasis:hover,
+.board-color-nephritis#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close {
+  background: #9d2369;
+}
+.board-color-nephritis#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close {
+  background: #8b1f5e;
+}
+.board-color-nephritis .materialCheckBox.is-checked {
+  border-bottom: 2px solid #27ae60;
+  border-right: 2px solid #27ae60;
+}
+.board-color-nephritis .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
+  background: #e7faef;
+}
+.board-color-nephritis .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) {
+  background: #f8fdfa;
+}
+.board-color-nephritis .toggle-label:after {
+  background-color: #1f8b4d;
+}
+.board-color-nephritis .toggle-switch:checked ~ .toggle-label {
+  background-color: #3dd37c;
+}
+.board-color-nephritis .toggle-switch:checked ~ .toggle-label:after {
+  background-color: #1f8b4d;
+}
+@media screen and (max-width: 800px) {
+  .board-color-nephritis.pop-over .header {
+    background: #27ae60;
+    color: #fff;
+  }
+}
+.board-color-nephritis#header ul li.current,
+.board-color-nephritis#header-quick-access ul li.current {
+  border-bottom: 4px solid #3dd37c;
+}
+.board-color-pomegranate#header,
+.board-color-pomegranate.sk-spinner div,
+.board-backgrounds-list .board-color-pomegranate.background-box,
+.board-list .board-color-pomegranate a {
+  background-color: #c0392b;
+}
+.board-color-pomegranate .is-selected .minicard {
+  border-left: 3px solid #c0392b;
+}
+.board-color-pomegranate .minicard {
+  border-radius: 7px;
+  padding: 10px 10px 4px 10px;
+  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15);
+}
+.board-color-pomegranate button[type=submit].primary,
+.board-color-pomegranate input[type=submit].primary,
+.board-color-pomegranate .sidebar .sidebar-content .sidebar-btn {
+  background-color: #9a2e22;
+  border-radius: 7px;
+}
+.board-color-pomegranate.pop-over .pop-over-list li a:not(.disabled):hover,
+.board-color-pomegranate .sidebar .sidebar-content .sidebar-btn:hover,
+.board-color-pomegranate .sidebar-list li a:hover {
+  background-color: #d24435;
+}
+.board-color-pomegranate#header ul li.current,
+.board-color-pomegranate#header-quick-access ul li.current {
+  border-bottom: 2px solid #d24435;
+}
+.board-color-pomegranate#header-quick-access {
+  background: #ad3327;
+  color: #fff;
+}
+.board-color-pomegranate#header #header-main-bar .board-header-btn.emphasis {
+  background: #2bb2c0;
+}
+.board-color-pomegranate#header #header-main-bar .board-header-btn.emphasis:hover,
+.board-color-pomegranate#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close {
+  background: #27a0ad;
+}
+.board-color-pomegranate#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close {
+  background: #228e9a;
+}
+.board-color-pomegranate .materialCheckBox.is-checked {
+  border-bottom: 2px solid #c0392b;
+  border-right: 2px solid #c0392b;
+}
+.board-color-pomegranate .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
+  background: #faeae9;
+}
+.board-color-pomegranate .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) {
+  background: #fdf9f8;
+}
+.board-color-pomegranate .toggle-label:after {
+  background-color: #9a2e22;
+}
+.board-color-pomegranate .toggle-switch:checked ~ .toggle-label {
+  background-color: #d7584b;
+}
+.board-color-pomegranate .toggle-switch:checked ~ .toggle-label:after {
+  background-color: #9a2e22;
+}
+@media screen and (max-width: 800px) {
+  .board-color-pomegranate.pop-over .header {
+    background: #c0392b;
+    color: #fff;
+  }
+}
+.board-color-pomegranate#header ul li.current,
+.board-color-pomegranate#header-quick-access ul li.current {
+  border-bottom: 4px solid #d7584b;
+}
+.board-color-belize#header,
+.board-color-belize.sk-spinner div,
+.board-backgrounds-list .board-color-belize.background-box,
+.board-list .board-color-belize a {
+  background-color: #2980b9;
+}
+.board-color-belize .is-selected .minicard {
+  border-left: 3px solid #2980b9;
+}
+.board-color-belize .minicard {
+  border-radius: 7px;
+  padding: 10px 10px 4px 10px;
+  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15);
+}
+.board-color-belize button[type=submit].primary,
+.board-color-belize input[type=submit].primary,
+.board-color-belize .sidebar .sidebar-content .sidebar-btn {
+  background-color: #216694;
+  border-radius: 7px;
+}
+.board-color-belize.pop-over .pop-over-list li a:not(.disabled):hover,
+.board-color-belize .sidebar .sidebar-content .sidebar-btn:hover,
+.board-color-belize .sidebar-list li a:hover {
+  background-color: #2e90d0;
+}
+.board-color-belize#header ul li.current,
+.board-color-belize#header-quick-access ul li.current {
+  border-bottom: 2px solid #2e90d0;
+}
+.board-color-belize#header-quick-access {
+  background: #2573a7;
+  color: #fff;
+}
+.board-color-belize#header #header-main-bar .board-header-btn.emphasis {
+  background: #b96229;
+}
+.board-color-belize#header #header-main-bar .board-header-btn.emphasis:hover,
+.board-color-belize#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close {
+  background: #a75825;
+}
+.board-color-belize#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close {
+  background: #944e21;
+}
+.board-color-belize .materialCheckBox.is-checked {
+  border-bottom: 2px solid #2980b9;
+  border-right: 2px solid #2980b9;
+}
+.board-color-belize .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
+  background: #e8f3fa;
+}
+.board-color-belize .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) {
+  background: #f8fbfd;
+}
+.board-color-belize .toggle-label:after {
+  background-color: #216694;
+}
+.board-color-belize .toggle-switch:checked ~ .toggle-label {
+  background-color: #459cd6;
+}
+.board-color-belize .toggle-switch:checked ~ .toggle-label:after {
+  background-color: #216694;
+}
+@media screen and (max-width: 800px) {
+  .board-color-belize.pop-over .header {
+    background: #2980b9;
+    color: #fff;
+  }
+}
+.board-color-belize#header ul li.current,
+.board-color-belize#header-quick-access ul li.current {
+  border-bottom: 4px solid #459cd6;
+}
+.board-color-wisteria#header,
+.board-color-wisteria.sk-spinner div,
+.board-backgrounds-list .board-color-wisteria.background-box,
+.board-list .board-color-wisteria a {
+  background-color: #8e44ad;
+}
+.board-color-wisteria .is-selected .minicard {
+  border-left: 3px solid #8e44ad;
+}
+.board-color-wisteria .minicard {
+  border-radius: 7px;
+  padding: 10px 10px 4px 10px;
+  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15);
+}
+.board-color-wisteria button[type=submit].primary,
+.board-color-wisteria input[type=submit].primary,
+.board-color-wisteria .sidebar .sidebar-content .sidebar-btn {
+  background-color: #72368a;
+  border-radius: 7px;
+}
+.board-color-wisteria.pop-over .pop-over-list li a:not(.disabled):hover,
+.board-color-wisteria .sidebar .sidebar-content .sidebar-btn:hover,
+.board-color-wisteria .sidebar-list li a:hover {
+  background-color: #9c51bb;
+}
+.board-color-wisteria#header ul li.current,
+.board-color-wisteria#header-quick-access ul li.current {
+  border-bottom: 2px solid #9c51bb;
+}
+.board-color-wisteria#header-quick-access {
+  background: #803d9c;
+  color: #fff;
+}
+.board-color-wisteria#header #header-main-bar .board-header-btn.emphasis {
+  background: #63ad44;
+}
+.board-color-wisteria#header #header-main-bar .board-header-btn.emphasis:hover,
+.board-color-wisteria#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close {
+  background: #599c3d;
+}
+.board-color-wisteria#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close {
+  background: #4f8a36;
+}
+.board-color-wisteria .materialCheckBox.is-checked {
+  border-bottom: 2px solid #8e44ad;
+  border-right: 2px solid #8e44ad;
+}
+.board-color-wisteria .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
+  background: #f4ecf7;
+}
+.board-color-wisteria .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) {
+  background: #fcf9fd;
+}
+.board-color-wisteria .toggle-label:after {
+  background-color: #72368a;
+}
+.board-color-wisteria .toggle-switch:checked ~ .toggle-label {
+  background-color: #a765c2;
+}
+.board-color-wisteria .toggle-switch:checked ~ .toggle-label:after {
+  background-color: #72368a;
+}
+@media screen and (max-width: 800px) {
+  .board-color-wisteria.pop-over .header {
+    background: #8e44ad;
+    color: #fff;
+  }
+}
+.board-color-wisteria#header ul li.current,
+.board-color-wisteria#header-quick-access ul li.current {
+  border-bottom: 4px solid #a765c2;
+}
+.board-color-midnight#header,
+.board-color-midnight.sk-spinner div,
+.board-backgrounds-list .board-color-midnight.background-box,
+.board-list .board-color-midnight a {
+  background-color: #2c3e50;
+}
+.board-color-midnight .is-selected .minicard {
+  border-left: 3px solid #2c3e50;
+}
+.board-color-midnight .minicard {
+  border-radius: 7px;
+  padding: 10px 10px 4px 10px;
+  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15);
+}
+.board-color-midnight button[type=submit].primary,
+.board-color-midnight input[type=submit].primary,
+.board-color-midnight .sidebar .sidebar-content .sidebar-btn {
+  background-color: #233240;
+  border-radius: 7px;
+}
+.board-color-midnight.pop-over .pop-over-list li a:not(.disabled):hover,
+.board-color-midnight .sidebar .sidebar-content .sidebar-btn:hover,
+.board-color-midnight .sidebar-list li a:hover {
+  background-color: #3a5169;
+}
+.board-color-midnight#header ul li.current,
+.board-color-midnight#header-quick-access ul li.current {
+  border-bottom: 2px solid #3a5169;
+}
+.board-color-midnight#header-quick-access {
+  background: #283848;
+  color: #fff;
+}
+.board-color-midnight#header #header-main-bar .board-header-btn.emphasis {
+  background: #503e2c;
+}
+.board-color-midnight#header #header-main-bar .board-header-btn.emphasis:hover,
+.board-color-midnight#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close {
+  background: #483828;
+}
+.board-color-midnight#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close {
+  background: #403223;
+}
+.board-color-midnight .materialCheckBox.is-checked {
+  border-bottom: 2px solid #2c3e50;
+  border-right: 2px solid #2c3e50;
+}
+.board-color-midnight .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
+  background: #e6ecf1;
+}
+.board-color-midnight .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) {
+  background: #f8f9fb;
+}
+.board-color-midnight .toggle-label:after {
+  background-color: #233240;
+}
+.board-color-midnight .toggle-switch:checked ~ .toggle-label {
+  background-color: #476582;
+}
+.board-color-midnight .toggle-switch:checked ~ .toggle-label:after {
+  background-color: #233240;
+}
+@media screen and (max-width: 800px) {
+  .board-color-midnight.pop-over .header {
+    background: #2c3e50;
+    color: #fff;
+  }
+}
+.board-color-midnight#header ul li.current,
+.board-color-midnight#header-quick-access ul li.current {
+  border-bottom: 4px solid #476582;
+}
+.board-color-pumpkin#header,
+.board-color-pumpkin.sk-spinner div,
+.board-backgrounds-list .board-color-pumpkin.background-box,
+.board-list .board-color-pumpkin a {
+  background-color: #e67e22;
+}
+.board-color-pumpkin .is-selected .minicard {
+  border-left: 3px solid #e67e22;
+}
+.board-color-pumpkin .minicard {
+  border-radius: 7px;
+  padding: 10px 10px 4px 10px;
+  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15);
+}
+.board-color-pumpkin button[type=submit].primary,
+.board-color-pumpkin input[type=submit].primary,
+.board-color-pumpkin .sidebar .sidebar-content .sidebar-btn {
+  background-color: #be6415;
+  border-radius: 7px;
+}
+.board-color-pumpkin.pop-over .pop-over-list li a:not(.disabled):hover,
+.board-color-pumpkin .sidebar .sidebar-content .sidebar-btn:hover,
+.board-color-pumpkin .sidebar-list li a:hover {
+  background-color: #e98b38;
+}
+.board-color-pumpkin#header ul li.current,
+.board-color-pumpkin#header-quick-access ul li.current {
+  border-bottom: 2px solid #e98b38;
+}
+.board-color-pumpkin#header-quick-access {
+  background: #d57118;
+  color: #fff;
+}
+.board-color-pumpkin#header #header-main-bar .board-header-btn.emphasis {
+  background: #228ae6;
+}
+.board-color-pumpkin#header #header-main-bar .board-header-btn.emphasis:hover,
+.board-color-pumpkin#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close {
+  background: #187dd5;
+}
+.board-color-pumpkin#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close {
+  background: #156fbe;
+}
+.board-color-pumpkin .materialCheckBox.is-checked {
+  border-bottom: 2px solid #e67e22;
+  border-right: 2px solid #e67e22;
+}
+.board-color-pumpkin .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
+  background: #fdf2e9;
+}
+.board-color-pumpkin .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) {
+  background: #fefbf8;
+}
+.board-color-pumpkin .toggle-label:after {
+  background-color: #be6415;
+}
+.board-color-pumpkin .toggle-switch:checked ~ .toggle-label {
+  background-color: #eb984e;
+}
+.board-color-pumpkin .toggle-switch:checked ~ .toggle-label:after {
+  background-color: #be6415;
+}
+@media screen and (max-width: 800px) {
+  .board-color-pumpkin.pop-over .header {
+    background: #e67e22;
+    color: #fff;
+  }
+}
+.board-color-pumpkin#header ul li.current,
+.board-color-pumpkin#header-quick-access ul li.current {
+  border-bottom: 4px solid #eb984e;
+}
+.board-color-moderatepink#header,
+.board-color-moderatepink.sk-spinner div,
+.board-backgrounds-list .board-color-moderatepink.background-box,
+.board-list .board-color-moderatepink a {
+  background-color: #cd5a91;
+}
+.board-color-moderatepink .is-selected .minicard {
+  border-left: 3px solid #cd5a91;
+}
+.board-color-moderatepink .minicard {
+  border-radius: 7px;
+  padding: 10px 10px 4px 10px;
+  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15);
+}
+.board-color-moderatepink button[type=submit].primary,
+.board-color-moderatepink input[type=submit].primary,
+.board-color-moderatepink .sidebar .sidebar-content .sidebar-btn {
+  background-color: #b53773;
+  border-radius: 7px;
+}
+.board-color-moderatepink.pop-over .pop-over-list li a:not(.disabled):hover,
+.board-color-moderatepink .sidebar .sidebar-content .sidebar-btn:hover,
+.board-color-moderatepink .sidebar-list li a:hover {
+  background-color: #d26b9c;
+}
+.board-color-moderatepink#header ul li.current,
+.board-color-moderatepink#header-quick-access ul li.current {
+  border-bottom: 2px solid #d26b9c;
+}
+.board-color-moderatepink#header-quick-access {
+  background: #c64382;
+  color: #fff;
+}
+.board-color-moderatepink#header #header-main-bar .board-header-btn.emphasis {
+  background: #5acd96;
+}
+.board-color-moderatepink#header #header-main-bar .board-header-btn.emphasis:hover,
+.board-color-moderatepink#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close {
+  background: #43c688;
+}
+.board-color-moderatepink#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close {
+  background: #37b579;
+}
+.board-color-moderatepink .materialCheckBox.is-checked {
+  border-bottom: 2px solid #cd5a91;
+  border-right: 2px solid #cd5a91;
+}
+.board-color-moderatepink .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
+  background: #faeef4;
+}
+.board-color-moderatepink .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) {
+  background: #fefafc;
+}
+.board-color-moderatepink .toggle-label:after {
+  background-color: #b53773;
+}
+.board-color-moderatepink .toggle-switch:checked ~ .toggle-label {
+  background-color: #d77ba7;
+}
+.board-color-moderatepink .toggle-switch:checked ~ .toggle-label:after {
+  background-color: #b53773;
+}
+@media screen and (max-width: 800px) {
+  .board-color-moderatepink.pop-over .header {
+    background: #cd5a91;
+    color: #fff;
+  }
+}
+.board-color-moderatepink#header ul li.current,
+.board-color-moderatepink#header-quick-access ul li.current {
+  border-bottom: 4px solid #d77ba7;
+}
+.board-color-strongcyan#header,
+.board-color-strongcyan.sk-spinner div,
+.board-backgrounds-list .board-color-strongcyan.background-box,
+.board-list .board-color-strongcyan a {
+  background-color: #00aecc;
+}
+.board-color-strongcyan .is-selected .minicard {
+  border-left: 3px solid #00aecc;
+}
+.board-color-strongcyan .minicard {
+  border-radius: 7px;
+  padding: 10px 10px 4px 10px;
+  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15);
+}
+.board-color-strongcyan button[type=submit].primary,
+.board-color-strongcyan input[type=submit].primary,
+.board-color-strongcyan .sidebar .sidebar-content .sidebar-btn {
+  background-color: #008ba3;
+  border-radius: 7px;
+}
+.board-color-strongcyan.pop-over .pop-over-list li a:not(.disabled):hover,
+.board-color-strongcyan .sidebar .sidebar-content .sidebar-btn:hover,
+.board-color-strongcyan .sidebar-list li a:hover {
+  background-color: #00c8eb;
+}
+.board-color-strongcyan#header ul li.current,
+.board-color-strongcyan#header-quick-access ul li.current {
+  border-bottom: 2px solid #00c8eb;
+}
+.board-color-strongcyan#header-quick-access {
+  background: #009db8;
+  color: #fff;
+}
+.board-color-strongcyan#header #header-main-bar .board-header-btn.emphasis {
+  background: #cc1e00;
+}
+.board-color-strongcyan#header #header-main-bar .board-header-btn.emphasis:hover,
+.board-color-strongcyan#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close {
+  background: #b81b00;
+}
+.board-color-strongcyan#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close {
+  background: #a31800;
+}
+.board-color-strongcyan .materialCheckBox.is-checked {
+  border-bottom: 2px solid #00aecc;
+  border-right: 2px solid #00aecc;
+}
+.board-color-strongcyan .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
+  background: #e0fbff;
+}
+.board-color-strongcyan .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) {
+  background: #f6feff;
+}
+.board-color-strongcyan .toggle-label:after {
+  background-color: #008ba3;
+}
+.board-color-strongcyan .toggle-switch:checked ~ .toggle-label {
+  background-color: #0adbff;
+}
+.board-color-strongcyan .toggle-switch:checked ~ .toggle-label:after {
+  background-color: #008ba3;
+}
+@media screen and (max-width: 800px) {
+  .board-color-strongcyan.pop-over .header {
+    background: #00aecc;
+    color: #fff;
+  }
+}
+.board-color-strongcyan#header ul li.current,
+.board-color-strongcyan#header-quick-access ul li.current {
+  border-bottom: 4px solid #0adbff;
+}
+.board-color-limegreen#header,
+.board-color-limegreen.sk-spinner div,
+.board-backgrounds-list .board-color-limegreen.background-box,
+.board-list .board-color-limegreen a {
+  background-color: #4bbf6b;
+}
+.board-color-limegreen .is-selected .minicard {
+  border-left: 3px solid #4bbf6b;
+}
+.board-color-limegreen .minicard {
+  border-radius: 7px;
+  padding: 10px 10px 4px 10px;
+  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15);
+}
+.board-color-limegreen button[type=submit].primary,
+.board-color-limegreen input[type=submit].primary,
+.board-color-limegreen .sidebar .sidebar-content .sidebar-btn {
+  background-color: #389d54;
+  border-radius: 7px;
+}
+.board-color-limegreen.pop-over .pop-over-list li a:not(.disabled):hover,
+.board-color-limegreen .sidebar .sidebar-content .sidebar-btn:hover,
+.board-color-limegreen .sidebar-list li a:hover {
+  background-color: #5dc57a;
+}
+.board-color-limegreen#header ul li.current,
+.board-color-limegreen#header-quick-access ul li.current {
+  border-bottom: 2px solid #5dc57a;
+}
+.board-color-limegreen#header-quick-access {
+  background: #3fb15e;
+  color: #fff;
+}
+.board-color-limegreen#header #header-main-bar .board-header-btn.emphasis {
+  background: #bf4b9f;
+}
+.board-color-limegreen#header #header-main-bar .board-header-btn.emphasis:hover,
+.board-color-limegreen#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close {
+  background: #b13f91;
+}
+.board-color-limegreen#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close {
+  background: #9d3881;
+}
+.board-color-limegreen .materialCheckBox.is-checked {
+  border-bottom: 2px solid #4bbf6b;
+  border-right: 2px solid #4bbf6b;
+}
+.board-color-limegreen .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
+  background: #edf9f0;
+}
+.board-color-limegreen .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) {
+  background: #fafdfb;
+}
+.board-color-limegreen .toggle-label:after {
+  background-color: #389d54;
+}
+.board-color-limegreen .toggle-switch:checked ~ .toggle-label {
+  background-color: #6fcc89;
+}
+.board-color-limegreen .toggle-switch:checked ~ .toggle-label:after {
+  background-color: #389d54;
+}
+@media screen and (max-width: 800px) {
+  .board-color-limegreen.pop-over .header {
+    background: #4bbf6b;
+    color: #fff;
+  }
+}
+.board-color-limegreen#header ul li.current,
+.board-color-limegreen#header-quick-access ul li.current {
+  border-bottom: 4px solid #6fcc89;
+}
+.board-color-dark#header,
+.board-color-dark.sk-spinner div,
+.board-backgrounds-list .board-color-dark.background-box,
+.board-list .board-color-dark a {
+  background-color: #2c3e51;
+}
+.board-color-dark .is-selected .minicard {
+  border-left: 3px solid #2c3e51;
+}
+.board-color-dark .minicard {
+  border-radius: 7px;
+  padding: 10px 10px 4px 10px;
+  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15);
+}
+.board-color-dark button[type=submit].primary,
+.board-color-dark input[type=submit].primary,
+.board-color-dark .sidebar .sidebar-content .sidebar-btn {
+  background-color: #233241;
+  border-radius: 7px;
+}
+.board-color-dark.pop-over .pop-over-list li a:not(.disabled):hover,
+.board-color-dark .sidebar .sidebar-content .sidebar-btn:hover,
+.board-color-dark .sidebar-list li a:hover {
+  background-color: #3a516a;
+}
+.board-color-dark#header ul li.current,
+.board-color-dark#header-quick-access ul li.current {
+  border-bottom: 2px solid #3a516a;
+}
+.board-color-dark#header-quick-access {
+  background: #283849;
+  color: #fff;
+}
+.board-color-dark#header #header-main-bar .board-header-btn.emphasis {
+  background: #513f2c;
+}
+.board-color-dark#header #header-main-bar .board-header-btn.emphasis:hover,
+.board-color-dark#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close {
+  background: #493928;
+}
+.board-color-dark#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close {
+  background: #413223;
+}
+.board-color-dark .materialCheckBox.is-checked {
+  border-bottom: 2px solid #2c3e51;
+  border-right: 2px solid #2c3e51;
+}
+.board-color-dark .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
+  background: #e6ecf1;
+}
+.board-color-dark .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) {
+  background: #f8f9fb;
+}
+.board-color-dark .toggle-label:after {
+  background-color: #233241;
+}
+.board-color-dark .toggle-switch:checked ~ .toggle-label {
+  background-color: #476483;
+}
+.board-color-dark .toggle-switch:checked ~ .toggle-label:after {
+  background-color: #233241;
+}
+@media screen and (max-width: 800px) {
+  .board-color-dark.pop-over .header {
+    background: #2c3e51;
+    color: #fff;
+  }
+}
+.board-color-dark#header ul li.current,
+.board-color-dark#header-quick-access ul li.current {
+  border-bottom: 4px solid #476483;
+}
+.board-color-dark .ui-sortable,
+.board-color-dark .swimlane,
+.board-color-dark .swimlane >.swimlane-header-wrap,
+.board-color-dark .swimlane >.list.js-list,
+.board-color-dark .swimlane >.list-composer.js-list-composer,
+.board-color-dark .list-body,
+.board-color-dark .list,
+.board-color-dark .list-composer,
+.board-color-dark .sidebar-content,
+.board-color-dark .card-details {
+  background-color: #2c3e50;
+}
+.board-color-dark .card-details h3,
+.board-color-dark .card-details-left p,
+.board-color-dark .card-details-items,
+.board-color-dark .card-checklist-items .ui-sortable,
+.board-color-dark .card-subtasks-items,
+.board-color-dark .activities,
+.board-color-dark .material-toggle-switch {
+  color: #bbb;
+}
+.board-color-dark .list-header {
+  background-color: #888;
+}
+.board-color-dark .board-widget,
+.board-color-dark .board-widget-labels,
+.board-color-dark .board-widget-members {
+  color: #aaa;
+}
+.board-color-dark .pop-over >.header {
+  display: none;
+}
+.board-color-dark #header-quick-access .fa-plus {
+  display: none;
+}
+.board-color-dark #header-quick-access:hover .fa-plus {
+  display: inherit;
+}
+.board-color-dark .open-minicard-composer {
+  visibility: hidden;
+}
+.board-color-dark .list.js-list:hover .open-minicard-composer {
+  visibility: visible;
+}
+.board-color-dark .list-header-menu {
+  visibility: hidden;
+}
+.board-color-dark .list.js-list:hover .list-header-menu {
+  visibility: visible;
+}
+.board-color-dark .list.js-list-composer >.list-header {
+  visibility: hidden;
+}
+.board-color-dark .list.js-list-composer:hover >.list-header {
+  visibility: visible;
+}
+.board-color-dark #header-quick-access,
+.board-color-dark #header {
+  background-color: rgba(0,0,0,0.75) !important;
+}
+.board-color-dark #header .board-header-btn:hover {
+  background-color: rgba(255,255,255,0.3) !important;
+}
+.board-color-dark .list >.list-header,
+.board-color-dark .swimlane-header {
+  color: rgba(255,255,255,0.7);
+}
+.board-color-dark .minicard-wrapper.is-selected .minicard,
+.board-color-dark .minicard:hover,
+.board-color-dark .minicard-composer.js-composer,
+.board-color-dark .open-minicard-composer:hover {
+  background-color: rgba(255,255,255,0.8) !important;
+  color: #000;
+  border-radius: 7px;
+}
+.board-color-dark .minicard:hover .badge,
+.board-color-dark .minicard-wrapper.is-selected .badge {
+  color: #000;
+}
+.board-color-dark .card-details .card-details-header {
+  background-color: #ccc;
+}
+.board-color-dark .sidebar-tongue,
+.board-color-dark .sidebar-shadow {
+  background-color: #666 !important;
+}
+.board-color-dark .sidebar-content h3,
+.board-color-dark .sidebar-content h2,
+.board-color-dark .sidebar-content {
+  color: rgba(255,255,255,0.7) !important;
+}
+.board-color-dark .card-details .activities .activity .activity-desc .activity-comment {
+  background-color: #ccc;
+  color: #222;
+}
+.board-color-relax#header,
+.board-color-relax.sk-spinner div,
+.board-backgrounds-list .board-color-relax.background-box,
+.board-list .board-color-relax a {
+  background-color: #27ae61;
+}
+.board-color-relax .is-selected .minicard {
+  border-left: 3px solid #27ae61;
+}
+.board-color-relax .minicard {
+  border-radius: 7px;
+  padding: 10px 10px 4px 10px;
+  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15);
+}
+.board-color-relax button[type=submit].primary,
+.board-color-relax input[type=submit].primary,
+.board-color-relax .sidebar .sidebar-content .sidebar-btn {
+  background-color: #1f8b4e;
+  border-radius: 7px;
+}
+.board-color-relax.pop-over .pop-over-list li a:not(.disabled):hover,
+.board-color-relax .sidebar .sidebar-content .sidebar-btn:hover,
+.board-color-relax .sidebar-list li a:hover {
+  background-color: #2cc66f;
+}
+.board-color-relax#header ul li.current,
+.board-color-relax#header-quick-access ul li.current {
+  border-bottom: 2px solid #2cc66f;
+}
+.board-color-relax#header-quick-access {
+  background: #239d57;
+  color: #fff;
+}
+.board-color-relax#header #header-main-bar .board-header-btn.emphasis {
+  background: #ae2774;
+}
+.board-color-relax#header #header-main-bar .board-header-btn.emphasis:hover,
+.board-color-relax#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close {
+  background: #9d2368;
+}
+.board-color-relax#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close {
+  background: #8b1f5d;
+}
+.board-color-relax .materialCheckBox.is-checked {
+  border-bottom: 2px solid #27ae61;
+  border-right: 2px solid #27ae61;
+}
+.board-color-relax .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
+  background: #e7faef;
+}
+.board-color-relax .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) {
+  background: #f8fdfa;
+}
+.board-color-relax .toggle-label:after {
+  background-color: #1f8b4e;
+}
+.board-color-relax .toggle-switch:checked ~ .toggle-label {
+  background-color: #3dd37e;
+}
+.board-color-relax .toggle-switch:checked ~ .toggle-label:after {
+  background-color: #1f8b4e;
+}
+@media screen and (max-width: 800px) {
+  .board-color-relax.pop-over .header {
+    background: #27ae61;
+    color: #fff;
+  }
+}
+.board-color-relax#header ul li.current,
+.board-color-relax#header-quick-access ul li.current {
+  border-bottom: 4px solid #3dd37e;
+}
+.board-color-relax .ui-sortable {
+  background-color: #a7e366;
+}
+.board-color-relax .list-header {
+  background-color: #a7e366;
+}
+.board-color-relax .list-body {
+  background-color: #a7e366;
+}
+.board-color-relax .list {
+  border-left: 1px dotted #000;
+}
+.board-color-relax .card-details .card-details-items ~ .js-open-inlined-form .viewer {
+  background-color: #fff !important;
+  padding: 15px !important;
+  border: 1px solid #000 !important;
+  word-wrap: break-word;
+}
+.board-color-relax .minicard .badges .badge .badge-icon.badge-comment,
+.board-color-relax .minicard .badges .badge .badge-text.badge-comment {
+  display: block;
+  border-radius: 4px;
+  padding: 1px 3px;
+  margin-bottom: 0.3rem;
+  color: #f00;
+  background-color: #fff;
+  font-weight: bold;
+  font-size: 11pt;
+}
+.board-color-corteza#header,
+.board-color-corteza.sk-spinner div,
+.board-backgrounds-list .board-color-corteza.background-box,
+.board-list .board-color-corteza a {
+  background-color: #568ba2;
+}
+.board-color-corteza .is-selected .minicard {
+  border-left: 3px solid #568ba2;
+}
+.board-color-corteza .minicard {
+  border-radius: 7px;
+  padding: 10px 10px 4px 10px;
+  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15);
+}
+.board-color-corteza button[type=submit].primary,
+.board-color-corteza input[type=submit].primary,
+.board-color-corteza .sidebar .sidebar-content .sidebar-btn {
+  background-color: #456f82;
+  border-radius: 7px;
+}
+.board-color-corteza.pop-over .pop-over-list li a:not(.disabled):hover,
+.board-color-corteza .sidebar .sidebar-content .sidebar-btn:hover,
+.board-color-corteza .sidebar-list li a:hover {
+  background-color: #6597ad;
+}
+.board-color-corteza#header ul li.current,
+.board-color-corteza#header-quick-access ul li.current {
+  border-bottom: 2px solid #6597ad;
+}
+.board-color-corteza#header-quick-access {
+  background: #4d7d92;
+  color: #fff;
+}
+.board-color-corteza#header #header-main-bar .board-header-btn.emphasis {
+  background: #a26d56;
+}
+.board-color-corteza#header #header-main-bar .board-header-btn.emphasis:hover,
+.board-color-corteza#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close {
+  background: #92624d;
+}
+.board-color-corteza#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close {
+  background: #825745;
+}
+.board-color-corteza .materialCheckBox.is-checked {
+  border-bottom: 2px solid #568ba2;
+  border-right: 2px solid #568ba2;
+}
+.board-color-corteza .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
+  background: #eef3f6;
+}
+.board-color-corteza .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) {
+  background: #fafcfc;
+}
+.board-color-corteza .toggle-label:after {
+  background-color: #456f82;
+}
+.board-color-corteza .toggle-switch:checked ~ .toggle-label {
+  background-color: #76a3b6;
+}
+.board-color-corteza .toggle-switch:checked ~ .toggle-label:after {
+  background-color: #456f82;
+}
+@media screen and (max-width: 800px) {
+  .board-color-corteza.pop-over .header {
+    background: #568ba2;
+    color: #fff;
+  }
+}
+.board-color-corteza#header ul li.current,
+.board-color-corteza#header-quick-access ul li.current {
+  border-bottom: 4px solid #76a3b6;
+}
+/*
+  Alternate "Clear" Styling
+*/
+.board-color-clearblue.sk-spinner div,
+.board-backgrounds-list .board-color-clearblue.background-box,
+.board-list .board-color-clearblue a {
+  background: linear-gradient(180deg, #499bea 0%, #00aecc 100%);
+}
+.board-color-clearblue .is-selected .minicard {
+  border-left: 3px solid #499bea;
+}
+.board-color-clearblue.pop-over .pop-over-list li a:not(.disabled):hover,
+.board-color-clearblue .sidebar .sidebar-content .sidebar-btn:hover,
+.board-color-clearblue .sidebar-list li a:hover {
+  background-color: #5ba5ec;
+}
+.board-color-clearblue#header ul li.current,
+.board-color-clearblue#header-quick-access ul li.current {
+  border-bottom: 4px solid #00c8eb;
+}
+.board-color-clearblue#header-quick-access {
+  background: #2d8ce7;
+  color: #fff;
+}
+.board-color-clearblue#header-quick-access #header-new-board-icon,
+.board-color-clearblue#header-quick-access #header-user-bar,
+.board-color-clearblue#header-quick-access ul li {
+  color: rgba(255,255,255,0.5);
+}
+.board-color-clearblue#header {
+  background-color: #00aecc;
+  border-bottom: 1px solid #008ba3;
+  border-top: 1px solid #00687a;
+}
+.board-color-clearblue#header #header-main-bar {
+  background: linear-gradient(180deg, #499bea 0%, #00aecc 100%);
+}
+.board-color-clearblue#header #header-main-bar p {
+  margin-bottom: 6px;
+}
+.board-color-clearblue#header #header-main-bar .board-header-btn.emphasis {
+  background: #00c8eb;
+}
+.board-color-clearblue#header #header-main-bar .board-header-btn.emphasis:hover,
+.board-color-clearblue#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close {
+  background: rgba(0,0,0,0.2);
+}
+.board-color-clearblue#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close {
+  background: rgba(0,0,0,0.2);
+}
+.board-color-clearblue .materialCheckBox.is-checked {
+  border-bottom: 2px solid #499bea;
+  border-right: 2px solid #499bea;
+}
+.board-color-clearblue .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
+  background: #e0fbff;
+}
+.board-color-clearblue .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) {
+  background: #f6feff;
+}
+.board-color-clearblue .toggle-switch:checked ~ .toggle-label {
+  background-color: #6dafee;
+}
+.board-color-clearblue .toggle-switch:checked ~ .toggle-label:after {
+  background-color: #197ddc;
+}
+.board-color-clearblue .board-canvas {
+  background: linear-gradient(135deg, #499bea 0%, #00aecc 100%);
+}
+.board-color-clearblue .swimlane {
+  background: none;
+}
+.board-color-clearblue .list:first-child {
+  margin-left: 15px;
+}
+.board-color-clearblue .list {
+  background: rgba(255,255,255,0.35);
+  margin: 10px;
+  border: 0;
+  border-radius: 14px;
+}
+.board-color-clearblue .list.list-composer {
+  background: rgba(255,255,255,0.1);
+  height: min-content;
+  flex: unset;
+  width: 270px;
+  padding-bottom: 16px;
+}
+.board-color-clearblue .list.list-composer .open-list-composer {
+  border-radius: 7px;
+  color: rgba(0,0,0,0.3);
+  padding: 7px 10px;
+  display: block;
+}
+.board-color-clearblue .list.list-composer .open-list-composer:hover {
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  background: rgba(255,255,255,0.7);
+  color: rgba(0,0,0,0.6);
+}
+.board-color-clearblue .list-header {
+  background-color: rgba(255,255,255,0.25);
+  border-radius: 14px 14px 0 0;
+}
+.board-color-clearblue .list-header:not([class*="list-header-"]) {
+  border-bottom: 6px solid rgba(255,255,255,0);
+}
+.board-color-clearblue .list-header .list-header-name {
+  color: rgba(0,0,0,0.6);
+}
+.board-color-clearblue .list-body {
+  padding: 11px;
+}
+.board-color-clearblue .minicard {
+  border-radius: 7px;
+  padding: 10px 10px 4px 10px;
+  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15);
+  color: #222;
+}
+.board-color-clearblue .card-details {
+  border-radius: 0 0 14px 14px;
+  box-shadow: 0 0 7px 0 rgba(0,0,0,0.5);
+  margin-left: -10px;
+}
+.board-color-clearblue .list-body .open-minicard-composer {
+  border-radius: 7px;
+  color: rgba(0,0,0,0.3);
+  margin-bottom: 11px;
+}
+.board-color-clearblue .list-body .open-minicard-composer:hover {
+  background: rgba(255,255,255,0.7);
+  color: rgba(0,0,0,0.6);
+}
+.board-color-clearblue button[type=submit].primary,
+.board-color-clearblue input[type=submit].primary {
+  box-shadow: none;
+  background-color: rgba(255,255,255,0.5);
+  color: rgba(0,0,0,0.55);
+  border-radius: 7px;
+  border: 0;
+}
+.board-color-clearblue button[type="submit"].primary:hover,
+.board-color-clearblue input[type="submit"].primary:hover {
+  background-color: rgba(255,255,255,0.7);
+  color: rgba(0,0,0,0.8);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  border-radius: 7px;
+}
+.board-color-clearblue .quiet,
+.board-color-clearblue .quiet a {
+  color: rgba(0,0,0,0.4);
+}
+.board-color-clearblue .list-header .list-header-watch-icon {
+  color: rgba(0,0,0,0.5);
+  position: absolute;
+  margin-top: -34px;
+  margin-left: -11px;
+}
+.board-color-clearblue a.fa,
+.board-color-clearblue a i.fa {
+  color: rgba(0,0,0,0.3);
+}
+.board-color-clearblue a:not(.disabled).is-active.fa,
+.board-color-clearblue a:not(.disabled).is-active i.fa,
+.board-color-clearblue a:not(.disabled):hover.fa,
+.board-color-clearblue a:not(.disabled):hover i.fa {
+  color: rgba(0,0,0,0.6);
+  border-radius: 7px;
+}
+.board-color-clearblue input[type="email"],
+.board-color-clearblue input[type="password"],
+.board-color-clearblue input[type="text"] {
+  border: 0;
+  border-radius: 7px;
+}
+.board-color-clearblue .sidebar-shadow {
+  box-shadow: none;
+  border-left: 9px solid #00aecc;
+}
+.board-color-clearblue .is-open .sidebar-shadow {
+  box-shadow: -10px 0 8px rgba(0,0,0,0.3);
+}
+.board-color-clearblue .list.ui-sortable-helper {
+  transform: rotate(0deg);
+}
+.board-color-clearblue .minicard-wrapper.placeholder {
+  background: rgba(0,0,0,0.1);
+}
+.board-color-clearblue .minicard-wrapper.ui-sortable-helper {
+  transform: rotate(0deg);
+  opacity: 0.8;
+}
+.board-color-clearblue .list-body .open-minicard-composer {
+  color: rgba(0,0,0,0.3);
+}
+.board-color-clearblue .swinlane.ui-sortable-helper {
+  transform: rotate(0deg);
+}
+.board-color-clearblue .swimlane .swimlane-header-wrap {
+  background: linear-gradient(0deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.25) 100%);
+}
+.board-color-clearblue .swimlane-header-wrap .inlined-form {
+  width: 100%;
+}
+.board-color-clearblue .swimlane-header-wrap .list-composer {
+  text-align: center;
+  margin: 5px;
+}
+.board-color-clearblue .swimlane-header-wrap .list-name-input.full-line {
+  margin: 0;
+  display: inline-block;
+  width: 270px;
+}
+.board-color-clearblue .swimlane-header-wrap .edit-controls {
+  display: inline-block;
+  vertical-align: middle;
+}
+.board-color-clearblue .swimlane-header-wrap .primary.confirm {
+  margin-right: 0;
+}
+.board-color-clearblue .swimlane-header-wrap .fa.fa-times-thin {
+  margin-top: 2px;
+}
+.board-color-clearblue .list.ui-sortable-helper,
+.board-color-clearblue .list.ui-sortable-helper .list-header.ui-sortable-handle,
+.board-color-clearblue .list.ui-sortable-helper .viewer {
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+}
+/*
+  Alternate "Natural" Styling
+*/
+.board-color-natural#header,
+.board-color-natural.sk-spinner div,
+.board-backgrounds-list .board-color-natural.background-box,
+.board-list .board-color-natural a {
+  background-color: #596557;
+}
+.board-color-natural .is-selected .minicard {
+  border-left: 3px solid #596557;
+}
+.board-color-natural .minicard {
+  border-radius: 7px;
+  padding: 10px 10px 4px 10px;
+  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15);
+}
+.board-color-natural button[type=submit].primary,
+.board-color-natural input[type=submit].primary,
+.board-color-natural .sidebar .sidebar-content .sidebar-btn {
+  background-color: #475146;
+  border-radius: 7px;
+}
+.board-color-natural.pop-over .pop-over-list li a:not(.disabled):hover,
+.board-color-natural .sidebar .sidebar-content .sidebar-btn:hover,
+.board-color-natural .sidebar-list li a:hover {
+  background-color: #687666;
+}
+.board-color-natural#header ul li.current,
+.board-color-natural#header-quick-access ul li.current {
+  border-bottom: 2px solid #687666;
+}
+.board-color-natural#header-quick-access {
+  background: #505b4e;
+  color: #fff;
+}
+.board-color-natural#header #header-main-bar .board-header-btn.emphasis {
+  background: #635765;
+}
+.board-color-natural#header #header-main-bar .board-header-btn.emphasis:hover,
+.board-color-natural#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close {
+  background: #594e5b;
+}
+.board-color-natural#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close {
+  background: #4f4651;
+}
+.board-color-natural .materialCheckBox.is-checked {
+  border-bottom: 2px solid #596557;
+  border-right: 2px solid #596557;
+}
+.board-color-natural .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
+  background: #eef0ee;
+}
+.board-color-natural .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) {
+  background: #fafbfa;
+}
+.board-color-natural .toggle-label:after {
+  background-color: #475146;
+}
+.board-color-natural .toggle-switch:checked ~ .toggle-label {
+  background-color: #778875;
+}
+.board-color-natural .toggle-switch:checked ~ .toggle-label:after {
+  background-color: #475146;
+}
+@media screen and (max-width: 800px) {
+  .board-color-natural.pop-over .header {
+    background: #596557;
+    color: #fff;
+  }
+}
+.board-color-natural#header ul li.current,
+.board-color-natural#header-quick-access ul li.current {
+  border-bottom: 4px solid #778875;
+}
+.board-color-natural#header-quick-access {
+  background-color: #2d392b;
+}
+.board-color-natural .ui-sortable {
+  background-color: #dedede;
+}
+.board-color-natural .swimlane .swimlane-header-wrap {
+  background-color: #c2c0ab;
+}
+/*
+  Alternate "Modern" Styling
+*/
+.board-color-modern#header,
+.board-color-modern.sk-spinner div,
+.board-backgrounds-list .board-color-modern.background-box,
+.board-list .board-color-modern a {
+  background-color: #2a80b8;
+}
+.board-color-modern .is-selected .minicard {
+  border-left: 3px solid #2a80b8;
+}
+.board-color-modern .minicard {
+  border-radius: 7px;
+  padding: 10px 10px 4px 10px;
+  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15);
+}
+.board-color-modern button[type=submit].primary,
+.board-color-modern input[type=submit].primary,
+.board-color-modern .sidebar .sidebar-content .sidebar-btn {
+  background-color: #226693;
+  border-radius: 7px;
+}
+.board-color-modern.pop-over .pop-over-list li a:not(.disabled):hover,
+.board-color-modern .sidebar .sidebar-content .sidebar-btn:hover,
+.board-color-modern .sidebar-list li a:hover {
+  background-color: #2f90cf;
+}
+.board-color-modern#header ul li.current,
+.board-color-modern#header-quick-access ul li.current {
+  border-bottom: 2px solid #2f90cf;
+}
+.board-color-modern#header-quick-access {
+  background: #2673a6;
+  color: #fff;
+}
+.board-color-modern#header #header-main-bar .board-header-btn.emphasis {
+  background: #b8622a;
+}
+.board-color-modern#header #header-main-bar .board-header-btn.emphasis:hover,
+.board-color-modern#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close {
+  background: #a65826;
+}
+.board-color-modern#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close {
+  background: #934e22;
+}
+.board-color-modern .materialCheckBox.is-checked {
+  border-bottom: 2px solid #2a80b8;
+  border-right: 2px solid #2a80b8;
+}
+.board-color-modern .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
+  background: #e8f3fa;
+}
+.board-color-modern .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) {
+  background: #f8fbfd;
+}
+.board-color-modern .toggle-label:after {
+  background-color: #226693;
+}
+.board-color-modern .toggle-switch:checked ~ .toggle-label {
+  background-color: #469cd5;
+}
+.board-color-modern .toggle-switch:checked ~ .toggle-label:after {
+  background-color: #226693;
+}
+@media screen and (max-width: 800px) {
+  .board-color-modern.pop-over .header {
+    background: #2a80b8;
+    color: #fff;
+  }
+}
+.board-color-modern#header ul li.current,
+.board-color-modern#header-quick-access ul li.current {
+  border-bottom: 4px solid #469cd5;
+}
+.board-color-modern body {
+  background: #f5f5f5;
+}
+.board-color-modern#header-quick-access {
+  padding: 10px;
+  font-size: 14px;
+  background: #333 !important;
+}
+.board-color-modern#header-quick-access ul {
+  overflow: visible;
+}
+.board-color-modern#header-quick-access ul li.current {
+  border: 0 !important;
+  font-weight: bold;
+}
+.board-color-modern#header-quick-access ul li.separator {
+  display: none;
+}
+.board-color-modern#header-quick-access ul li:nth-child(3) {
+  margin-right: 10px;
+}
+.board-color-modern#header-quick-access ul li a {
+  padding: 5px 10px;
+  border-radius: 2px;
+}
+.board-color-modern#header-quick-access ul li.current a {
+  border-radius: 2px;
+  background: rgba(255,255,255,0.2);
+}
+.board-color-modern#header #header-main-bar h1 {
+  font-family: Poppins;
+  font-weight: bold;
+}
+.board-color-modern#header-quick-access #header-user-bar {
+  position: relative;
+}
+.board-color-modern#header-quick-access #header-user-bar .header-user-bar-name {
+  margin: 5px 3px 0 0;
+}
+.board-color-modern section#notifications-drawer {
+  top: 46px;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+  max-width: 100%;
+}
+.board-color-modern section#notifications-drawer .header {
+  top: 46px;
+  border-radius: 0 3px;
+  height: 21px;
+  background: #f7f7f7;
+}
+.board-color-modern .board-canvas {
+  background: #f5f5f5;
+}
+.board-color-modern .swimlane {
+  background: none;
+}
+.board-color-modern .swimlane .swimlane-header-wrap .swimlane-header {
+  font-family: Poppins;
+}
+.board-color-modern .board-list .board-list-item {
+  padding: 20px;
+}
+.board-color-modern .board-list-item-name {
+  font-family: Poppins;
+}
+.board-color-modern .list {
+  background: transparent;
+  border-left: 0;
+  margin: 10px 0;
+  padding: 0px;
+  border-radius: 5px;
+  min-width: 300px;
+}
+.board-color-modern .list-body .open-minicard-composer:hover {
+  background: none;
+  box-shadow: none;
+}
+.board-color-modern .list:first-child {
+  margin-left: 5px;
+}
+.board-color-modern .list.list-composer.js-list-composer {
+  transition: all 0.3s ease;
+  min-width: 80px;
+}
+.board-color-modern .open-list-composer.js-open-inlined-form:hover {
+  color: #222;
+}
+.board-color-modern .list-header {
+  background: none;
+}
+.board-color-modern .list-header .list-header-name {
+  font-family: Poppins;
+  color: #000;
+  font-weight: 500;
+}
+.board-color-modern .minicard {
+  padding: 15px 15px 10px;
+  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
+}
+.board-color-modern .minicard-plum:hover:not(.minicard-composer),
+.board-color-modern .is-selected .minicard-plum,
+.board-color-modern .draggable-hover-card .minicard-plum {
+  background: none;
+}
+.board-color-modern .minicard-title {
+  line-height: 1.5em;
+}
+.board-color-modern .minicard .minicard-cover {
+  background-size: cover;
+  margin: -15px -15px 10px;
+  height: 100px;
+}
+.board-color-modern .card-label-orange {
+  color: #fff;
+}
+.board-color-modern .card-date {
+  font-size: 12px;
+  padding: 3px 5px;
+}
+.board-color-modern .header-title {
+  font-family: Poppins;
+  font-size: 16px;
+  color: #333;
+}
+.board-color-modern .pop-over {
+  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+  border: 0;
+  border-radius: 5px;
+}
+.board-color-modern .pop-over .header {
+  padding: 10px;
+  border-bottom: 0;
+  border-radius: 5px 5px 0 0;
+  background: #eee;
+}
+.board-color-modern .pop-over .header .header-title {
+  font-family: Poppins;
+  font-size: 16px;
+  color: #333;
+}
+.board-color-modern .pop-over .header .close-btn {
+  font-size: 20px;
+  top: 6px;
+  right: 8px;
+}
+.board-color-modern .pop-over .content-container .content {
+  padding: 5px 20px 20px;
+  width: 260px;
+}
+.board-color-modern .pop-over-list li > a {
+  border-radius: 5px;
+}
+.board-color-modern .pop-over-list li > a > i {
+  margin-right: 5px;
+}
+.board-color-modern .pop-over-list li>a .sub-name {
+  margin-bottom: 8px;
+}
+.board-color-modern .sidebar .sidebar-shadow {
+  box-shadow: 0 0 60px rgba(0,0,0,0.2);
+}
+.board-color-modern .sidebar .sidebar-content {
+  padding: 30px;
+}
+.board-color-modern .board-color-modern section#notifications-drawer {
+  border-radius: 5px;
+}
+.board-color-modern .board-color-modern section#notifications-drawer .header {
+  padding: 18px 16px;
+  border-bottom: 0;
+  border-radius: 5px 5px 0 0;
+  background: #eee;
+}
+.board-color-modern .board-color-modern section#notifications-drawer .header h5 {
+  font-family: Poppins;
+  font-weight: bold;
+}
+.board-color-modern .board-color-modern section#notifications-drawer .header .close {
+  font-size: 20px;
+  top: 14px;
+}
+.board-color-modern section#notifications-drawer .header .toggle-read {
+  top: 18px;
+}
+/*
+  Alternate "Modern Dark" Styling
+*/
+.board-color-moderndark#header,
+.board-color-moderndark.sk-spinner div,
+.board-backgrounds-list .board-color-moderndark.background-box,
+.board-list .board-color-moderndark a {
+  background-color: #2a2a2a;
+}
+.board-color-moderndark .is-selected .minicard {
+  border-left: 3px solid #2a2a2a;
+}
+.board-color-moderndark .minicard {
+  border-radius: 7px;
+  padding: 10px 10px 4px 10px;
+  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15);
+}
+.board-color-moderndark button[type=submit].primary,
+.board-color-moderndark input[type=submit].primary,
+.board-color-moderndark .sidebar .sidebar-content .sidebar-btn {
+  background-color: #222;
+  border-radius: 7px;
+}
+.board-color-moderndark.pop-over .pop-over-list li a:not(.disabled):hover,
+.board-color-moderndark .sidebar .sidebar-content .sidebar-btn:hover,
+.board-color-moderndark .sidebar-list li a:hover {
+  background-color: #3f3f3f;
+}
+.board-color-moderndark#header ul li.current,
+.board-color-moderndark#header-quick-access ul li.current {
+  border-bottom: 2px solid #3f3f3f;
+}
+.board-color-moderndark#header-quick-access {
+  background: #262626;
+  color: #fff;
+}
+.board-color-moderndark#header #header-main-bar .board-header-btn.emphasis {
+  background: #2a2a2a;
+}
+.board-color-moderndark#header #header-main-bar .board-header-btn.emphasis:hover,
+.board-color-moderndark#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close {
+  background: #262626;
+}
+.board-color-moderndark#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close {
+  background: #222;
+}
+.board-color-moderndark .materialCheckBox.is-checked {
+  border-bottom: 2px solid #2a2a2a;
+  border-right: 2px solid #2a2a2a;
+}
+.board-color-moderndark .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
+  background: #eaeaea;
+}
+.board-color-moderndark .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) {
+  background: #f9f9f9;
+}
+.board-color-moderndark .toggle-label:after {
+  background-color: #222;
+}
+.board-color-moderndark .toggle-switch:checked ~ .toggle-label {
+  background-color: #555;
+}
+.board-color-moderndark .toggle-switch:checked ~ .toggle-label:after {
+  background-color: #222;
+}
+@media screen and (max-width: 800px) {
+  .board-color-moderndark.pop-over .header {
+    background: #2a2a2a;
+    color: #fff;
+  }
+}
+.board-color-moderndark#header ul li.current,
+.board-color-moderndark#header-quick-access ul li.current {
+  border-bottom: 4px solid #555;
+}
+.board-color-moderndark body {
+  background: #2a2a2a;
+}
+.board-color-moderndark .board-wrapper .board-canvas .board-overlay {
+  opacity: 0.6;
+}
+.board-color-moderndark button[type=submit].primary,
+.board-color-moderndark .board-color-modern input[type=submit].primary {
+  background-color: #777;
+  border-radius: 7px;
+}
+.board-color-moderndark .toggle-switch:checked~.toggle-label {
+  background-color: #f7f7f7;
+}
+.board-color-moderndark .toggle-label:after,
+.board-color-moderndark .board-color-modern .toggle-switch:checked~.toggle-label:after {
+  background-color: #777 !important;
+}
+.board-color-moderndark button,
+.board-color-moderndark input:not([type=file]),
+.board-color-moderndark select,
+.board-color-moderndark textarea {
+  border-radius: 7px;
+}
+.board-color-moderndark#header {
+  background-color: #262626;
+  border-bottom: 1px solid #555;
+  border-top: 1px solid #555;
+}
+.board-color-moderndark#header-quick-access,
+.board-color-moderndark .background-box,
+.board-color-moderndark #header {
+  background-color: #333;
+}
+.board-color-moderndark#header-quick-access {
+  padding: 4px;
+  font-size: 14px;
+}
+.board-color-moderndark#header-quick-access .allBoards {
+  padding: 5px 10px 0 10px;
+}
+.board-color-moderndark#header-quick-access ul.header-quick-access-list {
+  margin: -5px 0 -5px 0;
+}
+.board-color-moderndark#header #header-main-bar {
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+.board-color-moderndark#header-quick-access ul {
+  overflow: visible;
+}
+.board-color-moderndark#header-quick-access ul li.current {
+  border: 0 !important;
+  font-weight: bold;
+}
+.board-color-moderndark#header-quick-access ul li.separator {
+  display: none;
+}
+.board-color-moderndark#header-quick-access ul li:nth-child(3) {
+  margin-right: 10px;
+}
+.board-color-moderndark#header-quick-access ul li a {
+  padding: 5px 10px;
+  border-radius: 2px;
+}
+.board-color-moderndark#header-quick-access ul li.current a {
+  border-radius: 2px;
+  background: rgba(255,255,255,0.2);
+}
+.board-color-moderndark#header #header-main-bar h1 {
+  font-family: Poppins;
+  font-weight: bold;
+  line-height: 0.8em;
+  padding-top: 10px;
+}
+.board-color-moderndark .board-canvas {
+  background: #2a2a2a;
+}
+.board-color-moderndark .swimlane .swimlane-header-wrap {
+  background-color: #494949;
+  color: #ccc;
+  padding: 4px 0;
+}
+.board-color-moderndark .swimlane .swimlane-header-wrap .swimlane-header {
+  font-family: Poppins;
+}
+.board-color-moderndark .swimlane .swimlane-header-wrap .swimlane-header-menu {
+  padding: 6px;
+  font-size: 16px;
+}
+.board-color-moderndark .swimlane .swimlane-header-wrap .swimlane-header-plus-icon {
+  font-size: 16px;
+}
+.board-color-moderndark .swimlane {
+  background: #2a2a2a;
+  line-height: 18px;
+  max-height: 100%;
+}
+.board-color-moderndark .swimlane .list {
+  background: #666;
+  border-radius: 0;
+  border: 0px solid #666;
+  flex: 0 0 265px;
+}
+.board-color-moderndark .swimlane .list:first-child {
+  margin-left: 0;
+}
+.board-color-moderndark .swimlane .list:nth-child(even) .list-header,
+.board-color-moderndark .swimlane .list:nth-child(even) .list-body {
+  background: #6a6a6a;
+}
+.board-color-moderndark .swimlane .list:nth-child(odd) .list-header,
+.board-color-moderndark .swimlane .list:nth-child(odd) .list-body {
+  background: #555;
+}
+.board-color-moderndark .list-header {
+  background: #6a6a6a;
+}
+.board-color-moderndark .list-header .viewer {
+  padding-left: 10px;
+}
+.board-color-moderndark .list-header .list-header-name,
+.board-color-moderndark .minicard {
+  line-height: 14px;
+  color: #eee;
+}
+.board-color-moderndark .list-header .list-header-menu {
+  padding: 10px;
+  top: 0;
+}
+.board-color-moderndark .list-header .list-header-plus-top {
+  color: #a6a6a6;
+}
+.board-color-moderndark .list-body {
+  scrollbar-width: thin;
+  scrollbar-color: #343434 #999;
+}
+.board-color-moderndark .list-body::-webkit-scrollbar {
+  width: 10px;
+}
+.board-color-moderndark .list-body::-webkit-scrollbar-track {
+  background: #343434;
+  border-radius: 3px;
+  margin: 4px 0;
+}
+.board-color-moderndark .list-body::-webkit-scrollbar-thumb {
+  background-color: #999;
+  border-radius: 6px;
+  border: 3px solid #343434;
+}
+.board-color-moderndark .list-body .open-minicard-composer:hover {
+  background: none;
+  box-shadow: none;
+  border-bottom: 0;
+}
+.board-color-moderndark .list-body a.open-minicard-composer,
+.board-color-moderndark .list-body a.open-minicard-composer i,
+.board-color-moderndark .list .list-composer .open-list-composer i {
+  color: #bbb;
+}
+.board-color-moderndark .list-body a.open-minicard-composer:hover,
+.board-color-moderndark .list-body a.open-minicard-composer:hover i,
+.board-color-moderndark .list .list-composer .open-list-composer:hover i {
+  color: #fff;
+  border-radius: 7px;
+}
+.board-color-moderndark .minicard-wrapper {
+  margin-bottom: 12px;
+}
+.board-color-moderndark .minicard {
+  background-color: #444;
+  color: #ccc;
+  border-radius: 2px;
+  font-size: 0.95em;
+  box-shadow: 0 4px 3px -3px rgba(0,0,0,0.8);
+  border-bottom: 1px solid #666;
+  padding: 8px;
+}
+.board-color-moderndark .minicard:hover {
+  color: #f7f7f7;
+  background-color: #4d4d4d !important;
+}
+.board-color-moderndark .minicard .minicard-labels {
+  margin-bottom: 4px;
+}
+.board-color-moderndark .minicard .card-label {
+  font-size: 11px;
+  font-weight: 400;
+  padding: 1px 6px 0;
+  border-radius: 2px;
+}
+.board-color-moderndark .minicard .badges {
+  color: #bbb;
+}
+.board-color-moderndark .minicard .date {
+  margin-top: 10px;
+  font-size: 11px;
+}
+.board-color-moderndark .card-date {
+  color: #444;
+  border-radius: 2px;
+}
+.board-color-moderndark .card-date.almost-due {
+  color: #444;
+}
+.board-color-moderndark .minicard.minicard-composer textarea.minicard-composer-textarea:focus {
+  background-color: #eee;
+  color: #333;
+  padding: 6px;
+}
+.board-color-moderndark .is-selected .minicard {
+  background-color: #666;
+}
+.board-color-moderndark .card-details {
+  background-color: #454545;
+  color: #ccc;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+  border: 1px solid #111;
+  z-index: 100 !important;
+}
+@media screen and (max-width: 800px) {
+  .board-color-moderndark .card-details {
+    width: 98%;
+  }
+}
+@media screen and (min-width: 801px) {
+  .board-color-moderndark .card-details {
+    position: absolute;
+    top: 30px;
+    left: calc(50% - 384px);
+    width: 768px;
+    max-height: calc(100% - 60px);
+  }
+}
+.board-color-moderndark .card-details {
+  scrollbar-width: thin;
+  scrollbar-color: #343434 #999;
+}
+.board-color-moderndark .card-details::-webkit-scrollbar {
+  width: 16px;
+}
+.board-color-moderndark .card-details::-webkit-scrollbar-track {
+  background: #343434;
+}
+.board-color-moderndark .card-details::-webkit-scrollbar-thumb {
+  background-color: #999;
+  border-radius: 6px;
+  border: 4px solid #343434;
+}
+.board-color-moderndark .card-details .card-details-header {
+  background: #333;
+  color: #ccc;
+  border-bottom: 2px solid #2d2d2d;
+}
+.board-color-moderndark .card-details hr {
+  background: #2d2d2d;
+}
+.board-color-moderndark .card-details .card-details-item-title {
+  color: #fff;
+}
+.board-color-moderndark .card-details .new-description textarea,
+.board-color-moderndark .card-details .new-comment textarea {
+  background-color: #ddd;
+  color: #111;
+}
+.board-color-moderndark .card-details .checklist {
+  background-color: transparent;
+  margin-bottom: 10px;
+}
+.board-color-moderndark .card-details .checklist-item {
+  background-color: rgba(255,255,255,0.1);
+  padding: 4px 8px;
+  border-radius: 2px;
+  font-size: 13px;
+  margin-top: 5px;
+}
+.board-color-moderndark .card-details .checklist-item:hover {
+  background-color: rgba(255,255,255,0.2);
+}
+.board-color-moderndark .card-details .checklist-item .item-title .viewer p {
+  max-width: auto;
+}
+.board-color-moderndark .card-details .check-box.materialCheckBox {
+  border-color: #fff;
+}
+.board-color-moderndark .card-details .check-box.materialCheckBox.is-checked {
+  border-bottom: 2px solid #fff;
+  border-right: 2px solid #fff;
+  border-top: 0;
+  border-left: 0;
+}
+.board-color-moderndark .card-details .js-add-checklist-item {
+  margin-top: 4px;
+}
+.board-color-moderndark .checklist-items .add-checklist-item {
+  margin-top: 0.7em;
+}
+.board-color-moderndark .card-details .activities .activity .activity-desc .activity-comment {
+  background-color: #ccc;
+  color: #222;
+}
+.board-color-moderndark .sidebar .sidebar-shadow {
+  background-color: #222;
+  box-shadow: -10px 0 5px -10px #444;
+  border-left: 1px solid #333;
+  color: #ccc;
+}
+.board-color-moderndark .activities .activity .activity-desc .activity-comment {
+  background-color: #ccc;
+  color: #222;
+}
+.board-color-moderndark .activities .activity .activity-desc .activity-checklist {
+  background-color: #ccc;
+  color: #222;
+}
+.board-color-moderndark .attachments-galery .attachment-item {
+  color: #222;
+}
+.board-color-moderndark .minicard-description {
+  color: #222;
+}
+.pop-over.board-color-moderndark {
+  background-color: #454545;
+  color: #ccc;
+  border: 1px solid #111;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+}
+.pop-over.board-color-moderndark .header {
+  background-color: #333;
+}
+.pop-over.board-color-moderndark .header-title {
+  font-family: Poppins;
+  font-size: 16px;
+  color: #ccc;
+}
+.pop-over.board-color-moderndark .pop-over-list li > a:hover {
+  background-color: rgba(255,255,255,0.2);
+}
+.board-color-exodark#header,
+.board-color-exodark.sk-spinner div,
+.board-backgrounds-list .board-color-exodark.background-box,
+.board-list .board-color-exodark a {
+  background-color: #222;
+}
+.board-color-exodark .is-selected .minicard {
+  border-left: 3px solid #222;
+}
+.board-color-exodark .minicard {
+  border-radius: 7px;
+  padding: 10px 10px 4px 10px;
+  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15);
+}
+.board-color-exodark button[type=submit].primary,
+.board-color-exodark input[type=submit].primary,
+.board-color-exodark .sidebar .sidebar-content .sidebar-btn {
+  background-color: #1b1b1b;
+  border-radius: 7px;
+}
+.board-color-exodark.pop-over .pop-over-list li a:not(.disabled):hover,
+.board-color-exodark .sidebar .sidebar-content .sidebar-btn:hover,
+.board-color-exodark .sidebar-list li a:hover {
+  background-color: #383838;
+}
+.board-color-exodark#header ul li.current,
+.board-color-exodark#header-quick-access ul li.current {
+  border-bottom: 2px solid #383838;
+}
+.board-color-exodark#header-quick-access {
+  background: #1f1f1f;
+  color: #fff;
+}
+.board-color-exodark#header #header-main-bar .board-header-btn.emphasis {
+  background: #222;
+}
+.board-color-exodark#header #header-main-bar .board-header-btn.emphasis:hover,
+.board-color-exodark#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close {
+  background: #1f1f1f;
+}
+.board-color-exodark#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close {
+  background: #1b1b1b;
+}
+.board-color-exodark .materialCheckBox.is-checked {
+  border-bottom: 2px solid #222;
+  border-right: 2px solid #222;
+}
+.board-color-exodark .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard {
+  background: #e9e9e9;
+}
+.board-color-exodark .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) {
+  background: #f8f8f8;
+}
+.board-color-exodark .toggle-label:after {
+  background-color: #1b1b1b;
+}
+.board-color-exodark .toggle-switch:checked ~ .toggle-label {
+  background-color: #4e4e4e;
+}
+.board-color-exodark .toggle-switch:checked ~ .toggle-label:after {
+  background-color: #1b1b1b;
+}
+@media screen and (max-width: 800px) {
+  .board-color-exodark.pop-over .header {
+    background: #222;
+    color: #fff;
+  }
+}
+.board-color-exodark#header ul li.current,
+.board-color-exodark#header-quick-access ul li.current {
+  border-bottom: 4px solid #4e4e4e;
+}
+.board-color-exodark body {
+  background: #222;
+}
+.board-color-exodark i {
+  color: #00897b !important;
+}
+.board-color-exodark .board-canvas {
+  background: #222;
+  font-family: Poppins;
+}
+.board-color-exodark .swimlane {
+  background: #222;
+}
+.board-color-exodark .list {
+  margin: 10px;
+  color: #fff;
+  border-radius: 15px;
+  background: #222;
+  box-shadow: inset 15px 15px 37px #1c1c1c, inset -15px -15px 37px #282828;
+  border: none;
+}
+.board-color-exodark .list-header {
+  border-top-right-radius: 15px;
+  border-top-left-radius: 15px;
+  background: #222;
+  box-shadow: inset 15px 15px 37px #1c1c1c, inset -15px -15px 37px #282828;
+}
+.board-color-exodark .list-header-menu a {
+  color: #00897b !important;
+}
+.board-color-exodark .is-selected .minicard {
+  color: #fff;
+  background: #2b2b2b;
+  border: 1px solid #00897b;
+}
+.board-color-exodark .minicard {
+  color: #fff;
+  background: #2b2b2b;
+}
+.board-color-exodark .list-body .open-minicard-composer:hover {
+  background: #2b2b2b;
+  border: 1px solid #00897b;
+  border-radius: 10px;
+}
+.board-color-exodark .badges {
+  color: #fff;
+}
+.board-color-exodark .minicard textarea {
+  color: #fff;
+}
+.board-color-exodark .minicard .minicard-description {
+  background: #2b2b2b;
+  border: 1px solid #00897b;
+}
+.board-color-exodark .minicard:hover:not(.minicard-composer) {
+  border: 1px solid #00897b;
+  background: #2b2b2b;
+  padding: 9px 9px 3px 9px; /*because of the 1px border we need to reduce padding by 1px*/
+}
+.board-color-exodark .card-details {
+  background: #2b2b2b !important;
+  color: #fff;
+}
+.board-color-exodark .card-details .card-details-header {
+  background: #2b2b2b;
+  color: #fff;
+}
+.board-color-exodark .sidebar-content {
+  background: #2b2b2b;
+  color: #fff;
+}
+.board-color-exodark .card-details,
+.board-color-exodark .sidebar-content {
+  box-shadow: 0 0 7px 0 #00897b;
+}
+.board-color-exodark .attachments-galery .attachment-item {
+  background: #2b2b2b;
+}
+.board-color-exodark .attachments-galery .attachment-item:hover {
+  border: 1px solid #00897b;
+  background: #2b2b2b;
+}
+.board-color-exodark .checklist {
+  background: #2b2b2b;
+}
+.board-color-exodark .checklist .checklist-item {
+  background: #2b2b2b;
+}
+.board-color-exodark .checklist .checklist-item:hover {
+  background: #2b2b2b;
+}
+.board-color-exodark .add-checklist-item.js-open-inlined-form:hover {
+  background: #2b2b2b;
+  border: 1px solid #00897b;
+}
+.board-color-exodark .add-checklist.js-open-inlined-form:hover {
+  background: #2b2b2b;
+  border: 1px solid #00897b;
+}
+.board-color-exodark .card-details > h1,
+.board-color-exodark h2,
+.board-color-exodark h3,
+.board-color-exodark h4,
+.board-color-exodark h5,
+.board-color-exodark h6,
+.board-color-exodark p,
+.board-color-exodark a,
+.board-color-exodark span {
+  color: #fff !important;
+}
+.board-color-exodark .activity-desc {
+  background-color: #2b2b2b !important;
+}
+.board-color-exodark .activity-checklist {
+  background: #2b2b2b !important;
+  border: 1px solid #00897b;
+}
+.board-color-exodark .activity-comment {
+  background: #2b2b2b !important;
+  border: 1px solid #00897b;
+}
+.board-color-exodark .toggle-switch:checked ~ .toggle-label {
+  background-color: #00897b !important;
+}
+.pop-over.board-color-exodark {
+  background: #2b2b2b;
+  color: #fff;
+}
+.pop-over.board-color-exodark .header {
+  background: #2b2b2b;
+  color: #fff;
+}

client/components/boards/boardColors.styl

@@ -1,1232 +0,0 @@
-// We define a set of six board colors that we took from the FlatUI palette.
-// http://flatuicolors.com
-//
-// XXX Centralizing all these properties in a single file just because their
-// value is derived from the same color, doesn't make any sense. We should
-// create a mixin/macro that would generate 6 versions of a given property and
-// dispatch this list in the other stylus files.
-setBoardColor(color)
-  &#header,
-  &.sk-spinner div,
-  .board-backgrounds-list &.background-box,
-  .board-list & a
-    background-color: color
-
-  .is-selected .minicard
-    border-left: 3px solid color
-
-  // All minicards rounded corners:
-  .minicard
-    border-radius: 7px
-    padding: 10px 10px 4px 10px
-    box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15)
-
-  button[type=submit].primary, input[type=submit].primary,
-  .sidebar .sidebar-content .sidebar-btn
-    background-color: darken(color, 20%)
-    border-radius: 7px
-
-  &.pop-over .pop-over-list li a:not(.disabled):hover,
-  .sidebar .sidebar-content .sidebar-btn:hover,
-  .sidebar-list li a:hover
-    background-color: lighten(color, 10%)
-
-  &#header ul li.current, &#header-quick-access ul li.current
-    border-bottom: 2px solid lighten(color, 10%)
-
-  &#header-quick-access
-    background: darken(color, 10%)
-    color: white
-
-  &#header #header-main-bar .board-header-btn.emphasis
-    background: complement(color)
-
-    &:hover,
-    .board-header-btn-close
-      background: darken(complement(color), 10%)
-
-    &:hover .board-header-btn-close
-      background: darken(complement(color), 20%)
-
-  .materialCheckBox.is-checked
-    border-bottom: 2px solid color
-    border-right: 2px solid color
-
-  .is-multiselection-active .multi-selection-checkbox
-    &.is-checked + .minicard
-      background: lighten(color, 90%)
-
-    &:not(.is-checked) + .minicard:hover:not(.minicard-composer)
-      background: lighten(color, 97%)
-
-  .toggle-label
-
-    &:after
-      background-color: darken(color, 20%)
-
-  .toggle-switch:checked ~ .toggle-label
-    background-color: lighten(color, 20%)
-
-    &:after
-      background-color: darken(color, 20%)
-
-  @media screen and (max-width: 800px)
-    &.pop-over .header
-      background: color
-      color: white
-
-   &#header ul li.current, &#header-quick-access ul li.current
-      border-bottom: 4px solid lighten(color, 20%)
-
-.board-color-nephritis
-  setBoardColor(#27AE60)
-
-.board-color-pomegranate
-  setBoardColor(#C0392B)
-
-.board-color-belize
-  setBoardColor(#2980B9)
-
-.board-color-wisteria
-  setBoardColor(#8E44AD)
-
-.board-color-midnight
-  setBoardColor(#2C3E50)
-
-.board-color-pumpkin
-  setBoardColor(#E67E22)
-
-.board-color-moderatepink
-  setBoardColor(#CD5A91)
-
-.board-color-strongcyan
-  setBoardColor(#00AECC)
-
-.board-color-limegreen
-  setBoardColor(#4BBF6B)
-
-.board-color-dark
-  setBoardColor(#2C3E51)
-
-  /* Not hidden in dark mode.
-    card fields: received, start, due, end, members, requested, assigned
-  .card-details-item.card-details-item-received,
-  .card-details-item.card-details-item-start,
-  .card-details-item.card-details-item-due,
-  .card-details-item.card-details-item-end,
-  .card-details-item.card-details-item-members,
-  .card-details-item.card-details-item-name { display:none; }
-  .card-details-items:empty { display:none; }
-  */
-
-  // DARK MODE, when dark background mode selected.
-  // Modified version from https://github.com/wekan/wekan/wiki/Custom-CSS-themes#dark-theme
-  // In progress, please send pull requests to fix remaining visibility issues.
-  .ui-sortable,
-  .swimlane,
-  .swimlane >.swimlane-header-wrap,
-  .swimlane >.list.js-list,
-  .swimlane >.list-composer.js-list-composer,
-  .list-body,
-  .list,
-  .list-composer,
-  .sidebar-content,
-  .card-details
-    background-color:#2C3E50
-
-  .card-details h3,
-  .card-details-left p,
-  .card-details-items,
-  .card-checklist-items .ui-sortable,
-  .card-subtasks-items,
-  .activities,
-  .material-toggle-switch
-    color:#bbbbbb
-
-  .list-header
-    background-color: #888888
-
-  .board-widget,
-  .board-widget-labels,
-  .board-widget-members
-    color: #aaaaaa
-
-  /* popup menu titles (boards, swimlanes, lists, cards, labels) */
-  .pop-over >.header
-    display:none;
-
-  /* HIDE UNTIL HOVER -------------------------------------------------- */
-
-  /* header "+" button */
-  #header-quick-access .fa-plus
-    display:none
-  #header-quick-access:hover .fa-plus
-    display:inherit
-
-  /* "add card" links (use visibility rather than display so items don't jump) */
-  .open-minicard-composer
-    visibility:hidden
-
-  .list.js-list:hover .open-minicard-composer
-    visibility:visible
-
-  .list-header-menu
-    visibility:hidden
-
-  .list.js-list:hover .list-header-menu
-    visibility:visible
-
-  /* "add list/swimlane" links (use visibility rather than display so items don't jump) */
-  .list.js-list-composer       >.list-header
-    visibility:hidden
-
-  .list.js-list-composer:hover >.list-header
-    visibility:visible
-
-  /* headers */
-  #header-quick-access, #header
-    background-color:rgba(0,0,0,.75) !important
-
-  #header .board-header-btn:hover
-    background-color:rgba(255,255,255,0.3) !important
-
-  /* foregrounds: swimlanes, lists */
-  .list >.list-header, .swimlane-header
-    color:rgba(255,255,255,.7)
-
-  /* minicards
-  .minicard
-    background-color:rgba(255,255,255,.4)
-  */
-
-  .minicard-wrapper.is-selected .minicard,
-  .minicard:hover,
-  .minicard-composer.js-composer,
-  .open-minicard-composer:hover
-    background-color:rgba(255,255,255,.8) !important
-    color:#000
-    border-radius: 7px
-
-  /*
-  .minicard, .minicard .badge
-    color:#fff
-  */
-
-  .minicard:hover .badge, .minicard-wrapper.is-selected .badge
-    color:#000
-
-  /* cards */
-  .card-details .card-details-header
-    background-color:#ccc
-
-  /* sidebar */
-  .sidebar-tongue, .sidebar-shadow
-    background-color:#666 !important
-
-  .sidebar-content h3, .sidebar-content h2, .sidebar-content
-    color:rgba(255,255,255,.7) !important
-
-  .card-details .activities .activity .activity-desc .activity-comment
-    background-color: #cccccc
-    color: #222222
-
-.board-color-relax
-  setBoardColor(#27AE61)
-
-  // RELAX MODE: light green background, with green background color,
-  // to help this theme users to relax.
-  // Colors and emphasis are specific to this Wekan theme contributor's company.
-  .ui-sortable
-    background-color:#a7e366
-
-  .list-header
-    background-color:#a7e366
-    // border-bottom: 6px solid #a7e366
-
-  .list-body
-    background-color:#a7e366
-
-  .list
-    border-left: 1px dotted #000000
-
-  // Card details text emphasis: black border and white background
-  // to make it details text field easier to find for RELAX MODE users,
-  // and focus attention.
-  .card-details .card-details-items
-    & ~ .js-open-inlined-form
-        .viewer
-            background-color #ffffff !important
-            padding 15px !important
-            border 1px solid #000000 !important
-            word-wrap: break-word
-
-  // When card has comment, emphasis on minicard:
-  // bigger red comment icon and number of comments,
-  // to make it easier notice card comments and focus attention.
-  .minicard .badges .badge
-    .badge-icon,
-    .badge-text
-      &.badge-comment
-        display: block
-        border-radius: 4px
-        padding: 1px 3px
-        margin-bottom: 0.3rem
-        color: #ff0000
-        background-color: #ffffff
-        font-weight: bold
-        font-size: 11pt
-
-.board-color-corteza
-  setBoardColor(#568BA2)
-
-  /*
-    Wekan for Corteza https://cortezaproject.org
-
-    Theme to match Corteza colors from:
-    https://github.com/cortezaproject/corteza-webapp-messaging/blob/master/src/assets/sass/variables.scss
-
-    // Paths
-    $fonts_dir : './assets/fonts/';
-    $icomoon-font-path: $fonts_dir + 'icomoon' !default;
-    $icomoon-font-family: "icomoon" !default;
-
-    // Typography
-    $regular: 'nunito_sansregular';
-    $bold: 'nunito_sansbold';
-    $semibold: 'nunito_sanssemibold';
-
-    // Color system
-    $white:         #fff !default;
-    $black:         #000 !default;
-    $primary:       #568ba2;
-    $secondary:     #90A3B1;
-    $success:       #719430;
-    $warning:       #F5D380;
-    $danger:        #E85568;
-    $light:         #F3F3F5;
-    $dark:          #1e2224;
-    $currentmymessagebgcolor : #a7d0e3;
-  */
-
-  //.header-quick-access
-  //  backgroud-color: #568ba2
-
-
-/*
-  Alternate "Clear" Styling
-*/
-setBoardClear(color1,color2)
-  //color1: The quick access color
-  //color2: The main bar color
-
-  &.sk-spinner div,
-  .board-backgrounds-list &.background-box,
-  .board-list & a
-    background: linear-gradient(180deg, color1 0%, color2 100%)
-    //background: linear-gradient(180deg, rgb(73, 155, 234) 0%, rgb(0, 174, 204) 100%)
-
-  .is-selected .minicard
-    border-left: 3px solid color1
-
-  &.pop-over .pop-over-list li a:not(.disabled):hover,
-  .sidebar .sidebar-content .sidebar-btn:hover,
-  .sidebar-list li a:hover
-    background-color: lighten(color1, 10%)
-
-  &#header ul li.current, &#header-quick-access ul li.current
-    border-bottom: 4px solid lighten(color2, 10%)
-
-  &#header-quick-access
-    background: darken(color1, 10%)
-    //background: rgba(66,137,204,1)
-    color: #FFF
-
-  &#header-quick-access #header-new-board-icon,
-  &#header-quick-access #header-user-bar,
-  &#header-quick-access ul li
-    color: rgba(255,255,255,0.5)
-
-  // The background-color value here is not seen,
-  // its covered by the background of #header-main-bar
-  // it's just to aid transitions between boards
-  &#header
-    background-color: color2
-    border-bottom: 1px solid darken(color2, 20%)
-    border-top: 1px solid darken(color2, 40%)
-
-  // Since the theme uses a gradient for the header
-  // and gradients break transitions, it has to be set here
-  &#header #header-main-bar
-    background: linear-gradient(180deg, color1 0%, color2 100%)
-
-  &#header #header-main-bar p
-    margin-bottom: 6px
-
-  &#header #header-main-bar .board-header-btn.emphasis
-    background: lighten(color2, 10%)
-
-    &:hover,
-    .board-header-btn-close
-      background: rgba(0,0,0,0.2)
-
-    &:hover .board-header-btn-close
-      background: rgba(0,0,0,0.2)
-
-  .materialCheckBox.is-checked
-    border-bottom: 2px solid color1
-    border-right: 2px solid color1
-
-  .is-multiselection-active .multi-selection-checkbox
-    &.is-checked + .minicard
-      background: lighten(color2, 90%)
-
-    &:not(.is-checked) + .minicard:hover:not(.minicard-composer)
-      background: lighten(color2, 97%)
-
-  .toggle-switch:checked ~ .toggle-label
-    background-color: lighten(color1, 20%)
-
-    &:after
-      background-color: darken(color1, 20%)
-
-  .board-canvas
-    background: linear-gradient(135deg, color1 0%, color2 100%)
-
-  .swimlane
-    background: none
-
-  .list:first-child
-    margin-left: 15px
-
-  .list
-    background: rgba(255,255,255,0.35)
-    margin: 10px
-    border: 0
-    border-radius: 14px
-
-  .list.list-composer
-    background: rgba(255,255,255,0.1)
-    height: min-content
-    flex: unset
-    width: 270px
-    padding-bottom: 16px
-
-  .list.list-composer .open-list-composer
-    border-radius: 7px
-    color: rgba(0,0,0,0.3)
-    padding: 7px 10px
-    display: block
-
-  .list.list-composer .open-list-composer:hover
-    box-shadow: 0 1px 2px rgba(0,0,0,.2)
-    background: rgba(255,255,255,0.7)
-    color: rgba(0,0,0,0.6)
-
-  .list-header
-    background-color: rgba(255,255,255,0.25)
-    border-radius: 14px 14px 0 0
-
-  .list-header:not([class*="list-header-"])
-    border-bottom: 6px solid rgba(255,255,255,0)
-
-  .list-header .list-header-name
-    color: rgba(0,0,0,0.6)
-
-  .list-body
-    padding: 11px
-
-  .minicard
-    border-radius: 7px
-    padding: 10px 10px 4px 10px
-    box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15)
-    color: #222
-
-  .card-details
-    border-radius: 0 0 14px 14px
-    box-shadow: 0 0 7px 0 rgba(0,0,0,0.5)
-    margin-left: -10px
-
-  .list-body .open-minicard-composer
-    border-radius: 7px
-    color: rgba(0,0,0,.3)
-    margin-bottom: 11px
-
-  .list-body .open-minicard-composer:hover
-    background: rgba(255,255,255,0.7)
-    color: rgba(0,0,0,0.6)
-
-  button[type=submit].primary, input[type=submit].primary
-    box-shadow: none
-    background-color: rgba(255,255,255,0.5)
-    color: rgba(0,0,0,0.55)
-    border-radius: 7px
-    border: 0
-
-  button[type="submit"].primary:hover, input[type="submit"].primary:hover
-    background-color: rgba(255,255,255,0.7)
-    color: rgba(0,0,0,0.8)
-    box-shadow: 0 1px 2px rgba(0,0,0,.2)
-    border-radius: 7px
-  .quiet, .quiet a
-    color: rgba(0,0,0,0.4)
-
-  .list-header .list-header-watch-icon
-    color: rgba(0,0,0,0.5)
-    position: absolute
-    margin-top: -34px
-    margin-let: -11px
-
-  a.fa, a i.fa
-    color: rgba(0,0,0,0.3)
-
-  a:not(.disabled).is-active.fa, a:not(.disabled).is-active i.fa, a:not(.disabled):hover.fa, a:not(.disabled):hover i.fa
-    color: rgba(0,0,0,0.6)
-    border-radius: 7px
-
-  input[type="email"], input[type="password"], input[type="text"]
-    border: 0
-    border-radius: 7px
-
-  .sidebar-shadow
-    box-shadow: none
-    border-left: 9px solid color2
-
-  .is-open .sidebar-shadow
-    box-shadow: -10px 0 8px rgba(0,0,0,0.3)
-
-  .list.ui-sortable-helper
-    transform:rotate(0deg)
-
-  .minicard-wrapper.placeholder
-    background: rgba(0,0,0,0.1)
-
-  .minicard-wrapper.ui-sortable-helper
-    transform:rotate(0deg)
-    opacity: 0.8
-
-  .list-body .open-minicard-composer
-    color: rgba(0,0,0,.3)
-
-  .swinlane.ui-sortable-helper
-    transform:rotate(0deg)
-
-  .swimlane .swimlane-header-wrap
-    background: linear-gradient(0deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.25) 100%)
-
-  .swimlane-header-wrap .inlined-form
-    width: 100%
-
-  .swimlane-header-wrap .list-composer
-    text-align: center
-    margin: 5px
-
-  .swimlane-header-wrap .list-name-input.full-line
-    margin: 0
-    display: inline-block
-    width: 270px
-
-  .swimlane-header-wrap .edit-controls
-    display: inline-block
-    vertical-align: middle
-
-  .swimlane-header-wrap .primary.confirm
-    margin-right: 0
-
-  .swimlane-header-wrap .fa.fa-times-thin
-    margin-top: 2px
-
-  // This is a general fix so that the little grabby hand appears when dragging the list via the title
-  .list.ui-sortable-helper,
-  .list.ui-sortable-helper .list-header.ui-sortable-handle,
-  .list.ui-sortable-helper .viewer
-    cursor:-webkit-grabbing;
-    cursor:grabbing
-
-.board-color-clearblue
-  setBoardClear(rgb(73, 155, 234),rgb(0, 174, 204))
-
-/*
-  Alternate "Natural" Styling
-*/
-.board-color-natural
-  setBoardColor(#596557)
-
-  &#header-quick-access
-    background-color: #2d392b
-
-  .ui-sortable
-    background-color:#dedede
-
-  .list-header
-    // background-color: #c9cfc3
-    // border-bottom: 6px solid #c9cfc3
-
-  .swimlane .swimlane-header-wrap
-    background-color: #c2c0ab
-
-/*
-  Alternate "Modern" Styling
-*/
-.board-color-modern
-  setBoardColor(#2A80B8)
-
-  /* General */
-  body
-    background: #f5f5f5
-
-  &#header-quick-access
-    padding: 10px
-    font-size: 14px
-    background: #333 !important
-
-  &#header-quick-access ul
-    overflow: visible
-
-  &#header-quick-access ul li.current
-    border: 0 !important
-    font-weight: bold
-
-  &#header-quick-access ul li.separator
-    display: none
-
-  &#header-quick-access ul li:nth-child(3)
-    margin-right: 10px
-
-  &#header-quick-access ul li a
-    padding: 5px 10px
-    border-radius: 2px
-
-  &#header-quick-access ul li.current a
-    border-radius: 2px
-    background: rgba(255,255,255,.2)
-
-  &#header #header-main-bar h1
-    font-family: Poppins
-    font-weight: bold
-  &#header-quick-access #header-user-bar
-    position relative
-
-  &#header-quick-access #header-user-bar .header-user-bar-name
-    margin: 5px 3px 0 0
-
-  section#notifications-drawer
-    top: 46px
-    box-shadow: 0 4px 20px rgba(0,0,0,.1)
-    max-width: 100%
-
-  section#notifications-drawer .header
-    top: 46px
-    border-radius: 0 3px
-    height: 21px
-    background: #f7f7f7
-
-  .board-canvas
-    background: #f5f5f5
-
-  /* Swimlane */
-  .swimlane
-    background: none
-
-  .swimlane .swimlane-header-wrap .swimlane-header
-    font-family: Poppins
-
-  /* All board views */
-  .board-list .board-list-item
-    padding: 20px
-
-  .board-list-item-name
-    font-family: Poppins
-
-  /* Board */
-  .list
-    background: transparent
-    border-left: 0
-    margin: 10px 0
-    padding: 0px
-    border-radius: 5px
-    min-width: 300px
-
-  .list-body .open-minicard-composer:hover /*me*/
-    background: none
-    box-shadow: none
-
-  .list:first-child
-    margin-left: 5px
-
-  .list.list-composer.js-list-composer
-    transition: all .3s ease
-    min-width: 80px
-
-  .open-list-composer.js-open-inlined-form:hover
-    color: #222
-
-  .list-header
-    background: none
-    // border-bottom-width: 0px
-
-  .list-header .list-header-name
-    font-family: Poppins
-    color: #000
-    font-weight: 500
-
-  /* Card changes */
-  .minicard
-    padding: 15px 15px 10px
-    box-shadow: 0 3px 8px rgba(0,0,0,.05)
-
-  .minicard-plum:hover:not(.minicard-composer), .is-selected .minicard-plum, .draggable-hover-card .minicard-plum
-    background: none
-
-  .minicard-title
-    line-height: 1.5em
-
-  .minicard .minicard-cover
-    background-size: cover
-    margin: -15px -15px 10px
-    height: 100px
-
-  .card-label-orange
-    color: #fff
-
-  .card-date
-    font-size: 12px
-    padding: 3px 5px
-
-  /* Pop over */
-  .header-title
-    font-family: Poppins
-    font-size: 16px
-    color: #333
-
-  .pop-over
-    box-shadow: 0 4px 20px rgba(0,0,0,.2)
-    border: 0
-    border-radius: 5px
-
-  .pop-over .header
-    padding: 10px
-    border-bottom: 0
-    border-radius: 5px 5px 0 0
-    background:#eee
-
-  .pop-over .header .header-title
-    font-family: Poppins
-    font-size:16px
-    color:#333
-
-  .pop-over .header .close-btn
-    font-size:20px
-    top:6px
-    right:8px
-
-  .pop-over .content-container .content
-    padding: 5px 20px 20px
-    width: 260px
-
-  .pop-over-list li > a
-    border-radius: 5px
-
-  .pop-over-list li > a > i
-    margin-right: 5px
-
-  .pop-over-list li>a .sub-name
-    margin-bottom: 8px
-
-  /* Sidebar */
-  .sidebar .sidebar-shadow
-    box-shadow: 0 0 60px rgba(0,0,0,.2)
-
-  .sidebar .sidebar-content
-    padding: 30px
-
-  /* Notifications */
-  .board-color-modern section#notifications-drawer
-    border-radius:5px
-
-  .board-color-modern section#notifications-drawer .header
-    padding: 18px 16px
-    border-bottom: 0
-    border-radius: 5px 5px 0 0
-    background: #eee
-
-  .board-color-modern section#notifications-drawer .header h5
-    font-family: Poppins
-    font-weight: bold
-
-  .board-color-modern section#notifications-drawer .header .close
-    font-size: 20px
-    top: 14px
-
-  section#notifications-drawer .header .toggle-read
-    top: 18px
-
-/*
-  Alternate "Modern Dark" Styling
-*/
-.board-color-moderndark
-  setBoardColor(#2a2a2a)
-
-  /* General */
-  body
-    background: #2a2a2a
-
-  .board-wrapper .board-canvas .board-overlay
-    opacity: .6
-
-  /* Forms */
-  button[type=submit].primary, .board-color-modern input[type=submit].primary
-    background-color: #777777
-    border-radius: 7px
-
-  .toggle-switch:checked~.toggle-label
-    background-color: #f7f7f7
-
-  .toggle-label:after, .board-color-modern .toggle-switch:checked~.toggle-label:after
-    background-color: #777777 !important
-
-  button, input:not([type=file]), select, textarea
-    border-radius: 7px
-
-  /* Headers */
-  &#header
-    background-color: #262626
-    border-bottom: 1px solid #555555;
-    border-top: 1px solid #555555;
-
-  &#header-quick-access, .background-box, #header
-    background-color: #333333
-
-  &#header-quick-access
-    padding: 4px
-    font-size: 14px
-
-  &#header-quick-access .allBoards
-    padding: 5px 10px 0 10px;
-
-  &#header-quick-access ul.header-quick-access-list
-    margin: -5px 0 -5px 0
-
-  &#header #header-main-bar
-    padding-top: 3px
-    padding-bottom: 3px
-
-  &#header-quick-access ul
-    overflow: visible
-
-  &#header-quick-access ul li.current
-    border: 0 !important
-    font-weight: bold
-
-  &#header-quick-access ul li.separator
-    display: none
-
-  &#header-quick-access ul li:nth-child(3)
-    margin-right: 10px
-
-  &#header-quick-access ul li a
-    padding: 5px 10px
-    border-radius: 2px
-
-  &#header-quick-access ul li.current a
-    border-radius: 2px
-    background: rgba(255,255,255,.2)
-
-  &#header #header-main-bar h1
-    font-family: Poppins
-    font-weight: bold
-    line-height: 0.8em
-    padding-top: 10px
-
-  /* Content */
-  .board-canvas
-    background: #2a2a2a
-
-  /* Swimlanes */
-  .swimlane .swimlane-header-wrap
-    background-color: #494949
-    color: #cccccc
-    padding: 4px 0
-
-  .swimlane .swimlane-header-wrap .swimlane-header
-    font-family: Poppins
-
-  .swimlane .swimlane-header-wrap .swimlane-header-menu
-    padding: 6px
-    font-size: 16px
-
-  .swimlane .swimlane-header-wrap .swimlane-header-plus-icon
-    font-size: 16px
-
-  .swimlane
-    background: #2a2a2a
-    line-height: 18px
-    max-height: 100%
-
-  /* Lists */
-  .swimlane .list
-    background: #666666
-    border-radius: 0
-    border: 0px solid #666666
-    flex: 0 0 265px;
-
-  .swimlane .list:first-child
-    margin-left: 0
-
-  .swimlane .list:nth-child(even) .list-header,
-  .swimlane .list:nth-child(even) .list-body
-    background: #6a6a6a
-
-  .swimlane .list:nth-child(odd) .list-header,
-  .swimlane .list:nth-child(odd) .list-body
-    background: #555555
-
-  .list-header
-    background: #6a6a6a
-
-  .list-header .viewer
-    padding-left: 10px
-
-  .list-header .list-header-name,
-  .minicard
-    line-height: 14px
-    color: #eeeeee
-
-  .list-header .list-header-menu
-    padding: 10px
-    top: 0
-
-  .list-header .list-header-plus-top
-    color: #a6a6a6
-
-  .list-body
-    scrollbar-width: thin
-    scrollbar-color: #343434 #999999
-
-  .list-body::-webkit-scrollbar
-    width: 10px
-
-  .list-body::-webkit-scrollbar-track
-    background: #343434
-    border-radius: 3px
-    margin: 4px 0
-
-  .list-body::-webkit-scrollbar-thumb
-    background-color: #999999
-    border-radius: 6px
-    border: 3px solid #343434
-
-  .list-body .open-minicard-composer:hover
-    background: none
-    box-shadow: none
-    border-bottom: 0
-
-  .list-body a.open-minicard-composer, .list-body a.open-minicard-composer i, .list .list-composer .open-list-composer i
-    color: #bbbbbb
-
-  .list-body a.open-minicard-composer:hover, .list-body a.open-minicard-composer:hover i, .list .list-composer .open-list-composer:hover i
-    color: #ffffff
-    border-radius: 7px
-
-  /* Mini Card */
-  .minicard-wrapper
-    margin-bottom: 12px
-
-  .minicard
-    background-color: #444444
-    color: #cccccc
-    border-radius: 2px
-    font-size: 0.95em
-    box-shadow: 0 4px 3px -3px rgba(0,0,0,0.8)
-    border-bottom: 1px solid #666666
-    padding: 8px
-
-  .minicard:hover
-    color: #f7f7f7
-    background-color: #4d4d4d !important
-
-  .minicard .minicard-labels
-    margin-bottom: 4px
-
-  .minicard .card-label
-    font-size: 11px
-    font-weight: 400
-    padding: 1px 6px 0
-    border-radius: 2px
-
-  .minicard .badges
-    color: #bbbbbb
-
-  .minicard .date
-    margin-top: 10px
-    font-size: 11px
-
-  .card-date
-    color: #444444
-    border-radius: 2px
-
-  .card-date.almost-due
-    color: #444444
-
-  .minicard.minicard-composer textarea.minicard-composer-textarea:focus
-    background-color: #eeeeee
-    color: #333333
-    padding: 6px
-
-  .is-selected .minicard
-    background-color: #666666
-
-  /* Card Details */
-  .card-details
-    background-color: #454545
-    color: #cccccc
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
-    border: 1px solid #111111
-    z-index: 100 !important
-
-  @media screen and (max-width: 800px)
-    .card-details
-      width: 98%
-
-  @media screen and (min-width: 801px)
-    .card-details
-      position: absolute
-      top: 30px
-      left: calc(50% - 384px)
-      width: 768px
-      max-height: calc(100% - 60px)
-
-  .card-details
-    scrollbar-width: thin
-    scrollbar-color: #343434 #999999
-
-  .card-details::-webkit-scrollbar
-    width: 16px
-
-  .card-details::-webkit-scrollbar-track
-    background: #343434
-
-  .card-details::-webkit-scrollbar-thumb
-    background-color: #999999
-    border-radius: 6px
-    border: 4px solid #343434
-
-  .card-details .card-details-header
-    background: #333333
-    color: #cccccc
-    border-bottom: 2px solid #2d2d2d
-
-  .card-details hr
-    background: #2d2d2d
-
-  .card-details .card-details-item-title
-    color: #ffffff
-
-  .card-details .new-description textarea, .card-details .new-comment textarea
-    background-color: #dddddd
-    color: #111111
-
-  .card-details .checklist
-    background-color: transparent
-    margin-bottom: 10px
-
-  .card-details .checklist-item
-    background-color: rgba(255,255,255,0.1)
-    padding: 4px 8px
-    border-radius: 2px
-    font-size: 13px
-    margin-top: 5px
-
-  .card-details .checklist-item:hover
-    background-color: rgba(255,255,255,0.2)
-
-  .card-details .checklist-item .item-title .viewer p
-    max-width: auto
-
-  .card-details .check-box.materialCheckBox
-    border-color: #ffffff
-
-  .card-details .check-box.materialCheckBox.is-checked
-    border-bottom: 2px solid #ffffff
-    border-right: 2px solid #ffffff
-    border-top: 0
-    border-left: 0
-
-  .card-details .js-add-checklist-item
-    margin-top: 4px
-
-  .checklist-items .add-checklist-item
-    margin-top: .7em
-
-  .card-details .activities .activity .activity-desc .activity-comment
-    background-color: #cccccc
-    color: #222222
-
-  /* Sidebar */
-  .sidebar .sidebar-shadow
-    background-color: #222222
-    box-shadow: -10px 0 5px -10px #444444
-    border-left: 1px solid #333333
-    color: #cccccc
-
-  .activities .activity .activity-desc
-    .activity-comment
-      background-color: #cccccc
-      color: #222222
-    .activity-checklist
-      background-color: #cccccc
-      color: #222222;
-
-  .attachments-galery .attachment-item
-    color: #222222;
-
-  .minicard-description
-    color: #222222;
-
-  /* Pop-Ups for "Modern Dark" */
-.pop-over.board-color-moderndark
-  background-color: #454545
-  color: #cccccc
-  border: 1px solid #111111
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
-
-.pop-over.board-color-moderndark .header
-  background-color: #333333
-
-.pop-over.board-color-moderndark .header-title
-  font-family: Poppins
-  font-size: 16px
-  color: #cccccc
-
-.pop-over.board-color-moderndark .pop-over-list li > a:hover
-  background-color: rgba(255,255,255,0.2)
-
-
-.board-color-exodark
-  setBoardColor(#222222)
-
-  body
-    background: #222222;
-
-  i
-    color: #00897b!important;
-
-  .board-canvas
-    background: #222222;
-    font-family: Poppins; //Maybe Lato would be great
-
-  .swimlane
-    background: #222222;
-
-  .list
-    margin: 10px;
-    color: white;
-    border-radius: 15px;
-    background: #222222;
-    box-shadow: inset 15px 15px 37px #1c1c1c,
-                inset -15px -15px 37px #282828;
-    border: none;
-
-  .list-header
-    border-top-right-radius: 15px;
-    border-top-left-radius: 15px;
-    background: #222222;
-    box-shadow: inset 15px 15px 37px #1c1c1c,
-                inset -15px -15px 37px #282828;
-
-  .list-header-menu
-    a
-      color: #00897b!important;
-
-  .is-selected .minicard
-    color: white;
-    background: #2b2b2b;
-    border: 1px solid #00897b;
-
-  .minicard
-    color: white;
-    background: #2b2b2b;
-
-  .list-body
-    .open-minicard-composer:hover
-      background: #2b2b2b;
-      border: 1px solid #00897b;
-      border-radius: 10px;
-
-  .badges
-    color: white;
-
-  .minicard
-    textarea
-      color: white;
-
-  .minicard .minicard-description
-    background: #2b2b2b;
-    border: 1px solid #00897b;
-
-
-  .minicard:hover:not(.minicard-composer)
-    border: 1px solid #00897b;
-    background: #2b2b2b;
-    padding: 9px 9px 3px 9px;/*because of the 1px border we need to reduce padding by 1px*/
-
-  .card-details
-    background: #2b2b2b!important;
-    color: white;
-
-  .card-details .card-details-header
-    background: #2b2b2b;
-    color: white;
-
-  .sidebar-content
-    background: #2b2b2b;
-    color: white;
-
-  .card-details, .sidebar-content
-    box-shadow: 0 0 7px 0 #00897b;
-
-  .attachments-galery .attachment-item
-    background: #2b2b2b
-
-  .attachments-galery .attachment-item:hover
-    border: 1px solid #00897b;
-    background: #2b2b2b;
-
-  .checklist
-    background: #2b2b2b;
-    .checklist-item
-      background: #2b2b2b;
-      &:hover
-        background: #2b2b2b;
-
-  .add-checklist-item.js-open-inlined-form:hover
-    background: #2b2b2b;
-    border: 1px solid #00897b;
-
-  .add-checklist.js-open-inlined-form:hover
-    background: #2b2b2b;
-    border: 1px solid #00897b;
-
-  .card-details > h1,h2,h3,h4,h5,h6,p,a,span
-    color: white!important;
-
-  .activity-desc
-    background-color: #2b2b2b!important;
-
-  .activity-checklist
-    background: #2b2b2b!important;
-    border: 1px solid #00897b;
-
-  .activity-comment
-    background: #2b2b2b!important;
-    border: 1px solid #00897b;
-
-  .toggle-switch:checked ~ .toggle-label
-    background-color: #00897b!important;
-
-.pop-over.board-color-exodark
-  background: #2b2b2b;
-  color: white;
-
-.pop-over.board-color-exodark .header
-  background: #2b2b2b;
-  color: white;

client/components/boards/boardHeader.css

@@ -0,0 +1,23 @@
+.integration-form {
+  padding: 5px;
+  border-bottom: 1px solid #ccc;
+}
+.flex,
+.option {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.option {
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  background: #fff;
+  text-decoration: none;
+  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  margin-top: 5px;
+  padding: 5px;
+}

client/components/boards/boardHeader.js

@@ -1,3 +1,5 @@
+import { TAPi18n } from '/imports/i18n';
+
 /*
 const DOWNCLS = 'fa-sort-down';
 const UPCLS = 'fa-sort-up';

client/components/boards/boardHeader.styl

@@ -1,22 +0,0 @@
-.integration-form
-  padding: 5px
-  border-bottom: 1px solid #ccc
-
-.flex
-  display: -webkit-box
-  display: -moz-box
-  display: -webkit-flex
-  display: -moz-flex
-  display: -ms-flexbox
-  display: flex
-
-.option
-  @extends .flex
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  background: #fff;
-  text-decoration: none;
-  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-  margin-top: 5px;
-  padding: 5px;

client/components/boards/boardsList.css

@@ -0,0 +1,281 @@
+/* @import url("css/reset.css") print, screen; */
+
+.board-list {
+  margin: 0 8px;
+}
+.board-list li {
+  float: left;
+  width: 20%;
+  box-sizing: border-box;
+  position: relative;
+}
+.board-list li.placeholder:after {
+  content: '';
+  display: block;
+  background: #ccc;
+  border-radius: 3px;
+  height: 106px;
+  margin: 8px;
+}
+.board-list li.ui-sortable-helper {
+  cursor: grabbing;
+  transform: rotate(4deg);
+  display: block !important;
+}
+.board-list li.starred .fa-star,
+.board-list li.starred .fa-star-o {
+  opacity: 1;
+}
+.board-list .board-list-item {
+  overflow: hidden;
+  background-color: #999;
+  color: #f6f6f6;
+  min-height: 100px;
+  font-size: 16px;
+  line-height: 22px;
+  border-radius: 3px;
+  display: block;
+  font-weight: 700;
+  padding: 8px;
+  margin: 8px;
+  position: relative;
+  text-decoration: none;
+  word-wrap: break-word;
+}
+.board-list .board-list-item.template-container {
+  border: 4px solid #fff;
+}
+.board-list .board-list-item.tile {
+  background-size: auto;
+  background-repeat: repeat;
+}
+.board-list .board-list-item-sub-name {
+  color: rgba(255,255,255,0.5);
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+.board-list .board-list-item-desc {
+  color: #fff;
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+}
+.board-list .js-add-board {
+  text-align: center;
+}
+.board-list .js-add-board .label {
+  font-weight: normal;
+  line-height: 56px;
+}
+.board-list .js-add-board :hover {
+  background-color: #939393;
+}
+.board-list .fa-star,
+.board-list .fa-star-o {
+  bottom: 0;
+  font-size: 14px;
+  height: 18px;
+  line-height: 18px;
+  opacity: 0;
+  padding: 9px 9px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition-duration: 0.15s;
+  transition-property: color, font-size, background;
+}
+.board-list .fa-circle {
+  bottom: 0;
+  font-size: 10px;
+  height: 10px;
+  line-height: 10px;
+  padding: 9px 9px;
+  position: absolute;
+  right: 0;
+  transition-duration: 0.15s;
+  transition-property: color, font-size, background;
+}
+.board-list .has-overtime-card-active {
+  color: #eb4646 !important;
+}
+.board-list .no-overtime-card-active {
+  color: #3cb500 !important;
+}
+.board-list .is-star-active {
+  color: #fff;
+}
+.board-list .fa-clone {
+  position: absolute;
+  bottom: 0;
+  font-size: 14px;
+  height: 18px;
+  line-height: 18px;
+  opacity: 0;
+  right: 0;
+  padding: 9px 9px;
+  transition-duration: 0.15s;
+  transition-property: color, font-size, background;
+}
+.board-list .fa-archive {
+  position: absolute;
+  bottom: 0;
+  font-size: 14px;
+  height: 18px;
+  line-height: 18px;
+  opacity: 0;
+  left: 0;
+  padding: 9px 9px;
+  transition-duration: 0.15s;
+  transition-property: color, font-size, background;
+}
+.board-list li:hover a:hover .fa-star,
+.board-list li:hover a:hover .fa-clone,
+.board-list li:hover a:hover .fa-archive,
+.board-list li:hover a:hover .fa-star-o {
+  color: #fff;
+}
+.board-list li:hover a .fa-star,
+.board-list li:hover a .fa-clone,
+.board-list li:hover a .fa-archive,
+.board-list li:hover a .fa-star-o {
+  color: #fff;
+  opacity: 0.75;
+}
+.board-list li:hover a .fa-star:hover,
+.board-list li:hover a .fa-clone:hover,
+.board-list li:hover a .fa-archive:hover,
+.board-list li:hover a .fa-star-o:hover {
+  font-size: 18px;
+  opacity: 1;
+}
+.board-list li:hover a .fa-star.is-star-active,
+.board-list li:hover a .fa-clone.is-star-active,
+.board-list li:hover a .fa-archive.is-star-active,
+.board-list li:hover a .fa-star-o.is-star-active {
+  opacity: 1;
+}
+.board-backgrounds-list .board-background-select {
+  box-sizing: border-box;
+  display: block;
+  float: left;
+  width: 50%;
+  padding-top: 12px;
+  position: relative;
+  z-index: 1;
+}
+.board-backgrounds-list .board-background-select:nth-child(-n + 2) {
+  padding-top: 0;
+}
+.board-backgrounds-list .board-background-select:nth-child(2n) {
+  padding-left: 6px;
+}
+.board-backgrounds-list .board-background-select:nth-child(2n+1) {
+  padding-right: 6px;
+}
+.board-backgrounds-list .board-background-select .background-box {
+  color: #fff;
+  border-radius: 3px;
+  background-size: cover;
+  display: block;
+  height: 74px;
+  position: relative;
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.board-backgrounds-list .board-background-select .background-box i.fa-check {
+  font-size: 25px;
+  color: #fff;
+}
+@media screen and (max-width: 800px) {
+  .board-list {
+    height: 100%;
+    overflow: scroll;
+  }
+  .board-list li {
+    width: 50%;
+  }
+  .board-list .board-list-item {
+    overflow: hidden;
+    height: 8rem;
+  }
+  .board-list .board-list-item-sub-name {
+    position: relative;
+    top: -100px;
+    left: -100px;
+  }
+  .board-list .board-handle {
+    position: absolute;
+    padding: 7px;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 10px;
+    font-size: 24px;
+  }
+}
+@media screen and (max-width: 360px) {
+  li {
+    width: 100%;
+  }
+  .board-handle {
+    position: absolute;
+    padding: 7px;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 10px;
+    font-size: 24px;
+  }
+}
+.AllBoardTeamsOrgs {
+  list-style-type: none;
+  overflow: hidden;
+}
+.AllBoardTeams,
+.AllBoardOrgs,
+.AllBoardBtns {
+  float: left;
+}
+.js-AllBoardOrgs {
+  margin-left: 16px;
+}
+.AllBoardTeams {
+  margin-left: 16px;
+}
+.AllBoardButtonsContainer {
+  margin: 16px;
+}
+#filterBtn,
+#resetBtn {
+  display: inline;
+}
+.js-board {
+  display: block;
+}
+.minicard-members {
+  padding: 6px 0 6px 8px;
+  width: 100%;
+  margin-bottom: 2px;
+  margin-left: -4px;
+  display: inline-block;
+}
+.minicard-lists {
+  margin: 0 auto;
+  max-width: 95%;
+  height: 100%;
+}
+.flex {
+  display: flex;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-wrap .item {
+  margin: 2px;
+  padding-right: 6px;
+  text-align: center;
+}

client/components/boards/boardsList.jade

@@ -13,7 +13,7 @@ template(name="boardList")
           select.js-AllBoardOrgs#jsAllBoardOrgs("multiple")
             option(value="-1") {{_ 'organizations'}} :
             each orgsDatas
-              option(value="{{orgId}}") {{_ orgDisplayName}}
+              option(value="{{orgId}}") {{orgDisplayName}}
 
       //li.AllBoardTemplates
       //  if userHasTemplates

client/components/boards/boardsList.js

@@ -1,3 +1,5 @@
+import { TAPi18n } from '/imports/i18n';
+
 const subManager = new SubsManager();
 
 Template.boardListHeaderBar.events({
@@ -33,7 +35,6 @@ BlazeComponent.extendComponent({
     }
     if (userLanguage) {
       TAPi18n.setLanguage(userLanguage);
-      T9n.setLanguage(userLanguage);
     }
   },
 
@@ -196,7 +197,7 @@ BlazeComponent.extendComponent({
   },
   boardLists(boardId) {
     let boardLists = [];
-    const lists = Lists.find({'boardId' : boardId})
+    const lists = Lists.find({'boardId' : boardId, 'archived': false})
     lists.forEach(list => {
       let cardCount = Cards.find({'boardId':boardId, 'listId':list._id}).count()
       boardLists.push(`${list.title}: ${cardCount}`);
@@ -259,7 +260,7 @@ BlazeComponent.extendComponent({
             },
             (err, res) => {
               if (err) {
-                self.setError(err.error);
+                console.error(err);
               } else {
                 Session.set('fromBoard', null);
                 subManager.subscribe('board', res, false);
@@ -267,7 +268,6 @@ BlazeComponent.extendComponent({
                   id: res,
                   slug: title,
                 });
-                //Utils.goBoardId(res);
               }
             },
           );

client/components/boards/boardsList.styl

@@ -1,276 +0,0 @@
-@import 'nib'
-
-$spaceBetweenTiles = 16px
-
-.board-list
-  margin: 0 ($spaceBetweenTiles/2)
-
-  li
-    float: left
-    width: 20%
-    box-sizing: border-box
-    position: relative
-
-    &.placeholder:after
-      content: '';
-      display: block;
-      background: darken(white, 20%)
-      border-radius: 3px;
-      height: 106px;
-      margin: 8px;
-
-    &.ui-sortable-helper
-      cursor: grabbing
-      transform: rotate(4deg)
-      display: block !important
-
-    &.starred
-      .fa-star,
-      .fa-star-o
-        opacity: 1
-
-  .board-list-item
-    overflow: hidden;
-    background-color: #999
-    color: #f6f6f6
-    min-height: 100px
-    font-size: 16px
-    line-height: 22px
-    border-radius: 3px
-    display: block
-    font-weight: 700
-    padding: 8px
-    margin: ($spaceBetweenTiles/2)
-    position: relative
-    text-decoration: none
-    word-wrap: break-word
-
-    &.template-container
-      border: 4px solid #fff
-
-    &.tile
-      background-size: auto
-      background-repeat: repeat
-
-  .board-list-item-sub-name
-    color: rgba(255, 255, 255, .5)
-    display: block
-    font-size: 14px
-    font-weight: 400
-    line-height: 22px
-
-  .board-list-item-desc
-    color: #fff
-    display: block
-    font-size: 14px
-    font-weight: 400
-    line-height: 18px
-
-  .js-add-board
-    text-align:center
-
-    .label
-      font-weight: normal
-      line-height: 56px
-
-    :hover
-      background-color:#939393
-
-  .fa-star,
-  .fa-star-o
-    bottom: 0
-    font-size: 14px
-    height: 18px
-    line-height: 18px
-    opacity: 0
-    padding: 9px 9px
-    position: absolute
-    right: 0
-    top: 0
-    transition-duration: .15s
-    transition-property: color, font-size, background
-
-  .fa-circle
-    bottom: 0;
-    font-size: 10px;
-    height: 10px;
-    line-height: 10px;
-    padding: 9px 9px;
-    position: absolute;
-    right: 0;
-    transition-duration: .15s
-    transition-property: color, font-size, background
-
-  .has-overtime-card-active
-    color: #eb4646 !important
-
-  .no-overtime-card-active
-    color: #3cb500 !important
-
-  .is-star-active
-    color: white
-
-  .fa-clone
-    position: absolute;
-    bottom: 0
-    font-size: 14px
-    height: 18px
-    line-height: 18px
-    opacity: 0
-    right: 0
-    padding: 9px 9px
-    transition-duration: .15s
-    transition-property: color, font-size, background
-
-  .fa-archive
-    position: absolute;
-    bottom: 0
-    font-size: 14px
-    height: 18px
-    line-height: 18px
-    opacity: 0
-    left: 0
-    padding: 9px 9px
-    transition-duration: .15s
-    transition-property: color, font-size, background
-
-  li:hover a
-    &:hover
-      .fa-star,
-      .fa-clone,
-      .fa-archive,
-      .fa-star-o
-        color: white
-
-    .fa-star,
-    .fa-clone,
-    .fa-archive,
-    .fa-star-o
-      color: white
-      opacity: .75
-
-      &:hover
-        font-size: 18px
-        opacity: 1
-
-      &.is-star-active
-        opacity: 1
-
-.board-backgrounds-list
-
-  .board-background-select
-    box-sizing: border-box
-    display: block
-    float: left
-    width: 50%
-    padding-top: 12px
-    position: relative
-    z-index: 1
-
-    &:nth-child(-n + 2)
-      padding-top: 0
-
-    &:nth-child(2n)
-      padding-left: 6px
-
-    &:nth-child(2n+1)
-      padding-right: 6px
-
-    .background-box
-      color: white
-      border-radius: 3px
-      background-size: cover
-      display: block
-      height: 74px
-      position: relative
-      width: 100%
-      cursor: pointer
-      display: flex
-      align-items: center
-      justify-content: center
-
-      i.fa-check
-        font-size: 25px
-        color: white
-
-@media screen and (max-width: 800px)
-  .board-list
-    height: 100%
-    overflow: scroll
-
-    li
-      width: 50%
-
-    .board-list-item
-      overflow: hidden
-      height: 8rem
-
-    .board-list-item-sub-name
-      position: relative
-      top: -100px
-      left: -100px
-
-    .board-handle
-      position: absolute
-      padding: 7px
-      top: 50%
-      transform: translateY(-50%)
-      right: 10px
-      font-size: 24px
-
-@media screen and (max-width: 360px)
-    li
-      width: 100%
-
-    .board-handle
-      position: absolute
-      padding: 7px
-      top: 50%
-      transform: translateY(-50%)
-      right: 10px
-      font-size: 24px
-
-.AllBoardTeamsOrgs
-  list-style-type: none;
-  overflow: hidden;
-
-.AllBoardTeams,.AllBoardOrgs,.AllBoardBtns
-  float: left;
-
-.js-AllBoardOrgs
-  margin-left: 16px;
-
-.AllBoardTeams
-  margin-left : 16px;
-
-.AllBoardButtonsContainer
-  margin: 16px;
-
-#filterBtn,#resetBtn
-  display: inline;
-
-.js-board
-  display: block;
-
-.minicard-members
-  padding: 6px 0 6px 8px
-  width: 100%
-  margin-bottom: 2px
-  margin-left: -4px
-  display: inline-block
-
-.minicard-lists
-  margin: 0 auto
-  max-width: 95%
-  height: 100%
-
-.flex
-  display: flex
-
-.flex-wrap
-  flex-wrap: wrap
-
-  .item
-    margin: 2px;
-    padding-right: 6px
-    text-align: center

client/components/cards/attachments.css

@@ -0,0 +1,81 @@
+.attachments-galery {
+  display: flex;
+  flex-wrap: wrap;
+}
+.attachments-galery .attachment-item {
+  width: 31.33%;
+  margin: 10px 1% 0;
+  text-align: center;
+  border-radius: 3px;
+  overflow: auto;
+  background: #ededed;
+  min-height: 120px;
+}
+.attachments-galery .attachment-item:hover {
+  background: #e0e0e0;
+}
+.attachments-galery .attachment-item.add-attachment {
+  display: flex;
+  align-items: center;
+}
+.attachments-galery .attachment-item.add-attachment a {
+  display: block;
+  margin: auto;
+}
+.attachments-galery .attachment-item .attachment-thumbnail {
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.attachments-galery .attachment-item .attachment-thumbnail .attachment-thumbnail-img {
+  max-height: 100%;
+  max-width: 100%;
+}
+.attachments-galery .attachment-item .attachment-thumbnail .attachment-thumbnail-ext {
+  text-transform: uppercase;
+  font-size: 1.6em;
+}
+.attachments-galery .attachment-item .attachment-details {
+  font-size: 0.75em;
+  margin: 3px;
+}
+.attachments-galery .attachment-item .attachment-details .attachment-details-actions a {
+  display: block;
+}
+.attachments-galery .attachment-item .attachment-details .attachment-details-actions a.attachment-details-menu {
+  padding-top: 10px;
+}
+.attachment-image-preview {
+  max-width: 100px;
+  display: block;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}
+.preview-clipboard-image {
+  width: 280px;
+  max-width: 100%;
+  height: 200px;
+  display: block;
+  border: 1px solid #000;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}
+@media screen and (max-width: 800px) {
+  .attachments-galery .attachment-item {
+    width: 48%;
+  }
+  .attachments-galery .attachment-item .attachment-thumbnail {
+    height: 130px;
+  }
+  .attachments-galery .attachment-item .attachment-details {
+    font-size: 1.1em;
+  }
+}
+@media screen and (max-width: 360px) {
+  .attachments-galery .attachment-item {
+    width: 100%;
+  }
+  .attachments-galery .attachment-item .attachment-thumbnail {
+    height: 200px;
+  }
+}

client/components/cards/attachments.jade

@@ -19,7 +19,9 @@ template(name="attachmentsGalery")
   .attachments-galery
     each attachments
       .attachment-item
-        a.attachment-thumbnail.swipebox(href="{{link}}" title="{{name}}")
+        // TODO: Add popup of attachment image later, with some swipebox or lightbox that would not add bugs
+        // a.attachment-thumbnail(href="{{link}}" title="{{name}}")
+        span.attachment-thumbnail(href="{{link}}" title="{{name}}")
           if link
             if isImage
               img.attachment-thumbnail-img(src="{{link}}")
@@ -69,6 +71,9 @@ template(name="attachmentActionsPopup")
           else
             | {{_ 'add-cover'}}
       if currentUser.isBoardAdmin
+        a.js-rename
+          i.fa.fa-pencil-square-o
+          | {{_ 'rename'}}
         a.js-confirm-delete
           i.fa.fa-close
           | {{_ 'delete'}}
@@ -85,3 +90,8 @@ template(name="attachmentActionsPopup")
             a.js-move-storage-gridfs
               i.fa.fa-arrow-right
               | {{_ 'attachment-move-storage-gridfs'}}
+
+template(name="attachmentRenamePopup")
+  input.js-edit-attachment-name(type='text' autofocus value="{{getNameWithoutExtension}}" dir="auto")
+  .edit-controls.clearfix
+    button.primary.confirm.js-submit-edit-attachment-name(type="submit") {{_ 'save'}}

client/components/cards/attachments.js

@@ -134,6 +134,7 @@ BlazeComponent.extendComponent({
   events() {
     return [
       {
+        'click .js-rename': Popup.open('attachmentRename'),
         'click .js-confirm-delete': Popup.afterConfirm('attachmentDelete', function() {
           Attachments.remove(this._id);
           Popup.back(2);
@@ -158,3 +159,31 @@ BlazeComponent.extendComponent({
     ]
   }
 }).register('attachmentActionsPopup');
+
+BlazeComponent.extendComponent({
+  getNameWithoutExtension() {
+    const ret = this.data().name.replace(new RegExp("\." + this.data().extension + "$"), "");
+    return ret;
+  },
+  events() {
+    return [
+      {
+        'keydown input.js-edit-attachment-name'(evt) {
+          // enter = save
+          if (evt.keyCode === 13) {
+            this.find('button[type=submit]').click();
+          }
+        },
+        'click button.js-submit-edit-attachment-name'(event) {
+          // save button pressed
+          event.preventDefault();
+          const name = this.$('.js-edit-attachment-name')[0]
+            .value
+            .trim() + this.data().extensionWithDot;
+          Meteor.call('renameAttachment', this.data()._id, name);
+          Popup.back(2);
+        },
+      }
+    ]
+  }
+}).register('attachmentRenamePopup');

client/components/cards/attachments.styl

@@ -1,83 +0,0 @@
-@import 'nib'
-
-.attachments-galery
-  display: flex
-  flex-wrap: wrap
-
-  .attachment-item
-    width: 33.33% - 2%
-    margin: 10px 1% 0
-    text-align: center
-    border-radius: 3px
-    overflow: auto
-    background: darken(white, 7%)
-    min-height: 120px
-
-    &:hover
-      background: darken(white, 12%)
-
-    &.add-attachment
-      display: flex
-      align-items: center
-
-      a
-        display: block
-        margin: auto
-
-    .attachment-thumbnail
-      height: 80px
-      display: flex
-      align-items: center
-      justify-content: center
-      position: relative
-
-      .attachment-thumbnail-img
-        max-height: 100%
-        max-width: 100%
-
-      .attachment-thumbnail-ext
-        text-transform: uppercase
-        font-size: 1.6em
-
-    .attachment-details
-      font-size: 0.75em
-      margin: 3px
-
-      .attachment-details-actions a
-        display: block
-
-        &.attachment-details-menu
-          padding-top: 10px
-
-.attachment-image-preview
-  max-width: 100px
-  display: block
-  box-shadow: 0 1px 2px rgba(0,0,0,.2)
-
-.preview-clipboard-image
-  width: 280px
-  max-width: 100%;
-  height: 200px
-  display: block
-  border: 1px solid black
-  box-shadow: 0 1px 2px rgba(0,0,0,.2)
-
-@media screen and (max-width: 800px)
-  .attachments-galery
-    flex-direction
-      row
-    .attachment-item
-      width: 50% - 2%
-
-      .attachment-thumbnail
-        height: 130px
-      .attachment-details
-        font-size: 1.1em
-
-@media screen and (max-width: 360px)
-  .attachments-galery
-    .attachment-item
-      width: 100%
-
-      .attachment-thumbnail
-        height: 200px

client/components/cards/cardCustomFields.js

@@ -1,3 +1,5 @@
+import moment from 'moment/min/moment-with-locales';
+import { TAPi18n } from '/imports/i18n';
 import { DatePicker } from '/client/lib/datepicker';
 import Cards from '/models/cards';
 

client/components/cards/cardDate.css

@@ -0,0 +1,67 @@
+.card-date {
+  display: block;
+  border-radius: 4px;
+  padding: 1px 3px;
+  background-color: #dbdbdb;
+}
+.card-date:hover,
+.card-date.is-active {
+  background-color: #b3b3b3;
+}
+.card-date.current,
+.card-date.almost-due,
+.card-date.due,
+.card-date.long-overdue {
+  color: #fff;
+}
+.card-date.current {
+  background-color: #5ba639;
+}
+.card-date.current:hover,
+.card-date.current.is-active {
+  background-color: #46802c;
+}
+.card-date.almost-due {
+  background-color: #edc909;
+}
+.card-date.almost-due:hover,
+.card-date.almost-due.is-active {
+  background-color: #bc9f07;
+}
+.card-date.due {
+  background-color: #fa3f00;
+}
+.card-date.due:hover,
+.card-date.due.is-active {
+  background-color: #c73200;
+}
+.card-date.long-overdue {
+  background-color: #fd5d47;
+}
+.card-date.long-overdue:hover,
+.card-date.long-overdue.is-active {
+  background-color: #fd3e24;
+}
+.card-date.end-date time::before {
+  content: "\f253";
+}
+.card-date.due-date time::before {
+  content: "\f090";
+}
+.card-date.start-date time::before {
+  content: "\f251";
+}
+.card-date.received-date time::before {
+  content: "\f08b";
+}
+.card-date time::before {
+  font: normal normal normal 14px/1 FontAwesome;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  margin-right: 0.3em;
+}
+.customfield-date {
+  display: block;
+  border-radius: 4px;
+  padding: 1px 3px;
+}

client/components/cards/cardDate.js

@@ -1,3 +1,5 @@
+import moment from 'moment/min/moment-with-locales';
+import { TAPi18n } from '/imports/i18n';
 import { DatePicker } from '/client/lib/datepicker';
 
 Template.dateBadge.helpers({
@@ -317,31 +319,31 @@ CardCustomFieldDate.register('cardCustomFieldDate');
 
 (class extends CardReceivedDate {
   showDate() {
-    return this.date.get().format('l');
+    return this.date.get().format('L');
   }
 }.register('minicardReceivedDate'));
 
 (class extends CardStartDate {
   showDate() {
-    return this.date.get().format('l');
+    return this.date.get().format('L');
   }
 }.register('minicardStartDate'));
 
 (class extends CardDueDate {
   showDate() {
-    return this.date.get().format('l');
+    return this.date.get().format('L');
   }
 }.register('minicardDueDate'));
 
 (class extends CardEndDate {
   showDate() {
-    return this.date.get().format('l');
+    return this.date.get().format('L');
   }
 }.register('minicardEndDate'));
 
 (class extends CardCustomFieldDate {
   showDate() {
-    return this.date.get().format('l');
+    return this.date.get().format('L');
   }
 }.register('minicardCustomFieldDate'));
 
@@ -358,7 +360,7 @@ class VoteEndDate extends CardDate {
     return classes;
   }
   showDate() {
-    return this.date.get().format('l LT');
+    return this.date.get().format('L LT');
   }
   showTitle() {
     return `${TAPi18n.__('card-end-on')} ${this.date.get().format('LLLL')}`;

client/components/cards/cardDate.styl

@@ -1,63 +0,0 @@
-.card-date
-  display: block
-  border-radius: 4px
-  padding: 1px 3px
-
-  background-color: #dbdbdb
-  &:hover, &.is-active
-    background-color: #b3b3b3
-
-  &.current, &.almost-due, &.due, &.long-overdue
-    color: #fff
-
-  &.current
-    background-color: #5ba639
-    &:hover, &.is-active
-      background-color: darken(#5ba639, 10)
-
-  &.almost-due
-    background-color: #edc909
-    &:hover, &.is-active
-      background-color: darken(#edc909, 10)
-
-  &.due
-    background-color: #fa3f00
-    &:hover, &.is-active
-      background-color: darken(#fa3f00, 10)
-
-  &.long-overdue
-    background-color: #fd5d47
-    &:hover, &.is-active
-      background-color: darken(#fd5d47, 7)
-
-  &.end-date
-    time
-      &::before
-        content: "\f253"  // symbol: fa-hourglass-end
-
-  &.due-date
-    time
-      &::before
-        content: "\f090"  // symbol: fa-sign-in
-
-  &.start-date
-    time
-      &::before
-        content: "\f251"  // symbol: fa-hourglass-start
-
-  &.received-date
-    time
-      &::before
-        content: "\f08b"  // symbol: fa-sign-out
-
-  time
-    &::before
-      font: normal normal normal 14px/1 FontAwesome
-      font-size: inherit
-      -webkit-font-smoothing: antialiased
-      margin-right: 0.3em
-
-.customfield-date
-  display: block
-  border-radius: 4px
-  padding: 1px 3px

client/components/cards/cardDescription.css

@@ -0,0 +1,56 @@
+.new-description {
+  position: relative;
+  margin: 0 0 20px 0;
+}
+.new-description.is-open .helper {
+  display: inline-block;
+}
+.new-description.is-open textarea {
+  min-height: 100px;
+  color: #4d4d4d;
+  cursor: auto;
+  overflow: hidden;
+  word-wrap: break-word;
+}
+.new-description .too-long {
+  margin-top: 8px;
+}
+.new-description textarea {
+  background-color: #fff;
+  border: 0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.23);
+  height: 36px;
+  margin: 4px 4px 6px 0;
+  padding: 9px 11px;
+  width: 100%;
+}
+.new-description textarea:hover,
+.new-description textarea:is-open {
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.33);
+  border: 0;
+  cursor: pointer;
+}
+.new-description textarea:is-open {
+  cursor: auto;
+}
+.description-item {
+  background-color: #fff;
+  border: 0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.23);
+  color: #8c8c8c;
+  height: 36px;
+  margin: 4px 4px 6px 0;
+  width: 92%;
+}
+.description-item:hover {
+  background: #e0e0e0;
+}
+.description-item.add-description {
+  display: flex;
+  margin: 5px;
+}
+.description-item.add-description a {
+  display: block;
+  margin: auto;
+}

client/components/cards/cardDescription.styl

@@ -1,59 +0,0 @@
-@import 'nib'
-
-.new-description
-  position: relative
-  margin: 0 0 20px 0
-
-
-  &.is-open
-    .helper
-      display: inline-block
-
-    textarea
-      min-height: 100px
-      color: #4d4d4d
-      cursor: auto
-      overflow: hidden
-      word-wrap: break-word
-
-  .too-long
-    margin-top: 8px
-
-  textarea
-    background-color: #fff
-    border: 0
-    box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
-    height: 36px
-    margin: 4px 4px 6px 0
-    padding: 9px 11px
-    width: 100%
-
-    &:hover,
-    &:is-open
-      background-color: #fff
-      box-shadow: 0 1px 3px rgba(0, 0, 0, .33)
-      border: 0
-      cursor: pointer
-
-    &:is-open
-      cursor: auto
-
-.description-item
-  background-color: #fff
-  border: 0
-  box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
-  color: #8c8c8c
-  height: 36px
-  margin: 4px 4px 6px 0
-  width: 92%
-
-  &:hover
-    background: darken(white, 12%)
-
-  &.add-description
-    display: flex
-    margin: 5px
-
-    a
-      display: block
-      margin: auto

client/components/cards/cardDetails.css

@@ -0,0 +1,588 @@
+.assignee {
+  border-radius: 3px;
+  display: block;
+  position: relative;
+  float: left;
+  height: 30px;
+  width: 30px;
+  margin: 0 4px 4px 0;
+  cursor: pointer;
+  user-select: none;
+  z-index: 1;
+  text-decoration: none;
+  border-radius: 50%;
+}
+.assignee .avatar {
+  overflow: hidden;
+  border-radius: 50%;
+}
+.assignee .avatar.avatar-assignee-initials {
+  height: 70%;
+  width: 70%;
+  padding: 15%;
+  background-color: #dbdbdb;
+  color: #444;
+  position: absolute;
+}
+.assignee .avatar.avatar-image {
+  object-fit: cover;
+  object-position: center;
+  height: 100%;
+  width: 100%;
+}
+.assignee .assignee-presence-status {
+  background-color: #b3b3b3;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  height: 7px;
+  width: 7px;
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  border: 1px solid #fff;
+  z-index: 15;
+}
+.assignee .assignee-presence-status.active {
+  background: #64c464;
+  border-color: #daf1da;
+}
+.assignee .assignee-presence-status.idle {
+  background: #e4e467;
+  border-color: #f7f7d4;
+}
+.assignee .assignee-presence-status.disconnected {
+  background: #bdbdbd;
+  border-color: #ededed;
+}
+.assignee .assignee-presence-status.pending {
+  background: #e44242;
+  border-color: #f1dada;
+}
+.assignee.add-assignee {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 0 2px #bfbfbf inset;
+}
+.assignee.add-assignee:hover,
+.assignee.add-assignee.is-active {
+  box-shadow: 0 0 0 2px #666 inset;
+}
+.copied-tooltip {
+  display: none;
+  padding: 0px 10px;
+  background-color: rgba(0,0,0,0.875);
+  color: #fff;
+  border-radius: 5px;
+}
+.card-details {
+  padding: 0;
+  flex-shrink: 0;
+  flex-basis: 600px;
+  will-change: flex-basis;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  background: #f7f7f7;
+  border-radius: bottom 3px;
+  z-index: 20;
+  animation: flexGrowIn 0.1s;
+  box-shadow: 0 0 7px 0 #b3b3b3;
+  transition: flex-basis 0.1s;
+  box-sizing: border-box;
+}
+.card-details .mCustomScrollBox {
+  padding-left: 0;
+}
+.card-details .card-details-canvas {
+  width: auto;
+  padding: 0 20px;
+}
+.card-details .card-details-header {
+  margin: 0 -20px 5px;
+  padding: 7px 20px;
+  background: #ededed;
+  border-bottom: 1px solid #dbdbdb;
+  position: sticky;
+  top: 0px;
+  z-index: 500;
+}
+.card-details .card-details-header .card-number {
+  color: #b3b3b3;
+  display: inline-block;
+  margin-right: 5px;
+}
+.card-details .card-details-header .close-card-details,
+.card-details .card-details-header .maximize-card-details,
+.card-details .card-details-header .minimize-card-details,
+.card-details .card-details-header .card-details-menu,
+.card-details .card-details-header .card-copy-button,
+.card-details .card-details-header .card-copy-mobile-button,
+.card-details .card-details-header .close-card-details-mobile-web,
+.card-details .card-details-header .card-details-menu-mobile-web,
+.card-details .card-details-header .copied-tooltip {
+  float: right;
+}
+.card-details .card-details-header .close-card-details,
+.card-details .card-details-header .maximize-card-details,
+.card-details .card-details-header .minimize-card-details {
+  font-size: 24px;
+  padding: 5px 10px 5px 10px;
+  margin-right: -8px;
+}
+.card-details .card-details-header .close-card-details-mobile-web {
+  font-size: 24px;
+  padding: 5px;
+  margin-right: 40px;
+}
+.card-details .card-details-header .card-copy-button {
+  font-size: 17px;
+  padding: 10px;
+  margin-right: 10px;
+}
+.card-details .card-details-header .card-copy-mobile-button {
+  font-size: 17px;
+  padding: 10px;
+  margin-right: 10px;
+}
+.card-details .card-details-header .card-details-menu {
+  font-size: 17px;
+  padding: 10px;
+}
+.card-details .card-details-header .card-details-menu-mobile-web {
+  font-size: 17px;
+  padding: 10px;
+  margin-right: 30px;
+}
+.card-details .card-details-header .card-details-watch {
+  font-size: 17px;
+  padding-left: 7px;
+  color: #a6a6a6;
+}
+.card-details .card-details-header .card-details-title {
+  font-weight: bold;
+  font-size: 1.33em;
+  margin: 7px 0 0;
+  padding: 0;
+}
+.card-details .card-details-header .linked-card-location {
+  font-style: italic;
+  font-size: 1em;
+  margin-bottom: 0;
+}
+.card-details .card-details-header .linked-card-location p {
+  margin-bottom: 0;
+}
+.card-details .card-details-header form.inlined-form {
+  margin-top: 5px;
+  margin-bottom: 10px;
+}
+.card-details .card-details-header form.inlined-form .copied-tooltip {
+  padding: 0px 10px;
+}
+.card-details .card-details-header .card-details-list {
+  font-size: 0.85em;
+  margin-bottom: 3px;
+}
+.card-details .card-details-header .card-details-list a.card-details-list-title {
+  font-weight: bold;
+}
+.card-details .card-details-header .card-details-list a.card-details-list-title.is-editable {
+  display: inline-block;
+  background: #e6e6e6;
+  border-radius: 3px;
+  padding: 0px 5px;
+}
+.card-details .card-details-header .copied-tooltip {
+  margin-right: 10px;
+  padding: 10px;
+}
+.card-details .card-description textarea {
+  min-height: 100px;
+}
+.card-details .card-details-items {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 15px 0;
+}
+.card-details .card-details-items .card-details-item {
+  margin-right: 0.5em;
+  flex-grow: 1;
+}
+.card-details .card-details-items .card-details-item:last-child {
+  margin-right: 0;
+}
+.card-details .card-details-items .card-details-item.card-details-item-labels {
+  display: block;
+  word-wrap: break-word;
+  max-width: 95%;
+}
+.card-details .card-details-items .card-details-item.card-details-item-members,
+.card-details .card-details-items .card-details-item.card-details-item-assignees,
+.card-details .card-details-items .card-details-item.card-details-item-customfield,
+.card-details .card-details-items .card-details-item.card-details-item-name {
+  display: block;
+  word-wrap: break-word;
+  max-width: 36%;
+}
+.card-details .card-details-items .card-details-item.card-details-item-creator,
+.card-details .card-details-items .card-details-item.card-details-item-received,
+.card-details .card-details-items .card-details-item.card-details-item-start,
+.card-details .card-details-items .card-details-item.card-details-item-due,
+.card-details .card-details-items .card-details-item.card-details-item-end {
+  display: block;
+  word-wrap: break-word;
+  max-width: 28%;
+}
+.card-details .card-details-items .card-details-item.custom-fields {
+  padding-left: 10px;
+}
+.card-details .card-details-item-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #4d4d4d;
+}
+.card-details .activities {
+  padding-top: 10px;
+}
+@media screen and (min-width: 801px) {
+  .card-details-maximized {
+    padding: 0;
+    flex-shrink: 0;
+    flex-basis: calc(100% - 20px);
+    will-change: flex-basis;
+    overflow-y: scroll;
+    overflow-x: scroll;
+    background: #f7f7f7;
+    border-radius: bottom 3px;
+    z-index: 100;
+    animation: flexGrowIn 0.1s;
+    box-shadow: 0 0 7px 0 #b3b3b3;
+    transition: flex-basis 0.1s;
+    box-sizing: border-box;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: calc(100% - 20px);
+    width: calc(100% - 20px);
+    float: left;
+  }
+  .card-details-maximized .card-details-left {
+    float: left;
+    top: 60px;
+    left: 20px;
+    width: 47%;
+    border-right: solid 2px #dbdbdb;
+    padding-right: 10px;
+  }
+  .card-details-maximized .card-details-right {
+    position: absolute;
+    float: right;
+    left: 50%;
+    margin: 15px 0;
+  }
+  .card-details-maximized .card-details-header {
+    width: 100%;
+  }
+}
+input[type="text"].attachment-add-link-input {
+  float: left;
+  margin: 0 0 8px;
+  width: 80%;
+}
+input[type="submit"].attachment-add-link-submit {
+  float: left;
+  margin: 0 0 8px 4px;
+  padding: 6px 12px;
+  width: 18%;
+}
+@media screen and (max-width: 800px) {
+  .card-details {
+    width: calc(100% - 1px);
+    padding: 0px 20px 0px 20px;
+    margin: 0px;
+    transition: none;
+    overflow-y: revert;
+    overflow-x: revert;
+  }
+  .card-details .card-details-canvas {
+    width: 100%;
+    padding-left: 0px;
+  }
+  .card-details .card-details-header .close-card-details {
+    margin-right: 0px;
+  }
+  .card-details .card-details-header .card-details-menu {
+    margin-right: 40px;
+  }
+  .card-details .card-details-header .maximize-card-details {
+    margin-right: 40px;
+  }
+  .card-details .card-details-header .minimize-card-details {
+    margin-right: 40px;
+  }
+  .card-details-popup {
+    padding: 0px 10px;
+  }
+  .pop-over > .content-wrapper > .popup-container-depth-0 {
+    width: 100%;
+  }
+  .pop-over > .content-wrapper > .popup-container-depth-0 > .content {
+    width: calc(100% - 10px);
+  }
+  .pop-over > .content-wrapper > .popup-container-depth-0 > .content > .card-details-popup hr {
+    margin: 15px 0px;
+  }
+  .pop-over > .content-wrapper > .popup-container-depth-0 .card-details-header {
+    margin: 0;
+  }
+}
+.card-details-white {
+  background: unset !important;
+  color: #000 !important;
+  border: 1px solid #eee;
+}
+.card-details-green {
+  background: #3cb500 !important;
+  color: #fff !important;
+}
+.card-details-yellow {
+  background: #fad900 !important;
+  color: #000 !important;
+}
+.card-details-orange {
+  background: #ff9f19 !important;
+  color: #000 !important;
+}
+.card-details-red {
+  background: #eb4646 !important;
+  color: #fff !important;
+}
+.card-details-purple {
+  background: #a632db !important;
+  color: #fff !important;
+}
+.card-details-blue {
+  background: #0079bf !important;
+  color: #fff !important;
+}
+.card-details-pink {
+  background: #ff78cb !important;
+  color: #000 !important;
+}
+.card-details-sky {
+  background: #00c2e0 !important;
+  color: #fff !important;
+}
+.card-details-black {
+  background: #4d4d4d !important;
+  color: #fff !important;
+}
+.card-details-lime {
+  background: #51e898 !important;
+  color: #000 !important;
+}
+.card-details-silver {
+  background: #c0c0c0 !important;
+  color: #000 !important;
+}
+.card-details-peachpuff {
+  background: #ffdab9 !important;
+  color: #000 !important;
+}
+.card-details-crimson {
+  background: #dc143c !important;
+  color: #fff !important;
+}
+.card-details-plum {
+  background: #dda0dd !important;
+  color: #000 !important;
+}
+.card-details-darkgreen {
+  background: #006400 !important;
+  color: #fff !important;
+}
+.card-details-slateblue {
+  background: #6a5acd !important;
+  color: #fff !important;
+}
+.card-details-magenta {
+  background: #f0f !important;
+  color: #fff !important;
+}
+.card-details-gold {
+  background: #ffd700 !important;
+  color: #000 !important;
+}
+.card-details-navy {
+  background: #000080 !important;
+  color: #fff !important;
+}
+.card-details-gray {
+  background: #808080 !important;
+  color: #fff !important;
+}
+.card-details-saddlebrown {
+  background: #8b4513 !important;
+  color: #fff !important;
+}
+.card-details-paleturquoise {
+  background: #afeeee !important;
+  color: #000 !important;
+}
+.card-details-mistyrose {
+  background: #ffe4e1 !important;
+  color: #000 !important;
+}
+.card-details-indigo {
+  background: #4b0082 !important;
+  color: #fff !important;
+}
+.voted {
+  opacity: 0.7;
+}
+.vote-title {
+  display: flex;
+  justify-content: space-between;
+}
+.vote-title .js-edit-date {
+  align-self: baseline;
+  margin-left: 5px;
+}
+.vote-result {
+  display: flex;
+}
+.js-show-positive-votes {
+  cursor: pointer;
+}
+.poker-voted {
+  opacity: 0.7;
+}
+.poker-title {
+  display: flex;
+  justify-content: space-between;
+}
+.poker-title .js-edit-date {
+  align-self: baseline;
+  margin-left: 5px;
+}
+.poker-result {
+  display: flex;
+  flex-flow: row wrap;
+}
+.js-show-positive-poker-votes {
+  cursor: pointer;
+}
+.poker-deck {
+  display: grid;
+  flex-direction: column;
+  text-align: center;
+}
+.poker-card-result {
+  width: 32px;
+  font-size: 1em;
+  font-weight: bold;
+  padding: 4px 2px 4px 2px;
+  cursor: default;
+}
+.winner {
+  font-weight: bold;
+  outline: #2d2d2d solid 2px;
+}
+.loser {
+  opacity: 0.5;
+}
+.responsive-table {
+  overflow-x: auto;
+}
+.poker-table {
+  display: table;
+  width: 100%;
+  padding-top: 10px;
+}
+.poker-table-row {
+  display: table-row;
+}
+.poker-table-heading {
+  background-color: #eee;
+  display: table-header-group;
+}
+.poker-table-cell {
+  display: table-cell;
+  padding: 0 0 5px 2px;
+  border-bottom: 1px solid #d2d0d0;
+  text-align: center;
+  min-width: 45px;
+}
+.poker-table-cell-who {
+  width: 150px;
+  vertical-align: middle;
+}
+.poker-table-heading-left,
+.poker-table-heading-right {
+  display: table-header-group;
+  font-weight: bold;
+  border-top: 1px solid #808080;
+}
+@media (max-width: 400px) {
+  .poker-table-heading-right {
+    display: none;
+  }
+}
+.poker-table-body {
+  display: table-row-group;
+}
+.poker-table-side-left,
+.poker-table-side-right {
+  display: inline-block;
+}
+.poker-table-side-right {
+  padding-left: 10px;
+}
+@media (max-width: 400px) {
+  .poker-table-side-right {
+    padding-left: 0px;
+  }
+}
+.estimation-add {
+  display: block;
+  overflow: auto;
+  margin-top: 15px;
+  margin-bottom: 5px;
+}
+.estimation-add input {
+  display: inline-block;
+  float: right;
+  margin: auto;
+  margin-right: 10px;
+  width: 100px;
+}
+.estimation-add button {
+  display: inline-block;
+  float: right;
+  margin: auto;
+}
+.poker-card {
+  width: 48px;
+  height: 72px;
+  float: left;
+  background: #fff;
+  border-radius: 5px;
+  display: table;
+  box-sizing: border-box;
+  padding: 5px;
+  margin: 3px;
+  font-size: 20px;
+  font-weight: bold;
+  text-shadow: #2d2d2d 1px 1px 0;
+  box-shadow: 0 0 5px #aaa;
+  text-align: center;
+  position: relative;
+  cursor: pointer;
+}
+.poker-card .inner {
+  display: table-cell;
+  vertical-align: middle;
+  border-radius: 5px;
+  overflow: hidden;
+  background-color: #cecece;
+}

client/components/cards/cardDetails.js

@@ -1,3 +1,5 @@
+import moment from 'moment/min/moment-with-locales';
+import { TAPi18n } from '/imports/i18n';
 import { DatePicker } from '/client/lib/datepicker';
 import Cards from '/models/cards';
 import Boards from '/models/boards';
@@ -7,7 +9,6 @@ import Users from '/models/users';
 import Lists from '/models/lists';
 import CardComments from '/models/cardComments';
 import { ALLOWED_COLORS } from '/config/const';
-import moment from 'moment';
 import { UserAvatar } from '../users/userAvatar';
 
 const subManager = new SubsManager();
@@ -211,11 +212,6 @@ BlazeComponent.extendComponent({
       //-------------
     }
 
-    if (!Utils.isMiniScreen()) {
-      Meteor.setTimeout(() => {
-        this.scrollParentContainer();
-      }, 500);
-    }
     const $checklistsDom = this.$('.card-checklist-items');
 
     $checklistsDom.sortable({
@@ -392,7 +388,9 @@ BlazeComponent.extendComponent({
           let card = this.data();
           const listSelect = this.$('.js-select-card-details-lists')[0];
           const listId = listSelect.options[listSelect.selectedIndex].value;
-          card.move(card.boardId, card.swimlaneId, listId, card.sort);
+
+          const minOrder = card.getMinSort(listId, card.swimlaneId);
+          card.move(card.boardId, card.swimlaneId, listId, minOrder - 1);
         },
         'click .js-go-to-linked-card'() {
           Utils.goCardId(this.data().linkedId);
@@ -439,10 +437,20 @@ BlazeComponent.extendComponent({
         'click .js-maximize-card-details'() {
           Meteor.call('toggleCardMaximized');
           autosize($('.card-details'));
+          if (!Utils.isMiniScreen()) {
+            Meteor.setTimeout(() => {
+              this.scrollParentContainer();
+            }, 500);
+          }
         },
         'click .js-minimize-card-details'() {
           Meteor.call('toggleCardMaximized');
           autosize($('.card-details'));
+          if (!Utils.isMiniScreen()) {
+            Meteor.setTimeout(() => {
+              this.scrollParentContainer();
+            }, 500);
+          }
         },
         'click .js-vote'(e) {
           const forIt = $(e.target).hasClass('js-vote-positive');
@@ -671,21 +679,13 @@ Template.cardDetailsActionsPopup.events({
   'click .js-set-card-color': Popup.open('setCardColor'),
   'click .js-move-card-to-top'(event) {
     event.preventDefault();
-    const minOrder = _.min(
-      this.list()
-        .cardsUnfiltered(this.swimlaneId)
-        .map((c) => c.sort),
-    );
+    const minOrder = this.getMinSort();
     this.move(this.boardId, this.swimlaneId, this.listId, minOrder - 1);
     Popup.back();
   },
   'click .js-move-card-to-bottom'(event) {
     event.preventDefault();
-    const maxOrder = _.max(
-      this.list()
-        .cardsUnfiltered(this.swimlaneId)
-        .map((c) => c.sort),
-    );
+    const maxOrder = this.getMaxSort();
     this.move(this.boardId, this.swimlaneId, this.listId, maxOrder + 1);
     Popup.back();
   },
@@ -830,14 +830,16 @@ Template.moveCardPopup.events({
     const listId = lSelect.options[lSelect.selectedIndex].value;
     const slSelect = $('.js-select-swimlanes')[0];
     const swimlaneId = slSelect.options[slSelect.selectedIndex].value;
-    card.move(boardId, swimlaneId, listId, 0);
+
+    const minOrder = card.getMinSort(listId, swimlaneId);
+    card.move(boardId, swimlaneId, listId, minOrder - 1);
 
     // set new id's to card object in case the card is moved to top by the comment "moveCard" after this command (.js-move-card)
     this.boardId = boardId;
     this.swimlaneId = swimlaneId;
     this.listId = listId;
 
-    Popup.back();
+    Popup.back(2);
   },
 });
 BlazeComponent.extendComponent({
@@ -958,8 +960,10 @@ Template.copyCardPopup.events({
     const boardId = bSelect.options[bSelect.selectedIndex].value;
     const textarea = $('#copy-card-title');
     const title = textarea.val().trim();
-    // insert new card to the bottom of new list
-    card.sort = Lists.findOne(card.listId).cards().count();
+
+    // insert new card to the top of new list
+    const minOrder = card.getMinSort(listId, swimlaneId);
+    card.sort = minOrder - 1;
 
     if (title) {
       card.title = title;
@@ -971,7 +975,7 @@ Template.copyCardPopup.events({
       // See https://github.com/wekan/wekan/issues/80
       Filter.addException(_id);
 
-      Popup.back();
+      Popup.back(2);
     }
   },
 });
@@ -1801,6 +1805,7 @@ Template.cardAssigneePopup.helpers({
     return user && user.isBoardAdmin() ? 'admin' : 'normal';
   },
 
+/*
   presenceStatusClassName() {
     const user = Users.findOne(this.userId);
     const userPresence = presences.findOne({ userId: this.userId });
@@ -1810,7 +1815,7 @@ Template.cardAssigneePopup.helpers({
       return 'active';
     else return 'idle';
   },
-
+*/
   isCardAssignee() {
     const card = Template.parentData();
     const cardAssignees = card.getAssignees();

client/components/cards/cardDetails.styl

@@ -1,564 +0,0 @@
-@import 'nib'
-
-// Assignee, code copied from wekan/client/users/userAvatar.styl
-
-avatar-radius = 50%
-
-.assignee
-  border-radius: 3px
-  display: block
-  position: relative
-  float: left
-  height: 30px
-  width: @height
-  margin: 0 4px 4px 0
-  cursor: pointer
-  user-select: none
-  z-index: 1
-  text-decoration: none
-  border-radius: avatar-radius
-
-  .avatar
-    overflow: hidden
-    border-radius: avatar-radius
-
-    &.avatar-assignee-initials
-      height: 70%
-      width: @height
-      padding: 15%
-      background-color: #dbdbdb
-      color: #444444
-      position: absolute
-
-    &.avatar-image
-      object-fit: cover;
-      object-position: center;
-      height: 100%
-      width: @height
-
-  .assignee-presence-status
-    background-color: #b3b3b3
-    border: 1px solid #fff
-    border-radius: 50%
-    height: 7px
-    width: @height
-    position: absolute
-    right: -1px
-    bottom: -1px
-    border: 1px solid white
-    z-index: 15
-
-    &.active
-      background: #64c464
-      border-color: #daf1da
-
-    &.idle
-      background: #e4e467
-      border-color: #f7f7d4
-
-    &.disconnected
-      background: #bdbdbd
-      border-color: #ededed
-
-    &.pending
-      background: #e44242
-      border-color: #f1dada
-
-
-
-  &.add-assignee
-    display: flex
-    align-items: center
-    justify-content: center
-    box-shadow: 0 0 0 2px darken(white, 25%) inset
-
-    &:hover, &.is-active
-      box-shadow: 0 0 0 2px darken(white, 60%) inset
-
-// Other card details
-.copied-tooltip
-  display: none
-  padding: 0px 10px;
-  background-color: #000000df;
-  color: #fff;
-  border-radius: 5px;
-
-.card-details
-  padding: 0
-  flex-shrink: 0
-  flex-basis: 600px
-  will-change: flex-basis
-  overflow-y: scroll
-  overflow-x: hidden
-  background: darken(white, 3%)
-  border-radius: bottom 3px
-  z-index: 20
-  animation: flexGrowIn 0.1s
-  box-shadow: 0 0 7px 0 darken(white, 30%)
-  transition: flex-basis 0.1s
-  box-sizing: border-box
-
-  .mCustomScrollBox
-    padding-left: 0
-
-  .card-details-canvas
-    width: auto
-    padding: 0 20px
-
-  .card-details-header
-    margin: 0 -20px 5px
-    padding: 7px 20px
-    background: darken(white, 7%)
-    border-bottom: 1px solid darken(white, 14%)
-    position: sticky
-    top: 0px
-    z-index: 500
-
-    .card-number {
-      color: darken(white, 30%);
-      display: inline-block;
-      margin-right: 5px;
-    }
-
-    .close-card-details,
-    .maximize-card-details,
-    .minimize-card-details,
-    .card-details-menu,
-    .card-copy-button,
-    .card-copy-mobile-button,
-    .close-card-details-mobile-web,
-    .card-details-menu-mobile-web,
-    .copied-tooltip
-      float: right
-
-    .close-card-details,
-    .maximize-card-details,
-    .minimize-card-details
-      font-size: 24px
-      padding: 5px 10px 5px 10px
-      margin-right: -8px
-
-    .close-card-details-mobile-web
-      font-size: 24px
-      padding: 5px
-      margin-right: 40px
-
-    .card-copy-button
-      font-size: 17px
-      padding: 10px
-      margin-right: 10px
-
-    .card-copy-mobile-button
-      font-size: 17px
-      padding: 10px
-      margin-right: 10px
-
-    .card-details-menu
-      font-size: 17px
-      padding: 10px
-
-    .card-details-menu-mobile-web
-      font-size: 17px
-      padding: 10px
-      margin-right: 30px
-
-    .card-details-watch
-      font-size: 17px
-      padding-left: 7px
-      color: #a6a6a6
-
-    .card-details-title
-      font-weight: bold
-      font-size: 1.33em
-      margin: 7px 0 0
-      padding: 0
-
-    .linked-card-location
-      font-style: italic
-      font-size: 1em
-      margin-bottom: 0
-      & p
-        margin-bottom: 0
-
-    form.inlined-form
-      margin-top: 5px
-      margin-bottom: 10px
-
-      .copied-tooltip
-        padding: 0px 10px
-
-    .card-details-list
-      font-size: 0.85em
-      margin-bottom: 3px
-
-      a.card-details-list-title
-        font-weight: bold
-
-        &.is-editable
-          display: inline-block
-          background: darken(white, 10%)
-          border-radius: 3px
-          padding: 0px 5px
-
-    .copied-tooltip
-      margin-right: 10px
-      padding: 10px;
-
-  .card-description textarea
-    min-height: 100px
-
-  .card-details-items
-    display: flex
-    flex-wrap: wrap
-    margin: 15px 0
-
-    .card-details-item
-      margin-right: 0.5em
-      flex-grow: 1
-      &:last-child
-        margin-right: 0
-      &.card-details-item-labels
-        display: block
-        word-wrap: break-word
-        max-width: 95%
-      &.card-details-item-members,
-      &.card-details-item-assignees,
-      &.card-details-item-customfield,
-      &.card-details-item-name
-        display: block
-        word-wrap: break-word
-        max-width: 36%
-      &.card-details-item-creator,
-      &.card-details-item-received,
-      &.card-details-item-start,
-      &.card-details-item-due,
-      &.card-details-item-end
-        display: block
-        word-wrap: break-word
-        max-width: 28%
-      &.custom-fields
-        padding-left: 10px
-
-
-  .card-details-item-title
-    font-size: 16px
-    font-weight: bold
-    color: #4d4d4d
-
-  .activities
-    padding-top: 10px
-
-@media screen and (min-width: 801px)
-  .card-details-maximized
-    padding: 0
-    flex-shrink: 0
-    flex-basis: calc(100% - 20px)
-    will-change: flex-basis
-    overflow-y: scroll
-    overflow-x: scroll
-    background: darken(white, 3%)
-    border-radius: bottom 3px
-    z-index: 100
-    animation: flexGrowIn 0.1s
-    box-shadow: 0 0 7px 0 darken(white, 30%)
-    transition: flex-basis 0.1s
-    box-sizing: border-box
-    position: absolute
-    top: 0
-    left: 0
-    height: calc(100% - 20px)
-    width: calc(100% - 20px)
-    float: left
-
-    .card-details-left
-      float: left
-      top: 60px
-      left: 20px
-      width: 47%
-      border-right: solid 2px #dbdbdb
-      padding-right: 10px
-
-    .card-details-right
-      position: absolute
-      float: right
-      left: 50%
-      margin: 15px 0
-
-    .card-details-header
-      width: 100%
-
-input[type="text"].attachment-add-link-input
-  float: left
-  margin: 0 0 8px
-  width: 80%
-
-input[type="submit"].attachment-add-link-submit
-  float: left
-  margin: 0 0 8px 4px
-  padding: 6px 12px
-  width: 18%
-
-@media screen and (max-width: 800px)
-  .card-details
-    width: calc(100% - 1px)
-    padding: 0px 20px 0px 20px
-    margin: 0px
-    transition: none
-    overflow-y: revert
-    overflow-x: revert
-
-    .card-details-canvas
-      width: 100%
-      padding-left: 0px
-
-    .card-details-header
-      .close-card-details
-        margin-right: 0px
-
-      .card-details-menu
-        margin-right: 40px
-
-      .maximize-card-details
-        margin-right: 40px
-
-      .minimize-card-details
-        margin-right: 40px
-
-  .card-details-popup
-    padding: 0px 10px
-
-  .pop-over > .content-wrapper > .popup-container-depth-0
-    width: 100%
-
-    & > .content
-      width: calc(100% - 10px)
-
-    & > .content > .card-details-popup hr
-        margin: 15px 0px
-
-      .card-details-header
-        margin: 0
-
-card-details-color(background, color...)
-  background: background !important
-  if color
-    color: color !important //overwrite text for better visibility
-
-.card-details-white
-  card-details-color(unset, #000) //Black text for better visibility
-  border: 1px solid #eee
-
-.card-details-green
-  card-details-color(#3cb500, #ffffff) //White text for better visibility
-
-.card-details-yellow
-  card-details-color(#fad900, #000) //Black text for better visibility
-
-.card-details-orange
-  card-details-color(#ff9f19, #000) //Black text for better visibility
-
-.card-details-red
-  card-details-color(#eb4646, #ffffff) //White text for better visibility
-
-.card-details-purple
-  card-details-color(#a632db, #ffffff) //White text for better visibility
-
-.card-details-blue
-  card-details-color(#0079bf, #ffffff) //White text for better visibility
-
-.card-details-pink
-  card-details-color(#ff78cb, #000) //Black text for better visibility
-
-.card-details-sky
-  card-details-color(#00c2e0, #ffffff) //White text for better visibility
-
-.card-details-black
-  card-details-color(#4d4d4d, #ffffff) //White text for better visibility
-
-.card-details-lime
-  card-details-color(#51e898, #000) //Black text for better visibility
-
-.card-details-silver
-  card-details-color(#c0c0c0, #000) //Black text for better visibility
-
-.card-details-peachpuff
-  card-details-color(#ffdab9, #000) //Black text for better visibility
-
-.card-details-crimson
-  card-details-color(#dc143c, #ffffff) //White text for better visibility
-
-.card-details-plum
-  card-details-color(#dda0dd, #000) //Black text for better visibility
-
-.card-details-darkgreen
-  card-details-color(#006400, #ffffff) //White text for better visibility
-
-.card-details-slateblue
-  card-details-color(#6a5acd, #ffffff) //White text for better visibility
-
-.card-details-magenta
-  card-details-color(#ff00ff, #ffffff) //White text for better visibility
-
-.card-details-gold
-  card-details-color(#ffd700, #000) //Black text for better visibility
-
-.card-details-navy
-  card-details-color(#000080, #ffffff) //White text for better visibility
-
-.card-details-gray
-  card-details-color(#808080, #ffffff) //White text for better visibility
-
-.card-details-saddlebrown
-  card-details-color(#8b4513, #ffffff) //White text for better visibility
-
-.card-details-paleturquoise
-  card-details-color(#afeeee, #000) //Black text for better visibility
-
-.card-details-mistyrose
-  card-details-color(#ffe4e1, #000) //Black text for better visibility
-
-.card-details-indigo
-  card-details-color(#4b0082, #ffffff) //White text for better visibility
-
-.voted
-  opacity: .7
-.vote-title
-  display: flex
-  justify-content: space-between
-
-  .js-edit-date
-    align-self: baseline
-    margin-left: 5px
-
-.vote-result
-  display: flex
-.js-show-positive-votes
-  cursor: pointer
-
-.poker-voted
-  opacity: .7
-
-.poker-title
-  display: flex
-  justify-content: space-between
-
-  .js-edit-date
-    align-self: baseline
-    margin-left: 5px
-
-.poker-result
-  display: flex
-  flex-flow: row wrap
-.js-show-positive-poker-votes
-  cursor: pointer
-
-.poker-deck
-  display: grid
-  flex-direction: column
-  text-align: center
-
-.poker-card-result
-  width: 32px
-  font-size: 1em
-  font-weight: bold
-  padding: 4px 2px 4px 2px
-  cursor: default
-
-.winner
-  font-weight: bold
-  outline: #2d2d2d solid 2px
-
-.loser
-  opacity: .5
-
-.responsive-table
-  overflow-x: auto
-
-.poker-table
-  display: table
-  width: 100%
-  padding-top: 10px
-
-.poker-table-row
-  display: table-row
-
-.poker-table-heading
-  background-color: #EEE
-  display: table-header-group
-
-.poker-table-cell
-  display: table-cell
-  padding: 0 0 5px 2px
-  border-bottom: 1px solid #d2d0d0
-  text-align: center
-  min-width: 45px
-
-.poker-table-cell-who
-  width: 150px
-  vertical-align: middle
-
-.poker-table-heading-left,
-.poker-table-heading-right
-  display: table-header-group
-  font-weight: bold
-  border-top: 1px solid #808080
-
-@media (max-width: 400px)
-  .poker-table-heading-right
-    display: none
-
-.poker-table-body
-  display: table-row-group
-
-.poker-table-side-left,
-.poker-table-side-right
-  display: inline-block
-
-.poker-table-side-right
-  padding-left: 10px
-
-@media (max-width: 400px)
-  .poker-table-side-right
-    padding-left: 0px
-
-.estimation-add
-  display: block
-  overflow: auto
-  margin-top: 15px
-  margin-bottom: 5px
-  input
-    display: inline-block
-    float: right
-    margin: auto
-    margin-right: 10px
-    width: 100px
-  button
-    display: inline-block
-    float: right
-    margin: auto
-
-.poker-card
-  width:48px
-  height:72px
-  float:left
-  background:#fff
-  border-radius:5px
-  display:table
-  box-sizing:border-box
-  padding:5px
-  margin:3px
-  font-size:20px
-  font-weight: bold
-  text-shadow: #2d2d2d 1px 1px 0
-  box-shadow:0 0 5px #aaaaaa
-  text-align:center
-  position:relative
-  cursor: pointer
-
-  .inner
-    display:table-cell
-    vertical-align:middle
-    border-radius:5px
-    overflow:hidden
-    background-color: #cecece
-

client/components/cards/cardTime.css

@@ -0,0 +1,18 @@
+.card-time {
+  display: block;
+  border-radius: 4px;
+  padding: 1px 3px;
+  color: #fff;
+  background-color: #dbdbdb;
+}
+.card-time:hover,
+.card-time.is-active {
+  background-color: #b3b3b3;
+}
+.card-time time::before {
+  font: normal normal normal 14px/1 FontAwesome;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  content: "\f017";
+  margin-right: 0.3em;
+}

client/components/cards/cardTime.js

@@ -1,3 +1,5 @@
+import { TAPi18n } from '/imports/i18n';
+
 BlazeComponent.extendComponent({
   template() {
     return 'editCardSpentTime';

client/components/cards/cardTime.styl

@@ -1,17 +0,0 @@
-.card-time
-  display: block
-  border-radius: 4px
-  padding: 1px 3px
-  color: #fff
-
-  background-color: #dbdbdb
-  &:hover, &.is-active
-    background-color: #b3b3b3
-
-  time
-    &::before
-      font: normal normal normal 14px/1 FontAwesome
-      font-size: inherit
-      -webkit-font-smoothing: antialiased
-      content: "\f017"  // clock symbol
-      margin-right: 0.3em

client/components/cards/checklists.css

@@ -0,0 +1,173 @@
+.js-add-checklist {
+  color: #8c8c8c;
+}
+textarea.js-add-checklist-item,
+textarea.js-edit-checklist-item {
+  overflow: hidden;
+  word-wrap: break-word;
+  resize: none;
+  height: 34px;
+}
+.delete-text,
+.js-delete-checklist-item,
+.js-convert-checklist-item-to-card {
+  color: #8c8c8c;
+  text-decoration: underline;
+  word-wrap: break-word;
+  float: right;
+  padding-top: 6px;
+}
+.delete-text:hover,
+.js-delete-checklist-item:hover,
+.js-convert-checklist-item-to-card:hover {
+  color: inherit;
+}
+.checklists-title {
+  display: flex;
+  justify-content: space-between;
+}
+.checklist-progress-bar-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.checklist-progress-bar-container .checklist-progress-text {
+  margin-right: 10px;
+}
+.checklist-progress-bar-container .checklist-progress-bar {
+  width: 80%;
+  height: 10px;
+}
+.checklist-progress-bar-container .checklist-progress-bar .checklist-progress {
+  color: #fff !important;
+  background-color: #2196f3 !important;
+  padding: 0.01em 16px;
+  border-radius: 16px;
+  height: 100%;
+}
+.checklist-title .checkbox {
+  float: left;
+  width: 30px;
+  height: 30px;
+  font-size: 18px;
+  line-height: 30px;
+}
+.checklist-title .title {
+  font-size: 18px;
+  line-height: 25px;
+}
+.checklist-title .checklist-stat {
+  margin: 0 0.5em;
+  float: right;
+  padding-top: 6px;
+}
+.checklist-title .checklist-stat.is-finished {
+  color: #3cb500;
+}
+.checklist-title span.fa.checklist-handle {
+  padding-right: 20px;
+  padding-top: 3px;
+  float: left;
+}
+#card-details-overlay {
+  top: 0;
+  bottom: -600px;
+  right: 0;
+}
+.checklist {
+  background: #f7f7f7;
+}
+.checklist.placeholder {
+  background: #ccc;
+  border-radius: 2px;
+}
+.checklist.ui-sortable-helper {
+  box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
+  transform: rotate(4deg);
+  cursor: grabbing;
+}
+.checklist-item {
+  margin: 0 0 0 0.1em;
+  line-height: 18px;
+  font-size: 1.1em;
+  margin-top: 3px;
+  display: flex;
+  background: #f7f7f7;
+  opacity: 1;
+  transition: height 0ms 400ms, opacity 400ms 0ms;
+  height: auto;
+  overflow: hidden;
+}
+.checklist-item.is-checked.invisible {
+  opacity: 0;
+  height: 0;
+  transition: height 0ms 0ms, opacity 600ms 0ms;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.checklist-item.placeholder {
+  background: #ccc;
+  border-radius: 2px;
+}
+.checklist-item.ui-sortable-helper {
+  box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
+  transform: rotate(4deg);
+  cursor: grabbing;
+}
+.checklist-item:hover {
+  background-color: #ebebeb;
+}
+.checklist-item .check-box-container {
+  padding-right: 10px;
+}
+.checklist-item .check-box {
+  margin: 0.1em 0 0 0;
+}
+.checklist-item .check-box.is-checked {
+  border-bottom: 2px solid #3cb500;
+  border-right: 2px solid #3cb500;
+}
+.checklist-item .item-title {
+  flex: 1;
+}
+.checklist-item .item-title.is-checked {
+  color: #8c8c8c;
+  font-style: italic;
+  text-decoration: line-through;
+}
+.checklist-item .item-title .viewer p {
+  margin-bottom: 2px;
+  display: block;
+  word-wrap: break-word;
+  max-width: 420px;
+}
+.checklist-item span.fa.checklistitem-handle {
+  padding-top: 2px;
+  padding-right: 10px;
+}
+.js-delete-checklist-item,
+.js-convert-checklist-item-to-card {
+  margin: 0 0 0.5em 1.33em;
+  padding: 12px 0 0 0;
+}
+.add-checklist-item {
+  margin: 0.2em 0 0.5em 1.33em;
+}
+.add-checklist-item.js-open-inlined-form,
+.add-checklist.js-open-inlined-form {
+  display: block;
+  width: 50%;
+}
+.add-checklist-item.js-open-inlined-form:hover,
+.add-checklist.js-open-inlined-form:hover {
+  background: #dbdbdb;
+  color: #222;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}
+.checklist-details-menu {
+  float: right;
+  padding: 6px 10px 6px 10px;
+}
+.edit-controls label.toggle-label {
+  margin-left: 2px;
+}

client/components/cards/checklists.js

@@ -1,3 +1,4 @@
+import { TAPi18n } from '/imports/i18n';
 import Cards from '/models/cards';
 import Boards from '/models/boards';
 

client/components/cards/checklists.styl

@@ -1,168 +0,0 @@
-.js-add-checklist
-  color: #8c8c8c
-
-textarea.js-add-checklist-item, textarea.js-edit-checklist-item
-  overflow: hidden
-  word-wrap: break-word
-  resize: none
-  height: 34px
-
-.delete-text
-  color: #8c8c8c
-  text-decoration: underline
-  word-wrap: break-word
-  float: right
-  padding-top: 6px
-  &:hover
-    color: inherit
-
-.checklists-title
-  display: flex
-  justify-content: space-between
-
-.checklist-progress-bar-container
-  display: flex
-  flex-direction: row
-  align-items: center
-
-  .checklist-progress-text
-    margin-right: 10px
-
-  .checklist-progress-bar
-    width: 80%
-    height: 10px
-
-    .checklist-progress
-      color: #fff !important
-      background-color: #2196F3 !important
-      padding: 0.01em 16px
-      border-radius: 16px
-      height: 100%
-
-.checklist-title
-  .checkbox
-    float: left
-    width: 30px
-    height 30px
-    font-size: 18px
-    line-height: 30px
-
-  .title
-    font-size: 18px
-    line-height: 25px
-
-  .checklist-stat
-    margin: 0 0.5em
-    float: right
-    padding-top: 6px
-    &.is-finished
-      color: #3cb500
-
-  span.fa.checklist-handle
-    padding-right: 20px
-    padding-top: 3px
-    float: left
-
-#card-details-overlay
-  top: 0
-  bottom: -600px
-  right: 0
-
-.checklist
-  background: darken(white, 3%)
-
-  &.placeholder
-    background: darken(white, 20%)
-    border-radius: 2px
-
-  &.ui-sortable-helper
-    box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
-                0 0 1px rgba(0, 0, 0, .5)
-    transform: rotate(4deg)
-    cursor: grabbing
-
-
-.checklist-item
-  margin: 0 0 0 0.1em
-  line-height: 18px
-  font-size: 1.1em
-  margin-top: 3px
-  display: flex
-  background: darken(white, 3%)
-  opacity: 1
-  transition: height 0ms 400ms, opacity 400ms 0ms
-  height: auto
-  overflow: hidden
-
-  &.is-checked.invisible
-    opacity: 0
-    height: 0
-    transition: height 0ms 0ms, opacity 600ms 0ms
-    margin-top: 0
-    margin-bottom: 0
-
-  &.placeholder
-    background: darken(white, 20%)
-    border-radius: 2px
-
-  &.ui-sortable-helper
-    box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
-                0 0 1px rgba(0, 0, 0, .5)
-    transform: rotate(4deg)
-    cursor: grabbing
-
-  &:hover
-    background-color: darken(white, 8%)
-
-  .check-box-container
-    padding-right: 10px;
-
-  .check-box
-    margin: 0.1em 0 0 0;
-    &.is-checked
-      border-bottom: 2px solid #3cb500
-      border-right: 2px solid #3cb500
-
-  .item-title
-    flex: 1
-    &.is-checked
-      color: #8c8c8c
-      font-style: italic
-      text-decoration: line-through
-    & .viewer
-      p
-        margin-bottom: 2px
-        display: block
-        word-wrap: break-word
-        max-width: 420px
-
-  span.fa.checklistitem-handle
-    padding-top: 2px
-    padding-right: 10px;
-
-.js-delete-checklist-item,
-.js-convert-checklist-item-to-card
-  margin: 0 0 0.5em 1.33em
-  @extends .delete-text
-  padding: 12px 0 0 0
-
-.add-checklist-item
-  margin: 0.2em 0 0.5em 1.33em
-
-.add-checklist-item,.add-checklist
-  &.js-open-inlined-form
-    display: block
-    width: 50%
-
-    &:hover
-      background: #dbdbdb
-      color: #222
-      box-shadow: 0 1px 2px rgba(0,0,0,.2)
-
-.checklist-details-menu
-  float: right
-  padding: 6px 10px 6px 10px
-
-.edit-controls
-  label.toggle-label
-    margin-left: 2px

client/components/cards/labels.css

@@ -0,0 +1,230 @@
+.card-label {
+  border: 1px solid #000;
+  border-radius: 4px;
+  color: #fff;
+  display: inline-block;
+  font-weight: 700;
+  font-size: 13px;
+  margin-right: 4px;
+  margin-bottom: 5px;
+  padding: 3px 8px;
+  max-width: 210px;
+  min-width: 8px;
+  word-wrap: break-word;
+  min-height: 18px;
+  vertical-align: middle;
+  white-space: initial;
+  overflow: initial;
+}
+.card-label:hover {
+  color: #fff;
+}
+.card-label.square {
+  height: 30px;
+  width: 30px;
+  padding: 0;
+}
+.card-label.add-label {
+  box-shadow: 0 0 0 2px #bfbfbf inset;
+  border: initial;
+}
+.card-label.add-label:hover,
+.card-label.add-label.is-active {
+  box-shadow: 0 0 0 2px #666 inset;
+}
+.card-label p {
+  margin: 0px;
+}
+.palette-colors {
+  display: flex;
+  flex-wrap: wrap;
+}
+.palette-colors .palette-color {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.card-label-white {
+  background-color: #fff;
+  color: #000;
+}
+.card-label-white:hover {
+  color: #aaa;
+}
+.card-label-green {
+  background-color: #3cb500;
+}
+.card-label-green:hover {
+  color: #000;
+}
+.card-label-yellow {
+  background-color: #fad900;
+  color: #000;
+}
+.card-label-orange {
+  background-color: #ff9f19;
+  color: #000;
+}
+.card-label-red {
+  background-color: #eb4646;
+}
+.card-label-purple {
+  background-color: #a632db;
+}
+.card-label-blue {
+  background-color: #0079bf;
+}
+.card-label-pink {
+  background-color: #ff78cb;
+  color: #000;
+}
+.card-label-sky {
+  background-color: #00c2e0;
+}
+.card-label-black {
+  background-color: #4d4d4d;
+}
+.card-label-lime {
+  background-color: #51e898;
+  color: #000;
+}
+.card-label-silver {
+  background-color: #c0c0c0;
+  color: #000;
+}
+.card-label-peachpuff {
+  background-color: #ffdab9;
+  color: #000;
+}
+.card-label-crimson {
+  background-color: #dc143c;
+}
+.card-label-plum {
+  background-color: #dda0dd;
+  color: #000;
+}
+.card-label-darkgreen {
+  background-color: #006400;
+}
+.card-label-slateblue {
+  background-color: #6a5acd;
+}
+.card-label-magenta {
+  background-color: #f0f;
+}
+.card-label-gold {
+  background-color: #ffd700;
+  color: #000;
+}
+.card-label-navy {
+  background-color: #000080;
+}
+.card-label-gray {
+  background-color: #808080;
+}
+.card-label-saddlebrown {
+  background-color: #8b4513;
+}
+.card-label-paleturquoise {
+  background-color: #afeeee;
+  color: #000;
+}
+.card-label-mistyrose {
+  background-color: #ffe4e1;
+  color: #000;
+}
+.card-label-indigo {
+  background-color: #4b0082;
+}
+.edit-label .card-label,
+.create-label .card-label {
+  float: left;
+  height: 25px;
+  margin: 0px 3% 7px 0px;
+  width: 10.5%;
+  max-width: 10.5%;
+  cursor: pointer;
+}
+.edit-labels input[type="text"] {
+  margin: 4px 0 6px 38px;
+  width: 243px;
+}
+.edit-labels .card-label {
+  height: 30px;
+  left: 0;
+  padding: 1px 5px;
+  position: absolute;
+  top: 0;
+  width: 24px;
+}
+.edit-labels .labels-static .card-label {
+  line-height: 30px;
+  margin-bottom: 4px;
+  position: relative;
+  top: auto;
+  left: 0;
+  width: 260px;
+}
+.edit-labels-pop-over {
+  margin-bottom: 8px;
+}
+.edit-labels-pop-over .card-label .viewer p {
+  margin: 0;
+}
+.edit-labels-pop-over .shortcut {
+  display: inline-block;
+}
+.card-label-selectable {
+  border-radius: 3px;
+  cursor: pointer;
+  margin: 0;
+  margin-bottom: 3px;
+  width: 190px;
+  min-height: 18px;
+  padding: 8px;
+  position: relative;
+  transition: margin-right 0.1s;
+}
+.card-label-selectable .card-label-selectable-icon {
+  position: absolute;
+  top: 8px;
+  right: -20px;
+}
+.card-label-selectable.active:hover,
+.card-label-selectable.active,
+.card-label-selectable.active.selected:hover,
+.card-label-selectable.active.selected {
+  padding-right: 32px;
+}
+.card-label-selectable.active:hover .card-label-selectable-icon,
+.card-label-selectable.active .card-label-selectable-icon,
+.card-label-selectable.active.selected:hover .card-label-selectable-icon,
+.card-label-selectable.active.selected .card-label-selectable-icon {
+  right: 6px;
+}
+.card-label-selectable.selected,
+.card-label-selectable:hover {
+  opacity: 0.8;
+}
+.active .card-label-selectable,
+.active .card-label-selectable:hover {
+  margin-right: 0;
+}
+.active .card-label-selectable .card-label-selectable-icon {
+  right: 8px;
+}
+.card-label-edit-button {
+  border-radius: 3px;
+  float: right;
+  padding: 8px;
+}
+.card-label-edit-button:hover {
+  background: #dbdbdb;
+}
+ul.edit-labels-pop-over span.fa.label-handle {
+  padding-right: 10px;
+}
+ul.edit-labels-pop-over span.fa.label-handle + .card-label {
+  max-width: 180px;
+}

client/components/cards/labels.styl

@@ -1,231 +0,0 @@
-@import 'nib'
-
-// XXX Use .board-widget-labels as a flexbox container
-.card-label
-  border: 1px solid #000000
-  border-radius: 4px
-  color: white  //Default white text, in select cases,  changed to black to improve contrast between label colour and text
-  display: inline-block
-  font-weight: 700
-  font-size: 13px
-  margin-right: 4px
-  margin-bottom: 5px
-  padding: 3px 8px
-  max-width: 210px
-  min-width: 8px
-  word-wrap: break-word
-  min-height: 18px
-  vertical-align: middle
-  white-space: initial
-  overflow: initial
-
-  &:hover
-    color: white
-
-  &.square
-    height: 30px
-    width: @height
-    padding: 0
-
-  &.add-label
-    box-shadow: 0 0 0 2px darken(white, 25%) inset
-    border: initial
-
-    &:hover, &.is-active
-      box-shadow: 0 0 0 2px darken(white, 60%) inset
-
-  p
-    margin: 0px
-
-.palette-colors
-  display: flex
-  flex-wrap: wrap
-
-  .palette-color
-    flex-grow: 1
-    display: flex
-    align-items: center
-    justify-content: center
-
-.card-label-white
-  background-color: #ffffff
-  color: #000000 //Black text for better visibility
-
-.card-label-white:hover
-  color: #aaaaaa //grey text for better visibility
-
-.card-label-green
-  background-color: #3cb500
-
-.card-label-green:hover
-  color: #000000 //Black hover text for better visibility
-
-.card-label-yellow
-  background-color: #fad900
-  color: #000000 //Black text for better visibility
-
-.card-label-orange
-  background-color: #ff9f19
-  color: #000000 //Black text for better visibility
-
-.card-label-red
-  background-color: #eb4646
-
-.card-label-purple
-  background-color: #a632db
-
-.card-label-blue
-  background-color: #0079bf
-
-.card-label-pink
-  background-color: #ff78cb
-  color: #000000 //Black text for better visibility
-
-.card-label-sky
-  background-color: #00c2e0
-
-.card-label-black
-  background-color: #4d4d4d
-
-.card-label-lime
-  background-color: #51e898
-  color: #000000 //Black text for better visibility
-
-.card-label-silver
-  background-color: #c0c0c0
-  color: #000000 //Black text for better visibility
-
-.card-label-peachpuff
-  background-color: #ffdab9
-  color: #000000 //Black text for better visibility
-
-.card-label-crimson
-  background-color: #dc143c
-
-.card-label-plum
-  background-color: #dda0dd
-  color: #000000 //Black text for better visibility
-
-.card-label-darkgreen
-  background-color: #006400
-
-.card-label-slateblue
-  background-color: #6a5acd
-
-.card-label-magenta
-  background-color: #ff00ff
-
-.card-label-gold
-  background-color: #ffd700
-  color: #000000 //Black text for better visibility
-
-.card-label-navy
-  background-color: #000080
-
-.card-label-gray
-  background-color: #808080
-
-.card-label-saddlebrown
-  background-color: #8b4513
-
-.card-label-paleturquoise
-  background-color: #afeeee
-  color: #000000 //Black text for better visibility
-
-.card-label-mistyrose
-  background-color: #ffe4e1
-  color: #000000 //Black text for better visibility
-
-.card-label-indigo
-  background-color: #4b0082
-
-.edit-label,
-.create-label
-  .card-label
-    float: left
-    height: 25px
-    margin: 0px 3% 7px 0px
-    width: 10.5%
-    max-width: 10.5%
-    cursor: pointer
-
-.edit-labels
-  input[type="text"]
-    margin: 4px 0 6px 38px
-    width: 243px
-
-  .card-label
-    height: 30px
-    left: 0
-    padding: 1px 5px
-    position: absolute
-    top: 0
-    width: 24px
-
-  .labels-static .card-label
-    line-height: 30px
-    margin-bottom: 4px
-    position: relative
-    top: auto
-    left: 0
-    width: 260px
-
-.edit-labels-pop-over
-  margin-bottom: 8px
-  .card-label .viewer p
-    margin: 0
-
-.edit-labels-pop-over .shortcut
-  display: inline-block
-
-.card-label-selectable
-  border-radius: 3px
-  cursor: pointer
-  margin: 0
-  margin-bottom: 3px
-  width: 190px
-  min-height: 18px
-  padding: 8px
-  position: relative
-  transition: margin-right .1s
-
-  .card-label-selectable-icon
-    position: absolute
-    top: 8px
-    right: -20px
-
-  &.active:hover,
-  &.active,
-  &.active.selected:hover,
-  &.active.selected
-    padding-right: 32px
-
-    .card-label-selectable-icon
-      right: 6px
-
-  &.selected,
-  &:hover
-    opacity: .8
-
-.active .card-label-selectable
-  &,
-  &:hover
-    margin-right: 0
-
-  .card-label-selectable-icon
-    right: 8px
-
-.card-label-edit-button
-  border-radius: 3px
-  float: right
-  padding: 8px
-
-  &:hover
-    background: #dbdbdb
-
-ul.edit-labels-pop-over
-  span.fa.label-handle
-    padding-right: 10px;
-
-  span.fa.label-handle + .card-label
-    max-width: 180px

client/components/cards/minicard.css

@@ -0,0 +1,550 @@
+.minicard-wrapper {
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-bottom: 9px;
+}
+.minicard-wrapper.placeholder {
+  background: #ccc;
+  border-radius: 9px;
+}
+.minicard-wrapper.ui-sortable-helper {
+  cursor: grabbing;
+  transform: rotate(4deg);
+  display: block !important;
+}
+.minicard-wrapper.ui-sortable-helper .and-n-other {
+  width: 100%;
+  height: 16px;
+  padding: 4px;
+  background-color: #f2f2f2;
+  text-align: center;
+  border-radius: 3px;
+}
+.minicard-wrapper.ui-sortable-helper .multi-selection-checkbox {
+  display: none;
+}
+.minicard-wrapper .multi-selection-checkbox + .minicard {
+  margin-left: 8px;
+}
+.minicard {
+  padding: 6px 8px 2px;
+  position: relative;
+  flex: 1;
+  flex-wrap: wrap;
+  background-color: #fff;
+  min-height: 20px;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+  border-radius: 2px;
+  color: #4d4d4d;
+  overflow: hidden;
+  transition: transform 0.2s, border-radius 0.2s;
+}
+.minicard.linked-board .linked-icon,
+.minicard.linked-card .linked-icon {
+  display: inline-block;
+  margin-right: 11px;
+  vertical-align: baseline;
+  font-size: 0.9em;
+}
+.minicard.linked-board .linked-archived,
+.minicard.linked-card .linked-archived {
+  color: #937760;
+}
+.is-selected .minicard {
+  transform: translateX(11px);
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  z-index: 25;
+  box-shadow: -2px 1px 2px rgba(0,0,0,0.2);
+}
+.minicard:hover:not(.minicard-composer),
+.is-selected .minicard,
+.draggable-hover-card .minicard {
+  background: #f7f7f7;
+}
+.draggable-hover-card .minicard {
+  background: #ededed;
+}
+.minicard .minicard-cover {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 145px;
+  user-select: none;
+  margin: -6px -8px 6px -8px;
+  border-radius: top 2px;
+}
+.minicard .minicard-labels {
+  float: none;
+}
+.minicard .minicard-labels .minicard-label {
+  width: 11px;
+  height: 11px;
+  border-radius: 2px;
+  margin-right: 3px;
+  margin-bottom: 3px;
+}
+.minicard .minicard-labels-no-text {
+  display: flex;
+  flex-wrap: wrap;
+}
+.minicard .minicard-custom-fields {
+  display: block;
+}
+.minicard .minicard-custom-field {
+  display: flex;
+}
+.minicard .minicard-custom-field-item {
+  flex-grow: 1;
+  display: block;
+  word-wrap: break-word;
+  max-width: 100px;
+  margin-right: 4px;
+}
+.minicard .handle {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  display: none;
+}
+@media only screen {
+  .minicard .handle {
+    display: block;
+  }
+}
+.minicard .handle .fa-arrows {
+  font-size: 20px;
+  color: #ccc;
+}
+.minicard .minicard-title .card-number {
+  color: #b3b3b3;
+  display: inline-block;
+  margin-right: 5px;
+}
+.minicard .minicard-title p:last-child {
+  margin-bottom: 0;
+}
+.minicard .minicard-title .viewer {
+  display: block;
+  word-wrap: break-word;
+  max-width: 230px;
+}
+.minicard .dates {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.minicard .date {
+  margin-right: 3px;
+}
+.minicard .badges {
+  float: left;
+  margin-top: 7px;
+  color: #808080;
+}
+.minicard .badges:empty {
+  display: none;
+}
+.minicard .badges .badge {
+  float: left;
+  margin-right: 11px;
+  margin-bottom: 3px;
+  font-size: 0.9em;
+}
+.minicard .badges .badge.is-finished {
+  background: #3cb500;
+  padding: 0px 3px;
+  border-radius: 3px;
+  color: #fff;
+}
+.minicard .badges .badge:last-of-type {
+  margin-right: 0;
+}
+.minicard .badges .badge .badge-icon,
+.minicard .badges .badge .badge-text {
+  vertical-align: middle;
+}
+.minicard .badges .badge .badge-icon.badge-comment,
+.minicard .badges .badge .badge-text.badge-comment {
+  margin-bottom: 0.1rem;
+}
+.minicard .badges .badge .badge-text {
+  font-size: 0.9em;
+  padding-left: 2px;
+  line-height: 14px;
+}
+.minicard .badges .badge .check-list-text {
+  padding-left: 0px;
+  line-height: 12px;
+}
+.minicard .minicard-members,
+.minicard .minicard-assignees,
+.minicard .minicard-creator {
+  float: right;
+  margin-left: 5px;
+  margin-bottom: 4px;
+}
+.minicard .minicard-members .member,
+.minicard .minicard-assignees .member,
+.minicard .minicard-creator .member {
+  float: right;
+  border-radius: 50%;
+  height: 28px;
+  width: 28px;
+  margin-bottom: 4px;
+}
+.minicard .minicard-members .assignee,
+.minicard .minicard-assignees .assignee,
+.minicard .minicard-creator .assignee {
+  float: right;
+  border-radius: 50%;
+  height: 28px;
+  width: 28px;
+}
+.minicard .minicard-members + .badges,
+.minicard .minicard-assignees + .badges,
+.minicard .minicard-creator + .badges {
+  margin-top: 5px;
+}
+.minicard .minicard-assignees {
+  border-bottom: 1px solid #f00;
+}
+.minicard .minicard-creator {
+  border-bottom: 1px solid #008000;
+}
+.minicard .minicard-members:empty,
+.minicard .minicard-assignees:empty {
+  display: none;
+}
+.minicard .minicard-description {
+  padding: 6px 0 6px 8px;
+  background-color: #eee;
+  width: 100%;
+  margin-bottom: 2px;
+  margin-left: -4px;
+  border-radius: 3px;
+  display: inline-block;
+}
+.minicard.minicard-composer {
+  margin-bottom: 10px;
+}
+.minicard.minicard-composer textarea.minicard-composer-textarea,
+.minicard.minicard-composer textarea.minicard-composer-textarea:focus {
+  resize: none;
+  background: none;
+  border: none;
+  box-shadow: none;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  max-height: 162px;
+  min-height: 36px;
+  margin-bottom: 20px;
+  overflow-y: auto;
+}
+.parent-prefix {
+  color: #b3b3b3;
+  font-size: 0.9em;
+}
+.parent-subtext {
+  color: #b3b3b3;
+  font-size: 0.9em;
+}
+@media screen and (max-width: 800px) {
+  .is-selected .minicard {
+    transform: translateX(0px);
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    z-index: 15;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+  }
+}
+/* https://github.com/wekan/wekan/issues/4254#issuecomment-1037192960 */
+.minicard-green {
+  background-color: #3cb500 !important;
+  color: #fff !important;
+}
+.minicard-green:hover:not(.minicard-composer),
+.is-selected .minicard-green,
+.draggable-hover-card .minicard-green {
+  background: #3ab000;
+}
+.draggable-hover-card .minicard-green {
+  background: #38a800;
+}
+.minicard-yellow {
+  background-color: #fad900 !important;
+}
+.minicard-yellow:hover:not(.minicard-composer),
+.is-selected .minicard-yellow,
+.draggable-hover-card .minicard-yellow {
+  background: #f3d200;
+}
+.draggable-hover-card .minicard-yellow {
+  background: #e9ca00;
+}
+.minicard-orange {
+  background-color: #ff9f19 !important;
+}
+.minicard-orange:hover:not(.minicard-composer),
+.is-selected .minicard-orange,
+.draggable-hover-card .minicard-orange {
+  background: #ff9b11;
+}
+.draggable-hover-card .minicard-orange {
+  background: #ff9705;
+}
+.minicard-red {
+  background-color: #eb4646 !important;
+  color: #fff !important;
+}
+.minicard-red:hover:not(.minicard-composer),
+.is-selected .minicard-red,
+.draggable-hover-card .minicard-red {
+  background: #ea3e3e;
+}
+.draggable-hover-card .minicard-red {
+  background: #e93333;
+}
+.minicard-purple {
+  background-color: #a632db !important;
+  color: #fff !important;
+}
+.minicard-purple:hover:not(.minicard-composer),
+.is-selected .minicard-purple,
+.draggable-hover-card .minicard-purple {
+  background: #a32bda;
+}
+.draggable-hover-card .minicard-purple {
+  background: #9e25d5;
+}
+.minicard-blue {
+  background-color: #0079bf !important;
+  color: #fff !important;
+}
+.minicard-blue:hover:not(.minicard-composer),
+.is-selected .minicard-blue,
+.draggable-hover-card .minicard-blue {
+  background: #0075b9;
+}
+.draggable-hover-card .minicard-blue {
+  background: #0071b2;
+}
+.minicard-pink {
+  background-color: #ff78cb !important;
+}
+.minicard-pink:hover:not(.minicard-composer),
+.is-selected .minicard-pink,
+.draggable-hover-card .minicard-pink {
+  background: #ff6dc7;
+}
+.draggable-hover-card .minicard-pink {
+  background: #ff5ec1;
+}
+.minicard-sky {
+  background-color: #00c2e0 !important;
+  color: #fff !important;
+}
+.minicard-sky:hover:not(.minicard-composer),
+.is-selected .minicard-sky,
+.draggable-hover-card .minicard-sky {
+  background: #00bcd9;
+}
+.draggable-hover-card .minicard-sky {
+  background: #00b4d0;
+}
+.minicard-black {
+  background-color: #4d4d4d !important;
+  color: #fff !important;
+}
+.minicard-black:hover:not(.minicard-composer),
+.is-selected .minicard-black,
+.draggable-hover-card .minicard-black {
+  background: #4b4b4b;
+}
+.draggable-hover-card .minicard-black {
+  background: #484848;
+}
+.minicard-lime {
+  background-color: #51e898 !important;
+}
+.minicard-lime:hover:not(.minicard-composer),
+.is-selected .minicard-lime,
+.draggable-hover-card .minicard-lime {
+  background: #49e793;
+}
+.draggable-hover-card .minicard-lime {
+  background: #3ee58d;
+}
+.minicard-silver {
+  background-color: #c0c0c0 !important;
+}
+.minicard-silver:hover:not(.minicard-composer),
+.is-selected .minicard-silver,
+.draggable-hover-card .minicard-silver {
+  background: #bababa;
+}
+.draggable-hover-card .minicard-silver {
+  background: #b3b3b3;
+}
+.minicard-peachpuff {
+  background-color: #ffdab9 !important;
+}
+.minicard-peachpuff:hover:not(.minicard-composer),
+.is-selected .minicard-peachpuff,
+.draggable-hover-card .minicard-peachpuff {
+  background: #ffd3ac;
+}
+.draggable-hover-card .minicard-peachpuff {
+  background: #ffca9a;
+}
+.minicard-crimson {
+  background-color: #dc143c !important;
+  color: #fff !important;
+}
+.minicard-crimson:hover:not(.minicard-composer),
+.is-selected .minicard-crimson,
+.draggable-hover-card .minicard-crimson {
+  background: #d5133a;
+}
+.draggable-hover-card .minicard-crimson {
+  background: #cd1338;
+}
+.minicard-plum {
+  background-color: #dda0dd !important;
+}
+.minicard-plum:hover:not(.minicard-composer),
+.is-selected .minicard-plum,
+.draggable-hover-card .minicard-plum {
+  background: #da98da;
+}
+.draggable-hover-card .minicard-plum {
+  background: #d68cd6;
+}
+.minicard-darkgreen {
+  background-color: #006400 !important;
+  color: #fff !important;
+}
+.minicard-darkgreen:hover:not(.minicard-composer),
+.is-selected .minicard-darkgreen,
+.draggable-hover-card .minicard-darkgreen {
+  background: #006100;
+}
+.draggable-hover-card .minicard-darkgreen {
+  background: #005d00;
+}
+.minicard-slateblue {
+  background-color: #6a5acd !important;
+  color: #fff !important;
+}
+.minicard-slateblue:hover:not(.minicard-composer),
+.is-selected .minicard-slateblue,
+.draggable-hover-card .minicard-slateblue {
+  background: #6453cb;
+}
+.draggable-hover-card .minicard-slateblue {
+  background: #5c4ac8;
+}
+.minicard-magenta {
+  background-color: #f0f !important;
+  color: #fff !important;
+}
+.minicard-magenta:hover:not(.minicard-composer),
+.is-selected .minicard-magenta,
+.draggable-hover-card .minicard-magenta {
+  background: #f700f7;
+}
+.draggable-hover-card .minicard-magenta {
+  background: #ed00ed;
+}
+.minicard-gold {
+  background-color: #ffd700 !important;
+}
+.minicard-gold:hover:not(.minicard-composer),
+.is-selected .minicard-gold,
+.draggable-hover-card .minicard-gold {
+  background: #f7d100;
+}
+.draggable-hover-card .minicard-gold {
+  background: #edc800;
+}
+.minicard-navy {
+  background-color: #000080 !important;
+  color: #fff !important;
+}
+.minicard-navy:hover:not(.minicard-composer),
+.is-selected .minicard-navy,
+.draggable-hover-card .minicard-navy {
+  background: #00007c;
+}
+.draggable-hover-card .minicard-navy {
+  background: #007;
+}
+.minicard-gray {
+  background-color: #808080 !important;
+  color: #fff !important;
+}
+.minicard-gray:hover:not(.minicard-composer),
+.is-selected .minicard-gray,
+.draggable-hover-card .minicard-gray {
+  background: #7c7c7c;
+}
+.draggable-hover-card .minicard-gray {
+  background: #777;
+}
+.minicard-saddlebrown {
+  background-color: #8b4513 !important;
+  color: #fff !important;
+}
+.minicard-saddlebrown:hover:not(.minicard-composer),
+.is-selected .minicard-saddlebrown,
+.draggable-hover-card .minicard-saddlebrown {
+  background: #874312;
+}
+.draggable-hover-card .minicard-saddlebrown {
+  background: #814012;
+}
+.minicard-paleturquoise {
+  background-color: #afeeee !important;
+}
+.minicard-paleturquoise:hover:not(.minicard-composer),
+.is-selected .minicard-paleturquoise,
+.draggable-hover-card .minicard-paleturquoise {
+  background: #a5ecec;
+}
+.draggable-hover-card .minicard-paleturquoise {
+  background: #97e9e9;
+}
+.minicard-mistyrose {
+  background-color: #ffe4e1 !important;
+}
+.minicard-mistyrose:hover:not(.minicard-composer),
+.is-selected .minicard-mistyrose,
+.draggable-hover-card .minicard-mistyrose {
+  background: #ffd7d3;
+}
+.draggable-hover-card .minicard-mistyrose {
+  background: #ffc6bf;
+}
+.minicard-indigo {
+  background-color: #4b0082 !important;
+  color: #fff !important;
+}
+.minicard-indigo:hover:not(.minicard-composer),
+.is-selected .minicard-indigo,
+.draggable-hover-card .minicard-indigo {
+  background: #49007e;
+}
+.draggable-hover-card .minicard-indigo {
+  background: #460079;
+}
+.text-red {
+  color: #f00;
+}
+.text-green {
+  color: #008000;
+}

client/components/cards/minicard.js

@@ -1,3 +1,5 @@
+import { TAPi18n } from '/imports/i18n';
+
 // Template.cards.events({
 //   'click .member': Popup.open('cardMember')
 // });

client/components/cards/minicard.styl

@@ -1,335 +0,0 @@
-@import 'nib'
-
-.minicard-wrapper
-  cursor: pointer
-  position: relative
-  display: flex
-  align-items: center
-  margin-bottom: 9px
-
-  &.placeholder
-    background: darken(white, 20%)
-    border-radius: 9px
-
-  &.ui-sortable-helper
-    cursor: grabbing
-    transform: rotate(4deg)
-    display: block !important
-
-    .and-n-other
-      width: 100%
-      height: 16px
-      padding: 4px
-      background-color: darken(white, 5%)
-      text-align: center
-      border-radius: 3px
-
-    .multi-selection-checkbox
-      display: none
-
-  .multi-selection-checkbox + .minicard
-    margin-left: 8px
-
-.minicard
-  padding: 6px 8px 2px
-  position: relative
-  flex: 1
-  flex-wrap: wrap
-  background-color: #fff
-  min-height: 20px
-  box-shadow: 0 1px 2px rgba(0,0,0,.15)
-  border-radius: 2px
-  color: #4d4d4d
-  overflow: hidden
-  transition: transform 0.2s,
-              border-radius 0.2s
-
-  &.linked-board
-  &.linked-card
-    .linked-icon
-      display: inline-block
-      margin-right: 11px
-      vertical-align: baseline
-      font-size: 0.9em
-    .linked-archived
-      color: #937760
-
-  .is-selected &
-    transform: translateX(11px)
-    border-bottom-right-radius: 0
-    border-top-right-radius: 0
-    z-index: 25
-    box-shadow: -2px 1px 2px rgba(0,0,0,.2)
-
-  &:hover:not(.minicard-composer),
-  .is-selected &,
-  .draggable-hover-card &
-    background: darken(white, 3%)
-
-  .draggable-hover-card &
-    background: darken(white, 7%)
-
-  .minicard-cover
-    background-position: center
-    background-repeat: no-repeat
-    background-size: contain
-    height: 145px
-    user-select: none
-    margin: -6px -8px 6px -8px
-    border-radius: top 2px
-
-  .minicard-labels
-    float: none
-
-    .minicard-label
-      width: 11px
-      height: @width
-      border-radius: 2px
-      margin-right: 3px
-      margin-bottom: 3px
-
-  .minicard-labels-no-text
-    display: flex
-    flex-wrap: wrap
-
-  .minicard-custom-fields
-    display:block;
-  .minicard-custom-field
-    display:flex;
-  .minicard-custom-field-item
-    flex-grow: 1
-    display: block
-    word-wrap: break-word
-    max-width: 100px
-    margin-right: 4px
-  .handle
-    width: 20px;
-    height: 20px;
-    position: absolute;
-    right: 5px;
-    top: 5px;
-    display:none;
-    @media only screen {
-      display:block;
-    }
-    .fa-arrows
-      font-size:20px;
-      color: #ccc;
-  .minicard-title
-    .card-number
-      color: darken(white, 30%);
-      display: inline-block;
-      margin-right: 5px;
-    p:last-child
-      margin-bottom: 0
-    .viewer
-      display: block
-      word-wrap: break-word
-      max-width: 230px
-  .dates
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-  .date
-    margin-right: 3px
-  .badges
-    float: left
-    margin-top: 7px
-    color: darken(white, 50%)
-
-    &:empty
-      display: none
-
-    .badge
-      float: left
-      margin-right: 11px
-      margin-bottom: 3px
-      font-size: 0.9em
-      &.is-finished
-         background: #3cb500
-         padding: 0px 3px
-         border-radius: 3px
-         color: white
-
-      &:last-of-type
-        margin-right: 0
-
-      .badge-icon,
-      .badge-text
-        vertical-align: middle
-        &.badge-comment
-          margin-bottom: 0.1rem
-
-      .badge-text
-        font-size: 0.9em
-        padding-left: 2px
-        line-height: 14px
-      .check-list-text
-        padding-left: 0px
-        line-height: 12px
-
-  .minicard-members,
-  .minicard-assignees,
-  .minicard-creator
-    float: right
-    margin-left: 5px
-    margin-bottom: 4px
-
-    .member
-      float: right
-      border-radius: 50%
-      height: 28px
-      width: @height
-      margin-bottom: 4px
-
-    .assignee
-      float: right
-      border-radius: 50%
-      height: 28px
-      width: @height
-
-    + .badges
-      margin-top: 5px
-
-  .minicard-assignees
-    border-bottom: 1px solid red
-
-  .minicard-creator
-    border-bottom: 1px solid green
-
-  .minicard-members:empty,
-  .minicard-assignees:empty
-    display: none
-
-  .minicard-description {
-    padding: 6px 0 6px 8px
-    background-color: #eee
-    width: 100%
-    margin-bottom: 2px
-    margin-left: -4px
-    border-radius: 3px
-    display: inline-block
-  }
-
-  &.minicard-composer
-    margin-bottom: 10px
-
-    textarea.minicard-composer-textarea,
-    textarea.minicard-composer-textarea:focus
-      resize: none
-      background: none
-      border: none
-      box-shadow: none
-      height: auto
-      margin: 0
-      padding: 0
-      max-height: 162px
-      min-height: 36px
-      margin-bottom: 20px
-      overflow-y: auto
-
-.parent-prefix
-  color: darken(white, 30%)
-  font-size: 0.9em
-.parent-subtext
-  color: darken(white, 30%)
-  font-size: 0.9em
-
-@media screen and (max-width: 800px)
-  .minicard
-    .is-selected &
-      transform: translateX(0px)
-      border-bottom-right-radius: 0
-      border-top-right-radius: 0
-      z-index: 15
-      box-shadow: 0 1px 2px rgba(0,0,0,.15)
-
-/* https://github.com/wekan/wekan/issues/4254#issuecomment-1037192960 */
-
-minicard-color(background, color...)
-  background-color: background !important
-  if color
-    color: color !important //overwrite text for better visibility
-  &:hover:not(.minicard-composer),
-  .is-selected &,
-  .draggable-hover-card &
-    background: darken(background, 3%)
-  .draggable-hover-card &
-    background: darken(background, 7%)
-
-.minicard-green
-  minicard-color(#3cb500, #ffffff) //White text for better visibility
-
-.minicard-yellow
-  minicard-color(#fad900)
-
-.minicard-orange
-  minicard-color(#ff9f19)
-
-.minicard-red
-  minicard-color(#eb4646, #ffffff) //White text for better visibility
-
-.minicard-purple
-  minicard-color(#a632db, #ffffff) //White text for better visibility
-
-.minicard-blue
-  minicard-color(#0079bf, #ffffff) //White text for better visibility
-
-.minicard-pink
-  minicard-color(#ff78cb)
-
-.minicard-sky
-  minicard-color(#00c2e0, #ffffff) //White text for better visibility
-
-.minicard-black
-  minicard-color(#4d4d4d, #ffffff) //White text for better visibility
-
-.minicard-lime
-  minicard-color(#51e898)
-
-.minicard-silver
-  minicard-color(#c0c0c0)
-
-.minicard-peachpuff
-  minicard-color(#ffdab9)
-
-.minicard-crimson
-  minicard-color(#dc143c, #ffffff) //White text for better visibility
-
-.minicard-plum
-  minicard-color(#dda0dd)
-
-.minicard-darkgreen
-  minicard-color(#006400, #ffffff) //White text for better visibility
-
-.minicard-slateblue
-  minicard-color(#6a5acd, #ffffff) //White text for better visibility
-
-.minicard-magenta
-  minicard-color(#ff00ff, #ffffff) //White text for better visibility
-
-.minicard-gold
-  minicard-color(#ffd700)
-
-.minicard-navy
-  minicard-color(#000080, #ffffff) //White text for better visibility
-
-.minicard-gray
-  minicard-color(#808080, #ffffff) //White text for better visibility
-
-.minicard-saddlebrown
-  minicard-color(#8b4513, #ffffff) //White text for better visibility
-
-.minicard-paleturquoise
-  minicard-color(#afeeee)
-
-.minicard-mistyrose
-  minicard-color(#ffe4e1)
-
-.minicard-indigo
-  minicard-color(#4b0082, #ffffff) //White text for better visibility
-
-.text-red
-  color:red
-.text-green
-  color:green

client/components/cards/resultCard.css

@@ -0,0 +1,25 @@
+.result-card-list-wrapper {
+  margin: 1rem;
+  border-radius: 5px;
+  padding: 1.5rem;
+  padding-top: 0.75rem;
+  display: inline-block;
+  min-width: 250px;
+  max-width: 350px;
+}
+.result-card-wrapper {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+.result-card-context {
+  display: inline-block;
+}
+.result-card-context-separator {
+  font-weight: bold;
+}
+.result-card-context-list {
+  margin-bottom: 0.7rem;
+}
+.result-card-block-wrapper {
+  display: inline-block;
+}

client/components/cards/resultCard.styl

@@ -1,24 +0,0 @@
-.result-card-list-wrapper
-  margin: 1rem
-  border-radius: 5px
-  padding: 1.5rem
-  padding-top: 0.75rem
-  display: inline-block
-  min-width: 250px
-  max-width: 350px
-
-.result-card-wrapper
-  margin-top: 0
-  margin-bottom: 10px
-
-.result-card-context
-  display: inline-block
-
-.result-card-context-separator
-  font-weight: bold
-
-.result-card-context-list
-  margin-bottom: 0.7rem
-
-.result-card-block-wrapper
-  display: inline-block

client/components/cards/subtasks.css

@@ -0,0 +1,152 @@
+.js-add-subtask {
+  color: #8c8c8c;
+}
+textarea.js-add-subtask-item,
+textarea.js-edit-subtask-item {
+  overflow: hidden;
+  word-wrap: break-word;
+  resize: none;
+  height: 34px;
+}
+.delete-text,
+.subtask-title .js-delete-subtask,
+.subtask-title .js-view-subtask,
+.js-delete-subtask-item {
+  color: #8c8c8c;
+  text-decoration: underline;
+  word-wrap: break-word;
+  float: right;
+  padding-top: 6px;
+}
+.delete-text:hover,
+.subtask-title .js-delete-subtask:hover,
+.subtask-title .js-view-subtask:hover,
+.js-delete-subtask-item:hover {
+  color: inherit;
+}
+.subtask-title .checkbox {
+  float: left;
+  width: 30px;
+  height: 30px;
+  font-size: 18px;
+  line-height: 30px;
+}
+.subtask-title .title {
+  font-size: 18px;
+  line-height: 25px;
+}
+.subtask-title .subtasks-stat {
+  margin: 0 0.5em;
+  float: right;
+  padding-top: 6px;
+}
+.subtask-title .subtasks-stat.is-finished {
+  color: #3cb500;
+}
+.subtask-title .js-delete-subtask {
+  margin: 0 0.5em;
+}
+.js-confirm-subtask-delete {
+  background-color: #f7f7f7;
+  position: absolute;
+  float: left;
+  width: 60%;
+  margin-top: 0;
+  margin-left: 13%;
+  padding-bottom: 2%;
+  padding-left: 3%;
+  padding-right: 3%;
+  z-index: 17;
+  border-radius: 3px;
+}
+.js-confirm-subtask-delete p {
+  position: relative;
+  margin-top: 3%;
+  width: 100%;
+  text-align: center;
+}
+.js-confirm-subtask-delete p span {
+  font-weight: bold;
+}
+.js-confirm-subtask-delete p i {
+  font-size: 2em;
+}
+.js-confirm-subtask-delete .js-subtask-delete-buttons {
+  position: relative;
+  padding: left 2% right 2%;
+}
+.js-confirm-subtask-delete .js-subtask-delete-buttons .confirm-subtask-delete {
+  margin-left: 12%;
+  float: left;
+}
+.js-confirm-subtask-delete .js-subtask-delete-buttons .toggle-delete-subtask-dialog {
+  margin-right: 12%;
+  float: right;
+}
+#card-details-overlay {
+  top: 0;
+  bottom: -600px;
+  right: 0;
+}
+.subtasks {
+  background: #f7f7f7;
+}
+.subtasks.placeholder {
+  background: #ccc;
+  border-radius: 2px;
+}
+.subtasks.ui-sortable-helper {
+  box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
+  transform: rotate(4deg);
+  cursor: grabbing;
+}
+.subtasks-item {
+  margin: 0 0 0 0.1em;
+  line-height: 18px;
+  font-size: 1.1em;
+  margin-top: 3px;
+  display: flex;
+  background: #f7f7f7;
+}
+.subtasks-item.placeholder {
+  background: #ccc;
+  border-radius: 2px;
+}
+.subtasks-item.ui-sortable-helper {
+  box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
+  transform: rotate(4deg);
+  cursor: grabbing;
+}
+.subtasks-item:hover {
+  background-color: #ebebeb;
+}
+.subtasks-item .check-box {
+  margin: 0.1em 0 0 0;
+}
+.subtasks-item .check-box.is-checked {
+  border-bottom: 2px solid #3cb500;
+  border-right: 2px solid #3cb500;
+}
+.subtasks-item .item-title {
+  flex: 1;
+  padding-left: 10px;
+}
+.subtasks-item .item-title.is-checked {
+  color: #8c8c8c;
+  font-style: italic;
+}
+.subtasks-item .item-title .viewer p {
+  margin-bottom: 2px;
+}
+.js-delete-subtask-item {
+  margin: 0 0 0.5em 1.33em;
+  padding: 12px 0 0 0;
+}
+.add-subtask-item {
+  margin: 0.2em 0 0.5em 1.33em;
+  display: inline-block;
+}
+.subtask-details-menu {
+  float: right;
+  padding: 6px 10px 6px 10px;
+}

client/components/cards/subtasks.styl

@@ -1,146 +0,0 @@
-.js-add-subtask
-  color: #8c8c8c
-
-textarea.js-add-subtask-item, textarea.js-edit-subtask-item
-  overflow: hidden
-  word-wrap: break-word
-  resize: none
-  height: 34px
-
-.delete-text
-  color: #8c8c8c
-  text-decoration: underline
-  word-wrap: break-word
-  float: right
-  padding-top: 6px
-  &:hover
-    color: inherit
-
-.subtask-title
-  .checkbox
-    float: left
-    width: 30px
-    height 30px
-    font-size: 18px
-    line-height: 30px
-
-  .title
-    font-size: 18px
-    line-height: 25px
-
-  .subtasks-stat
-    margin: 0 0.5em
-    float: right
-    padding-top: 6px
-    &.is-finished
-      color: #3cb500
-
-  .js-delete-subtask
-    @extends .delete-text
-    margin: 0 0.5em
-
-  .js-view-subtask
-    @extends .delete-text
-
-.js-confirm-subtask-delete
-  background-color: darken(white, 3%)
-  position: absolute
-  float: left;
-  width: 60%
-  margin-top: 0
-  margin-left: 13%
-  padding-bottom: 2%
-  padding-left: 3%
-  padding-right: 3%
-  z-index: 17
-  border-radius: 3px
-
-  p
-    position: relative
-    margin-top: 3%
-    width: 100%
-    text-align: center
-    span
-      font-weight: bold
-
-    i
-      font-size: 2em
-
-  .js-subtask-delete-buttons
-    position: relative
-    padding: left 2% right 2%
-    .confirm-subtask-delete
-      margin-left: 12%
-      float: left
-    .toggle-delete-subtask-dialog
-      margin-right: 12%
-      float: right
-
-#card-details-overlay
-  top: 0
-  bottom: -600px
-  right: 0
-
-.subtasks
-  background: darken(white, 3%)
-
-  &.placeholder
-    background: darken(white, 20%)
-    border-radius: 2px
-
-  &.ui-sortable-helper
-    box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
-                0 0 1px rgba(0, 0, 0, .5)
-    transform: rotate(4deg)
-    cursor: grabbing
-
-
-.subtasks-item
-  margin: 0 0 0 0.1em
-  line-height: 18px
-  font-size: 1.1em
-  margin-top: 3px
-  display: flex
-  background: darken(white, 3%)
-
-  &.placeholder
-    background: darken(white, 20%)
-    border-radius: 2px
-
-  &.ui-sortable-helper
-    box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
-                0 0 1px rgba(0, 0, 0, .5)
-    transform: rotate(4deg)
-    cursor: grabbing
-
-  &:hover
-    background-color: darken(white, 8%)
-
-  .check-box
-    margin: 0.1em 0 0 0;
-    &.is-checked
-      border-bottom: 2px solid #3cb500
-      border-right: 2px solid #3cb500
-
-  .item-title
-    flex: 1
-    padding-left: 10px;
-    &.is-checked
-      color: #8c8c8c
-      font-style: italic
-    & .viewer
-      p
-        margin-bottom: 2px
-
-.js-delete-subtask-item
-  margin: 0 0 0.5em 1.33em
-  @extends .delete-text
-  padding: 12px 0 0 0
-
-.add-subtask-item
-  margin: 0.2em 0 0.5em 1.33em
-  display: inline-block
-
-.subtask-details-menu
-  float: right
-  padding: 6px 10px 6px 10px

client/components/forms/datepicker.css

@@ -0,0 +1,22 @@
+.datepicker-container .fields .left {
+  width: 56%;
+}
+.datepicker-container .fields .right {
+  width: 38%;
+}
+.datepicker-container .datepicker {
+  width: 100%;
+}
+.datepicker-container .datepicker table {
+  width: 100%;
+  border: none;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+.datepicker-container .datepicker table thead {
+  background: none;
+}
+.datepicker-container .datepicker table td,
+.datepicker-container .datepicker table th {
+  box-sizing: border-box;
+}

client/components/forms/datepicker.styl

@@ -1,17 +0,0 @@
-.datepicker-container
-  .fields
-    .left
-      width: 56%
-    .right
-      width: 38%
-  .datepicker
-    width: 100%
-    table
-      width: 100%
-      border: none
-      border-spacing: 0
-      border-collapse: collapse
-      thead
-        background: none
-      td, th
-        box-sizing: border-box

client/components/forms/forms.css

@@ -0,0 +1,736 @@
+select,
+textarea,
+input:not([type=file]),
+button {
+  box-sizing: border-box;
+  background-color: #ebebeb;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  display: block;
+  margin-bottom: 12px;
+  min-height: 34px;
+  padding: 7px;
+}
+select.full,
+textarea.full,
+input:not([type=file]).full,
+button.full {
+  width: 100%;
+}
+select.input-error,
+textarea.input-error,
+input:not([type=file]).input-error,
+button.input-error {
+  background-color: #ece9e9;
+  border-color: #ba1212;
+}
+select:focus,
+textarea:focus,
+input:not([type=file]):focus,
+button:focus {
+  outline: 0;
+}
+input[type="file"] {
+  margin-bottom: 16px;
+}
+input[type="radio"] {
+  -webkit-appearance: radio;
+  min-height: inherit;
+}
+input[type="text"],
+input[type="password"],
+input[type="email"] {
+  transition: background 85ms ease-in, border-color 85ms ease-in;
+  width: 250px;
+}
+input[type="text"].inline-input,
+input[type="password"].inline-input,
+input[type="email"].inline-input {
+  background: none;
+  border: 0;
+  margin: 0;
+  padding: 2px;
+  min-height: 0;
+  height: 18px;
+  width: 200px;
+}
+input[type="text"].full-line,
+input[type="password"].full-line,
+input[type="email"].full-line {
+  width: 100%;
+}
+input[type="email"]:invalid {
+  box-shadow: none;
+}
+input[type="text"]:hover,
+input[type="password"]:hover,
+input[type="email"]:hover,
+textarea:hover {
+  border-color: #999;
+}
+input[type="text"]:hover.input-error,
+input[type="password"]:hover.input-error,
+input[type="email"]:hover.input-error,
+textarea:hover.input-error {
+  border-color: #ba1212;
+}
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="email"]:focus,
+textarea:focus {
+  background: #fff;
+  border-color: #318ec4;
+  box-shadow: 0 0 2px #318ec4;
+}
+input[type="text"]:focus.input-error,
+input[type="password"]:focus.input-error,
+input[type="email"]:focus.input-error,
+textarea:focus.input-error {
+  background-color: #f8f7f7;
+  border-color: #ba1212;
+  box-shadow: 0 0 2px #d11515;
+}
+input[type="text"]:disabled,
+input[type="password"]:disabled,
+input[type="email"]:disabled,
+textarea:disabled {
+  background-color: #dcdcdc;
+  border-color: #bfbfbf;
+  color: #8c8c8c;
+  -webkit-touch-callout: none;
+  user-select: none;
+}
+select {
+  max-height: 300px;
+  width: 256px;
+  margin-bottom: 8px;
+}
+select.inline {
+  width: 100%;
+}
+option[disabled] {
+  color: #8c8c8c;
+}
+textarea {
+  height: 150px;
+  transition: background 85ms ease-in, border-color 85ms ease-in;
+  resize: vertical;
+  width: 100%;
+}
+textarea.editor {
+  resize: none;
+  padding-bottom: 22px;
+}
+.button {
+  border-radius: 3px;
+  text-decoration: none;
+  position: relative;
+}
+input[type="submit"],
+button {
+  background: #cfcfcf;
+  background: linear-gradient(#cfcfcf, #c2c2c2);
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 700;
+  line-height: 22px;
+  padding: 7px 20px;
+  text-align: center;
+}
+input[type="submit"] .wide,
+button .wide {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+input[type="submit"]:hover,
+button:hover,
+input[type="submit"]:focus,
+button:focus {
+  background: #c2c2c2;
+  background: linear-gradient(#c2c2c2, #b5b5b5);
+}
+input[type="submit"]:active,
+button:active {
+  background: #b5b5b5;
+  background: linear-gradient(#b5b5b5, #a8a8a8);
+  box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);
+}
+input[type="submit"]:active:hover,
+button:active:hover,
+input[type="submit"]:active:focus,
+button:active:focus,
+input[type="submit"]:active:active,
+button:active:active {
+  background: #e6e6e6;
+  background: linear-gradient(#e6e6e6, #e6e6e6);
+}
+input[type="submit"].primary,
+button.primary {
+  background: #005377;
+  box-shadow: 0 1px 0 #4d4d4d;
+  color: #fff;
+}
+input[type="submit"].primary:hover,
+button.primary:hover,
+input[type="submit"].primary:focus,
+button.primary:focus {
+  background: #004766;
+}
+input[type="submit"].primary:active,
+button.primary:active {
+  background: #01628c;
+}
+input[type="submit"].negate:hover,
+button.negate:hover,
+input[type="submit"].negate:focus,
+button.negate:focus {
+  background: #990f0f;
+  background: linear-gradient(#990f0f, #7d0c0c);
+  box-shadow: 0 1px 0 #4d4d4d;
+  color: #fff;
+}
+input[type="submit"].negate:active,
+button.negate:active {
+  background: #7d0c0c;
+  box-shadow: 0 1px 0 #4d4d4d;
+  color: #fff;
+}
+input[type="submit"] i.fa,
+button i.fa {
+  margin-right: 10px;
+}
+input[type="submit"].disabled,
+input[type="submit"]:disabled,
+input[type="button"].disabled,
+button.disabled,
+.button.disabled,
+input[type="submit"].disabled:hover,
+input[type="submit"]:disabled:hover,
+input[type="button"].disabled:hover,
+button.disabled:hover,
+.button.disabled:hover,
+input[type="submit"].disabled:active,
+input[type="submit"]:disabled:active,
+input[type="button"].disabled:active,
+button.disabled:active,
+.button.disabled:active {
+  background: #cfcfcf;
+  cursor: default;
+  box-shadow: none;
+  color: #a8a8a8;
+}
+fieldset {
+  border: 1px solid #bfbfbf;
+  padding: 15px;
+  margin-bottom: 15px;
+}
+input[type="hidden"] {
+  display: none;
+}
+.radio-div,
+.check-div {
+  display: block;
+  margin: 0 0 4px 20px;
+  min-height: 20px;
+  position: relative;
+}
+.radio-div input,
+.check-div input {
+  left: -18px;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 2px;
+}
+.radio-div label,
+.check-div label {
+  font-weight: 400;
+}
+label {
+  display: block;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+label.form-error {
+  color: #ba1212;
+}
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder,
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+  color: #8c8c8c;
+}
+.edit-controls,
+.add-controls {
+  display: flex;
+  align-items: center;
+  margin-top: 0px;
+  margin-bottom: 12px;
+}
+.edit-controls button[type=submit],
+.add-controls button[type=submit],
+.edit-controls input[type=button],
+.add-controls input[type=button] {
+  float: left;
+  height: 32px;
+  margin-bottom: 0px;
+}
+.edit-controls .fa-times-thin,
+.add-controls .fa-times-thin {
+  font-size: 26px;
+  margin: 3px 10px;
+}
+[type="checkbox"]:not(:checked),
+[type="checkbox"]:checked {
+  position: absolute;
+  left: -9999px;
+  visibility: hidden;
+  display: none;
+}
+.materialCheckBox {
+  position: relative;
+  width: 13px;
+  height: 13px;
+  z-index: 0;
+  border: 2px solid #5a5a5a;
+  border-radius: 1px;
+  transition: 0.2s;
+  margin: 0;
+  cursor: pointer;
+}
+.materialCheckBox.is-checked {
+  top: -4px;
+  left: -3px;
+  width: 7px;
+  height: 15px;
+  margin-right: 6px;
+  border-top: 2px solid transparent;
+  border-left: 2px solid transparent;
+  transform: rotate(40deg);
+  -webkit-backface-visibility: hidden;
+  transform-origin: 100% 100%;
+}
+.button-link {
+  background: #fff;
+  background: linear-gradient(#fff, #f5f5f5);
+  border-radius: 3px;
+  box-sizing: border-box;
+  user-select: none;
+  border: 1px solid #e3e3e3;
+  border-bottom-color: #c2c2c2;
+  cursor: pointer;
+  display: block;
+  font-weight: 700;
+  height: 34px;
+  margin-top: 6px;
+  max-width: 300px;
+  padding: 7px;
+  position: relative;
+  text-decoration: none;
+  overflow: ellipsis;
+}
+.button-link .on {
+  background: #48b512;
+  background: linear-gradient(#48b512, #3d990f);
+  border-radius: 3px;
+  color: #fff;
+  display: none;
+  font-size: 12px;
+  font-weight: 700;
+  height: 17px;
+  line-height: 17px;
+  margin: 0;
+  padding: 2px 4px;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  text-align: center;
+}
+.button-link.is-on {
+  padding-right: 30px;
+  max-width: 196px;
+}
+.button-link.is-on .on {
+  display: block;
+}
+.button-link.inline {
+  color: #666;
+  padding: 2px 14px;
+  margin-left: 4px;
+}
+.button-link.setting {
+  height: 52px;
+  float: left;
+  position: relative;
+  margin-top: 0;
+}
+.button-link.setting.disabled {
+  background: #fff;
+  border-color: #e9e9e9;
+  color: #8c8c8c;
+  cursor: default;
+}
+.button-link.setting.disabled select {
+  display: none;
+}
+.button-link.setting.disabled:hover .label {
+  color: #8c8c8c;
+}
+.button-link.setting.disabled,
+.button-link.setting.disabled:hover,
+.button-link.setting.disabled:active,
+.button-link.setting.disabled.primary,
+.button-link.setting.disabled.primary:hover,
+.button-link.setting.disabled.primary:active {
+  background: #cfcfcf;
+  border-color: #c2c2c2;
+  border-bottom-color: #b5b5b5;
+  cursor: default;
+  box-shadow: none;
+  color: #a8a8a8;
+}
+.button-link.setting .label {
+  color: #8c8c8c;
+  display: block;
+  font-size: 12px;
+  line-height: 14px;
+  margin-bottom: 0;
+}
+.button-link.setting:hover .label {
+  color: #eee;
+}
+.button-link.setting .value {
+  display: block;
+  font-size: 18px;
+  line-height: 24px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.button-link.setting label {
+  display: none;
+}
+.button-link.setting select {
+  border: none;
+  cursor: pointer;
+  height: 50px;
+  left: 0;
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  z-index: 2;
+  width: 100%;
+}
+.button-link:hover {
+  background: #318ec4;
+  background: linear-gradient(#318ec4, #2b7cab);
+  border-color: #2e85b8;
+  color: #fff;
+}
+.button-link:hover .on {
+  background-image: none;
+  background-color: rgba(255,255,255,0.3);
+  border-color: transparent;
+}
+.button-link:active {
+  background: #2e85b8;
+  background: linear-gradient(#2e85b8, #28739f);
+  border-color: #2b7cab;
+  color: #fff;
+}
+.button-link .button-link.negate:hover {
+  background: #990f0f;
+  background: linear-gradient(#990f0f, #7d0c0c);
+  border-color: linear-gradient(#990f0f, #7d0c0c);
+}
+.button-link .button-link.negate:active {
+  background: #7d0c0c;
+  border-color: #990f0f;
+}
+.button-link.primary {
+  background: #48b512;
+  background: linear-gradient(#48b512, #3d990f);
+  border: 1px solid;
+  border-color: #3d990f;
+  color: #fff;
+}
+.button-link.primary:hover {
+  background: #3d990f;
+  background: linear-gradient(#3d990f, #327d0c);
+  border-color: #3d990f;
+}
+.button-link.danger {
+  background: #ba1212;
+  background: linear-gradient(#ba1212, #8b0e0e);
+  border: 1px solid;
+  border-color: #a21010;
+  color: #fff;
+}
+.button-link.danger:hover {
+  background: #a21010;
+  background: linear-gradient(#a21010, #740b0b);
+  border-color: #8b0e0e;
+}
+button.quiet-button,
+button.loud-text-button {
+  background: none;
+  text-align: left;
+  line-height: normal;
+  border: none;
+  box-shadow: none;
+}
+button.quiet-button:active,
+button.loud-text-button:active {
+  color: #4d4d4d;
+  background: #d3d3d3;
+  box-shadow: none;
+}
+button.quiet-button {
+  font-weight: 400;
+  text-decoration: underline;
+}
+button.loud-text-button {
+  width: 100%;
+}
+button.loud-text-button:hover {
+  color: #111;
+}
+.emphasis-button,
+.quiet-button {
+  border-radius: 3px;
+  user-select: none;
+  color: #8c8c8c;
+  display: block;
+  margin: 2px 0;
+  padding: 6px 8px;
+  position: relative;
+}
+.emphasis-button.w-img,
+.quiet-button.w-img {
+  padding-left: 28px;
+}
+.emphasis-button:hover,
+.quiet-button:hover {
+  color: #4d4d4d;
+  background: #dcdcdc;
+}
+.emphasis-button:active,
+.quiet-button:active {
+  color: #4d4d4d;
+  background: #d3d3d3;
+}
+.quiet-button-large {
+  padding: 16px 24px;
+}
+.emphasis-button {
+  color: #74663e;
+  background: #ecdfbb;
+}
+.emphasis-button:hover {
+  color: #53492d;
+  background: #e7d6a7;
+}
+.emphasis-button:active {
+  color: #53492d;
+  background: #e1cc93;
+}
+.is-editable {
+  cursor: pointer;
+}
+.big-link {
+  border-radius: 3px;
+  display: block;
+  margin: 6px 0 6px 40px;
+  padding: 11px;
+  position: relative;
+  text-decoration: none;
+  font-size: 16px;
+  line-height: 20px;
+}
+.big-link .text {
+  text-decoration: underline;
+}
+.big-link:hover {
+  background: #dcdcdc;
+}
+.big-link.options {
+  padding-right: 41px;
+}
+.big-link .option {
+  height: 30px;
+  width: 30px;
+  position: absolute;
+  right: 6px;
+  top: 6px;
+}
+.big-link.none {
+  color: #8c8c8c;
+  text-decoration: none;
+}
+.big-link.none:hover {
+  background: transparent;
+}
+.big-link.avatar-changer {
+  padding-right: 51px;
+}
+.big-link.avatar-changer .member {
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  height: 40px;
+  width: 40px;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.big-link.avatar-changer .member .member-avatar {
+  height: 40px;
+  width: 40px;
+}
+.big-link.avatar-changer .member .member-initials {
+  font-size: 16px;
+  height: 40px;
+  line-height: 40px;
+  max-height: 40px;
+}
+.show-more {
+  border-radius: 3px;
+  color: #8c8c8c;
+  display: block;
+  padding: 16px 8px 16px 40px;
+  margin: 8px 0;
+}
+.show-more:hover {
+  background: #dcdcdc;
+  text-decoration: underline;
+}
+.show-more.compact {
+  padding: 12px 8px;
+  margin: 8px 0 0;
+  text-align: center;
+}
+.board-widget .show-more {
+  padding: 12px 8px 12px 40px;
+}
+.uploader {
+  clear: both;
+  cursor: pointer;
+  position: relative;
+  height: 34px;
+  width: 100%;
+}
+.uploader .realfile {
+  cursor: pointer;
+  height: 34px;
+  line-height: 34px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 2;
+  font-size: 23px;
+}
+.uploader .realfile input[type="file"] {
+  cursor: pointer;
+  height: 34px;
+  line-height: 34px;
+  margin: 0;
+  opacity: 0;
+  padding: 0;
+  width: 100%;
+  z-index: 2;
+  font-size: 23px;
+}
+.uploader:hover .fakefile {
+  background: #318ec4;
+  background: linear-gradient(#318ec4, #2b7cab);
+  border-color: #2e85b8;
+  color: #fff;
+}
+.dropdown-menu {
+  border-radius: 2px;
+  overflow: hidden;
+}
+.dropdown-menu li {
+  border-top: none;
+}
+.dropdown-menu li a {
+  padding: 4px 12px 4px 8px;
+}
+.dropdown-menu li a img {
+  width: 18px;
+  height: 18px;
+  margin-right: 5px;
+  vertical-align: middle;
+}
+.dropdown-menu li a .minicard-label {
+  width: 11px;
+  height: 11px;
+  border-radius: 2px;
+  margin: 2px 7px -2px -2px;
+  display: inline-block;
+}
+.dropdown-menu li.active {
+  background: #005377;
+}
+.dropdown-menu li.active a,
+.dropdown-menu li.active .quiet {
+  color: #fff;
+}
+.material-toggle-switch {
+  display: flex;
+}
+.toggle-label {
+  position: relative;
+  display: block;
+  height: 20px;
+  width: 44px;
+  background-color: #a6a6a6;
+  border-radius: 100px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.toggle-label:after {
+  position: absolute;
+  left: -2px;
+  top: -3px;
+  display: block;
+  width: 26px;
+  height: 26px;
+  border-radius: 100px;
+  background-color: #fff;
+  box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
+  content: '';
+  transition: all 0.3s ease;
+}
+.toggle-label:active:after {
+  transform: scale(1.15, 0.85);
+}
+.toggle-switch:checked ~ .toggle-label {
+  background-color: #6fbeb5;
+}
+.toggle-switch:checked ~ .toggle-label:after {
+  left: 20px;
+  background-color: #179588;
+}
+.toggle-switch:checked:disabled ~ .toggle-label {
+  background-color: #d5d5d5;
+  pointer-events: none;
+}
+.toggle-switch:checked:disabled ~ .toggle-label:after {
+  background-color: #bcbdbc;
+}
+.toggle-switch {
+  display: none;
+}
+.toggle-switch-title {
+  margin: 0 0.5em;
+  display: flex;
+}
+@media screen and (max-width: 800px) {
+  .edit-controls .fa-times-thin,
+  .add-controls .fa-times-thin {
+    margin: 3px 20px;
+  }
+}

client/components/forms/forms.styl

@@ -1,695 +0,0 @@
-@import 'nib'
-
-select,
-textarea,
-input:not([type=file]),
-button
-  box-sizing: border-box
-  background-color: #ebebeb
-  border: 1px solid #ccc
-  border-radius: 3px
-  display: block
-  margin-bottom: 12px
-  min-height: 34px
-  padding: 7px
-
-  &.full
-    width: 100%
-
-  &.input-error
-    background-color: #ece9e9
-    border-color: #ba1212
-
-  &:focus
-    outline: 0
-
-input[type="file"]
-  margin-bottom: 16px
-
-input[type="radio"]
-  -webkit-appearance: radio
-  min-height: inherit
-
-input[type="text"],
-input[type="password"],
-input[type="email"]
-  transition: background 85ms ease-in,
-        border-color 85ms ease-in
-  width: 250px
-
-  &.inline-input
-    background: none
-    border: 0
-    margin: 0
-    padding: 2px
-    min-height: 0
-    height: 18px
-    width: 200px
-
-  &.full-line
-    width: 100%
-
-input[type="email"]:invalid
-  box-shadow: none
-
-input[type="text"],
-input[type="password"],
-input[type="email"],
-textarea
-
-  &:hover
-    border-color: #999
-
-    &.input-error
-      border-color: #ba1212
-
-  &:focus
-    background: #fff
-    border-color: #318ec4
-    box-shadow: 0 0 2px #318ec4
-
-    &.input-error
-      background-color: #f8f7f7
-      border-color: #ba1212
-      box-shadow: 0 0 2px #d11515
-
-  &:disabled
-    background-color: #dcdcdc
-    border-color: #bfbfbf
-    color: #8c8c8c
-    -webkit-touch-callout: none
-    user-select: none
-
-select
-  max-height: 300px
-  width: 256px
-  margin-bottom: 8px
-
-  &.inline
-    width: 100%
-
-option[disabled]
-  color: #8c8c8c
-
-textarea
-  height: 150px
-  transition: background 85ms ease-in,
-        border-color 85ms ease-in
-  resize: vertical
-  width: 100%
-
-  &.editor
-    resize: none
-    padding-bottom: 22px
-
-
-.button
-  border-radius: 3px
-  text-decoration: none
-  position: relative
-
-input[type="submit"],
-button
-  background: #cfcfcf
-  background: linear-gradient(#cfcfcf, #c2c2c2)
-  border: none
-  cursor: pointer
-  display: inline-block
-  font-weight: 700
-  line-height: 22px
-  padding: 7px 20px
-  text-align: center
-
-  .wide
-    padding-left: 30px
-    padding-right: 30px
-
-  &:hover,
-  &:focus
-    background: #c2c2c2
-    background: linear-gradient(#c2c2c2, #b5b5b5)
-
-  &:active
-    background: #b5b5b5
-    background: linear-gradient(#b5b5b5, #a8a8a8)
-    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .1)
-
-    &:hover,
-    &:focus,
-    &:active
-      background: #e6e6e6
-      background: linear-gradient(#e6e6e6, #e6e6e6)
-
-  &.primary
-    background: #005377
-    box-shadow: 0 1px 0 #4d4d4d
-    color: white
-
-    &:hover,
-    &:focus
-      background: #004766
-
-    &:active
-      background: #01628C
-
-  &.negate
-    &:hover,
-    &:focus
-      background: #990f0f
-      background: linear-gradient(#990f0f, #7d0c0c)
-      box-shadow: 0 1px 0 #4d4d4d
-      color: #fff
-
-    &:active
-      background: #7d0c0c
-      box-shadow: 0 1px 0 #4d4d4d
-      color: #fff
-
-  i.fa
-    margin-right: 10px
-
-input[type="submit"].disabled,
-input[type="submit"]:disabled,
-input[type="button"].disabled,
-button.disabled,
-.button.disabled
-
-  &,
-  &:hover,
-  &:active
-    background: #cfcfcf
-    cursor: default
-    box-shadow: none
-    color: #a8a8a8
-
-fieldset
-  border: 1px solid #bfbfbf
-  padding: 15px
-  margin-bottom: 15px
-
-input[type="hidden"]
-  display: none
-
-.radio-div,
-.check-div
-  display: block
-  margin: 0 0 4px 20px
-  min-height: 20px
-  position: relative
-
-  input
-    left: -18px
-    min-height: 0
-    margin: 0
-    padding: 0
-    position: absolute
-    top: 2px
-
-  label
-    font-weight: 400
-
-label
-  display: block
-  font-weight: 700
-  margin-bottom: 4px
-
-  &.form-error
-    color: #ba1212
-
-input,
-textarea
-  &::-webkit-input-placeholder,
-  &::-moz-placeholder
-    color: #8c8c8c
-
-.edit-controls,
-.add-controls
-  display: flex
-  align-items: center
-  margin-top: 0px
-  margin-bottom: 12px
-
-  button[type=submit]
-  input[type=button]
-    float: left
-    height: 32px
-    margin-bottom: 0px
-
-  .fa-times-thin
-    font-size: 26px
-    margin: 3px 10px
-
-// Material Design checkboxes
-  [type="checkbox"]:not(:checked),
-  [type="checkbox"]:checked
-    position: absolute
-    left: -9999px
-    visibility: hidden
-    display: none
-
-.materialCheckBox
-  position: relative
-  width: 13px
-  height: @width
-  z-index: 0
-  border: 2px solid #5a5a5a
-  border-radius: 1px
-  transition: .2s
-  margin: 0
-  cursor: pointer
-
-  &.is-checked
-    top: -4px
-    left: -3px
-    width: 7px
-    height: 15px
-    margin-right: 6px
-    border-top: 2px solid transparent
-    border-left: 2px solid transparent
-    transform: rotate(40deg)
-    -webkit-backface-visibility: hidden
-    transform-origin: 100% 100%
-
-.button-link
-  background: #fff
-  background: linear-gradient(#fff, #f5f5f5)
-  border-radius: 3px
-  box-sizing: border-box
-  user-select: none
-  border: 1px solid #e3e3e3
-  border-bottom-color: #c2c2c2
-  cursor: pointer
-  display: block
-  font-weight: 700
-  height: 34px
-  margin-top: 6px
-  max-width: 300px
-  padding: 7px
-  position: relative
-  text-decoration: none
-  overflow: ellipsis
-
-  .on
-    background: #48b512
-    background: linear-gradient(#48b512, #3d990f)
-    border-radius: 3px
-    color: #fff
-    display: none
-    font-size: 12px
-    font-weight: 700
-    height: 17px
-    line-height: @height
-    margin: 0
-    padding: 2px 4px
-    position: absolute
-    right: 5px
-    top: 5px
-    text-align: center
-
-  &.is-on
-    padding-right: 30px
-    max-width: 196px
-
-    .on
-      display: block
-
-  &.inline
-    color: #666
-    padding: 2px 14px
-    margin-left: 4px
-
-  &.setting
-    height: 52px
-    float: left
-    position: relative
-    margin-top: 0
-
-    &.disabled
-      background: #fff
-      border-color: #e9e9e9
-      color: #8c8c8c
-      cursor: default
-
-      select
-        display: none
-
-      &:hover .label
-        color: #8c8c8c
-
-      &,
-      &:hover,
-      &:active,
-      &.primary,
-      &.primary:hover,
-      &.primary:active
-        background: #cfcfcf
-        border-color: #c2c2c2
-        border-bottom-color: #b5b5b5
-        cursor: default
-        box-shadow: none
-        color: #a8a8a8
-
-    .label
-      color: #8c8c8c
-      display: block
-      font-size: 12px
-      line-height: 14px
-      margin-bottom: 0
-
-    &:hover .label
-      color: #eee
-
-    .value
-      display: block
-      font-size: 18px
-      line-height: 24px
-      overflow: hidden
-      text-overflow: ellipsis
-
-    label
-      display: none
-
-    select
-      border: none
-      cursor: pointer
-      height: 50px
-      left: 0
-      margin: 0
-      opacity: 0
-      position: absolute
-      top: 0
-      z-index: 2
-      width: 100%
-
-  &:hover
-    background: #318ec4
-    background: linear-gradient(#318ec4, #2b7cab)
-    border-color: #2e85b8
-    color: #fff
-
-    .on
-      background-image: none
-      background-color: rgba(255, 255, 255, .3)
-      border-color: transparent
-
-  &:active
-    background: #2e85b8
-    background: linear-gradient(#2e85b8, #28739f)
-    border-color: #2b7cab
-    color: #fff
-
-  .button-link.negate
-
-    &:hover
-      background: #990f0f
-      background: linear-gradient(#990f0f, #7d0c0c)
-      border-color: @background
-
-    &:active
-      background: #7d0c0c
-      border-color: #990f0f
-
-
-  &.primary
-    background: #48b512
-    background: linear-gradient(#48b512, #3d990f)
-    border: 1px solid
-    border-color: #3d990f
-    color: #fff
-
-    &:hover
-      background: #3d990f
-      background: linear-gradient(#3d990f, #327d0c)
-      border-color: #3d990f
-
-  &.danger
-    background: #ba1212
-    background: linear-gradient(#ba1212, #8b0e0e)
-    border: 1px solid
-    border-color: #a21010
-    color: #fff
-
-    &:hover
-      background: #a21010
-      background: linear-gradient(#a21010, #740b0b)
-      border-color: #8b0e0e
-
-button
-  &.quiet-button,
-  &.loud-text-button
-    background: none
-    text-align: left
-    line-height: normal
-    border: none
-    box-shadow: none
-
-    &:active
-      color: #4d4d4d
-      background: #d3d3d3
-      box-shadow: none
-
-  &.quiet-button
-    font-weight: 400
-    text-decoration: underline
-
-  &.loud-text-button
-    width: 100%
-
-    &:hover
-      color: #111
-
-.emphasis-button,
-.quiet-button
-  border-radius: 3px
-  user-select: none
-  color: #8c8c8c
-  display: block
-  margin: 2px 0
-  padding: 6px 8px
-  position: relative
-
-  &.w-img
-    padding-left: 28px
-
-  &:hover
-    color: #4d4d4d
-    background: #dcdcdc
-
-  &:active
-    color: #4d4d4d
-    background: #d3d3d3
-
-.quiet-button-large
-  padding: 16px 24px
-
-.emphasis-button
-  color: #74663e
-  background: #ecdfbb
-
-  &:hover
-    color: #53492d
-    background: #e7d6a7
-
-  &:active
-    color: #53492d
-    background: #e1cc93
-
-.is-editable
-  cursor: pointer
-
-.big-link
-  border-radius: 3px
-  display: block
-  margin: 6px 0 6px 40px
-  padding: 11px
-  position: relative
-  text-decoration: none
-  font-size: 16px
-  line-height: 20px
-
-  .text
-    text-decoration: underline
-
-  &:hover
-    background: #dcdcdc
-
-  &.options
-    padding-right: 41px
-
-  .option
-    height: 30px
-    width: @height
-    position: absolute
-    right: 6px
-    top: 6px
-
-  &.none
-    color: #8c8c8c
-    text-decoration: none
-
-    &:hover
-      background: transparent
-
-  &.avatar-changer
-    padding-right: 51px
-
-    .member
-      border: 1px solid #ccc
-      border-radius: 3px
-      height: 40px
-      width: @height
-      position: absolute
-      right: 0
-      top: 0
-
-      .member-avatar
-        height: 40px
-        width: @height
-
-      .member-initials
-        font-size: 16px
-        height: 40px
-        line-height: @height
-        max-height: @height
-
-.show-more
-  border-radius: 3px
-  color: #8c8c8c
-  display: block
-  padding: 16px 8px 16px 40px
-  margin: 8px 0
-
-  &:hover
-    background: #dcdcdc
-    text-decoration: underline
-
-  &.compact
-    padding: 12px 8px
-    margin: 8px 0 0
-    text-align: center
-
-.board-widget .show-more
-  padding: 12px 8px 12px 40px
-
-.uploader
-  clear: both
-  cursor: pointer
-  position: relative
-  height: 34px
-  width: 100%
-
-  .realfile
-    cursor: pointer
-    height: 34px
-    line-height: @height
-    position: absolute
-    top: 0
-    left: 0
-    width: 100%
-    z-index: 2
-    font-size: 23px
-
-    input[type="file"]
-      cursor: pointer
-      height: 34px
-      line-height: @height
-      margin: 0
-      opacity: 0
-      padding: 0
-      width: 100%
-      z-index: 2
-      font-size: 23px
-
-  &:hover .fakefile
-    background: #318ec4
-    background: linear-gradient(#318ec4, #2b7cab)
-    border-color: #2e85b8
-    color: #fff
-
-.dropdown-menu
-  border-radius: 2px
-  overflow: hidden
-
-  li
-    border-top: none
-
-    a
-      padding: 4px 12px 4px 8px
-
-      img
-        width: 18px
-        height: @width
-        margin-right: 5px
-        vertical-align: middle
-
-      .minicard-label
-        width: 11px
-        height: @width
-        border-radius: 2px
-        margin: 2px 7px -2px -2px
-        display: inline-block
-
-    &.active
-      background: #005377
-
-      a, .quiet
-        color: white
-
-// Material Design Toggle Switch
-.material-toggle-switch
-  display: flex
-
-.toggle-label
-  position: relative
-  display: block
-  height: 20px
-  width: 44px
-  background-color: #a6a6a6
-  border-radius: 100px
-  cursor: pointer
-  transition: all 0.3s ease
-
-  &:after
-    position: absolute
-    left: -2px
-    top: -3px
-    display: block
-    width: 26px
-    height: 26px
-    border-radius: 100px
-    background-color: #fff
-    box-shadow: 0px 3px 3px rgba(0,0,0,0.05)
-    content: ''
-    transition: all 0.3s ease
-
-  &:active
-    &:after
-      transform: scale(1.15, 0.85)
-
-.toggle-switch:checked ~ .toggle-label
-  background-color: #6fbeb5
-
-  &:after
-    left: 20px
-    background-color: #179588
-
-.toggle-switch:checked:disabled ~ .toggle-label
-  background-color: #d5d5d5
-  pointer-events: none
-
-  &:after
-    background-color: #bcbdbc
-
-.toggle-switch
-  display: none
-
-.toggle-switch-title
-  margin: 0 0.5em
-  display: flex
-
-
-@media screen and (max-width: 800px)
-  .edit-controls,
-  .add-controls
-    .fa-times-thin
-      margin: 3px 20px

client/components/import/import.css

@@ -0,0 +1,51 @@
+.map-members:after {
+  content: "";
+  flex: auto;
+}
+.map-members .mapping-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -4px;
+}
+.map-members .mapping-list .mapping-item {
+  max-width: 300px;
+  min-width: 200px;
+  padding: 6px;
+  margin: 5px;
+  flex: 1;
+  background: #fff;
+  border-radius: 3px;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+}
+.map-members .mapping-list .mapping-item:hover {
+  background: #f2f2f2;
+}
+.map-members .mapping-list .mapping-item.filled {
+  background: #e0ffe5;
+}
+.map-members .mapping-list .mapping-item.filled:hover {
+  background: #ffe0e0;
+}
+.map-members .mapping-list .mapping-item.ghost-item {
+  height: 0;
+  visibility: hidden;
+  border: none;
+}
+.map-members .mapping-list .profile-source {
+  display: inline-block;
+  width: 80%;
+}
+.map-members .mapping-list .wekan {
+  display: inline-block;
+  width: 35px;
+}
+.map-members .mapping-list .wekan .member {
+  float: none;
+}
+a.show-mapping {
+  text-decoration: underline;
+}
+.import-members-map-note {
+  font-size: 90%;
+  font-weight: bold;
+}

client/components/import/import.styl

@@ -1,53 +0,0 @@
-@import 'nib'
-
-.map-members
-  &:after
-    content: "";
-    flex: auto;
-
-  .mapping-list
-    display: flex
-    flex-wrap: wrap
-    margin: 0 -4px
-
-    .mapping-item
-      max-width: 300px
-      min-width: 200px
-      padding: 6px
-      margin: 5px
-      flex:1
-      background: white
-      border-radius: 3px
-      box-shadow: 0 1px 2px rgba(0,0,0,.15)
-
-      &:hover
-        background: darken(white, 5%)
-
-      &.filled
-        background: #E0FFE5
-
-        &:hover
-          background: #FFE0E0
-
-      &.ghost-item
-        height: 0
-        visibility: hidden
-        border: none
-
-    .profile-source
-      display: inline-block
-      width: 80%
-
-    .wekan
-      display: inline-block
-      width: 35px
-
-      .member
-        float: none
-
-a.show-mapping
-  text-decoration underline
-
-.import-members-map-note
-  font-size: 90%
-  font-weight: bold

client/components/lists/list.css

@@ -0,0 +1,346 @@
+.list {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  background: #dedede;
+  border-left: 1px solid #ccc;
+  padding: 0;
+  float: left;
+  width: 270px;   /* Orinal width: 270px. Changes not saved yet: */
+  resize: both;   /* - List width and height resizeable */
+  overflow: auto; /* - List width and height resizeable */
+}
+.list:first-child {
+  margin-left: 5px;
+  border-left: none;
+}
+.card-details + .list {
+  border-left: none;
+}
+.list.ui-sortable-helper {
+  box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
+  transform: rotate(4deg);
+  cursor: grabbing;
+}
+.list.ui-sortable-helper .list-header.ui-sortable-handle {
+  cursor: grabbing;
+}
+.list.placeholder {
+  background-color: rgba(0,0,0,0.2);
+  border-color: transparent;
+  box-shadow: none;
+  height: 100px;
+}
+.list.list-composer .open-list-composer,
+.list .list-composer .open-list-composer {
+  color: #8c8c8c;
+}
+.list.list-composer .list-name-input,
+.list .list-composer .list-name-input {
+  background: #fff;
+  margin: -3px 0 8px;
+}
+.list-header-add {
+  flex: 0 0 auto;
+  padding: 20px 12px 4px;
+  position: relative;
+  min-height: 20px;
+}
+.list-header {
+  flex: 0 0 auto;
+  padding: 20px 12px 4px;
+  position: relative;
+  min-height: 20px;
+  background-color: #e4e4e4;
+  border-bottom: 6px solid #e4e4e4;
+}
+.list-header.list-header-card-count {
+  min-height: 35px;
+  height: auto;
+}
+.list-header.ui-sortable-handle {
+  cursor: grab;
+}
+.list-header .list-header-left-icon {
+  display: none;
+}
+.list-header .list-header-name {
+  display: inline;
+  font-size: 16px;
+  line-height: 17px;
+  margin: 0;
+  font-weight: bold;
+  min-height: 9px;
+  min-width: 30px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+}
+.list-header .list-header-watch-icon {
+  padding-left: 10px;
+  color: #a6a6a6;
+}
+.list-header .list-header-menu {
+  float: right;
+}
+.list-header .list-header-plus-top {
+  color: #a6a6a6;
+  margin-right: 15px;
+}
+.list-header .highlight {
+  color: #ce1414;
+}
+.list-header .cardCount {
+  color: #8c8c8c;
+  font-size: 12px;
+  font-weight: bold;
+}
+.list-header .list-header-plus-top,
+.js-open-list-menu,
+.list-header-menu a {
+  color: #4d4d4d;
+  padding-left: 4px;
+}
+.list-body {
+  flex: 1 1 auto;
+  flex-direction: column;
+  display: flex;
+  overflow-y: auto;
+  padding: 5px 11px;
+}
+.list-body .minicards {
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+.list-body .minicards form {
+  margin-bottom: 9px;
+}
+.list-body .open-minicard-composer {
+  border-radius: 2px;
+  color: #8c8c8c;
+  display: block;
+  padding: 7px 10px;
+  position: relative;
+  text-decoration: none;
+  animation: fadeIn 0.3s;
+}
+.list-body .open-minicard-composer i.fa {
+  margin-right: 7px;
+}
+.list-body .open-minicard-composer:hover {
+  background: #fafafa;
+  color: #222;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}
+#js-wip-limit-edit {
+  padding-top: 2%;
+}
+#js-wip-limit-edit p {
+  margin-bottom: 0;
+}
+#js-wip-limit-edit input {
+  display: inline-block;
+}
+#js-wip-limit-edit .wip-limit-value {
+  width: 20%;
+  margin-right: 5%;
+}
+#js-wip-limit-edit .wip-limit-error {
+  display: none;
+}
+#js-wip-limit-edit .soft-wip-limit {
+  margin-right: 8px;
+}
+#js-wip-limit-edit div {
+  float: left;
+}
+@media screen and (max-width: 800px) {
+  .mini-list {
+    flex: 0 0 60px;
+    height: auto;
+    width: 100%;
+    border-left: 0px;
+    border-bottom: 1px solid #ccc;
+  }
+  .list {
+    display: contents;
+    flex-basis: auto;
+    width: 100%;
+    border-left: 0px;
+  }
+  .list:first-child {
+    margin-left: 0px;
+  }
+  .list.ui-sortable-helper {
+    flex: 0 0 60px;
+    height: 60px;
+    width: 100%;
+    border-left: 0px;
+    border-bottom: 1px solid #ccc;
+  }
+  .list.ui-sortable-helper .list-header.ui-sortable-handle {
+    cursor: grabbing;
+  }
+  .list.placeholder {
+    flex: 0 0 60px;
+    height: 60px;
+    width: 100%;
+    border-left: 0px;
+    border-bottom: 1px solid #ccc;
+  }
+  .list-body {
+    padding: 15px 19px;
+  }
+  .list-header {
+    padding: 0 12px 0px;
+    border-bottom: 0px solid #e4e4e4;
+    height: 60px;
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+  }
+  .list-header .list-header-left-icon {
+    padding: 7px;
+    padding-right: 27px;
+    margin-top: 1px;
+    top: -7px;
+    left: -7px;
+  }
+  .list-header .list-header-menu-icon {
+    position: absolute;
+    padding: 7px;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 47px;
+    font-size: 20px;
+  }
+  .list-header .list-header-handle {
+    position: absolute;
+    padding: 7px;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 10px;
+    font-size: 24px;
+  }
+  .list-header {
+    display: grid;
+    grid-template-columns: 30px 5fr 1fr;
+  }
+  .list-header .list-header-left-icon {
+    display: grid;
+    grid-row: 1/3;
+    grid-column: 1;
+  }
+  .list-header .list-header-name {
+    grid-row: 1;
+    grid-column: 2;
+    align-self: end;
+  }
+  .list-header .cardCount {
+    grid-row: 2;
+    grid-column: 2;
+    align-self: start;
+  }
+  .list-header .list-header-menu {
+    grid-row: 1/3;
+    grid-column: 3;
+  }
+  .list-header .inlined-form {
+    grid-row: 1/3;
+    grid-column: 1/4;
+  }
+  .list-header .edit-controls {
+    align-items: initial;
+  }
+}
+.link-board-wrapper {
+  display: flex;
+  align-items: baseline;
+}
+.link-board-wrapper .js-link-board {
+  margin-left: 15px;
+}
+.search-card-results {
+  max-height: 250px;
+  overflow: hidden;
+}
+.sk-spinner-list {
+  margin-top: unset !important;
+}
+.list-header-white {
+  border-bottom: 6px solid #fff;
+  border: 1px solid #eee;
+}
+.list-header-green {
+  border-bottom: 6px solid #3cb500;
+}
+.list-header-yellow {
+  border-bottom: 6px solid #fad900;
+}
+.list-header-orange {
+  border-bottom: 6px solid #ff9f19;
+}
+.list-header-red {
+  border-bottom: 6px solid #eb4646;
+}
+.list-header-purple {
+  border-bottom: 6px solid #a632db;
+}
+.list-header-blue {
+  border-bottom: 6px solid #0079bf;
+}
+.list-header-pink {
+  border-bottom: 6px solid #ff78cb;
+}
+.list-header-sky {
+  border-bottom: 6px solid #00c2e0;
+}
+.list-header-black {
+  border-bottom: 6px solid #4d4d4d;
+}
+.list-header-lime {
+  border-bottom: 6px solid #51e898;
+}
+.list-header-silver {
+  border-bottom: 6px solid unset;
+}
+.list-header-peachpuff {
+  border-bottom: 6px solid #ffdab9;
+}
+.list-header-crimson {
+  border-bottom: 6px solid #dc143c;
+}
+.list-header-plum {
+  border-bottom: 6px solid #dda0dd;
+}
+.list-header-darkgreen {
+  border-bottom: 6px solid #006400;
+}
+.list-header-slateblue {
+  border-bottom: 6px solid #6a5acd;
+}
+.list-header-magenta {
+  border-bottom: 6px solid #f0f;
+}
+.list-header-gold {
+  border-bottom: 6px solid #ffd700;
+}
+.list-header-navy {
+  border-bottom: 6px solid #000080;
+}
+.list-header-gray {
+  border-bottom: 6px solid #808080;
+}
+.list-header-saddlebrown {
+  border-bottom: 6px solid #8b4513;
+}
+.list-header-paleturquoise {
+  border-bottom: 6px solid #afeeee;
+}
+.list-header-mistyrose {
+  border-bottom: 6px solid #ffe4e1;
+}
+.list-header-indigo {
+  border-bottom: 6px solid #4b0082;
+}

client/components/lists/list.js

@@ -1,3 +1,4 @@
+import { TAPi18n } from '/imports/i18n';
 require('/client/lib/jquery-ui.js')
 
 const { calculateIndex } = Utils;

client/components/lists/list.styl

@@ -1,341 +0,0 @@
-@import 'nib'
-
-.list
-  box-sizing: border-box
-  display: flex
-  flex-direction: column
-  position: relative
-  // Even if this background color is the same as the body we can't leave it
-  // transparent, because that won't work during a list drag.
-  background: darken(white, 13%)
-  border-left: 1px solid darken(white, 20%)
-  padding: 0
-  float: left
-  min-width: 270px
-  max-width: 270px
-
-  &:first-child
-    margin-left: 5px
-    border-left: none
-
-  .card-details + &
-    border-left: none
-
-  &.ui-sortable-helper
-    box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
-                0 0 1px rgba(0, 0, 0, .5)
-    transform: rotate(4deg)
-    cursor: grabbing
-
-    .list-header.ui-sortable-handle
-      cursor: grabbing
-
-  &.placeholder
-    background-color: rgba(0, 0, 0, .2)
-    border-color: transparent
-    box-shadow: none
-    height: 100px
-
-  &.list-composer, & .list-composer
-    .open-list-composer
-      color: #8c8c8c
-
-    .list-name-input
-      background: white
-      margin: -3px 0 8px
-
-.list-header-add
-  flex: 0 0 auto
-  padding: 20px 12px 4px
-  position: relative
-  min-height: 20px
-
-.list-header
-  flex: 0 0 auto
-  padding: 20px 12px 4px
-  position: relative
-  min-height: 20px
-  background-color: #e4e4e4;
-  border-bottom: 6px solid #e4e4e4;
-
-  &.list-header-card-count
-    min-height: 35px
-    height: auto
-
-  &.ui-sortable-handle
-    cursor: grab
-
-  .list-header-left-icon
-    display: none
-
-  .list-header-name
-    display: inline
-    font-size: 16px
-    line-height: 17px
-    margin: 0
-    font-weight: bold
-    min-height: 9px
-    min-width: 30px
-    overflow: hidden
-    text-overflow: ellipsis
-    word-wrap: break-word
-
-
-  .list-header-watch-icon
-    padding-left: 10px
-    color: #a6a6a6
-
-  .list-header-menu
-    float: right
-
-  .list-header-plus-top
-    color: #a6a6a6
-    margin-right: 15px
-
-  .highlight
-    color: #ce1414
-
-  .cardCount
-    color: #8c8c8c
-    font-size: 12px
-    font-weight: bold
-
-.list-header .list-header-plus-top, .js-open-list-menu, .list-header-menu a
-    color #4d4d4d
-    padding-left 4px
-
-.list-body
-  flex: 1 1 auto
-  flex-direction: column
-  display: flex
-  overflow-y: auto
-  padding: 5px 11px
-
-  .minicards
-    flex-grow: 1
-    flex-shrink: 0
-
-    form
-      margin-bottom: 9px
-
-  .open-minicard-composer
-    border-radius: 2px
-    color: #8c8c8c
-    display: block
-    padding: 7px 10px
-    position: relative
-    text-decoration: none
-    animation: fadeIn 0.3s
-
-    i.fa
-      margin-right: 7px
-
-    &:hover
-      background: #fafafa
-      color: #222
-      box-shadow: 0 1px 2px rgba(0,0,0,.2)
-
-#js-wip-limit-edit
-  padding-top: 2%
-
-  p
-    margin-bottom: 0
-
-  input
-    display: inline-block
-
-  .wip-limit-value
-    width: 20%
-    margin-right: 5%
-
-  .wip-limit-error
-    display: none
-
-  .soft-wip-limit
-    margin-right: 8px
-
-  div
-    float: left
-
-@media screen and (max-width: 800px)
-  .mini-list
-    flex: 0 0 60px
-    height: auto
-    width: 100%
-    border-left: 0px
-    border-bottom: 1px solid darken(white, 20%)
-
-  .list
-    display: contents
-    flex-basis: auto
-    width: 100%
-    border-left: 0px
-    &:first-child
-      margin-left: 0px
-
-    &.ui-sortable-helper
-      flex: 0 0 60px
-      height: 60px
-      width: 100%
-      border-left: 0px
-      border-bottom: 1px solid darken(white, 20%)
-
-      .list-header.ui-sortable-handle
-        cursor: grabbing
-
-    &.placeholder
-      flex: 0 0 60px
-      height: 60px
-      width: 100%
-      border-left: 0px
-      border-bottom: 1px solid darken(white, 20%)
-
-  .list-body
-    padding: 15px 19px;
-
-  .list-header
-    padding: 0 12px 0px
-    border-bottom: 0px solid #e4e4e4
-    height: 60px
-    margin-top: 10px
-    display: flex
-    align-items: center
-    .list-header-left-icon
-      padding: 7px
-      padding-right: 27px
-      margin-top: 1px
-      top: -@padding
-      left: -@padding
-
-    .list-header-menu-icon
-      position: absolute
-      padding: 7px
-      top: 50%
-      transform: translateY(-50%)
-      right: 47px
-      font-size: 20px
-
-    .list-header-handle
-      position: absolute
-      padding: 7px
-      top: 50%
-      transform: translateY(-50%)
-      right: 10px
-      font-size: 24px
-
-  .list-header
-    display: grid
-    grid-template-columns: 30px 5fr 1fr
-    .list-header-left-icon
-      display: grid
-      grid-row: 1/3
-      grid-column: 1
-    .list-header-name
-      grid-row: 1
-      grid-column: 2
-      align-self: end
-    .cardCount
-      grid-row: 2
-      grid-column: 2
-      align-self: start
-    .list-header-menu
-      grid-row: 1/3
-      grid-column: 3
-    .inlined-form
-      grid-row: 1/3
-      grid-column: 1/4
-    .edit-controls
-      align-items: initial
-
-.link-board-wrapper
-  display: flex
-  align-items: baseline
-
-  .js-link-board
-    margin-left: 15px
-
-.search-card-results
-  max-height: 250px
-  overflow: hidden
-
-.sk-spinner-list
-  margin-top: unset !important
-
-list-header-color(background, color...)
-  border-bottom: 6px solid background
-
-.list-header-white
-  list-header-color(#ffffff, #4d4d4d) //Black text for better visibility
-  border: 1px solid #eee
-
-.list-header-green
-  list-header-color(#3cb500, #ffffff) //White text for better visibility
-
-.list-header-yellow
-  list-header-color(#fad900, #4d4d4d) //Black text for better visibility
-
-.list-header-orange
-  list-header-color(#ff9f19, #4d4d4d) //Black text for better visibility
-
-.list-header-red
-  list-header-color(#eb4646, #ffffff) //White text for better visibility
-
-.list-header-purple
-  list-header-color(#a632db, #ffffff) //White text for better visibility
-
-.list-header-blue
-  list-header-color(#0079bf, #ffffff) //White text for better visibility
-
-.list-header-pink
-  list-header-color(#ff78cb, #4d4d4d) //Black text for better visibility
-
-.list-header-sky
-  list-header-color(#00c2e0, #ffffff) //White text for better visibility
-
-.list-header-black
-  list-header-color(#4d4d4d, #ffffff) //White text for better visibility
-
-.list-header-lime
-  list-header-color(#51e898, #4d4d4d) //Black text for better visibility
-
-.list-header-silver
-  list-header-color(unset, #4d4d4d) //Black text for better visibility
-
-.list-header-peachpuff
-  list-header-color(#ffdab9, #4d4d4d) //Black text for better visibility
-
-.list-header-crimson
-  list-header-color(#dc143c, #ffffff) //White text for better visibility
-
-.list-header-plum
-  list-header-color(#dda0dd, #4d4d4d) //Black text for better visibility
-
-.list-header-darkgreen
-  list-header-color(#006400, #ffffff) //White text for better visibility
-
-.list-header-slateblue
-  list-header-color(#6a5acd, #ffffff) //White text for better visibility
-
-.list-header-magenta
-  list-header-color(#ff00ff, #ffffff) //White text for better visibility
-
-.list-header-gold
-  list-header-color(#ffd700, #4d4d4d) //Black text for better visibility
-
-.list-header-navy
-  list-header-color(#000080, #ffffff) //White text for better visibility
-
-.list-header-gray
-  list-header-color(#808080, #ffffff) //White text for better visibility
-
-.list-header-saddlebrown
-  list-header-color(#8b4513, #ffffff) //White text for better visibility
-
-.list-header-paleturquoise
-  list-header-color(#afeeee, #4d4d4d) //Black text for better visibility
-
-.list-header-mistyrose
-  list-header-color(#ffe4e1, #4d4d4d) //Black text for better visibility
-
-.list-header-indigo
-  list-header-color(#4b0082, #ffffff) //White text for better visibility

client/components/lists/listBody.js

@@ -1,3 +1,4 @@
+import { TAPi18n } from '/imports/i18n';
 import { Spinner } from '/client/lib/spinner';
 
 const subManager = new SubsManager();
@@ -42,7 +43,6 @@ BlazeComponent.extendComponent({
     const position = this.currentData().position;
     const title = textarea.val().trim();
 
-    const formComponent = this.childComponents('addCardForm')[0];
     let sortIndex;
     if (position === 'top') {
       sortIndex = Utils.calculateIndex(null, firstCardDom).base;
@@ -50,6 +50,7 @@ BlazeComponent.extendComponent({
       sortIndex = Utils.calculateIndex(lastCardDom, null).base;
     }
 
+    const formComponent = this.cardFormComponent();
     const members = formComponent.members.get();
     const labelIds = formComponent.labels.get();
     const customFields = formComponent.customFields.get();
@@ -131,6 +132,16 @@ BlazeComponent.extendComponent({
     }
   },
 
+  cardFormComponent() {
+    for (const inlinedForm of this.childComponents('inlinedForm')) {
+      const [addCardForm] = inlinedForm.childComponents('addCardForm');
+      if (addCardForm) {
+        return addCardForm;
+      }
+    }
+    return null;
+  },
+
   scrollToBottom() {
     const container = this.firstNode();
     $(container).animate({

client/components/lists/listHeader.js

@@ -1,3 +1,5 @@
+import { TAPi18n } from '/imports/i18n';
+
 let listsColors;
 Meteor.startup(() => {
   listsColors = Lists.simpleSchema()._schema.color.allowedValues;

client/components/main/brokenCards.css

@@ -0,0 +1,28 @@
+.broken-cards-card-wrapper {
+  margin-top: 0;
+  margin-bottom: 10px;
+  border-width: 3px !important;
+  border-color: #808080 !important;
+  border-style: solid;
+  border-radius: 5px;
+  padding: 1.5rem;
+  background-color: #fff;
+}
+.broken-cards-wrapper {
+  max-width: 500px;
+  margin-right: auto;
+  margin-left: auto;
+}
+.broken-cards-card-title {
+  font-weight: bold;
+}
+.broken-cards-context {
+  display: inline-block;
+}
+.broken-cards-context-separator {
+  font-weight: bold;
+}
+.broken-cards-null {
+  color: #8b0000;
+  font-style: italic;
+}

client/components/main/brokenCards.styl

@@ -1,31 +0,0 @@
-.broken-cards-card-wrapper
-  margin-top: 0
-  margin-bottom: 10px
-  border-width: 3px !important
-  border-color: grey !important
-  border-style: solid
-  border-radius: 5px
-  padding: 1.5rem
-  background-color: white
-
-.broken-cards-wrapper
-  max-width: 500px
-  margin-right: auto
-  margin-left: auto
-
-.broken-cards-card-title
-  font-weight: bold
-  //padding: 10px
-
-.broken-cards-context
-  display: inline-block
-
-.broken-cards-context-separator
-  font-weight: bold
-
-.broken-cards-context-list
-  //margin-bottom: 0.7rem
-
-.broken-cards-null
-  color: darkred
-  font-style: italic

client/components/main/dueCards.css

@@ -0,0 +1,5 @@
+.due-cards-dueat-list-wrapper {
+  max-width: 500px;
+  margin-right: auto;
+  margin-left: auto;
+}

client/components/main/dueCards.styl

@@ -1,4 +0,0 @@
-.due-cards-dueat-list-wrapper
-  max-width: 500px
-  margin-right: auto
-  margin-left: auto

client/components/main/editor.css

@@ -0,0 +1,7 @@
+.new-comment a.fa.fa-copy,
+.inlined-form a.fa.fa-copy {
+  float: right;
+  position: relative;
+  top: 20px;
+  right: 6px;
+}

client/components/main/editor.styl

@@ -1,7 +0,0 @@
-.new-comment,
-.inlined-form
-  a.fa.fa-copy
-    float: right
-    position: relative
-    top: 20px
-    right: 6px

client/components/main/fonts.css

@@ -0,0 +1,30 @@
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url("/fonts/roboto-regular.woff2") format('woff2'), url("/fonts/roboto-regular.woff") format('woff');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url("/fonts/roboto-bold.woff2") format('woff2'), url("/fonts/roboto-bold.woff") format('woff');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Poppins'), local('Poppins-Regular'), url("/fonts/poppins-regular.woff") format('woff');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Poppins Medium'), local('Poppins-Medium'), url("/fonts/poppins-medium.woff") format('woff');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Poppins Bold'), local('Poppins-Bold'), url("/fonts/poppins-bold.woff") format('woff');
+}

client/components/main/fonts.styl

@@ -1,41 +0,0 @@
-@font-face
-  font-family: 'Roboto'
-  font-style: normal
-  font-weight: 400
-  src: local('Roboto'),
-       local('Roboto-Regular'),
-       url('/fonts/roboto-regular.woff2') format('woff2'),
-       url('/fonts/roboto-regular.woff') format('woff')
-
-@font-face
-  font-family: 'Roboto'
-  font-style: normal
-  font-weight: 700
-  src: local('Roboto Bold'),
-       local('Roboto-Bold'),
-       url('/fonts/roboto-bold.woff2') format('woff2'),
-       url('/fonts/roboto-bold.woff') format('woff')
-
-@font-face
-  font-family: 'Poppins'
-  font-style: normal
-  font-weight: 400
-  src: local('Poppins'),
-       local('Poppins-Regular'),
-       url('/fonts/poppins-regular.woff') format('woff')
-
-@font-face
-  font-family: 'Poppins'
-  font-style: normal
-  font-weight: 500
-  src: local('Poppins Medium'),
-       local('Poppins-Medium'),
-       url('/fonts/poppins-medium.woff') format('woff')
-
-@font-face
-  font-family: 'Poppins'
-  font-style: normal
-  font-weight: 700
-  src: local('Poppins Bold'),
-       local('Poppins-Bold'),
-       url('/fonts/poppins-bold.woff') format('woff')

client/components/main/globalSearch.css

@@ -0,0 +1,117 @@
+.global-search-board-wrapper {
+  border-radius: 8px;
+  min-width: 400px;
+  border-width: 8px;
+  border-color: #808080;
+  border-style: solid;
+  margin-bottom: 2rem;
+  margin-right: auto;
+  margin-left: auto;
+}
+.global-search-board-title {
+  font-size: 1.4rem;
+  font-weight: bold;
+  padding: 0.5rem;
+  background-color: #808080;
+  color: #fff;
+}
+.global-search-swimlane-title {
+  font-size: 1.1rem;
+  font-weight: bold;
+  padding: 0.5rem;
+  padding-bottom: 0.4rem;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  text-align: center;
+}
+.swimlane-default-color {
+  background-color: #d3d3d3;
+}
+.global-search-list-title {
+  font-weight: bold;
+  font-size: 1.1rem;
+  text-align: center;
+  margin-bottom: 0.7rem;
+}
+.global-search-list-wrapper {
+  margin: 1rem;
+  border-radius: 5px;
+  padding: 1.5rem;
+  padding-top: 0.75rem;
+  display: inline-block;
+  min-width: 250px;
+  max-width: 350px;
+}
+.global-search-card-wrapper {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+.global-search-results-list-wrapper {
+  max-width: 500px;
+  margin-right: auto;
+  margin-left: auto;
+}
+.global-search-field-name {
+  font-weight: bold;
+}
+.global-search-context {
+  display: inline-block;
+}
+.global-search-context-separator {
+  font-weight: bold;
+}
+.global-search-context-list {
+  margin-bottom: 0.7rem;
+}
+.global-search-error-messages {
+  color: #8b0000;
+}
+.global-search-page {
+  width: 40%;
+  min-width: 400px;
+  margin-right: auto;
+  margin-left: auto;
+  line-height: 150%;
+}
+.global-search-page h1 {
+  margin-top: 2rem;
+}
+.global-search-page h2 {
+  margin-top: 1rem;
+}
+.global-search-query-input {
+  width: 90% !important;
+  margin-right: auto;
+  margin-left: auto;
+}
+.global-search-operator {
+  font-family: Courier;
+}
+.global-search-value {
+  font-family: Courier;
+  font-style: italic;
+}
+code {
+  color: #000;
+  background-color: #d3d3d3;
+  padding: 0.1rem !important;
+  font-size: 0.8rem !important;
+}
+.list-title {
+  background-color: #a9a9a9;
+}
+.global-search-footer {
+  border: none;
+  width: 100%;
+}
+.global-search-next-page {
+  border: none;
+  text-align: right;
+}
+.global-search-previous-page {
+  border: none;
+  text-align: left;
+}
+.global-search-instructions li {
+  margin-bottom: 0.3rem;
+}

client/components/main/globalSearch.js

@@ -1,3 +1,4 @@
+import { TAPi18n } from '/imports/i18n';
 import { CardSearchPagedComponent } from '../../lib/cardSearch';
 import Boards from '../../../models/boards';
 import { Query, QueryErrors } from '../../../config/query-classes';

client/components/main/globalSearch.styl

@@ -1,121 +0,0 @@
-.global-search-board-wrapper
-  border-radius: 8px
-  //padding: 0.5rem
-  min-width: 400px
-  border-width: 8px
-  border-color: grey
-  border-style: solid
-  margin-bottom: 2rem
-  margin-right: auto
-  margin-left: auto
-
-.global-search-board-title
-  font-size: 1.4rem
-  font-weight: bold
-  padding: 0.5rem
-  background-color: grey
-  color: white
-
-.global-search-swimlane-title
-  font-size: 1.1rem
-  font-weight: bold
-  padding: 0.5rem
-  padding-bottom: 0.4rem
-  margin-top: 0
-  margin-bottom: 0.5rem
-  //border-top: black 1px solid
-  //border-bottom: black 1px solid
-  text-align: center
-
-.swimlane-default-color
-  background-color: lightgrey
-
-.global-search-list-title
-  font-weight: bold
-  font-size: 1.1rem
-  //padding-bottom: 0
-  //margin-bottom: 0
-  text-align: center
-  margin-bottom: 0.7rem
-
-.global-search-list-wrapper
-  margin: 1rem
-  border-radius: 5px
-  padding: 1.5rem
-  padding-top: 0.75rem
-  display: inline-block
-  min-width: 250px
-  max-width: 350px
-
-.global-search-card-wrapper
-  margin-top: 0
-  margin-bottom: 10px
-
-.global-search-results-list-wrapper
-  max-width: 500px
-  margin-right: auto
-  margin-left: auto
-
-.global-search-field-name
-  font-weight: bold
-
-.global-search-context
-  display: inline-block
-
-.global-search-context-separator
-  font-weight: bold
-
-.global-search-context-list
-  margin-bottom: 0.7rem
-
-.global-search-error-messages
-  color: darkred
-
-.global-search-page
-  width: 40%
-  min-width: 400px
-  margin-right: auto
-  margin-left: auto
-  line-height: 150%
-
-.global-search-page h1
-  margin-top: 2rem;
-
-.global-search-page h2
-  margin-top: 1rem;
-
-.global-search-query-input
-  width: 90% !important
-  margin-right: auto
-  margin-left: auto
-
-.global-search-operator
-  font-family: Courier
-
-.global-search-value
-  font-family: Courier
-  font-style: italic
-
-code
-  color: black
-  background-color: lightgrey
-  padding: 0.1rem !important
-  font-size: 0.8rem !important
-
-.list-title
-  background-color: darkgray
-
-.global-search-footer
-  border: none
-  width: 100%
-
-.global-search-next-page
-  border: none
-  text-align: right;
-
-.global-search-previous-page
-  border: none
-  text-align: left;
-
-.global-search-instructions li
-  margin-bottom: 0.3rem

client/components/main/header.css

@@ -0,0 +1,266 @@
+#header {
+  color: #fff;
+  transition: background-color 0.4s;
+  background: #2980b9;
+  z-index: 17;
+}
+#header #header-main-bar {
+  height: 40px;
+  padding: 7px 10px 0;
+}
+#header #header-main-bar h1 {
+  font-size: 20px;
+  line-height: 1.7em;
+  padding: 0 10px;
+  margin: 0;
+  margin-right: 10px;
+  float: left;
+  border-radius: 3px;
+}
+#header #header-main-bar h1 .board-header-watch-icon {
+  padding-left: 7px;
+}
+#header #header-main-bar h1 a.fa,
+#header #header-main-bar h1 a i.fa {
+  color: #fff;
+}
+#header #header-main-bar h1 .back-btn {
+  font-size: 0.9em;
+  margin-right: 10px;
+}
+#header #header-main-bar .wekan-logo {
+  margin: 3px auto auto;
+  width: 97px;
+  opacity: 0.6;
+  transition: opacity 0.15s;
+  float: right;
+}
+#header #header-main-bar .wekan-logo:hover {
+  opacity: 0.9;
+}
+#header #header-main-bar .board-header-btns {
+  display: block;
+  margin-top: 3px;
+  width: auto;
+}
+#header #header-main-bar .board-header-btns.left {
+  float: left;
+}
+#header #header-main-bar .board-header-btns.right {
+  float: right;
+}
+#header #header-main-bar .board-header-btn {
+  border-radius: 3px;
+  color: #f2f2f2;
+  padding: 0;
+  height: 28px;
+  font-size: 13px;
+  float: left;
+  overflow: hidden;
+  line-height: 28px;
+  margin: 0 2px;
+}
+#header #header-main-bar .board-header-btn i.fa {
+  float: left;
+  display: block;
+  line-height: 28px;
+  color: #f2f2f2;
+  margin: 0 10px;
+}
+#header #header-main-bar .board-header-btn i.fa + span {
+  display: inline-block;
+  margin-top: 1px;
+  margin-right: 10px;
+}
+#header #header-main-bar .board-header-btn .board-header-btn-close {
+  float: right;
+}
+#header #header-main-bar .board-header-btn .board-header-btn-close i.fa {
+  margin: 0 6px;
+}
+#header #header-main-bar .board-header-btn.is-active,
+#header #header-main-bar h1.is-clickable.is-active,
+#header #header-main-bar .board-header-btn:hover:not(.is-disabled),
+#header #header-main-bar h1.is-clickable:hover:not(.is-disabled) {
+  background: rgba(0,0,0,0.15);
+}
+#header #header-main-bar .separator {
+  margin: 2px 4px;
+  border-left: 1px solid rgba(255,255,255,0.3);
+  height: 24px;
+  float: left;
+}
+#header-quick-access {
+  color: #fff;
+  transition: background-color 0.4s;
+  background: #2573a7;
+  height: 28px;
+  font-size: 12px;
+  display: flex;
+  z-index: 1000;
+  padding: 10px 0px;
+}
+#header-quick-access .allBoards {
+  font-size: 14px;
+  padding: 4px 15px;
+}
+#header-quick-access a {
+  text-decoration: none;
+}
+#header-quick-access #header-user-bar,
+#header-quick-access #header-new-board-icon,
+#header-quick-access ul li {
+  color: #d4d4d4;
+}
+#header-quick-access #header-user-bar .fa,
+#header-quick-access #header-new-board-icon .fa,
+#header-quick-access ul li .fa {
+  color: inherit;
+}
+#header-quick-access #header-user-bar a:hover,
+#header-quick-access #header-new-board-icon a:hover,
+#header-quick-access ul li a:hover,
+#header-quick-access #header-user-bar a.is-active,
+#header-quick-access #header-new-board-icon a.is-active,
+#header-quick-access ul li a.is-active {
+  color: #fff;
+}
+#header-quick-access ul.header-quick-access-list {
+  transition: opacity 0.2s;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  padding: 10px;
+  margin: -10px;
+}
+#header-quick-access ul.header-quick-access-list li {
+  display: inline;
+  width: auto;
+  color: #d9d9d9;
+  padding: 12px 0px;
+  margin: -10px 0px;
+}
+#header-quick-access ul.header-quick-access-list li a {
+  padding: 12px 10px;
+  margin: -10px 0px;
+}
+#header-quick-access ul.header-quick-access-list li a .viewer {
+  display: inline;
+  white-space: nowrap;
+}
+#header-quick-access ul.header-quick-access-list li a .viewer p {
+  display: inline;
+  white-space: nowrap;
+}
+#header-quick-access ul.header-quick-access-list li.current {
+  color: #f2f2f2;
+}
+#header-quick-access ul.header-quick-access-list li.current.empty {
+  padding: 12px 10px 12px 10px;
+}
+#header-quick-access ul.header-quick-access-list li:first-child .fa-home,
+#header-quick-access ul.header-quick-access-list li:nth-child(3) .fa-globe {
+  margin-right: 5px;
+}
+#header-quick-access ul.header-quick-access-list li a.js-create-board {
+  margin-left: 5px;
+}
+#header-quick-access #header-user-bar,
+#header-quick-access #header-new-board-icon {
+  flex-shrink: 0;
+}
+#header-quick-access #header-user-bar {
+  margin: 2px 0;
+}
+#header-quick-access #header-user-bar .header-user-bar-avatar {
+  float: left;
+  position: relative;
+  top: -5px;
+  margin-right: 5px;
+}
+#header-quick-access #header-user-bar .header-user-bar-avatar .member {
+  width: 24px;
+  height: 24px;
+  margin: 0;
+  margin-top: 1px;
+}
+#header-quick-access #header-user-bar .header-user-bar-name {
+  margin: 4px 8px 0 0;
+  float: left;
+}
+#header-quick-access #header-user-bar .header-user-bar-name i.fa-chevron-down {
+  margin-right: 4px;
+}
+#header-quick-access #header-new-board-icon {
+  flex-grow: 1;
+  margin: 6px 5px 0;
+  width: 12px;
+}
+@media screen and (max-width: 800px) {
+  #header #header-main-bar {
+    height: 40px;
+  }
+  #header #header-main-bar .board-header-btns {
+    margin-top: 0px;
+  }
+  #header #header-main-bar .board-header-btn {
+    height: 32px;
+    line-height: 32px;
+    font-size: 15px;
+  }
+  #header #header-main-bar .board-header-btn i.fa {
+    line-height: 32px;
+  }
+  #header #header-main-bar .board-header-btn i.fa + span {
+    display: none;
+  }
+  #header-quick-access {
+    transition: background-color 0.4s;
+    width: 100%;
+    z-index: 30;
+  }
+  #header-quick-access ul {
+    width: calc(100% - 60px);
+    margin-right: 10px;
+  }
+  #header-quick-access ul li {
+    height: 100%;
+  }
+  #header-quick-access ul li a {
+    height: 100%;
+  }
+  #header-quick-access span .fa-home {
+    font-size: 26px;
+    margin-top: -2px;
+    margin-right: 10px;
+    margin-left: 10px;
+  }
+  #header-quick-access #header-new-board-icon {
+    display: none;
+  }
+  #header-quick-access #header-user-bar {
+    right: 0px;
+    padding: 10px;
+    margin: -8px 0 -10px -10px;
+  }
+}
+.announcement .viewer {
+  display: inline-block;
+}
+.announcement,
+.offline-warning {
+  width: 100%;
+  text-align: center;
+  padding: 0;
+  margin: 0;
+  background: #f8ecbd;
+  clear: both;
+}
+.announcement p,
+.offline-warning p {
+  margin: 7px;
+  padding: 0;
+}
+#headerIsSettingDatabaseCallDone {
+  display: none;
+}

client/components/main/header.styl

@@ -1,258 +0,0 @@
-@import 'nib'
-
-#header
-  color: white
-  transition: background-color 0.4s
-  background: #2980B9
-  z-index: 17
-
-  #header-main-bar
-    height: 40px
-    padding: 7px 10px 0
-
-    h1
-      font-size: 20px
-      line-height: 1.7em
-      padding: 0 10px
-      margin: 0
-      margin-right: 10px
-      float: left
-      border-radius: 3px
-
-      .board-header-watch-icon
-        padding-left: 7px
-
-      a.fa, a i.fa
-        color: white
-
-      .back-btn
-        font-size: 0.9em
-        margin-right: 10px
-
-    .wekan-logo
-      margin: 3px auto auto
-      width: 97px
-      opacity: 0.6
-      transition: opacity 0.15s
-      float: right
-
-      &:hover
-        opacity: 0.9
-
-    .board-header-btns
-      display: block
-      margin-top: 3px
-      width: auto
-
-      // XXX Use a flexbox instead of floats?
-      &.left
-        float: left
-
-      &.right
-        float: right
-
-    .board-header-btn
-      border-radius: 3px
-      color: darken(white, 5%)
-      padding: 0
-      height: 28px
-      font-size: 13px
-      float: left
-      overflow: hidden
-      line-height: @height
-      margin: 0 2px
-
-      i.fa
-        float: left
-        display: block
-        line-height: 28px
-        color: darken(white, 5%)
-        margin: 0 10px
-
-        + span
-          display: inline-block
-          margin-top: 1px
-          margin-right: 10px
-
-      .board-header-btn-close
-        float: right
-
-        i.fa
-          margin: 0 6px
-
-    .board-header-btn,
-    h1.is-clickable
-      &.is-active,
-      &:hover:not(.is-disabled)
-        background: rgba(0, 0, 0, .15)
-
-    .separator
-      margin: 2px 4px
-      border-left: 1px solid rgba(255, 255, 255, .3)
-      height: 24px
-      float: left
-
-#header-quick-access
-  color: white
-  transition: background-color 0.4s
-  background: #2573a7
-  height: 28px
-  font-size: 12px
-  display: flex
-  z-index: 1000
-  padding: 10px 0px
-
-  .allBoards
-      font-size: 14px
-      padding:4px 15px
-    a
-      text-decoration: none;
-
-  #header-user-bar,
-  #header-new-board-icon,
-  ul li
-    color: darken(white, 17%)
-
-    .fa
-      color: inherit
-
-    a:hover, a.is-active
-      color: white
-
-  ul.header-quick-access-list
-    transition: opacity 0.2s
-    overflow-x: auto
-    overflow-y: hidden
-    white-space: nowrap
-    padding: 10px
-    margin: -10px
-
-    li
-      display: inline
-      width: auto
-      color: darken(white, 15%)
-      padding: 12px 0px
-      margin: -10px 0px
-
-      a
-        padding: 12px 10px
-        margin: -10px 0px
-
-        .viewer
-          display: inline
-          white-space: nowrap
-
-          p
-            display: inline
-            white-space: nowrap
-
-      &.current
-        color: darken(white, 5%)
-
-      &.current.empty
-        padding: 12px 10px 12px 10px
-
-      &:first-child .fa-home,&:nth-child(3) .fa-globe
-        margin-right: 5px
-
-      a.js-create-board
-        margin-left: 5px
-
-  #header-user-bar,
-  #header-new-board-icon
-    flex-shrink: 0
-
-  #header-user-bar
-    margin: 2px 0
-
-    .header-user-bar-avatar
-      float: left
-      position: relative
-      top: -5px
-      margin-right: 5px
-
-      .member
-        width: 24px
-        height: @width
-        margin: 0
-        margin-top: 1px
-
-    .header-user-bar-name
-      margin: 4px 8px 0 0
-      float: left
-
-      i.fa-chevron-down
-        margin-right: 4px
-
-  #header-new-board-icon
-    flex-grow: 1
-    margin: 6px 5px 0
-    width: 12px
-
-@media screen and (max-width: 800px)
-  #header
-    #header-main-bar
-      height: 40px
-
-      .board-header-btns
-        margin-top: 0px
-
-      .board-header-btn
-        height: 32px
-        line-height: @height
-        font-size: 15px
-
-        i.fa
-          line-height: 32px
-
-          + span
-            display: none
-
-  #header-quick-access
-    transition: background-color 0.4s
-    width: 100%
-    z-index: 30
-
-    ul
-      width: calc(100% - 60px)
-      margin-right: 10px
-
-      li
-        height: 100%
-
-        a
-          height: 100%
-
-    span
-      .fa-home
-          font-size: 26px
-          margin-top: -2px
-          margin-right: 10px
-          margin-left: 10px
-
-    #header-new-board-icon
-      display: none
-
-    #header-user-bar
-      right: 0px
-      padding: 10px
-      margin: -8px 0 -10px -10px
-
-.announcement .viewer
-  display: inline-block
-
-.announcement,
-.offline-warning
-  width: 100%
-  text-align: center
-  padding: 0
-  margin: 0
-  background: #F8ECBD
-  clear: both
-
-  p
-    margin: 7px
-    padding: 0
-
-#headerIsSettingDatabaseCallDone
-  display: none;

client/components/main/keyboardShortcuts.css

@@ -0,0 +1,20 @@
+.shortcuts-list .shortcuts-list-item {
+  border-bottom: 1px solid #bfbfbf;
+  padding: 10px 5px;
+}
+.shortcuts-list .shortcuts-list-item:last-child {
+  border-bottom: none;
+}
+.shortcuts-list .shortcuts-list-item .shortcuts-list-item-keys {
+  margin-top: 5px;
+  float: right;
+}
+.shortcuts-list .shortcuts-list-item .shortcuts-list-item-keys kbd {
+  padding: 5px 8px;
+  margin: 5px;
+  font-size: 18px;
+}
+.shortcuts-list .shortcuts-list-item .shortcuts-list-item-action {
+  font-size: 1.4em;
+  margin: 5px;
+}

client/components/main/keyboardShortcuts.styl

@@ -1,20 +0,0 @@
-.shortcuts-list
-  .shortcuts-list-item
-    border-bottom: 1px solid darken(white, 25%)
-    padding: 10px 5px
-
-    &:last-child
-      border-bottom: none
-
-    .shortcuts-list-item-keys
-      margin-top: 5px
-      float: right
-
-      kbd
-        padding: 5px 8px
-        margin: 5px
-        font-size: 18px
-
-    .shortcuts-list-item-action
-      font-size: 1.4em
-      margin: 5px

client/components/main/layouts.css

@@ -0,0 +1,683 @@
+/* Fixed missing 'import nib' stylesheet reset and extra li bullet points
+ * https://github.com/wekan/wekan/issues/4512#issuecomment-1129347536
+ * https://github.com/stylus/nib/blob/master/lib/nib/reset.styl
+ */
+a, abbr, acronym, address, applet, big, blockquote, body, caption, cite,
+code, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5,
+h6, html, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre,
+q, s, samp, small, span, strike, strong, sub, sup,
+table, tbody, td, tfoot, th, thread, tr, tt, ul, var {
+  margin: 0;
+  padding: 0;
+  outline: 0;
+  font-weight: inherit;
+  font-style: inherit;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+ol, ul {
+  list-style: none;
+}
+a img {
+  border: none;
+}
+/* reset body */
+body {
+  line-height: 1;
+  color: black;
+  background: white;
+}
+/* reset table cell */
+table {
+  border-collapse: separate;
+  border-spacing: 0;
+  vertical-align: middle;
+}
+caption, td, th {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle;
+}
+/* reset html5 */
+article, aside, canvas, details, figcaption,
+  figure, footer, header, hgroup, menu, nav,
+  section, summary, main {
+  display: block;
+}
+audio, canvas, video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
+audio:not([controls]),[hidden] {
+  display: none;
+}
+
+/* End of reset css */
+
+
+* {
+  -webkit-box-sizing: unset;
+  box-sizing: unset;
+}
+.note-popover .popover-content .note-color-palette div .note-color-btn,
+.panel-heading.note-toolbar .note-color-palette div .note-color-btn {
+  background: none;
+}
+a:focus {
+  outline: unset;
+  outline-offset: unset;
+}
+a:hover,
+a:focus {
+  color: unset;
+  text-decoration: unset;
+}
+.badge {
+  display: unset;
+  min-width: unset;
+  padding: unset;
+  font-size: unset;
+  font-weight: unset;
+  line-height: unset;
+  color: unset;
+  text-align: unset;
+  white-space: unset;
+  vertical-align: unset;
+  background-color: unset;
+  border-radius: unset;
+}
+html,
+body,
+input,
+select,
+textarea,
+button {
+  font: 14px Roboto, Poppins, "Helvetica Neue", Arial, Helvetica, sans-serif;
+  line-height: 18px;
+  color: #4d4d4d;
+}
+html {
+  font-size: 100%;
+  max-height: 100%;
+  user-select: none;
+  -webkit-text-size-adjust: 100%;
+}
+body {
+  background: #dedede;
+  margin: 0;
+  position: relative;
+  z-index: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+#content {
+  position: relative;
+  flex: 1;
+  overflow-x: hidden;
+}
+#content .sk-spinner {
+  margin-top: 30vh;
+}
+#content > .wrapper {
+  margin-top: 10px;
+  padding: 15px;
+}
+#modal {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0,0,0,0.6);
+  z-index: 100;
+  overflow-y: auto;
+}
+#modal .modal-content {
+  width: 500px;
+  min-height: 160px;
+  margin: 42px auto;
+  padding: 12px;
+  border-radius: 4px;
+  background: #dedede;
+  z-index: 110;
+}
+#modal .modal-content h2 {
+  margin-bottom: 25px;
+}
+#modal .modal-content .modal-close-btn {
+  display: block;
+  float: right;
+  font-size: 24px;
+}
+#modal .modal-content-wide {
+  width: 800px;
+  min-height: 0px;
+  margin: 42px auto;
+  padding: 12px;
+  border-radius: 4px;
+  background: #dedede;
+  z-index: 110;
+}
+#modal .modal-content-wide h2 {
+  margin-bottom: 25px;
+}
+#modal .modal-content-wide .modal-close-btn {
+  display: block;
+  float: right;
+  font-size: 24px;
+}
+h1 {
+  font-size: 22px;
+  line-height: 1.2em;
+  margin: 0 0 10px;
+}
+h2 {
+  font-size: 18px;
+  line-height: 1.2em;
+  margin: 0 0 9px;
+}
+h3,
+h4,
+h5,
+h6 {
+  font-size: 16px;
+  line-height: 1.25em;
+  margin: 0 0 6px;
+}
+.quiet,
+.quiet a {
+  color: #8c8c8c;
+}
+.error,
+.error a {
+  color: #eb3800;
+}
+.no-items-message {
+  color: #666;
+  margin: 30px 0;
+  text-align: center;
+}
+.warning {
+  background: #f0ecdb;
+  border-radius: 3px;
+  color: #aa8f09;
+  padding: 6px 8px;
+}
+.warning a {
+  color: #aa8f09;
+}
+.small {
+  font-size: 0.8em;
+}
+a {
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+}
+a.is-disabled,
+a.is-disabled:hover {
+  cursor: default;
+  text-decoration: none;
+}
+span a {
+  text-decoration: underline;
+}
+strong {
+  font-weight: bold;
+}
+p {
+  user-select: text;
+}
+p a {
+  text-decoration: underline;
+  word-wrap: break-word;
+}
+table,
+p {
+  margin-bottom: 8px;
+}
+pre {
+  margin: 15px 0;
+  white-space: pre;
+  max-height: 516px;
+}
+pre,
+code,
+tt {
+  font-family: lucida console, monospace;
+  line-height: 1.25em;
+}
+blockquote {
+  margin: 8px 0 8px 8px;
+  border-left: 1px solid #ccc;
+  color: #666;
+  padding: 0 0 0 8px;
+}
+hr {
+  height: 1px;
+  border: 0;
+  border: none;
+  width: 100%;
+  background: #dbdbdb;
+  color: #dbdbdb;
+  margin: 15px 0;
+  padding: 0;
+}
+table,
+td,
+th {
+  vertical-align: top;
+  border-top: 1px solid #ccc;
+  border-left: 1px solid #ccc;
+}
+td,
+th {
+  padding: 5px;
+  border-right: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+}
+th {
+  font-weight: 700;
+}
+thead {
+  background: #fff;
+  background: linear-gradient(to bottom, #fff 0, #f0f0f0 100%);
+}
+tbody {
+  background-color: #fff;
+}
+dl,
+dt {
+  margin-bottom: 8px;
+}
+dd {
+  margin: 0 0 16px 24px;
+}
+kbd {
+  padding: 1px 3px;
+  margin: 3px;
+  font-weight: bold;
+  background: #fafafa;
+  border-radius: 3px;
+  border: 1px solid #e6e6e6;
+  color: unset;
+  box-shadow: 0px 2px 3px rgba(0,0,0,0.15);
+}
+.clear {
+  clear: both;
+}
+.hide {
+  display: none;
+}
+.show {
+  display: block;
+}
+.bold {
+  font-weight: 700;
+}
+.center {
+  text-align: center;
+}
+.left {
+  float: left;
+}
+.right {
+  float: right;
+}
+.first {
+  margin-left: 0;
+  padding-left: 0;
+}
+.last {
+  margin-right: 0;
+  padding-right: 0;
+}
+.top {
+  margin-top: 0;
+  padding-top: 0;
+}
+.bottom {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+.wrapper {
+  width: calc(100% - 20px);
+  margin: 0 auto;
+}
+.relative {
+  position: relative;
+}
+.block {
+  display: block;
+}
+.inline {
+  display: inline;
+}
+.inline-block {
+  display: inline-block;
+}
+.pointer {
+  cursor: pointer;
+}
+.ellip {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.underline {
+  text-decoration: underline;
+}
+.lowercase {
+  text-transform: lowercase;
+}
+.invisible {
+  visibility: hidden;
+}
+.wrapword {
+  word-wrap: break-word;
+}
+.grab {
+  cursor: grab;
+}
+.grabbing {
+  cursor: grabbing;
+}
+.textcomplete-dropdown {
+  z-index: 2000 !important;
+}
+.fa.fa-times-thin:before {
+  content: '\00d7';
+}
+.fa.fa-globe.colorful,
+.fa.fa-bell.colorful {
+  color: #4caf50;
+}
+.fa.fa-lock.colorful,
+.fa.fa-bell-slash.colorful {
+  color: #f44336;
+}
+.fa.fa-eye.colorful {
+  color: #4336f4;
+}
+.pop-over .pop-over-list li a:not(.disabled):hover .fa,
+.pop-over .pop-over-list li a:not(.disabled):hover .fa.colorful {
+  color: #fff;
+}
+.pop-over .pop-over-list li a:not(.disabled):hover .fa:hover,
+.pop-over .pop-over-list li a:not(.disabled):hover .fa.colorful:hover {
+  color: #fff;
+}
+a.fa,
+a i.fa {
+  color: #a6a6a6;
+}
+a:not(.disabled):hover.fa,
+a:not(.disabled).is-active.fa,
+a:not(.disabled):hover i.fa,
+a:not(.disabled).is-active i.fa {
+  color: #666;
+}
+.ui-draggable-dragging {
+  z-index: 200;
+}
+.atMention {
+  background: #dbdbdb;
+  border-radius: 3px;
+  padding: 1px 4px;
+  margin: -1px 0;
+  display: inline-block;
+}
+.atMention.me {
+  background: #cfdfe8;
+}
+.big-message {
+  display: block;
+  margin: 75px auto;
+  text-align: center;
+  max-width: 600px;
+}
+.big-message h1 {
+  font-size: 26px;
+  margin-bottom: 24px;
+}
+.big-message p {
+  font-size: 18px;
+  line-height: 22px;
+}
+.gutter {
+  margin-left: 38px;
+}
+.viewer {
+  min-height: 18px;
+  display: block;
+  word-wrap: break-word;
+}
+.viewer table {
+  word-wrap: normal;
+  word-break: normal;
+}
+.viewer ol {
+  list-style-type: decimal;
+  padding-left: 20px;
+  padding-bottom: 10px;
+}
+.viewer ul {
+  list-style-type: initial;
+  padding-left: 20px;
+  padding-bottom: 10px;
+}
+.viewer em {
+  font-style: italic;
+}
+.viewer pre {
+  padding: 10px 12px 7px;
+  background: #dedede;
+  overflow-y: auto;
+}
+.viewer a {
+  text-decoration: underline;
+}
+.viewer a:hover {
+  color: #333;
+}
+.basicTabs-container .tabs-content-container {
+  padding: 0;
+  padding-top: 15px;
+}
+@media screen and (max-width: 800px) {
+  #content {
+    margin: 1px 0px 0px 0px;
+    height: calc(100% - 0px);
+  }
+  #content > .wrapper {
+    margin-top: 0px;
+  }
+  .wrapper {
+    height: calc(100% - 31px);
+    margin: 0px;
+  }
+  .panel-default {
+    width: 83vw;
+  }
+}
+.inline-input {
+  height: 37px;
+  margin: 8px 10px 0 0;
+  width: 50px;
+}
+.select-authentication {
+  width: 100%;
+}
+.auth-layout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.auth-layout .auth-dialog {
+  margin: 0 !important;
+}
+.loadingText {
+  text-align: center;
+}
+.lds-roller {
+  display: block;
+  margin: auto;
+  position: relative;
+  width: 64px;
+  height: 64px;
+}
+.lds-roller div {
+  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  transform-origin: 32px 32px;
+}
+.lds-roller div:after {
+  content: " ";
+  display: block;
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #dedede;
+  margin: -3px 0 0 -3px;
+}
+.lds-roller div:nth-child(1) {
+  animation-delay: -0.036s;
+}
+.lds-roller div:nth-child(1):after {
+  top: 50px;
+  left: 50px;
+}
+.lds-roller div:nth-child(2) {
+  animation-delay: -0.072s;
+}
+.lds-roller div:nth-child(2):after {
+  top: 54px;
+  left: 45px;
+}
+.lds-roller div:nth-child(3) {
+  animation-delay: -0.108s;
+}
+.lds-roller div:nth-child(3):after {
+  top: 57px;
+  left: 39px;
+}
+.lds-roller div:nth-child(4) {
+  animation-delay: -0.144s;
+}
+.lds-roller div:nth-child(4):after {
+  top: 58px;
+  left: 32px;
+}
+.lds-roller div:nth-child(5) {
+  animation-delay: -0.18s;
+}
+.lds-roller div:nth-child(5):after {
+  top: 57px;
+  left: 25px;
+}
+.lds-roller div:nth-child(6) {
+  animation-delay: -0.216s;
+}
+.lds-roller div:nth-child(6):after {
+  top: 54px;
+  left: 19px;
+}
+.lds-roller div:nth-child(7) {
+  animation-delay: -0.252s;
+}
+.lds-roller div:nth-child(7):after {
+  top: 50px;
+  left: 14px;
+}
+.lds-roller div:nth-child(8) {
+  animation-delay: -0.288s;
+}
+.lds-roller div:nth-child(8):after {
+  top: 45px;
+  left: 10px;
+}
+#isSettingDatabaseCallDone {
+  display: none;
+}
+.at-link {
+  color: #17683a;
+  text-decoration: underline;
+  text-decoration-color: #17683a;
+}
+@-moz-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+}
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+}
+@-o-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+}
+@-moz-keyframes flexGrowIn {
+  from {
+    height: 100%;
+  }
+}
+@-webkit-keyframes flexGrowIn {
+  from {
+    height: 100%;
+  }
+}
+@-o-keyframes flexGrowIn {
+  from {
+    height: 100%;
+  }
+}
+@keyframes flexGrowIn {
+  from {
+    height: 100%;
+  }
+}
+@-moz-keyframes lds-roller {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes lds-roller {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes lds-roller {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes lds-roller {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

client/components/main/layouts.jade

@@ -16,6 +16,7 @@ head
   meta(name="application-name" content="Wekan")
   meta(name="msapplication-TileColor" content="#00aba9")
   meta(name="theme-color" content="#ffffff")
+  //link(rel="stylesheet" type="text/css" class="__meteor-css__" href="css/html5-default-theme.css")
 
 template(name="userFormsLayout")
   section.auth-layout

client/components/main/layouts.js

@@ -1,10 +1,6 @@
-BlazeLayout.setRoot('body');
+import { TAPi18n } from '/imports/i18n';
 
-const i18nTagToT9n = i18nTag => {
-  // t9n/i18n tags are same now, see: https://github.com/softwarerero/meteor-accounts-t9n/pull/129
-  // but we keep this conversion function here, to be aware that that they are different system.
-  return i18nTag;
-};
+BlazeLayout.setRoot('body');
 
 let alreadyCheck = 1;
 let isCheckDone = false;
@@ -104,11 +100,6 @@ Template.userFormsLayout.onRendered(() => {
     AccountsTemplates.state.form.keys,
     validator,
   );
-
-  const i18nTag = navigator.language;
-  if (i18nTag) {
-    T9n.setLanguage(i18nTagToT9n(i18nTag));
-  }
   EscapeActions.executeAll();
 });
 
@@ -133,11 +124,11 @@ Template.userFormsLayout.helpers({
   getLegalNoticeWithWritTraduction(){
     let spanLegalNoticeElt = $("#legalNoticeSpan");
     if(spanLegalNoticeElt != null && spanLegalNoticeElt != undefined){
-      spanLegalNoticeElt.html(TAPi18n.__('acceptance_of_our_legalNotice', {}, T9n.getLanguage() || 'en'));
+      spanLegalNoticeElt.html(TAPi18n.__('acceptance_of_our_legalNotice', {}));
     }
     let atLinkLegalNoticeElt = $("#legalNoticeAtLink");
     if(atLinkLegalNoticeElt != null && atLinkLegalNoticeElt != undefined){
-      atLinkLegalNoticeElt.html(TAPi18n.__('legalNotice', {}, T9n.getLanguage() || 'en'));
+      atLinkLegalNoticeElt.html(TAPi18n.__('legalNotice', {}));
     }
     return true;
   },
@@ -155,165 +146,27 @@ Template.userFormsLayout.helpers({
   },
 
   languages() {
-    return _.map(TAPi18n.getLanguages(), (lang, code) => {
-      const tag = code;
-      let name = lang.name;
-      if (lang.name === 'br') {
-        name = 'Brezhoneg';
-      } else if (lang.name === 'ar-EG') {
-        // ar-EG = Arabic (Egypt), simply Masri (مَصرى, [ˈmɑsˤɾi], Egyptian, Masr refers to Cairo)
-        name = 'مَصرى';
-      } else if (lang.name === 'cs-CZ') {
-        name = 'čeština (Česká republika)';
-      } else if (lang.name === 'de-CH') {
-        name = 'Deutsch (Schweiz)';
-      } else if (lang.name === 'de-AT') {
-        name = 'Deutsch (Österreich)';
-      } else if (lang.name === 'en-BR') {
-        name = 'English (Brazil)';
-      } else if (lang.name === 'en-DE') {
-        name = 'English (Germany)';
-      } else if (lang.name === 'en-IT') {
-        name = 'English (Italy)';
-      } else if (lang.name === 'en-YS') {
-        name = 'English (Yeshivish)';
-      } else if (lang.name === 'et-EE') {
-        name = 'eesti keel (Eesti)';
-      } else if (lang.name === 'fa-IR') {
-        // fa-IR = Persian (Iran)
-        name = 'فارسی/پارسی (ایران‎)';
-      } else if (lang.name === 'fr-BE') {
-        name = 'Français (Belgique)';
-      } else if (lang.name === 'fr-CA') {
-        name = 'Français (Canada)';
-      } else if (lang.name === 'fr-CH') {
-        name = 'Français (Schweiz)';
-      } else if (lang.name === 'gu-IN') {
-        // gu-IN = Gurajati (India)
-        name = 'ગુજરાતી';
-      } else if (lang.name === 'he-IL') {
-        // he-IL = Hebrew (Israel)
-        name = 'עברית (ישראל)';
-      } else if (lang.name === 'hi-IN') {
-        // hi-IN = Hindi (India)
-        name = 'हिंदी (भारत)';
-      } else if (lang.name === 'ig') {
-        name = 'Igbo';
-      } else if (lang.name === 'lv') {
-        name = 'Latviešu';
-      } else if (lang.name === 'latviešu valoda') {
-        name = 'Latviešu';
-      } else if (lang.name === 'ms-MY') {
-        // ms-MY = Malay (Malaysia)
-        name = 'بهاس ملايو';
-      } else if (lang.name === 'el-GR') {
-        // el-GR = Greek (Greece)
-        name = 'Ελληνικά (Ελλάδα)';
-      } else if (lang.name === 'Español') {
-        name = 'español';
-      } else if (lang.name === 'es_419') {
-        name = 'español de América Latina';
-      } else if (lang.name === 'es-419') {
-        name = 'español de América Latina';
-      } else if (lang.name === 'Español de América Latina') {
-        name = 'español de América Latina';
-      } else if (lang.name === 'es-LA') {
-        name = 'español de América Latina';
-      } else if (lang.name === 'Español de Argentina') {
-        name = 'español de Argentina';
-      } else if (lang.name === 'Español de Chile') {
-        name = 'español de Chile';
-      } else if (lang.name === 'Español de Colombia') {
-        name = 'español de Colombia';
-      } else if (lang.name === 'Español de México') {
-        name = 'español de México';
-      } else if (lang.name === 'es-PY') {
-        name = 'español de Paraguayo';
-      } else if (lang.name === 'Español de Paraguayo') {
-        name = 'español de Paraguayo';
-      } else if (lang.name === 'Español de Perú') {
-        name = 'español de Perú';
-      } else if (lang.name === 'Español de Puerto Rico') {
-        name = 'español de Puerto Rico';
-      } else if (lang.name === 'gl-ES') {
-        name = 'Galego (España)';
-      } else if (lang.name === 'ko-KR') {
-        name = '한국어(한국)';
-      } else if (lang.name === 'nl-NL') {
-        name = 'Nederlands (Nederland)';
-      } else if (lang.name === 'oc') {
-        name = 'Occitan';
-      } else if (lang.name === 'pl-PL') {
-        name = 'polski (Polska)';
-      } else if (lang.name === 'ru-UA') {
-        name = 'Русский (Украина)';
-      } else if (lang.name === 'st') {
-        name = 'Sãotomense';
-      } else if (lang.name === 'uz-AR') {
-        name = "o'zbek (arab)";
-      } else if (lang.name === 'uz-LA') {
-        name = "o'zbek (lotin)";
-      } else if (lang.name === 'uz-UZ') {
-        name = "o'zbek (O'zbekiston)";
-      } else if (lang.name === 'uk-UA') {
-        name = 'українська (Україна)';
-      } else if (lang.name === 've-CC') {
-        name = 'vèneto';
-      } else if (lang.name === 've-PP') {
-        name = 'vepsän kelʹ';
-      } else if (lang.name === 've') {
-        name = 'Tshivenḓa';
-      } else if (lang.name === 'vi-VN') {
-        name = 'Tiếng Việt (Việt Nam)';
-      } else if (lang.name === 'vo') {
-        name = 'Volapük';
-      } else if (lang.name === 'vl-SS') {
-        name = 'Vlaams';
-      } else if (lang.name === 'wa') {
-        name = 'walon';
-      } else if (lang.name === 'wa-RR') {
-        name = 'Wáray-Wáray';
-      } else if (lang.name === 'wo') {
-        name = 'ولوفل';
-      } else if (lang.name === 'cy-GB') {
-        name = 'Welsh (UK)';
-      } else if (lang.name === 'fy-NL') {
-        name = 'Westerlauwersk Frysk';
-      } else if (lang.name === 'xh') {
-        name = 'isiXhosa';
-      } else if (lang.name === 'yi') {
-        name = 'ייִדיש, יידיש';
-      } else if (lang.name === 'yo') {
-        name = 'Èdè Yorùbá';
-      } else if (lang.name === 'zu-ZA') {
-        name = 'isiZulu (Ningizimu Afrika)';
-      } else if (lang.name === 'zu') {
-        name = 'isiZulu';
-      } else if (lang.name === '繁体中文（台湾）') {
-        // Traditional Chinese (Taiwan)
-        name = '繁體中文（台灣）';
-      }
-      return { tag, name };
-    }).sort(function(a, b) {
-      if (a.name === b.name) {
-        return 0;
-      } else {
-        return a.name > b.name ? 1 : -1;
-      }
-    });
+    return TAPi18n.getSupportedLanguages()
+      .map(({ tag, name }) => ({ tag: tag, name }))
+      .sort((a, b) => {
+        if (a.name === b.name) {
+          return 0;
+        } else {
+          return a.name > b.name ? 1 : -1;
+        }
+      });
   },
 
   isCurrentLanguage() {
-    const t9nTag = i18nTagToT9n(this.tag);
-    const curLang = T9n.getLanguage() || 'en';
-    return t9nTag === curLang;
+    const curLang = TAPi18n.getLanguage();
+    return this.tag === curLang;
   },
 });
 
 Template.userFormsLayout.events({
   'change .js-userform-set-language'(event) {
-    const i18nTag = $(event.currentTarget).val();
-    T9n.setLanguage(i18nTagToT9n(i18nTag));
+    const tag = $(event.currentTarget).val();
+    TAPi18n.setLanguage(tag);
     event.preventDefault();
   },
   'click #at-btn'(event, templateInstance) {

client/components/main/layouts.styl

@@ -1,552 +0,0 @@
-@import 'nib'
-
-global-reset()
-
-*
-  -webkit-box-sizing: unset
-  box-sizing: unset
-
-.note-popover .popover-content .note-color-palette div .note-color-btn, .panel-heading.note-toolbar .note-color-palette div .note-color-btn
-  background: none
-
-a:focus
-  outline: unset
-  outline-offset: unset
-
-a:hover,a:focus
-  color: unset
-  text-decoration: unset
-
-.badge
-  display: unset
-  min-width: unset
-  padding: unset
-  font-size: unset
-  font-weight: unset
-  line-height: unset
-  color: unset
-  text-align: unset
-  white-space: unset
-  vertical-align: unset
-  background-color: unset
-  border-radius: unset
-
-html, body, input, select, textarea, button
-  font: 14px Roboto, Poppins, "Helvetica Neue", Arial, Helvetica, sans-serif
-  line-height: 18px
-  color: #4d4d4d
-
-html
-  font-size: 100%
-  max-height: 100%
-  user-select: none
-  -webkit-text-size-adjust: 100%
-
-body
-  background: darken(white, 13%)
-  margin: 0
-  position: relative
-  z-index: 0
-  overflow-y: auto
-  display: flex
-  flex-direction: column
-  height: 100vh
-
-#content
-  position: relative
-  flex: 1
-  overflow-x: hidden
-
-  .sk-spinner
-    margin-top: 30vh
-
-  > .wrapper
-    margin-top: 10px
-    padding: 15px
-
-#modal
-  position: absolute
-  top: 0
-  bottom: 0
-  left: 0
-  right: 0
-  background: rgba(0, 0, 0, 0.6)
-  z-index: 100
-  overflow-y: auto
-
-  .modal-content
-    width: 500px
-    min-height: 160px
-    margin: 42px auto
-    padding: 12px
-    border-radius: 4px
-    background: darken(white, 13%)
-    z-index: 110
-
-    h2
-      margin-bottom: 25px
-
-    .modal-close-btn
-      display: block
-      float: right
-      font-size: 24px
-
-  .modal-content-wide
-    width: 800px
-    min-height: 0px
-    margin: 42px auto
-    padding: 12px
-    border-radius: 4px
-    background: darken(white, 13%)
-    z-index: 110
-
-    h2
-      margin-bottom: 25px
-
-    .modal-close-btn
-      display: block
-      float: right
-      font-size: 24px
-
-h1
-  font-size: 22px
-  line-height: 1.2em
-  margin: 0 0 10px
-
-h2
-  font-size: 18px
-  line-height: 1.2em
-  margin: 0 0 9px
-
-h3, h4, h5, h6
-  font-size: 16px
-  line-height: 1.25em
-  margin: 0 0 6px
-
-.quiet, .quiet a
-  color: #8c8c8c
-
-.error, .error a
-  color: #eb3800
-
-.no-items-message
-  color: darken(white, 60%)
-  margin: 30px 0
-  text-align: center
-
-.warning
-  background: #f0ecdb
-  border-radius: 3px
-  color: #aa8f09
-  padding: 6px 8px
-
-  a
-    color: #aa8f09
-
-.small
-  font-size: 0.8em
-
-a
-  color: inherit
-  cursor: pointer
-  text-decoration: none
-
-  &.is-disabled,
-  &.is-disabled:hover
-    cursor: default
-    text-decoration: none
-
-span a
-  text-decoration: underline
-
-strong
-  font-weight: bold
-
-p
-  user-select: text
-
-  a
-    text-decoration: underline
-    word-wrap: break-word
-
-table, p
-  margin-bottom: 8px
-
-pre
-  margin: 15px 0
-  white-space: pre
-  max-height: 516px
-
-pre,
-code,
-tt
-  font-family: lucida console, monospace
-  line-height: 1.25em
-
-blockquote
-  margin: 8px 0 8px 8px
-  border-left: 1px solid #ccc
-  color: #666
-  padding: 0 0 0 8px
-
-hr
-  height: 1px
-  border: 0
-  border: none
-  width: 100%
-  background: #dbdbdb
-  color: #dbdbdb
-  margin: 15px 0
-  padding: 0
-
-table, td, th
-  vertical-align: top
-  border-top: 1px solid #ccc
-  border-left: 1px solid #ccc
-
-td, th
-  padding: 5px
-  border-right: 1px solid #ccc
-  border-bottom: 1px solid #ccc
-
-th
-  font-weight: 700
-
-thead
-  background: #fff
-  background: linear-gradient(to bottom, #fff 0, #f0f0f0 100%)
-
-tbody
-  background-color: #fff
-
-dl, dt
-  margin-bottom: 8px
-
-dd
-  margin: 0 0 16px 24px
-
-kbd
-  padding: 1px 3px
-  margin: 3px
-  font-weight: bold
-  background: darken(white, 2%)
-  border-radius: 3px
-  border: 1px solid darken(white, 10%)
-  color: unset
-  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15)
-
-.clear
-  clear: both
-
-.clearfix
-  clearfix()
-
-.hide
-  display: none
-
-.show
-  display: block
-
-.bold
-  font-weight: 700
-
-.center
-  text-align: center
-
-.left
-  float: left
-
-.right
-  float: right
-
-.first
-  margin-left: 0
-  padding-left: 0
-
-.last
-  margin-right: 0
-  padding-right: 0
-
-.top
-  margin-top: 0
-  padding-top: 0
-
-.bottom
-  margin-bottom: 0
-  padding-bottom: 0
-
-.wrapper
-  width: calc(100% - 20px)
-  margin: 0 auto
-
-.relative
-  position: relative
-
-.block
-  display: block
-
-.inline
-  display: inline
-
-.inline-block
-  display: inline-block
-
-.pointer
-  cursor: pointer
-
-.ellip
-  overflow: hidden
-  text-overflow: ellipsis
-  white-space: nowrap
-
-.underline
-  text-decoration: underline
-
-.lowercase
-  text-transform: lowercase
-
-.invisible
-  visibility: hidden
-
-.wrapword
-  word-wrap: break-word
-
-.grab
-  cursor: grab
-
-.grabbing
-  cursor: grabbing
-
-.textcomplete-dropdown
-  z-index: 2000 !important;
-
-// Implement a thiner close icon as suggested in
-// https://github.com/FortAwesome/Font-Awesome/issues/1540#issuecomment-68689950
-.fa.fa-times-thin:before
-  content: '\00d7'
-
-.fa.fa-globe.colorful, .fa.fa-bell.colorful
-  color: #4caf50
-
-.fa.fa-lock.colorful, .fa.fa-bell-slash.colorful
-  color: #f44336
-
-.fa.fa-eye.colorful
-  color: #4336f4
-
-.pop-over .pop-over-list li a:not(.disabled):hover
-  .fa, .fa.colorful
-    color: white
-
-    &:hover
-      color: white
-
-a
-  &.fa, i.fa
-    color: darken(white, 35%)
-
-  &:not(.disabled):hover, &:not(.disabled).is-active
-    &.fa, i.fa
-      color: darken(white, 60%)
-
-.ui-draggable-dragging
-  z-index: 200
-
-.atMention
-  background: #dbdbdb
-  border-radius: 3px
-  padding: 1px 4px
-  margin: -1px 0
-  display: inline-block
-
-  &.me
-    background: #cfdfe8
-
-.big-message
-  display: block
-  margin: 75px auto
-  text-align: center
-  max-width: 600px
-
-  h1
-    font-size: 26px
-    margin-bottom: 24px
-
-  p
-    font-size: 18px
-    line-height: 22px
-
-.gutter
-  margin-left: 38px
-
-.viewer
-  min-height: 18px
-  display: block
-  word-wrap: break-word
-
-  table
-    word-wrap: normal
-    word-break: normal
-
-  ol
-    list-style-type: decimal
-    padding-left: 20px
-    padding-bottom: 10px
-
-  ul
-    list-style-type: initial
-    padding-left: 20px
-    padding-bottom: 10px
-
-  em
-    font-style : italic
-
-  pre
-    padding: 10px 12px 7px
-    background: darken(white, 13%)
-    overflow-y: auto
-
-  a
-    text-decoration: underline
-    &:hover
-      color: #333
-
-.basicTabs-container .tabs-content-container
-  padding: 0
-  padding-top: 15px
-
-@keyframes fadeIn
-  from
-    opacity: 0
-
-@keyframes flexGrowIn
-  from
-    // Support IE11 https://github.com/wekan/wekan/pull/646
-    height: 100%
-
-@media screen and (max-width: 800px)
-  #content
-    margin: 1px 0px 0px 0px
-    height: calc(100% - 0px)
-
-    > .wrapper
-      margin-top: 0px
-
-  .wrapper
-    height: calc(100% - 31px)
-    margin: 0px
-
-  .panel-default
-    width: 83vw
-
-.inline-input
-  height: 37px
-  margin: 8px 10px 0 0
-  width: 50px
-
-.select-authentication
-  width: 100%
-
-.auth-layout
-  display: flex
-  flex-direction: column
-  align-items: center
-  justify-content: center
-
-  .auth-dialog
-    margin: 0 !important
-
-.loadingText
-  text-align: center
-
-.lds-roller
-  display: block
-  margin: auto
-  position: relative
-  width: 64px
-  height: 64px
-
-  div
-    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite
-    transform-origin: 32px 32px
-
-  div:after
-    content: " "
-    display: block
-    position: absolute
-    width: 6px
-    height: 6px
-    border-radius: 50%
-    background: #dedede
-    margin: -3px 0 0 -3px
-
-  div:nth-child(1)
-    animation-delay: -0.036s
-
-  div:nth-child(1):after
-    top: 50px
-    left: 50px
-
-  div:nth-child(2)
-    animation-delay: -0.072s
-
-  div:nth-child(2):after
-    top: 54px
-    left: 45px
-
-  div:nth-child(3)
-    animation-delay: -0.108s
-
-  div:nth-child(3):after
-    top: 57px
-    left: 39px
-
-  div:nth-child(4)
-    animation-delay: -0.144s
-
-  div:nth-child(4):after
-    top: 58px
-    left: 32px
-
-  div:nth-child(5)
-    animation-delay: -0.18s
-
-  div:nth-child(5):after
-    top: 57px
-    left: 25px
-
-  div:nth-child(6)
-    animation-delay: -0.216s
-
-  div:nth-child(6):after
-    top: 54px
-    left: 19px
-
-  div:nth-child(7)
-    animation-delay: -0.252s
-
-  div:nth-child(7):after
-    top: 50px
-    left: 14px
-
-  div:nth-child(8)
-    animation-delay: -0.288s
-
-  div:nth-child(8):after
-    top: 45px
-    left: 10px
-
-@keyframes lds-roller
-  0%
-    transform: rotate(0deg)
-
-  100%
-    transform: rotate(360deg)
-
-#isSettingDatabaseCallDone
-  display: none;
-
-.at-link
-  color: #17683a;
-  text-decoration: underline;
-  text-decoration-color: #17683a;

client/components/main/myCards.css

@@ -0,0 +1,74 @@
+.my-cards-board-wrapper {
+  border-radius: 0 0 4px 4px;
+  min-width: 400px;
+  margin-bottom: 2rem;
+  margin-right: auto;
+  margin-left: auto;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #a2a2a2;
+}
+.my-cards-board-title {
+  font-size: 1.4rem;
+  font-weight: bold;
+  padding: 0.5rem;
+  background-color: #808080;
+  color: #fff;
+}
+.my-cards-swimlane-title {
+  font-size: 1.1rem;
+  font-weight: bold;
+  padding: 0.5rem;
+  padding-bottom: 0.4rem;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  text-align: center;
+}
+.swimlane-default-color {
+  background-color: #d3d3d3;
+}
+.my-cards-list-title {
+  font-weight: bold;
+  font-size: 1.1rem;
+  text-align: center;
+  margin-bottom: 0.7rem;
+}
+.my-cards-list-wrapper {
+  margin: 1rem;
+  border-radius: 5px;
+  display: inline-grid;
+  min-width: 250px;
+  max-width: 350px;
+}
+.my-cards-card-wrapper {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+.my-cards-dueat-list-wrapper {
+  max-width: 500px;
+  margin-right: auto;
+  margin-left: auto;
+}
+.my-cards-board-table thead {
+  border-bottom: 3px solid #4d4d4d;
+  background-color: transparent;
+}
+.my-cards-board-table th,
+.my-cards-board-table td {
+  border: 0;
+}
+.my-cards-board-table tr {
+  border-bottom: 2px solid #a2a2a2;
+}
+.my-cards-card-title-table {
+  font-weight: bold;
+  padding-left: 2px;
+  max-width: 243px;
+}
+.my-cards-board-badge {
+  width: 36px;
+  height: 24px;
+  float: left;
+  border-radius: 5px;
+  margin-right: 5px;
+}