Move colours to HSL, probably a mistake

This commit is contained in:
Michał Gdula 2023-09-26 19:36:49 +01:00
parent 9821db72c6
commit 1a59e413a9
29 changed files with 852 additions and 730 deletions

View file

@ -29,6 +29,13 @@
{% 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>
{% block head %}{% endblock %}
</head>
<body>

View file

@ -20,30 +20,29 @@
<style>
{% if images %}
:root { --bg-100: {{ images.0.colours.0.0 }}, {{ images.0.colours.0.1 }}, {{ images.0.colours.0.2 }} }
:root {
--background-hsl-hue: {{ images.0.colours.0 | hsl_hue }};
--background-hsl-saturation: {{ images.0.colours.0 | hsl_saturation }}%;
}
/*
body {
background: rgb{{ images.0.colours.0 }} !important;
color: {{ text_colour }} !important;
}
main {
background: rgba(var(--white), 0.6) !important;
.navigation-item.selected {
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 {
background-color: {{ text_colour }} !important;
color: rgb{{ images.0.colours.0 }} !important;
}
.banner-content .link:hover {
background-color: rgb{{ images.0.colours.0 }} !important;
color: {{ text_colour }} !important;
}
@ -55,6 +54,7 @@
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 %}

View file

@ -32,10 +32,10 @@
<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>
<button class="pill-item" onclick="imageFullscreen()"><i class="ph ph-info"></i></button>
<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>
{% if image.author.id == current_user.id %}
<button class="pill-item pill__critical" onclick="imageShowOptionsPopup(this)"><i class="ph-fill ph-dots-three-outline-vertical"></i></button>
<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 %}

View file

@ -16,50 +16,34 @@
{% endblock %}
{% block content %}
<div class="info-tab" id="profileSettings" style="margin: 0.5rem 0.5rem 0 0.5rem">
<div class="info-header">
<i class="ph ph-info"></i>
<h2>Profile Settings</h2>
<button class="collapse-indicator"><i class="ph ph-caret-down"></i></button>
</div>
<div class="info-table">
<form method="POST" action="{{ url_for('api.account_picture', user_id=current_user.id) }}" enctype="multipart/form-data">
<h3>Profile Picture</h3>
<input type="file" name="file" tab-index="-1"/>
<input type="submit" value="Upload" class="btn-block">
</form>
<form method="POST" action="{{ url_for('api.account_username', user_id=current_user.id) }}" enctype="multipart/form-data">
<h3>Username</h3>
<input type="text" name="name" class="input-block" value="{{ current_user.username }}" />
<input type="submit" value="Upload" class="btn-block"/>
</form>
</div>
</div>
<details open>
<summary>
<i class="ph ph-info"></i><h2>Profile</h2><span style="width: 100%"></span>
<i class="ph ph-caret-down collapse-indicator"></i>
</summary>
<div class="info-tab" id="profileSettings" style="margin: 0.5rem 0.5rem 0 0.5rem">
<div class="info-header">
<i class="ph ph-info"></i>
<h2>Account Settings</h2>
<button class="collapse-indicator"><i class="ph ph-caret-down"></i></button>
</div>
<div class="info-table">
<form method="POST" action="" enctype="multipart/form-data">
<form method="POST" action="{{ url_for('api.account_picture', user_id=current_user.id) }}" enctype="multipart/form-data">
<h3>Profile Picture</h3>
<input type="file" name="file" tab-index="-1"/>
<input type="submit" value="Upload" class="btn-block">
</form>
<form method="POST" action="{{ url_for('api.account_username', user_id=current_user.id) }}" enctype="multipart/form-data">
<h3>Username</h3>
<input type="text" name="name" class="input-block" value="{{ current_user.username }}" />
<input type="submit" value="Upload" class="btn-block"/>
</form>
</details>
<details open>
<summary>
<i class="ph ph-info"></i><h2>Account</h2><span style="width: 100%"></span>
<i class="ph ph-caret-down collapse-indicator"></i>
</summary>
<form method="POST" action="" enctype="multipart/form-data">
<h3>Email</h3>
<input type="text" name="email" class="input-block" value="{{ current_user.email }}" />
<input type="submit" value="Upload" class="btn-block"/>
</form>
</div>
</div>
{% endblock %}
{% block script %}
<script type="text/javascript">
let infoTab = document.querySelectorAll('.info-tab');
for (let i = 0; i < infoTab.length; i++) {
infoTab[i].querySelector('.collapse-indicator').addEventListener('click', function() {
infoTab[i].classList.toggle('collapsed');
});
}
</script>
</details>
{% endblock %}