About the CSS Palette

Please note: This is for versions 0.5 and higher, not for 0.4.x releases

Table of Contents

  1. www/themes/default/css/style.php
    1. seagull palette:
    2. all:
    3. header:
    4. tables:
    5. left & right blocks:
    6. headings:
    7. anchors:
    8. miscellaneous:
    9. publisher:
    10. Article Manager:
    11. Legacy:
    12. Links:
    13. Various:
    14. Tooltips:

The aim of this page is documenting the work on a standard seagull palette. How can we reach this goal? We have to work on two sides:

  • guarantee that the presentation layer (and so the colours) are defined only in css stylesheets
  • define and use only colours in php variables

What benefits will we have?

  • a standard palette can provide a standard and consistent layout over the whole framework/application.
  • customizing the standard stylesheet will be easy and clean

In the end I'd like to have something like this: http://wiki.kde.org/tiki-index.php?page=Colors

Currently we have 21 unique colours (white excluded), MS and GNOME 30, KDE 42.

www/themes/default/css/style.php

seagull palette:

$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';

all:

body

  • color: $tertiaryDarker
  • background: $primaryTextLight

header:

#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

tables:

th

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

#imRead

  • background-color: $tertiaryMedium

.sgl-row-light

  • background-color: $tableRowLight

.sgl-row-dark

  • background-color: $tableRowDark

left & right blocks:

.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

headings:

h1.pageTitle

  • color: $secondaryDark

.pageTitle

  • color: $secondaryDark

anchors:

a

  • color: $secondaryMedium

a:visited

  • color: $tertiaryDark

a:hover

  • color: $secondaryDark

miscellaneous:

hr

  • border-color: $tertiary

.error

  • color: $errorTextMedium
  • background-color: transparent

.primary

  • background-color: $primary

.secondary

  • background-color: $secondary

.title

  • color: $tertiaryDark

.detail

  • color: $tertiaryDark

publisher:

.sectionHeader

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

.colHeader

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

.navigator

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

Article Manager:

.forApproval

  • color: $forApproval

.approved

  • color: $approved

.published

  • color: $published

.archived

  • color: $archived

Legacy:

.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

Links:

.linkCrumbsAlt1

  • color: $secondaryDark

.linkCrumbsAlt1:hover

  • color: $secondaryDark

Various:

.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

Tooltips:

span.tipOwner span.tipText

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