Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 60556dc0dd
Fetching contributors…

Cannot retrieve contributors at this time

376 lines (335 sloc) 8.327 kb
@import "compass/css3/images";
$sidebar_back: #fbfbfb;
$sidebar_hover: #fff;
$selected_color: #C84AFA;
$sidebar_border: #ccc;
$panel_color: #333;
$panel_border: #111;
$panel_text: #fff;
$task_color: #fff;
$task_selected: lighten(#6CC0E5, 32%);
$notes_bg: #F8FAF0;
$none_text: #ACACAC;
$low_color: #6CC0E5;
$medium_color: #FBC93D;
$high_color: #FB4F4F;
body {
background: url(img/justin.jpeg) no-repeat left center fixed;
}
#sidebar {
background: $sidebar_back;
box-shadow: 1px 0 1px rgba(0, 0, 0, 0.3);
h2 {
border-top: 1px solid $sidebar_border;
border-bottom: 1px solid $sidebar_border;
box-shadow: 0 0 1px rgba(0,0,0,0.2) inset;
}
ul li {
&:hover {
background: $sidebar_hover;
}
&.dragHover {
background: darken($sidebar_hover, 8%);
}
input {
border-radius: 4px;
box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
border: none;
}
}
.listAddBTN {
background: $panel_color;
color: $panel_text;
&:hover {
background: lighten($panel_color, 3%);
}
}
}
.panel {
@include background(linear-gradient(top, rgba(173, 127, 168, 0.85) 0%, rgba(128, 0, 128, 0.85) 100%));
border-bottom: 0;
color: $panel_text;
box-shadow: 0 0 2px rgba(0,0,0,0.4);
text-shadow: 0 1px 0 rgba(0,0,0,0.6);
.brand {
line-height: 40px;
font-size: 18px;
font-weight: bold;
padding-left: 20px;
background: url(img/logo.png) no-repeat;
}
button {
background: $panel_color;
color: $panel_text;
font-weight: bold;
text-shadow: 0 1px 0 rgba(0,0,0,0.6);
&.add {
background: url(img/add.png) no-repeat 18px 0;
padding-left: 50px;
}
&.delete {
background: url(img/delete.png) no-repeat 18px 0;
padding-left: 50px;
}
&.sort {
background: url(img/sort.png) no-repeat 12px 0;
padding-left: 46px;
}
&.settingsbtn {
margin: 0 7px 0 0;
background: url(img/settings.png) no-repeat 8px 0;
padding: 0 20px;
}
&:hover {
background-color: rgba(0,0,0,0.2);
}
}
.left {
span {
ul {
background: $panel_color;
border: 1px solid black;
border-top: none;
box-shadow: 0 1px 1px rgba(0,0,0,0.4);
margin: 0;
li {
color: white;
font-weight: bold;
}
}
}
}
.right input {
border: 0;
border-radius: 2px;
width: 120px;
padding-left: 23px;
background: url(img/search.png) no-repeat, #fff;
-webkit-transition: 150ms width ease;
&:focus {
outline: 0;
box-shadow: none;
width: 220px;
}
}
}
#sidebar {
ul {
li {
&.selected {
background: $selected_color;
color: #fff;
border: 1px solid darken($selected_color, 20%);
border-left: none;
border-right: none;
font-weight: bold;
text-shadow: 0 1px 1px darken($selected_color, 15%);
}
}
}
}
#tasks {
background-image: none;
z-index: 4;
&:before {
content: '';
display: block;
position: absolute;
left: -5px;
top: 0;
height: 41px;
width: 5px;
@include background(linear-gradient(top, rgba(173, 127, 168, 0.85) 0%, rgba(128, 0, 128, 0.85) 100%));
}
}
#tasks .tasksContent {
h2.dark {
color: lighten($panel_color, 5%);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
}
h2, h2.light {
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.noTasks {
width: 300px;
padding: 15px;
top: 100px;
margin: 0 auto;
text-align: center;
background: rgba(0, 0, 0, 0.4);
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.3);
border-radius: 5px;
color: white;
font-size: 14px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
ul {
li {
border: 1px solid darken($task_color, 25%);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
border-radius: 4px;
@include background(linear-gradient(top, $task_color 0%, darken($task_color, 2%) 100%));
.tag {
color: darken($low_color, 30%);
}
.label {
border-left: 1px solid darken($task_color, 10%);
border-radius: 0 4px 4px 0;
&.overdue, &.due {
@include background(linear-gradient(top, lighten($high_color, 25%) 0%, lighten($high_color, 20%) 100%));
}
}
.notes {
width: 30px;
background: url(img/notes.png) no-repeat 8px 7px;
}
&.selected {
@include background(linear-gradient(top, #FEFFFE 0%, #FADDFD 100%));
}
&.expanded {
margin: 15px 0;
&:first-child {
margin-top: 0;
}
&:hover {
@include background(linear-gradient(top, $task_color 0%, darken($task_color, 2%) 100%));
}
}
.checkbox {
border: 1px solid #D4D4D4;
border-radius: 3px;
background: $task_color;
&:hover {
border-color: #C6C6C6;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}
&.scheduled {
background: url(glyphicons-halflings.png) 277px 13px;
}
&.recurring {
background: url(glyphicons-halflings.png) 601px 13px;
}
&.low {
border-color: darken($low_color, 10%);
@include background(linear-gradient(top, lighten($low_color, 15%) 0%, lighten($low_color, 20%) 100%));
}
&.medium {
border-color: darken($medium_color, 17%);
@include background(linear-gradient(top, lighten($medium_color, 15%) 0%, lighten($medium_color, 24%) 100%));
}
&.high {
border-color: darken($high_color, 20%);
@include background(linear-gradient(top, lighten($high_color, 15%) 0%, lighten($high_color, 22%) 100%));
}
}
button.none, button.low, button.medium, button.high, input.date, input.tags, button.date, div.tag {
border-left: 1px solid darken($task_color, 10%);
}
button.none {
color: $none_text;
}
button.low {
@include background(linear-gradient(top, lighten($low_color, 35%) 0%, lighten($low_color, 25%) 100%));
}
button.medium {
@include background(linear-gradient(top, lighten($medium_color, 35%) 0%, lighten($medium_color, 25%) 100%));
}
button.high {
@include background(linear-gradient(top, lighten($high_color, 35%) 0%, lighten($high_color, 30%) 100%));
}
.hidden textarea {
border-top: 1px solid darken($task_color, 15%);
border-radius: 0 0 5px 5px;
background: url(img/notes.png) no-repeat 8px 7px, $notes_bg;
}
}
}
}
.vsplitbar {
border-left: 0;
}
// Modal Dialog
.modal {
border-radius: 5px;
border-color: #ccc;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
h3 {
border-bottom-color: #ccc;
}
}
//jQuery UI trys to override
.ui-sortable-helper.tasks {
@include background(linear-gradient(top, $task_color 0%, darken($task_color, 2%) 100%));
color: #333;
line-height: 24px;
border-radius: 3px;
border: 1px solid #BFBFBF;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
font-weight: normal;
opacity: 0.8;
}
.modal {
display: none;
position: absolute;
left: 50%;
background: #fff;
border-radius: 5px;
box-shadow: 0 1px 6px rgba(0,0,0,0.75);
h3 {
border-radius:5px 5px 0 0;
text-align: center;
height: 40px;
line-height: 40px;
margin: 0;
background-image: #f4f4f4;
@include background(linear-gradient(top, #ffffff 0%, #e9e9e8 100%));
border-bottom: 1px solid #eee;
font-size: 15px;
text-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #ccc;
color: #3b3b3b;
}
p {
margin: 0;
padding: 15px 15px 13px;
display: block;
width: 310px;
font-size: 13px;
text-align: center;
color: #545454;
line-height: 20px;
}
.button-container {
button {
height: 35px;
border-radius: 4px;
color: #fff;
font: bold 13px arial;
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.15);
&.yes {
border: 1px solid #5e8c22;
background-image: #89c03e;
@include background(linear-gradient(top, #a8d34e 0%, #6aad2d 100%));
&:hover {
@include background(linear-gradient(top, lighten(#a8d34e, 5%) 0%, lighten(#6aad2d, 5%) 100%));
}
&:active {
@include background(linear-gradient(top, darken(#a8d34e, 5%) 0%, darken(#6aad2d, 5%) 100%));
}
}
&.no {
border: 1px solid #b63540;
background-image: #ed596a;
@include background(linear-gradient(top, #f77087 0%, #e3414d 100%));
&:hover {
@include background(linear-gradient(top, lighten(#f77087, 5%) 0%, lighten(#e3414d, 5%) 100%));
}
&:active {
@include background(linear-gradient(top, darken(#f77087, 5%) 0%, darken(#e3414d, 5%) 100%));
}
}
}
}
}
Jump to Line
Something went wrong with that request. Please try again.