forked from mirrors/thatmattlove-hyperglass
improve theming [skip ci]
This commit is contained in:
checktheroads
parent
ba1737a5a9
commit
929c1fd92b
4 changed files with 127 additions and 66 deletions
|
|
@ -1,5 +1,5 @@
|
|||
{% if branding.footer.enable %}
|
||||
<nav class="navbar fixed-bottom navbar-footer bg-footer pt-0 pb-0">
|
||||
<nav class="navbar fixed-bottom navbar-footer bg-overlay pt-0 pb-0">
|
||||
<div class="container-fluid row no-gutters text-center p-0">
|
||||
<div class="col-auto float-left">
|
||||
<div class="d-none" id="hg-footer-terms-html">{{ details.footer.content | safe }}</div>
|
||||
|
|
|
|||
|
|
@ -3,32 +3,34 @@ $hg-primary: {{ colors.primary }}
|
|||
$hg-secondary: {{ colors.secondary }}
|
||||
$hg-danger: {{ colors.danger }}
|
||||
$hg-warning: {{ colors.warning }}
|
||||
$hg-light: {{ colors.light }}
|
||||
$hg-dark: {{ colors.dark }}
|
||||
$hg-background: {{ colors.background }}
|
||||
|
||||
// Functions
|
||||
|
||||
@function findTextColor($color)
|
||||
$inverted: invert($color)
|
||||
@if (lightness($color) > 55%)
|
||||
@return $hg-dark
|
||||
$text-color: scale-color($inverted, $lightness: -90%)
|
||||
@return grayscale($text-color)
|
||||
@else
|
||||
@return $hg-light
|
||||
$text-color: scale-color($inverted, $lightness: 90%)
|
||||
@return grayscale($text-color)
|
||||
|
||||
@function findAltBackgroundColor($color)
|
||||
@function findOverlayColor($color)
|
||||
@if (lightness($color) > 55%)
|
||||
@return $hg-light
|
||||
@else
|
||||
@return $hg-dark
|
||||
|
||||
@function findFooterColor($color)
|
||||
@if (lightness($color) > 55%)
|
||||
$darker-color: scale-color($hg-light, $lightness: -3%)
|
||||
$darker-color: scale-color($color, $lightness: -3%)
|
||||
@return grayscale($darker-color)
|
||||
@else
|
||||
$darker-color: scale-color($hg-dark, $lightness: -3%)
|
||||
$darker-color: scale-color($color, $lightness: 5%)
|
||||
@return grayscale($darker-color)
|
||||
|
||||
@function findBorderColor($color)
|
||||
@function findSubtleColor($color)
|
||||
@if (lightness($color) > 55%)
|
||||
$subtle-color: scale-color($color, $lightness: -3%)
|
||||
@return grayscale($subtle-color)
|
||||
@else
|
||||
$subtle-color: scale-color($color, $lightness: 20%)
|
||||
@return grayscale($subtle-color)
|
||||
|
||||
@function findInvertedColor($color)
|
||||
$inverted: invert($color)
|
||||
@if (lightness($inverted) > 55%)
|
||||
$border: scale-color($inverted, $lightness: -3%)
|
||||
|
|
@ -37,29 +39,88 @@ $hg-background: {{ colors.background }}
|
|||
$border: scale-color($inverted, $lightness: 3%)
|
||||
@return grayscale($border)
|
||||
|
||||
@function findFieldColor($color)
|
||||
@if (lightness($color) > 55%)
|
||||
@return $color
|
||||
@else
|
||||
$darker-color: scale-color($color, $lightness: 5%)
|
||||
@return grayscale($darker-color)
|
||||
|
||||
//// Body Color
|
||||
$body-bg: $hg-background
|
||||
$body-color: findTextColor($body-bg)
|
||||
|
||||
// Global variables
|
||||
$hg-overlay: findOverlayColor($hg-background)
|
||||
$hg-inverted: findInvertedColor($hg-background)
|
||||
$hg-field: findFieldColor($hg-background)
|
||||
$hg-border: rgba(findInvertedColor($hg-overlay), .2)
|
||||
$hg-primary-color: findTextColor($hg-primary)
|
||||
|
||||
// App variables
|
||||
$hg-loading: findAltBackgroundColor($hg-background)
|
||||
$hg-footer: findFooterColor($hg-background)
|
||||
$hg-loading: $hg-overlay
|
||||
$hg-footer: $hg-overlay
|
||||
$hg-overlay-bg: $hg-overlay
|
||||
$hg-overlay-color: findTextColor($hg-overlay-bg)
|
||||
$hg-inverted-bg: $hg-inverted
|
||||
$hg-inverted-color: findTextColor($hg-inverted-bg)
|
||||
$hg-field-bg: $hg-field
|
||||
$hg-field-color: findTextColor($hg-field-bg)
|
||||
|
||||
// Theme Overrides
|
||||
$theme-colors: ("primary": $hg-primary, "secondary": $hg-secondary, "danger": $hg-danger, "warning": $hg-warning, "light": $hg-light, "dark": $hg-dark, "loading": $hg-loading, "footer": $hg-footer)
|
||||
// Bootstrap Overrides
|
||||
|
||||
$font-family-sans-serif: "{{ font.primary }}", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
|
||||
$font-family-monospace: "{{ font.mono }}", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
|
||||
$headings-font-weight: 400
|
||||
//// Components
|
||||
$component-active-color: findTextColor($hg-primary)
|
||||
|
||||
$enable-responsive-font-sizes: true
|
||||
$enable-validation-icons: false
|
||||
//// Flags
|
||||
$enable-responsive-font-sizes: true
|
||||
$enable-validation-icons: false
|
||||
$theme-colors: ("primary": $hg-primary, "secondary": $hg-secondary, "danger": $hg-danger, "warning": $hg-warning, "light": findTextColor(black), "dark": findTextColor(white), "overlay": $hg-overlay)
|
||||
|
||||
$body-bg: $hg-background
|
||||
$body-color: findTextColor($body-bg)
|
||||
//// Fonts/Text
|
||||
$font-family-sans-serif: "{{ font.primary }}", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
|
||||
$font-family-monospace: "{{ font.mono }}", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
|
||||
$headings-font-weight: 400
|
||||
|
||||
$border-radius: .44rem
|
||||
$border-radius-lg: .4rem
|
||||
$border-radius-sm: .35rem
|
||||
//// Borders
|
||||
$border-radius: .44rem
|
||||
$border-radius-lg: .4rem
|
||||
$border-radius-sm: .35rem
|
||||
|
||||
$popover-bg: $hg-background
|
||||
$popover-border-color: rgba(findBorderColor($popover-bg), .2)
|
||||
$popover-body-color: findTextColor($popover-bg)
|
||||
//// Popovers
|
||||
$popover-bg: $hg-field-bg
|
||||
$popover-border-color: $hg-border
|
||||
$popover-body-color: $hg-field-color
|
||||
|
||||
$card-border-color: findBorderColor($body-bg)
|
||||
//// Cards
|
||||
$card-bg: $hg-field-bg
|
||||
$card-color: $hg-field-color
|
||||
$card-border-color: $hg-border
|
||||
|
||||
//// Dropdowns
|
||||
$dropdown-bg: $hg-field-bg
|
||||
$dropdown-color: $hg-field-color
|
||||
$dropdown-divider-bg: $hg-border
|
||||
$dropdown-border-color: $hg-border
|
||||
$dropdown-header-color: findSubtleColor($dropdown-color)
|
||||
$dropdown-link-color: $hg-field-color
|
||||
$dropdown-link-hover-bg: $hg-primary
|
||||
$dropdown-link-hover-color: $hg-primary-color
|
||||
$dropdown-link-active-bg: $hg-primary
|
||||
$dropdown-link-active-color: $hg-primary-color
|
||||
|
||||
////Forms
|
||||
$input-bg: $hg-field-bg
|
||||
$input-color: $hg-field-color
|
||||
$input-border-color: $hg-border
|
||||
$input-placeholder-color: findSubtleColor($hg-field-color)
|
||||
$input-btn-focus-box-shadow: none
|
||||
$input-focus-bg: findSubtleColor($input-bg)
|
||||
$input-focus-color: $input-color
|
||||
$input-focus-border-color: findOverlayColor($hg-border)
|
||||
|
||||
//// Code
|
||||
$code-color: $hg-secondary
|
||||
$kbd-bg: findOverlayColor($hg-overlay)
|
||||
$kbd-color: $hg-overlay-color
|
||||
$pre-color: $body-color
|
||||
|
|
@ -175,7 +175,7 @@ const queryApp = (queryType, queryTypeName, locationList, queryTarget) => {
|
|||
|
||||
const contentHtml = `
|
||||
<div class="card" id="${loc}-output">
|
||||
<div class="card-header bg-loading" id="${loc}-heading">
|
||||
<div class="card-header bg-overlay" id="${loc}-heading">
|
||||
<div class="float-right hg-status-container" id="${loc}-status-container">
|
||||
<button type="button" class="float-right btn btn-loading btn-lg hg-menu-btn hg-status-btn"
|
||||
data-location="${loc}" id="${loc}-status-btn" disabled>
|
||||
|
|
@ -215,13 +215,14 @@ const queryApp = (queryType, queryTypeName, locationList, queryTarget) => {
|
|||
|
||||
const generateError = (errorClass, locError, text) => {
|
||||
const iconError = '<i class="hg-menu-icon hg-status-icon remixicon-alert-line"></i>';
|
||||
$(`#${locError}-heading`).removeClass('bg-loading').addClass(`bg-${errorClass}`);
|
||||
$(`#${locError}-heading`).removeClass('bg-overlay').addClass(`bg-${errorClass}`);
|
||||
$(`#${locError}-heading`).find('.hg-menu-btn').removeClass('btn-loading').addClass(`btn-${errorClass}`);
|
||||
$(`#${locError}-status-container`)
|
||||
.removeClass('hg-loading')
|
||||
.find('.hg-status-btn')
|
||||
.empty()
|
||||
.html(iconError);
|
||||
.html(iconError)
|
||||
.addClass('hg-done');
|
||||
$(`#${locError}-text`).html(text);
|
||||
}
|
||||
|
||||
|
|
@ -241,13 +242,14 @@ const queryApp = (queryType, queryTypeName, locationList, queryTarget) => {
|
|||
.done((data, textStatus, jqXHR) => {
|
||||
const displayHtml = `<pre>${jqXHR.responseText}</pre>`;
|
||||
const iconSuccess = '<i class="hg-menu-icon hg-status-icon remixicon-check-line"></i>';
|
||||
$(`#${loc}-heading`).removeClass('bg-loading').addClass('bg-primary');
|
||||
$(`#${loc}-heading`).removeClass('bg-overlay').addClass('bg-primary');
|
||||
$(`#${loc}-heading`).find('.hg-menu-btn').removeClass('btn-loading').addClass('btn-primary');
|
||||
$(`#${loc}-status-container`)
|
||||
.removeClass('hg-loading')
|
||||
.find('.hg-status-btn')
|
||||
.empty()
|
||||
.html(iconSuccess);
|
||||
.html(iconSuccess)
|
||||
.addClass('hg-done');
|
||||
$(`#${loc}-text`).empty().html(displayHtml);
|
||||
})
|
||||
.fail((jqXHR, textStatus, errorThrown) => {
|
||||
|
|
@ -256,9 +258,9 @@ const queryApp = (queryType, queryTypeName, locationList, queryTarget) => {
|
|||
if (textStatus === 'timeout') {
|
||||
const displayHtml = 'Request timed out.';
|
||||
const iconTimeout = '<i class="remixicon-time-line"></i>';
|
||||
$(`#${loc}-heading`).removeClass('bg-loading').addClass('bg-warning');
|
||||
$(`#${loc}-heading`).removeClass('bg-overlay').addClass('bg-warning');
|
||||
$(`#${loc}-heading`).find('.hg-menu-btn').removeClass('btn-loading').addClass('btn-warning');
|
||||
$(`#${loc}-status-container`).removeClass('hg-loading').find('.hg-status-btn').empty().html(iconTimeout);
|
||||
$(`#${loc}-status-container`).removeClass('hg-loading').find('.hg-status-btn').empty().html(iconTimeout).addClass('hg-done');
|
||||
$(`#${loc}-text`).empty().html(displayHtml);
|
||||
} else if (codesDanger.includes(jqXHR.status)) {
|
||||
generateError('danger', loc, jqXHR.responseText);
|
||||
|
|
@ -350,19 +352,19 @@ clipboard.on('error', (e) => {
|
|||
console.log(e);
|
||||
});
|
||||
|
||||
$('#hg-accordion').on('mouseenter', '.hg-status-btn', (e) => {
|
||||
$('#hg-accordion').on('mouseenter', '.hg-done', (e) => {
|
||||
$(e.currentTarget)
|
||||
.find('.hg-status-icon')
|
||||
.addClass('remixicon-repeat-line');
|
||||
});
|
||||
|
||||
$('#hg-accordion').on('mouseleave', '.hg-status-btn', (e) => {
|
||||
$('#hg-accordion').on('mouseleave', '.hg-done', (e) => {
|
||||
$(e.currentTarget)
|
||||
.find('.hg-status-icon')
|
||||
.removeClass('remixicon-repeat-line');
|
||||
});
|
||||
|
||||
$('#hg-accordion').on('click', '.hg-status-btn', (e) => {
|
||||
$('#hg-accordion').on('click', '.hg-done', (e) => {
|
||||
const thisLocation = $(e.currentTarget).data('location');
|
||||
console.log(`Refreshing ${thisLocation}`);
|
||||
const queryType = $('#query_type').val();
|
||||
|
|
|
|||
|
|
@ -268,10 +268,17 @@
|
|||
|
||||
.input-group-lg > .form-control:not(textarea),
|
||||
.input-group-lg > .custom-select,
|
||||
bootstrap-select.form-control-lg .dropdown-toggle, .input-group-append > .btn
|
||||
.bootstrap-select.form-control-lg .dropdown-toggle, .input-group-append > .btn
|
||||
height: $input-height-lg !important
|
||||
padding: $input-padding-y-lg $input-padding-x-lg !important
|
||||
|
||||
.form-control
|
||||
transition: background-color .15s ease-in-out,box-shadow .15s ease-in-out !important
|
||||
color: $input-color !important
|
||||
|
||||
.bootstrap-select > .dropdown-toggle.bs-placeholder
|
||||
color: $input-placeholder-color !important
|
||||
|
||||
.hg-back:hover
|
||||
text-decoration: none
|
||||
border: 1px solid $hg-primary !important
|
||||
|
|
@ -287,7 +294,7 @@ bootstrap-select.form-control-lg .dropdown-toggle, .input-group-append > .btn
|
|||
bottom: 5rem !important
|
||||
border-radius: 50rem !important
|
||||
border: 1px solid $card-border-color !important
|
||||
background-color: $hg-loading
|
||||
background-color: $hg-field-bg !important
|
||||
transition: all .3s !important
|
||||
font-weight: 200 !important
|
||||
font-size: 1.4rem !important
|
||||
|
|
@ -371,11 +378,11 @@ bootstrap-select.form-control-lg .dropdown-toggle, .input-group-append > .btn
|
|||
background-color: darken($hg-danger, 10%) !important
|
||||
border-color: $hg-danger !important
|
||||
|
||||
.bg-loading
|
||||
.btn-loading:hover
|
||||
color: findTextColor($hg-loading) !important
|
||||
background-color: darken($hg-loading, 10%) !important
|
||||
border-color: $hg-loading !important
|
||||
.bg-overlay
|
||||
.btn-overlay:hover
|
||||
color: findTextColor($hg-overlay) !important
|
||||
background-color: darken($hg-overlay, 10%) !important
|
||||
border-color: $hg-overlay !important
|
||||
|
||||
.bg-primary
|
||||
*
|
||||
|
|
@ -389,13 +396,9 @@ bootstrap-select.form-control-lg .dropdown-toggle, .input-group-append > .btn
|
|||
*
|
||||
color: findTextColor($hg-warning) !important
|
||||
|
||||
.bg-loading
|
||||
.bg-overlay
|
||||
*
|
||||
color: findTextColor($hg-loading) !important
|
||||
|
||||
.bg-footer
|
||||
*
|
||||
color: findTextColor($hg-footer) !important
|
||||
color: findTextColor($hg-overlay) !important
|
||||
|
||||
.bg-primary
|
||||
::selection, ::-moz-selection
|
||||
|
|
@ -412,15 +415,10 @@ bootstrap-select.form-control-lg .dropdown-toggle, .input-group-append > .btn
|
|||
background-color: findTextColor($hg-warning) !important
|
||||
color: $hg-warning !important
|
||||
|
||||
.bg-loading
|
||||
.bg-overlay
|
||||
::selection, ::-moz-selection
|
||||
background-color: findTextColor($hg-loading) !important
|
||||
color: $hg-loading !important
|
||||
|
||||
.bg-loading
|
||||
::selection, ::-moz-selection
|
||||
background-color: findTextColor($hg-footer) !important
|
||||
color: $hg-footer !important
|
||||
background-color: findTextColor($hg-overlay) !important
|
||||
color: $hg-overlay !important
|
||||
|
||||
.bg-danger
|
||||
.btn-outline-danger
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue