mirror of
https://github.com/TracksApp/tracks.git
synced 2026-01-17 14:45:28 +01:00
9263249e77
When you start dragging an action, the other contexts collapse to provide easier targets for dropping. After the drop, the contexts return to their previously states of collapsed/expanded. git-svn-id: http://www.rousette.org.uk/svn/tracks-repos/trunk@275 a4c988fc-2ded-0310-b66e-134b36920a42
657 lines
12 KiB
CSS
657 lines
12 KiB
CSS
/* Stylesheet for the main listing page */
|
|
|
|
body {
|
|
font-family: "Lucida Grande", Verdana, Geneva, Arial, sans-serif;
|
|
font-size: 12px;
|
|
line-height: 19px;
|
|
padding: 0px 10px;
|
|
margin: 0px;
|
|
background: #eee;
|
|
}
|
|
|
|
p {
|
|
padding: 2px;
|
|
}
|
|
|
|
a, a:link, a:active, a:visited {
|
|
color: #cc3334;
|
|
text-decoration: none;
|
|
padding-left: 1px;
|
|
padding-right: 1px;
|
|
}
|
|
|
|
a:hover {
|
|
color: #fff;
|
|
background-color: #cc3334;
|
|
}
|
|
|
|
/* Rules for the icon links */
|
|
|
|
img.edit_item {background-image: url(../images/edit_off.png); background-repeat: no-repeat; border: none;}
|
|
a:hover img.edit_item {background-image: url(../images/edit_on.png); background-color: transparent; background-repeat: no-repeat; border: none;}
|
|
|
|
img.delete_item {background-image: url(../images/delete_off.png); background-repeat: no-repeat; border: none;}
|
|
a:hover img.delete_item {background-image: url(../images/delete_on.png);background-color: transparent;background-repeat: no-repeat; border: none;}
|
|
|
|
a.to_top {background: transparent url(../images/top_off.png) no-repeat;}
|
|
a.to_top:hover {background: transparent url(../images/top_on.png) no-repeat;}
|
|
|
|
a.up {background: transparent url(../images/up_off.png) no-repeat;}
|
|
a.up:hover {background: transparent url(../images/up_on.png) no-repeat;}
|
|
|
|
a.down {background: transparent url(../images/down_off.png) no-repeat;}
|
|
a.down:hover {background: transparent url(../images/down_on.png) no-repeat;}
|
|
|
|
a.to_bottom {background: transparent url(../images/bottom_off.png) no-repeat;}
|
|
a.to_bottom:hover {background: transparent url(../images/bottom_on.png) no-repeat;}
|
|
|
|
a.show_notes {background-image: url(../images/notes_off.png); background-repeat: no-repeat; padding: 1px; background-color: transparent;}
|
|
a.show_notes:hover {background-image: url(../images/notes_on.png); background-repeat: no-repeat; padding: 1px; background-color: transparent;}
|
|
|
|
|
|
/* Structural divs */
|
|
|
|
#content {
|
|
margin-top: 90px;
|
|
}
|
|
|
|
#display_box {
|
|
float: left;
|
|
width: 55%;
|
|
margin: 0px 15px 50px 15px;
|
|
}
|
|
|
|
#single_box {
|
|
width: 60%;
|
|
margin: 80px auto;
|
|
}
|
|
|
|
#full_width_display {
|
|
float: left;
|
|
width: 95%;
|
|
margin: 0px 15px 90px 15px;
|
|
}
|
|
|
|
#display_box_projects {
|
|
float: left;
|
|
width: 95%;
|
|
margin: 0px 15px 90px 15px;
|
|
}
|
|
|
|
/* Navigation links at the top */
|
|
|
|
#navcontainer {
|
|
position: fixed;
|
|
top: 48px;
|
|
}
|
|
|
|
#navlist {
|
|
margin: 0;
|
|
padding: 0 0 20px 5px;
|
|
/* border-bottom: 1px solid #000;*/
|
|
}
|
|
|
|
#navlist ul, #navlist li {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: inline;
|
|
list-style-type: none;
|
|
}
|
|
|
|
#navlist a:link, #navlist a:visited {
|
|
float: left;
|
|
line-height: 14px;
|
|
font-weight: bold;
|
|
margin: 0 10px 4px 10px;
|
|
text-decoration: none;
|
|
color: #eee;
|
|
}
|
|
|
|
#navlist a:link#current, #navlist a:visited#current, #navlist a:hover {
|
|
border-bottom: 4px solid #CCC;
|
|
padding-bottom: 2px;
|
|
background: transparent;
|
|
color: #CCC;
|
|
}
|
|
|
|
#navlist a:hover { color: #CCC; }
|
|
|
|
#topbar {
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
height: 68px;
|
|
margin-bottom: 20px;
|
|
clear: both;
|
|
background-color: #000;
|
|
filter: alpha(opacity=75);
|
|
-moz-opacity: .75;
|
|
opacity: .75;
|
|
color: #eee;
|
|
width: 100%;
|
|
z-index:1100;
|
|
}
|
|
|
|
#date {
|
|
float: left;
|
|
width: 45%;
|
|
padding-left: 15px;
|
|
white-space: nowrap; /* added 2006-05-17 for safari display, timfm */
|
|
}
|
|
|
|
#minilinks {
|
|
text-align: right;
|
|
position: fixed;
|
|
right: 15px;
|
|
top: 20px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.container {
|
|
padding: 0px 5px 0px 5px;
|
|
border: 1px solid #999;
|
|
margin: 0px 0px 15px 0px;
|
|
background: #fff;
|
|
}
|
|
|
|
.container h2 {
|
|
background: #CCC;
|
|
padding: 5px;
|
|
margin-top: 0px;
|
|
margin-left: -5px;
|
|
margin-right: -5px;
|
|
margin-bottom: 0px;
|
|
color: #666;
|
|
/* text-shadow: rgba(0,0,0,.4) 0px 2px 5px; */
|
|
}
|
|
|
|
.container_toggle img {
|
|
height:20px;
|
|
width:20px;
|
|
border:0px;
|
|
}
|
|
|
|
h2 a, h2 a:link, h2 a:active, h2 a:visited {
|
|
color: #666;
|
|
text-decoration: none;
|
|
}
|
|
|
|
h2 a:hover {
|
|
color: #cc3334;
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#input_box {
|
|
margin: 0% 5% 0% 60%;
|
|
padding: 0px 15px 0px 15px;
|
|
}
|
|
|
|
#input_box h2 {
|
|
color: #999;
|
|
|
|
}
|
|
|
|
#input_box ul {list-style-type: circle; font-size: 0.9em;}
|
|
|
|
.box {
|
|
float: left;
|
|
width: 20px;
|
|
}
|
|
|
|
.item-container {
|
|
padding:2px;
|
|
clear: left;
|
|
}
|
|
.item-container-drop-target {
|
|
border:2px inset black;
|
|
}
|
|
.container a.icon {
|
|
float: left;
|
|
vertical-align: middle;
|
|
background-color: transparent;
|
|
}
|
|
|
|
input.item-checkbox {
|
|
float: left;
|
|
margin-left: 10px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.description {
|
|
margin-left: 70px;
|
|
margin-right: 10px;
|
|
_margin-left: 0px;
|
|
_margin-right: 0px;
|
|
}
|
|
|
|
.stale_l1, .stale_l2, .stale_l3 {
|
|
margin-left: 67px;
|
|
padding-left: 3px;
|
|
}
|
|
|
|
.stale_l1 {
|
|
background: #ffC;
|
|
}
|
|
|
|
.tools {
|
|
margin-left: 25px;
|
|
width: 40px;
|
|
border-top: 1px solid #999;
|
|
}
|
|
|
|
#footer {
|
|
clear: both;
|
|
font-size: 0.8em;
|
|
text-align: center;
|
|
color: #999;
|
|
margin: 20px 20px 5px 20px;
|
|
padding: 0px;
|
|
}
|
|
|
|
/* The notes which may be attached to an item */
|
|
.notes {
|
|
margin: 5px;
|
|
padding: 3px;
|
|
border: 1px solid #F5ED59;
|
|
background: #FAF6AE;
|
|
color: #666666;
|
|
}
|
|
|
|
.notes p, .notes li {
|
|
padding: 1px;
|
|
margin: 0px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.notes ul {
|
|
list-style-type: disc;
|
|
}
|
|
|
|
.notes ol {
|
|
list-style-type: decimal;
|
|
}
|
|
|
|
/* The notes for the project */
|
|
|
|
div.note_wrapper {
|
|
margin: 3px;
|
|
padding: 2px;
|
|
}
|
|
|
|
div.note_wrapper p {
|
|
display: inline;
|
|
}
|
|
|
|
div.note_footer {
|
|
border-top: 1px solid #999;
|
|
padding-top: 3px;
|
|
font-style: italic;
|
|
font-size: 0.9em;
|
|
color: #666;
|
|
}
|
|
|
|
div.note_footer a, div.note_footer a:hover {
|
|
border-top: none;
|
|
padding-top: 0px;
|
|
vertical-align: middle;
|
|
background-color: transparent;
|
|
}
|
|
|
|
a.footer_link {color: #cc3334; font-style: normal;}
|
|
a.footer_link:hover {color: #fff; background-color: #cc3334 !important;}
|
|
|
|
/* The alert box notifications */
|
|
#notice {
|
|
padding: 2px;
|
|
border: 1px solid #007E00;
|
|
background-color: #c2ffc2;
|
|
color: #007E00;
|
|
margin: 15px 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
.confirmation {
|
|
border: 1px solid #007E00;
|
|
background-color: #c2ffc2;
|
|
color: #007E00;
|
|
text-align: center;
|
|
}
|
|
|
|
#status .confirmation {
|
|
margin: 2px 5px;
|
|
}
|
|
#warning, .warning {
|
|
padding: 2px;
|
|
border: 1px solid #ED2E38;
|
|
background-color: #F6979C;
|
|
color: #000000;
|
|
margin: 15px 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
#message, .message {
|
|
padding: 2px;
|
|
border: 1px solid #CCC;
|
|
background-color: #D2D3D6;
|
|
color: #666;
|
|
margin: 15px 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
.warning p {color: #FFFFFF;}
|
|
|
|
.project_completed {
|
|
border: 1px solid #007E00;
|
|
background-color: #c2ffc2;
|
|
padding: 5px;
|
|
color: #007E00;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Draw attention to some text
|
|
Same format as traffic lights */
|
|
.red {
|
|
color: #fff;
|
|
background: #f00;
|
|
padding: 1px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.amber {
|
|
color: #fff;
|
|
background: #ff6600;
|
|
padding: 1px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.orange {
|
|
color: #fff;
|
|
background: #FFA500;
|
|
padding: 1px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.green {
|
|
color: #fff;
|
|
background: #33cc00;
|
|
padding: 1px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.grey {
|
|
color: #fff;
|
|
background: #999;
|
|
padding: 1px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.info {
|
|
color: #fff;
|
|
background: #CCC;
|
|
border: 1px solid #999;
|
|
padding: 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
.highlight {
|
|
background: #ffC;
|
|
padding: 2px;
|
|
}
|
|
|
|
/* Backgrounds marking out 'staleness' of a task based on age of creation date
|
|
The colour of the background gets progressively yellower with age */
|
|
|
|
.stale_l1 {
|
|
background: #ffC;
|
|
}
|
|
|
|
.stale_l2 {
|
|
background: #ff6;
|
|
}
|
|
|
|
.stale_l3 {
|
|
background: #ff0;
|
|
}
|
|
|
|
|
|
/* Shows the number of undone next action */
|
|
.badge {
|
|
color: #fff;
|
|
background: #f00;
|
|
padding: 5px;
|
|
font-size: 16px;
|
|
margin: 10px 10px 0px 0px;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
margin-left: -25px;
|
|
}
|
|
|
|
li {
|
|
font-size: 1.1em;
|
|
padding: 3px 0px;
|
|
}
|
|
|
|
.even_row {
|
|
background: #fff;
|
|
_background: transparent;
|
|
padding: 5px 5px 5px 10px;
|
|
margin: 2px 2px;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
.odd_row {
|
|
background: #EDF3FE;
|
|
padding: 5px 5px 5px 10px;
|
|
}
|
|
|
|
.edit-form {
|
|
background: #ccc;
|
|
padding: 5px;
|
|
border-top: 1px solid #999;
|
|
border-bottom: 1px solid #999;
|
|
}
|
|
|
|
/* Right align labels in forms */
|
|
|
|
.label {
|
|
text-align: right;
|
|
}
|
|
|
|
input {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Positioning the 'cells' in the list */
|
|
|
|
.position {
|
|
float: left;
|
|
}
|
|
|
|
img.position, a:hover img.position {
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.data {
|
|
text-align: left;
|
|
margin-left: 20px;
|
|
float: left;
|
|
}
|
|
|
|
div.buttons, div.buttons a, div.buttons a:hover {
|
|
text-align: right;
|
|
margin-right: 0px;
|
|
vertical-align: middle;
|
|
background-color: transparent;
|
|
}
|
|
|
|
div#list-projects, div#list-contexts {
|
|
border: 1px solid #999;
|
|
}
|
|
|
|
.container td {
|
|
border: none;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.container form {
|
|
border: none;
|
|
}
|
|
|
|
div.project_description {
|
|
background: #eee;
|
|
padding: 5px;
|
|
margin-top: 0px;
|
|
margin-left: -5px;
|
|
margin-right: -5px;
|
|
color: #666;
|
|
font-style: italic;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
/* Uncomment line below if you want the description to have
|
|
shadowed text */
|
|
/* text-shadow: rgba(0,0,0,.4) 0px 2px 5px; */
|
|
}
|
|
|
|
/* Form elements */
|
|
form {
|
|
border: 1px solid #CCC;
|
|
padding: 10px;
|
|
margin: 0px;
|
|
width: 313px;
|
|
}
|
|
|
|
.inline-form {
|
|
border: none;
|
|
padding: 3px;
|
|
width: 100%;
|
|
_width: 40%;
|
|
}
|
|
|
|
form.button-to {
|
|
border: none;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
label {
|
|
font-weight: bold;
|
|
padding: 0px 0px;
|
|
}
|
|
|
|
input, select {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.feed {
|
|
font-family: verdana, sans-serif;
|
|
font-size: 10px;
|
|
font-weight:bold;
|
|
text-decoration:none;
|
|
color: white;
|
|
background-color: #F60;
|
|
border:1px solid;
|
|
border-color: #FC9 #630 #330 #F96;
|
|
padding:0px 3px 0px 3px;
|
|
margin:0px;
|
|
}
|
|
|
|
/* Classes for Drag and Drop */
|
|
.handle {
|
|
color: #fff;
|
|
background: #000;
|
|
padding: 1px;
|
|
font-size: 10px;
|
|
cursor: move;
|
|
}
|
|
|
|
div.message {
|
|
margin: 5px 0px;
|
|
background: #FAF4B5;
|
|
padding: 2px;
|
|
}
|
|
|
|
.message p {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
font-size: 1em;
|
|
color: #666;
|
|
}
|
|
|
|
/* Error message styles */
|
|
.fieldWithErrors {
|
|
padding: 2px;
|
|
background-color: red;
|
|
display: table;
|
|
}
|
|
|
|
#errorExplanation {
|
|
width: 335px;
|
|
border: 2px solid #ff0000;
|
|
padding: 7px;
|
|
padding-bottom: 12px;
|
|
margin: 10px auto 20px auto;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
#errorExplanation h2 {
|
|
text-align: left;
|
|
font-weight: bold;
|
|
padding: 5px 5px 5px 15px;
|
|
font-size: 12px;
|
|
margin: -7px;
|
|
background-color: #c00;
|
|
color: #fff;
|
|
}
|
|
|
|
#errorExplanation p {
|
|
color: #333;
|
|
margin-bottom: 0;
|
|
padding: 5px;
|
|
}
|
|
|
|
#errorExplanation ul li {
|
|
font-size: 1em;
|
|
list-style: disc;
|
|
}
|
|
|
|
ul#prefs {list-style-type: disc; margin-left: 5px;}
|
|
|
|
#feedlegend {
|
|
padding: 2px;
|
|
border: 1px solid #CCC;
|
|
background-color: #D2D3D6;
|
|
color: #666;
|
|
padding: 5px 20px;
|
|
text-align: left;
|
|
}
|
|
#feedlegend h3, #feedlegend dl, #feedlegend dt, #feedlegend dd {
|
|
display: inline;
|
|
}
|
|
#feedlegend dt {
|
|
margin-left: 15px;
|
|
}
|
|
#feedlegend dd {
|
|
margin-left: 3px;
|
|
}
|
|
#feedlegend p {
|
|
margin-bottom: 0px;
|
|
}
|
|
#feeds img.rss-icon {
|
|
margin-bottom: -4px;
|
|
}
|
|
#feeds li {
|
|
font-size:13px;
|
|
font-family: "Lucida Grande", Verdana, Geneva, Arial, sans-serif;
|
|
}
|
|
#feeds li h4 {
|
|
margin-top: 12px;
|
|
margin-bottom: 4px;
|
|
font-weight: normal;
|
|
font-style:oblique;
|
|
}
|