New theme color Clear Digits added

__init__.py

@@ -10,6 +10,7 @@ available_themes = [
     ('clear-red', 'Clear Red'),
     ('clear-green', 'Clear Green'),
     ('clear-blue', 'Clear Blue'),
+    ('clear-digits', 'Clear Digits'),
 ]
 default_theme = 'default'
 

templates/themes/clear-digits/base.css

@@ -0,0 +1,662 @@
+{% load static %}
+/*
+* Common
+*/
+html {
+  color: #0A1E2D;
+  font-family: sans-serif;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin-bottom: 0;
+}
+
+.app-content {
+  padding-top: 30px;
+  padding-bottom: 30px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+h1 {
+  padding: 6px;
+  background-color: #f2f2f2;
+  border-left:5px solid #0A1E2D;
+  border-bottom:5px solid #0A1E2D;
+  font-size: 22px;
+}
+
+.image_bg h1 {
+  margin: 2px 0px;
+  margin-bottom: 4px;
+  border-left:0px;
+  border-bottom:0px;
+}
+
+h2 {
+  padding: 6px;
+  background-color: #f2f2f2;
+  border-left:3px solid #0A1E2D;
+  border-bottom:3px solid #0A1E2D;
+  font-size: 18px;
+}
+
+h3 {
+  padding: 6px;
+  background-color: #f2f2f2;
+  font-size: 14px;
+}
+
+ul {
+  list-style-type: square;
+  padding: 10px 30px;
+}
+
+a {
+  color: #007076;
+  font-weight: bold;
+}
+
+a:hover {
+  background: #01D0DA;
+}
+
+table {
+  opacity: 0.75;
+  background-color: #ffffff;
+  border-collapse: collapse;
+  width: 100%;
+  margin: 2px 0px;
+}
+
+td, th {
+  border: 1px solid #dddddd;
+  text-align: left;
+  padding: 8px;
+}
+
+tr:nth-child(even) {
+  background-color: #dddddd;
+}
+/*
+* Forms
+*/
+.form {
+  background-color: #f2f2f2;
+  padding: 10px 20px;
+  margin: 5px 10px;
+  margin-bottom: 10px;
+}
+
+input[type=text], select {
+  width: 100%;
+  padding: 5px 10px;
+  margin: 4px 0;
+  display: inline-block;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  box-sizing: border-box;
+}
+
+textarea {
+  width: 100%;
+  padding: 5px 10px;
+  margin: 4px 0;
+  display: inline-block;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  box-sizing: border-box;
+}
+
+input[type=password], select {
+  width: 100%;
+  padding: 5px 10px;
+  margin: 4px 0;
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  box-sizing: border-box;
+}
+
+input[type=email], select {
+  width: 100%;
+  padding: 5px 10px;
+  margin: 4px 0;
+  display: inline-block;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  box-sizing: border-box;
+}
+
+input[type=select], select {
+  width: 100%;
+  padding: 5px 10px;
+  margin: 4px 0;
+  display: inline-block;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  box-sizing: border-box;
+}
+
+input[type=file], select {
+  width: 100%;
+  padding: 5px 10px;
+  margin: 4px 0;
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  box-sizing: border-box;
+}
+
+p {
+ margin: 12px 0;
+}
+
+input[type=submit] {
+  width: 100%;
+  background-color: #4CAF50;
+  color: white;
+  padding: 10px 15px;
+  margin: 8px 0;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+input[type=submit]:hover {
+    background-color: #45a049;
+}
+
+label {
+  font-weight: bold;
+}
+
+ul.errorlist {
+  color: red;	
+}
+
+/*
+* Navigation- and Menubars
+*/
+.titlebar {
+  overflow: hidden;
+  background-color: #0A1E2D;
+  color: #01D0DA;
+  padding: 14px 16px;
+  padding-left:75px;
+  font-size: 22px;
+  max-height: 50px;
+}
+
+.page-logo {
+  display: inline;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+
+.page-logo:hover {
+  background-color: transparent;
+}
+
+.titlebar input[type=text] {
+  color: #3796f0;
+  font-weight: bold;
+  float: right;
+  width: 34px;
+  height: 34px;
+  border: none;
+  padding: 7px 7px;
+  padding-left: 5px;
+  padding-right: 34px;
+  border-radius: 2px;
+  margin: 0;
+  -webkit-transition: width 0.4s ease-in-out;
+  transition: width 0.4s ease-in-out;
+  background-color: #4285f4;
+  background-image: url('{% static 'themes/'|add:settings.page_theme|add:'/search.png' %}');
+  background-position: 0px 0px;
+  background-repeat: no-repeat;
+}
+
+.titlebar input[type=text]/*:focus*/ {
+  float: right;
+  display: block;
+  padding-right: 43px;
+  text-align: left;
+  width: 300px;
+  background-position: 263px 0px;
+  max-width: 100%;
+  margin: 0;
+  background-color: white;
+}
+
+/*
+* MENUBAR
+*/
+.menubar {
+    overflow: hidden;
+    background-color: #0A1E2D;
+    z-index: 50;
+}
+
+.bottombar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: calc(100% - 16px);
+    margin-left: 8px;
+    max-height: 53px;
+}
+
+.bottomspace {
+	min-height: 53px;
+}
+
+.menubar a {
+	float: left;
+    font-size: 18px;
+    color: #01D0DA;
+    text-align: center;
+    padding: 4px 15px;
+    text-decoration: none;
+    font-weight: normal;
+}
+
+ .menubar-slim a {
+    padding: 2px 2px;
+    font-weight: normal;
+}
+ 
+.dropdown {
+    float: left;
+    overflow: hidden;
+}
+
+.dropdown .dropbtn {
+    font-size: 18px;    
+    border: none;
+    outline: none;
+    color: #01D0DA;
+    padding: 4px 15px;
+    background-color: inherit;
+    font-family: inherit;
+    margin: 0;
+}
+
+.dropdown-slim .dropbtn-slim {
+    padding: 2px 2px;
+}
+
+.menubar a:hover, .dropdown:hover .dropbtn {
+    background-color: #007076;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 50px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 25;
+}
+
+.dropdown-content a {
+    float: none;
+    color: #0A1E2D;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    text-align: left;
+    font-weight: normal;
+}
+
+.dropdown-content a:hover {
+    background-color: #ddd;
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+/*
+* NAVIGATIONBAR
+*/
+ul.navigationbar {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: #007076;
+  max-height: 24px;
+}
+
+li.navigationbar {
+  color: #0A1E2D;
+  float: left;
+  font-size: 16px;
+}
+
+li.navigationbar a {
+  display: block;
+  color: #0A1E2D;
+  text-align: center;
+  padding: 2px 2px;
+  text-decoration: none;
+  font-weight: normal;
+}
+
+li.navigationbar a:hover {
+  background-color: #01D0DA;
+}
+
+.active_menu {
+  background-color: #007076;
+}
+
+/* When the screen is less than (n*100+250)px wide, reduce content to be shown */
+@media screen and (max-width: calc({{actionbar|length}} * 100px + 250px)) {
+    .action_menu_hide {
+        display: none
+    }
+}
+
+/* When the screen is less than (n*100+250)px wide, reduce content to be shown */
+@media screen and (max-width: calc({{menubar|length}} * 100px + 250px)) {
+    .menu_hide {
+        display: none
+    }
+}
+
+/* When the screen is less than (n*14+75+350)px wide, reduce content to be shown */
+@media screen and (max-width: calc({{title|length}} * 15px + 75px + 350px)) {
+    .title_hide {
+        display: none
+    }
+}
+
+/*
+* Flash (Hint, Info, Error)
+*/
+.hidden {
+  display: none;
+}
+
+.fixed {
+  position: fixed;
+  top: 30px;
+  width: 100%;   /* so wie flash */
+  padding-right:15px;
+  cursor: cell;
+}
+
+.flash{
+  margin: 0px;
+  display: block;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: 16px;
+}
+
+.flash > a {
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.flash > a:hover {
+  background: none;
+  text-decoration: underline;
+}
+
+.flash-hint {
+  color: #205b00;
+  background-color: rgba(221, 255, 221, 0.9);
+  border-left: 6px solid #205b00;
+}
+
+.flash-hint > a {
+  color: #205b00;
+}
+
+.flash-info {
+  color: #204a87;
+  background-color: rgba(212, 239, 255, 0.9);
+  border-left: 6px solid #204a87;
+}
+
+.flash-info > a {
+  color: #204a87;
+}
+
+.flash-error {
+  color: #a40000;
+  background-color: rgba(255, 221, 221, 0.9);
+  border-left: 6px solid #a40000;
+}
+
+.flash-error > a {
+  color: #a40000;
+}
+
+.close-flash {
+  background: #323232;
+  opacity:1;
+  color: #FFFFFF;
+  line-height: 25px;
+  position: absolute;
+  top: 12px;
+  right: 30px;
+  text-align: center;
+  width: 24px;
+  text-decoration: none;
+  font-weight: bold;
+  -webkit-border-radius: 12px;
+  -moz-border-radius: 12px;
+  border-radius: 12px;
+  -moz-box-shadow: 1px 1px 3px #000000;
+  -webkit-box-shadow: 1px 1px 3px #000000;
+  box-shadow: 1px 1px 3px #000000;
+}
+
+#fixed:hover .close-flash {
+  background: #a40000;
+  opacity:1;
+  color: #FFFFFF;
+}
+/*
+* Items 
+*/
+div.itemname {
+  font-weight: bold;
+  padding: 2px;
+  font-size: 14px;
+  text-align: center;
+}
+
+div.datetime {
+  font-style: italic;
+  padding: 2px;
+  font-size: 12px;
+  text-align: center;
+}
+
+audio {
+    width: 100%;
+    margin: 2px 0px;
+    padding: 1px;
+	min-width: 300px; 
+	display: block; 
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.container {
+  position: relative;
+  z-index: 1;
+}
+
+.tag {
+  border: 2px solid rgba(255,100,100,.55);
+  display:block;
+  position:absolute;
+}
+
+.tag:hover {
+  border: 3px solid rgba(255,100,100,.85);
+  background-color: transparent;
+}
+
+.image {
+  float: left;
+  margin: 6px;
+}
+
+.image_bg {
+  background: #0A1E2D;
+  padding: 6px;
+}
+
+.image_bg:hover {
+  background: #007076;
+}
+
+.webnail {
+  max-width: 90vw;
+  max-height: 90vh;
+}
+
+.clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+/*
+* Modal Dialog
+*/
+.modalDialog {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0,0,0,0.8);
+  z-index: 99999;
+  opacity:0;
+  -webkit-transition: opacity 400ms ease-in;
+  -moz-transition: opacity 400ms ease-in;
+  transition: opacity 400ms ease-in;
+  pointer-events: none;
+}
+
+.modalDialog:target {
+  opacity:1;
+  pointer-events: auto;
+}
+
+.modalDialog > div {
+  width:calc(100% - 60px);
+  height: calc(100vh - 60px);
+  overflow-y: auto;
+  position: relative;
+  margin-top: 30px;
+  margin-left: 30px;
+  padding: 5px 20px 13px 20px;
+  border-radius: 10px;
+  background: #ffffff;
+  background: -moz-linear-gradient(#ffffff, #999999);
+  background: -webkit-linear-gradient(#ffffff, #999999);
+  background: -o-linear-gradient(#ffffff, #999999);
+  opacity:0.9;
+}
+
+.close {
+  background: #606061;
+  opacity:1;
+  color: #FFFFFF;
+  line-height: 25px;
+  position: absolute;
+  right: 20px;
+  text-align: center;
+  top: 20px;
+  width: 24px;
+  text-decoration: none;
+  font-weight: bold;
+  -webkit-border-radius: 12px;
+  -moz-border-radius: 12px;
+  border-radius: 12px;
+  -moz-box-shadow: 1px 1px 3px #000000;
+  -webkit-box-shadow: 1px 1px 3px #000000;
+  box-shadow: 1px 1px 3px #000000;
+}
+
+.close:hover {
+  background: #007076;
+  opacity:1;
+  color: #FFFFFF;
+}
+
+.modal-info {
+  margin: 0px;
+  display: block;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: 16px;
+  color: #204a87;
+  background-color: #daefff;
+  border-left: 6px solid #204a87;
+}
+
+.modal-info > a {
+  text-decoration: none;
+  font-weight: bold;
+  color: #204a87;
+}
+
+.modal-info > a:hover {
+  background: none;
+  text-decoration: underline;
+}
+.image_modal {
+  display: flex; 
+  vertical-align: middle;
+}
+
+.webnail_modal {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  margin: auto;
+  zoom: 2;
+}
+
+/*
+ * Sticky Header
+ */
+/* Page content */
+.content {
+}
+
+/* The sticky class is added to the header with JS when it reaches its scroll position */
+.sticky {
+  position: fixed;
+  top: 0;
+  width: calc(100% - 16px);
+}
+
+.sticky-submenu {
+  position: fixed;
+}
+
+/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
+.sticky + .content {
+  padding-top: 30px;
+}

templates/themes/clear-digits/base.html

@@ -0,0 +1,115 @@
+{% load static %}
+{% load i18n %}
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>{{ title }}</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="{% static 'bars/'|add:settings.page_theme|add:'/favicon.ico' %}" />
+
+{% block head_extensions %}{% endblock %}
+
+    <style>
+{% include 'themes/'|add:settings.page_theme|add:'/base.css' %}
+    </style>
+
+  </head>
+  <body lang="en" dir="ltr">
+
+{% block modal %}{% endblock %}
+
+    <form class="titlebar container" action="{% url "search" %}">
+      <a class="page-logo" href="/"><img src="{{ settings.page_image.url }}" alt="Logo" title="{{ title }}"></a>
+      <span class="title_hide">{{ title }}</span>
+      <input type="text" placeholder="{% trans "Search..." %}" name="q">
+    </form>
+
+{% with bar=menubar %}{% include 'themes/'|add:settings.page_theme|add:'/menubar.html' %}{% endwith %}
+
+{% include 'themes/'|add:settings.page_theme|add:'/navigationbar.html' %}
+
+{% with bar=actionbar abar=True %}{% include 'themes/'|add:settings.page_theme|add:'/menubar.html' %}{% endwith %}
+
+    <div class="content">
+{% if messages %}
+      <div id="flash">
+  {% for message in messages %}
+    {% if message.tags == "success" %}
+        <p class="flash flash-hint">{{ message|safe }}</p>
+    {% else %}
+      {% if message.tags == "info" %}
+        <p class="flash flash-info">{{ message|safe }}</p>
+      {% else %}
+        <p class="flash flash-error">{{ message|safe }}</p>
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+      </div>
+{% endif %}
+
+      <div class="app-content">
+{% block content %}{% endblock %}
+      </div>
+
+    <div class="bottomspace"></div>
+
+{% with bar=bottombar bottom=True %}{% include 'themes/'|add:settings.page_theme|add:'/menubar.html' %}{% endwith %}
+    </div>
+
+{% if messages %}
+      <div class="hidden fixed" id="fixed" onclick="myHideFunction()">
+        <div id="flash container">
+  {% for message in messages %}
+    {% if message.tags == "success" %}
+          <p class="flash flash-hint">{{ message|safe }}</p>
+    {% else %}
+      {% if message.tags == "info" %}
+          <p class="flash flash-info">{{ message|safe }}</p>
+      {% else %}
+          <p class="flash flash-error">{{ message|safe }}</p>
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+        </div>
+      <div class="close-flash">X</div>
+    </div>
+{% endif %}
+
+    <script>
+    /*
+    * Sticky Elements
+    */
+    window.onscroll = function() {myScrollFunction()};
+    // Sticky Actionbar
+    var header = document.getElementById("actionbar");
+    var sticky = header.offsetTop;      // Get the offset position of the actionbar
+    // Flash
+    var flash = document.getElementById("flash");
+    var fixed_ = document.getElementById("fixed");
+    var flash_pos = flash.offsetTop;
+    var enabled = true;
+
+    function myScrollFunction() {
+        // Sticky Actionbar
+        if (window.pageYOffset > sticky) {
+            header.classList.add("sticky");
+          } else {
+            header.classList.remove("sticky");
+          }
+		// Flash
+    	if (window.pageYOffset >= flash_pos && enabled){
+            fixed_.classList.remove("hidden");
+        } else {
+            fixed_.classList.add("hidden");
+            enabled = false;
+            }
+    }
+
+    function myHideFunction() {
+        fixed.classList.add("hidden");
+        enabled = false;
+    }
+    </script>
+  </body>
+</html>

templates/themes/clear-digits/menubar.html

@@ -0,0 +1,16 @@
+<div class="menubar{% if slim %} menubar-slim{%endif %}{% if bottom %} bottombar{% endif %}"{% if abar %} id="actionbar"{% endif %}>
+  {% for entry in bar.entries %}
+    {% if entry.is_dropdownmenu %}
+    <div class="dropdown{% if entry.active %} active_menu{% endif %}{% if slim %} dropdown-slim{% endif %}" {% if not entry.left %}style="float:right"{% endif %}>
+      <button class="dropbtn{% if slim %} dropbtn-slim{% endif %}" id="{{ entry.uid }}">{% if entry.icon %}<span><img src="{{ entry.icon|safe }}" alt="{{ entry.uid }}"></span> {% endif %}{% if not reduced %}<span class="{% if bottom == True %}bottom_{% endif %}{% if abar == True %}action_{% endif %}menu_hide">{{ entry.name }}</span>{% endif %}</button>
+      <div class="dropdown-content{% if abar == True %} sticky-submenu{% endif %}" id="{{ entry.uid }}-content">
+        {% for dd in entry %}
+          <a {% if dd.url %}href="{{ dd.url|safe }}"{% endif %}{% if dd.active%}class="active_menu"{% endif%}>{% if dd.icon %}<img src="{{ dd.icon|safe }}" alt="{{ dd.name.0 }}"> {% endif %}{{ dd.name }}</a>
+        {% endfor %}
+      </div>
+    </div> 
+    {% else %}
+    <a {% if entry.url %}href="{{entry.url|safe}}"{% endif %} {% if not entry.left %}style="float:right"{% endif %}{% if entry.active%}class="active_menu"{% endif%}>{% if entry.icon %}<span><img src="{{ entry.icon|safe }}" alt="{{ entry.uid }}"></span> {% endif %}{% if not reduced %}<span class="{% if bottom == True %}bottom_{% endif %}{% if abar == True %}action_{% endif %}menu_hide">{{ entry.name }}</span>{% endif %}</a>
+    {% endif %}
+  {% endfor %}
+</div>

templates/themes/clear-digits/navigationbar.html

@@ -0,0 +1,5 @@
+    <ul class="navigationbar">
+    {% for navi in navigationbar.entries %}
+      <li class="navigationbar"><a {% if navi.url %}href="{{ navi.url }}"{% endif %}>{% if navi.icon %}<img src="{{ navi.icon }}" alt="{{ navi.uid }}">{% endif %}{% if navi.name %}{{ navi.name }}{% endif %}</a></li>
+    {% endfor %}
+    </ul>