xevion/simple-viewer
1
0
Fork 0
mirror of https://github.com/Xevion/simple-viewer.git synced 2025-12-06 01:16:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

complete refactor of styling to dark theme with neon turquoise colors via bulma variables

Browse Source
This commit is contained in:
Xevion
2020-11-05 14:25:39 -06:00
parent 60d13d2467
commit 85cf832ec2
4 changed files with 109 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
viewer/static/css/main.scss
View File

@@ -1,9 +1,25 @@
@charset "utf-8";
$body-background-color: #92e1ff;
$background: #0a556d;
$code-background: #bcf6ff;
$code: #033343;
@import "./../../../bulma/sass/utilities/initial-variables";
@import "./../../../bulma/sass/utilities/functions";
$primary: hsl(172, 91%, 60%);
$link: hsl(163, 100%, 49%);
$link-hover: findDarkColor($link);
$body-background-color: $black-bis;
//$background: #0a556d;
//$code-background: #bcf6ff;
//$code: #033343;
$card-header-color: $link;
$panel-heading-background-color: $black-ter;
$panel-shadow: hsla(172, 91%, 60%, 0.02);
$text: hsl(0, 0%, 70%);
$text-strong: hsl(0, 0%, 90%);
// Dark Mode
$scheme-main: $black;
$scheme-invert: $white;
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap');
@import "./../../../bulma/bulma.sass";
@@ -13,14 +29,35 @@ html, body {
}
.panel {
background-color: #0a556d;
//.panel {
// background-color: #0a556d;
//
// .panel-heading {
// background-color: #17a0cd;
// color: white;
// }
//}
.panel-heading {
background-color: #17a0cd;
color: white;
}
}
//.card {
// background-color: #0a556d;
// color: white;
//
// .card-header {
// background-color: #17a0cd;
// }
//
// .card-footer {
// border-top-color: rgba(207, 245, 255, 0.5);
//
// .card-footer-item {
// background-color: #0c6988;
//
// &:not(:last-child) {
// border-right-color: rgba(207, 245, 255, 0.5);
// }
// }
// }
//}
.panel-block:not(:last-child), .panel-tabs:not(:last-child) {
border-bottom-color: #0b87ac;
@@ -30,35 +67,35 @@ html, body {
background-color: #37a0bf;
}
.panel-block a {
color: #ffffff;
}
.panel-icon, .icon {
color: #11a3cf;
a {
}
}
//.panel-block a {
// color: #ffffff;
//}
//
//.panel-icon, .icon {
// color: #11a3cf;
//
// a {
//
// }
//}
.icon a {
/*color: inherit;*/
}
.navbar {
background-color: #0c5167;
color: white;
//background-color: #0c5167;
//color: white;
font-family: 'Open Sans', sans-serif;
.navbar-brand .navbar-item {
color: white;
//color: white;
font-size: 150%;
font-weight: 700;
&:focus, &:hover {
text-decoration: none;
color: inherit;
//color: inherit;
}
}
}
@@ -66,62 +103,41 @@ html, body {
.navbar-link.is-active, .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, a.navbar-item.is-active, a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover {
background-color: inherit;
color: inherit;
//color: inherit;
}
.card-header {
background-color: #17a0cd;
}
.card {
background-color: #0a556d;
color: white;
.card-footer {
border-top-color: rgba(207, 245, 255, 0.5);
.card-footer-item {
background-color: #0c6988;
&:not(:last-child) {
border-right-color: rgba(207, 245, 255, 0.5);
}
}
}
}
a {
color: #38c8f8;
&:hover {
color: #a4e6ff;
}
}
//a {
// color: #38c8f8;
//
// &:hover {
// color: #a4e6ff;
// }
//}
.checkbox {
color: white;
//color: white;
}
.checkbox:hover {
color: #a4e6ff;
//color: #a4e6ff;
}
a.card-footer-item {
color: #c9f2ff;
//color: #c9f2ff;
}
a.card-footer-item:hover {
color: white;
//color: white;
}
.navbar-item, p, .label, .card-header-title {
color: white;
//color: white;
}
.media + .media {
border-top-color: rgba(164, 230, 255, 0.5);
}
//.media + .media {
// border-top-color: rgba(164, 230, 255, 0.5);
//}
#browse.card .card-content {
padding: 0;
@@ -145,11 +161,3 @@ a.card-footer-item:hover {
float: right;
display: inline-block;
}
.delete-icon .icon {
color: #d63b3b;
}
.image-placeholder img {
background-color: #17a0cd;
}

4
viewer/templates/add.html
View File

@@ -2,9 +2,9 @@
{% block content %}
<div class="card">
<header class="card-header">
<p class="card-header-title">
<h3 class="card-header-title">
Add New Directory
</p>
</h3>
</header>
<div class="card-content">
<div class="content">

8
viewer/templates/base.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
{% block head %}
<meta charset="utf-8">
@@ -12,9 +12,9 @@
<body class="has-navbar-fixed-top">
<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">
Simple Viewer
</a>
<h1 class="navbar-item">
<a href="/">Simple Viewer</a>
</h1>
</div>
<div class="navbar-menu">
<div class="navbar-start">

40
viewer/templates/index.html
View File

@@ -16,23 +16,31 @@
{% block content %}
<div class="panel">
<div class="panel-heading">Directories</div>
{% for served_directory in directories %}
<div class="panel-block">
<span class="panel-icon">
<i class="fas fa-folder fa-lg" aria-hidden="true"></i>
</span>
<a href="{% url 'browse' served_directory.id %}">
{{ served_directory.path }}
{% if served_directory.regex %}
<span class="tag is-info">Filtered</span>
{% endif %}
</a>
<a href="{% url 'delete' served_directory.id %}" class="delete-icon">
<span class="icon">
<i class="fas fa-times fa-lg" aria-hidden="true"></i>
{% if directories|length > 0 %}
{% for served_directory in directories %}
<div class="panel-block">
<span class="panel-icon">
<i class="fas fa-folder fa-lg" aria-hidden="true"></i>
</span>
</a>
<a href="{% url 'browse' served_directory.id %}">
{{ served_directory.path }}
{% if served_directory.regex %}
<span class="tag is-info">Filtered</span>
{% endif %}
</a>
<a href="{% url 'delete' served_directory.id %}">
<span class="icon has-text-danger">
<i class="fas fa-times fa-lg" aria-hidden="true"></i>
</span>
</a>
</div>
{% endfor %}
{% else %}
<div class="panel-block">
<p>
No directories available.
</p>
</div>
{% endfor %}
{% endif %}
</div>
{% endblock content %}