Some css from pkgdb for Fedora Apps

[Toshio Kuratomi]

Hey all,

I have some css that I'm carrying i nthe pkgdb that would be more 
generally useful (and could use some touchups by people who know more 
about design than I :-)  I think we should merge this to a global css 
somewhere.  Perhaps fedora.css or something that's for all of the Fedora 
Applications.

I'm looking to answer two questions about these:
1) Where should we put them?
2) How can we improve them?

Here's what I have with annotations of what they do:

/***************
   pageLogin is a box to log people into a TurboGears app.  It could use
   more styling than this if someone wanted to take the time.
  ***************/

#pageLogin
{
   float: right;
}


/**************
  actions is a menubar in the packagedb that links to bodhi, koji,
  packagedb... Basically all the package oriented apps.  Maybe this
  needs a rename.  Maybe it should be moved somewhere else in the
  templates.
  **************/

.actions
{
   list-style: none;
   line-height: 1;
   margin: 1ex 0!important;
}

.actions li
{
   display: inline;
   margin-right: 1ex;
}

a.bodhi
{
   padding-left: 20px;
   background: url(../images/bodhi.png) 0 50% no-repeat;
}

a.koji
{
   padding-left: 20px;
   background: url(../images/koji.png) 0 50% no-repeat;
}

a.bugz
{
   padding-left: 20px;
   background: url(../images/bugz.png) 0 50% no-repeat;
}

a.pkgdb
{
   padding-left: 20px;
   background: url(../images/pkgdb.png) 0 50% no-repeat;
}

a.cvs
{
   padding-left: 20px;
   background: url(../images/emblem-cvs-controlled.png) 0 50% no-repeat;
}

/************
  Tooltip is a tooltip.  A little popup box when you mouseover an area.
  Both Bodhi and FAS have other implementations of Tooltips.  We should
  have a tooltips class but I don't know which implementation is best.
  ************/

.ToolTip
{
   display: block;
   positon: absolute;
   border: 1px solid black;
   background-color: lightyellow;
   width: 200px;
}

/*************
  This is used to toggle an element on and off on the page.  Using
  javascript to set the class to invisible makes the element disappear
  from the page.
  *************/
.invisible
{
   display: none;
}

/**************
  filter is a box that I use for filtering searches.  It contains a
  list of form elements and a submit button to filter out extraneous
  data.
  **************/

.filter
{
     background: #ddd;
     float: right;
     border-width: 1px;
     border-color: #000;
     border-style: solid;
     padding: .4em;
     margin: .1em;
}

.filter li
{
     list-style-type: none;
     line-height:0;
}

.filter li select
{
     margin: .1em;
}

/**************
  flash is for status messages (usually errors) generated by turbogears.
  It appears as a banner across the top of a page when you do something
  unexpected.  This was taken from FAS and doesn't do what I want yet --
  I haven't figured out how to have a success vs error image, for
  instance.  Bodhi has a different implementation of flash that I
  haven't looked at.  Just like tooltips we need to have something
  for this.
***************/

.flash
{
     background: #DEE681 url(../images/success.png) 10px 50% no-repeat;
     border: 1px solid #CCBBAA;
     padding: 1.5ex 15px 1.5ex 43px;
     margin: 1ex 0;
}

-Toshio

-------------- next part --------------
A non-text attachment was scrubbed...
Name: signature.asc
Type: application/pgp-signature
Size: 197 bytes
Desc: OpenPGP digital signature
URL: <http://listman.redhat.com/archives/fedora-websites-list/attachments/20080716/e0be2654/attachment.sig>