steve
/
mybuddy
mirror of https://github.com/snachodog/mybuddy.git
1
0
Fork 0
Code Issues 3 Packages Projects 1 Releases Wiki Activity

Tweak dark colors and remove custom coloring classes from some elements.

This commit is contained in:
Christopher Charbonneau Wells 2017-09-27 11:24:24 -04:00
parent 0ff03b8851
commit 05ece53f18
5 changed files with 83 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
babyblotter/static_src/scss/themes/blueorange.scss
View File

@ -4,26 +4,26 @@
// Color system // Color system
// //
$blue: #236e96; $blue: #236e96;
$indigo: #472395; $indigo: #472395;
$purple: #712395; $purple: #712395;
$pink: #952393; $pink: #952393;
$red: #952330; $red: #952330;
$orange: #ff7f00; $orange: #ff7f00;
$yellow: #ffbe42; $yellow: #ffbe42;
$green: #239556; $green: #239556;
$teal: #5abccc; $teal: #5abccc;
$cyan: #15b2d3; $cyan: #15b2d3;
$theme-colors: ( $theme-colors: (
primary: $blue, primary: $blue,
secondary: $orange, secondary: $orange,
success: $green, success: $green,
info: $cyan, info: $cyan,
warning: $yellow, warning: $yellow,
danger: $red, danger: $red,
light: $gray-100, light: $gray-100,
dark: $gray-800 dark: $gray-800
); );
@ -31,104 +31,110 @@ $theme-colors: (
// //
// Settings for the `<body>` element. // Settings for the `<body>` element.
$body-bg: $gray-700; $body-bg: $gray-900;
$body-color: $gray-400; $body-color: $gray-400;
// Links // Links
// //
// Style anchor elements. // Style anchor elements.
$link-color: theme-color("info"); $link-color: theme-color("info");
$link-hover-color: darken($link-color, 15%); $link-hover-color: darken($link-color, 15%);
// Components // Components
// //
// Define common padding and border radius sizes and more. // Define common padding and border radius sizes and more.
$border-color: $gray-200; $border-color: $gray-200;
$component-active-color: $gray-400; $component-active-color: $gray-400;
$component-active-bg: theme-color("primary"); $component-active-bg: theme-color("primary");
// Fonts // Fonts
// //
// Font, line-height, and color for body text, headings, and more. // Font, line-height, and color for body text, headings, and more.
$text-muted: $gray-600 !default; $text-muted: $gray-600 !default;
$blockquote-small-color: $gray-600 !default; $blockquote-small-color: $gray-600 !default;
$hr-border-color: rgba($black,.1) !default; $hr-border-color: rgba($black,.1) !default;
$mark-bg: #fcf8e3 !default; $mark-bg: #fcf8e3 !default;
// Tables // Tables
// //
// Customizes the `.table` component with basic values, each used across all table variations. // Customizes the `.table` component with basic values, each used across all table variations.
$table-border-color: $gray-800; $table-border-color: $gray-800;
$table-head-bg: theme-color("primary"); $table-head-bg: theme-color("primary");
$table-inverse-bg: theme-color("dark"); $table-inverse-bg: theme-color("primary");
$table-accent-bg: rgba(theme-color("primary"), .1);
// Forms // Forms
$input-bg: $gray-400; $input-bg: $gray-400;
$input-disabled-bg: $gray-600; $input-disabled-bg: $gray-600;
$input-color: $black; $input-color: $black;
$input-border-color: rgba($gray-600,.15); $input-border-color: rgba($gray-600,.15);
$input-group-addon-bg: $gray-500; $input-group-addon-bg: $gray-500;
// Dropdowns // Dropdowns
// //
// Dropdown menu container and contents. // Dropdown menu container and contents.
$dropdown-bg: $gray-700; $dropdown-bg: $gray-700;
$dropdown-divider-bg: $gray-800; $dropdown-divider-bg: $gray-800;
$dropdown-link-color: $body-color; $dropdown-link-color: $body-color;
$dropdown-link-hover-color: darken($body-color, 5%); $dropdown-link-hover-color: darken($body-color, 5%);
$dropdown-link-hover-bg: theme-color("primary"); $dropdown-link-hover-bg: theme-color("primary");
$dropdown-link-active-color: $component-active-color; $dropdown-link-active-color: $component-active-color;
$dropdown-link-active-bg: $component-active-bg; $dropdown-link-active-bg: $component-active-bg;
$dropdown-header-color: theme-color("secondary"); $dropdown-header-color: theme-color("secondary");
// Pagination // Pagination
$pagination-color: $link-color; $pagination-color: $link-color;
$pagination-bg: theme-color("dark"); $pagination-bg: theme-color("dark");
$pagination-border-color: lighten(theme-color("dark"), 5%); $pagination-border-color: lighten(theme-color("dark"), 5%);
$pagination-hover-color: $link-hover-color; $pagination-hover-color: $link-hover-color;
$pagination-hover-bg: $gray-900; $pagination-hover-bg: $gray-900;
$pagination-hover-border-color: $gray-800; $pagination-hover-border-color: $gray-800;
$pagination-active-color: $body-color; $pagination-active-color: $body-color;
$pagination-active-bg: theme-color("primary"); $pagination-active-bg: theme-color("primary");
$pagination-active-border-color: theme-color("primary"); $pagination-active-border-color: theme-color("primary");
$pagination-disabled-color: $gray-600; $pagination-disabled-color: $gray-600;
$pagination-disabled-bg: $pagination-bg; $pagination-disabled-bg: $pagination-bg;
$pagination-disabled-border-color: $pagination-border-color; $pagination-disabled-border-color: $pagination-border-color;
// Jumbotron
$jumbotron-bg: theme-color("dark");
// Cards // Cards
$card-bg: theme-color("dark"); $card-bg: theme-color("dark");
$card-cap-bg: rgba(theme-color("light"), .05);
// Progress bars // Progress bars
$progress-bg: $gray-600; $progress-bg: $gray-600;
// List group // List group
$list-group-bg: theme-color("dark"); $list-group-bg: theme-color("dark");
$list-group-hover-bg: darken($list-group-bg, 5%); $list-group-hover-bg: darken($list-group-bg, 5%);
$list-group-active-color: $component-active-color !default; $list-group-active-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default; $list-group-active-bg: $component-active-bg !default;
$list-group-active-border-color: $list-group-active-bg !default; $list-group-active-border-color: $list-group-active-bg !default;
$list-group-action-color: $gray-400; $list-group-action-color: $gray-400;
$list-group-action-hover-color: $list-group-action-color; $list-group-action-hover-color: $list-group-action-color;

6
dashboard/templates/cards/diaperchange_types.html
View File

@ -11,19 +11,19 @@
<div class="progress mt-3"> <div class="progress mt-3">
{% if info.wet_pct > 0 %} {% if info.wet_pct > 0 %}
<div class="progress-bar bg-info lead" <div class="progress-bar bg-primary lead"
role="progressbar" role="progressbar"
style="width: {{ info.wet_pct }}%;">{{ info.wet }}&nbsp;wet</div> style="width: {{ info.wet_pct }}%;">{{ info.wet }}&nbsp;wet</div>
{% endif %} {% endif %}
{% if info.solid_pct > 0 %} {% if info.solid_pct > 0 %}
<div class="progress-bar bg-dark lead" <div class="progress-bar bg-secondary lead"
role="progressbar" role="progressbar"
style="width: {{ info.solid_pct }}%;"> style="width: {{ info.solid_pct }}%;">
<strong>{{ info.solid }}</strong>&nbsp;solid</div> <strong>{{ info.solid }}</strong>&nbsp;solid</div>
{% endif %} {% endif %}
</div> </div>
<div class="text-center text-dark small"> <div class="text-center text-light small">
{% if key == 0 %} {% if key == 0 %}
today today
{% elif key == 1 %} {% elif key == 1 %}

6
dashboard/templates/cards/sleep.html
View File

@ -1,9 +1,9 @@
<div class="card card-sleep border-dark mb-3"> <div class="card card-sleep border-secondary mb-3">
<div class="card-header text-white bg-dark h4"> <div class="card-header text-white bg-secondary h4">
<i class="icon icon-sleep pull-left" aria-hidden="true"></i> <i class="icon icon-sleep pull-left" aria-hidden="true"></i>
{% block header %}{% endblock %} {% block header %}{% endblock %}
</div> </div>
<div class="card-body text-dark"> <div class="card-body">
<h4 class="card-title">{% block title %}{% endblock %}</h4> <h4 class="card-title">{% block title %}{% endblock %}</h4>
<div class="card-text">{% block content %}{% endblock %}</div> <div class="card-text">{% block content %}{% endblock %}</div>
</div> </div>

6
dashboard/templates/cards/timer.html
View File

@ -1,9 +1,9 @@
<div class="card card-timer border-secondary mb-3"> <div class="card card-timer border-light mb-3">
<div class="card-header text-white bg-secondary h4"> <div class="card-header text-dark bg-light h4">
<i class="icon icon-timer pull-left" aria-hidden="true"></i> <i class="icon icon-timer pull-left" aria-hidden="true"></i>
{% block header %}{% endblock %} {% block header %}{% endblock %}
</div> </div>
<div class="card-body text-secondary"> <div class="card-body text-light">
<h4 class="card-title">{% block title %}{% endblock %}</h4> <h4 class="card-title">{% block title %}{% endblock %}</h4>
<div class="card-text">{% block content %}{% endblock %}</div> <div class="card-text">{% block content %}{% endblock %}</div>
</div> </div>

2
dashboard/templates/dashboard/child.html
View File

@ -5,7 +5,7 @@
{% block content %} {% block content %}
<div class="bg-light text-dark rounded text-center pb-2"> <div class="rounded text-center pb-2">
<h1 class="display-4">{{ object }}</h1> <h1 class="display-4">{{ object }}</h1>
<div class="dropdown"> <div class="dropdown">