r1 - 09 Mar 2007 - 14:48:50 - MikelPenagarikanoYou are here: TWiki >  TWiki Web  >  SautrelaResources > OriginalColors

Original Color CSS

CONSTANTS

Text colors

  • Set T1 = #000
    • ██ text color
  • Set T2 = #06c
    • ██ link color
  • Set T3 = #FBF7E8
    • ██ link hover text color
  • Set T4 = #D6000F
    • ██ link action button color (red) (same as BG2)
  • Set T5 = #a00
    • ██ header color
  • Set T6 = #7A4707
    • ██ code text, left bar text
  • Set T7 = #666
    • ██ muted (dark gray) text
  • Set T8 = #8E9195
    • ██ grayed out text
  • Set T9 = #f00
    • ██ alert
  • Set T10 = #049804
    • ██ green 'new'
  • Set T11 = #333
    • ██ dark gray

Background colors

  • Set BG1 = #fff
    • ██ white; attachment, form table background
  • Set BG2 = #D6000F
    • ██ link hover background color (red)
  • Set BG3 = #efefef
    • ██ light gray
  • Set BG4 = #ffc
    • ██ active form field (not implemented yet)
  • Set BG5 = #ECF4FB
    • ██ info background very light blue (placeholder for background image)
  • Set BG6 = #FBF7E8
    • ██ patternTopicAction light yellow (same as T3)
  • Set BG7 = #FDFAF1
    • ██ header background (very light yellow)
  • Set BG8 = #ccc
    • ██ accent on sorted table column
  • Set BG9 = #FEFBF3
    • ██ light yellow; attachment, form background
  • Set BG10 = #ECFADC
    • ██ light green 'new'
  • Set BG11 = #8E9195
    • ██ dark gray; diff header background (same as T8)
  • Set BG12 = #FED764
    • ██ dark yellow, submit button
  • Set BG13 = #F6FAFD
    • ██ light blue: form steps (NOT USED)
  • Set BG14 = #F9FCFE
    • ██ lighter blue: left bar (NOT USED)

Border colors

  • Set BO1 = #efefef
    • ██ light gray
  • Set BO2 = #88B6CF
    • ██ submit button border blue ('active') (NOT USED)
  • Set BO3 = #D5E6F3
    • ██ info light blue border
  • Set BO4 = #E2DCC8
    • ██ border color beige, header h2 bottom border
  • Set BO5 = #E9E4D2
    • ██ header h3..h6 bottom border (75% of BO4)
  • Set BO6 = #aaa
    • ██ darker gray
  • Set BO7 = #ccc
    • ██ neutral gray border
  • Set BO8 = #ddd
    • ██ light neutral gray
  • Set BO9 = #f00
    • ██ alert border
  • Set BO10 = #8E9195
    • ██ dark gray (same as BG11)

CCS File




/* LAYOUT ELEMENTS */

#patternTopBar {
	background-color:#fff; /*BG1*/
	border-color:#ccc;
}
#patternMain { /* don't set a background here; use patternOuter */ 
   background-color:#fff; /*BG1*/
}
#patternOuter {
	background-color:#fff; /*BG1*/ /*** Sets background of center col***/
	border-color:#ccc;
}
#patternLeftBar, #patternLeftBarContents { /* don't set a background here; use patternWrapper */ }
#patternWrapper {
	background-color:#F6FAFD; /*BG13*/
}
#patternBottomBar {
	background-color:#fff; /*BG1*/
	border-color:#ccc;
}
#patternBottomBarContents,
#patternBottomBarContents a:link,
#patternBottomBarContents a:visited {
	color:#8E9195;	/*T8*/
}

/* GENERAL HTML ELEMENTS */

