More business. Less Playmobil.

Trello Slim.css

/* ••• Works with Stylish ••••••• *
 * ••• https://userstyles.org ••• */


/* font size (cards etc) */
html, html body, html input, html select, html textarea {
  font-size: 12px;
  font-family: Tahoma;
} /* instead of 14px */


/**************** LIST container of cards *****************/

div#board div.list:first-child {
  	flex: 0 0 440px;

}
div.list {
    background-color: #ffffff !important;
    border-radius: 0px !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-right: 1px !important;
    margin-bottom: 10px !important;
    margin-left: 1px !important;
  width: 100%;
	flex: 0 0 220px;
}

div.list.add-list.idle {
  display: none;
}
div.list div.list-header h2 {
    margin-top: 12px !important;
    margin-bottom: 7px !important;
    font-family: "Helvetica" !important;
    font-weight: 200;
  color: #666;
}
div.list div.list-header span.cardCounter {
    opacity: .5;
    font-size: .8rem;
  font-family: Tahoma;
  font-weight: normal;
  background: #999;
}

div.list div.list-header div.list-title {
    text-align: center !important;
    font-weight: 100 !important;
}

/**************** CARDS *****************/

/* card*/
div.list-card {
    border-color: #D6D6D6 !important;
    border: none !important;
    /*border-bottom: 1px solid #ddd ;*/
    border-top: 1px dotted #ccc !important;
    border-radius: 0px !important;
  max-width: 100%;
}
div.list-card-details {
  padding: 0 5px;
  }
span.list-card-operation {
	opacity: .33;
	background: none;
	color: red;
}
span.list-card-operation:hover {
	opacity: .66;
	color: red !important;
}
div.list-card.selected, div.list-card.active-card {
    /* on hover/selected */
    border-color: #828282 !important;
    /*box-shadow: 0 0 5px #828282 ;*/
    box-shadow: none !important;
}
div.list-card-labels {
    margin: 3px 0;
    position: absolute;
	right: 0;
  opacity: .67
}
div.list-card-details:hover div.list-card-labels {
    opacity: 1
}
div.list-card-labels .card-label {
    border-radius: 0;
    float: right;
    margin-bottom: 1px;
    border-radius: 4px;
    padding: 0;
    width: 8px;
    height: 8px;
    line-height: 100px;
}
div.list-card-stickers-area clearfix {
  	
}
div.list-card.has-stickers div.stickers {
  height: 35px;
}

div.list-card.has-stickers div.stickers div.sticker,
div.list-card.has-stickers div.stickers img.sticker-image {
  height: 40px;
  width: 40px;
}
div.list-card.has-stickers div.list-card-details {
  margin-top: 30px;
}
/* list top and bottom divider*/
.list-gradient-top, .list-gradient-bottom {background: none !important;}

/**************** ADD A CARD LINK *****************/

.list a.open-card-composer {
    text-align: center !important;
    border-radius: 0px !important;
    border-top: 1px dashed #ccc !important;
    margin: 0px!important;
    box-shadow: none !important;
    padding: 14px 0 !important;
    /*text-transform: uppercase ;*/
    /*font-size: 10px ;*/
    color: #51a1f7 !important;
    text-decoration: none !important;
    vertical-align: middle !important;
}
.open-card-composer:hover {
    background-color: #eee !important;
    /*color: #fff;*/
}
.open-card-composer:after {
    width: 100%;
    height: 5px;
    content: "";
    position: absolute;
    display:block;
    top: 45px;
    left: -0px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABNSURBVBiVrZDBCcAgFMViB+oujuHdQZzQEbpCevmlYosnA4HPI6efVNnIMdwCDTjDFtvMuvOlqkxWvyw71K7mn+ixqFdYFl1We9r8Qm7P7JRO/qEsAwAAAABJRU5ErkJggg==");
}
.open-card-composer:hover:after {
    width: 100%;
    height: 5px;
    content: "";
    position: absolute;
    display:block;
    top: 45px;
    left: -0px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABaSURBVBiVrZDBCYAwFEOjA3UXx+i9gzhhN/jvjxAvFkVUPBgIBPIgkAmwftR8yra9SiqSyp7vxt45wIAjotnW2RHRRv+VE9Azc7lCw0DlUH3iMnMB+mT/eqE2FJScDaGSTGgAAAAASUVORK5CYII=");
}

/* empty list fix */

.list-car-area, .list-cards.fancy-scrollbar {
    min-height: 0px!important;
}


/**************** CARD Labels *****************/

.list-cards .card-labels {
    /*margin-top: -14px!important;*/
}

div.list-cards div.card-labels span.card-label {
    height: 12px;
    width: 12pxt;
    border-radius: 6px;
    margin-top: -6px;
    margin-left: 6px;
}

.list-cards {
    padding: 0 !important;
}

div.card-label.blue-label {
    background-color: #3B7CFF !important;
}
div.card-label.green-label {
    background-color: #51C702 !important;
}
div.card-label.red-label {
    background-color: #C90000 !important;
}
div.card-label.orange-label {
    background-color: #FF6600 !important;
}
div.card-label.yellow-label {
    background-color: #EDED05 !important;
}
div.card-label.purple-label {
    background-color: #9933CC !important;
}

/**************** CARD MEMBERS *****************/

.member {
    border-radius: 15px !important;
    overflow: visible !important;
    margin-right: 5px !important;
}

.member img {
    border-radius: 15px !important;
}

.member .status, .member .member-type {
    border: 1px solid white !important;
    border-radius: 5px !important;
}

.member .status.active {
    background-color: #1b1 !important;
}

