Variety of html, css, jinja tweaks.

frontends/etiquette_flask/static/css/common.css

@@ -15,11 +15,15 @@ Organization:
 {
     --color_site_theme: #00d8f4;
     --color_site_secondary: #ffffd4;
-    --color_site_transparency: rgba(0, 0, 0, 0.1);
-    --color_site_dropshadow: rgba(0, 0, 0, 0.25);
+
     --color_text_normal: black;
     --color_text_link: blue;
+
+    --color_site_textfields: white;
     --color_text_placeholder: gray;
+
+    --color_site_transparency: rgba(0, 0, 0, 0.1);
+    --color_site_dropshadow: rgba(0, 0, 0, 0.25);
     --color_3d_shadow: rgba(0, 0, 0, 0.5);
     --color_3d_highlight: rgba(255, 255, 255, 0.5);
 }
@@ -38,7 +42,21 @@ body
 * { color: var(--color_text_normal); }
 a { color: var(--color_text_link); }
 
-input::placeholder
+input, select, textarea
+{
+    margin-top: 2px;
+    margin-bottom: 2px;
+
+    padding: 1px;
+    padding-left: 2px;
+
+    border: none;
+    border-radius: 2px;
+
+    background-color: var(--color_site_textfields);
+}
+
+input::placeholder, textarea::placeholder
 {
     color: var(--color_text_placeholder);
     opacity: 1;
@@ -191,8 +209,8 @@ is hovered over.
 .tag_object
 {
     border-radius: 2px;
-    padding-left: 1px;
-    padding-right: 1px;
+    padding-left: 2px;
+    padding-right: 2px;
 
     background-color: #fff;
 

frontends/etiquette_flask/templates/album.html

@@ -138,8 +138,7 @@ li:hover .remove_child_button
         </button>
     </div>
 
-    <!-- Parent & Child tree -->
-    <ul>
+    <ul id="hierarchy_parents">
         {% set viewparam = "?view=list" if view == "list" else "" %}
         {% set parents = album.get_parents() %}
         {% if parents %}
@@ -150,9 +149,9 @@ li:hover .remove_child_button
         <li><a href="/albums">Albums</a></li>
         {% endif %}
 
-        <ul>
+        <ul id="hierarchy_self">
             <li>{{album.display_name}}</li>
-            <ul>
+            <ul id="heirarchy_children">
                 {% set sub_albums = album.get_children() %}
                 {% for sub_album in sub_albums|sort(attribute='title') %}
                 <li>
@@ -186,7 +185,6 @@ li:hover .remove_child_button
         </ul>
     </ul>
 
-    <!-- Photo list -->
     {% set photos = album.get_photos() %}
     {% if photos %}
         <h3>{{photos|length}} Photos</h3>
@@ -202,23 +200,21 @@ li:hover .remove_child_button
         </div>
     {% endif %}
 
-    <!-- Download links -->
     {% set has_local_photos = photos|length > 0 %}
     {% set has_child_photos = album.has_any_subalbum_photo() %}
     {% if has_local_photos or has_child_photos %}
-        <p>
+        <p id="download_links">
             <span>Download:</span>
             {% if has_local_photos %}
-                <a href="/album/{{album.id}}.zip?recursive=no">These files ({{album.sum_bytes(recurse=False)|bytestring }})</a>
+                <a id="download_link_single" href="/album/{{album.id}}.zip?recursive=no">These files ({{album.sum_bytes(recurse=False)|bytestring }})</a>
                 {% if has_child_photos %}<span>&mdash;</span>{% endif %}
             {% endif %}
             {% if has_child_photos %}
-                <a href="/album/{{album.id}}.zip?recursive=yes">Include children ({{album.sum_bytes(recurse=True)|bytestring }})</a>
+                <a id="download_link_recursive" href="/album/{{album.id}}.zip?recursive=yes">Include children ({{album.sum_bytes(recurse=True)|bytestring }})</a>
             {% endif %}
         </p>
     {% endif %}
 
-    <!-- Clipboard -->
     {{clipboard_tray.clipboard_tray()}}
     <div class="my_clipboard_tray_toolbox">
         <button class="green_button" onclick="paste_photo_clipboard()">Add to this album</button>

frontends/etiquette_flask/templates/clipboard.html

@@ -51,14 +51,9 @@
 {
     flex: 1;
 }
-#add_tag_area
-{
-    grid-area: add_tag_area;
-}
-#remove_tag_area
-{
-    grid-area: remove_tag_area;
-}
+#add_tag_area { grid-area: add_tag_area; }
+#remove_tag_area { grid-area: remove_tag_area; }
+
 #add_tag_area input,
 #remove_tag_area input
 {
@@ -69,18 +64,10 @@
 {
     flex: initial;
 }
-#refresh_metadata_area
-{
-    grid-area: refresh_metadata_area;
-}
-#searchhidden_area
-{
-    grid-area: searchhidden_area;
-}
-#download_zip_area
-{
-    grid-area: download_zip_area;
-}
+
+#refresh_metadata_area { grid-area: refresh_metadata_area; }
+#searchhidden_area { grid-area: searchhidden_area; }
+#download_zip_area { grid-area: download_zip_area; }
 #message_area
 {
     grid-area: message_area;

frontends/etiquette_flask/templates/search.html

@@ -18,20 +18,19 @@
     <script src="/static/js/tag_autocomplete.js"></script>
 
 <style>
-form
+#search_builder_form
 {
     display: flex;
     flex-direction: column;
     justify-content: center;
-
-    width: 100%;
 }
+
 #content_body
 {
     grid-template:
         "error_message_area error_message_area" auto
         "left right" 1fr
-        / 300px 1fr;
+        / 310px 1fr;
 }
 #error_message_area
 {