diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb index 558b2601..6e75e3ca 100644 --- a/app/helpers/theme_helper.rb +++ b/app/helpers/theme_helper.rb @@ -20,10 +20,10 @@ module ThemeHelper :compact end.freeze - css = if __THEME_CSS_CACHE.nil? + css = if $__THEME_CSS_CACHE_V1.nil? File.read Rails.root.join 'app/views/user/theme.css.scss.erb' else - __THEME_CSS_CACHE + $__THEME_CSS_CACHE_V1 end erb = ERB.new css diff --git a/app/views/user/theme.css.scss.erb b/app/views/user/theme.css.scss.erb index 71cdd738..be7298e5 100644 --- a/app/views/user/theme.css.scss.erb +++ b/app/views/user/theme.css.scss.erb @@ -1,5 +1,15 @@ // TODO: Use canonical colours rather than this test midnight scheme. +// TODO: "new" notifications +// TODO: notification page +// TODO: tabs +// TODO: pill lists + +// LEGEND +// TYPE_COLOR: BACKGROUND COLOR +// TYPE_BORDER: BORDER COLOR +// TYPE_TEXT: TEXT COLOR + // PRIMARY COLOR $primary_color: <%= @primary_color || "#222222" %>; $primary_border: <%= @primary_border || "#151515" %>; @@ -25,10 +35,10 @@ $info_color: <%= @info_color || "#222222" %>; $info_border: <%= @info_border || "#151515" %>; $info_text: <%= @info_text || "#eeeeee" %>; -// COLOR COLOR (DEFAULT) -$color_color: <%= @color_color || "#222222" %>; -$color_border: <%= @color_border || "#151515" %>; -$color_text: <%= @color_text || "#eeeeee" %>; +// DEFAULT COLOR +$default_color: <%= @default_color || "#222222" %>; +$default_border: <%= @default_border || "#151515" %>; +$default_text: <%= @default_text || "#eeeeee" %>; // PANEL COLORS @@ -39,12 +49,16 @@ $background_text: <%= @background_text || "#eeeeee" %>; $background_muted: <%= @background_muted || "#bbbbbb" %>; body#version1 { - .links a { - &, :hover, :active { + a, { + &, &:hover, &:active { color: $link_color; } } + hr, .locales #locales-panel ul { + border-color: $link_color; + } + background-color: $background_color; color: $background_text; @@ -52,10 +66,31 @@ body#version1 { &, .dropdown-menu { background-color: $primary_color; border-color: $primary_border; + color: $primary_color; + + .media { + color: $primary_text; + } + + > li.divider { + background-color: $primary_border; + } + + > li { + > a:hover { + background-color: mix($primary_color, $primary_text, 90%); + } + + a { + &, &:hover, &:active { + color: $primary_text; + } + } + } } a { - &, :hover, :active { + &, &:hover, &:active { color: $primary_text; } } @@ -70,6 +105,10 @@ body#version1 { border-color: $primary_border; } + .media { + color: $default_text; + } + #profile--header.profile--no-header:before, .userbox--no-header:before { content: ""; position: absolute; @@ -88,6 +127,57 @@ body#version1 { position: relative; } + .panel, .modal-dialog { + border-color: $default_border; + + .panel-heading, .panel-footer, .panel-body, .modal-header, .modal-footer, .modal-body, .modal-content { + &, *:not(input), a, a:hover, a:active { + color: $default_text; + } + + select { + background-color: $default_color; + border-color: $default_border; + } + + .input-group-addon { + background: $default_color; + border: $default_color; + } + } + + &, .panel-heading, .panel-footer, .modal-header, .modal-footer { + background-color: mix($default_color, $default_text, 90%); + border-color: mix($default_color, $default_text, 85%); + } + + .panel-body, .modal-body, .modal-content { + background-color: $default_color; + } + } + + .dropdown-menu { + background-color: $default_color; + border-color: $default_border; + color: $default_text; + + > li.divider { + background-color: $default_border; + } + + > li { + > a:hover { + background-color: mix($default_color, $default_text, 90%); + } + + a { + &, &:hover, &:active { + color: $default_text; + } + } + } + } + .btn-primary { background-color: $primary_color; border-color: $primary_border; @@ -102,8 +192,43 @@ body#version1 { color: $background_muted; } + // ERB magic because i'm lazy. +<% +for color in %W(primary danger success warning info default) +%> + .btn-<%= color %>, .alert-<%= color %>, .label-<%= color %> { + color: $<%= color %>_text; + background-color: $<%= color %>_color; + border-color: $<%= color %>_border; + } + + .btn-<%= color %>:hover { + background-color: mix($<%= color %>_color, $<%= color %>_text, 90%); + } +<% +end +%> + #debug { background: white; color: black; } } + +/* nprogress */ +$nprogress-color: lighten($primary_color, 25%); + +#nprogress { + .bar { + background: $nprogress-color; + } + + .peg { + box-shadow: 0 0 10px $nprogress-color, 0 0 5px $nprogress-color; + } + + .spinner-icon { + border-top-color: $nprogress-color; + border-left-color: $nprogress-color; + } +} diff --git a/config/initializers/13_theme.rb b/config/initializers/13_theme.rb index 7fac1687..9e2af5d4 100644 --- a/config/initializers/13_theme.rb +++ b/config/initializers/13_theme.rb @@ -1,4 +1,6 @@ # Cache theme CSS if in production -__THEME_CSS_CACHE = if Rails.env == 'production' +$__THEME_CSS_CACHE_V1 = if Rails.env == 'production' File.read Rails.root.join 'app/views/user/theme.css.scss.erb' +else + nil end.freeze