rework some theme code, particlefield now adapts color

This commit is contained in:
Yuki 2015-07-29 20:38:07 +05:30
parent 9ef71a84e9
commit 3444fcc93e
5 changed files with 37 additions and 58 deletions

View File

@ -39,6 +39,7 @@ gem 'fog'
gem 'fog-aws' gem 'fog-aws'
gem 'momentjs-rails', '>= 2.9.0' gem 'momentjs-rails', '>= 2.9.0'
gem 'bootstrap3-datetimepicker-rails', '~> 4.7.14' gem 'bootstrap3-datetimepicker-rails', '~> 4.7.14'
gem 'tiny-color-rails'
gem 'twemoji-rails' gem 'twemoji-rails'

View File

@ -435,6 +435,8 @@ GEM
tilt (1.4.1) tilt (1.4.1)
timers (4.0.1) timers (4.0.1)
hitimes hitimes
tiny-color-rails (0.0.2)
railties (>= 3.0)
tumblr_client (0.8.5) tumblr_client (0.8.5)
faraday (~> 0.9.0) faraday (~> 0.9.0)
faraday_middleware (~> 0.9.0) faraday_middleware (~> 0.9.0)
@ -545,6 +547,7 @@ DEPENDENCIES
spring (~> 1.3.5) spring (~> 1.3.5)
sweetalert-rails sweetalert-rails
thin thin
tiny-color-rails
tumblr_client tumblr_client
turbolinks turbolinks
twemoji-rails twemoji-rails

View File

@ -14,6 +14,7 @@
#= require js.cookie #= require js.cookie
#= require i18n #= require i18n
#= require i18n/translations #= require i18n/translations
#= require tinycolor-min
# local requires to be seen by everyone: # local requires to be seen by everyone:
#= require_tree ./answerbox #= require_tree ./answerbox
#= require_tree ./questionbox #= require_tree ./questionbox
@ -28,6 +29,7 @@
#= require user #= require user
#= require report #= require report
#= require locale-box #= require locale-box
#= require util
# not required: # not required:
# _tree ./moderation # _tree ./moderation
@ -62,9 +64,13 @@ _ready = ->
sweetAlertInitialize() sweetAlertInitialize()
if document.getElementById('particles')? if document.getElementById('particles')?
jumbo = $ '.j2-jumbo'
bodyColorOrig = jumbo.css 'background-color'
bodyColor = doppler 0.25, bodyColorOrig
console.log bodyColor, bodyColorOrig
particleground document.getElementById('particles'), particleground document.getElementById('particles'),
dotColor: '#5e35b1' dotColor: bodyColor
lineColor: '#5e35b1' lineColor: bodyColor
if twemoji? if twemoji?
twemoji.parse document.body, twemoji.parse document.body,

View File

@ -0,0 +1,21 @@
window.doppler = (percentage, value, relative = false) ->
while percentage >= 1
percentage /= 10
tc_color = tinycolor(value).toRgb()
color = [tc_color.r, tc_color.g, tc_color.b]
if relative
for _c, i in color
x = (255 - color[i]) * percentage
if x == 0
x = color[i] * percentage
color[i] -= x
else
color[i] += x
else
adj = 255 * percentage
for _c, i in color
if color[i] + adj > 255
color[i] -= adj
else
color[i] += adj
'#' + color.map((x) -> Math.floor(Math.max(0, Math.min(255, x))).toString(16)).join ''

View File

@ -1,18 +1,12 @@
<% @primary_color ||= "#222" %> <% @primary_color ||= "#222" %>
<% @primary_border ||= "#151515" %> <% @primary_border ||= "#151515" %>
<% @primary_text ||= "#eee" %> <% @primary_text ||= "#eee" %>
<% @primary_link ||= "#666" %>
<% @primary_hover ||= "#222" %>
<% @secondary_color ||= "#333" %>
<% @secondary_border ||= "#111" %>
<% @secondary_text ||= "#eee" %>
<% @secondary_link ||= "#fff" %>
<% @background_color ||= "#555" %> <% @background_color ||= "#555" %>
body#version1 { body#version1 {
background-color: <%= @background_color %>; background-color: <%= @background_color %>;
} }
body#version1 nav.navbar, body#version1 nav.navbar .dropdown-menu { body#version1 nav.navbar, body#version1 nav.navbar .dropdown-menu, body#version1 .j2-jumbo {
background-color: <%= @primary_color %>; background-color: <%= @primary_color %>;
border-color: <%= @primary_border %>; border-color: <%= @primary_border %>;
} }
@ -25,52 +19,6 @@ body#version1 .nav > li:not(.profile--image-dropdown):before {
background-color: <%= @primary_text %>; background-color: <%= @primary_text %>;
} }
body#version1 a, body#version1 .dropdown-menu a {
color: <%= @primary_link %>;
}
body#version1 .dropdown-menu .list-group-item-warning {
background-color: <%= @primary_border %>;
}
body#version1 .dropdown-menu > li > a:hover,
body#version1 .dropdown-menu > li > a:focus,
body#version1 .list-group > a:hover,
body#version1 .list-group > a:focus,
body#version1 .list-group > a.active {
background-color: <%= @primary_border %>;
border-color: <%= @primary_border %>;
color: <%= @primary_text %>;
}
body#version1 .btn {
color: <%= @primary_text %>;
}
body#version1 .panel {
border-color: <%= @primary_border %>;
background-color: <%= @secondary_color %>;
color: <%= @primary_text %>;
box-shadow: none;
}
body#version1 .list-group > a {
background-color: <%= @secondary_color %>;
border-color: <%= @secondary_border %>;
}
body#version1 .locales, body .locales a {
color: <%= @primary_text %> !important;
}
body#version1 .text-muted {
color: <%= @secondary_text %>;
}
body#version1 .text-muted a {
color: <%= @secondary_link %>;
}
body#version1 #profile--header.profile--no-header::before, body#version1 .userbox--no-header::before { body#version1 #profile--header.profile--no-header::before, body#version1 .userbox--no-header::before {
content: ""; content: "";
position: absolute; position: absolute;