Custom Trello Styles - in Mac Safari - using User CSS Extension

trello-user-css-safari.css

/* 
*  Subtler, clearer colors and edges
*  Emphsasize first two lists 
*  -- can be modified in CSS to include fewer or more lists 
*/

* {
border-radius: 0 !important;
}

#header {
background: #434345 !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
}

.header-user {
top: 12px !important;
}

.header-btn {
margin-right: 16px !important;
}

#board {
background: #767676 !important;
}

.list {
/* This breaks layout 
   commented out */
/* 
width: 320px !important;
background: #eaeaea !important;
padding: 8px !important;
margin: 6px 8px 12px 10px !important; 
*/
border: none !important;
}

.list-header .list-title h2 {
font-weight: normal !important;
font-size: 20px !important;
color: #767676 !important;
line-height: 1.2 !important;
}

.list-header .list-title .icon-menu {
visibility: visible !important;
}

.list-gradient-top,
.list-gradient-bottom {
background: transparent !important;
}

.list-card {
margin: 6px 6px 10px 2px !important;
padding: 10px 4px 4px 20px !important;
border: none !important;
box-shadow: 0px 0px 2px #9a9a9a !important;
}

.list-card:hover {
box-shadow: 0px 0px 3px #191919 !important;
}

.list-card-title {
font-family: "helvetica neue", helvetica, arial, sans-serif;
font-size: 14px !important;
/* text-transform: uppercase; */
color: #575757 !important;
letter-spacing: 0.07em !important;
font-weight: bold !important;
line-height: 1.2 !important;
margin-right: 12px !important;
padding: 0px 0px 8px 0 !important;
clear: none !important;
/* width: 70%;
float: left; */
}

.list-card .card-operation {
visibility: visible !important;
color: #cacaca !important;
}

.list-card:hover .card-operation {
color: #979797 !important;
}

.list-card .card-labels {
width: 40px;
float: right;
}

#board .card-labels {
margin-right: 18px !important;
}

.list-card .card-labels .card-label {
/* float: right !important;
padding: 0 !important;
border-radius: 8px !important;
margin-top: 4px !important;
width: 16px !important;
height: 16px !important;
*/

/* Stretch color labels across left end */
position: absolute;
top: 0 !important;
left: 0 !important;
height: 88% !important;
width: 10px !important;
opacity: 0.8;
/* 
border-radius: 0 !important;
*/
border-top-right-radius: 4px !important;
border-bottom-right-radius: 4px !important;
margin-top: 5px;

}

.list-card-members {
 margin: 0 !important;
}

.member,
.header-auth.member {
margin: 0 4px 4px 0 !important;
border-radius: 15px !important;
border: none !important;
overflow: hidden !important;
}

.member-large {
border-radius: 25px !important;
overflow: hidden !important;
}

.profile-member {
border-radius: 85px !important;
border: none !important;
overflow: hidden !important;
}

.badges {
clear: both !important;
}

.badge.due-future {
background: green !important;
}
.badge.due-future [class*="icon"],
.badge.due-future .badge-text {
color: white !important;
}
.badge.due-soon {
background: #d78e1e !important;
}



/* Emphasize first two lists */
.list:nth-of-type(-n+2) {
background: #f7f7f7 !important;
}
.list:nth-of-type(-n+2) .list-header .list-title h2 {
color: #d7691e !important;
font-size: 28px !important;
line-height: 28px !important;
}
.list:nth-of-type(n+3) .list-card {
padding: 3px 3px 3px 6px !important;
background: #fdfdfd !important;
box-shadow: none !important;
font-size: 14px !important;
opacity: 0.7 !important;
}
.list:nth-of-type(n+3) .list-card:hover {
opacity: 1 !important;
}

/* 
.list:nth-of-type(n+3) .list-card-title {
font-size: 0.94em !important;
font-style: normal !important;
color: #979797 !important;
} 
.list:nth-of-type(n+3) .badge.due-future {
opacity: 0.6;
}
.list:nth-of-type(n+3) .member {
opacity: 0.6;
}
*/


/* Actions List */

.board-actions-list {
padding-top: 4px !important;
}

.phenom {
padding: 4px 2px 4px 36px !important;
}

.phenom .creator {
top: 5px !important;
border: none !important;
opacity: 0.6 !important;
}

.phenom:hover .creator {
opacity: 0.8 !important;
}

.phenom-desc {
float: left !important;
display: inline;
}

.phenom-desc,
.phenom-desc a {
font-size: 12px !important;
font-weight: normal !important;
line-height: 1.2 !important;
margin: 0 !important;
padding: 0 !important;
color: #767676 !important;
}

.phenom:hover .phenom-desc {
color: #454545 !important;
}

.phenom:hover .phenom-desc a {
color: #454595 !important;
}

.phenom-meta {
font-size: 10px !important;
margin: 0 !important;
padding: 0 !important;
float: right !important;
}

.activity-gradient-t,
.activity-gradient-b {
display: none !important;
}