tracks/tracks/public/stylesheets/standard.css
lukemelia f47c6f2324 Remove gradient from container headers.
Reduce overall font-size.
Refine sizing of form fields in new action form.
Fixes #512 and #513.



git-svn-id: http://www.rousette.org.uk/svn/tracks-repos/trunk@540 a4c988fc-2ded-0310-b66e-134b36920a42
2007-05-16 02:55:26 +00:00

889 lines
No EOL
16 KiB
CSS

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
body {
font-family: "Lucida Grande", Verdana, Geneva, Arial, sans-serif;
font-size: 80%;
padding: 0px 10px;
margin: 0px;
background: #eee;
}
p {
padding: 2px;
font-size: 92%;
line-height: 140%;
}
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;
}
h1 {
font-size: 304%;
font-weight: bold;
}
h2 {
font-size: 148%;
font-weight: bold;
}
h3 {
font-size: 129%;
font-weight: bold;
}
/* 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, a.link_to_notes {background-image: url(../images/notes_off.png); background-repeat: no-repeat; padding: 1px; background-color: transparent;}
a.show_notes:hover, a.link_to_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 10px 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;
left: 0px;
}
#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;
margin-top: 15px;
margin-bottom: 5px;
white-space: nowrap; /* added 2006-05-17 for safari display, timfm */
}
#date h1 {
font-size: 152%;
}
#minilinks {
text-align: right;
position: fixed;
right: 15px;
top: 10px;
font-size: 0.9em;
}
.container {
padding: 0px 5px 0px 5px;
border: 1px solid #999;
margin: 0px 0px 15px 0px;
background: #fff;
}
.completed {
background: #eee;
}
.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;
}
div#input_box {
margin: 0px 15px 0px 58%;
padding: 0px 15px 0px 0px;
}
#input_box h2 {
color: #999;
}
#input_box ul {list-style-type: circle; font-size: 0.9em;}
#input_box .show_from_input, #input_box .due_input {
float:left;
}
#input_box .submit_box {
width:50%;
text-align:center;
}
#input_box .submit_box input {
margin-top:10px;
}
.box {
float: left;
width: 20px;
}
div.item-container {
padding: 2px 0px;
line-height:20px;
clear: both;
}
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;
}
.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: 85%;
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, .note_wrapper 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;
}
div.add_note_link {
margin-top:12px;
float: right;
}
div#project_status > div {
padding: 10px;
}
#project_status span {
margin-right:5px;
}
#project_status .active_state {
font-weight:bold;
}
div#default_context > div{
padding:10px;
}
a.footer_link {color: #cc3334; font-style: normal;}
a.footer_link:hover {color: #fff; background-color: #cc3334 !important;}
/* Tag formatting */
span.tag {
font-size: 0.8em;
background-color: #CCE7FF;
color: #000;
padding: 1px;
margin-right: 2px;
}
span.tag a,
span.tag a:link,
span.tag a:active,
span.tag a:visited {
color: #000;
}
span.tag a:hover {
background-color: #99CCFF;
color: #333;
}
/* Flash box styling */
div#message_holder {
position: absolute;
z-index: 100;
left: 60%;
top: 30px;
right: 0px;
margin: 0px;
}
h4.alert {
font-size: 1em;
margin: 0px;
padding: 5px;
text-align: center;
}
h4.warning {
border: 1px solid #ED2E38;
background-color: #F6979C;
color: #000;
}
h4.error {
color:#fff;
background:#c00;
}
h4.notice {
border: 1px solid #007E00;
background-color: #c2ffc2;
color: #007E00;
}
/* *****/
.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: 85%;
}
.amber {
color: #fff;
background: #ff6600;
padding: 1px;
font-size: 85%;
}
.orange {
color: #fff;
background: #FFA500;
padding: 1px;
font-size: 85%;
}
.green {
color: #fff;
background: #33cc00;
padding: 1px;
font-size: 85%;
}
.grey {
color: #fff;
background: #999;
padding: 2px;
font-size: 85%;
}
.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: 3px 5px;
font-size: 12pt;
margin: 10px 10px 0px 0px;
height:26px;
}
ul {
list-style-type: none;
}
#sidebar h3 {
margin-top:15px;
margin-bottom:5px;
}
#sidebar ul {
margin-left: auto;
list-style-position: inside;
}
li {
font-size: 1.1em;
padding: 3px 0px;
}
#sidebar li {
padding: auto;
}
.sortable_row {
background: #fff;
_background: transparent;
padding: 4px 4px 4px 8px;
margin: 2px 2px;
border: 1px solid #ccc;
}
.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 */
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-active-projects, div#list-hidden-projects, div#list-completed-projects, div#list-contexts, div#projects-empty-nd {
clear:right;
border: 1px solid #999;
}
.project-state-group h2 {
margin:20px 0px 8px 13px;
}
div.alpha_sort {
margin-top:-20px;
float:right;
}
.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; */
}
#project-next-prev {
text-align:right;
}
/* Form elements */
form {
border: 1px solid #CCC;
padding: 10px;
margin: 0px;
}
.inline-form {
border: none;
padding: 3px;
}
.inline-form table {
padding-right: 3px;
}
/* expand form contents to fill the whole form */
.inline-form table,
.inline-form textarea#item_notes,
.inline-form input#item_description {
width: 100%;
}
/* shrink the label/left column as small as necessary */
.inline-form table td.label {
width: 13ex;
}
#todo_new_action_container {
background:#ddd;
width:270px;
padding:5px;
background-image: url('/images/new-action-gradient.png');
background-repeat: repeat-x;
background-position: top;
}
#todo_new_action_container input, #todo_new_action_container textarea {
width:260px;
}
#todo_new_action_container .show_from_input input {
width:120px;
}
#todo_new_action_container .show_from_input {
margin-left:15px;
}
#todo_new_action_container .due_input input {
width:120px;
}
#todo-form-new-action .submit_box {
width:260px;
text-align:center;
}
#todo-form-new-action .submit_box input {
width:50%;
}
#hide_todo_new_action {
text-align:right;
}
#todo-form-new-action label {
display:block;
}
form.button-to {
border: none;
padding: 0px;
margin: 0px;
}
label {
font-weight: bold;
padding: 0px 0px;
}
input, select, textarea {
margin: 0px 0px 5px 0px;
}
.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 */
.position {
float: left;
margin-top:2px;
}
.handle {
color: #fff;
background: #000;
padding: 2px;
font-size: 92%;
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 {
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-type: disc;
list-style-position: inside;
}
ul#prefs {list-style-type: disc; margin-left: 5px;}
#token_area, #authentication_area {
text-align:center;
margin-top:20px;
margin-bottom:10px;
}
#token_area .description{
font-weight:bold;
}
#token_area form {
width:100%;
text-align:center;
}
.prefscontainer .actions {
text-align:center;
margin-bottom:20px;
}
.authtype_container .actions {
margin-top:20px;
margin-bottom:20px;
}
#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;
}
input.open_id {
background: url(../images/open-id-login-bg.gif) no-repeat;
background-color: #fff;
background-position: 0 50%;
color: #000;
padding-left: 18px;
width:182px;
}
div.page_name_auto_complete {
width: 100%;
background: #fff;
display: inline;
}
div.page_name_auto_complete ul {
border: 1px solid #888;
margin: 0;
padding: 0;
width: 100%;
list-style-type: none;
}
div.page_name_auto_complete ul li {
margin: 0;
padding: 2px;
font-weight:bold;
list-style-type: none;
}
div.page_name_auto_complete ul li.selected {
background-color: #ffb;
}
div.page_name_auto_complete ul strong.highlight {
color: #800;
margin: 0;
padding: 0;
}
table.next_actions td {
padding:5px 3px 2px 0px;
}
table.users_table {
width: 100%;
text-align: center;
border: 1px solid #666;
background-color: #fff;
border-spacing: 0px;
}
.users_table th {color: #fff; background-color: #000;}
.users_table td {border: none;}