mirror of
https://github.com/Xevion/simple-viewer.git
synced 2025-12-06 05:16:35 -06:00
confirm deletion footer styling, link color styling, white checkboxes, overall styling improvements/edits
This commit is contained in:
Xevion
@@ -8,7 +8,7 @@ html, body {
|
||||
|
||||
.panel-heading {
|
||||
background-color: #17a0cd;
|
||||
color: #ffffff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.panel {
|
||||
@@ -27,8 +27,12 @@ html, body {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.panel-icon {
|
||||
color: #0b87ac;
|
||||
.panel-icon, .icon {
|
||||
color: #11a3cf;
|
||||
}
|
||||
|
||||
.icon a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
@@ -37,10 +41,6 @@ html, body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
.navbar-item {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar-brand .navbar-item {
|
||||
color: white;
|
||||
font-size: 150%;
|
||||
@@ -58,14 +58,81 @@ html, body {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #0a556d;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: #17a0cd;
|
||||
}
|
||||
|
||||
.card-header-title {
|
||||
.card {
|
||||
background-color: #0a556d;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
border-top-color: rgba(207, 245, 255, 0.5);
|
||||
}
|
||||
|
||||
.card-footer-item:not(:last-child) {
|
||||
border-right-color: rgba(207, 245, 255, 0.5);
|
||||
}
|
||||
|
||||
.card-footer-item {
|
||||
background-color: #0c6988;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #38c8f8;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #a4e6ff;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.checkbox:hover {
|
||||
color: #a4e6ff;
|
||||
}
|
||||
|
||||
a.card-footer-item {
|
||||
color: #c9f2ff;
|
||||
}
|
||||
|
||||
a.card-footer-item:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar-item, p, .label, .card-header-title {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.media + .media {
|
||||
border-top-color: #a4e6ff;
|
||||
}
|
||||
|
||||
#browse.card .card-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content .media {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.card .media:not(:last-child) {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.delete-icon {
|
||||
text-align: right;
|
||||
float: right;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.delete-icon .icon {
|
||||
color: #d63b3b;
|
||||
}
|
||||
|
||||
@@ -13,35 +13,48 @@
|
||||
</style>
|
||||
{% endblock head %}
|
||||
{% block content %}
|
||||
<div class="card">
|
||||
<div id="browse" class="card">
|
||||
<div class="card-header">
|
||||
<p class="card-header-title">
|
||||
{{ directory.path }}
|
||||
<span class="pl-1" style="font-weight: 400; font-style: italic; font-size: 70%;">
|
||||
{{ files|length }} files
|
||||
</span>
|
||||
<span class="icon align-self">
|
||||
<a href="{% url 'refresh' directory.id %}">
|
||||
<i class="fas fa-sync"></i>
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
<div class="is-flex is-align-content-end" style="width: 100%;">
|
||||
<div>
|
||||
<p class="card-header-title">
|
||||
{{ directory.path }}
|
||||
</p>
|
||||
<span class="pl-1" style="font-weight: 400; font-style: italic; font-size: 70%;">
|
||||
{{ files|length }} files
|
||||
</span>
|
||||
</div>
|
||||
<div style="vertical-align: middle;">
|
||||
<span class="icon">
|
||||
<a href="{% url 'index' %}">
|
||||
<i class="fas fa-arrow-up" aria-hidden="true"></i>
|
||||
</a>
|
||||
</span>
|
||||
<span class="icon">
|
||||
<a href="{% url 'refresh' directory.id %}">
|
||||
<i class="fas fa-sync"></i>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
{% for directory in directories %}
|
||||
<div>
|
||||
<span class="icon">
|
||||
<i class="fas fa-folder"></i>
|
||||
</span>
|
||||
{{ directory }}
|
||||
</div>
|
||||
<div>
|
||||
<span class="icon">
|
||||
<i class="fas fa-folder"></i>
|
||||
</span>
|
||||
<a href="{% url 'add' %}?path={{ file.fullpath }}">
|
||||
{{ directory }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
{% for file in files %}
|
||||
<div class="media">
|
||||
{% load static %}
|
||||
<img class="px-2" loading="lazy" src="{% static "/thumbnails/"|add:file.thumbnail %}">
|
||||
<img class="px-2" loading="lazy" src="{% static file.thumbnail_static_path %}">
|
||||
<span class="media-filename">
|
||||
<a href="{% url 'file' directory.id file.filename %}">
|
||||
{{ file.filename }}
|
||||
@@ -52,36 +65,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-heading">
|
||||
{{ directory.path }}
|
||||
<span style="font-weight: 400; font-style: italic; font-size: 70%;">
|
||||
{{ files|length }} files
|
||||
</span>
|
||||
<span style="vertical-align: middle;" class="panel-icon">
|
||||
<a href="{% url 'index' %}">
|
||||
<i class="fas fa-arrow-up" aria-hidden="true"></i>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
{% for file in files %}
|
||||
<div class="panel-block">
|
||||
<span class="panel-icon pr-4">
|
||||
{# <i class="fas fa-{{ file }} fa-lg" aria-hidden="true"></i>#}
|
||||
</span>
|
||||
{% if file.1 == 'folder' %}
|
||||
<a href="{% url 'add' %}?path={{ file.fullpath }}">
|
||||
{{ file.filename }}
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{% url 'file' directory.id file.filename %}">
|
||||
{{ file.filename }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
|
||||
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
Reference in New Issue
Block a user