made changes to login, insrtuctions, etc.
This commit is contained in:
Karen
parent
a0903bfa86
commit
03ada135f4
|
|
@ -95,12 +95,12 @@ INSTALLED_APPS = [
|
|||
# tabbed navigation. when adding an app to INSTALLED_APPS, you may wish
|
||||
# to add it here, also, to expose it in the rapidsms ui.
|
||||
RAPIDSMS_TABS = [
|
||||
("rapidsms.contrib.messagelog.views.message_log", "Message Log"),
|
||||
("rapidsms.contrib.messagelog.views.message_log", "SMS Log"),
|
||||
# ("rapidsms.contrib.registration.views.registration", "Registration"),
|
||||
# ("rapidsms.contrib.messaging.views.messaging", "Messaging"),
|
||||
# ("rapidsms.contrib.locations.views.locations", "Map"),
|
||||
# ("rapidsms.contrib.scheduler.views.index", "Event Scheduler"),
|
||||
("rapidsms.contrib.httptester.views.generate_identity", "Message Tester"),
|
||||
("rapidsms.contrib.httptester.views.generate_identity", "SMS Tester"),
|
||||
]
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,316 +1,316 @@
|
|||
/* vim:set et ts=4 sw=4 */
|
||||
|
||||
body {
|
||||
background: #eee url("../images/body-bg.png");
|
||||
font: 9pt "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
|
||||
line-height: 1;
|
||||
color: #333;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #33a7d2;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline; }
|
||||
|
||||
abbr {
|
||||
cursor: help; }
|
||||
|
||||
p {
|
||||
line-height: 1.4; }
|
||||
|
||||
/* this is not okay. but it is, unfortunately, the least error-prone way
|
||||
* (that i know) of fixing broken floaty layouts in IE6 */
|
||||
div.clear-hack {
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#wrapper {
|
||||
width: 80em;
|
||||
background: #fff;
|
||||
margin: 0.5em auto 0 auto;
|
||||
|
||||
/* a little pretty for the 10/dec demo */
|
||||
-moz-box-shadow: 4px 4px 8px #aaa;
|
||||
box-shadow: 4px 4px 8px #aaa;
|
||||
-moz-border-radius-bottomright: 1em;
|
||||
-moz-border-radius-bottomleft: 1em;
|
||||
}
|
||||
|
||||
/* no scaling for ie6 */
|
||||
* html #wrapper {
|
||||
width: 960px; }
|
||||
|
||||
|
||||
|
||||
|
||||
/* the header is based roughly upon unicef.org, with rapidsms colors */
|
||||
#header {
|
||||
height:122px;
|
||||
width:960px;
|
||||
text-align:right;
|
||||
position: relative;
|
||||
color: #CCF;
|
||||
background: #94997e; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #94997e 0%, #d2dab3 10%, #d2dab3 80%, #94997e 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#94997e), color-stop(10%,#d2dab3), color-stop(80%,#d2dab3), color-stop(100%,#94997e)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #94997e 0%,#d2dab3 10%,#d2dab3 80%,#94997e 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #94997e 0%,#d2dab3 10%,#d2dab3 80%,#94997e 100%); /* Opera11.10+ */
|
||||
background: -ms-linear-gradient(top, #94997e 0%,#d2dab3 10%,#d2dab3 80%,#94997e 100%); /* IE10+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94997e', endColorstr='#94997e',GradientType=0 ); /* IE6-9 */
|
||||
background: linear-gradient(top, #94997e 0%,#d2dab3 10%,#d2dab3 80%,#94997e 100%); /* W3C */}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* hide the log in/out links in the top right. this doesn't need to
|
||||
* be especially discoverable; when the user tries to do something
|
||||
* requiring a login, they should be redirected automatically */
|
||||
#header #auth {
|
||||
font-size: 80%;
|
||||
position: absolute;
|
||||
line-height: 22px;
|
||||
margin: 0 10px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#header #auth a {
|
||||
color: #CE0000;
|
||||
padding-right:6px;
|
||||
font-size:80%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#branding {
|
||||
padding: 2px 10px;
|
||||
}
|
||||
|
||||
/* align in the middle of the unicef blue stripe of header bg, and
|
||||
* display logo on the right. TODO: extract the unicef branding */
|
||||
#branding h1 {
|
||||
background: url(../images/bessms_header07d.png) no-repeat;
|
||||
height: 108px;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
width:960px;
|
||||
position:absolute;
|
||||
top:6px;
|
||||
left:0px;
|
||||
}
|
||||
|
||||
* html #branding h1 {
|
||||
width: 940px; }
|
||||
|
||||
#branding h1 a {
|
||||
height: 65px;
|
||||
width: 245px;
|
||||
display: block;
|
||||
/*background: url("../images/rapidsms-logo.png") no-repeat 0 50%;*/
|
||||
|
||||
/* float the RapidSMS logo, in case any app would like to
|
||||
* append anything to the light blue (empty) stripe */
|
||||
float: left;
|
||||
}
|
||||
|
||||
#branding h1 a span {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
#tabs,
|
||||
#page-tabs {
|
||||
position: absolute;
|
||||
height: 28px;
|
||||
bottom: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* global tabs sit on the right, page-specific tabs sit on the left.
|
||||
* to draw more attention. TODO: maybe re-think this */
|
||||
#tabs { right: 0; }
|
||||
#page-tabs { left: 0; }
|
||||
|
||||
#tabs li,
|
||||
#page-tabs li {
|
||||
display: block;
|
||||
float: left;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
/* 5px spacing between each tab, to match the top gap, since
|
||||
* we're using pixel-positioned backgrounds there */
|
||||
#tabs li { margin-right: 5px; }
|
||||
#page-tabs li { margin-left: 5px; }
|
||||
|
||||
#tabs li a,
|
||||
#page-tabs li a {
|
||||
color: white;
|
||||
display: block;
|
||||
padding: 0 1em;
|
||||
border-right: 1px solid #FE0000;
|
||||
border-left: 1px solid #FE0000;
|
||||
outline: none;
|
||||
background-color:#CE0000; }
|
||||
|
||||
/* there are unread messages in this tab! TODO: is this just
|
||||
* for the training app? if so, move it there! */
|
||||
#tabs li.unread a span {
|
||||
display: block;
|
||||
padding-right: 21px;
|
||||
background: url("../icons/silk/email_open.png") no-repeat 100% 50%;
|
||||
}
|
||||
|
||||
/* always highlight the active (in the navigation sense, not
|
||||
* the css :active sense) tab, even when it's being hovered
|
||||
* or focused, since clicking it again is mostly useless */
|
||||
#tabs li.active a, #page-tabs li.active a,
|
||||
#tabs li.active a:hover, #page-tabs li.active a:hover,
|
||||
#tabs li.active a:focus, #page-tabs li.active a:focus {
|
||||
|
||||
background: #fff url("../images/tab-bg-active.png") repeat-x;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
color: #000;
|
||||
|
||||
/* the same color as the strip in header-bg.png */
|
||||
border: 1px solid #cef1f5;
|
||||
border-bottom: 0;
|
||||
|
||||
/* nudge the active tab north by one pixel, to line it
|
||||
* up with the tops of the other tabs */
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
/* brighten up inactive tabs when hovering or tab-focusing
|
||||
* with the keyboard (we removed the outline, above) */
|
||||
#tabs li a:hover, #page-tabs li a:hover,
|
||||
#tabs li a:focus, #page-tabs li a:focus {
|
||||
/*background-image: url("../images/tab-bg-hover.png");*/
|
||||
text-shadow: #FB8C07 1px 1px 2px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#breadcrumbs {
|
||||
color: #ccc;
|
||||
font-size: 2em;
|
||||
line-height: 1;
|
||||
padding: 0.5em;
|
||||
text-shadow: #eee 2px 2px 2px;
|
||||
border-bottom: 1px dotted #eee;
|
||||
}
|
||||
|
||||
#breadcrumbs a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.module a
|
||||
{color:#CE0000;}
|
||||
|
||||
#inner {
|
||||
padding: 1em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* some parts of the page title are dynamic (or otherwise really
|
||||
* important), like search terms. highlight them! */
|
||||
#inner h1 span.highlight {
|
||||
background: #ffa;
|
||||
-moz-border-radius: 5px;
|
||||
border: 2px solid #ff0;
|
||||
padding: 0 4px;
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
/* when an app has something really important to say, it can use the
|
||||
* apps/webui/templates/message.html template to display a huge blob
|
||||
* of text. this should probably be replaced with flash messages */
|
||||
#inner div.message {
|
||||
text-align: center;
|
||||
padding: 4em 25%;
|
||||
}
|
||||
|
||||
#inner div.message p {
|
||||
margin: 0 0 0.5em 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* some apps (erm, just the querylog, actually) add big triggers to the
|
||||
* bottom of the page to show or perform some action. */
|
||||
div.trigger {
|
||||
font-size: 80%;
|
||||
text-align: center;
|
||||
padding: 0.625em;
|
||||
background: #f8f8f8;
|
||||
cursor: pointer;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
div.trigger.warn {
|
||||
background: #fdd;
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#footer {
|
||||
border-top: 1px dotted #eee;
|
||||
padding: 0.5em;
|
||||
clear: both;
|
||||
color: #ccc;
|
||||
|
||||
/* reserve space for at two lines of links @ LH=1.4 (for the
|
||||
* copyright and licensing/download info) */
|
||||
min-height: 2.8em;
|
||||
}
|
||||
|
||||
/* bump the footer links down a line, to align them with the second
|
||||
* line of legal junk on the right. reduce the opacity until hover,
|
||||
* to keep them out of view until they're needed. */
|
||||
#footer .footer-region {
|
||||
margin-top: 1.4em;
|
||||
line-height: 1.4;
|
||||
opacity: 0.25;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#footer .footer-region:hover {
|
||||
opacity: 1; }
|
||||
|
||||
#footer .footer-region a { margin-right: 0.5em; }
|
||||
#footer .footer-region a:last-child { margin-right: 0; }
|
||||
|
||||
|
||||
#footer a
|
||||
{color:#CE0000;}
|
||||
|
||||
#footer p.rights {
|
||||
text-align: right;
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
/* vim:set et ts=4 sw=4 */
|
||||
|
||||
body {
|
||||
background: #eee url("../images/body-bg.png");
|
||||
font: 9pt "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
|
||||
line-height: 1;
|
||||
color: #333;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #33a7d2;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline; }
|
||||
|
||||
abbr {
|
||||
cursor: help; }
|
||||
|
||||
p {
|
||||
line-height: 1.4; }
|
||||
|
||||
/* this is not okay. but it is, unfortunately, the least error-prone way
|
||||
* (that i know) of fixing broken floaty layouts in IE6 */
|
||||
div.clear-hack {
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#wrapper {
|
||||
width: 80em;
|
||||
background: #fff;
|
||||
margin: 0.5em auto 0 auto;
|
||||
|
||||
/* a little pretty for the 10/dec demo */
|
||||
-moz-box-shadow: 4px 4px 8px #aaa;
|
||||
box-shadow: 4px 4px 8px #aaa;
|
||||
-moz-border-radius-bottomright: 1em;
|
||||
-moz-border-radius-bottomleft: 1em;
|
||||
}
|
||||
|
||||
/* no scaling for ie6 */
|
||||
* html #wrapper {
|
||||
width: 960px; }
|
||||
|
||||
|
||||
|
||||
|
||||
/* the header is based roughly upon unicef.org, with rapidsms colors */
|
||||
#header {
|
||||
height:122px;
|
||||
width:960px;
|
||||
text-align:right;
|
||||
position: relative;
|
||||
color: #CCF;
|
||||
background: #94997e; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #94997e 0%, #d2dab3 10%, #d2dab3 80%, #94997e 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#94997e), color-stop(10%,#d2dab3), color-stop(80%,#d2dab3), color-stop(100%,#94997e)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #94997e 0%,#d2dab3 10%,#d2dab3 80%,#94997e 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #94997e 0%,#d2dab3 10%,#d2dab3 80%,#94997e 100%); /* Opera11.10+ */
|
||||
background: -ms-linear-gradient(top, #94997e 0%,#d2dab3 10%,#d2dab3 80%,#94997e 100%); /* IE10+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94997e', endColorstr='#94997e',GradientType=0 ); /* IE6-9 */
|
||||
background: linear-gradient(top, #94997e 0%,#d2dab3 10%,#d2dab3 80%,#94997e 100%); /* W3C */}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* hide the log in/out links in the top right. this doesn't need to
|
||||
* be especially discoverable; when the user tries to do something
|
||||
* requiring a login, they should be redirected automatically */
|
||||
#header #auth {
|
||||
font-size: 80%;
|
||||
position: absolute;
|
||||
line-height: 22px;
|
||||
margin: 0 10px;
|
||||
right: 0;
|
||||
top: 0;;}
|
||||
|
||||
#header #auth a {
|
||||
color: #000;
|
||||
padding-right:6px;
|
||||
font-size:80%;
|
||||
position:relative;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
|
||||
#branding {
|
||||
padding: 2px 10px;
|
||||
}
|
||||
|
||||
/* align in the middle of the unicef blue stripe of header bg, and
|
||||
* display logo on the right. TODO: extract the unicef branding */
|
||||
#branding h1 {
|
||||
background: url(../images/bessms_header07d.png) no-repeat;
|
||||
height: 108px;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
width:960px;
|
||||
position:absolute;
|
||||
top:6px;
|
||||
left:0px;
|
||||
}
|
||||
|
||||
* html #branding h1 {
|
||||
width: 940px; }
|
||||
|
||||
#branding h1 a {
|
||||
height: 65px;
|
||||
width: 245px;
|
||||
display: block;
|
||||
/*background: url("../images/rapidsms-logo.png") no-repeat 0 50%;*/
|
||||
|
||||
/* float the RapidSMS logo, in case any app would like to
|
||||
* append anything to the light blue (empty) stripe */
|
||||
float: left;
|
||||
}
|
||||
|
||||
#branding h1 a span {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
#tabs,
|
||||
#page-tabs {
|
||||
position: absolute;
|
||||
height: 28px;
|
||||
bottom: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* global tabs sit on the right, page-specific tabs sit on the left.
|
||||
* to draw more attention. TODO: maybe re-think this */
|
||||
#tabs { right: 0; }
|
||||
#page-tabs { left: 0; }
|
||||
|
||||
#tabs li,
|
||||
#page-tabs li {
|
||||
display: block;
|
||||
float: left;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
/* 5px spacing between each tab, to match the top gap, since
|
||||
* we're using pixel-positioned backgrounds there */
|
||||
#tabs li { margin-right: 5px; }
|
||||
#page-tabs li { margin-left: 5px; }
|
||||
|
||||
#tabs li a,
|
||||
#page-tabs li a {
|
||||
color: white;
|
||||
display: block;
|
||||
padding: 0 1em;
|
||||
border-right: 1px solid #FE0000;
|
||||
border-left: 1px solid #FE0000;
|
||||
outline: none;
|
||||
background-color:#CE0000; }
|
||||
|
||||
/* there are unread messages in this tab! TODO: is this just
|
||||
* for the training app? if so, move it there! */
|
||||
#tabs li.unread a span {
|
||||
display: block;
|
||||
padding-right: 21px;
|
||||
background: url("../icons/silk/email_open.png") no-repeat 100% 50%;
|
||||
}
|
||||
|
||||
/* always highlight the active (in the navigation sense, not
|
||||
* the css :active sense) tab, even when it's being hovered
|
||||
* or focused, since clicking it again is mostly useless */
|
||||
#tabs li.active a, #page-tabs li.active a,
|
||||
#tabs li.active a:hover, #page-tabs li.active a:hover,
|
||||
#tabs li.active a:focus, #page-tabs li.active a:focus {
|
||||
|
||||
background: #fff url("../images/tab-bg-active.png") repeat-x;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
color: #000;
|
||||
|
||||
/* the same color as the strip in header-bg.png */
|
||||
border: 1px solid #cef1f5;
|
||||
border-bottom: 0;
|
||||
|
||||
/* nudge the active tab north by one pixel, to line it
|
||||
* up with the tops of the other tabs */
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
/* brighten up inactive tabs when hovering or tab-focusing
|
||||
* with the keyboard (we removed the outline, above) */
|
||||
#tabs li a:hover, #page-tabs li a:hover,
|
||||
#tabs li a:focus, #page-tabs li a:focus {
|
||||
/*background-image: url("../images/tab-bg-hover.png");*/
|
||||
text-shadow: #FB8C07 1px 1px 2px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#breadcrumbs {
|
||||
color: #ccc;
|
||||
font-size: 2em;
|
||||
line-height: 1;
|
||||
padding: 0.5em;
|
||||
text-shadow: #eee 2px 2px 2px;
|
||||
border-bottom: 1px dotted #eee;
|
||||
}
|
||||
|
||||
#breadcrumbs a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.module a
|
||||
{color:#CE0000;}
|
||||
|
||||
#inner {
|
||||
padding: 1em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* some parts of the page title are dynamic (or otherwise really
|
||||
* important), like search terms. highlight them! */
|
||||
#inner h1 span.highlight {
|
||||
background: #ffa;
|
||||
-moz-border-radius: 5px;
|
||||
border: 2px solid #ff0;
|
||||
padding: 0 4px;
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
/* when an app has something really important to say, it can use the
|
||||
* apps/webui/templates/message.html template to display a huge blob
|
||||
* of text. this should probably be replaced with flash messages */
|
||||
#inner div.message {
|
||||
text-align: center;
|
||||
padding: 4em 25%;
|
||||
}
|
||||
|
||||
#inner div.message p {
|
||||
margin: 0 0 0.5em 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* some apps (erm, just the querylog, actually) add big triggers to the
|
||||
* bottom of the page to show or perform some action. */
|
||||
div.trigger {
|
||||
font-size: 80%;
|
||||
text-align: center;
|
||||
padding: 0.625em;
|
||||
background: #f8f8f8;
|
||||
cursor: pointer;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
div.trigger.warn {
|
||||
background: #fdd;
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#footer {
|
||||
border-top: 1px dotted #eee;
|
||||
padding: 0.5em;
|
||||
clear: both;
|
||||
color: #ccc;
|
||||
|
||||
/* reserve space for at two lines of links @ LH=1.4 (for the
|
||||
* copyright and licensing/download info) */
|
||||
min-height: 2.8em;
|
||||
}
|
||||
|
||||
/* bump the footer links down a line, to align them with the second
|
||||
* line of legal junk on the right. reduce the opacity until hover,
|
||||
* to keep them out of view until they're needed. */
|
||||
#footer .footer-region {
|
||||
margin-top: 1.4em;
|
||||
line-height: 1.4;
|
||||
opacity: 0.25;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#footer .footer-region:hover {
|
||||
opacity: 1; }
|
||||
|
||||
#footer .footer-region a { margin-right: 0.5em; }
|
||||
#footer .footer-region a:last-child { margin-right: 0; }
|
||||
|
||||
|
||||
#footer a
|
||||
{color:#CE0000;}
|
||||
|
||||
#footer p.rights {
|
||||
text-align: right;
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,132 +1,137 @@
|
|||
/* vim:set et ts=4 sw=4 */
|
||||
|
||||
div.module {
|
||||
margin-top: 2em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.module div.module {
|
||||
border: 1px solid #8fbcc9; }
|
||||
|
||||
div.module:first-child {
|
||||
margin-top: 0; }
|
||||
|
||||
|
||||
|
||||
|
||||
div.module.collapsed {
|
||||
overflow-y: hidden;
|
||||
height: 2.6em;
|
||||
}
|
||||
|
||||
div.module.collapsed h2 {
|
||||
background-image: url("../images/h2-bg-collapsed.png"); }
|
||||
|
||||
div.module.collapsed + div.module {
|
||||
margin-top: 1px; }
|
||||
|
||||
div.module.collapsed h2 span.toggler,
|
||||
div.module.expanded h2 span.toggler {
|
||||
background: no-repeat 50% 50%;
|
||||
text-indent: -9999px;
|
||||
cursor: pointer;
|
||||
width: 16px;
|
||||
height: 2.6em;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
padding: 0 0.5em;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
div.module.collapsed h2 span.toggler { background-image: url("../icons/silk/section_collapsed--bright.png"); }
|
||||
div.module.expanded h2 span.toggler { background-image: url("../icons/silk/section_expanded--bright.png"); }
|
||||
|
||||
|
||||
|
||||
|
||||
/* module headers are mostly ripped off from django admin, although
|
||||
* here, we never use <caption>, to keep things simple. (they have
|
||||
* surprisingly confusing layout rules.) */
|
||||
div.module h2,
|
||||
div.module h3 {
|
||||
margin: 0;
|
||||
background-repeat: repeat-x;
|
||||
background-position: 0 100%;
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
div.module h2 {
|
||||
background-color: #000;
|
||||
background-image: url("../images/h2-bg.png");
|
||||
text-shadow: #000 2px 2px 1px;
|
||||
padding: 0.3125em;
|
||||
font-size: 160%;
|
||||
}
|
||||
|
||||
/* less important info can be wrapped in a span to dull it */
|
||||
div.module h2 span {
|
||||
text-shadow: none;
|
||||
font-size: 62.5%;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* subheaders are almost the same. to dull things, i just made the
|
||||
* h2-bg image 80% opaque and re-saved it. STILL TODO: ask meghana
|
||||
* to make this pretty */
|
||||
div.module h3 {
|
||||
background-image: url("../images/h3-bg.png");
|
||||
background-color: #333;
|
||||
padding: 0.5em;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* modules can (optionally) include help text, to explain how they can
|
||||
* be used. this is hidden by module-help.js, if it's available, but
|
||||
* shouldn't be too verbose, in case it isn't */
|
||||
div.module div.help,
|
||||
div.module form.search {
|
||||
border-right: 0.5em solid #ffb;
|
||||
border-left: 0.5em solid #ffb;
|
||||
background: #ffc;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
div.module div.help p {
|
||||
margin: 0; }
|
||||
|
||||
|
||||
/* modules can optionally contain a small "toolbar", which hangs in the
|
||||
* top right, overlapping the <h2>, if there is one */
|
||||
div.module div.toolbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
line-height: 2.6em;
|
||||
}
|
||||
|
||||
div.module div.toolbar a,
|
||||
div.module div.toolbar span {
|
||||
display: block;
|
||||
float: right;
|
||||
color: #eee;
|
||||
margin-right: 0.625em;
|
||||
padding-left: 21px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 50%;
|
||||
font-size: 80%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* various common toolbar icons. should be from the famfamfam
|
||||
* silk set, to fit in with the rest of RapidSMS. this will
|
||||
* probably grow (and be abstracted) as apps do more things */
|
||||
div.module div.toolbar .add { background-image: url("../icons/silk/add.png"); }
|
||||
div.module div.toolbar .help { background-image: url("../icons/silk/help.png"); }
|
||||
div.module div.toolbar .search { background-image: url("../icons/silk/magnifier.png"); }
|
||||
/* vim:set et ts=4 sw=4 */
|
||||
|
||||
|
||||
#instruction h2/*THE CSS FOR THE INSTRUCTIONS FROM WIKI*/
|
||||
{font-weight:bold;}
|
||||
|
||||
div.module {
|
||||
margin-top: 2em;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
div.module div.module {
|
||||
border: 1px solid #8fbcc9; }
|
||||
|
||||
div.module:first-child {
|
||||
margin-top: 0; }
|
||||
|
||||
|
||||
|
||||
|
||||
div.module.collapsed {
|
||||
overflow-y: hidden;
|
||||
height: 2.6em;
|
||||
}
|
||||
|
||||
div.module.collapsed h2 {
|
||||
background-image: url("../images/h2-bg-collapsed.png"); }
|
||||
|
||||
div.module.collapsed + div.module {
|
||||
margin-top: 1px; }
|
||||
|
||||
div.module.collapsed h2 span.toggler,
|
||||
div.module.expanded h2 span.toggler {
|
||||
background: no-repeat 50% 50%;
|
||||
text-indent: -9999px;
|
||||
cursor: pointer;
|
||||
width: 16px;
|
||||
height: 2.6em;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
padding: 0 0.5em;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
div.module.collapsed h2 span.toggler { background-image: url("../icons/silk/section_collapsed--bright.png"); }
|
||||
div.module.expanded h2 span.toggler { background-image: url("../icons/silk/section_expanded--bright.png"); }
|
||||
|
||||
|
||||
|
||||
|
||||
/* module headers are mostly ripped off from django admin, although
|
||||
* here, we never use <caption>, to keep things simple. (they have
|
||||
* surprisingly confusing layout rules.) */
|
||||
div.module h2,
|
||||
div.module h3 {
|
||||
margin: 0;
|
||||
background-repeat: repeat-x;
|
||||
background-position: 0 100%;
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
div.module h2 {
|
||||
background-color: #000;
|
||||
background-image: url("../images/h2-bg.png");
|
||||
text-shadow: #000 2px 2px 1px;
|
||||
padding: 0.3125em;
|
||||
font-size: 160%;
|
||||
}
|
||||
|
||||
/* less important info can be wrapped in a span to dull it */
|
||||
div.module h2 span {
|
||||
text-shadow: none;
|
||||
font-size: 62.5%;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* subheaders are almost the same. to dull things, i just made the
|
||||
* h2-bg image 80% opaque and re-saved it. STILL TODO: ask meghana
|
||||
* to make this pretty */
|
||||
div.module h3 {
|
||||
background-image: url("../images/h3-bg.png");
|
||||
background-color: #333;
|
||||
padding: 0.5em;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* modules can (optionally) include help text, to explain how they can
|
||||
* be used. this is hidden by module-help.js, if it's available, but
|
||||
* shouldn't be too verbose, in case it isn't */
|
||||
div.module div.help,
|
||||
div.module form.search {
|
||||
border-right: 0.5em solid #ffb;
|
||||
border-left: 0.5em solid #ffb;
|
||||
background: #ffc;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
div.module div.help p {
|
||||
margin: 0; }
|
||||
|
||||
|
||||
/* modules can optionally contain a small "toolbar", which hangs in the
|
||||
* top right, overlapping the <h2>, if there is one */
|
||||
div.module div.toolbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
line-height: 2.6em;
|
||||
}
|
||||
|
||||
div.module div.toolbar a,
|
||||
div.module div.toolbar span {
|
||||
display: block;
|
||||
float: right;
|
||||
color: #eee;
|
||||
margin-right: 0.625em;
|
||||
padding-left: 21px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 50%;
|
||||
font-size: 80%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* various common toolbar icons. should be from the famfamfam
|
||||
* silk set, to fit in with the rest of RapidSMS. this will
|
||||
* probably grow (and be abstracted) as apps do more things */
|
||||
div.module div.toolbar .add { background-image: url("../icons/silk/add.png"); }
|
||||
div.module div.toolbar .help { background-image: url("../icons/silk/help.png"); }
|
||||
div.module div.toolbar .search { background-image: url("../icons/silk/magnifier.png"); }
|
||||
|
|
|
|||
|
|
@ -1,51 +1,52 @@
|
|||
/* vim:set et ts=4 sw=4 */
|
||||
|
||||
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6 {
|
||||
margin-left: 1em;
|
||||
min-height: 1px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
.two-columns { padding-left: 1em; }
|
||||
.two-columns .col-1 { margin-left: -1em; }
|
||||
|
||||
.two-columns .col-1
|
||||
{
|
||||
width: 34%; }
|
||||
|
||||
.two-columns .col-2
|
||||
{
|
||||
width: 66%; }
|
||||
|
||||
.three-columns { padding-left: 2em; }
|
||||
.three-columns .col-1 { margin-left: -2em; }
|
||||
|
||||
.three-columns .col-2 {
|
||||
width: 34%; }
|
||||
|
||||
.three-columns .col-1,
|
||||
.three-columns .col-3 {
|
||||
width: 33%; }
|
||||
|
||||
|
||||
.four-columns { padding-left: 3em; }
|
||||
.four-columns .col-1 { margin-left: -3em; }
|
||||
|
||||
.four-columns .col-1,
|
||||
.four-columns .col-2,
|
||||
.four-columns .col-3,
|
||||
.four-columns .col-4 {
|
||||
width: 25%; }
|
||||
|
||||
|
||||
.five-columns { padding-left: 4em; }
|
||||
.five-columns .col-1 { margin-left: -4em; }
|
||||
|
||||
.five-columns .col-1,
|
||||
.five-columns .col-2,
|
||||
.five-columns .col-3,
|
||||
.five-columns .col-4,
|
||||
.five-columns .col-5 {
|
||||
width: 20%; }
|
||||
/* vim:set et ts=4 sw=4 */
|
||||
|
||||
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6 {
|
||||
margin-left: 1em;
|
||||
min-height: 1px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
.two-columns { padding-left: 1em; }
|
||||
.two-columns .col-1 { margin-left: -1em; }
|
||||
|
||||
.two-columns .col-1
|
||||
{
|
||||
width: 34%; }
|
||||
|
||||
.two-columns .col-2
|
||||
{
|
||||
width: 66%;
|
||||
overflow:auto; }
|
||||
|
||||
.three-columns { padding-left: 2em; }
|
||||
.three-columns .col-1 { margin-left: -2em; }
|
||||
|
||||
.three-columns .col-2 {
|
||||
width: 34%; }
|
||||
|
||||
.three-columns .col-1,
|
||||
.three-columns .col-3 {
|
||||
width: 33%; }
|
||||
|
||||
|
||||
.four-columns { padding-left: 3em; }
|
||||
.four-columns .col-1 { margin-left: -3em; }
|
||||
|
||||
.four-columns .col-1,
|
||||
.four-columns .col-2,
|
||||
.four-columns .col-3,
|
||||
.four-columns .col-4 {
|
||||
width: 25%; }
|
||||
|
||||
|
||||
.five-columns { padding-left: 4em; }
|
||||
.five-columns .col-1 { margin-left: -4em; }
|
||||
|
||||
.five-columns .col-1,
|
||||
.five-columns .col-2,
|
||||
.five-columns .col-3,
|
||||
.five-columns .col-4,
|
||||
.five-columns .col-5 {
|
||||
width: 20%; }
|
||||
|
|
|
|||
|
|
@ -1,237 +1,237 @@
|
|||
/* vim:set et ts=4 sw=4 */
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width:100%;}
|
||||
|
||||
col { }
|
||||
|
||||
/* highlight sorted columns just a little tiny bit. some people
|
||||
* won't be able to see it, but the header should contain some
|
||||
* kind of indication, too. darker colors interfere with the
|
||||
* grid lines, which are also very light. */
|
||||
col.sorted {
|
||||
background: #fcfcff; }
|
||||
|
||||
tr{ }
|
||||
|
||||
td, th {
|
||||
padding: 0.5em;
|
||||
border: 1px solid #ddd;
|
||||
|
||||
/* reset the "look" of headers to match regular cells,
|
||||
* since they can appear anywhere (col or row scope) */
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* if this table is directly following a header, we don't
|
||||
* need a border top. it'd probably get lost, anyway */
|
||||
h2 + table thead th {
|
||||
border-top: none; }
|
||||
|
||||
thead th {
|
||||
background: #e1e1e1 url(../images/table-header-bg.png) repeat-x 100% 0;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
thead th a,
|
||||
thead th span.unsortable {
|
||||
color: #888;
|
||||
outline: 0;
|
||||
border-left: 1px solid #f8f8f8;
|
||||
|
||||
/* the padding/margin magic overlaps the padding
|
||||
* of the th, to make it all clickable */
|
||||
padding: 0.5em;
|
||||
margin: -0.5em;
|
||||
|
||||
/* if a sort marker is within this link, it'll
|
||||
* need to position absolutely within */
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* highlight it when the th is hovered, a bit
|
||||
* like (most) native controls. this is crappy,
|
||||
* since the background image is sitting on top
|
||||
* of the th bg, not replacing it */
|
||||
thead th a:hover {
|
||||
background-image: url(../images/table-header-bg-highlight.png);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
thead th.sorted a {
|
||||
padding-right: 26px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* unfortunately, an extra element (a span) is
|
||||
* needed to display the sort marker. all of the
|
||||
* other backgrounds are already busy. snap it
|
||||
* to the right/middle of the th */
|
||||
thead th.sorted a span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-top: -8px;
|
||||
overflow: hidden;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
|
||||
thead th.asc a span { background-image: url("../icons/silk/sort_ascending.png"); }
|
||||
thead th.desc a span { background-image: url("../icons/silk/sort_descending.png"); }
|
||||
|
||||
/* make the grid lighter within the tbody, since it's
|
||||
* only a visual hint to distinguish the rows + cols */
|
||||
tbody th, tbody td {
|
||||
border-color: #f8f8f8; }
|
||||
|
||||
/* stripe the rows
|
||||
tbody tr:nth-child(odd) {
|
||||
background: #f8f8f8; }*/
|
||||
|
||||
/* restore the dark outer borders of the tbody */
|
||||
tbody tr:first-child th, tbody tr:first-child td { border-top-color: #ddd; }
|
||||
tbody th:last-child, tbody td:last-child { border-right-color: #ddd; }
|
||||
tbody tr:last-child th, tbody tr:last-child td { border-bottom-color: #ddd; }
|
||||
tbody th:first-child, tbody td:first-child { border-left-color: #ddd; }
|
||||
|
||||
/* some cells have nothing important to say, (like "none" or
|
||||
* "never"), but are required none the less. make them dull,
|
||||
* to highlight the rows which contain real data */
|
||||
td.na, th.na, td span.na, th span.na {
|
||||
font-style: italic;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* when a row is "active" (eg. it is being viewed, edited, etc), it
|
||||
* is dimly highlighted. the bgcolor is 10% of #33a7d2 (links)
|
||||
* applied to the cells (not the row), to mask the stripes */
|
||||
tr.active td, tr.active th {
|
||||
background: #ebf6fa url(../images/table-row-bg-active.png) repeat-x 100% 0; }
|
||||
|
||||
tr.no-data { }
|
||||
|
||||
tr.no-data td {
|
||||
text-align: center;
|
||||
background: #f8f8ff no-repeat 50% 50%;
|
||||
padding: 2em;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* since no-data rows usually only have a single <td>, the
|
||||
* last-child rule above breaks their huge padding. this is
|
||||
* a hack to restore it. */
|
||||
body:last-child tr.no-data td:last-child {
|
||||
padding-right: 2em; }
|
||||
|
||||
tr.no-data td a.add {
|
||||
display: block;
|
||||
padding-top: 0.625em;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/* since there is no data, it might be useful to point the
|
||||
* user in the right direction. these arrows are very light,
|
||||
* and displayed behind the "You haven't..." text. */
|
||||
tr.no-data.look-up td { background-image: url("../images/big-arrows/up.png"); }
|
||||
tr.no-data.look-right td { background-image: url("../images/big-arrows/right.png"); }
|
||||
tr.no-data.look-down td { background-image: url("../images/big-arrows/down.png"); }
|
||||
tr.no-data.look-left td { background-image: url("../images/big-arrows/left.png"); }
|
||||
|
||||
/* if there is no data because an error occurred, make the
|
||||
* table obviously busted by highlighting it in red. */
|
||||
tr.no-data.error td {
|
||||
color: #f66;
|
||||
background-color: #fff8f8;
|
||||
background-image: url("../images/big-arrows/error.png");
|
||||
}
|
||||
|
||||
tr.depth-1 td.indent { padding-left: 2em; }
|
||||
tr.depth-2 td.indent { padding-left: 4em; }
|
||||
tr.depth-3 td.indent { padding-left: 6em; }
|
||||
tr.depth-4 td.indent { padding-left: 8em; }
|
||||
tr.depth-5 td.indent { padding-left: 10em; }
|
||||
tr.depth-6 td.indent { padding-left: 12em; }
|
||||
tr.depth-7 td.indent { padding-left: 14em; }
|
||||
tr.depth-8 td.indent { padding-left: 16em; }
|
||||
|
||||
tfoot {
|
||||
background: #f8f8f8 url("../images/table-footer-bg.png") repeat-x 0 0;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/* no padding in the footer cell; the links will float and pad
|
||||
* themselves, so the clickable blocks are easier to hit */
|
||||
tfoot td {
|
||||
padding: 0; }
|
||||
|
||||
/* footer links are dull, because they're less important
|
||||
* than the data. TODO: is this totally stupid? (i don't
|
||||
* really care, it's pretty) */
|
||||
tfoot a,
|
||||
tfoot span {
|
||||
display: block;
|
||||
float: right;
|
||||
padding: 0.625em;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* footer links can be broken up with spans, which look
|
||||
* the same, except super dull (for things like disabled
|
||||
* pagination links */
|
||||
tfoot span {
|
||||
color: #ddd; }
|
||||
|
||||
/* highlight hover links brighter than usual, since
|
||||
* they're harder to spot */
|
||||
tfoot a:hover {
|
||||
background: #fff; }
|
||||
|
||||
/* move all paginator links to the left, to separate from
|
||||
* additional views and export, which lives on the right */
|
||||
tfoot .paginator,
|
||||
tfoot .paginator a,
|
||||
tfoot .paginator span {
|
||||
float: left; }
|
||||
|
||||
tfoot .paginator a.active {
|
||||
background: #ddd;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
tfoot .paginator .first,
|
||||
tfoot .paginator .prev,
|
||||
tfoot .paginator .next,
|
||||
tfoot .paginator .last {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 50%;
|
||||
text-indent: -9999px;
|
||||
overflow: hidden;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
/* links look something like:
|
||||
* << < 1 2 3 4 > >> */
|
||||
tfoot .paginator .first { background-image: url("../icons/silk/resultset_first.png"); }
|
||||
tfoot .paginator .prev { background-image: url("../icons/silk/resultset_previous.png"); }
|
||||
tfoot .paginator .next { background-image: url("../icons/silk/resultset_next.png"); }
|
||||
tfoot .paginator .last { background-image: url("../icons/silk/resultset_last.png"); }
|
||||
|
||||
/* when a link is disabled, move the background image
|
||||
* over to reveal the transparent sprite to the left */
|
||||
tfoot .paginator span.na {
|
||||
background-position: -16px 50%; }
|
||||
|
||||
/* the ... to indicate that page links have been hidden
|
||||
* (because there were too many) should be quite dull */
|
||||
tfoot .paginator span.elipsis {
|
||||
letter-spacing: 1px;
|
||||
color: #888;
|
||||
}
|
||||
/* vim:set et ts=4 sw=4 */
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width:100%;}
|
||||
|
||||
col { }
|
||||
|
||||
/* highlight sorted columns just a little tiny bit. some people
|
||||
* won't be able to see it, but the header should contain some
|
||||
* kind of indication, too. darker colors interfere with the
|
||||
* grid lines, which are also very light. */
|
||||
col.sorted {
|
||||
background: #fcfcff; }
|
||||
|
||||
tr{ }
|
||||
|
||||
td, th {
|
||||
padding: 0.5em;
|
||||
border: 1px solid #ddd;
|
||||
|
||||
/* reset the "look" of headers to match regular cells,
|
||||
* since they can appear anywhere (col or row scope) */
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* if this table is directly following a header, we don't
|
||||
* need a border top. it'd probably get lost, anyway */
|
||||
h2 + table thead th {
|
||||
border-top: none; }
|
||||
|
||||
thead th {
|
||||
background: #e1e1e1 url(../images/table-header-bg.png) repeat-x 100% 0;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
thead th a,
|
||||
thead th span.unsortable {
|
||||
color: #888;
|
||||
outline: 0;
|
||||
border-left: 1px solid #f8f8f8;
|
||||
|
||||
/* the padding/margin magic overlaps the padding
|
||||
* of the th, to make it all clickable */
|
||||
padding: 0.5em;
|
||||
margin: -0.5em;
|
||||
|
||||
/* if a sort marker is within this link, it'll
|
||||
* need to position absolutely within */
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* highlight it when the th is hovered, a bit
|
||||
* like (most) native controls. this is crappy,
|
||||
* since the background image is sitting on top
|
||||
* of the th bg, not replacing it */
|
||||
thead th a:hover {
|
||||
background-image: url(../images/table-header-bg-highlight.png);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
thead th.sorted a {
|
||||
padding-right: 26px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* unfortunately, an extra element (a span) is
|
||||
* needed to display the sort marker. all of the
|
||||
* other backgrounds are already busy. snap it
|
||||
* to the right/middle of the th */
|
||||
thead th.sorted a span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-top: -8px;
|
||||
overflow: hidden;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
|
||||
thead th.asc a span { background-image: url("../icons/silk/sort_ascending.png"); }
|
||||
thead th.desc a span { background-image: url("../icons/silk/sort_descending.png"); }
|
||||
|
||||
/* make the grid lighter within the tbody, since it's
|
||||
* only a visual hint to distinguish the rows + cols */
|
||||
tbody th, tbody td {
|
||||
border-color: #f8f8f8; }
|
||||
|
||||
/* stripe the rows
|
||||
tbody tr:nth-child(odd) {
|
||||
background: #f8f8f8; }*/
|
||||
|
||||
/* restore the dark outer borders of the tbody */
|
||||
tbody tr:first-child th, tbody tr:first-child td { border-top-color: #ddd; }
|
||||
tbody th:last-child, tbody td:last-child { border-right-color: #ddd; }
|
||||
tbody tr:last-child th, tbody tr:last-child td { border-bottom-color: #ddd; }
|
||||
tbody th:first-child, tbody td:first-child { border-left-color: #ddd; }
|
||||
|
||||
/* some cells have nothing important to say, (like "none" or
|
||||
* "never"), but are required none the less. make them dull,
|
||||
* to highlight the rows which contain real data */
|
||||
td.na, th.na, td span.na, th span.na {
|
||||
font-style: italic;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* when a row is "active" (eg. it is being viewed, edited, etc), it
|
||||
* is dimly highlighted. the bgcolor is 10% of #33a7d2 (links)
|
||||
* applied to the cells (not the row), to mask the stripes */
|
||||
tr.active td, tr.active th {
|
||||
background: #ebf6fa url(../images/table-row-bg-active.png) repeat-x 100% 0; }
|
||||
|
||||
tr.no-data { }
|
||||
|
||||
tr.no-data td {
|
||||
text-align: center;
|
||||
background: #f8f8ff no-repeat 50% 50%;
|
||||
padding: 2em;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* since no-data rows usually only have a single <td>, the
|
||||
* last-child rule above breaks their huge padding. this is
|
||||
* a hack to restore it. */
|
||||
body:last-child tr.no-data td:last-child {
|
||||
padding-right: 2em; }
|
||||
|
||||
tr.no-data td a.add {
|
||||
display: block;
|
||||
padding-top: 0.625em;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/* since there is no data, it might be useful to point the
|
||||
* user in the right direction. these arrows are very light,
|
||||
* and displayed behind the "You haven't..." text. */
|
||||
tr.no-data.look-up td { background-image: url("../images/big-arrows/up.png"); }
|
||||
tr.no-data.look-right td { background-image: url("../images/big-arrows/right.png"); }
|
||||
tr.no-data.look-down td { background-image: url("../images/big-arrows/down.png"); }
|
||||
tr.no-data.look-left td { background-image: url("../images/big-arrows/left.png"); }
|
||||
|
||||
/* if there is no data because an error occurred, make the
|
||||
* table obviously busted by highlighting it in red. */
|
||||
tr.no-data.error td {
|
||||
color: #f66;
|
||||
background-color: #fff8f8;
|
||||
background-image: url("../images/big-arrows/error.png");
|
||||
}
|
||||
|
||||
tr.depth-1 td.indent { padding-left: 2em; }
|
||||
tr.depth-2 td.indent { padding-left: 4em; }
|
||||
tr.depth-3 td.indent { padding-left: 6em; }
|
||||
tr.depth-4 td.indent { padding-left: 8em; }
|
||||
tr.depth-5 td.indent { padding-left: 10em; }
|
||||
tr.depth-6 td.indent { padding-left: 12em; }
|
||||
tr.depth-7 td.indent { padding-left: 14em; }
|
||||
tr.depth-8 td.indent { padding-left: 16em; }
|
||||
|
||||
tfoot {
|
||||
background: #f8f8f8 url("../images/table-footer-bg.png") repeat-x 0 0;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/* no padding in the footer cell; the links will float and pad
|
||||
* themselves, so the clickable blocks are easier to hit */
|
||||
tfoot td {
|
||||
padding: 0; }
|
||||
|
||||
/* footer links are dull, because they're less important
|
||||
* than the data. TODO: is this totally stupid? (i don't
|
||||
* really care, it's pretty) */
|
||||
tfoot a,
|
||||
tfoot span {
|
||||
display: block;
|
||||
float: right;
|
||||
padding: 0.625em;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* footer links can be broken up with spans, which look
|
||||
* the same, except super dull (for things like disabled
|
||||
* pagination links */
|
||||
tfoot span {
|
||||
color: #ddd; }
|
||||
|
||||
/* highlight hover links brighter than usual, since
|
||||
* they're harder to spot */
|
||||
tfoot a:hover {
|
||||
background: #fff; }
|
||||
|
||||
/* move all paginator links to the left, to separate from
|
||||
* additional views and export, which lives on the right */
|
||||
tfoot .paginator,
|
||||
tfoot .paginator a,
|
||||
tfoot .paginator span {
|
||||
float: left; }
|
||||
|
||||
tfoot .paginator a.active {
|
||||
background: #ddd;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
tfoot .paginator .first,
|
||||
tfoot .paginator .prev,
|
||||
tfoot .paginator .next,
|
||||
tfoot .paginator .last {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 50%;
|
||||
text-indent: -9999px;
|
||||
overflow: hidden;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
/* links look something like:
|
||||
* << < 1 2 3 4 > >> */
|
||||
tfoot .paginator .first { background-image: url("../icons/silk/resultset_first.png"); }
|
||||
tfoot .paginator .prev { background-image: url("../icons/silk/resultset_previous.png"); }
|
||||
tfoot .paginator .next { background-image: url("../icons/silk/resultset_next.png"); }
|
||||
tfoot .paginator .last { background-image: url("../icons/silk/resultset_last.png"); }
|
||||
|
||||
/* when a link is disabled, move the background image
|
||||
* over to reveal the transparent sprite to the left */
|
||||
tfoot .paginator span.na {
|
||||
background-position: -16px 50%; }
|
||||
|
||||
/* the ... to indicate that page links have been hidden
|
||||
* (because there were too many) should be quite dull */
|
||||
tfoot .paginator span.elipsis {
|
||||
letter-spacing: 1px;
|
||||
color: #888;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user