From 54cde2c3dd8a8d015d199b343e0970ac1517e4f6 Mon Sep 17 00:00:00 2001
From: Wolfgang Meier <wolfgang@existsolutions.com>
Date: Fri, 26 Jan 2024 11:29:17 +0000
Subject: [PATCH] Annotations: improve form styling

---
 resources/css/annotate.css    | 57 +++++++++++++++++++++++++++++++++++
 templates/pages/annotate.html |  4 +--
 2 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/resources/css/annotate.css b/resources/css/annotate.css
index 08415cc9..b870bc5b 100644
--- a/resources/css/annotate.css
+++ b/resources/css/annotate.css
@@ -11,6 +11,63 @@ html {
 /* Fore style overwrites for annotations  */
 /* Fore style overwrites for annotations  */
 /* Fore style overwrites for annotations  */
+
+fx-group fx-control {
+    padding-left: .5rem;
+}
+
+fx-control input, fx-control select {
+    box-sizing: border-box;
+    margin: 0 0 .5rem 0;
+    padding: 0;
+    font-family: 'Roboto', sans-serif;
+    font-size: 1rem;
+    color: var(--paper-input-container-input-color);
+}
+
+fx-control label {
+    font-size: 1rem;
+    margin-bottom: 5px;
+    color: #333;
+    /* Text color */
+}
+
+fx-control input[type="text"] {
+    width: calc(100% - 2rem);
+    padding: 12px 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    outline: none;
+    /* Remove default focus outline */
+    transition: border-color 0.2s ease;
+}
+
+fx-control input[type="text"]:focus {
+    border-color: #007bff;
+    /* Change border color on focus */
+}
+
+fx-control select {
+    width: calc(100% - 2rem);
+    padding: 10px;
+    border: none;
+    border-radius: 4px;
+    font-size: 16px;
+    outline: none;
+    /* Remove default focus outline */
+    background-color: #fff;
+    /* Background color */
+    transition: outline 0.3s ease;
+    /* Add transition effect for outline */
+}
+
+/* Apply hover and focus styles */
+fx-control select:hover,
+fx-control select:focus {
+    outline: 2px solid #007bff;
+    /* Increase outline width and change color on hover and focus */
+}
+  
 /*!
  * Toastify js 1.11.0
  * https://github.com/apvarun/toastify-js
diff --git a/templates/pages/annotate.html b/templates/pages/annotate.html
index 6a0fa729..56e226bf 100644
--- a/templates/pages/annotate.html
+++ b/templates/pages/annotate.html
@@ -120,9 +120,7 @@
                         <iron-form id="edit-form">
                             <form action="">
                                 <div class="annotation-form person organization place term">
-                                    <paper-input class="form-ref" name="ref" data-i18n="[label]annotations.reference" label="Reference">
-                                        <paper-icon-button slot="prefix" icon="search" data-i18n="[label]annotations.lookup"></paper-icon-button>
-                                    </paper-input>
+                                    <paper-input class="form-ref" name="ref" data-i18n="[label]annotations.reference" label="Reference"></paper-input>
                                     <div class="authority-info"><pb-i18n key="dialogs.loading">Loading ...</pb-i18n></div>
                                     <pb-restricted group="tei">
                                         <paper-icon-button icon="editor:mode-edit" id="edit-entity" data-i18n="[title]annotations.edit-entity"></paper-icon-button>