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