mirror of
https://github.com/checktheroads/hyperglass
synced 2024-05-11 05:55:08 +00:00
add theming
This commit is contained in:
checktheroads
@@ -1,7 +1,7 @@
|
||||
<div class="container animsition" data-animsition-out-class="fade-out-left" data-animsition-in-class="fade-in-right"
|
||||
id="hg-results">
|
||||
<div class="container mb-lg-1 mt-lg-1">
|
||||
<div class="row mb-lg-1">
|
||||
<div class="row mb-lg-1 px-1">
|
||||
<div class="col align-self-center d-flex justify-content-between">
|
||||
<div class="text-left align-self-end">
|
||||
<h2 id="hg-results-title"></h2>
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
// Jinja2-rendered theme elements
|
||||
$hg-primary: {{ colors.primary }}
|
||||
$hg-background: {{ colors.background }}
|
||||
$hg-light: {{ colors.light }}
|
||||
$hg-dark: {{ colors.dark }}
|
||||
$hg-danger: {{ colors.danger }}
|
||||
$hg-warning: {{ colors.warning }}
|
||||
|
||||
// Functions
|
||||
@function findTextColor($color)
|
||||
@if (lightness($color) > 55%)
|
||||
@return $hg-dark
|
||||
@else
|
||||
@return $hg-light
|
||||
|
||||
@function findAltBackgroundColor($color)
|
||||
@if (lightness($color) > 55%)
|
||||
@return $hg-light
|
||||
@else
|
||||
@return $hg-dark
|
||||
|
||||
// App variables
|
||||
|
||||
$hg-loading: findAltBackgroundColor($hg-background)
|
||||
|
||||
// Theme Overrides
|
||||
$theme-colors: ("primary": $hg-primary, "danger": $hg-danger, "warning": $hg-warning, "light": $hg-light, "dark": $hg-dark, "loading": $hg-loading)
|
||||
$body-bg: $hg-background
|
||||
$body-color: findTextColor($body-bg)
|
||||
@@ -1,15 +1,3 @@
|
||||
// Functions
|
||||
|
||||
@function findTextColor($color) {
|
||||
@if (lightness($color) > 55%) {
|
||||
@return $dark;
|
||||
}
|
||||
|
||||
@else {
|
||||
@return $light;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom Classes
|
||||
|
||||
@media (min-width: 576px) {
|
||||
@@ -181,6 +169,6 @@
|
||||
}
|
||||
|
||||
// Imports
|
||||
@import "./theme.sass";
|
||||
@import "./node_modules/bootstrap/scss/bootstrap";
|
||||
@import "./overrides.sass";
|
||||
@import "./theme.sass";
|
||||
@@ -21,7 +21,7 @@
|
||||
|
||||
.hg-back:hover
|
||||
text-decoration: none
|
||||
border: 1px solid $primary !important
|
||||
border: 1px solid $hg-primary !important
|
||||
|
||||
.hg-back:focus
|
||||
text-decoration: none
|
||||
@@ -90,90 +90,85 @@
|
||||
outline: none !important
|
||||
box-shadow: none
|
||||
|
||||
// .hg-results-loading
|
||||
// background-color: $hg-loading-bg
|
||||
|
||||
// .btn-loading
|
||||
// background-color: $hg-loading-bg
|
||||
// color: $hg-loading-text
|
||||
|
||||
.bg-primary
|
||||
.btn-primary:hover
|
||||
color: findTextColor($hg-primary) !important
|
||||
background-color: darken($hg-primary, 10%) !important
|
||||
border-color: $hg-primary !important
|
||||
|
||||
.bg-warning
|
||||
.btn-warning:hover
|
||||
color: findTextColor($hg-warning) !important
|
||||
background-color: darken($hg-warning, 10%) !important
|
||||
border-color: $hg-warning !important
|
||||
|
||||
.bg-danger
|
||||
.btn-danger:hover
|
||||
color: findTextColor($hg-danger) !important
|
||||
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-primary
|
||||
*
|
||||
color: findTextColor($primary) !important
|
||||
|
||||
.bg-secondary
|
||||
*
|
||||
color: findTextColor($secondary) !important
|
||||
|
||||
.bg-success
|
||||
*
|
||||
color: findTextColor($success) !important
|
||||
color: findTextColor($hg-primary) !important
|
||||
|
||||
.bg-danger
|
||||
*
|
||||
color: findTextColor($danger) !important
|
||||
color: findTextColor($hg-danger) !important
|
||||
|
||||
.bg-warning
|
||||
*
|
||||
color: findTextColor($warning) !important
|
||||
color: findTextColor($hg-warning) !important
|
||||
|
||||
.bg-info
|
||||
.bg-loading
|
||||
*
|
||||
color: findTextColor($info) !important
|
||||
|
||||
.bg-light
|
||||
*
|
||||
color: findTextColor($light) !important
|
||||
|
||||
.bg-dark
|
||||
*
|
||||
color: findTextColor($dark) !important
|
||||
color: findTextColor($hg-primary) !important
|
||||
|
||||
.bg-primary
|
||||
::selection, ::-moz-selection
|
||||
background-color: findTextColor($primary) !important
|
||||
color: $primary !important
|
||||
|
||||
.bg-secondary
|
||||
::selection, ::-moz-selection
|
||||
background-color: findTextColor($secondary) !important
|
||||
color: $secondary !important
|
||||
|
||||
.bg-success
|
||||
::selection, ::-moz-selection
|
||||
background-color: findTextColor($success) !important
|
||||
color: $success !important
|
||||
background-color: findTextColor($hg-primary) !important
|
||||
color: $hg-primary !important
|
||||
|
||||
.bg-danger
|
||||
::selection, ::-moz-selection
|
||||
background-color: findTextColor($danger) !important
|
||||
color: $danger !important
|
||||
background-color: findTextColor($hg-danger) !important
|
||||
color: $hg-danger !important
|
||||
|
||||
.bg-warning
|
||||
::selection, ::-moz-selection
|
||||
background-color: findTextColor($warning) !important
|
||||
color: $warning !important
|
||||
background-color: findTextColor($hg-warning) !important
|
||||
color: $hg-warning !important
|
||||
|
||||
.bg-info
|
||||
.bg-loading
|
||||
::selection, ::-moz-selection
|
||||
background-color: findTextColor($info) !important
|
||||
color: $info !important
|
||||
|
||||
.bg-light
|
||||
::selection, ::-moz-selection
|
||||
background-color: findTextColor($light) !important
|
||||
color: $light !important
|
||||
|
||||
.bg-dark
|
||||
::selection, ::-moz-selection
|
||||
background-color: findTextColor($dark) !important
|
||||
color: $dark !important
|
||||
background-color: findTextColor($hg-loading) !important
|
||||
color: $hg-loading !important
|
||||
|
||||
.bg-danger
|
||||
.btn-outline-danger
|
||||
border-color: findTextColor($danger) !important
|
||||
border-color: findTextColor($hg-danger) !important
|
||||
|
||||
.bg-danger
|
||||
.btn-outline-danger:hover
|
||||
background-color: findTextColor($danger) !important
|
||||
color: $danger !important
|
||||
background-color: findTextColor($hg-danger) !important
|
||||
color: $hg-danger !important
|
||||
|
||||
.bg-danger
|
||||
hr
|
||||
background-color: darken($danger, 10%)
|
||||
background-color: darken($hg-danger, 10%)
|
||||
|
||||
.modal-body > p
|
||||
padding-left: 0.3rem !important
|
||||
|
||||
@@ -621,8 +621,12 @@ def start_dev_server(host, port):
|
||||
@hg.command("dev-server", help="Start development web server")
|
||||
@click.option("--host", type=str, default="0.0.0.0", help="Listening IP")
|
||||
@click.option("--port", type=int, default=5000, help="TCP Port")
|
||||
def dev_server(host, port):
|
||||
@click.option(
|
||||
"--assets/--no-assets", default=False, help="Render Theme & Build Web Assets"
|
||||
)
|
||||
def dev_server(host, port, assets):
|
||||
"""Renders theme and web assets, then starts dev web server"""
|
||||
if assets:
|
||||
try:
|
||||
assets_rendered = render_hyperglass_assets()
|
||||
except Exception as e:
|
||||
@@ -632,6 +636,8 @@ def dev_server(host, port):
|
||||
)
|
||||
if assets_rendered:
|
||||
start_dev_server(host, port)
|
||||
if not assets:
|
||||
start_dev_server(host, port)
|
||||
|
||||
|
||||
@hg.command("render-assets", help="Render theme & build web assets")
|
||||
|
||||
Reference in New Issue
Block a user