关于CSS面板

注意：这是对0.5及以上版本适用

本文的目的是说明如何使用一个标准的seagull面板。我们什么达到这个目的的呢？我们做了两方面的工作：

• 保证表现层（包括颜色）只在CSS中定义
• 仅定义并使用颜色的PHP变量

我们将会有什么好处呢？

• 一个标准的面板可以为整个框架或应用程序提供一个标准一致的层。
• 自定一个标准的样式表是简洁方便的

最后我们得到了你这样的效果：http://wiki.kde.org/tiki-index.php?page=Colors 目前我们有21咱颜色（包括白色），MS and GNOME 30, KDE 42.

  $primary = '#99cc00'; lime green
  $primaryLight = '#bbe713'; light green
  $primaryText = '#e6ffa2'; pale white for text on lime green
  $primaryTextLight = '#ffffff'; white
  $secondaryLight = '#e5f1ff'; baby blue
  $secondary = '#9dcdfe'; blue
  $secondaryMedium = '#3399ff'; medium blue
  $secondaryDark = '#184a84'; dark blue
  $tertiary = '#d9d9d9'; normal gray
  $tertiaryLight = '#efefef'; light gray
  $tertiaryMedium = '#bcbcbc'; medium gray
  $tertiaryDark = '#999999'; dark gray
  $tertiaryDarker = '#666666'; darker gray

  $blocksBorderBody = $tertiaryMedium;
  $blocksBorderTitle = $tertiaryMedium;
  $blocksBackgroundBody = $tertiaryLight;
  $blocksBackgroundTitle = $primary;
  $blocksColorBody = $secondaryDark;
  $blocksColorTitle = $primaryText;

  $tableRowLight = $tertiaryLight;
  $tableRowDark = $tertiary;

  $sectionHeaderBackground = $tertiary;
  $sectionHeaderColor = $secondaryDark;
  $colHeaderBackground = $tertiaryLight;
  $colHeaderColor = $secondaryDark;
  $navigatorBackground = $tertiaryDarker;
  $navigatorColor = $tertiaryMedium;

  $forApproval = '#ff0000';
  $approved = '#ff9933';
  $published = '#!00cc00';
  $archived = '#!909090';

  $error = '#ffcc00';
  $errorLight = '#ffff99';
  $errorDark = '#ff9600';
  $errorText = $secondaryDark;
  $errorTextLight = '#ffffcc';
  $errorTextMedium = '#ff0000';

  $buttonBorderColors = '#ffffff #!333333 #!333333 #ffffff';

body

• color: $tertiaryDarker
• background: $primaryTextLight

#sgl-header

• background-color: $primary

#sgl-header-left

• color: $primaryTextLight

#sgl-header-right

• color: $primaryTextLight

#sgl-header-right a

• color: $primaryTextLight

#sgl-header-right #headerLogAction

• border-color: $buttonBorderColors
• background-color: $primaryLight

th

• color: $primaryTextLight
• background-color: $tertiaryMedium

#imRead

• background-color: $tertiaryMedium

.sgl-row-light

• background-color: $tableRowLight

.sgl-row-dark

• background-color: $tableRowDark

.sgl-blocks-left-item-title,

• background-color: $blocksBackgroundTitle
• color: $blocksColorTitle
• border-color: $blocksBorderTitle

.sgl-blocks-right-item-title

• background-color: $blocksBackgroundTitle
• color: $blocksColorTitle
• border-color: $blocksBorderTitle

.sgl-blocks-left-item-body

• background-color: $blocksBackgroundBody
• color: $blocksColorBody
• border-color: $blocksBorderBody

.sgl-blocks-right-item-body

• background-color: $blocksBackgroundBody
• color: $blocksColorBody
• border-color: $blocksBorderBody

h1.pageTitle

• color: $secondaryDark

.pageTitle

• color: $secondaryDark

a

• color: $secondaryMedium

a:visited

• color: $tertiaryDark

a:hover

• color: $secondaryDark

hr

• border-color: $tertiary

.error

• color: $errorTextMedium
• background-color: transparent

.primary

• background-color: $primary

.secondary

• background-color: $secondary

.title

• color: $tertiaryDark

.detail

• color: $tertiaryDark

.sectionHeader

• color: $sectionHeaderColor
• background-color: $sectionHeaderBackground

.colHeader

• color: $colHeaderColor
• background-color: $colHeaderBackground

.navigator

• color: $navigatorColor
• background-color: $navigatorBackground

.forApproval

• color: $forApproval

.approved

• color: $approved

.published

• color: $published

.archived

• color: $archived

.fieldName

• color: $secondaryDark
• background-color: $tertiaryLight

.fieldNameWrap

• color: $secondaryDark
• background-color: $tertiaryLight

.fieldValue

• background-color: $primaryTextLight

.newsItem

• background-color: $errorTextLight
• border-color: $tertiaryDark

fieldset

• color: $secondaryDark

legend

• color: $secondaryDark

.linkCrumbsAlt1

• color: $secondaryDark

.linkCrumbsAlt1:hover

• color: $secondaryDark

.pinstripe table

• background-color: $tertiaryLight

.pinstripe td

• background-color: $primaryTextLight

.pager

• background-color: $errorTextLight
• border-color: $errorDark

.errorHeader

• background-color: $error
• color: $errorTextLight

.errorContent

• background-color: $errorLight
• border-color: $errorDark
• border-top-color: $error

.errorMessage

• background-color: $errorLight
• border-color: $errorDark

.messageHeader

• color: $primaryText
• background-color: $primary

.messageContent

• color: $secondaryDark
• background-color: $primaryTextLight
• border-color: $primary

.bgnd

• background-color: $secondaryLight
• border-color: $tertiaryDark

span.tipOwner span.tipText

• border-color: $buttonBorderColors
• background-color: $tertiaryLight