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 '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'
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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_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;
|
||||||
|
|
Loading…
Reference in New Issue