blob: 6b21348f499adc36620f542a82a7d03371347061 [file] [log] [blame]
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
html, body {
height: 100%;
}
body {
font-size: 16px;
line-height: 1.5;
background: #eeeeee;
color: #333333;
}
body, input {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
input {
font-size: 100%;
}
a, a:visited, a:active {
color: #258;
}
h3 {
font-weight: bold;
text-decoration: underline;
font-size: 120%;
padding: 8px 6px;
text-align: center;
}
#top-tag-filter, #main-pane, #side-pane, #bottom-pane {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
#top-tag-filter {
left: 200px;
height: 44px;
bottom: auto;
background: #ddd;
border-bottom: 1px solid #999;
}
#help {
padding: 8px;
}
#main-pane {
top: 45px;
bottom: 0;
left: 220px;
overflow: auto;
}
#side-pane {
width: 200px;
right: auto;
overflow: auto;
background: #eee;
border-right: 1px solid #999;
background: #ddd;
}
.tag {
cursor: pointer;
float: left;
margin: 5px;
padding: 2px 7px;
font-size: 80%;
font-weight: bold;
background: #999;
color: #fff;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
opacity: 1;
transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-webkit-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
position: relative;
}
#tag-filter .label {
float: left;
margin-top: 9px;
margin-left: 12px;
margin-right: 8px;
}
#tag-filter .tag {
margin-top: 10px;
border: 1px solid #777;
}
#tag-filter .selected {
background: #69d;
}
#tag-filter .count {
font-weight: normal;
padding-left: 2px;
}
#lists .list {
padding: 3px 6px;
}
#lists .selected {
padding: 2px 6px;
background: #9be;
font-weight: bold;
}
#lists .list-name {
cursor: pointer;
color: black;
text-decoration: none;
}
#createList {
padding: 3px 6px;
margin-top: 5px;
}
#createList input {
width: 180px;
}
#new-todo-box {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 60px;
margin-right: 20px;
font-size: 160%;
position: relative;
height: 40px;
}
#new-todo {
position: absolute;
width: 100%;
}
#items-view {
margin-top: 5px;
margin-left: 5px;
}
#item-list .todo {
display: block;
height: 50px;
position: relative;
overflow: hidden;
border-top: 1px solid #ccc;
}
#item-list .todo .destroy {
cursor: pointer;
position: absolute;
left: 5px;
top: 15px;
height: 20px;
width: 20px;
}
#item-list .todo .display, #item-list .todo .edit {
margin-left: 30px;
height: 100%;
width: auto;
float: left;
padding-top: 18px;
line-height: 1;
}
#todo-input {
width: 300px;
position: relative;
top: -3px;
}
#item-list .done .todo-text {
text-decoration: line-through;
color: #999;
}
#item-list .todo:hover .destroy {
background: url("/public/destroy.png") no-repeat 0 0;
}
#item-list .todo .destroy:hover {
background-position: 0 -20px;
}
#item-list .todo .item-tags {
overflow: auto;
float: right;
margin-right: 8px;
}
#item-list .todo .item-tags .tag {
margin-top: 15px;
}
#item-list .todo .item-tags .removable_tag {
padding-right: 22px;
}
#item-list .todo .item-tags .tag .remove {
position: absolute;
top: 0;
right: 4px;
bottom: 0;
width: 16px;
background: url("/public/close_16.png") no-repeat 0 center;
}
#item-list .todo .item-tags .tag .remove:hover {
background-position: -16px center;
}
#item-list .todo .item-tags div.addtag {
background: none;
color: #333;
border: 1px dashed #999;
}
#item-list .todo .check {
float: left;
width: 25px;
}
#item-list .todo .todo-text {
float: left;
margin-left: 10px;
font-size: 100%;
}
#item-list .todo .edit input {
margin-left: 35px;
}
#edittag-input {
width: 80px;
}