html body {
	background-color:#fff; /*BG1*/
	color:#000; /*T1*/
}
/* be kind to netscape 4 that doesn't understand inheritance */
body, p, li, ul, ol, dl, dt, dd, acronym, h1, h2, h3, h4, h5, h6 {
	background-color:transparent;
}
hr {
	color:#ccc; /*BO7*/
	background-color:#ccc; /*BG8*/
}
pre, code, tt {
	color:#7A4707; /*T6*/
}
h1, h2, h3, h4, h5, h6 {
	color:#a00; /*T5*/
}
h1 a:link,
h1 a:visited {
	color:#a00; /*T5*/
}
h1 a:hover {
	color:#FBF7E8; /*T3*/
}
h2 {
	background-color:#FDFAF1;
	border-color:#E2DCC8; /*BO4*/
}
h3, h4, h5, h6 {
	border-color:#E9E4D2; /*BO5*/
}
/* to override old Render.pm coded font color style */
.twikiNewLink font {
	color:inherit;
}
.twikiNewLink a:link sup,
.twikiNewLink a:visited sup {
	color:#666; /*T7*/
	border-color:#ddd; /*BO8*/
}
.twikiNewLink a:hover sup {
	background-color:#D6000F; /*BG2*/
	color:#FBF7E8; /*C3*/
	border-color:#D6000F; /*BG2*/ /* (part of bg) */
}
.twikiNewLink {
	border-color:#ddd; /*BO8*/
}
:link:focus,
:visited:focus,
:link,
:visited,
:link:active,
:visited:active {
	color:#06c; /*T2*/;
	background-color:transparent;
}
:link:hover,
:visited:hover {
	color:#FBF7E8; /*C3*/
	background-color:#D6000F; /*BG2*/
}
:link:hover img,
:visited:hover img {
	background:#fff; /*BG1*/
}
.patternTopic a:visited {
	color:#666; /*T7*/
}
.patternTopic a:hover {
	color:#FBF7E8; /*C3*/
}

/* Form elements */

textarea,
input,
select {
	border-color:#aaa; /*BO6*/
}
.twikiSubmit,
.twikiButton {
	border-color:#ddd #aaa #aaa #ddd;
	color:#333;
	background-color:#fff; /*BG1*/
}
.twikiSubmit:active,
.twikiButton:active {
	border-color:#999 #ccc #ccc #999;
	color:#000;
}
.twikiSubmitDisabled,
.twikiSubmitDisabled:active {
	border-color:#ddd;
	color:#ccc;
	background-color:#f5f5f5;
}
.twikiInputField,
.twikiSelect {
	border-color:#aaa #ddd #ddd #aaa;
	color:#000;
	background-color:#fff; /*BG1*/
}
.twikiInputFieldDisabled {
	color:#666; /*T7*/
}

/*	-----------------------------------------------------------
	Plugin elements
	-----------------------------------------------------------	*/

/* TablePlugin */
.twikiTable,
.twikiTable td,
.twikiTable th {
	border-color:#ccc; /*BO7*/
}
.twikiTable th a:link,
.twikiTable th a:visited,
.twikiTable th a font {
	color:#06c; /*T2*/
}
.twikiTable th a:hover,
.twikiTable th a:hover font {
	background-color:transparent;
	color:#D6000F; /*T4*/
	border-color:#D6000F; /*T4*/
}

/* TablePlugin - sorting of table columns */
.patternTopic th.twikiSortedAscendingCol,
.patternTopic th.twikiSortedDescendingCol {
	background-color:#ccc; /*BG8*/
}
th.twikiSortedAscendingCol a:link,
th.twikiSortedAscendingCol a:link font,
th.twikiSortedAscendingCol a:visited,
th.twikiSortedAscendingCol a:visited font,
th.twikiSortedDescendingCol a:link,
th.twikiSortedDescendingCol a:link font,
th.twikiSortedDescendingCol a:visited,
th.twikiSortedDescendingCol a:visited font {
	border-color:#666; /*T7*/
}
th.twikiSortedAscendingCol a:hover,
th.twikiSortedAscendingCol a:hover font,
th.twikiSortedDescendingCol a:hover,
th.twikiSortedDescendingCol a:hover font {
	border-color:#D6000F; /*T4*/
}

/* TwistyContrib */
.twistyPlaceholder {
	color:#8E9195; /*T8*/
}
a:hover.twistyTrigger {
	color:#FBF7E8; /*T3*/
}

/* TipsContrib */
.tipsOfTheDay {
	background-color:#ECF4FB; /*BG5*/
}
.patternTopic .tipsOfTheDayHeader {
	color:#333; /*T11*/
}
/* TipsContrib - in left bar */
#patternLeftBar .tipsOfTheDay a:link,
#patternLeftBar .tipsOfTheDay a:visited {
	color:#a00; /*T5*/
}
#patternLeftBar .tipsOfTheDay a:hover {
	color:#FBF7E8; /*T3*/
}

