Finalize theme file
This commit is contained in:
Yuki
parent
0bfbbbc856
commit
e42f81193b
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue