Last active
September 23, 2018 16:43
-
-
Save chrisblakley/6a61e730f6e8a95b84ca to your computer and use it in GitHub Desktop.
Custom CSS to enchance Trello.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Show the move cursor to demonstrate drag/drop scrolling on the interface. */ | |
#board { | |
cursor: move; | |
} | |
#board .list { | |
cursor: default; | |
} | |
/* Change the background to a texture while maintaining board color. */ | |
.body-board-view { | |
background-image: url(http://www.transparenttextures.com/patterns/black-linen.png); | |
background-size: initial; | |
} | |
/* Prevent cards with images from taking up too much vertical real estate. */ | |
.list { | |
-moz-transition: all 0.25s ease 0s; | |
-o-transition: all 0.25s ease 0s; | |
-webkit-transition: all 0.25s ease 0s; | |
background: rgba(255,255,255,.4); | |
color: #fff; | |
transition: all 0.25s ease 0s; | |
width: 250px; | |
} | |
.list a.open-card-composer { | |
background: none; | |
color: #ffffff; | |
} | |
.list-card-cover { | |
-moz-transition: all 0.25s ease 0s; | |
-o-transition: all 0.25s ease 0s; | |
-webkit-transition: all 0.25s ease 0s; | |
/* height: 30px; */ /* Trello updated to have this class on all cards- not just ones with pictures. */ | |
max-height: 150px; | |
transition: all 0.25s ease 0s; | |
} | |
.list-card.has-stickers .list-card-details { | |
margin-top: 0; | |
} | |
/* Expand to show the cover image of the card when hovering. */ | |
/* | |
.list-card:hover .list-card-cover { | |
height: 150px ; | |
} | |
*/ | |
.list-header { | |
border-radius: 3px 3px 0 0; | |
} | |
.list-header-num-cards { | |
color: rgba(255,255,255,0.6); | |
font-size: 12px; | |
} | |
/* Colorize the headers of each column. Add more as needed. */ | |
.list:nth-of-type(1) .list-header { | |
background: rgb(100,200,210); | |
} | |
.list:nth-of-type(1):hover { | |
background: rgb(100,200,210); | |
} | |
.list:nth-of-type(2) .list-header { | |
background: rgb(160,110,60); | |
} | |
.list:nth-of-type(2):hover { | |
background: rgb(160,110,60); | |
} | |
.list:nth-of-type(3) .list-header { | |
background: rgb(140,70,160); | |
} | |
.list:nth-of-type(3):hover { | |
background: rgb(140,70,160); | |
} | |
.list:nth-of-type(4) .list-header { | |
background: rgb(170,70,70); | |
} | |
.list:nth-of-type(4):hover { | |
background: rgb(170,70,70); | |
} | |
.list:nth-of-type(5) .list-header { | |
background: rgb(200,200,90); | |
} | |
.list:nth-of-type(5):hover { | |
background: rgb(200,200,90); | |
} | |
.list:nth-of-type(6) .list-header { | |
background: rgb(100,160,110); | |
} | |
.list:nth-of-type(6):hover { | |
background: rgb(100,160,110); | |
} | |
/* This hides the sidebar button. */ | |
.sidebar-hide-btn { | |
display: none; | |
} | |
/* This hides all stickers. */ | |
.sticker, .stickers, .window-cover-stickers-only { | |
display: none; | |
} | |
.window-cover, .list-card-cover { | |
background-size: cover ; | |
background-position: top center; | |
} | |
/* These can be used to further demonstrate drag/drop. However, JS injection would nbe needed. | |
#board { | |
cursor: -webkit-grabbing; | |
} | |
#board { | |
cursor: -webkit-grab; | |
} | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment