Created
June 21, 2015 15:34
-
-
Save seraphyn/f527d1da3cba3d93df29 to your computer and use it in GitHub Desktop.
Rewritten cleaner style.css for tasks version v0.6
This file contains 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
* { | |
-moz-user-select: -moz-none; | |
margin: 0; | |
padding: 0; | |
text-decoration: none; | |
} | |
#content { | |
overflow: hidden; | |
color: #423E3E; | |
background: repeat scroll 0 0 #f3f3f3; | |
} | |
#content #tasks_wrapper { | |
height: 100%; | |
} | |
#content .icon { | |
background-image: url("../img/sprites.svg"); | |
height: 20px; | |
width: 20px; | |
display: inline-block; | |
cursor: pointer; | |
vertical-align: middle; | |
} | |
#content .icon.none { | |
background-position: 0px -20px; | |
} | |
#content .icon.list-list { | |
background-position: -40px 0px; | |
} | |
#content .icon.collection-starred { | |
background-position: -20px 0px; | |
} | |
#content .icon.collection-today { | |
-moz-box-sizing: border-box; | |
background-position: -240px 0px; | |
color: #909090; | |
font-size: 7px; | |
font-weight: bold; | |
line-height: 9px; | |
padding-top: 7px; | |
text-align: center; | |
text-shadow: 0 1px 0 white; | |
} | |
#content .icon.collection-week { | |
background-position: -220px 0px; | |
} | |
#content .icon.collection-completed { | |
background-position: -100px 0px; | |
} | |
#content .icon.collection-all { | |
background-position: -200px 0px; | |
} | |
#content .icon.collection-current { | |
background-position: -240px -80px; | |
} | |
#content .icon.detail-add { | |
background-position: -80px 0px; | |
cursor: default; | |
height: 20px; | |
width: 20px; | |
opacity: 0.5; | |
} | |
#content .icon.input-date { | |
display: none; | |
background-position: -160px -100px; | |
opacity: 0.4; | |
transition: opacity 100ms ease 0s; | |
right: 35px; | |
top: 7px; | |
} | |
#content .icon.input-star { | |
display: none; | |
background-position: -100px -180px; | |
opacity: 0.5; | |
right: 9px; | |
} | |
#content .icon.input-star.starred { | |
background-position: -120px -180px; | |
opacity: 1; | |
} | |
#content .icon.detail-delete { | |
background-position: 0 -40px; | |
height: 20px; | |
opacity: 0.4; | |
width: 20px; | |
} | |
#content .icon.task-checkbox { | |
background-position: -60px 0px; | |
height: 20px; | |
width: 20px; | |
left: 8px; | |
position: absolute; | |
top: 7px; | |
} | |
#content .icon.task-attachment { | |
background-position: 0 -60px; | |
} | |
#content .icon.detail-trash { | |
background-position: -260px 0px; | |
transition: opacity 100ms ease 0s; | |
opacity: 0.6; | |
} | |
#content .icon.detail-settings { | |
background-position: -200px -40px; | |
transition: opacity 100ms ease 0s; | |
opacity: 0.6; | |
} | |
#content .icon.detail-close { | |
background-position: -260px -20px; | |
opacity: 0.6; | |
transition: opacity 100ms ease 0s; | |
} | |
#content .icon.detail-checkbox { | |
left: 18px; | |
position: absolute; | |
top: 17px; | |
background-position: -60px 0px; | |
} | |
#content .icon.detail-reminder { | |
background-position: -40px -40px; | |
height: 20px; | |
width: 20px; | |
} | |
#content .icon.detail-percent { | |
background-position: -260px -60px; | |
} | |
#content .icon.task-checked, | |
#content .icon.detail-checked { | |
background-position: -60px -20px; | |
height: 20px; | |
width: 20px; | |
} | |
#content .icon.detail-star { | |
position: absolute; | |
right: 15px; | |
top: -2px; | |
background-position: -60px -40px; | |
height: 60px; | |
width: 30px; | |
} | |
#content .icon.detail-star:hover { | |
background-position: -90px -40px; | |
} | |
#content .icon.detail-starred { | |
top: -2px !important; | |
position: absolute; | |
right: 15px; | |
top: -2px; | |
background-position: -120px -40px !important; | |
height: 60px; | |
width: 30px; | |
} | |
#content .icon.detail-save { | |
background-position: -20px -40px; | |
} | |
#content .icon.note-fullscreen { | |
background-position: -140px -60px; | |
opacity: 0.6; | |
} | |
#content .icon.note-fullscreen:hover { | |
opacity: 1; | |
} | |
#content .icon.toggle-completed-tasks { | |
background-position: -120px 0; | |
height: 20px; | |
opacity: 0.8; | |
width: 20px; | |
} | |
#content .icon.toggle-completed-tasks:hover { | |
opacity: 1; | |
} | |
#content tr:last-child .task-item { | |
height: 39px; | |
} | |
#content tr:last-child .task-item div.task-body { | |
border-width: 1px; | |
} | |
#content li.task-item:last-child { | |
height: 39px; | |
} | |
#content li.task-item:last-child .task-body { | |
border-width: 1px; | |
} | |
#content li.task-item, | |
#content div.task-item { | |
cursor: default; | |
height: 37px; | |
list-style: none outside none; | |
overflow: hidden; | |
z-index: 100 !important; | |
} | |
#content li.task-item.done, | |
#content div.task-item.done { | |
opacity: 0.6; | |
} | |
#content li.task-item.done .title, | |
#content div.task-item.done .title { | |
text-decoration: line-through; | |
text-shadow: none; | |
} | |
#content li.task-item .task-body, | |
#content div.task-item .task-body { | |
-moz-box-sizing: border-box; | |
background: #ffffff; | |
height: 37px; | |
list-style: none outside none; | |
margin: 0; | |
position: relative; | |
border-style: solid; | |
border-width: 1px 1px 0; | |
border-color: #CCCCCC; | |
} | |
#content li.task-item .task-body .icon.task-separator, | |
#content div.task-item .task-body .icon.task-separator { | |
cursor: default; | |
height: 100%; | |
left: 34px; | |
position: absolute; | |
top: 1px; | |
background-position: 0 -20px; | |
width: 2px; | |
} | |
#content li.task-item .task-body .icon.task-star, | |
#content div.task-item .task-body .icon.task-star { | |
float: right; | |
margin: 0 8px 0 5px; | |
background-position: -140px 0px; | |
height: 34px; | |
width: 20px; | |
} | |
#content li.task-item .task-body .icon.task-star:hover, | |
#content div.task-item .task-body .icon.task-star:hover { | |
background-position: -160px 0; | |
} | |
#content li.task-item .task-body .icon.task-starred, | |
#content div.task-item .task-body .icon.task-starred, | |
#content li.task-item .task-body .icon.task-starred:hover, | |
#content div.task-item .task-body .icon.task-starred:hover { | |
background-position: -180px 0; | |
margin-left: 5px; | |
margin-right: 8px; | |
margin-top: 0; | |
} | |
#content li.task-item .task-body .title-wrapper, | |
#content div.task-item .task-body .title-wrapper { | |
cursor: pointer; | |
color: #423E3E; | |
display: block; | |
line-height: 16px; | |
margin: 0 0 0 44px; | |
overflow: hidden; | |
padding: 9px 0; | |
position: relative; | |
text-overflow: ellipsis; | |
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); | |
white-space: nowrap; | |
} | |
#content li.task-item .task-body .title-wrapper .title, | |
#content div.task-item .task-body .title-wrapper .title { | |
cursor: text; | |
} | |
#content li.task-item .task-body .title-wrapper.attachment .task-attachment, | |
#content div.task-item .task-body .title-wrapper.attachment .task-attachment { | |
display: inline-block; | |
} | |
#content li.task-item .task-body .title-wrapper .task-attachment, | |
#content div.task-item .task-body .title-wrapper .task-attachment { | |
display: none; | |
height: 20px; | |
margin-top: -3px; | |
} | |
#content li.task-item .task-body .duedate, | |
#content div.task-item .task-body .duedate { | |
color: #3B6594; | |
float: right; | |
font-size: 11px; | |
line-height: 14px; | |
margin: 11px 3px 0 7px; | |
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); | |
} | |
#content li.task-item .task-body .duedate.overdue, | |
#content div.task-item .task-body .duedate.overdue { | |
color: #B3312D; | |
} | |
#content li.task-item .task-body .listname, | |
#content div.task-item .task-body .listname { | |
color: #888; | |
float: right; | |
font-size: 11px; | |
line-height: 14px; | |
margin: 11px 3px 0 7px; | |
} | |
#app-navigation { | |
background: #e3e3e3; | |
font-family: "Helvetica Neue", "Helvetica", "Arial", Sans-Serif; | |
border-right: 1px solid #CFCFCF; | |
font-size: 13px; | |
padding-bottom: 77px !important; | |
} | |
#app-navigation div.header { | |
height: 37px; | |
border-bottom: 1px solid #AFAFAF; | |
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 transparent; | |
background: -moz-linear-gradient(center top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 transparent; | |
background: -ms-linear-gradient(center top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 transparent; | |
background: -o-linear-gradient(center top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 transparent; | |
background: linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 transparent; | |
} | |
#app-navigation div.header a { | |
cursor: pointer; | |
padding: 10px; | |
height: 20px; | |
line-height: 20px; | |
} | |
#app-navigation div.header #loading { | |
cursor: pointer; | |
padding: 8px; | |
display: block; | |
width: 20px; | |
} | |
#app-navigation div.header #loading span { | |
height: 20px; | |
width: 20px; | |
display: inline-block; | |
cursor: pointer; | |
vertical-align: middle; | |
background-size: 20px 20px; | |
} | |
#app-navigation div.header #loading span.done { | |
background: url("../img/sprites.svg") repeat-x scroll center bottom transparent; | |
background-position: 0 0; | |
} | |
#app-navigation div.footer { | |
height: 40px; | |
} | |
#app-navigation div.footer a { | |
cursor: pointer; | |
padding: 10px; | |
height: 20px; | |
line-height: 20px; | |
float: left; | |
} | |
#app-navigation div.footer a.settings { | |
float: right; | |
} | |
#app-navigation div.scroll { | |
height: 100%; | |
overflow: auto; | |
} | |
#app-navigation a.addlist { | |
background: none repeat scroll 0 0 transparent; | |
} | |
#app-navigation .count { | |
color: #909090; | |
float: right; | |
} | |
#app-navigation .addlist:hover .title { | |
color: #625F5F; | |
} | |
#app-navigation .addlist:hover .detail-add { | |
opacity: 1; | |
} | |
#app-navigation .addlist .title { | |
color: #909090; | |
} | |
#app-navigation .addlist, | |
#app-navigation li a { | |
background: url("../img/divider.svg") repeat-x scroll center bottom transparent; | |
display: block; | |
-moz-box-sizing: border-box; | |
-o-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
-ms-box-sizing: border-box; | |
position: relative; | |
height: 34px; | |
padding: 6px 12px 8px 8px !important; | |
color: #413D3F; | |
font-weight: bold; | |
text-shadow: 0 1px 0 white; | |
white-space: normal !important; | |
line-height: 20px !important; | |
min-height: 34px !important; | |
} | |
#app-navigation #collection_lists li a { | |
padding-right: 8px; | |
} | |
#app-navigation #collection_filters li a { | |
padding-right: 16px !important; | |
} | |
#app-navigation input.edit { | |
border: 1px solid #3F84B3; | |
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) inset; | |
font-family: "Helvetica Neue", "Helvetica", "Arial", Sans-Serif; | |
font-weight: bold; | |
font-size: 13px; | |
left: 34px; | |
padding: 4px; | |
position: absolute; | |
right: 46px; | |
top: 5px; | |
width: auto; | |
margin: 0; | |
border-radius: 0; | |
} | |
#app-navigation li { | |
height: 34px; | |
overflow: hidden; | |
position: relative; | |
transition: height 300ms ease 0s !important; | |
} | |
#app-navigation li.active a { | |
background: transparent; | |
border-bottom: 1px solid transparent; | |
color: white; | |
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); | |
background: #63A680; | |
} | |
#app-navigation li.active a .count { | |
color: white; | |
} | |
#app-navigation li.active .icon.collection-all { | |
background-position: -200px -20px; | |
} | |
#app-navigation li.active .icon.collection-current { | |
background-position: -240px -100px; | |
} | |
#app-navigation li.active .icon.list-list { | |
background-position: -40px -20px; | |
} | |
#app-navigation li.active .icon.collection-starred { | |
background-position: -20px -20px; | |
} | |
#app-navigation li.active .icon.collection-today { | |
background-position: -240px -40px; | |
color: white; | |
text-shadow: 0 1px 0 #336692; | |
} | |
#app-navigation li.active .icon.collection-week { | |
background-position: -220px -20px; | |
} | |
#app-navigation li.active .icon.collection-completed { | |
background-position: -100px -20px; | |
} | |
#app-navigation li.dragOver a { | |
border: 2px solid #2b88d9; | |
padding: 6px 10px 6px 6px; | |
} | |
#app-navigation li.dragOver a .title { | |
left: 38px; | |
right: 28px; | |
top: 6px; | |
} | |
#app-navigation li.animate-up { | |
height: 0px !important; | |
border-bottom: 0; | |
} | |
#app-navigation li input.edit { | |
border: 1px solid #3F84B3; | |
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) inset; | |
font-family: "Helvetica Neue", "Helvetica", "Arial", Sans-Serif; | |
font-weight: bold; | |
font-size: 13px; | |
left: 34px; | |
padding: 4px; | |
position: absolute; | |
right: 46px; | |
top: 5px; | |
width: auto; | |
margin: 0; | |
border-radius: 0; | |
} | |
#app-navigation .title { | |
position: absolute; | |
left: 40px; | |
right: 30px; | |
top: 6px; | |
text-overflow: ellipsis; | |
overflow: hidden; | |
white-space: nowrap; | |
} | |
#app-content { | |
-webkit-transition: all 0.5s ease-in-out; | |
-moz-transition: all 0.5s ease-in-out; | |
-ms-transition: all 0.5s ease-in-out; | |
-o-transition: all 0.5s ease-in-out; | |
transition: all 0.5s ease-in-out; | |
background: #f3f3f3; | |
overflow-x: hidden; | |
} | |
#app-content div.content-wrapper { | |
padding: 6px 17px 75px; | |
box-sizing: border-box; | |
height: 100%; | |
overflow: hidden; | |
} | |
#app-content div.content-wrapper .task-list { | |
height: 100%; | |
overflow-y: auto; | |
} | |
#app-content.details-visible { | |
padding-right: 370px; | |
} | |
#app-content h2 { | |
font-weight: bold; | |
color: #909090; | |
font-size: 13px; | |
margin-bottom: 10px; | |
margin-top: 20px !important; | |
text-shadow: 0 1px 0 #ffffff; | |
word-wrap: break-word; | |
} | |
#app-content h2.heading-hiddentasks { | |
height: 21px; | |
} | |
#app-content #add-task { | |
margin: 12px 0; | |
padding: 6px 12px; | |
position: relative; | |
border: 1px solid #CCCCCC; | |
background: none repeat scroll 0 0 #EEEEEE; | |
} | |
#app-content #add-task.focus { | |
background-color: #FFFFFF; | |
} | |
#app-content #add-task.focus .icon.input-date { | |
display: block; | |
} | |
#app-content #add-task.focus .icon.input-star { | |
display: block; | |
} | |
#app-content #add-task .icon { | |
position: absolute; | |
top: 6px; | |
} | |
#app-content #add-task input { | |
-moz-box-sizing: border-box; | |
font-size: 13px; | |
font-weight: bold; | |
padding-right: 60px; | |
width: 100%; | |
color: #505050; | |
background: none repeat scroll 0 0 transparent !important; | |
border: medium none !important; | |
border-radius: 0 0 0 0 !important; | |
box-shadow: none !important; | |
padding: 0 60px 0 0; | |
margin: 0; | |
cursor: text; | |
} | |
#app-content div.task-list h2.heading text, | |
#app-content div.task-list h2.heading-hiddentasks text { | |
cursor: pointer; | |
} | |
#app-content div.task-list h2.heading .icon.toggle-completed-tasks, | |
#app-content div.task-list h2.heading-hiddentasks .icon.toggle-completed-tasks { | |
float: right; | |
} | |
#app-content div.task-list .loadmore { | |
font-size: 11px; | |
margin-top: 10px; | |
text-align: center; | |
} | |
#app-content div.task-list .loadmore span { | |
color: #A0A0A0; | |
background-color: #e9e9e9; | |
border-radius: 10px; | |
padding: 3px 6px; | |
} | |
#app-content div.task-list .loadmore span:hover { | |
cursor: pointer; | |
color: #555; | |
} | |
#app-content div.task-list.completed-hidden ol.completed-tasks { | |
display: none; | |
} | |
#app-content div.task-list.completed-hidden h2.heading-hiddentasks text { | |
opacity: 0.7; | |
} | |
#app-content div.task-list.completed-hidden h2.heading-hiddentasks .icon.toggle-completed-tasks { | |
opacity: 0.5; | |
background-position: -120px -20px; | |
} | |
#app-content div.task-list.completed-hidden h2.heading-hiddentasks:hover text { | |
opacity: 1; | |
} | |
#app-content div.task-list.completed-hidden h2.heading-hiddentasks:hover .icon.toggle-completed-tasks { | |
opacity: 0.7; | |
} | |
#app-content div.task-list.completed-hidden div.loadmore { | |
display: none; | |
} | |
#app-content div.task-list .grouped-tasks { | |
position: relative; | |
} | |
#task-details { | |
-webkit-transition: all 0.5s ease-in-out; | |
-moz-transition: all 0.5s ease-in-out; | |
-ms-transition: all 0.5s ease-in-out; | |
-o-transition: all 0.5s ease-in-out; | |
transition: all 0.5s ease-in-out; | |
position: absolute; | |
right: -400px; | |
bottom: 0; | |
top: 0; | |
width: 370px; | |
max-width: 100%; | |
padding: 18px 0 17px; | |
} | |
#task-details.details-visible { | |
right: 0; | |
} | |
#task-details div.content-wrapper { | |
padding: 0 10px 2px 0; | |
height: 100%; | |
} | |
#task-details div.content-wrapper > div { | |
background: repeat scroll 0 0 #ffffff; | |
border: 1px solid #CCCCCC; | |
height: 100%; | |
position: relative; | |
} | |
#task-details div.content-wrapper div.notice { | |
color: #888; | |
font-size: 16px; | |
position: absolute; | |
text-align: center; | |
top: 50%; | |
width: 100%; | |
} | |
#task-details div.content-wrapper div.footer { | |
background: #ffffff; | |
border-top: 1px solid #D3D3D3; | |
bottom: 0; | |
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; | |
height: 65px; | |
left: 0; | |
position: absolute; | |
right: 0; | |
} | |
#task-details div.content-wrapper div.footer .detail-close .icon { | |
left: auto; | |
right: 8px; | |
} | |
#task-details div.content-wrapper div.footer .icon { | |
position: absolute; | |
bottom: 7px; | |
left: 8px; | |
} | |
#task-details div.content-wrapper div.footer .detail-addcomment { | |
padding: 4px 10px 0; | |
} | |
#task-details div.content-wrapper div.footer .detail-addcomment input { | |
background: none repeat scroll 0 0 white; | |
border: 1px solid #bdbcbb; | |
border-radius: 0; | |
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; | |
box-sizing: border-box; | |
color: #423e3e; | |
font-family: "Helvetica Neue", "Helvetica", "Arial", Sans-Serif; | |
font-size: 13px; | |
font-weight: 500; | |
margin-top: 2px; | |
outline: medium none; | |
padding: 4px; | |
transition: all 0.2s ease-in-out 0s; | |
} | |
#task-details div.content-wrapper div.footer .detail-addcomment input[type="text"] { | |
width: 230px; | |
} | |
#task-details div.content-wrapper div.footer .detail-addcomment input[type="button"] { | |
float: right; | |
margin-right: 0; | |
color: #BBB; | |
cursor: default; | |
} | |
#task-details div.content-wrapper div.footer .detail-addcomment input[type="button"].active { | |
color: #fff; | |
background: -webkit-linear-gradient(top, #5cb6e7 0%, #317cd7 100%) repeat scroll 0 0 transparent; | |
background: -moz-linear-gradient(center top, #5cb6e7 0%, #317cd7 100%) repeat scroll 0 0 transparent; | |
background: -ms-linear-gradient(center top, #5cb6e7 0%, #317cd7 100%) repeat scroll 0 0 transparent; | |
background: -o-linear-gradient(center top, #5cb6e7 0%, #317cd7 100%) repeat scroll 0 0 transparent; | |
background: linear-gradient(top, #5cb6e7 0%, #317cd7 100%) repeat scroll 0 0 transparent; | |
transition: none; | |
cursor: pointer; | |
} | |
#task-details div.content-wrapper.completed .body .section .section-title { | |
color: #9FA2A6 !important; | |
} | |
#task-details div.content-wrapper.completed .body .section .icon.detail-date { | |
background-position: -100px -40px !important; | |
} | |
#task-details div.content-wrapper.completed .body .section .icon.detail-reminder { | |
background-position: -40px -40px !important; | |
} | |
#task-details div.content-wrapper .title { | |
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%) repeat scroll 0 0 transparent; | |
background: -moz-linear-gradient(center top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%) repeat scroll 0 0 transparent; | |
background: -ms-linear-gradient(center top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%) repeat scroll 0 0 transparent; | |
background: -o-linear-gradient(center top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%) repeat scroll 0 0 transparent; | |
background: linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%) repeat scroll 0 0 transparent; | |
border-bottom: 1px solid rgba(0, 0, 0, 0.24); | |
font-size: 16px; | |
font-weight: bold; | |
line-height: 24px; | |
min-height: 24px; | |
padding: 16px 55px 13px; | |
text-shadow: 0 1px 0 white; | |
word-wrap: break-word; | |
} | |
#task-details div.content-wrapper .title .title-text { | |
cursor: text; | |
} | |
#task-details div.content-wrapper .title .title-text.strike-through { | |
text-decoration: line-through; | |
text-shadow: none; | |
} | |
#task-details div.content-wrapper .title textarea, | |
#task-details div.content-wrapper .title pre { | |
box-shadow: none; | |
font-size: 16px; | |
font-weight: bold; | |
line-height: 24px; | |
background: none repeat scroll 0 0 transparent; | |
border: medium none; | |
padding: 0; | |
white-space: pre-wrap; | |
word-wrap: break-word; | |
} | |
#task-details div.content-wrapper .title pre { | |
border: 0 none !important; | |
display: block; | |
margin: 0; | |
outline: 0 none; | |
padding: 0 !important; | |
visibility: hidden; | |
} | |
#task-details div.content-wrapper .title textarea { | |
margin: 0; | |
border-radius: 0; | |
height: 100%; | |
left: 0; | |
overflow: hidden; | |
position: absolute; | |
resize: none; | |
top: 0; | |
width: 100%; | |
} | |
#task-details div.content-wrapper .title .expandable-container { | |
background: none repeat scroll 0 0 #FFFFFF; | |
border: 1px solid #AAAAAA; | |
margin: -1px -4px -1px -7px; | |
padding: 0 5px; | |
} | |
#task-details div.content-wrapper .title .expandable-container .expandingArea { | |
position: relative; | |
} | |
#task-details div.content-wrapper .body { | |
bottom: 65px; | |
left: 0; | |
overflow: auto; | |
position: absolute; | |
right: 0; | |
top: 55px; | |
} | |
#task-details div.content-wrapper .body .note { | |
background: -webkit-linear-gradient(bottom, #dee2d0 1px, transparent 1px) repeat scroll 0 0 / 100% 26px #f5f5f5; | |
background: -moz-linear-gradient(center bottom, #dee2d0 1px, transparent 1px) repeat scroll 0 0 / 100% 26px #f5f5f5; | |
background: -ms-linear-gradient(center bottom, #dee2d0 1px, transparent 1px) repeat scroll 0 0 / 100% 26px #f5f5f5; | |
background: -o-linear-gradient(center bottom, #dee2d0 1px, transparent 1px) repeat scroll 0 0 / 100% 26px #f5f5f5; | |
background: linear-gradient(bottom, #dee2d0 1px, transparent 1px) repeat scroll 0 0 / 100% 26px #f5f5f5; | |
background-color: #f5f5f5; | |
border-width: 1px 1px 1px 1px; | |
border-style: solid; | |
border-color: #CFCFCF; | |
font-size: 13px; | |
line-height: 26px; | |
margin: 0 20px; | |
padding: 5px 15px; | |
cursor: text; | |
} | |
#task-details div.content-wrapper .body .note .expandingArea { | |
position: relative; | |
margin-left: -1px; | |
} | |
#task-details div.content-wrapper .body .note .expandingArea textarea, | |
#task-details div.content-wrapper .body .note .expandingArea pre { | |
box-shadow: none; | |
background: none repeat scroll 0 0 transparent; | |
border: medium none; | |
font-size: 13px; | |
line-height: 26px; | |
padding: 0; | |
white-space: pre-wrap; | |
word-wrap: break-word; | |
} | |
#task-details div.content-wrapper .body .note .expandingArea pre { | |
border: 0 none !important; | |
display: block; | |
margin: 0; | |
outline: 0 none; | |
padding: 0 !important; | |
visibility: hidden; | |
} | |
#task-details div.content-wrapper .body .note .expandingArea textarea { | |
margin: 0 0 0 1px; | |
border-radius: 0; | |
height: 100%; | |
left: 0; | |
overflow: hidden; | |
position: absolute; | |
resize: none; | |
top: 0; | |
width: 100%; | |
color: #423E3E; | |
font-weight: 500; | |
outline: medium none; | |
} | |
#task-details div.content-wrapper .body .note .note-body, | |
#task-details div.content-wrapper .body .note .note-edit { | |
cursor: text; | |
min-height: 140px; | |
word-wrap: break-word; | |
} | |
#task-details div.content-wrapper .body .note .note-body a, | |
#task-details div.content-wrapper .body .note .note-edit a { | |
cursor: text; | |
} | |
#task-details div.content-wrapper .body .note .note-body .content-fakeable, | |
#task-details div.content-wrapper .body .note .note-edit .content-fakeable, | |
#task-details div.content-wrapper .body .note .note-body .edit-view, | |
#task-details div.content-wrapper .body .note .note-edit .edit-view, | |
#task-details div.content-wrapper .body .note .note-body .display-view, | |
#task-details div.content-wrapper .body .note .note-edit .display-view { | |
cursor: text !important; | |
} | |
#task-details div.content-wrapper .body .note .note-body .display-view, | |
#task-details div.content-wrapper .body .note .note-edit .display-view { | |
white-space: pre-wrap; | |
} | |
#task-details div.content-wrapper .body .note .note-body .display-view a, | |
#task-details div.content-wrapper .body .note .note-edit .display-view a { | |
cursor: pointer; | |
text-decoration: underline; | |
} | |
#task-details div.content-wrapper .body .note .open-fullscreen-note { | |
margin-top: -2px; | |
padding-bottom: 10px; | |
padding-left: 10px; | |
position: absolute; | |
right: 23px; | |
z-index: 9999; | |
} | |
#task-details div.content-wrapper .body .subtasks { | |
background: none repeat scroll 0 0 white; | |
border: 1px solid #C9C8BD; | |
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); | |
margin: 20px; | |
position: relative; | |
} | |
#task-details div.content-wrapper .body .subtasks.buffer { | |
padding-bottom: 32px; | |
} | |
#task-details div.content-wrapper .body .section { | |
background: url("../img/divider.svg") repeat-x scroll center bottom transparent; | |
height: 28px; | |
padding: 9px 20px 9px 55px; | |
position: relative; | |
text-shadow: 0 1px 0 white; | |
border-top: none; | |
} | |
#task-details div.content-wrapper .body .section input { | |
-moz-box-sizing: border-box; | |
background: none repeat scroll 0 0 white; | |
border: 1px solid #BDBCBB; | |
border-radius: 0; | |
margin-top: 2px; | |
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; | |
color: #423E3E; | |
font-family: "Helvetica Neue", "Helvetica", "Arial", Sans-Serif; | |
font-size: 13px; | |
font-weight: 500; | |
outline: medium none; | |
padding: 4px; | |
transition: all 0.2s ease-in-out 0s; | |
} | |
#task-details div.content-wrapper .body .section input.focus { | |
background-color: #F8F8F8; | |
border: 1px solid rgba(43, 136, 217, 0.65); | |
box-shadow: 0 0 4px rgba(43, 136, 217, 0.32), 0 1px 1px rgba(255, 255, 255, 0.43), 0 2px 4px rgba(43, 136, 217, 0.12) inset, 0 0 4px rgba(43, 136, 217, 0.2) inset; | |
} | |
#task-details div.content-wrapper .body .section input[type="range"] { | |
border: medium none; | |
box-shadow: none; | |
padding-top: 10px; | |
width: 200px; | |
margin: 0px; | |
} | |
#task-details div.content-wrapper .body .section select { | |
background-color: rgba(0, 0, 0, 0); | |
border-radius: 0px; | |
border: 1px solid #CCC; | |
padding: 0; | |
width: 98px; | |
margin: 0; | |
font-weight: normal; | |
height: 19px; | |
} | |
#task-details div.content-wrapper .body .section .icon { | |
left: 16px; | |
position: absolute; | |
top: 13px; | |
} | |
#task-details div.content-wrapper .body .section .icon.detail-delete { | |
display: none; | |
left: auto; | |
right: 22px; | |
} | |
#task-details div.content-wrapper .body .section .icon.detail-delete:hover { | |
opacity: 0.8; | |
} | |
#task-details div.content-wrapper .body .section .icon.detail-save { | |
display: none; | |
left: auto; | |
right: 40px; | |
} | |
#task-details div.content-wrapper .body .section .icon.detail-date, | |
#task-details div.content-wrapper .body .section .icon.detail-start { | |
background-position: -220px -80px; | |
} | |
#task-details div.content-wrapper .body .section .icon.detail-remindertype { | |
display: none; | |
left: 38px; | |
opacity: 0.4; | |
} | |
#task-details div.content-wrapper .body .section .icon.detail-remindertype:hover { | |
opacity: 0.8; | |
} | |
#task-details div.content-wrapper .body .section .section-title { | |
color: #9FA2A6; | |
font-weight: bold; | |
margin-top: 3px; | |
} | |
#task-details div.content-wrapper .body .section.date.editing .icon.detail-save { | |
display: inline-block; | |
} | |
#task-details div.content-wrapper .body .section.date.editing .icon.detail-delete { | |
display: block; | |
} | |
#task-details div.content-wrapper .body .section.date .icon.detail-date, | |
#task-details div.content-wrapper .body .section.date .icon.detail-start { | |
background-position: -220px -40px; | |
} | |
#task-details div.content-wrapper .body .section.date .icon.detail-date.overdue, | |
#task-details div.content-wrapper .body .section.date .icon.detail-start.overdue { | |
background-position: -220px -60px; | |
} | |
#task-details div.content-wrapper .body .section.date .icon.detail-percent { | |
background-position: -260px -80px; | |
} | |
#task-details div.content-wrapper .body .section.date .icon.detail-reminder { | |
background-position: -40px -60px; | |
} | |
#task-details div.content-wrapper .body .section.date .icon.detail-reminder.overdue { | |
background-position: -40px -80px; | |
} | |
#task-details div.content-wrapper .body .section.date:hover .icon.detail-delete { | |
display: block; | |
} | |
#task-details div.content-wrapper .body .section.date .section-title { | |
color: #4271A6; | |
} | |
#task-details div.content-wrapper .body .section.date .section-title.overdue { | |
color: #B3312D; | |
} | |
#task-details div.content-wrapper .body .section.date .section-title.repeat { | |
margin-top: -2px; | |
} | |
#task-details div.content-wrapper .body .section.editing .icon.detail-remindertype { | |
display: block; | |
} | |
#task-details div.content-wrapper .body .section .icon.detail-remindertype { | |
background-position: -260px -40px; | |
} | |
#task-details div.content-wrapper .body .section.detail-reminder .section-description { | |
display: none; | |
font-size: 11px; | |
margin-top: -6px; | |
} | |
#task-details div.content-wrapper .body .section.detail-reminder .section-description.repeat { | |
display: block; | |
} | |
#task-details div.content-wrapper .body .section.detail-reminder.date .section-description { | |
display: block; | |
} | |
#task-details div.content-wrapper .body .section.detail-note { | |
padding: 20px 0; | |
height: auto; | |
} | |
#task-details div.content-wrapper .body .section.detail-comments { | |
background: none; | |
padding: 10px 0; | |
height: auto; | |
} | |
#task-details div.content-wrapper .body .section.detail-comments .comment-item { | |
padding: 5px 55px 0; | |
position: relative; | |
} | |
#task-details div.content-wrapper .body .section.detail-comments .comment-item .icon.detail-delete { | |
top: 5px; | |
} | |
#task-details div.content-wrapper .body .section.detail-comments .comment-item:hover .icon.detail-delete { | |
display: block; | |
} | |
#task-details div.content-wrapper .body .section.detail-comments .comment-item .avatar { | |
width: 32px; | |
height: 32px; | |
position: absolute; | |
left: 10px; | |
top: 10px; | |
border-radius: 2px; | |
overflow: hidden; | |
} | |
#task-details div.content-wrapper .body .section.detail-comments .comment-item .avatar img { | |
height: 100%; | |
width: 100%; | |
} | |
#task-details div.content-wrapper .body .section.detail-comments .comment-item .username { | |
display: inline-block; | |
font-weight: bold; | |
} | |
#task-details div.content-wrapper .body .section.detail-comments .comment-item .time { | |
color: #9fa2a6; | |
font-size: 11px; | |
} | |
#task-details div.content-wrapper .body .section.detail-addcomment { | |
background: url("../img/divider.svg") repeat-x scroll center top transparent; | |
bottom: 0; | |
left: 0; | |
position: absolute; | |
right: 0; | |
} | |
#modal-wrapper { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.25); | |
} | |
#settings_modal { | |
background: #f3f3f3; | |
border-radius: 6px; | |
} | |
#settings_modal .header h2 { | |
font-size: 17px; | |
padding: 10px; | |
text-align: center; | |
} | |
#settings_modal .header .button { | |
position: absolute; | |
top: 3px; | |
right: 5px; | |
} | |
#settings_modal .navbar { | |
border-color: #ccc; | |
border-style: solid; | |
border-width: 1px 0; | |
height: 50px; | |
} | |
#settings_modal .content { | |
min-height: 100px; | |
} | |
.button { | |
background: -webkit-linear-gradient(top, #5cb6e7 0%, #317cd7 100%) repeat scroll 0 0 transparent; | |
background: -moz-linear-gradient(center top, #5cb6e7 0%, #317cd7 100%) repeat scroll 0 0 transparent; | |
background: -ms-linear-gradient(center top, #5cb6e7 0%, #317cd7 100%) repeat scroll 0 0 transparent; | |
background: -o-linear-gradient(center top, #5cb6e7 0%, #317cd7 100%) repeat scroll 0 0 transparent; | |
background: linear-gradient(top, #5cb6e7 0%, #317cd7 100%) repeat scroll 0 0 transparent; | |
border-color: #0c67a5; | |
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset; | |
color: #fff; | |
font-weight: bold; | |
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); | |
line-height: 14px; | |
margin-right: 8px; | |
padding: 6px 10px 5px; | |
position: relative; | |
float: right; | |
} | |
.button:hover { | |
color: #CCCCCC; | |
} | |
input, | |
textarea { | |
-moz-user-select: text; | |
} | |
#content a:hover .icon.detail-trash { | |
opacity: 1; | |
} | |
#content a:hover .icon.detail-settings { | |
opacity: 1; | |
} | |
#content a:hover .icon.detail-delete { | |
opacity: 0.8; | |
} | |
#content a:hover .icon.detail-close { | |
opacity: 1; | |
} | |
#content a:hover .icon.input-date { | |
opacity: 0.8; | |
} | |
#content a:hover .icon.input-star { | |
opacity: 1; | |
} | |
input.datepicker-input { | |
width: 120px; | |
} | |
input.timepicker-input { | |
width: 80px; | |
} | |
input.duration-input { | |
margin: 2px 0 0 0.3em; | |
width: 35px; | |
} | |
input.percent-input { | |
width: 35px; | |
margin-top: 0px; | |
} | |
.ui-widget-content { | |
background: none repeat scroll 0 0 #F9F9F9; | |
border-radius: 4px 4px 4px 4px; | |
color: #423E3E; | |
max-width: 304px; | |
min-height: 15px; | |
min-width: 150px; | |
z-index: 1000; | |
} | |
.ui-widget-content { | |
border: none; | |
} | |
td.ui-timepicker-hours table { | |
border-right: 1px solid #CCCCCC; | |
} | |
.ui-timepicker table td a.ui-state-active { | |
background: -moz-linear-gradient(center top, #33a3ef, #168ad4) repeat scroll 0 0 transparent !important; | |
background: -webkit-linear-gradient(top, #33a3ef 0%, #168ad4 100%) repeat scroll 0 0 transparent; | |
background: -moz-linear-gradient(center top, #33a3ef 0%, #168ad4 100%) repeat scroll 0 0 transparent; | |
background: -ms-linear-gradient(center top, #33a3ef 0%, #168ad4 100%) repeat scroll 0 0 transparent; | |
background: -o-linear-gradient(center top, #33a3ef 0%, #168ad4 100%) repeat scroll 0 0 transparent; | |
background: linear-gradient(top, #33a3ef 0%, #168ad4 100%) repeat scroll 0 0 transparent; | |
border-radius: 3px 3px 3px 3px; | |
color: white; | |
opacity: 1; | |
position: relative; | |
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); | |
} | |
.ui-datepicker, | |
.ui-timepicker { | |
width: 185px; | |
} | |
.ui-datepicker .ui-widget-header, | |
.ui-timepicker .ui-widget-header { | |
background: none repeat scroll 0 0 transparent; | |
border: none; | |
color: #423E3E; | |
font-weight: 600; | |
font-size: 12px; | |
} | |
.ui-datepicker .ui-timepicker-title, | |
.ui-timepicker .ui-timepicker-title { | |
text-align: center; | |
} | |
.ui-datepicker .ui-datepicker-next, | |
.ui-timepicker .ui-datepicker-next, | |
.ui-datepicker .ui-datepicker-next-hover, | |
.ui-timepicker .ui-datepicker-next-hover { | |
right: 2px; | |
top: 2px; | |
background: none; | |
border: none; | |
} | |
.ui-datepicker .ui-datepicker-prev, | |
.ui-timepicker .ui-datepicker-prev, | |
.ui-datepicker .ui-datepicker-prev-hover, | |
.ui-timepicker .ui-datepicker-prev-hover { | |
left: 2px; | |
top: 2px; | |
background: none; | |
border: none; | |
} | |
.ui-datepicker .ui-datepicker-prev span, | |
.ui-timepicker .ui-datepicker-prev span, | |
.ui-datepicker .ui-datepicker-next span, | |
.ui-timepicker .ui-datepicker-next span { | |
margin-left: -4px; | |
margin-top: -4px; | |
} | |
.ui-datepicker .ui-icon-circle-triangle-w, | |
.ui-timepicker .ui-icon-circle-triangle-w { | |
background-image: url("../img/sprites.svg"); | |
background-position: -20px -60px; | |
height: 10px; | |
width: 10px; | |
} | |
.ui-datepicker .ui-icon-circle-triangle-e, | |
.ui-timepicker .ui-icon-circle-triangle-e { | |
background-image: url("../img/sprites.svg"); | |
background-position: -30px -60px; | |
height: 10px; | |
width: 10px; | |
} | |
.ui-datepicker table, | |
.ui-timepicker table { | |
width: 100%; | |
} | |
.ui-datepicker table thead th, | |
.ui-timepicker table thead th { | |
color: #A3A3A3; | |
font-size: 9px; | |
height: auto; | |
padding: 4px 0; | |
text-align: center; | |
text-transform: uppercase; | |
} | |
.ui-datepicker table tr, | |
.ui-timepicker table tr { | |
line-height: 15px; | |
} | |
.ui-datepicker table tr:hover, | |
.ui-timepicker table tr:hover { | |
background: none repeat scroll 0 0 transparent; | |
} | |
.ui-datepicker table td, | |
.ui-timepicker table td { | |
width: 14%; | |
padding: 0; | |
} | |
.ui-datepicker table td.ui-datepicker-today a, | |
.ui-timepicker table td.ui-datepicker-today a { | |
color: #2289DA; | |
} | |
.ui-datepicker table td.selected a, | |
.ui-timepicker table td.selected a { | |
background: -moz-linear-gradient(center top, #33a3ef, #168ad4) repeat scroll 0 0 transparent !important; | |
border-radius: 3px 3px 3px 3px; | |
color: white; | |
opacity: 1; | |
position: relative; | |
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); | |
} | |
.ui-datepicker table a.ui-state-default, | |
.ui-timepicker table a.ui-state-default { | |
border: none; | |
background: none repeat scroll 0 0 transparent; | |
color: #737272; | |
border-radius: 3px 3px 3px 3px; | |
cursor: pointer; | |
display: block; | |
font-size: 12px; | |
font-weight: 500; | |
padding: 2px 0; | |
margin: 1px; | |
text-align: center; | |
} | |
.ui-datepicker table a.ui-state-default:hover, | |
.ui-timepicker table a.ui-state-default:hover { | |
border: none; | |
background: none repeat scroll 0 0 #EAEAEA; | |
} | |
div.ui-datepicker, | |
div.ui-timepicker { | |
background: none repeat scroll 0 0 #F9F9F9; | |
border-radius: 4px 4px 4px 4px; | |
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); | |
color: #423E3E; | |
max-width: 304px; | |
min-height: 15px; | |
min-width: 150px; | |
position: absolute; | |
z-index: 1000; | |
margin-top: 9px; | |
padding: 8px; | |
} | |
div.ui-datepicker .arrow, | |
div.ui-timepicker .arrow { | |
border-color: transparent transparent #F9F9F9; | |
left: 50%; | |
margin-left: -12px; | |
top: -24px; | |
border-style: solid; | |
border-width: 12px; | |
height: 0; | |
position: absolute; | |
width: 0; | |
z-index: 100; | |
} | |
div.ui-datepicker:after, | |
div.ui-timepicker:after { | |
border-bottom: 9px solid #F9F9F9; | |
border-left: 9px solid rgba(0, 0, 0, 0); | |
border-right: 9px solid rgba(0, 0, 0, 0); | |
content: ""; | |
display: inline-block; | |
left: 46%; | |
position: absolute; | |
top: -9px; | |
} | |
div.ui-datepicker:before, | |
div.ui-timepicker:before { | |
border-bottom: 9px solid rgba(0, 0, 0, 0.2); | |
border-left: 9px solid rgba(0, 0, 0, 0); | |
border-right: 9px solid rgba(0, 0, 0, 0); | |
content: ""; | |
display: inline-block; | |
left: 46%; | |
position: absolute; | |
top: -9px; | |
} | |
li.ui-draggable-dragging { | |
width: 300px; | |
} | |
li.ui-draggable-dragging .duedate { | |
display: none; | |
} | |
.task-item.ng-enter, | |
.task-item.ng-leave, | |
.task-item.ng-move { | |
-webkit-transition: 200ms cubic-bezier(0.25, 0.25, 0.75, 0.75) all; | |
-moz-transition: 200ms cubic-bezier(0.25, 0.25, 0.75, 0.75) all; | |
-ms-transition: 200ms cubic-bezier(0.25, 0.25, 0.75, 0.75) all; | |
-o-transition: 200ms cubic-bezier(0.25, 0.25, 0.75, 0.75) all; | |
transition: 200ms cubic-bezier(0.25, 0.25, 0.75, 0.75) all; | |
position: relative; | |
display: block; | |
} | |
.task-item.ng-enter.ng-enter-active, | |
.task-item.ng-move.ng-move-active, | |
.task-item.ng-leave { | |
opacity: 1; | |
height: 37px !important; | |
} | |
.task-item.ng-leave.ng-leave-active, | |
.task-item.ng-move, | |
.task-item.ng-enter { | |
opacity: 0; | |
height: 0px !important; | |
} | |
div.percentdone { | |
height: 3px; | |
margin-bottom: -3px; | |
background-color: #CCC; | |
border-radius: 2px 2px 2px 2px; | |
} | |
#searchresults { | |
padding-top: 0px !important; | |
margin-top: 20px; | |
background-color: transparent !important; | |
} | |
#searchresults #status { | |
padding: 10px 0px 18px !important; | |
height: 22px !important; | |
background-color: transparent !important; | |
font-weight: bold; | |
color: #909090; | |
font-size: 13px !important; | |
text-shadow: 0 1px 0 #ffffff; | |
} | |
#searchresults span.icon.task-checkbox { | |
background-position: -260px -20px; | |
opacity: 0.6; | |
} | |
#searchresults span.icon.task-checkbox.task-checked { | |
background-position: -260px -20px; | |
} | |
#searchresults span.icon.task-star:hover { | |
background-position: -140px 0 !important; | |
} | |
.template { | |
display: none; | |
} | |
@media only screen and (max-width: 768px) { | |
#app-content.details-visible { | |
left: -370px !important; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment