mirror_php/Cachet
1
0
Fork 0
mirror of https://github.com/CachetHQ/Cachet.git synced 2025-01-17 13:38:20 +01:00
Code Issues 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/Http/helpers.php
View File

@ -95,3 +95,23 @@ if (!function_exists('color_darken')) {
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';
}
}

79
resources/views/partials/stylesheet.blade.php
View File

@ -3,86 +3,93 @@ body.status-page {
background-color: {{ $theme_background_color }};
color: {{ $theme_text_color }};
}
.reds { color: {{ $theme_reds }} !important; }
.blues { color: {{ $theme_blues }} !important; }
.greens { color: {{ $theme_greens }} !important; }
.yellows { color: {{ $theme_yellows }} !important; }
.oranges { color: {{ $theme_oranges }} !important; }
.metrics { color: {{ $theme_metrics }} !important; }
.links { color: {{ $theme_links }} !important; }
.reds { color: {{ $theme_reds }}; }
.blues { color: {{ $theme_blues }}; }
.greens { color: {{ $theme_greens }}; }
.yellows { color: {{ $theme_yellows }}; }
.oranges { color: {{ $theme_oranges }}; }
.metrics { color: {{ $theme_metrics }}; }
.links { color: {{ $theme_links }}; }
/**
* Alert overrides.
*/
.alert {
background-color: {{ $theme_yellows }} !important;
border-color: {{ color_darken($theme_yellows, -0.1) }} !important;
background-color: {{ $theme_yellows }};
border-color: {{ color_darken($theme_yellows, -0.1) }};
color: {{ color_contrast($theme_yellows) }};
}
.alert.alert-success {
background-color: {{ $theme_greens }} !important;
border-color: {{ color_darken($theme_greens, -0.1) }} !important;
background-color: {{ $theme_greens }};
border-color: {{ color_darken($theme_greens, -0.1) }};
color: {{ color_contrast($theme_greens) }};
}
.alert.alert-info {
background-color: {{ $theme_blues }} !important;
border-color: {{ color_darken($theme_blues, -0.1) }} !important;
background-color: {{ $theme_blues }};
border-color: {{ color_darken($theme_blues, -0.1) }};
color: {{ color_contrast($theme_blues) }};
}
.alert.alert-danger {
background-color: {{ $theme_reds }} !important;
border-color: {{ color_darken($theme_reds, -0.1) }} !important;
background-color: {{ $theme_reds }};
border-color: {{ color_darken($theme_reds, -0.1) }};
color: {{ color_contrast($theme_reds) }};
}
/**
* Button Overrides
*/
.btn.links {
color: {{ color_darken($theme_yellows, -0.3) }} !important
color: {{ color_darken($theme_yellows, -0.3) }};
}
.btn.btn-success {
background-color: {{ $theme_greens }} !important;
border-color: {{ color_darken($theme_greens, -0.1) }} !important;
background-color: {{ $theme_greens }};
border-color: {{ color_darken($theme_greens, -0.1) }};
color: {{ color_contrast($theme_greens) }};
}
.btn.btn-success.links {
color: {{ color_darken($theme_greens, -0.3) }} !important
color: {{ color_darken($theme_greens, -0.3) }};
}
.btn.btn-info {
background-color: {{ $theme_blues }} !important;
border-color: {{ color_darken($theme_blues, -0.1) }} !important;
background-color: {{ $theme_blues }};
border-color: {{ color_darken($theme_blues, -0.1) }};
color: {{ color_contrast($theme_blues) }};
}
.btn.btn-info.links {
color: {{ color_darken($theme_blues, -0.3) }} !important
color: {{ color_darken($theme_blues, -0.3) }};
}
.btn.btn-danger {
background-color: {{ $theme_reds }} !important;
border-color: {{ color_darken($theme_reds, -0.1) }} !important;
background-color: {{ $theme_reds }};
border-color: {{ color_darken($theme_reds, -0.1) }};
color: {{ color_contrast($theme_reds) }};
}
.btn.btn-danger.links {
color: {{ color_darken($theme_reds, -0.3) }} !important
color: {{ color_darken($theme_reds, -0.3) }};
}
/**
* Background fills Overrides
*/
.component {
background-color: {{ $theme_background_fills }} !important;
border-color: {{ color_darken($theme_background_fills, -0.1) }} !important;
background-color: {{ $theme_background_fills }};
border-color: {{ color_darken($theme_background_fills, -0.1) }};
}
.sub-component {
background-color: {{ $theme_background_fills }} !important;
border-color: {{ color_darken($theme_background_fills, -0.1) }} !important;
background-color: {{ $theme_background_fills }};
border-color: {{ color_darken($theme_background_fills, -0.1) }};
}
.incident {
background-color: {{ $theme_background_fills }} !important;
border-color: {{ color_darken($theme_background_fills, -0.1) }} !important;
background-color: {{ $theme_background_fills }};
border-color: {{ color_darken($theme_background_fills, -0.1) }};
}
.status-icon {
background-color: {{ $theme_background_fills }} !important;
border-color: {{ color_darken($theme_background_fills, -0.1) }} !important;
background-color: {{ $theme_background_fills }};
border-color: {{ color_darken($theme_background_fills, -0.1) }};
}
.panel.panel-message:after {
border-left-color: {{ $theme_background_fills }} !important;
border-right-color: {{ $theme_background_fills }} !important;
border-left-color: {{ $theme_background_fills }};
border-right-color: {{ $theme_background_fills }};
}
.footer {
background-color: {{ $theme_background_fills }} !important;
background-color: {{ $theme_background_fills }};
}
</style>