Galleries/PythonGallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2025-06-29 03:26:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Allow for styling

Browse source
This commit is contained in:
Michał Gdula 2023-09-27 13:59:31 +01:00
parent 3496a3bbe9
commit b4bc8c61ec
11 changed files with 161 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

18
onlylegs/templates/base.html
View file

@ -28,10 +28,20 @@
{% assets "scripts" %} <script type="text/javascript" src="{{ ASSET_URL }}"></script> {% endassets %}
{% assets "styles" %} <link rel="stylesheet" href="{{ ASSET_URL }}" type="text/css" defer> {% endassets %}
<style type="text/css">
:root{
--primary: {{ config.WEBSITE_CONF.primary_color | default('rgb(198, 185, 166)') }};
}
<style>
{% if config.WEBSITE_CONF.styling.force %}
:root{
--background-hsl-hue: {{ config.WEBSITE_CONF.styling.hue }} !important;
--background-hsl-saturation: {{ config.WEBSITE_CONF.styling.saturation }}% !important;
--rad: {{ config.WEBSITE_CONF.styling.rad }} !important;
}
{% else %}
:root{
--background-hsl-hue: {{ config.WEBSITE_CONF.styling.hue }};
--background-hsl-saturation: {{ config.WEBSITE_CONF.styling.saturation }}%;
--rad: {{ config.WEBSITE_CONF.styling.rad }};
}
{% endif %}
</style>
{% block head %}{% endblock %}

31
onlylegs/templates/group.html
View file

@ -24,37 +24,6 @@
--background-hsl-hue: {{ images.0.colours.0 | hsl_hue }};
--background-hsl-saturation: {{ images.0.colours.0 | hsl_saturation }}%;
}
/*
body {
color: {{ text_colour }} !important;
}
.navigation-item.selected {
color: {{ text_colour }} !important;
}
.banner .banner-content .banner-header,
.banner .banner-content .banner-info,
.banner .banner-content .banner-subtitle {
color: {{ text_colour }} !important;
}
.banner-content .link {
color: rgb{{ images.0.colours.0 }} !important;
}
.banner-content .link:hover {
color: {{ text_colour }} !important;
}
.banner-filter {
background: linear-gradient(90deg, rgb{{ images.0.colours.0 }}, rgba({{ images.0.colours.1.0 }}, {{ images.0.colours.1.1 }}, {{ images.0.colours.1.2 }}, 0.3)) !important;
}
@media (max-width: 800px) {
.banner-filter {
background: linear-gradient(180deg, rgba({{ images.0.colours.1.0 }}, {{ images.0.colours.1.1 }}, {{ images.0.colours.1.2 }}, 0.4), rgba({{ images.0.colours.0.0 }}, {{ images.0.colours.0.1 }}, {{ images.0.colours.0.2 }}, 0.3)) !important;
}
}
*/
{% endif %}
</style>
{% endblock %}

16
onlylegs/templates/image.html
View file

@ -18,6 +18,10 @@
</script>
<style>
:root {
--background-hsl-hue: {{ image.colours.2 | hsl_hue }};
--background-hsl-saturation: {{ image.colours.2 | hsl_saturation }}%;
}
.background::after {
background-image: linear-gradient(to top, rgba({{ image.colours.0.0 }}, {{ image.colours.0.1 }}, {{ image.colours.0.2 }}, 0.8),
rgba({{ image.colours.1.0 }}, {{ image.colours.1.1 }}, {{ image.colours.1.2 }}, 0.2));
@ -30,7 +34,11 @@
<div class="banner-content">
<h1 class="banner-header">{{ config.WEBSITE_CONF.name }}</h1>
<div class="pill-row">
{% if next_url %}<div><a class="pill-item" href="{{ next_url }}"><i class="ph ph-arrow-left"></i></a></div>{% endif %}
<div>
<a {% if next_url %}class="pill-item" href="{{ next_url }}"{% else %}class="pill-item disabled"{% endif %}>
<i class="ph ph-arrow-left"></i>
</a>
</div>
<div>
<button class="pill-item" onclick="imageFullscreen()" id="fullscreenImage"><i class="ph ph-info"></i></button>
<button class="pill-item" onclick="copyToClipboard(window.location.href)"><i class="ph ph-export"></i></button>
@ -38,7 +46,11 @@
<button class="pill-item" onclick="imageShowOptionsPopup(this)"><i class="ph ph-list"></i></button>
{% endif %}
</div>
{% if prev_url %}<div><a class="pill-item" href="{{ prev_url }}"><i class="ph ph-arrow-right"></i></a></div>{% endif %}
<div>
<a {% if prev_url %}class="pill-item" href="{{ prev_url }}"{% else %}class="pill-item disabled"{% endif %}>
<i class="ph ph-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>

32
onlylegs/templates/settings.html
View file

@ -66,6 +66,36 @@
<i class="ph ph-caret-down collapse-indicator"></i>
</summary>
<p>Nothing here :3</p>
<form method="POST" action="{{ url_for('settings.website_style') }}" enctype="multipart/form-data">
<h3>Style</h3>
<input type="range" name="hue" class="input-block" placeholder="Website Hue" value="{{ config.WEBSITE_CONF.styling.hue }}" min="0" max="360" />
<input type="range" name="saturation" class="input-block" placeholder="Strength of Color" value="{{ config.WEBSITE_CONF.styling.saturation }}" min="0" max="100" />
<input type="text" name="rad" class="input-block" placeholder="Roundy roundy" value="{{ config.WEBSITE_CONF.styling.rad }}" />
<input type="checkbox" name="force" class="input-block" placeholder="Force styling?" {% if config.WEBSITE_CONF.styling.force %}checked{% endif %} />
<button type="submit" class="btn-block">Update style</button>
</form>
</details>
<footer>
<p>Built on coffee and love, by Fluffy</p>
</footer>
{% endblock %}
{% block script %}
<script>
let hue = document.querySelector('input[name=hue]');
let saturation = document.querySelector('input[name=saturation]');
let rad = document.querySelector('input[name=rad]');
hue.addEventListener('input', () => {
document.documentElement.style.setProperty('--background-hsl-hue', hue.value, 'important');
});
saturation.addEventListener('input', () => {
document.documentElement.style.setProperty('--background-hsl-saturation', saturation.value + '%', 'important');
});
rad.addEventListener('input', () => {
document.documentElement.style.setProperty('--rad', rad.value, 'important');
});
</script>
{% endblock %}