Rearrange some button CSS classes to be more generic.

Adds CSS variables for the highlight and shadow so they don't need
to be custom-defined for each color of button.
Elements should use more generic classes like green_button instead of
add_tag_button unless there's a good reason.

frontends/etiquette_flask/static/common.css

@@ -1,7 +1,8 @@
 /*
 Organization:
 {
-    display and alignment
+    display and flexing
+    positioning and alignment
     bounding box (width, margin, overflow, ...)
     borders and shadows
     backgrounds
@@ -9,6 +10,12 @@ Organization:
     misc
 }
 */
+:root
+{
+    --color_site_theme: #00d8f4;
+    --color_3d_shadow: rgba(0, 0, 0, 0.5);
+    --color_3d_highlight: rgba(255, 255, 255, 0.5);
+}
 body
 {
     display: flex;
@@ -16,7 +23,7 @@ body
 
     margin: 8px;
 
-    background-color:#00d8f4;
+    background-color: var(--color_site_theme);
 }
 li
 {
@@ -57,50 +64,37 @@ li
     flex: 0 0 auto;
     flex-direction: row;
 }
-#search_go_button,
+
-.add_tag_button,
-.editor_open_button,
-.editor_save_button,
 .green_button
 {
-    border-top: 2px solid #c2ffc3;
-    border-left: 2px solid #c2ffc3;
-    border-right: 2px solid #259427;
-    border-bottom: 2px solid #259427;
     background-color: #6df16f;
 }
-#search_go_button:active,
-.add_tag_button:active,
-.editor_open_button:active,
-.editor_save_button:active,
-.green_button:active
-{
-    border-top: 2px solid #259427;
-    border-left: 2px solid #259427;
-    border-right: 2px solid #c2ffc3;
-    border-bottom: 2px solid #c2ffc3;
-}
-.remove_tag_button,
-.remove_tag_button_perm,
-.editor_cancel_button,
 .red_button
 {
-    border-top: 2px solid #ffacac;
-    border-left: 2px solid #ffacac;
-    border-right: 2px solid #bd1b1b;
-    border-bottom: 2px solid #bd1b1b;
-
     background-color: #ff4949;
 }
-.remove_tag_button:active,
+.yellow_button
-.remove_tag_button_perm:active,
-.editor_cancel_button:active,
-.red_button:active
 {
-    border-top: 2px solid #bd1b1b;
+    background-color: #ffea57;
-    border-left: 2px solid #bd1b1b;
+}
-    border-right: 2px solid #ffacac;
+
-    border-bottom: 2px solid #ffacac;
+.green_button,
+.red_button,
+.yellow_button
+{
+    border-top: 2px solid var(--color_3d_highlight);
+    border-left: 2px solid var(--color_3d_highlight);
+    border-right: 2px solid var(--color_3d_shadow);
+    border-bottom: 2px solid var(--color_3d_shadow);
+}
+.green_button:active,
+.red_button:active,
+.yellow_button:active
+{
+    border-top: 2px solid var(--color_3d_shadow);
+    border-left: 2px solid var(--color_3d_shadow);
+    border-right: 2px solid var(--color_3d_highlight);
+    border-bottom: 2px solid var(--color_3d_highlight);
 }
 
 .remove_tag_button,

frontends/etiquette_flask/static/common.js

@@ -178,6 +178,7 @@ function Editor(elements, on_open, on_save, on_cancel)
     this.open_button.innerText = "Edit";
     this.open_button.classList.add("editor_button");
     this.open_button.classList.add("editor_open_button");
+    this.open_button.classList.add("green_button");
     this.open_button.onclick = this.bound_open.bind(this);
     toolbox.appendChild(this.open_button);
 
@@ -185,6 +186,7 @@ function Editor(elements, on_open, on_save, on_cancel)
     this.save_button.innerText = "Save";
     this.save_button.classList.add("editor_button");
     this.save_button.classList.add("editor_save_button");
+    this.save_button.classList.add("green_button");
     this.save_button.classList.add("hidden");
     this.save_button.onclick = this.bound_save.bind(this);
     toolbox.appendChild(this.save_button);
