From e42f81193b96944bedbfc7c73dae45e981952073 Mon Sep 17 00:00:00 2001 From: Yuki Date: Tue, 25 Aug 2015 10:48:01 +0530 Subject: [PATCH] Finalize theme file --- app/views/user/theme.css.scss.erb | 129 +++++++++++++++++------------- 1 file changed, 75 insertions(+), 54 deletions(-) diff --git a/app/views/user/theme.css.scss.erb b/app/views/user/theme.css.scss.erb index b4f1c35e..9c9b94aa 100644 --- a/app/views/user/theme.css.scss.erb +++ b/app/views/user/theme.css.scss.erb @@ -1,5 +1,3 @@ -// TODO: Use canonical colours rather than this test midnight scheme. - // LEGEND // TYPE_COLOR: BACKGROUND COLOR @@ -8,45 +6,50 @@ // PRIMARY COLOR -$primary_color: <%= @primary_color || "#222222" %>; -$primary_border: <%= @primary_border || "#151515" %>; -$primary_text: <%= @primary_text || "#eeeeee" %>; +$primary_color: <%= @primary_color || "#5e35b1" %>; +$primary_border: <%= @primary_border || "darken(adjust-hue(#5e35b1, -10), 5%)" %>; +$primary_text: <%= @primary_text || "white" %>; // DANGER COLOR - -$danger_color: <%= @danger_color || "#222222" %>; -$danger_border: <%= @danger_border || "#151515" %>; -$danger_text: <%= @danger_text || "#eeeeee" %>; +$danger_color: <%= @danger_color || "#FF0039" %>; +$danger_border: <%= @danger_border || "darken(adjust-hue(#FF0039, -10), 5%)" %>; +$danger_text: <%= @danger_text || "white" %>; // SUCCESS COLOR -$success_color: <%= @success_color || "#222222" %>; -$success_border: <%= @success_border || "#151515" %>; -$success_text: <%= @success_text || "#eeeeee" %>; +$success_color: <%= @success_color || "#3FB618" %>; +$success_border: <%= @success_border || "darken(adjust-hue(#3FB618, -10), 5%)" %>; +$success_text: <%= @success_text || "white" %>; // WARNING COLOR -$warning_color: <%= @warning_color || "#222222" %>; -$warning_border: <%= @warning_border || "#151515" %>; -$warning_text: <%= @warning_text || "#eeeeee" %>; +$warning_color: <%= @warning_color || "#FF7518" %>; +$warning_border: <%= @warning_border || "darken(adjust-hue(#FF7518, -10), 5%)" %>; +$warning_text: <%= @warning_text || "white" %>; // INFO COLOR -$info_color: <%= @info_color || "#222222" %>; -$info_border: <%= @info_border || "#151515" %>; -$info_text: <%= @info_text || "#eeeeee" %>; +$info_color: <%= @info_color || "#9954BB" %>; +$info_border: <%= @info_border || "darken(adjust-hue(#9954BB, -10), 5%)" %>; +$info_text: <%= @info_text || "white" %>; // DEFAULT COLOR $default_color: <%= @default_color || "#222222" %>; -$default_border: <%= @default_border || "#151515" %>; +$default_border: <%= @default_border || "darken(adjust-hue(#222222, -10), 5%)" %>; $default_text: <%= @default_text || "#eeeeee" %>; +// PANEL COLOR + +$panel_color: <%= @panel_color || "#F9F9F9" %>; +$panel_border: <%= @panel_border || "darken(adjust-hue(#F9F9F9, -10), 5%)" %>; +$panel_text: <%= @panel_text || "#151515" %>; + // AUXILIARY COLOR -$link_color: <%= @link_color || "#111111" %>; -$background_color: <%= @background_color || "#555555" %>; -$background_text: <%= @background_text || "#eeeeee" %>; +$link_color: <%= @link_color || "#5e35b1" %>; +$background_color: <%= @background_color || "#ffffff" %>; +$background_text: <%= @background_text || "#222222" %>; $background_muted: <%= @background_muted || "#bbbbbb" %>; body#version1 { @@ -72,9 +75,10 @@ body#version1 { &, .dropdown-menu { background-color: $primary_color; border-color: $primary_border; - color: $primary_color; + border-top: none; + color: $primary_text; - .media { + .media, .dropdown-header { color: $primary_text; } @@ -84,7 +88,7 @@ body#version1 { > li { > a:hover { - background-color: mix($primary_color, $primary_text, 90%); + background-color: mix($primary_color, $primary_text, 80%); } a { @@ -111,8 +115,12 @@ body#version1 { // Notifications .media, #notifications .list-group-item { - color: $default_text; - background: $default_color; + color: $panel_text; + background: $panel_color; + } + + .media { + background: transparent; } // Headers @@ -129,7 +137,7 @@ body#version1 { left: 0; right: 0; bottom: 0; - background: $primary_border; + background: $primary_color; img { opacity: 0; @@ -143,55 +151,63 @@ body#version1 { // Panels, and modals .panel, .modal-dialog { - border-color: $default_border; + border-color: $panel_border; .panel-heading, .panel-footer, .panel-body, .modal-header, .modal-footer, .modal-body, .modal-content { - color: $default_text; + color: $panel_text; } - *:not(input), a, a:hover, a:active { - color: $default_text; + a, a:hover, a:active { + color: $panel_text; + } + + .answerbox--question-user, .answerbox--question-text, .answerbox--answer-user, .answerbox--answer-text { + color: $panel_text; + + &.text-muted { + color: mix($panel_text, $background_muted, 70%); + } } select { - background-color: $default_color; - border-color: $default_border; + background-color: $panel_color; + border-color: $panel_border; } .input-group-addon { - background: $default_color; - border: $default_color; + background: $panel_color; + border: $panel_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%); + background-color: mix($panel_color, $panel_text, 90%); + border-color: mix($panel_color, $panel_text, 85%); } .panel-body, .modal-body, .modal-content { - background-color: $default_color; + background-color: $panel_color; } } // Non-navigation dropdowns .dropdown-menu { - background-color: $default_color; - border-color: $default_border; - color: $default_text; + background-color: $panel_color; + border-color: $panel_border; + color: $panel_text; > li.divider { - background-color: $default_border; + background-color: $panel_border; } > li { > a:hover { - background-color: mix($default_color, $default_text, 90%); + background-color: mix($panel_color, $panel_text, 90%); } a { &, &:hover, &:active { - color: $default_text; + color: $panel_text; } } } @@ -207,25 +223,25 @@ body#version1 { margin-top: -1px; li.active a, li:active a, li:hover a { - background: mix($default_color, $default_text, 90%); - color: mix($default_text, $default_color, 90%); + background: mix($panel_color, $panel_text, 90%); + color: mix($panel_text, $panel_color, 90%); } } // Lists .list-group .list-group-item { - background-color: $default_color; - color: $default_text; - border-color: $default_border; + background-color: $panel_color; + color: $panel_text; + border-color: $panel_border; .badge { - background-color: $default_text; - border-color: $default_border; - color: $default_color; + background-color: $panel_text; + border-color: $panel_border; + color: $panel_color; } - .active, &:hover { + &.active, &:hover { background-color: $primary_color; color: $primary_text; border-color: $primary_border; @@ -265,6 +281,11 @@ end #debug { background: white; color: black; + + hr { + background-color: inherit; + border-color: inherit; + } } }