diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss index 88d02e9f..1e237dcf 100644 --- a/app/assets/stylesheets/_variables.scss +++ b/app/assets/stylesheets/_variables.scss @@ -90,6 +90,8 @@ $avatar-sizes: ( --body-text: 0, 0, 0; --muted-text: 108, 117, 125; --input-text: 0, 0, 0; + + --turbolinks-progress-color: #a58adc; // --primary lightened by 25% } $gray: #e2e2e2; diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 955695de..c9879935 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -51,6 +51,7 @@ "overrides/minicolors", "overrides/modal", "overrides/navbar", +"overrides/turbolinks", "overrides/sweet-alert"; /** diff --git a/app/assets/stylesheets/overrides/_turbolinks.scss b/app/assets/stylesheets/overrides/_turbolinks.scss new file mode 100644 index 00000000..5c94f21f --- /dev/null +++ b/app/assets/stylesheets/overrides/_turbolinks.scss @@ -0,0 +1,3 @@ +.turbolinks-progress-bar { + background: var(--turbolinks-progress-color); +} \ No newline at end of file diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb index 13f74a0a..36de9399 100644 --- a/app/helpers/theme_helper.rb +++ b/app/helpers/theme_helper.rb @@ -40,6 +40,7 @@ module ThemeHelper body += "\t--#{ATTRIBUTE_MAP[k]}: ##{get_hex_color_from_theme_value(v)};\n" end end + body += "\t--turbolinks-progress-color: ##{lighten(theme.primary_color)}\n" body += "}" @@ -70,4 +71,20 @@ module ThemeHelper hexes = value.split(/(.{2})/).reject { |c| c.empty? } hexes.map(&:hex).join(", ") end + + def rgb_values_from_hex(value) + [ + (value & 0xFF0000) >> 16, # R + (value & 0x00FF00) >> 8, # G + value & 0x0000FF # B + ] + end + + def rgb_to_hex(rgb_values) + rgb_values.map.with_index { |v, i| v << (2 - i) * 8 }.reduce(&:+).to_s(16) + end + + def lighten(value, amount = 0.25) + rgb_to_hex(rgb_values_from_hex(value).map { |v| [(v + 255 * amount).round, 255].min }) + end end