includes/clientside/css/enano-shared.css
author Dan
Fri, 05 Oct 2007 01:57:00 -0400
changeset 162 e1a22031b5bd
parent 91 8079b0288e8e
child 272 e0ec986c0af3
permissions -rw-r--r--
Major revamps to the template parser. Fixed a few security holes that could allow PHP to be injected in untimely places in TPL code. Improved Ux for XSS attempt in tplWikiFormat. Documented many functions. Backported much cleaner parser from 2.0 branch. Beautified a lot of code in the depths of the template class. Pretty much a small-scale Extreme Makeover.

/*
 * Shared stuff that all Enano themes (should) use
 */
 
/* 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; }

/* IE-only stylesheet \*/
@import url("./enano-shared-ie.css");
/* End IE-only stylesheet */

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 {
  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 {
  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%; }

/* 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 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: 10pt; }
div.search-result span.search-result-info { color: green; }
div.search-result span.search-term, div.search-result span.title-search-term { background-color: #FFFFC0; font-weight: bold; }

/*
 * 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;
}
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;
}