Various CSS for panels and margins.

frontends/etiquette_flask/static/css/common.css

@@ -117,23 +117,22 @@ pre
     grid-area: right;
 }
 
-.sticky_side_left
+#content_body.sticky_side_left
 {
     grid-template:
         "left right"
         /var(--size_sticky_side) 1fr;
 }
-.sticky_side_right
+#content_body.sticky_side_right
 {
     grid-template:
         "left right"
         /1fr var(--size_sticky_side);
 }
 
-.sticky_side_left #left,
+#content_body.sticky_side_left #left,
-.sticky_side_right #right
+#content_body.sticky_side_right #right
 {
-    grid-area: right;
     display: grid;
     grid-auto-rows: min-content;
 
@@ -141,15 +140,25 @@ pre
     position: fixed;
     bottom: 8px;
     top: 34px;
+    padding: 8px;
+    box-sizing: border-box;
     width: var(--size_sticky_side);
     overflow-y: auto;
     background-color: var(--color_site_transparency);
 }
-.sticky_side_left #left
+#content_body.sticky_side_right #left
+{
+    margin-right: 8px;
+}
+#content_body.sticky_side_left #right
+{
+    margin-left: 8px;
+}
+#content_body.sticky_side_left #left
 {
     left: 8px;
 }
-.sticky_side_right #right
+#content_body.sticky_side_right #right
 {
     right: 8px;
 }
@@ -164,6 +173,12 @@ pre
 {
     display: none !important;
 }
+.panel
+{
+    background-color: var(--color_site_transparency);
+    border-radius: 5px;
+    padding: 8px;
+}
 
 button,
 button *
@@ -241,9 +256,9 @@ is hovered over.
     padding-left: 2px;
     padding-right: 2px;
 
-    background-color: #fff;
+    background-color: var(--color_tag_object_bg);
+    color: var(--color_tag_object_fg);
 
-    color: blue;
     font-size: 0.9em;
     text-decoration: none;
     font-family: monospace;
@@ -267,6 +282,10 @@ is hovered over.
 
     word-wrap: break-word;
 }
+.message_bubble *
+{
+    color: var(--color_text_bubble);
+}
 .message_positive
 {
     background-color: #afa;

frontends/etiquette_flask/templates/album.html

@@ -7,16 +7,6 @@ h2, h3
 {
     margin-top: 0;
 }
-#left
-{
-    margin-right: 8px;
-}
-#left > *
-{
-    background-color: var(--color_site_transparency);
-    padding: 8px;
-    border-radius: 5px;
-}
 #left > *:not(:last-child)
 {
     margin-bottom: 30px;
@@ -107,7 +97,7 @@ h2, h3
 {{header.make_header(session=session)}}
 <div id="content_body" class="sticky_side_right">
     <div id="left">
-        <div id="album_list">
+        <div id="album_list" class="panel">
             <h2>Albums</h2>
             {% for album in albums %}
             {{album_card.create_album_card(album, view=view)}}
@@ -220,7 +210,7 @@ ALBUM_ID = undefined;
     </div>
 
     <div id="left">
-        <div id="hierarchy_self">
+        <div id="hierarchy_self" class="panel">
             <div id="album_metadata">
                 <h2><span
                 id="title_text"
@@ -243,7 +233,7 @@ ALBUM_ID = undefined;
             <button class="green_button editor_toolbox_placeholder">Edit</button>
         </div>
 
-        <div id="hierarchy_parents">
+        <div id="hierarchy_parents" class="panel">
             {% set parents = album.get_parents() %}
             {% if parents %}
                 <h3>{{parents|length}} Parents</h3>
@@ -258,7 +248,7 @@ ALBUM_ID = undefined;
 
         {% set sub_albums = album.get_children() %}
         {% if sub_albums %}
-        <div id="hierarchy_children">
+        <div id="hierarchy_children" class="panel">
             <h3>{{sub_albums|length}} Children</h3>
             {% for sub_album in sub_albums|sort(attribute='title') %}
                 {{album_card.create_album_card(sub_album, view=view, unlink_parent=album)}}
@@ -268,7 +258,7 @@ ALBUM_ID = undefined;
 
         {% set photos = album.get_photos() %}
         {% if photos %}
-        <div id="hierarchy_photos">
+        <div id="hierarchy_photos" class="panel">
             <h3>{{photos|length}} Photos</h3>
             <div id="photo_list">
             {% for photo in photos %}
@@ -281,7 +271,7 @@ ALBUM_ID = undefined;
         {% set has_local_photos = photos|length > 0 %}
         {% set has_child_photos = album.has_any_subalbum_photo() %}
         {% if has_local_photos or has_child_photos %}
-        <div id="download_links">
+        <div id="download_links" class="panel">
             <h3>Download</h3>
             {% if has_local_photos %}
                 <p><a id="download_link_single" href="/album/{{album.id}}.zip?recursive=no">These files &ndash; {{album.sum_bytes(recurse=False)|bytestring}}</a></p>

frontends/etiquette_flask/templates/clipboard.html

@@ -36,11 +36,11 @@
         "searchhidden_area"
         "download_zip_area"
         "message_area" 1fr;
+    grid-row-gap: 8px;
 }
 #right > *
 {
     display: flex;
-    padding: 8px;
 }
 #right .spinner_holder
 {
@@ -71,7 +71,6 @@
 #message_area
 {
     grid-area: message_area;
-    margin: 8px;
 }
 @media screen and (max-width: 800px)
 {
@@ -108,8 +107,10 @@
 {{header.make_header(session=session)}}
 <div id="content_body" class="sticky_side_right">
 <div id="left">
-    <span>The clipboard contains <span class="clipboard_count">0</span> items.</span>
+    <div class="panel">The clipboard contains <span class="clipboard_count">0</span> items.
     <button id="clear_clipboard_button" class="red_button" onclick="photo_clipboard.clear_clipboard()">Clear it.</button>
+    </div>
+
     <div id="photo_card_holder">
     </div>
 </div>

frontends/etiquette_flask/templates/tags.html

@@ -65,7 +65,6 @@ h2, h3
 #message_area
 {
     grid-area: message_area;
-    margin: 8px;
 }
 @media screen and (max-width: 800px)
 {