/* RevCommentPlugin */
.revComment .patternTopicAction {
	background-color:#FDFBF4;
}

/*	-----------------------------------------------------------
	TWiki styles
	-----------------------------------------------------------	*/

.twikiGrayText {
	color:#8E9195; /*T8*/
}
.twikiGrayText a:link,
.twikiGrayText a:visited {
	color:#8E9195; /*T8*/
}
.twikiGrayText a:hover {
	color:#FBF7E8; /*C3*/
}

table.twikiFormTable th.twikiFormTableHRow,
table.twikiFormTable td.twikiFormTableRow {
	color:#666; /*T7*/
}
.twikiEditForm {
	color:#000; /*T1*/
}
.twikiEditForm .twikiFormTable th,
.twikiEditForm .twikiFormTable td {
	border-color:#ddd; /*BO8*/
}
.twikiEditForm .twikiFormTable td  {
#	background-color:#F6F8FC;
}
.twikiEditForm .twikiFormTable th {
	background-color:#ECF4FB; /*BG5*/
}
.patternContent .twikiAttachments,
.patternContent .twikiForm {
	background-color:#FEFBF3; /*BG9*/
	border-color:#E2DCC8; /*BO4*/
}
.twikiAttachments table,
table.twikiFormTable {
	border-color:#ccc; /*BO7*/
	background-color:#fff; /*BG1*/
}
.twikiAttachments table {
	background-color:#fff; /*BG1*/
}
.twikiAttachments td, 
.twikiAttachments th {
	border-color:#ccc;
}
.twikiAttachments th/*,
table.twikiFormTable th.twikiFormTableHRow*/ {
	background-color:#fff; /*BG1*/
}
.twikiAttachments td {
	background-color:#fff; /*BG1*/
}
.twikiAttachments th a:link,
.twikiAttachments th a:visited,
table.twikiFormTable th.twikiFormTableHRow a:link,
table.twikiFormTable th.twikiFormTableHRow a:visited {
	color:#06c; /*T2*/
}
.twikiAttachments th font,
table.twikiFormTable th.twikiFormTableHRow font {
	color:#06c; /*T2*/
}
.twikiAttachments th a:hover,
table.twikiFormTable th.twikiFormTableHRow a:hover {
	border-color:#06c; /*T2*/
	background-color:transparent;
}
.twikiAttachments th.twikiSortedAscendingCol,
.twikiAttachments th.twikiSortedDescendingCol {
	background-color:#efefef; /*BG3*/
}
.twikiFormSteps {
	background-color:#F6FAFD; /*BG13*/
	border-color:#E2DCC8;
}
.twikiFormStep {
	border-color:#E2DCC8;
}
.twikiFormStep h3,
.twikiFormStep h4 {
	background-color:transparent;
}
.twikiToc .twikiTocTitle {
	color:#666; /*T7*/
}
.twikiBroadcastMessage {
	background-color:yellow;
}
.twikiBroadcastMessage b,
.twikiBroadcastMessage strong {
	color:#f00; /*T9*/
}
.twikiAlert,
.twikiAlert code {
	color:#f00; /*T9*/
}
.twikiEmulatedLink {
	color:#06c; /*T2*/
}
.twikiPageForm table {
	border-color:#ddd; /*BO8*/
	background:#fff; /*BG1*/
}
.twikiPageForm hr {
	border-color:#efefef; /*BO1*/
	background-color:#efefef; /*BG3*/
	color:#efefef; /*BO1*/
}
.twikiHelp {
	background-color:#ECF4FB; /*BG5*/
	border-color:#D5E6F3; /*BO3*/
}
.twikiAccessKey {
	color:inherit;
	border-color:#8E9195; /*BO10*/
}
a:link .twikiAccessKey,
a:visited .twikiAccessKey,
a:hover .twikiAccessKey {
	color:inherit;
}


/*	-----------------------------------------------------------
	Pattern skin specific elements
	-----------------------------------------------------------	*/
