rework some theme code, particlefield now adapts color
This commit is contained in:
parent
9ef71a84e9
commit
3444fcc93e
1
Gemfile
1
Gemfile
|
@ -39,6 +39,7 @@ gem 'fog'
|
|||
gem 'fog-aws'
|
||||
gem 'momentjs-rails', '>= 2.9.0'
|
||||
gem 'bootstrap3-datetimepicker-rails', '~> 4.7.14'
|
||||
gem 'tiny-color-rails'
|
||||
|
||||
gem 'twemoji-rails'
|
||||
|
||||
|
|
|
@ -435,6 +435,8 @@ GEM
|
|||
tilt (1.4.1)
|
||||
timers (4.0.1)
|
||||
hitimes
|
||||
tiny-color-rails (0.0.2)
|
||||
railties (>= 3.0)
|
||||
tumblr_client (0.8.5)
|
||||
faraday (~> 0.9.0)
|
||||
faraday_middleware (~> 0.9.0)
|
||||
|
@ -545,6 +547,7 @@ DEPENDENCIES
|
|||
spring (~> 1.3.5)
|
||||
sweetalert-rails
|
||||
thin
|
||||
tiny-color-rails
|
||||
tumblr_client
|
||||
turbolinks
|
||||
twemoji-rails
|
||||
|
|
|
@ -14,6 +14,7 @@
|
|||
#= require js.cookie
|
||||
#= require i18n
|
||||
#= require i18n/translations
|
||||
#= require tinycolor-min
|
||||
# local requires to be seen by everyone:
|
||||
#= require_tree ./answerbox
|
||||
#= require_tree ./questionbox
|
||||
|
@ -28,6 +29,7 @@
|
|||
#= require user
|
||||
#= require report
|
||||
#= require locale-box
|
||||
#= require util
|
||||
# not required:
|
||||
# _tree ./moderation
|
||||
|
||||
|
@ -62,9 +64,13 @@ _ready = ->
|
|||
sweetAlertInitialize()
|
||||
|
||||
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'),
|
||||
dotColor: '#5e35b1'
|
||||
lineColor: '#5e35b1'
|
||||
dotColor: bodyColor
|
||||
lineColor: bodyColor
|
||||
|
||||
if twemoji?
|
||||
twemoji.parse document.body,
|
||||
|
|
|
@ -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 ''
|
|
@ -1,18 +1,12 @@
|
|||
<% @primary_color ||= "#222" %>
|
||||
<% @primary_border ||= "#151515" %>
|
||||
<% @primary_text ||= "#eee" %>
|
||||
<% @primary_link ||= "#666" %>
|
||||
<% @primary_hover ||= "#222" %>
|
||||
<% @secondary_color ||= "#333" %>
|
||||
<% @secondary_border ||= "#111" %>
|
||||
<% @secondary_text ||= "#eee" %>
|
||||
<% @secondary_link ||= "#fff" %>
|
||||
<% @primary_color ||= "#222" %>
|
||||
<% @primary_border ||= "#151515" %>
|
||||
<% @primary_text ||= "#eee" %>
|
||||
<% @background_color ||= "#555" %>
|
||||
body#version1 {
|
||||
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 %>;
|
||||
border-color: <%= @primary_border %>;
|
||||
}
|
||||
|
@ -25,52 +19,6 @@ body#version1 .nav > li:not(.profile--image-dropdown):before {
|
|||
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 {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
Loading…
Reference in New Issue