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
Show replies by date