FreakU
/
Retrospring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finalize theme file

This commit is contained in:
Yuki 2015-08-25 10:48:01 +05:30
parent 0bfbbbc856
commit e42f81193b
1 changed files with 75 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
app/views/user/theme.css.scss.erb
View File

@ -1,5 +1,3 @@
// TODO: Use canonical colours rather than this test midnight scheme.
// LEGEND // LEGEND
// TYPE_COLOR: BACKGROUND COLOR // TYPE_COLOR: BACKGROUND COLOR
@ -8,45 +6,50 @@
// PRIMARY COLOR // PRIMARY COLOR
$primary_color: <%= @primary_color || "#222222" %>; $primary_color: <%= @primary_color || "#5e35b1" %>;
$primary_border: <%= @primary_border || "#151515" %>; $primary_border: <%= @primary_border || "darken(adjust-hue(#5e35b1, -10), 5%)" %>;
$primary_text: <%= @primary_text || "#eeeeee" %>; $primary_text: <%= @primary_text || "white" %>;
// DANGER COLOR // DANGER COLOR
$danger_color: <%= @danger_color || "#FF0039" %>;
$danger_color: <%= @danger_color || "#222222" %>; $danger_border: <%= @danger_border || "darken(adjust-hue(#FF0039, -10), 5%)" %>;
$danger_border: <%= @danger_border || "#151515" %>; $danger_text: <%= @danger_text || "white" %>;
$danger_text: <%= @danger_text || "#eeeeee" %>;
// SUCCESS COLOR // SUCCESS COLOR
$success_color: <%= @success_color || "#222222" %>; $success_color: <%= @success_color || "#3FB618" %>;
$success_border: <%= @success_border || "#151515" %>; $success_border: <%= @success_border || "darken(adjust-hue(#3FB618, -10), 5%)" %>;
$success_text: <%= @success_text || "#eeeeee" %>; $success_text: <%= @success_text || "white" %>;
// WARNING COLOR // WARNING COLOR
$warning_color: <%= @warning_color || "#222222" %>; $warning_color: <%= @warning_color || "#FF7518" %>;
$warning_border: <%= @warning_border || "#151515" %>; $warning_border: <%= @warning_border || "darken(adjust-hue(#FF7518, -10), 5%)" %>;
$warning_text: <%= @warning_text || "#eeeeee" %>; $warning_text: <%= @warning_text || "white" %>;
// INFO COLOR // INFO COLOR
$info_color: <%= @info_color || "#222222" %>; $info_color: <%= @info_color || "#9954BB" %>;
$info_border: <%= @info_border || "#151515" %>; $info_border: <%= @info_border || "darken(adjust-hue(#9954BB, -10), 5%)" %>;
$info_text: <%= @info_text || "#eeeeee" %>; $info_text: <%= @info_text || "white" %>;
// DEFAULT COLOR // DEFAULT COLOR
$default_color: <%= @default_color || "#222222" %>; $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" %>; $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 // AUXILIARY COLOR
$link_color: <%= @link_color || "#111111" %>; $link_color: <%= @link_color || "#5e35b1" %>;
$background_color: <%= @background_color || "#555555" %>; $background_color: <%= @background_color || "#ffffff" %>;
$background_text: <%= @background_text || "#eeeeee" %>; $background_text: <%= @background_text || "#222222" %>;
$background_muted: <%= @background_muted || "#bbbbbb" %>; $background_muted: <%= @background_muted || "#bbbbbb" %>;
body#version1 { body#version1 {
@ -72,9 +75,10 @@ body#version1 {
&, .dropdown-menu { &, .dropdown-menu {
background-color: $primary_color; background-color: $primary_color;
border-color: $primary_border; border-color: $primary_border;
color: $primary_color; border-top: none;
color: $primary_text;
.media { .media, .dropdown-header {
color: $primary_text; color: $primary_text;
} }
@ -84,7 +88,7 @@ body#version1 {
> li { > li {
> a:hover { > a:hover {
background-color: mix($primary_color, $primary_text, 90%); background-color: mix($primary_color, $primary_text, 80%);
} }
a { a {
@ -111,8 +115,12 @@ body#version1 {
// Notifications // Notifications
.media, #notifications .list-group-item { .media, #notifications .list-group-item {
color: $default_text; color: $panel_text;
background: $default_color; background: $panel_color;
}
.media {
background: transparent;
} }
// Headers // Headers
@ -129,7 +137,7 @@ body#version1 {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: $primary_border; background: $primary_color;
img { img {
opacity: 0; opacity: 0;
@ -143,55 +151,63 @@ body#version1 {
// Panels, and modals // Panels, and modals
.panel, .modal-dialog { .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 { .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 { a, a:hover, a:active {
color: $default_text; 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 { select {
background-color: $default_color; background-color: $panel_color;
border-color: $default_border; border-color: $panel_border;
} }
.input-group-addon { .input-group-addon {
background: $default_color; background: $panel_color;
border: $default_color; border: $panel_color;
} }
&, .panel-heading, .panel-footer, .modal-header, .modal-footer { &, .panel-heading, .panel-footer, .modal-header, .modal-footer {
background-color: mix($default_color, $default_text, 90%); background-color: mix($panel_color, $panel_text, 90%);
border-color: mix($default_color, $default_text, 85%); border-color: mix($panel_color, $panel_text, 85%);
} }
.panel-body, .modal-body, .modal-content { .panel-body, .modal-body, .modal-content {
background-color: $default_color; background-color: $panel_color;
} }
} }
// Non-navigation dropdowns // Non-navigation dropdowns
.dropdown-menu { .dropdown-menu {
background-color: $default_color; background-color: $panel_color;
border-color: $default_border; border-color: $panel_border;
color: $default_text; color: $panel_text;
> li.divider { > li.divider {
background-color: $default_border; background-color: $panel_border;
} }
> li { > li {
> a:hover { > a:hover {
background-color: mix($default_color, $default_text, 90%); background-color: mix($panel_color, $panel_text, 90%);
} }
a { a {
&, &:hover, &:active { &, &:hover, &:active {
color: $default_text; color: $panel_text;
} }
} }
} }
@ -207,25 +223,25 @@ body#version1 {
margin-top: -1px; margin-top: -1px;
li.active a, li:active a, li:hover a { li.active a, li:active a, li:hover a {
background: mix($default_color, $default_text, 90%); background: mix($panel_color, $panel_text, 90%);
color: mix($default_text, $default_color, 90%); color: mix($panel_text, $panel_color, 90%);
} }
} }
// Lists // Lists
.list-group .list-group-item { .list-group .list-group-item {
background-color: $default_color; background-color: $panel_color;
color: $default_text; color: $panel_text;
border-color: $default_border; border-color: $panel_border;
.badge { .badge {
background-color: $default_text; background-color: $panel_text;
border-color: $default_border; border-color: $panel_border;
color: $default_color; color: $panel_color;
} }
.active, &:hover { &.active, &:hover {
background-color: $primary_color; background-color: $primary_color;
color: $primary_text; color: $primary_text;
border-color: $primary_border; border-color: $primary_border;
@ -265,6 +281,11 @@ end
#debug { #debug {
background: white; background: white;
color: black; color: black;
hr {
background-color: inherit;
border-color: inherit;
}
} }
} }