diff options
Diffstat (limited to 'view/theme/dispy/dark/_base.less')
| -rw-r--r-- | view/theme/dispy/dark/_base.less | 173 |
1 files changed, 173 insertions, 0 deletions
diff --git a/view/theme/dispy/dark/_base.less b/view/theme/dispy/dark/_base.less new file mode 100644 index 000000000..000cdbd5a --- /dev/null +++ b/view/theme/dispy/dark/_base.less @@ -0,0 +1,173 @@ +// _base.less +// +// the base file for dispy's dark "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; +@bg_alt_colour: #2e302e; +@med_bg_colour: #4e4f4e; +@menu_bg_colour: #555753; + +//* font colour, aka color: */ +@lt_main_colour: #ffff99; +@main_colour: #eeeecc; +@main_alt_colour: #eeeeee; +// darken(@main_alt_colour, 13%) > #cdcdcd +// darken(@main_alt_colour, 13.5%) > #cccccc +// darken(@main_alt_colour, 33%) > #9a9a9a +// darken(@main_alt_colour, 24%) > #b1b1b1 +// darken(@main_alt_colour, 27%) > #a9a9a9 +// darken(@main_alt_colour, 33.5%) > #999999 +// darken(@main_alt_colour, 40%) > #888888 +// darken(@main_alt_colour, 46.8%) > #777777 +// darken(@main_alt_colour, 53.5%) > #666666 +// darken(@main_alt_colour, 60%) > #555555 +// darken(@main_alt_colour, 66.5%) > #444444 +// darken(@main_alt_colour, 73.5%) > #333333 +// darken(@main_alt_colour, 80%) > #222222 +// darken(@main_alt_colour, 86.5%) > #111111 +@disabled_colour: #ddddbb; +@shiny_colour: #2e3436; +@red_orange: #ff2000; +@orange: #f8911b; +@lt_orange: #fcaf3e; +@shadow_colour: darken(@main_alt_colour, 86.5%); +@lt_shadow_colour: #888888; +@friendica_blue: #3465a4; +@border2: #babdb6; +@group_show: #9ade00; +@group_hide: #ff4141; +@notice: #3320bc; +@info: #1353b1; +@alert: #ff0000; + +@lt_main_colour: lighten(@bg_colour, 10%); +@dk_main_colour: darken(@bg_colour, 10%); + +//* links */ +@link_colour: #88a9d2; +@dk_link_colour: darken(@link_colour, 10%); +@lt_link_colour: lighten(@link_colour, 10%); +//@hover_colour: #729fcf; +@hover_colour: @dk_link_colour; + +// other colours +@med_border_colour: #c8bebe; + +//* box shadows */ +@menu_shadow: 5px 0 10px 0 @shadow_colour; +@main_shadow: 3px 3px 3px 10px 0 @shadow_colour; + +// 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: @shadow_colour) { + -moz-text-shadow: @h @v @c; + -o-text-shadow: @h @v @c; + -webkit-text-shadow: @h @v @c; + -ms-text-shadow: @h @v @c; + text-shadow: @h @v @c; +} +//* transitions */ +.transition (@type: all, @dur: 0.75s, @effect: ease-in-out) { + -webkit-transition: @arguments; + -moz-transition: @arguments; + -o-transition: @arguments; + -ms-transition: @arguments; + transition: @arguments; +} + +//* borders */ +.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; + -webkit-border-radius: @r; + -moz-border-radius: @r; + -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: none; +} +//* font size sizing */ +.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 () { + margin: 0px; + padding: 0px; + list-style: none; + list-style-position: inside; +} + +//* box size: width, height */ +.box (@w: 20px, @h: 20px) { + width: @w; + height: @h; +} + |