#patternPage {
	background-color:#fff; /*BG1*/
}
/* Left bar */
#patternLeftBarContents {
	color:#666; /*T7*/
}
#patternLeftBarContents .patternWebIndicator {
	color:#000; /*T1*/
}
#patternLeftBarContents .patternWebIndicator a:link,
#patternLeftBarContents .patternWebIndicator a:visited {
	color:#000; /*T1*/
}
#patternLeftBarContents .patternWebIndicator a:hover {
	color:#FBF7E8; /*T3*/
}
#patternLeftBarContents hr {
	color:#E2DCC8; /*BO4*/
	background-color:#E2DCC8; /*BO4*/
}
#patternLeftBarContents a:link,
#patternLeftBarContents a:visited {
	color:#7A4707; /*T6*/
}
#patternLeftBarContents a:hover {
	color:#FBF7E8; /*C3*/
}
#patternLeftBarContents b,
#patternLeftBarContents strong {
	color:#333; /*T11*/
}
#patternLeftBarContents .patternChangeLanguage {
	color:#8E9195; /*T8*/
}
#patternLeftBarContents .patternLeftBarPersonal {
	border-color:#D9EAF6;
}
#patternLeftBarContents .patternLeftBarPersonal a:link,
#patternLeftBarContents .patternLeftBarPersonal a:visited {
	color:#06c; /*T2*/;
}
#patternLeftBarContents .patternLeftBarPersonal a:hover {
	color:#FBF7E8; /*C3*/
	background-color:#D6000F; /*BG2*/
}
.patternSeparator {
	font-family:monospace;
}
.patternTopicActions {
	border-color:#E2DCC8; /*BO4*/
}
.patternTopicAction {
	color:#666; /*T7*/
	border-color:#E2DCC8; /*BO4*/
	background-color:#FBF7E8;
}
.patternTopicAction .twikiSeparator {
	color:#aaa;
}
.patternActionButtons a:link,
.patternActionButtons a:visited {
	color:#D6000F; /*T4*/
}
.patternActionButtons a:hover {
	color:#FBF7E8; /*C3*/
}
.patternTopicAction .twikiAccessKey {
	border-color:#C75305;
}
.patternTopicAction label {
	color:#000; /*T1*/
}
.patternHelpCol {
	color:#8E9195; /*T8*/
}
.patternFormFieldDefaultColor {
	/* input fields default text color (no user input) */
	color:#8E9195; /*T8*/
}

.patternToolBar .patternButton s,
.patternToolBar .patternButton strike,
.patternToolBar .patternButton a:link,
.patternToolBar .patternButton a:visited {
	border-color:#E2DCC8; /*BO4*/
	background-color:#fff; /*BG1*/
}
.patternToolBar .patternButton a:link,
.patternToolBar .patternButton a:visited {
	color:#666; /*T7*/
}
.patternToolBar .patternButton s,
.patternToolBar .patternButton strike {
	color:#ccc;
	border-color:#e0e0e0;
	background-color:#fff; /*BG1*/
}
.patternToolBar .patternButton a:hover {
	background-color:#D6000F; /*BG2*/
	color:#FBF7E8; /*C3*/
	border-color:#D6000F; /*T4*/
}
.patternToolBar .patternButton img {
	background-color:transparent;
}	
.patternToolBarBottom {
	border-color:#E2DCC8; /*BO4*/
}
.patternToolBar a:link .twikiAccessKey,
.patternToolBar a:visited .twikiAccessKey {
	color:inherit;
	border-color:#666; /*T7*/
}
.patternToolBar a:hover .twikiAccessKey {
	background-color:transparent;
	color:inherit;
}

.patternRevInfo,
.patternRevInfo a:link,
.patternRevInfo a:visited {
	color:#8E9195; /*T8*/
}
.patternRevInfo a:hover {
	color:#FBF7E8; /*C3*/
}

.patternMoved,
.patternMoved a:link,
.patternMoved a:visited {
	color:#8E9195; /*T8*/
}
.patternMoved a:hover {
	color:#FBF7E8; /*T3*/
}
.patternSaveHelp {
	background-color:#fff; /*BG1*/
}

