From 719c4fab572ee28fbccdf42246975de610d83a8c Mon Sep 17 00:00:00 2001 From: Dale Price Date: Sat, 8 Jun 2013 18:43:17 -0500 Subject: [PATCH] Define brand image in CSS instead of an tag to allow it to be styled; add high resolution tentacle brand image for retina/high-res displays; create non-clashing light version of tentacle brand image to be used when darker custom colors are chosen in settings --- octoprint/static/css/octoprint.less | 37 ++++++++++++++++-- octoprint/static/img/tentacle-20x20-light.png | Bin 0 -> 780 bytes .../static/img/tentacle-20x20-light@2x.png | Bin 0 -> 1733 bytes octoprint/static/img/tentacle-20x20@2x.png | Bin 0 -> 1422 bytes octoprint/templates/index.jinja2 | 2 +- 5 files changed, 34 insertions(+), 5 deletions(-) create mode 100644 octoprint/static/img/tentacle-20x20-light.png create mode 100644 octoprint/static/img/tentacle-20x20-light@2x.png create mode 100644 octoprint/static/img/tentacle-20x20@2x.png diff --git a/octoprint/static/css/octoprint.less b/octoprint/static/css/octoprint.less index f030628..6e0b969 100644 --- a/octoprint/static/css/octoprint.less +++ b/octoprint/static/css/octoprint.less @@ -5,7 +5,6 @@ body { } .navbar-inner-text (@base) { - @text-color: contrast(@base, #333333, #f2f2f2); text-shadow: 0 1px 0 contrast(@base, lighten(@base, 15%), darken(@base, 15%)); color: @text-color; @caret-color: average(@base, @text-color); @@ -22,9 +21,32 @@ body { } } +.brand (@color, @dark, @light) when (@color = @dark) { + span { + background-image: url(../img/tentacle-20x20.png); + + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + background-image: url(../img/tentacle-20x20@2x.png); + } + } +} +.brand (@color, @dark, @light) when (@color = @light) { + span { + background-image: url(../img/tentacle-20x20-light.png); + + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + background-image: url(../img/tentacle-20x20-light@2x.png); + } + } +} + .navbar-inner-color (@base) { @top: lighten(@base, 25%); @bottom: darken(@base, 15%); + + @text-color-light: #f2f2f2; + @text-color-dark: #333333; + @text-color: contrast(@base, @text-color-dark, @text-color-light); background-color: @base; /* fallback color if gradients are not supported */ background-image: -webkit-linear-gradient(top, @top, @bottom); /* For Chrome and Safari */ @@ -36,6 +58,10 @@ body { .brand, .nav>li>a { .navbar-inner-text(@base); } + + .brand { + .brand(@text-color, @text-color-dark, @text-color-light); + } .nav { li.dropdown.open>.dropdown-toggle, li.dropdown.active>.dropdown-toggle, li.dropdown.open.active>.dropdown-toggle { @@ -78,9 +104,12 @@ body { @base: #7728FF; .navbar-inner-color(@base); } - - .brand img { - vertical-align: bottom; + + .brand span { + background-size: 20px 20px; + background-position: left center; + padding-left: 24px; + background-repeat: no-repeat; } } diff --git a/octoprint/static/img/tentacle-20x20-light.png b/octoprint/static/img/tentacle-20x20-light.png new file mode 100644 index 0000000000000000000000000000000000000000..555f4de592afc64ff6d1f39c3a5c91606e76cead GIT binary patch literal 780 zcmV+n1M~ceP)^LbA!C5J(|05t1Nk;+rSd%sk(F^WHr!d{csyOoX1z<(~WTyWctIUf>l6FFI7! zTCdl88^Bwt`Wk@0RrSYyzyGY$={&zQ@ZjK}83e&Yk{^pyEMi$ zNIu!z+`Juzp#y+045i!cCIAuukHRqg8o6dm=JXHJm3WC(n1 zU@s~hfzFi-lA{4ZL>{cKuh;(%@b}TiIR|SkthJ+GpvIWjec%76l8o)87-Nn{Vv^2U zd!^B63<0QCy%3Sl0bqG~S;hhfgTbD2E*m*4iUL6plx10}=Xs*4g^0{Q`P16YxaUvqB zdY0#TXK86Ey3ip2sOk^ZUID-uW9#+0s_KhrlWdTD=Q1u|Y5W5>Wkw5%QVK5s0000< KMNUMnLSTZV>VV<^ literal 0 HcmV?d00001 diff --git a/octoprint/static/img/tentacle-20x20-light@2x.png b/octoprint/static/img/tentacle-20x20-light@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..c7b2d926f692e393d41602e92de9d58dba2ea3d1 GIT binary patch literal 1733 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 literal 0 HcmV?d00001 diff --git a/octoprint/templates/index.jinja2 b/octoprint/templates/index.jinja2 index 4c13837..86d167b 100644 --- a/octoprint/templates/index.jinja2 +++ b/octoprint/templates/index.jinja2 @@ -34,7 +34,7 @@