/**************** CARD CONTENT (back side) *****************/

/* labels */
.current.js-card-desc.js-show-with-desc {
background: #FDA;
outline: 5px solid #FDA;
}
.card-label {text-shadow: none !important;}
.list-card-details .badges {
	line-height: 8px;
      height: 8px;
      overflow: hidden;
    }
.list-card-details .badge-text,
.list-card-details .badge-icon {
  	line-height: 8px;
  font-size: 8px;
    margin-right: .25em;
    }
.list-card-details .badge-text {
          font-size: 9px;
                }
/* card content buttons */
.button-link:hover {
    background: -moz-linear-gradient(center top , #676767 0%, #3F3F3F 100%) repeat scroll 0 0 transparent !important;
    border-color: #3F3F3F !important;
    }
    
/* More links */
.pop-over-list li > a:hover,
.uploader:hover .fakefile {background: #424242 !important; border:none !important;}

/* button for comment etc */
input.primary[type="submit"], input.primary[type="button"], 
button.primary, .button.primary {
    background: -moz-linear-gradient(center top , #676767 0%, #3F3F3F 100%) repeat scroll 0 0 transparent !important; }

/* image/attachment icon and background */
.attachment-list li .preview .check-icon {background-color: #676767 !important;}
.attachment-list li .preview.is-cover {background-color: #676767 !important;}

a.button-link {
  font-weight: normal;
  }

/**************** TOGGLE BAR *****************/

.board-side-btn.left-side .arrow{
  border-left-color: #757575 !important;;
  border-right-color: #757575 !important;;
}
/* toggle arrow on the right */
.extra-large-window .board-wrapper.disabled-all-widgets .board-side-btn.right-side .arrow, 
.large-window .board-wrapper.disabled-all-widgets .board-side-btn.right-side .arrow, 
.medium-window .board-wrapper.disabled-all-widgets .board-side-btn.right-side .arrow {
    border-right-color: #757575 !important;} /* open arrow */ 
.extra-large-window .board-side-btn.right-side .arrow, 
.large-window .board-side-btn.right-side .arrow, 
.medium-window .board-side-btn.right-side .arrow {
    border-left-color: #757575 !important;} /* close arrow */ 
/* toggle bar */
.extra-large-window .board-side-btn:hover, 
.large-window .board-side-btn:hover, 
.medium-window .board-side-btn:hover {background: #ADADAD !important;}


/**************** WEBKIT SCROLLBARS *****************/

.extra-large-window.layout-horiz-scroll .board-wrapper.disabled-list-guide .list-guide,.large-window.layout-horiz-scroll .board-wrapper.disabled-list-guide .list-guide{display:none;}
.extra-large-window.layout-horiz-scroll .board-wrapper.disabled-list-guide #board,.large-window.layout-horiz-scroll .board-wrapper.disabled-list-guide #board{margin-left:8px;border-radius:3px;}
.extra-large-window.layout-horiz-scroll #board,.large-window.layout-horiz-scroll #board{border-top-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:0;margin-left:155px;}
.extra-large-window.layout-horiz-scroll .list-area-wrapper,.large-window.layout-horiz-scroll .list-area-wrapper{overflow-x:scroll;overflow-y:hidden;}.extra-large-window.layout-horiz-scroll .list-area-wrapper::-webkit-scrollbar,.large-window.layout-horiz-scroll .list-area-wrapper::-webkit-scrollbar{height:13px;width:13px;}
.extra-large-window.layout-horiz-scroll .list-area-wrapper::-webkit-scrollbar-thumb:vertical,.large-window.layout-horiz-scroll .list-area-wrapper::-webkit-scrollbar-thumb:vertical,.extra-large-window.layout-horiz-scroll .list-area-wrapper::-webkit-scrollbar-thumb:horizontal,.large-window.layout-horiz-scroll .list-area-wrapper::-webkit-scrollbar-thumb:horizontal{background:#888a85;border-color:transparent;}
.extra-large-window.layout-horiz-scroll .list-area-wrapper::-webkit-scrollbar-track-piece,.large-window.layout-horiz-scroll .list-area-wrapper::-webkit-scrollbar-track-piece{background: rgba(245, 245, 245, 0.16);}
.extra-large-window.layout-horiz-scroll .list-area-wrapper::-webkit-scrollbar-button,.large-window.layout-horiz-scroll .list-area-wrapper::-webkit-scrollbar-button{display:block;height:2px;width:2px;}
.extra-large-window.layout-horiz-scroll .list-guide,.large-window.layout-horiz-scroll .list-guide{display:block;left:8px;position:absolute;top:42px;}
.extra-large-window.layout-horiz-scroll.window-up .list-guide,.large-window.layout-horiz-scroll.window-up .list-guide{-webkit-box-shadow:none;box-shadow:none;}
  
  
/**************** BOARD *****************/

/* board background */
div#board, div.list-guide {
    background-color: rgba(0,0,0,0.5);
}
.list-guide-wrapper .list-link.visible {
    background-color: rgba(255,255,255,0.1)
}

Great new style in my Trello! Thank you very much :-). I just wanted to slim down the lists. I managed to do so with your style but the problem now is the spacing in between the lists (screenshot attached). Could you please advise me on how this can be tweaked within your code? Thank you!

Also, after change the style of Trello with your code there is a Toggl button missing from Trello cards: https://support.toggl.com/toggl-trello-time-tracking-integration/. Is there a way to make it stay? Would be great if the two could work together. Thank you!

Sorry to bother you again but it seems that the plugin itself is not working correctly so I guess this is not due to your style.