From 392aa6a2692cf6bf8df66383caf95bc20c0b7038 Mon Sep 17 00:00:00 2001 From: Xevion Date: Thu, 5 Nov 2020 18:29:41 -0600 Subject: [PATCH] better color styling of icons, text, borders, code tag, tag component, remove old unneeded styling code, move inline styling code out as needed, styling comments inline styling is still very much present and needs to be uplifted out of there, but I'm still not sure of what to name everything. I wish I knew the best practices here. very frustrating that there's no one in the world who cares enough to let me consult for free --- viewer/static/css/main.scss | 159 ++++++++++------------------------- viewer/templates/browse.html | 29 ------- viewer/templates/delete.html | 3 +- viewer/templates/index.html | 22 +---- 4 files changed, 51 insertions(+), 162 deletions(-) diff --git a/viewer/static/css/main.scss b/viewer/static/css/main.scss index b67b392..9f8bf7e 100644 --- a/viewer/static/css/main.scss +++ b/viewer/static/css/main.scss @@ -3,13 +3,12 @@ @import "./../../../bulma/sass/utilities/initial-variables"; @import "./../../../bulma/sass/utilities/functions"; -$primary: hsl(172, 91%, 60%); +$primary: hsl(163, 100%, 49%); $link: hsl(163, 100%, 49%); $link-hover: findDarkColor($link); $body-background-color: $black-bis; -//$background: #0a556d; -//$code-background: #bcf6ff; -//$code: #033343; +$code-background: $grey-darker; +$code: $link; $card-header-color: $link; $panel-heading-background-color: $black-ter; @@ -20,6 +19,12 @@ $text-strong: hsl(0, 0%, 90%); // Dark Mode $scheme-main: $black; $scheme-invert: $white; +$border: rgba($link, 0.4); +$navbar-item-hover-background-color: rgba(0, 0, 0, 0); +$panel-block-color: lighten($link, 50); +$panel-icon-color: $link; +$card-footer-border-top: 1px solid transparentize($white, 0.7); + @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap'); @import "./../../../bulma/bulma.sass"; @@ -28,136 +33,64 @@ html, body { height: 100% } - -//.panel { -// background-color: #0a556d; -// -// .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); -// } -// } -// } -//} - +// Can't figure out how to color panel bottom border with variables .panel-block:not(:last-child), .panel-tabs:not(:last-child) { - border-bottom-color: #0b87ac; -} - -.tag:not(body).is-info { - background-color: #37a0bf; -} - -//.panel-block a { -// color: #ffffff; -//} -// -//.panel-icon, .icon { -// color: #11a3cf; -// -// a { -// -// } -//} - -.icon a { - /*color: inherit;*/ + border-bottom-color: rgba($link, 0.4); } .navbar { - //background-color: #0c5167; - //color: white; font-family: 'Open Sans', sans-serif; + // Make navbar brand title stand out .navbar-brand .navbar-item { - //color: white; font-size: 150%; - font-weight: 700; - - &:focus, &:hover { - text-decoration: none; - //color: inherit; - } + font-weight: 600; } } - -.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; -} - - -//a { -// color: #38c8f8; -// -// &: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: rgba(164, 230, 255, 0.5); -//} - #browse.card .card-content { padding: 0; } -.content .media { - padding: 0 0.5rem; -} +.card .media { + // Cancel out Bulma css + &:not(:last-child) { + margin-bottom: 0; + } -.card .media:not(:last-child) { margin: 0; - padding: 1rem 0; + padding: 1rem; } +.panel-icon { + margin-right: 1em; +} + +// Decrease tag size a bit +.tag:not(body) { + font-size: 0.7rem; + line-height: 1.3; + padding: 0 0.6em; +} + +// Vertically center all icons .icon { vertical-align: middle; } -.delete-icon { - text-align: right; - float: right; - display: inline-block; +.media { + width: 100%; + + b, span, a, p { + padding: 0 3px; + } + + .media-filename { + text-decoration: underline; + text-decoration-color: lighten($link, 15%); + } + + .media-fileid { + color: $link; + } } diff --git a/viewer/templates/browse.html b/viewer/templates/browse.html index 7abae09..016d86e 100644 --- a/viewer/templates/browse.html +++ b/viewer/templates/browse.html @@ -2,23 +2,6 @@ {% block head %} {{ block.super }} {% endblock head %} {% block content %} diff --git a/viewer/templates/delete.html b/viewer/templates/delete.html index 0a186aa..c4e7e89 100644 --- a/viewer/templates/delete.html +++ b/viewer/templates/delete.html @@ -27,9 +27,8 @@

Are you sure you want to remove this directory from the file server? -
{% load humanize %} - {{ directory.path }} contains {{ num_files|intcomma }} files. + {{ directory.path }} contains {{ num_files|intcomma }} files.

diff --git a/viewer/templates/index.html b/viewer/templates/index.html index c346310..ec03608 100644 --- a/viewer/templates/index.html +++ b/viewer/templates/index.html @@ -1,31 +1,17 @@ {% extends 'base.html' %} -{% block head %} - {{ block.super }} - -{% endblock head %} {% block content %}
Directories
{% if directories|length > 0 %} {% for served_directory in directories %} -
- +
+ - + {{ served_directory.path }} {% if served_directory.regex %} - Filtered + Filtered {% endif %}