Add clickable styles and reorganize stylesheet

develop
Sven Slootweg 11 years ago
parent 73310dbbdc
commit 5bf96a8d02

@ -1,9 +1,9 @@
@font-face { @font-face {
font-family: "FontAwesome"; font-family: "FontAwesome";
src: url('/static/fontawesome-webfont.eot'); src: url('/static/fontawesome-webfont.eot');
src: url('/static/fontawesome-webfont.eot?#iefix') format('eot'), url('/static/fontawesome-webfont.woff') format('woff'), url('/static/fontawesome-webfont.ttf') format('truetype'), url('/static/fontawesome-webfont.svg#FontAwesome') format('svg'); src: url('/static/fontawesome-webfont.eot?#iefix') format('eot'), url('/static/fontawesome-webfont.woff') format('woff'), url('/static/fontawesome-webfont.ttf') format('truetype'), url('/static/fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
body body
@ -12,101 +12,32 @@ body
font-family: "Nobile", sans-serif; font-family: "Nobile", sans-serif;
} }
table .clear
{
width: 100%;
border-spacing: 0px;
border-collapse: collapse;
}
table th, table td
{
text-align: left;
padding: 7px 7px;
border-left: 1px solid #252525;
border-right: 1px solid #252525;
}
table th
{
background-color: black;
color: white;
font-size: 12px;
}
table td
{
border: 1px solid #A1A1A1;
}
table th.empty table td.empty
{
padding: 0px;
}
table td
{
font-size: 13px;
}
section.tickets tr.priority-low
{
color: #2B2B2B;
background-color: #EDEDED;
}
section.tickets tr.priority-low:hover
{
background-color: #E3E3E3;
}
section.tickets tr.priority-normal
{
color: black;
background-color: #E7F7F7;
}
section.tickets tr.priority-normal:hover
{
background-color: #DEEEEE;
}
section.tickets tr.priority-high
{ {
background-color: #F7D6D6; clear: both;
} }
section.tickets tr.priority-high:hover
{
background-color: #EECECE;
}
section.tickets tr.priority-high td.priority /************************************************
{ ** Clickable rows **
color: red; ************************************************/
font-weight: bold;
}
section.tickets tr.status-closed table tr.clickable
{ {
color: gray; cursor: pointer;
background-color: #D0D0D0;
} }
section.tickets tr.status-closed:hover table tr.clickable a
{ {
background-color: #C7C7C7; /* This gets rid of the link styling for fallback hyperlinks in clickable table rows. */
color: inherit;
text-decoration: none;
} }
section.tickets tr.status-closed.priority-high td.priority
{
color: #656565;
}
.clear /************************************************
{ ** Page layout **
clear: both; ************************************************/
}
.wrapper .wrapper
{ {
@ -137,12 +68,18 @@ section.tickets tr.status-closed.priority-high td.priority
margin: 0px; margin: 0px;
} }
/*.header h2:before .footer
{ {
font-weight: normal; border-top: 3px solid black;
content: ";"; margin-top: 12px;
margin: 0px 16px; padding-top: 6px;
}*/ font-size: 12px;
}
/************************************************
** Page menu **
************************************************/
.menu .menu
{ {
@ -186,19 +123,11 @@ section.tickets tr.status-closed.priority-high td.priority
color: white; color: white;
} }
.main
{
}
.footer
{
border-top: 3px solid black;
margin-top: 12px;
padding-top: 6px;
font-size: 12px;
}
/************************************************
** Sections **
************************************************/
section section
{ {
padding: 12px 0px; padding: 12px 0px;
@ -219,6 +148,11 @@ p.lead
font-weight: bold; font-weight: bold;
} }
/************************************************
** Asides **
************************************************/
aside aside
{ {
float: right; float: right;
@ -247,58 +181,96 @@ aside section h3
font-size: 19px; font-size: 19px;
} }
section.statistics ul, section.tickets ul /************************************************
** Generic table styling **
************************************************/
table
{
width: 100%;
border-spacing: 0px;
border-collapse: collapse;
}
table th, table td
{
text-align: left;
padding: 7px 7px;
border-left: 1px solid #252525;
border-right: 1px solid #252525;
}
table th
{
background-color: black;
color: white;
font-size: 12px;
}
table td
{
border: 1px solid #A1A1A1;
}
table th.empty table td.empty
{ {
margin: 0px;
padding: 0px; padding: 0px;
list-style: none;
} }
section.statistics table td
{
font-size: 13px;
}
/************************************************
** Overview asides **
************************************************/
aside section.statistics ul, section.tickets ul
{ {
/*color: #ECFFBF;*/ margin: 0px;
padding: 0px;
list-style: none;
} }
section.tickets, section.tickets a aside section.tickets, section.tickets a
{ {
/*color: #FFFBD5;*/
font-size: 12px; font-size: 12px;
text-decoration: none; text-decoration: none;
} }
section.tickets strong aside section.tickets strong
{ {
font-size: 14px; font-size: 14px;
} }
section.tickets ul li aside section.tickets ul li
{ {
margin-top: -1px; margin-top: -1px;
margin-bottom: 0px; margin-bottom: 0px;
/*border-top: 1px solid #FFE8BF;
border-bottom: 1px solid #FFE8BF;*/
border-top: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF;
padding: 6px 0px; padding: 6px 0px;
} }
section.tickets ul li.more aside section.tickets ul li.more
{ {
text-align: right; text-align: right;
border: none; border: none;
} }
section.tickets ul li.more a aside section.tickets ul li.more a
{ {
padding: 3px 6px; padding: 3px 6px;
} }
section.tickets ul li.more a:hover aside section.tickets ul li.more a:hover
{ {
background-color: black; background-color: black;
} }
section.download a.download aside section.download a.download
{ {
margin-top: 10px; margin-top: 10px;
display: block; display: block;
@ -309,7 +281,7 @@ section.download a.download
} }
section.download a.download:hover aside section.download a.download:hover
{ {
color: white; color: white;
background-color: #0C0C0C; background-color: #0C0C0C;
@ -317,13 +289,13 @@ section.download a.download:hover
} }
section.download a.download strong aside section.download a.download strong
{ {
display: block; display: block;
font-size: 18px; font-size: 18px;
} }
section.download a.download b:before aside section.download a.download b:before
{ {
display: block; display: block;
float: left; float: left;
@ -336,12 +308,71 @@ section.download a.download b:before
text-align: center; text-align: center;
} }
section.download a.download b.stable:before aside section.download a.download b.stable:before
{ {
content: "\f019"; content: "\f019";
} }
section.download a.download b.experimental:before aside section.download a.download b.experimental:before
{ {
content: "\f0c3"; content: "\f0c3";
} }
/************************************************
** Tickets **
************************************************/
section.tickets tr.priority-low
{
color: #2B2B2B;
background-color: #EDEDED;
}
section.tickets tr.priority-low:hover
{
background-color: #E3E3E3;
}
section.tickets tr.priority-normal
{
color: black;
background-color: #E7F7F7;
}
section.tickets tr.priority-normal:hover
{
background-color: #DEEEEE;
}
section.tickets tr.priority-high
{
background-color: #F7D6D6;
}
section.tickets tr.priority-high:hover
{
background-color: #EECECE;
}
section.tickets tr.priority-high td.priority
{
color: red;
font-weight: bold;
}
section.tickets tr.status-closed
{
color: gray;
background-color: #D0D0D0;
}
section.tickets tr.status-closed:hover
{
background-color: #C7C7C7;
}
section.tickets tr.status-closed.priority-high td.priority
{
color: #656565;
}

