Skip to content

Instantly share code, notes, and snippets.

@tinabeans
Last active Dec 16, 2015
Embed
What would you like to do?
Trello board style experiments. Put this in Stylebot in Chrome. Didn't test in other browsers but it probably works in Safari, too. :)
#board {
background: none;
border-radius: 0;
box-shadow: none;
margin-left: 0;
margin-right: 250px;
padding: 0;
}
#board-header {
margin: 0;
padding: 16px 10px 18px 20px;
}
#board-header .board-name {
font-size: 24px;
margin-right: 12px;
padding-left: 3px;
text-shadow: 0px 1px 4px rgba(0,0,0,.7);
}
#board-header .board-name:hover, #board-header .org-name:hover, #board-header .board-header-btn:hover {
background: rgba(0,0,0,.4);
}
#board-header .icon-board {
color: #fff;
}
#board-header .icon-sm {
color: #ffffff;
}
#board-header .quiet {
opacity: .5;
}
#board-header .quiet:hover {
opacity: 1;
}
#board-header .text, #board-header .org-name {
color: #ffffff;
}
#board-header a {
text-decoration: none;
}
#content {
background-color: #1a272d;
}
#header {
background: linear-gradient(to bottom, #1a272d 0%, #2b373c 40%, #2b373c 90%, #1a272d 100%) ;
/* background: linear-gradient(to bottom, #e4e9ec 0%, #e0e5e8 50%, #c5ccd0 100%);
box-shadow: 0px 1px 2px rgba(0,0,0,.5);
box-shadow: 0px 1px 3px rgba(0,0,0,.25);
*/
z-index: 10;
}
#header * {
-webkit-transition: .2s opacity;
}
#header .header-help .header-btn-text {
display: none;
}
#header .header-logo {
opacity: 1;
}
#header-search .header-btn {
display: none;
}
#header-search input[type="text"] {
background: #ffffff;
border-radius: 5px;
height: 23px;
margin: 3px 0px;
min-height: 0px;
opacity: .2;
}
#header-search input[type="text"]:focus {
opacity: 1;
}
#header-search input[type="text"]:hover {
opacity: .9;
}
.activity-gradient-t, .activity-gradient-b {
display: none;
}
.badges {
padding: 2px 10px 5px 10px;
}
.board-side-btn {
z-index: 5;
}
.board-side-btn .arrow {
border-left-color: rgba(0,0,0,.3);
border-right-color: rgba(0,0,0,.3);
}
.board-side-btn.left-side {
-webkit-border-bottom-right-radius: 100px;
-webkit-border-top-right-radius: 100px;
}
.board-side-btn.right-side {
-webkit-border-bottom-left-radius: 100px;
-webkit-border-top-left-radius: 100px;
}
.board-side-btn:hover {
background: rgba(0,0,0,.2);
}
.board-widget {
padding: 20px;
}
.board-widget-activity {
background: #ffffff;
padding-right: 10px;
}
.board-widget-members .member {
margin: 0 5px 5px 0;
}
.board-widget-title h3 {
color: #a9a9a9;
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
}
.board-widgets {
background-color: #edeff0;
border-top-right-radius: 10px;
box-shadow: -2px 1px 7px rgba(0,0,0,.4);
padding: 0;
position: absolute;
right: 0;
top: 0;
width: 250px;
z-index: 9;
}
.board-widgets .button-link {
background: none;
border: none;
padding: 2px 0;
}
.board-widgets .button-link .icon-sm {
color: rgb(68, 68, 68);
}
.board-widgets .button-link:hover, .board-widgets .button-link:hover .icon-sm {
color: #226489;
}
.board-wrapper {
background: #216f95;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.card-detail-title {
color: rgb(57, 57, 57);
}
.card-label.blue-label {
background-color: #2980B9;
}
.card-label.green-label {
background-color: #27AE60;
}
.card-label.orange-label {
background-color: #E67E22;
}
.card-label.purple-label {
background-color: #8E44AD;
}
.card-label.red-label {
background-color: #C0392B;
}
.card-label.yellow-label {
background-color: #F1C40F;
}
.card-labels {
margin: 0;
width: 100%;
}
.extra-large-window .board-wrapper.disabled-all-widgets #board, .large-window .board-wrapper.disabled-all-widgets #board, .medium-window .board-wrapper.disabled-all-widgets #board {
margin-right: 0px
;
}
.header-btn {
-webkit-box-shadow: none;
background: none;
box-shadow: none;
opacity: .4;
}
.header-btn:hover {
opacity: 1;
}
.list {
background: #e4e8ea;
border: 0;
box-shadow: 0px 2px 10px rgba(0,0,0,.5);
margin: 0 5px;
}
.list-area-wrapper {
padding: 0px 15px 24px 15px;
}
.list-card {
border: 1px solid #BDC3C7;
margin: 0px 2px 5px 2px;
padding: 0px;
}
.list-card .card-label {
height: 5px;
margin-bottom: 0;
width: 100%;
}
.list-card-cover img {
width: 100%;
}
.list-card-members {
margin: 0 2px 1px 5px;
}
.list-card-members .member {
border: none;
height: 25px;
margin: 0 4px 4px 0;
width: 25px;
}
.list-card-title {
color: #515151;
font-size: 14px;
line-height: 1.4em;
margin: 8px 10px 6px 10px;
}
.list-card:hover {
border: 1px solid #2980B9;
}
.list-gradient-bottom {
background: linear-gradient(to bottom, rgba(228, 232, 234, 0) 0%, #e4e8ea 100%);
}
.list-gradient-top {
background: linear-gradient(to bottom, #e4e8ea 0%, rgba(228, 232, 234, 0) 100%);
}
.list-title {
padding: 5px 0px 4px 0px;
}
.list-title h2 {
font-size: 1.24em;
}
.member {
border: none;
border-radius: 3px;
}
.member .status, .member .member-type {
border: 1px solid #fff;
border-bottom: none;
border-radius: 5px;
border-right: none;
bottom: 1px;
height: 5px;
right: 1px;
width: 5px;
}
.member img {
height: 100%;
width: 100%;
}
.window .window-main-col {
background: none;
}
.window-main-col {
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
background: #fff;
padding: 12px;
}
.window-overlay {
z-index: 10;
}
.window-sidebar {
-webkit-border-bottom-right-radius: 5px;
-webkit-border-top-right-radius: 5px;
background: #f0f0f0;
padding: 12px;
}
.window-title {
width: 100%;
}
.window-title, .window-title-extra {
color: #ffffff;
}
.window-title-text {
color: black;
}
::-webkit-scrollbar {
height: 14px;
width: 6px;
}
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,.2);
}
::-webkit-scrollbar-track-piece:horizontal {
background: none;
}
::webkit-scrollbar-track-piece:vertical {
background: rgba(0,0,0,.1);
}
body {
background: #216f95;
}
/* #header .header-logo .logo {
background-image: url(http://tinabeans.com/fc/Trellogo_color.png);
background-size: 100%;
margin-top: 2px;
} */
html, body, #surface, #content, .board-wrapper, #board {
height: 100%;
}
textarea.js-card-title {
margin: 0;
padding: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment