includes/clientside/css/enano-shared.css
author Dan
Sun, 04 May 2008 21:57:48 -0400
changeset 541 acb7e23b6ffa
parent 537 547b7ba6d535
child 563 0103428e2179
permissions -rw-r--r--
Massive commit with various changes. Added user ranks system (no admin interface yet) and ability for users to have custom user titles. Made cron framework accept fractions of hours through floating-point intervals. Modifed ACL editor to use miniPrompt framework for close confirmation box. Made avatar system use a special page as opposed to fetching the files directly for caching reasons.

/*
 * Shared stuff that all Enano themes (should) use
 */

/* IE-only stylesheet */
@import url("./enano-shared-ie.css");
/* End IE-only stylesheet */
 
/* Information, warning, question, error, and wait boxes */
div.error-box                     { background-image: url(../../../images/error.png);    background-position: 8px 8px; background-repeat: no-repeat; background-color: #FFF4F4; border: 1px dashed #406080; padding: 10px 10px 10px 50px; margin: 1em 0 0 0; min-height: 25px; }
div.info-box                      { background-image: url(../../../images/info.png);     background-position: 8px 8px; background-repeat: no-repeat; background-color: #F4F4FF; border: 1px dashed #406080; padding: 10px 10px 10px 50px; margin: 1em 0 0 0; min-height: 25px; }
div.warning-box                   { background-image: url(../../../images/warning.png);  background-position: 8px 8px; background-repeat: no-repeat; background-color: #FFFFF4; border: 1px dashed #406080; padding: 10px 10px 10px 50px; margin: 1em 0 0 0; min-height: 25px; }
div.question-box                  { background-image: url(../../../images/question.png); background-position: 8px 8px; background-repeat: no-repeat; background-color: #F4FFF4; border: 1px dashed #406080; padding: 10px 10px 10px 50px; margin: 1em 0 0 0; min-height: 25px; }
div.wait-box                      { background-image: url(../../../images/wait.png);     background-position: 8px 8px; background-repeat: no-repeat; background-color: #FFF4FF; border: 1px dashed #406080; padding: 10px 10px 10px 50px; margin: 1em 0 0 0; min-height: 25px; }

div.error-box-mini                { background-image: url(../../../images/mini-error.png);    background-position: 5px center; background-repeat: no-repeat; background-color: #FFF4F4; border: 1px solid #406080; padding: 4px 4px 4px 26px; margin: 1em 0; min-height: 17px; }
div.info-box-mini                 { background-image: url(../../../images/mini-info.png);     background-position: 5px center; background-repeat: no-repeat; background-color: #F4F4FF; border: 1px solid #406080; padding: 4px 4px 4px 26px; margin: 1em 0; min-height: 17px; }
div.warning-box-mini              { background-image: url(../../../images/mini-warning.png);  background-position: 5px center; background-repeat: no-repeat; background-color: #FFFFF4; border: 1px solid #406080; padding: 4px 4px 4px 26px; margin: 1em 0; min-height: 17px; }
div.question-box-mini             { background-image: url(../../../images/mini-question.png); background-position: 5px center; background-repeat: no-repeat; background-color: #F4FFF4; border: 1px solid #406080; padding: 4px 4px 4px 26px; margin: 1em 0; min-height: 17px; }
div.wait-box-mini                 { background-image: url(../../../images/mini-wait.png);     background-position: 5px center; background-repeat: no-repeat; background-color: #FFF4FF; border: 1px solid #406080; padding: 4px 4px 4px 26px; margin: 1em 0; min-height: 17px; }

/* Similar to the Mediawikian alert box (usermessage) */

div.alert {
  background-color: #F09090;
  border: 1px solid #D03030;
  color: #300000;
  padding: 3px;
  position: relative;
  top: -3px;
}

/* toolbar */
div.toolbar {
  border-bottom: 1px solid #909090;
  background-color: #D0D0D0;
  padding: 2px 0;
  height: 22px;
  font-family: arial, sans-serif;
  font-size: 8pt;
}
div.toolbar ul {
  margin: 0;
  padding: 0;
}
div.toolbar ul li {
  list-style: none;
  margin: 0;
  float: left;
}
div.toolbar a img {
  opacity: 0.6;
  /*filter: alpha(opacity=60);*/
}
div.toolbar a:hover img, div.toolbar a:focus img {
  opacity: 1;
  /*filter: alpha(opacity=100);*/
}
div.toolbar a {
  display: block;
  padding: 2px;
  border: 1px solid transparent;
  cursor: default;
  width: auto;
  color: #000000;
  margin: 0 2px;
  max-height: 16px;
  text-decoration: none;
}
div.toolbar a:hover, div.toolbar a:focus {
  border: 1px solid #202090;
  background-color: #ceceed;
  color: #000000;
  text-decoration: none;
}
div.toolbar a:active {
  border: 1px solid #A0A0A0;
  background-color: #E0E0E0;
}
div.toolbar img {
  margin: 0;
  padding: 0;
  display: inline;
  border-width: 0px;
}
div.toolbar a span {
  position: relative;
  top: -4px;
}
div.toolbar li span {
  padding-left: 2px;
  padding-right: 5px;
}

/* vertical toolbar */
div.toolbar_vert {
  border: 1px solid #909090;
  background-color: #D0D0D0;
  padding: 2px 0;
}
div.toolbar_vert ul {
  margin: 0;
  padding: 0;
}
div.toolbar_vert ul li {
  list-style: none;
  margin: 0;
}
div.toolbar_vert a img {
  opacity: 0.6;
  /*filter: alpha(opacity=60);*/
}
div.toolbar_vert a:hover img {
  opacity: 1;
  /*filter: alpha(opacity=100);*/
}
div.toolbar_vert a {
  display: block;
  padding: 2px;
  border: 1px solid transparent;
  cursor: default;
  width: auto;
  color: #000000;
  margin: 0 2px;
  max-height: 16px;
  text-decoration: none;
}
div.toolbar_vert a:hover {
  border: 1px solid #202090;
  background-color: #ceceed;
  color: #000000;
  text-decoration: none;
}
div.toolbar_vert a:active {
  border: 1px solid #A0A0A0;
  background-color: #E0E0E0;
}
div.toolbar_vert img {
  margin: 0;
  padding: 0;
  display: inline;
  border-width: 0px;
}
div.toolbar_vert a span {
  position: relative;
  top: -4px;
}
div.toolbar_vert li span {
  padding-left: 2px;
  padding-right: 5px;
}

div.breadcrumbs                   { margin: 10px 0; padding: 5px; border: 1px solid #AAAAAA; background-color: #E8E8E8; font-size: smaller; font-weight: bold; }

/* Tables */
.tblholder                        { margin: 10px 0 0 0; padding: 0; border: 1px solid #AAAAAA; background-color: #E8E8E8; }

/* The beautiful tables inside what may not obviously be mdg-comment divs */
div.tblholder td.row1             { padding: 4px; background-color: #E0E0E0; }
div.tblholder td.row2             { padding: 4px; background-color: #F0F0F0; }
div.tblholder td.row3             { padding: 4px; background-color: #E8E8E8; }
div.tblholder th                  { padding: 4px; background-color: #7080A0; font-weight: bold; text-align: center; color: #FFFFFF; }
div.tblholder th.subhead          { padding: 4px; background-color: #90A0B0; font-weight: bold; text-align: center; color: #FFFFFF; }
div.tblholder table               { background-color: #FFFFFF; width: 100%; }

/* Colored table cells */
div.tblholder td.row1_red         { padding: 4px; background-color: #F8E0E0; }
div.tblholder td.row2_red         { padding: 4px; background-color: #FFF0F0; }
div.tblholder td.row3_red         { padding: 4px; background-color: #FFE8E8; }
div.tblholder td.row1_green       { padding: 4px; background-color: #E0F8E0; }
div.tblholder td.row2_green       { padding: 4px; background-color: #F0FFF0; }
div.tblholder td.row3_green       { padding: 4px; background-color: #E8FFE8; }

/* Well, not Midget and not comments (usually), but that's what the class is called ;-). Basically an informational window or used as a wrapper for tables. */
.mdg-comment, .mdg-infobox        { margin-left: 1em; padding: 7px; border: 1px solid #AAAAAA; background-color: #E8E8E8; }

/* JWS window theming */
div.jswindow                      { border: 2px solid #7090B0; border-top: 5px solid #7090B0; padding: 0px; font-family: Trebuchet MS, tahoma, verdana, arial, sans-serif; font-size: 9pt; display: none; position: absolute; background-color: #FFFFFF; }
div.titlebar                      { background-color: #7090B0; color: #FFFFFF; font-family: Trebuchet MS, tahoma, verdana, arial, sans-serif; font-size: 9pt; padding-bottom: 4px; cursor: default; }
div.titlebar div.closebtn         { width: 16px; height: 16px; border: 1px solid #B0D0F0; background-color: #90B0D0; display: block; }
div.titlebar div.closebtn:hover   { width: 16px; height: 16px; border: 1px solid #FFFFFF; background-color: #B0D0F0; display: block; }
div.titlebar table, div.titlebar td { margin: 0; padding: 0; }
div.jswindow div.content          { padding: 10px; margin: 0; background-color: #FFFFFF; }

/* Search results */
div.search-result, div.search-hibar, div.search-lobar {
  font-family: arial, helvetica, sans-serif;
  font-size: 8pt;
}
div.search-result h3   { font-size: 14pt; margin: 10px 0 0 0; }
div.search-result h3 a { color: blue !important; font-weight: normal; padding-bottom: 0; }
div.search-result p    { margin: 10px 0 0 0 !important; font-family: arial, helvetica, sans-serif; font-size: small; }
div.search-result span.search-result-info { color: #7777CC; }
div.search-result span.search-result-url  { color: green; }
div.search-result span.search-term, div.search-result span.title-search-term { background-color: #FFFFC0; font-weight: bold; }
div.search-result span.url-search-term { font-weight: bold; }
div.search-result span.search-result-annotation { font-size: 8pt; }
div.search-hibar       { border-top: 1px solid #3366CC; margin-top: 10px; color: #000; background-color: #D5DFF3; padding: 3px; vertical-align: middle; }
div.search-lobar       { background-color: #E5EFFF; margin: 0; padding: 5px; }

/*
 * Search box
 */
 
input.js-search-box {
  font-size: 13px;
  margin: 0;
  padding: 1px !important;
  background-image: url(../../../images/search-box-normal.gif);
  height: 15px;
  background-repeat: repeat-x;
  border-width: 1px;
  border-style: solid;
  border-color: #6c6c6c;
  color: #C0C0C0;
}

input.js-search-box:focus {
  background-image: url(../../../images/search-box-hilite.gif);
  color: #666;
}

div.js-search-submit {
  display: block;
  position: absolute;
  width: 24px;
  height: 19px;
  font-size: 1px;
  line-height: 19px;
  clip: rect(0px, 24px, 19px, 0px);
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: transparent url(../../../images/search-btn-normal.png) no-repeat !important;
  background-repeat: no-repeat;
  cursor: pointer;
}

div.js-search-submit:hover {
  background-image: url(../../../images/search-btn-hilite.png);
}

input[type ^="text"].username, input[type ^="password"].password {
  padding: 2px 2px 2px 27px;
  width: 96px;
  height: 15px;
  border: 0px none #000;
  font-size: 11px;
}
input[type ^="text"].username {
  background-image: url(../../../images/login-username.png);
}
input[type ^="password"].password {
  background-image: url(../../../images/login-password.png);
}

/*
 * jBox menu system
 */

div.menu, div.menu_nojs {
  background-color: #D0D0D0;
  border: 1px solid #A0A0A0;
  font-size: 9pt;
}
div.menu a, div.menu div.label {
  padding: 2pt 5px;
  text-decoration: none;
  display: block;
  float: left;
  color: #404040;
}
div.menu_nojs a, div.menu_nojs div.label {
  padding: 2pt 5px;
  text-decoration: none;
  display: block;
  color: #404040;
}
div.menu div.label, div.menu_nojs div.label {
  color: #101010;
}
div.menu span.sep, div.menu_nojs span.sep {
  display: block;
  float: left;
  width: 5px;
}
div.menu div.multopts, div.menu_nojs div.multopts {
  line-height: 17pt;
}
div.menu div.multopts a, div.menu div.multopts div.label, div.menu_nojs div.multopts a, div.menu_nojs div.multopts div.label {
  float: none;
  display: inline;
}
div.menu a:hover, div.menu_nojs a:hover {
  color: #FFFFFF;
  background-color: #808080;
}
div.menu input[type ^="text"], div.menu input[type ^="password"], div.menu_nojs input[type ^="text"], div.menu_nojs input[type ^="password"] {
  border-width: 0;
  font-size: 9pt;
  padding: 4px 5px;
  max-width: 70px;
  background-color: #E0E0E0;
}
div.menu input[type ^="text"]:hover, div.menu input[type ^="password"]:hover, div.menu_nojs input[type ^="text"]:hover, div.menu_nojs input[type ^="password"]:hover {
  background-color: #E8E8E8;
}
div.menu input[type ^="text"]:focus, div.menu input[type ^="password"]:focus, div.menu_nojs input[type ^="text"]:focus, div.menu_nojs input[type ^="password"]:focus {
  background-color: #F0F0F0;
}
div.menu input[type ^="button"], div.menu input[type ^="submit"], div.menu_nojs input[type ^="button"], div.menu_nojs input[type ^="submit"] {
  border-width: 0;
  font-size: 9pt;
  padding: 3px 5px;
  max-width: 70px;
}
div.menu a.current, div.menu a.current:hover, div.menu_nojs a.current, div.menu_nojs a.current:hover {
  color: #FFFFFF;
  background-color: #505050;
}
div.menu ul {
  display: none;
  position: absolute;
  padding: 0;
  margin: 0;
  background-color: #D0D0D0;
  border: 1px solid #A0A0A0;
  min-width: 120px;
}
div.menu_nojs ul {
  display: block;
  clear: both;
}
div.menu ul li, div.menu_nojs ul li {
  list-style: none;
}
div.menu ul a, div.menu_nojs ul a {
  float: none;
  margin: 0;
}
span.menuclear {
  font-size: 1px;
  height: 0px;
  width: 0px;
  clear: left;
  line-height: 0px;
  display: block;
}

/*
 * Docking Boxes code (for the sidebar editor)
 */
 
/* group container(s) */
#sbedit {
  margin: 0;
  padding: 0;
  /* position:relative; /* additional outer containers must also have position:relative */
}
/* keyboard navigation tooltip */
.dbx-tooltip {
  display:block;
  position:absolute;
  margin:36px 0 0 125px;
  width:185px;
  border:1px solid #000;
  background:#ffd;
  color:#000;
  font:normal normal normal 0.85em tahoma, arial, sans-serif;
  padding:2px 4px 3px 5px;
  text-align:left;
  }
* html .dbx-tooltip { width:195px; }

/* use CSS2 system colors in CSS2 browsers 
   but not safari, which doesn't support them */
*[class="dbx-tooltip"]:lang(en) {
  border-color:InfoText;
  background:InfoBackground;
  color:InfoText;
  font:small-caption;
  font-weight:normal;
  }
/* additional clone styles */
.dbx-clone {
  opacity: 0.8;
}
.dbx-content ul {
  margin: 0; padding: 0;
  list-style: none;
}
.dbx-content li a, .dbx-content li a:hover {
  text-decoration: none; color: #666;
}
.dbx-content2 {
  margin: 0px 1px 0px 1px;
}

/* Progress bars */
div.progressbar {
  padding: 2px;
  background-color: #90A0B0;
  width: 308px;
}
div.progressbar_inner {
  min-width: 30px;
  color: white;
  background-color: #7080A0;
  padding: 4px;
}
/* User notification - courtest of wikipedia.org (not sure if this is included with MediaWiki) */
/* user notification thing */

.usermessage {
	background-color: #ffce7b;
	border: 1px solid #ffa500;
	color: black;
	margin: 10px 0 1em;
	padding: .5em 1em;
	vertical-align: middle;
}
.usermessage a:link, .usermessage a:active, .usermessage a:visited {
  color: #CA7520;
}
.usermessage a:hover {
  color: #AA5500 !important;
}
.usermessage h2 {
  border-bottom-color: #ef8500 !important;
  color: black;
}
div.thumbnail {
  display: table;
  border: 1px solid #AAAAAA;
  background-color: #F0F0F0;
  padding: 4px;
  margin-bottom: 10px;
}
div.thumbnail-inner {
  background-image: url(../../../images/thumbnail.png);
  background-position: top right;
  background-repeat: no-repeat;
}

/* Tables where diffs are shown */
table.diff, td.diff-otitle, td.diff-ntitle { background-color: white; }
td.diff-addedline { background: #cfc; font-size: smaller; }
td.diff-deletedline { background: #ffa; font-size: smaller; }
td.diff-context { background: #eee; font-size: smaller; }
span.diffchange { color: red; font-weight: bold; }

/* Tag cloud */
span.tc_word_normal {
  font-family: Arial, helvetica, sans-serif;
  font-size: 10pt;
  letter-spacing: 3px;
  padding: 4px 4px 4px 4px;
}
span.tc_word_small {
  font-family: Arial, helvetica, sans-serif;
  font-size: 8pt;
  color: #000;
}
span.tc_word_normal a, span.tc_word_small a {
  color: inherit !important;
  text-decoration: none !important;
}
/* These are from http://www.lotsofcode.com/php/tutorials/tag-cloud */
span.tc_normal_index_1 {
  color: #000;
  font-size: 2.4em;
}
span.tc_normal_index_2 {
  color: #333;
  font-size: 2.2em;
}
span.tc_normal_index_3 {
  color: #666;
  font-size: 2.0em;
}
span.tc_normal_index_4 {
  color: #999;
  font-size: 1em;
}
span.tc_normal_index_5 {
  color: #aaa;
  font-size: 1.6em;
}
span.tc_normal_index_6 {
  color: #bbb;
  font-size: 1.4em;
}
span.tc_normal_index_7 {
  color: #ccc;
  font-size: 1.2em;
}
span.tc_normal_index_8 {
  color: #ddd;
  font-size: 0.8em;
}
span.tc_small_index_1 {
  opacity: 1;
  font-size: 1.4em;
}
span.tc_small_index_2 {
  opacity: 0.8;
  font-size: 1.3em;
}
span.tc_small_index_3 {
  opacity: 0.6;
  font-size: 1.2em;
}
span.tc_small_index_4 {
  opacity: 0.5;
  font-size: 1em;
}
span.tc_small_index_5 {
  opacity: 0.45;
  font-size: 1.3em;
}
span.tc_small_index_6 {
  opacity: 0.4;
  font-size: 1.1em;
}
span.tc_small_index_7 {
  opacity: 0.35;
  font-size: 0.9em;
}
span.tc_small_index_8 {
  opacity: 0.3;
  font-size: 0.7em;
}

/* Default private message AJAX interface styles (colors and style based on those of Gmail) */

div#privmsgs {
  /* Neal prefers this border but I personally consider it distasteful because it detracts from the Gmail-ey look.
  border: 1px solid #c0c0c0; */
  background-color: white;
  color: black;
}

span.pm_link {
  color: #0000ff;
  cursor: pointer;
  text-decoration: underline;
}

span.pm_link_folder {
  display: block;
  text-decoration: none;
  padding: 3px;
}

span.pm_link_selected {
  background-color: #c3d9ff;
  font-weight: bold;
  text-decoration: underline;
}

span.pm_link_selected_trash {
  background-color: #d9d9db;
}

div.pm_break {
  height: 10px;
}

div.pm_main {
  background-color: #c3d9ff;
  padding: 5px 5px 3px 5px;
  margin-left: 12em;
  min-height: 16em;
}

div.pm_main_trash {
  background-color: #d9d9db;
}

div.pm_status {
  display: table;
  background-color: #cc0000;
  padding: 3px;
  margin: 0 auto;
  color: white;
}

div.pm_teaser {
  background-color: white;
  color: black;
  text-align: center;
  padding: 8em 1em 8em 1em;
}

div.pm_mlist_message {
  background-color: #e8eef7;
  color: black;
  border-bottom: 1px solid #d8d8d8;
  cursor: pointer;
}

div.pm_mlist_message span.pm_subject {
  font-weight: normal;
  display: inline-block;
  clip: rect(0px, auto, auto, 0px);
  overflow: hidden;
  margin: 0 3px 0 0;
}

div.pm_mlist_message span.pm_sender {
  display: inline-block;
  width: 30%;
  margin: 0 10px 0% 4px;
  font-weight: normal;
  clip: rect(0px, auto, auto, 0px);
  overflow: hidden;
}

div.pm_mlist_message span.pm_miniclip {
  color: #909090;
  display: inline-block;
  clip: rect(0px, auto, auto, 0px);
  overflow: hidden;
}

div.pm_messagelist_inner {
  min-height: 12em;
  background-color: white;
}

div.pm_mlist_message_unread {
  background-color: white;
}

div.pm_mlist_message_unread span.pm_subject {
  font-weight: bold;
}

div.pm_mlist_message_unread span.pm_sender {
  font-weight: bold;
}

div.pm_mlist_message_selected {
  background-color: #ffffcc;
}

span.pm_toolbar_label {
  color: black;
  font-weight: bold;
}

div.noborderbottom * {
  border-bottom-width: 0px;
}

div.nobordertop * {
  border-top-width: 0px;
}

/* Theme buttons in admin CP */

div.themebutton {
  width: 216px;
  float: left;
  background-position: center center;
  background-repeat: no-repeat;
  margin-right: 10px;
  padding: 5px;
  border: 1px solid #F0F0F0;
}

div.themebutton_theme_disabled {
  background-color: #D84308;
}

div.themebutton_theme_system {
  display: none;
}

div.themebutton a.tb-inner {
  opacity: 0;
  filter: alpha(opacity=0);
  display: block;
  height: 110px;
  padding-top: 40px;
  text-align: center;
  font-size: 40px;
  text-decoration: none;
}
div.themebutton_theme_system a.tb-inner {
  font-size: 28px;
  height: 100px;
  padding-top: 50px;
}
div.themebutton a.tb-inner:hover {
  opacity: 0.75;
  filter: alpha(opacity=75);
  background-color: #ffffff;
}
div.themebutton a.tb-inner span.themename {
  font-size: 8pt;
  color: #606060;
  display: block;
}

div.themebutton div.status {
  opacity: 0.75;
  filter: alpha(opacity=75);
  background-image: url(../../../images/loading-big.gif);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ffffff;
  height: 150px;
}

/* Expandable fieldsets */

fieldset legend a.expander {
  padding-left: 11px;
  background-position: left center;
  background-repeat: no-repeat;
  color: inherit;
  cursor: pointer;
}

fieldset legend a.expander:hover {
  color: inherit;
}

fieldset legend a.expander-closed {
  background-image: url(../../../images/expander/closed.gif);
  
}

fieldset legend a.expander-closed:hover {
  background-image: url(../../../images/expander/closed-prelight.gif);
}

fieldset legend a.expander-open {
  background-image: url(../../../images/expander/open.gif);
  padding-left: 17px;
}

fieldset legend a.expander-open:hover {
  background-image: url(../../../images/expander/open-prelight.gif);
}

/* Flown-in mini prompts */

div.miniprompt {
  position: absolute;
  z-index: 999;
}

div.miniprompt div.mp-top, div.miniprompt div.mp-bottom {
  width: 388px;
  height: 57px;
  background-image: url(../../../images/prompt-top.png);
  background-repeat: no-repeat;
  background-position: center center;
}

div.miniprompt div.mp-bottom {
  height: 42px;
  background-image: url(../../../images/prompt-bottom.png);
}

div.miniprompt div.mp-body {
  padding: 0 44px 10px 44px;
  width: 300px;
  background-image: url(../../../images/prompt-body.png);
  background-repeat: repeat-y;
  background-position: center center;
}

div.miniprompt h3 {
  /* fix padding issues on firefox */
  margin: 0 0 10px 0;
}

/* for buttons */
div.miniprompt div.mp-buttons {
  text-align: right;
  position: relative;
  top: 10px;
}

/* pseudo-buttons made with <a> tags */
.abutton {
  padding: 3px 5px;
  background-color: #f0f0f0;
  cursor: pointer;
  margin: 0 3px;
}

.abutton:hover {
  color: #f0f0f0 !important;
  background-color: #606060;
}

.abutton_green       { color:            #008800 !important; }
.abutton_green:hover { background-color: #008800 !important; }
.abutton_blue        { color:            #000088 !important; }
.abutton_blue:hover  { background-color: #000088 !important; }
.abutton_red         { color:            #880000 !important; }
.abutton_red:hover   { background-color: #880000 !important; }