@ -6,33 +6,33 @@
<th>Priority</th> <th>Priority</th>
<th>Status</th> <th>Status</th>
</tr> </tr>
<tr class="priority-high status-open"> <tr class="clickable priority-high status-open">
<td class="empty"></td> <td class="empty">#4</td>
<td class="title">This is a sample ticket about some kind of bug.</td> <td class="title"><a href="{%?project-url}/ticket/4">This is a sample ticket about some kind of bug.</a></td>
<td class="priority">High</td> <td class="priority">High</td>
<td class="status">Open</td> <td class="status">Open</td>
</tr> </tr>
<tr class="priority-normal status-open"> <tr class="clickable priority-normal status-open">
<td class="empty"></td> <td class="empty">#3</td>
<td class="title">Some kind of feature suggestion</td> <td class="title"><a href="{%?project-url}/ticket/3">Some kind of feature suggestion</a></td>
<td class="priority">Normal</td> <td class="priority">Normal</td>
<td class="status">Open</td> <td class="status">Open</td>
</tr> </tr>
<tr class="priority-low status-open"> <tr class="clickable priority-low status-open">
<td class="empty"></td> <td class="empty">#5</td>
<td class="title">Aaaaaabsolutely unimportant.</td> <td class="title"><a href="{%?project-url}/ticket/5">Aaaaaabsolutely unimportant.</a></td>
<td class="priority">Low</td> <td class="priority">Low</td>
<td class="status">Open</td> <td class="status">Open</td>
</tr> </tr>
<tr class="priority-high status-closed"> <tr class="clickable priority-high status-closed">
<td class="empty"></td> <td class="empty">#1</td>
<td class="title">This is an urgent ticket about something that has been resolved..</td> <td class="title"><a href="{%?project-url}/ticket/1">This is an urgent ticket about something that has been resolved..</a></td>
<td class="priority">High</td> <td class="priority">High</td>
<td class="status">Closed</td> <td class="status">Closed</td>
</tr> </tr>
<tr class="priority-normal status-closed"> <tr class="clickable priority-normal status-closed">
<td class="empty"></td> <td class="empty">#2</td>
<td class="title">This is a normal ticket about something that has been resolved..</td> <td class="title"><a href="{%?project-url}/ticket/2">This is a normal ticket about something that has been resolved..</a></td>
<td class="priority">Normal</td> <td class="priority">Normal</td>
<td class="status">Closed</td> <td class="status">Closed</td>
</tr> </tr>

Loading…
Cancel
Save