@@ -193,6 +195,7 @@ function Editor(elements, on_open, on_save, on_cancel)
     this.cancel_button.innerText = "Cancel";
     this.cancel_button.classList.add("editor_button");
     this.cancel_button.classList.add("editor_cancel_button");
+    this.cancel_button.classList.add("red_button");
     this.cancel_button.classList.add("hidden");
     this.cancel_button.onclick = this.bound_cancel.bind(this);
     toolbox.appendChild(this.cancel_button);

frontends/etiquette_flask/static/photoclipboard.js

@@ -155,6 +155,7 @@ function update_clipboard_tray()
 
             var clipboard_line_delete_button = document.createElement("button");
             clipboard_line_delete_button.classList.add("remove_tag_button_perm");
+            clipboard_line_delete_button.classList.add("red_button");
             clipboard_line_delete_button.onclick = on_tray_delete_button;
 
             var clipboard_line_link = document.createElement("a");

frontends/etiquette_flask/templates/clipboard_tray.html

@@ -2,10 +2,12 @@
 <div id="clipboard_tray">
     <button
     id="clipboard_tray_expandbutton"
-    class="green_button"
+    class="yellow_button"
     onclick="toggle_clipboard_tray_collapsed()"
     >Clipboard: 0 items</button>
     <div id="clipboard_tray_body" class="hidden">
+        <div id="clipboard_tray_toolbox">
+        </div>
         <div id="clipboard_tray_lines">
         </div>
     </div>

frontends/etiquette_flask/templates/photo.html

@@ -163,14 +163,14 @@
         <ul id="this_tags">
             <li>
                 <input id="add_tag_textbox" type="text" autofocus>
-                <button id="add_tag_button" class="add_tag_button" onclick="submit_tag(receive_callback);">add</button>
+                <button id="add_tag_button" class="green_button" onclick="submit_tag(receive_callback);">add</button>
             </li>
             {% set tags = photo.sorted_tags() %}
             {% for tag in tags %}
             <li>
                 {{tag_object.tag_object(tag, qualified_name=True, max_len=30, with_alt_description=True, with_alt_qualified_name=True)}}<!--
                 --><button
-                class="remove_tag_button"
+                class="remove_tag_button red_button"
                 onclick="remove_photo_tag('{{photo.id}}', '{{tag.name}}', receive_callback);">
                 </button>
             </li>
@@ -180,7 +180,7 @@
         <!-- METADATA & DOWNLOAD -->
         <h4>
             File info
-            <button id="refresh_metadata_button" class="add_tag_button" onclick="refresh_metadata('{{photo.id}}');">refresh</button>
+            <button id="refresh_metadata_button" class="green_button" onclick="refresh_metadata('{{photo.id}}');">refresh</button>
         </h4>
         <ul id="metadata">
         <li>Filename: {{photo.basename}}</li>

frontends/etiquette_flask/templates/search.html

@@ -139,7 +139,7 @@ form
         <option value="desc" {%if selected_sorter=="desc"%}selected{%endif%} >Descending</option>
         <option value="asc"  {%if selected_sorter=="asc"%}selected{%endif%} >Ascending</option>
     </select>
-    <button class="remove_tag_button_perm" onclick="orderby_remove_hook(this);"></button>
+    <button class="remove_tag_button_perm red_button" onclick="orderby_remove_hook(this);"></button>
 </li>
 {% endmacro %}
 </head>
@@ -191,7 +191,7 @@ form
                 {% else %}
                 {{ create_orderby_li(selected_column=0, selected_sorter=0) }}
                 {% endif %}
-                <li id="search_builder_orderby_newrow"><button class="add_tag_button" onclick="add_new_orderby()">+</button></li>
+                <li id="search_builder_orderby_newrow"><button class="green_button" onclick="add_new_orderby()">+</button></li>
             </ul>
         </div>
         <br>
@@ -265,7 +265,7 @@ form
                 <option value="grid" {%if search_kwargs['view'] == "grid" %}selected{%endif%}>Grid</option>
                 <option value="list" {%if search_kwargs['view'] == "list" %}selected{%endif%}>List</option>
             </select>
-            <button type="submit" id="search_go_button" value="">Search</button>
+            <button type="submit" id="search_go_button" class="green_button" value="">Search</button>
         </form>
         {% if total_tags %}
         <span>Tags on this page (click to join query):</span>