Add clickable styles and reorganize stylesheet

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

@ -1,9 +1,9 @@
@font-face {
font-family: "FontAwesome";
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');
font-weight: normal;
font-style: normal;
font-family: "FontAwesome";
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');
font-weight: normal;
font-style: normal;
}
body
@ -12,101 +12,32 @@ body
font-family: "Nobile", sans-serif;
}
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
{
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
.clear
{
background-color: #F7D6D6;
clear: both;
}
section.tickets tr.priority-high:hover
{
background-color: #EECECE;
}
section.tickets tr.priority-high td.priority
{
color: red;
font-weight: bold;
}
/************************************************
** Clickable rows **
************************************************/
section.tickets tr.status-closed
table tr.clickable
{
color: gray;
background-color: #D0D0D0;
cursor: pointer;
}
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
{
clear: both;
}
/************************************************
** Page layout **
************************************************/
.wrapper
{
@ -137,12 +68,18 @@ section.tickets tr.status-closed.priority-high td.priority
margin: 0px;
}
/*.header h2:before
.footer
{
font-weight: normal;
content: ";";
margin: 0px 16px;
}*/
border-top: 3px solid black;
margin-top: 12px;
padding-top: 6px;
font-size: 12px;
}
/************************************************
** Page menu **
************************************************/
.menu
{
@ -186,19 +123,11 @@ section.tickets tr.status-closed.priority-high td.priority
color: white;
}
.main
{
}
.footer
{
border-top: 3px solid black;
margin-top: 12px;
padding-top: 6px;
font-size: 12px;
}
/************************************************
** Sections **
************************************************/
section
{
padding: 12px 0px;
@ -219,6 +148,11 @@ p.lead
font-weight: bold;
}
/************************************************
** Asides **
************************************************/
aside
{
float: right;
@ -247,58 +181,96 @@ aside section h3
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;
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;
text-decoration: none;
}
section.tickets strong
aside section.tickets strong
{
font-size: 14px;
}
section.tickets ul li
aside section.tickets ul li
{
margin-top: -1px;
margin-bottom: 0px;
/*border-top: 1px solid #FFE8BF;
border-bottom: 1px solid #FFE8BF;*/
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding: 6px 0px;
}
section.tickets ul li.more
aside section.tickets ul li.more
{
text-align: right;
border: none;
}
section.tickets ul li.more a
aside section.tickets ul li.more a
{
padding: 3px 6px;
}
section.tickets ul li.more a:hover
aside section.tickets ul li.more a:hover
{
background-color: black;
}
section.download a.download
aside section.download a.download
{
margin-top: 10px;
display: block;
@ -309,7 +281,7 @@ section.download a.download
}
section.download a.download:hover
aside section.download a.download:hover
{
color: white;
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;
font-size: 18px;
}
section.download a.download b:before
aside section.download a.download b:before
{
display: block;
float: left;
@ -336,12 +308,71 @@ section.download a.download b:before
text-align: center;
}
section.download a.download b.stable:before
aside section.download a.download b.stable:before
{
content: "\f019";
}
section.download a.download b.experimental:before
aside section.download a.download b.experimental:before
{
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>Status</th>
</tr>
<tr class="priority-high status-open">
<td class="empty"></td>
<td class="title">This is a sample ticket about some kind of bug.</td>
<tr class="clickable priority-high status-open">
<td class="empty">#4</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="status">Open</td>
</tr>
<tr class="priority-normal status-open">
<td class="empty"></td>
<td class="title">Some kind of feature suggestion</td>
<tr class="clickable priority-normal status-open">
<td class="empty">#3</td>
<td class="title"><a href="{%?project-url}/ticket/3">Some kind of feature suggestion</a></td>
<td class="priority">Normal</td>
<td class="status">Open</td>
</tr>
<tr class="priority-low status-open">
<td class="empty"></td>
<td class="title">Aaaaaabsolutely unimportant.</td>
<tr class="clickable priority-low status-open">
<td class="empty">#5</td>
<td class="title"><a href="{%?project-url}/ticket/5">Aaaaaabsolutely unimportant.</a></td>
<td class="priority">Low</td>
<td class="status">Open</td>
</tr>
<tr class="priority-high status-closed">
<td class="empty"></td>
<td class="title">This is an urgent ticket about something that has been resolved..</td>
<tr class="clickable priority-high status-closed">
<td class="empty">#1</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="status">Closed</td>
</tr>
<tr class="priority-normal status-closed">
<td class="empty"></td>
<td class="title">This is a normal ticket about something that has been resolved..</td>
<tr class="clickable priority-normal status-closed">
<td class="empty">#2</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="status">Closed</td>
</tr>

Loading…
Cancel
Save