diff options
author | Raimund Schlüßler <raimund.schluessler@googlemail.com> | 2016-05-19 00:15:52 +0300 |
---|---|---|
committer | Raimund Schlüßler <raimund.schluessler@googlemail.com> | 2016-05-19 00:15:52 +0300 |
commit | f84450e0052c6b3eca07fcc002767e7cdc7aa8f9 (patch) | |
tree | c9231655454265422b35565c0efc0ca266c184a7 /css | |
parent | 58bd87f42e6cabfecea54103d5fcaac2cfb9a95c (diff) |
Use #app-sidebar, closes #238
Diffstat (limited to 'css')
-rw-r--r-- | css/style.css | 251 |
1 files changed, 122 insertions, 129 deletions
diff --git a/css/style.css b/css/style.css index 1774ad1a..8dd7eba2 100644 --- a/css/style.css +++ b/css/style.css @@ -557,34 +557,27 @@ #app-content div.task-list .grouped-tasks { position: relative; } -#task-details { - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -ms-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; +#app-sidebar { transition: all 0.2s ease-in-out; - position: absolute; right: -400px; - bottom: 0; - top: 0; width: 370px; max-width: 100%; - padding: 18px 0 17px; + border-left: none; } -#task-details.details-visible { +#app-sidebar.details-visible { right: 0; } -#task-details div.content-wrapper { - padding: 0 10px 2px 0; +#app-sidebar div.content-wrapper { + padding: 0; height: 100%; } -#task-details div.content-wrapper > div { +#app-sidebar div.content-wrapper > div { background: url("../img/bgTaskDetail.png") repeat scroll 0 0 #ffffff; border: 1px solid #CCCCCC; height: 100%; position: relative; } -#task-details div.content-wrapper div.notice { +#app-sidebar div.content-wrapper div.notice { color: #888; font-size: 16px; position: absolute; @@ -592,7 +585,7 @@ top: 50%; width: 100%; } -#task-details div.content-wrapper div.footer { +#app-sidebar div.content-wrapper div.footer { background: url("../img/bgTask.png") repeat scroll 0 0 #ffffff; border-top: 1px solid #D3D3D3; bottom: 0; @@ -602,19 +595,19 @@ position: absolute; right: 0; } -#task-details div.content-wrapper div.footer .detail-close .icon { +#app-sidebar div.content-wrapper div.footer .detail-close .icon { left: auto; right: 8px; } -#task-details div.content-wrapper div.footer .icon { +#app-sidebar div.content-wrapper div.footer .icon { position: absolute; bottom: 7px; left: 8px; } -#task-details div.content-wrapper div.footer .detail-addcomment { +#app-sidebar div.content-wrapper div.footer .detail-addcomment { padding: 4px 10px 0; } -#task-details div.content-wrapper div.footer .detail-addcomment input { +#app-sidebar div.content-wrapper div.footer .detail-addcomment input { background: none repeat scroll 0 0 white; border: 1px solid #bdbcbb; border-radius: 0; @@ -629,16 +622,16 @@ padding: 4px; transition: all 0.2s ease-in-out 0s; } -#task-details div.content-wrapper div.footer .detail-addcomment input[type="text"] { +#app-sidebar div.content-wrapper div.footer .detail-addcomment input[type="text"] { width: 230px; } -#task-details div.content-wrapper div.footer .detail-addcomment input[type="button"] { +#app-sidebar 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 { +#app-sidebar 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; @@ -648,16 +641,16 @@ transition: none; cursor: pointer; } -#task-details div.content-wrapper.completed .body .section .section-title { +#app-sidebar div.content-wrapper.completed .body .section .section-title { color: #9FA2A6 !important; } -#task-details div.content-wrapper.completed .body .section .icon.detail-date { +#app-sidebar 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 { +#app-sidebar div.content-wrapper.completed .body .section .icon.detail-reminder { background-position: -40px -40px !important; } -#task-details div.content-wrapper .title { +#app-sidebar div.content-wrapper .title { background-color: #f5f5f5; border-bottom: 1px solid rgba(0, 0, 0, 0.24); font-size: 16px; @@ -668,16 +661,16 @@ text-shadow: 0 1px 0 white; word-wrap: break-word; } -#task-details div.content-wrapper .title .title-text { +#app-sidebar div.content-wrapper .title .title-text { cursor: text; display: block; } -#task-details div.content-wrapper .title .title-text.strike-through { +#app-sidebar 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 { +#app-sidebar div.content-wrapper .title textarea, +#app-sidebar div.content-wrapper .title pre { box-shadow: none; font-size: 16px; font-weight: bold; @@ -688,7 +681,7 @@ white-space: pre-wrap; word-wrap: break-word; } -#task-details div.content-wrapper .title pre { +#app-sidebar div.content-wrapper .title pre { border: 0 none !important; display: block; margin: 0; @@ -696,7 +689,7 @@ padding: 0 !important; visibility: hidden; } -#task-details div.content-wrapper .title textarea { +#app-sidebar div.content-wrapper .title textarea { margin: 0; border-radius: 0; height: 100%; @@ -707,23 +700,23 @@ top: 0; width: 100%; } -#task-details div.content-wrapper .title .expandable-container { +#app-sidebar div.content-wrapper .title .expandable-container { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #AAAAAA; margin: -1px -4px -1px -6px; padding: 0 5px; display: none !important; } -#task-details div.content-wrapper .title .expandable-container .expandingArea { +#app-sidebar div.content-wrapper .title .expandable-container .expandingArea { position: relative; } -#task-details div.content-wrapper .title.editing .title-text { +#app-sidebar div.content-wrapper .title.editing .title-text { display: none !important; } -#task-details div.content-wrapper .title.editing .expandable-container { +#app-sidebar div.content-wrapper .title.editing .expandable-container { display: block !important; } -#task-details div.content-wrapper .body { +#app-sidebar div.content-wrapper .body { bottom: 65px; left: 0; overflow: auto; @@ -731,7 +724,7 @@ right: 0; top: 55px; } -#task-details div.content-wrapper .body .note { +#app-sidebar 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; @@ -747,12 +740,12 @@ padding: 5px 15px; cursor: text; } -#task-details div.content-wrapper .body .note .expandingArea { +#app-sidebar 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 { +#app-sidebar div.content-wrapper .body .note .expandingArea textarea, +#app-sidebar div.content-wrapper .body .note .expandingArea pre { box-shadow: none; background: none repeat scroll 0 0 transparent; border: medium none; @@ -762,7 +755,7 @@ white-space: pre-wrap; word-wrap: break-word; } -#task-details div.content-wrapper .body .note .expandingArea pre { +#app-sidebar div.content-wrapper .body .note .expandingArea pre { border: 0 none !important; display: block; margin: 0; @@ -770,7 +763,7 @@ padding: 0 !important; visibility: hidden; } -#task-details div.content-wrapper .body .note .expandingArea textarea { +#app-sidebar div.content-wrapper .body .note .expandingArea textarea { margin: 0 0 0 1px; border-radius: 0; height: 100%; @@ -784,55 +777,55 @@ font-weight: 500; outline: medium none; } -#task-details div.content-wrapper .body .note .note-body, -#task-details div.content-wrapper .body .note .note-edit { +#app-sidebar div.content-wrapper .body .note .note-body, +#app-sidebar 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 { +#app-sidebar div.content-wrapper .body .note .note-body a, +#app-sidebar 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 { +#app-sidebar div.content-wrapper .body .note .note-body .content-fakeable, +#app-sidebar div.content-wrapper .body .note .note-edit .content-fakeable, +#app-sidebar div.content-wrapper .body .note .note-body .edit-view, +#app-sidebar div.content-wrapper .body .note .note-edit .edit-view, +#app-sidebar div.content-wrapper .body .note .note-body .display-view, +#app-sidebar div.content-wrapper .body .note .note-edit .display-view { cursor: text !important; } -#task-details div.content-wrapper .body .note .note-body .content-fakeable .display-view, -#task-details div.content-wrapper .body .note .note-edit .content-fakeable .display-view { +#app-sidebar div.content-wrapper .body .note .note-body .content-fakeable .display-view, +#app-sidebar div.content-wrapper .body .note .note-edit .content-fakeable .display-view { display: block; } -#task-details div.content-wrapper .body .note .note-body .content-fakeable .edit-view, -#task-details div.content-wrapper .body .note .note-edit .content-fakeable .edit-view { +#app-sidebar div.content-wrapper .body .note .note-body .content-fakeable .edit-view, +#app-sidebar div.content-wrapper .body .note .note-edit .content-fakeable .edit-view { display: none !important; } -#task-details div.content-wrapper .body .note .note-body .content-fakeable.editing .display-view, -#task-details div.content-wrapper .body .note .note-edit .content-fakeable.editing .display-view { +#app-sidebar div.content-wrapper .body .note .note-body .content-fakeable.editing .display-view, +#app-sidebar div.content-wrapper .body .note .note-edit .content-fakeable.editing .display-view { display: none !important; } -#task-details div.content-wrapper .body .note .note-body .content-fakeable.editing .edit-view, -#task-details div.content-wrapper .body .note .note-edit .content-fakeable.editing .edit-view { +#app-sidebar div.content-wrapper .body .note .note-body .content-fakeable.editing .edit-view, +#app-sidebar div.content-wrapper .body .note .note-edit .content-fakeable.editing .edit-view { display: block !important; } -#task-details div.content-wrapper .body .note .note-body .display-view, -#task-details div.content-wrapper .body .note .note-edit .display-view { +#app-sidebar div.content-wrapper .body .note .note-body .display-view, +#app-sidebar div.content-wrapper .body .note .note-edit .display-view { white-space: pre-wrap; } -#task-details div.content-wrapper .body .detail-comments .comment a, -#task-details div.content-wrapper .body .note .note-body .display-view a, -#task-details div.content-wrapper .body .note .note-edit .display-view a, -#task-details div.content-wrapper .title .title-text a, -#task-details div.content-wrapper .task-list .task-body .title-wrapper .title a, +#app-sidebar div.content-wrapper .body .detail-comments .comment a, +#app-sidebar div.content-wrapper .body .note .note-body .display-view a, +#app-sidebar div.content-wrapper .body .note .note-edit .display-view a, +#app-sidebar div.content-wrapper .title .title-text a, +#app-sidebar div.content-wrapper .task-list .task-body .title-wrapper .title a, #app-content div.content-wrapper .task-body .title-wrapper span.title a { cursor: pointer; text-decoration: underline; } -#task-details div.content-wrapper .body .note .open-fullscreen-note { +#app-sidebar div.content-wrapper .body .note .open-fullscreen-note { margin-top: -2px; padding-bottom: 10px; padding-left: 10px; @@ -840,17 +833,17 @@ right: 23px; z-index: 9999; } -#task-details div.content-wrapper .body .subtasks { +#app-sidebar 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 { +#app-sidebar div.content-wrapper .body .subtasks.buffer { padding-bottom: 32px; } -#task-details div.content-wrapper .body .section { +#app-sidebar div.content-wrapper .body .section { background: url("../img/divider.svg") repeat-x scroll center bottom transparent; height: 46px; padding: 9px 20px 9px 55px; @@ -859,7 +852,7 @@ border-top: none; margin-bottom: 0px; } -#task-details div.content-wrapper .body .section input { +#app-sidebar div.content-wrapper .body .section input { -moz-box-sizing: border-box; background: none repeat scroll 0 0 white; border: 1px solid #BDBCBB; @@ -873,33 +866,33 @@ outline: medium none; padding: 4px; } -#task-details div.content-wrapper .body .section input.focus { +#app-sidebar 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"] { +#app-sidebar div.content-wrapper .body .section input[type="range"] { border: medium none; box-shadow: none; width: 190px; margin: 5px 36px 0 0; height: 17px; } -#task-details div.content-wrapper .body .section input[type="text"] { +#app-sidebar div.content-wrapper .body .section input[type="text"] { float: left; } -#task-details div.content-wrapper .body .section .select2-search-field input { +#app-sidebar div.content-wrapper .body .section .select2-search-field input { border: 0 none; box-shadow: none; font-weight: bold; margin-top: 0px; font-family: inherit; } -#task-details div.content-wrapper .disabled .body .section .select2-search-field input { +#app-sidebar div.content-wrapper .disabled .body .section .select2-search-field input { width: auto; display: block !important; } -#task-details div.content-wrapper .body .section select { +#app-sidebar div.content-wrapper .body .section select { background-color: rgba(0, 0, 0, 0); border-radius: 0px; border: 1px solid #CCC; @@ -909,154 +902,154 @@ font-weight: normal; height: 19px; } -#task-details div.content-wrapper .body .section .icon { +#app-sidebar div.content-wrapper .body .section .icon { left: 16px; position: absolute; top: 13px; } -#task-details div.content-wrapper .body .section .icon.detail-delete { +#app-sidebar 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 { +#app-sidebar div.content-wrapper .body .section .icon.detail-delete:hover { opacity: 0.8; } -#task-details div.content-wrapper .body .section .icon.detail-save { +#app-sidebar 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 { +#app-sidebar div.content-wrapper .body .section .icon.detail-date, +#app-sidebar div.content-wrapper .body .section .icon.detail-start { background-position: -220px -80px; } -#task-details div.content-wrapper .body .section .icon.detail-remindertype { +#app-sidebar 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 { +#app-sidebar div.content-wrapper .body .section .icon.detail-remindertype:hover { opacity: 0.8; } -#task-details div.content-wrapper .body .section .section-title { +#app-sidebar div.content-wrapper .body .section .section-title { color: #9FA2A6; font-weight: bold; margin-top: 3px; display: block; } -#task-details div.content-wrapper .body .section .section-edit { +#app-sidebar div.content-wrapper .body .section .section-edit { display: none; } -#task-details div.content-wrapper .body .section.editing .icon.detail-save { +#app-sidebar div.content-wrapper .body .section.editing .icon.detail-save { display: inline-block; } -#task-details div.content-wrapper .body .section.editing .icon.detail-delete { +#app-sidebar div.content-wrapper .body .section.editing .icon.detail-delete { display: block; } -#task-details div.content-wrapper .body .section.editing .section-title { +#app-sidebar div.content-wrapper .body .section.editing .section-title { display: none; } -#task-details div.content-wrapper .body .section.editing .section-edit { +#app-sidebar div.content-wrapper .body .section.editing .section-edit { display: block; } -#task-details div.content-wrapper .body .section.date .icon.detail-date, -#task-details div.content-wrapper .body .section.date .icon.detail-start { +#app-sidebar div.content-wrapper .body .section.date .icon.detail-date, +#app-sidebar 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 { +#app-sidebar div.content-wrapper .body .section.date .icon.detail-date.overdue, +#app-sidebar 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 { +#app-sidebar div.content-wrapper .body .section.date .icon.detail-percent { background-position: -260px -80px; } -#task-details div.content-wrapper .body .section.date .icon.detail-reminder { +#app-sidebar 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 { +#app-sidebar 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 { +#app-sidebar div.content-wrapper .body .section.date:hover .icon.detail-delete { display: block; } -#task-details div.content-wrapper .disabled .body .section.date:hover .icon.detail-delete { +#app-sidebar div.content-wrapper .disabled .body .section.date:hover .icon.detail-delete { display: none; } -#task-details div.content-wrapper .body .section.date .section-title { +#app-sidebar div.content-wrapper .body .section.date .section-title { color: #4271A6; } -#task-details div.content-wrapper .body .section.date .section-title.overdue { +#app-sidebar div.content-wrapper .body .section.date .section-title.overdue { color: #B3312D; } -#task-details div.content-wrapper .body .section.date .section-title.repeat { +#app-sidebar div.content-wrapper .body .section.date .section-title.repeat { margin-top: -2px; } -#task-details div.content-wrapper .body .section.high .icon.detail-priority { +#app-sidebar div.content-wrapper .body .section.high .icon.detail-priority { background-position: -180px -80px; } -#task-details div.content-wrapper .body .section.high .section-title { +#app-sidebar div.content-wrapper .body .section.high .section-title { color: #B3312D; } -#task-details div.content-wrapper .body .section.medium .icon.detail-priority { +#app-sidebar div.content-wrapper .body .section.medium .icon.detail-priority { background-position: -160px -100px; } -#task-details div.content-wrapper .body .section.medium .section-title { +#app-sidebar div.content-wrapper .body .section.medium .section-title { color: #FFDD00; } -#task-details div.content-wrapper .body .section.low .icon.detail-priority { +#app-sidebar div.content-wrapper .body .section.low .icon.detail-priority { background-position: -180px -100px; } -#task-details div.content-wrapper .body .section.low .section-title { +#app-sidebar div.content-wrapper .body .section.low .section-title { color: #4271A6; } -#task-details div.content-wrapper .body .section.active .detail-categories { +#app-sidebar div.content-wrapper .body .section.active .detail-categories { background-position: -200px -80px; } -#task-details div.content-wrapper .body .section.active .select2-search-field input { +#app-sidebar div.content-wrapper .body .section.active .select2-search-field input { color: #4271a6; } -#task-details div.content-wrapper .body .section.editing .icon.detail-remindertype { +#app-sidebar div.content-wrapper .body .section.editing .icon.detail-remindertype { display: block; } -#task-details div.content-wrapper .body .section .icon.detail-remindertype { +#app-sidebar div.content-wrapper .body .section .icon.detail-remindertype { background-position: -260px -40px; } -#task-details div.content-wrapper .body .section.detail-reminder .section-description { +#app-sidebar 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 { +#app-sidebar div.content-wrapper .body .section.detail-reminder .section-description.repeat { display: block; } -#task-details div.content-wrapper .body .section.detail-reminder.date .section-description { +#app-sidebar div.content-wrapper .body .section.detail-reminder.date .section-description { display: block; } -#task-details div.content-wrapper .body .section.detail-categories { +#app-sidebar div.content-wrapper .body .section.detail-categories { height: auto; padding-left: 50px; } -#task-details div.content-wrapper .body .section.detail-note { +#app-sidebar div.content-wrapper .body .section.detail-note { padding: 20px 0; height: auto; } -#task-details div.content-wrapper .body .section.detail-comments { +#app-sidebar 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 { +#app-sidebar 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 { +#app-sidebar 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 { +#app-sidebar 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 { +#app-sidebar div.content-wrapper .body .section.detail-comments .comment-item .avatar { width: 32px; height: 32px; position: absolute; @@ -1065,19 +1058,19 @@ border-radius: 2px; overflow: hidden; } -#task-details div.content-wrapper .body .section.detail-comments .comment-item .avatar img { +#app-sidebar 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 { +#app-sidebar 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 { +#app-sidebar div.content-wrapper .body .section.detail-comments .comment-item .time { color: #9fa2a6; font-size: 11px; } -#task-details div.content-wrapper .body .section.detail-addcomment { +#app-sidebar div.content-wrapper .body .section.detail-addcomment { background: url("../img/divider.svg") repeat-x scroll center top transparent; bottom: 0; left: 0; |