lucas.mathieu/cachet-docker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Text color for buttons and alerts is now dynamic. Closes #1020, #1021

Browse Source
This commit is contained in:
James Brooks
2015-10-08 17:02:17 +01:00
parent 22c39df73f
commit d3fcffce72
2 changed files with 63 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Http/helpers.php
+20
View File
@@ -95,3 +95,23 @@ if (!function_exists('color_darken')) {
return $new_hex; return $new_hex;
} }
} }
if (!function_exists('color_contrast')) {
/**
* Calculates colour contrast.
*
* https://24ways.org/2010/calculating-color-contrast/
*
* @param string $hexcolor
*
* @return string
*/
function color_contrast($hexcolor) {
$r = hexdec(substr($hexcolor, 0, 2));
$g = hexdec(substr($hexcolor, 2, 2));
$b = hexdec(substr($hexcolor, 4, 2));
$yiq = (($r * 100) + ($g * 400) + ($b * 114)) / 1000;
return ($yiq >= 128) ? 'black' : 'white';
}
}
resources/views/partials/stylesheet.blade.php
+43 -36
View File
@@ -3,86 +3,93 @@ body.status-page {
background-color: {{ $theme_background_color }}; background-color: {{ $theme_background_color }};
color: {{ $theme_text_color }}; color: {{ $theme_text_color }};
} }
.reds { color: {{ $theme_reds }} !important; } .reds { color: {{ $theme_reds }}; }
.blues { color: {{ $theme_blues }} !important; } .blues { color: {{ $theme_blues }}; }
.greens { color: {{ $theme_greens }} !important; } .greens { color: {{ $theme_greens }}; }
.yellows { color: {{ $theme_yellows }} !important; } .yellows { color: {{ $theme_yellows }}; }
.oranges { color: {{ $theme_oranges }} !important; } .oranges { color: {{ $theme_oranges }}; }
.metrics { color: {{ $theme_metrics }} !important; } .metrics { color: {{ $theme_metrics }}; }
.links { color: {{ $theme_links }} !important; } .links { color: {{ $theme_links }}; }
/** /**
* Alert overrides. * Alert overrides.
*/ */
.alert { .alert {
background-color: {{ $theme_yellows }} !important; background-color: {{ $theme_yellows }};
border-color: {{ color_darken($theme_yellows, -0.1) }} !important; border-color: {{ color_darken($theme_yellows, -0.1) }};
color: {{ color_contrast($theme_yellows) }};
} }
.alert.alert-success { .alert.alert-success {
background-color: {{ $theme_greens }} !important; background-color: {{ $theme_greens }};
border-color: {{ color_darken($theme_greens, -0.1) }} !important; border-color: {{ color_darken($theme_greens, -0.1) }};
color: {{ color_contrast($theme_greens) }};
} }
.alert.alert-info { .alert.alert-info {
background-color: {{ $theme_blues }} !important; background-color: {{ $theme_blues }};
border-color: {{ color_darken($theme_blues, -0.1) }} !important; border-color: {{ color_darken($theme_blues, -0.1) }};
color: {{ color_contrast($theme_blues) }};
} }
.alert.alert-danger { .alert.alert-danger {
background-color: {{ $theme_reds }} !important; background-color: {{ $theme_reds }};
border-color: {{ color_darken($theme_reds, -0.1) }} !important; border-color: {{ color_darken($theme_reds, -0.1) }};
color: {{ color_contrast($theme_reds) }};
} }
/** /**
* Button Overrides * Button Overrides
*/ */
.btn.links { .btn.links {
color: {{ color_darken($theme_yellows, -0.3) }} !important color: {{ color_darken($theme_yellows, -0.3) }};
} }
.btn.btn-success { .btn.btn-success {
background-color: {{ $theme_greens }} !important; background-color: {{ $theme_greens }};
border-color: {{ color_darken($theme_greens, -0.1) }} !important; border-color: {{ color_darken($theme_greens, -0.1) }};
color: {{ color_contrast($theme_greens) }};
} }
.btn.btn-success.links { .btn.btn-success.links {
color: {{ color_darken($theme_greens, -0.3) }} !important color: {{ color_darken($theme_greens, -0.3) }};
} }
.btn.btn-info { .btn.btn-info {
background-color: {{ $theme_blues }} !important; background-color: {{ $theme_blues }};
border-color: {{ color_darken($theme_blues, -0.1) }} !important; border-color: {{ color_darken($theme_blues, -0.1) }};
color: {{ color_contrast($theme_blues) }};
} }
.btn.btn-info.links { .btn.btn-info.links {
color: {{ color_darken($theme_blues, -0.3) }} !important color: {{ color_darken($theme_blues, -0.3) }};
} }
.btn.btn-danger { .btn.btn-danger {
background-color: {{ $theme_reds }} !important; background-color: {{ $theme_reds }};
border-color: {{ color_darken($theme_reds, -0.1) }} !important; border-color: {{ color_darken($theme_reds, -0.1) }};
color: {{ color_contrast($theme_reds) }};
} }
.btn.btn-danger.links { .btn.btn-danger.links {
color: {{ color_darken($theme_reds, -0.3) }} !important color: {{ color_darken($theme_reds, -0.3) }};
} }
/** /**
* Background fills Overrides * Background fills Overrides
*/ */
.component { .component {
background-color: {{ $theme_background_fills }} !important; background-color: {{ $theme_background_fills }};
border-color: {{ color_darken($theme_background_fills, -0.1) }} !important; border-color: {{ color_darken($theme_background_fills, -0.1) }};
} }
.sub-component { .sub-component {
background-color: {{ $theme_background_fills }} !important; background-color: {{ $theme_background_fills }};
border-color: {{ color_darken($theme_background_fills, -0.1) }} !important; border-color: {{ color_darken($theme_background_fills, -0.1) }};
} }
.incident { .incident {
background-color: {{ $theme_background_fills }} !important; background-color: {{ $theme_background_fills }};
border-color: {{ color_darken($theme_background_fills, -0.1) }} !important; border-color: {{ color_darken($theme_background_fills, -0.1) }};
} }
.status-icon { .status-icon {
background-color: {{ $theme_background_fills }} !important; background-color: {{ $theme_background_fills }};
border-color: {{ color_darken($theme_background_fills, -0.1) }} !important; border-color: {{ color_darken($theme_background_fills, -0.1) }};
} }
.panel.panel-message:after { .panel.panel-message:after {
border-left-color: {{ $theme_background_fills }} !important; border-left-color: {{ $theme_background_fills }};
border-right-color: {{ $theme_background_fills }} !important; border-right-color: {{ $theme_background_fills }};
} }
.footer { .footer {
background-color: {{ $theme_background_fills }} !important; background-color: {{ $theme_background_fills }};
} }
</style> </style>