diff options
Diffstat (limited to 'view/theme/dispy/light/_base.less')
| -rw-r--r-- | view/theme/dispy/light/_base.less | 113 |
1 files changed, 89 insertions, 24 deletions
diff --git a/view/theme/dispy/light/_base.less b/view/theme/dispy/light/_base.less index 35a539acc..56fd2838d 100644 --- a/view/theme/dispy/light/_base.less +++ b/view/theme/dispy/light/_base.less @@ -1,48 +1,98 @@ -//* -//* _base.less -//* -//* +// _base.less +// +// the base file for dispy's light "sub-theme". +// +// Notes: +// this is used to define mixins (think of them as functions) +// and variables. the mixins are the ".foo () {}" things, vars are +// like "@bar". +// +// (BTW, this will make it a LOT easier to maintain.) +// +// Dev. Note: the // style comments don't show up at all when +// you "compile" the css (with `lessc`), but css (/**/) comments +// do. i use them to our advantage :). + +// import our reset styles first +@import "../css/reset"; //* backgrounds */ -@dk_bg_colour: #1d1f1d; -@bg_colour: #2e2f2e; +@dk_bg_colour: #2e3436; +@bg_colour: #eeeeec; @bg_alt_colour: #2e302e; -@med_bg_colour: #4e4f4f; +@med_bg_colour: #4e4f4e; @menu_bg_colour: #555753; - //* font colour, aka color: */ @lt_main_colour: #ffff99; -@main_colour: #eeeecc; -@main_alt_colour: #eeeeee; -@disabled_colour: #ddddbb; -@shiny_colour: #2e3436; +@main_colour: #111; +@main_alt_colour: #999999; +// darken(@main_alt_colour, 10%) > #777777 +// darken(@main_alt_colour, 20%) > #666666 +// darken(@main_alt_colour, 26.8%) > #555555 +// darken(@main_alt_colour, 33.5%) > #444444 +// darken(@main_alt_colour, 40%) > #333333 +// +// lighten(@main_alt_colour, 20%) > #cccccc +@disabled_colour: #dddddd; +@shiny_colour: #f2f2c3; +@red_orange: #ff2000; +@orange: #f8911b; +@lt_orange: #fcaf3e; +@shadow_colour: @main_colour; +@lt_shadow_colour: #888888; +@friendica_blue: #3465a4; +@border2: #babdb6; +@group_show: #9ade00; +@group_hide: #ff4141; +@notice: #511919; +@info: #364e59; +@alert: #ff0000; @lt_main_colour: lighten(@bg_colour, 10%); @dk_main_colour: darken(@bg_colour, 10%); //* links */ -@link_colour: #88a9d2; +@link_colour: #3465a4; @dk_link_colour: darken(@link_colour, 10%); @lt_link_colour: lighten(@link_colour, 10%); //@hover_colour: #729fcf; -@hover_colour: darken(@link_colour, 10%); +@hover_colour: @dk_link_colour; + +// other colours +@med_border_colour: #babdd6; //* box shadows */ -@menu_shadow: 5px 0 10px 0 #111; -@main_shadow: 3px 3px 3px 10px 0 #111; +@menu_shadow: 5px 0 10px 0 @shadow_colour; +@main_shadow: 3px 3px 3px 10px 0 @shadow_colour; -// default here is @main_shadow -.box_shadow(@h: 5px, @v: 5px, @blur: 5px, @spread: 0px, @colour: #111) { +// default here was @main_shadow +.box_shadow(@h: 5px, @v: 5px, @blur: 5px, @spread: 0px, @colour: @shadow_colour) { -moz-box-shadow: @h @v @blur @spread @colour; -o-box-shadow: @h @v @blur @spread @colour; -webkit-box-shadow: @h @v @blur @spread @colour; -ms-box-shadow: @h @v @blur @spread @colour; box-shadow: @h @v @blur @spread @colour; } +//* http://css-tricks.com/snippets/css/css-box-shadow/ +//* box-shadow: +//* 1. The horizontal offset of the shadow, positive means +//* the shadow will be on the right of the box, a negative +//* offset will put the shadow on the left of the box. +//* 2. The vertical offset of the shadow, a negative one +//* means the box-shadow will be above the box, a +//* positive one means the shadow will be below the box. +//* 3. The blur radius (optional), if set to 0 the shadow +//* will be sharp, the higher the number, the more blurred +//* it will be. +//* 4. The spread radius (optional), positive values increase +//* the size of the shadow, negative values decrease the size. +//* Default is 0 (the shadow is same size as blur). +//* 5. Colo[u]r +//*/ //* text-shadow */ -.text_shadow (@h: 1px, @v: 1px, @c: #111) { +.text_shadow (@h: 1px, @v: 1px, @c: @shadow_colour) { -moz-text-shadow: @h @v @c; -o-text-shadow: @h @v @c; -webkit-text-shadow: @h @v @c; @@ -50,7 +100,7 @@ text-shadow: @h @v @c; } //* transitions */ -.transition (@type: all, @dur: 0.5s, @effect: ease-in-out) { +.transition (@type: all, @dur: 0.75s, @effect: ease-in-out) { -webkit-transition: @arguments; -moz-transition: @arguments; -o-transition: @arguments; @@ -62,7 +112,9 @@ .borders (@size: 1px, @style: solid, @colour: @main_colour) { border: @size @style @colour; } - +.med_borders (@sz: 2px, @st: solid, @c: @med_border_colour) { + border: @sz @st @c; +} //* rounded box corners */ .rounded_corners (@r: 5px) { -o-border-radius: @r; @@ -71,19 +123,32 @@ -ms-border-radius: @r; border-radius: @r; } +.text_overflow (@t: ellipsis) { + -moz-text-overflow: @t; + -ms-text-verflow: @t; + -o-text-overflow: @t; + -webkit-text-overflow: @t; + text-overflow: @t; +} //* pre wrap */ .wrap () { white-space: pre-wrap; white-space: pre; - word-wrap: break-word; + word-wrap: none; } //* font size sizing */ -.default_font_size () { - font-size: 16px; +.default_font () { + font-size: 14pt; line-height: 1.1em; font-family: sans-serif; } +.font_size_adjust () { + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + -o-text-size-adjust: 100%; + font-size-adjust: 100%; +} //* reset ul, ol */ .list_reset () { |