/* WebSearch, WebSearchAdvanced */
table#twikiSearchTable th,
table#twikiSearchTable td {
	background-color:#fff; /*BG1*/
	border-color:#ddd; /*BO8*/
} 
table#twikiSearchTable th {
	color:#8E9195; /*T8*/
}
table#twikiSearchTable td.first {
	background-color:#efefef; /*BG3*/
}

/*	-----------------------------------------------------------
	Search results
	styles and overridden styles used in search.pattern.tmpl
	-----------------------------------------------------------	*/

h3.patternSearchResultsHeader,
h4.patternSearchResultsHeader {
	background-color:#FEFBF3; /*BG9*/
	border-color:#ccc; /*BO7*/
}
h4.patternSearchResultsHeader {
	color:#000;
}
.patternNoViewPage h4.patternSearchResultsHeader {
	color:#a00; /*T5*/
}
.patternSearchResult .twikiBottomRow {
	border-color:#ddd; /*BO8*/
}
.patternSearchResult .twikiAlert {
	color:#f00; /*T9*/
}
.patternSearchResult .twikiSummary .twikiAlert {
	color:#900; /*C5*/
}
.patternSearchResult .twikiNew {
	background-color:#ECFADC; /*BG10*/
	border-color:#049804; /*T10*/
	color:#049804; /*T10*/
}
.patternViewPage .patternSearchResultsBegin {
	border-color:#ddd; /*BO8*/
}

/* Search results in book view format */

.patternBookView .twikiTopRow {
	background-color:transparent; /* set to WEBBGCOLOR in css.pattern.tmpl */
	color:#666; /*T7*/
}
.patternBookView .twikiBottomRow {
	border-color:#ddd; /*BO8*/
}
.patternBookView .patternSearchResultCount {
	color:#8E9195; /*T8*/
}

/* oopsmore.pattern.tmpl */

table.patternDiffOptions img {
	border-color:#ccc; /*BO7*/
}

/* edit.pattern.tmpl */

.patternEditPage textarea#topic {
	background-color:#fff; /*BG1*/
}
.twikiChangeFormButton .twikiButton,
.twikiChangeFormButtonHolder .twikiButton {
	color:#06c; /*T2*/
	background:none;
}
.patternSig input {
	color:#8E9195; /*T8*/
	background-color:#fff; /*BG1*/
}

/* preview.pattern.tmpl */

.patternPreviewArea {
	border-color:#f00; /*BO9*/
	background-color:#fff; /*BG1*/
}

/* rdiff.pattern.tmpl */

.patternDiff {
	border-color:#ccc;
}
.patternDiff h4.patternSearchResultsHeader {
	background-color:#ccc;
}
tr.twikiDiffDebug td {
	border-color:#ddd; /*BO8*/
}
.patternDiffPage .twikiDiffTable th {
	background-color:#eee;
}
tr.twikiDiffDebug .twikiDiffChangedText,
tr.twikiDiffDebug .twikiDiffChangedText {
#	background:#99ff99; /* green */
}
/* Deleted */
tr.twikiDiffDebug .twikiDiffDeletedMarker,
tr.twikiDiffDebug .twikiDiffDeletedText {
	background-color:#f99;
}
/* Added */
tr.twikiDiffDebug .twikiDiffAddedMarker,
tr.twikiDiffDebug .twikiDiffAddedText {
	background-color:#ccf;
}
/* Unchanged */
tr.twikiDiffDebug .twikiDiffUnchangedText {
	color:#8E9195; /*T8*/
}
/* Headers */
.twikiDiffChangedHeader,
.twikiDiffDeletedHeader,
.twikiDiffAddedHeader {
	background-color:#ccc;
}
/* Unchanged */
.twikiDiffUnchangedTextContents { }
.twikiDiffLineNumberHeader {
	background-color:#eee;
}


-- MikelPenagarikano - 09 Mar 2007

toggleopenShow attachmentstogglecloseHide attachments
Topic attachments
I Attachment Action Size Date Who Comment
elsecss Colors.css manage 12.7 K 09 Mar 2007 - 14:48 MikelPenagarikano Generated by AttachContentPlugin
Edit | Attach | Printable | Raw View | Backlinks: Web, All Webs | History: r1 | More topic actions
 
Powered by TWiki
This site is powered by the TWiki collaboration platformCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.OriginalColors