Some css from pkgdb for Fedora Apps

[Toshio Kuratomi <a.badger@xxxxxxxxx>]

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

Attachment: signature.asc
Description: OpenPGP digital signature

-- 
Fedora-websites-list mailing list
Fedora-websites-list@xxxxxxxxxx
https://www.redhat.com/mailman/listinfo/fedora-websites-list