xevion/simple-viewer
1
0
Fork 0
mirror of https://github.com/Xevion/simple-viewer.git synced 2025-12-06 03:16:32 -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"; @charset "utf-8";
$body-background-color: #92e1ff; @import "./../../../bulma/sass/utilities/initial-variables";
$background: #0a556d; @import "./../../../bulma/sass/utilities/functions";
$code-background: #bcf6ff;
$code: #033343; $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 url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap');
@import "./../../../bulma/bulma.sass"; @import "./../../../bulma/bulma.sass";
@@ -13,14 +29,35 @@ html, body {
} }
.panel { //.panel {
background-color: #0a556d; // background-color: #0a556d;
//
// .panel-heading {
// background-color: #17a0cd;
// color: white;
// }
//}
.panel-heading { //.card {
background-color: #17a0cd; // background-color: #0a556d;
color: white; // 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) { .panel-block:not(:last-child), .panel-tabs:not(:last-child) {
border-bottom-color: #0b87ac; border-bottom-color: #0b87ac;
@@ -30,35 +67,35 @@ html, body {
background-color: #37a0bf; background-color: #37a0bf;
} }
.panel-block a { //.panel-block a {
color: #ffffff; // color: #ffffff;
} //}
//
.panel-icon, .icon { //.panel-icon, .icon {
color: #11a3cf; // color: #11a3cf;
//
a { // a {
//
} // }
} //}
.icon a { .icon a {
/*color: inherit;*/ /*color: inherit;*/
} }
.navbar { .navbar {
background-color: #0c5167; //background-color: #0c5167;
color: white; //color: white;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
.navbar-brand .navbar-item { .navbar-brand .navbar-item {
color: white; //color: white;
font-size: 150%; font-size: 150%;
font-weight: 700; font-weight: 700;
&:focus, &:hover { &:focus, &:hover {
text-decoration: none; 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 { .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; background-color: inherit;
color: inherit; //color: inherit;
} }
.card-header { //a {
background-color: #17a0cd; // color: #38c8f8;
} //
// &:hover {
.card { // color: #a4e6ff;
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;
}
}
.checkbox { .checkbox {
color: white; //color: white;
} }
.checkbox:hover { .checkbox:hover {
color: #a4e6ff; //color: #a4e6ff;
} }
a.card-footer-item { a.card-footer-item {
color: #c9f2ff; //color: #c9f2ff;
} }
a.card-footer-item:hover { a.card-footer-item:hover {
color: white; //color: white;
} }
.navbar-item, p, .label, .card-header-title { .navbar-item, p, .label, .card-header-title {
color: white; //color: white;
} }
.media + .media { //.media + .media {
border-top-color: rgba(164, 230, 255, 0.5); // border-top-color: rgba(164, 230, 255, 0.5);
} //}
#browse.card .card-content { #browse.card .card-content {
padding: 0; padding: 0;
@@ -145,11 +161,3 @@ a.card-footer-item:hover {
float: right; float: right;
display: inline-block; 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 %} {% block content %}
<div class="card"> <div class="card">
<header class="card-header"> <header class="card-header">
<p class="card-header-title"> <h3 class="card-header-title">
Add New Directory Add New Directory
</p> </h3>
</header> </header>
<div class="card-content"> <div class="card-content">
<div class="content"> <div class="content">

8
viewer/templates/base.html
View File

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

40
viewer/templates/index.html
View File

@@ -16,23 +16,31 @@
{% block content %} {% block content %}
<div class="panel"> <div class="panel">
<div class="panel-heading">Directories</div> <div class="panel-heading">Directories</div>
{% for served_directory in directories %} {% if directories|length > 0 %}
<div class="panel-block"> {% for served_directory in directories %}
<span class="panel-icon"> <div class="panel-block">
<i class="fas fa-folder fa-lg" aria-hidden="true"></i> <span class="panel-icon">
</span> <i class="fas fa-folder fa-lg" aria-hidden="true"></i>
<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>
</span> </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> </div>
{% endfor %} {% endif %}
</div> </div>
{% endblock content %} {% endblock content %}