backup de julho

[h2N7SspZmY.git] / lib / plugins / clock / style.css

/** 
 * @file       clock/style.css
 * @brief      Default styles for the "clock" plugin
 * @license    GPL 2 (http://www.gnu.org/licenses/gpl.html)
 * @author     Luis Machuca B.  <luis.machuca@gulix.cl>
 * @version    1.4
 */

/**
 *  This file sets the default style for the "clock" plugin.
 *  The CSS style applied to the clock is organized as follows:
 *
 * div#clock_object.classname - the container box.
 *    This is the virtual container. Most probably you don't want to
 *    put anyting in here, except margin/padding specifications.
 *    'classname' is the class name associated with the style. You must
 *    copy and replace this parameter accordingly to create new styles.
 *
 *  .face - the clock face
 *    face properties, such as font-size and color, should be set here.
 *  .info - the infopage wikilink
 *    this should be left empty unless you want to re-theme the link
 *    different from your wiki template
 *  .info > a:???   - the link
 *    put here CSS for effects on hover, visited, etc.
 *  
 */

#dw_clock_object {
  min-width: 6em;
  padding: 0 2px;
  }

/** 
 * ---------------------------------------------------------------------
 * Style #0    : plain
 * Description : pretty plain
 * Features    : 
 * With this style the face itself is not stulized, only some layout
 * attributes are given as well as default style for the helpbar.
 */

#dw_clock_object .face.plain {
  position: relative;
  margin: 0 2em;
  }


/** 
 * ---------------------------------------------------------------------
 * Style #1    : default
 * Description : a light-coloured wall-like clock
 * Features    : monospaced font, wide margin and dark borders,
 *               with the face colour following the template theme
 */

#dw_clock_object .face.default {
  position: relative;
  /*width: 120px;*/

  margin: auto 6px;


  }

#dw_clock_object .face.default {
  display: block;
  font-family: monospace;
  font-size: 1.5em;
  text-align: center;
  color: __text__;

  border: 4px inset __text_alt__;

  background-color: __background_alt__;

  
  }


/**
 * ---------------------------------------------------------------------
 * Style #2    : aradio
 * Description : some description
 * Features    : a clock using a digital clock font in yellow face in a 
 *               black background and minor shadow.
 *
 * ---Warning---
 * In order to achieve the desired effect, this style makes use of 
 * the "font-face" aspect of CSS specification, which may or may not be 
 * supported by your browser as of the time of release of this plugin.
 * **Check the plugin page for support and indications** 
 *
 * For full experience, it is _recommended_ that you make available the 
 * font to your public via a download link, as well as sourcing the 
 * font file from this stylesheet (see "path/to/your/").
 *
 * Take into consideration the license of the font file. If the font is
 * not available as Freeware or Free Software, consider using another
 * typography.
 *
 * ---End Warning---

 */

@font-face {
  font-family: 'Atomic Clock Radio';
  src: local('Atomic Clock Radio');
  /* src: url(path/to/your/copy/of/atomicclockradio.ttf) format('truetype'); */
  
  }

#dw_clock_object .face.aradio {
  padding: 4px;
  padding-right: 1em;
  
  background-color: #c4c8ee;
  border: 2px solid #b6b6d8;

  font-family: "Atomic Clock Radio", fantasy;
  font-size: 14pt;
  
  text-align: right;
  letter-spacing: 0.6pt;
  text-shadow: -2px 1px #884446;
  
  color: #848861;
  }

#dw_clock_object .face.aradio span.sep {
  color: #808080;
  font-weight: bold;
  }


/**
 * ---------------------------------------------------------------------
 * Style #3    : tv24
 * Description : "24"-like digital clock
 * Features    : a clock using a digital clock font with yellow face in a 
 *               black background and a shadow; in absence of such 
 *               font style the display downgrades to the 
 *               defined-to-exist monospaced font.
 *
 * ---Warning---
 * In order to achieve the desired effect, this style makes use of 
 * the "font-face" aspect of CSS specification, which may or may not be 
 * supported by your browser as of the time of release of this plugin.
 * **Check the plugin page for support and indications** 
 *
 * For full experience, it is _recommended_ that you make available the 
 * font to your public via a download link, as well as sourcing the 
 * font file from this stylesheet (see "path/to/your/").
 *
 * Take into consideration the license of the font file. If the font is
 * not available as Freeware or Free Software, consider using another
 * typography.
 *
 * ---End Warning---
 */


  
/**
 *  Warning: the following style uses an online,
 *  free-for-noncommercial-use, Truetype font, from URW Software.
 */
@font-face {
  font-family: 'lcdd';
  src: local('LCDd');
  /* src: url(path/to/your/copy/of/lcd.ttf) format('truetype'); */
  
  }

/**
 *  Warning: the following style uses an online,
 *  freeware, Truetype font.
 */
@font-face {
  font-family: 'Digital Readout';
  src: local('Digital Readout');
  /* src: url(path/to/your/copy/of/digitalreadout.ttf) format('truetype'); */
  
  }


#dw_clock_object .face.tv24 {
  width: 75%;
  min-width: 6em;
  
  background-color: black;
  border: 2px solid navy;

  line-height: 20pt;
  text-align: center;
  font-family: "Digital Readout", "lcdd", monospace;
  font-size: 14pt;
  
  text-shadow: 2px 2px #404020;
  letter-spacing: 0.2em; 
  
  color: yellow;
  }

#dw_clock_object .face.tv24 .info {
  position: absolute;
  right: 0;
  bottom: 0; 
  border: 2px solid black;
  }

#dw_clock_object .face.tv24 .info:hover {
  border: 2px solid __existing__;
  }

/**
 * ---------------------------------------------------------------------
 * Style #4    : bluebox
 * Description : "24"-like digital clock
 * Features    : a blue box with a white typeface, shadows.
 *
 * ---Warning---
 * In order to achieve the desired effect, this style makes use of 
 * the "font-face" aspect of CSS specification, which may or may not be 
 * supported by your browser as of the time of release of this plugin.
 * **Check the plugin page for support and indications** 
 *
 * For full experience, it is _recommended_ that you make available the 
 * font to your public via a download link, as well as sourcing the 
 * font file from this stylesheet (see "path/to/your/").
 *
 * Take into consideration the license of the font file. If the font is
 * not available as Freeware or Free Software, consider using another
 * typography.
 *
 * ---End Warning---
 */

#dw_clock_object .face.bluebox {
  width: 75%;
  max-width: 8em;
  
  background-color: #2222aa;
  border: 4px solid navy;
  border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius: 6px;

  line-height: 20pt;
  text-align: center;
  font-family: "Liberation", "Helvetica", cursive;
  font-size: 14pt;
  
  text-shadow: -1px 2px #80c080;
  text-shadow: 2px -1px #882222;

  letter-spacing: 0.2em; 
  
  color: #e0f0e0;
  }


/*
 * ---------------------------------------------------------------------
 * Helpbar styling
 */
#dw_clock_object p.helpbar {
  margin: 0 2em; 
  padding: 0 0.5em;
  background-color: __background_alt__;
  border: 1px solid __existing__;
  border-radius: 6px;
  -moz-border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius: 6px;
  font-size: 90%;
  }