| 1 | MAIN_HUE = MAIN_COLOR or 200 -- pick a number between 0 and 360 |
|---|---|
| 2 | STARTING_SATURATION = .7 -- pick a number between 0 and 1 |
| 3 | MAIN = colors.new(MAIN_HUE, STARTING_SATURATION, .50) |
| 4 | |
| 5 | SECOND, THIRD = MAIN:neighbors() -- MAIN:terciary() for more contrast |
| 6 | THIRD = SECOND -- stick with just one color |
| 7 | |
| 8 | GRAY = MAIN:desaturate_to(0) -- set value > 0 to make your "grays" lightly colored |
| 9 | LIGHT_GRAY = GRAY:tint(.7) -- higher number = lighter |
| 10 | LIGHTEST_GRAY = GRAY:tint(.9) -- higher number = lighter |
| 11 | DARK_GRAY = GRAY:shade(.7) -- higher nu mber = darker |
| 12 | WHITE = "white" |
| 13 | BLACK = "black" |
| 14 | |
| 15 | BODY_BG = BODY_BG_COLOR or MAIN:desaturate_to(0):tint(.3) |
| 16 | LINK = "#0000cc" -- darker blue |
| 17 | TEXT = BLACK |
| 18 | |
| 19 | NAVBAR = SECOND:desaturate_to(.7):shade(.1) |
| 20 | |
| 21 | MENU_TEXT = WHITE |
| 22 | MENU_TEXT_HOVER = "yellow" |
| 23 | MENU_BG = SECOND:shade(.5) |
| 24 | MENU_BG_HOVER = SECOND:shade(.4) |
| 25 | SUBMENU_CURRENT_BG = THIRD:shade(.2) |
| 26 | SUBMENU_CURRENT_BORDER = WHITE |
| 27 | SUBMENU_CURRENT_FG = WHITE |
| 28 | SUBMENU_BG = THIRD:shade(.2) |
| 29 | SUBMENU_BORDER = THIRD:tint(.3) |
| 30 | SUBMENU_FG = WHITE |
| 31 | |
| 32 | HEADER = THIRD:shade(.1) |
| 33 | H_LINE = THIRD:shade(.1) |
| 34 | |
| 35 | FORM_BG = SECOND:desaturate_to(.6):tint(.9) |
| 36 | FORM_BG_SUBMIT = SECOND:desaturate_to(.8):tint(.3) |
| 37 | FORM_BG_READONLY = SECOND:desaturate_to(.2):tint(.7) |
| 38 | FORM_BORDER = SECOND |
| 39 | INS = "#cfc" |
| 40 | |
| 41 | |
| 42 | CSS = [[ |
| 43 | |
| 44 | body { background: $BODY_BG; } |
| 45 | |
| 46 | #bd { background: $WHITE; BORDER: 1px solid $DARK_GRAY; } |
| 47 | #sidebar { border-right: 1px solid $NAVBAR; } |
| 48 | H1 { BORDER-BOTTOM: 4px solid $NAVBAR; } |
| 49 | H1.title A { color: black; } |
| 50 | H2 { COLOR: $HEADER; BORDER-BOTTOM: 4px solid $H_LINE; } |
| 51 | H3 { COLOR: $HEADER; BORDER-BOTTOM: 2px dotted $H_LINE; } |
| 52 | H4 { COLOR: $HEADER; BORDER-BOTTOM: 1px dotted $H_LINE; } |
| 53 | H5 { COLOR: $HEADER; } |
| 54 | ul#menu a { color: $MENU_TEXT; background: $MENU_BG; } |
| 55 | ul#menu li a:hover { color: $MENU_TEXT_HOVER; } |
| 56 | ul#menu li.front a { background: $NAVBAR; } |
| 57 | ul#menu li ul { background: $NAVBAR; } |
| 58 | ul#menu li ul li.front a { color: $WHITE; background: $SUBMENU_CURRENT_BG; BORDER: 2px solid $SUBMENU_CURRENT_BORDER; } |
| 59 | ul#menu li ul li.back a { color: $SUBMENU_FG; background: $SUBMENU_BG; BORDER: 1px solid $SUBMENU_BORDER; } |
| 60 | ul#menu li ul li a:hover { color: $MENU_TEXT_HOVER; } |
| 61 | |
| 62 | DEL { COLOR: $BLACK; background: $LIGHT_GRAY; } |
| 63 | INS { COLOR: $TEXT; background: $INS; } |
| 64 | A:link { COLOR: $LINK; } |
| 65 | A:visited { COLOR: $LINK; } |
| 66 | A:hover { COLOR: $LINK; } |
| 67 | A.no_such_node { background: #fffacd; } |
| 68 | |
| 69 | CODE { background: $LIGHTEST_GRAY; } |
| 70 | PRE { background: $LIGHTEST_GRAY; BORDER: 1px solid $LIGHT_GRAY; } |
| 71 | TH { background: $LIGHTEST_GRAY; BORDER: 1px solid $LIGHT_GRAY; } |
| 72 | TD { BORDER: 1px solid $LIGHT_GRAY; } |
| 73 | .preview { BORDER: 4px solid #666; } |
| 74 | .missing_page { background: $LIGHT_GRAY } |
| 75 | |
| 76 | |
| 77 | |
| 78 | |
| 79 | INPUT, SELECT { background: $FORM_BG; BORDER: 1px solid $FORM_BORDER; } |
| 80 | INPUT.readonly { background: $FORM_BG_READONLY; BORDER: 1px solid $FORM_BORDER; } |
| 81 | INPUT.checkbox { background: $FORM_BG; BORDER: 1px solid $FORM_BORDER; } |
| 82 | TEXTAREA { background: $FORM_BG; BORDER: 1px solid $FORM_BORDER; } |
| 83 | INPUT.submit { background: $FORM_BG_SUBMIT; BORDER: 1px outset $FORM_BORDER; } |
| 84 | A.button { background: $FORM_BG_SUBMIT; BORDER: 1px outset $FORM_BORDER; |
| 85 | color: black; text-decoration: none; |
| 86 | } |
| 87 | INPUT.small_submit { background: $FORM_BG_SUBMIT; BORDER: 1px outset $FORM_BORDER; } |
| 88 | .save input { background: #ffa20f; border: 2px outset #d7b9c9 } |
| 89 | |
| 90 | .error_message { BORDER: 2px solid red; } |
| 91 | .content .preview { BORDER: 3px dashed $NAV_BAR; } |
| 92 | ]] |
| 93 | |
Color Configuration
This Lua code parses correctly.